body {padding: 0; margin: 0;}
* {box-sizing: border-box;}

@keyframes fadeEffect {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes blurEffect {
    from { filter: blur(0px); }
    to { filter: blur(5px); }
}

/* 부드러운 스크롤을 위한 추가 스타일 */
.brand_slide .slick-track {
    will-change: transform;
}

.brand_slide {width: 970px;padding: 0;margin: 0px 0px 0 280px;height: 100%;overflow: hidden;cursor: grab;position: relative;}
.brand_slide .slick-list {height: 100%; overflow: visible;}
.brand_slide .slick-track {display: flex; gap: 20px; height: 100%; width: max-content; transform: translateX(0); will-change: transform;}
.brand_slide .slide {border: 1px solid #e7e7e7;border-radius: 8px;position: relative;overflow: hidden;cursor: pointer; opacity: 1; aspect-ratio:1; width: calc((100vw - 260px - 50px) / 4.3 - 20px); flex-shrink: 0;}
.brand_slide .item img {width: -webkit-fill-available;height: -webkit-fill-available;}
.brand_slide .item a {
    opacity: 0;display: flex;position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-decoration: 0;color: #ffffff;
    padding: 20px 20px 24px;flex-direction: column;justify-content: space-between; box-sizing: border-box;
}
.brand_slide .item a h4 {margin: 0 0 16px 0;font-size: 15px;line-height: 1.4;font-weight: normal;}
.brand_slide .item a div {display: flex;justify-content: space-between;align-items: flex-end;}
.brand_slide .item a div:has(span) {margin-bottom: -2px;}
.brand_slide .item a .saleRate {color: #ff887a; line-height: 1; background: #00000070; display: block; padding: 1px 6px 6px; border-radius: 4px;}
.brand_slide .item a .saleRate span {font-size: 12.5px; margin-bottom: -4px;}
.brand_slide .item a .price {font-size: 17px;text-align: right;flex-direction: column;}
.brand_slide .item a .price .origin {font-size: 13px;font-weight: 300;text-decoration: line-through;opacity: .8;}
.brand_slide .item:hover a {opacity: 1;animation: fadeEffect 0.3s;background: #00000070;}
.brand_slide .item.no-login:hover img {filter: blur(0px); animation: none;}
.brand_slide .item:hover img {filter: blur(5px);animation: blurEffect 0.3s;}
.brand_slide .item {transition: transform 0.2s ease, box-shadow 0.2s ease;}
.brand_slide .item:hover {transform: translateY(-2px);}
.logo {width: 210px; height: 210px; display: flex;align-items: center;justify-content: center; position: absolute; top: 0; left: 50px; z-index: 99; border: 1px solid #e7e7e7; border-radius: 8px;}
.logo div {display: flex;flex-direction: column;align-items: center;margin: 0 0 0 0;}
.logo div a {display: block;padding:0 16px 12px;}
.logo div a img {width:100%}
.logo div a.btn_brand {padding: 0 16px; text-decoration: none; color: #fff; font-size: 13px; border-radius: 100px; background: #555; line-height: 30px; position: relative;}
.logo div a.btn_brand:hover::before {content:''; display:block; position: absolute; z-index: 99; width:100%; height:100%; background: rgba(0 0 0 / 5%); top:0; left:0; border-radius: 100px;}
.slick-prev, .slick-next {position: absolute; width: 40px; height: 40px; background: rgba(0, 0, 0, 0.2); border-radius: 50%; transition: all 0.3s ease; z-index: 100; top: 50%; transform: translateY(-50%); border: none; cursor: pointer;}
.slick-prev::before, .slick-next::before {font-size: 0; content: none;}
.slick-prev {left: 0;background: rgba(0, 0, 0, .1) url(/assets/image/event/dar_tab_prev.png) no-repeat 1px center / 36px auto;}
.slick-next {right: 0px;background: rgba(0, 0, 0, .1) url(/assets/image/event/dar_tab_next.png) no-repeat 4px center / 36px auto;}
.slick-prev:hover, .slick-next:hover {background-color: rgba(0, 0, 0, 0.4);}
.slick-prev:hover {background: rgba(0, 0, 0, .3) url(/assets/image/event/dar_tab_prev.png) no-repeat 1px center / 36px auto;}
.slick-next:hover {background: rgba(0, 0, 0, .3) url(/assets/image/event/dar_tab_next.png) no-repeat 4px center / 36px auto;}