@import url("common.css");


/*** css 공통 ***/
.tbox {text-align:center; box-sizing:border-box;}
.tbox .fs18 {padding:20px 0 0; font-weight:300;}

/* 화살표 */
.slick-arrow {border:0; padding:0; font-size:0; outline:none; cursor:pointer; width:20px; height:20px; transition:all .3s linear; position: absolute; z-index: 9999; background-color:transparent;}
.slick-arrow::after {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:Center; color:var(--black); font-size:20px; font-family:var(--icon); z-index:100;}
.slick-arrow:hover {opacity:0.5;}
.slick-prev::after {content:"\e2ea";}
.slick-next::after {content:"\e5e1";}


/*** Visual ***/
#visual {width:100%; height:800px; overflow: hidden; background:var(--black); position: relative;}
#visual .visual_in {width: 100%; height: 100%; position: relative;}
#visual .visual_in .roll {width: 100%; height:800px;}
#visual .visual_in .roll .v_txt{position: absolute; left: 50%; top:60%; transform:translate(-50%,-50%); z-index: 9999; margin-top:-120px;}
#visual .visual_in .roll .v_txt h2 {font-weight: 800; color:var(--white); transition:all .6s 0.3s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_txt .fs18 {color:var(--white); padding:30px 0 0 0; transition:all .6s 0.6s linear; transform:translateY(60px); opacity:0; font-weight:300;}
#visual .visual_in .roll .v_bg {position: absolute; left: 0; top:0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg::before {position: absolute; content:"";  left: 0; top:0; width: 100%; height: 100%; z-index:1005; background:var(--black); opacity:0.25; }  
#visual .visual_in .roll .v_bg::after {position: absolute; content:""; left: 0; top:0; width: 100%; height: 100%; z-index:1010; background: RGBA(0, 0, 0, 1.00);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 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 .mo {display:none;}
#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;}

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

/* 화살표 */
#visual .slick-arrow {opacity: 1; bottom:130px; }
#visual .slick-arrow::after {color:var(--white);}
#visual .slick-arrow:hover {opacity: 0.5;}
#visual .slick-prev {right: 50%; margin-right:-735px;}
#visual .slick-next {right: 50%; margin-right:-775px;}

/* 도트 */
#visual .slick-dots {position: absolute; right: 50%; bottom:135px; z-index: 9999;  margin-right:-690px; display:flex; align-items:center; justify-content:flex-end;}
#visual .slick-dots li {display:inline-block; vertical-align:top; width:20px; height:20px; 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.slick-active:after{opacity: 1;}
#visual .slick-dots li button {position:Relative; border:none; padding:0; outline:none; cursor:pointer; color:var(--white); font-size:16px; opacity:0.3; background-color:transparent;}
#visual .slick-dots li.slick-active button {opacity:1; border-bottom:2px solid #fff;}

/* 효과 */
#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;}


/*** NOTICE ***/
#visual .noticeWrap {position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:1100; width:94%; max-width:1560px;}
#visual .noticeWrap dl {width:100%; display:flex; align-items:center; justify-content:center; height:70px; padding:0 35px; background:rgba(255,255,255,0.08); backdrop-filter: blur(5px); border-radius:var(--borderR10); color:var(--white); overflow:hidden; box-sizing:border-box;}
#visual .noticeWrap dl dt {position:relative; padding-right:25px; width:152px;}
#visual .noticeWrap dl dt::before {content:"\efad"; font-family:var(--icon); font-size:20px; display:inline-block; vertical-align:bottom; margin-right:8px;}
#visual .noticeWrap dl dt::after {position:absolute; right:0; top:50%; transform:TranslateY(-50%); z-index:1010; width:1px; height:12px; background:rgba(255,255,255,0.2); content:"";}
#visual .noticeWrap dl dd {position:relative; padding-left:25px; width:calc(100% - 177px); box-sizing:border-box; }
#visual .noticeWrap .notice_roll {flex:1; height:70px;}
#visual .noticeWrap dl dd .swiper-slide {display:flex; align-items:center; justify-content:space-between;}
#visual .noticeWrap dl dd .swiper-slide p {display:-webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow:ellipsis; overflow:hidden;  width:calc(100% - 105px); font-weight:300;  margin-right:10px;}
#visual .noticeWrap dl dd .swiper-slide span {width:95px; display:flex; align-items:center; justify-content:flex-end; text-align:right; font-weight:500; font-size:12px;}
#visual .noticeWrap dl dd .swiper-slide span::before {content:"\e8b5"; font-family:var(--icon); font-size:18px; display:inline-block; vertical-align:bottom; margin-right:6px;}


/*** PRODUCT ***/
#product {position:relative; max-width:2120px; padding-bottom:35px; overflow:hidden;}
#product .tbox {margin-bottom:40px;}
#product .product_list {}
#product .product_list .swiper {}
#product .product_list .swiper .swiper-wrapper {}
#product .product_list .swiper-slide {transition: transform 0.4s ease; width:400px; margin:0 15px; height:auto;}
#product .product_list .swiper-slide::before {position:absolute; left:0; top:0; width:100%; height:100%; border-radius:var(--borderR10); border:2px solid var(--main); z-index:-1; content:""; display:block; box-sizing:border-box; opacity:0; transition:all 0.5s ease-out; background-color:transparent;}

#product .product_list .swiper-slide figure {position:relative; border-radius:var(--borderR10); overflow:hidden; height:100%}
#product .product_list .swiper-slide figure a {position:relative; display:block; height:100%}
#product .product_list .swiper-slide figure a::before {position:absolute; left:0; top:0; width:100%; height:100%; border-radius:var(--borderR10); border:1px solid var(--border); z-index:-2; content:""; display:block; box-sizing:border-box; transition:all 0.5s ease-out;}
#product .product_list .swiper-slide figure a::after {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:5; content:"\f772"; width:60px; height:60px; border-radius:100%; background:var(--main); font-family:var(--main); font-size:24px; font-family:var(--icon); color:var(--white); z-index:2; display:flex; align-items:center; justify-content:center; opacity:0; transition:all 0.5s ease-out;}
#product .product_list .swiper-slide-prev figure a:hover::after, #product .product_list .swiper-slide-active figure a:hover::after, #product .product_list .swiper-slide-next figure a:hover::after {opacity:1;}
#product .product_list .swiper-slide-prev figure a:hover dl dd h4, #product .product_list .swiper-slide-active figure a:hover dl dd h4, #product .product_list .swiper-slide-next figure a:hover dl dd h4 {opacity:1;}
#product .product_list .swiper-slide-prev:hover::before, #product .product_list .swiper-slide-active:hover::before, #product .product_list .swiper-slide-next:hover::before  {opacity:1;}

#product .product_list .swiper-slide dl dt {position:relative; aspect-ratio:1/1; opacity:0.5; transition:all 0.5s linear; filter: grayscale(1); padding:2px; overflow:hidden;}
#product .product_list .swiper-slide dl dt img {display:block; width:100%; height:100%; object-fit:cover; border-radius:10px 10px 0 0; }
#product .product_list .swiper-slide dl dd {padding:30px 40px; box-sizing:border-box; opacity:0.5; transition:all 0.5s linear;}
#product .product_list .swiper-slide dl dd h4 { text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; letter-spacing:0;}
#product .product_list .swiper-slide dl dd p {font-weight:300; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#product .product_list .swiper-slide-prev dl dt, #product .product_list .swiper-slide-prev dl dd, 
#product .product_list .swiper-slide-active dl dt, #product .product_list .swiper-slide-active dl dd, 
#product .product_list .swiper-slide-next dl dt, #product .product_list .swiper-slide-next dl dd {opacity:1; filter: grayscale(0);} 

.swiper_navi {position:relative; display:flex; align-items:center; justify-content:space-between; max-width:500px; height:100%; min-height:60px; margin-top:60px;}
.swiper_navi .page {display:flex; align-items:center; margin-right:auto; margin-left:auto;}
.swiper_navi .page span.bar {width:200px; height:4px; background:var(--border); margin:0 15px; border-radius:999px; position:relative}
.swiper_navi .page span.bar .bar_active {background:var(--main); width:100%; height:100%; border-radius:999px; position:absolute; top:0; left:0; transition:all .3s linear}
.swiper_navi .page span:not(.bar) {color:var(--black); font-weight:600; font-size:14px;}

.swiper_btn {position:absolute; display:flex; width:60px; aspect-ratio:1/1; border-radius:50%; border:0; background:var(--grayBg); justify-content:center; align-items:center; color:var(--black); transition:all 0.5s ease-out;}
.swiper_btn::before {line-height:1; font-family:var(--icon); font-size:30px; font-weight:400; transition:all 0.5s ease-out;}
.swiper_btn:hover {border-color:var(--main);}
.swiper_btn:hover::before {color:var(--main);}
.swiper_btn.prev {left:0;}
.swiper_btn.prev::before {content:"\e5cb"}
.swiper_btn.next {right:0;}
.swiper_btn.next::before {content:"\f46a"}


/*** PARTNER ***/
#partner {position:relative; }
#partner .global {position:relative; display:flex; align-items:center; aspect-ratio:1920/1015;}
/*#partner .global::before {content:""; display:block; padding-bottom:52.8645%;}*/
#partner .global .global_in {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:10;}
#partner .global .tbox {text-align:left; width:50%; padding-bottom:60px;}
#partner .global .bg {position:absolute; right:0; top:0; bottom:0; width:100%; height:100%; max-width:1564px; max-height:1015px; display:block; background:url('/img/partner_bg.png') right center no-repeat; z-index:-5; background-size:cover;}

#partner .partner_roll {padding:30px 0;}
#partner .roll_list .slick-list {margin-right:-15px; margin-left:-15px;}
#partner .roll_list figure {position:relative; aspect-ratio:235/100; margin:0 15px;}
#partner .roll_list figure img {display:block; width:100%; height:100%; object-fit:cover;}

#partner .slick-arrow {top:50%; transform:translateY(-50%); z-index:10;}
#partner .slick-prev {left:-30px;}
#partner .slick-next {right:-30px;}



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

/* 화살표 */
#visual .slick-prev {right:calc(3% + 45px); margin-right:0;}
#visual .slick-next {right:calc(3% + 5px); margin-right:0;}

/* 도트 */
#visual .slick-dots {right: calc(3% + 90px); margin-right:0;}

}


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


/*** css 공통 ***/


/*** PARTNER ***/
#partner .slick-prev {left:0;}
#partner .slick-next {right:0;}

}


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

/*** NOTICE ***/
#visual .noticeWrap dl {height:60px; padding:0 30px;}
#visual .noticeWrap .notice_roll {height:60px;}


/*** PRODUCT ***/
#product .product_list .swiper-slide {width:320px; margin:0 10px;}

}


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


/*** Visual ***/
#visual {height:650px;}
#visual .visual_in .roll {height:650px;}
#visual .visual_in .roll .v_txt{top:60%; margin-top:-80px;}
#visual .visual_in .roll .v_txt .fs18 {padding:20px 0 0 0;}

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

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

/*** NOTICE ***/
#visual .noticeWrap {bottom:20px; }
#visual .noticeWrap dl {}
#visual .noticeWrap dl dt {padding-right:20px; width:132px;}
#visual .noticeWrap dl dt::before {font-size:18px; margin-right:4px;}
#visual .noticeWrap dl dt::after {height:10px;}
#visual .noticeWrap dl dd {padding-left:20px; width:calc(100% - 152px);}
#visual .noticeWrap dl dd .swiper-slide p {width:calc(100% - 95px);}
#visual .noticeWrap dl dd .swiper-slide span {width:85px; font-size:11px;}
#visual .noticeWrap dl dd .swiper-slide span::before {font-size:16px;}


/*** PRODUCT ***/
#product .product_list {width:99%; margin-right:auto; margin-left:auto;}
#product .product_list .swiper-slide {margin:0 10px;}
#product .product_list .swiper-slide dl dd {padding:20px 30px;}

.swiper_navi {max-width:450px; min-height:50px; margin-top:50px;}
.swiper_navi .page span.bar {width:160px}
.swiper_navi .page span:not(.bar) {font-size:13px;}

.swiper_btn {width:50px;}
.swiper_btn::before {font-size:28px;}


/*** PARTNER ***/
#partner {padding:30px 0 0 0;}
#partner .global .tbox {width:80%;}
#partner .global .tbox {padding-bottom:50px;}

#partner .partner_roll {padding:20px 0;}
#partner .roll_list .slick-list {margin-right:-10px; margin-left:-10px;}
#partner .roll_list figure {margin:0 10px;}

}


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

/*** css 공통 ***/
.tbox .fs18 {padding:15px 0 0;}


/*** Visual ***/
#visual {height:500px;}
#visual .visual_in .roll {height:500px;}
#visual .visual_in .roll .v_bg .pc {display:none;}
#visual .visual_in .roll .v_bg .mo {display:block;}
#visual .visual_in .roll .v_txt {margin-top:-70px;}
#visual .visual_in .roll .v_txt .fs18 {padding:15px 0 0 0;}

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

/* 도트 */
#visual .slick-dots {bottom:90px;}
#visual .slick-dots li {margin:0 10px 0 0;}
#visual .slick-dots li button {font-size:14px;}

/*** NOTICE ***/
#visual .noticeWrap {bottom:15px;}
#visual .noticeWrap dl {padding:0 20px; height:45px;}
#visual .noticeWrap dl dt {padding-right:10px; width:115px;}
#visual .noticeWrap dl dt::before {font-size:16px; margin-right:4px;}
#visual .noticeWrap dl dd {padding-left:10px; width:calc(100% - 132px);}
#visual .noticeWrap .notice_roll {height:45px;}
#visual .noticeWrap dl dd .swiper-slide p {width:calc(100% - 85px);}
#visual .noticeWrap dl dd .swiper-slide span::before {font-size:14px;}


/*** PRODUCT ***/
#product .product_list .swiper-slide {margin:0 5px;}
#product .product_list .swiper-slide dl dd {padding:20px;}
#product .product_list .swiper-slide figure a::after {width:50px; height:50px; font-size:20px;}
#product .product_list .swiper-slide-prev dl dt, #product .product_list .swiper-slide-prev dl dd, 
#product .product_list .swiper-slide-next dl dt, #product .product_list .swiper-slide-next dl dd {opacity:0.5; filter: grayscale(1);} 
#product .product_list .swiper-slide dl dt img {border-radius:5px 5px 0 0; }


.swiper_navi {min-height:40px; margin-top:40px;}
.swiper_navi .page span.bar {width:120px}

.swiper_btn {width:40px;}
.swiper_btn::before {font-size:24px;}


/*** PARTNER ***/
#partner {padding:30px 0 0 0;}
#partner .global {flex-wrap:wrap;}
#partner .global .bg {position:relative; order:1; right:auto; bottom:auto; width:100%; aspert-ratio:1560/1015;}
#partner .global .global_in {order:2; width:94%; position:relative; left:auto; top:auto; transform:translate(0,0);}
#partner .global .tbox {width:100%; padding-bottom:30px;}

#partner .partner_roll {padding:30px 0 15px 0;}
#partner .roll_list .slick-list {margin-right:-5px; margin-left:-5px;}
#partner .roll_list figure {margin:0 5px;}

}


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

/*** Visual ***/

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

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


/*** NOTICE ***/
#visual .noticeWrap dl {padding:10px 15px; height:auto; flex-wrap:wrap;}  
#visual .noticeWrap dl dt {padding-right:0; width:100%; margin-bottom:5px;}
#visual .noticeWrap dl dt::before {font-size:16px; margin-right:4px;}
#visual .noticeWrap dl dt::after {display:none;}
#visual .noticeWrap dl dd {padding-left:0; width:100%; height:30px; border:1px solid transparent; overflow:hidden;}
#visual .noticeWrap .notice_roll {height:30px;}

}