@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{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 h2, #main h3{text-transform: uppercase;}
#main h3, #main h3 *{text-align: center; color: var(--b-01);}
#main .btn-wrap{margin-top: 60rem;}
#main .btn-wrap[data-flex]{display: flex !important}

/* main visual */
.main-visual__conts{height:864rem;}
.main-visual-container,
.main-visual-wrapper,
.main-visual .swiper-slide{height:100% !important; border-radius: var(--br-03);} 
.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__controls{position:absolute;bottom: 60rem;left:0;z-index:999;width:100%;justify-content: flex-start;padding-left: 103rem;}
.main-visual__controls > div{display:flex;align-items:center;justify-content: center;}
.main-visual__controls .btn-round{left: 227rem; display: flex !important; opacity: 1 !important; visibility: visible !important;}
.main-visual__count{display:flex;align-items:center;/* margin:0 50rem; */font-size:17rem;color:#fff;gap: 30rem;}
.main-visual__count i{display:flex; font-weight: 900; align-items:center; position:relative; font-size: 15rem;}
.main-visual__count em{font-size: 15rem; font-weight: 900;}

.main-visual .swiper-pagination{display:flex; gap:18rem;}
.main-visual .swiper-pagination-bullet{background: var(--f-01);}
.main-visual .swiper-pagination-bullet{opacity:0.4; width:14rem; height:14rem; background:#fff;}
.main-visual .swiper-pagination-bullet-active{opacity:1;}

.main-visual__text{position:absolute; bottom: 173rem; width:100%; left: 103rem;  color:#fff;}
.main-visual__text h2{overflow:hidden;line-height:1.1;font-size:91rem;letter-spacing:-0.5rem;opacity: 0;}
.main-visual__text h2 span{font-weight:700;}
[lang="en-US"] .main-visual__text h2 span{font-weight:800;}
.main-visual__text p{opacity: 0; margin-bottom: 33rem;}
.main-visual__text p span{font-size:20rem;  letter-spacing: 13rem; text-transform: uppercase; color: var(--f-01);}

.main-visual__bar{position:absolute; bottom:0; z-index:50; width:100%; height:10rem; background:rgba(255,255,255,0.3);}
.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; }

.main-visual__play{position:absolute; top:50%; left:0; z-index:99999; background:#fff; font-size:30rem; cursor:pointer;}
.main-visual__play:not(.on){opacity:0; visibility:hidden;}
.main-visual__play.on{opacity:1; visibility:visible;}

.main-visual__qna{display: block; position: absolute; z-index: 10; right: 45rem; bottom: 38rem; width: 370rem; padding: 35rem 25rem 25rem; border-radius: var(--br-02); background: rgba(255, 255, 255, 0.29);box-shadow: 20rem 27rem 24rem 0rem rgba(0, 0, 0, 0.05); backdrop-filter: blur(12rem);}
.main-visual__qna em{font-size: 13rem;display: block; margin-bottom: 14rem; font-weight: 700; color: #fff; letter-spacing: 2rem;}
.main-visual__qna strong{font-size: 23rem; margin-bottom: 21rem; display: block; font-weight: 800; line-height: 31rem; color: #fff;}
.main-visual__qna figure{border-radius: 20rem; overflow: hidden; width: 100%; height:244rem; display:flex; align-items: center; justify-content: center;}
.main-visual__qna img{max-width: 100%; max-height: 100%;}
.main-visual__qna .btn-round{position: absolute; top: 22rem; right: 21rem; }

.main-visual .btn-round{transition:all .3s ease; transform:scale(1);}
.main-visual .btn-round:hover{transform:scale(1.1);}

@media (hover: hover) and (pointer: fine){
    .main-visual__qna:hover .btn-round{opacity: 1; visibility: visible;}
}

@media (max-width:1600px){
    .main-visual__text h2{font-size: 80rem;}
    .main-visual__text{left: 70rem;}
    /* .main-visual__controls{left: 70rem;} */
    .main-visual__count{gap: 22rem;}
    .main-visual__controls .btn-round{left: 207rem;}
    .main-visual__text p{margin-bottom: 24rem;}
    .main-visual__text p span{font-size: 18rem;}
    .main-visual__qna strong{font-size: 22rem;}
}

@media (max-width:1480px){

}

@media all and (max-width:1200px){
	/*화면 1024에 맞춰놓고 작업*/
}

@media all and (max-width:1023px){
	.main-visual__qna{display:none;}
    .main-visual__text{left:50rem}
    .main-visual__text h2{font-size: 60rem; line-height: 1.3;}
    .main-visual__text p span{font-size: 15rem; letter-spacing: 10rem;}
    .main-visual__conts{height: 684rem;}
    .main-visual__controls{padding-left: 0; left: 50rem;}
    .main-visual__controls .btn-round{left: 116rem;}
}

@media (max-width:860px){

    .main-visual__conts{height: 564rem;}
    .main-visual__text{bottom: 140rem;}
    .main-visual__text h2{font-size: 45rem; letter-spacing: .8rem;}
    .main-visual__text p{margin-bottom: 20rem;}
    .main-visual__text p span{font-size: 14rem; letter-spacing: 8rem;}
    .main-visual__count{gap: 12rem;}
    .main-visual__controls .btn-round{left: 86rem;}

}

@media (max-width: 540px){
    .main-visual__text{width: 100%; left: 0; padding-left: 28rem;}
    .main-visual__text h2{font-size: 34rem;}
    .main-visual__text p{margin-bottom: 16rem; }
    .main-visual__text p span{letter-spacing: 5rem; font-size: 13rem;}
    .main-visual__conts{height: 74vh;}
    .main-visual__controls .btn-round{display: none !important;}
    .main-visual__count i,.main-visual__count em{font-size: 13rem;}
    .main-visual__controls{left: 0; padding-left: 34rem; bottom: 20rem;}
    .main-visual__text{bottom: 40%;}    
}

.main-best{margin-top: 110rem;}
.main-best .cmn-box figure{/* height: 444rem; */ aspect-ratio: 1 / .788 auto }
.main-best h3 + *{margin-top: 57rem;}
.main-best__list{gap: 16rem;}

@media (max-width:1600px){
    .main-best h3 + * {margin-top: 47rem;}
}

@media (max-width:1480px){

}

@media all and (max-width:1200px){
	/*화면 1024에 맞춰놓고 작업*/
}

@media all and (max-width:1023px){
	.main-best{margin-top: 90rem;}
}

@media (max-width:860px){
    .main-best{margin-top: 68rem;}
    .main-best h3 + *,.main-reviews .gallery-list{margin-top: 32rem;}
}

@media (max-width: 540px){
    .main-best{margin-top: 54rem;}
    .main-best h3 + *,.main-reviews .gallery-list{margin-top: 24rem;}
    .main-best__list{gap: 10rem;}
}

.main-product__title{padding: 0 30rem;position: absolute;left: 50%;transform: translateX(-50%);z-index: 0;top: -146px;}
.main-product__title em{position: absolute;color: var(--b-01);font-size: 16rem;left: 0;font-weight: 700;top: 20rem;left: 28rem;} 
.main-product__title strong{font-size: 362rem;font-weight: 400;color: var(--b-01);font-family: var(--lang-en);text-align: center;display: block;line-height: 1.2;}

.main-product__aquon{padding-top: 318rem;padding-bottom: 190rem;}
.main-product__aquon figure{margin: 0 auto; width: 483rem; position: relative; z-index: 2;}
.main-product__aquon figure img{width: 100%; opacity: 0;}
.main-product__aquon .link-blur{position: absolute;transition-duration: .4s;width: 374rem;left: calc(50% - 420rem);top: 291rem;z-index: 3;}

.main-product__text{position: absolute;left: calc(50% + 120rem);bottom: 90rem;min-width: 542rem;}
.main-product__text .mob{display: none;}

.main-product__conts{ padding-bottom: 109rem; position: relative; z-index: 1; border-radius: 80rem 80rem 0 0; padding-top: 132rem; /* position: relative; z-index: 3;  */background-color: var(--f-01); box-shadow: 0px -16px 40px 0px rgba(0, 0, 0, 0.07);}
.main-product__conts h3 + *{margin-top: 55rem;}

.main-product__conts .tabs{justify-content: center; gap: 7rem;}
.main-product__conts .tabs li{display: flex;font-family: var(--font-15);align-items: center;justify-content: center;height: 38rem;padding:0 26rem;border-radius: 90rem;font-size: 15rem;font-weight: 300;border:1px solid #dadada;}
.main-product__conts .tabs li.active{border-color: var(--b-01);color: var(--b-01);font-weight: 500;}
.main-product__list{margin-top: 53rem; gap: 17rem 18rem; }

@media (max-width:1600px){
    .main-product__conts{padding-top: 82rem;}
    .main-product__conts h3 + *{margin-top: 44rem;}
}
@media (max-width:1480px){
    .main-product__text {min-width: auto;}
    .main-product__text p{word-break: keep-all;}
    .main-product__text p br{display: none;}
    .main-product__title strong{font-size:322rem;}
}
@media all and (max-width:1200px){
	.main-product__title strong{font-size: 262rem;}
    .main-product__aquon figure{width: 420rem;}

    .main-product__aquon .link-blur{width: 330rem;}
    .main-product__aquon .link-blur{top: 191rem;}
    /* .main-product__text{left: calc(50% + 200rem);} */
   
}
@media all and (max-width:1023px){
	.main-product__list{gap: 14rem;}
    .main-product__conts{padding-bottom: 90rem;}

    .main-product__title strong{font-size: 196rem;}
    .main-product__title{top: -116rem;}
    .main-product__aquon{padding-top: 200rem; padding-bottom: 100rem;}
    .main-product__aquon .link-blur{left: calc(50% - 380rem); width: 290rem; }
    .main-product__aquon .link-blur .btn-basic{width: 100%; text-align: center; justify-content: center;}
    .main-product__aquon .link-blur .btn-round{display: none;}
    .main-product__aquon figure{width: 360rem;} 
    .main-product__text{left: calc(50% + 150rem);}


    .main-product__aquon figure img{display: none;}

}
@media (max-width:860px){    
    .main-product__list{grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 34rem;}
    .main-product__conts h3 + * {margin-top: 32rem;}
    .main-product__conts{padding-bottom: 80rem;}

    .main-product__title{top: -86rem;}
    .main-product__title em{top: -20rem;}
    .main-product__title strong{font-size: 176rem;}
    .main-product__aquon figure{width: 290rem;}
    .main-product__text{position: relative; padding-top: 180rem; left: 0; bottom: 0; width: 60%; margin: 0 auto; text-align: center;}
    .main-product__aquon .link-blur{display: none;}


    .main-product__aquon{padding-bottom: 160rem;}

    .main-product__text .mob{display: block;}
    .main-product__text span{display: block; margin-bottom: 20rem;}
    .main-product__text em{margin-bottom: 32rem; display: block;}

   .main-product__text .btn-wrap{margin-top: 32rem;}
}
@media (max-width: 540px){
    .main-product__conts{border-radius: 40rem 40rem 0 0; padding-top: 60rem;}
    .main-product__conts h3 + *{margin-top: 20rem;}
    .main-product__conts{padding-bottom: 54rem;}
    .main-product__list{gap: 8rem;}
    .main-product__conts .tabs{gap: 4rem;}
    .main-product__conts .tabs li{height: 25rem; font-size: 12rem; padding: 0 10rem; }

    .main-product__list .cmn-box em{width: calc(100% - 30rem); white-space: pre-wrap; }

    .main-product__aquon{padding-top: 130rem;padding-bottom: 130rem;}
    .main-product__aquon figure {width: 170rem;}
    .main-product__title em{font-size: 12rem;}
    .main-product__title strong{font-size: 86rem;}
    .main-product__title{top: -43rem;}
    .main-product__text{width: 100%; padding-top: 114rem;}
    .main-product__text em{margin-bottom: 12rem;}    
}
.main-banner{/* margin-top: 109rem; */ position: relative;overflow: hidden;padding-bottom: 25.728%;}
.main-banner video{position: absolute;width: 100%;top: -29%;}
.main-banner .wrap{height: 100%; position: absolute; left: 0; width: 100%;}
.main-banner .main-banner__tit{position: absolute; left: 0; bottom:70rem ; z-index: 1;}
.main-banner .main-banner__tit *{color: var(--f-01) !important; text-align: left !important;}
.main-banner .main-banner__tit span{margin-bottom: 37rem; display: block;}

@media (max-width:1600px){

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

}
@media all and (max-width:1200px){
	.main-banner{padding-bottom: 36.7%;}
}
@media all and (max-width:1023px){
	.main-banner{padding-bottom: 46.7%;}
    .main-banner video{top: -7%;}
    .main-banner .main-banner__tit span{margin-bottom: 27rem;}
}
@media (max-width:860px){
    .main-banner{padding-bottom: 50%;}
}
@media (max-width: 540px){
    .main-banner{padding-bottom: 100%;}
    .main-banner video{width: 200%; top: 0;}
    .main-banner .main-banner__tit{bottom: 50rem;}
    .main-banner .main-banner__tit span{margin-bottom: 20rem;}
}
.main-reviews{padding-top: 115rem;}
.main-reviews .btn-wrap{margin-top: 60rem;}
.main-reviews .gallery-list{margin-top: 57rem;}
.main-reviews__link{ background-color: var(--bg-01); padding: 45rem 18rem 44rem; position: relative;/*  min-height: 579rem; */ /* aspect-ratio: 1 / 1.301; */}
.main-reviews__link .point-title{display: block; margin-bottom: 24rem;}
.main-reviews__link figure{ width: 100%; background-color: #fff; aspect-ratio: 1 / .922 auto}
.main-reviews__link .gallery-list__title{margin-top: 24rem;}
.main-reviews .gallery-list{gap: 17rem;}
.main-reviews .reveiw-stars{right: 20rem; top: 44rem; position: absolute;}
.gallery-list__title strong{overflow: hidden; text-overflow: ellipsis; display: -webkit-box;   -webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: keep-all;   width: 100%;}

@media (max-width:1600px){

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

}
@media all and (max-width:1200px){
	/*화면 1024에 맞춰놓고 작업*/
}
@media all and (max-width:1023px){
    .main-reviews{padding-top: 90rem;}
	.main-reviews .gallery-list{grid-template-columns: 1fr 1fr 1fr 1fr;}
    .main-reviews__link .point-title{margin-bottom: 10rem;}
    .main-reviews__link{padding: 24rem 14rem;}
    .main-reviews .reveiw-stars{top: 24rem;}
    .main-reviews .gallery-list{gap: 12rem; margin-top: 44rem;}
    
    #main .btn-wrap{margin-top: 50rem;}
}
@media (max-width:860px){
    .main-reviews{padding-top: 80rem;}
    .main-reviews .gallery-list{grid-template-columns: 1fr 1fr; gap: 16rem;}

    #main .btn-wrap{margin-top: 42rem;}
    
}
@media (max-width: 540px){
    #main{overflow: hidden ;}
    .main-reviews {padding-top: 54rem;}
    .main-reviews .reveiw-stars{top: 22rem;}
    .main-reviews .gallery-list{margin-top: 24rem; gap: 8rem;}
    .main-reviews .gallery-list{grid-template-columns: 1fr;}
    .main-reviews__link figure{aspect-ratio:1 /.6 auto}
    .main-reviews__link{padding: 20rem 14rem 14rem;}

    #main .btn-wrap{margin-top: 32rem;}
}