/* =========================
   Banner
========================= */#banner { position: relative; width: 100%; background: #0b0b0b; overflow: hidden; }
#banner .main-slider,#banner .slick-list,#banner .slick-track { position: relative; }
#banner .slick-list { overflow: hidden; }
#banner .item { position: relative; overflow: hidden; }
#banner .banner_pic {position: relative;z-index: 0;width: 100%;height: 100vh;overflow: hidden;background: #111;}
#banner .banner_pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1); will-change: transform; }
#banner .slick-current.slick-active .banner_pic img { animation: bannerImageMove 6.5s cubic-bezier(.2,.65,.3,1) forwards; }
/* =========================
   Video
========================= */#banner .item video { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
/* =========================
   Info
========================= */#banner .info { position: absolute !important; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; display: block !important; width: 100%; height: 100%; visibility: visible; opacity: 1; pointer-events: none; }
#banner .info .txt { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; }
/* =========================
   Right Text
========================= */#banner .baa_top {position: absolute;top: 20%;right: 10.5%;z-index: 2;display: flex;flex-direction: row-reverse;align-items: flex-start;gap: clamp(18px,1.45vw,30px);}
/* =========================
   Red Stamp
========================= */#banner .po_baimg { width: clamp(42px,3vw,62px); margin-top: 3%; opacity: 1; transform-origin: center; }
#banner .po_baimg img { display: block; width: 100%; height: auto; }
#banner .slick-current.slick-active .po_baimg { animation: bannerStampIn .7s .45s cubic-bezier(.22,1,.36,1) both; }
/* =========================
   Main Title
========================= */#banner .baa_top .h3 {color: #fff;font-family: "Noto Serif TC","Noto Sans TC",sans-serif;font-size: clamp(34px,2.75vw,54px);font-weight: 700;line-height: 1.35;letter-spacing: .08em;writing-mode: vertical-rl;text-orientation: upright;height: 5.4em;white-space: normal;opacity: 1;text-align: left;}
#banner .slick-current.slick-active .baa_top .h3 { animation: bannerTitleIn .9s .2s cubic-bezier(.22,1,.36,1) both; }
/* =========================
   Description
========================= */#banner .baa_top p {color: rgba(255,255,255,.88);font-family: "Noto Serif TC","Noto Sans TC",sans-serif;font-size: clamp(14px,1.05vw,20px);font-weight: 400;line-height: 2;letter-spacing: .15em;writing-mode: vertical-rl;text-orientation: upright;height: 14.5em;margin: 3% 0 0;white-space: normal;opacity: 1;text-align: left;}
#banner .slick-current.slick-active .baa_top p { animation: bannerDescIn .9s .55s cubic-bezier(.22,1,.36,1) both; }
/* =========================
   Bottom Handwriting
========================= */#banner .baa_bottom {position: absolute;top: 52%;right: 18.4%;z-index: 2;}
#banner .po_baimg2 {width: clamp(100px,8vw,200px);opacity: 1;transform-origin: center;}
#banner .po_baimg2 img { display: block; width: 100%; height: auto; }
#banner .slick-current.slick-active .po_baimg2 { animation: bannerHandIn .9s .9s cubic-bezier(.22,1,.36,1) both,bannerHandFloat 4s 1.8s ease-in-out infinite; }
/* =========================
   Full Banner Link
========================= */#banner .banner_link { position: absolute; inset: 0; z-index: 6; display: block; }
/* =========================
   Animation
========================= */@keyframes bannerImageMove {
  0% { transform: scale(1.01) translate3d(0,0,0); }
  100% { transform: scale(1.055) translate3d(-.4%,-.3%,0); }
}
@keyframes bannerTitleIn {
  0% { opacity: 0; transform: translateX(28px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes bannerDescIn {
  0% { opacity: 0; transform: translateX(18px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes bannerStampIn {
  0% { opacity: 0; transform: translateY(-12px) scale(.82); }
  65% { opacity: 1; transform: translateY(2px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bannerHandIn {
  0% { opacity: 0; transform: translateY(25px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes bannerHandFloat {
  0%,100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-5px) rotate(-.5deg); }
  70% { transform: translateY(2px) rotate(.3deg); }
}
/* =========================
   RWD
========================= */@media screen and (max-width:1440px) {
  #banner .baa_top { right: 8%; }
  #banner .baa_bottom { right: 15%; }
}

@media screen and (max-width:1470px){
  #banner .banner_pic{height: 110vh;}
}
@media screen and (max-width:1199px) {
  #banner .banner_pic { aspect-ratio: 16/8; }
  #banner .baa_top { top: 13%; right: 6%; gap: 16px; }
  #banner .baa_bottom { top: 57%; right: 13%; }
}
@media screen and (max-width:991px) {
  #banner .banner_pic { aspect-ratio: 4/3; }
  #banner .banner_pic img { object-position: 48% center; }
  #banner .baa_top { top: 11%; right: 5%; gap: 12px; }
  #banner .baa_top .h3 { font-size: clamp(28px,4vw,40px); height: 5.4em; }
  #banner .baa_top p { font-size: 14px; height: 13em; line-height: 1.8; }
  #banner .po_baimg { width: 42px; }
  #banner .baa_bottom { top: auto; right: 9%; bottom: 10%; }
  #banner .po_baimg2 { width: 145px; }
}
@media screen and (max-width:767px) {
  #banner .banner_pic { aspect-ratio: 4/5; }
  #banner .banner_pic img { object-position: 43% center; }
  #banner .baa_top {top: 22%;right: 4%;gap: 8px;}
  #banner .baa_top .h3 { font-size: 28px; line-height: 1.3; height: 5.3em; letter-spacing: .04em; }
  #banner .baa_top p { display: none; }
  #banner .po_baimg { width: 34px; }
  #banner .baa_bottom {right: 7%;bottom: 16%;}
  #banner .po_baimg2 { width: 120px; }
}
@media screen and (max-width:500px) {
  #banner .banner_pic {aspect-ratio: auto;height: 500px;}
  #banner .banner_pic img {object-position: 41% center;}
  #banner .baa_top {top: 24%;right: 3%;}
  #banner .baa_top .h3 { font-size: 24px; }
  #banner .po_baimg { width: 30px; }
  #banner .baa_bottom {right: 14%;bottom: 13%;}
  #banner .po_baimg2 { width: 105px; }
}
@media (prefers-reduced-motion:reduce) {
  #banner .slick-current.slick-active .banner_pic img,#banner .slick-current.slick-active .po_baimg,#banner .slick-current.slick-active .baa_top .h3,#banner .slick-current.slick-active .baa_top p,#banner .slick-current.slick-active .po_baimg2 { animation: none; }
}