.mc-con{ position:relative; z-index:3; width:100%; margin:0 auto; padding:0 150px; }
.main_sc{ position:relative; width:100%; }

.viewbtn{
	display:inline-flex;
	padding:10px 40px 15px;
	border-radius:60px;
	background:linear-gradient(92deg, #D8151B 0.45%, #AD00FF 107.49%);
	font-size:16px;
	font-weight:400;
	color:#fff;
	transition:.3s;
}

/* scroll animation */
.ani.blur{
	opacity:0;
	filter:blur(1rem) brightness(1.3);
	transition-property:opacity, filter;
	transition-duration:1.5s;
	transition-timing-function:cubic-bezier(.165, .84, .44, 1);
}
.ani.blur.act{ opacity:1; filter:blur(0) brightness(1); }

/* sc01 */
#sc01{ height:100vh; height:100svh; overflow:hidden; background-color:#333; }
#sc01::after,
#sc02::after{ content:""; position:absolute; z-index:2; top:0; left:0; width:100%; height:100%; }
.sc01-vimeo{
	position:fixed;
	z-index:0;
	width:100%;
	padding-top:56.25%;
	overflow:hidden;
	pointer-events:none;
	filter:blur(0) brightness(1);
}
.sc01-vimeo iframe{ position:absolute; top:0; left:0; width:100%; height:100%; }
.vimeo-overlay{ position:absolute; inset:0; background:rgba(255, 255, 255, 0); pointer-events:none; transition:background 0.3s; }

.main-caption{
	position:absolute;
	z-index:99;
	top:50%;
	left:0;
	width:100%;
	padding:0 15px;
	color:#fafafa;
	text-align:center;
	transform:translateY(-50%);
}
.main-caption > h2{ margin-bottom:30px; font-size:75px; font-weight:800; line-height:1; }
.main-caption > h2 > .ts{ position:relative; display:inline-block; padding-right:10px; font-weight:300; }
.main-caption > h2 > .ts::after{
	content:"";
	position:absolute;
	right:0;
	bottom:-5px;
	display:block;
	width:2px;
	height:65px;
	border-right:2px solid #777;
	animation:cursor .9s infinite steps(2);
}
.main-caption > p{
	position:relative;
	margin-bottom:30px;
	padding-bottom:30px;
	font-size:18px;
	font-weight:400;
	line-height:1.8;
}
.main-caption > p::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:0;
	width:415px;
	max-width:100%;
	height:1px;
	background:linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #FFF 24.52%, #FFF 75%, rgba(255, 255, 255, 0.00) 100%);
	transform:translateX(-50%);
}
.main-caption > ul{ display:flex; justify-content:center; }
.main-caption > ul > li{
	position:relative;
	margin-right:1rem;
	padding-right:1rem;
	font-size:18px;
	font-weight:100;
	color:#fafafa;
}
.main-caption > ul > li > b{ font-weight:700; }
.main-caption > ul > li::after{
	content:"";
	position:absolute;
	top:50%;
	right:-1px;
	width:3px;
	height:3px;
	border-radius:50%;
	background-color:#fafafa;
	transform:translateY(-50%);
}
.main-caption > ul > li:last-child{ margin-right:0; padding-right:0; }
.main-caption > ul > li:last-child::after{ display:none; }

.sd{ position:absolute; z-index:3; top:50%; right:140px; transform:translateY(-50%); }
.sd > p{
	display:inline-block;
	font-size:18px;
	font-weight:400;
	letter-spacing:8px;
	color:rgba(255, 255, 255, 0.3);
	writing-mode:vertical-rl;
}
.sd > p::before{
	content:"SCROLL DOWN";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:0%;
	overflow:hidden;
	color:#fff;
	white-space:nowrap;
	animation:revealText 2.5s infinite;
}

.mq-con{ position:absolute; z-index:3; left:0; bottom:50px; width:100%; height:50px; overflow:hidden; }
.mq-inner{ display:flex; width:max-content; animation:marquee 40s linear infinite; }
.mq-wrap{ display:flex; flex:none; gap:15px; padding-right:15px; }
.mq-wrap img{ flex:none; width:150px; height:auto; }

@keyframes cursor{
	from{ border-right-color:transparent; }
	to{ border-right-color:#777; }
}
@keyframes revealText{
	to{ height:100%; }
}
@keyframes marquee{
	to{ transform:translateX(-50%); }
}

/* sc02 */
#sc02{ padding:100px 0; }
.sc02-tit{
	position:sticky;
	z-index:99;
	top:50%;
	left:50%;
	display:inline-block;
	width:auto;
	padding:0 15px;
	color:#fff;
	text-align:center;
	transform:translate(-50%, -50%);
	transition-delay:.2s;
}
.sc02-tit > h3{ font-size:100px; font-weight:700; }
.sc02-wrap{ display:flex; width:100%; }
.sc02-space{ width:45%; }
.sc02-cont{ position:relative; display:block; width:55%; padding:50px 0; color:#fff; }
.sc02-cont > h3{
	position:absolute;
	z-index:2;
	top:0;
	display:inline-block;
	font-size:300px;
	font-weight:100;
	line-height:0.56;
}
.sc02-cont > h3.lt{ left:0; }
.sc02-cont > h3.rt{ right:0; }
.sc02-cont > h5{ margin-top:10px; font-size:18px; font-weight:400; text-align:right; }
.sc02-img{ display:flex; }
.sc02-img img{
	display:block;
	width:100%;
	transform-style:preserve-3d;
	transition:transform 0.2s ease-out;
	will-change:transform;
}

/* sc03 */
#sc03{ z-index:3; overflow:hidden; background-color:#fff; }
.sc03-wrap{ display:flex; align-items:center; justify-content:space-between; }
.sc03-caption{ width:43%; padding-left:150px; color:#202020; }
.sc03-caption > h3{ margin-bottom:30px; font-size:75px; font-weight:300; line-height:1; }
.sc03-caption > h3 > b{ font-weight:800; }
.sc03-caption > p{ margin-bottom:30px; font-size:18px; font-weight:400; line-height:1.6; }
.sc03-caption > p > b{ font-weight:700; }
.sc03-cont{ width:55%; }
.sc03-inner{ position:relative; display:flex; flex-direction:column; gap:20px; transform:rotate(-20deg); }
.sc03-card-wrap{ display:flex; gap:20px; will-change:transform; }
.sc03-card-wrap.row1{ padding-left:150px; }
.sc03-card-wrap img{
	display:inline-block;
	flex:0 auto;
	width:100%;
	max-width:560px;
	height:auto;
	border-radius:6px;
	object-fit:cover;
}

/* sc04 */
#sc04{ overflow:hidden; background-color:#D6E64E; }
#sc04 .mc-con{ transform:translateY(200px); }
.sc04-tit{ width:100%; margin-bottom:100px; color:#202020; text-align:center; }
.sc04-tit > h3{ margin-bottom:30px; font-size:100px; font-weight:300; line-height:1; }
.sc04-tit > h3 > b{ font-weight:800; }
.sc04-tit > p{ font-size:18px; font-weight:400; }
.sc04-wrap{ display:flex; flex-wrap:wrap; gap:20px; width:100%; }
.sc04-box{ width:calc((100% - 80px) / 5); }
.sc04-box.ani{ transform:translateY(50px); transition:.4s linear; }
.sc04-box.ani.act{ transform:translateY(0); }
.sc04-img{ display:flex; width:100%; }
.sc04-img img{ width:100%; }

/* sc05 */
#sc05{ z-index:3; height:100vh; overflow:hidden; background-color:#000; }
.sc05-inner{ display:flex; height:100%; transform:translateZ(0); will-change:transform; }
.sc05-item{
	display:flex;
	flex:0 0 100vw;
	align-items:center;
	height:100%;
	background-color:#000;
	backface-visibility:hidden;
	transform:translateZ(0);
	will-change:transform;
}
.sc05-wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:0 150px; }
.sc05-caption{ width:38%; color:#fff; }
.sc05-caption > h3{ margin-bottom:1rem; font-size:65px; font-weight:800; }
.sc05-caption > p{ margin-bottom:30px; font-size:18px; font-weight:400; line-height:1.6; }
.sc05-cont{ width:60%; }
.sc05-img{ display:flex; width:100%; }
.sc05-img img{ width:100%; }
.sc05-slide{ display:none; }

/* responsive */
@media(max-width:1600px){
	.mc-con{ padding:0 100px; }
	.sd{ right:90px; }
	.sc02-cont > h3{ font-size:250px; }
	.sc03-caption{ padding-left:100px; }
	.sc03-card-wrap img{ max-width:500px; }
	.sc05-wrap{ padding:0 100px; }
}

@media(max-width:1400px){
	.mc-con{ padding:0 60px; }
	.main-caption > h2{ font-size:70px; }
	.sd{ right:50px; }
	.mq-wrap{ gap:10px; padding-right:10px; }
	.sc02-tit > h3{ font-size:75px; }
	.sc02-cont > h3{ font-size:180px; }
	.sc03-caption{ padding-left:60px; }
	.sc03-caption > h3{ font-size:60px; }
	.sc03-card-wrap img{ max-width:400px; }
	.sc04-tit > h3{ font-size:70px; }
	.sc05-wrap{ padding:0 60px; }
	.sc05-caption > h3{ font-size:50px; }
	.sc05-caption > p{ font-size:16px; }
}

@media(max-width:1280px){
	.mc-con{ padding:0 30px; }
	.main-caption > h2{ font-size:60px; }
	.main-caption > h2 > .ts::after{ height:55px; }
	.main-caption > p{ margin-bottom:20px; padding-bottom:20px; font-size:16px; }
	.main-caption > ul > li{ font-size:16px; }
	.sd{ right:24px; }
	.sd > p{ font-size:14px; }
	.mq-con{ bottom:30px; height:37px; }
	.mq-wrap img{ width:110px; }
	.sc02-tit > h3{ font-size:60px; }
	.sc02-cont > h3{ font-size:150px; }
	.sc02-cont > h5{ font-size:16px; }
	.sc03-caption > h3{ font-size:55px; }
	.sc03-caption > p{ font-size:16px; }
	.sc03-card-wrap img{ max-width:360px; }
	.sc04-tit{ margin-bottom:80px; }
	.sc04-tit > h3{ font-size:65px; }
	.sc04-tit > p{ font-size:16px; }
	.sc04-wrap{ gap:10px; }
	.sc04-box{ width:calc((100% - 40px) / 5); }
	#sc04 .mc-con{ transform:translateY(150px); }
	.sc05-wrap{ padding:0 30px; }
	.sc05-caption > h3{ font-size:45px; }
}

@media(max-width:1024px){
	.mc-con{ padding:0 20px; }
	.sc01-vimeo{ width:100vw; height:100vh; padding-top:0; }
	.sc01-vimeo iframe{ top:50%; left:50%; width:177.777vh; height:calc(100vh + 3px); transform:translate(-50%, -50%); }
	.main-caption > h2 > .ts::after{ height:47px; }
	.sd{ display:none; }
	.sc02-space{ width:30%; }
	.sc02-cont{ width:70%; }
	#sc03{ padding:70px 0; }
	.sc03-wrap{ flex-wrap:wrap; }
	.sc03-caption{ width:100%; padding:0 20px; }
	.sc03-cont{ width:100%; padding-top:50px; }
	.sc03-card-wrap img{ max-width:300px; }
	.sc04-tit{ margin-bottom:50px; }
	#sc04 .mc-con{ transform:translateY(80px); }
	.sc05-wrap{ flex-wrap:wrap; padding:0 80px; }
	.sc05-caption{ width:100%; margin-bottom:20px; }
	.sc05-cont{ width:100%; }
	.sc05-img img{ max-height:50vh; object-fit:cover; object-position:top; }
}

@media(max-width:840px){
	.sc04-wrap{ width:140%; transform:translateX(-14%); }
}

@media(max-width:690px){
	.ani.mo{ opacity:0; transform:translateY(100px); transition:1s; }
	.ani.mo.act{ opacity:1; transform:translateY(0); }

	.main-caption > h2{ font-size:50px; }
	.main-caption > h2 > .ts::after{ bottom:5px; height:35px; }
	.main-caption > p{ font-size:14px; line-height:1.6; }
	.main-caption > p::after{ width:100%; }
	.main-caption > ul{ flex-wrap:wrap; }
	.main-caption > ul > li{ width:100%; margin-right:0; margin-bottom:5px; padding-right:0; font-size:13px; text-align:center; }
	.main-caption > ul > li:last-child{ margin-bottom:0; }
	.main-caption > ul > li::after{ display:none; }
	.mq-inner{ animation-duration:70s; }
	.mq-wrap{ gap:5px; padding-right:5px; }

	#sc02{ padding:50px 0; }
	.sc02-tit{ width:100%; transform:none; }
	.sc02-tit > h3{ font-size:45px; }
	.sc02-space{ width:20%; }
	.sc02-cont{ width:80%; padding:20px 0; }
	.sc02-cont > h3{ font-size:70px; }
	.sc02-cont > h5{ font-size:14px; }

	#sc03{ padding:50px 0; }
	.sc03-caption > h3{ margin-bottom:20px; font-size:45px; }
	.sc03-caption > p{ margin-bottom:20px; font-size:14px; }
	.sc03-cont{ padding-top:35px; }
	.sc03-inner{ gap:10px; transform:rotate(-20deg) translateX(-90px); }
	.sc03-card-wrap{ gap:10px; }
	.sc03-card-wrap.row1{ padding-left:80px; }
	.sc03-card-wrap.row3{ padding-left:40px; }
	.sc03-card-wrap img{ max-width:200px; }
	.viewbtn{ padding:8px 30px 12px; font-size:14px; }

	.sc04-tit{ margin-bottom:30px; }
	.sc04-tit > h3{ margin-bottom:20px; font-size:45px; }
	.sc04-tit > p{ font-size:14px; }
	.sc04-wrap{ gap:5px; width:170%; transform:translateX(-19%); }
	.sc04-box.ani{ transform:translateY(20px); }
	#sc04 .mc-con{ transform:translateY(50px); }

	#sc05{ height:auto; padding:100px 0 50px; }
	.sc05-inner{ display:none; }
	.sc05-slide{ display:block; }
	.sc05Swiper{ padding-bottom:30px; }
	.sc05-wrap{ padding:0 20px; }
	.sc05-caption > h3{ margin-bottom:10px; font-size:36px; }
	.sc05-caption > p{ margin-bottom:1rem; font-size:14px; line-height:1.4; }
	.swiper-pagination.sc05pn{ bottom:0; }
	.swiper-pagination-bullet{ background:#fff; }
}

@media(max-height:520px) and (orientation:landscape){
	.main-caption > h2{ margin-bottom:12px; font-size:36px; }
	.main-caption > h2 > br.d-block{ display:none; }
	.main-caption > h2 > .ts::after{ bottom:0; height:30px; }
	.main-caption > p{ margin-bottom:12px; padding-bottom:12px; font-size:14px; line-height:1.5; }
	.main-caption > ul{ flex-wrap:nowrap; }
	.main-caption > ul > li{ width:auto; margin:0 8px; }
	.mq-con{ bottom:12px; }
}