@charset "UTF-8";

/*** CSS Style 사용자 전용                                                    ***/
/*** 디자인통에서 제공하는 스킨 패치시 임의 파일에 기술한 내용은 삭제 되며,     ***/
/*** 해당 문서의 내용은 삭제 되지 않습니다.                                    ***/



/** 레이아웃 **/
.body-main.body-index #wrap #container #contents .sub_content { padding: 0px 0 0 0; }


/*** 메인배너  ***/
.mainBanner-wrap { overflow: hidden; }
#mainBanner { width: calc(100% - 200px); max-width: 705px; margin: 0 auto; padding: 0; }
#mainBanner > ul { overflow: visible; }
#mainBanner > ul .slick-list { overflow: visible; }
#mainBanner > ul li { padding: 0 12px; }
#mainBanner > ul li img { transform: scale(1); border-radius: 30px; transition-duration: 0.5s; filter: blur(0); }
#mainBanner > ul li.slick-center img { transform: scale(1); filter: blur(0); }
#mainBanner .slick-dots { left: auto; right: 125px; bottom: 60px; width: auto; }
#mainBanner .slick-dots li { display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; width: 60px !important; height: 30px; border-radius: 15px; background-color: rgba(255, 255, 255, 0.6) !important; color: #333; font-family: 'Pretendard'; font-size: 13px; opacity: 0; visibility: hidden; }
#mainBanner .slick-dots li.slick-active { opacity: 1; visibility: visible; }
#mainBanner .slick-dots li strong { margin-right: 5px; }
#mainBanner .control { display: none; max-width: none; width: 1528px; left: calc(50% - 764px); }
#mainBanner .control .slick-arrow { background: none; border-radius: 0px; width: 36px; height: 68px; top:-34px; }
#mainBanner .control .slick-arrow:hover { background: none; }
#mainBanner .control .slick-arrow.prev { left: 0px; background-image: url(../../img/main/main_banner_arrow_left.png);}
#mainBanner .control .slick-arrow.next { right: 0px; background-image: url(../../img/main/main_banner_arrow_right.png);}

.mobile .mainBanner-wrap { width: calc(100% + 20px); margin-left: -10px; }
.mobile #mainBanner { left: 0; width: 100%; max-width: none; margin: 0; padding: 0; }
.mobile #mainBanner > ul li { padding: 0; }
.mobile #mainBanner > ul li img { transform: scale(1); filter: blur(0); width: 100%;  margin: 0 ; border-radius: 0px; }
.mobile #mainBanner .slick-dots { bottom: 40px; right: 90px; }


/*** 카테고리 배너 **/
#categoryBanner { position: relative; margin: 70px 0; }
#categoryBanner ul li a { display: flex; flex-direction: column; justify-content: center; align-items: center; }
#categoryBanner ul li a::after { content: attr(data-title); display: block; font-size: 17px; color: #000; margin-top: 10px; transition-duration: 0.5s; }
#categoryBanner ul li a:hover::after { color: #0068b3; }
#categoryBanner ul.swiper-grid { height: 92.5px; }
#categoryBanner ul.swiper-grid li { margin: 0; }
#categoryBanner .control .arrow { position: absolute; top: 0; width: 40px; height: 60px; padding: 0; background-repeat: no-repeat; background-position: center; background-size: 15px; border-radius: 5px; cursor: pointer; opacity: 0; visibility: hidden; transition-duration: 0.5s; }
#categoryBanner .control .arrow:hover { background-color: rgba(255, 255, 255, 0.4); }
#categoryBanner .control .arrow.prev { left: 30px; background-image: url("../../img/main/category_arrow_left.png"); }
#categoryBanner .control .arrow.next { right: 30px; background-image: url("../../img/main/category_arrow_right.png"); }
#categoryBanner .control .arrow img { max-width: 100%; }
#categoryBanner:hover .control .arrow { opacity: 1; visibility: visible; }
#categoryBanner:hover .control .arrow.prev { left: -30px; }
#categoryBanner:hover .control .arrow.next { right: -30px; }

.mobile #categoryBanner { margin: 25px 0; }
.mobile #categoryBanner ul.swiper-grid { height: 160px; }
.mobile #categoryBanner ul.swiper-grid li { height: calc((100% - 30px) / 2) !important; margin: 10px 0; }
.mobile #categoryBanner ul li a::after { font-size: 13px; }
.mobile #categoryBanner ul li img { max-width: 40px; }
.mobile #categoryBanner .control { display: none; }


/*** 베스트 상품 ***/
#bestSeller .commonWrap .goods_list .goods_list_tit { text-align: left;}
#bestSeller .commonWrap .goods_list .goods_list_tit h3 { font-size: 42px; font-weight: 300; color: #000;  }
#bestSeller .commonWrap .goods_list .goods_list_tit h3 strong { font-weight: 600; }
#bestSeller .commonWrap .goods_list .goods_list_cont .item_hl_tab_type .goods_tab_tit { position: relative; }
#bestSeller .commonWrap .goods_list .goods_list_cont .item_hl_tab_type .goods_tab_tit ul { width: auto; margin-top: 25px; border: none; background-color: #f9f9f9; padding: 4px 0 4px 7px; }
#bestSeller .commonWrap .goods_list .goods_list_cont .item_hl_tab_type .goods_tab_tit ul li { display: flex; align-items:center; justify-content:center; border: none; background-color: transparent; width:160px !important; height: 58px; border-radius: 30px;  }
#bestSeller .commonWrap .goods_list .goods_list_cont .item_hl_tab_type .goods_tab_tit ul li a { font-size: 16px; color: #7e7e7e;  }
#bestSeller .commonWrap .goods_list .goods_list_cont .item_hl_tab_type .goods_tab_tit ul li.on { background-color: #0068b3; }
#bestSeller .commonWrap .goods_list .goods_list_cont .item_hl_tab_type .goods_tab_tit ul li.on a { background-color: transparent; color: #fff; }
#bestSeller .commonWrap .goods_list .goods_list_cont .item_hl_tab_type .goods_tab_tit ul li.on a::after { border: none; animation: none;}
#bestSeller .commonWrap .goods_list .goods_list_cont .item_hl_tab_type .goods_tab_tit ul li.on a::before { border: none; animation: none;}
#bestSeller .commonWrap .goods_list .goods_list_cont .item_hl_tab_type .goods_tab_tit .more { position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); font-size: 16px; color: #7e7e7e; }
#bestSeller .commonWrap .goods_list .goods_list_cont .goods_tab_cont .goods_tab_box { display: none; }
#bestSeller .commonWrap .goods_list .goods_list_cont .goods_tab_cont .goods_tab_box.on { display: block; }
#bestSeller .goods_list ul li .item_cont .item_photo_box,
#bestSeller .goods_list ul li .item_cont .item_info_cont { border: none; margin: 15px 0 0; }
#bestSeller .goods_list ul li .item_cont .item_photo_box .rank { display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; width: 33px; height: 33px; font-size: 20px; color: #fff; background-color: #7e7e7e; 
}
#bestSeller .goods_list ul li .item_cont .item_photo_box .rank.best { background-color: #0068b3; }

.mobile #bestSeller .commonWrap .goods_list ul { margin-top: 0; white-space: nowrap; overflow-x: auto; }
.mobile #bestSeller .commonWrap .goods_list .goods_tab_box ul { width: calc(100% + 16px); margin-left: -6px; }
.mobile #bestSeller .commonWrap .goods_list ul li { width: calc(50% - 30px) !important; margin-top: 0; }
.mobile #bestSeller .commonWrap .goods_list .goods_list_tit h3 { position: relative; font-size: calc(42px / 2); }
.mobile #bestSeller .commonWrap .goods_list .goods_list_tit h3::after { content: ''; position: absolute; right: -25px; top: 1px; width: 18px; height: 18px; background: url("../../img/main/m_icon_title_arrow.png") no-repeat center; background-size: 100%; }
.mobile #bestSeller .commonWrap .goods_list .goods_list_tit h4 { font-size: 12px; color: #7e7e7e; font-weight: 400; margin-top: 5px; }
.mobile #bestSeller .commonWrap .goods_list .goods_list_cont .item_hl_tab_type .goods_tab_tit ul { overflow: hidden; margin-top: 15px; }
.mobile #bestSeller .commonWrap .goods_list .goods_list_cont .item_hl_tab_type .goods_tab_tit ul li { width: 33.33% !important; height: 30px; }
.mobile #bestSeller .commonWrap .goods_list .goods_list_cont .item_hl_tab_type .goods_tab_tit ul li a { font-size: 13px; }
.mobile #bestSeller .commonWrap .goods_list .goods_list_cont .item_hl_tab_type .goods_tab_tit .more { right: 0; top: -20px; font-size: 13px; }
.mobile #bestSeller .goods_list ul li .item_cont .item_photo_box .rank { width: calc(33px / 2); height: calc(33px / 2); font-size: calc(20px / 2); }


/*** 중간배너 1 ***/
#slideMiddleBanner { margin-top:100px; margin-right: 0px; width: 100%; }
#slideMiddleBanner .control { width: 1350px; left:25px; }
#slideMiddleBanner .control .slick-arrow { width: 76px; height: 76px; top: calc(50% - 38px); }
#slideMiddleBanner .control .slick-arrow.prev { background: none; background-image: url("../../img/main/rolling_banner_arrow_left.png"); border-radius: 0; left:0;  }
#slideMiddleBanner .control .slick-arrow.next { background: none; background-image: url("../../img/main/rolling_banner_arrow_right.png"); border-radius: 0; right:0;  }

.mobile #slideMiddleBanner { margin-top: 35px; width: calc(100% + 20px); margin-left: -10px; }


/*** 메인 타임세일 ***/
#mainTimeSale { display: inline-block; width: 100%; background-color: transparent; padding: 0; font-family: 'Pretendard'; }
#mainTimeSale .commonWrap { display: flex; justify-content: space-between; }
#mainTimeSale .timeBoard { width: auto; box-shadow: none; background-color: transparent; margin: 0; }
#mainTimeSale .timeBoard .timeBoardWrap { padding: 0; background-color: transparent; }
#mainTimeSale .timeBoard .timeBoardWrap h3 { padding: 0; font-size: 38px; font-weight: 600; text-align: left; margin-bottom: 40px; }
#mainTimeSale .timeBoard .timeBoardWrap h3 em { display: block; font-size: 23px; font-weight: 300; color: #7e7e7e; line-height: normal; }
#mainTimeSale .timeBoard .timeBoardWrap span { font-size: 38px; font-weight: 600; color: #000; background-color: transparent; padding: 0; }
#mainTimeSale .timeBoard .timeBoardWrap span.icon { background-color: transparent; background-size: 50px; }
#mainTimeSale .timeBoard .timeBoardWrap span.discountRate { display: none; }
#mainTimeSale .timeBoard .timeBoardWrap span.date { display: none; }
#mainTimeSale .timeBoard .timeBoardWrap span.day, #mainTimeSale .timeBoard .timeBoardWrap span.hours { margin: 0; }
#mainTimeSale .timeBoard .timeBoardWrap span.colon { padding: 0; }

.mobile #mainTimeSale { padding: 0; }
.mobile #mainTimeSale .commonWrap { display: block; }
.mobile #mainTimeSale .timeBoard { margin: 0; }
.mobile #mainTimeSale .timeBoard .timeBoardWrap { width: 100%; padding: 0; text-align: left; }
.mobile #mainTimeSale .timeBoard .timeBoardWrap h3 { font-size: calc(38px / 2); margin: 0 0 0 0; }
.mobile #mainTimeSale .timeBoard .timeBoardWrap h3 em { font-size: calc(23px / 2); }
.mobile #mainTimeSale .timeBoard .timeBoardWrap span { padding: 0; min-width: 20px; }
.mobile #mainTimeSale .timeBoard .timeBoardWrap span.icon { padding: 0; background-position: left; }
.mobile #mainTimeSale .timeBoard .timeBoardWrap span.day, .mobile #mainTimeSale .timeBoard .timeBoardWrap span.hours { margin: 0; }
.mobile #mainTimeSale .timeBoard .timeBoardWrap span.colon { padding: 0; }
.mobile #mainTimeSale .goods_list ul li .item_cont .item_photo_box .icon_time_sale { width: calc(115px / 2); height: calc(115px / 2); }


/*** 메인 타임세일 상품리스트 ***/
#mainTimeSaleGoodsList { width: calc(100% - 420px); overflow: hidden; }
#mainTimeSaleGoodsList .goods_list { padding: 0; }
#mainTimeSaleGoodsList .goods_list ul { width: calc(100% + 170px); margin-left: -10px; }
#mainTimeSaleGoodsList .goods_list ul li { margin: 0; }
#mainTimeSaleGoodsList .goods_list ul li .item_cont { padding: 0 10px; }
#mainTimeSaleGoodsList .goods_list ul li .item_cont .progress-bar { position: relative; height: 8px; background-color: #0067b3; }
#mainTimeSaleGoodsList .goods_list ul li .item_cont .progress-bar em { display: flex; justify-content: center; align-items: center; position: absolute; bottom: 15px; right: -15px; width: 100px; height: 35px; border-radius: 5px; background-color: rgba(0, 103, 179, 0.7); color: #fff; font-size: 13px; }
#mainTimeSaleGoodsList .goods_list ul li .item_cont .progress-bar em::after { content: ''; position: absolute; bottom: 0; right: 11px; width: 0; height: 0; border: 5px solid transparent; border-top-color: rgba(0, 103, 179, 0.7); border-bottom: 0; margin-left: 5px; margin-bottom: -5px; }
#mainTimeSaleGoodsList .control { display: flex; justify-content: space-between; align-items: center; position: absolute; left: 20px; bottom: 15px; width: 320px; }
#mainTimeSaleGoodsList .control .left .arrow { display: inline-block; width: 35px; height: 35px; background: no-repeat center; background-size: 100%; cursor: pointer; }
#mainTimeSaleGoodsList .control .left .arrow.prev { background-image: url("../../img/main/icon_timesale_arrow_left.png"); }
#mainTimeSaleGoodsList .control .left .arrow.next { background-image: url("../../img/main/icon_timesale_arrow_right.png"); margin-left: 5px; }
#mainTimeSaleGoodsList .control .right a { position: relative; font-size: 15px; color: #7e7e7e; padding-right: 15px; }
#mainTimeSaleGoodsList .control .right a::after { content: ''; position: absolute; right: 0; top: 1px; width: 7px; height: 14px; background: url("../../img/main/icon_timesale_allview.png") no-repeat center; background-size: 100%; }

.mobile #mainTimeSaleGoodsList { width: 100%; }
.mobile #mainTimeSaleGoodsList .control { display: none; }
.mobile #mainTimeSaleGoodsList .goods_list ul { width: calc(100% + 20px); }
.mobile #mainTimeSaleGoodsList .goods_list ul li .item_cont .item_info_cont .item_tit_box a .item_name { font-size: calc(29px / 2); }
.mobile #mainTimeSaleGoodsList .goods_list ul li .item_cont .item_info_cont .item_money_box .discountRate { font-size: calc(32px / 2); }
.mobile #mainTimeSaleGoodsList .goods_list ul li .item_cont .item_info_cont .item_money_box .item_price span { font-size: calc(32px / 2); }


/*** 새로 나왔어요 **/
#newArrivals .commonWrap .goods_list .goods_list_tit { text-align: left; }
#newArrivals .commonWrap .goods_list .goods_list_tit h3 { font-size: 42px; font-weight: 300; color: #000;  }
#newArrivals .commonWrap .goods_list .goods_list_tit h3 strong { font-weight: 600; }
#newArrivals .commonWrap .goods_list .goods_list_tit h3 img { margin-left: 10px; }

.mobile #newArrivals .commonWrap .goods_list .goods_list_tit h3 { position: relative; font-size: calc(42px / 2); }
.mobile #newArrivals .commonWrap .goods_list .goods_list_tit h3::after { content: ''; position: absolute; right: -25px; top: 1px; width: 18px; height: 18px; background: url("../../img/main/m_icon_title_arrow.png") no-repeat center; background-size: 100%; }
.mobile #newArrivals .commonWrap .goods_list .goods_list_tit h3 img { width: 20px; margin-left: 5px; vertical-align: baseline; }
.mobile #newArrivals .commonWrap .goods_list .goods_list_tit h4 { font-size: 12px; color: #7e7e7e; font-weight: 400; margin-top: 5px; }
.mobile #newArrivals .commonWrap .goods_list ul { width: calc(100% + 16px); margin-left: -6px; white-space: nowrap; overflow-x: auto; }
.mobile #newArrivals .commonWrap .goods_list ul li { width: calc(50% - 30px) !important; }


/*** 하단 배너 ***/
#slideBottomBanner { display: inline-block; position: relative; width: calc(50% - 5.5px); font-size: 0; margin-top: 100px; margin-right: 5px; vertical-align: top; }
#slideBottomBanner .slick-slider li a img { width: 100%; }
#slideBottomBanner .slick-dots { height: 0; bottom: 13px; font-size: 0; }
#slideBottomBanner .slick-dots li { width: 20px; height: 3px; margin: 0 5px; background-color: #b2b1af; border-radius: 0px; transition-duration: 0.5s; }
#slideBottomBanner .slick-dots li.slick-active { width: 20px; background-color: #323131; }
#slideBottomBanner .slick-dots li:hover { opacity: 0.7; }
#slideBottomBanner .control { position: absolute; left: 0; top: 50%; width: 100%; height: 0; transition-duration: 0.5s; }
#slideBottomBanner .control .slick-arrow { position: absolute; top: -30px; width: 40px; height: 60px; padding: 0px; background-color: rgba(0, 0, 0, 0.2); background-repeat: no-repeat; background-position: center; background-size: 15px; border-radius: 5px; cursor: pointer; opacity: 0; visibility: hidden; transition-duration: 0.5s; }
#slideBottomBanner .control .slick-arrow:hover { background-color: rgba(0, 0, 0, 0.6); }
#slideBottomBanner .control .slick-arrow.prev { left: 30px; background-image: url("../../img/main/btn_arrowLeft_white.png"); }
#slideBottomBanner .control .slick-arrow.next { right: 30px; background-image: url("../../img/main/btn_arrowRight_white.png"); }
#slideBottomBanner .control .slick-arrow img { max-width: 100%; }
#slideBottomBanner:hover .control .slick-arrow { opacity: 1; visibility: visible; }
#slideBottomBanner:hover .control .slick-arrow.prev { left: 0px; }
#slideBottomBanner:hover .control .slick-arrow.next { right: 0px; }
#slideBottomBanner.js-contents-effect { left: -100px; opacity: 0; transition-duration: 1.5s; }
#slideBottomBanner.js-contents-effect.effect-on { left: 0;  opacity: 1; }
#slideBottomBanner { margin-top:100px; margin-right: 0px; width: 100%; }
#slideBottomBanner .control { width: 1350px; left:25px; }
#slideBottomBanner .control .slick-arrow { width: 76px; height: 76px; top: calc(50% - 38px); }
#slideBottomBanner .control .slick-arrow.prev { background: none; background-image: url("../../img/main/rolling_banner_arrow_left.png"); border-radius: 0; left:0;  }
#slideBottomBanner .control .slick-arrow.next { background: none; background-image: url("../../img/main/rolling_banner_arrow_right.png"); border-radius: 0; right:0;  }

.mobile #slideBottomBanner { width: calc(100% + 20px); margin-left: -10px; margin-top: 50px; }
.mobile #slideBottomBanner .control { display: none; }
.mobile #slideBottomBanner { margin-top: 35px; }


/*** 메인 상품리뷰 ***/
#mainGoodsReview { position: relative; margin-top: 100px; font-family: 'Pretendard'; }
#mainGoodsReview .title { display: flex; align-items: center; margin-bottom: 5px; }
#mainGoodsReview .title h3 { font-size: 42px; font-weight: 300; color: #000; }
#mainGoodsReview .title h3 strong { font-weight: 600; }
#mainGoodsReview ul { margin: 25px auto 0 auto; max-width: 1280px; }
#mainGoodsReview ul li { display: inline-block; float: left; width: calc(25% - 24px); margin: 0 12px; }
#mainGoodsReview ul li .item { display: inline-block; background-color: #f9f9f9; border-radius: 15px; padding: 35px; text-align: left; }
#mainGoodsReview ul li .item .top_box { display: flex; justify-content: space-between; }
#mainGoodsReview ul li .item .top_box .subject { width: calc(100% - 30px); height: 20px; font-weight: 600; font-size: 16px; color: #000; overflow: hidden; /*white-space: nowrap; text-overflow: ellipsis;*/ }
#mainGoodsReview ul li .item .top_box .rating_star span { position: relative; padding-left: 20px; font-size: 14px; font-weight: 400; }
#mainGoodsReview ul li .item .top_box .rating_star span::after { content: ''; position: absolute; left: 0; top: 0; width: 14px; height: 14px; background: url("../../img/main/icon_rating_star.png") no-repeat center; background-size: 100%; }
#mainGoodsReview ul li .item .thumbnail { margin-top: 30px; text-align: center; }
#mainGoodsReview ul li .item .thumbnail a { display: block; max-width: 200px; max-height: 200px; border-radius: 50%; overflow: hidden; }
#mainGoodsReview ul li .item .thumbnail a img { width: 100%; }
#mainGoodsReview ul li .item .contents_box { margin-top: 25px; }
#mainGoodsReview ul li .item .contents_box .goodsContents .goodsInfo .goodsName { font-size: 16px; color: #000; }
#mainGoodsReview ul li .item .contents_box .goodsContents .goodsInfo .goodsPrice { font-size: 20px; font-weight: 600; color: #000; margin-top: 5px; }
#mainGoodsReview ul li .item .contents_box .contents { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: #7e7e7e; margin-top: 20px; }
#mainGoodsReview .control { display: flex; justify-content: space-between; align-items: center; position: absolute; left: 50%; top: 280px; transform: translate(-50%, 0); width: 100%; max-width: 1350px; height: 0; }
#mainGoodsReview .control .arrow { width: 14px; height: 26px;  background: no-repeat center; background-size: 100%; cursor: pointer; }
#mainGoodsReview .control .arrow.prev { background-image: url("../../img/main/review_arrow_left.png"); }
#mainGoodsReview .control .arrow.next { background-image: url("../../img/main/review_arrow_right.png"); }


.mobile #mainGoodsReview { margin-top: 50px; }
.mobile #mainGoodsReview .title h3 { font-size: calc(42px / 2); }
.mobile #mainGoodsReview .title h3 img { width: 20px; margin-left: 5px; vertical-align: baseline; }
.mobile #mainGoodsReview ul { margin-top: calc(25px / 2); }
.mobile #mainGoodsReview ul li { margin: 0 calc(12px / 2); }
.mobile #mainGoodsReview ul li .item { padding: calc(35px / 2); border-radius: calc(15px / 2); }
.mobile #mainGoodsReview ul li .item .top_box .subject { font-size: calc(16px / 1.3); }
.mobile #mainGoodsReview ul li .item .top_box .rating_star span { font-size: calc(14px / 1.3); padding-left: calc(20px / 1.5); }
.mobile #mainGoodsReview ul li .item .top_box .rating_star span::after { width: calc(14px / 1.3); height: calc(14px / 1.3); }
.mobile #mainGoodsReview ul li .item .thumbnail { margin-top: calc(30px / 2); }
.mobile #mainGoodsReview ul li .item .contents_box { margin-top: calc(25px / 2); }
.mobile #mainGoodsReview ul li .item .contents_box .goodsContents .goodsInfo .goodsName { font-size: calc(16px / 1.3); }
.mobile #mainGoodsReview ul li .item .contents_box .goodsContents .goodsInfo .goodsPrice { font-size: calc(20px / 1.3); }
.mobile #mainGoodsReview ul li .item .contents_box .contents { font-size: calc(13px / 1.3); margin-top: calc(20px / 2); }
.mobile #mainGoodsReview .control { width: calc(100% + 10px); top: 41vw; }
.mobile #mainGoodsReview .control .arrow { width: calc(14px / 2); height: calc(26px / 2); }