diff --git a/src/components/Pagination/index.module.css b/src/components/Pagination/index.module.css
index dcf0509..c994f31 100644
--- a/src/components/Pagination/index.module.css
+++ b/src/components/Pagination/index.module.css
@@ -2,23 +2,23 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
+    gap: .5rem;
     flex-wrap: wrap;
 }
 
 .item,
 .itemActive,
 .arrow {
-    width: 45px;
-    height: 45px;
+    width: 2.8125rem;
+    height: 2.8125rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: 5px;
-    border: 1px solid #e0e0e0;
+    border-radius: .3125rem;
+    border: .0625rem solid #e0e0e0;
     background: #fff;
     color: #222;
-    font-size: 14px;
+    font-size: .875rem;
     font-weight: 500;
     font-family: inherit;
     cursor: pointer;
@@ -54,13 +54,13 @@
 }
 
 .ellipsis {
-    width: 45px;
-    height: 45px;
+    width: 2.8125rem;
+    height: 2.8125rem;
     font-weight: 400;
-    font-size: 20px;
+    font-size: 1.25rem;
     color: rgba(0, 0, 0, 0.25);
-    line-height: 45px;
-    letter-spacing: 2px;
+    line-height: 2.8125rem;
+    letter-spacing: .125rem;
     text-align: center;
     font-style: normal;
     text-transform: none;
diff --git a/src/components/ScreenOpen/index.module.css b/src/components/ScreenOpen/index.module.css
index 78bb7cc..7c7ccfc 100644
--- a/src/components/ScreenOpen/index.module.css
+++ b/src/components/ScreenOpen/index.module.css
@@ -15,7 +15,7 @@
         flex-direction: row;
         overflow: hidden;
         img {
-            width: 100px;
+            width: 6.25rem;
         }
     }
 
diff --git a/src/components/SineWaveTimeline/index.module.css b/src/components/SineWaveTimeline/index.module.css
index 2d880bc..804a247 100644
--- a/src/components/SineWaveTimeline/index.module.css
+++ b/src/components/SineWaveTimeline/index.module.css
@@ -48,18 +48,18 @@
 .labelBlock {
   position: absolute;
   pointer-events: auto;
-  min-width: 160px;
-  max-width: 550px;
-  min-height: 200px;
-  padding: 0 20px;
+  min-width: 10rem;
+  max-width: 34.375rem;
+  min-height: 12.5rem;
+  padding: 0 1.25rem;
 }
 
 .labelBlock.top {
-  margin-bottom: 4px;
+  margin-bottom: .25rem;
 }
 
 .labelBlock.bottom {
-  margin-top: 4px;
+  margin-top: .25rem;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -69,20 +69,20 @@
   font-size: 1.125rem;
   font-weight: 600;
   color: #14355c;
-  margin-bottom: 6px;
+  margin-bottom: .375rem;
   line-height: 1.3;
 }
 
 .labelList {
   margin: 0;
-  font-size: 0.875rem;
+  font-size: .875rem;
   line-height: 1.6;
   color: #333;
   list-style: disc;
 }
 
 .labelList li {
-  margin-bottom: 4px;
+  margin-bottom: .25rem;
   list-style: disc;
   margin-left: 1.25em;
 }
diff --git a/src/components/YearPicker/YearPicker.module.css b/src/components/YearPicker/YearPicker.module.css
index 6d9036f..d2fb16d 100644
--- a/src/components/YearPicker/YearPicker.module.css
+++ b/src/components/YearPicker/YearPicker.module.css
@@ -8,12 +8,12 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.5rem 0.6875rem;
+  gap: .5rem;
+  padding: .5rem .6875rem;
   background: #14355C;
   color: #fff;
   border: 1px solid rgba(255, 255, 255, 0.25);
-  border-radius: 0.375rem;
+  border-radius: .375rem;
   cursor: pointer;
   user-select: none;
 }
@@ -58,10 +58,10 @@
   width: 1rem;
   height: 1rem;
   color: rgba(255, 255, 255, 0.85);
-  font-size: 0.875rem;
+  font-size: .875rem;
   line-height: 1;
   cursor: pointer;
-  border-radius: 0.125rem;
+  border-radius: .125rem;
 }
 
 .clear:hover {
@@ -80,23 +80,23 @@
 
 .panel {
   position: absolute;
-  top: calc(100% + 0.25rem);
+  top: calc(100% + .25rem);
   left: 0;
   z-index: 1050;
   min-width: 13.75rem;
-  padding: 0.75rem;
+  padding: .75rem;
   background: #14355C;
   border: 1px solid rgba(255, 255, 255, 0.25);
-  border-radius: 0.5rem;
-  box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.3);
+  border-radius: .5rem;
+  box-shadow: 0 .375rem 1rem rgba(0, 0, 0, 0.3);
 }
 
 .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 0.75rem;
-  padding: 0 0.25rem;
+  margin-bottom: .75rem;
+  padding: 0 .25rem;
 }
 
 .navBtn {
@@ -109,9 +109,9 @@
   background: transparent;
   color: #fff;
   border: none;
-  border-radius: 0.25rem;
+  border-radius: .25rem;
   cursor: pointer;
-  font-size: 0.75rem;
+  font-size: .75rem;
 }
 
 .navBtn:hover:not(:disabled) {
@@ -125,14 +125,14 @@
 
 .decadeLabel {
   color: #fff;
-  font-size: 0.875rem;
+  font-size: .875rem;
   font-weight: 500;
 }
 
 .yearGrid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 0.25rem;
+  gap: .25rem;
 }
 
 .yearCell {
@@ -142,9 +142,9 @@
   background: transparent;
   color: #fff;
   border: none;
-  border-radius: 0.25rem;
+  border-radius: .25rem;
   cursor: pointer;
-  font-size: 0.875rem;
+  font-size: .875rem;
   transition: background 0.2s;
 }
 
diff --git a/src/components/YearPicker/index.tsx b/src/components/YearPicker/index.tsx
index 716cb5d..dfb03fd 100644
--- a/src/components/YearPicker/index.tsx
+++ b/src/components/YearPicker/index.tsx
@@ -94,7 +94,7 @@ export default function YearPicker({
           {value != null ? `${value}年` : placeholder}
         </span>
         <div className={styles.icons}>
-          <img className={`${styles.arrow} ${open ? styles.arrowOpen : ""}`} src="/images/icons/icon-arrow-down.png" alt="arrow-down" style={{ width: "24px", height: "24px" }} />
+          <img className={`${styles.arrow} ${open ? styles.arrowOpen : ""}`} src="/images/icons/icon-arrow-down.png" alt="arrow-down" style={{ width: "1.5rem", height: "1.5rem" }} />
         </div>
       </div>
 
diff --git a/src/components/layout/AnimateTopCard/index.module.css b/src/components/layout/AnimateTopCard/index.module.css
index 84f524c..3d7029f 100644
--- a/src/components/layout/AnimateTopCard/index.module.css
+++ b/src/components/layout/AnimateTopCard/index.module.css
@@ -29,7 +29,7 @@
             transition-delay: 0s;
 
             .cardTitle span {
-                left: 30px;
+                left: 1.875rem;
                 transform: translateX(0);
                 text-align: left;
                 transition-delay: 0s;
@@ -42,33 +42,33 @@
         }
 
         .cardTitleUnderline::before {
-            left: 30px;
+            left: 1.875rem;
             transform: translateX(0);
             transition-delay: 0s;
         }
     }
 
     .cardInner {
-        padding: 50px;
+        padding: 3.125rem;
         width: 100%;
         height: 100%;
         background: transparent;
         transition: all 0.3s ease;
         transition-delay: 0.2s;
         position: absolute;
-        top: calc(100% - 170px);
+        top: calc(100% - 10.625rem);
     }
 
     .cardTitle {
         position: relative;
         font-weight: 500;
-        font-size: 24px;
+        font-size: 1.5rem;
         color: #FFFFFF;
-        height: 34px;
-        line-height: 34px;
+        height: 2.125rem;
+        line-height: 2.125rem;
         font-style: normal;
         text-transform: none;
-        padding: 0 30px;
+        padding: 0 1.875rem;
 
         span {
             display: inline-block;
@@ -91,19 +91,19 @@
     .cardTitleUnderline {
         position: relative;
         width: 100%;
-        height: 1px;
+        height: .0625rem;
         background: rgba(255,255,255,0.3);
-        margin-top: 30px;
+        margin-top: 1.875rem;
 
         &::before {
             content: '';
             display: block;
-            width: 300px;
-            height: 3px;
+            width: 18.75rem;
+            height: .1875rem;
             background: rgba(255,255,255,1);
             position: absolute;
             left: 50%;
-            top: -1px;
+            top: -0.0625rem;
             transform: translateX(-50%);
             transition: all 0.3s ease;
             transition-delay: 0.2s;
@@ -111,12 +111,12 @@
     }
 
     .cardContent {
-        margin-top: 20px;
-        padding: 0 30px;
+        margin-top: 1.25rem;
+        padding: 0 1.875rem;
         font-weight: 400;
-        font-size: 18px;
+        font-size: 1.125rem;
         color: #FFFFFF;
-        line-height: 34px;
+        line-height: 2.125rem;
         text-align: justify;
         font-style: normal;
         text-transform: none;
@@ -125,16 +125,16 @@
 
         .cardMore {
             display: inline-block;
-            margin-top: 60px;
-            width: 104px;
-            height: 38px;
-            border-radius: 0px 0px 0px 0px;
-            border: 1px solid #FFFFFF;
+            margin-top: 3.75rem;
+            width: 6.5rem;
+            height: 2.375rem;
+            border-radius: 0rem 0rem 0rem 0rem;
+            border: .0625rem solid #FFFFFF;
 
             font-weight: 400;
-            font-size: 16px;
+            font-size: 1rem;
             color: #FFFFFF;
-            line-height: 22px;
+            line-height: 1.375rem;
             text-align: center;
             display: flex;
             align-items: center;
diff --git a/src/components/layout/Article/index.module.css b/src/components/layout/Article/index.module.css
index c86a304..92ddf15 100644
--- a/src/components/layout/Article/index.module.css
+++ b/src/components/layout/Article/index.module.css
@@ -1,11 +1,16 @@
 .article {
     width: 100%;
     min-height: 100vh;
-    padding: 120px auto;
+    padding: 7.5rem 0;
+
+    .articleHeaderLine, .articleHeader, .articleContent {
+        width: 90%;
+        margin: 0 auto;
+    }
 
     .articleHeaderLine {
-        height: 100px;
-        border-bottom: 1px solid #222222;
+        height: 6.25rem;
+        border-bottom: .0625rem solid #222222;
         display: flex;
 
         .articleHeaderLineBack {
@@ -16,35 +21,35 @@
     }
 
     .articleHeader {
-        padding: 60px 0;
-        margin-bottom: 60px;
+        padding: 3.75rem 0;
+        margin-bottom: 3.75rem;
 
         .articleHeaderTitle {
             font-weight: 700;
-            font-size: 32px;
+            font-size: 2rem;
             color: #222222;
-            line-height: 42px;
+            line-height: 2.625rem;
             text-align: center;
             font-style: normal;
             text-transform: none;
-            margin-bottom: 20px;
+            margin-bottom: 1.25rem;
         }
         
         .articleHeaderTimeLine {
             font-weight: 400;
-            font-size: 16px;
+            font-size: 1rem;
             color: #666666;
-            line-height: 22px;
+            line-height: 1.375rem;
             text-align: left;
             font-style: normal;
             text-transform: none;
             display: flex;
-            gap: 40px;
+            gap: 2.5rem;
         }
 
     }
 
     .articleContent {
-        font-size: 20px;
+        font-size: 1.25rem;
     }
 }
\ No newline at end of file
diff --git a/src/components/layout/Article/index.tsx b/src/components/layout/Article/index.tsx
index 13394b7..c25c202 100644
--- a/src/components/layout/Article/index.tsx
+++ b/src/components/layout/Article/index.tsx
@@ -13,7 +13,7 @@ export default function Article({ data }: { data: Data }) {
         <div className={styles.article}>
             <div className={styles.articleHeaderLine}>
                 <div className={styles.articleHeaderLineBack} onClick={() => window.history.back()}>
-                    <img src="/images/icons/icon-arrowleft.png" alt="arrowleft" style={{ width: "20px", height: "20px" }} />
+                    <img src="/images/icons/icon-arrowleft.png" alt="arrowleft" style={{ width: "1.25rem", height: "1.25rem" }} />
                     <span>返回</span>
                 </div>
             </div>
diff --git a/src/components/layout/BottomTabsSection/index.module.css b/src/components/layout/BottomTabsSection/index.module.css
index 8a111cb..596402d 100644
--- a/src/components/layout/BottomTabsSection/index.module.css
+++ b/src/components/layout/BottomTabsSection/index.module.css
@@ -2,9 +2,9 @@
     position: relative;
     overflow: hidden;
     width: 100%;
-    /* height: 1080px; */
+    /* height: 67.5rem; */
     height: 100vh;
-    padding: 100px 0;
+    padding: 6.25rem 0;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
@@ -32,10 +32,10 @@
 .bottomTabsSectionContent {
     position: relative;
     z-index: 1;
-    width: calc(100% - 520px);
+    width: calc(100% - 32.5rem);
     margin: 0 auto;
-    height: 500px;
-    margin-top: 200px;
+    height: 31.25rem;
+    margin-top: 12.5rem;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -47,15 +47,15 @@
 
     .contentTitle {
       font-weight: 500;
-      font-size: 30px;
-      line-height: 40px;
+      font-size: 1.875rem;
+      line-height: 2.5rem;
     }
 
     .contentText { 
       font-weight: 400;
-      font-size: 18px;
-      line-height: 26px;
-      margin-top: 20px;
+      font-size: 1.125rem;
+      line-height: 1.625rem;
+      margin-top: 1.25rem;
     }
   }
   
@@ -65,7 +65,7 @@
     flex-direction: row;
     justify-content: space-evenly;
     gap: auto;
-    border-top: 1px solid rgba(255,255,255,0.5);
+    border-top: .0625rem solid rgba(255,255,255,0.5);
     padding: 0 auto;
   }
 
@@ -77,7 +77,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    height: 2px;
+    height: .125rem;
     background-color: #fff;
     transition: transform 0.3s ease, width 0.3s ease, opacity 0.3s ease;
     pointer-events: none;
@@ -85,15 +85,15 @@
   
   .bottomTabsSectionContentTab {
     font-weight: 500;
-    font-size: 20px;
+    font-size: 1.25rem;
     color: #FFFFFF;
-    line-height: 60px;
-    height: 60px;
+    line-height: 3.75rem;
+    height: 3.75rem;
     cursor: pointer;
 
     span {
       display: inline-block;
-      line-height: 60px;
-      height: 60px;
+      line-height: 3.75rem;
+      height: 3.75rem;
     }
   }
\ No newline at end of file
diff --git a/src/components/layout/ColumnXGrids/index.module.css b/src/components/layout/ColumnXGrids/index.module.css
index 1eeaf2c..f0f6511 100644
--- a/src/components/layout/ColumnXGrids/index.module.css
+++ b/src/components/layout/ColumnXGrids/index.module.css
@@ -7,7 +7,7 @@
     /* 3列 */
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 30px;
+    gap: 1.875rem;
 
     .columnXGridsItem {
         color: #fff;
@@ -43,7 +43,7 @@
             width: 100%;
             height: 100%;
             z-index: 2;
-            padding: 60px 40px;
+            padding: 3.75rem 2.5rem;
             transition: background var(--duration) ease;
 
             &:hover {
@@ -55,17 +55,17 @@
 
             .columnXGridsItemTitle {
                 font-weight: 500;
-                font-size: 24px;
+                font-size: 1.5rem;
                 color: #FFFFFF;
-                line-height: 34px;
-                margin-bottom: 10px;
+                line-height: 2.125rem;
+                margin-bottom: .625rem;
             }
 
             .columnXGridsItemContent {
                 font-weight: 500;
-                font-size: 18px;
+                font-size: 1.125rem;
                 color: #FFFFFF;
-                line-height: 34px;
+                line-height: 2.125rem;
                 opacity: 0;
                 transition: opacity var(--duration) ease;
             }
diff --git a/src/components/layout/HonorGrids/index.module.css b/src/components/layout/HonorGrids/index.module.css
index 0229779..f131ecc 100644
--- a/src/components/layout/HonorGrids/index.module.css
+++ b/src/components/layout/HonorGrids/index.module.css
@@ -1,55 +1,55 @@
 .honorGrids {
     width: 100%;
-    padding: 100px 0;
+    padding: 6.25rem 0;
     background: rgba(216, 216, 216, 0.5);
 
     .honorGridsTitle {
         font-family: Source Han Sans, Source Han Sans;
         font-weight: 700;
-        font-size: 40px;
+        font-size: 2.5rem;
         color: #222222;
-        line-height: 50px;
+        line-height: 3.125rem;
         text-align: center;
-        width: 1320px;
+        width: 82.5rem;
         margin: 0 auto;
-        margin-bottom: 100px;
+        margin-bottom: 6.25rem;
     }
 
     .honorGridsItems {
-        width: 1320px;
+        width: 82.5rem;
         margin: 0 auto;
         /* 4*n */
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         grid-template-rows: repeat(2, 1fr);
-        gap: 60px;
+        gap: 3.75rem;
 
         .honorGridsItem {
-            height: 116px;
+            height: 7.25rem;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             position: relative;
-            padding: 0 50px;
+            padding: 0 3.125rem;
             text-align: center;
 
             .honorGridsTitle {
                 font-weight: 400;
-                font-size: 16px;
+                font-size: 1rem;
                 color: #222222;
             }
             .honorGridsItemLargeTitle {
                 font-weight: 600;
-                font-size: 20px;
+                font-size: 1.25rem;
                 color: #222222;
-                line-height: 30px;
+                line-height: 1.875rem;
             }
 
             .honorGridsItemBgleft,
             .honorGridsItemBgright {
-                width: 70px;
-                height: 116px;
+                width: 4.375rem;
+                height: 7.25rem;
                 position: absolute;
                 background-size: cover;
                 background-position: left;
diff --git a/src/components/layout/JobPage/index.module.css b/src/components/layout/JobPage/index.module.css
index dc0d9a6..f6b63b4 100644
--- a/src/components/layout/JobPage/index.module.css
+++ b/src/components/layout/JobPage/index.module.css
@@ -1,11 +1,11 @@
 .jobPage {
     width: 100%;
     min-height: 100vh;
-    padding: 120px 100px;
+    padding: 7.5rem 6.25rem;
 
     .jobPageHeaderLine {
-        height: 100px;
-        border-bottom: 1px solid #222222;
+        height: 6.25rem;
+        border-bottom: .0625rem solid #222222;
         display: flex;
 
         .jobPageHeaderLineBack {
@@ -16,41 +16,41 @@
     }
 
     .jobPageHeader {
-        padding: 60px 160px;
+        padding: 3.75rem 10rem;
 
         .jobPageHeaderTitle {
             font-weight: 700;
-            font-size: 32px;
+            font-size: 2rem;
             color: #222222;
-            line-height: 42px;
+            line-height: 2.625rem;
             /* text-align: center; */
             font-style: normal;
             text-transform: none;
-            margin-bottom: 20px;
+            margin-bottom: 1.25rem;
         }
 
         .jobPageHeaderTimeLine {
             font-weight: 400;
-            font-size: 20px;
+            font-size: 1.25rem;
             color: #333333;
-            line-height: 30px;
+            line-height: 1.875rem;
             display: flex;
-            gap: 30px;
+            gap: 1.875rem;
         }
 
     }
 
     .jobPageContent {
-        font-size: 20px;
-        padding: 0 160px;
+        font-size: 1.25rem;
+        padding: 0 10rem;
     }
 
     .jobPageContentTitle {
         font-family: Source Han Sans, Source Han Sans;
         font-weight: 600;
-        font-size: 24px;
+        font-size: 1.5rem;
         color: #222222;
-        line-height: 34px;
+        line-height: 2.125rem;
         text-align: left;
         font-style: normal;
         text-transform: none;
@@ -59,9 +59,9 @@
     .jobPageContentText {
         font-family: Source Han Sans, Source Han Sans;
         font-weight: 400;
-        font-size: 18px;
+        font-size: 1.125rem;
         color: #333333;
-        line-height: 26px;
+        line-height: 1.625rem;
         text-align: left;
         font-style: normal;
         text-transform: none;
diff --git a/src/components/layout/JobPage/index.tsx b/src/components/layout/JobPage/index.tsx
index 0b6ffb3..44ebc38 100644
--- a/src/components/layout/JobPage/index.tsx
+++ b/src/components/layout/JobPage/index.tsx
@@ -18,7 +18,7 @@ export default function JobPage({ data }: { data: Data }) {
         <div className={styles.jobPage}>
             <div className={styles.jobPageHeaderLine}>
                 <div className={styles.jobPageHeaderLineBack} onClick={() => window.history.back()}>
-                    <img src="/images/icons/icon-arrowleft.png" alt="arrowleft" style={{ width: "20px", height: "20px" }} />
+                    <img src="/images/icons/icon-arrowleft.png" alt="arrowleft" style={{ width: "1.25rem", height: "1.25rem" }} />
                     <span>返回</span>
                 </div>
             </div>
@@ -36,11 +36,11 @@ export default function JobPage({ data }: { data: Data }) {
                 <div className={styles.jobPageContentTitle}>岗位描述</div>
                 <p className={styles.jobPageContentText} dangerouslySetInnerHTML={{ __html: data.content }}></p>
             </div>
-            <div className={styles.jobPageContent} style={{ marginTop: "50px" }}>
+            <div className={styles.jobPageContent} style={{ marginTop: "3.125rem" }}>
                 <div className={styles.jobPageContentTitle}>任职需求</div>
                 <p className={styles.jobPageContentText} dangerouslySetInnerHTML={{ __html: data.requirement }}></p>
             </div>
-            <div className={styles.jobPageContent} style={{ marginTop: "50px" }}>
+            <div className={styles.jobPageContent} style={{ marginTop: "3.125rem" }}>
                 <div className={styles.jobPageContentTitle}>联系方式</div>
                 <p className={styles.jobPageContentText}>{data.contact}</p>
             </div>
diff --git a/src/components/layout/ParagraphSection/index.module.css b/src/components/layout/ParagraphSection/index.module.css
index f5e30e4..2cc6a02 100644
--- a/src/components/layout/ParagraphSection/index.module.css
+++ b/src/components/layout/ParagraphSection/index.module.css
@@ -1,5 +1,5 @@
 .paragraphSection {
-    padding: 100px 260px;
+    padding: 6.25rem 16.25rem;
     background: rgba(255, 255, 255, 0.8);
     background-size: cover;
     background-position: center;
@@ -11,9 +11,9 @@
 
     .paragraphSectionTitle {
         font-weight: 500;
-        font-size: 40px;
+        font-size: 2.5rem;
         color: #14355C;
-        line-height: 50px;
+        line-height: 3.125rem;
         text-align: left;
         font-style: normal;
         text-transform: none;
@@ -24,17 +24,17 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: 40px;
-    margin-top: 100px;
+    gap: 2.5rem;
+    margin-top: 6.25rem;
 
     .tag {
         font-family: Source Han Sans, Source Han Sans;
         font-weight: 500;
-        font-size: 24px;
+        font-size: 1.5rem;
         color: #14355C;
-        line-height: 30px;
-        padding: 24px 40px;
+        line-height: 1.875rem;
+        padding: 1.5rem 2.5rem;
         background: #F0F2F4;
-        border-radius: 326px 326px 326px 326px;
+        border-radius: 20.375rem 20.375rem 20.375rem 20.375rem;
     }
 }
\ No newline at end of file
diff --git a/src/components/layout/RowAccordion/index.module.css b/src/components/layout/RowAccordion/index.module.css
index cd6a12e..c093f7b 100644
--- a/src/components/layout/RowAccordion/index.module.css
+++ b/src/components/layout/RowAccordion/index.module.css
@@ -4,9 +4,9 @@
 .rowAccordion {
     position: relative;
     overflow-anchor: none;
-    padding: 0 260px;
+    /* padding: 0 16.25rem; */
     width: 100%;
-    height: 100vh;
+    height: 100vh;    
 }
 .rowAccordionBgContainer {
     position: absolute;
@@ -27,44 +27,47 @@
 .rowAccordion .contentRow {
     position: relative;
     z-index: 1;
+    width: 80%;
+    margin: 0 auto;
 }
 .rowAccordion {
     .headerRow {
         width: 100%;
-        height: 250px;
+        height: 15.625rem;
         display: flex;
         align-items: center;
         justify-content: center;
         .title {
             font-weight: 700;
-            font-size: 40px;
+            font-size: 2.5rem;
             color: #FFFFFF;
-            line-height: 50px;
+            line-height: 3.125rem;
         }
     }
     .contentRow {
         height: 100%;
         display: flex;
         color: #fff;
+        
         .contentItem {
             flex: 1;
             transition: flex var(--duration) ease, padding-bottom var(--duration) ease;
             display: flex;
             flex-direction: column;
             justify-content: flex-end;
-            padding-top: 100px;
-            padding-bottom: 100px;
-            border-left: 1px solid #fff;
+            padding-top: 6.25rem;
+            padding-bottom: 6.25rem;
+            border-left: .0625rem solid #fff;
             &:last-child {
-                border-right: 1px solid #fff;
+                border-right: .0625rem solid #fff;
             }
             .contentItemContainer {
-                padding: 0 20px;
-                min-height: 100px;
+                padding: 0 1.25rem;
+                min-height: 6.25rem;
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
-                margin-left: -3px;
+                margin-left: -0.1875rem;
                 transition: all var(--duration) ease-in-out;
                 position: relative;
                 &::before {
@@ -72,26 +75,26 @@
                     position: absolute;
                     left: 0;
                     top: 0;
-                    width: 5px;
-                    height: 100px;
+                    width: .3125rem;
+                    height: 6.25rem;
                     background: #14355C;
                 }
             }
             
             
             .contentItemTitle {
-                height: 100px;
+                height: 6.25rem;
                 font-weight: 500;
-                font-size: 24px;
+                font-size: 1.5rem;
                 color: #FFFFFF;
                 transition: all var(--duration) ease-in-out;
-                margin-bottom: 6px;
+                margin-bottom: .375rem;
                 display: flex;
                 align-items: center;
                 white-space: nowrap;
             }
             .contentItemSubtitle {
-                font-size: 20px;
+                font-size: 1.25rem;
                 transition: font-size var(--duration) ease-in-out;
             }
 
@@ -104,41 +107,41 @@
                 display: flex;
                 flex-direction: column;
                 justify-content: space-between;
-                /* padding: 60px 0; */
-                margin-top: 20px;
+                /* padding: 3.75rem 0; */
+                margin-top: 1.25rem;
             }
             .contentItemContent {
-                font-size: 16px;
-                /* margin-top: 40px; */
+                font-size: 1rem;
+                /* margin-top: 2.5rem; */
             }
 
             .contentItemLinks {
                 font-weight: 700;
-                font-size: 16px;
+                font-size: 1rem;
                 color: #FFFFFF;
-                line-height: 30px;
+                line-height: 1.875rem;
                 text-decoration-line: underline;
                 display: flex;
                 flex-direction: row;
                 flex-wrap: wrap;
-                gap: 30px 20px;
+                gap: 1.875rem 1.25rem;
             }
         }
         .contentItem.active {
             flex: 2;
-            padding-bottom: 200px;
+            padding-bottom: 12.5rem;
             .contentItemContainer {
-                padding: 0 40px;
+                padding: 0 2.5rem;
             }
             .contentItemTitle {
-                font-size: 40px;
+                font-size: 2.5rem;
             }
             .contentItemSubtitle {
-                font-size: 24px;
+                font-size: 1.5rem;
             }
             
             .contentItemContentWrapper {
-                height: 300px;
+                height: 18.75rem;
                 opacity: 1;
             }
         }
diff --git a/src/components/layout/RowAccordion/index.tsx b/src/components/layout/RowAccordion/index.tsx
index f2e4f47..f1f5edf 100644
--- a/src/components/layout/RowAccordion/index.tsx
+++ b/src/components/layout/RowAccordion/index.tsx
@@ -90,7 +90,7 @@ export default function RowAccordion({ data, placement='bottom' }: Props) {
                     </div>
                 )
             }
-            <div className={styles.contentRow} style={{ height: data.title ? 'calc(100% - 250px)' : '100%' }}>
+            <div className={styles.contentRow} style={{ height: data.title ? 'calc(100% - 15.625rem)' : '100%' }}>
                 {data.items.map((item, index) => (
                     <motion.div
                         className={`${styles.contentItem} ${activeIndex === index && styles.active}`}
diff --git a/src/components/layout/Section/index.tsx b/src/components/layout/Section/index.tsx
index 7a992f1..beb9420 100644
--- a/src/components/layout/Section/index.tsx
+++ b/src/components/layout/Section/index.tsx
@@ -16,7 +16,7 @@ export default function Section({
     background, maskBackground, className }: Props) {
     return (
         <section style={{
-            padding: '100px 260px',
+            padding: '6.25rem 16.25rem',
             width: '100%',
             height: height || 'auto',
             position: 'relative',
diff --git a/src/components/layout/SectionTitle/index.module.css b/src/components/layout/SectionTitle/index.module.css
index 89bdf79..2f44bb6 100644
--- a/src/components/layout/SectionTitle/index.module.css
+++ b/src/components/layout/SectionTitle/index.module.css
@@ -1,31 +1,31 @@
 .sectionTitle {
     font-weight: 700;
-    font-size: 40px;
-    line-height: 50px;
+    font-size: 2.5rem;
+    line-height: 3.125rem;
     text-align: center;
-    margin-bottom: 100px;
+    margin-bottom: 6.25rem;
     display: flex;
     flex-direction: column;
 
 
     .sectionTitleSubtitle {
         font-weight: 500;
-        font-size: 24px;
-        line-height: 30px;
+        font-size: 1.5rem;
+        line-height: 1.875rem;
         text-align: center;
         font-style: normal;
         text-transform: none;
-        margin-top: 20px;
+        margin-top: 1.25rem;
     }
 
     .sectionTitleSubcontent {
         font-weight: 500;
-        font-size: 18px;
-        line-height: 30px;
+        font-size: 1.125rem;
+        line-height: 1.875rem;
         text-align: center;
         font-style: normal;
         text-transform: none;
-        margin-top: 20px;
+        margin-top: 1.25rem;
     }
 
 }
\ No newline at end of file
diff --git a/src/components/layout/SectionTitle/index.tsx b/src/components/layout/SectionTitle/index.tsx
index 11b21e8..42b220f 100644
--- a/src/components/layout/SectionTitle/index.tsx
+++ b/src/components/layout/SectionTitle/index.tsx
@@ -9,7 +9,7 @@ type Props = {
 
 export default function SectionTitle({ title, subtitle, color, subcontent }: Props) {
     return (
-        <div className={styles.sectionTitle} style={{ color: color || '#222', marginBottom: subtitle ? '60px' : '100px' }}>
+        <div className={styles.sectionTitle} style={{ color: color || '#222', marginBottom: subtitle ? '3.75rem' : '6.25rem' }}>
             <span>{title}</span>
             {subtitle && <span className={styles.sectionTitleSubtitle}>{subtitle}</span>}
             {subcontent && <span className={styles.sectionTitleSubcontent}>{subcontent}</span>}
diff --git a/src/components/layout/SwiperCardSection/index.module.css b/src/components/layout/SwiperCardSection/index.module.css
index b91def8..4fb1afb 100644
--- a/src/components/layout/SwiperCardSection/index.module.css
+++ b/src/components/layout/SwiperCardSection/index.module.css
@@ -7,16 +7,16 @@
 .carouselWrapper {
     display: flex;
     align-items: center;
-    gap: 20px;
+    gap: 1.25rem;
     position: relative;
 }
 
 .navBtn {
     flex-shrink: 0;
-    width: 50px;
-    height: 50px;
+    width: 3.125rem;
+    height: 3.125rem;
     background: #FFFFFF;
-    box-shadow: 0px 0 12px 0px rgba(20, 53, 92, 0.2);
+    box-shadow: 0rem 0 .75rem 0rem rgba(20, 53, 92, 0.2);
     border: none;
     border-radius: 50%;
     cursor: pointer;
@@ -24,13 +24,13 @@
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    left: -90px;
+    left: -5.625rem;
     z-index: 99;
 }
 
 .nextBtn {
     left: auto;
-    right: -90px;
+    right: -5.625rem;
 }
 
 .swiperCardList {
@@ -65,10 +65,10 @@
             top: 0;
 
             .swiperTitle {
-                padding: 0 30px;
+                padding: 0 1.875rem;
 
                 span {
-                    left: 30px;
+                    left: 1.875rem;
                     transform: translateX(0);
                     border-color: #fff;
                 }
@@ -91,21 +91,21 @@
         .swiperTitle {
             position: relative;
             font-weight: 500;
-            font-size: 24px;
+            font-size: 1.5rem;
             color: #FFFFFF;
-            line-height: 80px;
-            height: 80px;
-            margin: 0 30px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+            line-height: 5rem;
+            height: 5rem;
+            margin: 0 1.875rem;
+            border-bottom: .0625rem solid rgba(255, 255, 255, 0.3);
 
 
             span {
                 display: inline-block;
                 position: absolute;
                 left: 50%;
-                line-height: 80px;
-                height: 80px;
-                border-bottom: 3px solid #14355C;
+                line-height: 5rem;
+                height: 5rem;
+                border-bottom: .1875rem solid #14355C;
                 transform: translateX(-50%);
                 transition: left 0.3s ease-in-out, transform 0.3s ease-in-out;
                 white-space: nowrap;
@@ -113,10 +113,10 @@
         }
 
         .swiperDesc {
-            font-size: 16px;
+            font-size: 1rem;
             color: #FFFFFF;
-            line-height: 24px;
-            margin: 40px 60px;
+            line-height: 1.5rem;
+            margin: 2.5rem 3.75rem;
             opacity: 0;
         }
     }
diff --git a/src/components/layout/TopTabsSection/index.module.css b/src/components/layout/TopTabsSection/index.module.css
index e50c921..ac0b717 100644
--- a/src/components/layout/TopTabsSection/index.module.css
+++ b/src/components/layout/TopTabsSection/index.module.css
@@ -1,5 +1,5 @@
 .topTabsSection {
-    padding: 100px 260px 150px 260px;
+    padding: 6.25rem 16.25rem 9.375rem 16.25rem;
     width: 100%;
     min-height: 100vh;
     background-size: cover;
@@ -9,11 +9,11 @@
 
 .topTabsTabs {
     position: relative;
-    height: 60px;
+    height: 3.75rem;
     font-weight: 400;
-    font-size: 24px;
-    line-height: 34px;
-    border-bottom: 1px solid #D5D8DC;
+    font-size: 1.5rem;
+    line-height: 2.125rem;
+    border-bottom: .0625rem solid #D5D8DC;
     width: 100%;
 }
 
@@ -22,8 +22,8 @@
     top: 50%;
     transform: translateY(-50%);
     z-index: 1;
-    width: 36px;
-    height: 36px;
+    width: 2.25rem;
+    height: 2.25rem;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -32,7 +32,7 @@
     color: #14355C;
     cursor: pointer;
     border-radius: 50%;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 .0625rem .25rem rgba(0, 0, 0, 0.15);
     transition: background 0.2s, color 0.2s;
 }
 
@@ -42,11 +42,11 @@
 }
 
 .topTabsNavBtnLeft {
-    left: 0px;
+    left: 0rem;
 }
 
 .topTabsNavBtnRight {
-    right: 0px;
+    right: 0rem;
 }
 
 .topTabsTabsScroll {
@@ -54,7 +54,7 @@
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
-    gap: 130px;
+    gap: 8.125rem;
     height: 100%;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
@@ -74,14 +74,14 @@
 .topTabsBottomLine {
     position: absolute;
     bottom: 0;
-    height: 2px;
+    height: .125rem;
     background: #000000;
     transition: left 0.25s ease, width 0.25s ease;
 }
 
 .topTabsTabItem {
-    /* height: 90px;
-    line-height: 90px; */
+    /* height: 5.625rem;
+    line-height: 5.625rem; */
     flex-shrink: 0;
     cursor: pointer;
     color: #222222;
@@ -92,9 +92,9 @@
 }
 
 .topTabsContent {
-    padding-top: 150px;
+    padding-top: 9.375rem;
     display: flex;
-    gap: 80px;
+    gap: 5rem;
     flex-direction: row;
 }
 
@@ -103,20 +103,20 @@
     margin: auto 0;
 
     .topTabsContentLeftHead {
-        margin-bottom: 30px;
+        margin-bottom: 1.875rem;
         display: flex;
-        gap: 10px;
+        gap: .625rem;
 
         .topTabsContentLeftTitle {
             display: flex;
             align-items: flex-end;
-            gap: 10px;
+            gap: .625rem;
 
             .topTabsContentLeftTitleMain {
                 font-weight: 700;
-                font-size: 40px;
+                font-size: 2.5rem;
                 color: #222222;
-                line-height: 50px;
+                line-height: 3.125rem;
                 text-align: left;
                 font-style: normal;
                 text-transform: none;
@@ -124,9 +124,9 @@
 
             .topTabsContentLeftTitleSub {
                 font-weight: 400;
-                font-size: 18px;
+                font-size: 1.125rem;
                 color: #14355C;
-                line-height: 26px;
+                line-height: 1.625rem;
                 text-align: left;
                 font-style: normal;
                 text-transform: none;
@@ -142,9 +142,9 @@
 
     .topTabsContentLeftDesc {
         font-weight: 400;
-        font-size: 18px;
+        font-size: 1.125rem;
         color: #222222;
-        line-height: 34px;
+        line-height: 2.125rem;
         text-align: justify;
         font-style: normal;
         text-transform: none;
@@ -155,26 +155,26 @@
     flex: 8;
 
     img {
-        width: 800px;
-        height: 500px;
+        width: 50rem;
+        height: 31.25rem;
     }
 }
 
 .topTabsContentItems {
-    width: 920px;
+    width: 57.5rem;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 20px;
+    gap: 1.25rem;
 }
 
 .topTabsContentItem {
     list-style: disc;
     font-family: Source Han Sans, Source Han Sans;
     font-weight: 500;
-    font-size: 20px;
+    font-size: 1.25rem;
     color: #222222;
-    line-height: 30px;
+    line-height: 1.875rem;
     text-align: left;
     font-style: normal;
     text-transform: none;
diff --git a/src/components/layout/TopTabsSection/index.tsx b/src/components/layout/TopTabsSection/index.tsx
index 62e7e95..11d6d0d 100644
--- a/src/components/layout/TopTabsSection/index.tsx
+++ b/src/components/layout/TopTabsSection/index.tsx
@@ -60,7 +60,7 @@ export default function TopTabsSection({ data, className }: { data: Data, classN
                                 <ScrollReveal preset="slideRight" delay={0.3} >
                                 {
                                     data.tabItems[activeIndex].icon && (
-                                        <img src={data.tabItems[activeIndex].icon} alt="" style={{ width: '100px', height: '100px' }} />
+                                        <img src={data.tabItems[activeIndex].icon} alt="" style={{ width: '6.25rem', height: '6.25rem' }} />
                                     )
                                 }
                                 </ScrollReveal>
diff --git a/src/index.css b/src/index.css
index 9399d6f..b28918f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,35 +1,40 @@
-/* rem 基准：以 16px 为设计稿基准 */
+/* rem 基准：以设计稿 16px 为基准；再按 --ui-scale 抵消 Windows 显示缩放带来的物理尺寸偏大 */
+:root {
+  --design-rem-base: 16px;
+  --ui-scale: 1;
+}
+
 html {
-  font-size: 16px;
+  font-size: calc(var(--design-rem-base) * var(--ui-scale));
 }
 
 @media screen and (max-width: 1920px) {
   html {
-    font-size: 16px;
+    --design-rem-base: 16px;
   }
 }
 
 @media screen and (max-width: 1440px) {
   html {
-    font-size: 14px;
+    --design-rem-base: 14px;
   }
 }
 
 @media screen and (max-width: 1024px) {
   html {
-    font-size: 12px;
+    --design-rem-base: 12px;
   }
 }
 
 @media screen and (max-width: 768px) {
   html {
-    font-size: 12px;
+    --design-rem-base: 12px;
   }
 }
 
 @media screen and (max-width: 480px) {
   html {
-    font-size: 12px;
+    --design-rem-base: 12px;
   }
 }
 
@@ -41,6 +46,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
 }
 
 code {
diff --git a/src/index.tsx b/src/index.tsx
index d0f88f2..2d56b89 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,12 +3,24 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { px2remTransformer, StyleProvider } from '@ant-design/cssinjs';
+
+const dpr = window.devicePixelRatio || 1;
+// 用 UI 缩放因子抵消 Windows 显示缩放导致的“物理尺寸变大”。
+// 例如：dpr=1.25 时 uiScale=0.8，rem 会整体变小 20%。
+const uiScale = 1 / dpr;
+document.documentElement.style.setProperty('--ui-scale', String(uiScale));
+
+// antd cssinjs 内部 px->rem 转换的 rootValue：rootValue 越大，rem 越小。
+const rootValue = 16 * dpr;
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
-  <App />
+  <StyleProvider >
+    <App />
+  </StyleProvider>
 );
 
 // If you want to start measuring performance in your app, pass a function
diff --git a/src/layouts/Footer.module.css b/src/layouts/Footer.module.css
index 5ef53d4..d7eb07c 100644
--- a/src/layouts/Footer.module.css
+++ b/src/layouts/Footer.module.css
@@ -18,18 +18,18 @@
 .footerColumn {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: .75rem;
 }
 
 .footerTitle {
-  font-size: 0.875rem;
+  font-size: .875rem;
   font-weight: 600;
   color: #333;
-  margin-bottom: 0.25rem;
+  margin-bottom: .25rem;
 }
 
 .footerLink {
-  font-size: 0.8125rem;
+  font-size: .8125rem;
   color: #666;
   text-decoration: none;
 }
@@ -42,7 +42,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 40px;
+  gap: 2.5rem;
   position: absolute;
   right: 3.75rem;
 }
@@ -57,7 +57,7 @@
 
 .socialIcons {
   display: flex;
-  gap: 0.75rem;
+  gap: .75rem;
 }
 
 .socialIcon {
@@ -70,7 +70,7 @@
   justify-content: center;
   color: #666;
   text-decoration: none;
-  font-size: 0.75rem;
+  font-size: .75rem;
 }
 
 .footerLower {
@@ -86,7 +86,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 0.875rem;
+  font-size: .875rem;
 }
 
 .footerLowerLinks {
@@ -103,7 +103,7 @@
   color: #fff;
 }
 
-@media (max-width: 1024px) {
+@media (max-width: 64rem) {
   .footerUpper {
     padding: 2rem;
   }
@@ -118,7 +118,7 @@
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 48rem) {
   .footerUpper {
     padding: 1.5rem;
   }
@@ -140,6 +140,6 @@
 
   .footerLowerInner {
     flex-direction: column;
-    gap: 0.5rem;
+    gap: .5rem;
   }
 }
diff --git a/src/layouts/Footer.tsx b/src/layouts/Footer.tsx
index 6541929..6f247a4 100644
--- a/src/layouts/Footer.tsx
+++ b/src/layouts/Footer.tsx
@@ -41,14 +41,14 @@ export default function Footer() {
                                     <img
                                         src={icon.src}
                                         alt={icon.alt}
-                                        style={{ width: "26px", height: "26px" }}
+                                        style={{ width: "1.625rem", height: "1.625rem" }}
                                     />
                                 </Link>
                             ))}
                             <img
                                 src={logo}
                                 alt="logo"
-                                style={{ width: "92px", height: "56px" }}
+                                style={{ width: "5.75rem", height: "3.5rem" }}
                                 className="logo-dark"
                             />
                         </div>
@@ -79,7 +79,7 @@ function FooterLower({
     return (
         <div className={styles.footerLower}>
             <div className={`header-row ${styles.footerLowerInner}`}>
-                <div style={{ display: "flex", flexDirection: "row", gap: "50px" }}>
+                <div style={{ display: "flex", flexDirection: "row", gap: "3.125rem" }}>
                     <span>{`${copyright} | ${companyName}`}</span>
                     <span>{icpNumber}</span>
                 </div>
diff --git a/src/layouts/Header.module.css b/src/layouts/Header.module.css
index d92ec02..e57df34 100644
--- a/src/layouts/Header.module.css
+++ b/src/layouts/Header.module.css
@@ -42,13 +42,13 @@
 
 .whiteMode.header {
   /* background: rgba(255, 255, 255, 1); */
-  box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.1);
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 .625rem 0 rgba(255, 255, 255, 0.1);
+  box-shadow: 0 0 .625rem 0 rgba(0, 0, 0, 0.2);
   transition-delay: none;
 }
 
 .keepNavDark.header::before {
-  height: 120px;
+  height: 7.5rem;
 }
 
 .whiteMode .navLink,
@@ -103,7 +103,7 @@
   width: 95%;
   margin: 0 auto;
   box-sizing: border-box;
-  height: 1px;
+  height: .0625rem;
   background: #FFFFFF;
   transform: scaleX(0);
   transform-origin: 90% 0;
@@ -191,7 +191,7 @@
 }
 
 .crossYline {
-  width: 1px;
+  width: .0625rem;
   height: 0%;
   background: #FFFFFF;
   align-self: flex-end;
@@ -204,7 +204,7 @@
 .langTrigger {
   display: flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: .25rem;
   color: #fff;
   background: transparent;
   border: none;
@@ -216,7 +216,7 @@
   background: transparent;
   border: none;
   cursor: pointer;
-  padding: 0.25rem;
+  padding: .25rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -230,7 +230,7 @@
   width: 100%;
   height: 0;
   background: rgba(255, 255, 255, 0.9);
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 .625rem 0 rgba(0, 0, 0, 0.1);
   padding: 0;
   z-index: 1000;
   overflow: hidden;
@@ -259,7 +259,7 @@
   text-decoration: none;
 }
 
-@media (max-width: 1024px) {
+@media (max-width: 64rem) {
   .header {
     height: 5.5rem;
   }
@@ -286,7 +286,7 @@
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 48rem) {
   .header {
     height: 4rem;
   }
@@ -297,19 +297,19 @@
   }
 
   .navItem {
-    padding: 0 0.5rem;
+    padding: 0 .5rem;
   }
 
   .headerRight {
-    gap: 0.5rem;
+    gap: .5rem;
   }
 
   .nav {
-    margin-right: 0.5rem;
+    margin-right: .5rem;
   }
 
   .actions {
-    margin-left: 0.5rem;
+    margin-left: .5rem;
   }
 
   .dropPanel {
diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx
index f009598..990b9a2 100644
--- a/src/layouts/Header.tsx
+++ b/src/layouts/Header.tsx
@@ -134,7 +134,7 @@ export default function Header() {
                             trigger={["click"]}
                         >
                             <button className={styles.langTrigger} type="button">
-                                <span style={{ fontSize: "18px" }}>
+                                <span style={{ fontSize: "1.125rem" }}>
                                     {langMenuItems.find((i: SupportLocale) => i.key === locale)?.label ?? "中文"}
                                 </span>
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><g transform="matrix(0,1,-1,0,24,-24)"><path d="M46.720364062499996,30.4020875C46.720364062499996,30.4020875,45.6597041625,31.462787499999997,45.6597041625,31.462787499999997C45.6597041625,31.462787499999997,39.8815300725,25.6845775,39.8815300725,25.6845775C39.4910054655,25.2940474,39.4910053615,24.6608877,39.8815300725,24.2703576C39.8815300725,24.2703576,45.6597041625,18.4921875,45.6597041625,18.4921875C45.6597041625,18.4921875,46.720364062499996,19.5528475,46.720364062499996,19.5528475C46.720364062499996,19.5528475,41.2957440625,24.9774675,41.2957440625,24.9774675C41.2957440625,24.9774675,46.720364062499996,30.4020875,46.720364062499996,30.4020875C46.720364062499996,30.4020875,46.720364062499996,30.4020875,46.720364062499996,30.4020875Z" fillRule="evenodd" fill="#FFFFFF" fillOpacity="1" transform="matrix(-1,0,0,-1,79.173828125,36.984375)" /></g></svg>
diff --git a/src/pages/About/About.module.css b/src/pages/About/About.module.css
index 702a6f6..95b965e 100644
--- a/src/pages/About/About.module.css
+++ b/src/pages/About/About.module.css
@@ -40,7 +40,7 @@
 .textBox {
   background: rgba(20,53,92,0.5);
   padding: 2.5rem;
-  border-radius: 0.25rem;
+  border-radius: .25rem;
 }
 
 .title {
diff --git a/src/pages/About/Founder.module.css b/src/pages/About/Founder.module.css
index 795b672..9219e3b 100644
--- a/src/pages/About/Founder.module.css
+++ b/src/pages/About/Founder.module.css
@@ -52,7 +52,7 @@
   }
 
   .imageOverlayTitle span {
-    border-bottom: 3px solid #FFFFFF;
+    border-bottom: .1875rem solid #FFFFFF;
   }
 }
 
@@ -86,13 +86,13 @@
   height: 4.375rem;
   color: #fff;
   text-align: center;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+  border-bottom: .0625rem solid rgba(255, 255, 255, 0.3);
 }
 
 .images .imageOverlayTitle span {
   display: inline-block;
   height: 4.4375rem;
-  border-bottom: 3px solid #14355C;
+  border-bottom: .1875rem solid #14355C;
 }
 
 .images .imageOverlayDesc {
@@ -102,8 +102,8 @@
   transition: all 0.3s ease-in-out;
   li {
     list-style: disc;
-    margin: 10px 0;
-    margin-left: 20px;
+    margin: .625rem 0;
+    margin-left: 1.25rem;
   }
 }
 
@@ -147,8 +147,8 @@
   padding-right: 6.25rem;
   li {
     list-style: disc;
-    margin: 8px 0;
-    margin-left: 20px;
+    margin: .5rem 0;
+    margin-left: 1.25rem;
   }
 }
 
@@ -165,7 +165,7 @@
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: auto;
   align-items: start;
-  gap: 16px;
+  gap: 1rem;
 }
 
 .section3Item {
@@ -175,22 +175,22 @@
 
   li {
     font-weight: 500;
-    font-size: 16px;
+    font-size: 1rem;
     color: #FFFFFF;
-    line-height: 22px;
+    line-height: 1.375rem;
     list-style: disc;
   }
 }
 
 
 .section4Section {
-  padding-top: 100px;
+  padding-top: 6.25rem;
 
   .section4Title {
     font-weight: 700;
-    font-size: 40px;
+    font-size: 2.5rem;
     color: #222222;
-    line-height: 50px;
+    line-height: 3.125rem;
     text-align: center;
   }
   .timelineWrapper {
@@ -200,7 +200,7 @@
 }
 
 
-@media (max-width: 768px) {
+@media (max-width: 48rem) {
   .section {
     padding: 2rem 1rem;
   }
diff --git a/src/pages/About/History.module.css b/src/pages/About/History.module.css
index 50da37a..7f435d3 100644
--- a/src/pages/About/History.module.css
+++ b/src/pages/About/History.module.css
@@ -3,14 +3,14 @@
   background-image: repeating-linear-gradient(
     90deg,
     transparent,
-    transparent 2px,
-    rgba(200, 200, 205, 0.3) 2px,
-    rgba(200, 200, 205, 0.3) 4px
+    transparent .125rem,
+    rgba(200, 200, 205, 0.3) .125rem,
+    rgba(200, 200, 205, 0.3) .25rem
   );
   min-height: 100vh;
   width: 100%;
   padding: 6.25rem auto;
-  padding-bottom: 100px;
+  padding-bottom: 6.25rem;
   display: flex;
   flex-direction: column;
 }
@@ -33,7 +33,7 @@
   left: 50%;
   top: 0;
   bottom: 0;
-  width: 2px;
+  width: .125rem;
   background: #828F9E;
   transform: translateX(-50%);
 }
@@ -50,15 +50,15 @@
   align-items: flex-start;
   min-height: 6rem;
   margin-bottom: 1rem;
-  scroll-margin-top: 120px;
+  scroll-margin-top: 7.5rem;
 }
 
 .timelineItem .side {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.5rem 1.5rem;
+  gap: .5rem;
+  padding: .5rem 1.5rem;
   min-width: 0;
 }
 
@@ -73,7 +73,7 @@
 }
 
 .timelineItem .side:empty {
-  min-height: 1px;
+  min-height: .0625rem;
 }
 
 .year {
@@ -87,18 +87,18 @@
   line-height: 1.6;
   color: #333;
   margin: 0;
-  max-width: 600px;
-  margin-top: 20px;
+  max-width: 37.5rem;
+  margin-top: 1.25rem;
 
   list-style: disc;
-  margin-left: 20px;
+  margin-left: 1.25rem;
 }
 
 .timelineItem.left .desc {
   text-align: right;
   list-style: none;
   margin-left: 0;
-  margin-right: 20px;
+  margin-right: 1.25rem;
 }
 
 
@@ -154,7 +154,7 @@
   transform: translate(-50%, -50%);
   width: 3.75rem;
   height: 3.75rem;
-  border: 2px solid #14355C;
+  border: .125rem solid #14355C;
   border-radius: 50%;
   background: transparent;
   transition: all 0.3s ease-in-out;
@@ -165,14 +165,14 @@
   left: 50%;
   top: 100%;
   transform: translateX(-50%);
-  width: 0.375rem;
+  width: .375rem;
   min-height: 0;
   background: #14355C;
   transition: all 0.9s ease-in-out;
 }
 
 
-@media (max-width: 1024px) {
+@media (max-width: 64rem) {
   .section {
     padding: 4rem 4rem;
   }
@@ -182,7 +182,7 @@
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 48rem) {
   .section {
     padding: 2rem 1rem;
   }
diff --git a/src/pages/Business/CommercialGroup.module.css b/src/pages/Business/CommercialGroup.module.css
index 96d1269..a1b7bce 100644
--- a/src/pages/Business/CommercialGroup.module.css
+++ b/src/pages/Business/CommercialGroup.module.css
@@ -35,7 +35,7 @@
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  padding: 100px 0 !important;
+  padding: 6.25rem 0 !important;
 }
 
 .twoColSection.reverse {
@@ -52,20 +52,20 @@
 .twoColSectionTab {
   cursor: pointer;
   font-weight: 500;
-  font-size: 24px;
+  font-size: 1.5rem;
   color: #222;
-  line-height: 34px;
+  line-height: 2.125rem;
 }
 
 .twoColSectionTab.active {
-  border-bottom: 2px solid #14355C;
+  border-bottom: .125rem solid #14355C;
   color: #14355C;
 }
 
 .twoColSectionContent {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  margin-top: 60px;
+  margin-top: 3.75rem;
 }
 
 .twoColImage {
@@ -90,7 +90,7 @@
 }
 
 .twoColText {
-  padding: 100px 260px 150px 80px;
+  padding: 6.25rem 16.25rem 9.375rem 5rem;
   background: #F0F2F4;
 }
 
@@ -115,13 +115,13 @@
 .btnPrimary {
   margin-top: 6.25rem;
   display: inline-block;
-  width: 104px;
-  height: 38px;
-  border-radius: 0px 0px 0px 0px;
-  border: 1px solid #333333;
-  font-size: 16px;
+  width: 6.5rem;
+  height: 2.375rem;
+  border-radius: 0rem 0rem 0rem 0rem;
+  border: .0625rem solid #333333;
+  font-size: 1rem;
   color: #333333;
-  line-height: 38px;
+  line-height: 2.375rem;
   text-align: center;
   cursor: pointer;
 }
@@ -138,7 +138,7 @@
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  padding: 100px 260px;
+  padding: 6.25rem 16.25rem;
   position: relative;
 }
 
@@ -161,8 +161,8 @@
 }
 
 .featuresHeroContent {
-  margin-top: 160px;
-  height: 400px;
+  margin-top: 10rem;
+  height: 25rem;
   overflow: hidden;
   width: 100%;
   color: #FFFFFF;
@@ -172,29 +172,29 @@
 .featuresHeroContentTitle {
   font-family: Source Han Sans, Source Han Sans;
   font-weight: 600;
-  font-size: 30px;
+  font-size: 1.875rem;
   color: #FFFFFF;
-  margin-bottom: 30px;
+  margin-bottom: 1.875rem;
 }
 
 .featuresHeroContentDesc {
   font-family: Source Han Sans, Source Han Sans;
   font-weight: 400;
-  font-size: 18px;
+  font-size: 1.125rem;
   color: #FFFFFF;
-  line-height: 40px;
+  line-height: 2.5rem;
 }
 
 .featuresHeroTabs {
   position: relative;
-  border-top: 1px solid rgba(255, 255, 255, 0.5);
+  border-top: .0625rem solid rgba(255, 255, 255, 0.5);
 }
 
 .featuresHeroTabIndicator {
   position: absolute;
-  top: -1px;
+  top: -0.0625rem;
   left: 0;
-  height: 2px;
+  height: .125rem;
   background: #ffffff;
   pointer-events: none;
   transition:
@@ -207,14 +207,14 @@
   display: flex;
   justify-content: space-evenly;
   flex-direction: row;
-  /* gap: 100px; */
+  /* gap: 6.25rem; */
 }
 
 .featuresHeroTab {
   font-weight: 500;
-  font-size: 20px;
+  font-size: 1.25rem;
   color: #FFFFFF;
-  height: 60px;
+  height: 3.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -225,7 +225,7 @@
 .propertyServices {
   height: 100vh;
   color: #fff;
-  padding: 0 260px;
+  padding: 0 16.25rem;
 }
 
 .propertyServicesContent {
@@ -239,34 +239,34 @@
 
 .propertyServicesTitle {
   font-weight: 700;
-  font-size: 40px;
+  font-size: 2.5rem;
   color: #FFFFFF;
-  line-height: 50px;
+  line-height: 3.125rem;
 }
 
 .propertyServicesSubtitle {
   font-weight: 500;
-  font-size: 18px;
+  font-size: 1.125rem;
   color: #FFFFFF;
-  line-height: 26px;
-  margin-top: 20px;
+  line-height: 1.625rem;
+  margin-top: 1.25rem;
 }
 
 .propertyServicesBtn {
-  width: 104px;
-  height: 38px;
-  line-height: 38px;
+  width: 6.5rem;
+  height: 2.375rem;
+  line-height: 2.375rem;
   text-align: center;
-  border-radius: 0px 0px 0px 0px;
-  border: 1px solid #FFFFFF;
-  margin-top: 100px;
+  border-radius: 0rem 0rem 0rem 0rem;
+  border: .0625rem solid #FFFFFF;
+  margin-top: 6.25rem;
 }
 
 .propertyServicesBtn:hover {
   background: #14355C;
   border-color: #14355C;
   color: #FFFFFF;
-  border: 1px solid #FFFFFF;
+  border: .0625rem solid #FFFFFF;
 }
 
 
@@ -279,11 +279,11 @@
   align-items: center;
   justify-content: center;
   color: #999;
-  font-size: 0.875rem;
+  font-size: .875rem;
 }
 
 /* Responsive */
-@media (max-width: 1024px) {
+@media (max-width: 64rem) {
   .overview {
     padding: 3rem 2rem;
   }
@@ -301,7 +301,7 @@
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 48rem) {
   .overview {
     padding: 2rem 1rem;
   }
diff --git a/src/pages/Business/CommercialGroup.tsx b/src/pages/Business/CommercialGroup.tsx
index eab2087..b0c57d9 100644
--- a/src/pages/Business/CommercialGroup.tsx
+++ b/src/pages/Business/CommercialGroup.tsx
@@ -109,7 +109,7 @@ export default function BusinessCommercialGroup() {
                                 <img
                                     src={section2Data.tabItems[activeTabIndex]?.sideImage as string}
                                     alt=""
-                                    style={{ width: "100%", height: "800px" }}
+                                    style={{ width: "100%", height: "50rem" }}
                                 />
                             </ScrollReveal>
                         )}
diff --git a/src/pages/Business/CommercialGroupDetail.module.css b/src/pages/Business/CommercialGroupDetail.module.css
index 79b123c..5037b1b 100644
--- a/src/pages/Business/CommercialGroupDetail.module.css
+++ b/src/pages/Business/CommercialGroupDetail.module.css
@@ -1,49 +1,49 @@
 .twoColSection {
-    padding: 100px 260px;
+    padding: 6.25rem 16.25rem;
 }
 
 .twoColSection p {
-    font-size: 18px;
+    font-size: 1.125rem;
     color: #222;
-    line-height: 24px;
-    margin-bottom: 20px;
+    line-height: 1.5rem;
+    margin-bottom: 1.25rem;
 }
 
 
 .threeColSection {
-    padding: 100px 260px;
+    padding: 6.25rem 16.25rem;
     width: 100%;
-    height: 966px;
+    height: 60.375rem;
     background: rgba(216, 216, 216, 0.5);
 }
 
 .threeColTabs {
-    height: 60px;
+    height: 3.75rem;
     display: flex;
     flex-direction: row;
     justify-content: center;
-    gap: 70px;
+    gap: 4.375rem;
     font-weight: 400;
-    font-size: 24px;
-    line-height: 34px;
-    border-bottom: 1px solid #D5D8DC;
+    font-size: 1.5rem;
+    line-height: 2.125rem;
+    border-bottom: .0625rem solid #D5D8DC;
 }
 
 .threeColTabItem {
-    height: 60px;
+    height: 3.75rem;
     cursor: pointer;
     color: #222222;
 }
 
 .threeColTabItem.active {
-    border-bottom: 2px solid #000000;
+    border-bottom: .125rem solid #000000;
     color: #14355C;
 }
 
 .threeColContent {
-    padding: 150px 0;
+    padding: 9.375rem 0;
     display: flex;
-    gap: 80px;
+    gap: 5rem;
     flex-direction: row;
 }
 
@@ -51,25 +51,25 @@
     flex: 6;
     margin: auto 0;
     .threeColContentLeftHead {
-        margin-bottom: 30px;
+        margin-bottom: 1.875rem;
         display: flex;
-        gap: 10px;
+        gap: .625rem;
 
         .threeColContentLeftTitle {
             .threeColContentLeftTitleMain {
                 font-weight: 700;
-                font-size: 40px;
+                font-size: 2.5rem;
                 color: #222222;
-                line-height: 50px;
+                line-height: 3.125rem;
                 text-align: left;
                 font-style: normal;
                 text-transform: none;
             }
             .threeColContentLeftTitleSub {
                 font-weight: 400;
-                font-size: 18px;
+                font-size: 1.125rem;
                 color: #14355C;
-                line-height: 26px;
+                line-height: 1.625rem;
                 text-align: left;
                 font-style: normal;
                 text-transform: none;
@@ -78,9 +78,9 @@
     }
     .threeColContentLeftDesc {
         font-weight: 400;
-        font-size: 18px;
+        font-size: 1.125rem;
         color: #222222;
-        line-height: 34px;
+        line-height: 2.125rem;
         text-align: justify;
         font-style: normal;
         text-transform: none;
@@ -90,7 +90,7 @@
 .threeColContentRight {
     flex: 8;
     img {
-        width: 800px;
-        height: 500px;
+        width: 50rem;
+        height: 31.25rem;
     }
 }
\ No newline at end of file
diff --git a/src/pages/Business/InvestGroup.module.css b/src/pages/Business/InvestGroup.module.css
index b89ebe6..9c13175 100644
--- a/src/pages/Business/InvestGroup.module.css
+++ b/src/pages/Business/InvestGroup.module.css
@@ -1,23 +1,23 @@
 .investGroup {
     width: 100%;
-    height: 800px;
-    padding: 100px 260px;
+    height: 50rem;
+    padding: 6.25rem 16.25rem;
     background: rgba(0, 39, 83, 0.7);
 
     .investGroupContent {
         color: #FFFFFF;
-        height: 460px;
+        height: 28.75rem;
 
         .investGroupContentItems {
             display: flex;
-            height: 460px;
+            height: 28.75rem;
 
             .investGroupContentItem:first-child {
-                padding-right: 100px;
+                padding-right: 6.25rem;
             }
 
             .investGroupContentItem:last-child {
-                padding-left: 100px;
+                padding-left: 6.25rem;
             }
 
             .investGroupContentItem {
@@ -26,23 +26,23 @@
                 flex-direction: column;
                 justify-content: center;
                 align-items: center;
-                gap: 40px;
+                gap: 2.5rem;
 
                 &:last-child {
                     border-right: none;
                 }
 
-                border-right: 1px solid rgba(255, 255, 255, .5);
+                border-right: .0625rem solid rgba(255, 255, 255, .5);
 
                 .investGroupContentItemTitle {
-                    font-size: 40px;
+                    font-size: 2.5rem;
                 }
 
                 .investGroupContentItemContent {
                     font-weight: 400;
-                    font-size: 16px;
+                    font-size: 1rem;
                     color: #FFFFFF;
-                    line-height: 30px;
+                    line-height: 1.875rem;
                     text-align: justify;
                     font-style: normal;
                     text-transform: none;
@@ -55,25 +55,25 @@
 
 .equityInvestment {
     width: 100%;
-    padding: 100px 260px;
+    padding: 6.25rem 16.25rem;
     background: rgba(255, 255, 255, 0.6);
 
     .equityInvestmentItems {
         /* 5列布局 */
         display: grid;
         grid-template-columns: repeat(5, 1fr);
-        gap: 20px 40px;
+        gap: 1.25rem 2.5rem;
 
         .equityInvestmentItem {
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            gap: 20px;
+            gap: 1.25rem;
 
             .equityInvestmentItemLogo {
-                width: 264px;
-                height: 157px;
+                width: 16.5rem;
+                height: 9.8125rem;
                 object-fit: cover;
             }
         }
@@ -98,28 +98,28 @@
     }
 
     .industryFosterMask {
-        width: 546px;
-        min-height: 400px;
+        width: 34.125rem;
+        min-height: 25rem;
         background: rgba(20, 53, 92, 0.5);
         color: #fff;
-        padding: 60px 50px;
+        padding: 3.75rem 3.125rem;
 
         .industryFosterMaskTitle {
             font-weight: 500;
-            font-size: 40px;
+            font-size: 2.5rem;
             color: #FFFFFF;
-            line-height: 50px;
+            line-height: 3.125rem;
             text-align: left;
             font-style: normal;
             text-transform: none;
-            margin-bottom: 30px;
+            margin-bottom: 1.875rem;
         }
 
         .industryFosterMaskContent {
             font-weight: 400;
-            font-size: 18px;
+            font-size: 1.125rem;
             color: #FFFFFF;
-            line-height: 34px;
+            line-height: 2.125rem;
             text-align: justify;
             font-style: normal;
             text-transform: none;
diff --git a/src/pages/Home/Home.module.css b/src/pages/Home/Home.module.css
index ed4088c..c99a5a2 100644
--- a/src/pages/Home/Home.module.css
+++ b/src/pages/Home/Home.module.css
@@ -73,7 +73,7 @@
 .commercialItem {
   flex: 1;
   height: 100%;
-  border-left: 1px solid #fff;
+  border-left: .0625rem solid #fff;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -82,7 +82,7 @@
   box-sizing: border-box;
 }
 .commercialItem:last-child {
-  border-right: 1px solid #fff;
+  border-right: .0625rem solid #fff;
 }
 .commercialTitle {
   font-size: 1.25rem;
@@ -138,7 +138,7 @@
   align-items: flex-end;
 }
 
-@media (max-width: 1024px) {
+@media (max-width: 64rem) {
   .commercialContent {
     margin: 0 4rem;
   }
@@ -152,7 +152,7 @@
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 48rem) {
   .cardsInner {
     grid-template-columns: 1fr;
   }
@@ -354,7 +354,7 @@
   color: #666;
   margin: 0 0 0.5rem;
   line-height: 1.6;
-  height: 70px;
+  height: 4.375rem;
 
   display: -webkit-box;
   -webkit-line-clamp: 2;
diff --git a/src/pages/Join/Campus.module.css b/src/pages/Join/Campus.module.css
index 9ad5bbf..a0d2435 100644
--- a/src/pages/Join/Campus.module.css
+++ b/src/pages/Join/Campus.module.css
@@ -6,39 +6,39 @@
     .campusColLeft {
         display: flex;
         flex-direction: column;
-        gap: 30px;
+        gap: 1.875rem;
 
 
         .resetButton {
-            width: 340px;
-            height: 50px;
-            border-radius: 6px 6px 6px 6px;
-            border: 1px solid #14355C;
+            width: 21.25rem;
+            height: 3.125rem;
+            border-radius: .375rem .375rem .375rem .375rem;
+            border: .0625rem solid #14355C;
             cursor: pointer;
 
             font-weight: 400;
-            font-size: 16px;
+            font-size: 1rem;
             color: #14355C;
-            line-height: 50px;
+            line-height: 3.125rem;
             outline: none;
         }
     }
 
     .campusColRight {
         .jobList {
-            padding-bottom: 100px;
-            width: 960px;
-            min-height: 500px;
+            padding-bottom: 6.25rem;
+            width: 60rem;
+            min-height: 31.25rem;
         }
         .jobItem {
             width: 100%;
-            height: 200px;
-            border-radius: 0px 0px 0px 0px;
-            border-bottom: 1px solid #E5E5E5;
+            height: 12.5rem;
+            border-radius: 0rem 0rem 0rem 0rem;
+            border-bottom: .0625rem solid #E5E5E5;
             display: flex;
             flex-direction: column;
-            gap: 15px;
-            padding: 30px 20px;
+            gap: .9375rem;
+            padding: 1.875rem 1.25rem;
             cursor: pointer;
             transition: all 0.3s ease;
 
@@ -60,17 +60,17 @@
 
                 .jobItemTitle {
                     font-weight: 500;
-                    font-size: 20px;
+                    font-size: 1.25rem;
                     color: #222222;
-                    line-height: 26px;
+                    line-height: 1.625rem;
                     transition: all 0.3s ease;
                 }
 
                 .jobItemTitleRight {
                     font-weight: 400;
-                    font-size: 16px;
+                    font-size: 1rem;
                     color: #999999;
-                    line-height: 22px;
+                    line-height: 1.375rem;
                     transition: all 0.3s ease;
                 }
             }
@@ -79,19 +79,19 @@
 
             .jobItemLabels {
                 font-weight: 400;
-                font-size: 18px;
+                font-size: 1.125rem;
                 color: #333333;
-                line-height: 24px;
+                line-height: 1.5rem;
                 display: flex;
-                gap: 10px;
+                gap: .625rem;
 
             }
 
             .jobItemContent {
                 font-weight: 400;
-                font-size: 16px;
+                font-size: 1rem;
                 color: #666666;
-                line-height: 30px;
+                line-height: 1.875rem;
                 /* 超过2行省略 */
                 display: -webkit-box;
                 -webkit-line-clamp: 2;
@@ -105,34 +105,34 @@
 
 
 .searchInput {
-    width: 340px;
-    height: 50px;
-    border-radius: 6px 6px 6px 6px;
-    border: 1px solid #B6C0CB;
+    width: 21.25rem;
+    height: 3.125rem;
+    border-radius: .375rem .375rem .375rem .375rem;
+    border: .0625rem solid #B6C0CB;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 14px;
+    padding: .875rem;
     overflow: hidden;
 
     .searchIcon {
-        width: 24px;
-        height: 24px;
+        width: 1.5rem;
+        height: 1.5rem;
     }
 
     input {
         border: none;
         width: 100%;
-        height: 50px;
+        height: 3.125rem;
         font-weight: 400;
-        font-size: 16px;
-        line-height: 22px;
+        font-size: 1rem;
+        line-height: 1.375rem;
 
         &::placeholder {
             font-weight: 400;
-            font-size: 16px;
+            font-size: 1rem;
             color: #999999;
-            line-height: 22px;
+            line-height: 1.375rem;
         }
 
         &:focus {
@@ -148,28 +148,28 @@
 }
 
 .selectFormItemLabel {
-    font-size: 16px;
+    font-size: 1rem;
     color: #666666;
     display: block;
-    margin-bottom: 8px;
+    margin-bottom: .5rem;
 }
 
 .selectFormItemBox {
-    width: 340px;
-    height: 50px;
-    border-radius: 6px;
-    border: 1px solid #B6C0CB;
-    padding: 0 14px;
+    width: 21.25rem;
+    height: 3.125rem;
+    border-radius: .375rem;
+    border: .0625rem solid #B6C0CB;
+    padding: 0 .875rem;
     display: flex;
     align-items: center;
     font-weight: 400;
-    font-size: 16px;
-    line-height: 22px;
+    font-size: 1rem;
+    line-height: 1.375rem;
     background: #FFFFFF;
 }
 
 .selectFilterIcon {
-    margin-right: 5px;
+    margin-right: .3125rem;
     color: #666666;
 }
 
@@ -196,8 +196,8 @@
 .selectFormItemSelect :global(.ant-select-selection-placeholder),
 .selectFormItemSelect :global(.ant-select-selection-item) {
     font-weight: 400;
-    font-size: 16px;
-    line-height: 22px;
+    font-size: 1rem;
+    line-height: 1.375rem;
     color: #222222;
 }
 
@@ -206,6 +206,6 @@
 }
 
 .selectDownIcon {
-    margin-left: 5px;
+    margin-left: .3125rem;
     color: #999999;
 }
\ No newline at end of file
diff --git a/src/pages/Join/Culture.module.css b/src/pages/Join/Culture.module.css
index bce5bfb..568b3e6 100644
--- a/src/pages/Join/Culture.module.css
+++ b/src/pages/Join/Culture.module.css
@@ -1,12 +1,12 @@
 .cultureItems {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 15px;
+    gap: .9375rem;
 
     .cultureItem {
         color: #fff;
-        /* width: 457px;
-        height: 560px; */
+        /* width: 28.5625rem;
+        height: 35rem; */
         aspect-ratio: 457 / 560;
         background-size: cover;
         background-position: center;
@@ -23,7 +23,7 @@
         .cultureItemInner {
             position: absolute;
             inset: 0;
-            padding: 40px;
+            padding: 2.5rem;
             display: flex;
             flex-direction: column;
             justify-content: flex-end;
@@ -32,16 +32,16 @@
 
             .cultureItemTitle {
                 font-weight: 700;
-                font-size: 24px;
+                font-size: 1.5rem;
                 color: #FFFFFF;
-                line-height: 34px;
+                line-height: 2.125rem;
             }
 
             .cultureItemContent {
                 font-weight: 400;
-                font-size: 18px;
+                font-size: 1.125rem;
                 color: #FFFFFF;
-                line-height: 40px;
+                line-height: 2.5rem;
                 height: 0;
                 opacity: 0;
                 overflow: hidden;
@@ -56,7 +56,7 @@
             }
 
             .cultureItemContent {
-                height: 40px;
+                height: 2.5rem;
                 opacity: 1;
             }
         }
@@ -68,36 +68,36 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    margin: 0 140px;
+    margin: 0 8.75rem;
 
     .valuesItem {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        gap: 20px;
+        gap: 1.25rem;
 
         .valuesItemIcon {
-            width: 100px;
-            height: 100px;
+            width: 6.25rem;
+            height: 6.25rem;
             background-size: cover;
             background-position: center;
             background-repeat: no-repeat;
-            margin-bottom: 15px;
+            margin-bottom: .9375rem;
         }
 
         .valuesItemTitle {
             font-weight: 500;
-            font-size: 24px;
+            font-size: 1.5rem;
             color: #222222;
-            line-height: 34px;
+            line-height: 2.125rem;
         }
 
         .valuesItemContent {
             font-weight: 500;
-            font-size: 18px;
+            font-size: 1.125rem;
             color: #222222;
-            line-height: 26px;
+            line-height: 1.625rem;
         }
     }
 }
\ No newline at end of file
diff --git a/src/pages/News/Media.module.css b/src/pages/News/Media.module.css
index e0c4775..4550fe8 100644
--- a/src/pages/News/Media.module.css
+++ b/src/pages/News/Media.module.css
@@ -1,7 +1,7 @@
 .mediaItems {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    height: 500px;
+    height: 31.25rem;
 
     .mediaItem {
         height: 100%;
@@ -11,27 +11,27 @@
         justify-content: center;
 
         &:first-child {
-            border-right: 1px solid rgba(255,255,255,0.5);
-            padding-right: 60px;
+            border-right: .0625rem solid rgba(255,255,255,0.5);
+            padding-right: 3.75rem;
         }
         &:last-child {
-            padding-left: 60px;
+            padding-left: 3.75rem;
         }
 
         .mediaItemTitle {
             font-weight: 500;
-            font-size: 40px;
+            font-size: 2.5rem;
             color: #FFFFFF;
-            line-height: 50px;
+            line-height: 3.125rem;
             text-align: center;
-            margin-bottom: 40px;
+            margin-bottom: 2.5rem;
         }
 
         .mediaItemContent {
             font-weight: 400;
-            font-size: 24px;
+            font-size: 1.5rem;
             color: #FFFFFF;
-            line-height: 40px;
+            line-height: 2.5rem;
             text-align: center;
             white-space: pre-line;
         }
diff --git a/src/pages/News/NewsPublic.module.css b/src/pages/News/NewsPublic.module.css
index b1040f0..5a74ae4 100644
--- a/src/pages/News/NewsPublic.module.css
+++ b/src/pages/News/NewsPublic.module.css
@@ -4,12 +4,12 @@
     justify-content: flex-end;
 
     .searchInput {
-        width: 340px;
-        height: 50px;
+        width: 21.25rem;
+        height: 3.125rem;
         background: #FFFFFF;
-        border-radius: 6px 6px 6px 6px;
-        border: 1px solid #B6C0CB;
-        padding: 0 16px;
+        border-radius: .375rem .375rem .375rem .375rem;
+        border: .0625rem solid #B6C0CB;
+        padding: 0 1rem;
         position: relative;
 
         input {
@@ -20,17 +20,17 @@
             background: transparent;
 
             font-weight: 500;
-            font-size: 18px;
+            font-size: 1.125rem;
             color: #222222;
-            line-height: 26px;
+            line-height: 1.625rem;
         }
 
         .searchIcon {
             position: absolute;
-            right: 16px;
+            right: 1rem;
             top: 50%;
             transform: translateY(-50%);
-            font-size: 16px;
+            font-size: 1rem;
             color: #333;
         }
     }
@@ -39,16 +39,16 @@
 
 .newList {
     /* 3列 */
-    min-height: 200px;
-    margin-top: 100px;
-    margin-bottom: 100px;
+    min-height: 12.5rem;
+    margin-top: 6.25rem;
+    margin-bottom: 6.25rem;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 22px 30px;
+    gap: 1.375rem 1.875rem;
 
     .newItem {
-        /* height: 500px;
-        width: 452px; */
+        /* height: 31.25rem;
+        width: 28.25rem; */
         aspect-ratio: 452 / 500;
         overflow: hidden;
         display: flex;
@@ -56,7 +56,7 @@
 
         img, video {
             width: 100%;
-            /* height: 300px; */
+            /* height: 18.75rem; */
             aspect-ratio: 452 / 300;
             object-fit: cover;
             cursor: pointer;
@@ -82,7 +82,7 @@
             width: 100%;
             aspect-ratio: 452 / 200;
             background: #fff;
-            padding: 20px 20px 40px;
+            padding: 1.25rem 1.25rem 2.5rem;
             display: flex;
             flex-direction: column;
             justify-content: space-between;
@@ -92,9 +92,9 @@
 
             .newItemTitle {
                 font-weight: 500;
-                font-size: 20px;
+                font-size: 1.25rem;
                 color: #222222;
-                line-height: 30px;
+                line-height: 1.875rem;
                 text-align: justify;
                 font-style: normal;
                 text-transform: none;
@@ -103,9 +103,9 @@
 
             .newItemCreateTime {
                 font-weight: 400;
-                font-size: 16px;
+                font-size: 1rem;
                 color: #666666;
-                line-height: 22px;
+                line-height: 1.375rem;
                 text-align: justify;
                 font-style: normal;
                 text-transform: none;
diff --git a/src/pages/Others/AuditReport.module.css b/src/pages/Others/AuditReport.module.css
index 2a9df64..39145bb 100644
--- a/src/pages/Others/AuditReport.module.css
+++ b/src/pages/Others/AuditReport.module.css
@@ -1,10 +1,10 @@
 .auditReport {
     display: grid;
     grid-template-columns: 2fr 1fr;
-    gap: 200px;
+    gap: 12.5rem;
     .auditReportP {
-        font-size: 18px;
-        line-height: 34px;
+        font-size: 1.125rem;
+        line-height: 2.125rem;
         color: #333333;
     }
 
@@ -15,26 +15,26 @@
     }
 
     .auditReportQrCode {
-        width: 189px;
-        height: 241px;
+        width: 11.8125rem;
+        height: 15.0625rem;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         .auditReportQrCodeTitle {
-            font-size: 24px;
-            margin-bottom: 20px;
+            font-size: 1.5rem;
+            margin-bottom: 1.25rem;
         }
 
         .auditReportQrCodeImg {
-            width: 160px;
-            height: 160px;
+            width: 10rem;
+            height: 10rem;
         }
 
         .auditReportQrCodeText {
-            font-size: 14px;
+            font-size: .875rem;
             color: #222;
-            margin-top: 5px;
+            margin-top: .3125rem;
         }
     }
 
diff --git a/src/pages/Others/Search.module.css b/src/pages/Others/Search.module.css
index 11f4040..b1cdff9 100644
--- a/src/pages/Others/Search.module.css
+++ b/src/pages/Others/Search.module.css
@@ -1,6 +1,6 @@
 .searchRow {
     width: 100%;
-    height: 288px;
+    height: 18rem;
     background: #F0F2F4;
     display: flex;
 
@@ -8,35 +8,35 @@
         margin: auto;
         display: flex;
         align-items: center;
-        gap: 30px;
+        gap: 1.875rem;
 
         .searchRowTitle {
             font-weight: bold;
-            font-size: 24px;
+            font-size: 1.5rem;
             color: #222222;
-            line-height: 34px;
+            line-height: 2.125rem;
         }
 
         .searchInputWrapper {
             position: relative;
 
             .searchInput {
-                width: 600px;
-                height: 54px;
-                border: 1px solid #333333;
+                width: 37.5rem;
+                height: 3.375rem;
+                border: .0625rem solid #333333;
 
                 font-weight: 400;
-                font-size: 18px;
+                font-size: 1.125rem;
                 color: #222222;
-                line-height: 24px;
+                line-height: 1.5rem;
                 outline: none;
-                padding: 0 20px;
+                padding: 0 1.25rem;
             }
 
             .searchKeyword {
                 position: absolute;
-                margin-top: 20px;
-                font-size: 24px;
+                margin-top: 1.25rem;
+                font-size: 1.5rem;
                 color: #222222;
 
                 .searchKeywordKeyword {
@@ -48,14 +48,14 @@
         }
 
         .searchBtn {
-            width: 128px;
-            height: 54px;
+            width: 8rem;
+            height: 3.375rem;
             background: #14355C;
-            border-radius: 0px 0px 0px 0px;
+            border-radius: 0rem 0rem 0rem 0rem;
             outline: none;
 
             font-weight: 400;
-            font-size: 24px;
+            font-size: 1.5rem;
             color: #FFFFFF;
             cursor: pointer;
         }
@@ -66,13 +66,14 @@
 .searchItemList {
     display: flex;
     flex-direction: column;
-    gap: 50px;
+    gap: 3.125rem;
+    margin-bottom: 9.375rem;
     .searchItem {
         display: flex;
         flex-direction: column;
-        gap: 20px;
-        height: 160px;
-        border-bottom: 1px solid #D8D8D8;
+        gap: 1.25rem;
+        height: 10rem;
+        border-bottom: .0625rem solid #D8D8D8;
 
         .searchItemTitleRow {
             display: flex;
@@ -80,25 +81,25 @@
             justify-content: space-between;
 
             .searchItemTitle {
-                font-size: 24px;
+                font-size: 1.5rem;
                 color: #222222;
                 font-weight: 700;
             }
 
             .searchItemCreateTime {
                 font-weight: 400;
-                font-size: 16px;
+                font-size: 1rem;
                 color: #999999;
-                line-height: 22px;
+                line-height: 1.375rem;
             }
 
         }
 
         .searchItemContent {
             font-weight: 400;
-            font-size: 18px;
+            font-size: 1.125rem;
             color: #333333;
-            line-height: 30px;
+            line-height: 1.875rem;
             /* 2行文本超出省略 */
             display: -webkit-box;
             -webkit-line-clamp: 2;
diff --git a/src/pages/Others/Search.tsx b/src/pages/Others/Search.tsx
index 8c6f851..84433d3 100644
--- a/src/pages/Others/Search.tsx
+++ b/src/pages/Others/Search.tsx
@@ -1,46 +1,75 @@
 import Banner, { type BannerConfig } from "@/components/Banner";
 import Section from "@/components/layout/Section";
 import styles from "./Search.module.css";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { dateFormat } from "@/utils";
 import { useStore } from "@/store";
-
+import appApi from "@/api/app";
+import Pagination from "@/components/Pagination";
+import { Link } from "react-router-dom";
 type SearchData = {
     id: number;
     title: string;
     content: string;
     createTime: string;
+    lang: "ZH" | "EN";
+    path: string;
 };
 
 export default function Search() {
     const appConfig = useStore((s) => s.appConfig);
+    const locale = useStore((s) => s.locale);
+    const supportLocales = useStore((s) => s.supportLocales);
+    const categoryList = useStore((s) => s.categoryList);
     const data = appConfig?.others?.search;
     const banner = data?.banner;
+    const searchTips = data?.tips || {
+        keyword: "关键词",
+        placeholder: "请输入",
+        search: "搜索",
+        total: "共",
+        result: "个结果",
+    }
+    const [page, setPage] = useState(1);
+    const [size] = useState(2 * supportLocales.length);
+    const [total, setTotal] = useState(0);
+    const categoryId = String(categoryList?.find((item: any) => item.name.includes('集团发布'))?.id ?? '');
 
     const [searched, setSearched] = useState(false);
     const [searchKeyword, setSearchKeyword] = useState("");
-    const [total, setTotal] = useState(0);
     const [searchData, setSearchData] = useState<SearchData[]>([]);
+    const localSearchData = useMemo(() => {
+        return searchData.filter((item) => item.lang.toLowerCase() === locale.split('-')[0]);
+    }, [searchData, locale]);
 
     const handleSearch = useCallback(() => {
-        setSearched(true);
-        setSearchData([
-            {
-                id: 1,
-                title: "中共中央举行新闻发布会解读党的十九届五中全会精神_党建动态",
-                content:
-                    "中国共产党第十九届中央委员会第五次全体会议，于2020年10月26日至29日在北京举行。全会审议通过了《中共中央关于制定国民经济和社会发展第十四个五年规划和二〇三五年远景目标的建议》。",
-                createTime: "2025-11-25",
-            },
-            {
-                id: 2,
-                title: "中共中央举行新闻发布会解读党的十九届五中全会精神_党建动态",
-                content:
-                    "中国共产党第十九届中央委员会第五次全体会议，于2020年10月26日至29日在北京举行。全会审议通过了《中共中央关于制定国民经济和社会发展第十四个五年规划和二〇三五年远景目标的建议》。",
-                createTime: "2025-11-25",
-            },
-        ]);
-    }, [searchKeyword]);
+        appApi.getNewsList({
+            page,
+            size,
+            title: searchKeyword,
+            category_id: categoryId,
+        }).then((res) => {
+            setSearched(true);
+            const data = res.data.items.map((item: any) => {
+                return {
+                    id: item.id,
+                    title: item.title,
+                    content: item.content,
+                    createTime: item.create_time,
+                    lang: item.lang,
+                    path: `/news/detail/${item.id}`,
+                }
+            })
+            setSearchData(data);
+            setTotal(res.data.total);
+        });
+    }, [searchKeyword, page, size, categoryId]);
+
+    useEffect(() => {
+        handleSearch();
+    }, [page, size]);
+
+    
 
     return (
         <div>
@@ -53,11 +82,11 @@ export default function Search() {
 
             <section className={styles.searchRow}>
                 <div className={styles.searchRowInner}>
-                    <span className={styles.searchRowTitle}>关键词</span>
+                    <span className={styles.searchRowTitle}>{searchTips.keyword}</span>
                     <div className={styles.searchInputWrapper}>
                         <input
                             type="text"
-                            placeholder="请输入"
+                            placeholder={searchTips.placeholder}
                             className={styles.searchInput}
                             value={searchKeyword}
                             onChange={(e) => setSearchKeyword(e.target.value)}
@@ -67,13 +96,13 @@ export default function Search() {
                         />
                         {searched && (
                             <div className={styles.searchKeyword}>
-                                搜索：
+                                {searchTips.search}:
                                 <span className={styles.searchKeywordKeyword}>
                                     {searchKeyword}&nbsp;
                                 </span>
-                                共
-                                <span>{total}</span>
-                                个结果
+                                {searchTips.total}:
+                                <span>{total / 2}</span>
+                                {searchTips.result}
                             </div>
                         )}
                     </div>
@@ -82,25 +111,29 @@ export default function Search() {
                         className={styles.searchBtn}
                         onClick={handleSearch}
                     >
-                        搜索
+                        {searchTips.search}:
                     </button>
                 </div>
             </section>
 
             <Section background="" maskBackground="#fff">
                 <div className={styles.searchItemList}>
-                    {searchData.map((item) => (
-                        <div key={item.id} className={styles.searchItem}>
+                    {localSearchData.map((item) => (
+                        <Link to={item.path ?? ''} key={item.id} className={styles.searchItem}>
                             <div className={styles.searchItemTitleRow}>
                                 <span className={styles.searchItemTitle}>{item.title}</span>
                                 <span className={styles.searchItemCreateTime}>
-                                    {dateFormat(item.createTime, "yyyy年MM月dd日")}
+                                    {locale.startsWith("zh")
+                                        ? dateFormat(item.createTime, "yyyy年MM月dd日")
+                                        : dateFormat(item.createTime, "yyyy-MM-dd")
+                                        }
                                 </span>
                             </div>
                             <div className={styles.searchItemContent}>{item.content}</div>
-                        </div>
+                        </Link>
                     ))}
                 </div>
+                <Pagination total={total} size={size} page={page} onChange={setPage} />
             </Section>
         </div>
     );
diff --git a/src/pages/Others/SiteMap.module.css b/src/pages/Others/SiteMap.module.css
index a1806f8..fc0aefe 100644
--- a/src/pages/Others/SiteMap.module.css
+++ b/src/pages/Others/SiteMap.module.css
@@ -1,40 +1,40 @@
 .siteMap {
     .siteMapTitle {
         font-weight: 700;
-        font-size: 24px;
+        font-size: 1.5rem;
         color: #14355C;
-        line-height: 34px;
+        line-height: 2.125rem;
     }
 
 
     .siteMapItems {
-        margin-top: 60px;
-        border-top: 1px solid #DDDDDD;
-        padding: 0 50px;
+        margin-top: 3.75rem;
+        border-top: .0625rem solid #DDDDDD;
+        padding: 0 3.125rem;
         /* 主网格：标签列 + 5列子项，列宽固定以实现跨行对齐 */
-        /* 第一列为180px */
+        /* 第一列为11.25rem */
         display: grid;
-        grid-template-columns: 182px repeat(5, minmax(140px, 1fr));
+        grid-template-columns: 11.375rem repeat(5, minmax(8.75rem, 1fr));
 
         .siteMapItem {
-            padding: 50px 0;
-            border-bottom: 1px solid #DDDDDD;
+            padding: 3.125rem 0;
+            border-bottom: .0625rem solid #DDDDDD;
             display: grid;
             grid-template-columns: subgrid;
             grid-column: 1 / -1;
 
             .siteMapItemLabel {
-                padding-left: 50px;
+                padding-left: 3.125rem;
                 font-weight: 700;
-                font-size: 18px;
+                font-size: 1.125rem;
                 color: #14355C;
                 position: relative;
 
                 &::after {
                     content: '';
                     display: block;
-                    height: 30px;
-                    width: 1px;
+                    height: 1.875rem;
+                    width: .0625rem;
                     background: #DDDDDD;
                     position: absolute;
                     right: 0;
@@ -43,17 +43,17 @@
             }
 
             .siteMapItemChildren {
-                padding: 0 20px 0 60px;
+                padding: 0 1.25rem 0 3.75rem;
                 display: grid;
                 grid-column: 2 / -1;
                 grid-template-columns: subgrid;
-                column-gap: 20px;
+                column-gap: 1.25rem;
 
                 .siteMapItemChildLabel {
                     font-weight: bold;
-                    font-size: 18px;
+                    font-size: 1.125rem;
                     color: #222222;
-                    line-height: 22px;
+                    line-height: 1.375rem;
                     cursor: pointer;
 
                     &:hover {
@@ -63,13 +63,13 @@
 
                 .siteMapItemChildChildren {
                     font-weight: 400;
-                    font-size: 18px;
+                    font-size: 1.125rem;
                     color: #666666;
-                    line-height: 22px;
+                    line-height: 1.375rem;
                     display: flex;
                     flex-flow: column;
-                    gap: 10px;
-                    margin-top: 10px;
+                    gap: .625rem;
+                    margin-top: .625rem;
 
                     .siteMapItemChildChild {
                         cursor: pointer;
diff --git a/src/pages/Others/TermsOfUse.tsx b/src/pages/Others/TermsOfUse.tsx
index b566094..f1ff47a 100644
--- a/src/pages/Others/TermsOfUse.tsx
+++ b/src/pages/Others/TermsOfUse.tsx
@@ -25,8 +25,8 @@ export default function TermsOfUse() {
             <Section background="" maskBackground="#fff">
                 <p
                     style={{
-                        fontSize: "18px",
-                        lineHeight: "34px",
+                        fontSize: "1.125rem",
+                        lineHeight: "2.125rem",
                         color: "#333333",
                     }}
                     dangerouslySetInnerHTML={{ __html: content }}
diff --git a/src/pages/Social/Foundation.module.css b/src/pages/Social/Foundation.module.css
index 9db28b4..122c1ed 100644
--- a/src/pages/Social/Foundation.module.css
+++ b/src/pages/Social/Foundation.module.css
@@ -7,7 +7,7 @@
     /* 2列 */
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    gap: 30px;
+    gap: 1.875rem;
 
     .publicWelfareDataItem {
         position: relative;
@@ -22,7 +22,7 @@
 
 /* 信息公开 */
 .informationPublicDataContent {
-    min-height: 450px;
+    min-height: 28.125rem;
     overflow: auto;
     display: flex;
     flex-direction: column;
@@ -30,18 +30,18 @@
 }
 
 .informationPublicDataItems {
-    /* min-height: 400px; */
+    /* min-height: 25rem; */
     color: #fff;
     font-weight: 400;
-    font-size: 20px;
-    line-height: 34px;
+    font-size: 1.25rem;
+    line-height: 2.125rem;
     text-align: left;
     font-style: normal;
     text-transform: none;
-    padding: 0 90px 150px 90px;
+    padding: 0 5.625rem 9.375rem 5.625rem;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 20px;
+    gap: 1.25rem;
 
     li {
         list-style: disc;
@@ -57,13 +57,13 @@
 .partnerItems {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
-    gap: 38px;
+    gap: 2.375rem;
     .partnerItem {
-        width: 250px;
-        height: 120px;
-        border-radius: 999px;
+        width: 15.625rem;
+        height: 7.5rem;
+        border-radius: 62.4375rem;
         overflow: hidden;
-        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
+        box-shadow: 0 0 .625rem 0 rgba(0, 0, 0, 0.3);
         display: flex;
         align-items: center;
         justify-content: center;
diff --git a/src/pages/Social/Foundation.tsx b/src/pages/Social/Foundation.tsx
index 53f8530..d5032fa 100644
--- a/src/pages/Social/Foundation.tsx
+++ b/src/pages/Social/Foundation.tsx
@@ -78,7 +78,7 @@ export default function Foundation() {
 
             {section1Data && (
                 <ParagraphSection data={section1Data}>
-                    <div style={{ marginTop: "100px" }} />
+                    <div style={{ marginTop: "6.25rem" }} />
                     {section1Data.tabItems && <TopTabsSection data={{ tabItems: section1Data.tabItems }} className={styles.topTabsSection} />}
                 </ParagraphSection>
             )}
@@ -98,7 +98,7 @@ export default function Foundation() {
                             </ScrollReveal>
                         ))}
                     </div>
-                    <div style={{ marginBottom: "50px" }} />
+                    <div style={{ marginBottom: "3.125rem" }} />
                 </Section>
             )}
 
@@ -108,7 +108,7 @@ export default function Foundation() {
                     titleColor="#fff"
                     background={section3Data.backgroundImage ?? "/images/bg-overview.png"}
                     maskBackground="rgba(255,255,255,0.1)"
-                    height="760px"
+                    height="47.5rem"
                 >
                     <div className={styles.informationPublicDataContent}>
                         <div className={styles.informationPublicDataItems}>
diff --git a/src/pages/Social/Sustainability.module.css b/src/pages/Social/Sustainability.module.css
index ff6d43f..2510554 100644
--- a/src/pages/Social/Sustainability.module.css
+++ b/src/pages/Social/Sustainability.module.css
@@ -1,6 +1,6 @@
 .socialResponsibilityCaseDataContent {
-    margin-top: -50px;
-    margin-bottom: 100px;
+    margin-top: -3.125rem;
+    margin-bottom: 6.25rem;
 }
 
 .socialResponsibilityCaseDataItems {
@@ -11,7 +11,7 @@
     */
     display: flex;
     flex-wrap: wrap;
-    gap: 30px;
+    gap: 1.875rem;
 }
 
 .socialResponsibilityCaseDataItem {
@@ -37,7 +37,7 @@
             transition-delay: 0s;
 
             .socialResponsibilityCaseDataItemTitle {
-                left: 50px;
+                left: 3.125rem;
                 transform: translateX(0);
                 transition-delay: 0s;
             }
@@ -50,7 +50,7 @@
     }
 
     .socialResponsibilityCaseDataItemContentInner {
-        padding: 50px;
+        padding: 3.125rem;
         width: 100%;
         height: 100%;
         background: transparent;
@@ -61,16 +61,16 @@
 
         .socialResponsibilityCaseDataItemMore {
             display: inline-block;
-            margin-top: 60px;
-            width: 104px;
-            height: 38px;
-            border-radius: 0px 0px 0px 0px;
-            border: 1px solid #FFFFFF;
+            margin-top: 3.75rem;
+            width: 6.5rem;
+            height: 2.375rem;
+            border-radius: 0rem 0rem 0rem 0rem;
+            border: .0625rem solid #FFFFFF;
 
             font-weight: 400;
-            font-size: 16px;
+            font-size: 1rem;
             color: #FFFFFF;
-            line-height: 22px;
+            line-height: 1.375rem;
             text-align: center;
             display: flex;
             align-items: center;
@@ -80,9 +80,9 @@
 
     .socialResponsibilityCaseDataItemTitle {
         font-weight: 500;
-        font-size: 24px;
+        font-size: 1.5rem;
         color: #FFFFFF;
-        line-height: 34px;
+        line-height: 2.125rem;
         font-style: normal;
         text-transform: none;
         transition: all 0.3s ease;
@@ -91,11 +91,11 @@
     }
 
     .socialResponsibilityCaseDataItemContent {
-        margin-top: 20px;
+        margin-top: 1.25rem;
         font-weight: 400;
-        font-size: 18px;
+        font-size: 1.125rem;
         color: #FFFFFF;
-        line-height: 34px;
+        line-height: 2.125rem;
         text-align: justify;
         font-style: normal;
         text-transform: none;
@@ -109,16 +109,16 @@
 
 /* 奇数行 [宽|窄]: 4n+1 宽, 4n+2 窄 */
 /* 偶数行 [窄|宽]: 4n+3 窄, 4n+4 宽 */
-/* 810+560=1370，每行总宽 = 100% - 30px */
+/* 810+560=1370，每行总宽 = 100% - 1.875rem */
 .socialResponsibilityCaseDataItem:nth-child(4n + 1),
 .socialResponsibilityCaseDataItem:nth-child(4n + 4) {
-    flex-basis: calc((100% - 30px) * 810 / 1370);
+    flex-basis: calc((100% - 1.875rem) * 810 / 1370);
     aspect-ratio: 810 / 480;
 }
 
 .socialResponsibilityCaseDataItem:nth-child(4n + 2),
 .socialResponsibilityCaseDataItem:nth-child(4n + 3) {
-    flex-basis: calc((100% - 30px) * 560 / 1370);
+    flex-basis: calc((100% - 1.875rem) * 560 / 1370);
     aspect-ratio: 560 / 480;
 }
 
@@ -127,16 +127,16 @@
     /* 4列 */
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    gap: 33px;
+    gap: 2.0625rem;
 
     .socialResponsibilityReportItem {
-        /* width: 325px; */
+        /* width: 20.3125rem; */
 
         .socialResponsibilityReportItemCover {
-            /* width: 325px; */
-            /* height: 439px; */
+            /* width: 20.3125rem; */
+            /* height: 27.4375rem; */
             aspect-ratio: 325 / 439;
-            box-shadow: 0px 0px 20px 0px rgba(0, 16, 32, 0.2);
+            box-shadow: 0rem 0rem 1.25rem 0rem rgba(0, 16, 32, 0.2);
             background-size: cover;
             background-position: center;
             background-repeat: no-repeat;
@@ -145,13 +145,13 @@
 
         .socialResponsibilityReportItemTitle {
             font-weight: 500;
-            font-size: 18px;
+            font-size: 1.125rem;
             color: #222222;
-            line-height: 26px;
+            line-height: 1.625rem;
             text-align: center;
             font-style: normal;
             text-transform: none;
-            margin-top: 40px;
+            margin-top: 2.5rem;
         }
     }
 
@@ -159,16 +159,16 @@
 }
 
 .socialResponsibilityReportItemMore {
-    width: 104px;
-    height: 38px;
-    line-height: 38px;
+    width: 6.5rem;
+    height: 2.375rem;
+    line-height: 2.375rem;
     text-align: center;
-    border: 1px solid #333333;
-    font-size: 16px;
+    border: .0625rem solid #333333;
+    font-size: 1rem;
     color: #333333;
     cursor: pointer;
     margin: 0 auto;
-    margin-top: 100px;
+    margin-top: 6.25rem;
 
     &:hover {
         background: #14355C;
diff --git a/src/proxy.cjs b/src/proxy.cjs
index 936af2f..93b03a5 100644
--- a/src/proxy.cjs
+++ b/src/proxy.cjs
@@ -9,7 +9,7 @@ const isDev = process.env.DEV
 console.log('isDev', isDev)
 module.exports = {
   '/companyHome': {
-    target: isDev ? 'http://10.3.0.7:9999/' : 'http://yintai.batiao8.com/',
+    target: isDev === 'true' ? 'http://10.3.0.7:9999/' : 'http://yintai.batiao8.com/',
     // target: "http://10.3.0.24:9211/",
     changeOrigin: true,
     rewrite: (path) => path.replace(/^\/companyHome/, '')
diff --git a/src/utils/toast.tsx b/src/utils/toast.tsx
index 6874086..73e18fd 100644
--- a/src/utils/toast.tsx
+++ b/src/utils/toast.tsx
@@ -15,7 +15,7 @@ const Toast = (
           type === "info" ? "#333" : type === "warn" ? "#ff9800" : "#f44336"
         };
         color: white;
-        padding: 10px 20px;
+        padding: .625rem 1.25rem;
         border-radius: 5px;
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
         z-index: 1000;