/* common */
body{ background: #111; }
#header{ position: fixed; }


/* main */
#main .sec-box{ background: #FFF; position: relative; z-index: 10; }
#main .sec-box section{ overflow: hidden; }
#main .sticky{ position: sticky; top: 0; right: 0; bottom: 0; left: 0; }


/* floating */
#floating{ 
	--circle: 42px;
}
#floating{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; pointer-events: none; }
#floating .quick{ height: 100vh; display: flex; align-items: flex-end; text-align: center; padding: 60px 0; position: sticky; top: 0; left: 0; }
#floating .quick a{ max-width: max-content; display: flex; align-items: center; border-radius: 100px; padding: 9px 11px; margin-left: auto; position: relative; overflow: hidden; pointer-events: auto; }
#floating .quick a::before{ content: ""; width: var(--circle); padding-bottom: var(--circle); border-radius: 50%; background: var(--mainColor); position: absolute; top: 50%; right: 9px; transform: translateY(-50%); transition: width 0.8s, padding 0.8s, right 0.8s; }
#floating .quick a::after{ content: ""; width: 100%; height: 100%; background: #FFF; border: 1px solid var(--mainColor); border-radius: inherit; box-sizing: border-box; position: absolute; top: 0; left: 0; z-index: -1; }
#floating .quick ul{ max-width: max-content; display: flex; }
#floating .quick ul li{ font-size: 19px; font-weight: 400; color: #222; letter-spacing: -0.02em; line-height: 1; padding: 0 15px; position: relative; transition: color 0.8s; }
#floating .quick ul li::after{ content: ""; width: 1px; height: 15px; background: #BBB; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: background 0.8s; }
#floating .quick ul li:last-of-type::after{ display: none; }

#floating .quick span{ width: var(--circle); height: var(--circle); display: flex; justify-content: center; align-items: center; border-radius: 50%; padding: 10px; transform: rotate(0); transition: transform 0.5s; }
#floating .quick span::before{ content: ""; display: inline-block; width: 100%; height: 100%; background: url("/img/common/quick_icon02.svg") no-repeat center center / contain; }

@media screen and (hover: hover){
	#floating .quick a:hover::before{ width: 150%; padding-bottom: 150%; right: -50%; }  
	#floating .quick a:hover span{ transform: rotate(-45deg); }
	#floating .quick a:hover ul li{ color: #FFF; }
	#floating .quick a:hover ul li::after{ background: #FFF; }
}

@media screen and (max-width: 1800px){
	#floating {
		--circle: 35px;
	}

	#floating .quick ul li{ font-size: 17px; }
	#floating .quick span{ padding: 7px; }
}

@media screen and (max-width: 1280px){
	#floating {
		--circle: 30px;
	}

	#floating .quick{ padding-bottom: 30px; }
	#floating .quick a{ padding: 7px 9px; }
	#floating .quick ul li{ font-size: 16px; padding: 0 10px; }
	#floating .quick span{ padding: 6px; }
}


/* title-box */
.title-box{ margin-bottom: 45px; opacity: 1; }
.title-box h3{ font-family: var(--engFont); font-size: 11rem; font-weight: 400; color: #111; letter-spacing: -0.06em; }
.title-box h3 em span{ display: inline-block; filter: blur(10px); -webkit-filter: blur(10px); opacity: 0; transform: translateX(var(--aosPlus)); }
.title-box h3 strong{ display: inline-block; font-family: var(--engFont2); font-size: 10rem; font-weight: 700; letter-spacing: -0.04em; transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }

.title-box.aos-animate h3 em span{ animation: textBlur 1s both; }
.title-box.aos-animate h3 strong{ animation: textClip 1s both; }

/* more */
.more{ --bg: #222; }
.more{ max-width: max-content; display: flex; align-items: center; font-family: var(--engFont2); font-size: 18px; font-weight: 600; color: #222 !important; letter-spacing: -0.04em; padding: 10px; }
.more::after{ content: ""; display: inline-block;width: 34px; height: 34px; background: var(--bg) url("/img/main/more_arrow.svg") no-repeat center center / auto; border-radius: 50%; margin-left: 10px; transform: rotate(0); transition: transform 0.4s; }

@media screen and (hover: hover){
	/* more */
	.more:hover::after{ transform: rotate(-45deg); }
}

@media screen and (max-width: 1600px){
	/* more */
	.more::after{ width: 30px; height: 30px; }
}

@media screen and (max-width: 1280px){
	/* title-box */
	.title-box{ margin-bottom: 25px; }
	.title-box h3{ font-size: 8rem; }
	.title-box h3 strong{ font-size: 7rem; }

	/* more */
	.more{ font-size: 17px; }
	.more::after{ width: 27px; height: 27px; }
}

@media screen and (max-width: 900px){
	/* title-box */
	.title-box{ margin-bottom: 15px; }
}


/* visual */
#visual .scroll-box{ height: 100vh; overflow: hidden; }
#visual .scroll{ position: relative; top: 0; }
#visual .intro{ position: relative; }
#visual .intro .text{ padding: var(--headerH) 0 60px; }
#visual .intro .right{ text-align: right; margin-top: -50px; }
#visual .intro h2{ font-family: var(--engFont); /* font-size: 16rem; */ font-size: 20rem; font-weight: 300; color: #111; letter-spacing: -0.06em; animation: textClip 1s both; }
#visual .intro h2 span{ font-family: var(--engFont2); /* font-size: 15rem; */ font-size: 19rem; font-weight: 700; letter-spacing: -0.04em; }

#visual .intro .left h2{ animation-delay: 0.3s; }
#visual .intro .right h2{ padding-right: 10px; animation-delay: 1.3s; }

#visual .video{ position: relative; z-index: 10; }
#visual .visual{ height: 100vh; text-align: center; outline: none; }
#visual .visual .inner{ width: 100%; height: 100%; position: relative; overflow: hidden; }
#visual .visual .inner::after{ content: ""; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, black); opacity: 0.2; position: absolute; top: 0; left: 0; }
#visual .visual video{ 
	width:100vw;
	height:60vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height:110vh;
	min-width:177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	object-fit: cover;
}

#visual .cover{ padding-bottom: 60px; position: absolute; bottom: 0; left: 0; right: 0; }
#visual .cover .dots, 
#visual .cover .text-box{ opacity: 0; }
#visual .cover .dots{ margin-bottom: 10px; }
#visual .cover .dots ul{ display: flex !important; }
#visual .cover .dots ul li{ display: flex; position: relative; cursor: pointer; }
#visual .cover .dots ul li:not(:last-of-type){ margin-right: 10px; }
#visual .cover .dots ul li button{ display: none; }
#visual .cover .dots ul li svg{ width: auto; height: auto; transform: rotate(-90deg); }
#visual .cover .dots ul li svg circle{ stroke-dasharray: 95; stroke-dashoffset: 95; }
#visual .cover .dots ul li::before{ content: ""; width: 8px; height: 8px; background: #FFF; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#visual .cover .txt:not(.active){ display: none; }
#visual .cover h3{ font-family: var(--engFont); font-size: 11rem; font-weight: 300; color: #FFF; letter-spacing: -0.06em; }
#visual .cover h3 span{ display: inline-block; filter: blur(10px); -webkit-filter: blur(10px); opacity: 0; }
#visual .cover h3 strong{ display: block; font-family: var(--engFont2); font-size: 10rem; font-weight: 700; letter-spacing: -0.04em; margin-top: -26px; }
#visual .cover p{ font-size: 20px; font-weight: 300; color: #FFF; letter-spacing: -0.02em; margin-top: 10px; transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }

#visual .cover.animated .dots, 
#visual .cover.animated .text-box{ opacity: 1; transition: opacity 0.5s; }

#visual .cover .txt.active h3 span{ animation: textBlur 1s both; }
#visual .cover .txt.active p{ animation: textClip 1s both; }

#visual .scrollDown{ margin-top: 40px; }
#visual .scrollDown span{ display: inline-block; width: 30px; height: 30px; background: #FFF; border-radius: 50%; position: relative; overflow: hidden; }
#visual .scrollDown span i{ display: inline-block; width: 16px; height: 16px; background: url("/img/main/visual_arrow.svg") no-repeat center center / contain; position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); animation: scrollDown 2.6s infinite; will-change: top, transform; }
#visual .scrollDown span i:nth-of-type(1){ animation-delay: 1.3s; }

#visual .cover .dots ul li.slick-active svg circle{ animation: circleProgress 8s forwards; }

@media screen and (max-width: 1800px){
	#visual .intro .right{ margin-top: -30px; }

	#visual .cover p{ font-size: 18px; }
	#visual .cover h3 strong{ margin-top: -15px; }
}

@media screen and (max-width: 1280px){
	#visual .cover{ padding-bottom: 40px; }
	#visual .cover h3 strong{ margin-top: 0; }

	#visual .cover h3{ font-size: 7.5rem; }
	#visual .cover h3 strong{ font-size: 6.5rem; }
	#visual .cover p{ font-size: 17px; margin-top: 15px; }
}

@media screen and (max-width: 1000px){
	#visual .intro .text{ padding: calc(var(--headerH) + 50px) 0 70px; }
	#visual .intro .right{ margin-top: 0; }
	#visual .intro h2{ font-size: 15rem; }
	#visual .intro h2 span{ font-size: 14rem; }
}

@media screen and (max-width: 900px){
	#visual .intro .right h2{ padding-right: 5px; }
}

@media screen and (max-width: 600px){
	#visual .intro h2{ font-size: 12.5rem; }
	#visual .intro h2 span{ font-size: 11.5rem; }
}


/* about */
#about{
	--border: #DDD;
	--clipPath: 12%;
	--round: 40px;
}

#about{ padding-top: 160px; }
#about .flex-box{ display: flex; flex-wrap: wrap; }
#about .flex-box > div{ position: relative; }
#about .flex-box > div::before{ content: ""; width: 100%; height: 100%; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: absolute; top: 0; left: 0; z-index: 10; box-sizing: border-box; transform: scaleX(0); transform-origin: left; pointer-events: none; }
#about .flex-box .text{ padding: 60px; }
#about .flex-box .text *{ color: transparent; background: linear-gradient(to right, var(--color) 50%, rgba(17, 17, 17, 0.3) 50%); background-clip: text; -webkit-background-clip: text; background-size: 200% 100%; background-position: 100%; transition: background-position 1s; }
#about .flex-box .text h4{ --color: var(--mainColor); font-size: 36px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 25px; }
#about .flex-box .text p{ --color: #111; font-size: 18px; font-weight: 300; line-height: 1.5; position: relative; }
#about .flex-box .text p:not(:last-of-type){ margin-bottom: 10px; }
 
#about .block{ width: 100%; }
#about .block::before{ transition: transform 2s; }
#about .block .flex{ display: flex; align-items: flex-end; }
#about .block .flex > div{ width: 50%; }
#about .block .img{ position: relative; }
#about .block .img figure{ width: 100%; height: 100%; opacity: 0; clip-path: circle(0 at 50% 50%); -webkit-clip-path: circle(0 at 50% 50%); transition: opacity 1s 0.5s, clip-path 1.5s 0.5s; }
#about .block .img::before{ content: ""; width: 1px; height: 100%; background: var(--border); position: absolute; top: 0; right: -1px; transform: scaleY(0); transform-origin: bottom; transition: transform 1s; }
#about .block .img img{ width: 100%; height: 100%; object-fit: cover; }
#about .block .text{ display: flex; align-items: flex-end; }
#about .block .text *{ transition-delay: 0.5s; }
#about .block .text .left{ width: calc(100% - 240px); }
#about .block .text h4{ margin-bottom: 15px; }
#about .block .text .right{ width: 240px; justify-items: end; }
#about .block .text .right a{ margin-right: -10px; margin-bottom: -10px; }

#about .item{ width: calc(100% / 4); margin-top: -1px; position: relative; }
#about .item::before{ transition: transform 1s; }
#about .item::after{ content: ""; width: 1px; height: 100%; background: var(--border); position: absolute; top: 0; left: 0; z-index: -1; transform: scaleY(0); transform-origin: top; transition: transform 1s; }
#about .item:first-of-type::after{ display: none; }
#about .item a{ height: 100%; display: flex; flex-direction: column; padding: 200px 0; }
#about .item .text{ flex: 1 0 auto; padding-top: 0 !important; }
#about .item .text p{ padding-left: 15px; }
#about .item .text p::before{ content: ""; width: 4px; height: 4px; background: rgba(17, 17, 17, 0.2); border-radius: 50%; position: absolute; top: calc(1.5em / 2); left: 0; transform: translateY(-50%);  transition: background 0.5s 0.5s; }
#about .item .img{ position: relative; }
#about .item .img figure{ width: 100%; position: relative; z-index: 10; overflow: hidden; padding-bottom: 62.43%; clip-path: inset(0 0 0 0 round 0); -webkit-clip-path: inset(0 0 0 0 round 0); transition: clip-path 0.5s; }
#about .item .img figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#about .item .img i{ width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; background: #111; border-radius: 50%; position: absolute; bottom: 0; left: 50%; z-index: 10; transform: translate(-50%, 50%); }
#about .item .img i::before{ content: ""; display: inline-block; width: 24px; height: 24px; background: url("/img/main/about_arrow.svg") no-repeat center center / contain; transform: rotate(0); transition: transform 0.5s; }

#about .flex-box > div.aos-animate::before{ transform: scaleX(1); }
#about .block.aos-animate .img figure{ opacity: 1; clip-path: circle(100% at 50% 50%); -webkit-clip-path: circle(100% at 50% 50%); }
#about .block.aos-animate .img::before{ transform: scaleY(1); }
#about .block.aos-animate .text *{ background-position: 0; }
#about .item.aos-animate::after{ transform: scaleY(1); }

#about .item.slick-cloned{ opacity: 1; transform: unset; transition: unset; }
#about .item.slick-cloned::before ,
#about .item.slick-cloned::after{ transform: unset !important; transition: unset; }  

@media screen and (hover: hover){
	#about .item:hover .text *{ background-position: 0; }
	#about .item:hover .text p::before{ background: var(--color); transition-delay: unset; }
	#about .item:hover .img figure{ clip-path: inset(0 var(--clipPath) 0 var(--clipPath) round var(--round)); -webkit-clip-path: inset(0 var(--clipPath) 0 var(--clipPath) round var(--round)); }
	#about .item:hover .img i::before{ transform: rotate(-45deg); }
}

@media screen and (max-width: 1800px){
	#about{ padding-top: 100px; }
	#about .flex-box .text{ padding: 40px; }
	#about .flex-box .text h4{ font-size: 30px; }
	#about .flex-box .text p{ font-size: 17px; }

	#about .item a{ padding: 150px 0; }
	#about .item .img i{ width: 70px; height: 70px; }
}

@media screen and (max-width: 1600px){
	#about .flex-box .text h4{ margin-bottom: 15px; }
	#about .flex-box .text p:not(:last-of-type){ margin-bottom: 5px; }

	#about .block .text .left{ width: calc(100% - 180px); }
	#about .block .text .right{ width: 180px; }

	#about .item a{ padding: 100px 0 120px; }
	#about .item .img i{ width: 60px; height: 60px; }
}

@media screen and (max-width: 1280px){
	#about{ padding-top: 60px; }
	#about .flex-box .text{ padding: 25px; }
	#about .flex-box .text h4{ font-size: 24px; }
	#about .flex-box .text p{ font-size: 16px; }

	#about .item a{ padding: 70px 0 100px; }

	#about .item.slick-active .text *{ background-position: 0; }
	#about .item.slick-active .text p::before{ background: var(--color); transition-delay: unset; }
	#about .item.slick-active .img figure{ clip-path: inset(0 var(--clipPath) 0 var(--clipPath) round var(--round)); -webkit-clip-path: inset(0 var(--clipPath) 0 var(--clipPath) round var(--round)); }
	#about .item.slick-active .img i::before{ transform: rotate(-45deg); }

	#about .item.slick-now .text *{ background-position: 0; }
	#about .item.slick-now .text p::before{ background: var(--color); transition-delay: unset; }
	#about .item.slick-now .img figure{ clip-path: inset(0 var(--clipPath) 0 var(--clipPath) round var(--round)); -webkit-clip-path: inset(0 var(--clipPath) 0 var(--clipPath) round var(--round)); }
	#about .item.slick-now .img i::before{ transform: rotate(-45deg); }
}

@media screen and (max-width: 1280px){
	#about .slick-track{ display: flex !important; }
	#about .item{ width: 350px !important; border-bottom: 1px solid var(--border); } 
	#about .item a{ padding: 40px 0 70px; }
	#about .item .img i{ width: 50px; height: 50px; }
}

@media screen and (max-width: 900px){
	#about .block .flex{ flex-direction: column; }
	#about .block .flex > div{ width: 100%; }
	#about .block .img::before{ width: 100%; height: 1px; top: 100%; right: 0; transform: translateX(-100%); }
	#about .block .text{ flex-direction: column; padding: 40px 25px; }
	#about .block .text .left{ width: 100%; }
	#about .block .text .right{ width: 100%; }
}


/* overview */
#overview{ padding-top: 240px; }
#overview .flex-box{ display: flex; flex-wrap: wrap; }
#overview .item{ width: calc((50% - 60px) / 2); background: #F5F5F5; margin-right: 30px; border-radius: 0; overflow: hidden; position: relative; transition: width 0.5s, border-radius 0.5s; }
#overview .item figure{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: opacity 0.5s; }
#overview .item figure::before{ content: ""; width: 100%; height: 80%; background: linear-gradient(to bottom, transparent, #000); opacity: 0.9; position: absolute; bottom: 0; left: 0; }
#overview .item figure img{ min-width: 100%; height: 100%; object-fit: cover; }
#overview .item:last-of-type{ margin-right: 0; }
#overview .item .text{ position: relative; margin-top: 290px; }
#overview .item .absolute{ position: absolute; top: 0; left: 0; transform: translateY(0); transition: top 0.5s, transform 0.5s; will-change: transform, top; }
#overview .item dl:not(.absolute){ opacity: 0; pointer-events: none; }
#overview .item dl{ padding: 50px; }
#overview .item dl dt{ font-size: 36px; font-weight: 700; color: #333; letter-spacing: -0.02em; line-height: 1.5; transition: color 0.5s; }
#overview .item dl dd{ width: calc(200% + 60px); display: flex; align-items: flex-end; font-size: 18px; font-weight: 300; color: #FFF; letter-spacing: -0.02em; line-height: 1.75; margin-top: 50px; opacity: 0; transition: width 0.5s, opacity 0.5s, color 0.5s; }
#overview .item dl dd p{ width: calc(100% - 180px); font-weight: inherit; line-height: inherit; }
#overview .item dl dd div{ width: 180px; justify-items: end; -webkit-justify-items: end; }
#overview .item .icon{ margin-bottom: 20px; filter: invert(0) brightness(0); -webkit-filter: invert(0) brightness(0); transition: filter 0.5s; }
#overview .item .more{ font-weight: 500; color: #FFF !important; margin-right: -10px; margin-bottom: -10px; transition: color 0.5s; }
#overview .item .more::after{ --bg: #000; filter: invert(1); -webkit-filter: invert(1); transition: filter 0.5s, transform 0.5s; }  

#overview .item.on{ width: 50%; border-radius: 40px; }
#overview .item.on figure{ opacity: 1; }
#overview .item.on .absolute{ top: 100%; transform: translateY(-100%); }
#overview .item.on dl dt{ color: #FFF; }
#overview .item.on dl dd{ width: 100%; opacity: 1; }
#overview .item.on .icon{ filter: invert(1) brightness(2); -webkit-filter: invert(1) brightness(2); }

#overview .text-slide{ width: 100%; display: flex; overflow: hidden; }
#overview .text-slide h3{ font-family: var(--engFont); font-size: 22rem; font-weight: 300; color: #F5F5F5; letter-spacing: -0.06em; white-space: nowrap; }
#overview .text-slide h3 span{ font-family: var(--engFont2); font-size: 20rem; font-weight: 700; letter-spacing: -0.04em; }  
#overview .text-slide h3.origin{ animation: 40s linear 0s infinite normal forwards running origin_left; }
#overview .text-slide h3.clone{ animation: 40s linear 0s infinite normal none running clone_left; }

@media screen and (max-width: 1800px){
	#overview{ padding-top: 180px; }
	#overview .item dl{ padding: 40px; }
	#overview .item dl dt{ font-size: 30px; }
	#overview .item dl dd{ font-size: 17px; margin-top: 30px; }
}

@media screen and (max-width: 1550px){
	#overview .item dl dt{ font-size: 26px; }
}

@media screen and (max-width: 1400px){
	#overview{ padding-top: 120px; }
	#overview .item dl{ padding: 30px; }
	#overview .item dl dd{  margin-top: 20px; }
	#overview .item .icon{ margin-bottom: 15px; }
}

@media screen and (max-width: 1300px){
	#overview .item{ width: calc((60% - 40px) / 2); margin-right: 20px; }
	#overview .item dl dt{ font-size: 22px; }
	#overview .item dl dd{ width: calc(120% + 40px); flex-direction: column; align-items: flex-start; font-size: 16px; }
	#overview .item dl dd p{ width: 100%; }
	#overview .item dl dd div{ width: 100%; margin-top: 10px; }

	#overview .item.on{ width: 40%; }
}

@media screen and (max-width: 1280px){
	#overview .text-slide h3{ font-size: 18rem; }
	#overview .text-slide h3 span{ font-size: 17rem; }
}

@media screen and (max-width: 1100px){
	#overview .item{ width: 100% !important; margin-right: 0; }
	#overview .item br{ display: none; }
	#overview .item:not(:last-of-type){ margin-bottom: 20px; }
	#overview .item .text{ margin-top: 120px; }
	#overview .item .absolute{ top: 100%; transform: translateY(-100%); }
	#overview .item .icon{ transition: unset; }
	#overview .item dl dd{ width: 100%; color: #111; opacity: 1; }
	#overview .item dl dd div{ margin-top: 0; }
	#overview .item .more{ color: #222 !important; }
	#overview .item .more::after{ --bg: #000; filter: invert(0); -webkit-filter: invert(0); }

	#overview .item.on .absolute{ transition-delay: unset; }
	#overview .item.on .icon{ filter: invert(1) brightness(3); -webkit-filter: invert(1) brightness(3); }
	#overview .item.on dl dd{ color: #FFF; }
	#overview .item.on .more{ color: #FFF !important; }
	#overview .item.on .more::after{ --bg: #000; filter: invert(1); -webkit-filter: invert(1); }
}

@media screen and (max-width: 700px){
	#overview .item .text{ margin-top: 180px; }
}


/* update */
#update{ padding: 215px 0 160px; }
#update .title-box{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; position: relative; padding-bottom: 7px; margin-bottom: 40px; }
#update .title-box::after{ content: ""; width: 100%; height: 1px; background: #111; position: absolute; bottom: 0; left: 0; transform: scaleX(0); transform-origin: left; transition: transform 1.5s; }
#update .title-box.aos-animate::after{ transform: scale(1); }
#update .title-box a{ margin-right: -10px; margin-bottom: -10px; }

#update .flex-box{ display: flex; align-items: flex-end; }
#update .btns{ width: 240px; display: flex; }
#update .btns button{ width: 70px; height: 70px; background: #FFF; border: 1px solid #DDD; border-radius: 50%; overflow: hidden; position: relative; transition: background 0.5s, border 0.5s; }
#update .btns button:not(:last-of-type){ margin-right: 8px; }
#update .btns button::before,
#update .btns button::after{ content: ""; width: 30px; height: 30px; filter: invert(0); -webkit-filter: invert(0); position: absolute; top: 50%; transition: left 0.5s, transform 0.5s, filter 0.5s; }

#update .btns button.prev::before,
#update .btns button.prev::after{ background: url("/img/main/prev_icon.svg") no-repeat center center / contain; }
#update .btns button.prev::before{ left: 100%; transform: translate(100%, -50%); }
#update .btns button.prev::after{ left: 50%; transform: translate(-50%, -50%); }

#update .btns button.next::before,
#update .btns button.next::after{ background: url("/img/main/next_icon.svg") no-repeat center center / contain; }
#update .btns button.next::before{ left: 0; transform: translate(-100%, -50%); }
#update .btns button.next::after{ left: 50%; transform: translate(-50%, -50%); }

#update .content{ width: calc(100% - 240px); }
#update .update-wrap .slick-track{ margin: 0; }
#update .update-wrap .slick-list{ margin-right: -40px; }
#update .update{ margin-right: 40px; }
#update .update.slick-cloned{ opacity: 1; transform: unset; transition: unset; }
#update .update figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 133.335%; border-radius: 0; transition: border-radius 0.7s; }
#update .update figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.7s; }
#update .update h6{ display: -webkit-box; height: 3.2em; font-size: 20px; font-weight: 500; color: #222; letter-spacing: -0.02em; line-height: 1.6; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 20px; }

@media screen and (hover: hover){
	#update .btns button:hover{ background: #111; border: 1px solid #111; }
	#update .btns button:hover::before,
	#update .btns button:hover::after{ filter: invert(1); -webkit-filter: invert(1); }

	#update .btns button.prev:hover::before{ left: 50%; transform: translate(-50%, -50%); }
	#update .btns button.prev:hover::after{ left: 0; transform: translate(-100%, -50%); }

	#update .btns button.next:hover::before{ left: 50%; transform: translate(-50%, -50%); }
	#update .btns button.next:hover::after{ left: 100%; transform: translate(100%, -50%); }

	#update .update:hover figure{ border-radius: 40px; }
	#update .update:hover figure img{ transform: translate(-50%, -50%) scale(1.1); }
}

@media screen and (max-width: 1800px){
	#update{ padding: 170px 0 120px; }
	#update .btns button{ width: 60px; height: 60px; }

	#update .update h6{ font-size: 18px; }
}

@media screen and (max-width: 1400px){
	#update{ padding: 120px 0 100px; }
	#update .btns{ width: 200px; }

	#update .content{ width: calc(100% - 200px); }
	#update .update-wrap .slick-list{ margin-right: -20px; }
	#update .update{ margin-right: 20px; }
}

@media screen and (max-width: 1280px){
	#update{ padding: 80px 0 100px; }
	#update .btns{ width: 170px; }
	#update .btns button{ width: 50px; height: 50px; }

	#update .content{ width: calc(100% - 170px); }
	#update .update h6{ font-size: 17px; margin-top: 10px; }
}

@media screen and (max-width: 700px){
	#update .flex-box{ flex-direction: column-reverse; }

	#update .btns{ justify-content: flex-end; width: 100%; margin-top: 20px; }

	#update .content{ width: 100%; }
	#update .update{ width: 250px; }
}


/* beauty */
#beauty{ width: 100%; background: #111; position: sticky; bottom: 0; left: 0; }
#beauty .flex-box{ min-height: 700px; height: 100vh; display: flex; align-items: flex-end; padding: 115px 0; }
#beauty .flex-box > div{ width: 50%; }

#beauty .text *{ color: #FFF !important; }
#beauty .text p{ font-size: 20px; font-weight: 300; color: #FFF; line-height: 1.5; margin-bottom: 25px; transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
#beauty .text .title-box{ display: flex; align-items: baseline; margin-bottom: 0; }
#beauty .text .title-box h3 strong{ padding-right: 10px; }
#beauty .text .more{ --bg: #333; font-weight: 500; color: #FFF !important; margin-left: 25px; margin-bottom: -10px; opacity: 0; transform: translateX(var(--aosMinus)); transition: opacity 1s 1s, transform 1s 1s; }
#beauty .text .more::after{ margin-left: 15px; }  

#beauty .img figure{ width: 100%; opacity: 0; clip-path: circle(0 at 50% 50%); -webkit-clip-path: circle(0 at 50% 50%); transition: opacity 1.5s 0.5s, clip-path 1.5s 0.5s; }
#beauty .img figure img{ width: 100%; }

#beauty.animate .text p{ animation: textClip 1s 0.5s both; }
#beauty.animate .title-box h3 em span{ animation: textBlur 1s both; }
#beauty.animate .title-box h3 strong{ animation: textClip 1s both; }
#beauty.animate .text .more{ opacity: 1; transform: translateX(0); }
#beauty.animate .img figure{ opacity: 1; clip-path: circle(100% at 50% 50%); -webkit-clip-path: circle(100% at 50% 50%); }

@media screen and (max-width: 1800px){
	#beauty .flex-box{ padding: 80px 0; }
	#beauty .text p{ font-size: 18px; }
}

@media screen and (max-width: 1450px){
	#beauty .flex-box{ flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 40px 0; }
	#beauty .flex-box > div{ max-width: 700px; width: 100%; }
	#beauty .text .title-box{ justify-content: space-between; }
	#beauty .text .more{ margin-right: -10px; }
	#beauty .img{ margin-top: 10px; }
}

@media screen and (max-width: 1280px){
	#beauty .text p{ font-size: 17px; margin-bottom: 10px; }
}

@media screen and (max-width: 900px){
	#beauty .flex-box{ min-height: 500px; height: 500px; }
}