/* s1 */
.s1 { padding: 70px 0; background-color: var(--beige); }
.s1 .wrap { text-align: center; }
.s1 .wrap .top {font-size: 1px;display: flex; flex-direction: column; align-items: center; justify-content: center;gap: 10em; margin-bottom: 30em; }
.s1 .wrap .top > div { }
.s1 .wrap .top > div:nth-child(1) { transform: translateX(40em); }
.s1 .wrap .top > div:nth-child(2) { transform: translateX(-80em); }
.s1 .wrap .top > div:nth-child(3) { transform: translateX(-30em); }
.s1 .wrap .top > div:nth-child(3) > div { display: flex; align-items: center; justify-content: center; gap: 30em; }
.s1 .wrap .top > div p { font-size: 43em; color: var(--gold); }
.s1 .wrap .top > div.n3 p { font-size: 48em; color: var(--gray); }
.s1 .wrap .top > div .svg { width: 51em; height: 48em; display: flex; align-items: center; }
.s1 .wrap .top > div .svg * { fill: var(--lightGreen); }
.s1 .wrap .swiperBx { margin-bottom: 34px; pointer-events: none;}
.s1 .wrap .swiper { width: 363px; overflow: visible; }
.s1 .wrap .swiper-wrapper { }
.s1 .wrap .swiper-slide { overflow: visible !important; }
.s1 .wrap .swiper-slide-active { }
.s1 .wrap .swiper-slide img {width: 100%; object-fit: cover; aspect-ratio: 363/440;opacity: 0; transition: opacity 0.5s,transform 1s; }
.s1 .wrap .swiper-slide-active img { opacity: 1; }
.s1 .wrap .swiper-slide.prev-1 img { transform: translateX(0%) scale(0.7); opacity: 1; }
.s1 .wrap .swiper-slide.prev-2 img { transform: translateX(34%) scale(0.4); opacity: 1; }
.s1 .wrap .swiper-slide.prev-3 img { transform: translateX(90%) scale(0.1); }
.s1 .wrap .swiper-slide.next-1 img { transform: translateX(0%) scale(0.7); opacity: 1; }
.s1 .wrap .swiper-slide.next-2 img { transform: translateX(-34%) scale(0.4); opacity: 1; }
.s1 .wrap .swiper-slide.next-3 img { transform: translateX(-90%) scale(0.1); }
.s1 .wrap .bottom { font-size: 20px; line-height: calc(32/20); text-align: center; font-family: 'Pretendard'; }
.s1 .wrap .bottom .gradient { }


/* 모션 셋팅 */
.s1 .wrap .top > div:nth-child(1) p { transform: translateX(-120px); opacity: 0; }
.s1 .wrap .top > div:nth-child(2) p { transform: translateX(120px); opacity: 0; }
.s1 .wrap .top > div:nth-child(3) > div { transform: translateX(-120px); opacity: 0; }
.s1 .wrap .swiperBx { transform: translateY(60px); opacity: 0; }

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	.s1 .wrap .swiper-slide img {transform: unset !important; opacity: 1;}
}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	.s1 .wrap .top{font-size: min(calc(1.6/820*100vw),1px); }
	.s1 .wrap .top > div:nth-child(1) { transform: unset; }
	.s1 .wrap .top > div:nth-child(2) { transform: unset; }
	.s1 .wrap .top > div:nth-child(3) { transform: unset; }
	.s1 .wrap .swiper{width: min(300px,90%);}
	.s1 .wrap .bottom{font-size: 18px; }
}
@media screen and (max-width:500px) {
	.s1 .wrap .bottom{font-size: 14px; max-width: 280px; margin: 0 auto;}
	.s1 .wrap .bottom br{display: none;}
}
@media screen and (max-width:320px) {}




/* s2 */
.s2 { background-color: var(--green); padding: 170px 0; box-sizing: border-box; }
.s2 .wrap { display: flex; align-items: center; justify-content: center; position: relative; }
.s2 .left {width: 50%; display: flex; align-items: center; justify-content: flex-end;position: relative; z-index: 2; }
.s2 .left .logo { position: absolute; left: 0; bottom: 100%; margin-bottom: 24px; }
.s2 .left .logo svg { height: 30px; }
.s2 .left .logo svg * { fill: var(--lightGreen); }
.s2 .left .imgBx {min-width: min(50vw,965px); aspect-ratio: 965/645; overflow: hidden; }
.s2 .left .imgBx img { width: 100%; height: 100%; object-fit: cover; }
.s2 .right { width: 50%; padding-left: 80px; box-sizing: border-box; }
.s2 .right .txtBx {display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.s2 .right .txtBx small {font-family: 'Roboto'; font-size: 25px; color: var(--gold); }
.s2 .right .txtBx .big { font-size: min(calc(200/1920*100vw),200px); color: #fff; position: relative; margin-bottom: calc(50/200*1em);}
.s2 .right .txtBx .big .absol { position: absolute; opacity: 0.1; top: 0; margin: 0 0.2em; }
.s2 .right .txtBx .big .absol.prev { right: 100%; }
.s2 .right .txtBx .big .absol.next { left: 100%; }
.s2 .right .txtBx p {font-size: 24px; font-family: 'Pretendard'; line-height: calc(38/24); color: #fff; }

@media screen and (max-width:1600px) {
	.s2 .right .txtBx p{font-size: 20px; }
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	.s2{padding: 130px 0; padding-bottom: 110px;}
	.s2 .right{padding-left: 60px;}
	.s2 .right .txtBx small{font-size: 18px; }
	.s2 .right .txtBx p{font-size: 20px; }
}
@media screen and (max-width:1024px) {
	.s2 .right .txtBx small{font-size: 16px; }
	.s2 .right .txtBx p{font-size: 16px; }
}
@media screen and (max-width:820px) {
	.s2{padding: 100px 0;}
	.s2 .wrap{flex-direction: column; gap: 60px;}
	.s2 .left{flex-direction: column; align-items: flex-start; width: 100%;}
	.s2 .left .logo{position: unset;}
	.s2 .left .logo svg{height: 20px;}
	.s2 .right{padding-left: 0; width: 100%;}
	.s2 .right .txtBx .big .absol{display: none;}
	.s2 .right .txtBx p{max-width: 370px;}
}
@media screen and (max-width:500px) {
	.s2 .wrap{gap: 40px;}
	.s2 .right .txtBx .big{font-size: 60px; margin-top: 10px; margin-bottom: 20px;}
	.s2 .right .txtBx p{font-size: 14px; }
}
@media screen and (max-width:320px) {}





/* s3 */
.s3 { background-color: var(--beige); padding: 240px 0; box-sizing: border-box; }
.s3 .wrap { text-align: center; }
.s3 .wrap small { font-family: 'Roboto'; font-size: 20px; display: block; margin-bottom: 2em; }
.s3 .wrap small p { opacity: 0.6; }
.s3 .wrap ul {font-size: 1px; line-height: 1.2; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18em 34em; }
.s3 .wrap ul li {position: relative; transition: color 1s;display: flex; align-items: center; justify-content: center; }
.s3 .wrap ul li.n4 { padding-left: 80em; }
.s3 .wrap ul li.green { color: var(--lightGreen); }
.s3 .wrap ul li.gold { color: var(--gold); }
.s3 .wrap ul li .txt { overflow: hidden; position: relative; z-index: 2; }
.s3 .wrap ul li .txt p { font-size: 80em; }
.s3 .wrap ul li .imgBx { position: absolute; animation: floating20 forwards infinite 5s; margin-top: 10px;}
.s3 .wrap ul li .imgBx.n1 { right: 82%; }
.s3 .wrap ul li .imgBx.n2 { right: 91%; animation-delay: 0.2s; animation-duration: 6s; }
.s3 .wrap ul li .imgBx.n3 { right: 55%; top: 49%; animation-delay: 0.4s; animation-duration: 5.5s; }
.s3 .wrap ul li .imgBx.n1{ min-width: 169em; width: 169em;}
.s3 .wrap ul li .imgBx.n2{ min-width: 130em; width: 130em;}
.s3 .wrap ul li .imgBx.n3{ min-width: 125em; width: 125em;}

@media screen and (max-width:1600px) {
	.s3 .wrap ul{font-size: calc(1/1600*100vw); }
}
@media screen and (max-width:1440px) {
	.s3{padding: 180px 0;}
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s3{padding: 120px 0;}
}
@media screen and (max-width:820px) {
	.s3 .wrap ul{font-size: calc(0.66/820*100vw); }
	.s3 .wrap small{font-size: 16px; }
}
@media screen and (max-width:500px) {
	.s3{padding: 80px 0;}
	.s3 .wrap small{font-size: 14px; }
}
@media screen and (max-width:320px) {}




/* s4 */
.s4{background-color: var(--beige);}
.s4 .top{background-color: var(--lightGreen); padding: 18px 0; box-sizing: border-box; overflow: auto;}
.s4 .top .wrap{
	display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap;
	gap: 20px 30px; padding: 0 20px; box-sizing: border-box;
}
.s4 .top .wrap div{font-size: 24px; color: #fff; cursor: pointer; text-align: center;}
.s4 .top .wrap div:hover{color: var(--gray); transition-duration: 0s;}
.s4 .top .wrap div.on{color: var(--gray);}
.s4 .top .wrap div p{position: relative; display: inline-block;}
.s4 .top .wrap div p::before {
	content:''; display: block; position: absolute; bottom: -1px; width: 100%; height: 1px;
	background-color: var(--gray); transform-origin: left center; transition: transform 0.5s;
	transform: scaleX(0);
}
.s4 .top .wrap div.on p::before{transform: scaleX(1);}
.s4 .contBx{}
.s4 .contBx .inner{
	aspect-ratio: 1920 / 900; position: relative;
	width: 100%; display: flex; align-items: center; justify-content: center;
}
.s4 .contBx .cont{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; pointer-events: none; transition: opacity 0.5s;
}
.s4 .contBx .cont.on{opacity: 1; pointer-events: auto;}
.s4 .contBx .cont .bgBx{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
}
.s4 .contBx .cont .bg{width: 100%; height: 100%;}
.s4 .contBx .cont .bg div{background-size: cover; background-position: center center; width: 100%; height: 100%;}
.s4 .contBx .cont.n6 .bg div{background-position: center 80%;}
.s4 .contBx .cont h2{
	position: absolute; font-size: calc(1/1920*100vw); color: #fff; left: 12.5%;
}

.s4 .contBx .cont.n4 h2{top: 60%;}
.s4 .contBx .cont.n5 h2{top: 60%;}

.s4 .contBx .cont h2 small{font-size: max(30em,14px); display: block; margin-bottom: max(0.6em,10px);}
.s4 .contBx .cont h2 p{font-size: 80em; }
.s4 .contBx .cont .dotBx{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.s4 .contBx .cont .dot{
	position: absolute; transform: translate(-50%,-50%); cursor: pointer;
	font-size: calc(1/1920*100vw); display: flex; align-items: center; justify-content: center;
	animation: rotate forwards infinite 4s linear;
}
.s4 .contBx .cont .dot .green{
	width: 28em; height: 28em; border-radius: 50%;
	background-color: var(--green);
	position: absolute; opacity: 0.6; transition: opacity 0.2s;
}
.s4 .contBx .cont .dot:hover .green{opacity: 1;}
.s4 .contBx .cont .dot .white{
	width: 52em; height: 52em; border-radius: 50%;
	background-color: #fff; opacity: 0.5;
	position: absolute;
}
.s4 .contBx .cont .dot .dash{
	width: 76em; height: 76em; border-radius: 50%;
	border: 1px dashed #fff; box-sizing: border-box;
	display: flex; align-items: center; justify-content: center;
}
.s4 .contBx .cont .dot .dash div{
	width: 11em; height: 11em; border-radius: 50%;
	background-color: #405e48;
	position: absolute; top: 0; transform: translateY(-50%);
}

/* 팝업 */
.card_popup{
	position: absolute; z-index: 10; display: flex; align-items: center; justify-content: center; right: 0;
}
.card_popup .card{
	position: absolute; right: -1px;
	opacity: 0; pointer-events: none;
	transition: opacity 0.5s;
}
.card_popup .card.on{
	opacity: 1; pointer-events: auto;
}
.card_popup .card .cancel{
	font-size: 30px; text-align: center; margin-bottom: 0.5em; mix-blend-mode: difference;
	display: none;
}
.card_popup .card .cancel i{cursor: pointer;}
.card_popup .card .whiteBx{
	width: 380px; min-height: 524px; border-radius: 20px 0 0 20px;
	background-color: rgba(255,255,255,0.9); position: relative;
	padding: 20px; box-sizing: border-box;
	display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.card_popup .card .whiteBx p{font-size: 16px; font-weight: 500; margin-bottom: calc(20/16*1em); background: #0642254f; padding: calc(7/16*1em) calc(15/16*1em); border-radius: 30px; width: fit-content; color: #fff;}
.card_popup .card .swiper{width: 100%;}
.card_popup .card .swiper-slide{opacity: 0; transition: opacity 0.5s;}
.card_popup .card .swiper-slide-active{opacity: 1;}
.card_popup .card .swiper-slide .imgBx{height: 220px; text-align: center; margin-bottom: 40px;}
.card_popup .card .swiper-slide .imgBx img{object-fit: contain; max-height: 100%;}
.card_popup .card .swiper-slide .txtBx{text-align: center;}
.card_popup .card .swiper-slide .txtBx h3{font-size: 25px; line-height: 1.4; padding: 0 30px; box-sizing: border-box;}
.card_popup .card .swiper-slide .txtBx .info{font-size: 18px; line-height: calc(28/18); margin: 20px 0;}
.card_popup .card .swiper-slide .txtBx a{
	border-radius: 100px; display: flex; align-items: center;
	color: #fff; font-family: 'Pretendard'; font-size: 15px;  font-weight: 500;
	padding: calc(12/15*1em) 2em; background-color: var(--gold); display: inline-flex;
}
.card_popup .card .swiper-slide .txtBx a:hover{background-color: #444;}
.card_popup .card .swiper-slide .txtBx a p{}


/* 화살표 */
.card_popup .card .arrow{
	position: absolute; z-index: 3; cursor: pointer;
	width: 36px; height: 36px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background-color: #cecac8; color: #fff; font-size: 18px;
}
.card_popup .card .arrow:hover{background-color: var(--lightGreen);}
.card_popup .card .arrow.swiper-button-disabled{cursor: auto; background-color: #cecac8 !important; opacity: 0.3;}
.card_popup .card .arrow i{}
.card_popup .card .arrow.prev{left: 20px;}
.card_popup .card .arrow.next{right: 20px;}

/* 점위치 */
.s4 .contBx .cont .dot.last{right: 50px; bottom: 50px;}

.s4 .contBx .cont.n1 .dot.n1{left: 14%;top: 18%;}
.s4 .contBx .cont.n1 .dot.n2{left: 43%;top: 40%;}
.s4 .contBx .cont.n1 .dot.n3{left: 60%;top: 49%;}

.s4 .contBx .cont.n2 .dot.n1{left: 20%;top: 26%;}
.s4 .contBx .cont.n2 .dot.n2{left: 41.2%;top: 60%;}
.s4 .contBx .cont.n2 .dot.n3{left: 52%;top: 61%;}
.s4 .contBx .cont.n2 .dot.n4{left: 82%;top: 66%;}

.s4 .contBx .cont.n3 .dot.n1{left: 15%;top: 29%;}
.s4 .contBx .cont.n3 .dot.n2{left: 57%;top: 40%;}
.s4 .contBx .cont.n3 .dot.n3{left: 62%;top: 59%;}
.s4 .contBx .cont.n3 .dot.n4{left: 57%;top: 80%;}

.s4 .contBx .cont.n4 .dot.n1{left: 43%;top: 50%;}
.s4 .contBx .cont.n4 .dot.n2{left: 58%;top: 77%;}
.s4 .contBx .cont.n4 .dot.n3{left: 61%;top: 88%;}
.s4 .contBx .cont.n4 .dot.n4{left: 69%;top: 46%;}

.s4 .contBx .cont.n5 .dot.n1{left: 32.5%;top: 3%;}
.s4 .contBx .cont.n5 .dot.n2{left: 28%;top: 44%;}
.s4 .contBx .cont.n5 .dot.n3{left: 41%;top: 54%;}

.s4 .contBx .cont.n6 .dot.n1{left: 43%;top: 23%;}
.s4 .contBx .cont.n6 .dot.n2{left: 80%;top: 64%;}
.s4 .contBx .cont.n6 .dot.n3{left: 47%;top: 86%;}

.s4 .contBx .cont.n7 .dot.n1{left: 49%;top: 49%;}
.s4 .contBx .cont.n7 .dot.n2{left: 62%;top: 47%;}
.s4 .contBx .cont.n7 .dot.n3{left: 75%;top: 70%;}


._fixedPopup{
	position: fixed; z-index: 9999;
	width: 100%; height: 100%;
	opacity: 0; pointer-events: none;
	transition: opacity 0.5s;
}
._fixedPopup.on{opacity: 1; pointer-events: auto;}
._fixedPopup .inner{width: 100%; height: 100%;  background-color: rgba(0,0,0,0.7);}
._fixedPopup .inner .card_popup{
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 1;
}
._fixedPopup .inner .card_popup.on{z-index: 3;}
/* ._fixedPopup .card_popup .card{opacity: 1; pointer-events: auto;} */



@media screen and (max-width:1600px) {
	.s4 .top{background-color: transparent; max-width: 900px; margin: 0 auto;}
	.s4 .top .wrap{gap: 10px; justify-content: center; padding: 0;}
	.s4 .top .wrap div{padding: calc(10/24*1em) 1em; background-color: var(--lightGreen); border-radius: 100px; transition: background-color 0.5s; box-sizing: border-box;}
	.s4 .top .wrap div.on{color: #fff; background-color: var(--green);}
	.s4 .top .wrap div p::before{display: none;}
	.card_popup .card .whiteBx{min-height: 480px;}
	.card_popup .card .swiper-slide .imgBx{height: 200px;}
	.card_popup .card .swiper-slide .txtBx h3{font-size: 18px; }
	.card_popup .card .swiper-slide .txtBx .info{font-size: 14px;}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	.s4{padding-bottom: 80px;}
	.s4 .top{ margin-bottom: 40px;}
	.s4 .contBx{width: 95%; max-width: 1000px; margin: 0 auto;}
	/* 배경 삭제 스타일 */
	.s4 .contBx .inner{aspect-ratio: unset; flex-direction: column;}
	.s4 .contBx .cont{height: auto;}
	.s4 .contBx .cont .bgBx{display: none;}
	.card_popup{position: unset; flex-direction: column; gap: 60px; width: 100%;}
	.card_popup .card{
		position: unset; opacity: 1; pointer-events: auto; width: 100%; background-color: rgba(255,255,255,0.5);
		border-radius: 20px; padding: 40px 30px; box-sizing: border-box;
	}
	/* 스와이퍼 초기화 */
	.card_popup .card .whiteBx{width: 100%; min-height: unset; padding: 0; background-color: transparent;}
    .card_popup .card .whiteBx p {width: 100%; text-align: center; margin-bottom: calc(30/16*1em);}
	.card_popup .card .swiper{height: auto !important; width: 100%;}
	.swiper-autoheight .swiper-wrapper{flex-direction: column; height: auto !important; width: 100%; gap: 60px;}
	.card_popup .card .swiper-slide{
		margin-right: 0 !important; opacity: 1; width: 100%;
		display: flex; align-items: center; gap: 40px; position: relative;
	}
	.card_popup .card .swiper-slide:not(:first-child)::before{
		content:''; display: block; width: 95%; height: 1px; background-color: #eee;
		position: absolute; left: 2.5%; top: -30px;
	}
	.card_popup .card .swiper-slide .imgBx{
		margin-bottom: 0; width: 300px; min-height: 200px;
		background-color: #fff; box-sizing: border-box; padding: 20px; border-radius: 20px;
	}
	.card_popup .card .swiper-slide .imgBx img{width: 100%; height: 100%; object-fit: contain;}
	.card_popup .card .swiper-slide .txtBx{text-align: left;}
	.card_popup .card .swiper-slide .txtBx h3{padding: 0;}
	.card_popup .card .arrow{display: none;}
}
@media screen and (max-width:1024px) {
	.s4 .top .wrap div{font-size: 20px; }
}
@media screen and (max-width:820px) {
	.card_popup .card{padding: 30px 20px; border-radius: 10px;}
	.card_popup .card .swiper-slide{gap: 20px;}
	.card_popup .card .swiper-slide .imgBx{width: 250px; min-height: unset; border-radius: 10px; padding: 10px;}
}
@media screen and (max-width:500px) {
	.s4 .top{margin-bottom: 0;}
	.s4 .top .wrap{justify-content: flex-start; gap: 8px 4px;}
	.s4 .top .wrap div{font-size: 16px; width: calc(50% - 2px); font-size: 14px; padding: 10px 20px;}

	.card_popup .card .swiper-slide{flex-direction: column;}
	.card_popup .card .swiper-slide .imgBx{width: 100%;}
	.card_popup .card .swiper-slide .txtBx a{font-size: 14px; }
}
@media screen and (max-width:320px) {
	.s4 .top .wrap div{width: 100%;}
}



/* @media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.card_popup{right: unset;}
	.card_popup .card{right: unset; width: 95%; max-width: 320px;}
	.card_popup .card .whiteBx{min-height: 480px; width: 100%; margin: 0 auto; border-radius: 14px;}
	.card_popup .card .swiper-slide .imgBx{height: 200px;}
	.card_popup .card .swiper-slide .txtBx h3{font-size: 18px; }
	.card_popup .card .swiper-slide .txtBx .info{font-size: 14px;}

	.s4 .contBx .cont .dot{font-size: 0.6px; }

}
@media screen and (max-width:820px) {
	.s4 .scrollIco div{font-size: 16px; }
	.s4 .top .wrap div{font-size: 20px; }

	.s4 .contBx{overflow: auto; overflow-y: hidden;}
	.s4 .contBx .inner{min-width: 820px;}
	.s4 .contBx .cont h2{font-size: max(calc(0.7/1920*100vw),0.5px); left: 5vw;}

	.s4 .contBx .cont.n4 h2{top: unset;}
}
@media screen and (max-width:500px) {
	.s4 .scrollIco div{font-size: 14px; }
	.s4 .top .wrap div{font-size: 18px; }
	.s4 .contBx .cont h2{font-size: calc(0.6/500*100vw); left: 20px; max-width: 280px;}
	.s4 .contBx .cont .dot{font-size: 0.5px; }

	.s4 .contBx .cont .dot.last{right: 30px; bottom: 30px;}
}
@media screen and (max-width:320px) {} */