/* BASIC css start */
.swiper-button-next, .swiper-button-prev {top:33% !important;}
.newIcon{
    display: inline-block;
    width: 10px;
    position: absolute;
    top: 3px;
    margin-left: 4px;
}

.mainBanSwiper .swiper-button-next, .mainBanSwiper .swiper-button-prev {top:45% !important;}

.swiper:hover .swiper-button-next,.swiper:hover .swiper-button-prev{opacity:1}
.swiper .swiper-button-next, .swiper .swiper-button-prev{color:#fff !important;opacity:0.3;}
#tabtop {height:93px}
#header .gnbWrap { background:rgba(255,255,255,0.7); position:relative;height:52px;}
#header .gnbWrap.fix {height:52px; -webkit-transition:background-color 0.4s; transition:background-color 0.4s }
.content{padding-top:50px;}
/* 롤링배너 */
.main {}
.mainBanSwiper .swiper-pagination-fraction{width:75px;height:40px;line-height:40px;border-radius:20px;;right:25px;bottom:50px;left:auto;color:#fff;;background-color:rgba(0,0,0,0.5); font-size:15px; }
.mainBanSwiper{width:1300px;overflow:visible !important;padding:0 0 30px !important;}
.mainBanSwiper img {width:100%;}
.themaBotSwiper .swiper-pagination-fraction{width:75px;height:40px;line-height:40px;border-radius:20px;;right:25px; bottom:220px;left:auto;color:#fff;;background-color:rgba(0,0,0,0.5); font-size:15px;}
.themaBotSwiper {width:1300px;overflow:visible !important;padding:0 0 30px !important;}
.themaBotSwiper img {width:100%;}
.swiper {}
/*리스트*/
.listTab{width:1300px; margin:0 auto; }
.listTab ul {display:inline-block;width:100%;display:flex; justify-content:center; max-width: 1300px;margin: 0 auto;line-height:52px; height: 52px;-webkit-transition:transform 2s; transition:transform 2s}
.listTab li a {font-size:20px; font-family:'NanumSquare';}
.listTab li.active{border-bottom:2px solid #000;}
.listTab{}
.listTab li{position:relative;float:left;    width: calc(15%); margin: 0 60px;text-align:center; padding:0 5px;font-size:16px;font-weight:800;}
.listTab.fixed{position:fixed;width: 100%;
    top: 70px;z-index:10; display:flex; justify-content:center;background-color:rgba(255,255,255,0.8);  }  
.listTab.fixed ul{}

.listTabBest{ }
.listTabBest ul {display:inline-block;width:100%; display:flex; justify-content:center; max-width: 1300px;margin: 0 auto;line-height:52px; height: 52px;-webkit-transition:transform 2s; transition:transform 2s}
.listTabBest li a {font-size:20px;}
.listTabBest li.active{border-bottom:2px solid #000;}
.listTabBest{}
.listTabBest li{position:relative;float:left;    width: calc(10% - 40px);
    margin: 0 108px;text-align:center; padding:0 5px;font-size:16px;font-weight:800;}
.listTabBest.fixed{position:fixed;width: 100%;
    top: 93px;z-index:10; display:flex; justify-content:center; background-color:rgba(255,255,255,0.8);}  
.listTabBest.fixed ul{}


/* 키워드 영역 */
.keywordWrap{margin:0 auto; width:1300px; padding:150px 0;}
.keywordTitle{font-size:18px;font-weight:800; margin:0px 0px 15px 0px; color:#000}
.keywordSubtitle {font-size:15px;}
.keywordBox{display:inline-block;font-size:26px;margin:10px 20px 10px 0px;padding:10px;box-shadow:5px 5px 4px #ddd;}
.keywordBox.YW{background-color:#f1ef40;}
.keywordBox.PK{background-color:#fb7b9c; color:#fff;}
.keywordBox.BL{background-color:#b0dce5;}
.keywordBox.BK{background-color:#494949; color:#fff;}

/*상품 영역*/
.productInfoWrap {width:1300px; margin:0 auto}
.productWrap{overflow:hidden;}
.productText{float:left; padding-left:40px;}
.productTitle{display:block;font-size:50px;font-weight:800; color:#000; padding:80px 0px 40px 0px; }
.productDesc{display:inline-block;font-size:40px;margin-top:10px; color:#000}
.productWrapTop{height:640px;padding:0px 10px 0 15px;background-color:#d6d5d5; margin-top:190px; }
.productWrapTop.mood{background-color:#585d80 !important; margin-top:0;}
.productWrapTop.hair{background-color:#f8e059 !important; margin-top:0;}
.productImg{float:right;width:535px; padding-top:50px; padding-right:53px; }


/* 롤링상품 */
 .mainSwiper {position:relative;top:-200px;  width:1300px; margin:0 auto;}
 .mainSwiper .swiper-slide { margin: 0; width:46% }
 .mainSwiper .swiper-slide figure {margin:0 0px 0px 0px;}
 .mainSwiper .swiper-slide .listPic { position:relative; }
 .mainSwiper .swiper-slide .listPic img { width:100% }
 .mainSwiper .swiper-slide .listPic .productHeart{width:26px;top: 91%;
    position: absolute;
    left: 88%;}
 .best-containe {
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
      }
 .mainSwiper .swiper-slide {
        height: calc((100% - 30px) / 2);
      }
 .mainSwiper .swiper-slide .list_shoppingInfo {display: grid;  background-color:#fff;box-shadow : 2px 2px 5px #eee; text-align:center; margin:0;min-height: 250px;width: 100%;flex-direction: column; height:250px; 
    justify-content: center; padding:30px 2px 15px; box-sizing:border-box;}
 .mainSwiper .swiper-pagination-fraction {
    top:-100px;    
    height: 10px;
    width: auto;
    left: 40px !important;
    text-align: left;
}
.prdColor{text-shadow:2px 2px 2px #eee;}
.swiper-pagination-fraction .swiper-pagination-bullet {width:5px !important;height:5px !important;background: #fff;
    border: 2px solid;}
.swiper-pagination-fraction .swiper-pagination-bullet-active { background:#000; width:5px;height:5px;}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{width:5px !important;height:5px !important;
    border: 1.5px solid; margin-right:0 !important;}
 .mainSwiper.swiper-grid-column>.swiper-wrapper{flex-direction:row !important;align-items: baseline;}
 .mainSwiper .listPrice del {  }
.swiperDesc{padding:30px 20px;box-shadow:1px 1px 5px #d9d9d9; height:110px; display:flex; align-items:flex-start; flex-direction:column;  }

.swiperDesc div{ text-align:left; }
.swiperDesc img.logoEn {display:block; object-fit:contain; object-position:left;margin-bottom:15px; height:19px}
.swiperDesc img.logoKr {display:block; object-fit:contain; object-position:left;margin-bottom:15px; height:25px}
.swiperDesc p {font-size:15px;}

 
.swiper-button-next:after,.swiper-button-prev:after {  color:#fff }
.swiper-button-prev { left:20px !important}
.swiper-button-next { right:20px !important}
.rollringnext {right:20px !important}
.rollringprev {left:20px !important}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {width: 45% !important; line-height: 15px !important;}


.eventWrap {margin:50px 0; text-align:center;}
.eventWrap2 {height:1000px;}

.eventWrap2_1 {width:43.8%; box-shadow:2px 2px 2px 2px #d9d9d9; padding:35px; float:left; margin-right:20px; margin-top:20px;   }
.eventWrap2_1 p {font-size:20px; font-weight:bold; color:#000; padding:10px 0px 35px; }
.eventWrap2_1 img {width:100%; }

.eventWrap2_2 {width:43.8%; box-shadow:2px 2px 2px 2px #d9d9d9; padding:35px; float:left; margin-top:20px;   }
.eventWrap2_2 p {font-size:20px; font-weight:bold; color:#000; padding:10px 0px 35px; }
.eventWrap2_2 img {width:100%; }

.eventWrap.pd0{padding:0px !important; clear:both;}
.eventWrap.pd0 p{margin-left:20px; font-size:27px; font-weight:bold; color:#000; width:1300px; margin:0 auto; padding:100px 0px 25px 0px; text-align:left;}


.event_info ul li, .event_info ul li a{font-size:17px; line-height:1.25; }
.instarLogo {float:right; width:245px; }
.naverLogo {float:right; width:178px; }
#tabtop{height:93px;}
#header .gnbWrap { background:rgba(255,255,255,0.7); position:relative;height:52px;}
#header .gnbWrap.fix {height:52px; -webkit-transition:background-color 0.4s; transition:background-color 0.4s }
.newIcon{
    display: inline-block;
    width: 10px;
    position: absolute;
    top: 3px;
    margin-left: 4px;
}


.content .eventWrap{ }
.content .eventWrap p {font-size:20px; font-weight:bold; }

/* 롤링배너 */
.mainBanSwiper .swiper-pagination-fraction{width:75px;height:40px;line-height:40px;border-radius:20px;;right:25px;bottom:50px;left:auto;color:#fff;;background-color:rgba(0,0,0,0.5); }
.mainBanSwiper{width:1300px;overflow:visible !important;padding:0 0 30px !important;  margin-bottom:110px; }
.mainBanSwiper img {width:100%;}


.swiper:hover .swiper-button-next,.swiper:hover .swiper-button-prev{opacity:1}
.swiper .swiper-button-next, .swiper .swiper-button-prev{color:#fff !important;opacity:0.3;}

.swiper-button-next:after,.swiper-button-prev:after {  color:#fff }
.swiper-button-prev { left:20px !important}
.swiper-button-next { right:20px !important}


swiper p {font-size: 18px; font-weight: 800; margin: 0px 0px 15px 0px; color: #000; }
/* BASIC css end */