html { overflow: hidden; }
section { overflow: hidden; }
main { overflow: hidden; }

.s1{}
.s2{}
.s3{}
.s4{}
.s5{}
.s6{}
.s7{}
.s8{}

/* s1 */
.s1 {position: relative; background-color: #e0e0e0;}
.s1 .wrap {min-height: var(--vh100); position: relative;display: flex; align-items: center; justify-content: center; }
.s1 .txtBx {position: absolute; }
.s1 .txtBx h1 {color: #000; font-size: calc(220/1920*100vw); text-align: center;white-space: nowrap; font-weight: 600; letter-spacing: -0.04em; line-height: 1.6;}
.s1 .txtBx h2 {color: #000; letter-spacing: -0.045em;font-size: 80px; font-weight: 700; line-height: calc(120/80); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; line-height: 1.3;}
.s1 .scroll_ico {
	display: flex; flex-direction: column; align-items: center; justify-content: center;font-size: 20px;border: 1px solid rgba(0,0,0,0.4); box-sizing: border-box;border-radius: 100px;width: calc(34/20*1em); height: calc(67/20*1em);position: absolute; bottom: 100px; animation: floating20 forwards infinite 3s;
	transition-property: background-color,color,border-color; transition-duration: 0.8s; cursor: pointer;
}
html.pc .s1 .scroll_ico:hover{background-color: #444; color: #fff; border-color: transparent;}
.s1 .scroll_ico i { animation: opacity forwards infinite 2s; }
.s1 .scroll_ico i:nth-child(2) { margin: -0.4em 0; animation-delay: 0.1s; }
.s1 .scroll_ico i:nth-child(3) { animation-delay: 0.2s; }


/* 주변 오브제 */
.s1 .objBx{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
}

.s1 .puzzleBg {position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.s1 .puzzleBg div { position: absolute; width: 100%; height: 100%; }
.s1 .puzzleBg .bg { opacity: 0.05; filter: invert(1); }
.s1 .puzzleBg .gradiant { }
.s1 .puzzleBg .gradiant > div { }
.s1 .puzzleBg .gradiant > div > div {background: radial-gradient(circle calc(400 / 1920 * 100vw), #e6e6e600 60%, #e6e6e6 100%);width: 200%; height: 200%; position: relative; left: -50%; top: -50%; }

.s1 .blurBx {position: absolute;display: flex; align-items: center; justify-content: center; }
.s1 .blurBx > div { position: absolute; display: flex; align-items: center; justify-content: center; }
.s1 .blurBx img { max-width: unset; }
.s1 .blurBx .purple img { width: calc(900/1920*100vw); }
.s1 .blurBx .blue img { width: calc(600/1920*100vw); }

.s1 .circle { position: absolute; }
.s1 .circle div { }
.s1 .circle img { max-width: unset; }
.s1 .circle.n1 img { width: calc(1130/1920*100vw); }
.s1 .circle.n2 img { width: calc(1650/1920*100vw); opacity: 0.5; }

.s1 .dotBx {position: absolute;width: calc(1980/1920*100vw);display: flex; align-items: center; justify-content: center; }
.s1 .dotBx * { width: 100%; }
.s1 .dot { position: absolute; }
.s1 .dot div { }
.s1 .dot img { max-width: unset; }

/* 두둥실떠오르는거 조절 */
.s1 .blurBx { margin-top: 25px; }
.s1 .blurBx .n1 div { animation: floating50 forwards infinite 5s; }
.s1 .blurBx .n2 div { animation: floating50 forwards infinite 5s 0.2s; }
.s1 .blurBx .n3 div { animation: floating50 forwards infinite 5s 0.4s; }
/* .s1 .blurBx.n4 div { animation: floating50 forwards infinite 5s 0.6s; } */
.s1 .blurBx .n1 img { animation: scale80 forwards infinite 7s; }
.s1 .blurBx .n2 img { animation: scale80 forwards infinite 7s 0.1s; }
.s1 .blurBx .n3 img { animation: scale80 forwards infinite 7s 0.2s; }
/* .s1 .blurBx.n4 img { animation: scale80 forwards infinite 7s 0.3s; } */

.s1 .circle { margin-top: 35px; }
.s1 .circle.n1 div { animation: floating70 forwards infinite 5s 0.6s; }
.s1 .circle.n1 img { animation: scale90 forwards infinite 7s 0.6s; }
.s1 .circle.n2 div { animation: floating70 forwards infinite 5s 1s; }
.s1 .circle.n2 img { animation: scale90 forwards infinite 7s 1s; }

.s1 .puzzleBg .gragiant { margin-top: 35px; }
.s1 .puzzleBg .gragiant > div { animation: floating70 forwards infinite 5s 0.6s; }
.s1 .puzzleBg .gragiant > div > div { animation: scale90 forwards infinite 7s 0.6s; }

.s1 .dotBx { margin-top: 35px; }
.s1 .dot > div { animation: floating70 forwards infinite 5s 1s; }
.s1 .dot > div > div { animation: rotate forwards infinite linear; }
.s1 .dot img { animation: scale90 forwards infinite 7s; }

.s1 .dot.n1 img { animation-delay: 1.4s; }
.s1 .dot.n2 img { animation-delay: 1.1s; }
.s1 .dot.n3 img { animation-delay: 0.8s; }
.s1 .dot.n4 img { animation-delay: 0.5s; }

.s1 .dot.n1 > div > div { animation-delay: 0s; animation-duration: 40s; }
.s1 .dot.n2 > div > div { animation-delay: 0.2s; animation-duration: 36s; }
.s1 .dot.n3 > div > div { animation-delay: 0.4s; animation-duration: 32s; }
.s1 .dot.n4 > div > div { animation-delay: 0.5s; animation-duration: 28s; }

/* z 인덱스 */
.s1 .txtBx { z-index: 4; }
.s1 .scroll_ico { z-index: 4; }
.s1 .puzzleBg { z-index: 0; }
.s1 .blurBx { z-index: 1; will-change: transform; }
.s1 .circle.n1 { z-index: 2; will-change: transform; }
.s1 .circle.n2 { z-index: 2; will-change: transform; }
.s1 .dotBx { z-index: 3; will-change: transform; }

/* 마우스 빠졌을때 */
.s1.mouseLeave .blurBx { transition: transform 1.5s; }
.s1.mouseLeave .circle.n1 { transition: transform 1.5s; }
.s1.mouseLeave .circle.n2 { transition: transform 1.5s; }
.s1.mouseLeave .dotBx { transition: transform 1.5s; }



/* 처음 모션 */
.s1{pointer-events: none; transition: pointer-events 0s 4s;}
.s1.on{pointer-events: auto;}

/* h1은 gsap 모션 */
.s1 .txtBx h1 {opacity: 0; transform: translateX(30%); transition: font-size 0.8s, color 0.8s; will-change: font-size,color;}
.s1.on .txtBx h1 {font-size: 30px; color: rgba(0,0,0,0.5); }

.s1 .txtBx h2 {height: 0; overflow: hidden; transition: height 0.8s 0.8s; will-change: height;}
.s1.on .txtBx h2 {height: calc(280/80*1em);}

.s1 .scroll_ico {opacity: 0; margin-bottom: -60px; transition: opacity 0.8s 1.6s,margin-top 0.8s 1.6s; will-change: opacity,margin-top;}
.s1.on .scroll_ico {opacity: 1; margin-bottom: 0; }

.s1 .objBx{transform: scale(1.6); transition: transform 1.4s; will-change: transform;}
.s1.on .objBx{transform: scale(1);}



@media screen and (max-width:1600px) {
	.s1 .txtBx h2 { font-size: calc(80/1600*100vw); }

	.s1 .scroll_ico{border-color: rgba(0,0,0,0.3); color: rgba(0,0,0,0.4);}
}
@media screen and (max-width:1440px) { }
@media screen and (max-width:1280px) { }
@media screen and (max-width:1024px) {
	.s1.on .txtBx h1 { font-size: max(calc(30/1024*100vw),14px); }
}
@media screen and (max-width:820px) {
	.s1 .puzzleBg .gradiant > div > div { background: radial-gradient(circle calc(270 / 820 * 100vw), #e6e6e600 60%, #e6e6e6 100%); }
	.s1 .blurBx .purple img { width: calc(800/820*100vw); }
	.s1 .blurBx .blue img { width: calc(500/820*100vw); }
	.s1 .circle.n1 img { width: calc(740/820*100vw); }
	.s1 .circle.n2 img { width: calc(1020/820*100vw); }
	.s1 .dotBx { width: calc(1160/820*100vw); }
}
@media screen and (max-width:500px) {
	.s1 .puzzleBg .gradiant > div > div { background: radial-gradient(circle calc(370 / 820 * 100vw), #e6e6e600 60%, #e6e6e6 100%); }
	.s1 .blurBx .purple img { width: calc(700/820*100vw); }
	.s1 .blurBx .blue img { width: calc(400/820*100vw); }
	.s1 .circle.n1 img { width: calc(940/820*100vw); }
	.s1 .circle.n2 img { width: calc(1320/820*100vw); }
	.s1 .dotBx { width: calc(1530/820*100vw); }

	.s1 .objBx{transform: scale(1);}

	/* 두둥실떠오르는거 조절 */
	.s1 .blurBx { margin-top: 10px; width: 100%; height: 100%;}

	.s1 .blurBx .n1 div { animation: floating20 forwards infinite 5s; }
	.s1 .blurBx .n2 div { animation: floating20 forwards infinite 5s 0.2s; }
	.s1 .blurBx .n3 div { animation: floating20 forwards infinite 5s 0.4s; }

	.s1 .circle { margin-top: 15px; }
	.s1 .circle.n1 div { animation: floating30 forwards infinite 5s 0.6s; }
	.s1 .circle.n2 div { animation: floating30 forwards infinite 5s 1s; }

	.s1 .puzzleBg .gradiant { margin-top: 15px; }
	.s1 .puzzleBg .gradiant > div { animation: floating30 forwards infinite 5s 0.6s; }

	.s1 .dotBx { margin-top: 15px; }
	.s1 .dot > div { animation: floating30 forwards infinite 5s 1s; }


	.s1 .txtBx h1 { font-size: max(calc(20/500*100vw),12px); opacity: 1; color: rgba(0,0,0,0.5); transition: unset; }
	.s1 .txtBx h2 { height: auto; margin-top: 1em; font-size: calc(38/500*100vw); transition: unset; }
	.s1 .scroll_ico { transition: unset; bottom: 140px; font-size: 18px;}

	.s1 .txtBx h1 { opacity: 0; transform: translateY(40px); }
	.s1 .txtBx h2 { opacity: 0; transform: translateY(40px); }
}
@media screen and (max-width:320px) { }










/* s2 */
.s2 { background-color: #0d0d0e; background-color: #000; position: relative; z-index: -1; }
.s2 .pinBx {width: 100%; height: var(--vh100); position: relative;filter: blur(0px) brightness(1); }
.mo .s2 .pinBx{height: calc(var(--vh100) + 60px);}
.safariWeb .s2 .pinBx{height: calc(var(--vh100) + 110px);}
.s2 .wrap {height: 100%;display: flex; align-items: center; position: relative; }
.s2 .txtBx { color: #fff; position: absolute; z-index: 2; }
.s2 .txtBx.n1 { position: unset; }
.s2 .txtBx h3 {font-size: 125px; font-weight: 500; letter-spacing: -0.04em;margin-bottom: calc(60/105*1em); margin-left: -0.1em; overflow: hidden; }
.s2 .txtBx .mid {margin-bottom: 10px; overflow: hidden; }
.s2 .txtBx .mid > div { display: flex; align-items: center; gap: 10px; }
.s2 .txtBx .mid > div .dot {display: flex; gap: 8px; }
.s2 .txtBx .mid > div .dot div {width: 4px; height: 4px; animation: opacity025 2s forwards infinite;background-color: #fff; }
.s2 .txtBx .mid > div .dot div:nth-child(2) { animation-delay: 0.1s; }
.s2 .txtBx .mid > div .dot div:nth-child(3) { animation-delay: 0.2s; }
.s2 .txtBx .mid > div .num {font-weight: 500; letter-spacing: -0.045em; color: #9692ee; overflow: hidden; }
.s2 .txtBx .txt {font-size: 20px; font-weight: 300; line-height: 2;letter-spacing: -0.04em; }
.s2 .txtBx .txt div { overflow: hidden; }
.s2 .txtBx .txt div p { }

.s2 .canvasBx {position: absolute; left: 0; top: 50%; transform: translateY(-50%);width: 100%; }
.s2 .canvasBx::before {content:''; display: block; padding-bottom: calc(1080/1920*100%); }
.s2 canvas {position: absolute; left: 0; top: 0;width: 100%; height: 100%; object-fit: cover; }


/* 효과 */
.s2 .txtBx h3 p { transition: transform 0.8s; }
.s2 .txtBx .txt div p { transition: transform 0.8s; }
.s2 .txtBx .mid > div { transition: transform 0.8s; }
/* .s2 .txtBx .mid .num p { transition: transform 0.8s; } */

.s2 .txtBx h3 p { transform: translateY(110%); }
.s2 .txtBx .txt div p { transform: translateY(110%); }
.s2 .txtBx .mid > div { transform: translateY(110%); }
/* .s2 .txtBx .mid .num p { transform: translateY(110%); } */

.s2 .txtBx.on h3 p { transform: translateY(0); }
.s2 .txtBx.on .txt div p { transform: translateY(0); }
.s2 .txtBx.on .mid > div { transform: translateY(0); }
/* .s2 .txtBx.on .mid .num p { transform: translateY(0); } */


@media screen and (max-width:1600px) { }
@media screen and (max-width:1440px) {
	.s2 .txtBx h3 { font-size: max(calc(105/1440*100vw),40px); }
}
@media screen and (max-width:1280px) { }
@media screen and (max-width:1024px) {.s2 .txtBx .txt { font-size: 18px; }
}
@media screen and (max-width:820px) {
	.s2 .txtBx .txt { font-size: 14px; }
}
@media screen and (max-width:500px) {
	.s2 .txtBx .txt { font-size: 12px; }
}
@media screen and (max-width:320px) { }

/* 세로가 길경우 */
@media (orientation: Portrait) and (max-width:500px) {
	.s2 .canvasBx { height: 100%; }
}






/* s3 */

/* s3 다시 복구 하면 main.js 도 수정해야함  .s2 .pinBx" 이거 블러 처리 되는거 268번째줄 */
.s3 { background-color: #0d0d0e; margin-top: calc(var(--vh100) * -1); display: none !important;}
.s3 .wrap { padding: 80px 0; }
.s3 .wrap .videoBx {border-radius: 28px; border: 1px solid #565656; box-sizing: border-box;position: relative; overflow: hidden; }
.s3 .wrap .videoBx::before {content:''; display: block; padding-bottom: calc(9/16*100%); }
.s3 .wrap .videoBx > * { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.s3 .wrap .videoBx .cover {background-color: rgba(0,0,0,0.4); cursor: pointer;display: flex; align-items: center; justify-content: center; }
.s3 .wrap .videoBx .cover .ico { filter: brightness(0) invert(1); transition: filter 0.5s; }
html.pc .s3 .wrap .videoBx .cover .ico:hover { filter: brightness(1) invert(0); }
.s3 .wrap .videoBx .cover .ico img {  }
.s3 .wrap .videoBx .cover .ico img:nth-child(1) { position: absolute; }
.s3 .wrap .videoBx .cover .ico img:nth-child(2) { animation: rotate forwards infinite 10s linear; }

@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 .wrap .videoBx { border-radius: 10px; }
	.s3 .wrap .videoBx .cover .ico { width: 100px; }
}
@media screen and (max-width:820px) { }
@media screen and (max-width:500px) {
	.s3 .wrap { padding: 30px 0; }
	.s3 .wrap .videoBx { border-radius: 6px; }
	.s3 .wrap .videoBx .cover .ico { width: 80px; }
}
@media screen and (max-width:320px) { }







/* s4 */
.s4 { background-color: #0d0d0e; margin-top: -1px; margin-top: calc(var(--vh100) * -1);}
.s4 .wrap { padding: 160px 0; }
.s4 .wrap ._title{color: #fff;}
.s4 .wrap ._title h3 > div{display: block;}
.s4 .cont {display: flex; gap: 30px; }
.s4 .cont > div {display: flex; gap: 30px; flex-wrap: wrap;flex: 1; }
.s4 .cont .left { }
.s4 .cont .box {position: relative;width: calc(50% - 15px);border-radius: 14px; overflow: hidden; }
.s4 .cont .box::before {content:''; display: block; padding-bottom: calc(475/332*100%); }
.s4 .cont .box.full { width: 100%; }
.s4 .cont .box.full::before { padding-bottom: calc(356/695*100%); }
.s4 .cont .box .bg {position: absolute; left: 0; top: 0;width: 100%; height: 100%; background-size: cover; background-position: center; filter: brightness(0.5);}
.s4 .cont .box .gradiant {position: absolute; left: 0; top: 0;width: 200%; height: 100%;background: linear-gradient(90deg,rgba(0, 159, 227, 1) -100%, rgba(59, 6, 148, 1) 50%,rgba(255,255,255, 0) 100%);transform: translateX(-100%); }
.s4 .cont .box .gradiant.vertical {width: 100%; height: 200%;background: linear-gradient(180deg,rgba(0, 159, 227, 1) -100%, rgba(59, 6, 148, 1) 50%,rgba(255,255,255, 0) 100%);transform: translateY(-100%); }

.s4 .cont .box .txtBx {color: #fff; position: absolute; z-index: 3; left: 0; top: 0;width: 100%; height: 100%;display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;padding: 36px 40px; box-sizing: border-box; }
.s4 .cont .box .txtBx h3 {display: flex; flex-direction: column; align-items: flex-start;line-height: 1.3; }
.s4 .cont .box .txtBx h3 small {display: block; margin-bottom: 4px;font-size: 17px; font-weight: 500; letter-spacing: -0.045em; }
.s4 .cont .box .txtBx h3 em {font-size: 26px; font-weight: 700; letter-spacing: -0.04em;text-transform: uppercase; }
.s4 .cont .box .txtBx p {font-size: 20px; font-weight: 500; letter-spacing: -0.045em;line-height: 1.4; }

/* 호버 */
.s4 .cont .box .gradiant { transition: transform 1s; }
html.pc .s4 .cont .box:hover .gradiant { transform: translateX(0); }
html.pc .s4 .cont .box:hover .gradiant.vertical { transform: translateY(0); }
.s4 .cont .box .txtBx p{transition: opacity 0.8s 0.3s,transform 0.8s 0.3s;}
html.pc .s4 .cont .box .txtBx p{opacity: 0; transform: translateY(30px);}
html.pc .s4 .cont .box:hover .txtBx p{opacity: 1; transform: translateY(0);}

@media screen and (max-width:1600px) {
	.s4 .cont { gap: 20px; }
	.s4 .cont > div { gap: 20px; }
	.s4 .cont .box { width: calc(50% - 10px); }
	.s4 .cont .box .bg { filter: brightness(0.5); }
	.s4 .cont .box .txtBx { padding: 30px 20px; }
	.s4 .cont .box .txtBx h3 small { font-size: 14px; }
	.s4 .cont .box .txtBx h3 em { font-size: 22px; }
	.s4 .cont .box .txtBx p { font-size: 18px; max-width: calc(300/18*1em); color: rgba(255,255,255,0.6); }
	.s4 .cont .box .txtBx p br { display: none; }
}
@media screen and (max-width:1440px) { }
@media screen and (max-width:1280px) {
	.s4 .cont .box .txtBx h3 small { font-size: 12px; }
	.s4 .cont .box .txtBx h3 em { font-size: 20px; }
	.s4 .cont .box .txtBx p { font-size: 16px; }
}
@media screen and (max-width:1024px) {.s4 .wrap { padding: 120px 0; }
	.s4 .cont { gap: 10px; }
	.s4 .cont > div { gap: 10px; }
	.s4 .cont .box { width: calc(50% - 5px); }
	.s4 .cont .box { border-radius: 10px; }
	.s4 .cont .box .txtBx { padding: 20px 14px; }
	.s4 .cont .box .txtBx p { font-size: max(calc(14/1024*100vw),12px); }
}
@media screen and (max-width:820px) {
	.s4 .cont { flex-direction: column; }
	.s4 .cont > div { flex-direction: column; }
	.s4 .cont .box { width: 100% !important; }
	.s4 .cont .box::before { padding-bottom: max(calc(6/16*100%),260px) !important; }

	.s4 .cont .box .txtBx h3 small { font-size: 16px; }
	.s4 .cont .box .txtBx h3 em { font-size: 24px; }
	.s4 .cont .box .txtBx p { font-size: 16px; font-weight: 400; }
}
@media screen and (max-width:500px) {
	.s4 .wrap { padding: 80px 0; }
	.s4 .cont .box { border-radius: 10px; }
	.s4 .cont .box::before { padding-bottom: max(calc(6/16*100%),200px) !important; }
	.s4 .cont .box .txtBx h3 small { font-size: 12px; }
	.s4 .cont .box .txtBx h3 em { font-size: 18px; }
	.s4 .cont .box .txtBx p { font-size: 14px; }
}
@media screen and (max-width:320px) { }





/* s5, s6 제목 공통 */
._title { margin-bottom: 66px; }
._title small {display: block;font-size: 18px; font-weight: 300; letter-spacing: -0.04em; color: var(--purple);margin-bottom: calc(30/18*1em); }
._title h3 {font-size: 62px; font-weight: 500; letter-spacing: -0.04em; line-height: 1.2;margin-bottom: calc(40/56*1em); }
._title h3 div { overflow: hidden; display: inline-block; }
._title h3 p { }
._title > div {font-size: 20px; font-weight: 600; letter-spacing: -0.045em; line-height: calc(31/18);color: #7d7d7d; }

@media screen and (max-width:1600px) { }
@media screen and (max-width:1440px) { }
@media screen and (max-width:1280px) {
	._title h3 { font-size: max(calc(62/1280*100vw),26px); }
}
@media screen and (max-width:1024px) {
	._title small { font-size: 14px; }
	._title > div { font-size: max(calc(20/1024*100vw),12px); }
}
@media screen and (max-width:820px) {
	._title { margin-bottom: 40px; }
}
@media screen and (max-width:500px) {
	._title small { font-size: 12px; }
}
@media screen and (max-width:320px) { }




/* s5 */
.s5 { padding-top: 190px; padding-bottom: 100px; background-color: #0d0d0e; margin-top: -1px;}
.s5 .wrap { }
.s5 .swiper { }
.s5 .swiper-wrapper { }
.s5 .swiper-slide { }
.s5 .swiper-slide > small {display: block; margin-bottom: 16px; padding-left: 4px; box-sizing: border-box;font-size: 12px; font-weight: 300; letter-spacing: -0.04em; color: #828282; }
.s5 .swiper-slide a {position: relative; display: flex; align-items: center; justify-content: center; }
.s5 .swiper-slide a .txtBx {position: absolute;width: 81.79%; height: 82.56%; color: #fff;border-radius: 11px; overflow: hidden;background-color: rgba(61, 6, 148, 0.7);display: flex; align-items: center; justify-content: center;text-align: center; }
.s5 .swiper-slide a .bg { width: 100%; position: relative; border-radius: 11px; overflow: hidden; }
.s5 .swiper-slide a .bg::before {content:''; display: block; padding-bottom: calc(436/324*100%); }
.s5 .swiper-slide a .bg div {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: center;}
.s5 .swiper-slide a .txtBx h4 { line-height: 1.3; overflow: hidden; }
.s5 .swiper-slide a .txtBx h4 p {font-size: 14px; letter-spacing: -0.04em; margin-bottom: 6px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s5 .swiper-slide a .txtBx h4 em {font-size: 21px; font-weight: 600; letter-spacing: -0.045em;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s5 .swiper-slide a .txtBx .ico {position: absolute; right: 14px; bottom: 14px;width: calc(40/17*1em); height: calc(40/17*1em); border: 1px solid #fff; box-sizing: border-box;display: flex; align-items: center; justify-content: center; color: #fff;font-size: 17px; border-radius: calc(7/17*1em); }
.s5 .swiper-slide a .txtBx .ico i { }

/* 호버 */
.s5 .swiper-slide a { }
.s5 .swiper-slide a .bg div { transition: transform 1.2s; }
.s5 .swiper-slide a .txtBx { transform: scaleY(0); opacity: 0; transition: transform 0.6s,opacity 0.6s; }
html.pc .s5 .swiper-slide a:hover { }
html.pc .s5 .swiper-slide a:hover .bg div { transform: scale(1.3); }
html.pc .s5 .swiper-slide a:hover .txtBx { transform: scaleY(1); opacity: 1; }

/* 모바일 */
html.mo .s5 .swiper-slide a { flex-direction: column; gap: 10px; }
html.mo .s5 .swiper-slide a .txtBx { position: unset; opacity: 1; transform: unset; width: 100%; height: auto; background-color: transparent; color: #000; border-radius: 0; }
html.mo .s5 .swiper-slide a .txtBx .ico { display: none; }




@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: 120px 0; }
	.s5 .swiper-slide > small { margin-bottom: 4px; }
	.s5 .swiper-slide a .txtBx h4 p { font-size: 12px; margin-bottom: 2px; }
	.s5 .swiper-slide a .txtBx h4 em { font-size: 14px; }
}
@media screen and (max-width:820px) { }
@media screen and (max-width:500px) {
	.s5 { padding: 80px 0; }
	.s5 .swiper { overflow: visible; }
	.s5 .swiper-slide a .bg { border-radius: 10px; }
}
@media screen and (max-width:320px) { }




/* s6 */
.s6 {padding-top: 160px; padding-bottom: 100px;background-image: url(/asset/img/main/s6_bg.jpg);background-position: right 80%; background-repeat: no-repeat;overflow: visible; }
.s6 .wrap { position: relative; }
.s6 .wrap .blur {position: absolute;opacity: 0.4; }
.s6 .wrap .blur.purple { left: -44%; top: -40%; }
.s6 .wrap .blur.blue { right: -50%; bottom: 0%; }
.s6 .wrap ._title { position: relative; z-index: 2; }
.s6 .wrap .cont {display: flex; flex-wrap: wrap; gap: 50px;position: relative; z-index: 2; margin-bottom: 80px; }
.s6 .wrap .cont .box {width: calc(100% / 3 - (50px * 2 / 3));display: flex; flex-direction: column; gap: 36px; }
.s6 .wrap .cont .box .imgBx {width: 100%; position: relative; border-radius: 14px; overflow: hidden;display: flex; align-items: center; justify-content: center; }
.s6 .wrap .cont .box .imgBx::before {content:''; display: block; padding-bottom: calc(352/606*100%); }
.s6 .wrap .cont .box .imgBx .gradiant {width: 130%; aspect-ratio: 1/1;position: absolute; background-color: tomato;background: linear-gradient(270deg,rgba(59, 6, 148, 1) 0%, rgba(0, 159, 227, 1) 100%);/* animation: rotate forwards infinite 3s linear; */}
.s6 .wrap .cont .box .imgBx img {position: absolute; z-index: 2; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: cover;border-radius: 14px; }
.s6 .wrap .cont .box .txtBx { padding: 0 10px; padding-right: 20px; box-sizing: border-box; width: 100%;}


.s6 .wrap .cont .box .txtBx .top{
	font-size: 26px; line-height: 1.3;
	display: flex; align-items: center; justify-content: flex-start;
	gap: calc(13/26*1em); margin-bottom: 10px;
}
.s6 .wrap .cont .box .txtBx .top h4{
	font-weight: 700; letter-spacing: -0.04em; transform: translateY(-24%);
}
.s6 .wrap .cont .box .txtBx .top .logo{
	display: flex; align-items: center;
}
.s6 .wrap .cont .box .txtBx .top .logo img{
	height: 1.4em; max-width: calc(240/26*1em); object-fit: contain;
}
.s6 .wrap .cont .box .txtBx .top > div{
	display: flex; align-items: flex-start;
	font-size: max(calc(17/26*1em),12px); letter-spacing: -0.045em;
}
.s6 .wrap .cont .box .txtBx .top > div p{
	display: flex; align-items: center; position: relative;
}
.s6 .wrap .cont .box .txtBx .top > div p:nth-child(1){margin-right: 10px; padding-right: 11px;}
.s6 .wrap .cont .box .txtBx .top > div p:nth-child(1)::after {
	content:''; display: block; width: 2px; height: 1em; background-color: #000;
	position: absolute; right: 0;
}

.s6 .wrap .cont .box .txtBx > p {
	font-size: 18px; letter-spacing: -0.045em; line-height: calc(31/18); color: #7d7d7d;
	max-width: 500px;
}

/* 첫번째 상자 */
.s6 .wrap .cont .box.first {display: flex; flex-direction: row; align-items: center;width: 100%; gap: 90px; }
.s6 .wrap .cont .box.first .imgBx { max-width: 612px; }
.s6 .wrap .cont .box.first .txtBx { }


@media screen and (max-width:1600px) {
	.s6 .wrap .blur img{width: max(calc(1185/1600*100vw),100px);}
	.s6 .wrap .cont{gap: 20px;}
	.s6 .wrap .cont .box{gap: 20px; width: calc(100% / 3 - (20px * 2 / 3));}

}
@media screen and (max-width:1440px) { }
@media screen and (max-width:1280px) {
	.s6 .wrap .cont{gap: 60px 20px;}
	.s6 .wrap .cont .box{width: calc(50% - 10px) !important;}
	.s6 .wrap .cont .box.first{flex-direction: column; gap: 20px;}
}
@media screen and (max-width:1024px) {
	.s6{padding: 120px 0;}

	.s6 .wrap .cont .box .txtBx{padding: 0 4px;}
	.s6 .wrap .cont .box .txtBx .top{font-size: 22px;}
	.s6 .wrap .cont .box .txtBx > p{font-size: 16px;}
}
@media screen and (max-width:820px) {
	.s6 .wrap .cont .box{width: 100% !important;}
	.s6 .wrap .cont .box.first .imgBx{max-width: unset;}
}
@media screen and (max-width:500px) {
	.s6{padding: 80px 0;}
	.s6 .wrap .cont .box .txtBx .top{font-size: 20px; margin-bottom: 10px; flex-direction: column; gap: 14px; align-items: flex-start;}
	.s6 .wrap .cont .box .txtBx .top .logo{font-size: 20px;}
	.s6 .wrap .cont .box .txtBx .top .logo img{max-width: calc(200/26*1em);}
	.s6 .wrap .cont .box .txtBx .top h4{transform: unset;}
	.s6 .wrap .cont .box .txtBx .top > div p:nth-child(1){margin-right: 4px; padding-right: 5px;}
	.s6 .wrap .cont .box .txtBx .top > div p:nth-child(1)::after{opacity: 0.5;}
	.s6 .wrap .cont .box .txtBx > p{font-size: 12px;}

	.s6 .wrap .cont .box .imgBx{border-radius: 10px;}
	.s6 .wrap .cont .box .imgBx img{border-radius: 10px;}
}
@media screen and (max-width:320px) { }






/* s7 */
.s7 { padding: 200px 0; }
.s7 .wrap {display: flex; align-items: center; justify-content: space-between; }
.s7 .title {font-size: 20px; font-weight: 600; letter-spacing: -0.045em;line-height: 1.3; }
.s7 .title h3 {font-size: 53px; font-weight: 700; letter-spacing: -0.04em; }
.s7 .title h3 svg { height: calc(36/53*1em); }
.s7 .title p {margin-top: 20px; margin-bottom: 8px; }
.s7 .title span { color: #7d7d7d; }
.s7 ul {max-width: 730px;font-size: 17px; font-weight: 500; letter-spacing: -0.045em; }
.s7 ul li { position: relative; }
.s7 ul li a {transition: color 0.8s;padding: 34px 90px; box-sizing: border-box;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;position: relative; z-index: 2; }
html.mo .s7 ul li a{border-bottom: 1px solid #ccc; }

/* 호버 */
.s7 ul li .hover {position: absolute;width: 100%; height: 100%; left: 0; top: 0; }
.s7 ul li .hover div { position: absolute; width: 100%; background-color: #000; left: 0; }
.s7 ul li .hover div:nth-child(1) { height: 100%; top: 0; }
.s7 ul li .hover div:nth-child(2) { height: 1px; top: 100%; margin-top: 3px; }
.s7 ul li .hover div:nth-child(3) { height: 2px; top: 100%; margin-top: 7px; }
.s7 ul li .hover div:nth-child(4) { height: 3px; top: 100%; margin-top: 12px; }


.s7 ul li .hover div:not(:nth-child(1)) { opacity: 0; transform: translateY(10px); }
.s7 ul li .hover div:nth-child(1) { transform: scaleY(0); transform-origin: center bottom; }

/* on */
.s7 ul li.on a { color: #fff; }
.s7 ul li .hover div:nth-child(1) { transition: transform 0.8s; }
.s7 ul li.on .hover div:nth-child(1) { transform: scaleY(1); }
.s7 ul li.on .hover div:not(:nth-child(1)) { animation: s7hover forwards infinite 2s; }
.s7 ul li.on .hover div:nth-child(2) { animation-delay: 0.2s; }
.s7 ul li.on .hover div:nth-child(3) { animation-delay: 0.3s; }
.s7 ul li.on .hover div:nth-child(4) { animation-delay: 0.4s; }

@keyframes s7hover {
	0% { opacity: 0; transform: translateY(10px); }
	25% { opacity: 1; transform: translateY(0px); }
	50% { opacity: 0; transform: translateY(0px); }
	75% { opacity: 0; transform: translateY(10px); }
	100% { opacity: 0; transform: translateY(10px); }
}


@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
	.s7 .wrap{flex-direction: column; gap: 40px; align-items: flex-start;}
	.s7 ul{max-width: unset; width: 100%;}
}
@media screen and (max-width:1280px) {
	.s7{padding: 120px 0;}
}
@media screen and (max-width:1024px) {
	.s7 ul{font-size: 16px;}
	.s7 ul li a{padding: 30px;}
}
@media screen and (max-width:820px) {
	.s7 .title{font-size: max(calc(20/820*100vw),14px);}
	.s7 .title h3{font-size: max(calc(53/820*100vw),30px);}
	.s7 ul{font-size: 14px;}
	.s7 ul li .hover div:not(:first-child){display: none;}
}
@media screen and (max-width:500px) {
	.s7{padding: 80px 0;}
	.s7 ul{font-size: 12px;}
	.s7 ul li a{padding: 16px 10px;}
}
@media screen and (max-width:320px) {}





/* s8 */
.s8 {position: relative; padding: 220px 0; margin-top: 100px;}
.s8 .gradiant {position: absolute; left: 0; top:0;width: 100%; height: 362px; z-index: 2;background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 1) 100%); display: none;}
.s8 .bg {position: absolute; left: 0; bottom: 0; z-index: 1;width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; filter: brightness(0.5);}
.s8 .bg div {background-repeat: no-repeat; background-position: center bottom; background-size: cover;height: 100%; }
.s8 .wrap { position: relative; z-index: 3; text-align: center; }
.s8 .wrap .swiper {font-size: 59px; font-weight: 600; letter-spacing: -0.045em;color: #fff; height: 2.5em; overflow: visible; pointer-events: none;}
.s8 .wrap .swiper-slide {display: flex; align-items: center; justify-content: center;opacity: 0; transition: opacity 0.8s; }
.s8 .wrap .swiper-slide-active { opacity: 1; }
.s8 .wrap .swiper-slide-active + div{opacity: 1;}
.s8 .wrap > p {font-size: 17px; font-weight: 600; letter-spacing: -0.045em;color: #fff; line-height: calc(29/17); margin-top: 100px; margin-bottom: 50px; }
.s8 .wrap ._moreBtn { }


@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
	.s8 .gradiant{display: none;}
	.s8 .bg{height: 100%;}
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s8{padding: 120px 0; margin-top: 0;}
	.s8 .wrap .swiper{font-size: 40px;}
	.s8 .wrap > p{font-size: 16px; font-weight: 400; margin-top: 60px; margin-bottom: 30px;}
}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	.s8{padding: 80px 0;}
	.s8 .wrap .swiper{font-size: clamp(20px,calc(40/500*100vw),40px);}
	.s8 .wrap > p{font-size: 14px; max-width: 320px; margin: 0 auto; margin-top: 40px; margin-bottom: 20px;}
	.s8 .wrap > p br{display: none;}
}
@media screen and (max-width:320px) {}