@charset "utf-8";
/* CSS Document */
/************************************************
 * Infomation : 수질오염총량관리지도 (2차)
 * FileName   : wqp_gis.css
 * Update     : 2026.06.17.
 * Size       : 1rem = 10px
************************************************/

:root {
	/* Layout */	
	--inner-width: 1540px;
	--sub-cont-width: 1300px;

	--white: #fff;
	--main-color: #256ef4;
	--sub-color: #002b50;
	--txt-color: #1e2124;
	--txt-sub-color: #555;	
	--ce-line-color: #dcdcdc;
	--bg-color: #fff;

	--ce-btn-main: #3456c5;
	--ce-btn-sub: #1f3a69;
	--ce-btn: #7b7b7f;
	--ce-btn-bBgE: #2a784d;

	--ce-input-line: #717171;
    --ce-input-hegith: 4rem;
    --ce-input-radius: .5rem;


    /* Color Set */
    --gq-color-prim: #256ef4;
    --gq-color-secd: #ecf2fe;
    --gq-color-third: #083891;
    
    --gq-bg-secd-color: #ecf2fe;
    --gq-btn-secd-bg: #eef2f7;
    
    --gq-text-prim: #0b50d0;
    --gq-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);;
    --gq-radius: .4rem;
    
    --gq-gis-prim: #0b50d0;

    /* Table */
    --ce-table-top-line: #0e2b5e;
    --ce-table-line: #d8d8d8;
    --ce-th-bg: #eef2f7;
}

html, body{}

.viewerLoading{ position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 999;}

/* 로딩 */
#loading{
    z-index: 1000;
    border: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgb(0, 0, 0); 
    opacity: 0.6;
    cursor: wait;
    position: fixed;
    text-align: center;
}

#loading .loadText {
    color: floralwhite;
    top: 48.5%;
    position: relative;
    font-size: 18px;
}

#loading .loader {
    z-index : 1001;
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    0% {
    transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
    transform: translate(-50%, -50%) rotate(360deg);
    }
}

#water_pollutant_gis{ position: relative; width: 100%; height: 100%;}
.wqp_gis_body{ overflow: hidden;}

/* Panel */
.wqp_panel_wrap{ position: fixed; left: 0; width: 41rem; background-color: #fff; z-index: 99;}

.wqp_panel_top{ height: 5rem; padding: 0 2rem; background-color: var(--gq-color-prim); display: flex; align-items: center; justify-content: space-between;}
.wqp_panel_tit{ color: #fff; font-weight: 400; font-size: 1.7rem;}

.btn_wqp_panel_toggle{ width: 3rem; height: 3rem; background-color: var(--gq-color-secd); border-radius: var(--gq-radius); display: inline-flex; align-items: center; justify-content: center;}
.btn_wqp_panel_toggle::before{
    content: "";
	display: inline-flex;
    width: 22px;
    height: 22px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");	
	background-color: var(--gq-color-prim);

    transition: all 0.3s ease-in;
}
.btn_wqp_panel_toggle.on::before{ transform: rotate(180deg);}

.wqp_panel_cont{ padding: 2rem; height: calc(100vh - 8.4rem);}

.panel_con_tit{ height: 4.4rem; color: var(--gq-text-prim); font-weight: 600; display: flex; align-items: center;}

.wqp_box{ background-color: var(--gq-color-secd); border-radius: 1rem; padding: 2rem;}

.wqp_panel_cont_wrap{ height: calc(100vh - 235px); overflow: auto;}

/* 주제도 Tree */
.wqp_tree{}
.wqp_tree > li{}
.wqp_tree_head{ border-bottom: 1px solid #ced4da; height: 3.8rem; display: flex; align-items: center; justify-content: space-between;}
.wqp_tree_head > .form_check > label{ font-weight: 600;}

.wqp_tree_dep{ margin-left: 3rem; display: none;}
.wqp_tree_dep ul{ margin: 1.5rem 0;}
.wqp_tree_dep ul li{ margin-top: 1rem;}
.wqp_tree_dep ul li:not(:first-child){}
.wqp_tree_dep ul li label img{ margin-right: .6rem;}

.btn_wqp_tree_toggle{ width: 2rem; height: 2rem; display: inline-flex;}
.btn_wqp_tree_toggle::before{
    content: "";
	display: inline-flex;
    width: 18px;
    height: 18px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");	
	background-color: #6c737f;

    transition: all 0.3s ease-in;
}
.btn_wqp_tree_toggle.on::before{ transform: rotate(180deg);}

/* Footer */
.wqp_map_foot{ width: 100%; height: 3.4rem; position: fixed; left: 0; bottom: 0; display: flex; z-index: 99;}

.foot_left{ width: 41rem; padding: 0 .4rem 0 2rem; background-color: rgba(11, 80, 208, 0.8); opacity: 1; display: flex; justify-content: space-between; align-items: center;}

.btn_wapmap_info{ width: 7.8rem; height: 2.8rem; border-radius: var(--gq-radius); color: #fff; font-size: 1.5rem; background-color: #0b3b8e; display: inline-flex; justify-content: center; align-items: center; gap: 2px;}
.btn_wapmap_info::before{
	content: "";
	display: inline-flex;
    width: 16px;
    height: 16px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_information.svg");
    mask-image: url("../images/icon/ico_information.svg");	
	background-color: #fff;
}

.foot_right{ flex: 1; background-color:rgba(255, 255, 255, 0.8); opacity:1; display: flex; justify-content: flex-end; align-items: center;}

/* Map 스케일 */
.map_scale{ color: #1e2124; font-size: 1.2rem; padding: 0 1.6rem; height: 3.4rem; display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem;}

.scale_bar{ height: .8rem; border: 2px solid #555758; border-top: none; display: inline-block; margin-right: .6rem;}


/* TAB */
.tab_s_top{ margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between;}

.tab_s{ display: flex; align-items: self-end; background-color: #e6e8ea; border-radius: 5px; width: 20.8rem;}
.tab_s li{ position: relative; flex: 1; border-radius: 5px;}
.tab_s li:not(:first-child)::after{ content: ""; position: absolute; left: -1px; top: 1.2rem; height: 1.6rem; width: 1px; background: #e5e5e5; z-index: -1;}
.tab_s li a,
.tab_s li button{ font-size: 1.5rem; color: #555; width: 100%; height: 4.4rem; display: flex; justify-content: center; align-items: center;}

.tab_s li.active{ border: 1px solid var(--gq-color-prim); background: #fff;}
.tab_s li.active a,
.tab_s li.active button{ color: var(--gq-text-prim); font-weight: 700; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
.tab_s_cont{ border-top: 1px solid var(--gq-color-prim)}

/* 버튼 : Button */
.btn_gp{ height: 4.4rem; border-radius: var(--ce-input-radius);font-weight: 500; padding: 0 2rem; display: inline-flex; align-items: center; justify-content: center; gap: .8rem;}

.btn_gp.prim{ background: var(--gq-color-prim); color: #fff;}
.btn_gp.secd{ background-color: var(--gq-color-secd); border: 1px solid var(--gq-color-prim); color: var(--gq-text-prim);}
.btn_gp.third{ background-color: #052b57; color: #bacbde;}

.btn_gp.gray{ background-color: #6d7882; color: #fff;}
.btn_gp.excel{ background: #339933; color: #fff;}

.btn_gp.sm{ height: 3.2rem; font-size: 1.5rem; font-weight: normal; padding: 0 1.2rem; border-radius: var(--gq-radius); gap: .6rem;}

@media (max-width: 766px) {
	.btn_gp.third{ font-size: 1.4rem; white-space: nowrap; padding: 0 1.4rem; gap: .4rem;}
}

[class^="ico_"]::after,
[class*="ico_"]::after{
	content: "";
	display: inline-flex;
    width: 18px;
    height: 18px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
	background-color: #fff;
}

.ico_down::after{	
    -webkit-mask-image: url("../images/icon/ico_download.svg");
    mask-image: url("../images/icon/ico_download.svg");
}
.ico_go::after{
    -webkit-mask-image: url("../images/icon/ico_go.svg");
    mask-image: url("../images/icon/ico_go.svg");
}
.ico_move::after{
    -webkit-mask-image: url("../images/icon/ico_move.svg");
    mask-image: url("../images/icon/ico_move.svg");
}

.ico_reset::after{
    -webkit-mask-image: url("../images/icon/ico_reset.svg");
    mask-image: url("../images/icon/ico_reset.svg");
}

.third.ico_go::after{ background-color: #bacbde;}
.secd.ico_reset::after{ background: var(--gq-color-prim);}

.btn_file_down{ background: url("../images/icon_file_down_wh.png") no-repeat right 1.5rem center #717171; padding: 0 3.6rem 0 1.5rem; color: #fff;}

/* Input */
.sel_m{ height: var(--ce-input-hegith); border-radius: 5px; border: 1px solid #717171; box-sizing: border-box; padding: 0 3.2rem 0 1rem; appearance: none; -webkit-appearance: none; background: url("../images/icon/ico_angle.svg") no-repeat right .8rem center #fff; background-size: 1.8rem;}

.inp_m{ height: var(--ce-input-hegith); border-radius: var(--ce-input-radius); border: 1px solid var(--ce-input-line);}

.inp_m.lg,
.sel_m.lg{ height: 36px; border-radius: 3px; font-size: 17px;}
.inp_m.sm,
.sel_m.sm{ height: 28px; font-size: 15px;}

/* 입력 : 달력 Input */
.inp_cal{ height: var(--ce-input-hegith); border-radius: var(--ce-input-radius); border: 1px solid var(--ce-input-line); box-sizing: border-box; color: var(--txt-color); width: 13rem; background: #fff; padding: 0 1rem 0 0; display: flex; align-items: center;}
.inp_cal.time{ width: 17.6rem;}
.inp_cal input{ border: none; margin: 0 0 0 1rem; height: 100%; width: 100%; flex: 1;}
.btn_inp_cal{ background: url("../images/icon/ico_calendar.svg") no-repeat center; width: 2rem; height: 2rem;}

/* 체크박스 */
.form_check input[type=checkbox] {
    position: fixed !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.form_check input[type=radio] ~ label { position: relative; display: inline-flex; min-height: 2rem; padding-left: calc(1.6rem + 0.4rem); font-size: 1.5rem; line-height: 1.6rem;}
.form_check input[type=checkbox] ~ label { position: relative; display: inline-flex; min-height: 2rem; padding-left: calc(1.8rem + 0.8rem); font-size: 1.5rem; line-height: 1.6rem; align-items: center;}

.form_check input[type=radio] ~ label:before,
.form_check input[type=radio] ~ label:after,
.form_check input[type=checkbox] ~ label:before,
.form_check input[type=checkbox] ~ label:after { display: block; content: ""; transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);}

.form_check input[type=radio] ~ label:before,
.form-check input[type=checkbox] ~ label:before { z-index: 3;}

.form_check input[type=radio] ~ label:after,
.form_check input[type=checkbox] ~ label:after { z-index: 4;}

.form_check input[type=radio] ~ label:before { position: absolute; top: 0; left: 0; width: 1.6rem; height: 1.6rem; background-color: #fff; border: 1px solid #717171; border-radius: 100%;}

.form_check input[type=radio] ~ label:after { position: absolute; top: calc((1.6rem - 0.8rem) / 2); left: calc((1.6rem - 0.8rem) / 2); width: 0.8rem; height: 0.8rem; background-color: #fff; border-radius: 100%;}

.form_check input[type=radio]:checked ~ label:before { border-color: var(--main-color);}
.form_check input[type=radio]:checked ~ label:after { background-color: var(--main-color);}

.form_check input[type=radio]:disabled ~ label:before { border-color: var(--gray-40); background-color: var(--gray-20);}

.form_check input[type=radio]:disabled + label,
.form_check input[type=checkbox]:disabled + label { color: var(--gray-50); cursor: default;}
.form_check input[type=radio]:checked:disabled ~ label:after { display: block; background-color: var(--gray-40);}
.form_check input[type=radio]:disabled ~ label:after { display: none; background-color: var(--gray-40);}

/* Check Box */
.form_check input[type=checkbox] ~ label:before { position: absolute; top: 0; left: 0; width: 2rem; height: 2rem; background-color: #fff; border: 1px solid #878787; border-radius: var(--gq-radius);
}
.form_check input[type=checkbox] ~ label:after {
    position: absolute; top: calc((2rem - 2rem) / 2); left: calc((2rem - 2rem) / 2); 
    width: 2rem; height: 2rem; background: url("../images/icon/ico_check_primary_checked.svg") no-repeat 0 0; background-size: contain; opacity: 0; border-radius: 3px;}

/* Black BG */
.form_check.bk input[type=checkbox] ~ label:after { background: url("../images/icon/ico_check_primary_checked.svg") no-repeat 0 0 #000}
.form_check.bk input[type=checkbox] ~ label:before { background-color: #000;}
.form_check.bk input[type=checkbox]:checked ~ label:before { background-color: #000; border-color: #000;}

/* blue BG */
.form_check.bu input[type=checkbox] ~ label:after { background: url("../images/icon/ico_check_primary_checked.svg") no-repeat 0 0 var(--gq-color-prim)}
.form_check.bu input[type=checkbox] ~ label:before { background-color: var(--gq-color-prim);}
.form_check.bu input[type=checkbox]:checked ~ label:before { background-color: var(--gq-color-prim); border-color: var(--gq-color-prim);}
.form_check.bu input[type=checkbox] ~ label:before { border-color: var(--gq-color-prim);}

.form_check input[type=checkbox]:checked ~ label:before { background-color: var(--gq-color-prim); border-color: var(--gq-color-prim);}
.form_check input[type=checkbox]:checked ~ label:after { opacity: 1; transition-delay: 0.2s;}

/* Check Box : disabled */
.form_check input[type=checkbox]:disabled ~ label:before { border-color: var(--gray-40); background-color: var(--gray-20);}
.form_check input[type=checkbox]:disabled ~ label:after { background-image: url("../images/icon/ico_check_primary_disabled.svg");}

.form_check input[type=radio]:focus ~ label,
.form_check input[type=checkbox]:focus ~ label,
.form_switch [type=checkbox]:focus ~ label { box-shadow: 0 0 0 3px rgba(0,123,255,.25); transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; z-index: 2;}

.form_group_set{ display: flex; gap: .8rem;}
.form_group{ flex: 1;}
.form_tit{ display: block; padding: 0 0 .4rem 0; font-weight: 600;}
.form_conts{}
.form_conts select,
.form_conts input{ width: 100%;}

.tbl { width: 100%; border-collapse: separate; border-top: 1px solid var(--ce-table-line);}
.tbl tr th,
.tbl tr td{ border-bottom: 1px solid var(--ce-table-line); line-height: 2.2rem; padding: .7rem 1rem; text-align: center;}
.tbl tr th:not(:last-child),
.tbl tr td:not(:last-child){ border-right: 1px solid var(--ce-table-line);}
.tbl tr th{ background-color: var(--ce-th-bg);}
.tbl tr td{ color: var(--txt-sub-color);}
.tbl tbody tr th{ background: #edf1f5;}

.tbl.tdCenter td{ text-align:center;}
.tbl.tdLeft td{ text-align: left;}
.tbl_hover tr:hover td{ background-color: #ecf2fe;}

/* 검색 */
.wqp_search_wrap{ display: flex; flex-direction: column; gap: 1rem;}
.wqp_search_btn_wrap{ margin-top: 2rem;}
.wqp_search_btn_wrap .btn_gp{ width: 100%;}

/* 레이어 팝업 : 정보 */
.wqp_layer_pop{ position: absolute; border-radius: .5rem; overflow: hidden; min-width: 40rem; background-color: #fff; border: 1px solid #0b50d0; box-shadow: var(--gq-box-shadow); display: none;}
.wqp_layerpop_top{ height: 4.8rem; padding: 0 1.6rem 0 2rem; background-color: #0b50d0; display: flex; align-items: center; justify-content: space-between;}
.wqp_layerpop_top strong{ color: #fff; font-weight: 400; font-size: 1.7rem;}
.wqp_layerpop_cont{ padding: 2rem;}

.btn_wqp_layer_pop_close{ width: 2rem; height: 2rem; display: inline-flex;}
.btn_wqp_layer_pop_close::after{
	content: "";
	display: inline-flex;
    width: 20px;
    height: 20px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_close.svg");
    mask-image: url("../images/icon/ico_close.svg");
	background-color: #fff;
}

.wqp_layer_pop.info_layer_pop{ width: 51rem; z-index: 100; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.text_desc_list.info{}
.text_desc_list.info li:not(:first-child){ margin-top: .4rem;}
.text_desc_list.info > li{ position: relative; padding-left: 1.6rem;}
.text_desc_list.info > li::before{ content: "※"; position: absolute; left: 0; top: 0;}
.text_desc_list .text_desc_list{ margin-left: 1.6rem; margin-top: .8rem;}
.text_desc_list.info .text_desc_list{ margin-left: 0rem;}

/* 레이어 팝업 : 지점정보 */
.wqp_poi_layer_pop{ width: 49rem; border: 1px solid #256ef4; overflow: hidden; background-color: #fff; border-radius: .5rem; position: absolute; box-shadow: var(--gq-box-shadow); z-index: 90; display: none;}

.wqp_poi_layerpop_top{ padding: 0 1rem; height: 2.6rem; background-color: #256ef4; display: flex; align-items: center; justify-content: flex-end;}
.wqp_poi_layerpop_cont{ padding: 1rem;}

.wqp_poi_tit{ margin-bottom: .6rem; display: block;}

.btn_wqp_poi_layerpop_close{ display: inline-flex;}
.btn_wqp_poi_layerpop_close::after{
	content: "";
	display: inline-flex;
    width: 14px;
    height: 14px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_close.svg");
    mask-image: url("../images/icon/ico_close.svg");
	background-color: #fff;
}

.poi_desc{ font-size: 1.3rem; color: #fff;}
.wqp_poi_layerpop_btn_wrap{ display: flex; align-items: center; justify-content: space-between;}
.wqp_poi_layerpop_btn_wrap a{ color: var(--gq-text-prim); text-decoration: underline;}

/* 지도 확대/축소 */
.toolbox{ background: #fff; border-radius: 5px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); overflow: hidden; position: fixed; right: 2rem; bottom: 5.2rem;}
.toolbox li{ position: relative;}
.toolbox li:not(:first-child){ border-top: 1px solid #ced4da;}
.toolbox li button{ width: 4.4rem; min-height: 4.4rem; background-repeat: no-repeat; display: inline-flex; justify-content: center; align-items: center;}
.toolbox li:first-child button,
.toolbox li:last-child button{ min-height: 4.4rem;}

.toolbox .zoom{ position: relative;}
.toolbox .zoom::before{ content: ""; width: 12px; height: 2px; background-color: #343a40;}
.toolbox .zoom.in::after{ content: ""; width: 2px; height: 12px; background-color: #343a40; position: absolute;}
.toolbox .zoom:hover{ background-color: var(--gq-color-secd);}