#contents { width: 100%; } .cont_wrap .swiper-container-wrapper { width: 100%; max-width: 500px; margin: 0 auto; padding: 15px 0; position: relative; } .cont_wrap .swiper { width: 100%; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(204, 255, 0, 0.15); /* 볼드한 림 라이트 */ position: relative; } .cont_wrap .swiper-slide { width: 100%; position: relative; 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-slide-active img { transform: scale(1.03); } .cont_wrap .swiper-pagination-progressbar { background: rgba(255, 255, 255, 0.1) !important; height: 3px !important; top: 0 !important; } .cont_wrap .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #ccff00 !important; /* Trend Color: Neon Lime */ 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); border: 0; padding: 0px 6px; border-radius: unset; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #ffffff; } .cont_wrap .swiper-button-prev, .swiper-rtl .swiper-button-next { right: auto; left: -7vw; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: -7vw; left: auto; } .custom-counter .current { color: #ccff00; /* 네온 포인트 */ } /* [MZ 요소 3] 미니멀 액센트 화살표 (Hover 시 스케일 업) */ .cont_wrap .swiper-button-next, .cont_wrap .swiper-button-prev { 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; position: absolute; top: 50%; } .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); } .box_modInfo, #btm_team_team_marg { max-width: 980px; margin: 0 auto; } .cont_wrap { width: 100%; background-color: #DDBD85; padding: 5% 0%; } .market_logo { position: absolute; left: -15vw; bottom: 0; width: 100%; max-width: 150px; } .market_logo img { width: 100%; } /* =================================================== [1. 색상 수정 구간] - 스크롤바 수정 코드 적용 =================================================== */ .qu_box pre { width: 100%; max-width: 500px; font-size: inherit; font-family: initial; white-space: pre-line; margin: 0 auto; color: #fff; height: 200px; display: block; margin-bottom: 5%; overflow-y: scroll; /* [표준/파이어폭스] (막대: 연한 베이지/화이트, 배경: 투명) */ scrollbar-width: thin; /* 스크롤바를 얇게 설정 */ scrollbar-color: rgba(255, 255, 255, 0.5) transparent; /* 막대 색상, 배경 색상 */ } /* [공통] 스크롤바 전체 너비 및 높이 설정 */ .qu_box pre::-webkit-scrollbar { width: 10px; /* 세로 스크롤바 너비 */ height: 10px; /* 가로 스크롤바 높이 */ } /* [크롬/사파리/웨일] 스크롤바 트랙(배경) - 투명 설정 */ .qu_box pre::-webkit-scrollbar-track { background: transparent; } /* [크롬/사파리/웨일] 스크롤바 막대 */ .qu_box pre::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.5); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; } /* [크롬/사파리/웨일] 스크롤바 마우스 오버 */ .qu_box pre::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.8); border: 2px solid transparent; background-clip: padding-box; } @media (max-width: 640px) { .swiper-container-wrapper { width: 100%; max-width: 100%; padding: 3%; } .swiper { border-radius: 0; box-shadow: none; } .swiper-button-next, .swiper-button-prev { display: none; } .con_wrap { padding: 3%; } .market_logo { display:none; } .qu_box { padding: 5%; } .qu_box pre { height:unset; } } .linkbox a { color:#fff !important; } /* 1. 기본 공통 플로팅 버튼 스타일 */ .cta-floating-btn { position: absolute; text-align: center; z-index: 10; display: inline-block; align-items: center; background: rgb(0 0 0); color: #fff !important; font-weight: 500; font-size: 14px; opacity: 0.4; } /* 등장 키프레임 */ @keyframes fadeInButton { 0% { opacity: 0; transform: scale(0.8) translateY(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* 호버 효과 */ .cta-floating-btn:hover { transform: scale(1.1); background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); } /* [스타일 A] 완벽한 정원(Circle)형 버튼 */ .cta-floating-btn.circle-btn { width: 72px; height: 72px; border-radius: 50%; padding: 0; text-align: center; } /* [스타일 B] 원 (Blob Shape) 스타일 */ .cta-floating-btn.blob-btn { padding: 0.5% 1%; } #link01, #link02 { top: 14%; left:27%; } #link03 { top: 14%; left:31%; } #link04 { top: 12%; left:70%; } #link05 { top: 17%; left:70%; } #link06 { top: 33%; left: 5%; } #link07 { top: 33%; right: 38%; } #link08 { bottom: 24%; left: 5%; } #link09 { bottom: 24%; right: 38%; } @media screen and (max-width: 800px) { .cta-floating-btn { font-size: 2.5vw; } } 01 / 01 전통시장도 MBTI가 있다면?🤔 첫 타자는 먹방력 만렙, 전통시장계의 대문자 ENFP #망원시장 망리단길이랑 한강공원까지 접수한 인싸력(E) 트렌디한 퓨전 먹거리 끊임없이 내놓는 창의력(N)까지 완-벽 상인들의 정겨운 인심과 단골들의 따뜻한 분위기(F) 계획 없이 가도 양손 가득 먹을 거 들고 나오는 망원시장 특유의 (P)모먼트 다들 공감하지? 한 번 오면 그냥 지나칠 수 없는 시장, 망원시장🥨 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.slides.length - (this.params.loop ? 2 : 0); var totalEl = document.querySelector('.custom-counter .total'); if (totalEl) { totalEl.textContent = totalSlides