* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Microsoft YaHei', Arial, sans-serif;
      background-color: #ffffff;
      color: #333;
      line-height: 1.6;
    }
    
    
    
    section {
      padding: 60px 10%;
      background-color: #ffffff;
    }
    
    h2 {
      text-align: center;
      margin-bottom: 40px;
      font-size: 32px;
      color: #0066cc;
      position: relative;
      padding-bottom: 15px;
    }
    
    h2::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 3px;
      background-color: #0066cc;
    }
    
    .container {
      display: flex;
      flex-wrap: nowrap;
      gap: 30px;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    
    .card {
      background-color: #f8fafc;
      width: 350px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 102, 204, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border: 1px solid #e1e8ed;
    }
    
    .card img {
      width: 100%;
      height: 250px;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
    
    .card-content {
      padding: 25px;
      text-align: center;
    }
    
    .card-content h3 {
      font-size: 20px;
      margin-bottom: 12px;
      color: #0066cc;
    }
    
    .card-content p {
      font-size: 16px;
      color: #666;
      height: 3.125rem;
    }
    
    .card:hover {
      transform: translateY(-10px);
      box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
    }
    
    .card:hover img {
      transform: scale(1.05);
    }
    
   
	
	/* 视频容器 */
	.image-container {
	  position: relative;
	  width: 100%;
	  height: 40vh;
	}
	
	.image-container video {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	  display: block;
	}
	
	.section-title {
	  font-size: 32px;
	  font-weight: bold;
	  margin: 0;
	  color: white;
	
	}
	
	.content-box {
	  width: 400px;
	  height: 300px;
	  position: absolute;
	  top: 70%;
	  left: 5%;
	  transform: translateY(-50%);
	  text-align: center;
	  color: white;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  gap: 15px;
	}
	
	/* 按钮样式 */
	.action-button {
	  padding: 10px 20px;
	  background-color: #0099cc;
	  color: white;
	  font-size: 16px;
	  border: none;
	  border-radius: 5px;
	  cursor: pointer;
	  transition: background-color 0.3s;
	  margin-top: 10px;
	}
	
	.action-button:hover {
	  background-color:  #007bff;
	}
	
    
    /* 荣誉证书轮播 */
    #honors {
      position: relative;
      text-align: center;
      margin: 0 auto;
      width: 99.5%;
      background-color: #f8fafc;
      padding: 60px 10%;
    }
    
    .honor-slider-wrapper {
      display: flex;
      overflow: hidden;
      justify-content: center;
      position: relative;
      margin: 0 auto;
      max-width: 1200px;
    }
    
    .honor-slider {
      display: flex;
      transition: transform 0.5s ease;
    }
    
    .honor-item {
      flex: 1 0 23.3%;
      /* 每个项目的宽度占25% */
      height: 400px;
      /* 每个项目的高度 */
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0, 102, 204, 0.1);
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 20px;
      padding: 0;
      border: 1px solid #e1e8ed;
      transition: transform 0.3s ease;
    }
    
    .honor-item:first-child {
      margin-left: 20px;
    }
    
    .honor-item:last-child {
      margin-right: 0;
    }
    
    .honor-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
    }
    
    .honor-title {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to top, rgba(0, 102, 204, 0.8), transparent);
      color: white;
      font-size: 1rem;
      padding: 15px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .honor-item:hover {
      transform: translateY(-5px);
    }
    
    .honor-item:hover .honor-title {
      opacity: 1;
    }
    
    button.prev, button.next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 102, 204, 0.7);
      color: white;
      border: none;
      font-size: 24px;
      padding: 10px 15px;
      cursor: pointer;
      z-index: 1;
      border-radius: 50%;
      transition: background-color 0.3s ease;
    }
    
    button.prev:hover, button.next:hover {
      background-color: rgba(0, 102, 204, 1);
    }
    
    .prev {
      left: 30px;
    }
    
    .next {
      right: 30px;
    }
    
    /* 新闻部分 */
   .news {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
   }
   
   .news-item {
     display: flex;
     flex-direction: row; /* 确保图片和文本左右分布 */
     position: relative;
     background-color: #f8fafc;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 4px 15px rgba(0, 102, 204, 0.1);
     transition: transform 0.3s ease;
     border: 1px solid #e1e8ed;
     height: 200px; /* 设置固定高度，确保卡片大小一致 */
   }
   
   .news-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
   }
   
   .news-link {
     display: block;
     color: inherit;
     text-decoration: none;
     height: 100%;
     width: 100%;
     display: flex; /* 确保链接覆盖整个卡片 */
   }
   
   .news-item img {
     width: 35%; /* 使用百分比控制图片宽度 */
     height: 100%;
     object-fit: cover;
     margin: 0; /* 移除原有的 margin-left */
   }
   
   .news-item.featured {
     grid-column: span 2; /* 特色新闻占据两列 */
     height: 300px; /* 特色新闻更高 */
   }
   
   .news-item.featured img {
     width: 50%; /* 特色新闻图片更宽 */
   }
   
   .news-text {
     padding: 20px;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between; /* 垂直均匀分布内容 */
   }
   
   .news-item h3 {
     margin: 0 0 10px 0;
     font-size: 18px;
     color: #0066cc;
     line-height: 1.3;
   }
   
   .news-item p {
     margin: 0;
     font-size: 14px;
     color: #666;
     line-height: 1.6;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   
   .news-item.featured p {
     -webkit-line-clamp: 5;
   }
   
   .news-meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 15px;
     margin-top: 15px;
     border-top: 1px solid #eee;
   }
   
   .news-meta time {
     font-size: 13px;
     color: #999;
   }
   
   .news-meta i {
     margin-right: 5px;
     color: #0066cc;
   }
   
   /* 点赞区域 */
   .like-box {
     position: absolute;
     top: 2px;
     left: 5px;
     background-color: rgba(255, 255, 255, 0.9);
     color: #ff4757;
     display: flex;
     align-items: center;
     padding: 5px 10px;
     border-radius: 20px;
     font-size: 14px;
     z-index: 1;
   }
   
 
   
   .like-box i {
     margin-right: 5px;
   }
   
   /* 错误信息样式 */
   .error-message {
     text-align: center;
     padding: 40px;
     grid-column: span 2;
   }
   
   .error-message i {
     font-size: 3rem;
     color: #d32f2f;
     margin-bottom: 20px;
   }
   
   .error-message p {
     font-size: 1.2rem;
     color: #666;
   }

	
    
    /* 技术优势部分 */
    #technologies {
      padding: 60px 10%;
      text-align: center;
      background-color: #f8fafc;
    }
    
    .tech-container {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .tech-item {
      position: relative;
      flex: 1;
      height: 400px;
      overflow: hidden;
      cursor: pointer;
      box-shadow: 0 4px 15px rgba(0, 102, 204, 0.1);
      transition: all 0.3s ease;
      border-radius: 8px;
      border: 1px solid #e1e8ed;
    }
    
    .tech-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
    
    .tech-info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.3s ease;
    }
    
    .tech-info h3 {
      font-size: 18px;
      color: #0066cc;
      margin: 0;
      transition: all 0.3s ease;
    }
    
    .more-btn {
      background-color: #0066cc;
      color: white;
      border: none;
      padding: 8px 16px;
      font-size: 14px;
      cursor: pointer;
      border-radius: 4px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .more-btn:hover {
      background-color: #0052a3;
    }
    
    .tech-item:hover {
      flex: 2;
    }
    
    .tech-item:hover img {
      transform: scale(1.1);
    }
    
    .tech-item:hover .tech-info h3 {
      font-size: 20px;
    }
    
    .tech-item:hover .more-btn {
      opacity: 1;
    }
    
    /* 合作伙伴部分 */
    .partners-section {
      padding: 60px 10%;
      background-color: #ffffff;
	  width: 100%; 
	  height:auto; 
	  text-align: center; 
	  display: flex; 
	  flex-direction: column; 
	  justify-content: center; 
	  align-items: center;
    }
    
    .partners-section h2 {
      color: #0066cc;
    }
    
    .partners-image {
      width: 100%;
      max-width: 1200px;
	  object-fit: cover;
      margin: 0 auto;
      display: block;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0, 102, 204, 0.1);
    }
    
    
    
   
    
    .content-box {
      position: absolute;
      top: 60%;
      left: 10%;
      transform: translateY(-50%);
      text-align: left;
      color: white;
      max-width: 500px;
    }
    
    .section-title {
      font-size: 42px;
      font-weight: bold;
      margin-bottom: 30px;
      line-height: 1.3;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .action-button {
      padding: 12px 30px;
      background-color: #0066cc;
      color: white;
      font-size: 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-weight: bold;
    }
    
    .action-button:hover {
      background-color: #0052a3;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    
    /* 动画效果 */
    @keyframes floatUp {
      from {
        opacity: 0;
        transform: translateY(100px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    #products,
    #honors,
    #news,
    #technologies,
    #partners-section {
      opacity: 0;
      transform: translateY(100px);
    }
    
    .animate {
      animation: floatUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }
    
    .image-section {
      animation: floatUp 0.8s ease-out forwards;
      opacity: 0;
    }
    
    .image-section {
      animation-delay: 0.2s;
    }
    
    /* 响应式设计 */
    @media (max-width: 1200px) {
      nav .logo {
        margin-right: 300px;
      }
      
      .container {
        gap: 20px;
      }
      
      .card {
        width: 300px;
      }
      
      .tech-container {
        flex-direction: column;
      }
      
      .tech-item {
        width: 100%;
        margin-bottom: 20px;
      }
    }
    
    @media (max-width: 992px) {
      nav .logo {
        margin-right: 200px;
      }
      
      section {
        padding: 50px 5%;
      }
      
      .news {
        grid-template-columns: 1fr;
      }
      
      .honor-item {
        flex: 1 0 45%;
      }
    }
    
    @media (max-width: 768px) {
      nav {
        flex-wrap: wrap;
        padding: 10px;
      }
      
      nav .logo {
        margin-right: 0;
        margin-bottom: 10px;
        width: 100%;
        text-align: center;
      }
      
      .nav-link, .dropdown .dropbtn {
        padding: 0 10px;
        font-size: 14px;
      }
      
      .content-box {
        left: 5%;
        max-width: 90%;
      }
      
      .section-title {
        font-size: 32px;
      }
      
      .honor-item {
        flex: 1 0 80%;
      }
    }
	
	/* 页脚基础样式 */
	.site-footer {
	  background-color: #2c3e50;
	  color: #ecf0f1;
	  padding: 20px 0 20px;
	  font-size: 14px;
	  line-height: 1.6;
	}
	
	.footer-container {
	  max-width: 1200px;
	  margin: 0 auto;
	  display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	  gap: 30px;
	  padding: 0 20px;
	}
	
	.footer-section {
	  margin-bottom: 0px;
	}
	
	.footer-title {
	  color: #3498db;
	  font-size: 18px;
	  margin-bottom: 20px;
	  position: relative;
	  padding-bottom: 10px;
	}
	
	.footer-title::after {
	  content: '';
	      position: absolute;
	      left: 50%; /* 从左侧50%位置开始 */
	      bottom: 0;
	      width: 40px;
	      height: 2px;
	      background: #3498db;
	      transform: translateX(-50%); /* 向左移动自身宽度的50%以实现居中 */
	}
	
	.footer-info {
	  margin: 10px 0;
	  display: flex;
	  align-items: center;
	}
	
	.icon {
	  margin-right: 10px;
	  font-size: 16px;
	}
	
	.footer-links, .friend-links {
	  list-style: none;
	  padding: 0;
	}
	
	.footer-links li, .friend-links li {
	  margin-bottom: 10px;
	}
	
	
	.footer-links a, .friend-links a ,.copyright a{
	  color: #bdc3c7;
	  text-decoration: none;
	  transition: color 0.3s;
	}
	
	.footer-links a:hover, .friend-links a:hover,.copyright a:hover {
	  color: #3498db;
	}
	
	.social-media {
	  display: flex;
	  gap: 15px;
	  margin-bottom: 20px;
	}
	
	.social-icon {
	  color: #ecf0f1;
	  font-size: 20px;
	  transition: transform 0.3s;
	}
	
	.social-icon:hover {
	  transform: translateY(-3px);
	}
	
	
	
	.qrcode-section {
	  text-align: center;
	}
	
	.qrcode {
	  width: 80px;
	  height: 80px;
	  margin-bottom: 10px;
	  border: 1px solid #34495e;
	}
	
	.copyright {
	  text-align: center;
	  padding-top: 20px;
	  margin-top: 30px;
	  border-top: 1px solid #34495e;
	  color: #95a5a6;
	  font-size: 13px;
	}
	
	.separator {
	  margin: 0 10px;
	  color: #7f8c8d;
	}
	
	 /* 新增资质荣誉部分样式 */
	    #achievements-section {
	      max-width: 1200px;
	      margin: 40px auto;
	      padding: 40px;
	      background-color: #f8fafc;
	      border-radius: 12px;
	      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	    }
	    
	    .achievements-section h2 {
	      text-align: center;
	      margin-bottom: 30px;
	      color: #0066cc;
	      font-size: 2rem;
	      position: relative;
	    }
	    
	    .achievements-section h2:after {
	      content: '';
	      position: absolute;
	      bottom: -10px;
	      left: 50%;
	      transform: translateX(-50%);
	      width: 80px;
	      height: 3px;
	      background: #0066cc;
	    }
	    
	    .achievements-section h2 i {
	      margin-right: 10px;
	      color: #ffc107;
	    }
	    
	    .achievements-list {
	      list-style-type: none;
	      padding: 0 20px;
	    }
	    
	    .achievements-list li {
	      position: relative;
	      padding: 12px 0 12px 40px;
	      font-size: 16px;
	      line-height: 1.6;
	      color: #333;
	      border-bottom: 1px dashed #e0e0e0;
	    }
	    
	    .achievements-list li:last-child {
	      border-bottom: none;
	    }
	    
	    .achievements-list li i {
	      position: absolute;
	      left: 0;
	      top: 12px;
	      color: #0066cc;
	      font-size: 18px;
	    }
	
	@media (max-width: 768px) {
	  .footer-container {
	    grid-template-columns: 1fr;
	    gap: 20px;
	  }
	  
	  .footer-section {
	    text-align: center;
	  }
	  
	  .footer-title::after {
	    left: 50%;
	    transform: translateX(-50%);
	  }
	  
	  .social-media {
	    justify-content: center;
	  }
	  
	  .footer-info {
	    justify-content: center;
	  }
	}
	
	 /* 响应式设计 */
	    @media (max-width: 768px) {
	      .achievements-section {
	        padding: 30px 20px;
	      }
	      
	      .achievements-list li {
	        padding-left: 30px;
	        font-size: 15px;
	      }
	    }
	    
	    
	    
	    /* 平滑过渡动画样式 */
.content-transition {
  /* 保留元素位置，避免布局跳动 */
  position: relative;
  overflow: hidden;
  /* 过渡所有可动画属性，使用自然的时间曲线 */
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 淡出状态 */
.content-transition.is-fading-out {
  opacity: 0;
  transform: translateY(10px) scale(0.995); /* 微小缩放增强深度感 */
}

/* 淡入状态 */
.content-transition.is-fading-in {
  opacity: 1;
  transform: translateY(0) scale(1); /* 恢复原位 */
}