修正

about/about.css

@@ -340,20 +340,20 @@ body .arrow:hover {
   opacity: 1;
 }
 
-#banner #banner-container .tab-content .condition {
-  padding: 24px;
+#banner #banner-container .tab-content .sec01 .condition {
+  padding: 4vw 24px;
   font-size: 16px;
   padding-bottom: 10vw;
 }
 
 @media screen and (max-width: 767px) {
-  #banner #banner-container .tab-content .condition {
+  #banner #banner-container .tab-content .sec01 .condition {
     padding: 18px;
   }
 }
 
-#banner #banner-container .tab-content .idea {
-  padding: 24px;
+#banner #banner-container .tab-content .sec01 .idea {
+  padding: 4vw 24px;
   font-size: 16px;
   padding-bottom: 10vw;
   background-size: contain;
@@ -361,9 +361,9 @@ body .arrow:hover {
   background-blend-mode: overlay;
 }
 
-#banner #banner-container .tab-content .contact {
+#banner #banner-container .tab-content .sec01 .contact {
   padding-bottom: 10vw;
-  padding: 24px;
+  padding: 4vw 24px;
   font-size: 16px;
   background-size: contain;
   background-repeat: no-repeat;
@@ -371,13 +371,13 @@ body .arrow:hover {
   word-break: break-all;
 }
 
-#banner #banner-container .tab-content .contact a {
+#banner #banner-container .tab-content .sec01 .contact a {
   text-decoration: none;
   color: #fff;
 }
 
 @media screen and (max-width: 767px) {
-  #banner #banner-container .tab-content .contact {
+  #banner #banner-container .tab-content .sec01 .contact {
     padding: 18px;
   }
 }
@@ -491,7 +491,7 @@ body .arrow:hover {
   }
 }
 
-#banner #banner-container .tab-content .sec03 .col-lg-4 {
+#banner #banner-container .tab-content .sec03 .col-lg-3 {
   position: relative;
   background: #80ab29;
   -webkit-transition: 0.3s ease-in-out;
@@ -499,7 +499,7 @@ body .arrow:hover {
   cursor: pointer;
 }
 
-#banner #banner-container .tab-content .sec03 .col-lg-4 .sec03-p-m {
+#banner #banner-container .tab-content .sec03 .col-lg-3 .sec03-p-m {
   color: #fff;
   text-align: center;
   font-size: 14px;
@@ -510,7 +510,7 @@ body .arrow:hover {
 }
 
 @media screen and (min-width: 1025px) {
-  #banner #banner-container .tab-content .sec03 .col-lg-4 .sec03-p-m {
+  #banner #banner-container .tab-content .sec03 .col-lg-3 .sec03-p-m {
     width: 100%;
     position: absolute;
     top: 100px;
@@ -521,7 +521,7 @@ body .arrow:hover {
 }
 
 @media screen and (min-width: 1025px) {
-  #banner #banner-container .tab-content .sec03 .col-lg-4 .sec03-p-m {
+  #banner #banner-container .tab-content .sec03 .col-lg-3 .sec03-p-m {
     position: absolute;
     top: 50px;
     left: 0px;
@@ -530,61 +530,61 @@ body .arrow:hover {
   }
 }
 
-#banner #banner-container .tab-content .sec03 .col-lg-4:hover .play1 {
+#banner #banner-container .tab-content .sec03 .col-lg-3:hover .play1 {
   opacity: 1;
 }
 
-#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 {
+#banner #banner-container .tab-content .sec03 .col-lg-3:hover .sec02-p-m,
+#banner #banner-container .tab-content .sec03 .col-lg-3:hover .sec03-p-m {
   opacity: 1;
 }
 
-#banner #banner-container .tab-content .sec03 .col-lg-4:hover img {
+#banner #banner-container .tab-content .sec03 .col-lg-3:hover img {
   opacity: 0.2;
 }
 
 @media screen and (max-width: 767px) {
-  #banner #banner-container .tab-content .sec03 .col-lg-4:hover img {
+  #banner #banner-container .tab-content .sec03 .col-lg-3:hover img {
     opacity: 1;
   }
 }
 
 @media screen and (max-width: 767px) {
-  #banner #banner-container .tab-content .sec03 .col-lg-4 {
+  #banner #banner-container .tab-content .sec03 .col-lg-3 {
     background: none;
   }
 }
 
-#banner #banner-container .tab-content .sec03 .col-lg-4 img {
+#banner #banner-container .tab-content .sec03 .col-lg-3 img {
   -o-object-fit: cover;
      object-fit: cover;
   width: 100% !important;
-  height: 200px !important;
+  height: 180px !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 .sec03-img-m {
+#banner #banner-container .tab-content .sec03 .col-lg-3 .sec03-img-m {
   text-align: center;
   width: 100%;
   position: absolute;
   top: 100px;
 }
 
-#banner #banner-container .tab-content .sec03 .col-lg-4 .sec03-img-m1 {
+#banner #banner-container .tab-content .sec03 .col-lg-3 .sec03-img-m1 {
   text-align: center;
   width: 100%;
   position: absolute;
 }
 
 @media screen and (max-width: 767px) {
-  #banner #banner-container .tab-content .sec03 .col-lg-4 .sec03-img-m1 {
+  #banner #banner-container .tab-content .sec03 .col-lg-3 .sec03-img-m1 {
     top: 80px;
   }
 }
 
-#banner #banner-container .tab-content .sec03 .col-lg-4 .sec03-img-m1 .play1 {
+#banner #banner-container .tab-content .sec03 .col-lg-3 .sec03-img-m1 .play1 {
   width: 50px !important;
   height: 50px !important;
 }
@@ -701,7 +701,7 @@ body .arrow:hover {
 #banner #banner-container .tab-content .sec04 .sec04-1 .sec05-row {
   background: rgba(0, 0, 0, 0.8);
   text-align: center;
-  width: 100%;
+  width: 100% !important;
   height: 600px;
 }
 
@@ -725,7 +725,8 @@ body .arrow:hover {
 @media screen and (max-width: 767px) {
   #footer {
     width: 95vw;
-    padding-bottom: 30vw;
+    padding: 5vw;
+    padding-bottom: 12vw;
   }
 }
 

about/about.scss

@@ -278,38 +278,42 @@ body {
         }
         // 公司簡介
         .tab-content {
-            // 公司簡介
-            .condition {
-                padding: 24px;
-                font-size: 16px;
-                padding-bottom: 10vw;
-                @media screen and(max-width:$moblie) {
-                    padding: 18px;
+            .sec01{
+                // 公司簡介
+                .condition {
+                 
+                    padding:4vw 24px;
+                    font-size: 16px;
+                    padding-bottom: 10vw;
+                    @media screen and(max-width:$moblie) {
+                        padding: 18px;
+                    }
                 }
-            }
-            .idea {
-                padding: 24px;
-                font-size: 16px;
-                padding-bottom: 10vw;
-                background-size: contain;
-                background-repeat: no-repeat;
-                background-blend-mode: overlay;
-            }
-            .contact {
-                padding-bottom: 10vw;
-                padding: 24px;
-                font-size: 16px;
-                background-size: contain;
-                background-repeat: no-repeat;
-                background-blend-mode: overlay;
-                word-break: break-all;
-                a {
-                    text-decoration: none;
-                    color: #fff;
+                .idea {
+                    padding:4vw 24px;
+                    font-size: 16px;
+                    padding-bottom: 10vw;
+                    background-size: contain;
+                    background-repeat: no-repeat;
+                    background-blend-mode: overlay;
                 }
-                @media screen and(max-width:$moblie) {
-                    padding: 18px;
+                .contact {
+                    padding-bottom: 10vw;
+                    padding:4vw 24px;
+                    font-size: 16px;
+                    background-size: contain;
+                    background-repeat: no-repeat;
+                    background-blend-mode: overlay;
+                    word-break: break-all;
+                    a {
+                        text-decoration: none;
+                        color: #fff;
+                    }
+                    @media screen and(max-width:$moblie) {
+                        padding: 18px;
+                    }
                 }
+
             }
             // 個案賞析
             .sec02,
@@ -385,7 +389,8 @@ body {
                 }
             }
             .sec03 {
-                .col-lg-4 {
+                .col-lg-3 {
+                    
                     position: relative;
                     background: rgb(128, 171, 41);
                     transition: 0.3s ease-in-out;
@@ -437,7 +442,7 @@ body {
                     img {
                         object-fit: cover;
                         width: 100% !important;
-                        height: 200px !important;
+                        height: 180px !important;
                         opacity: 1;
                         transition: 0.3s ease-in-out;
                     }
@@ -548,7 +553,7 @@ body {
                     .sec05-row {
                         background: rgba(0, 0, 0, 0.8);
                         text-align: center;
-                        width: 100%;
+                        width: 100% !important;
                         height: 600px;
                         @media screen and(max-width:$moblie) {
                             height: 300px;
@@ -571,7 +576,8 @@ body {
     margin: 0 auto !important;
     @media screen and(max-width:$moblie) {
         width: 95vw;
-        padding-bottom: 30vw;
+        padding: 5vw;
+        padding-bottom: 12vw;
     }
     a {
         text-decoration: none;

about/goto2.js

@@ -183,7 +183,7 @@ $(document).ready(function () {
                        
                             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 id="sec05" class="sec05-row row align-items-center h-100 w-100" 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>\
@@ -192,7 +192,7 @@ $(document).ready(function () {
                             } else {
                             for (var j = 0; j < msg[i].workVideo.length; j++) {
                                 aboutViedeo += ' \
-                                <div class="secimg col-lg-4 p-0">\
+                                <div class="secimg col-lg-3 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 class="mb-1">'+ msg[i].workVideo[j].videotext + '</p>\
@@ -204,7 +204,7 @@ $(document).ready(function () {
                         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 id="sec05" class="sec05-row row align-items-center h-100 mx-0 w-100" 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>\

about/index.html

@@ -349,7 +349,7 @@
                         </div> -->
                     </div>
                 </div>
-                <div class="sec04 tab-pane fade container" id="pills-contact2" role="tabpanel"
+                <div class="sec04 tab-pane fade mx-0" id="pills-contact2" role="tabpanel"
                     aria-labelledby="pills-contact2-tab">
                     <div class="sec04-1 row px-0 mx-0">
 
@@ -368,7 +368,7 @@
     <!-- <section style="text-align: center;" class="py-4">
         <img src="../img/about/banner/return.png" alt="">
     </section> -->
-    <footer id="footer" class="container-fluid px-0 mx-0 py-4">
+    <footer id="footer" class="container-fluid px-0 mx-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>
 

style.css

@@ -266,6 +266,17 @@ body .arrow:hover {
   font-size: 24px;
 }
 
+#banner #banner-container .banner-des .banner-2 {
+  overflow: hidden;
+}
+
+#banner #banner-container .banner-des .banner-2 img {
+  margin-bottom: -30px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  width: 100%;
+}
+
 #banner #banner-container .banner-m {
   padding-top: 10vw;
 }

style.scss

@@ -208,6 +208,16 @@ body {
                     font-size: 24px;
                 }
             }
+            .banner-2{
+                overflow: hidden;
+                img{
+                    margin-bottom: -30px;
+                    object-fit: cover;
+                    width: 100%;
+               
+                }
+            }
+
         }
         // 手機板
         .banner-m {