@charset "UTF-8";
/*首页 */
     /* 全局样式重置 */
          * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
              font-family: "Microsoft Yahei", sans-serif;
          }
  
          html, body {
              width: 100%;
              overflow-x: hidden;
              font-size: 16px;
          }
  
          /* 容器样式 - 基准1920px，左右边距10% */
          .container {
              width: 80%;
              margin: 0 auto;
              max-width: 1920px;
          }
  
          /* 顶部导航 - 固定+半透明 */
          header {
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
              height: 80px;
              background: rgba(255, 255, 255, 0.8);
              z-index: 999;
              display: flex;
              align-items: center;
              transition: all 0.3s ease;
              border-bottom: 1px solid rgba(0, 102, 204, 0.1);
          }
  
          .nav-wrapper {
              width: 80%;
              margin: 0 auto;
              display: flex;
              justify-content: space-between;
              align-items: center;
          }
  
          .logo {
              width: 120px; /* Logo尺寸：120*60px */
              height: 60px;
              object-fit: contain;
          }
  
          /* PC端导航列表 */
          .nav-list {
              display: flex;
              list-style: none;
          }
  
          .nav-list li {
              margin: 0 25px;
              position: relative;
          }
  
          .nav-list li a {
              text-decoration: none;
              color: #333;
              font-size: 16px;
              font-weight: 500;
              transition: color 0.3s ease;
              padding: 5px 0;
          }
  
          .nav-list li a.active {
              color: #0066cc;
          }
  
          .nav-list li a:hover {
              color: #0066cc;
          }
  
          /* 移动端菜单按钮 */
          .mobile-menu-btn {
              display: none;
              width: 40px;
              height: 40px;
              cursor: pointer;
              background: transparent;
              border: none;
              outline: none;
          }
  
          /* ========== 移动端导航 - 1:1匹配设计图 ========== */
          .mobile-nav {
              position: fixed;
              top: 0;
              right: 0;
              width: 0;
              height: 100vh;
              background: #fff;
              z-index: 1000;
              transition: width 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
              overflow: hidden;
              display: flex;
              box-shadow: -2px 0 10px rgba(0,0,0,0.1);
          }
  
          .mobile-nav.active {
              width: 85%; /* 设计图比例 */
          }
  
          /* 左侧蓝色关闭栏 */
          .mobile-nav-left {
              width: 60px;
              height: 100%;
              background: #0066cc;
              display: flex;
              justify-content: center;
              align-items: flex-start;
              padding-top: 20px;
              flex-shrink: 0;
          }
  
          .mobile-nav-close {
              width: 30px;
              height: 30px;
              cursor: pointer;
              display: flex;
              justify-content: center;
              align-items: center;
          }
  
          .mobile-nav-close img {
              width: 20px;
              height: 20px;
              filter: invert(1); /* 关闭按钮白色 */
          }
  
          /* 右侧导航内容区 */
          .mobile-nav-right {
              flex: 1;
              height: 100%;
              padding: 30px 20px;
              overflow-y: auto;
              background: #fff;
          }
  
          /* 移动端Logo */
          .mobile-nav-logo {
              width: 120px;
              height: 60px;
              margin: 0 auto 50px;
              display: block;
              object-fit: contain;
          }
  
          /* 移动端导航列表 */
          .mobile-nav-list {
              list-style: none;
              width: 100%;
          }
  
          .mobile-nav-list li {
              border-bottom: 1px solid #f0f0f0;
              margin-bottom: 5px;
          }
  
          .mobile-nav-list li a {
              text-decoration: none;
              color: #333;
              font-size: 18px;
              display: block;
              padding: 18px 10px;
              transition: all 0.2s ease;
          }
  
          /* 首页选中样式 - 完全匹配设计图 */
          .mobile-nav-list li a.active {
              background: #0066cc;
              color: #fff;
              font-weight: 500;
          }
  
          .mobile-nav-list li a:hover:not(.active) {
              background: #f8f8f8;
          }
  
          /* ========== Banner轮播 ========== */
          .banner {
              width: 100%;
              height: 800px; /* PC：1920*800 | 移动端：屏幕宽*500 */
              position: relative;
              overflow: hidden;
              margin-top: 80px;
          }
  
          .banner-slide {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              opacity: 0;
              transition: opacity 1.2s ease-in-out;
          }
  
          .banner-slide.active {
              opacity: 1;
          }
  
          .banner-slide img {
              width: 100%;
              height: 100%;
              object-fit: cover;
          }
  
          .banner-text {
              position: absolute;
              top: 50%;
              left: 10%;
              transform: translateY(-50%);
              color: #fff;
              z-index: 10;
              text-shadow: 0 2px 10px rgba(0,0,0,0.2);
          }
  
          .banner-text h1 {
              font-size: 48px;
              line-height: 1.2;
              margin-bottom: 25px;
              font-weight: 700;
          }
  
          .banner-text p {
              font-size: 18px;
              line-height: 1.8;
              max-width: 600px;
              opacity: 0.95;
          }
  
          .banner-dots {
              position: absolute;
              bottom: 40px;
              left: 50%;
              transform: translateX(-50%);
              display: flex;
              gap: 12px;
          }
  
          .banner-dot {
              width: 12px;
              height: 12px;
              border-radius: 50%;
              background: rgba(255, 255, 255, 0.6);
              cursor: pointer;
              transition: all 0.3s ease;
              border: 1px solid transparent;
          }
  
          .banner-dot.active {
              background: #fff;
              transform: scale(1.1);
          }
  
          /* ========== 关于西环 ========== */
          .about {
              padding: 120px 0;
              background: #f9f9f9;
          }
  
          .about-title {
              text-align: center;
              margin-bottom: 60px;
          }
  
          .about-title h2 {
              font-size: 36px;
              color: #333;
              margin-bottom: 15px;
              font-weight: 700;
          }
  
          .about-title p {
              font-size: 18px;
              color: #666;
          }
  
          .about-desc {
              text-align: center;
              margin-bottom: 80px;
              line-height: 1.8;
              font-size: 16px;
              color: #555;
              max-width: 1200px;
              margin-left: auto;
              margin-right: auto;
          }
  
          /* 数字滚动区域 - 核心：PC一行4个，移动端自适应换行 */
          .about-numbers {
              display: flex;
              justify-content: space-between;
              margin-bottom: 80px;
              gap: 15px;
              /* PC端强制一行，移动端通过媒体查询覆盖 */
              flex-wrap: nowrap;
              width: 100%;
          }
  
          .number-item {
              flex: 1;
              text-align: center;
              padding: 30px 20px;
              background: #fff;
              border-radius: 8px;
              box-shadow: 0 2px 15px rgba(0,0,0,0.05);
          }
  
          .number-item .num {
              font-size: 48px;
              color: #0066cc;
              font-weight: 700;
              margin-bottom: 20px;
              line-height: 1;
          }
  
          .number-item p {
              font-size: 14px;
              color: #666;
              line-height: 1.6;
          }
  
          /* 关于西环图片 */
          .about-imgs {
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;
              gap: 15px;
          }
  
          .about-img-item {
              width: 19%; /* PC：360*240 | 移动端：屏幕宽*48% */
              height: 240px;
              overflow: hidden;
              border-radius: 6px;
              box-shadow: 0 2px 8px rgba(0,0,0,0.08);
          }
  
          .about-img-item img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          }
  
          .about-img-item:hover img {
              transform: scale(1.15);
          }
  
          /* 查看更多按钮 */
          .more-btn {
              text-align: center;
              margin-top: 60px;
          }
  
          .more-btn a {
              text-decoration: none;
              color: #0066cc;
              font-size: 16px;
              display: inline-block;
              padding: 12px 30px;
              border: 1px solid #0066cc;
              border-radius: 4px;
              transition: all 0.3s ease;
              background: #fff;
          }
  
          .more-btn a:hover {
              background: #0066cc;
              color: #fff;
          }
  
/* ========== 入驻名企 - 核心：固定4条+滚动条 ========== */
.enterprises {
    padding: 120px 0;
    background: #0066cc;
    color: #fff;
}

.enterprises-title {
    text-align: center;
    margin-bottom: 70px;
}

.enterprises-title h2 {
    font-size: 36px;
    margin-bottom: 15px;
    font-weight: 700;
}

.enterprises-title p {
    font-size: 16px;
    opacity: 0.9;
    max-width: 1000px;
    margin: 0 auto;
    line-height: 1.8;
}

/* 核心：横向滚动容器，固定4条完整显示 */
.enterprise-scroll-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 15px;
    scrollbar-width: thin;
    /* 修改滚动条颜色为绿色 */
    scrollbar-color: #00cc66 transparent;
    /* 限制滚动条容器宽度，确保4条完整显示 */
    max-width: 100%;
}

.enterprise-imgs {
    display: flex;
    gap: 25px;
    /* 移除width: max-content，确保4条在容器内完整显示 */
    width: 100%;
    justify-content: space-between;
}

/* 自定义滚动条 - 改为绿色、更短更粗 */
.enterprise-scroll-container::-webkit-scrollbar {
    height: 8px; /* 滚动条高度（更粗） */
    width: 60%;  /* 滚动条长度（更短），仅占容器60% */
    margin: 0 auto;
}
.enterprise-scroll-container::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}
.enterprise-scroll-container::-webkit-scrollbar-thumb {
    /* 绿色实心滚动条，匹配设计图 */
    background-color: #00cc66;
    border-radius: 4px;
    border: none; /* 移除边框，纯实心 */
}

/* 固定4条宽度 - 确保均分显示 */
.enterprise-img-item {
    width: calc(25% - 18.75px);
    max-width: 450px;
    min-width: 200px; /* 降低最小宽度，确保4条能完整显示 */
    height: 500px;
    overflow: hidden;
    position: relative;
    border-radius: 6px;
    transition: all 0.4s ease;
    flex-shrink: 0;
    background: #fff;
}

.enterprise-img-inner {
    width: 100%;
    height: 85%;
    overflow: hidden;
}

.enterprise-img-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.enterprise-name {
    width: 100%;
    height: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    background: #fff;
    color: #333;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    transition: all 0.4s ease;
}

.enterprise-img-item:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.enterprise-img-item:hover .enterprise-img-inner img {
    transform: scale(1.1);
    opacity: 0.95;
}

.enterprise-img-item:hover .enterprise-name {
    background: #00cc66;
    color: #fff;
}

.enterprise-img-item a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    text-decoration: none;
}

/* 响应式适配 - 确保移动端也能完整显示对应数量 */
@media (max-width: 1024px) {
    .enterprise-img-item {
        width: calc(50% - 12.5px);
        height: 450px;
    }
}

@media (max-width: 768px) {
    .enterprise-img-item {
        width: calc(100% - 25px);
        height: 400px;
    }
    /* 移动端滚动条调整 */
    .enterprise-scroll-container::-webkit-scrollbar {
        width: 80%; /* 移动端滚动条长度稍长 */
    }
}
  
  /* ========== 西环动态 - 核心：默认4条完整显示 + 绿色短滚动条 ========== */
  .news {
      padding: 120px 0;
      background: #f9f9f9;
  }
  
  .news-title {
      text-align: center;
      margin-bottom: 70px;
  }
  
  .news-title h2 {
      font-size: 36px;
      color: #333;
      margin-bottom: 15px;
      font-weight: 700;
  }
  
  /* 核心：横向滚动容器，固定4条完整显示 */
  .news-scroll-container {
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 15px;
      scrollbar-width: thin;
      /* 滚动条颜色改为绿色，和入驻名企一致 */
      scrollbar-color: #00cc66 transparent;
      max-width: 100%;
  }
  
  .news-list {
      display: flex;
      gap: 25px;
      /* 移除max-content，改为100%宽度+均分显示 */
      width: 100%;
      justify-content: space-between;
  }
  
  /* 自定义滚动条 - 和入驻名企完全一致：绿色、更短更粗 */
  .news-scroll-container::-webkit-scrollbar {
      height: 8px; /* 滚动条高度（更粗） */
      width: 60%;  /* 滚动条长度（更短），仅占容器60% */
      margin: 0 auto;
  }
  .news-scroll-container::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 4px;
  }
  .news-scroll-container::-webkit-scrollbar-thumb {
      /* 绿色实心滚动条，和入驻名企同款 */
      background-color: #00cc66;
      border-radius: 4px;
      border: none; /* 纯实心效果 */
  }
  
  /* 固定4条宽度 - 确保均分显示 */
  .news-item {
      width: calc(25% - 18.75px);
      max-width: 450px;
      min-width: 200px; /* 降低最小宽度，确保4条完整显示 */
      height: 500px;
      overflow: hidden;
      position: relative;
      border-radius: 6px;
      background: #fff;
      box-shadow: 0 3px 15px rgba(0,0,0,0.06);
      transition: all 0.4s ease;
      flex-shrink: 0;
  }
  
  .news-img {
      width: 100%;
      height: 75%;
      overflow: hidden;
  }
  
  .news-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
  }
  
  .news-content {
      width: 100%;
      height: 25%;
      padding: 20px 25px;
      background: #fff;
      color: #333;
      transition: all 0.4s ease;
  }
  
  .news-date {
      font-size: 14px;
      color: #999;
      margin-bottom: 10px;
      display: inline-block;
      transition: color 0.4s ease;
  }
  
  .news-desc {
      font-size: 16px;
      color: #333;
      line-height: 1.6;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      transition: color 0.4s ease;
  }
  
  .news-item:hover {
      box-shadow: 0 8px 25px rgba(0,0,0,0.12);
      transform: translateY(-5px);
  }
  
  .news-item:hover::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 8px;
      height: 100%;
      background: #00cc66;
      z-index: 5;
  }
  
  .news-item:hover .news-img img {
      transform: scale(1.1);
  }
  
  .news-item:hover .news-content {
      background: #00cc66;
      color: #fff;
  }
  
  .news-item:hover .news-date {
      color: #f0f0f0;
  }
  
  .news-item:hover .news-desc {
      color: #fff;
  }
  
  .news-item a {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      text-decoration: none;
  }
  
  /* 响应式适配 - 和入驻名企保持一致 */
  @media (max-width: 1024px) {
      .news-item {
          width: calc(50% - 12.5px);
          height: 450px;
      }
  }
  
  @media (max-width: 768px) {
      .news-item {
          width: calc(100% - 25px);
          height: 400px;
      }
      /* 移动端滚动条长度稍长，和入驻名企一致 */
      .news-scroll-container::-webkit-scrollbar {
          width: 80%;
      }
  }
  
     
          /* ========== 响应式适配 - 重点调整数字板块 ========== */
          /* 平板 (1024px以下) - 数字板块每行2个 */
          @media (max-width: 1024px) {
              .container {
                  width: 90%;
              }
  
              .nav-wrapper {
                  width: 90%;
              }
  
              .nav-list {
                  display: none;
              }
  
              .mobile-menu-btn {
                  display: block;
              }
  
              .banner {
                  height: 650px;
              }
  
              .banner-text h1 {
                  font-size: 40px;
              }
  
              .banner-text p {
                  font-size: 16px;
                  max-width: 500px;
              }
  
              /* 平板端：数字板块换行，每行2个 */
              .about-numbers {
                  flex-wrap: wrap;
              }
              .number-item {
                  flex: 0 0 calc(50% - 7.5px);
                  margin-bottom: 15px;
                  padding: 25px 15px;
              }
  
              .about-img-item {
                  width: 48%;
                  height: 200px;
                  margin-bottom: 15px;
              }
  
              .enterprise-img-item {
                  width: calc(50% - 12.5px);
                  height: 450px;
              }
  
              .news-item {
                  width: calc(50% - 12.5px);
                  height: 450px;
              }
          }
  
          /* 手机 (768px以下) - 数字板块每行1个 */
          @media (max-width: 768px) {
              header {
                  height: 70px;
              }
  
              .logo {
                  width: 100px;
                  height: 50px;
              }
  
              .banner {
                  height: 500px;
                  margin-top: 70px;
              }
  
              .banner-text {
                  left: 8%;
                  top: 45%;
              }
  
              .banner-text h1 {
                  font-size: 32px;
                  margin-bottom: 15px;
              }
  
              .banner-text p {
                  font-size: 14px;
                  max-width: 90%;
              }
  
              .banner-dots {
                  bottom: 25px;
              }
  
              .about {
                  padding: 80px 0;
              }
  
              .about-title h2 {
                  font-size: 28px;
              }
  
              .about-title p {
                  font-size: 16px;
              }
  
              .about-desc {
                  margin-bottom: 60px;
                  font-size: 14px;
                  text-align: left;
              }
  
              /* 手机端：数字板块每行1个 */
              .number-item {
                  flex: 0 0 100%;
                  padding: 20px 15px;
              }
  
              .number-item .num {
                  font-size: 36px;
              }
  
              .about-img-item {
                  width: 100%;
                  height: 220px;
              }
  
              .enterprises {
                  padding: 80px 0;
              }
  
              .enterprises-title h2 {
                  font-size: 28px;
              }
  
              .enterprise-img-item {
                  width: calc(100% - 25px);
                  height: 400px;
              }
  
              .news {
                  padding: 80px 0;
              }
  
              .news-title h2 {
                  font-size: 28px;
              }
  
              .news-item {
                  width: calc(100% - 25px);
                  height: 400px;
              }
  
              .footer-wrapper {
                  flex-direction: column;
                  text-align: center;
                  gap: 40px;
              }
  
              .footer-nav {
                  display: none;
              }
  
              .footer-qrcode {
                  justify-content: center;
              }
          }
  
          /* 小屏手机 (480px以下) - 保持每行1个 */
          @media (max-width: 480px) {
              .banner {
                  height: 400px;
              }
  
              .banner-text h1 {
                  font-size: 26px;
              }
  
              .about-img-item {
                  height: 180px;
              }
  
              .enterprise-img-item {
                  height: 350px;
              }
  
              .news-item {
                  height: 380px;
              }
          }