update

content/furniture_design_list/cabinet/3.回家電視櫃/index.md

@@ -7,7 +7,6 @@ url: "/furniture_design/cabinet/go_home_tv_cabinet"
 image: "/furniture_design/cabinet/go_home_tv_cabinet/1.webp"
 description: "回家電視櫃  / 系統板材（塑合板） / 回家，大家下班回到家，聚在電視前面吃飯、看八點檔、聊隔壁阿花的相親對象！對我來說就是最幸福的時光"
 ---
-
 <script>
       window.onload = () => {
         $('.slider-for').slick({
@@ -18,12 +17,11 @@ description: "回家電視櫃  / 系統板材（塑合板） / 回家，大家
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -41,20 +39,14 @@ description: "回家電視櫃  / 系統板材（塑合板） / 回家，大家
               <div class="design-img">
                 <img src="2.webp" alt="小寶優居 | 回家電視櫃">
               </div>
-              <div class="design-img">
-                <img src="3.webp" alt="小寶優居 | 回家電視櫃">
-              </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 回家電視櫃">
               </div>
               <div class="middle-item">
                 <img src="2.webp" alt="小寶優居 | 回家電視櫃">
               </div>
-                  <!-- <div class="middle-item">
-                <img src="3.webp" alt="小寶優居 | 回家電視櫃">
-              </div> -->
             </div>
           </div>
             <div class="ms-2 fw-bold">

content/furniture_design_list/cabinet/4.樂天電視吊櫃/index.md

@@ -18,13 +18,11 @@ description: "樂天電視吊櫃  / 系統板材（塑合板） / 雙層的隔
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
-    });
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        focusOnSelect: true
+      });
     };
   </script>
 <div class="furniture-design">
@@ -41,20 +39,14 @@ description: "樂天電視吊櫃  / 系統板材（塑合板） / 雙層的隔
               <div class="design-img">
                 <img src="2.webp" alt="小寶優居 | 樂天電視吊櫃">
               </div>
-              <div class="design-img">
-                <img src="3.webp" alt="小寶優居 | 樂天電視吊櫃">
-              </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 樂天電視吊櫃">
               </div>
               <div class="middle-item">
                 <img src="2.webp" alt="小寶優居 | 樂天電視吊櫃">
               </div>
-                  <!-- <div class="middle-item">
-                <img src="3.webp" alt="小寶優居 | 樂天電視吊櫃">
-              </div> -->
             </div>
           </div>
             <div class="ms-2 fw-bold">

content/furniture_design_list/cabinet/5.海天視聽櫃/index.md

@@ -18,12 +18,10 @@ description: "海天視聽櫃  / 系統板材（塑合板） / 海天一線，
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        focusOnSelect: true
     });
     };
   </script>
@@ -41,20 +39,14 @@ description: "海天視聽櫃  / 系統板材（塑合板） / 海天一線，
               <div class="design-img">
                 <img src="2.webp" alt="小寶優居 | 海天視聽櫃">
               </div>
-              <div class="design-img">
-                <img src="3.webp" alt="小寶優居 | 海天視聽櫃">
-              </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 海天視聽櫃">
               </div>
               <div class="middle-item">
                 <img src="2.webp" alt="小寶優居 | 海天視聽櫃">
               </div>
-                  <!-- <div class="middle-item">
-                <img src="3.webp" alt="小寶優居 | 海天視聽櫃">
-              </div> -->
             </div>
           </div>
             <div class="ms-2 fw-bold">

content/furniture_design_list/cabinet/good_friends_cabinet/index.md

@@ -18,12 +18,10 @@ description: "友直視廳櫃 - 客廳 / 梣木 / 人生路深長不見盡頭，
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        focusOnSelect: true
     });
     };
   </script>
@@ -41,20 +39,14 @@ description: "友直視廳櫃 - 客廳 / 梣木 / 人生路深長不見盡頭，
               <div class="design-img">
                 <img src="2.webp" alt="小寶優居 | 友直視廳櫃">
               </div>
-              <div class="design-img">
-                <img src="3.webp" alt="小寶優居 | 友直視廳櫃">
-              </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 友直視廳櫃">
               </div>
               <div class="middle-item">
                 <img src="2.webp" alt="小寶優居 | 友直視廳櫃">
               </div>
-                  <!-- <div class="middle-item">
-                <img src="3.webp" alt="小寶優居 | 友直視廳櫃">
-              </div> -->
             </div>
           </div>
             <div class="ms-2 fw-bold">

content/furniture_design_list/cabinet/sleek_cabinet/index.md

@@ -18,12 +18,10 @@ description: "圓滑處事電視櫃 - 客廳 / 山毛櫸 /  人生中，在無
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        focusOnSelect: true
     });
     };
   </script>
@@ -41,20 +39,14 @@ description: "圓滑處事電視櫃 - 客廳 / 山毛櫸 /  人生中，在無
               <div class="design-img">
                 <img src="2.webp" alt="小寶優居 | 圓滑處事電視櫃">
               </div>
-              <div class="design-img">
-                <img src="3.webp" alt="小寶優居 | 圓滑處事電視櫃">
-              </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 圓滑處事電視櫃">
               </div>
               <div class="middle-item">
                 <img src="2.webp" alt="小寶優居 | 圓滑處事電視櫃">
               </div>
-                  <!-- <div class="middle-item">
-                <img src="3.webp" alt="小寶優居 | 圓滑處事電視櫃">
-              </div> -->
             </div>
           </div>
             <div class="ms-2 fw-bold">

content/furniture_design_list/desk/18.隨心工作桌/index.md

@@ -18,12 +18,10 @@ description: "隨心工作桌  / 系統板材（塑合板）/ 工作總是充滿
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        focusOnSelect: true
     });
     };
   </script>
@@ -41,20 +39,14 @@ description: "隨心工作桌  / 系統板材（塑合板）/ 工作總是充滿
               <div class="design-img">
                 <img src="2.webp" alt="小寶優居 | 隨心工作桌">
               </div>
-              <div class="design-img">
-                <img src="3.webp" alt="小寶優居 | 隨心工作桌">
-              </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 隨心工作桌">
               </div>
               <div class="middle-item">
                 <img src="2.webp" alt="小寶優居 | 隨心工作桌">
               </div>
-                  <!-- <div class="middle-item">
-                <img src="3.webp" alt="小寶優居 | 隨心工作桌">
-              </div> -->
             </div>
           </div>
             <div class="ms-2 fw-bold">

content/furniture_design_list/desk/19.靜思書桌/index.md

@@ -18,12 +18,10 @@ description: "靜思書桌  / 系統板材（塑合板）/ 每天的腳步總是
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        focusOnSelect: true
     });
     };
   </script>
@@ -41,20 +39,14 @@ description: "靜思書桌  / 系統板材（塑合板）/ 每天的腳步總是
               <div class="design-img">
                 <img src="2.webp" alt="小寶優居 | 靜思書桌">
               </div>
-              <div class="design-img">
-                <img src="3.webp" alt="小寶優居 | 靜思書桌">
-              </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 靜思書桌">
               </div>
               <div class="middle-item">
                 <img src="2.webp" alt="小寶優居 | 靜思書桌">
               </div>
-                  <!-- <div class="middle-item">
-                <img src="3.webp" alt="小寶優居 | 靜思書桌">
-              </div> -->
             </div>
           </div>
             <div class="ms-2 fw-bold">

content/furniture_design_list/desk/40.裊裊文書桌/index.md

@@ -18,12 +18,10 @@ description: "裊裊文書桌 - 書房 / 梣木 / 麻雀雖小， 萬事俱全
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        focusOnSelect: true
     });
     };
   </script>
@@ -41,20 +39,14 @@ description: "裊裊文書桌 - 書房 / 梣木 / 麻雀雖小， 萬事俱全
               <div class="design-img">
                 <img src="2.webp" alt="小寶優居 | 隨心工作桌">
               </div>
-              <div class="design-img">
-                <img src="3.webp" alt="小寶優居 | 隨心工作桌">
-              </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 隨心工作桌">
               </div>
               <div class="middle-item">
                 <img src="2.webp" alt="小寶優居 | 隨心工作桌">
               </div>
-                  <!-- <div class="middle-item">
-                <img src="3.webp" alt="小寶優居 | 隨心工作桌">
-              </div> -->
             </div>
           </div>
             <div class="ms-2 fw-bold">

content/furniture_design_list/desk/41.工業時代大桌/index.md

@@ -18,12 +18,10 @@ description: "工業時代大桌 - 書房 / 山毛櫸 / 人人依舊懷抱著工
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        focusOnSelect: true
     });
     };
   </script>
@@ -41,20 +39,14 @@ description: "工業時代大桌 - 書房 / 山毛櫸 / 人人依舊懷抱著工
               <div class="design-img">
                 <img src="2.webp" alt="小寶優居 | 工業時代大桌">
               </div>
-              <div class="design-img">
-                <img src="3.webp" alt="小寶優居 | 工業時代大桌">
-              </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 工業時代大桌">
               </div>
               <div class="middle-item">
                 <img src="2.webp" alt="小寶優居 | 工業時代大桌">
               </div>
-                  <!-- <div class="middle-item">
-                <img src="3.webp" alt="小寶優居 | 工業時代大桌">
-              </div> -->
             </div>
           </div>
             <div class="ms-2 fw-bold">

content/furniture_design_list/desk/42.當個文青桌/index.md

@@ -18,12 +18,11 @@ description: "當個文青桌 - 書房 / 山毛櫸 / 獨立電影、唱片音樂
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -41,20 +40,14 @@ description: "當個文青桌 - 書房 / 山毛櫸 / 獨立電影、唱片音樂
               <div class="design-img">
                 <img src="2.webp" alt="小寶優居 | 當個文青桌">
               </div>
-              <div class="design-img">
-                <img src="3.webp" alt="小寶優居 | 當個文青桌">
-              </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 當個文青桌">
               </div>
               <div class="middle-item">
                 <img src="2.webp" alt="小寶優居 | 當個文青桌">
               </div>
-                  <!-- <div class="middle-item">
-                <img src="3.webp" alt="小寶優居 | 當個文青桌">
-              </div> -->
             </div>
           </div>
             <div class="ms-2 fw-bold">

content/furniture_design_list/dining_chair/26.幸福餐椅/index.md

@@ -8,97 +8,96 @@ image: "/furniture_design/dining_chair/happy_dining_chair/1.webp"
 description: "幸福餐椅 - 餐廳 / 梣木 / 靠背的仰角設計，定位出用餐的「最適」角度，使坐姿既可放鬆又能挺立，幸福的相聚時光沒有拘謹的限制，只有自在的舒適！"
 ---
 <script>
-      window.onload = () => {
-        $('.slider-for').slick({
-        slidesToShow: 1,
-        slidesToScroll: 1,
-        arrows: false,
-        fade: true,
-        asNavFor: '.slider-nav'
-      });
-      $('.slider-nav').slick({
-      slidesToShow: 3,
+  window.onload = () => {
+    $('.slider-for').slick({
+      slidesToShow: 1,
       slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+      arrows: false,
+      fade: true,
+      asNavFor: '.slider-nav'
+    });
+    $('.slider-nav').slick({
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
-    };
-  </script>
+  };
+</script>
 <div class="furniture-design">
-{{< furniture_design >}}
-<div class="furniture_design_content">
-  <div class="sub-tab-content" id="pills-tabContent">
-      <div class="container px-0 design-container">
-        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
-          <div class="slider-box">
-            <div class="slider slider-for slider-design">
-              <div class="design-img">
-                <img src="1.webp" alt="小寶優居 | 幸福餐椅">
-              </div>
-              <div class="design-img">
-                <img src="2.webp" alt="小寶優居 | 幸福餐椅">
-              </div>
-              <div class="design-img">
-                <img src="3.webp" alt="小寶優居 | 幸福餐椅">
-              </div>
-            </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
-                <img src="1.webp" alt="小寶優居 | 幸福餐椅">
-              </div>
-              <div class="middle-item">
-                <img src="2.webp" alt="小寶優居 | 幸福餐椅">
+  {{< furniture_design>}}
+    <div class="furniture_design_content">
+      <div class="sub-tab-content" id="pills-tabContent">
+        <div class="container px-0 design-container">
+          <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+            <div class="slider-box">
+              <div class="slider slider-for slider-design">
+                <div class="design-img">
+                  <img src="1.webp" alt="小寶優居 | 幸福餐椅">
+                </div>
+                <div class="design-img">
+                  <img src="2.webp" alt="小寶優居 | 幸福餐椅">
+                </div>
+                <div class="design-img">
+                  <img src="3.webp" alt="小寶優居 | 幸福餐椅">
+                </div>
               </div>
-                  <div class="middle-item">
-                <img src="3.webp" alt="小寶優居 | 幸福餐椅">
+              <div class="slider slider-nav mt-2">
+                <div class="middle-item">
+                  <img src="1.webp" alt="小寶優居 | 幸福餐椅">
+                </div>
+                <div class="middle-item">
+                  <img src="2.webp" alt="小寶優居 | 幸福餐椅">
+                </div>
+                <div class="middle-item">
+                  <img src="3.webp" alt="小寶優居 | 幸福餐椅">
+                </div>
               </div>
             </div>
-          </div>
             <div class="ms-2 fw-bold">
-            <h3 class="mt-4">幸福餐椅 </h3>
-            <p class="mb-5">靠背的仰角設計，定位出用餐的「最適」角度，使坐姿既可放鬆又能挺立，幸福的相聚時光沒有拘謹的限制，只有自在的舒適！</p>
-            <div style="display:none">
-              <span class="me-3">定價</span>
-              <span>$4,620</span>
-            </div>
-            <div class="my-2 d-flex">
+              <h3 class="mt-4">幸福餐椅 </h3>
+              <p class="mb-5">靠背的仰角設計，定位出用餐的「最適」角度，使坐姿既可放鬆又能挺立，幸福的相聚時光沒有拘謹的限制，只有自在的舒適！</p>
+              <div style="display:none">
+                <span class="me-3">定價</span>
+                <span>$4,620</span>
+              </div>
+              <div class="my-2 d-flex">
                 <div class="tw-15">顏色</div>
                 <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-            </div>
+              </div>
               <div class="my-2 d-flex">
                 <div class="tw-15">尺寸</div>
                 <div class="tw-85">寬460 X 深470 X 高815(mm)</div>
-            </div>
-            <div class="my-2 d-flex">
+              </div>
+              <div class="my-2 d-flex">
                 <div class="tw-15">材質</div>
-              <div class="tw-85">梣木</div>
-            </div>
-            <!-- <div class="d-flex">
+                <div class="tw-85">梣木</div>
+              </div>
+              <!-- <div class="d-flex">
               <div class="tw-15">備註</div>
               <div class="tw-85">可依實際需求加寬為196公分，實際價格將依需求規劃客製而定</div>
             </div> -->
+            </div>
           </div>
-        </div>
-        <div class="b-bottom pb-3 mb-5">
-          <!-- <h6>尺寸規格</h6>
+          <div class="b-bottom pb-3 mb-5">
+            <!-- <h6>尺寸規格</h6>
           <img class="w-100 h-100" src="s1.webp"
             alt="小寶優居 | 幸福餐椅">
           <h6 class="mt-4">說明</h6> -->
-          <ul>
-            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
-            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
-          </ul>
-        </div>
-        <div class="mb-5">
-          <a href="/furniture_design/dining_chair/">
-            <p class="readMore text-center">
-              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到餐椅/中島椅
-            </p>
-          </a>
+            <ul>
+              <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+              <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+            </ul>
+          </div>
+          <div class="mb-5">
+            <a href="/furniture_design/dining_chair/">
+              <p class="readMore text-center">
+                <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到餐椅/中島椅
+              </p>
+            </a>
+          </div>
         </div>
       </div>
-  </div>
-</div>
-  </div>
+    </div>
+</div>

content/furniture_design_list/dining_chair/27.無憂餐椅/index.md

@@ -44,8 +44,8 @@ description: "無憂餐椅 - 餐廳 / 梣木 / 細木工匠的榫接技法，讓
                 <img src="3.webp" alt="小寶優居 | 無憂餐椅">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 無憂餐椅">
               </div>
               <div class="middle-item">

content/furniture_design_list/dining_chair/28.無慮餐椅/index.md

@@ -44,8 +44,8 @@ description: "無慮餐椅 - 餐廳 / 梣木 / 無憂無慮， 夫復何求"
                 <img src="3.webp" alt="小寶優居 | 無慮餐椅">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 無慮餐椅">
               </div>
               <div class="middle-item">

content/furniture_design_list/dining_chair/29.樂天餐椅/index.md

@@ -44,8 +44,8 @@ description: "樂天餐椅 - 餐廳 / 山毛櫸 / 特殊的高背式餐椅，能
                 <img src="3.webp" alt="小寶優居 | 樂天餐椅">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 樂天餐椅">
               </div>
               <div class="middle-item">

content/furniture_design_list/dining_chair/30.幸福中島椅/index.md

@@ -44,8 +44,8 @@ description: "幸福中島椅 - 餐廳 / 梣木 / 能和相愛的人，彼間而
                 <img src="3.webp" alt="小寶優居 | 幸福中島椅">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 幸福中島椅">
               </div>
               <div class="middle-item">

content/furniture_design_list/dining_chair/31.無憂中島椅/index.md

@@ -45,8 +45,8 @@ description: "無憂中島椅 - 餐廳 / 梣木 / 深夜喝上一杯，cheers！
                 <img src="3.webp" alt="小寶優居 | 無憂中島椅">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 無憂中島椅">
               </div>
               <div class="middle-item">

content/furniture_design_list/dining_chair/32.幸福長凳/index.md

@@ -17,12 +17,11 @@ description: "幸福長凳(雙人) - 餐廳 / 梣木 / 兩個人的幸福， 你
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -44,8 +43,8 @@ description: "幸福長凳(雙人) - 餐廳 / 梣木 / 兩個人的幸福， 你
                 <img src="3.webp" alt="小寶優居 | 幸福長凳(雙人)">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 幸福長凳(雙人)">
               </div>
               <div class="middle-item">

content/furniture_design_list/dining_chair/33.一期一會長凳/index.md

@@ -18,12 +18,11 @@ description: "一期一會長凳(雙人) - 餐廳 / 梣木 / Hi，朋友！在
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "一期一會長凳(雙人) - 餐廳 / 梣木 / Hi，朋友！在
                 <img src="3.webp" alt="小寶優居 | 一期一會長凳(雙人)">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 一期一會長凳(雙人)">
               </div>
               <div class="middle-item">

content/furniture_design_list/dining_chair/43.小寶心情凳/index.md

@@ -45,8 +45,8 @@ description: "小寶心情凳， 帶給你每日的好心情，布套可拆洗
                 <img src="3.webp" alt="小寶優居 | 小寶心情凳">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 小寶心情凳">
               </div>
               <div class="middle-item">

content/furniture_design_list/dining_chair/a_small_stool_for_a_while/index.md

@@ -18,12 +18,11 @@ description: "一期一會小凳 - 餐廳 / 梣木 / Hi，朋友！在此生有
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "一期一會小凳 - 餐廳 / 梣木 / Hi，朋友！在此生有
                 <img src="3.webp" alt="小寶優居 | 一期一會小凳">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 一期一會小凳">
               </div>
               <div class="middle-item">

content/furniture_design_list/dining_chair/good_seat_dining_chair/index.md

@@ -47,8 +47,8 @@ b:
                 <img src="3.webp" alt="小寶優居 | 好座餐椅">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 好座餐椅">
               </div>
               <div class="middle-item">

content/furniture_design_list/dining_chair/happiness_stool/index.md

@@ -18,12 +18,11 @@ description: "幸福小凳 - 餐廳 / 梣木+墊裝 / 一個人， 也可以很
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "幸福小凳 - 餐廳 / 梣木+墊裝 / 一個人， 也可以很
                 <img src="3.webp" alt="小寶優居 | 幸福小凳">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 幸福小凳">
               </div>
               <div class="middle-item">

content/furniture_design_list/dining_chair/sif_dining_chair/index.md

@@ -45,8 +45,8 @@ description: "希芙餐椅 - 餐廳 / 梣梣木+墊裝木 / 希芙是北歐神
                 <img src="3.webp" alt="小寶優居 | 希芙餐椅">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 希芙餐椅">
               </div>
               <div class="middle-item">

content/furniture_design_list/dining_table/22.友直餐桌/index.md

@@ -44,8 +44,8 @@ description: "友直餐桌 - 餐廳 / 梣木 / 桌腳以橫、豎交叉排列，
                 <img src="3.webp" alt="小寶優居 | 友直餐桌">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 友直餐桌">
               </div>
               <div class="middle-item">

content/furniture_design_list/dining_table/23.森命餐桌/index.md

@@ -18,12 +18,11 @@ description: "森命餐桌 - 餐廳 / 梣木 / 森林的生命，伴隨晚宴走
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "森命餐桌 - 餐廳 / 梣木 / 森林的生命，伴隨晚宴走
                 <img src="3.webp" alt="小寶優居 | 森命餐桌">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 森命餐桌">
               </div>
               <div class="middle-item">

content/furniture_design_list/dining_table/24.裊裊餐桌/index.md

@@ -18,12 +18,11 @@ description: "裊裊餐桌 - 餐廳 / 梣木 / 裊裊炊煙，呼喚遠方的遊
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "裊裊餐桌 - 餐廳 / 梣木 / 裊裊炊煙，呼喚遠方的遊
                 <img src="3.webp" alt="小寶優居 | 裊裊餐桌">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 裊裊餐桌">
               </div>
               <div class="middle-item">

content/furniture_design_list/dining_table/25.舉杯餐桌/index.md

@@ -18,12 +18,11 @@ description: "舉杯餐桌 - 餐廳 / 梣木 / 精心挑選這個季節的花束
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "舉杯餐桌 - 餐廳 / 梣木 / 精心挑選這個季節的花束
                 <img src="3.webp" alt="小寶優居 | 舉杯餐桌">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 舉杯餐桌">
               </div>
               <div class="middle-item">

content/furniture_design_list/dining_table/46.喆翔餐桌/index.md

@@ -18,12 +18,11 @@ description: "喆翔餐桌 - 餐廳 / 梣木 / 「餐桌」乘載著生活中的
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "喆翔餐桌 - 餐廳 / 梣木 / 「餐桌」乘載著生活中的
                 <img src="3.webp" alt="小寶優居 | 喆翔餐桌">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 喆翔餐桌">
               </div>
               <div class="middle-item">

content/furniture_design_list/dining_table/light_rhyme_dining_table/index.md

@@ -45,8 +45,8 @@ description: "輕韻餐桌 - 餐廳 / 梣木 / 外型輕巧，平易近人，簡
                 <img src="3.webp" alt="小寶優居 | 喆翔餐桌">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 喆翔餐桌">
               </div>
               <div class="middle-item">

content/furniture_design_list/mattress/35.条条團圓/index.md

@@ -17,12 +17,11 @@ description: "条条團圓 - 臥室 / 雲杉實木骨架 / 工匠手縫條條的
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -44,8 +43,8 @@ description: "条条團圓 - 臥室 / 雲杉實木骨架 / 工匠手縫條條的
                 <img src="3.webp" alt="小寶優居 | 条条團圓">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 条条團圓">
               </div>
               <div class="middle-item">

content/furniture_design_list/mattress/36.雙人枕頭/index.md

@@ -44,8 +44,8 @@ description: "雙人枕頭 - 臥室 / 雲杉實木骨架 / 專超大防蹣羽絨
                 <img src="3.webp" alt="小寶優居 | 雙人枕頭">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 雙人枕頭">
               </div>
               <!-- <div class="middle-item">

content/furniture_design_list/mattress/37.玩色格格/index.md

@@ -18,12 +18,11 @@ description: "玩色格格 - 臥室 / 雲杉實木骨架 / 軟綿的色彩格子
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "玩色格格 - 臥室 / 雲杉實木骨架 / 軟綿的色彩格子
                 <img src="3.webp" alt="小寶優居 | 玩色格格">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 玩色格格">
               </div>
               <div class="middle-item">

content/furniture_design_list/mattress/38.步步高昇/index.md

@@ -18,12 +18,11 @@ description: "步步高昇 - 臥室 / 雲杉實木骨架 / 學業高升、事業
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "步步高昇 - 臥室 / 雲杉實木骨架 / 學業高升、事業
                 <img src="3.webp" alt="小寶優居 | 步步高昇">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 步步高昇">
               </div>
               <div class="middle-item">

content/furniture_design_list/mattress/39.圓滿床架/index.md

@@ -18,12 +18,11 @@ description: "圓滿床架 - 臥室 / 松木 / 你都吃圓了，都滿出床了
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "圓滿床架 - 臥室 / 松木 / 你都吃圓了，都滿出床了
                 <img src="3.webp" alt="小寶優居 | 圓滿床架">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 圓滿床架">
               </div>
               <div class="middle-item">

content/furniture_design_list/mattress/44.酣然相擁/index.md

@@ -18,12 +18,11 @@ description: "酣然相擁 - 臥室 / 山雲杉實木骨架 / 對稱的翅膀，
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "酣然相擁 - 臥室 / 山雲杉實木骨架 / 對稱的翅膀，
                 <img src="3.webp" alt="小寶優居 | 酣然相擁">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 酣然相擁">
               </div>
               <div class="middle-item">

content/furniture_design_list/other_furniture/12.老王方塊櫃/index.md

@@ -18,12 +18,11 @@ description: "老王方塊櫃  / 系統板材（塑合板） / 一格一格四
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "老王方塊櫃  / 系統板材（塑合板） / 一格一格四
                 <img src="3.webp" alt="小寶優居 | 老王方塊櫃">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 老王方塊櫃">
               </div>
               <div class="middle-item">

content/furniture_design_list/other_furniture/34.圓滑處事化妝桌/index.md

@@ -18,12 +18,11 @@ description: "圓滑處事化妝桌 - 臥室 / 山毛櫸 / 專為台灣偉大的
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "圓滑處事化妝桌 - 臥室 / 山毛櫸 / 專為台灣偉大的
                 <img src="3.webp" alt="小寶優居 | 老王方塊櫃">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 老王方塊櫃">
               </div>
               <div class="middle-item">

content/furniture_design_list/side_cabinet/16.圓滑處事套几（小）/index.md

@@ -18,12 +18,11 @@ description: "圓滑處事套几(小) - 客廳 / 山毛櫸 /  人生中，在無
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "圓滑處事套几(小) - 客廳 / 山毛櫸 /  人生中，在無
                 <img src="3.webp" alt="小寶優居 | 圓滑處事套几(小)">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 圓滑處事套几(小)">
               </div>
               <div class="middle-item">

content/furniture_design_list/side_cabinet/21.圓滑處事邊櫃/index.md

@@ -18,12 +18,11 @@ description: "圓滑處事邊櫃 - 臥室 / 山毛櫸 /  人生中，在無數
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "圓滑處事邊櫃 - 臥室 / 山毛櫸 /  人生中，在無數
                 <img src="3.webp" alt="小寶優居 | 圓滑處事邊櫃">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 圓滑處事邊櫃">
               </div>
               <div class="middle-item">

content/furniture_design_list/side_cabinet/53.幸運邊几/index.md

@@ -44,8 +44,8 @@ description: "幸運邊几 - 客廳 / 梣木+鐵件 / 擷取一瓣幸運草葉
                 <img src="3.webp" alt="小寶優居 | 幸運邊几">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 幸運邊几">
               </div>
               <div class="middle-item">

content/furniture_design_list/side_table/1.漂浮茶几/index.md

@@ -18,12 +18,11 @@ description: "漂浮茶几  / 系統板材（塑合板） / 飄浮，讓世界
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "漂浮茶几  / 系統板材（塑合板） / 飄浮，讓世界
                 <img src="3.webp" alt="小寶優居 | 漂浮茶几">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 漂浮茶几">
               </div>
               <div class="middle-item">

content/furniture_design_list/side_table/2.金磚茶几/index.md

@@ -17,12 +17,11 @@ description: "金磚茶几  / 系統板材（塑合板） / 金磚象徵著大
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -44,8 +43,8 @@ description: "金磚茶几  / 系統板材（塑合板） / 金磚象徵著大
                 <img src="3.webp" alt="小寶優居 | 金磚茶几">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 金磚茶几">
               </div>
               <div class="middle-item">

content/furniture_design_list/side_table/four_seasons_big_chair/index.md

@@ -17,12 +17,11 @@ description: "四時不惑大几 - 客廳 / 梣木 / 40不惑，不再疑惑"
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -44,8 +43,8 @@ description: "四時不惑大几 - 客廳 / 梣木 / 40不惑，不再疑惑"
                 <img src="3.webp" alt="小寶優居 | 四時不惑大几">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 四時不惑大几">
               </div>
               <div class="middle-item">

content/furniture_design_list/side_table/good_friends_chair/index.md

@@ -17,12 +17,11 @@ description: "友直茶几 - 客廳 / 梣木 / 人生路深長不見盡頭，
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -44,8 +43,8 @@ description: "友直茶几 - 客廳 / 梣木 / 人生路深長不見盡頭，
                 <img src="3.webp" alt="小寶優居 | 友直茶几">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 友直茶几">
               </div>
               <div class="middle-item">

content/furniture_design_list/side_table/lucky_coffee_table/index.md

@@ -44,8 +44,8 @@ description: "幸運茶几 - 客廳 / 梣木+鐵件 / 希望、付出和愛代
                 <img src="3.webp" alt="小寶優居 | 幸運茶几">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 幸運茶几">
               </div>
               <div class="middle-item">

content/furniture_design_list/side_table/matured_toast/index.md

@@ -17,12 +17,11 @@ description: "熟成吐司 - 客廳 / 梣木、樺木積層板 / 熟成你的家
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -44,8 +43,8 @@ description: "熟成吐司 - 客廳 / 梣木、樺木積層板 / 熟成你的家
                 <img src="3.webp" alt="小寶優居 | 熟成吐司">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 熟成吐司">
               </div>
               <div class="middle-item">

content/furniture_design_list/side_table/round_table/index.md

@@ -17,12 +17,11 @@ description: "緣圓大几 - 客廳 / 梣木 / 人生有三圓，家圓情圓友
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -44,8 +43,8 @@ description: "緣圓大几 - 客廳 / 梣木 / 人生有三圓，家圓情圓友
                 <img src="3.webp" alt="小寶優居 | 緣圓大几">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 緣圓大几">
               </div>
               <div class="middle-item">

content/furniture_design_list/sofa/calm_sofa/index.md

@@ -17,12 +17,11 @@ description: "靜寧沙發 - 客廳 / 雲杉實木骨架、山毛櫸 / 靜聽，
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -44,8 +43,8 @@ description: "靜寧沙發 - 客廳 / 雲杉實木骨架、山毛櫸 / 靜聽，
                 <img src="3.webp" alt="小寶優居 | 蜜絲媞沙發">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 蜜絲媞沙發">
               </div>
               <div class="middle-item">

content/furniture_design_list/sofa/daze_sofa/index.md

@@ -17,12 +17,11 @@ description: "發呆沙發 - 客廳 / 雲杉實木骨架、山毛櫸 / 發呆，
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -44,8 +43,8 @@ description: "發呆沙發 - 客廳 / 雲杉實木骨架、山毛櫸 / 發呆，
                 <img src="3.webp" alt="小寶優居 | 蜜絲媞沙發">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 蜜絲媞沙發">
               </div>
               <div class="middle-item">

content/furniture_design_list/sofa/generous_cornerless_sofa/index.md

@@ -44,8 +44,8 @@ description: "大方無隅沙發 - 客廳 / 雲杉實木骨架、山毛櫸 / 大
                 <img src="3.webp" alt="小寶優居 | 蜜絲媞沙發">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 蜜絲媞沙發">
               </div>
               <div class="middle-item">

content/furniture_design_list/sofa/mi_si_ti_sofa/index.md

@@ -7,90 +7,88 @@ url: "/furniture_design/sofa/mi_si_ti_sofa"
 image: "/furniture_design/sofa/mi_si_ti_sofa/1.webp"
 description: "大方無隅沙發 - 客廳 / 雲杉實木骨架、山毛櫸 / 大方無隅沙發就像一塊塊拼圖， 實現你想要拼湊出的模樣， 創造家裡任何可能格局"
 ---
-  <script>
-      window.onload = () => {
-        $('.slider-for').slick({
-        slidesToShow: 1,
-        slidesToScroll: 1,
-        arrows: false,
-        fade: true,
-        asNavFor: '.slider-nav'
-      });
-      $('.slider-nav').slick({
-      slidesToShow: 3,
+<script>
+  window.onload = () => {
+    $('.slider-for').slick({
+      slidesToShow: 1,
       slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+      arrows: false,
+      fade: true,
+      asNavFor: '.slider-nav'
+    });
+    $('.slider-nav').slick({
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
-    };
-  </script>
+  };
+</script>
 <div class="furniture-design">
-{{< furniture_design >}}
-<div class="furniture_design_content">
-  <div class="sub-tab-content" id="pills-tabContent">
-      <div class="container px-0 design-container">
-        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
-          <div class="slider-box">
-            <div class="slider slider-for slider-design">
-              <div class="design-img">
-                <img src="1.webp" alt="小寶優居 | 蜜絲媞沙發">
+  {{< furniture_design>}}
+    <div class="furniture_design_content">
+      <div class="sub-tab-content" id="pills-tabContent">
+        <div class="container px-0 design-container">
+          <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+            <div class="slider-box">
+              <div class="slider slider-for slider-design">
+                <div class="design-img">
+                  <img src="1.webp" alt="小寶優居 | 蜜絲媞沙發">
+                </div>
+                <div class="design-img">
+                  <img src="2.webp" alt="小寶優居 | 蜜絲媞沙發">
+                </div>
+                <div class="design-img">
+                  <img src="3.webp" alt="小寶優居 | 蜜絲媞沙發">
+                </div>
               </div>
-              <div class="design-img">
-                <img src="2.webp" alt="小寶優居 | 蜜絲媞沙發">
-              </div>
-              <div class="design-img">
-                <img src="3.webp" alt="小寶優居 | 蜜絲媞沙發">
+              <div class="slider slider-nav mt-2">
+                <div class="middle-item">
+                  <img src="1.webp" alt="小寶優居 | 蜜絲媞沙發">
+                </div>
+                <div class="middle-item">
+                  <img src="2.webp" alt="小寶優居 | 蜜絲媞沙發">
+                </div>
+                <div class="middle-item">
+                  <img src="3.webp" alt="小寶優居 | 蜜絲媞沙發">
+                </div>
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
+            <div class="ms-2 fw-bold">
+              <h3 class="mt-4">蜜絲媞沙發 </h3>
+              <p class="mb-5">Misty首位非洲裔女性首席舞者，輕盈彎曲、俐落優雅，是現代芭蕾的氣勢，Misty說：「透過芭蕾，我找到自己的聲音」而我家的美感與生活，也要獨立不從眾。</p>
               <div>
-                <img src="1.webp" alt="小寶優居 | 蜜絲媞沙發">
+                <span class="me-3">顏色</span>
+                <span>門市擁有130種布色，依規劃客製挑選</span>
               </div>
-              <div class="middle-item">
-                <img src="2.webp" alt="小寶優居 | 蜜絲媞沙發">
+              <div class="my-2">
+                <span class="me-3">材質</span>
+                <span>墊裝+鐵件</span>
               </div>
-                  <div class="middle-item">
-                <img src="3.webp" alt="小寶優居 | 蜜絲媞沙發">
+              <div>
+                <span class="me-3">備註</span>
+                <span>實際價格將依需求規劃客製而定</span>
               </div>
             </div>
           </div>
-          <div class="ms-2 fw-bold">
-            <h3 class="mt-4">蜜絲媞沙發 </h3>
-            <p class="mb-5">Misty首位非洲裔女性首席舞者，輕盈彎曲、俐落優雅，是現代芭蕾的氣勢，Misty說：「透過芭蕾，我找到自己的聲音」而我家的美感與生活，也要獨立不從眾。</p>
-            <div>
-              <span class="me-3">顏色</span>
-              <span>門市擁有130種布色，依規劃客製挑選</span>
-            </div>
-            <div class="my-2">
-              <span class="me-3">材質</span>
-              <span>墊裝+鐵件</span>
-            </div>
-            <div>
-              <span class="me-3">備註</span>
-              <span>實際價格將依需求規劃客製而定</span>
-            </div>
+          <div class="b-bottom pb-3 mb-5">
+            <h6>尺寸規格</h6>
+            <img class="w-100 h-100" src="4.webp" alt="小寶優居 | 蜜絲媞沙發">
+            <h6 class="mt-4">說明</h6>
+            <ul>
+              <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+              <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+            </ul>
+          </div>
+          <div class="mb-5">
+            <a href="/furniture_design/sofa/">
+              <p class="readMore text-center">
+                <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到沙發
+              </p>
+            </a>
           </div>
-        </div>
-        <div class="b-bottom pb-3 mb-5">
-          <h6>尺寸規格</h6>
-          <img class="w-100 h-100" src="4.webp"
-            alt="小寶優居 | 蜜絲媞沙發">
-          <h6 class="mt-4">說明</h6>
-          <ul>
-            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
-            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
-          </ul>
-        </div>
-        <div class="mb-5">
-          <a href="/furniture_design/sofa/">
-            <p class="readMore text-center">
-              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到沙發
-            </p>
-          </a>
         </div>
       </div>
-  </div>
-</div>
-  </div>
+    </div>
+</div>

content/furniture_design_list/sofa/morihara_sofa/index.md

@@ -44,7 +44,7 @@ description: "大方無隅沙發 - 客廳 / 雲杉實木骨架、山毛櫸 / 大
                   <img src="3.webp" alt="小寶優居 | 森原沙發">
                 </div>
               </div>
-              <div class="slider slider-nav mt-lg-2">
+              <div class="slider slider-nav mt-2">
                 <div>
                   <img src="1.webp" alt="小寶優居 | 森原沙發">
                 </div>

content/furniture_design_list/sofa/sakamoto_sofa/index.md

@@ -43,7 +43,7 @@ description: "大方無隅沙發 - 客廳 / 雲杉實木骨架、山毛櫸 / 大
                   <img src="3.webp" alt="小寶優居 | 坂本沙發">
                 </div>
               </div>
-              <div class="slider slider-nav mt-lg-2">
+              <div class="slider slider-nav mt-2">
                 <div>
                   <img src="1.webp" alt="小寶優居 | 坂本沙發">
                 </div>

content/furniture_design_list/sofa/secret_sofa/index.md

@@ -17,12 +17,11 @@ description: "秘密沙發 - 客廳 / 雲杉實木骨架、山毛櫸 / 世界這
       asNavFor: '.slider-nav'
     });
     $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
   };
 </script>
@@ -44,7 +43,7 @@ description: "秘密沙發 - 客廳 / 雲杉實木骨架、山毛櫸 / 世界這
                   <img src="3.webp" alt="小寶優居 | 坂本沙發">
                 </div>
               </div>
-              <div class="slider slider-nav mt-lg-2">
+              <div class="slider slider-nav mt-2">
                 <div>
                   <img src="1.webp" alt="小寶優居 | 坂本沙發">
                 </div>

content/furniture_design_list/sofa/serene_sofa/index.md

@@ -44,7 +44,7 @@ description: "沉謐沙發 - 客廳 / 雲杉實木骨架、山毛櫸 / 靠得住
                   <img src="3.webp" alt="小寶優居 | 坂本沙發">
                 </div>
               </div>
-              <div class="slider slider-nav mt-lg-2">
+              <div class="slider slider-nav mt-2">
                 <div>
                   <img src="1.webp" alt="小寶優居 | 坂本沙發">
                 </div>

content/furniture_design_list/sofa/star_sofa/index.md

@@ -44,7 +44,7 @@ description: "星巒沙發 - 客廳 / 雲杉實木骨架、山毛櫸 / 寬闊如
                   <img src="3.webp" alt="小寶優居 | 坂本沙發">
                 </div>
               </div>
-              <div class="slider slider-nav mt-lg-2">
+              <div class="slider slider-nav mt-2">
                 <div>
                   <img src="1.webp" alt="小寶優居 | 坂本沙發">
                 </div>

content/furniture_design_list/sofa/tolerant_sofa/index.md

@@ -44,7 +44,7 @@ description: "有容沙發 - 客廳 / 雲杉實木骨架、山毛櫸 / 有容沙
                   <img src="3.webp" alt="小寶優居 | 坂本沙發">
                 </div>
               </div>
-              <div class="slider slider-nav mt-lg-2">
+              <div class="slider slider-nav mt-2">
                 <div>
                   <img src="1.webp" alt="小寶優居 | 坂本沙發">
                 </div>

content/furniture_design_list/wardrobe/10.邂逅穿鞋椅/index.md

@@ -18,12 +18,11 @@ description: "邂逅穿鞋椅  / 系統板材（塑合板） / 小時候，媽
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "邂逅穿鞋椅  / 系統板材（塑合板） / 小時候，媽
                 <img src="3.webp" alt="小寶優居 | 把鞋子吊起來">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 把鞋子吊起來">
               </div>
               <div class="middle-item">

content/furniture_design_list/wardrobe/11.午後臥榻/index.md

@@ -18,12 +18,11 @@ description: "午後臥榻  / 系統板材（塑合板） / 坐在午後臥榻
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "午後臥榻  / 系統板材（塑合板） / 坐在午後臥榻
                 <img src="3.webp" alt="小寶優居 | 把鞋子吊起來">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 把鞋子吊起來">
               </div>
               <div class="middle-item">

content/furniture_design_list/wardrobe/13.今晚餐櫃/index.md

@@ -45,8 +45,8 @@ description: "今晚餐櫃 / 系統板材（塑合板） / 今天晚上吃什麼
                 <img src="3.webp" alt="小寶優居 | 把鞋子吊起來">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 把鞋子吊起來">
               </div>
               <!-- <div class="middle-item">

content/furniture_design_list/wardrobe/14.愛中島系列/index.md

@@ -46,8 +46,8 @@ custom_title_value: "（標準版/釋壓加強版/彈力加強版）"
                 <img src="3.webp" alt="小寶優居 | 把鞋子吊起來">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 把鞋子吊起來">
               </div>
               <div class="middle-item">

content/furniture_design_list/wardrobe/15.谷溜儲物櫃/index.md

@@ -18,12 +18,11 @@ description: "谷溜儲物櫃  / 系統板材（塑合板） / 谷溜谷溜，
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "谷溜儲物櫃  / 系統板材（塑合板） / 谷溜谷溜，
                 <img src="3.webp" alt="小寶優居 | 谷溜儲物櫃">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 谷溜儲物櫃">
               </div>
               <div class="middle-item">

content/furniture_design_list/wardrobe/16.我愛衣櫃/index.md

@@ -18,12 +18,11 @@ description: "我愛衣櫃  / 系統板材（塑合板） / 「八種」衣櫃
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "我愛衣櫃  / 系統板材（塑合板） / 「八種」衣櫃
                 <img src="3.webp" alt="小寶優居 | 我愛衣櫃">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 我愛衣櫃">
               </div>
               <div class="middle-item">

content/furniture_design_list/wardrobe/17.海量_我愛_今晚斗櫃/index.md

@@ -18,12 +18,11 @@ description: "海量/我愛/今晚斗櫃  / 系統板材（塑合板）/ 一斗
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "海量/我愛/今晚斗櫃  / 系統板材（塑合板）/ 一斗
                 <img src="3.webp" alt="小寶優居 | 海量/我愛/今晚斗櫃">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 海量/我愛/今晚斗櫃">
               </div>
               <div class="middle-item">

content/furniture_design_list/wardrobe/6.有餘電器櫃/index.md

@@ -18,12 +18,11 @@ description: "有餘電器櫃  / 系統板材（塑合板） / 如果你剛好
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "有餘電器櫃  / 系統板材（塑合板） / 如果你剛好
                 <img src="3.webp" alt="小寶優居 | 有餘電器櫃">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 有餘電器櫃">
               </div>
               <div class="middle-item">

content/furniture_design_list/wardrobe/7.穿雲櫃/index.md

@@ -18,12 +18,11 @@ description: "穿雲櫃 / 梣木+墊裝 / 坐與臥是居家生活花費最多
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "穿雲櫃 / 梣木+墊裝 / 坐與臥是居家生活花費最多
                 <img src="3.webp" alt="小寶優居 | 穿雲櫃">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 穿雲櫃">
               </div>
               <div class="middle-item">

content/furniture_design_list/wardrobe/8.平安喜樂團圞鞋櫃/index.md

@@ -18,12 +18,11 @@ description: "平安/喜樂/團圞鞋櫃 / 系統板材（塑合板）/ 我此
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "平安/喜樂/團圞鞋櫃 / 系統板材（塑合板）/ 我此
                 <img src="3.webp" alt="小寶優居 | 平安/喜樂/團圞鞋櫃">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 平安/喜樂/團圞鞋櫃">
               </div>
               <div class="middle-item">

content/furniture_design_list/wardrobe/9.把鞋子吊起來/index.md

@@ -18,12 +18,11 @@ description: "把鞋子吊起來 / 系統板材（塑合板） / 媽媽要掃地
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "把鞋子吊起來 / 系統板材（塑合板） / 媽媽要掃地
                 <img src="3.webp" alt="小寶優居 | 把鞋子吊起來">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 把鞋子吊起來">
               </div>
               <div class="middle-item">

content/furniture_design_list/wardrobe/hang_up_clothes/index.md

@@ -18,12 +18,11 @@ description: "把衣服吊起來  / 系統板材（塑合板）/ 我是「把鞋
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
-      slidesToShow: 2,
-      slidesToScroll: 1,
-      asNavFor: '.slider-for',
-      dots: true,
-      centerMode: true,
-      focusOnSelect: true
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        asNavFor: '.slider-for',
+        centerMode: true,
+        focusOnSelect: true
     });
     };
   </script>
@@ -45,8 +44,8 @@ description: "把衣服吊起來  / 系統板材（塑合板）/ 我是「把鞋
                 <img src="3.webp" alt="小寶優居 | 把衣服吊起來">
               </div>
             </div>
-            <div class="slider slider-nav mt-lg-2">
-              <div>
+            <div class="slider slider-nav mt-2">
+              <div class="middle-item">
                 <img src="1.webp" alt="小寶優居 | 把衣服吊起來">
               </div>
               <div class="middle-item">

content/maincategories/pre-sale_tenants_become_lazy_packs/index.md

@@ -127,17 +127,17 @@ description: "「我買了預售屋，有很多客變的想法！建設公司通
     </li>
   </ul>
   <span class="line"></span>
-  <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center link-box">
-    <div class="d-flex flex-column flex-sm-row link-list">
+  <div class="d-flex justify-content-between align-items-md-center link-box">
+    <div class="d-flex flex-column flex-md-row link-list">
       <span>
-        <a href="">客變</a>
-        <a href="">預售屋</a>
-        <a href="">格局</a>
+      <button><a href="">客變</a></button>
+      <button><a href="">預售屋</a></button>
+      <button><a href="">格局</a></button>
       </span>
-      <span class="ms-0 ms-sm-1 mt-3 mt-sm-0">
-        <a href="">裝修</a>
-        <a href="">中島式廚房</a>
-        <a href="">乾濕分離</a>
+      <span class="ms-0 ms-md-1 mt-3 mt-md-0">
+      <button><a href="">裝修</a></button>
+      <button><a href="">中島式廚房</a></button>
+        <button><a href="">乾濕分離</a></button>
       </span>
     </div>
     <div class="d-flex icon-box mt-2 mt-md-0">

layouts/about_mattress/about_mattress.html

@@ -13,23 +13,41 @@
     <section class="bhouseweb_loc_banner">
       <img src="/img/banner/bn_product@2x.png" class="banner-img card-img" alt="...">
     </section>
-    <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
-      <li class="nav-item" role="presentation">
-        <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
-      </li>
-      <li class="nav-item tab-item" role="presentation">
-        <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
-      </li>
-      <li class="nav-item tab-item" role="presentation">
-        <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
-      </li>
-      <li class="nav-item tab-item" role="presentation">
-        <a href="/about_mattress" id="mattress-tab" class="nav-link design-border">關於床墊</a>
-      </li>
-    </ul>
+    <!-- 手機版型 -->
+    <div class="mobile-tab d-block d-md-none">
+      <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
+      <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
+        </li>
+        <li class="nav-item tab-item nav-active" role="presentation">
+          <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
+        </li>
+      </ul>
+    </div>
+    <!-- 電腦版型 -->
+    <div class="d-none d-md-block">
+      <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
+        <li class="nav-item" role="presentation">
+          <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/about_mattress" id="mattress-tab" class="nav-link design-border">關於床墊</a>
+        </li>
+      </ul>
+    </div>
     <!-- 關於床墊 -->
     <div class="bhouseweb_loc_content" id="mattress">
-      <div class="container" style="margin-top: 100px;">
+      <div class="container" style="margin-top: 50px;">
         <div class="row mb-5 align-items-center b-bottom">
           <div class="col-12">
             <h5>小寶優居 zzsleeper吾居床墊</h5>

layouts/cabinet/list.html

@@ -15,16 +15,16 @@
       <div class="row g-3 mt-3">
         {{ $paginator := .Paginate .Data.Pages }}
         {{ range $paginator.Pages }}
-        <div class="col-12 col-md-6 mb-3 my-auto">
+        <div class="col-12 col-md-6 mb-4 my-auto">
           <div class="position-relative text-item">
             <a href="{{ .RelPermalink }}">
-              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
               <div>
-                <h4 style="line-height: 32px; padding: 10px 5px;">
+                <h4 style="line-height: 32px; width: 100%;">
                   {{ replace .Title "｜小寶優居・設計家具" "" }}<br>
                   <span style="font-size: 1rem;">{{ .Params.custom_title_value }}</span>
                 </h4>
               </div>
+              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
             </a>
           </div>
         </div>

layouts/desk/list.html

@@ -15,16 +15,16 @@
       <div class="row g-3 mt-3">
         {{ $paginator := .Paginate .Data.Pages }}
         {{ range $paginator.Pages }}
-        <div class="col-12 col-md-6 mb-3 my-auto">
+        <div class="col-12 col-md-6 mb-4 my-auto">
           <div class="position-relative text-item">
             <a href="{{ .RelPermalink }}">
-              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
               <div>
-                <h4 style="line-height: 32px; padding: 10px 5px;">
+                <h4 style="line-height: 32px; width: 100%;">
                   {{ replace .Title "｜小寶優居・設計家具" "" }}<br>
                   <span style="font-size: 1rem;">{{ .Params.custom_title_value }}</span>
                 </h4>
               </div>
+              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
             </a>
           </div>
         </div>

layouts/dining_chair/list.html

@@ -15,16 +15,16 @@
       <div class="row g-3 mt-3">
         {{ $paginator := .Paginate .Data.Pages }}
         {{ range $paginator.Pages }}
-        <div class="col-12 col-md-6 mb-3 my-auto">
+        <div class="col-12 col-md-6 mb-4 my-auto">
           <div class="position-relative text-item">
             <a href="{{ .RelPermalink }}">
-              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
               <div>
-                <h4 style="line-height: 32px; padding: 10px 5px;">
+                <h4 style="line-height: 32px; width: 100%;">
                   {{ replace .Title "｜小寶優居・設計家具" "" }}<br>
                   <span style="font-size: 1rem;">{{ .Params.custom_title_value }}</span>
                 </h4>
               </div>
+              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
             </a>
           </div>
         </div>

layouts/dining_table/list.html

@@ -15,16 +15,16 @@
       <div class="row g-3 mt-3">
         {{ $paginator := .Paginate .Data.Pages }}
         {{ range $paginator.Pages }}
-        <div class="col-12 col-md-6 mb-3 my-auto">
+        <div class="col-12 col-md-6 mb-4 my-auto">
           <div class="position-relative text-item">
             <a href="{{ .RelPermalink }}">
-              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
               <div>
-                <h4 style="line-height: 32px; padding: 10px 5px;">
+                <h4 style="line-height: 32px; width: 100%;">
                   {{ replace .Title "｜小寶優居・設計家具" "" }}<br>
                   <span style="font-size: 1rem;">{{ .Params.custom_title_value }}</span>
                 </h4>
               </div>
+              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
             </a>
           </div>
         </div>

layouts/mattress/list.html

@@ -15,16 +15,16 @@
       <div class="row g-3 mt-3">
         {{ $paginator := .Paginate .Data.Pages }}
         {{ range $paginator.Pages }}
-        <div class="col-12 col-md-6 mb-3 my-auto">
+        <div class="col-12 col-md-6 mb-4 my-auto">
           <div class="position-relative text-item">
             <a href="{{ .RelPermalink }}">
-              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
               <div>
-                <h4 style="line-height: 32px; padding: 10px 5px;">
+                <h4 style="line-height: 32px; width: 100%;">
                   {{ replace .Title "｜小寶優居・設計家具" "" }}<br>
                   <span style="font-size: 1rem;">{{ .Params.custom_title_value }}</span>
                 </h4>
               </div>
+              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
             </a>
           </div>
         </div>

layouts/other_furniture/list.html

@@ -15,16 +15,16 @@
       <div class="row g-3 mt-3">
         {{ $paginator := .Paginate .Data.Pages }}
         {{ range $paginator.Pages }}
-        <div class="col-12 col-md-6 mb-3 my-auto">
+        <div class="col-12 col-md-6 mb-4 my-auto">
           <div class="position-relative text-item">
             <a href="{{ .RelPermalink }}">
-              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
               <div>
-                <h4 style="line-height: 32px; padding: 10px 5px;">
+                <h4 style="line-height: 32px; width: 100%;">
                   {{ replace .Title "｜小寶優居・設計家具" "" }}<br>
                   <span style="font-size: 1rem;">{{ .Params.custom_title_value }}</span>
                 </h4>
               </div>
+              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
             </a>
           </div>
         </div>

layouts/side_cabinet/list.html

@@ -15,13 +15,13 @@
       <div class="row g-3 mt-3">
         {{ $paginator := .Paginate .Data.Pages }}
         {{ range $paginator.Pages }}
-        <div class="col-12 col-md-6 mb-3 my-auto">
+        <div class="col-12 col-md-6 mb-4 my-auto">
           <div class="position-relative text-item">
             <a href="{{ .RelPermalink }}">
-              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
               <div>
-                <h4>{{ replace .Title "｜小寶優居・設計家具" "" }}</h4>
+                <h4 style="line-height: 32px; width: 100%;">{{ replace .Title "｜小寶優居・設計家具" "" }}</h4>
               </div>
+              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
             </a>
           </div>
         </div>

layouts/side_table/list.html

@@ -15,16 +15,16 @@
       <div class="row g-3 mt-3">
         {{ $paginator := .Paginate .Data.Pages }}
         {{ range $paginator.Pages }}
-        <div class="col-12 col-md-6 mb-3 my-auto">
+        <div class="col-12 col-md-6 mb-4 my-auto">
           <div class="position-relative text-item">
             <a href="{{ .RelPermalink }}">
-              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
               <div>
-                <h4 style="line-height: 32px; padding: 10px 5px;">
+                <h4 style="line-height: 32px; width: 100%;">
                   {{ replace .Title "｜小寶優居・設計家具" "" }}<br>
                   <span style="font-size: 1rem;">{{ .Params.custom_title_value }}</span>
                 </h4>
               </div>
+              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
             </a>
           </div>
         </div>

layouts/sofa/list.html

@@ -15,16 +15,16 @@
       <div class="row g-3 mt-3">
         {{ $paginator := .Paginate .Data.Pages }}
         {{ range $paginator.Pages }}
-        <div class="col-12 col-md-6 mb-3 my-auto">
+        <div class="col-12 col-md-6 mb-4 my-auto">
           <div class="position-relative text-item">
             <a href="{{ .RelPermalink }}">
-              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
               <div>
-                <h4 style="line-height: 32px; padding: 10px 5px;">
+                <h4 style="line-height: 32px; width: 100%;">
                   {{ replace .Title "｜小寶優居・設計家具" "" }}<br>
                   <span style="font-size: 1rem;">{{ .Params.custom_title_value }}</span>
                 </h4>
               </div>
+              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
             </a>
           </div>
         </div>

layouts/solid_wood_furniture/solid_wood_furniture.html

@@ -13,23 +13,41 @@
     <section class="bhouseweb_loc_banner">
       <img src="/img/banner/bn_product@2x.png" class="banner-img card-img" alt="...">
     </section>
-    <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
-      <li class="nav-item" role="presentation">
-        <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
-      </li>
-      <li class="nav-item tab-item" role="presentation">
-        <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
-      </li>
-      <li class="nav-item tab-item" role="presentation">
-        <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link design-border">關於家具</a>
-      </li>
-      <li class="nav-item tab-item" role="presentation">
-        <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
-      </li>
-    </ul>
+    <!-- 手機版型 -->
+    <div class="mobile-tab d-block d-md-none">
+      <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
+      <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
+        </li>
+        <li class="nav-item tab-item nav-active" role="presentation">
+          <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
+        </li>
+      </ul>
+    </div>
+    <!-- 電腦版型 -->
+    <div class="d-none d-md-block">
+      <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
+        <li class="nav-item" role="presentation">
+          <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link design-border">關於家具</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
+        </li>
+      </ul>
+    </div>
     <!-- 關於家具 -->
     <div class="bhouseweb_loc_content" id="furniture">
-      <div class="container" style="margin-top: 100px;">
+      <div class="container" style="margin-top: 50px;">
         <div class="row mb-5 pb-5 align-items-center b-bottom">
           <div class="col-12 col-lg-6">
             <img src="/img/system_furniture/bn_product_cabinet_01@2x.webp" alt="">

layouts/store/store.html

@@ -13,36 +13,30 @@
   </section>
   <!-- <div class="store-banner"></div> -->
   <div class="brand_content">
-    <div class="card bg-transparent border-0 rounded-0 my-80">
-      <img src="/img/store/icon_store@2x.png" class="sec01_store_map_img card-img rounded-0" alt="...">
-
-      <div class="card-img-overlay">
-        <div class="store_cta_box_reserve">
+    <div class="card bg-transparent border-0 rounded-0">
+      <img src="/img/store/地圖.png" class="sec01_store_map_img card-img rounded-0" alt="...">
+      <div class="store_cta_box_reserve">
+        <div class="store_cta">
+          可服務地區
+        </div>
+        <div class="store_cta_text mt-15">
+          <p>立即<a href="">預約諮詢</a></p>
+        </div>
+      </div>
+      <div class="d-flex justify-content-end store_cta_box">
+        <div class="store_cta_box_form">
           <div class="store_cta">
-            可服務地區
+            需專人評估地區
           </div>
           <div class="store_cta_text mt-15">
-            <p>立即<a href="">預約諮詢</a></p>
-          </div>
-        </div>
-        <div class="d-flex justify-content-end">
-          <div class="store_cta_box_form">
-            <div class="store_cta">
-              需專人評估地區
-            </div>
-            <div class="store_cta_text mt-15">
-              <p>請填寫<a href="">評估表單</a>，將會有專人致電諮詢與評估</p>
-            </div>
+            <p>請填寫<a href="">評估表單</a>，將會有專人致電諮詢與評估</p>
           </div>
         </div>
       </div>
     </div>
-
-
   </div>
-  <div class="text-center">
+  <div class="text-center store-tab">
     <ul class="nav d-flex nav-pills flex-wrap justify-content-center" id="pills-tab" role="tablist">
-
       <ul class="nav d-flex nav-pills flex-wrap" id="pills-tab" role="tablist">
         <li class="nav-item active p-0" role="presentation">
           <a class="nav-item-link nav-item-active bg-transparent active" id="pills-north-tab" data-bs-toggle="pill"
@@ -61,9 +55,9 @@
         </li>
       </ul>
   </div>
-  <hr class="bhouse_line mt-0">
+  <span class="line store-line"></span>
   <div class="brand_content">
-    <div class="tab-content mt-5" id="pills-tabContent">
+    <div class="tab-content" id="pills-tabContent">
       <div class="tab-pane fade active show" id="pills-north" role="tabpanel" aria-labelledby="pills-north-tab">
         <div class="row px-0 mx-0 mb-5">
           <div class="col-md-8">
@@ -103,8 +97,8 @@
               </div>
             </div>
           </div>
-          <hr class="bhouse_line mt-30">
         </div>
+        <span class="line store-line"></span>
         <div class="row px-0 mx-0">
           <div class="col-md-8">
             <img class="img-fluid" src="/img/store/taoyuan.webp" alt="">
@@ -222,7 +216,8 @@
       </div>
     </div>
   </div>
-  <hr class="bhouse_line">
+  <span class="line store-line mx-0"></span>
+  <!-- <hr class="bhouse_line"> -->
   </div>
   </div>
   <div class="brand_content">

layouts/system_furniture/system_furniture.html

@@ -13,23 +13,41 @@
     <section class="bhouseweb_loc_banner">
       <img src="/img/banner/bn_product@2x.png" class="banner-img card-img" alt="...">
     </section>
-    <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
-      <li class="nav-item" role="presentation">
-        <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
-      </li>
-      <li class="nav-item tab-item" role="presentation">
-        <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link design-border">關於系統櫃</a>
-      </li>
-      <li class="nav-item tab-item" role="presentation">
-        <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
-      </li>
-      <li class="nav-item tab-item" role="presentation">
-        <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
-      </li>
-    </ul>
+    <!-- 手機版型 -->
+    <div class="mobile-tab d-block d-md-none">
+      <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
+      <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
+        <li class="nav-item tab-item nav-active" role="presentation">
+          <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
+        </li>
+      </ul>
+    </div>
+    <!-- 電腦版型 -->
+    <div class="d-none d-md-block">
+      <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
+        <li class="nav-item" role="presentation">
+          <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link design-border">關於系統櫃</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
+        </li>
+      </ul>
+    </div>
     <!-- 關於系統櫃 -->
     <div class="bhouseweb_loc_content" id="systeam-furniture">
-      <div class="container" style="margin-top: 100px;">
+      <div class="container" style="margin-top: 50px;">
         <div class="row gy-5 mb-5 pb-5 align-items-center b-bottom">
           <div class="col-12 col-lg-6">
             <img src="/img/system_furniture/bn_product_cabinet_01@2x.webp" alt="">
@@ -62,7 +80,8 @@
               符合『國家經濟部標準檢驗局』F1等級<br>
               (最低甲醛釋出量，且無添加甲醛物質)<br><br>
               符合『歐盟 』E1等級<br>
-              (最低甲醛釋出量，且無添加甲醛物質)</p>
+              (最低甲醛釋出量，且無添加甲醛物質)
+            </p>
           </div>
           <div class="col-12 col-lg-6 cabinet-03">
             <img src="/img/system_furniture/bn_product_cabinet_04@2x.png" alt="">

layouts/wardrobe/list.html

@@ -15,16 +15,16 @@
       <div class="row g-3 mt-3">
         {{ $paginator := .Paginate .Data.Pages }}
         {{ range $paginator.Pages }}
-        <div class="col-12 col-md-6 mb-3 my-auto">
+        <div class="col-12 col-md-6 mb-4 my-auto">
           <div class="position-relative text-item">
             <a href="{{ .RelPermalink }}">
-              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
               <div>
-                <h4 style="line-height: 32px; padding: 10px 5px;">
+                <h4 style="line-height: 32px; width: 100%;">
                   {{ replace .Title "｜小寶優居・系統家具" "" }}<br>
                 <span style="font-size: 1rem;">{{ .Params.custom_title_value }}</span>
               </h4>
               </div>
+              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
             </a>
           </div>
         </div>

themes/hugo-universal-theme-master/layouts/partials/furniture_design.html

@@ -2,23 +2,41 @@
   <section class="bhouseweb_loc_banner">
     <img src="/img/banner/bn_product@2x.png" class="banner-img card-img" alt="...">
   </section>
-  <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
-    <li class="nav-item" role="presentation">
-      <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link design-border">全部設計單品</a>
-    </li>
-    <li class="nav-item tab-item" role="presentation">
-      <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
-    </li>
-    <li class="nav-item tab-item" role="presentation">
-      <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
-    </li>
-    <li class="nav-item tab-item" role="presentation">
-      <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
-    </li>
-  </ul>
+  <!-- 手機版型 -->
+  <div class="mobile-tab d-block d-md-none">
+    <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
+    <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
+      <li class="nav-item tab-item" role="presentation">
+        <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
+      </li>
+      <li class="nav-item tab-item" role="presentation">
+        <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
+      </li>
+      <li class="nav-item tab-item" role="presentation">
+        <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
+      </li>
+    </ul>
+  </div>
+  <!-- 電腦版型 -->
+  <div class="d-none d-md-block">
+    <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
+      <li class="nav-item" role="presentation">
+        <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link design-border">全部設計單品</a>
+      </li>
+      <li class="nav-item tab-item" role="presentation">
+        <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
+      </li>
+      <li class="nav-item tab-item" role="presentation">
+        <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
+      </li>
+      <li class="nav-item tab-item" role="presentation">
+        <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
+      </li>
+    </ul>
+  </div>
 
   <div class="bhouseweb_loc_content">
-    <ul class="design-list m-0">
+    <ul class="design-list mb-3 m-md-0">
       <li><a id="sofa" class="nav-link" href="/furniture_design/sofa/">沙發</a></li>
       <li><a id="side_table" class="nav-link" href="/furniture_design/side_table">茶几</a></li>
       <li><a id="dining_table" class="nav-link" href="/furniture_design/dining_table">餐桌</a></li>
@@ -37,15 +55,15 @@
 
 <script>
   // 儲存點擊的 Link ID 後加上 Class Name
-  window.onload = function () {
     // 預設沙發頁
     if (window.location.pathname === '/furniture_design/sofa/') {
       localStorage.setItem('assignLink', 'sofa');
     }
 
-    let linkList = document.querySelectorAll(".design-list .nav-link");
+    let linkList = document.querySelectorAll(".furniture-design .nav-link");
     for (let i = 0; i < linkList.length; i++) {
       linkList[i].addEventListener("click", function (e) {
+        console.log('e.target.id',e.target.id);
         localStorage.setItem('assignLink', e.target.id);
       });
     }
@@ -53,5 +71,5 @@
     let linkID = localStorage.getItem('assignLink');
     let link = document.querySelector(`.design-list #${linkID}`);
     link.classList.add("assign-link");
-  }
+  
 </script>

themes/hugo-universal-theme-master/layouts/shortcodes/furniture_design.html

@@ -1,24 +1,41 @@
 <section class="bhouseweb_loc_banner">
   <img src="/img/banner/bn_product@2x.png" class="banner-img card-img" alt="...">
 </section>
-
-<ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
-  <li class="nav-item" role="presentation">
-    <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link design-border">全部設計單品</a>
-  </li>
-  <li class="nav-item tab-item" role="presentation">
-    <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
-  </li>
-  <li class="nav-item tab-item" role="presentation">
-    <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
-  </li>
-  <li class="nav-item tab-item" role="presentation">
-    <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
-  </li>
-</ul>
+<!-- 手機版型 -->
+<div class="mobile-tab d-block d-md-none">
+  <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
+  <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
+    <li class="nav-item tab-item" role="presentation">
+      <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
+    </li>
+    <li class="nav-item tab-item" role="presentation">
+      <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
+    </li>
+    <li class="nav-item tab-item nav-active" role="presentation">
+      <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
+    </li>
+  </ul>
+</div>
+<!-- 電腦版型 -->
+<div class="d-none d-md-block">
+  <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
+    <li class="nav-item" role="presentation">
+      <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
+    </li>
+    <li class="nav-item tab-item" role="presentation">
+      <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
+    </li>
+    <li class="nav-item tab-item" role="presentation">
+      <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
+    </li>
+    <li class="nav-item tab-item" role="presentation">
+      <a href="/about_mattress" id="mattress-tab" class="nav-link design-border">關於床墊</a>
+    </li>
+  </ul>
+</div>
 
 <div class="bhouseweb_loc_content">
-  <ul class="design-list m-0">
+  <ul class="design-list mb-3 m-md-0">
     <li><a id="sofa" class="nav-link" href="/furniture_design/sofa/">沙發</a></li>
     <li><a id="side_table" class="nav-link" href="/furniture_design/side_table">茶几</a></li>
     <li><a id="dining_table" class="nav-link" href="/furniture_design/dining_table">餐桌</a></li>
@@ -41,6 +58,7 @@
   }
 
   let linkList = document.querySelectorAll(".design-list .nav-link");
+  console.log('清單 linkList',linkList);
   for (let i = 0; i < linkList.length; i++) {
     linkList[i].addEventListener("click", function (e) {
       localStorage.setItem('assignLink', e.target.id);

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

@@ -73,6 +73,12 @@ img {
   }
 }
 
+.line {
+  display: block;
+  margin: 50px 0;
+  border-bottom: 1px solid var(--dark-gray);
+}
+
 .bhouseweb_loc_line {
   background: var(--dark-gray);
   height: 1px;
@@ -1351,6 +1357,10 @@ img {
   }
 }
 
+.style_house_sec04 p {
+  font-family: NSJP-500;
+}
+
 .style_house_sec05 {
   margin-top: 50px;
   margin-bottom: 100px;
@@ -1832,7 +1842,7 @@ img {
 .blog_article .img-text p {
   margin: 0;
   padding: 20px 60px;
-  background-color: rgba(128, 143, 76, 0.6);
+  background-color: #808f4c;
   text-align: start;
   color: #ffffff;
   font-size: 14px;
@@ -1902,7 +1912,6 @@ img {
 }
 
 .blog_article .link-box .link-list a {
-  margin: 0;
   text-decoration: none;
   padding: 7px 10px;
   background: #808e4c;
@@ -1910,6 +1919,7 @@ img {
   -webkit-transition: 0.3s;
   transition: 0.3s;
   border: 1px solid #808e4c;
+  font-weight: bold;
 }
 
 .blog_article .link-box .link-list a:hover {
@@ -1931,18 +1941,23 @@ img {
 }
 
 .blog_article .read-more-list li {
-  margin: 10px 0;
+  margin: 15px 0;
   font-weight: bold;
 }
 
+@media (max-width: 575px) {
+  .blog_article .read-more-list li {
+    margin: 20px 0;
+  }
+}
+
 .blog_article .read-more-list a {
   color: var(--main-color);
 }
 
-.blog_article .line {
-  display: block;
-  margin: 50px 0;
-  border-bottom: 1px solid var(--dark-gray);
+.blog_article button {
+  border: none;
+  margin: 1px;
 }
 
 /* 成家知識專欄-article end */
@@ -1974,6 +1989,18 @@ img {
   margin: 0 auto;
 }
 
+@media (max-width: 991px) {
+  .furniture_design_content {
+    width: 75%;
+  }
+}
+
+@media (max-width: 575px) {
+  .furniture_design_content {
+    width: 90%;
+  }
+}
+
 .furniture-design p {
   padding-right: 15px;
   text-align: justify;
@@ -2009,26 +2036,29 @@ img {
 }
 
 .furniture-design .nav-link {
-  font-weight: bold;
   font-size: 14px;
   color: var(--dark-color);
 }
 
 .furniture-design .tab-title .nav-item {
   width: 200px;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
 }
 
 .furniture-design .tab-title .nav-link {
-  margin: 0 30px;
+  margin: atuo;
   font-size: 18px;
+  font-family: NSJP-400;
 }
 
 .furniture-design ul {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
   list-style: none;
 }
 
@@ -2051,8 +2081,23 @@ img {
   list-style: none;
 }
 
+@media (max-width: 767px) {
+  .furniture-design .design-list a {
+    border: 1px solid #d9d9d9;
+  }
+  .furniture-design .design-list a:hover {
+    background-color: #d9d9d9;
+  }
+}
+
 .furniture-design .design-list li {
-  margin: 5px 10px;
+  margin: 5px 10px 0px;
+}
+
+@media (max-width: 767px) {
+  .furniture-design .design-list li {
+    margin: 5px 10px;
+  }
 }
 
 .furniture-design .sub-tab-content h4 {
@@ -2069,26 +2114,7 @@ img {
   font-family: NSJP-500;
 }
 
-.furniture-design .sub-tab-content img {
-  height: 350px;
-  -o-object-fit: cover;
-  object-fit: cover;
-  -o-object-position: center;
-  object-position: center;
-}
-
-@media screen and (max-width: 767px) {
-  .furniture-design .sub-tab-content img {
-    height: 350px;
-  }
-}
-
 .furniture-design .sub-tab-content .text-item div {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -2102,26 +2128,6 @@ img {
   transition: all 0.3s;
 }
 
-.furniture-design .sub-tab-content .text-item:hover div {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  background: rgba(128, 142, 76, 0.8);
-  cursor: pointer;
-}
-
-.furniture-design .sub-tab-content .text-item:hover div h4 {
-  background-color: transparent;
-}
-
 .furniture-design .sub-tab-content .mattress-text-box {
   width: 400px;
 }
@@ -2155,6 +2161,12 @@ img {
   }
 }
 
+@media (max-width: 767px) {
+  .furniture-design .nav-pills {
+    padding-top: 15px;
+  }
+}
+
 .furniture-design #systeam-furniture .cabinet-03 {
   height: 500px;
   display: -webkit-box;
@@ -2208,6 +2220,64 @@ img {
   letter-spacing: 2px;
 }
 
+.furniture-design .mobile-tab {
+  padding: 20px;
+  letter-spacing: 1px;
+}
+
+@media (max-width: 475px) {
+  .furniture-design .mobile-tab {
+    padding: 10px;
+  }
+}
+
+.furniture-design .mobile-tab ul {
+  padding-bottom: 20px;
+}
+
+.furniture-design .mobile-tab #all-design-tab {
+  text-align: center;
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.furniture-design .mobile-tab #pills-tab .nav-item {
+  width: 100%;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+}
+
+@media (max-width: 475px) {
+  .furniture-design .mobile-tab #pills-tab .nav-item {
+    width: auto;
+    margin: auto;
+  }
+}
+
+.furniture-design .mobile-tab #pills-tab .nav-item:hover {
+  background: #68686b;
+}
+
+.furniture-design .mobile-tab #pills-tab .nav-active {
+  background: #68686b;
+}
+
+.furniture-design .mobile-tab #pills-tab a {
+  font-size: 1rem !important;
+}
+
+.furniture-design .mobile-tab .nav-link {
+  margin: auto;
+}
+
+.furniture-design .mobile-tab .tab-title {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+}
+
 .tw-85 {
   width: 85%;
 }
@@ -2247,6 +2317,13 @@ img {
 }
 
 .design-container ul {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   padding: 0;
   list-style: none;
 }
@@ -2259,59 +2336,22 @@ img {
   width: 60%;
 }
 
-@media (max-width: 767px) {
-  .design-container .slider-box {
-    width: 100%;
-  }
-}
-
-.design-container .slider-design .design-img img {
-  width: 96.3%;
-  max-height: 400px;
-  -o-object-fit: cover;
-  object-fit: cover;
-}
-
-@media (max-width: 991px) {
-  .design-container .slider-design .design-img img {
-    margin: auto;
-    max-width: 98%;
-  }
+.design-container .slider-box .slider {
+  margin-right: 20px;
 }
 
 @media (max-width: 767px) {
-  .design-container .slider-design .design-img img {
-    width: 530px;
-    max-width: 100%;
-    padding-right: 1%;
-  }
-}
-
-@media (max-width: 575px) {
-  .design-container .slider-design .design-img img {
-    padding-right: 0;
-    padding: 0 1.5% 0 1%;
+  .design-container .slider-box {
+    width: 100%;
   }
 }
 
 .design-container .slider-nav img {
-  width: 90%;
-  height: 130px;
-  -o-object-fit: cover;
-  object-fit: cover;
   cursor: pointer;
 }
 
-.design-container .slider-nav .slick-slide {
-  width: 33% !important;
-}
-
-.design-container .slider-nav .slick-list {
-  padding: 0 !important;
-}
-
 .design-container .slider-nav .middle-item {
-  margin: auto;
+  padding: 0 5px;
 }
 
 .furniture-design .design-border {
@@ -2377,6 +2417,9 @@ img {
   .brand_content {
     width: 95%;
   }
+  .store-line {
+    margin: 35px 20px;
+  }
 }
 
 .brand_sec01,
@@ -2438,28 +2481,50 @@ img {
 }
 
 .sec01_store_map_img {
-  width: 40%;
+  width: 100%;
+  height: 700px;
   margin: 0 auto;
+  position: relative;
+  -o-object-fit: contain;
+     object-fit: contain;
 }
 
 @media screen and (max-width: 767px) {
   .sec01_store_map_img {
-    width: 38%;
+    width: 80%;
+    height: 400px;
+  }
+}
+
+@media screen and (max-width: 575px) {
+  .sec01_store_map_img {
+    margin-left: 20px;
   }
 }
 
 .store_cta_box_reserve {
-  width: 150px;
-  margin-top: 80px;
-  position: relative;
-  left: 50px;
+  position: absolute;
+  left: 30px;
+  top: 100px;
 }
 
-@media screen and (max-width: 767px) {
+@media screen and (max-width: 1200px) {
   .store_cta_box_reserve {
-    margin-top: 10px;
     left: -10px;
-    width: 120px;
+    top: 130px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .store_cta_box_reserve {
+    left: 30px;
+    top: 50px;
+  }
+}
+
+@media screen and (max-width: 575px) {
+  .store_cta_box_reserve {
+    left: 15px;
   }
 }
 
@@ -2511,16 +2576,32 @@ img {
   }
 }
 
+.store_cta_box {
+  position: absolute;
+  top: 40%;
+  right: -70px;
+}
+
+@media screen and (max-width: 1200px) {
+  .store_cta_box {
+    right: -170px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .store_cta_box {
+    right: 0px;
+  }
+}
+
 .store_cta_box_form {
   margin-top: 70px;
   position: relative;
-  left: 50px;
 }
 
 @media screen and (max-width: 767px) {
   .store_cta_box_form {
-    margin-top: 10px;
-    left: 10px;
+    left: -10px;
   }
 }
 
@@ -2582,54 +2663,67 @@ img {
   opacity: 0.7;
 }
 
-#pills-tab a {
-  color: #68686b;
+.store-tab #pills-tab a,
+.mobile-tab #pills-tab a {
+  color: #fff;
   text-decoration: none;
   font-size: 1.2rem;
   font-family: NSJP-400;
 }
 
-#pills-tab .nav-item {
+.store-tab #pills-tab .nav-item,
+.mobile-tab #pills-tab .nav-item {
   margin: 0 0.8rem;
   width: auto;
+  background: #808e4c;
 }
 
-#pills-tab .nav-item-link {
-  display: block;
-  padding: 0.5rem 1rem;
-  margin: 0 2rem;
+@media screen and (max-width: 575px) {
+  .store-tab #pills-tab .nav-item,
+  .mobile-tab #pills-tab .nav-item {
+    margin: 0 0.5rem;
+  }
+}
+
+.store-tab #pills-tab .nav-item-link,
+.mobile-tab #pills-tab .nav-item-link {
   text-decoration: none;
-  background-color: transparent;
-  font-size: 1.2rem;
-  color: #68686b;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-  -webkit-appearance: none !important;
-  border-bottom: 2px solid #fff;
-  font-family: NSJP-500;
+  margin: 0 0.1rem;
+  padding: 0.5rem 1.8rem;
+  background: #808e4c;
+  color: #fff;
+  margin-right: 5px;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+  font-family: NSJP-400;
+  letter-spacing: 2px;
+  text-align: center;
+  margin: 0;
 }
 
-@media screen and (max-width: 1200px) {
-  #pills-tab .nav-item-link {
-    padding: 0.5rem 0.8rem;
-  }
+.store-tab #pills-tab .nav-item-link:hover,
+.mobile-tab #pills-tab .nav-item-link:hover {
+  background: #68686b !important;
 }
 
-@media screen and (max-width: 767px) {
-  #pills-tab .nav-item-link {
-    margin: 0 0rem;
+@media screen and (max-width: 575px) {
+  .store-tab #pills-tab .nav-item-link,
+  .mobile-tab #pills-tab .nav-item-link {
+    font-size: 16px;
+    padding: 0.2rem 1rem;
   }
 }
 
-@media screen and (max-width: 375px) {
-  #pills-tab .nav-item-link {
-    padding: 0rem 0.5rem;
+@media screen and (max-width: 767px) {
+  .store-tab #pills-tab .nav-item-link {
+    margin: 0 0rem;
   }
 }
 
-#pills-tab .nav-item-link.active {
-  color: #68686b;
-  border-bottom: 2px solid #68686b;
+.store-tab #pills-tab .nav-item-link.active,
+.mobile-tab #pills-tab .nav-item-link.active {
+  color: #fff;
+  background: #68686b !important;
 }
 
 /* .tab-content {
@@ -2681,4 +2775,11 @@ img {
 .assign-link {
   border-bottom: 2px solid var(--second-color);
 }
+
+@media (max-width: 767px) {
+  .assign-link {
+    border-bottom: none;
+    background-color: #d9d9d9;
+  }
+}
 /*# sourceMappingURL=style.bhouse.css.map */

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

@@ -75,6 +75,12 @@ img {
   }
 }
 
+.line {
+  display: block;
+  margin: 50px 0;
+  border-bottom: 1px solid var(--dark-gray);
+}
+
 .bhouseweb_loc_line {
   background: var(--dark-gray);
   height: 1px;
@@ -1376,6 +1382,10 @@ img {
   }
 }
 
+.style_house_sec04 p {
+  font-family: NSJP-500;
+}
+
 .style_house_sec05 {
   margin-top: 50px;
   margin-bottom: 100px;
@@ -1862,7 +1872,7 @@ img {
   p {
     margin: 0;
     padding: 20px 60px;
-    background-color: rgba(128, 143, 76, 0.6);
+    background-color: rgb(128, 143, 76);
     text-align: start;
     color: #ffffff;
     font-size: 14px;
@@ -1994,7 +2004,6 @@ img {
 }
 
 .blog_article .link-box .link-list a {
-  margin: 0;
   text-decoration: none;
   padding: 7px 10px;
   background: #808e4c;
@@ -2002,6 +2011,7 @@ img {
   -webkit-transition: 0.3s;
   transition: 0.3s;
   border: 1px solid #808e4c;
+  font-weight: bold;
 }
 
 .blog_article .link-box .link-list a:hover {
@@ -2023,18 +2033,20 @@ img {
 }
 
 .blog_article .read-more-list li {
-  margin: 10px 0;
+  margin: 15px 0;
   font-weight: bold;
+  @media (max-width: 575px) {
+    margin: 20px 0;
+  }
 }
 
 .blog_article .read-more-list a {
   color: var(--main-color);
 }
 
-.blog_article .line {
-  display: block;
-  margin: 50px 0;
-  border-bottom: 1px solid var(--dark-gray);
+.blog_article button {
+  border: none;
+  margin: 1px;
 }
 
 /* 成家知識專欄-article end */
@@ -2066,6 +2078,13 @@ img {
 .furniture_design_content {
   width: 55%;
   margin: 0 auto;
+  @media (max-width: 991px) {
+      width: 75%;
+  }
+  
+  @media (max-width: 575px) {
+      width: 90%;
+  }
 }
 .furniture-design p {
   padding-right: 15px;
@@ -2099,23 +2118,24 @@ img {
 }
 
 .furniture-design .nav-link {
-  font-weight: bold;
   font-size: 14px;
   color: var(--dark-color);
 }
 
 .furniture-design .tab-title .nav-item {
   width: 200px;
+  justify-content: center;
 }
 
 .furniture-design .tab-title .nav-link {
-  margin: 0 30px;
+  margin: atuo;
   font-size: 18px;
+  font-family: NSJP-400;
 }
 
 .furniture-design ul {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   list-style: none;
 }
 
@@ -2130,10 +2150,21 @@ img {
   display: flex;
   flex-wrap: wrap;
   list-style: none;
+  @media (max-width: 767px) {
+    a {
+      border: 1px solid #d9d9d9;
+      &:hover {
+        background-color: #d9d9d9;
+      }
+    }
+  }
 }
 
 .furniture-design .design-list li {
-  margin: 5px 10px;
+  margin: 5px 10px 0px;
+  @media (max-width: 767px) {
+    margin: 5px 10px;
+  }
 }
 
 .furniture-design .sub-tab-content h4 {
@@ -2149,26 +2180,29 @@ img {
   font-family: NSJP-500;
 }
 
-.furniture-design .sub-tab-content img {
-  height: 350px;
-  -o-object-fit: cover;
-  object-fit: cover;
-  -o-object-position: center;
-  object-position: center;
-}
+// .furniture-design .sub-tab-content img {
+//   height: 350px;
+//   -o-object-fit: cover;
+//   object-fit: cover;
+//   -o-object-position: center;
+//   object-position: center;
+// }
 
-@media screen and (max-width: 767px) {
-  .furniture-design .sub-tab-content img {
-    height: 350px;
-  }
-}
+// @media screen and (max-width: 767px) {
+//   .furniture-design .sub-tab-content img {
+//     height: 350px;
+//   }
+// }
 
 .furniture-design .sub-tab-content .text-item div {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
+  // position: absolute;
+  // top: 50%;
+  // left: 50%;
+  // -webkit-transform: translate(-50%, -50%);
+  // transform: translate(-50%, -50%);
+  // top: 0;
+  // left: 0;
+  // right: 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -2182,25 +2216,25 @@ img {
   transition: all 0.3s;
 }
 
-.furniture-design .sub-tab-content .text-item:hover div {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  background: rgba(128, 142, 76, 0.8);
-  cursor: pointer;
-}
+// .furniture-design .sub-tab-content .text-item:hover div {
+//   display: -webkit-box;
+//   display: -ms-flexbox;
+//   display: flex;
+//   -webkit-box-pack: center;
+//   -ms-flex-pack: center;
+//   justify-content: center;
+//   -webkit-box-align: center;
+//   -ms-flex-align: center;
+//   align-items: center;
+//   width: 100%;
+//   height: 100%;
+//   background: rgba(128, 142, 76, 0.8);
+//   cursor: pointer;
+// }
 
-.furniture-design .sub-tab-content .text-item:hover div h4 {
-  background-color: transparent;
-}
+// .furniture-design .sub-tab-content .text-item:hover div h4 {
+//   background-color: transparent;
+// }
 
 .furniture-design .sub-tab-content .mattress-text-box {
   width: 400px;
@@ -2236,6 +2270,12 @@ img {
   }
 }
 
+@media (max-width: 767px) {
+  .furniture-design .nav-pills {
+    padding-top: 15px;
+  }
+}
+
 .furniture-design #systeam-furniture .cabinet-03 {
   height: 500px;
   display: -webkit-box;
@@ -2289,6 +2329,48 @@ img {
   letter-spacing: 2px;
 }
 
+.furniture-design .mobile-tab {
+  padding: 20px;
+  letter-spacing: 1px;
+  @media (max-width: 475px) {
+    padding: 10px;
+  }
+  ul {
+    padding-bottom: 20px;
+  }
+  #all-design-tab {
+    text-align: center;
+    font-weight: bold;
+    font-size: 18px;
+  }
+  #pills-tab {
+    .nav-item {
+      width: 100%;
+      transition: all .3s;
+      @media (max-width: 475px) {
+        width: auto;
+        margin: auto;
+      }
+      &:hover {
+        background: #68686b;
+      }
+    }
+    .nav-active {
+      background: #68686b;
+    }
+    a {
+      font-size: 1rem !important;
+    }
+  }
+  .nav-link {
+    margin: auto;
+  }
+  .tab-title {
+display: flex;
+flex-wrap: nowrap;
+  }
+}
+
 .tw-85 {
   width: 85%;
 }
@@ -2328,6 +2410,8 @@ img {
 }
 
 .design-container ul {
+  display: flex;
+  flex-direction: column;
   padding: 0;
   list-style: none;
 }
@@ -2338,6 +2422,9 @@ img {
 
 .design-container .slider-box {
   width: 60%;
+  .slider {
+    margin-right: 20px;
+  }
 }
 
 @media (max-width: 767px) {
@@ -2346,55 +2433,59 @@ img {
   }
 }
 
-.design-container .slider-design .design-img img {
-  width: 96.3%;
-  max-height: 400px;
-  -o-object-fit: cover;
-  object-fit: cover;
-}
+// .design-container .slider-design .design-img img {
+//   width: 96.3%;
+//   max-height: 400px;
+//   -o-object-fit: cover;
+//   object-fit: cover;
+// }
 
-@media (max-width: 991px) {
-  .design-container .slider-design .design-img img {
-    margin: auto;
-    max-width: 98%;
-  }
-}
+// @media (max-width: 991px) {
+//   .design-container .slider-design .design-img img {
+//     margin: auto;
+//     max-width: 98%;
+//   }
+// }
 
-@media (max-width: 767px) {
-  .design-container .slider-design .design-img img {
-    width: 530px;
-    max-width: 100%;
-    padding-right: 1%;
-  }
-}
+// @media (max-width: 767px) {
+//   .design-container .slider-design .design-img img {
+//     width: 530px;
+//     max-width: 100%;
+//     padding-right: 1%;
+//   }
+// }
 
-@media (max-width: 575px) {
-  .design-container .slider-design .design-img img {
-    padding-right: 0;
-    padding: 0 1.5% 0 1%;
-  }
-}
+// @media (max-width: 575px) {
+//   .design-container .slider-design .design-img img {
+//     padding-right: 0;
+//     padding: 0 1.5% 0 1%;
+//   }
+// }
 
 .design-container .slider-nav img {
-  width: 90%;
-  height: 130px;
-  -o-object-fit: cover;
-  object-fit: cover;
+  // width: 90%;
+  // height: 130px;
+  // -o-object-fit: cover;
+  // object-fit: cover;
   cursor: pointer;
 }
 
-.design-container .slider-nav .slick-slide {
-  width: 33% !important;
-}
+// .design-container .slider-nav .slick-slide {
+//   width: 33% !important;
+// }
 
-.design-container .slider-nav .slick-list {
-  padding: 0 !important;
-}
+// .design-container .slider-nav .slick-list {
+//   padding: 0 !important;
+// }
 
 .design-container .slider-nav .middle-item {
-  margin: auto;
+  padding: 0 5px;
 }
 
+// .design-container .slider-nav .middle-item img {
+// padding: 0 5px;
+// }
+
 .furniture-design .design-border {
   border-bottom: 2px solid var(--second-color);
   border-radius: 0;
@@ -2459,6 +2550,9 @@ img {
   .brand_content {
     width: 95%;
   }
+  .store-line {
+    margin: 35px 20px;
+  }
 }
 
 .brand_sec01,
@@ -2520,28 +2614,38 @@ img {
 }
 
 .sec01_store_map_img {
-  width: 40%;
+  width: 100%;
+  height: 700px;
   margin: 0 auto;
-}
-
-@media screen and (max-width: 767px) {
-  .sec01_store_map_img {
-    width: 38%;
+  position: relative;
+  object-fit: contain;
+  @media screen and (max-width: 767px) {
+    width: 80%;
+    height: 400px;
+  }
+  @media screen and (max-width: 575px) {
+    margin-left: 20px;
   }
 }
 
 .store_cta_box_reserve {
-  width: 150px;
-  margin-top: 80px;
-  position: relative;
-  left: 50px;
-}
-
-@media screen and (max-width: 767px) {
-  .store_cta_box_reserve {
-    margin-top: 10px;
+  // width: 150px;
+  // margin-top: 80px;
+  // position: relative;
+  // left: 50px;
+  position: absolute;
+  left: 30px;
+  top: 100px;
+  @media screen and (max-width: 1200px) {
     left: -10px;
-    width: 120px;
+    top: 130px;
+  }
+  @media screen and (max-width: 767px) {
+    left: 30px;
+    top: 50px;
+  }
+  @media screen and (max-width: 575px) {
+    left: 15px;
   }
 }
 
@@ -2592,16 +2696,26 @@ img {
   }
 }
 
+.store_cta_box {
+  position: absolute;
+  top: 40%;
+  right: -70px;
+  @media screen and (max-width: 1200px) {
+    right: -170px;
+  }
+  @media screen and (max-width: 767px) {
+    right: 0px;
+  }
+}
+
 .store_cta_box_form {
   margin-top: 70px;
   position: relative;
-  left: 50px;
 }
 
 @media screen and (max-width: 767px) {
   .store_cta_box_form {
-    margin-top: 10px;
-    left: 10px;
+    left: -10px;
   }
 }
 
@@ -2661,54 +2775,84 @@ img {
   }
 }
 
-#pills-tab a {
-  color: #68686b;
+.store-tab #pills-tab a,
+.mobile-tab #pills-tab a {
+  color: #fff;
   text-decoration: none;
   font-size: 1.2rem;
   font-family: NSJP-400;
 }
 
-#pills-tab .nav-item {
+.store-tab #pills-tab .nav-item,
+.mobile-tab #pills-tab .nav-item {
   margin: 0 0.8rem;
   width: auto;
+  background: #808e4c;
+  @media screen and (max-width: 575px) {
+    margin: 0 0.5rem;
+  }
 }
 
-#pills-tab .nav-item-link {
-  display: block;
-  padding: 0.5rem 1rem;
-  margin: 0 2rem;
+.store-tab #pills-tab .nav-item-link,
+.mobile-tab #pills-tab .nav-item-link {
   text-decoration: none;
-  background-color: transparent;
-  font-size: 1.2rem;
-  color: #68686b;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-  -webkit-appearance: none !important;
-  border-bottom: 2px solid #fff;
-  font-family: NSJP-500;
-}
-
-@media screen and (max-width: 1200px) {
-  #pills-tab .nav-item-link {
-    padding: 0.5rem 0.8rem;
+  margin: 0 0.1rem;
+  padding: 0.5rem 1.8rem;
+  background: #808e4c;
+  color: #fff;
+  margin-right: 5px;
+  transition: 0.3s;
+  // border: 1px solid #808e4c;
+  font-family: NSJP-400;
+  letter-spacing: 2px;
+  text-align: center;
+  margin: 0;
+  &:hover {
+    background: #68686b !important;
   }
-}
+  @media screen and (max-width: 575px) {
+    font-size: 16px;
+    padding: 0.2rem 1rem;
+  }
+}
+
+// #pills-tab .nav-item-link {
+//   display: block;
+//   padding: 0.5rem 1rem;
+//   margin: 0 2rem;
+//   text-decoration: none;
+//   background-color: transparent;
+//   font-size: 1.2rem;
+//   color: #68686b;
+//   -webkit-transition: all 0.3s;
+//   transition: all 0.3s;
+//   -webkit-appearance: none !important;
+//   border-bottom: 2px solid #fff;
+//   font-family: NSJP-500;
+// }
+
+// @media screen and (max-width: 1200px) {
+//   #pills-tab .nav-item-link {
+//     padding: 0.5rem 0.8rem;
+//   }
+// }
 
 @media screen and (max-width: 767px) {
-  #pills-tab .nav-item-link {
+  .store-tab #pills-tab .nav-item-link {
     margin: 0 0rem;
   }
 }
 
-@media screen and (max-width: 375px) {
-  #pills-tab .nav-item-link {
-    padding: 0rem 0.5rem;
-  }
-}
+// @media screen and (max-width: 375px) {
+//   #pills-tab .nav-item-link {
+//     padding: 0rem 0.5rem;
+//   }
+// }
 
-#pills-tab .nav-item-link.active {
-  color: #68686b;
-  border-bottom: 2px solid #68686b;
+.store-tab #pills-tab .nav-item-link.active,
+.mobile-tab #pills-tab .nav-item-link.active {
+  color: #fff;
+  background: #68686b !important;
 }
 
 /* .tab-content {
@@ -2760,4 +2904,8 @@ img {
 
 .assign-link {
   border-bottom: 2px solid var(--second-color);
+  @media (max-width: 767px) {
+    border-bottom: none;
+    background-color: #d9d9d9;
+  }
 }

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

@@ -133,3 +133,19 @@ function changeIcon(e) {
   const item = document.querySelector('[data-toggle-class]');
   item.className === "close-btn" ? item.className = "navbar-toggler-icon" : item.className = "close-btn";
 }
+
+window.onload = () => {
+  $('.furniture_design_content .slider-for').slick({
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  arrows: false,
+  fade: true,
+  asNavFor: '.slider-nav'
+});
+$('.furniture_design_content .slider-nav').slick({
+slidesToShow: 3,
+slidesToScroll: 1,
+asNavFor: '.slider-for',
+focusOnSelect: true
+});
+};