❮ ❯ ❮ ❯ ❮ ❯ /* 기본 레이아웃 */ .carousel-wrapper { max-width:1000px; margin:0 auto; position:relative; overflow:hidden; } input[name^="slider"] { display:none; } .carousel { position:relative; width:100%; } .slides { display:flex; transition:transform 0.5s ease-in-out; } .slide { min-width:100%; } .slide img { width:100%; display:block; border-radius:0; margin:0; } /* 화살표 버튼 스타일 */ .nav label { position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; line-height:42px; background:rgba(255,255,255,0.75); color:#000; font-size:22px; text-align:center; cursor:pointer; border-radius:50%; user-select:none; border:1px solid rgba(0,0,0,0.15); box-shadow:0 2px 5px rgba(0,0,0,0.08); transition:all .25s ease; display:none; /* ← 기본은 다 숨김! 상태별로 필요한 2개만 보이게 */ .nav label:hover { background:rgba(255,255,255,0.95); transform:translateY(-50%) scale(1.08); } .nav .prev { left:15px; } .nav .next { right:15px; } /* 슬라이드 이동 */ #slideNew-1:checked ~ .carousel .slides { transform:translateX(0%); } #slideNew-2:checked ~ .carousel .slides { transform:translateX(-100%); } #slideNew-3:checked ~ .carousel .slides { transform:translateX(-200%); } /* 🔥 상태별로 '딱 2개' 화살표만 보이게 */ #slideNew-1:checked ~ .carousel .nav .nav-when-1 { display:block; } #slideNew-2:checked ~ .carousel .nav .nav-when-2 { display:block; } #slideNew-3:checked ~ .carousel .nav .nav-when-3 { display:block; } ❮ ❯ ❮ ❯ ❮ ❯ /* 🔹 추가 슬라이드용 (slider_new4 전용) */ #slideNew2-1:checked ~ .carousel .slides { transform: translateX(0%); } #slideNew2-2:checked ~ .carousel .slides { transform: translateX(-100%); } #slideNew2-3:checked ~ .carousel .slides { transform: translateX(-200%); } #slideNew2-1:checked ~ .carousel .nav .nav-when-A1 { display: block; } #slideNew2-2:checked ~ .carousel .nav .nav-when-A2 { display: block; } #slideNew2-3:checked ~ .carousel .nav .nav-when-A3 { display: block; } Your skin, your solution—discover Korean skincare by the numbers with numbuzin. Tailored formulas for every skin concern, made simple.