/* BASIC css start */ /* loc-navi */ #productClass .loc-navi { } #productClass .loc-navi dt { display: none; } /* 숨김 처리 */ #productClass .loc-navi dd { display:none; 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 { display:center; font-family: "Pretendard Variable", Pretendard, sans-serif; padding: 20px 0 20px; font-size: 32px; color: #111111; font-weight: 600; text-align: center; } #productClass .cate-wrap .class-list ul { display: none; 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); } /* 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; } /* 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 */