<!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: "標楷體", DFKai-SB, serif;
      font-size: 16px; /* 對應原本 font size=4 */
      line-height: 1.5;
      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, 186px);
      justify-content: center;   /* 讓整排置中 */
      padding: 6px 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;
    }

    .layout {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 10px;
      padding: 10px 0 0;
      align-items: start;
    }

    .title {
      color: #ff0000;
      font-weight: bold;
      margin: 8px 0 10px;
    }

    .text p {
      margin: 0 0 6px;
    }

    .email {
      color: #0000ff;
      text-decoration: none;
    }
    .email:hover {
      text-decoration: underline;
    }

    .image {
      text-align: center;
    }
    .image img {
      border: 0;
      width: 300px;
      height: 300px;
      display: inline-block;
    }

    .footer {
      padding: 10px 0 18px;
    }
    .footer a {
      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;
      }
      .layout {
        grid-template-columns: 1fr;
      }
      .image img {
        width: 300px;
        height: 300px;
        max-width: 100%;
      }
    }
  </style>
</head>

<body>
  <div class="page">

    <header class="banner">
      <img src="https://vitek.ca/2026/Banner-G(logoOff).jpg"
           alt="We let your dream come true"
           width="750"
           height="80">
    </header>

    <nav class="nav">
      <a href="https://vitek.ca/2026/Company_html5.html">
        <img src="https://www.vitek.ca/images/CompanyButton.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.jpg" width="186" height="25">
        </a>

        <div class="dropdown-menu" id="productDropdown">
          <a href="https://vitek.ca/2026/SI_html5.html">System Integration</a>
          <a href="https://vitek.ca/2026/GIS_html5.html">Gas Injection System</a>
        </div>
      </div>
      <!-- ▲ 修改結束 ▲ -->

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

    <main class="layout">
      <section class="text">
        <div class="title">▪OEM/ODM Business:</div>

        <p>
            It means we manufacture your own name and branding, or customize products to your own name and offer your own warranty and support.
        </p>

        <p>If you have any OEM/ODM requirement, please let us know details, and send an email to <a class="email" href="mailto:sales@vitek.ca">sales@vitek.ca</a>. Thanks.
        </p>

      </section>

      <aside class="image">
        <img src="https://www.vitek.ca/images/Solution.jpg" width="300" height="300">
      </aside>
    </main>

    <footer class="footer">
      <p>
        <b><u>
          <a href="https://vitek.ca">Home</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>