:root { --banner-red: #ed1c24; --banner-blue: #334fc1; --banner-light-blue: #43c8ed; --banner-white: #ffffff; --banner-space: clamp(55px,11vw,220px); }
/* banner */
#banner { position: relative; width: 100%; height: 100vh; height: 100svh; min-height: 720px; max-height: 980px; margin: 0; background: #02040a; overflow: hidden; }
#banner * { box-sizing: border-box; }
#banner .main-slider,#banner .slick-list,#banner .slick-track,#banner .item { width: 100%; height: 100% !important; }
#banner .slick-list { overflow: hidden; }
#banner .item { position: relative; background: #02040a; overflow: hidden; }
#banner .item::after { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg,rgba(2,5,17,0.56) 0%,rgba(2,5,17,0.24) 39%,rgba(2,5,17,0.04) 67%,rgba(2,5,17,0.08) 100%),linear-gradient(0deg,rgba(1,3,10,0.26) 0%,transparent 45%); content: ""; pointer-events: none; }
/* banner */
#banner .banner_media { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; }
#banner .banner_media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; transform: scale(1.001); }
/* banner */
#banner .slide-video,#banner .slide-media { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; pointer-events: none; }
/* banner */
#banner .info { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; height: 100%; padding: 110px var(--banner-space) 145px; pointer-events: none; }
#banner .info::before {position: absolute;bottom: 0;left: 0;z-index: 0;width: 30%;height: 60%;background: linear-gradient(135deg, rgba(45, 76, 197, 0.05) 8%, rgb(54 79 190 / 41%) 100%);clip-path: polygon(0 0,100% 100%,0 100%);content: "";pointer-events: none;}
#banner .info::after { position: absolute; bottom: 72px; left: clamp(60px,8vw,155px); z-index: 1; width: 290px; height: 180px; background-image: radial-gradient(circle,rgba(85,120,219,0.72) 0 4px,transparent 4.5px); background-size: 15px 15px; content: ""; opacity: 0.6; -webkit-mask-image: linear-gradient(135deg,transparent 5%,#000 45%,transparent 100%); mask-image: linear-gradient(135deg,transparent 5%,#000 45%,transparent 100%); pointer-events: none; }
/* banner */
#banner .txt {position: relative;z-index: 2;width: auto;width: min(650px , 100%);margin: 0;color: var(--banner-white);}
#banner .txt p {margin: 0 0 18px;color: rgba(255,255,255,0.9);font-size: 16px;font-weight: 400;line-height: 1.7;letter-spacing: 0.26em;text-align: left !important;text-shadow: 0 3px 12px rgba(0,0,0,0.5);}
#banner .txt .h3 {width: 100%;margin: 0;color: var(--banner-white);font-size: clamp(38px,4vw,60px);font-weight: 600;line-height: 1.55;letter-spacing: 0.10em;text-align: left !important;text-shadow: 0 5px 22px rgba(0,0,0,0.68);word-break: keep-all;}
/* banner */
#banner .moremabox { position: relative; z-index: 7; width: 270px; height: 46px; margin-top: 44px; margin-left: 150px; pointer-events: auto;overflow: visible; }

#banner .moremabox::before { position: absolute; top: 0; right: calc(100% - 1px); z-index: 0; width: 38px; height: 46px; background: rgba(107,209,255,1); box-shadow: -51px 0 rgba(107,209,255,0.88),-102px 0 rgba(107,209,255,0.76),-153px 0 rgba(107,209,255,0.64),-204px 0 rgba(107,209,255,0.52),-255px 0 rgba(107,209,255,0.40),-306px 0 rgba(107,209,255,0.28),-357px 0 rgba(107,209,255,0.16); content: ""; transform: skewX(-36deg); transform-origin: center; pointer-events: none; }
#banner .moremabox a { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 34px; color: #293aa0; background: var(--banner-white); font-family: "Noto Sans TC","Microsoft JhengHei",sans-serif; font-size: 20px; font-weight: 500; letter-spacing: 0.12em; text-decoration: none; clip-path: polygon(12% 0,100% 0,87% 100%,0 100%); box-shadow: 0 10px 28px rgba(0,0,0,0.2); transition: color 0.3s ease,background 0.3s ease; }
#banner .moremabox a:hover { color: var(--banner-white); background: var(--banner-red); }
/* banner */
#banner .banner_link { position: absolute; inset: 0; z-index: 4; display: block; width: 100%; height: 100%; }
/* banner */
#banner .banner_scroll { position: absolute; bottom: 0; left: 0; z-index: 8; width: 580px; height: 108px; background: var(--banner-light-blue); clip-path: polygon(0 0,26% 0,36% 39%,87% 39%,100% 100%,0 100%); }
#banner .banner_scroll_inner { position: absolute; inset: 4px 4px 0 0; display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding: 40px 88px 0 20px; background: var(--banner-white); clip-path: polygon(0 0,26% 0,36% 39%,87% 39%,100% 100%,0 100%);cursor: pointer;pointer-events: auto; }
#banner .banner_scroll_text { color: var(--banner-red); font-family: Arial,sans-serif; font-size: 16px; font-weight: 400; letter-spacing: 0.06em; white-space: nowrap; }
#banner .banner_scroll_mouse { position: relative; display: block; width: 45px; height: 25px; background: #ff8e96; border-radius: 18px; }
#banner .banner_scroll_mouse::after { position: absolute; top: 50%; right: 8px; width: 5px; height: 5px; background: var(--banner-white); border-radius: 50%; content: ""; transform: translateY(-50%); animation: bannerMouseMove 1.5s ease-in-out infinite; }
#banner .banner_scroll_arrow { position: relative; display: block; width: 14px; height: 14px; }
#banner .banner_scroll_arrow::before,#banner .banner_scroll_arrow::after { position: absolute; content: ""; }
#banner .banner_scroll_arrow::before { top: 0; left: 6px; width: 2px; height: 10px; background: var(--banner-red); }
#banner .banner_scroll_arrow::after { right: 1px; bottom: 1px; width: 8px; height: 8px; border-right: 2px solid var(--banner-red); border-bottom: 2px solid var(--banner-red); transform: rotate(45deg); }
@keyframes bannerMouseMove {
  0%,100% { right: 8px; }
  50% { right: 31px; }
}
/* banner */
#banner .slick-arrow { z-index: 9; }
#banner .slick-dots { position: absolute; right: 35px; bottom: 35px; z-index: 9; }
/* RWD */
@media screen and (max-width:1500px) {
  :root { --banner-space: clamp(55px,8vw,130px); }
  #banner .txt .h3 { font-size: 42px; }
  #banner .moremabox { margin-left: 110px; }
}
@media screen and (max-width:1199px) {
  #banner { min-height: 680px; }
  #banner .info { padding-top: 100px; padding-bottom: 130px; }
  #banner .txt { max-width: 540px; }
  #banner .txt .h3 { font-size: 38px; }
  #banner .moremabox { width: 245px; margin-top: 35px; margin-left: 90px; }

  #banner .banner_scroll { width: 500px; height: 95px; }
  #banner .banner_scroll_inner { padding-top: 35px; padding-right: 70px; }
}
@media screen and (max-width:991px) {
  :root { --banner-space: 50px; }
  #banner .banner_media img,#banner .slide-video,#banner .slide-media { object-position: 62% center; }
  #banner .item::after { background: linear-gradient(90deg,rgba(2,5,17,0.75) 0%,rgba(2,5,17,0.38) 60%,rgba(2,5,17,0.12) 100%); }
  #banner .info::before { width: 55%; }
  #banner .txt .h3 { font-size: 34px; }
  #banner .moremabox { margin-left: 55px; }
  #banner .banner_scroll { width: 430px; }
  #banner .banner_scroll_inner { padding-right: 52px; }
}
@media screen and (max-width:767px) {
  :root { --banner-space: 24px; }
  #banner { height: 100svh; min-height: 640px; max-height: none; }
  #banner .banner_media img,#banner .slide-video,#banner .slide-media { object-position: 66% center; }
  #banner .item::after { background: rgba(1,4,14,0.58); }
  #banner .info { align-items: center; padding: 100px var(--banner-space) 70px; text-align: center; }
  #banner .info::before { width: 100%; height: 42%; opacity: 0.65; }
  #banner .info::after { bottom: 20px; left: 25px; width: 190px; height: 120px; background-size: 12px 12px; }
  #banner .txt { width: 100%; max-width: 500px; }
  #banner .txt p { margin-bottom: 14px; font-size: 14px; letter-spacing: 0.15em; text-align: center !important; }
  #banner .txt .h3 { max-width: 100%; font-size: clamp(28px,8vw,38px); line-height: 1.5; letter-spacing: 0.1em; text-align: center !important; word-break: normal; }
  #banner .moremabox { width: 230px; height: 48px; margin-top: 32px; margin-left: 0; }
  #banner .moremabox::before { display: none; }
  #banner .moremabox a { padding: 0 25px; color: var(--banner-white); background: var(--banner-red); font-size: 17px; clip-path: polygon(8% 0,100% 0,92% 100%,0 100%); }
  #banner .banner_scroll { display: none; }
}
@media screen and (max-width:479px) {
  :root { --banner-space: 18px; }
  #banner { min-height: 600px; }
  #banner .info { padding-top: 90px; }
  #banner .txt p { font-size: 13px; letter-spacing: 0.09em; }
  #banner .txt .h3 { font-size: 28px; letter-spacing: 0.07em; }
  #banner .moremabox { width: 210px; }
}