diff --git a/css/index.css b/css/index.css
index 6343168..5934f41 100644
--- a/css/index.css
+++ b/css/index.css
@@ -697,12 +697,12 @@
 
 @media (max-width: 768px) {
 
-  /* 调整 banner 高度 - 进一步缩小 */
+  /* 调整 banner 高度 - 移动端优化 */
   .banner-cont .swiper-slide {
-    height: 100px;
-    /* Reduced from 240px to 200px */
+    height: 180px;
+    /* 调整为合适的高度 */
     padding-top: 56px;
-    /* Compensate for sticky header overlap if needed, or if under header */
+    /* 补偿顶部导航栏高度 */
     margin-top: 0;
 
     /* Mobile Background Optimization */
@@ -4935,120 +4935,123 @@ html {
 
 /* Mobile Overrides for Index Page */
 
+/* 注释掉重复的 banner 样式，统一使用第 698 行的移动端样式 */
+/*
 @media (max-width: 768px) {
 
   /* Banner Adjustment */
-  .banner-cont .swiper-slide {
-    /* height: auto !important; */
-    /* min-height: 400px; */
-    height: 50px !important;
-    padding-bottom: 60px;
-    /* Space for pagination */
-  }
+.banner-cont .swiper-slide {
+  /* height: auto !important; */
+  /* min-height: 400px; */
+  height: 50px !important;
+  padding-bottom: 60px;
+  width: 50%;
+  /* Space for pagination */
+}
 
-  .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 {
+  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 .section-content .title-wrapper {
+  max-width: 100%;
+  margin-bottom: 20px;
+}
 
-  .banner-cont .swiper-slide h1 {
-    font-size: 32px;
-    line-height: 1.3;
-  }
+.banner-cont .swiper-slide h1 {
+  font-size: 32px;
+  line-height: 1.3;
+}
 
-  .banner-tags {
-    justify-content: center;
-    margin-bottom: 12px;
-  }
+.banner-tags {
+  justify-content: center;
+  margin-bottom: 12px;
+}
 
-  .banner-cont .banner-desc {
-    font-size: 15px;
-    margin: 0 auto 30px;
-    line-height: 1.6;
-  }
+.banner-cont .banner-desc {
+  font-size: 15px;
+  margin: 0 auto 30px;
+  line-height: 1.6;
+}
 
-  /* Feature Cards (Banner-S) */
-  .banner .banner-s {
-    margin-top: 0;
-    padding-top: 0;
-    padding-bottom: 40px;
-  }
+/* Feature Cards (Banner-S) */
+.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 .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;
-  }
+.banner-s .banner-list .banner-item {
+  max-width: 100%;
+  min-width: 0;
+  flex: auto;
+}
 
-  /* Hot Products - Card View */
-  .products-table thead {
-    display: none;
-  }
+/* Hot Products - Card View */
+.products-table thead {
+  display: none;
+}
 
-  .products-table,
-  .products-table tbody,
-  .products-table tr,
-  .products-table td {
-    display: block;
-    width: 100%;
-  }
+.products-table,
+.products-table tbody,
+.products-table tr,
+.products-table td {
+  display: block;
+  width: 100%;
+}
 
-  .products-table tr {
-    margin-bottom: 15px;
-    background: rgba(30, 41, 59, 0.4);
-    border: 1px solid rgba(148, 163, 184, 0.1);
-    border-radius: 12px;
-    padding: 15px;
-  }
+.products-table tr {
+  margin-bottom: 15px;
+  background: rgba(30, 41, 59, 0.4);
+  border: 1px solid rgba(148, 163, 184, 0.1);
+  border-radius: 12px;
+  padding: 15px;
+}
 
-  .products-table td {
-    text-align: right;
-    padding: 8px 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid rgba(148, 163, 184, 0.05);
-  }
+.products-table td {
+  text-align: right;
+  padding: 8px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.05);
+}
 
-  .products-table td:last-child {
-    border-bottom: none;
-  }
+.products-table td:last-child {
+  border-bottom: none;
+}
 
-  .products-table td::before {
-    content: attr(data-label);
-    float: left;
-    font-weight: 600;
-    color: rgba(148, 163, 184, 0.8);
-  }
+.products-table td::before {
+  content: attr(data-label);
+  float: left;
+  font-weight: 600;
+  color: rgba(148, 163, 184, 0.8);
+}
 
-  /* Solution Wrapper - Stacked */
-  .solution-wrapper {
-    display: flex;
-    flex-direction: column;
-  }
+/* Solution Wrapper - Stacked */
+.solution-wrapper {
+  display: flex;
+  flex-direction: column;
+}
 
-  .solution-tabs {
-    display: none;
-    /* Hide desktop tabs */
-  }
+.solution-tabs {
+  display: none;
+  /* Hide desktop tabs */
+}
 
-  /* We might need to restructure the HTML to show all solutions stacked or use a mobile slider
+/* We might need to restructure the HTML to show all solutions stacked or use a mobile slider
      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?