html { margin: 0; padding: 0; scroll-behavior: smooth; }
body { margin: 0; font-family: "Noto Sans TC", sans-serif; color: #f8fbff; background: #07111f; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }
header { position: fixed; top: 0; left: 0; z-index: 20; width: 100%; background: rgba(7, 17, 31, 0.76); border-bottom: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(18px); }
header .header-content { width: min(1180px, calc(100% - 48px)); margin: 0 auto; min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
header .site-title { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: 1px; color: #ffffff; }
header .site-title span { color: #19f6c4; }
header .nav-list { display: flex; align-items: center; gap: 10px; }
header .nav-list a { padding: 10px 14px; border-radius: 999px; color: rgba(255, 255, 255, 0.76); font-size: 15px; font-weight: 500; transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease; }
header .nav-list a:hover { color: #06111f; background: #19f6c4; transform: translateY(-2px); }
header .header-link { padding: 12px 18px; border-radius: 999px; color: #06111f; background: linear-gradient(135deg, #19f6c4, #77d8ff); font-weight: 800; box-shadow: 0 12px 30px rgba(25, 246, 196, 0.24); transition: transform 0.3s ease, box-shadow 0.3s ease; }
header .header-link:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(25, 246, 196, 0.36); }
#hero-section { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; padding: 128px 0 72px; background: radial-gradient( circle at 20% 20%, rgba(25, 246, 196, 0.28), transparent 28% ), radial-gradient( circle at 80% 15%, rgba(119, 216, 255, 0.24), transparent 30% ), linear-gradient(135deg, #07111f 0%, #10284a 55%, #07111f 100%); }
#hero-section::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent); }
#hero-section .hero-content { position: relative; z-index: 2; width: min(1180px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 54px; }
#hero-section .hero-left { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; }
#hero-section.is-active .hero-left { opacity: 1; transform: translateY(0); }
#hero-section .hero-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(25, 246, 196, 0.36); border-radius: 999px; color: #19f6c4; background: rgba(25, 246, 196, 0.08); font-size: 14px; font-weight: 700; }
#hero-section .hero-title { margin: 22px 0 18px; font-size: clamp(40px, 6vw, 82px); line-height: 1.04; letter-spacing: -2px; font-weight: 900; }
#hero-section .hero-title span { display: block; color: #19f6c4; text-shadow: 0 0 28px rgba(25, 246, 196, 0.35); }
#hero-section .hero-text { max-width: 620px; margin: 0 0 34px; color: rgba(248, 251, 255, 0.78); font-size: 18px; line-height: 1.9; }
#hero-section .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
#hero-section .hero-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border-radius: 16px; font-weight: 800; transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease; }
#hero-section .hero-actions a:first-child { color: #06111f; background: linear-gradient(135deg, #19f6c4, #77d8ff); }
#hero-section .hero-actions a:last-child { color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.08); }
#hero-section .hero-actions a:hover { transform: translateY(-3px); }
#hero-section .hero-media { position: relative; opacity: 0; transform: translateX(34px) scale(0.96); transition: opacity 0.9s ease 0.12s, transform 0.9s ease 0.12s; }
#hero-section.is-active .hero-media { opacity: 1; transform: translateX(0) scale(1); }
#hero-section .hero-image { position: relative; overflow: hidden; border-radius: 34px; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48); }
#hero-section .hero-image img { height: 560px; object-fit: cover; filter: saturate(1.08) contrast(1.05); }
#hero-section .hero-card { position: absolute; left: -26px; bottom: 32px; width: 230px; padding: 20px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 24px; background: rgba(7, 17, 31, 0.82); backdrop-filter: blur(18px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34); }
#hero-section .hero-card strong { display: block; color: #19f6c4; font-size: 30px; line-height: 1; }
#hero-section .hero-card span { display: block; margin-top: 9px; color: rgba(248, 251, 255, 0.75); font-size: 14px; line-height: 1.6; }
#category-section { padding: 110px 0; background: #07111f; }
#category-section .category-content { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
#category-section .section-subtitle { margin: 0 0 12px; color: #19f6c4; font-size: 15px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
#category-section .section-title { max-width: 760px; margin: 0 0 46px; font-size: clamp(30px, 4vw, 52px); line-height: 1.18; font-weight: 900; letter-spacing: -1px; }
#category-section .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
#category-section .category-item { min-height: 260px; position: relative; overflow: hidden; border-radius: 28px; padding: 24px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease, border-color 0.3s ease, background 0.3s ease; }
#category-section.is-active .category-item { opacity: 1; transform: translateY(0); }
#category-section.is-active .category-item:nth-child(2) { transition-delay: 0.08s; }
#category-section.is-active .category-item:nth-child(3) { transition-delay: 0.16s; }
#category-section.is-active .category-item:nth-child(4) { transition-delay: 0.24s; }
#category-section .category-item:hover { border-color: rgba(25, 246, 196, 0.48); background: rgba(25, 246, 196, 0.08); }
#category-section .category-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(7, 17, 31, 0.95), rgba(7, 17, 31, 0.08) ); z-index: 1; }
#category-section .category-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.58; transform: scale(1.04); transition: transform 0.45s ease, opacity 0.45s ease; }
#category-section .category-item:hover img { opacity: 0.78; transform: scale(1.1); }
#category-section .category-text { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
#category-section .category-title { margin: 0 0 8px; font-size: 24px; font-weight: 900; }
#category-section .category-desc { margin: 0; color: rgba(248, 251, 255, 0.76); font-size: 15px; line-height: 1.7; }
#live-section { padding: 110px 0; background: linear-gradient(180deg, #07111f 0%, #0d1f38 100%); }
#live-section .live-content { width: min(1180px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: 0.88fr 1.12fr; gap: 50px; align-items: start; }
#live-section .live-left { position: sticky; top: 116px; opacity: 0; transform: translateX(-28px); transition: opacity 0.8s ease, transform 0.8s ease; }
#live-section.is-active .live-left { opacity: 1; transform: translateX(0); }
#live-section .section-subtitle { margin: 0 0 12px; color: #77d8ff; font-size: 15px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
#live-section .section-title { margin: 0 0 18px; font-size: clamp(30px, 4vw, 50px); line-height: 1.2; font-weight: 900; letter-spacing: -1px; }
#live-section .section-text { margin: 0 0 28px; color: rgba(248, 251, 255, 0.76); font-size: 17px; line-height: 1.9; }
#live-section .live-feature { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
#live-section .live-feature-item { padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); }
#live-section .live-feature-item strong { display: block; color: #19f6c4; font-size: 28px; line-height: 1; }
#live-section .live-feature-item span { display: block; margin-top: 8px; color: rgba(248, 251, 255, 0.72); font-size: 14px; line-height: 1.6; }
#live-section .live-list { display: flex; flex-direction: column; gap: 16px; }
#live-section .live-item { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 20px; padding: 16px; border-radius: 26px; background: rgba(255, 255, 255, 0.065); border: 1px solid rgba(255, 255, 255, 0.11); opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease, border-color 0.3s ease, background 0.3s ease; }
#live-section.is-active .live-item { opacity: 1; transform: translateY(0); }
#live-section.is-active .live-item:nth-child(2) { transition-delay: 0.08s; }
#live-section.is-active .live-item:nth-child(3) { transition-delay: 0.16s; }
#live-section.is-active .live-item:nth-child(4) { transition-delay: 0.24s; }
#live-section .live-item:hover { border-color: rgba(119, 216, 255, 0.46); background: rgba(119, 216, 255, 0.09); }
#live-section .live-image { overflow: hidden; border-radius: 18px; }
#live-section .live-image img { height: 104px; object-fit: cover; transition: transform 0.4s ease; }
#live-section .live-item:hover .live-image img { transform: scale(1.08); }
#live-section .live-title { margin: 0 0 8px; font-size: 20px; font-weight: 900; }
#live-section .live-text { margin: 0; color: rgba(248, 251, 255, 0.72); line-height: 1.7; font-size: 15px; }
#live-section .live-tag { display: inline-flex; align-items: center; justify-content: center; padding: 9px 12px; border-radius: 999px; color: #06111f; background: #19f6c4; font-size: 13px; font-weight: 900; white-space: nowrap; }
#anchor-section { padding: 110px 0; background: #f4f8fb; color: #07111f; }
#anchor-section .anchor-content { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
#anchor-section .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 42px; }
#anchor-section .section-subtitle { margin: 0 0 12px; color: #0b8f78; font-size: 15px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
#anchor-section .section-title { max-width: 680px; margin: 0; font-size: clamp(30px, 4vw, 50px); line-height: 1.2; font-weight: 900; letter-spacing: -1px; }
#anchor-section .section-text { max-width: 410px; margin: 0; color: rgba(7, 17, 31, 0.62); font-size: 16px; line-height: 1.85; }
#anchor-section .anchor-grid { display: grid; grid-template-columns: 1.1fr 0.9fr 0.9fr; gap: 20px; }
#anchor-section .anchor-item { position: relative; min-height: 420px; overflow: hidden; border-radius: 32px; background: #ffffff; box-shadow: 0 24px 70px rgba(7, 17, 31, 0.11); opacity: 0; transform: translateY(32px); transition: opacity 0.8s ease, transform 0.8s ease, box-shadow 0.3s ease; }
#anchor-section.is-active .anchor-item { opacity: 1; transform: translateY(0); }
#anchor-section.is-active .anchor-item:nth-child(2) { transition-delay: 0.1s; }
#anchor-section.is-active .anchor-item:nth-child(3) { transition-delay: 0.2s; }
#anchor-section .anchor-item:hover { box-shadow: 0 30px 90px rgba(7, 17, 31, 0.18); }
#anchor-section .anchor-item::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( to top, rgba(7, 17, 31, 0.88), rgba(7, 17, 31, 0.05) ); }
#anchor-section .anchor-item img { height: 100%; object-fit: cover; transition: transform 0.5s ease; }
#anchor-section .anchor-item:hover img { transform: scale(1.07); }
#anchor-section .anchor-text { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2; color: #ffffff; }
#anchor-section .anchor-title { margin: 0 0 8px; font-size: 24px; font-weight: 900; }
#anchor-section .anchor-desc { margin: 0; color: rgba(255, 255, 255, 0.76); font-size: 15px; line-height: 1.7; }
#experience-section { padding: 110px 0; background: radial-gradient( circle at 50% 0%, rgba(25, 246, 196, 0.16), transparent 36% ), #07111f; }
#experience-section .experience-content { width: min(1180px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; }
#experience-section .experience-media { position: relative; opacity: 0; transform: translateX(-28px); transition: opacity 0.8s ease, transform 0.8s ease; }
#experience-section.is-active .experience-media { opacity: 1; transform: translateX(0); }
#experience-section .experience-image { overflow: hidden; border-radius: 36px; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42); }
#experience-section .experience-image img { height: 610px; object-fit: cover; }
#experience-section .experience-badge { position: absolute; right: -24px; top: 42px; width: 210px; padding: 18px; border-radius: 24px; color: #07111f; background: linear-gradient(135deg, #19f6c4, #77d8ff); box-shadow: 0 22px 52px rgba(25, 246, 196, 0.26); }
#experience-section .experience-badge strong { display: block; font-size: 34px; line-height: 1; font-weight: 900; }
#experience-section .experience-badge span { display: block; margin-top: 8px; font-size: 14px; font-weight: 800; line-height: 1.55; }
#experience-section .experience-right { opacity: 0; transform: translateX(28px); transition: opacity 0.8s ease 0.1s, transform 0.8s ease 0.1s; }
#experience-section.is-active .experience-right { opacity: 1; transform: translateX(0); }
#experience-section .section-subtitle { margin: 0 0 12px; color: #19f6c4; font-size: 15px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
#experience-section .section-title { margin: 0 0 18px; font-size: clamp(30px, 4vw, 52px); line-height: 1.2; font-weight: 900; letter-spacing: -1px; }
#experience-section .section-text { margin: 0 0 30px; color: rgba(248, 251, 255, 0.76); font-size: 17px; line-height: 1.9; }
#experience-section .experience-list { display: flex; flex-direction: column; gap: 14px; }
#experience-section .experience-item { display: flex; gap: 16px; padding: 18px; border-radius: 24px; background: rgba(255, 255, 255, 0.065); border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease; }
#experience-section .experience-item:hover { transform: translateX(6px); border-color: rgba(25, 246, 196, 0.42); background: rgba(25, 246, 196, 0.08); }
#experience-section .experience-icon { flex: 0 0 42px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; color: #07111f; background: #19f6c4; font-weight: 900; }
#experience-section .experience-title { margin: 0 0 6px; font-size: 19px; font-weight: 900; }
#experience-section .experience-desc { margin: 0; color: rgba(248, 251, 255, 0.72); font-size: 15px; line-height: 1.7; }
#schedule-section { padding: 110px 0; color: #07111f; background: linear-gradient(135deg, #eef7ff, #ffffff); }
#schedule-section .schedule-content { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
#schedule-section .section-subtitle { margin: 0 0 12px; color: #0b8f78; font-size: 15px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
#schedule-section .section-title { max-width: 740px; margin: 0 0 42px; font-size: clamp(30px, 4vw, 52px); line-height: 1.2; font-weight: 900; letter-spacing: -1px; }
#schedule-section .schedule-list { display: flex; flex-direction: column; border-radius: 34px; overflow: hidden; background: #ffffff; box-shadow: 0 24px 70px rgba(7, 17, 31, 0.1); }
#schedule-section .schedule-item { display: grid; grid-template-columns: 160px 1fr 180px; align-items: center; gap: 24px; padding: 26px 30px; border-bottom: 1px solid rgba(7, 17, 31, 0.08); opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease, background 0.3s ease; }
#schedule-section .schedule-item:last-child { border-bottom: 0; }
#schedule-section.is-active .schedule-item { opacity: 1; transform: translateY(0); }
#schedule-section.is-active .schedule-item:nth-child(2) { transition-delay: 0.08s; }
#schedule-section.is-active .schedule-item:nth-child(3) { transition-delay: 0.16s; }
#schedule-section.is-active .schedule-item:nth-child(4) { transition-delay: 0.24s; }
#schedule-section .schedule-item:hover { background: rgba(25, 246, 196, 0.08); }
#schedule-section .schedule-time { color: #0b8f78; font-size: 28px; font-weight: 900; letter-spacing: -1px; }
#schedule-section .schedule-title { margin: 0 0 8px; font-size: 21px; font-weight: 900; }
#schedule-section .schedule-text { margin: 0; color: rgba(7, 17, 31, 0.62); line-height: 1.7; font-size: 15px; }
#schedule-section .schedule-link { justify-self: end; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 999px; color: #07111f; background: #19f6c4; font-weight: 900; transition: transform 0.3s ease, box-shadow 0.3s ease; }
#schedule-section .schedule-link:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(25, 246, 196, 0.28); }
#cta-section { padding: 118px 0; background: #07111f; }
#cta-section .cta-content { width: min(1180px, calc(100% - 48px)); margin: 0 auto; position: relative; overflow: hidden; border-radius: 40px; padding: 72px; background: linear-gradient( 135deg, rgba(25, 246, 196, 0.92), rgba(119, 216, 255, 0.9) ), url(../img/cta-background-image.webp) center/cover; color: #06111f; }
#cta-section .cta-content::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.18); }
#cta-section .cta-left { position: relative; z-index: 2; max-width: 720px; opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; }
#cta-section.is-active .cta-left { opacity: 1; transform: translateY(0); }
#cta-section .section-subtitle { margin: 0 0 12px; font-size: 15px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
#cta-section .section-title { margin: 0 0 18px; font-size: clamp(32px, 5vw, 58px); line-height: 1.12; font-weight: 900; letter-spacing: -1px; }
#cta-section .section-text { margin: 0 0 30px; max-width: 640px; color: rgba(6, 17, 31, 0.76); font-size: 17px; line-height: 1.9; font-weight: 600; }
#cta-section .cta-link { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 999px; color: #ffffff; background: #07111f; font-weight: 900; transition: transform 0.3s ease, box-shadow 0.3s ease; }
#cta-section .cta-link:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(7, 17, 31, 0.28); }
footer { background: #050b14; border-top: 1px solid rgba(255, 255, 255, 0.08); }
footer .footer-content { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 46px 0; display: flex; justify-content: space-between; gap: 26px; align-items: center; }
footer .footer-title { margin: 0; font-size: 22px; font-weight: 900; }
footer .footer-title span { color: #19f6c4; }
footer .footer-text { margin: 8px 0 0; color: rgba(248, 251, 255, 0.58); font-size: 14px; line-height: 1.7; }
footer .footer-list { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
footer .footer-list a { padding: 9px 13px; border-radius: 999px; color: rgba(248, 251, 255, 0.66); background: rgba(255, 255, 255, 0.06); transition: color 0.3s ease, background 0.3s ease; }
footer .footer-list a:hover { color: #06111f; background: #19f6c4; }
@media (max-width: 1280px) {
header .header-content { width: min(1080px, calc(100% - 40px)); }
#hero-section .hero-content { width: min(1080px, calc(100% - 40px)); gap: 42px; }
#category-section .category-content { width: min(1080px, calc(100% - 40px)); }
#live-section .live-content { width: min(1080px, calc(100% - 40px)); }
#anchor-section .anchor-content { width: min(1080px, calc(100% - 40px)); }
#experience-section .experience-content { width: min(1080px, calc(100% - 40px)); }
#schedule-section .schedule-content { width: min(1080px, calc(100% - 40px)); }
#cta-section .cta-content { width: min(1080px, calc(100% - 40px)); box-sizing: border-box; }
footer .footer-content { width: min(1080px, calc(100% - 40px)); }
}
@media (max-width: 960px) {
header .header-content { min-height: 70px; }
header .nav-list { display: none; }
#hero-section { padding-top: 112px; }
#hero-section .hero-content { grid-template-columns: 1fr; }
#hero-section .hero-image img { height: 460px; }
#category-section .category-grid { grid-template-columns: repeat(2, 1fr); }
#live-section .live-content { grid-template-columns: 1fr; }
#live-section .live-left { position: relative; top: auto; }
#anchor-section .section-head { display: block; }
#anchor-section .section-text { margin-top: 16px; }
#anchor-section .anchor-grid { grid-template-columns: 1fr; }
#anchor-section .anchor-item { min-height: 360px; }
#experience-section .experience-content { grid-template-columns: 1fr; }
#experience-section .experience-image img { height: 500px; }
#schedule-section .schedule-item { grid-template-columns: 130px 1fr; }
#schedule-section .schedule-link { grid-column: 2; justify-self: start; }
footer .footer-content { align-items: flex-start; flex-direction: column; }
footer .footer-list { justify-content: flex-start; }
}
@media (max-width: 768px) {
header .site-title { font-size: 22px; }
header .header-link { padding: 10px 14px; font-size: 14px; }
#hero-section { padding: 104px 0 62px; }
#hero-section .hero-title { letter-spacing: -1px; }
#hero-section .hero-text { font-size: 16px; }
#hero-section .hero-actions { flex-direction: column; }
#hero-section .hero-actions a { width: 100%; box-sizing: border-box; }
#hero-section .hero-card { left: 18px; bottom: 18px; width: 190px; }
#category-section { padding: 82px 0; }
#category-section .category-grid { grid-template-columns: 1fr; }
#category-section .category-item { min-height: 240px; }
#live-section { padding: 82px 0; }
#live-section .live-feature { grid-template-columns: 1fr; }
#live-section .live-item { grid-template-columns: 120px 1fr; }
#live-section .live-tag { grid-column: 2; justify-self: start; }
#anchor-section { padding: 82px 0; }
#experience-section { padding: 82px 0; }
#experience-section .experience-badge { right: 16px; top: 16px; width: 170px; }
#schedule-section { padding: 82px 0; }
#schedule-section .schedule-item { grid-template-columns: 1fr; gap: 12px; }
#schedule-section .schedule-link { grid-column: auto; }
#cta-section { padding: 82px 0; }
#cta-section .cta-content { padding: 48px 28px; border-radius: 30px; }
}
@media (max-width: 500px) {
header .header-content { width: min(100% - 28px, 1180px); min-height: 66px; gap: 14px; }
header .site-title { font-size: 19px; }
header .header-link { display: none; }
#hero-section .hero-content { width: min(100% - 28px, 1180px); }
#hero-section .hero-image img { height: 360px; }
#hero-section .hero-card { position: relative; left: auto; bottom: auto; width: auto; margin-top: 14px; }
#category-section .category-content { width: min(100% - 28px, 1180px); }
#live-section .live-content { width: min(100% - 28px, 1180px); }
#live-section .live-item { grid-template-columns: 1fr; }
#live-section .live-image img { height: 170px; }
#live-section .live-tag { grid-column: auto; }
#anchor-section .anchor-content { width: min(100% - 28px, 1180px); }
#anchor-section .anchor-item { min-height: 320px; }
#experience-section .experience-content { width: min(100% - 28px, 1180px); }
#experience-section .experience-image img { height: 390px; }
#experience-section .experience-badge { position: relative; right: auto; top: auto; width: auto; margin-top: 14px; }
#experience-section .experience-item { flex-direction: column; }
#schedule-section .schedule-content { width: min(100% - 28px, 1180px); }
#schedule-section .schedule-list { border-radius: 26px; }
#schedule-section .schedule-item { padding: 22px; }
#cta-section .cta-content { width: min(100% - 28px, 1180px); }
footer .footer-content { width: min(100% - 28px, 1180px); }
}