From 7596af34553851aa96196a6794e298a4b9f8eb67 Mon Sep 17 00:00:00 2001
From: yiqiu <yiqiu@ycyaw.com>
Date: Fri, 26 Dec 2025 16:05:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=A1=8C=E9=9D=A2=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/index-mobile.css |    2 +-
 css/index.css        | 2203 +++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 2203 insertions(+), 2 deletions(-)

diff --git a/css/index-mobile.css b/css/index-mobile.css
index 08816fd..3577866 100644
--- a/css/index-mobile.css
+++ b/css/index-mobile.css
@@ -1,6 +1,6 @@
 /* ============================================
    首页移动端专属样式
-   此文件包含所有首页的移动端响应式调整
+   此文件包含所有首页的@media响应式调整
    ============================================ */
 
 @media (max-width: 768px) {
diff --git a/css/index.css b/css/index.css
index fc25e1d..376f86d 100644
--- a/css/index.css
+++ b/css/index.css
@@ -394,6 +394,8 @@
    移动端 Banner 优化
    ============================================ */
 
+@media (max-width: 768px) {
+
   /* 调整 banner 高度 - 移动端优化 */
   .banner-cont .swiper-slide {
     height: 200px !important;
@@ -516,6 +518,122 @@
 }
 
 /* 移动端调整 banner-s 位置，避免遮挡 */
+@media (max-width: 768px) {
+  .banner .banner-s {
+    margin-top: 0 !important;
+    /* 移除负边距 */
+    padding-top: 20px;
+  }
+}
+
+.banner .banner-s .banner-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+  padding: 0 20px;
+}
+
+/* 独立毛玻璃卡片样式 */
+.banner-s .banner-list .banner-item {
+  flex: 0 1 calc(25% - 20px);
+  min-width: 260px;
+  max-width: 320px;
+  cursor: pointer;
+  padding: 24px 28px;
+  position: relative;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+
+  /* 毛玻璃效果 */
+  background: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+
+  /* 边框和圆角 */
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 0;
+
+  /* 阴影效果 */
+  box-shadow:
+    0 8px 32px rgba(15, 23, 42, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+
+  /* 内部发光 */
+  overflow: hidden;
+}
+
+/* banner-item 图标样式 */
+.banner-s .banner-list .banner-item .banner-item-icon {
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+  object-fit: contain;
+  transition: all 0.4s ease;
+  filter: brightness(1.1);
+}
+
+.banner-s .banner-list .banner-item:hover .banner-item-icon {
+  transform: scale(1.05);
+  filter: brightness(1.2);
+}
+
+/* banner-item 文字内容区域 */
+.banner-s .banner-list .banner-item-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 卡片光晕装饰 */
+.banner-s .banner-list .banner-item::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle at center,
+      rgba(56, 189, 248, 0.15) 0%,
+      transparent 50%);
+  opacity: 0;
+  transition: opacity 0.5s ease;
+  pointer-events: none;
+}
+
+/* 悬浮效果 */
+.banner-s .banner-list .banner-item:hover {
+  transform: translateY(-8px);
+  border-color: rgba(56, 189, 248, 0.3);
+  background: rgba(15, 23, 42, 0.75);
+  box-shadow:
+    0 12px 40px rgba(15, 23, 42, 0.6),
+    inset 0 1px 0 rgba(255, 255, 255, 0.15);
+}
+
+.banner-s .banner-list .banner-item:hover::before {
+  opacity: 0;
+}
+
+.banner-s .banner-list .banner-item:hover h5 {
+  color: #38BDF8;
+  transform: translateX(3px);
+}
+
+/* 移除分隔线 */
+.banner-s .banner-list .banner-item::after {
+  display: none;
+}
+
+/* ============================================
+   移动端 Banner-List 卡片优化
+   ============================================ */
+
+@media (max-width: 768px) {
+
   /* 调整 banner-s 区域 */
   .banner .banner-s {
     margin-top: -60px;
@@ -863,6 +981,1623 @@
 }
 
 /* 移动端优化 */
+@media (max-width: 767px) {
+  .hot-products {
+    padding: 30px 0;
+  }
+
+  .hot-products-title h3 {
+    font-size: 24px;
+  }
+
+  .hot-products-title .subtitle {
+    font-size: 13px;
+  }
+
+  .product-card {
+    padding: 16px;
+  }
+
+  .product-name {
+    font-size: 16px;
+  }
+
+  .price-value {
+    font-size: 28px;
+  }
+
+  .price-currency {
+    font-size: 16px;
+  }
+
+  .product-buy-btn {
+    padding: 10px 20px;
+    font-size: 13px;
+  }
+}
+
+.banner .banner-s .banner-list .banner-item h5 {
+  color: #F9FAFB;
+  font-size: 20px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  margin-bottom: 0;
+}
+
+/* banner-item 标题中的重点色 */
+.banner .banner-s .banner-list .banner-item h5 .highlight {
+  color: #38BDF8;
+  font-weight: 700;
+}
+
+.banner .banner-s .banner-list .banner-item .title-desc {
+  color: rgba(203, 213, 225, 0.8);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+
+/* 服务内容 */
+.service-content {
+  display: flex;
+  margin-top: 60px;
+  margin: -12px;
+  margin-top: 50px;
+}
+
+/* 服务模块整体背景：深色科技感基调 + 方格线 */
+.section.service {
+  background:
+    radial-gradient(circle at 15% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
+    radial-gradient(circle at 85% 80%, rgba(56, 189, 248, 0.1) 0%, transparent 50%),
+    linear-gradient(180deg, #020617 0%, #0F172A 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+/* 添加动态方格线背景 */
+.section.service::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image:
+    linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px);
+  background-size: 50px 50px;
+  pointer-events: none;
+}
+
+@keyframes float {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+.section.service .section-title h2 {
+  color: #F9FAFB;
+  font-size: 40px;
+  font-weight: 700;
+}
+
+.section.service .section-title .section-desc {
+  color: rgba(203, 213, 225, 0.85);
+  font-size: 16px;
+}
+
+/* 服务卡片 - 3D悬浮效果 */
+.service .service-box {
+  min-height: 240px;
+  margin: 12px;
+  position: relative;
+  padding: 32px;
+  border-radius: 20px;
+  /* 深色玻璃态面板 */
+  background:
+    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 50%),
+    rgba(15, 23, 42, 0.85);
+  border: 1px solid rgba(148, 163, 184, 0.15);
+  box-shadow:
+    0 4px 24px rgba(15, 23, 42, 0.5),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  color: #E5E7EB;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(10px);
+  overflow: hidden;
+}
+
+/* 卡片光晕装饰 */
+.service .service-box::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  right: -50%;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+.service .service-box:hover::before {
+  opacity: 1;
+}
+
+.service .service-box:hover {
+  transform: translateY(-12px) scale(1.02);
+  box-shadow:
+    0 20px 60px rgba(56, 189, 248, 0.25),
+    0 0 40px rgba(56, 189, 248, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  border-color: rgba(56, 189, 248, 0.4);
+}
+
+.service .service-box .service-title {
+  color: #F9FAFB;
+  font-size: 22px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+.service .service-box:hover h4 {
+  color: #38BDF8;
+  text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
+}
+
+/* Hot标签优化 */
+.service .service-hot::before {
+  content: '';
+  height: 70px;
+  width: 70px;
+  position: absolute;
+  right: -5px;
+  top: -5px;
+  background: url('../assets/img/index/hot.png');
+  background-repeat: no-repeat;
+  background-size: 100%;
+  filter: drop-shadow(0 0 10px rgba(255, 103, 57, 0.6));
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+.service-box .title-desc {
+  margin: 18px 0;
+  height: 44px;
+  color: rgba(203, 213, 225, 0.8);
+  line-height: 1.6;
+}
+
+/* 服务标签组 */
+.service .service-tag-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.service .service-tag-group .service-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  padding: 0 14px;
+  height: 26px;
+  color: #94A3B8;
+  background: rgba(15, 23, 42, 0.6);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 999px;
+  transition: all 0.3s ease;
+  font-weight: 500;
+}
+
+.service .service-box:hover .service-tag {
+  color: #38BDF8;
+  background: rgba(56, 189, 248, 0.12);
+  border-color: rgba(56, 189, 248, 0.3);
+  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
+}
+
+
+/* 解决方案 */
+.resolve {
+  background: #0F172A url(../assets/img/index/home-bg.png) no-repeat center center;
+  background-size: cover;
+  position: relative;
+}
+
+/* 添加深色遮罩增强对比度 + 方格线 */
+.resolve::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background:
+    linear-gradient(rgba(56, 189, 248, 0.02) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%);
+  background-size: 50px 50px, 50px 50px, 100% 100%;
+  pointer-events: none;
+}
+
+.resolve .section-content {
+  position: relative;
+  z-index: 1;
+}
+
+.resolve .section-title h2 {
+  color: #F9FAFB;
+  font-size: 40px;
+  font-weight: 700;
+}
+
+.resolve .section-title .section-desc {
+  color: rgba(203, 213, 225, 0.85);
+  font-size: 16px;
+}
+
+.resolve-content {
+  margin: -12px;
+  margin-top: 60px;
+}
+
+/* 新的竖向卡片布局 */
+.resolve-content-new {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 60px;
+  flex-wrap: wrap;
+}
+
+/* 竖向长方形卡片 */
+.resolve-card {
+  width: 150px;
+  height: 500px;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.resolve-card a {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.resolve-card-inner {
+  width: 100%;
+  height: 100%;
+  background: rgba(15, 23, 42, 0.7);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(148, 163, 184, 0.15);
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 80px;
+  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 卡片顶部图片 - 撑满宽度 */
+.resolve-card-inner::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 80px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1;
+}
+
+/* 为不同卡片设置不同图标 */
+.resolve-card:nth-child(1) .resolve-card-inner::after {
+  background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(2) .resolve-card-inner::after {
+  background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(3) .resolve-card-inner::after {
+  background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(4) .resolve-card-inner::after {
+  background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(5) .resolve-card-inner::after {
+  background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(6) .resolve-card-inner::after {
+  background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+.resolve-card:nth-child(7) .resolve-card-inner::after {
+  background-image: url('/web/BlackFruit-web/assets/img/header/dianshang.png');
+}
+
+/* 卡片发光边框效果 */
+.resolve-card-inner::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 1px;
+  background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(99, 102, 241, 0.3));
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+/* 标题 - 默认竖向显示 */
+.resolve-card-title {
+  color: #F9FAFB;
+  font-size: 24px;
+  font-weight: 700;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  letter-spacing: 8px;
+  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 2;
+  position: relative;
+  margin-top: 140px;
+}
+
+/* 内容区域 - 默认隐藏 */
+.resolve-card-content {
+  position: absolute;
+  top: 80px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 32px 24px;
+  opacity: 0;
+  transform: translateY(20px);
+  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  z-index: 1;
+}
+
+.resolve-card-desc {
+  color: rgba(203, 213, 225, 0.9);
+  line-height: 1.8;
+  font-size: 14px;
+}
+
+.resolve-card-link {
+  color: rgba(148, 163, 184, 0.9);
+  font-size: 14px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  transition: all 0.3s ease;
+  margin-top: 20px;
+}
+
+.resolve-card-link .icon-arrow-right {
+  margin-left: 5px;
+  transition: transform 0.3s ease;
+}
+
+/* 悬停效果 */
+.resolve-card:hover {
+  width: 320px;
+  z-index: 10;
+}
+
+.resolve-card:hover .resolve-card-inner {
+  background: rgba(15, 23, 42, 0.9);
+  box-shadow:
+    0 20px 50px rgba(56, 189, 248, 0.25),
+    0 0 50px rgba(56, 189, 248, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  border-color: rgba(56, 189, 248, 0.4);
+  border-radius: 16px;
+}
+
+.resolve-card:hover .resolve-card-inner::before {
+  opacity: 1;
+}
+
+/* 悬停时图片高度展开 */
+.resolve-card:hover .resolve-card-inner::after {
+  width: 100%;
+  height: 140px;
+}
+
+/* 悬停时标题变为横向并移到图片下方 */
+.resolve-card:hover .resolve-card-title {
+  writing-mode: horizontal-tb;
+  text-orientation: mixed;
+  letter-spacing: 2px;
+  position: absolute;
+  top: 160px;
+  left: 24px;
+  right: 24px;
+  margin-top: 0;
+  color: #38BDF8;
+  text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
+  text-align: left;
+}
+
+/* 悬停时显示内容 */
+.resolve-card:hover .resolve-card-content {
+  opacity: 1;
+  transform: translateY(0);
+  top: 200px;
+}
+
+.resolve-card:hover .resolve-card-link {
+  color: #38BDF8;
+}
+
+.resolve-card:hover .resolve-card-link .icon-arrow-right {
+  transform: translateX(5px);
+}
+
+/* 解决方案卡片 - 错落悬浮效果 */
+.resolve-content .resolve-box {
+  position: relative;
+  top: 0;
+  max-width: 335px;
+  padding: 36px;
+  margin: 12px;
+  background: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(148, 163, 184, 0.15);
+  box-shadow:
+    0 8px 32px rgba(15, 23, 42, 0.6),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-blend-mode: overlay;
+  overflow: hidden;
+}
+
+/* 卡片发光边框效果 */
+.resolve-content .resolve-box::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 16px;
+  padding: 1px;
+  background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(99, 102, 241, 0.3));
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+.resolve-content .resolve-box:hover::before {
+  opacity: 1;
+}
+
+/* 错落布局 - 奇数偶数不同的hover效果 */
+.resolve-content .resolve-box:nth-child(even) {
+  transform: translateY(15px);
+}
+
+.resolve-content .resolve-box:hover {
+  transform: translateY(-15px) scale(1.03);
+  box-shadow:
+    0 20px 50px rgba(56, 189, 248, 0.25),
+    0 0 50px rgba(56, 189, 248, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  border-color: rgba(56, 189, 248, 0.4);
+}
+
+.resolve-content .resolve-box:nth-child(even):hover {
+  transform: translateY(-5px) scale(1.03);
+}
+
+.resolve-content .resolve-box:nth-child(1) {
+  background-image: url('../assets/img/index/solution-1.png');
+}
+
+.resolve-content .resolve-box:nth-child(2) {
+  background-image: url('../assets/img/index/solution-2.png');
+}
+
+.resolve-content .resolve-box:nth-child(3) {
+  background-image: url('../assets/img/index/solution-3.png');
+}
+
+.resolve-content .resolve-box:nth-child(4) {
+  background-image: url('../assets/img/index/solution-7.png');
+}
+
+.resolve-content .fboxRow:nth-child(2) .resolve-box:nth-child(1) {
+  background-image: url('../assets/img/index/solution-4.png');
+}
+
+.resolve-content .fboxRow:nth-child(2) .resolve-box:nth-child(2) {
+  background-image: url('../assets/img/index/solution-5.png');
+}
+
+.resolve-content .fboxRow:nth-child(2) .resolve-box:nth-child(3) {
+  background-image: url('../assets/img/index/solution-6.png');
+}
+
+.resolve-content .fboxRow:nth-child(2) .resolve-box:nth-child(4) {
+  background-image: url('../assets/img/index/solution-8.png');
+}
+
+.resolve-content .resolve-box:hover h4,
+.resolve-content .resolve-box:hover .resolve-link {
+  color: #38BDF8;
+  text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
+}
+
+.resolve-content .resolve-box h4 {
+  color: #F9FAFB;
+  font-size: 24px;
+  margin-bottom: 20px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+.resolve-content .resolve-box .title-desc {
+  color: rgba(203, 213, 225, 0.85);
+  line-height: 1.7;
+}
+
+.resolve-content .resolve-box .resolve-link {
+  color: rgba(148, 163, 184, 0.9);
+  margin-top: 60px;
+  font-size: 14px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  transition: all 0.3s ease;
+}
+
+.resolve-content .resolve-box .resolve-link .icon-arrow-right {
+  margin-left: 5px;
+  transition: transform 0.3s ease;
+}
+
+.resolve-content .resolve-box:hover .resolve-link .icon-arrow-right {
+  transform: translateX(5px);
+}
+
+
+
+/* 服务实践 */
+.practice {
+  /* 与解决方案区域衔接的暗色背景 */
+  background: linear-gradient(180deg, #0F172A 0%, #020617 100%);
+  position: relative;
+}
+
+.practice::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image:
+    linear-gradient(rgba(56, 189, 248, 0.02) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px);
+  background-size: 40px 40px;
+  pointer-events: none;
+}
+
+.practice .section-title h2 {
+  color: #F9FAFB;
+  font-size: 40px;
+  font-weight: 700;
+}
+
+.practice .section-title .section-desc {
+  color: rgba(203, 213, 225, 0.85);
+  font-size: 16px;
+}
+
+.practice .practice-content {
+  margin: -12px;
+  margin-top: 50px;
+  flex-wrap: wrap;
+}
+
+/* 实践卡片优化 */
+.practice .practice-box {
+  margin: 12px;
+  padding: 36px;
+  width: 453px;
+  border-radius: 20px;
+  text-align: center;
+  background:
+    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.05) 0%, transparent 60%),
+    rgba(15, 23, 42, 0.85);
+  border: 1px solid rgba(148, 163, 184, 0.15);
+  box-shadow:
+    0 8px 32px rgba(15, 23, 42, 0.6),
+    inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  color: #E5E7EB;
+  flex-shrink: 0;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(10px);
+}
+
+.practice .practice-box:hover {
+  transform: translateY(-8px);
+  box-shadow:
+    0 16px 48px rgba(56, 189, 248, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  border-color: rgba(56, 189, 248, 0.3);
+}
+
+.practice .practice-box img {
+  width: 177px;
+  height: 66px;
+  cursor: pointer;
+  filter: grayscale(0.3) brightness(1.1);
+  transition: all 0.3s ease;
+}
+
+.practice .practice-box:hover img {
+  filter: grayscale(0) brightness(1.2);
+  transform: scale(1.05);
+}
+
+.brand-group {
+  margin: -12px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.practice .brand-box {
+  margin: 12px;
+  width: 216px;
+  height: 140px;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  border: 1px solid rgba(148, 163, 184, 0.1);
+  border-radius: 12px;
+  background: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
+}
+
+.practice .brand-box:hover {
+  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.15);
+  border-color: rgba(56, 189, 248, 0.3);
+  transform: translateY(-5px);
+}
+
+.practice .brand-box img {
+  width: 86px;
+  height: 75px;
+  cursor: pointer;
+  filter: grayscale(0.5);
+  transition: filter 0.3s ease;
+}
+
+.practice .brand-box:hover img {
+  filter: grayscale(0);
+}
+
+/* 基础设施 */
+.section-base {
+  /* 统一为暗色科技风背景 */
+  background:
+    radial-gradient(ellipse at 50% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 60%),
+    radial-gradient(ellipse at 50% 80%, rgba(56, 189, 248, 0.12) 0%, transparent 60%),
+    linear-gradient(180deg, #020617 0%, #0F172A 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.section-base::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image:
+    linear-gradient(rgba(56, 189, 248, 0.02) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px);
+  background-size: 60px 60px;
+  pointer-events: none;
+}
+
+.section-base .base {
+  margin-top: 50px;
+}
+
+.section-base>.section-content {
+  padding: 62px 20px 0;
+  position: relative;
+  z-index: 1;
+}
+
+.section-base .base img {
+  width: calc(100% - 140px);
+  margin-left: 35px;
+  height: 520px;
+  padding-right: 80px;
+  filter: drop-shadow(0 0 30px rgba(56, 189, 248, 0.3));
+  animation: mapGlow 3s ease-in-out infinite alternate;
+}
+
+@keyframes mapGlow {
+  from {
+    filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.2));
+  }
+
+  to {
+    filter: drop-shadow(0 0 40px rgba(56, 189, 248, 0.4));
+  }
+}
+
+.base .base-content {
+  margin-bottom: 100px;
+}
+
+/* 数据展示优化 - 数字计数器效果 */
+.base .base-content h2 {
+  color: #38BDF8;
+  font-size: 56px;
+  font-weight: 700;
+  text-shadow: 0 0 30px rgba(56, 189, 248, 0.5);
+  transition: all 0.3s ease;
+}
+
+.base .base-content .title-desc {
+  white-space: nowrap;
+  color: rgba(203, 213, 225, 0.85);
+  font-size: 15px;
+}
+
+.base .base-content .fboxRow:hover h2 {
+  transform: scale(1.1);
+  text-shadow: 0 0 40px rgba(56, 189, 248, 0.8);
+}
+
+.section-base .section-title h2 {
+  color: #F9FAFB;
+  font-size: 40px;
+  font-weight: 700;
+}
+
+.section-base .section-title .section-desc {
+  color: rgba(203, 213, 225, 0.85);
+  font-size: 16px;
+}
+
+/* ============================================
+   企业荣誉展示区域 - 精致卡片设计
+   ============================================ */
+
+.honor-section {
+  margin-top: 80px;
+  padding: 60px 0;
+  background: transparent;
+}
+
+.honor-title {
+  text-align: center;
+  margin-bottom: 50px;
+}
+
+.honor-title h3 {
+  font-size: 36px;
+  font-weight: 700;
+  color: #F9FAFB;
+  margin-bottom: 12px;
+  background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.honor-subtitle {
+  font-size: 16px;
+  color: rgba(148, 163, 184, 0.9);
+  margin: 0;
+}
+
+/* 荣誉列表 - 横向卡片布局 */
+.honor-list {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  flex-wrap: wrap;
+  padding: 0 20px;
+}
+
+/* 荣誉卡片 */
+.honor-item {
+  position: relative;
+  width: 280px;
+  padding: 40px 30px;
+  background:
+    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 60%),
+    rgba(15, 23, 42, 0.7);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(148, 163, 184, 0.15);
+  border-radius: 16px;
+  text-align: center;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  overflow: hidden;
+  box-shadow:
+    0 8px 32px rgba(15, 23, 42, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+/* 卡片光晕效果 */
+.honor-item::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 60%);
+  opacity: 0;
+  transition: opacity 0.5s ease;
+  pointer-events: none;
+}
+
+.honor-item:hover::before {
+  opacity: 1;
+}
+
+/* 荣誉图标容器 */
+.honor-icon {
+  width: 120px;
+  height: 120px;
+  margin: 0 auto 24px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background:
+    linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
+  border: 2px solid rgba(56, 189, 248, 0.2);
+  transition: all 0.4s ease;
+}
+
+.honor-icon::after {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: 50%;
+  padding: 2px;
+  background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity 0.4s ease;
+}
+
+.honor-item:hover .honor-icon::after {
+  opacity: 1;
+}
+
+.honor-icon img {
+  width: 80px;
+  height: 80px;
+  object-fit: contain;
+  transition: all 0.4s ease;
+  filter: brightness(1.1) drop-shadow(0 4px 12px rgba(56, 189, 248, 0.3));
+}
+
+.honor-item:hover .honor-icon {
+  transform: scale(1.1) rotate(5deg);
+  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);
+}
+
+.honor-item:hover .honor-icon img {
+  transform: scale(1.1);
+  filter: brightness(1.2) drop-shadow(0 6px 20px rgba(56, 189, 248, 0.5));
+}
+
+/* 荣誉名称 */
+.honor-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: #F9FAFB;
+  margin: 0;
+  line-height: 1.4;
+  transition: all 0.3s ease;
+}
+
+.honor-item:hover .honor-name {
+  color: #38BDF8;
+  transform: translateY(-2px);
+}
+
+/* 装饰性边角 */
+.honor-item::after {
+  content: '';
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 40px;
+  height: 40px;
+  background:
+    linear-gradient(to right, transparent 50%, rgba(56, 189, 248, 0.1) 50%),
+    linear-gradient(to bottom, transparent 50%, rgba(56, 189, 248, 0.1) 50%);
+  background-size: 100% 2px, 2px 100%;
+  background-position: 100% 0, 100% 0;
+  background-repeat: no-repeat;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.honor-item:hover::after {
+  opacity: 1;
+}
+
+/* 当荣誉数量为偶数时居中显示 */
+.honor-list:has(.honor-item:nth-child(2):last-child) {
+  justify-content: center;
+}
+
+/* 响应式 */
+@media (max-width: 991px) {
+  .honor-item {
+    width: 240px;
+    padding: 30px 20px;
+  }
+
+  .honor-icon {
+    width: 100px;
+    height: 100px;
+  }
+
+  .honor-icon img {
+    width: 70px;
+    height: 70px;
+  }
+}
+
+@media (max-width: 767px) {
+  .honor-section {
+    margin-top: 40px;
+    padding: 40px 0;
+  }
+
+  .honor-title h3 {
+    font-size: 28px;
+  }
+
+  .honor-list {
+    gap: 20px;
+  }
+
+  .honor-item {
+    width: 100%;
+    max-width: 300px;
+  }
+}
+
+/* 旧样式保留（兼容性） */
+.cert {
+  display: none;
+}
+
+.cert-list {
+  padding: 0 20px;
+}
+
+.cert-list .cert-item {
+  padding: 20px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 200px;
+  transition: all 0.3s ease;
+}
+
+.cert-list .cert-item:hover {
+  transform: translateY(-5px);
+}
+
+.cert-list .cert-item img {
+  height: 60px;
+  width: 60px;
+  cursor: pointer;
+  filter: drop-shadow(0 4px 12px rgba(56, 189, 248, 0.2));
+  transition: all 0.3s ease;
+}
+
+.cert-list .cert-item:hover img {
+  transform: scale(1.1);
+  filter: drop-shadow(0 6px 20px rgba(56, 189, 248, 0.4));
+}
+
+.cert-list .cert-item .title-desc {
+  font-size: 12px;
+  margin-top: 10px;
+  color: rgba(203, 213, 225, 0.8);
+}
+
+/* 新闻 */
+.section.news {
+  background:
+    radial-gradient(ellipse at 30% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
+    radial-gradient(ellipse at 70% 50%, rgba(56, 189, 248, 0.06) 0%, transparent 50%),
+    linear-gradient(180deg, #0F172A 0%, #020617 100%);
+  position: relative;
+}
+
+.section.news::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image:
+    linear-gradient(rgba(56, 189, 248, 0.02) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px);
+  background-size: 35px 35px;
+  pointer-events: none;
+}
+
+.section.news .section-title h2 {
+  color: #F9FAFB;
+  font-size: 40px;
+  font-weight: 700;
+}
+
+.section.news .section-title .section-desc {
+  color: rgba(203, 213, 225, 0.85);
+  font-size: 16px;
+}
+
+.news-content {
+  margin-top: 60px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 130px;
+  position: relative;
+  z-index: 1;
+}
+
+/* 新闻列表块优化 */
+.news-content .news-cont {
+  flex: 1;
+  background:
+    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.06) 0%, transparent 60%),
+    rgba(15, 23, 42, 0.7);
+  backdrop-filter: blur(16px);
+  border-radius: 20px;
+  padding: 28px 28px 20px;
+  box-shadow:
+    0 8px 32px rgba(15, 23, 42, 0.5),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(148, 163, 184, 0.15);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.news-content .news-cont:hover {
+  transform: translateY(-8px);
+  box-shadow:
+    0 16px 48px rgba(56, 189, 248, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  border-color: rgba(56, 189, 248, 0.3);
+}
+
+.news-content .news-head .news-title {
+  position: relative;
+  padding-left: 14px;
+  font-size: 20px;
+  line-height: 24px;
+  height: 24px;
+  color: #F9FAFB;
+  font-weight: 600;
+}
+
+/* 标题左侧发光装饰条 */
+.news-content .news-head .news-title::before {
+  content: '';
+  width: 4px;
+  height: 24px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: linear-gradient(180deg, #38BDF8 0%, #6366F1 100%);
+  border-radius: 2px;
+  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
+}
+
+.news-content .news-head .news-more {
+  font-size: 14px;
+  color: rgba(148, 163, 184, 0.8);
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.news-content .news-head .news-more a {
+  color: inherit;
+}
+
+.news-content .news-head .news-more:hover {
+  color: #38BDF8;
+}
+
+.news-content .news-head .news-more:hover a {
+  color: #38BDF8;
+}
+
+.news-content .news-list {
+  margin-top: 20px;
+}
+
+.news-content .news-list .news-item {
+  line-height: 50px;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px dashed rgba(148, 163, 184, 0.15);
+  transition: all 0.3s ease;
+  padding: 0 5px;
+  border-radius: 8px;
+}
+
+.news-content .news-list .news-item:hover {
+  background: rgba(56, 189, 248, 0.05);
+  border-bottom-color: rgba(56, 189, 248, 0.3);
+}
+
+/* 排名标签优化 - 前三名渐变发光 */
+.news-content .news-cont .news-item:nth-child(1) .number {
+  background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%);
+  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.4);
+  font-weight: 600;
+}
+
+.news-content .news-cont .news-item:nth-child(2) .number {
+  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
+  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
+  font-weight: 600;
+}
+
+.news-content .news-cont .news-item:nth-child(3) .number {
+  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
+  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
+  font-weight: 600;
+}
+
+.news-content .news-item .number {
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 12px;
+  min-width: 20px;
+  height: 20px;
+  background: rgba(71, 85, 105, 0.5);
+  border-radius: 6px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.news-content .news-item .title {
+  font-size: 14px;
+  color: rgba(226, 232, 240, 0.9);
+  transition: all 0.3s ease;
+}
+
+.news-content .news-item:hover .title {
+  color: #38BDF8;
+  padding-left: 5px;
+}
+
+.news-content .news-item .time {
+  color: rgba(148, 163, 184, 0.7);
+  font-size: 13px;
+  min-width: 100px;
+  text-align: right;
+}
+
+
+.index .footer-link {
+  display: block;
+}
+
+.over-hide {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  height: 24px;
+}
+
+.over-hide+p {
+  display: flex;
+  flex-wrap: wrap;
+  word-break: break-all;
+}
+
+/* ============================================
+   全局动画效果 - 滚动触发动画
+   ============================================ */
+
+/* 淡入向上动画 */
+.animate-on-scroll {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.animate-on-scroll.animated {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* 延迟动画 - 用于列表项 */
+.animate-on-scroll.delay-1 {
+  transition-delay: 0.1s;
+}
+
+.animate-on-scroll.delay-2 {
+  transition-delay: 0.2s;
+}
+
+.animate-on-scroll.delay-3 {
+  transition-delay: 0.3s;
+}
+
+.animate-on-scroll.delay-4 {
+  transition-delay: 0.4s;
+}
+
+/* 淡入缩放动画 */
+.scale-on-scroll {
+  opacity: 0;
+  transform: scale(0.9);
+  transition: opacity 0.6s ease, transform 0.6s ease;
+}
+
+.scale-on-scroll.animated {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* 从左侧滑入 */
+.slide-left {
+  opacity: 0;
+  transform: translateX(-50px);
+  transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.slide-left.animated {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* 从右侧滑入 */
+.slide-right {
+  opacity: 0;
+  transform: translateX(50px);
+  transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.slide-right.animated {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* 页面加载动画 */
+@keyframes pageLoadFade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+body {
+  animation: pageLoadFade 0.5s ease-in;
+}
+
+/* 平滑滚动 */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Section标题统一样式优化 */
+.section-title {
+  position: relative;
+  z-index: 1;
+}
+
+.section-title h2 {
+  position: relative;
+  display: inline-block;
+}
+
+/* 为section标题添加底部装饰线 */
+.section-title h2::after {
+  content: '';
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60px;
+  height: 3px;
+  background: linear-gradient(90deg, #38BDF8 0%, #6366F1 100%);
+  border-radius: 2px;
+  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
+}
+
+/* 悬停时的微交互 */
+.service-box,
+.resolve-box,
+.practice-box,
+.news-cont {
+  will-change: transform;
+}
+
+/* 性能优化：减少重绘 */
+.banner-cont .swiper-slide::before,
+.banner-cont .swiper-slide::after {
+  will-change: transform, opacity;
+}
+
+/* 禁用不必要的动画以提升性能 */
+@media (prefers-reduced-motion: reduce) {
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ============================================
+   响应式优化
+   ============================================ */
+
+/* 大屏幕 1400px+ */
+@media (min-width: 1400px) {
+  .banner-cont .swiper-slide h1 {
+    font-size: 64px;
+  }
+
+  /* 移除 section-content 的 max-width 限制，保持容器系统统一 */
+
+  .section-title h2 {
+    font-size: 44px;
+  }
+}
+
+/* 中等屏幕 1200px - 1399px */
+@media (max-width: 1399px) {
+  .banner-cont .swiper-slide {
+    height: 600px;
+  }
+
+  .banner-cont .swiper-slide h1 {
+    font-size: 52px;
+  }
+
+  .banner-cont .swiper-slide .section-content {
+    max-width: 600px;
+  }
+
+  .service .service-box {
+    min-height: 220px;
+    padding: 28px;
+  }
+}
+
+/* 小屏幕 992px - 1199px */
+@media (max-width: 1199px) {
+  .banner-cont .swiper-slide {
+    height: 550px;
+  }
+
+  .banner-cont .swiper-slide h1 {
+    font-size: 44px;
+  }
+
+  /* 小屏幕下保持左对齐布局 */
+  .banner-cont .swiper-slide .section-content>* {
+    max-width: 500px;
+  }
+
+  /* 已废弃：背景图不需要宽度设置
+  .banner-cont .swiper-slide .img {
+    width: 50%;
+  }
+  */
+
+  .banner-s .banner-list {
+    gap: 16px;
+    padding: 0 16px;
+  }
+
+  .banner-s .banner-list .banner-item {
+    flex: 0 1 calc(50% - 16px);
+    padding: 28px 32px;
+  }
+
+  .section-title h2 {
+    font-size: 36px;
+  }
+
+  .service .service-box {
+    min-height: 200px;
+    padding: 24px;
+  }
+
+  .resolve-content .resolve-box {
+    max-width: 300px;
+    padding: 30px;
+  }
+
+  .news-content {
+    gap: 60px;
+  }
+}
+
+/* 平板 768px - 991px */
+@media (max-width: 991px) {
+  .banner-cont .swiper-slide {
+    height: 500px;
+  }
+
+  .banner-cont .swiper-slide h1 {
+    font-size: 36px;
+  }
+
+  .banner-cont .banner-desc {
+    font-size: 15px;
+  }
+
+  /* 平板尺寸下，调整遮罩透明度，文字居中 */
+  .banner-cont .swiper-slide::before {
+    background: linear-gradient(rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.7) 100%);
+  }
+
+  .banner-cont .swiper-slide .section-content {
+    text-align: center;
+  }
+
+  .banner-cont .swiper-slide .section-content>* {
+    max-width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .banner-tags {
+    justify-content: center;
+  }
+
+  .banner-s .banner-list {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .banner-s .banner-list .banner-item {
+    flex: 1 1 100%;
+    width: 100%;
+    max-width: 100%;
+    padding: 24px 28px;
+  }
+
+  .banner-s .banner-list .banner-item:not(:last-child)::after {
+    display: none;
+  }
+
+  /* 热销产品表格在平板上开始使用横向滚动 */
+  .products-table-wrapper {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .products-table {
+    min-width: 800px;
+  }
+
+  .section-title h2 {
+    font-size: 32px;
+  }
+
+  .service-content .fboxRow {
+    flex-direction: column;
+  }
+
+  .service .service-box {
+    max-width: 100%;
+  }
+
+  .resolve-content .fboxRow {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .resolve-content .resolve-box {
+    max-width: 500px;
+    width: 100%;
+  }
+
+  .base .base-content h2 {
+    font-size: 48px;
+  }
+
+  .section-base .base img {
+    width: 100%;
+    padding-right: 0;
+    margin-left: 0;
+  }
+
+  .news-content {
+    flex-direction: column;
+    gap: 30px;
+  }
+
+  .practice .practice-box {
+    width: 100%;
+    max-width: 500px;
+  }
+}
+
+/* 手机 576px - 767px */
+@media (max-width: 767px) {
+
   /* ===== 导航栏 - 极简设计 ===== */
   #index .nav-header {
     padding: 0 8px;
@@ -1034,6 +2769,400 @@
   }
 
   /* 移动端 banner-list 网格布局 */
+  @media (max-width: 768px) {
+    .banner .banner-s .banner-list {
+      gap: 6px !important;
+      display: grid !important;
+      grid-template-columns: repeat(2, 1fr) !important;
+      width: 100% !important;
+      padding: 0 !important;
+    }
+  }
+
+  .banner-s .banner-list .banner-item {
+    padding: 10px 10px !important;
+    gap: 8px !important;
+    flex: none !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    text-align: left !important;
+    min-height: 85px !important;
+    max-height: none !important;
+    justify-content: flex-start !important;
+    border-radius: 0 !important;
+    width: auto !important;
+    min-width: auto !important;
+    max-width: none !important;
+    background: rgba(15, 23, 42, 0.6) !important;
+    border: 1px solid rgba(148, 163, 184, 0.15) !important;
+  }
+
+  .banner-s .banner-list .banner-item .banner-item-icon {
+    width: 30px;
+    height: 30px;
+    margin-bottom: 0;
+    margin-right: 8px;
+    flex-shrink: 0;
+  }
+
+  .banner-s .banner-list .banner-item .banner-item-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 3px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .banner-s .banner-list .banner-item h5 {
+    font-size: 11px !important;
+    margin-bottom: 0 !important;
+    line-height: 1.3;
+    color: #E5E7EB;
+  }
+
+  .banner-s .banner-list .banner-item .title-desc {
+    font-size: 9px !important;
+    line-height: 1.3;
+    margin: 0 !important;
+    color: rgba(203, 213, 225, 0.8);
+  }
+
+  /* ===== 热销产品 - 精简卡片 ===== */
+  .hot-products {
+    margin-top: -50px;
+    padding: 20px 0 30px !important;
+  }
+
+  .hot-products-title {
+    margin-bottom: 20px;
+  }
+
+  .hot-products-title h3 {
+    font-size: 20px;
+    margin-bottom: 6px;
+  }
+
+  .hot-products-title .subtitle {
+    font-size: 11px;
+  }
+
+  .products-table-wrapper {
+    padding: 0 12px;
+  }
+
+  /* 表格转卡片 */
+  .products-table,
+  .products-table thead,
+  .products-table tbody,
+  .products-table tr,
+  .products-table td {
+    display: block;
+  }
+
+  .products-table thead {
+    display: none;
+  }
+
+  .products-table tbody tr {
+    margin-bottom: 12px;
+    padding: 14px;
+    border-radius: 8px;
+  }
+
+  .products-table tbody tr:hover {
+    transform: none;
+  }
+
+  .products-table tbody td {
+    padding: 8px 0 8px 90px;
+    font-size: 12px;
+  }
+
+  .products-table tbody td::before {
+    left: 14px;
+    font-size: 11px;
+  }
+
+  .products-table tbody td:nth-child(1)::before {
+    content: "产品";
+  }
+
+  .products-table .product-name {
+    font-size: 13px;
+  }
+
+  .products-table .product-tag {
+    font-size: 10px;
+    padding: 1px 6px;
+  }
+
+  .products-table .product-price {
+    font-size: 16px;
+  }
+
+  .products-table .product-price .unit {
+    font-size: 11px;
+  }
+
+  .products-table .btn-buy {
+    padding: 6px 16px;
+    font-size: 11px;
+  }
+
+  /* ===== Section 通用 - 紧凑间距 ===== */
+  .section {
+    padding: 30px 0 !important;
+  }
+
+  .section-content {
+    padding: 30px 12px !important;
+  }
+
+  .section-title {
+    margin-bottom: 20px;
+  }
+
+  .section-title h2 {
+    font-size: 22px;
+    margin-bottom: 8px;
+  }
+
+  .section-title .section-desc {
+    font-size: 12px;
+    line-height: 1.5;
+  }
+
+  .section-title h2::after {
+    width: 35px;
+    height: 2px;
+    bottom: -6px;
+  }
+
+  /* ===== 解决方案 - 竖向卡片列表 ===== */
+  .solution-wrapper {
+    margin-top: 20px;
+  }
+
+  /* 隐藏按钮导航，改用卡片模式 */
+  .solution-tabs {
+    display: none;
+  }
+
+  .solution-slider {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    min-height: auto;
+  }
+
+  /* 显示所有幻灯片作为普通卡片 */
+  .solution-slide {
+    display: block !important;
+    opacity: 1 !important;
+  }
+
+  .solution-content {
+    min-height: auto;
+    padding: 14px 12px !important;
+    gap: 12px;
+    flex-direction: column;
+    border-radius: 8px;
+    background: rgba(30, 41, 59, 0.6);
+    border: 1px solid rgba(148, 163, 184, 0.1);
+  }
+
+  .solution-content:hover {
+    background: rgba(30, 41, 59, 0.8);
+    border-color: rgba(56, 189, 248, 0.2);
+  }
+
+  .solution-text {
+    padding: 0;
+  }
+
+  .solution-text h3 {
+    font-size: 16px;
+    margin-bottom: 4px;
+    color: #E5E7EB;
+  }
+
+  .solution-subtitle {
+    font-size: 10px;
+    margin-bottom: 8px;
+    color: rgba(148, 163, 184, 0.8);
+  }
+
+  .solution-desc {
+    margin-bottom: 10px;
+  }
+
+  .solution-desc p {
+    font-size: 10px;
+    line-height: 1.5;
+    margin-bottom: 4px;
+    color: rgba(203, 213, 225, 0.8);
+    display: block;
+  }
+
+  .solution-desc p:nth-child(n+2) {
+    display: none;
+    /* 小屏只显示第1段 */
+  }
+
+  .solution-link {
+    padding: 6px 16px;
+    font-size: 10px;
+    align-self: flex-start;
+  }
+
+  .solution-image {
+    width: 100%;
+    height: 120px;
+    object-fit: cover;
+    border-radius: 4px;
+    order: -1;
+    /* 图片移到上方 */
+  }
+
+  /* ===== 基础设施 - 简化显示 ===== */
+  .section-base {
+    padding: 25px 0 !important;
+  }
+
+  .base .base-content {
+    margin-top: 20px;
+    margin-bottom: 30px;
+  }
+
+  .base .base-content .fboxRow {
+    margin-bottom: 12px;
+  }
+
+  .base .base-content h2 {
+    font-size: 32px;
+  }
+
+  .base .base-content .title-desc {
+    font-size: 11px;
+  }
+
+  .section-base .base {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .section-base .base img {
+    width: 90%;
+    max-width: 400px;
+    height: auto;
+    margin: 20px auto 0;
+    padding: 0;
+  }
+
+  /* ===== 荣誉展示 - 紧凑布局 ===== */
+  .honor-section {
+    margin-top: 30px;
+    padding: 25px 0;
+  }
+
+  .honor-title {
+    margin-bottom: 20px;
+  }
+
+  .honor-title h3 {
+    font-size: 20px;
+    margin-bottom: 6px;
+  }
+
+  .honor-subtitle {
+    font-size: 11px;
+  }
+
+  .honor-list {
+    gap: 12px;
+    padding: 0 12px;
+  }
+
+  .honor-item {
+    width: calc(50% - 6px);
+    /* 改为2列布局 */
+    padding: 20px 16px;
+  }
+
+  .honor-icon {
+    width: 80px;
+    height: 80px;
+    margin-bottom: 12px;
+  }
+
+  .honor-icon img {
+    width: 50px;
+    height: 50px;
+  }
+
+  .honor-name {
+    font-size: 13px;
+  }
+
+  /* ===== 新闻区域 - 紧凑 ===== */
+  .section.news {
+    padding: 25px 0 !important;
+  }
+
+  .news-content {
+    margin-top: 20px;
+    gap: 20px;
+  }
+
+  .news-content .news-cont {
+    padding: 16px;
+  }
+
+  .news-content .news-head {
+    margin-bottom: 12px;
+  }
+
+  .news-content .news-head .news-title {
+    font-size: 16px;
+    height: auto;
+    line-height: 1.4;
+  }
+
+  .news-content .news-head .news-title::before {
+    height: 18px;
+  }
+
+  .news-content .news-head .news-more {
+    font-size: 11px;
+  }
+
+  .news-content .news-item {
+    line-height: 36px;
+    padding: 0 4px;
+  }
+
+  .news-content .news-item .number {
+    min-width: 18px;
+    height: 18px;
+    font-size: 11px;
+    margin-right: 8px;
+  }
+
+  .news-content .news-item .title {
+    font-size: 12px;
+  }
+
+  .news-content .news-item .time {
+    font-size: 10px;
+    min-width: 70px;
+  }
+}
+
+/* 小手机 最大575px */
+@media (max-width: 575px) {
+
   /* ===== 导航栏 - 超紧凑 ===== */
   #index .nav-header {
     padding: 0 10px;
@@ -1434,6 +3563,8 @@
 }
 
 /* 小屏手机优化（480px） */
+@media (max-width: 480px) and (min-width: 361px) {
+
   /* ===== 导航栏 ===== */
   #index .nav-header {
     height: 46px !important;
@@ -1540,6 +3671,8 @@
 }
 
 /* 超小屏适配（320px） */
+@media (max-width: 360px) {
+
   /* ===== 导航栏 - 极限压缩 ===== */
   #index .nav-header {
     padding: 0 8px;
@@ -1992,6 +4125,8 @@
 }
 
 /* 性能优化提示 */
+@media (max-width: 768px) {
+
   /* 在移动设备上禁用一些复杂动画以提升性能 */
   .banner-cont .swiper-slide::before,
   .banner-cont .swiper-slide::after,
@@ -2515,6 +4650,72 @@
 以下样式已被注释，因为与第 698 行的移动端样式冲突
 导致 swiper-slide 高度变成 400px 而不是 200px
 
+@media (max-width: 768px) {
+  .banner-cont .swiper-slide {
+    height: auto !important;
+    min-height: 400px;
+    padding-bottom: 60px;
+  }
+
+  .banner-cont .swiper-slide .section-content {
+    position: relative;
+    top: auto;
+    left: auto;
+    transform: none;
+    padding: 80px 20px 40px;
+    text-align: center;
+  }
+
+  .banner-cont .swiper-slide .section-content .title-wrapper {
+    max-width: 100%;
+    margin-bottom: 20px;
+  }
+
+  .banner-cont .swiper-slide h1 {
+    font-size: 32px;
+    line-height: 1.3;
+  }
+
+  .banner-tags {
+    justify-content: center;
+    margin-bottom: 12px;
+  }
+
+  .banner-cont .banner-desc {
+    font-size: 15px;
+    margin: 0 auto 30px;
+    line-height: 1.6;
+  }
+
+  /* Feature Cards (Banner-S) */
+/* 注意：banner-list 的桌面样式已在第 831 行定义 (flex布局，4列)
+     移动端样式在第 945 行定义 (grid布局，2列)
+     这里的重复样式已被移除以避免冲突 */
+
+/* 以下样式已注释，因为会覆盖桌面端的flex布局
+  .banner .banner-s {
+    margin-top: 0;
+    padding-top: 0;
+    padding-bottom: 40px;
+  }
+
+  .banner .banner-s .banner-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 15px;
+    padding: 0 15px;
+  }
+
+  .banner-s .banner-list .banner-item {
+    max-width: 100%;
+    min-width: 0;
+    flex: auto;
+  }
+  */
+
+/* Mobile Overrides Group */
+@media (max-width: 768px) {
+
   /* Hot Products - Mobile Slider */
   .hot-products-pagination {
     position: relative;
@@ -2642,4 +4843,4 @@
      For now, let's assume we stack them or show a simple list.
      Actually, if HTML structure depends on clicks to show/hide, we need JS or CSS modification.
      Let's style the active one well first, or maybe show all?
-  */
+  */
\ No newline at end of file