/**
 * Common CSS - 通用样式
 * 包含设计系统变量和通用工具类
 */

/* ========================================
   CSS 变量定义 - 设计令牌 (Design Tokens)
   ======================================== */
   :root {
    /* ========================================
       颜色系统 (Color System)
       ======================================== */
    
    /* 主色调 */
    --color-primary: #3784C6;
    --color-primary-dark: #2765AE;
    
    /* 提示文字颜色 */
    --color-text-tertiary: #FF0000;
    
    /* 文本颜色 */
    --color-text-white: #ffffff;
    --color-text-primary: #383838;
    --color-text-secondary: #969696;
    --color-text-tertiary: #474747;
    --color-text-quaternary: #868686;
    --color-text-footer-title: #2C2C2C;
    --color-text-footer-link: #565656;
    --color-text-qrcode: #373737;
    
    /* 表单相关颜色 */
    --color-form-border: #E2E2E2;
    --color-form-text: #868686;
    --color-search-form-border: #E8E8E8;
    
    /* 背景颜色 */
    --color-bg-copyright: #2765AE;
    --color-btnbg-hover: #2765ae;
    --color-yellow: #FFB362;
    --color-bg-grey: #F7FAFC;
    
    /* ========================================
       字体大小系统 (Font Size System)
       ======================================== */
    --font-size-xs-11px: 11px;
    --font-size-sm-13px: 13px;
    --font-size-base-14px: 14px;
    --font-size-md-15px: 15px;
    --font-size-lg-16px: 16px;
    --font-size-xl-18px: 18px;
    --font-size-2xl-20px: 20px;
    --font-size-3xl-22px: 22px;
    --font-size-4xl-25px: 25px;
    --font-size-5xl-30px: 30px;
    --font-size-6xl-36px: 36px;
    --font-size-7xl-50px: 50px;
    --font-size-8xl-64px: 64px;
    
    /* ========================================
       圆角系统 (Border Radius System)
       ======================================== */
    --radius-sm: 4px;
    --radius-md: 10px;
    
    /* ========================================
       间距系统 (Spacing System)
       ======================================== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    
    /* ========================================
       边框系统 (Border System)
       ======================================== */
    --border-width-thin: 1px;
    --border-width-base: 2px;
    --border-width-thick: 3px;
    --border-style: solid;
    --border-color-form: var(--color-form-border);
    
    /* 表单边框快捷变量 */
    --border-form: var(--border-width-base) var(--border-style) var(--border-color-form);
    
    /* ========================================
       过渡动画 (Transitions)
       ======================================== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    
    /* ========================================
       阴影系统 (Shadow System)
       ======================================== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  
  /* ========================================
     基础样式
     ======================================== */
  body { /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',    'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',    'Segoe UI Emoji', 'Segoe UI Symbol'; */ font-size: var(--font-size-lg-16px); color: var(--color-text-primary); background-color: var(--color-text-white); }
  
  /* ========================================
     通用工具类
     ======================================== */
  
  /* 文本颜色工具类 */
  .text-white { color: var(--color-text-white); }
  .text-primary { color: var(--color-text-primary); }
  .text-secondary { color: var(--color-text-secondary); }
  .text-tertiary { color: var(--color-text-tertiary); }
  .text-quaternary { color: var(--color-text-quaternary); }
  .text-footer-title { color: var(--color-text-footer-title); }
  .text-footer-link { color: var(--color-text-footer-link); }
  .text-qrcode { color: var(--color-text-qrcode); }
  
  /* 字体大小工具类 */
  .text-xs { font-size: var(--font-size-xs-11px); }
  .text-sm { font-size: var(--font-size-sm-14px); }
  .text-base { font-size: var(--font-size-lg-16px); }
  .text-md { font-size: var(--font-size-md-15px); }
  .text-xl { font-size: var(--font-size-xl-18px); }
  .text-2xl { font-size: var(--font-size-2xl-20px); }
  .text-3xl { font-size: var(--font-size-3xl-22px); }
  .text-4xl { font-size: var(--font-size-4xl-25px); }
  .text-5xl { font-size: var(--font-size-5xl-30px); }
  .text-6xl { font-size: var(--font-size-6xl-36px); }
  .text-7xl { font-size: var(--font-size-7xl-50px); }
  .text-8xl { font-size: var(--font-size-8xl-64px); }
  
  /* 圆角工具类 */
  .rounded-sm { border-radius: var(--radius-sm); }
  .rounded-md { border-radius: var(--radius-md); }
  
  /* 表单样式 */
  .form-input, .form-textarea, .form-select { border: var(--border-form); border-radius: var(--radius-sm); padding: var(--spacing-sm) var(--spacing-md); color: var(--color-form-text); font-size: var(--font-size-base-14px); transition: border-color var(--transition-base); }
  .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--color-primary); color: var(--color-text-primary); }
  
  /* 主色调背景 */
  .bg-primary { background-color: var(--color-primary); }
  .bg-primary-dark { background-color: var(--color-primary-dark); }
  
  /* 版权背景 */
  .bg-copyright { background-color: var(--color-bg-copyright); }
  
  /* 清除浮动 */
  .clearfix::after { content: ''; display: table; clear: both; }
  
  /* 隐藏但保持可访问性 */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
  
  /* ========================================
     头部导航样式
     ======================================== */
  .header { position: absolute; top: 0; left: 0; right: 0; z-index: 10; background: linear-gradient(180deg, #021120 18%, rgba(0, 0, 0, 0) 95%); width: 100%; height: 100px; transition: background var(--transition-base), box-shadow var(--transition-base); }
  .header.header-scrolled { position: fixed; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); }
  .header-container { display: flex; align-items: center; justify-content: space-between; padding-left: 19.2vw; padding-right: 9vw; height: 100%; } 
  /* .header-container { display: flex; align-items: center; justify-content: space-between;; height: 100%;max-width: 1200px; margin: auto;}  */
  /* Logo 区域：默认与滚动双 logo 切换 */
  .header-logo-wrap { position: relative; display: flex; align-items: center; width: 132px; height: 44px; }
  .header-logo { width: 132px; height: 44px; background-size: contain; background-repeat: no-repeat; background-position: center; transition: opacity var(--transition-base); }
  .header-logo-scrolled { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; }
  .header.header-scrolled .header-logo-default { opacity: 0; visibility: hidden; }
  .header.header-scrolled .header-logo-scrolled { position: absolute; left: 0; top: 0; opacity: 1; visibility: visible; }

  
  /* =======================导航菜单=================== */
  .header-nav { flex: 1; display: flex; justify-content: flex-end; padding-right: 70px; }
  .nav-list { display: flex; align-items: center; gap: 18px; }
  .nav-item { list-style: none; }
  .nav-link { color: var(--color-text-white); font-size: var(--font-size-lg-16px); line-height: 1; margin: var(--spacing-sm) var(--spacing-md); display: block; opacity: 0.7; padding: 9px 0; border-bottom: 3px solid transparent; transition: all var(--transition-base); }
  .nav-link.active { opacity: 1; font-weight: 600; border-bottom: 3px solid #fff; }
  .nav-link:hover { opacity: 1; font-weight: 600; border-bottom: 3px solid #fff; }
  /* 滚动后导航：深色字体与高亮 */
  .header.header-scrolled .nav-link { color: #272727; opacity: 0.85; }
  .header.header-scrolled .nav-link:hover,
  .header.header-scrolled .nav-link.active { color: #303030; opacity: 1; font-weight: 600; border-bottom-color: #303030; }
  
  /* =======================二三级菜单=================== */
  .nav-item {
      position: relative;
      padding-bottom: 0; /* 进一步扩大hover区域 */
  }
  .nav-sub-dropdown-column .nav-sub-dropdown-item:nth-child(2n+1) {
     border-right: 1px solid #D8D8D8;
  }
  /* 二级菜单容器 */
  .nav-dropdown {
      position: absolute;
      top: 100%;
      left: -100%;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      min-width: 297px;
      z-index: 1000;
      padding: 22px 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(0);
      transition: all var(--transition-base);
      margin-top: 0; /* 移除间距，确保与一级菜单无缝连接 */
  }
  .nav-item.product-dropdown:nth-child(2) .nav-dropdown {
    min-width: 202px;
    left: -50%;
  }
  .nav-item.product-dropdown:last-child .nav-dropdown {
    min-width: 200px;
    left: -50%;
  }
  .nav-item.product-dropdown:nth-child(2) .nav-dropdown .nav-dropdown-link {
    text-align: center;
  }
  .nav-item.product-dropdown:last-child .nav-dropdown .nav-dropdown-link {
    text-align: center;
  }
  /* 增加导航链接的hover区域 */
  .nav-link {
      position: relative;
      z-index: 1;
  }
  
  .nav-item:hover .nav-dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }
  
  /* 二级菜单项 */
  
  .nav-dropdown-item {
      list-style: none;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--transition-base);

  }
  .nav-dropdown-link-title{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      font-size: var(--font-size-lg-16px);
      padding: 0 0 24px 0;
      border-bottom: 1px solid #D8D8D8;
      gap: 8px;
  }
  /* .nav-item:nth-child(5) .nav-dropdown {
    display: none;
  } */
  .nav-dropdown.hide {
    display: none;
  }
  .nav-dropdown-link {
      display: inline-block;
      padding: 12px 16px;
      text-decoration: none;
      font-size: var(--font-size-base-14px);
      color: #565656;
      transition: all var(--transition-base);
      text-align: left;
      width: 200px;
  }
  
  .nav-dropdown-link:last-child {
      border-bottom: none;
  }
  
  .nav-dropdown-item:hover .nav-dropdown-link {
      color: #fff;
  }
  .nav-dropdown-item:hover {
    background-color: #3581dc;
    color: #fff;
    border-radius: 5px;
} 
  /* 关于我们菜单特殊样式 */
  
  
  .nav-item.about-dropdown .nav-dropdown-link {
      padding: 14px 20px;
      font-size: var(--font-size-lg-16px);
      text-align: center;
  }
  
  .nav-item.about-dropdown .nav-dropdown-link:hover {
      background-color: #3581dc;
      border-radius: 5px;
      color: #fff;
  }
  
  /* 带三级菜单的菜单项 */
  .nav-dropdown-item.has-submenu {
      position: relative;
  }
  
  .nav-dropdown-item.has-submenu::after {
      content: '';
      position: absolute;
      right: 40px;
      top: 50%;
      transform: translateY(-50%);
      width: 8px;
       height: 8px;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="12.589971542358398" height="15.19999885559082" viewBox="0 0 12.589971542358398 15.199999"><path d="M9.6993217,7.599999L0.47108101999999996,13.351326L1.52891898,15.048671L13.480619,7.599999L1.52891898,0.15132773L0.47108101999999996,1.84867227L9.6993217,7.599999Z" fill-rule="evenodd" fill="%23565656" fill-opacity="1"/></svg>');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      transition: all var(--transition-base);
  }
  
  /* 链接hover时SVG图标变白色 */
  .nav-dropdown-item.has-submenu:hover::after {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="12.589971542358398" height="15.19999885559082" viewBox="0 0 12.589971542358398 15.199999"><path d="M9.6993217,7.599999L0.47108101999999996,13.351326L1.52891898,15.048671L13.480619,7.599999L1.52891898,0.15132773L0.47108101999999996,1.84867227L9.6993217,7.599999Z" fill-rule="evenodd" fill="%23FFFFFF" fill-opacity="1"/></svg>');
  }
  
  /* 三级菜单容器 */
  .nav-sub-dropdown {
      position: absolute;
      top: 0;
      left: 101%;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      z-index: 1001;
      opacity: 0;
      visibility: hidden;
      transform: translateX(0);
      transition: all var(--transition-base);
      width: auto;
      min-width: 0; /* 移除最小宽度限制 */
      white-space: nowrap; /* 防止内容换行 */
      padding: 22px 0;
  }
  /* .product-dropdown .nav-sub-dropdown {
         min-width: 556px;
  } */
  /* .video-dropdown .nav-sub-dropdown {
         min-width: 556px;
  } */
  /* 三级菜单列容器 */
  .nav-sub-dropdown-columns {
      display: flex;
       width: auto; /* 让容器根据内容调整宽度 */
  
  }
  
  /* 三级菜单列 */
  .nav-sub-dropdown-column {
      flex: 1;
      flex: 0 1 auto; 
      display: grid; 
      grid-template-columns: repeat(1, 1fr); 
}

.nav-sub-dropdown-column.two-columns {
    /* 当有 'two-columns' 类时，一行两个 */
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* 三级菜单分隔线 */
  .nav-sub-dropdown-divider {
      width: 1px;
      background-color: #e0e0e0;
      margin: 10px 0;
  }
  
  /* 三级菜单激活状态 */
  .nav-sub-dropdown-link-active {
      background-color: #3581dc !important;
      color: #fff !important;
      border-radius: 5px;
  }
  
  .nav-dropdown-item.has-submenu:hover .nav-sub-dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
  }
  
  /* 三级菜单项 */
  .nav-sub-dropdown-item {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: center;
  
  }
  
  .nav-sub-dropdown-link {
      display: block;
      padding: 10px 44px;
      color: #565656;
      text-decoration: none;
      font-size: 13px;
      transition: all var(--transition-base);
      text-align: center;
  }
  
  .nav-sub-dropdown-link:last-child {
      border-bottom: none;
  }
  
  .nav-sub-dropdown-link:hover {
      background-color: #3581dc;
      color: #fff;
      border-radius: 5px;
  }
  
  /* 产品中心菜单特殊样式 */
  /* .nav-item.product-dropdown .nav-dropdown {
      min-width: 297px;
  } */
  
  .nav-item.product-dropdown .nav-dropdown-link {
      padding: 12px 16px;
      font-size: var(--font-size-base-14px);
  }
  
  /* .nav-item.product-dropdown .nav-dropdown-item.has-submenu .nav-dropdown-link {
      background-color:  #3581dc;
      font-weight: 500;
      color: #fff;
      border-radius: 5px;
  } */
  
  .nav-item.product-dropdown .nav-sub-dropdown {
      /* min-width: 556px; */
      padding: 22px 0;
  }
  
  .nav-item.product-dropdown .nav-sub-dropdown-link {
      padding: 10px 48px;
      width: 280px;
      text-align: left;

  }
  
  /* =======================搜索框区域=================== */
  .header-search { position: relative; display: flex; align-items: center; width: 212px; height: 31px; border: 1.5px solid var(--color-search-form-border); border-radius: 30px;}
  .search-icon-btn { position: absolute; left: -1px; top: -1px; bottom: 0; width: 44px; height: 32px; background-color: #fff; border: none; border-radius: 152px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; z-index: 1; transition: background-color var(--transition-base); }
  .search-icon-btn img { transition: all var(--transition-base); }
  .search-icon-btn:hover img { transform: translate(-50%, -50%) scale(1.1); }
  .search-icon { width: 16px; height: 16px; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .search-icon-scrolled { opacity: 0; visibility: hidden; }
  .header.header-scrolled .search-icon-default { opacity: 0; visibility: hidden; }
  .header.header-scrolled .search-icon-scrolled { opacity: 1; visibility: visible; }
  .search-input { flex: 1; height: 100%; padding: 0; padding-left: 58px; padding-right: 12px; background: transparent; border: none; color: var(--color-text-white); font-size: var(--font-size-lg-16px); transition: none; }
  .search-input::placeholder { color: rgba(255, 255, 255, 0.6); }
  .search-input:focus { outline: none; background: transparent; }
  input.search-input {
      background-color: transparent;
  }
  /* 滚动后搜索框：深色边框与文字 */
  .header.header-scrolled .header-search { border: 1.5px solid #5A5A5A; }
  .header.header-scrolled .search-icon-btn { background: #367CD0; }
  .header.header-scrolled .search-input { color: #272727; }
  .header.header-scrolled .search-input::placeholder { color: rgba(39, 39, 39, 0.5); }
  /* ==================公共底部============= */
  footer { background-color: var(--color-text-white); border-top: 1px solid #E8E8E8; }
  .footer-content { padding: 73px 0 46px; display: flex; justify-content: space-between; align-items: flex-start; gap: 150px; max-width: 1260px;margin: 0 auto;}
  .footer-nav { display: flex; gap: var(--spacing-2xl); flex: 1; }
  .footer-nav-column { flex: 1; }
  .footer-nav-title { color: var(--color-text-footer-title); font-size: var(--font-size-2xl-20px);margin-bottom: 40px; }
  .footer-nav-links { display: flex; flex-direction: column; gap: var(--spacing-sm); }
  .footer-nav-link { color: #565656; font-size: var(--font-size-base-14px); text-decoration: none; transition: color var(--transition-base); line-height: 30px; }
  .footer-nav-link:hover { color: var(--color-primary); }
  .footer-qrcodes { display: flex; gap: var(--spacing-xl); align-items: flex-start; }
  .qrcode-container { text-align: center; }
  .qrcode-image { width: 140px; height: 140px; margin-bottom: var(--spacing-xs); display: block; }
  .qrcode-label { color: var(--color-text-qrcode); font-size: 13px; margin: 0; }
  .company-info { margin-top: var(--spacing-lg); text-align: right; color: var(--color-text-quaternary); font-size: var(--font-size-xs-11px); }
  .company-address { font-size: 14px;color: var(--color-text-footer-link); padding-top: 12px;border-top: 1px solid #d1d1d1;}
  .company-address-title {font-size: 14px;color: var(--color-text-footer-link);display: flex;align-items: center;justify-content: flex-end;gap: 6px;padding-bottom: 8px;}
  .footer-copyright{display: flex;align-items: center;  max-width: 1260px; margin: 0 auto; color: var(--color-text-white); font-size: var(--font-size-base-14px);gap: 66px;height: 100%;}
  .footer-copyright-content {background-color: var(--color-bg-copyright);height: 80px;}

  /* ========================================
     WOW.js 滚动动画基础样式
     确保动画不影响布局和性能
     ======================================== */
  /* WOW.js 动画元素：未触发时保持可见但不影响布局 */
 
  
  /* 防止动画元素在移动端造成性能问题 */
  @media (prefers-reduced-motion: reduce) {
      .wow {
          animation: none !important;
          transition: none !important;
      }
  }