add loading img

themes/hugo-universal-theme-master/static/css/style.bhouse.css

@@ -156,6 +156,10 @@ img {
   opacity: 0.8;
 }
 
+.slider_loading {
+  display: none !important;
+}
+
 /* 共通樣式 end */
 /* header start */
 .navbar {
@@ -1589,17 +1593,20 @@ img {
 }
 
 @media screen and (max-width: 767px) {
-  .room-planner-service-icon-box .room-planner-service-icon-box-item, .room-planner-service-icon-box2 .room-planner-service-icon-box-item {
+  .room-planner-service-icon-box .room-planner-service-icon-box-item,
+.room-planner-service-icon-box2 .room-planner-service-icon-box-item {
     margin-top: 15px;
   }
 }
-.room-planner-service-icon-box .icon-radius-text, .room-planner-service-icon-box2 .icon-radius-text {
+.room-planner-service-icon-box .icon-radius-text,
+.room-planner-service-icon-box2 .icon-radius-text {
   color: #78b142;
   font-size: 20px;
   font-family: NSJP-700;
   margin-top: 15px;
 }
-.room-planner-service-icon-box .icon-radius, .room-planner-service-icon-box2 .icon-radius {
+.room-planner-service-icon-box .icon-radius,
+.room-planner-service-icon-box2 .icon-radius {
   border: 1px solid #e0ee79;
   border-radius: 100%;
   padding: 20px;
@@ -1608,42 +1615,50 @@ img {
   margin: 0 auto;
 }
 @media screen and (max-width: 767px) {
-  .room-planner-service-icon-box .icon-radius, .room-planner-service-icon-box2 .icon-radius {
+  .room-planner-service-icon-box .icon-radius,
+.room-planner-service-icon-box2 .icon-radius {
     width: 72px;
     height: 72px;
     padding: 5px;
   }
 }
-.room-planner-service-icon-box .icon-radius img, .room-planner-service-icon-box2 .icon-radius img {
+.room-planner-service-icon-box .icon-radius img,
+.room-planner-service-icon-box2 .icon-radius img {
   height: auto;
   -o-object-fit: cover;
      object-fit: cover;
 }
-.room-planner-service-icon-box .icon-radius .icon-radius-img01, .room-planner-service-icon-box2 .icon-radius .icon-radius-img01 {
+.room-planner-service-icon-box .icon-radius .icon-radius-img01,
+.room-planner-service-icon-box2 .icon-radius .icon-radius-img01 {
   margin-top: 10px;
   width: 55px;
 }
 @media screen and (max-width: 767px) {
-  .room-planner-service-icon-box .icon-radius .icon-radius-img01, .room-planner-service-icon-box2 .icon-radius .icon-radius-img01 {
+  .room-planner-service-icon-box .icon-radius .icon-radius-img01,
+.room-planner-service-icon-box2 .icon-radius .icon-radius-img01 {
     margin-top: 15px;
     width: 33px;
   }
 }
-.room-planner-service-icon-box .icon-radius .icon-radius-img02, .room-planner-service-icon-box2 .icon-radius .icon-radius-img02 {
+.room-planner-service-icon-box .icon-radius .icon-radius-img02,
+.room-planner-service-icon-box2 .icon-radius .icon-radius-img02 {
   margin-top: 10px;
   width: 71px;
 }
 @media screen and (max-width: 767px) {
-  .room-planner-service-icon-box .icon-radius .icon-radius-img02, .room-planner-service-icon-box2 .icon-radius .icon-radius-img02 {
+  .room-planner-service-icon-box .icon-radius .icon-radius-img02,
+.room-planner-service-icon-box2 .icon-radius .icon-radius-img02 {
     width: 42px;
   }
 }
-.room-planner-service-icon-box .icon-radius .icon-radius-img03, .room-planner-service-icon-box2 .icon-radius .icon-radius-img03 {
+.room-planner-service-icon-box .icon-radius .icon-radius-img03,
+.room-planner-service-icon-box2 .icon-radius .icon-radius-img03 {
   margin-top: 10px;
   width: 56px;
 }
 @media screen and (max-width: 767px) {
-  .room-planner-service-icon-box .icon-radius .icon-radius-img03, .room-planner-service-icon-box2 .icon-radius .icon-radius-img03 {
+  .room-planner-service-icon-box .icon-radius .icon-radius-img03,
+.room-planner-service-icon-box2 .icon-radius .icon-radius-img03 {
     width: 33.6px;
   }
 }
@@ -2300,11 +2315,21 @@ img {
   top: 0;
   left: 0;
 }
+@media (max-width: 767px) {
+  .blog-main .text-box div .left_img {
+    left: 10vw;
+  }
+}
 .blog-main .text-box div .right_img {
   position: absolute;
   top: 0;
   right: 0;
 }
+@media (max-width: 767px) {
+  .blog-main .text-box div .right_img {
+    right: 10vw;
+  }
+}
 .blog-main .text-box .underline {
   display: block;
   background: #f0f6dd;
@@ -2322,10 +2347,20 @@ img {
   align-items: center;
   position: relative;
 }
+@media (max-width: 767px) {
+  .blog-main .process {
+    padding: 100px 0 60px;
+  }
+}
 .blog-main .process div {
   display: flex;
   margin: 0 50px;
 }
+@media (max-width: 767px) {
+  .blog-main .process div {
+    margin: auto;
+  }
+}
 .blog-main .process div:last-child {
   padding: 0 145px;
   margin-top: 58px;
@@ -2335,6 +2370,12 @@ img {
     margin-top: 27px;
   }
 }
+@media (max-width: 767px) {
+  .blog-main .process div:last-child {
+    padding: 0;
+    margin-top: 0;
+  }
+}
 .blog-main .process .house_img {
   position: absolute;
   top: -95px;
@@ -2347,6 +2388,19 @@ img {
     max-width: 15%;
   }
 }
+@media (max-width: 767px) {
+  .blog-main .process .house_img {
+    top: -60px;
+    left: 35%;
+    max-width: 25vw;
+  }
+}
+@media (max-width: 475px) {
+  .blog-main .process .house_img {
+    left: 33%;
+    max-width: 35vw;
+  }
+}
 .blog-main .process .ruler_img {
   position: absolute;
   top: -70px;
@@ -2380,6 +2434,11 @@ img {
 .blog-main .process section {
   margin-right: 80px;
 }
+@media (max-width: 767px) {
+  .blog-main .process section {
+    margin-right: 0;
+  }
+}
 .blog-main .process section img {
   width: 100%;
   max-width: 90px;
@@ -2389,6 +2448,11 @@ img {
   position: relative;
   z-index: 1;
 }
+@media (max-width: 767px) {
+  .blog-main .process section img {
+    width: auto;
+  }
+}
 .blog-main .process section span {
   display: block;
   position: absolute;
@@ -2409,9 +2473,44 @@ img {
   margin: 15px 0;
   font-family: NSJP-500;
 }
+.blog-main .process_mb .row img {
+  position: relative;
+  z-index: 20;
+}
+.blog-main .process_mb .row div {
+  position: relative;
+  justify-content: center;
+  margin-bottom: 10vw;
+}
+.blog-main .process_mb .row .mb_line_01 {
+  background-repeat: no-repeat;
+  background-image: url("/img/blog/mobile_line_01.png");
+  position: absolute;
+  height: 5px;
+  width: 40vw;
+  top: 32%;
+  left: 55%;
+  z-index: 10;
+}
+.blog-main .process_mb .row .mb_line_02 {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-image: url("/img/blog/mobile_line_02.png");
+  position: absolute;
+  height: 125px;
+  width: 100%;
+  top: 90%;
+  left: -50%;
+  z-index: 10;
+}
 .blog-main .article_list {
   margin-top: 100px;
 }
+@media (max-width: 767px) {
+  .blog-main .article_list {
+    margin-top: 0;
+  }
+}
 .blog-main .article_list .article_item {
   width: 65%;
   display: flex;
@@ -2424,6 +2523,17 @@ img {
     width: 80%;
   }
 }
+@media (max-width: 991px) {
+  .blog-main .article_list .article_item {
+    width: 97%;
+  }
+}
+@media (max-width: 767px) {
+  .blog-main .article_list .article_item {
+    width: 100%;
+    margin: auto;
+  }
+}
 .blog-main .article_list .article_item .row {
   height: 500px;
 }
@@ -2435,15 +2545,39 @@ img {
 .blog-main .article_list .article_item .img_box {
   position: relative;
 }
+@media (max-width: 767px) {
+  .blog-main .article_list .article_item .img_box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 80px auto;
+  }
+}
 .blog-main .article_list .article_item .img_box img:first-child {
   width: 100%;
 }
+@media (max-width: 767px) {
+  .blog-main .article_list .article_item .img_box img:first-child {
+    width: 75%;
+  }
+}
 .blog-main .article_list .article_item .img_box img:last-child {
   width: 55px;
   position: absolute;
   left: 15vw;
   top: -10px;
 }
+@media (max-width: 767px) {
+  .blog-main .article_list .article_item .img_box img:last-child {
+    position: absolute;
+    left: 65vw;
+    width: 60px;
+  }
+}
+.blog-main .article_list .article_item .mobile_line img {
+  width: 100%;
+  margin-bottom: -25px;
+}
 .blog-main .article_list .article_item .text_box {
   display: flex;
   flex-direction: column;
@@ -2454,16 +2588,29 @@ img {
   font-size: 35px;
   font-family: NSJP-700;
 }
+@media (max-width: 767px) {
+  .blog-main .article_list .article_item .text_box h4 {
+    font-size: 26px;
+  }
+}
 .blog-main .article_list .article_item .text_box h4 span {
   color: #78b142;
   font-size: 28px;
   font-family: NSJP-500;
 }
+@media (max-width: 767px) {
+  .blog-main .article_list .article_item .text_box h4 span {
+    font-size: 24px;
+  }
+}
 .blog-main .article_list .article_item .text_box ul {
   list-style: none;
-  margin-top: 30px;
+  margin-top: 15px;
   padding-left: 20px;
 }
+.blog-main .article_list .article_item .text_box ul li:last-child {
+  display: none;
+}
 .blog-main .article_list .article_item .text_box ul li {
   display: flex;
   align-items: center;
@@ -2503,15 +2650,26 @@ img {
 }
 .blog-main .article_list .article_item .text_box ul li span {
   display: block;
-  margin: 10px 0;
+  margin: 5px 0;
 }
 .blog-main .article_list .article_item .text_box ul li span img {
-  width: 120%;
+  width: 100%;
+}
+@media (max-width: 767px) {
+  .blog-main .article_list .article_item .text_box ul li span img {
+    width: 100%;
+  }
 }
 .blog-main .article_list .article_item .text_box .btn_box {
   margin-top: 10px;
   margin-left: 20px;
 }
+@media (max-width: 767px) {
+  .blog-main .article_list .article_item .text_box .btn_box {
+    position: relative;
+    margin: 20px auto;
+  }
+}
 .blog-main .article_list .article_item .text_box .btn_box .read_more {
   display: flex;
   align-items: center;
@@ -2529,6 +2687,7 @@ img {
   letter-spacing: 1px;
   font-size: 18px;
   font-family: NSJP-500;
+  cursor: pointer;
 }
 .blog-main .article_list .article_item .text_box .btn_box .read_more p {
   margin: 0;
@@ -2556,6 +2715,11 @@ img {
   left: 25px;
   border-radius: 12px;
 }
+@media (max-width: 767px) {
+  .blog-main .article_list .article_item .text_box .btn_box span {
+    left: 3.5%;
+  }
+}
 .blog-main .article_list .article_item .blog_divider {
   position: relative;
 }
@@ -2613,16 +2777,35 @@ img {
   align-items: center;
   position: relative;
 }
+@media (max-width: 767px) {
+  .blog-main .article_list .topic_list {
+    height: 100%;
+    margin-top: 80px;
+  }
+}
 .blog-main .article_list .topic_list img {
   position: absolute;
   top: -45px;
   left: 100px;
   max-width: 125px;
 }
+@media (max-width: 767px) {
+  .blog-main .article_list .topic_list img {
+    top: -50px;
+    left: 35vw;
+    max-width: 120px;
+  }
+}
 .blog-main .article_list .topic_list section {
   display: flex;
   flex-direction: column;
 }
+@media (max-width: 767px) {
+  .blog-main .article_list .topic_list section {
+    padding: 70px 0;
+    justify-content: center;
+  }
+}
 .blog-main .article_list .topic_list section h5 {
   width: 125px;
   margin: auto;
@@ -2650,6 +2833,35 @@ img {
   color: #fff;
   background-color: #649e2e;
 }
+@media (max-width: 767px) {
+  .blog-main .article_list .topic_list section div a {
+    width: 95px;
+    margin: 10px 3px;
+    box-sizing: border-box;
+  }
+}
+@media (max-width: 767px) {
+  .blog-main .article_list .topic_list main {
+    width: 600px;
+    display: flex;
+    justify-content: center;
+  }
+  .blog-main .article_list .topic_list .container {
+    display: inline-flex;
+    flex-wrap: wrap;
+    width: 500px;
+    margin: auto;
+  }
+}
+@media (max-width: 475px) {
+  .blog-main .article_list .topic_list main {
+    width: 350px;
+  }
+  .blog-main .article_list .topic_list .container {
+    width: 310px;
+    justify-content: center;
+  }
+}
 
 /* 成家知識專欄-categories end */
 /* 成家知識專欄-article start */

themes/hugo-universal-theme-master/static/css/style.bhouse.scss

@@ -172,6 +172,10 @@ img {
   opacity: 0.8;
 }
 
+.slider_loading {
+  display: none !important;
+}
+
 // .qa-banner,
 // .blog-banner,
 // .brand-banner,
@@ -1640,67 +1644,60 @@ img {
   font-size: 28px;
   color: #649e2e;
 }
-.room-planner-service-icon-box{
+.room-planner-service-icon-box {
   margin-top: 30px;
   width: 650px;
   padding: 0 20px;
   text-align: center;
   @media screen and (max-width: 767px) {
     width: 80%;
-    margin:30px auto;
+    margin: 30px auto;
     padding: 0 10px;
   }
 }
-.room-planner-service-icon-box2{
+.room-planner-service-icon-box2 {
   margin-top: 30px;
   width: 650px;
   padding: 0 20px;
   text-align: center;
-  p{
+  p {
     @media screen and (max-width: 767px) {
-      color:#2b2b2b !important;
-     
+      color: #2b2b2b !important;
     }
-    
   }
   @media screen and (max-width: 767px) {
     width: 85%;
-    margin:30px auto;
+    margin: 30px auto;
     padding: 0 10px;
-   
   }
-  .icon-radius-img04{
+  .icon-radius-img04 {
     margin-top: 10px;
     width: 68px;
     @media screen and (max-width: 767px) {
       margin-top: 15px;
       width: 41px;
     }
-
   }
-  .icon-radius-img05{
+  .icon-radius-img05 {
     margin-top: 10px;
     width: 58px;
     @media screen and (max-width: 767px) {
       margin-top: 15px;
       width: 35px;
     }
- 
   }
-  .icon-radius-img06{
+  .icon-radius-img06 {
     margin-top: 10px;
     width: 66px;
     @media screen and (max-width: 767px) {
       // margin-top: 15px;
       width: 40px;
     }
-
   }
 }
-.room-planner-service-icon-box,.room-planner-service-icon-box2{
- 
-
-  .room-planner-service-icon-box-item{
+.room-planner-service-icon-box,
+.room-planner-service-icon-box2 {
+  .room-planner-service-icon-box-item {
     @media screen and (max-width: 767px) {
       margin-top: 15px;
     }
@@ -1719,9 +1716,9 @@ img {
     height: 120px;
     margin: 0 auto;
     @media screen and (max-width: 767px) {
-     width: 72px;
-     height: 72px;
-     padding: 5px;
+      width: 72px;
+      height: 72px;
+      padding: 5px;
     }
     img {
       // margin-top: 10%;
@@ -1729,27 +1726,27 @@ img {
       height: auto;
       object-fit: cover;
     }
-    .icon-radius-img01{
+    .icon-radius-img01 {
       margin-top: 10px;
       width: 55px;
       @media screen and (max-width: 767px) {
         margin-top: 15px;
         width: 33px;
-       }
+      }
     }
-    .icon-radius-img02{
+    .icon-radius-img02 {
       margin-top: 10px;
       width: 71px;
       @media screen and (max-width: 767px) {
         width: 42px;
-       }
+      }
     }
-    .icon-radius-img03{
+    .icon-radius-img03 {
       margin-top: 10px;
       width: 56px;
       @media screen and (max-width: 767px) {
         width: 33.6px;
-       }
+      }
     }
   }
 }
@@ -1760,7 +1757,7 @@ img {
   @media screen and (max-width: 767px) {
     margin-top: 50px;
     padding: 15px 0;
-    }
+  }
   .room-planner-process-house {
     position: absolute;
     left: 100px;
@@ -1771,9 +1768,9 @@ img {
     top: -70px;
     right: 100px;
     @media screen and (max-width: 767px) {
-     top:580px;
-     right: 20px;
-     }
+      top: 580px;
+      right: 20px;
+    }
   }
   .room-planner-process-box {
     width: 60%;
@@ -1781,15 +1778,15 @@ img {
     @media screen and (max-width: 767px) {
       width: 80%;
       margin-top: 80px;
-      }
-      @media screen and (max-width: 375px) {
-        width: 90%;
-        }
+    }
+    @media screen and (max-width: 375px) {
+      width: 90%;
+    }
     .col {
       position: relative;
       @media screen and (max-width: 767px) {
-       margin-bottom: 50px;
-        }
+        margin-bottom: 50px;
+      }
     }
     .room-planner-process-icon-number {
       position: absolute;
@@ -1832,8 +1829,7 @@ img {
   @media screen and (max-width: 767px) {
     width: 100%;
     margin: 0 auto;
-
-     }
+  }
   .room-planner-service-content {
     margin-top: 50px;
     height: 188px;
@@ -1937,7 +1933,7 @@ img {
   right: 180px;
   bottom: -50px;
   @media screen and (max-width: 767px) {
-   display: none;
+    display: none;
   }
 }
 .room-planner-process-main {
@@ -2258,7 +2254,6 @@ img {
     width: 100%;
     margin: 0 auto;
   }
-
 }
 
 .blog-categories .container {
@@ -2437,11 +2432,17 @@ img {
         position: absolute;
         top: 0;
         left: 0;
+        @media (max-width: 767px) {
+          left: 10vw;
+        }
       }
       .right_img {
         position: absolute;
         top: 0;
         right: 0;
+        @media (max-width: 767px) {
+          right: 10vw;
+        }
       }
     }
     .underline {
@@ -2461,9 +2462,15 @@ img {
     justify-content: center;
     align-items: center;
     position: relative;
+    @media (max-width: 767px) {
+      padding: 100px 0 60px;
+    }
     div {
       display: flex;
       margin: 0 50px;
+      @media (max-width: 767px) {
+        margin: auto;
+      }
     }
     div:last-child {
       padding: 0 145px;
@@ -2471,6 +2478,10 @@ img {
       @media (max-width: 890px) {
         margin-top: 27px;
       }
+      @media (max-width: 767px) {
+        padding: 0;
+        margin-top: 0;
+      }
     }
     .house_img {
       position: absolute;
@@ -2481,6 +2492,15 @@ img {
         top: -8vw;
         max-width: 15%;
       }
+      @media (max-width: 767px) {
+        top: -60px;
+        left: 35%;
+        max-width: 25vw;
+      }
+      @media (max-width: 475px) {
+        left: 33%;
+        max-width: 35vw;
+      }
     }
     .ruler_img {
       position: absolute;
@@ -2510,6 +2530,9 @@ img {
     }
     section {
       margin-right: 80px;
+      @media (max-width: 767px) {
+        margin-right: 0;
+      }
       img {
         width: 100%;
         max-width: 90px;
@@ -2517,6 +2540,9 @@ img {
         object-fit: contain;
         position: relative;
         z-index: 1;
+        @media (max-width: 767px) {
+          width: auto;
+        }
       }
       span {
         display: block;
@@ -2539,8 +2565,45 @@ img {
       }
     }
   }
+  .process_mb {
+    .row {
+      img {
+        position: relative;
+        z-index: 20;
+      }
+      div {
+        position: relative;
+        justify-content: center;
+        margin-bottom: 10vw;
+      }
+      .mb_line_01 {
+        background-repeat: no-repeat;
+        background-image: url("/img/blog/mobile_line_01.png");
+        position: absolute;
+        height: 5px;
+        width: 40vw;
+        top: 32%;
+        left: 55%;
+        z-index: 10;
+      }
+      .mb_line_02 {
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-image: url("/img/blog/mobile_line_02.png");
+        position: absolute;
+        height: 125px;
+        width: 100%;
+        top: 90%;
+        left: -50%;
+        z-index: 10;
+      }
+    }
+  }
   .article_list {
     margin-top: 100px;
+    @media (max-width: 767px) {
+      margin-top: 0;
+    }
     .article_item {
       width: 65%;
       display: flex;
@@ -2550,6 +2613,13 @@ img {
       @media (max-width: 1199px) {
         width: 80%;
       }
+      @media (max-width: 991px) {
+        width: 97%;
+      }
+      @media (max-width: 767px) {
+        width: 100%;
+        margin: auto;
+      }
       .row {
         height: 500px;
         @media (max-width: 991px) {
@@ -2558,14 +2628,34 @@ img {
       }
       .img_box {
         position: relative;
+        @media (max-width: 767px) {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin: 80px auto;
+        }
         img:first-child {
           width: 100%;
+          @media (max-width: 767px) {
+            width: 75%;
+          }
         }
         img:last-child {
           width: 55px;
           position: absolute;
           left: 15vw;
           top: -10px;
+          @media (max-width: 767px) {
+            position: absolute;
+            left: 65vw;
+            width: 60px;
+          }
+        }
+      }
+      .mobile_line {
+        img {
+          width: 100%;
+          margin-bottom: -25px;
         }
       }
       .text_box {
@@ -2576,16 +2666,26 @@ img {
           color: #649e2e;
           font-size: 35px;
           font-family: NSJP-700;
+          @media (max-width: 767px) {
+            font-size: 26px;
+          }
           span {
             color: #78b142;
             font-size: 28px;
             font-family: NSJP-500;
+            @media (max-width: 767px) {
+              font-size: 24px;
+            }
           }
         }
         ul {
           list-style: none;
-          margin-top: 30px;
+          margin-top: 15px;
           padding-left: 20px;
+          // 隱藏最下方分隔線
+          li:last-child {
+            display: none;
+          }
           li {
             display: flex;
             align-items: center;
@@ -2624,9 +2724,12 @@ img {
             }
             span {
               display: block;
-              margin: 10px 0;
+              margin: 5px 0;
               img {
-                width: 120%;
+                width: 100%;
+                @media (max-width: 767px) {
+                  width: 100%;
+                }
               }
             }
           }
@@ -2634,6 +2737,10 @@ img {
         .btn_box {
           margin-top: 10px;
           margin-left: 20px;
+          @media (max-width: 767px) {
+            position: relative;
+            margin: 20px auto;
+          }
           .read_more {
             display: flex;
             align-items: center;
@@ -2651,6 +2758,7 @@ img {
             letter-spacing: 1px;
             font-size: 18px;
             font-family: NSJP-500;
+            cursor: pointer;
             p {
               margin: 0;
               margin-left: -10px;
@@ -2677,6 +2785,9 @@ img {
             bottom: -5px;
             left: 25px;
             border-radius: 12px;
+            @media (max-width: 767px) {
+              left: 3.5%;
+            }
           }
         }
       }
@@ -2729,15 +2840,28 @@ img {
       justify-content: center;
       align-items: center;
       position: relative;
+      @media (max-width: 767px) {
+        height: 100%;
+        margin-top: 80px;
+      }
       img {
         position: absolute;
         top: -45px;
         left: 100px;
         max-width: 125px;
+        @media (max-width: 767px) {
+          top: -50px;
+          left: 35vw;
+          max-width: 120px;
+        }
       }
       section {
         display: flex;
         flex-direction: column;
+        @media (max-width: 767px) {
+          padding: 70px 0;
+          justify-content: center;
+        }
         h5 {
           width: 125px;
           margin: auto;
@@ -2763,9 +2887,36 @@ img {
               color: #fff;
               background-color: #649e2e;
             }
+            @media (max-width: 767px) {
+          width: 95px;
+          margin: 10px 3px;
+          box-sizing: border-box;
+            }
           }
         }
       }
+      @media (max-width: 767px) {
+        main {
+          width: 600px;
+          display: flex;
+          justify-content: center;
+        }
+        .container {
+          display: inline-flex;
+          flex-wrap: wrap;
+          width: 500px;
+          margin: auto;
+        }
+      }
+      @media (max-width: 475px) {
+        main {
+          width: 350px;
+        }
+        .container {
+          width: 310px;
+          justify-content: center;
+        }
+      }
     }
   }
 }

themes/hugo-universal-theme-master/static/js/bhouse.js

@@ -25,14 +25,13 @@ let heightImg = [];
 
 window.onload = function() {
   console.log('onload');
-  $('.slide_single_img').each(function (i) { // jquery.each() 循環讀取所有圖片
+  $('.slide_single_img').each(function (i,array) { // jquery.each() 循環讀取所有圖片
+    
     let height = $(this).height();
     let width = $(this).width();
     let x = (height / width);
-    console.log('index', i);
     console.log('height / width = ', x);
     if (x >= 1) {
-      console.log('長圖',i);
       if (i===0) {
         return;
       }
@@ -43,6 +42,11 @@ window.onload = function() {
         "margin": 'auto',
       });
     }
+
+    if (i === imgCount-1) {
+      $('#slider-loading').addClass("slider_loading");
+      $('.style_house_sec02 .content').css("opacity", "1");
+    }
   });
   
   let heightImgIndex = [];