/* BASIC css start */
body { font-family: "Pretendard Variable", Pretendard, sans-serif; } 
#wrap #contentWrapper .search-container { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; margin-bottom: 30px; } 
#wrap #contentWrapper .product-count { font-size: 20px; color: #333; font-weight: 700; } 
#wrap #contentWrapper .search-bar { display: flex; position: relative; width: calc(25% - 10px); } 
#wrap #contentWrapper .search-bar input { width: calc(100% - 40px); padding: 10px; border: 1px solid #ccc; border-radius: 4px 0 0 4px; font-size: 16px; } 
#wrap #contentWrapper .search-bar button { width: 40px; border: none; background-color: #007bff; color: white; cursor: pointer; border-radius: 0 4px 4px 0; } 
#wrap #contentWrapper .search-bar button img { width: 20px; height: auto; vertical-align: middle; } 
#wrap #contentWrapper .banner-space { position: sticky; top: 0; z-index: 10;  text-align: center; width:100%;   } 
#wrap #contentWrapper .banner-space img { width: 80%; height: auto;  display: inline-block;  } 
#wrap #contentWrapper .banner-space button { width: auto;  padding: 10px 20px; */font-size: 16px; line-height: normal; white-space: nowrap;  }
#wrap #contentWrapper .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); position: sticky; top: 50px; background-color: white; z-index: 10; padding: 10px 0; } 
#wrap #contentWrapper .category-grid button { flex: 1; min-width: auto; padding: 15px; border: 1px solid #ccc; background-color: #ffffff; cursor: pointer; border-radius: 0; text-align: center; font-size: 16px; font-weight: 500; transition: font-weight 0.3s; } 
#wrap #contentWrapper .category-grid button.active { background-color: #007bff; color: white; font-weight: 700; } 
#wrap #contentWrapper .category-grid button:hover { background-color: #ddd; } 
.custom-category-section button { display: block; width: 100%; padding: 15px 0; margin-top: 20px; font-size: 16px; font-weight: 700; color: #007bff; background-color: #f8f9fa; border: 1px solid #007bff; border-radius: 4px; text-align: center; cursor: pointer; transition: background-color 0.3s, color 0.3s; position: relative;
z-index: 1; } 
.custom-category-section button:hover { background-color: #007bff; color: #fff; } 
#wrap #contentWrapper .share-icon { position: absolute; top: 10px; right: 180px; cursor: pointer; width: 48px !important;  height: 48px !important; } 
#sharePopup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 1000; } 
#sharePopup .popup-content { background: white; padding: 30px; border-radius: 8px; text-align: center; width: 300px; } 
#sharePopup .popup-content h3 { font-size: 24px; margin-bottom: 20px; } 
#sharePopup .share-url { display: flex; justify-content: center; align-items: center; } 
#sharePopup .share-url input { font-size: 16px; padding: 10px; margin-right: 5px; width: calc(100% - 100px); border: 1px solid #ccc; border-radius: 4px; background-color: #f0f0f0; } 
#sharePopup .share-url button { font-size: 16px; padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } 
#sharePopup .close-popup { font-size: 16px; padding: 10px 20px; background-color: #f0f0f0; color: black; border: none; cursor: pointer; border-radius: 5px; margin-top: 20px; width: 100%; } 
.custom-category-section { margin-top: 60px; margin-bottom: 50px; padding-top: 20px; } 
.custom-category-section h4 { font-size: 24px; font-weight: bold; margin-bottom: 20px; } 
.custom-item-wrap { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; } 
.custom-item-cont { width: calc(20% - 20px); box-sizing: border-box; padding: 10px; background-color: #fff; display: flex; flex-direction: column; position: relative; } 
.custom-item-list .thumb { margin-bottom: 10px; position: relative; } 
.custom-item-list .thumb img { width: 100%; height: 260px; } 
.custom-prd-info { display: flex; flex-direction: column; justify-content: flex-start; height: 100%; } 
.custom-prd-info ul { list-style: none; padding: 0; margin: 0; flex-grow: 1; } 
.custom-prd-info li { margin-bottom: 5px; } 
.custom-prd-ico { height: 24px; display: flex; align-items: center; } 
.custom-prd-name { display: block; height: 24px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
.custom-prd-name a { font-size: 16px; font-weight: 500; } 
.custom-prd-price { font-size: 18px; font-weight: 700; margin-top: 10px; height: 24px; line-height: 24px; } 
.custom-prdname-price-wrap { display: flex; flex-direction: column; justify-content: flex-end; flex-grow: 1; } 
.custom-prd-bottom { position: relative; display: flex; align-items: center; } 
.custom-prd-wish { margin-left: auto; padding: 5px 0; margin-right: 8px; margin-top: 3px; margin-bottom: 20px; } 
.custom-prd-wish a > span { display: flex; } 
.custom-prd-wish .my-wish-count { display: none; } 
.custom-item-cont .cart_icon { position: absolute; bottom: 10px; right: 10px; z-index: 1; width: 47px; height: 47px; display: flex; justify-content: center; align-items: center; background-color: rgba(128, 128, 128, 1); border-radius: 50%; transition: background-color 0.1s; } 
.custom-item-cont .cart_icon a { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border-radius: 50%; } 
.custom-item-cont .cart_icon img { position: relative; width: 24px; height: 24px; object-fit: contain; } 
.custom-item-cont .cart_icon:hover { background-color: #007bff; } 
#productClass .swiper-button-prev, #productClass .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 .swiper-button-prev { left: 10px; z-index: 2; } 
#productClass .swiper-button-next { right: 10px; } 
#productClass .swiper-button-prev:not(.swiper-button-disabled):hover, #productClass .swiper-button-next:not(.swiper-button-disabled):hover { background-color: #007bff; color: #fff; } 
#productClass .swiper-button-prev:not(.swiper-button-disabled), #productClass .swiper-button-next:not(.swiper-button-disabled) { background-color: #ddd; } 
#productClass .swiper-button-prev::after, #productClass .swiper-button-next::after { font-size: 14px; }
#otgpLoadMore, #kingopLoadMore, #seaeopLoadMore, #midangpLoadMore {
    display: none;
}

.coupon-section { background-color: #f8f9fa; width: 80%;  margin: 0px auto; position: relative; z-index: 1;}
.coupon-details-toggle { display: block; width: 100%; cursor: pointer; font-size: 16px;  padding: 10px 0; background-color: #f8f9fa; border: none; text-align: center; }
.coupon-details-toggle .toggle-icon { margin-left: 5px; transition: transform 0.3s ease; }
.coupon-details-toggle.active .toggle-icon { display: inline-block; transform: rotate(180deg);}
.coupon-details.open { display: block; max-height: 1000px;  }
.coupon-details { padding: 10px; background-color: #f8f9fa; border-top: 1px solid #e9ecef; font-size: 14px; display: none; overflow: hidden; transition: max-height 0.3s ease-out;}
/* BASIC css end */