/* ========== 분류페이지 반응형 효과 ========== */ /* 스크롤 등장 애니메이션 */ .boxitem { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .boxitem.is-visible { opacity: 1; transform: translateY(0); } /* 순차 등장 딜레이 (4열 기준) */ .boxitem:nth-child(4n+1) { transition-delay: 0s; } .boxitem:nth-child(4n+2) { transition-delay: 0.1s; } .boxitem:nth-child(4n+3) { transition-delay: 0.2s; } .boxitem:nth-child(4n+4) { transition-delay: 0.3s; } /* 썸네일 호버 - 이미지 줌 */ .boxitem a.prdImg { display: block; overflow: hidden; border-radius: 4px; background-color: #f7f7f7; } .boxitem a.prdImg img { width: 100%; display: block; transition: transform 0.5s ease, filter 0.5s ease; } .boxitem:hover a.prdImg img { transform: scale(1.05); filter: brightness(1.02); } /* 상품 정보 호버 - 살짝 올라감 */ .boxitem .boxText { transition: transform 0.3s ease; } .boxitem:hover .boxText { transform: translateY(-5px); }