.elementor-kit-7{--e-global-color-857231d:#FFFFFF;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.e-con{--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* 全域基礎設定 */
    body {
      background-color: #ffffff; /* 加深一點背景色，讓網頁更突出 */
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      font-family: Arial, sans-serif;
    }

    /* 地圖主要容器：以地圖本身的 2:1 寬高比鎖定 */
    .map-container {
      position: relative;
      width: 1024px;
      height: 512px;
      /* ⚠️ 請確保下方這段網址是你在手機或電腦上存好的地圖圖片檔名 ⚠️ */
      background-color: #ffffff;
      cursor: pointer;
      overflow: auto;
      border-radius:8px; 
      z-index:1;
    }
    .map-container::before {
      content:'';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image:url('https://demo07.newmatch19.com/wp-content/uploads/2026/07/S__325894146-scaled.jpg.');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      z-index:2;    
      filter:saturate(1.4) contrast(1.3)brightness(1.1);       
     }
    .map-container::after {
      content:'';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: repeating-linear-gradient(135deg,#52b7e8 0%, #299ed8 40%, #0077c8 100%);
      mix-blend-mode: screen;
      z-index:3 ;
      pointer-events: none;
     }
    /* SVG 航線畫布：鋪滿整個地圖容器 */
    .routes-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    /* 台灣出發的航線：紅色虛線 */
    .route-line {
      stroke: #ff0000;
      stroke-width: 2px;
      stroke-dasharray: 4 4;
      fill: none;
      pointer-events: none;
      z-index:3;
    }
  
    /* --- 紅點與國家文字基礎樣式 --- */
   .dot {
      position: absolute;
      width: 8px;
      height: 8px;
      background-color: #ff0000;
      border-radius: 50%;
      box-shadow:0 0 4px rgba(255,0,0,0.5);
      transform: translate(-50%, -50%); /* 對齊圓心 */
      z-index:999;
    }

    .label {
      position: absolute;
      color: #010003;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      white-space: nowrap;
      user-select: none;
      /* 加強文字陰影，確保在深藍色陸地上也清晰可見 */
      text-shadow:
       1px 1px 2px #fff,
       -1px -1px 2px #fff,
       1px -1px 2px #fff,
       -1px 1px 2px #fff,2px 2px 4px rgba(0,0,0,0.9);
       transform: translate(-50%, 100%);
       z-index:999;
    }

    /* --- 國家精確座標定位 (%) [已適配全新深藍地圖] --- */
    .taiwan-island {
      position: absolute;
      left:80.8%;
      top: 51.8%;
      width: 12px;
      height: 18px;
      background-color: #d90429; /* 整個台灣塗紅 */
      border-radius: 35%;
      transform: translate(-50%, -50%) rotate(25deg);
      z-index:999;
    }
    .taiwan-dot { left: 80.8%; top: 51.8%; }
    .taiwan-label { left: 83.8%; top: 51.8%; }

    .europe-dot { left: 52.0%; top: 35.0%; }
    
    .nz-dot { left: 94.6%; top: 84.5%; }
    .nz-label { left: 94.6%; top: 84.5%; }
    
    .sa-dot { left: 55.0%; top: 80.5%; }
    .sa-label { left: 55.0%; top: 79%; }
    
    .au-dot { left: 85.0%; top: 76.5%; }
    .au-label { left: 85.0%; top: 75.2%;  }
    
    .ny-dot { left: 35%; top: 34.0%; }
    .ny-label { left: 35%; top: 34.0%;  }
    
    .la-dot { left: 20%; top: 47.0%; }
    .la-label { left: 20%; top: 47.0%;  }
    
    .arg-dot { left: 35.5%; top: 82.0%; }
    .arg-label { left: 36.5%; top: 82.0%; }

    .chi-dot { left: 31.5%; top: 81.5%; }
    .chi-label { left: 30.5%; top: 81.5%; }

    /* --- 南歐內陸特定的白色文字方塊 --- */
    .europe-inner-box {
      position: absolute;
      left: 53%;
      top: 55.0%;
      transform: translate(-50%, -50%);
      color: #1e293b;
      font-size: 13px;
      font-weight: bold;
      text-align: center;
      line-height: 1.3;
      padding:4px 8px;
      background-color:rgba(240, 248, 248,0.25);
      border-radius:4px;
      backdrop-filter:blur(2px);
      pointer-events: none;
      white-space: nowrap;
      user-select:none;
      z-index:1000;
    }
    .europe-inner-box .title {
      font-size: 14px;
      letter-spacing: 1px;
      text-transform:uppercase;
      color: #1e293b;
      border-bottom:2px solid rgba(255,255,255,0.3);
      padding-bottom: 1px;
      margin-bottom: 1px;
      z-index:1000;
    }

    /* 🌟 時髦飛機外觀與長榮航空配色（修正大括號 Bug） 🌟 */
    .plane {
      width: 24px;  /* 縮小尺寸，讓機身更流線、完全擺脫臃腫蟲感 */
      height: 24px;
      position: absolute;
      top: 0;
      left: 0;
      transform-origin: center;
      animation-play-state: running;
      user-select: none;
      z-index:1000;
    /* 🌟 改為細緻的白色外發光：在深藍色背景上像流星一樣耀眼 🌟 */
      filter: drop-shadow(0px 1px 3px rgba(0, 166, 80, 0.95))
      drop-shadow(0px 0px 1px rgba(0, 135, 56, 0.5));
    }
        
    /* 🌟 飛機主體：改為長榮集團經典深綠色（#036b52） 🌟 */
    .plane svg {
      fill: #ffffff; 
      width: 100%;
      height: 100%;
      transform: rotate(90deg);     
      z-index:1000;                     
    }

    /* 當滑鼠移入地圖容器（或手機手指點擊）時，全面啟動飛機動畫 */
    .map-container:hover .plane,
    .map-container:active .plane {
      animation-play-state: running;
    }

    /* --- 飛機與對應的 SVG 路徑綁定（適配 1024x512 新比例坐標） --- */
    .plane-tw-eu  { offset-path: path('M 830 265 Q 730 110 532 179');offset-rotate:auto; animation:perfect-fly-loop 7s infinite ease-in-out; }
    .plane-tw-nz  { offset-path: path('M 830 265 Q 920 320 968 432');offset-rotate:auto; animation:perfect-fly-loop 7s infinite ease-in-out; }
    .plane-tw-sa  { offset-path: path('M 830 265 Q 760 380 563 413');offset-rotate:auto; animation:perfect-fly-loop 7s infinite ease-in-out; }
    .plane-tw-au  { offset-path: path('M 830 265 Q 890 320 870 391');offset-rotate:auto; animation:perfect-fly-loop 7s infinite ease-in-out; }    
    .plane-eu-ny  { offset-path: path('M 532 179 Q 450 80 358 174');offset-rotate:auto; animation:perfect-fly-loop 7s infinite ease-in-out; }
    .plane-eu-la  { offset-path: path('M 532 179 Q 390 60 205 241');offset-rotate:auto; animation:perfect-fly-loop 7s infinite ease-in-out; }
    .plane-eu-arg { offset-path: path('M 532 179 Q 470 280 360 418');offset-rotate:auto; animation:perfect-fly-loop 7s infinite ease-in-out; }
    .plane-eu-chi { offset-path: path('M 532 179 Q 410 280 323 417');offset-rotate:auto; animation:perfect-fly-loop 7s infinite ease-in-out; }

    /* 終極折返動畫：完美防禦倒退嚕 */
     @keyframes perfect-fly-loop {
      0% {
        offset-distance: 0%;
        transform: scaleX(1); /* 正常朝前 */
      }
      49.99% {
        offset-distance: 100%;
        transform: scaleX(1); /* 抵達目的地前，保持朝前 */
      }
      /* 抵達目的地瞬間，水平鏡像翻轉 (X軸)，機頭轉向朝後 */
      50% {
        offset-distance: 100%; 
        transform: scaleX(-1); 
      }
      99.99% {
        offset-distance: 0%; 
        transform: scaleX(-1); /* 保持機頭朝著回程方向飛回 */
      }
      100% {
        offset-distance: 0%;
        transform: scaleX(1); /* 回到起點，機頭轉回正常方向 */
      }
    }

  <div class="map-container">
    
    <!-- SVG 向量航線圖層 -->
    
      <!-- 台灣出發航線（紅色） -->
       <!-- 到歐洲 -->
       <!-- 到紐西蘭 -->
       <!-- 到南非 -->
       <!-- 到澳洲 -->
        <!-- 到紐約 -->
        <!-- 到洛杉磯 -->
       <!-- 到阿根廷 -->
       <!-- 到智利 -->
    

    <div class="plane plane-tw-eu">
      
    </div>
    <div class="plane plane-tw-nz">
      
    </div>
    <div class="plane plane-tw-sa">
      
    </div>
    <div class="plane plane-tw-au">
      
    </div>
    <div class="plane plane-eu-ny">
      
    </div>
    <div class="plane plane-eu-la">
      
    </div>
    <div class="plane plane-eu-arg">
      
    </div>
    <div class="plane plane-eu-chi">
      
    </div>

    <!-- 國家圓點 -->
    <div class="dot taiwan-dot"></div>
    <div class="dot europe-dot"></div>
    <div class="dot nz-dot"></div>
    <div class="dot sa-dot"></div>
    <div class="dot ny-dot"></div>
    <div class="dot la-dot"></div>
    <div class="dot arg-dot"></div>
    <div class="dot chi-dot"></div>
    <div class="dot au-dot"></div>

    <!-- 國家英文名稱（加強陰影防吃色） -->
    <div class="label taiwan-label">Taiwan</div>
    <div class="label nz-label">New Zealand</div>
    <div class="label sa-label">South Africa</div>
    <div class="label ny-label">New York</div>
    <div class="label la-label">Los Angeles</div>
    <div class="label arg-label">Argentina</div>
    <div class="label chi-label">Chile</div>
    <div class="label au-label">Australia</div>

    <!-- 歐洲內陸文字方塊 -->
    <div class="europe-inner-box">
      <div class="title">Europe</div>
      <div>France &nbsp; Italy &nbsp; Spain</div>
      <div>Belgium &nbsp; Netherlands</div>
    </div>
</div>/* End custom CSS */