/* BASIC css start */
/* class-list */
#productClass .cate-wrap { margin-bottom:60px; }
#productClass .cate-wrap .bcate { font-family: "Pretendard Variable", Pretendard, sans-serif;padding:70px 0 40px;  font-size:32px; color:#111111; font-weight:600; text-align:center; }
#productClass .cate-wrap .class-list ul {display:flex; flex-wrap:wrap;  }
#productClass .cate-wrap .class-list ul:after { display:block; clear:both; content:'' }
#productClass .cate-wrap .class-list ul li {width:calc(100% / 6 ) }
#productClass .cate-wrap .class-list ul li a {position:relative; font-weight:500; display:block; font-size:14px; color:#000;  padding:15px 27px; transition:all .1s; border:1px solid #e8e8e8; text-align:center;}
#productClass .cate-wrap .class-list ul li:not(:nth-child(6n),:last-child) a{border-right:none}
#productClass .cate-wrap .class-list ul li a:hover,#productClass .cate-wrap .class-list ul li.sel a{color:#fff; background-color:#000}
#productClass .cate-wrap .class-list ul li:not(:nth-child(1),:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6)) a{border-top:none}

/* best-item */


#productClass .best-item { padding-top: 20px; padding-bottom: 10px; border-top: 2px solid #5c5c5c; border-bottom: 2px solid #5c5c5c; background-color: #f8f8f8; }

.best_sec{margin-bottom:60px; padding:70px 0 30px; }

.best_sec_inner{ margin:0 auto;position:relative; }
.best_sec p.best_tit{margin:15px 0 50px; text-align:center;  font-family: "Pretendard Variable", Pretendard, sans-serif; font-size:26px; color:#111111; font-weight:600;}
.best_sec .swiper{padding-bottom:40px;}
.best_sec .swiper-pagination{bottom: 0; top: unset;}
.best_sec .swiper-pagination-progressbar{background-color: rgba(0,0,0,.05);}
.best_sec .swiper-pagination-progressbar-fill{background-color: #cfcfcf;}


/* ==========================================================================
   PC 분류페이지 베스트 상품 스타일 (이미지 유연한 높이 대응)
   ================================================================********** */

.pc-category-best-section {
  width: 100% !important;
  background-color: #ffffff !important;
  padding: 40px 0 60px 0 !important;
  box-sizing: border-box !important;
}

.pc-category-best-section *, 
.pc-category-best-section *::before, 
.pc-category-best-section *::after {
  box-sizing: border-box !important;
}

.pc-best-inner {
  width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.pc-best-header {
  text-align: center !important;
  margin-bottom: 25px !important;
}

.pc-best-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  letter-spacing: 1px !important;
  margin: 0 !important;
}

.pc-best-slider-wrap {
  position: relative !important;
  width: 100% !important;
}

.pc-best-swiper {
  width: 100% !important;
  overflow: hidden !important;
  padding: 5px 2px 10px 2px !important;
}

.pc-best-swiper .swiper-wrapper {
  display: flex !important;
  align-items: flex-start !important; /* 높이가 달라도 상단 정렬되도록 처리 */
}

.pc-best-slide {
  width: calc((1280px - 40px - 60px) / 4) !important;
  flex-shrink: 0 !important;
}

.pc-best-card {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* ⭐ 고정 높이/강제 정사각형 박스를 없애고, 가로폭 100% 기준 세로가 유연하게 늘어나도록 설정 */
.pc-best-thumb {
  width: 100% !important;
  background-color: #f8f8f8 !important; /* 이미지가 로드되기 전의 배경 */
  overflow: hidden !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pc-best-thumb img {
  display: block !important;
  width: 100% !important;
  height: auto !important; /* 세로 높이를 이미지 비율에 맞게 자동 조절 */
  object-fit: width !important;
  transition: transform 0.3s ease !important;
}

.pc-best-card:hover .pc-best-thumb img {
  transform: scale(1.03) !important;
}

/* 상품 텍스트 정보 */
.pc-best-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.pc-best-sub {
  font-size: 11px !important;
  color: #888888 !important;
  margin: 0 !important;
}

.pc-best-name {
  font-size: 13px !important;
  color: #222222 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 가격 및 할인율 영역 */
.pc-best-price-box {
  margin-top: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}

.pc-best-percent {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #e52525 !important; /* 붉은색 할인율 */
}

.pc-best-consumer {
  font-size: 12px !important;
  color: #999999 !important;
  text-decoration: line-through !important;
}

.pc-best-price {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #000000 !important;
}

/* 아이콘 영역 */
.pc-best-icons {
  margin-top: 4px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
}

/* 좌우 화살표 버튼 */
.pc-best-prev,
.pc-best-next {
  position: absolute !important;
  top: 42% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
  z-index: 10 !important;
  cursor: pointer !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease !important;
}

.pc-best-prev { left: -22px !important; }
.pc-best-next { right: -22px !important; }

.pc-best-prev::after,
.pc-best-next::after {
  font-size: 14px !important;
  font-weight: bold !important;
  color: #333333 !important;
}

.pc-best-slider-wrap:hover .pc-best-prev,
.pc-best-slider-wrap:hover .pc-best-next {
  opacity: 1 !important;
  visibility: visible !important;
}

.pc-best-prev:hover,
.pc-best-next:hover {
  background-color: #ffffff !important;
  border-color: #333333 !important;
}
/* BASIC css end */