:root { --banner-primary: #1d5cb7; --banner-info: #333333; --banner-white: #ffffff; --banner-slide-width: 1142px; --banner-slide-height: 642px; --banner-ease: cubic-bezier(0.19,1,0.22,1); --banner-transition: 0.8s; --banner-reveal: 3s; }
/* ===== Banner Base ===== */
#banner { width: 100%; max-width: 100%; margin: 120px auto 30px; position: relative; overflow: hidden; opacity: 0; transition: opacity 0.8s ease; padding-bottom: 20px; }
#banner.ready { opacity: 1; }
#banner * { box-sizing: border-box; }
#banner .main-slider { position: relative; display: flex; align-items: center; min-height: calc(var(--banner-slide-height) + 60px); transition: transform var(--banner-transition) var(--banner-ease); will-change: transform; cursor: grab; }
#banner .main-slider:active { cursor: grabbing; }

/* ===== Slide ===== */
#banner .item { min-width: var(--banner-slide-width); width: var(--banner-slide-width); height: var(--banner-slide-height); margin: 0 15px; border-radius: 40px; overflow: hidden; position: relative; flex: 0 0 auto; background: var(--banner-white); box-shadow: 0 15px 45px rgba(0,0,0,0.08); opacity: 0.4; transform: scale(0.9); transition: transform var(--banner-transition) var(--banner-ease),opacity var(--banner-transition) var(--banner-ease); }
#banner .item.active { opacity: 1; transform: scale(1); }

/* ===== Image/Video ===== */
#banner .imgbox,#banner .imgbox img { width: 100%; height: 100%; }
#banner .imgbox { position: relative; z-index: 1; }
#banner .img_cover { display: block; width: 100%; height: 100%; object-fit: cover; }
#banner .videoBox { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#banner .videoBox video,#banner .videoBox iframe { width: 100%; height: 100%; object-fit: cover; }

/* ===== Info ===== */
#banner .info { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; pointer-events: none; }
#banner .txt { width: 100%; height: 100%; position: relative; z-index: 5; display: flex; align-items: flex-start; padding: 0 8%; flex-direction: column; justify-content: center; }
#banner .txt .title,#banner .txt p,#banner .txt .btn-more-blue { opacity: 0; transform: translateY(40px); transition: opacity var(--banner-reveal) var(--banner-ease),transform var(--banner-reveal) var(--banner-ease); }
#banner.ready .item.active .txt .title { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }
#banner.ready .item.active .txt p { opacity: 1; transform: translateY(0); transition-delay: 0.24s; }
#banner.ready .item.active .txt .btn-more-blue {opacity: 1;transform: translateY(0);transition-delay: 0.34s;}
#banner .txt .title {margin: 0 0 12px;color: var(--banner-primary);font-size: 3.8rem;font-weight: 700;line-height: 1.2;letter-spacing: 0.02em;}
#banner .txt p { margin: 0; color: var(--banner-info); font-size: 1.2rem; line-height: 1.6; text-align: left; margin-bottom: 60px; }
#banner .txt .btn-more-blue {display: inline-block;padding: 16px 50px;background-color: var(--primary);color: var(--white);text-decoration: none;border-radius: 50px;font-weight: 600;font-size: 1.2rem;transition: all 0.3s var(--p-ease);box-shadow: 0 8px 20px rgba(29,92,183,0.25);text-align: center;width: fit-content;pointer-events: auto;letter-spacing: 0.08em;}
#banner .txt .btn-more-blue:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(29,92,183,0.35); }

/* ===== Full Link ===== */
#banner .linkCover { position: absolute; inset: 0; z-index: 0; display: block; }

/* ===== Arrow ===== */
#banner .n2-ss-control-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 55px; height: 55px; border: 0; border-radius: 50%; background: #fff; color: var(--banner-primary); box-shadow: 0 6px 15px rgba(0,0,0,0.12); cursor: pointer; z-index: 20; display: flex; align-items: center; justify-content: center; font-size: 22px; transition: transform 0.25s var(--banner-ease),box-shadow 0.25s var(--banner-ease),opacity 0.25s var(--banner-ease); }
#banner .n2-ss-control-arrow:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.16); }
#banner .arrow-prev { left: 40px; }
#banner .arrow-next { right: 40px; }

/* ===== Bullets ===== */
#banner .n2-ss-bullets { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; z-index: 20; }
#banner .n2-bullet { width: 10px; height: 10px; border-radius: 999px; background: rgb(166 166 169); cursor: pointer; transition: all 0.3s var(--banner-ease); }
#banner .n2-bullet.active { width: 36px; background: var(--banner-primary); }
#banner .txt .title:empty,#banner .txt p:empty,#banner .txt .btn-more-blue:empty { display: none; }

/* ===== Responsive ===== */
@media (max-width:1200px) {
  #banner .main-slider { min-height: 60vw; }
  #banner .item { min-width: 85vw; width: 85vw; height: 50vw; }
  #banner .txt .title { font-size: 2.6rem; }
  #banner .txt p { font-size: 1.05rem; }
}
@media (max-width:767px) {
  #banner .main-slider { min-height: 520px; }
  #banner .item { min-width: 90vw; width: 90vw; height: 460px; margin: 0 10px; border-radius: 26px; }
  #banner .info { align-items: flex-end; padding-bottom: 60px; }
  #banner .txt .title { font-size: 2rem; line-height: 1.25; }
  #banner .txt p { font-size: 1rem; line-height: 1.6; }
  #banner .arrow-prev,#banner .arrow-next { display: none; }
  #banner .n2-ss-bullets { bottom: 18px; }
    #banner{
    margin: 80px auto 50px;
}
}
/* ===== 無障礙：減少動畫 ===== */
@media (prefers-reduced-motion:reduce) {
  #banner,#banner .main-slider,#banner .item,#banner .txt .title,#banner .txt p,#banner .n2-bullet,#banner .n2-ss-control-arrow { transition: none !important; }
}