syuanyuri
/
KEELUNG_CITY_LP


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <link rel="stylesheet" href="/css/style.css">
  <title>基隆城市博覽會</title>
</head>

<body>

  <div class="main-container">
    <nav class="navbar navbar-expand-xl navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <div class="logo-box">
            <img src="/img/logo.png" alt="">
            <img src="/img/資產 1.png" alt="">
          </div>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
          <ul class="navbar-nav mb-2 mb-lg-0 justify-content-end w-100">
            <li class="nav-item">
              <a class="nav-link" aria-current="page" data-gt-target="#container-1" data-gt-duration="100"
                data-gt-offset="30">元宇宙線上觀展</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-gt-target="#container-2" data-gt-duration="100" data-gt-offset="50">導覽時刻表</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-gt-target="#container-3" data-gt-duration="100" data-gt-offset="80">導覽影片</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-gt-target="#container-4" data-gt-duration="100" data-gt-offset="50">各區介紹</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-gt-target="#container-5" data-gt-duration="100" data-gt-offset="-50">FAQ</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://2022cityexpo.tw/tw/index" target="_blank">2022 城市博覽會</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://test-event.welcometw.com/event/keelung" target="_blank">海派浪漫套票購買</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="banner">
      <img src="/img/0413_基隆城市博覽會_主視覺_CMYK_橫式.png" alt="">
      <section>
        <img src="/img/lighthouse.png" alt="">
        <p>隨時逛隨時看，無限精彩</p>
      </section>
    </div>

    <div class="metaverse" id="container-1">
      <div class="bg-img">
        <a href="https://chuzmo.com/HxXfN9r" target="_blank">進入元宇宙</a>
      </div>
      <!-- <img src="/img/圖層 2.png" alt=""> -->
    </div>

    <div class="directions">
      <img src="/img/22740453.png" alt="">
      <div>
        <p class="title">【元宇宙觀展操作說明】</p>
        <ul>
          <li>1. 元宇宙展間 24 小時皆可進入。</li>
          <li>2. 建議使用手機 4G 以上網路及瀏覽器 30mbps 網路在使用上較為順暢；電腦請利用 Chrome 瀏覽器開啟。</li>
          <li>3. 進入連結後請依序按「Join Room」、「Accept」、「Enter Room」，以進入元宇宙展間。</li>
          <li>4. 元宇宙展間若畫面無法正常顯示，請檢查網路後再行嘗試。</li>
          <li>5. 操作以方法為 WASD 控制前進後退，滑鼠可以控制視角方向<br>
            如果是使用手機的朋友，以兩根手指放大縮小即可移動，動動手指滑螢幕可調整您的視角。<br>
            在畫面的下方，Voice 可以將麥克風靜音或開啟；Chat 可以打字與其他人聊天。</li>
          <li>*如有其他疑問，可轉至 <a style="text-decoration: underline; cursor: pointer;" data-gt-target="#container-5"
              data-gt-duration="100" data-gt-offset="20">FAQ</a> 或是頁面上右下角的 Chatbot 提問。</li>
        </ul>
      </div>
    </div>

    <div class="time-form" id="container-2">
      <h3 class="title">【導覽時刻表】</h3>
      <img src="/img/導覽時刻表.png" alt="">
    </div>

    <div class="video-content" id="container-3">
      <div class="img-box">
        <h3 class="title mb-lg-auto mb-5 mx-auto">【導覽影片】</h3>
      </div>
      <div class="video-box">
        <iframe src="https://www.youtube.com/embed/6HjwVnuOf-Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>

    <div class="content">
      <div class="box">
        <img src="/img/RWD-001.jpg" alt="">
        <img src="/img/RWD-002.jpg" alt="">
      </div>

      <div class="box" id="container-4">
        <section class="video-box">
          <iframe src="https://www.youtube.com/embed/7io6AGDXs7I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </section>
        <!-- <img src="/img/A.jpg" alt=""> -->
        <div>
          <h4>【A國門展區】</h4>
          <p>A 展區主要配置為導覽影片為主，<br>
            本區主要以右方西二倉庫及舊火車站、海上導覽宣傳為主，<br>
            置入山海鳴光、海境、人間系列裝置藝術素材照片以及<br>
            起點城市、山海洄游光雕秀之展示影片
          </p>
        </div>
      </div>

      <div class="box">
        <div>
          <h4>【B正濱展區】</h4>
          <p>B 展區從正濱舊漁會大樓、和平島及地方飲食特展照片展。<br>
            觀看 B 展區導覽影片，與其後方即有在正濱漁港彩色屋的<br>
            海派浪漫光雕秀模擬影片觀看，展現正濱漁港夜晚之美<br>
            以此展現基隆港區的地方特色與夜晚的燈光秀等活動。
          </p>
        </div>
        <section class="video-box">
          <iframe src="https://www.youtube.com/embed/l74F9QYyJew" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </section>
      </div>

      <div class="box">
        <section class="video-box">
          <iframe src="https://www.youtube.com/embed/5OtNOGvrHsI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </section>
        <div>
          <h4>【C海科展區】</h4>
          <p>C 展區策展場域以海科館為主題，「以聽見海洋多元的聲音」為主題<br>
            可以將會場的不同樂曲置入在 C 展區的場域內，搭配C區導覽影片，<br>
            輔以市集、風光語海音樂會及開放式漁村學堂之照片及說明，<br>
            由 iOCEAN 與海之聲展示影片，讓觀展人更可以了解到該展覽活動的主旨，<br>
            在觀覽該區域的時候可以感受基隆從漁村轉型到現在的各個階段。
          </p>
        </div>
      </div>

      <div class="box">
        <div>
          <h4>【K沙灣展區】</h4>
          <p>K 副展區包含發灣歷史文化園區與基隆要塞司令部，<br>
            本次城市博覽會將在要塞司令部內進行<br>
            沉浸式多媒體互動展、大型藝術裝置陳設會場照片作為主題
          </p>
        </div>
        <section class="video-box">
          <iframe src="https://www.youtube.com/embed/N1KAqV0OcYc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </section>
      </div>
    </div>

    <div id="container-5">
      <div class="accordion faq-content" id="accordionExample">
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
              aria-expanded="true" aria-controls="collapseOne">
              <div class="d-flex justify-content-between px-sm-5 align-items-center flex-md-row flex-column">

                <h3 class="mb-0">常見問題 FAQ</h3>

                <div class="d-flex align-items-center">
                  <p class="mb-0 me-3">（點選展開</p>
                  <svg xmlns="http://www.w3.org/2000/svg" width="130" height="3" viewBox="0 0 229 3">
                    <line id="Line_3" data-name="Line 3" x2="200" transform="translate(0 1.5)" fill="none" stroke="#fff"
                      stroke-width="2"></line>
                  </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="32" viewBox="0 0 39.471 45.275">
                    <path id="Polygon_5" data-name="Polygon 5" d="M22.638,0,45.275,39.471H0Z"
                      transform="translate(39.471) rotate(90)" fill="#fff" />
                  </svg>
                </div>
              </div>
            </button>
          </h2>
          <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
            data-bs-parent="#accordionExample">
            <div class="accordion-body">
              <ul>
                <li>
                  <span>Q1：城市博覽會元宇宙線上觀展展出日期及時間？</span><br>
                  A：2022年6月10日（五）至6月23日（日）共計 14 天期間內，24 小時皆開放進入參觀。
                </li>
                <li>
                  <span>Q2：元宇宙線上展覽共有幾個展區？</span><br>
                  A：城市博覽會分為 A、B、C 三個主展區及 K 副等四個展區，分別是 A 國門展區、B 正濱展區、C 海科展區及 K 沙灣展區。<br>
                <img src="/img/平面圖.png" alt="">
                </li>
                <li>
                  <span>Q3：如果登入元宇宙發現看見畫面不完整，如：畫面破圖、圖片顯示不出來，該怎麼做？</span><br>
                  A：請再次重新登錄進入元宇宙以獲得完整體驗。
                </li>
                <li>
                  <span>Q4：在元宇宙中聽到導覽人員聲音斷斷續續，無法聽得清楚，請問如何改善？</span><br>
                  A：請檢查當下網速是否達到手機 4G 以上及瀏覽器 30mbps 網路，如檢查沒問題，則再重新登入即可；若未達條件，請移至符合網速條件下，重新登入。
                </li>
                <li>
                  <span>Q5：在元宇宙展間影片無法正常播放，或是原本正常播放但突然間卡卡的，請問該如何處理及改善呢？</span><br>
                  A：請先檢查連線效能及設備，再重新登入元宇宙。
                </li>
                <li>
                  <span>Q6：在元宇宙展間內，發現牆面掛圖上顯示 Broken Media 字樣，請問該如何解決？</span><br>
                  A：請先檢查連線速度與設備後，重新登入元宇宙。
                </li>
                <li>
                  <span>Q7：請問在元宇宙中無法使用滑鼠操控虛擬人調整視角，該怎麼辦呢？</span><br>
                  A：可以請觀展者再次登入元宇宙，執行操作；若仍然無法移轉視角，則使用鍵盤 Q、E 二鍵來控制左右旋轉視角。
                </li>
                <li>
                  <span>Q8：導覽中提到城博會活動相關套票，請問要如何購買呢？</span><br>
                  A：歡迎點選此連結 <a href="https://test-event.welcometw.com/event/keelung" target="_blank">「海派浪漫｜基隆GO
                    SHOPPING活動平台」</a>購買套票喔！
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <footer>
      <div class="bg-img"></div>
      <div class="logo-img">
        <img src="/img/321.png" alt="">
      </div>
      <div class="list">
        <ul>
          <li>
            <a aria-current="page" data-gt-target="#container-1" data-gt-duration="100" data-gt-offset="30">元宇宙線上觀展</a>
          </li>
          <li>
            <a data-gt-target="#container-2" data-gt-duration="100" data-gt-offset="50">導覽時刻表</a>
          </li>
          <li>
            <a data-gt-target="#container-3" data-gt-duration="100" data-gt-offset="80">導覽影片</a>
          </li>
          <li>
            <a data-gt-target="#container-4" data-gt-duration="100" data-gt-offset="50">各區介紹</a>
          </li>
          <li>
            <a data-gt-target="#container-5" data-gt-duration="100" data-gt-offset="-50">FAQ</a>
          </li>
        </ul>
      </div>
      <div  class="list">
        <ul>
          <li>
            <a href="https://2022cityexpo.tw/tw/index" target="_blank">2022 城市博覽會</a>
          </li>
          <li>
            <a href="https://test-event.welcometw.com/event/keelung" target="_blank">海派浪漫套票購買</a>
          </li>
        </ul>
      </div>
      <div class="text">隨時逛隨時看，無限精彩</div>
    </footer>
  </div>


  <!-- Start of HubSpot Embed Code -->
  <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/22107416.js"></script>
  <!-- End of HubSpot Embed Code -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
    crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
    crossorigin="anonymous"></script>
  <script>
    // 點擊後移至指定位置
    $("*").each(function (index, element) {
      $(this).click(function (e) {
        let target = $(this).attr("data-gt-target");
        let duration = $(this).attr("data-gt-duration");
        let offset = $(this).attr("data-gt-offset");

        if (target) {
          let top = $(target).offset().top;
          $("html").stop().animate({
            scrollTop: top - offset
          }, parseInt(duration));
        }
      });
    });
    // 避免動畫與使用者滾輪衝突
    // html 在滾動滾輪時 停止 html 所有效果
    $("html").on("mousewheel", function () {
      $("html").stop();
    });
  </script>
</body>

</html>