@charset 'UTF-8';@import url(https://fonts.googleapis.com/css?family=Michroma&display=swap); .nav-block{position:fixed;top:0;left:0;width:100%;z-index:1000;background:rgba(8,8,8,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,140,0,.12);}@media(max-width:992px){.nav-block:has(.nav-bar.show){backdrop-filter:unset}}.home .nav-block .polygon{width:100%;height:35px;background-color:#000;clip-path:polygon(50% 100%,0 0,100% 0);-webkit-clip-path:polygon(50% 100%,0 0,100% 0)}.nav-block a{color:var(--theme-color-1)}.nav-block .navbar{background-color:transparent;max-width:100%;padding:10px 1rem}.home .nav-block .navbar{border-bottom:none;text-align:center}.nav-block.ct-sticky-top.active .navbar{background-color:#000}#navbar_header{position:relative;display:block;width:100%}.navbar-brand{position:relative;min-height:30px;padding:0;display:block}.navbar-brand:hover{color:var(--theme-color-1)}.navbar-brand span{font-size:29px;font-weight:bold;margin-right:5px;font-family:'cwTeXFangSong';vertical-align:middle}.navbar-brand{line-height:30px;padding:0;max-width:180px;margin-right:0}.navbar-brand:hover{color:var(--theme-color-1)}.nav-bar{z-index:10}.nav-bar svg{width:70px;float:right;fill:var(--theme-color-1)}.nav-bar-box h2{border-bottom:1px solid #999;font-size:1.4rem;font-weight:bold;line-height:200%;width:max-content;display:inline-block;margin-bottom:30px;color:var(--theme-color-1)}.navbar-toggler.trigger *::before,.navbar-toggler.trigger *::after{background-color:#000!important}.nav-block.ct-sticky-top.active .nav-bar{}.nav-block.ct-sticky-top.active .nav-log{max-height:50px}.navbar-brand .logo,footer .brand-logo{max-width:280px;max-height:50px}@media(min-width:993px){#nav{justify-content:right}.nav-bar{ padding:.25rem}#nav_block .nav-link{ font-size:.82rem;letter-spacing:1.5px;padding:0;position:relative;color:rgba(255,255,255,.65);transition:color .3s ease;white-space:nowrap;text-transform:uppercase}#nav_block .nav-link,#nav_block .nav-link+.menu-caret{color:#FFF}#nav_block .nav-item.active>.item-wrapper>.nav-link,#nav_block .nav-item.active>.item-wrapper>.nav-link+.menu-caret{color:var(--stepc-orange)}#nav_block .nav-item.active>.item-wrapper>.nav-link::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:1.5px;background:var(--stepc-orange);transition:width .35s var(--stepc-spring)}.nav-bar-box>a{display:none}}@media(max-width:992px){#navigation{flex-direction:row;padding:5px 68px 5px 10px}.nav-bar-box{width:57%;margin:100px auto 20px auto;padding-bottom:2rem}#navbar{z-index:1000;top:0}}@media(max-width:576px){.nav-bar svg{display:none}}.menu-close-btn{line-height:45px;text-align:left;font-size:24px}.nav-log{width:40px;display:inline-block;margin:10px 0}.nav-container{padding:0}.navbar-toggler{display:block;border:0;left:0;top:0;margin:10px;height:38px;width:38px;padding:0;box-sizing:border-box;cursor:pointer;outline:0;border-radius:0;transition-duration:.5s;z-index:1001}.navbar-button{font-size:22px;height:50px;padding:14px 8px;box-sizing:border-box;cursor:pointer;outline:0;background-color:transparent}.navbar-toggler:focus{outline:0}.toggle-bar,.toggle-bar:after,.toggle-bar:before{cursor:pointer;border-radius:.5px;height:4px;width:38px;background:#FFF;position:absolute;display:block;content:'';border-bottom:2px solid #999}.toggle-bar{top:50%;transition-duration:.5s}.toggle-bar:before{top:-14px;transition-duration:.5s}.toggle-bar:after{top:14px;transition-duration:.5s}.navbar-toggler.trigger{transition-duration:.5s}.navbar-toggler.trigger .toggle-bar,.navbar-toggler.trigger .toggle-bar:after,.navbar-toggler.trigger .toggle-bar:before{background-color:#FFF;height:3px;border-bottom:none;transition-duration:.5s}.navbar-toggler.trigger .toggle-bar{background-color:transparent;transition-duration:.5s;transform-origin:center center}.navbar-toggler.trigger .toggle-bar:before{transform:rotate(45deg);transform-origin:left center;transition-duration:.5s}.navbar-toggler.trigger .toggle-bar:after{transform:rotate(-45deg);transform-origin:left center;transition-duration:.5s}.navbar-nav .item-wrapper{border-radius:.25rem;line-height:35px}.navbar-nav .item-wrapper.menu-wrap{padding-right:22px}.navbar-nav .item-wrapper:hover{ }#nav_block .navbar-nav .item-wrapper:hover>*{ text-decoration:none}@media (min-width:993px){#nav_block .nav-item:not(:last-child){margin-right:1rem}#nav_block .nav-link{-webkit-animation:focus-in-contract .7s cubic-bezier(.250,.460,.450,.940) both;animation:focus-in-contract .7s cubic-bezier(.250,.460,.450,.940) both}}.nav-item,.menu-item{padding:0}#nav_block .menu-item:not(:last-child){}#nav_block .nav-link,.footer-prd a{}#nav_block .nav-link{#nav_block .nav-link{word-break:keep-all;white-space:nowrap;margin:auto;padding:0 .5rem;display:block;font-size:1.1rem;line-height:250%;transition-duration:.3s}}#nav_block .menu-link{margin:auto;padding:15px .5rem;border-left:3px solid transparent;display:block;color:#333;line-height:120%;font-size:.9rem;border-bottom:1px dotted #CCC}#nav_block .menu-link:hover{color:var(--theme-color-1)}.menu-link.par-menu{padding-right:40px}#nav_block .nav-item{display:flex}.menu-caret .fa{transition-duration:.3s;transform:rotate(0);transform-origin:center center}.menu-caret.trigger .fa{transition-duration:.3s;transform:rotate(-180deg)}.menu-link:hover{border-left:3px solid rgba(0,112,172,1)}.nav-block .nav-menu{min-width:240px;display:block;visibility:hidden;border-radius:0;border:0;box-shadow:0 3px 5px rgba(0,0,0,.3);transition-duration:.3s;margin-top:30px;opacity:0}.nav-block .nav-menu.show{visibility:visible;transition-duration:.3s;margin-top:0;opacity:1}@media (min-width:993px){.nav-block .nav-menu{position:absolute;border-radius:.25rem;border:1px solid #EEE}}.nav-menu.nav-level-2{left:100%;right:auto;top:0}           .breadcrumb{margin-bottom:0;text-align:left;padding-top:6px;padding-bottom:6px;background-color:transparent}.crumb{font-size:14px;padding-right:6px;color:#343434}.crumb:after{font-family:FontAwesome;content:'\f105';margin-left:12px}.crumb:last-child:after{font-family:FontAwesome;content:'';margin-left:0}.breadcrumb .container{line-height:20px}@media (max-width:992px){.nav-bar{box-shadow:-3px 2px 5px rgba(0,0,0,.3)}.navbar-nav{min-width:280px}#nav_block .nav-item.active{color:#333}.menu-item.active:not(.trigger)>.item-wrapper{background-color:var(--theme-color-1);border-radius:.25rem;}.menu-item.active:not(.trigger)>.item-wrapper>*{color:#FFF!important}.menu-caret:hover{}#nav_block .nav-item.active>.item-wrapper>.nav-link,#nav_block .nav-item.active>.item-wrapper>.nav-link:hover,#nav_block .menu-item.active>.item-wrapper>.menu-link,#nav_block .menu-item.active>.item-wrapper>.menu-link:hover{}#nav_block .nav-link{margin:0;}.navbar-nav .item-wrapper{flex-wrap:unset;justify-content:center}.menu-link{padding-left:40px}.nav-level-2 .menu-link{padding-left:60px}#nav_block .nav-menu.nav-level-1>.navflow>.menu-item>.item-wrapper>.menu-link{padding-left:1rem;text-align:center;padding:0 15px 0 0;line-height:35px}#nav_block .nav-menu.nav-level-2>.navflow>.menu-item>.item-wrapper>.menu-link{}#nav_block .nav-menu.nav-level-3>.navflow>.menu-item>.item-wrapper>.menu-link{padding-left:3rem}#nav_block .nav-link,#nav_block .nav-link:hover{color:#000}#nav_block .nav-item.active>.item-wrapper>.nav-link::before,#nav_block .nav-link:hover::before{content:'\f105';display:inline-block;font-family:FontAwesome;margin-right:5px;font-size:20px;line-height:100%}#nav_block .nav-item.active>.item-wrapper>.nav-link,#nav_block .nav-link:hover{color:#000} .nav-block .nav-menu{display:none;visibility:visible;box-shadow:none;transition-duration:initial;margin-top:0;opacity:1}.nav-block .nav-menu.show{display:block;transition-duration:initial}#nav-affr{position:absolute;bottom:0;left:0;right:0;text-align:center;float:none}#nav-affr .nav-item{display:inline-block;border:0}#nav-affr .nav-item:hover{border:0}#nav-affr .nav-link{border:0}#nav-affr .nav-link:hover{border:0}}@media (min-width:993px){#navbar{background-image:none!important}}@media (max-width:992px){#navbar{left:0;right:0;opacity:0; transition-duration:.6s;pointer-events:none;background-size:cover;background-position:center}#navbar::before{content:'';position:absolute;left:5%;right:5%;top:5%;bottom:5%;border-radius:20px;background-color:rgb(246,141,46);background-blend-mode:multiply;mix-blend-mode:overlay}#navbar.show{opacity:1; transition-duration:.6s;pointer-events:all}#nav_block .menu-link{max-width:max-content;margin:unset}#nav_block .menu-link>span{white-space:normal;line-height:normal;display:inline-block;padding-top:.5rem}.nav-bar-box h2{color:#000}#nav{min-width:auto}#navflow{position:relative;margin-top:50%;text-align:center}#nav_block .nav-item{display:inline-block;margin:auto;font-size:1.5rem;font-weight:bold}#nav_block .nav-link,#nav_block .nav-link:hover{padding:.5rem 0}#nav_block .nav-link::before{position:absolute;right:calc(100% + 0.25rem);top:16px}.contacts #nav_block .nav-item.active>.item-wrapper>.nav-link,.events #nav_block .nav-item.active>.item-wrapper>.nav-link{color:#FFF;text-shadow:0 0 80px var(--stepc-sub-glow),0 0 40px var(--stepc-sub-glow),0 3px 8px rgba(0,0,0,.7)}}.nav .hover-box{position:relative;overflow:hidden;display:inline-block;vertical-align:middle;margin-top:-5px}.dropdown{font-size:.9rem;color:#999}.nav-bar .nav-booking .fa-line{font-size:28px;line-height:29px;margin-top:6px}@media(max-width:992px){.nav-bar .nav-booking .fa{display:block}.nav-bar .nav-booking .fa-phone-square{margin-top:4px}}:root{--stepc-theme:#FF8C00;--stepc-theme-light:#FF8C00;--stepc-theme-dark:#E07800;--stepc-black:#080808;--stepc-dark:#111;--stepc-darker:#181818;--stepc-orange:#FF8C00;--stepc-orange-light:#FFA033;--stepc-orange-dark:#E07800;--stepc-yellow:#FFD000;--stepc-white:#f5f5f5;--stepc-gray:#888;--stepc-gray-dark:#333;--stepc-transition:cubic-bezier(.25,.46,.45,.94);--stepc-spring:cubic-bezier(.16,1,.3,1);--event-blue:#3a7ca5;--event-blue-light:#5aa0cc;--event-blue-dark:#1a4a6a;--event-blue-deeper:#0d2d45;--event-blue-glow:rgba(58,124,165,.35);--event-cyan:#00c8e8;--event-cyan-glow:rgba(0,200,232,.2);--event-section-alt:#0a0f14;--event-wave-dark:#081520;--gray-text:#666;--gray-border:#2a2a2a;--head-color-2:#1a1a1a;--this-currnet-color:transparent}body{height:unset;background:var(--stepc-black);font-family:'Noto Sans TC',system-ui,-apple-system,sans-serif}a{text-decoration:none;color:inherit;transition:color .3s ease}a:hover{color:currentColor}.badge-tag>.sort-handle,.event-info-cards .fn-order .sort-handle{top:0;left:0} article section:nth-child(odd){background-color:#FFF}article section:nth-child(even){background-color:#f5f5f5}article section.dark:nth-child(odd){background-color:#121212}article section.dark:nth-child(even){background-color:#000}section.dark{--head-color-2:#EFEFEF;--gray-border:#3a3a3a;--gray-text:#aaa;--bs-gray-200:#181818}.container-indent{max-width:1200px} .hero{position:relative;width:100%;height:100vh;min-height:640px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(255,140,0,.12) 0%,transparent 70%),radial-gradient(ellipse 60% 80% at 20% 80%,rgba(255,100,0,.08) 0%,transparent 60%),linear-gradient(160deg,#120800 0%,#080808 45%,#0d0200 100%)} .hero-bg-deco{position:absolute;inset:0;pointer-events:none;  } .hero-noise{position:absolute;inset:0;background-image:url(data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'200\' height=\'200\'%3E%3Cfilter id=\'n\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency='.85' numOctaves=\'4\' stitchTiles=\'stitch\'/%3E%3C/filter%3E%3Crect width='200' height=\'200\' filter=\'url(%23n)\' opacity=\'0.04\'/%3E%3C/svg%3E);
pointer-events: none;
}

/* 脈衝光暈圓環 */
.hero-glow-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 1px solid rgba(255, 140, 0, 0.15);
    animation: ringPulse 4s ease-in-out infinite;
    pointer-events: none;
}

.hero-glow-ring.ring-2 {
    width: 520px;
    height: 520px;
    border-color: rgba(255, 140, 0, 0.08);
    animation-delay: 0.8s;
    animation-duration: 4.5s;
}

.hero-glow-ring.ring-3 {
    width: 750px;
    height: 750px;
    border-color: rgba(255, 140, 0, 0.04);
    animation-delay: 1.6s;
    animation-duration: 5s;
}

@keyframes ringPulse {

    0%,
    100% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(0.95);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* 浮動粒子 */
.hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: var(--stepc-orange);
    opacity: 0;
    animation: particleFloat linear infinite;
}

.p1 {
    width: 3px;
    height: 3px;
    left: 15%;
    top: 25%;
    animation-duration: 8s;
    animation-delay: 0s;
    opacity: 0.4;
}

.p2 {
    width: 2px;
    height: 2px;
    left: 75%;
    top: 15%;
    animation-duration: 10s;
    animation-delay: 1s;
    opacity: 0.3;
}

.p3 {
    width: 4px;
    height: 4px;
    left: 85%;
    top: 60%;
    animation-duration: 7s;
    animation-delay: 2s;
    opacity: 0.5;
}

.p4 {
    width: 2px;
    height: 2px;
    left: 30%;
    top: 70%;
    animation-duration: 9s;
    animation-delay: 0.5s;
    opacity: 0.3;
}

.p5 {
    width: 3px;
    height: 3px;
    left: 60%;
    top: 40%;
    animation-duration: 11s;
    animation-delay: 3s;
    opacity: 0.4;
}

.p6 {
    width: 5px;
    height: 5px;
    left: 10%;
    top: 55%;
    animation-duration: 12s;
    animation-delay: 1.5s;
    opacity: 0.25;
}

.p7 {
    width: 2px;
    height: 2px;
    left: 90%;
    top: 80%;
    animation-duration: 8s;
    animation-delay: 4s;
    opacity: 0.35;
}

.p8 {
    width: 3px;
    height: 3px;
    left: 45%;
    top: 85%;
    animation-duration: 9s;
    animation-delay: 2.5s;
    opacity: 0.3;
}

@keyframes particleFloat {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        transform: translateY(-120px) scale(0.5);
        opacity: 0;
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(8, 8, 8, 0.2) 0%,
        transparent 30%,
        rgba(8, 8, 8, 0.5) 75%,
        rgba(8, 8, 8, 1) 100%);
}

/* Hero 主要內容 */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Logo + 光暈 */
.hero-logo-wrap {
    position: relative;
    margin-bottom: 1rem;
}

.hero-logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(255, 140, 0, 0.2) 0%, transparent 65%);
    animation: logoGlowPulse 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes logoGlowPulse {

    0%,
    100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.9);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.hero-logo {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(4rem, 10vw, 9rem);
    letter-spacing: 16px;
    line-height: 1;
    color: #fff;
    position: relative;
    text-shadow: 0 0 60px rgba(255, 140, 0, 0.30), 0 2px 12px rgba(0, 0, 0, 0.8), 0 4px 24px rgba(0, 0, 0, 0.5);
}

.hero-logo span {
    color: var(--stepc-orange);
    text-shadow: 0 0 40px rgba(255, 140, 0, 0.7), 0 0 80px rgba(255, 140, 0, 0.3);
}

/* S.T.E.P.C. 橫排標語 */
.hero-tagline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    font-family: 'Abril Fatface', serif;
    font-size: clamp(0.8rem, 1.8vw, 1.4rem);
    letter-spacing: 2px;
    margin: 1.2rem 0 1rem;
    color: rgba(255, 255, 255, 0.5);
}

.tagline-item {
    display: flex;
    align-items: center;
}

.tagline-item+.tagline-item::before {
    content: '·';
    margin: 0 0.6em;
    color: var(--stepc-orange);
    font-size: 1.2em;
}

.hero-tagline .letter {
    color: var(--stepc-orange);
}

.hero-tagline .word {
    color: rgba(255, 255, 255, 0.55);
}

.hero-subtitle {
    font-size: clamp(0.8rem, 1.4vw, 1rem);
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 4px;
    margin-bottom: 1.8rem;
    text-transform: uppercase;
}

/* 倒數標籤 */
.hero-countdown-label {
    font-size: 0.7rem;
    letter-spacing: 4px;
    color: var(--stepc-orange);
    text-transform: uppercase;
    margin-bottom: 0.8rem;
    opacity: 0.8;
}

/* 倒數計時 */
.hero-countdown {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 2.5rem;
}

.countdown-item {
    text-align: center;
}

.countdown-num-wrap {
    background: rgba(255, 140, 0, 0.08);
    border: 1px solid rgba(255, 140, 0, 0.2);
    border-radius: 6px;
    padding: 0.6rem 1rem;
    backdrop-filter: blur(8px);
    min-width: 72px;
    position: relative;
    overflow: hidden;
}

.countdown-num-wrap::before {
    content: '';
    position: absolute;
    inset: 0 0 50% 0;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px 6px 0 0;
}

.countdown-item .num {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    color: var(--stepc-orange);
    line-height: 1;
    transition: transform 0.15s ease;
}

.countdown-item .num.num-flash {
    transform: scale(1.15);
    color: var(--stepc-orange-light);
}

.countdown-item .label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

.countdown-sep {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: rgba(255, 140, 0, 0.4);
    margin-bottom: 1.5rem;
    animation: sepBlink 1s step-end infinite;
}

@keyframes sepBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }
}

/* Hero CTA */
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--stepc-orange);
    color: #000;
    padding: 1rem 2.8rem;
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    border: 2px solid var(--stepc-orange);
    transition: all 0.4s var(--stepc-spring);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    position: relative;
    overflow: hidden;
}

.hero-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.hero-cta:hover::before {
    transform: translateX(100%);
}

.hero-cta:hover {
    background: transparent;
    color: var(--stepc-orange);
    box-shadow: 0 0 30px rgba(255, 140, 0, 0.4), inset 0 0 30px rgba(255, 140, 0, 0.05);
    letter-spacing: 4px;
}

.cta-arrow {
    transition: transform 0.3s ease;
}

.hero-cta:hover .cta-arrow {
    transform: translate(3px, -3px);
}

/* Hero 底部 Ticker */
.hero-ticker {
    position: absolute;
    bottom: 120px;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 2;
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/*.ticker-track {*/ /*    display: flex;*/
/*    gap: 3rem;*/ /*    white-space: nowrap;*/
/*    animation: tickerScroll 20s linear infinite;*/ /*    font-family: 'Abril Fatface', serif;*/
/*    font-size: 0.75rem;*/ /*    letter-spacing: 4px;*/
/*    color: rgba(255, 255, 255, 0.2);*/ /*}*/
/*.ticker-track .sep {*/ /*    color: var(--stepc-orange);*/
/*    opacity: 0.5;*/ /*}*/
/*@keyframes tickerScroll {*/ /*    from {*/
/*        transform: translateX(0);*/ /*    }*/
/*    to {*/ /*        transform: translateX(-50%);*/
/*    }*/ /*}*/
/* scroll indicator */
.hero-scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.65rem;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.hero-scroll .scroll-line {
    width: 1px;
    height: 44px;
    background: linear-gradient(to bottom, rgba(255, 140, 0, 0.6), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scaleY(0.5);
        transform-origin: top;
    }

    50% {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: top;
    }
}

/* === SIDE BUTTONS === */
.side-buttons {
    position: fixed;
    left: 1.5rem;
    bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    z-index: 900;
}

.side-buttons a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 140, 0, 0.1);
    border: 1px solid rgba(255, 140, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--stepc-orange);
    font-size: 1.1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
}

.side-buttons a:hover {
    background: var(--stepc-orange);
    color: #000;
    transform: scale(1.1);
}

/* ─────────────────────────────────────────────
   EVENT HERO DECO
   ───────────────────────────────────────────── */ /* 海浪網格 */
.event-hero-waves {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(58, 124, 165, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(58, 124, 165, 0.06) 1px, transparent 1px);
    background-size: 70px 40px;
    mask-image: radial-gradient(ellipse 110% 80% at 50% 60%, #000 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 110% 80% at 50% 60%, #000 30%, transparent 100%);
    pointer-events: none;
    animation: waveGridShift 12s ease-in-out infinite alternate;
}

@keyframes waveGridShift {
    0% {
        transform: translateY(0) skewX(0deg);
    }

    100% {
        transform: translateY(-8px) skewX(-0.5deg);
    }
}

.event-hero-noise {
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E');
    pointer-events: none;
}

.event-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(8, 8, 8, 0.4) 0%,
        transparent 30%,
        rgba(8, 8, 8, 0.55) 70%,
        rgba(8, 8, 8, 1) 100%);
    pointer-events: none;
}

/* 光束 — 海上光線 */
.event-hero-beam {
    position: absolute;
    top: -5%;
    right: 8%;
    width: 2px;
    height: 75vh;
    background: linear-gradient(to bottom, transparent, rgba(58, 124, 165, 0.45), transparent);
    transform: rotate(-12deg);
    transform-origin: top center;
    animation: eventBeamPulse 5s ease-in-out infinite;
    pointer-events: none;
}

.event-hero-beam.beam-2 {
    right: 20%;
    height: 55vh;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(0, 200, 232, 0.3), transparent);
    animation-delay: 2s;
    animation-duration: 6.5s;
}

.event-hero-beam.beam-3 {
    right: 35%;
    height: 40vh;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255, 140, 0, 0.2), transparent);
    animation-delay: 0.8s;
    animation-duration: 4s;
    transform: rotate(-8deg);
}

@keyframes eventBeamPulse {

    0%,
    100% {
        opacity: 0.25;
    }

    50% {
        opacity: 1;
    }
}

/* 海浪漣漪圓環 */
.event-hero-ripple {
    position: absolute;
    bottom: 20%;
    right: 12%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 1px solid rgba(58, 124, 165, 0.12);
    animation: rippleExpand 8s ease-out infinite;
    pointer-events: none;
}

.event-hero-ripple.ripple-2 {
    width: 600px;
    height: 600px;
    animation-delay: 2.5s;
    border-color: rgba(58, 124, 165, 0.07);
}

.event-hero-ripple.ripple-3 {
    width: 200px;
    height: 200px;
    animation-delay: 1.2s;
    border-color: rgba(0, 200, 232, 0.15);
}

@keyframes rippleExpand {
    0% {
        transform: scale(0.85);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: scale(1.15);
        opacity: 0;
    }
}/* =============================================
   FOOTER
   ============================================= */
.stepc-footer {
    background: var(--stepc-black);
    border-top: 1px solid rgba(255, 140, 0, 0.08);
    padding: 80px 0 30px;
    position: relative;
}

.stepc-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 140, 0, 0.3), transparent);
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* 品牌大標 */
.footer-top-row {
    margin-bottom: 4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 3rem;
}

.footer-brand-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-big-logo {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(3rem, 7vw, 6rem);
    letter-spacing: 10px;
    color: rgba(255, 255, 255, 0.08);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.footer-big-logo span {
    color: rgba(255, 140, 0, 0.2);
}

.footer-tagline-text {
    font-size: 0.75rem;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
    margin: 0;
}

.footer-tagline-sub {
    font-size: 0.85rem;
    color: var(--stepc-gray);
    margin: 0.3rem 0 0;
}

/* 三欄 */
.footer-grid {
    /*display: grid;*/ /*grid-template-columns: repeat(3, 1fr);*/
    /*gap: 3rem;*/ /*margin-bottom: 3.5rem;*/
}

.footer-col h4 {
    font-family: 'Abril Fatface', serif;
    font-size: 0.95rem;
    color: rgba(255, 140, 0, 0.8);
    margin-bottom: 1.5rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.footer-col p,
.footer-col a {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 2.2;
    display: block;
    transition: color 0.3s ease;
}

.footer-col a:hover {
    color: var(--stepc-orange);
}

.footer-social {
    display: flex;
    gap: 0.8rem;
    margin-top: 0.3rem;
    flex-wrap: wrap;
}

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.35);
    transition: all 0.3s ease;
    line-height: 1;
}

.footer-social a:hover {
    border-color: var(--stepc-orange);
    color: var(--stepc-orange);
    background: rgba(255, 140, 0, 0.08);
    transform: translateY(-3px);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.2);
}

.footer-bottom .footer-logo {
    font-family: 'Abril Fatface', serif;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: 4px;
}

.footer-bottom .footer-logo span {
    color: rgba(255, 140, 0, 0.4);
}

.footer-col .contact-list i {
    margin-right: 8px;
    color: var(--stepc-orange);
}/*Flip Events Cards */
.event-card {
    perspective: 1200px;
    height: 450px;
    cursor: pointer;
    --reveal-delay: 0ms;
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    justify-content: center;
}

.event-card-inner {
    position: relative;
    width: 100%;
    max-width: 280px;
    height: 100%;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-style: preserve-3d;
    will-change: transform;
    --this-currnet-color: currentColor;
}

.event-card-front,
.event-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 16px;
    overflow: visible;
    transform-style: preserve-3d;
}

.event-card-front {
    background: var(--stepc-darker);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-shadow: -2px -2px 4px rgba(0, 0, 0, 0.3), 2px -2px 4px rgba(0, 0, 0, 0.3), -2px 2px 4px rgba(0, 0, 0, 0.3), 2px 2px 4px rgba(0, 0, 0, 0.6);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.event-card-front::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.45) 100%);
}

.event-card-back {
    background: #000;
    /*color: #fff;*/
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px solid rgba(254, 229, 0, 0.3);
    position: relative;
}

/*.event-card:hover .event-card-inner,*/
body:not(:has(#editorContainer)) .event-card:hover .event-card-inner,
#editorContainer .event-card.active .event-card-inner {
    transform: rotateY(180deg);
}

.event-card:hover .event-card-front {
    border-color: rgba(254, 229, 0, 0.2);
    box-shadow: 0 0 40px rgba(254, 229, 0, 0.08);
}

.card-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    border-radius: 16px;
    transition: opacity 0.4s ease;
}

.p-wave {
    background: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(254, 229, 0, 1) 10px, rgba(254, 229, 0, 1) 11px);
}

.card-icon {
    font-size: 2.8rem;
    margin-bottom: 1.2rem;
    color: inhert;
    position: relative;
    transition: transform 0.4s var(--stepc-spring), filter 0.4s ease;
    filter: drop-shadow(0 0 0px transparent);
    transform: translate3d(0, 0, 35px);
}

.card-title-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    position: relative;
    transform: translate3d(0, 0, 45px);
}

.event-card-front h3 {
    font-family: 'Abril Fatface', serif;
    font-size: 1.15rem;
    letter-spacing: 3px;
    color: #fff;
    margin: 0;
    transition: color 0.3s ease;
}

.card-subtitle {
    margin-top: calc(-0.5 * var(--bs-card-title-spacer-y));
    margin-bottom: 0;
}

.event-card-front .card-subtitle {
    font-size: 0.75rem;
    color: var(--stepc-gray);
    margin-top: 0.4rem;
    letter-spacing: 1px;
}

.card-tag {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-family: 'Abril Fatface', serif;
    font-size: 0.6rem;
    letter-spacing: 2px;
    color: inherit;
    border: 1px solid currentColor;
    background: color-mix(in srgb, currentColor 6%, transparent);
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
    /*text-shadow:1px 1px 3px rgba(0,0,0,0.5), -1px -1px 3px rgba(0,0,0,0.5);*/
    text-shadow: none;
    backdrop-filter: blur(6px);
    transform: translate3d(0, 0, 15px);
}

.card-back-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 40%;
    background: radial-gradient(ellipse at top, rgba(254, 229, 0, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.event-card-back h3 {
    font-family: 'Abril Fatface', serif;
    font-size: 1.5rem;
    letter-spacing: 3px;
    color: inhert;
    margin: 0 0 0.3rem;
    position: relative;
    transform: translate3d(0, 0, 45px);
}

.card-back-sub {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    position: relative;
    transform: translate3d(0, 0, 45px);
}

.event-card-back p {
    font-size: 0.85rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.5rem;
    position: relative;
    transform: translate3d(0, 0, 45px);
}

.event-card-back .card-link {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border: 1.5px solid currentColor;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 2px;
    color: inhert;
    border-radius: 2px;
    transition: all 0.3s ease;
    position: relative;
    transform: translate3d(0, 0, 35px);
}

.event-card-back .card-link::after {
    content: '↗';
    transition: transform 0.3s ease;
    display: inline-block;
    margin-left: 0.5rem;
}

.event-card-back .card-link:hover {
    background-color: currentColor;
}

.event-card-back .card-link:hover span,
.event-card-back .card-link:hover::after{
    color: #000;
}

.event-card-back .card-link:hover::after {
    transform: translate(3px, -3px);
}

body:not(:has(#editorContainer)) .event-card-back .card-link:has(span:empty){
    display:none;
}


.events-cta-row {
    text-align: center;
    margin-top: 3.5rem;
    padding: 0 2rem;
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-outline-orange {
    display: inline-block;
    border: 1.5px solid rgba(255, 140, 0, 0.4);
    color: var(--stepc-orange);
    padding: 0.8rem 2.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.35s ease;
    border-radius: 3px;
}

.btn-outline-orange:hover {
    background: rgba(255, 140, 0, 0.1);
    border-color: var(--stepc-orange);
    color: var(--stepc-orange);
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.15);
}

.events-section .btn-outline-orange {
    border-color: var(--head-color-2);
    color: var(--head-color-2);
}

.events-section .btn-outline-orange:hover {
    background: var(--theme-sub-glow-mist);
    border-color: var(--theme-main);
    color: var(--theme-main);
    box-shadow: none;
}

.events-bg-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.deco-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.03;
    background: var(--stepc-orange);
}

.dc1 {
    width: 600px;
    height: 600px;
    top: -200px;
    right: -200px;
}

.dc2 {
    width: 400px;
    height: 400px;
    bottom: -150px;
    left: -100px;
}

/* =============================================
   ANNUAL CALENDAR — 年度活動總覽
   Layout model: magazine editorial overlap
   Each .cal-row = outer row container (overflow visible)
   .cal-card    = white text card (takes 72% width)
   .cal-card-img = image that overlaps the card edge
   ===================================================== */
.calendar-list {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    /* gap = card vertical margin + image bleed top/bottom = ~5rem */
    gap: 4.5rem;
}

/* -------------------------------------------------------
   ROW: flexbox container, overflow visible so image can bleed
   Image and card sit side by side, image overlaps card edge
   ------------------------------------------------------- */
.cal-row {
    position: relative;
    display: flex;
    align-items: center;
    /* top padding accommodates the image translateY(-30px) upward shift */
    padding-top: 30px;
    padding-bottom: 0;
}

.cal-card {
    position: relative;
    flex: 1 1 auto;
    background: #ffffff;
    border-radius: 20px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.05),
        0 8px 32px rgba(0, 0, 0, 0.07);
    /* top/bottom padding standard; left/right must leave room for image overlap */
    padding: 2.8rem 2.4rem;
    transition: box-shadow 0.3s ease;
    z-index: 1;
}

.cal-card .badge-tag,
.cal-card .badge-tag:hover {
    color: inherit;
    border: 1px solid currentColor;
    background: color-mix(in srgb, currentColor 6%, transparent);
}

/*.cal-card .badge-tag:hover {*/ /*    color: inherit;*/
/*    border: 1px solid currentColor;*/ /*    background: color-mix(in srgb, currentColor 6%, transparent);*/
/*}*/
.cal-row:hover .cal-card {
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.07),
        0 16px 48px rgba(0, 0, 0, 0.1);
}

.cal-row:nth-child(odd) .cal-card {
    padding-right: calc(28% + 0rem);
}

/* image-left rows: reserve left padding */
.cal-row:nth-child(even) .cal-card {
    order: 1;
    padding-left: calc(28% + 0rem);
}

section.dark .cal-card {
    background: #222;
    border: 1px solid var(--gray-border);
}

section.dark .cal-card-desc {
    color: #aaaaaa;
}

/* Month label */
.cal-card-month {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    color: #B8A000;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* Event title */
.cal-card-title {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--head-color-2);
    line-height: 1.3;
    margin-bottom: 1rem;
    letter-spacing: 0.5px;
}

.cal-card-sub {
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    /*color: var(--cal2-accent, #3a7ca5);*/
    margin-bottom: 1.2rem;
    font-weight: 500;
}

/* Description */
.cal-card-desc {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 0.875rem;
    color: #5a5148;
    line-height: 2;
    margin-bottom: 1.4rem;
}

/* CTA link */
.cal-card-link {
    margin-top: auto;
    width: max-content;
    display: inline-flex;
    align-items: center;
    color: color-mix(in srgb, currentColor 75%, transparent);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    transition: gap 0.25s ease;
    align-self: flex-start;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 0.2rem;
}

.cal-card-link:hover {
    color: color-mix(in srgb, currentColor 100%, transparent);
}

.cal-card-link::after {
    content: '\f138';
    font-family: bootstrap-icons !important;
    display: inline-block;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    margin-left: 10px;
    transform: translateX(0px);
    transition: transform 0.25s ease;
}

/*.cal-card-link:hover {*/ /*    color: #9E8C00;*/
/*    border-color: #9E8C00;*/ /*}*/
.cal-card-link:hover::after {
    transform: translateX(10px);
    transition: transform 0.25s ease;
}

.cal-card-img {
    position: relative;
    flex: 0 0 45%;
    /* align-self stretch so it fills the padded row height */
    align-self: stretch;
    /* shift image upward to peek above card top edge */
    transform: translateY(-30px);
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.15),
        0 20px 60px rgba(0, 0, 0, 0.12);
    z-index: 2;
    transition: box-shadow 0.3s ease;
}

.cal-row:hover .cal-card-img {
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.2),
        0 28px 72px rgba(0, 0, 0, 0.16);
}

.event-calendar-slick,
.event-calendar-slick .slick-list,
.event-calendar-slick .slick-track,
.event-calendar-slick .slick-slide,
.event-calendar-slick .items-block {
    height: 100%;
}

/*
   HTML structure already controls left/right placement:
     odd  rows: .cal-card first, then .cal-card-img  → image on RIGHT
     even rows: .cal-card-img first, then .cal-card  → image on LEFT
   CSS only needs to apply the correct directional overlap margin.
*/ /* odd rows: image on RIGHT → pull it left into the card right edge */
.cal-row:nth-child(odd) .cal-card-img {
    margin-left: -24%;
    /* 24% of .cal-row width overlaps onto card */
}

/* even rows: image on LEFT → pull it right into the card left edge */
.cal-row:nth-child(even) .cal-card-img {
    margin-right: -24%;
}

/* actual <img> tag fill */
.cal-card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.cal-row:hover .cal-card-img img {
    transform: scale(1.04);
}

.event-calendar-slick .items-block {
    aspect-ratio: 1.5;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.event-calendar-slick .slick-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2a2a2a;
    font-size: 0;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    font-family: 'slick';
}

.slick-prev {
    left: 12px;
}

.slick-prev::before {
    content: '\f284';
    color: #2a2a2a;
    font-family: bootstrap-icons !important;
}

.slick-next {
    right: 12px;
}

.slick-next::before {
    content: '\f285';
    color: #2a2a2a;
    font-family: bootstrap-icons !important;
}

@media(max-width:768px) {
    .cal-row {
        flex-direction: column;
        border-radius: 10px;
        padding: 0;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), 0 8px 32px rgba(0, 0, 0, 0.07);
        transition: box-shadow 0.3s ease;
    }

    .cal-row:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07), 0 16px 48px rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.3s ease;
    }

    .cal-card-img {
        order: 0;
        margin: 0 !important;
        flex: 0 0 100%;
        transform: unset;
        border-radius: 0;
        box-shadow: unset !important;
    }

    .cal-card {
        order: 1;
        margin: 0 !important;
        padding: 1.5rem 1.5rem !important;
        border-radius: 0;
    }
}article>section:nth-child(even) {
    background: #f5f5f5;
}

.marquee {
    /*padding: 4px 0;*/
    background-color: var(--stepc-main);
}

.frm-events-pg .marquee {
    background-color: var(--theme-main);
}

.marquee-track {
    height: 50px;
    /* 一定要給高度,不然 wrapper 會塌成 0 */
    line-height: 50px;
    overflow: hidden;
    white-space: nowrap;
    color: #FFF;
    /* 防止換行 */
}

.marquee-track .js-marquee {
    height: 50px;
    /* 一定要給高度,不然 wrapper 會塌成 0 */
    line-height: 50px;
    top: -2px;
}

.marquee-tag {
    display: inline-block;
    vertical-align: middle;
    margin-left: 1rem;
}

.marquee-tag img.sort-handle {
    top: 1px;
    left: 1px;
}

.marquee-tag .marquee-text {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
}

.marquee-tag i {
    display: inline-block;
    vertical-align: middle;
    margin: 0 2.5rem 0 3.5rem;
    font-style: normal;
    opacity: 0.4;
    font-size: 12px;
    zoom: 0.7;
}

.hero-ticker .marquee-track {
    height: 18px;
    line-height: 18px;
    white-space: nowrap;
    animation: tickerScroll 20s linear infinite;
    font-family: 'Abril Fatface', serif;
    font-size: 0.75rem;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.2);
}

.hero-ticker .marquee-tag .marquee-text {
    color: rgba(255, 255, 255, 0.2);
}

.hero-ticker .marquee-tag i {
    color: var(--stepc-orange);
}

.hero-ticker .marquee-track .js-marquee {
    height: 18px;
    line-height: 18px;
    top: -2px;
}/* EVENTS HERO */
.frm-events-pg .hero {
    align-items: flex-end;
    justify-content: flex-start;
}

.event-hero-content {
    position: relative;
    z-index: 2;
    padding: 20px 2rem 70px;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

.event-badge {
    display: inline-flex;
    align-items: start;
    gap: 0.5rem;
    border: 1px solid var(--theme-main-glow);
    color: var(--theme-main-light);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    padding: 0.4rem 1rem;
    border-radius: 2px;
    margin-bottom: 1.8rem;
    background: var(--theme-sub-glow-light);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.event-badge::before {
    top: 3px;
}

.event-hero-title {
    font-family: 'Abril Fatface', serif;
    letter-spacing: -2px;
    color: #fff;
    margin-bottom: 0.4rem;
    --reveal-delay: 80ms;
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.event-hero-title .event-accent {
    color: var(--theme-main-light);
    font-size: clamp(3.25rem, 7.5vw, 9rem);
    line-height: 0.76;
    display: block;
    text-shadow: 0 0 80px var(--theme-main-glow), 0 0 40px var(--theme-sub-glow), 0 3px 16px rgba(0, 0, 0, 0.7);
    margin-bottom: 1rem;
}

.event-hero-title .event-sub {
    font-size: clamp(1.4rem, 3.5vw, 3.2rem);
    color: rgba(255, 255, 255, 0.55);
    display: block;
    letter-spacing: 4px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
    margin-bottom: 1rem;
}

.event-hero-meta,
.event-hero-content .badge-list {
    display: flex;
    align-items: center;
    gap: 1rem 2rem;
    margin: 1.5rem 0 2rem;
    flex-wrap: wrap;
    --reveal-delay: 160ms;
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.event-meta-item,
.event-hero-content .badge-tag {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 1px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    border: unset;
    background: unset;
    padding: 0;
}

.event-meta-item i {
    color: var(--theme-main-light);
    font-size: 1rem;
}

.event-meta-item::before,
.event-hero-content .badge-tag::before {
    color: var(--theme-main-light);
    font-size: 1rem;
    margin: 0;
}

.event-meta-item:not(:last-child)::after,
.event-hero-content .badge-tag:not(:last-child)::after {
    content: '';
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.12);
    left: 0.6rem;
}

.event-hero-tagline,
.event-hero-content .event-text {
    font-family: 'Noto Serif TC', serif;
    font-size: clamp(1rem, 2.2vw, 1.5rem);
    color: rgba(255, 255, 255, 0.48);
    font-style: italic;
    letter-spacing: 2px;
    margin-bottom: 2.5rem;
    max-width: 560px;
    line-height: 1.8;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6), 0 3px 16px rgba(0, 0, 0, 0.3);
    --reveal-delay: 220ms;
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.event-hero-tagline strong,
.event-hero-content .event-text strong {
    color: var(--theme-main);
    font-style: normal;
}

.event-hero-actions {
    --reveal-delay: 300ms;
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.event-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--theme-main);
    color: #fff;
    padding: 1.15rem 3.2rem;
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    border: 2px solid var(--theme-main);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.event-btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--theme-main-glow), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.event-btn-primary:hover {
    background: transparent;
    color: var(--theme-main);
    border-color: var(--theme-main-light);
    box-shadow: 0 0 50px var(--theme-main-glow), inset 0 0 30px var(--theme-section-alt);
    letter-spacing: 4px;
}

.event-btn-primary:hover::before {
    transform: translateX(100%);
}

.event-btn-primary::after {
    content: '↗';
    transition: transform 0.3s ease;
    font-size: 1.1rem;
    display: inline-block;
    margin-left: 0.5rem;
}

.event-btn-primary:hover::after {
    transform: translate(3px, -3px);
}

/*.event-btn-primary .btn-arrow {*/ /*    transition: transform 0.3s ease;*/
/*    font-size: 1.1rem;*/ /*}*/
/*.event-btn-primary:hover .btn-arrow {*/ /*    transform: translate(3px, -3px);*/
/*}*/
@media(max-width: 576px) {
    .event-hero-content {
        padding: 120px 1.5rem 90px;
    }

    .event-hero-meta,
    .event-hero-content .badge-list {
        gap: 0.5rem 1rem;
        margin-bottom: 2rem;
    }

    .event-badge {
        zoom: 0.85;
    }

    .event-meta-item::after,
    .event-hero-content .badge-tag::after {
        display: none;
    }

    .event-hero-tagline {
        margin-bottom: 2.5rem;
    }

    .event-btn-primary {
        padding: 3vw 6vw;
    }
}

.event-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    transition: all 0.35s ease;
}

.event-btn-ghost:hover {
    color: var(--theme-main-light);
    border-bottom-color: var(--theme-main-light);
    gap: 0.8rem;
}

.event-hero-ticker {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--theme-main-dark);
    overflow: hidden;
    padding: 0;
    z-index: 3;
}

.event-hero-ticker .marquee-track .marquee-text,
.event-hero-ticker .marquee-track i {
    color: #FFF !important;
}

/*.event-ticker-track {*/ /*    display: flex;*/
/*    gap: 3rem;*/ /*    white-space: nowrap;*/
/*    animation: tickerScroll 25s linear infinite;*/ /*    font-family: 'Abril Fatface', serif;*/
/*    font-size: 0.78rem;*/ /*    letter-spacing: 4px;*/
/*    color: rgba(255, 255, 255, 0.65);*/ /*    text-transform: uppercase;*/
/*}*/ /* ─────────────────────────────────────────────
   STATS BAR
───────────────────────────────────────────── */
.event-subnav {
    display: flex;
    top: 63px;
    background: rgba(8, 8, 8, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--theme-sub-glow);
    border-top: 1px solid var(--theme-sub-glow);
    z-index:300;
}

.event-subnav>.nav {
    width: unset;
}

.event-subnav .nav-link {
    font-family: 'Inter', 'Noto Sans TC', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    padding: 0.9rem 1rem;
    transition: color 0.2s ease;
    word-break: keep-all;
}

.event-subnav .nav-link:first-child {
    margin-left: auto;
}

.event-subnav .nav-link:last-child {
    margin-right: auto;
}

.event-subnav .nav-link:hover,
.event-subnav .nav-link.active {
    color: var(--theme-main);
}

.event-subnav .nav-link.active {
    border-bottom: 2px solid var(--theme-main);
}

/* ─────────────────────────────────────────────
   STATS BAR
───────────────────────────────────────────── */
.event-stats-bar {
    background: var(--theme-section-dark);
    border-top: 1px solid rgba(58, 124, 165, 0.2);
    border-bottom: 1px solid rgba(58, 124, 165, 0.2);
    padding: 2.5rem 2rem;
}

.event-stats-inner {
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
}

.event-stat-item {
    text-align: center;
    position: relative;
}

.event-stat-item+.event-stat-item::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 10%;
    height: 80%;
    width: 1px;
    background: rgba(255, 255, 255, 0.07);
}

.event-stat-num {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: var(--theme-main-light);
    line-height: 1;
    margin-bottom: 0.4rem;
    text-shadow: 0 0 30px rgba(58, 124, 165, 0.5);
}

.event-stat-label {
    font-size: 0.75rem;
    color: #888888;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.event-stat-item img.sort-handle {
    top: 0;
    left: 0;
}body.frm-events-pg .section-header .section-label {
    color: var(--theme-main-light);
}

body.frm-events-pg .section-header .section-label::before,
body.frm-events-pg .section-header .section-label::after {
    background: var(--theme-main-light);
}

.bsyoutube {
    border-radius: 10px;
}

.event-bg-text {
    position: absolute;
    top: 50%;
    right: -3%;
    font-family: 'Abril Fatface', serif;
    font-size: clamp(8rem, 18vw, 18rem);
    color: var(--theme-sub-glow-mist);
    opacity: 0.5;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    text-transform: uppercase;
    letter-spacing: -5px;
}

/* ─────────────────────────────────────────────
   DUAL THEME (SPLIT SCREEN) & KEY SECTION
   ───────────────────────────────────────────── */
.event-dual-theme {
    position: relative;
    width: 100%;
    min-height: 90vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

.event-dual-center-badge .dcb-x {
    font-family: 'Abril Fatface', serif;
    font-size: 1.4rem;
    color: #fff;
    line-height: 1;
}

.event-dual-center-badge .dcb-top {
    font-size: 0.55rem;
    letter-spacing: 2px;
    color: var(--stepc-main-light);
    text-transform: uppercase;
    font-weight: 700;
}

.event-dual-center-badge .dcb-bot {
    font-size: 0.55rem;
    letter-spacing: 2px;
    color: var(--theme-main-light);
    text-transform: uppercase;
    font-weight: 700;
}

/* 運動面板 (左) */
.event-panel-sport {
    position: relative;
    padding: 100px 4rem 100px 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
    padding-left: max(2rem, calc((100vw - 1300px) / 2));
    /*background:*/ /*radial-gradient(ellipse 70% 60% at 80% 40%, var(--stepc-sub-glow-light) 0%, transparent 65%),*/
    /*linear-gradient(135deg, #0a0500 0%, #0f0800 50%, #080808 100%);*/
}

.event-dual-theme .event-panel-sport::before {
    content: '';
    position: absolute;
    top: 0;
    right: -1px;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom,
        transparent,
        var(--stepc-main) 20%,
        rgba(255, 255, 255, 0.9) 50%,
        var(--theme-main) 80%,
        transparent);
    z-index: 100;
}

/* overlap */
.event-dual-center-badge {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%);
    z-index: 20;
    background: #080808;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 110px;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    text-align: center;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), 0 0 0 8px rgba(8, 8, 8, 0.5);
    z-index: 110;
}

.event-panel-sport .event-panel-bgcover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 70% 60% at 20% 60%, var(--stepc-sub-glow-light) 0%, transparent 65%),
        radial-gradient(ellipse 40% 40% at 70% 20%, var(--stepc-sub-glow-mist) 0%, transparent 60%),
        linear-gradient(135deg, var(--stepc-sub-glow-mist) 0%, var(--stepc-sub-glow-mist) 50%, var(--stepc-sub-glow-mist) 100%);
    pointer-events: none;
}

.event-panel-sport .event-panel-bgcover::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--stepc-sub-glow-mist) 1px, transparent 1px),
        linear-gradient(90deg, var(--stepc-sub-glow-mist) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 1;
}

.event-panel-sport .event-panel-bgcover::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(ellipse 70% 60% at 80% 40%, var(--stepc-sub-glow-light) 0%, transparent 65%);
    z-index: 0;
}

.event-panel-sport .event-panel-bg-label {
    /*content: 'TRAIN';*/
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Abril Fatface', serif;
    font-size: clamp(5rem, 12vw, 11rem);
    color: var(--stepc-sub-glow-mist);
    line-height: 1;
    pointer-events: none;
    letter-spacing: -3px;
}

/* 派對面板 (右) */
.event-panel-party {
    position: relative;
    padding: 100px 2rem 100px 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding-right: max(2rem, calc((100vw - 1300px) / 2));
}

.event-panel-party .event-panel-bgcover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 70% 60% at 20% 60%, var(--theme-sub-glow-light) 0%, transparent 65%),
        radial-gradient(ellipse 40% 40% at 70% 20%, var(--theme-sub-glow-mist) 0%, transparent 60%),
        linear-gradient(135deg, var(--theme-sub-glow-mist) 0%, var(--theme-sub-glow-mist) 50%, var(--theme-sub-glow-mist) 100%);
    pointer-events: none;
}

.event-panel-party .event-panel-bgcover::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--theme-sub-glow-mist) 1px, transparent 1px),
        linear-gradient(90deg, var(--theme-sub-glow-mist) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 1;
}

.event-panel-party .event-panel-bgcover::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(ellipse 70% 60% at 80% 40%, var(--theme-sub-glow-light) 0%, transparent 65%);
    z-index: 0;
}

/*.event-panel-party::before {*/ /*    content: '';*/
/*    position: absolute;*/ /*    inset: 0;*/
/*    background-image:*/ /*        linear-gradient(rgba(58, 124, 165, 0.05) 1px, transparent 1px),*/
/*        linear-gradient(90deg, rgba(58, 124, 165, 0.05) 1px, transparent 1px);*/ /*    background-size: 50px 50px;*/
/*    pointer-events: none;*/ /*}*/
.event-panel-party .event-panel-bg-label {
    /*content: 'PARTY';*/
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Abril Fatface', serif;
    font-size: clamp(5rem, 12vw, 11rem);
    color: var(--theme-sub-glow-mist);
    ;
    line-height: 1;
    pointer-events: none;
    letter-spacing: -3px;
}

.event-panel-label {
    font-size: 0.68rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.event-panel-label.label-sport {
    color: var(--stepc-main-light);
}

.event-panel-label.label-party {
    color: var(--theme-main-light);
}

.event-panel-label::after {
    content: '';
    flex: 0 0 40px;
    height: 1px;
}

.event-panel-label.label-sport::after {
    background: var(--stepc-main-glow);
}

.event-panel-label.label-party::after {
    background: var(--theme-main-glow);
}

.event-panel-title {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    line-height: 1;
    margin-bottom: 1.2rem;
    letter-spacing: 1px;
    color: var(--head-color-2);
}

.event-panel-title em {
    font-style: normal;
}

.event-panel-sport .event-panel-title em {
    color: var(--stepc-main-light);
}

.event-panel-party .event-panel-title em {
    color: var(--sea-blue-light);
}

.event-panel-desc {
    font-size: 0.9rem;
    line-height: 2.1;
    color: var(--gray-text);
    margin-bottom: 2rem;
    max-width: 480px;
}

/* 特點列表 */
.event-panel-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.event-panel-features li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--head-color-2) 70%, transparent);
    letter-spacing: 0.5px;
}

.event-panel-features li i,
.event-panel-features li::before {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.event-panel-sport .event-panel-features li i,
.event-panel-sport .event-panel-features li::before {
    color: var(--stepc-main-light);
}

.event-panel-party .event-panel-features li i,
.event-panel-party .event-panel-features li::before {
    color: var(--theme-main-light);
}

/* 面板視覺圖塊 */
.event-panel-visual {
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    margin-bottom: 2.5rem;
    max-width: 360px;
    opacity: 0.75;
}

.event-panel-sport .event-panel-visual {
    /*background: color-mix(in srgb, var(--stepc-sub-glow-light) 30%, transparent);*/
    background: linear-gradient(135deg, var(--stepc-sub-glow-light) 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.45) 100%);
    border: 1px solid var(--stepc-sub-glow-light);
}

.event-panel-party .event-panel-visual {
    /*background: color-mix(in srgb, var(--theme-sub-glow-light) 30%, transparent);*/
    background: linear-gradient(135deg, var(--theme-sub-glow-light) 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.45) 100%);
    border: 1px solid var(--theme-sub-glow-light);
}

.event-panel-visual-text {
    position: absolute;
    inset: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-family: 'Abril Fatface', serif;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: -1px;
    z-index: 1;
}

.event-panel-sport .event-panel-visual-text {
    color: var(--stepc-sub-glow);
}

.event-panel-party .event-panel-visual-text {
    color: var(--theme-sub-glow);
}

.event-panel-visual::after {
    content: '';
    position: absolute;
    inset: 0;
}

.event-panel-sport .event-panel-visual::after {
    background: radial-gradient(ellipse at center, var(--stepc-sub-glow-light) 0%, transparent 70%);
}

.event-panel-party .event-panel-visual::after {
    background: radial-gradient(ellipse at center, var(--theme-sub-glow-light) 0%, transparent 70%);
}

/* 面板 CTA 連結 */
.event-panel-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid;
    transition: all 0.35s ease;
}

.event-panel-sport .event-panel-link {
    color: var(--stepc-main-light);
    border-color: rgba(255, 140, 0, 0.35);
}

.event-panel-sport .event-panel-link:hover {
    color: var(--stepc-sub);
    border-color: var(--stepc-sub);
    gap: 0.8rem;
}

.event-panel-party .event-panel-link {
    color: var(--theme-main-light);
    border-color: var(--theme-main-glow);
}

.event-panel-party .event-panel-link:hover {
    color: var(--theme-sub);
    border-color: var(--theme-sub);
    gap: 0.8rem;
}

@media (max-width: 900px) {
    .event-dual-theme {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    /*.event-dual-theme::before {*/ /*display:none;*/
    /*    top: 50%;*/ /*left: 0;*/
    /*transform: translateY(-50%);*/ /*width: 100%;*/
    /*height: 2px;*/ /*background: linear-gradient(to right, transparent, var(--stepc-main) 20%, rgba(255, 255, 255, 0.9) 50%,var(--theme-main) 80%,transparent);*/
    /*}*/
    .event-dual-theme .event-panel-sport::before {
        top: auto;
        right: auto;
        left: 0;
        bottom: -1px;
        transform: translateY(-50%);
        width: 100%;
        height: 2px;
        background: linear-gradient(to right,
            transparent,
            var(--stepc-main) 20%,
            rgba(255, 255, 255, 0.9) 50%,
            var(--theme-main) 80%,
            transparent);
    }

    /* overlap */
    .event-dual-center-badge {
        top: 100%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 20;
        background: #080808;
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        width: 110px;
        height: 110px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        text-align: center;
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), 0 0 0 8px rgba(8, 8, 8, 0.5);
        z-index: 110;
    }

    .event-panel {
        padding: 100px 3rem;
    }
}

@media (max-width: 768px) {
    .event-panel-sport {
        padding: 60px 2rem 100px 2rem;
    }

    .event-panel-party {
        padding: 100px 2rem 60px 2rem;
    }
}

@media (max-width: 576px) {
    .event-panel-sport {
        padding: 60px 1rem 100px 1rem;
    }

    .event-panel-party {
        padding: 100px 1rem 60px 1rem;
    }
}

/* ─────────────────────────────────────────────
   OVERVIEW / 活動大綱
   ───────────────────────────────────────────── */
.event-overview {
    background: #ffffff;
    padding: 110px 2rem;
    overflow: hidden;
    position: relative;
}

.event-overview .event-bg-text {
    top: 50%;
    right: -3%;
    transform: translateY(-50%);
}

.event-overview-inner {
    /*max-width: 1200px;*/
    margin: 0 auto;
    /*display: grid;*/ /*grid-template-columns: 1fr 1fr;*/
    /*gap: 6rem;*/
    align-items: center;
}

.event-section-label {
    font-size: 0.72rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--theme-main-light);
    margin-bottom: 1.2rem;
    display: flex !important;
    align-items: center;
    gap: 1rem;
}

.event-section-label::after {
    content: '';
    flex: 1;
    max-width: 60px;
    height: 1px;
    background: var(--theme-main-light);
}

.event-overview-text h2 {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(2rem, 4.5vw, 3.8rem);
    line-height: 1.05;
    color: var(--head-color-2);
    margin-bottom: 1.8rem;
    letter-spacing: 1px;
}

.event-overview-text h2 em {
    font-style: normal;
    color: var(--theme-main-light);
}

.event-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #838383;
    margin-bottom: 1.2rem;
}

.event-text strong {
    color: var(--head-color-2);
    font-weight: 700;
}

.event-overview-media>*:not(:last-child) {
    margin-bottom: 1.5rem;
}

.info-image {
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, var(--bs-gray-200) 50%, transparent);
    border: 1px solid var(--theme-sub-glow);
}

.event-info-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.event-info-card {
    /*background: #f9f9f9;*/
    background: rgba(135, 135, 135, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-left: 3px solid var(--theme-main);
    border-radius: 0 8px 8px 0;
    padding: 1.2rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    transition: all 0.35s ease;
}

.event-info-card:hover {
    background: var(--theme-sub-glow-mist);
    border-color: var(--theme-sub-glow);
    border-left-color: var(--theme-main-light);
    transform: translateX(6px);
}

.event-info-card .card-ico {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--theme-sub-glow-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--theme-main-light);
    flex-shrink: 0;
}

.event-info-card .card-text-wrap {
    flex: 1;
}

.event-info-card .card-title {
    font-size: 0.78rem;
    letter-spacing: 2px;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.event-info-card .card-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--head-color-2);
    letter-spacing: 0.5px;
}

@media(max-width:576px) {
    .event-info-card {
        gap: 1rem;
        padding: 1rem 1rem;
    }
}

/* ─────────────────────────────────────────────
   FAQ / 常見問題
   ───────────────────────────────────────────── */
.collapse-container {
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 3.5rem;
    /*border: 1px solid rgba(0, 0, 0, 0.09);*/ /*border-radius: 12px;*/
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

.collapse-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.collapse-item:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.collapse-head {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    padding: 1.5rem 2rem;
    cursor: pointer;
    transition: background 0.25s ease;
    user-select: none;
    border-left: 3px solid transparent;
}

.collapse-head:hover {
    background-color: var(--theme-sub-glow-mist);
}

.collapse-head.trigger {
    background-color: var(--theme-sub-glow-light);
    border-left-color: var(--theme-main);
}

.collapse-head::before {
    content: 'Q';
    font-family: 'Abril Fatface', serif;
    font-size: 1.2rem;
    color: var(--theme-main);
    min-width: 2rem;
    opacity: 0.8;
}

.collapse-head::after {
    content: '\f282';
    font-family: bootstrap-icons !important;
    color: color-mix(in srgb, var(--head-color-2) 70%, transparent);
    transition-duration: .4s;
    transform: rotate(0);
}

.collapse-head.trigger::after {
    transition-duration: .4s;
    transform: rotate(-180deg);
}

.collapse-topic {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--head-color-2);
    letter-spacing: 0.5px;
}

/*.collapse-topic:hover {*/ /*    text-decoration: none;*/
/*color: #7659a0;*/ /*    transition: color 0.6s ease-out;*/
/*}*/
.collapse-content {
    padding: 0 2rem 1.8rem calc(2rem + 2rem + 1.5rem);
    border: 0;
    font-size: 0.88rem;
    line-height: 2.1;
    color: var(--gray-text);
    margin: 0;
    background-color: transparent;
}

@media(max-width:576px) {
    .collapse-head {
        gap: 1rem;
        padding: 1rem 1rem;
    }

    .collapse-head::before {
        min-width: 1rem;
    }

    .collapse-content {
        padding: 1rem 1rem 1.25rem;
    }
}

/* ─────────────────────────────────────────────
   SCHEDULE / 立即購票
   ───────────────────────────────────────────── */
.event-schedule {
    overflow: hidden;
}

.event-schedule .event-bg-text {
    top: auto;
    right: auto;
    bottom: -5%;
    left: -2%;
}

.event-schedule-inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* Tabs */
.event-schedule .tab-group .nav-tabs {
    display: flex;
    gap: 0.5rem;
    margin-top: 3.5rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 0;
}

/*.event-schedule .tab-group .nav-tabs .event-day-tabs {*/ /*    padding: 0.25rem 1rem;*/
/*    margin-left: 0;*/ /*}*/
.event-schedule .tab-group .nav-tabs .event-day-tab {
    padding: 0.9rem 2rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    /*color: rgba(0, 0, 0, 0.35);*/
    color: color-mix(in srgb, var(--head-color-2) 65%, #000);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    user-select: none;
    margin-bottom: -1px;
    margin-left: 0;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.event-schedule .tab-group .nav-tabs .event-day-tab:hover {
    color: rgba(0, 0, 0, 0.65);
}

.event-schedule.dark .tab-group .nav-tabs .event-day-tab:hover {
    color: rgba(255, 255, 255, 0.65);
}

.event-schedule .tab-group .nav-tabs .event-day-tab.active {
    color: var(--theme-main);
    border-bottom-color: var(--theme-main);
    border-top: unset;
}

.event-timeline {
    position: relative;
}

.event-timeline::before {
    content: '';
    position: absolute;
    left: 120px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--theme-main-glow) 5%, var(--theme-main-glow) 95%, transparent);
}

.event-tl-item {
    display: flex;
    gap: 0;
    position: relative;
}

.event-tl-time {
    width: 120px;
    flex-shrink: 0;
    padding-top: 1.6rem;
    padding-right: 1.5rem;
    text-align: right;
    font-family: 'Abril Fatface', serif;
    font-size: 0.82rem;
    color: var(--theme-main-light);
    letter-spacing: 1px;
    opacity: 0.8;
}

.event-tl-dot {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 1.5rem 0 0;
    transform: translateX(-50%);
}

.event-tl-dot-circle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--theme-main-dark);
    border: 2px solid var(--theme-main);
    margin-top: 1.8rem;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.event-tl-item:hover .event-tl-dot-circle {
    background: var(--theme-main);
    box-shadow: 0 0 14px rgba(58, 124, 165, 0.5);
}

.event-tl-item:has(.tl-badge:not(:empty)) .event-tl-dot-circle {
    width: 20px;
    height: 20px;
    background: var(--theme-main);
    border-color: var(--theme-main-light);
    margin-top: 1.5rem;
    box-shadow: 0 0 12px rgba(58, 124, 165, 0.4);
}

.event-tl-content {
    flex: 1;
    padding: 1.2rem 1rem 1.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.event-tl-item:last-child .event-tl-content {
    border-bottom: none;
}

.event-tl-content .tl-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--head-color-2);
    margin-bottom: 0.4rem;
}

.event-tl-item:has(.tl-badge:not(:empty)) .tl-title {
    font-size: 1.1rem;
    color: var(--theme-main-light);
}

.event-tl-content .tl-desc {
    font-size: 0.83rem;
    color: #888;
    line-height: 1.8;
}

.event-tl-content .tl-text {
    display: inline-block;
    margin-right: 0.8rem;
}

.event-tl-content .tl-badge {
    display: inline-block;
    font-size: 0.62rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--theme-main-light);
    border: 1px solid rgba(58, 124, 165, 0.35);
    padding: 0.15rem 0.6rem;
    border-radius: 2px;
    vertical-align: middle;
}

.event-tl-content .tl-badge.badge-party {
    color: #FEE500;
    border-color: rgba(254, 229, 0, 0.35);
}

@media(max-width:576px) {
    .event-timeline::before {
        left: 80px;
    }

    .event-tl-time {
        width: 80px;
        padding-right: 1.5rem;
    }

    .event-tl-dot {
        margin: 0 0.75rem 0 0;
    }
}

/* ─────────────────────────────────────────────
   SOCIAL CTA / 立即購票
   ───────────────────────────────────────────── */
body.frm-events-pg section.event-social-cta {
    background: var(--theme-section-dark);
    padding: 100px 2rem;
    text-align: center;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(58, 124, 165, 0.15);
}

.event-social-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 60% at 50% 50%, rgba(58, 124, 165, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.event-social-cta-tag {
    display: inline-block;
    background: rgba(58, 124, 165, 0.12);
    border: 1px solid rgba(58, 124, 165, 0.3);
    color: var(--theme-main-light);
    font-size: 0.65rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.35rem 1rem;
    border-radius: 2px;
    margin-bottom: 2rem;
}

.event-social-cta h2 {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.1;
    color: #fff;
    margin-bottom: 1rem;
}

.event-social-cta h2 span {
    color: var(--theme-main-light);
}

.event-social-cta p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 3rem;
}

.event-social-icons {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    margin-bottom: 3rem;
}

.event-social-icons a {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.35s ease;
}

.event-social-icons a:hover {
    background: rgba(58, 124, 165, 0.15);
    border-color: rgba(58, 124, 165, 0.4);
    color: var(--theme-main-light);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(58, 124, 165, 0.2);
}

.event-social-cta-actions {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

/* ─────────────────────────────────────────────
   LINEUP / 演出卡司
   ───────────────────────────────────────────── */
.lineup {
    background: #080808;
    padding: 110px 2rem;
    overflow: hidden;
    position: relative;
}

.lineup::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(58, 124, 165, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(26, 74, 106, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.lineup-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.lineup-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 4rem;
}

.lineup-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, var(--bs-gray-200) 50%, transparent);
    border: 1px solid var(--theme-sub-glow);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.lineup-card:hover {
    border-color: rgba(58, 124, 165, 0.25);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(58, 124, 165, 0.08);
    transform: translateY(-8px);
}

.lineup-card.card-headliner {
    grid-column: span 2;
    grid-row: span 2;
}

.lc-photo {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    background: var(--theme-section-dark);
}

.lineup-card.card-headliner .lc-photo {
    aspect-ratio: 3/5;
}

.lc-photo-bg {
    position: absolute;
    inset: 0;
    font-family: 'Abril Fatface', serif;
    font-size: 5rem;
    color: rgba(58, 124, 165, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -2px;
    pointer-events: none;
}

.lineup-card.card-headliner .lc-photo-bg {
    font-size: 8rem;
}

.lc-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(8, 8, 8, 0.9) 100%);
}

.lc-role {
    position: relative;
    z-index: 1;
    font-size: 0.62rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--theme-main-light);
    background: rgba(58, 124, 165, 0.15);
    border: 1px solid rgba(58, 124, 165, 0.3);
    padding: 0.25rem 0.6rem;
    border-radius: 2px;
    align-self: flex-end;
}

.lc-role.role-headliner {
    color: #FF8C00;
    background: rgba(255, 140, 0, 0.12);
    border-color: rgba(255, 140, 0, 0.3);
}

.lc-info {
    padding: 1.5rem;
}

.lc-name {
    font-family: 'Abril Fatface', serif;
    font-size: 1.25rem;
    color: var(--head-color-2);
    letter-spacing: 1px;
    margin-bottom: 0.3rem;
}

.lineup-card.card-headliner .lc-name {
    font-size: 1.8rem;
}

.lc-genre {
    font-size: 0.72rem;
    color: var(--gray-text);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.lc-day {
    font-size: 0.65rem;
    color: var(--theme-main-light);
    letter-spacing: 2px;
    margin-top: 0.5rem;
    font-weight: 700;
}

@media(max-width:576px){
    .lc-photo {
        padding: 1rem;
    }
    
    .lc-info {
    padding: 1rem;
}
}

/* ─────────────────────────────────────────────
   TICKETS / 票種介紹
   ───────────────────────────────────────────── */
.tickets {
    background: #ffffff;
    padding: 110px 2rem;
    overflow: hidden;
    position: relative;
}

.tickets::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(58, 124, 165, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

.tickets-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.ticket-grid {
    /*display: grid;*/ /*grid-template-columns: repeat(3, 1fr);*/
    /*gap: 1.5rem;*/
    margin-top: 4rem;
}

.ticket-card {
    position: relative;
    background:
        color-mix(in srgb, var(--bs-gray-200) 50%, transparent);
    border: 1px solid var(--theme-sub-glow);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.ticket-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--theme-main-dark), var(--theme-main), transparent);
}

.ticket-card:hover {
    border-color: rgba(58, 124, 165, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(58, 124, 165, 0.08);
    transform: translateY(-8px);
}

.ticket-card:has(.ticket-recommend-badge:not(:empty))::before {
    background: linear-gradient(90deg, var(--theme-main-dark), var(--theme-main), var(--theme-main-light));
    height: 3px;
}

.ticket-card:has(.ticket-recommend-badge:not(:empty))>* {
    z-index: 1;
}

.ticket-card:has(.ticket-recommend-badge:not(:empty))::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(160deg, color-mix(in srgb, var(--theme-main-glow) 50%, transparent) 0%, transparent 60%);
    z-index: 0;
}

.ticket-recommend-badge {
    position: absolute;
    top: -1px;
    right: 1.5rem;
    background: var(--theme-main);
    color: #fff;
    font-size: 0.62rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.3rem 0.8rem;
    border-radius: 0 0 6px 6px;
}

.ticket-type-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--theme-main-light);
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.ticket-name {
    font-family: 'Abril Fatface', serif;
    font-size: 1.6rem;
    color: var(--head-color-2);
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.ticket-price-wrap {
    margin-bottom: 1rem;
}

.ticket-price {
    font-family: 'Abril Fatface', serif;
    font-size: 2.5rem;
    color: var(--head-color-2);
    line-height: 1;
}

.ticket-price .currency {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    vertical-align: top;
    margin-top: 0.4rem;
    display: inline-block;
    color: var(--gray-text);
}

.ticket-price-note {
    font-size: 0.72rem;
    color: var(--gray-text);
    letter-spacing: 1px;
    margin-top: 0.4rem;
}

.ticket-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin: 1.5rem 0;
}

.ticket-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.ticket-features li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.85rem;
    color: var(--gray-text);
}

.ticket-features li i {
    font-size: 0.9rem;
    color: var(--theme-main-light);
    flex-shrink: 0;
}

.ticket-features li:has(.bi-x-circle-fill)>* {
    color: var(--gray-text) !important;
    opacity: 0.65;
}

/*.ticket-features li.feat-dim {*/ /*    color: rgba(255, 255, 255, 0.25);*/
/*}*/ /*.ticket-features li.feat-dim i {*/
/*    color: rgba(255, 255, 255, 0.18);*/ /*}*/
.ticket-buy-btn {
    display: block;
    text-align: center;
    padding: 1rem;
    background: var(--theme-sub-glow);
    border: 1px solid var(--theme-main-glow);
    color: var(--theme-main-light);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-radius: 6px;
    transition: all 0.35s ease;
}

.ticket-buy-btn:hover {
    background: var(--theme-main-light);
    border-color: var(--theme-main-light);
    color: #fff;
    box-shadow: 0 0 30px rgba(58, 124, 165, 0.3);
}

.ticket-card:has(.ticket-recommend-badge:not(:empty)) .ticket-buy-btn {
    background: var(--theme-main);
    border-color: var(--theme-main);
    color: #fff;
}

.ticket-card:has(.ticket-recommend-badge:not(:empty)) .ticket-buy-btn:hover {
    background: var(--theme-main-light);
    border-color: var(--theme-main-light);
    box-shadow: 0 0 40px rgba(58, 124, 165, 0.45);
}

.tickets-cta {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.tickets-cta p {
    font-size: 0.82rem;
    color: #888;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

/***************
Flex Justified Gallery
***************/
.flex-justified-gallery .fjg-entry {
    border-radius: 10px;
}

/* ─────────────────────────────────────────────
   counter card / 累進編號卡片
   ───────────────────────────────────────────── */
.counter-card-section {
    counter-reset: step-counter;
}

.counter-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background:
        color-mix(in srgb, var(--bs-gray-200) 50%, transparent);
    border: 1px solid var(--theme-sub-glow);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    flex-direction: row;
    align-items: center;
    box-shadow: 0 2px 12px rgba(127, 127, 127, 0.05);
    /*margin:-1rem;*/
}

.counter-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--theme-main), var(--theme-sub), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.counter-card:hover {
    border-color: rgba(58, 124, 165, 0.35);
    box-shadow: 0 18px 40px rgba(127, 127, 127, 0.08), 0 0 30px var(--theme-sub-glow-light);
}

.counter-card:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--theme-main), var(--theme-sub), transparent);
    opacity: 1;
    transition: opacity 0.4s ease;
}

/*.cc-info {*/ /*    padding: 1.5rem;*/
/*}*/
.counter-card .cc-info::before {
    content: counter(step-counter, decimal-leading-zero);
    counter-increment: step-counter;
    font-family: 'Abril Fatface', serif;
    font-size: 4rem;
    color: var(--theme-sub);
    line-height: 1;
    position: absolute;
    top: 0.4rem;
    right: 1rem;
    pointer-events: none;
    opacity: 0.35;
    transition: opacity 0.4s ease;
}

.counter-card:hover .cc-info::before {
    opacity: 1;
    transition: opacity 0.4s ease;
}

.cc-icon {
    font-size: 2.4rem;
    color: var(--theme-main-light);
    margin-bottom: 1rem;
    text-shadow: 0 0 20px var(--theme-main-light-glow);
}

.cc-name {
    color: var(--head-color-2);
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.cc-spec {
    color: var(--theme-main-light);
    font-family: 'Noto Sans TC', system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    letter-spacing: 1px;
    margin-bottom: 0.8rem;
}

.cc-text {
    font-size: 14px;
    color: var(--gray-text);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.counter-card>* {
    width: 50%;
    flex: 1 0 0%;
    padding: 1.5rem;
}

.counter-card .slick-carousel .items-block {
    border-radius: 10px;
}

.counter-card .slick-carousel figure {
    display: none;
}

@media(max-width:992px) {
    .counter-card {
        flex-direction: column;
    }

    .counter-card>* {
        width: 100%;
    }
}.bg-deco {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

[deco='pattern-1']::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 30%, var(--theme-sub-glow) 0%, transparent 30%), radial-gradient(circle at 80% 70%, var(--theme-sub-glow) 0%, transparent 40%);
    pointer-events: none;
}

[deco='pattern-1']::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(45deg, transparent 0, transparent 70px, rgba(127, 127, 127, 0.04) 70px, rgba(127, 127, 127, 0.04) 72px);
    pointer-events: none;
}

[deco='pattern-2']::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse 60% 50% at 20% 20%, var(--theme-sub-glow) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 80% 80%, var(--theme-sub-glow-light) 0%, transparent 55%), linear-gradient(180deg, transparent 0%, transparent 100%);
}

[deco='pattern-2']::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(var(--theme-sub-glow-light) 1px, transparent 1px), linear-gradient(90deg, var(--theme-sub-glow-light) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 30%, transparent 100%);
}

[deco='pattern-3']::before {
    content: '';
    position: absolute;
    width: clamp(400px, 35vw, 600px);
    display: block;
    aspect-ratio: 1;
    /*height: clamp(300px, 35vw, 600px);*/
    top: clamp(-150px, -17vw, -50px);
    right: clamp(-150px, -17vw, -50px);
    border-radius: 50%;
    opacity: 0.05;
    background: var(--theme-main);
}

[deco='pattern-3']::after {
    content: '';
    position: absolute;
    width: clamp(300px, 24vw, 400px);
    /*height: clamp(300px, 24vw, 600px);*/
    display: block;
    aspect-ratio: 1;
    bottom: clamp(-150px, -10vw, -100px);
    left: clamp(-100px, -8vw, -60px);
    border-radius: 50%;
    opacity: 0.03;
    background: var(--theme-main);
}

[deco='pattern-4']::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, var(--theme-sub-glow-light) 100%);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    pointer-events: none;
}.topic-cont,
.comp-topic {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    overflow: visible;
    color: #000;
}

.section-header .section-label {
    font-size: 0.72rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--stepc-orange);
    margin-bottom: 1rem;
    display: inline-block;
    position: relative;
    padding: 0 1.5rem;
}

.section-header .section-label::before,
.section-header .section-label::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background: var(--stepc-orange);
    opacity: 0.5;
}

.section-header .section-label::before {
    right: 100%;
    margin-right: -1.2rem;
}

.section-header h2 {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    letter-spacing: 2px;
    margin-bottom: 1.2rem;
    color: var(--head-color-2);
    line-height: 1.1;
}

.section-header p {
    color: var(--stepc-gray);
    max-width: 560px;
    margin: 0 auto;
    line-height: 2;
    font-size: 0.95rem;
}

@media (max-width:768px) {
    .topic-cont {
        /*margin-top: 0;*/
    }
}

/************SpotLight Grid ***********/
.swipe-gallery .pswp-item {
    cursor: zoom-in;
}

.spotlight-grid .img-set figure,
.swipe-gallery figure {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0px;
    margin: 0;
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.5);
    color: #FFF;
    line-height: 1.2rem;
}

/*.spotlight-grid:not(#editorContainer .spotlight-grid) figure {*/ /*    display: none;*/
/*}*/ /***********standard-slick *******/
.standard-slick {
    margin-left: -0.5em;
    margin-right: -0.5em;
}

.standard-slick .slick-dots {
    position: relative;
    bottom: auto;
}

.standard-slick .items-block {
    margin-left: 0.5em;
    margin-right: 0.5em;
}

@media(max-width:1200px) {
    .standard-slick .slick-arrow {
        width: 32px;
        height: 32px;
        background-color: rgba(255, 255, 255, 0.5);
    }

    .standard-slick .slick-arrow::before {
        display: block;
        width: 24px;
        height: 24px;
        margin-left: auto;
        margin-right: auto;
    }

    .standard-slick .slick-prev {
        left: 10px;
    }

    .standard-slick .slick-next {
        right: 10px;
    }
}

/***********Tab Slick ************/
.tab-slick .slider-for {
    background-color: rgb(230, 230, 230);
}

.tab-slick .slider-for .items-block {
    padding: 1rem;
}

.tab-slick .slick-carousel .slick-arrow::before {
    color: rgb(0, 92, 175);
}

.tab-slick>.slider-nav {
    margin: 0 auto;
    overflow: hidden;
}

.tab-slick>.slider-nav::before {
    content: '';
    background-color: #C8CACE;
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    height: 8px;
    z-index: -1;
}

.tab-slick>.slider-nav .slick-list {
    width: 100%;
    margin: auto;
    overflow: hidden;
    padding-bottom: 8px;
}

.tab-slick>.slider-nav .slick-list:nth-child(2) {
    width: calc(100% - 50px);
}

.tab-slick>.slider-nav .slick-prev {
    left: 0;
}

.tab-slick>.slider-nav .slick-next {
    right: 0;
}

.tab-slick>.slider-nav .items-block {
    text-align: center;
    height: 46px;
    font-size: 16px;
    padding: 0 12px;
    transition-duration: .3s;
    cursor: pointer;
}

.tab-slick>.slider-nav .items-block>span {
    display: block;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    line-height: 24px;
    font-size: 20px;
    color: #005CB9;
}

@media(max-width:576px) {
    .tab-slick>.slider-nav .items-block>span {
        font-size: 16px;
        line-height: 16px;
    }
}

.tab-slick>.slider-nav .slick-current .items-block {
    transition-duration: .3s;
}

.tab-slick>.slider-nav .slick-current .items-block::after {
    content: '';
    background-color: #005CB9;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 8px;
    z-index: 1;
    transition-duration: .3s;
}

.tab-slick>.slider-for .slick-slide {
    height: 0;
    transition-duration: .3s;
}

.tab-slick>.slider-for .slick-slide.slick-current {
    height: auto;
    transition-duration: .3s;
}

/************standard-collapse ***********/ /*.collapse-item {*/
/*    border: 1px solid #CCC;*/ /*    border-radius: 4px;*/
/*    margin-bottom: 0.5rem;*/ /*    overflow: hidden;*/
/*}*/ /*.collapse-head {*/
/*    color: #002d74;*/ /*    text-align: left;*/
/*    padding: 0.5rem 1rem;*/ /*    background-color: #f7f7f7;*/
/*}*/ /*.collapse-topic {*/
/*    font-size: 1.2rem;*/ /*    color: #7f8c8d;*/
/*    margin: 0;*/ /*    cursor: pointer;*/
/*    transition: color 0.6s ease-out;*/ /*}*/
/*.collapse-topic:hover {*/ /*    text-decoration: none;*/
/*    color: #7659a0;*/ /*    transition: color 0.6s ease-out;*/
/*}*/ /*.collapse-head.trigger {*/
/*    background-color: #F39700;*/ /*}*/
/*.collapse-head.trigger .collapse-topic,*/ /*.collapse-head.trigger .collapse-topic:hover {*/
/*    color: #FFF;*/ /*}*/
/*.collapse-content {*/ /*    border-top: 1px solid #CCC;*/
/*    border-width: 1px 0 0 0 !important;*/ /*}*/
/*.collapse-text {*/ /*    padding: 1rem;*/
/*    background-color: #FFF;*/ /*}*/
/**************************/ /*.tab-group .tab-content {*/
/*    border: 1px solid #ccc;*/ /*    border-top: 0;*/
/*}*/ /*.tab-group .tab-content>.tab-pane {*/
/*    padding: 1rem;*/ /*}*/
/*.tab-group .nav-tabs .nav-link {*/ /*    padding: 0.25rem 1rem;*/
/*    margin-left: 0;*/ /*}*/
/*.tab-group .nav-tabs .nav-link.active,*/ /*.tab-group .nav-tabs .nav-item.show .nav-link {*/
/*    border-top: 3px solid #F39700;*/ /*}*/
@-webkit-keyframes focus-in-contract {
    0% {
        letter-spacing: 1em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes focus-in-contract {
    0% {
        letter-spacing: 1em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}/* .scroll-tb table */
.scroll-tb-wrap {
    overflow: auto;
    max-height: 700px;
    padding-left: 0;
    border-left: 1px solid #999 !important;
    border-top: 1px solid #999 !important;
}

.scroll-tb-wrap>table {
    width: 100%;
    min-width: 700px;
}

.scroll-tb-wrap tbody>tr>td:first-child,
.scroll-tb-wrap th:first-child {
    position: sticky;
    left: 0;
    /* 首行永遠固定於左 */
    z-index: 100;
}

.scroll-tb-wrap tbody>tr>td[rowspan]:first-child {
    z-index: 110;
}

.scroll-tb-wrap thead tr th,
.scroll-tb-wrap tbody>tr:first-child>td {
    position: sticky;
    top: 0;
    /* 列首永遠固定於上 */
    z-index: 120 !important;
}

.scroll-tb-wrap tbody>tr:first-child>td:first-child {
    z-index: 130 !important;
}

.scroll-tb-wrap th:first-child {
    z-index: 2;
}

.scroll-tb-wrap table {
    /*overflow: auto;
    -ms-overflow-style: scrollbar;*/
}

.scroll-tb-wrap table th,
.scroll-tb-wrap table td {
    vertical-align: middle !important;
    border-right: 1px solid #999 !important;
    border-bottom: 1px solid #999 !important;
}

.scroll-tb-wrap table th {
    /*background-color: :rgba(142, 195, 28, 1.00);*/
}

.scroll-tb-wrap table th:first-child {
    /*min-width: 200px;*/
}

.scroll-tb-wrap table thead th:first-child {
    z-index: 100;
}

@media (max-width:576px) {
    .scroll-tb-wrap table th:first-child {
        min-width: auto;
    }
}

.scroll-tb-wrap table td {
    /*min-width: 125px;*/
}

.scroll-tb-wrap .device .flex-card-header .bsbgset {
    height: 300px;
}

/************stickytablescroll ***************/
.sticky-wrap {
    display: block;
    min-height: 1.5rem;
    overflow: auto;
    scroll-behavior: smooth;
}

.sticky-wrap>table {
    width: 100%;
    border-collapse: collapse;
}

.sticky-wrap>table th {
    color: #FFF;
    /*background-color: rgb(162, 143, 204);*/
}

.sticky-wrap>table td {
    z-index: 0;
}

.sticky-wrap>table th {
    text-align: center;
    z-index: 1;
}

.sticky-wrap>table th::after,
.sticky-wrap>table td::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: block;
    /*border-bottom: 1px solid #EEE;*/ /*border-right: 1px solid #EEE;*/
    pointer-events: none;
}

.sticky-wrap>table>thead.caption {
    top: 0;
    position: -webkit-sticky;
    position: sticky;
    display: table-caption;
    z-index: 5;
}

.sticky-wrap>table>thead:not(.caption) th {
    top: 0;
    position: -webkit-sticky;
    position: sticky;
    z-index: 3;
}

.sticky-wrap>table>thead:not(.caption) th:first-child {
    z-index: 5 !important;
}

.sticky-wrap>table>tbody>tr:first-child th {
    top: 0;
    left: auto;
    position: -webkit-sticky;
    position: sticky;
    z-index: 3;
}

.sticky-wrap>table>tbody th {
    left: 0;
    position: -webkit-sticky;
    position: sticky;
    z-index: 3;
}

.sticky-wrap>table>tbody>tr:first-child th:first-child {
    top: 0;
    left: 0;
    z-index: 5;
}

.sticky-wrap>table>tfoot th {
    bottom: 0;
    position: -webkit-sticky;
    position: sticky;
}

.sticky-left {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 4 !important;
}

.sticky-right {
    position: -webkit-sticky;
    position: sticky;
    right: 0;
    z-index: 4 !important;
}/* ============================================
   STEPC Blog Page Styles
   blog.css — 專欄文章頁面
   Color: Black + Yellow (#FEE500)
   ============================================ */ /* =============================================
   HERO — Smaller (50vh)
   ============================================= */
.blog-hero {
    position: relative;
    width: 100%;
    height: 50vh;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.blog-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 80% at 50% 0%, rgba(254, 229, 0, 0.14) 0%, transparent 65%),
        radial-gradient(ellipse 50% 60% at 20% 100%, rgba(255, 100, 0, 0.07) 0%, transparent 55%),
        linear-gradient(160deg, #130900 0%, #080808 45%, #0d0200 100%);
}

.blog-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(8, 8, 8, 0.35) 0%,
        transparent 25%,
        rgba(8, 8, 8, 0.7) 80%,
        rgba(8, 8, 8, 1) 100%);
}

.blog-hero-noise {
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E');
    pointer-events: none;
}

.blog-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 68px;
    /* navbar height */
}

.blog-hero-label {
    font-size: 0.7rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--stepc-orange);
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.85;
}

.blog-hero-title {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    letter-spacing: 6px;
    line-height: 1;
    text-align: justify;
    color: #fff;
    margin: 0 0 0.6rem;
    text-shadow: 0 0 50px rgba(254, 229, 0, 0.25);
}

.blog-hero-en {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(0.8rem, 1.8vw, 1.2rem);
    letter-spacing: 8px;
    color: var(--stepc-orange);
    margin: 0 0 0.8rem;
    text-transform: uppercase;
    opacity: 0.8;
}

.blog-hero-sub {
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 3px;
    margin: 0;
}

/* Bottom decorative line */
.blog-hero-bottom-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(254, 229, 0, 0.3), transparent);
}

/* =============================================
   BLOG LISTING SECTION
   ============================================= */
.blog-listing {
    background: #f5f5f5;
}

.blog-listing-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* =============================================
   BLOG GRID — 3 / 2 / 1 columns
   ============================================= */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

/* =============================================
   BLOG CARD
   ============================================= */
.blog-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-card:hover {
    transform: translateY(-4px);
    border-color: rgba(184, 160, 0, 0.35);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(184, 160, 0, 0.15);
}

/* Card Image Area */
.blog-card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex-shrink: 0;
}

.blog-img-placeholder {
    width: 100%;
    height: 100%;
    background: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.18);
    font-size: 2.5rem;
    transition: background 0.3s ease;
}

.blog-card:hover .blog-img-placeholder {
    background: #e0e0e0;
}

/* Category Badge */
.blog-category-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    border-radius: 3px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cat-sport {
    background: rgba(254, 229, 0, 0.2);
    color: var(--stepc-orange);
    border: 1px solid rgba(254, 229, 0, 0.3);
}

.cat-travel {
    background: rgba(0, 180, 220, 0.15);
    color: #00b4dc;
    border: 1px solid rgba(0, 180, 220, 0.25);
}

.cat-lifestyle {
    background: rgba(180, 100, 255, 0.15);
    color: #b464ff;
    border: 1px solid rgba(180, 100, 255, 0.25);
}

.cat-fitness {
    background: rgba(255, 60, 60, 0.15);
    color: #ff5555;
    border: 1px solid rgba(255, 60, 60, 0.25);
}

.cat-party {
    background: rgba(255, 200, 0, 0.15);
    color: #ffc800;
    border: 1px solid rgba(255, 200, 0, 0.25);
}

.cat-mind {
    background: rgba(100, 200, 150, 0.15);
    color: #64c896;
    border: 1px solid rgba(100, 200, 150, 0.25);
}

/* Card Body */
.blog-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card-meta {
    margin-bottom: 0.75rem;
}

.blog-date {
    font-size: 0.75rem;
    color: #888888;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.blog-card-title {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.5;
    margin: 0 0 0.85rem;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.blog-card:hover .blog-card-title {
    color: #000;
}

.blog-card-excerpt {
    font-size: 0.85rem;
    color: #666666;
    line-height: 1.8;
    text-align: justify;
    margin: 0 0 1.2rem;
    /* 2-line clamp */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Read More link */
.blog-read-more {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--stepc-theme);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: gap 0.3s ease, opacity 0.3s ease;
    margin-top: auto;
    align-self: flex-start;
}

.blog-read-more:hover {
    color: var(--stepc-theme-dark);
    gap: 0.6rem;
}

.blog-arrow {
    transition: transform 0.3s ease;
}

.blog-read-more:hover .blog-arrow {
    transform: translateX(3px);
}

/* =============================================
   LOAD MORE BUTTON
   ============================================= */
.blog-load-more {
    text-align: center;
    padding-bottom: 2rem;
}

.btn-load-more {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    color: var(--stepc-theme);
    border: 1.5px solid var(--stepc-theme);
    padding: 0.9rem 2.8rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.35s ease;
    font-family: 'Noto Sans TC', sans-serif;
}

.btn-load-more:hover:not(:disabled) {
    background: var(--stepc-sub-glow-mist);
    border-color: var(--stepc-theme);
    box-shadow: 0 0 24px var(--stepc-sub-glow-light);
    letter-spacing: 3px;
}

.btn-load-more:disabled,
.btn-load-more--done {
    opacity: 0.45;
    cursor: not-allowed;
    letter-spacing: 2px;
}

.btn-load-more .bi-arrow-clockwise {
    transition: transform 0.6s ease;
}

.btn-load-more.loading .bi-arrow-clockwise {
    animation: spinOnce 0.8s linear infinite;
}

@keyframes spinOnce {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =============================================
   RESPONSIVE — Tablet (2 columns)
   ============================================= */
@media (max-width: 1024px) {
    .blog-grid {
        gap: 1.5rem;
    }
}

@media (max-width: 900px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* =============================================
   RESPONSIVE — Mobile (1 column)
   ============================================= */
@media (max-width: 600px) {
    .blog-hero {
        min-height: 320px;
    }

    .blog-hero-title {
        letter-spacing: 3px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .blog-listing-inner {
        padding: 0 1.2rem;
    }

    .blog-card-body {
        padding: 1.2rem;
    }

    .btn-load-more {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 400px) {
    .blog-hero-title {
        font-size: 2.2rem;
    }
}

/* =============================================
   LIGHT BACKGROUND SECTION HEADER OVERRIDES
   ============================================= */
.blog-listing .section-header h2 {
    color: #1a1a1a;
}

.blog-listing .section-header p {
    color: #666666;
}

.blog-listing .section-header .section-label {
    color: var(--stepc-theme);
}

.blog-listing .section-header .section-label::before,
.blog-listing .section-header .section-label::after {
    background: rgba(184, 160, 0, 0.35);
}/* ============================================
   STEPC Blog Article Page Styles
   blog_pg.css — 文章內容頁
   Color: Black + Yellow (#FEE500)
   ============================================ */ /* =============================================
   ARTICLE HERO
   ============================================= */
.article-hero {
    position: relative;
    width: 100%;
    min-height: 55vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    padding-top: 68px;
}

.article-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 80% at 50% 0%, rgba(254, 229, 0, 0.14) 0%, transparent 65%),
        radial-gradient(ellipse 50% 60% at 20% 100%, rgba(255, 100, 0, 0.07) 0%, transparent 55%),
        linear-gradient(160deg, #130900 0%, #080808 45%, #0d0200 100%);
}

.article-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(8, 8, 8, 0.3) 0%,
        transparent 30%,
        rgba(8, 8, 8, 0.5) 70%,
        rgba(8, 8, 8, 1) 100%);
}

.article-hero-noise {
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E');
    pointer-events: none;
}

.article-hero-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
    width: 100%;
    padding: 3rem 2rem 3.5rem;
    text-align: center;
}

.article-breadcrumb {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.article-breadcrumb a {
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.3s ease;
}

.article-breadcrumb a:hover {
    color: var(--stepc-main);
}

.article-breadcrumb .sep {
    margin: 0 0.5rem;
    opacity: 0.4;
}

.article-category {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 0.35rem 1rem;
    border-radius: 3px;
    margin-bottom: 1.2rem;
}

.article-hero-title {
    font-family: 'Noto Serif TC', serif;
    font-size: clamp(1.8rem, 4.5vw, 2.8rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.45;
    letter-spacing: 1px;
    margin: 0 0 1.5rem;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}

.article-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.8px;
}

.article-meta i {
    margin-right: 0.35rem;
    color: var(--stepc-main);
    opacity: 0.7;
}

.article-hero-bottom-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(254, 229, 0, 0.3), transparent);
}

.frm-blog-pg article .container {
    max-width: 980px;
    margin: 0 auto;
}

/* =============================================
   FEATURED IMAGE
   ============================================= */
.article-featured-img {
    max-width: 960px;
    margin: -2rem auto 0;
    padding: 0 2rem;
    position: relative;
    z-index: 3;
}

.article-featured-img .featured-wrapper {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.article-featured-img .featured-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.12);
    font-size: 4rem;
}

.article-featured-img .featured-caption {
    text-align: center;
    font-size: 0.78rem;
    color: #888;
    margin-top: 0.8rem;
    letter-spacing: 0.5px;
}

/* =============================================
   ARTICLE BODY
   ============================================= */
.article-body {
    background: #f5f5f5;
    padding: 4rem 2rem 5rem;
}

.article-body-inner {
    max-width: 780px;
    margin: 0 auto;
}

/* Typography */
.frm-blog-pg article h2 {
    font-family: 'Noto Serif TC', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 3rem 0 1.2rem;
    padding-left: 1rem;
    border-left: 3px solid var(--stepc-main);
    line-height: 1.5;
}

.frm-blog-pg article h3 {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #2a2a2a;
    margin: 2.5rem 0 1rem;
    line-height: 1.5;
}

.frm-blog-pg article p {
    font-size: 1rem;
    color: #444;
    line-height: 2;
    margin: 0 0 1.5rem;
    letter-spacing: 0.3px;
}

.article-body-inner p.lead {
    font-size: 1.1rem;
    color: #333;
    font-weight: 500;
    line-height: 2;
    border-left: 3px solid rgba(184, 160, 0, 0.4);
    padding-left: 1.2rem;
    margin-bottom: 2rem;
}

/* =============================================
   IMAGES
   ============================================= */
.frm-blog-pg article img {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* =============================================
   PULL QUOTE
   ============================================= */
.frm-blog-pg article blockquote {
    margin: 3rem 0;
    padding: 2.5rem 2rem;
    background: #fff;
    border-radius: 10px;
    border-left: 4px solid var(--stepc-main);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
    position: relative;
}

.frm-blog-pg article blockquote::before {
    content: '\201C';
    font-family: 'Abril Fatface', serif;
    font-size: 4rem;
    color: var(--stepc-main);
    opacity: 0.25;
    position: absolute;
    top: 0.3rem;
    left: 1.2rem;
    line-height: 1;
}

.frm-blog-pg article blockquote p {
    font-family: 'Noto Serif TC', serif;
    font-size: 1.15rem;
    color: #2a2a2a;
    line-height: 1.9;
    margin: 0;
    padding-left: 0.5rem;
    font-style: italic;
}

.frm-blog-pg article blockquote .quote-author {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 0.8rem;
    color: #999;
    font-style: normal;
    margin-top: 1rem;
    padding-left: 0.5rem;
    letter-spacing: 1px;
}

/* =============================================
   INFO BOX / TIP BOX
   ============================================= */
.article-infobox {
    margin: 2.5rem 0;
    padding: 1.8rem 2rem;
    background: rgba(184, 160, 0, 0.06);
    border: 1px solid rgba(184, 160, 0, 0.2);
    border-radius: 10px;
}

.article-infobox .infobox-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #B8A000;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.article-infobox ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-infobox ul li {
    font-size: 0.92rem;
    color: #555;
    line-height: 1.8;
    padding: 0.3rem 0;
    padding-left: 1.4rem;
    position: relative;
}

.article-infobox ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.85rem;
    width: 6px;
    height: 6px;
    background: var(--stepc-main);
    border-radius: 50%;
}

/* =============================================
   ARTICLE TAGS
   ============================================= */
.article-tags {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #ddd;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.article-tags .tag-label {
    font-size: 0.8rem;
    color: #888;
    margin-right: 0.4rem;
    letter-spacing: 1px;
}

.article-tags .tag {
    display: inline-block;
    font-size: 0.75rem;
    color: #666;
    background: #fff;
    border: 1px solid #ddd;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.article-tags .tag:hover {
    border-color: var(--stepc-main);
    color: #B8A000;
    background: rgba(184, 160, 0, 0.05);
}

/* =============================================
   SHARE BAR
   ============================================= */
.article-share {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.article-share .share-label {
    font-size: 0.8rem;
    color: #888;
    letter-spacing: 1px;
}

.article-share .share-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ddd;
    color: #555;
    font-size: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.article-share .share-btn:hover {
    background: var(--stepc-main);
    border-color: var(--stepc-main);
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(184, 160, 0, 0.3);
}

/* =============================================
   AUTHOR BOX
   ============================================= */
.article-author-box {
    margin-top: 3rem;
    padding: 2rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.author-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--stepc-main) 0%, #D4C200 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #000;
    font-weight: 700;
    flex-shrink: 0;
}

.author-info h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.3rem;
}

.author-info .author-role {
    font-size: 0.78rem;
    color: #B8A000;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.author-info p {
    font-size: 0.85rem;
    color: #777;
    line-height: 1.7;
    margin: 0;
}

/* =============================================
   RELATED ARTICLES
   ============================================= */
.article-related {
    background: var(--stepc-black);
    padding: 5rem 2rem;
}

.article-related-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.article-related .section-header {
    margin-bottom: 3rem;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.related-card {
    background: var(--stepc-dark);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.35s var(--stepc-spring),
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.related-card:hover {
    transform: translateY(-4px);
    border-color: rgba(254, 229, 0, 0.2);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.related-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.08);
    font-size: 2.5rem;
    position: relative;
}

.related-card-img .blog-category-badge {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
}

.related-card-body {
    padding: 1.3rem 1.5rem 1.5rem;
}

.related-card-date {
    font-size: 0.72rem;
    color: var(--stepc-gray);
    letter-spacing: 1px;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.related-card-title {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.55;
    margin: 0 0 1rem;
    transition: color 0.3s ease;
}

.related-card:hover .related-card-title {
    color: #fff;
}

.related-card-link {
    font-size: 0.78rem;
    font-weight: 700;
    color: #B8A000;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: gap 0.3s ease;
}

.related-card:hover .related-card-link {
    gap: 0.6rem;
}

/* Back to Blog */
.article-back {
    text-align: center;
    margin-top: 3.5rem;
}

.btn-back-blog {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    color: var(--stepc-main);
    border: 1.5px solid rgba(254, 229, 0, 0.3);
    padding: 0.85rem 2.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 4px;
    transition: all 0.35s ease;
    font-family: 'Noto Sans TC', sans-serif;
}

.btn-back-blog:hover {
    background: rgba(254, 229, 0, 0.08);
    border-color: var(--stepc-main);
    box-shadow: 0 0 24px rgba(254, 229, 0, 0.15);
    letter-spacing: 3px;
    color: var(--stepc-main);
}

/* =============================================
   RESPONSIVE — Tablet
   ============================================= */
@media (max-width: 900px) {
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .article-img.full-width {
        margin-left: 0;
        margin-right: 0;
    }
}

/* =============================================
   RESPONSIVE — Mobile
   ============================================= */
@media (max-width: 600px) {
    .article-hero {
        min-height: 45vh;
    }

    .article-hero-content {
        padding: 2rem 1.2rem 2.5rem;
    }

    .article-meta {
        gap: 0.8rem;
        font-size: 0.72rem;
    }

    .article-featured-img {
        padding: 0 1.2rem;
        margin-top: -1.5rem;
    }

    .article-body {
        padding: 3rem 1.2rem 4rem;
    }

    .frm-blog-pg article h2 {
        font-size: 1.25rem;
    }

    .article-pullquote {
        padding: 2rem 1.2rem;
    }

    .article-pullquote p {
        font-size: 1rem;
    }

    .article-img-row {
        grid-template-columns: 1fr;
    }

    .article-author-box {
        flex-direction: column;
        text-align: center;
    }

    .related-grid {
        grid-template-columns: 1fr;
    }

    .article-related {
        padding: 3.5rem 1.2rem;
    }

    .article-img.full-width {
        margin-left: 0;
        margin-right: 0;
    }
}/* ============================================
   STEPC About Page Styles
   about.css — 關於我們頁面
   Color: Black + Orange (#FF8C00)
   ============================================ */ /* =============================================
   HERO — Smaller (50vh)
   ============================================= */
.about-hero {
    position: relative;
    width: 100%;
    height: 50vh;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.about-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 70% at 50% 0%, rgba(255, 140, 0, 0.16) 0%, transparent 65%),
        radial-gradient(ellipse 45% 55% at 80% 90%, rgba(255, 80, 0, 0.06) 0%, transparent 55%),
        linear-gradient(155deg, #130900 0%, #080808 50%, #0a0000 100%);
}

.about-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(8, 8, 8, 0.3) 0%,
        transparent 40%,
        rgba(8, 8, 8, 0.55) 80%,
        rgba(8, 8, 8, 1) 100%);
}

.about-hero-noise {
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E');
    pointer-events: none;
}

/* Floating particles */
.about-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.ap {
    position: absolute;
    border-radius: 50%;
    background: var(--stepc-orange);
    animation: apFloat linear infinite;
}

.ap1 {
    width: 3px;
    height: 3px;
    left: 12%;
    top: 30%;
    animation-duration: 9s;
    animation-delay: 0s;
    opacity: 0.35;
}

.ap2 {
    width: 2px;
    height: 2px;
    left: 78%;
    top: 20%;
    animation-duration: 11s;
    animation-delay: 1.2s;
    opacity: 0.25;
}

.ap3 {
    width: 4px;
    height: 4px;
    left: 88%;
    top: 55%;
    animation-duration: 8s;
    animation-delay: 2s;
    opacity: 0.4;
}

.ap4 {
    width: 2px;
    height: 2px;
    left: 25%;
    top: 65%;
    animation-duration: 10s;
    animation-delay: 0.6s;
    opacity: 0.3;
}

.ap5 {
    width: 3px;
    height: 3px;
    left: 55%;
    top: 45%;
    animation-duration: 12s;
    animation-delay: 3s;
    opacity: 0.35;
}

.ap6 {
    width: 2px;
    height: 2px;
    left: 65%;
    top: 75%;
    animation-duration: 7s;
    animation-delay: 1.8s;
    opacity: 0.28;
}

@keyframes apFloat {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 0.7;
    }

    100% {
        transform: translateY(-100px) scale(0.5);
        opacity: 0;
    }
}

.about-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 2rem;
    padding-top: 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-hero-label {
    font-size: 0.7rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--stepc-orange);
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.85;
}

.about-hero-title {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    letter-spacing: 6px;
    line-height: 1;
    color: #fff;
    margin: 0 0 0.6rem;
    text-shadow: 0 0 50px rgba(255, 140, 0, 0.25);
}

.about-hero-en {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(0.8rem, 1.8vw, 1.2rem);
    letter-spacing: 8px;
    color: var(--stepc-orange);
    margin: 0 0 0.8rem;
    text-transform: uppercase;
    opacity: 0.8;
}

.about-hero-sub {
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 3px;
    margin: 0;
}

.about-hero-bottom-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 140, 0, 0.3), transparent);
}

/* =============================================
   BRAND STORY SECTION
   ============================================= */
.about-story {
    background: var(--stepc-black);
}

.about-story-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Two-column layout */
.about-story-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 5rem;
}

/* Left: Text */
.about-story-text {}

.about-story-lead {
    font-family: 'Noto Serif TC', serif;
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    line-height: 2;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.5rem;
}

.about-story-lead strong {
    color: var(--theme-main);
    font-weight: 700;
}

.about-story-body-text {
    font-size: 0.95rem;
    line-height: 2;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1.2rem;
}

.about-story-body-text:last-of-type {
    margin-bottom: 2rem;
}

/* Story Tags */
.badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--theme-main);
    border: 1px solid var(--theme-main-glow);
    background: var(--theme-sub-glow-mist);
    padding: 0.35rem 0.85rem;
    border-radius: 3px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.badge-tag::before {
    margin-right: 0.25rem;
}

.badge-tag:hover {
    background: var(--theme-sub-glow-light);
    border-color: color-mix(in srgb, var(--theme-main) 45%, transparent);
}

.badge-tag:has(span:empty) {
    display: none;
}

#editorContainer .badge-tag:has(span:empty) {
    display: inline-flex;
}

/* Right: Image Placeholder */
.about-story-img {
    width: 100%;
}

.about-img-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f0f0f0;
    border: 1px solid rgba(184, 160, 0, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.about-img-placeholder:hover {
    border-color: rgba(255, 140, 0, 0.25);
}

.about-img-inner {
    text-align: center;
    z-index: 1;
}

.about-img-logo {
    display: block;
    font-family: 'Abril Fatface', serif;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: 8px;
    color: rgba(0, 0, 0, 0.1);
}

.about-img-logo em {
    color: rgba(255, 140, 0, 0.2);
    font-style: normal;
}

.about-img-sub {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.12);
    margin-top: 0.5rem;
    text-transform: uppercase;
}

/* Corner accents */
.about-img-corner {
    position: absolute;
    width: 28px;
    height: 28px;
}

.about-img-corner--tl {
    top: 12px;
    left: 12px;
    border-top: 2px solid rgba(255, 140, 0, 0.3);
    border-left: 2px solid rgba(255, 140, 0, 0.3);
}

.about-img-corner--br {
    bottom: 12px;
    right: 12px;
    border-bottom: 2px solid rgba(255, 140, 0, 0.3);
    border-right: 2px solid rgba(255, 140, 0, 0.3);
}

/* =============================================
   STATS CARDS
   ============================================= */
.about-stats-row {
    /*display: grid;*/ /*grid-template-columns: repeat(3, 1fr);*/
    /*gap: 1.5rem;*/
}

.about-stat-card {
    background: color-mix(in srgb, var(--bs-gray-200) 50%, transparent);
    border: 1px solid var(--theme-sub-glow);
    border-radius: 10px;
    padding: 2.2rem 1.5rem;
    text-align: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.about-stat-card:hover {
    border-color: rgba(255, 140, 0, 0.3);
    box-shadow: 0 8px 30px rgba(255, 140, 0, 0.08);
    transform: translateY(-3px);
}

.about-stat-num {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: var(--theme-main);
    line-height: 1;
    margin-bottom: 0.7rem;
    letter-spacing: 2px;
}

.about-stat-label {
    font-size: 0.82rem;
    color: var(--stepc-gray);
    letter-spacing: 2px;
}

/* =============================================
   TEAM SECTION
   ============================================= */
.about-team {
    background: var(--stepc-dark);
    position: relative;
}

.about-team::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 140, 0, 0.12), transparent);
}

.about-team-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* 4-column grid */
.about-team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.team-card {
    text-align: center;
    padding: 2rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.team-card:hover {
    border-color: rgba(255, 140, 0, 0.2);
    transform: translateY(-4px);
}

/* Photo circle */
.team-photo {
    margin: 0 auto 1.2rem;
    width: 90px;
    height: 90px;
}

.team-photo-placeholder {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 2px solid rgba(255, 140, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.15);
    font-size: 2.2rem;
    transition: border-color 0.3s ease;
}

.team-card:hover .team-photo-placeholder {
    border-color: rgba(255, 140, 0, 0.45);
}

.team-name {
    font-family: 'Abril Fatface', serif;
    font-size: 1rem;
    color: #fff;
    letter-spacing: 2px;
    margin-bottom: 0.3rem;
}

.team-role {
    font-size: 0.72rem;
    color: var(--stepc-orange);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    opacity: 0.85;
}

.team-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.38);
    line-height: 1.7;
    margin: 0;
}

/* =============================================
   CONTACT FORM SECTION
   ============================================= */
.about-contact {
    background: var(--stepc-black);
    position: relative;
}

.about-contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 140, 0, 0.12), transparent);
}

.about-contact-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Contact Card — light card on dark background */
.contact-card {
    max-width: 760px;
    margin: auto;
    background: var(--stepc-white);
    border-radius: 16px;
    padding: 3rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 140, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--stepc-orange-dark), var(--stepc-orange), var(--stepc-orange-light));
}

.contact-card-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 2.2rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--stepc-gray-dark);
    letter-spacing: 1px;
}

.contact-card-icon {
    color: var(--stepc-orange);
    font-size: 1.1rem;
}

/* Form layout */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.8rem;
}

.contact-form-group {
    position: relative;
    margin-bottom: 1.8rem;
}

.contact-form-group--full {
    grid-column: 1 / -1;
    margin-bottom: 1.8rem;
}

.contact-form-group label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 0.6rem;
}

.required-star {
    color: var(--stepc-orange);
}

/* Underline-style inputs */
.contact-form-group input,
.contact-form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid #ccc;
    border-radius: 0;
    padding: 0.5rem 0 0.7rem;
    font-size: 0.95rem;
    font-family: 'Noto Sans TC', sans-serif;
    color: #222;
    outline: none;
    transition: border-color 0.3s ease;
    resize: none;
}

.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
    color: #bbb;
    font-size: 0.88rem;
}

.contact-form-group input:focus,
.contact-form-group textarea:focus {
    border-bottom-color: var(--stepc-orange);
}

/* Animated underline */
.form-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--stepc-orange);
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-form-group.is-focused .form-underline {
    width: 100%;
}

/* Error state */
.contact-form-group.has-error input,
.contact-form-group.has-error textarea {
    border-bottom-color: #e84040;
}

.contact-form-group.has-error .form-underline {
    background: #e84040;
    width: 100%;
}

/* Submit button */
.contact-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.contact-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--stepc-orange);
    color: #000;
    border: 2px solid var(--stepc-orange);
    padding: 0.85rem 2.5rem;
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Noto Sans TC', sans-serif;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.contact-submit-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.contact-submit-btn:hover::before {
    transform: translateX(100%);
}

.contact-submit-btn:hover {
    background: transparent;
    color: var(--stepc-orange);
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.25);
    letter-spacing: 4px;
}

.contact-submit-btn.submitting {
    opacity: 0.7;
    pointer-events: none;
}

.contact-submit-btn.submitted {
    background: #1a1a1a;
    color: #64c896;
    border-color: #64c896;
    pointer-events: none;
    letter-spacing: 1px;
    font-size: 0.82rem;
}

.contact-submit-btn.submitted:hover {
    letter-spacing: 1px;
    box-shadow: none;
}

.btn-icon {
    font-size: 0.85rem;
}

/* =============================================
   SOCIAL ICONS ROW
   ============================================= */
.contact-social-row {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

.contact-social-label {
    font-size: 0.72rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #999;
}

.contact-social-icons {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    justify-content: center;
}

.contact-social-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 1.15rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.contact-social-btn:hover {
    background: var(--stepc-orange);
    border-color: var(--stepc-orange);
    color: #000;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 140, 0, 0.3);
}

/* =============================================
   RESPONSIVE — Tablet
   ============================================= */
@media (max-width: 992px) {
    .about-story-body {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .about-story-img {
        max-width: 520px;
        margin: 0 auto;
    }

    .about-team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .contact-card {
        padding: 2.5rem 2rem;
    }
}

@media (max-width: 768px) {
    .about-hero {
        min-height: 320px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0;
    }
}

@media (max-width: 600px) {
    .about-hero-title {
        letter-spacing: 3px;
    }

    .about-story-tags {
        gap: 0.5rem;
    }

    .about-team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .team-photo,
    .team-photo-placeholder {
        width: 72px;
        height: 72px;
    }

    .contact-card {
        padding: 2rem 1.4rem;
        border-radius: 12px;
    }

    .contact-submit-btn {
        width: 100%;
        justify-content: center;
    }

    .contact-form-actions {
        justify-content: stretch;
    }
}

@media (max-width: 400px) {
    .about-hero-title {
        font-size: 2.2rem;
    }

    .about-team-grid {
        grid-template-columns: 1fr;
        max-width: 280px;
        margin: 0 auto;
    }
}

/* =============================================
   TEAM SECTION
   ============================================= */
.team-card {
    text-align: center;
    padding: 2rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.team-card:hover {
    border-color: rgba(184, 160, 0, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Photo circle */
.team-photo {
    margin: 0 auto 1.2rem;
    width: 90px;
    height: 90px;
}

.team-photo-placeholder {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #e8e8e8;
    border: 2px solid rgba(184, 160, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.2);
    font-size: 2.2rem;
    transition: border-color 0.3s ease;
}

.team-card:hover .team-photo-placeholder {
    border-color: rgba(184, 160, 0, 0.55);
}

.team-name {
    font-family: 'Abril Fatface', serif;
    font-size: 1rem;
    color: #1a1a1a;
    letter-spacing: 2px;
    margin-bottom: 0.3rem;
}

.team-role {
    font-size: 0.72rem;
    color: #B8A000;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    opacity: 1;
}

.team-desc {
    font-size: 0.8rem;
    color: #888888;
    line-height: 1.7;
    margin: 0;
}

/* Contact Card — card on light background */
.contact-card {
    background: #f9f9f9;
    border-radius: 16px;
    padding: 3rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--stepc-orange-dark), var(--stepc-orange), var(--stepc-orange-light));
}

.contact-card-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 2.2rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--stepc-gray-dark);
    letter-spacing: 1px;
}

.contact-card-icon {
    color: var(--stepc-orange);
    font-size: 1.1rem;
}

/* Form layout */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.8rem;
}

.contact-form-group {
    position: relative;
    margin-bottom: 1.8rem;
}

.contact-form-group--full {
    grid-column: 1 / -1;
    margin-bottom: 1.8rem;
}

.contact-form-group label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 0.6rem;
}

.required-star {
    color: var(--stepc-orange);
}

/* Underline-style inputs */
.contact-form-group input,
.contact-form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid #ccc;
    border-radius: 0;
    padding: 0.5rem 0 0.7rem;
    font-size: 0.95rem;
    font-family: 'Noto Sans TC', sans-serif;
    color: #222;
    outline: none;
    transition: border-color 0.3s ease;
    resize: none;
}

.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
    color: #bbb;
    font-size: 0.88rem;
}

.contact-form-group input:focus,
.contact-form-group textarea:focus {
    border-bottom-color: var(--stepc-orange);
}

/* Animated underline */
.form-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--stepc-orange);
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-form-group.is-focused .form-underline {
    width: 100%;
}

/* Error state */
.contact-form-group.has-error input,
.contact-form-group.has-error textarea {
    border-bottom-color: #e84040;
}

.contact-form-group.has-error .form-underline {
    background: #e84040;
    width: 100%;
}

/* Submit button */
.contact-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.contact-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--stepc-orange);
    color: #000;
    border: 2px solid var(--stepc-orange);
    padding: 0.85rem 2.5rem;
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Noto Sans TC', sans-serif;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.contact-submit-btn::before {
    content: '';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.18) 50%,transparent 100%);transform:translateX(-100%);transition:transform .5s ease}.contact-submit-btn:hover::before{transform:translateX(100%)}.contact-submit-btn:hover{background:transparent;color:var(--stepc-orange);box-shadow:0 0 20px rgba(254,229,0,.25);letter-spacing:4px}.contact-submit-btn.submitting{opacity:.7;pointer-events:none}.contact-submit-btn.submitted{background:#1a1a1a;color:#64c896;border-color:#64c896;pointer-events:none;letter-spacing:1px;font-size:.82rem}.contact-submit-btn.submitted:hover{letter-spacing:1px;box-shadow:none}.btn-icon{font-size:.85rem} .contact-social-row{margin-top:2.5rem;padding-top:2rem;border-top:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;align-items:center;gap:1.2rem}.contact-social-label{font-size:.72rem;letter-spacing:3px;text-transform:uppercase;color:#999}.contact-social-icons{display:flex;gap:.85rem;flex-wrap:wrap;justify-content:center}.contact-social-btn{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(0,0,0,.12);background:#fff;display:flex;align-items:center;justify-content:center;color:#555;font-size:1.15rem;transition:all .3s ease;box-shadow:0 2px 8px rgba(0,0,0,.06)}.contact-social-btn:hover{background:var(--stepc-orange);border-color:var(--stepc-orange);color:#000;transform:translateY(-3px);box-shadow:0 6px 20px rgba(254,229,0,.3)}.help-block{font-size:12px;color:#FF3F00;position:absolute;right:4px;bottom:-.5rem;pointer-events:none}@media (max-width:992px){.about-story-body{grid-template-columns:1fr;gap:2.5rem}.about-story-img{max-width:520px;margin:0 auto}.contact-card{padding:2.5rem 2rem}}@media (max-width:768px){.about-hero{min-height:320px}.contact-form-row{grid-template-columns:1fr;gap:0;margin-bottom:0}}@media (max-width:600px){.about-hero-title{letter-spacing:3px}.about-story-tags{gap:.5rem}.about-team-grid{grid-template-columns:repeat(2,1fr);gap:1rem}.team-photo,.team-photo-placeholder{width:72px;height:72px}.contact-card{padding:2rem 1.4rem;border-radius:12px}.contact-submit-btn{width:100%;justify-content:center}.contact-form-actions{justify-content:stretch}}@media (max-width:400px){.about-hero-title{font-size:2.2rem}.about-team-grid{grid-template-columns:1fr;max-width:280px;margin:0 auto}}.flex-justified-gallery{display:flex;flex-wrap:wrap;align-items:flex-start;width:100%}.flex-justified-gallery .fjg-entry{display:block;min-width:0;overflow:hidden;color:inherit;text-decoration:none}.flex-justified-gallery .fjg-entry img:not(.sort-handle){display:block;width:100%;height:100%!important;min-width:100%;min-height:100%;max-width:none;margin:0;object-fit:cover}.flex-justified-gallery .fjg-entry img.sort-handle{width:auto;height:auto;min-width:auto;min-height:auto;object-fit:unset}.flex-justified-gallery .fjg-entry picture{display:block;width:100%;height:100%}.flex-justified-gallery .fjg-hidden{display:none!important}