@charset "UTF-8";

html,body{position:relative;  /* height: 100%; width: 100%; overflow: hidden; */ }
body.fixed{ position: fixed;}
.wrapper{ position:relative; height: 100%; width: 100%; overflow: hidden; /*min-width: 1700px;*/ }


/* --------------------------------header---------------------------------------- */
/* ------- header -------- */
.header{ display: flex; align-items: center; height:72px; padding: 0 20px; background-color: #074D9D;}
.header .top_logo{ margin-right: 20px;}


/* -------- 검색바 --------- */
.top_search_bar{ position: relative; width: 420px; height: 46px; background-color: #fff; border-radius: 100px; padding: 8px 60px 0 30px; }


.top_search_bar .map_sch_txt{ width: 100%; height: 28px; padding: 0; border: 0; font-size: 16px; background-color: transparent;}
.top_search_bar .map_sch_txt:focus{ outline: none; }
.top_search_bar .map_sch_txt::placeholder{}
.top_search_bar:hover .map_sch_txt::placeholder{ color: #333;}
.top_search_bar .map_sch_btn{ position: absolute; top: 5px; right: 8px; width: 38px; height: 38px; border-radius: 100px; background-color: #669df0; background-image: url(../images/ico_search.png); background-repeat: no-repeat; background-position: center center; transition: background-color 0.3s;}
.top_search_bar .map_sch_btn:hover{ background-color: #0b68f4; }


/* --------- util메뉴 ---------- */
.util_list{ margin-left: auto;}
.util_list .list{ display: flex; }
.util_list .list > li{ margin-left: 25px; }
.util_list .list > li:first-child{ margin-left: 0px; }
.util_list .list > li a{ display: inline-flex; align-items: center; height: 32px; color: #fff; font-size: 15px; text-decoration: none;}
.util_list .list > li a:before{ content: ""; display: inline-block; width: 24px; height: 24px; margin-right: 3px; background-position: 0 0; background-repeat: no-repeat; }
.util_list .list > li a.bt1:before{ background-image: url(../images/ico_top_01.png); }
.util_list .list > li a.bt2:before{ background-image: url(../images/ico_top_02.png); }
.util_list .list > li a.bt3:before{ background-image: url(../images/ico_top_03.png); }
.util_list .list > li a.bt4:before{ background-image: url(../images/ico_top_04.png); }
.util_list .list > li a.bt5:before{ background-image: url(../images/ico_top_07.png); }
.util_list .list > li a.bt6:before{ background-image: url(../images/ico_top_09.png); }
.util_list .list > li a.bt7:before{ background-image: url(../images/ico_top_10.png); }
.util_list .list > li a.bt_login:before{ background-image: url(../images/ico_top_08.png); }
.util_list .list > li a.bt_logout:before{ background-image: url(../images/ico_top_06.png); }

.util_list .list > li a:hover{ color: #FFE600;}
.util_list .list > li a:hover:before{ background-position: 0 -44px; }
.util_list .list > li a.bt_login{ color: #FFE600; }
.util_list .list > li a.bt_login:before{ background-position: 0 -44px; }
.util_list .list > li a.bt_logout{ color: #FFE600; }
.util_list .list > li a.bt_logout:before{ background-position: 0 -44px; }








/* ------------------------ top_menu_section ---------------------------------- */
.top_menu_section{ position: relative; z-index: 200; display: flex; align-items: center;  height: 43px; background-color: #fff; padding: 0 25px;}

/* 레이어 범례 보기 버튼 */
.layer_view_zone{ margin-right: 50px;}
.layer_view_zone .bt{ display: inline-flex; align-items: center; border: 1px solid #c9c9c9; height: 35px; padding: 0 35px; border-radius: 6px; font-size: 16px; font-weight: 700; color: #333;}
.layer_view_zone .bt::before{ content: ""; display: inline-block; width: 22px; height: 16px; margin-right: 10px; background-position: 0 0; background-repeat: no-repeat; background-image: url(../images/ico_layer_list.png);}
.layer_view_zone .bt:hover{ background-color: #f0f0f0; border-color: #878787; }
.layer_view_zone .bt.on{ background-color: #337DEF; border-color: #337DEF; color: #fff; }
.layer_view_zone .bt.on::before{ background-position: 0 -36px;}


/* 행정별 유역별 단계선택 */
.step_zone{ position: relative; display: flex; align-items: center; }
.step_zone::before{ content: ""; display: inline-block; width: 17px; height: 20px; margin-right: 10px; background-position: center center; background-repeat: no-repeat; background-image: url(../images/step_ico.png);}

.step_zone .location{ display: flex; align-items: center;  }
.step_zone .location a{ display: inline-block; padding: 6px 0;}
.step_zone .location a::after{ content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 5px; background-position: center center; background-repeat: no-repeat; background-image: url(../images/ico_step_arrow.png);}
.step_zone .location .gap{ display: inline-block; width: 5px; height: 10px; margin: 0 8px; background-position: center center; background-repeat: no-repeat; background-image: url(../images/ico_step_gap.png);}

.step_zone .LocalInfoList{ position: absolute; left: 0; top: 0; width: 100%;}
.step_zone .LocalInfoList .box{ position: absolute; top: 30px; min-width: 130px; background-color: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);}

.step_zone .LocalInfoList .box ul {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    max-height: 200px;
    padding: 6px 0;
    background-color: #fff;
}

.step_zone .LocalInfoList .box a {
    display: block;
    height: 26px;
    padding: 2px 12px 0;
    font-size: 13px;    
    background-color: #fff;    
    color: #666;
    text-decoration: none;
    white-space: nowrap;
}
.step_zone .LocalInfoList .box a:hover, 
.step_zone .LocalInfoList .box li.active a {
    background-color: #EAEAEA;    
}
.step_zone .LocalInfoList .box li.active a {
    color: #074D9D;
}



/* --------- 활성화 토글 체크박스 ---------- */
.top_menu_section .active_zone{ margin-left: auto;}

.active_check{ display: inline-flex; align-items: center; margin-left: 30px;}
.active_check .txt{ color: #333; line-height: 1; font-size: 14px; font-weight: 500;}
.active_check .chk{ margin-left: 10px;}
/* .active_check input[type="checkbox"].toggle_chk{ position:absolute; left:-5000px; width:0px; height:0px; border:none; padding:0px; } */
.active_check input[type="checkbox"].toggle_chk + label.toggle_lbl{ position: relative; display: inline-block; width: 60px; height: 28px; margin: 0 !important; background: #d9d9d9; border: 1px solid #d9d9d9;  border-radius: 30px; cursor: pointer; }
.active_check input[type="checkbox"].toggle_chk:checked + label.toggle_lbl{ background: #337DEF; border-color: #337DEF; }

.active_check input[type="checkbox"].toggle_chk + label.toggle_lbl:before{ content: '꺼짐'; position: absolute; top:8px; right: 9px; font-size: 10px; color: #333; margin: 0 !important; }
.active_check input[type="checkbox"].toggle_chk:checked + label.toggle_lbl:before{ content: '켜짐'; left: 7px; text-align: left; color: #fff;}
.active_check input[type="checkbox"].toggle_chk + label.toggle_lbl:after{ content: ''; position: absolute; top: 3px; left: 5px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: 0.3s ease-out; opacity: 0.6; }
.active_check input[type="checkbox"].toggle_chk:checked + label.toggle_lbl:after{ left: 34px; opacity: 1; }











/* ---------------------------------------- footer -------------------------------------------- */
.footer{ display: flex; align-items: center; justify-content: center; height: 40px; background-color: #dedede;}
.footer .copy_txt{ font-size: 13px; color: #666; font-weight: 300; margin-left: 20px;}









/* -------------------------------------- main_GIS-------------------------------------------- */
.main_GIS{ position: relative; height: calc( 100% - 155px); padding: 0; }  /* header + top_menu_section + footer 높이 빼줌 */
.main_GIS .base_map_inner{ width:100%; height: 100%; }



/* ----- 좌측 레이어 목록 ------ */
.map_layer_zone{ display: none; z-index:100; position:absolute; top:7px; left:15px; height: calc( 100% - 15px ); width:280px; background:#fff; border-radius: 14px; padding: 7px; border: 3px solid #78829C; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25); overflow-y: auto;}
.map_layer_zone.on{ display: block;}

.map_layer_zone label { font-size: 14px; font-weight: 500;}
.map_layer_zone a{ margin: 0 1px;}
.map_layer_zone .ui-slider { margin: 10px 0 10px;}
.map_layer_zone .mainList{ padding: 5px 10px 10px 30px }
.map_layer_zone .mainList > li{ margin-bottom: 2px;}
.map_layer_zone .subList { padding: 5px 0px 5px 20px }
.map_layer_zone .subList > li{ margin-bottom: 2px;}

.map_layer_zone .categoryTitle{ padding: 5px 15px; background-color: #78829C; border-radius: 6px;}
.map_layer_zone .categoryTitle label{ color: #fff; font-size: 15px; font-weight: 500; }

.map_layer_zone .state{ display: inline-block; width: 16px; height: 16px; border: 1px solid #A8A8A8; vertical-align: middle; background-color: #fff; background-repeat: no-repeat; background-position: center center; background-image: url(../images/ico_layer_plus.png); }
.map_layer_zone .state.opened{ background-image: url(../images/ico_layer_minus.png); }
.map_layer_zone .state.closed{ background-image: url(../images/ico_layer_plus.png); }

.map_layer_zone .user_slider{ width: calc( 100% - 20px );}
.map_layer_zone .user_slider .ui-slider-handle{ text-align: center; font-size: 12px; padding:0 3px; top: -0.5em; width: 3em; height: 1.8em;}
.map_layer_zone .user_slider .ui-widget-header { background-color: #c6e3fa;}




/* ------- 우측 지도 타입 ---------------- */
.map_type_zone{ z-index: 50; position: absolute; top: 20px; right: 20px; }
.map_type_zone .mobile_toggle{ display: none;}
.map_type_zone ul{ display: flex;}
.map_type_zone ul li{ margin-left: 10px;}
.map_type_zone ul li:first-child{ margin: 0;}
.map_type_zone ul li > button{ position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 69px; height: 63px; background-color: #fff; border-radius: 6px; background-repeat: no-repeat; background-position: center top; overflow: hidden; transition: box-shadow 0.2s;}
.map_type_zone ul li > .bt1{ background-image: url(../images/map_type_1.png);}
.map_type_zone ul li > .bt2{ background-image: url(../images/map_type_2.png);}
.map_type_zone ul li > .bt3{ background-image: url(../images/map_type_3.png);}
.map_type_zone ul li > button .txt{ pointer-events: none; display: flex; justify-content: center; align-items: center; width: 100%; height: 23px; color: #777;}
/* hover */
.map_type_zone ul li > button:hover { box-shadow: inset 0px 0px 0px 2px #294eb7;}
/* on */
.map_type_zone ul li.on > button { box-shadow: inset 0px 0px 0px 2px #294eb7;}
.map_type_zone ul li.on > button:before{ content: ""; position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; background: url(../images/ico_type_check.png) no-repeat center center; }
.map_type_zone ul li.on > button .txt{ background-color: #294eb7; color: #fff;} 




/* ------ 지도컨트롤 그리기, 출력, 줌 버튼 목록 --------- */
.map_tools_zone{ z-index: 50; position: absolute; top: 100px; right: 20px; }

.t_group{ padding: 4px; border-radius: 7px; background-color: #EDEDED;}
.t_group + .t_group{ margin-top: 10px;}
.t_group .bt{ display: flex; justify-content: center; align-items: center; width: 34px; height: 34px; border-radius: 6px; background-color: #fff;}
.t_group .bt.on{ background-color: #337DEF;}
.t_group .bt.on:hover{ background-color: #337DEF;}
.t_group .bt + .bt{ margin-top: 4px;}
.t_group .bt::before{ content: ""; display: block;  width: 100%; height: 100%; background-size: auto; background-repeat: no-repeat; background-position: 0 0;}
.t_group .bt:hover{ /* box-shadow: inset 0px 0px 0px 2px #337DEF; */  background-color: #9499bc;}
.t_group .bt:hover::before{ background-position: 0 -54px;}
.t_group .bt .txt{ font-size: 0; width: 0; text-indent: -9999px; }

.t_group .bt.zoom_in::before{ background-image: url(../images/ico_tools_01.png);}

.t_group .bt.zoom_out::before{ background-image: url(../images/ico_tools_02.png);}

.t_group .bt.distance::before{ background-image: url(../images/ico_tools_03.png);}
.t_group .bt.distance.on::before{ background-position: 0 -54px;}


.t_group .bt.area::before{ background-image: url(../images/ico_tools_04.png);}
.t_group .bt.area.on::before{ background-position: 0 -54px;}

.t_group .bt.reload::before{ background-image: url(../images/ico_tools_05.png);}

.t_group .bt.save::before{ background-image: url(../images/ico_tools_06.png);}

.t_group .bt.analysis::before{ background-image: url(../images/ico_tools_08.png);}
.t_group .bt.analysis.on::before{ background-position: 0 -54px;}






/* ---------------------------- 팝업 패널 공통-------------------------------- */
.popup_panel{ display: none; z-index: 100;  position: absolute; width: 450px; top: 150px; right: 20px; background-color: #fff;  border-radius: 6px;  box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.5);}
.popup_panel.on{ display: block;}

.popup_panel .panel_head{ display: flex; justify-content: space-between; align-items: center; height: 45px; padding: 0 20px 0 30px; background-color: #333; border-top-left-radius: 6px; border-top-right-radius: 6px; cursor: move;}
.popup_panel .panel_head .ti{ font-size: 17px; font-weight: 500; color: #fff;  }
.popup_panel .panel_head .panel_close{ width: 26px; height: 26px; font-size: 0; text-indent: -9999px; background: url("../images/ico_modal_close.png") no-repeat center center;  }

.popup_panel .panel_body{ overflow-y: auto; padding: 20px 30px 30px 30px;}
.popup_panel .panel_body .para_box + .para_box{ margin-top: 25px;}






/* ---------------------------- 모달레이어 공통-------------------------------- */
/*jquery modal 캐스캐이딩*/
.blocker {
    /*position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;*/
    z-index: 300;
    /*padding: 20px;
    box-sizing: border-box;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.75);
    text-align: center;*/
}



body.modal-open { padding-right: 0 !important;}

.modal {   
    max-width: 450px;   
    width: 90%;
    background: #fff;
    padding: 0px;
    text-align: left;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.modal .modal-dialog {
    width: auto; 
    max-width: 100%; 
} 

/*modal-header 타입-기본*/
.modal .modal-header {
	display: block;    
	padding: 20px 30px;
	text-align: left;
	/* border-bottom: 1px solid #e2e2e2;    */ 
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: #3E63BE;
    color: #fff;
}
.modal .modal-header .modal_tit {
    font-weight: 500;
	font-size: 22px;
	line-height: 1em;
    color: #fff;	
}


/* modal-body */
.modal .modal-body {
    padding: 30px 50px 50px 50px;
	max-height: calc(100vh - 162px);
	overflow-y: scroll;
}

.modal .modal-body .form_table tr td textarea{
    padding: 5px 8px;
    line-height: 1.4;
}

.modal a.close-modal {
    position: absolute;
    top: 8px;
    right: 20px;
    display: block;
    width: 40px;
    height: 40px;
    text-indent: -9999px;
    
}
.modal a.close-modal{
    background-image: url(../images/ico_modal_close.png);
    background-size: auto;
    
}

/* 가로 줄임 막고 스크롤 되게 처리 */
.blocker {
    white-space: nowrap;
}
.modal {   
    max-width: none; 
    white-space:normal;
}
/* 모달 컨텐츠 제목 */
.modal .modal-body .para_title{
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 4px solid #78829C;
    font-size: 30px;
    font-weight: 500; 
    text-align: center;
    
}


/* 모달 컨텐츠 제목 */
.modal .modal-body .multi_cnt{ display: flex;  justify-content: space-between; gap: 20px}
.modal .modal-body .multi_cnt .cnt_box{ /* border: 1px solid #ddd; */}
.modal .modal-body .multi_cnt .cnt_box.cnt_left{ /* border: 1px solid #ddd; */}
.modal .modal-body .multi_cnt .cnt_box.cnt_right{ /* border: 1px solid #ddd; */}




/* -------------- 모달 개별 - #MODAL_info -----------------------*/
#MODAL_info .modal-body .multi_cnt .para_box{ border: 1px solid #ddd; padding: 10px 20px 20px 20px;}
#MODAL_info .modal-body .multi_cnt .para_box + .para_box{ margin-top: 20px;}
#MODAL_info .modal-body .multi_cnt .cnt_right .para_box{ height: 100%;}
#MODAL_info .modal-body .multi_cnt .normal_table{}
#MODAL_info .modal-body .multi_cnt .normal_table th,
#MODAL_info .modal-body .multi_cnt .normal_table td{ padding:5px 2px; height: auto; font-size: 13px; }


/* 모달속 - 우측 버튼 배치 */
.modal .para_box .right_btn_wrap{ /* display: flex; justify-content: space-between; */ }
.modal .para_box .right_btn_wrap:after{ content: ""; display: block; clear: both; }
.modal .para_box .right_btn_wrap .left_ele{ float: left;}
/* .modal .para_box .right_btn_wrap [class ^="headding"]{ float: left;} */
.modal .para_box .right_btn_wrap .right_ele{ float: right; text-align: right;}
.modal .para_box .right_btn_wrap .right_ele{ font-size: inherit;}


/* 모달속 - 상단 검색 */
.modal .header_search { display: flex;  background: #e8eaf1; border: 1px solid #ccc; padding: 30px; margin-bottom: 30px; } 
.modal .header_search dl {} 
.modal .header_search dl + dl { margin-left: 15px;} 
.modal .header_search dt {font-size: 14px; padding-bottom: 10px; font-weight: 600; color: #263066; } 
.modal .header_search dd select{ min-width: 160px;} 








/* --------------- tooltip_box 공통 ------------------ */
.tooltip_box{ 
    position: absolute; 
    z-index: 1000; 
    top: 0; 
    left: 0; 
    white-space: nowrap; 
    line-height: 1; 
    border-radius: 6px; 
    background-color: rgba(0, 0, 0, 0.5); 
    color: #cfcfcf; 
    font-size: 13px; 
    padding: 6px 8px 7px 8px; 
}




/* --------------- datepicker 데이터 피커 공통------------------ */
.ui-datepicker{ z-index:99999 !important; } /* 모달레이어 보다 상위에 있어야 하기에 zindex 높여줌 */