/* skeleton css */
.skeleton_cont {
  display: flex;
  flex-wrap: wrap;
  gap: 20.8px; 
}
.skeleton {
  border-radius: 5px;
  width: 196px;
}
.skeleton *:not(.skeleton_info, .ske_array) {
  background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 40%, #e5e5e5 48%);
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: load 1s infinite;
}
@keyframes load {
  100% {
      background-position: -100% 0;
  }
}
.skeleton .skeleton_image {
  width: 100%;
  height: 196px; 
  background-color: #e0e0e0;
  margin-bottom: 8px; 
}
.skeleton .skeleton_info {
  background-color: #fbfbfb;
  padding-bottom: 0px;
} 
.skeleton .skeleton_text {
  height: 15px;
  background-color: #e0e0e0;
  border-radius: 0px;
} 
.skeleton .ske_array {
  display: flex;
}
.skeleton .ske_array > div.ske_sticker {
    margin-right: 6px;
}
.skeleton .ske_array.spacebetween {
  justify-content: space-between;
}
.skeleton .skeleton_text.ske_subtit {
  height: 17px;
  width: 75%;
  margin: 8px 0; 
}
.skeleton .skeleton_text.ske_tit { 
  height: 18px;
  width: 90%; 
  margin-bottom: 5px;
}
.skeleton .skeleton_text.ske_won {
    height: 18px;
    width: 73.5%;
    margin-top: 8px;
}
.skeleton .skeleton_text.ske_won1 {
    margin-top: 12px;
}
.skeleton .skeleton_text.ske_won2 {
    margin-bottom: 16px;
}
.skeleton .skeleton_text.ske_sticker {
    width: 70px;
    height: 20px;
}
.skeleton .sticker_bt .skeleton_text.ske_sticker {
    width: 54px;
}
.skeleton .skeleton_text.ske_click {
  width: 24px;
  height: 24px; 
  margin-right: 8px;
}  




.prd_cont {
  display: flex;
  flex-wrap: wrap;
  gap: 20.8px;
}
.product .pn_num {
    padding-left: .5px;
    font-family: var(--main-fonts); 
    letter-spacing: -.3px;
    font-weight: 700;
    color: #0e0e0e; 
    position: relative;
    margin-bottom: 10px;
    display: block;
    font-size: 18px;
    padding-top: 8px;
}
.product .pn_num::after {
    position: absolute;
    content: '';
    bottom: 21px;
    left: 0;
    height: 3px;
    width: 21px;
    background: #0e0e0e;
}  
.product .pn_num.hundred::after {
    width: 32px;
}  
.product {
    width: 196px; 
    height: auto;
}
.product_txt {
    padding-right: 0px;
    margin-top: 8px;
}
.product a {
    height: auto;
}
.product .icon_list {
    display: flex;
    margin: 15px 0 8px;
}
.product .icon_list > span {
  margin-right: 6px;
  margin-bottom: 4px;
}
.product .icon_list > span:last-child {
  margin-right: 0px;
}
.product .todaySticker {
    font-size: 12.5px;
    color: #949494;
    font-family: var(--main-fonts);
    letter-spacing: -.3px; 
    font-weight: 500;
    display: flex;
    align-items: center;
    background: #ffefef;
    border: 1px solid #fbe0e0;
    border-radius: 5px;
    padding: 3px 5px;
}   
.product .todaySticker img { 
    width: 12px;
    height: 12px;
    margin-right: 4px; 
}
.product .dlvSticker {
    font-size: 12.5px;
    color: #949494;
    font-family: var(--main-fonts);
    letter-spacing: -.3px;
    font-weight: 500;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 5px; 
    padding: 3px 5px;
}  
.product .promoSticker { 
    font-size: 12.5px;
    color: #ae75cc;
    font-family: var(--main-fonts);
    letter-spacing: -.3px;
    font-weight: 500;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e8d7f1;
    border-radius: 5px;
    padding: 3px 5px;
}
.product .prd_review {
    display: flex;
    align-items: baseline;
}
.product .prd_review img {
    width: 10px;
    height: 10px;
    margin-right: 4px;
}
.product .prd_review {
    font-family: var(--main-fonts);
    font-size: 13px;
    letter-spacing: -.3px;
    color: #787878;
    font-weight: 500;
} 
.prd_price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 170px;
}
.prd_bp {
    display: flex;
    align-items: center;
    margin-top: 2px; 
}
.title_txt {
    font-family: var(--main-fonts); 
    color: #8f8f8f;
    letter-spacing: -0.1px; 
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 4px;
    margin-top: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 14px;
}
.item_tit {
    color: #191919;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-height: 24px;
    -webkit-box-orient: vertical;
    font-family: var(--main-fonts);
    font-weight: 600;
    letter-spacing: -.3px;
    font-size: 17px;
    margin: 0;
    margin-bottom: 10px;
    padding-right: 14px;
    word-break: keep-all;
} 
.prc_name {
    font-family: var(--main-fonts);
    letter-spacing: -.3px;
    font-size: 14px;
    letter-spacing: -1px; 
    color: #901dcc;
    margin-bottom: 2px;
    font-weight: 600;
}
.prc_normal {
    color: #a2a0a0;
    text-decoration: line-through;
    font-size: 15px;
    font-family: var(--main-fonts);
    letter-spacing: -.3px;
    font-weight: 400;
    margin-left: 0px;
    letter-spacing: var(--main-letter-spacing);
}
.product_txt small {
    font-family: var(--main-fonts);
    letter-spacing: -.3px;
    color: #0e0e0e;
    font-size: 16px;
    font-weight: 800;
    margin-right: 12px;
}
.small { 
    color: #a2a0a0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
} 
.prc_sale_per {
    color:#901dcc;
    font-family: var(--main-fonts);
    letter-spacing: -.3px;
    font-size: 20px;
    letter-spacing: var(--main-letter-spacing);
    font-weight: 700;
}
.percent {
    font-family: var(--main-fonts) !important;
    color: #901dcc !important;
}
.prc_sell_prc {
    font-family: var(--main-fonts);
    letter-spacing: -.3px;
    font-weight: 700;
    font-size: 20px; 
    letter-spacing: var(--main-letter-spacing);
    color: #0e0e0e;
}
.product_img {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    background: #fbfbfb;
}
.product_img .thumb {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
}
.product_img .thumb .centered {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translate(50%,50%);
}
.product_img .thumb img {
    filter: brightness(.97);
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    transform: translate(-50%,-50%);
    image-rendering: -webkit-optimize-contrast !important;
}

.subscribe_sticker {
    transition: all .3s;
    position: absolute;
    top: 60px;
    left: 0;
    bottom: 0;
    width: 100%;
    background: url(/common/front/img/rental/subscribe_sticker.png) no-repeat;
    background-size: cover;
    z-index: 1;
}
.rental_sticker {
    transition: all .3s;
    position: absolute;
    top: 60px;
    left: 0;
    bottom: 0;
    width: 100%;
    background: url(/common/front/img/rental/rental_sticker.png) no-repeat;
    background-size: cover;
    z-index: 1;
}
.product:hover .subscribe_sticker, .product:hover .rental_sticker {
    top: 0;
}

/* 상품 목록 사회적 기업 마크 배경 */
.esg-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 2;
    width: 25%;
}

.esg-bg--disabled {
    background-image: url('/common/img/etc/product_thumb_disabled.png');
}

.esg-bg--social {
    background-image: url('/common/img/etc/product_thumb_social.png');
}

.esg-bg--traditional {
    background-image: url('/common/img/etc/product_thumb_traditional.png');
}

.esg-bg--cooperative {
    background-image: url('/common/img/etc/product_thumb_cooperative.png');
}

.esg-bg--women {
    background-image: url('/common/img/etc/product_thumb_women.png');
}
  

/* 마우스오버 */
.product .prdouct_icons {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.product .prdouct_icons .prd_sticker {
    display: flex;
}
.product .prdouct_icons .prd_sticker img {
    margin-right: 4px;
}
.product .prdouct_icons .prd_sticker img:nth-of-type(n+3) {
    display: none;
}
.product .prdouct_icons .prd_hover {
    transition: all .3s ease-out;
} 
.product .prdouct_icons .prd_hover {
    display: flex;
    align-items: center;
    justify-content: center;
}  
.product .prdouct_icons .prd_hover a {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 12px;
} 
.product .prdouct_icons .prd_hover a img {
    width: 18px;
    height: 18px;
}
.product .product_img:hover .prdouct_icons .prd_hover {
    z-index: 10;
    opacity: 1;
}
.product .prdouct_icons .prd_hover .jjim .clicked__cha {
    display: none; 
}
.product .prdouct_icons .prd_hover .jjim.clicked .clicked__cha {
    display: block;
}
.product .prdouct_icons .prd_hover .jjim.clicked .def {
    display: none; 
} 
.product .product_img .prd_stat {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 34px; 
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-family: var(--main-fonts);
    letter-spacing: -.3px;
    line-height: 34px;
    background: rgba(0,0,0,.7);
}

/*today ver*/
.prd_stor {
    position: absolute;
    bottom: 4px;
    left: 4px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.prd_stor div.stbox { 
    font-size: 12px; 
    font-weight: 800;
    color: #ea6565;
    letter-spacing: var(--main-letter-spacing);
    background: #ffefef;
    border-radius: 5px;
    padding: 5px 8px 3px 8px;
    font-family: var(--main-fonts);
    letter-spacing: -.3px;
}
.prd_stor div.stbox.soldout {
    margin-right: 5px;
    background: #e23333;
    color: #fff;
}
.prd_stor .stock {
    display: flex;  
} 
.prd_stor div.stbox span {
    color: #ea6565;
    font-weight: 900;
    font-size: 12px;
    margin: 0 2px;
    letter-spacing: var(--main-letter-spacing);
    font-family: var(--main-fonts);
    letter-spacing: -1px;
}
.prdouct_icons .challenge { 
    color: #fff;
    background: #c491dc;
    font-size: 12px;
    font-family: var(--main-fonts);
    letter-spacing: -.3px;
    padding: 5px 6px 3px 6px;
    display: block;
}
#bucks .prdouct_icons .challenge  {
    background: #74ceb5;
} 
#thema .prdouct_icons .challenge, #issue .prdouct_icons .challenge, #look .prdouct_icons .challenge, .look .prds__section .prdouct_icons .challenge {
    background: #ec7b7b;
}
#paldo .prdouct_icons .challenge{
    background: #c5b695;
}
/* 카테고리 베스트 상품 */ 
.product_img .prdnum {
    color: #fff;
    font-size: 13px;
    padding-top: 1px;
    background: #901dcc;
    border-radius: 22px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 2;
    top: 4px;
    left: 4px;
    font-weight: 600;
    transform: translateX(0PX);
    transition: all .3s;
}
.product:hover .prdnum {
    transform: translateX(-60PX);
} 

/*마트 스티커*/
.sticker__mart {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 50px;
    height: 50px;
}
.sticker__onnuri {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 64px;
}
.sticker__onnuri img {
  width: 100%;
}
.sticker__mart img {
    width: 100%;
}
.sticker__adult {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50px;
    height: 50px;
    z-index: 2;
}


/* 특판용 prd */
.product.spec {
    width: 251px;
    padding: 14px;
    border: 1px solid #ececec;
    border-radius: 10px;
    margin-right: 20px; 
    transition: all .3s;
} 
.product.spec .apply_btn {
    font-family: var(--main-fonts);
    font-size: 16px;
    color: #fff;
    display: block;
    padding: 12px;
    text-align: center;
    border-radius: 5px;
    background: #212121;
    transition: all .3s;
}  
.product.spec:nth-of-type(4n) {
    margin-right: 0 !important;
} 
.product.spec .prd_bp {
    justify-content: flex-start;
}
.product.spec .tax_sticker {
    color: #414ff6;
    font-size: 12px;
    background: #e8f1ff;
    border-radius: 5px;
    padding: 4px 8px;
    font-weight: 700;
} 
.product.spec .icon_list {
    height: 30px;
}
.product.spec .item_tit {
    height: 46px !important;
}


/* 장바구니 ver*/
.product .basket_div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;

}
.product .basket {
  display: flex;
  align-items: center;
  background: #f7f7f7;
  height: 34px;
  width: 74%;
  justify-content: space-between;
  padding: 1px 2px;
}
.product .e_cart {
  cursor: pointer;
}
.product .e_cart .addCart, .product .e_cart .moveDetail {
  background-color: #714113;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 14px;
  color: #fff;
  font-size: 14px;
}
.product .e_cart .addCart img {
  height: 23px;
  filter: invert(1);
} 
.product .option_quantity input {
  outline: 0;
  border: 0;
  width: 34px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--main-fonts);
}
.product .option_minus, .product .option_plus {
  background: #fff;
  text-align: center;
  border: 1px solid #f2f2f2;
  cursor: pointer;
}
.product .option_minus.disabled a {
  background: #ebebeb;
  cursor: default; 
}
.product .option_minus a, .product .option_plus a {
  color: #888888;
  display: block;
  width: 28px;
  height: 28px;
  font-size: 18px;
  font-weight: 800;
  line-height: 28px;
}
.product .option_minus a{
  color:#BDBDBD;
}
.product .cnt {
  background: #fafafa;
  outline: 0;
}