#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: #87bf5c; 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; 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 전통시장의 변신은 무죄! HOT한 ‘K-관광마켓’ 2기 출격 단순히 물건만 사는 시장은 이제 그만! 로컬 고유의 매력에 트렌디한 감성 한 스푼, 그리고 외국인도 반할 글로벌 매력까지 싹 다 긁어모은 대한민국 대표 전통시장 11곳이 선정되었습니다! 지역의 자존심을 걸고 뭉친 2기 마켓들, 지금 바로 확인해 보세요! 🎒 K-대표 11개 전통시장 라인업 서울 경동시장 서울 망원시장 강원 속초관광수산시장 인천 신포국제시장 경기 수원남문시장 충북 단양구경시장 경북 안동구시장연합 대구 서문시장 전북 전주남부시장 부산 해운대시장 제주 동문재래시장 정감 넘치는 전통시장의 매력은 그대로 살리고, 이용은 대형마트보다 편리하게! 전 세계에 K-전통시장의 매력을 널리 알릴 K-관광마켓 2기 많이 응원해 주세요! 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