main {background-color: var(--beige); }

/* s1 */
.s1 {padding: 100px 0; }
@media (min-width:920px) {
	.s1{padding-bottom: 0;}
}
.s1 .wrap { }
.s1 .wrap h1 {font-size: 96px; margin-bottom: 20px;overflow: hidden; }
.s1 .wrap h1 p { }
.s1 .wrap .imgArea { position: relative; margin-bottom: 40px; }
.s1 .wrap .imgArea .imgBx {width: 100%; aspect-ratio: 1440/400; overflow: hidden; }
.s1 .wrap .imgArea .imgBx div {width: 100%; height: 100%; background-position: center center; background-size: cover; }
.s1 .wrap .imgArea .svg {position: absolute; width: 173px; overflow: hidden;right: 10px; bottom: 100%; transform: translateY(50%); }
.s1 .wrap .imgArea .svg svg * { fill: var(--green); }
.s1 .wrap .bottom {
	display: flex; align-items: flex-end; justify-content: space-between;
	flex-wrap: wrap; gap: 30px 60px;
}
.s1 .wrap .bottom .left {font-size: 32px; line-height: calc(45/32); }
.s1 .wrap .bottom .left span { }
.s1 .wrap .bottom .right {line-height: calc(28/16); font-family: 'Pretendard'; }

/* 모션 셋팅 */
.s1 .wrap h1 p { transform: translateY(110%); }
.s1 .wrap .imgArea .svg svg { transform: translateY(110%); }
.s1 .wrap .imgArea .imgBx div { transform: scale(1.3); filter: blur(10px); }
.s1 .wrap .bottom .left { transform: translateY(60px); opacity: 0; }
.s1 .wrap .bottom .right { transform: translateY(60px); opacity: 0; }

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s1{padding: 80px 0;}
	.s1 .wrap h1{font-size: max(calc(96/1024*100vw),40px); }
	.s1 .wrap .imgArea .svg{width: max(calc(173/1024*100vw),40px);}
}
@media screen and (max-width:820px) {
	.s1 .wrap .bottom .left{font-size: 24px; }
	.s1 .wrap .bottom .left span br{display: none;}
}
@media screen and (max-width:500px) {
	.s1{padding: 60px 0;}
	.s1 .wrap h1{margin-bottom: 10px;}
	.s1 .wrap .imgArea{margin-bottom: 20px;}
	.s1 .wrap .imgArea .imgBx{aspect-ratio: 16/9;}
	.s1 .wrap .imgArea .imgBx div{background-position: left center;}
	.s1 .wrap .bottom .left{font-size: 22px; }
	.s1 .wrap .bottom .right{font-size: 14px; }
	.s1 .wrap .bottom .right span br{display: none;}
}
@media screen and (max-width:320px) {}



/* s2 */
.s2{}
.s2 .pinBx{}
.s2 .wrap{height: var(--vh100); display: flex; align-items: center; justify-content: flex-start;}
.s2 .horizon{
	font-size: min(calc(1/920 * var(--vh100)),1px); display: flex; align-items: center; justify-content: flex-start; gap: 220em;
}
.s2 .box{display: flex; align-items: center; justify-content: flex-start;}
.s2 .box .imgBx{position: relative;}
.s2 .box .imgBx img{width: 100%;}
.s2 .box .imgBx p{
	font-size: max(25em,12px); position: absolute; bottom: 2px; right: 100%; margin-right: 14px;
	white-space: nowrap; font-family: 'Pretendard'; font-weight: 500;
}
.s2 .box .imgBx.n1{width: 442em; padding-top: 130em;}
.s2 .box .imgBx.n2{width: 285em;}
.s2 .box .txtBx{
	line-height: 1.2; padding-left: 40em; white-space: nowrap; transform: translateY(-20%);
}
.s2 .box .txtBx div{font-size: 90em; position: relative;}
.s2 .box .txtBx div.n1{transform: translateX(-1.6em);}
.s2 .box .txtBx div.n2{}
.s2 .box .txtBx div.n3{transform: translateX(0.2em);}
.s2 .box .txtBx .num{
	font-size: max(calc(30/90*1em),12px); position: absolute;
	bottom: 100%; transform: translateX(-80%);
}
.s2 .box .txtBx div p{}

/* 세로가 길경우 */
@media (orientation: Portrait){
	.s2 .horizon{font-size: min(calc(2/1920*100vw),calc(1/920*var(--vh100))); }
	.s2{margin-top: calc(var(--vh) * -26);}
	.s3{margin-top: calc(var(--vh) * -10);}
}







/* s3 */
.s3{
	background-color: var(--green);
	padding: 180px 0; box-sizing: border-box;
}
.s3 .wrap{
	display: flex; align-items: center; justify-content: center;
	font-size: 1px; position: relative;
}
.s3 .tab{
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 80em; position: relative; z-index: 2;
}
.s3 .tab > div > div{
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10em;
	opacity: 0.3; color: #fff; cursor: pointer;
}
.s3 .tab > div.on div{opacity: 1;}
.s3 .tab div small{
	font-size: max(20em,14px); font-family: 'Pretendard';
	opacity: 0; transform: translateY(20px);
	transition: opacity 0.5s,transform 0.5s;
}
.s3 .tab div.on small{opacity: 1; transform: translateY(0);}
.s3 .tab div p{font-size: 80em;}

.s3 .side{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: space-between;
}
.s3 .side > div{position: relative;}
.s3 .side .imgArea{position: relative; overflow: hidden;}
.s3 .side .imgArea .imgBx{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	opacity: 0; transform: scale(1.2); filter: blur(10px);
	transition: opacity 1s, transform 1s, filter 1s;
}
.s3 .side .imgArea .imgBx.on{opacity: 1; transform: scale(1); filter: blur(0px);}
.s3 .side .imgArea .imgBx div{width: 100%; height: 100%; background-size: cover;}
.s3 .side .txtArea{position: absolute;}
.s3 .side .txtArea .txt{position: absolute; white-space: nowrap; opacity: 0; transition: opacity 1s;}
.s3 .side .txtArea .txt.on{opacity: 1;}
.s3 .side .txtArea .txt p{}

.s3 .side .left{padding-left: 160em;}
.s3 .side .left .imgArea{
	width: 272em; aspect-ratio: 272/360;
}
.s3 .side .left .imgArea .imgBx{}
.s3 .side .left .imgArea .imgBx div{}
.s3 .side .left .txtArea{
	right: 0; bottom: 100%;
}
.s3 .side .left .txtArea .txt{
	font-size: max(25em,14px); line-height: calc(30/25); color: #fff;
	text-align: right; right: 0; bottom: 0; margin-bottom: 14px;
}
.s3 .side .left .txtArea .txt p{}
.s3 .side .right{}
.s3 .side .right .imgArea{
	width: 440em; aspect-ratio: 440/590;
}
.s3 .side .right .imgArea .imgBx{}
.s3 .side .right .imgArea .imgBx div{}
.s3 .side .right .txtArea{}
.s3 .side .right .txtArea .txt{
	font-family: 'Pretendard'; font-size: max(20em,14px); font-weight: 300; line-height: 1.4;
	color: var(--lightGreen); top: 100%; margin-top: 16px;
	left: 0; top: 0;
}
.s3 .side .right .txtArea .txt p{}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
	.s3 .wrap{font-size: calc(1/1440*100vw); }
	.s3 .side .left{padding-left: 110em;}
	.s3 .side .right .imgArea{width: 400em;}
	.s3 .side .txtArea{width: 100%;}
	.s3 .side .txtArea .txt{white-space: unset; width: 100%;}
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s3{padding: 120px 0;}
}
@media screen and (max-width:820px) {
	.s3{padding: 100px 0; padding-bottom: 140px;}
	.s3 .wrap{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 100px;}
	.s3 .tab{flex-direction: row; gap: 90em;}
	.s3 .tab div small{margin-bottom: 10px;}
	.s3 .side{position: unset; gap: 2.5vw;}
	.s3 .side > div{padding: 0 !important; width: 50%; position: unset;}
	.s3 .side .imgArea{width: 100% !important; aspect-ratio: 9/12 !important;}

	.s3 .side .txtArea{width: 95vw;}
	.s3 .side .left .txtArea{left: 0;}
	.s3 .side .right .txtArea{right: 0;}
}
@media screen and (max-width:500px) {
	.s3{padding: 80px 0; padding-bottom: 120px;}
	.s3 .wrap{font-size: calc(0.4/500*100vw); }
	.s3 .tab{gap: 50em;}
}
@media screen and (max-width:320px) {}