<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="big5">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Welcome to Fu Yi Cheng Technology</title>

  <style>
    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: #fff;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 12px; /* 對應原本 font size=2 */
      line-height: 1.6;
      color: #000;
    }

    .page {
      width: 750px;
      margin: 0 auto;
    }

    .banner img {
      display: block;
      width: 100%;
      height: auto;
      border: 0;
    }

    .nav {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      justify-items: center;
      padding: 6px 0;
    }

    .nav a {
      line-height: 0;
    }

    .nav img {
      display: block;
      width: 186px;
      height: 25px;
      border: 0;
    }

    /* ===== 下拉選單樣式 ===== */

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-menu {
      display: none;
      position: absolute;
      top: 30px;
      left: 0;
      width: 186px;
      background: #ffffff;
      border: 1px solid #ccc;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      z-index: 999;
      text-align: center;
    }

    .dropdown-menu.show {
      display: block;
    }

    .dropdown-menu a {
      display: block;
      padding: 8px 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 14px;
      color: #000;
      text-decoration: none;
      border-bottom: 1px solid #eee;
    }

    .dropdown-menu a:hover {
      background-color: #f5f5f5;
    }

    .dropdown-menu a:last-child {
      border-bottom: none;
    }


    main {
      padding: 12px 0 0;
    }

    .item {
      margin: 8px 0;
    }

    .blue { color: #0000ff; }
    .red  { color: #ff0000; }

    /* Footer */
    .footer {
      padding: 6px 0 10px;
    }

    .footer a {
      font-family: Georgia, "Times New Roman", serif;
      color: #0000ff;
      text-decoration: underline;
      font-weight: bold;
    }

    @media (max-width: 780px) {
      .page {
        width: 100%;
        padding: 0 12px;
      }
      .nav {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 8px;
      }
    }
  </style>
</head>

<body>
  <div class="page">

    <header class="banner">
      <img src="https://vitek.ca/2026/Banner-F(logoOff).jpg" width="750" height="80" alt="">
    </header>

    <nav class="nav">
      <a href="https://vitek.ca/2026/Company_CH_html5.html">
        <img src="https://www.vitek.ca/images/CompanyButton-F.jpg" width="186" height="25">
      </a>

     <!-- ▼ 這裡是修改後的 Product 下拉選單 ▼ -->
      <div class="dropdown" id="productDropdownWrapper">
        <a href="javascript:void(0);" id="productButton">
          <img src="https://www.vitek.ca/images/ProductButton-F.jpg" width="186" height="25">
        </a>

        <div class="dropdown-menu" id="productDropdown">
          <a href="https://vitek.ca/2026/SI_CH_html5.html">系統整合</a>
          <a href="https://vitek.ca/2026/GIS_CH_html5.html">氣輔設備</a>
        </div>
      </div>
      <!-- ▲ 修改結束 ▲ -->

      <a href="https://vitek.ca/2026/Solution_CH_html5.html">
        <img src="https://www.vitek.ca/images/SolutionButton-F.jpg" width="186" height="25">
      </a>
      <a href="https://vitek.ca/2026/ContactUs_CH_html5.html">
        <img src="https://www.vitek.ca/images/ContactUsButton-F.jpg" width="186" height="25">
      </a>
    </nav>

    <main>
      <div class="item">▪ 業務諮詢 : <span class="blue">sales@vitek.ca</span></div>

      <div class="item">▪ 台灣工廠與物流單位</div>

      <div class="item">
        地址:中華民國台灣, 桃園市, 龍潭區, 九座寮, 九龍村, 4鄰, 15號
      </div>

      <div class="item">▪ 商務諮詢專線</div>

      <div class="item">
        TEL : <span class="red">886-3-4708919</span> (09 AM ~ 18 PM)
      </div>

      <div class="item">
        FAX : <span class="red">886-940476647</span>
      </div>

      <div class="item">
        Mob : <span class="red">886-922828179</span> (黃先生)
      </div>
    </main>

    <footer class="footer">
      <p>
        <b><u>
          <a href="https://vitek.ca">回首頁</a>
        </u></b>
      </p>
    </footer>

  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function() {

      const button = document.getElementById("productButton");
      const menu = document.getElementById("productDropdown");
      const wrapper = document.getElementById("productDropdownWrapper");
  
      if (button && menu && wrapper) {
  
        button.addEventListener("click", function(event) {
          event.stopPropagation();
          menu.classList.toggle("show");
        });
  
        document.addEventListener("click", function(event) {
          if (!wrapper.contains(event.target)) {
            menu.classList.remove("show");
          }
        });

      }

    });
  </script>

</body>
</html>