/* BASIC css start */
/* MD 추천 */
.brandRecmdPrdWrap { padding:5px 0 0 0 ;overflow: hidden; }
.brandRecmdPrdWrap .mainTitle { padding-left:20px }
.brandRecmdPrdWrap .recmdBrandLinkList {  padding:16px 10px }
.brandRecmdPrdWrap .recmdBrandLinkList ul { font-size:0 }
.brandRecmdPrdWrap .recmdBrandLinkList li { display:inline-block; width:25%; vertical-align:top }
.brandRecmdPrdWrap .recmdBrandLinkList li .link { display:block; padding:0 5px; width:100%; text-align:center; box-sizing:border-box; opacity:0.3; -webkit-filter: grayscale(1); filter: grayscale(1); }
.brandRecmdPrdWrap .recmdBrandLinkList li .iconArea { display:block; padding-top:100%; position:relative; width:100%; height:0; border-radius:0%; border:1px solid #4d4d4d; overflow:hidden }
.brandRecmdPrdWrap .recmdBrandLinkList li .iconArea .bLogo { position:absolute; top:0; left:0; width:100% }
.brandRecmdPrdWrap .recmdBrandLinkList li .iconArea .bLogo img { width:100% }
.brandRecmdPrdWrap .recmdBrandLinkList li .txt { display:block; padding-top:4px; font-size:0.9rem; color:#222; font-weight:400; vertical-align:top }
.brandRecmdPrdWrap .recmdBrandLinkList li .link.on { opacity:1; -webkit-filter:none; filter:none; }
.brandRecmdPrdWrap .recmdBrandLinkList li .link.on .iconArea { margin-top:-1px; margin-left:-1px; border:1px solid #777 }
.brandRecmdPrdWrap .recmdBrandLinkList li .link.on .txt { color:#222; font-weight:500 }

.brandRecmdPrdWrap .recmdBrandPrdList { padding-top:20px }
/*
.brandRecmdPrdWrap .recmdBrandPrdList .recmdBrandSwiper { padding-right:10px }
.brandRecmdPrdWrap .recmdBrandPrdList .recmdBrandSwiper .swiper-slide { width:40% !important }
.brandRecmdPrdWrap .recmdBrandPrdList .recmdBrandSwiper .swiper-slide:first-child { margin-left:10px }
*/
.brandRecmdPrdWrap .recmdBrandPrdList .recmdBrandSwiper { padding-right:10px; width:95%; overflow: hidden; }
.brandRecmdPrdWrap .recmdBrandPrdList .recmdBrandSwiper .swiper-slide { width:40% !important }
.brandRecmdPrdWrap .recmdBrandPrdList .swiper-slide .list:first-child { margin-left:10px }

.brandRecmdPrdWrap .recmdBrandPrdList .list { padding-bottom:12px }
.brandRecmdPrdWrap .recmdBrandPrdList .list .thumbArea { position:relative }
.brandRecmdPrdWrap .recmdBrandPrdList .list .thumbArea .iconsWrap { position: absolute; top: 0px; left: 0px; font-size:0; line-height:0 }
.brandRecmdPrdWrap .recmdBrandPrdList .list .thumbArea .iconsWrap img { width:auto; height:14px }
.brandRecmdPrdWrap .recmdBrandPrdList .list a { display:block }
.brandRecmdPrdWrap .recmdBrandPrdList .list .listPic { width:100%; border-radius:5px }
.brandRecmdPrdWrap .recmdBrandPrdList .list .listName_ { display:-webkit-box; margin:8px 0 8px; height:50px; text-overflow:ellipsis; -webkit-line-clamp:3; -webkit-box-orient:vertical; word-wrap:break-word; overflow:hidden }
.brandRecmdPrdWrap .recmdBrandPrdList .list .listName { overflow: hidden;   text-overflow: ellipsis;   display: -webkit-box;   -webkit-box-orient: vertical;   -webkit-line-clamp: 2;   --chakra-line-clamp: 2;
   font-size: 0.9rem;   line-height: 1rem;   letter-spacing: -0.3px;   word-break: break-all;}

.brandRecmdPrdWrap .recmdBrandPrdList .list .priceArea { position:relative; height:44px }
.brandRecmdPrdWrap .recmdBrandPrdList .list .listPrice { position:absolute; bottom:0; left:0; margin:0; font-size:16px; color:#000; font-weight:700 }
.brandRecmdPrdWrap .recmdBrandPrdList .list .listPrice .unit { font-size:12px; font-weight:500 }
.brandRecmdPrdWrap .recmdBrandPrdList .list .listDiscount { display:block }
.brandRecmdPrdWrap .recmdBrandPrdList .list .listDiscount .percent { font-size:12px; color:#4c4c4c; font-weight:700 }
.brandRecmdPrdWrap .recmdBrandPrdList .list .listDiscount del { margin-left:4px; font-size:12px; color:#909090 }
.brandRecmdPrdWrap .recmdBrandPrdList .list .btnCouponDown { padding-top:5px }
.brandRecmdPrdWrap .recmdBrandPrdList .list .btnCouponDown .couponDwLink { display:block; font-size:0; width:42px; height:18px; background:url(//static.momq.co.kr/newmomq/bo/0_common/m/btn_coupon_down.png) 0 0 no-repeat; background-size:42px auto }
.brandRecmdPrdWrap .recmdBrandPrdList .list .btnCouponDown .couponDwLink .cIcon.couponDwIcon { margin:5px; margin-left: 0; vertical-align:top }
.brandRecmdPrdWrap .recmdBrandPrdList .list .prdListMore a { position: relative; display: block; background:#626262; }
.brandRecmdPrdWrap .recmdBrandPrdList .list .prdListMore a img { opacity:0 }
.brandRecmdPrdWrap .recmdBrandPrdList .list .prdListMore a i { font-size:1.5em }
.brandRecmdPrdWrap .recmdBrandPrdList .list .prdListMore .prdMoreBtn { position: absolute; top: 50%; display:block; width: 100%; transform: translateY(-50%); font-size:1em; color:#fff; text-align:center; }
.brandRecmdPrdWrap .recmdBrandPrdList .brandPrdListMore { margin:0 20px; padding-top:8px }
.brandRecmdPrdWrap .recmdBrandPrdList .brandPrdListMore a { display:block; height:36px; font-size:1rem; color:#999; font-weight:500; text-align:center; line-height:36px; border-radius:5px; border:1px solid #777 }
.brandRecmdPrdWrap .recmdBrandPrdList .brandPrdListMore span { font-weight:500 }
.brandRecmdPrdWrap .recmdBrandPrdList .pagingWrap { margin:8px 0 12px 20px; position:relative; height:2px }
.brandRecmdPrdWrap .recmdBrandPrdList .pagingWrap .mdRecmdPaging { width:100%; height:2px }
.brandRecmdPrdWrap .recmdBrandPrdList .pagingWrap .swiper-pagination-progressbar-fill { background:var(--yes-color) }


.brandRecmdPrdWrap .recmdBrandPrdList .list .thumb{width: 100%;position: relative;  border:#ddd solid 1px; }
.brandRecmdPrdWrap .recmdBrandPrdList .list .thumb>a{display: block; width: 100%; overflow:hidden; }
.brandRecmdPrdWrap .recmdBrandPrdList .list .thumb>a>img{width: 100%; transition:all .3s}
.brandRecmdPrdWrap .recmdBrandPrdList .list .thumb span.num{display: inline-block; width: 50px; height: 50px;font-size:20px; font-weight:600; font-family: 'Pretendard', sans-serif;  position: absolute; top: 0; left: 0;  z-index: 10; background-color: #424e3aad; color: #fff; display: flex; align-items: center; justify-content: center;}
.brandRecmdPrdWrap .recmdBrandPrdList .list .thumb .sticker{position:absolute; top:0px; left:0px; font-size:0.9rem;font-weight: 600; 
   background-color:#222; border-radius:0%; width:2.8rem; height:1.8rem; color:#fff; opacity: 0.7; text-align: center;display: block;}

.brandRecmdPrdWrap .recmdBrandPrdList .list .thumb .cart_icon{position:absolute; bottom:10px; right:10px; }
.brandRecmdPrdWrap .recmdBrandPrdList .list .thumb .cart_icon a{display:flex; align-items:center; transition:all .2s; justify-content:center; width:31px; height:31px; background-color:#ababab; border-radius:50%; border: none;z-index: 1; overflow: hidden; position:relative;}
.brandRecmdPrdWrap .recmdBrandPrdList .list .thumb .cart_icon a img{transform:scale(.66); transform-origin:center center; }
.brandRecmdPrdWrap .recmdBrandPrdList .list .info{padding:8px 0; }
.brandRecmdPrdWrap .recmdBrandPrdList .list .info p_{margin-bottom:3px; font-size:1rem; font-weight:500; text-align:left;font-family: "Pretendard Variable", Pretendard, sans-serif;}
.brandRecmdPrdWrap .recmdBrandPrdList .list .info .prdname{     overflow: hidden;
   text-overflow: ellipsis;   display: -webkit-box;   -webkit-box-orient: vertical;   -webkit-line-clamp: 2;   --chakra-line-clamp: 2;   font-size: 1rem;   line-height: 1rem;
   letter-spacing: -0.3px;   word-break: break-all;}
.brandRecmdPrdWrap .recmdBrandPrdList .list .info .prdetc{color:#999999; font-size:14px;font-weight:500;  }
.brandRecmdPrdWrap .recmdBrandPrdList .list .info .prd-price{  font-weight:500; position:relative;  }

.brandRecmdPrdWrap .recmdBrandPrdList .list .info .prd-price .price_discount{display:flex;}

.brandRecmdPrdWrap .recmdBrandPrdList .list .info .prd-price span.won{ font-size:1rem; font-weight:400;color:#222; }
.brandRecmdPrdWrap .recmdBrandPrdList .list .info .prd-price .price{font-size:1.1rem; color:#222; font-weight:500;}
.brandRecmdPrdWrap .recmdBrandPrdList .list .info .prd-price strike{ font-size:0.9rem; color:#b6b6b6; display:inline-block; font-weight:500; margin-left:1px }
.brandRecmdPrdWrap .recmdBrandPrdList .list .info .prd-price .percent{ font-size:1.1rem;color:var(--main-color); font-weight:600; margin-right:1rem;}
.brandRecmdPrdWrap .recmdBrandPrdList .list .info .prdbtn{}
.brandRecmdPrdWrap .recmdBrandPrdList .list .info .prdbtn>span_ img{display:inline-block; margin:0 3px}
.brandRecmdPrdWrap .recmdBrandPrdList .list .info .prdbtn>span {display:flex; }


/* 브랜드 */
.brandListWrap { padding-top:20px }
.brandListWrap .mainTitle { padding:0 20px }
.brandListWrap .topBrandArea { padding:16px 8px 0 }
.brandListWrap .topBrandArea ul { font-size:0 }
.brandListWrap .topBrandArea li { display:inline-block; width:25%; vertical-align:top }
.brandListWrap .topBrandArea li a { display:block; margin:0 12px }
.brandListWrap .topBrandArea li .bLogo { display:block; width:100%; height:100%;  border:1px solid #dbdbdb; overflow:hidden }
.brandListWrap .topBrandArea li img { width:100% }
.brandListWrap .topBrandArea li .txt { display:block; padding-top:6px; font-size:12px; color:#141414; text-align:center; line-height:16px; vertical-align:top }
.brandListWrap .sortList { margin-top:18px; padding:7px 17px; border-top:1px solid #f2f2f2; border-bottom:1px solid #f2f2f2 }
.brandListWrap .sortList ul { background-color:#ddd;padding: 10px 5px; }
.brandListWrap .sortList li { display:inline-block; margin:5px 0; padding:0 0.2rem; text-align:center; vertical-align:top }
.brandListWrap .sortList li:first-child{font-size:.9rem}


.brandListWrap .sortList li a { display: inline-block; width:2.3rem; height:2.3rem; font-size:1rem; color:#222; font-weight: 500; text-align:center; line-height:2.3rem; border-radius:50%; background:#eee }
.brandListWrap .sortList li a.active { color:#fff; font-weight:700; background: var(--yespen-color-2);  }
.brandListWrap .sortList li:first-child a.active{font-weight:600}
.brandListWrap .brandInfo { padding:0 8px 0 }
.brandListWrap .brandInfo ul { display:flex; flex-wrap:wrap;padding:0 7px }
.brandListWrap .brandInfo li { margin-top:18px; width:25%; vertical-align:top; overflow:hidden }
.brandListWrap .brandInfo li.hideBrand { display:none }
.brandListWrap .brandInfo li a { display:block; margin:0 7px }
.brandListWrap .brandInfo li .bLogo { display:block; width:100%;  border:1px solid #dbdbdb; overflow:hidden; position: relative   ;}
.brandListWrap .brandInfo li .bLogo_:before {
   content: "";    display: block;   padding-bottom: 100%; /* 정사각형일 경우 100%, 원하는 비율에 맞춰 padding-top값 조절하면 됨*/   }
.brandListWrap .brandInfo li img { width:100%; height:auto   }
.brandListWrap .brandInfo li .txt { display:block; margin:0 -8px; padding-top:6px; font-size:12px; color:#141414; text-align:center; line-height:16px; vertical-align:top }
.brandListWrap .brandMore { margin:20px 20px 0 }
.brandListWrap .brandMore a { display:block; height:38px; font-size:12px; color:#e70e22; font-weight:500; text-align:center; line-height:38px; border:1px solid #f8b7bd; border-radius:3px }
.brandListWrap .brandMore a i { line-height:40px; vertical-align:top }
.brandListWrap .brandMore.on i { transform:rotate(180deg) }
.brandListWrap .brandList { margin: 15px 0 20px 0; }
.brandListWrap .brandList::after { content: ''; display: block; clear: both; }
.brandListWrap .brandList li { margin: 5px 0; display: table; float: left; width: 20%; height: 50px; }
.brandListWrap .brandList li:nth-child(5n+1) { clear: both; }
.brandListWrap .brandList li img { width: 100%; padding: 7px;  box-sizing: border-box; }
.brandListWrap .brandList li a { display: table-cell; vertical-align: middle; }

/* BASIC css start */


/* BASIC css end */


/* BASIC css end */