/* ========== 분류페이지 반응형 효과 ========== */
/* 스크롤 등장 애니메이션 */
.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);
}
문의
[1] 