@import url("common.css");


/*** css 공통 ***/
.tbox{text-align:center; padding: 0 5% 30px; box-sizing:border-box;}
.tbox .fs18{padding: 8px 0 0; line-height: 150%;}


/* 화살표 */
.slick-arrow{border:0; padding:0; font-size:0; outline:none; cursor:pointer; width:30px; height:30px; transition:all .3s linear; position: absolute; z-index: 9999;}
.slick-prev{background:url('/img/arrow_p.png') no-repeat center/100% auto;}
.slick-next{background:url('/img/arrow_n.png') no-repeat center/100% auto;}





/*** Visual ***/
#visual{width:100%; height: var(--vh); overflow: hidden; background:var(--black); position: relative;}
#visual .visual_in{width: 100%; height: 100%; position: relative;}
#visual .visual_in .roll{width: 100%; height: var(--vh);}
#visual .visual_in .roll .v_txt{position: absolute; left: 50%; top:60%; transform:translate(-50%,-50%); text-align:center; z-index: 9999; margin-top:-120px;}
#visual .visual_in .roll .v_txt .fs20{color:var(--white); padding:0 0 5px; transition:all .6s 0.3s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_txt h2{font-family:var(--eng); font-weight: 800; letter-spacing: 1.7px; color:var(--white); line-height:115%; 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%;}
#visual .visual_in .roll .v_bg .bg{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 .v_bg .jarallax{position: relative; width: 100%; height:100%; opacity: .7;}
#visual .visual_in .roll .v_bg .jarallax iframe{position: absolute;}

/* 스크롤 */
#visual .scroll_down{display:inline-block; font-size:13px; font-weight:500; color:var(--white); line-height:120%; font-family:var(--eng); text-align:center; position:absolute; left:50%; bottom:36px; transform:translateX(-50%); z-index: 9999;}
#visual .scroll_down span{display:block; width:20px; height:30px; border-radius:20px; box-sizing:border-box; border:1px solid rgba(255,255,255,.5); position:relative; margin:12px auto 0;}
#visual .scroll_down span:after{content:''; display:block; width:2px; height:5px; background:var(--white); border-radius:2px; position:absolute; left:50%; top:8px; margin-left:-1px; animation:scroll_down 1s linear infinite;}


@keyframes scroll_down {
	0%,100% { transform:translateY(0); opacity: 1;}
	50% { transform:translateY(2px); opacity: 0.5;}
}

@keyframes fadeIn {
	0% { opacity: 0;}
	100% {opacity: 1;}
}


/* 화살표 */
#visual .slick-arrow{opacity: 1; bottom:38px;}
#visual .slick-arrow:hover{opacity: 0.5;}
#visual .slick-prev{background:url('/img/arrow_p_w.png') no-repeat center/100% auto; left:50%; margin-left:-675px;}
#visual .slick-next{background:url('/img/arrow_n_w.png') no-repeat center/100% auto; right: 50%; margin-right:-675px;}


/* 도트 */
#visual .slick-dots{font-size:0; position: absolute; left: 50%; top:60%; transform:translate(-50%,-50%); z-index: 9999; margin-bottom: 120px;}
#visual .slick-dots li{display:inline-block; vertical-align:top; width:20px; height:20px; border:1px solid transparent; box-sizing:border-box; margin: 0 15px 0 0; cursor:pointer; transition:all .3s linear; border-radius:50%; position: relative;}
#visual .slick-dots li:last-child{margin: 0;}
#visual .slick-dots li.slick-active{border-color:rgba(255,255,255,.3);}
#visual .slick-dots li:after{content:''; display:block; width:10px; height:10px; border-radius:50%; background:var(--white); position: absolute; left:50%; top:50%; margin-left: -5px; margin-top: -5px; opacity: 0.3; transition:all .3s linear;}
#visual .slick-dots li.slick-active:after{opacity: 1;}
#visual .slick-dots li button{border:0; padding:0; font-size:0; outline:none; cursor:pointer;}


/* 효과 */
#visual .visual_in .roll.action .v_bg .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 p{transform:translateY(0); opacity:1;}






/*** COMPANY INFO ***/
#company{}
#company .company_in{display:flex;}
#company .company_in > div{width: 50%; box-sizing:border-box;}
#company .company_in .img_area{}
#company .company_in .img_area img{width:100%;}
#company .company_in .txt_area{padding:0 0 0 64px; display: flex; flex-direction: column; justify-content: center;}
#company .company_in .txt_area .fs20{padding:20px 0 0;}
#company .company_in .txt_area .fs18{padding:8px 0 0;}
#company .company_in .txt_area .btnArea{padding:48px 0 0;}


/*** PRODUCTS ***/
#product{}
#product .product_in{}
#product .product_roll{width: calc(100 + 30px); margin: 0 -15px;}
#product .product_roll .roll{padding:0 15px;}
#product .product_roll .roll a{display: block; background:var(--white);}
#product .product_roll .roll dt{overflow: hidden; aspect-ratio: 3 / 2;}
#product .product_roll .roll dt img{width: 100%;  display: block; width: 100%; height: 100%; object-fit: cover;}
#product .product_roll .roll:hover dt img{transform:scale(1.1); transition:all .4s linear;}
#product .product_roll .roll dd{padding:22px 30px; box-sizing:border-box;}
#product .product_roll .roll dd h4{line-height:120%; height:1.4em; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#product .product_roll .roll dd p{line-height:120%; height:1.4em; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; margin: 6px 0 0;}

/* 화살표 */
#product .slick-arrow{opacity: 0.4; top:-100px;}
#product .slick-arrow:hover{opacity: 1;}
#product .slick-prev{left: 15px;}
#product .slick-next{right: 15px;}




/*** NOTICE ***/
#notice{}
#notice .notice_roll{width: calc(100 + 30px); margin: 0 -15px;}
#notice .notice_roll .roll{padding: 0 15px;}
#notice .notice_roll .roll a{display: block; box-sizing:border-box; border:1px solid var(--border); padding:40px; transition:all .3s linear;}
#notice .notice_roll .roll a:hover{border-color:var(--main); transition:all .3s linear;}
#notice .notice_roll .roll .cate{display:block; font-size:1rem; font-weight:700; font-family:var(--eng); color:var(--main); line-height: 120%; padding: 0 0 18px;}
#notice .notice_roll .roll .fs20{line-height:120%; height: 1.4em; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#notice .notice_roll .roll .dexp{margin:8px 0 0; line-height:1.8em; height:3.6em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
#notice .notice_roll .roll .date{margin:40px 0 0; padding:12px 0 0; border-top:1px solid var(--border); display:block; font-size:1rem; color:#999; font-family:var(--eng); line-height:120%; }


/* 화살표 */
#notice .slick-arrow{opacity: 0.4; top:-100px;}
#notice .slick-arrow:hover{opacity: 1;}
#notice .slick-prev{left: 15px;}
#notice .slick-next{right: 15px;}




/*** 배너 ***/
#banner{}
#banner .banner_in{display:flex; flex-wrap:wrap;}
#banner .banner_in .box{background-repeat: no-repeat; text-align:center; background-position:center; background-size:cover; margin:0 30px 0 0; width:calc((100% - 30px)/2); box-sizing:border-box; padding:150px 30px;}
#banner .banner_in .box:last-child{margin:0;}
#banner .banner_in .box .fs50{color:var(--white);}
#banner .banner_in .box .fs18{color:rgba(255,255,255,.7); padding:12px 0 0;}
#banner .banner_in .box .moreBtn{margin:40px auto 0;}



/*** 퀵 ***/
#quick{overflow:hidden;}
#quick .quick_in{display:flex; max-width:1160px;}
#quick .quick_in dl{width: 20%; position: relative; box-sizing:border-box; padding: 0 10px; border-right: 1px solid var(--border);}
#quick .quick_in dl:last-child{border-right:0;}
#quick .quick_in dl a{display:block; text-align:center;}
#quick .quick_in dl dt{transition:all .3s linear;}
#quick .quick_in dl:hover dt{transform:scale(1.1);}
#quick .quick_in dl dt svg{width: 100px; height:auto;}
#quick .quick_in dl dd{padding: 10px 0 0; transition:all .3s linear;}
#quick .quick_in dl:hover dd .fs20{color:var(--main); transition:all .3s linear;}







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


/*** css 공통 ***/
/* 텍스트 */
.fs50 br{display:none;}
.fs20 br{display:none;}
.fs18 br{display:none;}



/* 화살표 */
#visual .slick-prev{left:5%; margin-left:0;}
#visual .slick-next{right: 5%; margin-right:0;}








}

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

/*** COMPANY INFO ***/
#company{}
#company .company_in .txt_area{padding:0 0 0 40px;}
#company .company_in .txt_area .fs20{padding:15px 0 0;}
#company .company_in .txt_area .btnArea{padding:30px 0 0;}


/*** NOTICE ***/
#notice{}
#notice .notice_roll .roll a{padding:30px;}
#notice .notice_roll .roll .cate{padding: 0 0 12px;}
#notice .notice_roll .roll .date{margin:30px 0 0;}


/*** 배너 ***/
#banner{}
#banner .banner_in{}
#banner .banner_in .box{padding:120px 30px;}


}

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

/*** css 공통 ***/
/* 텍스트 */
.tbox{padding: 0 5% 20px;}
.tbox .fs18{padding: 6px 0 0;}



/* 화살표 */
.slick-arrow{width:25px; height:25px;}

/*** Visual ***/
#visual{}
#visual .visual_in{}
#visual .visual_in .roll{}
#visual .visual_in .roll .v_txt{margin-top:-80px;}

/* 스크롤 */
#visual .scroll_down{bottom:30px;}

/* 화살표 */
#visual .slick-arrow{bottom:30px;}

/* 도트 */
#visual .slick-dots{margin-bottom: 80px;}


/*** COMPANY INFO ***/
#company{}
#company .company_in .txt_area{padding:0 0 0 30px;}
#company .company_in .txt_area .fs20{padding:10px 0 0;}
#company .company_in .txt_area .txt{padding:6px 0 0;}
#company .company_in .txt_area .btnArea{padding:25px 0 0;}



/*** PRODUCTS ***/
#product{}
#product .product_in{}
#product .product_roll{width: calc(100 + 20px); margin: 0 -10px;}
#product .product_roll .roll{padding:0 10px;}
#product .product_roll .roll dd{padding:20px 25px;}

/* 화살표 */
#product .slick-arrow{top:-60px;}
#product .slick-prev{left: 10px;}
#product .slick-next{right: 10px;}


/*** NOTICE ***/
#notice{}
#notice .notice_roll{width: calc(100 + 20px); margin: 0 -10px;}
#notice .notice_roll .roll{padding: 0 10px;}
#notice .notice_roll .roll a{padding:25px;}
#notice .notice_roll .roll .cate{padding: 0 0 10px;}
#notice .notice_roll .roll .dexp{margin:6px 0 0;}
#notice .notice_roll .roll .date{margin:20px 0 0; padding:10px 0 0;}

/* 화살표 */
#notice .slick-arrow{top:-60px;}
#notice .slick-prev{left: 10px;}
#notice .slick-next{right: 10px;}




/*** 배너 ***/
#banner{}
#banner .banner_in{}
#banner .banner_in .box{margin:0 20px 0 0; width:calc((100% - 20px)/2); padding:100px 20px;}
#banner .banner_in .box .txt{padding:10px 0 0;}
#banner .banner_in .box .moreBtn{margin:20px auto 0;}



/*** 퀵 ***/
#quick .quick_in{}
#quick .quick_in dl dt svg{width: 80px; height: auto;}
#quick .quick_in dl dd{padding: 8px 0 0;}




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

/*** css 공통 ***/
/* 텍스트 */
.tbox{padding: 0 10% 20px;}



/* 화살표 */
.slick-arrow{width:25px; height:25px;}



/*** Visual ***/
#visual .visual_in .roll .v_txt{margin-top:-70px;}

/* 스크롤 */
#visual .scroll_down{font-size:11px; bottom:20px;}
#visual .scroll_down span{width:16px; height:24px; margin:8px auto 0;}
#visual .scroll_down span:after{top:6px; }

/* 화살표 */
#visual .slick-arrow{bottom:20px;}

/* 도트 */
#visual .slick-dots{margin-bottom: 70px;}
#visual .slick-dots li{width:16px; height:16px; margin: 0 10px 0 0;}
#visual .slick-dots li:after{width:6px; height:6px; margin-left: -3px; margin-top: -3px;}



/*** COMPANY INFO ***/
#company{}
#company .company_in{flex-wrap:wrap;}
#company .company_in > div{width: 100%;}
#company .company_in .txt_area{padding:15px 0 0;}
#company .company_in .txt_area .fs20{padding:8px 0 0;}
#company .company_in .txt_area .btnArea{padding:20px 0 0;}


/*** PRODUCTS ***/
#product{}
#product .product_in{}
#product .product_roll .roll dd{padding:20px;}
#product .product_roll .roll dd p{margin: 4px 0 0;}

/* 화살표 */
#product .slick-arrow{top:-50px;}

/*** NOTICE ***/
#notice{}
#notice .notice_roll .roll a{padding:20px;}
#notice .notice_roll .roll .date{margin:15px 0 0; padding:8px 0 0;}

/* 화살표 */
#notice .slick-arrow{top:-50px;}



/*** 배너 ***/
#banner{}
#banner .banner_in{}
#banner .banner_in .box{margin:0 0 10px; width:100%; padding:50px 20px;}
#banner .banner_in .box .txt{padding:8px 0 0;}
#banner .banner_in .box .moreBtn{margin:15px auto 0;}



/*** 퀵 ***/
#quick .quick_in{flex-wrap:wrap; justify-content: center;}
#quick .quick_in dl{width: 50%; padding: 15px 5px;}
#quick .quick_in dl:nth-child(3n){border-right:0;}
#quick .quick_in dl:nth-child(-n+3){width: 33.33%; border-bottom: 1px solid var(--border);}
#quick .quick_in dl dt svg{width: 60px; height: auto;}
#quick .quick_in dl dd{padding: 6px 0 0;}

}