/* ----------- 인트로 ----------- */
:root{
	--vh:1vh;
}
html{overflow: hidden;}

.introArea{
	position: fixed; width: 100%; height: 100%; z-index: 99999;
	background-color: #000; left: 0; top: 0;
	color: var(--yello); pointer-events: none !important;
}
.introArea > div{
	display: flex; align-items: center; justify-content: center; position: relative;
	text-align: center; width: 100%; height: 100%;
}
.introArea .txt01{
	position: absolute;
	font-family: 'DM Sans'; font-size: calc(150/1920*100vw);
	font-weight: 800; letter-spacing: -0.01em;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	line-height: 1.2;
}
.introArea .txt01 div:nth-child(2){margin-top: -0.3em;}
.introArea .txt01 div{overflow: hidden;}
.introArea .txt01 p{transform: translateY(110%);}


.introArea .txt02{
	position: absolute;
	font-size: calc(166/1920*100vw); font-size: calc(100/1920*100vw); letter-spacing: -0.01em; font-weight: 700;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.introArea .txt02 div{overflow: hidden; bottom: calc(-80/100*1em);}
.introArea .txt02 div:nth-child(2){position: absolute;}
.introArea .txt02 p{transform: translateY(110%);}
.introArea .txt02 small{
	transform: translateY(110%);
	font-size:	max( calc(50/166*1em),16px); font-weight: 600; letter-spacing: -0.025em;
}

.introArea .circle{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff;
	clip-path: circle(0% at 50% 50%); color: #000;
	display: flex; align-items: center; justify-content: center;
}
.introArea .circle::before {
	content:''; display: block; padding-bottom: 100%;
}

.introArea .lineCircle{display: flex; align-items: center; justify-content: center; opacity: 0;}
.introArea .lineCircle div{
	position: absolute; width: 0; border: 1px solid rgba(255,255,255,0.5);
	display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.introArea .lineCircle div::before {
	content:''; display: block; padding-bottom: 100%;
}



@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	.introArea .txt01{font-size: calc(56/500*100vw);}
	.introArea .txt02{font-size: calc(48/500*100vw);}
	.introArea .txt02 small{font-size: max(0.45em,14px);}
}
@media screen and (max-width:320px) {}



/* ----------- 마우스 커서 ----------- */
html.cursorShow *{
	cursor: auto;
}
html.cursorHide *{
	cursor: none;
}
._cursor{
	z-index: 99999; position: fixed; top: -100px;
	pointer-events: none !important;
	mix-blend-mode: difference;
}
._cursor > *{
	transition: transform 1s,opacity 1s;
}

/* 원모양 */
._cursor .circle{
	width: 20px; height: 20px; border-radius: 50%;
	background-color: var(--yello);
    background-color: #1d0ea8;
	transform:  translate(-50%,-50%) scale(0);
}
._cursor .circle.on{transform: translate(-50%,-50%) scale(1);}
._cursor.circle.big{transform: translate(-50%,-50%) scale(2);}

/* 네모 모양 */
._cursor .scrollDown {
	background-color: #000; position: absolute; left: 14px; top: 30px;
	width: 170px; height: 45px;display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #fff; box-sizing: border-box; border-radius: 8px;  overflow: hidden; opacity: 0;
	animation: floating20 infinite 3s; color: #fff;
}
._cursor .scrollDown.on{opacity: 1;}
._cursor .scrollDown svg {position: relative; width: calc(10/16*1em); fill: #fff;}
._cursor .scrollDown p { position: relative;}

html.mo ._cursor{display: none;}




/* ----------- 공통 ----------- */

/* #smooth-content{will-change: transform;} */
section{overflow: hidden; background-color: #fff;}

._imgBx {position: relative;display: flex; align-items: center; justify-content: center; overflow: hidden;}
._imgBx::before { content:''; display: block; }
._imgBx img {position: absolute; max-width: unset;width: 100%; height: 100%; object-fit: cover; }

footer{margin-top: -1px;}

/* ----------- 시작모션 셋팅 ----------- */
header{opacity: 0; transform: translateY(-60px);}
.s1 .wrap h3 > div p{transform: translateY(110%);}
.s1 .wrap .right .txtBx .top p{transform: translateY(110%);}
.s1 .wrap .right .txtBx .bottom p{transform: translateY(110%);}
.s1 .wrap .right .txtBx .bottom .line{transform: scaleX(0);}
.s1 .objArea{opacity: 0; transform: translateY(80px);}
.s1 .wrap .right .scrollDown div{opacity: 0; transform: translateY(60px);}


/* ----------- s1 ----------- */
.s1 {padding: 200px 0;}
.s1 .wrap {display: flex; align-items: flex-end; justify-content: space-between;margin-bottom: 180px; }
.s1 .wrap h3 {font-size: 68px; letter-spacing: -0.025em; font-weight: 700; line-height: 1.325; }
.s1 .wrap h3 > div {overflow: hidden;}
.s1 .wrap h3 > div > div{}
.s1 .wrap .right { position: relative; padding-bottom: 8px;}
.s1 .wrap .right .txtBx {font-size: 32px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.35; text-align: right;}
.s1 .wrap .right .txtBx > div:nth-child(1) { overflow: hidden; }
.s1 .wrap .right .txtBx div p { }
.s1 .wrap .right .txtBx .bottom{
	font-weight: 700; display: flex; align-items: center; justify-content: flex-end; gap: 0.13em;
}
.s1 .wrap .right .txtBx .bottom div{overflow: hidden;}
.s1 .wrap .right .txtBx .bottom .line{
	width: 3em; height: 2px; background-color: #000; margin: 0 0.3em;
	transform: scaleX(0); transform-origin: left center;
}

.s1 .wrap .right .scrollDown {
	position: absolute; right: 0; bottom: calc(-100/16*1em);
	animation: floating20 infinite 3s;
}
html.pc .s1 .wrap .right .scrollDown{display: none;}
.s1 .wrap .right .scrollDown div::before {
	content:''; display: block; width: 100%; height: 100%;
	position: absolute; left: 0; top: 0;
}
.s1 .wrap .right .scrollDown div { width: calc(170/16*1em); height: calc(45/16*1em);display: flex; align-items: center; justify-content: center; gap: calc(10/16*1em); border: 1px solid #000; box-sizing: border-box; border-radius: calc(8/16*1em);  overflow: hidden;}
.s1 .wrap .right .scrollDown svg {position: relative; width: calc(10/16*1em); }
.s1 .wrap .right .scrollDown p { position: relative;}



.s1 .wrap .right .scrollDown{transition: color 1s;}
.s1 .wrap .right .scrollDown div::before{transition: transform 1s; }
.s1 .wrap .right .scrollDown svg{transition: fill 1s;}
html.pc .s1 .wrap .right .scrollDown:hover{color: #fff;}
html.pc .s1 .wrap .right .scrollDown:hover div::before{transform: scaleX(1);}
html.pc .s1 .wrap .right .scrollDown:hover svg{fill: #fff;}

.s1 .objArea {
	display: flex; align-items: center; justify-content: flex-start; font-size: 1px;
}
.s1 .objArea ul {
	display: flex; align-items: center; justify-content: flex-start; gap: 70em;
	padding-right: 70em;
	animation: marquee infinite linear 30s;
}
.s1 .objArea ul li {width: 382em; height: 382em;display: flex; align-items: center; justify-content: center;
border-radius: 50%; position: relative; }



/* obj01 */
.s1 .objArea ul li.type1 {
	box-sizing: border-box; border-radius: 50%;
}

.s1 .objArea ul li.type1 svg{
	fill: transparent; stroke: #c4c0c0;
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	animation: rotate 5s linear infinite;
}

.s1 .objArea ul li.type1 svg circle {
	stroke-dasharray: 240;
	stroke-dashoffset: 0;
	stroke-width:0.2;
	transform-origin: center;
	animation: dash 5s infinite;
}

@keyframes dash {
	0% {
		stroke-dashoffset: 240;
	}
	50% {
		/* stroke-dashoffset: 46.75; */
		stroke-dashoffset: 30;
		transform:rotate(135deg);
	}
	100% {
		stroke-dashoffset: 240;
		transform:rotate(450deg);
	}
}


.s1 .objArea ul li.type1 .miniCircle {border-radius: 50%;position: relative; display: flex; align-items: center; justify-content: center;width: 50%; height: 50%; }
.s1 .objArea ul li.type1 .miniCircle ._imgBx {
	width: 83em; position: absolute; transform: translate(-50%,-50%);animation-duration: 26s; animation-iteration-count:infinite; animation-timing-function: cubic-bezier(.74,.13,.28,1);
}

.s1 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(1) { animation-name: circleMove1; }
.s1 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(2) { animation-name: circleMove2; }
.s1 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(3) { animation-name: circleMove3; }
.s1 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(4) { animation-name: circleMove4; }
.s1 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(5) { animation-name: circleMove5; }
.s1 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(6) { animation-name: circleMove6; }
.s1 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(7) { animation-name: circleMove7; }
.s1 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(8) { animation-name: circleMove8; }

/* .s1 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(1) { transform: translate(0%,-120%); }
.s1 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(2) { transform: translate(90%,-90%); }
.s1 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(3) { transform: translate(120%,0%); }
.s1 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(4) { transform: translate(90%,90%); }
.s1 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(5) { transform: translate(0%,120%); }
.s1 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(6) { transform: translate(-90%,90%); }
.s1 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(7) { transform: translate(-120%,0%); }
.s1 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(8) { transform: translate(-90%,-90%); } */

@keyframes circleMove1 {
0% { transform: translate(0%, -120%); }
12.5% { transform: translate(90%, -90%); }
25% { transform: translate(120%, 0%); }
37.5% { transform: translate(90%, 90%); }
50% { transform: translate(0%, 120%); }
62.5% { transform: translate(-90%, 90%); }
75% { transform: translate(-120%, 0%); }
87.5% { transform: translate(-90%, -90%); }
100% { transform: translate(0%, -120%); }
}

@keyframes circleMove2 {
0% { transform: translate(90%, -90%); }
12.5% { transform: translate(120%, 0%); }
25% { transform: translate(90%, 90%); }
37.5% { transform: translate(0%, 120%); }
50% { transform: translate(-90%, 90%); }
62.5% { transform: translate(-120%, 0%); }
75% { transform: translate(-90%, -90%); }
87.5% { transform: translate(0%, -120%); }
100% { transform: translate(90%, -90%); }
}

@keyframes circleMove3 {
0% { transform: translate(120%, 0%); }
12.5% { transform: translate(90%, 90%); }
25% { transform: translate(0%, 120%); }
37.5% { transform: translate(-90%, 90%); }
50% { transform: translate(-120%, 0%); }
62.5% { transform: translate(-90%, -90%); }
75% { transform: translate(0%, -120%); }
87.5% { transform: translate(90%, -90%); }
100% { transform: translate(120%, 0%); }
}

@keyframes circleMove4 {
0% { transform: translate(90%, 90%); }
12.5% { transform: translate(0%, 120%); }
25% { transform: translate(-90%, 90%); }
37.5% { transform: translate(-120%, 0%); }
50% { transform: translate(-90%, -90%); }
62.5% { transform: translate(0%, -120%); }
75% { transform: translate(90%, -90%); }
87.5% { transform: translate(120%, 0%); }
100% { transform: translate(90%, 90%); }
}

@keyframes circleMove5 {
0% { transform: translate(0%, 120%); }
12.5% { transform: translate(-90%, 90%); }
25% { transform: translate(-120%, 0%); }
37.5% { transform: translate(-90%, -90%); }
50% { transform: translate(0%, -120%); }
62.5% { transform: translate(90%, -90%); }
75% { transform: translate(120%, 0%); }
87.5% { transform: translate(90%, 90%); }
100% { transform: translate(0%, 120%); }
}

@keyframes circleMove6 {
0% { transform: translate(-90%, 90%); }
12.5% { transform: translate(-120%, 0%); }
25% { transform: translate(-90%, -90%); }
37.5% { transform: translate(0%, -120%); }
50% { transform: translate(90%, -90%); }
62.5% { transform: translate(120%, 0%); }
75% { transform: translate(90%, 90%); }
87.5% { transform: translate(0%, 120%); }
100% { transform: translate(-90%, 90%); }
}

@keyframes circleMove7 {
0% { transform: translate(-120%, 0%); }
12.5% { transform: translate(-90%, -90%); }
25% { transform: translate(0%, -120%); }
37.5% { transform: translate(90%, -90%); }
50% { transform: translate(120%, 0%); }
62.5% { transform: translate(90%, 90%); }
75% { transform: translate(0%, 120%); }
87.5% { transform: translate(-90%, 90%); }
100% { transform: translate(-120%, 0%); }
}

@keyframes circleMove8 {
0% { transform: translate(-90%, -90%); }
12.5% { transform: translate(0%, -120%); }
25% { transform: translate(90%, -90%); }
37.5% { transform: translate(120%, 0%); }
50% { transform: translate(90%, 90%); }
62.5% { transform: translate(0%, 120%); }
75% { transform: translate(-90%, 90%); }
87.5% { transform: translate(-120%, 0%); }
100% { transform: translate(-90%, -90%); }
}


.s1 .objArea ul li.type1 .miniCircle ._imgBx::before { padding-bottom: 100%; }
.s1 .objArea ul li.type1 .miniCircle ._imgBx img { transition: transform .5s; }
html.pc .s1 .objArea ul li.type1 .miniCircle ._imgBx:hover { z-index: 3; }
html.pc .s1 .objArea ul li.type1 .miniCircle ._imgBx:hover img { transform: scale(1.2); }



/* obj02 */
.s1 .objArea ul li.type2 { }
.s1 .objArea ul li.type2 .star {position: absolute; width: 100%; }
.s1 .objArea ul li.type2 .star svg { }
.s1 .objArea ul li.type2 .star.stroke {animation: rotate4 infinite 22s 0.3s reverse cubic-bezier(.74,.13,.28,1); }
.s1 .objArea ul li.type2 .star.stroke svg {transform: rotate(0deg); stroke: var(--yello);fill: transparent; }
.s1 .objArea ul li.type2 .star.fill {display: flex; align-items: center; justify-content: center;animation: rotate4 infinite 22s reverse cubic-bezier(.74,.13,.28,1); }
.s1 .objArea ul li.type2 .star.fill svg {fill: var(--yello); }
.s1 .objArea ul li.type2 .star.fill svg:nth-child(2) { }
.s1 .objArea ul li.type2 .circle {position: absolute;animation: floating40 infinite 4s; }
.s1 .objArea ul li.type2 .circle.blue {left: 25%;top: 28%; }
.s1 .objArea ul li.type2 .circle.gray {right: 30%;bottom: 10%;animation-delay: 1s; }

.s1 .objArea ul li.type2 .circle div { border-radius: 50%; animation: scale120 infinite 2s; }
.s1 .objArea ul li.type2 .circle.blue div {width: 22px;height: 22px;background-color: #4754d2; }
.s1 .objArea ul li.type2 .circle.gray div {width: 12px;height: 12px;background-color: #c4c0c0;animation-delay: 0.4s; }
.s1 .objArea ul li.type2 p {font-size: 24em; font-weight: 600; font-family: 'DM Sans'; letter-spacing: -0.025em;color: #fff; position: relative; }



/* obj03 */
.s1 .objArea ul li.type3 { }
.s1 .objArea ul li.type3 > div {position: absolute; }
.s1 .objArea ul li.type3 svg * { fill: #000; }
.s1 .objArea ul li.type3 .triangle {width: 68em; margin-left: 20em; }
.s1 .objArea ul li.type3 .triangle svg { }
.s1 .objArea ul li.type3 .circleBx {width: 100%; height: 100%;animation: rotate 30s infinite linear; }

.s1 .objArea ul li.type3 .circleBx div {width: 95em; width: 85em; height: 95em; height: 85em; background-color: #000;position: absolute; border-radius: 50%;animation: scale120 infinite 2s; }
.s1 .objArea ul li.type3 .circleBx div:nth-child(1) { left: 53%; top: 0%; }
.s1 .objArea ul li.type3 .circleBx div:nth-child(2) { left: 75%; top: 21.7%; }
.s1 .objArea ul li.type3 .circleBx div:nth-child(3) { left: 75%; top: 53%; }
.s1 .objArea ul li.type3 .circleBx div:nth-child(4) { left: 53%; top: 75%; }
.s1 .objArea ul li.type3 .circleBx div:nth-child(5) { left: 22%; top: 75%; }
.s1 .objArea ul li.type3 .circleBx div:nth-child(6) { left: 0%; top: 53%; }
.s1 .objArea ul li.type3 .circleBx div:nth-child(7) { left: 0%; top: 21.7%; }
.s1 .objArea ul li.type3 .circleBx div:nth-child(8) { left: 22%; top: 0%; }

.s1 .objArea ul li.type3 .circleBx div:nth-child(1) { }
.s1 .objArea ul li.type3 .circleBx div:nth-child(2) { animation-delay: calc(0.1s * 1); }
.s1 .objArea ul li.type3 .circleBx div:nth-child(3) { animation-delay: calc(0.1s * 2); }
.s1 .objArea ul li.type3 .circleBx div:nth-child(4) { animation-delay: calc(0.1s * 3); }
.s1 .objArea ul li.type3 .circleBx div:nth-child(5) { animation-delay: calc(0.1s * 4); }
.s1 .objArea ul li.type3 .circleBx div:nth-child(6) { animation-delay: calc(0.1s * 5); }
.s1 .objArea ul li.type3 .circleBx div:nth-child(7) { animation-delay: calc(0.1s * 6); }
.s1 .objArea ul li.type3 .circleBx div:nth-child(8) { animation-delay: calc(0.1s * 7); }



/* obj04 */
.s1 .objArea ul li.type4 {border: 1px solid var(--purple); }
.s1 .objArea ul li.type4 .circle {border-radius: 50%; }
.s1 .objArea ul li.type4 .circle.blue {width: 93%; height: 93%; background-color: var(--purple);display: flex; align-items: center; justify-content: center;position: relative;left: -3.5%;animation: rotate infinite linear 3s reverse;transform-origin: 54% 50%; }
.s1 .objArea ul li.type4 .circle.blue .white {position: relative;width: 53.37%; height: 53.37%; background-color: #fff; border-radius: 50%;font-size: 24em; letter-spacing: -0.025em; font-family: 'DM Sans'; font-weight: 600;display: flex; align-items: center; justify-content: center;animation: rotate infinite linear 3s; }
.s1 .objArea ul li.type4 .circle.blue .white p { }

.s1 .objArea ul li.type4 .mini {position: absolute;width: 100%; height: 100%;}
.s1 .objArea ul li.type4 .mini.yello { animation: rotate linear 1.5s infinite; }
.s1 .objArea ul li.type4 .mini.gray { animation: rotate linear 5s infinite reverse; }

.s1 .objArea ul li.type4 .yello div {background-color: var(--yello);width: 28px; height: 28px;position: absolute;left: 100%; top: 50%; transform: translateX(-50%); }
.s1 .objArea ul li.type4 .gray div {background-color: #c4c0c0;width: 14px; height: 14px;position: absolute;left: 50%; top: 0%; transform: translateY(-50%); }




@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
	.s1{padding: max(calc(200/1440*100vw),180px) 0;}
	.s1 .wrap{margin-bottom: max(calc(180/1440*100vw),140px);}

	.s1 .wrap .right{padding-bottom: 2px;}
	.s1 .wrap .right .scrollDown{font-size: max(calc(16/1440*100vw),12px);}

	.s1 .objArea{font-size: max(calc(1/1440*100vw),0.5px);}
}
@media screen and (max-width:1280px) {
	.s1 .wrap h3{font-size: max(calc(68/1280*100vw),40px);}
	.s1 .wrap .right .txtBx{font-size: max(calc(32/1280*100vw),18px);}
}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	.s1{
		min-height: calc(var(--vh,1vh) * 100); padding: 0;
		display: flex; align-items: center; justify-content: center; flex-direction: column;
		padding-top: var(--headerHeight); box-sizing: border-box;
	}

	.s1 .wrap{flex-direction: column; align-items: flex-start; margin-bottom: 130px;}
	.s1 .wrap h3{font-size: min(calc(50/500*100vw),40px); margin-bottom: 0.4em;}
	.s1 .wrap .right .txtBx{transform-origin: left top; line-height: 1.5; font-size: min(calc(24/500*100vw),18px); text-align: left;}
	.s1 .wrap .right .txtBx .bottom{justify-content: flex-start;}

	.s1 .wrap .right .scrollDown{right: unset; left: 0; animation: floating10 infinite 3s;}
}
@media screen and (max-width:500px) {
	.s1 .objArea{font-size: 0.4px;}
}
@media screen and (max-width:320px) {}












/* ----------- s2 ----------- */
.s2{padding-top: 100px;}
.s2 .wrap{}
.s2 .wrap h3{
	font-family: 'DM Sans'; font-weight: 500;
	font-size: 90px; letter-spacing: -0.025em; line-height: 1.111;
	margin-bottom: calc(100/90*1em);
}
.s2 .wrap h3 .dot{
	position: absolute;
	left: calc((61/90*1em) / -2); top: 0; animation: floating20 infinite 5s;
}
.s2 .wrap h3 .dot div{}
.s2 .wrap h3 .dot div::before {
	content:''; display: block;
	width: calc(61/90*1em); height: calc(61/90*1em);
	border-radius: 50%; background-color: var(--purple);
	animation: scale80 infinite 10s;
}

.s2 .wrap h3 div{overflow: hidden;}
.s2 .wrap h3 p{}

.s2 .wrap .cont{
	font-size: 1px;
    max-width: 1085em;
    margin-left: auto;
}
.s2 .wrap .cont ul{}
.s2 .wrap .cont ul li{
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
	padding-top: 40em; padding-bottom: 40em; padding-left: 20em; box-sizing: border-box;
	position: relative;
}

.s2 .wrap .cont ul li .line{
	position: absolute; left: 0; width: 100%; height: 1px;
	background-color: rgba(0,0,0,0.2); transform-origin: right center;
}
.s2 .wrap .cont ul li .line.n1{top: 0;}
.s2 .wrap .cont ul li .line.n2{bottom: 0;}

.s2 .wrap .cont ul li .left{
    min-width: 590em;
    position: relative;
}
.s2 .wrap .cont ul li .left em{
	display: block;
	font-family: 'DM Sans'; font-weight: 700;
	font-size: 60em; letter-spacing: -0.025em; line-height: 0.9;
}
.s2 .wrap .cont ul li .left div{
	font-size: 16em;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--yello);
	background-color: #000;
	border-radius: 100px;
	padding: calc(10/16*1em) calc(15/16*1em);
	display: inline-block;
	position: absolute;
	left: 0;
	top: calc(-60/16*1em);

	/* transform: translateY(calc(-100% + 80px)); */
	opacity: 0;
}
.s2 .wrap .cont ul li .left div p{}

.s2 .wrap .cont ul li .right{
	font-size: 22em;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.4;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.s2 .wrap .cont ul li .right p{}
.s2 .wrap .cont ul li .right svg{
	width: calc(26/22*1em); overflow: visible; transform-origin: right center;
}

/* 별도 스타일 */
.s2 .wrap .cont ul li:nth-child(1) .right g{transform-origin: center; animation: rotate infinite 6s linear;}
.s2 .wrap .cont ul li:nth-child(2) .right svg circle:nth-child(2){fill: #fff;}
.s2 .wrap .cont ul li:nth-child(3) .right svg polygon{animation: rotate infinite 6s linear; transform-origin: center;}



/* 호버 */
.s2 .wrap .cont ul li{transition: padding-top .8s; will-change: padding-top;}
html.pc .s2 .wrap .cont ul li:hover{padding-top: 90em;}
/* html.pc .s2 .wrap .cont ul li:nth-child(3):hover{padding-top: 80em;} */

.s2 .wrap .cont ul li .left em{transition: transform .8s; transform-origin: left center; will-change: transform;}
html.pc .s2 .wrap .cont ul li:hover .left em{transform: scale(1.1666);}

.s2 .wrap .cont ul li .left div{transition-property: opacity; transition-duration: .8s;}
html.pc .s2 .wrap .cont ul li:hover .left div{opacity: 1; transition-delay: 0.2s;}

.s2 .wrap .cont ul li .right p{transition: transform .8s,color .8s; transform-origin: left bottom; will-change: transform;}
html.pc .s2 .wrap .cont ul li:hover .right p{transform: scale(1.3636); transform: scale(1.1); color: var(--purple);}

.s2 .wrap .cont ul li .right svg{transition-property: width,fill,transform; transition-duration: .8s;}
html.pc .s2 .wrap .cont ul li:hover .right svg{
	/* width: 84px; */
	transform: scale(3.2);
	fill: var(--yello);
}


@media screen and (max-width:1600px) {
	html.pc .s2 .wrap .cont ul li:hover .left em{transform: unset;}
	html.pc .s2 .wrap .cont ul li:hover .left div{transform: unset; opacity: unset;}
	html.pc .s2 .wrap .cont ul li:hover .right p{transform: unset;}
	html.pc .s2 .wrap .cont ul li:hover .right svg{transform: unset;}


	.s2 .wrap .cont ul li{padding: 30em 0 !important;}
	.s2 .wrap .cont ul li:nth-child(1){padding-top: 0;}
	.s2 .wrap .cont ul li:nth-child(3){padding-bottom: 0;}
	.s2 .wrap .cont ul li .left div{opacity: 1; position: unset; transform: unset; margin-bottom: 0.8em;}
	.s2 .wrap .cont ul li .right svg{width: 2.5em;}
	.s2 .wrap .cont ul li:nth-child(1) .right svg{fill: var(--yello) !important;}
	.s2 .wrap .cont ul li:nth-child(2) .right svg{fill: #000 !important;}
	.s2 .wrap .cont ul li:nth-child(3) .right svg{fill: var(--purple) !important;}
}
@media screen and (max-width:1440px) {
	.s2 .wrap h3{font-size: max(calc(90/1440*100vw),42px); margin-bottom: 1.4em;}
	.s2 .wrap .cont{font-size: 0.8px;}
	.s2 .wrap .cont ul li{padding-left: 0;}
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {

	.s2 .wrap .cont{font-size: calc(0.8/820*100vw);}
	.s2 .wrap .cont ul li .left{min-width: 460em;}
	.s2 .wrap .cont ul li .left em{font-size: 50em;}
	.s2 .wrap .cont ul li .left div{font-size: 20em;}

	.s2 .wrap .cont ul li .right{font-size: 26em;}
}
@media screen and (max-width:500px) {
	.s2 .wrap .cont{font-size: calc(0.7/500*100vw);}
	.s2 .wrap .cont ul li{flex-direction: column; align-items: flex-start; gap: 50em;}
	.s2 .wrap .cont ul li .left div{font-size: max(20em,11px);}
	.s2 .wrap .cont ul li .left em{font-size: max(60em,20px);}
	.s2 .wrap .cont ul li .right{font-size: min(38em,14px);}
}
@media screen and (max-width:320px) {}







/* ----------- s3 ----------- */
.s3{padding-bottom: 140px;}
.s3 .wrap{}
.s3 .wrap h3{
	font-size: 68px; font-size: 52px; font-weight: 700; letter-spacing: -0.015em;
	line-height: 1.3; text-align: center;
	margin-top: max(calc(300/68*1em),min(40vw,200px)); margin-bottom: max(calc(320/68*1em),min(40vw,200px)); position: relative;
	white-space: nowrap;
}
.s3 .wrap h3 em{
	-webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}

.s3 .wrap .cont{}
.s3 .wrap .cont li:not(:last-child){margin-bottom: 110px;}
.s3 .wrap .cont li h4{
	font-family: 'DM Sans'; font-weight: 700; letter-spacing: -0.025em;
	font-size: 60px; display: flex; align-items: center; position: relative;
	margin-bottom: calc(22/60*1em);
}
.s3 .wrap .cont li h4 a:nth-child(2){
	width: 1em; white-space: nowrap;
	display: flex; align-items: center; justify-content: flex-end;
	overflow: hidden; position: absolute; right: 0;
}
.s3 .wrap .cont li h4 a svg{min-width: 100%; padding-left: 0.1em;}

/* 호버 스크립트로 호버시 클래스 추가 */
.s3 .wrap .cont li h4 a svg{transition: fill .2s,transform .8s; fill: #000;}
.s3 .wrap .cont li h4.hover a svg{transform: translateX(100%); fill: var(--purple);}



.s3 .wrap .cont li .swiper{}
.s3 .wrap .cont li .swiper-wrapper{
	display: flex; align-items: flex-start; justify-content: flex-start; gap: 20px;
}
.s3 .wrap .cont li .swiper-slide{
	width: calc((100% / 3) - 10px);
}
.s3 .wrap .cont li .swiper-slide > div{}
.s3 .wrap .cont li .swiper-slide > div ._imgBx{border-radius: 9px;}
.s3 .wrap .cont li .swiper-slide > div ._imgBx::before {padding-bottom: calc(298/533*100%);}
.s3 .wrap .cont li .swiper-slide > div ._imgBx img{transition: transform 1s;}
.s3 .wrap .cont li .swiper-slide > div ._imgBx .blur {display: block;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);position: absolute;top: 0;left: 0; z-index: 1; opacity: 0; transition: opacity 0.5s;}
.s3 .wrap .cont li .swiper-slide > div ._imgBx .blur .play{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); width: 36px; height: 36px;}
.s3 .wrap .cont li .swiper-slide > div ._imgBx .blur .play img{width: 100%;}
@media screen and (min-width: 821px) {
    .s3 .wrap .cont li .swiper-slide > div:hover ._imgBx .blur{opacity: 1;}
}
.s3 .wrap .cont li .swiper-slide > div p{
	font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis;
	margin-top: 17px; transition: color .2s;
}

html.pc .s3 .wrap .cont li .swiper-slide > div:hover ._imgBx img{transform: scale(1.2);}
html.pc .s3 .wrap .cont li .swiper-slide > div:hover p{color: var(--purple);}
html.pc .s3 .wrap .cont li .swiper-slide > div:hover{}


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

}
@media screen and (max-width:1280px) {
	.s3 .wrap h3{font-size: calc(52/1280*100vw);}
	.s3 .wrap .cont li h4{font-size: max(calc(60/1280*100vw),24px);}
}
@media screen and (max-width:1024px) {
	.s3 .wrap .cont li .swiper-wrapper{gap: unset;}
}
@media screen and (max-width:820px) {
	.s3 .wrap .cont li .swiper{overflow: visible;}
}
@media screen and (max-width:500px) {
	.s3{padding-bottom: 30vw;}
	.s3 .wrap h3{font-size: calc(40/500*100vw);}
	.s3 .wrap .cont li:not(:last-child){margin-bottom: 70px;}
	.s3 .wrap .cont li .swiper-slide > div p{font-size: 14px;}
}
@media screen and (max-width:320px) {}




/* ----------- s4 ----------- */
.s4{
	padding-top: 190px; padding-bottom: 360px;
	background-color: #000;
}
.s4 .wrap{}
.s4 .wrap .cont{}

.s4 .wrap .cont h3{text-align: center;}
.s4 .wrap .cont h3 small{
	font-size: 18px; letter-spacing: -0.03em; color: #666666;
	margin-bottom: calc(30/18*1em);
}
.s4 .wrap .cont h3 > div{
	line-height: 1.363; color: #fff;
	font-size: 44px; font-weight: 600;
}
.s4 .wrap .cont h3 b{
	-webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}

.s4 .wrap .cont.n1{}
.s4 .wrap .cont.n1 .con{
	padding-top: 60px; position: relative;

}
.s4 .wrap .cont.n1 .swiper{width: 100%; overflow: visible;}
.s4 .wrap .cont.n1 .swiper-wrapper{
	display: flex; align-items: center; justify-content: center; gap: 20px;
}
.s4 .wrap .cont.n1 .swiper-slide{
	min-width: 340px; width: 340px; height: 550px;
	border-radius: 9px; overflow: hidden; position: relative;
	cursor: pointer; flex-shrink: revert;
}
.s4 .wrap .cont.n1 .swiper-slide .front,
.s4 .wrap .cont.n1 .swiper-slide .back{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	box-sizing: border-box;
}
.s4 .wrap .cont.n1 .swiper-slide .front{
	width: 100%; height: 100%; font-size: 1px;
	padding-top: 74px; padding-bottom: 68px;
	display: flex; flex-direction: column; align-items: center; justify-content: space-between;
}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front{background-color: #fff;}
.s4 .wrap .cont.n1 .swiper-slide.n2 .front{background-color: var(--yello);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front{background-color: var(--purple);}
.s4 .wrap .cont.n1 .swiper-slide .front .txtBx{
	text-align: center;
	font-size: 22em; letter-spacing: -0.025em; line-height: 1.545;
}
.s4 .wrap .cont.n1 .swiper-slide .front .txtBx b{font-weight: 700;}
.s4 .wrap .cont.n1 .swiper-slide .front .txtBx p{font-weight: 500;}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .txtBx{color: #fff;}



.s4 .wrap .cont.n1 .swiper-slide .front .objBx{margin: 0 auto;}

/* 1번 오브젝트 */
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx{
	width: 160em;
	height: 160em;
	position: relative;
	perspective: 2000em;
	transform-style: preserve-3d;
	/* 180 나누기 원 갯수 */
	--s4rotateY:calc(180deg / 12);
	transform-origin: center;
	transform: rotate(30deg) rotateX(40deg) rotateY(0deg);
	animation: circle3d infinite 10s linear;
	will-change: transform;
}

@keyframes circle3d {
	from{transform: rotate(30deg) rotateX(40deg) rotateY(0deg);}
	to{transform: rotate(30deg) rotateX(40deg) rotateY(360deg);}
}

.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div{
	border-radius: 50%; border: 2px solid var(--purple); box-sizing: border-box;
	position: absolute; width: 100%; height: 100%;
	will-change: transform; transform-origin: center;
}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(1){transform: rotateY(calc(var(--s4rotateY) * 1));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(2){transform: rotateY(calc(var(--s4rotateY) * 2));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(3){transform: rotateY(calc(var(--s4rotateY) * 3));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(4){transform: rotateY(calc(var(--s4rotateY) * 4));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(5){transform: rotateY(calc(var(--s4rotateY) * 5));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(6){transform: rotateY(calc(var(--s4rotateY) * 6));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(7){transform: rotateY(calc(var(--s4rotateY) * 7));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(8){transform: rotateY(calc(var(--s4rotateY) * 8));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(9){transform: rotateY(calc(var(--s4rotateY) * 9));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(10){transform: rotateY(calc(var(--s4rotateY) * 10));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(11){transform: rotateY(calc(var(--s4rotateY) * 11));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(12){transform: rotateY(calc(var(--s4rotateY) * 12));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(13){transform: rotateY(calc(var(--s4rotateY) * 13));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(14){transform: rotateY(calc(var(--s4rotateY) * 14));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(15){transform: rotateY(calc(var(--s4rotateY) * 15));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(16){transform: rotateY(calc(var(--s4rotateY) * 16));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(17){transform: rotateY(calc(var(--s4rotateY) * 17));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(18){transform: rotateY(calc(var(--s4rotateY) * 18));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(19){transform: rotateY(calc(var(--s4rotateY) * 19));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(20){transform: rotateY(calc(var(--s4rotateY) * 20));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(21){transform: rotateY(calc(var(--s4rotateY) * 21));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(22){transform: rotateY(calc(var(--s4rotateY) * 22));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(23){transform: rotateY(calc(var(--s4rotateY) * 23));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(24){transform: rotateY(calc(var(--s4rotateY) * 24));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(25){transform: rotateY(calc(var(--s4rotateY) * 25));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(26){transform: rotateY(calc(var(--s4rotateY) * 26));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(27){transform: rotateY(calc(var(--s4rotateY) * 27));}
.s4 .wrap .cont.n1 .swiper-slide.n1 .front .objBx div:nth-child(28){transform: rotateY(calc(var(--s4rotateY) * 28));}



/* 2번 오브젝트 */
.s4 .wrap .cont.n1 .swiper-slide.n2 .front .objBx{
	width: 150em; height: 150em; position: relative;
	--s4cube:110em;
}
.cubeArea{}
.cubeArea .cubeBx{
	perspective: 300em;
	display: flex; align-items: center; justify-content: center;
}
.cubeArea .cube{
	transform-style: preserve-3d;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: var(--s4cube);
	height: var(--s4cube);
	transform: rotateY(-45deg);
	animation: cubespin forwards infinite linear 12s;
}

@keyframes cubespin {
	from{transform: rotateY(0deg);}
	to{transform: rotateY(360deg);}
}

.cubeArea .cube > div{
	position: absolute; width: 100%;
	display: flex; align-items: center; justify-content: center;
	/* backface-visibility: visible; */
	border: 1px solid var(--purple);
	/* background-color: #4754D2; */
	background-color: #4755d238;
}
.cubeArea .cube > div::before{
	content:''; display: block; padding-bottom: 100%;
}

.cubeArea .cube > div:nth-child(1){}
.cubeArea .cube > div:nth-child(2){}
.cubeArea .cube > div:nth-child(3){}
.cubeArea .cube > div:nth-child(4){}

.cubeArea .cube > div:nth-child(1){transform: translate3d(0,0,calc(var(--s4cube) / 2)) rotateY(0deg);}
.cubeArea .cube > div:nth-child(2){transform: translate3d(50%,0,0em) rotateY(90deg);}
.cubeArea .cube > div:nth-child(3){transform: translate3d(0,0,calc(var(--s4cube) / -2)) rotateY(180deg);}
.cubeArea .cube > div:nth-child(4){transform: translate3d(-50%,0,0em) rotateY(90deg);}
.cubeArea .cube > div:nth-child(5){transform: rotateX(90deg); top: calc(var(--s4cube) / 2);}
.cubeArea .cube > div:nth-child(6){transform: rotateX(90deg); top: calc(var(--s4cube) / -2);}

.cubeArea .cube.n2{
	position: absolute; width: calc(var(--s4cube) / 2); height: calc(var(--s4cube) / 2);
}
.cubeArea .cube.n2 > div:nth-child(1){transform: translate3d(0,0,calc(var(--s4cube) / 4)) rotateY(0deg);}
.cubeArea .cube.n2 > div:nth-child(3){transform: translate3d(0,0,calc(var(--s4cube) / -4)) rotateY(180deg);}

.cubeArea .cube.n3{
	position: absolute; width: calc(var(--s4cube) / 4); height: calc(var(--s4cube) / 4);
}
.cubeArea .cube.n3 > div:nth-child(1){transform: translate3d(0,0,calc(var(--s4cube) / 8)) rotateY(0deg);}
.cubeArea .cube.n3 > div:nth-child(3){transform: translate3d(0,0,calc(var(--s4cube) / -8)) rotateY(180deg);}






/* 3번 오브젝트 */
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx{
	width: 170em;
	--s4delay:.12s;
}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg{
	width: 100%; fill: transparent; stroke: var(--yello); overflow: visible;
}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g{
	transform-origin: center;
	animation: rotate 6s infinite;
}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g path{
	transform-origin: center;
	/* animation: opacity50 2s infinite; */
}


.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(1){animation-delay: calc(var(--s4delay) * 1);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(2){animation-delay: calc(var(--s4delay) * 2);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(3){animation-delay: calc(var(--s4delay) * 3);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(4){animation-delay: calc(var(--s4delay) * 4);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(5){animation-delay: calc(var(--s4delay) * 5);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(6){animation-delay: calc(var(--s4delay) * 6);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(7){animation-delay: calc(var(--s4delay) * 7);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(8){animation-delay: calc(var(--s4delay) * 8);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(9){animation-delay: calc(var(--s4delay) * 9);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(10){animation-delay: calc(var(--s4delay) * 10);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(11){animation-delay: calc(var(--s4delay) * 11);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(12){animation-delay: calc(var(--s4delay) * 12);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(13){animation-delay: calc(var(--s4delay) * 13);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(14){animation-delay: calc(var(--s4delay) * 14);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(15){animation-delay: calc(var(--s4delay) * 15);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(16){animation-delay: calc(var(--s4delay) * 16);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(17){animation-delay: calc(var(--s4delay) * 17);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(18){animation-delay: calc(var(--s4delay) * 18);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(19){animation-delay: calc(var(--s4delay) * 19);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(20){animation-delay: calc(var(--s4delay) * 20);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(21){animation-delay: calc(var(--s4delay) * 21);}

.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(1) path{animation-delay: calc(var(--s4delay) * 1);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(2) path{animation-delay: calc(var(--s4delay) * 2);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(3) path{animation-delay: calc(var(--s4delay) * 3);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(4) path{animation-delay: calc(var(--s4delay) * 4);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(5) path{animation-delay: calc(var(--s4delay) * 5);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(6) path{animation-delay: calc(var(--s4delay) * 6);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(7) path{animation-delay: calc(var(--s4delay) * 7);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(8) path{animation-delay: calc(var(--s4delay) * 8);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(9) path{animation-delay: calc(var(--s4delay) * 9);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(10) path{animation-delay: calc(var(--s4delay) * 10);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(11) path{animation-delay: calc(var(--s4delay) * 11);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(12) path{animation-delay: calc(var(--s4delay) * 12);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(13) path{animation-delay: calc(var(--s4delay) * 13);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(14) path{animation-delay: calc(var(--s4delay) * 14);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(15) path{animation-delay: calc(var(--s4delay) * 15);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(16) path{animation-delay: calc(var(--s4delay) * 16);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(17) path{animation-delay: calc(var(--s4delay) * 17);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(18) path{animation-delay: calc(var(--s4delay) * 18);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(19) path{animation-delay: calc(var(--s4delay) * 19);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(20) path{animation-delay: calc(var(--s4delay) * 20);}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(21) path{animation-delay: calc(var(--s4delay) * 21);}

.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(1) path{transform: rotate(calc(14deg * 21));}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(2) path{transform: rotate(calc(14deg * 20));}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(3) path{transform: rotate(calc(14deg * 19));}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(4) path{transform: rotate(calc(14deg * 18));}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(5) path{transform: rotate(calc(14deg * 17));}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(6) path{transform: rotate(calc(14deg * 16));}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(7) path{transform: rotate(calc(14deg * 15));}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(8) path{transform: rotate(calc(14deg * 14));}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(9) path{transform: rotate(calc(14deg * 13));}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(10) path{transform: rotate(calc(14deg * 12));}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(11) path{transform: rotate(calc(14deg * 11));}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(12) path{transform: rotate(calc(14deg * 10));}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(13) path{transform: rotate(calc(14deg * 9));}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(14) path{transform: rotate(calc(14deg * 8));}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(15) path{transform: rotate(calc(14deg * 7));}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(16) path{transform: rotate(calc(14deg * 6));}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(17) path{transform: rotate(calc(14deg * 5));}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(18) path{transform: rotate(calc(14deg * 4));}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(19) path{transform: rotate(calc(14deg * 3));}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(20) path{transform: rotate(calc(14deg * 2));}
.s4 .wrap .cont.n1 .swiper-slide.n3 .front .objBx svg > g g:nth-child(21) path{transform: rotate(calc(14deg * 1));}


/* back */
.s4 .wrap .cont.n1 .swiper-slide .back{
	opacity: 0; pointer-events: none;
}
.s4 .wrap .cont.n1 .swiper-slide .back::before {
	content:''; display: block; width: 100%; height: 100%;
	position: absolute; left: 0; top: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 100%);
}
.s4 .wrap .cont.n1 .swiper-slide .back::before {
	content:''; display: block; position: absolute; left: 0; top: 0; z-index: 1;
	width: 100%; height: 100%; border-radius: 8px;
	/* border: 1px solid #504f4f; box-sizing: border-box; */
}
.s4 .wrap .cont.n1 .swiper-slide .back ._imgBx{
	position: absolute; width: 100%; height: 100%;
	left: 0; top: 0;
}
.s4 .wrap .cont.n1 .swiper-slide .back ._imgBx img{
	filter: blur(10px); transform: scale(1.3);
}
.s4 .wrap .cont.n1 .swiper-slide .back .txtBx{
	font-size: 26px; letter-spacing: -0.025em; padding: 0 20px;
	position: relative; color: #fff; text-align: center;
	display: flex; align-items: center; justify-content: center;
	padding-top: 78px; box-sizing: border-box; z-index: 2;
	opacity: 0; transform: translateY(40px); line-height: 1.3;
}
.s4 .wrap .cont.n1 .swiper-slide .back .txtBx b{font-weight: 700;}
.s4 .wrap .cont.n1 .swiper-slide .back .txtBx p{font-weight: 500;}

/* 호버 */
.s4 .wrap .cont.n1 .swiper-slide{transition: width 1.5s;}
html.pc .s4 .wrap .cont.n1 .swiper-slide:hover{width: 100%;}

.s4 .wrap .cont.n1 .swiper-slide .front{transition: opacity .8s;}
html.pc .s4 .wrap .cont.n1 .swiper-slide:hover .front{opacity: 0;}

.s4 .wrap .cont.n1 .swiper-slide .back{transition: opacity .8s;}
html.pc .s4 .wrap .cont.n1 .swiper-slide:hover .back{opacity: 1; pointer-events: auto;}

.s4 .wrap .cont.n1 .swiper-slide .back ._imgBx img{transition: filter 3s,transform 3s;}
html.pc .s4 .wrap .cont.n1 .swiper-slide:hover .back ._imgBx img{transform: scale(1); filter: blur(0px);}

.s4 .wrap .cont.n1 .swiper-slide .back .txtBx{transition: opacity 1s, transform 1s;}
html.pc .s4 .wrap .cont.n1 .swiper-slide:hover .back .txtBx{opacity: 1; transform: translateY(0); transition-delay: .5s;}



@media screen and (max-width:1600px) {
	.s4{padding-top: 140px; padding-bottom: 28vw;}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	/* 제목 */
	.s4 .wrap .cont h3 > div{font-size: 40px;}

	/* 카드 */
	.s4 .wrap .cont.n1 .swiper-slide{height: auto;}
	.s4 .wrap .cont.n1 .swiper-slide::before {content:''; display: block; padding-bottom: 120%;}
	.s4 .wrap .cont.n1 .swiper-slide{width: calc((100% / 3)  - 10px); min-width: unset;}

	.s4 .wrap .cont.n1 .swiper-slide .front{padding: 15% 0; font-size: calc(1/1280*(100vw - 20px));}
	.s4 .wrap .cont.n1 .swiper-slide .front .txtBx{font-size: 26em;}

	.s4 .wrap .cont.n1 .swiper-slide .back .txtBx{padding: 20px; height: 100%; font-size: 20px;}
}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	/* 제목 */
	.s4 .wrap .cont h3 > div{font-size: clamp(20px,calc(40/820*100vw),40px);}
	.s4 .wrap .cont h3 small{font-size: 16px;}

	/* 카드 */
	.s4 .wrap .cont.n1 .swiper{max-width: 360px;}
	.s4 .wrap .cont.n1 .swiper-wrapper{gap: unset; align-items: unset; justify-content: unset;}
	.s4 .wrap .cont.n1 .swiper-slide{flex-shrink: 0; transition: unset;}
	.s4 .wrap .cont.n1 .swiper-slide .front{padding: 80em 20em; font-size: 0.9px;}
}
@media screen and (max-width:500px) {
	.s4{padding-top: 30vw; padding-bottom: 40vw;}

	/* 제목 */
	.s4 .wrap .cont h3 > div{font-size: clamp(18px,calc(32/500*100vw),32px);}
	.s4 .wrap .cont h3 small{font-size: 14px;}

	/* 카드 */
	.s4 .wrap .cont.n1 .swiper{max-width: unset;}
	.s4 .wrap .cont.n1 .swiper-slide .front{font-size: calc(1/500*(100vw - 20px));}
}
@media screen and (max-width:320px) {}





/* 하단 모션 */
.s4 .cont.n2{
	padding-top: min(30vw,240px);
	display: flex; align-items: center; justify-content: flex-start; flex-direction: column;
}
.s4 .cont.n2 h3{position: relative; z-index: 2;}
.s4 .cont.n2 .con{
	font-size: 1px; padding-top: 140em; position: relative;
	display: flex; align-items: center; justify-content: center;
}

.s4 .cont.n2 .con .cover{
	position: absolute; top: 0; z-index: 3;
	width: 100vw; height: 200%;
	background-color: #000; opacity: 0; transition: opacity 1.2s;
}
.s4 .cont.n2 .con .cover.on{opacity: 1;}

.s4 .cont.n2 .con .side{
	position: relative; display: flex; align-items: center;
}
.s4 .cont.n2 .con .side .obj{}
.s4 .cont.n2 .con .side > p{
	position: absolute; width: 100%; text-align: center; top: 100%; transform: translateY(calc(60/30*1em));
	font-size: max(30em,14px); color: #fff; font-weight: 500; white-space: nowrap;
}
/* 왼쪽 */
.s4 .cont.n2 .con .side.left{}
.s4 .cont.n2 .con .side.left .obj{}
.s4 .cont.n2 .con .side.left .obj svg{
	stroke: var(--yello); fill: transparent; width: 302em; width: 270em; overflow: visible;
}
.s4 .cont.n2 .con .side.left .obj svg g{}
.s4 .cont.n2 .con .side.left .obj svg g path{}
.s4 .cont.n2 .con .side.left .obj svg g path{animation: scale110 infinite 4s,opacity50 infinite 8s; transform-origin: center;}
.s4 .cont.n2 .con .side.left .obj svg g path:nth-child(1){animation-delay: calc(.1s * 1);}
.s4 .cont.n2 .con .side.left .obj svg g path:nth-child(2){animation-delay: calc(.1s * 2);}
.s4 .cont.n2 .con .side.left .obj svg g path:nth-child(3){animation-delay: calc(.1s * 3);}
.s4 .cont.n2 .con .side.left .obj svg g path:nth-child(4){animation-delay: calc(.1s * 4);}
.s4 .cont.n2 .con .side.left .obj svg g path:nth-child(5){animation-delay: calc(.1s * 5);}
.s4 .cont.n2 .con .side.left .obj svg g path:nth-child(6){animation-delay: calc(.1s * 6);}
.s4 .cont.n2 .con .side.left .obj svg g path:nth-child(7){animation-delay: calc(.1s * 7);}
.s4 .cont.n2 .con .side.left .obj svg g path:nth-child(8){animation-delay: calc(.1s * 8);}
.s4 .cont.n2 .con .side.left .obj svg g path:nth-child(9){animation-delay: calc(.1s * 9);}
.s4 .cont.n2 .con .side.left .obj svg g path:nth-child(10){animation-delay: calc(.1s * 10);}
.s4 .cont.n2 .con .side.left .obj svg g path:nth-child(11){animation-delay: calc(.1s * 11);}
.s4 .cont.n2 .con .side.left .obj svg g path:nth-child(12){animation-delay: calc(.1s * 12);}

/* 오른쪽 */
.s4 .cont.n2 .con .side.right{}
.s4 .cont.n2 .con .side.right .obj{}
.s4 .cont.n2 .con .side.right .obj > div{
	width: 282em; width: 250em;
}

@keyframes s4animation01 {
	0%{transform: scale(1);}
	50%{transform: scale(0.7);}
	100%{transform: scale(1);}
}
.s4 .cont.n2 .con .side.right .obj > div > div{
	border-radius: 50%; background-color: var(--purple);
	animation: s4animation01 infinite 4s,opacity50 infinite 8s;
	width: 150em; height: 150em;
	width: 140em; height: 140em;
}
.s4 .cont.n2 .con .side.right .obj > div > div:nth-child(1){}
.s4 .cont.n2 .con .side.right .obj > div > div:nth-child(2){
	margin-left: auto; animation-delay: 1s;
}

/* 가운데 */
.s4 .cont.n2 .con .center{
	min-width: 856em;
	display: flex; align-items: center; justify-content: center;
	position: relative;
}
.s4 .cont.n2 .con .center .box{
	display: flex; align-items: center; justify-content: center;
	position: absolute;
	border: 1px solid tomato;
}
.s4 .cont.n2 .con .center .box > div{
	position: absolute;
	display: flex; align-items: center; justify-content: center;
}

.s4 .cont.n2 .con .center .fill div,
.s4 .cont.n2 .con .center .stroke div{
	width: 385em; height: 385em;
	mask-size: cover;
	mask-position:center;
	mask-repeat: no-repeat;
	-webkit-mask-size: cover;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}
.s4 .cont.n2 .con .center .fill div{
	/* background: linear-gradient(270deg,rgba(71, 84, 210, 1) 0%, rgba(226, 241, 87, 1) 100%); */
	background: linear-gradient(135deg,rgba(71, 84, 210, 1) 0%, rgba(226, 241, 87, 1) 100%);
	mask-image: url(/asset/img/main/s4_center_fill.png);
	-webkit-mask-image: url(/asset/img/main/s4_center_fill.png);
}
.s4 .cont.n2 .con .center .stroke div{
	/* background: linear-gradient(135deg,rgba(71, 84, 210, 1) 0%, rgba(226, 241, 87, 1) 100%); */
	background: linear-gradient(270deg,rgba(71, 84, 210, 1) 0%, rgba(226, 241, 87, 1) 100%);

	mask-image: url(/asset/img/main/s4_center_stroke.png);
	-webkit-mask-image: url(/asset/img/main/s4_center_stroke.png);
}

.s4 .cont.n2 .con .center .wave{opacity: 0; transition: opacity 1s;}
.s4 .cont.n2 .con .center .wave img{max-width: unset;}
.s4 .cont.n2 .con .center .wave.n1 img{width: 432em; height: 432em;}
.s4 .cont.n2 .con .center .wave.n2 img{width: 479em; height: 479em;}

.s4 .cont.n2 .con .center .txt{
	font-size: max(33em,16px); line-height: 1.388; text-align: center; line-height: 1.5;
	flex-direction: column; white-space: nowrap;
}
.s4 .cont.n2 .con .center .txt div{overflow: hidden;}
.s4 .cont.n2 .con .center .txt b{font-weight: 700; display: block;}


/* center 튀어오르기 */
.s4 .cont.n2 .con .center.scale .fill{animation: s4center01 infinite 3s cubic-bezier(0.6, 0, 0.2, 1);}
.s4 .cont.n2 .con .center.scale .stroke{animation: s4center01 infinite 3s cubic-bezier(0.6, 0, 0.2, 1);}
.s4 .cont.n2 .con .center.scale .wave{opacity: 1;}
.s4 .cont.n2 .con .center.scale .wave.n1 img{animation: s4center02 infinite 3s 0.2s cubic-bezier(0.6, 0, 0.2, 1);}
.s4 .cont.n2 .con .center.scale .wave.n2 img{animation: s4center02 infinite 3s 0.4s cubic-bezier(0.6, 0, 0.2, 1);}

@keyframes s4center01 {
	0%{transform: scale(1);}
	50%{transform: scale(1.15);}
	100%{transform: scale(1);}
}

@keyframes s4center02 {
	0%{transform: scale(1); opacity: 1;}
	50%{transform: scale(1.15); opacity: 1;}
	100%{transform: scale(1); opacity: 1;}
}



/* 추가 */
.s4 .cont.n2 .con .center .plus{
	position: absolute;
	color: #fff; font-size: 100em; font-size: max(50em,40px);
	margin-bottom: -0.1em;
}
.s4 .cont.n2 .con .center .line{
	position: absolute; z-index: -1;
	width: 100%; height: 1px; background-color: #fff;
	transform-origin: left center;
	opacity: 0.4;
}






@media screen and (max-width:1600px) {
	.s4 .cont.n2 .con{font-size: calc(1/1600*100vw);}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	.s4 .cont.n2{padding-top: 30vw;}
	.s4 .cont.n2 .con{padding-top: 16vw;}
}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	.s4 .cont.n2 .con{padding-top: 20vw;}
	.s4 .cont.n2 .con .center{min-width: 780em; margin: 0 80em;}
	.s4 .cont.n2 .con .center .fill div,
	.s4 .cont.n2 .con .center .stroke div{width: 420em; height: 420em;}
	.s4 .cont.n2 .con .center .txt{color: #fff;}
}
@media screen and (max-width:320px) {
	.s4 .cont.n2 .con .side > p{font-size: 12px;}
}









/* 공통 */
._moreBtn{
	height: calc(62/20*1em); width: calc(178/20*1em); box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	font-size: clamp(14px,calc(20/1920*100vw),30px); font-weight: 600; letter-spacing: -0.025em;
	position: relative; border-radius: calc(9/20*1em); overflow: hidden;
}
._moreBtn::before {
	content:''; display: block; width: 100%; height: 100%;
	position: absolute; left: 0; top: 0; transform-origin: left center;
	/* transform: scaleX(0); */ opacity: 0;
	z-index: 1; pointer-events: none;
	transition: opacity 1s;
}
._moreBtn::after {
	content:''; display: block; width: calc(100% - 1px); height: 100%;
	position: absolute; left: 0.5px; top: 0;  border-radius: calc(9/20*1em);
}
._moreBtn img{position: relative; z-index: 2; height: calc(28/20*1em);}
._moreBtn p{position: relative; z-index: 2;}

html.pc ._moreBtn:hover{}
html.pc ._moreBtn:hover::before {opacity: 1;}



/* ----------- s5 ----------- */

.s5 .cont{
	height: calc(var(--vh,1vh) * 100);
	display: flex;  width: max-content;
	width: 100%;
}
.s5 .swiper{
	width: 50%; height: 100%; margin: 0;
}
.s5 .swiper-slide{overflow: hidden;}
/* .s5 .swiper-slide::before {
	content:''; display: block; padding-bottom: calc(2/3*100%);
} */
.s5 .swiper-slide img{
	/* position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; */
	width: 100%; height: 100%; object-fit: cover;
}



.s5 .right{
	width: 50%;
	background-color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.s5 .right h4{
	font-size: min(calc(1/1920*100vw),calc(1/980 * (var(--vh,1vh) * 100))); color: #101010;
}
.s5 .right h4 small{font-size: max(20em,14px); letter-spacing: -0.025em;}
.s5 .right h4 small b{font-weight: 700; display: inline-block;}
.s5 .right h4 strong{font-size: 56em; letter-spacing: -0.025em; line-height: 1.3; margin-top: calc(48/56*1em); margin-bottom: calc(80/56*1em);}
.s5 .right h4 strong div{overflow: hidden;}
.s5 .right h4 strong b{font-weight: 600; display: inline-block;}
.s5 .right h4 a{color: #fff; background-color: var(--purple); padding: 0 0.8em; width: auto;}
.s5 .right h4 a::before {background-color: #101010;}


@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	.s5 .cont{display: block; width: 100%; height: auto; padding-top: min(14vw,100px);}
	.s5 .swiper{width: 100%;}
	.s5 .right{margin: min(14vw,80px) 0; text-align: center; width: 100%;}
	.s5 .right h4 a{margin: 0 auto;}
}
@media screen and (max-width:1024px) {
	.s5 .right h4{font-size: calc(0.6/1024*100vw);}
}
@media screen and (max-width:820px) {
	.s5 .right h4{font-size: min(calc(0.9/820*100vw),0.7px); text-align: center;}
	.s5 .right h4 small{line-height: 1.3;}
	.s5 .right h4 a{margin: 0 auto;}
}
@media screen and (max-width:500px) {}
@media screen and (max-width:320px) {}


/* 세로가 길경우 */
@media (orientation: Portrait) and (max-width:1024px) {}
@media (orientation: Portrait) and (max-width:820px) {}
@media (orientation: Portrait) and (max-width:500px) {}
@media (orientation: Portrait) and (max-width:320px) {}







/* ----------- s6 ----------- */

.s6{
	height: 100vh; margin-top: -1px;
	width: calc(100vw + 2px); background-color: #000;
}
html.mo .s6{
	height: calc((var(--vh,1vh) * 100) + 60px);
}
html.kakaoWeb .s6{
	height: calc((var(--vh,1vh) * 100) + 110px);
}
.s6 .wrap{
	height: 100%;
	display: flex; align-items: center; justify-content: space-between;
}
.s6 .wrap .txtArea{font-size:	min(calc(1/1920*100vw),calc(1/980 * (var(--vh,1vh) * 100)));}
.s6 .wrap .txtArea > p{
	color: #fff; font-size: max(20em,14px); font-weight: 500; letter-spacing: -0.025em;
}
.s6 .wrap .txtArea h4{
	margin-top: calc(50/54*1em); margin-bottom: calc(80/56*1em);
	font-size:56em; letter-spacing: -0.0258em; line-height: 1.285; color: #fff;
}
.s6 .wrap .txtArea h4 b{font-weight: 700; color: var(--yello);}
.s6 .wrap .txtArea .btnBx{
	display: flex; align-items: center; justify-content: flex-start; gap: 10px;
}
.s6 .wrap .txtArea .btnBx a{}
.s6 .wrap .txtArea .btnBx a:before {background-color: var(--purple);}
.s6 .wrap .txtArea .btnBx a:nth-child(1)::after{background-color: #fff;}
.s6 .wrap .txtArea .btnBx a:nth-child(2)::after{background-color: var(--yello);}
.s6 .wrap .txtArea .btnBx a img{filter: brightness(0);}
.s6 .wrap .txtArea .btnBx a p{}


.s6 .wrap .txtArea .btnBx a{transition: color .5s;}
.s6 .wrap .txtArea .btnBx a img{transition: filter .5s;}
html.pc .s6 .wrap .txtArea .btnBx a:hover{color: #fff;}
html.pc .s6 .wrap .txtArea .btnBx a:hover img{filter: brightness(1);}

.s6 .wrap .txtArea > small{
	font-size: max(16em,14px); margin-top: calc(22/16*1em);
	letter-spacing: -0.025em; color: #7c7c7c; line-height: 1.625; font-weight: 500;
}




.s6 .wrap .messageArea{padding-right: 74em; font-size: 1px; position: relative;}

/* 폰 */
.s6 .wrap .messageArea .phone{
	position: relative; border: 1px solid #fff; box-sizing: border-box;
	display: flex; align-items: center; justify-content: center;
	width: 266em; border-radius: 26em;
}
.s6 .wrap .messageArea .phone::before {content:''; display: block; padding-bottom: calc(545/266*100%);}
.s6 .wrap .messageArea .phone div{
	position: absolute;
	display: inline-flex; align-items: flex-start; justify-content: center; flex-direction: column;
}
.s6 .wrap .messageArea .phone svg{}
.s6 .wrap .messageArea .phone svg:nth-child(1){width: 211em; fill: #fff; margin-bottom: 20em;}
.s6 .wrap .messageArea .phone svg:nth-child(2){
	width: 23em; fill: #efc51d; position: absolute;
	top: 0; right: 20%;
}
.s6 .wrap .messageArea .phone p{font-size: max(12em,10px); letter-spacing: -0.025em; color: rgba(255,255,255,0.3);}

/* 말풍선 */
.s6 .wrap .messageArea .message{
	font-size: max(16em,12px); padding: calc(14/16*1em) calc(20.45/16*1em); border-radius: 100px; font-weight: 500;
	letter-spacing: -0.025em; display: inline-flex; align-items: center; justify-content: center;
	position: absolute; font-weight: 700;
}
.s6 .wrap .messageArea .message.white{background-color: #fff;}
.s6 .wrap .messageArea .message.yello{background-color: var(--yello);}
.s6 .wrap .messageArea .message img{
	position: absolute; width: calc(11/16*1em);
}
.s6 .wrap .messageArea .message img.left{top: 5%; left: 0;}
.s6 .wrap .messageArea .message img.right{top: 5%; right: 0;}

.s6 .wrap .messageArea .message.n1{top: 24%;left: -16%;}
.s6 .wrap .messageArea .message.n2{top: 64%;right: -16%;}
.s6 .wrap .messageArea .message.n3{top: calc(64% + 3.4em);right: -16%;}


@media screen and (max-width:1600px) {
	.s6 .wrap .txtArea{font-size: min(calc(1.3/1920*100vw),calc(1.3/980 * (var(--vh,1vh) * 100)));}
	.s6 .wrap .messageArea{font-size: min(calc(1.3/1920*100vw),calc(1.3/980 * (var(--vh,1vh) * 100)));}
	.s6 .wrap{justify-content: center; gap: 16vw;}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	.s6{height: auto !important; padding: 14vw 0;}
}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	.s6 .wrap{flex-direction: column;}

	.s6 .wrap .txtArea{text-align: center; font-size: min(calc(0.7/500*100vw),0.8px);}
	.s6 .wrap .txtArea .btnBx{justify-content: center;}

	.s6 .wrap .messageArea{padding-right: 0; font-size: min(calc(1/500*100vw),0.8px);}
	.s6 .wrap .messageArea .message.n2{right: -26%;}
	.s6 .wrap .messageArea .message.n3{right: -26%;}
}
@media screen and (max-width:500px) {}
@media screen and (max-width:320px) {}



/* VIEW BOX 팝업 */
/* vide_view Bx */
.viewBx{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.9);z-index: 9999;display: none;}
.viewBx .wrap{position: relative;width: 100%;height: 100%;}
.view{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);max-width: 1112px;width: 100%;}
.view .tit{display: flex;align-items: center;justify-content: space-between;padding-bottom:20px ;}
.view p{font-size: 28px;font-weight: 500;color: #fff;font-family: 'Dm Sans', sans-serif;
    line-height: 1.3;
}
.view p em{margin-right: 5px;}
.view .tit i{font-size: 36px;color: #fff;}
.view .video{position: relative;width: 100%;}
.view .video:before{content:'';display: block;width: 100%;padding-bottom: calc(629/1112*100%);}
.view .video iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 20px;}

@media screen and (max-width: 1280px) {
    .viewBx .wrap{position: relative;width: 90%;}
}
@media screen and (max-width: 1024px) {
    .view p{font-size: 24px;}
    .view .tit i{font-size: 30px;}
}
@media screen and (max-width: 820px) {
    .view p{font-size: 20px;}
    .view .tit i{font-size: 26px;}
}
@media screen and (max-width: 500px) {
    .view p{font-size: 18px;}
    .view .tit i{font-size: 20px;}
}