:root{--vh:1vh;}
body{}
#smooth-content{overflow: hidden;}
main{overflow: hidden;}
section{color: #fff; margin-bottom: 180px;}
@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	section{margin-bottom: 140px;}
}
@media screen and (max-width:500px) {}
@media screen and (max-width:320px) {}


header{transform: translateY(-100%);}


/* ================= s1 ================= */
.s1{
	width: 100%; height: calc(var(--vh,1vh)*100);
	display: flex; align-items: center; justify-content: center;
}
.s1 .videoBx{
	width: 100%; height: 100%; overflow: hidden; position: relative;
	display: flex; align-items: center; justify-content: center;
}
.s1 img{
	position: absolute;
	width: 100%; height: 100%; object-fit: cover;
}
.s1 .videoBx iframe {
	width: 100vw;
    height: 56.25vw;
    min-height: calc(var(--vh, 1vh) * 100);
    min-width: calc(var(--vh, 1vh) * 177.77);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none !important;
}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	.s1{height: auto; padding-top: var(--headerH); box-sizing: border-box;}
}
@media screen and (max-width:320px) {}

/* 세로가 더 길때 영상 크기 조절 */
@media (orientation: portrait) {
	header{transform: translateY(0%);}
	.s1 .videoBx{height: auto;}
	.s1 img{height: calc(100% - 2px); width: calc(100% - 2px);}
	.s1 .videoBx::before {
		content:''; display: block; padding-bottom: calc(9/16*100%);
	}
    .s1 .videoBx iframe{
		width: 100%; height: 100%; min-width: unset; min-height: unset;
	}
}



/* ================= s2 ================= */
.s2{
	position: relative;
}
.s2 .wrap{}
.s2 .wrap h3{
	font-size: 60px; letter-spacing: -0.02em;
	font-weight: 600; line-height: 1.4; text-align: center;
	margin-bottom: 1.2em;
}
.s2 .wrap h3 div{overflow: hidden;}
.s2 .wrap h3 div p{}
.s2 .wrap .cont{
	text-align: center;
}
.s2 .wrap .cont .con{
	display: inline-block; position: relative;
}
.s2 .wrap .cont .imgBx{}
.s2 .wrap .cont .imgBx::before {
	content:'';
	display: block;
	position: absolute;
	bottom: -12%;
	left: 21%;
	width: 76%;
	background-image: url(/asset/img/main/trophy_reflection.png);
	background-size: cover;
	aspect-ratio: 27/8;
	/* animation: floatingReverse forwards infinite 3.5s; */
}
@keyframes floatingReverse {
	0%{transform:translateY(0px); opacity: 1;}
	50%{transform:translateY(+30px); opacity: 0.5;}
	100%{transform:translateY(0px); opacity: 1;}
}

.s2 .wrap .cont .imgBx img{}

.s2 .wrap .cont .txtBx{
	font-size: 1px; text-align: left;
	position: absolute;
}
.s2 .wrap .cont .txtBx.n1{left: -20%;bottom: 21%;}
.s2 .wrap .cont .txtBx.n2{left: 32%;bottom: -18%;}
.s2 .wrap .cont .txtBx.n3{right: -30%;bottom: 30%;}

.s2 .wrap .cont .txtBx > div{display: flex; flex-direction: column; align-items: flex-start;}

.s2 .wrap .cont .txtBx em{
	font-size: 14em; color: var(--green); letter-spacing: -0.02em;
	padding-left: 1.6em; box-sizing: border-box; padding-bottom: 10px;
	display: none;
}
.s2 .wrap .cont .txtBx img{margin-left: 14em; margin-bottom: 10em; max-width: 100px; max-height: 24px;}
.s2 .wrap .cont .txtBx.n2 img{filter: brightness(0) invert(1);}
.s2 .wrap .cont .txtBx.n3 img{filter: brightness(0) invert(1);}
.s2 .wrap .cont .txtBx > div > div{
	background-color: #fff; border-radius: 50em;
	font-size: 16em;
	padding: calc(10/16*1em) calc(24/16*1em); line-height: 1.4; letter-spacing: -0.025em;
	display: inline-block; color: #000; font-weight: 400;
}
.s2 .wrap .cont .txtBx p{}

.s2 .objArea{
	position: absolute; left: 0; top: 0; z-index: -1;
	width: 100%; height: 100%;
}
.s2 .objArea > div{
	position: absolute;
}
.s2 .objArea img{filter: blur(7px);}

.s2 .objArea .n1{width: 13vw;left: 14%;top: 30%;}
.s2 .objArea .n2{width: 4vw;right: 27%;top: 30%;}
.s2 .objArea .n3{width: 8vw;right: 16%;top: 70%;}

.s2 .objArea .n1 img{transform: rotate(-16deg);}
.s2 .objArea .n2 img{transform: rotate(16deg);}
.s2 .objArea .n3 img{transform: rotate(16deg);}


@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
	.s2 .wrap h3{font-size: max(calc(60/1440*100vw),36px);}
}
@media screen and (max-width:1280px) {
	.s2 .wrap h3{margin-bottom: 2.5em;}

	.s2 .wrap .cont .txtBx.n1{left: -10%;}
	.s2 .wrap .cont .txtBx.n3{right: -20%;}
}
@media screen and (max-width:1024px) {
	.s2 .wrap .cont .con{width: 100%;}
	.s2 .wrap .cont .txtBx.n1{left: 0%; bottom: 40%;}
	.s2 .wrap .cont .txtBx.n3{right: 0%; bottom: 60%;}

	.s2 .objArea .n1{width: 20vw;left: 4%;top: 30%;}
	.s2 .objArea .n2{width: 8vw;right: 7%;top: 30%;}
	.s2 .objArea .n3{width: 12vw;right: 6%;top: 90%;}
}
@media screen and (max-width:820px) {
	.s2 .wrap .cont .txtArea{display: flex; gap: 20px; padding-top: 20px; display: none;}
	.s2 .wrap .cont .txtBx{position: unset; flex: 1; font-size: max(calc(1/820*100vw),0.7px);}
	.s2 .wrap .cont .txtBx em{padding-left: 14px; position: absolute; transform: translateY(-100%);}
	.s2 .wrap .cont .txtBx p{text-align: center;}
	.s2 .wrap .cont .txtBx p br{display: none;}
	.s2 .wrap .cont .txtBx > div{height: 100%;}
	.s2 .wrap .cont .txtBx > div > div{width: 100%; height: 100%; box-sizing: border-box;}

	.s2 .objArea .n1{width: 20vw;top: 0%;}
	.s2 .objArea .n2{width: 12vw;top: 10%;}
	.s2 .objArea .n3{display: none;}

	.s2 .objArea img{filter: blur(2px); opacity: 0.8;}
}
@media screen and (max-width:500px) {

    .s2 .wrap h3{font-size: calc(36/500*100vw);}

	.s2 .wrap .cont .imgBx img{animation: unset;}

	.s2 .wrap .cont .txtArea{flex-direction: column; animation: floating20 forwards infinite 3s;}
	.s2 .wrap .cont .txtBx{font-size: 0.8px;}
	.s2 .wrap .cont .txtBx p{text-align: left;}
	.s2 .wrap .cont .txtBx em{position: unset; transform: unset;}
	.s2 .wrap .cont .txtBx > div{animation: unset;}
	.s2 .wrap .cont .txtBx > div > div{padding: 14px;}
}
@media screen and (max-width:320px) {}










/* ================= s3 ================= */

.s3{position: relative;}
.s3 .wrap{
	position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; height: 100%;
}
.s3 .wrap h4{
	font-size: 44px;
	font-weight: 600; line-height: 1.4;
	position: absolute;
}
.s3 .wrap h4 div{overflow: hidden;}
.s3 .wrap h4.n1{left: 0; top: 8%;}
.s3 .wrap h4.n2{right: 0; bottom: 8%; text-align: right;}

.s3 .svgBx{position: relative;}
.s3 .svgBx::after {
	content:''; display: block; position: absolute; height: 5%; width: 100%;
	right: 0; top: 0;
	background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
	/* background: tan; */
	z-index: 1;
}
.s3 .svgBx svg{position: relative;}

.s3 .svgBx .txtBx{
	position: absolute; left: 0; top: 0;
	width: 100%; height: 100%;
	font-size: calc(1/1920*100vw);
	line-height: 1.3;
	white-space: nowrap;
	text-align: center;
}
.s3 .svgBx .txtBx > div{position: absolute;}
.s3 .svgBx .txtBx > div > div{transform: translateX(50%);}

.s3 .svgBx .txtBx div.n1 {right: 82%;bottom: 13%;}
.s3 .svgBx .txtBx div.n2 {right: 72.7%;bottom: 19%;}
.s3 .svgBx .txtBx div.n3 {right: 63.5%;bottom: 23%;}
.s3 .svgBx .txtBx div.n4 {right: 56%;bottom: 30%;}
.s3 .svgBx .txtBx div.n5 {right: 47%;bottom: 40%;}
.s3 .svgBx .txtBx div.n6 {right: 39%;bottom: 53%;}
.s3 .svgBx .txtBx div.n7 {right: 35.5%;bottom: 66.2%;}


.s3 .svgBx .txtBx > div > div > span{color: rgba(255,255,255,0.5); font-size: max(16em,12px);}
.s3 .svgBx .txtBx > div > div > small{color: #fff; font-size: max(16em,12px); font-weight: 500;}
.s3 .svgBx .txtBx > div > div > div{
	color: var(--green); font-weight: 600; line-height: 0.7;
	display: flex; align-items: center; justify-content: center;
}
.s3 .svgBx .txtBx > div > div > div .odometer{line-height: 1;}
.s3 .svgBx .txtBx > div.n2 > div > div{font-size: max(24em,18px); margin-top: 0.4em;}
.s3 .svgBx .txtBx > div.n7 > div > div{font-size: max(72em,40px); margin-top: 0.1em;}


/* 초록공 애니메이션 */
.s3 .greenBall circle:nth-child(1){transform-origin: 50% 50%; animation: scale120 forwards infinite 3s; transform-box: fill-box;}
.s3 .greenBall circle:nth-child(2){transform-origin: 50% 50%; animation: scale120 forwards infinite 3s 0.2s; transform-box: fill-box;}
.s3 .greenBall circle:nth-child(3){transform-origin: 50% 50%; animation: scale120 forwards infinite 3s 0.4s; transform-box: fill-box;}





@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
	.s3 .wrap h4{font-size: max(calc(44 / 1440 * 100vw), 28px);}
}
@media screen and (max-width:1280px) {
	.s3 .wrap h4.n1{top: 0;}
	.s3 .wrap h4.n2{bottom: 0;}

	.s3 .svgBx{width: 120%;transform: translateX(-10%);}





	.s3 .svgBx .txtBx > div > span{font-size: max(calc(14/1280*100vw),10px);}
	.s3 .svgBx .txtBx > div > small{font-size: max(calc(14/1280*100vw),10px);}

}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {

	.s3 .svgBx{
		width: 100%; max-width: 500px; transform: translateX(0); margin: 0 auto; position: relative;
		box-sizing: border-box;
	}
	.s3 .svgBx::after{top: 16%;}
	.s3 .svgBx::before {content:'';display: block;padding-bottom: 150%;}
	.s3 .svgBx svg{position: absolute;bottom: -10%;left: 0;width: 100%;}

	.s3 .svgBx .txtBx div.n1 {right: 91%;bottom: 19%;}
	.s3 .svgBx .txtBx div.n2 {right: 74.5%;bottom: 27%;}
	.s3 .svgBx .txtBx div.n3 {right: 59%;bottom: 34%;}
	.s3 .svgBx .txtBx div.n4 {right: 46%;bottom: 41%;}
	.s3 .svgBx .txtBx div.n5 {right: 36%;bottom: 50%;}
	.s3 .svgBx .txtBx div.n6 {right: 26%;bottom: 59%;}
	.s3 .svgBx .txtBx div.n7 {right: 24.5%;bottom: 71.4%;}


	.s3 .svgBx .txtBx > div > div > span{font-size: 14px;}
	.s3 .svgBx .txtBx > div > div > small{font-size: 14px;}
	.s3 .svgBx .txtBx > div.n2 > div > div{font-size: 20px;}
	.s3 .svgBx .txtBx > div.n7 > div > div{font-size: 36px;}

}
@media screen and (max-width:500px) {
	.s3 .wrap h4{ font-size: calc(36 / 500 * 100vw);}

	.s3 .svgBx .txtBx div.n1 {right: 91%;bottom: 19%;}
	.s3 .svgBx .txtBx div.n2 {right: 74.5%;bottom: 27%;}
	.s3 .svgBx .txtBx div.n3 {right: 59%;bottom: 34%;}
	.s3 .svgBx .txtBx div.n4 {right: 46%;bottom: 41%;}
	.s3 .svgBx .txtBx div.n5 {right: 36%;bottom: 50%;}
	.s3 .svgBx .txtBx div.n6 {right: 26%;bottom: 59%;}
	.s3 .svgBx .txtBx div.n7 {right: 24.5%;bottom: 71.4%;}


	.s3 .svgBx .txtBx > div > div > span{font-size: max(calc(13/500*100vw),10px);}
	.s3 .svgBx .txtBx > div > div > small{font-size: max(calc(13/500*100vw),10px);}
	.s3 .svgBx .txtBx > div.n2 > div > div{font-size: max(calc(20/500*100vw),12px);}
	.s3 .svgBx .txtBx > div.n7 > div > div{font-size: max(calc(36/500*100vw),16px);}

}
@media screen and (max-width:320px) {
	.s3 .svgBx .txtBx > div > div > span{font-size: 8px;}
	.s3 .svgBx .txtBx > div > div > small{font-size: 8px;}
}





/* ================= s4 ================= */


.s4 .odometer * {
    transition: transform 1s !important;
}


.s4{text-align: center;}
.s4 .cont{
	width: 100%; height: calc(var(--vh,1vh)*100); font-size: 1px;
	position: relative;
	display: flex; align-items: center; justify-content: center;
}
.s4 .cont.mo{display: none;}

.s4 .cont.pc h3{
	width: 450em; width: 420em; height: 100%; display: inline-flex; align-items: center; justify-content: center;
	position: absolute;
}
.s4 .side{
	font-size: 60px; font-size: 44px; font-weight: 600;
	line-height: 1.4; letter-spacing: -0.02em;
	position: absolute; white-space: nowrap;
}
.s4 .side div{overflow: hidden;}
.s4 .side p{}
.s4 .side.left{
	text-align: right; right: 100%; padding-right: calc(80/72*1em);
}
.s4 .side.right{
	text-align: left; left: 100%; padding-left: calc(80/72*1em);
}


.s4 .pinBx{
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
}
.s4 .cardArea{
	width: 450em; width: 420em; position: relative;
	display: flex; align-items: center; justify-content: center;
}
.s4 .cardArea::before {
	content:''; display: block;  width: 100%;
	/* padding-bottom: calc(660/450*100%); */
	/* padding-bottom: calc(1920/1080*100%); */
	/* padding-bottom: calc(1600/1080*100%); */
	padding-bottom: calc(683/384*100%);
}
.s4 .cardArea > div{
	position: absolute; width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
}
.s4 .card{
	position: absolute;
	width: 100%; height: 100%;
	perspective: 800em;
	/* border: 1px solid tomato; */
}
.s4 .card.n1{z-index: 4;}
.s4 .card.n2{z-index: 3;}
.s4 .card.n3{z-index: 2;}
.s4 .card.n4{z-index: 1;}

.s4 .card div{width: 100%; height: 100%; perspective: 1000em;}
.s4 .card .imgBx{position: relative;}
.s4 .card .imgBx div{
	position: absolute; left: 0; top: 0;
	width: 100%; height: 100%; border-radius: 20em; background-size: cover;
	opacity: 0;
	transition: opacity 0.8s;
}
.s4 .card .imgBx div.on{opacity: 1;}
.s4  ._tilt{transition: transform 0.1s,pointer-events 0s 0.8s; pointer-events: none;}
.s4.motion3 ._tilt{pointer-events: auto;}



/* 영상 들어가는 카드 */
.s4 .cardArea .back{position: relative; backface-visibility: hidden;}
.s4 .cardArea .videoBx{
	position: absolute; left: 0; top: 0;
	width: 100%; height: 100%; background-color: #fff;
	transform: rotateY(180deg); border-radius: 20em; overflow: hidden;
	backface-visibility: hidden;
	background-color: #000;
}
.s4 .cardArea .videoBx > * {
	opacity: 0;
	transition: opacity 0.5s;


	width: 100%; height: 100%; height: 125%;
	position: absolute;
	left: 50%; top: 50%; transform: translate(-50%,-50%);

	/* width: 100vw;
	height: calc(100vw * (450 / 660));
	min-height: calc(var(--vh, 1vh) * 100);
	min-width: calc(var(--vh, 1vh) * 100 * (660 / 450));
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none !important; */
}

.s4 .cardArea .videoBx > *.on{opacity: 1;}

.s4 .cont .txtBx{
	display: flex; align-items: center; justify-content: flex-start;
	position: absolute; transform: translate(120em, 40px); opacity: 0;
	white-space: nowrap;  text-align: left;
	transition: opacity 0.8s, transform 0.8s;
}
.s4 .cont .txtBx.on{opacity: 1; transform:translate(120em, 0); transition-delay: 0.8s;}
.s4 .cont .txt{position: absolute; opacity: 0; transition: opacity 0.5s; pointer-events: none;}
.s4 .cont .txt.on{opacity: 1; pointer-events: auto;}
.s4 .cont .txt > p{
	font-size: max(18em,14px); line-height: 1.666; margin-top: calc(44/18*1em); margin-bottom: calc(50/18*1em);
	font-weight: 300;
}
.s4 .cont .txt > p span{display: inline-block;}

.s4 .cont .txt .bottom{}
.s4 .cont .txt .bottom .row{}
.s4 .cont .txt .bottom .row:not(:first-child){margin-top: 40em;}
.s4 .cont .txt .bottom .row h4{font-size: max(16em,12px); font-weight: 500; margin-bottom: 1em;}
.s4 .cont .txt .bottom .row .flexBx{
	display: flex; align-items: flex-start; gap: 30em;
}
.s4 .cont .txt .bottom .row .flexBx > div{}
.s4 .cont .txt .bottom .row .flexBx > div.minWidth{min-width: 240em;}
.s4 .cont .txt .bottom .row .flexBx > div small{font-size: max(16em,10px); color: #7c7c7c; margin-bottom: 1em;}
.s4 .cont .txt .bottom .row .flexBx > div > div{
	font-size: max(26em,14px); color: var(--green); font-weight: 500;
	display: flex; align-items: center;
}
.s4 .cont .txt .bottom .row .flexBx > div > div *{line-height: 1; vertical-align: top;}

.s4 .cont .txt .bottom .row .flexBx > div > div.color{
	position: relative; color: #fff;
}
.s4 .cont .txt .bottom .row .flexBx > div > div.color p{
	position: absolute; left: 0; top: 0; overflow: hidden;
	color: var(--green); width: 0%; transition: width 1s 0.8s;
}
.s4 .cont .txt.on .bottom .row .flexBx > div > div.color p{width: 100%;}

.s4 .cont .txt .bottom .row .flexBx > div > div.big{font-size: max(40em,14px);}



/* 미샤 이미지 */
.s4 .cont .txt .bottom .row .flexBx > div .img{position: relative; margin-top: 20px;}
.s4 .cont .txt .bottom .row .flexBx > div .img .no1{position: absolute; z-index: 2; left: 0; top: 0; transform: scale(0.5); opacity: 0; transition: transform 0.5s,opacity 0.5s;}
.s4 .cont .txt .bottom .row .flexBx > div .img .chart{opacity: 0; transform: translateY(40px); transition: transform 0.8s,opacity 0.8s;}

.s4 .cont .txt.on .bottom .row .flexBx > div .img .no1{transform: scale(1); opacity: 1; transition-delay: 0.8s;}
.s4 .cont .txt.on .bottom .row .flexBx > div .img .chart{transform: translateY(0); opacity: 1; transition-delay: 0.3s;}



/* 모션 셋팅 */
.s4 .card > div{transition: transform 0.8s;}
.s4 .card.n2 > div{transform: translateZ(-120em) translateY(-10%);}
.s4 .card.n3 > div{transform: translateZ(-240em) translateY(-20%);}
.s4 .card.n4 > div{transform: translateZ(-360em) translateY(-29%);}

.s4.motion1 .card > div{transition: transform 0.5s;}
.s4.motion1 .card.n2 > div{transform: translateZ(-120em) translateY(0);}
.s4.motion1 .card.n3 > div{transform: translateZ(-240em) translateY(0);}
.s4.motion1 .card.n4 > div{transform: translateZ(-360em) translateY(0);}

.s4.motion2 .card > div{transition: transform 0.5s;}
.s4.motion2 .card.n1 > div {transform: rotateY(-25deg) translateX(-40%);}
.s4.motion2 .card.n2 > div {transform: rotateY(-25deg) translateX(-20%) translateZ(-40em);}
.s4.motion2 .card.n3 > div {transform: rotateY(-25deg) translateX(0%) translateZ(-120em);}
.s4.motion2 .card.n4 > div {transform: rotateY(-25deg) translateX(20%) translateZ(-200em);}


.s4 .cardArea{transition: transform 1s; transform: translateX(0em);}
.s4.motion3 .cardArea{transform: translateX(-180em);}
.s4.motion3 .card > div{transition: transform 0.8s;}
.s4.motion3 .card.n1 > div {transform: rotateY(-25deg) translateX(-190%) scale(0.55);}
.s4.motion3 .card.n2 > div {transform: rotateY(-25deg) translateX(-170%) scale(0.55) translateZ(-40em);}
.s4.motion3 .card.n3 > div {transform: rotateY(-25deg) translateX(-165%) scale(0.55) translateZ(-120em);}
.s4.motion3 .card.n4 > div {transform: rotateY(0deg) translateX(0%) translateZ(0em);}

/* 영상도 뒤집히게 */
.s4 .cardArea .back{transition: transform 0.8s; transform-style: preserve-3d;}
.s4.motion3 .back{transform: rotateY(180deg); transition-delay: 0.6s;}

/* 오브젝트 */
.s4 .objArea{
	position: absolute; left: 0; top: 0;
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center; z-index: -1;
	transform: scale(0.2); transition: transform 1s;
}
.s4.motion2 .objArea{transform: scale(1);}
.s4 .objArea img{opacity: 0; transition: opacity 0.8s;}
.s4.motion2 .objArea img{opacity: 1;}
.s4 .objArea .n1{position: absolute;right: 40em;top: 110em;}
.s4 .objArea .n2{position: absolute;left: -70em;bottom: -60em;}
.s4 .objArea .n1 img{width: 200em;}
.s4 .objArea .n2 img{width: 340em;}




/* 모바일에선 슬라이드로 */
.s4 .cont.mo{}
.s4 .cont.mo .swiperBx{
	box-sizing: border-box;
	width: 100%;
}

.s4 .cont.mo h3{
	font-size: max(calc(44 / 1440 * 100vw), 28px);
	font-weight: 600;
	line-height: 1.4; letter-spacing: -0.02em;
	margin-bottom: 1em;
}
.s4 .cont.mo h3 > div{}
.s4 .cont.mo h3 > div > div{overflow: hidden;}
.s4 .cont.mo h3 small{
	font-size: 18px; margin-top: 1em;
	font-weight: 500; color: #777;
	overflow: hidden;
}
.s4 .cont.mo h3 small span{display: block;}


.s4 .cont.mo .swiper{
	width: 400px; overflow: visible;

}
.s4 .cont.mo .swiper-slide{}
.s4 .cont.mo .swiper-slide .mobileVideoBx{
	pointer-events: none; width: 100%; position: relative;
	margin-bottom: 30px;
	border-radius: 20px; overflow: hidden;
}
.s4 .cont.mo .swiper-slide .mobileVideoBx::before {
	content:''; display: block; width: 100%; padding-bottom: calc(1920/1080*100%);
}
.s4 .cont.mo .swiper-slide .mobileVideoBx > *{
	position: absolute; left: 0; top: 0;
	width: 100%; height: 100%; object-fit: cover;
}

.s4 .cont.mo .swiper-slide .bottom{display: none;}



@media screen and (max-width:1800px) {
	.s4 .cont{font-size: calc(1/1800*100vw);}
}
@media screen and (max-width:1600px) {

	.s4 .cont .txt .logo{height: 44em; width: 160em;}
	.s4 .cont .txt .logo img{height: 100%; object-fit: contain;}
	.s4 .cont .txt > p{margin-top: 20px;}
}
@media screen and (max-width:1440px) {
	.s4 .side{font-size: max(calc(44/1440*100vw),28px);}
}
@media screen and (max-width:1280px) {
    .s4 .cont .txtBx{white-space: unset; width: 40vw; transform: translate(460em,40px);}
    .s4 .cont .txtBx.on{transform: translate(460em,0);}
    .s4 .cont .txt > p br{display: none;}
}
@media screen and (max-width:1024px) {
    .s4 .cont.pc{display: none;}
	.s4 .cont.mo{display: block; height: auto; font-size: 1px;}

	.s4 .cont .txt{position: unset; opacity: 1; font-size: 0.5px;}
	.s4 .cont .txt .logo{margin: 0 auto; width: 140px; height: 40px;}
	.s4 .cont .txt > p{font-size: 18px;}
	.s4 .cont .txt > p br{display: block;}

	.s4 .cont .txt .bottom .row .flexBx{justify-content: center; flex-wrap: wrap;}
	.s4 .cont .txt .bottom .row .flexBx > div.minWidth{min-width: unset;}
	.s4 .cont .txt .bottom .row .flexBx > div > div{justify-self: center;}
}
@media screen and (max-width:820px) {
	.s4 .cont.mo{font-size: max(calc(1/820*100vw),0.7px);}
	.s4 .cont.mo .swiper{width: max(calc(380/820*100vw),300px);}
	/* .s4 .cont.mo .swiper-slide{opacity: 0; transition: opacity 0.5s;}
	.s4 .cont.mo .swiper-slide-active{opacity: 1;} */

	.s4 .cont .txt > p{font-size: 16px;}
	.s4 .cont .txt > p br{display: none;}
	.s4 .cont .txt .bottom {display: none;}
	.s4 .cont .txt > p{margin-bottom: 0;}
}
@media screen and (max-width:500px) {

    .s4 .cont.mo h3{font-size: calc(36 / 500 * 100vw);}
    .s4 .cont.mo h3 small{font-size: 16px;}
	.s4 .cont.mo .swiper{width: 65%; max-width: 500px;}
	.s4 .cont.mo .swiper-slide .mobileVideoBx{border-radius: 10px; margin-bottom: 20px;}
	.s4 .cont .txt > p{font-size: 13px; margin-top: 12px;}

	.s4 .cont .txt .logo{width: 80px; height: 20px;}
}
@media screen and (max-width:320px) {}



/* ================= s5 ================= */

.s5{}
.s5 .wrap{max-width: 1150px !important;}
.s5 .wrap h4{
	font-weight: 600;
	font-size: 44px; letter-spacing: -0.025em; text-align: center; line-height: 1.4; margin-bottom: 40px;
}
.s5 .wrap h4 div{overflow: hidden;}
.s5 .wrap h4 p{}
.s5 .wrap .cardArea{
	display: flex; gap: 30px;
	margin: 0 auto;
}
.s5 .wrap .cardArea .card{
	border: 1px solid #fff; box-sizing: border-box;
	flex: 1; text-align: center; padding: 75px 10px; border-radius: 60px;
	position: relative; overflow: hidden;
}
.s5 .wrap .cardArea .card::before {
	content:''; display: block; position: absolute;
	width: 100%; height: 100%; background-color: #fff;
	left: 0; bottom: 0; transform-origin: center bottom; transform: scaleY(0);
}
.s5 .wrap .cardArea .card h5{
	position: relative;
	font-size: 36px; font-weight: 600; letter-spacing: -0.025em; text-transform: uppercase;
}
.s5 .wrap .cardArea .card > p{
	position: relative;
	color: #7c7c7c; font-size: 18px; letter-spacing: -0.025em;
	line-height: 1.666;
	display: flex; align-items: center; justify-content: center;
	min-height: 4.998em;
	margin-top: calc(28/18*1em); margin-bottom: calc(30/18*1em);
}
.s5 .wrap .cardArea .card .btn{
	position: relative;
	width: calc(145/16*1em); height: calc(52/16*1em); border-radius: 100px;
	border: 1px solid var(--green); box-sizing: border-box; color: var(--green);
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto;
}
.s5 .wrap .cardArea .card .btn p{}

/* 호버 */
html.pc .s5 .wrap .cardArea .card:hover{transition: color 0.4s;}
html.pc .s5 .wrap .cardArea .card::before{transition: transform 0.8s;}
html.pc .s5 .wrap .cardArea .card > p{transition: color 0.4s;}
html.pc .s5 .wrap .cardArea .card .btn{transition: background-color 0.4s,color 0.4s;}

html.pc .s5 .wrap .cardArea .card:hover{color: #000;}
html.pc .s5 .wrap .cardArea .card:hover::before{transform: scaleY(1);}
html.pc .s5 .wrap .cardArea .card:hover > p{color: #333;}
html.pc .s5 .wrap .cardArea .card:hover .btn{background-color: var(--green); color: #fff;}


.s5 .wrap .cardArea .objArea{
	width: 185px;
	position: absolute;
	left: -92px;
	bottom: -73px;
}
.s5 .wrap .cardArea .objArea div{}
.s5 .wrap .cardArea .objArea div img{}



@media screen and (max-width:1600px) {
	.s5 .wrap .cardArea .objArea{left: 0; bottom: -100px; width: 160px;}
}
@media screen and (max-width:1440px) {
    .s5 .wrap h4{font-size: max(calc(44/1440*100vw),28px);}
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s5 .wrap .cardArea{gap: 20px;}
	.s5 .wrap .cardArea .card{border-radius: 30px;}
}
@media screen and (max-width:820px) {
	.s5 .wrap .cardArea{gap: 30px; flex-direction: column;}
	.s5 .wrap .cardArea .card{padding: 30px;}
	.s5 .wrap .cardArea .card > p{min-height: unset;}
}
@media screen and (max-width:500px) {
    .s5 .wrap h4{font-size: calc(36/500*100vw);}

	.s5 .wrap .cardArea{gap: 20px;}
	.s5 .wrap .cardArea .card{border-radius: 14px;}
	.s5 .wrap .cardArea .card h5{font-size: 26px; margin-bottom: 20px;}
	.s5 .wrap .cardArea .card > p{font-size: 14px;}
	.s5 .wrap .cardArea .card .btn{font-size: 14px;}

	.s5 .wrap .cardArea .objArea{width: max(calc(110/500*100vw),80px); bottom: -40px; left: -25px;}
}
@media screen and (max-width:320px) {}








/* ================= s6 ================= */
.s6{margin-bottom: 160px;}
.s6 .wrap{}
.s6 .wrap h3{
	font-size: 60px; color: #fff; font-weight: 600; letter-spacing: -0.02em;
    font-family: 'Poppins';
	text-align: center; margin-bottom: max(calc(80/72*1em),40px); overflow: hidden;
	color: var(--green);
}
.s6 .list{}
.s6 .list ul{
	display: flex; justify-content: center; width: 100%; flex-wrap: wrap;
	gap: 40px 0;
}
.s6 .list ul li{
	box-sizing: border-box; padding: 0 10px;
	width: calc(100% / 10); display: flex; align-items: center; justify-content: center;
	filter: grayscale(1);
}
.s6 .list ul li:nth-child(3),
.s6 .list ul li:nth-child(5),
.s6 .list ul li:nth-child(7),
.s6 .list ul li:nth-child(21),
.s6 .list ul li:nth-child(27),
.s6 .list ul li:nth-child(28),
.s6 .list ul li:nth-child(29),
.s6 .list ul li:nth-child(36),
.s6 .list ul li:nth-child(38),
.s6 .list ul li:nth-child(40),
.s6 .list ul li:nth-child(53),
.s6 .list ul li:nth-child(54),
.s6 .list ul li:nth-child(62),
.s6 .list ul li:nth-child(71),
.s6 .list ul li:nth-child(72),
.s6 .list ul li:nth-child(75),
.s6 .list ul li:nth-child(80){filter: grayscale(1) brightness(0.5);}

html.mo .s6 .list ul li{filter: unset;}
html.pc .s6 .list ul li:hover{filter: grayscale(0) brightness(1);}
.s6 .list ul li img{max-height: 30px; max-width: min(100px,100%);}
.s6 .list ul li.big img{max-height: 40px;}


@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
    .s6 .wrap h3{font-size: max(calc(60/1440*100vw),44px);}
	.s6 .list ul li{width: calc(100% / 8);}
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	.s6{display: none;}
}
@media screen and (max-width:500px) {
	.s6 .wrap h3{font-size: calc(44/500*100vw);}
}
@media screen and (max-width:320px) {}



/* ================= s7 ================= */
.s7{margin-bottom: 0;}
.s7 .wrap{}
.s7 h3{
	text-align: center; overflow: hidden;
	font-size: 60px; font-weight: 600; letter-spacing: -0.02em; font-family: 'Roboto';
	margin-bottom: -40px;
	position: relative; z-index: 2;
}
.s7 h3 p{}
.s7 .cont{position: relative; font-size: 1px; max-width: 1260px; margin: 0 auto;}
.s7 .cont .swiperBx{overflow: hidden;}
.s7 .cont .swiper{width: 400em; overflow: visible;}
.s7 .cont .swiper-slide{}
.s7 .cont .swiper-slide .imgBx{
	border-radius: 60em; overflow: hidden; position: relative;
	transition: transform 0.5s;
	transform: translateY(160em);
}
html.pc .s7 .cont .swiper-slide a:hover .imgBx{transform: translateY(100em);}
html.mo .s7 .cont .swiper-slide-active a .imgBx{transform: translateY(100em);}

.s7 .cont .swiper-slide .imgBx::before {
	content:''; display: block;
	padding-bottom: calc(360/400*100%);
	padding-bottom: calc(490/400*100%);
}
.s7 .cont .swiper-slide .imgBx img{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	object-fit: cover;
}
.s7 .cont .swiper-slide .txtBx{
	min-height: 360em;
	border-radius: 60em; overflow: hidden;
	background-color: #fff; color: #000;
	padding: 40em 34em; padding-bottom: 20em; box-sizing: border-box;
	transition: transform 0.5s;
	transform: translateY(-160em);
}
html.pc .s7 .cont .swiper-slide a:hover .txtBx{transform: translateY(-100em);}
html.mo .s7 .cont .swiper-slide-active a .txtBx{transform: translateY(-100em);}
.s7 .cont .swiper-slide .txtBx .tag{
	font-size: max(15em,11px);
	font-family: 'Roboto';
	padding: calc(10/15*1em) calc(13/15*1em);
	border: 1px solid #cccccc;
	box-sizing: border-box;
	transition: background-color 0.5s, color 0.5s,border-color 0.5s;
	display: inline-block;
	border-radius: 100px;
	margin-bottom: calc(26/15*1em);
}
html.pc .s7 .cont .swiper-slide a:hover .txtBx .tag{
	background-color: var(--green); color: #fff;
	border-color: transparent;
}
.s7 .cont .swiper-slide .txtBx h4{
	font-size: max(22em,14px); font-weight: 600; line-height: 1.40625;
	margin-bottom: max(1em,20px);

	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;

}
.s7 .cont .swiper-slide .txtBx > p{
	font-size: max(16em,13px);
	line-height: 1.5;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: #555;
}
.s7 .cont .swiper_arrow{
	position: absolute; top: 50%; z-index: 3;
	font-size: 16px;
	width: calc(54/16*1em); height: calc(54/16*1em); border-radius: 50%;
	border: 1px solid #fff; box-sizing: border-box;
	display: flex; align-items: center; justify-content: center; color: #fff;
	cursor: pointer;
	transition: background-color 0.5s,color 0.5s;
}
html.pc .s7 .cont .swiper_arrow:hover{
	background-color: #fff; color: #000;
}
.s7 .cont .swiper_arrow i{}
.s7 .cont .swiper_arrow.left{left: 0; transform: translate(-74px,-50%); padding-right: 0.2em;}
.s7 .cont .swiper_arrow.right{right: 0; transform: translate(74px,-50%); padding-left: 0.2em;}

.s7 .objArea{
	box-sizing: border-box;
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	font-size: 1px; z-index: -1;
}
.s7 .objArea .n1{position: absolute;z-index: 2;right: -250em;top: 250em;}
.s7 .objArea .n2{position: absolute;z-index: 0;left: -200em;bottom: 0em;}

.s7 .objArea .n1 div{transform: rotateY('90deg');}

.s7 .objArea .n1 img{width: max(240em,120px); transform: rotateY(-180deg);}
.s7 .objArea .n2 img{width: max(320em,130px);transform: rotate(-17deg);}

@media screen and (max-width:1600px) {
	.s7 .cont{font-size: calc(1/1600*100vw);}
	.s7 .cont .swiper{width: 100%;}

	.s7 .objArea{font-size: calc(1/1600*100vw);}
	.s7 .objArea .n1{right: -70em;top: 0em;}
	.s7 .objArea .n2{left: -90em;bottom: 50em;}
}
@media screen and (max-width:1440px) {
	.s7 .wrap h3{font-size: max(calc(60/1440*100vw),44px);}
	.s7 .cont{width: calc(95% - 108px);}
}
@media screen and (max-width:1280px) {
	.s7{margin-bottom: 100px;}
	.s7 h3{margin-bottom: 10px;}
	.s7 .cont .swiper-slide .imgBx{transform: translateY(120em) !important; border-radius: 20px;}
	.s7 .cont .swiper-slide .txtBx{transform: translateY(-120em) !important; border-radius: 20px; min-height: unset;}
	.s7 .cont .swiper-slide-active .imgBx{transform: translateY(60em) !important;}
	.s7 .cont .swiper-slide-active .txtBx{transform: translateY(-60em) !important;}
	.s7 .cont .swiper-slide .txtBx h4{-webkit-line-clamp: 2;}
	.s7 .cont .swiper-slide .txtBx > p{-webkit-line-clamp: 2;}
}
@media screen and (max-width:1024px) {
	.s7{margin-bottom: 80px;}
	.s7 .cont .swiperBx{overflow: visible;}
	.s7 .cont .swiper{overflow: visible;}
	.s7 .cont .swiper-slide .txtBx{padding: 20px 14px;}
	.s7 .cont .swiper-slide .txtBx .tag{margin-bottom: 10px;}
	.s7 .cont .swiper-slide .txtBx h4{margin-bottom: 10px;}

	.s7 .cont .swiper_arrow{
		background-color: #fff; color: #000;
		box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
	}

	.s7 .objArea{font-size: calc(0.7/1600*100vw); filter: blur(2px) brightness(0.5);}
	.s7 .objArea .n1{right: -40em;top: 0em;}
	.s7 .objArea .n2{left: -70em;bottom: 80%;}
}
@media screen and (max-width:820px) {
	.s7 .cont{width: 100%;}
	.s7 .cont .swiper{max-width: 300px;}
	.s7 .cont .swiper_arrow.left{left: 0; transform: translateY(-50%);}
	.s7 .cont .swiper_arrow.right{right: 0; transform: translateY(-50%);}
}
@media screen and (max-width:500px) {
	.s7{margin-bottom: 30px;}
	.s7 .wrap h3{font-size: calc(44/500*100vw); margin-bottom: 0;}
	.s7 .cont{margin-top: -80em;}
	.s7 .cont .swiper{width: 80%;}

	.s7 .cont .swiper-slide .imgBx{transform: translateY(200em) !important;}
	.s7 .cont .swiper-slide .txtBx{transform: translateY(-200em) !important;}
	.s7 .cont .swiper-slide-active .imgBx{}
	.s7 .cont .swiper-slide-active .txtBx{}

	.s7 .cont .swiper_arrow{
		font-size: 12px;
	}

	.s7 .objArea .n1 img{width: 80px;}
	.s7 .objArea .n2{display: none;}
}
@media screen and (max-width:320px) {}






/* ================= s8 ================= */
.s8{}
.s8 .wrap{}
.s8 .wrap .table{
	border-top: 2px solid #fff; border-bottom: 2px solid #fff; box-sizing: border-box;
	font-size: 1px;margin-bottom: 30px;
}
.s8 .wrap .table .tr{
	height: 80px; padding: 0 40em; box-sizing: border-box;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	display: flex; align-items: center; justify-content: space-between;
}
.s8 .wrap .table .tr:last-child{border-bottom: 0;}
.s8 .wrap .table .td{}
.s8 .wrap .table .td.title{
	font-size: max(20em,14px); letter-spacing: -0.025em; overflow: hidden; text-overflow: ellipsis;
	transition: color 0.3s; width: 100%; white-space: nowrap; padding-right: calc(30/20*1em); box-sizing: border-box;
}
html.pc .s8 .wrap .table .tr:hover .title{color: var(--green);}
.s8 .wrap .table .td.day{
	font-size: max(16em,12px);
	color: rgba(255,255,255,0.5); letter-spacing: -0.025em;
	white-space: nowrap;
}


@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s8 .wrap .table{font-size: 0.8px;}
}
@media screen and (max-width:820px) {
	.s8 .wrap .table{font-size: 0.7px;}
}
@media screen and (max-width:500px) {
	.s8 .wrap .table{font-size: 0.6px;}
	.s8 .wrap .table .tr{padding: 0 10px; height: 70px;}
}
@media screen and (max-width:320px) {}


/* paging */

._paging{font-size: 15px; text-align: center;}
._paging > div{
	display: inline-flex; justify-content: center; position: relative;
}
._paging > div .prev,
._paging > div .next{
	display: flex; justify-content: center;
	position: absolute; top: 0; bottom: 0;
}
._paging > div .prev{right: 100%;}
._paging > div .next{left: 100%;}
._paging .arrowDouble{color: #7c7c7c; display: flex; align-items: center; justify-content: center; padding: 0 0.2em;}
html.pc ._paging .arrowDouble:hover{color: #fff;}
._paging .arrowDouble.first{}
._paging .arrowDouble i:nth-child(1){margin-right: -0.7em;}
._paging .arrowDouble.end{}
._paging .arrow{color: #7c7c7c; display: flex; align-items: center; justify-content: center; padding: 0 0.2em;}
html.pc ._paging .arrow:hover{color: #fff;}
._paging .arrow.prev{}
._paging .arrow.next{}
._paging ul{
	display: flex; align-items: center; justify-content: center;
	margin: 0 10px; gap: 2px;
}
._paging ul li{}
._paging ul li a{
	width: 26px; height: 26px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
}
._paging ul li.on a{background-color: var(--green);}