@charset "utf-8";

.h_max{height: 100%;}
.inner{position: relative;margin: 0 auto;width: 100%;}

.intro{position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 100;background:#fff;display: flex;align-items: center;justify-content: center;overflow: hidden;padding: 0 5vw;}
.intro .bg{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url(../images/intro-bg.jpg) no-repeat center / cover;opacity: 0;transform: scale(1.1);transition: 0.8s;}
.intro .box{width: 27.6042vw;max-width: 60vh;position: relative;}
.intro .box img{display: block;width: 100%;}
.intro .logo{position: absolute;left: 0;top: 0;opacity: 0;transition: 1s;transition-delay: 1.6s;width:32.5%;}
.intro .logo img{display: block;transition:0.8s;}
.intro .txt{position: absolute;top: 0;left: 54%;width:2.8%;overflow: hidden;transition:1s;}
.intro .txt p{transform: translate(-100%,0);transition: 0.8s;transition-delay: 1.6s;}
.intro .skip{position: absolute;left: 100%;bottom: 0;opacity: 0;transition: 0.6s;transition-delay: 0.8s;}
.intro .skip button{display:block;border: none;background: none;color: rgba(35,31,32,0.8);font-family: "Jost";font-weight: 600;font-size: 0.7813vw;position: relative;padding-bottom: 0.6vw;}
.intro .skip button::before{content: "";width: 0.2083vw;height: 0.2083vw;background-color: rgba(35,31,32,0.8);border-radius: 50%;position: absolute;bottom:0;left:50%;margin-left: -0.1042vw;}
.intro .figure{width: 100%;height: 100%;position: relative;}
.intro .figure .f{width: 100%;height: 100%;}
.intro .figure ul,
.intro .figure ul li,
.intro .figure ul li span{display: block;position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.intro .figure ul li{transition:1s;}
.intro .figure .f1 .img1{clip-path: rect(0% 74% 0% 60%);transition: 0.8s;transition-delay: 1s;}
.intro .figure .f2 .img1{clip-path: rect(26% 0% 65% 0%);transition: 0.8s;transition-delay: 0.8s;}
.intro .figure .f2 .img2{clip-path: rect(64% 20% 64% 0%);transition: 0.8s;transition-delay: 1.2s;}
.intro .figure .f3 .img1{clip-path: rect(37% 81% 37% 75%);transition: 0.6s;transition-delay: 0.6s;}
.intro .figure .f3 .img2{clip-path: rect(43% 80% 54% 80%);transition: 0.6s;transition-delay: 0.8s;}
.intro .figure .f3 .img3{clip-path: rect(65% 76% 65% 56%);transition: 0.6s;transition-delay: 1s;}
.intro .figure .f3 .img4{clip-path: rect(64% 29% 78% 29%);transition: 0.6s;transition-delay: 0.7s;}
.intro .figure .f3 .img5{clip-path: rect(76% 71% 76% 50%);transition: 0.6s;transition-delay: 1.2s;}
.intro .figure .f3 .img6{clip-path: rect(64% 100% 69% 100%);transition: 0.6s;transition-delay: 1.4s;}
.intro .figure .f4 .img1{clip-path: rect(85% 29% 97% 29%);transition: 0.8s;transition-delay: 1.1s;}
.intro .wave{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.intro .wave li{position: absolute;left: 0;top: 0;width: 100%;height: 100%;transition:1s;}
.intro .wave li span{display:block;width:100%;height:100%;background: url(../images/intro-wave.jpg) no-repeat;background-size:cover;mask-repeat: no-repeat;mask-position: center;mask-size: cover;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;-webkit-mask-size: cover;opacity:0;}
.intro .wave .w1 span{mask-image: url(../images/intro-wave1.png);-webkit-mask-image: url(../images/intro-wave1.png);background-position: 100% 50%;}
.intro .wave .w2 span{mask-image: url(../images/intro-wave2.png);-webkit-mask-image: url(../images/intro-wave2.png);background-position: 100% 50%;}
.intro .wave .w3 span{mask-image: url(../images/intro-wave3.png);-webkit-mask-image: url(../images/intro-wave3.png);background-position: 100% 50%;}
.intro .wave .w4 span{mask-image: url(../images/intro-wave4.png);-webkit-mask-image: url(../images/intro-wave4.png);background-position: 100% 50%;}
.intro.open .bg,
.intro.open .skip{opacity: 1;transform: none;}
.intro.open .figure .f1 .img1{clip-path: rect(0% 74% 26% 60%);}
.intro.open .figure .f2 .img1{clip-path: rect(26% 27% 65% 0%);}
.intro.open .figure .f2 .img2{clip-path: rect(64% 20% 79% 0%);}
.intro.open .figure .f3 .img1{clip-path: rect(37% 81% 65% 75%);}
.intro.open .figure .f3 .img2{clip-path: rect(43% 100% 54% 80%);}
.intro.open .figure .f3 .img3{clip-path: rect(53% 76% 65% 56%);}
.intro.open .figure .f3 .img4{clip-path: rect(64% 71% 78% 29%);}
.intro.open .figure .f3 .img5{clip-path: rect(76% 71% 100% 50%);}
.intro.open .figure .f3 .img6{clip-path: rect(64% 100% 69% 80%);}
.intro.open .figure .f4 .img1{clip-path: rect(85% 29% 97% 0%);}
.intro.open .logo{opacity: 1;}
.intro.open .txt p{transform: none;}
.intro.open .wave li span{animation: wave 4s 2s ease-out forwards;}
@keyframes wave {
    0% {background-position: 100% 50%;opacity:0;}
	30% {opacity:1;}
	100% {background-position: 60% 50%;opacity:1;}
}
.intro.end .logo img{transform: translate(-3vw, -3vw);opacity:0;}
.intro.end .txt{transform: translate(0, -3vw);opacity:0;}
.intro.end .figure ul .f1,
.intro.end .wave .w1{transform: translate(3vw, -3vw);opacity:0;}
.intro.end .figure ul .f2,
.intro.end .wave .w2{transform: translate(-3vw, 0);opacity:0;}
.intro.end .figure ul .f3,
.intro.end .wave .w3{transform: translate(3vw, 3vw);opacity:0;}
.intro.end .figure ul .f4,
.intro.end .wave .w4{transform: translate(-3vw, 3vw);opacity:0;}
@media all and (max-aspect-ratio:12/10){
	.intro .box{width:75vw;}
	.intro .logo{width:24vw;}
	.intro .txt{left: 40vw;width: 2.1vw;}
	.intro .skip{top:calc(100% + 9vh);bottom:auto;left:50%;transform:translate(-50%,50%);}
	.intro .skip button{font-size:4vw;padding-bottom: 2vw;}
	.intro .skip button::before{width: 1vw;height: 1vw;margin-left:-0.5vw;}
	.intro.open .skip{transform:translate(-50%,0);}
}

header{position: absolute;left: 0;top: 0;width: 100%;z-index: 99;padding: calc(var(--vh, 1vh) * 4.6875) 5.2083vw calc(var(--vh, 1vh)* 1);transform: translate(0,-100%);transition:0.6s;}
header .head_in{position: relative;display: flex;align-items: center;justify-content: space-between;}
header h1 a{display: block;}
header h1 a img{display: block;width: 5.7813vw;}
header .tel{font-family: "Jost";color: #000;font-size: 0.9375vw;font-weight: 500;letter-spacing: 0.01em;padding-left: 1.0417vw;background: url(../images/tel-bl.png) no-repeat left center / auto 70%;}
.wrap.open header{transform:none;}
.wrap.open header.h_up{transform: translate(0, -100%);}
@media all and (max-aspect-ratio:12/10){
	header{padding: calc(var(--vh, 1vh)* 3) 5vw calc(var(--vh, 1vh)* 1);}
	header h1 a img{width: 14vw;}
	header .tel{font-size: 3vw;padding-left: 3vw;}
}

.sec_tit{font-family: 'TIMESS';color: #2a3942;font-size: 0.8333vw;position: absolute;transform: translate(-40%,0) scaleX(1.1);transform-origin: 0 0;opacity:0;transition:0.6s;transition-delay:0.5s;}
.line{background-color: #202020;position: absolute;}
.line1{width: 0;height: 1px;left: 0;top: 0;transition:2s;}
.line2{width: 1px;height: 0;left: 7.5521vw;top: 0;transition:1s;transition-delay:0.2s;}
.line2 span{display:block;background-color: #202020;width:100%;height:100%;transform-origin: 0 0;}
.line3{width: 1px;height:5.7292vw;right: 57.2917vw;top: 0;transform:scaleY(0);transform-origin:0 100%;transition:1s;transition-delay:0.6s;}
.line4{width: 0;height: 1px;right: 0;top: 5.7292vw;transition:1.5s;}
.line5{width: 0;height: 1px;right: 0;top: 0;transition:1.2s;}
.line6{width: 1px;height: 0;left: 7.8125vw;top: 0;transition:1s;transition-delay:0.7s;}
.line7{width: 0;height: 1px;left: 0;top: 0;opacity: 0.3;transition:2s;}
.line8{width: 1px;height: 0;right: 22.3958vw;top: 0;opacity: 0.3;transition:1s;transition-delay:0.8s;}
.active .sec_tit{opacity:1;transform: scaleX(1.1);}
.active .line1{width:100%;}
.active .line2{height:11.4583vw;}
.active .line3{transform:none;}
.active .line4{width:73.4375vw;}
.active .line5{width:100%;}
.active .line6{height:13.5417vw;}
.active .line7{width:100%;}
.active .line8{height:100%;}
@media all and (max-aspect-ratio:12/10){
	.sec_tit{font-size: 2.6vw;}
	.line2{left: 13vw;}
	.line3{height:10vw;}
	.line4{top:10vw;}
	.line6{left: 15vw;}
	.line8{right: 35vw;}
	.active .line2{height:10vw;}
	.active .line4{width:80vw;}
}

.vis{height: calc(var(--vh, 1vh) * 100);position: relative;overflow: hidden;}
.vis .vis_sd,
.vis .vis_sd .swiper-wrapper,
.vis .vis_sd .swiper-slide{height:100%;}
.vis .vis_txt{position: absolute;left: 50%;transform:translate(-50%,0);will-change: auto;z-index:1;}
.vis .vis_txt.t1{top: calc(var(--vh, 1vh) * 25);transition:0.8s;transition-delay:2.5s;}
.vis .vis_txt.t2{top: calc(var(--vh, 1vh) * 43);transition:0.8s;transition-delay:2.5s;}
.vis .vis_txt p{font-family: 'TIMESS';color: #000;font-size: 7.8125vw;white-space:nowrap;transform:scaleX(1.1);}
.vis .vis_txt.t1 p{transition:0.8s;transition-delay:2.5s;}
.vis .vis_txt.t2 p{transition:0.8s;transition-delay:2.5s;}
.vis .vis_txt span{display:block;overflow: hidden;}
.vis .vis_txt span em{display: block;transform: translate(0,100%);}
.vis .bg{position: absolute;left: 0;top: 0;width: 100%;height: 100%;clip-path: rect(100% 50% 100% 50%);}
.vis .bg span{display:block;width:100%;height:100%;transform:scale(1.2);transition:1.4s;}
.vis .bg span em{display:block;width:100%;height:100%;background: no-repeat center / cover;;transform:scale(1.2);transition:2.5s;transition-delay:1s;}
.vis .bg1 span em{background-image:url(../images/vis-bg1.jpg);}
.vis .bg2 span em{background-image:url(../images/vis-bg2.jpg);}
.vis .bg3 span em{background-image:url(../images/vis-bg3.jpg);}
.vis .rotate{position: absolute;left: 75%;bottom: 6%;width: 5.5208vw;height: 5.5208vw;z-index:1;opacity:0;transform:translate(0,-30%);transition:0.8s;transition-delay:0.8s;}
.vis .rotate .arr{width: 100%;height: 100%;background: url(../images/rotate-arr-gray.png) no-repeat center / contain;position: absolute;left: 0;top: 0;transition:0.6s;transition-delay:2s;}
.vis .rotate .txt{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
.vis .rotate .txt span{display: block;width: 100%;height: 100%;animation: rotate 8s linear infinite;}
.vis .rotate .txt span em{display: block;width: 100%;height: 100%;background: url(../images/rotate-txt-gray.png) no-repeat center / contain;transition:0.6s;transition-delay:2s;}
.vis .swiper-slide-active .bg span em{transform:none;transition-delay:0s;}
.wrap.open .vis .vis_txt.t1{top: calc(var(--vh, 1vh) * 24);left: 41.5vw;}
.wrap.open .vis .vis_txt.t2{top: calc(var(--vh, 1vh) * 24);left: 58.5vw;}
.wrap.open .vis .vis_txt p{font-size:2.0833vw;}
.wrap.open .vis .vis_txt span em{animation: vis_txt 1s 0.3s forwards;}
.wrap.open .vis .bg{animation: vis 2.5s 0.8s forwards;}
.wrap.open .vis .bg span{transform:none;transition-delay:2s;}
.wrap.open .vis .rotate{opacity:1;transform:none;}
.wrap.open .vis .rotate .arr{background-image:url(../images/rotate-arr-wh.png);}
.wrap.open .vis .rotate .txt span em{background-image:url(../images/rotate-txt-wh.png);}
@keyframes vis {
    0% {clip-path: rect(100% 50% 100% 50%);}
	40% {clip-path: rect(73% 68% 100% 32%);}
	50% {clip-path: rect(73% 68% 100% 32%);}
	100% {clip-path: rect(0% 100% 100% 0%);}
}
@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@keyframes vis_txt {
    0% {transform: translate(0,100%);}
    100% {transform: none;}
}
@media all and (max-aspect-ratio:12/10){
	.vis .rotate{left: 76%;bottom: 17%;width: 15vw;height: 15vw;}
	.vis .vis_txt{transform: translate(-50%, -50%);}
	.vis .vis_txt.t1{top: calc(var(--vh, 1vh)* 32);}
	.vis .vis_txt.t2{top: calc(var(--vh, 1vh)* 39);}
	.vis .vis_txt p{font-size: 9.5vw;}
	.vis .bg span{background-position: right center;}
	@keyframes vis {
		0% {clip-path: rect(100% 50% 100% 50%);}
		40% {clip-path: rect(80% 80% 100% 20%);}
		50% {clip-path: rect(80% 80% 100% 20%);}
		100% {clip-path: rect(0% 100% 100% 0%);}
	}
	.wrap.open .vis .vis_txt.t1{left: 30vw;}
	.wrap.open .vis .vis_txt.t2{left: 70vw;}
	.wrap.open .vis .vis_txt p{font-size: 4.9vw;}
}

.about{padding: 10.9375vw 0 10.9375vw 8.4167vw;}
.about .txt{position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: flex;align-items: center;padding-top: 5vw;}
.about .txt strong{display: block;font-size: 1.6667vw;font-family: "Noto Serif KR";color: #000;font-weight: 400;letter-spacing: -0.075em;opacity:0;transform:translate(-4vw,0);transition:0.8s;}
.about .txt strong b{font-weight: 400;line-height: 0em;transition:0.8s;transition-delay:0.6s;}
.about .txt .t2{color: #555;font-size: 0.7813vw;line-height: 2.4em;margin-top: 7.8125vw;letter-spacing: -0.05em;}
.about .txt .t2 p{overflow:hidden;}
.about .txt .t2 p span{display:block;transform:translate(0,100%);transition:0.8s;transition-delay:1s;}
.about .txt .t2 p em{font-family: 'TIMESS';font-size: 0.8333vw;letter-spacing: 0em;}
.about .txt .t3{display: block;color: #000;font-size: 0.9375vw;margin-top: 2.6042vw;line-height: 2em;font-weight: 500;letter-spacing: -0.05em;}
.about .txt .t3 p{overflow:hidden;}
.about .txt .t3 p span{display:block;transform:translate(0,100%);transition:0.8s;transition-delay:1.4s;}
.about .img{display: flex;justify-content: flex-end;gap:0 4vw;}
.about .img .box{overflow: hidden;position: relative;transition:1s;}
.about .img .box1{width: 15.625vw;height: 44.7917vw;margin-top: 3.6458vw;transform:translate(0,10%);opacity:0;}
.about .img .box2{width: 41.6667vw;height: 44.7917vw;transform:translate(0,-10%);opacity:0;}
.about .img .box .bg{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-repeat: no-repeat;background-size: cover;}
.about .img .box1 .bg{background-position: right bottom;background-image: url(../images/about-bg1.jpg);}
.about .img .box2 .bg{background-position: left bottom;background-image: url(../images/about-bg2.jpg);}
@keyframes about_bg1 {
    0% {background-position: right bottom;}
	95% {background-position: left bottom;}
    100% {background-position: left bottom;}
}
@keyframes about_bg2 {
    0% {background-position: left bottom;}
	90% {background-position: right bottom;}
    100% {background-position: right bottom;}
}
@media all and not (max-aspect-ratio:12/10){
	.about .txt.on strong{opacity:1;transform:none;}
	.about .txt.on strong b{font-weight: 500;font-size: 3.125vw;}
	.about .txt.on .t2 p span,
	.about .txt.on .t3 p span{transform:none;}
	.about .img.active .box{opacity:1;transform:none;}
	.about .img.active .box1 .bg{animation: about_bg1 32s 1s linear infinite;}
	.about .img.active .box2 .bg{animation: about_bg2 14s 1s linear infinite;}
}
@media all and (max-aspect-ratio:12/10){
	.about{padding: 20vw 0 10vw 12vw;}
	.about .txt{position:static;padding-top:0;}
	.about .txt strong{font-size:5vw;}
	.about .txt .t2{font-size:2.6vw;line-height: 2em;margin-top: 10vw;}
	.about .txt .t2 p em{font-size:2.8vw;}
	.about .txt .t3{font-size:3vw;line-height:1.8em;margin-top: 6vw;}
	.about .img{margin-top:15vw;}
	.about .img .box1{width: 25vw;height: 52vw;margin-top: 7vw;}
	.about .img .box2{width: 48vw;height: 51vw;}
	.about .txt.active strong{opacity:1;transform:none;}
	.about .txt.active strong b{font-weight: 500;font-size: 8.6vw;}
	.about .txt.active .t2 p span,
	.about .txt.active .t3 p span{transform:none;}
	.about .img.active .box{opacity:1;transform:none;}
	.about .img.active .box1 .bg{animation: about_bg1 32s 1s linear infinite;}
	.about .img.active .box2 .bg{animation: about_bg2 14s 1s linear infinite;}
}

.brand{position:relative;}
.brand .trigger{position:absolute;left:0;}
.brand .trigger1{top:calc(var(--vh, 1vh) * -15);}
.brand .trigger2{top:calc(var(--vh, 1vh) * 25);}
.brand .trigger5{top:calc((var(--vh, 1vh)* 50) - 26vw);}
.brand .trigger6{top:calc((var(--vh, 1vh)* 160) - 26vw);}
.brand .trigger7{top:calc((var(--vh, 1vh)* 270) - 26vw);}
.brand .trigger8{top:calc((var(--vh, 1vh)* 380) - 26vw);}
.brand .area1 .sec_tit{left: 0;top: 0.7813vw;}
.brand .area1{padding-left: 10.4167vw;}
.brand .area1 .sticky{padding-top:2vw;}
.brand .area1 .txt{position: absolute;left: 0;top: 12.8021vw;display: flex;align-items: flex-start;gap: 0 20.8333vw;z-index:2;}
.brand .area1 .txt ul li{font-family: 'TIMESS';color: #000;font-size: 4.1667vw;line-height: 4.6875vw;transform: scaleX(1.1);transform-origin: 0 0;overflow:hidden;}
.brand .area1 .txt ul li span{display:block;transform:translate(0,100%);transition:0.8s;}
.brand .area1 .txt ul .t1{text-indent: 5.2083vw;}
.brand .area1 .txt ul .t1 span{transition-delay:0.6s;}
.brand .area1 .txt ul .t2 span{transition-delay:0.8s;}
.brand .area1 .txt ul .t3{color: #ce6455;font-size: 4.6875vw;opacity:0;transform:translate(-10%,0);transition:0.8s;transition-delay:1.1s;}
.brand .area1 .txt .txt_box{position:relative;opacity:0;transform:translate(3vw,0);transition:0.6s;transition-delay:1.2s;}
.brand .area1 .txt .txt_box p{position:absolute;left:0;top:0;font-size: 0.8333vw;color: #555;line-height: 2em;white-space:nowrap;width: 150%;height:100%;}
.brand .area1 .txt .txt_box .t2{position:static;}
.brand .area1 .txt .txt_box .t2 span em,
.brand .area1 .txt .txt_box .t3 span em{transform:translate(0,100%);}
.brand .area1 .txt .txt_box p span{display:block;overflow:hidden;}
.brand .area1 .txt .txt_box p span em{display:block;background-color:#fff;transition:0.6s;}
.brand .area1 .img{padding-top: 46vw;padding-left: 7.5521vw;}
.brand .area1 .img .bg{width: 100%;height: 22.3958vw;margin: 0 0 0 auto;position:relative;overflow:hidden;clip-path: inset(50% 0% 50% 0%);}
.brand .area1 .img .bg span{display:block;width:100%;height:100%;background: url(../images/brand-bg.jpg) no-repeat center / cover;transform:scale(1.3);}
.brand .area2{padding: 8.8542vw 10.4167vw 9.1146vw;position:relative;margin-top:-8vw;}
.brand .area2 .typo{font-family: 'TIMESS';color: rgba(0,0,0,0.05);font-size: 15.625vw;overflow: hidden;display: flex;justify-content: center;position: absolute;left: 0;top: 0;width: 100%;transform: scaleX(1.1);}
.brand .area2 .typo em{transform:translate(0,100%);}
.brand .area2 .typo svg{width: auto; height: 10.25vw; fill: rgba(0,0,0,0.05);}
.brand .area2 .card{padding-top: 8.0729vw;position: relative;}
.brand .area2 .card ul{display: flex;gap: 0 0.7813vw;}
.brand .area2 .card ul li{width: 20%;height: 20.5729vw;overflow: hidden;position: relative;}
.brand .area2 .card .bg{position:absolute;left:0;top:0;width:0;height:100%;background: no-repeat center / cover;transform:scale(1.1);transition:1s;transition-delay:0.3s;}
.brand .area2 .card .bg span{position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.8);opacity:0;transition:0.6s;}
.brand .area2 .card .c1 .bg{background-image: url(../images/brand-card1.jpg);}
.brand .area2 .card .c2 .bg{background-image: url(../images/brand-card2.jpg);}
.brand .area2 .card .c3 .bg{background-image: url(../images/brand-card3.jpg);}
.brand .area2 .card .c4 .bg{background-image: url(../images/brand-card4.jpg);}
.brand .area2 .card .c5 .bg{background-image: url(../images/brand-card5.jpg);}
.brand .area2 .card .txt{position: absolute;left: 0;top: 0;width: 100%;height: 100%;display:flex;align-items:center;justify-content:center;text-align:center;opacity:0;transition:0.6s;transition-delay:0.6s;}
.brand .area2 .card .txt dl{position:relative;z-index:1;margin-bottom: -2vw;}
.brand .area2 .card .txt dl dt{font-family: 'TIMESS';font-size:1.25vw;color:#fff;letter-spacing:-0.025em;transform:scaleX(1.1);display: flex;justify-content: center;}
.brand .area2 .card .txt dl dt span{transform: scale(5);transition:0.4s;transition-delay:0.5s;display: flex;align-items: center;}
.brand .area2 .card .txt dl dt svg{width: auto; height: 0.865vw;}
.brand .area2 .card .txt dl dt .st0{fill:#fff;}
.brand .area2 .card .txt dl dt p{overflow:hidden;max-width:0;transition:0.8s; line-height: 1vw;}
.brand .area2 .c4 p{margin-left: 0.05vw;}
.brand .area2 .card .txt dl dt p em{display:block;opacity:0;transition:0.6s;text-wrap: nowrap;}
.brand .area2 .card .txt dl dd{color:#fff;font-size:0.7813vw;margin-top:0.7813vw;overflow:hidden;}
.brand .area2 .card .txt dl dd span{display:block;transform:translate(0,110%);transition:0.6s;}
.brand .area2 .card .ori{color: #999;font-size: 0.7292vw;font-family: 'TIMESS';line-height: 1.43em;margin-top: 1.3021vw;overflow: hidden;position:relative;}
.brand .area2 .card .ori p{overflow:hidden;transform: scaleX(1.1);transform-origin: 0 0;}
.brand .area2 .card .ori p span{display:block;transform:translate(0,100%);transition:0.6s;transition-delay:1s;}
.brand .area3{position: relative;padding-top: 12vw;}
.brand .area3 .sec_tit{right: 59vw;top: 3.7vw;}
.brand .area3 .img{position: relative;}
.brand .area3 .img img{display: block;width: 100%;}
.brand .area3 .img .box{overflow: hidden;position: relative;}
.brand .area3 .img .box .bg{height: 18.2292vw;background: no-repeat center / cover;opacity:0;transition:1.2s;}
.brand .area3 .img .box1 .bg{background-image: url(../images/brand-area3-1.jpg);background-position:left center;}
.brand .area3 .img .box2 .bg{background-image: url(../images/brand-area3-2.jpg);background-position:right center;}
.brand .area3 .img .box .logo{position: absolute;width: 15.9896vw;left: 50%;margin-left: -7.9948vw;transition:0.8s;transition-delay:1s;}
.brand .area3 .img .box1 .logo{bottom: 0;transform: translate(0,105%);}
.brand .area3 .img .box2 .logo{top: 0;transform: translate(0,-105%);}
.brand .area3 .txt{padding-right: 10.4167vw;padding-top:10.6042vw;margin-top:-8vw;}
.brand .area3 .txt dl{text-align: right;}
.brand .area3 .txt dl dt{color: #000;font-family: "Noto Serif KR";font-size: 1.3542vw;letter-spacing: -0.075em;margin-bottom: 1.0417vw;opacity:0;transform:translate(-3vw,0);transition:0.8s;}
.brand .area3 .txt dl dd{color: #72a5c7;font-family: "Noto Serif KR";font-size: 1.1458vw;line-height: 1.82em;letter-spacing: -0.075em;font-weight: 500;opacity:0;transform:translate(3vw,0);transition:0.8s;transition-delay:0.3s;}
.brand .area4{padding: 10.4167vw 0 16.1458vw;overflow:hidden;}
.brand .area4 .in{display: flex;align-items: flex-end;gap: 0 5.7292vw;}
.brand .area4 .img{width: 50vw;position: relative;}
.brand .area4 .img .box{overflow: hidden;}
.brand .area4 .img .box ~ .box{margin-top: 1.0417vw;}
.brand .area4 .img .box .bg{opacity:0;transform:scale(1.2);}
.brand .area4 .img .box1 .bg{background: url(../images/brand-area4-1.jpg?ver=5) no-repeat center / cover;height: 19.0625vw;transition:1.2s;}
.brand .area4 .img .box2 .bg{height: 12.7604vw;transition:1.2s;transition-delay:0.3s;}
.brand .area4 .img .box2 .bg span{display:block;width:100%;height:100%;background: url(../images/brand-area4-2.jpg) no-repeat 50% 0% / cover;}
.brand .area4 .img .line_txt{background-color: #ce6455;display: flex;align-items: flex-end;gap: 0 0.3646vw;position: absolute;top: 2.6042vw;right: -6.7708vw;padding: 0.5208vw 0.7vw;transform: scaleX(0);transform-origin: 0 0;transition:0.8s;transition-delay:1s;}
.brand .area4 .img .line_txt em{width: 7.0313vw;height: 1px;background-color: #fff;transform:scaleX(0);transform-origin:0 0;transition:0.5s;transition-delay:1.6s;}
.brand .area4 .img .line_txt span{font-family: 'TIMESS';color: #fff;font-size: 0.7813vw;opacity:0;transform:translate(-5%,0);transition:0.6s;transition-delay:2s;}
.brand .area4 .txt{padding-bottom:2.0833vw;}
.brand .area4 .txt strong{display: block;color: #000;font-size: 1.6667vw;font-family: "Noto Serif KR";font-weight: 400;line-height: 1.56em;letter-spacing: -0.075em;margin-bottom: 3.125vw;opacity:0;transform:translate(20%,0);transition:0.8s;transition-delay:0.6s;}
.brand .area4 .txt .t2{color: #555;font-size: 0.8333vw;line-height: 2em;letter-spacing: -0.05em;margin-bottom: 1.0417vw;}
.brand .area4 .txt .t2 p{overflow:hidden;}
.brand .area4 .txt .t2 p span{display:block;transform:translate(0,100%);transition:0.8s;transition-delay:0.9s;}
.brand .area4 .txt .t3{color: #000;font-size: 0.9375vw;letter-spacing: -0.05em;}
.brand .area4 .txt .t3 p{overflow:hidden;}
.brand .area4 .txt .t3 p span{display:block;transform:translate(0,100%);transition:0.8s;transition-delay:1.2s;}
.brand .area1.active .txt ul li span{transform:none;}
.brand .area1.active .txt ul .t3,
.brand .area1.active .txt .txt_box{opacity:1;transform:none;}
.brand .area2 .card ul.active .bg{width:100%;transform:none;}
.brand .area2 .card ul.active .txt{opacity:1;}
.brand .area2 .card ul.active + .ori p span{transform:none;}
.brand .area3 .img.active .box1 .bg{background-position:center center;transform:none;opacity:1;}
.brand .area3 .img.active .box2 .bg{background-position:center center;transform:none;opacity:1;}
.brand .area3 .img.active .box1 .logo{transform: translate(0,50%);}
.brand .area3 .img.active .box2 .logo{transform: translate(0,-50%);}
.brand .area3 .txt.active dl dt,
.brand .area3 .txt.active dl dd{opacity:1;transform:none;}
.brand .area4 .in.active .img .box .bg{opacity:1;transform:none;}
.brand .area4 .in.active .img .line_txt{transform:scale(1.1);}
.brand .area4 .in.active .img .line_txt em{transform:none;}
.brand .area4 .in.active .img .line_txt span,
.brand .area4 .in.active .txt strong,
.brand .area4 .in.active .txt .t2 p span,
.brand .area4 .in.active .txt .t3 p span{opacity:1;transform:none;}
@keyframes brand_bg1 {
    0% {height:100%;}
	100% {height:0%;}
}
@keyframes brand_bg2 {
    0% {width:95%;}
	100% {width:0%;}
}
@media all and not (max-aspect-ratio:12/10){
	.brand .area2 .card ul li:hover .bg span{opacity:1;}
	.brand .area2 .card ul li:hover .txt dl dt span{color:#ce6455;transform:none;transition-delay:0s;}
	.brand .area2 .card ul li:hover .txt dl dt .st0{fill:#ce6455;transform:none;transition-delay:0s;}
	.brand .area2 .card ul li:hover .txt dl dt p{max-width:100%;transition-delay:0.3s;}
	.brand .area2 .card ul li:hover .txt dl dt p em{opacity:1;transition-delay:0.5s;}
	.brand .area2 .card ul li:hover .txt dl dd span{transform:none;transition-delay:0.7s;}
	.brand .area1 .txt .txt_box.on2 .t1 span em,
	.brand .area1 .txt .txt_box.on3 .t1 span em{transform:translate(0,100%);}
	.brand .area1 .txt .txt_box.on2 .t2 span em{transform:none;transition-delay:0.3s;}
	.brand .area1 .txt .txt_box.on3 .t3 span em{transform:none;transition-delay:0.3s;}
}
@media all and (max-aspect-ratio:12/10){
	.brand .area1 .sec_tit{top:3vw;}
	.brand .area1{padding-left:5vw;height:auto;}
	.brand .area1 .sticky{padding-top:15vw;position:static;}
	.brand .area1 .txt{position:static;display:block;padding-top:15vw;padding-left:15vw;width: 85vw;}
	.brand .area1 .txt ul{margin-bottom:10vw;}
	.brand .area1 .txt ul li{font-size:6vw;line-height:7vw;}
	.brand .area1 .txt ul .t1{text-indent: 6.5vw;}
	.brand .area1 .txt ul .t3{font-size:7vw;}
	.brand .area1 .txt .txt_box{opacity:1;transform:none;}
	.brand .area1 .txt .txt_box p{font-size:2.8vw;line-height: 1.8em;text-align:right;position:static;letter-spacing: -0.03em; width: 100%;}
	.brand .area1 .txt .txt_box p span em{transition:0.6s;transition-delay:1.3s;}
	.brand .area1 .txt .txt_box .t1 span em{transform:translate(0,100%);}
	.brand .area1 .img{padding-top: 15vw;padding-left:13vw;}
	.brand .area1 .img .bg{height:40vw;}
	.brand .area2{padding: 20vw 10vw;margin-top:0;}
	.brand .area2 .wh{position:sticky;left:0;top:calc(var(--vh, 1vh) * 88);z-index:10;background-color:#fff;width:100%;height:calc(var(--vh, 1vh)* 40);}
	.brand .area2 .typo{font-size: 16vw;position: sticky;top:calc(var(--vh, 1vh)* 8);}
	.brand .area2 .typo svg{height: 10.25vw; fill: rgba(0,0,0,0.05);}
	.brand .area2 .card{padding-top:calc(var(--vh, 1vh)* 5);}
	.brand .area2 .card ul{display:block;}
	.brand .area2 .card ul::after{content:"";display:block;width:100%;height:calc(var(--vh, 1vh)* 45);}
	.brand .area2 .card ul li{width:100%;height: calc((var(--vh, 1vh)* 75) - 16vw);position: sticky;top: calc((var(--vh, 1vh)* 13) + 16vw);background-color:#fff;margin-bottom: calc(var(--vh, 1vh)* 50);}
	.brand .area2 .card ul .c2{margin-top: calc(var(--vh, 1vh)* -40);}
	.brand .area2 .card ul .c5{position:relative;top: auto;margin-bottom: 0;}
	.brand .area2 .card .txt dl dt{font-size: 8vw;}
	.brand .area2 .card .txt dl dt svg{height: 5.2vw;}
    .brand .area2 .card .txt dl dt p{line-height: 5.8vw;}
	.brand .area2 .card .txt dl dd{font-size: 5vw;margin-top: 4vw;}
	.brand .area2 .card .bg{width:100%;transform:none;opacity:0;transform:translate(0,10vw);transition:0.6s;}
	.brand .area2 .card .ori{margin-top: calc(var(--vh, 1vh)* -45);font-size: 2vw;height: calc(var(--vh, 1vh)* 5);background-color: #fff;padding-top: 3vw;}
	.brand .area2 .card ul li.active .bg span{opacity:1;}
	.brand .area2 .card ul li.active .txt dl dt span{color:#ce6455;transform:none;transition-delay:0s;}
	.brand .area2 .card ul li.active .txt dl dt .st0{fill:#ce6455;transform:none;transition-delay:0s;}
	.brand .area2 .card ul li.active .txt dl dt p{max-width:100%;transition-delay:0.3s;}
	.brand .area2 .card ul li.active .txt dl dt p em{opacity:1;transition-delay:0.5s;}
	.brand .area2 .card ul li.active .txt dl dd span{transform:none;transition-delay:0.7s;}
	.brand .area3{padding-top:25vw;z-index: 11;}
	.brand .area3 .sec_tit{right: 61vw;top: 4.7vw;}
	.brand .area3 .img .box .bg{height:35vw;}
	.brand .area3 .img .box1 .bg{background-position: left 30% center;}
	.brand .area3 .img .box2 .bg{background-position: right 30% center;}
	.brand .area3 .img .box .logo{width: 30vw;margin-left:-15vw;}
	.brand .area3 .txt{padding-top: 45vw;margin-top: -35vw;}
	.brand .area3 .txt dl dt{font-size: 4vw;margin-bottom: 3vw;}
	.brand .area3 .txt dl dd{font-size: 3.4vw;}
	.brand .area4{padding:20vw 0;}
	.brand .area4 .in{display:block;}
	.brand .area4 .img{width:80vw;}
	.brand .area4 .img .box ~ .box{margin-top:2vw;}
	.brand .area4 .img .box1 .bg{height:35vw;}
	.brand .area4 .img .box2 .bg{height:20vw;}
	.brand .area4 .img .line_txt{top: 4vw;padding: 1vw;gap: 0 2vw;right: -10vw;}
	.brand .area4 .img .line_txt em{width:10vw;}
	.brand .area4 .img .line_txt span{font-size: 2vw;}
	.brand .area4 .txt{padding-left:10vw;padding-top:10vw;}
	.brand .area4 .txt strong{font-size: 5vw;margin-bottom: 6vw;}
	.brand .area4 .txt .t2{font-size: 2.8vw;margin-bottom:4vw;}
	.brand .area4 .txt .t3{font-size:3vw;}
	.brand .area1.active .txt .txt_box p span em{transform:none;}
	.brand .area2 .card ul.active .bg{opacity:1;transform:none;}
	.brand .area1 .img.active .bg{clip-path:inset(0% 0% 0% 0%);transition:0.8s;}
	.brand .area1 .img.active .bg span{transform:none;transition:1.5s;}
}

.poetic{overflow: hidden;}
.poetic .sec_tit{left: 0;top: 0.7813vw;}
.poetic .area1{padding-left: 10.4167vw;}
.poetic .area1 .box{display: flex;gap: 0 10.4167vw;padding-top:4.1667vw;padding-left: 11.9792vw;position: relative;}
.poetic .area1 .img{position: relative;width: 36.4583vw;height: 36.4583vw;overflow: hidden;clip-path: rect(0% 0% 100% 0%);transition:0.8s;transition-delay:0.2s;}
.poetic .area1 .img .bg{width: 100%;height: 100%;background: url(../images/poetic-area1.jpg) no-repeat 50% 100% / cover;}
.poetic .area1 .tit{position: absolute;left: 27.3854vw;bottom: -5.2271vw;z-index: 1;white-space: nowrap;padding-top:calc(var(--vh, 1vh) * 20);transform:translate(0,-5%);}
.poetic .area1 .tit .t1{display: block;font-family: "Noto Serif KR";font-size: 1.6667vw;color: #000;font-weight: 300;letter-spacing: -0.075em;overflow:hidden;}
.poetic .area1 .tit .t1 span{display:block;transform:translate(0,100%);transition:0.6s;}
.poetic .area1 .tit .t2{display: block;font-family: 'TIMESS';font-size: 5.2083vw;color: #000;transform: scaleX(1.1);transform-origin: 0 0;font-weight: 400;margin-top: 0.5208vw;overflow:hidden;}
.poetic .area1 .tit .t2 span{display:block;transform:translate(0,100%);transition:0.6s;transition-delay:0.2s;}
.poetic .area1 .tit .t3{color: #555;font-size: 0.8333vw;line-height: 2em;margin-top: 0.2604vw;}
.poetic .area1 .tit .t3 p{overflow:hidden;}
.poetic .area1 .tit .t3 p span{display:block;transform:translate(0,100%);transition:0.6s;transition-delay:0.4s;}
.poetic .area1 .txt strong{display: block;font-family: "Noto Serif KR";font-size: 1.6667vw;color: #000;font-weight: 300;letter-spacing: -0.075em;line-height: 1.56em;opacity:0;transform:translate(-10%,0);transition:0.8s;transition-delay:0.8s;}
.poetic .area1 .txt p{color: #555;font-size: 0.8333vw;line-height: 2em;margin-top: 3.125vw;letter-spacing: -0.05em;opacity:0;transform:translate(-10%,0);transition:0.8s;transition-delay:1.1s;}
.poetic .area1 .txt span{display: block;color: #000;font-size: 0.9375vw;margin-top: 1.0417vw;letter-spacing: -0.05em;opacity:0;transform:translate(-10%,0);transition:0.8s;transition-delay:1.4s;}
.poetic .area1 .txt span em{font-family: 'TIMESS';letter-spacing: 0;}
.poetic .area2{padding: 15.625vw 5vw 11.4583vw;}
.poetic .area2 ul{display: flex;gap: 0 0.9375vw;}
.poetic .area2 ul li{width: 25%;height: 36.4583vw;position:relative;overflow:hidden;}
.poetic .area2 ul li .bg{width: 100%;height: 100%;}
.poetic .area2 ul li .bg span{display:block;width:0;height:100%;background: no-repeat center / cover;transition:1.2s;}
.poetic .area2 ul .l1 .bg span{background-image: url(../images/poetic-area2-1.jpg);}
.poetic .area2 ul .l2 .bg span{background-image: url(../images/poetic-area2-2.jpg);}
.poetic .area2 ul .l3 .bg span{background-image: url(../images/poetic-area2-3.jpg);}
.poetic .area2 ul .l4 .bg span{background-image: url(../images/poetic-area2-4.jpg);}
.poetic .area1.active .img{clip-path: rect(0% 100% 100% 0%);}
.poetic .area2 ul.active li .bg span{width:100%;}
@media all and not (max-aspect-ratio:12/10){
	.poetic .area1.active .txt strong,
	.poetic .area1.active .txt p,
	.poetic .area1.active .txt span,
	.poetic .area1 .tit.active .t1 span,
	.poetic .area1 .tit.active .t2 span,
	.poetic .area1 .tit.active .t3 p span{opacity:1;transform:none;}
}
@media all and (max-aspect-ratio:12/10){
	.poetic .sec_tit{top:3vw;}
	.poetic .area1{padding-left:10vw;}
	.poetic .area1 .box{padding-top:5vw;padding-left:0;}
	.poetic .area1 .box{display:block;padding-right:5vw;}
	.poetic .area1 .img{width:65vw;height:65vw;margin: 0 0 0 auto;}
	.poetic .area1 .tit{padding-top:10vw;position:static;}
	.poetic .area1 .tit .t1{font-size: 4vw;}
	.poetic .area1 .tit .t1 span{transition-delay:0.8s;}
	.poetic .area1 .tit .t2{font-size: 7vw;margin-top: 2.5vw;}
	.poetic .area1 .tit .t2 span{transition-delay:1s;}
	.poetic .area1 .tit .t3{font-size: 2.6vw;margin-top: 2.5vw;line-height:1.8em;opacity:0;transform:translate(0,40%);transition:0.6s;transition-delay: 1.3s;}
	.poetic .area1 .tit .t3 p,
	.poetic .area1 .tit .t3 p span{display: inline;}
	.poetic .area1 .tit .t3 p span{transition-delay:1.2s;}
	.poetic .area1 .txt{padding-top:10vw;text-align: right;}
	.poetic .area1 .txt strong{font-size: 4.5vw;margin-bottom: 5vw;transition-delay:0s;}
	.poetic .area1 .txt p{font-size:2.8vw;line-height:1.8em;transition-delay:0.3s;}
	.poetic .area1 .txt span{font-size:3vw;margin-top:3vw;transition-delay:0.6s;}
	.poetic .area2{padding:25vw 10vw 0;}
	.poetic .area2 ul{gap: 2vw;flex-wrap:wrap;}
	.poetic .area2 ul li{width:39vw;height: 55vw;}
	.poetic .area2 ul li .bg{height:0;transition:1s;}
	.poetic .area2 ul li .bg span{width:100%;transform:scale(1.2);transition:1.5s;}
	.poetic .area1.active .tit .t1 span,
	.poetic .area1.active .tit .t2 span,
	.poetic .area1.active .tit .t3 p span,
	.poetic .area1 .txt.active strong,
	.poetic .area1 .txt.active p,
	.poetic .area1 .txt.active span{opacity:1;transform:none;}
	.poetic .area2 ul.active li .bg{height:100%;}
	.poetic .area2 ul.active li .bg span{transform:none;}
	.poetic .area1 .tit.active .t3{opacity:1;transform:none;}
}

footer{padding: 0 5.2083vw 5.4688vw;overflow:hidden;}
footer .foot_logo{margin-bottom: 2.6042vw;opacity:0;transform:translate(0,50%);transition:0.8s;}
footer .foot_logo img{display:block;width: 6.3542vw;margin: 0 auto;}
footer .ori{position:relative;}
footer .ori .top{position:absolute;right:0;bottom:0;opacity:0;transform:translate(0,50%);transition:0.6s;transition-delay:1s;}
footer .ori .top button{display:block;border:none;background:none;}
footer .ori .top button img{display:block;width:0.4167vw;}
footer .ori p{color: #999;font-size: 0.6771vw;line-height: 2.15em;text-align: center;overflow: hidden;}
footer .ori p span{display: block;transform:translate(0,100%);transition:0.8s;transition-delay:0.3s;}
footer .info{margin-top: 3.125vw;padding: 2.3438vw 0;position: relative;display: flex;align-items: flex-start;justify-content: space-between;}
footer .info .lef{padding-left: 2.3438vw;max-width: 50vw;opacity:0;transform:translate(-30%,0);transition:0.6s;transition-delay:0.3s;}
footer .info .rig{max-width: 30vw;opacity:0;transform:translate(30%,0);transition:0.6s;transition-delay:0.3s;}
footer .info p{color: #2a3942;font-size: 0.625vw;font-weight: 400;letter-spacing: -0.025em;line-height: 1.5em;}
footer .info p span{font-weight: 600;}
footer.active .foot_logo{opacity:1;transform:none;}
footer.active .ori p span{transform:none;}
footer.active .info .lef,
footer.active .info .rig,
footer.active .ori .top{opacity:1;transform:none;}
@media all and (max-aspect-ratio:12/10){
	footer{padding: 20vw 5vw 10vw;}
	footer .foot_logo{margin-bottom: 7vw;}
	footer .foot_logo img{width: 20vw;}
	footer .ori{position:static;}
	footer .ori p{font-size:2.5vw;line-height: 1.7em;}
	footer .ori .top{bottom:auto;top:0;}
	footer .ori .top button{padding: 0 5vw;}
	footer .ori .top button img{width:1.3vw;}
	footer .info{margin-top: 8vw;padding: 6vw 0;}
	footer .info p{font-size: 2.6vw;}
}

/*popup*/
.popup{position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.8);opacity:0;z-index:-1;transition:0.8s;}
.popup .pop_box{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.popup.vd_pop .pop_box{transform:translate(0,-100%);transition:0.8s;}
.popup .pop_wrap{width:58vw;position:relative;margin: 0 auto;}
.popup .pop_wrap .close{position:absolute;left:calc(100% + 1.5vw);top:0;}
.popup .pop_wrap .close button{display:block;border:none;background:url(../images/pop-close.png) no-repeat center / contain;width:1.0417vw;height:1.0417vw;}
.popup .pop_wrap iframe{display:block;width:100%;height:100%;position:absolute;left:0;top:0;}
.popup.on{opacity:1;z-index:100;}
.popup.vd_pop.on .pop_box{transform:none;transition-delay:0.2s;}
@media all and (max-aspect-ratio:10/10){
	.popup .pop_box{padding: 0 5vw;}
	.popup .pop_wrap{width:100%;}
	.popup .pop_wrap .close{left:auto;right:0;top:auto;bottom:calc(100% + 5vw);}
	.popup .pop_wrap .close button{width: 6vw;height: 6vw;}
}