.cont_wrap { width: 100%; padding: 5% 0; } .cont_wrap .swiper-container-wrapper { position: relative; width: 100%; max-width: 500px; margin: 0 auto; padding: 15px 0; } .cont_wrap .swiper { position: relative; width: 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(204, 255, 0, 0.15); } .cont_wrap .swiper-slide { position: relative; width: 100%; background: #1a1a1a; overflow: hidden; } .cont_wrap .swiper-slide img { display: block; width: 100%; height: auto; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); } .cont_wrap .swiper-pagination-progressbar { top: 0 !important; height: 3px !important; background: rgba(255, 255, 255, 0.1) !important; } .cont_wrap .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #ccff00 !important; box-shadow: 0 0 10px #ccff00; } .custom-counter { position: absolute; bottom: 0; right: 0; z-index: 10; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #ffffff; } .custom-counter .current { color: #ccff00; } .cont_wrap .swiper-button-next, .cont_wrap .swiper-button-prev { position: absolute; top: 50%; width: 44px; height: 44px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 50%; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; } .cont_wrap .swiper-button-next:after, .cont_wrap .swiper-button-prev:after { font-size: 16px; font-weight: bold; } .cont_wrap .swiper-button-next:hover, .cont_wrap .swiper-button-prev:hover { background: #ccff00; color: #000000; border-color: #ccff00; box-shadow: 0 0 15px rgba(204, 255, 0, 0.6); } @media (max-width: 640px) { .cont_wrap { padding: 3%; } .cont_wrap .swiper-container-wrapper { max-width: 100%; padding: 3%; } .cont_wrap .swiper { border-radius: 0; box-shadow: none; } .cont_wrap .swiper-button-next, .cont_wrap .swiper-button-prev { display: none; } } /* 플로팅 버튼 기본 스타일 */ .btn_more_float { display: inline-flex; align-items: center; justify-content: flex-end; width: 40px; height: 40px; padding: 0 13px; border-radius: 50px; background-color: #006a71; color: #ffffff; text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, box-shadow 0.2s ease; overflow: hidden; white-space: nowrap; cursor: pointer; box-sizing: border-box; position: absolute; top: 0; left: 0; z-index: 5; } .btn_more_float .btn_text { opacity: 0; max-width: 0; font-size: 14px; font-weight: 600; margin-right: 0; transition: opacity 0.25s ease, max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), margin-right 0.35s ease; } .btn_more_float .btn_arrow { font-size: 16px; font-weight: bold; line-height: 1; transition: transform 0.3s ease; } .btn_more_float:hover, .btn_more_float:focus { width: 105px; background-color: #005257; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); } .btn_more_float:hover .btn_text, .btn_more_float:focus .btn_text { opacity: 1; max-width: 60px; margin-right: 6px; } .btn_more_float:hover .btn_arrow, .btn_more_float:focus .btn_arrow { transform: translateX(2px); } /* 각 버튼 위치 설정 (PC) */ #link01 { top: 90px; left: 215px; } #link02 { top: 95px; left: 320px; } #link03 { top: 90px; left: 205px; } #link04 { top: 90px; left: 180px; } #link05 { top: 90px; left: 205px; } #link06 { top: 90px; left: 280px; } #link05_10 { top: 580px; left: 370px; } /* 10번 장표 우측 하단 */ /* 11번 장표 4분할 사진 우측 상단 모서리 */ #link07 { top: 160px; left: 195px; } #link08 { top: 160px; left: 420px; } #link09 { top: 410px; left: 195px; } #link10 { top: 410px; left: 420px; } /* 반응형 모바일 위치 설정 */ @media (max-width: 640px) { .cont_wrap { padding: 0; } .btn_more_float { width: 6vw; height: 6vw; padding: 0 1.5vw; } .btn_more_float span { font-size: 3.5vw; } /* 10월 PC 기준 비율로 변경된 모바일 좌표 */ #link01 { top: 17.3vw; left: 38.7vw; } #link02 { top: 17.2vw; left: 57.1vw; } #link03 { top: 17.3vw; left: 36.2vw; } #link04 { top: 17.3vw; left: 31.5vw; } #link05 { top: 12.3vw; left: 36.2vw; } #link06 { top: 16.3vw; left: 41.3vw; } #link05_10 { top: 100.1vw; left: 60.5vw; } /* 11번 장표 4분할 사진 모바일 위치 */ #link07 { top: 26.9vw; left: 35.7vw; } #link08 { top: 26.9vw; left: 73.9vw; } #link09 { top: 70.1vw; left: 35.7vw; } #link10 { top: 70.1vw; left: 73.9vw; } } 01 / 11 더보기 → 더보기 → 더보기 → 더보기 → 더보기 → 더보기 → 더보기 → 더보기 → 더보기 → var swiper = new Swiper('.mySwiper', { direction: 'horizontal', loop: true, speed: 700, touchRatio: 1.2, resistanceRatio: 0.8, pagination: { el: '.swiper-pagination', type: 'progressbar' }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, on: { init: function() { var totalSlides = this.el.querySelectorAll('.swiper-slide:not(.swiper-slide-duplicate)').length; var totalEl = document.querySelector('.custom-counter .total'); if (totalEl) { totalEl.textContent = totalSlides