/* New Main Visual Module Style */ .new-main-visual { position: relative; width: 100%; height: 500px; overflow: hidden; } .visual-slider, .visual-item { width: 100%; height: 100%; } .visual-item a { display: block; width: 100%; height: 100%; position: relative; text-decoration: none; } .visual-image { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.4s ease; } .visual-item a:hover .visual-image { transform: scale(1.05); } .visual-caption { position: absolute; bottom: 0; left: 0; width: 100%; padding: 40px; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); color: #fff; text-align: left; } .caption-title { font-size: 2rem; font-weight: 700; margin: 0 0 10px; line-height: 1.3; } /* πŸ’‘ [μΆ”κ°€] μš”μ•½κΈ€ μŠ€νƒ€μΌ */ .caption-desc { font-size: 1.1rem; line-height: 1.6; margin: 0; opacity: 0.9; max-width: 800px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 2μ€„κΉŒμ§€λ§Œ ν‘œμ‹œ */ -webkit-box-orient: vertical; } .slider-nav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 30px; pointer-events: none; } .slider-nav button { pointer-events: auto; background: rgba(0,0,0,0.3); border: none; color: #fff; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; font-size: 1.5rem; opacity: 0; transition: opacity 0.3s; } .new-main-visual:hover .slider-nav button { opacity: 1; } .empty-visual { display: flex; justify-content: center; align-items: center; font-size: 1.2rem; color: #888; background: #f0f0f0; }