diff --git a/css/index.css b/css/index.css
index 04d29d0..3f313e5 100644
--- a/css/index.css
+++ b/css/index.css
@@ -70,23 +70,23 @@
   pointer-events: auto;
 }
 
-/* 3D 地球容器：位于轮播图偏中右位置 */
+/* 3D 地球容器：与 section-content 右对齐（和下方卡片区域右边保持一致） */
 .banner-globe {
   position: absolute;
   top: 50%;
-  right: 6%;              /* 略向中间移动一点，留出更大的展示区域 */
+  /* 相对于 section-content 右对齐，section-content padding-right 为 20px */
+  right: 20px;
   transform: translateY(-50%);
-  /* 展示区域足够大，球体本身通过 three.js 缩放变小 */
   width: 420px;
   height: 420px;
   z-index: 20;            /* 高于轮播图与文案层 */
   pointer-events: none;   /* 不影响轮播图滑动与点击 */
 }
 
-/* 中等屏幕下缩小地球，避免挡住文案 */
+/* 中等屏幕下稍微缩小地球，避免挡住文案 */
 @media (max-width: 1400px) {
   .banner-globe {
-    right: 4%;
+    right: 20px;
     width: 360px;
     height: 360px;
   }
diff --git a/index.html b/index.html
index 3a46587..9ec88b9 100644
--- a/index.html
+++ b/index.html
@@ -38,10 +38,10 @@
               style="display: none;"
             ></a>
           </div>
+          <!-- 3D 地球容器（Three.js 渲染输出挂载到这里），与下方卡片区域共用 section-content 对齐 -->
+          <div id="bannerGlobe" class="banner-globe"></div>
         </div>
       </div>
-      <!-- 3D 地球容器（Three.js 渲染输出挂载到这里） -->
-      <div id="bannerGlobe" class="banner-globe"></div>
     </div>
     </div>
     <div class="banner-s">