@import url('common.css');

/* css 공통 */
.date{font-size: 0.778rem; font-family: var(--eng); font-weight: 400; letter-spacing: 0.02em; color:var(--light);}
.date::before{content:'\f540'; display: inline-block; vertical-align: middle; margin: -2px 6px 0 0; font-size:18px; font-weight: 400; font-family:var(--icon); color:inherit;}

.eng_tit{font-weight: 700; color:var(--main);}

.swiper-arrow-button{display: block; border:0; padding:0; background:none; overflow: hidden; position: relative; cursor:pointer; width: 60px; height: 60px; border-radius:50%;}
.swiper-arrow-button::before{content:''; display: block; width: 10px; aspect-ratio:1/1; border-radius:50%; position: absolute; left: 50%; top:50%; margin-left: -5px; margin-top: -5px; transform:scale(0); transition:all .3s ease; background:var(--main);}
.swiper-arrow-button:hover::before{transform:scale(8);}
.swiper-arrow-button::after{content:'';  display: block; width: 100%; height: 100%; border-radius:50%; border:1px solid var(--border); box-sizing:border-box; position: absolute; left: 0; top:0;}
.swiper-arrow-button i{display: block; width: 100%; height: 100%; font-style: normal; position: relative; z-index: 2;}
.swiper-arrow-button i::after{content:'\ef7d'; display: block; width: 100%; height: 100%; line-height: 60px; font-size:22px; color:var(--black); opacity: 0.4; position: absolute; left:0; top:0; transition:all .3s ease; font-family:var(--icon); text-align:center; z-index: 2;}
.swiper-arrow-button:hover i::after{color:var(--white); opacity: 1;}
.swiper-arrow-button.swiper-arrow-button-next i::after{content:'\e941';}



/* visual */
#visual{position: relative; width: 100%; height: var(--vh); overflow: hidden; background:var(--black);}
#visual .visual-swiper{width: 100%; height: 100%;}
#visual .visual-swiper .swiper-wrapper{}
#visual .visual-swiper .swiper-slide{width: 100%; height: 100%; background: var(--black);}
#visual .visual-swiper .swiper-slide .visual-bg{position: absolute; left: 0; top:0; width: 100%; height: 100%; transform:scale(1.15); z-index: 1;}
#visual .visual-swiper .swiper-slide-active .visual-bg{animation: vZoomOut 1.6s .1s ease both;}
#visual .visual-swiper .swiper-slide .visual-bg .bg{display: block; position: absolute; left: 0; top:0; width: 100%; height: 100%; box-sizing: border-box; background-size: cover; background-position: center; background-repeat:no-repeat;}
#visual .visual-swiper .swiper-slide .visual-bg .bg img{display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;}
#visual .visual-swiper .swiper-slide .visual-text{text-align:center; position: absolute; left: 50%; top:45%; transform:translate(-50%,-50%); margin-top: 70px; z-index: 10;}
#visual .visual-swiper .swiper-slide .visual-text h3{font-size:4.222rem; font-weight: 700; letter-spacing: 0; line-height: 120%; font-family:var(--eng); color:var(--white); opacity:0; transform:translateY(40px);}
#visual .visual-swiper .swiper-slide .visual-text p{padding-top: 28px; font-size:1.111rem; font-weight: 300; letter-spacing: 0; line-height: 150%; font-family:var(--eng); color:var(--white); opacity:0; transform:translateY(40px);}
#visual .visual-swiper .swiper-slide-active .visual-text h3{animation: vFadeUp .8s .5s ease both;}
#visual .visual-swiper .swiper-slide-active .visual-text p{animation: vFadeUp .8s .8s ease both;}

#visual .visual-pagination{display: flex; gap:10px; align-items: center; justify-content: center; position: absolute; left: 50%; top:45%; transform:translate(-50%,-50%); margin-top: -70px; z-index: 10; height: 30px; animation: vBulletIn .6s .3s ease both;}
#visual .visual-pagination .swiper-pagination-bullet{display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: none; border:0; padding:0; margin: 0; cursor: pointer; opacity: 0.5; transition: opacity .4s ease; box-sizing: border-box; border:1px solid transparent;}
#visual .visual-pagination .swiper-pagination-bullet span{display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--white);}
#visual .visual-pagination .swiper-pagination-bullet-active{opacity: 1; border-color:rgba(255,255,255,.5);}

#visual .scroll_down{display: flex; align-items:center; gap:13px; position: absolute; left: 50%; bottom: 50px; transform:translateX(-50%); z-index: 10; color:var(--white); text-decoration:none; overflow: hidden; animation: vScrollIn .6s 1.2s ease both;}
#visual .scroll_down .mouse_wrap{position:relative}
#visual .scroll_down .mouse{background:var(--white) linear-gradient(transparent 0%,transparent 50%,var(--white) 50%,var(--white) 100%);position:relative; width:25px;height:35px; box-sizing:border-box; border-radius:100px; background-size:100% 200%; animation:colorSlide 5s 1.4s linear infinite; mask:url("/img/scr_icon.svg") no-repeat 50% 50%; mask-size:contain;}
#visual .scr-label{display: inline-block; font-weight: 600; background-color: var(--white); background-image: linear-gradient(transparent 0%, transparent 50%, var(--white) 50%, var(--white) 100%); background-size: 100% 200%; background-position: 0% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: colorSlide 5s 1.4s linear infinite;}

@keyframes vZoomOut { from { transform:scale(1.15); } to {transform:scale(1); } }
@keyframes vFadeUp { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes vBulletIn { from { opacity:0; transform:translate(-50%,-50%) translateY(-15px); } to { opacity:1; transform:translate(-50%,-50%) translateY(0); } }
@keyframes vScrollIn { from { opacity:0; transform:translateX(-50%) translateY(20px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }

@keyframes colorSlide {
  0% {
    background-position: 0% 100%;
  }
  20% {
    background-position: 0% 0%;
  }
  21% {
    background-color: rgba(255, 255, 255, 0.2);
  }
  29.99% {
    background-color: #fff;
    background-position: 0% 0%;
  }
  30% {
    background-color: rgba(255, 255, 255, 0.2);
    background-position: 0% 100%;
  }
  50% {
    background-position: 0% 0%;
  }
  51% {
    background-color: rgba(255, 255, 255, 0.2);
  }
  59% {
    background-color: #fff;
    background-position: 0% 0%;
  }
  60% {
    background-color: rgba(255, 255, 255, 0.2);
    background-position: 0% 100%;
  }
  80% {
    background-position: 0% 0%;
  }
  81% {
    background-color: rgba(255, 255, 255, 0.2);
  }
  90%, 100% {
    background-color: #fff;
  }
}





/* product */
#product{overflow: hidden;}
#product .cate-list{display: flex; gap:10px; width: 100%;}
#product .cate-list .list{flex:1; height: 550px; transition: flex .5s cubic-bezier(.4,0,.2,1);}
#product .cate-list .list.active{flex: 0 0 800px;}
#product .cate-list .list a{display: block; position: relative; background:var(--main); width: 100%; height: 100%; overflow: hidden;}
#product .cate-list .list a::after{content:''; display: block; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 100%); position: absolute; left: 0; bottom: 0; z-index: 1; opacity: 0; transition: opacity .5s ease;}
#product .cate-list .list.active a::after{opacity: 1;}
#product .cate-list .list a .img_area{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#product .cate-list .list a .img_area img{display: block; width: 100%; height: 100%; object-fit:cover; opacity: 0.3; transition: opacity .5s ease;}
#product .cate-list .list.active a .img_area img{opacity: 1;}
#product .cate-list .list a .tit_area{position: absolute; left: 0; top: 0; text-align:center; padding: 60px 20px; width: 100%; height: 100%; box-sizing:border-box; display: flex; align-items: flex-start; justify-content: center; z-index: 2; transition: opacity .4s ease;}
#product .cate-list .list a .tit_area h3{writing-mode: vertical-rl; font-weight: 600; color:var(--white);}
#product .cate-list .list.active a .tit_area{opacity: 0;}
#product .cate-list .list a .txt_area{position: absolute; left: 0; bottom: 0; padding: 55px 120px 55px 50px; width: 800px; box-sizing:border-box; z-index: 3; display: flex; flex-direction: column; gap:12px; opacity: 0; transition: opacity .5s ease .15s;}
#product .cate-list .list.active a .txt_area{opacity: 1;}
#product .cate-list .list a .txt_area h4{font-weight: 800; color:var(--white);}
#product .cate-list .list a .txt_area p{color:var(--white);}
#product .cate-list .list a .txt_area .arrow_btn{position: absolute; right: 50px; bottom: 55px; width: 50px; height: 50px;}
#product .cate-list .list a .txt_area .arrow_btn::before{transform: scale(1); background: var(--white);}
#product .cate-list .list a .txt_area .arrow_btn::after{border-color: transparent;}
#product .cate-list .list a .txt_area .arrow_btn i::after{line-height: 50px; font-size:24px; color: var(--main);}





/* KNOWLEDGE INFORMATION */
#info{overflow: hidden;}
#info .info_in{position: relative;}
#info .tit_area{display: flex; flex-direction: column; gap:20px; padding: 0 350px 40px 0; box-sizing:border-box;}
#info .tit_area h3{color:var(--black);}
#info .btn_zone{display: flex; gap:3px; position: absolute; right: 0; top:176px;}
#info .info-swiper{}
#info .info-swiper .swiper-slide{height: auto;}
#info .info-swiper .swiper-slide a{display: block; box-sizing:border-box; padding: 30px; position: relative;}
#info .info-swiper .swiper-slide a::before{content:''; display: block; width: 100%; height: 100%; box-sizing:border-box; border:1px solid var(--border); position: absolute; left: 0; top:0; right: 0; bottom: 0; z-index: -1; transition:all .3s ease;}
#info .info-swiper .swiper-slide a .thumb{aspect-ratio:1/1; overflow: hidden;}
#info .info-swiper .swiper-slide a .thumb img{display: block; width: 100%; height: 100%; object-fit:cover;}
#info .info-swiper .swiper-slide a .desc{padding: 25px 0 0;}
#info .info-swiper .swiper-slide a .desc h4{font-weight: 600; color:var(--black); line-height: 1.6em; height: 3.2em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
#info .info-swiper .swiper-slide a .desc .text_box{margin-top: 10px; line-height: 1.2em; height: 1.2em; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#info .info-swiper .swiper-slide a .desc .date{margin-top: 20px;}
#info .info-swiper .pagination-progress{margin: 40px auto 0; height: 2px; width: 100%; background:rgba(16,16,16,.1); border-radius:2px; position: relative; left: auto; top:auto; display: block;}
#info .info-swiper .pagination-progress .swiper-pagination-progressbar-fill{background:var(--main); height: 4px; position: absolute; left: 0; top:50%; margin-top: -2px; z-index: 2; border-radius:10px;}
#info .info-swiper .swiper-slide a:hover::before{border-color:var(--main); background:var(--main);}

#info .info-swiper .swiper-slide a:hover h4{color:var(--white);}
#info .info-swiper .swiper-slide a:hover .text_box{color:var(--basic-w);}
#info .info-swiper .swiper-slide a:hover .date{color:var(--basic-w);}



/* News & Notice */
#news{position: relative; overflow: hidden; background:var(--black);}
#news .news_bg{position: absolute; left:0; top:0; width:100%; height: 100%; background:url('/img/news_bg.jpg') no-repeat center/cover; z-index: 0; transform:scale(1.15); transition:transform 3s ease;}
#news.in-view .news_bg{transform:scale(1);}
#news .btn_area.mo{display: none;}
#news .news_in{display: flex; position: relative; z-index: 2;}
#news .news_in article{box-sizing:border-box;}
#news .news_in .txt_area{width: 675px; padding: 0 50px 0 0;}
#news .news_in .txt_area > h3{color:var(--white);}
#news .news_in .txt_area > p{padding-top: 15px; color:var(--basic-w);}
#news .news_in .txt_area .btn_area{padding-top: 60px;}
#news .news_in .con_area{width: calc(100% - 675px);}
#news .news_list{display: flex; flex-direction: column; gap:5px; width: 100%;}
#news .news_list li{}
#news .news_list li a{display: flex; align-items:center; padding: 32px 30px; box-sizing:border-box; background: rgba(255, 255, 255, 0.20); transition:all .3s ease;}
#news .news_list li a .date{width: 140px; color:rgba(255,255,255,.6);}
#news .news_list li a .tit{width: calc(100% - 180px); box-sizing:border-box; padding: 0 30px 0 0;}
#news .news_list li a h4{font-weight: 600; color:var(--white); text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}

#news .news_list li a:hover{background:rgba(255,255,255,.4);}
#news .news_list li a:hover .arrow_btn::before{transform:scale(1.2);}
#news .news_list li a:hover .arrow_btn::after{border-color:var(--white);}
#news .news_list li a:hover .arrow_btn i::after{color:var(--main);}


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


  
/* product */
#product .cate-list .list.active{flex: 0 0 600px;}
#product .cate-list .list a .txt_area{width: 600px;}
#product .cate-list .list a .txt_area p br{display: none;}


/* News & Notice */
#news .news_in .txt_area{width: 40%; padding: 0 30px 0 0;}
#news .news_in .txt_area > p br{display: none;}
#news .news_in .con_area{width: 60%;}



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



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



/* product */
#product .cate-list .list{height: 450px;}
#product .cate-list .list.active{flex: 0 0 500px;}
#product .cate-list .list a .tit_area{padding: 40px 10px;}
#product .cate-list .list a .txt_area{padding: 40px 100px 40px 30px; width: 500px;}
#product .cate-list .list a .txt_area .arrow_btn{right: 30px;}



/* KNOWLEDGE INFORMATION */
#info .tit_area{padding: 0 0 40px 0;}
#info .btn_zone{right: auto; top:auto; position: relative; justify-content: space-between; margin: 40px auto 0;}
#info .btn_zone .swiper-arrow-button-prev{order: 1;}
#info .btn_zone .swiper-arrow-button-next{order: 3;}
#info .btn_zone .btn_area{order: 2;}



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

/* css 공통 */
.swiper-arrow-button{width: 50px; height: 50px;}
.swiper-arrow-button i::after{line-height: 50px; font-size:20px;}



/* visual */
#visual .visual-swiper .swiper-slide .visual-text h3{font-size:3.333rem;}
#visual .visual-swiper .swiper-slide .visual-text p{padding-top: 20px;}
#visual .scroll_down{bottom: 30px;}


/* product */
#product .cate-list .list{height: 400px;}
#product .cate-list .list.active{flex: 0 0 350px;}
#product .cate-list .list a .tit_area{padding: 30px 10px;}
#product .cate-list .list a .txt_area{padding: 30px 80px 30px 20px; width: 350px; gap:6px;}
#product .cate-list .list a .txt_area .arrow_btn{right: 20px; bottom: 30px; width: 40px; height: 40px;}
#product .cate-list .list a .txt_area .arrow_btn i::after{line-height: 40px; font-size:20px;}




/* KNOWLEDGE INFORMATION */
#info .tit_area{gap:10px; padding: 0 0 30px;}
#info .tit_area h3 br{display: none;}
#info .btn_zone{margin: 30px auto 0;}
#info .info-swiper .swiper-slide a{padding: 20px;}
#info .info-swiper .swiper-slide a .desc{padding: 15px 0 0;}
#info .info-swiper .swiper-slide a .desc .text_box{margin-top: 6px;}
#info .info-swiper .swiper-slide a .desc .date{margin-top: 15px;}
#info .info-swiper .pagination-progress{margin: 30px auto 0;}




/* News & Notice */
#news .btn_area.mo{display: flex; justify-content: center; padding: 30px 0 0;}
#news .btn_area.pc{display: none;}
#news .news_in{flex-wrap:wrap;}
#news .news_in .txt_area{width: 100%; padding: 0 0 30px; text-align:center;}
#news .news_in .con_area{width: 100%;}
#news .news_list li a{padding: 25px 20px;}




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

/* css 공통 */
.date::before{font-size:16px;}

.swiper-arrow-button{width: 45px; height: 45px;}
.swiper-arrow-button i::after{line-height: 45px; font-size:16px;}



/* visual */
#visual .visual-swiper .swiper-slide .visual-text{top:45%; margin-top: 50px;}
#visual .visual-swiper .swiper-slide .visual-text h3{font-size:2.5rem;}
#visual .visual-swiper .swiper-slide .visual-text p{padding-top: 10px;}

#visual .visual-pagination{gap:6px; top:45%; margin-top: -50px; height: 20px;}
#visual .visual-pagination .swiper-pagination-bullet{width: 20px; height: 20px;}
#visual .visual-pagination .swiper-pagination-bullet span{width: 6px; height: 6px;}

#visual .scroll_down{gap:11px; bottom: 20px;}
#visual .scroll_down .mouse{width:22px; height:31px;}

/* product */
#product .cate-list{gap:10px; flex-wrap:wrap;}
#product .cate-list .list{flex:auto; width: calc((100% - 10px)/2); height: 220px;}
#product .cate-list .list.active{flex: auto;}
#product .cate-list .list a .tit_area{display: none;}
#product .cate-list .list a .txt_area{padding: 20px; width: 100%; gap:10px; align-items: center; opacity: 1;}
#product .cate-list .list a .txt_area h4{text-align:center;}
#product .cate-list .list a .txt_area p{display: none;}
#product .cate-list .list a .txt_area .arrow_btn{right: auto; bottom: auto; position: relative; width: 30px; height: 30px;}
#product .cate-list .list a .txt_area .arrow_btn i::after{line-height: 30px; font-size:16px;}
#product .cate-list .list a::after{opacity: 1;}
#product .cate-list .list a .img_area img{opacity: 1;}

/* KNOWLEDGE INFORMATION */
#info .info-swiper .swiper-slide a{padding: 10px;}
#info .info-swiper .swiper-slide a .desc{padding: 10px 0 0;}
#info .info-swiper .swiper-slide a .desc .text_box{display: none;}
#info .info-swiper .swiper-slide a .desc .date{margin-top: 10px;}
#info .info-swiper .pagination-progress{margin: 20px auto 0;}



/* News & Notice */
#news .news_in .txt_area > p{padding-top: 8px; text-wrap: balance;}
#news .news_list{gap:2px;}
#news .news_list li a{padding: 17px 15px; flex-wrap:wrap; position: relative;}
#news .news_list li a .date{width: 100%; margin: 0 0 5px;}
#news .news_list li a .tit{width: 100%; padding: 0 60px 0 0;}
#news .news_list li a .arrow_btn{position: absolute; right: 15px; top:50%; margin-top: -15px;}


}