@import url('68a2cf65ba_common.css');


.text_box{padding: 25px 0 0 100px; box-sizing:border-box; max-width:720px;}
.text_box p ~ p{padding-top: 12px;}
.text_box .btn_area{padding: 50px 0 0;}


@keyframes opacity {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* VISUAL */
#visual{position: relative; width: 100%; min-height:100vh; height: var(--vh); background:var(--black); overflow: hidden;}
#visual .visual_swiper{position: relative; width: 100%; height: 100%;}
#visual .visual_swiper .swiper-slide{position: relative; width: 100%; height: 100%; overflow: hidden;}
#visual .visual_swiper .swiper-slide::after{content:''; display: block; width: 100%; height:50%; opacity: 0.3; background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.00) 100%); position: absolute; left:0; bottom: 0;}
#visual .visual_swiper .swiper-slide .v_txt{position: absolute; left:50%; bottom: 100px; transform:translateX(-50%); z-index: 9999;}
#visual .visual_swiper .swiper-slide .v_txt ul{}
#visual .visual_swiper .swiper-slide .v_txt ul li{display: flex; justify-content:space-between;}
#visual .visual_swiper .swiper-slide .v_txt ul li ~ li{margin-top: 15px;}
#visual .visual_swiper .swiper-slide .v_txt ul li h2{color:var(--white); overflow: hidden;}
#visual .visual_swiper .swiper-slide .v_txt ul li h2 span{display: inline-block; letter-spacing:inherit; line-height:inherit;}


#visual .visual_swiper .swiper-slide .v_txt ul li h2 span{transform:translateY(100%); transition:transform 0.6s .3s ease;}
#visual .visual_swiper .swiper-slide .v_txt ul li:nth-child(2) h2 span{transition-delay:.6s;}
#visual .visual_swiper .swiper-slide.swiper-slide-active .v_txt ul li h2 span{transform:translateY(0);}


#visual .visual_swiper .swiper-slide .v_bg{position: absolute; left:0; top:0; width: 100%; height: 100%;}
#visual .visual_swiper .swiper-slide .v_bg::after{content:''; display: block; width: 100%; height: 100%; background: var(--bk000); opacity: 0.3; position: absolute; left: 0; top:0;}
#visual .visual_swiper .swiper-slide .v_bg .bg{position: absolute; left:0; top:0; width: 100%; height: 100%; background-repeat:no-repeat; background-position:center; background-size:cover; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out;}
#visual .visual_swiper .swiper-slide.swiper-slide-active .v_bg .bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}

#visual .slide-move{display: flex; align-items:center; gap:0 30px; position: absolute; left:50%; bottom: 390px; transform:translateX(-50%); z-index: 9999; max-width:1530px; width: 90%; margin: 0 auto; opacity: 0; animation:opacity 1s .6s linear forwards;}
#visual .visual_pagination{display: flex; gap:0 20px;}
#visual .visual_pagination .swiper-pagination-bullet{display: block; width: 10px; height: 10px; border-radius:50%; background:var(--white); opacity: 0.5; transition:all .3s linear;}
#visual .visual_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity: 1;}

#visual #timer{display: block; width: 52px; height: 52px; position: relative; cursor:pointer;}
#visual #timer svg{width: 100%; height: 100%;}
#visual .v-btn{position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); width: 100%; height:100%; cursor:pointer; background:none; border:0; text-align:center; padding: 0; box-sizing:border-box;} 
#visual .icon{width: 100%; height:100%; cursor:pointer; display: block;}
#visual .icon::after{display: block; width: 100%; height: 100%; line-height:52px; font-size:24px; color:var(--white); font-family:var(--icon); text-align:center; position: absolute; left:0; top:0; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48;}
#visual .pause::after{content:'\e034';}
#visual .play::after{content:'\e037';}
#visual .off {display: none;}

#visual .scroll_down{position: absolute; right:3%; top:50%; transform:translateY(-50%); width: 4px; height:100px; border-radius:4px; background:rgba(255,255,255,.2); display: block; overflow: hidden; z-index: 9999; font-size:0;}
#visual .scroll_down::after{content:''; display:block; width:100%; height:100%; border-radius:4px; background:var(--white); position: absolute; left:0; top:0; animation: elasticus 2s ease infinite;}



@-webkit-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-moz-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-o-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}



/* Company */
#company{overflow: hidden;}
#company .company_in{display: flex; justify-content:space-between;}
#company .company_in > div{box-sizing:border-box; width: calc(50% - 15px); position: relative;}
#company .company_in .txt_area{display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
#company .company_in .img_area{display: flex;  flex-direction: column; justify-content: center;}
#company .company_in .img_area .in{padding: 0 0 70px; position: relative;}
#company .company_in .img_area .video{max-width:520px; width: 100%; aspect-ratio:3/1.7; overflow: hidden; position: absolute; left: 0; bottom: 0; z-index: 3;}
#company .company_in .img_area .video .jarallax{position: relative; width: 100%; height: 100%;}
#company .company_in .img_area .video .jarallax iframe{position: absolute;}
#company .company_in .img_area .ci{max-width:541px; width: 100%; position: absolute; left: -137px; top:-91px; z-index: 1;}
#company .company_in .img_area .ci img{width: 100%; height: auto;}
#company .company_in .img_area .img{max-width:520px; width: 100%; margin-left: auto; position: relative; z-index: 2;}
#company .company_in .img_area .img img{width: 100%; height: auto;}



/* Production */
#production{padding: 0 0 110px; position: relative;	overflow: hidden;}
#production .bg{display: block; width: 0; height: 55%; background:var(--main); position: absolute; left:0; bottom: 0; z-index: -1; transition:width 0.6s ease;}
#production .aos-animate + .bg{width: calc(50% - 15px);}
#production .production_in{display: flex; justify-content:space-between;}
#production .production_in > div{box-sizing:border-box; width: calc(50% - 15px);}
#production .production_in .img_area{padding: 0 100px 0 0; display: flex; flex-direction: column; justify-content: center;}
#production .production_in .img_area img{width: 100%; height: auto;}
#production .production_in .img_area img.mo{display: none;}
#production .production_in .txt_area{padding: 100px 0 0;}



/* Hotel Amenities */
#hotel{position: relative; overflow: hidden;}
#hotel .bg{position: absolute; left:0; top:0; width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center; z-index: -1; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out;}
#hotel .aos-animate + .bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
#hotel h3{color:var(--white);}
#hotel p{color:var(--basic-w);}


/* Product */
#product{overflow: hidden;}
#product .tit_area{padding: 0 0 40px; display: flex; align-items: flex-end; justify-content: space-between;}
#product .swiper-button{display: flex; gap:2px; align-items:center;}
#product .swiper-button .swiper-btn{width: 66px; aspect-ratio:1/1; border-radius:50%; box-sizing:border-box; border:1px solid var(--border); text-align:center; font-size:0; transition:all .3s linear; cursor:pointer; position: relative; color:var(--black);}
#product .swiper-button .swiper-btn.swiper-button-disabled::after{opacity: 0.3;}
#product .swiper-button .swiper-btn::after{display: block; width: 100%; height: 100%; line-height: 66px; font-size:31px; font-family:var(--icon);	position: absolute; left: 0; top:0; color:inherit; font-weight: 400; text-align:center;}
#product .swiper-button .product-button-prev::after{content:'\ef7d';}
#product .swiper-button .product-button-next::after{content:'\e941';}
#product .product_swiper{}
#product .product_swiper .swiper-slide{}
#product .product_swiper .swiper-slide a{display: block; position: relative;}
#product .product_swiper .swiper-slide a::after{content:''; display: block; width: 100%; height: 0; position: absolute; left:0; bottom: 0; transition:all .3s linear; background: linear-gradient(0deg, var(--main) 0%,  rgba(137,190,68, 0.5) 50%, rgba(137,190,68, 0.00) 100%); opacity: 0.7;}
#product .product_swiper .swiper-slide a:hover::after{height: 100%;}
#product .product_swiper .swiper-slide a .thumb{overflow: hidden; aspect-ratio:1/1.23;}
#product .product_swiper .swiper-slide a .thumb img{display: block; width: 100%; height: 100%; object-fit:cover; transition:all .3s linear;}
#product .product_swiper .swiper-slide a:hover .thumb img{transform:scale(1.1);}
#product .product_swiper .swiper-slide a .desc{padding: 45px 100px 45px 45px; width: 100%; position: absolute; left:0; bottom: 0; z-index: 9; box-sizing:border-box;}
#product .product_swiper .swiper-slide a .desc h4{font-weight: 600; color:var(--white);}
#product .product_swiper .swiper-slide a .desc .btn{display: block; width: 38px; aspect-ratio:1/1; border-radius:50%; box-sizing:border-box; border:1px solid rgba(255,255,255,.2); text-align:center; font-size:0; transition:all .3s linear; cursor:pointer; position: absolute; right: 45px; top:50%; margin-top: -19px; color:var(--white);}
#product .product_swiper .swiper-slide a .desc .btn::after{content:'\e5c8'; display: block; width: 100%; height: 100%; line-height: 38px; font-size:17px; font-family:var(--icon); position: absolute; left: 0; top:0; color:inherit; font-weight: 400; text-align:center;}



/* Online Consulting */
#online{position: relative; overflow: hidden;}
#online .bg{position: absolute; left:0; top:0; width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center; z-index: -1; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out;}
#online .aos-animate + .bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
#online .online_in{display: flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;}
#online .online_in h3{color:var(--white);}
#online .online_in .btn_area{}


/*******************************************************************************
    @media 1680px
*******************************************************************************/
@media all and (max-width:1680px){


/* VISUAL */
#visual{}
#visual .visual_swiper .swiper-slide .v_txt h2{font-size:80px;}

/* Company */
#company{}
#company .company_in{}
#company .company_in .img_area{}
#company .company_in .img_area .in{padding: 0 0 4vw;}
#company .company_in .img_area .video{width: 30vw;}
#company .company_in .img_area .ci{width: 32vw; left: -8vw; top:-5vw;}
#company .company_in .img_area .img{width: 30vw;}


}


/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){

/* VISUAL */
#visual{}
#visual .visual_swiper .swiper-slide .v_txt h2{font-size:70px;}



}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){



/* VISUAL */
#visual{}
#visual .visual_swiper .swiper-slide .v_txt{bottom: 80px;}
#visual .visual_swiper .swiper-slide .v_txt h2{font-size:52px;}
#visual .slide-move{bottom: 280px;}


/* Production */
#production .production_in .img_area{padding: 0 50px 0 0;}
#production .production_in .txt_area{padding: 50px 0 0;}



}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


.text_box{padding: 15px 0 0 50px;}
.text_box p ~ p{padding-top: 8px;}
.text_box .btn_area{padding: 30px 0 0;}



/* VISUAL */
#visual{}
#visual .visual_swiper .swiper-slide .v_txt{bottom: 60px;}
#visual .visual_swiper .swiper-slide .v_txt h2{font-size:38px;}
#visual .slide-move{bottom: 200px;}

/* Company */
#company{}
#company .company_in{flex-wrap:wrap; flex-direction: column-reverse; gap:30px;}
#company .company_in > div{width: 100%;}
#company .company_in .txt_area{text-align:center; align-items: center;}
#company .company_in .txt_area .text_box{max-width:100%; padding: 15px 0 0;}
#company .company_in .txt_area .btn_area{display: flex; justify-content: center;}
#company .company_in .img_area{margin: 0 auto ; max-width:600px;}
#company .company_in .img_area .in{padding: 0 0 50px;}
#company .company_in .img_area .video{width: 400px;}
#company .company_in .img_area .ci{width: 360px; top:-60px; left: 50px;}
#company .company_in .img_area .img{width: 250px;}




/* Production */
#production{padding: 0 0 70px;}
#production .production_in .img_area{padding: 0 30px 0 0;}
#production .production_in .txt_area{padding: 30px 0 0;}


/* Hotel Amenities */
#hotel .text_box{max-width:70%;}


/* Product */
#product .tit_area{padding: 0 0 30px;}
#product .swiper-button .swiper-btn{width: 50px;}
#product .swiper-button .swiper-btn::after{line-height: 50px; font-size:24px;}
#product .product_swiper{}
#product .product_swiper .swiper-slide{}
#product .product_swiper .swiper-slide a .desc{padding: 25px 80px 25px 25px;}
#product .product_swiper .swiper-slide a .desc .btn{right: 25px;}


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

.text_box{padding: 10px 0 0; max-width:100%;}
.text_box p ~ p{padding-top: 5px;}
.text_box .btn_area{padding: 20px 0 0; display: flex; justify-content: center;}



/* VISUAL */
#visual{}
#visual .visual_swiper .swiper-slide .v_txt{bottom: 100px;}
#visual .visual_swiper .swiper-slide .v_txt h2{font-size:30px;}
#visual .visual_swiper .swiper-slide .v_txt ul li{flex-wrap:wrap; gap:3px 15px; justify-content: center; text-align:center;}
#visual .slide-move{gap:0 20px; bottom: 20px;}
#visual .visual_pagination{gap:0 10px;}
#visual .visual_pagination .swiper-pagination-bullet{width: 7px; height: 7px;}
#visual #timer{width: 42px; height: 42px;}
#visual .icon::after{font-size:16px; line-height: 42px;}
#visual .scroll_down{width: 2px; height:60px;}


/* Company */
#company{}
#company .company_in{gap:20px;}
#company .company_in .txt_area{position: relative; z-index: 6;}
#company .company_in .txt_area .text_box{padding: 10px 0 0;}

#company .company_in .img_area{}
#company .company_in .img_area .in{padding: 0 0 25%;}
#company .company_in .img_area .video{width: 90%;}
#company .company_in .img_area .ci{width: 70%; left: 2%; top:-10%;}
#company .company_in .img_area .img{width: 50%;}


/* Production */
#production{padding: 70px 0;}
#production .bg{height: 35%; bottom: auto; top:0;}
#production .aos-animate + .bg{width: 100%;}
#production .production_in{flex-wrap:wrap;}
#production .production_in > div{width: 100%;}
#production .production_in .img_area{padding: 0;}
#production .production_in .img_area img.pc{display: none;}
#production .production_in .img_area img.mo{display: block;}
#production .production_in .txt_area{padding: 30px 0 0; text-align:center;}



/* Hotel Amenities */
#hotel{text-align:center;}
#hotel .text_box{max-width:100%;}



/* Product */
#product .tit_area{padding: 0 0 20px;}
#product .swiper-button .swiper-btn{width: 40px;}
#product .swiper-button .swiper-btn::after{line-height: 40px; font-size:20px;}
#product .product_swiper{}
#product .product_swiper .swiper-slide{}
#product .product_swiper .swiper-slide a .desc{padding: 20px 60px 20px 20px;}
#product .product_swiper .swiper-slide a .desc .btn{width: 30px; right: 15px; margin-top: -15px;}
#product .product_swiper .swiper-slide a .desc .btn::after{line-height: 30px; font-size:12px;}


/* Online Consulting */
#online{}
#online .online_in{flex-direction: column; gap:20px;}


}