@import url("common.css");


/*** css 공통 ***/
/* 텍스트 */
.title {font-size:1.66rem; font-weight: 700; line-height: 110%; /* 33px */ text-transform: uppercase; color:var(--black);}
.title a {font-weight:inherit; line-height:inherit; color:inherit; text-transform:inherit;}
.stxt {letter-spacing: -1.26px; margin:7px 0 40px;}
.stxt.eng.ls0 {color:rgba(1,1,1,0.5);}

/* 버튼 */
.nowBtn {position:relative; z-index:10; width:175px; height:50px; display:block; text-align:center; border:1px solid rgba(0,0,0,0.5); box-sizing:border-box; line-height:48px; color:var(--black); transition:all 0.5s ease; letter-spacing: 0.15px; text-transform: uppercase; font-size:0.833rem; margin:26px 0 0;}
.nowBtn::after {content:''; width:0; height:100%; background:var(--white); position:absolute; top:0; left:0; opacity:0; transition:all 0.5s ease; z-index:-1;}
.nowBtn:hover {border:1px solid var(--white); color:var(--black); transition:all 0.5s ease;}
.nowBtn:hover::after {width:100%; opacity:1; transition:all 0.5s ease;}


/* 화살표 */
.slick-arrow {border:0; padding:0; font-size:0; outline:none; cursor:pointer; width:38px; height:38px; transition:all .4s ease; position: absolute; top:-83px; right:5%; z-index: 90; border:1px solid var(--border); border-radius:100%; transition:all 0.4s ease;}
.slick-arrow:hover {border:1px solid rgba(1,1,1,0.5); transition:all 0.4s ease;}
.slick-prev {background:url('../image/icons/prevArrow.svg') no-repeat center; right:calc(5% + 43px);}
.slick-next {background:url('../image/icons/nextArrow.svg') no-repeat center;}


.jarallax {position: relative; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.jarallax iframe{position:absolute; }

/* Visual */
#visual {position: relative; width:100%; height:var(--vh); background:var(--black); overflow:hidden;}
#visual .swiper-slide {position:relative; }
/* #visual .swiper-slide::after {content:''; width:100%; height:100%; position:absolute; top:0; left:0; opacity:0.2; background:var(--black);} */

#visual .swiper-container{height:100%;}

.swiper , .swiper-wrapper{width: 100%; height: 100%;}
.swiper-slide {width: 100%; height: 100%; overflow:hidden; }
#visual .swiper-wrapper{width: 100%; height: 100%;}
#visual .swiper-wrapper .img{position: absolute; left: 0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-size:cover; background-position:center; 
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
transition-delay: 0.8s;
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);}

#visual .swiper-wrapper .txt {position: absolute; z-index:10; left: 5%; top:50%; transform: translateY(-50%);  width:90%; }
/* #visual .swiper-wrapper .txt span {position:absolute; bottom:-60px; right:0;} */
#visual .swiper-wrapper .txt .main-visual-txt1 {font-size:46px; font-weight:600; letter-spacing:-0.02em; line-height: 160%; color: var(--black); position:relative; top:60px; opacity: 0; transition:all 1s linear;}
#visual .swiper-wrapper .txt h2 {font-size:40px; color:var(--white); line-height: 130%; font-weight:700; position:relative; top:60px; opacity: 0; transition:all 1s linear;}
#visual .swiper-wrapper .txt .btn {position:relative; top:60px; opacity: 0; transition:all 1s linear;}

#visual .swiper-wrapper .action .img {transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
#visual .swiper-wrapper .action .txt .main-visual-txt1{opacity: 1; top:0; transition:all 1s linear; transition-delay:0.4s; }
#visual .swiper-wrapper .action .txt h2{opacity: 1; top:0; transition:all 1s linear; transition-delay:0.4s; }
#visual .swiper-wrapper .action .txt .btn {opacity: 1; top:0; transition:all 1s linear; transition-delay:0.6s; }

#visual .swiper-pagination{position:absolute; left:5%; bottom:65px;}
#visual .swiper-pagination .swiper-pagination-bullet{width:10px; height:10px; border:1px solid rgba(0,0,0,0.5); opacity:1; margin:0 10px 0 0; box-sizing:Border-box; background:transparent;}
#visual .swiper-pagination .swiper-pagination-bullet-active{border:1px solid var(--black); background:var(--black);}


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






#products {overflow:hidden;}
#products .tit_wrap {padding-right:90px; box-sizing:border-box;}
.tab-list .list {display:flex; flex-wrap:wrap; margin:15px 0 40px; }
.tab-list .list li {margin-right: 37px; position:relative;  display:block; }
.tab-list .list li::after {content:''; width:1px; height:10px; background:var(--black); opacity:0.2; position:absolute; right:-19px; top:50%; transform:translateY(-50%);}
.tab-list .list li:last-of-type::after {display:none;}
.tab-list .list li:hover {opacity:1; transition:all 0.4s ease;}
.tab-list .list li button {border: 0; padding: 0; background: transparent;line-height:214.286%; letter-spacing: 0.14px; text-transform: uppercase; opacity:0.5; color:var(--black); transition:all 0.4s ease; font-size:0.77rem; cursor:pointer;}
.tab-list .list li.is-active button {font-weight: 700; text-decoration:underline; opacity:1; text-underline-offset:2px;}

#products .tab-content .tab-content-item {display: none; border-top:1px solid var(--border); border-bottom:1px solid var(--border);z-index:-1;}
#products .tab-content .tab-content-item.is-active {display: block;position:relative;z-index:1;}
#products .tab-content .tab-content-item dl {border-left:1px solid #d9d9d9; border-right:1px solid #d9d9d9; margin-left:-1px;}
#products .tab-content .tab-content-item dl dt {overflow:hidden; position:relative;}
#products .tab-content .tab-content-item dl dt .one {position:relative; z-index:1;}
#products .tab-content .tab-content-item dl dt .two {position:absolute; top:0; left:0; background:var(--white); opacity:0; visibility:hidden; z-index:10; transition:all 0.3s ease; width:100%; height:100%;}
#products .tab-content .tab-content-item dl dt .one {position:relative; z-index:1;}
#products .tab-content .tab-content-item dl dt img {width:100%; background-repeat:no-repeat; background-position:Center; background-size:contain; transition:all 0.5s ease;}
#products .tab-content .tab-content-item dl dd {padding:38px 50px; box-sizing:Border-box;}
#products .tab-content .tab-content-item dl dd p {letter-spacing: 0.14px; text-transform: uppercase; font-size:0.777rem; line-height:214%;}
#products .tab-content .tab-content-item dl dd h4 {font-size:1.11rem; font-weight: 800; line-height: 115%; /* 23px */ text-transform: uppercase; color:var(--black);}
#products .tab-content .tab-content-item dl:hover .two {opacity:1; visibility:visible; transition:all 0.3s ease;}

#products .tab-content .tab-content-item2 {display: none; border-top:1px solid var(--border); border-bottom:1px solid var(--border);z-index:-1;}
#products .tab-content .tab-content-item2.is-active {display: block;position:relative;z-index:1;}
#products .tab-content .tab-content-item2 dl {border-left:1px solid #d9d9d9; border-right:1px solid #d9d9d9; margin-left:-1px;}
#products .tab-content .tab-content-item2 dl dt {overflow:hidden; position:relative;}
#products .tab-content .tab-content-item2 dl dt .one {position:relative; z-index:1;}
#products .tab-content .tab-content-item2 dl dt .two {position:absolute; top:0; left:0; background:var(--white); opacity:0; visibility:hidden; z-index:10; transition:all 0.3s ease; width:100%; height:100%;}
#products .tab-content .tab-content-item2 dl dt .one {position:relative; z-index:1;}
#products .tab-content .tab-content-item2 dl dt img {width:100%; background-repeat:no-repeat; background-position:Center; background-size:contain; transition:all 0.5s ease;}
#products .tab-content .tab-content-item2 dl dd {padding:38px 50px; box-sizing:Border-box;}
#products .tab-content .tab-content-item2 dl dd p {letter-spacing: 0.14px; text-transform: uppercase; font-size:0.777rem; line-height:214%;}
#products .tab-content .tab-content-item2 dl dd h4 {font-size:1.11rem; font-weight: 800; line-height: 115%; /* 23px */ text-transform: uppercase; color:var(--black);}
#products .tab-content .tab-content-item2 dl:hover .two {opacity:1; visibility:visible; transition:all 0.3s ease;}



.news_list {}
.news_list dl {border:1px solid #d9d9d9; margin-left:-1px;}
.news_list dl dt {overflow:hidden; position:relative;}
.news_list dl dt .one {position:relative; z-index:1;}
.news_list dl dt .two {position:absolute; top:0; left:0; /* background:var(--white); */ opacity:0; visibility:hidden; z-index:10; transition:all 0.3s ease; width:100%; height:100%;}
.news_list dl dt img {width:100%; background-repeat:no-repeat; background-position:Center; background-size:cover; transition:all 0.5s ease;}
.news_list dl dd {padding:35px 40px; box-sizing:border-box;}
.news_list dl dd ul {display:flex; flex-wrap:wrap;}
.news_list dl dd ul li {margin-right:20px; letter-spacing: 0.14px; text-transform: uppercase;}
.news_list dl dd ul li:last-of-type {margin-right:0; color:rgba(1,1,1,0.4);}
.news_list dl dd h4 {letter-spacing: -0.8px; color:var(--black); font-weight:700; font-size:1.11rem; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;}
/* .news_list dl:hover img {opacity:0.8; transform:scale(1.07); transition:all 0.5s ease;} */
.news_list dl:hover .two {opacity:1; visibility:visible; transition:all 0.3s ease;}


#showroom {}
#showroom .tab_list li {letter-spacing:-0.6pt;}
.showroom_list {/* margin-left:-10px; */}
.showroom_list li {/* margin-left:10px;  background:var(--black); overflow:hidden; position:relative; */ margin-left:-10px;}
.showroom_list li a {margin-left:10px; transition:all 0s; overflow:hidden;}
.showroom_list li span {display:block; width:100%;}
.showroom_list li img {width:100%; background-repeat:no-repeat; background-position:Center; background-size:cover; transition:all 0.5s ease;}
.showroom_list li h4 {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; padding:0 15px; box-sizing:border-box; color:var(--white); letter-spacing:-0.7pt; font-size:1.44rem; text-align:center; font-weight:800; opacity:0; visibility:hidden; transition:all 0.5s ease; display:none;}
.showroom_list li a:hover img {/* opacity:0.4;  */transform:scale(1.07); transition:all 0.5s ease;}
/* .showroom_list li:hover h4 {opacity:1; visibility:visible; transition:all 0.5s ease;} */


.instagram_list {display:flex; flex-wrap:wrap; margin:40px 0 0; margin-left:-10px;}
.instagram_list li {/* width:calc((100% - 50px) / 6);  */margin-left:10px;  overflow:hidden; position:relative;}
.instagram_list li div {/* background:var(--white);  */display:block; overflow:hidden;}
.instagram_list li .one {position:relative; z-index:1;}
.instagram_list li .two {position:absolute; top:0; left:0; /* background:var(--white);  */opacity:0; visibility:hidden; z-index:10; transition:all 0.3s ease; width:100%; height:100%;}
.instagram_list li img {width:100%; background-repeat:no-repeat; background-position:Center; background-size:cover; transition:all 0.5s ease;}
/* .instagram_list li:nth-child(6n) {margin-right:0;}
.instagram_list li:nth-child(-n+6) {margin-bottom:10px;} */
/* .instagram_list li:hover img {opacity:0.8; transform:scale(1.07); transition:all 0.5s ease;} */
.instagram_list li:hover .one {/* opacity:0; visibility:hidden; */ transition:all 0.3s ease;}
.instagram_list li:hover .two {opacity:1; visibility:visible; transition:all 0.3s ease;}






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


#visual .swiper-wrapper .txt span img {max-height:80px; max-width:150px;}


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





}

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

/*** css 공통 ***/
/* 텍스트 */


/* 버튼 */
.nowBtn {width:140px; height:44px; line-height:42px;}


/* 화살표 */


#visual .swiper-wrapper .action .txt h2 {font-size:30px;}



#products .tab-content .tab-content-item dl dd {padding:25px 30px;}

#products .tab-content .tab-content-item2 dl dd {padding:25px 30px;}

.news_list dl dd {padding:25px 30px;}


/* .instagram_list li {width:calc((100% - 20px) / 3);}
.instagram_list li:nth-child(-n+8) {margin-bottom:10px;}
.instagram_list li:nth-child(6n) {margin-right:10px;}
.instagram_list li:nth-child(3n) {margin-right:0px;} */


.showroom_list li h4 {font-size:1.3rem;}


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

/*** css 공통 ***/
/* 텍스트 */
.title {font-size:1.3rem;}
.stxt {margin:10px 0 50px;}

/* 버튼 */
.nowBtn {width:120px; height:38px; line-height:38px;}

/* 화살표 */
.slick-arrow {width:30px; height:30px; top:-40px; background-size:6px !important;}
.slick-prev {right:calc(5% + 34px);}



/*** Visual ***/
#visual .swiper-wrapper .txt {bottom:80px;}
#visual .swiper-wrapper .action .txt h2 {font-size:24px;}
#visual .swiper-wrapper .txt span {display:block; position:relative; bottom:0; right:0; margin-bottom:25px; position:relative; top:60px; opacity: 0; transition:all 1s linear;}
#visual .swiper-wrapper .action .txt span {opacity: 1; top:0; transition:all 1s linear; transition-delay:0s; }
#visual .swiper-wrapper .txt span img {max-height:50px; max-width:100px;}
#visual .swiper-pagination {bottom:40px;}
#visual .swiper-pagination .swiper-pagination-bullet {width:8px; height:8px; margin:0 8px 0 0;}


#products .tit_wrap {padding-right:0;}
.tab-list .list {margin:10px 0 60px;}
.tab-list .list li {margin-right:20px;font-size:1rem;}
.tab-list .list li::after {right:-11px;}

#products .tab-content .tab-content-item dl dd {padding:15px;}
#products .tab-content .tab-content-item dl dd p {margin:0 0 3px;}

#products .tab-content .tab-content-item2 dl dd {padding:15px;}
#products .tab-content .tab-content-item2 dl dd p {margin:0 0 3px;}

.instagram_list {margin:25px 0 0;}

.showroom_list li h4 {font-size:1.2rem;}

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


.news_list dl dd ul li {margin-right:15px;}
.news_list dl dd h4 {margin:5px 0 0;}


/* .instagram_list li {width:calc((100% - 20px) / 3);}
.instagram_list li:nth-child(-n+9) {margin-bottom:10px;}
.instagram_list li:nth-child(6n) {margin-right:10px;}
.instagram_list li:nth-child(4n) {margin-right:10px;}
.instagram_list li:nth-child(3n) {margin-right:0px;} */



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




}