update collection slider

layouts/blog_main/list.html

@@ -18,7 +18,7 @@
         <section class="text-box">
           <p class="title" data-aos="fade-in" data-aos-duration="1000">買了房然後呢？</p>
           <span class="underline"></span>
-          <div data-aos="fade-in" data-aos-duration="3000">
+          <div data-aos="fade-in" data-aos-duration="2000">
             <p>
               最完整的成家知識地圖，一步步指導你從零開始完成 住宅設計、裝修裝潢、家具規劃，陪你美好成家！
             </p>
@@ -29,10 +29,10 @@
       </div>
 
       <div class="process">
-        <img class="house_img" src="/img/blog/house.png" alt="" data-aos="fade-in" data-aos-duration="1000">
-        <img class="star_green" src="/img/blog/star_green.png" alt="" data-aos="fade-in" data-aos-duration="1000">
-        <img class="star_yellow" src="/img/blog/star_yellow.png" alt="" data-aos="fade-in" data-aos-duration="1000">
-        <img class="ruler_img" src="/img/blog/ruler2.png" alt="" data-aos="fade-in" data-aos-duration="1000">
+        <img class="house_img" src="/img/blog/house.png" alt="" data-aos="fade-in" data-aos-duration="3000">
+        <img class="star_green" src="/img/blog/star_green.png" alt="" data-aos="fade-in" data-aos-duration="3000">
+        <img class="star_yellow" src="/img/blog/star_yellow.png" alt="" data-aos="fade-in" data-aos-duration="3000">
+        <img class="ruler_img" src="/img/blog/ruler2.png" alt="" data-aos="fade-in" data-aos-duration="3000">
         <img class="line_01" src="/img/blog/Vector01.png" alt="">
         <!-- <span class="dot"></span> -->
 
@@ -134,8 +134,10 @@
                   <li>
                     <div class="blog_img">
                       <a href="{{ .Params.url }}">
-                        <img src="{{ .Params.image }}" alt="">
-                        <img src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                        <span>
+                          <img src="{{ .Params.image }}" alt="">
+                        </span>
+                          <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                       </a>
                     </div>
                     <div class="blog_text">
@@ -196,8 +198,10 @@
                   <li>
                     <div class="blog_img">
                       <a href="{{ .Params.url }}">
-                        <img src="{{ .Params.image }}" alt="">
-                        <img src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                        <span>
+                          <img src="{{ .Params.image }}" alt="">
+                        </span>
+                          <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                       </a>
                     </div>
                     <div class="blog_text">
@@ -267,8 +271,10 @@
                   <li>
                     <div class="blog_img">
                       <a href="{{ .Params.url }}">
-                        <img src="{{ .Params.image }}" alt="">
-                        <img src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                        <span>
+                          <img src="{{ .Params.image }}" alt="">
+                        </span>
+                          <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                       </a>
                     </div>
                     <div class="blog_text">
@@ -327,8 +333,10 @@
                   <li>
                     <div class="blog_img">
                       <a href="{{ .Params.url }}">
-                        <img src="{{ .Params.image }}" alt="">
-                        <img src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                        <span>
+                          <img src="{{ .Params.image }}" alt="">
+                        </span>
+                          <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                       </a>
                     </div>
                     <div class="blog_text">
@@ -399,8 +407,10 @@
                   <li>
                     <div class="blog_img">
                       <a href="{{ .Params.url }}">
-                        <img src="{{ .Params.image }}" alt="">
-                        <img src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                        <span>
+                          <img src="{{ .Params.image }}" alt="">
+                        </span>
+                          <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                       </a>
                     </div>
                     <div class="blog_text">
@@ -459,8 +469,10 @@
                   <li>
                     <div class="blog_img">
                       <a href="{{ .Params.url }}">
-                        <img src="{{ .Params.image }}" alt="">
-                        <img src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                        <span>
+                          <img src="{{ .Params.image }}" alt="">
+                        </span>
+                          <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                       </a>
                     </div>
                     <div class="blog_text">
@@ -530,8 +542,10 @@
                   <li>
                     <div class="blog_img">
                       <a href="{{ .Params.url }}">
-                        <img src="{{ .Params.image }}" alt="">
-                        <img src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                        <span>
+                          <img src="{{ .Params.image }}" alt="">
+                        </span>
+                          <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                       </a>
                     </div>
                     <div class="blog_text">
@@ -590,8 +604,10 @@
                   <li>
                     <div class="blog_img">
                       <a href="{{ .Params.url }}">
-                        <img src="{{ .Params.image }}" alt="">
-                        <img src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                        <span>
+                          <img src="{{ .Params.image }}" alt="">
+                        </span>
+                          <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                       </a>
                     </div>
                     <div class="blog_text">
@@ -663,7 +679,7 @@
         <section class="text-box">
           <p class="title" data-aos="fade-in" data-aos-duration="1000">買了房然後呢？</p>
           <span class="underline"></span>
-          <div data-aos="fade-in" data-aos-duration="3000">
+          <div data-aos="fade-in" data-aos-duration="2000">
             <p>
               最完整的成家知識地圖，<br>一步步指導你從零開始完成<br>住宅設計、裝修裝潢、家具規劃，<br>陪你美好成家！
             </p>
@@ -674,9 +690,9 @@
       </div>
 
       <div class="process">
-        <img class="house_img" src="/img/blog/house.png" alt="" data-aos="fade-in" data-aos-duration="1000">
-        <img class="star_green" src="/img/blog/star_green.png" alt="" data-aos="fade-in" data-aos-duration="1000">
-        <img class="star_yellow" src="/img/blog/star_yellow.png" alt="" data-aos="fade-in" data-aos-duration="1000">
+        <img class="house_img" src="/img/blog/house.png" alt="" data-aos="fade-in" data-aos-duration="3000">
+        <img class="star_green" src="/img/blog/star_green.png" alt="" data-aos="fade-in" data-aos-duration="3000">
+        <img class="star_yellow" src="/img/blog/star_yellow.png" alt="" data-aos="fade-in" data-aos-duration="3000">
 
         <div class="container process_mb">
           <div class="row w-100">
@@ -792,8 +808,10 @@
                 <li>
                   <div class="blog_img">
                     <a href="{{ .Params.url }}">
-                      <img src="{{ .Params.image }}" alt="">
-                      <img src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      <span>
+                        <img src="{{ .Params.image }}" alt="">
+                      </span>
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                     </a>
                   </div>
                   <div class="blog_text">
@@ -809,8 +827,8 @@
                   </div>
                 </li>
                 <li>
-                  <span>
-                    <img src="/img/blog/line.png" alt="">
+                  <span class="divider-mb">
+                    <img src="/img/blog/line_mb.svg" alt="">
                   </span>
                 </li>
                 {{ end }}
@@ -854,8 +872,10 @@
                 <li>
                   <div class="blog_img">
                     <a href="{{ .Params.url }}">
-                      <img src="{{ .Params.image }}" alt="">
-                      <img src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      <span>
+                        <img src="{{ .Params.image }}" alt="">
+                      </span>
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                     </a>
                   </div>
                   <div class="blog_text">
@@ -871,8 +891,8 @@
                   </div>
                 </li>
                 <li>
-                  <span>
-                    <img src="/img/blog/line.png" alt="">
+                  <span class="divider-mb">
+                    <img src="/img/blog/line_mb.svg" alt="">
                   </span>
                 </li>
                 {{ end }}
@@ -915,8 +935,10 @@
                 <li>
                   <div class="blog_img">
                     <a href="{{ .Params.url }}">
-                      <img src="{{ .Params.image }}" alt="">
-                      <img src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      <span>
+                        <img src="{{ .Params.image }}" alt="">
+                      </span>
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                     </a>
                   </div>
                   <div class="blog_text">
@@ -932,8 +954,8 @@
                   </div>
                 </li>
                 <li>
-                  <span>
-                    <img src="/img/blog/line.png" alt="">
+                  <span class="divider-mb">
+                    <img src="/img/blog/line_mb.svg" alt="">
                   </span>
                 </li>
                 {{ end }}
@@ -976,8 +998,10 @@
                 <li>
                   <div class="blog_img">
                     <a href="{{ .Params.url }}">
-                      <img src="{{ .Params.image }}" alt="">
-                      <img src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      <span>
+                        <img src="{{ .Params.image }}" alt="">
+                      </span>
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                     </a>
                   </div>
                   <div class="blog_text">
@@ -993,8 +1017,8 @@
                   </div>
                 </li>
                 <li>
-                  <span>
-                    <img src="/img/blog/line.png" alt="">
+                  <span class="divider-mb">
+                    <img src="/img/blog/line_mb.svg" alt="">
                   </span>
                 </li>
                 {{ end }}
@@ -1037,8 +1061,10 @@
                 <li>
                   <div class="blog_img">
                     <a href="{{ .Params.url }}">
-                      <img src="{{ .Params.image }}" alt="">
-                      <img src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      <span>
+                        <img src="{{ .Params.image }}" alt="">
+                      </span>
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                     </a>
                   </div>
                   <div class="blog_text">
@@ -1054,8 +1080,8 @@
                   </div>
                 </li>
                 <li>
-                  <span>
-                    <img src="/img/blog/line.png" alt="">
+                  <span class="divider-mb">
+                    <img src="/img/blog/line_mb.svg" alt="">
                   </span>
                 </li>
                 {{ end }}
@@ -1098,8 +1124,10 @@
                 <li>
                   <div class="blog_img">
                     <a href="{{ .Params.url }}">
-                      <img src="{{ .Params.image }}" alt="">
-                      <img src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      <span>
+                        <img src="{{ .Params.image }}" alt="">
+                      </span>
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                     </a>
                   </div>
                   <div class="blog_text">
@@ -1115,8 +1143,8 @@
                   </div>
                 </li>
                 <li>
-                  <span>
-                    <img src="/img/blog/line.png" alt="">
+                  <span class="divider-mb">
+                    <img src="/img/blog/line_mb.svg" alt="">
                   </span>
                 </li>
                 {{ end }}
@@ -1159,8 +1187,10 @@
                 <li>
                   <div class="blog_img">
                     <a href="{{ .Params.url }}">
-                      <img src="{{ .Params.image }}" alt="">
-                      <img src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      <span>
+                        <img src="{{ .Params.image }}" alt="">
+                      </span>
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                     </a>
                   </div>
                   <div class="blog_text">
@@ -1176,8 +1206,8 @@
                   </div>
                 </li>
                 <li>
-                  <span>
-                    <img src="/img/blog/line.png" alt="">
+                  <span class="divider-mb">
+                    <img src="/img/blog/line_mb.svg" alt="">
                   </span>
                 </li>
                 {{ end }}
@@ -1220,8 +1250,10 @@
                 <li>
                   <div class="blog_img">
                     <a href="{{ .Params.url }}">
-                      <img src="{{ .Params.image }}" alt="">
-                      <img src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      <span>
+                        <img src="{{ .Params.image }}" alt="">
+                      </span>
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
                     </a>
                   </div>
                   <div class="blog_text">
@@ -1237,8 +1269,8 @@
                   </div>
                 </li>
                 <li>
-                  <span>
-                    <img src="/img/blog/line.png" alt="">
+                  <span class="divider-mb">
+                    <img src="/img/blog/line_mb.svg" alt="">
                   </span>
                 </li>
                 {{ end }}

layouts/collection/single.html

@@ -117,19 +117,16 @@
             </div>
         </div>
         <div class="content" style="opacity: 0;">
-            <div style="background-color: #ccc;">
-                <div class="slider slider-for style_house_sec02_slide m-auto" style="max-width: 600px">
+                <div class="slider slider-for style_house_sec02_slide m-auto">
                     {{ range .Params.collection_slider }}
                     <div class="slide-box">
                         <img class="img-fluid slide_single_img" src="./{{ .slide_img }}" alt="">
                         <div class="slide_item_text">
                             <p> {{ .slide_text }} </p>
-                            <!-- <p>圖說NotoJPMedium14級字行距28pt</p> -->
                         </div>
                     </div>
                     {{ end }}
                 </div>
-            </div>
             <div class="slider slider-nav">
                 {{ range .Params.collection_slider }}
                 <div class="sec02_slide_item">

static/img/blog/line_mb.svg

@@ -0,0 +1,39 @@
+<svg width="327" height="3" viewBox="0 0 327 3" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="1.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="10.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="19.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="28.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="37.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="46.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="55.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="64.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="73.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="82.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="91.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="100.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="109.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="118.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="127.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="136.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="145.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="154.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="163.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="172.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="181.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="190.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="199.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="208.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="217.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="226.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="235.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="244.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="253.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="262.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="271.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="280.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="289.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="298.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="307.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="316.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="325.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+</svg>

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

@@ -1438,6 +1438,7 @@ 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 {
@@ -1449,7 +1450,7 @@ input[type=search]::-webkit-search-cancel-button {
 .img-height-vw {
   -o-object-fit: contain;
      object-fit: contain;
-  height: 35vw !important;
+  height: 500px !important;
 }
 @media (max-width: 767px) {
   .img-height-vw {
@@ -1610,40 +1611,24 @@ input[type=search]::-webkit-search-cancel-button {
   }
 }
 .style_house_sec02_slide .slick-prev {
-  top: 50%;
-  background: #fff;
-  left: 25px;
-  z-index: 1;
-  padding-top: 2.5px;
-  background: #fff;
-  width: 32px;
-  height: 32px;
-  right: 25px;
+  position: absolute;
+  top: 45%;
+  left: 10px;
   z-index: 1;
-  border-radius: 100%;
 }
 .style_house_sec02_slide .slick-prev:before {
-  font-family: "slick";
-  font-size: 32px;
-  line-height: 1;
-  color: rgba(0, 0, 0, 0.54);
+  content: "" !important;
+  display: none !important;
 }
 .style_house_sec02_slide .slick-next:before {
-  content: "→";
-  font-family: "slick";
-  font-size: 32px;
-  line-height: 1;
-  color: rgba(0, 0, 0, 0.54);
+  content: "" !important;
+  display: none !important;
 }
 .style_house_sec02_slide .slick-next {
-  top: 50%;
-  padding-top: 2.5px;
-  background: #fff;
-  width: 32px;
-  height: 32px;
-  right: 25px;
+  position: absolute;
+  right: 35px;
+  top: 45%;
   z-index: 1;
-  border-radius: 100%;
 }
 
 .style_house_sec02 .slider-nav {
@@ -3845,7 +3830,7 @@ input[type=search]::-webkit-search-cancel-button {
   margin: 0 10px;
   border-radius: 50%;
   display: inline-block;
-  background: #649E2E;
+  background: #649e2e;
   position: absolute;
   z-index: 0;
   top: 34px;
@@ -4075,15 +4060,41 @@ input[type=search]::-webkit-search-cancel-button {
   display: flex;
   align-items: center;
 }
+@media (max-width: 767px) {
+  .blog-main .article_list .article_item .text_box ul li {
+    align-items: flex-start;
+  }
+}
+.blog-main .article_list .article_item .text_box ul li:hover .blog_text h5 a {
+  background: linear-gradient(to bottom, #fff 50%, #ffe55f 50%);
+}
+.blog-main .article_list .article_item .text_box ul li:hover .blog_img span img {
+  transform: scale(1.1);
+}
 .blog-main .article_list .article_item .text_box ul li .blog_img {
   position: relative;
 }
+.blog-main .article_list .article_item .text_box ul li .blog_img span {
+  display: block;
+  width: 120px;
+  height: 80px;
+  overflow: hidden;
+  border-radius: 10px;
+}
+.blog-main .article_list .article_item .text_box ul li .blog_img span img {
+  width: 120px;
+  height: 80px;
+  border-radius: 10px;
+}
+.blog-main .article_list .article_item .text_box ul li .blog_img img {
+  transition: all 0.5s;
+}
 .blog-main .article_list .article_item .text_box ul li .blog_img img:first-child {
   width: 120px;
   height: 80px;
   border-radius: 10px;
 }
-.blog-main .article_list .article_item .text_box ul li .blog_img img:last-child {
+.blog-main .article_list .article_item .text_box ul li .blog_img .point-img {
   position: absolute;
   width: 50px;
   left: -20px;
@@ -4098,9 +4109,6 @@ input[type=search]::-webkit-search-cancel-button {
   font-weight: 500;
   color: #000;
 }
-.blog-main .article_list .article_item .text_box ul li .blog_text h5 a:hover {
-  background: linear-gradient(to bottom, #fff 50%, #ffe55f 50%);
-}
 .blog-main .article_list .article_item .text_box ul li .blog_text p {
   margin: 0;
   width: 100%;
@@ -4120,6 +4128,19 @@ input[type=search]::-webkit-search-cancel-button {
     width: 100%;
   }
 }
+@media (max-width: 767px) {
+  .blog-main .article_list .article_item .text_box ul li .divider-mb {
+    margin: 20px 0;
+  }
+  .blog-main .article_list .article_item .text_box ul li .divider-mb img {
+    width: 86vw;
+  }
+}
+@media (max-width: 576px) {
+  .blog-main .article_list .article_item .text_box ul li .divider-mb img {
+    width: 83vw;
+  }
+}
 .blog-main .article_list .article_item .text_box .btn_box {
   margin-top: 10px;
   margin-left: 20px;

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

@@ -1413,6 +1413,7 @@ 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 {
@@ -1424,7 +1425,7 @@ input[type="search"]::-webkit-search-cancel-button {
 .img-height-vw {
   // margin: auto;
   object-fit: contain;
-  height: 35vw !important;
+  height: 500px !important;
   @media (max-width: 767px) {
     height: 65vw !important;
   }
@@ -1604,44 +1605,43 @@ input[type="search"]::-webkit-search-cancel-button {
 }
 .style_house_sec02_slide {
   .slick-prev {
-    top: 50%;
-    background: #fff;
-    left: 25px;
-    z-index: 1;
-    padding-top: 2.5px;
-    background: #fff;
-    width: 32px;
-    height: 32px;
-    right: 25px;
+    position: absolute;
+    top: 45%;
+    left: 10px;
     z-index: 1;
-    border-radius: 100%;
+    // top: 50%;
+    // background: #fff;
+    // padding-top: 2.5px;
+    // background: #fff;
+    // width: 32px;
+    // height: 32px;
+    // right: 25px;
+    // border-radius: 100%;
   }
   .slick-prev:before {
-    font-family: "slick";
-    font-size: 32px;
-    line-height: 1;
-    // opacity: .75;
-    color: rgba(0, 0, 0, 0.54);
+    content: "" !important;
+    display: none !important;
   }
   .slick-next:before {
-    content: "→";
-    font-family: "slick";
-    font-size: 32px;
-    line-height: 1;
-    // opacity: .75;
-    color: rgba(0, 0, 0, 0.54);
+    content: "" !important;
+    display: none !important;
+    // font-family: "slick";
+    // font-size: 32px;
+    // line-height: 1;
+    // // opacity: .75;
+    // color: rgba(0, 0, 0, 0.54);
   }
   .slick-next {
-    // position: absolute;
-    top: 50%;
-    padding-top: 2.5px;
-    background: #fff;
-    width: 32px;
-    height: 32px;
-    right: 25px;
-
+    position: absolute;
+    right: 35px;
+    top: 45%;
     z-index: 1;
-    border-radius: 100%;
+    // top: 50%;
+    // padding-top: 2.5px;
+    // background: #fff;
+    // width: 32px;
+    // height: 32px;
+    // border-radius: 100%;
   }
 }
 
@@ -3610,7 +3610,7 @@ input[type="search"]::-webkit-search-cancel-button {
       margin: 0 10px;
       border-radius: 50%;
       display: inline-block;
-      background: #649E2E;
+      background: #649e2e;
       position: absolute;
       z-index: 0;
       top: 34px;
@@ -3800,14 +3800,40 @@ input[type="search"]::-webkit-search-cancel-button {
           li {
             display: flex;
             align-items: center;
+            @media (max-width: 767px) {
+              align-items: flex-start;
+            }
+            &:hover {
+              .blog_text h5 a {
+                background: linear-gradient(to bottom, #fff 50%, #ffe55f 50%);
+              }
+              .blog_img span img {
+                transform: scale(1.1);
+              }
+            }
             .blog_img {
               position: relative;
+              span {
+                display: block;
+                width: 120px;
+                height: 80px;
+                overflow: hidden;
+                border-radius: 10px;
+                img {
+                  width: 120px;
+                  height: 80px;
+                  border-radius: 10px;
+                }
+              }
+              img {
+                transition: all 0.5s;
+              }
               img:first-child {
                 width: 120px;
                 height: 80px;
                 border-radius: 10px;
               }
-              img:last-child {
+              .point-img {
                 position: absolute;
                 width: 50px;
                 left: -20px;
@@ -3821,9 +3847,9 @@ input[type="search"]::-webkit-search-cancel-button {
                 font-size: 18px;
                 font-weight: 500;
                 color: #000;
-                &:hover {
-                  background: linear-gradient(to bottom, #fff 50%, #ffe55f 50%);
-                }
+                // &:hover {
+                //   background: linear-gradient(to bottom, #fff 50%, #ffe55f 50%);
+                // }
               }
               p {
                 margin: 0;
@@ -3843,6 +3869,21 @@ input[type="search"]::-webkit-search-cancel-button {
                 }
               }
             }
+              @media (max-width: 767px) {
+                .divider-mb {
+                  margin: 20px 0;
+                  img {
+                    width: 86vw;
+                  }
+                }
+            }
+            @media (max-width: 576px) {
+              .divider-mb {
+                img {
+                  width: 83vw;
+                }
+              }
+          }
           }
         }
         .btn_box {

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

@@ -47,6 +47,13 @@ window.onload = function () {
         });
       }
       heightImg.push($(this));
+    }else {
+      $(this).css({
+        'height': 500 + 'px',
+        // 'max-width': 600 + 'px',
+        'object-fit': 'cover'
+      });
+      console.log('this',this);
     }
 
     if (i === imgCount - 1) {
@@ -175,7 +182,9 @@ $('.style_house_sec02 .slider-for').slick({
   slidesToScroll: 1,
   arrows: true,
   fade: true,
-  asNavFor: '.slider-nav'
+  asNavFor: '.slider-nav',
+  prevArrow: '<button type="button" class="slick-prev"><img src="/img/arrow_left.png" alt="" width="50"></button>',
+  nextArrow: '<button type="button" class="slick-next"><img src="/img/arrow_right.png" alt="" width="50"></button>'
 });
 $('.style_house_sec02 .slider-nav').slick({
   slidesToShow: 5,