@charset "utf-8";
/* 그래프 */
.area_graph1{position:relative;width:100%;padding:20px;background:#333B55;display:flex;justify-content:center;align-items:center}
.area_graph1 .graph_box{width:100%;height:100%;margin:40px 0 0 0;display:flex;justify-content:center}

.area_graph2{position:relative;width:100%;padding:20px;background:#F6F6F6;display:flex;justify-content:center;align-items:center;height:500px}
.area_graph2 .graph_box{width:100%;height:100%;margin:40px 0 0 0;display:flex;justify-content:center}

.area_content{overflow-y:scroll;height:calc(100vh - 500px)}
@media (min-height:1081px) {
    .area_graph2{flex:60%}
    .area_content{flex:40%;overflow-y:auto}
}

/* 범례 */
.legend_box{display:flex;position:absolute;top:20px;left:20px;z-index:1;background:transparent;border:1px solid rgba(255,255,255,0.2);border-radius:20px;padding:8px 25px}
.legend_box span{color:#fff;font-size:13px}
.legend_box i.point{display:inline-block;border-radius:50%;width:8px;height:8px;margin:0 7px 0 12px}
.legend_box i.point1{background:#fff;border:1px solid #ccc}
.legend_box i.point2{background:#6F7DE0}
.legend_box i.point3{background:#3B86F8}
.legend_box i.point4{background:#F54E4E}
.legend_box i.point5{background:#2DE8BB}

.area_graph2 .legend_box{border:1px solid rgba(0,0,0,0.2)}
.area_graph2 .legend_box span{color:#222}

/* 테이블 */
.table_type1{margin-top:20px}
.table_type1 table{width:100%;border-top:2px solid #213882}
.table_type1 table th,.table_type1 table td{text-align:center}
.table_type1 table th{background:#5C77D1;vertical-align:middle;padding:6px 12px;border-right:1px solid rgb(120, 144, 179);border-bottom:1px solid rgb(120, 144, 179);color:rgb(217 227 241);font-weight:400}
.table_type1 table th{height:40px}
.table_type1 table td{color:#828282;height:45px;line-height:43px;border:1px solid #ddd;vertical-align:middle}
.table_type1 table td:first-child{border-left:0}
.table_type1 table td:last-child{border-right:0}
.table_type1 thead{position:sticky;top:0;z-index:1}

.table_type2{margin-top:20px;overflow-y:scroll;height:215px;border-top:2px solid #222}
.table_type2 table{width:100%}
.table_type2 table th,.table_type2 table td{text-align:center}
.table_type2 table th{background:#F2F5FF;vertical-align:middle;padding:6px 12px;border-right:1px solid rgb(209, 217, 228);
    border-bottom:1px solid rgb(217 227 241);color:#6B7193;font-weight:700}
.table_type2 table th{height:40px}
.table_type2 table td{color:#828282;height:45px;line-height:43px;border:1px solid #ddd;vertical-align:middle}
.table_type2 table td:first-child{border-left:0}
.table_type2 table td:last-child{border-right:0}
.table_type2 thead{position:sticky;top:0;z-index:1}

.table_type3{margin-bottom:15px}
.table_type3 table{width:100%;border-top:1px solid #213882}
.table_type3 table th,.table_type3 table td{text-align:center;padding:0 4px}
.table_type3 table th{background:#909DC7;vertical-align:middle;padding:6px 12px;border-right:1px solid rgb(120, 144, 179);
    border-bottom:1px solid rgb(120, 144, 179);color:#fff;font-weight:400}
.table_type3 table th{height:40px}
.table_type3 table td{color:#828282;height:45px;line-height:43px;border:1px solid #ddd;vertical-align:middle}
.table_type3 table td:first-child{border-left:0}
.table_type3 table td:last-child{border-right:0}
.table_type3 thead{position:sticky;top:0;z-index:1}

.table_type3 .tr_title{border-bottom:2px solid #5e5f64;font-weight:700}
.table_type3 .tr_title td{color:#555}
.table_type3 .l_title{padding-left:35px}
.table_type3 .td_link{color:#505e94;}
.table_type3 .td_link:hover{text-decoration:underline}
.table_type3 .td_link span b{color:#505e94;font-weight:500}
.table_type3 .td_link span:hover b{text-decoration:underline}

.td_input_type1{max-width:120px;height:35px !important;line-height:33px !important;text-align:right}

.area_popcont{display:flex;gap:40px}
.area_popcont .area_list{overflow-y:scroll;width:32%;height:100%;padding-right:10px}
.area_popcont .area_img{width:68%}
.area_popcont .area_img img{width:100%;height:100%}
.area_popcont .h5_wrap{margin:3px 0;display:flex;justify-content:space-between}
.area_popcont .h5_wrap span{color:#999}
.area_popcont .h5_title{font-size:17px;color:#222;}


.table_type{border-top:2px solid #222}
.table_type table{width:100%}
.table_type table th,.table_type2 table td{text-align:center}
.table_type table th{background:#F2F5FF;vertical-align:middle;padding:6px 12px;border-right:1px solid rgb(209, 217, 228);
    border-bottom:1px solid rgb(217 227 241);color:#6B7193;font-weight:700;font-size:14px}
.table_type table th{height:30px}
.table_type table td{color:#828282;padding:0px 7px;border:1px solid #ddd;vertical-align:middle}
.table_type table td:first-child{border-left:0}
.table_type table td:last-child{border-right:0}
.table_type thead{position:sticky;top:0;z-index:1}



/* tip */
.tip_white{color:#fff;font-weight:300;font-size:14px}
.tip_white i{margin-right:6px}

.tip_black{color:#737789;font-weight:300;font-size:14px}
.tip_black i{margin-right:6px}

.graph_tip{position:absolute;top:20px;right:20px}


/* 서브검색바 & input */
.custom_select{position:relative}
.custom_select select{background:#fff}
.custom_select .icon{cursor:pointer;position:absolute;top:50%;right:10px;transform:translateY(-50%)}

.input_icon_calendar{background:url(../images/icon/icon_input_calendar.svg) no-repeat;display:block;width:16px;height:16px;background-size:16px}
.hyphen{display:flex;align-items:center;font-size:20px;color:#B7BFE7;margin:0 6px 0 -2px}

/* 팝업공통 --------- */
/*메인팝업*/
.main_popup{min-width:600px;min-height:650px;margin:0 auto;background:#fff;box-shadow:0 5px 10px #303242;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);padding:35px 30px}
.main_popup .title h2{font-size:20px;font-weight:600}
.main_popup .title a.btn_close{position:absolute;right:15px;top:15px}
.main_popup .title a.btn_close i{font-size:24px;color:#7E7E7E}

/* 탭메뉴 */
.tab_type1 ul{display:flex;padding:0 0 10px 0;margin-top:15px}
.tab_type1 ul li{flex:1}
.tab_type1 ul li a{display:block;padding:0 12px;font-size:15px;text-align:center;height:45px;line-height:43px;background:#ECECEC;color:#BEBEBE;margin-right:1px}
.tab_type1 ul li a.on{background:#A7B1CB;color:#fff}

.tab_type2 ul{display:flex;padding-bottom:10px}
.tab_type2 ul li{flex:1}
.tab_type2 ul li a{display:block;padding:0 12px;font-size:15px;text-align:center;height:45px;line-height:43px;background:#ECECEC;color:#959595;margin-right:1px}
.tab_type2 ul li a:hover,.tab_type2 ul li a.on{background:#6675C5;color:#fff}

.tab_type3 ul{display:flex;padding-bottom:10px}
.tab_type3 ul li{flex:1}
.tab_type3 ul li a{display:block;padding:0 12px;font-size:15px;text-align:center;height:45px;line-height:43px;background:#ECECEC;color:#959595;margin-right:1px}
.tab_type3 ul li a:hover,.tab_type3 ul li a.on{background:#1461fa;color:#fff}

/*메인팝업2*/
.tab_popup{max-width:1300px;min-height:680px;max-height:730px;margin:0 auto;background:#fff;box-shadow:0 5px 10px rgba(0,0,0,0.2);position:absolute;top:50%;left:50%;
    transform:translate(-50%, -50%);padding:12px 20px;z-index:999}
.tab_popup .title h2{font-size:20px;font-weight:600}
.tab_popup a.btn_close{position:absolute;right:12px;top:4px}
.tab_popup a.btn_close i{font-size:24px;color:#7E7E7E}


/*메인팝업3*/
.tab_popup2{width:100%;min-height:800px;margin:0 auto;background:#fff;box-shadow:0 5px 10px rgba(0,0,0,0.2);overflow:hidden;
    position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);padding:30px 20px;z-index:999}
.tab_popup2 a.btn_close{position:absolute;right:12px;top:4px}
.tab_popup2 a.btn_close i{font-size:24px;color:#7E7E7E}

.visual_wrapper{display:flex;width:100%}
.visual_wrapper div{width:100%;height:100%}

.swiper-container{width:100%;max-width:100%;height:100%;position:relative;}
.swiper-slide img{width:100%;height:auto;display:block;object-fit:cover;max-height:700px;}

.paging_wrap{display:flex;flex-wrap:wrap;position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:10}

#swiper-play-pause{margin-left:-35px}
.paging_wrap .btn_stop,.paging_wrap .play{border:0;width:20px;height:20px;margin:0 5px;cursor:pointer;display:none;}
.paging_wrap:hover .btn_stop,.swiper-play-pause:hover .btn_play {display: block;}
.paging_wrap .btn_stop{display:block;background:url(../images/icon/icon_visual_stop.png) no-repeat;}
.paging_wrap .play{display:block;background:url(../images/icon/icon_visual_play.png) no-repeat;}

.swiper-pagination{display:flex !Important;width:auto !Important}
.swiper-pagination-bullet{background:#969696 !important;opacity:1 !important}
.swiper-pagination-bullet-active{background:#4e5ba7 !Important}
.swiper-button-prev:after,.swiper-button-next:after{font-size:18px !important;color:#fff}
.swiper-button-prev,.swiper-button-next{border-radius:0;width:40px !Important;height:40px !Important;background:rgba(0,0,0,0.3)}

/* 타이틀 */
.h3_title{font-size:17px;margin:20px 0 12px 0;color:#333;font-weight:500}
.h3_title2{font-size:17px;margin:20px 0 12px 0;color:#333;font-weight:700;padding:0 0 10px 30px}
.h3_title3{font-size:17px;margin:0px 0 12px 0;color:#333;font-weight:500}

/* pagination */
.pagination{display:flex;justify-content:center;align-items:center;margin-top:20px}
    .pagination li.active > a{background-color:#d1d1d1;color:#fff}
    .pagination li.active > a:hover{background-color:#d1d1d1}
    .pagination li:first-child a{margin-left:0}
    .pagination li a{display:block;padding:0 1px;font-size:13px;margin-right:4px;text-align:center;line-height:28px;min-width:28px;min-height:28px;background-color:#F4F4F4;color:#999;margin-left:-1px}
    .pagination li a.arrow{background:#F4F4F4 url(../images/common/icon_page_next.png) 50% 50% no-repeat}
    .pagination li a.prev{transform:rotateZ(-180deg)}
    .pagination li a.arrow2{background:#F4F4F4 url(../images/common/icon_page_forward.png) 50% 50% no-repeat}
    .pagination li a.forward{transform:rotateZ(-180deg)}
    .pagination li a:hover{background-color:#cecece;text-decoration:none;color:#fff}


.form_basic{display:flex;align-items:center;margin:12px 0}
.form_basic label{width:150px;font-size:16px;font-weight:400;color:#333}
.form_basic div{width:calc(100% - 150px)}
.readonly{background:#eee}

.check_basic{display:flex;align-items:center;margin:12px 0}
.check_basic label{font-size:15px;font-weight:400;color:#333}

/* custom radio button */
.radio_button_wrap{display:flex;height:32px;align-items:center}
.radio_button_wrap2{display:flex;height:38px;align-items:center}
.radio_button_wrap2 .checkcontainer{margin-bottom:0;color:#5b648f}
.checkcontainer {position:relative;padding-left:28px;cursor:pointer;font-size:15px;margin-right:20px;-webkit-user-select:none; /* Chrome, Opera, Safari */
    -moz-user-select:none; /* Firefox 2+ */    -ms-user-select:none; /* IE 10+ */    user-select:none; /* Standard syntax */}

.checkcontainer input[type=radio] {position:absolute;opacity:0;cursor:pointer}
.checkmark {position:absolute;top:0;left:0;height:25px;width:25px;background-color:#eee}
.checkcontainer:hover input[type=radio] ~ .checkmark {background-color:#fff;border:1px solid #BDC6E8}
.checkcontainer input[type=radio]:checked ~ .checkmark {background-color:#5A71E9}
.checkmark:after {content:"";position:absolute;display:none}
.checkcontainer input[type=radio]:checked ~ .checkmark:after {display:block}
.checkcontainer .checkmark:after {left:10px;top:6px;width:7px;height:12px;border:solid white;border-width:0 3px 3px 0;
    -webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}

.radiobtn{position:absolute;top:50%;left:0;height:22px;width:22px;transform:translateY(-50%);background-color:#fff;border-radius:50%;border:1px solid #BDC6E8;box-shadow:0 1px 2px rgba(129, 138, 182,.6)}
.checkcontainer input[type=radio]:checked ~ .radiobtn{background-color:#fff;border:1px solid #BDC6E8}
.radiobtn:after {content:"";position:absolute;display:none}
.checkcontainer input[type=radio]:checked ~ .radiobtn:after {display:block}
.checkcontainer .radiobtn:after {top:50%;left:50%;transform:translate(-50%, -50%);width:12px;height:12px;border-radius:50%;background:#5A71E9}

.readonly_calendar{border:1px solid #cdd0dd;height:45px;line-height:43px;min-width:85px;color:#70789D;
    background:#eee url(../images/icon/icon_input_calendar.svg) 15px center no-repeat;background-size:12px;padding:0 10px 0 38px !important}


/* custom checkbox */
.checkbox_wrap{display:flex;height:38px;align-items:center}
.checkbox_wrap .checkcontainer{margin-bottom:0;color:#5b648f}
.checkbox_container{color:#70789D;margin-right:10px;cursor:pointer}

.checkcontainer input[type=checkbox] {position:absolute;opacity:0;cursor:pointer}
.checkcontainer:hover input[type=checkbox] ~ .checkmark {background-color:#fff;border:1px solid #BDC6E8}
.checkcontainer input[type=checkbox]:checked ~ .checkmark {background-color:#5A71E9}
.checkcontainer input[type=checkbox]:checked ~ .checkmark:after {display:block}

.checkbtn{position:absolute;top:50%;left:0;height:22px;width:22px;transform:translateY(-50%);background-color:#fff;border-radius:4px;border:1px solid #BDC6E8;box-shadow:0 1px 2px rgba(129, 138, 182,.6)}
.checkcontainer input[type=checkbox]:checked ~ .checkbtn{background-color:#fff;border:1px solid #BDC6E8}
.checkbtn:after {content:"";position:absolute;display:none}
.checkcontainer input[type=checkbox]:checked ~ .checkbtn:after {display:block}
.checkcontainer .checkbtn:after {top:50%;left:50%;transform:translate(-50%, -50%);width:12px;height:12px;border-radius:4px;background:#5A71E9}

/* 메인팝업 */
.popup_content{position:relative}

/* 종합정보 */
.area_data{width:85px;max-width:200px;box-shadow:0 2px 0px rgba(80, 85, 109, 0.6)}
.area_data dt{width:100%;height:24px;line-height:24px;padding:0 10px;background:rgba(90, 113, 233,0.6);color:rgba(255,255,255,0.7);font-size:14px}
.area_data dd{width:100%;height:35px;line-height:33px;background:rgba(255,255,255,0.8);color:#222;font-weight:700;padding:0 10px;text-align:right;}

.icon_cctv{display:block;width:34px;height:34px;border-radius:50%;box-shadow:0 2px 0px rgba(80, 85, 109, 0.6);
    background:#fff url(../images/icon/icon_cctv_off.png) center center no-repeat;background-size:18px;}
.unit {
	font-size: 11px;
	color: 'gray';
	line-height: 1.2;
}