第一版

about.json

@@ -109,39 +109,39 @@
             {
                 "img": "https://cloud.hhh.com.tw/upload/_hcase_img/name_12928_20210111154511.jpg",
                 "text": "環保建材×高收納 打造三代同堂健康機能宅",
-                "workSrc":"https://hhh.com.tw/cases/detail/13477/",
-                "video":"",
+                "workSrc":"https://hhh.com.tw/modules/gs/case.php?hcase_id=12928",
+                "video":"https://img.youtube.com/vi/0EnktLsgAxY/hqdefault.jpg",
                 "videotext":"",
-                "videoSrc":""
+                "videoSrc":"https://hhh.com.tw/video-post.php?id=4077"
             },
             {
                 "img": "https://cloud.hhh.com.tw/upload/_hcase_img/name_12812_20201123190253.jpg",
                 "text": "灰階×原木調和自然質地 描繪恬靜居宅生活感",
-                "workSrc":"https://hhh.com.tw/cases/detail/13477/",
-                "video":"",
+                "workSrc":"https://hhh.com.tw/modules/gs/case.php?hcase_id=12812",
+                "video":"https://img.youtube.com/vi/TOxGjyJhPkk/hqdefault.jpg",
                 "videotext":"",
-                "videoSrc":""
+                "videoSrc":"https://hhh.com.tw/video-post.php?id=3658"
             },
             {
                 "img": "https://images.hhh.com.tw/uploads/_hcase/name_12503_20200708105040.jpg",
                 "text": "溫馨北歐新婚宅 譜寫下一站幸福",
-                "workSrc":"https://hhh.com.tw/cases/detail/13477/",
-                "video":"",
+                "workSrc":"https://hhh.com.tw/modules/gs/case.php?hcase_id=12503",
+                "video":"https://img.youtube.com/vi/mTx2YhkKRGI/hqdefault.jpg",
                 "videotext":"",
-                "videoSrc":""
+                "videoSrc":"https://hhh.com.tw/video-post.php?id=3612"
             },
             {
                 "img": "https://images.hhh.com.tw/uploads/_hcase/name_12372_20200514104801.jpg",
                 "text": "融入企業語彙 傳達品牌意念的空間設計",
-                "workSrc":"https://hhh.com.tw/cases/detail/13477/",
-                "video":"",
+                "workSrc":"https://hhh.com.tw/modules/gs/case.php?hcase_id=12372",
+                "video":"https://img.youtube.com/vi/JlNc9TLnyEk/hqdefault.jpg",
                 "videotext":"",
-                "videoSrc":""
+                "videoSrc":"https://hhh.com.tw/video-post.php?id=2706"
             },
             {
                 "img": "https://images.hhh.com.tw/uploads/_hcase/name_12273_20200409175055.jpg",
                 "text": "清新北歐設計 打造質感生活日常",
-                "workSrc":"https://hhh.com.tw/cases/detail/13477/",
+                "workSrc":"https://hhh.com.tw/modules/gs/case.php?hcase_id=12273",
                 "video":"",
                 "videotext":"",
                 "videoSrc":""
@@ -149,7 +149,7 @@
             {
                 "img": "https://images.hhh.com.tw/uploads/_hcase/name_11986_20200108111702.jpg",
                 "text": "療癒系簡約宅 編織不喧嘩的輕盈生活",
-                "workSrc":"https://hhh.com.tw/cases/detail/13477/",
+                "workSrc":"https://hhh.com.tw/modules/gs/case.php?hcase_id=11986",
                 "video":"",
                 "videotext":"",
                 "videoSrc":""
@@ -185,27 +185,51 @@
         "workimg": [
             {
                 "img": "https://images.hhh.com.tw/uploads/_hcase/name_11825_20191112155840.jpg",
-                "text": "豪宅推手 打造企業主會所"
+                "text": "豪宅推手 打造企業主會所",
+                "workSrc":"https://hhh.com.tw/modules/gs/case.php?hcase_id=11986",
+                "video":"",
+                "videotext":"",
+                "videoSrc":""
             },
             {
                 "img": "https://images.hhh.com.tw/uploads/_hcase/name_12621_20200827175117.jpg",
-                "text": "總統套房在我家 品味現代奢華風"
+                "text": "總統套房在我家 品味現代奢華風",
+                "workSrc":"https://hhh.com.tw/modules/gs/case.php?hcase_id=11986",
+                "video":"",
+                "videotext":"",
+                "videoSrc":""
             },
             {
                 "img": "https://images.hhh.com.tw/uploads/_hcase/name_12745_20201026182956.jpg",
-                "text": "格局微調整型 坐擁透天景觀別墅"
+                "text": "格局微調整型 坐擁透天景觀別墅",
+                "workSrc":"https://hhh.com.tw/modules/gs/case.php?hcase_id=11986",
+                "video":"",
+                "videotext":"",
+                "videoSrc":""
             },
             {
                 "img": "https://images.hhh.com.tw/uploads/_hcase/name_12548_20200729183527.jpg",
-                "text": "簡約中的不簡單 玩格局展現豪宅指標"
+                "text": "簡約中的不簡單 玩格局展現豪宅指標",
+                "workSrc":"https://hhh.com.tw/modules/gs/case.php?hcase_id=11986",
+                "video":"",
+                "videotext":"",
+                "videoSrc":""
             },
             {
                 "img": "https://images.hhh.com.tw/uploads/_hcase/name_12504_20200709095249.jpg",
-                "text": "奢華叢林系 時尚白金的古典優雅"
+                "text": "奢華叢林系 時尚白金的古典優雅",
+                "workSrc":"https://hhh.com.tw/modules/gs/case.php?hcase_id=11986",
+                "video":"",
+                "videotext":"",
+                "videoSrc":""
             },
             {
                 "img": "https://images.hhh.com.tw/uploads/_hcase/designer104_110_02.jpg",
-                "text": "人文之家－木石間的淳和與清麗對比"
+                "text": "人文之家－木石間的淳和與清麗對比",
+                "workSrc":"https://hhh.com.tw/modules/gs/case.php?hcase_id=11986",
+                "video":"",
+                "videotext":"",
+                "videoSrc":""
             }
         ]
     },

about/about.css

@@ -9,10 +9,7 @@
 
 body {
   position: relative;
-  background: url(../img/about/banner/banner.webp), -webkit-gradient(linear, left top, left bottom, color-stop(10%, transparent), color-stop(49%, #363636));
-  background: url(../img/about/banner/banner.webp), linear-gradient(180deg, transparent 10%, #363636 49%);
-  background-size: 120vw;
-  background-repeat: no-repeat;
+  background: #363636;
 }
 
 @media screen and (max-width: 767px) {
@@ -24,11 +21,20 @@ body {
 body .arrow {
   position: fixed;
   right: 30px;
-  bottom: 30px;
+  bottom: 150px;
   width: 45px;
   height: 40px;
   z-index: 10;
-  background-color: #e06649;
+}
+
+body .arrow a {
+  margin: 30px 0px;
+}
+
+@media screen and (max-width: 767px) {
+  body .arrow .icon {
+    display: none;
+  }
 }
 
 body .arrow:hover {
@@ -39,7 +45,7 @@ body .arrow:hover {
 @media screen and (max-width: 767px) {
   body .arrow {
     position: absolute;
-    bottom: 80px;
+    bottom: 200px;
   }
 }
 
@@ -47,6 +53,7 @@ body .arrow:hover {
   background: rgba(112, 112, 112, 0.5);
   height: 4.5vw;
   width: 100vw !important;
+  position: fixed;
   z-index: 10;
 }
 
@@ -193,15 +200,38 @@ body .arrow:hover {
      object-fit: cover;
 }
 
+#banner {
+  position: relative;
+}
+
+#banner #bannerdes-img {
+  position: absolute;
+  z-index: -1;
+  opacity: 0.5;
+}
+
+#banner #bannerdes-img .banner-img {
+  width: 100vw;
+  height: 70vh;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #bannerdes-img .banner-img {
+    height: 80vh;
+  }
+}
+
 @media screen and (max-width: 767px) {
   #banner {
-    background-image: url(../img/about/banner/banner-m2.png);
     background-size: 110vw;
     background-repeat: no-repeat;
   }
 }
 
 #banner #banner-container {
+  padding-top: 10vw;
   width: 90vw;
 }
 
@@ -223,10 +253,6 @@ body .arrow:hover {
   }
 }
 
-#banner #banner-container .banner-m {
-  padding-top: 50vw;
-}
-
 @media screen and (min-width: 1025px) {
   #banner #banner-container .banner-m {
     display: none;
@@ -318,7 +344,7 @@ body .arrow:hover {
 #banner #banner-container .tab-content .contact {
   padding-bottom: 10vw;
   padding: 24px;
-  font-size: 12px;
+  font-size: 14px;
   background-size: contain;
   background-repeat: no-repeat;
   background-blend-mode: overlay;
@@ -345,9 +371,8 @@ body .arrow:hover {
   cursor: pointer;
 }
 
-#banner #banner-container .tab-content .sec02 .col-lg-4 .sec02-p-m, #banner #banner-container .tab-content .sec02 .col-lg-4 .sec03-p-m,
-#banner #banner-container .tab-content .sec04 .col-lg-4 .sec02-p-m,
-#banner #banner-container .tab-content .sec04 .col-lg-4 .sec03-p-m {
+#banner #banner-container .tab-content .sec02 .col-lg-4 .sec02-p-m,
+#banner #banner-container .tab-content .sec04 .col-lg-4 .sec02-p-m {
   color: #fff;
   text-align: center;
   font-size: 14px;
@@ -358,77 +383,210 @@ body .arrow:hover {
 }
 
 @media screen and (min-width: 1025px) {
-  #banner #banner-container .tab-content .sec02 .col-lg-4 .sec02-p-m, #banner #banner-container .tab-content .sec02 .col-lg-4 .sec03-p-m,
-  #banner #banner-container .tab-content .sec04 .col-lg-4 .sec02-p-m,
-  #banner #banner-container .tab-content .sec04 .col-lg-4 .sec03-p-m {
+  #banner #banner-container .tab-content .sec02 .col-lg-4 .sec02-p-m,
+  #banner #banner-container .tab-content .sec04 .col-lg-4 .sec02-p-m {
+    width: 100%;
     position: absolute;
     top: 100px;
-    left: 20px;
+    left: 0px;
+    font-size: 18px;
+    opacity: 0;
+  }
+}
+
+#banner #banner-container .tab-content .sec02 .col-lg-4:hover .sec02-p-m, #banner #banner-container .tab-content .sec02 .col-lg-4:hover .sec03-p-m,
+#banner #banner-container .tab-content .sec04 .col-lg-4:hover .sec02-p-m,
+#banner #banner-container .tab-content .sec04 .col-lg-4:hover .sec03-p-m {
+  opacity: 1;
+}
+
+#banner #banner-container .tab-content .sec02 .col-lg-4:hover img,
+#banner #banner-container .tab-content .sec04 .col-lg-4:hover img {
+  opacity: 0.2;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .tab-content .sec02 .col-lg-4:hover img,
+  #banner #banner-container .tab-content .sec04 .col-lg-4:hover img {
+    opacity: 1;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .tab-content .sec02 .col-lg-4,
+  #banner #banner-container .tab-content .sec04 .col-lg-4 {
+    background: none;
+  }
+}
+
+#banner #banner-container .tab-content .sec02 .col-lg-4 img,
+#banner #banner-container .tab-content .sec04 .col-lg-4 img {
+  -o-object-fit: cover;
+     object-fit: cover;
+  width: 480px !important;
+  height: 280px !important;
+  opacity: 1;
+  -webkit-transition: 0.3s ease-in-out;
+  transition: 0.3s ease-in-out;
+}
+
+#banner #banner-container .tab-content .sec03 .col-lg-4 {
+  position: relative;
+  background: #80ab29;
+  -webkit-transition: 0.3s ease-in-out;
+  transition: 0.3s ease-in-out;
+  cursor: pointer;
+}
+
+#banner #banner-container .tab-content .sec03 .col-lg-4 .sec03-p-m {
+  color: #fff;
+  text-align: center;
+  font-size: 14px;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+  -webkit-transition: 0.3s ease-in-out;
+  transition: 0.3s ease-in-out;
+}
+
+@media screen and (min-width: 1025px) {
+  #banner #banner-container .tab-content .sec03 .col-lg-4 .sec03-p-m {
+    width: 100%;
+    position: absolute;
+    top: 100px;
+    left: 0px;
     font-size: 16px;
     opacity: 0;
   }
 }
 
 @media screen and (min-width: 1025px) {
-  #banner #banner-container .tab-content .sec02 .col-lg-4 .sec03-p-m,
-  #banner #banner-container .tab-content .sec04 .col-lg-4 .sec03-p-m {
+  #banner #banner-container .tab-content .sec03 .col-lg-4 .sec03-p-m {
     position: absolute;
     top: 50px;
-    left: 10px;
+    left: 0px;
     background-size: contain;
     opacity: 0;
   }
 }
 
-#banner #banner-container .tab-content .sec02 .col-lg-4:hover .sec02-p-m, #banner #banner-container .tab-content .sec02 .col-lg-4:hover .sec03-p-m,
-#banner #banner-container .tab-content .sec04 .col-lg-4:hover .sec02-p-m,
-#banner #banner-container .tab-content .sec04 .col-lg-4:hover .sec03-p-m {
+#banner #banner-container .tab-content .sec03 .col-lg-4:hover .sec02-p-m, #banner #banner-container .tab-content .sec03 .col-lg-4:hover .sec03-p-m {
+  opacity: 1;
+}
+
+#banner #banner-container .tab-content .sec03 .col-lg-4:hover img {
+  opacity: 0.2;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .tab-content .sec03 .col-lg-4:hover img {
+    opacity: 1;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .tab-content .sec03 .col-lg-4 {
+    background: none;
+  }
+}
+
+#banner #banner-container .tab-content .sec03 .col-lg-4 img {
+  -o-object-fit: cover;
+     object-fit: cover;
+  width: 500px !important;
+  height: 250px !important;
+  opacity: 1;
+  -webkit-transition: 0.3s ease-in-out;
+  transition: 0.3s ease-in-out;
+}
+
+#banner #banner-container .tab-content .sec03 .sec03-1 .sec05-row {
+  background: rgba(0, 0, 0, 0.8);
+  text-align: center;
+  height: 600px;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .tab-content .sec03 .sec03-1 .sec05-row {
+    height: 300px;
+  }
+}
+
+#banner #banner-container .tab-content .sec03 .sec03-1 .sec05-row p {
+  letter-spacing: 5px;
+}
+
+#banner #banner-container .tab-content .sec04 .col-lg-4 {
+  position: relative;
+  background: #80ab29;
+  -webkit-transition: 0.3s ease-in-out;
+  transition: 0.3s ease-in-out;
+  cursor: pointer;
+}
+
+#banner #banner-container .tab-content .sec04 .col-lg-4 .sec04-p-m {
+  color: #fff;
+  text-align: center;
+  font-size: 14px;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+  -webkit-transition: 0.3s ease-in-out;
+  transition: 0.3s ease-in-out;
+}
+
+@media screen and (min-width: 1025px) {
+  #banner #banner-container .tab-content .sec04 .col-lg-4 .sec04-p-m {
+    width: 100%;
+    position: absolute;
+    top: 100px;
+    left: 0px;
+    font-size: 18px;
+    opacity: 0;
+  }
+}
+
+#banner #banner-container .tab-content .sec04 .col-lg-4:hover .sec04-p-m {
   opacity: 1;
 }
 
-#banner #banner-container .tab-content .sec02 .col-lg-4:hover img,
 #banner #banner-container .tab-content .sec04 .col-lg-4:hover img {
   opacity: 0.2;
 }
 
 @media screen and (max-width: 767px) {
-  #banner #banner-container .tab-content .sec02 .col-lg-4:hover img,
   #banner #banner-container .tab-content .sec04 .col-lg-4:hover img {
     opacity: 1;
   }
 }
 
 @media screen and (max-width: 767px) {
-  #banner #banner-container .tab-content .sec02 .col-lg-4,
   #banner #banner-container .tab-content .sec04 .col-lg-4 {
     background: none;
   }
 }
 
-#banner #banner-container .tab-content .sec02 .col-lg-4 img,
 #banner #banner-container .tab-content .sec04 .col-lg-4 img {
   -o-object-fit: cover;
      object-fit: cover;
-  width: 432px !important;
+  width: 480px !important;
   height: 280px !important;
   opacity: 1;
   -webkit-transition: 0.3s ease-in-out;
   transition: 0.3s ease-in-out;
 }
 
-#banner #banner-container .tab-content .sec04 {
+#banner #banner-container .tab-content .sec04 .sec04-1 .sec05-row {
   background: rgba(0, 0, 0, 0.8);
   text-align: center;
   height: 600px;
 }
 
 @media screen and (max-width: 767px) {
-  #banner #banner-container .tab-content .sec04 {
+  #banner #banner-container .tab-content .sec04 .sec04-1 .sec05-row {
     height: 300px;
   }
 }
 
-#banner #banner-container .tab-content .sec04 p {
+#banner #banner-container .tab-content .sec04 .sec04-1 .sec05-row p {
   letter-spacing: 5px;
 }
 
@@ -446,6 +604,11 @@ body .arrow:hover {
   }
 }
 
+#footer a {
+  text-decoration: none;
+  color: #fff;
+}
+
 #footer p {
   color: #fff;
 }

about/about.scss

@@ -14,27 +14,36 @@ $bgcolor: #f4fffc;
 $navbgcolor: #a9d0c5;
 body {
     position: relative;
-    background: url(../img/about/banner/banner.webp), linear-gradient(180deg, transparent 10%, #363636 49%);
-    background-size: 120vw;
-    background-repeat: no-repeat;
-
+    // background: url(../img/about/banner/banner.webp), linear-gradient(180deg, transparent 1%, #363636 1%);
+    // background-size: 120vw;
+    // background-repeat: no-repeat;
+    background: #363636;
     @media screen and(max-width:$moblie) {
         background: #363636;
     }
     .arrow {
         position: fixed;
         right: 30px;
-        bottom: 30px;
+        bottom: 150px;
         width: 45px;
         height: 40px;
         z-index: 10;
-        background-color: #e06649;
+        a{
+            margin: 30px 0px;
+        }
+        .icon{
+           
+            @media screen and(max-width:$moblie) {
+                display: none;
+                
+            }
+        }
         &:hover {
             box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
         }
         @media screen and(max-width:$moblie) {
             position: absolute;
-            bottom: 80px;
+            bottom: 200px;
         }
     }
 }
@@ -43,7 +52,7 @@ body {
 
     height: 4.5vw;
     width: 100vw !important;
-    // position: fixed;
+    position: fixed;
     z-index: 10;
     @media screen and(max-width:$table) {
         height: 8vw;
@@ -159,12 +168,28 @@ body {
     //    rwd要注意高度
 }
 #banner {
+    position: relative;
+    #bannerdes-img{
+        position: absolute;
+        z-index:-1;
+        opacity: 0.5;
+        .banner-img{
+            width: 100vw;
+            height: 70vh;
+            object-fit: cover;
+            @media screen and(max-width:$moblie) {
+                height: 80vh;
+            
+            }
+        }
+    }
     @media screen and(max-width:$moblie) {
-        background-image: url(../img/about/banner/banner-m2.png);
+        // background-image: url(../img/about/banner/banner-m2.png);
         background-size: 110vw;
         background-repeat: no-repeat;
     }
     #banner-container {
+        padding-top: 10vw;
         width: 90vw;
         @media screen and(max-width:$moblie) {
             width: 95vw;
@@ -183,7 +208,7 @@ body {
         }
 
         .banner-m {
-            padding-top: 50vw;
+           
             @media screen and(min-width:$desktop) {
                 display: none;
             }
@@ -264,7 +289,7 @@ body {
             .contact {
                 padding-bottom: 10vw;
                 padding: 24px;
-                font-size: 12px;
+                font-size: 14px;
                 background-size: contain;
                 background-repeat: no-repeat;
                 background-blend-mode: overlay;
@@ -279,7 +304,6 @@ body {
             }
             // 個案賞析
             .sec02,
-          
             .sec04 {
                 
                 .col-lg-4 {
@@ -287,16 +311,66 @@ body {
                     background: rgb(128, 171, 41);
                     transition: 0.3s ease-in-out;
                     cursor: pointer;
-                    .sec02-p-m,.sec03-p-m{
+                    .sec02-p-m{
+                        color:#fff;
+                        text-align: center;
+                        font-size: 14px;
+                        transition: 0.3s;
+                        transition: 0.3s ease-in-out;
+                        @media screen and(min-width:$desktop) {
+                            width: 100%;
+                            position: absolute;
+                            top:100px;
+                            left:0px;
+                            font-size: 18px;
+                           opacity: 0;
+                        }
+                    }
+         
+                    &:hover{
+                        .sec02-p-m,.sec03-p-m{
+                            opacity: 1;
+                        }
+                        img{
+                            opacity: 0.2;
+                            @media screen and(max-width:$moblie) {
+                                opacity: 1;
+                            }
+                        }
+                    }
+                    @media screen and(max-width:$moblie) {
+                        background: none;
+                    }
+                   
+                    img {
+                        object-fit: cover;
+                        width: 480px !important;
+                        height: 280px !important;
+                        opacity: 1;
+                        transition: 0.3s ease-in-out;
+                       
+                    }
+                }
+
+            }
+            .sec03{
+                
+                .col-lg-4 {
+                    position: relative;
+                    background: rgb(128, 171, 41);
+                    transition: 0.3s ease-in-out;
+                    cursor: pointer;
+                    .sec03-p-m{
                         color:#fff;
                         text-align: center;
                         font-size: 14px;
                         transition: 0.3s;
                         transition: 0.3s ease-in-out;
                         @media screen and(min-width:$desktop) {
+                            width: 100%;
                             position: absolute;
                             top:100px;
-                            left:20px;
+                            left:0px;
                             font-size: 16px;
                            opacity: 0;
                         }
@@ -306,7 +380,7 @@ body {
                         @media screen and(min-width:$desktop) {
                             position: absolute;
                             top:50px;
-                            left:10px;
+                            left:0px;
                            background-size: contain;
                            opacity: 0;
                         }
@@ -328,24 +402,92 @@ body {
                    
                     img {
                         object-fit: cover;
-                        width: 432px !important;
-                        height: 280px !important;
+                        width: 500px !important;
+                        height: 250px !important;
                         opacity: 1;
                         transition: 0.3s ease-in-out;
                        
                     }
                 }
+                .sec03-1{
+
+                    .sec05-row{
+                        background: rgba(0, 0, 0, 0.8);
+                        text-align: center;
+                        height: 600px;
+                        @media screen and(max-width:$moblie) {
+                            height: 300px;
+                        }
+                        p {
+                            letter-spacing: 5px;
+                        }
+                }
+                }
+
             }
+
             .sec04 {
-                background: rgba(0, 0, 0, 0.8);
-                text-align: center;
-                height: 600px;
-                @media screen and(max-width:$moblie) {
-                    height: 300px;
+                
+                .col-lg-4 {
+                    position: relative;
+                    background: rgb(128, 171, 41);
+                    transition: 0.3s ease-in-out;
+                    cursor: pointer;
+                    .sec04-p-m{
+                        color:#fff;
+                        text-align: center;
+                        font-size: 14px;
+                        transition: 0.3s;
+                        transition: 0.3s ease-in-out;
+                        @media screen and(min-width:$desktop) {
+                            width: 100%;
+                            position: absolute;
+                            top:100px;
+                            left:0px;
+                            font-size: 18px;
+                           opacity: 0;
+                        }
+                    }
+          
+                    &:hover{
+                        .sec04-p-m{
+                            opacity: 1;
+                        }
+                        img{
+                            opacity: 0.2;
+                            @media screen and(max-width:$moblie) {
+                                opacity: 1;
+                            }
+                        }
+                    }
+                    @media screen and(max-width:$moblie) {
+                        background: none;
+                    }
+                   
+                    img {
+                        object-fit: cover;
+                        width: 480px !important;
+                        height: 280px !important;
+                        opacity: 1;
+                        transition: 0.3s ease-in-out;
+                       
+                    }
                 }
-                p {
-                    letter-spacing: 5px;
+                .sec04-1{
+
+                    .sec05-row{
+                        background: rgba(0, 0, 0, 0.8);
+                        text-align: center;
+                        height: 600px;
+                        @media screen and(max-width:$moblie) {
+                            height: 300px;
+                        }
+                        p {
+                            letter-spacing: 5px;
+                        }
                 }
+                }
+                
             }
         }
     }
@@ -361,6 +503,10 @@ body {
         width: 95vw;
         padding-bottom: 30vw;
     }
+    a{
+        text-decoration: none;
+        color:#fff;
+    }
     p {
         color: #fff;
     }

about/goto2.js

@@ -13,7 +13,7 @@ $(document).ready(function () {
     function get_data() {
         $.ajax({
             method: "GET",
-            url: "../about.json",
+            url: "../designer4.json",
             dataType: "json",
 
         })
@@ -24,7 +24,9 @@ $(document).ready(function () {
                         var aboutInt = '';
                         var aboutImg = '';
                         var aboutViedeo = '';
-                        aboutIntPhone='';
+                        var aboutMethod = '';
+                        aboutIntPhone = '';
+                        var bodyBannerDes = '';
                         console.log(msg[i]);
 
                         // var res = msg.length;
@@ -34,7 +36,7 @@ $(document).ready(function () {
                         aboutContent += ' \
                 <div class="row px-0 mx-0">\
                     <div class="condition col-12 col-lg-4 bg-white">\
-                        <h1 class="fs-3">接案條件 condition</h1>\
+                        <h1 class="fs-3"><span style="color:#8DC21F" class="fw-bold fs-2">|</span>接案條件 condition</h1>\
                         <table class="table">\
                             <tbody>\
                                 <tr>\
@@ -78,7 +80,7 @@ $(document).ready(function () {
                     </div >\
                     <div style="background: url(../img/about/sec01/idea.webp);  background-size: cover; background-repeat: no-repeat;"\
                         class="idea col-12 col-lg-4 text-white">\
-                        <h1 class="fs-3">設計理念 idea</h1>\
+                        <h1 class="fs-3"><span style="color:#8DC21F" class="fw-bold fs-2">|</span>設計理念 idea</h1>\
                         <table class="table table-borderless text-white">\
                         <tbody>\
                             <tr>\
@@ -86,35 +88,12 @@ $(document).ready(function () {
                                     '+ msg[i].DesignIdea1 + '\
                                 </td>\
                             </tr>\
-                            <tr>\
-                                <td>\
-                                    '+ msg[i].DesignIdea2 + '\
-                                </td>\
-                            </tr>\
-                            <tr>\
-                                <td>\
-                                    <p class="mb-2">'+ msg[i].DesignIdea3 + '</p>\
-                                    '+ msg[i].DesignIdea4 + '\
-                                </td>\
-                            </tr>\
-                            <tr>\
-                                <td>\
-                                    <p class="mb-2">'+ msg[i].DesignIdea5 + '</p>\
-                                    '+ msg[i].DesignIdea6 + '\
-                                </td>\
-                            </tr>\
-                            <tr>\
-                                <td>\
-                                    <p class="mb-2">'+ msg[i].DesignIdea7 + ' </p>\
-                                    '+ msg[i].DesignIdea8 + '\
-                                </td>\
-                            </tr>\
                         </tbody>\
                     </table>\
                     </div>\
                     <div style="background: url(../img/about/sec01/contact.webp);  background-size: cover;  background-repeat: no-repeat;"\
                         class="contact col-12 col-lg-4 text-white">\
-                        <h1 class="fs-3">聯絡設計師 contact</h1>\
+                        <h1 class="fs-3"><span style="color:#8DC21F" class="fw-bold fs-2">|</span>聯絡設計師 contact</h1>\
                         <table class="table text-white">\
                             <tbody>\
                                 <tr>\
@@ -159,7 +138,7 @@ $(document).ready(function () {
 
                         aboutInt += ' \
                         <div class="banner-des row vertical align-items-end">\
-                            <div class="col-3 pe-0">\
+                            <div class="col-2 pe-0">\
                                 <img class="img-fluid" src="'+ msg[i].Designerimg + '" alt="">\
                             </div>\
                             <div class="banner-0 col-9 text-white">\
@@ -176,6 +155,9 @@ $(document).ready(function () {
                         </div>';
                         aboutIntPhone += ' \
                         <div class="banner-m row vertical align-items-end px-0 mx-0">\
+                        <div class="bannerm-0 col-12 my-5 px-0">\
+                        <img class="img-fluid" src="../img/banner/banner-mobile.png" alt="">\
+                        </div>\
                             <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
                                 <img class="img-fluid" src="'+ msg[i].Designerimg + '" alt="">\
                             </div>\
@@ -184,27 +166,72 @@ $(document).ready(function () {
                                 <p><span class="fs-5">'+ msg[i].DesignerName + '</span>設計師</p>\
                              </div>\
                         </div>';
+
                         console.log(msg[i].workimg.length)
                         for (var j = 0; j < msg[i].workimg.length; j++) {
                             aboutImg += ' \
                             <div class="secimg col-lg-4 mx-0 px-0">\
-                                <img class="img-fluid" src="'+ msg[i].workimg[j].img + '" alt="">\
-                                <p class="sec02-p-m p-1 mt-1 ">'+ msg[i].workimg[j].text + '</p>\
+                            <a target="_blank" href="'+ msg[i].workimg[j].workSrc + '"><img class="img-fluid" src="' + msg[i].workimg[j].img + '" alt=""></a>\
+                                <div class="sec02-p-m p-1 mt-1 text-center">\
+                                <p>'+ msg[i].workimg[j].text + '</p>\
+                                </div>\
                             </div>';
 
-                            aboutViedeo += ' \
-                            <div class="secimg col-lg-4 mx-0 px-0">\
-                            <a target="_blank" href="'+msg[i].workimg[j].videoSrc+'"><img class="img-fluid" src="'+ msg[i].workimg[j].video + '" alt=""></a>\
-                                <p class="sec03-p-m p-1 mt-1 ">'+ msg[i].workimg[j].videotext + '</p>\
+                        }
+                            var j =0;
+                       
+                            if (msg[i].workVideo[j]==undefined) {
+                                aboutViedeo += ' \
+                                <div id="sec05" class="sec05-row row align-items-center h-100 m-auto" style=" background: rgba(0, 0, 0, 0.8);text-align: center;">\
+                                <div style="padding:20vw 0px">\
+                                    <h1 class="align-self-center" style="color:#86B81D;">Stay tuned !</h1>\
+                                    <p class="align-self-center" style="color:#fff;  letter-spacing: 5px;">...敬請期待...</p>\
+                                </div>\
                             </div>';
+                            } else {
+                            for (var j = 0; j < msg[i].workVideo.length; j++) {
+                                aboutViedeo += ' \
+                                <div class="secimg col-lg-4 p-0">\
+                                <a target="_blank" href="'+ msg[i].workVideo[j].videoSrc + '"><img class="img-fluid" src="' + msg[i].workVideo[j].video + '" alt=""></a>\
+                                <div class="sec03-p-m p-1 mt-1 text-center">\
+                                    <p>'+ msg[i].workVideo[j].videotext + '</p>\
+                                    </div>\
+                                </div>';
+                            }
+                        }
+                        var j =0;
+                        if (msg[i].workMethod[j]==undefined) {
+                            aboutMethod += ' \
+                            <div id="sec05" class="sec05-row row align-items-center h-100 m-auto" style=" background: rgba(0, 0, 0, 0.8);text-align: center;">\
+                            <div style="padding:20vw 0px">\
+                                <h1 class="align-self-center" style="color:#86B81D;">Stay tuned !</h1>\
+                                <p class="align-self-center" style="color:#fff;  letter-spacing: 5px;">...敬請期待...</p>\
+                            </div>\
+                        </div>';
+                        } else {
+                            for (var j = 0; j < msg[i].workMethod.length; j++) {
+                                aboutMethod += ' \
+                                <div class="secimg col-lg-4 p-0">\
+                                <a target="_blank" href="'+ msg[i].workMethod[j].Methodsrc + '"><img class="img-fluid" src="' + msg[i].workMethod[j].Methodimg + '" alt=""></a>\
+                                <div class="sec04-p-m p-1 mt-1 text-center">\
+                                    <p>'+ msg[i].workMethod[j].Methodtext + '</p>\
+                                    </div>\
+                                </div>';
+                            }
                         }
 
+                        bodyBannerDes += ' \
+                        <img class="banner-img" id="img_id"  src="'+ msg[i].workimg[0].img + '" alt="">\
+                       ';
 
                         $('.sec03-1').html(aboutViedeo);
                         $('.sec02-1').html(aboutImg);
                         $('.banner-des-about').html(aboutInt);
                         $('.sec01').html(aboutContent);
+                        $('.sec04-1').html(aboutMethod);
                         $('.banner-m').html(aboutIntPhone);
+                        $('#bannerdes-img').html(bodyBannerDes);
+
                     }
                 }
 
@@ -214,8 +241,16 @@ $(document).ready(function () {
     get_data();
 
 
+});
 
+$(".arrow").hide();
+$(window).scroll(function () {
+    var y = window.scrollY;
 
+    if (y > 1) {
+        $(".arrow").show();
+    } else {
+        $(".arrow").hide();
+    }
 
-
-});
+});

about/index.html

@@ -18,7 +18,7 @@
 </head>
 
 <body id="top">
-    <section id="Navigation" class="container-fluid" style="padding:0;margin: 0; ">
+    <section id="Navigation" class="container-fluid" style="padding:0;margin: 0;">
         <div id="nav" class="row">
             <div id="logo" class=" col-md-2 col-lg-3">
                 <a href="https://hhh.com.tw/"> <img src="../img/nav/logo-main-1-1.webp" alt=""></a>
@@ -39,7 +39,11 @@
             </div>
         </div>
     </section>
-    <img class="arrow" data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="../img/gotop.png" alt="">
+    <div class="arrow">
+        <img class="img-fluid"  data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="./img/gotop.png" alt="">
+        <a target="_blank" class="icon" href="https://hhh.com.tw/about/request/"><img  class="img-fluid my-3" src="./img/nav-bottom/find.png" alt=""></a>
+        <a target="_blank" class="icon" href="https://hhh.com.tw/about/calculator/"> <img  class="img-fluid" src="./img/nav-bottom/budget.png" alt=""></a>
+    </div>
     <section id="Navigation2" class="container-fluid" style="padding:0;margin: 0; ">
         <div id="nav" class="nav2">
             <div class="nav-1">
@@ -66,6 +70,9 @@
         </div>
     </section>
     <section id="banner">
+        <div id="bannerdes-img" style="width: 100vw;">
+            <!-- <img class="banner-img" style="width: 100vw;" src="./img/banner/banner-m.png" alt=""> -->
+        </div>
         <div id="banner-container" class="container-fluid px-0">
             <!-- 電腦版 -->
             <div class="banner-des-about row vertical align-items-end">
@@ -258,6 +265,7 @@
                         </div>
                     </div> -->
                 </div>
+               
                 <div class="sec02 tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                     <div class="sec02-1 row px-0 mx-0">
                         <!-- <div class="secimg col-lg-4 mx-0 px-0">
@@ -328,12 +336,15 @@
                 </div>
                 <div class="sec04 tab-pane fade container" id="pills-contact2" role="tabpanel"
                     aria-labelledby="pills-contact2-tab">
-                    <div class="sec04-row row align-items-center h-100">
+                    <div class="sec04-1 row px-0 mx-0">
+
+                    </div>
+                    <!-- <div class="sec04-row row align-items-center h-100">
                         <div>
                             <h1 class="align-self-center" style="color:#86B81D;">Stay tuned !</h1>
                             <p class="align-self-center" style="color:#fff;">...敬請期待...</p>
                         </div>
-                    </div>
+                    </div> -->
 
                 </div>
             </div>
@@ -343,7 +354,7 @@
         <img src="../img/about/banner/return.png" alt="">
     </section>
     <footer id="footer" class="container-fluid px-0 mx-0">
-        <p>幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.</p>
+        <p>幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.<a href=""><span class="px-2">|</span>聯絡我們<span class="px-2">|</span></a><a href=""> 關於本站 <span class="px-2">|</span></a></p>
     </footer>
 
 

goto.js

@@ -57,30 +57,64 @@ console.log(28);
 $(document).ready(function () {
 
   $.ajax({
-      method: "GET",
-      url: "homepageimg.json",
-      dataType: "json",
+    method: "GET",
+    url: "designer4.json",
+    dataType: "json",
   })
 
-      .done(function (msg) {
-          var sec01Content = '';
-          console.log(msg);
-          var res = msg.length;
-          console.log(res);
-          const limit = res;
-          for (var i = 0; i < limit; i++) {
-              var numb = i + 1;
-              sec01Content += ' \
-              <div class="secimg col-4  col-lg-2 mx-0 px-0"> \
-                 <img id="' + numb + '" class="img-fluid" src="'+msg[i].srcimg+'" alt="">\
-              </div>';
-
-          } 
-          // $('.sec01-designer').html(sec01Content);
-          // var test = msg[0].newstext1;
-
-          // $('#jsontest').append(test);
-      });
+    .done(function (msg) {
+      var desBanner = '';
+      var MobBanner = '';
+      var bodyBannerDes = '';
+      console.log(msg);
+      var res = msg.length;
+      console.log(res);
+      const limit = res;
+      var arrIndex = Math.floor(Math.random() * msg.length);
+      console.log(arrIndex);
+      console.log(msg[arrIndex].Designerimg);
+
+      desBanner += ' \
+              <div class="banner-des row vertical align-items-end px-0 mx-0">\
+                <div class="banner-0 col-0 order-1 col-lg-5 order-1 pe-0">\
+                <img class="img-fluid" src="./img/banner/bannertitle.png" alt="">\
+                </div>\
+                <div class="banner-1 col-5 order-3 col-lg-5 order-2 text-white text-end py-3">\
+                    <div class="banner1-1" style="font-weight: 900;">'+ msg[arrIndex].WorkName + '</div>\
+                    <p><span class="fs-5">'+ msg[arrIndex].DesignerName + '</span>設計師</p>\
+                </div>\
+                <div class="banner-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
+                    <img class="img-fluid" src="'+ msg[arrIndex].Designerimg + '" alt="">\
+                </div>\
+            </div>';
+
+      MobBanner += ' \
+              <div class="banner-m row vertical align-items-end px-0 mx-0">\
+              <div class="bannerm-0 col-12 my-5 px-0">\
+              <img class="img-fluid" src="./img/banner/banner-mobile.png" alt="">\
+              </div>\
+              <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
+                  <img class="img-fluid" src="'+ msg[arrIndex].Designerimg + '" alt="">\
+              </div>\
+              <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start py-3">\
+                  <div class="banner1-1" style="font-weight: 900;">'+ msg[arrIndex].WorkName + '</div>\
+                  <p><span class="fs-5">'+ msg[arrIndex].DesignerName + '</span>設計師</p>\
+              </div>\
+            </div>';
+
+      bodyBannerDes += ' \
+            <img class="banner-img img-fluid" id="img_id"  src="'+ msg[arrIndex].workimg[arrIndex].img + '" alt="">\
+           ';
+
+
+
+      $('.banner-des').html(desBanner);
+      $('.banner-m').html(MobBanner);
+      $('#bannerdes-img').html(bodyBannerDes);
+      // var test = msg[0].newstext1;
+
+      // $('#jsontest').append(test);
+    });
 
 
 
@@ -88,124 +122,166 @@ $(document).ready(function () {
 
 // 點選該設計師，導至其對應id的參數網址
 
-$('#1').click(function () { console.log(1);
-  window.location.href =`./about/index.html?id=1`;
- });
- $('#2').click(function () { console.log(2);
-  window.location.href =`./about/index.html?id=2`;
- });
+$('#278').click(function () {
+  console.log(1);
+  window.location.href = `./about/index.html?id=278`;
+});
+$('#507').click(function () {
+  console.log(2);
+  window.location.href = `./about/index.html?id=507`;
+});
+
 
- 
-$('#3').click(function () { console.log(3); 
-  window.location.href =`./about/index.html?id=3`;
+$('#423').click(function () {
+  console.log(3);
+  window.location.href = `./about/index.html?id=423`;
 });
 
-$('#4').click(function () { console.log(4);
-  window.location.href =`./about/index.html?id=4`;
+$('#594').click(function () {
+  console.log(4);
+  window.location.href = `./about/index.html?id=594`;
 });
 
-$('#5').click(function () { console.log(5);
-  window.location.href =`./about/index.html?id=5`;
+$('#364').click(function () {
+  console.log(5);
+  window.location.href = `./about/index.html?id=364`;
 });
-$('#6').click(function () { console.log(6);
-  window.location.href =`./about/index.html?id=6`;
+$('#500').click(function () {
+  console.log(6);
+  window.location.href = `./about/index.html?id=500`;
 });
 
-$('#7').click(function () { console.log(7);
-  window.location.href =`./about/index.html?id=7`;
+$('#651').click(function () {
+  console.log(7);
+  window.location.href = `./about/index.html?id=651`;
 });
 
-$('#8').click(function () { console.log(8);
-  window.location.href =`./about/index.html?id=8`;
+$('#347').click(function () {
+  console.log(8);
+  window.location.href = `./about/index.html?id=347`;
 });
 
-$('#9').click(function () { console.log(9);
-  window.location.href =`./about/index.html?id=9`;
+$('#363').click(function () {
+  console.log(9);
+  window.location.href = `./about/index.html?id=363`;
 });
 
-$('#10').click(function () { console.log(10);
-  window.location.href =`./about/index.html?id=10`;
+$('#555').click(function () {
+  console.log(10);
+  window.location.href = `./about/index.html?id=555`;
 });
 
-$('#11').click(function () { console.log(11);
-  window.location.href =`./about/index.html?id=11`;
+$('#79').click(function () {
+  console.log(11);
+  window.location.href = `./about/index.html?id=79`;
 });
-$('#12').click(function () { console.log(12);
-  window.location.href =`./about/index.html?id=12`;
+$('#158').click(function () {
+  console.log(12);
+  window.location.href = `./about/index.html?id=158`;
 });
 
-$('#13').click(function () { console.log(13);
-  window.location.href =`./about/index.html?id=13`;
+$('#301').click(function () {
+  console.log(13);
+  window.location.href = `./about/index.html?id=301`;
 });
 
-$('#14').click(function () { console.log(14);
-  window.location.href =`./about/index.html?id=14`;
+$('#402').click(function () {
+  console.log(14);
+  window.location.href = `./about/index.html?id=402`;
 });
 
-$('#15').click(function () { console.log(15);
-  window.location.href =`./about/index.html?id=15`;
+$('#131').click(function () {
+  console.log(15);
+  window.location.href = `./about/index.html?id=131`;
 });
 
-$('#16').click(function () { console.log(16);
-  window.location.href =`./about/index.html?id=16`;
+$('#28').click(function () {
+  console.log(16);
+  window.location.href = `./about/index.html?id=28`;
 });
 
-$('#17').click(function () { console.log(17);
-  window.location.href =`./about/index.html?id=17`;
+$('#65').click(function () {
+  console.log(17);
+  window.location.href = `./about/index.html?id=65`;
 });
-$('#18').click(function () { console.log(9);
-  window.location.href =`./about/index.html?id=18`;
+$('#672').click(function () {
+  console.log(9);
+  window.location.href = `./about/index.html?id=672`;
 });
-$('#19').click(function () { console.log(9);
-  window.location.href =`./about/index.html?id=19`;
+$('#438').click(function () {
+  console.log(9);
+  window.location.href = `./about/index.html?id=438`;
 });
-$('#20').click(function () { console.log(9);
-  window.location.href =`./about/index.html?id=20`;
+$('#291').click(function () {
+  console.log(9);
+  window.location.href = `./about/index.html?id=291`;
 });
-$('#21').click(function () { console.log(9);
-  window.location.href =`./about/index.html?id=21`;
+$('#465').click(function () {
+  console.log(9);
+  window.location.href = `./about/index.html?id=465`;
 });
-$('#22').click(function () { console.log(9);
-  window.location.href =`./about/index.html?id=22`;
+$('#436').click(function () {
+  console.log(9);
+  window.location.href = `./about/index.html?id=436`;
 });
-$('#23').click(function () { console.log(9);
-  window.location.href =`./about/index.html?id=23`;
+$('#279').click(function () {
+  console.log(9);
+  window.location.href = `./about/index.html?id=279`;
 });
-$('#24').click(function () { console.log(9);
-  window.location.href =`./about/index.html?id=24`;
+$('#418').click(function () {
+  console.log(9);
+  window.location.href = `./about/index.html?id=418`;
 });
-$('#25').click(function () { console.log(9);
-  window.location.href =`./about/index.html?id=25`;
+$('#385').click(function () {
+  console.log(9);
+  window.location.href = `./about/index.html?id=385`;
 });
-$('#26').click(function () { console.log(9);
-  window.location.href =`./about/index.html?id=26`;
+$('#688').click(function () {
+  console.log(9);
+  window.location.href = `./about/index.html?id=688`;
 });
-$('#27').click(function () { console.log(9);
-  window.location.href =`./about/index.html?id=27`;
+$('#474').click(function () {
+  console.log(9);
+  window.location.href = `./about/index.html?id=474`;
 });
-$('#28').click(function () { console.log(9);
-  window.location.href =`./about/index.html?id=28`;
+$('#505').click(function () {
+  console.log(9);
+  window.location.href = `./about/index.html?id=505`;
 });
-$('#29').click(function () { console.log(9);
-  window.location.href =`./about/index.html?id=29`;
+$('#712').click(function () {
+  console.log(9);
+  window.location.href = `./about/index.html?id=712`;
 });
-$('#30').click(function () { console.log(9);
-  window.location.href =`./about/index.html?id=30`;
+$('#680').click(function () {
+  console.log(9);
+  window.location.href = `./about/index.html?id=680`;
 });
-$('#30').click(function () { console.log(9);
-  window.location.href =`./about/index.html?id=30`;
+$('#705').click(function () {
+  console.log(9);
+  window.location.href = `./about/index.html?id=705`;
 });
-$('#31').click(function () { console.log(9);
-  window.location.href =`./about/index.html?id=31`;
+$('#23').click(function () {
+  console.log(9);
+  window.location.href = `./about/index.html?id=23`;
 });
-$('#32').click(function () { console.log(9);
-  window.location.href =`./about/index.html?id=32`;
-});
-$('#33').click(function () { console.log(9);
-  window.location.href =`./about/index.html?id=33`;
+
+$('#33').click(function () {
+  console.log(9);
+  window.location.href = `./about/index.html?id=33`;
 });
-$('#34').click(function () { console.log(9);
-  window.location.href =`./about/index.html?id=34`;
+
+$('#491').click(function () {
+  console.log(9);
+  window.location.href = `./about/index.html?id=491`;
 });
 
 
+
+
+// $("div.sec01-designer div").sort(function(){
+//   return Math.random()*10 > 5 ? 1 : -1;
+// }).each(function(){
+//   var $t = $(this),
+//       color = $t.attr("");
+//   $t.css({backgroundColor: color}).appendTo( $t.parent() );
+// });

index.html

@@ -17,410 +17,424 @@
 </head>
 
 <body id="top">
-    <section id="Navigation" class="container-fluid" style="padding:0;margin: 0; ">
-        <div id="nav" class="row">
-            <div id="logo" class=" col-md-2 col-lg-3">
-                <a href="https://hhh.com.tw/"> <img src="./img/nav/logo-main-1-1.webp" alt=""></a>
-            </div>
-            <div id="link" class="col-md-10 col-lg-9">
-                <a target="_blank" href="https://line.me/ti/p/%40ovs4341s">
-                    <img src="./img/nav/line.png" alt="幸福空間Line" class="" width="20" height="20">
-                </a>
-                <a target="_blank" href="https://www.facebook.com/hhhfb">
-                    <img src="./img/nav/facebook.png" width="20" height="20" alt="幸福空間FB">
-                </a>
-                <a target="_blank" href="https://www.instagram.com/gorgeous_space/">
-                    <img src="./img/nav/ig.png" width="20" height="20" alt="幸福空間IG">
-                </a>
-                <a target="_blank" href="https://www.youtube.com/user/gorgeousspace">
-                    <img src="./img/nav/youtube.png" width="25" height="20" alt="幸福空間YT">
-                </a>
-            </div>
-        </div>
-    </section>
-    <div class="arrow">
-        <img class="img-fluid"  data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="./img/gotop.png" alt="">
-        <a target="_blank" class="icon" href="https://hhh.com.tw/about/request/"><img  class="img-fluid my-3" src="./img/nav-bottom/find.png" alt=""></a>
-        <a target="_blank" class="icon" href="https://hhh.com.tw/about/calculator/"> <img  class="img-fluid" src="./img/nav-bottom/budget.png" alt=""></a>
-    </div>
-    
-    <section id="Navigation2" class="container-fluid" style="padding:0;margin: 0; ">
-        <div id="nav" class="nav2">
-            <div class="nav-1">
-                <a target="_blank" href="https://hhh.com.tw/about/request/"><img src="./img/nav-bottom/find.png" alt=""></a>
-            </div>
-            <div class="nav-1">
-                <a target="_blank" href="https://hhh.com.tw/about/calculator/"> <img src="./img/nav-bottom/budget.png" alt=""></a>
-            </div>
-            <div class="nav-1">
-                <a target="_blank" href="https://line.me/ti/p/%40ovs4341s"> <img src="./img/nav-bottom/line.png"
-                        alt=""></a>
-            </div>
-            <div class="nav-1">
-                <a target="_blank" href="https://www.facebook.com/hhhfb"><img src="./img/nav-bottom/facebook.png"
-                        alt=""></a>
-            </div>
-            <div class="nav-1">
-                <a target="_blank" href="https://hhh.com.tw/"> <img src="./img/nav-bottom/Icon simple-wechat.png"
-                        alt=""></a>
-            </div>
-            <div style="display: none;" class="col-0">
-                <a target="_blank" href="https://hhh.com.tw/"> <img src="./img/nav/logo-main-1-1.webp" alt=""></a>
+    <div id="top2">
+        <section id="Navigation" class="container-fluid" style="padding:0;margin: 0; ">
+            <div id="nav" class="row">
+                <div id="logo" class=" col-md-2 col-lg-3">
+                    <a href="https://hhh.com.tw/"> <img src="./img/nav/logo-main-1-1.webp" alt=""></a>
+                </div>
+                <div id="link" class="col-md-10 col-lg-9">
+                    <a target="_blank" href="https://line.me/ti/p/%40ovs4341s">
+                        <img src="./img/nav/line.png" alt="幸福空間Line" class="" width="20" height="20">
+                    </a>
+                    <a target="_blank" href="https://www.facebook.com/hhhfb">
+                        <img src="./img/nav/facebook.png" width="20" height="20" alt="幸福空間FB">
+                    </a>
+                    <a target="_blank" href="https://www.instagram.com/gorgeous_space/">
+                        <img src="./img/nav/ig.png" width="20" height="20" alt="幸福空間IG">
+                    </a>
+                    <a target="_blank" href="https://www.youtube.com/user/gorgeousspace">
+                        <img src="./img/nav/youtube.png" width="25" height="20" alt="幸福空間YT">
+                    </a>
+                </div>
             </div>
+        </section>
+        <div class="arrow">
+            <img class="img-fluid" data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="./img/gotop.png"
+                alt="">
+            <a target="_blank" class="icon" href="https://hhh.com.tw/about/request/"><img class="img-fluid my-3"
+                    src="./img/nav-bottom/find.png" alt=""></a>
+            <a target="_blank" class="icon" href="https://hhh.com.tw/about/calculator/"> <img class="img-fluid"
+                    src="./img/nav-bottom/budget.png" alt=""></a>
         </div>
 
-        </div>
-    </section>
-    <section id="banner">
-        <div id="banner-container" class="container-fluid px-0">
-            <!-- 電腦版 -->
-            <div class="banner-des row vertical align-items-end px-0 mx-0">
-                <div class="banner-0 col-0 order-1 col-lg-5 order-1 pe-0">
-
+        <section id="Navigation2" class="container-fluid" style="padding:0;margin: 0; ">
+            <div id="nav" class="nav2">
+                <div class="nav-1">
+                    <a target="_blank" href="https://hhh.com.tw/about/request/"><img src="./img/nav-bottom/find.png"
+                            alt=""></a>
                 </div>
-                <div class="banner-1 col-5 order-3 col-lg-5 order-2 text-white text-end py-3">
-                    <div class="banner1-1" style="font-weight: 900;">張馨&瀚觀室內設計</div>
-                    <p><span class="fs-5">張馨</span>設計師</p>
+                <div class="nav-1">
+                    <a target="_blank" href="https://hhh.com.tw/about/calculator/"> <img
+                            src="./img/nav-bottom/budget.png" alt=""></a>
                 </div>
-                <div class="banner-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">
-                    <img class="img-fluid" src="./img/banner/28.png" alt="">
+                <div class="nav-1">
+                    <a target="_blank" href="https://line.me/ti/p/%40ovs4341s"> <img src="./img/nav-bottom/line.png"
+                            alt=""></a>
+                </div>
+                <div class="nav-1">
+                    <a target="_blank" href="https://www.facebook.com/hhhfb"><img src="./img/nav-bottom/facebook.png"
+                            alt=""></a>
+                </div>
+                <div class="nav-1">
+                    <a target="_blank" href="https://hhh.com.tw/"> <img src="./img/nav-bottom/Icon simple-wechat.png"
+                            alt=""></a>
+                </div>
+                <div style="display: none;" class="col-0">
+                    <a target="_blank" href="https://hhh.com.tw/"> <img src="./img/nav/logo-main-1-1.webp" alt=""></a>
                 </div>
             </div>
-            <!-- 手機板 -->
-            <div class="banner-m row vertical align-items-end px-0 mx-0">
 
-                <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">
-                    <img class="img-fluid" src="./img/banner/28.png" alt="">
+
+        </section>
+        <section id="banner">
+            <div id="bannerdes-img" style="width: 100vw;">
+                <!-- <img class="banner-img" style="width: 100vw;" src="./img/banner/banner-m.png" alt=""> -->
+            </div>
+
+            <div id="banner-container" class="container-fluid px-0">
+                <!-- 電腦版 -->
+                <div class="banner-des row vertical align-items-end px-0 mx-0">
+                    <!-- <div class="banner-0 col-lg-5 order-1 pe-0">
+                        <img class="img-fluid" src="./img/banner/bannertitle.png" alt="">
+                    </div>
+                    <div class="banner-1 col-5 order-3 col-lg-5 order-2 text-white text-end py-3">
+                        <div class="banner1-1" style="font-weight: 900;">張馨&瀚觀室內設計</div>
+                        <p><span class="fs-5">張馨</span>設計師</p>
+                    </div>
+                    <div class="banner-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">
+                        <img class="img-fluid" src="./img/banner/28.png" alt="">
+                    </div> -->
                 </div>
-                <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start py-3">
-                    <div class="banner1-1" style="font-weight: 900;">張馨&瀚觀室內設計</div>
-                    <p><span class="fs-5">張馨</span>設計師</p>
+                <!-- 手機板 -->
+                <div class="banner-m row vertical align-items-end px-0 mx-0">
+                    <!-- <div class="bannerm-1 col-7">
+                        <img class="img-fluid" src="./img/banner/banner-mobile.png" alt="">
+                    </div>
+                    <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">
+                        <img class="img-fluid" src="./img/banner/28.png" alt="">
+                    </div>
+                    <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start py-3">
+                        <div class="banner1-1" style="font-weight: 900;">張馨&瀚觀室內設計</div>
+                        <p><span class="fs-5">張馨</span>設計師</p>
+                    </div> -->
                 </div>
-            </div>
-            <div id="sec01" class="container-fluid px-0 mx-0">
-                <div class="sec01-designer row px-0 mx-0">
+                <div id="sec01" class="container-fluid px-0 mx-0">
+                    <div class="sec01-designer row px-0 mx-0">
 
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="1" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/705.jpg?v12"
-                                alt="">
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="705" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/705.jpg?v12"
+                                    alt="">
 
-                            <div style=" left:60px;" class="sec02-p-m">
-                                <p class="my-0">恆星設計</p>
-                                <p>鄧湘盈</p>
-                            </div>
-                        </a>
+                                <div class="sec02-p-m p-1 mt-1 text-center">
+                                    <p class="my-0">恆星設計</p>
+                                    <p>鄧湘盈</p>
+                                </div>
+                            </a>
 
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="2" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/465.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:10px;" class="sec02-p-m">
-                            <p class="my-0">垼程聯合建築師事務所</p>
-                            <p class="my-0">&浮見月設計工程有限公司</p>
-                            <p>劉獻文</p>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="3" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/33.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:40px;" class="sec02-p-m">
-                            <p class="my-0">比沙列室內裝修設計</p>
-                            <p>張靜峰</p>
-                        </div>
-                      
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="4" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/688.jpg?v12"
-                                alt="">
-                        </a>
-                        <div class="sec02-p-m">
-                            <p class="my-0">富麗室內裝修設計</p>
-                            <p>王誌霆</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="465" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/465.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">垼程聯合建築師事務所</p>
+                                <p class="my-0">&浮見月設計工程有限公司</p>
+                                <p>劉獻文</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="5" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/278.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:70px;" class="sec02-p-m">
-                            <p class="my-0">浩室設計</p>
-                            <p>邱炫達</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="33" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/33.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">比沙列室內裝修設計</p>
+                                <p>張靜峰</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="6" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/385.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:60px;" class="sec02-p-m">
-                            <p class="my-0">亞維空間設計</p>
-                            <p>簡瑋琪</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="688" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/688.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">富麗室內裝修設計</p>
+                                <p>王誌霆</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="7" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/505.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:60px;" class="sec02-p-m">
-                            <p class="my-0">橙碩室內設計</p>
-                            <p>胡捷荏</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="278" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/278.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">浩室設計</p>
+                                <p>邱炫達</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="8" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/555.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:70px;" class="sec02-p-m">
-                            <p class="my-0">棠禾設計</p>
-                            <p>曾智和</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="385" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/385.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">亞維空間設計</p>
+                                <p>簡瑋琪</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="9" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/651.jpg?v12"
-                                alt="">
-                        </a>
-                        <div class="sec02-p-m">
-                            <p class="my-0">禾雅國際室內裝修</p>
-                            <p>李柔瑩</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="505" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/505.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">橙碩室內設計</p>
+                                <p>胡捷荏</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="10" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/291.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:60px;" class="sec02-p-m">
-                            <p class="my-0">藝谷空間設計</p>
-                            <p>張芷融</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="555" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/555.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">棠禾設計</p>
+                                <p>曾智和</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="11" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/491.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:50px;" class="sec02-p-m">
-                            <p class="my-0">優尼客空間設計</p>
-                            <p>黃仲均</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="651" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/651.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">禾雅國際室內裝修</p>
+                                <p>李柔瑩</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="12" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/301.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:35px;" class="sec02-p-m">
-                            <p class="my-0">YS暘昇國際室內裝修</p>
-                            <p>李宗育</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="291" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/291.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">藝谷空間設計</p>
+                                <p>張芷融</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="13" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/347.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:50px;" class="sec02-p-m">
-                            <p class="my-0">千綵胤空間設計</p>
-                            <p>李千惠</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="491" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/491.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">優尼客空間設計</p>
+                                <p>黃仲均</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="14" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/363.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:50px;" class="sec02-p-m">
-                            <p class="my-0">雲司國際設計</p>
-                            <p>廖笠庭 周言叡</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="301" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/301.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">YS暘昇國際室內裝修</p>
+                                <p>李宗育</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="15" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/438.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:10px;" class="sec02-p-m">
-                            <p class="my-0">木博士團隊</p>
-                            <p class="my-0">&動念室內設計制作</p>
-                            <p>卜冠程&木博士設計團隊</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="347" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/347.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">千綵胤空間設計</p>
+                                <p>李千惠</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="16" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/65.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:50px;" class="sec02-p-m">
-                            <p class="my-0">采舍空間設計</p>
-                            <p>楊詩韻</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="363" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/363.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">雲司國際設計</p>
+                                <p>廖笠庭 周言叡</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="17" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/474.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:60px;" class="sec02-p-m">
-                            <p class="my-0">雋築空間設計</p>
-                            <p>劉倢妤</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="438" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/438.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">木博士團隊</p>
+                                <p class="my-0">&動念室內設計制作</p>
+                                <p>卜冠程&木博士設計團隊</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="18" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/436.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:60px;" class="sec02-p-m">
-                            <p class="my-0">廣延空間設計</p>
-                            <p>陳偉立</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="65" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/65.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">采舍空間設計</p>
+                                <p>楊詩韻</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="19" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/158.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:60px;" class="sec02-p-m">
-                            <p class="my-0">京彩室內設計</p>
-                            <p>王立崢</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="474" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/474.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">雋築空間設計</p>
+                                <p>劉倢妤</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="20" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/507.jpg?v12"
-                                alt="">
-                        </a>
-                        <div class="sec02-p-m">
-                            <p class="my-0">舒杰室內裝修設計</p>
-                            <p>陳琬婷</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="436" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/436.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">廣延空間設計</p>
+                                <p>陳偉立</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="21" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/23.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:60px;" class="sec02-p-m">
-                            <p class="my-0">境庭國際設計</p>
-                            <p>周靖雅</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="158" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/158.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">京彩室內設計</p>
+                                <p>王立崢</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="22" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/712.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:60px;" class="sec02-p-m">
-                            <p class="my-0">丰彤設計工程</p>
-                            <p>張書源</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="507" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/507.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">舒杰室內裝修設計</p>
+                                <p>陳琬婷</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="23" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/279.jpg?v12"
-                                alt="">
-                        </a>
-                        <div class="sec02-p-m">
-                            <p class="my-0">三宅一秀空間創藝</p>
-                            <p>郁琇琇</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="23" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/23.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">境庭國際設計</p>
+                                <p>周靖雅</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="24" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/402.jpg?v12"
-                                alt="">
-                        </a>
-                        <div class="sec02-p-m">
-                            <p class="my-0">允庭室內裝修設計</p>
-                            <p>張舜淵 林術榮 李晴沛</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="712" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/712.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">丰彤設計工程</p>
+                                <p>張書源</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="25" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/28.jpg?v12"
-                                alt="">
-                        </a>
-                        <div class="sec02-p-m">
-                            <p class="my-0">張馨&瀚觀室內設計</p>
-                            <p>張馨</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="279" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/279.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">三宅一秀空間創藝</p>
+                                <p>郁琇琇</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="26" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/79.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:60px;" class="sec02-p-m">
-                            <p class="my-0">將作空間設計</p>
-                            <p>張成一</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="402" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/402.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">允庭室內裝修設計</p>
+                                <p>張舜淵 林術榮 李晴沛</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="27" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/131.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:60px;" class="sec02-p-m">
-                            <p class="my-0">陶璽空間設計</p>
-                            <p>林欣璇</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="28" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/28.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">張馨&瀚觀室內設計</p>
+                                <p>張馨</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="28" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/594.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:60px;" class="sec02-p-m">
-                            <p class="my-0">上築空間設計</p>
-                            <p>魏子涵</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="79" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/79.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">將作空間設計</p>
+                                <p>張成一</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="29" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/672.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:60px;" class="sec02-p-m">
-                            <p class="my-0">至文室內裝修</p>
-                            <p>毛至文</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="131" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/131.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">陶璽空間設計</p>
+                                <p>林欣璇</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="30" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/680.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:60px;" class="sec02-p-m">
-                            <p class="my-0">禾禾設計</p>
-                            <p>張禾溥、舒皓</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="594" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/594.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">上築空間設計</p>
+                                <p>魏子涵</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="31" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/500.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:10px;" class="sec02-p-m">
-                            <p class="my-0">知域設計×一己空間制作</p>
-                            <p>劉啟全、陳韻如、方人凱</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="672" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/672.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">至文室內裝修</p>
+                                <p>毛至文</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="32" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/418.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:25px;" class="sec02-p-m">
-                            <p class="my-0">采品室內設計</p>
-                            <p>盧慧珊&采品設計團隊</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="680" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/680.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">禾禾設計</p>
+                                <p>張禾溥、舒皓</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="33" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/364.jpg?v12"
-                                alt="">
-                        </a>
-                        <div class="sec02-p-m">
-                            <p class="my-0">元均制作</p>
-                            <p>馬愷君 Maggie</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="500" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/500.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">知域設計×一己空間制作</p>
+                                <p>劉啟全、陳韻如、方人凱</p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="34" class="img-fluid"
-                                src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/423.jpg?v12"
-                                alt="">
-                        </a>
-                        <div style=" left:60px;" class="sec02-p-m">
-                            <p class="my-0">馥築時尚設計</p>
-                            <p>湯鎮安</p>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="418" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/418.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">采品室內設計</p>
+                                <p>盧慧珊&采品設計團隊</p>
+                            </div>
+                        </div>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="364" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/364.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">元均制作</p>
+                                <p>馬愷君 Maggie</p>
+                            </div>
+                        </div>
+                        <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img id="423" class="img-fluid"
+                                    src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/423.jpg?v12"
+                                    alt="">
+                            </a>
+                            <div class="sec02-p-m p-1 mt-1 text-center">
+                                <p class="my-0">馥築時尚設計</p>
+                                <p>湯鎮安</p>
+                            </div>
                         </div>
-                    </div>
 
+                    </div>
                 </div>
             </div>
-        </div>
-    </section>
+        </section>
 
-    <footer id="footer" class="container-fluid" style="padding:0;margin: 0; ">
-        <p>幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.</p>
-    </footer>
+        <footer id="footer" class="container-fluid" style="padding:0;margin: 0; ">
 
+            <p>幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.<a href=""><span
+                        class="px-2">|</span>聯絡我們<span class="px-2">|</span></a><a href=""> 關於本站 <span
+                        class="px-2">|</span></a></p>
+        </footer>
+    </div>
 
     <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
@@ -435,45 +449,6 @@
 
     <script src="./goto.js"></script>
 
-    <script>
-        // $(document).ready(function () {
-
-        //     $.ajax({
-        //         method: "GET",
-        //         url: "homepageimg.json",
-        //         dataType: "json",
-        //     })
-
-        //         .done(function (msg) {
-        //             var sec01Content = '';
-        //             console.log(msg);
-        //             var res = msg.length;
-        //             console.log(res);
-        //             const limit = res;
-        //             for (var i = 0; i < limit; i++) {
-        //                 var numb = i + 1;
-        //                 sec01Content += ' \
-        //                 <div class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"> \
-        //                    <a> <img id="' + numb + '" class="img-fluid" src="'+msg[i].srcimg+'" alt=""></a>\
-        //         </div>';
-
-
-
-
-        <div class="sec02-p-m" >
-            <p class="my-0">恆星設計</p>
-            <p>鄧湘盈</p>
-        </div> //             } 
-        //             // $('.sec01-designer').html(sec01Content);
-        //             // var test = msg[0].newstext1;
-
-        //             // $('#jsontest').append(test);
-        //         });
-
-
-
-        // });
-    </script>
 </body>
 
 </html>

style.css

@@ -9,10 +9,7 @@
 
 body {
   position: relative;
-  background: url(./img/banner/banner-m.png), -webkit-gradient(linear, left top, left bottom, color-stop(10%, transparent), color-stop(49%, #363636));
-  background: url(./img/banner/banner-m.png), linear-gradient(180deg, transparent 10%, #363636 49%);
-  background-size: 100vw;
-  background-repeat: no-repeat;
+  background: #363636;
 }
 
 @media screen and (max-width: 767px) {
@@ -22,6 +19,7 @@ body {
 }
 
 body .arrow {
+  background-image: url();
   position: fixed;
   right: 30px;
   bottom: 150px;
@@ -203,9 +201,30 @@ body .arrow:hover {
      object-fit: cover;
 }
 
+#banner {
+  position: relative;
+}
+
+#banner #bannerdes-img {
+  position: absolute;
+  z-index: -1;
+  opacity: 0.5;
+}
+
+#banner #bannerdes-img .banner-img {
+  width: 100vw;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #bannerdes-img .banner-img {
+    height: 80vh;
+  }
+}
+
 @media screen and (max-width: 767px) {
   #banner {
-    background-image: url(../img/about/banner/banner-m2.png);
     background-size: 115vw;
     background-repeat: no-repeat;
   }
@@ -213,11 +232,12 @@ body .arrow:hover {
 
 #banner #banner-container {
   width: 90vw;
-  padding-top: 30vw;
+  padding-top: 18vw;
 }
 
 @media screen and (max-width: 767px) {
   #banner #banner-container {
+    padding-top: 0vw;
     width: 95vw;
   }
 }
@@ -243,7 +263,7 @@ body .arrow:hover {
 }
 
 #banner #banner-container .banner-m {
-  padding-top: 80vw;
+  padding-top: 10vw;
 }
 
 @media screen and (min-width: 1025px) {
@@ -281,6 +301,7 @@ body .arrow:hover {
   position: relative;
   -webkit-transition: 0.5s ease-in-out;
   transition: 0.5s ease-in-out;
+  cursor: pointer;
 }
 
 #banner #banner-container #sec01 .col-lg-2 .sec02-p-m {
@@ -300,9 +321,10 @@ body .arrow:hover {
 
 @media screen and (min-width: 1025px) {
   #banner #banner-container #sec01 .col-lg-2 .sec02-p-m {
+    width: 100%;
     position: absolute;
-    top: 90px;
-    left: 40px;
+    top: 70px;
+    left: 0px;
     font-size: 16px;
     opacity: 0;
   }
@@ -329,6 +351,11 @@ body .arrow:hover {
   margin: 0 auto !important;
 }
 
+#footer a {
+  text-decoration: none;
+  color: #fff;
+}
+
 #footer p {
   padding: 15px;
   color: #fff;

style.scss

@@ -13,15 +13,16 @@ $bgcolor: #f4fffc;
 $navbgcolor: #a9d0c5;
 body {
     position: relative;
-    background: url(./img/banner/banner-m.png), linear-gradient(180deg, transparent 10%, #363636 49%);
-    background-size: 100vw;
-    background-repeat: no-repeat;
+    // background: url(./img/banner/banner-m.png), linear-gradient(180deg, transparent 10%, #363636 10%);
+    // background-size: 100vw;
+    // background-repeat: no-repeat;
     // background-blend-mode: overlay;
-
+    background: #363636;
     @media screen and(max-width:$moblie) {
         background: #363636;
     }
     .arrow {
+        background-image: url();
         position: fixed;
         right: 30px;
         bottom: 150px;
@@ -50,7 +51,6 @@ body {
 // 主選單
 #Navigation {
     background: rgba(112, 112, 112, 0.75);
-
     height: 4.5vw;
     width: 100vw !important;
     position: fixed;
@@ -62,7 +62,6 @@ body {
         height: 15vw;
         position: fixed;
         z-index: 5;
-     
         background: rgba(0, 0, 0, 0.8);
     }
 
@@ -174,16 +173,31 @@ body {
    
 }
 #banner {
+    position: relative;
+    #bannerdes-img{
+        position: absolute;
+        z-index:-1;
+        opacity: 0.5;
+        .banner-img{
+            width: 100vw;
+            object-fit: cover;
+            @media screen and(max-width:$moblie) {
+                height: 80vh;
+            
+            }
+        }
+    }
     @media screen and(max-width:$moblie) {
-        background-image: url(../img/about/banner/banner-m2.png);
+        // background-image: url(../img/about/banner/banner-m2.png);
         background-size: 115vw;
         background-repeat: no-repeat;
     
     }
     #banner-container {
         width: 90vw;
-        padding-top: 30vw;
+        padding-top: 18vw;
         @media screen and(max-width:$moblie) {
+            padding-top: 0vw;
             width: 95vw;
         
         }
@@ -205,7 +219,7 @@ body {
         }
         // 手機板
         .banner-m {
-            padding-top: 80vw;
+            padding-top: 10vw;
             @media screen and(min-width:$desktop) {
                 display: none;
             }
@@ -220,6 +234,7 @@ body {
             }
         }
         #sec01 {
+           
             padding-top: 5vw;
             @media screen and(max-width:$moblie) {
                 padding-top: 0;
@@ -228,6 +243,7 @@ body {
                 background: rgb(128, 171, 41);
                 position: relative;
                 transition: 0.5s ease-in-out;
+                cursor: pointer;
                 .sec02-p-m{
                     color:#fff;
                     text-align: center;
@@ -238,9 +254,10 @@ body {
                     display: none;
                 }
                     @media screen and(min-width:$desktop) {
+                        width: 100%;
                         position: absolute;
-                        top: 90px;
-                        left:40px;
+                        top: 70px;
+                        left:0px;
                         font-size: 16px;
                        opacity: 0;
                     }
@@ -268,7 +285,13 @@ body {
     text-align: center;
     width: 80vw;
     margin: 0 auto !important;
-
+   
+    a{
+        text-decoration: none;
+        color:#fff;
+    
+       
+    }
     p {
         padding: 15px;
         color: #fff;