@charset "utf-8";

/*
* File       : layout.css
* Author     : B-WORKER
* Dependency : css/reset.css
*      
 * SUMMARY:
 * 1) MAIN animation
 * 2) MAIN CONTENTS
*/

/* **************************************** *
 * 사이트 시작시 커버
 * **************************************** */
.main-cover{position:fixed; opacity:1; visibility:visible; top:0; left:0; z-index:999; width:100%; height:100%; background:#121212; transition:all 1.2s ease 0s;}
.motion-on .main-cover{opacity:0; visibility:hidden;}

/* **************************************** *
 * Main animation set
 * **************************************** */
[data-txt-motion]{}
[data-txt-motion="hidden"]{overflow:hidden;}
[data-txt-motion="hidden"] > span{display:block; opacity:0;}

.swiper-slide-active [data-txt-motion="hidden"] > span{animation:text_hidden_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="left"]{animation:text_left_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="right"]{animation:text_right_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="up"]{animation:text_up_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="down"]{animation:text_down_motion 1.6s ease 0.1s forwards;}

.main-visual__text [data-txt-motion="hidden"]{opacity: 1;}
.main-visual__bg i{background-repeat: no-repeat; background-size: cover; background-position: center; transform: scale(1.1); transition:transform 10s ease;}
.swiper-slide-active .main-visual__bg i{transform: scale(1);}

@keyframes text_hidden_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateY(0);}
}
@keyframes text_left_motion {
 from{opacity:0; transform:translateX(70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_right_motion {
 from{opacity:0; transform:translateX(-70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_up_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateX(0);}    
}
@keyframes text_down_motion {
 from{opacity:0; transform:translateY(-70rem);}
 to{opacity:1; transform:translateX(0);}
}

@media (max-width:1023px){
	@keyframes text_left_motion {
		from{opacity:0; transform:translateX(-70rem);}
		to{opacity:1; transform:translateX(0);}
	}
}

/* **************************************** *
 * Site custom
 * **************************************** */
 #content {z-index: 1; position: relative; background: var(--w);}

 .main-dec {display: inline-flex; align-items: center; font-family: var(--lang-en); letter-spacing: -0.3px; color: var(--b-01);}
 .main-dec::before {content:''; width: 14rem; height: 14rem; margin-top: -1px; margin-right: 8rem; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url(../img/layout/ic-star.svg);}
 .main-dec.white {color: var(--w);}
 .main-dec.white::before {background-image: url(../img/layout/ic-star_w.svg);}

 h3 {line-height: 1.3; font-size: var(--font-55); font-weight: 700; color: var(--b-01); word-break: keep-all;}

 
@media (max-width:540px){
	 .main-dec {font-size: 13rem;}
	  .main-dec::before {width: 11rem; height: 11rem; margin-right: 5rem;}
}

/* main visual */
.main-visual{position: relative; height:var(--height-full);}
.main-visual-container,
.main-visual-wrapper,
.main-visual .swiper-slide{height:100% !important;}
.main-visual .swiper-slide::before{content:'';position:absolute;background-position:50% 50%;transition:all 1s ease;transform:scale(1);inset:0;background-repeat:no-repeat;background-size: cover;}
.main-visual .swiper-slide .wrap{width:100%;}
.main-visual__bg{position:absolute; top:0; left:0; width:100%; height:100%;}
.main-visual__bg i{display:block; height:100%; background-position:50% 50%; background-size: cover;}

.main-visual__nav {display: inline-flex; align-items: center;}
.main-visual__btn{position:relative;width:20rem;height:20rem;cursor:pointer;display: flex;align-items: center;font-size: 0;}
.main-visual__btn::after{content:"";display:block; width: 100%; height: 100%; background:url(../img/main/slider-arrow.svg) no-repeat 50% 50% / contain;}
.main-visual__btn.button-prev {margin-right: 8rem;}
.main-visual__btn.button-prev::after{transform: scaleX(-1);}

.main-visual__controls{position:absolute; top: 21vh; right:var(--margin); z-index:999; display: flex; align-items: center; margin-top: 12rem;}
.main-visual__count{display:flex; align-items:center; gap: 140rem; margin-right: 16rem; font-size:var(--font-14); font-weight: 700; color:#fff;}
.main-visual__count p {font-size:var(--font-14); font-weight: 700; color:#fff;}

.main-visual__text {position:absolute; top:21vh; width:100%; color:#fff;}
.main-visual__text h2{overflow:hidden;line-height:1.3;font-size:var(--font-84);font-weight:700;letter-spacing:-0.5rem;opacity: 0;}
.main-visual__con {padding-top: 75rem;}
.main-visual__con strong {opacity: .5; display: block; margin-bottom: 13rem; font-size: var(--font-15); font-weight: 600; color: var(--b-02); text-transform: uppercase;}
.main-visual__con p{margin-top:17rem;font-weight:100; font-size: var(--font-16); color: var(--w);}

.main-visual__item.mvi02 .main-visual__con strong {opacity: .15; font-weight: 400; color: var(--w);}

.main-visual__bar{position:absolute; top: 22rem; right: 97rem; z-index:50; width:110rem; height:2rem; background:rgba(255,255,255,0.12);}
.main-visual__bar > i{position:absolute; width:0%; height:100%; background:var(--c-01);}
.main-visual .swiper-slide-active .main-visual__bar > i{ width: 100%; transition: var(--progress-duration) linear; }

a.scroll-down{position:absolute; left: 50%; bottom: 40rem; transform: translateX(-50%);}

@media (max-width:1023px){
	.main-visual{min-height: 600rem;}
	.main-visual__text {top: 195rem;}
	.main-visual__text .wrap-wide {flex-direction: column;}
	.main-visual__con {padding-top: 30rem; text-align: left;}
	.main-visual__con p {font-weight: 300;}
	.main-visual__controls {top: 534rem; right: auto; left: var(--margin); margin-top: 0;}
	.main-visual__btn {width: 40rem; height: 40rem;}
	.main-visual__btn::after {background-size: 20rem;}
	.main-visual__bar {right: auto; left: 32rem; top: auto; bottom: -57rem;}
}

@media (max-width:860px){
	.main-visual__bg::after {position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: var(--op-b50);}	
}

@media (max-width:540px){
	.main-visual__text{top:125rem;}
	.main-visual__text h2 {margin-top: 42rem;}
	.main-visual__controls {top: 107rem; bottom: auto;}
	.main-visual__btn.button-prev {margin-right: 0;}
	.main-visual__btn::after {background-size: 16rem;}
	.main-visual__bar {top: 0;}
}

/* about */
.main-about {overflow: hidden; position: relative; margin-top: var(--space180); padding-bottom: var(--space140);}
.main-about .main-dec {position: absolute; left:var(--margin); top: 0;}
.main-about__txt {margin-left: 29.4%; padding-right: var(--margin);}
.main-about__txt h3 {margin-bottom: 20rem; line-height: 1.4;}
.main-about__txt h3 span {position: relative; align-items: center; padding-left: 70rem; font-weight: 700; color: var(--c-01);}
.main-about__txt h3 span::before {overflow: hidden; position: absolute; left:0; top: 50%; content:''; display: block; width: 55rem; height: 55rem; border-radius: 3rem; background: url(../img/main/about-symbol.svg) no-repeat center / cover; transform: translateY(-50%);}
.main-about__txt p {font-size: var(--font-17);}
.main-about__txt .btn-basic {margin-top: 48rem;}
.main-about-container {margin-top: var(--space180);}
.main-about__item a {position: relative; transition: var(--trans-01);}
.main-about__item a::before {opacity: 0; visibility: hidden; position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: var(--op-b50); transition: var(--trans-01);}
.main-about__item p {position: absolute; left:35rem; bottom: 35rem; font-size: var(--font-24); font-weight: 700; color: var(--w);}
.main-about__item .btn-basic__arrow {opacity: 0; visibility: hidden; position: absolute; left:50%; top: 50%; transform: translate(-50%, -50%); transition: var(--trans-01);}

@media (hover: hover) and (pointer: fine){
	.main-about__item:hover {margin-top: -40rem; box-shadow: 22rem 25rem 45rem rgba(0, 0, 0, .25);}
	.main-about__item:hover a::before,
	.main-about__item:hover .btn-basic__arrow {opacity: 1; visibility: visible;} 
}

@media (max-width:1023px){
	.main-about__item p {left: 30rem; bottom: 30rem;}
}

@media (max-width:540px){
	.main-about .main-dec {position: relative; top:auto; margin-bottom: 30rem;}
	.main-about__txt {margin-left: 0; padding: 0 var(--margin);word-break: keep-all;}
	.main-about__txt h3 {margin-bottom: 13rem;}
	.main-about__txt h3 span {padding-left: 42rem; }
	.main-about__txt h3 span::before{width: 32rem; height: 32rem; margin-top: 1px;}
	.main-about__txt > p br {display: none;}
	.main-about__txt .btn-basic {margin-top: 32rem;}
}

/* product */
.main-product {overflow: hidden; padding: var(--space70) 0; text-align: center;}
.main-product .main-dec {opacity: 0.5; margin-bottom: var(--space120 );}
.main-product__item {flex-direction: column; align-items: center; background: transparent;}
.main-product__item figure {position: relative; width: 860rem; aspect-ratio: 16/9;}
.main-product__item figure img {object-fit: contain;}
.main-product__item figure:not(:has(img))::after {filter: grayscale(1); -webkit-filter: grayscale(1); opacity: .2; position: absolute; left: 50%; top: 50%; content:''; width: 220rem; height: 100rem; background: url(../img/layout/logo.svg) no-repeat center / contain; transform: translate(-50%, -50%);}
.main-product__item > p {margin-bottom: 30rem; line-height: 1.5; font-size: var(--font-20);}
.main-product__item .btn-wrap {display: inline-flex; margin: 0 auto;}
.main-product__item a.btn-basic {display: inline-flex !important; margin: 0 auto; box-shadow: 0 2rem 7rem rgba(0, 0, 0, .05);}

.main-product-container .swiper-pagination {position: relative; gap: 12rem; margin-top: var(--space70); justify-content: center; padding-bottom: 5rem;}
.main-product-container .swiper-pagination-bullet {opacity: 1; width: 10rem; height: 10rem; background: #ddd;}
.main-product-container .swiper-pagination-bullet-active {background:var(--c-01);}

@media (max-width:860px){
	.main-product__item figure {width: 90%;}
}

@media (max-width:540px){
	.main-product .main-dec {margin-bottom: 50rem;}
	.main-product__item  {padding: 0 var(--margin);}
	.main-product__item > p {margin-bottom: 22rem;}
	.main-product__item figure:not(:has(img))::after {width: 160rem; height: 60rem;}

	.main-product-container .swiper-pagination {gap: 10rem;}
}

/* contact */
.main-contact {overflow: hidden; z-index: 1; position: relative; display: flex; align-items: center; justify-content: center; height: var(--height-full); padding: 10rem;}
.main-contact__inr {position: relative; overflow: hidden; --card-from-width: 300; --card-from-height: 450; --mask-progress: 0; width: calc(var(--card-from-width) * 1px + var(--mask-progress) * (100vw - var(--card-from-width) * 1px)); height: calc(var(--card-from-height) * 1px + var(--mask-progress) * (100vh - var(--card-from-height) * 1px)); border-radius: calc(20rem - (var(--mask-progress) * 20rem)); background: url(../img/main/contact.jpg) no-repeat center / cover; transition: border-radius 0.3s ease;}
.main-contact__intro,
.main-contact__txt {position: absolute; left:0; top:0; width: 100%; height: 100%; padding: 20rem;}
.main-contact__cate {font-weight: 100; font-size: 13rem; color: var(--w); text-transform: uppercase;}
.main-contact__cate .main-dec {font-weight: 100;}
.main-contact__intro .rolling-img {position: absolute; left:0; bottom:20rem; }
.main-contact__intro .rolling-img p {margin-right: 20rem; font-family: var(--lang-en); font-size: 35rem; font-weight: 700; color: var(--w); text-transform: uppercase;}
.main-contact__txt {opacity: 0; visibility: hidden;transition: var(--trans-01);}
.main-contact__txt-inr {position: relative; height: 100%; justify-content: flex-end; align-items: center; text-align: center; padding-bottom: 85rem;}
.main-contact__txt-inr h3 {position: absolute; top: 39%; text-shadow: 0 0 40rem #000; color: var(--w); white-space: nowrap;}
.main-contact__txt-inr > p {margin-bottom: 28rem; font-size: var(--font-18); color: var(--w);}
.main-contact__txt-inr .btn-basic > p span {font-size: var(--font-17);}

@media (max-width:1023px){
	.main-product__item figure {aspect-ratio: 4/3;}
}

@media (max-width:860px){
	.main-product__item figure {aspect-ratio: 4/3;}
	
}

@media (max-width:540px){
	.main-product__item figure {aspect-ratio: 4/3;}
	.main-contact__txt-inr {padding-bottom: 40rem;}
	.main-contact__txt-inr h3 {white-space: normal; font-size: 30rem;}
	.main-contact__txt-inr h3 br {display: none;}
	.main-contact__txt-inr > p {color: var(--w);}
	.main-contact__txt-inr > p {word-break: keep-all;}
	.main-contact__txt-inr > p br {display: none;}
}

/* notice */
.main-notice {margin-bottom: var(--space40); padding-top: var(--space140);}
.main-notice h3 {padding-bottom: var(--space40); border-bottom: 1px solid var(--br-01);}

@media (max-width:540px){
	.main-notice {margin-bottom: 0;}
}


/* bottom */
.main-bottom__title p {position: relative; line-height: 1; font-weight: 1000; font-size: 8.79vw; letter-spacing: -4rem; text-align: center; color: #EFF3F8; text-transform: uppercase;}
.main-bottom__title p:not(:last-child) {opacity: 0; transform: translateY(50%); transition: var(--trans-01);}
.main-bottom__title p:not(:last-child)::after {position: absolute; left:0; bottom:0; content:''; width: 100%; background: var(--w);}
.main-bottom__title p:nth-child(1)::after {height: 71%;}
.main-bottom__title p:nth-child(2)::after {height: 59%;}
.main-bottom__title p:nth-child(2) { margin-top: -6vw;}
.main-bottom__title p:nth-child(3) {margin-top: -5vw;}
.main-bottom__title.is_moved p:not(:last-child) {transform: translateY(0);}
.main-bottom__title.is_moved p:nth-child(1) {opacity: .4; transition-delay: .4s;}
.main-bottom__title.is_moved p:nth-child(2) {opacity: .6; transition-delay: .2s;}
.main-bottom__visual {height: var(--height-full); text-align: center; background: url(../img/main/bottom.jpg) no-repeat center / cover;}
.main-bottom__visual .wrap {justify-content: center; height: 100%;}
.main-bottom__visual h3 {margin-top: 16%; color: var(--w);}
.main-bottom__visual .btn-wrap {justify-content: center; margin-top: 60rem;}

@media (max-width:540px){
	.main-bottom__visual {height: 500rem;}
	.main-bottom__visual .btn-wrap {margin-top: 40rem;}
	.main-bottom__visual h3 {margin-top: 8%;}
	.main-bottom__title p {letter-spacing: -2rem;}
}