/* BASIC css start */
/*헤더 시작*/

#header .top.headroom--unpinned{display:none;}
#header .top.headroom--pinned{display:flex;}
#header{position: sticky; top: 0; left: 0; z-index: 1000000;}
#header .top{background: #fff; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; width: 100%; box-sizing: border-box;}
#header .top .cate-name{font-size: 14px; font-weight: 500; position: absolute; transform: translateX(-50%); left: 50%;}
#header .top .cate-name .arrow{ width: 12px; height: 12px; background: url(https://img1.clickimg.co.kr/snapskin/common/icon_arrow_bottom.svg); background-size: 12px; background-repeat: no-repeat; display: inline-block; vertical-align: middle; margin-left: 10px;}
#header .top .cate-name.open .arrow{background: url('https://img1.clickimg.co.kr/snapskin/common/icon_arrow_top.svg'); background-size: 12px; background-repeat: no-repeat; display: inline-block; vertical-align: middle; margin-left: 10px;}
.cate-wrap{background-color: #fff; padding: 0 16px; border-bottom: 1px solid #e5e5e5;}

.cate-down-box{display: none;}
.cate-down-box.open{background-color: #fff; width: 100%; top: 59px; left: 0; position: fixed; display: block; z-index: 1000000;}
.cate-down-box.open ul{padding: 15px 0; border-top: 1px solid #e5e5e5;}
.cate-down-box.open ul li{line-height: 38px; height: 38px; padding: 0px 20px;}
.cate-down-box.open ul li a{font-size: 15px; font-weight: 500; color: #777; display: block;}
.cate-down-box.open ul li.now a{font-size: 15px; font-weight: 700; color: #333;}

.dimBox{display: none;}
.dimBox.open{display: block; background-color: rgba(0,0,0,0.5); position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 101;}

.cate-wrap li{width: fit-content;}
.cate-wrap li.now::after{content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #111;}
.cate-wrap li a{ position: relative; display: block; line-height: 45px; color: #777; font-size: 14px;}


#header .top .util{display: flex; align-items: center; gap: 14px;}
#header .top .util a svg{max-width: 16px;}
#header .util .cart a { position: relative; display:block;}
#header .util .cart .count { position: absolute; top: -6px; right:-7px; width: 16px; height: 16px; background: #000; border-radius: 50%; line-height: 18px; text-align: center;  font-weight: 600; font-size: 8px; color: #fff; }

#header .left svg,
#header .util .cart svg{fill: #111;}
#header .util .search svg,
#header .util .mypage svg,
#header .util .ham svg{stroke: #111;}
#header .top{background-color: #fff;}


.search_main { display:none; background-color: rgba(255,255,255,0.9); position:absolute; padding:10px 15px; box-sizing:border-box;  top:0; left:0; z-index:100; width:100%;}
.search_main #search_box{padding: 40px 0 10px;}
.search_main #keyword{width: 100%; background: transparent; border-bottom: 1px solid #111 ! important; border: 0; padding-right: 35px; line-height: 40px; height: 40px;}
.search_main .searchForm { position:relative; text-align:left;}
.search_main .btnsearch {position:absolute; right:4px; top:50%; transform: translateY(-50%); width:20px; height:20px;border:0;cursor:pointer;overflow:hidden;text-indent:100%;font-size:0;white-space:nowrap;background:url("https://img1.clickimg.co.kr/snapskin/common/icon_search.svg") no-repeat 0 0;background-size:20px;}
.search_main .btnDelete {position:absolute; right:16px; top:16px; width:21px; height:21px;border:0;cursor:pointer;text-indent:100%;font-size:0;background:url("https://img1.clickimg.co.kr/snapskin/common/icon_close.svg") no-repeat 0 0;background-size:18px 18px;}


.dimBox.open{background-color: rgba(0,0,0,0.5); width: 100%; height: 100dvh; z-index: 100000; position: fixed; top: 0; right: 0;}

#container{padding-top: 0px ! important;}


/*헤더 끝*/


#MS_product{padding-top:30px;}
.shopbrand h2 {font-size: 24px; font-weight:500; padding:32px 16px 0; margin-bottom: 12px;}
.shopbrand .MK_product_list {background-color:#f9f9f9; border-bottom:1px solid #4a4a4a; border-top: 1px solid #4a4a4a;}
.shopbrand .MK_product_list .items {padding: 10px 0;}
.shopbrand .MK_product_list .items #MK_best_product li {width:33.33%;}
.shopbrand .MK_product_list .items .paging-num {text-align: center; clear: both; margin:20px 0;}
.shopbrand .MK_product_list .items .paging-num a {background-color:#fff; border:1px solid #393939; padding:5px 10px; margin:0 10px;}
.shopbrand .list_group {padding:12px 1%; text-align:center;}
.shopbrand .list_group select {width:49%; height:28px;}
.shopbrand .more .more-title {color: #3b3b3b;}
.shopbrand .more .more-num {color: #aaaaaa;}
.shopbrand .shopbrandTitle img {max-width: 100%;}
.shopbrand .list_array .list_arrayRight img {width: 23px; height: auto;}

.shopbrand .coupon-benefit {position:relative; margin:-12px 0 10px 0;} 
.shopbrand .btn-coupon { display:inline-block; height:16px; padding:0; margin-left:5px; border:1px solid #000; font-size:10px;}
.shopbrand .btn-coupon span { display:inline-block; height:16px; padding:0 5px; color:#fff; background:#000; vertical-align:top; font-size:11px; }
.shopbrand .btn-coupon em { display:inline-block; height:16px; padding:0 3px 0 0; font-size:10px; vertical-align:top; color:#000; }

/* 하위 분류 */
.shopbrand .item-cate { padding: 0 4px 10px; }
.shopbrand .item-cate .scate a { font-weight: bold; font-size: 15px; color: #1c1c1c; }
.shopbrand .item-cate .scate-img img { width: 100%; }


/* 분류 좋아요 기능 추가하기 */
.category-side { display: flex; align-items: center; column-gap: 10px; }
.category-count { display: flex; align-items: center; justify-content: center; column-gap: 6px; height: 28px; padding: 0 12px;     border: 1px solid #ddd; border-radius: 14px; font-size: 13px; box-sizing: border-box; cursor: pointer; }
.category-count .heart { width: 16px; height: 16px; stroke-width: 2px; stroke: #999; fill: none; }
.category-count.active .heart { stroke: #e84d66; fill: #e84d66; }
.category-side .fa-heart { color: #f41f3a; font-size: 16px !important; }
.category-side .fa-heart-o { color: #999; font-size: 16px !important; }


.list_array{display: none;}

/* 베스트 */
.best-section{background: #FAFAFA; margin-bottom: 10px; padding-top:30px;}
.best-section .best-swiper{overflow: hidden; padding-left:16px;}
.best-section .best-swiper .swiper-wrapper { counter-reset: rank; transition-timing-function: linear; }
.best-section .best-swiper .swiper-wrapper li.swiper-slide{width: 160px; margin-right: 8px;}
.best-section .best-swiper .swiper-wrapper li .thumb .rank { position: absolute; top: 0; left: 0; width: 30px; height: 30px; background: #111; display: flex; align-items: center; justify-content: center;  font-size: 15px; color: #fff; counter-increment: rank; }
.best-section .best-swiper .swiper-wrapper li .thumb .rank::before { content: counter(rank); }
.best-section .best-swiper .swiper-wrapper li .pr-price{border-bottom: none;}


/*분류 상단 배너*/
.pr_list_b_01{position: relative; overflow: hidden; margin:12px 0 16px;}
.pr_list_b_01 .swiper-slide{width:309px;}

.best-swiper .swiper-pagination{position: relative; margin-top: 20px; height: 1px; margin-bottom: 40px; width: 358px;}
.best-swiper .swiper-pagination-progressbar-fill{background-color: #111;}


.btn_more{display: inline-block; line-height: 40px; height: 40px; border: 1px solid #111; font-size: 13px; font-weight: 600; color: #333; margin: 0 auto; width: 200px;}

/* BASIC css end */