header.down, header.up{background-color: transparent;}
header.down h1 a svg, header.up h1 a svg, header.sub_header h1 a svg{fill: #fff;}
header.down nav .depth01 a, header.up nav .depth01 a, header.sub_header nav .depth01 a{color: #fff;}
header h1 a svg{transition: fill 0.5s;}
header nav .depth01 a{transition: color 0.5s;}


header.color h1 a svg{fill: #000;}
@media screen and (min-width: 821px){
    header.color nav .depth01 a{color: #000;}
}

header.down .menuIco div, header.sub_header .menuIco div{background-color: #fff;}
header.color .menuIco div{background-color: #000;}

/* -------- intro -------- */

html{overflow: hidden;}

.introArea{
	position: fixed; left: 0; top: 0; z-index: 999999;
	width: 100%; height: 100%; pointer-events: none;
}
.introArea .bg{
	position: absolute; left: 0; top: 0;
	width: 100%; height: 100%; background-color: #000;
}
.introArea .svgBx{
	height: 100%; position: relative;
	transition: height 1s;
	display: flex; align-items: center; justify-content: center;
}
.introArea svg{
	fill: #fff; height: calc(62/1920*100vw); overflow: visible;
	transition: height 1s, left 1s,transform 1s;
	position: absolute;
}

/* 인트로 셋팅 */
header{opacity: 0;}
.introArea svg path{opacity: 0; transform: translateX(20%);}
.introArea .svgBx.on{height: var(--headerHeight);}
.introArea .svgBx.on svg{height: 17px;}

@media screen and (max-width:1600px) {
	.introArea .svgBx svg{left: 50%; transform: translateX(-50%);}
	.introArea .svgBx.on svg{left: 0; transform: translateX(0%);}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	.introArea svg{height: calc(64/820*100vw);}
	.introArea .svgBx.on svg{height: 14px;}
}
@media screen and (max-width:500px) {}
@media screen and (max-width:320px) {}


/* -------- 공통 -------- */
:root{
	--vh:1vh;
}
section{color: #fff; word-break: keep-all; background-color: #0c0c0c;}
._imgBx{position: relative;}
._imgBx::before {
	content:''; display: block;
}
._imgBx img{
	position: absolute; left: 0; top: 0;
	width: 100%; height: 100%; object-fit: cover;
}

/* 소제목 */
._tit{font-size: 1px;}
._tit > small{
	font-size: max(calc(16/1*1em),14px); color: rgba(255,255,255,0.65); margin-bottom: 1.2em;
	padding-left: 0.4em; box-sizing: border-box; font-weight: 500; line-height: 1.666;
	overflow: hidden;
}
._tit > small.big{
	font-size: max(calc(18/1*1em),14px);
}
._tit .mid{
	margin-bottom: calc(50/1*1em);
	font-weight: 700;
}
._tit .mid [class*='type'] > div{overflow: hidden;}
._tit .mid .type1{font-size: 76em;}
._tit .mid .type2{font-size: 97em; font-family: 'Poppins';}
._tit .mid .type3{font-size: 68em;}
._tit a{}

/* 링크 버튼 */
._btnBx{
	display: inline-flex; align-items: center; justify-content: center;
	font-size: max(17em,12px); font-family: 'Poppins'; padding: 1em calc(20/17*1em); gap: calc(25/17*1em); font-weight: 500;
	border-radius: calc(7/17*1em);
	transition: background-color 0.5s,color 0.5s;
}
._btnBx p{}
._btnBx i{transform: rotate(45deg);}
html.pc ._btnBx:hover{
	background-color: var(--blue); color: #fff;
}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
	._tit{font-size: max(calc(0.8/1440*100vw),0.7px);}
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	._tit{font-size: max(calc(0.7/1024*100vw),0.6px);}
}
@media screen and (max-width:820px) {
	._tit{font-size: max(calc(0.6/820*100vw),0.5px);}
}
@media screen and (max-width:500px) {
	._tit{font-size: max(calc(0.5/500*100vw),0.35px);}
	._tit > small{padding-left: 0.2em;}
}
@media screen and (max-width:320px) {}







/* 커서 */
._cursor{
	position: fixed; z-index: 100; pointer-events: none;
	display: flex; align-items: center; justify-content: center;
}
html.mo ._cursor{display: none !important;}
._cursor > *{position: absolute; opacity: 0; transform: scale(0); transition: transform 1s,opacity 1s,background-color 1s;}
._cursor > *.on{opacity: 1; transform: scale(1);}
._cursor .drag{
	color: #fff; border-radius: 50%; background-color: #313538;
	width: 100px; height: 100px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
}
._cursor .drag.blue{background-color: #104b8c;}
._cursor .drag > p{
	font-family: 'Poppins'; font-size: 14px; font-weight: 300;
	margin-bottom: 9px;
}
._cursor .drag > div{
	display: flex; align-items: center; justify-content: center;
}
._cursor .drag > div i{}
._cursor .drag > div .dot{
	width: 3px; height: 3px; border-radius: 50%; background-color: #fff;
	margin: 0 8px;
}


._cursor .scroll{
	border: 1px solid #000; box-sizing: border-box;
	width: 100px; height: 100px; border-radius: 50%;
}
._cursor .scroll div{
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 12px; font-size: 14px; font-weight: 500;
	width: 100%; height: 100%;
}
._cursor .scroll i{}
._cursor .scroll p{}
._cursor .scroll i:nth-child(1){}
._cursor .scroll i:nth-child(3){}




/* -------- s1 -------- */
.s1{
	height: 100vh;
	position: relative;
	padding-top: var(--headerHeight); box-sizing: border-box;
}
html.mo .s1{
	height: calc((var(--vh,1vh) * 100) + 60px);
}
html.kakaoWeb .s1{
    height: calc((var(--vh,1vh) * 100) + 120px);
}
.s1 .first{
	padding-top: calc(var(--vh,1vh) * 17); box-sizing: border-box;
}
.s1 h2{
	text-align: center; margin-bottom: max(calc(50/96*1em),30px);
	font-size: calc(96/970 * (var(--vh,1vh) * 100));
}
.s1 h2 strong{
	font-family: 'Poppins';
	letter-spacing: -0.03em; line-height: 1.239; font-weight: 600;
	margin-bottom: calc(46/96*1em);
}
.s1 h2 strong div{overflow: hidden;}
.s1 h2 small{
	font-size: max(calc(20/970 * (var(--vh,1vh) * 100) ),14px); letter-spacing: -0.03em; font-weight: 500; line-height: 1.3;
}
.s1 h2 small span{
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}
.s1 .scollDown{}
.s1 .scollDown div{
	font-size: max(calc(1/970 * (var(--vh,1vh) * 100) ),0.7px);
	width: 34em; height: 67em; border: 1px solid #525252; box-sizing: border-box;
	border-radius: 100em; display: flex; flex-direction: column; align-items: center; justify-content: center;
	color: #fff; padding-top: 1.2em; margin: 0 auto; animation: floating20 infinite 3s;
}
.s1 .scollDown i{
	font-size: 20em; box-sizing: border-box;
	animation: opacity50 infinite 3s;
}
.s1 .scollDown i:nth-child(1){}
.s1 .scollDown i:nth-child(2){animation-delay: 0.2s; margin: -0.4em 0;}
.s1 .scollDown i:nth-child(3){animation-delay: 0.4s;}
.s1 .second{
	position: absolute; left: 0; top: 0; box-sizing: border-box;
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
}
.s1 .second .swiper{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box;
	filter: grayscale(1) brightness(0.4);
}
.s1 .second .swiper-slide{position: relative; transition: opacity 1s;}
.s1 .second .swiper-slide img{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;
}

/* 페이징 */
.s1 .second .paging{
	position: absolute; bottom: 34px; font-family: 'Poppins'; font-size: 15px;
	display: flex; align-items: center; justify-content: center;
	gap: 10px; z-index: 1;
}
.s1 .second .paging li{
	color: rgba(255,255,255,0.36);
	display: flex; align-items: center;
	transition: color 0.5s; cursor: pointer; line-height: 1.3;
}
.s1 .second .paging li p{
	display: flex; align-items: center; margin-right: 10px;
}
.s1 .second .paging li p::before {
	content:''; display: block; width: 6px; height: 6px; border-radius: 50%;
	margin-right: 8px; background-color: rgba(255,255,255,0.36);
	transition: background-color 0.5s;
}
.s1 .second .paging li > div{
	overflow: hidden;
	width: 0; height: 2px; background-color: rgba(255,255,255,0.36);
	position: relative; transition: width 0.5s;
}
.s1 .second .paging li > div > div{
	position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #fff;
	transform: scaleX(0); transform-origin: left center;
}

/* on */
.s1 .second .paging li.on{color: #fff;}
.s1 .second .paging li.on p::before{background-color: var(--blue);}
.s1 .second .paging li.on > div{width: 128px;}
.s1 .second .paging li.on > div > div{}



.s1 .second h3{
	position: relative;
	font-size: 80px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.4;
	text-align: center; z-index: 1;
}
.s1 .second h3 div{
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}


/* 모션 셋팅 */
.s1 h2 strong div p{transform: translateY(110%);}
.s1 h2 small{transform: translateY(40px); opacity: 0;}
.s1 .scollDown{transform: translateY(40px); opacity: 0;}

.s1 .second{opacity: 0; transform: translateY(40px);}
.s1 .second h3 div p{transform: translateY(110%);}
.s1 .second .paging{opacity: 0; transform: translateY(40px);}

@media screen and (max-height:600px) {
	.s1 .first{padding-top: calc((var(--vh,1vh) * 10));}
	.s1 .scollDown div{animation: floating10 infinite 3s;}
}
@media screen and (max-height:400px) {
	.s1 .first{padding-top: calc((var(--vh,1vh) * 6));}
}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
	.s1 .second h3{font-size: calc(80/1440*100vw);}
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s1 .second .paging{font-size: 13px;}
	.s1 .second .paging li.on > div{width: 100px;}

}
@media screen and (max-width:820px) {
	.s1 .second .paging{flex-direction: column;}
}
@media screen and (max-width:500px) {
	.s1 .second .paging{font-size: 12px; bottom: 50px;}
	.s1 .second .paging li.on > div{width: 80px;}

	.s1 .second h3{font-size: calc(45/480*100vw);}
	.s1 .second h3 div:nth-child(2){display: none;}
}
@media screen and (max-width:320px) {}


/* 세로가 길때 */
@media (orientation: portrait){
	.s1 h2{font-size: calc(160/1920*100vw); margin-bottom: 1em;}
	.s1 h2 strong{margin-bottom: 0.8em;}
	.s1 h2 small{font-size: max(calc(22/1920*100vw),18px);}
	.s1 .scollDown div{font-size: 1px;}
}
@media (orientation: portrait) and (max-width:1600px){}
@media (orientation: portrait) and (max-width:1440px){}
@media (orientation: portrait) and (max-width:1280px){}
@media (orientation: portrait) and (max-width:1024px){}
@media (orientation: portrait) and (max-width:820px){}
@media (orientation: portrait) and (max-width:500px){
	.s1 .first{padding-top: calc((var(--vh,1vh) * 10));}
	.s1 h2{margin-bottom: calc((var(--vh,1vh) * 6)); font-size: calc(47/500*100vw);}
	.s1 h2 strong{margin-bottom: 0.5em;}
	.s1 h2 small{font-size: 18px; line-height: 1.7222; font-weight: 400;}
	.s1 .scollDown div{animation: floating10 infinite 3s; font-size: 0.8px;}
}
@media (orientation: portrait) and (max-width:320px){}





/* -------- s2 -------- */
.s2{
	overflow: hidden;
	height: 100vh;

	/* 카드 세로 간격 */
	--s2gap:30px;

	/* 카드 너비 설정 */
	--s2cardWidth:657px;

	/* 657:367 비율기준 --s2cardWidth 길이기준으로 높이 설정 */
	--s2cardHeight: calc(var(--s2cardWidth) * (367 / 657));

	/* 위아래 밀려나는 정도 */
	--s2top:translateY(calc(var(--s2cardHeight) / -3.6));
	--s2bottom:translateY(calc(var(--s2cardHeight) / 3.6));
}
.s2 .con{
	width: var(--s2cardWidth);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	gap: var(--s2gap);
}
.s2 .dummyBx{
	width: 100%;
	display: flex; flex-direction: column; gap: var(--s2gap);
}
.s2 .dummyBx ._imgBx{
	width: 100%;
}
.s2 .dummyBx ._imgBx::before {
	padding-bottom: calc(367/657*100%);
}
.s2 .dummyBx ._imgBx img{}
.s2 .swiperArea{
	width: 100%;
	display: flex; flex-direction: column; gap: var(--s2gap);
	cursor: none;
}
.s2 .swiper{width: 100%; overflow: visible; position: relative;}
.s2 .swiper .swiper-slide{position: relative;}
.s2 .swiper .swiper-slide ._imgBx::before {padding-bottom: calc(367/657*100%);}
.s2 .swiper .swiper-slide ._imgBx img{}


/* 텍스트 */
.s2 .swiper .txtBx{}
.s2 .swiper .txtBx > *{position: absolute; z-index: 10;}
.s2 .swiper .txtBx ._tit{
	position: absolute; top: 50%; left: -300px; transform: translateY(-50%);
}
.s2 .swiper .txtBx ._tit > small{margin-bottom: 1em;}
.s2 .swiper .txtBx ._tit .mid{margin-bottom: calc(30/1*1em); font-weight: 600; line-height: 1.3;}
.s2 .swiper .txtBx ._tit .mid .type2 div:not(:first-child){margin-top: -0.1em;}
.s2 .swiper .txtBx ._tit ._btnBx{
	background-color: transparent; border: 1px solid #fff; box-sizing: border-box;
	padding: 1em calc(21/17*1em); cursor: pointer;
}
.s2 .swiper .txtBx ._tit ._btnBx p{transform: translateY(10%);}
html.pc .s2 .swiper .txtBx ._tit ._btnBx:hover{
	background-color: #fff; color: #000;
}

.s2 .swiper .txtBx .right{
	right: -24.2%;
	bottom: -13%; white-space: nowrap; margin-right: calc(-120/20*1em);
	font-size: 20px; font-weight: 500; line-height: 1.6;
}
.s2 .swiper .txtBx .right p:not(:last-child){margin-bottom: 0.6em;}
.s2 .swiper .txtBx .vertical{
	left: 124.2%; top: -24.2%; margin-left: 10px; color: #505052;
	writing-mode: vertical-rl; letter-spacing: -0.025em;

}



/* 세로로 움직이는거 */
.s2 .contents{}
.s2 .cont{
	/* 1번 슬라이드가 화면 가운데 오게끔 설정 */
	transform: translateY(
		calc(
			(var(--s2cardHeight) * -3) +
			(var(--s2gap) * -3) +
			( ( (var(--vh,1vh) * 100)  - var(--s2cardHeight)) / 2 ) +
			(var(--headerHeight) / 2)
		)
	);
}

/* 스크롤시 이동하는거 */
.s2 .con{transition: transform 1.2s;}
.s2[scroll='2'] .con{transform: translateY(calc( (var(--s2cardHeight) * -1) + (var(--s2gap) * -1) ));}
.s2[scroll='3'] .con{transform: translateY(calc( (var(--s2cardHeight) * -2) + (var(--s2gap) * -2) ));}

/* on 되면 위아래 멀어지는거 */
.s2 .dummyBx.top{transition: transform 0.8s,opacity 0.8s;}
.s2 .dummyBx.bottom{transition: transform 0.8s,opacity 0.8s;}
.s2 .swiper.n1{transition: transform 0.8s,opacity 0.8s;}
.s2 .swiper.n2{transition: transform 0.8s,opacity 0.8s;}
.s2 .swiper.n3{transition: transform 0.8s,opacity 0.8s;}

.s2[active] .dummyBx.top{transition: transform 1s, opacity 1s 0.5s;}
.s2[active] .swiper.n1{transition: transform 1s, opacity 1s 0.5s;}
.s2[active] .swiper.n2{transition: transform 1s, opacity 1s 0.5s;}
.s2[active] .swiper.n3{transition: transform 1s, opacity 1s 0.5s;}
.s2[active] .dummyBx.bottom{transition: transform 1s, opacity 1s 0.5s;}

.s2[active='1'] .dummyBx.top{transform: var(--s2top); opacity: 0;}
.s2[active='1'] .swiper.n1{}
.s2[active='1'] .swiper.n2{transform: var(--s2bottom); opacity: 0;}
.s2[active='1'] .swiper.n3{transform: var(--s2bottom); opacity: 0;}
.s2[active='1'] .dummyBx.bottom{transform: var(--s2bottom); opacity: 0;}

.s2[active='2'] .dummyBx.top{transform: var(--s2top); opacity: 0;}
.s2[active='2'] .swiper.n1{transform: var(--s2top); opacity: 0;}
.s2[active='2'] .swiper.n2{}
.s2[active='2'] .swiper.n3{transform: var(--s2bottom); opacity: 0;}
.s2[active='2'] .dummyBx.bottom{transform: var(--s2bottom); opacity: 0;}

.s2[active='3'] .dummyBx.top{transform: var(--s2top); opacity: 0;}
.s2[active='3'] .swiper.n1{transform: var(--s2top); opacity: 0;}
.s2[active='3'] .swiper.n2{transform: var(--s2top); opacity: 0;}
.s2[active='3'] .swiper.n3{}
.s2[active='3'] .dummyBx.bottom{transform: var(--s2bottom); opacity: 0;}


/* 슬라이드 이미지 커지는거 */
.s2 .swiper .swiper-slide{opacity: 0; transition: opacity 1.2s;}
.s2 .swiper .swiper-slide-active{opacity: 1;}
.s2 .swiper.on .swiper-slide{opacity: 1;}
.s2 .swiper .swiper-slide ._imgBx{transition: transform 1s,opacity 1s; opacity: 0.5;}
.s2 .swiper.on .swiper-slide-active ._imgBx{transform: scale(1.484); opacity: 1;}


/* 슬라이드 텍스트 */
.s2 .swiper .txtBx ._tit > small{transform: translateY(40px); opacity: 0;}
.s2 .swiper .txtBx ._tit .mid p{transform: translateY(110%);}
.s2 .swiper .txtBx ._tit ._btnBx{transform: translateY(40px); opacity: 0;}
.s2 .swiper .txtBx .right{transform: translateY(40px); opacity: 0;}
.s2 .swiper .txtBx .vertical{opacity: 0;}

.s2 .swiper.on .txtBx ._tit > small{transform: translateY(0); opacity: 1;}
.s2 .swiper.on .txtBx ._tit .mid p{transform: translateY(0);}
.s2 .swiper.on .txtBx ._tit ._btnBx{transform: translateY(0); opacity: 1;}
.s2 .swiper.on .txtBx .right{transform: translateY(0); opacity: 1;}
.s2 .swiper.on .txtBx .vertical{opacity: 1;}

.s2 .swiper .txtBx ._tit > small{transition-property: transform, opacity; transition-duration: 0.5s;}
.s2 .swiper .txtBx ._tit .mid p{transition-property: transform, opacity; transition-duration: 0.5s;}
.s2 .swiper .txtBx ._tit ._btnBx{transition: transform 0.5s, opacity 0.5s, background-color 1s, color 1s;}
.s2 .swiper .txtBx .right{transition-property: transform, opacity; transition-duration: 0.5s;}
.s2 .swiper .txtBx .vertical{transition-property: transform, opacity; transition-duration: 0.5s;}

.s2 .swiper.on .txtBx ._tit > small{transition-property: transform, opacity; transition-duration: 1.5s;}
.s2 .swiper.on .txtBx ._tit .mid p{transition-property: transform, opacity; transition-duration: 1.5s;}
.s2 .swiper.on .txtBx ._tit ._btnBx{transition: transform 1.5s, opacity 1.5s, background-color 1s, color 1s;}
.s2 .swiper.on .txtBx .right{transition-property: transform, opacity; transition-duration: 1s; transition-delay: 0.5s;}
.s2 .swiper.on .txtBx .vertical{transition-property: transform, opacity; transition-duration: 1s; transition-delay: 0.5s;}





/* pc */
@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
	html.pc .s2{
		--s2gap:30px;
		--s2cardWidth: calc(500/1440*100vw);
	}

	html.pc .s2 .swiper .txtBx ._tit{left: calc(-260/1440*100vw);}
	html.pc .s2 .swiper .txtBx .right{font-size: 18px;}
	html.pc .s2 .swiper .txtBx .vertical{writing-mode: unset; transform: translate(-100%,calc(-100% - (10/14*1em))); margin-left: 0; white-space: nowrap; font-size: 14px;}
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	html.pc .s2{--s2cardWidth: calc(500/1024*100vw);}
	html.pc .s2 .swiper .txtBx ._tit{left: calc(-200/1024*100vw);}
}
@media screen and (max-width:820px) {
	html.pc .s2{--s2gap:20px;}
	html.pc .s2 .swiper .txtBx .right{font-size: 16px; margin-right: -4em;}
	html.pc .s2 .swiper .txtBx .vertical{font-size: 12px;}
}
@media screen and (max-width:500px) {}
@media screen and (max-width:320px) {}


/* 세로가 길경우 */
@media (orientation: Portrait){
	.s2[active='1'] .dummyBx.top{transform: var(--s2top); opacity: 0.5;}
	.s2[active='1'] .swiper.n1{}
	.s2[active='1'] .swiper.n2{transform: var(--s2bottom); opacity: 0.5;}
	.s2[active='1'] .swiper.n3{transform: var(--s2bottom); opacity: 0.5;}
	.s2[active='1'] .dummyBx.bottom{transform: var(--s2bottom); opacity: 0.5;}

	.s2[active='2'] .dummyBx.top{transform: var(--s2top); opacity: 0.5;}
	.s2[active='2'] .swiper.n1{transform: var(--s2top); opacity: 0.5;}
	.s2[active='2'] .swiper.n2{}
	.s2[active='2'] .swiper.n3{transform: var(--s2bottom); opacity: 0.5;}
	.s2[active='2'] .dummyBx.bottom{transform: var(--s2bottom); opacity: 0.5;}

	.s2[active='3'] .dummyBx.top{transform: var(--s2top); opacity: 0.5;}
	.s2[active='3'] .swiper.n1{transform: var(--s2top); opacity: 0.5;}
	.s2[active='3'] .swiper.n2{transform: var(--s2top); opacity: 0.5;}
	.s2[active='3'] .swiper.n3{}
	.s2[active='3'] .dummyBx.bottom{transform: var(--s2bottom); opacity: 0.5;}
}




/* 모바일 */
html.mo .s2{height: auto; --s2gap:120px;}
html.mo .s2 .cont{
	transform: unset; position: relative;
	width: 90%; max-width: 1600px; margin: 0 auto; padding: 180px 0;
}
html.mo .s2 .con{width: auto;}
html.mo .s2 .dummyBx.top{position: absolute; display: none;}
html.mo .s2 .dummyBx.bottom{display: none;}


html.mo .s2 .swiper{width: 800px; overflow: visible; margin: 0;}
html.mo .s2 .swiper .swiper-slide{opacity: 1;}

html.mo .s2 .swiper .txtBx{white-space: nowrap; width: fit-content; margin-bottom: 60px;}
html.mo .s2 .swiper .txtBx > *{position: unset;}
html.mo .s2 .swiper .txtBx ._tit{transform: unset; margin-bottom: 40px;}
html.mo .s2 .swiper .txtBx .right{margin-right: unset; transition-duration: 1.5s; transition-delay: 0.5s;}
html.mo .s2 .swiper .txtBx .vertical{
	writing-mode: unset;
	margin-left: unset; margin-bottom: 20px; transform: translateY(40px); transition-duration: 1.5s; transition-delay: 0.5s;
}
html.mo .s2 .swiper.on .txtBx .vertical{transform: translateY(0);}

html.mo .s2 .swiper .txtBx ._tit > small{transition-duration: 1.5s;}
html.mo .s2 .swiper .txtBx ._tit .mid p{transition-duration: 1.5s;}
html.mo .s2 .swiper .txtBx ._tit ._btnBx{transition: transform 1.5s, opacity 1.5s, background-color 1s, color 1s;}


html.mo .s2 .swiper .swiper-slide ._imgBx{opacity: 1;}
html.mo .s2 .swiper.on .swiper-slide-active ._imgBx{transform: unset;}

@media screen and (max-width:1600px) {
	html.mo .s2 .swiper{width: max(calc(700/1600*100vw),400px)}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	html.mo .s2 .swiper{width: max(calc(400/820*100vw),280px)}
}
@media screen and (max-width:500px) {
	html.mo .s2{--s2gap:calc(140/500*100vw)}
	html.mo .s2 .cont{padding: calc(160/500*100vw) 0;}

	html.mo .s2 .swiper{width: 91.42%;}
	html.mo .s2 .swiper .txtBx{margin-bottom: 40px; position: relative; width: 90vw;}
	html.mo .s2 .swiper .txtBx .right{font-size: 16px;}
	html.mo .s2 .swiper .txtBx .vertical{
		font-size: 15px; writing-mode: vertical-rl;
		position: absolute; top: unset; bottom: 0; margin-bottom: 0; left: unset; right: 0;
	}
}
@media screen and (max-width:320px) {
	html.mo .s2 .swiper{width: 100%;}
}




/* -------- s3 -------- */
.s3{
	height: 100vh; padding-top: var(--headerHeight); box-sizing: border-box; position: relative;
	overflow: hidden; margin-top: -1px;
}
html.mo .s3{
	height: calc((var(--vh,1vh) * 100) + 60px);
}
html.kakaoWeb .s3{
	height: calc((var(--vh,1vh) * 100) + 110px);
}
.s3::before {
	content:''; display: block; position: absolute; left: 0; top: 0;
	width: 100%; height: 100%; background-color: #000; opacity: 0.2;
	background-image: url(/asset/img//main/s3_bg_black.jpg); background-size: cover; background-position: center;
}
.s3 .bg{
	clip-path: circle(0% at 50% 50%);
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}
.s3 .bg img{width: 100%; height: 100%; object-fit: cover;}


.s3 .wrap{
	height: 100%; display: flex; align-items: center;
}
.s3{}
.s3 ._tit{width: 100%; }
.s3 ._tit > small{

}

/* 가운데 */
.s3 ._tit .mid{
	display: flex; align-items: center; white-space: nowrap;
}
.s3 ._tit .mid [class*='type'] > div{line-height: 1.4;}
.s3 ._tit .mid > p{}
.s3 .mid .line{
	height: 3px; width: 100%; background-color: #fff;
	margin: 0 70em; box-sizing: border-box; transform-origin: left center;
}
.s3 .list{
	font-size: 44em; max-height: calc(126/44*1em);
}
.s3 .list ul{
	transition: transform 0.8s;
}
.s3 .list ul li{
	line-height: 1.43; padding-bottom: 1em; opacity: 0;
	transition: opacity 0.8s;
}
.s3 .list ul li p{font-weight: 300;}
.s3 .list ul li b{font-weight: 700;}

.s3 .list ul[txt='1']{transform: translateY(0%);}
.s3 .list ul[txt='2']{transform: translateY(-50%);}

.s3 .list ul[txt='1'] li:nth-child(1){opacity: 1;}
.s3 .list ul[txt='2'] li:nth-child(2){opacity: 1;}


.s3 ._btnBx{
	background-color: #fff; color: #000;
}

/* swiper */
.s3 .swiper{display: none; font-size: 24px; overflow: visible; width: 100%;}
.s3 .swiper-slide{
	line-height: 1.43; text-align: center; opacity: 0.2; transition: opacity 1s,transform 1s; width: auto;  padding: 0 70px;
}
.s3 .swiper-slide-active{opacity: 1; transform: scale(1.4);}
.s3 .swiper-slide p{font-weight: 300;}
.s3 .swiper-slide b{font-weight: 700;}


@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	.s3 .mid .line{margin: 0 30px;}
}
@media screen and (max-width:1024px) {
	/* .s3{height: auto !important; padding: 160px 0;} */
	/* .s3 .wrap{display: flex; flex-direction: column;} */
	/* .s3 ._tit{margin-bottom: 120px; text-align: center;} */
	/* .s3 ._tit .mid{justify-content: center;} */
}
@media screen and (max-width:820px) {
	.s3 .wrap{flex-direction: column; justify-content: center;}
	.s3 ._tit{text-align: center; margin-bottom: 90px;}
	.s3 ._tit .mid{justify-content: center;}
	.s3 .list{font-size: max(calc(32/820*100vw),24px); text-align: center;}

}
@media screen and (max-width:500px) {
	.s3{padding: calc(160/500*100vw) 0;}
	.s3::before {background-image: url(/asset/img//main/s3_bg_black_mob.jpg);}
	.s3 ._tit{margin-bottom: 80px;}

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




/* -------- s4 -------- */
.s4{
	background-color: #fff; color: #000; padding-top: 216px; padding-bottom: 186px;
	display: flex; overflow: hidden;
}
.s4 .wrap{
	display: flex;
}
.s4 ._tit{white-space: nowrap; margin-right: 62px;}
.s4 ._tit > small{color: rgba(0,0,0,0.65);}
.s4 ._tit a{background-color: #000; color: #fff;}
.s4 ._tit .mid{line-height: 1.466;}

/* 슬라이드 */
.s4 .slideBx{
	padding-top: 240px; overflow: hidden;
	min-width: 100vw;
}
.s4 .slideBx h5{
	font-family: 'Poppins'; font-size: 36px; font-weight: 600; margin-bottom: calc(30/36*1em);
	display: flex; align-items: center; gap: max(calc(13/36*1em),10px); position: relative;
	transition: top 0.5s; top: 0;
}
.s4 .slideBx h5::before {
	content:''; display: block; width: max(calc(11/36*1em),6px); height: max(calc(11/36*1em),6px);
	border-radius: 50%; background-color: var(--blue);
}
.s4 .slideBx h5.on{top: -70px;}
.s4 .swiper{width: 327px; overflow: visible; margin: 0;}
.s4 .swiper-wrapper{}
.s4 .swiper-slide{}
.s4 .swiper-slide a{cursor: none;}
.s4 .swiper-slide ._imgBx{overflow: hidden;}
.s4 .swiper-slide ._imgBx::before {padding-bottom: calc(442/327*100%);}
.s4 .swiper-slide ._imgBx img{transition: transform 1.2s;}

html.pc .s4 .swiper-slide a:hover ._imgBx img{transform: scale(1.2);}

.s4 .swiper-slide .txtBx{
	font-size: 24px; margin-top: calc(20/24*1em);
}
.s4 .swiper-slide .txtBx strong{
	font-weight: 700; line-height: 1.458;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin-bottom: calc(12/24*1em);
}
.s4 .swiper-slide .txtBx p{
	font-size: max(calc(17/24*1em),14px);
	line-height: 1.47; color: #4f4f51;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* 효과 */
/* .swiper-slide{opacity: 0; pointer-events: none; transition: opacity 1s,transform 0.5s;}
.swiper-slide-active{opacity: 1; pointer-events: auto;}
.swiper-slide-active + div{opacity: 1; pointer-events: auto;}
.swiper-slide-active + div + div{opacity: 1; pointer-events: auto;} */

.s4 .swiper-slide{transition: transform 0.5s;}
html.pc .s4 .swiper-slide:hover{transform: translateY(-70px);}


@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
	.s4 .wrap{flex-direction: column;}
	.s4 .slideBx{padding-top: 100px; min-width: unset; overflow: visible;}
	.s4 .swiper{width: max(calc(327/1440*100vw),300px);}
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s4 .swiper{width: max(calc(300/1024*100vw),200px);}
	.s4 .swiper-slide .txtBx{font-size: 20px;}
}
@media screen and (max-width:820px) {
	.s4{padding: 160px 0;}
	.s4 .swiper{width: max(calc(300/820*100vw),200px);}
	.s4 .swiper-slide .txtBx{font-size: 16px; padding-left: 4px; box-sizing: border-box;}
}
@media screen and (max-width:500px) {
	.s4{padding: calc(160/500*100vw) 0;}
	.s4 .slideBx{padding-top: 80px;}
	.s4 .slideBx h5{font-size: 28px;}
	.s4 .swiper{width: 78.57%;}
	.s4 .swiper-slide .txtBx{font-size: 15px;}
}
@media screen and (max-width:320px) {}




/* -------- s5 -------- */
.s5{
	padding-top: 157px; padding-bottom: 146px;
	background-image: url(/asset/img/main/s5_bg.jpg);
	background-size: 100% cover;
	background-position: center 0%;
	position: relative;
}
.s5::before {
	content:''; display: block; position: absolute;
	left: 0; top: 0; width: 100%; height: 100%;
	background-color: #000; opacity: 0.47;
}
.s5 ._tit{
	text-align: center; position: relative;
}
.s5 ._tit > small{color: #fff; font-weight: 400; padding-left: 0;}
.s5 ._tit a{background-color: #fff; color: #000;}
.s5 ._tit .mid{line-height: 1.352;}


@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s5{padding: calc(140/1024*100vw) 0;}
}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	.s5{padding-bottom: calc(194/480*100vw); padding-top: calc(170/480*100vw);}
}
@media screen and (max-width:320px) {}