@import url("common.css");


/* visual */
#visual{position: relative; background:var(--black); width: 100%; height: var(--vh); overflow: hidden;}
#visual .visual_in{position: relative; width: 100%; height: 100%;}
#visual .visual_in .roll{position: absolute; left:0; top:0; width: 100%; height: var(--vh);}
#visual .visual_in .roll .v_txt{text-align:center; position: absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index: 9999; margin-top: 80px;}
#visual .visual_in .roll .v_txt h2{font-size:5.375rem; font-weight: 400; font-family:var(--eng); line-height: 120%; letter-spacing: 0; color:var(--white); transition:all .6s 0.3s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_txt .fs32{color:var(--white); padding:25px 0 0; transition:all .6s 0.6s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_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_in .roll .v_bg.mo{display: none;}
#visual .visual_in .roll .v_bg:after{content:''; display: block; width: 100%; height:100%; position: absolute; left:0; top:0; background:rgba(0,0,0,.45);}
#visual .scroll_down{display: inline-block; font-size:0.875rem; font-weight:500; letter-spacing:0; line-height:120%; position:absolute; left:50%; bottom:50px; transform:translateX(-50%); z-index: 9999; color:var(--white);}
#visual .scroll_down span{display: block; margin:10px auto 0; width:20px; height:20px; overflow: hidden; position:relative;}
#visual .scroll_down span:after{content:''; display:block; position: absolute; left:0; top:0; width:100%; height:100%; background:url("../images/scroll_arrow.png") no-repeat center/auto 100%; transform:translateY(-30px); opacity: 0; animation:scroll_down 1.5s infinite;}

@keyframes scroll_down {
	0 { transform:translateY(-30px); opacity: 0;}
	50% { transform:translateY(0); opacity: 1;}
	100% { transform:translateY(30px); opacity: 0;}
}
@keyframes opacity {
	0 { opacity: 0;}
	100% { opacity: 1;}
}


#visual .slick-dots{position: absolute; left: 50%; top:46%; transform:translate(-50%,-50%); z-index: 9999; margin-top: -80px; opacity: 0; animation:opacity 1s 1s linear forwards;}
#visual .slick-dots li{cursor:pointer; display: inline-block; font-size:0; margin: 0 20px 0 0; width: 15px; height: 15px; transition:all .3s linear; border:3px solid transparent; border-radius:50%; box-sizing:border-box;}
#visual .slick-dots li:after{content:''; display:block; width:100%; height:100%; background:rgba(255,255,255,.6); border-radius:50%;}
#visual .slick-dots li.slick-active{border-color:var(--white);}
#visual .slick-dots li.slick-active:after{opacity: 0;}
#visual .slick-dots li:last-child{margin: 0;}
#visual .slick-dots li button{padding: 0; border:0; background:none; font-size:0;}



/* 효과 */
#visual .visual_in .roll.action .v_bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
#visual .visual_in .roll.action .v_txt h2{transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt .fs32{transform:translateY(0); opacity:1;}



/* About */
#about{overflow: hidden;}
#about .about_in{position: relative;}
#about .about_tit{position: absolute; z-index: 5;}
#about .about_tit .fs32{padding:18px 0 0;}
#about .about_tit1{text-align:left; left: 0; top:120px;}
#about .about_tit2{text-align:right; right: 0; bottom: 190px;}
#about .about_img{max-width:660px; margin:0 auto; position: relative;}
#about .about_img:after{content:''; display:block; width:415px; height:415px; background:url("../images/rota.png") no-repeat center/100% auto; position:absolute; right:-330px; top:-90px; animation:rota 15s linear infinite;}
#about .about_img img{max-width:100% !important; height:auto !important;}
#about .about_img ul{padding:15px 0 0; display:flex; flex-wrap:wrap;}
#about .about_img ul li{font-size:1rem; padding: 0 20px 6px 0; letter-spacing: -0.8px; line-height:160%; color:var(--lightFont);}
#about .about_img ul li:last-child{padding-right: 0;}
#about .btn_area{display: flex; justify-content: flex-end; max-width:660px; margin:20px auto 0;}


@keyframes rota {
	0 { transform:rotate(0);}
	100% { transform:rotate(360deg);}
}



/* Our Products */
#product{overflow: hidden;}
#product .product_in{}
#product .product_in .fs80{padding:0 0 50px;}
#product .product_roll{width: calc(100% + 30px); margin: 0 -15px;}
#product .product_roll .slick-list{overflow:visible;}
#product .product_roll .roll{padding:0 15px;}
#product .product_roll .roll a{display:block; position: relative; overflow: hidden; opacity: 0.25; transition:all .3s linear; pointer-events : none;} 
#product .product_roll .roll.slick-active a{opacity: 1; pointer-events : auto;} 
#product .product_roll .roll a:after{content:''; display: block; width: 100%; height: 100%; position: absolute; left:0; top:0; background: rgba(16, 16, 16, 0.80); backdrop-filter: blur(2.5px); opacity: 0; transition:all .4s;}
#product .product_roll .roll a:hover:after{opacity: 1; transition:all .4s;}
#product .product_roll .roll a .thumb{aspect-ratio:2/2.68; overflow: hidden;}
#product .product_roll .roll a .thumb img{display: block; width:100%; height:100%; object-fit:cover; transition:all .3s linear;}
#product .product_roll .roll a:hover .thumb img{transform:scale(1.1);}
#product .product_roll .roll a .desc{text-align:center; position: absolute; left: 0; top:0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transform:translateY(100px); z-index: 9; transition:all .4s; box-sizing:border-box; padding: 3%;}
#product .product_roll .roll a:hover .desc{opacity: 1; transform:translateY(0); transition:all .4s;}
#product .product_roll .roll a .desc .fs23{font-weight: 500; color:var(--white); display: block;}
#product .product_roll .roll a .desc .read{display:inline-block; font-size:0.875rem; letter-spacing:0; font-weight:500; color:var(--white); opacity: 0.5; line-height:120%; margin:30px auto 0; border-bottom: 1px solid var(--white);}
#product .btn_area{padding: 75px 0 0; display: flex; justify-content: center;}

#product .slick-arrow{cursor:pointer; width: 32px; height:32px; box-sizing:border-box; border:0; background:url("../images/arrow.png") no-repeat center/auto 100%; text-align:center; padding: 0; position: absolute; top: -110px; border-radius:50%; font-size:0; z-index: 9999; transition:all .3s linear;}
#product .slick-arrow:hover{opacity: 0.5;}
#product .slick-prev{left: 15px; transform:rotate(180deg);}
#product .slick-next{right: 15px;}


/* 해시태그 */
#marquee{overflow: hidden;}
#marquee .marquee_in{padding:70px 0; display: flex;}
#marquee .marquee_in.marquee_top{background:var(--black);}
#marquee .marquee_in.marquee_bottom{background:var(--white);border-bottom: 1px solid var(--border);}
#marquee .marquee_in .marquee_roll{display: flex;}
#marquee .marquee_in ul{display: flex;}
#marquee .marquee_in ul li{font-size:110px; padding: 0 60px; line-height: 120%; font-weight:400; font-family:var(--eng);}
#marquee .marquee_in.marquee_top ul li{color:rgba(255,255,255,.5);}
#marquee .marquee_in.marquee_bottom ul li{color:rgba(16,16,16,.2);}

@keyframes flowRolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
@keyframes flowRolling2 {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}



/* 배너 */
#story{overflow: hidden;}
#agency{overflow: hidden;}
.banner_style{display: flex; flex-wrap:wrap; justify-content: space-between;}
#story .banner_style{flex-direction: row-reverse;}
.banner_style dt{width: calc(50% - 15px);}
.banner_style dt .img{aspect-ratio:1/1; position: relative;}
.banner_style dt .img:after{content:''; display:block; width:100%; height:100%; background:url("../images/agency_rota.png") no-repeat center/100% auto; position:absolute; right:-30px; top:-60px; animation:rota 20s linear infinite;}
#story .banner_style dt .img:after{display: none;}
.banner_style dt img{display: block; width: 100%; height: 100%; object-fit:cover; border-radius:50%; overflow: hidden;}
.banner_style dd{width: calc(50% - 15px); padding: 0 0 0 115px; box-sizing:border-box; display: flex; flex-direction: column; justify-content: center;}
#story .banner_style dd{padding: 0 115px 0 0;}
.banner_style dd .fs80{}
.banner_style dd .fs32{padding:40px 0 0;}
.banner_style dd .fs23{padding: 12px 0 0;}
.banner_style dd .more_btn{margin:75px 0 0;}


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




}

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

/* visual */
#visual .visual_in .roll .v_txt h2{font-size:4.688rem;}



/* About */
#about .about_tit .fs32{padding:10px 0 0;}
#about .about_tit1{top:40px;}
#about .about_tit2{bottom: 120px;}
#about .about_img{max-width:500px;}
#about .about_img:after{width:350px; height:350px; right:-200px; top:-90px;}
#about .btn_area{max-width:500px;}


/* 해시태그 */
#marquee .marquee_in{padding:50px 0;}
#marquee .marquee_in ul li{font-size:80px; padding: 0 40px;}


/* 배너 */
.banner_style dd{padding: 0 0 0 30px;}
#story .banner_style dd{padding: 0 30px 0 0;}
.banner_style dd .fs32 br{display: none;}


}

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



/* visual */
#visual .visual_in .roll .v_txt{margin-top: 70px;}
#visual .visual_in .roll .v_txt h2{font-size:4.063rem;}
#visual .visual_in .roll .v_txt .fs32{padding:20px 0 0;}
#visual .scroll_down{bottom:30px;}
#visual .slick-dots{margin-top: -70px;}
#visual .slick-dots li{margin: 0 15px 0 0;}



/* About */
#about .about_tit .fs32{padding:8px 0 0;}
#about .about_tit1{left: 0; top:30px;}
#about .about_tit2{right: 0; bottom: 100px;}
#about .about_img{max-width:400px;}
#about .about_img:after{width:300px; height:300px; right:-150px; top:-70px;}
#about .about_img ul{padding:10px 0 0;}
#about .about_img ul li{padding: 0 15px 6px 0;}
#about .btn_area{max-width:400px; margin:15px auto 0;}



/* Our Products */
#product .product_in .fs80{padding:0 0 30px;}
#product .product_roll{width: calc(100% + 20px); margin: 0 -10px;}
#product .product_roll .roll{padding:0 10px;}
#product .product_roll .roll a .desc .read{margin:20px auto 0;}
#product .btn_area{padding: 50px 0 0;}
#product .slick-arrow{top: -75px;}
#product .slick-prev{left: 10px;}
#product .slick-next{right: 10px;}

/* 해시태그 */
#marquee .marquee_in{padding:30px 0;}
#marquee .marquee_in ul li{font-size:60px; padding: 0 25px;}


/* 배너 */
.banner_style dt{width: calc(50% - 10px);}
.banner_style dt .img:after{right:-20px; top:-40px;}
.banner_style dd{width: calc(50% - 10px);}
.banner_style dd .fs32{padding:30px 0 0;}
.banner_style dd .fs23{padding: 10px 0 0;}
.banner_style dd .more_btn{margin:50px 0 0;}


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


/* visual */
#visual .visual_in .roll .v_txt{margin-top: 50px;}
#visual .visual_in .roll .v_txt h2{font-size:3rem;}
#visual .visual_in .roll .v_txt .fs32{padding:15px 0 0;}
#visual .visual_in .roll .v_bg.pc{display: none;}
#visual .visual_in .roll .v_bg.mo{display: block;}
#visual .scroll_down{bottom:20px;}
#visual .scroll_down span{margin:8px auto 0; width:16px; height:16px;}
#visual .slick-dots{margin-top: -50px;}
#visual .slick-dots li{margin: 0 10px 0 0; width: 11px; height: 11px; border-width:2px;}




/* About */
#about .about_tit{position: relative;}
#about .about_tit1{left: auto; top:auto; text-align:center; padding: 0 0 25px;}
#about .about_tit2{right: auto; bottom: auto; text-align:center; padding: 25px 0 0;}
#about .about_img{max-width:80%;}
#about .about_img:after{width:110px; height:110px; right:-30px; top:-45px;}
#about .about_img ul{padding:0; position: absolute; right: -75px; bottom: 50px; transform:rotate(90deg);}
#about .about_img ul li{padding: 0 15px 0 0;}
#about .btn_area{max-width:80%; margin:40px auto 0; justify-content: center;}



/* Our Products */
#product .product_roll{width: calc(100% + 10px); padding: 0 5%; box-sizing:border-box; margin: 0 -5px;}
#product .product_roll .roll{padding:0 5px;}
#product .product_roll .roll a .desc .read{margin:15px auto 0;}
#product .btn_area{padding: 40px 0 0;}
#product .slick-arrow{width: 20px; height:20px; top: -60px;}
#product .slick-prev{left: 5px;}
#product .slick-next{right: 5px;}

/* 해시태그 */
#marquee .marquee_in{padding:20px 0;}
#marquee .marquee_in ul li{font-size:45px; padding: 0 15px;}

/* 배너 */
.banner_style dt{width: 100%;}
.banner_style dt .img{max-width:300px; margin: 0 auto;}
.banner_style dt .img:after{right:-20px; top:-10px;}
.banner_style dd{width: 100%; padding: 30px 0 0; text-align:center; align-items: center;}
#story .banner_style dd{padding: 30px 0 0;}
.banner_style dd .fs32{padding:15px 0 0;}
.banner_style dd .fs23{padding: 8px 0 0;}
.banner_style dd .more_btn{margin:40px 0 0;}


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





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




}