update index

css/style.css

@@ -1,5 +1,9 @@
 @charset "UTF-8";
-.container {
+body {
+  overflow-x: hidden;
+}
+
+.main-container {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -10,37 +14,108 @@
   font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
 }
 
-.container img {
+.main-container img {
   image-rendering: -webkit-optimize-contrast;
 }
 
-.container nav {
+.main-container .title {
+  margin: 0;
+  color: #0076a5;
+  font-size: 35px;
+  margin-bottom: 20px;
+  font-weight: bold;
+}
+
+@media (max-width: 991px) {
+  .main-container .title {
+    text-align: center;
+  }
+}
+
+@media (max-width: 576px) {
+  .main-container .title {
+    font-size: 30px;
+  }
+}
+
+.main-container nav {
+  padding: 10px 50px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-pack: distribute;
       justify-content: space-around;
+  -webkit-box-shadow: 0px 0px 6px #969696;
+          box-shadow: 0px 0px 6px #969696;
+}
+
+@media (max-width: 767px) {
+  .main-container nav {
+    padding: 10px 0px;
+  }
+}
+
+.main-container nav .logo-box {
+  width: 425px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+@media (max-width: 767px) {
+  .main-container nav .logo-box {
+    width: 100%;
+    max-width: 350px;
+  }
 }
 
-.container nav .logo-box img:last-child {
-  width: 35%;
+.main-container nav .logo-box img:first-child {
+  width: 44%;
+}
+
+.main-container nav .logo-box img:last-child {
+  width: 50%;
   margin-left: 10px;
 }
 
-.container nav ul {
+.main-container nav ul {
   margin: 0;
   padding: 0;
+  width: 60%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   list-style: none;
 }
 
-.container nav ul li {
-  margin: 20px;
+.main-container nav ul li {
+  margin: 1%;
 }
 
-.container header {
+.main-container nav ul li a {
+  text-decoration: none;
+  color: black !important;
+  font-weight: bold;
+}
+
+.main-container nav ul li a:hover {
+  opacity: 0.7;
+}
+
+.main-container .nav-link {
+  cursor: pointer;
+}
+
+.main-container header {
   margin: 30px 0;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -53,7 +128,7 @@
 }
 
 @media (max-width: 767px) {
-  .container header {
+  .main-container header {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
@@ -61,7 +136,17 @@
   }
 }
 
-.container .logo {
+.main-container header img:first-child {
+  width: 30%;
+}
+
+@media (max-width: 767px) {
+  .main-container header img:first-child {
+    width: 50%;
+  }
+}
+
+.main-container .logo {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -73,16 +158,37 @@
           justify-content: end;
 }
 
-.container .logo img:first-child {
+@media (max-width: 767px) {
+  .main-container .logo {
+    margin: 0 10px;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+  }
+}
+
+.main-container .logo img:first-child {
   width: 30%;
   margin-right: 20px;
 }
 
-.container .logo img:last-child {
+@media (max-width: 767px) {
+  .main-container .logo img:first-child {
+    width: 45%;
+  }
+}
+
+.main-container .logo img:last-child {
   width: 40%;
 }
 
-.container .banner {
+@media (max-width: 767px) {
+  .main-container .logo img:last-child {
+    width: 55%;
+  }
+}
+
+.main-container .banner {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -96,20 +202,21 @@
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
+  margin-top: 60px;
 }
 
-.container .banner img {
+.main-container .banner img {
   width: 60%;
   height: auto;
 }
 
 @media (max-width: 991px) {
-  .container .banner img {
+  .main-container .banner img {
     width: 90%;
   }
 }
 
-.container .banner section {
+.main-container .banner section {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -119,14 +226,16 @@
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+  margin: 50px 0;
 }
 
-.container .banner section img {
-  width: 50px;
+.main-container .banner section img {
+  width: 75px;
   height: 100%;
+  margin-top: -50px;
 }
 
-.container .banner section p {
+.main-container .banner section p {
   margin-left: 15px;
   color: #0076a5;
   font-size: 45px;
@@ -134,84 +243,280 @@
 }
 
 @media (max-width: 767px) {
-  .container .banner section p {
+  .main-container .banner section p {
     font-size: 30px;
   }
 }
 
-.container .directions {
-  margin: 0 10%;
+.main-container .metaverse {
+  margin: auto;
+  width: 1080px;
+  max-width: 100%;
+}
+
+@media (max-width: 991px) {
+  .main-container .metaverse {
+    padding: 0 5%;
+  }
+}
+
+.main-container .metaverse:hover .bg-img {
+  background-color: rgba(0, 0, 0, 0.6);
+  background-blend-mode: multiply;
+}
+
+.main-container .metaverse:hover .bg-img a {
+  opacity: 1;
+}
+
+.main-container .metaverse .bg-img {
+  position: relative;
+  -webkit-transition: all 0.5s;
+  transition: all 0.5s;
+  background-image: url("/img/圖層 2.png");
+  height: 496px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  cursor: pointer;
+}
+
+.main-container .metaverse .bg-img a {
+  position: absolute;
+  bottom: 50%;
+  right: 50%;
+  -webkit-transform: translate(50%, 50%);
+          transform: translate(50%, 50%);
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  background-color: #ff0101;
+  padding: 15px 50px;
+  color: #fff;
+  letter-spacing: 2px;
+  font-weight: bold;
+  border-radius: 50px;
+  opacity: 0;
+  text-decoration: none;
+}
+
+.main-container .metaverse .bg-img a:hover {
+  background-color: #c80000;
+}
+
+@media (max-width: 475px) {
+  .main-container .metaverse .bg-img a {
+    padding: 10px 30px;
+  }
+}
+
+.main-container .directions {
+  margin: 100px auto 0px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   max-width: 900px;
   font-weight: bold;
 }
 
+@media (max-width: 991px) {
+  .main-container .directions {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+}
+
 @media (max-width: 767px) {
-  .container .directions {
-    margin: 0 5%;
+  .main-container .directions {
+    margin: 100px 5% 0px;
   }
 }
 
-.container .directions p {
-  margin: 0;
-  color: #0076a5;
+.main-container .directions img {
+  width: 50%;
+  margin-left: -100px;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
-.container .directions ul {
+@media (max-width: 991px) {
+  .main-container .directions img {
+    width: 65%;
+    margin-left: 0px;
+  }
+}
+
+.main-container .directions div {
+  width: 70%;
+  margin-left: 35px;
+}
+
+@media (max-width: 991px) {
+  .main-container .directions div {
+    width: 90%;
+    margin: 0px 20px;
+  }
+}
+
+.main-container .directions div ul {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-.container .directions ul li {
+.main-container .directions div ul li {
   line-height: 1.5;
   letter-spacing: 1px;
 }
 
-.container .directions .keyboard {
+.main-container .directions div ul li:last-child {
+  margin-top: 20px;
+}
+
+.main-container .directions div ul li a {
+  color: #000;
+}
+
+.main-container .time-form {
+  margin: auto;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  margin-top: 100px;
 }
 
-.container .directions .keyboard img {
-  width: 13%;
-  height: 100%;
-  margin-right: 10px;
-  margin-top: -10px;
+.main-container .time-form img {
+  width: 80%;
+  margin-top: 25px;
 }
 
-.container .content {
-  padding: 0 10%;
+@media (max-width: 991px) {
+  .main-container .time-form img {
+    width: 95%;
+  }
 }
 
-@media (max-width: 767px) {
-  .container .content {
+.main-container .video-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin: 150px 10% 50px;
+}
+
+@media (max-width: 991px) {
+  .main-container .video-content {
     padding: 0 5%;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    margin: 150px 0 50px;
   }
 }
 
-.container .content img {
+.main-container .video-content img {
+  width: 70%;
+  height: 300px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: left;
+     object-position: left;
+}
+
+.main-container .video-content .img-box {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   width: 50%;
-  height: auto;
+  height: 26.15vw;
+  overflow: hidden;
+  background-image: url("/img/Group 34.png");
+  background-position: 10px 60px;
+  background-repeat: no-repeat;
+  background-size: cover;
 }
 
 @media (max-width: 991px) {
-  .container .content img {
+  .main-container .video-content .img-box {
+    height: 100%;
+    background-image: none;
+  }
+}
+
+.main-container .video-content .video-box {
+  position: relative;
+  width: 70%;
+  height: 0;
+  padding-bottom: 33%;
+}
+
+@media (max-width: 991px) {
+  .main-container .video-content .video-box {
     width: 100%;
+    padding-bottom: 50%;
   }
 }
 
-.container .content .video {
+.main-container .video-content .video-box iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
-  height: 540px;
-  margin-top: 35px;
-  background-color: #000;
+  height: 100%;
+}
+
+.main-container .content {
+  padding: 0 10%;
+}
+
+@media (max-width: 991px) {
+  .main-container .content {
+    padding: 0 5%;
+  }
+}
+
+.main-container .content img {
+  width: 50%;
+  height: auto;
+}
+
+@media (max-width: 991px) {
+  .main-container .content img {
+    width: 100%;
+  }
 }
 
-.container .content .box {
+.main-container .content .box {
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -219,17 +524,20 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  margin: 20px 0;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  margin-bottom: 50px;
 }
 
 @media (max-width: 991px) {
-  .container .content .box {
+  .main-container .content .box {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
   }
-  .container .content .box:nth-child(even) {
+  .main-container .content .box:nth-child(even) {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -237,28 +545,290 @@
   }
 }
 
-.container .content .box p {
-  width: 50%;
+.main-container .content .box div {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   margin: 0 50px;
+}
+
+.main-container .content .box div:nth-child(even) {
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+}
+
+.main-container .content .box div:nth-child(odd) {
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+}
+
+.main-container .content .box div:nth-child(odd) p {
+  text-align: end;
+}
+
+@media (max-width: 991px) {
+  .main-container .content .box div {
+    width: 100%;
+    margin-bottom: 40px;
+    text-align: center;
+  }
+  .main-container .content .box div:nth-child(even) {
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+  .main-container .content .box div:nth-child(odd) {
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+  .main-container .content .box div:nth-child(odd) p {
+    text-align: center;
+  }
+}
+
+.main-container .content .box h4 {
+  font-size: 35px;
+  font-weight: bold;
+  color: #ff0101;
+  margin-bottom: 30px;
+  letter-spacing: 2px;
+}
+
+@media (max-width: 991px) {
+  .main-container .content .box h4 {
+    margin-bottom: 0px;
+  }
+}
+
+.main-container .content .box p {
+  width: 100%;
   font-weight: bold;
   letter-spacing: 1px;
   line-height: 1.5;
 }
 
 @media (max-width: 991px) {
-  .container .content .box p {
+  .main-container .content .box p {
     width: 100%;
     margin: 20px 0;
   }
 }
 
-.container footer {
-  margin: auto;
-  margin-top: 30px;
+.main-container .content .box .video-box {
+  position: relative;
+  width: 53%;
+  height: 0;
+  padding-bottom: 30%;
+}
+
+@media (max-width: 991px) {
+  .main-container .content .box .video-box {
+    width: 100%;
+    padding-bottom: 56%;
+  }
 }
 
-.container footer img {
+.main-container .content .box .video-box iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
-  margin-bottom: -15px;
+  height: 100%;
+}
+
+.main-container .faq-content {
+  padding: 0 10%;
+  letter-spacing: 1px;
+  margin: 100px 0;
+}
+
+@media (max-width: 991px) {
+  .main-container .faq-content {
+    padding: 0 5%;
+  }
+}
+
+.main-container .faq-content h3,
+.main-container .faq-content p {
+  font-size: 22px;
+  font-weight: bold;
+  letter-spacing: 1px;
+}
+
+@media (max-width: 576px) {
+  .main-container .faq-content h3,
+  .main-container .faq-content p {
+    font-size: 17px;
+  }
+}
+
+.main-container .faq-content .accordion-button {
+  display: block;
+  border-radius: 50px;
+}
+
+.main-container .faq-content .accordion-button:focus {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.main-container .faq-content .accordion-button,
+.main-container .faq-content .accordion-button:not(.collapsed) {
+  color: #fff;
+  background-color: #ff0000;
+}
+
+.main-container .faq-content .accordion-item {
+  border: none;
+}
+
+.main-container .faq-content .accordion-item:last-of-type .accordion-button.collapsed {
+  border-radius: 50px;
+}
+
+.main-container .faq-content .accordion-body ul {
+  list-style: none;
+}
+
+.main-container .faq-content .accordion-body ul li {
+  margin: 20px 0;
+}
+
+.main-container .faq-content .accordion-body ul li span {
+  font-weight: bold;
+}
+
+.main-container .faq-content .accordion-body ul li a {
+  color: #6d6d6d;
+  font-weight: bold;
+}
+
+.main-container .faq-content .accordion-body ul li a:hover {
+  opacity: 0.6;
+}
+
+.main-container #container-5 {
+  margin-bottom: 130px;
+}
+
+.main-container footer {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+  position: relative;
+  padding: 50px 0;
+}
+
+@media (max-width: 991px) {
+  .main-container footer {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+}
+
+.main-container footer .bg-img {
+  background-image: url("/img/875.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: absolute;
+  width: 100vw;
+  height: 165%;
+  bottom: 0px;
+  left: 0;
+  right: 0;
+  z-index: -1;
+}
+
+@media (max-width: 991px) {
+  .main-container footer .bg-img {
+    height: 140%;
+    background-position: top;
+  }
+}
+
+.main-container footer .logo-img {
+  margin: auto 0;
+}
+
+@media (max-width: 991px) {
+  .main-container footer .logo-img {
+    margin-bottom: 35px;
+  }
+}
+
+.main-container footer .logo-img img {
+  width: 70%;
+  margin-left: 20%;
+}
+
+@media (max-width: 991px) {
+  .main-container footer .logo-img img {
+    width: 60%;
+  }
+}
+
+.main-container footer .list {
+  width: 100%;
+  max-width: 220px;
+  border-left: 1px solid #707070;
+}
+
+@media (max-width: 991px) {
+  .main-container footer .list {
+    border-left: none;
+  }
+}
+
+.main-container footer .list ul {
+  list-style: none;
+  padding-left: 30%;
+}
+
+@media (max-width: 991px) {
+  .main-container footer .list ul {
+    margin: 0;
+    padding-left: 25%;
+  }
+}
+
+.main-container footer .list ul li {
+  margin-bottom: 10px;
+}
+
+.main-container footer .list ul li a {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.main-container footer .list ul li a:hover {
+  opacity: 0.6;
+}
+
+.main-container footer .text {
+  margin: auto 40px 0px 0px;
+  font-size: 35px;
+  font-weight: bold;
+  color: #0076a5;
+}
+
+@media (max-width: 991px) {
+  .main-container footer .text {
+    margin: 30px 0 0;
+  }
 }
 /*# sourceMappingURL=style.css.map */

css/style.scss

@@ -1,27 +1,74 @@
-.container {
+body {
+  overflow-x: hidden;
+}
+.main-container {
   display: flex;
   flex-direction: column;
   font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
   img {
     image-rendering: -webkit-optimize-contrast;
   }
+  .title {
+    margin: 0;
+    color: #0076a5;
+    font-size: 35px;
+    margin-bottom: 20px;
+    font-weight: bold;
+    @media (max-width: 991px) {
+      text-align: center;
+    }
+    @media (max-width: 576px) {
+      font-size: 30px;
+    }
+  }
   nav {
+    padding: 10px 50px;
     display: flex;
     justify-content: space-around;
-    .logo-box img:last-child {
-      width: 35%;
-      margin-left: 10px;
+    box-shadow: 0px 0px 6px #969696;
+    @media (max-width: 767px) {
+      padding: 10px 0px;
+    }
+    .logo-box {
+      width: 425px;
+      display: flex;
+      align-items: center;
+      @media (max-width: 767px) {
+        width: 100%;
+        max-width: 350px;
+      }
+      img:first-child {
+        width: 44%;
+      }
+      img:last-child {
+        width: 50%;
+        margin-left: 10px;
+      }
     }
     ul {
       margin: 0;
       padding: 0;
+      width: 60%;
       display: flex;
+      align-items: center;
+      justify-content: center;
       list-style: none;
       li {
-        margin: 20px;
+        margin: 1%;
+        a {
+          text-decoration: none;
+          color: black !important;
+          font-weight: bold;
+          &:hover {
+            opacity: 0.7;
+          }
+        }
       }
     }
   }
+  .nav-link {
+    cursor: pointer;
+  }
   header {
     margin: 30px 0;
     display: flex;
@@ -30,17 +77,34 @@
     @media (max-width: 767px) {
       flex-direction: column;
     }
+    img:first-child {
+      width: 30%;
+      @media (max-width: 767px) {
+        width: 50%;
+      }
+    }
   }
+
   .logo {
     display: flex;
     align-items: center;
     justify-content: end;
+    @media (max-width: 767px) {
+      margin: 0 10px;
+      justify-content: center;
+    }
     img:first-child {
       width: 30%;
       margin-right: 20px;
+      @media (max-width: 767px) {
+        width: 45%;
+      }
     }
     img:last-child {
       width: 40%;
+      @media (max-width: 767px) {
+        width: 55%;
+      }
     }
     // a {
     //   text-decoration: none;
@@ -67,6 +131,7 @@
     align-items: center;
     justify-content: center;
     flex-direction: column;
+    margin-top: 60px;
     img {
       width: 60%;
       height: auto;
@@ -78,9 +143,11 @@
       display: flex;
       align-items: center;
       justify-content: center;
+      margin: 50px 0;
       img {
-        width: 50px;
+        width: 75px;
         height: 100%;
+        margin-top: -50px;
       }
       p {
         margin-left: 15px;
@@ -93,40 +160,168 @@
       }
     }
   }
+  .metaverse {
+    margin: auto;
+    width: 1080px;
+    max-width: 100%;
+    @media (max-width: 991px) {
+      padding: 0 5%;
+    }
+    &:hover {
+      .bg-img {
+        background-color: rgba(0, 0, 0, 0.6);
+        background-blend-mode: multiply;
+        a {
+          opacity: 1;
+        }
+      }
+    }
+    .bg-img {
+      position: relative;
+      transition: all 0.5s;
+      background-image: url("/img/圖層 2.png");
+      height: 496px;
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+      cursor: pointer;
+      a {
+        position: absolute;
+        bottom: 50%;
+        right: 50%;
+        transform: translate(50%, 50%);
+        transition: all 0.3s;
+        background-color: #ff0101;
+        padding: 15px 50px;
+        color: #fff;
+        letter-spacing: 2px;
+        font-weight: bold;
+        border-radius: 50px;
+        opacity: 0;
+        text-decoration: none;
+        &:hover {
+          background-color: #c80000;
+        }
+        @media (max-width: 475px) {
+          padding: 10px 30px;
+        }
+      }
+    }
+  }
   .directions {
-    margin: 0 10%;
+    margin: 100px auto 0px;
+    display: flex;
     max-width: 900px;
     font-weight: bold;
+    @media (max-width: 991px) {
+      flex-direction: column;
+      align-items: center;
+    }
     @media (max-width: 767px) {
-      margin: 0 5%;
+      margin: 100px 5% 0px;
     }
-    p {
-      margin: 0;
-      color: #0076a5;
+    img {
+      width: 50%;
+      margin-left: -100px;
+      object-fit: cover;
+      @media (max-width: 991px) {
+        width: 65%;
+        margin-left: 0px;
+      }
     }
-    ul {
-      margin: 0;
-      padding: 0;
-      list-style: none;
-      li {
-        line-height: 1.5;
-        letter-spacing: 1px;
+    div {
+      width: 70%;
+      margin-left: 35px;
+      @media (max-width: 991px) {
+        width: 90%;
+        margin: 0px 20px;
+      }
+      ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        li {
+          line-height: 1.5;
+          letter-spacing: 1px;
+          &:last-child {
+            margin-top: 20px;
+          }
+          a {
+            color: #000;
+          }
+        }
+      }
+    }
+  }
+  .time-form {
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 100px;
+    img {
+      width: 80%;
+      margin-top: 25px;
+      @media (max-width: 991px) {
+        width: 95%;
       }
     }
-    .keyboard {
+  }
+  .video-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 150px 10% 50px;
+    @media (max-width: 991px) {
+      padding: 0 5%;
+      flex-direction: column;
+      margin: 150px 0 50px;
+    }
+    img {
+      width: 70%;
+      height: 300px;
+      object-fit: cover;
+      object-position: left;
+    }
+    .img-box {
       display: flex;
+      flex-direction: column;
+      justify-content: center;
       align-items: center;
-      img {
-        width: 13%;
+      width: 50%;
+      height: 26.15vw;
+      overflow: hidden;
+      background-image: url("/img/Group 34.png");
+      background-position: 10px 60px;
+      background-repeat: no-repeat;
+      background-size: cover;
+      @media (max-width: 991px) {
+        height: 100%;
+        background-image: none;
+      }
+    }
+    .video-box {
+      position: relative;
+      width: 70%;
+      height: 0;
+      padding-bottom: 33%;
+      @media (max-width: 991px) {
+        width: 100%;
+        padding-bottom: 50%;
+      }
+      iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
         height: 100%;
-        margin-right: 10px;
-        margin-top: -10px;
       }
     }
   }
   .content {
     padding: 0 10%;
-    @media (max-width: 767px) {
+    @media (max-width: 991px) {
       padding: 0 5%;
     }
     img {
@@ -136,26 +331,58 @@
         width: 100%;
       }
     }
-    .video {
-      width: 100%;
-      height: 540px;
-      margin-top: 35px;
-      background-color: #000;
-    }
     .box {
       width: 100%;
       display: flex;
       align-items: center;
-      margin: 20px 0;
+      justify-content: space-between;
+      margin-bottom: 50px;
       @media (max-width: 991px) {
         flex-direction: column;
         &:nth-child(even) {
           flex-direction: column-reverse;
         }
       }
-      p {
-        width: 50%;
+      div {
+        display: flex;
+        flex-direction: column;
         margin: 0 50px;
+        &:nth-child(even) {
+          align-items: flex-start;
+        }
+        &:nth-child(odd) {
+          align-items: flex-end;
+          p {
+            text-align: end;
+          }
+        }
+        @media (max-width: 991px) {
+          width: 100%;
+          margin-bottom: 40px;
+          text-align: center;
+          &:nth-child(even) {
+            align-items: center;
+          }
+          &:nth-child(odd) {
+            align-items: center;
+            p {
+              text-align: center;
+            }
+          }
+        }
+      }
+      h4 {
+        font-size: 35px;
+        font-weight: bold;
+        color: #ff0101;
+        margin-bottom: 30px;
+        letter-spacing: 2px;
+        @media (max-width: 991px) {
+          margin-bottom: 0px;
+        }
+      }
+      p {
+        width: 100%;
         font-weight: bold;
         letter-spacing: 1px;
         line-height: 1.5;
@@ -164,50 +391,154 @@
           margin: 20px 0;
         }
       }
+      .video-box {
+        position: relative;
+        width: 53%;
+        height: 0;
+        padding-bottom: 30%;
+        @media (max-width: 991px) {
+          width: 100%;
+          padding-bottom: 56%;
+        }
+        iframe {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+  .faq-content {
+    padding: 0 10%;
+    letter-spacing: 1px;
+    margin: 100px 0;
+    @media (max-width: 991px) {
+      padding: 0 5%;
+    }
+    h3,
+    p {
+      font-size: 22px;
+      font-weight: bold;
+      letter-spacing: 1px;
+      @media (max-width: 576px) {
+        font-size: 17px;
+      }
+    }
+    .accordion-button {
+      display: block;
+      border-radius: 50px;
+      &:focus {
+        box-shadow: none;
+      }
+    }
+    .accordion-button,
+    .accordion-button:not(.collapsed) {
+      color: #fff;
+      background-color: #ff0000;
+    }
+    .accordion-item {
+      border: none;
+    }
+    .accordion-item:last-of-type .accordion-button.collapsed {
+      border-radius: 50px;
+    }
+    .accordion-body {
+      ul {
+        list-style: none;
+        li {
+          margin: 20px 0;
+          span {
+            font-weight: bold;
+          }
+          a {
+            color: #6d6d6d;
+            font-weight: bold;
+            &:hover {
+              opacity: 0.6;
+            }
+          }
+        }
+      }
     }
   }
+  #container-5 {
+    margin-bottom: 130px;
+  }
   footer {
-    margin: auto;
-    margin-top: 30px;
-    img {
+    display: flex;
+    justify-content: space-around;
+    position: relative;
+    padding: 50px 0;
+    @media (max-width: 991px) {
+      flex-direction: column;
+      align-items: center;
+    }
+    .bg-img {
+      background-image: url("/img/875.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+      position: absolute;
+      width: 100vw;
+      height: 165%;
+      bottom: 0px;
+      left: 0;
+      right: 0;
+      z-index: -1;
+      @media (max-width: 991px) {
+        height: 140%;
+        background-position: top;
+      }
+    }
+    .logo-img {
+      margin: auto 0;
+      @media (max-width: 991px) {
+        margin-bottom: 35px;
+      }
+      img {
+        width: 70%;
+        margin-left: 20%;
+        @media (max-width: 991px) {
+          width: 60%;
+        }
+      }
+    }
+    .list {
       width: 100%;
-      margin-bottom: -15px;
+      max-width: 220px;
+      border-left: 1px solid #707070;
+      @media (max-width: 991px) {
+        border-left: none;
+      }
+      ul {
+        list-style: none;
+        padding-left: 30%;
+        @media (max-width: 991px) {
+          margin: 0;
+          padding-left: 25%;
+        }
+        li {
+          margin-bottom: 10px;
+          a {
+            color: #000;
+            text-decoration: none;
+            cursor: pointer;
+            &:hover {
+              opacity: 0.6;
+            }
+          }
+        }
+      }
+    }
+    .text {
+      margin: auto 40px 0px 0px;
+      font-size: 35px;
+      font-weight: bold;
+      color: #0076a5;
+      @media (max-width: 991px) {
+        margin: 30px 0 0;
+      }
     }
-    // h2 {
-    //   font-size: 70px;
-    //   color: #fff100;
-    //   text-shadow: 0px 0px 2px #000;
-    //   @media (max-width: 991px) {
-    //     margin: 0;
-    //   }
-    // }
-    // .logo {
-    //   margin: 0 15px;
-    //   @media (max-width: 991px) {
-    //     margin: 15px 0;
-    //   }
-    //   a h2 {
-    //     font-size: 40px;
-    //   }
-    // }
-    // .text-box {
-    //   display: flex;
-    //   align-items: center;
-    //   @media (max-width: 991px) {
-    //     flex-direction: column;
-    //   }
-    //   p {
-    //     margin: 0;
-    //   }
-    //   p:first-child {
-    //     color: #4553a3;
-    //     font-weight: bold;
-    //     font-size: 20px;
-    //   }
-    //   p:last-child {
-    //     font-weight: bold;
-    //     letter-spacing: 1px;
-    //   }
-    // }
   }
 }

index.html

@@ -5,48 +5,55 @@
   <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="container">
-    <!-- <nav>
-      <div class="logo-box">
-        <img src="/img/logo.png" alt="">
-        <img src="/img/資產 1.png" alt="">
+  <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>
-      <ul>
-        <li>
-          <a href="">元宇宙線上觀展</a>
-        </li>
-        <li>
-          <a href="">導覽影片</a>
-        </li>
-        <li>
-          <a href="">各區介紹</a>
-        </li>
-        <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>
-    </nav> -->
-
-    <header>
-      <img src="/img/基隆城市品牌 Logo-02.png" alt="">
-      <section class="logo">
-        <img src="/img/資產 2.png" alt="">
-        <img src="/img/資產 1.png" alt="">
-        <!-- <a href="">
-          <h2>元宇宙<span>線上觀展</span></h2>
-          <p>https://chuzmo.com/HxXfN9r</p>
-        </a> -->
-      </section>
-    </header>
+    </nav>
 
     <div class="banner">
       <img src="/img/0413_基隆城市博覽會_主視覺_CMYK_橫式.png" alt="">
@@ -56,103 +63,247 @@
       </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">
-      <p>【元宇宙觀展操作說明】</p>
-      <ul>
-        <li>1. 點擊上方Banner即可進入元宇宙展間，24小時皆可進入展間。</li>
-        <li>2. 建議使用手機網路瀏覽器及4G網路，在使用上較為順暢；電腦請利用Chrome瀏覽器開啟。</li>
-        <li>3. 進入連結後請依序按「Join Room」、「Accept」、「Enter Room」，以進入元宇宙展間。</li>
-        <li>4. 同時線上人流以100人為限，若畫面無法正常顯示，請檢查網路後再行嘗試。
-        </li>
-        <li class="keyboard">
-          <img src="/img/keyboard-button.png" alt="">
-          5. 操作以方法為WASD控制前進後退，滑鼠可以控制視角方向<br>
-          如果是使用手機的朋友，以兩根手指放大縮小即可移動，動動手指滑螢幕可調整您的視角。<br>
-          在畫面的下方，Voice可以將麥克風靜音，以方便您的聲音不會被麥克風收音到，<br>
-          曝光您的聲音；Chat可以打字與其他人聊天
-        </li>
-      </ul>
+      <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="content">
-      <div class="video">
+    <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">
-        <img src="/img/A.jpg" alt="">
-        <p>A展區主要配置為導覽影片為主，<br>
-          本區主要以右方西二倉庫及舊火車站、海上導覽宣傳為主，<br>
-          置入山海鳴光、海境、人間系列裝置藝術素材照片以及<br>
-          起點城市、山海洄游光雕秀之展示影片
-        </p>
+      <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">
-        <p>B展區從正濱舊漁會大樓、和平島及地方飲食特展照片展。<br>
-          觀看B展區導覽影片，與其後方即有在正濱漁港彩色屋的<br>
-          海派浪漫光雕秀模擬影片觀看，展現正濱漁港夜晚之美<br>
-          以此展現基隆港區的地方特色與夜晚的燈光秀等活動。
-        </p>
-        <img src="/img/B.jpg" alt="">
+        <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">
-        <img src="/img/C.jpg" alt="">
-        <p>C展區策展場域以海科館為主題，「以聽見海洋多元的聲音」為主題<br>
-          可以將會場的不同樂曲置入在C展區的場域內，搭配C區導覽影片，<br>
-          輔以市集、風光語海音樂會及開放式漁村學堂之照片及說明，<br>
-          由iOCEAN與海之聲展示影片，讓觀展人更可以了解到<br>
-          該展覽活動的主旨，<br>
-          在觀覽該區域的時候可以感受基隆從漁村轉型到現在的各個階段。
-        </p>
+        <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">
-        <p>K副展區包含發灣歷史文化園區與基隆要塞司令部，<br>
-          本次城市博覽會將在要塞司令部內進行<br>
-          沉浸式多媒體互動展、大型藝術裝置陳設會場照片作為主題
-        </p>
-        <img src="/img/K.jpg" alt="">
+        <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 class="directions">
-      <p>【問題排除】</p>
-      <ul>
-        <li>1. 元宇宙影片無法正常撥放時，請檢查網路後重新登入，讓瀏覽器能夠正確連接元宇宙伺服器。</li>
-        <li>2. 若AI導覽員講話時斷斷續續，請檢查是否有開其他軟體or程式，避免連線效能不彰導致連線不穩。</li>
-      </ul>
+    <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>
-      <img src="/img/footer.png" alt="">
-      <!-- <div class="text-box">
-        <h2>城市博覽會</h2>
-        <section class="logo">
-          <a href="">
-            <h2>元宇宙<span>線上觀展</span></h2>
-            <p>https://chuzmo.com/HxXfN9r</p>
-          </a>
-        </section>
-        <section>
-          <p>隨時逛隨時看，無限精彩</p>
-          <p>
-            線上觀展時間：06.10-06-23 <br>
-            每日導覽時間：11:00、14:00，每場約 20 分鐘
-          </p>
-        </section>
-      </div> -->
+      <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>

temporary.html

@@ -10,7 +10,7 @@
 </head>
 
 <body>
-  <div class="container">
+  <div class="main-container">
     <header>
       <img src="/img/logo.png" alt="">
       <section class="logo">