调整

css/style.css

@@ -337,6 +337,9 @@ img { max-width: 100%; display: block; }
   background-size: cover;
   background-position: center;
 }
+.hero-logo{
+  width: 40%;
+}
 .hero-bg::before { display: none; } /* star field placeholder removed */
 
 .hero-content {
@@ -465,13 +468,19 @@ img { max-width: 100%; display: block; }
    ============================================================ */
 .presence { padding: 96px 0; }
 
-/* bg image + SVG overlay share one box and the 1219 × 661 map coordinate space */
+/* bg image + SVG overlay share one box and the 1219 × 660 map coordinate space.
+   isolation + the JS-painted backdrop (an exact copy of .page-content's bg,
+   aligned pixel-for-pixel) give the blended img a LOCAL backdrop — Chrome
+   captures cross-element blend backdrops as the element enters the viewport,
+   and that capture lags a frame or two (the map flashes its intrinsic colors).
+   With the backdrop inside the group there is nothing to capture late. */
 .map-wrap {
   position: relative;
   width: 100%;
-  aspect-ratio: 1219 / 661;
+  aspect-ratio: 1219 / 660;
   overflow: hidden;
   margin: 8px auto 24px;
+  isolation: isolate;
 }
 .map-bg {
   position: absolute;
@@ -480,7 +489,25 @@ img { max-width: 100%; display: block; }
   width: 100%;
   height: 100%;
   object-fit: contain;
+  /* the SVG's internal color-dodge/multiply blends can't reach past the <img>
+     boundary — blend the whole map against the section background instead so
+     the dots tint with it (Figma behaviour). Dark backgrounds only: on light
+     surfaces color-dodge washes the map out to white. */
+  mix-blend-mode: color-dodge;
+  /* hidden until the blend backdrop (page bg image) has loaded — color-dodge
+     over an unloaded near-white backdrop washes the map out. Fading the img
+     itself keeps the blend correct (an ancestor opacity<1 would isolate the
+     group and pop the color in at animation end). main.js adds .ready. */
+  opacity: 0;
+  transition: opacity .7s var(--ease);
 }
+/* !important so it also overrides the inline no-FOUC guard (style="opacity:0")
+   and the JS fade's final inline value — the fade itself is JS-driven
+   (main.js) because CSS animations/transitions lose to !important in the
+   cascade and would snap instead of fading. */
+.map-bg.ready { opacity: 1 !important; }
+/* keep the slide-up entrance but drop the fade — see .map-bg note above */
+.map-wrap.reveal { opacity: 1; transform: translateY(28px); }
 .map-overlay {
   position: absolute;
   inset: 0;
@@ -550,6 +577,21 @@ img { max-width: 100%; display: block; }
 .map-wrap .location.active .halo  { animation: pulse .9s .62s ease-out infinite; }
 .map-wrap .location.active .halo2 { animation-delay: 1.07s; }
 
+/* minor markers (China domestic network) — same choreography, yellow & smaller */
+.map-wrap .location--minor .label { font-size: 11px; letter-spacing: .5px; }
+.map-wrap .location--minor .line  { stroke: #FFD100; stroke-width: 1.2; }
+.map-wrap .location--minor .dot   { fill: #FFD100; }
+.map-wrap .location--minor .halo  { stroke: #FFD100; stroke-width: 1; }
+.map-wrap .location--minor.active .dot {
+  /* re-declared to swap the breathe keyframe for the smaller radius */
+  animation: dotIn .32s .5s cubic-bezier(.2,1.5,.35,1) both,
+             breatheRy 3.4s 1s ease-in-out infinite;
+}
+@keyframes breatheRy {
+  0%, 100% { r: 5px; }
+  50%      { r: 5.7px; }
+}
+
 @keyframes labelIn {
   from { opacity: 0; transform: translateY(5px); }
   to   { opacity: 1; transform: translateY(0); }
@@ -665,7 +707,7 @@ img { max-width: 100%; display: block; }
 
 .partner-dots {
   position: absolute;
-  right: 18px; bottom: 18px;
+  left: 18px; bottom: 18px;
   display: flex; align-items: center; gap: 8px;
   z-index: 3;
 }
@@ -841,19 +883,23 @@ img { max-width: 100%; display: block; }
 .ph-warehouse2    { background: url(../image/home/Partner2.jpg) center/cover no-repeat; }
 .ph-warehouse3    { background: url(../image/home/Partner3.jpg) center/cover no-repeat; }
 .ph-logistics2    { background: url(../image/home/Global-Logistics.jpg) center/cover no-repeat; }
-.ph-exportcars    { background: url(../image/home/Auto-Export.jpg) center/cover no-repeat; }
 .ph-aboutlb1      { background: url(../image/about-us/lb1.jpg) center/cover no-repeat; }
 .ph-aboutlb2      { background: url(../image/about-us/lb2.jpg) center/cover no-repeat; }
 .ph-aboutlb3      { background: url(../image/about-us/lb3.jpg) center/cover no-repeat; }
 .ph-aboutlb4      { background: url(../image/about-us/lb4.jpg) center/cover no-repeat; }
-.ph-fair          { background: url(../image/home/new1.png) center/cover no-repeat; }
-.ph-dubai         { background: url(../image/home/new2.png) center/cover no-repeat; }
-.ph-factory       { background: url(../image/home/new3.png) center/cover no-repeat; }
-.ph-visit         { background: url(../image/home/new4.png) center/cover no-repeat; }
+.ph-fair          { background: url(../image/home/new1.jpg) center/cover no-repeat; }
+.ph-dubai         { background: url(../image/home/new2.jpg) center/cover no-repeat; }
+.ph-factory       { background: url(../image/home/new3.jpg) center/cover no-repeat; }
+.ph-visit         { background: url(../image/home/new4.jpg) center/cover no-repeat; }
 .ph-service1     { background: url(../image/home/Service1.jpg) center/cover no-repeat; }
 .ph-service2     { background: url(../image/home/Service2.jpg) center/cover no-repeat; }
 .ph-service3     { background: url(../image/home/Service3.jpg) center/cover no-repeat; }
 .ph-service4     { background: url(../image/home/Service4.jpg) center/cover no-repeat; }
+.ph-select1{ background: url(../image/Select1.jpg) center/cover no-repeat; }
+.ph-select2{ background: url(../image/Select2.jpg) center/cover no-repeat; }
+.ph-select3{ background: url(../image/Select3.jpg) center/cover no-repeat; }
+.ph-select4{ background: url(../image/Select4.jpg) center/cover no-repeat; }
+
 /* ============================================================
    SCROLL REVEAL
    ============================================================ */