@charset "utf-8";
@import url(fonts.css);

/* -- date : 2020-11-17 -- */
/* z-index 설정
기본 화면 : none / 0
GNB / 기타 메뉴 및 header 영역이 화면 위에 위치할 경우: 100
기타 event 적 요소 (select / calendar 등) : 500
레이어팝업 : 1000
*/

html,body,p,h1,h2,h3,h4,h5,h6,menu,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,hr { margin:0;padding:0; }
body {position:relative; background-color:#f9fafc; font-size:0.75em; font-family:'Noto Sans KR', 'Malgun Gothic', sans-serif; }
input,textarea,select,button,table{ font-size:1em; }
img,fieldset,button{ border:0; }
img, input, select { vertical-align:middle; }
img {max-width:100%;}
ul,ol { display:inline-block; list-style:none; width:100%; vertical-align:top;}
em,address,i, var { font-style:normal; }
a { text-decoration:none; vertical-align:middle; }
a:hover,a:active,a:focus { text-decoration:none; }
button { display:inline-block;overflow:hidden;border:0;background:none;cursor:pointer; font-family:'Noto Sans KR', 'Malgun Gothic', sans-serif; }
button > span { position:relative; }
table{ border-collapse:collapse; border-spacing:0; width:100%; table-layout:fixed; }
.hide { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; filter:alpha(opacity=0); zoom:1; text-indent:-9999px; z-index:0; overflow:hidden; }
caption { height: 1px; overflow: hidden; line-height: 0; margin-top: -1px; color: transparent; }
textarea { resize:none; vertical-align:middle; }
canvas {user-select:none; -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none;}

/* layout =============================================================== */
html, body, #wrap { height:100%; }

body { min-width:1600px; }
body.bk-mode{background-color:#232831; color:#fff}
body.wh-mode{background-color:#fff;}
body.board-size-fix {min-width:1920px;width:1920px; height:1080px;}
#contents.board-type {padding:21px 50px 25px;}

::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:#fff; }
::-webkit-scrollbar-thumb { height:50px; width:50px; background:#cdcdcd; border-radius: 8px; }

#wrap { padding-left:220px; transition:padding .3s cubic-bezier(.36,.04,.19,.99); }
#gnb { position:fixed; width:220px; height:100%; top:0; left:0; border-right:1px solid #e5e5e5; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.3); transition:width .3s cubic-bezier(.36,.04,.19,.99); box-sizing:border-box; z-index:100; }
#cnt { min-height:100%; margin-bottom:-160px; }
#cnt .contents { height:100%; padding:40px 40px 200px; }
#footer { height:160px; padding:0 40px; }

#wrap.extend { padding-left:100px; }
#wrap.extend #gnb { width:100px; }

#footer .inbox { display:flex; height:100%; border-top:1px solid #e5e5e5; flex-flow:row nowrap; align-items:center; box-sizing:border-box; }
#footer .inbox .logo-footer { width:175px; }
#footer .footer-menu { display:block; font-size:0; }
#footer .footer-menu li { display:inline-block; }
#footer .footer-menu li + li { position:relative; margin-left:16px; padding-left:16px; }
#footer .footer-menu li + li:before { content:''; position:absolute; width:1px; height:12px; top:50%; left:0; margin-top:-6px; background:#093383; }
#footer .footer-menu a, #footer .footer-menu button { display:block; font-size:17px; line-height:21px; color:#093383; }
#footer footer { margin:25px 0 5px; font-size:15px; line-height:21px; color:#888888; letter-spacing:-1px;}
#footer footer > span { margin-right:10px; }
#footer .copy { font-size:13px; line-height:19px; color:#888; font-weight:500; font-family:roboto; }

.logo { position:relative; width:100%; height:50px; margin:30px 0 39px; text-align:center; text-indent:-9999px; }
.logo:before { content:''; position:absolute; top:0; left:50%; width:140px; height:50px; background:url(../images/logo.png) no-repeat center top; transform:translate3d(-50%,0,0); opacity:1; transition:.2s cubic-bezier(.36,.04,.19,.99);}
.logo:after { content:''; position:absolute; top:0; left:50%; width:45px; height:50px; background:url(../images/logo_icon.png) no-repeat center top; transform:translate3d(-50%,0,0); opacity:0; transition:.2s cubic-bezier(.36,.04,.19,.99);}
.user-info { position:relative; height:105px; margin-bottom:48px; text-align:center; overflow:hidden; }
.user-info .user-tx { transform:translate3d(0,0%,0); transition:transform .3s cubic-bezier(.36,.04,.19,.99); }
.user-info .user-tx .name { font-size:17px; line-height:21px; color:#333; border-bottom:1px solid #333; }
.user-info .user-tx .com-num { display:block; margin-top:5px; font-size:15px; line-height:21px; color:#888888; }
.user-info .user-img { position:absolute; top:0; left:50%; width:35px; height:35px; margin-left:-17px; border-radius:20px; transform:translate3d(0,300%,0); transition:transform .3s cubic-bezier(.36,.04,.19,.99); overflow:hidden; }
.user-info .btn-logout { margin-top:20px; padding:2px 10px; font-size:13px; line-height:19px; color:#888; border:1px solid #ddd; }
#wrap.extend .logo:before { opacity:0; }
#wrap.extend .logo:after { opacity:1; }
#wrap.extend .user-info .user-tx { transform:translate3d(0,-100%,0); }
#wrap.extend .user-info .user-img { transform:translate3d(0,0,0); }

.gnb { min-height:610px; }
.gnb a, .gnb button { font-size:15px; line-height:19px; }
.gnb .dep1 > li { position:relative; background:#fff; transition:.3s cubic-bezier(.36,.04,.19,.99);}
.gnb .dep1 > li + li { margin-top:5px; }
.gnb .dep1 .btn-dep1 { position:relative; display:flex; height:50px; padding:13px 35px 12px 80px; color:#111; line-height:25px; font-weight:bold; transition:width color .3s cubic-bezier(.36,.04,.19,.99); box-sizing:border-box;}
.gnb .dep1 .btn-dep1 .tx { display:inline-block; width:105px; opacity:1; transition:.3s cubic-bezier(.36,.04,.19,.99); overflow:hidden; }
.gnb .dep1 .btn-dep1 .tx > i { display:block; width:105px; }
.gnb .dep1 .btn-dep1:before { content:''; position:absolute; width:3px; height:100%; top:0; left:0; background-color:#093383; transform:translate3d(-100%,0,0); transition:transform .3s cubic-bezier(.36,.04,.19,.99); }
.gnb .dep1 .btn-dep1:not(.non-2dep):after { content:''; position:absolute; width:0; height:0; top:23px; right:20px; border:6px solid transparent; border-top-color:#888; transition:border-color .2s cubic-bezier(.36,.04,.19,.99), transform .2s cubic-bezier(.36,.04,.19,.99); }
.gnb .dep1 .ico { position:absolute; display:block; width:30px; height:25px; top:13px; left:35px; background-repeat:no-repeat; background-position:center bottom; }
.gnb .dep1 .ico:after { content:''; position:absolute; width:100%; height:100%; top:0; left:0; background-repeat:no-repeat; background-position:center top; opacity:0; transition:opacity .3s cubic-bezier(.36,.04,.19,.99); }
.gnb .dep1 .ico.monitor, .gnb .dep1 .ico.monitor:after { background-image:url(../images/ico_gnb-monitor.png); }
.gnb .dep1 .ico.alarm, .gnb .dep1 .ico.alarm:after { background-image:url(../images/ico_gnb-alarm.png); }
.gnb .dep1 .ico.customer, .gnb .dep1 .ico.customer:after { background-image:url(../images/ico_gnb-customer.png); }
.gnb .dep1 .ico.settle, .gnb .dep1 .ico.settle:after { background-image:url(../images/ico_gnb-settle.png); }
.gnb .dep1 .ico.user, .gnb .dep1 .ico.user:after { background-image:url(../images/ico_gnb-user.png); }
.gnb .dep1 .ico.home, .gnb .dep1 .ico.home:after { background-image:url(../images/ico_gnb-home.png); }
.gnb .dep1 .ico.support, .gnb .dep1 .ico.support:after { background-image:url(../images/ico_gnb-support.png); }
.gnb .dep1 .ico.manage, .gnb .dep1 .ico.manage:after { background-image:url(../images/ico_gnb-manage.png); }
.gnb .dep1 .ico.set, .gnb .dep1 .ico.set:after { background-image:url(../images/ico_gnb-set.png); }
.gnb .dep1 > li:hover, .gnb .dep1 > li.on { background:#ecf3fc; }
.gnb .dep1 > li:hover .btn-dep1, .gnb .dep1 li.on > .btn-dep1 { color:#093383; }
.gnb .dep1 > li:hover .btn-dep1 .ico:after,
.gnb .dep1 li.on > .btn-dep1 .ico:after { opacity:1; }
.gnb .dep1 > li:hover .btn-dep1:before,
.gnb .dep1 li.on > .btn-dep1:before { transform:translate3d(0,0,0); }
.gnb .dep1 > li:hover .btn-dep1:after, 
.gnb .dep1 li.on > .btn-dep1:after { border-top-color:#093383; }
.gnb .dep1 li.on > .btn-dep1:after { transform:scaleY(-1); transform-origin:0 20%; }

.gnb .dep2 { display:none; width:100%; box-sizing:border-box; overflow:hidden; transition:.3s cubic-bezier(.36,.04,.19,.99); }
.gnb .dep2 ul { width:219px; }
.gnb .dep2 ul li:last-child { margin-bottom:12px; }
.gnb .dep2 .tit { display:none; }
.gnb .btn-dep2 { display:block; padding:8px 8px 8px 80px; color:#666; }
.gnb .btn-dep2:hover, .gnb .dep2 li.on .btn-dep2 { color:#1568dd; }

.btn-gnb-ctrl { position:relative; display:block; width:60px; height:30px; margin:0 auto; padding:5px; text-indent:-9999px; }
.btn-gnb-ctrl:before,
.btn-gnb-ctrl:after { content:''; position:absolute; width:12px; height:3px; top:10px; left:40%; background:#387fe2; transition:.3s cubic-bezier(.36,.04,.19,.99); }
.btn-gnb-ctrl:before { transform:rotate(45deg); top:17px; }
.btn-gnb-ctrl:after { transform:rotate(-45deg); }

.extend .gnb .btn-dep1 .ico { margin-right:0; }
.extend .gnb .btn-dep1 .tx { width:0; opacity:0; }
.extend .gnb .btn-dep1:after { display:none; }
.extend .gnb .dep1 > li { transition:.3s cubic-bezier(.36,.04,.19,.99); }
/* .extend .gnb .dep1 > li.on, */
.extend .gnb .dep1 > li.on { background:#fff; }
.extend .gnb .dep1 > li.on .btn-dep1:before { transform:translate3d(-100%,0,0); }
.extend .gnb .dep1 > li.on .btn-dep1 .ico:after { opacity:0; }
.extend .gnb .dep1 > li:hover { background:#ecf3fc; box-shadow:0 0 6px rgba(0,0,0,.2); }
.extend .gnb .dep1 > li:hover .dep2 { display:block; }
.extend .gnb .dep1 > li:hover .btn-dep1:before { transform:translate3d(0,0,0); }
.extend .gnb .dep1 > li:hover .btn-dep1 .ico:after { opacity:1; }

.extend .btn-gnb-ctrl:before { transform:rotate(-45deg); }
.extend .btn-gnb-ctrl:after { transform:rotate(45deg); }

.extend .gnb .dep2 { position:absolute; display:none; width:auto; height:auto; top:0; left:99px; background:#ecf3fc; box-shadow:5px 3px 5px rgba(0,0,0,.2); animation:dep2 .2s 1; z-index:10; }
.extend .gnb .dep2 > ul { width:170px; }
.extend .gnb .dep2 .tit { display:block; padding:20px 20px 15px; font-size:15px; line-height:19px; color:#093383; font-weight:bold; }
.extend .gnb .dep2 .btn-dep2 { padding-left:20px; }

@keyframes dep2 {
    0% { opacity:0; }
    100% { opacity:1; }
}


/* common =============================================================== */
.tc { text-align:center !important; }
.tl { text-align:left !important; }
.tr { text-align:right !important; }

.ver-m { vertical-align:middle !important; }
.ver-t { vertical-align:top !important; }
.ver-b { vertical-align:bottom !important; }

.fl { float:left !important; }
.fr { float:right !important; }
.clear:after {display:block; clear:both; content:''}

.tx-gray { color:#888 !important; }
.tx-red { color:#f76252 !important; }
.tx-lblue { color:#468ee5 !important; }
.tx-blue { color:#1568dd !important; }
.tx-dblue { color:#093383 !important; }

.tx-desc { font-size:14px; line-height:18px; color:#666; }
.tx-desc.gray { color:#888; }

.tx-dot { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.roboto { font-family:Roboto; font-weight:500; letter-spacing:-1px;}

.page-top { display:flex; margin-bottom:16px; justify-content:space-between; align-items:baseline; }
.page-title { font-size:27px; line-height:33px; color:#093383; font-weight:500; letter-spacing:-2px; }
.location { font-size:0; }
.location .home { display:inline-block; width:20px; height:21px; text-indent:-9999px; background:url(../images/ico_home.png) no-repeat center 50%; }
.location > span { font-size:15px; line-height:21px; color:#888; }
.location > span + span { margin-left:5px; }
.location > span + span:before { content:''; display:inline-block; width:10px; height:21px; margin-right:3px; background:url(../images/ico_location.png) no-repeat left 50%; vertical-align:middle; }

.cnt-box { margin-bottom:30px; }
.cnt-box + .cnt-box { margin-top:40px; }
.cnt-box-r { margin-bottom:30px; padding:35px 40px; background:#fff; border:1px solid #e5e5e5; border-radius:10px; }
.cnt-title { font-size:20px; line-height:28px; color:#333; font-weight:500; letter-spacing:-1px; }
.cnt-title + * { margin-top:10px; }
.cnt-title > .desc { font-weight:400; }

.cnt-desc { margin:10px 0 0; padding-left:15px; font-size:15px; line-height:21px; color:#666; }
.cnt-box + .cnt-desc { margin:-20px 0 30px; }

.btn-group + .cnt-box { margin-top:50px; }

.div-line { display:inline-block; width:2px; height:16px; margin:0 15px; background-color:#ddd; vertical-align:middle; }

/* flex =============================================================== */
.flex-box { display:flex; justify-content:space-between; align-items:center; }
.flex-center { display:flex; justify-content:center; align-items:center; }
.f-center { justify-content:center; }
.f-start { justify-content:flex-start !important; }
.f-end { justify-content:flex-end; }
.f-top { align-items:flex-start !important; }
.f-mid { align-items:center; align-content:center; }
.f-btm { align-items:flex-end; }
.flex1 { flex:1; }

/* input =============================================================== */
input { -webkit-appearance:none; -moz-appearance:none; appearance:none; }
input::-ms-clear { display:none; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select:-ms-expend { display:none; }

::-webkit-input-placeholder { color:#ccc; }
:-ms-input-placeholder { color:#ccc; }
::placeholder { color:#ccc; }

  /* input 요소 기본 wrap - inp */
.inp * + .err-msg { margin-top:5px; }
.inp .err-msg { display:none; font-size:14px; line-height:20px; color:#f76252; }
.inp .info-msg { display:inline-block; font-size:14px; line-height:20px; color:#1568dd; }
.inp .info-msg.gray { color:#888; }
.inp.err .err-msg, .inp .err-msg.show { display:block; }
.inp label.inline { display:inline-block; }
.inp > input[type=text], .inp > input[type=password] { width:100%; }
.inp .value-tx { font-size:17px; line-height:24px; color:#111; }
.inp .inp-tx { margin-left:10px; font-size:17px; line-height:40px; color:#111; vertical-align:middle; }

.inp label { display:block; margin:4px 0; font-size:15px; line-height:22px; color:#666; }

.inp .inp-obj { display:flex; justify-content:space-between; } /* inp 내 input + obj 구성일 때 */
.inp .inp-obj > input { flex:1; }
.inp .inp-obj > input + * { margin-left:10px; }
.inp .inp-line { border:1px solid #ddd; border-radius:4px; } /* inp 자체 라인 없이 wrap 에 라인 */
.inp .inp-line input { border:none; }

.inp.ver { display:flex; }
.inp.ver label { line-height:34px; }
.inp.ver label + * { flex:1; }

.inp-inline { display:inline-block; margin-right:20px; vertical-align:top;}
.inp-inline label { margin-left:5px; font-size:17px; line-height:20px; color:#111; vertical-align:top; }
.inp-inline:last-child { margin-right:0; }

label.hide { width:1px; height:1px; }

input[type=text], 
input[type=password],
textarea { display:inline-block; min-height:40px; padding:9px 10px 8px;font-size:17px; line-height:23px; letter-spacing:-1px; border:1px solid #ddd; border-radius:2px; box-sizing:border-box; vertical-align:middle; outline:none; transition:border-color .3s cubic-bezier(.36,.04,.19,.99); }
input[type=text]:focus,
input[type=password]:focus,
textarea:focus { border-color:#1568dd; }

input[type=text]:disabled, input[type=text]:read-only,
input[type=password]:disabled, input[type=password]:read-only,
textarea:disabled, textarea:read-only { background:#f7f7f7; }

input[type=checkbox] { position:relative; -webkit-appearance:none; appearance:none; display:inline-block; width:20px; height:20px; border:1px solid #ddd; border-radius:2px; transition:background-color .1s; vertical-align:top; }
input[type=checkbox]:checked { background-color:#1568dd; border-color:#1568dd; }
input[type=checkbox]:checked:before,
input[type=checkbox]:checked:after { content:''; position:absolute; height:2px; background-color:#fff; }
input[type=checkbox]:checked:before { top:9px; left:2px; width:7px; transform:rotate(45deg); }
input[type=checkbox]:checked:after { top:8px; left:5px; width:11px; transform:rotate(-45deg); }
input[type=checkbox]:disabled { background-color:#eee; border-color:#eee; }

input[type=radio] { position:relative; -webkit-appearance:none; appearance:none; display:inline-block; width:20px; height:20px; border:1px solid #dfdfdf; border-radius:10px; transition:border-color .1s; vertical-align:top; }
input[type=radio]:checked { border-color:#1568dd; }
input[type=radio]:before { content:''; position:absolute; width:10px; height:10px; top:4px; left:4px; border-radius:5px; background:#1568dd; opacity:0; transform:scale(.5); transition:transform .1s, opacity .1s; }
input[type=radio]:checked:before { opacity:1;  transform:scale(1); }
input[type=radio]:disabled, input[type=radio]:checked:disabled { background-color:#eee; border-color:#ccc; }
input[type=radio]:checked:disabled:before { background-color:#ccc; }

select { -webkit-appearance:none; appearance:none; display:inline-block; padding:13px 40px 12px 10px; font-size:17px; line-height:23px; letter-spacing:-1px; border:1px solid #ddd; border-radius:2px; box-sizing:border-box; vertical-align:top; outline:none; transition:border-color .3s cubic-bezier(.36,.04,.19,.99); background:url(../images/ico_select.png) no-repeat right 15px top 50%;}
select:focus { border-color:#1568dd; }

/* select 디자인 적용 */
.inp-select { position:relative; display:inline-block; height:42px; vertical-align:middle; z-index:100; }
.inp-select > select { display:none; }
.inp-select .btn-select { display:block; padding:0 9px; width:100%; height:100%; border:1px solid #ddd; border-radius:4px; font-size:17px; line-height:23px; text-align:left; background:#fff url(../images/ico_select.png) no-repeat right 15px top 50%; outline:none; transition:border-color .3s cubic-bezier(.36,.04,.19,.99);}
.inp-select .btn-select:focus { border-color:#1568dd; } 
.inp-select .btn-select > span { position:relative; display:block; width:100%; padding-right:25px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box; }
.inp-select .select-list { position:absolute; display:none; width:100%; max-height:300px; top:41px; left:0; padding:5px; border:1px solid #ddd; background:#fff; overflow-x:hidden; overflow-y:auto; box-sizing:border-box; border-radius:3px; box-shadow:0 2px 6px rgba(0,0,0,.1);} 
.inp-select.on .select-list { display:block; }
.inp-select.up .select-list { top:auto; bottom:41px; }
.inp-select .select-list li.hidden { display:none; }
.inp-select .select-list li button { display:block; width:100%; padding:6px 10px; font-size:17px; line-height:23px; color:#111; text-align:left; }
.inp-select .select-list li button:hover:not(:disabled) { background-color:#ecf3fc; }
.inp-select .select-list li button.dep2 { padding-left:20px; }
.inp-select .select-list li button.dep3 { padding-left:30px; }
.inp-select .select-list li button.dep4 { padding-left:40px; }

/* 날짜 선택 관련  */
input.cal { padding-right:30px; font-family:roboto; background:url(../images/ico_cal.png) no-repeat right 10px top 50%; }
* + .date-set-wrap { display:inline-block; vertical-align:middle; }
.date-set-wrap > * { display:inline-block; vertical-align:top;}
.date-set-wrap .date-btns { margin-left:15px; }
.date-set-wrap .date-btns .btn.medium { min-width:auto; margin-right:8px; padding:10px 20px; }

.inp-dur { display:inline-block; }
.inp-dur .cal { width:130px !important; }
.inp-dur .inp-select { width:90px !important; }

/* 이메일 */
.inp-mail { display:flex; }
.inp-mail .inp-direct { display:none; }
.inp-mail > i { width:4%; text-align:center; line-height:42px; }
.inp-mail.direct .inp-direct { display:block; }
.inp-mail.direct .inp-select { display:none; }

/* file */
.inp-file { position:relative; display:inline-block; width:100%; min-width:200px; height:40px; padding-right:110px; vertical-align:middle; font-size:13px; line-height:32px; box-sizing:border-box; } /* 너비 및 높이는 직접 설정 - 200 이하일 경우 label 및 input width 조정 */
.inp-file input[type=file] { position:absolute; width:1px; height:1px; padding:0; top:0; left:0; z-index:-1; opacity:0; overflow:hidden; }
.inp-file .inp-file-url { display:inline-block; width:100%; padding-right:40px; height:inherit; box-sizing:border-box; }
.inp-file label.btn.large { position:absolute; width:100px; min-width:auto; top:0; right:0; cursor:pointer; letter-spacing:-0.05em; }
.inp-file .btn-clear { position:absolute; display:none; width:30px; height:30px; top:50%; right:115px; line-height:24px; margin-top:-15px; text-indent:-9999px; background:url(../images/ico_btn-cancel.png) no-repeat center 50%; }
.inp-file input[type=file]:disabled + .btn-clear { display:none; }

/* button =============================================================== */
.btn { display:inline-block; box-sizing:border-box; text-align:center; transition:background-color .2s, border-color .2s; letter-spacing:-0.03em; }
.btn.full { width:100%; }

.btn:disabled { opacity:.5; }

.btn.xlarge { min-width:180px; padding:17px 5px; font-size:20px; line-height:24px; color:#1568dd; border:1px solid #1568dd; background:#fff; border-radius:3px; }
.btn.large { min-width:150px; padding:7px 15px; font-size:18px; line-height:24px; color:#1568dd; border:1px solid #1568dd; background:#fff; border-radius:3px; }
.btn.medium { padding:7px 20px; font-size:15px; line-height:20px; color:#1568dd; border:1px solid #1568dd; background:#fff; border-radius:3px; }
.btn.small { padding:4px 20px; font-size:13px; line-height:19px; color:#7b8088; border:1px solid #1568dd; background:#fff; border-radius:3px; }

.btn.blue { background-color:#1568dd; color:#fff; }
.btn.blue:disabled { background-color:#e1e9f5; border-color:#e1e9f5; }
.btn.dgray { background-color:#3b3b3b; border-color:#3b3b3b; color:#fff; }
.btn.dgray:disabled { background:#dedede; border-color:#dedede; }
.btn.gray-line { border-color:#aaa; color:#333; background:#fff; }
.btn.gray-line:disabled { background:#eee; border-color:#dedede; color:#888; }
.btn.dblue-line { border-color:#093383; color:#093383; background:#fff; }
.btn.dblue-line:disabled { background:#eee; border-color:#dedede; color:#888; }

.tx-btn { font-size:17px; line-height:23px; color:#333; }

.ico-btn { display:inline-block; vertical-align:middle; }
.ico-btn > img { vertical-align:top; }

.btn-group.full { display:flex; justify-content:space-between; }
.btn-group > span { flex-grow:1; text-align:center; }
.btn-group > span + span { margin-left:10px; }
.btn-group > span > .btn { width:100%; }

.btn-group .btn + .btn { margin-left:7px; }
.tbl-near-cnt .btn { margin-right:5px; }
.tbl-near-cnt .btn:last-child { margin-right:0; }

.btn.ico { display:inline-block; padding:3px; border:1px solid #3b3b3b; border-radius:3px; }
.btn.ico > img { display:block; }

/* 테이블 내 '영상 확인' 칼럼 버튼 */
.btn-clip-check { display:inline-block; width:30px; height:20px; text-indent:-9999px; border:1px solid #1568dd; border-radius:6px; background:url(../images/ico_tbl-play.png) no-repeat center 50%; }

/* layer-pop =============================================================== */
.layer-pop { position:fixed; display:none; width:100%; height:100%; top:0; left:0; background-color:rgba(0,0,0,.5); z-index:1000; }
.layer-cnt { position:fixed; width:680px; top:50%; left:50%; background:#fff; transform:translate(-50%, -50%); box-sizing:border-box; }
.layer-top { padding:0 30px; }
.layer-top .layer-title { padding:20px 30px 15px 0; font-size:24px; font-weight:700; color:#093383; letter-spacing:-2px; border-bottom:1px solid #e5e5e5; }
.layer-mid { padding:40px 50px 60px; }
.layer-mid .inbox { max-height:calc(90vh - 232px); overflow-x:hidden; overflow-y:auto; }
.layer-pop .btn-close { position:absolute; width:24px; height:24px; top:25px; right:30px; text-indent:-9999px; transition:.2s cubic-bezier(.36,.04,.19,.99);}
.layer-pop .btn-close:hover { transform:rotate(90deg) }
.layer-pop .btn-close:before, 
.layer-pop .btn-close:after { content:''; position:absolute; display:block; width:24px; height:2px; top:50%; left:0; background-color:#333;  }
.layer-pop .btn-close:before { transform:rotate(45deg); }
.layer-pop .btn-close:after { transform:rotate(-45deg); }

.layer-pop .layer-mid > .btn-group { margin-top:30px; }
.layer-pop.confirm .layer-cnt, 
.layer-pop.alert .layer-cnt { width:450px; }
.layer-pop.confirm .layer-mid,
.layer-pop.alert .layer-mid  { padding:40px; }
.layer-pop.confirm .confirm-msg,
.layer-pop.alert .alert-msg { margin-bottom:35px; font-size:18px; line-height:24px; color:#111; text-align:center; letter-spacing:-1px; }

/* 검색영역 공통 =============================================================== */
.srch-wrap { position:relative; }
.srch-wrap > ul { border-bottom:1px solid #e5e5e5; }
.srch-wrap ul + ul { margin-top:-1px; }
.srch-wrap > ul > li { display:flex; border-top:1px solid #e5e5e5; }
.srch-wrap .srch-tit { display:flex; min-width:150px; padding:20px; font-size:17px; line-height:23px; color:#888; box-sizing:border-box; vertical-align:middle; align-items:center; background:#f9f9f9; }
.srch-wrap * + .srch-tit { position:relative; }
.srch-wrap .srch-cnt { display:flex; flex:1; padding:10px 20px; align-items:center; flex-wrap:wrap; }
.srch-wrap .blank { flex:1; margin-left:190px; }
.srch-wrap .srch-cnt.full { flex-grow:1; }
.srch-wrap .srch-cnt .flex1 { flex:1; }
.srch-wrap .inp-inline { margin-top:5px; margin-bottom:5px; }
.srch-wrap select { margin-right:10px; }

.srch-wrap .srch-cnt input[type=text], 
.srch-wrap .srch-cnt .inp-select  { width:100%; }

.srch-wrap .more-area { display:none; }
.srch-wrap .more-area.show { display:block; }
.srch-wrap .btn-group { margin:10px 0 -10px;}
.srch-wrap .btn-tgl { position:relative; padding-right:15px; font-size:15px; line-height:21px; color:#666; overflow:visible; }
.srch-wrap .btn-tgl:after { content:''; position:absolute; width:0; height:0; top:7px; right:0; border:6px solid transparent; border-top-color:#888; }
.srch-wrap .btn-tgl.show:after { transform:scaleY(-1); transform-origin:0 30%; }
.srch-wrap .btn-tgl > span { border-bottom:1px solid #666; }
.srch-wrap .btn-tgl .tx.off, .srch-wrap .btn-tgl.show .tx.on { display:none; }
.srch-wrap .btn-tgl .tx.on, .srch-wrap .btn-tgl.show .tx.off { display:inline-block; }

.srch-wrap .flex-count3 > * { flex-basis:calc(33.33% - 20px); margin:10px 20px 0 0; }
.srch-wrap .flex-count3 > *:nth-child(3n) { flex-basis:33.34%; margin-right:0; }
.srch-wrap .flex-count3 > *:nth-child(1),
.srch-wrap .flex-count3 > *:nth-child(2),
.srch-wrap .flex-count3 > *:nth-child(3) { margin-top:0; }

.srch-wrap table.more-area.show { display:table; margin-top:-1px; }
.srch-wrap .tbl.type3 td + td { border-left:none; }
.srch-wrap .tbl.type3 .list-select { display:inline-block; }

/* 탭 컨텐츠 =============================================================== */
.tab-type1 { text-align:center; }
.tab-type1 ul { font-size:0; }
.tab-type1 li { position:relative; display:inline-block; z-index:0; }
.tab-type1 li + li { margin-left:-1px; }
.tab-type1 a { display:block; min-width:130px; padding:12px 10px 13px; font-size:18px; line-height:20px; color:#ccc; border:1px solid #ddd; text-align:center;box-sizing:border-box;  }
.tab-type1 li:first-child a { border-radius:3px 0 0 3px; }
.tab-type1 li:last-child a { border-radius:0 3px 3px 0; }
.tab-type1 li.on { z-index:1; }
.tab-type1 li.on a { border-color:#1568dd; color:#1568dd; }

.cnt-box-r .tab-type2 { margin-bottom:20px; }
.tab-type2 { display:block; }
.tab-type2 ul { font-size:0; border-bottom:1px solid #7a7e82;}
.tab-type2 li { position:relative; display:inline-block; margin-bottom:-1px; z-index:0; }
.tab-type2 li + li { margin-left:-1px; }
.tab-type2 a { display:block; min-width:240px; padding:9px 10px; font-size:19px; line-height:30px; color:#ccc; border:1px solid #ddd; border-bottom-color:#7a7e82; background:#f7f7f7; text-align:center; box-sizing:border-box;  }
.tab-type2 li:first-child a { border-radius:3px 0 0 0; }
.tab-type2 li:last-child a { border-radius:0 3px 0 0; }
.tab-type2 li.on { z-index:1; }
.tab-type2 li.on a { border-color:#7a7e82; border-bottom-color:#fff; background:#fff; color:#111; }

/* 테이블 =============================================================== */
.tbl-near-cnt { display:flex; justify-content:space-between; align-items:flex-end; }
.tbl-near-cnt.tr { display:block; }
.tbl-near-cnt.underline { padding-bottom:10px; border-bottom:1px solid #ddd; }
.tbl-near-cnt + .tbl { margin-top:10px; }
.tbl + .tbl-near-cnt { margin-top:10px; }
.srch-result { font-size:15px; line-height:21px; color:#7a7e82; }
.tbl .tx-btn { border-bottom:1px solid #666; }
.tbl .tx-btn.tx-blue { border-bottom:1px solid #1568dd; }

.tbl.tr-hover tbody tr:hover td, .tbl.tr-hover tbody tr:hover th,
.tbl.tr-hover tbody tr.on td, .tbl.tr-hover tbody tr.on th { background-color:#ecf3fc; }
.tbl.tr-click tbody tr:hover td:not(.no-data), .tbl.tr-click tbody tr:hover th { text-decoration:underline; cursor:pointer;}

.tbl.tbl-ver-scroll { overflow-x:auto; }
.tbl.tbl-ver-scroll table { table-layout:fixed; }

.tbl.type1 thead th { padding:19px 5px 19px; font-size:15px; line-height:20px; font-weight:400; color:#666; text-align:center; border-top:1px solid #ddd; border-bottom:1px solid #7a7e82; background:#f0f2f5; }
.tbl.type1 td { padding:19px 5px 19px; font-size:17px; line-height:21px; font-weight:400; color:#111; text-align:center; border-bottom:1px solid #ddd; word-break:break-all; background-color:#fff;}
.tbl.type1 tfoot th, .tbl.type1 tfoot td { color:#093383; font-size:17px; line-height:21px; font-weight:400; text-align:center; border-bottom:1px solid #ddd; background:#ecf3fc;}
.tbl.type1 td.tl { padding:19px; }

.tbl.type2 thead th { padding:19px 5px 19px; font-size:15px; line-height:21px; font-weight:400; color:#666; text-align:center; border-top:1px solid #ddd; border-bottom:1px solid #7a7e82; }
.tbl.type2 td { padding:19px 5px 19px; font-size:17px; line-height:21px; font-weight:400; color:#111; text-align:center; border-bottom:1px solid #ddd; }
.tbl.type2 tfoot th, .tbl.type2 tfoot td { color:#093383; font-size:17px; line-height:21px; font-weight:400; text-align:center; border-bottom:1px solid #ddd; background:#ecf3fc;}

.tbl.type3 tbody th, .tbl.type3 td { height:19px; padding:10px 20px; font-size:17px; line-height:21px; text-align:left; vertical-align:top; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; vertical-align:middle; }
.tbl.type3 tbody th { padding:20px; color:#888; font-weight:400; letter-spacing:-1px; background:#f9f9f9; vertical-align:top; }
.tbl.type3 tbody td { min-height:65px; color:#111; background:#fff; }
.tbl.type3 tbody td + td,
.tbl.type3 tbody td.line { border-left:1px solid #e5e5e5; }
.tbl.type3 tbody td.blank { border-left:none; }
.tbl.type3 .inline-box { display:inline-block; vertical-align:middle; }
.tbl.type3.ver-m th, .tbl.type3.ver-m td { vertical-align:middle; }
.tbl.type3 td textarea,
.tbl.type3 td .inp-select,
.tbl.type3 td input[type=text] { width:100%; }

.tbl.type4 { border:1px solid #e5e5e5; border-radius:3px; }
.tbl.type4 th, .tbl.type4 td { padding:15px !important; text-align:center; }
.tbl.type4 thead th { font-size:15px; line-height:20px; color:#666; text-align:center; border:none; background-color:#f0f2f5; }
.tbl.type4 tbody td { font-size:17px; line-height:20px; color:#111; border-top:1px solid #e5e5e5; border-bottom:none; }
td .tbl.type4 td + td { border-left:none; }
.tbl.type4.line thead th + th,
.tbl.type4.line tbody td + td { border-left:1px solid #e5e5e5; }

.tbl.fixed .tbl-cnt { max-height:600px; margin-right:-8px; overflow-y:scroll; }
.tbl.fixed .tbl-cnt thead { position:absolute; height:1px; margin-top:-1px; overflow:hidden; opacity:0; }

td .div-tx { margin-top:5px; margin-bottom:5px; }

.tbl td.in-tbl { padding:0; }
.in-tbl .tbl-cnt { display:table; height:100%; width:100%; }
.in-tbl .tbl-cnt > li { display:table-row; width:100%;}
.in-tbl .tbl-cnt > li > * { display:table-cell; vertical-align:middle; }
.in-tbl .tbl-cnt > li + li { border-top:1px solid #e5e5e5; }
.in-tbl .tbl-cnt .th, .in-tbl .tbl-cnt .td { padding:10px 15px; font-size:17px; line-height:21px; }
.in-tbl .tbl-cnt .th { width:150px;  background:#f9f9f9; }

.div-tx { display:inline-block; vertical-align:top; }
a.div-tx { color:#111; text-decoration:underline; }
.div-tx + .div-tx { position:relative; margin-left:6px; padding-left:9px; }
.div-tx + .div-tx:before { content:''; position:absolute; width:1px; height:14px; top:50%; left:0; margin-top:-7px; background:#ddd; }

/* paging */
.paging { width:100%; margin-top:30px; font-size:0; text-align:center; }
.paging > span { display:inline-block; margin:0 5px; vertical-align:top; }
.paging > ul { display:inline-block; width:auto; margin:0 10px; vertical-align:top; }
.paging li { display:inline-block; margin:0 3px; vertical-align:top; }
.paging a, .paging li > span { display:block; min-width:30px; padding:7px 5px; font-size:15px; line-height:17px; color:#888; font-weight:500; box-sizing:border-box; overflow:hidden;}
.paging li > span, .paging li a:hover { color:#093383; }
.paging > span > a { text-indent:-10000px; background-repeat:no-repeat; background-position:center 50%; border:1px solid #e1e1e1;}
.paging .first { background-image:url(../images/ico_paging-first.png); }
.paging .prev { background-image:url(../images/ico_paging-prev.png); }
.paging .next { background-image:url(../images/ico_paging-next.png); }
.paging .end { background-image:url(../images/ico_paging-end.png); }

/* 이전글/다음글 */
.list-cnt-pn { margin-top:20px; border-top:1px solid #e5e5e5;}
.list-cnt-pn li { flex-wrap:nowrap; border-bottom:1px solid #e5e5e5; font-size:17px; line-height:28px; color:#666; overflow:hidden; }
.list-cnt-pn .dur { float:left; width:140px; padding:20px 10px; font-size:15px; line-height:21px; color:#666; background:#f9f9f9; box-sizing:border-box; text-align:center; }
.list-cnt-pn .dur:after { content:''; display:inline-block; width:12px; height:7px; margin-left:5px;  background:url(../images/ico_arrow-pn.png) no-repeat center 50%; vertical-align:middle; }
.list-cnt-pn li:last-child .dur:after { transform:scaleY(-1); }
.list-cnt-pn .title { display:block; height:61px; padding:20px; box-sizing:border-box; overflow:hidden; }
.list-cnt-pn .title a { display:inline-block; font-size:17px; line-height:21px; color:#666; vertical-align:top; }
.list-cnt-pn .title a:hover { color:#333; border-bottom:1px solid #333; }

/* editor 화면 */
.editor-cnt { min-height:300px; padding:20px; border:1px solid #ddd; border-radius:3px; overflow-y:auto; box-sizing:border-box; }

/* 체크박스 리스트 */
.list-select { position:relative; display:inline-block; width:100%; height:42px; vertical-align:middle; z-index:10; }
.list-select.on { z-index:150; }
.list-select .btn-list-tgl { display:block; padding:0 30px 0 9px; width:100%; height:100%; border:1px solid #ddd; border-radius:4px; font-size:17px; line-height:23px; text-align:left; outline:none; transition:border-color .3s cubic-bezier(.36,.04,.19,.99);}
.list-select .btn-list-tgl:focus { border-color:#1568dd; }
.list-select .btn-list-tgl > span { position:relative; display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box; }
.list-select .btn-list-tgl:after { content:''; position:absolute; width:14px; height:8px; top:50%; right:15px; margin-top:-4px; background:#fff url(../images/ico_select.png) no-repeat left top; }
.list-select.on .btn-list-tgl:after { transform:scaleY(-1); }
.list-select .list-wrap { position:absolute; display:none; width:100%; max-height:300px; top:41px; left:0; padding:10px; border:1px solid #ddd; background:#fff; overflow-x:hidden; overflow-y:auto; box-sizing:border-box; border-radius:3px; box-shadow:0 2px 6px rgba(0,0,0,.1);} 
.list-select.on .list-wrap { display:block; }
.list-select .list-item li { display:block; padding:6px 0; }
.list-select .list-item input { float:left; margin-right:7px; }
.list-select .list-item label { display:block; overflow:hidden; font-size:16px; line-height:20px; }
.list-select .list-info { margin-top:10px; padding:10px 0; border-top:1px solid #ddd; overflow:hidden;}
.list-select .list-info .tx-desc { float:left; color:#888; }
.list-select .list-info .btn { float:right; }

/* 공통화면 =============================================================== */
.error-wrap { padding-top:250px; text-align:center; }
.login .error-wrap { padding-top:50px; }
.error-wrap .ment { padding-top:150px; font-size:24px; line-height:34px; color:#111; background:url(../images/img_err.png) no-repeat center top; }
.error-wrap .desc { margin:20px 0 50px; font-size:18px; line-height:24px; color:#333; }
.error-wrap .btn-group .btn { min-width:210px; }

.loading-wrap { position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,.5); letter-spacing:-1px; z-index:1000; }
.loading-wrap .inbox { position:absolute; width:360px; height:320px; top:50%; left:50%; padding:35px; text-align:center; transform:translate3d(-50%, -50%, 0); background:#fff; border-radius:6px; box-sizing:border-box; }
.loading-wrap .img > img { animation:loading 1.2s cubic-bezier(.64,.51,.44,.63) infinite; }
.loading-wrap .ment { margin:30px 0 5px; font-size:24px; line-height:34px; color:#111; }
.loading-wrap .desc { font-size:18px; line-height:24px; color:#333; }

/* 모바일 화면용 */
.mobile-wrap { width:360px; max-height:calc(90vh - 370px); margin:0 auto; overflow-y:auto; }
.mobile-wrap img { width:100%; }

@keyframes loading {
    0% { transform:rotate(0); }
    100% { transform:rotate(360deg); }
}