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

/*******************************
 * Infomation : 국가통합물관리정보플랫폼
 * FileName   : sian.css 
 * Update     : 2026.07.03.
********************************/
body:has(#wrap) {
    overflow-x: auto;
}
#wrap{ min-width: 190rem;}

.sian_inner{ width: 130rem; margin: 0 auto;}

.gnb_wrap{ background: url("../images/gnb_bg.jpg") repeat-x;}
.gnb{ position: relative;}

.btn_video_ch{ width: 10rem; height: 4rem; position: absolute; right: 0; top: 5.5rem; z-index: 2;}

.sw_on{ display: block !important;}

/* 메인 비주얼 */
.main_visual{ position: relative; background-color: #ecf6ff;}

.video_wrap{ position: relative; width: 1440px; height: 670px; border-radius: 0 0 20rem 0; overflow: hidden;}
.video_wrap::before{ content: ""; width: 100%; height: 100%; position: absolute; z-index: 2; background: url("../images/sianb/video_cover.png") no-repeat;}
.video_wrap video { display: none; height: 100%; -o-object-fit: cover; object-fit: cover; width: 100%;}

.left_slide_wrap{ position: absolute; right: -100px; top: 0; width: 46rem; height: 64rem; border-radius: 0 0 0 12rem; z-index: 4; display: flex; align-items: center; z-index: 10;}

.left_slide_wrap .my_location{ position: absolute; left: 58px; bottom: 40px;}

/* 롤링 뉴스 */
.newsflash{ margin-left: -50px; width: 485px; height: 488px; background: url("../images/swipe_text_bg.png") no-repeat right 80px center; display: flex; align-items: center;}
.newsflash_list{ position: relative; height: 264px; overflow:hidden; display: flex;}
.newsflash_list ul{ width: 424px;}
.newsflash_list ul li{ color: #fff; line-height: 30px; display: flex; align-items: center; gap: 15px;}
.newsflash_list ul li img{ width: 424px; height: 264px;}
.newsflash_list ul li b{ font-weight: 500; display: inline-block; flex: 0 0 auto;}
.newsflash_list ul li p{ color: #fff; overflow: hidden; flex: 1; display: flex;}
.newsflash_list ul li p span{ color: #fff; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}

.newsflashUpDown{ margin: 6px 0 0 2px; width: 60px; height: 220px; background: url("../images/swipe_dot_bg.png") no-repeat; display: flex; justify-content: center; align-items: center;}
.newsflashUpDown .newsflashUp{display:inline-block; width:20px; height:20px; background:url("../images/img_arr_up.png") no-repeat center center; vertical-align:top; transform: rotate(-90deg);}
.newsflashUpDown .newsflashUp.on{background:url("../images/img_new_arr_up_on.png") no-repeat 0 0;}
.newsflashUpDown .newsflashDown{display:inline-block; width:20px; height:20px; background:url("../images/img_arr_down.png") no-repeat center center; vertical-align:top; transform: rotate(-90deg);}
.newsflashUpDown .newsflashDown.on{background:url("../images/img_arr_down.png") no-repeat center center; vertical-align:top;}
.newsflashRollStop{ display:inline-block; width: 61px; height: 61px; background:url("../images/icon_bn_stop.png") no-repeat center center; vertical-align:top;}
.newsflashRollAuto{ display:inline-block; width: 61px; height:61px; background:url("../images/icon_bn_play.png") no-repeat center center; vertical-align:top;}
.newsflashUpDown button{}

.textMove span{ display: inline-block; transform: translateX(0%);}
.textMove span.animate{ animation: flowText 7s linear 1 forwards; overflow: visible;}

/* 데이터 허브 */
.data_hub_wrap{ position: relative; height: 63rem; background: url("../images/sianb/data_hub_bg.jpg") no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.data_hub{ width: 154rem; margin: 0 auto; text-align: right;}

.quick_service{ position: absolute; top: 168px; right: -276px;}
.quick_service.move{ right: -14px;}
.btn_quick_service{ width: 58px; height: 270px; left: 12px; top: 4px; position: absolute;}

/* 물의 여행 일지 */
.water_travel{ height: 40rem; background: url("../images/sianb/water_travel_bg.jpg") no-repeat; background-size: cover; display: flex; justify-content: center; align-items: center;}

/* 중간 컨텐츠 */
.middle_cont{ padding-top: 10rem;}

/* 풋터 */
.footer_wrap{ background: url("../images/footer_bg.jpg") repeat-x;}

.main_slogan_wrap{ position: relative; width: 130rem; height: 67rem; margin: 0 auto;}
.main_slogan{ position: absolute; left: 0; top: 198px;}
.main_slogan p{ }

/* Main Slogan Event */
.main_slogan .txt01 p{ font-size: 6.5rem; color: #fff; font-family: 'Gmarket Sans'; line-height: 1.2;}
.main_slogan .txt01 .t01.wave{ }
.main_slogan .txt01 .t02.wave{ animation-delay: 0.2s; font-weight: 700;}
.txt02.wave_anim .wave{ animation-delay: 0.4s;}

.main_slogan .txt02{ font-size: 2.4rem; color: #fff; margin-top: 1.6rem;}

.wave_anim {
	overflow: hidden;
}
.wave_anim .wave {
	-webkit-animation: common_wave 1.4s cubic-bezier(0.165, 0.84, 0.44, 1) both;
	animation: common_wave 1.4s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

.wave_anim > .wave {
	display: block;
	transform: translateY(125%);
	opacity: 0;
}

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

/*##################################################### 시안 A #####################################################*/
.dim_bg{}

/* 레이어 팝업 */
.layer_pop_wrap{ display: none;}
.layer_pop_loc{ position: fixed; min-width: 40rem; min-height: 328px; z-index: 9999; border-radius: 1rem; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99999;}
.layer_pop_top{ background-color: var(--mma-color-prim); padding: 0 2.5rem; height: 6rem; display: flex; justify-content: space-between; align-items: center;}
.layer_pop_top .tit{ font-size: 2.1rem; font-weight: 700; color: #fff;}
.layer_pop_cont{ min-height: 6rem; background: #fff; padding: 2.5rem;}
.layer_pop_btn_wrap{ margin-top: 2.5rem; display: flex; gap: 1rem;}
.layer_pop_btn_wrap button{ flex: 1;}
.btn_layerpop_close{ width: 2.2rem; height: 2.2rem; display: inline-flex; justify-content: center; align-items: center;}
.btn_layerpop_close::before{
	content: "";
	display: inline-flex;
    width: 22px;
    height: 22px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_close.svg");
    mask-image: url("../images/icon/ico_close.svg");	
	background-color: #fff;
}

@media (max-width: 766px) {
	.layer_pop{ min-width: calc(100% - 2rem) !important; width: calc(100% - 2rem) !important;}
}

.dim_bg{ position: fixed; top: 0; right: 0; z-index: 9999; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none;}

/* 위치 변경 팝업 */
.change_loc_pop_wrap{ width: 40rem;}
.change_loc_pop_wrap .layer_pop{ height: 330px;}
.loc_chang_list{ display: flex; flex-direction: column; gap: .8rem;}
.loc_chang_list li{ display: flex; align-items: center;}
.loc_chang_list li label{ width: 10rem; font-size: 1.7rem; font-weight: 700;}
.loc_chang_list li select{}

@media (max-width: 766px) {
	.change_loc_pop{ width: calc(100% - 2rem);}
}

.main_inner{ width: 1300px; margin: 0 auto;}
.main_inner.wide{ width: 100%;}

.main_roll_wrap{ position: relative; height: 768px; background: url("../images/main/main_roll_bg.jpg") no-repeat top 2px center; background-size: cover; display: flex; align-items: center;}

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

.main_roll_text{ display: flex; flex-direction: column; justify-content: center; gap: 26px;}

.main_roll_text .roll_tit{ margin-left: -9px;}
.main_roll_text .text_area{ display: flex; flex-direction: column; gap: 14px;}
.main_roll_text .text_area .txt01{ color: #fff; font-size: 42px;}
.main_roll_text .text_area .txt01 strong{ display: block;}
.main_roll_text .text_area .txt02{ color: #fff; font-size: 19px;}

.myloc_water_top{ margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between;}
.roll_my_location{ font-size: 2.1rem; display: inline-flex; align-items: center; gap: 1.2rem;}
.roll_my_location::before{ content: ""; width: 4rem; height: 4rem; background: url("../images/main/roll_my_loc.png") no-repeat; border-radius: 1.2rem; display: inline-flex; box-shadow: 0 20px 30px rgba(30, 91, 122, 0.1); }

.card01_list{ display: flex; flex-wrap: wrap; gap: 1.6rem;}
.card01_list > li{ position: relative; border-radius: 12px; box-shadow: 0 5px 15px rgba(4, 37, 69, 0.1); height: 200px; transition: all 0.3s; border: 1px solid #e8f4fc; transform: translateY(0); height: 200px;
	flex: 1 1 calc(25% - 16px);
	/* width: calc(25% - 15px); */
	background-color: #fff;
}

.btn_my_location{ width: 8rem; height: 4rem; border-radius: 1rem; border: 1px solid #d6d6d6; background-color: #fff; display: inline-flex; justify-content: center; align-items: center; gap: .5rem;}
.btn_my_location::before{ content: ""; width: 1.8rem; height: 1.8rem; background: url("../images/main/icon_my_location.png") no-repeat; display: inline-flex;}


 .card01_list > li:hover{
	width: 210px; height: 200px;
	transform: translateY(-6px);
	border: 1px solid #0095ff;
	box-shadow: 0 12px 32px rgba(59,130,246,0.15);
	z-index: 2;
}

.card01_list > li > img{ width: 210px; height: 200px; transition: all 0.1s;}
.card01_list > li > div{ position: relative; height: 100%;}

.section_tit {
	position: absolute; right: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

/* 보일 때 */
.section_tit.show {
    opacity: 1;
    transform: translateY(0);
}

.top_go{ position: fixed; bottom: 20px; right: 20px;}


.sec_middle_menu{ position: fixed; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;}
.sec_middle_menu li{ text-align: right;}
.sec_middle_menu li button{ font-size: 15px; opacity: .75;}

.sec_middle_menu li.on button{ font-size: 17px; font-weight: 600; opacity: 1; padding: 6px 0;}


.sec_middle_menu.bg_ch li button{ color: #fff;}

/* 활성 메뉴 */

.sec_middle_menu,
.top_go {
    transition: opacity 0.3s ease;
}



/* 설명창 스타일 */
.desc-item { display: none; }
.desc-item.active { display: block; }


/*################### 카드 롤 ###################*/


/* ===== 카드 롤링 컨테이너 ===== */
.card-roller {
	position: relative;
	height: 540px;
	perspective: 1200px;
	width: 944px;
}

.card-roller-inner {
	position: relative;
	height: 100%;
	transform-style: preserve-3d;
}

/* 카드 스택 - 아래로 포개져 쌓인 느낌 */
.roller-card {
	position: absolute;
	height: 100%;
	background: white;
	border-radius: 24px;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
}
.roller-card.c01{
	border: 1px solid #fff;
	background-color: #e8f4fc;
	padding: 28px 28px 0 28px;
}

.roller-card.c02{ display: flex; justify-content: center; align-items: center;}
.roller-card.c03{ overflow: hidden;}

/* 맨 앞 카드 */
.roller-card[data-position="0"] {
	width: 100%;
	left: 0;
	top: 0;
	z-index: 4;
	box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

/* 두 번째 카드 (뒤에 쌓임 - 위로) */
.roller-card[data-position="1"] {
	width: 94%;
	left: 3%;
	top: -14px;
	z-index: 3;
	background: white;
	box-shadow: 0 15px 40px rgba(0,0,0,0.15);
	opacity: .6;
}

/* 세 번째 카드 */
.roller-card[data-position="2"] {
	width: 88%;
	left: 6%;
	top: -28px;
	z-index: 2;
	background: white;
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	opacity: .4;
}

/* 네 번째 카드 (숨김) */
.roller-card[data-position="3"] {
	width: 88%;
	left: 6%;
	top: -28px;
	z-index: 1;
	opacity: 0;
	pointer-events: none;
}


/* 다음 카드 전환: 앞 카드가 아래로 내려가면서 뒤로 */
.roller-card.to-back {
	animation: toBack 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes toBack {
	0% {
		width: 100%;
		left: 0;
		top: 0;
		opacity: 1;
		z-index: 4;
	}
	40% {
		width: 97%;
		left: 1.5%;
		top: 40px;
		opacity: 0.9;
		z-index: 4;
	}
	100% {
		width: 88%;
		left: 6%;
		top: -28px;
		opacity: 0;
		z-index: 1;
	}
}

/* 이전 카드 전환: 뒤 카드가 앞으로 나옴 */
.roller-card.to-front {
	animation: toFront 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes toFront {
	0% {
		width: 88%;
		left: 6%;
		top: -28px;
		opacity: 0;
		z-index: 1;
	}
	60% {
		width: 97%;
		left: 1.5%;
		top: 40px;
		opacity: 0.7;
		z-index: 4;
	}
	100% {
		width: 100%;
		left: 0;
		top: 0;
		opacity: 1;
		z-index: 4;
	}
}


/* mm_card 공통 */
.mm_card_multi{ position: relative; z-index: 2;}
.mm_card_box{ padding: 1.6rem 2rem; border-radius: 1.2rem; /* background-color: #fff; */ height: 100%; background-repeat: no-repeat; display: flex; flex-direction: column; justify-content: space-between;}
.mm_card_box:hover{}
.mm_card_top{ display: flex; align-items: center; justify-content: space-between;}
.mm_card_top strong{ font-size: 1.7rem;}

.mmc_num{ font-size: 2.6rem;}
.mmc_num em{ font-size: 1.7rem; padding-left: .4rem; letter-spacing: -0.6px;}

.mm_card_foot{ display: flex; flex-direction: column;}
.mm_card_foot .name{ font-size: 1.3rem; display: inline-flex; align-items: center; gap: .3rem;}
.mm_card_foot .name::before{
	content: "";
	display: inline-flex;
    width: 16px;
    height: 16px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/main/icon_mc_poin.svg");
    mask-image: url("../images/main/icon_mc_poin.svg");	
	background-color: #808993;
	
}
.mm_card_foot .date{ font-size: 1.3rem; color: #555;}

.card_more_list{ border: 1px solid var(--mma-color-prim); border-radius: 1rem; padding: .8rem .4rem; background-color: #fff; position: absolute; top: 4.2rem; right: 0rem; z-index: 100; display: none;}
.card_more_list li{}
.card_more_list li button{ padding: 0 2rem 0 1.2rem; font-size: 1.5rem; width: 100%; height: 3rem; white-space: nowrap; display: flex; align-items: center;}
.card_more_list li.on button{ color: var(--mma-text-prim); font-weight: 600; background-color: #e8f4fc;}

/* mm_card01 */
.mm_card01{ /* background-image: url("../images/main/mm_card01_bg.png"); background-position: top 5.2rem right 0; */}

.zindex_add{ z-index: 10;}

.mm_card_multi{ display: none;}
.mm_card_num01{ display: block;}

/* 매우좋음:sj01, 좋음:sj02, 약간좋음:sj03, 보통:sj04, 약간나쁨:sj05, 나쁨:sj06, 매우나쁨:sj07 */

/* mm_card02 */
.fb_sj{ width: 5.8rem; height: 2.4rem; font-size: 1.3rem; border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center;}
.fb_sj.sj01{ color: #0033d8; background-color: #cfe4ff;} /* 매우좋음 */
.fb_sj.sj02{ color: #00857f; background-color: #b2e9e6;} /* 좋음 */
.fb_sj.sj03{ color: #4b8704; background-color: #e0efcd;} /* 약간좋음 */
.fb_sj.sj04{ color: #2b7093; background-color: #dfe7eb;} /* 보통 */
.fb_sj.sj05{ color: #a37400; background-color: #feeab8;} /* 약간나쁨 */
.fb_sj.sj06{ color: #b45a00; background-color: #fcdcbb;} /* 나쁨 */
.fb_sj.sj07{ color: #d12000; background-color: #fac6bd;} /* 매우나쁨 */

.mmc_num_wrap{ display: flex; align-items: center; justify-content: space-between;}
.fb_sj_graph{ height: 50px;}

/* mm_card03 */
/* .mm_card03{ background-image: url("../images/main/mm_card03_bg.png"); background-position: top 4.2rem right -5.2rem;} */
.mm_card03 .mmc_num_pname{ display: block; font-size: 1.5rem;}


/* mm_card04 */
.mm_card04{ /* background-image: url("../images/main/mm_card04_bg.png"); background-position: top 3.8rem right -2.2rem; */}
.mm_card04 .mm_card_cont{ position: relative;}

.mmc_price_wrap{ position: relative; height: 4.8rem; border-radius: 1.2rem; border: 1px solid #e5e5e5; background-color: rgba(255, 255, 255, .75); display: flex; justify-content: center; align-items: center;}
.mmc_price_wrap::after{ content: ""; width: 4.2rem; height: 2.4rem; background: url("../images/main/mm_card04_icon01.png") no-repeat; position: absolute; right: -.5rem; bottom: -1.8rem;}

.mm_card04 .mmc_price_wrap{ margin-top: 2rem;}
.w_price_txt{ font-size: 1.5rem; color: #255b91; position: absolute; left: 0; top: -.6rem;}

.mmc_text_wrap{ width: 7.8rem; height: 7.8rem; background: url("../images/main/mm_card04_text_bg.png") no-repeat; display: inline-flex; justify-content: center; align-items: center;}
.mmc_num.text{ font-size: 1.9rem;}

/* mm_card05 */
.mm_card05{ /* background-image: url("../images/main/mm_card05_bg.png"); background-position: bottom -.8rem right -7.6rem; */}

.mmc_hs_wrap{ margin: 0 0 -1rem 3.6rem; width: 9.6rem; height: 9.6rem; background: url("../images/main/mm_card05_text_bg.png") no-repeat; display: inline-flex; justify-content: center; align-items: center;}

.mmc_rc_wrap{ width: 11.5rem; height: 6.4rem; background: url("../images/main/mm_card05_rc_bg.png") no-repeat; display: flex; justify-content: center; align-items: center;}
.mm_card_cont:has(.mmc_rc_wrap){ display: flex; justify-content: center; align-items: center;}

/* mm_card06 */
.mmc_gmg_wrap{ width: 16.3rem; height: 8.2rem; background-repeat: no-repeat; display: flex; justify-content: center; align-items: flex-end;}

.gmg01{ /* background-image: url("../images/main/gmg01.png"); */} /* 정상 */
.gmg02{}
.gmg03{}
.gmg05{}
.gmg05{}

.mm_card06 .mm_card_foot{ flex-direction: row; justify-content: space-between;}

/* mm_card07 */
.mmc_jih_wrap{ position: relative;}
.mmc_jih_wrap .mmc_num{ position: absolute; top: 0;}
.mmc_jih_wrap .jih_graph{ height: 94px;}

/* mm_card08 */
.mm_card08{ /* background-image: url("../images/main/mm_card08_bg.png"); */ background-position: left 0 top 2px;}
.mmc_yst_graph{ height: 4.9rem; border-bottom: 2px solid #dbdce1; background-repeat: no-repeat; background-position: right 5px bottom 0; display: flex; align-items: flex-end;}
.mmc_yst_graph.yst01{ /* background-image: url("../images/main/mm_card08_gauge01.png"); */} /* 적합 */
.mmc_jih_wrap .jih_graph.jih02{ background-image: url("../images/main/mm_card08_gauge02.png");} /* 부적합 */

.mmc_yst_graph .mmc_num{ margin-bottom: .6rem; display: inline-flex; align-items: center; gap: .6rem;}
.mmc_yst_graph .mmc_num::before{ content: ""; width: 1.8rem; height: 1.8rem; background: url("../images/main/mm_card08_chk01.png") no-repeat; display: inline-flex;}
.mmc_yst_graph.jih02 .mmc_num::before{  background: url("../images/main/mm_card08_chk02.png") no-repeat;}

.yst_desc{ font-size: 1.5rem; color: #255b91; margin-top: .8rem;}

.btn_card_more{ width: 1.8rem; height: 1.8rem; display: inline-flex; align-items: center; justify-content: center; position: absolute; right: 1.4rem; top: 1.7rem; z-index: 3;}
.btn_card_more::before{
	content: "";
	display: inline-flex;
    width: 24px;
    height: 24px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/main/icon_setting_fill.svg");
    mask-image: url("../images/main/icon_setting_fill.svg");	
	background-color: #b1b8be;
}

/* 카드 2 */
.roll_card02_wrap{ display: flex;}
.roll_card02_wrap img{ flex: 1; width: 50%;}


/* 카드 컨트롤 버튼 - 오른쪽 세로 배치 */
.card-controls {
	position: absolute;
	right: -60px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	z-index: 10;
}

.card-nav-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,0.15);
	border: 1px solid rgba(255,255,255,0.3);
	color: white;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;	
}

.card-nav-btn:hover {
	background: rgba(255,255,255,0.3);
	transform: scale(1.1);
}

.card-nav-btn:focus {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.card-nav-btn svg {
	width: 22px;
	height: 22px;
}

/* 위/아래 화살표로 변경 */
.card-nav-btn#prevCard svg {
	transform: rotate(90deg);
}

.card-nav-btn#nextCard svg {
	transform: rotate(90deg);
}

/* 카드 인디케이터 - 세로 배치 */
.card-indicators {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.card-indicator {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255,255,255,0.3);
	cursor: pointer;
	transition: all 0.3s;
	border: none;
	padding: 0;
}

.card-indicator:hover {
	background: rgba(255,255,255,0.5);
}

.card-indicator.active {
	background: white;
	height: 24px;
	border-radius: 4px;
}

.card-indicator:focus {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* 자동재생 토글 버튼 */
.autoplay-toggle {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.2);
	color: rgba(255,255,255,0.6);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
	margin-top: 4px;
}

.autoplay-toggle:hover {
	background: rgba(255,255,255,0.2);
	color: white;
}

.autoplay-toggle.playing {
	background: var(--accent);
	border-color: var(--accent);
	color: white;
}

.autoplay-toggle:focus {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.autoplay-toggle svg {
	width: 12px;
	height: 12px;
}

/* 스크린리더 전용 텍스트 */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* 카드 내부 스타일 */
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--gray-200);
}

.location-badge {
	display: flex;
	align-items: center;
	gap: 14px;
}

.location-icon-wrap {
	width: 56px;
	height: 56px;
	background: linear-gradient(135deg, var(--primary), var(--accent));
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.location-icon-wrap svg {
	width: 28px;
	height: 28px;
	color: white;
}

.location-badge h3 {
	font-size: 20px;
	font-weight: 800;
	color: var(--gray-900);
}

.location-badge p {
	font-size: 13px;
	color: var(--gray-500);
}

.btn-change {
	padding: 10px 20px;
	background: var(--gray-100);
	border: none;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--gray-600);
	cursor: pointer;
	transition: all 0.2s;
}

.btn-change:hover {
	background: var(--gray-200);
}

/* 데이터 그리드 */
.data-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.data-cell {
	background: var(--gray-50);
	border-radius: 16px;
	padding: 20px;
	transition: all 0.2s;
	cursor: pointer;
}

.data-cell:hover {
	background: var(--primary);
	transform: translateY(-4px);
}

.data-cell:hover .data-cell-label,
.data-cell:hover .data-cell-value,
.data-cell:hover .data-cell-meta {
	color: white;
}

.data-cell:hover .data-cell-status {
	background: rgba(255,255,255,0.2);
	color: white;
}

.data-cell-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.data-cell-label {
	font-size: 12px;
	color: var(--gray-500);
	transition: color 0.2s;
}

.data-cell-status {
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 700;
	transition: all 0.2s;
}

.status-good { background: #dcfce7; color: #16a34a; }
.status-normal { background: #dbeafe; color: #2563eb; }
.status-caution { background: #fef3c7; color: #d97706; }

.data-cell-value {
	font-size: 28px;
	font-weight: 900;
	color: var(--gray-900);
	transition: color 0.2s;
}

.data-cell-value small {
	font-size: 12px;
	font-weight: 600;
	color: var(--gray-500);
}

.data-cell:hover .data-cell-value small {
	color: rgba(255,255,255,0.7);
}

.data-cell-meta {
	font-size: 11px;
	color: var(--gray-400);
	margin-top: 4px;
	transition: color 0.2s;
}

/* 롤링 인디케이터 */
.roller-indicators {
	position: absolute;
	right: -40px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.roller-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255,255,255,0.3);
	cursor: pointer;
	transition: all 0.3s;
}

.roller-dot.active {
	background: white;
	height: 30px;
	border-radius: 5px;
}

/* ===== 섹션 공통 ===== */
.main_bottom_link {
	padding: 100px 0;
}

.section-header {
	text-align: center;
	margin-bottom: 56px;
}

.section-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--primary-light);
	color: var(--primary);
	padding: 8px 20px;
	border-radius: 50px;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 20px;
}

.section-tag svg {
	width: 16px;
	height: 16px;
}

.section-title {
	font-size: 40px;
	font-weight: 800;
	color: var(--gray-900);
	margin-bottom: 16px;
	letter-spacing: -1px;
}

.section-desc {
	font-size: 17px;
	color: var(--gray-500);
	max-width: 560px;
	margin: 0 auto;
}

/* ===== 카테고리 섹션 (시안3 스타일) ===== */
.category-section {
	background: linear-gradient(180deg, #E0F4FF 0%, #FFFFFF 100%);
}

.categories-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 20px;
	margin-bottom: 48px;
}

.category-item {
	background: white;
	border-radius: 20px;
	padding: 32px 16px;
	text-align: center;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	border: 2px solid transparent;
	box-shadow: 0 4px 20px rgba(59,130,246,0.08);
}

.category-item:hover {
	transform: translateY(-10px);
	box-shadow: 0 12px 40px rgba(59,130,246,0.18);
	border-color: var(--primary);
}

.category-icon {
	width: 68px;
	height: 68px;
	margin: 0 auto 16px;
	background: var(--primary-light);
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease;
}

.category-item:hover .category-icon {
	background: linear-gradient(135deg, var(--primary), var(--accent));
	transform: scale(1.1) rotate(-5deg);
}

.category-icon svg {
	width: 32px;
	height: 32px;
	color: var(--primary);
	transition: color 0.3s;
}

.category-item:hover .category-icon svg {
	color: white;
}

.category-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--gray-900);
	margin-bottom: 4px;
}

.category-sub {
	font-size: 12px;
	color: var(--gray-500);
}

.action-row {
	display: flex;
	justify-content: center;
	gap: 20px;
}

.action-item {
	display: flex;
	align-items: center;
	gap: 18px;
	background: white;
	padding: 24px 32px;
	border-radius: 20px;
	box-shadow: 0 8px 32px rgba(59,130,246,0.12);
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	color: inherit;
}

.action-item:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 48px rgba(59,130,246,0.2);
}

.action-icon {
	width: 56px;
	height: 56px;
	background: linear-gradient(135deg, var(--primary), var(--accent));
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.action-icon svg {
	width: 28px;
	height: 28px;
	color: white;
}

.action-text h4 {
	font-size: 17px;
	font-weight: 700;
	color: var(--gray-900);
	margin-bottom: 4px;
}

.action-text p {
	font-size: 13px;
	color: var(--gray-500);
}

/*############################## 롤링카드 : 카드별 SVG 효과 ##############################*/

/* CARD 1 : 하천길이 */
/* CARD 1 : 저수율 — wrap 을 카드 전체로 덮고 overflow:hidden 으로 클립.
   (그래픽이 카드 테두리를 덮어 hover 테두리가 안 보이던 문제 해결) */
.card_01_svg_wrap{
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: auto !important;
	overflow: hidden !important;
	border-radius: 1.2rem;
	z-index: 1;
	pointer-events: none;
}
.card_01_svg_wrap .graphic{
	position: absolute;
	right: 0;
	bottom: 45px;
	left: auto;
	top: auto;
	width: 210px;
}
.graphic svg { width: 100%; height: auto; display: block; }

/* CARD 2 */
.card_02_svg_wrap{ position: absolute !important; top: 100px !important; left: 50% !important; transform: translateX(-50%); width: 75%;}


/* CARD 3 : 하천길이 — 원래 강줄기(width105, top24, 그라데이션 50%) 복원 + 클립 방식만 추가 */
.card_03_svg_wrap {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: auto !important;
	overflow: hidden !important;
	border-radius: 1.2rem;
	z-index: 1;
	pointer-events: none;
}
.card_03_svg_wrap .river{
	position: absolute;
	right: 0;
	top: 24px;
	left: auto;
	bottom: auto;
	width: 105px;
	-webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
}
.card_03_svg_wrap .river svg { width: 100%; height: auto; display: block; }

/* CARD 4 : 수돗물 — wrap 을 카드 전체로 덮고 overflow:hidden 으로 넘침 클립.
   그래픽(z-index:1) 은 텍스트(.mm_card_multi z-index:2) 뒤에 깔림. */
.card_04_svg_wrap{
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: auto !important;
	overflow: hidden !important;
	border-radius: 1.2rem;
	z-index: 1;
	pointer-events: none;
}
/* 수도꼭지(상단) + 컵(우측), 카드 밖으로 나가는 부분은 wrap 이 잘라냄 (디자이너 원본 값) */
.card_04_svg_wrap .tap{
	position: absolute;
	top: 12px;
	right: -70px;
	width: 200px;
}

/* ===== 카드별 SVG 애니메이션 (cards_combined_6.html 이관) ===== */

/* CARD 2 : BOD 막대 솟음 */
.card_02_svg_wrap .chart svg{ width: 100%; height: auto; display: block; }
.card_02_svg_wrap .bar{
	transform-box: fill-box;
	transform-origin: center bottom;
	transform: scaleY(0);
	animation: barRise .55s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
@keyframes barRise{ from{ transform: scaleY(0); } to{ transform: scaleY(1); } }

/* CARD 3 : 하천길이 강 흐름 (wrap 위치/마스크는 위 .card_03_svg_wrap 에 정의됨) */
.card_03_svg_wrap .river svg{ width: 100%; height: auto; display: block; }

/* CARD 4 : 수돗물 물방울 */
.card_04_svg_wrap .tap svg{ width: 100%; height: auto; display: block; }
.card_04_svg_wrap .tap-drop{
	transform-box: fill-box;
	transform-origin: center top;
	animation: tapDrop .8s ease-in 4 forwards;
}
@keyframes tapDrop{
	0%{ opacity: 0; transform: translateY(-4px) scaleY(.7); }
	25%{ opacity: 1; transform: translateY(2px) scaleY(1); }
	100%{ opacity: 0; transform: translateY(26px) scaleY(1.1); }
}

/* CARD 5 : 하수도 — wrap 을 카드 전체로 덮고 overflow:hidden 으로 넘침 클립.
   물결/컵을 우측·하단 벽에 붙이고 카드 밖 부분은 테두리 안으로 잘라냄. */
.card_05_svg_wrap{
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: auto !important;
	overflow: hidden !important;
	border-radius: 1.2rem;
	z-index: 1;
	pointer-events: none;
}
.card_05_svg_wrap .drop-illust{
	position: absolute;
	right: -28px;
	bottom: -16px;
	left: auto;
	top: auto;
	width: 290px;
}
.card_05_svg_wrap .drop-illust svg{ width: 100%; height: auto; display: block; }
.card_05_svg_wrap .wwave{ transform-box: fill-box; transform-origin: center; animation: wwave 1.6s ease-out both; }
@keyframes wwave{ 0%{ opacity: 0; transform: translateX(14px); } 35%{ opacity: 1; } 60%{ transform: translateX(-3px); } 80%{ transform: translateX(2px); } 100%{ opacity: 1; transform: translateX(0); } }
.card_05_svg_wrap .wdrop{ transform-box: fill-box; transform-origin: center; animation: wdrop 1s cubic-bezier(.34, 1.56, .64, 1) .15s both; }
@keyframes wdrop{ 0%{ opacity: 0; transform: translateY(-14px) scale(.7); } 70%{ opacity: 1; transform: translateY(0) scale(1.06); } 100%{ opacity: 1; transform: translateY(0) scale(1); } }
.card_05_svg_wrap .wbub{ transform-box: fill-box; transform-origin: center; animation: wbub 1.1s ease-out both; }
@keyframes wbub{ 0%{ opacity: 0; transform: translateY(9px) scale(.6); } 60%{ opacity: 1; transform: translateY(0) scale(1); } 100%{ opacity: 1; transform: translateY(0) scale(1); } }

/* CARD 6 : 가뭄단계 게이지 (li 기준으로 JS 앵커링됨 — 필요시 좌표 조정) */
.card_06_svg_wrap{
	position: absolute !important;
	top: 58px !important;
	left: 50% !important;
	transform: translateX(-50%);
	width: 185px;
	z-index: 1;
}
.card_06_svg_wrap .gauge svg{ width: 100%; height: auto; display: block; }

/* CARD 7 : 지하수 수위 — 카드 전체 wrap + overflow:hidden 클립. 미니 영역차트 + 우측 수위 막대 (신규 제작 SVG) */
.card_07_svg_wrap{
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: auto !important;
	overflow: hidden !important;
	border-radius: 1.2rem;
	z-index: 1;
	pointer-events: none;
}
.card_07_svg_wrap .jih-illust{
	position: absolute;
	left: 16px;
	bottom: 60px;
	width: 176px;
}
.card_07_svg_wrap .jih-illust svg{ width: 100%; height: auto; display: block; }
.mm_card07 .mm_card_top,
.mm_card07 .mm_card_cont,
.mm_card07 .mm_card_foot{ position: relative; z-index: 2; }

/* CARD 8 : 약수터 — 카드 전체 wrap + overflow:hidden 클립. BAD~GOOD 미니 게이지 (신규 제작 SVG) */
.card_08_svg_wrap{
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: auto !important;
	overflow: hidden !important;
	border-radius: 1.2rem;
	z-index: 1;
	pointer-events: none;
}
.card_08_svg_wrap .yst-illust{
	position: absolute;
	right: 22px;
	top: 49px;
	width: 106px;
}
.card_08_svg_wrap .yst-illust svg{ width: 100%; height: auto; display: block; }
.mm_card08 .mm_card_top,
.mm_card08 .mm_card_cont,
.mm_card08 .mm_card_foot{ position: relative; z-index: 2; }

/* 모션 최소화 사용자 배려 */
@media (prefers-reduced-motion: reduce){
	.card_02_svg_wrap .bar{ transform: scaleY(1); animation: none; }
	.card_04_svg_wrap .tap-drop{ animation: none; opacity: 1; }
	.card_05_svg_wrap .wwave,
	.card_05_svg_wrap .wdrop,
	.card_05_svg_wrap .wbub{ animation: none; opacity: 1; transform: none; }
}


/* ===== GIS 섹션 ===== */
/* ===== GIS 섹션 (소프트 블루 톤) ===== */
.gis-section {
	background: linear-gradient(135deg, #1e3a5f 0%, #2d5478 100%);
	color: white;
}

.gis-layout {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 60px;
	align-items: center;
}

.gis-info .section-tag {
	background: rgba(255,255,255,0.15);
	color: white;
}

.gis-info .section-title {
	color: white;
	text-align: left;
	font-size: 32px;
}

.gis-info .section-desc {
	color: rgba(255,255,255,0.7);
	text-align: left;
	margin: 0 0 32px 0;
	max-width: none;
}

.gis-features {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 32px;
}

.gis-feat {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	background: rgba(255,255,255,0.05);
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.08);
	transition: all 0.2s;
}

.gis-feat:hover {
	background: rgba(255,255,255,0.08);
	transform: translateX(6px);
}

.gis-feat-icon {
	width: 40px;
	height: 40px;
	background: var(--accent);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.gis-feat-icon svg {
	width: 20px;
	height: 20px;
	color: white;
}

.gis-feat h4 {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 2px;
}

.gis-feat p {
	font-size: 12px;
	opacity: 0.6;
}

.btn-accent {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 28px;
	background: var(--accent);
	color: white;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	transition: all 0.3s;
}

.btn-accent:hover {
	background: #00a89a;
	transform: translateY(-2px);
}

.btn-accent svg {
	width: 18px;
	height: 18px;
}

.gis-preview {
	background: rgba(255,255,255,0.05);
	border-radius: 24px;
	padding: 24px;
	border: 1px solid rgba(255,255,255,0.08);
}

.gis-map-area {
	height: 280px;
	background: linear-gradient(135deg, #1e3a5f, #2d5a87);
	border-radius: 12px;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
}

.gis-map-area::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(circle at 30% 40%, rgba(6,182,212,0.3) 0%, transparent 40%),
		radial-gradient(circle at 70% 60%, rgba(59,130,246,0.2) 0%, transparent 40%);
}

.gis-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.gis-stat {
	text-align: center;
	padding: 16px;
	background: rgba(255,255,255,0.05);
	border-radius: 10px;
}

.gis-stat-value {
	font-size: 22px;
	font-weight: 800;
	color: var(--accent);
}

.gis-stat-label {
	font-size: 11px;
	opacity: 0.5;
}

/* ===== 물의 여행 섹션 ===== */
.water-journey {
	background: white;
}

.journey-container {
	background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
	border-radius: 24px;
	padding: 48px;
}

.journey-timeline {
	display: flex;
	justify-content: space-between;
	position: relative;
}

.journey-timeline::before {
	content: '';
	position: absolute;
	top: 40px;
	left: 10%;
	right: 10%;
	height: 4px;
	background: linear-gradient(90deg, #0EA5E9, #06B6D4, #10B981, #F59E0B, #8B5CF6);
	border-radius: 2px;
}

.journey-step {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	z-index: 1;
}

.journey-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
	transition: transform 0.3s;
	cursor: pointer;
}

.journey-step:hover .journey-icon {
	transform: scale(1.15);
}

.journey-icon svg {
	width: 36px;
	height: 36px;
	color: white;
}

.journey-icon.source { background: linear-gradient(135deg, #0EA5E9, #0284C7); }
.journey-icon.treatment { background: linear-gradient(135deg, #06B6D4, #0891B2); }
.journey-icon.supply { background: linear-gradient(135deg, #10B981, #059669); }
.journey-icon.sewage { background: linear-gradient(135deg, #F59E0B, #D97706); }
.journey-icon.discharge { background: linear-gradient(135deg, #8B5CF6, #7C3AED); }

.journey-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--dark);
	margin-bottom: 4px;
}

.journey-sub {
	font-size: 12px;
	color: var(--gray-500);
	margin-bottom: 12px;
}

.journey-stat {
	background: white;
	padding: 12px 20px;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.journey-stat-value {
	font-size: 18px;
	font-weight: 800;
	color: var(--primary);
}

.journey-stat-value small {
	font-size: 11px;
	font-weight: 500;
}

.journey-stat-label {
	font-size: 10px;
	color: var(--gray-500);
}

.section_wrap{ height: 945px; display: flex; align-items: center; justify-content: center;}
.section_wrap .main_inner{ display: flex; flex-direction: column;}

/* 주제별 물 데이터 */
.main_section01{ background: url("../images/main/bg01.jpg") no-repeat; background-size: cover;}

/* 물여정 */
.main_section02{ background: url("../images/main/bg02.jpg") no-repeat; background-size: cover;}

/* 통합검색 */
.main_section03{ background: url("../images/main/bg03.jpg") no-repeat; background-size: cover;}

/* 공간정보 */
.main_section04{ background: url("../images/main/bg04.jpg") no-repeat; background-size: cover;}

/* 데이터 허브 */
.main_section05{ background: url("../images/main/bg05.jpg") no-repeat; background-size: cover;}

/* 주제별 공간정보 */
.main_section06{ background: url("../images/main/bg06.jpg") no-repeat; background-size: cover; width: 100%; overflow: hidden;}

/* 물모아 소식 */
.main_section07{ background: url("../images/main/bg07.jpg") no-repeat; background-size: cover;}

.main_bottom_link{ background: url("../images/main/bg08.jpg") no-repeat; background-size: cover; height: 564px; display: flex; justify-content: center; align-items: center;}

.main_section04 .main_inner{ flex-direction: column;}
.sec_tit_img{ text-align: center; width: 100%; margin-bottom: 65px;}


/* Section 공통 */
.main_section_slogan{ position: relative; display: flex; flex-direction: column; align-items: center;}

.mss_tit{ font-size: 1.9rem; color: #0b50d0; display: inline-flex; align-items: center; gap: 1.2rem;}
.mss_tit::before{ content: ""; width: 2.5rem; height: 2.8rem; background: url("../images/main/mss_tit.png") no-repeat; display: inline-flex;}
.mms_slogan{ font-size: 4rem; font-weight: 600; margin-top: 3.4rem;}
.mms_desc{ font-size: 1.9rem; font-weight: 600; color: #6d7882; margin-top: 2.2rem;}

.section_cont{ margin-top: 6rem;}

/* main_section02 물의 여정 */
.main_section02 .main_section_slogan .mms_desc{ margin-top: 1.2rem;}
.main_section02 .main_section_slogan .mms_desc{ display: flex; align-items: center; gap: 1.5rem;}
.w_flow_location{ height: 4.8rem; padding: 0 2rem; border-radius: 1.2rem; background-color: #fff; color: #0b50d0; display: inline-flex; align-items: center;}

.btn_water_my_location{ font-size: 1.7rem; height: 4.8rem; border-radius: 4.8rem; padding: 0 2rem; background-color: #c7eaff; border: 1px solid #fff; display: inline-flex; align-items: center; gap: .4rem; position: absolute; right: 0; bottom: 0;}
.btn_water_my_location::before {
    content: "";
    width: 1.8rem;
    height: 1.8rem;
    background: url("../images/main/icon_my_location.png") no-repeat;
    display: inline-flex;
}

.water_flow_wrap{ height: 45.4rem; padding: 7rem 7rem 0 7rem; border-radius: 5rem 5rem 0 0;
	background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .2) 80%);
}
.water_flow_list_wrap{}

.water_flow_list{ position: relative; display: flex; justify-content: space-between; }
.water_flow_list::before{ content: ""; position: absolute; width: 100rem; height: 1.4rem; background: url("../images/main/flow_bar.png") repeat-x; left: 80px; top: 76px;}
.water_flow_list li{ flex: 1; text-align: center; z-index: 2;}

.wfl_item{ height: 23.6rem; display: flex; flex-direction: column; align-items: center;}
.wfl_item .step_tit{}
.wfl_item .step_icon{}
.wfl_item .step_num{ margin-top: 2rem; font-size: 2.2rem; font-weight: 600; padding: 0 2rem; border-radius: .4rem; border: 1px solid #8fc1e2; height: 3.6rem; background-color: #fff; display: inline-flex; align-items: center; gap: .4rem;}
.wfl_item .step_num em{ font-size: 1.5rem;}
.wfl_item .step_desc{ margin-top: 1rem; font-size: 1.5rem;}
.water_flow_list li .step_loc{ font-size: 1.5rem; font-weight: 600; color: #0b50d0; display: inline-flex; align-items: center; gap: .2rem;}

.water_flow_btn_wrap{ margin-top: 7rem; text-align: center;}
.btn_water_flow_go{ height: 4.8rem; border-radius: 4.8rem; padding: 0 3.2rem; border: 1px solid #e1e6eb; font-size: 1.7rem; display: inline-flex; align-items: center; gap: .4rem;}
.btn_water_flow_go::after{
	content: "";
    display: inline-flex;
    width: 18px;
    height: 18px;
    forced-color-adjust: none;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");
    background-color: #000;
	transform: rotate(-90deg);
}

.water_flow_list li .step_loc::before {
    content: "";
    display: inline-flex;
    width: 16px;
    height: 16px;
    forced-color-adjust: none;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/main/icon_mc_poin.svg");
    mask-image: url("../images/main/icon_mc_poin.svg");
    background-color: #a0a0a0;
}

.water_flow_list .step_icon {
    position: relative;
    width: 9rem;
    height: 9rem;
    background: var(--surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border: 4px solid #fff;
    z-index: 2;
    transition: all 0.3s ease;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center;
}

:root {
	--step1-color: #246beb;
	--step2-color: #00a2ff;
	--step3-color: #12ba45;
	--step4-color: #eeb10c;
	--step5-color: #f6507b;
	--step6-color: #5360df;
}


/* 1단계 */
.wfl01 .step_icon {
	background-color: var(--step1-color);
	background-image: url("../images/main/step_icon01.svg");
	background-size: 48px;
}

/* 2단계 */
.wfl02 .step_icon {
	background-color: var(--step2-color);
	background-image: url("../images/main/step_icon02.svg");
	background-size: 48px;
}

/* 3단계 */
.wfl03 .step_icon {
	background-color: var(--step3-color);
	background-image: url("../images/main/step_icon03.svg");
	background-size: 48px;
}

/* 4단계 */
.wfl04 .step_icon {
	background-color: var(--step4-color);
	background-image: url("../images/main/step_icon04.svg");
	background-size: 48px;
}

/* 5단계 */
.wfl05 .step_icon {
	background-color: var(--step5-color);
	background-image: url("../images/main/step_icon05.svg");
	background-size: 48px;
}

/* 6단계 */
.wfl06 .step_icon {
	background-color: var(--step6-color);
	background-image: url("../images/main/step_icon06.svg");
	background-size: 48px;
}

/* main_section03 통합검색 */
.main_section03 .mss_tit{ color: #d8e5fd;}
.main_section03 .mms_slogan{ color: #fff;}
.main_section03 .mms_desc{ color: #d8e5fd;}

.main_total_search_wrap{ text-align: center; display: flex; flex-direction: column; align-items: center;}

.mt_sch_wrap{ width: 97rem; display: flex; flex-direction: column;}
.mt_sch_form{ height: 9rem; width: 100%; border-radius: 2rem; padding: 0 2rem 0 4rem; background-color: #fff; overflow: hidden; display: flex; align-items: center;
	box-shadow: 0 15px 20px rgba(33, 54, 106, 0.6); 
}
.mt_sch_form input[type="text"]{ flex: 1; border: none; font-size: 1.9rem;}
.mt_sch_form input[type="text"]::placeholder{ color: #464c53;}

.mt_sch_tag{ margin-top: 2rem;}
.mt_sch_tag dl{ font-size: 1.7rem; display: flex; justify-content: center; gap: 3.2rem;}
.mt_sch_tag dl dt{ color: #d8e5fd; position: relative;}
.mt_sch_tag dl dt::after{ content: ""; width: 2px; height: 1.6rem; background-color: #7c8cb0; display: inline-flex; position: absolute; right: -1.6rem; top: 6px;}
.mt_sch_tag dl dd{ color: #d8e5fd;}

.btn_mt_sch{ width: 16rem; height: 6rem; border-radius: 6rem; border: 1px solid #fff; font-size: 1.9rem; font-weight: 600; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 1rem;
	background: linear-gradient(90deg,rgba(0, 98, 199, 1) 0%, rgba(0, 149, 226, 1) 100%);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
}
.btn_mt_sch:active{ background: linear-gradient(90deg,rgba(0, 98, 199, .8) 0%, rgba(0, 149, 226, .8) 100%);}
.btn_mt_sch::before{
	content: "";
    display: inline-flex;
    width: 2.6rem;
    height: 2.6rem;
    forced-color-adjust: none;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_sch.svg");
    mask-image: url("../images/icon/ico_sch.svg");
    background-color: #fff;
}

.main_total_sch_card{ margin-top: 4rem; width: 100%; display: flex; justify-content: space-between;}

.main_total_sch_card li{ padding: 3rem; border: 1px solid rgba(255, 255, 255, 0.2); width: 30.8rem; height: 28rem; border-radius: 1.2rem; display: flex; flex-direction: column; justify-content: space-between;
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
}
.main_total_sch_card li:nth-child(1){ background-color: rgba(19, 49, 93, .4);}
.main_total_sch_card li:nth-child(2){ background-color: rgba(28, 65, 130, .4);}
.main_total_sch_card li:nth-child(3){ background-color: rgba(35, 77, 159, .4);}
.main_total_sch_card li:nth-child(4){ background-color: rgba(43, 93, 196, .4);}

.mts_card{}
.mts_c_top{ display: flex; align-items: center; gap: 3rem;}
.mts_tit{ color: #fff; font-size: 2.4rem; display: flex; flex-direction: column; align-items: flex-start;}
.mts_c_desc{ color: #d8e5fd; font-size: 1.5rem; text-align: left;}

.mts_c_tag{ display: flex; gap: .6rem;}
.mts_c_tag a{ font-size: 1.3rem; height: 2.8rem; padding: 0 1rem; border-radius: .8rem; background-color: #e1f5ff; white-space: nowrap; display: inline-flex; align-items: center;
	transition: transform .25s ease;
}
.mts_c_tag a:hover{
    transform: translateY(-4px);
	box-shadow: 0 4px 0 rgba(18, 26, 40, .6); 
}

.mts_icon{ width: 6.2rem; height: 6.2rem; border-radius: 1.2rem; display: inline-flex; justify-content: center; align-items: center;}

.mts01 .mts_icon{ background: linear-gradient(135deg,rgba(104, 119, 226, 1) 0%, rgba(116, 81, 171, 1) 100%);}
.mts02 .mts_icon{ background: linear-gradient(135deg,rgba(21, 163, 140, 1) 0%, rgba(52, 238, 128, 1) 100%);}
.mts03 .mts_icon{ background: linear-gradient(135deg,rgba(255, 119, 105, 1) 0%, rgba(254, 190, 90, 1) 100%);}
.mts04 .mts_icon{ background: linear-gradient(135deg,rgba(70, 180, 254, 1) 0%, rgba(10, 234, 254, 1) 100%);}

.mts_icon::before{ 
	content: "";
    display: inline-flex;
    forced-color-adjust: none;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    background-color: #000;
}
.mts01 .mts_icon::before{
	width: 32px; height: 29px;
	-webkit-mask-image: url("../images/main/mts_icon01.svg");
    mask-image: url("../images/main/mts_icon01.svg");
}
.mts02 .mts_icon::before{
	width: 24px; height: 29px;
	-webkit-mask-image: url("../images/main/mts_icon02.svg");
    mask-image: url("../images/main/mts_icon02.svg");
}
.mts03 .mts_icon::before{
	width: 30px; height: 27px;
	-webkit-mask-image: url("../images/main/mts_icon03.svg");
    mask-image: url("../images/main/mts_icon03.svg");
}
.mts04 .mts_icon::before{
	width: 31px; height: 20px;
	-webkit-mask-image: url("../images/main/mts_icon04.svg");
    mask-image: url("../images/main/mts_icon04.svg");
}


/* main_section04 공간정보 GIS */





/* main_section05 데이터 */

/* main_section06 주제별 공간정보 */
.main_section06 .mss_tit{ color: #d8e5fd;}
.main_section06 .mms_slogan{ color: #fff;}
.main_section06 .mms_desc{ color: #d8e5fd;}

.jgi_wrap{ position: relative; overflow: hidden; min-width: 1900px}

.jgi_slide{ display: flex; justify-content:flex-start; gap: 4rem; margin-left: -200px; margin-right: -200px;}

.jgi_slide .first_slide{ opacity: .4;}
.jgi_slide .last_slide{ opacity: .4;}


.jgi_btn_wrap{}
.btn_jgi_slide{ position: absolute; height: 4rem; width: 4rem; border-radius: 4rem; background-color: #fff; z-index: 2; top: 200px;}
.btn_jgi_slide.prev{ left: 200px;}
.btn_jgi_slide.next{ right: 200px;}




.jgi_wrap2{ border: 1px solid red;}

.btn_jgi_slide2{ position: absolute; height: 4rem; width: 4rem; border-radius: 4rem; background-color: #fff; z-index: 200; top: 200px;}
.btn_jgi_slide2.prev{ left: 200px;}
.btn_jgi_slide2.next{ right: 200px;}


#twFsiteBan{ margin-left: -320px; position: relative; width: calc(100% + 400px);}
/*
#twFsiteBan::before,
#twFsiteBan::after{ content: ""; position: absolute; width: 400px; height: 100%; background-color: #000; border-radius: 1.2rem; opacity: .4; top: 0; z-index: 10; 
	background-color: rgba(19, 49, 93, .4);
	backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}
#twFsiteBan::before{ left: 0;}
#twFsiteBan::after{ right: 82px;}
*/
#twFsiteBan .swiper-indicator{ position: absolute; left: 500px; top: -40px;}

#twFsiteBan .swiper-wrapper .opa_slide{ opacity: .4; margin: 0 8rem;}
#twFsiteBan .swiper-wrapper li:not(.opa_slide){
    
}



/* main_section07 물모아 소식 */
.mma_news_wrap{ display: flex; gap: 8.2rem;}

.mma_bbs{ flex: 1;}
.mma_bbs_top{ margin-bottom: 3.6rem; display: flex; justify-content: space-between;}

.mma_bbs_tab{ display: flex; gap: 1.2rem;}
.mma_bbs_tab li{}
.mma_bbs_tab li button{ height: 4.4rem; border-radius: 4rem; border: 1px solid #cdd1d5; padding: 0 2.6rem; display: inline-flex; align-items: center;}
.mma_bbs_tab li.on button{ color: #fff; font-weight: 600; background-color: #256ef4; border: 1px solid #fff;}

.mma_bbs_list{ border-top: 1px solid #1e2124;}
.mma_bbs_list li{ height: 8rem; border-bottom: 1px solid #cdd1d5; display: flex; align-items: center; gap: 2.2rem;}
.mma_bbs_list li strong{ width: 8.4rem; color: #0b50d0; text-align: center;}
.mma_bbs_list li a{ flex: 1; display: inline-flex; align-items: center;}
.mma_bbs_list li a b{
	display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;}
.mma_bbs_list li a .svg-icon{ margin-left: .6rem;}
.mma_bbs_list li span{ padding: 0 1.4rem; font-size: 1.7rem; color: #464c53;}

.mma_bbs_list{ display: none;}
.mma_bbs_list.mbl01{ display: block;}

.btn_bbs_more{ color: #464c53; font-size: 1.7rem; display: inline-flex; align-items: center; gap: 1rem;}
.btn_bbs_more::after{
	content: "";
    display: inline-flex;
    width: 2rem;
    height: 2.2rem;
    forced-color-adjust: none;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_more.svg");
    mask-image: url("../images/icon/ico_more.svg");
    
	background-color: #1e2124;
}

.mma_roll_banner{ width: 40.6rem; }

.roll_banner_swiper{ border: 1px solid #cdd1d5; overflow: hidden; border-radius: 2rem;}
.roll_banner_swiper .slide_img img{ width: 40.4rem; height: 32rem; vertical-align: middle;}

.roll_banner_swiper .swiper-indicator{ height: 8rem; background-color: #eef1f8; padding: 0 2rem;}

.roll_banner_swiper .swiper-indicator .swiper-button-next,
.roll_banner_swiper .swiper-indicator .swiper-button-prev{ width: 4rem; height: 4rem;}

.roll_banner_swiper .swiper-indicator .swiper-pagination{ position: relative; border: none;}
.roll_banner_swiper .swiper-pagination.swiper-pagination-fraction .swiper-pagination-current{ color: #0b50d0;}

/* main_section08 통합검색 */

/* main_section09 main_bottom_link 물모아 데이터 링크 */
.main_bottom_link .mms_slogan{ color: #fff;}
.main_bottom_link .mms_desc{ color: #d8e5fd;}
.main_bottom_link .section_cont{ text-align: center;}

.site_link_wrap{ display: flex; gap: 2rem; justify-content: center;}
.site_link_wrap li{}
.site_link_wrap li .link{ width: 20rem; height: 7.4rem; border-radius: 1.2rem; background-color: #0062c7; border: 1px solid #86aff9; font-size: 1.9rem; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;}
.site_link_wrap li .link::after{
	content: "";
    display: inline-flex;
    width: 2.4rem;
    height: 2.4rem;
    forced-color-adjust: none;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");
    
	transform: rotate(-90deg);
	background-color: #fff;
}


.gis_card_wrap{ position: relative; width: 1300px; display: flex; justify-content: space-between;}


.giscard_desc_wrap li:not(:first-child){ margin-top: 10px;}

.giscard_desc_wrap li{ width: 691px; height: 91px; background-repeat: no-repeat;}
.giscard_desc_wrap li button{ width: 100%; height: 100%;}
.giscard_desc_wrap li:nth-child(1){ background-image: url("../images/main/card_desc01.png");}
.giscard_desc_wrap li:nth-child(2){ background-image: url("../images/main/card_desc02.png");}
.giscard_desc_wrap li:nth-child(3){ background-image: url("../images/main/card_desc03.png");}

.giscard_desc_wrap li.on{ height: 220px;}
.giscard_desc_wrap li.on:nth-child(1){ background-image: url("../images/main/card_desc01_on.png");}
.giscard_desc_wrap li.on:nth-child(2){ background-image: url("../images/main/card_desc02_on.png");}
.giscard_desc_wrap li.on:nth-child(3){ background-image: url("../images/main/card_desc03_on.png"); }

.giscard_img_list img{ width: 496px; height: 256px;}

.giscard_roll_wrap {
    width: 496px;
    height: 460px;
    position: relative;
    overflow: hidden;
	margin-top: 50px;
}

.giscard_img_list {
    position: relative;
    height: 100%;
}

.giscard_img_list li { width: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(60px) scale(0.4);
    opacity: 0;
    z-index: 1;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.4s ease;
}

.giscard_img_list li.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    z-index: 3;
}

.giscard_img_list li.next {
    opacity: 0.6;
    transform: translateX(-50%) translateY(100px) scale(0.6);
    z-index: 2;
}

.giscard_img_list li.next2 {
    opacity: 0.4;
    transform: translateX(-50%) translateY(160px) scale(0.4);
    z-index: 1;
}

.swiper_control_wrap{ position: absolute; bottom: 60px; left: 190px; z-index: 999; display: flex; gap: 20px; align-items: center;}

.card_pagination{ display: flex; gap: 8px;}
.card_pagination span{ background-color: rgba(94, 94, 94, 0.3); width: 8px; height: 8px; border-radius: 8px; display: inline-flex;}

.card_pagination span.on{ width: 30px; background-color: #246beb;}

.giscard_btn_wrap{ display: flex; gap: 8px;}

.btn_giscard_play,
.btn_giscard_stop{ background-color: #f3fafe; border: 1px solid #cdd1d5; width: 36px; height: 36px; border-radius: 5px; display: inline-flex; justify-content: center; align-items: center;}

.btn_giscard_play::before,
.btn_giscard_stop::before{ content: ""; display: inline-flex;}

.btn_giscard_play::before{ width: 10px; height: 12px; background: url("../images/main/btn_play.png") no-repeat;}
.btn_giscard_stop::before{ width: 12px; height: 14px; background: url("../images/main/btn_stop.png") no-repeat;}

.si_layer_pop{ position: fixed; z-index: 99; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none;}

.si_layer_pop img{ cursor: pointer;}