:root{}
html{overflow: hidden;}
/* 맨처음 순간적으로 보이는것때문에 셋팅한거 스크립트로 다시 원복시킴 s1tl, introTl */
body{background-color: #000; opacity: 0;}
html.pc #smooth-wrapper{will-change: transform !important;}
html.pc #smooth-content{will-change: transform !important;}
html.pc .pin-spacer{will-change: transform !important;}
main{color: #fff;}



/* 공통 */
._txtMotion{
	font-family: 'Roboto'; color: var(--red); line-height: 1.75;
	position: absolute; font-weight: 400;
	white-space: nowrap; text-align: left;
}
._txtMotion > div{
	display: flex; align-items: flex-start; gap: calc(14/16
	*1em); font-size: 16px;
}
._txtMotion > div::before {
	content:'•'; display: block; font-size: calc(20/16*1em); line-height: 1.35;
}
._txtMotion div{}
._txtMotion div br{}

._gradiant_txt{
	-webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}
section{position: relative; z-index: 2; overflow: hidden;}



@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	._txtMotion > div{font-size: 14px;}
}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	._txtMotion > div{font-size: 12px;}
}
@media screen and (max-width:500px) {
	/* ._txtMotion > div{font-size: 10px;} */
}
@media screen and (max-width:320px) {}
@media screen and (max-height:500px) {
	._txtMotion > div{font-size: 12px;}
}






/* 인트로 */
.introArea{
	position: fixed; z-index: 99999; width: 100%; height: 100%;
	background-image: url(/asset/img/main/intro_bg.jpg); background-size: cover;
	background-position: center center;
}
.introArea > div{
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
}
.introArea .motion{position: absolute;}
.introArea .motion.n1{
	letter-spacing: -0.025em;
	font-size: calc(60/1920*100vw); color: #fff;
	font-family: 'Cormorant Garamond';
}
.introArea .motion.n1 > div{display: flex; gap: 0.2em;}

.introArea .motion.n2{width: 70%;}
.introArea .motion.n2 .box{
	width: 100%;
	position: relative; display: flex; align-items: center; justify-content: center;
}
.introArea .motion.n2 .txt{
	position: relative; z-index: 2; text-align: center; font-weight: 700;
	font-size: calc(80/1920*100vw); font-family: 'Roboto'; line-height: calc(90/80); color: #fff;
	overflow: hidden;
}
.introArea .motion.n2 .txt div{overflow: hidden;}
.introArea .motion.n2 .txt p{}

.introArea .motion.n2 .imgBx{position: absolute; width: 100%; z-index: 0;}
.introArea .motion.n2 .imgBx::before {
	content:''; display: block; padding-bottom: calc(742/1341*100%);
}
.introArea .motion.n2 .imgBx div{width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.introArea .motion.n2 .imgBx div img{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;
}

.introArea .motion.n3{z-index: 999;}
.introArea .motion.n3 svg{width: calc(313/1920*100vw);}
.introArea .motion.n3 svg .st0{fill: #fff;}
.introArea .motion.n3 svg .st1{fill: var(--red);}

/* 모션 셋팅 */
.introArea .motion.n1 > div > div{transform: translateX(-100px); opacity: 0;}
.introArea .motion.n2 .txt p{transform: translateY(110%);}
.introArea .motion.n2 .imgBx{transform: translateX(-100px); opacity: 0;}
.introArea .motion.n2 .imgBx div{transform: scale(0.8);}
.introArea .motion.n2 .imgBx img:not(:first-child){opacity: 0;}
.introArea .motion.n3{opacity: 0; transform: translateX(-200px);}




@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	.introArea .motion.n1{font-size: calc(70/820*100vw);}
	.introArea .motion.n2{width: 90%;}
	.introArea .motion.n2 .txt{font-size: calc(50/820*100vw);}
	.introArea .motion.n3 svg{width: calc(240/820*100vw);}
}
@media screen and (max-width:500px) {
	.introArea .motion.n1{font-size: calc(54/500*100vw);}
	.introArea .motion.n3 svg{width: calc(180/500*100vw);}
}
@media screen and (max-width:320px) {}


















/* s1 */
.s1{position: relative; width: 100%; height: var(--vh100); overflow: hidden;}
html.mo .s1{height: calc(var(--vh100) - 60px)}
.s1 .pinBx{width: 100%; height: 100%;}
.s1 .bg{
	position: absolute; left: 0; top: 0;
	width: 100%; height: 100%;
}
.s1 .bg div{
	width: 100%; height: 100%; background-size: cover;
	background-position: center;
}
.s1 .wrap{
	display: flex; align-items: flex-end; justify-content: flex-start;
	height: 100%;
}
.s1 .cont{
	position: relative; padding-bottom: 30px; width: 100%;
}
.s1 .cont .top{
	display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
	gap: 20px;
}
.s1 .cont .top h3{
	font-size: 26px; letter-spacing: -0.025em; line-height: 1.538;
	margin-bottom: -0.25em; font-weight: 300;
}
.s1 .cont .top h3 b{font-weight: 600;}
.s1 .cont .top .videoBx{
	width: 392px; display: flex; align-items: center; justify-content: center;
	position: relative;
}
.s1 .cont .top .videoBx::before {
	content:''; display: block; padding-bottom: calc(9/16*100%);
}

.s1 .cont .top .videoBx > iframe{z-index: 2; position: absolute; width: 100%; height: 100%;}
.s1 .cont .top .videoBx > img{z-index: 1; position: absolute; width: 98%; height: 98%;}
.s1 .cont h2{
	font-size: 234px; color: var(--red); font-family: 'Roboto'; font-weight: 700;
	letter-spacing: -0.025em; margin-left: -0.07em; white-space: nowrap;
	line-height: 0.76; margin-top: max(calc(26/235*1em),20px); overflow: hidden;
	padding-top: 0.1em;
}

.s1 .marquee{
	display: flex; color: var(--red); font-size: 234px; white-space: nowrap;
	position: absolute; left: 0; bottom: 0; font-family: 'Roboto'; font-weight: 700; letter-spacing: -0.025em; line-height: 0.76;
	display: none; padding-bottom: 40px;
}

.s1 .marquee p{animation: marquee forwards infinite 40s linear;}

/* 작은 텍스트 위치 */
.s1 ._txtMotion.n1{top: 20%; left: 9%;}
.s1 ._txtMotion.n2{top: 50px; left: 18%;}
.s1 ._txtMotion.n3{right: 66px; bottom: 120%;}


/* 모션 셋팅 */
header{opacity:0;transform: translateY(-100%);}
.s1 .bg div{transform: scale(1.4); filter: blur(12px);}
.s1 ._txtMotion{opacity:0;transform: translateY(40px);}
.s1 .cont .top .videoBx{opacity:0; transform: translateY(80px);}
.s1 .cont h3 div{transform: translateX(40px); opacity: 0;}
.s1 .cont h2 > div{transform: translateY(110%);}
.s1 .marquee{opacity: 0; transform: translateY(60px);}

@media screen and (max-width:1678px) {
	.s1 .cont h2{font-size: calc(234/1678*100vw);}
}
@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s1 ._txtMotion.n2{display: none;}
}
@media screen and (max-width:820px) {
	.s1 .cont h2{font-size: calc(108/820*100vw);}
}
@media screen and (max-width:500px) {}
@media screen and (max-width:320px) {}


/* 가로가 길경우 */
@media (orientation: landscape) and (max-height:900px){}
@media (orientation: landscape) and (max-height:800px){}
@media (orientation: landscape) and (max-height:700px){
	.s1 .cont .top .videoBx{width: max(calc(392/700*var(--vh100)),180px);}
	.s1 .cont .top h3{font-size: 22px;}
}
@media (orientation: landscape) and (max-height:600px){}
@media (orientation: landscape) and (max-height:500px){
	.s1 .cont{padding-bottom: 20px;}
}
@media (orientation: landscape) and (max-height:400px){
	.s1 .cont .top h3{font-size: 18px;}
	.s1 ._txtMotion.n1{top: 28%; left: 4%;}
}


/* 세로가 길경우 */
@media (orientation: Portrait) and (max-width:1600px) {}
@media (orientation: Portrait) and (max-width:1440px) {}
@media (orientation: Portrait) and (max-width:1280px) {}
@media (orientation: Portrait) and (max-width:1024px) {
	.s1 ._txtMotion.n2{display: none;}
}
@media (orientation: Portrait) and (max-width:820px) {
	.s1 .cont{padding-bottom: calc((234/820*100vw) + 40px);}
	.s1 .cont .top .videoBx{width: 40%;}
	.s1 .cont .top h3{font-size: min(calc(30/820*100vw),26px);}
	.s1 .cont h2{display: none;}
	.s1 .marquee{display: flex; font-size: calc(234/820*100vw);}
}
@media (orientation: Portrait) and (max-width:500px) {
	/* .s1 .bg{filter: brightness(0.4);} */
	.s1 .cont .top h3{font-size: calc(22/500*100vw);}
	.s1 .cont .top .videoBx{width: 64%;}
	.s1 ._txtMotion div{opacity: 0.8;}
	.s1 ._txtMotion.n1{left: 10px;}
	.s1 ._txtMotion.n3{right: 10px;}
}
@media (orientation: Portrait) and (max-width:320px) {}











/* s2 */
.s2{
	width: 100%; height: var(--vh100); background-color: #101010;
}
.s2 .mo{display: none;}
.s2 .horizon{
	width: 100%; height: 100%;
	display: flex; align-items: center;justify-content: flex-start;
	width: max-content;
}
.s2 .horizon .cont{
	flex-shrink: 0; height: 100%;
	/* border: 1px solid tomato; */
}


/* wrap.n1 */
.s2 .cont.n1{
	font-size: 1px;
	--h3-size:150em;
	transform: translateY(calc( (-1 * var(--vh100)) + ( (var(--vh100) - (var(--h3-size) * 3)) / 2 ) ));
	width: 100vw;
	will-change: transform; backface-visibility: hidden;
}
.s2 .cont.n1 .wrap{
	display: flex; align-items: center; justify-content: center;
	position: relative; height: 100%;
}
.s2 .cont.n1 .txtBx{
	position: absolute;
	color: #fff;
	right: 0;
	width: 100%;
	box-sizing: border-box;

}
.s2 .cont.n1 .txtBx h3{
	display: flex; align-items: center;
	font-size: var(--h3-size); font-weight: 700;
	line-height: 1.1; overflow: hidden;
	font-family: 'Roboto';
}
.s2 .cont.n1 .txtBx h3:not(.n1){position: absolute;}
.s2 .cont.n1 .txtBx h3.n2{top: 1em;}
.s2 .cont.n1 .txtBx h3.n3{top: 2em;}
.s2 .cont.n1 .txtBx h3 p{
	font-weight: 400; font-size: 0.52em;
	height: calc(1em / 0.52);
	margin-left: 0.1em;
}
.s2 .cont.n1 .txtBx h3.n3 p{margin-right: 0.2em;}
.s2 .cont.n1 .txtBx h3 p div{height: 100%;}
.s2 .txtBx .info{
	padding-top: 20px;
	position: absolute;
}
.s2 .cont.n1 .txtBx .info{
	opacity: 0; pointer-events: none;
	transform: translateY(80px);
}
.s2 .txtBx .info .row{font-size: 20px; line-height: 1.6; margin-bottom: calc(40/20*1em);}
.s2 .txtBx .info .row:last-child{margin-bottom: 0;}
.s2 .txtBx .info .row:nth-child(1) div{font-size: calc(32/20*1em); margin-bottom: calc(26/32*1em);}
.s2 .txtBx .info .row div{margin-bottom: 0.3em; font-weight: 600;}
.s2 .txtBx .info .row p{color: #7c7c7c;}
.s2 .cont.n1 .imgBx{
	position: absolute; height: var(--vh100); left: 50%; transform: translateX(-50%);
	width: 540em;
	display: flex; align-items: center; justify-content: center;
}
.s2 .cont.n1 .imgBx .img{opacity: 0; width: 100%; transform: translateY(80px); pointer-events: none; margin-top: var(--headerH);}
.s2 .cont.n1 .imgBx .img .gradiant{position: absolute; left: 0;width: 100%;}
.s2 .cont.n1 ._txtMotion{color: #fff;}
.s2 .cont.n1 ._txtMotion.n1{transform: translate(-420em,-90em);}
.s2 .cont.n1 ._txtMotion.n2{transform: translate(410em,-200em);}
.s2 .cont.n1 ._txtMotion.n3{transform: translate(320em,210em);}
.s2 .cont.n1 ._txtMotion > div{transform: translateY(80px); opacity: 0; pointer-events: none;}

.s2 .cont.n1 .imgBx .img .gradiant.top{top: 0; height: 14%; background: linear-gradient(180deg,rgba(16, 16, 16, 1) 10%, rgba(16, 16, 16, 0) 100%);}
.s2 .cont.n1 .imgBx .img .gradiant.bottom{bottom: 0; height: 20%; background: linear-gradient(0deg,rgba(16, 16, 16, 1) 40%, rgba(16, 16, 16, 0) 100%);}

/* dummy */
.s2 .cont.n1 .txtBx div[class*='dummy']{
	/* box-shadow: 0px 0px 0px 1px dodgerblue; */
}
.s2 .cont.n1 .txtBx .dummy_top{height: 0;}
.s2 .cont.n1 .txtBx .dummy_bottom{height: calc(var(--h3-size) * 2);}



/* transition */
.s2 .cont.n1 .txtBx{transition: width 1s;}
.s2 .cont.n1 .txtBx div[class*='dummy']{transition: height 0.8s;}
.s2 .cont.n1 .txtBx h3{transition: font-size 0.8s,color 0.8s,opacity 0.8s,transform 0.8s; transform-origin: left center;}
.s2 .cont.n1 .txtBx .info{transition: opacity 0.8s,transform 0.8s;}

.s2 .cont.n1 .imgBx{transition: transform 0.8s,left 0.8s,width 0.8s;}
.s2 .cont.n1 .imgBx .img{transition: opacity 0.8s,transform 0.8s,margin-top 0.8s,width 0.8s;}
.s2 .cont.n1 ._txtMotion > div{transition: opacity 0.8s,transform 0.8s;}

/* motion01 */
.s2.motion01 .cont.n1 .txtBx .dummy_top{height: var(--headerH);}
.s2.motion01 .cont.n1 .txtBx .dummy_bottom{height: 0;}

.s2.motion01 .cont.n1 .txtBx h3.n1{font-size: 206px; color: var(--red);}
.s2.motion01 .cont.n1 .txtBx h3.n2{opacity: 0; transform: translateY(-80px); pointer-events: none;}
.s2.motion01 .cont.n1 .txtBx h3.n3{opacity: 0; transform: translateY(-80px); pointer-events: none;}

.s2.motion01 .cont.n1 .imgBx .img{transform: translateY(0); opacity: 1; pointer-events: auto; transition-delay: 0.6s;}
.s2.motion01 .cont.n1 ._txtMotion > div{transform: translateY(0); opacity: 1; pointer-events: auto;}
.s2.motion01 .cont.n1 ._txtMotion.n1 > div{transition-delay: 0.8s;}
.s2.motion01 .cont.n1 ._txtMotion.n2 > div{transition-delay: 1s;}
.s2.motion01 .cont.n1 ._txtMotion.n3 > div{transition-delay: 1.2s;}

/* motion02 */
.s2.motion02 .cont.n1 .txtBx .dummy_top{height: var(--headerH);}
.s2.motion02 .cont.n1 .txtBx .dummy_bottom{height: 380px;}
.s2.motion02 .cont.n1 .txtBx{width: 50%;}
.s2.motion02 .cont.n1 .txtBx h3.n1{font-size: 80px; color: var(--red);}
.s2.motion02 .cont.n1 .txtBx h3.n2{opacity: 0; transform: translateY(-80px); pointer-events: none;}
.s2.motion02 .cont.n1 .txtBx h3.n3{opacity: 0; transform: translateY(-80px); pointer-events: none;}
.s2.motion02 .cont.n1 .txtBx .info{opacity: 1; transform: translateY(0); transition-delay: 0.8s;}

.s2.motion02 .cont.n1 .imgBx{left: 0; transform: translateX(0); width: 50%;}
.s2.motion02 .cont.n1 .imgBx .img{opacity: 1; width: 62.22%; margin-top: 0; transform: translateY(0px);}





.s2 .cont.n2{
	display: flex; align-items: center; justify-content: center;
	gap: 240px; width: auto;
	margin-left: calc(270px - ((100vw - 1440px) / 2));
	margin-right: calc(240px - ((100vw - 1440px) / 2));
}
.s2 .cont.n2 > *{opacity: 0; transform: translateY(80px); transition: opacity 0.8s,transform 0.8s;}
.s2 .cont.n2 > *.active{opacity: 1; transform: translateY(0);}

/* 그래프 모션 모바일에서도 공통 */
.s2 .graph_motion01{font-size: 1px; padding-top: 100em;}
.s2 .graph_motion01 canvas{width: 286em !important; height: 286em !important; margin-bottom: 28em;}
.s2 .graph_motion01 .box{}
.s2 .graph_motion01 .txt{font-size: max(14em,12px); font-family: 'Roboto'; letter-spacing: -0.025em;}
.s2 .graph_motion01 .txt p{display: flex; align-items: center; gap: 0.8em; color: var(--red);}
.s2 .graph_motion01 .txt p:nth-child(2){color: #fff; margin-top: calc(12/14*1em);}
.s2 .graph_motion01 .txt p::before {
	content:''; display: block; width: calc(12/14*1em); height: calc(12/14*1em); border-radius: 50%;
	background-color: var(--red);
}
.s2 .graph_motion01 .txt p:nth-child(2):before{background-color: #fff;}
.s2 .cont.n2 .txtBx{}
.s2 .cont.n2 .txtBx .info{position: unset; padding-top: 80px;}



.s2 .cont.n3{width: 100vw;}
.s2 .cont.n3 .bg{
	position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 100vw; height: 100%; background-size: cover; background-position: center;
	opacity: 0;
}
.s2 .cont.n3 .wrap{height: 100%;}
.s2 .cont.n3 .con{width: 100%; height: 100%;}

.s2 .cont.n3 .con.n1{
	display: flex; flex-direction: column; justify-content: center; width: 100%; margin-left: auto;
	/* box-shadow: 0 0 0 1px dodgerblue; */
}
.s2 .cont.n3 .con.n1 [class*='dummy']{width: 100%; height: 0;}
.s2 .cont.n3 .con.n1 .dummy_top{}
.s2 .cont.n3 .con.n1 .dummy_bottom{}

.s2 .cont.n3 .con.n1 .tit{font-size: 150px; margin-left: auto;}
.s2 .cont.n3 .con.n1 .tit.n1{position: absolute; transform: translateY(-90%); z-index: -1;}
.s2 .cont.n3 .con.n1 .tit.n2{width: 100%;}
.s2 .cont.n3 .con.n1 .tit.n3{position: absolute; transform: translateY(90%); width: 100%; z-index: -1;}
.s2 .cont.n3 .con.n1 .tit > div{display: flex; align-items: center; position: relative; width: 100%;}
.s2 .cont.n3 .con.n1 .tit > div .h3Bx{
	display: inline-flex; align-items: center; position: relative;
	width: calc(810/150*1em); justify-content: flex-end;
	/* box-shadow: 0 0 0 1px tomato; */
}
.s2 .cont.n3 .con.n1 .tit.n3 > div{width: 100%;}
.s2 .cont.n3 .con.n1 .tit > div h3{
	display: flex; align-items: center;
	font-weight: 700;
	line-height: 1.1;
	position: relative;
	font-family: 'Roboto';
}
.s2 .cont.n3 .con.n1 .tit > div h3 > p{
	font-weight: 400;
    font-size: 0.52em;
    height: calc(1em / 0.52);
    margin-left: 0.1em;
}
.s2 .cont.n3 .con.n1 .tit.n3 > div h3 > p{margin-right: 0.2em;}
.s2 .cont.n3 .con.n1 .tit > div .shadow{
	position: absolute; width: 4em; height: 100%;
	left: 0; top: 0;
	background: linear-gradient(90deg, rgba(16, 16, 16, 1) 0%, rgba(255, 255, 255, 0) 100%);
	transform-origin: left center; transform: scaleX(0);
}

.s2 .cont.n3 .con.n1 .tit > div ._txtMotion{position: absolute; opacity: 0; transform: translateY(60px);}
.s2 .cont.n3 .con.n1 .tit > div ._txtMotion.n1{left: 100%; margin-left: 58px;}
.s2 .cont.n3 .con.n1 .tit > div ._txtMotion.n2{left: -170px;}
.s2 .cont.n3 .con.n1 .tit > div ._txtMotion.n3{right: 60px;}

.s2 .cont.n3 .con.n1 .tit > div .txtBx{
	position: absolute; left: 0; top: 100%;
	opacity: 0; transform: translateY(40px);
	font-size: 20px; letter-spacing: -0.025em; color: #323232;
	line-height: calc(32/20); white-space: nowrap;
}




/* transition */
.s2 .cont.n3 .bg{transition: opacity 0.8s;}
.s2 .cont.n3 .con.n1 [class*='dummy']{transition: height 0.8s;}
.s2 .cont.n3 .con.n1 .tit{transition: width 0.8s 0.8s,opacity 0.8s,transform 0.8s;}
.s2 .cont.n3 .con.n1 .tit.n2 > div{transition: font-size 0.8s,color 0.8s,width 0.8s;}
.s2 .cont.n3 .con.n1 .tit.n2 > div .txtBx{transition: opacity 0.8s,transform 0.8s;}
.s2 .cont.n3 .con.n1 ._txtMotion > div{transition: opacity 0.8s;}
.s2 .cont.n3 .con.n2 > .imgBx.n1{transition: bottom 0.8s,transform 0.8s,opacity 0.8s;}
.s2 .cont.n3 .con.n2 > .imgBx.n1 img{transition: opacity 0.8s;}

/* motion03 */
.s2.motion03 .cont.n3 .bg{opacity: 1;}
.s2.motion03 .cont.n3 .con.n1 .dummy_top{height: calc(var(--headerH) * 0.75);}
.s2.motion03 .cont.n3 .con.n1 .dummy_bottom{height: 256px;}
/* .s2.motion03 .cont.n3 .con.n1 .tit.n1{opacity: 0;}
.s2.motion03 .cont.n3 .con.n1 .tit.n3{opacity: 0;} */
.s2.motion03 .cont.n3 .con.n1 .tit.n2{width: 46%;}
.scrollDown .s2.motion03 .cont.n3 .con.n1 .tit.n2{ transition-duration: 0s; transition-delay: 0s;}
.s2.motion03 .cont.n3 .con.n1 .tit.n2 > div{
	font-size: 80px; color: var(--red); width: calc(428/80*1em);
	transition: font-size 0.8s ease-out,color 0.8s,width 0.8s ease-out;
}
/* .s2.motion03 .cont.n3 .con.n1 .tit.n2 > div{ width: calc(830/150*1em);} */
.s2.motion03 .cont.n3 .con.n1 .tit.n2 > div .txtBx{opacity: 1; transform: translateY(0); transition-delay: 0.8s;}
.s2.motion03 .cont.n3 .con.n1 ._txtMotion > div{opacity: 0;}
.s2.motion03 .cont.n3 .con.n2 > .imgBx.n1{bottom: 50%; transform: translateY(50%);}
.s2.motion03 .cont.n3 .con.n2 > .imgBx.n1 img.n1{opacity: 0;}
.s2.motion03 .cont.n3 .con.n2 > .imgBx.n1 img.n2{opacity: 1;}





.s2 .cont.n3 .con.n2{
	/* box-shadow: 0 0 0 1px dodgerblue; */
	display: flex; align-items: center; justify-content: center;
	position: absolute; left: 0; top: 0;
}
.s2 .cont.n3 .con.n2 > .imgBx.n1{
	position: absolute; width: 54%; text-align: center;
	/* box-shadow: 0 0 0 1px dodgerblue; */
	left: 0; bottom: 0; transform: translateY(60%);
}
.s2 .cont.n3 .con.n2 > .imgBx.n1 > div{
	width: 397px; position: relative; margin: 0 auto;
	opacity: 0; transform: translateY(120px);
}
.s2 .cont.n3 .con.n2 > .imgBx.n1 img{}
.s2 .cont.n3 .con.n2 > .imgBx.n1 img.n1{position: absolute; width: 100%; top: -24.9%;}
.s2 .cont.n3 .con.n2 > .imgBx.n1 img.n2{opacity: 0;}

.s2 .cont.n3 .con.n2 > .imgBx.n2{
	width: 54%; text-align: center; box-sizing: border-box;
	opacity: 0; transform: translateY(120px); padding: 0 60px;
}
.s2 .cont.n3 .con.n2 > .txtBx{width: 46%; opacity: 0; transform: translateY(120px);}
.s2 .cont.n3 .con.n2 > .txtBx .row{font-size: 20px; letter-spacing: -0.025em; line-height: calc(36/20);}
.s2 .cont.n3 .con.n2 > .txtBx .row h4{color: #101010; font-weight: 600;}
.s2 .cont.n3 .con.n2 > .txtBx .row p{color: #323232;}


/* 그래프 모션 모바일에서도 공통 */
.graph_motion02{}
.graph_motion02 > div{width: 492px; max-width: 100%; position: relative; margin: 0 auto;}
.graph_motion02 > div::before {content:''; display: block; padding-bottom: calc(259/492*100%);}
.graph_motion02 img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.graph_motion02 .dot{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.graph_motion02 .dot img{}



/* 모션 */
/* transition */
.s2 .cont.n3 .con.n2 > .imgBx.n2{transition: opacity 0.8s,transform 0.8s cubic-bezier(0.1, 0.6, 0.6, 0.9);}
.s2 .cont.n3 .con.n2 > .txtBx{transition: opacity 0.8s,transform 0.8s cubic-bezier(0.1, 0.6, 0.6, 0.9);}

/* motion04 */
.s2.motion04 .cont.n3 .con.n1 .tit.n2{opacity: 0; transform: translateY(-120px); transition-duration: 0.8s !important;}
.s2.motion04 .cont.n3 .con.n2 > .imgBx.n1{opacity: 0; transform: translateY(calc(50% - 120px));}
.s2.motion04 .cont.n3 .con.n2 > .imgBx.n2{opacity: 1; transform: translateY(0); transition-delay: 0.4s;}
.s2.motion04 .cont.n3 .con.n2 > .txtBx{opacity: 1; transform: translateY(0); transition-delay: 0.4s;}






@media screen and (max-width:1800px) {
	.s2 .cont.n1{font-size: calc(1/1800*100vw);}
	.s2 .cont.n3 .con.n1 .tit{font-size: calc(150/1800*100vw);}

	.s2 .cont.n3 .con.n2 > .imgBx.n1 > div{width: calc(397/1800*100vw);}
}
@media screen and (max-width:1510px){
	.s2 .cont.n1 .imgBx{width: 440em;}

	/* 모션 */
	.s2.motion01 .cont.n1 .txtBx h3.n1{font-size: 245em;}
}
@media screen and (max-width:1440px) {
	.s2 .txtBx .info .row p{font-size: 18px;}

	.s2 .txtBx .info .row{margin-bottom: 24px;}
	.s2 .txtBx .info .row div{font-size: 20px !important; margin-bottom: 10px !important;}
	.s2 .txtBx .info .row p{font-size: 16px;}

	.s2 .cont.n2{gap: 200px; margin-left: 60px; margin-right: 200px;}

	.s2 .cont.n3 .con.n1 .tit > div .txtBx{font-size: 18px; width: 480px; white-space: unset;}
	.s2 .cont.n3 .con.n1 .tit > div .txtBx br:not(.none){display: none;}

	.s2 .cont.n3 .con.n2 > .txtBx .row p{font-size: 16px;}

	/* 모션 */
	.s2.motion02 .cont.n1 .txtBx h3.n1{font-size: calc(60/1440*100vw);}
	.s2.motion02 .cont.n1 .txtBx .dummy_bottom{height: 290px;}
	.s2.motion03 .cont.n3 .con.n1 .tit.n2 > div{font-size: calc(60/1440*100vw);}
}
@media screen and (max-width:1280px) {
	.s2 .txtBx .info{width: 470px;}
	.s2 .txtBx .info .row p br{display: none;}

	.s2 .graph_motion01 img{width: 240px;}
	.s2 .cont.n2 .txtBx .info{padding-top: 0;}

	.s2 .cont.n3 .con.n1 .tit > div .txtBx{width: 420px; font-size: 16px;}

	/* 모션 */
	.s2.motion02 .cont.n1 .txtBx .dummy_bottom{height: 360px;}
}
@media screen and (max-width:1024px) {
	.s2{height: auto;}
	.s2 .pc{display: none;}
	.s2 .mo{display: block;}
}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {}
@media screen and (max-width:320px) {}



/* 모바일용 따로 퍼블 */
.s2 .mo{}
.s2 .mo .wrap{}
.s2 .mo_cont{}

.s2 .mo_cont .titBx{
	font-size: calc(100/1024*100vw); font-weight: 700;
	line-height: 1.2;
}
.s2 .mo_cont .titBx .tit{}
.s2 .mo_cont .titBx .tit.n1{margin-bottom: -0.2em;}
.s2 .mo_cont .titBx .tit.n3{margin-top: -0.2em;}
.s2 .mo_cont .titBx .tit h3{
	display: flex; font-family: 'Roboto'; justify-content: center;
}
.s2 .mo_cont .titBx .tit h3 p{
	font-weight: 400; font-size: 0.52em;
	height: calc(1em / 0.52);
	margin-left: 0.1em;
	display: flex;
}
.s2 .mo_cont .titBx .tit h3 p div{height: 100%;}
.s2 .mo_cont .titBx .tit.n3 h3 p{margin-right: 0.2em;}


.s2 .mo_cont .txtBx{
	line-height: 1.6; font-size: 20px; max-width: 600px; text-align: center;
	display: flex; flex-direction: column; gap: 1.2em; margin: 0 auto;
}
.s2 .mo_cont .txtBx .row{}
.s2 .mo_cont .txtBx .row div{letter-spacing: -0.025em; font-weight: 700; color: #fff; margin-bottom: 0.8em;}
.s2 .mo_cont .txtBx .row p{letter-spacing: -0.025em; color: #7c7c7c; font-size: 0.8em;}







.s2 .mo_cont.n1{
	font-size: 120px; position: relative;
	display: flex; justify-content: center;
}
.s2 .mo_cont.n1 .pinBx{
	box-sizing: border-box;
	/* box-shadow: 0 0 0 1px dodgerblue; */
	position: relative;
	display: flex; justify-content: center;
}
.s2 .mo_cont.n1 .titBx{position: absolute; top: 0; transform: translateY(calc((var(--vh100) - 100%) / 2));}
html.mo .s2 .mo_cont.n1 .titBx{top: 30px;}
.s2 .mo_cont.n1 .titBx .tit{}
.s2 .mo_cont.n1 .titBx .tit.n1{}
.s2 .mo_cont.n1 .titBx .tit.n2{}
.s2 .mo_cont.n1 .titBx .tit.n3{}
.s2 .mo_cont.n1 .titBx h3{overflow: hidden;}


.s2 .mo_cont.n1 .con{width: 100%;}
.s2 .mo_cont.n1 .imgBx{
	width: calc(320/1024*100vw); margin: 0 auto; position: relative;
	display: flex; align-items: center; justify-content: center;
}
.s2 .mo_cont.n1 .imgBx .img{position: relative; width: 100%;}
.s2 .mo_cont.n1 .imgBx .img::before {
    content:''; display: block; padding-bottom: calc(1031/590*100%);
}
.s2 .mo_cont.n1 .imgBx img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.s2 .mo_cont.n1 ._txtMotion{color: #fff;}
/* .s2 .mo_cont.n1 ._txtMotion > div{transform: translateY(40px); opacity: 0;} */
.s2 .mo_cont.n1 ._txtMotion.n1{right: 110%;bottom: 60%;}
.s2 .mo_cont.n1 ._txtMotion.n2{left: 110%;bottom: 60%;}
.s2 .mo_cont.n1 ._txtMotion.n3{left: 110%;top: 73%;}

.s2 .mo_cont.n1 .txtBx{opacity: 0; transform: translateY(60px);}
.s2 .mo_cont.n1 .txtBx .row{}
.s2 .mo_cont.n1 .txtBx .row div{}
.s2 .mo_cont.n1 .txtBx .row p{}






.s2 .mo_cont.n2{
	text-align: center;
	display: flex; align-items: center;
}
.s2 .mo_cont.n2 .graph_motion01{width: 50%; box-sizing: border-box; padding-top: 0;}
.s2 .mo_cont.n2 .graph_motion01 .box{display: inline-block;}
/* .s2 .mo_cont.n2 .graph_motion01 img{width: calc(300/1024*100vw);} */
.s2 .mo_cont.n2 .txtBx{width: 50%;}
.s2 .mo_cont.n2 .txtBx .row{}
.s2 .mo_cont.n2 .txtBx .row div{}
.s2 .mo_cont.n2 .txtBx .row p{}

.s2 .mo_cont.n3{}
.s2 .mo_cont.n3 .titBx{margin-bottom: 40px;}
.s2 .mo_cont.n3 .titBx .tit{overflow: hidden;}
.s2 .mo_cont.n3 .titBx .tit h3{}

.s2 .mo_cont.n3 .con{
	display: flex; align-items: center; justify-content: center;
	width: 100%; gap: 40px;
}
.s2 .mo_cont.n3 .con .imgBx{flex: 1; text-align: center;}
.s2 .mo_cont.n3 .con .txtBx{flex: 1; text-align: left;}

.s2 .mo_cont.n3 .con .txtBx .row{}
.s2 .mo_cont.n3 .con .txtBx .row div{}
.s2 .mo_cont.n3 .con .txtBx .row p{}

.s2 .mo_cont.n3 .con.n1{margin-bottom: 160px;}
.s2 .mo_cont.n3 .con.n1 .imgBx{position: relative;}
.s2 .mo_cont.n3 .con.n1 .imgBx img{width: calc(260/1024*100vw);}
.s2 .mo_cont.n3 ._txtMotion.n1{left: 10px; top: 30%;}
.s2 .mo_cont.n3 ._txtMotion.n2{right: 30px; top: 50%;}
.s2 .mo_cont.n3 ._txtMotion.n3{left: 14px; top: 75%;}


.s2 .mo_cont.n3 .con.n1 .txtBx{}
.s2 .mo_cont.n3 .con.n1 .txtBx h4{}
.s2 .mo_cont.n3 .con.n1 .txtBx h4{}
.s2 .mo_cont.n3 .con.n1 .txtBx div{}
.s2 .mo_cont.n3 .con.n1 .txtBx div p{}

.s2 .mo_cont.n3 .con.n2{}
.s2 .mo_cont.n3 .con.n2 .imgBx{}
.s2 .mo_cont.n3 .con.n2 .graph_motion02 > div{width: 100%;}
.s2 .mo_cont.n3 .con.n2 .txtBx{}
.s2 .mo_cont.n3 .con.n2 .txtBx .row{}
.s2 .mo_cont.n3 .con.n2 .txtBx .row div{}
.s2 .mo_cont.n3 .con.n2 .txtBx .row p{}


/* 간격 */
.s2 .mo{padding-bottom: 200px;}
.s2 .mo_cont.n1{margin-bottom: 120px;}
.s2 .mo_cont.n1 .imgBx{margin-bottom: 40px;}
.s2 .mo_cont.n2{margin-bottom: 120px;}
.s2 .mo_cont.n2 .graph_motion01{margin-bottom: 0;}
.s2 .mo_cont.n3 .titBx{margin-bottom: 20px;}
.s2 .mo_cont.n3 .con.n1{margin-bottom: 120px;}
.s2 .mo_cont.n3 .con .imgBx{margin-bottom: 0;}




@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	.s2 .mo_cont .titBx{font-size: calc(90/820*100vw);}
	.s2 .mo_cont .con .txtBx .row{text-align: center;}

	.s2 .mo_cont.n1 .imgBx{width: 100%;}
	.s2 .mo_cont.n1 .imgBx .img{width: calc(300/820*100vw);}
	.s2 .mo_cont.n1 ._txtMotion.n1{right: unset;left: 20px; bottom: 80%;}
	.s2 .mo_cont.n1 ._txtMotion.n2{left: unset;right: 0; bottom: 80%;}
	.s2 .mo_cont.n1 ._txtMotion.n3{left: unset;right: 30px; top: 70%;}

	.s2 .mo_cont.n2{flex-direction: column;}
	.s2 .mo_cont.n2 .graph_motion01{width: 100%;}
	.s2 .mo_cont.n2 .txtBx{width: 100%;}

	.s2 .mo_cont.n3 .con{flex-direction: column;}
	.s2 .mo_cont.n3 .con .imgBx{flex: unset; width: 100%; max-width: 500px;}
	.s2 .mo_cont.n3 .con .txtBx{flex: unset;}

	/* 이미지 크기 */
	.s2 .mo_cont.n3 .con.n1 .imgBx img{width: 60%; max-width: 280px;}
	.s2 .mo_cont.n3 .con.n2 .imgBx{width: 100%; max-width: 400px;}


	/* 간격 */
	.s2 .mo{}
	.s2 .mo_cont.n1{}
	.s2 .mo_cont.n1 .imgBx{}
	.s2 .mo_cont.n2{}
	.s2 .mo_cont.n2 .graph_motion01{margin-bottom: 80px;}
	.s2 .mo_cont.n3 .titBx{}
	.s2 .mo_cont.n3 .con.n1{}
	.s2 .mo_cont.n3 .con .imgBx{margin-bottom: 60px;}
}
@media screen and (max-width:500px) {
	.s2 .mo_cont.n1 .titBx{font-size: calc(65/500*100vw);}
	.s2 .mo_cont .txtBx{font-size: 16px; max-width: 340px;}

	.s2 .mo_cont.n1 .imgBx .img{width: calc(220/500*100vw);}

	.s2 .mo_cont.n1 ._txtMotion.n1{left: 0; bottom: 100%; display: none;}
	.s2 .mo_cont.n1 ._txtMotion.n2{right: unset; left: 0; top: unset; bottom: 100%; transform: translateY(120%);}
	.s2 .mo_cont.n1 ._txtMotion.n3{right: 0;}

	.s2 .mo_cont.n2 .graph_motion01{font-size: calc(1/500*100vw);}

	/* 간격 */
	.s2 .mo{padding-bottom: 140px;}
	.s2 .mo_cont.n1{margin-bottom: 100px;}
	.s2 .mo_cont.n1 .imgBx{margin-bottom: 20px;}
	.s2 .mo_cont.n2{margin-bottom: 100px;}
	.s2 .mo_cont.n2 .graph_motion01{margin-bottom: 80px;}
	.s2 .mo_cont.n3 .titBx{margin-bottom: 10px;}
	.s2 .mo_cont.n3 .con.n1{margin-bottom: 100px;}
	.s2 .mo_cont.n3 .con .imgBx{margin-bottom: 60px;}
}
@media screen and (max-width:320px) {}







.s3{
	background-color: #F0F0F0;
	position: relative; margin-top: -1px;
	display: flex; align-items: center; justify-content: center;
	height: var(--vh100);
}
/* .s3::before {
	content:''; display: block; width: 100%; height: 10px; background-color: #F0F0F0;
	position: absolute; left: 0; top: -5px; z-index: -1;
	box-shadow: 0 0 0 1px dodgerblue;
} */
.s3 > .wrap{padding-top: var(--headerH); box-sizing: border-box;}
.s3 > .wrap .titBx{
	font-size: 150px; text-align: center; margin-bottom: calc(50/150*1em);
	display: flex; flex-direction: column; align-items: center;
}
.s3 > .wrap .titBx .h3{position: relative;}
.s3 > .wrap .titBx h3{overflow: hidden;}
.s3 > .wrap .titBx h3.n1{color: #c7c7c7;}
.s3 > .wrap .titBx h3.n2{margin-top: -0.1em; color: #8c8c8c;}
.s3 > .wrap .titBx h3.n3{margin-top: -0.1em; color: var(--red);}

.s3 > .wrap .titBx h3{
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700;
	line-height: 1.1;
	font-family: 'Roboto';
}
.s3 > .wrap .titBx h3 p{
	font-weight: 400;
    font-size: 0.52em;
    height: calc(1em / 0.52);
    margin-left: 0.1em;
}
.s3 > .wrap .titBx h3 div{height: 100%;}
.s3 > .wrap .titBx h3.n3 p{margin-right: 0.2em;}
.s3 > .wrap .titBx ._txtMotion.n1{left: 100%; bottom: 90%;}
.s3 > .wrap .titBx ._txtMotion.n2{left: -200px; top: 80%;}
.s3 > .wrap .small{
	font-size: 24px; letter-spacing: -0.025em;
	line-height: calc(38/24); text-align: center;
}
.s3 > .wrap .small span{
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}


.s3 .circle{
	background-color: #101010;
	width: 100%; height: var(--vh100);
	clip-path: circle(13.02% at 50% 50%);
	/* margin-top: calc((var(--vh100) - 500px) / -2); */
	position: absolute;
	opacity: 0; transform: translateY(100px);
}
.s3 .circle .wrap{height: 100%;}
.s3 .circle .wrap .horizon{
	height: 100%; width: max-content;
	display: flex; align-items: center; justify-content: flex-start;
}
.s3 .circle .wrap .info{margin-right: 170px; padding-top: var(--headerH);}
.s3 .circle .wrap .info h4{
	font-size: 80px; font-weight: 700; letter-spacing: -0.02em; color: var(--red);
	display: inline-flex; align-items: center; justify-content: center;
	line-height: 1.1; font-family: 'Roboto';
	position: relative;
}
.s3 .circle .wrap .info h4 p{
	font-weight: 400;
    font-size: 0.52em;
    height: calc(1em / 0.52);
    margin-left: 0.1em; margin-right: 0.2em;
}
.s3 .circle .wrap .info > p{
	font-size: 32px; font-weight: 600; letter-spacing: -0.025em; color: #fff;
	margin-top: 30px; margin-bottom: 30px;
}
.s3 .circle .wrap .info div{
	font-size: 20px; letter-spacing: -0.025em; color: #7c7c7c; line-height: calc(32/20);
	display: flex; flex-direction: column; gap: 26px;
}
.s3 .circle .wrap .info div p{}


.s3 .circle .wrap .product{
	display: flex; align-items: flex-end; height: 100%; margin-right: 320px;
}
.s3 .circle .wrap .product.mo{display: none;}
.s3 .circle .wrap .product img{height: calc(100% - var(--headerH)); width: auto; max-width: unset;}


.s3 .circle .wrap .graph{text-align: center; padding-top: var(--headerH);}
.s3 .circle .wrap .graph > .txtBx{margin-bottom: 60px;}
.s3 .circle .wrap .graph > .txtBx h5{
	font-size: 32px; font-weight: 600; letter-spacing: -0.025em; margin-bottom: 18px;
}
.s3 .circle .wrap .graph > .txtBx p{
	font-size: 20px; letter-spacing: -0.025em; line-height: calc(32/20); color: #7c7c7c;
}
.s3 .circle .wrap .graph .bottom{
	display: flex; align-items: flex-start; justify-content: space-between;
}
.s3 .circle .wrap .graph .bottom > div{width: 260px;}
.s3 .circle .wrap .graph .bottom > div .imgBx{
	margin-bottom: 50px; display: flex; width: 100%; position: relative;
}
.s3 .circle .wrap .graph .bottom > div .imgBx::before{
	content:''; display: block; padding-bottom: calc(1032/1014*100%);
}
.s3 .circle .wrap .graph .bottom > div .imgBx::after {
	content:''; display: block; position: absolute; left: 0; top: 0;
	width: 100%; height: 40%;
	background: linear-gradient(180deg,rgba(16, 16, 16, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
	z-index: 2;
}
.s3 .circle .wrap .graph .bottom > div .imgBx .bg{
	position: absolute; left: 0; top: 0; object-fit: cover;
	width: 100%; object-position: center top;
}
.s3 .circle .wrap .graph .bottom > div .imgBx .dot{
	position: absolute; left: 0; top: 0;
	width: 100%; height: 100%;
}
.s3 .circle .wrap .graph .bottom > div .imgBx .dot img{
	position: absolute; left: 0; top: 0; object-fit: cover;
	width: 100%; object-position: center top;
	transition: opacity 0.5s; opacity: 0;
}
.s3 .circle .wrap .graph .bottom > div .imgBx .dot[step="1"]  img:nth-child(-n+1)  {opacity: 1;}
.s3 .circle .wrap .graph .bottom > div .imgBx .dot[step="2"]  img:nth-child(-n+2)  {opacity: 1;}
.s3 .circle .wrap .graph .bottom > div .imgBx .dot[step="3"]  img:nth-child(-n+3)  {opacity: 1;}
.s3 .circle .wrap .graph .bottom > div .imgBx .dot[step="4"]  img:nth-child(-n+4)  {opacity: 1;}
.s3 .circle .wrap .graph .bottom > div .imgBx .dot[step="5"]  img:nth-child(-n+5)  {opacity: 1;}
.s3 .circle .wrap .graph .bottom > div .imgBx .dot[step="6"]  img:nth-child(-n+6)  {opacity: 1;}
.s3 .circle .wrap .graph .bottom > div .imgBx .dot[step="7"]  img:nth-child(-n+7)  {opacity: 1;}
.s3 .circle .wrap .graph .bottom > div .imgBx .dot[step="8"]  img:nth-child(-n+8)  {opacity: 1;}
.s3 .circle .wrap .graph .bottom > div .imgBx .dot[step="9"]  img:nth-child(-n+9)  {opacity: 1;}
.s3 .circle .wrap .graph .bottom > div .imgBx .dot[step="10"] img:nth-child(-n+10) {opacity: 1;}
.s3 .circle .wrap .graph .bottom > div .imgBx .dot[step="11"] img:nth-child(-n+11) {opacity: 1;}
.s3 .circle .wrap .graph .bottom > div .imgBx .dot[step="12"] img:nth-child(-n+12) {opacity: 1;}
.s3 .circle .wrap .graph .bottom > div .imgBx .dot[step="13"] img:nth-child(-n+13) {opacity: 1;}
.s3 .circle .wrap .graph .bottom > div .imgBx .dot[step="14"] img:nth-child(-n+14) {opacity: 1;}


.s3 .circle .wrap .graph .bottom > div .txtBx{
	display: flex; flex-direction: column; align-items: center; justify-content: center; white-space: nowrap;
	line-height: 1.3;
}
.s3 .circle .wrap .graph .bottom > div .txtBx h6{
	font-size: 20px; color: #f1f1f1; letter-spacing: -0.025em; margin-bottom: 6px;
}
.s3 .circle .wrap .graph .bottom > div .txtBx h6.red{color: #dd2525;}
.s3 .circle .wrap .graph .bottom > div .txtBx p{
	font-size: 18px; letter-spacing: -0.025em;
	color: #7c7c7c;
}



@media screen and (max-width:1800px) {
	.s3 > .wrap .titBx{font-size: calc(150/1800*100vw);}
	.s3 > .wrap .small{font-size: max(calc(24/1800*100vw),14px);}
	.s3 > .wrap .titBx ._txtMotion.n2{left: 0; transform: translateX(-120%); top: 40%;}

	.s3 .circle .wrap .info{margin-right: 200px;}
	.s3 .circle .wrap .info h4{font-size: 60px;}
	.s3 .circle .wrap .info > p{font-size: 26px;}
	.s3 .circle .wrap .info div{font-size: 18px;}

	.s3 .circle .wrap .product{margin-right: 200px;}
}
@media screen and (max-width:1600px) {
	.s3 .circle .wrap .info h4{font-size: 50px;}
	.s3 .circle .wrap .info > p{font-size: 22px; margin: 20px 0;}
	.s3 .circle .wrap .info div{font-size: 16px;}


	.s3 .circle .wrap .graph{padding-top: 0;}
	.s3 .circle .wrap .graph > .txtBx{margin-bottom: 40px;}
	.s3 .circle .wrap .graph > .txtBx p{font-size: 14px;}

	.s3 .circle .wrap .graph .bottom{gap: 40px; max-width: 440px; justify-content: center;}
	.s3 .circle .wrap .graph .bottom > div{width: calc(50% - 20px);}
	.s3 .circle .wrap .graph .bottom > div .imgBx{margin-bottom: 20px;}
	.s3 .circle .wrap .graph .bottom > div .txtBx h6{font-size: 18px;}
	.s3 .circle .wrap .graph .bottom > div .txtBx p{font-size: 14px;}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s3 > .wrap .titBx{font-size: calc(100/1024*100vw);}
	.s3 > .wrap .titBx .h3{position: unset;}
	.s3 > .wrap .titBx ._txtMotion.n1{left: unset; bottom: unset; right: 0; top: 0;}
	.s3 > .wrap .titBx ._txtMotion.n2{left: 0; top: 110%; transform: unset; }

	.s3 > .wrap .small{max-width: 370px; margin: 0 auto;}
	.s3 > .wrap .small br{display: none;}
}
@media screen and (max-width:820px) {
	.s3 .circle .wrap .product.pc{display: none;}
	.s3 .circle .wrap .product.mo{display: flex; width: 90vw; justify-content: center; margin-right: 0;}

	.s3 .circle .wrap .info{margin-right: 150px;}

	.s3 .circle .wrap .graph{max-width: 440px; width: 90vw;}
	.s3 .circle .wrap .graph .bottom{gap: 10px; max-width: 100%;}
	.s3 .circle .wrap .graph .bottom > div{flex: 1;}
}
@media screen and (max-width:500px) {
	.s3 > .wrap .titBx{font-size: calc(65/500*100vw);}
	.s3 > .wrap .small{font-size: max(calc(14/500*100vw),12px); max-width: 80%;}

	.s3 > .wrap .titBx ._txtMotion.n1{top: unset; bottom: calc(110% - var(--headerH));}
	.s3 > .wrap .titBx ._txtMotion.n2{top: 110%;}

	.s3 .circle .wrap .product.mo{margin-right: 100px;}
	.s3 .circle .wrap .product img{max-width: 90vw; object-fit: contain; object-position: center bottom;}

	.s3 .circle .wrap .info{width: 90vw; margin-right: 100px;}
	.s3 .circle .wrap .info h4{font-size: 36px;}
	.s3 .circle .wrap .info div{font-size: 14px;}
	.s3 .circle .wrap .info > p{font-size: 18px;}
	.s3 .circle .wrap .info div p br{display: none;}

	.s3 .circle .wrap .graph .bottom > div .txtBx h6{font-size: 16px;}
	.s3 .circle .wrap .graph .bottom > div .txtBx p{font-size: 12px;}
}
@media screen and (max-width:320px) {}











/* s4 */

.s4{
	background-color: #f0eced;
	padding-top: 200px;
}
.s4 .wrap{}
.s4 .wrap .top{
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 30px;
}
.s4 .wrap .top h3{
	font-family: 'Roboto'; font-size: 54px; font-weight: 700; letter-spacing: -0.025em;
	color: #101010; overflow: hidden;
}
.s4 .wrap .top a{
	color: #7c7c7c; font-size: 18px; letter-spacing: -0.025em;
	display: block; overflow: hidden;
}
html.pc .s4 .wrap .top a:hover{color: var(--red);}
.s4 .wrap .swiper{overflow: visible; position: relative;}
.s4 .wrap .swiper::before {
	content:''; display: block; position: absolute;
	width: 100%; height: 100%; right: 100%; background-color: #f0eced; z-index: 2;
}
.s4 .wrap .swiper-slide{}
.s4 .wrap .swiper-slide .imgBx{position: relative; overflow: hidden;}
.s4 .wrap .swiper-slide .imgBx::before {
	content:''; display: block; padding-bottom: calc(420/338*100%);
}
.s4 .wrap .swiper-slide .imgBx img{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.5s;
}
html.pc .s4 .wrap .swiper-slide:hover img{transform: scale(1.2);}
.s4 .wrap .swiper-slide .txtBx{}
.s4 .wrap .swiper-slide .txtBx p{
	font-size: 18px; font-weight: 600; letter-spacing: -0.025em;
	line-height: calc(28/18); color: #101010;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin-top: 14px; margin-bottom: 10px;
}
.s4 .wrap .swiper-slide .txtBx small{
	font-size: 14px; letter-spacing: -0.025em; color: #7c7c7c;
}
.s4 .wrap .arrowBx{
	position: absolute; z-index: 2;
	display: flex; transform: translate(-50%, -100%);
}
.s4 .wrap .arrowBx div{
	width: 50px; height: 50px; color: #fff;
	display: flex; align-items: center; justify-content: center;
	background-color: var(--red); cursor: pointer; transition: background-color 0.2s;
}
.s4 .wrap .arrowBx div i{}

.s4 .wrap .arrowBx div:hover{background-color: #444;}

.s4 .marquee{
	display: flex; font-size: 250px; letter-spacing: -0.025em; color: #d4d1d2;
	font-family: 'Cormorant Garamond'; white-space: nowrap; font-weight: 700;
}
.s4 .marquee p{
	animation: marquee forwards infinite 25s linear;
	/* box-shadow: 0 0 0 1px dodgerblue; */
}
@keyframes marquee {
	0%{transform: translateX(0%);}
	100%{transform: translateX(-100%);}
}



@media screen and (max-width:1600px) {
	.s4 .wrap .arrowBx{transform: translate(0,-100%);}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s4{padding-top: max(calc(140/1024*100vw),80px);}
	.s4 .wrap .top h3{font-size: max(calc(54/1024*100vw),28px);}
	.s4 .marquee{font-size: calc(250/1024*100vw);}

	.s4 .wrap .arrowBx div{width: 40px; height: 40px; font-size: 14px;}
}
@media screen and (max-width:820px) {
	.s4 .wrap .swiper-slide .txtBx p{font-size: 16px;}

	.s4 .wrap .arrowBx div{width: 32px; height: 32px;}
}
@media screen and (max-width:500px) {
	.s4 .wrap .top{margin-bottom: 14px;}
	.s4 .wrap .top a{font-size: 14px;}

	.s4 .wrap .swiper-slide .txtBx p{font-size: 14px;}
}
@media screen and (max-width:320px) {}