#contents { width: 100%; } .swiper-container-wrapper { width: 100%; max-width: 500px; margin: 0 auto; padding: 15px 0; position: relative; } .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: 16px; right: 16px; z-index: 10; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15); padding: 6px 14px; border-radius: 100px; 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: #000; padding: 5% 0%; }.market_logo { position: absolute; left: -15vw; bottom: 0; width: 100%; max-width: 150px;}.market_logo img { width: 100%;}.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: #000000 #9E9E9E;}.qu_box pre::-webkit-scrollbar { width: 10px; /* 세로 스크롤바 너비 */ height: 10px; /* 가로 스크롤바 높이 */}.qu_box pre::-webkit-scrollbar-track { background: #f8fafc; /* 스크롤바 트랙(배경) 색상 */ border-radius: 8px;}.qu_box pre::-webkit-scrollbar-thumb { background-color: #cbd5e1; /* 스크롤바 막대 색상 */ border-radius: 8px; /* 막대 모서리 둥글게 */}.qu_box pre::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; /* 마우스 오버 시 색상 진하게 */} @media (max-width: 640px) { .swiper-container-wrapper { width: 100%; max-width: 100%; padding: 3%; /* 모바일 풀스크린 감성 */ } .swiper { border-radius: 0; /* 모바일에서는 꽉 차게 직각 처리 (또는 12px 선택 가능) */ 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. 기본 공통 플로팅 버튼 스타일 (2초 후 등장 애니메이션) */.cta-floating-btn { position: absolute; text-align: center; bottom: 24px; right: 24px; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 12px 20px; background: rgb(51 220 16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff !important; /* background-color: #000; */ font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); border: 1px solid rgba(255, 255, 255, 0.4); opacity: 0; transform: scale(0.8); animation: fadeInButton 0.6s cubic-bezier(0.16, 1, 0.3, 1) 2s forwards; transition: transform 0.3s ease, background 0.3s ease;}/* 등장 키프레임 */@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 { width: 80px; height: 80px; border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; padding: 0; animation: fadeInButton 0.6s cubic-bezier(0.16, 1, 0.3, 1) 2s forwards, morphingBlob 6s ease-in-out infinite 2.6s; /* 등장 후 우글우글 변형 반복 */}/* 우글우글 모양이 부드럽게 변하는 애니메이션 */@keyframes morphingBlob { 0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 50%; } 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }}#link01, #link02, #link03, #link04 { top: 13%;}#link05 { top: 27%;}#link06 { top: 18%; left: 5%; }#link07 { top: 26%; right: 3%; }#link08 { bottom: 24%; left: 0%; }#link09 { bottom: 17%; right: 0%; }@media screen and (max-width: 800px) {.cta-floating-btn.blob-btn { width: 60px; height: 60px; }.cta-floating-btn {font-size: 2,778vw }} 01 / 08 '경동시장' 더보기 '망원시장' 더보기 '남대문시장' 더보기 '동묘 벼룩시장' 더보기 '서울 풍물시장' 더보기 '서울 한방진흥원' 더보기 '망원한강공원' 더보기 '문화역 서울 284' 더보기 '청계천' 더보기 또 나만 몰랐지..? 🚨 지난 5월 14일, 망원시장이 평소보다 훨씬 더 HOT했던 진짜 이유! 기다리고 기다리던 K-관광마켓 2기 스마일 캠페인 발대식 현장에 다녀왔습니다! ✨ 전국에서 비행기, 배, 기차 타고 오신 11개 시장 상인회장님들의 열정 가득했던 순간을 압축 요약! 🗺️ 요즘 힙한 거 여기 다 있다! 전국에서 엄선된 2기 스마일 캠페인 참여 시장을 소개합니다! � �🎒 K-대표 11개 전통시장 라인업 서울 경동시장 서울 망원시장 강원 속초관광수산시장 인천 신포국제시장 경기 수원남문시장 충북 단양구경시장 경북 안동구시장연합 대구 서문시장 전북 전주남부시장 부산 해운대시장 제주 동문재래시장 💡우리가 바로 K-관광의 스마일 국가대표! 이번 K-관광마켓 2기는 외국인 관광객들도 안심하고 즐길 수 있도록 상인회장님들과 상인분들이 합심해 4대 슬로건을 전면에 내걸었습니다! � �✅ 친절은 기본! 언제나 밝은 미소로 맞이하기 ✅ 청결·위생 철저! 안심하고 먹을 수 있는 깨끗한 환경 ✅ 카드결제환영! 눈치 보지 않고 편리하게 슥- 결제 ✅ 가격정찰제 도입! 바가지요금 걱정 없이 믿고 구매 앞으로 K-관광마켓 11개의 전통시장이 얼마나 더 HOT해질지 벌써부터 기대치 폭발 중..🔥 --> 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