@charset "UTF-8";

/* common */
/*@font-face {
    font-family:'Noto Sans KR';
    src:url('../fonts/NotoSansKR-Regular.woff');
    font-weight:400;
}
@font-face {
    font-family: 'Noto Sans KR';
    src: url('../fonts/NotoSansKR-Medium.woff');
    font-weight: 500;
}
*/
/*사용자 수정 시작 :: 버튼 텍스트 가로 세로 가운데 맞춤*/ 
.boxcc {
    display: flex !important;
    align-items: center;
    vertical-align: central;
    justify-content: center;
    height:48px !important;
    cursor:pointer;
}
.boxcc_title {
    display: flex !important;
    align-items: center;
    vertical-align: central;
    justify-content: center;
    height: 48px !important;
    font-size: 0.9em;
    color: #000000;
}
/*사용자 수정 끝*/
.flex {
    display: flex !important;
}
.fs-18 {font-size:18px;}
.tac {text-align:center !important;}
.mt15 {margin-top:15px;}
.alt {display:inline-block; width:0; height:0; font-size:0; overflow:hidden; position:absolute; left:0; top:0; text-indent:-9999px;}
.fl_l {float:left;}
.fl_r {float:right;}
.pr_120 {padding-right:120px;}
small {font-size:13px;}

.fc_green {color:#2aac37 !important;}
.fc_red {color:#b42917 !important;}
.fc_orange {color:#c46f00 !important;}
.fc_blue {color:#0f5eb9 !important;}

.input_row {font-size:18px;}
.input_row.line {border-top:1px solid #ccc; padding-top:21px;}
/*.input_row + .input_row {margin-top:17px;}*/
.input_row label {display:inline-block; font-size:15px;}
.input_row input {display:block; font-size:17px; width:100%; height:40px; border:1px solid #aaa; padding:10px; margin-top:4px;}
.input_row input[type=text]:hover,
.input_row input[type=text]:focus,
textarea:hover,
textarea:focus {outline:none; border:1px solid #1b82fb;}
.input_row input[type=checkbox] {width:21px; height:21px; vertical-align:middle;}
.input_row input[type=checkbox] + label {margin-left:4px; vertical-align:middle;}
.input_row.size_2 {overflow:hidden;}
.input_row.size_2 label {display:block;}
.input_row.size_2 input {width:calc(50% - 5px); float:left;}
.input_row.size_2 input + input {margin-left:10px;}
.input_row .label label,
.input_row .label span:first-child {display:inline-block; font-size:16px; vertical-align:top;}
.input_row .label span:last-child {display:inline-block; font-size:13px; vertical-align:top; padding:3px 0 0 13px; line-height:14px; letter-spacing:-0.5px;}
.input_row .label + input[type=text] {display:inline-block; width:119px; margin-right:10px;}
.input_row.flex > .input_row {margin-top:0; flex:1;}
.input_row.flex > .input_row + .input_row {margin-left:10px;}


button:focus {outline:none;}

::-webkit-input-placeholder {color:#aaa}
:-webkit-input-placeholder {color:#aaa}
::-moz-placeholder {color:#aaa}
:-moz-placeholder {color:#aaa}
:-ms-input-placeholder {color:#aaa}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder { /* WebKit browsers */ color:transparent; }
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:transparent; }
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { /* Mozilla Firefox 19+ */ color:transparent; }
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder { /* Internet Explorer 10+ */ color:transparent; }

.txt_noti {position:relative; padding-left:20px;}
.txt_noti:before {content:'※'; position:absolute; left:0; top:1px;}

.modal_wrap {display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:9; background:rgba(0, 0, 0, 0.5);}
.modal {display:block; position:absolute; width:350px !important; border-radius:5px; overflow:hidden; background-color:#fff; outline:none; background-clip:padding-box;
    transform:translateX(-50%) translateY(-50%); left:50%; top:40% !important;}
.modal .contents {width:100%; min-height:111px; display:table;}
.modal .contents .txt {display:table-cell; width:100%; font-size:18px; text-align:center; vertical-align:middle; padding:40px;}
.modal .contents .video_area {display: flex; align-items: flex-end; justify-content: center;}
.modal .btn_wrap {width:100%; height:50px; border-top:1px solid #ccc;}
.modal .btn_wrap button {width:50%; height:100%;  float:left; color:#222; background-color:#fff; border:0;}
.modal .btn_wrap button + button {border-left:1px solid #ccc; color:#1B82FB;}

.btn_close {position:absolute; top:50%; right:25px; margin-top:-15px; width:30px; height:30px; background-color:transparent; border:none;}
.btn_close:before {content:' '; position:absolute; left:3px; top:50%; width:30px; border-top:3px solid #C4C4C4; transform:rotate(45deg);}
.btn_close:after {content:' '; position:absolute; left:3px; top:50%; width:30px; border-top:3px solid #C4C4C4; transform:rotate(-45deg);}
.btn_close.black:before,
.btn_close.black:after {border-top:2px solid #959595;}

.btn_back {position:absolute; top:50%; left:25px; margin-top:-12px; width:27px; height:24px; background:url('../images/arrw_left.png') no-repeat; border:none;}

.modal.video {width:1200px; height:655px; position:relative; border-radius:0; background:#000;}
.modal.video .header {position:relative; left:0; top:0; width:100%; height:60px; line-height:60px; font-size:24px; color:#fff; padding:0 25px; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.7); z-index:1;}
.modal.video .footer {position:absolute; bottom:0; left:0; width:100%; height:65px; line-height:80px; background-color:rgba(0, 0, 0, 0.7); padding-left:25px; border-top:2px solid #777;}
.modal.video .status {min-width:96px; padding:0 10px; display:inline-block; height:42px; font-size:24px; border-radius:21px; line-height:40px; box-shadow:1px 1px 1px rgba(0, 0, 0, 0.7);}
.modal.video .btn_wrap {float:right; width:auto; height:90px; border:0; position:relative; top:-2px;}
.modal.video .btn_wrap button {position:relative; display:block; float:left; width:170px; height:100%; background-color:transparent; border:none; border-top:2px solid #777; border-left:2px solid #777; color:#aaa; font-size:30px;}
.modal.video .btn_wrap button:not([disabled]):hover {border:2px solid #1B82FB; padding-left:2px; padding-top:2px;}
.modal.video .btn_wrap button:not([disabled]):hover + button {border-left-color:transparent;}
.modal.video .btn_wrap button small {font-size:20px;}
.modal.video .btn_close:before {box-shadow:1px 1px #000;}
.modal.video .btn_close:after {box-shadow:1px 1px #000;}

.modal.video.type2 {width:100% !important ; height:100% !important ; position:relative; border-radius:0; background:#000;margin-top:95px;}
.modal.video.type2 .footer {padding-left:0;}
.modal.video.type2 .status { top:20px; min-width:96px; height:36px; font-size:24px; border-radius:21px; line-height:34px; padding:0 10px; display:inline-block;}
.modal.video.type2 .btn_wrap {clear:both; width:100%;}
.modal.video.type2 .btn_wrap button {width:calc(100% / 3);}
.modal.video.type2 .btn_wrap button:first-child:not(:hover) {border-left-color:transparent;}
.modal.video.type2 .btn_wrap button.origin {width: 20%;}





.toast {display:none; position:fixed; width:320px; padding:24px 40px; background:#FFFFFF; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.1); border-radius:5px; font-size:18px; line-height:110%; text-align:center; color:#333;
    transform:translateX(-50%) translateY(-50%); left:50%; top:50%; z-index:10;}

.btn_wrap {overflow:hidden;}
.btn_wrap button {float:left; font-size:17px; color:#fff; background-color:#999EA6;}
.btn_wrap button.green {background-color:#419559;}
.btn_wrap button.green:hover{box-shadow:0 4px 20px -2px rgba(39, 94, 93, 0.5);}
.btn_wrap button.red {background-color:#c03f2be6;}
.btn_wrap button.red:hover{box-shadow:0 4px 20px -2px rgba(254, 39, 39, 0.5);}
.btn_wrap button.blue {background-color:#1d3e9c;}
.btn_wrap button.blue:hover{box-shadow:0 4px 20px -2px rgba(39, 94, 254, 0.5);}
.btn_wrap button.deepGray {background-color:#333;}
.btn_wrap button.orange {background-color:#E26D01;}
.btn_wrap button.mid {width:100px}
.btn_wrap button.sm {width:18.7% !important;}
.btn_wrap button:disabled {color:#555 !important; cursor:default;}
.btn_wrap button:disabled:hover:before {content:none !important;}
.btn_wrap button.ep {width:40%  !important;}

.tab_wrap .tabs {overflow:hidden;}
.tab_wrap .tabs li {float:left;}
.tab_wrap .tabs li + li {margin-left:10px;}
.tab_wrap .tabs li a {display:block; color:#888; font-size:18px; padding:0 16px 7px;}
.tab_wrap .tabs li a:hover {color:#222;}
.tab_wrap .tabs li.on a {color:#222; border-bottom:3px solid #1B82FB;}
.tab {position:relative; margin:0 20px; border-top:1px solid #ccc;}

table {width:100%; line-height:100%; margin-top:10px;}
table thead th {border-bottom:1px solid #ccc; height:50px; text-align:center; color:#222; font-size:16px;}
table tbody td {border-bottom:1px solid #ccc; height:58px; padding:10px; color:#777; font-size:17px;}
table.type2 {border:1px solid #C4C4C4; border-bottom:0; margin-bottom:5px;}
table.type2 th {background-color:#D9D9D9; height:30px; border-color:#C4C4C4; font-size:14px;}
table.type2 th + th,
table.type2 tbody td + td {border-left:1px solid #C4C4C4;}
table.type2 tbody td {border-color:#C4C4C4; text-align:center; padding:5px; font-size:12px; height:auto;}
table.type3 th {background-color:#D9D9D9; border-bottom:1px solid #aaa; height:40px;}
table.type3 td {border-bottom:1px solid #ccc; height:60px; text-align:center !important;}

dl {padding:20px 10px;}
dl dt {display:block; font-size:14px; color:#999;}
dl dd {display:block; font-size:17px; color:#222; padding-top:6px; line-height:100%;}
dl dd + dt {margin-top:20px;}

.modal_wrap2 {display:none; position:absolute; top:140px; left:25px; z-index:9; margin-left:192px;}
.modal_wrap2 .modal {position:relative; left:0; top:0; transform:none; padding:0 5px;}
.modal_wrap2 .modal .header {position:relative; border-bottom:1px solid rgba(34, 34, 34, 0.1333); padding:8px 5px;}
.modal_wrap2 .modal h2 {display:inline-block; font-size:15px; color:#333; font-weight:500;}
.modal_wrap2 .btn_close {right:10px; font-size:0; background:url('../images/arrw_left_line_30.png') no-repeat 50%;}
.modal_wrap2 .btn_close:before,
.modal_wrap2 .btn_close:after {content:none;}

.modal_wrap2 .modal.info {width:349px; border-radius:3px; box-shadow:3px 3px 4px rgba(0, 0, 0, 0.2);}
.modal_wrap2 .modal.info h2 {padding-left:25px; background:url('../images/ico_status_info.png') no-repeat 0 50%;}
.modal_wrap2 .modal.info .contents {padding:5px 0;}
.modal_wrap2 .modal.info .contents .box {flex:1; padding:0 8px;}
.modal_wrap2 .modal.info .contents .box + .box {border-left:1px solid rgba(51, 51, 51, 0.2);}
.modal_wrap2 .modal.info select,
.modal_wrap2 .modal.info .input_row p {display:inline-block; font-size:15px; border-color:#ccc; line-height:26px; width:118px;}
.modal_wrap2 .modal.info select {border-radius:3px; height:26px; color:#666;}
.modal_wrap2 .modal.info .btn_modal_open {font-size:0; width:20px; height:20px; background:url('../images/arrw_right_black_20.png') no-repeat 50%; border:0; vertical-align:middle; margin-left:8px;}
.modal_wrap2 .modal.info dl {padding:0; font-size:0; margin-top:16px;}
.modal_wrap2 .modal.info dl dt {display:inline-block; width:60px; font-size:14px; color:#777;}
.modal_wrap2 .modal.info dl dd {display:inline-block; width:calc(100% - 60px); font-size:20px; padding-top:0; padding-left:8px;}
.modal_wrap2 .modal.info dl dd.present {font-size:25px; font-weight:bold; color:#1B82FB;}
.modal_wrap2 .modal.info dl dd.red {font-size:25px; font-weight:bold; color:#D90808;}
.modal_wrap2 .modal.info .table_wrap {margin-top:9px;}

.chk_wrap {position:relative; display:inline-block;}
.chk_wrap input[type=checkbox] {display:inline-block; position:absolute; z-index:0; left:4px; top:4px; opacity:0; filter:alpha(opacity=0);}
.chk_wrap label {display:inline-block; min-width:1px; min-height:20px; padding:0 0 0 20px; background:none; color:#000; font-size:14px; line-height:24px; cursor:pointer; vertical-align:top;}
.chk_wrap label:after {content:''; position:absolute; left:0; top:0; width:22px;height:22px;background:url('../images/ico_form1.png') no-repeat 0 0; zoom:1;}
.chk_wrap input:hover + label:after {background-position:-22px 0;}
.chk_wrap input[type='checkbox']:checked+label:after {background-position:-44px 0;}

.detail_link {display:inline-block; width:18px; height:18px; vertical-align:middle; background:url('../images/ico_detail.png') 0 0 no-repeat; margin-left:5px;}

/* 아이콘 */
.status {display:inline-block; width:auto; min-width:68px; padding:0 5px; height:24px; line-height:22px; font-size:15px; text-align:center;box-sizing:border-box; border-radius:17px; color:#888;}
.status100{width:100px;}
.status.open {color:#05AD16;}
.status.close {color:#DF3822;}
.status.error {color:#F59A23;}
.pin {position:absolute; display:block; width:59px; height:64px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; cursor:pointer; transform: translate(-50%, -100%); transition:ease-in-out 0.3s}
.pin:hover {z-index:5; }
.pin span {display:inline-block; width:34px; height:34px; color:#222; font-size:22px; text-align:center; padding:3px 0 0 4px;}
.pin.green {background-image:url('../images/pin_green.png');}
.pin.gray {background-image:url('../images/pin_gray.png');}
.pin.orange {background-image:url('../images/pin_orange.png');}
.pin.red {background-image:url('../images/pin_red.png');}
.pin.rStat {width:87px; height:73px; background-image:url('../images/bg_rStat_num.png');}
.pin.rStat span {position:absolute; display:block; width:auto; height:auto; padding:0;}
.pin.rStat .tit {top:22px; left:4px; color:#fff; font-size:11px;}
.pin.rStat .num {top:40px; left:4px; width:58px; height:28px; color:#000; font-size:10px;}
.pin.rStat .num em {font-size:19px; font-weight:normal;}
.pin.rStat .num.red {color:#D90808;}
.pin.rStat.type2 {width:auto; height:auto; background-color:#0F71E3; padding:5px 8px; background-image:none; box-sizing:border-box; min-width:160px;}
.pin.rStat.type2:before {content:''; position:absolute; top:-24px; right:-43px; width:63px; height:35px; background:url('../images/bg_rStat_tail.png') no-repeat;}
.pin.rStat.type2 span {position:relative; top:auto; left:auto;}
.pin.rStat.type2 .tit {font-size:12px; text-align:left;}
.pin.rStat.type2 .num {background-color:#fff; width:100%; font-size:19px; color:#000; margin:5px 0 0; height:37px; line-height:37px;}
.pin.rStat.type2 .num .stat {display:inline-block; color:#999; font-weight:bold; vertical-align:top; padding-left:2px; font-size:18px;}
.pin.rStat.type2 .num .stat.on {color:#CC0000;}

/* style */
html, body {width:1920px; height:100%; background-color:#000; color:#222; font-size:16px;}
#wrap {position:relative; width:100%; height:100%; overflow:hidden; min-height:890px;}

#container.login {width:100%; height:100%; background:url('../images/bg_gate1.jpg') no-repeat; background-size:cover;}
.login_area {position:absolute; width:1400px; height:720px; left:50%; top:50%; margin-left:-700px; margin-top:-360px; background:#FFFFFF; border-radius:25px; overflow:hidden;}
.login_area h1 {text-align:center; font-size:24px; margin:180px 0 11px;}
.login_area h1 span {display:block; font-size:20px; margin-top:-2px;}
.login_area input[type=checkbox] {display:inline-block; margin:0; width: 24px; height: 24px;}
.login_area button {width:100%; height:45px; font-size:21px; color:#fff; background:#1b82fb; border-radius:3px; border:none; margin-top:30px;}
.login_area p {font-size:15px; color:#aaa; text-align:center; margin-top:30px; line-height:138%;}
.login_area .input_row.save {margin-left:16px; margin-top:20px;}

.login_area .input_row.user input {width:100%; height:50px; border:0; display:inline-block; padding:0 0 3px 56px; border-bottom:1px solid #000; margin:0; font-size:15px;}
.login_area .input_row.user input:focus {border-color:#1B82FB;}
.login_area .input_row.user.id {margin-top: 30px}
.login_area .input_row.user.id input {background:url('../images/ico_man_black.png') 15px 9px no-repeat; background-size:25px auto;}
.login_area .input_row.user.id input:focus {background:url('../images/ico_man_blue.png') 15px 9px no-repeat; background-size:25px auto;}
.login_area .input_row.user.pw {margin-top: 13px}
.login_area .input_row.user.pw input {background:url('../images/ico_lock_black.png') 17px 11px no-repeat; background-size:22px auto;}
.login_area .input_row.user.pw input:focus {background:url('../images/ico_lock_blue.png') 17px 11px no-repeat; background-size:22px auto;}
.login_area .input_row.login_save {border:0; margin:20px 16px;}
.login_area .input_row.login_save > * {vertical-align:middle;}
.login_area .input_row.login_save .chk_wrap label {padding:0 0 0 36px; min-height:26px; margin:0; color:#2C2D31; font-size:14px;}
.login_area .input_row.login_save .chk_wrap label:after {background:url('../images/m_sprite.png') -166px -30px no-repeat; background-size:190px auto; margin:0;}
.login_area .input_row.login_save .chk_wrap input[type='checkbox']:checked+label:after {background-position:-166px -55px;}

#left_menu {position:absolute; width:192px; height:100%; background:#FFFFFF; box-shadow:2px 0px 4px rgba(0, 0, 0, 0.1);}

#left_menu .menu {color:#999;}
#left_menu .menu p {padding:0 15px; font-size:14px; margin-bottom:7px; color:#333;}
#left_menu .menu p span {display:inline-block; padding-left:20px;}
#left_menu .menu li {width:100%; height:48px; }

#left_menu .menu li a {display:block; width:100%; height:100%; padding:0 20px; line-height:48px; box-sizing:border-box; color:#666; font-size:18px;}
#left_menu .menu li.on {display:block; width:100%; height:100%; box-sizing:border-box; background:linear-gradient(to right, #00b4db, #0083b0);color:#fff;}
#left_menu .menu li.on a {color:#fff; font-weight:500;}
#left_menu .menu.hor {overflow:hidden; margin-top:18px;}
#left_menu .menu.hor li {float:left; width:50%; height:48px;}
#left_menu .menu.hor li.only{float:left; width:100%; height:48px;}
#left_menu .menu.hor li.on {background:linear-gradient(to right, #00b4db, #1f426c);}


#left_menu .menu.hor li a {padding:31px 0 0; line-height:initial; font-size:10px; color:#666; text-align:center; background-repeat:no-repeat; background-position:center 6px;}
#left_menu .menu.hor li:first-child a {background-image:url('../images/ico_map.png');}
#left_menu .menu.hor li:last-child a {background-image:url('../images/ico_conceptMap.png'); background-position:center 16px;}
#left_menu .menu.hor li:first-child.on a {background-image:url('../images/ico_map_on.png'); color:#fff;}
#left_menu .menu.hor li:last-child.on a {background-image:url('../images/ico_conceptMap_on.png'); color:#fff;}
#left_menu .menu.hor li:last-child a.only {background-image:url('../images/ico_map.png'); background-position:center;}
#left_menu .menu.hor li:last-child.on a.only {background-image:url('../images/ico_map_on.png'); color:#fff; line-height: 48px;font-size: 18px;background-position-x: 20px;width: 75%;padding: unset;}
#left_menu .menu.one {margin-top:18px;}
#left_menu .menu.one li a {height:48px; font-size:14px; padding:0 0 0 99px; color:#666; background-repeat:no-repeat; background-position:65px center;}
#left_menu .menu.one li:first-child.on a {background-image:url('../images/ico_map_on.png'); color:#fff;}
#left_menu .menu + .menu {margin:18px 0 23px;}
#left_menu .scrollArea {overflow-y:auto; height:100%; margin-top:23px;}
#left_menu .menu + .menu.btm {margin-top:23px;}
#left_menu .menu.btm p {margin-bottom:8px;}
#left_menu .menu.btm li {background:none; padding:0 0 0 20px; height:auto;}
#left_menu .menu.btm li + li {margin-top:8px;}
#left_menu .menu.btm li img {width:18px;vertical-align:sub}
#left_menu .menu.btm li .num {display:inline-block; color:#333;}
#left_menu .menu.btm li .rStatus {font-size:15px; color:#333; padding-left:2px;}
#left_menu .menu.btm li .rStatus + .num {font-size:18px; padding-left:22px;}
#left_menu .menu.btm li .rStatus + .num.red {color:#D90808;}
#left_menu .menu.txt + .menu.txt {margin-top:19px;}
#left_menu .menu.btm.txt p {margin-bottom:4px;}
#left_menu .menu.btm.txt li .num {padding-left:17px;}

#right_menu {position:absolute; width:120px; height:100%; right:0; top:0; background-color:#053664;z-index:99}
#right_menu li {cursor:pointer}
#right_menu li a {display:block; box-sizing:border-box; width:100%; height:110px; line-height:18px; padding-top:58px; color:#ddd; background-repeat:no-repeat; background-position:center 16px;
    font-size:15px; text-align:center; border-bottom:2px solid #435568;}
#right_menu li.short a {height:96px; padding-top:64px; background-position:center 20px;}
#right_menu li.gate a {background-image:url('../images/ico_menu.png');}
#right_menu li.rStatus a {background-image:url('../images/ico_rStat.png');}
#right_menu li.report a {background-image:url('../images/ico_paper.png');}
#right_menu li.open a {background-image:url('../images/ico_gate_open.png');}
#right_menu li.close a {background-image:url('../images/ico_gate_close.png');}
#right_menu li.stop a {background-image:url('../images/ico_stop.png');}
#right_menu li.release a {background-image:url('../images/ico_exmark.png');}
#right_menu li.reset a {background-image:url('../images/ico_reset.png');}
#right_menu li.auto_report a {background-image:url('../images/ico_report.png');}
#right_menu li:hover,
#right_menu li.on {background:linear-gradient(to right, #00b4db, #0083b0);}
#right_menu li:hover a,
#right_menu li.on a {color:#fff; border-bottom:2px solid #435568; font-weight:500;}
#right_menu li.gate:hover a,
#right_menu li.gate.on a {background-image:url('../images/ico_menu_on.png');}
#right_menu li.rStatus:hover a,
#right_menu li.rStatus.on a {background-image:url('../images/ico_rStat_on.png');}
#right_menu li.report:hover a,
#right_menu li.report.on a {background-image:url('../images/ico_paper_on.png');}
#right_menu li.open:hover a,
#right_menu li.open.on a {background-image:url('../images/ico_gate_open_on.png');}
#right_menu li.close:hover a,
#right_menu li.close.on a {background-image:url('../images/ico_gate_close_on.png');}
#right_menu li.stop:hover a,
#right_menu li.stop.on a {background-image:url('../images/ico_stop_on.png');}
#right_menu li.release:hover a,
#right_menu li.release.on a {background-image:url('../images/ico_exmark_on.png');}
#right_menu li.reset:hover a,
#right_menu li.reset.on a {background-image:url('../images/ico_reset_on.png');}
#right_menu .btn_logout {position:absolute; width:100%; bottom:11px; left:0; display:block; font-size:17px; color:#ccc; text-align:center;}
#right_menu .btn_logout:hover {background:linear-gradient(to right, #00b4db, #0083b0); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
#right_menu .btn_logout:before {content:''; display:inline-block; width:22px; height:22px; padding-right:5px; vertical-align:middle; background:url('../images/ico_power.png') 0 0 no-repeat;}
#right_menu .btn_logout:hover:before {background:url('../images/ico_power_on.png') 0 0 no-repeat;}


#container {width:100%; height:100%; padding:0 120px 0 192px; }
.concept_wrap {position:relative; width:100%; height:100%; overflow-y:scroll; background:#DFE1E4 url('../images/ico_compass.png') 96.5% 95% no-repeat; font-size:0;}
.concept_box {position:relative; display:inline-block; width:50%; height:963px; vertical-align:top;}
.concept_box .name_posi {position:relative; height:100%; color:#fff; font-size:15px; text-align:center;}
.concept_box .name_posi:before {content:''; display:block; width:10px; height:100%; background-color:#5992D4; position:absolute; left:50%; top:0;
    z-index:0; margin-left:-5px;}
.concept_box .name_posi > * {background-color:#5992D4; width:100px; height:30px; border-radius:15px; text-align:center; line-height:30px; position:relative; z-index:1; margin:0 auto;}
.concept_box .name_posi > *.long {height:auto; padding:8px 2px; line-height:15px;}
.concept_box .name_posi .name_river {background-color:#435279; width:113px; border-radius:0;}
.concept_box .name_posi .name_station {background-color:#00BFB4;}
.concept_box .detail_position {position:absolute; font-size:16px;}
.concept_box .detail_position.dp01 {left:36px; top:118px;}
.concept_box .detail_position.dp02 {left:479px; top:56px;}
.concept_box .detail_position.dp03 {left:25px; top:56px;}
.concept_box .detail_position.dp04 {left:468px; top:56px;}
.concept_box .detail_position.dp05 {left:36px; top:118px;}
.concept_box .detail_position.dp06 {left:479px; top:242px;}
.concept_box .detail_position.dp07 {left:468px; top:56px;}
.concept_box .detail_position.dp08 {left:204px; top:51px;}
.concept_box .detail_position li {width:300px; height:54px; padding:12px 13px; box-sizing:border-box; background-color:#fff; border-radius:5px; cursor:pointer;}
.concept_box .detail_position li + li {margin-top:8px;}
.concept_box .detail_position li > * {vertical-align:middle;}
.concept_box .detail_position li .name {display:inline-block; padding-left:7px; width:165px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle;}
.concept_box .detail_position li i {display:block; float:right; width:30px; height:30px;}
.concept_box .detail_position li i.bike {background:url('../images/ico_man_bike.png') center center no-repeat;}
.concept_box .detail_position li i.walk {background:url('../images/ico_man_walk.png') center center no-repeat;}
.concept_box.hor {width:100%; padding:0 33px;}
.concept_box.hor .name_posi {position:relative; text-align:left; height:auto; margin-top:109px; font-size:0;}
.concept_box.hor .name_posi:before {width:100%; height:10px; left:0; top:50%; margin:-5px 0 0;}
.concept_box.hor .name_posi li {display:inline-block; font-size:15px;}

.cctv_list {width:100%; overflow:hidden; background-color:#000;}
.cctv_list li {position:relative; width:25%;max-width:401px; height:227px; float:left; border-right:1px solid #7b7b7b; border-bottom:1px solid #7b7b7b;}
.cctv_list li .video_area {width:100%; height:100%; background-color:#000;}
.cctv_list li .video_area > * {width:100%; height:100%;}
.cctv_list li a {display:block; position:absolute; left:0; top:0; width:100%; height:179px; text-indent:-9999px; box-sizing:border-box; z-index:2;}
.cctv_list li .tit {position:absolute; width:100%; height:50px; line-height:50px; left:0; top:0; font-size:14px; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.7);
    color:#fff; font-weight:500;}
.cctv_list li .tit p {padding-left:15px; padding-right:90px;}
.cctv_list li .tit .status {font-size:15px; position:absolute; top:11px; right:15px;}
.cctv_list li .btn_wrap {position:absolute; left:0; bottom:0; width:100%; height:46px; overflow:hidden;}
.cctv_list li .btn_wrap button {position:relative; display:block; width:calc(100% / 3); height:100%; float:left; background-color:rgba(0, 0, 0, 0.7); color:#aaa; font-size:20px; border:0; border-top:1px solid #777;}
.cctv_list li .btn_wrap button:first-child:not([disabled]):hover {padding-left:0;}
.cctv_list li .btn_wrap button:not([disabled]):hover {border:2px solid #1B82FB; padding-left:1px; padding-top:1px;}
.cctv_list li .btn_wrap button + button {border-left:1px solid #777;}
.cctv_list li .btn_wrap button.fc_blue {font-size:20px; line-height:16px;}
.cctv_list li .btn_wrap button.origin{width: 20%;}

.cctv_list li.hover a {position:absolute; left:-2px; top:-2px; display:block; width:404px; height:229px; border:2px solid #1B82FB; z-index:2;}
.cctv_list li:nth-child(1).hover a {top:0px; left:0; height:227px; width:402px;}
.cctv_list li:nth-child(2).hover a,
.cctv_list li:nth-child(3).hover a,
.cctv_list li:nth-child(4).hover a {top:0; height:227px;}
.cctv_list li:nth-child(4n+1).hover a {left:0; width:402px;}
.cctv_list li:nth-child(4n+1).hover .btn_wrap {overflow:visible;}
.cctv_list li:nth-child(4n+1).hover .btn_wrap:before {content:''; position:absolute; left:0; top:-1px; width:2px; height:47px; background-color:#1B82FB;}
.cctv_list li.hover .btn_wrap {z-index:3;}

.side_pannel {display:block; position:absolute; right:-700px; top:0; width:440px; height:100%; overflow-y:auto; background-color:#fff; box-shadow:-2px 0px 4px rgba(0, 0, 0, 0.1); z-index:5; transition:ease-in-out 0.5s}
.side_pannel.on{right:120px}
.side_pannel .header {position:relative; height:60px; font-size:20px; color:#333; line-height:60px; padding:0 25px; border-bottom:1px solid #ddd;}
.side_pannel .search {padding-left:60px; background:url('../images/ico_search.png') 25px center no-repeat; border-bottom:1px solid #ddd;}
.side_pannel .search input[type=text] {border:0; padding:10px 0; height:60px; margin-top:0; font-size:17px;}
.side_pannel .search input[type=text]:focus::-webkit-input-placeholder,
.side_pannel .search input[type=text]:focus:-moz-placeholder,
.side_pannel .search input[type=text]:focus::-moz-placeholder,
.side_pannel .search input[type=text]:focus:-ms-input-placeholder {color:transparent;}

.side_pannel .btn_wrap {padding:20px 20px 20px 20px; display: flex;}
.side_pannel .btn_wrap button {height:44px; color:#fff; border:0; width:70px; border-radius:2px; padding:0; line-height:20px;border-radius:5px;text-shadow:16px}
.side_pannel .btn_wrap button:disabled {color:#fff !important; background-color:#777;}
.side_pannel .btn_wrap button:disabled + button:disabled {border-left:1px solid #fff;}
.side_pannel .btn_wrap button:not(:first-child) { margin-left: 5px;}
.side_pannel .btn_wrap button.blue.sm {line-height:17px; padding-bottom:5px;}


.side_pannel .gate_list li {position:relative; padding:10px 10px; cursor:pointer;border-bottom: 1px solid #ececec;font-size:0.9em}
.side_pannel .gate_list li:hover{background:#f6f6f6}
.side_pannel .gate_list li .chk_wrap {width:32px; vertical-align:middle;}
.side_pannel .gate_list li a.gName {display:inline-block; width:215px;}
.side_pannel .gate_list li .status {position:absolute; right:35px; top:50%; margin-top:-11px; font-size:13px; max-width:97px; height:24px; line-height:22px; letter-spacing:-1px;}
.side_pannel .gate_list li .detail_link {position:absolute; right:4px; top:50%; margin-top:-9px;}

.side_pannel .gate_list.rStatus {margin-top:10px;}
.side_pannel .gate_list.rStatus li {padding:16px 18px 16px 0; cursor:pointer;}
.side_pannel .gate_list.rStatus li .rName {display:inline-block; width:215px;}
.side_pannel .gate_list.rStatus {font-size:20px;}
.side_pannel .gate_list.rStatus .rStatus.red {color:#D90808;}
.side_pannel .gate_list.rStatus .detail_link {width:auto; height:30px; background:none; top:50%; margin-top:-15px;}
.side_pannel .gate_list.rStatus .detail_link:after {content:''; display:inline-block; width:18px; height:18px; vertical-align:middle; background:url('../images/ico_detail.png') 0 0 no-repeat; margin:-4px 0 0 11px;}


.side_pannel.detail .header {padding:0 62px 0 62px; border-bottom:1px solid #ccc;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.side_pannel.detail .top {padding:20px 20px 0;}
.side_pannel.detail .top .video_area {margin-top:10px; width:400px; background-color:#eee;}
.side_pannel.detail .top .video_area > * {width:100%; height:auto;}
.side_pannel.detail .top.rStatus {padding:10px 20px 0;}
.side_pannel.detail .top.rStatus dl dt {font-size:16px; color:#777;}
.side_pannel.detail .top.rStatus dl dd {font-size:24px; padding-top:1px;}
.side_pannel.detail .top.rStatus dl dd + dt {margin-top:24px;}
.side_pannel.detail .btn_wrap {padding:20px 20px 20px 20px;}
.side_pannel.detail .tab_wrap {margin:9px 20px 0;}
.side_pannel.detail .tab {display:none; margin-top:-1px;}
.side_pannel.detail .tab.on {display:block;}
.side_pannel.detail table tbody td {font-size:16px; line-height:100%; text-align:center;}
.side_pannel.detail table tbody td:nth-child(1) {text-align:left;}
.side_pannel.detail .gate_img {position:absolute; right:1rem; top:25px;}
.side_pannel.detail .gate_img img{max-width:120px}
.side_pannel.detail form {margin-top:20px;}
.side_pannel.detail .input_row input {height:36px; border:1px solid #aaa;}
.side_pannel.detail .input_row textarea {display:block; font-size:17px; width:100%; height:115px; overflow-y:scroll; padding:10px; border-color:#aaa; margin-top:4px;}

/*.side_pannel.report {width:1200px !important;}*/


.side_pannel.report table tbody td {font-size:0.8em;color:#333;height:20px;}

    .side_pannel.type2 {
        width: 580px;
    }

.side_pannel.type2.detail .tab {padding-top:15px; margin:0;}
.side_pannel.type2.detail .tab_wrap {margin:9px 0 0;}
.side_pannel.type2.detail .header {padding:0 25px 0 82px;}
.side_pannel.type2.detail .rStatus {padding:0;}
.side_pannel.type2.detail dl {padding:0;}
.side_pannel.type2.detail dl dt em {font-size:24px; color:#222; margin-left:10px;}
.side_pannel.type2.detail form {margin-top:0;}
.side_pannel.type2.detail .input_row label span {font-size:13px;}
.side_pannel.type2.detail .input_row .label {font-size:16px;}

.side_pannel.type2 .cont {padding:10px 25px 20px;}
.side_pannel.type2 .gate_table table {text-align:center;}
.side_pannel.type2 .gate_table table td {text-align:center;}
.table_wrap .btn_detail {font-size:0; width:30px; height:30px; border:0; background:url('../images/arrw_right_black_30.png') no-repeat;}
.sync_gate_list {height:430px; overflow-y:auto; margin-top:8px; border:1px solid #aaa; padding:8px; font-size:18px; line-height:25px;}
.side_pannel.type2.rStat .input_row .box {margin-top:10px; align-items:center;}
.side_pannel.type2.rStat .toggle.big {margin-right:20px;}
.side_pannel.type2.rStat .toggle.big + .txt_noti {font-size:15px; display:inline-block; width:calc(100% - 95px);}
.input_row input.with_m {display:inline-block; width:225px; vertical-align:text-bottom; margin-right:5px;}

.map {width:100%; height:100%; position:relative;}
/*.pin1 {left:371px; top:296px;}
.pin2 {left:421px; top:296px;}
.pin3 {left:470px; top:296px;}
.pin4 {left:520px; top:296px;}
.r01 {left:371px; top:150px;}
.r02 {left:491px; top:150px;}*/

label.toggle {position:relative; display:inline-block; width:76px; height:31px;}
label.toggle input {opacity:0; width:0; height:0;}
label.toggle .toggle {display:block; width:100%; height:100%; position:absolute; cursor:pointer; top:0; left:0; background-image:url('../images/btn_blue_toggle.png'); background-position:0 0;}
label.toggle input:checked + .toggle {background-position:0 -31px;}
label.toggle.red {width:60px; height:26px;}
label.toggle.red .toggle {display:block; width:100%; height:100%; position:absolute; cursor:pointer; top:5px; left:0; background-image:url('../images/btn_red_toggle.png'); background-position:0 0;}
label.toggle.red input:checked + .toggle {background-position:0 -26px;}
label.toggle.red.big {width:70px; height:31px;}
label.toggle.red.big .toggle {background-image:url('../images/btn_red_toggle_70.png'); background-position:0 0;}
label.toggle.red.big input:checked + .toggle {background-position:0 -31px;}

.multiple_list_box {display:flex; align-items:center; margin-top:30px; padding-top:30px; border-top:1px solid #ccc;}
.multiple_list_box .tit {font-size:16px; margin-bottom:8px;}
.multiple_list_box .multiple_list {width:230px;}
.multiple_list_box .multiple_list select {width:100%; height:240px; font-size:16px;}
.multiple_list_box .btn_box {width:40px; margin:0 12px;}
.multiple_list_box .btn_box button {font-size:0; border:0; width:40px; height:40px; background-repeat:no-repeat; background-size:100% auto;}
.multiple_list_box .btn_box button.move_right {background-image:url('../images/arrw_right_blue.png');}
.multiple_list_box .btn_box button.move_left {background-image:url('../images/arrw_left_blue.png'); margin-top:36px;}

.lock_area {padding:14px 0; text-align:center; position:absolute; bottom:0; left:0; width:100%;}
.lock_area .locker {margin:0 auto; width:120px; height:36px; border:1px solid #ccc; border-radius:3px; padding-left:29px; background:#eee url('../images/ico_lock.png') 19px 7px no-repeat; font-size:0;}
.lock_area .locker:after {content:'잠금해제'; display:inline-block; font-size:16px; color:#666; line-height:18px;}
.lock_area.on .locker {position:relative; background:#eee url('../images/ico_lock_on.png') 19px 7px no-repeat; z-index:1000;}
.lock_area.on .locker:after {content:'잠금상태'; background:linear-gradient(180deg, #EFF175 0%, #15D160 26.56%, #0F71E3 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.lock_area.on:before {content:''; display:block; position:fixed; top:0; left:0; width:100%; height:100%; z-index:999; cursor:not-allowed;}

.table_wrap .td_acc {color:#666; text-decoration:underline;}
.table_wrap .td_acc .btn_acc {font-size:0; border:0; width:25px; height:25px; background:url('../images/btn_round_on_off.png') no-repeat; background-position:0 0; vertical-align:middle; margin-left:30px;}
.table_wrap .td_acc .btn_acc.on {background-position:0 -25px}
.table_wrap .acc_txt td {height:auto; padding:0 10px; border-bottom:0;transition: 0.2s ease-in-out;}
.table_wrap .acc_txt div {text-align:left; font-size:14px; color:#777; height:0; box-sizing:border-box; overflow:hidden;transition: 0.2s ease-in-out;}
.table_wrap .acc_txt.on td {padding:10px; border-bottom:1px solid #ccc;}
.table_wrap .acc_txt.on div {height:auto;max-height: 100px;}
.table_wrap .td_acc.on {color:#0F71E3;}
.table_wrap .td_acc.on .btn_acc {background-position:0 -25px;}

/* temp */
.pin.rStat.type2.r01 {left:400px}
.pin.rStat.type2.r02 {left:600px}
.v-notices .v-toast .v-toast-text { color:white !important;}
.table-responsive{display: block; min-height: 1%; overflow: hidden}

::-webkit-scrollbar-thumb {background-color: #ccc;border-radius: 5px;}
#confirmation-dialog {display: none;}

.tooltip .status,.tooltip .tooltip-img{text-align:center}
.tooltip h5{font-weight:700;color:#333}
.tooltip{position:absolute;background-color:rgb(255,255,255,.9);border-radius:5px;padding:15px;display:block;pointer-events:none;z-index:1000;transform:translate(10vw, 20%);box-shadow:0 0 10px rgba(0,0,0,.1);max-width:400px}
.tooltip .flex{display:flex;justify-content:space-between;margin-bottom:20px;gap:20px}
.tooltip h5{margin:0;font-size:18px}
.tooltip .status{display:inline-block;min-width:68px;padding:0 10px;height:24px;line-height:22px;font-size:15px;border:1px solid #888;box-sizing:border-box;border-radius:17px;color:#888}
.tooltip .status.open{border:1px solid #05ad16;color:#05ad16}
.tooltip .flex .address,.tooltip .time{font-size:14px;color:#666}
.tooltip .tooltip-img img{max-width:100px;height:auto;border-radius:5px}
.tooltip .time{margin-top:10px}


/*모달 창*/
/*사용자 수정*/

.ui-dialog .ui-dialog-content {
    padding: 2em 1em;
    text-align: center;

    
}
.ui-widget-header {
    border: 1px solid #0e2642;
    background: #040e1e;
    color: #a4c8f2;
    font-weight: bold;
}
.ui-widget-content {
    border: 1px solid #2b4e76;
    background: #0a2c53;
    color: #e2ecf6;
}
.ui-dialog {
    width: 450px !important;
    /*box-shadow: 0 2px 3px #0094ff, 0 3px 10px rgba(127, 172, 202, 0.3);*/ /* 그림자 효과 추가 */
    border: solid 1px #0d152e;
}
/* CSS */

.ui-dialog-titlebar-close {
  
    display:none !important;
}

  

    #topState img {
        width: 18px;
        vertical-align: sub;
    }


/* 프로그래스 바 */

.progress-wrapper {
    margin: 10px;
    height: 32px;
    background: #eee;
    border-radius: 16px;
    display: flex;
    align-items: center;
    padding: 2px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* 중지 버튼 */
#stopBtn {
    height: 100%;
    padding: 0 16px;
    background-color: #f44336;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 14px 0 0 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9em;
    z-index: 2;
}

/* 진행바 래퍼 */
.progress-bar-wrapper {
    flex: 1; /* 버튼을 제외한 전체 너비 차지 */
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 0 16px 16px 0;
}

/* 진행바 */
#progressBar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4caf50, #81c784);
    color: white;
    font-size: 0.9em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.4s ease;
    white-space: nowrap;
}