@charset "utf-8";
/* CSS Document */

/************************************************
 * Infomation : 국가 통합물관리정보플랫폼 : GIS
 * FileName   : gis.css 
 * Update     : 2025.06.10.
 * Size       : 1rem = 10px
************************************************/

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

	--white: #fff;
	--main-color: #003fce;
	--sub-color: #002b50;
	--txt-color: #1d1d1d  ;
	--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: #c6c6c6;

    /* Primary color */
    --ce-prim-color-5:  #eff5ef;
    --ce-prim-color-10: #d3e1fb;
    --ce-prim-color-20: #a7c4f7;
    --ce-prim-color-30: #7ca6f3;
    --ce-prim-color-40: #5089ef;
    --ce-prim-color-50: #246beb;
    --ce-prim-color-60: #1d56bc;
    --ce-prim-color-70: #16408d;
    --ce-prim-color-80: #0e2b5e;
    --ce-prim-color-90: #07152f;
    --ce-prim-color-100: #000000;
    
    /* Secondary color */

    /* Gray Color */
    --ce-gray-5:  #F8F8F8;
	--ce-gray-10: #F0F0F0;
	--ce-gray-20: #E4E4E4;
	--ce-gray-30: #D8D8D8;
	--ce-gray-40: #C6C6C6;
	--ce-gray-50: #8E8E8E;
	--ce-gray-60: #717171;
	--ce-gray-70: #555555;
    --ce-gray-75: #363636;
	--ce-gray-80: #2D2D2D;
	--ce-gray-90: #242424;

    /* Red Color */
    --ce-red-5:  #fef1f1;
    --ce-red-10: #fccccc;
    --ce-red-20: #f89999;
    --ce-red-30: #f56666;
    --ce-red-40: #f23b3b;
    --ce-red-50: #ee0000;
    --ce-red-60: #cd0404;
    --ce-red-70: #8f0000;
    --ce-red-80: #5f0000;
    --ce-red-90: #300000;

    /* Popup Font */
    --gq-color-prim: #246beb;
    --gq-color-secd: #d3e1fb;

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

html, body{}

.gis_body{ /* overflow: hidden; 250512_2 */ overflow-x: hidden;}


/*************************************************** 공통 ************************************************/
.m_ver{ display: none;}
.w_ver{ display: block;}

/* 입력 Form */
.inp_m{padding: 0 6px; height: 3rem; font-size: 1.4rem; border-radius: 3px; box-sizing: border-box; color: var(--txt-color); border: 1px solid var(--ce-input-line);} /* Input text, password*/
.sel_m{ padding: 0 10px 0 8px; height: 3.4rem; border-radius: 3px; box-sizing: border-box; color: var(--txt-color); 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: 3.4rem; font-size: 1.5rem; border-radius: 3px; box-sizing: border-box; color: var(--txt-color); width: 18rem; border: 1px solid var(--ce-input-line); background: #fff; padding: 0 1.5rem 0 0; display: flex; align-items: center;}
.inp_cal input{ border: none; padding: 0 0 0 1rem; height: 100%; width: 100%; flex: 1;}
.btn_inp_cal{ background: url("../images/icon_calendar.png") no-repeat right center; width: 2rem; height: 100%;}

/* 버튼 */
.btn_gp{ height: 3.4rem; border-radius: .3rem; font-weight: 500; display: inline-flex; align-items: center;}
.btn_gpSch{ background: #fff; color: var(--gq-color-prim); padding: 0 1.8rem;}
.btn_gpExc{ background: url("../images/icon_excel.png") no-repeat right 1.5rem center #339933; padding: 0 3.6rem 0 1.5rem; color: #fff;}
.btn_gpExc:hover,
.btn_gpExc:active{ background: url("../images/icon_excel.png") no-repeat right 1.5rem center #66b366;}
.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;}

.btn_long{ width: 100%; height: 3.4rem; font-size: 1.5rem; color: #246beb !important; border-radius: 5px; box-sizing: border-box; color: var(--txt-color); background: #fff; border: 1px solid #246beb; display: flex; align-items: center; justify-content: center; font-weight: 500;}
.btn_long:hover{ color: #fff !important; background: #246beb; border: 1px solid #246beb;}

.btn_long_reset{ width: 100%; height: 3.4rem; font-size: 1.5rem; color: #ec4651 !important; border-radius: 5px; box-sizing: border-box; color: var(--txt-color); background: #fff; background: url("../images/btn_reset_arr.svg") no-repeat right 14rem center; background-size: 1.4rem 1.4rem; border: 1px solid #ec4651; display: flex; align-items: center; justify-content: left; padding-left: 14rem; font-weight: 500;}
.btn_long_reset:hover{ color: #fff !important; background: #ec4651; background: url("../images/btn_reset_arr_on.svg") no-repeat right 14rem center #ec4651; background-size: 1.4rem 1.4rem; border: 1px solid #ec4651;}

/* ChackBox 체크박스 */
.chk_m input[type="checkbox"]{ display: none;}
.chk_m{ display: inline-flex; align-items: center; gap: 0.9rem}

/* 체크박스 디자인 */
.chk_m em{ display: inline-block; width: 1.7rem; height: 1.7rem;}
.chk_m em::before{ content: ""; display: inline-block; width: 1.7rem; height: 1.7rem; background-color: #246beb; box-sizing: border-box; position: relative; cursor: pointer; border-radius: 3px;}
/* checked */
.chk_m input:checked + em::before{ background: url("../images/chk_v.png") no-repeat center #246beb;}

/* 배경 black */
.chk_m.bk em::before{ background-color: #000;}
.chk_m.bk input:checked + em::before{ background: url("../images/chk_v.png") no-repeat center #000;}

/* 배경 white */
.chk_m.wh em{}
.chk_m.wh em::before{ background-color: #fff; border: 1px solid #d8d8d8;}
.chk_m.wh input:checked + em::before{ border: none;}

/* 체크박스 */
.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.6rem + 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: 1.8rem; height: 1.8rem; background-color: #fff; border: 1px solid #000; border-radius: 0.4rem;
}
.form_check input[type=checkbox] ~ label:after {
    position: absolute; top: calc((1.8rem - 1.8rem) / 2); left: calc((1.8rem - 1.8rem) / 2); 
    width: 1.8rem; height: 1.8rem; background: url("../images/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/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/ico_check_primary_checked.svg") no-repeat 0 0 #246beb}
.form_check.bu input[type=checkbox] ~ label:before { background-color: #246beb;}
.form_check.bu input[type=checkbox]:checked ~ label:before { background-color: #246beb; border-color: #246beb;}
.form_check.bu input[type=checkbox] ~ label:before { border-color: #246beb;}

.form_check input[type=checkbox]:checked ~ label:before { background-color: #246BEB; border-color: #246BEB;}
.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/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;}

/* 상세보기 */
.btn_d_view{ background: #717171; padding: 0 1.5rem; color: #fff;}

/* 테이블안 버튼 */
.btn_tbl_in{ background: #717171; padding: 0 1.5rem; color: #fff;}

.btn_month{ position: relative; padding: 0 20px; height: 2.8rem; color: #8e8e8e; border-radius: 2px; display:inline-flex; gap:4px; justify-content: center; align-items: center; border-radius: 4px; min-width: 84px; width: 100%;}
.btn_month.toggle{}
.btn_month.toggle.tg_on{ background-color: #0e2b5e; font-weight: 500; color: #fff;}

.month_sel_btn_wrap ul{ display: flex; align-items: center; height: 3rem; background: #fff; padding: 1px; border-radius: 3px;}
.month_sel_btn_wrap ul li{ position: relative;}
.month_sel_btn_wrap ul li:not(:first-child):before{ content: ""; position: absolute; width: 1px; height: 1.2rem; background: #e5e5e5; left: 0; top: .9rem;}

@media screen and (max-width: 768px) {
    .inp_cal{ width: 100% !important;}
    .month_sel_btn_wrap{ width: 100%;}
    .month_sel_btn_wrap ul li{ flex: 1;}
}

.gp_h4{ position: relative; font-size: 1.7rem; font-weight: 500; padding-left: 1.1rem; margin-bottom: 1.6rem;}
.gp_h4::before{ content: ""; position: absolute; left: 0; top: 4px; background: #246beb; width: .5rem; height: 1.5rem;}

/* 기본 테이블 */
.scroll .dataView td{ white-space: nowrap;}

.tbl_top_wrap{ display: flex; justify-content: space-between; align-items: center; margin: 2rem 0 1rem 0;}
.tbl_top_wrap .gp_h4{ margin-bottom: 0;}
.tbl_top_wrap .unitSet{ display: flex; gap: 1.6rem; align-items: center;}
.tbl_top_wrap .sch_cout{ position: relative; font-size: 1.5rem; padding-left: .7rem;}
.tbl_top_wrap .sch_cout::before{ content: ""; position: absolute; left: 0; top: .9rem; border-radius: 3px; width: .3rem; height: .3rem; background: #1d1d1d;}
.tbl_top_wrap .formUnit{ display: flex; gap: .8rem; align-items: center;}
.tbl_top_wrap.jcEnd{ justify-content: flex-end;}

.formTit{}

.tbl_wrap{}

.gp_graph_list + .tbl_wrap{ margin-top: 2rem;}

.gp_gage_wrap + .gp_graph_list{ margin-top: 2rem;}


.tbl { width: 100%; border-collapse: separate; border-top: 2px solid var(--ce-table-top-line);}
.tbl tr th,
.tbl tr td{ border-bottom: 1px solid var(--ce-table-line); line-height: 2.2rem; padding: .7rem 1rem;}
.tbl tr th:not(:last-child),
.tbl tr td:not(:last-child){ border-right: 1px solid var(--ce-table-line);}
.tbl tr th{ text-align: center; background-color: var(--ce-th-bg); font-weight: 500;}
.tbl tr td{ text-align: left; color: var(--txt-sub-color);}
.tbl tbody tr th{ background: #edf1f5;}
.tbl tbody tr td select,
.tbl tbody tr td input[type=text],
.tbl tbody tr td input[type=select]{ width:96%;}
.tbl tbody tr td textarea{ width:96%;}
.tbl.tdCenter td{ text-align:center;}

/* 가로 데이터 테이블*/
.tbl.dataView tr td{ text-align:center;}
.tbl.dataView{ white-space:nowrap}
.tbl.dataFix tr td{ text-align:center;}
.tbl.dataFix.tdLeft tr td{ text-align:left;}

.thFix .tbl{ position: relative; top: 0; border-top: none;}
.thFix .tbl th{ position: sticky; top: 0; border-top: 2px solid var(--ce-table-top-line);}

.tbl_row{ width: 100%; border-collapse: separate; border-top: 2px solid var(--ce-table-top-line);}
.tbl_row tr th,
.tbl_row tr td{ border-bottom: 1px solid var(--ce-table-line); line-height: 2.2rem; padding: .7rem 1rem;}
.tbl_row tr th:not(:last-child),
.tbl_row tr td:not(:last-child){ border-right: 1px solid var(--ce-table-line);}
.tbl_row tr th{ text-align: center; background-color:var(--ce-th-bg); font-weight: 500;}
.tbl_row tr td{ text-align: left; color: var(--txt-sub-color);}
.tbl_row tbody tr td select,
.tbl_row tbody tr td input[type=text],
.tbl_row tbody tr td input[type=select]{ width:96%;}
.tbl_row tbody tr td textarea{ width: 96%; border: 1px solid var(--ce-input-color);}

.tbl_decs{ font-size: 1.5rem; color: var(--txt-sub-color);}
.tbl_wrap + .tbl_decs{ margin-top: 1rem;}

/* pagination */
.pagination{ display: flex; align-items: center; justify-content: center; flex-direction: row; width: 100%; margin-top: 1rem; gap: 1rem}
.pagination .page-navi{ display: inline-flex; align-items: center; justify-content: center; flex-direction: row; min-width: 3rem; height: 3rem;}
.pagination .page-navi:hover{ border-radius: 0.6rem; background-color: #eff5ff; transition: 0.4s ease-in-out;}
.pagination .page-navi:active{ background-color: #eff5ff; transition: 0.4s ease-in-out;}
.pagination .page-navi.prev{ order: 1;}
.pagination .page-navi.prev::before{ content: ""; display: inline-flex; align-items: center; justify-content: center; flex-direction: row;  width: 2rem; height: 2rem;
    background-image: url("../images/ico_page_arr_left.svg"); background-repeat: no-repeat;}
.pagination .page-navi.next{ order: 3;}
.pagination .page-navi.next::after{ content: ""; display: inline-flex; align-items: center; justify-content: center; flex-direction: row; width: 2rem; height: 2rem; background-image: url("../images/ico_page_arr_right.svg"); background-repeat: no-repeat;}
.pagination .page-links{ display: flex; align-items: center; justify-content: center; flex-direction: row; order: 2; gap: .8rem;}
.pagination .page-links .page-link{ display: flex; align-items: center; justify-content: center; flex-direction: row; min-width: 4rem; height: 4rem;}
.pagination .page-links .page-link:hover{ border-radius: 0.6rem; background-color: #eff5ff;}

.pagination .page-links .page-link.active{ font-weight: 700; color: #fff; border-radius: 6px; background-color: #2768ff;}

@media (max-width: 766px) {
	.pagination{ position: relative; margin-top: 12rem;}
	.pagination .page-navi.prev{ position: absolute; left: calc(50% - 4.2rem); transform: translateX(-50%); top: -6rem;}
	.pagination .page-navi.next{ position: absolute; left: calc(50% + 4.2rem); transform: translateX(-50%); top: -6rem;}
}

/* TAB Menu */
.tab_m_container{ display: flex; align-items: center; width: 100%; overflow: hidden; position: relative;}

.tab_m_wrap{ overflow: hidden; flex: 1;}
.tab_m_list{ display: flex; align-items: self-end; margin-bottom: 2.5rem;}
.tab_m_list li{ position: relative; flex: 1; border-bottom: 1px solid #0e2b5e; border-radius: 5px 5px 0 0;}
.tab_m_list li:not(:first-child)::after{ content: ""; position: absolute; left: -1px; top: 1.2rem; height: 1.6rem; width: 1px; background: #e5e5e5; z-index: -1;}
.tab_m_list li a,
.tab_m_list li button{ font-size: 1.7rem; color: #555; width: 100%; height: 4rem; display: flex; justify-content: center; align-items: center; white-space: nowrap; padding: 0 1rem;}

.tab_m_list li.active{ border-top: 3px solid #0e2b5e; border-left: 1px solid #0e2b5e; border-right: 1px solid #0e2b5e; border-bottom: 1px solid #fff !important;}
.tab_m_list li.active a,
.tab_m_list li.active button{ color: #0e2b5e; font-weight: 700;}

.tab_m_item.active a,
.tab_m_item.active button{ font-size: 1.7rem; color: #555; width: 100%; height: 4rem; display: flex; justify-content: center; align-items: center;}

/* 기본 상태에서 탭 이동 버튼 숨김 */
.tab_m_nav{ display: none;}

/* 콘텐츠 기본 숨김 */
.tab_m_cont{ display: none;}

/* 활성화된 콘텐츠 표시 */
.tab_m_cont.active{ display: block;}

/* 모바일에서만 좌우 버튼 활성화 */
@media (max-width: 768px) {
    .tab_m_list{ overflow: auto;}
    .tab_m_nav{ display: block !important;}
}

.tab_s{ display: flex; align-items: self-end; margin-bottom: 2.5rem;}
.tab_s li{ position: relative; flex: 1; border-bottom: 1px solid #e5e5e5; background: #f8f8f8; border-radius: 5px 5px 0 0;}
.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.7rem; color: #555; width: 100%; height: 4rem; display: flex; justify-content: center; align-items: center;}

.tab_s li.active{ border: 1px solid #246beb; border-bottom: 3px solid #246beb !important; background: #fff;}
.tab_s li.active a,
.tab_s li.active button{ color: #0e2b5e; font-weight: 700;}


/************************************************ GIS *************************************************/


#water_total_gis_wrap{ position: relative;}

/********** GIS TOP **********/
.wt_gis_header{ position: absolute; width: 100%; top: 0; left: 0; height: 6rem; background-color: rgba(14, 43, 94, .75); opacity: 1; display: flex; justify-content: space-between; align-items: center; padding: 0 2rem; transition: all 0.3s ease-in; z-index: 999999;}
.wt_gis_header:hover{ background-color: rgba(14, 43, 94, 1);}

.map_h1_wrap{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

@media screen and (max-width: 768px) {
    .wt_gis_header{ background-color: rgba(14, 43, 94, 1);}
    .map_h1_wrap{ position: relative; top: auto; left: auto; transform: none;}
}

.wt_gis_header .left{ display: flex; align-items: center; gap: 1.6rem;}
.wt_gis_header .right{ display: flex; align-items: center; gap: 1.6rem;}

.wt_gis_tit{ font-family: "Gmarket Sans"; font-weight: 500; color: #fff; padding-top: .4rem; width: 100%;}

.wt_gis_menu_tab{ z-index: 999999;}
.wt_gis_menu_tab ul{ display: flex; align-items: center;}
.wt_gis_menu_tab li{}
.wt_gis_menu_tab li button{ font-size: 1.7rem; color: #bcccf7; display: flex; gap: .5rem; padding: 2rem 1.5rem;}
.wt_gis_menu_tab li.on button{ color: #fff;}

.wt_gis_menu_tab li button .num_badge{ color: #bcccf7; background: #246beb; font-size: 1.3rem; width: 2.2rem; height: 2.2rem; border-radius: 100%; display: flex; justify-content: center; align-items: center;}
.wt_gis_menu_tab li.on button .num_badge{ color: #fff; font-weight: 500;}

.btn_menu_mobile{ position: absolute; right: 0; height: 6rem; width: 6rem; display: none; background: url("../images/menu_ham.svg") no-repeat center; background-size: 2.3rem 1.7rem;}

.mBurger{ display: none; position: absolute; font-size: 0; width: 6rem; height: 6rem; right: 0; top: 0; z-index: 10;}
.mBurger span{ width: 18px; height: 2px; background: #fff; top: 30px; left: 22px; font-size: 0; display: block; position: absolute; -webkit-transition: 0.3s; transition: 0.3s;}
.mBurger span::after,
.mBurger span::before{left: 0; -webkit-transition: 0.3s; transition: 0.3s; content: ""; width: 23px; height: 2px; background: #fff; position: absolute; transform: rotate(0deg); -webkit-transform-origin: center; transform-origin: center;}
.mBurger span::before{content: ""; background: #fff; top: -8px;}
.mBurger span::after{content: ""; background: #fff; bottom: -8px;}
.mBurger.close span{width: 0;}
.mBurger.close span::before{ transform: rotate(225deg); top:0; width: 30px; left:-4px;}
.mBurger.close span::after{ transform: rotate(-225deg); bottom:0;width: 30px; left:-4px;}

@media screen and (max-width: 1223px) {
    .wt_gis_header{ justify-content: flex-start;}
    .wt_gis_header .left{ gap: .6rem;}
    .wt_gis_header .right{ margin-left: auto;}
    .search_box{ display: none;}
    .wt_gis_tit{ position: relative; text-align: left; height: 6rem; display: flex; align-items: center;}
}

@media screen and (max-width: 768px) {
    .mBurger{ display: block;}

    .wt_gis_header{ align-items: center; height: auto;}
    .lgo_gov{ width: 2.7rem; height: 2.7rem;}
    .wt_gis_tit{ font-size: 1.9rem;}

    .wt_gis_header .right{}
    .wt_gis_menu_tab{ display: none; width: 100%; position: absolute; left: 0; top: 6rem; background: #0e2b5e; border-radius: 0 0 1rem 1rem; padding: 0 1rem; border-bottom: 1px solid #246beb;}
    
    .wt_gis_menu_tab ul{ flex-direction: column; align-items: flex-start; padding-bottom: 1.4rem;}
    .wt_gis_menu_tab ul li{ width: 100%;}
    .wt_gis_menu_tab ul li button{ width: 100%; text-align: left; padding: 1rem;}

    .btn_menu_mobile{ display: block;}
    .m_ver{ display: block;}
    .w_ver{ display: none;}
}

/* Mobile Search */
.btn_m_search{ position: absolute; width: 3.2rem; height: 3.2rem; background-color: #16408d; border-radius: 1rem; justify-content: center; align-items: center; right: 5rem; top: 50%; transform: translateY(-50%); display: none;}
.btn_m_search::before{ content: ""; width: 1.8rem; height: 1.8rem; background: url("../images/icon_m_search.svg") no-repeat; background-size: 1.8rem; display: inline-flex;}

.mo_sech_wrap{ position: fixed; left:-100%; width: 100%; height: 100%; background-color: #fff; top: 0; z-index: 999999; display: none;}

.mo_sech_top{ height: 6rem; border-bottom: 1px solid #d8d8d8; display: flex; align-items: center;}

.mo_sech_inp{ flex: 1; background-color: #f0f0f0; height: 4rem; border-radius: 4rem; padding-right: 1rem; display: flex; align-items: center;}
.mo_sech_inp input{ border: none; background: none; width: 100%; height: 100%; font-size: 1.7rem; font-weight: 700; padding: 0 0 0 1.6rem;}
.mo_sech_inp input::placeholder{ font-size: 1.9rem; color: #8e8e8e; font-weight: 400;}

.btn_sech_reset{ width: 2.2rem; height: 2.2rem; border-radius: 2rem;
    background: url("../images/btn_mo_sech_reset.svg") no-repeat center #c6c6c6; background-size: .8rem;
}

.btn_mosech_back{ width: 5rem; padding-left: 2rem; display: inline-flex; align-items: center;}
.btn_mosech_back::before{ content: ""; width: 1.8rem; height: 1.8rem; background: url("../images/arr_back.svg") no-repeat; background-size: 1.8rem; display: inline-flex;}
.btn_mo_sech{ width: 5rem; padding-right: 2rem;  display: inline-flex; align-items: center; justify-content: flex-end;}
.btn_mo_sech::before{ content: ""; width: 2rem; height: 2rem; background: url("../images/icon_m_search.svg") no-repeat; background-size: 2rem; filter: invert(45%) sepia(80%) saturate(5116%) hue-rotate(210deg) brightness(94%) contrast(96%); display: inline-flex;}


.mo_sech_retxt{ background-color: #16408d; font-size: 1.5rem; color: #fff; height: 4.8rem; padding-left: 2rem; border-bottom: 1px solid #fff; display: flex; align-items: center;}
.mo_sech_retxt em{ font-weight: 500; color: #6df2f2; margin-left: .6rem;}

.mo_sech_wrap .scroll{ height: calc(100vh - 10rem);}
.mo_sech_wrap .sch_res_lsit{ max-height: none;}
.mosech_nodata{ color: #8e8e8e; height: calc(100vh - 6rem); display: flex; justify-content: center; align-items: center;}

.mo_sech_wrap.off { animation: allmenu_off cubic-bezier(.5,.81,.61,.94) 0.5s 0.1s; animation-fill-mode:both;}
.mo_sech_wrap.on { right:0; animation: allmenu_on cubic-bezier(.5,.81,.61,.94) 0.5s 0.1s; animation-fill-mode:both;}

@keyframes allmenu_off {
	0%{ left:0;}
	100%{ left: -100%;}
}
@keyframes allmenu_on {
	0%{ left: -100%;}
	100%{ left:0;}
}

@media screen and (max-width: 768px) {
    .mo_sech_wrap{ display: block;}
    .btn_m_search{ display: inline-flex;}
}

/* GIS TOP : 검색 */
.map_search_wrap{ position: relative;}
.map_search_wrap .search_box{}

.search_box{ position: relative; width: 28rem; height: 3.4rem; border-radius: 0.4rem; overflow: hidden;}
.search_box input{ background: #fff; width: 100%; height: 100%; padding:0 0 0 1.6rem; border: none; font-weight: 700;}
.search_box input::placeholder{ font-size: 1.5rem; color: #8e8e8e; font-weight: 400;}
.search_box button{ position: absolute; top: 50%; transform: translateY(-50%); right: .8rem; height: 100%; width: 3.2rem; background: url("../images/icon_search.png") no-repeat left 0.9rem center;}

/* 레이어 팝업 */
body.no-scroll{ overflow: hidden;}
.wt_layer_pop{ position: absolute; left: 0; top: 5.7rem; width: 100%; border-radius: .5rem; overflow: hidden; background: #fff; z-index: 110;}

.wt_layerpop_top{ background: #16408d; padding-left: 1.8rem; height: 4rem; display: flex; justify-content: space-between; align-items: center;}
.wt_layerpop_top .tit{ color: #fff; font-size: 1.7rem; height: 100%; display: flex; align-items: center;}
.btn_search_res_close{ background: url("../images/btn_close_wh.svg") no-repeat center; width: 4rem; height: 100%;}

.btn_layerpop_close{ background: url("../images/btn_close_wh.svg") no-repeat center; width: 4rem; height: 100%;}

.wt_layerpop_cont{ padding: 1.5rem;}
.wt_layerpop_footer{ margin-top: .6rem; display: flex; justify-content: space-between; align-items: center;}
.btn_layerpop_close2{ border: 1px solid #717171; border-radius: .5rem; background-color: #fff; width: 7rem; height: 3rem; display: flex; justify-content: center; align-items: center;}

.today_close_wrap{ display: flex;}

/* 레이어팝업 : 영역 선택 */
.layer_pop_areasel{ position: fixed; width: 37rem; top: 16.6rem; left: 7.5rem}
.layer_pop_areasel .wt_layerpop_top .tit{ padding-left: 2.4rem; background: url("../images/icon_toolbox_areasel_wh.svg") no-repeat left center;}

/* 레이어팝업 : 하천 선택 */
.layer_pop_riversel{ width: 34.4rem; top: 15.8rem; left: 7.5rem; display: none;}
.tab_riversel{ display: flex;}
.tab_riversel li{ flex: 1; border-left: 1px solid #ced4da; border-top: 1px solid #ced4da; border-bottom: 1px solid #ced4da;}
.tab_riversel li:nth-child(n+2){ border-right: 1px solid #ced4da;}
.tab_riversel li button{ width: 100%; height: 3.2rem; display: flex; justify-content: center; align-items: center; font-size: 1.4rem;}
.tab_riversel li.on{ border-top: 2px solid #2768ff;}
.tab_riversel li.on button{ color: #2768ff; font-weight: 500;}

.riversel_inpset{ margin-top: 1rem; margin-bottom: 1rem;}
.riversel_inpset ul{}
.riversel_inpset ul li{ display: flex; align-items: center;}
.riversel_inpset ul li:not(:first-child){ margin-top: .5rem;}
.riversel_inpset ul li label{ width: 8rem;}
.riversel_inpset ul li select,
.riversel_inpset ul li input{ flex: 1;}

.riversel_inpset .river_search_box{ flex: 1;}

.river_search_box{ position: relative; width: 100%; height: 3rem; border-radius: 0.4rem; overflow: hidden; border: 1px solid var(--ce-input-line);}
.river_search_box input{ background: #fff; width: 100%; height: 100%; padding:0 0 0 1.6rem; border: none;}
.river_search_box input::placeholder{ font-size: 1.5rem; color: #aaa;}
.river_search_box button{ position: absolute; top: 50%; transform: translateY(-50%); right: .8rem; height: 100%; width: 3rem; background: url("../images/icon_search.png") no-repeat left 0.9rem center;}

.river_s_name{ font-size: 12px;}

.riversel_tbl_wrap th,
.riversel_tbl_wrap td{ font-size: 1.3rem;}
.riversel_tbl_wrap tbody tr:hover,
.riversel_tbl_wrap tbody tr:focus{  cursor: pointer; text-decoration: underline;}
.riversel_tbl_wrap .ch_on td { background: #e9eff8;}

/* 범례 : 상세보기 레이어 팝업 */
.wt_layer_pop.legend_pop{ width: 83rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none;}


@media screen and (max-width: 768px) {
    .wt_layer_pop.legend_pop{  width: calc(100% - 2rem);}
}

/* 수질측정망(호소) 생활환경기준 : 레이어 팝업 */


@media screen and (max-width: 768px) {
    .wt_layer_pop{ width: calc(100% - 2rem); z-index: 999999; top: 50%; left: 50%; transform: translate(-50%, -50% );}
    .dim_bg{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(85, 85, 85, 0.5); backdrop-filter: blur(2px); display: none; z-index: 9999;}
    
    .riversel_tbl{ }
}

/* 동영상 매뉴얼 */
.btn_gis_video_view{ position: relative; background-color: #0e2b5e; border-radius: 1rem; height: 4rem; color: #fff; font-size: 1.5rem; padding: 0 1.6rem ; display: flex; align-items: center; gap: 1rem;}
.btn_gis_video_view::before{ content: ""; width: 2.3rem; height: 2.3rem; background: url("../images/blit_gp_tit_video.png") no-repeat center 0; display: inline-block;}

.wt_layer_pop.menu_video_view_pop{ left: 50%; top: 50%; transform: translate(-50%, -50%); width: 75.4rem; height: 60.5rem; z-index: 99999; display: none;}

.uvideo_wrap{}
.uvideo_tit{ font-size: 1.9rem; color: #fff; text-align: center; margin-top: 1rem; letter-spacing: -.6px}
.uvideo_cont{ border-radius: 1.8rem; overflow: hidden; border: 1px solid #888b8f; padding: 1rem 1rem 0.2rem 1rem; background-color: #000;}
.uvideo_cont video{ width:100%; height:100%; border-radius: .8rem; border: 1px solid #2b2b2b;}

/* 동영상 팝업 가이드 */
.gis_video_guide{ padding: 4rem; position: absolute; background-color: #4d5055; width: 100%; height: 100%; z-index: 3;}

.btn_1day_close{ position: absolute; left: 0; top: 1.6rem; color: #fff; font-size: 1.9rem; padding-left: 3.2rem;}

.btn_1day_close::before{ content: ""; position: absolute; width: 2.7rem; height: 2.4rem; background: url("../images/guide/day7_chech.png") no-repeat left 0 top 0; left: 0;}
.btn_1day_close.on::before{ background: url("../images/guide/day7_chech_on.png") no-repeat left 0 top 0;}
.btn_1day_info_close{ position: absolute; right: 0; top: 1rem; font-size: 1.7rem; font-weight: 700; color: #fff; height: 3.6rem; padding: 0 1.8rem; border-radius: 3.6rem; border: 1px solid #888b8f; display: flex; justify-content: center; align-items: center; gap: 1.2rem;}
.btn_1day_info_close::after{ content: ""; width: 1.4rem; height: 1.4rem; background: url("../images/guide/icon_info_close.png") no-repeat;}

.gis_video_guide_top{ position: relative; margin-bottom: 3.1rem; text-align: center;}

.gis_video_guide_tit{ position: relative; font-family: "Gmarket Sans"; font-weight: 500; color: #fff; font-size: 4rem; margin: 0 auto; display: inline-block;}
.gis_video_guide_tit::after{ content: ""; position: absolute; width: 2.3rem; height: 3rem; background: url("../images/guide/icon_cursor.png") no-repeat left 0 top 0; right: -3.1rem; bottom: 1.4rem;}
.gis_video_guide_tit strong{ font-weight: 700; color: #ffdd33;}

.tab_m_container{ display: flex; align-items: center; width: 100%; overflow: hidden; position: relative;}

.tab_m_wrap{ overflow: hidden; flex: 1;}
.tab_vg_list{ margin-bottom: 1rem; display: flex; align-items: self-end; gap: 1rem;}
.tab_vg_list li{ position: relative; flex: 1;}

.tab_vg_list li a,
.tab_vg_list li button{ font-size: 1.7rem; color: #e4e4e4; width: 100%; height: 4rem; display: flex; justify-content: center; align-items: center; white-space: nowrap; padding: 0 1rem; background-color: #2e3134; border-radius: 1rem;}

.tab_vg_list li.active a,
.tab_vg_list li.active button{ color: #fff; font-weight: 700; background-color: #246beb;}

@media (max-width: 768px) {
    .btn_gis_video_view{ display: none;}
    .gis_video_guide{ padding: 0 1rem 1rem 1rem;}
    .gis_video_guide_top{ margin-top: 14vh;  display: flex; flex-wrap: wrap; justify-content: space-between;}
    .gis_video_guide_tit{ text-align: center; font-size: 3.4rem; margin-left: 0; margin-top: 5.4rem; width: 100%; order: 3;}
    .gis_video_guide_tit::after{ display: none;}
    .btn_1day_info_close{ position: absolute; left: auto; right: 0; top: 0; order: 2;}
    .btn_1day_close{ position: absolute; left: 0; top: .8rem; order: 1;}
    .uvideo_tit{ font-size: 1.4rem;}

    .tab_vg_list{ flex-wrap: wrap;}
    .tab_vg_list li{ flex: auto; width: 40%;}
}

/* GIS Panel */
.twg_panel_wrap{}

.gis_panel{ position: fixed; right:0; top: 6.2rem; color: #fff; background-color: rgba(14, 43, 94, 1); opacity: .75; transition:all 0.3s ease-in; border-radius: 0 0 1rem 1rem; overflow: hidden; z-index: 99999;} /* RGB opacity 0.75 */
.gis_panel:hover{ opacity: 1;}
.gis_panel.on{ background-color: rgba(52, 56, 62, 0.75); opacity:1;}

.gis_panel.guide{ width: 36rem; padding: 0 0 1rem 0; display: none;} /* panel01 - 사용설명 */
.gis_panel.layers{ width: 33rem; padding: 0 0 1.5rem 0;} /* panel02 - 레이어 */
.gis_panel.legend{ width: 36rem; padding: 0 0 1rem 0; display: none;} /* panel03 - 범례 */
.gis_panel.tools{ width: 32rem; padding: 0 0 1.5rem 0; display: none;} /* panel04 - 설정 */

.panel_tit{ font-size: 2rem; font-weight: 500; color: #fff;}
.gis_panel.guide .panel_tit{ padding-left: 4rem; background: url("../images/tit_panel_guide.png") no-repeat left center;} /* 사용설명 */
.gis_panel.layers .panel_tit{ padding-left: 4.2rem; background: url("../images/tit_panel_laysers.png") no-repeat left center;} /* 레이어 */
.gis_panel.legend .panel_tit{ padding-left: 4.2rem; background: url("../images/tit_panel_legend.png") no-repeat left center;} /* 범례 */
.gis_panel.tools .panel_tit{ padding-left: 4.2rem; background: url("../images/tit_panel_tools.png") no-repeat left center;} /* 설정 */

@media screen and (max-width: 768px) {
    .gis_panel{ width: 100% !important; opacity: 1;}
    .gis_panel.layers{ display: none;}
}

.panel_top{ height: 6rem; display: flex; justify-content: space-between; align-items: center; padding: 0 2rem;}
.panel_tit{}

.gis_panel.tools .panel_top{ border-bottom: 1px solid #16408d;}

.panel_cont_wrap{ overflow: auto; max-height: calc(100vh - 22.2rem);}

/* 레이어 : 스크롤바 설정*/
.panel_cont_wrap::-webkit-scrollbar{
    background-color:transparent;
    width:6px;
}
/* 스크롤바 막대 설정*/
.panel_cont_wrap::-webkit-scrollbar-thumb{
    background-color:#d9d9d9;
    border-radius:16px;
}
.panel_cont_wrap::-webkit-scrollbar-thumb:hover{
    background-color:#d9d9d9;
}
/* 스크롤바 뒷 배경 설정*/
.panel_cont_wrap::-webkit-scrollbar-track{
    border-radius: 10px;
    background-color:#f3f3f3;
}
.panel_cont_wrap::-webkit-scrollbar-track:hover{
    background-color:transparent;
}
.panel_cont_wrap::-webkit-scrollbar-button{display:none;}

@media screen and (max-width: 768px) {
    .panel_cont_wrap{ max-height: calc(100vh - 17.6rem);}
}

.layer_type_btn{ display: flex; align-items: center; gap: .8rem;}
.layer_type_btn .btn_text{ color: #D3E1FB; font-size: 1.3rem;}
.layer_type_btn .btn_text.on{ color: #fff; font-weight: bold;}
.layer_type_btn .btn_type_toggle{ position: relative; display: flex; width: 2.5rem; height: 1.4rem; border-radius: 1.4rem; background: #7ca6f3;}
.layer_type_btn .btn_type_toggle::after{ content: ""; position: absolute; left: auto; right: 2px; top: 2px; width: 1rem; height: 1rem; border-radius: 1rem; background: #246beb;}

.layer_type_btn .btn_type_toggle.on::after{ left: 2px; right: auto;}

/*
.layer_type_btn .btn_text.on + .type_toggle::after{ left: 2px; right: auto;}
*/

.btn_panel_close{ display: inline-block; width: 3rem; height: 3rem; border-radius: .5rem; background: url("../images/btn_close_wh.svg") no-repeat center #16408d;}


.reset_btn_warp{ padding: 0 2rem; margin-top: 1rem;}
.btn_panel_reset{ width: 9rem; height: 3rem; border-radius: .5rem; border: 1px solid #ec4651; color: #ec4651; background: url("../images/btn_reset_arr.svg") no-repeat right 1.4rem center; background-size: 1.4rem 1.4rem; padding-left: 1.4rem; font-size: 1.5rem; font-weight: bold; margin-left: auto; display: flex; align-items: center;}
.btn_panel_reset:hover,
.btn_panel_reset:focus{ color: #fff; background: url("../images/btn_reset_arr_on.svg") no-repeat right 1.4rem center #ec4651; background-size: 1.4rem 1.4rem; font-weight: 500;}

/* Layer Depth 1 */
.layer_dep1_menu{ border-top: 1px solid #16408d;}

.btn_layer_dep1{ font-size: 1.7rem; color: #fff; width: 100%; height: 5.5rem; text-align: left; padding: 0 1.8rem 0 5.5rem; background-position: left 2rem center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: space-between;}
.btn_layer_dep1.data{ background-image: url("../images/layers_icon_data.svg"); background-size: 1.8rem 2.3rem;} /* 데이터 선택*/
.btn_layer_dep1.subject{ background-image: url("../images/layers_icon_subject.svg"); background-size: 2.1rem 2.3rem;} /* 주제도 선택*/
.btn_layer_dep1.basic{ background-image: url("../images/layers_icon_basic.svg"); background-size: 1.8rem 2.3rem;} /* 기본도 선택*/
.btn_layer_dep1.bgmap{ background-image: url("../images/layers_icon_bgmap.svg"); background-size: 2rem 2rem;} /* bgmap 선택*/

/* Panel : Laysers : Menu : hover */
.btn_layer_dep1:hover,
.btn_layer_dep1.on,
.btn_layer_dep2:hover,
.btn_layer_dep2.on{ background-color: #16408d;}
.btn_layer_dep3:hover,
.btn_layer_dep3.on{ background: #3b7be2;}

/* Layer Depth 2 */
.layer_dep2_menu li{ position: relative;}
.btn_layer_dep2{ position: relative; width: 100%; height: 4.5rem; padding-left: 5rem; color: #fff;}
.btn_layer_dep2::before{ content: ""; position: absolute; width: .6rem; height: .8rem; background: url("../images/layer_dep2_tit.svg") no-repeat; left: 3rem; top: 50%; transform: translateY(-50%);}
.btn_layer_dep2:hover::before{ background: url("../images/layer_dep2_tit_on.svg") no-repeat;}
.btn_layer_dep2.on::before{ transform: translateY(-50%) rotate(90deg); background: url("../images/layer_dep2_tit_on.svg") no-repeat;}

/* Layer Depth 3 */
.layer_dep3_menu{ padding: 0 1rem;}
.layer_dep3_menu li{ position: relative;}

.btn_layer_dep3{ position: relative; width: 100%; height: 4rem; color: #fff; padding-left: 5.5rem; display: flex; align-items: center;}
.btn_layer_dep3::before{ content: ""; position: absolute; width: .4rem; height: .4rem; background: #376cbf; border-radius: 2px; left: 4.1rem; top: 50%; transform: translateY(-50%);}

.layer_dep3_menu li:hover .btn_layer_dep3,
.btn_layer_dep3:focus{ background: #3b7be2;}

.num_badge{ position: relative; font-weight: 500; display: inline-flex; justify-content: center; align-items: center;}
.btn_layer_dep1 .num_badge{ font-size: 1.3rem; color: #fff; width: 2.4rem; height: 2.4rem; z-index: 2;}
.btn_layer_dep1 .num_badge::before{ content: ""; position: absolute; width: 2.4rem; height: 2.1rem; background: url("../images/tit_panel_laysers.png") no-repeat; background-size: 2.4rem 2.1rem; left: -1.6rem; z-index: -1;}
.btn_layer_dep1 .num_badge::after{ content: ""; position: absolute; width: 100%; height: 100%; border-radius: 2.4rem; background: #3474de; z-index: -1;}

.btn_layer_dep2 .num_badge{ background: #3474de; font-size: 1.3rem; color: #fff; min-width: 2.4rem; height: 2.4rem; border-radius: 2.4rem; padding: 0 1rem; margin-left: 3rem; z-index: 2;}
.btn_layer_dep2 .num_badge::before{ content: ""; position: absolute; width: 2.4rem; height: 2.1rem; background: url("../images/tit_panel_laysers.png") no-repeat; background-size: 2.4rem 2.1rem; left: -1.6rem; z-index: -1;}
.btn_layer_dep2 .num_badge::after{ content: ""; position: absolute; width: 100%; height: 100%; border-radius: 2.4rem; background: #3474de; z-index: -1;}
.btn_layer_dep2 .num_badge.iNo{ margin-left: 1rem;}
.btn_layer_dep2 .num_badge.iNo::before{ display: none;}

.btn_layer_dep3 .num_badge{ background: #fff; font-size: 1.2rem; color: #246beb; padding: 0 .6rem; min-width: 2rem; height: 2rem; border-radius: 5px; margin-left: 1rem;}

/* Layers Depth Menu Close */
.btn_layer_dep_del{ position: absolute; top: 50%; transform: translateY(-50%);}
.layer_dep2_menu > li > .btn_layer_dep_del{ display: inline-block; width: 1.3rem; height: 1.3rem; background: url("../images/layer_menu_close.svg") no-repeat; background-size: 1.3rem 1.3rem; right: 2.6rem; top: 2.2rem;}
.layer_dep3_menu .btn_layer_dep_del{ width: 1.8rem; height: 1.8rem; background: url("../images/layer_menu_close.svg") no-repeat center #ec4651; background-size: .8rem .9rem; top: 2rem; right: 1.4rem; border-radius: 100%;}
.layer_dep3_menu li .btn_layer_dep_del:hover{ background: url("../images/layer_menu_close_on.svg") no-repeat center #fff; background-size: .8rem .9rem;}

.btn_layer_dep2.on + .btn_layer_dep_del,
.btn_layer_dep3.on + .btn_layer_dep_del{ display: none;}

.ld_box{ background: #07152f; padding: 2.5rem 0;}

.ld_sel_box{ margin-top: 1.5rem; padding: 0 2.8rem;}
.ld_sel_box select{ width: 100%;}

.arrow_move_wrap{ margin-bottom: 1.5rem; display: flex; justify-content: center; align-items: center; gap: .5rem; padding: 0 2.8rem;}
.arrow_move_wrap .sel_m{ flex: 1;}
.btn_arrow3{ position: relative; display:inline-block; width: 3.4rem; height: 3.4rem; background-color: #246beb; background-repeat:no-repeat; background-position:center; border-radius:3px; vertical-align:middle;}

.btn_arrow3:hover,
.btn_arrow3:focus{ background-color: #16408d;}

.btn_arrow3::before{ content: ""; position: absolute; width: .7rem; height: 1.2rem; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url("../images/arr03.png") no-repeat;}
.btn_arrow3.right{ transform: rotate(180deg);}

/* 체크 박스 */
.ch_onff{ display: inline-flex;}
.ch_onff input[type="checkbox"]{ display:none;}
.ch_onff input[type="checkbox"] + label{ display: inline-flex;}
.ch_onff input[type="checkbox"] + label span{ position: relative; color: #fff; cursor:pointer; background: #6c737f; display:inline-block; width: 6.2rem; height: 2.4rem; border-radius: 2.4rem; transition: all 0.3s ease-in;}
.ch_onff input[type="checkbox"] + label span::before{ content: ""; position: absolute; width: 2rem; height: 2rem; left: 2px; right: auto; top: 2px; border-radius: 100%; background: #fff;}
.ch_onff input[type="checkbox"] + label span::after{ content: "OFF"; position: absolute; font-size: 1.3rem; left: auto; right: 1rem; top: 2px; z-index: 2;}

.ch_onff input[type="checkbox"]:checked + label span{ background: #246beb; transition: all 0.3s ease-in;}
.ch_onff input[type="checkbox"]:checked + label span::before{ width: 2rem; left: auto; right: 2px;}
.ch_onff input[type="checkbox"]:checked + label span::after{ content: "ON"; font-size: 1.3rem; left: 1.2rem; right: auto; top: 2px;}

.map_point_opacity_range{ padding: 0 2.8rem; display: flex; align-items: center; gap: 1.6rem;}
.map_point_opacity_range .range_wrap{ flex: 1;}
.map_point_opacity_range .range_wrap input[type="range"]{ width: 100%;}
.map_point_opacity_range .range_wrap input[type="range"]:disabled{}

.map_point_opacity_range{}

/* 슬라이더 핸들(클릭해서 드래그하는 부분) 커스텀 
(Chrome, Opera, Safari, Edge 브라우저를 위해서는 -webkit-을,
Firefox 브라우저를 위해서는 -moz- 를 사용하세요 */

.slider::-moz-range-thumb{
    width: 18px; /* 슬라이더 핸들 길이 */
    height: 18px; /* 슬라이더 핸들 높이 */
    border-radius: 50%; /* 핸들 모양을 원모양으로 만들기 위함 */
    background: #00f; /* 슬라이더 핸들 색상 */
    cursor: pointer; /* 슬라이더 핸들에 마우스를 갖다대면 포인터로 변경 */
}
.slider.green::-webkit-slider-thumb{ background:#36bb76}
.slider.green::-moz-range-thumb{ background:#36bb76}

.slider.blue::-webkit-slider-thumb{ background:#1080ff}
.slider.blue::-moz-range-thumb{ background:#1080ff}

.slider.skyblue::-webkit-slider-thumb{ background:#18d4f5}
.slider.skyblue::-moz-range-thumb{ background:#18d4f5}

.dep_sel_set{ padding: 0 2rem; display: flex; justify-content: center; align-items: center; gap: .5rem}
.dep_sel_set select{ flex: 1 1 auto;}

.map_point_opacity_range + .dep_sel_set{ margin-top: 1.5rem;}

.btn_dep_filedown{ position: relative; display: inline-flex; width: 3.4rem; height: 3.4rem; background: #339933; border-radius: 3px;}
.btn_dep_filedown::after{ content: ""; position: absolute; width: 1.4rem; height: 1.4rem; background: url("../images/icon_file_down_wh.png") no-repeat center; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.layer_dep_cont{ display: none;}
.layer_dep_cont .inp_cal{ width: 13rem;}

.btn_open_win{ margin: 0 auto; position: relative; color: var(--ce-prim-color-20); font-size: 1.5rem; font-weight: 500; border: 1px solid var(--ce-prim-color-20); height: 3rem; border-radius: .5rem; background: url("../images/icon_new_win.png") no-repeat right 2.5rem center; padding: 0 3.6rem 0 1.6rem; display: flex; justify-content: center; align-items: center; width: 18rem;}
.btn_open_win:hover,
.btn_open_win:active{ border: 1px solid var(--gq-color-prim); color: #fff; background: url("../images/icon_new_win_wh.png") no-repeat right 2.5rem center var(--gq-color-prim);}

.map_point_opacity_range + .btn_open_win{ margin-top: 1rem;}

.btn_total_chart{ margin: 1rem auto 0 auto; position: relative; color: var(--ce-prim-color-20); font-size: 1.5rem; font-weight: 500; border: 1px solid var(--ce-prim-color-20); height: 3rem; border-radius: .5rem; display: flex; justify-content: center; align-items: center; width: 18rem;}
.btn_total_chart:hover,
.btn_total_chart:active{ border: 1px solid var(--gq-color-prim); color: #fff; background: var(--gq-color-prim);}

/* Panel Contans */
.panel_cont_wrap{}
.p_item_warp{}
.p_c_tit{ min-height: 5rem; padding: 0 2.6rem 0 2rem; border-top: 1px solid #16408d; display: flex; justify-content: space-between; align-items: center;}
.p_c_tit span{ font-size: 1.7rem;}
.p_c_tit span b{ font-weight: 400; color: #a7c4f7; margin-right: .6rem;}
.p_c_tit.long{ line-height: 1; padding: .6rem 2.6rem .6rem 2rem;}
.p_c_tit.long span b{ display: block;}

.panel_cont_wrap .p_item_warp:not(:first-child) .p_c_tit{ margin-top: 1rem;}

.btn_p_item_del{ display: inline-block; width: 1.3rem; height: 1.3rem; background: url(../images/layer_menu_close_on.svg) no-repeat center}

/* 사용설명 : 번튼 추가 */
.p_add_btn_wrap{ padding: 0 2.6rem 0 2rem; border-top: 1px solid #16408d;}

.p_add_btn_wrap + .p_c_tit { border-top: none;}

.btn_use_mel{ position: relative; border: 1px solid #a7c4f7; border-radius: .5rem; height: 4rem; background-color: #07152f; color: #a7c4f7; display: flex; justify-content: center; align-items: center; gap: .8rem;}
.btn_use_mel:hover,
.btn_use_mel:active{ border: 1px solid var(--gq-color-prim); color: #fff; background-color: var(--gq-color-prim);}
.btn_use_mel + .btn_use_mel{ margin-top: 1rem;}

.btn_use_mvideo{ display: none;}
/*
.btn_use_mvideo::after{ content: ""; width: 2.3rem; height: 2.3rem; background: url(../images/icon_video_view.png) no-repeat center 0; margin-right: 1rem; display: inline-block;}
*/

.btn_use_datalist{ padding-left: .3rem; gap: .6rem;}
.btn_use_datalist::after{ content: ""; width: 2rem; height: 2rem; background: url(../images/icon_new_win.png) no-repeat center; display: inline-block;}

.btn_gis_useinfo{}

@media screen and (max-width: 768px) {
    .p_add_btn_wrap{ padding: 1.3rem 2.6rem .5rem 2rem;}
    .btn_use_mvideo{ display: flex;}
}

/* 배경맵 선택 */
.map_bg_select_wrap{ background: #07152f; padding: 2rem 0;}
.map_bg_sel{ display: flex; margin: 0 2rem; gap: 1rem;}
.map_bg_sel li{ flex: 1;}
.map_bg_sel li label{}
.map_bg_sel li label span{}
.map_bg_sel li img{ border: 1px solid #246beb; width: 100%; height: auto;}
.map_bg_sel li label div{ margin-top: 1rem;}
.map_bg_sel li label div em{ margin-left: .6rem;}
.map_bg_select_wrap .map_point_opacity_range{ margin-top: 2rem;}

.time_ctrlset_wrap{ padding: 0 2rem; display: flex; align-items: center; gap: 1rem;}
.inp_sty{ font-size: 1.5rem; padding: 0 8px; height: 3.4rem; border-radius: 3px; box-sizing: border-box; color: var(--txt-color); border: 1px solid var(--ce-input-line); background-color: #fff; display: flex; gap: .6rem; align-items: center;}

.time_ctrlset_wrap .inp_sty{ flex: 1;}

.map_point_opacity_range + .time_ctrlset_wrap{ margin-top: 1rem;}

.time_ctrlset{ display: flex;}
.btn_time_ctrl{ height: 3.4rem; background-color: #0e2b5e; background-position: center; background-repeat: no-repeat;}
.btn_time_ctrl:active{ opacity: .8;}
.btn_time_ctrl.prev{ width: 4.2rem;  border-radius: .3rem 0 0 .3rem; background-image: url("../images/icon_ti_prev.png");}
.btn_time_ctrl.next{ width: 4.2rem; border-radius: 0 .3rem .3rem 0; background-image: url("../images/icon_ti_next.png");}
.btn_time_ctrl.play{ width: 4rem; border-radius: .3rem; background-color: #246beb; background-image: url("../images/icon_ti_play.png");}
.btn_time_ctrl.stop{ width: 4rem; border-radius: .3rem; background-color: #246beb; background-image: url("../images/icon_ti_stop.png");}


/* Panel : guide 사용설명 */
.panel_cont_wrap.guide_cont{}
.p_g_cont{ background: #16408d; padding: 1.5rem 1rem; margin: 0 1rem;}

.ud_set_list{}
.ud_set_list > li{ position: relative; padding: 1rem 0;}
.ud_set_list > li:not(:last-child)::before,
.ud_set_list > li:not(:last-child)::after{ content: ""; position: absolute; width: 100%; height: 1px; left: 0;}
.ud_set_list > li:not(:last-child)::before{ bottom: 0; background: #0e2b5e;}
.ud_set_list > li:not(:last-child)::after{ bottom: -1px; background: #2e58a5;}

.ud_set_list > li:first-child{ padding: 0 0 1rem 0;}
.ud_set_list > li:last-child{ padding: 1rem 0 0 0;}

.ud_cont_wrap{ background: url("../images/desc/ud_dot_line.png") repeat-x left 0 top 0; margin-top: 1rem; padding: 1rem 1rem 0 1rem;}

.ud_cont_wrap .ud_cont + .ud_cont{ margin-top: 2.8rem;}

.ud_tit{ display: flex; align-items: center;}
.ud_tit img{ margin-right: 1.2rem;}
.ud_img_tit{ text-align: center; margin-bottom: 1rem;}
.ud_cont{ }

.ud_p_01{ position: relative; font-size: 1.3rem; line-height: 1.9rem; padding-left: 1.7rem;}
.ud_p_01::before{ content: "▲"; position: absolute; left: 3px; top: 2px; font-size: 8px;}

.ud_txt_list{ margin-top: 1rem;}
.ud_txt_list > li{ font-size: 1.3rem; line-height: 1.95rem; display: flex; align-items: center; gap: 1rem;}
.ud_txt_list > li img{ width: fit-content; height: fit-content;}
.ud_txt_list > li:not(:first-child){ margin-top: 1.2rem;}

.ud_sub_cont{ }
.ud_sub_cont dd{ margin-top: .6rem; padding-left: 2rem; font-size: 1.3rem;}

.ud_sub_cont  + .ud_sub_cont{ margin-top: .7rem;}

.ud_desc_p{}

.map_search_unit_list{ margin-left: .5rem;}
.map_search_unit_list ul{}
.map_search_unit_list ul li{}
.map_search_unit_list ul li img{ margin-right: 1rem;}
.map_search_unit_list ul li:not(:last-child){ margin-bottom: 1rem;}

.info_function_wrap{}
.info_function_wrap li{}
.info_function_wrap li div{}
.info_function_wrap li div img{}
.info_function_wrap li p{}
.info_function_wrap li:not(:last-child){ margin-bottom: 1.2rem;}

.info_fn_desc{ position: relative; padding-left: 1.6rem; font-size: 1.3rem; margin-top: .8rem;}
.info_fn_desc::before{ content: ""; position: absolute; width: .7rem; height: .8rem; background: url("../images/desc/info_cn_desc.png") no-repeat; left: .4rem; top: .2rem;}

@media screen and (max-width: 768px) {
    .info_function_wrap li div img{ width: 100%;}
}

/* Panel : legend 범례 */
.panel_cont_wrap.legend_cont{}
.p_leg_cont{ background: #16408d; padding: 1.5rem 0; margin: 0 1rem; background-color: rgba(22, 64, 141, 1); opacity: 1; transition: all 0.3s ease-in;}
.p_leg_cont + .p_leg_cont{ margin-top: 1px;}
.p_leg_allchk{}

.pleg_list_wrap{ display: flex;}
.p_leg_list{ font-size: 1.5rem;}
.p_leg_list li{ position: relative; line-height: 1.6; padding: .2rem 1rem;}
.p_leg_list img{ margin-right: .8rem; width: 1.4rem;}

.p_leg_list.hover{ width: 100%;}
.p_leg_list.hover li{ cursor: pointer;}
/*
.p_leg_list.hover li:hover{ border:1px solid #d0d1d5; margin:-1px;}
.po_hover{ border:1px solid #d0d1d5; margin: -1px;}
*/

.po_hover::after{ content: ""; position: absolute; width: 100%; height: 100%; border:1px solid #d0d1d5; left: 0; top: 0;}

.p_leg_sub_tit{ position: relative; font-size: 1.4rem; color: #a7c4f7; font-weight: 500; margin: .8rem 0 .4rem 1rem; padding-left: 1rem;}
.p_leg_sub_tit::before{ content: ""; position: absolute; width: .4rem; height: .4rem; border-radius: .4rem; background: #a7c4f7; left: 0; top: .8rem;}

/************************************************ 범례 *************************************************/

/* 범례설명글 추가 케이스 */
.pleg_list_wrap.addInfoText .p_leg_list{ width: 13.4rem;}

.pleg_list_wrap .text{ font-size: 1.3rem; line-height: 1.5; flex: 1; margin-top: 3px; margin-right: 3px;}
.pleg_list_wrap .text b{ display: block; margin-top: .6rem;}

.fdColm{ flex-direction: column;}

/* 범례 수자원-기상,상수원보호구역(기본도) */

/* 범례 : 데이터 : 수질 : 수질측정망 */
.wqc_desc{ margin-top: 1.8rem;}

/* 범례 : 데이터 : 하천 */
.map_point_opacity_range + .p_leg_cont{ margin-top: 1rem;}

.river_list_wrap{ padding: 0 1rem;}
.river_list_wrap input[type=checkbox]{}

.river_chk_tit{ margin-bottom: 1rem; display: flex; gap: 1rem;}
.river_chk_tit label{ font-size: 1.4rem; font-weight: 500;}

.river_list_wrap{}
.river_list_wrap ul{ display: inline-flex; flex-wrap: wrap; gap: .5rem;}
.river_list_wrap ul li{ width: calc(50% - .3rem); display: flex; gap: 1.3rem;}
.river_list_wrap ul li span{ display: flex; align-items: center;}
.river_list_wrap ul li label{ font-size: 1.3rem;}
.river_list_wrap ul li label img{ margin-left: .4rem; margin-right: .6rem; vertical-align: middle; width: 1.3rem;}

/* 범례 : 주제도 : 오염원 */
.po_bar{ border: 1px solid #0a0a0a; display: inline-block; width: 4.2rem; height: 1rem; margin-right: 1rem;}
.po_bar.po01{ background: #fe0000;}
.po_bar.po02{ background: #ff3200;}
.po_bar.po03{ background: #ff4800;}
.po_bar.po04{ background: #ff5b00;}
.po_bar.po05{ background: #ff6d00;}
.po_bar.po06{ background: #ff7f00;}
.po_bar.po07{ background: #ff9001;}
.po_bar.po08{ background: #ffa101;}
.po_bar.po09{ background: #ffb201;}
.po_bar.po10{ background: #ffc201;}
.po_bar.po11{ background: #ffd001;}
.po_bar.po12{ background: #ffde01;}
.po_bar.po13{ background: #ffe901;}
.po_bar.po14{ background: #fff401;}
.po_bar.po15{ background: #ffff01;}

/* 범례 : 주제도 : 상수도 */
.po_bar.ws01{ background: #bb00cc;}
.po_bar.ws02{ background: #c73dd5;}
.po_bar.ws03{ background: #d25bdd;}
.po_bar.ws04{ background: #df79e6;}
.po_bar.ws05{ background: #ea92ee;}
.po_bar.ws06{ background: #f4aaf5;}
.po_bar.ws07{ background: #ffc3fd;}

/* 범례 : 주제도 : 하수도 */
.po_bar.se01{ background: #0046a4;}
.po_bar.se02{ background: #2961b2;}
.po_bar.se03{ background: #4c7dc1;}
.po_bar.se04{ background: #729cd0;}
.po_bar.se05{ background: #97b9df;}
.po_bar.se06{ background: #b9d5eb;}
.po_bar.se07{ background: #d4eaf4;}

/* 범례 : 주제도 : 가뭄 : 가뭄예·경보 / 가뭄현황 및 전망 */
.po_bar.drs01{ background: #30a923;}
.po_bar.drs02{ background: #1542df;}
.po_bar.drs03{ background: #dfe016;}
.po_bar.drs04{ background: #f09a0d;}
.po_bar.drs05{ background: #e12229;}

/* 범례 : 주제도 : 가뭄 : 가뭄예·경보 / 가뭄피해현황(건수) */
.po_bar.drd01{ background: #5b3f19;}
.po_bar.drd02{ background: #715635;}
.po_bar.drd03{ background: #8b7254;}
.po_bar.drd04{ background: #a58f74;}
.po_bar.drd05{ background: #bca890;}
.po_bar.drd06{ background: #d7c7b2;}
.po_bar.drd07{ background: #f3e6d5;}

/* 범례 : 주제도 : 가뭄 : 가뭄현황 및 전망 */
.po_bar.drj01{ background: #fd7419;}
.po_bar.drj02{ background: url("../images/pleg/drj_02.png") no-repeat;}
.po_bar.drj03{ background: url("../images/pleg/drj_03.png") no-repeat;}

/* 범례 : 주제도 : 기상 : 강우레이더 */
.pleg_list_wrap.dd_b{}

.rfrlist{display: inline-flex; flex-wrap: wrap; justify-content: space-between;}
.rfrlist li{ width: calc(48% - .2rem);}

.rfrlist li:nth-child(1){ order: 24;}
.rfrlist li:nth-child(2){ order: 22;}
.rfrlist li:nth-child(3){ order: 20;}
.rfrlist li:nth-child(4){ order: 18;}
.rfrlist li:nth-child(5){ order: 16;}
.rfrlist li:nth-child(6){ order: 14;}
.rfrlist li:nth-child(7){ order: 12;}
.rfrlist li:nth-child(8){ order: 10;}
.rfrlist li:nth-child(9){ order: 8;}
.rfrlist li:nth-child(10){ order: 6;}
.rfrlist li:nth-child(11){ order: 4;}
.rfrlist li:nth-child(12){ order: 2;}

.rfrlist li:nth-child(13){ order: 23;}
.rfrlist li:nth-child(14){ order: 21;}
.rfrlist li:nth-child(15){ order: 19;}
.rfrlist li:nth-child(16){ order: 17;}
.rfrlist li:nth-child(17){ order: 15;}
.rfrlist li:nth-child(18){ order: 13;}
.rfrlist li:nth-child(19){ order: 11;}
.rfrlist li:nth-child(20){ order: 9;}
.rfrlist li:nth-child(21){ order: 7;}
.rfrlist li:nth-child(22){ order: 5;}
.rfrlist li:nth-child(23){ order: 3;}
.rfrlist li:nth-child(24){ order: 1;}

.po_bar.rfr01{ background: #00c8ff;}
.po_bar.rfr02{ background: #009bf5;}
.po_bar.rfr03{ background: #0033f5;}
.po_bar.rfr04{ background: #00ff00;}
.po_bar.rfr05{ background: #00be00;}
.po_bar.rfr06{ background: #008c00;}
.po_bar.rfr07{ background: #005a00;}
.po_bar.rfr08{ background: #ffe100;}
.po_bar.rfr09{ background: #ffe100;}
.po_bar.rfr10{ background: #f9cd00;}
.po_bar.rfr11{ background: #e0b900;}
.po_bar.rfr12{ background: #ccaa00;}

.po_bar.rfr13{ background: #ff6600;}
.po_bar.rfr14{ background: #ff3200;}
.po_bar.rfr15{ background: #d20000;}
.po_bar.rfr16{ background: #b40000;}
.po_bar.rfr17{ background: #e0a9ff;}
.po_bar.rfr18{ background: #c969ff;}
.po_bar.rfr19{ background: #b329ff;}
.po_bar.rfr20{ background: #9300e4;}
.po_bar.rfr21{ background: #b3b4de;}
.po_bar.rfr22{ background: #4c4eb1;}
.po_bar.rfr23{ background: #000390;}
.po_bar.rfr24{ background: #333333;}



/* 범례 : 기본도 : KRF */
.rich_desc{margin-top: 2.6rem;}

@media screen and (max-width: 768px) {
    .rich_desc{margin-top: 2.6rem;}
}

/* Panel : tools 설정 */
.panel_cont_wrap.tools_cont{ padding: 1.5rem;}
.btn_area_change{ width: 100%; height: 5rem; font-size: 1.6rem; color: #fff; background: #16408d; border: 1px solid #246beb; display: flex; justify-content: center; align-items: center; gap: 1rem;}
.btn_area_change::before{ content: ""; width: 1.9rem; height: 1.9rem; background: url("../images/icon_toolbox_areasel_wh.svg") no-repeat; background-size: 1.9rem 1.9rem;}
.btn_area_change:hover,
.btn_area_change:focus{ background: #246beb;}

.panel_set_option{ padding: 0 1rem; display: flex; align-items: center; gap: 1.5rem;}
.panel_set_option .text{ color: #fff; font-size: 1.5rem;}

.btn_area_change + .panel_set_option{ margin-top: 2rem;}
.panel_set_option + .panel_set_option{ margin-top: 1.5rem;}


/*********************************** MAP ***********************************/
.gis_map_viewer{ position: relative; width: 100%; height: 100vh; overflow: hidden;}

/* Map 컨트롤 */
.map_control_wrap{ position: absolute; top: 7.8rem; left: 1.6rem; z-index: 9999;}

.toolbox{ background: #fff; border-radius: 5px; padding: 2px 0; box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);}
.toolbox li{ position: relative;}
.toolbox li:not(:first-child){ border-top: 1px solid #ced4da;}
.toolbox button{ display: inline-flex; width: 4.5rem; height: 4.2rem;}
.toolbox.map_loc button{ justify-content: center;}
.toolbox.map_loc button span{ font-size: 1.15rem; text-align: center; padding-top: 2.3rem; letter-spacing: -1px;}
.toolbox.map_zoom button span{ position: absolute !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;}

.toolbox .home{ background: url("../images/icon_toolbox_home.svg") no-repeat top .5rem center;} /* 초기화면 */
.toolbox .my{ background: url("../images/icon_toolbox_my.svg") no-repeat top .5rem center; background-size: 1.8rem 1.5rem;} /* 내 위치 */
.toolbox .areasel{ background: url("../images/icon_toolbox_areasel.svg") no-repeat top .6rem center; background-size: 1.8rem;} /* 영역선택 */
.toolbox .areasel.on{}

.toolbox .toolbox_tip{ position: absolute; background: #555; font-size: 1.5rem; color: #fff; min-width: 7rem; width: max-content; height: 2.8rem; display: inline-block; border-radius: .4rem; left: 5rem; top: .4rem; padding: .4rem .6rem; text-align: center; display: none;}
.toolbox_tip:after{content: ""; position: absolute; display: inline-block; top: 50%; transform: translateY(-50%); left: -6px; width: 0; height: 0; border-right: 6px solid #555; border-bottom: 5px solid transparent; border-top: 5px solid transparent;}

.toolbox li button:hover + .toolbox_tip{ display: none;}

.toolbox.map_util{ margin-top: 1rem;}
.toolbox.map_util button{ justify-content: center;}
.toolbox.map_util button span{ font-size: 1.2rem; text-align: center; padding-top: 2.2rem; letter-spacing: -1px;}
.toolbox .area{ background: url("../images/icon_toolbox_area.svg") no-repeat center top .8rem;} /* 면적측정 */
.toolbox .dist{ background: url("../images/icon_toolbox_dist.svg") no-repeat center top .9rem; background-size: 1.6rem .9rem;} /* 거리재기 */
.toolbox .down{ background: url("../images/icon_toolbox_down.svg") no-repeat center top .6rem; background-size: 1.6rem 1.4rem;} /* 다운로드 */

.toolbox.map_zoom{ margin-top: 1rem;}
.toolbox .zoom.in{ background: url("../images/icon_toolbox_plus.svg") no-repeat center;} /* 확대 */
.toolbox .zoom.out{ background: url("../images/icon_toolbox_minus.svg") no-repeat center;} /* 축소 */

@media screen and (max-width: 768px) {
    .toolbox.map_util{ display: none;}
}

/* Map 컨트롤 : 범례 보기 */
.btn_legend_view{ position: fixed; font-size: 1.5rem; font-weight: 400; left: 1.7rem; bottom: 1.7rem; width: 9rem; height: 3.4rem; border-radius: 5px; background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); padding-left: 2.4rem; text-align: left; z-index: 9999;}
.btn_legend_view:hover,
.btn_legend_view:focus{ background: #2768ff; color: #fff;}
.btn_legend_view em{ position: absolute; width: 3px; height: 3px; background: #aaa; border-radius: 3px; left: 1.4rem; top: 1.5rem;}
.btn_legend_view em::before,
.btn_legend_view em::after{ content: ""; position: absolute; width: 3px; height: 3px; background: #aaa; border-radius: 3px;}
.btn_legend_view em::before{ top: -5px;}
.btn_legend_view em::after{ bottom: -5px;}

@media screen and (max-width: 768px) {
    .btn_legend_view{ display: none;}
}

/* Map 컨트롤 : Map 스케일 */
.map_scale{ position: fixed; background-color:rgba(36, 107, 235, 0.8); opacity:1; color: #fff; font-size: 1.2rem; right: 0; bottom: 0; padding: 0 1.6rem; height: 3.42rem; display: flex; align-items: center; z-index: 9999;}
.map_scale ul{ display: flex; gap: 1.5rem;}
.scale_bar{ width: 6.2rem; height: .8rem; border: 2px solid #fff; border-top: none; display: inline-block; margin-right: .6rem;}

@media screen and (max-width: 768px) {
    .map_scale{ display: none;}
}

/* 레이어팝업 검색 : 결과 */
.layer_pop_search_results{ position: absolute; left: 0; top: 5.7rem; width: 100%; border-radius: .5rem; overflow: hidden; background: #fff;}
.layer_pop_search_results .wt_layerpop_top .tit{ font-size: 1.5rem;}
.layer_pop_search_results .wt_layerpop_top .tit b{ font-weight: 500; color: #6df2f2;}

.sch_res_lsit{ max-height: 45rem; overflow: auto; margin-bottom: 1rem;}
.sch_res_lsit dl:not(:last-child){ margin-bottom: 1px;}
.sch_res_lsit dl:last-child dd ul li:last-child{ margin-bottom: 1rem;}
.sch_res_lsit dl dt{ background: #f0f0f0;}
.sch_res_lsit dl dt button{ padding: .6rem 2rem; font-size: 1.5rem; font-weight: 700; width: 100%; text-align: left; background: url("../images/arr_sch_res_down.png") no-repeat right 2rem center; transition: all 0.3s;}
/* .sch_res_lsit dl dt button.on{ background: url("../images/arr_sch_res_up.png") no-repeat right 1rem center;}*/
.sch_res_lsit dl dt button.on{ background: url("../images/arr_sch_res_up.png") no-repeat right 2rem center;}
.sch_res_lsit dl dt button.on:focus,
.sch_res_lsit dl dt button.on:hover{ background: url("../images/arr_sch_res_up_on.png") no-repeat right 2rem center;}
.sch_res_lsit dl dd{}
.sch_res_lsit dl dd ul{ padding: .6rem 0;}
.sch_res_lsit dl dd ul li{ }
.sch_res_lsit dl dd ul li a{ display: block; font-size: 1.5rem; line-height: 2.8rem; padding: 0 2rem;}
.sch_res_lsit dl dd ul li a b{ font-weight: 500; margin-right: .6rem;}
.sd_bg{ background: #dee9fc;}

/* 레이어팝업 : 선택영역 */
.layerpop_areasel_list{}
.layerpop_areasel_list li:not(:last-child){ margin-bottom: .6rem;}
.layerpop_areasel_list li select{ width: 100%; font-size: 1.5rem;}
.areasel_formset{ display: flex; gap: .6rem;}
.btn_areasel_view{ display: inline-block; border: 1px solid #246beb; width: 3.4rem; height: 3.4rem; border-radius: 5px; background: url("../images/arr_area_move.svg") no-repeat center; color: #246beb;}
.btn_areasel_view:hover{ background: url("../images/arr_area_move_on.svg") no-repeat center #246beb; color: #fff;}
.areasel_formset select{}
.areasel_formset select:nth-child(1){ width: 50%;}
.areasel_formset select:nth-child(2){ width: 40%;}

.btnSelArea{ margin-top: 1rem;}
.btnSelArea button + button{ margin-top: .6rem;}

/* 먼적, 거리 커서 포인트 */
.cursor_distance{ position: absolute;}

/* 먼적, 거리 커서 클릭 후 포인트 */
.point_area{ position: absolute;}

/* 공지 팝업 */
.noti_pop{ position: fixed; top: 10rem; left: 50%; transform: translate(-50%); background: #fff; border: 1px solid #246beb; border-radius: .5rem; padding: 2.5rem 5rem 2.5rem 5rem; line-height: 1.4; display: none; z-index: 99;}

.noti_pop.area{ padding: 2.6rem 5rem 2.5rem 4.9rem;} /* 면적재기 */
.noti_pop.distance{ padding: 2.6rem 5rem 2.5rem 4.9rem;} /* 거리재기 */
.noti_pop.krfpop{} /* KRF */

.noti_pop_cont{ padding-left: 2.3rem; background: url("../images/icon_noti_info.png") no-repeat left center; color: #2768ff; font-size: 1.5rem; font-weight: 500;}

.btn_noti_pop_close{ position: absolute; top: 1rem; right: 1rem; width: 1.3rem; height: 1.3rem; background: url("../images/btn_noti_pop_close.svg") no-repeat;}

@media screen and (max-width: 1023px) {
}

@media screen and (max-width: 768px) {
    .noti_pop{ padding: 1rem 3rem 1rem 1rem !important;}
    .noti_pop_cont{ font-size: 1.5rem;}
    .btn_noti_pop_close{ top: 1.3rem;}
}

/* 종합차트 */
.total_chart_pop{ width: 40.6rem; padding: 2.5rem 4rem 1.5rem 4rem;}
.station_sel_wrap{ display: inline-flex; gap: .5rem; flex-wrap: wrap; border-top: 1px solid #ced4da; padding-top: 1rem; margin-top: .8rem; width: 100%;}
.st_tag{ font-size: 1.3rem; color: #fff; background: #2768ff; border-radius: .3rem; height: 2.4rem; padding: 0 .8rem 0 1rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 1rem;}
.btn_sttag_close{ display: inline-flex; width: .8rem; height: .8rem; background: url("../images/btn_close_wh.svg") no-repeat center;}

.tit_sttag{ display: inline-flex; white-space: nowrap; font-weight: 500;}

.st_btn_warp{ text-align: center; margin-top: 1.5rem;}
.btn_st_chart_view{ width: 10.5rem; height: 3rem; color: #246beb; background: url("../images/icon_new_win_bu.svg") no-repeat right 1.5rem center; background-size: 1.3rem 1.3rem; border-radius: .6rem; border: 1px solid #2768ff; display: inline-flex; align-items: center; padding-left: 1.6rem; font-weight: 500;}

@media screen and (max-width: 768px) {
    .total_chart_pop{ width: calc(100% - 2rem);}
    .station_sel_wrap{ gap: 1rem;}
}

.dis_tip_sm{ position: absolute; background: #2768ff; border-radius: .5rem; padding: .6rem 1rem; color: #fff; font-size: 1.5rem; font-weight: 500; text-align: center; display: none;}
.dis_tip_sm em{ font-size: 1.2rem; font-weight: 300; margin-left: .3rem;}

.dis_tip_md{ position: absolute; padding: .6rem 4rem .6rem 1.5rem; background: #fff; border: 1px solid #246beb; border-radius: .5rem; display: none;}
.dis_tip_md span{ font-size: 1.5rem; margin-right: .6rem;}
.dis_tip_md b{ font-size: 1.5rem; font-weight: 500; color: #2768ff;}
.dis_tip_md em{ font-size: 1.5rem; margin-left: .2rem;}
.btn_distipm_close{ position: absolute; top: 1.2rem; right: 1.5rem; width: 1.3rem; height: 1.3rem; background: url("../images/btn_noti_pop_close.svg") no-repeat;}

.dis_tip_lg{ position: absolute; padding: .6rem 1.5rem; background: #fff; border: 1px solid #246beb; border-radius: .5rem; display: none;}
.dis_tip_lg span{ font-size: 1.5rem; margin-right: .6rem;}
.dis_tip_lg b{ font-size: 1.5rem; font-weight: 500; color: #2768ff;}
.dis_tip_lg em{ font-size: 1.3rem; margin-left: .2rem;}
.dis_tip_lg p{ font-size: 1.3rem; border-top: 1px solid #ced4da; padding-top: .4rem; margin-top: .4rem;}

/* Tooltip */
.tw_tooltip{ position: absolute; font-size: 1.5rem; background: #1d56bc; padding: .7rem 1.5rem; border-radius: .5rem; opacity: .9; display: none;}

.tw_tooltip:after{content: ""; position: absolute; display: inline-block; top:50%; transform: translateY(-50%); left: -8px; width:0; height:0; border-right: 8px solid #1d56bc; border-bottom: 5px solid transparent; border-top: 5px solid transparent;}
.tw_tooltip .tit{ display: flex; justify-content: center; align-items: center; gap: 1rem;}
.tw_tooltip .tit b{ color: #fff;}
.tw_tooltip .tit span{ color: #aabef5;}
.tw_tooltip .sub_info{ margin-top: 2px; margin-bottom: 6px;}
.tw_tooltip .sub_info li{ font-size: 1.5rem; color: #fff; text-align: center; line-height: 2rem;}

.tw_tooltip .cont{ background: #16408d; padding: .6rem 1.5rem; border-radius: .5rem;}
.tw_tooltip .cont .info{ color: #aabef5; text-align: center;}
.tw_tooltip .cont ul{}
.tw_tooltip .cont ul li{ color: #fff; text-align: center; font-weight: 500;}

.tw_tooltip .desc{ color: #fff; font-size: 1.3rem; text-align: center; margin-top: .6rem;}

.nw_tooltip{ position: absolute; font-size: 1.5rem; background: #246beb; padding: .7rem 1.5rem; border-radius: .5rem; opacity: .9; border: 1px solid #fff; text-align: center; display: none;}
.nw_tooltip:after{content: ""; position: absolute; display: inline-block; top:50%; transform: translateY(-50%); left: -8px; width:0; height:0; border-right: 8px solid #fff; border-bottom: 5px solid transparent; border-top: 5px solid transparent;}
.nw_tooltip .mw_type{ color: #fff; font-size: 1.5rem;}
.nw_tooltip .nw_stay{ color: #fff; font-size: 1.5rem; font-weight: 700;}

/* Tooltip : Mobile */
.tw_tooltip{}
.tw_tooltip.mobile::after{ left: calc(50% - 5px); transform: translateY(-50%); top: auto; bottom: -19px; width: 0; height: 0; border-top: 8px solid #246beb; border-right: 5px solid transparent; border-left: 5px solid transparent;}
.btn_tool_detal_view{ background: url(../images/icon_new_win.png) no-repeat right 1.9rem center #0e2b5e; width: 11rem; height: 2.8rem; border-radius: 2.6rem; color: #fff; font-size: 1.5rem; padding-left: 1.9rem; display: flex; align-items: center;}

.desc + .m_tool_btn_wrap{ margin-top: .8rem; margin-bottom: .2rem;}
.m_tool_btn_wrap{ display: flex; justify-content: center; align-items: center; gap: 1.6rem;}

.btn_mtooltil_close{ background: url("../images/btn_pop_flag_close.png") no-repeat right 1.9rem center #16408d; background-size: 11px; width: 11rem; height: 2.8rem; border-radius: 2.6rem; color: #fff; font-size: 1.5rem; padding-left: 1.9rem; display: flex; align-items: center;}

/************************************************ KRF *************************************************/
.krf_map_viewer{ position: relative; width: 100%; height: 100vh; overflow: hidden;}

.krf_sel_pop{ position: absolute; left: 0; top: 2rem; width: 30rem; height: 39rem; border-radius:0 1rem 1rem 0; overflow: hidden; background: #fff; z-index: 9999;}
.krf_sel_top{ position: relative; background: #1d56bc; height: 8rem; padding: .1rem 0 0 2rem;}
.krf_sel_top .tit{ color: #5089ef; font-size: 5rem; font-weight: 800;}

.btn_krf_out{ position: absolute; top: 1.8rem; right: 2rem; height: 2rem; background: url("../images/btn_krf_out.png") no-repeat right 0 center; padding-right: 3rem; font-size: 1.7rem; font-weight: 500; color: #a7c4f7; display: flex; align-items: center;}

.krf_po{ position: absolute; z-index: 999; cursor: pointer; width: 2.7rem; height: 3.6rem;}

.krf_tooltip{ position: absolute; display: inline-block; z-index: 1000; height: 2.6rem; line-height: 2.6rem; border: 1px solid #1d1d1d; border-radius: 2.6rem; padding: 0 1.4rem; background: #fff;}
.btn_krf_tootip_close{ position: absolute; display: inline-block; width: 1.4rem; height: 1.4rem; background: url("../images/krf_tooltip_close.png") no-repeat; left: -2rem; top: .6rem;}

.krf_sel_tabl{}
.krf_sel_tab{ padding: 0 2rem 1rem 2rem; background: #1d56bc; font-size: 17px; display: flex;}
.krf_sel_tab li{ flex: 1;}
.krf_sel_tab li button{ color: #fff; height: 4rem; display: flex; align-items: center; justify-content: center; width: 100%;}
.krf_sel_tab li.on button{ font-weight: 500; border-radius: .5rem; background: #16408d;}

.krf_tab_cont_wrap{ padding: 2.4rem 2rem 2rem 2rem;}
.krf_tab_cont{ display: none;}

.krf_tab_cont.ktc01{ display: block;}

.krf_inp_wrap{ display: flex; gap: 2rem;}
.krf_inp_wrap li{ flex: 1;}
.icon_krf img{ width: 2.2rem; height: 2.8rem;}
.krf_inp_wrap{} .chk_m{ z-index: 2;}

.krf_item_box{ position: relative; text-align: center; width: 100%; height: 9rem; border: 1px solid #d8d8d8; border-radius: 3px; padding-top: .9rem;}
.krf_item_box:hover:after{content: ""; position: absolute; border: 2px solid #246beb;  height: 9.1rem; width: calc(100% + 2px); border-radius: 3px; left: -1px; top: -1px;}
.krf_item_box .krf_flag{ width: 3.2rem; height: 4.1rem;}
.krf_item_box .krf_flag.fl_start{ background: url("../images/krf_po_s_lg.png") no-repeat;}
.krf_item_box .krf_flag.fl_end{ background: url("../images/krf_po_e_lg.png") no-repeat;}

.krf_item_box .text{ font-size: 1.5rem; position: absolute; bottom: .5rem; width: 100%; text-align: center;}

.inp_krf{ position: relative; height: 4rem; background: #fff; flex: 1; display: flex; align-items: center; padding: 0 1.2rem;}

.inp_krf.in_start{ border: 1px solid #d8d8d8; border-radius: 2px 2px 0 0;}
.inp_krf.in_end{ border-top: none; border-radius: 0 0 2px 2px; border-right: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; border-left: 1px solid #d8d8d8;}
.inp_krf.in_chk{ display: flex; justify-content: center; align-items: center; gap: 3rem;}
.inp_krf.in_chk:hover{ border: 2px solid #246beb !important; z-index: 2; border-radius: 3px 3px 0 0; outline: 0; box-shadow: 0 0 0 3px rgba(0,123,255,.25); transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}

.krf_inp_wrap li:last-child .krf_item_box::before{ content: ""; position: absolute; width: 10.4rem; height: 2px; background: url("../images/krf_icon_dotline.png"); top: 3rem; left: -6.2rem;}
.ktc02 .krf_inp_wrap li:last-child .krf_item_box::before{ width: 8.2rem; left: -4.2rem;}

.inp_krf input[type=text]{ border: none; font-size: 1.3rem; height: 100%; width: 19rem;}
.inp_krf_focus input[type=text]:focus{ box-shadow: 0 0 0 0 !important}

.inp_krf_focus{ border: 2px solid #246beb !important; outline: 0; 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;}
.inp_krf_focus::before{}
.inp_krf input::placeholder{ font-size: 1.3rem; color: #8e8e8e;}

.inp_krf.in_start.inp_krf_focus{ border-radius: 3px 3px 0 0; margin: -1px -1px -1px -1px !important; height: 4.2rem;}

.inp_krf.in_end.inp_krf_focus{ border-radius: 0 0 4px 4px; margin: -1px -1px 1px -1px !important;}

.btn_krf_inp_close{ position: absolute; right: 1.4rem; width: .8rem; height: .9rem; background: url("../images/btn_krf_inp_close.png") no-repeat center; display: none;}

.krf_chk_wrap{ margin-top: 2rem; padding-right: 1rem; display: flex; justify-content: space-between;}
.krf_chk_wrap .tit_chk{ font-size: 1.5rem;}
.krf_chk_wrap .krf_chk_set{ display: flex; gap: 2.6rem;}
.krf_chk_set .form_check input[type=checkbox] ~ label:before { width: 2rem; height: 2rem;}

.krf_ctrl_btn_wrap{ display: flex; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid #1d1d1d;}
.btn_krf_ctrl{ height: 6rem; flex: 1; text-align: center; padding-top: 2.8rem; border-radius: 5px; background-repeat: no-repeat; transition:all 0.3s ease-in;}
.btn_krf_ctrl.i01{ background-image: url("../images/krf_icon01.png"); background-position: top 1.1rem center;}
.btn_krf_ctrl.i02{ background-image: url("../images/krf_icon02.png"); background-position: top 1.1rem center;}
.btn_krf_ctrl.i03{ background-image: url("../images/krf_icon03.png"); background-position: top 1.2rem center;}
.btn_krf_ctrl.i04{ background-image: url("../images/krf_icon04.png"); background-position: top 1.3rem center;}

.btn_krf_ctrl.on,
.btn_krf_ctrl:hover{ color: #246beb;}
.btn_krf_ctrl.i01:hover,
.btn_krf_ctrl.i01.on{ background-image: url("../images/krf_icon01_on.png");}
.btn_krf_ctrl.i02:hover,
.btn_krf_ctrl.i02.on{ background-image: url("../images/krf_icon02_on.png");}
.btn_krf_ctrl.i03:hover,
.btn_krf_ctrl.i03.on{ background-image: url("../images/krf_icon03_on.png");}
.btn_krf_ctrl.i04:hover,
.btn_krf_ctrl.i04.on{ background-image: url("../images/krf_icon04_on.png");}

.btn_krf_ctrl.i01.on,
.btn_krf_ctrl.i02.on,
.btn_krf_ctrl.i03.on,
.btn_krf_ctrl.i04.on,
.btn_krf_ctrl.i04:active{ background-color: #eff5ff;}

.btn_krf_ctrl.i04 { transition: all 0.1s ease-in;}

/* KRF Point Flag */
.krf_flag_wrap{ position: absolute; left: 31rem; top: 2rem; padding: 1rem 1.5rem; border-radius: .5rem; background: #fff; display: flex; flex-direction: column; gap: 1rem; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); display: none; z-index: 99999;}
.krf_flag{ display: inline-block; width: 2.7rem; height: 3.6rem;}
.krf_flag.fl_start{ background: url("../images/krf_po_s.png") no-repeat; background-size: contain;}
.krf_flag.fl_end{ background: url("../images/krf_po_e.png") no-repeat; background-size: contain;}
.krf_flag.fl_up{ background: url("../images/krf_po_up.png") no-repeat; background-size: contain;}

.krf_flag_wrap.ktc01{ display: flex;}

.pop_flag_info{ position: absolute; width: 34rem; height: 34rem; border-radius: 100%; opacity:1; overflow: hidden; z-index: 99991;}
.pop_flag_info.pop_ktc01{ left: 24.4rem; top: -16rem;}
.pop_flag_info.pop_ktc02{ left: 24.4rem; top: -19rem; display: none;}

.pop_flag_info::after{ content: ""; position:absolute; top:0; left:0; width:100%; height:100%; background-position:center; background-size:cover; /* clip-path:circle(0% at 50% 50%); */ z-index: 1; background-color:rgba(0, 106, 226, 0.9); transition: ease-in .8s;}

.pop_flag_info:hover::after{ clip-path:circle(100% at 50% 50%);}

.pop_flag_info dl{ position: absolute; z-index: 2;}
.pop_flag_info dl dt{ font-size: 2.1rem; font-weight: 800; color: #fff;}
.pop_flag_info dl dd{ font-size: 1.5rem; color: #fff; line-height: 2rem; letter-spacing: -1px;}

.pop_ktc01.pop_flag_info dl{ left: 14rem; top: 19.3rem;}
.pop_ktc02.pop_flag_info dl{ left: 14rem; top: 20.5rem;}

.pop_flag_info{ display: none;}
.pop_flag_info.pop_ktc01{ display: block;}

@keyframes flagZoomIn {
    0%{
        transform:scale(0, 0)
    }
    60% {
        transform:scale(90%, 90%)
    }
    100% {
        transform:scale(100%, 100%)
    }
}
@keyframes flagZoomOut {
    0%{
        transform:scale(100%, 100%)
    }
    100% {
        transform:scale(0, 0)
    }
}
.pop_flag_info{ animation: flagZoomIn 1.2s; animation-iteration-count : 1;}

.btn_pop_flag_info_close{ position: absolute; width: 1.3rem; height: 1.3rem; background: url("../images/btn_pop_flag_close.png") no-repeat center; z-index: 2;}
.pop_flag_info.pop_ktc01 .btn_pop_flag_info_close{ top: 17.8rem; right: 3.6rem;}
.pop_flag_info.pop_ktc02 .btn_pop_flag_info_close{ top: 20.8rem; right: 3.6rem;}

.pop_flag_info.close{ display: none !important;}

.dam_bo_wrap{ position: absolute; left: 3rem; text-align: left; display: flex; flex-direction: column; gap: .1rem;}

.tran_dim{ position: absolute; top: 0; left: 0; z-index: 999999; background: #000; width: 100%; height: 100%; opacity: 0;}
.tran_dim.d02{ display: none;}
.tran_dim.close{ display: none !important;}

/************************************************ 팝업 *************************************************/
#popup_wrap{ }

.gis_pop_top_wrap{ background: var(--ce-prim-color-80); padding: 1.4rem 2rem; margin-bottom: 1px;}
.gis_pop_top_wrap + .gp_search{ margin-top: 1px;}

.gis_pop_top{ position: relative; padding: 0 0 0 .6rem; display: flex; justify-content: space-between;}
.gis_pop_top .btn_win_close{ position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.gp_tit{ color: #fff; font-size: 1.9rem; font-weight: 500; background-image: url("../images/blit_gp_tit.png"); background-repeat: no-repeat; background-position: left center; padding-left: 2.4rem; display: flex; align-items: center;}
.gp_tit em{ color: var(--gq-color-secd); margin-left: .5rem;}
.gp_tit.tit_none{ background: none; padding-left: 0;}
.gp_tit.video{  background: url("../images/blit_gp_tit_video.png") no-repeat left center; padding-left: 3rem;}

.btn_gp_dataView{ position: relative; color: var(--ce-prim-color-20); font-size: 1.5rem; font-weight: 500; border: 1px solid var(--ce-prim-color-20); height: 3rem; border-radius: .5rem; background: url("../images/icon_new_win.png") no-repeat right 1.5rem center; padding: 0 3.6rem 0 1.6rem; display: flex; align-items: center;}
.btn_gp_dataView:hover,
.btn_gp_dataView:active{ border: 1px solid var(--gq-color-prim); color: #fff; background: url("../images/icon_new_win_wh.png") no-repeat right 1.5rem center var(--gq-color-prim);}

.gp_info_list{ }
.gp_info_list ul{ display: flex; flex-wrap: wrap; gap: .8rem;}
.gp_info_list ul li{ width: calc(33.3% - .8rem); padding-left: .3rem;}
.gp_info_list ul li.long{ width: 100%;}
.gp_info_list ul li span{ color: #d3e1fb; background: url("../images/blit_gp_info.png") no-repeat left center; padding-left: 1.5rem; margin-right: .5rem;}
.gp_info_list ul li em{ color: #fff;}

.gis_pop_top + .gp_info_list{ margin: 1.4rem 0 0 0; padding-top: 1.4rem; border-top: 1px solid #1d56bc;}

.gp_info_desc{ color: var(--gq-color-secd); font-size: 1.3rem; text-align: right;}

/* 홍수특보 : 시간별 : 버튼 */
.byhour_wrap{ height: 3rem; padding: 1px; border-radius: 3px; background: #fff; display: flex;}
.btn_byhour{ position: relative; border-radius: 3px; font-size: 1.5rem; color: #8e8e8e; padding: 0 .8rem; margin-right: 1px; min-width: 6.4rem; text-align: center;}
.btn_byhour:not(:first-child)::after{ content: ""; position: absolute; width: 1px; height: 1rem; background: #e5e5e5; left: -1px; top: 1rem; z-index: 1;}
.btn_byhour.on{ background: #0e2b5e; height: 100%; color: #fff; font-weight: 500;}

@media screen and (max-width: 768px) {
    .gis_pop_top_wrap{ padding: 1.6rem 1rem;}
    .gis_pop_top{ flex-direction: column;}
    .gp_tit{ font-size: 1.8rem; line-height: 1.2; padding-left: 2.2rem;  background-position: left 0 top .2rem; background-size: 1.6rem auto;}
    .gp_tit em{ font-size: 1.5rem;}

    .btn_gp_dataView{ height: 3rem; font-size: 1.5rem; padding: 0 2.6rem 0 1rem; background: url("../images/icon_new_win.png") no-repeat right .8rem center; width: 14rem; margin-top: 1rem;}

    .gp_sch_period + .btn_gp_dataView{ margin-left: auto;}

    .gp_info_list ul li{ width: 100%;}
    .gp_info_desc{ text-align: left; margin-top: .6rem; padding-left: 1rem; font-size: 1.3rem;}
}

.gis_popup_cont{ padding: 2rem 2rem 1rem 2rem; overflow: hidden;}

/* 검색 */
.gp_search{ position: relative; min-height: 5rem; padding: 1rem 2rem; display: flex; justify-content: space-between; background: var(--gq-color-prim);}
.gp_search.col{ flex-direction: column; gap: 1rem;}
.gp_sch_period_wrap{ display: flex; align-items: center; gap: 2rem;}


.gp_search + .gis_pop_top_wrap{ margin-top: 1px;}

.gp_sch_period{ display: flex; align-items: center; gap: 1rem;}
.gp_sch_set{ display: flex;}
.gp_sch_tit{ color: #fff; font-weight: 500;}
.dtic{ color: #fff; margin: 0 .8rem; display: flex; align-items: center;}

.gp_search.wh .dtic{ color: var(--txt-color);}

.gp_search .sel_m.year{ min-width: 9rem;}
.gp_search .sel_m.month{ min-width: 8rem;}

.gp_sch_text{ color: var(--gq-color-secd); font-size: 1.3rem; display: flex; align-items: center; margin-left: 1rem;}
.gp_sch_text b{ margin-left: .4rem;}

.gp_schUnit + .gp_schUnit{ margin: 0 0 0 .5rem;}


@media screen and (max-width: 768px) {
    .gp_search{ flex-direction: column; align-items: flex-start; padding: 1rem;}
    .gp_search.col{ gap: 2rem;}
    .gp_sch_period_wrap{ gap: 1rem; flex-direction: column; align-items: flex-start; width: 100%;}
    .gp_sch_period{ flex-direction: column; align-items: flex-start; width: 100%;}

    .gp_sch_set{ flex-direction: column; width: 100%;}
    .gp_schUnit + .gp_schUnit{ margin: .5rem 0 0 0;}
    .gp_schUnit{ display: flex; gap: 1rem;}
    .gp_schUnit .sel_m,
    .gp_schUnit .inp_m{ flex: 1; width: 100% !important;}

    .dtic{ width: 100%; text-align: left; font-weight: 500;}

    .btn_gp.btn_gpSch{ width: 100%; justify-content: center;}
    .gp_sch_right{ margin-top: 1rem; width: 100%; text-align: right;}
    .btn_gp.btn_gpExc{ }

    .gp_sch_text{ margin-top: .8rem;}
}

/* 팝업 : 그래프 */
.gp_graph_list{ }
.gp_graph_list ul{}
.gp_graph_list > ul > li{ position: relative;}
.gp_graph_list > ul > li:not(:last-child)::after{ content: ""; position: absolute; width: 120%; background: #eff5ff; height: .4rem; left: -10%; right: -10%;}

.gp_graph_item{ padding: 2rem 0 1rem 0;}
.gp_graph_item .sel_m{ min-width: 8rem;}
.gp_graph_top{ margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center;}

.gp_g_tit_wrap{ display: flex; align-items: center; gap: 1rem;}
.gp_g_tit{ height: 3rem; border: 1px solid #a7c4f7; border-radius: 3rem; background: #eff5ff; font-size: 1.5rem; font-weight: 500; padding: 0 2rem; display: flex; justify-content: center; align-items: center;}
.gp_g_unit{}

.gp_g_sel_wrap{ display: flex; gap: 1rem; align-items: center;}
.gp_g_stit{ color: var(--gq-color-prim); font-weight: 700; display: flex; gap: .6rem;}
.gp_g_stit em{ color: var(--txt-color); font-weight: 700;}

.gp_graph_box{}
.gp_graph_box.sm{ height: 14rem;}
.gp_graph_box.md{ height: 28rem;}
.gp_graph_box.lg{ height: 36rem;}

.gp_graph_tit_warp{ background: #edf1f5; margin-bottom: 2rem; height: 40px; display: flex; justify-content: center; align-items: center;}
.gp_graph_tit{ position: relative; font-size: 1.7rem;}
.gp_graph_tit::before{ content: ""; position: absolute; background: url("../images/gp_graph_tit.png") no-repeat; width: 1.7rem; height: 2rem; left: -2.2rem; top: 1px;}
.gp_graph_tit .jip{ color: #246beb;}

.gp_graph_list ul:first-child li:first-child .gp_graph_item{ padding: 0 0 1rem 0;}

.gp_graph_desc{ position: relative; text-align: center; color: #555; background: #eff5ff; padding: .6rem 2rem;}
.gp_graph_desc::before{ content: ""; position: absolute; width: 10%; height: 100%; background: #eff5ff; top: 0; left: -10%; right: -10%;}
.gp_graph_desc::after{ content: ""; position: absolute; width: 10%; height: 100%; background: #eff5ff; top: 0; right: -10%; right: -10%;}

/* 그래프 범례 */
.gp_graph_legend{}
.gp_graph_legend ul{ display: flex; justify-content: center; align-items: flex-start; gap: 2rem;}
.gp_graph_legend li{ display: flex; align-items: flex-start;}

.gp_graph_box + .gp_graph_legend{ margin-top: 1rem;}

.gp_g_legd{ font-size: 1.5rem; display: flex; align-items: flex-start; gap: .7rem; line-height: 1.2;}

/* dot */
.gp_g_legd em{ display: inline-block; width: .6rem; height: .6rem; border-radius: .6rem; margin-top: .4rem;}

/* line */
.gp_g_legd .line{ width: 1.8rem; height: .3rem;}

/* 그래프 : 범례 */
.gp_g_legd .gpt01{ background: #1c4efc;}
.gp_g_legd .gpt02{ background: #ee0000;}
.gp_g_legd .gpt03{ background: #32cd32;}
.gp_g_legd .gpt04{ background: #5917bb;}
.gp_g_legd .gpt05{ background: #ff4500;}
.gp_g_legd .gptgray{ background: #717171;}

.gp_fish_list{}
.gp_fish_list ul{ display: flex; flex-wrap: wrap; gap: 1rem;}
.gp_fish_list ul li{ width: calc(50% - .5rem);}

.gp_fish_item{ padding: 1.6rem 2rem; background: #eff5ff; height: 100%;}
.gp_fish_item .fish_spec{ font-weight: 500; margin-bottom: 1rem;}

.gp_fish_info{ display: flex; gap: 2rem; margin-bottom: 1rem;}
.fish_pic{ display: inline-block; width: 8.5rem; height: 5.2rem;}
.fish_pic img{ width: auto; height: auto; max-width: 100%;}
.gp_fish_info .fish_name{ font-size: 1.3rem; font-weight: 700; flex: 1;}

.gp_fish_item .fish_desc{ color: var(--txt-sub-color); font-size: 1.3rem;}

@media screen and (max-width: 768px) {
    .gp_g_tit_wrap{ width: 100%; margin-bottom: 1rem;}
    .gp_graph_top{ flex-direction: column; align-items: flex-start;}
    .gp_g_sel_wrap{ justify-content: space-between; width: 100%;}

    .gp_graph_desc{ text-align: left;}
    
    .gp_graph_box{ padding: 0;}

    .gp_fish_list ul li{ width: 100%;}
    .gp_fish_info{ gap: 1rem; flex-direction: column;}
    .fish_pic{ width: 100%; height: auto;}

    .gp_graph_box + .gp_graph_legend{ margin-top: 2rem;}
    .gp_graph_legend ul{ flex-direction: column; gap: .6rem; align-items: flex-start;}
}

.spot_info b{ color: #246beb;}

.average_year_info{ border-top: 1px dashed #cdd7e4; margin-top: 1.4rem;}

.average_box{ padding: 1.2rem; background-color: #eff5ff; border-bottom: 1px solid #e5e5e5;}
.average_cont{ padding: 1.5rem; background-color: #fff; border-radius: 1rem; display: flex; justify-content: center;}
.average_cont ul li{ position: relative; padding-left: .9rem;}
.average_cont ul li::before{ content: ""; position: absolute; width: 3px; height: 3px; left: 0; top: .9rem; border-radius: 3px; background: #1d1d1d;}
.average_cont ul li:not(:first-child){ margin-top: .6rem;}
.average_cont ul li b{ font-weight: 500; color: #246beb;}

.average_top{ margin-bottom: 1.5rem; text-align: center;}
.average_top strong{ display: block; font-size: 1.9rem; font-weight: 700;}
.average_top p{ margin-top: .4rem;}

.average_box + .average_box{ margin-top: 1rem;}

.gp_gage_wrap{ background: #eff5ff; border-radius: .5rem; padding: 1rem; display: flex;}
.gp_gage_wrap > div{ width: 50%;}
.gp_gage_box{ display: flex; justify-content: center; align-items: center; height: 18rem;}
.gp_gage_graph{ width: 30rem; height: 17rem; text-align: center;}
.gp_gage_graph img{ width: 100%; height: 100%;}

.gage_loc_info{ border-radius: .5rem; background: #fff; padding: 2.6rem 3rem 1rem 3rem; height: 18rem;}
.gage_loc_tit{ font-size: 1.9rem; font-weight: 500; padding-left: 2.4rem; background: url("../images/blit_gage_loc.png") no-repeat left top .5rem; padding-bottom: 1.2rem; margin-bottom: 1.2rem; border-bottom: 1px solid #cdd7e4;}
.gage_loc_desc b{ font-weight: 500; color: #246beb;}

@media screen and (max-width: 768px) {
    .gp_gage_wrap{ flex-direction: column;}
    .gp_gage_wrap > div{ width: 100%; height: auto;}
    .gage_loc_info{ height: auto; padding: 1.6rem;}

    .gp_gage_graph{ width: 100%; height: auto; margin-bottom: 1rem;}
}

/* 가믐현황 : 범례*/
.gbg01{ background: #eef7ee; font-weight: 500;} /* 정상 */
.gbg02{ background: #eaf3f9; font-weight: 500;} /* 관심 */
.gbg03{ background: #fff8e9; font-weight: 500;} /* 주의 */
.gbg04{ background: #fff3ee; font-weight: 500;} /* 경계 */
.gbg05{ background: #ffeeee; font-weight: 500;} /* 심각 */

.sch_total_info{ display: flex; align-items: center; gap: 1.6rem;}
.sch_total_info li{ position: relative;}
.sch_total_info li::after{ content: ""; position: absolute; width: 1px; height: 1rem; background: #e5e5e5; left: -8px; top: .5rem;}

.wt_hr{ position: relative; margin: 2rem 0; width: 100%; height: .4rem;}
.wt_hr::after{ content: ""; position: absolute; width: 120%; background: #eff5ff; height: .4rem; left: -10%; right: -10%;}

.m_close_top{ background: #16408D; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; display: none;}
.m_close_top .tit{ font-size: 1.7rem; color: #fff; font-weight: 500;}
.btn_win_close{ display: inline-block; width: 1.8rem; height: 1.8rem; background: url("../images/btn_close_wh.svg") no-repeat center; background-size: cover;}

@media screen and (max-width: 768px) {
    .m_close_top{ display: flex;}
}

/* 범례 상세정보 팝업 */
.leg_detail_pop_tit{ height: 4rem; line-height: 4rem; background: #edf1f5; border-radius: .5rem; margin-bottom: 1.5rem; font-size: 1.7rem; text-align: center;}

.dash_table02{ border-left:1px solid #dcdcdc; border-top:1px solid #dcdcdc; width:100%;}
.dash_table02 th,
.dash_table02 td{ font-size:13px; color:#282f48; padding:5px; border-bottom:1px solid #dcdcdc; border-right:1px solid #dcdcdc; text-align:center;}
.dash_table02 tr:first-child th{  }
.dash_table02 thead th{ background:#fbfbfb;}
.dash_table02 tbody th{ font-family: 'NotoKrM';}
.dash_table02 tr td{}
.dash_table02 .uni{ color:#8f929c;}

/* 수질측정망 : 하천 */
.brook .lc01{ background:#00a6e5;} /* 매우좋음 */
.brook .lc02{ background:#00b5ad;} /* 좋음 */
.brook .lc03{ background:#97cb59;} /* 약간좋음 */
.brook .lc04{ background:#95b0be;} /* 보통 */
.brook .lc05{ background:#fdb913;} /* 약간나쁨 */
.brook .lc06{ background:#f68b1f;} /* 나쁨 */
.brook .lc07{ background:#ef4223;} /* 매우나쁨 */

/* 수질측정망 : 호소 */
.lake .lc01{ background:#00a6e5;} /* 매우좋음 */
.lake .lc02{ background:#00b5ad;} /* 좋음 */
.lake .lc03{ background:#97cb59;} /* 약간좋음 */
.lake .lc04{ background:#95b0be;} /* 보통 */
.lake .lc05{ background:#fdb913;} /* 약간나쁨 */
.lake .lc06{ background:#f68b1f;} /* 나쁨 */
.lake .lc07{ background:#ef4223;} /* 매우나쁨 */

/* 생물측정망 */
.bio .lc0{}
.bio .lc01{ background:#0000ff;} /* 매우좋음 */
.bio .lc02{ background:#59ff00;} /* 좋음 */
.bio .lc03{ background:#ffe400;} /* 보통 */
.bio .lc04{ background:#ffa500;} /* 나쁨 */
.bio .lc05{ background:#ff0000;} /* 매우나쁨 */

.btn_legd_lpop_view{ width: 19rem; height: 3rem; border-radius: 3px; border: 1px solid #a7c4f7; color: #a7c4f7; margin: 1.4rem auto .5rem auto; display: flex; justify-content: center; align-items: center;}
.btn_legd_lpop_view.p_brook{}
.btn_legd_lpop_view.p_lake{}
.btn_legd_lpop_view.p_bio{}

.gis_guide_wrap{ position: fixed; height: 100vh; width: 100%; z-index: 9999999; background-color:rgba(77, 80, 85, 1); opacity:1;}

.gis_guide_inner{ width: 170rem; min-width: 150rem; height: 874px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.gis_guide_top{ margin-bottom: 2.7rem; display: flex; justify-content: space-between; align-items: center;}
.gis_guide_tit{ position: relative; font-family: "Gmarket Sans"; font-weight: 500; color: #fff; font-size: 4.4rem;}
.gis_guide_tit::after{ content: ""; position: absolute; width: 2.3rem; height: 3rem; background: url("../images/guide/icon_cursor.png") no-repeat left 0 top 0; right: -3.1rem; bottom: 1.4rem;}
.gis_guide_tit strong{ font-weight: 700; color: #ffdd33;}

.gis_guide_img{ text-align: center;}

.btn_7day_close{ position: relative; color: #fff; font-size: 1.9rem; padding-left: 3.2rem;}
.btn_7day_close::before{ content: ""; position: absolute; width: 2.7rem; height: 2.4rem; background: url("../images/guide/day7_chech.png") no-repeat left 0 top 0; left: 0;}
.btn_7day_close.on::before{ background: url("../images/guide/day7_chech_on.png") no-repeat left 0 top 0;}
.btn_7day_info_close{ position: relative; font-size: 1.7rem; font-weight: 700; color: #fff; height: 3.6rem; padding: 0 1.8rem; border-radius: 3.6rem; border: 1px solid #888b8f; display: flex; justify-content: center; align-items: center; gap: 1.2rem;}
.btn_7day_info_close::after{ content: ""; width: 1.4rem; height: 1.4rem; background: url("../images/guide/icon_info_close.png") no-repeat;}

@media screen and (max-width: 1500px) {
    .gis_guide_wrap{ padding: 2rem;}
    .gis_guide_inner{ position: relative; width: 100%; left: auto; top: auto; transform: translate(0, 0); min-width: 100%;}
    .gis_guide_img{ width: 100%;}
    .gis_guide_img img{ width: 100%; height: auto;}
}
@media screen and (max-width: 930px) {
    .gis_guide_tit{ font-size: 3rem;}
}
@media screen and (max-width: 768px) {
    .gis_guide_wrap{ display: none;}
}


.faq_btn_wrap{ text-align: center; margin-top: 2.8rem;}
.btn_faq_link{ color: #fff; font-size: 1.5rem; text-decoration: underline;}

/* 홍수정보시스템 (외부) */
.inp_cal.day{ width: 14rem;}
.gp_graph_data{ display: flex; gap: 20px;}
.gp_graph_data > div{}
.gp_graph_data .left_cont{ width: 70%;}
.gp_graph_data .right_cont{ width: 30%;}
.gp_graph_data .right_cont .tbl_wrap{ height: 455px;}

@media screen and (max-width: 768px) {
    .gp_graph_data{ flex-direction: column;}
    .gp_graph_data .left_cont{ width: 100%;}
    .gp_graph_data .right_cont{ width: 100%;}
}

.gp_grahp_box{ border: 1px solid #ccc;}

/* 홍수특보발령사항 팝업 */
.gp_search.wh{ background: #fff; padding: 1rem 2rem 1rem 1rem; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 1rem; display: flex; justify-content: center; background-color: #f5f5f5;}
.gp_search.wh .btn_gpSch{ border: 1px solid #246beb;}
.inp_m2{ padding: 0 6px; height: 3.4rem; font-size: 1.4rem; border-radius: 3px; box-sizing: border-box; color: var(--txt-color); border: 1px solid var(--ce-input-line);}

.gp_search.wh .gp_sch_tit{ color: var(--txt-color);}

@media screen and (max-width: 768px) {
    .gp_search.wh .inp_m2{ width: 100%;}
}