/* BASIC css start */
/* =========================
   COMMON
========================= */
.sec_content { margin: 5%; }

.sec_title { margin: 0 0 15px; }
.sec_title .sec_sub_title { display: flex; align-items: center; }
.sec_title .sec_sub_title h2 {
    font-size: 1.1rem;
    font-weight: 800;
    flex: 1;
    color: var(--000);
}
.sec_title .sec_sub_title span img { vertical-align: middle; margin-right: 5px; }
.sec_title .sec_sub_title a { font-size: 0.75rem; text-align: right; font-weight: 500; color: #333; }
.sec_title .sec_sub_title .fa { margin: 0 5px; }
.sec_title p { display: block; font-size: 0.85rem; color: #999; margin-top: 10px; font-weight: 500; }

.dis_percent { color: var(--main-color); }

.prd_list .thumb { position: relative; }
.prd_list .thumb img { width: 100%; border-radius: 4px; display: block; }

.prd_list .shoppingInfo .cart_button a {
    color: var(--000);
    font-size: 0.85rem;
    padding: 2px 0 0;
    box-sizing: border-box;
    margin: 10px 0;
    display: inline-block;
    text-align: center;
    width: 100%;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
}
.prd_list .shoppingInfo .cart_button a img {
    vertical-align: middle;
    transform: scale(0.7);
    padding-bottom: 2px;
}

.reveiw_count { font-size: 0.75rem; font-weight: 700; }
.reveiw_count .review_numer { color: #999; font-weight: 500; }
.reveiw_count .review_star { margin: 0 3px; }
.reveiw_count img { vertical-align: top; transform: scale(0.9); }

/* 3열 리스트(랭킹) */
.prd_list .list3x li {
    vertical-align: top;
    width: calc(33.33% - 10px);
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 40px;
}
.prd_list .list3x li:nth-child(3n) { margin-right: 0; }

.prd_list .thumb .ranking {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    background-color: var(--main-color);
    color: var(--fff);
    text-align: center;
    z-index: 11;
    border-radius: 2px 0 2px 0;
}

/* =========================
   SEC1 : MAIN BANNER
========================= */
#m_mainbn.mySwiper img { width: 100%; display: block; }

#m_mainbn.mySwiper .swiper-pagination-fraction {
    color: #fff;
    bottom: 15px;
    right: 10px;
    width: 10%;
    background-color: rgba(0,0,0,0.5);
    left: 85%;
    padding: 3px;
    border-radius: 30px;
}

#sec2 {
    padding: 0 10px 10px;
    margin: 20px 10px 40px;
    border-bottom: 1px solid #f4f4f4;
}

#sec2 ul {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

#sec2 ul li {
    width: 21%;
    text-align: center;
}

/* ✅ 버튼 영역 */
#sec2 ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3px 0px 3px;
    border: 1px solid #eee;        /* 얇은 테두리 */
    border-radius: 16px;
    background: #fff;
    transition: all 0.2s ease;
}
#sec2 ul li a {
  width: calc(100% + 4px);   /* 좌우 2px씩 */
  margin-left: -8px;
  margin-right: -8px;
}

/* 살짝 눌리는 느낌 */
#sec2 ul li a:active {
    background: #fafafa;
    border-color: #ddd;
}

/* ✅ 아이콘 크기 살짝 줄이기 */
#sec2 ul li a img {
    width: 78%;                    /* 기존 100% → 살짝 축소 */
    max-width: 72px;               /* 과하게 커지는 거 방지 */
    display: block;
}

/* 텍스트 */
#sec2 ul li a p {
    margin-top: 0px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

/* =========================
   SEC3 : NEW PRODUCT
========================= */
#sec3 { margin: 0 0 40px; }
#sec3 .sec_content { margin-right: 0; }
#sec3 .sec_title { margin-right: 5%; }


/* 썸네일 정사각 크롭 */
#sec3 .prd_list .thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
}
#sec3 .prd_list .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================
   SEC5 : BANNER IMAGE
========================= */
#sec5 { margin: 0 0 60px; }
#sec5 img { width: 100%; display: block; }

/* =========================
   SEC4 : RECOMMEND PRODUCT
========================= */
#sec4 { margin: 0 0 40px; }
#sec4 .sec_content { margin-right: 0; }
#sec4 .sec_title { margin-right: 5%; }

/* =========================
   SEC6 : SPECIAL (RANKING)
========================= */
/* ✅ SEC6(신규상품) : 추천상품처럼 3열 + 썸네일 정사각 크롭 */
#sec6 .list3x ul{
  display:flex;
  flex-wrap:wrap;
  gap:12px 10px; /* 세로/가로 간격(원하면 값만 조절) */
}

#sec6 .list3x li{
  width:auto;
  margin:0; /* 기존 margin-right/margin-bottom 무력화 */
  flex:0 0 calc((100% - 20px) / 3); /* 10px gap 2칸 = 20px */
}

/* 썸네일을 정사각으로 고정 + 이미지 크롭 */
#sec6 .prd_list .thumb{
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border-radius:4px;
}

#sec6 .prd_list .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* sec6: 3개만 노출 (4번째부터 숨김) */
#sec6 .list3x li:nth-child(n+4){
  display:none;
}

/* =========================
   SEC10 : VIDEO SLIDER
========================= */
#sec10 { margin: 0 0 40px; }
#sec10 .sec_content { margin-right: 0; }
#sec10 .sec_title { margin-right: 5%; }












/* BASIC css end */