/** Shopify CDN: Minification failed

Line 132:0 All "@import" rules must come first

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:flagship-series (INDEX:19) */
/* Hotspot基础样式（优化PC/移动端独立半径） */
  .flagship-series__hotspots-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    pointer-events: none;
  }
  
  .flagship-series__hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    text-decoration: none;
    /* 桌面端坐标 */
    left: var(--hotspot-desktop-x);
    top: var(--hotspot-desktop-y);
    /* 桌面端尺寸 */
    width: calc(var(--hotspot-radius-desktop) * 2);
    height: calc(var(--hotspot-radius-desktop) * 2);
  }
  
  .flagship-series__hotspot-dot {
    /* 桌面端半径 */
    width: var(--hotspot-radius-desktop);
    height: var(--hotspot-radius-desktop);
    background-color: #00AEEF;
    border-radius: 50%;
    display: block;
    position: relative;
    box-shadow: 0 0 0 rgba(0, 174, 239, 0.4);
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(0, 174, 239, 0.7);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(0, 174, 239, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(0, 174, 239, 0);
    }
  }
  
  .flagship-series__hotspot-label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background-color: rgba(0,0,0,0.8);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
  }
  
  .flagship-series__hotspot-label::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0,0,0,0.8);
  }
  
  .flagship-series__hotspot:hover .flagship-series__hotspot-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-12px);
  }
  
  .flagship-series__hotspot:hover .flagship-series__hotspot-dot {
    background-color: #0088cc;
  }
  
  /* 响应式适配Hotspot（独立移动端半径） */
  @media (max-width: 768px) {
    .flagship-series__hotspot {
      left: var(--hotspot-mobile-x);
      top: var(--hotspot-mobile-y);
      /* 移动端尺寸 */
      width: calc(var(--hotspot-radius-mobile) * 2);
      height: calc(var(--hotspot-radius-mobile) * 2);
    }
    
    .flagship-series__hotspot-dot {
      /* 移动端半径 */
      width: var(--hotspot-radius-mobile);
      height: var(--hotspot-radius-mobile);
    }
    
    .flagship-series__hotspot-label {
      font-size: 11px;
      padding: 5px 10px;
    }
  }
  
  @media (max-width: 480px) {
    .flagship-series__hotspot-label {
      font-size: 10px;
      padding: 4px 8px;
    }
  }
/* END_SECTION:flagship-series */

/* START_SECTION:hero (INDEX:26) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
  
  .hero-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
  }
  
  .hero-wrapper:active {
    cursor: grabbing;
  }
  
  .hero {
    position: relative;
    width: 100%;
    aspect-ratio: 2.4 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .hero-content {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    max-width: 502px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 20px;
  }
  
  .hero-logo-container {
    margin-bottom: 15px;
  }
  
  .hero-brand-logo {
    width: 80px;
    height: 53.33px;
    display: block;
  }
  
  /* 增加选择器特异性，直接针对h1和p标签 */
  h1.hero-heading, h2.hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 1.22;
    color: #000000;
    margin: 0;
    font-size: var(--heading-font-size-desktop);
    display: block;
    width: auto;
    height: auto;
  }
  
  p.hero-subheading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    line-height: 1.22;
    color: #686868;
    margin: 0;
    display: block;
    width: auto;
    height: auto;
  }
  
  /* 特定文本元素的字体大小 */
  p.hero-welcome-text {
    font-size: var(--welcome-font-size-desktop);
  }
  
  p.hero-main-subheading {
    font-size: var(--subheading-font-size-desktop);
  }
  
  /* CTA Button Styles */
  .hero-cta-button {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    border-radius: var(--cta-border-radius);
    background-color: var(--cta-bg-color);
    color: var(--cta-text-color);
    font-size: var(--cta-font-size-desktop);
    padding: var(--cta-padding-y-desktop) var(--cta-padding-x-desktop);
    margin-top: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    outline: none;
  }
  
  .hero-cta-button:hover,
  .hero-cta-button:focus {
    background-color: var(--cta-hover-bg);
    color: var(--cta-hover-text);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  }
  
  .hero-cta-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* 图片墙轮播样式 */
  .hero-image-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
  }
  
  .carousel-track {
    display: flex;
    transition: transform 0.3s ease-out;
    height: 100%;
  }
  
  .carousel-slide {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
  }
  
  .hero-image-link {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Hotspots Container */
  .hero-hotspots-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    pointer-events: none;
  }

  /* Individual Hotspot - 基础样式 */
  .hero-hotspot {
    position: absolute;
    width: calc(var(--hotspot-radius, 20px) * 2);
    height: calc(var(--hotspot-radius, 20px) * 2);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    text-decoration: none;
    /* PC端位置 */
    left: var(--hotspot-1-x-desktop, 50%);
    top: var(--hotspot-1-y-desktop, 50%);
  }

  /* Invisible rectangular click area - reuses the same click logic as hotspots */
  .hero-hotspot-area {
    position: absolute;
    display: block;
    cursor: pointer;
    pointer-events: auto;
    background: transparent;
    text-decoration: none;
    /* PC端位置与尺寸（X/Y 为矩形左上角） */
    left: var(--area-1-x-desktop, 50%);
    top: var(--area-1-y-desktop, 50%);
    width: var(--area-1-w-desktop, 20%);
    height: var(--area-1-h-desktop, 20%);
  }

  /* 调试模式：高亮显示区域热区 */
  .hero-area-debug .hero-hotspot-area {
    background: rgba(0, 174, 239, 0.25);
    border: 1px dashed #00AEEF;
    outline: 1px dashed rgba(0, 174, 239, 0.5);
    outline-offset: 2px;
  }

  /* 移动端切换为移动端坐标与尺寸 */
  @media (max-width: 767px) {
    .hero-hotspot-area {
      left: var(--area-1-x-mobile, 50%);
      top: var(--area-1-y-mobile, 50%);
      width: var(--area-1-w-mobile, 20%);
      height: var(--area-1-h-mobile, 20%);
    }
  }
  
  /* 为不同hotspot设置PC端位置 */
  .hero-hotspot[data-hotspot="2"] {
    left: var(--hotspot-2-x-desktop, 30%);
    top: var(--hotspot-2-y-desktop, 70%);
  }
  
  .hero-hotspot[data-hotspot="3"] {
    left: var(--hotspot-3-x-desktop, 70%);
    top: var(--hotspot-3-y-desktop, 70%);
  }

  .hero-hotspot[data-hotspot="4"] {
  left: var(--hotspot-4-x-desktop, 50%);
  top: var(--hotspot-4-y-desktop, 50%);
}

  /* Hotspot Pulse Animation */
  .hotspot-pulse {
    position: absolute;
    width: var(--hotspot-radius, 20px);
    height: var(--hotspot-radius, 20px);
    background-color: #00AEEF;
    border-radius: 50%;
    animation: hotspotPulse 2s ease-out infinite;
  }

  .hotspot-pulse::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--hotspot-radius, 20px) * 2);
    height: calc(var(--hotspot-radius, 20px) * 2);
    background-color: rgba(0, 174, 239, 0.3);
    border-radius: 50%;
    animation: hotspotPulseRing 2s ease-out infinite;
  }

  @keyframes hotspotPulse {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.1);
      opacity: 0.8;
    }
  }

  @keyframes hotspotPulseRing {
    0% {
      transform: translate(-50%, -50%) scale(0.5);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(1.5);
      opacity: 0;
    }
  }

  /* Hotspot Label */
  .hotspot-label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
  }

  .hotspot-label::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
  }

  .hero-hotspot:hover .hotspot-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-12px);
  }

  .hero-hotspot:hover .hotspot-pulse {
    background-color: #0088cc;
  }

  /* Hide entire dot when no-dot class is present */
  .hero-hotspot.no-dot .hotspot-pulse {
    display: none;
  }

  .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  
  /* 默认显示桌面端图片，隐藏移动端图片 */
  .hero-image-mobile {
    display: none;
  }
  
  .hero-image-desktop {
    display: block;
  }
  
  /* 轮播控制按钮 */
  .carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s ease;
    display: none;
  }
  
  .carousel-control:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
  }
  
  .carousel-control.prev {
    left: 20px;
  }
  
  .carousel-control.next {
    right: 20px;
  }
  
  .carousel-control::before,
  .carousel-control::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 3px;
    background-color: #000;
    top: 50%;
  }
  
  .carousel-control.prev::before,
  .carousel-control.prev::after {
    left: 15px;
    transform-origin: left center;
  }
  
  .carousel-control.next::before,
  .carousel-control.next::after {
    right: 15px;
    transform-origin: right center;
  }
  
  .carousel-control.prev::before {
    transform: rotate(-45deg) translateY(-50%);
  }
  
  .carousel-control.prev::after {
    transform: rotate(45deg) translateY(-50%);
  }
  
  .carousel-control.next::before {
    transform: rotate(45deg) translateY(-50%);
  }
  
  .carousel-control.next::after {
    transform: rotate(-45deg) translateY(-50%);
  }
  
  /* 指示器样式 */
  .slider-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 10;
  }
  
  .indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  
  .indicator.active {
    background-color: #00AEEF;
    transform: scale(1.2);
  }
  
  .indicator:focus {
    outline: 2px solid #00AEEF;
    outline-offset: 2px;
  }
  
  /* 响应式样式 */
  
  /* 超大型桌面设备 */
  @media (min-width: 1400px) {
    .hero-content {
      left: 200px;
      width: 550px;
    }
  }
  
  /* 大型桌面设备 */
  @media (max-width: 1399px) and (min-width: 1200px) {
    .hero-content {
      left: 150px;
      width: 502px;
    }
  }
  
  /* 中型桌面设备 */
  @media (max-width: 1199px) and (min-width: 992px) {
    .hero-content {
      left: 100px;
      width: 450px;
    }
    
    .carousel-control {
      width: 45px;
      height: 45px;
    }
  }
  
  /* 小型桌面设备/平板横屏 */
  @media (max-width: 991px) and (min-width: 768px) {
    .hero-content {
      left: 100px;
      width: 400px;
    }
    
    .carousel-control {
      width: 45px;
      height: 45px;
    }
  }
  
  /* 平板竖屏 */
  @media (max-width: 767px) and (min-width: 640px) {
    .hero {
      height: auto;
      aspect-ratio: 1/1.2;
    }
    
    .hero-content {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      width: calc(100% - 120px);
      max-width: 502px;
      text-align: center;
      padding: 20px;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 10px;
    }
    
    /* 移动端字体大小 */
    h1.hero-heading, h2.hero-heading {
      font-size: var(--heading-font-size-mobile);
    }
    
    p.hero-welcome-text {
      font-size: var(--welcome-font-size-mobile);
    }
    
    p.hero-main-subheading {
      font-size: var(--subheading-font-size-mobile);
    }
    
    /* 移动端CTA按钮样式 */
    .hero-cta-button {
      font-size: var(--cta-font-size-mobile);
      padding: var(--cta-padding-y-mobile) var(--cta-padding-x-mobile);
      margin-top: 15px;
      display: inline-block;
    }
    
    /* 切换到移动端图片 */
    .hero-image-desktop {
      display: none;
    }
    
    .hero-image-mobile {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    /* 移动端Hotspot位置 */
    .hero-hotspot {
      left: var(--hotspot-1-x-mobile, 50%);
      top: var(--hotspot-1-y-mobile, 50%);
    }
    
    .hero-hotspot[data-hotspot="2"] {
      left: var(--hotspot-2-x-mobile, 30%);
      top: var(--hotspot-2-y-mobile, 70%);
    }
    
    .hero-hotspot[data-hotspot="3"] {
      left: var(--hotspot-3-x-mobile, 70%);
      top: var(--hotspot-3-y-mobile, 70%);
    }

    .hero-hotspot[data-hotspot="4"] {
  left: var(--hotspot-4-x-mobile, 50%);
  top: var(--hotspot-4-y-mobile, 50%);
}
    
    /* 移动端Hotspot样式优化 */
    .hero-hotspot {
      --hotspot-radius: 25px; /* 移动端增大热点尺寸，更容易点击 */
    }
    
    .hotspot-label {
      font-size: 11px;
      padding: 5px 10px;
    }
    
    .slider-indicators {
      gap: 10px;
    }
    
    .carousel-control {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .carousel-control.prev {
      left: 15px;
    }
    
    .carousel-control.next {
      right: 15px;
    }
  }
  
  /* 手机横屏 */  
  @media (max-width: 639px) and (min-width: 480px) {    
    .hero {      
      height: auto;      
      aspect-ratio: 1/1.2;    
    }    
    
    .hero-content {      
      position: absolute;      
      left: 50%;      
      top: 0;      
      transform: translateX(-50%);      
      width: calc(100% - 80px);      
      text-align: center;      
      padding: 15px;      
      border-radius: 8px;    
    }    
    
    .hero-brand-logo {      
      margin: 0 auto;    
    }    
    
    /* 移动端字体大小 */
    h1.hero-heading, h2.hero-heading {
      font-size: var(--heading-font-size-mobile);
    }
    
    p.hero-welcome-text {
      font-size: var(--welcome-font-size-mobile);
    }
    
    p.hero-main-subheading {
      font-size: var(--subheading-font-size-mobile);
    }
    
    /* 移动端CTA按钮样式 */
    .hero-cta-button {
      font-size: var(--cta-font-size-mobile);
      padding: var(--cta-padding-y-mobile) var(--cta-padding-x-mobile);
      margin-top: 15px;
      display: inline-block;
    }
    
    /* 切换到移动端图片 */    
    .hero-image-desktop {      
      display: none;    
    }    
    
    .hero-image-mobile {      
      display: block;      
      width: 100%;      
      height: 100%;      
      object-fit: contain;    
    }
    
    /* 移动端Hotspot位置 */
    .hero-hotspot {
      left: var(--hotspot-1-x-mobile, 50%);
      top: var(--hotspot-1-y-mobile, 50%);
    }
    
    .hero-hotspot[data-hotspot="2"] {
      left: var(--hotspot-2-x-mobile, 30%);
      top: var(--hotspot-2-y-mobile, 70%);
    }
    
    .hero-hotspot[data-hotspot="3"] {
      left: var(--hotspot-3-x-mobile, 70%);
      top: var(--hotspot-3-y-mobile, 70%);
    }
    
    .hero-hotspot[data-hotspot="4"] {
  left: var(--hotspot-4-x-mobile, 50%);
  top: var(--hotspot-4-y-mobile, 50%);
}
    
    /* 移动端Hotspot样式优化 */
    .hero-hotspot {
      --hotspot-radius: 30px; /* 手机端进一步增大热点尺寸 */
    }
    
    .hotspot-label {
      font-size: 10px;
      padding: 4px 8px;
    }
    
    .slider-indicators {
      gap: 8px;
    }
    
    .carousel-control {
      width: 35px;
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .carousel-control.prev {
      left: 10px;
    }
    
    .carousel-control.next {
      right: 10px;
    }
    
    .indicator {
      width: 9px;
      height: 9px;
    }
  }
  
  /* 手机竖屏 */  
  @media (max-width: 479px) {    
    .hero {      
      height: auto;      
      aspect-ratio: 1/1.2;    
    }    
    
    .hero-content {      
      position: absolute;      
      left: 50%;      
      top: 0;      
      transform: translateX(-50%);      
      width: calc(100% - 60px);      
      padding: 15px;      
      border-radius: 8px;      
      text-align: center;    
    }    
    
    /* 移动端字体大小 */
    h1.hero-heading, h2.hero-heading {
      font-size: var(--heading-font-size-mobile);
    }
    
    p.hero-welcome-text {
      font-size: var(--welcome-font-size-mobile);
    }
    
    p.hero-main-subheading {
      font-size: var(--subheading-font-size-mobile);
    }
    
    /* 移动端CTA按钮样式 */
    .hero-cta-button {
      font-size: var(--cta-font-size-mobile);
      padding: var(--cta-padding-y-mobile) var(--cta-padding-x-mobile);
      margin-top: 15px;
      display: inline-block;
      width: 100%;
    }
    
    /* 切换到移动端图片 */    
    .hero-image-desktop {      
      display: none;    
    }    
    
    .hero-image-mobile {      
      display: block;      
      width: 100%;      
      height: 100%;      
      object-fit: contain;    
    }
    
    /* 移动端Hotspot位置 */
    .hero-hotspot {
      left: var(--hotspot-1-x-mobile, 50%);
      top: var(--hotspot-1-y-mobile, 50%);
    }
    
    .hero-hotspot[data-hotspot="2"] {
      left: var(--hotspot-2-x-mobile, 30%);
      top: var(--hotspot-2-y-mobile, 70%);
    }
    
    .hero-hotspot[data-hotspot="3"] {
      left: var(--hotspot-3-x-mobile, 70%);
      top: var(--hotspot-3-y-mobile, 70%);
    }

    .hero-hotspot[data-hotspot="4"] {
  left: var(--hotspot-4-x-mobile, 50%);
  top: var(--hotspot-4-y-mobile, 50%);
}
    
    /* 移动端Hotspot样式优化 */
    .hero-hotspot {
      --hotspot-radius: 35px; /* 手机竖屏最大化热点尺寸，提升可点击性 */
    }
    
    .hotspot-label {
      font-size: 9px;
      padding: 3px 7px;
      white-space: normal;
      width: max-content;
      max-width: 120px;
      text-align: center;
    }
    
    .hero-logo-container {
      display: flex;
      justify-content: center;
      margin-bottom: 10px;
    }
    
    .hero-brand-logo {
      width: 50px;
      height: 33.33px;
    }
    
    .slider-indicators {
      gap: 8px;
      bottom: 20px;
    }
    
    .indicator {
      width: 8px;
      height: 8px;
    }
  }
  
  /* 高对比度模式支持 */
  @media (prefers-contrast: high) {
    .hero-content {
      background-color: rgba(255, 255, 255, 0.95);
      border: 2px solid #000;
    }
    
    h1.hero-heading {
      color: #000 !important;
    }
    
    p.hero-subheading {
      color: #333 !important;
    }
    
    .hero-cta-button {
      border: 2px solid #000;
    }
    
    .hotspot-pulse {
      background-color: #000;
    }
    
    .hotspot-pulse::before {
      background-color: rgba(0, 0, 0, 0.3);
    }
  }
  
  /* 减少动画偏好支持 */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    
    .hero-cta-button:hover,
    .hero-cta-button:focus {
      transform: none;
      box-shadow: none;
    }
    
    .hero-hotspot:hover .hotspot-label {
      transform: translateX(-50%) translateY(-8px);
    }
  }
/* END_SECTION:hero */