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

/*******************************
 * Infomation : 국가 통합물관리정보플랫폼
 * FileName   : sub.css 
 * Update     : 2025.04.10.
********************************/

#header{ position: relative;}
#header a.logo img.tw_logo.black{ display: inline-block !important;}
#header a.logo img.tw_logo.white{ display: none !important;}

/*내용*/
#container{/* background: url("../images/sub/sub_cont_bg.png") no-repeat right 0 top 0; */ padding-top: 8rem; margin-bottom: 8rem; position: relative;}

#content{ min-height: calc( 100vh - 156px); flex: 1;}

.breadcrumb_wrap{ background: #f8f8f8; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; height: 52px; display: flex; align-items: center;}
.breadcrumb_wrap .sub_inner{}
.breadcrumb{ position: relative; display: flex; align-items: center; gap: 4.4rem;}
.breadcrumb li{ position: relative;}
.breadcrumb li a{ position: relative; color: var(--txt-sub-color); font-size: 1.7rem; display: inline-block; line-height: 1.2;}
.breadcrumb li a:hover{ text-decoration: underline;}

.breadcrumb .home{ width: 1.7rem; height: 1.4rem; background: url("../images/sub/icon_loc_home.svg") no-repeat 0 0; border-bottom: 0;}
.breadcrumb li:not(:first-child)::before{ content: ""; position: absolute; width: 7px; height: 14px; left: -2.4rem; top: 50%; transform: translateY(-50%); background: url("../images/sub/arr_loc.png") no-repeat center;}

@media (max-width: 766px) {
	#container{ background: none; padding-top: 0; margin-bottom: 10rem;}
	#container .sub_inner:first-child{ padding: 0 2rem 2rem 2rem; overflow: hidden;}

	.breadcrumb_wrap{ background: #fff; border-top: none; border-bottom: none; margin-top: 4.4rem;}
	.breadcrumb{ gap: 2.5rem;}
	.breadcrumb li a{ font-size: 1.5rem}
	.breadcrumb li:not(:first-child)::before{ left: -1.4rem;}
	.breadcrumb .home{ margin-right: 0;}
}

#container .sub_inner{ display: flex; gap: 8rem;}

#contents{ flex: 1;}
@media (max-width: 766px) {
	#contents{ overflow: hidden;}
}
.lnb_wrap{ width: 25.3rem; margin-bottom: 5rem;}
.lnb_top{ position: relative; height: 17.7rem; padding-top: 5rem; /* background: url("../images/sub/lnb_wrap_top.png") no-repeat bottom center #0e2b5e; */ text-align: center; border-radius: 1rem 1rem 0 0; background: #0e2b5e; overflow: hidden;}
.lnb_top h2{ position: absolute; display: inline-block; color: #fff; font-size: 3.2rem; padding-top: 2.4rem; left: 50%; transform: translateX(-50%); z-index: 2; width: max-content;}

/* LNB Menu Wave BG */
.lnb_top{}
.lnb_wave_wrap{ margin-top: -56px;}
.sub_parallax > use {animation: lnb-wave 40s cubic-bezier(.55,.5,.45,.5) infinite; opacity: .6;}
.sub_parallax > use:nth-child(1){ animation-delay: -2s; animation-duration: 15s;}
.sub_parallax > use:nth-child(2){ animation-delay: -3s; animation-duration: 20s;}
.sub_parallax > use:nth-child(3){ animation-delay: -4s; animation-duration: 26s;}
.sub_parallax > use:nth-child(4){animation-delay: -7s; animation-duration: 20s;}

@keyframes lnb-wave {
	0% {
		transform: translate3d(-90px,0,0);
	}
	100% { 
		transform: translate3d(85px,0,0);
	}
}

.lnb{ margin-top: -.7rem;}
.lnb > li{ position: relative; border-radius: .6rem; border: 1px solid #d8d8d8; padding: 3px; background-color: #fff;}
.lnb > li > a{ position: relative; height: 5rem; border-radius: .6rem; display: block; z-index: 2; background-color: #fff; font-size: 1.9rem; padding-left: 2.2rem; display: flex; align-items: center;}
.lnb > li.on{ border: 1px solid #0e2b5e;}
.lnb > li.on > a{ background: #246beb; color: #fff; font-weight: 700;}
.lnb > li:not(:last-child){ margin-bottom: 1rem;}

.lnb > li.has_dep3 > a::after{ content: ""; position: absolute; width: 2rem; height: 2rem; right: 3rem; top: 50%; transform: translateY(-50%); /* background: url("../images/common/arr_common_down.svg") no-repeat; */ transition: all 0.3s ease-in;}
.lnb > li.has_dep3.on > a::after{ transform: translateY(-50%) rotate(-180deg); filter: invert(100%) sepia(95%) saturate(0%) hue-rotate(73deg) brightness(103%) contrast(106%);}

.lnb_dep3{ padding: 0 2.2rem; margin-top: .5rem; display: none;}
.lnb_dep3.on{ display: block;}
.lnb_dep3 > li{}
.lnb_dep3 > li > a{ height: 4.8rem; padding: 0 1rem; font-size: 1.7rem; display: flex; align-items: center;}
.lnb_dep3 > li.active > a{ color: #246beb; font-weight: 700; background: url("../images/common/icon_lnb_dep3.svg") no-repeat right 1.3rem center;}
.lnb_dep3 > li:not(:last-child){ border-bottom: 1px dashed #c6c6c6;}

.lnb > li.has_dep3_st > a::after{ content: ""; position: absolute; width: 2rem; height: 2rem; right: 3rem; top: 50%; transform: translateY(-50%); background: url("../images/common/arr_common_down.svg") no-repeat; transition: all 0.3s ease-in;}

.page_tit_wrap{ display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.2rem; border-bottom: 1px solid #d8d8d8; margin-bottom: 8rem;}
.page_tit_wrap h3{ font-size: 4rem; line-height: 1.2;}
.page_tit_wrap .page_util{ display: flex; gap: 3.8rem;}

.btn_page_url_copy{ color: var(--txt-sub-color); background: url("../images/common/icon_url_link.svg") no-repeat left center; padding-left: 2.5rem;}
.btn_page_print{ position: relative; font-size: 1.7rem; color: var(--txt-sub-color); background: url("../images/common/icon_page_print.svg") no-repeat left center; padding-left: 2.5rem; margin-right: .3rem;}
.btn_page_print::before{ content: ""; position: absolute; width: 2px; height: 1.4rem; background: #d8d8d8; left: -2rem; top: 50%; transform: translateY(-50%);}

.sub_cont_body{}

@media (max-width: 1315px) {
	.lnb_wrap{ display: none;}
	.sub_cont_body{ min-height: auto;}
}

@media (max-width: 766px) {
	.page_tit_wrap{ margin-bottom: 4rem;}
	.page_tit_wrap .page_util{ display: none;}
}

/* 데이터맵 리스트 */
.datamap_slogan{ font-size: 2.5rem; height: 6rem; background: url("../images/sub/datamap_slogan_img.png") no-repeat left center; padding: 0 0 0 9rem; margin-bottom: 1.6rem; display: flex; align-items: center;}

.datamap_txt{ position: relative; font-size: 1.7rem; margin-bottom: 6.4rem; background-color: #e9f0ff; border: 1px solid #d4e1ff; padding: 2.3rem 5rem 2.3rem 9rem; border-radius: 1rem; display: flex;}
.datamap_txt::before{ content: ""; position: absolute; width: 2rem; height: 2rem; background: url("../images/sub/icon_info.png") no-repeat left 0 top 0; left: 4rem; top: 2.5rem;}

.tosearch_slogan{ height: 6rem; background: url("../images/sub/tosearch_slogan.png") no-repeat left center; padding-left: 9rem; margin-bottom: 1.6rem; display: flex; align-items: center; justify-content: space-between;}
.tosearch_slogan p{ font-size: 2.5rem;}
.tosearch_txt{ position: relative; font-size: 1.7rem; margin-bottom: 6.4rem; background-color: #e9f0ff; border: 1px solid #d4e1ff; padding: 2.3rem 5rem 2.3rem 9rem; border-radius: 1rem; display: flex;}
.tosearch_txt::before{ content: ""; position: absolute; width: 2rem; height: 2rem; background: url("../images/sub/icon_info.png") no-repeat left 0 top 0; left: 4rem; top: 2.5rem;}

.data_map_list_wrap{}
.data_map_list{ display: flex; flex-wrap: wrap; gap: 2.4rem;}
.data_map_list > li{ width: calc(50% - 1.2rem);}

.data_map_list2_wrap{}
.data_map_list2{ display: flex; flex-wrap: wrap; gap: 2.4rem;}
.data_map_list2 > li{ width: calc(33% - 1.2rem);}

.data_map_item{ border-radius: 1.2rem; border: 1px solid #d8d8d8; padding: 2.4rem; height: 100%; display: flex; flex-direction: column; justify-content: space-between;}
.data_map_item_list{}
.data_map_item_list li{ display: flex;}
.data_map_item_list li:not(:first-child){ margin-top: .8rem;}
.data_map_item_list li span{ display: inline-block; min-width: 10rem;}
.data_map_item_list li b{}

@media (max-width: 1315px) {
	.data_map_list2 > li{ width: calc(50% - 1.2rem);}
}

@media (max-width: 766px) {
	.datamap_slogan{ height: auto; padding: 1rem; background: none;}
	.datamap_txt{ padding: 2rem 1rem 2rem 4rem;}
	.datamap_txt::before{ left: 1rem;}

	.tosearch_slogan{ height: auto;}
	.tosearch_txt{ padding: 2rem 1rem 2rem 4rem;}
	.tosearch_txt::before{ left: 1rem;}

	.data_map_list{ display: flex; flex-wrap: wrap; gap: 2rem;}
	.data_map_list > li{ width: 100%;}
	.data_map_list_wrap.law .data_map_item_list li{ flex-direction: column;}
	.data_map_list_wrap.law .data_map_item_list li span{ width: 100%;}

	.data_map_list2 > li{ width: 100%;}
}

.datamap_btn_wrap{ margin-top: 2rem; display: flex; gap: 1rem;}
.datamap_btn_wrap a{ width: calc(50% - 1rem); height: 4.4rem; padding-left: 1.8rem; display: flex; align-items: center;}

/********** 데이터맵 버튼 **********/
/* 원천시스템 */
.btn_datamap_new{ border-radius: .6rem; background-position: right 1.8rem center; background-repeat: no-repeat;
	background-color: #e2f9f9; background-image: url("../images/common/icon_newwin.svg");
}
.btn_datamap_new:hover{ border-radius: .6rem; background-position: right 1.8rem center; background-repeat: no-repeat;
	background-color: #c5f3f3; background-image: url("../images/common/icon_newwin.svg");
}
.btn_datamap_new.disb{ color: #717171; cursor: default;
	background-color: #f0f0f0; background-image: url("../images/common/icon_newwin_disb.svg");
}

/* 물통합관리 */
.btn_datamap_link{ border-radius: .6rem; background-position: right 1.8rem center; background-repeat: no-repeat;
	background-color: #e3f1ff; background-image: url("../images/common/arr_right.svg");
}
.btn_datamap_link:hover{ border-radius: .6rem; background-position: right 1.8rem center; background-repeat: no-repeat;
	background-color: #c7e3ff; background-image: url("../images/common/arr_right.svg");
}
.btn_datamap_link.disb{ color: #717171; cursor: default;
	background-color: #f0f0f0; background-image: url("../images/common/arr_right_disb.svg");	
}

/********** 법령/제도 버튼 **********/
/* 상세보기 버튼 */
.btn_law_view{ border-radius: .6rem; background-position: right 1.8rem center; background-repeat: no-repeat;
	background-color: #e2f9f9; background-image: url("../images/common/icon_newwin.svg");
}
.btn_law_view:hover{ border-radius: .6rem; background-position: right 1.8rem center; background-repeat: no-repeat;
	background-color: #c5f3f3; background-image: url("../images/common/icon_newwin.svg");
}
.btn_law_view.disb{ color: #717171; cursor: default;
	background-color: #f0f0f0; background-image: url("../images/common/icon_newwin_disb.svg");
}

/* 다운로드 버튼 */
.btn_law_down{ border-radius: .6rem; background-position: right 1.8rem center; background-repeat: no-repeat;
	background-color: #e3f1ff; background-image: url("../images/common/icon_common_file.svg");
}
.btn_law_down:hover{ border-radius: .6rem; background-position: right 1.8rem center; background-repeat: no-repeat;
	background-color: #c7e3ff; background-image: url("../images/common/icon_common_file.svg"); 
}
.btn_law_down.disb{ color: #717171; cursor: default;
	background-color: #f0f0f0; background-image: url("../images/common/icon_common_file_disb.svg");
}


/* FAQ */
.faq_wrap{ border-top: 2px solid #1d1d1d;}
.faq_list{}
.faq_list li{ border-bottom: 1px solid #d8d8d8;}
.faq_list li button{ position: relative; padding: 3rem; font-size: 1.9rem; width: 100%; text-align: left;}
.faq_list li button::after{ content: ""; position: absolute; width: 2rem; height: 2rem; background: url("../images/common/arr_common_down.svg") no-repeat; right: 3rem; top: 50%; transform: translateY(-50%); transition: all 0.3s ease-in;}
.faq_list li button.on::after{ transform: translateY(-50%) rotate(180deg);}
.faq_list li button.on{ font-weight: 700;}
.faq_cont{ display: none; position: relative; padding: 4rem 6rem; border-top: 1px solid #d8d8d8; background: #eff5ff; line-height: 1.4; width: 983px;}
.faq_txt{ position: relative;}
.faq_txt::before{ content: "A."; position: absolute; color: #246beb; font-weight: 700; left: -2.4rem; top: -1px;}
.faq_list li:first-child .faq_cont{ display: block;}

@media (max-width: 766px) {
	.faq_list li button{ padding: 2rem 4rem 2rem 2rem;}
	.faq_cont{ padding: 4rem; width: 100%;}
	.faq_list li button::after{ right: 2rem;}
}

/* 담당자 정보 : Left Menu */
.rep_info_wrap{ border-radius: 1rem; background: #eff5ff; border: 1px solid #d8d8d8; padding:1.6rem 2.5rem 1.4rem 2.5rem; margin-top: 4rem;}

.rep_info_wrap .rep_tit{ font-size: 1.5rem; font-weight: 700; text-align: center; padding-top: 4.7rem; background: url("../images/common/icon_rep_tel.svg") no-repeat top 0 center; background-size: 3.7rem;}
.rep_info_wrap .rep_info{ margin-top: .7rem; display: flex; flex-direction: column; gap: .2rem;}
.rep_info_wrap .rep_info li{ font-size: 1.5rem;}
.rep_info_wrap .rep_info li dl{ display: flex;}
.rep_info_wrap .rep_info li dl dt{ width: 6.6rem; text-align: justify;}
.rep_info_wrap .rep_info li dl dd{ font-weight: 700;}
.rep_info_wrap .rep_desc{ font-size: 1.3rem; color: var(--txt-sub-color); text-align: center; border-top: 1px solid #d8d8d8; margin-top: 1.3rem; padding-top: 1.1rem; letter-spacing: -1px;}

.rep_info_wrap.m_bottom{ display: none; margin-bottom: 0;}
.rep_info_wrap.m_bottom .rep_info{ padding-left: 0; background: none; justify-content: space-between; margin-top: 0;}
.rep_info_wrap.m_bottom .rep_info li dl{ display: flex; gap: 1rem;}

@media (max-width: 766px) {
	.rep_info_wrap .rep_info li{ font-size: 1.7rem;}
	.rep_info_wrap.m_bottom{ display: block;}
	.rep_info_wrap.m_bottom .rep_info li dl dt{ width: 7rem;}
}


/*#################################### 통합검색 ####################################*/
.total_search{ width: 1300px; /* padding: 80px 0 0 0; */}

.tab_total_sch_wrap{ display: flex; justify-content: center; align-items: center; margin-bottom: 36px;}

.tab_total_sch{ display: flex; background: #fff; border-radius: 10px; width: 100%; border: 1px solid #b1b8be; overflow: hidden;}
.tab_total_sch li{ display: flex; flex: 1;}
.tab_total_sch li a{ width: 100%; height: 5.6rem; font-size: 20px; font-weight: 700; display: flex; justify-content: center; align-items: center;}
.tab_total_sch li.on a{ background: #063a74; color: #fff; border: none;}
.tab_total_sch li:not(:first-child){ border-left: 1px solid #b1b8be;}

.total_search_cont{ }
.total_search_cont .middle_cont{ display: flex; gap: 4rem; margin-bottom: 50px;}
.total_search_cont .middle_cont .left_wrap{ width: 44rem;}
.total_search_cont .middle_cont .right_wrap{ flex: 1;}
.total_search_cont .h4{ font-weight: 700; padding-left: 0; background: none; margin-bottom: 2.4rem;}
.total_search_cont .h5{ font-weight: 700; padding-left: 0; background: none; margin-bottom: 2.4rem;}

.t_sch_box{ position: relative; background: #edf1f5; padding: 20px; border-radius: .8rem;}

.left_wrap .t_sch_box{}
.right_wrap .t_sch_box{ min-height: calc(100% - 6rem);}

.tree_wrap{ background: #fff; border-radius: 5px; padding: 12px; height: calc(100% - 5rem);}
.tree_top{ display: flex; justify-content: center; margin-bottom: 12px;}

.btn_tree_show{ position: relative; font-size: 1.5rem; text-decoration: underline;}
.btn_tree_show::before,
.btn_tree_show.off::before{ content: ""; position: absolute; width: 2rem; height: 2rem; right: -2.6rem; top: .2rem;}
.btn_tree_show::before{ background: url("../images/sub/icon_tree_plus.png") no-repeat;}
.btn_tree_show.off::before{ background: url("../images/sub/icon_tree_minus.png") no-repeat;}

.tree_list_wrap{ overflow: auto; height: 50rem; padding: 0 1rem;}

.tree_list{ margin-bottom: 1rem;}
.tree_list li{ margin-bottom: 1rem;}
.tree_list li:last-child{ margin-bottom: 1.2rem;}
.tree_list input[type=radio]{ margin-right: 5px; vertical-align: middle;}
.tree_list label{ vertical-align: middle;}

/*
.btn_tree{ width: 2rem; height: 2rem; background: url("../images/sub/icon_tree_minus.png") no-repeat center;}
*/

.btn_tree{ width: 4.9rem; height: 2rem; 
	background-image: url("../images/sub/icon_foder_open.png"), url("../images/sub/icon_tree_minus.png");
	background-repeat: no-repeat;
	background-position: left center, right center;	
}
.btn_tree.off{ background-image: url("../images/sub/icon_foder_close.png"), url("../images/sub/icon_tree_plus.png");}

.tree_tit{ position: relative; color: #000; margin-bottom: .8rem; display: flex; align-items: center;}
.tree_tit > span{ margin-left: 1.2rem;}
/*
.tree_list > div > .btn_tree.off + span{ background: url("../images/sub/icon_foder_close.png") no-repeat left center; padding-left: 22px;}
*/

.tree_dep2{ margin: 0 0 0 2.9rem; display: block;}
.tree_dep2 > li{ }
.tree_dep2 > li > span{}
.tree_dep2 li .form_check input[type=radio] ~ label { display: flex; align-items: center; padding-left: 24px;}
.tt_type{ position: absolute; display: inline-block; width: 4.2rem; padding: .1rem 0; text-align: center; font-size: 1.5rem; right: 4px; top: 0; border-radius: .6rem;}
.tt_type.tt1{ background: #eff5ff; color: #1d56bc;} /* 측정 */
.tt_type.tt2{ background: #edf8f8; color: #038f35;} /* 통계 */
.tt_type.tt3{ background: #fff8f5; color: #a85131;} /* 기타*/
.tt_type.tt4{ background: #fff8f5; color: #e27500;} /* GIS */

.tree_dep2 li{ position: relative;}
.tree_dep2 li .btn_tree{ }

.tree_dep2 ul{ margin: .6rem 0 0 3rem;}

.tree_dep2.off{ display: none;}
.tree_dep3.off{ display: none;}

.tree_search{ display: flex; gap: 10px; margin-bottom: 10px;}
.tree_search span{ display: flex; gap: .8rem;}
.tree_search input{ width: 100%; height: 4.4rem; border-radius: .6rem; border: 1px solid #717171; font-size: 1.7rem;}

/* 검색조건 : 구역선택 */
.t_sch_stit{ position: relative; font-size: 1.7rem; padding-left: 12px; margin-right: 6px;}
.t_sch_stit::before{ content: ""; position: absolute; background: #8e8e8e; width: 5px; height: 5px; border-radius: 5px; left: 0; top: 7px;}

.t_sch_area_box{ background: #fff; padding: 20px; margin-bottom: 20px; border-radius: .8rem;}
.t_sch_area{ display: flex; justify-content: space-between; align-items: center;}
.t_sch_area div{ display: flex; gap: 5px;}
.t_sch_area div .sel_sch{ width: 185px;}
.t_sch_area div .inp_sch_icon{ width: 25rem;}

.t_sch_area_box.row{ display: flex; align-items: center; padding: 14px 20px;}
.t_sch_area_box.row.top{ align-items:normal;}
.t_sch_area_box.row.top .t_sch_tit{ margin-top: 2px;}

.t_sch_area_box .inp_cal{ min-width: 14rem;}

.t_sch_tit{ font-size: 1.9rem; font-weight: 700;}
.t_sch_tit.r_dot{ position: relative; margin-right: 30px;}
.t_sch_tit.r_dot::after{ content: ""; position: absolute; height: 23px; width: 1px; margin-left: 16px;}

.tree_row_list{ border: 1px solid #646464; margin-top: 10px; display: flex; border-radius: .6rem;}
.tree_row_list > li{ padding: 15px; height: 200px; flex: 1; overflow: auto;}
.tree_row_list > li:not(:last-child){ border-right: 1px solid #646464;}

.tree_row_list ul{ position: relative;}
.tree_row_list ul li{ margin-bottom: 5px;}

.tree_row_list input[type=checkbox]{ margin-right: 4px;}
.tree_row_list label{ font-size: 15px;}

.tree_row_list li:not(:last-child) ul li{ background: url("../images/sub/arr_right01.png") no-repeat right center;}

/* 조회기간 */
.t_sch_day{ width: 100%; display: flex; gap: 1rem; align-items: center;}

/* 자료구분 */
.t_sch_chk{ width: 100%; display: flex; justify-content: space-between;}
.t_sch_chk.flex_s{ justify-content: flex-start; gap: 30px;}
.t_sch_chk.flex_if{ display: inline-flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start;}
.t_sch_chk.flex_if > span{ margin-right: 1rem;}
.t_sch_chk label{ font-size: 1.4rem;}

.flex_if4{ display: inline-flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start;}
.flex_if4 > span{ width: calc(25% - 10px);}

.flex_if5{ display: inline-flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start;}
.flex_if5 > span{ width: calc(20% - 10px);}

.area_search{ position: absolute; right: 20px; bottom: 20px;}

#pSearchNm{}

/* 검색 조건 : 검색 유형 */
.t_sch_pop{cursor: pointer;}
.t_sch_pop:hover {background-color:#dae7f2; cursor: pointer;}

.t_sch_type.t01{}
.t_sch_type.t02{}
.t_sch_type.t03{}
.t_sch_type.t04{}
.t_sch_type.t05{}
.t_sch_type.t06{}
.t_sch_type.t07{}
.t_sch_type.t09{}
.t_sch_type.t10{}
.t_sch_type.t11{}

.tw_sub_search{ background: #f4f4f8; padding: 10px 20px;}
.tw_graph_wrap{ border-top: 2px solid #3456c5;}
.tw_graph_top{ padding: 8px 20px; border: 1px solid #C6C6C6; display: flex; justify-content: space-between;}

.tw_sub_search + .tw_graph_wrap{ margin-top: 10px;}


.tw_graph_type_list{ display: flex; gap: 5px;}

.tw_graph{ border-right: 1px solid #C6C6C6; border-left: 1px solid #C6C6C6; border-bottom: 1px solid #C6C6C6; padding: 10px;}

.btn_tw_graph_type{ display: inline-block; border: 1px solid #cecece; width: 34px; height: 30px;}
.btn_tw_graph_type.type01{ background: url("../images/sub/gh_type01.png") no-repeat center;}
.btn_tw_graph_type.type02{ background: url("../images/sub/gh_type02.png") no-repeat center;}
.btn_tw_graph_type.type03{ background: url("../images/sub/gh_type03.png") no-repeat center;}

/*#################################### 통합검색 : 속성별 검색 ####################################*/
.total_search_prope_cont{}
.tspc_top{ text-align: center; padding: 4.3rem 0 0 0;}
.tspc_top .text01{ font-size: 2.5rem; font-weight: 700; color: #063a74;}
.tspc_top .text02{ font-size: 4rem; font-weight: 700;}
.tspc_top .text03{ font-size: 1.9rem; margin: 2.6rem 0 4rem 0;}

.tspc_cont_wrap{ margin-top: 12rem;}
.tspc_cont{ display: flex; gap: 9.5rem; align-items: center;}

.sspc_tit{ font-size: 3.2rem; font-weight: 700;}

.tspc_cont .tspc_text_list dl{ margin-top: 3.6rem;}
.tspc_cont .tspc_text_list dl dt{ font-size: 2.1rem; font-weight: 700; padding-left: 3.5rem; background-repeat: no-repeat; background-position: left 0 center; margin-bottom: .8rem;}
.tspc_cont .tspc_text_list dl dd{ position: relative; font-size: 17px; margin: 0 0 .6rem 3.2rem; padding-left: 1.4rem; letter-spacing: -1px;}
.tspc_cont .tspc_text_list dl dd::before{ content: ""; position: absolute; background: #8e8e8e; width: .5rem; height: .5rem; border-radius: .5rem; left: 0; top: .9rem;}

.tspc_cont .tspc_text_list dl .ex{ font-size: 1.7rem; color: #555;}
.tspc_cont .tspc_text_list dl dd span{}

.tspc_cont .tspc_text_list dl ul{ margin-top: .6rem;}
.tspc_cont .tspc_text_list dl ul li{ color: #555;}

.ts_img_box{ border-radius: 1.2rem; overflow: hidden;}

.btn_to_gis_go{ height: 5.6rem; width: 26rem; font-size: 1.9rem;}

.tspc_cont.ts01 dl{}
.tspc_cont.ts01 .tspc_text_list dl:nth-child(1) dt{ background-image: url("../images/sub/ts01_blit01.png");}
.tspc_cont.ts01 .tspc_text_list dl:nth-child(2) dt{ background-image: url("../images/sub/ts01_blit02.png");}
.tspc_cont.ts01 .tspc_text_list dl:nth-child(3) dt{ background-image: url("../images/sub/ts01_blit03.png");}

.tspc_cont.ts02 .tspc_text_list dl:nth-child(1) dt{ background-image: url("../images/sub/ts02_blit01.png");}
.tspc_cont.ts02 .tspc_text_list dl:nth-child(2) dt{ background-image: url("../images/sub/ts02_blit02.png");}
.tspc_cont.ts02 .tspc_text_list dl:nth-child(3) dt{ background-image: url("../images/sub/ts02_blit03.png");}

.tspc_cont + .tspc_cont{ margin-top: 8rem;}

@media (max-width: 766px) {
	.tspc_top .text01{ margin-bottom: 1.6rem;}
	.tspc_top .text02{ line-height: 1.2;}
	.tspc_cont{ flex-direction: column; gap: 3rem;}
	.tspc_cont.ts02 .tspc_textlist_wrap{ order: 2;}
	.tspc_cont.ts02 .ts_img_box{ order: 1;}
}

/* Contents */
.wt_description_area{ display: flex; flex-direction: column; gap: 6rem;}

.wt_description_area > .wt_conts_area{ display: flex; flex-direction: column; gap: 3rem;}
.wt_description_area > .wt_conts_area > .wt_conts_area{ display: flex; flex-direction: column; gap: 1rem;}
/* 단독 */
.wtsm_conts_area{ display: flex; flex-direction: column; gap: 1rem;}
.wtsm_conts_area .desc_pm{ margin: 0 0 0 1.9rem;}
.wtsm_conts_area .info_text_list{ margin: 0 0 0 1.8rem;}

.desc_pm{ font-size: 1.7rem; line-height: 2.6rem;}

.wt_conts_area > .wt_conts_area > .desc_pm{ margin: 0 0 0 2.1rem;}

.wt_conts_area > .wt_conts_area > .info_text_list{ margin: 0 0 0 1.8rem;}
.info_text_list{ }
.info_text_list > li{ font-size: 1.7rem; position: relative; /* color: var(--txt-sub-color); */ text-align: left;}
.info_text_list > li::before { position: absolute; top: 0; left: 0;}
.info_text_list > li + li { margin-top: var(--ce-spacer-1);}
.info_text_list > li .info_text{ margin-top: var(--ce-spacer-2);}

.info_text_list > li > b{}
.info_text_list.dot > li{ padding-left: var(--ce-spacer-3);}
.info_text_list.dot > li::before{ content: "•";}
.info_text_list.dash > li{ padding-left: 1.4rem;}
.info_text_list.dash > li::before{ content: "-";}

.info_text_list.blue > li > strong,
.info_text_list.blue > li > b,
.info_text_list.blue > li::before{ color: #003675;}

.info_text_list.vcon li{ padding-left: 3.2rem;}
.info_text_list.vcon li::before{ content: ""; display: inline-flex; width: 2.4rem; height: 2.4rem; border-radius: 2.4rem; background-color: #fff; border: 1px solid #94baff;}
.info_text_list.vcon li::after{ content: ""; position: absolute; width: 1rem; height: .9rem; background: url("../images/sub/v_icon.svg") no-repeat; left: .7rem; top: .8rem;}
.info_text_list.vcon li:not(:first-child){ margin-top: 1rem;}

/* 통합검색 전용 Tel Info */
.ts_rep_info_wrap{ height: 7rem; border-radius: 1rem; border: 1px solid #d8d8d8; background-image: url("../images/common/icon_rep_tel.svg"); background-size: 3.6rem; background-repeat: no-repeat; background-position: left 2.5rem center; background-color: #eff5ff; margin-top: 6.4rem; font-size: 1.5rem; padding: 0 2.5rem 0 8.7rem; display: flex; align-items: center; justify-content: space-between;}
.ts_rep_info_wrap ul{ display: flex; gap: 5rem;}
.ts_rep_info_wrap ul li{ position: relative;}
.ts_rep_info_wrap ul li:not(:first-child):before{ content: ""; position: absolute; width: 1px; height: 2rem; background-color: #d8d8d8; left: -2.5rem;}
.ts_rep_info_wrap ul li span{ margin-right: 1.5rem;}
.ts_rep_info_wrap .in_txt{ font-size: 1.3rem; color: #555;}

/*################################## SUB Main 공통 ##################################*/
.sub_main_wrap{ min-width: 1316px; }
.sub_main_top_cont{ display: flex; justify-content: space-between;}
.sub_main_cont{ width: 95rem;}
.sub_main_side{ width: 33.4rem;}
.sub_main_side .side_tree{}
.sub_main_side .side_tree li{}
.sub_main_side .side_tree li:not(:first-child){ margin-top: 1.2rem;}

@media (max-width: 1220px) {
	.side_tree.sub03,
	.side_tree.sub05{ display: none;}
	.opera_link_wrap ul{ width: 950px;}
}


.st_side_item{ position: relative; border-radius: 1.2rem;}
/* 데이터맵 */
.st_side_item.datamap{ background-image: url("../images/sub/st_side_datamap.png"); background-repeat: no-repeat; background-position: left 1.7rem center; display: flex; align-items: center;}

/* 통합GIS 서비스 */
.st_side_item.twgis{ background-image: url("../images/sub/st_side_twgis.png"); background-repeat: no-repeat; background-position: bottom 2.5rem center; padding-top: 2.6rem;}

/* 법령/제도 안내 */
.st_side_item.lawsys{ background-image: url("../images/sub/st_side_lawsys.png"); background-repeat: no-repeat; background-position: left 2.8rem center; display: flex; align-items: center;}

/* 최신 공지사항 */
.st_side_item.stnews{ height: 14rem; padding: 2.8rem 1.6rem 1.6rem 1.6rem;}

/* 주제별 운영현황 */
.st_side_item.oper{ background-image: url("../images/sub/st_side_oper.png"); background-repeat: no-repeat; background-position: left 2.8rem center; display: flex; align-items: center;}

.btn_sidemove{ position: absolute; display: inline-block; width: 3.2rem; height: 3.2rem; border-radius: 3.2rem; background-repeat: no-repeat; background-position: center;}
/*
.btn_sidemove.pagego{ background-image: url("../images/common/arr_common_right.svg"); background-size: 26px 26px;}
*/

.st_side_item .btn_sidemove{ top: 2.4rem; right: 3.2rem;}
.st_side_item.stnews .btn_sidemove{ top: 2.7rem; right: 3.2rem;}

.lucidblue{ background-color: #0074e5;}
.seablue{ background-color: #7abeff;}
.skyblue{ background-color: #95dffb;}
.grayblue{ background-color: #d9e8ed;}

.skyblue .btn_sidemove{ background-color: #61d1fb;}
.seablue .btn_sidemove{ background-color: #51aaff;}
.lucidblue .btn_sidemove{ background-color: #1e90ff;}
.grayblue .btn_sidemove{ background-color: #bfd6de;}


.btn_sidemove:before,
.btn_sidemove:after{
    display: none;
    content: "";
    position: absolute;
    right: 3px;
    top: 50%;	
    transform: translateY(-50%);
    transition: opacity 0.2s, margin 0.2s;}

.btn_sidemove:before {
    width: 26px;
    height: 26px;
    background: url("../images/common/arr_common_right.svg") 0 0;
    background-size: 100% 100%;
}

.btn_sidemove:after {
    width: 26px;
    height: 26px;
    background: url("../images/common/arr_common_right.svg") 0 0;
    background-size: 100% 100%;
}

.btn_sidemove.newwin:before,
.btn_sidemove.newwin::after{ right: 4px; width: 23px; height: 23px; background-image: url("../images/common/newwin_wh.svg");}

.side_tree.sub02 .datamap .btn_sidemove.pagego:before,
.side_tree.sub02 .datamap .btn_sidemove.pagego::after{ background-image: url("../images/common/arr_common_right_wh.svg");}

.btn_sidemove:before { display: block; opacity: 0;}

.btn_sidemove:after { display: block;}

.btn_sidemove:hover::before { 
	animation: outlinkAnimationBefore 0.3s forwards 0.3s;
}
@keyframes outlinkAnimationBefore {
	from {
		/* margin-top: max(2.64px, 0.2604166667vw); */
		margin-right: max(2.64px, 0.2604166667vw);
		opacity: 0;
	}
	to {
		margin-top: 0;
		margin-right: 0;
		opacity: 1;
	}
	}
	.btn_sidemove:hover::after {
	animation: outlinkAnimationAfter 0.3s forwards;
	}

	@keyframes outlinkAnimationAfter {
	from {
		opacity: 1;
		margin-top: 0;
		margin-right: 0;
	}
	to {
		opacity: 0;
		/* margin-top: calc(max(2.64px, 0.2604166667vw) * -1); */
		margin-right: calc(max(2.64px, 0.2604166667vw) * -1);
	}
}


.st_side_item.side_txt_wrap{}
.st_side_item .side_tit{ font-size: 2.1rem; font-weight: 700;}
.st_side_item .side_desc{ font-size: 1.7rem;}

.st_side_item.stnews .side_tit{ margin-left: 1.7rem;}

.st_side_item.datamap .side_txt_wrap{ margin-left: 11.4rem;}
.st_side_item.datamap .side_desc{ margin-top: .7rem;}
.st_side_item.twgis .side_txt_wrap{ margin-left: 3.4rem; color: #fff;}
.st_side_item.twgis .side_desc{ margin-top: 2rem;}
.st_side_item.lawsys .side_txt_wrap,
.st_side_item.oper .side_txt_wrap{ margin-left: 11.4rem;}
.st_side_item.lawsys .side_desc{ margin-top: .7rem;}

.st_side_item.stnews .bbs_wrap{ padding-left: 1.6rem; border-radius: .6rem; height: 5rem; background: #fff; margin-top: 1.8rem; display: flex; align-items: center;}
.st_side_item.stnews .bbs_wrap a{ position: relative; padding-left: 1.3rem; padding-right: 1.4rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.st_side_item.stnews .bbs_wrap a::before{ content: ""; position: absolute; background: #8e8e8e; width: .5rem; height: .5rem; border-radius: .5rem; left: 0; top: .9rem;}
.st_side_item.stnews .bbs_wrap a:hover{ text-decoration: underline;}

/*#################################### 시스템소개 ####################################*/


/*#################################### 데이터맵 ####################################*/
.side_tree.sub02 .datamap{ height: 29.3rem; background-image: url("../images/sub/st_side_datamap2.png"); background-position: bottom 3rem center; align-items: flex-start;}
.side_tree.sub02 .st_side_item.datamap .side_txt_wrap{ margin-left: 3.2rem; padding-top: 2.6rem; color: #fff;}
.side_tree.sub02 .st_side_item.datamap .side_desc{ margin-top: 2.2rem;}

.side_tree.sub02 .oper{ height: 11.4rem;}
.side_tree.sub02 .lawsys{ height: 11.4rem;}
.side_tree.sub02 .stnews{}

.datasearch_gis_wrap{ height: 32rem; border-radius: 1.2rem; background-color: #e4f0fc; background-image: url("../images/sub/sub_02_main_gis_bg.png"); background-repeat: no-repeat; background-position: right 0 top 0; padding: 4.4rem 0 0 4rem; margin-top: 2.6rem;}

.datasearch_gis_wrap .tit{ font-size: 3.2rem; line-height: 4.8rem; margin-bottom: 1rem;}
.datasearch_gis_wrap .desc{ line-height: 2.5rem; margin-bottom: 4rem;}

.btn_datasch_link{ width: 22rem; height: 4.4rem; border-radius: 1rem; background: url("../images/common/newwin.svg") no-repeat right 1.6rem center #fff; padding-left: 1.6rem; display: flex; align-items: center;}

.datasearch_shkkey_wrap{ margin-top: 2.6rem;}
.datasearch_shkkey_wrap > div{  height: 27.7rem; border-radius: 1.2rem; padding: 4rem 4rem 0 4.3rem;}

.datasearch_total{ background: url("../images/sub/sub_02_main_tw.png") no-repeat right 0 bottom 0 #d9e8ed; border: 1px solid #f0f0f0;}
.datasearch_total .tit{ font-size: 3.2rem; font-weight: 700;}
.datasearch_total .desc{ line-height: 2.5rem; margin-top: 1.5rem; margin-bottom: 2.5rem;}
.btn_datasch_go{ width: 14rem; height: 4.4rem; border-radius: 1rem; background: url("../images/common/arr_right.svg") no-repeat right 1.6rem center #fff; padding-left: 1.6rem; display: flex; align-items: center;}

.datasearch_keyword{ border: 1px solid #c6c6c6; background: url("../images/sub/sub_02_main_keyword.png") no-repeat top 0 right 0; display: none;}
.datasearch_keyword .tit{ font-size: 3.2rem;}

.datashk_keyword_list{ display: flex; gap: .8rem; flex-wrap: wrap; width: 38rem; margin-top: 4rem;}
.wk_tag{ font-size: 1.5rem; height: 3.2rem; border-radius: 3.2rem; padding: 0 1.3rem; background: #edf1f5; display: inline-flex; align-items: center;}

/* Wave BG */
.sub_03_main_bg{ height: 70rem; background:#003675; border-radius: 1.2rem; padding-top: 7rem;}
.wave_wrap{ }
.parallax > use {animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; opacity: 1;}
.parallax > use:nth-child(1) { animation-delay: -1s; animation-duration: 50s;}
.parallax > use:nth-child(2) { animation-delay: -105s; animation-duration: 60s;}
.parallax > use:nth-child(3) { animation-delay: -35s; animation-duration: 70s;}
.parallax > use:nth-child(4) { animation-delay: -15s; animation-duration: 80s;}
.parallax > use:nth-child(5) { animation-delay: -35s; animation-duration: 90s;}
.parallax > use:nth-child(6) { animation-delay: -30s; animation-duration: 95s;}
/*
.parallax > use:nth-child(7) { animation-delay: -48s; animation-duration: 90s;}
.parallax > use:nth-child(8) { animation-delay: -25s; animation-duration: 110s;}
*/
@keyframes move-forever {
	0% {
		transform: translate3d(-90px,0,0);
	}
	100% {
		transform: translate3d(85px,0,0);
	}
}

.side_tree.sub03 .datamap{ height: 14rem;}
.side_tree.sub03 .twgis{ height: 25rem;}
.side_tree.sub03 .lawsys{ height: 14rem;}
.side_tree.sub03 .stnews{}

.submain_slogan{ font-size: 3.2rem;}
.txt_marki{ position: relative;}
.txt_marki::before{ content: ""; position: absolute; width: 100%; height: 1.8rem; background: #dee9fc; bottom: -.2rem; z-index: -1;}

.sub03_main .sub_main_cont{ display: flex; flex-direction: column; justify-content: space-between;}

.sub_03_main_cont{ position: relative; height: 70rem; /* background: url("../images/sub/sub_03_main_bg.png") no-repeat left 0 top 0; */ border-radius: 1.2rem; overflow: hidden;}
.sub_03_main_cont::before{ content: ""; position: absolute; width: 69.2rem; height: 68.3rem; top: 0; left: 50%; transform: translateX(-50%); background: url("../images/sub/sub_03_main_center_img.png") no-repeat;}

.sub03_cont_tit{ display: inline-block; font-size: 2.5rem; font-weight: 700; text-align: center; color: #003675; position: absolute; top: 24.6rem; left: 50%; transform: translateX(-50%); padding-left: .6rem; width: 18.8rem; height: 18.8rem; display: flex; justify-content: center; flex-direction: column; align-items: center;}
.sub03_cont_tit span{ display: inline-flex;}

.sub_03_main_cont + .tbl_list_top{ margin-top: 6rem;}

.twinfo_txt_list{}
.twinfo_txt_list li{ position: absolute;}
.twinfo_txt_list li:nth-child(1){ left: 16.4%; top: 5.9rem;}
.twinfo_txt_list li:nth-child(2){ left: 60%; top: 5.9rem;}
.twinfo_txt_list li:nth-child(3){ left: 7.5%; top: 19.1rem;}
.twinfo_txt_list li:nth-child(4){ left: 69%; top: 19.1rem;}
.twinfo_txt_list li:nth-child(5){ left: 4.6%; top: 32.4rem;}
.twinfo_txt_list li:nth-child(6){ left: 72%; top: 32.5rem;}
.twinfo_txt_list li:nth-child(7){ left: 12%; top: 45.7rem;}
.twinfo_txt_list li:nth-child(8){ left: 65%; top: 45.7rem;}
.twinfo_txt_list li:nth-child(9){ left: 38.9%; top: 54.2rem;}






.twinfo_txt_box{ background: #003675; border: 1px solid #2a5c96; border-radius: .6rem; padding: 1.5rem 2.5rem; display: flex; flex-direction: column; justify-content: center; box-shadow: 10px 10px 16px rgba(0, 0, 0, .2); transition: all 0.3s ease-in;}
.twinfo_txt_box:hover,
.twinfo_txt_box.on{ background: #2768ff; box-shadow: 10px 10px 16px rgba(0, 0, 0, .3);}
.twinfo_txt_box.on .tag_box a{ color: #d3e1fb !important;}
.twinfo_txt_box.on .twi_link::after{ background: url("../images/sub/icon_data_link_on.png") left 0 top 0 !important;}

.twinfo_txt_list li:nth-child(9) .twinfo_txt_box{ align-items: center;}

.twinfo_txt_box .twi_link{ font-size: 1.9rem; font-weight: 700; color: #fff; position: relative; display: inline-flex; gap: 1.2rem;}
.twinfo_txt_box .twi_link::after{ content: ""; width: 2.6rem; height: 2.6rem; background: url("../images/sub/icon_data_link.png") left 0 top 0; display: inline-block;}
.twinfo_txt_box .twi_link:hover{ text-decoration: underline;}

.twinfo_txt_box .tag_box{ font-size: 1.3rem;  margin-top: .6rem; width: 25rem; display: flex; flex-wrap: wrap; gap: .4rem;}
.twinfo_txt_box .tag_box a{ color: #a7c4f7;}
.twinfo_txt_box .tag_box a:hover{ text-decoration: underline;}
.twinfo_txt_box:hover .tag_box a{ color: #d3e1fb;}
.twinfo_txt_box:hover .twi_link{}

.twinfo_txt_box .twi_link.on{ text-decoration: underline !important;}
.twinfo_txt_box .tag_box a.on{ text-decoration: underline !important; color: #d3e1fb;}

.twinfo_txt_box:hover .twi_link::after{ background: url("../images/sub/icon_data_link_on.png") left 0 top 0;}

.twinfo_txt_box .box_cy{ position: absolute; width: 1.6rem; height: 1.6rem; left: -.8rem; top: 50%; transform: translateY(-50%);}
.twinfo_txt_box .box_cy::before{ content: ""; position: absolute; width: 100%; height: 100%; border-radius: 100%; background-color:rgba(255, 255, 255, .3); opacity:1; display: inline-block;}
.twinfo_txt_box .box_cy::after{ content: ""; position: absolute; width: .6rem; height: .6rem; border-radius: .6rem; background-color: #fff; top: .5rem; left: .5rem;}


.twinfo_txt_list li:nth-child(9) .twinfo_txt_box .tag_box{ width: 24rem;}
.twinfo_txt_list li:nth-child(9) .twinfo_txt_box .box_cy{ left: calc(50% - .7rem); top: 0;}
.twinfo_txt_list li:nth-child(9) .twinfo_txt_box .tag_box{ justify-content: center;}

/* Move Effect */
.twinfo_txt_list li:nth-child(1) .twinfo_txt_box .box_cy,
.twinfo_txt_list li:nth-child(3) .twinfo_txt_box .box_cy,
.twinfo_txt_list li:nth-child(5) .twinfo_txt_box .box_cy,
.twinfo_txt_list li:nth-child(7) .twinfo_txt_box .box_cy{ left: auto; right: -.8rem;}

.twinfo_txt_list li:nth-child(1){ animation: move_fade_right 0.7s cubic-bezier(0.33, 1, 0.68, 1) both; }
.twinfo_txt_list li:nth-child(3){ animation: move_fade_right 1s cubic-bezier(0.33, 1, 0.68, 1) both; }
.twinfo_txt_list li:nth-child(5){ animation: move_fade_right 1.4s cubic-bezier(0.33, 1, 0.68, 1) both; }
.twinfo_txt_list li:nth-child(7){ animation: move_fade_right 1.7s cubic-bezier(0.33, 1, 0.68, 1) both; }

.twinfo_txt_list li:nth-child(2){ animation: move_fade_left 1s cubic-bezier(0.33, 1, 0.68, 1) both; }
.twinfo_txt_list li:nth-child(4){ animation: move_fade_left 1.4s cubic-bezier(0.33, 1, 0.68, 1) both; }
.twinfo_txt_list li:nth-child(6){ animation: move_fade_left 1.7s cubic-bezier(0.33, 1, 0.68, 1) both; }
.twinfo_txt_list li:nth-child(8){ animation: move_fade_left 2.5s cubic-bezier(0.33, 1, 0.68, 1) both; }

.twinfo_txt_list li:nth-child(9){ animation: move_fade_up 2s cubic-bezier(0.33, 1, 0.68, 1) both; }



@media (min-width: 766px) {
	@keyframes move_fade_left {
		0% {
			opacity: 0;
			transform: translateX(150%) scale(1.05);
		}
		100% {
			opacity: 1;
			transform: translateX(0) scale(1);
		}
	}
	
	@keyframes move_fade_right {
		0% {
			opacity: 0;
			transform: translateX(-150%) scale(1.05);
		}
		100% {
			opacity: 1;
			transform: translateX(0) scale(1);
		}
	}
	
	@keyframes move_fade_up {
		0% {
			opacity: 0;
			transform: translateY(150%) scale(1.05);
		}
		100% {
			opacity: 1;
			transform: translateY(0) scale(1);
		}
	}	
	
}

@media (max-width: 1200px) {
	.sub_03_main_cont{ height: auto; border-radius: .6rem;}
	.sub_03_main_cont::before{ display: none;}
	.sub03_cont_tit{ display: none;}
	.twinfo_txt_list li{ position: relative; left: auto !important; top: auto !important;}
	.twinfo_txt_list li:not(:first-child){ margin-top: 2rem;}
	.twinfo_txt_list li:nth-child(9) .twinfo_txt_box{ align-items: flex-start;}
	.twinfo_txt_list li:nth-child(9) .twinfo_txt_box .tag_box{ justify-content: flex-start;}
	
	.twinfo_txt_box{ box-shadow: none !important;}
	.twinfo_txt_box .tag_box{ width: 100%;}
	.twinfo_txt_box .box_cy{ display: none;}	

	.sub_03_main_bg{ display: none;}
}


/*
.twinfo_txt_list li:nth-child(1){ animation: move_fade_left 1s cubic-bezier(0.25, 1.5, 0.5, 1) both;}
.twinfo_txt_list li:nth-child(2){ animation: move_fade_left 1.5s cubic-bezier(0.25, 1.5, 0.5, 1) both;}
.twinfo_txt_list li:nth-child(3){ animation: move_fade_left 2s cubic-bezier(0.25, 1.5, 0.5, 1) both;}
.twinfo_txt_list li:nth-child(4){ animation: move_fade_left 2.5s cubic-bezier(0.25, 1.5, 0.5, 1) both;}

.twinfo_txt_list li:nth-child(5){ animation: move_fade_up 2s cubic-bezier(0.25, 1.5, 0.5, 1) both;}

.twinfo_txt_list li:nth-child(6){ animation: move_fade_right 2s cubic-bezier(0.25, 1.5, 0.5, 1) both;}
.twinfo_txt_list li:nth-child(7){ animation: move_fade_right 1.5s cubic-bezier(0.25, 1.5, 0.5, 1) both;}
.twinfo_txt_list li:nth-child(8){ animation: move_fade_right 1s cubic-bezier(0.25, 1.5, 0.5, 1) both;}
.twinfo_txt_list li:nth-child(9){ animation: move_fade_right 0.7s cubic-bezier(0.25, 1.5, 0.5, 1) both;}

@keyframes move_fade_left {
	0% {
		opacity: 0;
		transform: translateX(200%) scale(1.1);
	}
	80% {
		transform: translateX(-10%) scale(1.05);
	}
	100% {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

@keyframes move_fade_right {
	0% {
		opacity: 0;
		transform: translateX(-200%) scale(1.1);
	}
	80% {
		transform: translateX(10%) scale(1.05);
	}
	100% {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

@keyframes move_fade_up {
	0% {
		opacity: 0;
		transform: translateY(200%) scale(1.1);
	}
	80% {
		transform: translateY(-10%) scale(1.05);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}
*/
/*
.twinfo_txt_list li:nth-child(1){ animation: move_fade_left 1.4s cubic-bezier(0.165, 0.84, 0.44, 1) both;}
.twinfo_txt_list li:nth-child(2){ animation: move_fade_left 2.2s cubic-bezier(0.165, 0.84, 0.44, 1) both;}
.twinfo_txt_list li:nth-child(3){ animation: move_fade_left 3s cubic-bezier(0.165, 0.84, 0.44, 1) both;}
.twinfo_txt_list li:nth-child(4){ animation: move_fade_left 3.8s cubic-bezier(0.165, 0.84, 0.44, 1) both;}

.twinfo_txt_list li:nth-child(5){ animation: move_fade_up 4s cubic-bezier(0.165, 0.84, 0.44, 1) both;}

.twinfo_txt_list li:nth-child(6){ animation: move_fade_right 3.4s cubic-bezier(0.165, 0.84, 0.44, 1) both;}
.twinfo_txt_list li:nth-child(7){ animation: move_fade_right 2.6s cubic-bezier(0.165, 0.84, 0.44, 1) both;}
.twinfo_txt_list li:nth-child(8){ animation: move_fade_right 1.8s cubic-bezier(0.165, 0.84, 0.44, 1) both;}
.twinfo_txt_list li:nth-child(9){ animation: move_fade_right 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;}

@keyframes move_fade_left {
	0% {
		opacity: 0;
		-webkit-transform: translateX(125%);
		transform: translateX(125%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

@keyframes move_fade_right {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-125%);
		transform: translateX(-125%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

@keyframes move_fade_up {
	0% {
		opacity: 0;
		-webkit-transform: translateY(125%);
		transform: translateY(125%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
*/

.sub_main_bottom{ margin: 7rem 0;}
.opera_link_wrap{}
.opera_link_wrap .opera_tit{ font-size: 2.5rem; font-weight: 700; margin-bottom: 1.8rem;}
.opera_link_wrap ul{ display: flex; justify-content: space-between; gap: .8rem;}
.opera_link_wrap ul li{ flex: 1;}
.opera_link_wrap ul li a{ border-radius: 1.2rem; background-color: #edf1f5; height: 7.2rem; overflow: hidden; background-position: left top; background-repeat: no-repeat; display: flex; justify-content: center; align-items: center;}
.opera_link_wrap ul li a span{ position: relative; font-size: 1.9rem; font-weight: 700; padding-right: 2.2rem;}
.opera_link_wrap ul li a span::after{ content: ""; position: absolute; width: 2rem; height: 2rem; background: url("../images/common/arr_common_right.svg") no-repeat; right: 0; top: .4rem; transition: all 0.3s ease-in;}

.opera_link_wrap ul li a:hover span{ color: #fff;}
.opera_link_wrap ul li a:hover span::after{ content: ""; position: absolute; width: 2rem; height: 2rem; background: url("../images/common/arr_common_right_wh.svg") no-repeat; right: -.6rem; top: .4rem;}

.opera_link_wrap ul li:nth-child(1) a:hover{ background-image: url("../images/sub/opera_bg01.png");}
.opera_link_wrap ul li:nth-child(2) a:hover{ background-image: url("../images/sub/opera_bg02.png");}
.opera_link_wrap ul li:nth-child(3) a:hover{ background-image: url("../images/sub/opera_bg03.png");}
.opera_link_wrap ul li:nth-child(4) a:hover{ background-image: url("../images/sub/opera_bg04.png");}
.opera_link_wrap ul li:nth-child(5) a:hover{ background-image: url("../images/sub/opera_bg05.png");}
.opera_link_wrap ul li:nth-child(6) a:hover{ background-image: url("../images/sub/opera_bg06.png");}
.opera_link_wrap ul li:nth-child(7) a:hover{ background-image: url("../images/sub/opera_bg07.png");}

/*#################################### 법령/제도 ####################################*/

/* 법령/제도 Sub Main*/
.side_tree.sub04 .oper{ height: 11.4rem;}
.side_tree.sub04 .datamap{ height: 14.7rem;}
.side_tree.sub04 .twgis{ height: 26rem;}
.side_tree.sub04 .stnews{ height: 14rem;}

.sub_main_top_cont + .legalsys_wrap{ margin-top: 6rem;}

.legalsys_wrap{ height: 52rem; border-radius: 1.2rem; overflow: hidden;}
.legalsys_top{ border-radius: 1.2rem 1.2rem 0 0; background: #edf1f5; height: 12.8rem; padding: 0 4rem 0 4rem; display: flex; justify-content: space-between; align-items: center;}
.legalsys_top .schSet{ gap: 1rem;}
.legalsys_top .schSet input[type=text]{ width: 42rem;}
.legal_sys_tit{ font-size: 2.5rem;}

.legalsys_cont{ margin-top: -.8rem; border-radius: 1.2rem; border: 4px solid #edf1f5; background: url("../images/sub/legalsys_bg.png") no-repeat bottom 3.6rem center #fff; height: 40rem; padding: .8rem 4rem 4rem 4rem;}

.legalsys_tab_wrap{ display: flex; height: 10.2rem; justify-content: center;}

.legalsys_tab{ display: flex; flex-wrap: wrap; justify-items: center; align-items: center; gap: 1.2rem;}
.legalsys_tab li{}
.legalsys_tab li button{ position: relative; padding: 0 30px; height: 4.4rem; min-width: 8rem; font-weight: 700; color: #555; border-radius: .6rem; background-color: #fff; border: 1px solid #e4e4e4; display: flex; gap: 4px; justify-content: center; align-items: center;}
.legalsys_tab li button:hover{ background-color: #edf1f5;}
.legalsys_tab li button.on{ background-color: #246BEB !important; color: #fff;}

.legalsys_tbl_wrap{ height: 24rem; overflow: auto;}
.law_tbl{ border-top: 2px solid #1d1d1d; table-layout: fixed; width: 100%;}
.law_tbl th{ font-weight: 700; background: #edf1f5;}
.law_tbl th,
.law_tbl td{ padding: 1.6rem 0; text-align: center; border-bottom: 1px solid #d8d8d8;}
.law_tbl .subject{ text-align: left;}
.law_tbl .subject a{ width: 100%; display: inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.law_tbl .subject a:hover{ text-decoration: underline;}

/* 법령/제도 */
.law_top_wrap{ padding: 3rem; border-radius: 1.2rem; display: flex; flex-wrap: wrap; gap: 1.6rem; margin-bottom: 6rem;
	background-image: url("../images/sub/law_top_bg02.png"), url("../images/sub/law_top_bg.png");
	background-repeat: no-repeat, no-repeat;
	background-position: right 0 bottom 0, top 0 left 0;
	background-size: auto, cover;
}
.law_info_card{ width: calc(33.33% - 1.1rem); position: relative; height: 19rem; border-radius: 1.2rem; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between;
	background-color: #fff;
	background-position: right 2rem bottom 2rem;
	background-repeat: no-repeat;
}

.law_info_card .tit{ font-size: 2rem; font-weight: 700;}
.law_info_card .desc{ font-size: 1.5rem; color: #555;}

/* 수자원 */
.law_top_wrap.law_sw{}
.law_top_wrap.law_sw .law_info_card.ca01{ background-image: url("../images/sub/law_sw_icon01.png");}
.law_top_wrap.law_sw .law_info_card.ca02{ background-image: url("../images/sub/law_sw_icon02.png");}
.law_top_wrap.law_sw .law_info_card.ca03{ background-image: url("../images/sub/law_sw_icon03.png");}

/* 수질 */
.law_top_wrap.law_sj{}
.law_top_wrap.law_sj .law_info_card.ca01{ background-image: url("../images/sub/law_sj_icon01.png");}
.law_top_wrap.law_sj .law_info_card.ca02{ background-image: url("../images/sub/law_sj_icon02.png");}
.law_top_wrap.law_sj .law_info_card.ca03{ background-image: url("../images/sub/law_sj_icon03.png");}

/* 하천관리 */
.law_top_wrap.law_hc{}
.law_top_wrap.law_hc .law_info_card.ca01{ background-image: url("../images/sub/law_hc_icon01.png");}
.law_top_wrap.law_hc .law_info_card.ca02{ background-image: url("../images/sub/law_hc_icon02.png");}
.law_top_wrap.law_hc .law_info_card.ca03{ background-image: url("../images/sub/law_hc_icon03.png");}

/* 상수도 */
.law_top_wrap.law_sd{}
.law_top_wrap.law_sd .law_info_card.ca01{ background-image: url("../images/sub/law_sd_icon01.png");}
.law_top_wrap.law_sd .law_info_card.ca02{ background-image: url("../images/sub/law_sd_icon02.png");}
.law_top_wrap.law_sd .law_info_card.ca03{ background-image: url("../images/sub/law_sd_icon03.png");}
.law_top_wrap.law_sd .law_info_card.ca04{ background-image: url("../images/sub/law_sd_icon04.png");}
.law_top_wrap.law_sd .law_info_card.ca05{ background-image: url("../images/sub/law_sd_icon05.png");}

/* 하수도 */
.law_top_wrap.law_hd{}
.law_top_wrap.law_hd .law_info_card.ca01{ background-image: url("../images/sub/law_hd_icon01.png");}
.law_top_wrap.law_hd .law_info_card.ca02{ background-image: url("../images/sub/law_hd_icon02.png");}
.law_top_wrap.law_hd .law_info_card.ca03{ background-image: url("../images/sub/law_hd_icon03.png");}

/* 지하수 */
.law_top_wrap.law_jh{}
.law_top_wrap.law_jh .law_info_card.ca01{ background-image: url("../images/sub/law_jh_icon01.png");}
.law_top_wrap.law_jh .law_info_card.ca02{ background-image: url("../images/sub/law_jh_icon02.png");}
.law_top_wrap.law_jh .law_info_card.ca03{ background-image: url("../images/sub/law_jh_icon03.png");}
.law_top_wrap.law_jh .law_info_card.ca04{ background-image: url("../images/sub/law_jh_icon04.png");}
.law_top_wrap.law_jh .law_info_card.ca05{ background-image: url("../images/sub/law_jh_icon05.png");}

/* 가뭄 */
.law_top_wrap.law_gm{}
.law_top_wrap.law_gm .law_info_card.ca01{ background-image: url("../images/sub/law_sj_icon01.png");}
.law_top_wrap.law_gm .law_info_card.ca02{ background-image: url("../images/sub/law_gm_icon02.png");}
.law_top_wrap.law_gm .law_info_card.ca03{ background-image: url("../images/sub/law_gm_icon03.png");}
.law_top_wrap.law_gm .law_info_card.ca04{ background-image: url("../images/sub/law_gm_icon04.png");}
.law_top_wrap.law_gm .law_info_card.ca05{ background-image: url("../images/sub/law_gm_icon05.png");}
.law_top_wrap.law_gm .law_info_card.ca06{ background-image: url("../images/sub/law_gm_icon06.png");}


.btn_law_site_link{ position: absolute; width: 2rem; height: 2rem; background-image: url("../images/common/newwin.svg"); background-repeat: no-repeat; background-position: right 0 center; top: 2.5rem; right: 2.8rem;}

.btn_law_site_link span{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; border: 0;}


@media (max-width: 1023px) {
	.law_info_card{ width: calc(50% - 1.1rem);}
}

@media (max-width: 766px) {
	.law_top_wrap{ padding: 1.5rem;}
	.law_info_card{ width: 100%; height: auto; padding: 1.5rem; justify-content: center; background-size: 14%; display: block;}
	.law_info_card .tit{ font-size: 1.9rem;}
	.law_info_card .desc{ margin-top: .8rem;}
	.btn_law_site_link { position: relative; top: auto; right: auto; width: auto; height: 3.6rem; border-radius: .6rem; background-color: #f0fbff; background-position: right 1.5rem center; display: inline-flex; align-items: center; margin-top: .8rem; padding: 0 5rem 0 1.5rem; font-size: 1.5rem;}
	.btn_law_site_link span{ position: relative; width: auto; height: auto; overflow: auto; display: inline-block;}
}


/*#################################### 커뮤니티 ####################################*/
.side_tree.sub05 .datamap{ height: 14.7rem;}
.side_tree.sub05 .twgis{ height: 27.8rem;}
.side_tree.sub05 .lawsys{ height: 11.9rem;}
.side_tree.sub05 .oper{ height: 11.9rem;}

.commty_top{ display: flex; justify-content: space-between;}
.commty_bbs_wrap{ width: 46rem; height: 32rem; border-radius: 1.2rem; padding: 2.8rem 4rem 0 4rem;}
.commty_bbs_wrap.noti{ border: .4rem solid #cdd7e4; background: url("../images/sub/commty_bg01.png") no-repeat right .4rem bottom .6rem;}
.commty_bbs_wrap.droom{ border: .4rem solid #efd9ed; background: url("../images/sub/commty_bg02.png") no-repeat right .4rem bottom .6rem;}

.commty_bbs_top{ display: flex; justify-content: space-between; align-items: center;}
.commty_tit{ font-size: 3.2rem; font-weight: 700;}
.btn_commty_more{ position: relative; font-size: 1.7rem; padding-right: 2.5rem; display: inline-block;}
.btn_commty_more::before,
.btn_commty_more::after{ content: ""; position: absolute; height: 2px; width: 1.6rem; background: #545454; right: 0; top: 50%; transform: translateY(-50%);}
.btn_commty_more::after{ transform: translateY(-50%) rotate(90deg);}

.commty_bbs_wrap ul{ margin-top: 3rem;}
.commty_bbs_wrap ul li{}
.commty_bbs_wrap ul li a{ display: block; width: 100%; font-weight: 700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.commty_bbs_wrap ul li a:hover{ text-decoration: underline;}
.commty_bbs_wrap ul li .date{ font-size: 1.5rem; margin-top: -.2rem;}
.commty_bbs_wrap ul li:not(:first-child){ margin-top: 1.4rem;}

.commty_bottom{ margin-top: 4.8rem; display: flex; justify-content: space-between;}
.commuty_faq_wrap{ width: 46rem;}

.commty_bottom .btn_commty_more{ margin-right: 1rem;}

.commuty_faq_cont{ height: 26.4rem; border-radius: 1.2rem; background: #eff5ff; margin-top: 1.6rem; padding: 3.6rem 4rem 0 4rem;}
.commuty_faq_cont ul{}
.commuty_faq_cont ul li{}
.commuty_faq_cont ul li:not(:first-child){ margin-top: 3.2rem;}
.commuty_faq_cont ul li p{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom: .2rem;}
.commuty_faq_cont ul li div{ position: relative; font-weight: 700; padding-left: 2rem; max-height: 3em; display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word;}
.commuty_faq_cont ul li div::before{ content: ""; position: absolute; width: 1.2rem; height: 1.3rem; background: url("../images/sub/commty_reply.png") no-repeat; left: 0; top: .4rem;}

.commuty_link_wrap{ width: 46rem; display: flex; padding-top: 4.5rem; padding-bottom: 1rem;}
.commuty_link_item{ padding: 0 4rem 0 4rem; text-align: center; flex: 1;}
.commuty_link_item.relsite{ border-right: 1px solid #e4e4e4;}
.commuty_link_item.sitemap{}

.commuty_link_item .tit{ font-size: 2.5rem; font-weight: 700; padding-top: 9.8rem; margin-bottom: 1.3rem;}
.commuty_link_item.relsite .tit{ background: url("../images/sub/commty_link01.png") no-repeat top 0 center;}
.commuty_link_item.sitemap .tit{ background: url("../images/sub/commty_link02.png") no-repeat top 0 center;}
.commuty_link_item .desc{ font-size: 1.5rem; margin-bottom: 2.8rem;}

.btn_commuty_link{ position: relative; background: #edf1f5; border-radius: .6rem; height: 4rem; padding-left: 2rem; display: flex; align-items: center;}
.btn_commuty_link::after{ content: ""; position: absolute; width: 1.6rem; height: 1rem; background: url("../images/sub/commuty_link_arr.png") no-repeat; right: 2rem; top: 50%; transform: translateY(-50%);}

/* 관련사이트 */
.family_site_sch_wrap{}

.family_site_list{}
.family_site_list li{ padding: 0 2.5rem; min-height: 9.4rem; border-radius: 1.2rem; border: 1px solid #d8d8d8; display: flex; align-items: center;}
.family_site_list li:not(:first-child){ margin-top: 1.2rem;}
.family_site_list li > span{}
.family_site_list li .site_name{ width: 24rem; margin-right: 2rem;}
.family_site_list li .site_info{ flex: 1; margin-right: 3rem;}
.family_site_list li .site_info .site_add{}
.family_site_list li .site_info .site_tel{ background: url("../images/common/ico_common_call.svg") no-repeat left 0 center; padding-left: 2.2rem;}

.btn_site_url{ border-radius: .6rem; background-color: #f0fbff; background-image: url("../images/common/icon_newwin.svg"); background-position: right 1.8rem center; background-repeat: no-repeat; height: 4.4rem; width: 21rem; padding-left: 1.8rem; display: flex; align-items: center;}

.btn_site_url:hover{ background-color: #d4f3fe;}

@media (max-width: 766px) {
	.family_site_sch_wrap{ width: 100%;}
	.family_site_list li{ padding: 2rem; flex-direction: column; align-items: self-start; gap: 1rem;}
	.family_site_list li .site_name{ width: 100%;}
	.family_site_list li .site_info{ flex: 1; margin-right: 0;}
	.family_site_list li > span{ width: 50%;}
	.family_site_list li > span a{ width: 100%;}
}

/* 사이트맵 */
.site_map_wrap{ background: url("../images/sub/sitemap_bg.png") no-repeat left 16rem bottom 0; padding-bottom: 10rem;}
.sitemap_tree{ display: flex; gap: 1.5rem;}
.sitemap_tree a{ display: block;}
.sitemap_tree a:hover{ text-decoration: underline;}
.sitemap_tree > li{ width: 20%; position: relative;}
.sitemap_tree .smp_dep1{ position: relative; background: #edf1f5; font-size: 1.9rem; height: 6rem; border-radius: .8rem; margin-bottom: 1rem; display: flex; justify-content: center; align-items: center;}

.sitemap_tree .smp_dep2 > li{ border: 1px solid #d8d8d8; border-radius: .5rem; min-height: 5.5rem; background-color:rgba(255, 255, 255, 0.8); opacity:1;}
.sitemap_tree .smp_dep2 > li:not(:first-child){ margin-top: 1rem;}
.sitemap_tree .smp_dep2 > li > a{ padding: 1.5rem 2.2rem; display: block; background-image: url("../images/common/arr_right.svg"); background-repeat: no-repeat; background-position: right 2rem center; height: 5.5rem;}
.sitemap_tree .smp_dep2 > li:hover{ background-color: #edf1f5;}
.sitemap_tree .smp_dep2 > li:hover > a{ font-weight: 700;}

.sitemap_tree .smp_dep2 > li.has_smpdep3{ padding: .8rem;}
.sitemap_tree .smp_dep2 > li.has_smpdep3 > a{ /* background-image: url("../images/common/arr_common_down.svg");*/ background-position: right 1rem center; height: 3.6rem; display: flex; align-items: center;}
.sitemap_tree .smp_dep2 > li.has_smpdep3{ background-color: #fff;}
/*
.sitemap_tree .smp_dep2 > li.has_smpdep3.on > a{ background-image: url("../images/common/arr_common_up_wh.svg"); background-position: right 1rem center; height: 4.8rem; background-color: #003675; color: #fff; border-radius: .5rem; font-weight: 700;}
*/

.sitemap_tree .smp_dep3{ font-size: 1.5rem; margin-top: .5rem;}
.sitemap_tree .smp_dep3 li:not(:first-child){ margin-top: .5rem;}
.sitemap_tree .smp_dep3 li{ position: relative;}
.sitemap_tree .smp_dep3 li::after{ content: ""; position: absolute; width: .4rem; height: .4rem; border-radius: .4rem; background: #003675; left: 1.9rem; top: 1.7rem;}
.sitemap_tree .smp_dep3 li a{ width: 50%; color: #555; padding: .6rem 0; width: 100%; height: 3.9rem; padding: 0 3rem; background-image: url("../images/common/arr_right.svg"); background-repeat: no-repeat; background-position: right 1rem center; border-radius: .5rem; display: flex; align-items: center;}
.sitemap_tree .smp_dep3 li a{ background-color: #edf1f5;}
.sitemap_tree > li:nth-child(3) .smp_dep3 li a{ background-position: right 2rem center;}

/*.sitemap_tree .smp_dep2 > li.has_smpdep3.on .smp_dep3{ display: block;}*/

.sitemap_tree li:nth-child(5) .smp_dep1{ background-image: url("../images/common/arr_right.svg"); background-repeat: no-repeat; background-position: right 2rem center;}

@media (max-width: 766px) {
	.sitemap_tree li:nth-child(2) .smp_dep1,
	.sitemap_tree li:nth-child(3) .smp_dep1,
	.sitemap_tree li:nth-child(4) .smp_dep1{ background-image: none;}
}

.sitemap_tree a.newwin{ background-image: url("../images/common/newwin.svg") !important}

.sitemap_tree li:nth-child(1) .smp_dep1::after,
.sitemap_tree li:nth-child(2) .smp_dep1::after,
.sitemap_tree li:nth-child(3) .smp_dep1::after,
.sitemap_tree li:nth-child(4) .smp_dep1::after,
.sitemap_tree li:nth-child(5) .smp_dep1::after{ position: absolute; font-family: 'Gmarket Sans'; font-weight: 700; font-size: 3.2rem; color: #b4c4d6; left: 50%; transform: translateX(-50%); top: -25px; width: max-content; height: 2.6rem; overflow: hidden; display: none;}

.sitemap_tree li:nth-child(1) .smp_dep1::after{ content: "01";}
.sitemap_tree li:nth-child(2) .smp_dep1::after{ content: "02";}
.sitemap_tree li:nth-child(3) .smp_dep1::after{ content: "03";}
.sitemap_tree li:nth-child(4) .smp_dep1::after{ content: "04";}
.sitemap_tree li:nth-child(5) .smp_dep1::after{ content: "05";}

@media (max-width: 766px) {
	.site_map_wrap{ background: none; padding-bottom: 0;}
	.sitemap_tree{ flex-direction: column;}
	.sitemap_tree > li{ width: 100%;}
	.sitemap_tree .smp_dep1{ margin-top: 2rem;}
}

/*#################################### 통합 검색 (Mobile) ####################################*/

.mobile_total_search_wrap{}
.mo_total_search{}

.mts_item_box{ background: #edf1f5; border-radius: 1.2rem;}
.mts_top{ height: 5rem; padding: 0 1.5rem; display: flex; align-items: center;}
.mts_top .tit{ font-size: 1.9rem; font-weight: 700;}
.mts_cont{ padding: .8rem 1.5rem 1.5rem 1.5rem;}

.mts_item_box + .mts_item_box{ margin-top: 2.4rem;}

.btn_mts_detail_selct{ font-size: 1.9rem; font-weight: 700; background: url("../images/common/arr_common_down.svg") no-repeat right 0 center; width: 100%; display: flex;}
.btn_mts_detail_selct.on{ background: url("../images/common/arr_common_up.svg") no-repeat right 0 center;}

.mts_detail_cont{ border-top: 1px solid #d8d8d8; padding: 1.5rem;}

.mts_item_box_sm{}
.mts_item_box_sm + .mts_item_box_sm{ margin-top: 1.6rem;}

.mts_sm_tit{ font-size: 1.7rem; font-weight: 700; padding: 0 .8rem; margin-bottom: 1rem;}

.btn_mts_area_selt{ width: 100%; height: 4.4rem; padding: var(--ce-select-pd-lg); background-color: #fff; background-image: url("../images/common/arr_common_down.svg"); background-repeat: no-repeat; background-position: center right var(--ce-select-rn-lg); border: 1px solid var(--ce-gray-60); border-radius: var(--ce-select-rd-lg); font-family: inherit; color: #555; opacity: 1; text-align: left;}

.btn_mts_area_selt.search{ background-image: url("../images/common/icon_common_search.svg");}

.btn_mts_area_selt.btn_sido{}
.btn_mts_area_selt.btn_sigun{}
.btn_mts_area_selt.btn_dong{}

.mts_inpt_search{ width: 100%; height: 4.4rem; padding: 0 .6rem 0 1.6rem; background-color: #fff; background-repeat: no-repeat; background-position: center right var(--ce-select-rn-lg); border: 1px solid var(--ce-gray-60); border-radius: var(--ce-select-rd-lg); font-family: inherit; color: #555; opacity: 1; display: flex; align-items: center; justify-content: space-between;}
.mts_inpt_search input[type=text]{ border: none; width: calc(100% - 4rem);}
.mts_inpt_search button{ width: 4rem; height: 4rem; background-image: url("../images/common/icon_common_search.svg"); background-repeat: no-repeat; background-position: center;}

.pop_mts_area_wrap{ position: fixed; width: calc(100% - 4rem); top: 10%; left: 50%; transform: translateX(-50%); border-radius: 1.2rem; background: #fff; border: 1px solid #717171; z-index: 99999; display: none;}
.pop_mts_cont{ padding: 2rem 1rem 2rem 2rem;}
.pop_mts_btn_area{ background: #edf1f5; padding: 1rem; display: flex; gap: 1rem; border-radius: 0 0 10px 10px;}
.pop_mts_btn_area .btn_pop_mts{ flex: 1;}

.mts_result_type{ margin-top: .8rem;}
.mts_result_type li:not(:first-child){ margin-top: .8rem;}

.mts_list{ overflow: auto;}
.mts_list li:not(:first-child){ margin-top: 1rem;}

.pop_mts_area_wrap .mts_list{ height: 40rem;}

.mts_result_list_wrap{ border: 1px solid #717171; border-radius: 1.2rem; background: #fff; padding: 2rem 1rem 2rem 2rem;}
.mts_result_list{ height: 20rem; overflow: auto; position: relative;}
.mts_result_list li:not(:first-child){ margin-top: .6rem;}

.mts_result_list_view{ border-radius: 1.2rem; background: #fff; padding: 1rem; display: flex; flex-wrap: wrap; gap: .8rem;}
.chi_tag{ height: 3.2rem; border-radius: 3.2rem; border: 1px solid #c6c6c6; padding: 0 3rem 0 1.3rem; background: url("../images/common/icon_chip_del.svg") no-repeat right 1rem center; display: flex; align-items: center;}

.mts_result_list_btnarea{ margin-top: .8rem; display: flex; justify-content: right;}
.btn_ts_result_alldell{ padding-right: 3rem; background: url("../images/common/icon_chip_del.svg") no-repeat right 1rem center; display: flex; align-items: center;}

.mts_date_selt_wrap{ margin-top: 2rem;}
.mts_date_item{}
.mts_sm_stit{ padding-left: .4rem; margin-bottom: .6rem;}
.mts_sel_set{ display: flex; gap: .8rem;}

.mts_date_item + .mts_date_item{ margin-top: 1.5rem;}

.mts_date_setup{ margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .8rem;}
.mts_date_setup .btn_mts_date{ width: calc(50% - .4rem);}
.btn_mts_date{ height: 4rem; border-radius: .6rem; border: 1px solid #1d1d1d; background-color: #fff; padding: 0 1.5rem; display: flex; justify-content: center; align-items: center;}
.btn_mts_date.on{ color: #fff; background-color: #3456c5;}

.mts_date_setup.web{ margin-top: 0; gap: .5rem;}
.mts_date_setup.web .btn_mts_date{ padding: 0 1rem; width: auto; height: 4.4rem;}

.mo_total_search_btnarea{ margin-top: 2.4rem; display: flex; justify-content: space-between;}

.mo_total_results_wrap{ margin-top: 8rem;}

.mtr_tab_wrap{ margin-bottom: 3.2rem;}
.mtr_tab{ display: flex; overflow: auto; cursor: grab; /* Add a grab cursor to indicate draggable */ gap: .8rem;
	
}
.mtr_tab li{ height: 4.4rem; padding: 2px 0;}
.mtr_tab li a,
.mtr_tab li button{ display: flex; align-items: center; height: 100%; border-radius: .8rem .8rem 0 0; padding: 0 4rem; justify-content: center; box-sizing: border-box; border-bottom: 2px solid #cdd7e4; white-space: nowrap;}

.mtr_tab li.on a,
.mtr_tab li.on button{ background: #edf1f5; border-bottom: 2px solid #003675; color: #003675; font-weight: 700;}

.mtr_tab{ -ms-overflow-style: none; scrollbar-width: none;}
.mtr_tab::-webkit-scrollbar{ display: none; width: 0; height: 0; background: transparent; -webkit-appearance: none;}

.mts_lg_tit{ font-size: 2.5rem; font-weight: 700; margin-bottom: 2rem;}

@media (max-width: 766px) {
	.mtr_tab_wrap{ overflow: auto;}
	.mtr_tab{ overflow: auto;}
}

.mtr_tab_cont_wrap{ margin-top: 2rem;}
.mtr_tab_cont{ display: none;}
.mtr_tab_cont.mtc_01{ display: block;}

/*#################################### 이용안내 ####################################*/

/* 저작권 정책 */
.copyright_policy_wrap{ padding: 6rem 4rem; border: 1px solid #d8d8d8; border-radius: 1rem;}
.copyright_policy_wrap .cpo_top{ padding: 8.5rem 0 3rem 0; margin-bottom: 3rem; background: url("../images/sub/cpo_icon.png") no-repeat top .5rem center; border-bottom: 1px dashed #d8d8d8; text-align: center; font-size: 2.5rem; font-weight: 700;}

.copyright_policy_wrap .cop_cont{}
.copyright_policy_wrap .cop_cont ul{}
.copyright_policy_wrap .cop_cont ul li{ position: relative; padding-left: 1.4rem;}
.copyright_policy_wrap .cop_cont ul li::before{ content: ""; position: absolute; width: .5rem; height: .5rem; border-radius: .5rem; background: #8e8e8e; left: 0; top: .9rem;}
.copyright_policy_wrap .cop_cont ul li:not(:first-child){ margin-top: 2.5rem;}

@media (max-width: 766px) {
	.copyright_policy_wrap{ padding: 3.5rem 2rem;}
}

/* 이용안내 */
.site_use_info{}
.suei_box{ border-radius: 1rem; border: 1px solid #d8d8d8; padding: 3.6rem 4rem; margin: 3rem 0 6rem 0;}

.suei_cont_1 .suei_txt{ width: 70%;}


.suei_cont_1{ display: flex; justify-content: space-between;}

.suei_sec_list{ display: flex; gap: 8rem; flex-wrap: wrap;}
.suei_sec_list li{ position: relative; width: calc(50% - 4rem); letter-spacing: -.8px;}
.suei_sec_list li:nth-child(even)::before{ content: ""; position: absolute; width: 1px; height: 100%; background-color: #d8d8d8; left: -4rem; top: 0;}
.suei_sec_list li:nth-child(1):after{ content: ""; position: absolute; width: 110%; height: 1px; background-color: #d8d8d8; bottom: -4rem; left: 0;}
.suei_sec_list li:nth-child(2):after{ content: ""; position: absolute; width: 110%; height: 1px; background-color: #d8d8d8; bottom: -4rem; left: -10%;}

.suei_sec_list li .suei_txt{ margin-top: 1.9rem; margin-bottom: 2.4rem; padding-right: 2rem;}

.suei_sec_list.many li:nth-child(odd)::before{ display: none;}
.suei_sec_list.many li:nth-child(odd):after{ content: ""; position: absolute; width: 110%; height: 1px; background-color: #d8d8d8; bottom: -4rem; left: 0;}
.suei_sec_list.many li:nth-child(even):after{ content: ""; position: absolute; width: 110%; height: 1px; background-color: #d8d8d8; bottom: -4rem; left: -10%;}
.suei_sec_list.many li:last-child:after{ display: none !important;}

.suei_sec_list.many li:last-child .suei_txt{ width: 60%;}
.suei_sec_list.many li:last-child{ width: 100%; flex: 100%;}
.suei_sec_list.many li:last-child .btn{ position: absolute; right: 0; top: 50%; transform: translateY(-50%);}

@media (max-width: 766px) {
	.suei_box{ padding: 2rem;}
	.suei_cont_1{ display: block;}
	.suei_cont_1 .suei_txt{ width: 100%;}

	.suei_sec_list{ flex-direction: column; gap: 3rem;}
	.suei_sec_list li{ width: 100%;}
	.suei_sec_list li:not(:first-child){ border-left: none; border-top: 1px solid #d8d8d8; padding-top: 3rem;}
	.suei_sec_list li:nth-child(1):after,
	.suei_sec_list li:nth-child(2):after{ display: none;}

	.suei_sec_list.many li:last-child .btn{ position: relative; right: auto; top: auto; transform: translateY(0);}
	.suei_sec_list.many li:nth-child(odd):after,
	.suei_sec_list.many li:nth-child(even):after{ display: none;}
	.suei_sec_list li .suei_txt{ padding-right: 0;}
	
	.suei_txt{ margin-bottom: 2rem;}
	.suei_sec_list.many li:last-child .suei_txt{ width: 100%;}
}

/*#################################### 시스템 소개 ####################################*/
.tw_sysinfo_wrap{}

.tw_sysinfo_top{ height: 38rem; background-image: url("../images/sub/tw_sysinfo_top_bg.jpg"); background-repeat: no-repeat; background-size: cover; border-radius: 2rem; overflow: hidden; display: flex; justify-content: center; flex-direction: column; text-align: center;}
.tw_sysinfo_top .twsys_tit{ color: #fff; font-size: 4rem; font-family: 'Gmarket Sans'; font-weight: 500; margin-bottom: 2.2rem;}

.tw_sysinfo_top .twsys_tit .tws_bold{ font-weight: 700; display: inline-block;}

.tw_sysinfo_top > p{ font-size: 2.1rem; color: #fff; padding: 0 11rem;}

.twsi_cont_wrap{ margin-top: 6.4rem; display: flex; flex-direction: column; gap: 2.4rem;}
.twsi_cont_wrap .h4{}
.twsi_cont_wrap .twsi_cont{}

.info_twsyt_cont{ display: flex; gap: 2.3rem;}
.info_twsyt_cont > div{ flex: 1;}
.info_twsyt_cont ul{ border-top: 1px solid #1d1d1d;}
.info_twsyt_cont ul li{ height: 5rem; padding: 2rem 1.5rem; display: flex; align-items: center;}
.info_twsyt_cont ul:nth-child(1) li:nth-child(odd),
.info_twsyt_cont ul:nth-child(2) li:nth-child(even){ background-color: #edf1f5;}

.info_twsyt_cont ul li strong{ width: 20rem;}
.info_twsyt_cont ul li span:nth-child(2){ width: 13rem;}
.info_twsyt_cont ul li span:nth-child(3){ }

.btn_itsys_link{ position: relative; display: flex; align-items: center; gap: .4rem;}

.twsi_desc{ font-size: 1.9rem;}

@media (max-width: 766px) {
	.tw_sysinfo_top{ padding: 8rem 2rem; background-image: url("../images/sub/tw_sysinfo_top_bg_mo.jpg"); background-repeat: no-repeat; height: auto;}
	.tw_sysinfo_top .twsys_tit{ font-size: 3rem;}	
	.tw_sysinfo_top > p{ font-size: 2.1rem; padding: 0;}
	.info_twsyt_cont{ flex-direction: column;}
	.info_twsyt_cont ul{ border-bottom: 1px solid var(--ce-subline);}
	.info_twsyt_cont ul li{ height: auto; padding: 1rem; justify-content: space-between; flex-wrap: wrap;}
	.info_twsyt_cont ul li strong{ width: 50%; font-size: 1.5rem;}
	.info_twsyt_cont ul li span{ font-size: 1.5rem;}
	.info_twsyt_cont ul li span:nth-child(2){ width: 50%; text-align: right;}
	.info_twsyt_cont ul li span:nth-child(3){ width: 100%; white-space: nowrap;}
}

/* 추진 배경 및 필요성 */
.twsi_promotion_wrap{}
.twsi_promotion_wrap > li{ border: 1px solid #c6c6c6; border-radius: 1rem; padding: 1rem; display: flex; gap: 4rem;}
.twsi_promotion_wrap > li:not(:first-child){ margin-top: 2.4rem;}
.twsi_promotion_wrap > li > div{}
.twsi_promotion_wrap li .icon{ width: 44.3rem; height: 16.2rem; background-color: #f0f0f0; border-radius: .8rem 0 0 .8rem; background-repeat: no-repeat; padding: 0 2.1rem 0 17.2rem; display: flex; align-items: center;}
.twsi_promotion_wrap li:nth-child(1) .icon{ background-image: url("../images/sub/twsi_prom_icon01.png"); background-position: left 3.5rem center;}
.twsi_promotion_wrap li:nth-child(2) .icon{ background-image: url("../images/sub/twsi_prom_icon02.png"); background-position: left 4.6rem center;}
.twsi_promotion_wrap li:nth-child(3) .icon{ background-image: url("../images/sub/twsi_prom_icon03.png"); background-position: left 4.5rem center;}
.twsi_promotion_wrap li .icon dl{}
.twsi_promotion_wrap li .icon dl dt{ font-size: 2.5rem; font-weight: 700;}
.twsi_promotion_wrap li .icon dl dt span{ color: #246beb;}
.twsi_promotion_wrap li .icon dl dd{ margin-top: 1.2rem;}

.twsi_i_wrap .tit{ font-size: 2.5rem; font-weight: 700;}
.twsi_i_wrap .tit .pinb{ color: #246beb;}
.twsi_i_wrap .desc{ margin-top: 1.2rem;}

.twsi_promotion_wrap li .text{ padding-right: 1rem; flex: 1; display: flex; align-items: center;}
.twsi_promotion_wrap li .text .info_text_list > li .info_text { margin-top: 0;}

@media (max-width: 766px) {
	.twsi_promotion_wrap > li{ flex-direction: column; gap: 2rem;}
	.twsi_promotion_wrap li .icon{ width: 100%; border-radius: .8rem .8rem 0 0; padding-left: 12rem; padding-right: 1rem; background-size: 22%;}
	.twsi_promotion_wrap > li:not(:first-child){ margin-top: 4rem;}
	.twsi_promotion_wrap li:nth-child(1) .icon{ background-position: left 2.5rem center;}
	.twsi_promotion_wrap li:nth-child(2) .icon{ background-position: left 2.6rem center;}
	.twsi_promotion_wrap li:nth-child(3) .icon{ background-position: left 2.5rem center;}
}

/* 단계별 구축절차 */
.twsi_step_wrap{ display: flex; gap: 5.5rem;}
.twsi_step_wrap > li{ position: relative; flex: 1;}
.twsi_step_wrap > li:not(:first-child)::before{ content: ""; position: absolute; width: 3.1rem; height: 17.2rem; background: url("../images/sub/twsi_step_arr.png") no-repeat; left: -4.4rem; top: 50%; transform: translateY(-50%);}

.twsi_step_wrap > li:nth-child(1){ background: url("../images/sub/twsi_build_icon01.png") no-repeat right 2rem bottom 2rem;}
.twsi_step_wrap > li:nth-child(2){ background: url("../images/sub/twsi_build_icon02.png") no-repeat right 2rem bottom 2rem;}
.twsi_step_wrap > li:nth-child(3){ background: url("../images/sub/twsi_build_icon03.png") no-repeat right 2rem bottom 2rem;}

.twsi_step_wrap li .tit{ border-radius: 1rem; height: 6rem; display: flex; font-size: 2.1rem; color: #fff; display: flex; justify-content: center; align-items: center;}

.twsi_step_wrap li:nth-child(1) .tit{ background-color: #246beb;}
.twsi_step_wrap li:nth-child(2) .tit{ background-color: #1d56bc;}
.twsi_step_wrap li:nth-child(3) .tit{ background-color: #16408d;}
.twsi_step_wrap > li .tit b{}
.twsi_step_wrap > li .cont{ border: 1px solid #d8d8d8; border-radius: 1rem; height: 30rem; padding: 2.5rem; margin-top: 1rem;}
.twsi_step_wrap > li .cont .stit{ font-size: 2.1rem; font-weight: 700; margin-bottom: 2rem;}
.twsi_step_wrap > li:nth-child(1) .cont .stit{ letter-spacing: -1.3px;}
.twsi_step_wrap > li .cont .info_text_list li{ letter-spacing: -.4px;}

@media (max-width: 766px) {
	.twsi_step_wrap{ flex-direction: column;}
	.twsi_step_wrap > li:not(:first-child)::before{ left: 45%; top: -2.6rem; transform: translateY(-50%) rotate(90deg);}
	.twsi_step_wrap > li .cont{ height: auto; padding: 2rem;}
	.twsi_step_wrap > li:nth-child(1) .cont .stit{ letter-spacing: 0;}
}

/* 플랫폼 정보화 비전 */
.twsi_vision_wrap{}
.twsi_v_item{ display: flex; gap: 1rem;}
.twsi_v_item + .twsi_v_item{ margin-top: 1.2rem;}
.twsi_v_item .v_tit{ font-size: 1.9rem; font-weight: 700; border: 1px solid #d8d8d8; border-radius: 1rem; width: 16rem; display: flex; justify-content: center; align-items: center;}
.twsi_v_item .v_cont{ flex: 1;}
.twsi_v_item .v_cont .v_box{ font-size: 2.1rem; color: #003675; border-radius: 1rem; border: 2px solid #003675; padding: 1.3rem; text-align: center;}
.twsi_v_item .v_cont .v_box + .v_box{ margin-top: 1rem;}

.twsi_v_item .v_cont ul{ display: flex; gap: 1.5rem;}
.twsi_v_item .v_cont ul li{ border-radius: 1rem; text-align: center;}
.twsi_v_item .v_cont ul li .v_ul_tit{ font-size: 1.9rem; font-weight: 700; margin-bottom: .8rem;}
.twsi_v_item .v_cont ul li .v_ul_desc{}

.twsi_v_item.v01 .v_cont .v_box{ background-color: #edf1f5; padding: 2.3rem 2rem; font-size: 2.5rem; font-weight: 700;}

.twsi_v_item.v03 .v_cont ul li{ background-color: #003675; flex: 1; height: 26rem; color: #fff; padding: 3.5rem 3rem 2.5rem 3rem;}
.twsi_v_item.v03 .v_cont ul li .v_ul_tit{ padding-top: 8rem;}
.twsi_v_item.v03 .v_cont ul li:nth-child(1) .v_ul_tit{ background: url("../images/sub/v03_icon01.svg") no-repeat top 0 center;}
.twsi_v_item.v03 .v_cont ul li:nth-child(2) .v_ul_tit{ background: url("../images/sub/v03_icon02.svg") no-repeat top 0 center;}
.twsi_v_item.v03 .v_cont ul li:nth-child(3) .v_ul_tit{ background: url("../images/sub/v03_icon03.svg") no-repeat top 0 center;}

.twsi_v_item.v04 .v_cont ul{ flex-wrap: wrap;}
.twsi_v_item.v04 .v_cont ul li{ background-color: #edf1f5; width: calc(33.33% - 1rem); height: 16rem; display: flex; flex-direction: column; justify-content: center; padding: 0 1.6rem;}
.twsi_v_item.v04 .v_cont ul li:nth-child(6) .v_ul_desc{ letter-spacing: -1px;}

@media (max-width: 766px) {
	.twsi_v_item{ flex-direction: column;}
	.twsi_v_item .v_tit{ padding: 1rem; width: auto;}
	.twsi_v_item + .twsi_v_item{ margin-top: 2rem;}
	.twsi_v_item .v_cont ul{ flex-direction: column;}
	.twsi_v_item .v_cont .v_box { font-size: 1.7rem; border: 1px solid #003675; padding: 1.3rem;}
	

	.twsi_v_item.v01 .v_cont .v_box{ font-size: 1.7rem; padding: 1.5rem;}
	.twsi_v_item .v_cont ul li .v_ul_tit{ margin-bottom: .2rem;}

	.twsi_v_item.v03 .v_cont ul li{ padding: 1.5rem;}
	.twsi_v_item.v03 .v_cont ul li .v_ul_tit{ padding-top: 0; background: none !important;}

	.twsi_v_item.v04 .v_cont ul li{ width: 100%; height: auto; padding: 2rem 2rem;}
}

/*#################################### 운영현황 ####################################*/

/* 소개 공통 */
.osta_induc{ border-radius: 1rem; background-color: #edf1f5; padding: 3rem; background-position: left 3rem center; background-repeat: no-repeat; min-height: 18rem; margin-bottom: 6rem; display: flex; align-items: center;}

.osta_induc .osta_wrap{ margin-left: 13.5rem;}
.osta_induc .osta_wrap .tit{ font-size: 2.5rem; margin-bottom: .6rem;}
.osta_induc .osta_wrap .cont{}

.osta_induc.in01{ background-image: url("../images/sub/ind_img01.png");}
.osta_induc.in02{ background-image: url("../images/sub/ind_img02.png");}
.osta_induc.in03{ background-image: url("../images/sub/ind_img03.png");}
.osta_induc.in04{ background-image: url("../images/sub/ind_img04.png");}
.osta_induc.in05{ background-image: url("../images/sub/ind_img05.png");}
.osta_induc.in06{ background-image: url("../images/sub/ind_img06.png");}
.osta_induc.in07{ background-image: url("../images/sub/ind_img07.png");}

@media (max-width: 766px) {
	.osta_induc{ padding: 1.5rem; background-position: top 1.5rem center;}
	.osta_induc .osta_wrap{ margin-left: auto; margin-top: 12rem;}
}

/* 기관소개 */
.insti_info{ border-radius: 1rem; border: 1px solid var(--ce-subline); display: flex; flex-wrap: wrap;}
.insti_info li{ padding: 3rem; flex: 1 1 50%;}
.insti_info li .logo{}

.insti_info li .ins_wrap{ margin-top: 3.5rem; flex: 1;}
.insti_info li .tit{ font-weight: 700;}
.insti_info li .cont{ margin-top: 1rem;}

@media (max-width: 766px) {
	.insti_info{ flex-direction: column;}
	.insti_info li{ padding: 2rem;}
	.insti_info li .ins_wrap{ margin-top: 2rem;}
}

/* 기관소개 : 수자원 */
.insti_info.sja li:first-child{ border-right: 1px solid var(--ce-subline);}
.insti_info.sja li:not(:last-child){ border-bottom: 1px solid var(--ce-subline);}
.insti_info.sja li:last-child{ display: flex; align-items: center;}
.insti_info.sja li:last-child .logo{ margin-right: 4rem;}
.insti_info.sja li:last-child .logo img{ width: fit-content;}
.insti_info.sja li:last-child dl{ flex: 1; margin-top: 0;}

@media (max-width: 766px) {
	.insti_info.sja li:first-child{ border-right: none;}
	.insti_info.sja li:last-child{ flex-direction: column; align-items: flex-start;}
	.insti_info.sja li:last-child .logo{ margin-right: 0;}
	.insti_info.sja li:last-child dl{ margin-top: 3rem;}
}

/* 기관소개 : 하천 */ 
.insti_info.hac{}
.insti_info.hac li:nth-child(1){ border-bottom: 1px solid var(--ce-subline); border-right: 1px solid var(--ce-subline);}
.insti_info.hac li:nth-child(2){ border-bottom: 1px solid var(--ce-subline);}
.insti_info.hac li:nth-child(3){ border-right: 1px solid var(--ce-subline);}
.insti_info.hac li:nth-child(4){}

@media (max-width: 766px) {
	.insti_info.hac li:nth-child(1){ border-right: none;}
	.insti_info.hac li:nth-child(3){ border-right: none; border-bottom: 1px solid var(--ce-subline);}
}

/* 용어설명 */
.term_info_list{}
.term_info_list li{ position: relative; border: 1px solid var(--ce-subline); border-radius: var(--ce-rd-10); background: url("../images/sub/term_book_icon.svg") no-repeat right 3rem center; padding: 3rem; display: flex; align-items: center; gap: 3rem;}
.term_info_list li::before{ content: ""; position: absolute; width: .5rem; height: calc(100% - 2px); background: #0e2b5e; left: 0; top: 1px; border-radius: 1rem 0 0 1rem;}
.term_info_list li:not(:first-child){ margin-top: 1rem;}
.term_info_list li strong{ font-size: 1.9rem; color: #0e2b5e; font-weight: 700;}
.term_info_list li span{ font-size: 1.9rem; color: #0e2b5e; font-weight: 700;}
.term_info_list li p{}

@media (max-width: 766px) {
	.term_info_list li{ flex-direction: column; align-items: flex-start; gap: 1rem; padding: 2rem;}
}

/* 오염원인 */
.wpol_list{ display: flex; gap: 2rem; flex-wrap: wrap; margin-top: .5rem;}
.wpol_list > li{ width: calc(50% - 1rem); border-radius: var(--ce-rd-10); background-color: #edf1f5; padding: 3rem; display: flex; gap: 2rem; align-items: center;}
.wpol_list > li .icon{ width: 11.5rem; height: 11.5rem; background-color: #fff; border-radius: var(--ce-rd-10); display: flex; justify-content: center; align-items: center; flex-shrink: 0;}
.wpol_list li div strong{ font-weight: 700; margin-bottom: 1rem; display: block;}
.wpol_list li div p{ padding-right: 3rem;}

@media (max-width: 766px) {
	.wpol_list{ flex-direction: column;}
	.wpol_list > li{ width: 100%; padding: 1.5rem;}
	.wpol_list > li .icon{ width: 8rem; height: 8rem;}
	.wpol_list > li .icon img{ width: 60%;}
	.wpol_list li div p{ padding-right: 0;}
}

.color_box_list{ display: flex; gap: 2rem; margin-top: .5rem;}
.color_box_list li{ border-radius: var(--ce-rd-10); padding: 2rem 3rem; flex: 1;}
.color_box_list li:nth-child(1){ background-color: #f2f0f7;}
.color_box_list li:nth-child(2){ background-color: #e6f1f6;}
.color_box_list li:nth-child(3){ background-color: #e6f3f2;}
.color_box_list li dl dt{ }

.color_box_list .cb_tit{ font-weight: 700; margin-bottom: 2rem;}
.color_box_list .cb_cont{ padding-right: 4rem;}

@media (max-width: 766px) {
	.color_box_list{ flex-direction: column;}
	.color_box_list li{ padding: 2rem 1.5rem;}
	.color_box_list .cb_cont{ padding-right: 0;}
}

.tw_whbox_list{ display: flex; gap: 2rem;}
.tw_whbox_list > li{ border-radius: var(--ce-rd-10); border: 1px solid var(--ce-subline); padding: 3rem; flex: 1;}

/* 운영현황 : 수질 : 개요 : 수질 개선을 위한 노력 */
.tw_whbox_list.sub321 > li{ flex: auto;}
.tw_whbox_list.sub321 > li:last-child{ width: 40rem;}
@media (max-width: 766px) {
	.tw_whbox_list.sub321 > li:last-child{ width: auto;}
}

/* 수자원 : 현황 */
.tw_whbox_list.cs01{}
.tw_whbox_list.cs01 > li:nth-child(1){ background: url("../images/sub/cs01_01.png") no-repeat right 1rem bottom 1rem;}
.tw_whbox_list.cs01 > li:nth-child(2){ background: url("../images/sub/cs01_02.png") no-repeat right 1rem bottom 1rem;}

.tw_whbox_list.cs03{}
.tw_whbox_list.cs03 > li:nth-child(1){ background: url("../images/sub/cs03_01.png") no-repeat right 1rem bottom 1rem;}
.tw_whbox_list.cs03 > li:nth-child(2){ background: url("../images/sub/cs03_02.png") no-repeat right 1rem bottom 1rem;}

.tw_whbox_list.cs04{}
.tw_whbox_list.cs04 > li:nth-child(1){ background: url("../images/sub/cs04_01.png") no-repeat right 1rem bottom 1rem;}
.tw_whbox_list.cs04 > li:nth-child(2){ background: url("../images/sub/cs04_02.png") no-repeat right 1rem bottom 1rem;}

.tw_whbox_list.cs06{}
.tw_whbox_list.cs06 > li:nth-child(1){ background: url("../images/sub/cs06_01.png") no-repeat right 1rem bottom 1rem;}
.tw_whbox_list.cs06 > li:nth-child(2){ background: url("../images/sub/cs06_02.png") no-repeat right 1rem bottom 1rem;}

@media (max-width: 766px) {
	.tw_whbox_list{ flex-direction: column;}
	.tw_whbox_list > li{ padding: 1.5rem;}
}

.color_box{ border-radius: var(--ce-rd-10); padding: 3rem;}
.color_box.skyblue{ background-color: #ebf5ff;}

@media (max-width: 766px) {
	.color_box{ padding: 1.5rem;}
}

.blue_step_list{ display: flex; gap: 2rem;}
.blue_step_list > li{ flex: 1;}
.blue_step_list li dl dt{ height: 4.8rem; font-size: 1.9rem; font-weight: 700; color: #fff; border-radius: var(--ce-rd-10); display: flex; justify-content: center; align-items: center;}
.blue_step_list li dl dd{ font-size: 1.5rem; height: 15rem; border-radius: var(--ce-rd-10); border: 1px solid var(--ce-subline); padding: 1rem; text-align: center; margin-top: 1rem; display: flex; align-items: center; justify-content: center;}

.blue_step_list > li .bsl_tit{ height: 4.8rem; font-size: 1.9rem; font-weight: 700; color: #fff; border-radius: var(--ce-rd-10); display: flex; justify-content: center; align-items: center;}
.blue_step_list > li .bsl_cont{ border-radius: var(--ce-rd-10); border: 1px solid var(--ce-subline); padding: 1rem; text-align: center; margin-top: 1rem; display: flex; align-items: center; justify-content: center;}

.blue_step_list.bt01 > li .bsl_cont{ font-size: 1.5rem; height: 15rem;}
@media (max-width: 766px) {
	.blue_step_list > li .bsl_cont{ padding: 2rem 1.5rem;}
}

.blue_step_list.bt01 > li .bsl_cont{ font-size: 1.5rem; height: 15rem;}

/* 운영현황 : 하천관리 : 현황 : 하천 정비 사업 진행 상황 */
.blue_step_list.bt02 > li .bsl_cont{ min-height: 8rem;}

/* 운영현황 : 상수도 : 현황 : 수도 정비 계획 */
.blue_step_list.bt03 > li .bsl_cont{ text-align: left; justify-content: flex-start; padding: 2rem 3rem;}

.blue_step_list.bt05 > li .bsl_cont{ font-size: 1.5rem; height: 15rem;}

.blue_step_list > li.bs01 .bsl_tit{ background-color: #5286ff;}
.blue_step_list > li.bs02 .bsl_tit{ background-color: #246beb;}
.blue_step_list > li.bs03 .bsl_tit{ background-color: #1d56bd;}
.blue_step_list > li.bs04 .bsl_tit{ background-color: #163f8e;}

@media (max-width: 766px) {
	.blue_step_list{ flex-direction: column;}
	.blue_step_list.bt01 > li .bsl_cont{ height: auto; padding: 1.5rem;}
	.blue_step_list.bt03 > li .bsl_cont{ height: auto; padding: 1.5rem; text-align: left;}
}

.step_blue_list{ display: flex; gap: 2rem;}
.step_blue_list li{ flex: 1;}
.step_blue_list li span{ height: 4.8rem; font-size: 1.9rem; font-weight: 700; color: #fff; border-radius: var(--ce-rd-10); display: flex; justify-content: center; align-items: center;}
.step_blue_list li p{ font-size: 1.5rem; height: 15rem; border-radius: var(--ce-rd-10); border: 1px solid var(--ce-subline); padding: 1rem; text-align: center; margin-top: 1rem; display: flex; align-items: center; justify-content: center;}

@media (max-width: 766px) {
	.step_blue_list{ flex-direction: column;}
	.step_blue_list li p{ height: auto; padding: 1.5rem; text-align: left;}
}

.step_blue_list li.bs01 span{ background-color: #5286ff;}
.step_blue_list li.bs02 span{ background-color: #246beb;}
.step_blue_list li.bs03 span{ background-color: #1d56bd;}
.step_blue_list li.bs04 span{ background-color: #163f8e;}

/* 가뭄 : 개요 */
.desc_gm{ font-size: 1.9rem;}

.gm_step_list{ border-top: 1px solid var(--ce-subline);}
.gm_step_list li{ margin-top: 2rem;}
.gm_step_list li .tit{ font-size: 2.1rem; font-weight: bold; padding-left: 3.6rem; background-position: left 0 center; background-repeat: no-repeat;}
.gm_step_list li div{ padding: .6rem 2rem; border-radius: var(--ce-rd-10); margin-top: 1rem;}

.gm_step_list li:nth-child(1) .tit{ background-image: url("../images/sub/gm01.png");}
.gm_step_list li:nth-child(2) .tit{ background-image: url("../images/sub/gm02.png");}
.gm_step_list li:nth-child(3) .tit{ background-image: url("../images/sub/gm03.png");}
.gm_step_list li:nth-child(4) .tit{ background-image: url("../images/sub/gm04.png");}

.gm_step_list li:nth-child(1) div{ background-color: #ebf5ff;}
.gm_step_list li:nth-child(2) div{ background-color: #fff8e9;}
.gm_step_list li:nth-child(3) div{ background-color: #fff4f0;}
.gm_step_list li:nth-child(4) div{ background-color: #fef1f1;}

@media (max-width: 766px) {
	.gm_step_list li div{ padding: 1.5rem;}
}

/* 지하수 : 개요 */
.process_step{ position: relative; padding: 3rem 5rem; border-radius: var(--ce-rd-10);}
.process_step .arr_bar{ position: relative; height: 2.6rem;}

.process_step ul{ display: flex; margin-top: -2.8rem;}
.process_step ul li{ position: relative; width: 30rem;}
.process_step ul li .pst_top .num_wrap .num{ font-size: 1.5rem; font-weight: 700; width: 3rem; height: 3rem; border-radius: 3rem; background-color: #fff; display: flex; justify-content: center; align-items: center;}
.process_step ul li .pst_top .tit{ font-size: 1.9rem; font-weight: 700; margin-top: 1rem;}
.process_step ul li .txt{ position: relative; padding-left: 1rem; padding-right: 8rem; margin-top: 1rem;}
.process_step ul li .txt::before{ content: ""; position: absolute; width: .5rem; height: .5rem; border-radius: .5rem; left: 0; top: 0rem;}

@media (max-width: 766px) {
	.process_step ul li .txt{ padding-right: 0;}
}

.process_step.green{ background-color: #f3fcf3;}
.process_step.blue{ background-color: #ebf5ff;}

.process_step.green .arr_bar{ background: url("../images/sub/ji_arr_green_bg.png") repeat-x;}
.process_step.blue .arr_bar{ background: url("../images/sub/ji_arr_blue_bg.png") repeat-x;}

.process_step.green .arr_bar::after{ content: ""; position: absolute; width: 1.6rem; height: 2.6rem; right: 0; top: 0; background: url("../images/sub/ji_arr_green.png") no-repeat;}
.process_step.blue .arr_bar::after{ content: ""; position: absolute; width: 1.6rem; height: 2.6rem; right: 0; top: 0; background: url("../images/sub/ji_arr_blue.png") no-repeat;}

.process_step.green ul li .pst_top .num_wrap .num{ color: #1e7b1e; border: 1px solid #1e7b1e;}
.process_step.blue ul li .pst_top .num_wrap .num{ color: #0056aa; border: 1px solid #0056aa;}

.process_step.green ul li .pst_top .tit{ color: #1e7b1e;}
.process_step.blue ul li .pst_top .tit{ color: #0056aa;}

.process_step.green ul li .txt::before{ background-color: #1e7b1e;}
.process_step.blue ul li .txt::before{ background-color: #0056aa;}

@media (max-width: 766px) {
	.process_step{ padding: 1.5rem;}
	.process_step .arr_bar{ display: none;}
	.process_step ul{ flex-direction: column; margin-top: auto; gap: 2rem;}
	.process_step ul li{ width: 100%;}
	.process_step ul li .pst_top{ display: flex; align-items: center; gap: 1rem;}
	.process_step ul li .pst_top .tit{ margin-top: 0;}
}

.r_icon_list{}
.r_icon_list > li{ border-radius: var(--ce-rd-10); padding: 3rem 3rem 3rem 16rem; background-position: left 4rem center; background-repeat: no-repeat;}
.r_icon_list > li:not(:first-child){ margin-top: 2rem;}
.r_icon_list > li > .tit{ font-size: 1.9rem; font-weight: 700; margin-bottom: 1rem;}
.r_icon_list > li > .desc{}

.r_icon_list > li:nth-child(1){ background-color: #f3fcf3;}
.r_icon_list > li:nth-child(2){ background-color: #ebf5ff;}

.r_icon_list.ri01 > li:nth-child(1){ background-image: url("../images/sub/ri01_01.png");}
.r_icon_list.ri01 > li:nth-child(2){ background-image: url("../images/sub/ri01_02.png");}

.r_icon_list.ri06 > li:nth-child(1){ background-image: url("../images/sub/ri06_01.png");}
.r_icon_list.ri06 > li:nth-child(2){ background-image: url("../images/sub/ri06_02.png");}

@media (max-width: 766px) {
	.r_icon_list > li{ padding: 1.5rem; background-image: none !important;}
}

/* 운영현황 : 수질 : 현황 */
.wq_text_list{}
.wq_text_list li{ border-radius: 1rem; border: 4px solid #edf1f5; padding: 2rem 6rem 2rem 2rem; display: flex; align-items: center;}
.wq_text_list li:not(:first-child){ margin-top: 1.2rem;}
.wq_text_list li .wtl_tit{ font-size: 1.9rem; font-weight: 700; padding-left: 1.6rem; background: url("../images/sub/wqt_tit.png") no-repeat left 0 bottom 2px; width: 19rem;}
.wq_text_list li .wtl_cont{ flex: 1;}

.wq_text_list.ty02 li .wtl_tit{ background: url("../images/sub/wqt_tit2.png") no-repeat left 0 bottom 4px;}

@media (max-width: 766px) {
	.wq_text_list li{ flex-direction: column; padding: 2rem 1.5rem; gap: 1.5rem;}
	.wq_text_list li .wtl_tit{ width: auto;}
}

.tb_style{ padding: 2rem; border-top: 2px solid #1d1d1d; border-bottom: 1px solid #d8d8d8;}

@media (max-width: 766px) {
	.tb_style{ padding: 1.5rem;}
}

/* 운영현황 : 하수도 : 현황 */
.hst_info{ padding: 3rem; border-radius: 1rem; background-color: #ebf5ff;}
.hst_info .hst_tit{ font-size: 1.9rem; font-weight: 700; color: #003675; margin-bottom: 1.6rem;}
.hst_info .hst_cont{ border-top: 2px solid #1d1d1d; border-bottom: 1px solid #d8d8d8; padding: 2rem 0;}

@media (max-width: 766px) {
	.hst_info{ padding: 2rem;}
}

/* Table Style - 운영형황 : 수자원, 하천관리, 상수도, 하수도 전용(현황) */
.tblst{ border-left: 1px solid #e6e6e6; border-top: 2px solid #323232; border-right: 1px solid #e6e6e6;}
.tblst li{ border-bottom: 1px solid #e6e6e6; display: flex;}
.tblst li .tbs_tit{ padding: 1.5rem; font-weight: 700; width: 30%; text-align: center; background-color: var(--ce-th-bg); display: flex; justify-content: center; align-items: center;}
.tblst li .tbs_cont{ padding: 1.5rem;}

@media (max-width: 766px) {
	.tblst li .tbs_cont{ flex: 1;}
}

/* 검색된 단어 color */
.sd_bg { background: #dee9fc; color: #1d56ca;}

/* 자주묻는 질문 검색 단어 */
.faq_txt .sd_bg { background: #fff; color: #1d56ca;}

.btn_m_move_top{ display: none;}

@media (max-width: 766px) {
	.btn_m_move_top{ position: relative; border-radius: 1rem; border: 1px solid #d8d8d8; background: url("../images/common/quick_arr_top.svg") no-repeat top 1.3rem center; padding-top: 3rem; width: 6.8rem; height: 6.2rem; display: block; font-size: 1.5rem; margin: 4rem 0 0 auto;}
}

/*############################ 통합GIS ##############################*/
.cu_togis_wrap{ width: 100%; margin-top: 8rem;}

.cu_togis_visual{ text-align: center; margin-bottom: 3rem;}

.cu_togis_btn_wrap{ display: flex; justify-content: center; margin-top: 3rem; margin-bottom: 8rem;}
.cu_togis_btn_wrap.bottom{ margin-top: 8.5rem;}

.btn_totl_gis_wrap{ border: 1rem solid #fff; border-radius: 1.5rem; box-shadow: 0 10px 15px rgba(5, 32, 64, 0.5);}

.btn_totl_gis{ position: relative; width: 26rem; height: 5.6rem; font-size: 1.9rem; font-weight: 700; color: #fff; background-color: #246beb; border-radius: 1rem; display: flex; justify-content: center; align-items: center; gap: 1rem; 
}
.btn_totl_gis::after{ content: ""; background-image: url("../images/common/newwin_wh.svg"); background-repeat: no-repeat; width: 1.8rem; height: 1.8rem;}

.togis_tit{ text-align: center; font-size: 4rem; margin-bottom: 2.6rem; margin-top: 6.4rem;}
.togis_desc{ text-align: center; font-size: 1.9rem;}

.togis_h4_wrap{ text-align: center; margin-bottom: 4rem;}
.togis_h4{ font-family: 'Gmarket Sans'; font-size: 1.9rem; font-weight: 700; color: #fff; padding: .8rem 4.5rem 0 4.5rem; height: 4rem; border-radius: 4rem; background-color: #16408d; display: inline-flex; gap: .8rem;}
.togis_h4 em{ font-weight: 700;}
.togis_tit_s{ text-align: center; font-size: 3.2rem; margin-top: 3.5rem; margin-bottom: 3.2rem; padding: 0 2rem;}
.togis_desc_list{ margin-left: 15rem;}
.togis_desc_list li{ font-size: 1.7rem; text-align: left; letter-spacing: -1px;}
.togis_desc_list li:not(:first-child){ margin-top: 1rem;}

.togis_item_wrap{ padding: 4rem 0 5.5rem 0; margin-top: 11rem;}
.togis_item_wrap.brad{ border-radius: 3rem; background-color: #edf1f5;}

.togis_img_box{ display: flex; justify-content: center; padding-left: 3rem;}
.togis_img_box.im01{ margin-top: -1rem;}

.togis_img_box.im02{}

.togis_img_box.im03{}


@media (max-width: 1315px) {
	.togis_img_box img{ width: 50%;}
}

@media (max-width: 766px) {
	.togis_img_box{ flex-direction: column; padding-left: 1rem;}
	.togis_img_box img{ width: 100%;}
	.togis_img_box.im01{}
	.togis_img_box.im02{ padding-left: 0;}
	.togis_img_box.im02 img{ max-width: 105%; width: 105%;}
	.togis_img_box.im03 img{ max-width: 105%; width: 105%;}

	.togis_desc_list{ margin-left: 0; padding: 0 2rem;}
}



/* 통합GIS Event */
.cu_togis_vweb{ position: relative; display: inline-block;}

.cugis_v_bg{}

.cugis_icon{ position: absolute;}
.cugis_icon.ci01{ top: 3.8rem; left: -6.5rem; z-index: 2;}
.cugis_icon.ci02{ top: 14.8rem; left: 0;}
.cugis_icon.ci03{ top: 22rem; left: -15rem;}
.cugis_icon.ci04{ top: 34rem; left: -5rem;}

.cugis_icon.ci05{ top: -2.7rem; right: 3.5rem;}
.cugis_icon.ci06{ top: 12rem; right: -3.5rem;}
.cugis_icon.ci07{ top: 32rem; right: -14rem;}
.cugis_icon.ci08{ top: 38.5rem; right: 4rem;}

.cugis_icon.cs01{ top: 13rem; left: -10rem;}
.cugis_icon.cs02{ top: 10rem; right: -9rem;}


.cugis_icon.ci01{ animation: fade_up_move 2s cubic-bezier(0.33, 1, 0.68, 1) both; animation-delay: 0s;}
.cugis_icon.ci02{ animation: fade_up_move 2s cubic-bezier(0.33, 1, 0.68, 1) both; animation-delay: 0.2s;}
.cugis_icon.ci03{ animation: fade_up_move 2s cubic-bezier(0.33, 1, 0.68, 1) both; animation-delay: 0.4s;}
.cugis_icon.ci04{ animation: fade_up_move 2s cubic-bezier(0.33, 1, 0.68, 1) both; animation-delay: 0.6s;}

.cugis_icon.ci05{ animation: fade_up_move 2s cubic-bezier(0.33, 1, 0.68, 1) both; animation-delay: 0.1s;}
.cugis_icon.ci06{ animation: fade_up_move 2s cubic-bezier(0.33, 1, 0.68, 1) both; animation-delay: 0.3s;}
.cugis_icon.ci07{ animation: fade_up_move 2s cubic-bezier(0.33, 1, 0.68, 1) both; animation-delay: 0.5s;}
.cugis_icon.ci08{ animation: fade_up_move 2s cubic-bezier(0.33, 1, 0.68, 1) both; animation-delay: 0.7s;}

@keyframes fade_up_move {
	0% {
		opacity: 0;
		transform: translateY(150%) scale(1.05);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (max-width: 766px) {
	.cu_togis_vweb{ display: block;}
	.cugis_v_bg{ width: 90%;}	
	.cugis_icon img{ transform: scale(50%);}

	.cugis_icon.ci01{ top: -6%; left: -4%;}
	.cugis_icon.ci02{ top: 18%; left: 2%;}
	.cugis_icon.ci03{ top: 38%; left: -6%;}
	.cugis_icon.ci04{ top: auto; left: -2%; bottom: 4%;}

	.cugis_icon.ci05{ top: -16%; right: 4%;}
	.cugis_icon.ci06{ top: 6%; right: -6%;}
	.cugis_icon.ci07{ top: auto; right: -8%; bottom: 10%;}
	.cugis_icon.ci08{ top: auto; right: 5%; bottom: 1%;}

	.cugis_icon.cs01{ top: 6%; left: -8%;}
	.cugis_icon.cs02{ top: 1%; right: -10%;}
}

/* 데이터 제공 목록 */
.data_service_list_wrap{}
.dsl_cont{ display: flex; flex-direction: column; gap: 1rem;}
.dsl_cont.die2{ gap: 3.2rem; flex-direction: row;}
.dsl_cont.die2 > div{ flex: 1;}

.dsl_cont + .dsl_cont{ margin-top: 4rem;}

.te2{ color: #fff;}

.dsl_cont .tbl2 tbody th{ width: 5rem;}

@media (max-width: 766px) {
	.dsl_cont.die2{ flex-direction: column;}
}

/* 정보 통합 대상 시스템 */
.info_to_sys_wrap{ position: relative; border-top: 1px solid #1d1d1d;}
.info_to_sys_wrap::after{ content: ""; position: absolute; width: 16.9rem; height: 8rem; background: url("../images/sub/info_to_top_img.png") no-repeat; top: -8.1rem; right: 0;}
.info_to_sys_wrap > div{ display: flex;}
.info_to_sys_wrap > div > div{ display: flex; flex-direction: column; justify-content: center;}
.info_to_sys_wrap > div > div{}
.info_to_sys_wrap > div > div:nth-child(1){ width: 27rem;}
.info_to_sys_wrap > div > div:nth-child(2){ width: 35rem;}
.info_to_sys_wrap > div > div:nth-child(3){ width: 21.6rem;}
.info_to_sys_wrap > div > div:nth-child(4){ flex: 1;}

.info_to_sys_wrap > div:nth-child(even){ background-color: #edf1f5;}

.info_to_sys_wrap .to_head{  border-bottom: 1px solid #1d1d1d;}
.info_to_sys_wrap .to_head > div{ position: relative; height: 6.2rem; align-items: center;}
.info_to_sys_wrap .to_head > div:not(:first-child)::before{ content: ""; position: absolute; width: .3rem; height: 2.6rem; border-radius: .3rem; background-color: #edf1f5; left: -1.1rem;}

.info_to_sys_wrap .to_body > div{ height: 10rem; padding-left: 2rem; border-bottom: 1px solid #d8d8d8;}

.info_to_sys_wrap .to_body > div:first-child p{ color: #1d56bc;}

.info_to_sys_wrap .to_y{ display: block; color: #246beb;}
.info_to_sys_wrap .to_ty{ background-color: #d3e1fb; color: #246beb; height: 2.6rem; padding: 0 .7rem; border-radius: .5rem; font-size: 1.5rem; margin-right: auto; white-space: nowrap; display: inline-flex; align-items: center;}

.info_to_sys_wrap .to_y.pur{ color: #5917b8;}
.info_to_sys_wrap .to_ty.pur{ background-color: #ded1f1; color: #5917b8;}

.info_to_sys_wrap .to_site_link{ position: relative; color: #1d56bc; text-decoration: underline; display: flex; align-items: center; gap: .6rem;}
.info_to_sys_wrap .to_site_link::after{ content: ""; width: 2rem; height: 2rem; background: url("../images/common/newwin_bu.svg") no-repeat; display: inline-flex;}

@media (max-width: 766px) {
	.info_to_sys_wrap::after{ display: none;}
	.info_to_sys_wrap > div{ flex-direction: column;}
	.info_to_sys_wrap > div > div{ width: 100% !important; height: auto !important;}

	.info_to_sys_wrap .to_head{ display: none;}
	.info_to_sys_wrap .to_body{ padding: 2.5rem 0;}
	.info_to_sys_wrap .to_body > div{ border-bottom: none; display: flex; flex-direction: row; justify-content: flex-start; gap: .8rem;}
	.info_to_sys_wrap .to_body > div:first-child strong{ font-size: 1.9rem;}
	.info_to_sys_wrap .to_body > div:first-child{ flex-direction: column; gap: 0;}
	.info_to_sys_wrap .to_body > div:not(:first-child){ margin-top: 1rem;}
	.info_to_sys_wrap .to_body > div:nth-child(2){ flex-direction: column; gap: 0; font-size: 1.5rem;}
	
}
.scroll2{ overflow: auto;}
.tbl_bbs.small{ width: 983px;}
.tbl_bbs.small thead th{ padding: 1.2rem 1rem;}
.tbl_bbs.small tbody td{ font-size: 1.7rem; padding: 1.5rem 2rem; text-align: center;}
.tbl_info_desc{ display: flex; justify-content: right; margin-bottom: .8rem;}