/* Hero Section (Carousel Style) */
#hero-section {position: relative;overflow: hidden;}
#hero-section .slick-slider{margin-bottom: 0;}
#hero-section .slick-dotted.slick-slider { margin-bottom: 0; }
#hero-section .hero-slide {padding-top: 100px;padding-bottom: 100px;min-height: 800px;position: relative;display: flex !important;align-items: center;}
#hero-section .slide-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
#hero-section .bannerimg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; display: block; }
#hero-section .bannerimg img {width: 100%;height: 100%;object-fit: cover;}
#hero-section .hero-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, rgba(0,40,100,0.85) 0%, rgba(0,90,180,0.7) 100%);z-index: 2;pointer-events: none;display: none;}
#hero-section .hero-slide::after { content: ''; position: absolute; top: -50%; right: -20%; width: 70%; height: 200%; background: radial-gradient(circle, rgba(0,168,255,0.15) 0%, transparent 60%); z-index: 3; transform: rotate(15deg); pointer-events: none; }
#hero-section .container {display: flex;align-items: center;justify-content: center;position: relative;z-index: 4;width: 100%;}
#hero-section .text-content {width: 100%;max-width: 800px;color: #fff;display: none;}
#hero-section .hero-label { font-size: 14px; color: rgba(255,255,255,0.8); margin-bottom: 20px; display: inline-block; letter-spacing: 1.5px; }
#hero-section .main-heading { font-size: 56px; font-weight: 900; line-height: 1.2; margin-bottom: 25px; text-shadow: 0 4px 15px rgba(0,0,0,0.4); letter-spacing: 2px; }
#hero-section .sub-heading { font-size: 22px; color: rgba(255,255,255,0.85); margin-bottom: 45px; font-weight: 300; line-height: 1.6; }
/* Hero Slick Dots Customization */
#hero-section .slick-dots { bottom: 80px; z-index: 10; }
#hero-section .slick-dots li button:before { color: #fff; opacity: 0.5; font-size: 12px; }
#hero-section .slick-dots li.slick-active button:before { color: #fff; opacity: 1; }
#hero-section .videobox .text-content{display: flex;flex-direction: column;}
#hero-section .videobox .hero-overlay { display: flex; flex-direction: column; }

/* Scroll Down 樣式 */
#scrollDown { display: flex; align-items: center; gap: 15px; margin-top: 30px; position: relative; cursor: pointer; }
#scrollDown .text { color: #fff; font-size: 14px; letter-spacing: 1px; font-weight: 300; }
#scrollDown .scrollBtn { width: 36px; height: 20px; border: 2px solid rgba(255,255,255,0.5); border-radius: 10px; position: relative; background: rgba(255,255,255,0.2); }
#scrollDown .scrollBtn::before { content: ''; position: absolute; top: 5px; left: 6px; width: 6px; height: 6px; background: #fff; border-radius: 50%; animation: scrollAnim 1.5s infinite; }
#scrollDown .scrollArrow { width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); display: inline-block; margin-left: 5px; animation: arrowFade 1.5s infinite; }
#scrollDown .upDown { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }

@keyframes scrollAnim { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(14px); opacity: 0; } }
@keyframes arrowFade { 0% { opacity: 0.3; } 50% { opacity: 1; transform: rotate(45deg) translate(2px, 2px); } 100% { opacity: 0.3; } }

@media (max-width: 1024px) {
  #hero-section .hero-slide {padding-top: 120px;padding-bottom: 100px;}
#hero-section .hero-slide{
    min-height: 590px;
}
}


@media (max-width: 768px) {
    #hero-section{
    margin-top: 70px;
}
  /* 手機版 Banner：取消桌機 min-height / padding，避免 Slick fade 留下大面積空白 */
  #hero-section,
  #hero-section .hero-carousel,
  #hero-section .slick-list,
  #hero-section .slick-track{
    height: auto !important;
    min-height: 0 !important;
  }

  #hero-section .hero-slide{
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    display: block !important;
    position: relative;
    overflow: hidden;
  }

  /* 圖片本身直接決定 Banner 高度，不再用 cover 撐滿 70vh / 40vh */
  #hero-section .bannerimg{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  #hero-section .bannerimg img{
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    object-position: center center !important;
    display: block !important;
    aspect-ratio: 5/ 3;
  }

  /* overlay / 文字維持覆蓋，不參與高度計算 */
  #hero-section .hero-overlay,
  #hero-section .container{
    position: absolute;
    inset: 0;
  }

  #hero-section .container{
    flex-direction: column;
    text-align: center;
  }

  #hero-section .text-content{width:100%;}
  #hero-section .main-heading{font-size: 26px;margin-bottom:15px;font-weight:600;}
  #hero-section .sub-heading{font-size:14px;margin-bottom:0;}
  #hero-section .hero-label{font-size:13px;margin-bottom:10px;border-left:none;padding-left:0;}
  #scrollDown{justify-content:center;margin-top:15px;}

  /* dots 放在圖片底部內側，不再被巨大 slide 高度拉到底下 */
  #hero-section .slick-dots{
    bottom: 8px !important;
    z-index: 10;
  }

  /* 有影片時給影片一個合理比例，避免 absolute video 造成 0 高度 */
  #hero-section .hero-slide.videobox{
    aspect-ratio: 16 / 9;
  }

  #hero-section .hero-slide.videobox .bannerimg{
    position: absolute !important;
    inset: 0;
    height: 110% !important;
  }

  #hero-section .hero-slide.videobox .bannerimg img,
  #hero-section .hero-slide.videobox .slide-video{
    width: 110% !important;
    height: 110% !important;
    object-fit: cover !important;
  }
}


@media (max-width: 480px) {
    #hero-section{
    margin-top: 80px;
}
}