@charset "UTF-8";
/* **************************************************************************** */
/*	@Author: Hyewon  */
/* ***************************************************************************** */

/* ==============================
   1. Variables
   ============================== */
:root{--color-black:#000;--color-white:#fff;--color-primary:#1CABE2;--color-accent:#1CABE2;--color-text-secondary:#747474;--color-bg-light:#F4F4F4;--color-bg-lighter:#F7F7F7;--color-popup-accent:#d2d014;--color-guide-accent:#21BDEC;}
html, body { background-color: #FFFFFF;  font-family: 'Pretendard' !important; font-weight: 400; letter-spacing: -0.5px;}
body {  padding-top: 84px;top: 0 !important;}
@media only screen and (max-width: 1024px) {
body { padding-top: 64px;}
body.hidden {overflow-y: hidden;}
}
body.footer-popup-lock{overflow:hidden;}

body, h1, h2, h3, h4, h5, input, button, textarea {color: #262626; word-break: keep-all; font-family: 'Pretendard' !important;}
h1, h2, h3, h4, h5 { word-break: keep-all; font-weight: 800;}


/* ==============================
   2. Reset
   ============================== */
*, *::before, *::after{box-sizing:border-box;}
body{margin:0;font-family:"Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "돋움", Dotum, Arial, sans-serif;}
h1, h2, h3, h4, h5, h6{margin:0;font-size:inherit;font-weight:inherit;}
p{margin:0;}
ul, ol{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{padding:0;border:none;background:none;font:inherit;color:inherit;cursor:pointer;}
table{border-collapse:collapse;}
section{width:100%;max-width:none;padding-right:0;}

/* ==============================
   3. Utility
   ============================== */
.desktop-only{display:block;}
.mobile-only{display:none;}
.no-scrollbar::-webkit-scrollbar{display:none;}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none;}
.highlight-text{display:inline;padding:2px 5px;background-color:#fefc00;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.badge{display:inline-block;width:fit-content;padding:4px 14px;border-radius:20px;color:white;font-size:16px;font-weight:600;line-height:24px;}
.badge--primary{background:var(--color-primary);}
.badge--subway-5{background:#996CAC;}
.badge--subway-9{background:#BDB092;}
.badge--bus-trunk{background:#1075F8;}
.badge--bus-branch{background:#14CA07;}
.badge--bus-wide{background:#F30417;}
.badge--bus-gyeonggi{background:#1FA463;}
.btn_gnb {display:none;}
.btn_gnb .bar {position: absolute;left: 50%;width: 20px;height: 2px;border-radius: 9999px;background-color: #000;display:block;transform: translateX(-50%);transition: all 0.3s ease-in-out;}
.btn_gnb .bar:nth-child(1) { top: 10px; }
.btn_gnb .bar:nth-child(2) { top: 16px; }
.btn_gnb .bar:nth-child(3) { top: 22px; }
.btn_gnb.on .bar:nth-child(1) {top: 16px;transform: translateX(-50%) rotate(45deg);}
.btn_gnb.on .bar:nth-child(2) {opacity: 0;}
.btn_gnb.on .bar:nth-child(3) {top: 16px;transform: translateX(-50%) rotate(-45deg);}

/* ==============================
   4. Header / GNB (header.save_race_wrap) — 현재 사용 중인 헤더
   ============================== */
header.save_race_wrap{height:auto;position:fixed;top:0;left:0;z-index:20;width:100%;background:#fff;min-height:auto;border-bottom:1px solid #ddd;transition:all 0.3s ease-in-out;}
header.save_race_wrap .gnb_wrap{border:none;}
header.save_race_wrap .gnb_wrap.sticky{height:84px;}
header.save_race_wrap .gnb_wrap .logo_wrap > a img { width: 100%; height: 100%; object-fit: contain;}
header.save_race_wrap .gnb_wrap .gnb_inner{display:flex;width:100%;max-width:1600px;height:100%;padding:0 24px;margin:0 auto;background:#fff;color:var(--color-black);justify-content:space-between;align-items:center;}
header.save_race_wrap .gnb_wrap .logo_wrap{display:block;width:159px;height:auto;}
header.save_race_wrap .gnb_wrap .logo_wrap > a{display:block;width: 137px;height: 49px;background-repeat:no-repeat;background-size:contain;background-position:center;background-image:url("images/logo.png");}
header.save_race_wrap nav.gnb{min-height:auto;}
header.save_race_wrap .gnb_wrap #gnb > ul > li > a > span{margin-top:0;}
header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb{margin:0;border:0;width:auto;background-color:transparent;}
header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb .btn_close{display:none;}
header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb > ul{float:none;height:auto;background-color:transparent;}
header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb > ul > li{position:relative;width:auto;height:auto;border:0;background-color:transparent;cursor:pointer;}
header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb > ul > li > a{display:flex;height:auto;padding:0 24px;justify-content:center;align-items:center;}
header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb > ul > li:hover > a > span,
header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb > ul > li.hover > a > span{color:#1CABE2;}
header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb > ul > li > div.sub_2{margin-top:0;padding-top:0;}

/* GNB 2뎁스 드롭다운 배경 / 딤 */
#gnb{position:relative;}
.gnb_dropdown_bg{position:absolute;top:100%;left:0;width:100vw;margin-left:calc(50% - 50vw);height:0;overflow:hidden;background:#fff;
border-radius:0 0 10px 10px;transition:height .1s ease-in-out;z-index:1;}
.gnb_dropdown_bg.is-active{height: auto;}
.gnb > ul > li > div.sub_2{display:none;position:absolute;left:0;top:100px;z-index:20;width:max-content;min-width:100%;margin-top:24px;padding:14px 20px;font-size:16px;font-weight:500;flex-direction:column;gap:14px;}
.gnb > ul > li > div.sub_2.is-active{display:flex;}
.dimlnb_bg{position:fixed;top:100px;left:0;width:100%;height:calc(100vh - 100px);
background-color:rgba(0, 0, 0, 0.5);opacity:0;visibility:hidden;pointer-events:none;
transition:opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;z-index:5;}
.dimlnb_bg.is-active{opacity:1;visibility:visible;pointer-events:none;}

/* 모바일 햄버거 아이콘 애니메이션 */
.toggle-active .bar:nth-child(1){top:12px;left:50%;transform:translateX(-50%) rotate(45deg);}
.toggle-active .bar:nth-child(2){opacity:0;}
.toggle-active .bar:nth-child(3){top:12px;left:50%;transform:translateX(-50%) rotate(-45deg);}

/* ==============================
   5. Header (구버전 #header-nav 계열) — save_race_wrap과 별개 구조, 사용 여부 확인 필요
   ============================== */
.header-transparent{background-color:transparent;transition:all 0.3s ease-in-out;}
.header-scrolled{background-color:#fff;transition:all 0.3s ease-in-out;}
#header-nav{position:fixed;top:0;left:0;z-index:20;width:100%;background:#fff;height:auto;min-height:72px;transition:all 0.3s ease-in-out;}
#header-nav::before{content:"";visibility:hidden;position:absolute;top:0;left:0;z-index:-1;width:100%;height:var(--gnb-background-height, 306px);border-radius:0 0 10px 10px;
  background-color:var(--color-white);transform:translateY(-100%);transition:all 0.5s ease-in-out;opacity:0;}
#header-nav.nav-hover::before{visibility:visible;background-color:var(--color-white);transform:translateY(0);transition:all 0.3s ease-in-out;opacity:100;}
#header-nav-mobile{transition:background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.nav-dim{content:"";visibility:hidden;position:fixed;top:0;left:0;z-index:-2;width:100%;height:100vh;background-color:rgba(0, 0, 0, 0.5);transition:all 0.3s ease-in-out;opacity:0;pointer-events:none;}
#header-nav.nav-hover .nav-dim{visibility:visible;opacity:1;}
.nav-bar{display:flex;width:100%;max-width:1600px;padding:24px 0;margin:0 auto;color:var(--color-black);justify-content:space-between;align-items:center;}
.nav-logo{width:159px;height:auto;margin-left:64px;}
.nav-logo img{width:159px;height:auto;}
.nav-right{display:flex;justify-content:flex-end;flex:1 1 0%;}
.nav-menu{display:flex;margin-right:40px;font-size:20px;font-weight:700;line-height:24px;}
.nav-menu > li{position:relative;padding:0 24px;}
.menu-items.about{min-width:118px;white-space:nowrap;}
.menu-items.guide{min-width:118px;}
.menu-items.savepackage{min-width:179px;}
.menu-items.course{min-width:83px;}
.menu-items.community{min-width:118px;}
.menu-items a:hover{color:var(--color-primary);transition:colors 0.3s;}
.menu-items.active > a{color:var(--color-primary);}
.menu-dropdown{display:flex;visibility:hidden;position:absolute;left:24px;top:100%;z-index:20;width:max-content;margin-top:24px;font-size:16px;font-weight:500;transition:all 0.3s ease-in-out;flex-direction:column;opacity:0;gap:14px;}
.menu-items:hover .menu-dropdown{visibility:visible;opacity:1;}
.sub-items{min-width:118px;white-space:nowrap;}
.sub-items:hover{color:var(--color-primary);transition:colors 0.3s;}
.mypage-link{display:flex;color:var(--color-black);align-items:center;gap:5px;}
.mypage-link img{width:24px;height:24px;}
.mypage--current .mypage-link{color:#42D1FD;}
.tab-btn{padding:18px 22px;border-radius:40px;border:none;outline:none;background:#cccccc;white-space:nowrap;font-size:18px;line-height:24px;font-weight:600;color:var(--color-black);transition:background 0.2s, color 0.2s;}
.tab-btn.active{background:var(--color-primary);color:var(--color-black);}

/* 구버전 모바일 GNB */
.nav-mobile{position:fixed;top:0;left:0;z-index:1000;width:100%;}
.nav-mobile nav{color:var(--color-black);}
.nav-mobile-bar{display:flex;padding-top:16px;padding-right:16px;padding-bottom:16px;padding-left:24px;justify-content:space-between;align-items:center;}
.nav-mobile-bar img{width:94px;height:32px;}
#mobile-menu-toggle{display:flex;position:relative;z-index:20;width:32px;height:32px;margin-top:7px;justify-content:center;align-items:center;cursor:pointer;}
#mobile-menu-close{display:none;width:32px;height:32px;}
#header-nav-mobile-content{overflow-y:auto;height:calc(100vh - 64px);background-color:var(--color-white);box-sizing:border-box;-ms-overflow-style:none;scrollbar-width:none;}
#header-nav-mobile-content::-webkit-scrollbar{display:none;}
.mobile-menu-list{display:flex;width:100%;padding:24px;flex-direction:column;gap:28px;}
.mobile-menu-item{display:flex;flex-direction:column;}
.mobile-menu-link{font-weight:700;line-height:24px;}
.mobile-submenu-list{display:flex;margin-top:16px;flex-direction:column;gap:16px;}
.mobile-sub-items{font-size:16px;line-height:24px;font-weight:500;}
.mobile-menu-collapsed{overflow:hidden;max-height:0;transition:all 0.5s;}
.mobile-menu-expanded{max-height:1000px;transition:all 0.5s;}
.bar{position:absolute;left:50%;width:20px;height:2px;border-radius:9999px;background-color:var(--color-black);transform:translateX(-50%);transition:all 0.3s ease-in-out;}
.bar:nth-child(1){top:6px;}
.bar:nth-child(2){top:12px;}
.bar:nth-child(3){top:18px;}

/* ==============================
   6. Footer
   ============================== */
.footer-brand{width:100%;padding:54px 0 58px;background-color:#FFFC00;}
.footer-brand-inner{max-width:656px;margin:0 auto;}
.footer-brand-list{display:flex;flex-direction:column;gap:54px;}
.footer-brand-label{margin-bottom:12px;font-size:18px;font-weight:800;color:var(--color-black);line-height:22px;}
.footer-host .footer-brand-label{margin-bottom:10px;}
.footer-brand-logos{display:flex;align-items:center;gap:22px;}
.footer-support .footer-brand-logos{gap:24px;}
.footer-partner .footer-brand-logos{flex-wrap:wrap;}
.footer-info{position:relative;width:100%;padding:64px 0;background-color:var(--color-bg-lighter);}
.footer-info-inner{display:flex;max-width:578px;margin:0 auto;flex-direction:column;align-items:flex-start;gap:24px;}
.footer-links{display:flex;white-space:nowrap;font-size:16px;font-weight:500;line-height:22px;color:var(--color-text-secondary);gap:32px;}
.footer-office-title{margin-bottom:8px;font-size:18px;font-weight:600;line-height:18px;}
.footer-office-list{display:flex;font-size:16px;font-weight:500;line-height:22px;color:var(--color-text-secondary);flex-direction:column;gap:4px;}
.footer-office-list li{display:flex;gap:8px;}
.footer-office-list li span{width:64px;}
.footer-office-list li p{color:var(--color-black);}
.footer-office-list li p br{display:none;}
.footer-up-arrow{position:fixed;bottom:64px;right:64px;z-index:10;padding:7px;border-radius:8px;border:1px solid #ddd;background-color:var(--color-white);}
.footer-up-arrow img{width:32px;height:32px;}

/* 홈페이지 이용약관 레이어팝업 */
.footer-popup{display:none;position:fixed;top:0;left:0;z-index:1000;width:100%;height:100%;}
.footer-popup.is-open{display:block;}
.footer-popup-dim{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.6);}
.footer-popup-panel{display:flex;position:absolute;top:50%;left:50%;width:min(1060px,92vw);height:min(616px,85vh);transform:translate(-50%,-50%);background-color:var(--color-white);border-radius:8px;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,0.2);}
.footer-popup-header{display: flex; flex-shrink: 0; padding: 21px 17px 19px 17px;border-radius: 8px 8px 0 0;background-color: #000;
align-items: center; justify-content: space-between;}
.footer-popup-header p{font-size:18px;font-weight:500;color:var(--color-white);}
.footer-popup-close{display:flex;width:16px;height:16px;align-items:center;justify-content:center;}
.footer-popup-close img{width:16px;height:16px;}
.footer-popup-body{overflow-y:auto;padding: 30px;border: 1px solid #ddd;border-radius: 10px;  margin: 32px 30px 0;}
.footer-popup-content{display:flex;flex-direction:column;gap:25px;}
.footer-popup-doc-title{font-size:24px;font-weight:800;line-height:normal;letter-spacing:-0.48px;text-align:center;text-transform:uppercase;color:var(--color-black);}
.footer-popup-lead{font-size:14px;font-weight:500;line-height:1.4;letter-spacing:-0.28px;color:#111;}
.footer-popup-section{display:flex;flex-direction:column;gap:5px;}
.footer-popup-section p.footer-popup-section-title{font-size:18px;font-weight:700;line-height:26px;letter-spacing:-0.36px;color:var(--color-black);}
.footer-popup-section p{font-size:14px;font-weight:500;line-height:1.4;letter-spacing:-0.28px;color:#111;}
.footer-popup-list{display:flex;flex-direction:column;gap:10px;}
.footer-popup-list--indent{gap:7px;padding-left:24px;}
.footer-popup-actions{ display: flex; align-items: center;justify-content: center; align-content: center;
   width: 100%; gap: 9px; margin-bottom: 0;    padding: 30px 0;}
.footer-popup-btn{width:150px;height:52px;border-radius:5px;font-size:16px;font-weight:700;}
.footer-popup-btn--cancel{border:1px solid var(--color-black);background-color:var(--color-white);color:var(--color-black);letter-spacing:-0.32px;}
.footer-popup-btn--confirm{background-color:var(--color-black);color:var(--color-white);}
@media only screen and (max-width:767px){
  .footer-popup-panel{width:92vw;max-height:88vh;}
  .footer-popup-header{padding:21px 17px;}
  .footer-popup-body{ padding: 30px 20px;margin: 20px;margin-bottom: 0;}
  .footer-popup-doc-title{font-size:20px;}
  .footer-popup-actions{flex-wrap:wrap;padding:20px 0 30px;}
  .footer-popup-btn{width: 150px;font-size: 15px;padding: 17px 0;}

}

/* ==============================
   7. Page Sections
   ============================== */

/* section 0 : 메인 비주얼 */
.visual-section{display: flex;min-height: calc(100vh - 80px);width: 100%; background-color: var(--color-white); flex-direction: column; justify-content: center; align-items: center; position: relative;}
.visual-illustration{width:100%;max-width:1100px;}
.visual-info{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.visual-info p{text-align: center;color: var(--color-black);font-family: Pretendard;font-size: min(clamp(24px, calc(8.6px + 2vw), 37.5px), clamp(22px, 4.4vh, 37.5px)); font-style: normal;font-weight: 800;line-height: 135%;}
.visual-scroll{width: 30px;height: 30px;margin-top:14px;animation:visual-scroll-bounce 1.6s ease-in-out infinite;}
.visual-scroll img {width: 100%;height: 100%; object-fit: cover;}
.visual-media {position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 60px; width: clamp(300px, 100vh, 990px);}
.visual-stack {position: relative; width: 100%; aspect-ratio: 14 / 5; overflow: hidden;}
.visual-stack video {display: block; position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover;
object-position: center center;filter: brightness(1.0001);}
.visual-bottom {display: flex;flex-direction: column; align-items: center;position: absolute;bottom: clamp(1.5rem, 5vh, 5.5rem);}
.package-card--feature .package-card-media {filter: brightness(1.0001);}



/* section 1 : 히어로 */
.hero-section{display:flex;width:100%;background-color:#42D1FD;flex-direction:column;justify-content:center;align-items:center;}
.hero-inner{display:flex;max-width:979px;width:100%;margin:0 auto;padding:140px 0;flex-direction:column;justify-content:center;align-items:center;gap:64px;}
.hero-title{text-align:center;color:var(--color-white);font-family:Pretendard;font-size:54px;font-style:normal;font-weight:800;line-height:68.255px;}
.hero-desc{display:flex;flex-direction:column;gap:38.143px;}
.hero-desc p{text-align:center;color:var(--color-white);font-family:Pretendard;font-size:24px;font-style:normal;font-weight:500;line-height:38.143px;}
.hero-cta{position:relative;}
.hero-btn{padding:24px 48px;border-radius:60px;background-color:#FF9F47;text-align:center;color:var(--color-white);font-family:Pretendard;font-size:24px;font-style:normal;font-weight:700;line-height:32.12px;border:#FF9F47;}

/* section 3 : 행사 개요 */
.info-section{max-width:976px;margin:0 auto;padding:140px 0;}
.info-title{margin-bottom:64px;text-align:center;font-size:54px;font-weight:800;line-height:68px;color:var(--color-black);}
.info-table-wrap{max-width:800px;width:100%;margin:0 auto;}
.info-table{width:100%;border-collapse:separate;border-spacing:0 24px;font-size:24px;table-layout:fixed;}
.info-table tr{text-align:left;vertical-align:top;font-weight:700;}
.info-table th{width:180px;padding-right:40px;color:var(--color-black);font-family:Pretendard;font-size:24px;font-style:normal;font-weight:700;line-height:38.143px;}
.info-table td{color:var(--color-text-secondary);font-family:Pretendard;font-size:24px;font-style:normal;font-weight:500;line-height:38.143px;}


/* section 4 : Join the Run */
.run-section{display:flex;background-color:var(--color-white);flex-direction:column;justify-content:center;align-items:center;}
.run-inner{display:flex;width:100%;margin:0 auto;padding:140px 0;padding-bottom:0;flex-direction:column;justify-content:center;align-items:center;gap:45px;}
.run-title{text-align:center;font-size:54px;font-weight:800;line-height:68px;color:var(--color-black);}
.run-desc{text-align:center;color:var(--color-black);font-family:Pretendard;font-size:24px;
  font-style:normal;font-weight:500;line-height:38px;letter-spacing:-0.48px;margin-bottom: 20px;}
.run-txt{text-align:center;color:var(--color-text-secondary);font-family:Pretendard;font-size:24px;font-style:normal;font-weight:500;line-height:38px;}
.tit_sectione{display:flex;flex-direction:column;gap:24px;}
.run-video{width:100%;aspect-ratio:16 / 9;overflow:hidden;}
.run-video iframe{width:100%;height:100%;filter:brightness(1.0001);}
.about-container #tab01, #tab02, #tab03, #tab04 { scroll-margin-top: 120px; }
.guide-container #tab01, #tab02, #tab03, #tab04 { scroll-margin-top: 120px; }
p.run-desc.ver-mob { display: none;}
p.run-desc.ver-pc {display: block;}


/* section 5 : Save Package */
.package-section{display:flex;margin:0 auto;padding:140px 0;flex-direction:column;align-items:center;gap:40px;}
.package-title{text-align:center;font-size:54px;font-weight:800;line-height:68px;color:var(--color-black);}
.package-media{display:flex;position:relative;width:100%;flex-direction:column;align-items:center;gap:50px;overflow-x:hidden;}
.packageSwiper{overflow-x:hidden;overflow-y:visible;width:100%;}
.packageSwiper .swiper-wrapper{align-items:center;}

.package-card{display:flex;overflow:hidden;position:relative;width:100%;aspect-ratio:432 / 530;border-radius:30px;
 background: #F9F9F9;flex-direction:column;align-items:center;justify-content:flex-start;padding:30px 20px;}
.package-card--feature{padding:0;}
.package-card-img-wrap{display:flex;width:100%;aspect-ratio:1 / 1;align-items:center;justify-content:center;}
.package-card-img{width:100%;height:100%;object-fit:contain;}
.package-card-label{position:absolute;left:0;right:0;bottom:40px;text-align:center;color:var(--Black-60, #888);
  font-family:Pretendard;font-size:21.313px;font-style:normal;font-weight:400;line-height:27.403px;text-transform:capitalize;}
.package-card--feature .package-card-media{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;
filter: brightness(1.0001);}
.package-card--feature.feature_allshot img{transform: scale(1.3);}


/* 활성 카드가 살짜 커지면서 나타나는 효과. 실제 박스 폭도 같이 커져야
   Swiper의 spaceBetween 간격이 어디서나 24px로 균일하게 유지됨(카드 사이
   여백이 활성/비활성에 따라 달라지지 않도록). 폭 차이를 크게 줄수록
   전환 도중 살짝 밀리는 폭도 커지므로 1.15배 정도로 절충함. */
.swiper-slide-active .package-card{z-index:10;animation:packageCardGrow 0.35s ease;}
@keyframes packageCardGrow{from{transform:scale(0.75);}to{transform:scale(1);}}
.packageSwiper .swiper-slide{width:432px;}
.packageSwiper .swiper-slide-active{width:497px;}
@media (max-width:1439px){
  .packageSwiper .swiper-slide{width:64vw;}
  .packageSwiper .swiper-slide-active{width:73.6vw;}
}

/* 썸네일 줄: 다 들어갈 공간이 있으면 가운데 정렬(safe center), 부족하면
   즉시 가로 스크롤로 전환. flex-shrink:0으로 정사각형이 찌그러지지 않게 함. */
.package-thumbs{display:flex;width:100%;box-sizing:border-box;align-items:center;flex-wrap:nowrap;justify-content:safe center;gap:23px;padding:6px 30px;overflow-x:auto;align-self:center;}
.package-thumb{overflow:hidden;width:103px;height:103px;flex-shrink:0;padding:6px 7px 10px;border:none;border-radius:28px;background:var(--color-bg-light);transition:transform 0.2s ease;cursor:pointer;}
.package-thumb img{display:block;width:100%;height:100%;border-radius:12px;object-fit:cover;}
.package-thumb-logo{box-sizing:border-box;object-fit:contain !important;padding:14px;}
.package-thumb:hover, .package-thumb.active{transform:translateY(-2px);}
.package-thumb.active{background:#42D1FD;}
#productModal, #finisherProductModal{display:flex;position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-color:#f5f5f5;flex-direction:column;align-items:center;justify-content:center;}
.mySwiper, .finisherSwiper{width:100%;}
#tabContainer, #finisherTabContainer{display:flex;overflow-x:auto;position:absolute;bottom:48px;left:0;z-index:5;width:100%;gap:8px;}
#toggleBtnIcon{width:48px;height:48px;transition:transform 0.3s ease-in-out;}

/* section 6 : 공지사항 */
.notice-section{padding:140px 0;background-color:var(--color-bg-light);}
.notice-inner{max-width:976px;margin:0 auto;}
.notice-title{text-align:center;font-size:54px;font-weight:800;line-height:68px;color:var(--color-black);}
.notice-tabs{display:flex;position:relative;width:fit-content;margin:40px auto 0;border-radius:60px;background-color:var(--color-white);}
.notice-tabs__thumb{position:absolute;top:0;left:0;height:100%;width:0;border-radius:60px;background-color:var(--color-black);transition:transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);}
.notice-tab{position:relative;z-index:1;padding:16px 73px;background-color:transparent;text-align:center;white-space:nowrap;color:#222;font-family:Pretendard;font-size:24px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:-0.48px;transition:color 0.3s ease;}
.notice-tab.active{color:var(--color-white);}
.notice-panels{display:grid;position:relative;max-width:578px;width:100%;margin-top:64px;margin-left:auto;margin-right:auto;}
.notice-panel{display:flex;visibility:visible;transition:opacity 0.25s ease, visibility 0.25s ease;grid-area:1 / 1;flex-direction:column;opacity:1;gap:14px;}
.notice-panel--hidden{visibility:hidden;opacity:0;pointer-events:none;}
.notice-item{border-radius:12px;background-color:var(--color-white);}
.notice-link{display:flex;width:100%;padding:18px 14px 18px 20px;color:#333;text-overflow:ellipsis;font-family:Pretendard;font-size:16px;font-style:normal;font-weight:700;line-height:22px;align-items:center;justify-content:space-between;cursor:pointer;}
.notice-link img{width:24px;transition:transform 0.2s ease;}
.notice-item.open .notice-link img{transform:rotate(180deg);}
.notice-answer{display:none;padding:0 20px 18px 20px;color:var(--color-text-secondary);font-family:Pretendard;font-size:14px;font-weight:400;line-height:22px;}
.notice-item.open .notice-answer{display:block;}

/* ==============================
   8. Swiper / Popup (외부 라이브러리 오버라이드)
   ============================== */
.swiper-button-prev, .swiper-button-next{display:flex !important;width:40px !important;height:40px !important;margin-top:-20px !important;border-radius:50% !important;background:var(--color-popup-accent) !important;transition:all 0.3s ease !important;align-items:center !important;justify-content:center !important;}
.swiper-button-prev:hover, .swiper-button-next:hover{background:var(--color-popup-accent) !important;transform:scale(1.1) !important;}
.swiper-button-prev::after, .swiper-button-next::after{display:none !important;}
.swiper-button-prev{left:-60px !important;}
.swiper-button-next{right:-60px !important;}
.swiper-pagination{display:flex !important;position:static !important;left:0 !important;width:100% !important;margin-top:16px !important;text-align:center !important;transform:none !important;justify-content:center !important;align-items:center !important;}
.swiper .swiper-pagination{margin-left:auto !important;margin-right:auto !important;text-align:center !important;justify-content:center !important;}
.swiper-pagination-bullet{left:0 !important;width:8px !important;height:8px !important;margin:0 4px !important;border-radius:50% !important;background:var(--color-popup-accent) !important;opacity:1 !important;}
.swiper-pagination-bullet-active{background:var(--color-accent) !important;transform:scale(1) !important;}
.swiper-pagination-bullet, .swiper-pagination-bullet-active-prev, .swiper-pagination-bullet-active-next{transform:scale(1) !important;}
#mainPopup{transition:all 0.5s ease-in-out;opacity:1;}
#mainPopup .popup-swiper{width:100%;height:100%;}
#mainPopup.swiper-slide{display:flex;background:#444;text-align:center;font-size:18px;justify-content:center;align-items:center;}
#mainPopup.swiper-slide img{display:block;width:100%;height:100%;object-fit:cover;}
#mainPopup .popup-pagination{position:absolute !important;bottom:12px !important;left:0 !important;width:100%;}
#mainPopup .swiper-button-prev, #mainPopup .swiper-button-next{width:32px !important;height:32px !important;background:var(--color-white) !important;cursor:pointer !important;}
#mainPopup .popup-btn-next{position:absolute;right:12px !important;top:calc(50% + 23px);transform:translateY(-50%);}
#mainPopup .popup-btn-prev{position:absolute;left:12px !important;top:calc(50% + 23px);transform:translateY(-50%);}
#mainPopup .swiper-pagination-bullet{background:#d9d9d9 !important;}
#mainPopup .swiper-pagination-bullet-active{background:var(--color-accent) !important;transform:scale(1) !important;}
#mainPopup .swiper-button-prev:hover, #mainPopup .swiper-button-next:hover{transform:translateY(-50%) !important;}

/* ==============================
   9. Keyframes
   ============================== */
@keyframes visual-scroll-bounce{
  0%, 100%{transform:translateY(0);}
  50%{transform:translateY(8px);}
}


/* ====== about : 대회소개 ====== */
.about-intro{display:flex;overflow-x:hidden;background-color:var(--color-white);flex-direction:column;justify-content:center;align-items:center;}
.about-intro-inner{display:flex;max-width:578px;width:100%;margin:0 auto;padding:120px 0 140px;flex-direction:column;justify-content:center;align-items:center;gap:0;}
.about-intro-images{display:flex;width:100%;flex-direction:column;justify-content:center;align-items:center;gap:60px;}
.about-intro-tag{width:100%;max-width:280px;}
.about-intro-video{width:min(900px, 90vw);aspect-ratio:13/5;overflow:hidden;position:relative;}
.about-intro-video video{display:block;position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;object-position:center 45%;}
.contest-intro-video{width: 990px;aspect-ratio: 14 / 5;overflow:hidden;position:relative;}
.contest-intro-video video{display:block;position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);
object-fit:cover;object-position:center 45%;filter: brightness(1.0001)}
.about-intro-desc{text-align:center;font-size:24px;font-weight:600;line-height:34px;margin-top: 64px}

.about-mission{display:flex;background-color:var(--color-bg-lighter);flex-direction:column;justify-content:center;align-items:center;}
.about-mission-inner{display:flex;max-width:710px;width:100%;margin:0 auto;padding:140px 0;flex-direction:column;justify-content:center;align-items:flex-start;gap:48px;}
.about-mission-title{text-align:left;font-size:48px;font-weight:800;line-height:64px;color:var(--color-black);}
.about-mission-desc{text-align:left;font-size:24px;font-weight:500;line-height:36px;color:var(--color-black);}

.tabbar{position: sticky; top: 84px;z-index: 2;padding: 12px 0;}
.tabbar--cyan{background-color:#42D1FD;}
.tab-wrap{display:flex;white-space:nowrap;justify-content:center;align-items:center;gap:38px;}
.tab-wrap li{padding:16px 18px;border-radius:8px;color:var(--color-black);font-size:16px;font-weight:700;line-height:24px;cursor:pointer;}
.tab-wrap li.active{border-radius:200px;}
.tabbar--cyan .tab-wrap li.active{background-color:var(--color-white);}
/* hover 가능한 기기(PC)에서만 적용 — 터치 기기는 tap 후 hover 상태가 그대로 남아
   눌러도 안 지워지는 것처럼 보이는 오류로 비칠 수 있어서 제외함 */
@media (hover: hover) and (pointer: fine) {
	.tab-wrap li:hover{border-radius:200px;}
	.tabbar--cyan .tab-wrap li:hover{color: #116883;}
}

.about-overview{max-width:976px;margin:0 auto;padding:120px 0;}
.about-overview-title{max-width: 790px; margin: 0 auto 45px; text-align: left; color: var(--color-black);font-size: 48px;font-style: normal;font-weight: 800; line-height: 64px;}
.about-info-table-wrap{max-width:790px;width:100%;margin:0 auto;}
.about-info-table{width:100%;border-collapse:separate;border-spacing:0 24px;font-size:24px;table-layout:fixed;}
.about-info-table tr{text-align:left;font-weight:700;vertical-align:top;}
.about-info-table th{width:170px;padding-right:40px;color:var(--color-black);line-height: 38px;}
.about-info-table td{color:var(--color-text-secondary);font-weight: 500;line-height: 38px;
font-size: 24px; font-style: normal;}

.about-divider{width:100%;height:14px;background-color:var(--color-bg-lighter);}
.donation_section { width: 470px;height: 50px;}
.donation_section img { width: 100%;  height: auto;background-size: cover;}

.about-donation{display:flex;flex-direction:column;justify-content:center;align-items:center;}
.about-donation-inner{display:flex;max-width:710px;width:100%;margin:0 auto;padding:140px 0;flex-direction:column;gap:64px;}
.about-donation-title{margin-bottom:24px;text-align:left;font-size:48px;font-weight:800;line-height:64px;color:var(--color-black);}
.about-donation-logo{width:100%;}
.about-donation-group{display:flex;flex-direction:column;gap:8px;}
.about-donation-heading{font-size:32px;font-weight:700;line-height:42px;}
.about-donation-text{text-align:left;font-size:24px;font-weight:500;line-height:36px;}
.about-donation-note{margin-top:32px;}
.about-donation-subheading{margin-left:7px;margin-bottom:12px;color:#21BDEC;font-size:24px;font-weight:700;line-height:32px;}
.about-icon-list{display:flex;font-size:20px;font-weight:500;line-height:32px;flex-direction:column;gap:12px;}
.about-icon-list li{display:flex;align-items:flex-start;}
.about-icon-list li.muted{color:var(--color-text-secondary);}
.about-icon-list li.small{margin-left:32px;font-size:18px;}
.about-icon-list p.small { margin-left: 32px;font-size: 18px;color: rgb(116, 116, 116);}
.about-icon-list img{width:32px;}
.about-icon-list--bordered{padding-bottom:32px;border-bottom:1px solid #ddd;}
.about-donation-lookup-desc{font-size:20px;font-weight:500;line-height:32px;}
.public_transport { padding: 32px 0; border-bottom: 1px solid #ddd;}
.about-location{display:flex;flex-direction:column;justify-content:center;align-items:center;}
.about-location-inner{width: 100%;margin: 0 auto; padding: 140px 0;max-width: 710px;}
.about-location-title{margin-bottom:64px;text-align:left;font-size:48px;font-weight:800;line-height:64px;color:var(--color-black);}
.about-location-map{position:relative;}
.about-location-map img{width:100%;}
.about-location-kakao-btn{display:flex;position:absolute;left:50%;bottom:24px;width:fit-content;padding:18px 24px;border-radius:60px;
background-color:#42D1FD;color:var(--color-black);font-size:16px;font-weight:600;line-height:24px;transform:translateX(-50%);
align-items:center;gap:8px; z-index: 1;}
.about-location-map::after { content: "";width: 100%; height: 100%; background: #00000066;display: block; position: absolute;left: 0; top: 0;}
.about-location-kakao-btn img{width:24px;height:24px;}
.about-location-address{padding-top:16px;font-size:20px;font-weight:500;line-height:32px;}
.about-location-transit{display:flex;padding-top:32px;flex-direction:column;}
.about-location-transit-group--last{padding-bottom:0;border-bottom:none;}
.about-location-transit-group h4{margin-bottom:12px;font-size:24px;font-weight:700;line-height:32px;}
.about-location-transit-group li{display:flex;margin-bottom:12px;align-items:center;gap:8px;}
.about-location-transit-group li:last-child{margin-bottom:0;}
.about-location-transit-group li p{font-size:20px;font-weight:500;line-height:32px;}
.about-location-parking-note{font-size:20px;font-weight:500;line-height:32px;color:#333;}
.board_list_wrap{margin-bottom:140px;}
.about-location-transit h4 {color: #000; font-family: Pretendard;font-size: 24px;font-style: normal;font-weight: 700; line-height: 32px; margin-bottom: 12px;}
.public_transport:last-child { border-bottom: 0;}

/* ====== guide : 참가안내 ====== */
.guide-container{display:flex;width:100%;margin:0 auto;/*padding:102px 0 140px;*/
flex-direction:column;justify-content:center;align-items:center;}
.guide-tab.guide-tab--first {margin-top: 120px;}
.guide-tab{display:flex;max-width:578px;width:100%;margin:0 auto;flex-direction:column;justify-content:center;
  align-items:flex-start;margin: 140px 0;}
/*.guide-tab--first{padding-top:120px;}*/
.guide-tab-title{text-align:left;font-size:48px;font-weight:800;line-height:64px;color:var(--color-black);}
.guide-container .guide-tab-title{margin-bottom:64px;}
.divider{width:100%;height:14px;background-color:var(--color-bg-lighter);}
.guide-tab > .divider{margin:-40px 0;}
.guide-notice{display:flex;width:100%;padding:24px;margin-top:64px;border-radius:14px;background-color:#FEF4FA;align-items:flex-start;gap:8px;}
.guide-notice--spaced{margin-top:64px;}
.guide-notice p{font-size:18px;font-weight:500;line-height:26px;color:var(--color-black);}
.guide-toggle{display:flex;width:100%;margin-top:64px;border-radius:14px;flex-direction:column;}
.guide-toggle-header{display:flex;padding:18px 18px 18px 24px;border-radius:8px;background-color:var(--color-bg-lighter);align-items:center;justify-content:space-between;cursor:pointer;}
.guide-toggle-header p{font-size:20px;font-weight:600;line-height:32px;color:var(--color-black);}
.guide-toggle-header img{width:32px;transition:transform 0.3s ease;transform:rotate(180deg);}
.guide-toggle.is-collapsed .guide-toggle-header img{transform:rotate(0deg);}

.guide-toggle.is-collapsed .guide-toggle-content{display:none;}
.guide-toggle--spaced{margin-top:64px;}
.guide-toggle-content--flat{margin-top:24px;}
.guide-subgroup{padding: 24px 0;border-bottom:1px solid #ddd;}
.guide-subgroup--first{margin-top:0;}
.guide-subgroup--last{padding-bottom:0;border-bottom:none;}
.guide-subgroup-title{margin-bottom:12px;color:var(--color-black);font-size:18px;font-weight:700;line-height:30px;}
.guide-icon-list{display:flex;font-size:18px;font-weight:500;line-height:32px;flex-direction:column;gap:6px;}
.guide-icon-list li{display:flex;align-items:flex-start;}
.guide-icon-list li.muted{color:var(--color-text-secondary);}
.guide-icon-list li.muted p{font-size:16px;}
.guide-icon-list img{width:32px;flex-shrink:0;}
.guide-numbered-list{display:flex;flex-direction:column;gap:20px;}
.guide-numbered-list li{display:flex;align-items: flex-start;color: #000; font-family: Pretendard;font-size: 18px; font-style: normal; font-weight: 500;line-height: 30px;}
.guide-numbered-list li p{margin-left:11px;}
.guide-numbered-list li.note{color:var(--color-text-secondary);font-size:16px;}
.guide-numbered-list li.note p{margin-left:0;font-size:16px;}
.guide-numbered-list li.note img{width:32px;flex-shrink:0;}
.guide-note-line{padding: 24px 0 24px;font-size:18px;color:var(--color-black);}
.guide-strong{font-weight:600;}
.guide-strong-block{display:block;font-weight:600;}
.guide-subnote{display:block;color:var(--color-text-secondary);font-size:16px;}
.guide-tab-title.pd-top{padding-top:140px;margin:0;}
.guide-notice.no-margin{margin-top:0;}
div#tab03 .guide-tab-title.pd-top{padding-top:0;margin-bottom:64px;}
.guide-notice.no-mg{margin:0;}
#tab02 .guide-notice{margin-top:0;margin-bottom:64px;}
#tab02 .guide-notice:last-child{margin-top:64px;margin-bottom:0;}
h2.guide-tab-title.mg-120{margin-top:280px;}
.guide-subgroup.guide-subgroup--first {padding-top: 0;}
/* ====== savepackage : Save Package ====== */
.savepackage-container{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:140px;}
.savepackage-section{display:flex;max-width:976px;width:100%;margin:0 auto;flex-direction:column;justify-content:center;align-items:center;}
.savepackage-section--first{padding-top:102px;}
.savepackage-section.savepackage-section--first { max-width: 100%;}
.savepackage-section--narrow{max-width:578px;margin:0 auto;}
.savepackage-head{display:flex;max-width:578px;width:100%;margin:0 auto;margin-bottom:64px;flex-direction:column;justify-content:center;align-items:flex-start;gap:64px;}
.savepackage-head--tight{gap:24px;}
.savepackage-desc{text-align:left;color:var(--color-text-secondary);font-size:24px;font-weight:500;line-height:36px;}
.savepackage-date{display:flex;align-items:center;gap:16px;}
.savepackage-date dt{font-size:24px;font-weight:700;color:#222;}
.savepackage-date dd{margin:0;font-size:24px;font-weight:400;color:var(--color-text-secondary);}
.savepackage-media{position:relative;}
.savepackage-banner{width:100%;max-width:578px;}
.savepackage-slide-img{width:100%;}
.savepackage-toggle-btn{display:flex;position:absolute;top:0;right:0;z-index:10;width:64px;height:64px;background-color:var(--color-accent);align-items:center;justify-content:center;}
.savepackage-size-table{overflow-x:auto;width:100%;max-width:578px;margin-top:24px;}
.savepackage-size-head{display:grid;padding:20px 0;background-color:#42D1FD;color:var(--color-black);text-align:center;font-size:20px;font-weight:600;line-height:28px;grid-template-columns:165px repeat(4, 1fr);}
.savepackage-size-body{display:flex;padding:12px 0 20px;background-color:#EBFAFF;flex-direction:column;gap:16px;}
.savepackage-size-body li{display:grid;padding:8px 0;text-align:center;grid-template-columns:165px repeat(4, 1fr);}
.savepackage-size-body li span{color: #000; text-align: center;font-family: Pretendard;font-size: 20px;font-style: normal; font-weight: 500;line-height: 28px;}
.savepackage-size-body li span:first-child{font-weight:600;white-space:nowrap;letter-spacing:-0.8px;}
.savepackage-notice-list{display:flex;padding-bottom:32px;color:var(--color-text-secondary);font-size:20px;font-weight:500;line-height:32px;flex-direction:column;gap:12px;}
.savepackage-notice-list li{display:flex;align-items:flex-start;}
.savepackage-notice-list img{width:32px;opacity:0.5;flex-shrink:0;}
.savepackage-notice-list-black{display:block;color:var(--color-black);}
.gray-box{max-width: 578px;background:#F4F4F4;}

/* ====== course : 코스 안내 ====== */
.course-container{display:flex;padding:120px 0 160px;flex-direction:column;align-items:center;}
.course-content{display:flex;max-width:578px;width:100%;margin:0 auto;flex-direction:column;gap:64px;}
.course-body{display:flex;flex-direction:column;gap:60px;}
.course-map img {width: 100%;height: 100%;object-fit: cover;}
.course-map{display:block;width:100%;height:576px;background:#6C6C6C;object-fit:cover;border-radius: 30px; overflow: hidden;}
.course-route{display:flex;flex-direction:column;}
.course-route-row{display:flex;position:relative;z-index:0;align-items:center;justify-content:space-between;}
.course-route-row::before{content:"";position:absolute;top:50%;left:0;z-index:-1;width:100%;height:4px;background:url(/content/05sub/style0007/images/common/course-connector-dot-h.svg) repeat-x left center;background-size:10px 4px;transform:translateY(-50%);}
.course-route-link{position:relative;height:52px;}
.course-route-link::before{content:"";position:absolute;top:0;bottom:0;width:4px;background:url(/content/05sub/style0007/images/common/course-connector-dot-v.svg) repeat-y top center;background-size:4px 10px;transform:translateX(-50%);}

.course-route-link--right::before{left:calc(100% - 110px);}
.course-route-link--left::before{left:122.5px;}
.course-stop{display:flex;box-sizing:border-box;height:90px;padding:0 34px;border-radius:200px;background-color:var(--color-bg-lighter);color:var(--color-black);
  font-size:18px;font-weight:700;line-height:28px;text-align:center;flex-shrink:0;align-items:center;justify-content:center;gap:16px;}
.course-stop--start,.course-stop--turn,.course-stop--finish{width:270px;}
.course-stop--road,.course-stop--bridge,.course-stop--park{width:220px;}
.course-stop::before{content:"";display:block;background-repeat:no-repeat;background-position:center;background-size:contain;flex-shrink:0;}
.course-stop--point{color: var(--color-white);border-radius: 200px;background: #000;}
.course-stop--start::before{width:26px;height:34px;background-image:url(/content/05sub/style0007/images/common/icon-course-start.svg);}
.course-stop--road::before{width:34px;height:32px;background-image:url(/content/05sub/style0007/images/common/icon-course-road.svg);}
.course-stop--turn::before{width:22px;height:26px;background-image:url(/content/05sub/style0007/images/common/icon-course-turn.svg);}
.course-stop--bridge::before{width:46px;height:23px;background-image:url(/content/05sub/style0007/images/common/icon-course-bridge.svg);}
.course-stop--park::before{width:35px;height:31px;background-image:url(/content/05sub/style0007/images/common/icon-course-park.svg);}
.course-stop--finish::before{width:28px;height:34px;background-image:url(/content/05sub/style0007/images/common/icon-course-finish.svg);}
.course-route-mobile{display:none;}
.course-stop-m{display:flex;position:relative;width:100%;padding:16px 0;border-radius:30px;background-color:var(--color-bg-lighter);color:var(--color-black);font-size:16px;font-weight:700;line-height:24px;align-items:center;justify-content:center;gap:12px;}
.course-stop-m:not(:last-child)::after{content:"";position:absolute;left:50%;top:100%;width:4px;height:35px;background:url(/content/05sub/style0007/images/common/course-connector-dots.svg) no-repeat center/contain;transform:translateX(-50%);}
.course-stop-m::before{content:"";display:block;width:24px;height:24px;background-repeat:no-repeat;background-position:center;background-size:contain;flex-shrink:0;}
.course-stop-m--point{background-color:#000;color:var(--color-white);}
.course-stop-m--start::before{background-image:url(/content/05sub/style0007/images/common/icon-course-start.svg);}
.course-stop-m--road::before{background-image:url(/content/05sub/style0007/images/common/icon-course-road.svg);}
.course-stop-m--turn::before{background-image:url(/content/05sub/style0007/images/common/icon-course-turn.svg);}
.course-stop-m--bridge::before{width: 36px;height: 23px;background-image:url(/content/05sub/style0007/images/common/icon-course-bridge.svg);}
.course-stop-m--park::before{background-image:url(/content/05sub/style0007/images/common/icon-course-park.svg);}
.course-stop-m--finish::before{background-image:url(/content/05sub/style0007/images/common/icon-course-finish.svg);}
.course-connector-m{width:0;height:24px;border-left:4px dotted #FF9F47;align-self:center;}

/* ====== community : 공지사항 / FAQ ====== */
/* ====== 레거시 게시판(board_list) — SaveRace 공지사항 디자인 적용 ====== */
 h4:before{display:none;}

.sub_visual_cons h1 {
    text-align: left;
    font-size: 48px;
    font-weight: 800;
    line-height: 64px;
    color: var(--color-black);
}


#baseForm {
  display: block;
  max-width: 576px;
  width: 100%;
  margin: 0 auto;

}
.board_list_wrap #baseForm {
    max-width: 776px;
}
/* 검색 영역 */
.board_search_box_flex {
display: flex;
    flex-direction: column;
    max-width: 776px;
    width: 100%;
    margin: 0 auto;

}
.sub_visual_cons {
    max-width: 776px;
    width: 100%;
    margin: 0 auto;
    padding-top: 140px; margin-bottom: 48px;
}
.board_search_box .button button {
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("/content/05sub/style0007/images/common/icon-search.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.board_search_box_flex .board_search_box {
  order: 1;
}
.board_search_box_flex h6 {order: 2;margin-top: 48px;margin-bottom: 24px; color: #747474;font-size: 18px;font-style: normal; font-weight: 500;line-height: 24px;}
.board_search_box_flex h6.fw-normal span {color: #000;font-weight: 600;}
.board_search_box {
  display: flex;
  width: 100%;
  height: 56px;
  padding: 16px 16px 16px 18px;
  border-radius: 8px;
  background-color: #F7F7F7;
  align-items: center;
  gap: 16px;
}
.board_search_box .option {
  display: none;
}
.board_search_box .input {
  flex: 1;
}
.board_search_box .input input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: #000;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;

}
.board_search_box .input input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}
.list_wrap li.list.prev_ a strong,.list_wrap li.list.next_ a strong {
    padding-left: 20px;
}
.board_search_box .button {flex-shrink: 0;}
.list_wrap {max-width: 776px; width: 100%;margin: 0 auto;}
.page_list{display:none!important;}
.board.view .list_wrap { padding: 0;border-top: 1px solid rgba(0, 0, 0, 0.30);border-bottom: 1px solid rgba(0, 0, 0, 0.30);}
.board.view + .btn_wrap.a1 {margin-top: 0;}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
p.list_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 48px 0 140px;
}

.board_status li span.tit {
    color: #747474;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    background: url(/content/05sub/style0007/images/common/board_view.svg) no-repeat 0% 50%;
    padding-left: 20px;
}

.board_writer{display:flex;align-items:center;}
.board_writer .thumb{flex-shrink:0; width:32px;height:32px; margin-right:12px;border-radius:50%;background:url('/content/05sub/style0007/images/common/kakao_view_thumb.png') no-repeat center/cover;}
.board_writer .writer_info{display:flex;flex-direction:column;}
.board_writer .writer_name{color: #000;font-family: Pretendard;font-size: 14px; font-style: normal; font-weight: 600;line-height: 22px;}
.board_writer .date{margin-top:5px;padding-left:13px;font-size: 12px;font-style: normal;font-weight: 400;line-height: 16px; /* 133.333% */color:#747474;background:url(/content/05sub/style0007/images/common/board_date.svg) no-repeat 0% 50%;background-size:10px;}
.board_view .board_head{padding-bottom: 16px; border-bottom: 1px solid #DDD;}
/* 게시물 목록 (테이블 구조를 리스트처럼 보이게) */
.board_list,
.board_list tbody {display: block;width: 100%;}
.board_list thead {display: none;}
.board_list {margin-top: 0;border-top: 2px solid #000;}
.list_wrap li + li {border-top: 1px solid rgba(0, 0, 0, 0.30);}
.list.prev_ > a strong::before{
    content:'';
    position:absolute;
    left:0;
    top:50%;
    width:18px;
    height:18px;
    transform:translateY(-50%);
    background:url('/content/05sub/style0007/images/common/up_arrow01.png') no-repeat center;
    background-size:contain;
}

.list.next_ > a strong::before{
    content:'';
    position:absolute;
    left:0;
    top:50%;
    width:18px;
    height:18px;
    transform:translateY(-50%);
    background:url('/content/05sub/style0007/images/common/down_arrow01.png') no-repeat center;
    background-size:contain;
}


.btn_wrap.a3{margin-top: 48px;}
.board_list tr {
  display: flex;
  padding: 18px 0;
  border-bottom: 1px solid #ddd;
  align-items: center;
  gap: 16px;
}
.board_list .col_check,
.board_list .col_user,
.board_list .col_count {
  display: none;
}
.board_list .col_num {
  width: 64px;
  flex-shrink: 0;
  text-align: center;
  color: #747474;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}
.board_list .flex-grow-1 {
  flex: 1;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}
.board_list .flex-grow-1 a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.board_list .flex-grow-1 a:hover {
  text-decoration: underline;
}
.board_list .col_date {
  width: 96px;
  flex-shrink: 0;
  text-align: center;
  color: #747474;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
}

.board_view {padding: 16px 24px;padding-top: 140px;}

.board_head {
	max-width: 776px;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 24px;
	border-bottom: 2px solid #000;
}
.board_head h4 {
	color: #000;
	font-size: 24px;
	font-weight: 700;
	line-height: 34px;
}
.board_status {
	margin-top: 16px;
}
.board_status ul {
	display: flex;
	gap: 16px;
}
.board_status li {
	display: flex;
	align-items: center;
	gap: 6px;
}
.board_status .tit {
	color: #747474;
	font-size: 14px;
	font-weight: 500;
}

.board_status .view {
	color: #000;
	font-size: 14px;
	font-weight: 500;
}


.list_wrap ul {
    display: flex;
    flex-direction: column;
}

.list_wrap ul li {
    width: 100%;
}

.list_wrap li.list a {
    padding: 18px 8px;
}

.list_wrap .list.prev_ strong:After {
    display: none;
}

.list_wrap .list.next_ strong:After {
    display: none;
}

.list_wrap  .list > a{
    display:flex;
    align-items:center;
    width:100%;
    padding:40px 0;
}
.list_wrap .list.next_{border-bottom:0;}
.list_wrap  .list > a strong{flex-shrink:0;}
.list_wrap  .list .text_{ text-align: left;
    flex:1;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.list_wrap  .list .date{
    flex-shrink:0;
    margin-left:40px;
color: #747474;
text-align: right;
font-family: Pretendard;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 26px; /* 185.714% */
}


.list_wrap li.list a strong {
    color: inherit;
    color: #747474;
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 185.714% */
    padding: 0;
}


.board_view .cont {
	max-width: 776px;
	width: 100%;
	margin: 0 auto;
	padding: 40px 0;
	color: #000;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	border-bottom: 0;
}
.board_view .cont img {
	max-width: 100%;
	height: auto;
}

.file_wrap {
	max-width: 776px;
	width: 100%;
	margin: 0 auto;
	padding: 24px 0;
}
.file_wrap dl {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
.file_wrap dt {
	flex-shrink: 0;
	width: 776px;
	color: #747474;
	font-size: 14px;
	font-weight: 500;
	line-height: 26px;
}
.file_wrap dd {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.file_wrap .file {
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 500;
	line-height: 26px;
	text-decoration: underline;
}

@media only screen and (max-width: 767px) {
	.board_head h4 { font-size: 18px; line-height: 26px; }
	.cont { padding: 24px 0; font-size: 14px; line-height: 24px; }
}



@media only screen and (max-width: 776px) {
  #baseForm {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media only screen and (max-width: 767px) {
  .board_search_box {
    height: 48px;
    padding: 12px 14px;
  }
  .board_search_box .input input {
    font-size: 15px;
  }
  .board_search_box_flex h6 {
    margin-top: 16px;
    margin-bottom: 16px;
    font-size: 14px;
  }
  .board_list tr {
    padding: 14px 0;
    gap: 8px;
  }
  .board_list .col_num {
    width: 32px;
    font-size: 14px;
  }
  .board_list .flex-grow-1 {
    font-size: 14px;
    line-height: 22px;
  }
  .board_list .col_date {
    width: 72px;
    font-size: 12px;
  }


}

@media only screen and (max-width: 776px) {
.board.view .list_wrap { padding: 0 24px;border-top:0;border-bottom:0;}
.board.view .list_wrap > ul { border-top: 1px solid #000;border-bottom: 1px solid #000;}
	}


/* ====== 레거시 게시판(qna_table 아코디언) — SaveRace FAQ 디자인 적용 ====== */

/* 검색 영역 (공지사항과 동일 board_search_box 재사용) */
.search_top_wrap {
  max-width: 576px;
  width: 100%;
  margin: 0 auto 24px;
}
.board_search_box {
  display: flex;
  width: 100%;
  height: 56px;
  padding: 16px 18px;
  border-radius: 8px;
  background-color: #F7F7F7;
  align-items: center;
  gap: 16px;
}
.board_search_box .option { display: none; }
.board_search_box .input { flex: 1; }
.board_search_box .input input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: #000;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}
.board_search_box .input input::placeholder { color: rgba(0, 0, 0, 0.3); }
.board_search_box .button button {
  display: block;
  width: 24px;
  height: 24px;
  background: url("./images/common/search_ic.svg") no-repeat center / contain;
}

/* FAQ 아코디언 목록 */
.accordion_w.qna_table {
  max-width: 576px;
  width: 100%;
  margin: 0 auto;    margin-bottom: 130px;
}
.accordion_w.qna_table > ul > li {
border-radius: 0;
    border: 0;
    padding: 0;
    border-bottom: 1px solid #ddd;
    align-items: center;
    cursor: pointer;
}

.accordion_title {
  cursor: pointer;
}
.accordion_title .title {
  display: flex;
  padding: 18px 0;
  align-items: center;
  gap: 8px;
}
.accordion_title .qestion {
  flex-shrink: 0;
  color: #747474;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
}
.accordion_title .title a {
  flex: 1;
  color: #000;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  text-decoration: none;
}
.accordion_title .title:after {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background:url("/content/05sub/style0007/images/common/down_arrow.svg") no-repeat center / contain;
  transition: transform 0.2s ease;
}


li.accordion_on .accordion_title .title:after {
    transform: rotate(180deg);
}

.accordion_details {
  display: none;
  padding: 22px 18px;
  background-color: #F7F7F7;
}
.answer_box {
  display: flex;
  gap: 8px;   align-items: flex-start;
}
.answer_box .answer {
  flex-shrink: 0;
  color: #747474;
  font-size: 14px;
  font-weight: 500;    display: none;
}
.answer_box .text_box p {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}
.answer_box .btn_box {
  display: none; /* 사용자 화면용 수정/삭제 버튼 숨김 - 관리자 화면이면 이 줄 삭제 */
}

/* 열림 상태 (li.on 기준 — 실제 global.accordion()이 토글하는 클래스명이 다르면 알려주세요) */
li.on .accordion_title .title:after {
  transform: rotate(180deg);
}
li.on .accordion_details {
  display: block;
}

.accordion_w .accordion_details .btn_box .btn01 {
    font-size: 15px;
    padding: 5px;
    color: #009fd9;
    background: #fff;
}
.accordion_w .accordion_details .btn_box {
    text-align: right;
    margin-top: 10px;
    gap: 3px;
}

.faq_list {
  max-width: 576px;
  width: 100%;
  margin: 0 auto; margin-bottom: 140px;
}
.faq_list_con {
  border-bottom: 1px solid #ddd;
}

/* 질문 (Q.) */
.faq_list_con > button {
  display: flex;
  width: 100%;
  padding: 18px 0;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
ul.faq-list { width: min(776px, 100% - 48px); margin: 0 auto; margin-bottom: 140px;;position:relative;}
ul.faq-list::before {content: ""; width: 100%;height: 2px;display: block;background: #000;position: absolute;top: 0;left: 50%;transform: translateX(-50%);}
.faq_list_con > button::before {
  content: "Q.";
  flex-shrink: 0;
  color: #747474;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
}
.faq_list_con > button span {
  flex: 1;
  color: #000;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
}
.faq_list_con > button::after {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: url("/content/05sub/style0007/images/common/down_arrow.svg") no-repeat center / contain;
  transition: transform 0.2s ease;
}



.faq_list_con > button.on::after {
    transform: rotate(180deg);
}


/* 답변 (A.) */
.faq_a {
  display: none;
  padding: 22px 18px;
  background-color: #F7F7F7;
}
.faq_a_con {
  position: relative;
  padding-left: 15px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;

}
.faq_a_con::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  background: #000;
  font-weight: 500;
  width:3px;
  height:3px;
  border-radius:100%;
}
.faq_a_con .hyper {
  color: var(--color-primary);
  font-size: 13px;
  text-decoration: underline;
}

.faq_list_con button.on + .faq_a {
    display: block;
}

/* 열림 상태 (실제 토글 클래스 확인 필요, 일단 .on으로 가정) */
.faq_list_con.on > button::after {
  transform: rotate(180deg);
}
.faq_list_con.on .faq_a {
  display: block;
}

/* 검색 결과 없음 */
.faq_list .text-center.py-5 {
  padding: 48px 0;
  text-align: center;
  color: #747474;
  font-size: 16px;
}

@media only screen and (max-width: 767px) {
  .faq_list_con > button { padding: 14px 0; }
  .faq_list_con > button::before { font-size: 14px; }
  .faq_list_con > button span { font-size: 15px; line-height: 24px; }
  .faq_a { padding: 16px 14px; }
  .faq_a_con { font-size: 13px; line-height: 22px; }
  .list_wrap {padding: 0 24px;}
}





/* 페이지네이션 */
.page_list {
  display: flex;
  margin-top: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.page_list li a {
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-color: #F7F7F7;
  color: #000;
  font-size: 16px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
}
.page_list li.on a {
  background-color: var(--color-accent);
}
.page_list_m { display: none; }

/* 등록 버튼 (관리자용이면 필요없으면 숨겨도 됨) */
.btn_wrap.a1 {
  display: flex;
  margin-top: 24px;
  justify-content: flex-end;
}
.btn_wrap .btn01 {
  display: inline-flex;
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #F7F7F7;
  color: #000;
  font-size: 14px;
  font-weight: 600;
}
p.f_right.c1 .btn01{
    border-radius: 8px;
    background: #000;
    padding: 12px 24px;
    color: #FFF;
    text-align: center;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    min-width: 105px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;height: 48px;
}
.btn_wrap .btn01 {
    border-radius: 8px;
    background: #000;
    padding: 12px 24px;
    color: #FFF;
    text-align: center;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    min-width: 105px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    height: auto;
}

@media only screen and (max-width: 767px) {
  .board_search_box { height: 48px; padding: 12px 14px; }
  .board_search_box .input input { font-size: 15px; }
  .accordion_title .title { padding: 14px 0; }
  .accordion_title .qestion { font-size: 14px; }
  .accordion_title .title a { font-size: 15px; line-height: 24px; }
  .accordion_details { padding: 16px 14px; }
  .answer_box .text_box p { font-size: 13px; line-height: 22px; }
  .page_list { margin-top: 32px; }
}

/* 공지 배지 */
.accordion_title .title > span[style] {
  margin-right: 4px;
  font-size: 14px;
}

/* 첨부파일 아이콘 */
.accordion_title .title img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* NEW 배지 */
.accordion_title .title .new {
  display: inline-flex;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #FF9F47;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 답변 내용 : <p> 유무 상관없이 스타일 적용 */
.answer_box .text_box {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}
.answer_box .text_box p {
color: var(--color-black);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}

/* 첨부파일 다운로드 링크 */
.answer_box .hyper {
  color: var(--color-primary);
  font-size: 13px;
  text-decoration: underline;
}

/* 검색 결과 없음 */
.accordion_w.qna_table > ul > li.NO_RESULT {
  padding: 48px 0;
  border-bottom: none;
  color: var(--color-text-secondary);
  font-size: 16px;
  text-align: center;
}


.faq-categories {
display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 776px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 48px;
}
.category-btn {
  padding: 10px 14px;
  border-radius: 8px;
  background-color: #F7F7F7;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}
.category-btn.active {
  background-color: #FFFC00;
}

@media only screen and (max-width: 767px) {
  .faq-categories { margin-bottom: 16px; }
  .category-btn { padding: 8px 12px; font-size: 14px; line-height: 22px; }
}


@media only screen and (max-width: 767px) {
  .answer_box .text_box { font-size: 13px; line-height: 22px; }
}


.community-container{display:flex;padding:102px 0 140px;flex-direction:column;align-items:center;}
.community-content{max-width:578px;width:100%;margin:0 auto;padding-top:102px;}
.community-title{margin-bottom:48px;}
.notice-search{display:flex;position:relative;width:100%;height:56px;padding:16px 16px 16px 18px;border-radius:8px;background-color:var(--color-bg-lighter);align-items:center;gap:16px;}
.notice-search input{border:none;outline:none;background:transparent;color:var(--color-black);font-size:18px;font-weight:500;line-height:24px;flex:1;}
.notice-search input::placeholder{color:rgba(0, 0, 0, 0.3);}
.notice-search img{width:24px;height:24px;flex-shrink:0;cursor:pointer;}
.notice-count{margin-top:24px;margin-bottom:24px;color:var(--color-text-secondary);font-size:16px;font-weight:500;line-height:24px;}
.notice-count strong{color:var(--color-black);font-weight:600;}
.notice-list{border-top:2px solid var(--color-black);}
.notice-list li{display:flex;padding:18px 0;border-bottom:1px solid #ddd;align-items:center;gap:16px;}
.notice-list-main{display:flex;align-items:center;flex:1;gap:16px;}
.notice-list-number{width:64px;text-align:center;color:var(--color-text-secondary);font-size:16px;font-weight:400;line-height:26px;flex-shrink:0;}
.notice-list-title{color:var(--color-black);font-size:16px;font-weight:400;line-height:26px;flex:1;cursor:pointer;}
.notice-list-title:hover{text-decoration:underline;}
.notice-list-date{width:96px;text-align:center;color:var(--color-text-secondary);font-size:14px;font-weight:400;line-height:26px;flex-shrink:0;}
.notice-highlight{background-color:transparent;color:var(--color-guide-accent);font-weight:600;}
.community-pagination{display:flex;margin-top:48px;align-items:center;justify-content:center;gap:8px;}
.community-pagination button{display:flex;width:40px;height:40px;border-radius:4px;background-color:var(--color-accent);color:var(--color-black);font-size:16px;font-weight:700;align-items:center;justify-content:center;}

.faq-categories{display:flex;margin-bottom:48px;flex-wrap:wrap;gap:8px;}
.category-btn{padding:10px 14px;border-radius:8px;background-color:var(--color-bg-lighter);color:var(--color-black);font-size:18px;font-weight:600;line-height:26px;}
.category-btn.active{background-color:#FFFC00;}
.faq-count{color: var(--color-text-secondary);font-size: 16px; font-weight: 500; line-height: 24px;width: min(776px, 100% - 48px);margin: 0 auto;padding-bottom: 18px;}
.faq-count strong{color:var(--color-black);font-weight:600;}
.faq-list{display:flex;flex-direction:column;}
.faq-question{display:flex;padding:18px 0;border-bottom:1px solid #ddd;align-items:center;justify-content:space-between;cursor:pointer;gap:16px;}
.faq-question-text{display:flex;align-items:center;gap:8px;}
.faq-question-text span{color:var(--color-text-secondary);font-size:16px;font-weight:500;line-height:26px;}
.faq-question-text p{font-size:16px;font-weight:500;line-height:26px;}
.faq-arrow{width:24px;height:24px;min-width:24px;transition:transform 0.2s ease;}
.faq-answer{display:none;padding:22px 18px;border-bottom:1px solid #ddd;background-color:var(--color-bg-lighter);}
.faq-answer p{color:var(--color-black);font-size:14px;font-weight:400;line-height:24px;}
.faq-item.open .faq-answer{display:block;}
.faq-item.open .faq-arrow{transform:rotate(180deg);}
.savepackage-section--narrow .savepackage-media{width:100%;max-width:578px;background:#3ED3FF;aspect-ratio:576 / 720;}
.savepackage-container .savepackage-media .bg-yellow{background:#FAFE51;}
.savepackage-container .soon-txt{position:absolute;top:50%;left:50%;color:#000;font-family:Pretendard;font-size:40px;font-style:normal;font-weight:700;line-height:48px;text-align:center;transform:translate(-50%, -50%);}
.savepackage-section .savepackage-head{gap:24px;}
.savepackage-section .package-media{margin-top:30px;}
.faq-answer ul li {
  position: relative;
  padding-left: 12px;
  line-height: 1.6;
}

.faq-answer ul li + li {
  margin-top: 6px;
}

.faq-answer ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: currentColor;
}


/* ====== 반응형 (Media Queries) ====== */
@media only screen and (max-width: 1280px) {
section{padding:0;}

}



@media (max-width:1024px){
.sub_visual_cons { padding-left: 0;padding-right: 0;margin-bottom: 0;}
.sub_visual_cons h1 {font-size: 24px; font-style: normal;  font-weight: 800; line-height: 32px; /* 133.333% */}
.sub_visual_cons { padding-top: 48px; }
/*#baseForm {padding-top: 32px;}*/
.faq-categories { margin-bottom: 16px; padding: 30px 0;;}
  .tab-btn{padding:10px 14px;font-size:14px;line-height:18px;}
}

@media (max-width:767px){
   .visual-section { overflow: hidden;}
  .visual-bottom {margin-top: 100px;bottom: 12vh;}
  .footer-office-list li p br{display:block;}
  .info-table-wrap{max-width:100%;}
  .badge{padding:4px 10px;font-size:13px;line-height:16px;white-space:nowrap;}
  .notice-item span{overflow:hidden;max-width:250px;white-space:nowrap;text-overflow:ellipsis;}
  .desktop-only{display:none;}
  .mobile-only{display:block;}
  .nav-mobile-bar{height:64px;}
  .tit_sectione{gap:20px;}
  .visual-section{padding:0 24px;}
  .visual-illustration{max-width:309px;}
  .visual-info{margin-top:30px;}
  .visual-scroll{margin-top:24px;}
  .hero-inner{padding:64px 0;gap:0;}
  .hero-title{font-size:24px;line-height:32px;margin-bottom: 24px;}
  .hero-desc{gap:20px;}
  .hero-desc p{font-size:15px;line-height:24px;}
  .hero-btn{ font-size: 14px; font-style: normal;font-weight: 700;line-height: 24px;padding: 16px 26px;margin-top: 32px;}
  .info-section{padding-top:56px;padding-bottom:56px;}
  .info-title{margin-bottom:24px;font-size:24px;line-height:32px;}
  p.run-desc{text-align:center;font-family:Pretendard;font-size:16px;font-style:normal;font-weight:500;line-height:24px;}
  .run-txt{font-size:16px;}
  .info-table{display:flex;border-spacing:0 12px;font-size:15px;line-height:24px;justify-content:flex-start;}
  .info-table th{width:84px;padding-right:16px;color:var(--color-black);font-family:Pretendard;font-size:15px;font-style:normal;font-weight:700;line-height:24px;/* 160% */;}
  .info-table td{color:var(--color-text-secondary);font-family:Pretendard;font-size:15px;font-style:normal;font-weight:400;line-height:24px;/* 160% */;}
  .run-inner{padding-top:48px;padding-bottom:0;gap:24px;}
  .run-title{font-size:24px;line-height:32px;}
   .package-section{padding-top:48px;padding-bottom:56px;gap:24px;}
  .package-title{font-size:24px;line-height:32px;}
  .package-media{gap:20px;overflow-x: visible;}
  .packageSwiper{padding:0;}
  .package-card{border-radius:22px;}
  .package-card-label{font-size:14px; bottom: 30px;}
  .package-thumbs{gap:10px;}
  .package-thumb{width: 50px; height: 50px; padding: 4px; border-radius: 13.758px;flex-shrink: 0;}
  .package-thumb img{border-radius:10px;}
  .package-thumb-logo{padding:6px;}
  #tabContainer, #finisherTabContainer{bottom:24px;}
  #toggleBtnIcon{width:30px;height:30px;}
  .notice-section{padding-top:48px;padding-bottom:56px;}
  .notice-title{font-size:24px;line-height:32px;}
  .notice-tabs{margin-top:24px;padding:4px;}
  .notice-tabs__thumb{top:4px;height:calc(100% - 8px);}
  .notice-tab{padding:9px 28px;font-size:14px;}
  .notice-panels{margin-top:32px;}
  .notice-link{padding:14px 16px;font-size:15px;line-height:22px;}
  .notice-answer{padding:0 16px 14px 16px;font-size:13px;line-height:20px;}
  .footer-brand{padding-bottom:39px;}
  .footer-partner .footer-brand-label{margin-bottom:14px;}
  .footer-info{padding-top:32px;padding-bottom:32px;}
  .footer-links{font-size:13px;gap:14px;}
  .footer-office-title{font-size:16px;}
  .footer-office-list{font-size:14px;}
  .footer-up-arrow{bottom:18px;right:18px;}
  .footer-up-arrow img{width:24px;height:24px;}
  .about-intro{padding-top: 0;}
  .about-intro-inner{padding:70px 24px 123.57px;gap:22px;}
  .about-intro-images{gap: 30px;}
  .about-intro-tag{max-width:160px;}
  .contest-intro-video{width:100%;aspect-ratio:auto;}
  .contest-intro-video video{position:static;inset:auto;width:100%;height:auto;transform:scale(1.02);transform-origin:center;}

  .about-intro-desc{font-size:18px;line-height:28px;margin-top: 0;}
  .about-mission-inner{padding-top: 70px;padding-bottom: 70px;gap:24px;}
  .about-mission-title{font-size:24px;line-height:32px;}
  .about-mission-desc{font-size:16px;line-height:26px;}
  p.about-mission-desc br { display: none;}
  .about-icon-list .muted.small.unicef-info.last br {display: block;}
  .tab-wrap{gap:8px;}
  .tab-wrap li{padding:10px 14px;font-size:15px;}
  .about-overview{padding-top:48px;padding-bottom:48px;}
  .about-overview-title{margin-bottom:24px;font-size:24px;line-height:32px;}
  .about-info-table{display:flex;border-spacing:0 12px;font-size:15px;line-height:24px;}
  .about-info-table th{width:104px;padding-right:16px;font-style: normal; font-weight: 700;line-height: 24px;}
  .about-info-table td{font-size: 15px;font-weight: 400;line-height: 24px; /* 160% */}
  .about-divider{height:8px;}
  .about-donation-inner{padding-top:48px;padding-bottom:48px;gap:24px;}
  .about-donation-title{margin-bottom:14px;font-size:24px;line-height:32px;}
  .about-donation-logo{width:55%;}
  .about-donation-heading{font-size:18px;line-height:24px;}
  .about-donation-text{font-size:15px;line-height:24px;color:var(--color-text-secondary);}
  .about-donation-note{margin-top:16px;}
  .about-donation-subheading{font-size:16px;line-height:24px;}
  .donation_section {width: 180px;height: 25px;;}
  .about-icon-list{font-size:15px;line-height:24px;}
  .about-icon-list img{width:24px;}
  .about-icon-list--bordered{padding-bottom:18px;}
  .about-icon-list li.small{font-size:13px;margin-left: 24px;}
  .about-icon-list p.small { font-size: 13px;margin-left: 24px;}
  .about-icon-list li br {display: none;}
  .about-donation-text br {display: none;}
  .about-info-table-wrap table.about-info-table br {display: none;}
  .muted.small.unicef-info {display: flex;flex-direction: column;}
  .about-donation-lookup-desc{font-size:15px;line-height:24px;}
  .about-location-inner{padding-top:48px;padding-bottom:48px;}
  .about-location-map::after { content: ""; width: 100%;height: 100%;background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%), url(<path-to-image>) hwb(0deg 83% 17% / 40%) -100.938px -72.955px / 183.47% 178.629% no-repeat;display: block;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);z-index: 0;}
  .about-location-title{margin-bottom:32px;font-size:24px;line-height:32px;}
  .about-location-kakao-btn{bottom:14px;padding:14px 18px;font-size:12px;white-space:nowrap;}
  .about-location-kakao-btn img{width:18px;height:18px;}
  .about-location-address{font-size:16px;line-height:24px;}
  .about-location-transit{padding-top:0;}
  .about-location-transit-group h4{font-size:18px;line-height:24px;}
  .about-location-transit-group li p{font-size:16px;line-height:24px;}
  .about-location-parking-note{font-size:15px;line-height:24px;}
  .tabbar .tab-wrap{overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;-ms-overflow-style:none;
  scrollbar-width:none; padding-left: 24px; padding-right: 24px;}
  .tabbar .tab-wrap::-webkit-scrollbar{display:none;}
  .guide-container{padding:0;gap:0;}
  .guide-tab{gap:24px;}
  .guide-tab-title{font-size:24px;line-height:32px;}
  .guide-container .guide-tab-title{margin-bottom:24px;padding-top:65px;}
  .guide-icon-list li.muted p{font-size:14px;}
  .guide-toggle{margin-top:24px;}
  .guide-toggle.is-collapsed{ margin-top: 24px;}
  .divider{height:8px;}
  .guide-tab > .divider{margin:-24px 0;}
  .guide-notice{padding:16px;margin-top:24px;}
  .guide-notice--spaced{margin-top:24px;}
  .guide-notice.no-mg{margin:0;}
  .guide-container div#tab01 .guide-tab-title{padding:0 0 24px;margin:0;}
  .guide-container div#tab04 h2.guide-tab-title{padding-top:0;margin-bottom:0;}
  .guide-container div#tab03 .guide-tab-title.pd-top{padding-top:0; margin-bottom: 24px;}
  h2.guide-tab-title.mg-120{margin-top:0; padding-top: 96px;}
  .guide-tab.guide-tab--first{ margin-top: 0;}
  .guide-tab{ padding: 48px 24px;}
  .guide-tab.guide-tab--first{padding-top: 48px;}
  .guide-tab{margin: 0;}
  .guide-subgroup.guide-subgroup--last { padding-bottom: 0;}
  p.run-desc.ver-mob { display: block;}
p.run-desc.ver-pc {display: none;}



  .guide-container div#tab03{gap:0;}
  .guide-container div#tab04{gap:0;}
  .guide-container div#tab02 .guide-tab-title{padding-top:0;}
  #tab04 .guide-subgroup--first{margin-top:0;}
  #tab02 .guide-notice:last-child{margin-top:24px;}
  .guide-numbered-list li{font-size:14px;font-style:normal;font-weight:500;line-height:24px;}
  #tab02 .guide-notice{margin-bottom:0;}
  .guide-notice p{font-size:14px;line-height:24px;}
  .guide-toggle-header{padding:14px;}
  .guide-toggle-header p{font-size:16px;line-height:24px;}
  .guide-toggle-header img{width:24px;}
  .guide-toggle--spaced{margin-top:24px;}
  .guide-toggle-content--flat{margin-top:12px;}
  .guide-subgroup{margin-top:0;padding-bottom:24px;padding-top:0;}
  .guide-subgroup-title{margin-top:18px;font-size:14px;}
  .guide-icon-list{font-size:14px;line-height:24px;}
  .guide-icon-list img{width:24px;}
  .guide-container div#tab02 .guide-numbered-list{margin-top:24px;}
  .guide-numbered-list{gap:14px;}
  .guide-numbered-list li{font-size:14px;line-height:24px;}
  .guide-numbered-list li.note{font-size:14px;}
  .guide-numbered-list li.note p{font-size:14px;}
  .guide-numbered-list li.note img{width:24px;}
  .guide-note-line{padding:12px 0;font-size:14px;}
  .guide-subnote{font-size:14px;}
  .savepackage-container{gap:64px;}
  .savepackage-section--first{padding-top:38px;}
  .savepackage-head{margin-bottom:24px;gap:24px;}
  .savepackage-head--first{padding-top:0;gap:8px;}
  .savepackage-head--tight{gap:8px;}
  .savepackage-section.tshirt-info-wrap { padding-left: 24px; padding-right: 24px;}
  .savepackage-head.savepackage-head--first.savepackage-head--tight { padding-left: 24px; padding-right: 24px;}
  .savepackage-section--narrow{padding-left: 24px;padding-right: 24px;}
  .savepackage-desc{font-size:16px;line-height:24px;}
  .savepackage-date{gap:8px;}
  .savepackage-date dt{font-size:16px;}
  .savepackage-date dd{font-size:16px;}
  .savepackage-toggle-btn{width:40px;height:40px;}
  .savepackage-size-head{padding:14px 0;font-size:13px;line-height:24px;grid-template-columns: 97px repeat(4, 1fr);}
  .savepackage-size-body{padding:0 0 8px;gap:0;}
  .savepackage-size-body li{padding:8px 0;grid-template-columns: 97px repeat(4, 1fr);}
  .savepackage-size-body li span{font-size:13px;line-height:24px;}
  .savepackage-size-body li span:first-child{letter-spacing:normal;}
  .savepackage-size-table {margin-top: 12px;}

  .savepackage-notice-list{font-size:16px;line-height:24px;}
  .savepackage-notice-list img{width:24px;}
  .course-container{padding:47px 0 48px;}
  .course-content{padding-top:0;gap:24px;}
  .course-body{gap:32px;}
  .course-route-row{gap:12px;}
  .course-route-row::before{width:12px;}
  .course-route-link{height:20px;}
  .course-stop{padding:14px 12px;font-size:13px;line-height:20px;gap:8px;}
  .course-stop::before{width:20px;height:20px;}
  .course-route{display:none;}
  .course-map {height: auto;border-radius: 20px;}
  .course-route-mobile{display:flex;width:100%;flex-direction:column;align-items:center;gap:34px;}
  .community-container{padding:72px 0 48px;}
  .community-content{padding-top:48px;}
  .community-title{margin-bottom:24px;}
  .notice-search{height:48px;padding:12px 14px;}
  .notice-search input{font-size:15px;}
  .notice-count{margin-top:16px;margin-bottom:16px;font-size:14px;}
  .notice-list li{padding:14px 0;gap:8px;}
  .notice-list-main{gap:8px;}
  .notice-list-number{width:32px;font-size:14px;}
  .notice-list-title{font-size:14px;line-height:22px;}
  .notice-list-date{width:72px;font-size:12px; }
  .community-pagination{margin-top:32px;}
  .faq-categories{margin-bottom:0;padding: 30px 24px;}
  .faq-count{font-size: 14px;line-height: 22px;}
  .category-btn{padding: 12px 11px;font-size:14px;line-height:22px;}
  .faq-question{padding:14px 0;}
  .faq-question-text span{font-size:14px;}
  .faq-question-text p{font-size: 14px;font-style: normal;font-weight: 400;line-height: 24px; /* 171.429% */}
  .faq-answer{padding:16px 14px;}
  .faq-answer p{font-size:13px;line-height:22px;}
  .sub_visual_cons h1{padding-left: 24px;}
}

@media (max-width:1279px){

  #header-nav{display:none;}
  .visual-section{min-height:calc(100vh - 64px);margin-top:64px;padding:0 24px;}
  .hero-section{padding-left:24px;padding-right:24px;}
  .info-section{padding-left:24px;padding-right:24px;}
  .notice-section{padding-left:24px;padding-right:24px;}
  .footer-brand{padding:54px 40px 40px;}
  .footer-info{padding:32px 24px;}
  .about-mission-inner{padding-left:24px;padding-right:24px;}

  .about-overview{padding-left:24px;padding-right:24px;}
  .about-donation-inner{padding-left:24px;padding-right:24px;}
  .about-location-inner{padding-left:24px;padding-right:24px;}
  .guide-tab{padding-left:24px;padding-right:24px;gap:0;}
  .course-content{padding-left:24px;padding-right:24px;}
  .community-content{padding-left:24px;padding-right:24px;}

}

@media (min-width:1280px){

  .nav-mobile{display:none;}
}

@media (max-width:340px){

  .custom-gap{gap:5px !important;}
}



/* ==============================
   10. Responsive (전체 미디어쿼리 통합)
   ============================== */

/* ---------- max-width: 1024px (모바일 공통) ---------- */
@media only screen and (max-width: 1024px){
  header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb{display:none;position:fixed;top:64px;left:0;width:100%;height:calc(100vh - 64px);background-color:#fff;overflow-y:auto;}
  header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb.open{display:block;}
  header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb > ul{display:block;padding: 24px;height: 100%;}
  header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb > ul > li{display:block;width:100%;height:auto;}
  header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb > ul > li > a{justify-content:start;height: auto;padding: 0;}
  header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb > ul > li > a > span{position:relative;text-align:left;color: #000;font-family: Pretendard;font-size: 18px;font-style: normal;font-weight: 700;line-height: 24px; /* 133.333% */}
  header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb > ul > li.hover > div.sub_2{height:auto;}
  header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb > ul > li > div.sub_2 > ul > li > a{color: #000;  font-family: Pretendard;font-size: 16px;
  font-style: normal; font-weight: 500;line-height: 24px;padding: 0; text-indent: 0}
  .btn_gnb{display: flex;position: relative;width: 32px;height: 32px;align-items: center;justify-content: center;cursor: pointer;}
  header.save_race_wrap .btn_gnb {position: absolute; left: auto;margin-top: 0;top: 50%;transform: translateY(-50%);right: 16px; }
  header.save_race_wrap .gnb_wrap.sticky { height: 64px;padding: 0;}
  header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb > ul > li + li {margin-top: 28px;}
  header.save_race_wrap .gnb_wrap .logo_wrap > a { width: 98px; height: 32px;}
  .guide-tab--first { padding-top: 0;}
  .gnb_wrap.sticky .gnb > ul > li > .sub_2.is-active {position: static; padding: 0;}
  header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb > ul > li > div.sub_2 { padding: 0;margin: 0;}
  .gnb > ul > li > .sub_2 > ul > li {padding: 0;margin-top: 16px;}
  header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb > ul > li:hover > a > span, header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb > ul > li.hover > a > span { color: #000;}
  p.faq-count.type_user { margin-bottom: 0; border: 0;padding-right: 0; padding-left: 0;}
  .btn_wrap.a3 p.f_left.b2 { display: flex;align-items: center; margin-bottom: 0;gap: 5px;}
  .btn_wrap.a3 { display: flex;align-items: center;gap: 5px;padding: 0 10px;}
  p.f_right.c1 .btn01 { padding: 8px 16px;font-size: 14px;width: 50%;}
  .btn_wrap.a3 .b2 .btn01 { padding: 8px 16px;font-size: 14px;}
  .btn_wrap.a3 .b2 .btn01 { border-radius: 8px; background: #000;padding: 12px 24px; color: #FFF; text-align: center;}
  .f_left b2 p.f_right.c1 {width: 100%;}
   .btn_wrap.a3 .f_right.c1 { width: 50%;display: block;}
   .btn_wrap.a1 .btn01#listBtn {min-width: 80px;}
   .list_wrap .list .text_ { color: #000;font-family: Pretendard; font-size: 14px;font-style: normal; font-weight: 400;line-height: 24px;}
   .list_wrap li.list a { padding: 14px 4px; gap: 8px;}
   .list_wrap li.list a strong {  padding: 0;color: #747474; font-family: Pretendard; font-size: 12px; font-style: normal; font-weight: 500; line-height: 24px;}
   .list_wrap .list .date  {font-size: 12px; font-style: normal;font-weight: 400; line-height: 24px;}
   .btn_wrap.a1 .list_btn{margin: 32px 0 48px;}
   .board_view {padding-top: 48px;}
   .board_search_box_flex{margin-top: 32px;}
   .board_search_box_flex .board_search_box { padding: 12px; height: 48px;}
   .visual-media { top: 35%;width: 90%;gap:30px;}
   .contest-intro-video{width:100%;}
   .tabbar{top:64px;}


}

/* ---------- min-width: 1025px (데스크탑 2뎁스 드롭다운) ---------- */
@media only screen and (min-width: 1025px){
  header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb > ul > li > div.sub_2.is-active{display:flex;left:0;right:auto;padding:0 27px;top:50px;}
  header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb > ul > li > div.sub_2 > ul > li > a{width:100%;padding:7px 0;text-indent:0;color:#000;font-family:Pretendard;font-size:16px;font-style:normal;font-weight:500;line-height:24px;}
  header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb > ul > li > div.sub_2 > ul > li > a:hover,
  header.save_race_wrap .gnb_wrap .gnb_inner > #gnb.gnb > ul > li > div.sub_2 > ul > li > a:focus{font-weight:700;}
}