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

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

/* common 예외 */
#header #gnb > ul > li > a{ color: #fff;}
#header a.logo img { width: 100%; display: none;}

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

.menu_web_all{ color: #fff;}
.menu_web_all span{ background: #fff;}
.menu_web_all span::after,
.menu_web_all span::before{ background: #fff;}
.btn_menu_mobile_all{ color: #fff;}

.btn_menu_mobile_all span{ background: #fff; -webkit-transition: 0.3s; transition: 0.3s;}
.btn_menu_mobile_all span::after,
.btn_menu_mobile_all span::before{ background: #fff;}

.visual_wrap{ position: relative; height: 98rem;}

/* Main Visual */
.mainVisualSwiper{ width: 100%; overflow:hidden;}
.mainVisualSwiper ul{ width:9999px; height: 98rem; overflow:hidden;}
.mainVisualSwiper ul:after{display:block; content:""; clear:both;}
.mainVisualSwiper li{ float:left; height: 98rem; position: relative;}
.mainVisualSwiper li a{display:block; width: 100%; height: 100%; border:1px solid #d2d2d2; border-radius:6px; overflow:hidden;}
.mainVisualSwiper li img{ width: 100%; height:100%;}

.mainVisualSwiper .bg { position: absolute; top: 0; left: 0%; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; transition: transform 8s cubic-bezier(0.35, 0.72, 0.9, 1);transform: scale(1);}
.mainVisualSwiper .swiper-slide-active { z-index: 10;}
.mainVisualSwiper .swiper-slide-active .bg { transform: scale(1.1);}
.mainVisualSwiper .bg1{ background-image: url("../images/main/main_vusial01.jpg");}
.mainVisualSwiper .bg2{ background-image: url("../images/main/main_vusial02.jpg");}
.mainVisualSwiper .bg3{ background-image: url("../images/main/main_vusial03.jpg");}

@media screen and (max-width: 766px) {
    .mainVisualSwiper ul{ height: 110rem;}
    .mainVisualSwiper li{ height: 110rem;}
    .mainVisualSwiper .bg1{ background-image: url("../images/main/main_vusial01_mo.jpg");}
    .mainVisualSwiper .bg2{ background-image: url("../images/main/main_vusial02_mo.jpg");}
    .mainVisualSwiper .bg3{ background-image: url("../images/main/main_vusial03_mo.jpg");}
}

.mian_slogan{ position: absolute; font-family: 'Gmarket Sans'; font-weight: 500; color: #fff; font-size: 6.6rem;  text-align: center; width: 120rem; top: 24rem; left: 50%; transform: translateX(-50%); z-index: 4;}
.mian_slogan p{ line-height: 1.3;}

.mainVisualSwiper .swiper-slide-active .wave_anim { overflow: hidden;}
.mainVisualSwiper .swiper-slide-active .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 { overflow: hidden;}
.wave_anim > .wave { display: inline-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);
	}
}

#twMainVisualBan .swiper-indicator{ position: absolute; z-index: 4; top: 45rem; left: 50%; transform: translateX(-50%);}

@media (max-width: 1315px) {
    #twMainVisualBan .swiper-indicator{ top: 26rem;}
}

@media (max-width: 1023px) {
    #twMainVisualBan .swiper-indicator{ top: 20rem;}
}
@media screen and (max-width: 766px) {
    #twMainVisualBan .swiper-indicator{ top: 24rem;}
}

.visual_middle{ height: 50rem; position: absolute; width: 1316px; top: 49rem; left: 50%; transform: translateX(-50%); z-index: 99;}

.topical_tit{ font-family: 'Gmarket Sans'; font-weight: 700; color: #fff; font-size: 2.5rem; background: url("../images/main/topical_tit.png") no-repeat left 0 top 2px; padding: 0 0 0 4.2rem; margin-bottom: 1rem;}

/* 주제별 물 데이터 */
.topical_data_list > ul{ display: flex; gap: 1.6rem; flex-wrap: wrap;}
.topical_data_list > ul > li{ width: calc(25% - 1.2rem);}

.btn_toggle_my{ position: relative; width: 4rem; height: 2.4rem; border-radius: 2.4rem; background: #b4c4d6; display: flex; gap: 2px; align-items: center; justify-content: flex-start; color: #fff;}
.btn_toggle_my.on{ background: #246beb; justify-content: flex-end;}
.btn_toggle_my::before,
.btn_toggle_my::after{ content: ""; display: inline-block; width: 18px; height: 18px; border-radius: 100%; background: #fff; margin: 3px;}
.btn_toggle_my::after{ display: none;}
.btn_toggle_my.on::before{ display: none;}
.btn_toggle_my.on::after{ display: inline-block;}

.flip_box{ border-radius: 1rem; height: 17rem;}
.flip_box.my_winfo{ background: #fff; padding: 2rem 1.5rem 1.5rem 2.5rem; display: flex; flex-direction: column; justify-content: space-between;}
.flip_box.my_winfo .fl_top{ display: flex; justify-content: space-between;}
.flip_box.my_winfo .fl_top .fl_tit{ font-size: 2.5rem; line-height: 3rem;}
.flip_box.my_winfo .fl_top .fl_tit b{ color: #246beb;}
.flip_box.my_winfo .fl_top .btn_toggle_my{}

.flip_box.my_winfo .fl_bottom{ display: flex; justify-content: space-between; align-items: center; gap: 1rem;}
.todata_add{ flex: 1; line-height: 1.2;}
.btn_todata_add_change{ width: 4.4rem; height: 4.4rem; border-radius: 1rem; color: #555; font-size: 1.5rem; border: 1px solid #8e8e8e; display: flex; justify-content: center; align-items: center;}

.flip_box{}

.flip_front{}

.flip_box .flip_inner {
    position: relative;
    width: 100%;
    height: 100%;
    /* text-align: center; */
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    -o-transition: transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 600px;
    perspective: 600px;
  }
  
.flip_box .flip_inner::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #14173b;
    border-radius: 15px;
    z-index: 1;
    /* -webkit-transition: all 0.75s ease-in-out;
    -o-transition: all 0.75s ease-in-out;
    */
    transition: all 0.75s ease-in-out;
}
  
.flip_box .flip_box {
    background-color: transparent;
    border-radius: 1.2rem;
    overflow: hidden;
    height: 100%;
    
}

.flip_box .flip_inner > div {
    backface-visibility: hidden;
    height: 100%;
    /* -webkit-transition: all 1s cubic-bezier(0.4, 0.2, 0.2, 1); */
    -o-transition: all 1s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: all 1s cubic-bezier(0.4, 0.2, 0.2, 1);
    /* -webkit-backface-visibility: hidden;
    backface-visibility: hidden;*/
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    border-radius: 1rem;
    overflow: hidden;
  }
  
.flip_box .flip_front {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.flip_box .flip_front .flip{
    background-repeat: no-repeat;
    background-size: auto;
    position: relative;
}
/*
.flip_box.box01 .flip_front .flip{ background-image: url("../images/main/icon_twd01.svg"); background-position: right 2rem bottom 1.4rem;}
.flip_box.box02 .flip_front .flip{ background-image: url("../images/main/icon_twd02.svg"); background-position: right 1.4rem bottom 1.4rem;}
.flip_box.box03 .flip_front .flip{ background-image: url("../images/main/icon_twd03.svg"); background-position: right 2.5rem bottom 1.7rem;}
.flip_box.box04 .flip_front .flip{ background-image: url("../images/main/icon_twd04.svg"); background-position: right 2rem bottom 1.5rem;}
.flip_box.box05 .flip_front .flip{ background-image: url("../images/main/icon_twd05.svg"); background-position: right 2.5rem bottom 1.7rem;}
.flip_box.box06 .flip_front .flip{ background-image: url("../images/main/icon_twd06.svg"); background-position: right 2.5rem bottom 1.7rem;}
.flip_box.box07 .flip_front .flip{ background-image: url("../images/main/icon_twd07.svg"); background-position: right 2rem bottom 1.7rem;}
*/

.flip_box .flip_front .flip::after{ content: ""; position: absolute; right: 2rem; bottom: 1.4rem; background-size: contain; background-repeat: no-repeat;}
.flip_box.box01 .flip_front .flip::after{ background-image: url("../images/main/icon_twd01.svg"); width: 8.2rem; height: 8.1rem;}
.flip_box.box02 .flip_front .flip::after{ background-image: url("../images/main/icon_twd02.svg"); width: 9.6rem; height: 8.1rem;}
.flip_box.box03 .flip_front .flip::after{ background-image: url("../images/main/icon_twd03.svg"); width: 7.5rem; height: 7.3rem;}
.flip_box.box04 .flip_front .flip::after{ background-image: url("../images/main/icon_twd04.svg"); width: 8.1rem; height: 7.9rem;}
.flip_box.box05 .flip_front .flip::after{ background-image: url("../images/main/icon_twd05.svg"); width: 7.6rem; height: 7.5rem;}
.flip_box.box06 .flip_front .flip::after{ background-image: url("../images/main/icon_twd06.svg"); width: 7.5rem; height: 7.4rem;}
.flip_box.box07 .flip_front .flip::after{ background-image: url("../images/main/icon_twd07.svg"); width: 7.9rem; height: 7.5rem;}

.flip_box .flip_front .flip:hover::after{transform: rotateY(360deg); transition-duration: 0.4s;}

@media (max-width: 766px) {
    .flip_box .flip_front .flip::after{ background-position: right 0 bottom 1rem;}
    .flip_box.box01 .flip_front .flip::after{ width: 6rem; height: 7rem;}
    .flip_box.box02 .flip_front .flip::after{ width: 6rem; height: 6.4rem;}
    .flip_box.box03 .flip_front .flip::after{ width: 5.6rem; height: 6.4rem;}
    .flip_box.box04 .flip_front .flip::after{ width: 5.6rem; height: 6.4rem;}
    .flip_box.box05 .flip_front .flip::after{ width: 5.6rem; height: 6.4rem;}
    .flip_box.box06 .flip_front .flip::after{ width: 5.6rem; height: 6.4rem;}
    .flip_box.box07 .flip_front .flip::after{ width: 5.6rem; height: 6rem;}
}

/*
.flip_box .flip_front:hover .flip a::after{ -webkit-animation: icon_jump 0.5s; animation: icon_jump 0.5s;}
@keyframes icon_jump {
    0% {-webkit-transform:translateY(0); transform:translateY(0);}
    50% { -webkit-transform:translateY(-20%); transform:translateY(-20%);}
    100% { -webkit-transform:translateY(0); transform:translateY(0);}
}

@keyframes icon_rotate {
    0% {-webkit-transform:rotate(0); transform:rotate(0);}
    100% {-webkit-transform:rotate(360deg); transform:rotate(360deg);}
}
.flip_box .flip_front .flip a::before { display:none; opacity:0; content:""; position:absolute; right: 6rem; bottom: 7rem; width:47px; height:47px; background:url("../images/main/icon_sun.png") no-repeat; z-index: -1; background-size: cover;
    -webkit-transition:opacity 0.3s; transition:opacity 0.3s;
    -webkit-animation: icon_rotate linear 5s infinite; animation: icon_rotate linear 5s infinite;
}

.flip_box .flip_front .flip a:focus,
.flip_box .flip_front:hover .flip::before{ display:block; opacity:1;}
*/
@media (max-width: 766px) {
    .flip_box.box01 .flip_front .flip{ background-size: 32%;}
    .flip_box.box02 .flip_front .flip{ background-size: 32%;}
    .flip_box.box03 .flip_front .flip{ background-size: 28%;}
    .flip_box.box04 .flip_front .flip{ background-size: 32%;}
    .flip_box.box05 .flip_front .flip{ background-size: 28%;}
    .flip_box.box06 .flip_front .flip{ background-size: 30%;}
    .flip_box.box07 .flip_front .flip{ background-size: 30%;}
}

.flip_box .flip_front.on { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d;}

.flip_box .flip_back.on { -webkit-transform: rotateY(0deg); transform: rotateY(0deg);}

.flip_box.box01 .flip_front,
.flip_box.box01 .flip_back{ transition-delay: .1s;}
.flip_box.box02 .flip_front,
.flip_box.box02 .flip_back{ transition-delay: .2s;}
.flip_box.box03 .flip_front,
.flip_box.box03 .flip_back{ transition-delay: .3s;}
.flip_box.box04 .flip_front,
.flip_box.box04 .flip_back{ transition-delay: .4s;}
.flip_box.box05 .flip_front,
.flip_box.box05 .flip_back{ transition-delay: .5s;}
.flip_box.box06 .flip_front,
.flip_box.box06 .flip_back{ transition-delay: .6s;}
.flip_box.box07 .flip_front,
.flip_box.box07 .flip_back{ transition-delay: .7s;}

.flip_box .flip{ z-index: 1; position: relative; width: 100%; height: 100%;}
.flip_box .flip_front .flip { display: block; height: 100%; background-color: #1e90ff; opacity: .7; padding: 2rem;}
.flip_box .flip_front .flip a{ display: inline-block;}

.ff_tit_wrap{ display: flex; gap: 3.6rem;}
.ff_tit_wrap .ff_tit{}
.ff_tit{ position: relative; font-size: 2.5rem; font-weight: 700; color: #fff; display: flex; gap: 1.2rem; align-items: center;}
.ff_tit::after{ content: ""; width: 2.4rem; height: 2.4rem; background: url("../images/main/icon_flip_front_newwin.png") no-repeat; background-size: cover; transition: all 0.3s ease-in-out; display: inline-flex;}

a + a .ff_tit::before{ content: ""; width: .8rem; height: .8rem; border-radius: .8rem; background-color: #fff; position: absolute; left: -2.1rem; top: 50%; transform: translateY(-50%);}

@media (max-width: 766px) {
    .ff_tit{ font-size: 1.9rem; gap: .8rem;}
    .ff_tit::after{ width: 1.8rem; height: 1.8rem;}
    .ff_tit_wrap{ gap: 2rem;}
    .ff_tit_wrap .ff_tit{ gap: .6rem !important;}
    a + a .ff_tit::before{ width: .4rem; height: .4rem; border-radius: .8rem; left: -1.2rem;}
}


/* 0204
.flip_box:hover .flip_front .flip{ background-color: #003675; opacity: 1; transition: all 0.3s ease-in-out;}
.flip_box:hover .flip_front .flip .ff_tit::after{ transform: translateX(2rem);}
*/


.flip_box .flip_back{ -webkit-transform: rotateY(180deg); transform: rotateY(180deg); position: absolute; left: 0; top: 0; width: 100%; border: 2px solid #4385cd;}

.flip_box .flip_back .flip{ opacity: .7; transition: all 0.3s ease-in-out;}
.flip_box:hover .flip_back{ border: 2px solid #165195;}
.flip_box:hover .flip_back .flip{ opacity: 1;}

.fb_item{ display: flex; flex-direction: column;}
.fb_item .fb_top{ height: 5rem; background: #1e7ed0; padding: 0 2.5rem; display: flex; align-items: center; justify-content: space-between; transition: all 0.3s ease-in-out;}
.fb_item .fb_top .fb_tit{ font-size: 1.7rem; color: #fff;}

.fbsjwrap{ width: 1.6rem; height: 1.6rem; margin-left: auto; margin-right: 0; background: url("../images/main/icon_flip_front_newwin.png") no-repeat; background-size: cover;}
.btn_fb_link{ display: inline-block; width: 1.6rem; height: 1.6rem; background: url("../images/main/icon_flip_front_newwin.png") no-repeat; background-size: cover;}
.fbsjwrap .btn_fb_link{ background: none; margin-top: -1rem;}

.fb_fbs_btn_wrap{ padding-top: 4.8rem; background-image: url("../images/main/icon_hoga.svg"); background-repeat: no-repeat; background-position: top 0 right 0;}
.btn_fbs_link{ position: relative; font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: .6rem;}
.btn_fbs_link::after{ content: ""; width: 1.8rem; height: 1.8rem; background: url("../images/common/icon_newwin.svg") no-repeat; background-size: cover; display: inline-flex;}

@media (max-width: 766px) {
    .fb_fbs_btn_wrap{ padding-top: 3.2rem; background-position: top 0 left 0; background-size: 40%;}
    .fb_c_tit.hoga{ margin-bottom: .6rem !important;}
}

.fb_link_wrap li{ display: none;}
.fb_link_wrap li:first-child{ display: block;}

.fb_item:hover .fb_top{ background-color: #003675;}

.fb_item .fb_swiper_wrap{ background: #fff; height: calc(16.6rem - 5rem); display: flex; align-items: center;}

#fbInfoBan .swiper-indicator{ display: none;}

.fb_cont{ position: relative; height: 11.6rem; display: flex; align-items: center;}
.fb_cont .fb_left{ margin-left: 2rem;}
.fb_cont .fb_left .fb_c_tit{}
.fb_cont .fb_left .fb_c_tit b{ font-size: 2.5rem; line-height: 2.6rem;}
.fb_cont .fb_left .fb_c_tit span{ font-size: 1.5rem; margin-left: .4rem;}
.fb_cont .fb_left dl{ font-size: 1.5rem; margin-top: .6rem;}
.fb_cont .fb_left dl dt{ font-weight: 700; line-height: 1;}
.fb_cont .fb_left dl dt em{ font-weight: 300;}
.fb_cont .fb_left dl dd{ color: #555;}

.fb_cont .fb_right{ display: flex; flex-direction: column; align-items: flex-end; gap: 1.6rem; position: absolute; right: 2.2rem; top: 50%; transform: translateY(-50%);}

.fb_right .fb_num{ font-family: 'Gmarket Sans'; font-size: 2.5rem; line-height: 1;}
.fb_right .fb_saus{ font-family: 'Gmarket Sans'; font-weight: 700; font-size: 2.1rem; line-height: 1;}
.fb_right .fb_saus em{ font-size: 1.5rem; margin-right: .4rem;}
.fb_icon{ display: inline-block; height: 3.8rem; width: 3.8rem; background-repeat: no-repeat;}
.fb_right .fb_txt{ font-size: 1.5rem; font-weight: 700; margin-bottom: -1rem; color: #1d1d1d;}

.fb_right > span + span{}

.btn_fb_item_move{ width: 2.5rem; height: 9rem; margin-right: 1rem; border: 1px solid #a7c4f7; background-color: #eff5ff; border-radius: 1.4rem; background-image: url("../images/main/arr_fb.svg"); background-repeat: no-repeat; background-position: center;}
.btn_fb_item_move:hover{ background-image: url("../images/main/arr_fb_wh.svg"); background-color: #a7c4f7;}

.fb_my_ban_swiper{ width: 100%; overflow: hidden;}

@media (max-width: 1315px) {
    .mian_slogan{ top: 10rem; font-size: 6rem; line-height: 1.2;}
    .visual_middle{ height: auto; top: 34rem; width: 100%;}
    .topical_data_list > ul > li {
        width: calc(33.33% - 1.2rem);
    }
}
@media (max-width: 1023px) {
    .topical_data_list > ul > li {
        width: calc(50% - .8rem);
    }
    .mian_slogan {
        position: absolute;
        font-size: 4rem;
        line-height: 1.2;
        width: 100%;
        top: 10rem;
        left: 50%;
        transform: translateX(-50%);
    }
    .visual_middle{ top: 20rem; padding: 0 2rem;}
}
@media (max-width: 766px) {
    .visual_wrap{ height: 110rem;}
    .mian_slogan{ font-size: 3.4rem;}

    .visual_middle{ padding: 0 1.5rem; top: 30rem;}
    
    
    .topical_data_list > ul{ gap: 1rem;}
    .topical_data_list > ul > li { width: calc(50% - .5rem);}

    .flip_box.my_winfo .fl_top{ flex-direction: column;}
    .flip_box.my_winfo .fl_top .fl_tit{ font-size: 2rem; line-height: 1.5; margin-bottom: .4rem;}

    .flip_box.my_winfo .fl_bottom{ flex-direction: column; align-items: flex-start; gap: .6rem;}
    .todata_add{ font-size: 1.3rem;}
    .btn_todata_add_change{ height: 2rem; font-size: 1.3rem; border-radius: 2rem;}
    
    .flip_box.my_winfo{ padding: 1.1rem 1.5rem 1.3rem 1.5rem;}

    .flip_box .flip_back{ background-color: #fff;}
    /* .flip_box .flip_back .flip{ opacity: 1;} */
    
    .fb_item .fb_swiper_wrap{ padding-top: 1rem;}
    .fb_item .fb_top{ padding: 0 1.5rem; height: 3.4rem;}
    .fb_item .fb_top .fb_tit{ font-size: 1.5rem;}
    .fb_cont{ margin-top: .8rem;}
    .fb_cont .fb_left{ margin-left: 1.5rem;}
    .fb_cont .fb_left .fb_c_tit b{ font-size: 1.8rem; line-height: 1; display: inline-block;}
    .fb_cont .fb_left .fb_c_tit span{ font-size: 1.3rem; font-weight: 300;}
    
    .fb_cont .fb_left .fb_c_tit{ margin-bottom: 1.2rem;}
    .fb_cont .fb_left dl{ font-size: 1.3rem; margin-top: .6rem;}
    .fb_cont .fb_left dl dt{}
    .fb_cont .fb_left dl dd{ letter-spacing: -0.8px;}
    
    .fb_cont .fb_right { display: flex; flex-direction: row; align-items: center; gap: 1.2rem; position: relative; right: auto; top: auto; transform: translateY(0);}
    .fb_right .fb_num{ font-size: 2rem;}
    .fb_right .fb_saus{ font-size: 2rem; padding-top: .4rem;}
    .fb_right .fb_saus em{ font-size: 1.3rem; display: block;}
    .fb_right .fb_txt{ margin-bottom: 0;}

    .btn_fb_item_move{ margin-right: .8rem; height: 10rem;}

    .fb_icon{ height: 3rem; width: 3.6rem; margin-top: -.3rem;}
    .fb_sj.sj01 .fb_icon,
    .fb_sj.sj02 .fb_icon,
    .fb_sj.sj03 .fb_icon,
    .fb_sj.sj04 .fb_icon,
    .fb_sj.sj05 .fb_icon,
    .fb_sj.sj06 .fb_icon,
    .fb_ss.ssq01 .fb_icon,
    .fb_ss.ssq02 .fb_icon{ background-size: 2.6rem 3rem; margin-right: -1.2rem;}

    #fbSqBan .fb_cont .fb_left .fb_c_tit b{ font-size: 1.8rem;}
    .box04 .fb_cont .fb_left .fb_c_tit{ margin-bottom: .4rem;}
    .box04 .fb_cont .fb_left .fb_c_tit b{ font-size: 1.8rem;}
}


/******* 수자원 *******/
.fb_sw{}
.fb_sw.sw01{ color: #246beb;} /* 정상 */
.fb_sw.sw02{ color: #0b9b9b;} /* 관심 */
.fb_sw.sw03{ color: #339933;} /* 주의 */
.fb_sw.sw04{ color: #d6ab00;} /* 경계 */
.fb_sw.sw05{ color: #cd0d0d;} /* 심각 */

.fb_sw.sw02{} /* 관심 */
.fb_sw.sw03{} /* 주의 */
.fb_sw.sw04{} /* 경계 */
.fb_sw.sw05{} /* 심각 */

/******* 수질 *******/
.fb_sj{}
.fb_sj.sj01{ color: #1c4efc;}
.fb_sj.sj02{ color: #246beb;}
.fb_sj.sj03{ color: #0b9b9b;}
.fb_sj.sj04{ color: #339933;}
.fb_sj.sj05{ color: #d6ab00;}
.fb_sj.sj06{ color: #cd0d0d;}
.fb_sj.sj01 .fb_icon{ background-image: url("../images/main/sj01.svg");}
.fb_sj.sj02 .fb_icon{ background-image: url("../images/main/sj02.svg");}
.fb_sj.sj03 .fb_icon{ background-image: url("../images/main/sj03.svg");}
.fb_sj.sj04 .fb_icon{ background-image: url("../images/main/sj04.svg");}
.fb_sj.sj05 .fb_icon{ background-image: url("../images/main/sj05.svg");}
.fb_sj.sj06 .fb_icon{ background-image: url("../images/main/sj06.svg");}

/******* 상수도 *******/
.fb_ss{}
.fb_ss.ssq01{ color: #246beb;}
.fb_ss.ssq01 .fb_icon{ background-image: url("../images/main/ssq01.svg");}
.fb_ss.ssq02{ color: #cd0d0d;}
.fb_ss.ssq02 .fb_icon{ background-image: url("../images/main/ssq02.svg");}

.fb_ss.ssp01{ color: #246beb;}/* 평균이하 */
.fb_ss.ssp02{ color: #339933;}/* 평균 */
.fb_ss.ssp03{ color: #cd0d0d;}/* 평균이상 */

/******* 하수도 *******/
.fb_hs{ color: #246beb;} 

/******* 지하수 *******/
.fb_jh{}
.fb_jh.jh01{ color: #246beb;}
.fb_jh.jh02{ color: #cd0d0d;}
.fb_jh.jh03{ color: #555555;}

/****** 가믐 *******/
.fb_gm{} 
.fb_gm.gm01{ color: #246beb;} /* 정상 */
.fb_gm.gm02{ color: #0b9b9b;} /* 관심 */
.fb_gm.gm03{ color: #339933;} /* 주의 */
.fb_gm.gm04{ color: #d6ab00;} /* 경계 */
.fb_gm.gm05{ color: #cd0d0d;} /* 심각 */


.flip_box .flip_back .txt_box div{
    color: #fff; font-size: 50px; line-height: 1;
}

.flip_box .flip_back .txt_box p{
    font-size: 28px;
    word-break: break-word;
    white-space: nowrap;
    color: #fff;
    line-height: 1.5;
}

.flip_box .flip_back .flip{ line-height: 1.7;}

.flip_box .flip_front figure {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
}


.flip_box .flip_inner::before {
width: 0%;
}

.flip_box .flip_front p {
    opacity: 1; color: #fff;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.main_s_inner{ margin: 0px auto; width: var(--ce-inner-width); position: relative;}

.community_wrap{ position: relative; padding: 9.2rem 0 0 0; height: 490px; background-image: url("../images/main/commu_right_bg.png"); background-position:right 0 top 0; background-repeat: no-repeat;}
.community_wrap::before{ content: ""; position: absolute; width: 27rem; height: 27rem; background: url("../images/main/commu_left_bg.png") no-repeat; background-size: 100% 100%; left: -12rem; bottom: -6rem;}

.community_wrap .sub_inner{ display: flex; gap: 10rem; justify-content: space-between;}

/* 물 데이터 통합검색 */
.wdata_total_search_wrap{ position: relative; width: 54rem; height: 27rem; border-radius: 1.2rem; background: url("../images/main/commu_cont_bg.png") no-repeat bottom .5rem right -6.3rem #edf1f5; padding: 3.8rem 4rem 0 4rem; box-shadow: 0 10px 2px rgba(229, 229, 229, 1);}
.wdata_total_search_wrap .wdatat_tit{ margin: 0 0 0 1rem; font-size: 4rem; font-family: 'Gmarket Sans';}
.wdata_total_search_wrap .wdatat_tit span{ font-weight: 500; color: #246beb;}
.wdata_total_search_wrap .wdatat_tit b{ font-weight: 700;}
.wdata_total_search_wrap .desc{ margin: .8rem 0 0 1rem; font-size: 2.1rem;}

.btn_wdatat_more{ position: absolute; width: 4.8rem; height: 4.8rem; background: url("../images/main/btn_ts_more.png") no-repeat; background-size: 100% 100%; top: 4rem; right: 4rem;}

.wd_tag_wrap{ display: flex; flex-wrap: wrap; gap: .8rem; width: 40rem; margin-top: 2.3rem;}
.wd_tag{ height: 3.2rem; border-radius: .4rem; font-size: 1.5rem; border: 1px solid #d8d8d8; padding: 0 1.5rem; display: inline-flex; align-items: center; font-size: 1.7rem;}

/* 커뮤니티 */
.commu_bbs_wrap{ height: 28rem; flex: 1;}
.commu_bbs_tit{ font-size: 3.2rem; font-weight: 700; line-height: 1.4; margin-bottom: 2.5rem;}

.commu_bbs_top{}
.commubbs_tab{ display: flex; gap: 2.1rem;}
.commubbs_tab li{ padding-bottom: .8rem;}
.commubbs_tab li button{ font-size: 1.9rem; color: #555; font-weight: 700;}

.commubbs_tab li.on{ border-bottom: 2px solid #246beb;}
.commubbs_tab li.on button{ color: #246beb;}

.commu_bbs_cont_wrap{ position: relative; margin-top: 2.4rem;}
.commu_bbs_cont{ display: none;}
.comcont01{ display: block;}

.btn_commubbs_more{ position: absolute; font-size: 1.7rem; padding-right: 2.5rem; right: 0; top: -6rem; display: flex; align-items: center;}
.btn_commubbs_more::before,
.btn_commubbs_more::after{ content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: #343434; width: 1.6rem; height: .2rem;}
.btn_commubbs_more::after{ transform: rotate(-90deg); top: 45%;}

.commu_bbs_box{ height: 15rem; border: 1px solid #d8d8d8; border-radius: 1.2rem; padding: 2.4rem 2.8rem;}

.commu_bbs_list{}
.commu_bbs_list li{ display: flex; justify-content: space-between; gap: 2.8rem;}
.commu_bbs_list li:not(:first-child){ margin-top: 1.2rem;}
.commu_bbs_list li a{ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.commu_bbs_list li a:hover{ text-decoration: underline;}
.commu_bbs_list li .cb_date{ flex-shrink: 0;}

.slide_img_web{ display: block;}
.slide_img_mo{ display: none;}

#twfNewsBan{}
#twfNewsBan .slide_img_web{ width: 54rem; height: 24rem;}
#twfNewsBan .slide_img_mo{ width: 100%; height: 36rem;}

@media (max-width: 1315px) {
    .community_wrap{ height: auto;}
	.community_wrap .sub_inner{ gap: 5rem;}
}

@media (max-width: 1023px) {
    .wdata_total_search_wrap{ width: 45rem; padding: 3rem;}
    .btn_wdatat_more{ top: 3rem; right: 2rem;}
}

@media (max-width: 766px) {
    .community_wrap{ height: auto; padding: 5rem 0 0 0;}
	.community_wrap .sub_inner{ flex-direction: column; justify-content: space-between;}
    
    .wdata_total_search_wrap{ width: 100%; height: auto; padding: 3rem 4rem;}
    .btn_wdatat_more{ top: 3rem; right: 4rem;}
    .wdatat_tit{ display: flex; flex-direction: column; line-height: 1.5;}
    .wd_tag_wrap{ width: 30rem;}

    .commu_bbs_box{ height: auto;}
    .commu_bbs_list li{ flex-direction: column; gap: .6rem;}
    .commu_bbs_list li:not(:first-child){ margin-top: 2rem;}

    .slide_img_web{ display: none;}
    .slide_img_mo{ display: block;}
}

/* 통합 정보 GIS */
.wti_gis_data_wrap{ background-image: url("../images/main/bg01.png"); background-size: 300px;
    background-position: left bottom; background-repeat: repeat-x;}
.wti_gis_data_wrap .inner{ }
.wti_gis_data_wrap::before{ content: ""; position: absolute;}
.wti_gis_data_wrap::after{}

.wti_gisdata_bg{ position: relative; height: 60rem; background: url("../images/main/wt_gis_wrap_bg.png") no-repeat right 0 top 0 #2f5eac; border-radius: 1.2rem; overflow: hidden; padding-left: 22rem; display: flex; align-items: center;}

.wti_gisdata_cont{ z-index: 2;}
.wti_gisdata_cont .wti_tit{ font-size: 4rem; line-height: 6rem; color: #fff; font-family: 'Gmarket Sans';}
.wti_gisdata_cont .wti_tit b{ font-weight: 700;}
.wti_gisdata_cont .wti_desc{ font-size: 1.7rem; line-height: 2.8rem; color: #fff; margin-top: 1rem; letter-spacing: -1px;}

.btn_to_gis_link{ height: 6.4rem; border-radius: 1rem; background: #fff; color: #003675; font-size: 1.9rem; font-weight: 700; margin-top: 5rem; padding: 0 2.8rem; display: inline-flex; align-items: center; gap: 1rem;}
.btn_to_gis_link::after{ content: ""; width: 2.4rem; height: 2.4rem; background: url("../images/main/btn_to_gis_link.png") no-repeat;}

@media (max-width: 1315px) {
    .wti_gisdata_bg{ padding-left: 6rem;}
}

@media (max-width: 766px) {
    .wti_gisdata_cont .wti_desc{ line-height: 1.5;}
    .wti_gisdata_bg{ position: relative; height: 68.5rem; background: url("../images/main/wt_gis_wrap_bg_mo.png") no-repeat right 0 top 0 #2f5eac; background-size: auto 100%; padding-left: 10%;  align-items: flex-start;}
    .wti_gisdata_cont{ margin-top: 10%;}
    .btn_to_gis_link{ position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); white-space: nowrap;}
}

/* 통합GIS 데이터 링크 BG */
.heximg_wrap{}
.heximg{ position: absolute;}

.heximg.hex01{ top: 0; right: 474px; animation: hexeffect 6s infinite ease-in-out;}
.heximg.hex02{ top: 26px; right: 611px; animation: hexeffect2 3s infinite ease-in-out;}
.heximg.hex03{ top: 26px; right: 337px; animation: hexeffect 4s infinite ease-in-out;}
.heximg.hex04{ top: 32px; right: 63px; animation: hexeffect2 5s infinite ease-in-out;}
.heximg.hex05{ top: 104px; right: 748px; animation: hexeffect2 5s infinite ease-in-out;}
.heximg.hex06{ top: 107px; right: 474px; animation: hexeffect2 4s infinite ease-in-out;}
.heximg.hex07{ top: 110px; right: 200px; animation: hexeffect2 5s infinite ease-in-out;}
.heximg.hex08{ top: 185px; right: 611px; animation: hexeffect2 7s infinite ease-in-out;}
.heximg.hex09{ top: 188px; right: 337px; animation: hexeffect2 11s infinite ease-in-out;}
.heximg.hex10{ top: 191px; right: 63px; animation: hexeffect2 5s infinite ease-in-out;}
.heximg.hex11{ top: 263px; right: 748px; animation: hexeffect2 4s infinite ease-in-out;}
.heximg.hex12{ top: 266px; right: 476px; animation: hexeffect2 9s infinite ease-in-out;}
.heximg.hex13{ top: 269px; right: 200px; animation: hexeffect2 13s infinite ease-in-out;}
.heximg.hex14{ top: 341px; right: 885px; animation: hexeffect2 7s infinite ease-in-out;}
.heximg.hex15{ top: 344px; right: 611px; animation: hexeffect2 8s infinite ease-in-out;}
.heximg.hex16{ top: 347px; right: 337px; animation: hexeffect2 4s infinite ease-in-out;}
.heximg.hex17{ top: 425px; right: 474px; animation: hexeffect2 5s infinite ease-in-out;}
.heximg.hex18{ top: 503px; right: 611px; animation: hexeffect2 4s infinite ease-in-out;}
.heximg.hex19{ top: 506px; right: 337px; animation: hexeffect2 9s infinite ease-in-out;}

@keyframes hexeffect {
	0% {
		opacity: .4;
	}
    50% {
		opacity: 1;
	}
	100% {
		opacity: .4;
	}
}

@keyframes hexeffect2 {
	0% {
		opacity: .4;
	}
    70% {
		opacity: 1;
	}
	100% {
		opacity: .4;
	}
}

.heximg.hex01{ top: 0; right: 474px;}
.heximg.hex02{ }
.heximg.hex03{}
.heximg.hex04{}
.heximg.hex05{}
.heximg.hex06{}
.heximg.hex07{}
.heximg.hex08{}
.heximg.hex09{}
.heximg.hex10{}

@media (max-width: 766px) {
	.heximg_wrap{ display: none;}
}

/* 사이트 이용안내 */
.twf_tit{ font-size: 2.5rem; font-weight: 700; margin-bottom: 2rem;}

.twf_pr_wrap{ height: 54rem; background-color: #eff5ff; background-image: url("../images/main/twf_pr_wrap_wave.png"); background-repeat: no-repeat; background-position: bottom right -8.6rem; padding: 9.5rem 0 0 0;}
.twf_pr_wrap .sub_inner{ display: flex; gap: 11rem;}

/* 사이트 이용안내 */
.twf_site_info{ flex: 1;}
.twf_site_link_list{ display: flex; justify-content: space-between; gap: 2rem;}
.twf_site_link_list li{ width: 33.333%;}
.twf_site_link_list li .link{}

.twf_icon_wrap{ height: 16rem;}
.twf_icon_wrap .icon{ height: 16rem; width: 100%; border-radius: 1.2rem; background-position: center; background-repeat: no-repeat; display: inline-block; transition: all 0.3s ease-in; transform: translate(0, 0);}
.twf_icon_wrap .icon.i01{ background-color: #e5e2ef; background-image: url("../images/main/twf_icon_01.png");}
.twf_icon_wrap .icon.i02{ background-color: #cee4ee; background-image: url("../images/main/twf_icon_02.png");}
.twf_icon_wrap .icon.i03{ background-color: #cee7e5; background-image: url("../images/main/twf_icon_03.png");}

.twf_site_link_list a:hover .icon{ transform: translate(0, 1rem);}

.twf_link_item .text_wrap{ }
.twf_link_item p{ font-size: 2.1rem; font-weight: 700; margin-top: 1.5rem;}
.twf_link_item .btn_link_more{ display: inline-block; font-size: 1.7rem; padding-right: 2.8rem; background: url("../images/main/arr_twf_link.png") no-repeat right 0 center; margin-top: .8rem; transition: all 0.3s ease-in;}

.twf_site_link_list a:hover .twf_link_item .btn_link_more{ padding-right: 3.5rem;}

/* 소식 */
.twf_news{ width: 540px;}

@media (max-width: 1315px) {
    .twf_pr_wrap .sub_inner{ gap: 2rem;}
}

@media (max-width: 1023px) {
    .twf_pr_wrap{ height: auto; padding: 2rem 0 3rem 0;}

    .twf_site_link_list{ flex-direction: column; gap: 2rem;}
    .twf_site_link_list li{ width: 100%;}

    .twf_icon_wrap{ height: auto;}
    .twf_link_item{ display: flex; align-items: center; gap: 1rem;}
    .twf_icon_wrap .icon{ width: 13rem; height: 8rem; background-size: 46%;}
    .twf_link_item p{ margin-top: 0;}
}

@media (max-width: 766px) {
    .twf_pr_wrap .sub_inner{ flex-direction: column; gap: 5rem;}

    .twf_site_link_list a:hover .icon{ transform: translate(0, 0);}
    .twf_link_item{ display: flex; align-items: center; gap: 2rem;}
    .twf_news{ width: 100%;}
    .twf_link_item .btn_link_more{ margin-top: .4rem;}
}

/******************** Swiper Control ********************/
.swiper-indicator{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    gap: var(--ce-spacer-2);
    flex-shrink: 0;
    position: relative;
}
.swiper-indicator.text-center{
    justify-content: center;
}
.swiper-indicator .swiper-pagination{
    top: auto;
    bottom: auto;
    width: auto;
}
.swiper-indicator .swiper-pagination:not(.swiper-pagination-fraction){
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    height: 4rem;
    padding: var(--ce-spacer-3);
    border-radius: 4rem;
    background-color: var(--ce-white);
}
.swiper-indicator .swiper-pagination.swiper-pagination-fraction.swiper-pagination-bg{
    font-weight: 700;
    padding: var(--ce-spacer-3);
    border-radius: 4rem;
    background-color: var(--ce-white);
}
.swiper-indicator .swiper-button-next,
.swiper-indicator .swiper-button-prev{
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: auto;
}
.swiper-indicator .swiper-navigation{
    display: inline-flex;
    gap: var(--ce-spacer-2);
}

.swiper-pagination{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    position: relative;
    top: auto;
    bottom: auto;
    height: 4rem;
}
.swiper-pagination .swiper-pagination-bullet{
    width: 0.8rem;
    height: 0.8rem;
    opacity: 0.4;
}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
    width: 2rem;
    border-radius: 14rem;
    background-color: var(--ce-primary);
    opacity: 1;
}
.swiper-pagination.swiper-pagination-fraction{
    gap: var(--ce-spacer-1);
}
.swiper-pagination.swiper-pagination-fraction .swiper-pagination-current{
    color: #246beb;
}
.swiper-controller {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: var(--ce-spacer-2);
}
[class^=swiper-button-]{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: 4rem;
    height: 4rem;
    border-radius: 100%;
    border: 0.1rem solid var(--ce-gray-20);
    background-color: #fff;
}
[class^=swiper-button-]::after{
    content: "";
    font-size: 0 !important;
    width: 2.4rem;
    height: 2.4rem;
    background-repeat: no-repeat;
}

.swiper-button-play::after{
    background-image: url("../images/main/ico_swiper_play.svg");
}

.swiper-button-stop::after{
background-image: url("../images/main/ico_swiper_stop.svg");
}

.swiper-button-next::after,
.swiper-button-prev::after{
    background-position: center;
    background-size: contain;
}
.swiper-button-next:hover,
.swiper-button-prev:hover{
    background-color: var(--ce-secondary-5);
}
.swiper-button-next:active,
.swiper-button-prev:active{
    background-color: var(--ce-secondary);
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled{
    background-color: var(--ce-gray-10);
    opacity: 1;
}
.swiper-button-next{
    right: 0;
}
.swiper-button-next::after{
    background-image: url("../images/main/ico_swiper_next.svg");
}
.swiper-button-next:active::after{
    background-image: url("../images/main/ico_swiper_next_wh.svg");
}
.swiper-button-next.swiper-button-disabled::after{
    background-image: url("../images/main/ico_swiper_next_gray.svg");
}
.swiper-button-prev{
    left: 0;
}
.swiper-button-prev::after{
    background-image: url("../images/main/ico_swiper_prev.svg");
}
.swiper-button-prev:active::after{
    background-image: url("../images/main/ico_swiper_prev_wh.svg");
}
.swiper-button-prev.swiper-button-disabled::after{
    background-image: url("../images/main/ico_swiper_prev_gray.svg");
}

.swiper-indicator .swiper-pagination{
    font-weight: 700; padding: var(--ce-spacer-3); border-radius: 4rem; background-color: var(--ce-white);
}

.twf_news_ban_swiper{ display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; position: relative; z-index: 1; height: 24rem;}
.twf_news_ban_swiper .swiper{ width: 100%; height: 100%; overflow: hidden;}
.twf_news_ban_swiper .swiper-indicator{ position: absolute; right: 1.5rem; bottom: 1.5rem; z-index: 1; margin-top: auto;}

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

@media (max-width: 766px) {
    .twf_news_ban_swiper{ margin-bottom: 8rem; height: auto;}
    .twf_news_ban_swiper .swiper-indicator{ right: 0; bottom: -8rem;}
}

/* 유관기관 배너 */
.twf_fsite_wrap{ padding: 2.5rem 0;}
.twf_fsite_wrap .sub_inner{}
.twf_f_site_swiper{ height: 7rem; position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-start; margin-left: -2rem;}
.twf_f_site_swiper .swiper{ width: 100%; height: 100%; overflow: hidden;}
.twf_f_site_swiper .swiper-indicator{}
.twf_f_site_swiper .swiper-indicator .swiper-pagination{}

#twFsiteBan .swiper-button-prev{ display: none;}

.twf_f_site_swiper .swiper .swiper-slide{ display: flex; align-items: center;}

@media (max-width: 766px) {
    .twf_fsite_wrap{ padding: 0;}
    .twf_fsite_wrap .sub_inner{ padding: 1rem 2rem;}
}

/* Quick Menu */
.quick_menu{ opacity: 0;}

/* 위치 변경 팝업 */
.change_loc_pop{ width: 40rem;}
.change_loc_pop .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);}
}

/* 접근권한 */
.layer_pop_wrap.access_pop .layer_pop{ width: 40rem;}
.access_pop_cont{ }
.access_pop_desc{ margin-bottom: 1.5rem;}
.lp_tit{ font-size: 2.1rem; font-weight: 700; margin-bottom: .5rem;}
.access_pop_txt_list li:not(:first-child){ margin-top: .4rem;}
.access_pop_txt_list li{ position: relative; padding-left: 1.5rem;}
.access_pop_txt_list li::before{ content: ""; position: absolute; background: #8e8e8e;   width: .5rem; height: .5rem; border-radius: .5rem; left: 0; top: .9rem;}

/* 메인 이벤트 배너 팝업 롤링 */
.mainEvPopWrap{ position:fixed; top:0; left:0; width:100%; height:100%; display: flex; flex-direction: column; justify-content: center; padding-top: 0; color: #fff; z-index: 9999;}

.mainEvPopWrap::after{ content: ""; position: absolute; background-color: rgba(0, 0, 0, .8); width: 100%; height: 100%;}

.mainEvPopWrap .inner{position: relative; width: 150rem; max-width: 100%; margin-inline: auto;}
.mainEvPopWrap .slide-area{ height: 46rem;}
.mainEventBList{ justify-content: center;}
.mainEventBList{ margin: 0 auto;}
.mainEventBList .swiper-slide{ height: 100%; overflow: hidden; width: 36rem; text-align: center;}
.mainEventBList .swiper-slide img{ border-radius: 2rem;}
.mainEventBList a{display: block; max-width: 100%; margin: 0 auto; text-align: center;}
.mainEvPopWrap [class*="swiper-button-"]{top: 22.5rem; display: block; width: 4rem; height: 4rem; margin-top: -6rem; border: 1px solid #ddd; border-radius: 100%;}

@media (max-width: 766px) {
	.mainEvPopWrap [class*="swiper-button-"]{ display: block;}
    .mainEvPopWrap [class*="swiper-button-"]:active{ background-color: #fff;}
    .mainEvPopWrap .slide-area{ height: auto; max-width: 90%;}
    .mainEvPopWrap .inner{ max-width: 60%;}
    .mainEventBList { justify-content: flex-start;}
}

.mainEvPopWrap .swiper-button-disabled{ display: none;}
.mainEvPopWrap .swiper-button-prev{ left: 0rem;}
.mainEvPopWrap .swiper-button-next{ right: 0rem;}

.mainEvPopWrap .swiper-button-prev::after,
.mainEvPopWrap .swiper-button-next::after{ display: inline-block; width: 100%; height: 100%;}

.mainEvPopWrap .slide-controls{ display: flex; flex-flow: row wrap; align-items: center; justify-content: center;}
.mainEvPopWrap .swiper-controls-auto{ display: none;}

.mainEvPopWrap .swiper-pagination{ width: auto; background-color: #246beb; height: 4.4rem; border-radius: 4.4rem; padding: 0 2.4rem; margin-top: 3rem; align-items: center; justify-content: center; gap: 1rem; display: none;}
.mainEvPopWrap .swiper-pagination-current{ color: #fff !important;}

@media (max-width: 766px) {
    .mainEvPopWrap .swiper-pagination{ display: flex}
}

.pop_btn_wrap{ padding: 0 2rem; margin-top: 4rem; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; gap: 2rem; z-index: 2;}
.pop_btn_wrap > span,
.pop_btn_wrap > button{ height: 4.4rem; border-radius: 4.4rem; color: #fff; font-size: 1.5rem; display: flex; align-items: center; padding: 0 2.5rem;}

.btn_pop_intr_today_close{ background-color: #1d1d1d; display: flex; gap: 1.2rem;}
.btn_pop_intr_close{ background-color: #555; display: flex; gap: 1.2rem;}
.btn_pop_intr_today_close::after,
.btn_pop_intr_close::after{ content: ""; background: url("../images/common/btn_layerpop_close.png") no-repeat; width: 1.3rem; height: 1.3rem; background-size: contain; display: flex;}

@media (max-width: 766px) {
    .pop_btn_wrap{ margin-top: 0;}
}

/* 메인 이벤트 배너 팝업 Fix */
.mainBanWarp{ position: fixed; top: 5.2rem; left: 2rem; z-index: 99999; display: flex; gap: 3rem; align-items: flex-start;}
.main_ban_item{ position: relative; border-radius: 2rem; overflow: hidden; background-color: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); min-width: 30rem;}
.main_ban_item .ban_img{ position: relative;}
.main_ban_item .ban_img,
.main_ban_item .ban_img img{ height: auto; min-height: 46rem; max-width: 600px;}

.btn_BanTopClose{ position: absolute; background-color: rgba(7, 21, 47, .75); width: 4.2rem; height: 4.2rem; border-radius: 1rem; display: inline-flex; justify-content: center; align-items: center; top: 1rem; right: 1rem; z-index: 1;}
.btn_BanTopClose::after{ content: ""; width: 1.4rem; height: 1.4rem; background: url("../images/common/icon_close.png") no-repeat; overflow: hidden; display: inline-flex;}

.main_ban_item .ban_cotl{ font-size: 1.5rem; height: 5rem; display: flex; border: 1px solid #ddd;}
.main_ban_item .ban_cotl button{ flex: 1; font-weight: 700;}
.btn_fixBanToday{}
.btn_fixBanClose{ border-left: 1px solid #d8d8d8;}

@media (max-width: 1023px) {
    .main_ban_item{ position: absolute; left: 1.5rem !important; top: 3rem; z-index: 99999;}
    .mainBanWarp .main_ban_item:nth-child(1){}
    .mainBanWarp .main_ban_item:nth-child(2){ top: 9rem;}
    .mainBanWarp .main_ban_item:nth-child(3){ top: 15rem;}
}

@media (max-width: 766px) {
    .mainBanWarp{ width: 100%; left: 0; top: 0;}
    .main_ban_item{ width: calc(100% - 3rem);}
    .main_ban_item .ban_img,
    .main_ban_item .ban_img img{ width: 100%; height: auto; min-height: auto;}
}

/* 250409 시스템 점검안내 팝업 */
.sys_ch_noti_wrap{ width: 440px; border: 1.2rem solid #246beb; border-radius: 2rem 2rem 0 0; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: space-between;}
.sys_ch_top{ width: 100%;}
.sys_ch_tit{ font-family: 'Gmarket Sans'; font-weight: 700; font-size: 3.8rem; letter-spacing: -1px; padding-top: 12rem; background: url("../images/main/sys_ch_img.svg") no-repeat top 4rem center;}
.sys_ch_tit strong{ color: #246beb;}
.sys_ch_desc{ font-family: 'Gmarket Sans'; font-weight: 500; font-size: 1.7rem; line-height: 1.5; margin-top: .4rem; padding: 0 3rem; height: 13.4rem; width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 2rem;}

.sys_ch_date{ position: relative; width: 100%; height: 10rem; background-color: #eff5ff; border-radius: 2rem 2rem 0 0; display: flex; justify-content: center; align-items: center;}
.sysd_tit{ position: absolute; top: -2rem; left: 50%; transform: translateX(-50%); width: 13rem; height: 4rem; border-radius: 4rem; background-color: #246beb; font-family: 'Gmarket Sans'; font-weight: 700; font-size: 1.9rem; color: #fff; display: inline-flex; justify-content: center; align-items: center;}
.sysd_desc{ font-family: 'Gmarket Sans'; font-weight: 500; font-size: 1.7rem; margin-top: 1rem;}
 
@media (max-width: 766px) {
    .sys_ch_noti_wrap{ width: 100%;}
    .sys_ch_tit{ font-size: 3rem;}
    .sys_ch_desc{ font-size: 1.5rem;}
    .sysd_desc{ font-size: 1.5rem;}
}