content update

content/collection/17_taiwanese_ping_tile_porch_muji_industrial_mixed_style_house_in_taichung/index.md

@@ -1,356 +0,0 @@
----
-title: "花磚玄關 無印工業混搭宅｜小寶優居・成家故事"
-date: 2021-02-23T13:18:25+08:00
-draft: false
-type: "collection"
-url: "/collection/17_taiwanese_ping_tile_porch_muji_industrial_mixed_style_house_in_taichung"
-image: "/img/collection/0c90a5a4fb84164b6e8a60147aa31122.webp"
-description: "新北 吳工程師｜新成屋<br>兩房兩廳｜28 坪<br>總預算 80 萬<br>"
-weight:
----
-<script>
-  window.onload = () => {
-    // 直式輪播圖動態更改高度
-    function changeHeight() {
-      let firstImg = $('.style_house_sec02_slide div:first-child img');
-      let firstImgHeight = firstImg.css('height');
-      $('.style_house_sec02_slide .vertical-img').css("height", `${firstImgHeight}`)
-    }
-    changeHeight();
-    $(window).resize(function () {
-      setTimeout(() => {
-        changeHeight();
-      }, 500)
-    });
-    $('.slide_img').each(function () { // jquery.each() 循環讀取所有圖片
-      var height = $(this).height();
-      var width = $(this).width();
-      console.log(height)
-      if (height > 200) {
-        $(this).css({
-          'width': 90 + '%',
-          "margin": 'auto',
-        });
-      }
-      else {
-        $(this).css({
-          "margin-top": '30px',
-        });
-      }
-    });
-    $('.slider-for').slick({
-      slidesToShow: 1,
-      slidesToScroll: 1,
-      arrows: false,
-      fade: true,
-      asNavFor: '.slider-nav'
-    });
-    $('.slider-nav').slick({
-      slidesToShow: 5,
-      slidesToScroll: 3,
-      asNavFor: '.slider-for',
-      dots: false,
-      centerMode: true,
-      focusOnSelect: true
-    });
-  };
-</script>
-<!-- <section class="bhouseweb_loc_banner d-md-none d-block">
-  <div class="card bg-transparent text-white border-0 rounded-0">
-    <img src="/img/banner/bn_portfolio2x.png" class="banner-img card-img" alt="...">
-  </div>
-</section> -->
-<div class="style_house_ads">
-  <h2 class="style_house_title style_house_text">精品飯店微醺好chill宅</h2>
-</div>
-<section class="style_house_banner container-fluid px-0">
-  <img src="/img/1 2.webp" alt="">
-</section>
-<div class="style_house_content">
-  <div class="style_house_sec01">
-    <div class="style_house_sec01_box">
-      <div class="row px-0 mx-0">
-        <div class="col-4 col-md-4">
-          <h3 class="fw-bold">30坪</h3>
-          <p>坪數</p>
-        </div>
-        <div class="col-4 col-md-4">
-          <h3 class="fw-bold">三房兩廳</h3>
-          <p>格局</p>
-        </div>
-        <div class="col-4 col-md-4">
-          <h3 class="fw-bold">大樓/新成屋</h3>
-          <p>屋型</p>
-        </div>
-      </div>
-    </div>
-    <div class="style_house_sec01_box">
-      <div class="row px-0 mx-0">
-        <div class="col-4 col-md-4">
-          <h3 class="fw-bold">苗栗竹南</h3>
-          <p>地區</p>
-        </div>
-        <div class="col-4 col-md-4">
-          <h3 class="fw-bold">遠雄新苑</h3>
-          <p>建案名稱</p>
-        </div>
-        <div class="col-4 col-md-4">
-          <h3 class="fw-bold">Shan</h3>
-          <p>設計師</p>
-        </div>
-      </div>
-    </div>
-    <div class="style_house_sec01_box">
-      <div class="style_house_sec01_box-1">
-        <div class="row px-0 mx-0">
-          <div class="col-4 ol-md-6 d-flex align-items-end justify-content-center">
-            <div>
-              <h3 class="fw-bold">客廳 餐廳</h3>
-              <h3 class="fw-bold">書房 主臥</h3>
-              <p>設計空間</p>
-            </div>
-          </div>
-          <div class="col-8 col-md-6 d-flex align-items-end justify-content-center px-0 m-auto">
-            <div>
-              <h3 class="fw-bold">76.2萬</h3>
-              <p style="max-width: 330px;">總預算(含設計/裝修/裝潢/系統櫃/家具)</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<hr class="style_house_line">
-<div class="style_house_content">
-  <div class="style_house_sec02">
-    <div class="d-flex justify-content-between align-items-center">
-      <h1 class="style_house_title">標題JPBold22級字</h1>
-      <span>
-        <a href=""><img style="width: 35px;" src="/img/icon_fb@2x.png" alt=""></a>
-        <a href=""><img style="width: 35px;" src="/img/icon_line@2x.png" alt=""></a>
-      </span>
-    </div>
-    <div class="style_house_sec02_content">
-      <div class="row px-0 mx-0">
-        <div class="col-7 col-md-5">
-          <img class="img-fluid" src="/img/people.png" alt="">
-        </div>
-        <div class="col-12 col-md-7 pe-0">
-          <div class="sec02_content_text">
-            <h2 class="style_house_subtitle">小標題NotoJPBold18級字</h2>
-            <p>內文NotoJPMedium14級字行距28pt </p>
-            <p>
-              都極度熱情，而且紳士般的協助拍攝團隊的黃先生，是個熱情整個家裡，除了充滿精緻的氛圍，就像每一個家電，都被精心挑選、設計、尺寸、擺放之外，地板、置物櫃更是乾淨得一塵不染，就像是飯店的客房服務剛離開一樣，在拍攝團隊進行拍攝的過程，更是熱切的協助我們調整燈光、道具等，黃先生真是一位超貼心紳士暖男呢！
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <hr class="style_house_line">
-  <div class="style_house_sec02">
-    <h1 class="style_house_title">內部圖解｜經過精密計算的生活模式</h1>
-    <div class="content">
-      <div class="slider slider-for style_house_sec02_slide">
-        <div>
-          <img class="img-fluid" src="/img/collection/0c90a5a4fb84164b6e8a60147aa31122.webp" alt="">
-          <div class="slide_item_text">
-            <p> 圖說NotoJPMedium14級字行距28pt </p>
-            <p>圖說NotoJPMedium14級字行距28pt</p>
-          </div>
-        </div>
-        <div>
-          <img class="img-fluid" src="/img/collection/3d272248107bdc7d610ee640fae3b182_1.webp" alt="">
-        </div>
-        <div>
-          <img class="img-fluid"
-            src="/img/collection/17_taiwanese_ping_tile_porch_muji_industrial_mixed_style_house_in_taichung.webp"
-            alt="">
-        </div>
-        <div>
-          <!-- 直式圖片 className 需加上 "vertical-img" 避免跑版 -->
-          <img class="img-fluid vertical-img" style="width: 100%; object-fit: contain;" src="/img/b6.webp" alt="">
-        </div>
-        <div>
-          <img class="img-fluid"
-            src="/img/collection/20_taiwanese_ping_vintage_cafe_shop_house_for_hipster_in_taichung.webp" alt="">
-        </div>
-        <div>
-          <img class="img-fluid" src="/img/collection/0c90a5a4fb84164b6e8a60147aa31122.webp" alt="">
-        </div>
-        <div>
-          <img class="img-fluid" src="/img/collection/3d272248107bdc7d610ee640fae3b182_1.webp" alt="">
-        </div>
-      </div>
-      <div class="slider slider-nav" style="margin-top: -40px;">
-        <div class="sec02_slide_item">
-          <img class="img-fluid slide_img" src="/img/collection/0c90a5a4fb84164b6e8a60147aa31122.webp" alt="">
-        </div>
-        <div class="sec02_slide_item">
-          <img class="img-fluid slide_img" src="/img/collection/3d272248107bdc7d610ee640fae3b182_1.webp" alt="">
-        </div>
-        <div class="sec02_slide_item">
-          <img class="img-fluid slide_img"
-            src="/img/collection/17_taiwanese_ping_tile_porch_muji_industrial_mixed_style_house_in_taichung.webp"
-            alt="">
-        </div>
-        <div class="sec02_slide_item">
-          <img class="img-fluid slide_img" src="/img/b6.webp" alt="">
-        </div>
-        <div class="sec02_slide_item">
-          <img class="img-fluid slide_img"
-            src="/img/collection/20_taiwanese_ping_vintage_cafe_shop_house_for_hipster_in_taichung.webp" alt="">
-        </div>
-        <div class="sec02_slide_item">
-          <img class="img-fluid slide_img" src="/img/collection/0c90a5a4fb84164b6e8a60147aa31122.webp" alt="">
-        </div>
-        <div class="sec02_slide_item">
-          <img class="img-fluid slide_img" src="/img/collection/3d272248107bdc7d610ee640fae3b182_1.webp" alt="">
-        </div>
-      </div>
-    </div>
-    <hr class="style_house_line">
-  </div>
-  <div class="style_house_sec03">
-    <h1 class="style_house_title">成家預算</h1>
-    <table class="table table-bordered border-dark table1">
-      <tbody>
-        <tr>
-          <th scope="row">預算說明</th>
-          <td>
-            <p>三房兩廳總預算：85.7 萬</p>
-            <p>家具與模組系統櫃：60.9 萬；裝修預算：24.8 萬</p>
-            <p class="m-0">*為提供更精準的預算說明，本案預算依照現時裝修價格調整</p>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <h1 class="style_house_title">系統櫃與家具一覽表</h1>
-    <table class="table table-bordered border-dark table2">
-      <tbody>
-        <tr>
-          <th scope="row">空間</th>
-          <td>
-            <p>使用的家具與模組系統櫃</p>
-          </td>
-        </tr>
-        <tr>
-          <th scope="row">客餐廳</th>
-          <td>
-            <p>海天一線電視櫃、不夠衣櫃、我愛衣櫃、穿雲櫃、今晚餐櫃、把鞋子吊起來、小寶凳、漂浮茶几、星巒沙發4+1貴妃椅、友直餐桌六人座、幸福三人長凳、愛妻中島、今晚餐櫃、無慮餐椅、人造石檯面
-            </p>
-          </td>
-        </tr>
-        <tr>
-          <th scope="row">主臥</th>
-          <td>
-            <p>雙人枕頭五尺、不夠衣櫃、樂天吊櫃</p>
-          </td>
-        </tr>
-        <tr>
-          <th scope="row">次臥</th>
-          <td>
-            <p>老王方塊櫃、老王變長方塊櫃、我愛三門衣櫃、幸福餐椅</p>
-          </td>
-        </tr>
-        <tr>
-          <th scope="row">書房</th>
-          <td>
-            <p>玩色床架五尺、玩色抽屜床架、不夠衣櫃、喜樂展示櫃</p>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <h1 class="style_house_title">裝修項目清單</h1>
-    <table class="table table-bordered border-dark table2">
-      <tbody>
-        <tr>
-          <th scope="row">類別</th>
-          <td>
-            <p>裝修項目</p>
-          </td>
-        </tr>
-        <tr>
-          <th scope="row">木工</th>
-          <td>
-            <p>窗簾盒、冷氣包管</p>
-          </td>
-        </tr>
-        <tr>
-          <th scope="row">水電</th>
-          <td>
-            <p>電器專用插座與迴路設計</p>
-          </td>
-        </tr>
-        <tr>
-          <th scope="row">油漆</th>
-          <td>
-            <p>油漆跳色、特殊漆跳色</p>
-          </td>
-        </tr>
-        <tr>
-          <th scope="row">地板</th>
-          <td>
-            <p>全室地板、門片高度修改</p>
-          </td>
-        </tr>
-        <tr>
-          <th scope="row">泥作</th>
-          <td>
-            <p>玄關落塵區六角磚(使用台灣磚)</p>
-          </td>
-        </tr>
-        <tr>
-          <th scope="row">保護清潔</th>
-          <td>
-            <p>保護工程、細部清潔</p>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  <hr class="style_house_line">
-  <div class="style_house_sec04">
-    <h1 class="style_house_title">屋主的話</h1>
-    <p>(圖片)</p>
-  </div>
-  <hr class="style_house_line">
-  <div class="style_house_sec05">
-    <h1 class="style_house_title">其他分類案例</h1>
-    <div class="d-flex align-items-center justify-content-between">
-      <div class="style_house_sec05_box">
-        <a href="">書房</a>
-        <a href="">工業風</a>
-        <a href="">特殊漆</a>
-        <a href="">不做天花板</a>
-      </div>
-      <span>
-        <a href=""><img style="width: 35px;" src="/img/icon_fb@2x.png" alt=""></a>
-        <a href=""><img style="width: 35px;" src="/img/icon_line@2x.png" alt=""></a>
-      </span>
-    </div>
-  </div>
-  <hr class="style_house_line d-md-none d-block">
-  <a href="/index.html">
-    <p class="article_readMore text-center">
-      <span class="fw-normal me-2">＜</span>
-      回到成家故事案例
-    </p>
-  </a>
-</div>
-<hr class="style_house_line d-none d-md-block">
-<div class="container-fluid qa-navs">
-  <div class="row g-3 home-content">
-    <div class="col-sm-6 m-0 bg-serve">
-      <a href="/room_planner/">
-        <div class="bg-img"></div>
-      </a>
-    </div>
-    <div class="col-sm-6 m-0 mt-3 mt-sm-0 bg-qa">
-      <a href="/frequently_asked_questions/">
-        <div class="bg-img"></div>
-      </a>
-    </div>
-  </div>
-</div>

content/collection/17_taiwanese_ping_tile_porch_muji_industrial_mixed_style_house_in_taichung拷貝3/index.md

@@ -1,5 +1,5 @@
 ---
-title: "花磚玄關 無印工業混搭宅｜小寶優居・成家故事"
+title: "花磚玄關 無印工業混搭宅｜小寶優居・成家故事111"
 date: 2021-02-23T13:18:25+08:00
 draft: false
 type: "collection"

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

@@ -7,113 +7,98 @@ url: "/dining_room/happy_dining_chair"
 image: "/dining_room/happy_dining_chair/1.webp"
 description: "幸福餐椅 - 餐廳 / 梣木 / 靠背的仰角設計，定位出用餐的「最適」角度，使坐姿既可放鬆又能挺立，幸福的相聚時光沒有拘謹的限制，只有自在的舒適！"
 ---
-
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/dining_room">餐廳</a> > <a href="/dining_room/happy_dining_chair">幸福餐椅</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 幸福餐椅"
-              >
-<amp-img
-  alt="小寶優居 | 幸福餐椅"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 幸福餐椅"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 幸福餐椅"
-  src="3.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 幸福餐椅"
-  src="4.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 幸福餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 幸福餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=2)">
-            <amp-img
-              src="3.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 幸福餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=3)">
-            <amp-img
-              src="4.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 幸福餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 幸福餐椅">
+              </div>
+                  <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 幸福餐椅">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>幸福餐椅</b></div>
-            <div class="description">
-<b>靠背的仰角設計，定位出用餐的「最適」角度，使坐姿既可放鬆又能挺立，幸福的相聚時光沒有拘謹的限制，只有自在的舒適！</b>
+            <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">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $4,620</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬460 X 深470 X 高815</div>
-<div>材質 ： 梣木</div>
-<span></span>
+              <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 class="tw-15">材質</div>
+              <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="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

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

@@ -7,99 +7,98 @@ url: "/dining_room/worry_free_dining_chair"
 image: "/dining_room/worry_free_dining_chair/1.webp"
 description: "無憂餐椅 - 餐廳 / 梣木 / 細木工匠的榫接技法，讓結構更加穩實，不使用五金作釘合，讓每一塊原木的優雅完整體現"
 ---
-
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/dining_room">餐廳</a> > <a href="/dining_room/worry_free_dining_chair">無憂餐椅</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 無憂餐椅"
-              >
-<amp-img
-  alt="小寶優居 | 無憂餐椅"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 無憂餐椅"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 無憂餐椅"
-  src="3.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 無憂餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 無憂餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=2)">
-            <amp-img
-              src="3.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 無憂餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 無憂餐椅">
+              </div>
+                  <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 無憂餐椅">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>無憂餐椅</b></div>
-            <div class="description">
-<b>細木工匠的榫接技法，讓結構更加穩實，不使用五金作釘合，讓每一塊原木的優雅完整體現</b>
+            <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> $5,280</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $5,280</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬460 X 深510 X 高810</div>
-<div>材質 ： 梣木</div>
-<span></span>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬460 X 深510 X 高810(mm)</div>
             </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-15">備註</div>
+              <div class="tw-85">可依實際需求加寬為196公分，實際價格將依需求規劃客製而定</div>
+            </div> -->
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

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

@@ -7,113 +7,98 @@ url: "/dining_room/worry_free_dining_chair_2"
 image: "/dining_room/worry_free_dining_chair_2/1.webp"
 description: "無慮餐椅 - 餐廳 / 梣木 / 無憂無慮， 夫復何求"
 ---
-
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/dining_room">餐廳</a> > <a href="/dining_room/worry_free_dining_chair_2">無慮餐椅</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 無慮餐椅"
-              >
-<amp-img
-  alt="小寶優居 | 無慮餐椅"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 無慮餐椅"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 無慮餐椅"
-  src="3.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 無慮餐椅"
-  src="4.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 無慮餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 無慮餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=2)">
-            <amp-img
-              src="3.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 無慮餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=3)">
-            <amp-img
-              src="4.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 無慮餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 無慮餐椅">
+              </div>
+                  <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 無慮餐椅">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>無慮餐椅</b></div>
-            <div class="description">
-<b>無憂無慮， 夫復何求</b>
+            <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>$7,080</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $7,080</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬435 X 深520 X 高890</div>
-<div>材質 ： 梣木</div>
-<span></span>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬435 X 深520 X 高890(mm)</div>
             </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-15">備註</div>
+              <div class="tw-85">可依實際需求加寬為196公分，實際價格將依需求規劃客製而定</div>
+            </div> -->
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

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

@@ -7,99 +7,98 @@ url: "/dining_room/optimism_dining_chair"
 image: "/dining_room/optimism_dining_chair/1.webp"
 description: "樂天餐椅 - 餐廳 / 山毛櫸 / 特殊的高背式餐椅，能紓解乘坐時「腰椎」所承受的壓力，讓坐感與撐護力，都擁有全新的體驗"
 ---
-
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/dining_room">餐廳</a> > <a href="/dining_room/optimism_dining_chair">樂天餐椅</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 樂天餐椅"
-              >
-<amp-img
-  alt="小寶優居 | 樂天餐椅"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 樂天餐椅"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 樂天餐椅"
-  src="3.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 樂天餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 樂天餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=2)">
-            <amp-img
-              src="3.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 樂天餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 樂天餐椅">
+              </div>
+                  <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 樂天餐椅">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>樂天餐椅</b></div>
-            <div class="description">
-<b>特殊的高背式餐椅，能紓解乘坐時「腰椎」所承受的壓力，讓坐感與撐護力，都擁有全新的體驗</b>
+            <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>$5,780</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $5,780</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬420 X 深475 X 高820</div>
-<div>材質 ： 山毛櫸</div>
-<span></span>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬420 X 深475 X 高820(mm)</div>
             </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-15">備註</div>
+              <div class="tw-85">可依實際需求加寬為196公分，實際價格將依需求規劃客製而定</div>
+            </div> -->
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

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

@@ -7,113 +7,98 @@ url: "/dining_room/happy_island_chair"
 image: "/dining_room/happy_island_chair/1.webp"
 description: "幸福中島椅 - 餐廳 / 梣木 / 能和相愛的人，彼間而坐，喝杯咖啡，就是最幸福的事情了"
 ---
-
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/dining_room">餐廳</a> > <a href="/dining_room/happy_island_chair">幸福中島椅</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 幸福中島椅"
-              >
-<amp-img
-  alt="小寶優居 | 幸福中島椅"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 幸福中島椅"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 幸福中島椅"
-  src="3.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 幸福中島椅"
-  src="4.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 幸福中島椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 幸福中島椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=2)">
-            <amp-img
-              src="3.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 幸福中島椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=3)">
-            <amp-img
-              src="4.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 幸福中島椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 幸福中島椅">
+              </div>
+                  <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 幸福中島椅">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>幸福中島椅</b></div>
-            <div class="description">
-<b>能和相愛的人，彼間而坐，喝杯咖啡，就是最幸福的事情了</b>
+            <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>$7,680</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $7,680</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬420 X 深460 X 高870</div>
-<div>材質 ： 梣木</div>
-<span></span>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬420 X 深460 X 高8700(mm)</div>
             </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-15">備註</div>
+              <div class="tw-85">可依實際需求加寬為196公分，實際價格將依需求規劃客製而定</div>
+            </div> -->
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

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

@@ -8,126 +8,98 @@ image: "/dining_room/worry_free_island_chair/1.webp"
 description: "無憂中島椅 - 餐廳 / 梣木 / 深夜喝上一杯，cheers！把今天的憂愁都忘掉吧！"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/dining_room">餐廳</a> > <a href="/dining_room/worry_free_island_chair">無憂中島椅</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 無憂中島椅"
-              >
-<amp-img
-  alt="小寶優居 | 無憂中島椅"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 無憂中島椅"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 無憂中島椅"
-  src="3.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 無憂中島椅"
-  src="4.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 無憂中島椅"
-  src="5.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 無憂中島椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 無憂中島椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=2)">
-            <amp-img
-              src="3.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 無憂中島椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=3)">
-            <amp-img
-              src="4.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 無憂中島椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=4)">
-            <amp-img
-              src="5.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 無憂中島椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 無憂中島椅">
+              </div>
+                  <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 無憂中島椅">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>無憂中島椅</b></div>
-            <div class="description">
-<b>深夜喝上一杯，cheers！把今天的憂愁都忘掉吧！</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">無憂中島椅 </h3>
+            <p class="mb-5">深夜喝上一杯，cheers！把今天的憂愁都忘掉吧！</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> $8,080</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬460 X 深520 X 高860(mm)</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $8,080</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬460 X 深520 X 高860</div>
-<div>材質 ： 梣木</div>
-<span></span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <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="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

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

@@ -7,85 +7,98 @@ url: "/dining_room/happy_bench"
 image: "/dining_room/happy_bench/1.webp"
 description: "幸福長凳(雙人) - 餐廳 / 梣木 / 兩個人的幸福， 你儂我儂，讓顏色隨心情， 盡情奔放"
 ---
-
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/dining_room">餐廳</a> > <a href="/dining_room/happy_bench">幸福長凳(雙人)</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 幸福長凳(雙人)"
-              >
-<amp-img
-  alt="小寶優居 | 幸福長凳(雙人)"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 幸福長凳(雙人)"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 幸福長凳(雙人)|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 幸福長凳(雙人)|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 幸福長凳(雙人)">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 幸福長凳(雙人)">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>幸福長凳(雙人)</b></div>
-            <div class="description">
-<b>兩個人的幸福， 你儂我儂，讓顏色隨心情， 盡情奔放</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">幸福長凳(雙人) </h3>
+            <p class="mb-5">深夜喝上一杯，cheers！把今天的憂愁都忘掉吧！</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> $8,080</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬1080 X 深350 X 高450(mm)</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $8,020</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬1080 X 深350 X 高450</div>
-<div>材質 ： 梣木</div>
-<div>備註 ： 雙人座，可依實際需求客製三人坐，實際價格將依需求規劃客製而定</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-15">備註</div>
+              <div class="tw-85"> 雙人座，可依實際需求客製三人坐，實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

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

@@ -8,84 +8,98 @@ image: "/dining_room/once_in_a_lifetime_bench/1.webp"
 description: "一期一會長凳(雙人) - 餐廳 / 梣木 / Hi，朋友！在此生有幸認識你，於我而言是不容錯過的一期一會，讓我們時常聯絡、把酒言歡、共享歡聚時光！"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/dining_room">餐廳</a> > <a href="/dining_room/once_in_a_lifetime_bench">一期一會長凳(雙人)</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 一期一會長凳(雙人)"
-              >
-<amp-img
-  alt="小寶優居 | 一期一會長凳(雙人)"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 一期一會長凳(雙人)"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 一期一會雙人長凳"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 一期一會雙人長凳"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 一期一會長凳(雙人)">
+              </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 一期一會長凳(雙人)">
+              </div> -->
+            </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>一期一會長凳(雙人)</b></div>
-            <div class="description">
-<b>Hi，朋友！在此生有幸認識你，於我而言是不容錯過的一期一會，讓我們時常聯絡、把酒言歡、共享歡聚時光！</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">一期一會長凳(雙人) </h3>
+            <p class="mb-5">Hi，朋友！在此生有幸認識你，於我而言是不容錯過的一期一會，讓我們時常聯絡、把酒言歡、共享歡聚時光！</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> $7,380</span>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $7,380</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬1080 X 深350 X 高450</div>
-<div>材質 ： 梣木</div>
-<div>備註 ： 雙人座，另有「一期一會三人長凳」，實際價格請洽門市</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬1080 X 深350 X 高450(mm)</div>
+            </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-15">備註</div>
+              <div class="tw-85"> 雙人座，另有「一期一會三人長凳」，實際價格請洽門市</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

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

@@ -7,126 +7,98 @@ url: "/other_furniture/bhouse_stool"
 image: "/other_furniture/bhouse_stool/1.webp"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/other_furniture">其他</a> > <a href="/other_furniture/bhouse_stool">小寶心情凳｜小寶優居・設計家具</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 小寶心情凳｜小寶優居・設計家具"
-              >
-<amp-img
-  alt="小寶優居 | 小寶心情凳｜小寶優居・設計家具"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 小寶心情凳｜小寶優居・設計家具"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 小寶心情凳｜小寶優居・設計家具"
-  src="3.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 小寶心情凳｜小寶優居・設計家具"
-  src="4.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 小寶心情凳｜小寶優居・設計家具"
-  src="5.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 小寶心情凳｜小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 小寶心情凳｜小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=2)">
-            <amp-img
-              src="3.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 小寶心情凳｜小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=3)">
-            <amp-img
-              src="4.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 小寶心情凳｜小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=4)">
-            <amp-img
-              src="5.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 小寶心情凳｜小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 小寶心情凳">
+              </div>
+                  <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 小寶心情凳">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>小寶心情凳｜小寶優居・設計家具</b></div>
-            <div class="description">
-<b>小寶心情凳， 帶給你每日的好心情，布套可拆洗，還能讓屁股香香的。</b>
+            <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> $2,920</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">沉穩、雀躍、頹然、開懷、歡樂</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬400 X 深400 X 高430(mm)</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $2,920</div>
-<div>顏色 ： 沉穩、雀躍、頹然、開懷、歡樂</div>
-<div>尺寸(mm) ： 寬400 X 深400 X 高430</div>
-<div>材質 ： 雲杉實木骨架</div>
-<span></span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <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="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/dining_chair/a_small_stool_for_a_while/index.md

@@ -8,84 +8,98 @@ image: "/dining_room/a_small_stool_for_a_while/b73d95c7-fce1-463b-a163-852c35899
 description: "一期一會小凳 - 餐廳 / 梣木 / Hi，朋友！在此生有幸認識你，於我而言是不容錯過的一期一會，讓我們時常聯絡、把酒言歡、共享歡聚時光！"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/dining_room">餐廳</a> > <a href="/dining_room/a_small_stool_for_a_while">一期一會小凳</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 一期一會小凳"
-              >
-<amp-img
-  alt="小寶優居 | 一期一會小凳"
-  src="b73d95c7-fce1-463b-a163-852c35899112.webp"
-  height="1600"
-  width="1600"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 一期一會小凳"
-  src="ebe3626d-3905-46e5-94cf-fd949edf5497.webp"
-  height="1600"
-  width="1600"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="b73d95c7-fce1-463b-a163-852c35899112.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 一期一會小凳"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="ebe3626d-3905-46e5-94cf-fd949edf5497.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 一期一會小凳"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 一期一會小凳">
+              </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 一期一會小凳">
+              </div> -->
+            </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>一期一會小凳</b></div>
-            <div class="description">
-<b>Hi，朋友！在此生有幸認識你，於我而言是不容錯過的一期一會，讓我們時常聯絡、把酒言歡、共享歡聚時光！</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">一期一會小凳 </h3>
+            <p class="mb-5">Hi，朋友！在此生有幸認識你，於我而言是不容錯過的一期一會，讓我們時常聯絡、把酒言歡、共享歡聚時光！</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> $4,720</span>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $4,720</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬420X深350X高450</div>
-<div>材質 ： 梣木</div>
-<div>備註 ： 拍攝單品為胡桃色</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬420 X 深350 X 高450(mm)</div>
+            </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-15">備註</div>
+              <div class="tw-85">拍攝單品為胡桃色</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/dining_chair/good_seat_dining_chair/index.md

@@ -8,98 +8,98 @@ image: "/dining_room/good_seat_dining_chair/01da6735-ebdc-46b4-abfd-905bd25730e4
 description: "好座餐椅 - 餐廳 / 梣木+墊裝 / 坐與臥是居家生活花費最多的時間，你的屁股與脊椎，值得好好座也好好坐，讓你好好吃飯、好好讀書、好好寫字。"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/dining_room">餐廳</a> > <a href="/dining_room/good_seat_dining_chair">好座餐椅</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 好座餐椅"
-              >
-<amp-img
-  alt="小寶優居 | 好座餐椅"
-  src="01da6735-ebdc-46b4-abfd-905bd25730e4.webp"
-  height="1200"
-  width="1200"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 好座餐椅"
-  src="90a183b2-a3ab-4f0b-84a2-11d5031df4fc.webp"
-  height="1200"
-  width="1200"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 好座餐椅"
-  src="4835e07a-8497-4d4b-91c0-36698a809407.webp"
-  height="1200"
-  width="1200"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="01da6735-ebdc-46b4-abfd-905bd25730e4.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 好座餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="90a183b2-a3ab-4f0b-84a2-11d5031df4fc.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 好座餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=2)">
-            <amp-img
-              src="4835e07a-8497-4d4b-91c0-36698a809407.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 好座餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 好座餐椅">
+              </div>
+                  <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 好座餐椅">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>好座餐椅</b></div>
-            <div class="description">
-<b>坐與臥是居家生活花費最多的時間，你的屁股與脊椎，值得好好座也好好坐，讓你好好吃飯、好好讀書、好好寫字。</b>
+            <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> $6,280</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85"> 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬500 X 深560 X 高780(mm)</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $6,280</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬500 X 深560 X 高780</div>
-<div>材質 ： 梣木+墊裝</div>
-<span></span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <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="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/dining_chair/happiness_stool/index.md

@@ -8,84 +8,98 @@ image: "/dining_room/happiness_stool/d0eeb177-72c5-467f-9cb1-794eea3dc82b.webp"
 description: "幸福小凳 - 餐廳 / 梣木+墊裝 / 一個人， 也可以很幸福，讓顏色隨心情， 隨心所欲"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/dining_room">餐廳</a> > <a href="/dining_room/happiness_stool">幸福小凳</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 幸福小凳"
-              >
-<amp-img
-  alt="小寶優居 | 幸福小凳"
-  src="d0eeb177-72c5-467f-9cb1-794eea3dc82b.webp"
-  height="1600"
-  width="1600"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 幸福小凳"
-  src="174153fd-e912-4b21-b5d2-9a8f3e2ec1bd.webp"
-  height="1600"
-  width="1600"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="d0eeb177-72c5-467f-9cb1-794eea3dc82b.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 幸福小凳"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="174153fd-e912-4b21-b5d2-9a8f3e2ec1bd.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 幸福小凳"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 幸福小凳">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 幸福小凳">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>幸福小凳</b></div>
-            <div class="description">
-<b>一個人， 也可以很幸福，讓顏色隨心情， 隨心所欲</b>
+            <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">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</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>
-            <hr>
-            <div class="detail">
-<div>定價 ： $5,080</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬420X深350X高450</div>
-<div>材質 ： 梣木+墊裝</div>
-<span></span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">梣木</div>
             </div>
+            <!-- <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">拍攝單品為胡桃色</div>
+            </div> -->
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/dining_chair/sif_dining_chair/index.md

@@ -8,112 +8,98 @@ image: "/dining_room/sif_dining_chair/1.webp"
 description: "希芙餐椅 - 餐廳 / 梣梣木+墊裝木 / 希芙是北歐神話的女神，雷神索爾的妻子，代表土地和五穀，也象徵麥穗與黃金，105度的神祕傾斜角度，不只乘坐更舒適，也期盼我們的生活，總是豐盛而有餘裕。"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/dining_room">餐廳</a> > <a href="/dining_room/sif_dining_chair">希芙餐椅</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 希芙餐椅"
-              >
-<amp-img
-  alt="小寶優居 | 希芙餐椅"
-  src="ac29ad42-292e-4b1c-82bd-d15b0f43175d.webp"
-  height="1200"
-  width="1200"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 希芙餐椅"
-  src="d3b007d5-818c-41ac-a5ce-13afa0369e0a.webp"
-  height="1200"
-  width="1200"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 希芙餐椅"
-  src="8562b05d-b660-4426-b562-95f91416d73f.webp"
-  height="1200"
-  width="1200"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 希芙餐椅"
-  src="4a107744-0cc6-48ee-8856-0c89c0f8678a.webp"
-  height="1200"
-  width="1200"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="ac29ad42-292e-4b1c-82bd-d15b0f43175d.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 希芙餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="d3b007d5-818c-41ac-a5ce-13afa0369e0a.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 希芙餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=2)">
-            <amp-img
-              src="8562b05d-b660-4426-b562-95f91416d73f.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 希芙餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=3)">
-            <amp-img
-              src="4a107744-0cc6-48ee-8856-0c89c0f8678a.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 希芙餐椅|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 希芙餐椅">
+              </div>
+                  <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 希芙餐椅">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>希芙餐椅</b></div>
-            <div class="description">
-<b>希芙是北歐神話的女神，雷神索爾的妻子，代表土地和五穀，也象徵麥穗與黃金，105度的神祕傾斜角度，不只乘坐更舒適，也期盼我們的生活，總是豐盛而有餘裕。</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">希芙餐椅 </h3>
+            <p class="mb-5">希芙是北歐神話的女神，雷神索爾的妻子，代表土地和五穀，也象徵麥穗與黃金，105度的神祕傾斜角度，不只乘坐更舒適，也期盼我們的生活，總是豐盛而有餘裕。</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span>  $10,500</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬585 X 深575 X 高780(mm)</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $10,500</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬585 X 深575 X 高780</div>
-<div>材質 ： 梣木+墊裝</div>
-<span></span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85"> 梣木+墊裝</div>
             </div>
+            <!-- <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">拍攝單品為胡桃色</div>
+            </div> -->
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

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

@@ -7,99 +7,98 @@ url: "/dining_room/good_friends_dining_table"
 image: "/dining_room/good_friends_dining_table/1.webp"
 description: "友直餐桌 - 餐廳 / 梣木 / 桌腳以橫、豎交叉排列，巧妙打造屬於每個人的用餐空間，找到彼此最剛好的吃飯黃金距離"
 ---
-
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/dining_room">餐廳</a> > <a href="/dining_room/good_friends_dining_table">友直餐桌</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 友直餐桌"
-              >
-<amp-img
-  alt="小寶優居 | 友直餐桌"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 友直餐桌"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 友直餐桌"
-  src="3.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 友直餐桌|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 友直餐桌|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=2)">
-            <amp-img
-              src="3.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 友直餐桌|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 友直餐桌">
+              </div>
+                  <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 友直餐桌">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>友直餐桌</b></div>
-            <div class="description">
-<b>桌腳以橫、豎交叉排列，巧妙打造屬於每個人的用餐空間，找到彼此最剛好的吃飯黃金距離</b>
+            <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>$28,500</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬1500 X 深880 X 高730(mm)</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $28,500</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色</div>
-<div>尺寸(mm) ： 寬1500 X 深880 X 高730</div>
-<div>材質 ： 梣木</div>
-<div>備註 ： 可依實際需求加寬為196公分，實際價格將依需求規劃客製而定</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-15">備註</div>
+              <div class="tw-85">可依實際需求加寬為196公分，實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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_table/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到餐桌
+            </p>
+          </a>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

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

@@ -8,84 +8,95 @@ image: "/dining_room/forest_life_dining_table/1.webp"
 description: "森命餐桌 - 餐廳 / 梣木 / 森林的生命，伴隨晚宴走進家裡"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/dining_room">餐廳</a> > <a href="/dining_room/forest_life_dining_table">森命餐桌</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 森命餐桌"
-              >
-<amp-img
-  alt="小寶優居 | 森命餐桌"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 森命餐桌"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 森命餐桌|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 森命餐桌|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 森命餐桌">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>森命餐桌</b></div>
-            <div class="description">
-<b>森林的生命，伴隨晚宴走進家裡</b>
+          <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> $32,200</span>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $32,200</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬1500 X 深880 X 高730</div>
-<div>材質 ： 梣木</div>
-<div>備註 ： 可依實際需求加寬為196公分，實際價格將依需求規劃客製而定</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬1500 X 深880 X 高730(mm)</div>
+            </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-15">備註</div>
+              <div class="tw-85">可依實際需求加寬為196公分，實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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_table/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到餐桌
+            </p>
+          </a>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

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

@@ -8,84 +8,95 @@ image: "/dining_room/curly_dining_table/1.webp"
 description: "裊裊餐桌 - 餐廳 / 梣木 / 裊裊炊煙，呼喚遠方的遊子回家吃飯，裊裊餐桌，乘載我們家團聚的美好記憶。"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/dining_room">餐廳</a> > <a href="/dining_room/curly_dining_table">裊裊餐桌</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 裊裊餐桌"
-              >
-<amp-img
-  alt="小寶優居 | 裊裊餐桌"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 裊裊餐桌"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 裊裊餐桌|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 裊裊餐桌|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 裊裊餐桌">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>裊裊餐桌</b></div>
-            <div class="description">
-<b>裊裊炊煙，呼喚遠方的遊子回家吃飯，裊裊餐桌，乘載我們家團聚的美好記憶。</b>
+          <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>  $20,200</span>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $20,200</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬1320 X 深810 X 高730</div>
-<div>材質 ： 梣木</div>
-<span></span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬1320 X 深810 X 高730(mm)</div>
+            </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-15">備註</div>
+              <div class="tw-85">可依實際需求加寬為196公分，實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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_table/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到茶几
+            </p>
+          </a>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

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

@@ -8,84 +8,95 @@ image: "/dining_room/toast_dining_table/1.webp"
 description: "舉杯餐桌 - 餐廳 / 梣木 / 精心挑選這個季節的花束，擺上燭火讓光在桌前化開來，等著在意的人一一入座，今天不是什麼特別的日子，只是想舉杯，慶祝每個平凡的日子裡， 有你有我"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/dining_room">餐廳</a> > <a href="/dining_room/toast_dining_table">舉杯餐桌</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 舉杯餐桌"
-              >
-<amp-img
-  alt="小寶優居 | 舉杯餐桌"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 舉杯餐桌"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 舉杯餐桌|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 舉杯餐桌|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 舉杯餐桌">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>舉杯餐桌</b></div>
-            <div class="description">
-<b>精心挑選這個季節的花束，擺上燭火讓光在桌前化開來，等著在意的人一一入座，今天不是什麼特別的日子，只是想舉杯，慶祝每個平凡的日子裡， 有你有我</b>
+          <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>   $25,500</span>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $25,500</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬1500 X 深880 X 高730</div>
-<div>材質 ： 梣木</div>
-<span></span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85"> 寬1500 X 深880 X 高730(mm)</div>
+            </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-15">備註</div>
+              <div class="tw-85">可依實際需求加寬為196公分，實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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_table/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到餐桌
+            </p>
+          </a>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

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

@@ -8,84 +8,95 @@ image: "/dining_room/zhe_xiang_dining_table/1.webp"
 description: "喆翔餐桌 - 餐廳 / 梣木 / 「餐桌」乘載著生活中的喜怒哀樂，開心歡樂時，大口吃肉，生氣悲傷時，大口喝酒，讓喆翔餐桌帶領你的情緒，優雅飛翔吧！"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/dining_room">餐廳</a> > <a href="/dining_room/zhe_xiang_dining_table">喆翔餐桌</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 喆翔餐桌"
-              >
-<amp-img
-  alt="小寶優居 | 喆翔餐桌"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 喆翔餐桌"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 喆翔餐桌"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 喆翔餐桌"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 喆翔餐桌">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>喆翔餐桌</b></div>
-            <div class="description">
-<b>「餐桌」乘載著生活中的喜怒哀樂，開心歡樂時，大口吃肉，生氣悲傷時，大口喝酒，讓喆翔餐桌帶領你的情緒，優雅飛翔吧！</b>
+          <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>   $32,500</span>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $32,500</div>
-<div>顏色 ： 橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬1500 X 深800 X 高730</div>
-<div>材質 ： 梣木</div>
-<span></span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85"> 橡木色、謐白色、曜石灰</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85"> 寬1500 X 深800 X 高730(mm)</div>
+            </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-15">備註</div>
+              <div class="tw-85">可依實際需求加寬為196公分，實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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_table/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到餐桌
+            </p>
+          </a>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/dining_table/light_rhyme_dining_table/index.md

@@ -8,98 +8,98 @@ image: "/dining_room/light_rhyme_dining_table/33ab2825-e86a-482d-b0ef-0f45c28baf
 description: "輕韻餐桌 - 餐廳 / 梣木 / 外型輕巧，平易近人，簡單，卻不簡單，生活中各種時令的美好，與家中四季的笑聲，都被帶入了輕韻餐桌"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/dining_room">餐廳</a> > <a href="/dining_room/light_rhyme_dining_table">輕韻餐桌</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 輕韻餐桌"
-              >
-<amp-img
-  alt="小寶優居 | 輕韻餐桌"
-  src="33ab2825-e86a-482d-b0ef-0f45c28baf2f.webp"
-  height="1200"
-  width="1200"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 輕韻餐桌"
-  src="c6a841f5-a73d-454f-8783-b6f84f2a6ddc.webp"
-  height="1200"
-  width="1200"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 輕韻餐桌"
-  src="90cc82ab-52af-4f36-85c5-64722d2f22e8.webp"
-  height="1200"
-  width="1200"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="33ab2825-e86a-482d-b0ef-0f45c28baf2f.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 輕韻餐桌|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="c6a841f5-a73d-454f-8783-b6f84f2a6ddc.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 輕韻餐桌|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=2)">
-            <amp-img
-              src="90cc82ab-52af-4f36-85c5-64722d2f22e8.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 輕韻餐桌|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 喆翔餐桌">
+              </div>
+                <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 喆翔餐桌">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>輕韻餐桌</b></div>
-            <div class="description">
-<b>外型輕巧，平易近人，簡單，卻不簡單，生活中各種時令的美好，與家中四季的笑聲，都被帶入了輕韻餐桌</b>
+          <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>   $32,500</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85"> 橡木色、謐白色、曜石灰</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85"> 寬1500 X 深800 X 高730(mm)</div>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">梣木</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $21,500</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬1500 X 深750 X 高730</div>
-<div>材質 ： 梣木</div>
-<div>備註 ： 可依需求調整尺寸，實際價格將依需求規劃客製而定</div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">可依實際需求加寬為196公分，實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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_table/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到餐桌
+            </p>
+          </a>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

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

@@ -7,97 +7,100 @@ url: "/master_bedroom/stripe_circle_bed"
 image: "/master_bedroom/stripe_circle_bed/1.webp"
 description: "条条團圓 - 臥室 / 雲杉實木骨架 / 工匠手縫條條的紋理，包上整片泡棉，不怕孩子碰撞，彷彿是媽媽的環抱，安心、溫柔"
 ---
-
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/master_bedroom">臥室</a> > <a href="/master_bedroom/stripe_circle_bed">条条團圓</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 条条團圓"
-              >
-<amp-img
-  alt="小寶優居 | 条条團圓"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 条条團圓"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 条条團圓|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 条条團圓|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 条条團圓">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 条条團圓">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>条条團圓</b></div>
-            <div class="description">
-<b>工匠手縫條條的紋理，包上整片泡棉，不怕孩子碰撞，彷彿是媽媽的環抱，安心、溫柔</b>
+            <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>$47,300</span>
+            </div>
+            <!-- <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
+            </div> -->
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">雲杉實木骨架</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $47,300</div>
-<span></span>
-<span></span>
-<div>材質 ： 雲杉實木骨架</div>
-<div>備註 ： 標準雙人5尺+掀床床架，實際價格將依需求規劃客製而定</div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">標準雙人5尺+掀床床架，實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 条条團圓">
+                      <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 条条團圓">
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/mattress/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到床組
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 条条團圓"
-  src="1f6b3230-b87a-438f-8141-5233b887362b.webp"
-  height="675"
-  width="1200"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 条条團圓"
-  src="9f5b5bdc-d032-4569-88a0-1de43b98c762.webp"
-  height="1600"
-  width="1052"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

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

@@ -7,83 +7,100 @@ url: "/master_bedroom/two_pillow_bed"
 image: "/master_bedroom/two_pillow_bed/1.webp"
 description: "雙人枕頭 - 臥室 / 雲杉實木骨架 / 專超大防蹣羽絨枕心，頭靠、背靠 都有得靠，雙人枕頭，真正靠得住"
 ---
-
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/master_bedroom">臥室</a> > <a href="/master_bedroom/two_pillow_bed">雙人枕頭</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 雙人枕頭"
-              >
-<amp-img
-  alt="小寶優居 | 雙人枕頭"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 雙人枕頭|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 雙人枕頭">
+              </div> -->
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 雙人枕頭">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>雙人枕頭</b></div>
-            <div class="description">
-<b>超大防蹣羽絨枕心，頭靠、背靠 都有得靠，雙人枕頭，真正靠得住</b>
+            <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>$37,000</span>
+            </div>
+            <!-- <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
+            </div> -->
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">雲杉實木骨架</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $37,000</div>
-<span></span>
-<span></span>
-<div>材質 ： 雲杉實木骨架</div>
-<div>備註 ： 標準雙人5尺+架高床底價格參考，實際價格將依需求規劃客製而定</div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">標準雙人5尺+架高床底價格參考，實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 雙人枕頭">
+                      <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 雙人枕頭">
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/mattress/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到床組
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 雙人枕頭"
-  src="s1.webp"
-  height="675"
-  width="1200"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 雙人枕頭"
-  src="109db0bf-3b8e-4b3b-8c7f-a541f8a56516.webp"
-  height="1600"
-  width="1052"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

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

@@ -5,99 +5,103 @@ draft: false
 type: "master_bedroom"
 url: "/master_bedroom/color_grid_bed"
 image: "/master_bedroom/color_grid_bed/1.webp"
-description: "圓滑處事化妝桌 - 臥室 / 山毛櫸 / 專為台灣偉大的女性們，化妝與收納習慣創造的化妝桌。從設計到製作都來自台灣，更是體現匠師手工的工藝品！"
+description: "玩色格格 - 臥室 / 雲杉實木骨架 / 軟綿的色彩格子，可以設計專屬配色，延伸做成床頭牆面，睡也要睡出自己的風格！"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/master_bedroom">臥室</a> > <a href="/master_bedroom/color_grid_bed">玩色格格</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 玩色格格"
-              >
-<amp-img
-  alt="小寶優居 | 玩色格格"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 玩色格格"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 玩色格格|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 玩色格格|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 玩色格格">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 玩色格格">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>玩色格格</b></div>
-            <div class="description">
-<b>軟綿的色彩格子，可以設計專屬配色，延伸做成床頭牆面，睡也要睡出自己的風格！</b>
+            <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>$50,300</span>
+            </div>
+            <!-- <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
+            </div> -->
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">雲杉實木骨架</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $50,300</div>
-<span></span>
-<span></span>
-<div>材質 ： 雲杉實木骨架</div>
-<div>備註 ： 標準雙人5尺+掀床床架，實際價格將依需求規劃客製而定</div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">標準雙人5尺+架高床底價格參考，實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 玩色格格">
+                      <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 玩色格格">
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/mattress/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到床組
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 玩色格格"
-  src="s1.webp"
-  height="675"
-  width="1200"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 玩色格格"
-  src="3f02e8a9-7307-4413-aa2a-d8df72e230fa.webp"
-  height="1600"
-  width="1052"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

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

@@ -8,96 +8,100 @@ image: "/master_bedroom/rising_bed/1.webp"
 description: "步步高昇 - 臥室 / 雲杉實木骨架 / 學業高升、事業高升、健康高升、步步高昇，一款伴隨你成長的床架"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/master_bedroom">臥室</a> > <a href="/master_bedroom/rising_bed">步步高昇</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 步步高昇"
-              >
-<amp-img
-  alt="小寶優居 | 步步高昇"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 步步高昇"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 步步高昇|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 步步高昇|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 步步高昇">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 步步高昇">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>步步高昇</b></div>
-            <div class="description">
-<b>學業高升、事業高升、健康高升、步步高昇，一款伴隨你成長的床架</b>
+            <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>$37,400</span>
+            </div>
+            <!-- <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
+            </div> -->
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">雲杉實木骨架</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $37,400</div>
-<span></span>
-<span></span>
-<div>材質 ： 雲杉實木骨架</div>
-<div>備註 ： 標準雙人5尺+架高床底價格參考，實際價格將依需求規劃客製而定</div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">標準雙人5尺+架高床底價格參考，實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 步步高昇">
+                      <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 步步高昇">
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/mattress/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到床組
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 步步高昇"
-  src="s1.webp"
-  height="675"
-  width="1200"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 步步高昇"
-  src="e6fc8425-049f-4408-b2f1-529183840277.webp"
-  height="1600"
-  width="1052"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

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

@@ -8,90 +8,100 @@ image: "/master_bedroom/perfect_bed/1.webp"
 description: "圓滿床架 - 臥室 / 松木 / 你都吃圓了，都滿出床了，而我還是愛你，這就是所謂的圓滿吧！"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/master_bedroom">臥室</a> > <a href="/master_bedroom/perfect_bed">圓滿床架</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 圓滿床架"
-              >
-<amp-img
-  alt="小寶優居 | 圓滿床架"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 圓滿床架"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 圓滿床架|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 圓滿床架|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 圓滿床架">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 圓滿床架">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>圓滿床架</b></div>
-            <div class="description">
-<b>你都吃圓了，都滿出床了，而我還是愛你，這就是所謂的圓滿吧！</b>
+            <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>$36,800</span>
+            </div>
+            <!-- <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
+            </div> -->
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">雲杉實木骨架</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $36,800</div>
-<span></span>
-<span></span>
-<div>材質 ： 松木</div>
-<div>備註 ： 標準雙人5尺價格參考，實際價格將依需求規劃客製而定</div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">標準雙人5尺+架高床底價格參考，實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 圓滿床架">
+                      <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 圓滿床架">
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/mattress/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到床組
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 圓滿床架"
-  src="s1.webp"
-  height="911"
-  width="1983"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

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

@@ -36,21 +36,21 @@ description: "漂浮茶几  / 系統板材（塑合板） / 飄浮，讓世界
           <div class="slider-box">
             <div class="slider slider-for slider-design">
               <div class="design-img">
-                <img src="1.webp" alt="小寶優居 | 蜜絲媞沙發">
+                <img src="1.webp" alt="小寶優居 | 漂浮茶几">
               </div>
               <div class="design-img">
-                <img src="2.webp" alt="小寶優居 | 蜜絲媞沙發">
+                <img src="2.webp" alt="小寶優居 | 漂浮茶几">
               </div>
               <div class="design-img">
-                <img src="3.webp" alt="小寶優居 | 蜜絲媞沙發">
+                <img src="3.webp" alt="小寶優居 | 漂浮茶几">
               </div>
             </div>
             <div class="slider slider-nav mt-lg-2">
               <div>
-                <img src="1.webp" alt="小寶優居 | 蜜絲媞沙發">
+                <img src="1.webp" alt="小寶優居 | 漂浮茶几">
               </div>
               <div class="middle-item">
-                <img src="2.webp" alt="小寶優居 | 蜜絲媞沙發">
+                <img src="2.webp" alt="小寶優居 | 漂浮茶几">
               </div>
             </div>
           </div>
@@ -71,7 +71,7 @@ description: "漂浮茶几  / 系統板材（塑合板） / 飄浮，讓世界
             </div>
             <div class="my-2 d-flex">
                 <div class="tw-15">材質</div>
-              <div class="tw-85">系統板材（塑合板</div>
+              <div class="tw-85">系統板材（塑合板）</div>
             </div>
             <div class="d-flex">
               <div class="tw-15">備註</div>
@@ -82,7 +82,7 @@ description: "漂浮茶几  / 系統板材（塑合板） / 飄浮，讓世界
         <div class="b-bottom pb-3 mb-5">
           <!-- <h6>尺寸規格</h6>
           <img class="w-100 h-100" src="s1.webp"
-            alt="小寶優居 | 蜜絲媞沙發"> -->
+            alt="小寶優居 | 漂浮茶几"> -->
           <h6 class="mt-4">說明</h6>
           <ul>
             <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
@@ -90,9 +90,9 @@ description: "漂浮茶几  / 系統板材（塑合板） / 飄浮，讓世界
           </ul>
         </div>
         <div class="mb-5">
-          <a href="/furniture_design/sofa/">
+          <a href="/furniture_design/side_table/">
             <p class="readMore text-center">
-              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到沙發
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到茶几
             </p>
           </a>
         </div>

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

@@ -7,85 +7,95 @@ url: "/system_cabinet/golden_brick_coffee_table"
 image: "/system_cabinet/golden_brick_coffee_table/1.webp"
 description: "金磚茶几  / 系統板材（塑合板） / 金磚象徵著大富大貴，也象徵著無瑕的單純金磚生活無暇設計"
 ---
-
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/system_cabinet">模組系統櫃單品</a> > <a href="/system_cabinet/golden_brick_coffee_table">金磚茶几</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 金磚茶几"
-              >
-<amp-img
-  alt="小寶優居 | 金磚茶几"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 金磚茶几"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 金磚茶几|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 金磚茶几|小寶優居・系統家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 金磚茶几">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>金磚茶几</b></div>
-            <div class="description">
-<b>金磚象徵著大富大貴，也象徵著無瑕的單純金磚生活無暇設計</b>
+          <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>  $23,500</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">門市擁有43種板材顏色，依規劃客製挑選</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬1050 X 深700 X 高500(mm)</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $23,500</div>
-<div>顏色 ： 門市擁有43種板材顏色，依規劃客製挑選</div>
-<div>尺寸(mm) ： 寬1050 X 深700 X 高500</div>
-<div>材質 ： 系統板材（塑合板）</div>
-<div>備註 ： 可客製加寬為140公分，實際價格將依需求規劃客製而定</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-15">備註</div>
+              <div class="tw-85">可客製加寬為140公分，實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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/side_table/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到茶几
+            </p>
+          </a>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/side_table/four_seasons_big_chair/index.md

@@ -35,45 +35,53 @@ description: "四時不惑大几 - 客廳 / 梣木 / 40不惑，不再疑惑"
           <div class="slider-box">
             <div class="slider slider-for slider-design">
               <div class="design-img">
-                <img src="1.webp" alt="小寶優居 | 蜜絲媞沙發">
+                <img src="1.webp" alt="小寶優居 | 四時不惑大几">
               </div>
               <div class="design-img">
-                <img src="2.webp" alt="小寶優居 | 蜜絲媞沙發">
+                <img src="2.webp" alt="小寶優居 | 四時不惑大几">
               </div>
               <div class="design-img">
-                <img src="3.webp" alt="小寶優居 | 蜜絲媞沙發">
+                <img src="3.webp" alt="小寶優居 | 四時不惑大几">
               </div>
             </div>
             <div class="slider slider-nav mt-lg-2">
               <div>
-                <img src="1.webp" alt="小寶優居 | 蜜絲媞沙發">
+                <img src="1.webp" alt="小寶優居 | 四時不惑大几">
               </div>
               <div class="middle-item">
-                <img src="2.webp" alt="小寶優居 | 蜜絲媞沙發">
+                <img src="2.webp" alt="小寶優居 | 四時不惑大几">
               </div>
             </div>
           </div>
-          <div class="ms-2 fw-bold">
+            <div class="ms-2 fw-bold">
             <h3 class="mt-4">四時不惑大几 </h3>
             <p class="mb-5">40不惑，不再疑惑</p>
-            <div>
-              <span class="me-3">顏色</span>
-              <span>自然色、胡桃色、橡木色、謐白色</span>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span>$20,800</span>
             </div>
-            <div class="my-2">
-              <span class="me-3">材質</span>
-              <span>梣木</span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬800 X 深800 X 高400(mm)</div>
+            </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-15">備註</div>
+              <div class="tw-85">可客製加寬為140公分，實際價格將依需求規劃客製而定</div>
             </div>
-            <!-- <div>
-              <span class="me-3">備註</span>
-              <span>實際價格將依需求規劃客製而定</span>
-            </div> -->
           </div>
         </div>
         <div class="b-bottom pb-3 mb-5">
           <!-- <h6>尺寸規格</h6>
           <img class="w-100 h-100" src="s1.webp"
-            alt="小寶優居 | 蜜絲媞沙發">
+            alt="小寶優居 | 四時不惑大几">
           <h6 class="mt-4">說明</h6> -->
           <ul>
             <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
@@ -81,7 +89,7 @@ description: "四時不惑大几 - 客廳 / 梣木 / 40不惑，不再疑惑"
           </ul>
         </div>
         <div class="mb-5">
-          <a href="/furniture_design/table/">
+          <a href="/furniture_design/side_table/">
             <p class="readMore text-center">
               <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到茶几
             </p>

content/furniture_design_list/side_table/good_friends_chair/index.md

@@ -7,85 +7,95 @@ url: "/living_room/good_friends_chair"
 image: "/living_room/good_friends_chair/1.webp"
 description: "友直茶几 - 客廳 / 梣木 / 人生路深長不見盡頭， 不論多長總，有些面孔熟悉著、陪伴著， 一通電話相聚交心；人生路上有橫有豎， 朋友， 這兒永遠有你的位置"
 ---
-
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/living_room">客廳</a> > <a href="/living_room/good_friends_chair">友直茶几</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 友直茶几"
-              >
-<amp-img
-  alt="小寶優居 | 友直茶几"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 友直茶几"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 友直茶几|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 友直茶几|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 友直茶几">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>友直茶几</b></div>
-            <div class="description">
-<b>人生路深長不見盡頭， 不論多長總，有些面孔熟悉著、陪伴著， 一通電話相聚交心；人生路上有橫有豎， 朋友， 這兒永遠有你的位置</b>
+            <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>$19,200</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬1000 X 深600 X 高450(mm)</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $19,200</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬1000 X 深600 X 高450</div>
-<div>材質 ： 梣木</div>
-<span></span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">梣木</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">可客製加寬為140公分，實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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/side_table/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到茶几
+            </p>
+          </a>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/side_table/lucky_coffee_table/index.md

@@ -7,99 +7,98 @@ url: "/living_room/lucky_coffee_table"
 image: "/living_room/lucky_coffee_table/736a1950-fdd4-4152-9957-797b984b0161.webp"
 description: "幸運茶几 - 客廳 / 梣木+鐵件 / 希望、付出和愛代表了幸運草的三片葉子，是一個家的組成必備三元素，無條件的付出，而我們的未來，就在愛裡延續著。"
 ---
-
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/living_room">客廳</a> > <a href="/living_room/lucky_coffee_table">幸運茶几</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 幸運茶几"
-              >
-<amp-img
-  alt="小寶優居 | 幸運茶几"
-  src="736a1950-fdd4-4152-9957-797b984b0161.webp"
-  height="1200"
-  width="1200"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 幸運茶几"
-  src="d6fa2416-b464-45db-879a-cda2b322ecd0.webp"
-  height="1200"
-  width="1200"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 幸運茶几"
-  src="fe6694ef-ecff-4ac3-82a2-9ad1b1c9e2da.webp"
-  height="1200"
-  width="1200"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="736a1950-fdd4-4152-9957-797b984b0161.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 幸運茶几|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="d6fa2416-b464-45db-879a-cda2b322ecd0.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 幸運茶几|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=2)">
-            <amp-img
-              src="fe6694ef-ecff-4ac3-82a2-9ad1b1c9e2da.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 幸運茶几|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 幸運茶几">
+              </div>
+                  <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 幸運茶几">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>幸運茶几</b></div>
-            <div class="description">
-<b>希望、付出和愛代表了幸運草的三片葉子，是一個家的組成必備三元素，無條件的付出，而我們的未來，就在愛裡延續著。</b>
+            <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>$23,200</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬800 X 深800 X 高450(mm)</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $23,200</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬800 X 深800 X 高450</div>
-<div>材質 ： 梣木+鐵件</div>
-<div>備註 ： 共兩色，謐白色層板與曜石灰層板可供選擇，實際產品請洽門市人員</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-15">備註</div>
+              <div class="tw-85">共兩色，謐白色層板與曜石灰層板可供選擇，實際產品請洽門市人員</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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/side_table/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到茶几
+            </p>
+          </a>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/side_table/matured_toast/index.md

@@ -7,85 +7,95 @@ url: "/living_room/matured_toast"
 image: "/living_room/matured_toast/1.webp"
 description: "熟成吐司 - 客廳 / 梣木、樺木積層板 / 熟成你的家庭，讓客廳井然有序"
 ---
-
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/living_room">客廳</a> > <a href="/living_room/matured_toast">熟成吐司</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 熟成吐司"
-              >
-<amp-img
-  alt="小寶優居 | 熟成吐司"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 熟成吐司"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 熟成吐司|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 熟成吐司|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 熟成吐司">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>熟成吐司</b></div>
-            <div class="description">
-<b>熟成你的家庭，讓客廳井然有序</b>
+            <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>$45,200</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬780 X 深780 X 高510(mm)</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $45,200</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬780 X 深780 X 高510</div>
-<div>材質 ： 梣木、樺木積層板</div>
-<span></span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">梣木、樺木積層板</div>
             </div>
+            <!-- <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">可客製加寬為140公分，實際價格將依需求規劃客製而定</div>
+            </div> -->
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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/side_table/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到茶几
+            </p>
+          </a>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/side_table/round_table/index.md

@@ -7,85 +7,95 @@ url: "/living_room/round_table"
 image: "/living_room/round_table/1.webp"
 description: "緣圓大几 - 客廳 / 梣木 / 人生有三圓，家圓情圓友團圓，三角圓圓，闔家緣圓"
 ---
-
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/living_room">客廳</a> > <a href="/living_room/round_table">緣圓大几</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 緣圓大几"
-              >
-<amp-img
-  alt="小寶優居 | 緣圓大几"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 緣圓大几"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 緣圓大几|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 緣圓大几|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </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="小寶優居 | 緣圓大几">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>緣圓大几</b></div>
-            <div class="description">
-<b>人生有三圓，家圓情圓友團圓，三角圓圓，闔家緣圓</b>
+            <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> $12,500</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬800 X 深800 X 高400(mm)</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $12,500</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬800 X 深800 X 高400</div>
-<div>材質 ： 梣木</div>
-<span></span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">梣木</div>
             </div>
+            <!-- <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">可客製加寬為140公分，實際價格將依需求規劃客製而定</div>
+            </div> -->
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <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/side_table/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到茶几
+            </p>
+          </a>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

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

@@ -2019,6 +2019,11 @@ img {
 
 /* 最新消息公告-news end */
 /* 小寶設計單品-furniture_design start */
+.furniture_design_content {
+  width: 55%;
+  margin: 0 auto;
+}
+
 .furniture-design p {
   padding-right: 20px;
   text-align: justify;
@@ -2255,6 +2260,14 @@ img {
   letter-spacing: 2px;
 }
 
+.tw-85 {
+  width: 85%;
+}
+
+.tw-15 {
+  width: 15%;
+}
+
 /* 小寶設計單品-furniture_design end */
 /* 設計家具 start */
 .design-container {

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

@@ -2099,6 +2099,11 @@ img {
 
 /* 最新消息公告-news end */
 /* 小寶設計單品-furniture_design start */
+.furniture_design_content{
+  width: 55%;
+  margin: 0 auto;
+
+}
 .furniture-design p {
   padding-right: 20px;
   text-align: justify;
@@ -2326,6 +2331,13 @@ img {
   letter-spacing: 2px;
 }
 
+.tw-85{
+  width:85%;
+  } 
+  .tw-15{
+    width:15%;
+    } 
+
 /* 小寶設計單品-furniture_design end */
 /* 設計家具 start */
 .design-container {

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

@@ -17,25 +17,25 @@ $(".responsive").slick({
 //   prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>',
 //   nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>'
 // });
-// function img_size() {
-//   $('.slide_img').each(function () { //jquery.each()循環讀取所有圖片
-//     var height = $(this).height();
-//     var width = $(this).width();
-//     console.log(height)
-//     if (height > 200) {
-//       $(this).css({
-//         'width': 100 + 'px',
-//         "margin": 'auto',
-//       });
-//     }
-//     else {
-//       $(this).css({
-//         "margin-top": '30px',
-//       });
-//     }
-//   });
-// }
-// img_size();
+function img_size() {
+  $('.slide_img').each(function () { //jquery.each()循環讀取所有圖片
+    var height = $(this).height();
+    var width = $(this).width();
+    console.log(height)
+    if (height > 200) {
+      $(this).css({
+        'width': 100 + 'px',
+        "margin": 'auto',
+      });
+    }
+    else {
+      $(this).css({
+        "margin-top": '30px',
+      });
+    }
+  });
+}
+img_size();
 
 $(document).on("click", ".article__readMore", function (event) {
   $('.bhouseweb_loc_sec02').css('height', 'auto');