update dot animate

layouts/blog_main/list.html

@@ -44,7 +44,7 @@
             </span>
             <h4>預售屋客變</h4>
           </section>
-          <!-- <span class="dot"></span> -->
+          <span class="dot"></span>
           <section>
             <img src="/img/blog/icon/step02.png" alt="" data-gt-target="#blogTag_02" data-gt-duration="500"
               data-gt-offset="180">
@@ -136,7 +136,7 @@
                         <span>
                           <img src="{{ .Params.image }}" alt="">
                         </span>
-                          <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                       </a>
                     </div>
                     <div class="blog_text">
@@ -200,7 +200,7 @@
                         <span>
                           <img src="{{ .Params.image }}" alt="">
                         </span>
-                          <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                       </a>
                     </div>
                     <div class="blog_text">
@@ -273,7 +273,7 @@
                         <span>
                           <img src="{{ .Params.image }}" alt="">
                         </span>
-                          <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                       </a>
                     </div>
                     <div class="blog_text">
@@ -335,7 +335,7 @@
                         <span>
                           <img src="{{ .Params.image }}" alt="">
                         </span>
-                          <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                       </a>
                     </div>
                     <div class="blog_text">
@@ -409,7 +409,7 @@
                         <span>
                           <img src="{{ .Params.image }}" alt="">
                         </span>
-                          <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                       </a>
                     </div>
                     <div class="blog_text">
@@ -471,7 +471,7 @@
                         <span>
                           <img src="{{ .Params.image }}" alt="">
                         </span>
-                          <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                       </a>
                     </div>
                     <div class="blog_text">
@@ -544,7 +544,7 @@
                         <span>
                           <img src="{{ .Params.image }}" alt="">
                         </span>
-                          <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                       </a>
                     </div>
                     <div class="blog_text">
@@ -606,7 +606,7 @@
                         <span>
                           <img src="{{ .Params.image }}" alt="">
                         </span>
-                          <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                       </a>
                     </div>
                     <div class="blog_text">
@@ -704,7 +704,7 @@
                 </span>
                 <h4>預售屋客變</h4>
               </section>
-              <!-- <span class="dot"></span> -->
+              <span class="dot_mb"></span>
               <div class="mb_line_01"></div>
             </div>
             <div class="col-6">
@@ -810,7 +810,7 @@
                       <span>
                         <img src="{{ .Params.image }}" alt="">
                       </span>
-                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                     </a>
                   </div>
                   <div class="blog_text">
@@ -874,7 +874,7 @@
                       <span>
                         <img src="{{ .Params.image }}" alt="">
                       </span>
-                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                     </a>
                   </div>
                   <div class="blog_text">
@@ -927,7 +927,7 @@
               <h4>
                 <span>第 3 步：</span>預算準備
               </h4>
-              
+
               <ul>
                 {{ $t := $.Site.GetPage "/blog" }}
                 {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "預算準備") }}
@@ -937,7 +937,7 @@
                       <span>
                         <img src="{{ .Params.image }}" alt="">
                       </span>
-                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                     </a>
                   </div>
                   <div class="blog_text">
@@ -1000,7 +1000,7 @@
                       <span>
                         <img src="{{ .Params.image }}" alt="">
                       </span>
-                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                     </a>
                   </div>
                   <div class="blog_text">
@@ -1053,7 +1053,7 @@
               <h4>
                 <span>第 5 步：</span>空間計畫
               </h4>
-              
+
               <ul>
                 {{ $t := $.Site.GetPage "/blog" }}
                 {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "空間計畫") }}
@@ -1063,7 +1063,7 @@
                       <span>
                         <img src="{{ .Params.image }}" alt="">
                       </span>
-                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                     </a>
                   </div>
                   <div class="blog_text">
@@ -1116,7 +1116,7 @@
               <h4>
                 <span>第 6 步：</span>居家風格
               </h4>
-              
+
               <ul>
                 {{ $t := $.Site.GetPage "/blog" }}
                 {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "居家風格") }}
@@ -1126,7 +1126,7 @@
                       <span>
                         <img src="{{ .Params.image }}" alt="">
                       </span>
-                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                     </a>
                   </div>
                   <div class="blog_text">
@@ -1179,7 +1179,7 @@
               <h4>
                 <span>第 7 步：</span>家具家電
               </h4>
-              
+
               <ul>
                 {{ $t := $.Site.GetPage "/blog" }}
                 {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "家具家電") }}
@@ -1189,7 +1189,7 @@
                       <span>
                         <img src="{{ .Params.image }}" alt="">
                       </span>
-                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                     </a>
                   </div>
                   <div class="blog_text">
@@ -1242,7 +1242,7 @@
               <h4>
                 <span>第 8 步：</span>驗收入住
               </h4>
-              
+
               <ul>
                 {{ $t := $.Site.GetPage "/blog" }}
                 {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "驗收入住") }}
@@ -1252,7 +1252,7 @@
                       <span>
                         <img src="{{ .Params.image }}" alt="">
                       </span>
-                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                     </a>
                   </div>
                   <div class="blog_text">
@@ -1321,6 +1321,89 @@
 
   {{ partial "footer.html" . }}
   {{ partial "scripts.html" . }}
+
+  <script>
+    let domHeight = $('.process_mb').height();
+    let windowWidth = $(window).width();
+    let x = windowWidth / 2.4;
+    let y = domHeight * (110 / 693.38);
+    const dotDom = document.querySelector(".dot_mb");
+
+    function dotAnimate(x, y) {
+      const dotPosition = [
+        {
+          transform: 'translate(0, 5px)'
+        },
+        {
+          transform: `translate(${x}px, 5px)`
+        },
+        , {
+          transform: `translate(${x}px, ${y}px)`
+        }
+        , {
+          transform: `translate(-13px, ${y}px)`
+        }
+        , {
+          // (110 + 80) / 110
+          transform: `translate(-13px, ${y * 1.727}px)`
+        }
+        , {
+          transform: `translate(${x}px,  ${y * 1.727}px)`
+        }
+        , {
+          // (190 + 110) / 110
+          transform: `translate(${x}px,  ${y * 2.68}px)`
+        }
+        , {
+          transform: `translate(-13px, ${y * 2.68}px)`
+        }
+        , {
+          // (275 + 110) / 110
+          transform: `translate(-13px, ${y * 3.4}px)`
+        }
+        , {
+          transform: `translate(${x}px, ${y * 3.4}px)`
+        }
+        , {
+          // (380 + 110) / 110
+          transform: `translate(${x}px, ${y * 4.35}px)`
+        }
+        , {
+          transform: `translate(-13px, ${y * 4.35}px)`
+        }
+        , {
+          // (550 + 110) / 110
+          transform: `translate(-13px, ${y * 5.08}px)`
+        }
+        , {
+          transform: `translate(${x}px, ${y * 5.08}px)`
+        }
+      ];
+
+      // 動畫時間
+      const dotTiming = {
+        duration: 8000,
+        iterations: Infinity
+      }
+      dotDom.animate(dotPosition, dotTiming);
+    }
+
+    // 於手機尺寸出現動畫
+    if ($(window).width() < 576) {
+      dotAnimate(x, y);
+    }
+
+    addEventListener('resize', (event) => {
+      if ($(window).width() < 576) {
+        x = $(window).width() / 2.4;
+        y = domHeight * (110 / 693.38);
+        // 縮放畫面時重新取得x、y軸
+        setTimeout(() => {
+          dotAnimate(x, y);
+        }, 1000);
+      }
+    });
+  </script>
 </body>
 
 </html>

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

@@ -19,6 +19,14 @@
 }
 
 /* 共通樣式 start */
+.zz-sleeper {
+  width: 20px !important;
+  height: 20px !important;
+  border-radius: 100%;
+  background: #7e6950;
+  color: #fff;
+}
+
 a {
   color: #006e9a;
   text-decoration: none;
@@ -247,182 +255,6 @@ img {
     transform: translate(490px, 193px);
   }
 }
-@-webkit-keyframes dot_414px {
-  0% {
-    transform: translate(0, 8px);
-  }
-  10% {
-    transform: translate(170px, 8px);
-  }
-  15% {
-    transform: translate(170px, 110px);
-  }
-  25% {
-    transform: translate(-10px, 110px);
-  }
-  30% {
-    transform: translate(-10px, 190px);
-  }
-  40% {
-    transform: translate(170px, 190px);
-  }
-  45% {
-    transform: translate(170px, 290px);
-  }
-  55% {
-    transform: translate(-10px, 290px);
-  }
-  60% {
-    transform: translate(-10px, 370px);
-  }
-  70% {
-    transform: translate(170px, 370px);
-  }
-  75% {
-    transform: translate(170px, 470px);
-  }
-  85% {
-    transform: translate(-10px, 470px);
-  }
-  90% {
-    transform: translate(-10px, 550px);
-  }
-  100% {
-    transform: translate(170px, 550px);
-  }
-}
-@keyframes dot_414px {
-  0% {
-    transform: translate(0, 8px);
-  }
-  10% {
-    transform: translate(170px, 8px);
-  }
-  15% {
-    transform: translate(170px, 110px);
-  }
-  25% {
-    transform: translate(-10px, 110px);
-  }
-  30% {
-    transform: translate(-10px, 190px);
-  }
-  40% {
-    transform: translate(170px, 190px);
-  }
-  45% {
-    transform: translate(170px, 290px);
-  }
-  55% {
-    transform: translate(-10px, 290px);
-  }
-  60% {
-    transform: translate(-10px, 370px);
-  }
-  70% {
-    transform: translate(170px, 370px);
-  }
-  75% {
-    transform: translate(170px, 470px);
-  }
-  85% {
-    transform: translate(-10px, 470px);
-  }
-  90% {
-    transform: translate(-10px, 550px);
-  }
-  100% {
-    transform: translate(170px, 550px);
-  }
-}
-@-webkit-keyframes dot_375px {
-  0% {
-    transform: translate(0, 8px);
-  }
-  10% {
-    transform: translate(155px, 8px);
-  }
-  15% {
-    transform: translate(155px, 108px);
-  }
-  25% {
-    transform: translate(-10px, 108px);
-  }
-  30% {
-    transform: translate(-10px, 185px);
-  }
-  40% {
-    transform: translate(155px, 185px);
-  }
-  45% {
-    transform: translate(155px, 285px);
-  }
-  55% {
-    transform: translate(-10px, 285px);
-  }
-  60% {
-    transform: translate(-10px, 360px);
-  }
-  70% {
-    transform: translate(155px, 360px);
-  }
-  75% {
-    transform: translate(155px, 460px);
-  }
-  85% {
-    transform: translate(-10px, 460px);
-  }
-  90% {
-    transform: translate(-10px, 535px);
-  }
-  100% {
-    transform: translate(155px, 535px);
-  }
-}
-@keyframes dot_375px {
-  0% {
-    transform: translate(0, 8px);
-  }
-  10% {
-    transform: translate(155px, 8px);
-  }
-  15% {
-    transform: translate(155px, 108px);
-  }
-  25% {
-    transform: translate(-10px, 108px);
-  }
-  30% {
-    transform: translate(-10px, 185px);
-  }
-  40% {
-    transform: translate(155px, 185px);
-  }
-  45% {
-    transform: translate(155px, 285px);
-  }
-  55% {
-    transform: translate(-10px, 285px);
-  }
-  60% {
-    transform: translate(-10px, 360px);
-  }
-  70% {
-    transform: translate(155px, 360px);
-  }
-  75% {
-    transform: translate(155px, 460px);
-  }
-  85% {
-    transform: translate(-10px, 460px);
-  }
-  90% {
-    transform: translate(-10px, 535px);
-  }
-  100% {
-    transform: translate(155px, 535px);
-  }
-}
 /* 共通樣式 end */
 /* header start */
 .navbar {
@@ -1438,7 +1270,6 @@ input[type=search]::-webkit-search-cancel-button {
 .bhouseweb_loc_sec02_card .slide_item_text {
   background-color: rgba(128, 143, 76, 0.8);
   padding: 15px;
-  margin-top: 60px;
 }
 
 .bhouseweb_loc_sec02_card .slide_item_text p {
@@ -1626,6 +1457,8 @@ input[type=search]::-webkit-search-cancel-button {
   }
 }
 .style_house_sec02_slide .slick-prev {
+  width: 50px;
+  height: 50px;
   position: absolute;
   top: 38%;
   left: 10px;
@@ -1640,8 +1473,10 @@ input[type=search]::-webkit-search-cancel-button {
   display: none !important;
 }
 .style_house_sec02_slide .slick-next {
+  width: 50px;
+  height: 50px;
   position: absolute;
-  right: 40px;
+  right: 10px;
   top: 38%;
   z-index: 1;
 }
@@ -1659,12 +1494,7 @@ input[type=search]::-webkit-search-cancel-button {
 }
 @media screen and (max-width: 1199px) {
   .style_house_sec02 .slide-box {
-    height: 60vw;
-  }
-}
-@media screen and (max-width: 767px) {
-  .style_house_sec02 .slide-box {
-    height: 80vw;
+    height: auto;
   }
 }
 @media screen and (max-width: 576px) {
@@ -3828,6 +3658,7 @@ input[type=search]::-webkit-search-cancel-button {
   right: 48%;
   max-width: 700px;
   height: 100%;
+  z-index: 10;
 }
 @media (max-width: 890px) {
   .blog-main .process .line_02 {
@@ -3835,10 +3666,15 @@ input[type=search]::-webkit-search-cancel-button {
     top: 67%;
   }
 }
-.blog-main .process .dot {
+.blog-main .process .dot,
+.blog-main .process .dot_mb {
   position: absolute;
 }
-.blog-main .process .dot::before {
+.blog-main .process .dot_mb {
+  z-index: 20;
+}
+.blog-main .process .dot::before,
+.blog-main .process .dot_mb::before {
   content: "\a";
   width: 10px;
   height: 10px;
@@ -3847,36 +3683,26 @@ input[type=search]::-webkit-search-cancel-button {
   display: inline-block;
   background: #649e2e;
   position: absolute;
-  z-index: 0;
+  z-index: 15;
   top: 34px;
   left: 0;
   -webkit-animation: dot 8s infinite;
           animation: dot 8s infinite;
 }
 @media (max-width: 892px) {
-  .blog-main .process .dot::before {
+  .blog-main .process .dot::before,
+.blog-main .process .dot_mb::before {
     -webkit-animation: none;
             animation: none;
   }
 }
 @media (width: 768px) {
-  .blog-main .process .dot::before {
+  .blog-main .process .dot::before,
+.blog-main .process .dot_mb::before {
     -webkit-animation: dot_768px 8s infinite;
             animation: dot_768px 8s infinite;
   }
 }
-@media (width: 414px) {
-  .blog-main .process .dot::before {
-    -webkit-animation: dot_414px 8s infinite;
-            animation: dot_414px 8s infinite;
-  }
-}
-@media (width: 375px) {
-  .blog-main .process .dot::before {
-    -webkit-animation: dot_375px 8s infinite;
-            animation: dot_375px 8s infinite;
-  }
-}
 .blog-main .process section {
   margin-right: 80px;
 }
@@ -3892,7 +3718,7 @@ input[type=search]::-webkit-search-cancel-button {
   -o-object-fit: contain;
      object-fit: contain;
   position: relative;
-  z-index: 1;
+  z-index: 20;
   cursor: pointer;
 }
 @media (max-width: 767px) {
@@ -3910,7 +3736,7 @@ input[type=search]::-webkit-search-cancel-button {
   position: absolute;
   top: -110px;
   left: 65px;
-  z-index: 10;
+  z-index: 25;
   -o-object-fit: contain;
      object-fit: contain;
 }
@@ -3922,7 +3748,7 @@ input[type=search]::-webkit-search-cancel-button {
 }
 .blog-main .process_mb .row img {
   position: relative;
-  z-index: 20;
+  z-index: 25;
 }
 .blog-main .process_mb .row div {
   position: relative;
@@ -4504,6 +4330,13 @@ input[type=search]::-webkit-search-cancel-button {
   width: 35px;
 }
 
+.blog_article h1 {
+  color: #4c660b;
+  font-weight: 900;
+  font-size: 1.75rem;
+  margin-bottom: 50px;
+}
+
 .blog_article h2 {
   margin-top: 30px;
   margin-bottom: 30px;
@@ -4633,7 +4466,8 @@ input[type=search]::-webkit-search-cancel-button {
   margin-top: 10px;
 }
 .news-content h2 {
-  margin-bottom: 30px;
+  margin-top: 3rem;
+  margin-bottom: 15px;
   font-size: 20px;
   font-weight: bold;
   font-weight: 700;

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

@@ -25,6 +25,15 @@ $desktop: 1025px;
 $table: 1024px;
 $moblie: 767px;
 
+.zz-sleeper {
+  width: 20px !important;
+  height: 20px !important;
+  // background: #000;
+  border-radius: 100%;
+  background: #7e6950;
+  color: #fff;
+}
+
 a {
   color: #006e9a;
   text-decoration: none;
@@ -215,95 +224,50 @@ img {
   }
 }
 
-@keyframes dot_414px {
-  0% {
-    transform: translate(0, 8px);
-  }
-  10% {
-    transform: translate(170px, 8px);
-  }
-  15% {
-    transform: translate(170px, 110px);
-  }
-  25% {
-    transform: translate(-10px, 110px);
-  }
-  30% {
-    transform: translate(-10px, 190px);
-  }
-  40% {
-    transform: translate(170px, 190px);
-  }
-  45% {
-    transform: translate(170px, 290px);
-  }
-  55% {
-    transform: translate(-10px, 290px);
-  }
-  60% {
-    transform: translate(-10px, 370px);
-  }
-  70% {
-    transform: translate(170px, 370px);
-  }
-  75% {
-    transform: translate(170px, 470px);
-  }
-  85% {
-    transform: translate(-10px, 470px);
-  }
-  90% {
-    transform: translate(-10px, 550px);
-  }
-  100% {
-    transform: translate(170px, 550px);
-  }
-}
-
-@keyframes dot_375px {
-  0% {
-    transform: translate(0, 8px);
-  }
-  10% {
-    transform: translate(155px, 8px);
-  }
-  15% {
-    transform: translate(155px, 108px);
-  }
-  25% {
-    transform: translate(-10px, 108px);
-  }
-  30% {
-    transform: translate(-10px, 185px);
-  }
-  40% {
-    transform: translate(155px, 185px);
-  }
-  45% {
-    transform: translate(155px, 285px);
-  }
-  55% {
-    transform: translate(-10px, 285px);
-  }
-  60% {
-    transform: translate(-10px, 360px);
-  }
-  70% {
-    transform: translate(155px, 360px);
-  }
-  75% {
-    transform: translate(155px, 460px);
-  }
-  85% {
-    transform: translate(-10px, 460px);
-  }
-  90% {
-    transform: translate(-10px, 535px);
-  }
-  100% {
-    transform: translate(155px, 535px);
-  }
-}
+// @keyframes dot_375px {
+//   0% {
+//     transform: translate(0, 8px);
+//   }
+//   10% {
+//     transform: translate(155px, 8px);
+//   }
+//   15% {
+//     transform: translate(155px, 108px);
+//   }
+//   25% {
+//     transform: translate(-10px, 108px);
+//   }
+//   30% {
+//     transform: translate(-10px, 185px);
+//   }
+//   40% {
+//     transform: translate(155px, 185px);
+//   }
+//   45% {
+//     transform: translate(155px, 285px);
+//   }
+//   55% {
+//     transform: translate(-10px, 285px);
+//   }
+//   60% {
+//     transform: translate(-10px, 360px);
+//   }
+//   70% {
+//     transform: translate(155px, 360px);
+//   }
+//   75% {
+//     transform: translate(155px, 460px);
+//   }
+//   85% {
+//     transform: translate(-10px, 460px);
+//   }
+//   90% {
+//     transform: translate(-10px, 535px);
+//   }
+//   100% {
+//     transform: translate(155px, 535px);
+//   }
+// }
 
 /* 共通樣式 end */
 
@@ -1413,7 +1377,6 @@ input[type="search"]::-webkit-search-cancel-button {
 .bhouseweb_loc_sec02_card .slide_item_text {
   background-color: rgba(128, 143, 76, 0.8);
   padding: 15px;
-  margin-top: 60px;
 }
 
 .bhouseweb_loc_sec02_card .slide_item_text p {
@@ -1611,6 +1574,8 @@ input[type="search"]::-webkit-search-cancel-button {
 }
 .style_house_sec02_slide {
   .slick-prev {
+    width: 50px;
+    height: 50px;
     position: absolute;
     top: 38%;
     left: 10px;
@@ -1625,8 +1590,10 @@ input[type="search"]::-webkit-search-cancel-button {
     display: none !important;
   }
   .slick-next {
+    width: 50px;
+    height: 50px;
     position: absolute;
-    right: 40px;
+    right: 10px;
     top: 38%;
     z-index: 1;
   }
@@ -1655,11 +1622,11 @@ input[type="search"]::-webkit-search-cancel-button {
   flex-direction: column;
   justify-content: center;
   @media screen and (max-width: 1199px) {
-    height: 60vw;
-  }
-  @media screen and (max-width: 767px) {
-    height: 80vw;
+    height: auto;
   }
+  // @media screen and (max-width: 767px) {
+  //   height: 80vw;
+  // }
   @media screen and (max-width: 576px) {
     height: 100vw;
   }
@@ -3582,15 +3549,21 @@ input[type="search"]::-webkit-search-cancel-button {
       right: 48%;
       max-width: 700px;
       height: 100%;
+      z-index: 10;
       @media (max-width: 890px) {
         width: 600px;
         top: 67%;
       }
     }
-    .dot {
+    .dot,
+    .dot_mb {
       position: absolute;
     }
-    .dot::before {
+    .dot_mb {
+      z-index: 20;
+    }
+    .dot::before,
+    .dot_mb::before {
       content: "\A";
       width: 10px;
       height: 10px;
@@ -3599,7 +3572,7 @@ input[type="search"]::-webkit-search-cancel-button {
       display: inline-block;
       background: #649e2e;
       position: absolute;
-      z-index: 0;
+      z-index: 15;
       top: 34px;
       left: 0;
       animation: dot 8s infinite;
@@ -3609,12 +3582,6 @@ input[type="search"]::-webkit-search-cancel-button {
       @media (width: 768px) {
         animation: dot_768px 8s infinite;
       }
-      @media (width: 414px) {
-        animation: dot_414px 8s infinite;
-      }
-      @media (width: 375px) {
-        animation: dot_375px 8s infinite;
-      }
     }
     section {
       margin-right: 80px;
@@ -3627,7 +3594,7 @@ input[type="search"]::-webkit-search-cancel-button {
         height: 90px;
         object-fit: contain;
         position: relative;
-        z-index: 1;
+        z-index: 20;
         cursor: pointer;
         @media (max-width: 767px) {
           width: auto;
@@ -3642,7 +3609,7 @@ input[type="search"]::-webkit-search-cancel-button {
           position: absolute;
           top: -110px;
           left: 65px;
-          z-index: 10;
+          z-index: 25;
           object-fit: contain;
         }
       }
@@ -3658,7 +3625,7 @@ input[type="search"]::-webkit-search-cancel-button {
     .row {
       img {
         position: relative;
-        z-index: 20;
+        z-index: 25;
       }
       div {
         position: relative;
@@ -4236,6 +4203,13 @@ input[type="search"]::-webkit-search-cancel-button {
 //   letter-spacing: 2px;
 // }
 
+.blog_article h1 {
+  color: #4c660b;
+  font-weight: 900;
+  font-size: 1.75rem;
+  margin-bottom: 50px;
+}
+
 .blog_article h2 {
   margin-top: 30px;
   margin-bottom: 30px;
@@ -4377,7 +4351,8 @@ input[type="search"]::-webkit-search-cancel-button {
     margin-top: 10px;
   }
   h2 {
-    margin-bottom: 30px;
+    margin-top: 3rem;
+    margin-bottom: 15px;
     font-size: 20px;
     font-weight: bold;
     font-weight: 700;
@@ -5136,8 +5111,8 @@ input[type="search"]::-webkit-search-cancel-button {
   color: #68686b;
   font-weight: 600;
   span:last-child {
-   color: #000;
-   cursor: default;
+    color: #000;
+    cursor: default;
   }
 }
 
@@ -5203,11 +5178,11 @@ input[type="search"]::-webkit-search-cancel-button {
 }
 
 #anchor-tab {
-    list-style: none;
-    li {
-      margin: 0 0.8rem;
-      cursor: pointer;
-    }
+  list-style: none;
+  li {
+    margin: 0 0.8rem;
+    cursor: pointer;
+  }
 }
 
 // #pills-tab .nav-item-link {
@@ -5234,9 +5209,9 @@ input[type="search"]::-webkit-search-cancel-button {
 @media screen and (max-width: 767px) {
   .store-tab #pills-tab .nav-item-link,
   #anchor-tab {
-   li {
-    margin: 0 0.5rem;
-   }
+    li {
+      margin: 0 0.5rem;
+    }
   }
 }
 

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

@@ -26,7 +26,6 @@ let heightImg = [];
 window.onload = function () {
   console.log('onload');
   $('.slide_single_img').each(function (i, array) { // jquery.each() 循環讀取所有圖片
-
     let height = $(this).height();
     let width = $(this).width();
     let x = (height / width);