

 /* 분류상품 땡겨오기 */
 /* 기본 */
 
 div [class^="recommend"] ul.tabList { z-index: 1 !important; } 
 /* div [class^="recommend"] .conWrapper.-promotion { margin:0; margin-top:50px; display: none; } */
 /* .recommend [data-ref="promotion"] .-carousel.swiper { max-width:1400px; } */
 div [class^="recommend"] [data-ref="promotion"] .-carousel.swiper ul.swiper-wrapper { flex-wrap:wrap; gap:10px; align-items: start; } 
 div [class^="recommend"] [data-ref="promotion"] .-carousel.swiper ul.swiper-wrapper.col-4 li { width: calc(20% - 10px); } 
 div [class^="recommend"] li[data-product-no] > a { gap:4px !important; width: 100%; } 
 div [class^="recommend"] li[data-product-no] figure { position:relative; overflow: hidden; width: 100%; margin-bottom: 10px; } 
 div [class^="recommend"] li[data-product-no] figure img:nth-child(1) { position:absolute; opacity:1; z-index:3; top:0; left:0; transition:0.3s } 
 div [class^="recommend"] li[data-product-no] figure img:hover:nth-child(1) { opacity:0; } 
 
 div [class^="recommend"] li[data-product-no] .-badges{position: absolute} 
 
 div [class^="recommend"] li[data-product-no] .-brand { font-size: clamp(9px, 1rem, 11px) !important; font-weight: 400; } 
 div [class^="recommend"] li[data-product-no] .-heading { gap: 0; margin-bottom: 0; } 
 div [class^="recommend"] li[data-product-no] .-product span,div [class^="recommend"] li[data-product-no] .-product { font-size: clamp(12px, 1rem, 13px) !important; font-weight: 400 !important; line-height: 1.2; } 
 div [class^="recommend"] [data-ref="promotion"] .-information { width:-webkit-fill-available; } 
 div [class^="recommend"] li[data-product-no] :is([data-ref="original-price"],[data-ref="discounted-box"]) { font-size: clamp(11px, 1rem, 12.5px) !important; font-weight: 300; } 
 div [class^="recommend"] li[data-product-no] [data-ref="membership-box"] { font-size: clamp(13px, 1rem, 13.5px) !important; font-weight: 400; } 
 div [class^="recommend"] li[data-product-no] [data-ref="membership-price-percentage"] { color:darkred } 
 div [class^="recommend"] li[data-product-no] [data-ref="benefits"] { display:none } 
 
 /* 이미지위에 올림 */
 div [class^="recommend"] .imgCon { position:relative; } 
 div [class^="recommend"] .imgCon a.tag[data-product-no] { position: relative; position:absolute; width: 30%; height: 30%; /* background: #000; */display:flex; justify-content:center; align-items:center; text-align:center; cursor: pointer; as: 1/1; } 
 div [class^="recommend"] .imgCon a.tag[data-product-no] .target { position: absolute; display: flex; background: rgb(255 255 255 / 20%); left: 50%; top: 50%; width: 35px; height: 35px; border-radius: 100%; z-index: 0; justify-content: center; align-items: center; font-size: 25px; translate:(-50%,-50%); font-weight: 400; padding-bottom: 3px; color: #ffffff; transition: 0.3s; border: 1px solid #fff; } 
 
 div [class^="recommend"] .imgCon a.tag[data-product-no]:hover .target { width: 40px; height: 40px; margin-left: -2.5px; margin-top: -2.5px; font-size: 20px; } 
 div [class^="recommend"] .imgCon a.tag[data-product-no] li { display: none; position: absolute; background: #ffffff; left: 50%; top: 50%; width: 130px; padding:10px; transform: translate(-50%,-50%); overflow: hidden; } 
 div [class^="recommend"] .imgCon a.tag[data-product-no].active li { display: block; } 
 div [class^="recommend"] .imgCon a.tag[data-product-no] li figure img { top: 50% !important;; transform: translateY(-50%) !important;; position: absolute; width: 100%; } 
 div [class^="recommend"] .imgCon a.tag[data-product-no] li :is([data-ref="original-price"],[data-ref="discounted-box"],[data-ref="membership-price-percentage"],[data-ref="membership-box"]) { display:none; } 
 div [class^="recommend"] .imgCon a.tag[data-product-no] [data-ref="name"]:after { display:inline-block; content:'›'; color:#000; margin:0 5px } 






.contentslayout,.secondCare,.conWrapper {
     .ec-base-product {width: 100%; max-width: 1400px;padding-left: var(--space-normal);padding-right: var(--space-normal);} 
    .ec-base-product .prdList > li{margin: 0 !important;}
    .ec-base-product .prdList *{ text-align: left !important;        line-height: 1.4; }
     .ec-base-product .prdList{padding-left: 0; padding-right: 0;}
    .ec-base-product .prdList .-heading{margin-bottom: 0 !important;}
    ul.-items li.-item.-product .-information > .-heading .-brand{font-size: clamp(11px, 1rem, 12px) !important;font-weight: 400;}
    ul.-items li.-item.-product.-large .-information > .-heading .-product, ul.-items li.-item.-product.-large .-information > .-heading .-product *{}
    ul.-items li.-item.-product.-large .-information > .-heading .-product, ul.-items li.-item.-product.-large .-information > .-heading .-product *{font-size: clamp(13px, 1rem, 15px) !important;font-weight: 500 !important;line-height: 1.2 !important;}
ul.-items li.-item.-product.-large .-information > .-heading{margin-bottom: 0;}
ul.-items li.-item.-product.-large .-information{padding: 0; padding-top: 1rem; gap: 0.5rem;}
ul.-items li.-item.-product .-information > .-description > .-prices :is(.-membership,.-discounted) .-percent,
div.-description > div.-prices > div.-membership > span.-percent > strong > span{color:darkred !important}
ul.-items li.-item.-product.-large .-information > .-description > .-prices [data-ref="membership-box"],
ul.-items li.-item.-product.-large .-information > .-description > .-prices [data-ref="discounted-box"]{font-size: clamp(13.5px, 1rem, 14px) !important;font-weight: 400;}
ul.-items li.-item.-product.-large .-information > .-description > .-prices > .-original{font-size: clamp(12px, 1rem, 13px) !important;font-weight: 200;}
ul.-items li.-item .-benefits span div{padding: 2px 8px !important;}
ul.-items li.-item .-benefits span i{color: inherit;}
ul.-items li.-item .-benefits span{display: none;}
} 


@media(max-width: 1100px) { 
 div [class^="recommend"] [data-ref="promotion"] .-carousel.swiper ul.swiper-wrapper.col-4 li { width: calc(25% - 10px); } 
 } 



@media(max-width:768px) { 
 div [class^="recommend"] [data-ref="promotion"] .-carousel.swiper ul.swiper-wrapper { column-gap: 6px; row-gap: 20px; } 
 div [class^="recommend"] [data-ref="promotion"] .-carousel.swiper ul.swiper-wrapper.col-4 li { width: calc(33.333% - 4px); } 

 /* 이미지위에 올림 */
 div [class^="recommend"] .imgCon a.tag[data-product-no] { width:20%; height:20% } 
 div [class^="recommend"] .imgCon a.tag[data-product-no] .target { width: 25px; height: 25px; font-size: 16px; } 
 div [class^="recommend"] .imgCon a.tag[data-product-no]:hover .target { width: 30px; height: 30px; margin-left: -2.5px; margin-top: -2.5px; font-size: 12px; } 
 div [class^="recommend"] .imgCon a.tag[data-product-no] li { width: 150%; padding:0px; min-width:160px; border-radius: 4px; } 
 div [class^="recommend"] .imgCon a.tag[data-product-no] li figure { width:40%; min-width:70px; margin-bottom:0; } 
 div [class^="recommend"] .imgCon a.tag[data-product-no] li [data-ref="link"] { display:flex; text-align:left; align-items: center; } 
 div [class^="recommend"] .imgCon a.tag[data-product-no] li .-information { padding:10px 6px } 
 div [class^="recommend"] .imgCon a.tag[data-product-no] li [data-ref="name"] span { width: 100% !important; /* display:block; */font-size: 11px !important; !i; !; } 
 



 .contentslayout,.secondCare,.conWrapper {
   .prdList {gap: 4px !important;}
   .prdList  li *{text-align: left !important;justify-content: flex-start;}
   .prdList  li{width: calc(33.333% -  0px); padding: 0 2px;}
     .ec-base-product {width: 100%; max-width: 1400px;padding-left: var(--space-normal);padding-right: var(--space-normal);} 
    .ec-base-product .prdList > li{margin: 0 !important;}
    ul.-items li.-item.-product .-information > .-heading .-brand{font-size: clamp(10px, 1rem, 10px) !important;font-weight: 400;}
    ul.-items li.-item.-product.-large .-information > .-heading .-product, ul.-items li.-item.-product.-large .-information > .-heading .-product *{}
    ul.-items li.-item.-product.-large .-information > .-heading .-product, ul.-items li.-item.-product.-large .-information > .-heading .-product *{font-size: clamp(11px, 1rem, 11px) !important;font-weight: 500 !important;line-height: 1.2 !important;}
ul.-items li.-item.-product.-large .-information > .-heading{margin-bottom: 0;}
ul.-items li.-item.-product.-large .-information{padding: 0; padding-top: 0.5rem; gap:0.5rem;}
ul.-items li.-item.-product .-information > .-description > .-prices :is(.-membership,.-discounted) .-percent,
div.-description > div.-prices > div.-membership > span.-percent > strong > span{color:darkred !important}
ul.-items li.-item.-product.-large .-information > .-description > .-prices [data-ref="membership-box"],
ul.-items li.-item.-product.-large .-information > .-description > .-prices [data-ref="discounted-box"]{font-size: clamp(11px, 1rem, 11px) !important;font-weight: 400;}
ul.-items li.-item.-product.-large .-information > .-description > .-prices > .-original{font-size: clamp(10px, 1rem, 11px) !important;font-weight: 200;}
ul.-items li.-item .-benefits span div{padding: 4px 6px !important;}
ul.-items li.-item.-product.-large .-information > .-description > .-prices,
ul.-items li.-item.-product.-large .-information > .-heading{gap: 0;}
ul.-items li.-item .-benefits span i{color: inherit;}
} 




 } 


@media (max-width:520px) { 
 div [class^="recommend"] [data-ref="promotion"] .-carousel.swiper ul.swiper-wrapper.col-4 li { width: calc(50% - 3px); } 
 div [class^="recommend"] li[data-product-no] .-brand, div [class^="recommend"] li[data-product-no] :is([data-ref="original-price"],[data-ref="discounted-box"]) { font-size: clamp(10px, 0.7rem, 10px) !important;; } 
 div [class^="recommend"] li[data-product-no] .-product span,div [class^="recommend"] li[data-product-no] .-product , div [class^="recommend"] li[data-product-no] [data-ref="membership-box"] { font-size: clamp(10px, 1rem, 11px) !important } 




 div [class^="recommend"] .imgCon a.tag[data-product-no] { width: 15%; } 
 div [class^="recommend"] .imgCon a.tag[data-product-no] li { min-width: 120px; } 
 div [class^="recommend"] .imgCon a.tag[data-product-no] li .-information { width: -webkit-fill-available; } 
 div [class^="recommend"] li[data-product-no] .-brand { font-size: 7px !important; font-weight: 400; } 
 div [class^="recommend"] li[data-product-no] .-product { font-size: 8px !important; width: 100%; } 
 div [class^="recommend"] .imgCon a.tag[data-product-no] li [data-ref="name"] span { display: inline-block; width: fit-content !important; } 
 div [class^="recommend"] .imgCon a.tag[data-product-no] li figure { width:30%; min-width:40px; display: none; } 
 

 } 