.sports-bg-mesh { position: fixed; inset: 0; background-image: radial-gradient(circle,#1a1a1a 1px,transparent 1px); background-size: 30px 30px; z-index: -1; pointer-events: none; }

#headBan{
    position: relative;
    background-color: #000;
}
#bannerArea{
    position: relative;
    overflow: hidden;
}
#bannerArea::before {
    content: "";
    position: absolute;
    bottom: 50px;
    right: 0%;
    z-index: 1;
    height: 50px;
    background: linear-gradient(to right, var(--complement) 0%, var(--primary) 110%);
    width: 150%;
    transform: skewY(-3deg);
  }

#bannerArea .hero-viewport { position: relative; height: 100vh; overflow: hidden; background: var(--black); display: block; }
#bannerArea .parallax-watermark {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);font-size: 20vw;font-weight: 900;color: rgba(var(--white-rgb),0.052);white-space: nowrap;z-index: 5;pointer-events: none;text-transform: uppercase;font-family: "Rajdhani", sans-serif;}
#bannerArea #hero-swipe-area { position: relative; height: 100vh; overflow: hidden; }
#bannerArea #hero-swipe-area .item {inset: 0;transition: opacity 1.2s ease-in-out;position: absolute;height: 100vh;display: flex;align-items: center;justify-content: center;overflow: hidden;background: var(--black);opacity: 0;}
#bannerArea #hero-swipe-area .item.active { opacity: 1; pointer-events: auto; }
#bannerArea .hero-slider-main { position: absolute; inset: 0; z-index: 0; cursor: grab; }
#bannerArea .hero-slider-main:active { cursor: grabbing; }
#bannerArea #hero-swipe-area .item .slide-article { position: absolute; inset: 0; opacity: 1 !important; pointer-events: none !important; transition: none !important; }
#bannerArea .slide-article img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4) brightness(0.35); user-select: none; }
#bannerArea .slide-article .pos_abs { position: absolute; inset: 0; z-index: 1; }
#bannerArea .slide-article .banner-bg,#bannerArea .slide-article img { transform: scale(1.1); transition: transform 8s linear; position: relative; z-index: 0; }
#bannerArea #hero-swipe-area .item.active .slide-article .banner-bg,#bannerArea #hero-swipe-area .item.active .slide-article img { transform: scale(1.18); }

#bannerArea .hero-vignette {position: absolute;inset: 0;background: linear-gradient(to top,var(--triadic2) 0%,transparent 60%,var(--triadic1) 100%);z-index: 2;pointer-events: none;}
#bannerArea .hero-content-box {position: relative;z-index: 10;text-align: center;max-width: var(--width-xl);padding: 0 6%;pointer-events: none;}
#bannerArea .hero-content-box a,#bannerArea .hero-content-box button { pointer-events: auto; }
#bannerArea #hero-swipe-area .item .hero-text-header { display: flex; flex-direction: column; align-items: center; }
@keyframes sportsSlideIn {
  0% { opacity: 0; transform: translateX(-70px) skewX(-20deg); filter: blur(10px); }
  70% { transform: translateX(8px) skewX(3deg); }
  100% { opacity: 1; transform: translateX(0) skewX(0deg); filter: blur(0); }
}
#bannerArea .hero-anim { opacity: 0; }
#bannerArea #hero-swipe-area .item.active.is-animating .hero-anim { animation: sportsSlideIn 0.8s var(--ease-out-expo) forwards; }
#bannerArea .d1 { animation-delay: 0.3s !important; }
#bannerArea .d2 { animation-delay: 0.5s !important; }
#bannerArea .d3 {animation-delay: 0.7s !important;}
#bannerArea .d4 { animation-delay: 0.9s !important; }
#bannerArea .perf-badge {background: linear-gradient(to right, var(--complement) 0%, var(--primary) 70%);color: var(--black);padding: 4px 60px;font-size: 19px;font-weight: 600;text-transform: uppercase;clip-path: polygon(10% 0,100% 0,90% 100%,0 100%);display: inline-block;margin-bottom: 25px;font-style: italic;letter-spacing: 1px;}
#bannerArea .main-title,#bannerArea .main-title span {font-size: clamp(35px,8vw,120px);font-weight: 900;text-transform: uppercase;font-style: italic;line-height: 0.88;margin-bottom: 30px;letter-spacing: -1px;color: var(--white);display: flex;gap: 27px;font-family: "Rajdhani", sans-serif;}
#bannerArea .main-title span {background: linear-gradient(to right, var(--complement) 0%, var(--primary) 70%);color: transparent;background-clip: text;-webkit-background-clip: text;}
#bannerArea .main-desc {font-size: clamp(18px,2.2vw,19px);color: rgba(var(--white-rgb),0.9);max-width: 750px;margin: 0 auto 55px;font-weight: 300;line-height: 1.8;text-align: center;}
#bannerArea .hero-cta-group { display: flex; justify-content: center; gap: 35px; align-items: center; }
#bannerArea .btn-action-primary {background: transparent;border: 2px solid var(--primary);padding: 16px 48px;color: var(--primary);font-weight: 600;text-transform: uppercase;text-decoration: none;letter-spacing: 3px;clip-path: polygon(10% 0,100% 0,90% 100%,0 100%);transition: all 0.4s ease;position: relative;}
#bannerArea .btn-action-primary:hover {color: var(--black);box-shadow: 0 0 30px rgb(61 61 61 / 40%);}
#bannerArea .btn-watch-film { color: var(--white); font-weight: 700; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid rgba(var(--white-rgb),0.2); padding-bottom: 5px; transition: border-color 0.3s ease; font-size: 15px; display: flex; align-items: center; }
#bannerArea .btn-watch-film:hover { border-color: var(--primary); }
#bannerArea .btn-action-primary::after {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(to right, var(--complement) 0%, var(--primary) 70%);z-index: -2;transition: 0.6s ease;}

#bannerArea .btn-action-primary:hover::after { left: 0; }
#bannerArea .btn-watch-film i { color: var(--primary); margin-left: 12px; font-size: 11px; }
#bannerArea .slider-pagination {position: absolute;bottom: 190px;right: 80px;z-index: 50;display: flex;gap: 15px;}
#bannerArea .pagi-dot {width: 55px;height: 3px;background: rgba(var(--white-rgb),0.1);cursor: pointer;position: relative;overflow: hidden;border: none;outline: none;padding: 1px 15px;}
#bannerArea .pagi-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--primary); box-shadow: 0 0 12px var(--primary); }
#bannerArea .pagi-dot.active.is-image .pagi-fill { animation: slideAutoProgress 5s linear forwards; }
@keyframes slideAutoProgress {
  from { width: 0%; }
  to { width: 100%; }
}

/* 下滑 */
#bannerArea .down-scroll-indicator { position: absolute; bottom: 45px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 20; }
#bannerArea .indicator-bar { width: 1px; height: 45px; background: linear-gradient(to bottom,var(--primary),transparent); animation: bounceBar 2.2s infinite; }
@keyframes bounceBar {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(12px); opacity: 0.5; }
}

#bannerArea iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#bannerArea video {position: relative;width: 120%;height: auto;right: 0;bottom: 0;top: 50%;left: 50%;transform: translate(-50%, -50%);object-fit: cover;filter: grayscale(0.1) brightness(0.7);user-select: none;}
.pro-cursor { width: 22px; height: 22px; border: 2px solid var(--primary); border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999; transition: transform 0.12s ease-out; display: none; }

#bannerArea .slide-article[data-slide-type="image"] img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width:1280px){
	#bannerArea video{width:auto;height:100%}
    #bannerArea .perf-badge{
    font-size: 14px;
}
}
@media (min-width:1024px) {
  .pro-cursor { display: block; }

}

@media (max-width:768px) {
  #bannerArea .slider-pagination {right: auto;left: 50%;transform: translateX(-50%);bottom: 50px;display: none;}
  #bannerArea .hero-cta-group {flex-direction: column;gap: 20px;width: 60%;margin: auto;}
  #bannerArea .btn-action-primary { width: 100%; text-align: center; padding: 14px 20px; }
  #bannerArea .pagi-dot { width: 35px; }
    #bannerArea .main-title, #bannerArea .main-title span{
    letter-spacing: 0px;
    gap: 13px;
    line-height: 70%;
    margin-bottom: 16px;
}
}