/* login */
#wrap.login { height:auto; padding:200px 0 0; }
.login-wrap { width:600px; margin:0 auto; padding:60px; text-align:center; box-sizing:border-box; }
.logo-login { margin-bottom:50px; }
.login-inp { text-align:left; }
.login-inp .inp + .inp { margin-top:10px; }
.login-inp input[type=text],
.login-inp input[type=password] { width:100%; padding:18px 12px 17px 60px; font-size:17px; line-height:23px; border:1px solid #ddd; border-radius:3px; box-sizing:border-box; transition:border-color .3s cubic-bezier(.36,.04,.19,.99); outline:none; }
.login-inp input[type=text]:focus,
.login-inp input[type=password]:focus { border-color:#1568dd; }
.login-inp input[type=text] { background:url(../images/ico_input-id.png) no-repeat 25px 50%; }
.login-inp input[type=password] { background:url(../images/ico_input-pass.png) no-repeat 25px 50%; }
.login-inp label { display:inline-block; margin:0 0 0 3px; font-size:15px; line-height:20px; vertical-align:top; }

.login-wrap .btn-group { margin:30px 0 40px; }
.btn-login { display:block; width:100%; padding:18px; font-size:20px; line-height:24px; color:#fff; text-align:center; background:#1568dd; box-sizing:border-box; transition:background-color .3s cubic-bezier(.36,.04,.19,.99);}
.btn-login:disabled { background-color:#e1e9f5; }
.login-wrap .etc-btn ul { font-size:0; }
.login-wrap .etc-btn li { display:inline-block; }
.login-wrap .etc-btn li + li { position:relative; margin-left:20px; padding-left:20px; }
.login-wrap .etc-btn li + li:before { content:''; position:absolute; width:1px; height:14px; top:50%; left:0; margin-top:-7px; background:#ddd; }
.login-wrap .txBtn { font-size:15px; line-height:21px; color:#333; }

.layer-login .layer-mid { padding:44px 100px 60px; }
.layer-login .info-tx { margin-bottom:50px; font-size:18px; line-height:26px; font-weight:500; color:#111111; text-align:center; letter-spacing:-1px; }
.layer-login input[type=text], .layer-login input[type=password] { padding:18px 10px 17px; }
.layer-login .inp.set-wid { width:323px; }
.layer-login .inp + .inp { margin-top:16px; }
.inp-auth .inp-line { display:flex; }
.inp-auth input { flex-grow: 5; }
.inp-auth .time { flex-grow:1; margin-left:10px; font-size:15px; line-height:58px; text-align:center; }
.inp-auth .txBtn { flex-grow:1; margin-left:10px; font-size:15px; line-height:21px; color:#111; }
.inp-auth .txBtn span { border-bottom:1px solid #111; }

.captcha { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.captcha .btn-captcha-re { display:inline-block; width:40px; height:40px; margin-right:10px; text-indent:-9999px; background:url(../images/ico_reload.png) no-repeat center 50%; }

/* 마이페이지 */
.my-pass-chk { padding:50px 0 60px; text-align:center; }
.my-pass-chk .ment { font-size:20px; line-height:24px; color:#111; }
.my-pass-chk .desc { margin:25px 0 15px; font-size:17px; line-height:23px; color:#333; }
.my-pass-chk .inp { width:380px; margin:0 auto 30px; }

.my-info-modify .tbl.type3 td input[type=text], .my-info-modify .tbl.type3 td input[type=password] { width:400px; }
.my-info-modify .info-msg { display:block; }
.my-info-modify .inp { width:520px; }
.my-info-modify .inp + .inp { margin-top:10px; }
.my-info-modify .inp + .tx-desc { margin-top:8px; }
.my-info-modify .inp.send-auth-num,
.my-info-modify .inp.inp-auth { width:650px; }
.my-info-modify .inp label { width:118px; }
.my-info-modify .inp-obj .btn { min-width:120px; width:120px; margin-left:10px; padding:7px; box-sizing:border-box; }
.my-info-modify .inp-auth .inp-line { width:400px; padding-right:10px; box-sizing:border-box; }
.my-info-modify .inp-auth .time { line-height:42px; }
.my-info-modify .tbl.type3 td .inp-line input[type=text] { width:250px; }

/* 정산관리 */
.text-data { display:flex; flex-flow:row wrap; }
.text-data dl { display:flex; margin:6px 50px 6px 0; }
.text-data dt { padding-right:20px; font-size:17px; line-height:23px; color:#888; }
.text-data dd { font-size:17px; line-height:23px; color:#111; }

.total-price { position:relative; font-size:20px; font-weight:600; color:#1568dd; }
.text-data .total-price .tx { position:relative; display:inline-block; padding:0 5px; z-index:10; }
.text-data .total-price:before { content:''; position:absolute; width:100%; height:14px; left:0; bottom:-7px; background:#e1ebfb; z-index:1;}

  /* 상품별 요약정보 팝업 */
.layer-pdt-summary .layer-cnt { width:960px; }
.layer-pdt-summary .btn-group { margin-top:30px; }
.layer-pdt-summary .date-price .date { font-size:17px; line-height:24px; color:#888888; }
.layer-pdt-summary .date-price .price { margin-top:6px; font-size:20px; line-height:34px; color:#111; letter-spacing:-1px; }
.layer-pdt-summary .date-price .price > strong { font-size:30px; }

.layer-pdt-summary .ctrl-area { display:flex; justify-content:space-between; margin:25px 0 10px; }
.layer-pdt-summary .btn.ctrl { min-width:120px; padding:7px 15px; font-size:15px; line-height:21px; color:#888888; background:#eee; border-radius:20px; transform:color .2s, background-color .2s; }
.layer-pdt-summary .btn.ctrl.on { color:#fff; background:#1568dd; }
.layer-pdt-summary .btn.tgl { position:relative; margin-left:10px; padding-right:18px; font-size:15px; line-height:21px; color:#333; }
.layer-pdt-summary .btn.tgl:after { content:''; position:absolute; width:0; height:0; top:7px; right:0; border:6px solid transparent; border-top-color:#888; }
.layer-pdt-summary .btn.tgl.show:after { transform:scaleY(-1); transform-origin:0 30%; }

.layer-pdt-summary .inbox { max-height:calc(90vh - 400px); }
.layer-pdt-summary .inbox .tbl + .tbl { margin-top:20px; }

.layer-pdt-summary .tgl-cnt { display:none; margin-bottom:10px; padding:10px 0; border:1px solid #ddd; border-radius:3px; }
.layer-pdt-summary .tgl-cnt.show { display:block; }
.layer-pdt-summary .tgl-cnt th { padding:10px 20px; font-size:17px; line-height:23px; color:#888; font-weight:400; text-align:left; letter-spacing:-1px; vertical-align:top;}
.layer-pdt-summary .inp-list li { float:left; min-width:110px; margin:10px 10px 10px 0; }
.layer-pdt-summary .inp-list label { padding:0 8px 0 5px; font-size:17px; line-height:20px; color:#111; }

/* 기기관리 */
.tbl-ctrl { position:relative; display:inline-block; vertical-align:top; }
.tbl-ctrl .btn-tbl-ctrl { display:inline-block; width:36px; height:36px; text-indent:-9999px; border:1px solid #aaa; border-radius:3px; background:#fff url(../images/ico_tbl-ctrl.png) no-repeat center 50%; }
.tbl-ctrl .bal-wrap { position:absolute; display:none; width:200px; top:110%; right:0; padding:36px 20px 20px; background:#fff; border-radius:1px solid #ddd; box-shadow:0 0 6px rgba(0,0,0,.2);  box-sizing:border-box;}
.tbl-ctrl .bal-wrap:before { content:''; position:absolute; width:12px; height:9px; top:-8px; right:10px; background:url(../images/ico_tbl-box-arrow.png) no-repeat center top; }
.tbl-ctrl .bal-wrap li { padding:6px 0 6px 2px; overflow:hidden; }
.tbl-ctrl .bal-wrap input { float:left; margin-right:5px; }
.tbl-ctrl .bal-wrap label { display:block;margin-left:5px; font-size:15px; line-height:20px; color:#111; overflow:hidden; }
.tbl-ctrl .btn-tgl-close { position:absolute; width:24px; height:24px; top:15px; right:15px; text-indent:-9999px; transition:.2s cubic-bezier(.36,.04,.19,.99);}
.tbl-ctrl .btn-tgl-close:hover { transform:rotate(90deg) }
.tbl-ctrl .btn-tgl-close:before, 
.tbl-ctrl .btn-tgl-close:after { content:''; position:absolute; display:block; width:23px; height:1px; top:50%; left:0; background-color:#333;  }
.tbl-ctrl .btn-tgl-close:before { transform:rotate(45deg); }
.tbl-ctrl .btn-tgl-close:after { transform:rotate(-45deg); }

.tbl-ctrl.show .bal-wrap { display:block; }

td .td-in-set { display:inline-block; margin-left:50px; }
td .td-in-set .tit { color:#999; }

.inp-tx-list { display:flex; align-items:flex-end; }
.inp-tx-list .inp { margin-right:30px; }

.layer-change-con-pass .layer-cnt { width:600px; }
.layer-change-con-pass .tx-desc { margin-bottom:15px; }

.cc-info .btn-group { padding-top:10px; }

.layer-firmware-reg .layer-cnt { width:640px; }
.layer-firmware-reg .inp-select .select-list { max-height:135px; }
.layer-firmware-reg .inp-obj .btn { min-width:100px; }

.layer-firmware-update .layer-cnt { width:1100px; }
.layer-firmware-update .tx-desc { margin-bottom:15px; font-size:16px; color:#777; }
.layer-firmware-update .tbl.type3 { margin-bottom:20px; }
.layer-firmware-update .tbl.type3 td + th { padding-left:30px; }
.layer-firmware-update .inp-select { width:360px; }
.layer-firmware-update .inp-select.update-dep1 { width:175px; }
.layer-firmware-update .inp-select.update-dep2 { width:175px; margin-left:6px; }
.layer-firmware-update .inp-select + input { width:calc(100% - 364px) }
.layer-firmware-update .inp-select .select-list { max-height:135px; }


/* FAQ - 카테고리 설정 */
.category-set { display:flex; }
.category-set .desc-blank { font-size:17px; line-height:21px; color:#888; }
.category-set .cate-wrap { width:490px; padding-right:40px; box-sizing:border-box; }
.category-set .btn.add { width:100%; margin-top:25px; }
.category-set .cate-list { position:relative; height:320px; margin:20px 0 50px; overflow-y:auto; overflow-x:hidden; }
.category-set .cate-list ul { display:block; }
.category-set .cate-list li { position:relative; width:430px; margin-left:20px; display:flex; align-items:center; overflow:visible; box-sizing:border-box; }
.category-set .cate-list li:before { content:''; position:absolute; display:block; width:10px; height:1px; top:50%; left:-20px; background:#ddd; }
.category-set .cate-list li + li:after { content:''; position:absolute; display:block; width:1px; height:100%; bottom:50%; left:-20px; background:#ddd; }
.category-set .cate-list li + li.modify:after { left:-21px; }
.category-set .cate-list li.modify + li:after,
.category-set .cate-list li.add + li:after { height:calc(100% + 19px); }
.category-set .cate-list li input { width:340px; min-height:auto; padding:9px 10px 10px; border:none; font-size:17px; line-height:21px; background-color:transparent; }
.category-set .cate-list li input:read-only { cursor:pointer; }
.category-set .cate-list button { display:none; width:36px; height:36px; text-indent:-9999px; }
.category-set .cate-list .btn-modify { background:url(../images/ico_btn-modify.png) no-repeat center 50%; }
.category-set .cate-list .btn-del { background:url(../images/ico_btn-del.png) no-repeat center 50%; }
.category-set .cate-list .btn-cancel { background:url(../images/ico_btn-cancel.png) no-repeat center 50%; }

.category-set .cate-list li.add .btn-cancel,
.category-set .cate-list li.modify .btn-cancel,
.category-set .cate-list li.on .btn-modify,
.category-set .cate-list li.on .btn-del { display:block; }

.category-set .cate-list li.on.modify .btn-modify,
.category-set .cate-list li.on.modify .btn-del { display:none; }

.category-set .cate-list li.modify,
.category-set .cate-list li.add { margin-bottom:15px; padding:3px 0; border:1px solid #ddd; }
.category-set .cate-list li.modify input,
.category-set .cate-list li.add input { width:380px; }
.category-set .cate-list li.on { background:#ecf3fc; }
.category-set .cate-list li.on.modify { background:transparent; }

.category-set .cate-list li.ghost input { opacity:.3; background-color:#eee; }
.category-set .cate-list li.dummy { position:fixed; cursor:move; background:#ecf3fc; margin-left:0; z-index:1000; }
.category-set .cate-list li.dummy:before, .category-set .cate-list li.dummy:after { display:none; }
.category-set .cate-wrap .info { font-size:15px; line-height:21px; color:#111; }
.category-set .cate-wrap .info .title { margin-bottom:5px; }
.category-set .cate-wrap .info li { position:relative; padding-left:15px; color:#666; word-break:keep-all; }
.category-set .cate-wrap .info li:before { content:'*'; position:absolute; width:10px; height:16px; top:4px; left:0; }

.category-set .faq-wrap { flex:1; padding-left:70px; border-left:1px solid #ddd; }
.category-set .faq-list { margin-top:40px; }
.category-set .faq-list dl { display:flex; }
.category-set .faq-list dl + dl { margin-top:15px; }
.category-set .faq-list dt { width:130px; font-size:17px; line-height:21px; color:#888; }
.category-set .faq-list dd { flex:1; font-size:17px; line-height:21px; color:#111; }
.category-set .faq-list .btn-group { margin-top:15px; padding-top:10px; border-top:1px solid #ddd; }

.category-set .faq-list li { position:relative; display:flex; align-items:center; }
.category-set .faq-list input { width:20px; margin:0 5px 0 2px; }
.category-set .faq-list label { flex:1; line-height:20px; padding:8px; }
.category-set .faq-list input:checked + label { background:#ecf3fc; }

.category-set .faq-drag { position:relative; display:block; height:390px; overflow-y:auto;}
.category-set .faq-list li.ghost { opacity:.3; }
.category-set .faq-list li.dummy { position:fixed; cursor:move; margin-left:0; z-index:1000; }

/* A/S관리 */
.as-count { margin-bottom:20px; }
.as-count ul { display:flex; }
.as-count li { flex:1; min-width:138px; height:80px; margin-right:15px; }
.as-count li > button { display:flex; align-items:center; width:100%; height:100%; padding:20px 0; color:#fff; box-sizing:border-box; border-radius:10px; }
.as-count li .title { flex:1; padding-left:30px; font-size:17px; line-height:21px; text-align:left; }
.as-count li .title > i { border-bottom:1px solid transparent; transition:border-color .2s; }
.as-count li > button:hover .title > i,
.as-count li.on > button .title > i { position:relative; border-color:#fff; font-weight:bold; }
.as-count li .count { position:relative; flex:1; padding-right:35px; font-size:15px; text-align:right; }
.as-count li .count:before { content:''; position:absolute; width:1px; height:30px; top:50%; left:0; margin-top:-15px; background:rgba(255,255,255,.2); }
.as-count li .count > strong { display:inline-block; height:50px; margin-right:5px; font-size:48px; line-height:50px; font-family:roboto; letter-spacing:-2px; font-weight:500; vertical-align:baseline; }
.as-count li:first-child > button { color:#093383; border:1px solid #093383; background:#fff; }
.as-count li:first-child > button:hover .title > i,
.as-count li.on:first-child > button .title > i { border-color:#093383; }
.as-count li:first-child .count:before { background-color:rgba(0,0,0,.1); }
.as-count li:nth-child(2) > button { background:#093383; }
.as-count li:nth-child(3) > button { background:#1568dd; }
.as-count li:nth-child(4) > button { margin-right:0; background:#3f9af7; }

.as-count li.on > button .title > i:before,
.as-count li.on > button .title > i:after { content:''; position:absolute; width:8px; height:2px; top:16px; right:-13px; background:#fff; transform:rotate(50deg); }
.as-count li.on > button .title > i:after { width:12px; top:15px; right:-21px; transform:rotate(-50deg); }
.as-count li.on:first-child > button .title > i:before,
.as-count li.on:first-child > button .title > i:after { background-color:#093383; }

.ing-state ul { width:auto; font-size:0; }
.ing-state li { display:inline-block; margin-right:10px; }
.ing-state .btn { width:100px; }
.ing-state li.ing .btn { background-color:#1568dd; color:#fff; }
.ing-state li.end .btn, .ing-state li .btn:disabled { color:#fff; border-color:#e1e9f5; background-color:#e1e9f5; }
.ing-state .tx-desc { vertical-align:middle; }

/* 공지사항  */
.radio-tgl-dur .inp-inline,
.radio-tgl-view .inp-inline { vertical-align:middle; }
.layer-notice-vieww .layer-cnt { width:960px; }
.layer-notice-vieww .layer-mid { padding-top:20px; }
.layer-notice-vieww .tab-cnt { margin:20px 0; }
.layer-notice-vieww .tab-type1 { margin-bottom:30px; }

/* 공지사항 미리보기 관련 */
.mobile-wrap { border:1px solid #e4e5e6; }
.mobile-wrap .menu-list .title { display:block; line-height:22px; font-size:16px; letter-spacing:-0.62px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mobile-wrap .menu-list .date {display:block; line-height:22px; font-size:12px; letter-spacing:-0.46px; color:#777;}
.mobile-wrap .menu-list .date + .title,
.mobile-wrap .menu-list .title + .date {margin-top:1px}
.mobile-wrap .menu-list {padding:22px 20px 18px; border-bottom:1px solid #f4f4f4;}
.mobile-wrap .menu-detailbox {padding:22px 20px; line-height:22px; font-size:14px; letter-spacing:-0.54px; color:#777;}
.mobile-wrap .menu-detailbox pre {font-family: inherit; color:inherit;}

/* 사용자 관리 */
.tbl.power-set td { padding:15px 20px; vertical-align:top; } 
.tbl.power-set td .inp-inline { margin:5px 20px 5px 0; }
.id-check .inp-obj .btn,
.dbl-check .inp-obj .btn { min-width:120px; }

.tx-list-tit { display:block; margin-bottom:10px; }
.tx-list + * { margin-top:10px; }
.tx-list li + li { margin-top:3px; }
.tx-list .btn-del { display:inline-block; width:16px; height:16px; margin-left:10px; text-indent:-9999px; border:1px solid #aaa; border-radius:2px; background:url(../images/ico_btn-del2.png) no-repeat center 50%; vertical-align:middle; }

/* 사용자 그룹 편집 */
.layer-group-edit .layer-cnt { width:630px; margin:-405px 0 0 -315px; transform:translate(0, 0); }
.group-set-wrap { overflow:hidden; }
.group-set-wrap > .btn { float:right; margin-bottom:10px; }

.group-set-wrap .group-list { position:relative; clear:both; height:430px; margin:20px 0 10px; padding:5px; border:1px solid #e5e5e5; border-radius:4px; box-sizing:border-box; overflow-y:auto; overflow-x:hidden; }
.group-set-wrap .group-list ul { display:block; }
.group-set-wrap .group-list li { position:relative; width:100%; padding:3px 0; display:flex; align-items:center; overflow:visible; box-sizing:border-box; }
.group-set-wrap .group-list li input { width:440px; min-height:auto; padding:9px 10px 10px; border:none; font-size:17px; line-height:21px; background-color:transparent; }
.group-set-wrap .group-list li input:read-only { cursor:pointer; }
.group-set-wrap .group-list button { display:none; width:36px; height:36px; text-indent:-9999px; }
.group-set-wrap .group-list .btn-modify { background:url(../images/ico_btn-modify.png) no-repeat center 50%; }
.group-set-wrap .group-list .btn-del { background:url(../images/ico_btn-del.png) no-repeat center 50%; }
.group-set-wrap .group-list .btn-cancel { background:url(../images/ico_btn-cancel.png) no-repeat center 50%; }

.group-set-wrap .group-list li.add .btn-cancel,
.group-set-wrap .group-list li.modify .btn-cancel,
.group-set-wrap .group-list li.on .btn-modify,
.group-set-wrap .group-list li.on .btn-del { display:block; }

.group-set-wrap .group-list li.on.modify .btn-modify,
.group-set-wrap .group-list li.on.modify .btn-del { display:none; }

.group-set-wrap .group-list li.modify,
.group-set-wrap .group-list li.add { border:1px solid #ddd; }
.group-set-wrap .group-list li.modify input,
.group-set-wrap .group-list li.add input { width:470px; }
.group-set-wrap .group-list li.on { background:#ecf3fc; }
.group-set-wrap .group-list li.on.modify { background:transparent; }

.group-set-wrap .group-list li.ghost input { opacity:.3; }
.group-set-wrap .group-list li.dummy { position:fixed; cursor:move; background:#ecf3fc; margin-left:0; z-index:1000; }
.group-set-wrap .info { font-size:14px; line-height:20px; color:#111; vertical-align:top; }
.group-set-wrap .info li { position:relative; padding-left:15px; color:#888; word-break:keep-all;}
.group-set-wrap .info li:before { content:'*'; position:absolute; width:10px; height:16px; top:3px; left:0; }

.edit-input-list { width:580px; }
.edit-input-list li { display:flex; }
.edit-input-list li:first-child .btn.del { display:none; }
.edit-input-list li:first-child input { width:495px !important; }
.edit-input-list li + li { margin-top:10px; }
.edit-input-list li .btn { min-width:75px; margin-left:10px; }
.edit-input-list .add-line { width:100%; }

/* 알림설정 */
.alarm-set .inp { display:flex; align-items:center; margin-bottom:15px; }
.alarm-set .inp + .inp { margin-top:20px; }
.alarm-set .inp .title { width:75px; flex-basis:75px; font-size:14px; line-height:20px; color:#707070; }
.alarm-set .inp .title + * { flex:1; }
.alarm-set .week-list { font-size:0; }
.alarm-set .week-list li { position:relative; display:inline-block; margin-right:10px; vertical-align:top;}
.alarm-set .week-list .days { display:block; margin:0; padding:7px 10px; font-size:15px; line-height:20px; color:#333; border:1px solid #888; border-radius:3px; }
.alarm-set .week-list .set .days { color:#fff; border-color:#e1e9f5; background-color:#e1e9f5; }
.alarm-set .time-set .inp-select { width:130px !important; vertical-align:top; }
.alarm-set .time-set > i { display:inline-block; padding:0 6px; line-height:42px; vertical-align:top;}

.alarm-set .week-list input[type=checkbox] { position:absolute; width:1px; height:1px; top:0; left:0; opacity:0; overflow:hidden; }
.alarm-set .week-list input[type=checkbox] + .days { cursor:pointer; }
.alarm-set .week-list input[type=checkbox]:checked + .days { background-color:#1568dd; border-color:#1568dd; color:#fff; }

.layer-receiver-srch .cnt-box { margin-bottom:0; }
.layer-receiver-srch .tbl.type3 { margin-bottom:20px; }
.layer-receiver-srch .tbl.fixed { margin-right:7px; }
.layer-receiver-srch .tbl.fixed .tbl-cnt { min-height:100px; max-height:calc(100vh - 700px); }
.layer-receiver-srch .tbl-cnt tr { cursor:pointer; }
.layer-receiver-srch .inp-select .select-list { max-height:150px; }

/* 메인 */
.main .contents > .cnt-box { max-width:1700px; min-width:1520px; }
.main .cnt-title { color:#093383; }

.main-top { text-align:right; }
.main-top .date { display:inline-block; font-size:18px; line-height:46px; color:#888; vertical-align:top;}
.main-top .btn-reload { display:inline-block; width:46px; height:46px; text-indent:-9999px; background:url(../images/ico_reload-main.png) no-repeat center 50%; vertical-align:top;}
.main-top .btn-dashboard { display:inline-block; padding:8px 20px; font-size:18px; line-height:30px; color:#1568dd; background:#e5eef9;  border-radius:4px;}
.main-top .btn-dashboard:after { content:''; display:inline-block; width:8px; height:12px; margin-left:10px; background:url(../images/ico_arrow-dash.png) no-repeat center 50%; vertical-align:middle; }
.main-top .btn-dashboard { margin-left:10px; }

.list-card-as { display:flex; }
.list-card-as li { flex:1; background:#fff; color:#fff; border-radius:10px; }
.list-card-as li a { display:block; padding:25px; color:#fff; }
.list-card-as li + li { margin-left:19px; }
.list-card-as .title { width:315px; margin:0 auto 15px; font-size:17px; line-height:21px; }
.list-card-as .cnt { display:flex; width:315px; margin:0 auto; }
.list-card-as .count { flex:1; font-size:15px; line-height:24px; border-right:1px solid rgba(255,255,255,.3); }
.list-card-as .count > strong { display:inline-block; margin-right:3px; font-size:48px; line-height:50px; font-family:roboto; font-weight:600; letter-spacing:-0.06em;}
.list-card-as li:first-child { border:1px solid #093383; color:#093383; }
.list-card-as li:first-child a { color:#093383; }
.list-card-as li:nth-child(2) { background-color:#093383; }
.list-card-as li:nth-child(3) { background-color:#1568dd; }
.list-card-as li:nth-child(4) { background-color:#3f9af7; }
.list-card-as .graph-area { width:210px; padding-left:15px; box-sizing:border-box; }
.list-card-as .graph-wrap { display:flex; justify-content:space-between; align-items:center; font-size:13px; line-height:17px; }
.list-card-as .graph-wrap + .graph-wrap { margin-top:16px; }
.list-card-as .graph-wrap .tit { width:56px; color:rgba(255,255,255,.6); letter-spacing:-0.03em;}
.list-card-as .graph-wrap .bar { position:relative; display:inline-block; width:100px; height:8px; border-radius:5px; background-color:rgba(255,255,255,.15); overflow:hidden; }
.list-card-as .graph-wrap .bar > span { position:absolute; width:0; height:100%; border-radius:5px; background:#fff; transition:width .7s cubic-bezier(.21,.03,.11,.98); }
.list-card-as .graph-wrap .desc { width:39px; text-align:right; }

.list-card-as li.total-cnt { padding:25px 0; }
.list-card-ad li.total-cnt .cnt { display:flex; }
.list-card-as li.total-cnt .count { flex:1; border-right:none; text-align:left;}
.list-card-as li.total-cnt .count + .count { border-left:1px solid #e5e5e5; }
.list-card-as li.total-cnt .count .tit { display:inline-block; margin-right:15px; padding:6px 0; font-size:15px; line-height:17px; color:#111; }
.list-card-as li.total-cnt .count + .count .tit { margin-left:25px; }
.list-card-as li.total-cnt .count .total { font-size:43px; } 

.cnt-device { display:flex; }
.cnt-device > .graph-device { flex:1; }
.cnt-device > .graph-device:first-child { flex:1.6; margin-right:20px;}
.cnt-device .cnt-box-r { padding:0; }
.cnt-device .total-count { display:block; padding:11px 40px 9px; border-bottom:1px solid #e5e5e5; color:#111; font-size:15px; line-height:36px; letter-spacing:-0.05em; }
.cnt-device .total-count .tit { color:#888; }
.cnt-device .total-count .total { margin-left:20px; font-size:30px; font-family:roboto; font-weight:500; letter-spacing:-0.06em; }
.cnt-device .list-graph { display:flex; padding:35px 10px; box-sizing:border-box;}
.cnt-device .list-graph li { flex:1; padding:0 25px; box-sizing:border-box;}
.cnt-device .list-graph li + li { border-left:1px solid #e5e5e5; }
.cnt-device .list-graph li > a { display:block; }
.cnt-device .list-graph .title { display:inline-block; padding-right:15px; font-size:17px; line-height:21px; color:#000; background:url(../images/ico_arrow-main-device.png) no-repeat right 50%;}
.cnt-device .list-graph .count { margin:5px 0 25px; font-size:15px; line-height:30px; color:#000; }
.cnt-device .list-graph .count > strong { margin-right:5px;font-size:28px; font-family:roboto; font-weight:600; letter-spacing:-0.05em; color:#f76252; }
.cnt-device .list-graph .per { font-size:15px; line-height:19px; color:#666; }
.cnt-device .list-graph .bar { position:relative; width:100%; height:8px; margin-top:2px; border-radius:5px; background:#f2f2f2; overflow:hidden; }
.cnt-device .list-graph .bar > span { position:absolute; width:0; height:100%; border-radius:5px; background:#f76252; transition:width .7s cubic-bezier(.21,.03,.11,.98);}

.cnt-device .list-graph li.blue .count > strong { color:#1568dd; }
.cnt-device .list-graph li.blue .bar > span { background-color:#1568dd; }

.location-state .cnt-box-r { margin-bottom:10px; padding:20px 40px; }
.location-state .tgl-top { position:relative; display:block; width:100%; text-align:left; }
.location-state .btn-tgl { position:absolute; display:block; width:36px; height:36px; top:1px; right:0; text-indent:-9999px; }
.location-state .btn-tgl:before,
.location-state .btn-tgl:after { content:''; position:absolute; width:14px; height:1px; background-color:#111; top:50%; transition:transform .2s cubic-bezier(.36,.04,.19,.99), background-color .2s linear; }
.location-state .btn-tgl:before { right:15px; transform:rotate(45deg); }
.location-state .btn-tgl:after { right:5px; transform:rotate(-45deg); }
.location-state .cnt-box-r.show .btn-tgl:before { transform:rotate(-45deg); background-color:#093383; }
.location-state .cnt-box-r.show .btn-tgl:after { transform:rotate(45deg); background-color:#093383;}
.location-state .tgl-top .name { display:inline-block; font-size:20px; line-height:34px; color:#111; vertical-align:top; }
.location-state .tgl-top .name + .count-set { margin-left:50px; }
.location-state .tgl-top .count-set { position:relative; display:inline-block; padding:0 50px; font-size:15px; line-height:34px; color:#111; }
.location-state .tgl-top .count-set .title { font-size:17px; color:#888; }
.location-state .tgl-top .count-set > strong { margin-left:30px; font-size:30px; font-family:roboto; font-weight:500; }
.location-state .tgl-top .count-set:before { content:''; position:absolute; width:1px; height:26px; left:0; top:50%; margin-top:-13px; background:#e5e5e5; }

.location-state .tgl-cnt { display:none; }
.location-state .show .tgl-cnt { display:block; }

.list-card-loc { display:flex; flex-wrap:wrap; margin-top:25px; }
.list-card-loc li { width:calc(25% - 15px); margin:0 20px 20px 0; padding:20px; background:#f9fafc; border:1px solid #e5e5e5; border-radius:10px; box-sizing:border-box;}
.list-card-loc li:nth-child(4n) { margin-right:0; }
.list-card-loc .name { display:block; margin-bottom:10px; padding-left:35px; font-size:17px; line-height:21px; color:#1568dd; }
.list-card-loc .cnt-set { display:flex; }
.list-card-loc .count-set { flex:1; padding:0 10px 0 35px; font-size:15px; color:#111; }
.list-card-loc .count-set .title { display:block; margin-bottom:3px; font-size:15px; line-height:21px; color:#888; letter-spacing:-0.03em;}
.list-card-loc .count-set > strong { font-size:26px; line-height:30px; font-family:roboto; font-weight:500; }
.list-card-loc .count-set + .count-set { border-left:1px solid #e5e5e5; }

/* 2021-01-29 영상탐색 */
.layer-clip-view .layer-title { font-size:20px; line-height:24px; padding:17px 25px; color:#fff; font-weight:500; border-bottom-color:#444; }
.layer-clip-view .layer-top { padding:0; }
.layer-clip-view .layer-cnt { width:1000px; background:#1f2021; }
.layer-clip-view .layer-mid { padding:0; }
.layer-clip-view .btn-close { top:17px; right:25px; }
.layer-clip-view .btn-close:after, .layer-clip-view .btn-close:before { background-color:#fff; }

.main-video { padding:30px; background:#1f2021; }
.main-video .cnt-box { width:100%; margin:0; }
.main-video .video-top { position:relative; display:flex; width:1000px; margin:0 auto 23px; align-items:flex-end; color:#fff;}

.main-video .division-btns { position:absolute; right:0; bottom:0; font-size:0; }
.main-video .division-btns li { display:inline-block; margin-left:10px; }
.main-video .division-btns button { display:block; width:20px; height:20px; padding:1px 0 3px; font-size:12px; line-height:16px; font-family:roboto; color:#555; border:1px solid #555; border-radius:2px; text-align:center; box-sizing:border-box; }
.main-video .division-btns li.on button { color:#fff; border-color:#fff; background:rgba(255,255,255,.1); }

.main-video .video-list {position:relative; }

.main-video .video-list > ul { width:100%; height:100%; }
.main-video .video-list > ul > li {position:relative; justify-content: center; align-items: center;}

.main-video .video-list > ul > li img {width:100%; height:100%; object-fit: cover;}
.main-video .video-list li {position:relative; width:100%; height:100%; }
.main-video .video-list li.blank { width:100%; height:100%; background:#4d4f51 url(../images/img_video-blank.png) no-repeat center; box-sizing:border-box;}
.main-video .video-list li.blank .ment { padding-top:230px; font-size:20px; line-height:24px; letter-spacing:-1px; }
.main-video .video-list li.blank .desc { margin:8px 0 20px; font-size:16px; line-height:20px; color:#777; }
.main-video .video-list .count9 li.blank {background-size:40px auto;}
.main-video .video-list li.none-rec { background:#000; }
.main-video .video-list li.none-rec img { opacity:0; }
.main-video .video-list li.error { position:relative; background:#4d4f51; }
.main-video .video-list li .err-tx { position:absolute; display:flex; justify-content:center; align-items:center; flex-direction:column; width:100%; height:100%; top:0; left:0; text-align:center; font-size:13px; line-height:19px; color:#fff; } 
.main-video .video-list li .err-tx > p { margin:5px 0; }
.main-video .video-list li .loading { width:30px; height:30px; border:5px solid #ddd; border-radius:30px; box-sizing:border-box; border-bottom-color:transparent; animation:videoLoading 1s infinite linear; }

@-webkit-keyframes videoLoading {
  0% { transform:rotate(0); -webkit-transform:rotate(0); }
  100% { transform:rotate(360deg); -webkit-transform:rotate(360deg); }
}
@keyframes videoLoading {
  0% { transform:rotate(0); -webkit-transform:rotate(0); }
  100% { transform:rotate(360deg); -webkit-transform:rotate(360deg); }
}

.main-video .video-list ul li .date, 
.main-video .video-list ul li .size {position:absolute; bottom:15px; font-size: 12px;line-height: 1.25; letter-spacing: -0.5px; font-weight:500; color:#fff}
.main-video .video-list ul li .date {left:14px;}
.main-video .video-list ul li .size {right:14px}

.main-video .video-img li {height:0; padding-top:56.25%}
.main-video .video-img.nvr li { padding-top:66.67%; }
.video-list .video-img img {width:100%; height:100%;}
.video-list > ul > li {display:none; min-height:470px;}
.video-list > ul > li.show {display:flex}

.main-video .video-cnt { position:relative; width:calc(100% - 110px); margin:0 auto; }
.video-cnt .btn-video { position:absolute; width:25px; height:40px; top:50%; margin-top:-20px; right:-50px; text-indent:-9999px; z-index:1}
.video-cnt .btn-video.prev { left:-50px; transform:scaleX(-1); }
.video-cnt .btn-video:before,
.video-cnt .btn-video:after { content:''; position:absolute; width:26px; height:2px; left:0; background:#444; transition:background-color .2s; }
.video-cnt .btn-video:hover:before, .video-cnt .btn-video:hover:after { background:#fff; }
.video-cnt .btn-video:before { top:10px; transform:rotate(45deg); }
.video-cnt .btn-video:after { bottom:10px; transform:rotate(-45deg); }
.video-cnt .video-name { position:absolute; width:85px; font-size:14px; line-height:18px; color:transparent; top:57%; right:-85px; transition:color .2s; text-align:center; }
.video-cnt .video-name.prev { left:-85px; right:auto; }
.video-cnt .btn-video:hover + .video-name { color:#777; }

.video-list .video-img .clip-time { position:absolute; font-size:10px; line-height:14px; bottom:10px; left:10px; color:#fff; }
.video-list .video-img .clip-pixel { position:absolute; font-size:10px; line-height:14px; bottom:10px; right:10px; color:#fff; } 
.video-camera-box {position:absolute; top:0; left:0; width:100%; padding: 10px 12px 45px;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0.3)); box-sizing:border-box; z-index:2}
.video-img li.nvr .video-camera-box {width:84%; right:0; margin:0 auto; }

.video-camera-name {display:block; width:80%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; }
.count4 .video-img {display: grid; grid-gap:2px; row-gap: 2px; grid-template-columns: repeat(2, 1fr); grid-auto-rows :minmax(auto,49.8%);}
.count9 .video-img {display: grid; grid-gap:2px; row-gap: 2px; grid-template-columns: repeat(3, 1fr); grid-auto-rows :minmax(auto,33%)}

.main-video .video-cnt .count { display:block; color:#aaa; text-align:right; }
.main-video .video-cnt .count .now {color:#fff;}
.main-video .video-cnt > * {flex:0.5}
.main-video .video-cnt > *:nth-child(2) {flex:2}

.main-video .flex-division-box {display:flex; width:auto; justify-content: space-between; align-items:center;}
.flex-division-box > * {flex:1}
.main-video .flex-division-box .division-btns{text-align:right;}
.main-video .flex-division-box .streaming-box {text-align:center;}

.main-video .btn-list-tgl .txt { display:block; max-width:280px; padding-right:23px; font-size:18px; color:#fff; background:url("../images/ico_tgl-btn02-down.png") no-repeat right center/ 13px auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.main-video .btn-list-tgl.open .txt { background-image:url("../images/ico_tgl-btn02-up.png");}
.main-video .video-ctrl { position:relative; margin:0 auto; }
.main-video .video-ctrl .btn-group {margin-top:10px; text-align:center; }

.layer-clip-view .flex-division-box .dropdown-wrap {margin-bottom:0}
.layer-clip-view .flex-division-box .division-btns
{position:static; bottom:auto; right:auto;}

.video-ctrl.disabled:after { content:''; position:absolute; width:100%; height:110%; top:-5%; left:0; background:rgba(31,32,33,1); }
.video-ctrl .date-set { position:absolute; left:0; top:15px; }
.video-ctrl .date-set .dropdown-box.date  { height:100%; }
.video-ctrl .date-set .dropdown-box.date .box{ bottom:35px; left:0; top:auto; right:auto;}

.video-ctrl .list-dropdown.rec-speed { position:absolute; top:50%; right:0; margin-top:-15px; }
.list-dropdown.rec-speed .btn-list-tgl { padding:4px 10px; border:1px solid #fff; border-radius:2em; }
.list-dropdown.rec-speed .btn-list-tgl .txt { padding:0 0 0 15px; font-size:14px; line-height:20px; background:url(../images/icon-play.png) no-repeat 3px 50%; }
.list-dropdown.rec-speed .dropdown-box .box { width:125px; padding:10px 0; top:auto; bottom:calc(100% + 8px); left:auto; right:0; background-color:rgba(0,0,0,.8); border:none; }
.list-dropdown.rec-speed .drop-list li { padding:0; border:none; }
.list-dropdown.rec-speed .drop-list .btn-cam-list { width:100%; padding:10px 40px; font-size:14px; line-height:20px; color:#fff; transition:background-color .2s, color .2s; }
.list-dropdown.rec-speed .drop-list .btn-cam-list:hover,
.list-dropdown.rec-speed .drop-list .btn-cam-list.on { font-weight:normal; background:rgba(255,255,255,.1); color:#1568dd;}
.list-dropdown.rec-speed .drop-list .btn-cam-list.on { background:rgba(255,255,255,.1) url(../images/ico_drop-chk.png) no-repeat 20px 50%;  }

.layer-clip-view .main-video .video-list > ul > li {margin:0 auto; max-width:1423px; max-height: 802px; height:auto;}
.layer-clip-view .count4 .video-img {gap:3px;}
.layer-clip-view .count9 .video-img {gap:4px;}
.layer-clip-view .main-video .video-img {height:100% }
.layer-clip-view .main-video .video-list > ul > li img { position:absolute; width:auto; height:100%; top:0; left:50%; transform:translate(-50%,0); }
.layer-clip-view .main-video .video-list > ul > li .ovenplayer {position:absolute; height:100%; top:0; left:50%; transform:translate(-50%,0);z-index:1;}

.layer-clip-view .btn-playstop { margin:0 50px; }
.layer-clip-view .btn-group .btn.gray-line { border-color:#ccc; background:#f8f8f8; }

.date-set .cal-top-title { margin-bottom:20px; font-size:20px; font-weight:500; }
.date-set .close-box { top:25px; right:30px; }
.date-set .close-box:before, 
.date-set .close-box:after { background:#000; }
.main-video .video-ctrl .date-set .btn-group { margin-top:30px; }
.dropdown-box.date .box { max-height:none; }
.date-set .btn-select,
.date-set .inp-select .select-list li button { font-size:14px; }

/*===== DROP MENU =====*/
.dim {display:none; position:fixed;	left:0; top:0;width:100%; height:100%;background:transparent; z-index:20;}
.open + div .dim {display:block;}

.dropdown-wrap {position:relative;
	margin-bottom:15px;}
.btn-list-tgl + .dropdown-box {display:none;}
.btn-list-tgl.open + .dropdown-box {display:block;}
.btn-date.show +.dropdown-box {display:inline-block}
.dropdown-box{display:none}
.dropdown-box .box {position:absolute; top:31px; left:0px; width: 345px; max-height: 502px; padding:15px 26px; border-radius: 10px; border: solid 1px #ddd;background-color: #fff;	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.08); box-sizing:border-box;z-index:20;}
.dropdown-box .accordion-box.inner {padding:0;}
.dropdown-box .accordion input[type="checkbox"] + label {border-top:none;}
.dropdown-box .btn-group .btn {min-width:auto}
.dropdown-box .btn-close {z-index:20}

.drop-list { max-height:450px; overflow-y:auto; }
.drop-list li {padding:13px 0; border-bottom:1px solid #e2e2e2; }
.drop-list li:last-child {border-bottom:none;}
.drop-list li .btn-cam-list {font-size:16px; line-height:23px;  letter-spacing: -0.47px; text-align:left;}
.drop-list li .btn-cam-list:hover {font-weight:bold; color:#1568dd}

.dropdown-box.date {position:absolute; left:0; top:0; width:100%; }
.dropdown-box.date .box {padding:25px 30px; top:auto;left:auto; bottom:10px; right:400px;}

/* mark */
.mark-dot {position:relative;}
.mark-dot:before {display:inline-block; margin-right:7px; width:8px; height:8px; border-radius:50%;content:''}
.mark-dot.streaming:before {background:#e92533;}
.mark-dot.record:before {background:#388efe;}
/* video bar button */
.btn-live {display:inline-block; margin-left:13px; width:59px; height:24px; background:url(../images/btn_golive.png) no-repeat;}
.btn-live > span {display:inline-block; text-indent:-9999px; text-align:left}
.btn-live:hover {background-image:url(../images/btn_golive-over.png)}
.btn-live.off {background-image:url(../images/btn_golive-off.png)}

.btn-playstop {width:70px; height:70px; border-radius:50%; background-image:url(../images/btn_play-type02.png); background-position:center; text-indent:-9999px}
.btn-playstop.stop {width:70px; height:70px; border-radius:50%;background-image:url(../images/btn_stop-type02.png);
background-position:center; text-indent:-9999px}

.btn-prev,
.btn-after {text-align:left; font-size:16px; background-repeat:no-repeat; color:#bbb;}
.btn-prev {padding-left:20px; background-position:left 60%;background-image:url(../images/ico_video-prev-type02.png);}
.btn-after {padding-right:20px; background-position:right center;background-image:url(../images/ico_video-next-type02.png); }
.btn-prev:hover {background-image:url(../images/ico_video-prev-type02-over.png);color:#1568dd;}
.btn-after:hover {background-image:url(../images/ico_video-next-type02-over.png);color:#1568dd;}
.btn-prev:disabled {background-image:url(../images/ico_video-prev-type02-disabled.png); color:#444; }
.btn-after:disabled {background-image:url(../images/ico_video-next-type02-disabled.png); color:#444; }

.btn-date {background:none; border:none; padding-left:27px; background:url(../images/ico_calendar.png) no-repeat center left; font-size:18px; color:#fff;}

/* AD계정 조회 */
.layer-user-ad-srch .layer-cnt { width:1000px; }
.layer-user-ad-srch .layer-mid { padding:30px 30px 40px; }
.layer-user-ad-srch .column-wrap { display:flex; align-items:flex-start; gap:16px; }
.layer-user-ad-srch .column { flex:1; }
.layer-user-ad-srch .srch-cnt { flex-shrink:0; display:flex; gap:12px; align-items:flex-end; margin-bottom:12px; }
.layer-user-ad-srch .srch-cnt .inp { flex:1; }
.layer-user-ad-srch .srch-cnt input { min-height:0; padding:7px 10px; line-height:17px; }
.layer-user-ad-srch .tbl.type4 th,
.layer-user-ad-srch .tbl.type4 td { padding:10px !important; font-size:15px; }

.layer-user-ad-srch .column.cnt-box-r { flex:1.2; margin:0; padding:20px; }
.layer-user-ad-srch .column.cnt-box-r .flex-box { gap:10px; margin-bottom:12px; }