@import url("common.css");

section {background:var(--black);}

/* css °ψΕλ */
.indicaotr{display: flex; align-items:center;}

.slick-arrow{display: block; cursor:pointer; position: relative; width: 30px; height:30px; font-size:0; color:var(--white); transition:all .3s; opacity: 0.7;}
.slick-arrow:hover{opacity: 1;}
.slick-arrow::after{display: block; width: 100%; height: 100%; line-height:30px; font-size:30px; color:var(--white); position: absolute; left:0; top:0; font-family:var(--icon); font-weight: 300;}
.slick-arrow.slick-arrow-prev::after{content:'\e2ea';}
.slick-arrow.slick-arrow-next::after{content:'\e5e1';}
.slick-arrow.slick-hidden{display: none !important;}

.slick-arrow_wrap{display: flex; align-items:center; gap:20px;}
.slick-page{display: flex; align-items:center; margin-right: 20px;}
.slick-page li{font-size:0.778rem; font-weight: 400; color:rgba(255,255,255,.5); letter-spacing: 0; font-family:var(--eng); line-height: 120%;}
.slick-page li.cur{font-weight: 700; color:var(--white);}
.slick-page li.slash{margin: 0 10px;}


/* VISUAL */
#visual{width: 100%; height: var(--vh); position: relative; overflow: hidden;}
#visual .indicaotr{transform:translateY(60px); opacity:0; animation:visual_eff 1s 0.2s; animation-fill-mode:both;}
#visual .indicaotr .v-dots .slick-dots{display: flex; gap:15px; align-items:center;}
#visual .indicaotr .v-dots li{line-height: 120%; cursor:pointer;}
#visual .indicaotr .v-dots li button{border:0; padding:0; background:none; cursor:pointer; font-size:0.778rem; font-weight: 700; color:rgba(255,255,255,.3); font-family:var(--eng); line-height: 120%;}
#visual .indicaotr .v-dots li.slick-active button{color:var(--white); border-bottom: 1px solid var(--white);}
#visual .indicaotr .v-dots li button::before{content: "0";}
#visual .indicaotr .v-dots li:nth-child(n + 10) button::before{content: none;}

#visual .indicaotr .slick-arrow{}
#visual .indicaotr .slick-arrow.slick-arrow-prev{margin: 0 20px;}

#visual .v_txt{position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index: 9999; display: flex; align-items: flex-end;}
#visual .v_txt > div{box-sizing:border-box; width: 50%;}
#visual .v_txt .v_txt_in{padding:0 50px 0 0;}
#visual .v_txt .visual_img{}
#visual .v_txt .visual_img .roll{}
#visual .v_txt .visual_img .roll img{max-width:800px; width: 100%; height: auto; transition:all .6s 0.3s linear; opacity:0;}
#visual .v_txt .visual_img .roll.action img{opacity:1;}


#visual .v_txt .indicaotr{padding: 0 0 50px;}
#visual .v_txt .fs80{position: relative; display: inline-block; transform:translateY(60px); opacity:0; animation:visual_eff 1s 0.6s; animation-fill-mode:both;}
#visual .v_txt .fs80::after{content:''; display: block; width: 222px; height:222px; background:url('/img/ci.png') no-repeat center/contain; position: absolute; right: -140px; top:10px; opacity: 0.3; z-index: -1;}
#visual .v_txt .fs28{padding: 0 0 15px; transform:translateY(60px); opacity:0; animation:visual_eff 1s 0.4s; animation-fill-mode:both;}
#visual .v_txt .dots{padding: 30px 0 0; transform:translateY(60px); opacity:0; animation:visual_eff 1s 0.8s; animation-fill-mode:both;}
#visual .v_txt .dots li{font-size:1.111rem; font-weight: 400; line-height:170%; letter-spacing: -1px; color:rgba(255,255,255,.9); box-sizing:border-box; position:relative; display:flex; align-items:flex-start; gap:0 6px;}
#visual .v_txt .dots li + li{margin: 6px 0 0;}
#visual .v_txt .dots li::before{content:''; width:3px; aspect-ratio: 3 / 3; border-radius:100%; background:rgba(255,255,255,0.5); display:block; position:relative; flex-shrink: 0; top:0.8rem;}
#visual .v_txt .certi_img{padding: 30px 0 0; transform:translateY(60px); opacity:0; animation:visual_eff 1s 1s; animation-fill-mode:both;}
#visual .v_txt .certi_img img{max-width:248px; width: 100%; height: auto; }

#visual .visual_in{width: 100%; height: 100%; position: relative;}
#visual .visual_in .roll{width: 100%; height: var(--vh); position: absolute; left: 0; top:0;}
#visual .visual_in .roll .v_bg{position: absolute; left: 0; top:0; width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center; -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.action .v_bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}



#visual .scroll_down{display: inline-block; position: absolute; left:50%; bottom: 40px; z-index: 9999; transform:translateX(-50%); width: 40px; height: 70px; border-radius:40px; border:1px solid rgba(255,255,255,.2); overflow: hidden; box-sizing:border-box; font-size:0; transition:all .3s linear;}
#visual .scroll_down:hover{border-color:var(--white);}
#visual .scroll_down::after{content:'\ead0'; display: block; width: 20px; height:20px; line-height: 20px; font-size:20px; font-family:var(--icon); position: absolute; left:50%; top:-20px; margin-left: -10px; color:var(--white); animation:scroll_down 1.5s ease-in infinite;}


@keyframes scroll_down {
	from { transform:translateY(0); opacity: 1;}
	to { transform:translateY(70px); opacity: 0.2;}
}

@keyframes visual_eff {
	0% { transform:translateY(60px); opacity:0; }
	100% { transform:translateY(0); opacity:1; }
}



/* OUR PRODUCT */
#product{overflow: hidden;}
#product .product_in{display: flex;}
#product .product_in > div{box-sizing:border-box; position: relative;}
#product .product_in .tit_area{width: 540px; padding: 0 50px 0 0; position: relative; z-index: 9;}
#product .product_in .tit_area .fs60{}
#product .product_in .tit_area .fs20{padding: 15px 0 0;}
#product .product_in .tit_area .btn_area{padding: 50px 0 0;}
#product .product_in .con_area{width: calc(100% - 540px);}
#product .indicaotr{position: absolute; left: -180px; bottom: 0; z-index: 9;}
#product .slick-list{overflow: visible;}
#product .product_roll{position: relative;}
#product .product_roll::before{content:'';  display: block; width: 100%; height: 100%; background:var(--black); position: absolute; left:-100%; top:0; z-index: 5;}
#product .product_roll .roll{width: 780px; margin-right: 30px;}
#product .product_roll .roll a{position: relative; display: block;}
#product .product_roll .roll a .thumb{aspect-ratio:3/2.2; overflow: hidden; background-repeat:no-repeat; background-size:cover; background-position:center;	}
#product .product_roll .roll a .thumb::after{content:''; display: block; width: 100%; height:100%; box-sizing:border-box; border:3px solid var(--sub); background:rgba(238,211,116,.1); position: absolute; left:0; top:0; transition:all .3s linear; opacity: 0;}
#product .product_roll .roll a:hover .thumb::after{opacity: 1;}
#product .product_roll .roll a .thumb img{display: block; width: 100%; height: 100%; position: relative; z-index: 5; object-fit:contain; transition:all .4s linear;}
#product .product_roll .roll a:hover .thumb img{transform:scale(1.05);}
#product .product_roll .roll a .desc{padding: 60px 50px; box-sizing:border-box; position: absolute; left:0; top:0; width: 100%; z-index: 9;} 
#product .product_roll .roll a .desc .fs30{color:var(--white);}
#product .product_roll .roll a .desc .fs18{color:rgba(255,255,255,.5); padding: 8px 0 0;}


/* ABOUT */
#about{position: relative; overflow:hidden;}
#about .bg{background-repeat:no-repeat; background-position:center; position: absolute; left:50%; transform:translateX(-50%); top:0; display: block; width: 0; height: 100%; transition:all 1s linear; z-index: 2;}
#about.in-view .bg{width: 100%;}
#about .about_in{position: relative; z-index: 5;}
#about .about_in .logo_img{width: 278px; height: auto; margin: 0 auto 25px;}
#about .about_in .logo_img svg{width: 100%; height: auto;}
#about .about_in .fs20{}
#about .about_in .btn_area{padding: 50px 0 0; display: flex; justify-content: center; gap:8px;}



/* OUR TECHNOLOGY */
#technology{overflow: hidden;}
#technology .technology_in{}
#technology .technology_in .fs20{padding: 15px 0 0;}
#technology .technology_list{padding:70px 0 0; max-width:1185px; margin:0 auto; display: grid; align-items: start; grid-template-columns: repeat(3, 1fr); grid-gap:30px;}
#technology .technology_list li{background: rgba(255,255,255,.1); box-shadow: 0px 8px 25px 0px rgba(0, 0, 0, 0.06); position: relative;}
#technology .technology_list li::after{content:''; display: block; width: 100%; height:100%; box-sizing:border-box; border:3px solid var(--sub); background:rgba(238,211,116,.1); position: absolute; left:0; top:0; transition:all .3s linear; opacity: 0;}
#technology .technology_list li:hover::after{opacity: 1;}
#technology .technology_list li:nth-child(even){margin-top: 30px;}
#technology .technology_list li a{display:block; padding:40px; box-sizing:border-box; width: 100%; height:100%; text-align:left; position: relative; z-index: 5;}
#technology .technology_list li a dl{}
#technology .technology_list li a dl dt{}
#technology .technology_list li a dl dt .fs14{padding: 0 0 6px;}
#technology .technology_list li a dl dt .fs26{}
#technology .technology_list li a dl dd{padding: 60px 0 0; display: flex; justify-content: flex-end;}
#technology .technology_list li a dl dd img{width: 100px; height:auto;}




/* QUOTATION INQUIRY */
#inquiry{position: relative; background:none;}
#inquiry .bg{background-repeat:no-repeat; background-position:center; position: fixed; left:50%; transform:translateX(-50%); top:0; display: block; width: 0; height: 100vh; z-index: -1; transition:all 1s linear;}
#inquiry.in-view .bg{width: 100%;}
#inquiry .inquiry_in{position: relative; z-index: 5;}
#inquiry .inquiry_in > div{box-sizing:border-box;}
#inquiry .inquiry_in .tit_area{width: 100%; padding: 0 0 70px; text-align:center;}
#inquiry .inquiry_in .tit_area .fs18{color:var(--white); padding:30px 0 0;}
#inquiry .inquiry_in .tit_area .fs18 br{display: block;}
#inquiry section{background:none;}






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



/* OUR PRODUCT */
#product .product_in{}
#product .product_in .tit_area{width: 40%;}
#product .product_in .con_area{width: 60%;}










}

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




}

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


/* VISUAL */
#visual{}
#visual .v_txt .fs80::after{width: 180px; height:180px; right: -100px;}


/* OUR PRODUCT */
#product .product_roll .roll a .desc{padding: 40px;}
#product .product_roll .roll a .thumb{aspect-ratio:3/2.5;}


/* QUOTATION INQUIRY */
#inquiry .inquiry_in .tit_area{padding: 0 0 50px;}
#inquiry .inquiry_in .tit_area .fs18{padding:20px 0 0;}

}

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

/* VISUAL */
#visual{}
#visual .v_txt{flex-wrap:wrap;}
#visual .v_txt > div{width: 100%;}
#visual .v_txt .v_txt_in{padding:0 0 30px;}
#visual .v_txt .indicaotr{padding: 0 0 20px;}
#visual .v_txt .fs80{}
#visual .v_txt .fs80::after{width: 150px; height:150px; right: -90px; top:0;}
#visual .v_txt .fs28{padding: 0 0 10px;}
#visual .v_txt .dots{padding: 20px 0 0;}
#visual .v_txt .certi_img{padding: 20px 0 0;}
#visual .v_txt .certi_img img{max-width:150px;}

#visual .v_txt .visual_img .roll{text-align:center;}
#visual .v_txt .visual_img .roll img{max-width:70%;}

#visual .scroll_down{bottom: 30px; width: 30px; height: 53px;}



/* OUR PRODUCT */
#product .product_in{flex-wrap:wrap;}
#product .product_in .tit_area{width: 100%; padding: 0 0 50px;}
#product .product_in .tit_area .fs20{padding: 10px 0 0;}
#product .product_in .tit_area .btn_area{padding: 30px 0 0;}
#product .product_in .con_area{width: 100%;}
#product .indicaotr{left: auto; bottom: auto; position: relative; margin: 20px 0 0;}
#product .product_roll{}
#product .product_roll::before{}
#product .product_roll .roll{margin-right: 20px;}
#product .product_roll .roll a .desc{padding: 30px;}
#product .product_roll .roll a .desc .fs18{padding: 6px 0 0;}




/* ABOUT */
#about .about_in .logo_img{width: 200px; height: auto; margin: 0 auto 15px;}
#about .about_in .btn_area{padding: 30px 0 0;}



/* OUR TECHNOLOGY */
#technology .technology_in .fs20{padding: 10px 0 0;}
#technology .technology_list{padding:50px 0 0; grid-template-columns: repeat(3, 1fr); grid-gap:20px;}
#technology .technology_list li::after{}
#technology .technology_list li:nth-child(even){margin-top: 20px;}
#technology .technology_list li a{padding:30px;}
#technology .technology_list li a dl{}
#technology .technology_list li a dl dt{}
#technology .technology_list li a dl dd{padding: 40px 0 0;}
#technology .technology_list li a dl dd img{width: 80px; height:auto;}



/* QUOTATION INQUIRY */
#inquiry .inquiry_in .tit_area{padding: 0 0 30px;}
#inquiry .inquiry_in .tit_area .fs18{padding:10px 0 0;}


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

/* css °ψΕλ */
.slick-arrow{width: 24px; height:24px;}
.slick-arrow::after{line-height:24px; font-size:24px;}

.slick-arrow_wrap{gap:10px;}
.slick-page{margin-right: 10px;}
.slick-page li{font-size:0.889rem;}
.slick-page li.slash{margin: 0 5px;}


/* VISUAL */
#visual{}
#visual .indicaotr .v-dots .slick-dots{gap:10px;}
#visual .indicaotr .slick-arrow{}
#visual .indicaotr .slick-arrow.slick-arrow-prev{margin: 0 10px;}

#visual .v_txt{flex-wrap:wrap;}
#visual .v_txt > div{width: 100%;}
#visual .v_txt .v_txt_in{padding:0 0 20px;}
#visual .v_txt .indicaotr{padding: 0 0 10px;}
#visual .v_txt .fs80{}
#visual .v_txt .fs80::after{width: 120px; height:120px; right: -80px;}
#visual .v_txt .fs28{padding: 0 0 6px;}
#visual .v_txt .dots{padding: 10px 0 0;}
#visual .v_txt .dots li{}
#visual .v_txt .dots li + li{margin: 4px 0 0;}
#visual .v_txt .certi_img{padding: 10px 0 0;}
#visual .v_txt .certi_img img{max-width:120px;}

#visual .v_txt .visual_img .roll img{max-width:80%;}

#visual .scroll_down{bottom: 20px;}


/* OUR PRODUCT */
#product .product_in .tit_area{padding: 0 0 40px;}
#product .product_in .tit_area .fs20{padding: 6px 0 0;}
#product .product_in .tit_area .btn_area{padding: 20px 0 0;}
#product .product_in .con_area{width: 100%;}
#product .product_roll .roll{margin-right: 10px;}
#product .product_roll .roll a .desc{padding: 20px;}



/* ABOUT */
#about .about_in .logo_img{width: 130px; height: auto; margin: 0 auto 10px;}
#about .about_in .btn_area{padding: 20px 0 0; gap:4px;}


/* OUR TECHNOLOGY */
#technology .technology_in .fs20{padding: 8px 0 0;}
#technology .technology_list{padding:30px 0 0; grid-template-columns: repeat(1, 1fr); grid-gap:10px;}
#technology .technology_list li::after{}
#technology .technology_list li:nth-child(even){margin-top: 0;}
#technology .technology_list li a{padding:20px 25px;}
#technology .technology_list li a dl{display: flex; align-items:center;}
#technology .technology_list li a dl dt{width: calc(100% - 60px);}
#technology .technology_list li a dl dd{padding: 0; width: 60px;}
#technology .technology_list li a dl dd img{width: 60px; height:auto;}


}