/* BASIC css start */
/* loc-navi */
#productClass .loc-navi { margin-bottom: 20px; }
#productClass .loc-navi dt { display: none; } /* 숨김 처리 */
#productClass .loc-navi dd { font-size: 14px; color: #666666; }
#productClass .loc-navi dd a { color: #666666; text-decoration: none; }
#productClass .loc-navi dd a:hover { text-decoration: underline; }


/* cate-wrap */
#productClass .cate-wrap { }
#productClass .cate-wrap .bcate { font-family: "Pretendard Variable", Pretendard, sans-serif; padding: 20px 0 50px; font-size: 32px; color: #111111; font-weight: 600; text-align: center; }
#productClass .cate-wrap .class-list ul { display: flex; flex-wrap: wrap; gap: 15px; 30px; justify-content: center; align-items: center; }
#productClass .cate-wrap .class-list ul:after { display: block; clear: both; content: ''; }
#productClass .cate-wrap .class-list ul li { }
#productClass .cate-wrap .class-list ul li a { position: relative; font-family: "Pretendard Variable", Pretendard, sans-serif; font-weight: 500; display: block; font-size: 15px; color: #999999; padding: 15px 27px; transition: all 0.1s; background-color: #f9f9f9; border-radius: 30px; }
#productClass .cate-wrap .class-list ul li a:hover,
#productClass .cate-wrap .class-list ul li.sel a { color: #fff; background-color: var(--main-color); }

/* content 영역 내 카테고리 타이틀이나 이미지가 있을 때 */
#contentWrap #content .category_title_html + .prd-class-hd .loc-navi,
#contentWrap #content .category_title_html + .prd-class-hd + .page-body .bcate,
#contentWrap #content .category_title_html + .prd-class-hd + .page-body .class-list {
    display: none !important;
}

#contentWrap #content img[src*="category_title_img"] + .prd-class-hd .loc-navi,
#contentWrap #content img[src*="category_title_img"] + .prd-class-hd + .page-body .bcate,
#contentWrap #content img[src*="category_title_img"] + .prd-class-hd + .page-body .class-list {
    display: none !important;
}

/* best_sec */
#productClass .best_sec { margin-top: 30px; height: auto; }
#productClass .best_sec_inner { margin: 0 auto; position: relative; padding: 0 50px; height: auto; min-height: 400px; }
#productClass .best_sec p.best_tit { display: none; margin: 15px 0 30px; text-align: center; font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 26px; color: #111111; font-weight: 600; }
#productClass .best_prd_slider { overflow: hidden; }
#productClass .best_prd_slider .swiper-wrapper { padding: 20px 0; align-items: stretch; }
#productClass .best_prd_slider .item-cont.swiper-wrapper { width: auto; }
#productClass .best_sec .swiper-slide { height: auto; display: flex; flex-direction: column; padding: 0 5px; box-sizing: border-box; width: calc(100% / 5); }
#productClass .best_sec .swiper-slide .tumb { margin-bottom: 10px; position: relative; padding-top: 100%; }
#productClass .best_sec .swiper-slide .tumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
#productClass .best_sec .swiper-slide .info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; text-align: center; padding: 5px 0; height: auto; }
#productClass .best_sec .swiper-slide .info .prdbtn { width:100%; height: 15px; margin-bottom: 5px; }
#productClass .best_sec .swiper-slide .info .prdname {  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; }
#productClass .best_sec .swiper-slide .info .prd-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: auto;}
#productClass .best_sec .swiper-slide .info .prdprice { margin-top:-1px; margin-right: 10px; display: flex; }
#productClass .best_sec .swiper-slide .info .prd-icons { display: flex; align-items: center; }
#productClass .best_sec .swiper-slide .info .prd-preview{ display: none; margin-right: 10px; }
#productClass .best_sec .swiper-slide .info .prd-wish { margin-left: auto; }
#productClass .best_sec .swiper-slide .info .prd-wish a { display:flex; }
#productClass .best_sec .swiper-slide .info .prd-wish a > span { display: flex; }
#productClass .best_sec .swiper-slide .info .prd-wish .my-wish-count { display: none; }

/* cart 아이콘 */
#productClass .best_sec .swiper-slide .tumb .cart_icon { position: absolute; bottom: 10px; right: 10px; z-index: 1; width: 47px; height: 47px; display: flex; justify-content: center; align-items: center;    }
#productClass .best_sec .swiper-slide .tumb .cart_icon a {  width: 100%; height: 100%; border-radius: 50%; }
#productClass .best_sec .swiper-slide .tumb .cart_icon img { position: relative; width: 24px; height: 24px; object-fit: contain;}
#productClass .best_sec .swiper-button-prev,
#productClass .best_sec .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; background-color: #ddd; border-radius: 50%; color: #000; text-align: center; line-height: 40px; cursor: pointer; transition: all 0.1s;  z-index: 2; }
#productClass .best_sec .swiper-button-prev { left: 10px;  z-index: 2; }
#productClass .best_sec .swiper-button-next { right: 10px; }
#productClass .best_sec .swiper-button-prev:not(.swiper-button-disabled):hover,
#productClass .best_sec .swiper-button-next:not(.swiper-button-disabled):hover { background-color: var(--main-color); color: #fff; }
#productClass .best_sec .swiper-button-prev:not(.swiper-button-disabled),
#productClass .best_sec .swiper-button-next:not(.swiper-button-disabled) { background-color: #ddd; }
#productClass .best_sec .swiper-button-prev::after,
#productClass .best_sec .swiper-button-next::after { font-size: 14px; }


/* item-wrap */
#productClass .item-wrap { margin-top: 30px; height: auto; }
#productClass .item-wrap .item-info { display: flex; justify-content: space-between; flex-direction: column; text-align: left; padding 5px 0; margin: 0 auto; position: relative;  height: auto;}
#productClass .item-wrap .item-info .count { font-size: 20px; margin-bottom: 20px; position: relative; }
#productClass .item-wrap .item-order.sort { font-size: 20px; padding: 20px; text-align: right; position: absolute; right: 0; margin-top: 20px; }
#productClass .item-wrap .item-order.sort ul { margin: 0; }
#productClass .item-wrap .item-order.sort li { display: inline-block; margin-left: 10px; }
#productClass .item-wrap .item-order.sort li:first-child { margin-left: 0; }
#productClass .item-wrap .item-order.sort dt { display: none; }
#productClass .item-wrap .shopbrand_item_wrap.clear_fix { display: flex; flex-wrap: wrap; }
#productClass .item-wrap .shopbrand_item_wrap.clear_fix li.item_list { width: calc(20% - 20px); margin: 10px; box-sizing: border-box;  }
#productClass .item-wrap .shopbrand_item_wrap.clear_fix li.item_list .tumb.thumb { width: 280px; height: 280px; overflow: hidden; display: flex; justify-content: center; align-items: center; }
#productClass .item-wrap .shopbrand_item_wrap.clear_fix li.item_list .tumb.thumb a { display: block; }
#productClass .item-wrap .shopbrand_item_wrap.clear_fix li.item_list .tumb.thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
#productClass .item-wrap .shopbrand_item_wrap.clear_fix li.item_list .info { display: flex; justify-content: space-between; flex-direction: column; text-align: left; padding: 5px 0; height: auto; }
#productClass .item-wrap .shopbrand_item_wrap.clear_fix li.item_list .info .prdbtn { width:100%; height: 15px; margin-bottom: 12px; }
#productClass .item-wrap .shopbrand_item_wrap.clear_fix li.item_list .info .prdname { flex: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; margin-bottom: 15px; }
#productClass .item-wrap .shopbrand_item_wrap.clear_fix li.item_list .info .prdprice { margin-top: auto; }
#productClass .item-wrap .shopbrand_item_wrap.clear_fix li.item_list .info .prdname-price-wrap { display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1;}
#productClass .item-wrap .shopbrand_item_wrap.clear_fix li.item_list .info .prd-bottom { position: relative; display: flex; align-items: center;  }
#productClass .item-wrap .shopbrand_item_wrap.clear_fix li.item_list .info .prd-preview {display: none; margin-right: 10px; }
#productClass .item-wrap .shopbrand_item_wrap.clear_fix li.item_list .info .prd-wish { margin-left: auto; padding: 5px 0; margin-right: 8px; margin-top: 3px; margin-bottom: 20px;}
#productClass .item-wrap .shopbrand_item_wrap.clear_fix li.item_list .info .prd-wish a > span { display: flex; }
#productClass .item-wrap .shopbrand_item_wrap.clear_fix li.item_list .info .prd-wish .my-wish-count { display: none; }


/* 필터 */
.btn-filter {margin-top:30px; padding-left:25px; font-size:15px; font-weight:bold; background:url(/images/common/icon_filter.png) no-repeat left center;}
.filter-wrap * {font-family:'Malgun Gothic'; color:#202020; word-break:break-all;}
.layer-filter-wrap {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.4); z-index:200; content:'';}
.layer-filter-wrap .layer-filter {position:fixed; left:0; top:0; width:400px; height:100%; background:#fff; z-index:200; overflow:auto;}
.layer-filter-wrap .layer-filter::-webkit-scrollbar {width:6px;}
.layer-filter-wrap .layer-filter::-webkit-scrollbar-thumb {height:30%; background:#666; border:2px solid #fff;}
.layer-filter-wrap .layer-filter::-webkit-scrollbar-track {background:#fff;}
.layer-filter-wrap .layer-filter .tit {position:sticky; top:0; padding:30px; background:#fff; border-bottom:1px solid #f0f0f0; z-index:100;}
.layer-filter-wrap .layer-filter .tit h3 {display:inline-block; font-size:17px; font-weight:bold;}
.layer-filter-wrap .layer-filter .tit .total-count {display:inline-block; margin-left:15px; color:#b17efe; font-size:13px;}
.layer-filter-wrap .layer-filter .tit .btn-close {position:absolute; right:30px; top:30px; width:18px; height:18px; font-size:0px; text-indent:-9999px; background:url(/images/common/icon_close.png) no-repeat left center;}
.layer-filter-wrap .layer-filter .opt-box li > div {padding-top:7px;}
.layer-filter-wrap .layer-filter .opt-box li {padding:18px 30px 17px; border-bottom:1px solid #f0f0f0; background:url(/images/common/icon_arr_down.png) no-repeat 92% 22px; font-size:15px; font-weight:bold; cursor:pointer;}
.layer-filter-wrap .layer-filter .opt-box li.active {background:url(/images/common/icon_arr_up.png) no-repeat 92% 22px;}
.layer-filter-wrap .layer-filter .opt-box li input[type="checkbox"]{display:none;}
.layer-filter-wrap .layer-filter .opt-box li .chk-box label {position:relative; height:21px; line-height:19px; margin-top:10px; padding-left:26px; display:block; font-size:13px; font-weight:normal; cursor:pointer;}
.layer-filter-wrap .layer-filter .opt-box li .chk-box label:before {position:absolute; left:0; top:0; width:21px; height:21px; background:url(/images/common/chkbox_off.png) no-repeat center center; content:'';}
.layer-filter-wrap .layer-filter .opt-box li .chk-box input[type="checkbox"]:checked + label:before {background:url(/images/common/chkbox_on.png) no-repeat center center;}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code {display:flex; flex-wrap:wrap; gap:15px; margin-top:10px;}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code label {display:block; width:36px; height:36px; border:3px solid #fff; border-radius:50%; font-size:13px; font-weight:normal; box-shadow:0px 0px 1px 1px #dfdfdf; cursor:pointer;}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code input[type="checkbox"]:checked + label {box-shadow:0px 0px 1px 1px #000;}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code input[type="checkbox"]:checked + label + p {color:#202020;}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code p {padding-top:9px; color:#a6a6a6; font-size:12px; text-align:center; font-weight:normal;}
.layer-filter-wrap .layer-filter .select-filter {display:flex; flex-wrap:wrap; gap:5px; margin:20px 0 30px; padding:0 30px;}
.layer-filter-wrap .layer-filter .select-filter li {display:flex; align-items:center; padding:6px 10px 7px; background:#f8f8f8; border-radius:5px; font-size:13px;}
.layer-filter-wrap .layer-filter .select-filter li .btn-del {width:10px; height:10px; margin-left:5px; background:url(/images/common/icon_txt_delete.png) no-repeat right center; font-size:0px; text-indent:-9999px;}
.layer-filter-wrap .layer-filter .select-filter li .color-code {display:inline-block; width:18px; height:18px; margin-right:5px; border-radius:50%;}
.layer-filter-wrap .layer-filter .select-filter li .filter-text {max-width:200px;}
.layer-filter-wrap .layer-filter .btn-wrap {display:flex; margin:30px; border:1px solid #202020; border-radius:5px; box-sizing:border-box;}
.layer-filter-wrap .layer-filter .btn-wrap button {width:auto; padding:16px 0; text-align:center; background:#fff; font-size:14px; font-weight:bold;}
.layer-filter-wrap .layer-filter .btn-wrap button.btn-reset {width:100%; min-width:120px; border-radius:5px;}
.layer-filter-wrap .layer-filter .btn-wrap button.btn-search {min-width:220px; background:#202020; border-radius:0 5px 5px 0;}
.layer-filter-wrap .layer-filter .btn-wrap button span {display:inline-block; visibility:visible;}
.layer-filter-wrap .layer-filter .btn-wrap button span.fc-fff {color:#fff;}


/* cart 아이콘 */
#productClass .item-wrap .shopbrand_item_wrap.clear_fix li.item_list .cart_icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1;
    width: 47px;
    height: 47px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#productClass .item-wrap .shopbrand_item_wrap.clear_fix li.item_list .cart_icon a {
    width: 47px; /* 수정: a 요소의 너비를 아이콘과 동일하게 설정 */
    height: 47px; /* 수정: a 요소의 높이를 아이콘과 동일하게 설정 */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* 추가: 부모 요소에 position: relative; 가 설정되어 있으므로 자식 요소의 position을 조정 */
}

#productClass .item-wrap .shopbrand_item_wrap.clear_fix li.item_list .cart_icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    position: absolute; /* 추가: 이미지를 부모 요소의 중앙에 배치하기 위해 position: absolute; 설정 */
    top: 50%; /* 추가: 상단 위치 조정 */
    left: 50%; /* 추가: 좌측 위치 조정 */
    transform: translate(-50%, -50%); /* 추가: 중앙 정렬 */
}


/* 반응형 디자인을 위한 미디어 쿼리 */
@media screen and (max-width: 1200px) {
  #productClass .item-wrap .shopbrand_item_wrap.clear_fix li.item_list {
    width: calc(25% - 20px); /* 화면 크기가 1200px 이하일 때 상품을 4개씩 표시 */
  }
}

@media screen and (max-width: 900px) {
  #productClass .item-wrap .shopbrand_item_wrap.clear_fix li.item_list {
    width: calc(33.33% - 20px); /* 화면 크기가 900px 이하일 때 상품을 3개씩 표시 */
  }
}

@media screen and (max-width: 600px) {
  #productClass .item-wrap .shopbrand_item_wrap.clear_fix li.item_list {
    width: calc(50% - 20px); /* 화면 크기가 600px 이하일 때 상품을 2개씩 표시 */
  }
}


#productClass .best_sec .swiper-button-prev,
#productClass .best_sec .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: #000;
  color: #fff;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

#productClass .best_sec .swiper-button-prev {
  left: 10px;
}

#productClass .best_sec .swiper-button-next {
  right: 10px;
}
/* BASIC css end */