@charset "utf-8";

/* 
 * main CSS Document
 * KOWEB
 */

/* visual */
.main-visual{height:100%;}
.main-visual__container,
.main-visual__wrapper,
.main-visual__item{height:100% !important;}
.main-visual__item .main-visual__bg i em{display:block; position:absolute;background-position:50% 50%;transition:all 1s ease;transform:scale(1);inset:0;background-repeat:no-repeat;background-size: cover;}
.main-visual__item.item-01 .main-visual__bg{display:block; width: 100%; height:100%; position: absolute; left: 0; top: 0;}
.main-visual__item.item-01 .main-visual__bg i{width: 100%; height:100%; position: absolute; left: 0; top: 0; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;}
.main-visual__item.item-01 .main-visual__bg i::before{background-image:url(/images/main/visual-01.jpg);}
.main-visual__item.item-02 .main-visual__bg i::before{background-image:url(/images/main/visual-02.jpg);}
.main-visual__item.item-03 .main-visual__bg i::before{background-image:url(/images/main/visual-03.jpg);}
.main-visual__controls{position:absolute; bottom:75rem; left:0; z-index:999; width:100%;}
.main-visual__controls > div{display:flex; align-items:center;}
.main-visual__btn{position:relative;width: 75rem;height: 75rem;cursor:pointer;box-sizing: border-box;border: 4px solid #fff;transition: var(--animation-lazy);opacity: 1;}
.main-visual__btn::after{content:""; display:block; width:100%; height:100%; background:url(/images/common/arrow-basic_w.svg) no-repeat 50% 50%; background-size:9rem;}
.main-visual__btn.button-prev{margin-right:10rem;}
.main-visual__btn:hover{opacity:0.5;}
.main-visual__btn.button-prev::after{transform:rotate(180deg);}
.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 i::after{content:""; display:block; width:3rem; height:3rem; margin:0 10rem; background:#fff;}
.main-visual .wrap{position:relative; width:100%;}
.main-visual__img{position:absolute; opacity:0; right:70rem; bottom:115rem; transition:all 1s ease; transform:translateX(100rem);}
.main-visual__img img{height:447rem;}
.main-visual .swiper-slide-active .main-visual__img{opacity:1; transform:translateX(0rem); transition-delay:0.4s;}
.motion-on .main-visual__img img{opacity:1; transform:translateX(0rem); transition-delay:0.2s;}
.main-visual__img img{opacity:0; transition:all 1.5s ease; transform:translateX(100rem);}

/* main proeuct */
.main-product{display:flex; height:100%;}
.main-product > *{box-sizing:border-box; flex:50%;}
.main-product__item img{display:block; width:100%; height:100%; transition:var(--animation-basic); object-fit:cover;}
.main-product__wrapper,
.main-product__item{height:100% !important;}
.main-product__text{display:flex; justify-content:center; opacity:0; padding:0rem 120rem; text-align:right; transition:all 1.5s ease; transform:translateX(-70rem); flex-direction:column; align-content:flex-end; will-change:transform;}
.main-product__text h2{margin-right:-4rem;font-family:var(--lang-point);font-weight:400;font-size: 80rem;}
.main-product__text em{font-weight:200; font-size:30rem;}
.main-product__text a{margin-top:210rem; font-weight:600; font-size:20rem; color:#000; transition:var(--animation-basic);}
.main-product__text a:hover{color:var(--color-point);}
.main-product__text:has(a:hover) + .main-product__container .main-product__item img{transform:scale(1.1);}
.main-product .swiper-pagination{bottom:30rem;}
.main-product .swiper-pagination-bullet{width:17rem; height:17rem; margin:0 8rem !important; background:none; border:4rem solid #fff;}
.main-product .swiper-pagination-bullet-active{border-color:var(--color-point);}

:is(#section2,
#section4) .main-product{display:flex; flex-direction:row-reverse;}
:is(#section2,
#section4) .main-product .main-product__text{text-align:left;}
:is(#section2,
#section4) .main-product__text h2{margin-right:0; margin-left:-4rem;}
:is(.fp-viewing-3Page,
.fp-viewing-4) #header nav .gnb > li:not(.btn-contact) > a{color:#000;}
.section.active .main-product__text,
.section.active .main-product__container{opacity:1; transform:translateX(0rem) !important; transition-delay:0.4s;}
:is(#section2,
#section4) .main-product__text{transform:translateX(70rem);}
.main-product__container{opacity:0; transition:all 1.5s ease; transform:translateX(100rem);}
:is(#section2,
#section4) .main-product__container{transform:translateX(-100rem);}

@media (max-width:860px){
	.main-visual{height:100vh;}
	.main-product{height:auto; flex-direction:column;}
	.main-product__text h2{font-size:75rem;}
	.main-visual__btn{width:65rem; height:65rem; border-width:3px;}
	.main-visual__btn::after{background-size:9rem;}
	.main-visual__img img{height:237rem;}
	.main-visual__img{right:-10rem; bottom:245rem;}
	.main-product__container{height:290rem !important;}
	.main-product__wrapper,
	.main-product__item{height:100% !important;}
	.swiper-slide{width:100% !important; height:100%;}
	.main-product__text{padding:80rem 40rem 30rem; text-align:center;}
	.main-product__text a{margin-top:50rem; font-size:20rem;}

    .section .main-product__text,
	.section .main-product__container{opacity:1 !important; transform:translateX(0rem) !important; transition-delay:0.2s; transition-duration:1s;}
	.main-product__text h2{font-size:55rem;}
	.main-product__text em{font-size:26rem;}
	
    :is(#section2,
	#section4) .main-product{display:flex; align-items:center; flex-direction:column;}
	:is(#section2,
	#section4) .main-product .main-product__text{text-align:center;}    
}

@media (max-width: 540px){
	.main-visual__img img{height:145rem;}
	.main-visual__btn::after{background-size:7rem;}
	.main-visual__btn.button-prev{margin-right:5rem;}
	.main-visual__btn{width:60rem; height:60rem; border-width:2px;}
	.main-visual__controls{bottom:45rem;}
	.main-visual__img{bottom:185rem;}
	.main-product__text h2{font-size:38rem;}
	.main-product__text em{font-size:21rem;}
	.main-product .swiper-pagination-bullet{width:15rem; height:15rem; margin:0 6rem !important; border-width:3px;}
	.main-product__text a{margin-top:31rem; font-size:18rem;}
	.main-product .swiper-pagination{bottom:20rem;}
}