/* 基础样式 */
/* 移除Swiper导航按钮的点击高亮效果 */
.swiper-button-prev,
.swiper-button-next {
    /* 针对WebKit内核浏览器（Chrome, Safari, Edge等） */
    -webkit-tap-highlight-color: transparent;
    /* 标准属性 */
    tap-highlight-color: transparent;
    /* 移除可能的焦点轮廓（可选，根据设计需求） */
    outline: none;
}

/* 如果你还想移除分页器的点击高亮 */
.swiper-pagination-dots .swiper-pagination-bullet {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    outline: none;
}
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', system-ui, sans-serif;
    }
    
    body {
      background-color: #f8fafc;
      color: #1e293b;
      overflow-x: hidden;
    }
    .carousel-link {
      display: block;
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 3;
    }
    .container {
      /*max-width: 1600px;*/
      margin: 0 auto;
      padding: 0 70px;
    }
    
    /* 头部菜单样式 - 透明悬浮在轮播图上方 */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: 18px 0;
      background: transparent;
      z-index: 1000;
      transition: all 0.3s ease;
    }
    
    /* 滚动时菜单样式变化 */
    .navbar.scrolled {
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 12px 0;
    }
    
    .nav-container {
      display: flex;
      justify-content: flex-end;
      /*justify-content: space-between;*/
      /*align-items: center;*/
    }
    
    .logo {
      text-decoration: none;
      color: white;
      font-size: 24px;
      font-weight: 700;
      display: flex;
      align-items: center;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      transition: color 0.3s ease, text-shadow 0.3s ease;
    }
    
    .navbar.scrolled .logo {
      color: #2563eb;
      text-shadow: none;
    }
    
    .logo-icon {
      margin-right: 10px;
      font-size: 28px;
    }
    
    /* 桌面端菜单 */
    .desktop-menu {
      display: none;
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .desktop-menu li {
      position: relative;
      display: inline-block;
      margin: 0 10px;
    }
    
    /* 菜单项容器 - 垂直排列中英文 */
    .menu-item {
      text-align: center;
      padding: 5px 10px;
      display: inline-block;
    }
    
    /* 中文菜单项 */
    .menu-cn {
      color: white;
      font-weight: 500;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
      display: block;
      margin-bottom: 2px;
    }


    
    /* 英文翻译 */
    .menu-en {
      color: rgba(255, 255, 255, 0.9);
      font-size: 11px;
      font-weight: 400;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      display: block;
      letter-spacing: 0.3px;
    }


    .menu-cna {
      color: white;
      font-weight: 500;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
      display: block;
      margin-bottom: 2px;
    }


    
    /* 英文翻译 */
    .menu-ena {
      color: rgba(255, 255, 255, 0.9);
      font-size: 11px;
      font-weight: 400;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      display: block;
      letter-spacing: 0.3px;
    }
    
    .desktop-menu a {
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      border-radius: 4px;
      transition: all 0.3s ease;
    }
    
    .desktop-menu a:hover {
      /*background: rgba(255, 255, 255, 0.2);*/
    }
    
    /* 滚动时的菜单文字样式 */
    .navbar.scrolled .menu-cn {
      color: #1e293b;
      text-shadow: none;
    }
    
    .navbar.scrolled .menu-en {
      color: #64748b;
      text-shadow: none;
    }
    
    .navbar.scrolled .desktop-menu a:hover {
      background: rgba(37, 99, 235, 0.1);
    }
    
    .navbar.scrolled .desktop-menu a:hover .menu-cn {
      color: #2563eb;
    }
    
    .navbar.scrolled .desktop-menu a:hover .menu-en {
      color: #2563eb;
    }
  

       


    
    /* 下拉菜单箭头 - 固定位置和颜色 */
    .dropdown-arrow {
      display: inline-block;
      margin-left: 5px;
      font-size: 12px;
      transition: transform 0.3s;
      color: white;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      position: relative;
      top: 0;
    }
    
    /* 滚动时箭头颜色也保持不变 */
    .navbar.scrolled .dropdown-arrow {
      color: #1e293b;
      text-shadow: none;
    }
    
    .has-dropdown:hover .dropdown-arrow {
      transform: rotate(180deg);
    }
    
    /* 下拉菜单（二级菜单） */
    .dropdown {
      position: absolute;
      top: 100%;
      left: 0%;
      transform: translateX(0%) translateY(10px);
      background: none;
      border: none;
      box-shadow: none;
      padding: 15px 0px;
      min-width: 700px;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      z-index: 1001;
      
     
    }
    
    /* 滚动时的下拉菜单 */
    .navbar.scrolled .dropdown {
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      
    }
    
    .has-dropdown:hover .dropdownln {
            
            opacity: 1;
            visibility: visible;
            transform: translateX(-36%) translateY(0);
        }
        .has-dropdown:hover .dropdownxm {
            
            opacity: 1;
            visibility: visible;
            transform: translateX(-46%) translateY(0);
        }
        .has-dropdown:hover .dropdowncb {
            
            opacity: 1;
            visibility: visible;
            transform: translateX(-40%) translateY(0);
        }
        .has-dropdown:hover .dropdowngy {
            
            opacity: 1;
            visibility: visible;
            transform: translateX(-77%) translateY(0);
        }
    
        .dropdownxm .dropdown-grid{
            grid-template-columns: repeat(4, 1fr);
        }

        

        .dropdownln .dropdown-grid{
            grid-template-columns: repeat(4, 1fr);
        }

        .dropdowngy .dropdown-grid{
            grid-template-columns: repeat(4, 1fr);
        }
        
        .dropdowncb .dropdown-grid{
            width: 500px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
            /* 自动创建列，每列最小宽度200px，最大占满剩余空间 */
            grid-auto-flow: dense;
            gap: 0px;
        }
    
    .dropdown-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    
    
    
    /* 二级菜单项样式 */
    .dropdown-grid a {
      display: block;
      padding: 10px 5px;
      transition: all 0.3s ease;
      border-radius: 4px;
      
     
    }
    
    .dropdown-grid .menu-cn {
      font-size: 14px;
      margin-bottom: 2px;
    }
    
    .dropdown-grid .menu-en {
      font-size: 10px;
    }
    
    /* 未滚动时二级菜单项的悬停效果 */
    .navbar:not(.scrolled) .dropdown-grid a:hover {
      /*background: rgba(255, 255, 255, 0.2);*/
    }
    
    .navbar:not(.scrolled) .dropdown-grid a:hover .menu-cn {
      color: #e6f7ff;
    }
    
    .navbar:not(.scrolled) .dropdown-grid a:hover .menu-en{
      color: #e6f7ff;
    }


      .desktop-menu .has-dropdown:hover .menu-cna,
        .desktop-menu .has-dropdown:hover .menu-ena {
            color: #e6f7ff; /* 一级菜单文字变红 */
           

        }
    
    /* 滚动时二级菜单项的悬停效果 */
    .navbar.scrolled .dropdown-grid a:hover {
      background: #f1f5f9;
    }
    
    .navbar.scrolled .dropdown-grid a:hover .menu-cn {
      color: #2563eb;
    }
    
    .navbar.scrolled .dropdown-grid a:hover .menu-en {
      color: #2563eb;
    }
    
    /* 移动端菜单按钮 */
    .mobile-menu-btn {
      display: block;
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: white;
      font-size: 24px;
      cursor: pointer;
      padding: 5px 12px;
      border-radius: 6px;
      transition: all 0.3s ease;
    }
    
    .navbar.scrolled .mobile-menu-btn {
      background: transparent;
      border-color: #e2e8f0;
      color: #1e293b;
    }
    
    .mobile-menu-btn:hover {
      background: rgba(255, 255, 255, 0.3);
    }
    
    /* 移动端菜单 */
    .mobile-menu {
      position: fixed;
      top: 0;
      left: -100%;
      width: 85%;
      max-width: 320px;
      height: 100vh;
      background: white;
      z-index: 2000;
      list-style: none;
      padding: 25px;
      box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1);
      transition: left 0.3s ease;
      overflow-y: auto;
    }
    
    .mobile-menu.open {
      left: 0;
    }
    
    .mobile-menu-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: 1px solid #e2e8f0;
    }
    
    .close-menu-btn {
      background: none;
      border: none;
      font-size: 26px;
      cursor: pointer;
      color: #1e293b;
    }
    
    /* 移动端菜单项 - 包含中英文 */
    .mobile-menu a {
      text-decoration: none;
      display: block;
      padding: 12px 0;
      border-bottom: 1px solid #f1f5f9;
    }
    
    .mobile-menu .menu-cn {
      color: #1e293b;
      font-weight: 500;
      margin-bottom: 2px;
      text-shadow: none;
    }
    
    .mobile-menu .menu-en {
      color: #64748b;
      font-size: 11px;
      text-shadow: none;
    }
    
    .mobile-menu .has-submenu > a {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    
    .submenu-toggle {
      margin-top: 3px;
      transition: transform 0.3s;
    }
    
    .submenu-toggle.open {
      transform: rotate(180deg);
    }
    
    .mobile-submenu {
      list-style: none;
      padding-left: 15px;
      display: none;
      margin: 5px 0 10px 0;
    }
    
    .mobile-submenu.open {
      display: block;
    }
    
    .mobile-submenu a {
      padding: 10px 0;
      font-size: 14px;
    }
    
    /* 轮播图作为背景 - 添加动态效果 */
    .carousel-container {
      width: 100%;
      height: 100vh;
      position: relative;
      overflow: hidden;
    }
    
    /* 固定的半透明图标 - 位于轮播图上方左侧，不随轮播变化 */
    /*.fixed-icon {*/
    /*  position: absolute;*/
    /*  top: 50%; */
    /*  left: 5%;*/
    /*  transform: translateY(-50%);*/
    /*  width: 600px;*/
    /*  height: 140px;*/
      /*background-color: rgba(255, 255, 255, 0.3);*/
    /*  background-image:url('../../img/bn.png');*/
      
    /*  display: flex;*/
    /*  align-items: center;*/
    /*  justify-content: center;*/
    /*  z-index: 5;*/
      /*backdrop-filter: blur(2px);*/
      /*box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);*/
    /*  transition: all 0.3s ease;*/
    /*}*/
    
    
    .fixed-icon {
            position: absolute;
            top: 50%; 
            left: 5%;
            transform: translateY(-50%);
            width: 600px;
            height: 140px;
            /* 保留原有背景图设置 */
            background-image:url('../../img/bn.png');
            background-size: cover; /* 确保图片覆盖整个元素 */
            background-position: left center; /* 从左侧开始显示 */
            
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 5;
            transition: all 0.3s ease;
            
            /* 关键：使用clip-path控制显示范围 */
            clip-path: inset(0 100% 0 0); /* 初始状态：完全隐藏（右侧裁剪100%） */
            animation: revealLeftToRight 1.5s ease forwards; /* 添加动画 */
        }
        
        /* 从左到右逐渐显示的动画 */
        @keyframes revealLeftToRight {
            0% {
                clip-path: inset(0 100% 0 0); /* 开始：只显示0宽度 */
            }
            100% {
                clip-path: inset(0 0 0 0); /* 结束：完全显示 */
            }
        }
        
        /* 可选：添加延迟显示效果 */
        .fixed-icon.delay {
            animation-delay: 0.5s;
        }
    
    .fixed-icon:hover {
      /*background-color: rgba(255, 255, 255, 0.4);*/
      /*transform: translateY(-50%) scale(1.05);*/
    }
    
    .fixed-icon i {
      font-size: 60px;
      color: white;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    /* 轮播图内容容器 */
    .carousel-content {
      width: 100%;
      height: 100%;
    }
    
    .mySwiper {
      width: 100%;
      height: 100%;
    }
    
    .swiper-slide {
      position: relative;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }
    
    .swiper-slide-active {
      opacity: 1;
    }
    
    .swiper-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.05);
      transition: transform 8s ease;
    }
    
    .swiper-slide-active img {
      transform: scale(1);
    }
    
    /* 轮播图叠加渐变，增强文字可读性 */
    .swiper-slide::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /*background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%);*/
    }
    
    /* 右侧标题区域 */
    .carousel-title {
      position: absolute;
      bottom: 0;
      left: 24%;
      transform: translate(-50%, -23%);
      color: white;
      font-size: 1rem;
      /*font-weight: 700;*/
      text-shadow: 0 2px 8px rgba(0,0,0,0.5);
      width: 90%;
      max-width: 600px;
      z-index: 10;
      text-align: left;
    }
    
    /* 轮播分页器 */
    .swiper-pagination {
      position: absolute;
      bottom: 30px;
      left: 0;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 0 5%;
      box-sizing: border-box;
      z-index: 20;
    }
    
    .swiper-pagination-custom {
      flex: 0 0 35%;
      color: white;
      font-size: 16px;
      font-weight: 500;
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
      text-align: left;
    }
    
    .swiper-pagination-dots {
      display: flex;
      /*gap: 8px;*/
      margin: 0 auto;
      
      flex-wrap: wrap;
    }
    
    .swiper-pagination-dots .swiper-pagination-bullet {
      width: 12px;
      height: 12px;
      background: rgba(255,255,255,0.5);
      opacity: 1;
      transition: all 0.3s;
    }
    
    .swiper-pagination-dots .swiper-pagination-bullet-active {
      background: white;
      transform: scale(1.2);
    }
    
    /* 轮播导航按钮 */
    .swiper-button-prev, .swiper-button-next {
      color: white;
      background: rgba(0,0,0,0.3);
      width: 45px;
      height: 45px;
      border-radius: 50%;
      transition: background 0.3s;
      z-index: 20;
    }
    
    .swiper-button-prev:hover, .swiper-button-next:hover {
      background: rgba(0,0,0,0.5);
    }
    
    .swiper-button-prev::after, .swiper-button-next::after {
      font-size: 20px;
    }
    
    /* 主内容区域 */
    .main-content {
      padding: 80px 0;
      position: relative;
      background-color: #f8fafc;
    }
    
    .content-box {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      padding: 40px;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }
    
    .content-box h2 {
      font-size: 28px;
      margin-bottom: 25px;
      color: #1e293b;
    }
    
    .content-box p {
      margin-bottom: 20px;
      line-height: 1.7;
      color: #475569;
    }
    
    .btn {
      display: inline-block;
      padding: 12px 24px;
      background: #2563eb;
      color: white;
      text-decoration: none;
      border-radius: 6px;
      font-weight: 500;
      transition: background 0.3s;
    }
    
    .btn:hover {
      background: #1d4ed8;
    }
    
    /* 遮罩层 */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 999;
      display: none;
    }
    
    .overlay.active {
      display: block;
    }
    
    /* 响应式设计 */
    @media (min-width: 1024px) {
      .desktop-menu {
        display: block;
      }
      .container{
        padding: 0 20px;
      }
      .mobile-menu-btn {
        display: none;
      }
      
      .carousel-title {
        left: 24%;
      }
    }
    
    @media (max-width: 1023px) and (min-width: 768px) {
      .desktop-menu {
        display: block;
      }
      .container{
        padding: 0 20px;
      }
      .mobile-menu-btn {
        display: none;
      }
      
      .menu-item {
        padding: 5px 8px;
      }
      
      .menu-cn {
        font-size: 14px;
      }
      
      .menu-en {
        font-size: 10px;
      }
      
      .dropdown {
        min-width: 450px;
      }
      
      .dropdown-grid {
        gap: 10px;
      }
      
      .fixed-icon {
        width: 115px;
        height: 140px;
      }
      
      .fixed-icon i {
        font-size: 50px;
      }
      
      .carousel-title {
        font-size: 1rem;
        left: 42%;
      }
    }
    
    @media (max-width: 767px) {
      .carousel-container {
        height: 85vh;
      }
      .container{
        padding: 0 20px;
      }
      .fixed-icon {
        /*width: 80px;*/
        /*height: 80px;*/
        top: 30%;
        width: 115px;
        height: 140px;
      }
      
      .fixed-icon i {
        font-size: 40px;
      }
      
      .carousel-title {
        bottom: 8px;
        font-size: 13px;
        left: 60%;
      }
      
      .dropdown {
        min-width: 260px;
      }
      
      .dropdown-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      
      .content-box {
        padding: 30px 20px;
      }
      
      .content-box h2 {
        font-size: 24px;
      }
    }