#banner { position: relative; min-height: 100vh; overflow: hidden; background: radial-gradient(ellipse 100% 60% at 70% 0%,#0a1224 0%,var(--oc-bg) 60%); }
#banner:after { content: ''; position: absolute; width: 30%; height: 100%; background: linear-gradient(270deg,#020b1d -22%,rgb(255 255 255/0%) 100%); bottom: 0; right: 0; z-index: 2; }
#banner .arc1 {width: 130vmax;height: 130vmax;left: -62vmax;top: -83vmax;}
#banner .arc2 {width: 90vmax;height: 90vmax;left: -54vmax;bott;bottom: -70vmax;er-color: rgb(125 196 204/35%);}
#banner .scan { position: absolute; left: 0; right: 0; height: 2px; top: -2px; z-index: 3; pointer-events: none; background: linear-gradient(90deg,transparent,rgba(0,229,255,.45),transparent); animation: oc-scan 8s linear infinite; }
@keyframes oc-scan {
  0% { top: -2px; opacity: 0 }
  6% { opacity: 1 }
  94% { opacity: 1 }
  100% { top: 100%; opacity: 0 }
}
#banner .bannerBox { position: relative; }
#banner .frame .slide.active:after {content: '';position: absolute;width: 100%;height: 70%;background: linear-gradient(360deg,#08090b 30%,rgb(255 255 255/0%) 100%);bottom: -20px;z-index: 2;}
/* 中右框景輪播 */
#banner .frame { position: absolute; z-index: 2; left: 0; top: 0; right: auto; width: 100%; height: auto; aspect-ratio: 16/10.5; border: 1px solid var(--oc-line); overflow: hidden; background: var(--oc-bg2); }
#banner .frame .slide { position: absolute; inset: 0; visibility: hidden }
#banner .frame .slide.active { visibility: visible; height: 100%; width: 100%; }
#banner .frame .slide .img { position: absolute; inset: 0; }
#banner .frame .slide .img img { width: 100%; height: 100%; object-fit: cover }
#banner .frame .slide .img video { position: absolute; inset: 0; top: 0; left: 50%; transform: translate(-50%,0); }
#banner .frame .slide.has-video .img img { visibility: hidden }
#banner .frame,#banner .frame .slide .img video,#banner .frame .slide .img,#banner .frame .slide .img img { width: 100%; height: auto; object-fit: cover; pointer-events: none; min-width: 100vw; aspect-ratio: 18/9; }
/* 切換簾幕：三片直簾依序掃過 */
#banner .frame .wipe { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: flex }
#banner .frame .wipe i { flex: 1; background: linear-gradient(180deg,#0a1224,#050608); transform: scaleY(0); transform-origin: top }
#banner .frame .wipe.run i { animation: oc-wipe .9s cubic-bezier(.77,0,.18,1) forwards }
#banner .frame .wipe.run i:nth-child(2) { animation-delay: .08s }
#banner .frame .wipe.run i:nth-child(3) { animation-delay: .16s }
@keyframes oc-wipe {
  0% { transform: scaleY(0); transform-origin: top }
  49% { transform: scaleY(1); transform-origin: top }
  51% { transform: scaleY(1); transform-origin: bottom }
  100% { transform: scaleY(0); transform-origin: bottom }
}
#banner .frame .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px 22px; background: linear-gradient(0deg,rgba(5,6,8,.9),transparent); font-size: .85rem; color: var(--oc-ink2); }
#banner .frame .cap b { display: block; font-family: 'Chakra Petch','Noto Sans TC',sans-serif; font-weight: 600; font-size: 1rem; color: var(--oc-ink); letter-spacing: .08em }
/* 左下靜態標語（.Txt） */
#banner .headline { position: absolute; z-index: 10; left: 4vw; bottom: 11vw; max-width: 44vw }
#banner .headline .Txt { font-weight: 600; font-size: clamp(1.7rem,3.4vw,3rem); line-height: 1.4; letter-spacing: .04em; word-spacing: 100vw; text-transform: uppercase; }
#banner .headline .Txt em { font-style: normal; background: linear-gradient(92deg,var(--oc-cyan),var(--oc-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#banner .headline .sub {margin-top: 14px;color: var(--oc-ink2);font-size: 1rem;letter-spacing: .1em}
#banner .headline .meta { margin-top: 34px; font-family: 'Chakra Petch',sans-serif; font-size: .72rem; letter-spacing: .3em; color: var(--oc-ink2); display: flex; align-items: center; gap: 14px; }
#banner .headline .meta::after { content: ""; flex: 0 0 60px; height: 1px; background: var(--oc-ink2); opacity: .5 }
/* 右下消息艙（ticker） */
#banner .pod { position: absolute; z-index: 3; right: 4vw; bottom: 16vh; width: min(540px,80vw); border: 1px solid var(--oc-line); background: rgba(10,13,19,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#banner .pod .pod-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid var(--oc-line); font-family: 'Chakra Petch',sans-serif; font-size: .7rem; letter-spacing: .3em; color: var(--oc-cyan); }
#banner .pod .pod-head i { width: 7px; height: 7px; border-radius: 50%; background: var(--oc-cyan); animation: oc-blink 1.6s ease-in-out infinite; box-shadow: 0 0 8px var(--oc-cyan) }
@keyframes oc-blink {
  0%,100% { opacity: 1 }
  50% { opacity: .25 }
}
#banner .pod .pod-body { position: relative; height: 74px; overflow: hidden }
#banner .pod .pod-body a { position: absolute; inset: 0; padding: 5px 18px 0; display: block; opacity: 0; transform: translateY(18px); transition: opacity .5s,transform .5s; }
#banner .pod .pod-body a.show { opacity: 1; transform: none }
#banner .pod .pod-body time { font-family: 'Chakra Petch',sans-serif; font-size: .8rem; letter-spacing: .2em; color: var(--oc-ink2) }
#banner .pod .pod-body p { font-size: 1rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
/* 頁碼與進度 */
#banner .hud { position: absolute; z-index: 3; left: 50%; top: 8%; transform: translateX(calc(-18% + min(46vw,720px) + 26px)); display: flex; flex-direction: column; gap: 18px; align-items: center; font-family: 'Chakra Petch',sans-serif; }
#banner .hud .num { writing-mode: vertical-rl; font-size: .78rem; letter-spacing: .3em; color: var(--oc-ink2) }
#banner .hud .num b { color: var(--oc-cyan); font-weight: 600 }
#banner .hud .bar { width: 1px; height: 90px; background: rgba(255,255,255,.15); position: relative; overflow: hidden }
#banner .hud .bar i { position: absolute; inset: 0; background: var(--oc-cyan); transform-origin: top; transform: scaleY(0) }
#banner .hud .bar i.run { animation: oc-vbar 6s linear forwards }
@keyframes oc-vbar {
  to { transform: scaleY(1) }
}
#banner .scroll-hint { position: absolute; left: 4vw; bottom: 5vh; z-index: 3; background: none; border: 0; cursor: pointer; padding: 6px 0; font-family: 'Chakra Petch',sans-serif; font-size: .68rem; letter-spacing: .4em; color: var(--oc-ink2); display: flex; align-items: center; gap: 12px; transition: color .3s; }
#banner .scroll-hint:hover { color: var(--oc-cyan) }
#banner .scroll-hint::after { content: ""; width: 56px; height: 1px; background: linear-gradient(90deg,var(--oc-cyan),transparent); animation: oc-hint 2s ease-in-out infinite }
@keyframes oc-hint {
  0% { transform: scaleX(0); transform-origin: left }
  55% { transform: scaleX(1); transform-origin: left }
  56% { transform-origin: right }
  100% { transform: scaleX(0); transform-origin: right }
}
@media (max-width:1280px) {
  #banner { min-height: 100vh; }
  #banner .frame,#banner .frame .slide .img video,#banner .frame .slide .img,#banner .frame .slide .img img { width: auto; min-width: 100vw; aspect-ratio: 16/9; }
  #banner .frame { width: auto; transform: none; aspect-ratio: 16/13; }
  #banner .hud { left: auto; right: 4vw; top: 14%; transform: none }
  #banner .headline { bottom: 22vw; max-width: 65vw; }
  #banner .frame .slide.active:after { height: 90%; }
  #banner .pod { right: 4vw; bottom: 0; width: min(400px,80vw); }
  #banner .scroll-hint { display: none }
}
@media (max-width:960px) {
  #banner { min-height: 70vh; }
}
@media (max-width:640px) {
  #banner { min-height: 60vh; }
  #banner .headline { bottom: 10px; max-width: 100vw; }
  #banner .headline .Txt { font-size: 1.5rem }
  #banner .pod { width: calc(100% - 8vw) }
}