@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-container > section:not(.main-visual){background-color: var(--w); position: relative;}

/* **************************************** *
 * 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{transform: scale(1.2); transition:transform 15s 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);}
}

/* **************************************** *
 * Site custom
 * **************************************** */

/* main visual */
.main-visual{height:var(--height-full); position: relative;}
.main-visual > div{height: var(--height-full);position: fixed;top: 0;left: 0;width: 100%;}
.main-visual .scroll-down {position: absolute; right:var(--margin); bottom: 53rem; z-index: 30;}
.main-visual .scroll-down i{width: 54rem; height: 54rem; border-radius: 100%; border:2px solid var(--w); display: flex; align-items: center; justify-content: center;}
.main-visual .scroll-down span{color: var(--w);font-size: 13rem;text-align: center;display: block;margin-bottom: 12rem;}
.main-visual-container,
.main-visual-wrapper,
.main-visual .swiper-slide{height:var(--height-full) !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__video{ position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; }
.main-visual__btn{position:relative;width:30rem;height:30rem;cursor:pointer;display: flex;align-items: center;margin: 0 25rem;font-size: 16rem;color: #fff;font-weight: 600;}
.main-visual__btn::after{content:"";display:block;min-width: 30rem;height: 30rem;background:url(../img/common/arrow-basic_w.svg) no-repeat 50% 50%;background-size: 8rem;}
.main-visual__btn > i{}
.main-visual__btn.button-prev{flex-direction: row-reverse;}
.main-visual__controls{position:absolute; left: inherit; right:  var(--margin); width: 23rem;  z-index:999; top: 50%; transform: translateY(-50%);}
.main-visual__controls > div{display:flex;align-items:center;justify-content: center;}
.main-visual__count{display:flex; align-items:center; margin:0 50rem; font-size:17rem; color:#fff;}
.main-visual__count i{display:flex; align-items:center; position:relative;}
.main-visual__count em{}
.main-visual__count i::after{content:""; display:block; width:3rem; height:3rem; margin:0 10rem; background:#fff;}
.main-visual__btn.button-next::after{/* transform:rotate(-90deg); */}
.main-visual__btn.button-prev::after{transform: rotate(180deg);}

.main-visual .swiper-pagination{display:flex; gap:10rem; flex-direction: column;}
.main-visual .swiper-pagination-bullet{background: var(--w);}
.main-visual .swiper-pagination-bullet{width: 23rem;height: 3rem;background:#fff;border-radius: 0; opacity: 1; transition: var(--trans01);}
.main-visual .swiper-pagination-bullet-active{background:var(--c-02); transform: rotate(-30deg)}

.main-visual__text{position:absolute; top:40vh; width:100%;  color:#fff;}
.main-visual__text h1{overflow:hidden;line-height:1.1; opacity: 0;}
.main-visual__text h1 *{font-weight: 700; font-style: italic;}
.main-visual__text p{margin-top:26rem;font-weight:600;font-size:18rem;opacity: 0;}
.main-visual__text  a{max-width: 181rem; gap: 0; justify-content: space-between;}
.main-visual__text .btn-wrap{margin-top: 80rem;}


@media (max-width:1200px){

    .main-visual .scroll-down i{width: 50rem; height: 50rem;}
    .main-visual .scroll-down i svg{width:15rem ;}
}

@media (max-width:1023px){
	.main-visual{min-height: 600rem;}

    .main-visual .scroll-down span{line-height: 1.2;}
    .main-visual .scroll-down i{width: 44rem; height: 44rem;}
    .main-visual .scroll-down i svg{width:13rem ;}
}

@media (max-width:860px){
	
}

@media (max-width:540px){
	.main-visual__text{top:200rem;}
	.main-visual__text p{margin-top:10rem; font-size:15rem;}
	.main-visual__count{margin:0 10rem; font-size:15rem;}

    .main-visual__text  a{max-width:min-content; gap: 18rem;}
	
    .main-visual .scroll-down i{width: 30rem; height: 30rem;}
    .main-visual .scroll-down i svg{width: 10rem;}

	[fullpage-ani]{opacity: 1 !important; transform:none !important;}
    .main-visual .scroll-down{display: flex; flex-direction: column; align-items: center; justify-content: center; bottom: 32rem;}
    .main-visual .scroll-down span{margin-bottom: 10rem;}

    .main-visual .swiper-pagination{gap: 10rem; flex-direction: row;}
    .main-visual .swiper-pagination-bullet{width: 2rem; height: 16rem;}
    .main-visual__controls{right: inherit; top: inherit; transform: none; left: 24rem; bottom: 50rem;}
    
}

.main-intro{min-height: 100vh; padding-top:249rem; padding-bottom: 337rem; position: relative;}
.main-intro::before{content: ""; width: 772rem; height: 478rem; background: url(../img/main/main-second__bg.jpg) no-repeat; background-size: cover; position: absolute; left: 0; bottom: 0;}
.main-intro .comm-introTitle{margin-bottom: 52rem; position: relative;}
.main-intro h2{padding-left: 440rem;}


@media (max-width:1480px){

    .main-intro h2{padding-left: 330rem;}
}
@media all and (max-width:1200px){
	.main-intro{min-height: fit-content; padding-top: 200rem; padding-bottom: 300rem;}
}
@media all and (max-width:1023px){
	.main-intro h2{padding-left: 10%;}
}
@media (max-width:860px){

    .main-intro h2{padding-left: 3%;}
    .main-intro{padding: 150rem 0;}
    .main-intro::before{width: 100%; height: 400rem;}
}
@media (max-width: 540px){

    .main-intro h2{padding-left: 0;}
    .main-intro{padding: 60rem 0 130rem;}
    .main-intro::before{height: 220rem;}
    .main-intro .comm-introTitle{margin-bottom: 32rem;}
}

.main-proudct .comm-introTitle{display: block; padding-right: 35rem;}
.main-proudct .comm-introTitle em{display: block; text-align: right;}
.main-product__item {padding: 80rem 0; border-bottom: 1px solid var(--br-01); margin: 0 35rem; position: sticky; top: 0; background-color: var(--w);}
.main-product__item > .wrap{display: flex; align-items: center; gap: 187rem;}
.main-product__item figure{background-color: var(--bg-01); border-radius: var(--br-radius50) 0 var(--br-radius50) 0; overflow: hidden;/*  min-width: min(829rem, 100vw);  */aspect-ratio: 829 / 536; }
.main-product__item figure img{width: 100%; height: 100%; object-fit: cover;}
.main-product__item h3{color: var(--b-01); margin-bottom: 18rem;}
.main-product__item .btn-wrap{margin-top: 86rem;}
.main-product__conts{width: 51.4%;}


@media (max-width:1600px){
    .main-product__item > .wrap{margin: 0; gap: 144rem;}
    .main-product__item{margin: 0;} 
}
@media (max-width:1480px){
    .main-product__item > .wrap{gap: 120rem;}
}
@media all and (max-width:1200px){
    .main-product__conts{width: 80%;}
}
@media all and (max-width:1023px){
    .main-product__conts{width: 100%;}
    .main-product__item figure{width: 100%; }
	.main-product__item > .wrap{flex-direction: column; gap: 54rem;}
    .main-product__item .btn-wrap{margin-top: 56rem;}   
    .main-proudct .comm-introTitle{padding-right: var(--margin);}
}
@media (max-width:860px){

}
@media (max-width: 540px){
    .main-product__item{padding: 48rem 0;}
    .main-product__item h3{margin-bottom: 12rem;}
    .main-product__item .btn-wrap{margin-top: 56rem;}
    .main-product__item > .wrap{gap: 24rem;}
}

.main-center{padding:clamp(60rem,6vw,120rem) 0 clamp(120rem,11vw,220rem);}
.main-center__wrap{display:flex; align-items:stretch;}
.main-center__wrap .btn-wrap{margin-top:clamp(40rem,4vw,80rem);}
.main-center__img{border-radius:var(--br-radius80) 0 0 0;overflow:hidden;   flex:1 1 auto; min-width:0;   }
.main-center__img img{width:100%;height:100%;object-fit:cover;}
.main-cetner__text{flex:0 0 clamp(420rem,53vw,907rem);  display:flex;flex-direction:column;justify-content:center;background-color:var(--c-01);padding:clamp(40rem,4vw,80rem);border-radius:0 0 var(--br-radius80) 0; min-height:clamp(360rem,45vw,832rem);}
.main-cetner__text *{color:var(--w);}
.main-cetner__text h3{margin-bottom:30rem;}

@media all and (max-width:1023px){
	/*화면 768에 맞춰놓고 작업*/
}
@media (max-width:860px){
    .main-center__wrap{flex-direction: column;}
    .main-center__img{height: 420rem;}
    .main-cetner__text{min-height: auto;}
    
}
@media (max-width: 540px){

        .main-center{padding: 54rem 0 80rem;}
        .main-center__img{height: 280rem;}
        .main-cetner__text{padding: 30rem 24rem; min-height: auto; flex: none;}
        .main-cetner__text * br{display: none;}
        .main-cetner__text h3{margin-bottom: 15rem;}
        .main-center__wrap .btn-wrap{margin-top: 50rem;}
        .main-application h2{margin-top: 32rem;}
}

.main-application h2{margin-top: 52rem;}
.main-application__wrap{background: var(--c-03); padding-top: 140rem; overflow: hidden; margin-top: 266rem;}
.main-application__slide ul{display: flex; gap: 42rem;}
.main-application__slide ul + ul{margin-top: 42rem;}
.main-application__slide li{border-radius:var(--br-radius) 0 var(--br-radius) 0;  flex:0 0 40%;  aspect-ratio: 684 / 380; position: relative; overflow: hidden; }
.main-application__slide li img{width: 100%; height: 100%; object-fit: cover;}

@media (min-width:2000px){

}
@media (max-width:1600px){

}
@media (max-width:1480px){

   
}
@media all and (max-width:1200px){
	/*화면 1024에 맞춰놓고 작업*/
}
@media all and (max-width:1023px){
	.main-application__wrap{margin-top: 200rem;}
}
@media (max-width:860px){

     .main-application__slide ul{gap: 22rem;}
}
@media (max-width: 540px){

    .main-application__wrap{padding-top: 84rem;}
    .main-application__slide ul + ul{margin-top: 20rem;}
    .main-application__slide li{border-radius: 15rem 0 15rem 0;}
    .main-application__wrap{margin-top: 140rem;}
    .main-application h2{margin-top: 32rem;}
    .main-application__slide ul{gap: 8rem;}
}