:root{
	--vh:1vh;
	--vh100:calc(var(--vh,1vh) * 100);
}
html{overflow: hidden;}

#smooth-content{ will-change: transform; transform-style: preserve-3d;}
html.mo #smooth-content{ transform-style: unset; will-change: unset;}
section{overflow: hidden;}


/* ------------------------- 인트로 ------------------------- */
.intro{
	position: fixed; z-index: 9999999; width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	background-color: #d9d2cd;
}
.intro .center{
	position: relative; z-index: 5;
	width: 40%; height: 40%;
	overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; transform: translateY(80px);
	transition: width 1s,height 1s;
}
.intro .center.on{
	width: 90%; height: 90%;
}
.intro .center img{
	width: 100%; height: 100%; object-fit: cover;
	transform: scale(2); transition: transform 1s;
}
.intro .center.on img{
	transform: scale(1);
}
.intro .other{
	width: 100%; height: 100%;
	position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center;
	filter: grayscale(1);
}
.intro .other .imgBx{position: absolute; top: 100%;}
.intro .other .imgBx img{width: 100%; object-fit: cover;}

.intro .other .imgBx:nth-child(3n+1){width: calc(300/1920*100vw);}
.intro .other .imgBx:nth-child(3n+2){width: calc(250/1920*100vw);}
.intro .other .imgBx:nth-child(3n+3){width: calc(200/1920*100vw);}


@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.intro .center{width: 60%; height: 60%;}
	.intro .center img{transform: scale(1.6);}
}
/* @media screen and (max-width:820px) {
    .intro{ display: none; }
}
@media screen and (max-width:500px) {
	.intro .other .imgBx:nth-child(3n+1){width: calc(300/1024*100vw);}
	.intro .other .imgBx:nth-child(3n+2){width: calc(250/1024*100vw);}
	.intro .other .imgBx:nth-child(3n+3){width: calc(200/1024*100vw);}
}
@media screen and (max-width:320px) {} */





/* ------------------------- s1 ------------------------- */
.s1{position: relative; padding-bottom: 200px;}
/* .s1::before {
	content:''; display: block; width: 1px; height: var(--vh100);
	position: absolute; left: 50%; background-color: dodgerblue; z-index: 3;
} */
.s1 .bg{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover;
	background-position: center bottom; transform: scale(1.5); filter: grayscale(1) blur(14px);
	transform-origin: center bottom;
}
.s1 .wrap{
	position: relative;
	height: var(--vh100); display: flex; align-items: center; justify-content: center;
	padding: 80px 0; box-sizing: border-box;
}
html.regularWeb .s1 .wrap{height: calc(var(--vh100) - 50px);}
html.kakaoWeb .s1 .wrap{height: calc(var(--vh100) - 100px);}
html.safariWeb .s1 .wrap{height: calc(var(--vh100) - 100px);}
.s1 .videoArea{
	text-align: right;
}
.s1 .videoArea h1{
	font-size: 24px; line-height: calc(42/24); letter-spacing: -0.02em;
	margin-bottom: 1em;
}
.s1 .videoArea h1 div{display: flex; justify-content: flex-end; overflow: hidden;}
.s1 .videoArea h1 div p{transform: translateY(110%);}
.s1 .videoArea h1 div p em{ font-size: 16px; }
.s1 .videoArea h1 div span{
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent;
}
.s1 .videoArea .video{opacity: 0; transform: translateY(60px);}
.s1 .videoArea .video img{width: 250px;}
.s1 h2{
	font-size: 24px; letter-spacing: -0.02em; line-height: calc(42/24); opacity: 0;
}
.s1 h2 > div{}
.s1 h2 .logo_mini{display: inline-block;}
.s1 h2 .logo_mini svg{height: 1em;}
.s1 .logo{width: min(calc(815/980 * var(--vh100)),90%);}
.s1 .logo div{overflow: hidden;}
.s1 .logo svg{width: 100%; transform: translateY(110%);}

.s1 .time{
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
	display: flex; align-items: flex-end;
}
.s1 .time > div{
	width: 2px; margin-bottom: 10px;
	position: absolute; transform-origin: center calc(100% + 10px);
}
.s1 .time .small{transform: rotate(180deg);}
.s1 .time .big{transform: rotate(160deg);}
.s1 .time > div div{width: 100%; background-color: #000; transform-origin: center bottom; transform: scaleY(0);}
.s1 .time .small div{height: 300px;}
.s1 .time .big div{height: 450px;}


/* 위치 */
.s1 .videoArea{position: absolute; right: 0; top: max(14%,80px); z-index: 2;}
.s1 h2{position: absolute; left: 0; top: calc(43% - 1em);}
.s1 .logo{position: absolute; left: 0; bottom: max(calc(70/980*var(--vh100)),20px);}


@media screen and (max-width:1800px) {
	.s1 .time{opacity: 0.3;}
	.s1 .time .small div{height: min(calc(300/1000*var(--vh100)),calc(300/1800*100vw));}
	.s1 .time .big div{height: min(calc(450/1000*var(--vh100)),calc(450/1800*100vw));}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s1{padding-bottom: 120px;}
	.s1 .videoArea h1{font-size: max(calc(24/1024*100vw),16px);}
    .s1 .videoArea h1 div p em{ font-size: 14px; }
	.s1 .videoArea .video img{width: max(calc(250/1024*100vw),180px);}
	.s1 h2{font-size: max(calc(24/1024*100vw),16px);}
}
@media screen and (max-width:820px) {
	.s1{padding-bottom: 80px;}
	.s1 .time > div{width: 1px;}
}
@media screen and (max-width:500px) {
	.s1 .videoArea h1{font-size: max(calc(16/500*100vw),13px);}
    .s1 .videoArea h1 div p em{ font-size: 11px; }
	.s1 h2{font-size: max(calc(16/500*100vw),13px); top: unset; bottom: 25%;}

	.s1 .time .small div{height: calc(160/500*100vw);}
	.s1 .time .big div{height: calc(250/500*100vw);}
}
@media screen and (max-width:320px) {}






/* ------------------------- s2 ------------------------- */

.s2{padding-bottom: 180px; background-color: #F7F7F7; position: relative; z-index: 3;}
.s2 .wrap{position: relative;}
.s2 .wrap .control{
	display: flex; align-items: center; justify-content: center; gap: 10px;
	font-size: 20px;
	position: absolute; left: 0; top: 0; z-index: 2;
}
.s2.out .wrap .control{pointer-events: none;}
.s2 .wrap .control div{
	border: 1px solid #ccc; box-sizing: border-box;
	width: 2em; height: 2em; display: flex; align-items: center; justify-content: center;
	cursor: pointer; border-radius: 0px;
}
html.pc .s2 .wrap .control div:hover{
	background-color: #000; color: #fff; border-color: #000;
}
.s2 .wrap .control div i{}

/* 스와이퍼 */
.s2 .swiper{width: 100%;}
.s2 .swiper-slide{display: flex; justify-content: space-between;}

.s2 .swiper-slide .txtArea{
	display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box;
	padding-top: 80px;

    width: calc(748 / 1578 * 100%);
}
.s2 .swiper-slide .txtArea .txtBx{}
.s2 .swiper-slide .txtArea .txtBx h3{
	font-weight: 600; font-size: 20px; letter-spacing: -0.02em;
	margin-bottom: 1em; overflow: hidden; line-height: 1.2;
}
.s2 .swiper-slide .txtArea .txtBx{position: relative;}
.s2 .swiper-slide .txtArea .txtBx .txt{
	line-height: calc(26/16); letter-spacing: -0.02em;
}
.s2 .swiper-slide .txtArea .txtBx .txt div{overflow: hidden;}
.s2 .swiper-slide .txtArea .txtBx .txt div.margin{height: 0.8em;}
.s2 .swiper-slide .txtArea .txtBx .txt div p{}
.s2 .swiper-slide .txtArea .noiseBx{
	font-size: 180px; letter-spacing: -0.03em; color: #000;
	font-family: "Urbanist"; display: flex; align-items: flex-end; gap: 0.2em;
	font-weight: 300; line-height: 0.9; overflow: hidden;
}
.s2 .swiper-slide .txtArea .noiseBx p{line-height: 0.75;}
.s2 .swiper-slide .txtArea .noiseBx .noise{height: 0.75em;}
.s2 .swiper-slide .txtArea .noiseBx .noise div{
	height: calc(100%/4); overflow: hidden; display: flex; align-items: flex-end;
}
.s2 .swiper-slide .txtArea .noiseBx .noise img{position: relative; height: 400%; max-width: unset;}
.s2 .swiper-slide .txtArea .noiseBx .noise div:nth-child(1) img{top: 300%;}
.s2 .swiper-slide .txtArea .noiseBx .noise div:nth-child(2) img{top: 200%;}
.s2 .swiper-slide .txtArea .noiseBx .noise div:nth-child(3) img{top: 100%;}


/* 오른쪽 */
.s2 .swiper-slide .imgBx{position: relative; width: 50%;}
.s2 .swiper-slide .imgBx::before {content:''; display: block; padding-bottom: calc(1277/1920*100%);}
.s2 .swiper-slide .imgBx img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}

/* 모션 */
.s2 .swiper-slide .txtArea .txtBx p{transform: translateY(110%);}
.s2 .swiper-slide .txtArea .noiseBx .noise div{opacity: 0; transform: translateX(20%);}
.s2 .swiper-slide .imgBx{opacity: 0;}

.s2 .swiper-slide .txtArea .txtBx p{transition: transform 1s;}
.s2 .swiper-slide .txtArea .noiseBx > p{transition: transform 1s;}
.s2 .swiper-slide .txtArea .noiseBx .noise div{}
.s2 .swiper-slide .imgBx{transition: opacity 2s;}

.s2 .swiper-slide-active .txtArea .txtBx p{transition-delay: 0.8s;}
.s2 .swiper-slide-active .txtArea .noiseBx .noise div{transition: transform 1s,opacity 1s;}
.s2 .swiper-slide-active .txtArea .noiseBx .noise div:nth-child(1){transition-delay: 0.4s !important;}
.s2 .swiper-slide-active .txtArea .noiseBx .noise div:nth-child(2){transition-delay: 0.5s !important;}
.s2 .swiper-slide-active .txtArea .noiseBx .noise div:nth-child(3){transition-delay: 0.6s !important;}
.s2 .swiper-slide-active .txtArea .noiseBx .noise div:nth-child(4){transition-delay: 0.7s !important;}

.s2 .swiper-slide-active .txtArea .txtBx p{transform: translateY(0%);}
.s2 .swiper-slide-active .txtArea .noiseBx .noise div{opacity: 1 !important; transform: translateX(0%) !important;}
.s2 .swiper-slide-active .imgBx{opacity: 1;}

/* out */
.s2.out .swiper-slide .txtArea .noiseBx .noise div{transition: transform 1s,opacity 1s; opacity: 0; transform: translateX(-20%);}
.s2.out .swiper-slide .txtArea .noiseBx .noise div:nth-child(1){}
.s2.out .swiper-slide .txtArea .noiseBx .noise div:nth-child(2){transition-delay: 0.1s;}
.s2.out .swiper-slide .txtArea .noiseBx .noise div:nth-child(3){transition-delay: 0.2s;}
.s2.out .swiper-slide .txtArea .noiseBx .noise div:nth-child(4){transition-delay: 0.3s;}


@media screen and (max-width:1600px) {
	.s2 .swiper-slide .txtArea .noiseBx{font-size: max(calc(180/1600*100vw),40px); }
}
@media screen and (max-width:1440px) {
	.s2 .swiper-slide .txtArea{gap: 140px;}
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s2 .swiper-slide .txtArea .txtBx h3{font-size: 16px; }
	.s2 .swiper-slide .txtArea .txtBx .txt{font-size: 14px; }
}
@media screen and (max-width:820px) {
	.s2 .swiper-slide{flex-direction: column; gap: 40px;}
	.s2 .swiper-slide .txtArea{gap: 60px; padding-top: 0; width: 100%;}
	.s2 .swiper-slide .imgBx{width: 100%;}
}
@media screen and (max-width:500px) {
	.s2 .swiper-slide{gap: 30px;}
	.s2 .swiper-slide .txtArea{gap: 40px; padding-top: 50px;}
	.s2 .swiper-slide .txtArea .txtBx h3{font-size: 14px; }
	.s2 .swiper-slide .txtArea .txtBx .txt{font-size: 12px; min-height: 9em;}
	.s2 .swiper-slide .txtArea .noiseBx{font-size: calc(80/500*100vw); }
	.s2 .swiper-slide .txtArea .noiseBx p{font-weight: 200;}

	.s2 .wrap .control{font-size: 16px; gap: 14px; left: unset; right: 0;}
}
@media screen and (max-width:320px) {
    .s2 .swiper-slide .txtArea .txtBx .txt{ min-height: 127px; }
}



/* ------------------------- s3 ------------------------- */
.s3{
	background-color: #F7F7F7;
}
.s3 .pinBx{
	height: var(--vh100); width: 100%;
	text-align: center; position: relative;
	display: flex; align-items: center; justify-content: center;
	font-size: min(calc(38/920*var(--vh100)),calc(calc(38/1920*100vw)));
}
.s3 .cont{width: 100%; position: relative;}
.s3 .txtArea{
	display: inline-block;
	/* font-family: "Urbanist"; */
    font-weight: 200;
	line-height: calc(150/100);
	color: #000;
	position: relative;
}
.s3 .txtArea .txt{
	display: inline;
	position: relative; z-index: 2;
	-webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    line-height: 1.8;
}
.s3 .txtArea .txt .videoBx{
	display: inline-block;
	width: calc(210/100*1em);
	box-sizing: border-box;
	position: relative; vertical-align: middle;
	overflow: visible;
}
.s3 .txtArea .txt .videoBx::before {content:''; display: block; width: 100%; padding-bottom: calc(97/160*100%);}
.s3 .txtArea .txt .videoBx .video{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}
.s3 .txtArea .txt .videoBx .video > img{
	position: absolute; left: -1px; top: -1px; width: 100%; height: 100%; object-fit: cover; z-index: 2; padding: 1px;
}
.s3 .txtArea .txt .videoBx iframe{
	position: absolute; left: 0; top: 0;
	/* width: 100vw; height: var(--vh100); */
	background-color: #000; z-index: 2;
	width: 100%; height: 100%;
}


.s3 .txtArea .objBx{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
}
.s3 .txtArea .objBx .obj{position: absolute; transition-property: opacity,transform; transition-duration: 1s;}
.s3 .txtArea .objBx .obj img{width: 100%; max-width: unset;}
.s3 .txtArea .objBx .obj.n1{width: calc(350/100*1em); width: calc(300/100*1em); left: -4%;top: -15%;}
.s3 .txtArea .objBx .obj.n2{width: calc(326/100*1em);right: -5%;bottom: 43%;}
.s3 .txtArea .objBx .obj.n3{width: calc(250/100*1em);left: 9%;bottom: -8%;}

.s3 .txtArea .objBx .obj.n1{opacity: 0; transform: translateX(-100px);}
.s3 .txtArea .objBx .obj.n2{opacity: 0; transform: rotate(16deg);}
.s3 .txtArea .objBx .obj.n3{opacity: 0; transform: translateX(-100px);}

.s3 .txtArea .objBx .obj.n1.on{opacity: 1; transform: translateX(0px);}
.s3 .txtArea .objBx .obj.n2.on{opacity: 1; transform: rotate(0deg);}
.s3 .txtArea .objBx .obj.n3.on{opacity: 1; transform: translateX(0px);}

.s3 .bottom{
	font-size: 16px;
	position: absolute; text-align: right; line-height: calc(26/16);
	right: 80px; bottom: -60px;
}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s3 .bottom{font-size: 14px;}
}
@media screen and (max-width:820px) {
	.s3 .pinBx{font-size: min(calc(42/820*100vw),46px);}
	.s3 .bottom{font-size: 12px; right: 2.5vw;}
    .s3 .txtArea .txt{line-height: 1.6;}
}
@media screen and (max-width:500px) {
	.s3 .bottom{font-size: 10px;}
}
@media screen and (max-width:320px) {
	.s3 .bottom{font-size: 8px;}
}


/* 세로가 길경우 */
@media (orientation: Portrait){
	.s3 .bottom{bottom: -80px; text-align: center; left: 0; right: 0; margin: 0 auto;}
}
@media (orientation: Portrait) and (max-width:500px){ .s3{margin-top: -30vw;} }
@media (orientation: Portrait) and (max-width:400px){ .s3{margin-top: -50vw;} }





/* ------------------------- s4 ------------------------- */
.s4{
	/* margin-top: calc(-1 * var(--vh100)); */
	--imgH:180px;
}
.s4 .pinBx{
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	position: relative;
	min-height: var(--vh100);
	background-image: url(/asset/img/main/s4_bg.jpg); background-size: cover; background-position: center;
}
.s4 h3{
	font-size: clamp(40px,calc(250/1920*100vw),250px);
	white-space: nowrap; letter-spacing: 0.26em;
	position: absolute; font-family: 'Urbanist'; color: #351d06; opacity: 0.1;
	bottom: 50%; transform: translateY(50%);
}
.s4 .imgArea{
	display: flex; align-items: center; justify-content: center; position: relative;
	width: calc(var(--imgH) * 4.111); height: calc(var(--imgH) * 4.111);
}
.s4 .imgArea .imgBx{
	position: absolute;
	height: 100%; min-height: var(--imgH);
	display: flex; align-items: center; justify-content: center;
}
.s4 .imgArea .imgBx div{
	transform: rotate(-45deg); opacity: 0;
	position: relative; height: 100%;
}
.s4 .imgArea .imgBx.n1{}
.s4 .imgArea .imgBx div{}
.s4 .imgArea .imgBx img{
	width: auto; height: var(--imgH);
}
.s4 p{
	position: absolute; font-size: 18px; letter-spacing: -0.02em; color: rgba(0,0,0,0.7);
	line-height: calc(28/18); text-align: center; top: calc(50% + 260px);
	opacity: 0; transform: translateY(60px);
}

/* 모션 */
.s4 h3{transition-property: font-size,letter-spacing,opacity,top,transform; transition-duration: 1s; will-change: font-size,letter-spacing,opacity,top,transform;}
.s4 .imgArea .imgBx{transition-property: height,transform,opacity; transition-duration: 1s; will-change: height,transform,opacity;}
.s4 p{transition-property: opacity, transform; transition-duration: 1s;}

.s4.out h3{font-size: 100px; letter-spacing: -0.0em; opacity: 1; transform: translateY(-260px);}
.s4.out .imgArea .imgBx.n1{height: 0%;}
.s4.out .imgArea .imgBx.n2{height: 0%; transform: translateX(min(calc(400/1920*100vw),400px)) rotate(-45deg);}
.s4.out .imgArea .imgBx.n8{height: 0%; transform: translateX(max(calc(-400/1920*100vw),-400px)) rotate(45deg);}
.s4.out .imgArea .imgBx.n3{height: 0%; transform: translateX(min(calc(800/1920*100vw),800px)) rotate(-90deg);}
.s4.out .imgArea .imgBx.n7{height: 0%; transform: translateX(max(calc(-800/1920*100vw),-800px)) rotate(90deg);}

.s4.out .imgArea .imgBx.n4{opacity: 0; transform: translate(calc(var(--imgH) * 1.5),calc(var(--imgH) * 1.5));}
.s4.out .imgArea .imgBx.n5{opacity: 0; transform: translate(0,calc(var(--imgH) * 1.5));}
.s4.out .imgArea .imgBx.n6{opacity: 0; transform: translate(calc(var(--imgH) * -1.5),calc(var(--imgH) * 1.5));}

.s4.out p{opacity: 1; transform: translateY(0);}


/* 스와이퍼 820 이하일때만 등장 */
.s4 .swiper{width: 180px; margin: 40px 0; overflow: visible; display: none;}
.s4 .swiper-slide{}
.s4 .swiper-slide img{width: 100%;}






/* 가로가 길고 높이가 800 이하일때 */
@media (orientation: landscape) and (max-height:800px) {
	.s4{--imgH:calc(180/800*var(--vh100))}
	.s4.out h3{transform: translateY(calc(var(--imgH) * -1));}
	.s4 p{top: calc(50% + var(--imgH));}
}

@media screen and (max-width:1800px) {}
@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	.s4.out h3{font-size: max(calc(100/1280*100vw),40px);}
	.s4 p{font-size: max(calc(18/1280*100vw),14px);}
}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	.s4{margin-top: unset;}
	.s4 .pinBx{height: auto; min-height: unset; padding: 80px 0;}
	.s4 h3{position: unset; opacity: 1; letter-spacing: -0.00em; font-size: 60px; transform: unset;}
	.s4 .imgArea{display: none;}
	.s4 .swiper{display: block;}
	.s4 p{position: unset; top: unset; opacity: 1; transform: unset;}


	.s4 h3{transition: unset;}
	.s4 p{transition: unset;}
}
@media screen and (max-width:500px) {
	.s4 h3{font-size: max(calc(60/500*100vw),20px);}
	.s4 .swiper{width: max(calc(180/500*100vw),80px);}
	.s4 p{font-size: 12px; max-width: 260px; padding: 0 20px; box-sizing: border-box;}
	.s4 p br{display: none;}
}
@media screen and (max-width:320px) {}






/* ------------------------- s5 ------------------------- */
.s5{background-color: #F7F7F7;}
.s5 .pinBx{position: relative;}
.s5 .card{
	height: var(--vh100); display: flex; align-items: flex-end; width: 100%;
}
.s5 .card:not(:first-child){position: absolute; left: 0; top: 0;}
.s5 .txtArea{
	padding-top: 120px; padding-bottom: 60px; box-sizing: border-box;
	display: flex; flex-direction: column; justify-content: space-between;
	min-width: 50%; padding-left: calc((100% - 1760px) / 2); height: 100%;
	line-height: 1.2;
}
.s5 .txtArea .top{
	color: #000;
}
.s5 .txtArea .top > *{overflow: hidden;}
.s5 .txtArea .top .out{overflow: hidden;}
.s5 .txtArea .top h2{}
.s5 .txtArea .top em{
	opacity: 0.2; font-size: 30px; font-family: 'Urbanist';
	display: block; line-height: calc(0.8); margin-top: 50px;
}
.s5 .txtArea .top h3{
	font-size: 60px; font-weight: 600; letter-spacing: -0.02em;
	margin-top: 14px; margin-bottom: 10px;
}
.s5 .txtArea .top h4{
	opacity: 0.7; font-size: 18px; font-family: 'Urbanist'; margin-bottom: calc(90/980*var(--vh100));
}
.s5 .txtArea .top p{}
.s5 .txtArea .imgBx{width: 270px; max-width: 100%; position: relative; overflow: hidden;}
.s5 .txtArea .imgBx::before {
	content:''; display: block; padding-bottom: calc(160/270*100%);
}
.s5 .txtArea .imgBx div{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.s5 .txtArea .imgBx img{width: 100%; height: 100%; object-fit: cover;}
.s5 .txtArea .bottom{}
.s5 .txtArea .bottom .bold{margin-bottom: 22px;}
.s5 .txtArea .bottom .bold p{font-size: 22px; font-weight: 600; line-height: 1.3; color: #000;}
.s5 .txtArea .bottom div{overflow: hidden;}
.s5 .txtArea .bottom p{
	font-size: 18px; color: #000; line-height: calc(30/18); letter-spacing: -0.02em;
}
/* .s5 .txtArea .bottom p .dot{
	font-size: max(0.8em,12px); display: flex; align-items: flex-start; flex-wrap: wrap;
} */
.s5 .txtArea .bottom p .dot{
	font-size: 18px; display: flex; align-items: flex-start; flex-wrap: wrap;
}
.s5 .txtArea .bottom p .dot b{font-weight: 600; display: inline-block; margin-left: 0.3em;}
.s5 .txtArea .bottom p .dot::before {
	content:'·'; display: block; margin-right: 0.3em;
}
.s5 .txtArea .bottom p small{font-size: max(0.8em,12px); }


.s5 .imgArea{width: calc(50% + 10vw); height: 100%; flex-shrink: 0; overflow: hidden;}
.s5 .imgArea div{filter: grayscale(0) brightness(1) blur(0px);}
.s5 .imgArea img{width: 100%; height: var(--vh100); object-fit: cover;}

/* 모션셋팅 */
/* .s5 .txtArea .top p{transition-property: transform; transition-duration: 1s;}
.s5 .txtArea .bottom b{transition-property: transform; transition-duration: 1s;}
.s5 .txtArea .bottom p{transition-property: transform; transition-duration: 1s;}
.s5 .txtArea .imgBx div{transition-property: height; transition-duration: 2s;}
.s5 .card:not(:first-child) .imgArea{transition-property: height; transition-duration: 2s;}
.s5 .card:first-child .imgArea img{transition-property: transform,filter; transition-duration: 2s;}

.s5 .txtArea .top p{transform: translateY(110%);}
.s5 .txtArea .bottom b{transform: translateY(110%);}
.s5 .txtArea .bottom p{transform: translateY(110%);}
.s5 .txtArea .imgBx div{height: 0%;}
.s5 .card:not(:first-child) .imgArea{height: 0;}
.s5 .card:first-child .imgArea img{transform: scale(1.3); filter: blur(10px);}

.s5 .card.on .txtArea .top p{transform: translateY(0%);}
.s5 .card.on .txtArea .bottom b{transform: translateY(0%);}
.s5 .card.on .txtArea .bottom p{transform: translateY(0%);}
.s5 .card.on .txtArea .imgBx div{height: 100%;}
.s5 .card:not(:first-child).on .imgArea{height: 100%;}
.s5 .card:first-child.on .imgArea img{transform: scale(1); filter: blur(0px);} */


/* 가로가 길때 */
@media (orientation: landscape) and (max-height:900px) and (min-width:1281px) {
	.s5 .txtArea{padding-top: 100px;}
	.s5 .txtArea .top em{font-size: 20px;}
	.s5 .txtArea .top h3{font-size: 40px; margin: 20px 0; margin-top: 10px;}
	.s5 .txtArea .top h4{margin-bottom: 40px;}

	.s5 .txtArea .imgBx{width: 220px;}

	.s5 .txtArea .bottom .bold p{font-size: 18px;}
	.s5 .txtArea .bottom p{font-size: 16px;}
}
@media (orientation: landscape) and (max-height:800px) and (min-width:1281px) {}
@media (orientation: landscape) and (max-height:700px) and (min-width:1281px) {
	.s5 .txtArea{padding-top: 80px;}
	.s5 .txtArea .top em{font-size: 20px;}
	.s5 .txtArea .top h3{font-size: 30px;}
	.s5 .txtArea .top h4{margin-bottom: 30px;}

	.s5 .txtArea .imgBx{width: 180px;}

	.s5 .txtArea .bottom .bold p{font-size: 16px;}
	.s5 .txtArea .bottom p{font-size: 14px;}
}
@media (orientation: landscape) and (max-height:600px) and (min-width:1281px) {}





@media screen and (max-width:1800px) {
	.s5 .txtArea{padding-left: 2.5vw;}
}
@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	.s5{padding-bottom: 50px;}
	.s5 .card{min-height: unset; height: auto; flex-direction: column-reverse;}
	.s5 .card:not(:first-child){position: unset;}

	.s5 .txtArea{width: 100%; padding: 0 2.5vw; padding-top: 60px; padding-bottom: 60px;}
	.s5 .txtArea .top{margin-bottom: 40px;}
	.s5 .imgArea{width: 100%;}
	.s5 .imgArea img{height: auto;}

	.s5 .txtArea .top em{font-size: 30px;}
	.s5 .txtArea .top h3{font-size: 60px;}
	.s5 .txtArea .top h4{margin-bottom: 40px;}
}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	.s5 .txtArea{padding: 40px 5vw;}
	.s5 .txtArea .top em{font-size: 30px;}
	.s5 .txtArea .top h3{font-size: 40px;}
	.s5 .txtArea .top h4{margin-bottom: 20px;}

	.s5 .txtArea .bottom .bold p{font-size: 16px;}
	.s5 .txtArea .bottom p{font-size: 14px;}
}
@media screen and (max-width:500px) {
	.s5 .txtArea .top em{font-size: 20px;}
	.s5 .txtArea .top h3{font-size: 30px; margin: 10px 0;}
	.s5 .txtArea .top h4{font-size: 14px;}

	.s5 .txtArea .bottom .bold p{font-size: 14px;}
	.s5 .txtArea .bottom p{font-size: 14px;}
    .s5 .txtArea .bottom p .dot{ font-size: 14px;}
}
@media screen and (max-width:320px) {}





/* 20251027 수정 css */
.s1{padding-bottom: 300px;}
.s2{padding-top: 200px;}
.s4{display: none !important;}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	.s1{padding-bottom: 200px;}
	.s2{padding-top: 120px; padding-bottom: 150px;}
}
@media screen and (max-width:1024px) {
	.s1{padding-bottom: 0;}
	.s3{margin-top: -10vw;}
}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	.s3{margin-top: -50vw;}
	.s2{padding-top: 70px; padding-bottom: 70px;}
}
@media screen and (max-width:400px) {
	.s3{margin-top: -60vw;}
}
@media screen and (max-width:320px) {}