.scroll_on { opacity: 0; transition: all 1s;}
.scroll_on.active {opacity: 1 !important;transform: translate(0, 0) !important;}
.scroll_on.type_top {transform: translate(0, -50px);}
.scroll_on.type_bottom {transform: translate(0, 50px);}
.scroll_on.type_left {transform: translate(-50px, 0);}
.scroll_on.type_right {transform: translate(50px, 0);}

.wrap { position: relative; width: 1320px; margin: 0 auto; padding:0 20px;}
#youth .head .wrap {padding: 0 80px 0 20px;}
:root {
	--vh: 100%;
}

.full-page {
	height: calc(var(--vh, 1vh) * 100);
}
body {
	overscroll-behavior: none;
	touch-action: pan-y;
}
@supports (-webkit-touch-callout: none) {
	.main_con {
		transform: translateZ(0); /* iOS 렌더링 버그 방지용 */
		backface-visibility: hidden;
		-webkit-overflow-scrolling: touch;
	}
}
#youth .section {position: relative; height: 100svh; overflow: hidden;}
#youth .section.footer-section {height: fit-content !important; min-height: fit-content !important;}


/* head */
.head { position: relative; left: 0px; top: 0px; z-index: 89; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 90px; background: #fff; box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.05); }
.head.scrolled { position: fixed; bottom: auto; top: 0; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05); }
.head .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }

.head .logo img { width: 151px; }
@media screen and (max-width: 1024px) {
	.head{height:60px;}
	.head .logo img { width: 118px; }
}
.menu { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.menu li { position: relative; margin: 0 45px; }
.menu li a { color: #333; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }

.menu li a .menu_in { position: relative; z-index: 1; }
.menu li a .menu_in:after { content:''; position: absolute; left: 0px; bottom: 0px; width: 100%; height: 10px;; z-index: -1; opacity: 0.65;}
#youth .menu li a:hover .menu_in:after {transform: rotate(-5deg);}
#youth .menu li a .menu_in:hover:after, #youth .menu li a .menu_in.on:after {opacity: 0.65 !important;}
.menu li a .menu_in01:after { background: #e88ba4; }
.menu li a .menu_in02:after { background: #e36e45; }
.menu li a .menu_in03:after { background: #deca20; }
.menu li a .menu_in04:after { background: #4995f2; }
.menu li a .menu_in05:after { background: #23bd73; }

#youth .head{position:fixed;}
#youth .menu li a{font-size:20px; font-weight: 800;}
#youth .menu li a .menu_in:after{opacity: 0 !important;}
#youth .menu li a .menu_in01:hover, #youth .menu li a .menu_in01.on{color:#FF6F00;}
#youth .menu li a .menu_in02:hover, #youth .menu li a .menu_in02.on{color:#008CFF;}
#youth .menu li a .menu_in03:hover, #youth .menu li a .menu_in03.on{color:#FF2060;}
#youth .menu li a .menu_in04:hover, #youth .menu li a .menu_in04.on{color:#00BA7E;}
#youth .menu li a .menu_in05:hover, #youth .menu li a .menu_in05.on{color:#FE73C6;}
#youth .menu li a .menu_in{position: relative; z-index: 1; }
#youth .menu li a .menu_in.on:after{opacity: 0.65 !important; }
#youth .menu li a .menu_in01:hover:after, #youth .menu li a .menu_in01.on:after{background:#FFD3B1;}
#youth .menu li a .menu_in02:hover:after, #youth .menu li a .menu_in02.on:after{background:#BCE1FF;}
#youth .menu li a .menu_in03:hover:after, #youth .menu li a .menu_in03.on:after{background:#FFC3D4;}
#youth .menu li a .menu_in04:hover:after, #youth .menu li a .menu_in04.on:after{background:#CAF1E4;}
#youth .menu li a .menu_in05:hover:after, #youth .menu li a .menu_in05.on:after{background:#FFCAEA;}

#youth .share_icon01_wrap {width: 44px; height: 44px;}
#youth .share_icon01 {background-color: #000; width: 100%; height: 100%; transition: all 0.3s ease; border-radius: 500px; padding: 10px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; position: relative;}
#youth .share_icon01:hover {width: 93px; height: 44px; background-color: #008CFF; border-radius: 500px; justify-content: flex-end; }
#youth .share_icon01:hover::after {content: '링크복사'; clear: both; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 49px; line-height: 17px; color: #fff; font-size: 14px; font-weight: 700; }

#youth .burger{display:none;}

.menu li a:hover .menu_in:after { transform: rotate(-5deg); transition: 0.5s; }

nav#accordian { display: none; }

/* footer */
.footer { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 50px 0 90px; background: #fff; }
.footer_logolist { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; }
.footer_logolist li { margin: 0 40px; }
#youth .footer{border-top:1px solid #F2F2F2;}

.footer_copyright { text-align: center; width: 100%; margin-top: 30px; font-size: 0.95em; }

.visitbox { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 50px; margin-bottom: 50px; padding: 0 35px; background: #f4f4f4; border-radius: 500px; font-size: 1.2em; font-weight: 500; color: #444; }
.visitbox i { margin-right: 10px; color: #6092af; }
.visitbox strong { margin-left: 10px; font-weight: 800; }
#visitor-count { margin-left: 10px; font-weight: 800;}

.fp-watermark {display: none;}
/* #youth .footer-section {height: fit-content; min-height: fit-content !important;} */
#youth .footer-inner, #youth .footer {min-height: fit-content !important; }

/* main */
/* .main_vis { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; align-items: flex-start; width: 100%; height: 1160px; background: url('../image/main/main_vis01.png') center bottom no-repeat; }
.main_vis img { margin-top: 150px; } */
.main_vis { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; align-items: flex-start; width: 100%; background: url('../image/main/main_vis_bg01.jpg') center bottom no-repeat; background-size: cover;}
.main_vis .wrap { padding: 60px 0; }
#youth .main_vis {margin-top:90px; padding-top: 90px; height: 100svh; align-items: center; align-content: center; background: url('../image/youth/main_vis_bg01.jpg') center top no-repeat; background-size:cover;}
#youth .main_vis .wrap{height:100%; display:flex; flex-direction: column; justify-content: center; align-content:center;}
.logo_list { display: flex; flex-wrap: wrap; flex-direction: column; align-content: center; align-items: center; margin-bottom: 50px; }

.logo_list li.logo_inr01 {
	opacity: 0; 
	visibility: hidden; 
	animation: showImage 0.2s linear 0.5s forwards; 
}
.logo_list li.logo_inr02 { animation: fadein 0.5s ease-in-out; }

.logo_list li.logo_inr01 img { margin-right: 40px; margin-bottom: 10px; width: 155px; }
#youth .logo_list li.logo_inr01 img{margin-bottom:0;}
.logo_list li.logo_inr02 img { width: 500px; }
#youth  .logo_list li.logo_inr01 img{width:156px; margin-right: 100px;}
#youth .logo_list li.logo_inr02 img { width: 664px; }

@keyframes fadein{
	0% {
		opacity: 0;
		transform: translateY(50px);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes fadein02{
	0% {
		opacity: 0;
		transform: translateY(0px);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

/* 이미지가 갑자기 나타나도록 설정 */
@keyframes showImage {
	to {
		opacity: 1; /* 완전히 보이게 설정 */
		visibility: visible; /* 레이아웃에서 보이게 변경 */
	}
}

.main_vis_list { display: flex; flex-wrap: wrap; margin-bottom: 80px; }
.main_vis_list li { width: 19%; margin-left: 1.25%; }
.main_vis_list li:first-child { margin-left: 0; }
.main_vis_list li .main_vis_imgbox { text-align: center; cursor: pointer;  }

.main_vis_list li .imgbox { margin-bottom: 25px; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); }
/* .main_vis_list li.vis_list_inr01 .imgbox { border-radius: 5px; border: 6px solid #ffc7da; }
.main_vis_list li.vis_list_inr02 .imgbox { border-radius: 5px; border: 6px solid #ffdbaf; }
.main_vis_list li.vis_list_inr03 .imgbox { border-radius: 5px; border: 6px solid #fff4bc; }
.main_vis_list li.vis_list_inr04 .imgbox { border-radius: 5px; border: 6px solid #aee1ff; }
.main_vis_list li.vis_list_inr05 .imgbox { border-radius: 5px; border: 6px solid #c8f4d5; } */
.main_vis_list li .imgbox img { max-width: 100%; }
.main_vis_list li .stitle { color: #fff; font-size: 24px; font-weight: 700; }


#youth .main_tag{display: flex; justify-content: center; align-items: center; gap:10px; opacity: 0; animation: fadein 0.2s ease-in-out 0.5s forwards; }
#youth .main_tag span{background:#208FEA; height:45px; border-radius: 25px; color:#fff; font-weight: 800; font-size:20px; display:flex; justify-content: center; align-items: center; padding:0 15px; }
#youth .main_vis_text{font-size:28px; color:#fff; margin-top:20px; line-height: 1.5; opacity: 0; animation: fadein 0.2s ease-in-out 1.0s forwards; }
.main_vis p { text-align: center; }
.main_vis p img { max-width: 100%; width: 70%; }

.main_con { position: relative; width: 100%; }

.main_con01 { text-align: center; padding: 100px 0 64px; background: #c7e4fc url('../image/main/main_con01_bg01.jpg') center bottom no-repeat; }
#youth .main_con01 { text-align: center; padding: 100px 0 64px; background: #c7e4fc url('../image/youth/main_con01_bg01.jpg') center bottom no-repeat; }
.main_con01_textbox { padding: 80px 0 150px; background: url('../image/main/main_con01_bg02.jpg') center bottom no-repeat; }
.main_con01 p { margin-bottom: 50px; font-family: 'MoneygraphyR'; font-size: 30px; letter-spacing: -0.05em; line-height: 1.5; }
.main_con01 h3 { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; color: #333; font-family: 'MoneygraphyR'; font-size: 42px; line-height: 1; }
.main_con01 h3 img { display: inline-block; margin-left: 20px; margin-right: 5px; }

.menu_con { display: flex; flex-wrap: wrap; padding: 95px 0 0; background: url('../image/main/main_con_bg02.png') left top repeat; }
#youth .menu_con{background:none; }

.main_con02, .main_con03, .main_con04, .main_con05 { padding: 95px 0; }
.main_con06 { padding: 95px 0 0; }

/* .main_con02 .wrap, .main_con03 .wrap, .main_con04 .wrap, .main_con05 .wrap, .main_con06 .wrap { padding: 75px 0; } */
.main_con02 .wrap, .main_con03 .wrap, .main_con04 .wrap, .main_con05 .wrap, .main_con06 .wrap { padding: 0; }

#youth .menu_con{padding:0;}
#youth .main_con02, #youth .main_con03, #youth .main_con04, #youth .main_con05, #youth .main_con06 { padding: 0; }
/* #youth .main_con02 .wrap, #youth .main_con03 .wrap, #youth .main_con04 .wrap, #youth  .main_con05 .wrap, #youth .main_con06 .wrap { padding: 120px 0 150px; } */
/* #youth .menu_con{overflow: hidden;} */

.main_con02:before { content: ''; position: absolute; left: 0px; bottom: 95px; z-index: 0; width: 32.5%; height: calc(100% - 190px);background: #fbecf1; }
.main_con03:before { content: ''; position: absolute; left: 0px; bottom: 95px; z-index: 0; width: 32.5%; height: calc(100% - 190px);background: #fbe5db; }
.main_con04:before { content: ''; position: absolute; left: 0px; bottom: 95px; z-index: 0; width: 32.5%; height: calc(100% - 190px);background: #fbf8d3; }
.main_con05:before { content: ''; position: absolute; left: 0px; bottom: 95px; z-index: 0; width: 32.5%; height: calc(100% - 190px);background: #e6eff8; }
.main_con06:before { content: ''; position: absolute; left: 0px; bottom: 0px; z-index: 0; width: 32.5%; height: calc(100% - 95px);background: #ddf0e2; }

.main_con02 .wrap:after { content:''; position: absolute; left: 0px; bottom: 0px; z-index: 0; width: 100%; height: 72%; background: #fbecf1; }
.main_con03 .wrap:after { content:''; position: absolute; left: 0px; bottom: 0px; z-index: 0; width: 100%; height: 72%; background: #fbe5db; }
.main_con04 .wrap:after { content:''; position: absolute; left: 0px; bottom: 0px; z-index: 0; width: 100%; height: 72%; background: #fbf8d3; }
.main_con05 .wrap:after { content:''; position: absolute; left: 0px; bottom: 0px; z-index: 0; width: 100%; height: 72%; background: #e6eff8; }
.main_con06 .wrap:after { content:''; position: absolute; left: 0px; bottom: 0px; z-index: 0; width: 100%; height: 72%; background: #ddf0e2; }

#youth .main_con02:before { content: ''; position: absolute; left: 0px; bottom: 0px; z-index: 0; width: calc(50% + 560px); height:100%; border-radius: 0 800px 0 0; background: linear-gradient(24.94deg, #FEFFE4 1.07%, #FFEDDF 79.26%);}
#youth .main_con03:before { content: ''; position: absolute; left: auto; right: 0; bottom: 0; z-index: 0; width: calc(50% + 720px); height: 100%; border-radius: 800px 0 0 0; background: linear-gradient(60.8deg, #E7F4FF 34.38%, #E5FFFD 99.55%);}
#youth .main_con04:before { content: ''; position: absolute; left: 0px; bottom: 0px; z-index: 0; width: calc(50% + 560px); height:100%;  border-radius: 0 800px 0 0; background: linear-gradient(149.24deg, #FFF2E4 0%, #FFE4EC 91.73%);}
#youth .main_con05:before { content: ''; position: absolute; left: auto; right: 0; bottom: 0px; z-index: 0; width: calc(50% + 720px); height:100%; border-radius: 800px 0 0 0; background: linear-gradient(80.94deg, #E2FFF6 34.9%, #E2E8FF 90.57%); }
#youth .main_con06:before { content: ''; position: absolute; left: 0px; bottom: 0px; z-index: 0; width: calc(50% + 560px); height:100%;  border-radius: 0 800px 0 0; background: linear-gradient(46.19deg, #EBD8FF 3.23%, #FFF2FE 45.74%);}

#youth .main_con02 .wrap:after { background-color:transparent;}
#youth .main_con03 .wrap:after { background-color:transparent;}
#youth .main_con04 .wrap:after { background-color:transparent;}
#youth .main_con05 .wrap:after { background-color:transparent;}
#youth .main_con06 .wrap:after {background-color:transparent;}

#youth .main_con02 .wrap:after{left:-150px; top:50%; width:86px; height:96px; background:url('/image/youth/shape_img01.png') no-repeat;}
#youth .main_con03 .wrap:before{content:''; position: absolute; left:auto; right:-180px; top:-86px; width:166px; height:156px; background:url('/image/youth/shape_img02.png') no-repeat;}
#youth .main_con03 .wrap:after{left:-140px; top:auto; bottom:80px; width:140px; height:129px; background:url('/image/youth/shape_img03.png') no-repeat;}
#youth .main_con04 .wrap:before{content:''; position: absolute; left:auto; right:-420px; bottom:80px; width:242px; height:244px; background:url('/image/youth/shape_img05.png') no-repeat;}
#youth .main_con04 .wrap:after{left:-140px; top:auto; top:200px; width:72px; height:72px; background:url('/image/youth/shape_img04.png') no-repeat;}
#youth .main_con05 .wrap:before{content:''; position: absolute; left:auto; right:-200px; bottom:80px; width:70px; height:65px; background:url('/image/youth/shape_img07.png') no-repeat;}
#youth .main_con05 .wrap:after{left:-160px; top:auto; top:40%; width:88px; height:91px; background:url('/image/youth/shape_img06.png') no-repeat;}
#youth .main_con06 .wrap:before{content:''; position: absolute; left:auto; right:-200px; bottom:-4px; width:214px; height:198px; background:url('/image/youth/shape_img09.png') no-repeat;}
#youth .main_con06 .wrap:after{left:-220px; top:auto; top:200px; width:66px; height:70px; background:url('/image/youth/shape_img08.png') no-repeat;}

.main_con_title { position: absolute; top: 0px; right: 0px; text-align: right; z-index: 2; }
.main_con_title h2 { font-size: 42px; font-weight: 900; letter-spacing: -0.03em; }
.main_con_title .cate { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 52px; padding: 0 40px; margin-bottom: 25px; border-radius: 500px; font-family: 'SUITE'; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
#youth .main_con_title .cate{font-size:24px; margin-bottom: 16px; height:64px; font-family: 'SUIT'; font-weight: 800;;}

#youth .main_con_title{left:0; top:15px; text-align:left; display:flex; justify-content: space-between; align-items: end; left:330px;}
#youth .main_con_arrowbox{position: relative; margin-right:28px; bottom:0;}
#youth .main_con_title h2 > span{position:relative;}
#youth .main_con_title h2 > span:before{position:absolute; content: ''; width:100%; height:20px; background:#fff; left:0; bottom:0; z-index: -1;}

.main_con02 .main_con_title h2 { color: #ea7e9c; }
.main_con02 .main_con_title .cate { background: #fff0f4; border: 4px solid #ea7e9c; color: #ea7e9c; }
.main_con03 .main_con_title h2 { color: #e36e45; }
.main_con03 .main_con_title .cate { background: #fcefe7; border: 4px solid #e36e45; color: #e36e45; }
.main_con04 .main_con_title h2 { color: #cfc000; }
.main_con04 .main_con_title .cate { background: #fff791; border: 4px solid #cfc000; color: #cfc000; }
.main_con05 .main_con_title h2 { color: #4995f2; }
.main_con05 .main_con_title .cate { background: #c8def7; border: 4px solid #4995f2; color: #4995f2; }
.main_con06 .main_con_title h2 { color: #24bf73; }
.main_con06 .main_con_title .cate { background: #d3f1de; border: 4px solid #24bf73; color: #24bf73 ; }

#youth .main_con02 .main_con_title h2 { color: #FF6F00; }
#youth .main_con02 .main_con_title .cate { background: #FF6F00; border: 4px solid #FFA35C; color: #fff; }
#youth .main_con03 .main_con_title h2 { color: #008CFF; }
#youth .main_con03 .main_con_title .cate { background: #008CFF; border: 4px solid #9CD3FF; color: #fff; }
#youth .main_con04 .main_con_title h2 { color: #FF2060; }
#youth .main_con04 .main_con_title .cate { background: #FF2060; border: 4px solid #FFAAC2; color: #fff; }
#youth .main_con05 .main_con_title h2 { color: #00BA7E; }
#youth .main_con05 .main_con_title .cate { background: #00BA7E; border: 4px solid #57DEB3; color: #fff; }
#youth .main_con06 .main_con_title h2 { color: #FE73C6; }
#youth .main_con06 .main_con_title .cate { background: #FE73C6; border: 4px solid #FFB8D3; color: #fff ; }

.main_con_arrowbox { position: absolute; right: 0; bottom: -60px; z-index: 1; }
.swiper-button-prev, .swiper-button-next { position: absolute; top: auto; bottom: 0px; z-index: 10; width: 40px; height: 40px; margin-top: 0px; border-radius: 500px; background: #333; color: #fff; cursor: pointer; opacity: 1 !important; }
.swiper-button-prev, .swiper-rtl .swiper-button-next { left: auto; right: 50px; }
.swiper-button-prev:after, .swiper-button-next:after { font-size: 15px; font-weight: bold; }

.main_con02 .swiper-button-prev, .main_con02 .swiper-button-next { background: #ea7e9c; }
.main_con03 .swiper-button-prev, .main_con03 .swiper-button-next { background: #e36e45; }
.main_con04 .swiper-button-prev, .main_con04 .swiper-button-next { background: #cfc000; }
.main_con05 .swiper-button-prev, .main_con05 .swiper-button-next { background: #4995f2; }
.main_con06 .swiper-button-prev, .main_con06 .swiper-button-next { background: #24bf73; }

#youth .main_con02 .swiper-button-prev, #youth .main_con02 .swiper-button-next { background: #FF6F00; }
#youth .main_con03 .swiper-button-prev, #youth .main_con03 .swiper-button-next { background: #008CFF; }
#youth .main_con04 .swiper-button-prev, #youth .main_con04 .swiper-button-next { background: #FF2060; }
#youth .main_con05 .swiper-button-prev, #youth .main_con05 .swiper-button-next { background: #00BA7E; }
#youth .main_con06 .swiper-button-prev, #youth .main_con06 .swiper-button-next { background: #FE73C6; }

.main_con_inr { display: flex; flex-wrap: wrap; align-items: flex-end; }
.con_inr_left { position: relative; z-index: 2; display: inline-flex; flex-direction: column; flex-wrap: wrap; align-items: center; width: 300px; padding-top: 50px; }
.con_inr_left img { max-width: 100%; }
.con_inr_left .stitle { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; width: 100%; height: 80px; font-size: 26px; font-weight: 800; }

#youth .con_inr_left{padding-top:10px;}

#youth .mo-menu {display: none;}

.con_inr_right { width: calc(100% - 300px); padding: 0 30px; }
.swiper { width: 100%; height: 100%; }
.swiper-slide { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; height: auto; }
.swiper-slide .popup_btn { cursor: pointer; }
.swiper-slide img { display: block; max-width: 100%; height: 100%; object-fit: cover; }
.slide_inr .imgbox { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; text-align: center; width: 100%; height: 360px; }
#youth .slide_inr .imgbox{height:403px; border-radius: 10px; border:1px solid #EDEDED; transition-duration: 0.5s;}
#youth .con_inr_right .stitle{height:auto}
.slide_inr .imgbox img { border-radius: 10px; }
.con_inr_right .stitle { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; width: 100%; height: 70px; margin-top: 15px; font-size: 19px; font-weight: 800; letter-spacing: -0.05em; }
#youth .slide_inr .imgbox:hover{box-shadow: rgba(0, 0, 0, 0.1) 0 5px 10px;}

#youth .coming{ top: 50%; left:50%; position:absolute; width:100%; max-width:1360px; margin-left:-680px; height:100%; max-height:720px; margin-top:-360px; border-radius:50px; background:rgba(0,0,0,0.7); z-index: 10; color:#fff; font-size:80px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-transform: uppercase; font-weight: 800; }

.popup_modal { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.8); z-index: 90; display: none; }
.popup01_con { position: fixed; left: 50%; top: 50%; max-width: 90%; width: 1024px; height: 90%; background: #e6eff8; border-radius: 10px; display: none; z-index: 91; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); box-shadow: 0 0px 20px rgba(0, 0, 0, 0.2); }
.popup_close { position: absolute; right: 0px; top: 0px; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 45px; height: 45px; background: #167ac6; border: none; border-radius: 0 10px; color: #fff; font-size: 22px; font-weight: bold; }

/* scroll */
.popup01_coninr::-webkit-scrollbar, .popup01_coninr .text_inr::-webkit-scrollbar { width:5px; height: 5px; }
.popup01_coninr::-webkit-scrollbar-track, .popup01_coninr .text_inr::-webkit-scrollbar-track { background:#fff; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; }
.popup01_coninr::-webkit-scrollbar-thumb, .popup01_coninr .text_inr::-webkit-scrollbar-thumb { height:50px; width:50px; background:#aaa; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; }
.popup01_coninr::-webkit-scrollbar-thumb:window-inactive, .popup01_coninr .text_inr::-webkit-scrollbar-thumb:window-inactive { background:#aaa; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; }

.popup01_coninr { overflow: auto; position: relative; display: flex; flex-direction: column; align-items: center; align-content: center; height: 100%; padding: 50px 30px; font-family: 'SUITE'; }
.popup01_coninr .title { width: 100%; text-align: center; margin-bottom: 30px; color: #111; font-family: 'SUITE'; font-size: 1.5em; font-weight: 800; letter-spacing: -0.03em; }
.popup01_coninr .infobox { display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto; }
.popup01_coninr .imgbox { text-align: center; width: 50%; padding-right: 30px; }
.popup01_coninr .imgbox02 { text-align: center; width: 100%; }
.popup01_coninr .imgbox iframe { height: 600px; }
.popup01_coninr .textbox { width: 50%; max-height: 600px; font-size: 0.9em; line-height: 1.6; font-weight: 600; letter-spacing: -0.03em; }
.text_inr_in p {font-size: 1em; font-weight: 900; line-height: 1.6; letter-spacing: -0.03em; padding-left: 10px; margin-bottom: 10px; position: relative;}
.text_inr_in p::after {content: ''; clear: both; display: block; width: 4px; border-radius: 500px; height: 4px; position: absolute; top: 50%; transform: translateY(-50%); left: 0px; background-color: #000;}
.text_inr_in p.two::after {content: ''; clear: both; display: block; width: 4px; border-radius: 500px; height: 4px; position: absolute; top: 10px; transform: translateY(-50%); left: 0px; background-color: #000;}
.popup01_coninr .text_inr { padding: 30px; background: #fff; border-radius: 10px; }
.popup01_coninr .text_inr01 { overflow: auto; height: 66%; margin-bottom: 4%; }
.popup01_coninr .text_inr02 { overflow: auto; height: 30%; }
.popup01_coninr .text_inr03 { overflow: auto; height: auto; max-height: 600px; }
.popup01_coninr .text_inr:last-child { margin-bottom: 0px; }
.popup01_coninr .textbox h3 { margin-bottom: 20px; font-family: 'SUITE'; font-size: 1.3em; font-weight: 800; }
.popup01_coninr .textbox h4 { position: relative; margin-bottom: 15px; padding-left: 20px; font-family: 'SUITE'; font-size: 1.2em; font-weight: 800; }
.popup01_coninr .textbox h4:after { content: ''; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; background: #222; border-radius: 500px; }
.popup01_coninr .textbox h4 span { display: inline-block; margin-left: 5px; color: #555; font-size: 13px; }
.popup01_coninr .text_inr.text_inr02 p a {text-decoration: underline;}
#youth .popup01_coninr .text_inr.text_inr02 p a {text-decoration: underline; color: #3a8afd;}
.popup01_coninr .text_inr.text_inr02 p a:hover{ /*border-bottom: 1px solid #3a8afd;*/ color: #3a8afd; }
.popup01_coninr .text_inr_in { margin-bottom: 30px; }
.popup01_coninr .text_inr_in:last-child { margin-bottom: 0px; }
.popup01_coninr .text_inr_imgbox {  }
.popup01_coninr .text_inr_imgbox img { max-width: 100%;}

#youth .popup01_con{ max-height:740px; background:#fff;}
#youth .popup01_coninr{padding:30px;}
#youth .popup01_coninr .textbox h3{position:relative; padding-left:20px;}
#youth .popup01_coninr .textbox h3:before{content:''; width:14px; height:23px; position:absolute; background:url('/image/youth/pop_h3_ico.png') center center no-repeat; left:0; top:3px;}
#youth .popup01_coninr .text_inr {background:#F6F6F6;}
#youth .popup_close{background:#D9D9D9; width:40px; height:40px; right:5px; top:5px; border-radius: 5px; font-size:16px;}
.popup01_coninr .text_inr02 p.mt10 {margin-top: 10px;}


.popup_button { position: absolute; left: -5%; top: 50%; width: 45px; height: 45px; background: transparent; border-radius: 5px; border: none; color: #fff; font-size: 30px; font-weight: bold; }
.popup_button.popup_next { left: auto; right: -5%; }

.main_con07 { position: relative; text-align: center; padding: 0px 0 0px; background: #c1e4f9 url('../image/main/main_con07_bg01.png') left top repeat; }
.main_con07:after { content:''; position: absolute; left: 2%; bottom: 2%; width: 365px; height: 399px; background: url('../image/main/main_con07_deco01.png') left top repeat; }
.main_con07_inr { max-width: 100%; height: 984px; margin: 0 auto; background: url('../image/main/main_con07_img01.png') center top no-repeat; }
.main_con07_imgbox { width: 100%; }
.main_con07_imgbox img { max-width: 100%; }
.main_con07_textbox { position: absolute; left: 38%; top: 27%; width: 940px; transform: rotate(-2deg); transition: 0.5s; }

.main_con07 h2 { position: relative; margin-bottom: 80px; padding: 0 35px; main_con07_deco02.pngcolor: #372400; font-family: 'MoneygraphyR'; font-size: 70px; font-weight: 400; letter-spacing: -0.03em; }
.main_con07 h2:after { content:''; position: absolute; left: 0px; bottom: -15px; width: 100%; height: 60px; background: #fff8a7; z-index: -1; }
.main_con07 h2:before { content: ''; position: absolute; left: -10px; bottom: -5px; width: 100%; height: 118px; background: url('../image/main/main_con07_deco02.png') left bottom no-repeat; }
.dwonload_list { width: 80%; margin: 0 auto; }
.dwonload_list li { margin-bottom: 25px; }
.dwonload_list li a { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 75px; background: #fff; border-radius: 500px; border: 4px solid #523600; color: #523600; font-family: 'MoneygraphyR'; font-size: 32px; letter-spacing: -0.03em; box-shadow: 0 7px 0px rgba(82, 54, 0, 0.2); }
.dwonload_list li a:hover { background: #523600; color: #fff; }

.main_con08 { padding: 150px 0; background: #ccf7f0 url('../image/main/main_con08_bg01.jpg') center top no-repeat; }
.main_con08_title { text-align: center; margin-bottom: 100px; }
.main_con08_list { display: flex; flex-wrap: wrap; justify-content: center; }
.main_con08_list li { text-align: center; margin-left: 50px; }
.main_con08_list li:first-child { margin-left: 0px; }
.main_con08_list li .imgbox { width: 100%; margin-bottom: 25px; }
.main_con08_list li span.stitle { display: inline-flex; flex-wrap: wrap; justify-content: center; text-align: center; width: auto; padding: 10px 25px; border-radius: 10px; font-size: 24px; font-weight: 700; }
.main_con08_list li span.stitle01 { color: #e68aa5; background: #fcf3f6; border: 3px solid #e68aa5; }
.main_con08_list li span.stitle02 { color: #e36e45; background: #fcf0ec; border: 3px solid #e36e45; }
.main_con08_list li span.stitle03 { color: #deca20; background: #fcfae8; border: 3px solid #deca20; }
.main_con08_list li span.stitle04 { color: #4995f2; background: #ecf4fe; border: 3px solid #4995f2; }
.main_con08_list li span.stitle05 { color: #23bd73; background: #e9f8f1; border: 3px solid #23bd73; }

/* sub */
.sub_vis { position: relative; width: 100%; height: 550px; margin-bottom: 80px; background: #eee; }
.sub_title { margin-bottom: 50px; }
.sub_title h2 { text-align: center; font-size: 42px; font-weight: 800; letter-spacing: -0.03em; }

/*intro*/
#intro.wrapper {width: 100%; position: relative; overflow: visible; margin: 30px auto; min-height: calc(100vh - 60px);  display: flex; justify-content: center; align-items: center;}
#intro .container {width: 860px; padding: 0; margin: 20px auto;  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 60px;}
#intro .row {display: flex; gap:20px; flex-wrap: wrap; width:100%; justify-content: center;}
#intro .count {display: flex; gap:20px; flex-wrap: wrap;  justify-content: center;}
#intro .center_logo {margin:0 30px;}
#intro .center_logo img{max-width:100%;}
#intro .col-6 {max-width: 420px; width:48%; position: relative; background-repeat: no-repeat; background-position: bottom center; background-size: 45%;}

/* 출산육아 영역 배경 */
#intro .col-6.baby a {background-color: #FF8F03; background-image: url('/image/intro/bg_baby.png');  background-repeat: no-repeat; background-position: 50% 225px; background-size: 90%;}

/* 청년정책 영역 배경 */
#intro .col-6.youth a { background-image: url('/image/intro/bg_youth.png'), linear-gradient(180deg, #19A0E1 0%, #086BAE 100%); background-repeat: no-repeat; background-position: 50% 160%; background-size: 345px, 100%;}

/* 소상공인정책 영역 배경 */
#intro .col-6.smallbiz a { background-image: url('/image/intro/bg_smallbiz.png'), linear-gradient(180deg, #f69ab9 0%, #f581a8 100%); background-repeat: no-repeat; background-position: 50% 160%; background-size: 345px, 100%;}

/* 어르신정책 영역 배경 */
#intro .col-6.senior a { background-image: url('/image/intro/bg_senior.png'), linear-gradient(180deg, #b3e51f 0%, #76bb1d 100%); background-repeat: no-repeat; background-position: 50% 122%; background-size: 345px, 100%;}

#intro .col-6 a {
	transition: background-size 0.5s cubic-bezier(0.4,0,0.2,1), background-position 0.5s cubic-bezier(0.4,0,0.2,1);
}

#intro .col-6 {flex-direction: column; display: flex; align-items: center; justify-content: center; gap:20px;}
#intro .col-6 a {display: block; width: 100%; height:460px; position: relative; text-decoration: none;}
#intro .col-6 p.coming{background:rgba(0, 0, 0, 0.05); padding:20px; width:100%; text-align:center; font-size:18px; font-weight: 800; height:80px; display: flex; align-items: center; justify-content: center;}
#intro .introLogo {position: absolute; top: -5px; left: 25px; width: 122px; height: 30px; background-image: url('/image/intro/intro_logo.svg'); background-position: left center; background-repeat: no-repeat; background-size: 122px 30px;}
#intro .txt_box .txt, #intro .txt_box .logo {position: absolute; top: 15%; left: 50%; transform: translate(-50%); text-align: center; width: 80%; transition: opacity 0.3s ease; z-index: 2; }

#intro .col-6.youth a:hover .txt_box .txt,
#intro .col-6.baby a:hover .txt_box .txt{
    opacity: 0;
}
#intro .col-6.youth a:hover .txt_box .logo,
#intro .col-6.baby a:hover .txt_box .logo{
    opacity: 1;
}

/* COOMING SOON */
.soon-wrap {
	position: relative;
	display: inline-block;
}
.soon-wrap a {
display: block;
position: relative;
}
.soon-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.6); /* 알파 배경 */
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
pointer-events: none; /* 클릭 막기 */

}
.soon-text {
color: #fff;
font-size: 2rem;
font-weight: bold;
letter-spacing: 0.1em;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
font-weight: 800;
letter-spacing: 0;
}

#intro .col-6.smallbiz a,
#intro .col-6.senior a {
	cursor: default;
}


#intro .txt_box  .logo {
    opacity: 0;
}
#intro .txt_box  .txt {
    opacity: 1;
}

#intro .logo img {
    max-width: 100%;
    height: auto;
}

#intro .txt {
    color: #fff;
    letter-spacing: -0.03em;
}

#intro .txt p {
    margin: 0;
    font-size: 20px;
    line-height: 1;
    font-weight: 300;
    
}

#intro .txt span {
    display: block;
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
}

.fp-is-overflow .fp-overflow.fp-auto-height-responsive,
.fp-is-overflow .fp-overflow.fp-auto-height,
.fp-is-overflow > .fp-overflow{
    overflow-y: initial;
}


.quick_wrap {position: fixed; bottom: 40px; right: 40px; z-index: 11;}
.quick_wrap .quick-toggle-box {position: relative; bottom: calc(100% + 180px); left: 0; width: 100%; height: 100%; background-color: transparent; z-index: 11; transition: 0.3s all ease; }
.quick_wrap .quick-btn {display: flex; min-height: 60px; align-items: center; justify-content: flex-end; gap: 10px;}
.quick_wrap .quick-toggle-box li {display: none;}
.quick_wrap .quick-toggle-box li + li{margin-top: 5px;}
.quick_wrap .quick-toggle-box span {font-size: 14px; font-weight: 600; color: #000; line-height: 17px; letter-spacing: -0.42px;} 
.quick_wrap .quick-toggle-box a {width: 60px; height: 60px; background-color: #000; border-radius: 500px;}
.quick_wrap .quick-toggle-box a.quick-home {background-image: url('/image/footer/quick_home.svg'); background-size: 23.53px 25px; background-position: center; background-repeat: no-repeat;}
.quick_wrap .quick-toggle-box a.quick-baby {background-image: url('/image/footer/quick_baby.svg'); background-size: 35px 33.62px; background-position: center; background-repeat: no-repeat;}
.quick_wrap .quick-toggle-box a.quick-youth {background-image: url('/image/footer/quick_youth.svg'); background-size: 35px 37.85px; background-position: 50% 42%; background-repeat: no-repeat;}
.quick {border-radius: 500px; background-color: #000; width: 60px; height: 60px; background-image: url('/image/footer/quick_menu.svg'); background-size: 25px; background-position: center; background-repeat: no-repeat; display: flex; margin-top: 5px;}






/* Floating Menu */
.floating-menu {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 1000;
  -webkit-tap-highlight-color: transparent;
}

.floating-menu .menu-toggle {
  width: 60px;
  height: 60px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.floating-menu.active .menu-toggle {
  transform: rotateY(180deg);
}

.floating-menu .menu-toggle .front,
.floating-menu .menu-toggle .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: 50%;
}

.floating-menu .menu-toggle .back {
  transform: rotateY(180deg);
}

.floating-menu .menu-toggle img {
  width: 40px;
  height: 40px;
}

.floating-menu .menu-items {
  position: absolute;
  bottom: 76px;
  right: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  pointer-events: none;
}

.floating-menu.active .menu-items {
  visibility: visible;
  pointer-events: auto;
}

.floating-menu .menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  opacity: 0;
  transform: translateY(40px);
  visibility: hidden;
  text-decoration: none;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.floating-menu.active .menu-item {
  animation: slideUpFadeIn 0.4s ease forwards;
  visibility: visible;
  pointer-events: auto;
}

.floating-menu.active .menu-item:nth-child(3) {
  animation-delay: 0.1s;
}

.floating-menu.active .menu-item:nth-child(2) {
  animation-delay: 0.2s;
}

.floating-menu.active .menu-item:nth-child(1) {
  animation-delay: 0.3s;
}

/* 메뉴가 닫힐 때의 애니메이션 - 클릭 이후에만 적용 */
.floating-menu.clicked:not(.active) .menu-item {
  animation: slideDownFadeOut 0.3s ease forwards;
}

@keyframes slideUpFadeIn {
  0% {
    opacity: 0;
    transform: translateY(40px);
    visibility: visible;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}

@keyframes slideDownFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
  100% {
    opacity: 0;
    transform: translateY(40px);
    visibility: hidden;
  }
}

.floating-menu .menu-item .item-text {
  background: #fff;
  padding: 8px 20px;
  border-radius: 50px;
  margin-right: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: #333;
  order: 1;
}

.floating-menu .menu-item .item-icon {
  width: 60px;
  height: 60px;
  background: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  order: 2;
  -webkit-tap-highlight-color: transparent;
}

.floating-menu .menu-item .item-icon:hover {
  transform: scale(1.1);
}

.floating-menu .menu-item .item-icon img {
  width: 40px;
  height: 40px;
}

/* 모바일 스타일 */
@media screen and (max-width: 768px) {
  .floating-menu {
    bottom: 24px;
    right: 24px;
  }

  .floating-menu .menu-toggle,
  .floating-menu .menu-item .item-icon {
    width: 50px;
    height: 50px;
  }

  .floating-menu .menu-toggle img,
  .floating-menu .menu-item .item-icon img {
    width: 32px;
    height: 32px;
  }

  .floating-menu .menu-items {
    bottom: 64px;
    gap: 12px;
  }

  .floating-menu .menu-item .item-text {
    font-size: 13px;
    padding: 6px 16px;
    margin-right: 8px;
  }
}

/* 작은 모바일 스타일 */
@media screen and (max-width: 360px) {
  .floating-menu {
    bottom: 16px;
    right: 16px;
  }

  .floating-menu .menu-toggle,
  .floating-menu .menu-item .item-icon {
    width: 44px;
    height: 44px;
  }

  .floating-menu .menu-toggle img,
  .floating-menu .menu-item .item-icon img {
    width: 28px;
    height: 28px;
  }

  .floating-menu .menu-items {
    bottom: 56px;
    gap: 10px;
  }

  .floating-menu .menu-item .item-text {
    font-size: 12px;
    padding: 5px 12px;
    margin-right: 6px;
  }
}