* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body { background: #f7f3ec; color: #172033; font-family: "Noto Sans TC", sans-serif; line-height: 1.75; overflow-x: hidden; }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

header { align-items: center; backdrop-filter: blur(18px); background: rgba(15, 25, 44, 0.88); border-bottom: 1px solid rgba(255, 255, 255, 0.12); display: flex; justify-content: space-between; left: 0; padding: 18px 6%; position: fixed; right: 0; top: 0; transition: 0.35s ease; width: 100%; z-index: 50; }
header.is-scrolled { background: rgba(15, 25, 44, 0.96); box-shadow: 0 18px 48px rgba(11, 18, 32, 0.22); padding: 12px 6%; }
header .site-brand { align-items: center; display: flex; gap: 12px; }
header .brand-mark { align-items: center; background: linear-gradient(135deg, #ffcf5c, #ff7a45); border-radius: 18px; color: #121a2b; display: flex; font-size: 18px; font-weight: 900; height: 44px; justify-content: center; letter-spacing: 1px; width: 44px; }
header h1 { color: #ffffff; font-size: 22px; font-weight: 900; letter-spacing: 0.04em; line-height: 1.2; }
header nav { align-items: center; display: flex; gap: 28px; }
header nav a { color: rgba(255, 255, 255, 0.78); font-size: 15px; font-weight: 500; position: relative; transition: 0.3s ease; }
header nav a::after { background: #ffcf5c; border-radius: 99px; bottom: -8px; content: ""; height: 3px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: 0.3s ease; width: 100%; }
header nav a:hover { color: #ffffff; }
header nav a:hover::after { transform: scaleX(1); }

#hero-section { align-items: center; background: radial-gradient( circle at 12% 24%, rgba(255, 207, 92, 0.25), transparent 32% ), linear-gradient(135deg, rgba(10, 17, 31, 0.9), rgba(28, 42, 68, 0.84)), url(../image/hero-background.webp) center/cover; color: #ffffff; display: grid; grid-template-columns: 1.08fr 0.92fr; min-height: 100vh; overflow: hidden; padding: 150px 6% 90px; position: relative; }
#hero-section .hero-content { position: relative; transform: translateY(28px); transition: 0.8s ease; z-index: 2; }
#hero-section.is-active .hero-content { opacity: 1; transform: translateY(0); }
#hero-section .hero-eyebrow { align-items: center; color: #ffcf5c; display: flex; font-size: 14px; font-weight: 900; gap: 10px; letter-spacing: 0.18em; margin-bottom: 22px; text-transform: uppercase; }
#hero-section .hero-eyebrow::before { background: #ffcf5c; border-radius: 99px; content: ""; height: 3px; width: 42px; }
#hero-section .hero-title { font-size: clamp(42px, 6vw, 86px); font-weight: 900; letter-spacing: -0.06em; line-height: 1.05; max-width: 900px; }
#hero-section .hero-text { color: rgba(255, 255, 255, 0.82); font-size: 19px; margin-top: 28px; max-width: 680px; }
#hero-section .hero-action-list { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
#hero-section .hero-action-item { background: #ffcf5c; border-radius: 999px; color: #121a2b; font-weight: 900; padding: 14px 24px; transition: 0.3s ease; }
#hero-section .hero-action-item:hover { background: #ffffff; transform: translateY(-3px); }
#hero-section .hero-panel { align-self: end; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 34px; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.28); padding: 24px; position: relative; transform: translateY(40px) rotate(2deg); transition: 0.8s ease 0.12s; z-index: 2; }
#hero-section.is-active .hero-panel { opacity: 1; transform: translateY(0) rotate(0deg); }
#hero-section .hero-image { border-radius: 28px; height: 380px; object-fit: cover; width: 100%; }
#hero-section .hero-note { background: #ffffff; border-radius: 24px; bottom: 42px; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2); color: #172033; left: -30px; padding: 18px 20px; position: absolute; width: 260px; }
#hero-section .hero-note strong { color: #ec5c33; display: block; font-size: 24px; font-weight: 900; line-height: 1.2; }

#overview-section { background: #f7f3ec; padding: 110px 6%; }
#overview-section .overview-grid { display: grid; gap: 26px; grid-template-columns: 1.15fr 0.85fr; margin: 0 auto; max-width: 1180px; }
#overview-section .overview-content { background: #ffffff; border-radius: 34px; box-shadow: 0 24px 70px rgba(23, 32, 51, 0.08); padding: 56px; }
#overview-section .section-kicker { color: #ec5c33; font-size: 14px; font-weight: 900; letter-spacing: 0.18em; margin-bottom: 14px; text-transform: uppercase; }
#overview-section h2 { color: #172033; font-size: 42px; font-weight: 900; letter-spacing: -0.04em; line-height: 1.18; }
#overview-section .overview-text { color: #5a6475; font-size: 17px; margin-top: 22px; }
#overview-section .overview-list { display: grid; gap: 16px; margin-top: 34px; }
#overview-section .overview-item { align-items: flex-start; background: #f7f3ec; border-radius: 22px; display: flex; gap: 16px; padding: 18px; }
#overview-section .overview-number { align-items: center; background: #172033; border-radius: 16px; color: #ffcf5c; display: flex; flex: 0 0 42px; font-weight: 900; height: 42px; justify-content: center; }
#overview-section .overview-item-title { color: #172033; font-size: 18px; font-weight: 900; }
#overview-section .overview-item-text { color: #687184; font-size: 15px; margin-top: 4px; }
#overview-section .overview-media { border-radius: 34px; min-height: 100%; overflow: hidden; position: relative; }
#overview-section .overview-media img { height: 100%; object-fit: cover; transform: scale(1.08); transition: 0.9s ease; width: 100%; }
#overview-section.is-active .overview-media img { transform: scale(1); }

#stadium-section { background: #172033; color: #ffffff; padding: 110px 6%; position: relative; }
#stadium-section::before { background: radial-gradient( circle, rgba(255, 207, 92, 0.18), transparent 60% ); content: ""; height: 420px; position: absolute; right: -120px; top: 40px; width: 420px; }
#stadium-section .section-head { margin: 0 auto 46px; max-width: 880px; text-align: center; }
#stadium-section .section-kicker { color: #ffcf5c; font-size: 14px; font-weight: 900; letter-spacing: 0.18em; margin-bottom: 14px; text-transform: uppercase; }
#stadium-section h2 { font-size: 42px; font-weight: 900; letter-spacing: -0.04em; line-height: 1.18; }
#stadium-section .section-text { color: rgba(255, 255, 255, 0.72); font-size: 17px; margin-top: 18px; }
#stadium-section .stadium-grid { display: grid; gap: 28px; grid-template-columns: repeat(2, 1fr); margin: 0 auto; max-width: 1180px; position: relative; z-index: 2; }
#stadium-section .stadium-item { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 34px; overflow: hidden; transform: translateY(34px); transition: 0.7s ease; }
#stadium-section.is-active .stadium-item { opacity: 1; transform: translateY(0); }
#stadium-section .stadium-item:nth-child(2) { transition-delay: 0.12s; }
#stadium-section .stadium-image { height: 290px; object-fit: cover; width: 100%; }
#stadium-section .stadium-content { padding: 30px; }
#stadium-section .stadium-city { color: #ffcf5c; font-size: 14px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; }
#stadium-section .stadium-title { font-size: 28px; font-weight: 900; margin-top: 8px; }
#stadium-section .stadium-text { color: rgba(255, 255, 255, 0.74); margin-top: 14px; }
#stadium-section .stadium-meta-list { display: grid; gap: 10px; margin-top: 22px; }
#stadium-section .stadium-meta-item { background: rgba(255, 255, 255, 0.08); border-radius: 16px; color: rgba(255, 255, 255, 0.86); padding: 12px 14px; }

#ticket-section { background: linear-gradient(180deg, #f7f3ec, #ffffff); padding: 110px 6%; }
#ticket-section .ticket-grid { align-items: center; display: grid; gap: 44px; grid-template-columns: 0.9fr 1.1fr; margin: 0 auto; max-width: 1180px; }
#ticket-section .ticket-media { border-radius: 36px; overflow: hidden; position: relative; }
#ticket-section .ticket-media img { height: 560px; object-fit: cover; transform: translateX(-26px); transition: 0.8s ease; width: 100%; }
#ticket-section.is-active .ticket-media img { transform: translateX(0); }
#ticket-section .ticket-content { padding: 20px 0; }
#ticket-section .section-kicker { color: #ec5c33; font-size: 14px; font-weight: 900; letter-spacing: 0.18em; margin-bottom: 14px; text-transform: uppercase; }
#ticket-section h2 { color: #172033; font-size: 42px; font-weight: 900; letter-spacing: -0.04em; line-height: 1.18; }
#ticket-section .ticket-text { color: #5a6475; font-size: 17px; margin-top: 22px; }
#ticket-section .ticket-list { display: grid; gap: 16px; margin-top: 30px; }
#ticket-section .ticket-item { border-left: 5px solid #ffcf5c; background: #ffffff; border-radius: 20px; box-shadow: 0 18px 46px rgba(23, 32, 51, 0.08); padding: 20px 22px; }
#ticket-section .ticket-title { color: #172033; font-size: 18px; font-weight: 900; }
#ticket-section .ticket-item-text { color: #687184; margin-top: 4px; }

#route-section { background: #ffffff; padding: 110px 6%; }
#route-section .section-head { align-items: end; display: grid; gap: 28px; grid-template-columns: 0.95fr 1.05fr; margin: 0 auto 46px; max-width: 1180px; }
#route-section .section-kicker { color: #ec5c33; font-size: 14px; font-weight: 900; letter-spacing: 0.18em; margin-bottom: 14px; text-transform: uppercase; }
#route-section h2 { color: #172033; font-size: 42px; font-weight: 900; letter-spacing: -0.04em; line-height: 1.18; }
#route-section .section-text { color: #5a6475; font-size: 17px; }
#route-section .route-grid { display: grid; gap: 22px; grid-template-columns: repeat(5, 1fr); margin: 0 auto; max-width: 1180px; }
#route-section .route-item { background: #f7f3ec; border-radius: 30px; overflow: hidden; position: relative; transform: translateY(30px); transition: 0.7s ease; }
#route-section.is-active .route-item { opacity: 1; transform: translateY(0); }
#route-section .route-item:nth-child(2) { transition-delay: 0.08s; }
#route-section .route-item:nth-child(3) { transition-delay: 0.16s; }
#route-section .route-item:nth-child(4) { transition-delay: 0.24s; }
#route-section .route-item:nth-child(5) { transition-delay: 0.32s; }
#route-section .route-image { height: 230px; object-fit: cover; width: 100%; }
#route-section .route-content { padding: 24px; }
#route-section .route-tag { color: #ec5c33; font-size: 13px; font-weight: 900; letter-spacing: 0.12em; }
#route-section .route-title { color: #172033; font-size: 20px; font-weight: 900; line-height: 1.35; margin-top: 8px; }
#route-section .route-text { color: #687184; font-size: 15px; margin-top: 10px; }

#check-section { background: #f7f3ec; padding: 110px 6%; }
#check-section .check-grid { align-items: stretch; display: grid; gap: 28px; grid-template-columns: 0.85fr 1.15fr; margin: 0 auto; max-width: 1180px; }
#check-section .check-card { background: #172033; border-radius: 34px; color: #ffffff; padding: 46px; position: relative; }
#check-section .check-card::after { background: #ffcf5c; border-radius: 999px; bottom: 40px; content: ""; height: 90px; opacity: 0.9; position: absolute; right: 40px; width: 90px; }
#check-section .section-kicker { color: #ffcf5c; font-size: 14px; font-weight: 900; letter-spacing: 0.18em; margin-bottom: 14px; text-transform: uppercase; }
#check-section h2 { font-size: 42px; font-weight: 900; letter-spacing: -0.04em; line-height: 1.18; position: relative; z-index: 2; }
#check-section .check-text { color: rgba(255, 255, 255, 0.72); font-size: 17px; margin-top: 22px; max-width: 520px; position: relative; z-index: 2; }
#check-section .check-list { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
#check-section .check-item { background: #ffffff; border-radius: 24px; box-shadow: 0 20px 56px rgba(23, 32, 51, 0.07); padding: 24px; transform: translateY(24px); transition: 0.6s ease; }
#check-section.is-active .check-item { opacity: 1; transform: translateY(0); }
#check-section .check-item:nth-child(2) { transition-delay: 0.08s; }
#check-section .check-item:nth-child(3) { transition-delay: 0.16s; }
#check-section .check-item:nth-child(4) { transition-delay: 0.24s; }
#check-section .check-icon { align-items: center; background: #fff0c8; border-radius: 18px; color: #bd6424; display: flex; font-size: 22px; font-weight: 900; height: 50px; justify-content: center; margin-bottom: 16px; width: 50px; }
#check-section .check-title { color: #172033; font-size: 19px; font-weight: 900; }
#check-section .check-item-text { color: #687184; font-size: 15px; margin-top: 8px; }

#faq-section { background: #ffffff; padding: 110px 6%; }
#faq-section .section-head { margin: 0 auto 42px; max-width: 780px; text-align: center; }
#faq-section .section-kicker { color: #ec5c33; font-size: 14px; font-weight: 900; letter-spacing: 0.18em; margin-bottom: 14px; text-transform: uppercase; }
#faq-section h2 { color: #172033; font-size: 42px; font-weight: 900; letter-spacing: -0.04em; line-height: 1.18; }
#faq-section .faq-list { display: grid; gap: 16px; margin: 0 auto; max-width: 960px; }
#faq-section .faq-item { background: #f7f3ec; border-radius: 24px; padding: 24px 28px; }
#faq-section .faq-title { color: #172033; font-size: 18px; font-weight: 900; }
#faq-section .faq-text { color: #687184; margin-top: 8px; }

#cta-section { background: linear-gradient(135deg, #ec5c33, #ffcf5c); padding: 90px 6%; }
#cta-section .cta-content { align-items: center; display: grid; gap: 30px; grid-template-columns: 1fr auto; margin: 0 auto; max-width: 1180px; }
#cta-section h2 { color: #172033; font-size: 40px; font-weight: 900; letter-spacing: -0.04em; line-height: 1.18; }
#cta-section .cta-text { color: rgba(23, 32, 51, 0.78); font-size: 17px; margin-top: 14px; max-width: 720px; }
#cta-section .cta-link { background: #172033; border-radius: 999px; color: #ffffff; display: inline-flex; font-weight: 900; padding: 16px 28px; transition: 0.3s ease; white-space: nowrap; }
#cta-section .cta-link:hover { background: #ffffff; color: #172033; transform: translateY(-4px); }

footer { background: #101827; color: rgba(255, 255, 255, 0.72); padding: 44px 6%; }
footer .footer-grid { align-items: center; display: grid; gap: 24px; grid-template-columns: 1fr auto; margin: 0 auto; max-width: 1180px; }
footer .footer-title { color: #ffffff; font-size: 20px; font-weight: 900; }
footer .footer-text { font-size: 14px; margin-top: 6px; }
footer .footer-list { display: flex; gap: 18px; }
footer .footer-item { color: rgba(255, 255, 255, 0.72); font-size: 14px; transition: 0.3s ease; }
footer .footer-item:hover { color: #ffcf5c; }

#hero-section .hero-content, #hero-section .hero-panel, #stadium-section .stadium-item, #route-section .route-item, #check-section .check-item { opacity: 0; }

@media (max-width: 1280px) {
	#route-section .route-grid { grid-template-columns: repeat(3, 1fr); }
	#hero-section .hero-title { font-size: 68px; }
	#overview-section .overview-content { padding: 46px; }
}
@media (max-width: 960px) {
	header { align-items: flex-start; flex-direction: column; gap: 16px; }
	header nav { flex-wrap: wrap; gap: 16px 22px; }
	#hero-section { grid-template-columns: 1fr; padding-top: 190px; }
	#hero-section .hero-panel { max-width: 640px; }
	#overview-section .overview-grid { grid-template-columns: 1fr; }
	#stadium-section .stadium-grid { grid-template-columns: 1fr; }
	#ticket-section .ticket-grid { grid-template-columns: 1fr; }
	#route-section .section-head { grid-template-columns: 1fr; }
	#check-section .check-grid { grid-template-columns: 1fr; }
	#cta-section .cta-content { grid-template-columns: 1fr; }
	footer .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	header { padding: 14px 5%; }
	header.is-scrolled { padding: 12px 5%; }
	header h1 { font-size: 18px; }
	header nav a { font-size: 14px; }
	#hero-section { padding: 190px 5% 74px; }
	#hero-section .hero-title { font-size: 48px; }
	#hero-section .hero-text { font-size: 17px; }
	#hero-section .hero-note { bottom: 26px; left: 18px; position: absolute; width: calc(100% - 36px); }
	#overview-section { padding: 82px 5%; }
	#overview-section .overview-content { padding: 30px; }
	#overview-section h2 { font-size: 34px; }
	#stadium-section { padding: 82px 5%; }
	#stadium-section h2 { font-size: 34px; }
	#ticket-section { padding: 82px 5%; }
	#ticket-section h2 { font-size: 34px; }
	#ticket-section .ticket-media img { height: 390px; }
	#route-section { padding: 82px 5%; }
	#route-section h2 { font-size: 34px; }
	#route-section .route-grid { grid-template-columns: 1fr; }
	#check-section { padding: 82px 5%; }
	#check-section h2 { font-size: 34px; }
	#check-section .check-list { grid-template-columns: 1fr; }
	#faq-section { padding: 82px 5%; }
	#faq-section h2 { font-size: 34px; }
	#cta-section h2 { font-size: 34px; }
	footer .footer-list { flex-wrap: wrap; }
}
@media (max-width: 500px) {
	header nav { display: none; }
	#hero-section { min-height: auto; padding-top: 130px; }
	#hero-section .hero-title { font-size: 38px; }
	#hero-section .hero-action-list { flex-direction: column; }
	#hero-section .hero-action-item { text-align: center; }
	#hero-section .hero-image { height: 300px; }
	#overview-section .overview-content { padding: 24px; }
	#stadium-section .stadium-content { padding: 24px; }
	#ticket-section .ticket-media img { height: 320px; }
	#check-section .check-card { padding: 32px; }
	#cta-section .cta-link { justify-content: center; width: 100%; }
}