/* BASIC css start */
/* ==========================================================
   1. 기본 분류 및 상단/하위 분류 스타일
   ========================================================== */

/* class-list */
#productClass .cate-wrap { overflow:hidden }
#productClass .cate-wrap .bcate { padding-bottom:10px; font-size:18px; color:#202020; font-weight:bold; border-bottom:1px solid #e3e3e3 }
#productClass .cate-wrap .class-list ul { border-bottom:1px solid #e3e3e3; *zoom:1 }
#productClass .cate-wrap .class-list ul:after { display:block; clear:both; content:'' }
#productClass .cate-wrap .class-list ul li { padding:15px 30px 16px 0; float:left }
#productClass .cate-wrap .class-list ul li a { display:block; font-size:13px; color:#919191 }

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

/* total-sort */
#productClass .total-sort { padding-top: 30px; }

/* 하위 분류 */
#productClass .item-cate { display: flex; justify-content: space-between; align-items: end; padding: 30px 0; }
#productClass .item-cate a { font-weight: bold; color: #1c1c1c; letter-spacing: -1px; }
#productClass .item-cate .scate a { font-size: 18px; }
#productClass .item-cont .thumb .main_icons { position:relative; }


/* ==========================================================
   2. 상품 분류 페이지 - 한 줄에 5개 상품 진열 설정 (추가·보완)
   ========================================================== */

/* 상품 목록 전체 컨테이너 정렬 보완 */
#productClass .item-cont {
    overflow: hidden !important;
    *zoom: 1;
    width: 100% !important;
}
#productClass .item-cont:after {
    display: block;
    clear: both;
    content: '';
}

/* 개별 상품 영역 (dl.item-list)을 한 줄에 5개(20%)씩 강제 배치 */
#productClass .item-cont dl.item-list {
    width: 25% !important;              /* 100%를 5등분하여 한 줄에 5개 노출 */
    float: left !important;             /* 왼쪽 정렬로 가로 나열 */
    box-sizing: border-box !important;  /* 패딩이 너비에 포함되도록 설정 */
    margin: 0 !important;               /* 여백 초기화 */
    padding: 0 10px 30px 0 !important;  /* 상품 간 간격 (우측 10px, 하단 30px) */
}

/* 5개 단위(5번째 상품마다) 오른쪽 여백 제거하여 줄바꿈 정렬 최적화 */
#productClass .item-cont dl.item-list:nth-child(5n) {
    padding-right: 0 !important;
}

/* ==========================================================
   3. [수정 포인트] 이미지 잘림 방지 및 전체 노출 설정
   ========================================================== */

/* 썸네일 영역 높이 제한 해제 및 오토 조정 */
#productClass .item-cont dl.item-list dt.thumb {
    width: 100% !important;
    height: auto !important;
    overflow: hidden;
    background: #fff; /* 이미지가 작을 경우 여백 배경색 처리 */
}

/* 내부 아이콘 및 링크 영역도 유연하게 대응 */
#productClass .item-cont dl.item-list dt.thumb a,
#productClass .item-cont dl.item-list dt.thumb .main_icons {
    display: block;
    width: 100% !important;
    height: auto !important;
}

/* 썸네일 이미지가 찌그러지거나 잘리지 않고 전체 비율 유지 */
#productClass .item-cont dl.item-list dt.thumb img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important; /* 이미지가 잘리지 않고 전체가 박스 안에 들어오도록 조정 */
    display: block;
}
/* BASIC css end */