/**
 * 이 파일은 iModule 의 일부입니다. (https://www.imodules.io)
 *
 * iModule 에서 공통적으로 사용되는 스타일을 정의한다.
 * 사이트템플릿의 styles 폴더에 common.css 파일이 정의되어 있다면, 이 스타일시트 파일을 무시하고, 해당 스타일시트를 사용한다.
 * 만약 사이트템플릿에서 common.css 파일을 생성하여 사용할 경우 가급적 이 스타일시트 파일에 정의되어 있는 요소를 모두 정의하여 사용하는 것을 권장한다.
 * @see /styles/common.css
 * @see /classes/iModule.class.php -> getHeadResource()
 * 
 * @file /styles/style.css
 * @author Arzz (arzz@arzz.com)
 * @license MIT License
 * @version 3.0.0
 * @modified 2020. 1. 22.
 */
* {padding:0px; margin:0px; -webkit-font-smoothing:antialiased;}
*:focus {outline:none;}
html, body {width:100%; height:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; font-size:14px; color:#222;}
body {overflow:auto;}
header, main, footer, section, aside, article {display:block;}
body[data-scroll] {position:fixed; height:100%;}
body > div[data-role=wrapper] {width:100%; height:100%;}
input, textarea, button, select {font-family:inherit; outline:none; font-size:inherit; border-radius:0;}
input[type=search] {-webkit-appearance:none;}
input[type=search]::-webkit-search-decoration {-webkit-appearance:none;}
a {outline:none;}
mark[data-markjs=true] {color:#f44336; background:#ffecb3;}

/**
 * alert 영역 디자인 정의
 */
body > div[data-role=alert] {position:fixed; top:0px; left:0px; width:100%; z-index:20000;}
body > div[data-role=alert] .message {padding:8px 30px 8px 10px; font-weight:bold; position:relative; line-height:1.6; font-size:14px;}
body > div[data-role=alert] .message .close {width:30px; height:30px; line-height:30px; text-align:center; font-size:14px; top:3px; right:3px; position:absolute; cursor:pointer; opacity:0.7;}
body > div[data-role=alert] .default {background:#fdf1af; border-bottom:1px solid #a29239;}
body > div[data-role=alert] .error {background:#c10000; border-bottom:1px solid #960000; color:#ffff80;}
body > div[data-role=alert] .success {background:#e4f5fd; border-bottom:1px solid #98c1e5; color:#4680ae;}
body > div[data-role=alert] .progress {background:#e5e5e5; height:10px;}
body > div[data-role=alert] .progress span {display:block; width:100%; height:100%; background-color:#e4232c; background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); -webkit-animation:progress-bar-stripes 2s linear infinite; -o-animation:progress-bar-stripes 2s linear infinite; animation:progress-bar-stripes 2s linear infinite; background-size:40px 40px;}
@-webkit-keyframes progress-bar-stripes {
	from {background-position:40px 0;}
	to {background-position:0 0;}
}
@-o-keyframes progress-bar-stripes {
	from {background-position:40px 0;}
	to {background-position:0 0;}
}
@keyframes progress-bar-stripes {
	from {background-position:40px 0;}
	to {background-position:0 0;}
}

/**
 * 툴팁 디자인 정의
 */
div[data-role=wrapper] > div[data-role=tooltip] {position:absolute; z-index:100; margin:6px 0px;}
div[data-role=wrapper] > div[data-role=tooltip] > div {position:relative; background:#2196F3; color:#fff; padding:10px; line-height:1.6;}
div[data-role=wrapper] > div[data-role=tooltip].top > div:before {position:absolute; content:" "; height:0; bottom:100%; left:10px; border:6px solid transparent; border-bottom-color:#2196F3;}
div[data-role=wrapper] > div[data-role=tooltip].bottom > div:before {position:absolute; content:" "; height:0; top:100%; left:10px; border:6px solid transparent; border-top-color:#2196F3;}

/**
 * 비활성화 레이어
 */
body.disabled {overflow:hidden;}
body.disabled > div[data-role=wrapper] {filter:blur(5px); position: fixed;}
body.disabled > div[data-role=disabled] {position:fixed; z-index:10000; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); color:#fff; font-size:50px;}
body.disabled > div[data-role=disabled] > div[data-role=box] {width:100%; height:100%; box-sizing:border-box; vertical-align:middle; overflow:auto; -webkit-overflow-scrolling:touch; padding:0; margin:0; border:0;}
body.disabled > div[data-role=disabled].loading {display:table;}
body.disabled > div[data-role=disabled].loading > div[data-role=box] {display:table-cell; text-align:center; vertical-align:middle; font-size:20px; padding:0;}
/*

body.disabled > div[data-role=disabled].modal {display:table;}
body.disabled > div[data-role=disabled].modal > div[data-role=box] {display:table-cell; text-align:center; vertical-align:middle; font-size:0;}
*/

body.disabled.mobile {}
body.disabled.mobile > div[data-role=wrapper] {overflow:hidden;}
body.disabled.mobile > div[data-role=disabled] {position:absolute;}
body.disabled.mobile > div[data-role=disabled] > div[data-role=box] {padding:5px; height:auto; overflow:visible;}


/**
 * 박스
 */
div[data-role=box] {padding:10px; line-height:1.6; font-size:14px; border:1px solid transparent; color:#222;}
div[data-role=box].yellow {background:#FFF8E1; border-color:#FFECB3;}

/**
 * 모달창
 */
div[data-role=modal] {display:block; width:95%; max-width:500px; background:#fff; box-shadow:0px 1px 70px rgba(0,0,0,0.5); margin:0px auto;}
div[data-role=modal] > form {margin:0; padding:0;}
div[data-role=modal] > form > div[data-role=header] {min-height:80px; padding:0; margin:0; position:relative; text-align:left; background:transparent; display:block; box-shadow:none;}
div[data-role=modal] > form > div[data-role=header] > h1 {font-size:18px; display:block; width:100%; height:auto; line-height:30px; padding:25px 60px 25px 20px; color:#333; overflow:hidden; box-sizing:border-box; margin:0;}
div[data-role=modal] > form > div[data-role=header] > button {position:absolute; top:20px; right:10px; width:40px; height:40px; font-size:20px; background:transparent; border:0px; cursor:pointer; color:#666;}
div[data-role=modal] > form > div[data-role=header] > button > i {width:40px; height:40px; line-height:40px; text-align:center;}
div[data-role=modal] > form > div[data-role=header] > button:hover {color:#333;}
div[data-role=modal][data-closable=FALSE] > form > div[data-role=header] > button {display:none;}
div[data-role=modal] > form > div[data-role=context] {min-height:30px; height:calc(100% - 122px); width:100%; padding:0px 20px; box-sizing:border-box; font-size:14px; color:#333; text-align:left; display:block;}
div[data-role=modal] > form > div[data-role=context][data-fullsize=TRUE] {height:calc(100% - 122px);}
div[data-role=modal] > form > div[data-role=context] > label {display:block; height:30px; line-height:30px; font-weight:bold;}
div[data-role=modal] > form > div[data-role=context] > div[data-role=message] {font-size:14px; line-height:1.6;}
div[data-role=modal] > form > div[data-role=context] > div[data-role=message] + div[data-role=input] {margin-top:10px;}
div[data-role=modal] > form > div[data-role=context] > div[data-role=iframe] {display:block; width:100%; height:100%; font-size:0;}
div[data-role=modal] > form > div[data-role=context] > div[data-role=iframe] > iframe {display:block; border:0px; margin:0px; padding:0px; width:100%; height:100%;}
div[data-role=modal] > form > div[data-role=context] > div[data-role=iframe][data-fullsize=TRUE] {margin:0px -20px; width:calc(100% + 40px);}
div[data-role=modal] > form > div[data-role=footer] {display:table; table-layout:fixed; width:100%; height:auto; background:transparent; margin:0px; margin-top:20px; padding:0px;}
div[data-role=modal] > form > div[data-role=context][data-fullsize=TRUE] + footer {margin-top:0px;}
div[data-role=modal] > form > div[data-role=footer] > div {display:table-cell; width:auto; vertical-align:middle;}
div[data-role=modal] > form > div[data-role=footer] > div > button {display:block; width:100%; height:42px; box-sizing:border-box; cursor:pointer; font-size:14px; line-height:42px; border:0; background:#bdbdbd; color:#fff;}
div[data-role=modal] > form > div[data-role=footer] > div > button:hover {background:#aeaeae;}
div[data-role=modal] > form > div[data-role=footer] > div > button:focus {border:1px dotted rgba(0,0,0,0.5); line-height:40px;}
div[data-role=modal] > form > div[data-role=footer] > div > button[disabled] {background:#bdbdbd !important; opacity:0.7; cursor:not-allowed;}
div[data-role=modal] > form > div[data-role=footer] > div > button[type=submit], div[data-role=modal] > form > div[data-role=footer] > div > button.submit {background:#2196fe; color:#fff;}
div[data-role=modal] > form > div[data-role=footer] > div > button[type=submit]:hover, div[data-role=modal] > form > div[data-role=footer] > div > button.submit:hover {background:#1e88e5;}
div[data-role=modal] > form > div[data-role=footer] > div > button[type=submit][disabled], div[data-role=modal] > form > div[data-role=footer] > div > button.submit {background:#2196fe !important;}
div[data-role=modal] > form > div[data-role=footer] > div > button.danger {background:#f44336; color:#fff;}
div[data-role=modal] > form > div[data-role=footer] > div > button.danger:hover {background:#e53935;}
div[data-role=modal] > form > div[data-role=footer] > div > button[disabled].danger {background:#e53935 !important;}


/**
 * Form 객체 기본 디자인 정의
 */
div[data-role=input] {display:block; width:100%; min-height:40px; position:relative;}
div[data-role=input] input, div[data-role=input] textarea, div[data-role=input] select, div[data-role=input] label {-webkit-appearance:none;}
div[data-role=inputset] {display:block; width:100%; position:relative; font-size:0;}
div[data-role=inputset] > div[data-role=input] {display:block; margin-top:5px; vertical-align:middle; font-size:1rem;}
div[data-role=inputset] > div[data-role=input]:first-child {margin-top:0px;}
div[data-role=inputset] > div[data-role=text] {font-size:1rem; height:40px; line-height:40px;}
div[data-role=inputset].inline > div[data-role] {vertical-align:middle;}
div[data-role=inputset].inline > div[data-role=input] {display:inline-block; width:auto; margin-top:0px; margin-right:5px;}
div[data-role=inputset].inline > div[data-role=input]:last-child {margin-right:0px;}
div[data-role=inputset].inline > div[data-role=input] > label {padding-right:15px;}
div[data-role=inputset].inline > div[data-role=input]:last-child > label {padding-right:0px;}
div[data-role=inputset].inline > div[data-role=text] {display:inline-block; width:auto; margin-top:0px; margin-right:5px;}
div[data-role=inputset].inline > div[data-role=text]:last-child {margin-right:0px;}
div[data-role=inputset].flex {width:100%; min-height:40px; display:table; table-layout:fixed;}
div[data-role=inputset].flex > div[data-role=input] {display:table-cell; width:auto; margin-top:0px; white-space:nowrap; overflow:visible; border-left:5px solid transparent;}
div[data-role=inputset].flex > div[data-role=input] > label {white-space:nowrap;}
div[data-role=inputset].flex > div[data-role=input]:first-child {border-left:0px;}
div[data-role=inputset].flex > div[data-role=text] {display:table-cell; width:auto; margin-top:0px; white-space:nowrap; overflow:visible; border-left:5px solid transparent; font-size:14px; line-height:40px;}
div[data-role=inputset].flex > div[data-role=help] {display:table-caption; caption-side:bottom; margin-top:5px; margin-left:0px; margin-bottom:5px; border-left:0;}

div[data-role=inputset].grow {width:100%; min-height:40px; display:table;}
div[data-role=inputset].grow > div[data-role=input] {display:table-cell; width:auto; margin-top:0px; white-space:nowrap; overflow:visible; border-left:5px solid transparent;}
div[data-role=inputset].grow > div[data-role=input] > label {white-space:nowrap;}
div[data-role=inputset].grow > div[data-role].grow {width:100%;}
div[data-role=inputset].grow > div[data-role].grow2 {width:50%;}
div[data-role=inputset].grow > div[data-role].grow3 {width:33.3333%;}
div[data-role=inputset].grow > div[data-role].grow4 {width:25%;}
div[data-role=inputset].grow > div[data-role].grow5 {width:20%;}
div[data-role=inputset].grow > div[data-role]:first-child {border-left:0px;}
div[data-role=inputset].grow > div[data-role=text] {display:table-cell; width:auto; margin-top:0px; white-space:nowrap; overflow:visible; border-left:5px solid transparent; font-size:14px; line-height:40px;}
div[data-role=inputset].grow > div[data-role=help] {display:table-caption; caption-side:bottom; margin-top:5px; margin-left:0px; margin-bottom:5px; border-left:0;}

div[data-role=input][data-type=button] > button {white-space:nowrap; height:40px; line-height:40px; padding:0px 15px; box-sizing:border-box; cursor:pointer; color:#fff; background:#b5b7c0; border:0;}
div[data-role=input][data-type=button] > button.icon {padding:0px;}
div[data-role=input][data-type=button] > button.icon > i {display:inline-block; width:40px; height:40px; line-height:38px; vertical-align:top; text-align:center; font-size:16px; margin-top:0px;}
div[data-role=input][data-type=button] > button.icon > span {display:inline-block; padding-right:15px; height:38px; line-height:38px;}
div[data-role=input][data-type=button] > button:not([disabled]):hover {background:#828595; color:#fff;}
div[data-role=input][data-type=button] > button.submit {background:#2196f3; color:#fff;}
div[data-role=input][data-type=button] > button.submit:not([disabled]):hover {background:#1e88e5;}
div[data-role=input][data-type=button] > button.danger {background:#f44336; color:#fff;}
div[data-role=input][data-type=button] > button.danger:not([disabled]):hover {background:#e53935;}

div[data-role=input][data-type=select] > button {border:1px solid #d1d1d1; background:#fff; box-sizing:border-box; width:100%; height:40px; line-height:1; cursor:pointer; color:#666;}
div[data-role=input][data-type=select] > button > span {display:inline-block; width:calc(100% - 30px); height:38px; line-height:38px; vertical-align:middle; text-align:left; box-sizing:border-box; padding:0px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
div[data-role=input][data-type=select] > button > i {display:inline-block; width:30px; height:38px; line-height:38px; text-align:center; vertical-align:middle;}
div[data-role=input][data-type=select] > button:focus, div[data-role=input][data-type=select] > button:active, div[data-role=input][data-type=select] > button.focus {border-color:#66afe9;}
div[data-role=input][data-type=select] > button:focus > i, div[data-role=input][data-type=select] > button:active > i, div[data-role=input][data-type=select] > button.focus > i {color:#428bca;}
div[data-role=input][data-type=select] > button:disabled {border-color:#ccc !important; background:#f4f4f4; opacity:0.8; cursor:not-allowed;}
div[data-role=input][data-type=select] > button[readonly] {opacity:0.5; cursor:not-allowed; pointer-events: none;}
div[data-role=input][data-type=select] > ul {list-style:none; border:1px solid #66afe9; box-sizing:border-box; width:100%; position:absolute; top:39px; left:0; z-index:10; background:#fff; display:none; text-align:left;}
div[data-role=input][data-type=select] > ul > li {height:38px; line-height:38px; padding:0px 10px; border-bottom:1px solid #d1d1d1; cursor:pointer; outline:none; -webkit-user-select:none; -ms-user-select:none; -moz-user-select:none; -o-user-select:none; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
div[data-role=input][data-type=select] > ul > li:last-child {border-bottom:0px;}
div[data-role=input][data-type=select] > ul > li:focus {color:#fff; background-color:#428bca;}
div[data-role=input][data-type=select].extend > button {border-color:#66afe9;}
div[data-role=input][data-type=select].extend > button > i:before {content:"\e905";}
div[data-role=input][data-type=select].extend > ul {display:block; max-height:240px; overflow-y:auto;}
div[data-role=input][data-type=select].extend.up > ul {top:auto; bottom:calc(100% - 1px);}
div[data-role=input][data-type=select] > select {width:100%; height:40px; opacity:0; -webkit-appearance:none; position:absolute; z-index:1; top:0; left:0;}
div[data-role=input][data-type=select].error > button {border-color:#f44336;}
div[data-role=input][data-type=select].error > button > i {color:#f44336;}
div[data-role=input][data-type=select].success > button {border-color:#4caf50;}
div[data-role=input][data-type=select].success > button > i {color:#4caf50;}
div[data-role=input][data-type=select].readonly button {opacity:0.5; cursor:not-allowed;}

div[data-role=input][data-type=input] > input {border:1px solid #d1d1d1; background:#fff; box-sizing:border-box; width:100%; height:40px; padding:10px; line-height:18px; border-radius:0px;}
div[data-role=input][data-type=input] > input:focus, div[data-role=input][data-type=input] > input.focus {border-color:#66afe9;}
div[data-role=input][data-type=input] > input[disabled] {background:#e5e5e5; opacity:0.5; cursor:not-allowed;}
div[data-role=input][data-type=input] > input[type=date] {opacity:0; width:100%; height:100%; position:absolute; top:0; left:0; z-index:5;}
div[data-role=input][data-type=input] > button {background:#fff; position:absolute; top:1px; right:1px; width:38px; height:38px; border:0; line-height:38px; cursor:pointer; color:#666;}
div[data-role=input][data-type=input] > button:hover {background:#f4f4f4; color:#333;}
div[data-role=input][data-type=input] > button:focus {border:1px solid #66afe9; top:0px; right:0px; width:40px; height:40px; line-height:38px;}
div[data-role=input][data-type=input] > button[disabled] {background:#e5e5e5; opacity:0.5; cursor:not-allowed; color:#666;}
div[data-role=input][data-type=input] > button[readonly] {opacity:0.5; cursor:not-allowed; pointer-events: none;}
div[data-role=input][data-type=input].extend > input {border-color:#66afe9;}
div[data-role=input][data-type=input].extend > button {background:#428bca; color:#fff;}
div[data-role=input][data-type=input].error > input {border-color:#f44336;}
div[data-role=input][data-type=input].success > input {border-color:#4caf50;}

div[data-role=input][data-type=input] > div[data-role=picker] {position:absolute; top:40px; left:0px; width:100%; box-sizing:border-box; border:1px solid #d1d1d1; background:#fff; box-shadow:1px 1px 2px rgba(0,0,0,0.1); display:none; z-index:10;}
div[data-role=input][data-type=input].extend > div[data-role=picker] {display:block;}

div[data-role=input][data-type=textarea] {height:auto;}
div[data-role=input][data-type=textarea] > textarea {border:1px solid #d1d1d1; background:#fff; box-sizing:border-box; width:100%; height:40px; padding:10px; line-height:18px; border-radius:0px; min-height:100px; resize:none; display:block;}
div[data-role=input][data-type=textarea] > textarea:focus, div[data-role=input][data-type=textarea] > textarea.focus {border-color:#66afe9;}
div[data-role=input][data-type=textarea] > textarea[disabled] {background:#e5e5e5; opacity:0.5; cursor:not-allowed;}
div[data-role=input][data-type=textarea] > textarea[readonly] {opacity:0.5; cursor:not-allowed;}
div[data-role=input][data-type=textarea].error > textarea {border-color:#f44336;}
div[data-role=input][data-type=textarea].success > textarea {border-color:#4caf50;}

div[data-role=input][data-type=checkbox] > label {cursor:pointer; display:inline-block; min-height:20px; line-height:20px; -webkit-user-select:none; -ms-user-select:none; -moz-user-select:none; -o-user-select:none; padding:10px 0px 10px 32px; vertical-align:middle;}
div[data-role=input][data-type=checkbox] > label > button.checkbox {display:inline-block; width:24px; height:24px; margin:-2px 8px -2px -32px; box-sizing:border-box; border:1px solid #d1d1d1; float:left; background:#fff; cursor:pointer; vertical-align:middle;}
div[data-role=input][data-type=checkbox] > label > button.checkbox.on {background:#43b3ec; border-color:#5891dd; font-family:moimz; line-height:22px; color:#fff; text-align:center; padding-right:1px;}
div[data-role=input][data-type=checkbox] > label > button.checkbox.on:before {content:"\eb10";}
div[data-role=input][data-type=checkbox] > label > button.checkbox:focus {border-color:#66afe9;}
div[data-role=input][data-type=checkbox].disabled > label {opacity:0.5; cursor:not-allowed;}
div[data-role=input][data-type=checkbox].disabled > label > button {border-color:#ccc !important; background:#e5e5e5; opacity:0.8; cursor:not-allowed;}
div[data-role=input][data-type=checkbox].readonly > label {opacity:0.5; cursor:not-allowed; pointer-events: none;}
div[data-role=input][data-type=checkbox].readonly > label > button {cursor:not-allowed; pointer-events: none;}
div[data-role=input][data-type=checkbox].error > label {color:#f44336;}
div[data-role=input][data-type=checkbox].error > label > button {border-color:#f44336;}
div[data-role=input][data-type=checkbox].success > label {color:#4caf50;}
div[data-role=input][data-type=checkbox].success > label > button {border-color:#4caf50;}

div[data-role=input][data-type=radio] > label {cursor:pointer; display:inline-block; min-height:20px; line-height:20px; color:#666; -webkit-user-select:none; -ms-user-select:none; -moz-user-select:none; -o-user-select:none; padding:10px 0px 10px 32px;}
div[data-role=input][data-type=radio] > label > button.radio {display:inline-block; width:24px; height:24px; margin:-3px 8px -3px -32px; box-sizing:border-box; border:1px solid #d1d1d1; float:left; background:#fff; border-radius:50%; cursor:pointer; vertical-align:middle;}
div[data-role=input][data-type=radio] > label > button.radio.on {border:8px solid #43b3ec; background:#fff;}
div[data-role=input][data-type=radio] > label > button.radio:focus {border-color:#66afe9;}
div[data-role=input][data-type=radio].disabled > label {opacity:0.8; cursor:not-allowed;}
div[data-role=input][data-type=radio].disabled > label > button {border-color:#ccc !important; background:#e5e5e5; cursor:not-allowed;}
div[data-role=input][data-type=radio].readonly > label {opacity:0.5; cursor:not-allowed; pointer-events: none;}
div[data-role=input][data-type=radio].readonly > label > button {cursor:not-allowed; pointer-events: none;}
div[data-role=input][data-type=radio].error > label {color:#f44336;}
div[data-role=input][data-type=radio].error > label > button {border-color:#f44336;}
div[data-role=input][data-type=radio].success > label {color:#4caf50;}
div[data-role=input][data-type=radio].success > label > button {border-color:#4caf50;}

div[data-role=input] + div[data-role=input], div[data-role=input] + div[data-role=inputset], div[data-role=inputset] + div[data-role=input], div[data-role=inputset] + div[data-role=inputset] {margin-top:5px;}

div[data-role=help] {font-size:12px; line-height:1.6; color:#666; margin:5px 0px 10px 0px;}
div[data-role=help].error {color:#f44336;}
div[data-role=help].success {color:#4caf50;}
div[data-role=input][data-type=checkbox] > div[data-role=help], div[data-role=input][data-type=radio] > div[data-role=help] {margin-top:5px;}

/**
 * 태그 입력기
 */
div[data-role=tags] > div[data-role=tag] {display:inline-block; white-space:nowrap; margin-right:10px; height:40px; font-size:0; vertical-align:top;}
div[data-role=tags] > div[data-role=tag] > span {display:inline-block; white-space:nowrap; height:40px; line-height:40px; font-size:14px; vertical-align:top; cursor:pointer;}
div[data-role=tags] > div[data-role=tag] > button {display:inline-block; width:30px; height:30px; margin:5px; vertical-align:top; border:0; background:transparent; cursor:pointer;}
div[data-role=tags] > div[data-role=tag] > button > i {width:20px; height:20px; background:#b5b7c0; color:#fff; border-radius:10px; display:block; margin:5px; line-height:20px; text-align:center; font-size:12px;}
div[data-role=tags] > div[data-role=tag] > button:hover > i {background:#828595;}
div[data-role=tags] > div[data-role=tag] > input {border:1px solid #d1d1d1; background:#fff; box-sizing:border-box; width:150px; height:40px; padding:10px; line-height:18px; border-radius:0px; font-size:14px;}
div[data-role=tags] > div[data-role=tag] > input:focus {border-color:#66afe9;}

/**
 * 자동검색
 */
div[data-keyword=TRUE] {position:relative; z-index:1;}
div[data-keyword=TRUE] > ul {list-style:none; width:100%; max-height:200px; border:1px solid #66afe9; position:absolute; top:39px; left:0px; z-index:2; box-sizing:border-box; background:#fff; overflow-y:scroll;}
div[data-keyword=TRUE] > ul > li {height:38px; line-height:38px; padding:0px 10px; border-bottom:1px solid #d1d1d1; cursor:pointer; outline:none; -webkit-user-select:none; -ms-user-select:none; -moz-user-select:none; -o-user-select:none; font-size:1rem; background:#fff;}
div[data-keyword=TRUE] > ul > li:last-child {border-bottom:0px;}
div[data-keyword=TRUE] > ul > li:hover {color:#fff; background-color:#428bca;}
div[data-keyword=TRUE] > ul > li.selected {color:#fff; background-color:#428bca;}

/**
 * 위지윅에디터
 */
div[data-role=wysiwyg] {position:relative; overflow:visible;}
div[data-role=wysiwyg] .fr-view {font-family:inherit; font-size:14px;}
div[data-role=wysiwyg] .fr-view table {border-color:#000;}

/**
 * 버튼정의
 */
div[data-role=button] {font-size:0; text-align:center; padding-left:5px;}
div[data-role=button] > button, div[data-role=button] > a {display:inline-block; height:40px; line-height:38px; padding:0px 15px; box-sizing:border-box; border:1px solid rgba(0,0,0,0.1); color:#222; background:#fff; vertical-align:middle; margin-right:5px; text-decoration:none; cursor:pointer; font-size:1rem;}
div[data-role=button] > button:not([disabled]):hover, div[data-role=button] > a:hover {background:#f4f4f4;}
div[data-role=button] > button[disabled] {background:#f4f4f4; color:#222; opacity:0.5; cursor:not-allowed;}
div[data-role=button] > button[type=submit], div[data-role=button] > .submit {background:#2196f3; color:#fff;}
div[data-role=button] > button[type=submit]:hover, div[data-role=button] > .submit:not([disabled]):hover {background:#1e88e5; color:#fff;}
div[data-role=button] > button:focus, div[data-role=button] > a:focus {border-color:rgba(0,0,0,0.5);}
div[data-role=button] > button > i, div[data-role=button] > a > i {float:left; width:30px; height:30px; text-align:center; margin:4px 0px 4px -10px; padding:0; line-height:30px; vertical-align:middle;}
div[data-role=button] > button > i.mi-loading.icon {float:none; width:auto; height:auto; margin:0;}
div[data-role=button] > .danger {background:#f44336; color:#fff;}
div[data-role=button] > .danger:not([disabled]):hover {background:#e53935; color:#fff;}

div[data-role=input] + div[data-role=button], div[data-role=inputset] + div[data-role=button] {margin-top:5px;}
ul[data-role=table] + div[data-role=button] {margin-top:20px;}


/**
 * 캘린더
 */
div[data-role=calendar] {outline:none; overflow:hidden; -webkit-user-select:none; -ms-user-select:none; -moz-user-select:none; -o-user-select:none;}
div[data-role=calendar] > div.header {width:100%; height:40px; font-size:0;}
div[data-role=calendar] > div.header > button {width:40px; height:40px; border:0; background:#fff; text-align:center; line-height:40px; cursor:pointer; color:#666; vertical-align:middle; font-size:12px;}
div[data-role=calendar] > div.header > button:hover {background:#f4f4f4; color:#333;}
div[data-role=calendar] > div.header > div.navigation {display:inline-block; width:calc(100% - 80px); height:40px; vertical-align:middle; text-align:center; font-size:12px;}
div[data-role=calendar] > div.header > div.navigation > span {display:inline-block; height:40px; line-height:40px; padding:0px 5px; font-family:OpenSans, arial, sans-serif; color:#666; cursor:pointer; position:relative;}
div[data-role=calendar] > div.header > div.navigation > span.year:after {content:".";}
div[data-role=calendar] > div.header > div.navigation > span > select {opacity:0; cursor:pointer; position:absolute; top:0; left:-5px; width:calc(100% + 10px); height:40px;}
div[data-role=calendar] > div.dates {padding:5px; height:auto; white-space:normal;}
div[data-role=calendar] > div.dates > ul {list-style:none; width:100%; display:block; font-size:0;}
div[data-role=calendar] > div.dates > ul > li {display:inline-block; width:14%; height:30px; font-size:11px; font-family:OpenSans, arial, sans-serif; text-align:center; vertical-align:middle; background:#f5f5f5; line-height:30px; font-weight:bold;}
div[data-role=calendar] > div.dates > ul > li.Sun {width:15%; color:#ff004f;}
div[data-role=calendar] > div.dates > ul > li.Sat {width:15%; color:#008af4;}
div[data-role=calendar] > div.dates > button {width:14%; border:0; background:#fff; height:26px; line-height:26px; font-size:12px; font-family:OpenSans, arial, sans-serif; text-align:right; cursor:pointer; padding-right:5px; box-sizing:border-box; color:#333;}
div[data-role=calendar] > div.dates > button.Sun {width:15%; color:#ff004f;}
div[data-role=calendar] > div.dates > button.Sat {width:15%; color:#008af4;}
div[data-role=calendar] > div.dates > button.today {color:#00adf9; font-weight:bold;}
div[data-role=calendar] > div.dates > button.selected {background:#00acf9; color:#fff; font-weight:bold;}
div[data-role=calendar] > div.dates > button.notMatched {color:#999;}
div[data-role=calendar] > div.dates > button:hover {background:#ff7829 !important; color:#fff;}


/**
 * 테이블
 */
ul[data-role=table] {list-style:none; min-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}

ul[data-role=table] > li {display:table; width:100%; table-layout:fixed; box-sizing:border-box;}
ul[data-role=table] > li {border-bottom:1px solid #e3e4e5;}
ul[data-role=table].outer > li {border-left:1px solid #e3e4e5; border-right:1px solid #e3e4e5;}
ul[data-role=table].inner.outer > li {border-right:0px;}
ul[data-role=table].inner.outer > li > span:last-child {border-right:1px solid #e3e4e5;}

ul[data-role=table] > li > span, ul[data-role=table] > li.thead > a {display:table-cell; vertical-align:top; box-sizing:border-box; height:60px;}
ul[data-role=table] > li > span.thead {background:#f4f4f4; font-weight:bold;}
ul[data-role=table] > li.thead {border-top:2px solid transparent; border-bottom:1px solid #e3e4e5;}
ul[data-role=table].red > li.thead {border-top-color:#f44336;}
ul[data-role=table].black > li.thead {border-top-color:#222;}

ul[data-role=table] > li.thead > span, ul[data-role=table] > li.thead > a {background:#f4f4f4; font-weight:bold; text-align:center; vertical-align:middle; line-height:1.6; padding:10px 0px;}
ul[data-role=table] > li.thead > a {color:#333; text-decoration:none;}
ul[data-role=table] > li.thead > a > i {margin-left:5px;}
ul[data-role=table] > li.tbody {background:#fff;}
ul[data-role=table] > li.tbody > span {vertical-align:middle; padding:0px 10px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
ul[data-role=table] > li.tbody > span.multiline {line-height:20px; padding:10px; height:auto; white-space:normal;}
ul[data-role=table] > li.tbody > span.center {text-align:center;}
ul[data-role=table] > li.tbody > span.right {text-align:right;}

ul[data-role=table].inner > li > span, ul[data-role=table].inner > li > a {border-right:1px solid #e3e4e5;}
ul[data-role=table].inner > li > span:last-child {border-right:0px;}
ul[data-role=table].view > li > span.thead {width:160px; padding-left:15px; line-height:40px;}
ul[data-role=table].view > li > span.tbody {width:100%; padding:10px; line-height:1.6; background:#fff;}

ul[data-role=table].small > li > span, ul[data-role=table].small > li > a {height:50px; font-size:12px;}

ul[data-role=table] > li.empty {display:block; height:100px; line-height:100px; font-size:14px; color:#666; text-align:center;}

ul[data-role=table].small > li > span, ul[data-role=table].small > li > a {height:50px; font-size:12px;}


div[data-role=table-fixer] {position:relative; z-index:0; overflow:hidden;}
ul[data-role=table].fixed {position:absolute; min-width:0; top:0; left:0; z-index:1; box-shadow:1px 0px 5px 0px rgba(0,0,0,0.1);}
ul[data-role=table].fixed > li {width:181px;}
ul[data-role=table].fixed > li > span {display:none;}
ul[data-role=table].fixed > li > span.fixed {display:table-cell;}

/**
 * 캘린더 테이블
 */
ul[data-role=calendarview] {list-style:none; min-width:100%; overflow-x:auto; font-size:14px; -webkit-overflow-scrolling:touch;}
ul[data-role=calendarview] > li[data-role=week] {display:table; width:100%; table-layout:fixed; box-sizing:border-box;}
ul[data-role=calendarview] > li[data-role=week] > ul {display:table-row; list-style:none;}
ul[data-role=calendarview] > li[data-role=week] > ul > li[data-role=date] {display:table-cell; width:auto; vertical-align:top;}

ul[data-role=calendarview] > li[data-role=week].thead {border-top:2px solid transparent;}
ul[data-role=calendarview].red > li[data-role=week].thead {border-top-color:#f44336;}
ul[data-role=calendarview].black > li[data-role=week].thead {border-top-color:#222;}

ul[data-role=calendarview] > li[data-role=week].thead > ul > li[data-role=date] {height:60px; line-height:60px; background:#f4f4f4; font-weight:bold; text-align:center; vertical-align:middle;}
ul[data-role=calendarview] > li[data-role=week].thead > ul > li[data-role=date].sun {color:#F44336;}
ul[data-role=calendarview] > li[data-role=week].thead > ul > li[data-role=date].sat {color:#2196F3;}

ul[data-role=calendarview] > li[data-role=week].tbody > ul > li[data-role=date] {height:100px; padding:5px;}
ul[data-role=calendarview] > li[data-role=week].tbody > ul > li[data-role=date] > i {display:block; font-weight:bold; font-style:normal;}
ul[data-role=calendarview] > li[data-role=week].tbody > ul > li[data-role=date].sun > i {color:#F44336;}
ul[data-role=calendarview] > li[data-role=week].tbody > ul > li[data-role=date].sat > i {color:#2196F3;}
ul[data-role=calendarview] > li[data-role=week].tbody > ul > li[data-role=date].not {background:#f4f4f4;}
ul[data-role=calendarview] > li[data-role=week].tbody > ul > li[data-role=date].not > i {color:#ccc !important;}
ul[data-role=calendarview] > li[data-role=week].tbody > ul > li[data-role=date].today {background:#FFF9C4;}

ul[data-role=calendarview].inner > li[data-role=week] {border-bottom:1px solid #e3e4e5;}
ul[data-role=calendarview].inner > li[data-role=week] > ul > li[data-role=date] {border-right:1px solid #e3e4e5;}
ul[data-role=calendarview].inner > li[data-role=week] > ul > li[data-role=date]:last-child {border-right:0px;}
ul[data-role=calendarview].outer > li[data-role=week] {border-left:1px solid #e3e4e5; border-right:1px solid #e3e4e5; border-bottom:1px solid #e3e4e5;}
ul[data-role=calendarview].outer > li[data-role=week]:last-child {border-bottom:1px solid #e3e4e5;}

/**
 * 폼 테이블
 */
ul[data-role=form] {list-style:none; border-top:2px solid transparent; min-width:100%;}
ul[data-role=form].red {border-top-color:#f44336;}
ul[data-role=form].black {border-top-color:#222;}

ul[data-role=form] > li {display:table; width:100%; min-height:60px; table-layout:fixed; box-sizing:border-box;}
ul[data-role=form].inner > li {border-bottom:1px solid #e3e4e5;}
ul[data-role=form].outer > li {border-left:1px solid #e3e4e5; border-right:1px solid #e3e4e5;}

ul[data-role=form] > li > label {display:table-cell; width:150px; vertical-align:top; line-height:20px; background:#f4f4f4; padding:20px 0px 20px 20px; font-weight:bold; font-size:14px;}
ul[data-role=form] > li > label.required:after {color:#F44336; content:" *";}
ul[data-role=form] > li > label.small {width:100px;}
ul[data-role=form] > li > div {display:table-cell; width:100%; padding:10px 10px 10px 0px; line-height:1; vertical-align:top;}
ul[data-role=form] > li > div:last-child {padding-right:0px;}
ul[data-role=form] > li > label + div {padding-left:10px;}
ul[data-role=form] > li > div > div[data-role=text] {display:table; padding:5px 0px; min-height:30px; line-height:30px; font-size:14px;}
ul[data-role=form] > li > div > div[data-role=text] > div {display:table-cell; vertical-align:middle; line-height:1.6;}
ul[data-role=form] > li > div > div[data-role=button] {margin-top:0; text-align:left; padding:0px;}
ul[data-role=form] > li > div > div[data-role=button] > button {height:40px; line-height:40px; padding:0px 15px; margin:0px;}
ul[data-role=form] > li > div div[data-role=help] {margin-bottom:0;}
ul[data-role=form] > li > div div[data-role=button] {text-align:left;}

/**
 * 탭
 */
div[data-role=tabbar] {width:100%; height:70px; overflow-y:hidden; -webkit-user-select:none; -ms-user-select:none; -moz-user-select:none;}
div[data-role=tabbar] > div {width:100%; height:90px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;}
div[data-role=tabbar] > div > ul {display:table; width:100%; table-layout:fixed; list-style:none; padding:0px; margin:0px;}
div[data-role=tabbar] > div > ul > li {display:table-cell; width:auto; height:70px; font-size:0px; box-sizing:border-box; border-top:1px solid #d9dadb; border-bottom:2px solid #525866;}
div[data-role=tabbar] > div > ul > li > button, div[data-role=tabbar] > div > ul > li > a {display:block; width:100%; height:67px; box-sizing:border-box; text-align:center; font-size:15px; text-decoration:none; cursor:pointer; background:#f7f9fa; border:0px; border-left:1px solid #d9dadb; color:#939799; line-height:67px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; padding:0px 5px;}
div[data-role=tabbar] > div > ul > li:last-child > button, div[data-role=tabbar] > div > ul > li:last-child > a {border-right:1px solid #d9dadb;}
div[data-role=tabbar] > div > ul > li.selected {border-top:2px solid #525866; position:relative;}
div[data-role=tabbar] > div > ul > li.selected > button, div[data-role=tabbar] > div > ul > li.selected > a {position:absolute; top:0; left:0; height:68px; border-left:2px solid #525866; border-right:2px solid #525866; background:#fff; color:#1a1a1a;}
div[data-role=tabbar] > div > ul > li.selected + li > button {border-left:0px;}
div[data-role=tabbar] > div > ul > li.selected + li > a {border-left:0px;}
div[data-role=tabbar] > div > ul > li > button:hover, div[data-role=tabbar] > div > ul > li > a:hover {background:#fff; color:#1a1a1a;}

div[data-role=subtab] {height:50px; border-bottom:1px solid #d9dadb; overflow:hidden; margin-bottom:20px;}
div[data-role=subtab] > div {width:100%; height:80px; overflow-x:scroll; overflow-y:hidden;}
div[data-role=subtab] > div > ul {background:#fff; width:100%; height:80px; font-size:0px; list-style:none; white-space:nowrap;}
div[data-role=subtab] > div > ul > li {margin:7px 0px; height:36px; display:inline-block; position:relative;}
div[data-role=subtab] > div > ul > li > button, div[data-role=subtab] > div > ul > li > a {background:transparent; padding:0px 14px; border:0px; width:100%; height:36px; font-size:0; box-sizing:border-box; color:#999; cursor:pointer; border-radius:3px; display:inline-block; font-size:14px; text-decoration:none; line-height:36px;}
div[data-role=subtab] > div > ul > li:after {position:absolute; height:14px; top:11px; left:0; border-left:1px solid #ccc; content:" ";}
div[data-role=subtab] > div > ul > li:first-child:after {display:none;}
div[data-role=subtab] > div > ul > li.selected:after {display:none;}
div[data-role=subtab] > div > ul > li.selected + li:after {display:none;}
div[data-role=subtab] > div > ul > li.selected > button, div[data-role=subtab] > div > ul > li.selected > a {border-radius:3px; background:#2196F3; color:#fff; border-left-color:transparent;}

/**
 * 페이지 네비게이션
 */
div[data-role=pagination] {display:inline-block; max-width:100%; height:34px; overflow:hidden;}
div[data-role=pagination] > div {height:50px; padding-top:1px;}
div[data-role=pagination] > div > ul {display:inline-block; padding:0px; margin:0px; border:1px solid #d5d5d5; list-style:none; font-size:0px; background:#fcfcfc;}
div[data-role=pagination] > div > ul > li {display:inline-block; padding:0px; height:30px; border-right:1px solid #d5d5d5; vertical-align:middle;}
div[data-role=pagination] > div > ul > li > a {display:block; width:100%; height:32px; border:1px solid transparent; margin:-2px 0px -2px -1px; text-decoration:none; text-align:center; color:#666;}
div[data-role=pagination] > div > ul > li > a > span {min-width:21px; padding:0px 6px 0px 5px; display:inline-block; font-size:14px; height:32px; line-height:32px; letter-spacing:-1px;}
div[data-role=pagination] > div > ul > li:last-child {border-right:0px;}
div[data-role=pagination] > div > ul > li > a:hover, div[data-role=pagination] > div > ul > li.active > a {border-color:#828595; background:#b5b7c0; color:#fff;}
div[data-role=pagination] > div > ul > li.active > a:hover {background:#828595;}
div[data-role=pagination] > div > ul > li.active > span {font-weight:bold;}
div[data-role=pagination] > div > ul > li.disabled > a {color:#ccc; cursor:not-allowed;}
div[data-role=pagination] > div > ul > li.disabled > a:hover {border-color:transparent; background:transparent;}

/**
 * 위지윅 컨텐츠
 */
div[data-role=wysiwyg-content] {word-break:break-all; line-height:1.6;}
div[data-role=wysiwyg-content] a {text-decoration:none; color:#1976D2;}
div[data-role=wysiwyg-content] a:hover {text-decoration:underline; color:#1976D2;}
div[data-role=wysiwyg-content] .fr-file {display:inline-block; border:1px solid #ddd; border-radius:5px; color:#000; text-decoration:none; vertical-align:middle; padding:5px 10px 5px 30px; background:url(../modules/wysiwyg/images/download.png) no-repeat 10px 50%; background-size:14px 14px;}
div[data-role=wysiwyg-content] .fr-file:hover {background-color:rgba(0,0,0,0.1);}
div[data-role=wysiwyg-content] .fr-file > i.size {display:inline-block; padding-left:5px; color:#666; font-style:normal;}

div[data-role=wysiwyg-content] img {max-width:100%; height:auto;}
div[data-role=wysiwyg-content] img.fr-dib {display: block; margin: 0 auto;}
div[data-role=wysiwyg-content] img.fr-fir {display: block;margin:unset;margin-left: auto;}
div[data-role=wysiwyg-content] img.fr-fil {display: block;margin:unset;margin-right: auto;}

div[data-role=wysiwyg-content] table {border-collapse:collapse; margin:10px 0px;}
div[data-role=wysiwyg-content] table td {border:1px solid #ddd; padding:5px;}

div[data-role=wysiwyg-content] ul:not([data-role]) {list-style-position:outside; list-style-type:disc; margin-left:25px;}
div[data-role=wysiwyg-content] ol:not([data-role]) {list-style-position:outside; margin-left:25px;}

div[data-role=context][data-type=html] {position:relative; min-height:40px;}
div[data-role=context][data-type=html] > a.edit {display:block; position:absolute; z-index:10; top:0; right:0; height:40px; line-height:40px; padding:0px; box-sizing:border-box; vertical-align:middle; margin-left:5px; text-decoration:none; cursor:pointer; background:#2196f3; color:#fff; font-size:0;}
div[data-role=context][data-type=html] > a.edit > i {width:40px; height:40px; line-height:40px; vertical-align:middle; text-align:center; font-size:14px;}
div[data-role=context][data-type=html] > a.edit > span {height:40px; line-height:40px; display:inline-block; vertical-align:middle; padding-right:15px; font-size:14px;}
div[data-role=context][data-type=html] > a.edit:hover {background:#1e88e5;}

@media only screen and (max-width:599px) {
	/**
	 * 폼 테이블
	 */
	ul[data-role=form] > li {display:block;}
	ul[data-role=form] > li > label {display:block; width:100% !important; height:auto; padding:10px 0px 0px 0px; background:transparent; line-height:1.6;}
	ul[data-role=form] > li > label:after {content:" :";}
	ul[data-role=form] > li > div {display:block; padding:5px 0px; min-height:auto; line-height:1;}
	ul[data-role=form] > li > label + div {padding-left:0px;}
	ul[data-role=form] > li > div + label {display:block; border-left:0px; border-top:1px solid #e3e4e5;}
}

@media only screen and (max-width:767px) {
	div[data-role=pagination] > div {width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
	div[data-role=pagination] > div > ul {white-space:nowrap;}
	
	div[data-role=modal] > form > div[data-role=header] {min-height:60px;}
	div[data-role=modal] > form > div[data-role=header] > h1 {font-size:16px; height:auto; line-height:30px; padding:15px 60px 15px 20px;}
	div[data-role=modal] > form > div[data-role=header] > button {top:10px; right:10px;}
	div[data-role=modal] > form > div[data-role=context] {height:calc(100% - 130px);}
	div[data-role=modal] > form > div[data-role=context][data-fullsize=TRUE] {height:calc(100% - 110px);}
	
	/**
	 * 테이블
	 */
	ul[data-role=table] > li > span, ul[data-role=table] > li.thead > a {height:50px;}
	
	/**
	 * 탭
	 */
	div[data-role=tabbar] {height:60px;}
	div[data-role=tabbar] > div > ul > li {height:60px;}
	div[data-role=tabbar] > div > ul > li > button, div[data-role=tabbar] > div > ul > li > a {height:57px; line-height:57px; font-size:14px;}
	div[data-role=tabbar] > div > ul > li.selected > button, div[data-role=tabbar] > div > ul > li.selected > a {height:58px;}
}

@media (min-width:768px) and (max-width:991px) {
	ul[data-role=form] > li > label {width:130px; padding-left:15px;}
	ul[data-role=form] > li > label.small {width:90px;}
}

*.only-print {display:none;}
@media print {
	* {-webkit-print-color-adjust:exact; color-adjust:exact;}
	*.only-print {display:block;}
}