/* 커서 */
._cursor{
    position: fixed; z-index: 999; transform: translate(-50%,-50%) scale(0);
    pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 1px; opacity: 0;
    transition: opacity 0.5s,transform 0.5s;
}
._cursor.on{
    transform: translate(-50%,-50%) scale(1); opacity: 1;
}
._cursor .top{
    font-size: 22em; font-weight: 500; letter-spacing: -0.025em; color: var(--purple);
    position: absolute; bottom: 100%;
    white-space: nowrap; padding-bottom: 0.2em;
}
._cursor .circle{
    width: 65em; height: 65em;
    position: relative;
    display: flex; align-items: center; justify-content: center;
}
._cursor .circle div{
    border-radius: 50%;
    position: absolute; animation: scale110 forwards infinite 3s,opacity20 forwards infinite 2s;
}
._cursor .circle div:nth-child(1){
    width: 86%; height: 86%; background-color: rgba(87, 115, 241, 0.3); animation-delay:0.2s;
}
._cursor .circle div:nth-child(2){
    width: 36em; height: 36em; background-color: rgba(87, 102, 241, 0.5); animation-delay:0.1s;
}
._cursor .circle div:nth-child(3){
    width: 16em; height: 16em; background-color: rgb(90, 87, 241);
}
._cursor .bottom{
    font-size: 14em; letter-spacing: -0.025em; color: #333333;
    line-height: 1.428; text-align: center;
    position: absolute; white-space: nowrap;
    top: 100%; padding-top: 0.6em; font-weight: 600;
}

html.mo ._cursor{display: none !important;}


/* motion */
._star{text-align: center;}
@media screen and (max-width:500px) {
    ._star img{width: 30px;}
}
@keyframes float{
    0%{transform: translateY(0);}
    50%{transform: translateY(-10px);}
    100%{transform: translateY(0);}
}
._star img{animation: float 3s ease-in-out infinite;}
._navi{
    position: fixed; z-index: 99;
    top: 50%; transform: translateY(-50%);
    left: 40px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.5s;
}
._navi.on{opacity: 1; pointer-events: auto;}
._navi li{cursor: pointer; font-size: 16px;font-weight: 500;color: #cccccc; padding-bottom: 20px; transition: color 0.5s;}
._navi li span{display: inline-block;}
._navi li.on{color: #000; mix-blend-mode: difference;}
._navi li.on::before{content: '•';display: inline-block;color: #e2f157;padding-right: 5px;}

._navi.white li.on{color: #fff;}
@media screen and (max-width:1680px) {
    ._navi{left: 20px;}
}
@media screen and (max-width:1440px) {
    ._navi{display: none;}
}
@media screen and (max-width:820px) {
    ._navi{left: 10px;}
    ._navi li{font-size: 14px;}
}
/* .motion{overflow-x: hidden;} */
main{overflow: hidden;}
._sub{padding-top: 0;}

/* ----------- 공통 ----------- */
._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; }

/* ----------- s1 모션설정----------- */
.motion .s01{background: #000;}
.motion .s01 .wrap h3 > div p{transform: translateY(110%);}
.motion .s01 .wrap h3 > div p em {opacity: 0;}
.motion .s01 .wrap .right .txtBx .top p > em {display: inline-block; transform: translateY(110%); opacity: 0;}
.motion .s01 .wrap .right .txtBx .bottom p{transform: translateY(110%);}
.motion .s01 .wrap .right .txtBx .bottom .line{transform: scaleX(0);}
.motion .s01 .objArea{opacity: 0; transform: translateY(80px);}


/* ----------- s1 ----------- */


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

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



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

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

.motion .s01 .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);
	}
}


.motion .s01 .objArea ul li.type1 .miniCircle {border-radius: 50%;position: relative; display: flex; align-items: center; justify-content: center;width: 50%; height: 50%; }
.motion .s01 .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);
}

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

/* .motion .s01 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(1) { transform: translate(0%,-120%); }
.motion .s01 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(2) { transform: translate(90%,-90%); }
.motion .s01 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(3) { transform: translate(120%,0%); }
.motion .s01 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(4) { transform: translate(90%,90%); }
.motion .s01 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(5) { transform: translate(0%,120%); }
.motion .s01 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(6) { transform: translate(-90%,90%); }
.motion .s01 .objArea ul li.type1 .miniCircle ._imgBx:nth-child(7) { transform: translate(-120%,0%); }
.motion .s01 .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%); }
}


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



/* obj02 */
.motion .s01 .objArea ul li.type2 { }
.motion .s01 .objArea ul li.type2 .star {position: absolute; width: 100%; }
.motion .s01 .objArea ul li.type2 .star svg { }
.motion .s01 .objArea ul li.type2 .star.stroke {animation: rotate4 infinite 22s 0.3s reverse cubic-bezier(.74,.13,.28,1); }
.motion .s01 .objArea ul li.type2 .star.stroke svg {transform: rotate(0deg); stroke: var(--yello);fill: transparent; }
.motion .s01 .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); }
.motion .s01 .objArea ul li.type2 .star.fill svg {fill: var(--yello); }
.motion .s01 .objArea ul li.type2 .star.fill svg:nth-child(2) { }
.motion .s01 .objArea ul li.type2 .circle {position: absolute;animation: floating40 infinite 4s; }
.motion .s01 .objArea ul li.type2 .circle.blue {left: 25%;top: 28%; }
.motion .s01 .objArea ul li.type2 .circle.gray {right: 30%;bottom: 10%;animation-delay: 1s; }

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



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

.motion .s01 .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; }
.motion .s01 .objArea ul li.type3 .circleBx div:nth-child(1) { left: 53%; top: 0%; }
.motion .s01 .objArea ul li.type3 .circleBx div:nth-child(2) { left: 75%; top: 21.7%; }
.motion .s01 .objArea ul li.type3 .circleBx div:nth-child(3) { left: 75%; top: 53%; }
.motion .s01 .objArea ul li.type3 .circleBx div:nth-child(4) { left: 53%; top: 75%; }
.motion .s01 .objArea ul li.type3 .circleBx div:nth-child(5) { left: 22%; top: 75%; }
.motion .s01 .objArea ul li.type3 .circleBx div:nth-child(6) { left: 0%; top: 53%; }
.motion .s01 .objArea ul li.type3 .circleBx div:nth-child(7) { left: 0%; top: 21.7%; }
.motion .s01 .objArea ul li.type3 .circleBx div:nth-child(8) { left: 22%; top: 0%; }

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



/* obj04 */
.motion .s01 .objArea ul li.type4 {border: 1px solid var(--purple); }
.motion .s01 .objArea ul li.type4 .circle {border-radius: 50%; }
.motion .s01 .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%; }
.motion .s01 .objArea ul li.type4 .circle.blue .white {position: relative;width: 53.37%; height: 53.37%; background-color: #000; 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; }
.motion .s01 .objArea ul li.type4 .circle.blue .white p { color: #fff; }

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

.motion .s01 .objArea ul li.type4 .yello div {background-color: var(--yello);width: 28px; height: 28px;position: absolute;left: 100%; top: 50%; transform: translateX(-50%); }
.motion .s01 .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) {
	.motion .s01{padding: max(calc(200/1440*100vw),180px) 0;}
	/* .motion .s01 .wrap{margin-bottom: max(calc(180/1440*100vw),140px);} */

	/* .motion .s01 .wrap .right{padding-bottom: 2px;} */

	.motion .s01 .objArea{font-size: max(calc(1/1440*100vw),0.5px);}
}
@media screen and (max-width:1280px) {
	.motion .s01 .wrap h3{font-size: max(calc(68/1280*100vw),40px);}
	/* .motion .s01 .wrap .right .txtBx{font-size: max(calc(32/1280*100vw),18px);} */
}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
    /* .motion .s01 .wrap .right .txtBx div p{padding-top: 40px;} */
	.motion .s01{
		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;
	}

	.motion .s01 .wrap{flex-direction: column; align-items: flex-start; margin-bottom: 130px;}
	.motion .s01 .wrap h3{font-size: min(calc(50/550*100vw),40px); margin-bottom: 0.4em;}
	/* .motion .s01 .wrap .right .txtBx{transform-origin: left top; line-height: 1.5; font-size: min(calc(24/500*100vw),18px); text-align: center;} */
}
@media screen and (max-width:500px) {
    .motion .s01 .wrap h3 {font-size: clamp(20px, 40/500*100vw, 40px);}
	.motion .s01 .objArea{font-size: 0.4px;}
}
@media screen and (max-width:320px) {}


/* s02 */
/* portfolio */
/* .motion .s02{padding-top:120px;} */
.motion .s02 ._star{text-align: center;}
.motion .s02 .txtBx{text-align: center;}
.motion .s02 .txtBx > div{overflow: hidden;}
.motion .s02 .txtBx p{
    font-size: 40px;line-height: 1.4;padding-bottom: 15px;
    display: inline-flex;flex-direction: column;
    font-weight: 700;text-align: center;
}
.motion .s02 .txtBx p span{
    display: inline-block;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}

.motion .s02 .subtxt{text-align: center;}
.motion .s02 .subtxt > div{overflow: hidden;}
.motion .s02 .subtxt p{
    font-size: 24px;line-height: 1.4;
    display: inline-flex;flex-direction: column;
    font-weight: 600;text-align: center;
}

/* 탭메뉴 */
.motion .s02 .tabmenu{display: flex;align-items: center;justify-content: center;gap: 10px;padding-top: 30px;}
.motion .s02 .tabmenu li{border:1px solid #c9c9c9; border-radius: 22px;cursor: pointer;color: #7c7c7c; font-size: 20px;box-sizing: border-box;}
.motion .s02 .tabmenu li.total{padding: 13px 40px;}
.motion .s02 .tabmenu li{padding: 13px 30px;text-align: center;}
.motion .s02 .tabmenu li.on{background-color: #4754d2;border: 1px solid #4754d2;color: #fff;}

.motion .s02 .imgBx{cursor: pointer; display: flex;flex-wrap: wrap;padding-top: 40px;}
.motion .s02 .imgBx .img{position: relative;width: 25%;}
.motion .s02 .imgBx .img::before{
    content:'';
    display: block;
    width: 100%;
    padding-bottom: calc(209/372*100%);
}
.motion .s02 .imgBx .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.motion .s02 .moreBtn{padding-top: 40px;text-align: center;}
.motion .s02 .moreBtn a{display: inline-flex;align-items: center;justify-content: center;gap: 5px;max-width: 120px;width: 100%; background: #4754d2;padding: 12px;border-radius: 22px;color: #fff;font-size: 18px;font-weight: 500;box-sizing: border-box;}

@media screen and (max-width:1680px) {
    .motion .s02 .txtBx p{font-size: 38px;}
    .motion .s02 .subtxt p {font-size: 22px;}
}
@media screen and (max-width:1440px) {
    .motion .s02 .txtBx p {font-size: 32px;}
    .motion .s02 .subtxt p {font-size: 20px;}
    .motion .s02 .tabmenu li{font-size: 18px;}
}
@media screen and (max-width:1280px) {
    .motion .s02 .imgBx .img{width: 33.3333%;}
}
@media screen and (max-width:1024px) { }
@media screen and (max-width:820px) { 
    .motion .s02 .txtBx{padding-top: 60px;}
    .motion .s02 .txtBx p{font-size: 28px;}
    .motion .s02 .tabmenu li {font-size: 16px}
    .motion .s02 .tabmenu li.total{padding: 10px 20px;}
    .motion .s02 .tabmenu li{padding: 10px 10px;}
    

    .motion .s02 .imgBx .img{width: 50%;}
    .motion .s02 .moreBtn a{font-size: 16px;max-width: 100px;}
}
@media screen and (max-width:500px) {
    .motion .s02 .txtBx p {font-size: 24px}
    .motion .s02 .tabmenu{flex-direction: column;}
    .motion .s02 .tabmenu li {
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 8px;
        line-height: 1.3;
        width: 100%;
    }
    
    .motion .s02 .subtxt p{font-size: 18px;}
    .motion .s02 .tabmenu li.total {
        padding: 10px 8px;
    }
    .motion .s02 .moreBtn a{font-size: 14px;}
    
}
@media screen and (max-width:360px) {
    .motion .s02 .txtBx p {font-size: 22px}
    .motion .s02 .subtxt p {font-size: 16px;}
    .motion .s02 .imgBx .img{width: 100%;}
}

/* s03 */
.motion .s03{padding-top:120px}
.motion .s03 .tit h3 > div p{transform: translateY(110%);}
.motion .s03 .tit .txtBx .top p{transform: translateY(110%);}
.motion .s03 .tit .txtBx .bottom p{transform: translateY(110%);}
.motion .s03 .tit .txtBx .bottom .line{transform: scaleX(0);}



.motion .s03 .tit { position: relative;padding-top: 120px;}
.motion .s03 .tit .txtBx {font-size: 40px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.35; text-align: left; color: #000;}
.motion .s03 .tit .txtBx > div:nth-child(1) { overflow: hidden; }
.motion .s03 .tit .txtBx div p {}
.motion .s03 .tit .txtBx:nth-child(1){overflow: hidden;}
.motion .s03 .tit .txtBx .bottom{
	font-weight: 700; display: flex; align-items: center; gap: 0.13em;
}
.motion .s03 .tit .txtBx .bottom div{overflow: hidden;}
.motion .s03 .tit .txtBx .bottom .line{
	width: 3em; height: 2px; background-color: #000; margin: 0 0.3em;
	transform: scaleX(0); transform-origin: left center;
}
/* .motion .s03 .txtBx{padding-top: 150px;}
.motion .s03 .txtBx > div{overflow: hidden;}
.motion .s03 .txtBx p{
    font-size: 40px;line-height: 1.4;           padding-bottom: 15px;
    display: inline-flex;flex-direction: column;
    font-weight: 700;
}
.motion .s03 .txtBx p span{
    display: inline-block;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
} */
.motion .s03 .marqueeArea{padding-top: 110px;}
.motion .s03 ._marquee {width: 100%; position: relative; overflow: hidden;}
.motion .s03 ._marquee + ._marquee {margin-top: 30px;}
.motion .s03 ._marquee.n2{margin-top: 10px;}
.motion .s03 ._marquee .absol { width: 100%; display: flex; align-items: center;}
.motion .s03 ._marquee .absol .mar_ch {display: flex; align-items: center;}
.motion .s03 ._marquee .absol .mar_ch img {flex-shrink: 0; padding-right: 40px; max-width: none;}

@media screen and (max-width:1280px) {
    .motion .s03 .tit .txtBx{font-size: max(calc(32/1280*100vw),28px);}
}
@media screen and (max-width:820px) {
    .motion .s03 .tit .txtBx{transform-origin: left top; line-height: 1.5; font-size: min(calc(40/820*100vw),32px); text-align: left;}
    .motion .s03 ._marquee .absol .mar_ch img{width: 100px;}
}
@media screen and (max-width:500px) {
    .motion .s03 .tit{padding-top: 80px;}
    .motion .s03 .tit .txtBx{font-size: 22px;}
}
@media screen and (max-width:360px) {
    .motion .s03 .tit .txtBx{font-size: 18px;}
}


/* s04 */
.motion .s04{padding-top: 250px;position: relative;}
.motion .s04 ._star.n2{padding-bottom: 120px;}

.motion .s04 .row.n2, .motion .s04 .row.n3{padding-top: 70px;}
.motion .s04 .row .num{font-size: 30px;font-weight: 600;}
.motion .s04 .row .flexBx{display: flex;justify-content: space-between;align-items: flex-end;}
.motion .s04 .row .flexBx .left{padding-top: 20px;}
.motion .s04 .row .flexBx .left > div{overflow: hidden;}
.motion .s04 .row .flexBx .left h3{font-size: 40px;font-weight: 700;letter-spacing: -0.025em;line-height: 1.5;}
.motion .s04 .row .flexBx .right > div{overflow: hidden;}
.motion .s04 .row .flexBx .right p{font-size: 22px;font-weight: 500;letter-spacing: -0.025em;line-height: 1.6;color: #333333;text-align: right;}
.motion .s04 .row .flexBx .right p em{color: #4754d2;}

.motion .s04 .row .imgBx{padding-top: 50px;display: flex;gap: 10px;padding-bottom: 80px;border-bottom: 1px solid rgba(0,0,0,0.2);position: relative;font-size: 1px;}

.motion .s04 .messageArea{font-size: 1px; position: relative;}
.motion .s04 .message{
	font-size: max(16em,12px); padding: calc(20/16*1em) calc(40.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;
}
.motion .s04 .message.white{background-color: #e2f157;}
.motion .s04 .message.yellow{background-color: #e2f157;}
.motion .s04 .message img{
	position: absolute; width: calc(11/16*1em);
}
.motion .s04 .message img.left{top: 16%; left: 0;}
.motion .s04 .message img.right{top: 5%; right: 0;}

.motion .s04 .message.n1{top: 50%;right:5%;transform: translateY(-50%);}
.motion .s04 .message p{line-height: 1.3;font-size: 20px;}

@media screen and (max-width:1680px) {
    .motion .s04 .row .flexBx .left h3 {font-size: 38px;}
    .motion .s04 .row .flexBx .right p {font-size: 20px;}
    .motion .s04 .messageArea{font-size: min(calc(1.3/1920*100vw),calc(1.3/980 * (var(--vh,1vh) * 100)));}
}
@media screen and (max-width:1440px) {
    .motion .s04 .row .flexBx .left h3 {font-size: 32px;}
    .motion .s04 .message p {font-size: 18px;}

}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
    .motion .s04 .row .flexBx .left h3 {font-size: 28px;}
    .motion .s04 .row .flexBx .right p {font-size: 18px;}
    .motion .s04 .messageArea{padding-right: 0; font-size: min(calc(1/500*100vw),0.8px);}
    .motion .s04 .message {
        padding: calc(10 / 16 * 1em) calc(30.45 / 16 * 1em);
    }
    .motion .s04 .message.n1{right: 3%;}
    .motion .s04 .message p {font-size: 14px}

}
@media screen and (max-width:820px) {
    .motion .s04 .row .num {font-size: 24px;}
    .motion .s04 .row .flexBx{flex-direction: column;align-items: flex-start;}
    .motion .s04 .row .flexBx .right p {font-size: 16px;}
    .motion .s04 .row .flexBx .right{padding-top: 20px;}
    .motion .s04 .row .flexBx .right p{text-align: left;}
    .motion .s04 .message {
        padding: calc(5 / 16 * 1em) calc(20.45 / 16 * 1em);
    }
}
@media screen and (max-width:500px) {
    .motion .s04 .message p {font-size: 12px;}
    .motion .s04 .row .num {font-size: 22px;}
    .motion .s04 .row .flexBx .right p br{display: none;}
    .motion .s04 .row .flexBx .left h3 {font-size: 24px;}
}
@media screen and (max-width:360px) {
    .motion .s04 .row .num {font-size: 20px;}
    .motion .s04 .row .flexBx .left h3 {font-size: 22px;}
    .motion .s04 .row .flexBx .right p {font-size: 14px;}
}

/* s05 */
/* process */
.motion .s05{
    position: relative;
    padding-top: 250px;
    padding-bottom: 140px;
    box-sizing: border-box;
}


/* 화살표 */
.motion .s05 .arrowBx{
}
.motion .s05 .arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
} 
.motion .s05 .arrow.left{left: -3%;}
.motion .s05 .arrow.right{right: -3%;}


.motion .s05 .arrow {
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #000;
    color: #fff;
    width: 48px;
    height: 48px;
}

.motion .s05 .arrow span i{
    font-size: 24px;
}
.motion .s05 .arrow span i:nth-child(1){animation-delay: 0s;}
.motion .s05 .arrow span i:nth-child(2){animation-delay: 0.1s;}
.motion .s05 .arrow span i:nth-child(3){animation-delay: 0.15s;}

@keyframes arrow {
    0%{opacity: 0;}
    50%{opacity: 1;}
    100%{opacity: 0;}
}

.motion .s05 .txtBx{}
.motion .s05 .txtBx > div{overflow: hidden;text-align: center;}
.motion .s05 .txtBx p{
    font-size: 40px;line-height: 1.4;           padding-bottom: 15px;
    display: inline-flex;flex-direction: column;
    font-weight: 700;
}
.motion .s05 .txtBx p span{
    display: inline-block;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}
/* 가로스크롤 */
.motion .s05 .horizontal{
    max-width: 1326px;
    width: 100%;
    margin: 0 auto;
    padding-top: 40px;
}

/* .motion .s05 .horizontal::before{
    content:'';display: block; background-color: #f8f8f8;position: absolute;top: 0;left: 0;z-index: 1;
    border: 1px solid tomato;
    width: 100vw; height: 100%;
    left: 50%; transform: translateX(-50%);
    background-color: tan; opacity: ;
     z-index: 100;
} */
.motion .s05 .horizontal .swiper-slide {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background: #f8f8f8;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 9px;
}
.motion .s05 .horizontal .swiper-slide.step0{background: #fff;height: auto;}
.motion .s05 .horizontal .swiper-slide.step0 .tit{text-align: center;}
.motion .s05 .horizontal .swiper-slide.step0 .tit h3{font-size: 72px;font-weight: 700;letter-spacing: -0.025em;line-height: 1.5;}
.motion .s05 .horizontal .swiper-slide.step0 .tit h3 em{color: #4754d2;}
.motion .s05 .horizontal .content{width: 100%; display: flex;align-items: center;justify-content: center;gap: 120px;}
.motion .s05 .horizontal .content > div {width: 50%;}
.motion .s05 .horizontal .content .left{flex-shrink: 0;}
.motion .s05 .horizontal .content .left .img {width: 100%; border-radius: 9px; overflow: hidden;}
/* .motion .s05 .horizontal .content .right{padding-top: 110px;} */
.motion .s05 .horizontal .content .right .num{padding-bottom: 60px;}
.motion .s05 .horizontal .content .right .num p{font-size: 60px;font-weight: 600;color: rgba(0,0,0,0.2);font-style: italic;}
.motion .s05 .horizontal .content .right .sub > div{overflow: hidden;}
.motion .s05 .horizontal .content .right .sub p{
    font-size: 32px;line-height: 1.4;           padding-bottom: 15px;
    display: inline-flex;flex-direction: column;
    font-weight: 700;
}
.motion .s05 .horizontal .content .right .sub p span{
    display: inline-block;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}
.motion .s05 .horizontal .content .right .txt p{
    font-size: 18px;font-weight: 500;color: #333333;line-height: 1.6666;
}
.motion .s05 .horizontal .content .right .txt p em{color: #4754d2;}

/* progress */

.motion .s05 .controlBx{padding-top: 40px;margin: 0 auto;}

.motion .s05 .progressBx{width: 100%;display: flex;align-items:flex-end;justify-content:center;margin-left: 6em;}
.motion .s05 .progressBx2{
    width: 100%;
    display: flex;
    margin-top: 20px;
    justify-content: space-between
}
.motion .s05 .progressLine{position: relative; margin-top: 20px;width: 100%;height: 2px;background-color: #E2E2E2;}
.motion .s05 .progressLine .line{border-radius: 50px; position: absolute;z-index: 3; left: 0;transition: 0.6s;height: 3px;top: -0.5px;width: 0;}
.motion .s05 .progressLine .arr_line{position: absolute;right: -4px;bottom: 10px;height: 2px;transform: rotate(45deg);width: 30px;background-color: #E2E2E2;}
.motion .s05 .progressLine .cir {
    position: absolute;
    top: -4px; /* 막대 위에 위치 */
    left: 0;
    width: 10px;
    height: 10px;
    background: #e2f157;
    border-radius: 50%;
    transition: left 0.5s;
}

.motion .s05 .controlBx .progress {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
    color: #7c7c7c;
    /* transition: 0.4s; */
}
.motion .s05 .progressLine .line {
    border-radius: 50px;
    position: absolute;
    z-index: 3;
    left: 0;
    transition: 0.6s;
    height: 3px;
    top: -0.5px;
    background-color: #e2f157;
    width: 100%;
    transform-origin: left center;
    transition: 0.5s;
}

/* 아래 막대 모션 */
.motion .s05 .progressLine[step='1'] .cir{left: calc(100% / 14 * 1);}
.motion .s05 .progressLine[step='2'] .cir{left: calc(100% / 14 * 3);}
.motion .s05 .progressLine[step='3'] .cir{left: calc(100% / 14 * 5);}
.motion .s05 .progressLine[step='4'] .cir{left: calc(100% / 14 * 7);}
.motion .s05 .progressLine[step='5'] .cir{left: calc(100% / 14 * 9);}
.motion .s05 .progressLine[step='6'] .cir{left: calc(100% / 14 * 11);}
.motion .s05 .progressLine[step='7'] .cir{left: calc(100% / 14 * 13);}


.motion .s05 .progressLine[step='1'] .line{ transform: scaleX(calc((1/14) * 1));}
.motion .s05 .progressLine[step='2'] .line{ transform: scaleX(calc((1/14) * 3));}
.motion .s05 .progressLine[step='3'] .line{ transform: scaleX(calc((1/14) * 5));}
.motion .s05 .progressLine[step='4'] .line{ transform: scaleX(calc((1/14) * 7));}
.motion .s05 .progressLine[step='5'] .line{ transform: scaleX(calc((1/14) * 9));}
.motion .s05 .progressLine[step='6'] .line{ transform: scaleX(calc((1/14) * 11));}
.motion .s05 .progressLine[step='7'] .line{ transform: scaleX(calc((1/14) * 13));}

.motion .s05 .controlBx .progress {
    width: calc(100% / 7);}
.motion .s05 .controlBx .progressBx2 .progress.on, .motion .s05 .controlBx .progressBx2 .progress:hover {
    color: #000;
}

@media screen and (max-width: 1800px){
    .motion .s05 .arrowBx{display: flex;align-items: center;justify-content: center; gap: 40px; padding: 40px 0;}
    .motion .s05 .arrow{position: unset; transform: unset;}
}
@media screen and (max-width: 1680px) {
    .motion .s05 .txtBx p{font-size: 38px;}
    .motion .s05 .horizontal {width: 90%;}
    .motion .s05 .controlBx{width: 90%;}
    .motion .s05 .horizontal .content{align-items: center;}
    .motion .s05 .horizontal .content .left {max-width: calc(773/1680*100vw);}
    .motion .s05 .horizontal .content .right{padding-top: 0;}
    .motion .s05 .horizontal .content .right .num p {font-size: 50px;}
    .motion .s05 .horizontal .content .right .sub p {font-size: 28px;}
    
}
@media screen and (max-width: 1440px) {
    .motion .s05 .txtBx p{font-size: 32px;}
    .motion .s05 .horizontal {width: 85%;}
    .motion .s05 .controlBx{width: 85%;}
    .motion .s05 .horizontal .content {gap: 30px;}
    .motion .s05 .horizontal .content .left {max-width: calc(550 / 1440 * 100vw);}
    .motion .s05 .horizontal .content .right .num{padding-bottom: 40px;}
    .motion .s05 .horizontal .content .right .num p {font-size: 50px;}
    .motion .s05 .horizontal .content .right .sub p {font-size: 24px;}
    .motion .s05 .horizontal .content .right .txt p{font-size: 16px;}
}
@media screen and (max-width: 1280px) {
    .motion .s05 .txtBx p {font-size: 28px;}
    .motion .s05 .horizontal .content .left {max-width: calc(450 / 1280 * 100vw);}
    .motion .s05 .horizontal .content .right .num {padding-bottom: 20px;}
    .motion .s05 .horizontal .content .right .num p {font-size: 36px;}
    /* .motion .s05 .horizontal .content .right .txt p br{display: none;} */
}
@media screen and (max-width: 1024px) {
    .motion .s05 .horizontal{width: 95%;}
    .motion .s05 .controlBx{display: none;}
    .motion .s05 .horizontal .content{flex-direction: column;}
    .motion .s05 .horizontal .content .left {max-width: 80%; width: 100%;}
    .motion .s05 .horizontal .content .right{text-align: center; width: 100%;}
    .motion .s05 .horizontal .content .right .txt{width: 100%;}
    .swiper-slide{height: unset;}
}
@media screen and (max-width: 820px) {
    .motion .s05 .horizontal .swiper-slide {padding: 20px;}
    .motion .s05 .horizontal .content .right .num p {font-size: 24px;}
    .motion .s05 .horizontal .content .right .sub p {font-size: 20px;}
}
@media screen and (max-width: 500px) {
    .motion .s05 .horizontal .content .right .num p {font-size: 22px;}
    .motion .s05 .horizontal .content .right .sub p {font-size: 18px;}
    .motion .s05 .horizontal .content .right .txt p{font-size: 14px;}
    .motion .s05 .horizontal .content .right .txt p br{display: none;}
    .motion .s05 .txtBx p {font-size: 24px;}
}
@media screen and (max-width: 360px) {
    .motion .s05 .horizontal .content .left {max-width: 100%;}
    .motion .s05 .txtBx p {font-size: 20px;}
}


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

.motion .s06 .cont h3{text-align: center;}
.motion .s06 .cont h3 small{
	font-size: 18px; letter-spacing: -0.03em; color: #666666;
	margin-bottom: calc(30/18*1em);
}
.motion .s06 .cont h3 > div{
	line-height: 1.363; color: #fff;
	font-size: 44px; font-weight: 600;
}
.motion .s06 .cont h3 b{
	-webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}
.motion .s06 .cont.n2{
    padding-bottom: 360px;
	padding-top: min(30vw,240px);
	display: flex; align-items: center; justify-content: flex-start; flex-direction: column;
    background-color: #000;
}
.motion .s06 .cont.n2 h3{position: relative; z-index: 2;}
.motion .s06 .cont.n2 .con{
	font-size: 1px; padding-top: 140em; position: relative;
	display: flex; align-items: center; justify-content: center;
}

/* .motion .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;
} */
.motion .s06 .cont.n2 .con .cover.on{opacity: 1;}

.motion .s06 .cont.n2 .con .side{
	position: relative; display: flex; align-items: center;
}
.motion .s06 .cont.n2 .con .side .obj{}
.motion .s06 .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;
}
/* 왼쪽 */
.motion .s06 .cont.n2 .con .side.left{}
.motion .s06 .cont.n2 .con .side.left .obj{}
.motion .s06 .cont.n2 .con .side.left .obj svg{
	stroke: var(--yello); fill: transparent; width: 302em; width: 270em; overflow: visible;
}
.motion .s06 .cont.n2 .con .side.left .obj svg g{}
.motion .s06 .cont.n2 .con .side.left .obj svg g path{}
.motion .s06 .cont.n2 .con .side.left .obj svg g path{animation: scale110 infinite 4s,opacity50 infinite 8s; transform-origin: center;}
.motion .s06 .cont.n2 .con .side.left .obj svg g path:nth-child(2){animation-delay: calc(.1s * 2);}
.motion .s06 .cont.n2 .con .side.left .obj svg g path:nth-child(3){animation-delay: calc(.1s * 3);}
.motion .s06 .cont.n2 .con .side.left .obj svg g path:nth-child(4){animation-delay: calc(.1s * 4);}
.motion .s06 .cont.n2 .con .side.left .obj svg g path:nth-child(5){animation-delay: calc(.1s * 5);}
.motion .s06 .cont.n2 .con .side.left .obj svg g path:nth-child(6){animation-delay: calc(.1s * 6);}
.motion .s06 .cont.n2 .con .side.left .obj svg g path:nth-child(7){animation-delay: calc(.1s * 7);}
.motion .s06 .cont.n2 .con .side.left .obj svg g path:nth-child(8){animation-delay: calc(.1s * 8);}
.motion .s06 .cont.n2 .con .side.left .obj svg g path:nth-child(9){animation-delay: calc(.1s * 9);}
.motion .s06 .cont.n2 .con .side.left .obj svg g path:nth-child(1){animation-delay: calc(.1s * 1);}
.motion .s06 .cont.n2 .con .side.left .obj svg g path:nth-child(10){animation-delay: calc(.1s * 10);}
.motion .s06 .cont.n2 .con .side.left .obj svg g path:nth-child(11){animation-delay: calc(.1s * 11);}
.motion .s06 .cont.n2 .con .side.left .obj svg g path:nth-child(12){animation-delay: calc(.1s * 12);}

/* 오른쪽 */
.motion .s06 .cont.n2 .con .side.right{}
.motion .s06 .cont.n2 .con .side.right .obj{}
.motion .s06 .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);}
}
.motion .s06 .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;
}
.motion .s06 .cont.n2 .con .side.right .obj > div > div:nth-child(1){}
.motion .s06 .cont.n2 .con .side.right .obj > div > div:nth-child(2){
	margin-left: auto; animation-delay: 1s;
}

/* 가운데 */
.motion .s06 .cont.n2 .con .center{
	min-width: 856em;
	display: flex; align-items: center; justify-content: center;
	position: relative;
}
.motion .s06 .cont.n2 .con .center .box{
	display: flex; align-items: center; justify-content: center;
	position: absolute;
	
}
.motion .s06 .cont.n2 .con .center .box > div{
	position: absolute;
	display: flex; align-items: center; justify-content: center;
}

.motion .s06 .cont.n2 .con .center .fill div,
.motion .s06 .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;
}
.motion .s06 .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);
}
.motion .s06 .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);
}

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

.motion .s06 .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;
}
.motion .s06 .cont.n2 .con .center .txt div{overflow: hidden;}
.motion .s06 .cont.n2 .con .center .txt b{font-weight: 700; display: block;}


/* center 튀어오르기 */
.motion .s06 .cont.n2 .con .center.scale .fill{animation: s4center01 infinite 3s cubic-bezier(0.6, 0, 0.2, 1);}
.motion .s06 .cont.n2 .con .center.scale .stroke{animation: s4center01 infinite 3s cubic-bezier(0.6, 0, 0.2, 1);}
.motion .s06 .cont.n2 .con .center.scale .wave{opacity: 1;}
.motion .s06 .cont.n2 .con .center.scale .wave.n1 img{animation: s4center02 infinite 3s 0.2s cubic-bezier(0.6, 0, 0.2, 1);}
.motion .s06 .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;}
}



/* 추가 */
.motion .s06 .cont.n2 .con .center .plus{
	position: absolute;
	color: #fff; font-size: 100em; font-size: max(50em,40px);
	margin-bottom: -0.1em;
}
.motion .s06 .cont.n2 .con .center .line{
	position: absolute; z-index: -1;
	width: 100%; height: 1px; background-color: #fff;
	transform-origin: left center;
	opacity: 0.4;
}
.motion .s06 .cont.n2 .lastTxt{padding-top: 140px;}
.motion .s06 .cont.n2 .lastTxt >div{overflow: hidden;}
.motion .s06 .cont.n2 .lastTxt h3{font-size: 68px;font-weight: 500;letter-spacing: -0.025em;color: #363636;font-family: 'Dm Sans', sans-serif;font-style: italic;}
.motion .s06 .cont.n2 .lastTxt p{font-size: 36px;font-weight: 500;letter-spacing: -0.025em;line-height: 1.3;color: #ffffff;text-align: center;padding-top: 20px;}
.motion .s06 .cont.n2 .lastTxt p em{font-weight: 700;}


/* 하단 반응형 */
@media screen and (max-width:1600px) {
	.motion .s06 .cont.n2 .con{font-size: calc(1/1600*100vw);}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	.motion .s06 .cont.n2{padding-top: 30vw;}
	.motion .s06 .cont.n2 .con{padding-top: 16vw;}

    .motion .s06 .cont h3 > div{font-size: 40px;}
}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {

    .motion .s06 .cont.n2 {padding-bottom: 160px;}
    .motion .s06 .cont h3 > div{
    font-size: clamp(20px, calc(40 / 820 * 100vw), 40px);
    }
}
@media screen and (max-width:500px) {
	.motion .s06 .cont.n2 .con{padding-top: 20vw;}
	.motion .s06 .cont.n2 .con .center{min-width: 780em; margin: 0 80em;}
	.motion .s06 .cont.n2 .con .center .fill div,
	.motion .s06 .cont.n2 .con .center .stroke div{width: 420em; height: 420em;}
	.motion .s06 .cont.n2 .con .center .txt{color: #fff;}

    .motion .s06 .cont h3 > div{font-size: clamp(18px, calc(32 / 500 * 100vw), 32px);
    }
}
@media screen and (max-width:320px) {
	.motion .s06 .cont.n2 .con .side > p{font-size: 12px;}
}


/* s07 */
.motion .s07{padding-top: 120px;padding-bottom: 200px;}
.motion .s07 .txt{padding-top: 80px;text-align: center;}
.motion .s07 .txt > div{overflow: hidden;}
.motion .s07 .txt p{
    font-size: 40px;line-height: 1.4;
    display: inline-flex;flex-direction: column;
    font-weight: 700;
}
.motion .s07 .txt p span{
    display: inline-block;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}

.motion .s07 .cardBx{padding-top: 60px;
    display: flex;justify-content: center;gap: 40px;
    max-width: 1310px; margin: 0 auto;
    position: relative;
}
.motion .s07 .cardBx .card{
    max-width: 410px;
    width: 100%;
    border: 2px solid #eeeeee;
    border-radius: 9px;
}
.motion .s07 .cardBx .card .inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.motion .s07 .cardBx .card ._tit{
    background-color: #eeeeee;
    padding: 30px 0;
    box-sizing: border-box;
    text-align: center;
}
.motion .s07 .cardBx .card.n2{border: 2px solid #e2f157;}
.motion .s07 .cardBx .card.n2 ._tit{background-color: #e2f157;}
.motion .s07 .cardBx .card.n3{border: 2px solid #4754d2;}
.motion .s07 .cardBx .card.n3 ._tit{background-color: #4754d2;}

.motion .s07 .cardBx .card ._tit h4{
    font-size: 36px;
    font-weight: 700;
    color: #101010;
}
.motion .s07 .cardBx .card ._tit.white h4,
.motion .s07 .cardBx .card ._tit.white p{color: #fff;}
.motion .s07 .cardBx .card ._tit p{
    font-size: 16px;
    font-weight: 400;
    color: #101010;
    padding-top: 8px;
    
}
.motion .s07 .cardBx .card .bottom{flex-grow: 1; padding: 30px;padding-top: 40px;box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;}
.motion .s07 .cardBx .card .detail{box-sizing: border-box; padding: 0 10px; flex-grow: 1; display: flex; flex-direction: column; }
.motion .s07 .cardBx .card .detail .row{display: flex;align-items: center;gap: 10px;}
.motion .s07 .cardBx .card .detail .row + .row {padding-top: 25px;}
.motion .s07 .cardBx .card .detail .check{padding-top: 40px; padding-bottom:15px;}
.motion .s07 .cardBx .card .detail .check .row+ .row {padding-top: 0px;}
.motion .s07 .cardBx .card .detail .row p{font-size: 18px;font-weight: 400;color: #333;line-height: 1.6666;}
.motion .s07 .cardBx .card .detail .check .row p {font-size: 16px; font-weight: 400; color: #555; letter-spacing: -0.025em;}
.motion .s07 .cardBx .card .detail .row i{font-size: 18px;color: #eeeeee;line-height: 1.6666;}
.motion .s07 .cardBx .card.n2 .detail .row i{color: #e2f157;}
.motion .s07 .cardBx .card.n3 .detail .row i{color: #4754d2;}
.motion .s07 .cardBx .card .imgBx{
    display: flex;
    align-items: center;
    justify-content: center;
}
.motion .s07 .cardBx > p {
    position: absolute;top: 100%;left: auto;right: 0;text-align: right;font-size: 16px;color: #999;margin-top: 20px;
}


@media screen and (max-width:1680px) {
    .motion .s07 .cardBx{gap: 30px;}
    .motion .s07 .cardBx .card{max-width: 390px;}
    .motion .s07 .cardBx .card .bottom {padding: 20px;padding-top: 40px;}

    .motion .s07 .txt p, .motion .s07 .cardBx .card ._tit h4{font-size: 36px;}
}
@media screen and (max-width:1440px) {
    .motion .s07 .cardBx .card .detail .row p {font-size: 16px;}
    .motion .s07 .cardBx .card .detail .check .row p {font-size: 14px;}
    .motion .s07 .txt p, .motion .s07 .cardBx .card ._tit h4 {font-size: 32px;}
}
@media screen and (max-width:1280px) {
    .motion .s07 .cardBx .card{flex-direction: column;}
    .motion .s07 .cardBx .card .detail .row p br{display: none;}
    .motion .s07 .txt p, .motion .s07 .cardBx .card ._tit h4{font-size: 28px;}
    /* .motion .s07 .cardBx .card .detail .check .row+ .row {padding-top: 0px;} */
}
@media screen and (max-width:1024px) {
    .motion .s07{padding: 120px 0;}
    .motion .s07 .cardBx .card .detail .row p {font-size: 15px;}
    .motion .s07 .txt p, .motion .s07 .cardBx .card ._tit h4 {font-size: 26px;}
    .motion .s07 .cardBx .card ._tit p{font-size: 16px;}
}
@media screen and (max-width:820px) {
    .motion .s07 .cardBx{flex-direction: column; align-items: center;}
    .motion .s07 .cardBx .card{max-width: unset;width: 100%;}
    .motion .s07 .cardBx .card .detail {padding: 0 0px;}
    .motion .s07 .cardBx .card .detail .row p{font-size: 16px;}
    .motion .s07 .cardBx .card .detail .row{min-height: unset;}
    .motion .s07 .cardBx .card .detail .row + .row {padding-top: 15px;}
    .motion .s07 .cardBx .card .bottom {padding: 20px;padding-top: 40px;}
    /* .motion .s07 .cardBx .card .imgBx{padding-top: 40px;} */
    .motion .s07 .cardBx .card .detail .check {padding-top: 30px;}
    .motion .s07 .cardBx .card ._tit{padding: 15px 0;}
}
@media screen and (max-width:500px) {
    .motion .s07 .txt p, .motion .s07 .cardBx .card ._tit h4 {font-size: 24px;}
    .motion .s07 .cardBx .card ._tit p {font-size: 14px;}
    .motion .s07 .cardBx .card .detail .check {padding-top: 20px; padding-bottom: 20px;}
    .motion .s07 .cardBx .card .detail .row p {font-size: 14px;}
    .motion .s07 .cardBx .card .detail .row + .row {padding-top: 20px;}
    .motion .s07 .cardBx > p {font-size: 14px; text-align: center; width: 100%; line-height: 1.3; word-break: keep-all;}
}
@media screen and (max-width:360px) {
    .motion .s07 .txt p, .motion .s07 .cardBx .card ._tit h4 {
        font-size: 20px;
    }
}

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



.motion .s08 .right{
	width: 50%;
	background-color: #fafafa;
	display: flex; align-items: center; justify-content: center;
}
.motion .s08 .right h4{
	font-size: min(calc(1/1920*100vw),calc(1/980 * (var(--vh,1vh) * 100))); color: #101010;
}
.motion .s08 .right h4 small{font-size: max(20em,14px); letter-spacing: -0.025em;}
.motion .s08 .right h4 small b{font-weight: 700; display: inline-block;}
.motion .s08 .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);}
.motion .s08 .right h4 strong div{overflow: hidden;}
.motion .s08 .right h4 strong b{font-weight: 600; display: inline-block;}
.motion .s08 .right h4 a{color: #fff; background-color: var(--purple); padding: 0 0.8em; width: auto;}
.motion .s08 .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) {
	.motion .s08 .cont{display: block; width: 100%; height: auto;}
	.motion .s08 .swiper{width: 100%;}
	.motion .s08 .right{padding: min(14vw,80px) 0; text-align: center; width: 100%;}
	.motion .s08 .right h4 a{margin: 0 auto;}
}
@media screen and (max-width:1024px) {
	.motion .s08 .right h4{font-size: calc(0.6/1024*100vw);}
}
@media screen and (max-width:820px) {
	.motion .s08 .right h4{font-size: min(calc(0.9/820*100vw),0.7px); text-align: center;}
	.motion .s08 .right h4 small{line-height: 1.3;}
	.motion .s08 .right h4 a{margin: 0 auto;}
}
@media screen and (max-width:500px) {}
@media screen and (max-width:320px) {}


/* s09*/
.motion .s09{
	height: 100vh; margin-top: -1px;
	width: calc(100vw + 2px); background-color: #000;
}

html.mo .motion .s09{
	height: calc((var(--vh,1vh) * 100) + 60px);
}
html.kakaoWeb .motion.s8{
	height: calc((var(--vh,1vh) * 100) + 110px);
}
.motion .s09 .wrap{
	height: 100%;
	display: flex; align-items: center; justify-content: space-between;
}
.motion .s09 .wrap .txtArea{font-size:	min(calc(1/1920*100vw),calc(1/980 * (var(--vh,1vh) * 100)));}
.motion .s09 .wrap .txtArea > p{
	color: #fff; font-size: max(20em,14px); font-weight: 500; letter-spacing: -0.025em;
}
.motion .s09 .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;
}
.motion .s09 .wrap .txtArea h4 b{font-weight: 700; color: var(--yello);}
.motion .s09 .wrap .txtArea .btnBx{
	display: flex; align-items: center; justify-content: flex-start; gap: 10px;
}
.motion .s09 .wrap .txtArea .btnBx a{}
.motion .s09 .wrap .txtArea .btnBx a:before {background-color: var(--purple);}
.motion .s09 .wrap .txtArea .btnBx a:nth-child(1)::after{background-color: #fff;}
.motion .s09 .wrap .txtArea .btnBx a:nth-child(2)::after{background-color: var(--yello);}
.motion .s09 .wrap .txtArea .btnBx a img{filter: brightness(0);}
.motion .s09 .wrap .txtArea .btnBx a p{}


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

.motion .s09 .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;
}




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

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

/* 말풍선 */
.motion .s09 .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;
}
.motion .s09 .wrap .messageArea .message.white{background-color: #fff;}
.motion .s09 .wrap .messageArea .message.yello{background-color: var(--yello);}
.motion .s09 .wrap .messageArea .message img{
	position: absolute; width: calc(11/16*1em);
}
.motion .s09 .wrap .messageArea .message img.left{top: 5%; left: 0;}
.motion .s09 .wrap .messageArea .message img.right{top: 5%; right: 0;}

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


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

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

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


/* 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;cursor: pointer;}
.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;}
}




/* 0611수정 */
.s1 .wrap {
    display: flex; 
    align-items: flex-end; 
    justify-content: space-between;
    margin-bottom: 180px;
}

.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;
    color: #fff;
}

.s1 .wrap .right .txtBx > div:nth-child(1) {
    overflow: hidden;
}

.s1 .wrap .right .txtBx div p {}
.motion .s01 .wrap .right .txtBx .top {
    overflow: hidden;
}
.motion .s01 .wrap .right .txtBx .top p {
    transform: translateY(110%);
}

.s1 .wrap .right .txtBx .bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.15em;
}

.s1 .wrap .right .txtBx .bottom div {
    overflow: hidden;
}

.s1 .wrap .right .txtBx .bottom .line {
    width: 3em;
    height: 2px;
    background-color: #fff;
    transform-origin: left;
}

/* 반응형 스타일 */
@media screen and (max-width:1440px) {
    .s1 .wrap {
        margin-bottom: max(calc(180/1440*100vw),140px);
    }
    
    .s1 .wrap .right {
        padding-bottom: 2px;
    }
}

@media screen and (max-width:1280px) {
    .s1 .wrap .right .txtBx {
        font-size: max(calc(32/1280*100vw),18px);
    }
}

@media screen and (max-width:820px) {
    .s1 .wrap {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 130px;
    }
    
    .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;
        text-align: left;
    }

    .motion .s01 .wrap h3 > div p {
        text-align: left;
    }

    .motion .s01 .wrap .right .txtBx .top {
        text-align: left;
    }
}

.double_btnWrap{display: flex; justify-content: center;align-items: center;gap: calc(10/18*1em);padding-top: calc(90/18*1em);font-size: 18px;}
.double_btnWrap .btn{transition: all .3s ease-in-out; display: flex; justify-content: center; align-items: center; min-width: calc(210/18*1em); padding: calc(22/18*1em) calc(35/18*1em); box-sizing: border-box; border-radius: calc(9/18*1em); border: 1px solid #000; background: #fff; color: #101010; letter-spacing: -0.025em; font-family: 'Pretendard';}
.double_btnWrap .btn.black {background: #000; color: #fff;}
@media screen and (min-width: 821px) {
    .double_btnWrap .btn:hover {
        background: #000;
        color: #fff;
    }
    .double_btnWrap .btn.black:hover {
        background: #fff;
        color: #000;
    }
}
@media screen and (max-width: 820px) {
    .double_btnWrap {font-size: 16px;}
}
@media screen and (max-width: 500px) {
    .double_btnWrap {flex-direction: column;}
    .double_btnWrap .btn {padding: calc(15/16*1em) calc(20/16*1em);}
}

.s01_2{
    height: 100vh;
}
.s01_2 .wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.s01_2 .wrap .txtBx{
    font-size: 82px;
    font-weight: 600;
    color: #101010;
    text-align: center;
    font-family: 'Pretendard';
    line-height: 1.8;
    position: relative;
    padding: calc(50/82*1em) 0;
}
.s01_2 .wrap .txtBx p b {
    background: #e2f157;
    border-radius: calc(63/82*1em);
    padding: calc(15/82*1em) calc(40/82*1em);
    position: relative;
}
.s01_2 .wrap .txtBx p b::before {
    content: '';
    display: block;
    width: 2px;
    height: 55%;
    background: #000;
    position: absolute;
    right: calc(30/82*1em);
    top: 50%;
    transform: translateY(-50%);
    animation: cursor 1s steps(2) infinite;
    display: none;
}
.s01_2 .wrap .txtBx .objWrap{
    width: 100%; height: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.s01_2 .wrap .txtBx .objWrap .obj{
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(30%);
}
.s01_2 .wrap .txtBx .objWrap .obj p {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-family: 'Pretendard';
    color: #fff;
    letter-spacing: -0.02em;
    background: #4754d2;
    /* opacity: 0; */
    border-radius: calc(9/16*1em);
    padding: calc(13/16*1em) calc(24/16*1em);
    box-sizing: border-box;
}
.s01_2 .wrap .txtBx .objWrap .obj p:before {
    content: '';
    display: block;
    width: calc(20/16*1em);
    height: calc(20/16*1em);
    background: #4754d2;
    position: absolute;
    top: 100%;
    left: 25%;
    transform: translate(-50%,-50%) rotate(45deg);
}
.s01_2 .wrap .txtBx .objWrap .obj._1 {
    top: auto;
    bottom: 98%;
    animation: obj1 2s .5s ease-in-out infinite;
}
.s01_2 .wrap .txtBx .objWrap .obj._2 {
    right: auto;
    left: 0;
    top: 96%;
    transform: translateX(-50%);
    animation: obj2 2s .2s ease-in-out infinite;
}
.s01_2 .wrap .txtBx .objWrap .obj._2 p:before {
    left: auto;
    right: 10%;
    top: 0;
}
@keyframes obj1 {
    0% {
        transform: translateX(30%) translateY(0);
    }
    50% {
        transform: translateX(30%) translateY(30%);
    }
    100% {
        transform: translateX(30%) translateY(0%);
    }
}
@keyframes obj2 {
    0% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-30%);
    }
    100% {
        transform: translateX(-50%) translateY(0%);
    }
}
@keyframes cursor {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


@media screen and (max-width:1280px) {
    .s01_2 .wrap .txtBx {
        font-size: clamp(28px, calc(82/1280*100vw), 82px);
    }
}

@media screen and (max-width:1024px) {
    .s01_2 .wrap .txtBx {
    }
}

@media screen and (max-width:820px) {
    .s01_2 {
        height: auto;
        padding: 300px 0 100px;
    }
    .s01_2 .wrap .txtBx .objWrap .obj {
        font-size: 14px;
    }
    .s01_2 .wrap .txtBx .objWrap .obj._2 {
        left: 7%;
    }
}

@media screen and (max-width:500px) {
    .s01_2 {
        padding: 160px 0 0px;
    }
    .motion .s02 .txtBx {
        padding-top: 140px;
    }
    .s01_2 .wrap .txtBx .objWrap .obj._1 {
        right: 30%;
    }
    .s01_2 .wrap .txtBx .objWrap .obj._2 {
        left: 30%;
    }
    .s01_2 .wrap .txtBx .objWrap .obj._2:before {
        right: auto;
        left: 50%;
    }
    .s01_2 .wrap .txtBx .objWrap .obj p {
        font-size: calc(15/500*100vw);
    }
}

@media screen and (max-width:360px) {
    .s01_2 .wrap .txtBx {
        font-size: clamp(20px, calc(28/360*100vw), 28px);
    }
    .s01_2 .wrap .txtBx .objWrap .obj {
        font-size: 12px;
    }
}


.s04 .item {
    display: flex; align-items: stretch; justify-content: space-between; padding: 40px 0;
    position: relative;
}
.s04 .item + .item {
    border-top: 1px solid rgba(0, 0, 0, .2);
}
.s04 .item .txt {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
.s04 .item .txt .top {
    display: flex;
    flex-direction: column;
}
.s04 .item .txt span {
    font-size: 80px;
    font-family: 'Pretendard';
    color: #101010;
    font-weight: 600;
    display: inline-block;
    letter-spacing: -0.025em;
    padding-bottom: calc(30/80*1em);
}
.s04 .item .txt .bigTxt {
    display: inline-block;
    font-size: 40px;
    font-family: 'Pretendard';
    font-weight: 700;
    color: #101010;
    letter-spacing: -0.025em;
    line-height: calc(60/40*1em);
}
.s04 .item .txt .smallTxt {
    font-size: 20px;
    line-height: calc(30/20*1em);
    letter-spacing: -0.025em;
    color: #101010;
}
.s04 .item .txt .smallTxt em {
    color: #4754d2;
}
.s04 .item .img {
    width: calc(855/1440*100%);
    position: relative;
}
.s04 .item .objWrap {
    position: absolute; 
    left: 0; bottom: 0;
    width: 100%; height: 100%;
}
.s04 .item .objWrap .obj {
    font-size: 18px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(20/18*1em) calc(30/18*1em);
    background: #fff;
    border-radius: calc(9/18*1em);
    color: #101010;
    letter-spacing: -0.025em;
    font-weight: 600;
    box-sizing: border-box;
}
.s04 .item .objWrap .obj:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: calc(18/18*1em);
    height: calc(18/18*1em);
    background: inherit;
    transform: translate(-50%, -50%) rotate(45deg);
}
.s04 .item .objWrap .obj._1 {
    top: 25%;
    left: 13%;
    background: #4754d2;
    color: #fff;
    animation: s4_obj1 2s .5s ease-in-out infinite;
}
.s04 .item .objWrap .obj._2 {
    top: auto;
    bottom: 20%;
    left: auto;
    right: 10%;
    animation: s4_obj2 2s .2s ease-in-out infinite;
}
.s04 .item .objWrap .obj._3 {
    top: 45%;
    left: 30%;
    animation: s4_obj2 2s ease-in-out infinite;
}
@keyframes s4_obj1 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(30%);
    }
    100% {
        transform: translateY(0%);
    }
}
@keyframes s4_obj2 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-30%);
    }
    100% {
        transform: translateY(0%);
    }
}
@media screen and (max-width:1280px) {
    .s04 .item {
        align-items: flex-start;
    }
    .s04 .item .img {
        width: 50%;
    }
    .s04 .item .txt {
        justify-content: flex-start;
    }
    .s04 .item .txt .bigTxt {
        padding-bottom: calc(100/40*1em);
    }
    .s04 .item .objWrap .obj {
        font-size: 16px;
    }
}
@media screen and (max-width: 1024px) {
    .motion .s04 {
        padding-top: 120px;
    }
    .motion .s05 {
        padding-top: 120px;
    }
    .s04 .item {
        flex-direction: column-reverse;
    }
    .s04 .item .img {
        width: 100%;
    }
    .s04 .item .txt {
        width: 100%;
        padding-top: 40px;
    }
    .s04 .item .txt span {
        font-size: 60px;
    }
    .s04 .item .txt .bigTxt {
        font-size: 32px;
    }
}
@media screen and (max-width: 820px) {
    .s04 .item .objWrap .obj {
        font-size: clamp(10px, 16/820*100vw, 16px);
    }
    .s04 .item .txt span {
        font-size: clamp(24px, 36/820*100vw, 36px);
    }
    .s04 .item .txt .bigTxt {
        font-size: clamp(24px, 36/820*100vw, 36px);
    }
    .s04 .item .txt .smallTxt {
        font-size: clamp(16px, 20/820*100vw, 20px);
    }
}
@media screen and (max-width: 500px) {
    .s04 .item .txt span {
        font-size: clamp(20px, 28/500*100vw, 28px);
    }
    .s04 .item .txt .bigTxt {
        font-size: clamp(20px, 28/500*100vw, 28px);
    }
    .s04 .item .txt .smallTxt {
        font-size: clamp(14px, 18/500*100vw, 18px);
    }
}
@media screen and (max-width: 360px) {
    .s04 .item .txt span {
        font-size: clamp(18px, 24/360*100vw, 24px);
    }
    .s04 .item .txt .bigTxt {
        font-size: clamp(18px, 24/360*100vw, 24px);
    }
    .s04 .item .txt .smallTxt {
        font-size: clamp(12px, 16/360*100vw, 16px);
    }
}