update

config.toml

@@ -150,7 +150,8 @@ paginate = 30
     disabled_logo = false
     logo_text = "Universal"
 
-    logo = "img/bt_index@2x.png"
+    logo = "img/home/bt_index@2x.png"
+    logo_mobile = "img/home/LOGO-02.png"
     logo_small = "img/logo-small.png"
     contact_url = "/contact"
     address = """<p class="text-uppercase"><strong>Universal Ltd.</strong>

content/maincategories/_index.md

@@ -1,8 +1,4 @@
----
-title: "categories"
-id : "categories"
-draft: false
-type: "categories"
-url: "/maincategories/"
-image: ""
----
++++
+title = "maincategories"
+id = "maincategories"
++++

content/maincategories/pre-sale_tenants_become_lazy_packs/index.md

@@ -2,188 +2,147 @@
 title: "【客變】 預售屋客變懶人包：客變什麼？這樣做好不好？"
 date: 2021-06-04T11:52:23+08:00
 draft: false
-type: "blog"
+type: "maincategories"
 url: "/maincategories/pre-sale_tenants_become_lazy_packs/"
 image: "/img/blog/boutique_hotel_slightly_drunk_chill_house_2.webp"
 categories: ["認識裝修裝潢"]
 description: "「我買了預售屋，有很多客變的想法！建設公司通知我要客變了，但我不知道這樣做好不好？」"
-
 ---
 <div class="container-fluid blog_article p-0">
-  <div class="blog-banner"></div>
-  <div class="content">
-    <section>
-      <h3>【預售客變】 預售屋客變懶人包：客變什麼？這樣做好不好？</h3>
-      <div class="d-flex justify-content-between align-items-center">
-        <span>2021-11-23</span>
-        <div class="icon-box">
-          <a href=""><img src="/img/icon_fb@2x.png" alt=""></a>
-          <a href=""><img src="/img/icon_line@2x.png" alt=""></a>
-        </div>
-      </div>
-    </section>
-    <section>
-      <p>「我買了預售屋，有很多客變的想法！建設公司通知我要客變了，但我不知道這樣做好不好？」</p>
-      <br>
-      <p>「客變」是許多人在成家過程中遇到的第一個考題，對新手買房的屋主來說，要在短時間決定影響未來生活機
-        能的客變項目，甚至在對格局、生活需求沒有想像時，決定要做哪些更動，是有難度的。</p>
-      <br>
-      <div class="question-box">
-        <ul>
-          <li>小寶優居的客變懶人包將幫你解決以下客變問題：</li>
-          <li>1. <a href="">客變是什麼？為什麼要客變？</a></li>
-          <li>2. <a href="">客變可更變的內容有哪些？</a></li>
-          <li>3. <a href="">客變到底是省錢還是花錢？客變怎麼省錢？會產生哪些費用？</a></li>
-          <li>4. <a href="">常見的客變需求與建議？我想這樣客變好不好？</a></li>
-          <li>5. <a href="">設計師協助客變的流程？</a></li>
-        </ul>
-      </div>
-    </section>
-    <section class="img-box">
-      <img class="w-100" src="/img/collection/boutique_hotel_slightly_drunk_chill_house_2.webp" alt="">
-      <p>圖說NotoJPMedium14級字行距28pt <br> 圖說NotoJPMedium14級字行距28pt</p>
-    </section>
-    <section class="section-01">
-      <h4>客變是什麼？為什麼要客變？</h4>
-      <p>「客變」是許多買預售屋的屋主期待的成家環節，在建設公司公告的客變期限內，屋主可以依照需求變更房屋
-        設計，就是所謂的<b>「客戶變更設計」</b>簡稱客變。
-        預售屋客變的最大優點就是可以讓房屋的格局與規劃更符合購屋者的需求，像是如果不想用建設公司提供的
-        廚具、不喜歡地板的款式，甚至有一道隔間牆不想施作或者移位，可以在客變階段提出變更，讓建設公司在施
-        作時依照你的規劃調整，降低之後拆掉重做的成本。
-        一般來說建設公司會有「客變規範資料」，讓客戶可以在客變期限前，<b>在不影響建築結構安全，及管線通暢的情
-        況下，可以進行格局、建材上「有限度的變更」</b>，針對可更動項目，建設公司會提出相對的施作報價，也可能因為
-        部分品項取消，可以退回設備與建材的項目金額。
-        客變是建設公司提供給客戶的服務之一，每個建案、建設公司可接受的客變都程度不同，並沒有規定建設公司
-        一定要讓客戶客變，所以小寶優居都會先建議想要客變的屋主「向建設公司先行詢問可客變範圍」。</p>
-    </section>
-    <section class="section-02">
-      <h4>客變可變更的內容有哪些？</h4>
-      <p>許多成家新手誤會客變可以隨心所欲地調整內容，但事實上房屋的共同外觀以及每一戶共用的管路位置是無
-        法變更的，也就是窗戶、大門、陽台、樑柱、承重牆、廚房跟廁所位置、管道間都是無法變更的項目。</p>
-      <ul>
-        <li>常見可以進行客變的地方有以下：</li>
-        <li>1. 隔間：屋內的格局，像是不做隔間牆、改門的位置、增加隔間…。</li>
-        <li>2. 建材：地板（石英磚、木地板）、廚房衛浴磁磚、油漆…，通常是退料不退工。</li>
-        <li>3. 設備：建設公司提供的廚具與衛浴設備，如果不喜歡可以退訂。</li>
-        <li>4. 水電：插座、網路線、電話線、水龍頭與排水孔的位置…。</li>
-      </ul>
-    </section>
-    <section class="img-box">
-      <img class="w-100" src="/img/collection/boutique_hotel_slightly_drunk_chill_house_2.webp" alt="">
-      <p>圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說 <br> 圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說</p>
-    </section>
-    <section class="section-03">
-      <h4>客變到底是省錢還是花錢？會產生費用？</h4>
-      <p>常常可以聽見別人說客變可以節省裝修費用，事實上，客變可以幫你省下的是更動項目的拆除費用以及重複
-        支付的建材、設備費用，舉例來說，你想要把三房改成兩房，就可以在客變階段請建設公司少做一道牆，不僅省
-        下原先改兩房的拆除、清運費用，裝修時也可以更省時省力；但在客變階段，建設公司協助你修改與新增的項
-        目還是會有相應的費用產生，建設公司會就客變項目逐條列出費用與明細給屋主確認。</p>
-      <ul>
-        <li>一般來說，客變分成「退訂」、「修改新增」兩個方向：</li>
-        <li>
-          <span><b>• 退訂</b></span>
-          <p>
-            是針對原先施作的項目與設備做取消，像是不要鋪石英磚、不要門片、不要瓦斯爐、不要浴缸…。
-            這類的退訂，通常可以退回該項目建材與設備費用（退料不退工），但因為建設公司所附的建材與設備大多是
-            大量採購，往往價格是低於市價，退回的費用並不是依照市價計算之外，重新施作對屋主也會是一筆額外的支
-            出，往往會有<b>「能退回的少，重做花更多」</b>的現象，因此如果沒有特別的堅持，小寶優居一般會建議屋主保留建
-            設公司提供的項目。
-          </p>
-        </li>
-        <li>
-          <span><b>• 修改新增</b></span>
-          <p>指的是針對建設公司原先的規劃進行修改，像是增加或修改插座位置、調整隔間位置…這類的
-            修改可能伴隨的是費用的增加，決定客變時也需要透過圖面與建設公司溝通，避免客變成果與期待有落差。</p>
-        </li>
-      </ul>
-    </section>
-    <section class="section-04">
-      <h4>裝修項目清單</h4>
-      <table>
-        <thead>
-          <tr>
-            <th>類別</th>
-            <th>裝修項目</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>木工</td>
-            <td>窗簾盒、冷氣包管</td>
-          </tr>
-          <tr>
-            <td>水電</td>
-            <td>電器專用插座與迴路設計</td>
-          </tr>
-          <tr>
-            <td>油漆</td>
-            <td>油漆跳色、特殊漆跳色</td>
-          </tr>
-          <tr>
-            <td>地板</td>
-            <td>全室地板、門片高度修改</td>
-          </tr>
-          <tr>
-            <td>泥作</td>
-            <td>玄關落塵區六角磚（使用台灣磚）</td>
-          </tr>
-          <tr>
-            <td>保護清潔</td>
-            <td>保護工程、細部清潔</td>
-          </tr>
-        </tbody>
-      </table>
-      <h4>常見的客變需求與建議</h4>
-      <ul>
-        <li>
-          <span><b>• 改格局、調整隔間</b></span>
-          <p>
-            拆除次臥房的隔間、移動隔間牆的位置改變房間大小…這類的更動就屬於更改格局，格局的更變<b>建議以減法
-            為主</b>，如果是增加隔間，小寶優居會協助屋主評估常見的家具尺寸後再進行格局更變，避免未來格局不合用、
-            甚至後悔的狀況。
-          </p>
-        </li>
-        <li>
-          <span><b>• 改格局、調整隔間</b></span>
-          <p>
-            插座的位移、新增其實不一定要在客變時進行，根據小寶優居過往的實際經驗，<b>完工後再調整插座位置，在費用上並沒有太大差距</b>，而且完工後依照櫃體、家具的尺寸進行規劃，也會比較精準、實用，所以插座的規劃不用
-            急於在客變階段完成。<br>
-            但若是有特殊的用電需求，像是用電量超出一般家庭，或者使用專業音響、安裝全熱交換器…需要獨立的迴路
-            就需要在客變階段提出討論。
-          </p>
-        </li>
-      </ul>
-    </section>
-    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center link-box">
-      <div class="d-flex flex-column flex-sm-row link-list">
-        <span>
-          <a href="">客變</a>
-          <a href="">預售屋</a>
-          <a href="">格局</a>
-        </span>
-        <span class="ms-0 ms-sm-1 mt-3 mt-sm-0">
-          <a href="">裝修</a>
-          <a href="">中島式廚房</a>
-          <a href="">乾濕分離</a>
-        </span>
-      </div>
-      <div class="d-flex icon-box mt-2 mt-md-0">
-        <a href=""><img src="/img/icon_fb@2x.png" alt=""></a>
-        <a href=""><img src="/img/icon_line@2x.png" alt=""></a>
-      </div>
+  <img class="w-100" src="/img/collection/boutique_hotel_slightly_drunk_chill_house_2.webp" alt="">
+  <div class="img-text">
+    <p>圖說NotoJPMedium14級字行距28pt <br> 圖說NotoJPMedium14級字行距28pt</p>
+  </div>
+  <h4>客變是什麼？為什麼要客變？</h4>
+  <p>「客變」是許多買預售屋的屋主期待的成家環節，在建設公司公告的客變期限內，屋主可以依照需求變更房屋
+    設計，就是所謂的<b>「客戶變更設計」</b>簡稱客變。
+    預售屋客變的最大優點就是可以讓房屋的格局與規劃更符合購屋者的需求，像是如果不想用建設公司提供的
+    廚具、不喜歡地板的款式，甚至有一道隔間牆不想施作或者移位，可以在客變階段提出變更，讓建設公司在施
+    作時依照你的規劃調整，降低之後拆掉重做的成本。
+    一般來說建設公司會有「客變規範資料」，讓客戶可以在客變期限前，<b>在不影響建築結構安全，及管線通暢的情
+      況下，可以進行格局、建材上「有限度的變更」</b>，針對可更動項目，建設公司會提出相對的施作報價，也可能因為
+    部分品項取消，可以退回設備與建材的項目金額。
+    客變是建設公司提供給客戶的服務之一，每個建案、建設公司可接受的客變都程度不同，並沒有規定建設公司
+    一定要讓客戶客變，所以小寶優居都會先建議想要客變的屋主「向建設公司先行詢問可客變範圍」。</p>
+  <span class="line"></span>
+  <section class="section-02">
+    <h4>客變可變更的內容有哪些？</h4>
+    <p>許多成家新手誤會客變可以隨心所欲地調整內容，但事實上房屋的共同外觀以及每一戶共用的管路位置是無
+      法變更的，也就是窗戶、大門、陽台、樑柱、承重牆、廚房跟廁所位置、管道間都是無法變更的項目。</p>
+    <div class="list-title">
+      <p>常見可以進行客變的地方有以下：</p>
     </div>
-    <a class="nav-link" href="/maincategories">
-      <p class="readMore text-center">
-        <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到成家知識庫
-      </p>
-    </a>
-    <ul class="read-more-list">
-      <li>你可能會喜歡的，延伸閱讀點擊標題，看更多設計專欄！</li>
-      <li><a href="">【居家風格】 60萬以下 ↓ 超有氛圍的成家夢想</a></li>
-      <li><a href="">【認識裝潢裝修】 模組系統櫃板材等級挑選5攻略</a></li>
-      <li><a href="">【認識裝潢裝修】 11-20坪 小坪數裝潢裝修，規劃師教你小宅打造大空間</a></li>
-      <li><a href="">【認識裝潢裝修】 什麼是輕裝修？輕裝修的定義是什麼？輕裝修包含什麼呢？</a></li>
-      <li><a href="">【規劃師服務】 什麼是規劃師？連室內設計師都推薦的「規劃師服務」</a></li>
+    <ul>
+      <!-- <li>常見可以進行客變的地方有以下：</li> -->
+      <li>1. 隔間：屋內的格局，像是不做隔間牆、改門的位置、增加隔間…。</li>
+      <li>2. 建材：地板（石英磚、木地板）、廚房衛浴磁磚、油漆…，通常是退料不退工。</li>
+      <li>3. 設備：建設公司提供的廚具與衛浴設備，如果不喜歡可以退訂。</li>
+      <li>4. 水電：插座、網路線、電話線、水龍頭與排水孔的位置…。</li>
     </ul>
+  </section>
+  <img class="w-100" src="/img/collection/boutique_hotel_slightly_drunk_chill_house_2.webp" alt="">
+  <div class="img-text">
+    <p>圖說NotoJPMedium14級字行距28pt <br> 圖說NotoJPMedium14級字行距28pt</p>
+  </div>
+  <h4>客變到底是省錢還是花錢？會產生費用？</h4>
+  <p>常常可以聽見別人說客變可以節省裝修費用，事實上，客變可以幫你省下的是更動項目的拆除費用以及重複
+    支付的建材、設備費用，舉例來說，你想要把三房改成兩房，就可以在客變階段請建設公司少做一道牆，不僅省
+    下原先改兩房的拆除、清運費用，裝修時也可以更省時省力；但在客變階段，建設公司協助你修改與新增的項
+    目還是會有相應的費用產生，建設公司會就客變項目逐條列出費用與明細給屋主確認。</p>
+  <div class="list-title">
+    <p>一般來說，客變分成「退訂」、「修改新增」兩個方向：</p>
+  </div>
+  <ul>
+    <!-- <li>一般來說，客變分成「退訂」、「修改新增」兩個方向：</li> -->
+    <li>
+      <span><b>• 退訂</b></span>
+      <p>
+        是針對原先施作的項目與設備做取消，像是不要鋪石英磚、不要門片、不要瓦斯爐、不要浴缸…。
+        這類的退訂，通常可以退回該項目建材與設備費用（退料不退工），但因為建設公司所附的建材與設備大多是
+        大量採購，往往價格是低於市價，退回的費用並不是依照市價計算之外，重新施作對屋主也會是一筆額外的支
+        出，往往會有<b>「能退回的少，重做花更多」</b>的現象，因此如果沒有特別的堅持，小寶優居一般會建議屋主保留建
+        設公司提供的項目。
+      </p>
+    </li>
+    <li>
+      <span><b>• 修改新增</b></span>
+      <p>指的是針對建設公司原先的規劃進行修改，像是增加或修改插座位置、調整隔間位置…這類的
+        修改可能伴隨的是費用的增加，決定客變時也需要透過圖面與建設公司溝通，避免客變成果與期待有落差。</p>
+    </li>
+  </ul>
+  <span class="line"></span>
+  <h4>裝修項目清單</h4>
+  <table>
+    <thead>
+      <tr>
+        <th>類別</th>
+        <th>裝修項目</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>木工</td>
+        <td>窗簾盒、冷氣包管</td>
+      </tr>
+      <tr>
+        <td>水電</td>
+        <td>電器專用插座與迴路設計</td>
+      </tr>
+      <tr>
+        <td>油漆</td>
+        <td>油漆跳色、特殊漆跳色</td>
+      </tr>
+      <tr>
+        <td>地板</td>
+        <td>全室地板、門片高度修改</td>
+      </tr>
+      <tr>
+        <td>泥作</td>
+        <td>玄關落塵區六角磚（使用台灣磚）</td>
+      </tr>
+      <tr>
+        <td>保護清潔</td>
+        <td>保護工程、細部清潔</td>
+      </tr>
+    </tbody>
+  </table>
+  <h4>常見的客變需求與建議</h4>
+  <ul>
+    <li>
+      <span><b>• 改格局、調整隔間</b></span>
+      <p>
+        拆除次臥房的隔間、移動隔間牆的位置改變房間大小…這類的更動就屬於更改格局，格局的更變<b>建議以減法
+          為主</b>，如果是增加隔間，小寶優居會協助屋主評估常見的家具尺寸後再進行格局更變，避免未來格局不合用、
+        甚至後悔的狀況。
+      </p>
+    </li>
+    <li>
+      <span><b>• 改格局、調整隔間</b></span>
+      <p>
+        插座的位移、新增其實不一定要在客變時進行，根據小寶優居過往的實際經驗，<b>完工後再調整插座位置，在費用上並沒有太大差距</b>，而且完工後依照櫃體、家具的尺寸進行規劃，也會比較精準、實用，所以插座的規劃不用
+        急於在客變階段完成。<br>
+        但若是有特殊的用電需求，像是用電量超出一般家庭，或者使用專業音響、安裝全熱交換器…需要獨立的迴路
+        就需要在客變階段提出討論。
+      </p>
+    </li>
+  </ul>
+  <span class="line"></span>
+  <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center link-box">
+    <div class="d-flex flex-column flex-sm-row link-list">
+      <span>
+        <a href="">客變</a>
+        <a href="">預售屋</a>
+        <a href="">格局</a>
+      </span>
+      <span class="ms-0 ms-sm-1 mt-3 mt-sm-0">
+        <a href="">裝修</a>
+        <a href="">中島式廚房</a>
+        <a href="">乾濕分離</a>
+      </span>
+    </div>
+    <div class="d-flex icon-box mt-2 mt-md-0">
+      <a href=""><img src="/img/icon_fb@2x.png" alt=""></a>
+      <a href=""><img src="/img/icon_line@2x.png" alt=""></a>
+    </div>
   </div>
 </div>

layouts/about_bhouse/about_bhouse.html

@@ -8,14 +8,7 @@
 <body>
   {{ partial "nav.html" . }}
   <section class="bhouseweb_loc_banner">
-    <div class="card bg-transparent text-white border-0 rounded-0">
-      <div class="brand-banner"></div>
-      <!-- <img src="/img/banner/bn_concept@2x.png" class="banner-img card-img rounded-0" alt="..."> -->
-      <div class="d-flex justify-content-end">
-        <div class="bt_slogan text-center">
-        </div>
-      </div>
-    </div>
+    <img src="/img/banner/bn_concept@2x.png" class="banner-img card-img" alt="...">
   </section>
   <div class="brand_content">
     <section class="brand_sec01">

layouts/about_mattress/about_mattress.html

@@ -8,106 +8,108 @@
 <body style="overflow-x: hidden;">
 
   {{ partial "nav.html" . }}
-  
+
   <div class="furniture-design">
-    <div class="design-banner"></div>
-  <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
-    <li class="nav-item" role="presentation">
-      <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
-    </li>
-    <li class="nav-item tab-item" role="presentation">
-      <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
-    </li>
-    <li class="nav-item tab-item" role="presentation">
-      <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
-    </li>
-    <li class="nav-item tab-item" role="presentation">
-      <a href="/about_mattress" id="mattress-tab" class="nav-link design-border">關於床墊</a>
-    </li>
-  </ul>
- <!-- 關於床墊 -->
- <div class="bhouseweb_loc_content" id="mattress">
-  <div class="container" style="margin-top: 100px;">
-    <div class="row mb-5 align-items-center b-bottom">
-      <div class="col-12">
-        <h5>小寶優居 zzsleeper吾居床墊</h5>
-        <img class="my-4" src="/img/system_furniture/bn_product_bed_01@2x.png" alt="">
-        <h5 class="my-4">找到適合自己的房子，你也該有一張適合自己的床</h5>
-        <p class="mb-5">一輩子的家，交給最貼心的小寶優居。<br>
-          三分之一的人生，就交給由專業治療師團隊組成的 ZZ 你的睡眠顧問。</p>
-        <img src="/img/system_furniture/bn_product_bed_02@2x.png" alt="">
-      </div>
-    </div>
-    <div class="row pb-5 b-bottom align-items-center">
-      <div class="col-12 col-lg-6">
-        <h5 class="text-center text-lg-start">我們想要，給你一場無拘無束的睡眠體驗</h5>
-        <p class="m-0 text-center text-lg-start">
-          ZZ 五年以來，<br>
-          我們治療師親自服務了近 6000 人，<br>
-          客製了 1832 床後，<br>
-          根據實際數據所做出的<br>
-          ⸺最「平衡」的一張床墊。
-        </p>
-      </div>
-      <div class="col-12 col-lg-6">
-        <img src="/img/system_furniture/bn_product_bed_03@2x.png" alt="">
-      </div>
-    </div>
-    <div class="row mb-5 pb-5 align-items-center b-bottom">
-      <div class="col-12">
-        <h5 class="my-5">舒適與耐用兼具的獨家設計</h5>
-        <img src="/img/system_furniture/bn_product_bed_04@2x.png" alt="">
-        <img src="/img/system_furniture/bn_product_bed_05@2x.png" alt="">
-      </div>
-    </div>
-    <div class="row pb-5 align-items-center">
-      <div class="col-12 col-lg-6">
-        <h5 class="text-center text-lg-start">超越獨立筒的極限抗干擾功能</h5>
-        <p class="m-0 text-center text-lg-start">
-          不管你的另一半睡姿如何，<br>
-          他怎麼翻身，你依然安穩。
-        </p>
-      </div>
-      <div class="col-12 col-lg-6">
-        <img src="/img/system_furniture/bn_product_bed_03@2x.png" alt="">
+    <section class="bhouseweb_loc_banner">
+      <img src="/img/banner/bn_product@2x.png" class="banner-img card-img" alt="...">
+    </section>
+    <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
+      <li class="nav-item" role="presentation">
+        <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
+      </li>
+      <li class="nav-item tab-item" role="presentation">
+        <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
+      </li>
+      <li class="nav-item tab-item" role="presentation">
+        <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
+      </li>
+      <li class="nav-item tab-item" role="presentation">
+        <a href="/about_mattress" id="mattress-tab" class="nav-link design-border">關於床墊</a>
+      </li>
+    </ul>
+    <!-- 關於床墊 -->
+    <div class="bhouseweb_loc_content" id="mattress">
+      <div class="container" style="margin-top: 100px;">
+        <div class="row mb-5 align-items-center b-bottom">
+          <div class="col-12">
+            <h5>小寶優居 zzsleeper吾居床墊</h5>
+            <img class="my-4" src="/img/system_furniture/bn_product_bed_01@2x.png" alt="">
+            <h5 class="my-4">找到適合自己的房子，你也該有一張適合自己的床</h5>
+            <p class="mb-5">一輩子的家，交給最貼心的小寶優居。<br>
+              三分之一的人生，就交給由專業治療師團隊組成的 ZZ 你的睡眠顧問。</p>
+            <img src="/img/system_furniture/bn_product_bed_02@2x.png" alt="">
+          </div>
+        </div>
+        <div class="row pb-5 b-bottom align-items-center">
+          <div class="col-12 col-lg-6">
+            <h5 class="text-center text-lg-start">我們想要，給你一場無拘無束的睡眠體驗</h5>
+            <p class="m-0 text-center text-lg-start">
+              ZZ 五年以來，<br>
+              我們治療師親自服務了近 6000 人，<br>
+              客製了 1832 床後，<br>
+              根據實際數據所做出的<br>
+              ⸺最「平衡」的一張床墊。
+            </p>
+          </div>
+          <div class="col-12 col-lg-6">
+            <img src="/img/system_furniture/bn_product_bed_03@2x.png" alt="">
+          </div>
+        </div>
+        <div class="row mb-5 pb-5 align-items-center b-bottom">
+          <div class="col-12">
+            <h5 class="my-5">舒適與耐用兼具的獨家設計</h5>
+            <img src="/img/system_furniture/bn_product_bed_04@2x.png" alt="">
+            <img src="/img/system_furniture/bn_product_bed_05@2x.png" alt="">
+          </div>
+        </div>
+        <div class="row pb-5 align-items-center">
+          <div class="col-12 col-lg-6">
+            <h5 class="text-center text-lg-start">超越獨立筒的極限抗干擾功能</h5>
+            <p class="m-0 text-center text-lg-start">
+              不管你的另一半睡姿如何，<br>
+              他怎麼翻身，你依然安穩。
+            </p>
+          </div>
+          <div class="col-12 col-lg-6">
+            <img src="/img/system_furniture/bn_product_bed_03@2x.png" alt="">
+          </div>
+        </div>
+        <div class="bg-text">
+          <p>住在自己喜歡的房子，睡在一張舒服的床，<br>
+            這是小寶優居和ZZ想給你的最棒成家禮！</p>
+        </div>
+        <section style="margin-top: 280px;">
+          <h5>保固政策及售後服務</h5>
+          <p class="mt-4">試睡期：<br>
+            恕不提供。因床墊屬於個人衛生用品，不適用網購 7 天無條件退貨條件內。<br>
+            新品更換判定標準：顧客收到床墊的 30 天內提出，屬產品瑕疵認定可更換新品。《不屬於瑕疵定義》見下方說明<br>
+            保固期：<br>
+            我們提供 10 年保固，範圍限於床墊主結構。以表面高低差 20% 為保固標準，意指若 20 公分厚之床墊，凹陷超過 4 公分就算保固內。《非保固條件》見下方說明<br>
+            保固時間從床墊送達當天開始計算，以簽收單日期為準。<br>
+            售後服務：<br>
+            產品使用上有任何問題都可致電 ZZ sleeper 客服（04-22542880）或 line@ 詢問（@zzsleeper）</p>
+          <ul class="mt-4 p-0" style="line-height: 32px;">
+            <li>《不屬於瑕疵定義》</li>
+            <li>1. 床墊本身不添加抗氧化劑等不必要的化學添加物，所以正常使用下會逐漸轉為淡黃色是自然現象，不會影響產品功能。</li>
+            <li>2. 製作過程中會添加的無毒介面活性劑，剛開始可能會有一點點異味，通風後大約 1~2 周就會完全散掉了，不用
+              擔心！</li>
+            <li>3. 邊緣處可能有些許波浪狀 (切割線處) 的現象，屬正常現象，若追求完美者請勿下單。</li>
+            <li>4. 製作過程中可能產生自然發泡的小孔洞，若孔洞在直徑 1cm 內，屬正常現象，若追求完美者請勿下單。</li>
+            <li>5. 床墊尺寸長.寬.高會有些許約 ±2 公分的誤差值為正常範圍內，若追求完美者請勿下單。</li>
+          </ul>
+          <ul class="mt-4 p-0 flex-column" style="line-height: 32px;">
+            <li>《非保固條件》</li>
+            <li>1. 床墊表布的自然損耗。</li>
+            <li>2. 非常規使用方式，如：於床墊上跑跳、不當切割、刮傷，或不當清潔方式所導致的人為意外損壞。</li>
+            <li>3. 受到外在因素或環境所導致的損毀、耗損，如：陽光曝曬、環境濕氣過重導致黴菌孳生、蟲害造成的問題。</li>
+            <li>4. 因為自行搬移、拆除或者修補產品而造成的毀損。</li>
+            <li>5. 因為天災或意外事件所引起的毀損。</li>
+            <li>6. 贈品不在保固範圍內。</li>
+            <li>7. 違反產品的保固權益只涵蓋原始購買人，權益不得轉讓原則。</li>
+          </ul>
+        </section>
       </div>
     </div>
-    <div class="bg-text">
-      <p>住在自己喜歡的房子，睡在一張舒服的床，<br>
-        這是小寶優居和ZZ想給你的最棒成家禮！</p>
-    </div>
-    <section style="margin-top: 280px;">
-      <h5>保固政策及售後服務</h5>
-      <p class="mt-4">試睡期：<br>
-        恕不提供。因床墊屬於個人衛生用品，不適用網購 7 天無條件退貨條件內。<br>
-        新品更換判定標準：顧客收到床墊的 30 天內提出，屬產品瑕疵認定可更換新品。《不屬於瑕疵定義》見下方說明<br>
-        保固期：<br>
-        我們提供 10 年保固，範圍限於床墊主結構。以表面高低差 20% 為保固標準，意指若 20 公分厚之床墊，凹陷超過 4 公分就算保固內。《非保固條件》見下方說明<br>
-        保固時間從床墊送達當天開始計算，以簽收單日期為準。<br>
-        售後服務：<br>
-        產品使用上有任何問題都可致電 ZZ sleeper 客服（04-22542880）或 line@ 詢問（@zzsleeper）</p>
-        <ul class="mt-4 p-0" style="line-height: 32px;">
-          <li>《不屬於瑕疵定義》</li>
-          <li>1. 床墊本身不添加抗氧化劑等不必要的化學添加物，所以正常使用下會逐漸轉為淡黃色是自然現象，不會影響產品功能。</li>
-          <li>2. 製作過程中會添加的無毒介面活性劑，剛開始可能會有一點點異味，通風後大約 1~2 周就會完全散掉了，不用
-            擔心！</li>
-          <li>3. 邊緣處可能有些許波浪狀 (切割線處) 的現象，屬正常現象，若追求完美者請勿下單。</li>
-          <li>4. 製作過程中可能產生自然發泡的小孔洞，若孔洞在直徑 1cm 內，屬正常現象，若追求完美者請勿下單。</li>
-          <li>5. 床墊尺寸長.寬.高會有些許約 ±2 公分的誤差值為正常範圍內，若追求完美者請勿下單。</li>
-        </ul>
-        <ul class="mt-4 p-0 flex-column" style="line-height: 32px;">
-          <li>《非保固條件》</li>
-          <li>1. 床墊表布的自然損耗。</li>
-          <li>2. 非常規使用方式，如：於床墊上跑跳、不當切割、刮傷，或不當清潔方式所導致的人為意外損壞。</li>
-          <li>3. 受到外在因素或環境所導致的損毀、耗損，如：陽光曝曬、環境濕氣過重導致黴菌孳生、蟲害造成的問題。</li>
-          <li>4. 因為自行搬移、拆除或者修補產品而造成的毀損。</li>
-          <li>5. 因為天災或意外事件所引起的毀損。</li>
-          <li>6. 贈品不在保固範圍內。</li>
-          <li>7. 違反產品的保固權益只涵蓋原始購買人，權益不得轉讓原則。</li>
-        </ul>
-    </section>
-  </div>
- </div>
   </div>
 
   {{ partial "footer.html" . }}

layouts/collection/list.html

@@ -11,16 +11,13 @@
 
   <section class="bhouseweb_loc_banner">
     <div class="card bg-transparent text-white border-0 rounded-0">
-      <!-- <img src="/img/bn_portfolio2x.png" class="banner-img card-img" alt="..."> -->
-      <div class="collection-banner"></div>
+      <img src="/img/bn_portfolio2x.png" class="banner-img card-img" alt="...">
       <div class="d-flex justify-content-end bt_container">
         <div class="bt_slogan text-center">
           <img src="/img/chevron-double-down (1).svg" alt="">
-          <!-- <i class="far fa-chevron-double-down"></i> -->
         </div>
       </div>
       <img class="bt_slogan_portfolio" src="/img/bt_slogan_portfolio_h@2x.png" alt="">
-
     </div>
   </section>
   <div class="bhouseweb_loc_content">

layouts/frequently_asked_questions/frequently_asked_questions.html

@@ -24,23 +24,25 @@
   <!-- <div class="header-template"></div> -->
   {{ partial "nav.html" . }}
 
-  <div class="card bg-transparent text-white border-0 rounded-0">
-    <div class="qa-banner"></div>
-    <div class="d-flex justify-content-end bt_container">
-      <div class="bt_slogan text-center">
-        <img src="/img/chevron-double-down.svg" alt="">
+  <section class="bhouseweb_loc_banner">
+    <div class="card bg-transparent text-white border-0 rounded-0">
+      <img src="/img/banner/bn_qa@2x.png" class="banner-img card-img" alt="...">
+    <!-- <div class="qa-banner"></div> -->
+      <div class="d-flex justify-content-end bt_container">
+        <div class="bt_slogan text-center">
+          <img src="/img/chevron-double-down.svg" alt="">
+        </div>
       </div>
+      <img class="bt_slogan_portfolio" src="/img/banner/bt_slogan_qa_h@2x.png" alt="">
     </div>
-    <img class="bt_slogan_portfolio" src="/img/banner/bt_slogan_qa_h@2x.png" alt="">
-  </div>
+  </section>
+
   <div class="reserve">
     <a href="">
-      <img src="/img/bt_reserve@2x.png" alt="">
+      <img src="/img/home/線上預約icon.png" alt="">
     </a>
   </div>
 
-
-
   <div class="accordion accordion-flush" id="accordionPanelsStayOpenExample">
     <div class="container-fluid">
       <div class="row">
@@ -50,12 +52,12 @@
             <h2 class="accordion-header" id="panelsStayOpen-1">
               <button class="accordion-button collapsed botder-item" type="button" data-bs-toggle="collapse"
                 data-bs-target="#question-1" aria-expanded="false" aria-controls="question-1">
-                <span>
+                <!-- <span>
                   <img src="/img/icon_qa@2x.png" alt="">
-                </span>
+                </span> -->
                 <div class="d-flex">
-                  <p class="m-0 pe-2">Q1</p>
-                  <p class="m-0">問題NotoJPMedium14級字置左上限50字元</p>
+                  <p class="pe-2 title">Q1</p>
+                  <p class="m-0 ps-2">問題NotoJPMedium14級字置左上限50字元</p>
                 </div>
               </button>
             </h2>
@@ -75,12 +77,12 @@
             <h2 class="accordion-header" id="panelsStayOpen-2">
               <button class="accordion-button collapsed botder-item" type="button" data-bs-toggle="collapse"
                 data-bs-target="#question-2" aria-expanded="false" aria-controls="question-2">
-                <span>
+                <!-- <span>
                   <img src="/img/icon_qa@2x.png" alt="">
-                </span>
+                </span> -->
                 <div class="d-flex">
-                  <p class="m-0 pe-2">Q2</p>
-                  <p class="m-0">問題NotoJPMedium14級字置左上限20字元跨行</p>
+                  <p class="pe-2 title">Q2</p>
+                  <p class="m-0 ps-2">問題NotoJPMedium14級字置左上限20字元跨行</p>
                 </div>
               </button>
             </h2>
@@ -100,12 +102,12 @@
             <h2 class="accordion-header" id="panelsStayOpen-3">
               <button class="accordion-button collapsed botder-item" type="button" data-bs-toggle="collapse"
                 data-bs-target="#question-3" aria-expanded="false" aria-controls="question-3">
-                <span>
+                <!-- <span>
                   <img src="/img/icon_qa@2x.png" alt="">
-                </span>
+                </span> -->
                 <div class="d-flex">
-                  <p class="m-0 pe-2">Q3</p>
-                  <p class="m-0">問題NotoJPMedium14級字置左上限20字元跨行</p>
+                  <p class="pe-2 title">Q3</p>
+                  <p class="m-0 ps-2">問題NotoJPMedium14級字置左上限20字元跨行</p>
                 </div>
               </button>
             </h2>
@@ -126,8 +128,8 @@
               <button class="accordion-button collapsed botder-item" type="button" data-bs-toggle="collapse"
                 data-bs-target="#question-4" aria-expanded="false" aria-controls="question-4">
                 <div class="d-flex">
-                  <p class="m-0 pe-2">Q4</p>
-                  <p class="m-0">問題NotoJPMedium14級字置左上限20字元跨行</p>
+                  <p class="pe-2 title">Q4</p>
+                  <p class="m-0 ps-2">問題NotoJPMedium14級字置左上限20字元跨行</p>
                 </div>
               </button>
             </h2>
@@ -148,8 +150,8 @@
               <button class="accordion-button collapsed botder-item" type="button" data-bs-toggle="collapse"
                 data-bs-target="#question-5" aria-expanded="false" aria-controls="question-5">
                 <div class="d-flex">
-                  <p class="m-0 pe-2">Q5</p>
-                  <p class="m-0">問題NotoJPMedium14級字置左上限20字元跨行</p>
+                  <p class="pe-2 my-auto title">Q5</p>
+                  <p class="m-0 ps-2">問題NotoJPMedium14級字置左上限20字元跨行</p>
                 </div>
               </button>
             </h2>
@@ -169,7 +171,7 @@
         <h2 class="accordion-header" id="panelsStayOpen-6">
           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
             data-bs-target="#question-6" aria-expanded="false" aria-controls="question-6">
-            Q6 問題NotoJPMedium14級字置左上限50字元
+            <p class="pe-2 title m-0">Q6</p> 問題NotoJPMedium14級字置左上限50字元
           </button>
         </h2>
         <div id="question-6" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-6">
@@ -186,7 +188,7 @@
         <h2 class="accordion-header" id="panelsStayOpen-7">
           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
             data-bs-target="#question-7" aria-expanded="false" aria-controls="question-7">
-            Q7 問題NotoJPMedium14級字置左上限50字元
+            <p class="pe-2 title m-0">Q7</p> 問題NotoJPMedium14級字置左上限50字元
           </button>
         </h2>
         <div id="question-7" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-7">
@@ -203,7 +205,7 @@
         <h2 class="accordion-header" id="panelsStayOpen-8">
           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
             data-bs-target="#question-8" aria-expanded="false" aria-controls="question-8">
-            Q8 問題NotoJPMedium14級字置左上限50字元
+            <p class="pe-2 title m-0">Q8</p> 問題NotoJPMedium14級字置左上限50字元
           </button>
         </h2>
         <div id="question-8" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-8">
@@ -220,7 +222,7 @@
         <h2 class="accordion-header" id="panelsStayOpen-9">
           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
             data-bs-target="#question-9" aria-expanded="false" aria-controls="question-9">
-            Q9 問題NotoJPMedium14級字置左上限50字元
+            <p class="pe-2 title m-0">Q9</p> 問題NotoJPMedium14級字置左上限50字元
           </button>
         </h2>
         <div id="question-9" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-9">
@@ -237,7 +239,7 @@
         <h2 class="accordion-header" id="panelsStayOpen-10">
           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
             data-bs-target="#question-10" aria-expanded="false" aria-controls="question-10">
-            Q10 問題NotoJPMedium14級字置左上限50字元
+            <p class="pe-2 title m-0">Q10</p> 問題NotoJPMedium14級字置左上限50字元
           </button>
         </h2>
         <div id="question-10" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-10">
@@ -254,7 +256,7 @@
         <h2 class="accordion-header" id="panelsStayOpen-11">
           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
             data-bs-target="#question-11" aria-expanded="false" aria-controls="question-11">
-            Q11 問題NotoJPMedium14級字置左上限50字元
+            <p class="pe-2 title m-0">Q11</p> 問題NotoJPMedium14級字置左上限50字元
           </button>
         </h2>
         <div id="question-11" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-11">
@@ -271,7 +273,7 @@
         <h2 class="accordion-header" id="panelsStayOpen-12">
           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
             data-bs-target="#question-12" aria-expanded="false" aria-controls="question-12">
-            Q12 問題NotoJPMedium14級字置左上限50字元
+            <p class="pe-2 title m-0">Q12</p> 問題NotoJPMedium14級字置左上限50字元
           </button>
         </h2>
         <div id="question-12" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-12">
@@ -288,7 +290,7 @@
         <h2 class="accordion-header" id="panelsStayOpen-13">
           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
             data-bs-target="#question-13" aria-expanded="false" aria-controls="question-13">
-            Q13 問題NotoJPMedium14級字置左上限50字元
+            <p class="pe-2 title m-0">Q13</p> 問題NotoJPMedium14級字置左上限50字元
           </button>
         </h2>
         <div id="question-13" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-13">
@@ -305,7 +307,7 @@
         <h2 class="accordion-header" id="panelsStayOpen-14">
           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
             data-bs-target="#question-14" aria-expanded="false" aria-controls="question-14">
-            Q14 問題NotoJPMedium14級字置左上限50字元
+            <p class="pe-2 title m-0">Q14</p> 問題NotoJPMedium14級字置左上限50字元
           </button>
         </h2>
         <div id="question-14" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-14">
@@ -322,7 +324,7 @@
         <h2 class="accordion-header" id="panelsStayOpen-15">
           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
             data-bs-target="#question-15" aria-expanded="false" aria-controls="question-15">
-            Q15 問題NotoJPMedium14級字置左上限50字元
+            <p class="pe-2 title m-0">Q15</p> 問題NotoJPMedium14級字置左上限50字元
           </button>
         </h2>
         <div id="question-15" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-15">
@@ -339,7 +341,7 @@
         <h2 class="accordion-header" id="panelsStayOpen-16">
           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
             data-bs-target="#question-16" aria-expanded="false" aria-controls="question-16">
-            Q16 問題NotoJPMedium14級字置左上限50字元
+            <p class="pe-2 title m-0">Q16</p> 問題NotoJPMedium14級字置左上限50字元
           </button>
         </h2>
         <div id="question-16" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-16">
@@ -361,12 +363,12 @@
 
   <div class="container-fluid qa-navs">
     <div class="row g-3 home-content">
-      <div class="col-sm-6 m-0 bg-portfolio">
+      <div class="col-6 m-0 bg-portfolio">
         <a href="/collection/">
           <div class="bg-img"></div>
         </a>
       </div>
-      <div class="col-sm-6 m-0 mt-3 mt-sm-0 bg-serve">
+      <div class="col-6 m-0 bg-serve">
         <a href="/room_planner/">
           <div class="bg-img"></div>
         </a>

layouts/maincategories/list.html

@@ -2,28 +2,16 @@
 <html lang="en">
 
 <head>
-  <!-- <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
-
-  <!-- bootstrap -->
-  <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
-    integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> -->
-  <!-- fontawesome -->
-  <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
-    integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> -->
-
-  <!-- <link rel="stylesheet" href="/css/style.css">
-  <title>小寶優居-首購族首選 安心成家 室內設計品牌</title> -->
   {{ partial "headers.html" . }}
 </head>
 
 <body style="overflow-x: hidden;">
-  <!-- <div class="header-template"></div> -->
   {{ partial "nav.html" . }}
   <div class="container-fluid blog-categories p-0">
-    <div class="blog-banner"></div>
-    <!-- <img class="blog-banner" src="./img/bn_blog@2x.png" alt=""> -->
+    <section class="bhouseweb_loc_banner">
+      <img src="/img/banner/bn_blog@2x.png" class="banner-img card-img" alt="...">
+    </section>
+
     <div class="container">
       <nav
         style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);"
@@ -34,11 +22,24 @@
           <li class="breadcrumb-item active" aria-current="page">預售屋客變</li>
         </ol>
       </nav>
-      <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center">
-        <div class="d-flex mb-sm-0 mb-2 link-list">
-          <a href="">客廳</a>
+      <div class="d-flex flex-column align-items-start">
+        <div class="d-flex flex-column flex-sm-row mb-3 link-list">
+          <div>
+            <a href="">客廳</a>
+            <a href="">主臥</a>
+            <a href="">客房</a>
+          </div>
+          <div class="ms-0 ms-sm-1 mt-sm-0 mt-3">
+            <a href="">客廳</a>
+            <a href="">主臥</a>
+            <a href="">客房</a>
+          </div>
+          <!-- <a href="">客廳</a>
           <a href="">主臥</a>
           <a href="">客房</a>
+          <a href="">客廳</a>
+          <a href="">主臥</a>
+          <a href="">客房</a> -->
         </div>
 
         <div class="bhouseweb_loc_search_box">
@@ -53,10 +54,10 @@
       </div>
     </div>
 
-    <div style="border-top: 2px solid;"></div>
+    <div style="border-top: 1px solid #969696;"></div>
 
     <div class="article">
-    
+
       {{ $paginator := .Paginate .Data.Pages }}
       {{ range $paginator.Pages }}
       <div class="article-item">
@@ -74,7 +75,7 @@
           <!-- <p style="color:#4D4D4D;">{{ .Summary }}</p> -->
         </div>
       </div>
-      
+
       {{ end }}
       <!-- <div class="article-item">
         <a href="">

layouts/maincategories/single.html

@@ -1,8 +1,10 @@
+{{ define "main" }}
 <div class="container-fluid blog_article p-0">
-    <div class="blog-banner"></div>
-    {{ range .Pages }}
+    <section class="bhouseweb_loc_banner">
+      <img src="/img/banner/bn_blog@2x.png" class="banner-img card-img" alt="...">
+    </section>
     <div class="content">
-      <section>
+      
         <h3>{{ .Title }}</h3>
         <div class="d-flex justify-content-between align-items-center">
           <span>{{ .PublishDate.Format "2006-01-02" }}</span>
@@ -11,167 +13,33 @@
             <a href=""><img src="/img/icon_line@2x.png" alt=""></a>
           </div>
         </div>
-      </section>
-      <div class="content">
-        {{ .Content }}
-      </div>
-      {{ end }}
-      <!-- <section>
+        <span class="line"></span>
         <p>「我買了預售屋，有很多客變的想法！建設公司通知我要客變了，但我不知道這樣做好不好？」</p>
-        <br>
-        <p>「客變」是許多人在成家過程中遇到的第一個考題，對新手買房的屋主來說，要在短時間決定影響未來生活機
-          能的客變項目，甚至在對格局、生活需求沒有想像時，決定要做哪些更動，是有難度的。</p>
-        <br>
-        <div class="question-box">
-          <ul>
-            <li>小寶優居的客變懶人包將幫你解決以下客變問題：</li>
-            <li>1. <a href="">客變是什麼？為什麼要客變？</a></li>
-            <li>2. <a href="">客變可更變的內容有哪些？</a></li>
-            <li>3. <a href="">客變到底是省錢還是花錢？客變怎麼省錢？會產生哪些費用？</a></li>
-            <li>4. <a href="">常見的客變需求與建議？我想這樣客變好不好？</a></li>
-            <li>5. <a href="">設計師協助客變的流程？</a></li>
-          </ul>
-        </div>
-      </section>
-      <section class="img-box">
-        <img class="w-100" src="/img/collection/boutique_hotel_slightly_drunk_chill_house_2.webp" alt="">
-        <p>圖說NotoJPMedium14級字行距28pt <br> 圖說NotoJPMedium14級字行距28pt</p>
-      </section>
-      <section class="section-01">
-        <h4>客變是什麼？為什麼要客變？</h4>
-        <p>「客變」是許多買預售屋的屋主期待的成家環節，在建設公司公告的客變期限內，屋主可以依照需求變更房屋
-          設計，就是所謂的「客戶變更設計」簡稱客變。
-          預售屋客變的最大優點就是可以讓房屋的格局與規劃更符合購屋者的需求，像是如果不想用建設公司提供的
-          廚具、不喜歡地板的款式，甚至有一道隔間牆不想施作或者移位，可以在客變階段提出變更，讓建設公司在施
-          作時依照你的規劃調整，降低之後拆掉重做的成本。
-          一般來說建設公司會有「客變規範資料」，讓客戶可以在客變期限前，在不影響建築結構安全，及管線通暢的情
-          況下，可以進行格局、建材上「有限度的變更」，針對可更動項目，建設公司會提出相對的施作報價，也可能因為
-          部分品項取消，可以退回設備與建材的項目金額。
-          客變是建設公司提供給客戶的服務之一，每個建案、建設公司可接受的客變都程度不同，並沒有規定建設公司
-          一定要讓客戶客變，所以小寶優居都會先建議想要客變的屋主「向建設公司先行詢問可客變範圍」。</p>
-      </section>
-      <section class="section-02">
-        <h4>客變可變更的內容有哪些？</h4>
-        <p>許多成家新手誤會客變可以隨心所欲地調整內容，但事實上房屋的共同外觀以及每一戶共用的管路位置是無
-          法變更的，也就是窗戶、大門、陽台、樑柱、承重牆、廚房跟廁所位置、管道間都是無法變更的項目。</p>
+      <br>
+      <p>「客變」是許多人在成家過程中遇到的第一個考題，對新手買房的屋主來說，要在短時間決定影響未來生活機
+        能的客變項目，甚至在對格局、生活需求沒有想像時，決定要做哪些更動，是有難度的。</p>
+      <br>
+      <div class="question-box">
         <ul>
-          <li>常見可以進行客變的地方有以下：</li>
-          <li>1. 隔間：屋內的格局，像是不做隔間牆、改門的位置、增加隔間…。</li>
-          <li>2. 建材：地板（石英磚、木地板）、廚房衛浴磁磚、油漆…，通常是退料不退工。</li>
-          <li>3. 設備：建設公司提供的廚具與衛浴設備，如果不喜歡可以退訂。</li>
-          <li>4. 水電：插座、網路線、電話線、水龍頭與排水孔的位置…。</li>
+          <li>小寶優居的客變懶人包將幫你解決以下客變問題：</li>
+          <li>1. <a href="">客變是什麼？為什麼要客變？</a></li>
+          <li>2. <a href="">客變可更變的內容有哪些？</a></li>
+          <li>3. <a href="">客變到底是省錢還是花錢？客變怎麼省錢？會產生哪些費用？</a></li>
+          <li>4. <a href="">常見的客變需求與建議？我想這樣客變好不好？</a></li>
+          <li>5. <a href="">設計師協助客變的流程？</a></li>
         </ul>
-      </section>
-      <section class="img-box">
-        <img class="w-100" src="/img/collection/boutique_hotel_slightly_drunk_chill_house_2.webp" alt="">
-        <p>圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說 <br> 圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說圖說</p>
-      </section>
-      <section class="section-03">
-        <h4>客變到底是省錢還是花錢？會產生費用？</h4>
-        <p>常常可以聽見別人說客變可以節省裝修費用，事實上，客變可以幫你省下的是更動項目的拆除費用以及重複
-          支付的建材、設備費用，舉例來說，你想要把三房改成兩房，就可以在客變階段請建設公司少做一道牆，不僅省
-          下原先改兩房的拆除、清運費用，裝修時也可以更省時省力；但在客變階段，建設公司協助你修改與新增的項
-          目還是會有相應的費用產生，建設公司會就客變項目逐條列出費用與明細給屋主確認。</p>
-        <ul>
-          <li>一般來說，客變分成「退訂」、「修改新增」兩個方向：</li>
-          <li>
-            <span>• 退訂</span>
-            <p>
-              是針對原先施作的項目與設備做取消，像是不要鋪石英磚、不要門片、不要瓦斯爐、不要浴缸…。
-              這類的退訂，通常可以退回該項目建材與設備費用（退料不退工），但因為建設公司所附的建材與設備大多是
-              大量採購，往往價格是低於市價，退回的費用並不是依照市價計算之外，重新施作對屋主也會是一筆額外的支
-              出，往往會有「能退回的少，重做花更多」的現象，因此如果沒有特別的堅持，小寶優居一般會建議屋主保留建
-              設公司提供的項目。
-            </p>
-          </li>
-          <li>
-            <span>• 修改新增</span>
-            <p>指的是針對建設公司原先的規劃進行修改，像是增加或修改插座位置、調整隔間位置…這類的
-              修改可能伴隨的是費用的增加，決定客變時也需要透過圖面與建設公司溝通，避免客變成果與期待有落差。</p>
-          </li>
-        </ul>
-      </section>
-      <section class="section-04">
-        <h4>裝修項目清單</h4>
-        <table>
-          <thead>
-            <tr>
-              <th>類別</th>
-              <th>裝修項目</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>木工</td>
-              <td>窗簾盒、冷氣包管</td>
-            </tr>
-            <tr>
-              <td>水電</td>
-              <td>電器專用插座與迴路設計</td>
-            </tr>
-            <tr>
-              <td>油漆</td>
-              <td>油漆跳色、特殊漆跳色</td>
-            </tr>
-            <tr>
-              <td>地板</td>
-              <td>全室地板、門片高度修改</td>
-            </tr>
-            <tr>
-              <td>泥作</td>
-              <td>玄關落塵區六角磚（使用台灣磚）</td>
-            </tr>
-            <tr>
-              <td>保護清潔</td>
-              <td>保護工程、細部清潔</td>
-            </tr>
-          </tbody>
-        </table>
-        <h4>常見的客變需求與建議</h4>
-        <ul>
-          <li>
-            <span>• 改格局、調整隔間</span>
-            <p>
-              拆除次臥房的隔間、移動隔間牆的位置改變房間大小…這類的更動就屬於更改格局，格局的更變建議以減法
-              為主，如果是增加隔間，小寶優居會協助屋主評估常見的家具尺寸後再進行格局更變，避免未來格局不合用、
-              甚至後悔的狀況。
-            </p>
-          </li>
-          <li>
-            <span>• 改格局、調整隔間</span>
-            <p>
-              插座的位移、新增其實不一定要在客變時進行，根據小寶優居過往的實際經驗，完工後再調整插座位置，在費
-              用上並沒有太大差距，而且完工後依照櫃體、家具的尺寸進行規劃，也會比較精準、實用，所以插座的規劃不用
-              急於在客變階段完成。<br>
-              但若是有特殊的用電需求，像是用電量超出一般家庭，或者使用專業音響、安裝全熱交換器…需要獨立的迴路
-              就需要在客變階段提出討論。
-            </p>
-          </li>
-        </ul>
-      </section>
-      <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center link-box">
-        <div class="d-flex flex-column flex-sm-row link-list">
-          <span>
-            <a href="">客變</a>
-            <a href="">預售屋</a>
-            <a href="">格局</a>
-          </span>
-          <span class="ms-0 ms-sm-1 mt-3 mt-sm-0">
-            <a href="">裝修</a>
-            <a href="">中島式廚房</a>
-            <a href="">乾濕分離</a>
-          </span>
-        </div>
-        <div class="d-flex icon-box mt-2 mt-md-0">
-          <a href=""><img src="/img/icon_fb@2x.png" alt=""></a>
-          <a href=""><img src="/img/icon_line@2x.png" alt=""></a>
-        </div>
       </div>
+     
+      <div class="blog-content">
+        {{ .Content }}
+      </div>
+      
       <a class="nav-link" href="/maincategories">
         <p class="readMore text-center">
           <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到成家知識庫
         </p>
-      </a> -->
+      </a>
+
       <ul class="read-more-list">
         <li>你可能會喜歡的，延伸閱讀點擊標題，看更多設計專欄！</li>
         <li><a href="">【居家風格】 60萬以下 ↓ 超有氛圍的成家夢想</a></li>
@@ -181,4 +49,5 @@
         <li><a href="">【規劃師服務】 什麼是規劃師？連室內設計師都推薦的「規劃師服務」</a></li>
       </ul>
     </div>
-  </div>
+  </div>
+  {{ end }}

layouts/news/list.html

@@ -8,10 +8,7 @@
 <body>
   {{ partial "nav.html" . }}
   <section class="bhouseweb_loc_banner">
-    <div class="card bg-transparent text-white border-0 rounded-0">
-      <div class="news-page-banner"></div>
-      <!-- <img src="/img/banner/bn_news@2x.png" class="banner-img card-img rounded-0" alt="..."> -->
-    </div>
+    <img src="/img/banner/bn_news@2x.png" class="banner-img card-img" alt="...">
   </section>
 
   <div class="bhouseweb_loc_content mb-80">

layouts/room_planner/room_planner.html

@@ -18,16 +18,20 @@
 
 <body style="overflow-x: hidden;">
   {{ partial "nav.html" . }}
+  
   <div class="room-planner">
-    <div class="card bg-transparent text-white border-0 rounded-0">
-      <div class="room-planner-banner"></div>
-      <div class="d-flex justify-content-end bt_container">
-        <div class="bt_slogan text-center">
-          <img src="/img/chevron-double-down.svg" alt="">
+    <section class="bhouseweb_loc_banner">
+      <div class="card bg-transparent text-white border-0 rounded-0">
+        <img src="/img/banner/bn_serve@2x.png" class="banner-img card-img" alt="...">
+      <!-- <div class="room-planner-banner"></div> -->
+        <div class="d-flex justify-content-end bt_container">
+          <div class="bt_slogan text-center">
+            <img src="/img/chevron-double-down.svg" alt="">
+          </div>
         </div>
+        <img class="bt_slogan_portfolio" src="/img/banner/bt_slogan_serve_h@2x.png" alt="">
       </div>
-      <img class="bt_slogan_portfolio" src="/img/banner/bt_slogan_serve_h@2x.png" alt="">
-    </div>
+    </section>
 
     <div class="sub-banner">
       <img src="/img/icon_serve@2x.png" alt="">

layouts/solid_wood_furniture/solid_wood_furniture.html

@@ -10,7 +10,9 @@
   {{ partial "nav.html" . }}
 
   <div class="furniture-design">
-    <div class="design-banner"></div>
+    <section class="bhouseweb_loc_banner">
+      <img src="/img/banner/bn_product@2x.png" class="banner-img card-img" alt="...">
+    </section>
     <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
       <li class="nav-item" role="presentation">
         <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
@@ -34,8 +36,9 @@
           </div>
           <div class="col-12 col-lg-6">
             <h5 class="text-center text-lg-start">因你而設計</h5>
-            <p class="m-0 text-center text-lg-start">我們以「人」為中心，用人因工程的設計概念，<br>
-              設計讓你最順手、最符合需求的系統櫃。</p>
+            <p class="text-center text-lg-start text-box">
+              我們以「人」為中心，用人因工程的設計概念，設計讓你最順手、最符合需求的系統櫃。
+            </p>
           </div>
         </div>
         <div class="row g-2 mb-5 pb-5 b-bottom">
@@ -85,17 +88,17 @@
           <div class="col-12 col-md-4">
             <img src="/img/bn_product_furniture_04_2@2x.png" alt="">
             <h5 class="mt-4 mb-3 text-center text-md-start">梣木</h5>
-            <p class="text-center text-md-start">硬度密度高，穩定、堅固、耐衝擊<br>適合製作大型家具</p>
+            <p class="text-center text-md-start">硬度密度高，穩定、堅固、耐衝擊，適合製作大型家具</p>
           </div>
           <div class="col-12 col-md-4 text-center text-md-start">
             <img src="/img/bn_product_furniture_04_3@2x.png" alt="">
             <h5 class="mt-4 mb-3 text-center text-md-start">山毛櫸</h5>
-            <p class="text-center text-md-start">材質重、抗壓能力強，不易分裂<br>細密紋理易於加工染色</p>
+            <p class="text-center text-md-start">材質重、抗壓能力強，不易分裂，細密紋理易於加工染色</p>
           </div>
           <div class="col-12 col-md-4">
             <img src="/img/bn_product_furniture_04_4@2x.png" alt="">
             <h5 class="mt-4 mb-3 text-center text-md-start">雲杉實木</h5>
-            <p class="text-center text-md-start">紋理通直，富有彈性容易乾燥<br>而且具有耐磨性</p>
+            <p class="text-center text-md-start">紋理通直，富有彈性容易乾燥，而且具有耐磨性</p>
           </div>
         </div>
         <div class="row mb-5 pb-5 b-bottom">

layouts/store/store.html

@@ -2,41 +2,16 @@
 <html lang="en">
 
 <head>
-  <!-- <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
-
-  <!-- bootstrap -->
-  <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
-    integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> -->
-  <!-- fontawesome -->
-  <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
-    integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
-
-  <link rel="stylesheet" href="/css/style.css">
-  <title>小寶優居-首購族首選 安心成家 室內設計品牌</title> -->
   {{ partial "headers.html" . }}
 </head>
 
 <body style="overflow-x: hidden;">
-  <!-- <div class="header-template"></div> -->
   {{ partial "nav.html" . }}
 
-  <!-- <section class="bhouseweb_loc_banner">
-    <div class="card bg-transparent text-white border-0 rounded-0">
-      <img src="/img/bn_store2x.png" class="banner-img card-img rounded-0" alt="...">
-
-      <div class="d-flex justify-content-end">
-        <div class="bt_slogan text-center">
-          <img src="./img/chevron-double-down (1).svg" alt="">
-          <i class="far fa-chevron-double-down"></i>
-        </div>
-      </div>
-      <img class="bt_slogan_portfolio" src="./img/bt_slogan_portfolio_h@2x.png" alt="">
-
-    </div>
-  </section> -->
-  <div class="store-banner"></div>
+  <section class="bhouseweb_loc_banner">
+    <img src="/img/banner/bn_store@2x.png" class="banner-img card-img" alt="...">
+  </section>
+  <!-- <div class="store-banner"></div> -->
   <div class="brand_content">
     <div class="card bg-transparent border-0 rounded-0 my-80">
       <img src="/img/store/icon_store@2x.png" class="sec01_store_map_img card-img rounded-0" alt="...">
@@ -103,23 +78,23 @@
           <div class="col-md-12">
             <div class="store_content block ms-md-3 mt-30">
               <div class="store_content_item">
-                營業時間 &emsp;&emsp; 中午12:00 ~ 晚上9:00
+               <span>營業時間</span> &emsp;&emsp; 中午12:00 ~ 晚上9:00
               </div>
               <div class="store_content_item">
-                門市電話 &emsp;&emsp; <a href="tel:0229010567" class="store-link" data-vars-event="accuhit" data-vars-event-type="9"
+                <span>門市電話</span> &emsp;&emsp; <a href="tel:0229010567" class="store-link" data-vars-event="accuhit" data-vars-event-type="9"
                   data-vars-event-col1="新北門市門市電話" data-vars-event-col2="官網點擊新北門市電話">02-29010567</a>
               </div>
               <div class="store_content_item">
-                門市地點 &emsp;&emsp; <a
+                <span>門市地點</span> &emsp;&emsp; <a
                   href="https://www.google.com.tw/maps/place/%E5%B0%8F%E5%AF%B6%E5%84%AA%E5%B1%85+%E6%96%B0%E5%8C%97%E9%96%80%E5%B8%82/@24.0096167,119.6916144,8z/data=!4m13!1m6!3m5!1s0x346917ac589833f1:0x73de12c2ee3f186f!2z5bCP5a-25YSq5bGFIOWPsOS4remWgOW4gg!8m2!3d24.2020203!4d120.6688625!3m5!1s0x3442a7c9695b1f27:0x9e882e55e4a4f646!8m2!3d24.9738711!4d121.4381407!15sCgzlsI_lr7blhKrlsYVaESIP5bCPIOWvtiDlhKog5bGFkgENZGVzaWduX2FnZW5jeQ?hl=zh-TW"
                   class="store-link" data-vars-event="accuhit" data-vars-event-type="9" data-vars-event-col1="新北門市"
                   data-vars-event-col2="官網點擊新北門市地點" target="_blank">新北市土城區中華路二段201號</a>
               </div>
               <div class="store_content_item">
-                停車資訊 &emsp;&emsp; <a href="https://www.google.com/maps/place/236%E5%8F%B0%E7%81%A3%E6%96%B0%E5%8C%97%E5%B8%82%E5%9C%9F%E5%9F%8E%E5%8D%80%E8%88%88%E5%9F%8E%E8%B7%AF112%E8%99%9F/@24.9709399,121.4380391,17z/data=!3m1!4b1!4m5!3m4!1s0x34681d2a014908f7:0x529e8c700e62a0d3!8m2!3d24.9709399!4d121.4402278" class="store-link" target="_blank">Times 24h</a> (土城區興城路112號，到門市步行約7分鐘)
+                <span>停車資訊</span> &emsp;&emsp; <a href="https://www.google.com/maps/place/236%E5%8F%B0%E7%81%A3%E6%96%B0%E5%8C%97%E5%B8%82%E5%9C%9F%E5%9F%8E%E5%8D%80%E8%88%88%E5%9F%8E%E8%B7%AF112%E8%99%9F/@24.9709399,121.4380391,17z/data=!3m1!4b1!4m5!3m4!1s0x34681d2a014908f7:0x529e8c700e62a0d3!8m2!3d24.9709399!4d121.4402278" class="store-link" target="_blank">Times 24h</a> (土城區興城路112號，到門市步行約7分鐘)
               </div>
               <div class="store_content_item">
-                停車資訊 &emsp;&emsp; <a href="https://www.google.com/maps/place/236%E5%8F%B0%E7%81%A3%E6%96%B0%E5%8C%97%E5%B8%82%E5%9C%9F%E5%9F%8E%E5%8D%80%E4%B8%AD%E8%8F%AF%E8%B7%AF%E4%BA%8C%E6%AE%B5271%E8%99%9F/@24.9706428,121.4360605,17z/data=!3m1!4b1!4m5!3m4!1s0x34681cd62fc44991:0x9c556c7d295b384e!8m2!3d24.970638!4d121.4382492" class="store-link" target="_blank">168停車聯盟</a> (土城區中華路二段271號，到門市步行約5分鐘)
+                <span>停車資訊</span> &emsp;&emsp; <a href="https://www.google.com/maps/place/236%E5%8F%B0%E7%81%A3%E6%96%B0%E5%8C%97%E5%B8%82%E5%9C%9F%E5%9F%8E%E5%8D%80%E4%B8%AD%E8%8F%AF%E8%B7%AF%E4%BA%8C%E6%AE%B5271%E8%99%9F/@24.9706428,121.4360605,17z/data=!3m1!4b1!4m5!3m4!1s0x34681cd62fc44991:0x9c556c7d295b384e!8m2!3d24.970638!4d121.4382492" class="store-link" target="_blank">168停車聯盟</a> (土城區中華路二段271號，到門市步行約5分鐘)
               </div>
               <div class="mt-4">
                 <a class="reservation-link" href="https://lihi1.com/uoYTg"
@@ -143,20 +118,20 @@
           <div class="col-md-12">
             <div class="store_content block ms-md-3 mt-30">
               <div class="store_content_item">
-                營業時間 &emsp;&emsp; 中午12:00 ~ 晚上9:00
+                <span>營業時間</span> &emsp;&emsp; 中午12:00 ~ 晚上9:00
               </div>
               <div class="store_content_item">
-                門市電話 &emsp;&emsp; <a href="tel:033017531" class="store-link" data-vars-event="accuhit" data-vars-event-type="9"
+                <span>門市電話</span> &emsp;&emsp; <a href="tel:033017531" class="store-link" data-vars-event="accuhit" data-vars-event-type="9"
                   data-vars-event-col1="桃園門市門市電話" data-vars-event-col2="官網點擊桃園門市電話">03-3017531</a>
               </div>
               <div class="store_content_item">
-                門市地點 &emsp;&emsp; <a
+                <span>門市地點</span> &emsp;&emsp; <a
                   href="https://www.google.com.tw/maps/place/%E5%B0%8F%E5%AF%B6%E5%84%AA%E5%B1%85+%E6%96%B0%E5%8C%97%E9%96%80%E5%B8%82/@24.0096167,119.6916144,8z/data=!4m13!1m6!3m5!1s0x346917ac589833f1:0x73de12c2ee3f186f!2z5bCP5a-25YSq5bGFIOWPsOS4remWgOW4gg!8m2!3d24.2020203!4d120.6688625!3m5!1s0x3442a7c9695b1f27:0x9e882e55e4a4f646!8m2!3d24.9738711!4d121.4381407!15sCgzlsI_lr7blhKrlsYVaESIP5bCPIOWvtiDlhKog5bGFkgENZGVzaWduX2FnZW5jeQ?hl=zh-TW"
                   class="store-link" data-vars-event="accuhit" data-vars-event-type="9" data-vars-event-col1="新北門市"
                   data-vars-event-col2="官網點擊新北門市地點" target="_blank">桃園市桃園區永安路900號</a>
               </div>
               <div class="store_content_item">
-                停車資訊 &emsp;&emsp; <a href="https://www.google.com/maps/place/25%C2%B000%2725.1%22N+121%C2%B017%2724.8%22E/@25.0071649,121.2890104,18.04z/data=!4m5!3m4!1s0x0:0x0!8m2!3d25.0069599!4d121.2902088?hl=zh-TW" class="store-link" target="_blank">力揚停車場</a> (永安路765巷與吉安一街口，步行約2分鐘)
+                <span>停車資訊</span> &emsp;&emsp; <a href="https://www.google.com/maps/place/25%C2%B000%2725.1%22N+121%C2%B017%2724.8%22E/@25.0071649,121.2890104,18.04z/data=!4m5!3m4!1s0x0:0x0!8m2!3d25.0069599!4d121.2902088?hl=zh-TW" class="store-link" target="_blank">力揚停車場</a> (永安路765巷與吉安一街口，步行約2分鐘)
               </div>
               <div class="mt-4">
                 <a class="reservation-link" href="https://lihi1.com/uoYTg"
@@ -182,20 +157,20 @@
           <div class="col-md-12">
             <div class="store_content block ms-md-3 mt-30">
               <div class="store_content_item">
-                營業時間 &emsp;&emsp; 中午12:00 ~ 晚上9:00
+                <span>營業時間</span> &emsp;&emsp; 中午12:00 ~ 晚上9:00
               </div>
               <div class="store_content_item">
-                門市電話 &emsp;&emsp; <a href="tel:0424261732" class="store-link" data-vars-event="accuhit" data-vars-event-type="9"
+                <span>門市電話</span> &emsp;&emsp; <a href="tel:0424261732" class="store-link" data-vars-event="accuhit" data-vars-event-type="9"
                   data-vars-event-col1="台中門市電話" data-vars-event-col2="官網點擊台中門市電話">04-24261732</a>
               </div>
               <div class="store_content_item">
-                門市地點 &emsp;&emsp; <a
+                <span>門市地點</span> &emsp;&emsp; <a
                   href="https://www.google.com.tw/maps/place/%E5%B0%8F%E5%AF%B6%E5%84%AA%E5%B1%85+%E6%96%B0%E5%8C%97%E9%96%80%E5%B8%82/@24.0096167,119.6916144,8z/data=!4m13!1m6!3m5!1s0x346917ac589833f1:0x73de12c2ee3f186f!2z5bCP5a-25YSq5bGFIOWPsOS4remWgOW4gg!8m2!3d24.2020203!4d120.6688625!3m5!1s0x3442a7c9695b1f27:0x9e882e55e4a4f646!8m2!3d24.9738711!4d121.4381407!15sCgzlsI_lr7blhKrlsYVaESIP5bCPIOWvtiDlhKog5bGFkgENZGVzaWduX2FnZW5jeQ?hl=zh-TW"
                   class="store-link" data-vars-event="accuhit" data-vars-event-type="9" data-vars-event-col1="台中門市"
                   data-vars-event-col2="官網點擊台中門市地點" target="_blank"> 台中市北屯區環中路一段1700號之小寶優居</a>
               </div>
               <div class="store_content_item">
-                停車資訊 &emsp;&emsp; 門口停車場
+                <span>停車資訊</span> &emsp;&emsp; 門口停車場
               </div>
               <div class="mt-4">
                 <a class="reservation-link" href="https://lihi1.com/uoYTg"
@@ -221,19 +196,19 @@
           <div class="col-md-12">
             <div class="store_content block ms-md-3 mt-30">
               <div class="store_content_item">
-                營業時間 &emsp;&emsp; 中午12:00 ~ 晚上9:00
+                <span>營業時間</span> &emsp;&emsp; 中午12:00 ~ 晚上9:00
               </div>
               <div class="store_content_item">
-                門市電話 &emsp;&emsp; <a href="tel:062435805" class="store-link" data-vars-event="accuhit" data-vars-event-type="9"
+                <span>門市電話</span> &emsp;&emsp; <a href="tel:062435805" class="store-link" data-vars-event="accuhit" data-vars-event-type="9"
                   data-vars-event-col1="台南門市電話" data-vars-event-col2="官網點擊台南門市電話">06-2435805</a>
               </div>
               <div class="store_content_item">
-                門市地點 &emsp;&emsp; <a
+                <span>門市地點</span> &emsp;&emsp; <a
                   href="https://www.google.com.tw/maps/place/%E5%B0%8F%E5%AF%B6%E5%84%AA%E5%B1%85+%E6%96%B0%E5%8C%97%E9%96%80%E5%B8%82/@24.0096167,119.6916144,8z/data=!4m13!1m6!3m5!1s0x346917ac589833f1:0x73de12c2ee3f186f!2z5bCP5a-25YSq5bGFIOWPsOS4remWgOW4gg!8m2!3d24.2020203!4d120.6688625!3m5!1s0x3442a7c9695b1f27:0x9e882e55e4a4f646!8m2!3d24.9738711!4d121.4381407!15sCgzlsI_lr7blhKrlsYVaESIP5bCPIOWvtiDlhKog5bGFkgENZGVzaWduX2FnZW5jeQ?hl=zh-TW" class="store-link" data-vars-event="accuhit" data-vars-event-type="9" data-vars-event-col1="台南門市"
                   data-vars-event-col2="官網點擊台南門市地點" target="_blank"> 台南市北區中華北路一段420號</a>
               </div>
               <div class="store_content_item">
-                停車資訊 &emsp;&emsp; 門口停車場
+                <span>停車資訊</span> &emsp;&emsp; 門口停車場
               </div>
               <div class="mt-4">
                 <a class="reservation-link" href="https://lihi1.com/uoYTg"
@@ -267,19 +242,7 @@
     </div>
   </div>
 
-
-
-  <!-- <div class="footer-template"></div> -->
   {{ partial "footer.html" . }}
-  <!-- jquery -->
-  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script> -->
-
-  <!-- bootstrap -->
-  <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
-    integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
-    crossorigin="anonymous"></script>
-
-  <script src="./js/index.js"></script> -->
   {{ partial "scripts.html" . }}
 </body>
 

layouts/system_furniture/system_furniture.html

@@ -10,7 +10,9 @@
   {{ partial "nav.html" . }}
 
   <div class="furniture-design">
-    <div class="design-banner"></div>
+    <section class="bhouseweb_loc_banner">
+      <img src="/img/banner/bn_product@2x.png" class="banner-img card-img" alt="...">
+    </section>
     <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
       <li class="nav-item" role="presentation">
         <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
@@ -34,8 +36,9 @@
           </div>
           <div class="col-12 col-lg-6">
             <h5 class="text-center text-lg-start">因你而設計</h5>
-            <p class="m-0 text-center text-lg-start">我們以「人」為中心，用人因工程的設計概念，<br>
-              設計讓你最順手、最符合需求的系統櫃。</p>
+            <p class="text-center text-lg-start text-box">
+              我們以「人」為中心，用人因工程的設計概念，設計讓你最順手、最符合需求的系統櫃。
+            </p>
           </div>
           <div class="col-12 col-lg-6">
             <img src="/img/system_furniture/bn_product_cabinet_02@2x.webp" alt="">
@@ -54,7 +57,8 @@
           <div class="col-12 col-lg-6 cabinet-03">
             <img src="/img/system_furniture/bn_product_cabinet_03@2x.png" alt="">
             <h5 class="text-center">最低甲醛 F1/E1 等級</h5>
-            <p class="m-0 text-center text-lg-start">甲醛釋出量經認證檢驗<br>
+            <p class="m-0 text-center text-lg-start">
+              <b style="font-family: NSJP-700;">甲醛釋出量經認證檢驗</b><br>
               符合『國家經濟部標準檢驗局』F1等級<br>
               (最低甲醛釋出量，且無添加甲醛物質)<br><br>
               符合『歐盟 』E1等級<br>
@@ -63,7 +67,7 @@
           <div class="col-12 col-lg-6 cabinet-03">
             <img src="/img/system_furniture/bn_product_cabinet_04@2x.png" alt="">
             <h5 class="text-center">防潮 V313 最高級數抗潮</h5>
-            <p class="m-0 text-center text-lg-start">防潮檢驗<br>
+            <p class="m-0 text-center text-lg-start"><b style="font-family: NSJP-700;">防潮檢驗</b><br>
               經『國家經濟部標準檢驗局 CNS2215』<br>
               吸水膨脹率檢測數值為6%以下，符合V313<br>
               最高防潮等級。<br><br>

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

@@ -40,28 +40,28 @@
   </div>
   <div class="slider responsive">
     <div class="slider-item">
-      <img src="./img/collection/61abd99c7343c58f7a7f0e9a60a4b8ed.webp" alt="">
+      <img src="./img/collection/61abd99c7343c58f7a7f0e9a60a4b8ed.webp" alt="" class="img-fluid">
       <div>
         <p>「這樣的家告訴我，什麼叫做完美生活。」</p>
         <p>新竹陳先生｜三房兩廳｜32.5坪</p>
       </div>
     </div>
     <div class="slider-item">
-      <img src="./img/collection/c3f3d87bfc353327906075aff458f72c.webp" alt="">
+      <img src="./img/collection/c3f3d87bfc353327906075aff458f72c.webp" alt="" class="img-fluid">
       <div>
         <p>「這樣的家告訴我，什麼叫做完美生活。」</p>
         <p>新竹陳先生｜三房兩廳｜32.5坪</p>
       </div>
     </div>
     <div class="slider-item">
-      <img src="./img/collection/aa32f7bcc767333c8f0d587bb0abc372.webp" alt="">
+      <img src="./img/collection/aa32f7bcc767333c8f0d587bb0abc372.webp" alt="" class="img-fluid">
       <div>
         <p>「這樣的家告訴我，什麼叫做完美生活。」</p>
         <p>新竹陳先生｜三房兩廳｜32.5坪</p>
       </div>
     </div>
     <div class="slider-item">
-      <img src="./img/collection/20_taiwanese_ping_vintage_cafe_shop_house_for_hipster_in_taichung.webp" alt="">
+      <img src="./img/collection/20_taiwanese_ping_vintage_cafe_shop_house_for_hipster_in_taichung.webp" alt="" class="img-fluid">
       <div>
         <p>「這樣的家告訴我，什麼叫做完美生活。」</p>
         <p>新竹陳先生｜三房兩廳｜32.5坪</p>

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

@@ -1,50 +1,3 @@
-<!-- {{ if isset .Site.Params "features" }}
-{{ if .Site.Params.features.enable }}
-{{ if gt (len .Site.Data.features) 0 }}
-<section class="bar background-white">
-    <div class="container">
-        {{ $elements := default 3 .Site.Params.features.cols }}
-        {{ $features := sort .Site.Data.features "weight" }}
-
-        {{ $total_rows := div (len $features) $elements }}
-
-        {{ if gt (mod (len $features) $elements) 0 }}
-          {{ $total_rows = add $total_rows 1 }}
-        {{ end }}
-
-        {{ range $i, $sequence := seq $total_rows }}
-          <div class="row row-{{ $i }} row-{{ if eq (mod $i 2) 0 }}odd{{ else }}even{{ end }}">
-            {{ range $j, $sequence2 := (seq $elements) }}
-
-                {{ $feature_index := add (mul $i $elements) $j }}
-                {{ if lt $feature_index (len $features) }}
-                    {{ $element := index $features $feature_index }}
-
-                    <div class="col-md-{{ div 12 $elements }} col-{{ $j }} col-{{ if eq (mod $j 2) 0 }}odd{{ else }}even{{ end }}">
-                        <div class="box-simple">
-                            {{ with $element.url }}
-                            <a href="{{ $element.url }}">
-                            {{ end }}
-                                <div class="icon">
-                                    <i class="{{ $element.icon }}"></i>
-                                </div>
-                            {{ with $element.url }}
-                            </a>
-                            {{ end }}
-                            <h3>{{ $element.name | markdownify }}</h3>
-                            <p>{{ $element.description | markdownify }}</p>
-                        </div>
-                    </div>
-                {{ end }}
-            {{ end }}
-          </div>
-        {{ end }}
-    </div>
-</section>
-{{ end }}
-{{ end }}
-{{ end }} -->
-
 <div class="home-container container-fluid">
     <div class="row g-3 home-content">
       <div class="col-sm-6 bg-portfolio">
@@ -102,6 +55,6 @@
 
   <div class="reserve">
     <a href="">
-      <img src="img/bt_reserve@2x.png" alt="">
+      <img src="img/home/線上預約icon.png" alt="">
     </a>
   </div>

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

@@ -1,5 +1,7 @@
 <div class="furniture-design">
-  <div class="design-banner"></div>
+  <section class="bhouseweb_loc_banner">
+    <img src="/img/banner/bn_product@2x.png" class="banner-img card-img" alt="...">
+  </section>
   <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
     <li class="nav-item" role="presentation">
       <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link design-border">全部設計單品</a>

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

@@ -1,162 +1,3 @@
-<!-- <header class="navbar-affixed-top" data-spy="affix" data-offset-top="62">
-    <div class="navbar navbar-default yamm {{ if .Site.Params.dropdown_mouse_over }}mouseover{{ end }}" role="navigation" id="navbar">
-        <div class="container">
-            <div class="navbar-header">
-                <a class="navbar-brand home" href="{{ "/" | relLangURL }}">
-                    {{ if default false .Site.Params.disabled_logo }}
-                      <h4>{{ .Site.Params.logo_text }}</h4>
-                    {{ else }}
-                      <img src="{{ .Site.Params.logo | relURL }}" alt="{{ .Title }} logo" class="hidden-xs hidden-sm" />
-                      <img src="{{ .Site.Params.logo_small | relURL }}" alt="{{ .Title }} logo" class="visible-xs visible-sm" />
-                    {{ end }}
-                    <span class="sr-only">{{ .Title }} - {{ i18n "navHome" }}</span>
-                </a>
-                <div class="navbar-buttons">
-                    <button type="button" class="navbar-toggle btn-template-main" data-toggle="collapse" data-target="#navigation">
-                      <span class="sr-only">{{ i18n "navToggle" }}</span>
-                        <i class="fas fa-align-justify"></i>
-                    </button>
-                </div>
-            </div>
-     
-
-            <div class="navbar-collapse collapse" id="navigation">
-                <ul class="nav navbar-nav navbar-right">
-                  {{ $current := . }}
-
-                  {{ range .Site.Menus.main.ByWeight }}
-                  {{ $topLevel := replace .URL "/" "" }}
-                  {{ $active := "" }}
-
-                  {{ if eq $current.RelPermalink .URL }}
-                    {{ $active = "active" }}
-                  {{ end }}
-
-                  {{ if eq $current.Type $topLevel }}
-                    {{ $active = "active" }}
-                  {{ end }}
-
-                  {{ if and (or (eq $current.RelPermalink .URL) (eq "term" $current.Kind)) (in (slice "page" "term") $current.Kind) }}
-                    {{ range (split .URL "/") }}
-                      {{ if eq "blog" . }}
-                        {{ $active = "active" }}
-                      {{ end }}
-                    {{ end }}
-                  {{ end }}
-
-                  {{ if .HasChildren }}
-             
-                    {{ $hasSections := (hasPrefix (index .Children 0).Identifier "section.") }}
-                    <li class="dropdown{{ if $hasSections }} use-yamm yamm-fw{{end}} {{ $active }}">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ .Name }} <span class="caret"></span></a>
-                        {{ if $hasSections }}
-                        <ul class="dropdown-menu">
-                            <li>
-                            <div class="yamm-content">
-                            <div class="row">
-                                {{ if ne .URL "" }}
-                                <div class="col-sm-6">
-                                    <img src="{{ .URL }}" class="img-responsive hidden-xs"/>
-                                </div>
-                                {{ end }}
-                                <div class="col-sm-3">
-                                {{ range .Children.ByWeight }}
-                                    {{ $column := printf "%s" .Post }}
-                                    {{ if eq $column "1" }}
-                                    <h5>{{ .Name }}</h5>
-                                    {{ if .HasChildren }}
-                                    <ul>
-                                    {{ range .Children.ByWeight }}
-                                    <li><a href="{{ .URL }}">{{ .Name }}</a></li>
-                                    {{- end }}
-                                    </ul>
-                                    {{ end }}
-                                    {{ end }}
-                                {{ end }}
-                                </div>
-                                <div class="col-sm-3">
-                                {{ range .Children.ByWeight }}
-                                    {{ $column := printf "%s" .Post }}
-                                    {{ if eq $column "2" }}
-                                    <h5>{{ .Name }}</code></h5>
-                                    {{ if .HasChildren }}
-                                    <ul>
-                                    {{ range .Children.ByWeight }}
-                                    <li><a href="{{ .URL }}">{{ .Name }}</a></li>
-                                    {{ end }}
-                                    </ul>
-                                    {{ end }}
-                                    {{ end }}
-                                {{ end }}
-                                </div>
-                                {{ if eq .URL "" }}
-                                <div class="col-sm-3">
-                                {{ range .Children }}
-                                    {{ $column := printf "%s" .Post }}
-                                    {{ if eq $column "3" }}
-                                    <h5>{{ .Name }}</code></h5>
-                                    {{ if .HasChildren }}
-                                    <ul>
-                                    {{ range .Children.ByWeight }}
-                                    <li><a href="{{ .URL }}">{{ .Name }}</a></li>
-                                    {{ end }}
-                                    </ul>
-                                    {{ end }}
-                                    {{ end }}
-                                {{ end }}
-                                </div>
-                                <div class="col-sm-3">
-                                {{ range .Children }}
-                                    {{ $column := printf "%s" .Post }}
-                                    {{ if eq $column "4" }}
-                                    <h5>{{ .Name }}</code></h5>
-                                    {{ if .HasChildren }}
-                                    <ul>
-                                    {{ range .Children.ByWeight }}
-                                    <li><a href="{{ .URL }}">{{ .Name }}</a></li>
-                                    {{ end }}
-                                    </ul>
-                                    {{ end }}
-                                    {{ end }}
-                                {{ end }}
-                                </div>
-                                {{ end }}
-                            </div>
-                            </div>
-                            </li>
-                        </ul>
-                        {{ else }}
-                        <ul class="dropdown-menu">
-                            {{ range .Children.ByWeight }}
-                            <li><a href="{{ .URL }}">{{ .Name }}</a></li>
-                            {{ end }}
-                        </ul>
-                        {{ end }}
-                    </li>
-                  {{ else }}
-                  <li class="dropdown {{ $active }}">
-                    <a href="{{ .URL }}">{{ .Name }}</a>
-                  </li>
-                  {{ end }}
-                  {{ end }}
-                </ul>
-            </div>
-
-
-            <div class="collapse clearfix" id="search">
-                <form class="navbar-form" role="search">
-                    <div class="input-group">
-                        <input type="text" class="form-control" placeholder="Search">
-                        <span class="input-group-btn">
-                    <button type="submit" class="btn btn-template-main"><i class="fas fa-search"></i></button>
-                </span>
-                    </div>
-                </form>
-            </div>
-
-        </div>
-    </div>
-</header> -->
 <header>
   <nav class="navbar navbar-expand-lg navbar-dark p-0">
     <div class="container-fluid p-0">
@@ -165,8 +6,7 @@
           {{ if default false .Site.Params.disabled_logo }}
           <h4>{{ .Site.Params.logo_text }}</h4>
           {{ else }}
-          <img src="{{ .Site.Params.logo | relURL }}" alt="{{ .Title }} logo" height="70px" alt=""
-            style="margin-left: 60px;" />
+          <img src="{{ .Site.Params.logo_mobile | relURL }}" alt="{{ .Title }} logo" height="70px" alt="" />
           {{ end }}
           <span class="sr-only">{{ .Title }} - {{ i18n "navHome" }}</span>
         </a>
@@ -186,8 +26,7 @@
               <h4>{{ .Site.Params.logo_text }}</h4>
               {{ else }}
               <img src="{{ .Site.Params.logo | relURL }}" alt="{{ .Title }} logo" height="50px" alt=""
-                style="image-rendering: -webkit-optimize-contrast;" />
-
+                style="image-rendering: -webkit-optimize-contrast;" /> 
               {{ end }}
               <span class="sr-only">{{ .Title }} - {{ i18n "navHome" }}</span>
             </a>

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

@@ -1,4 +1,7 @@
-<div class="design-banner"></div>
+<section class="bhouseweb_loc_banner">
+  <img src="/img/banner/bn_product@2x.png" class="banner-img card-img" alt="...">
+</section>
+
 <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
   <li class="nav-item" role="presentation">
     <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link design-border">全部設計單品</a>

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

@@ -162,31 +162,6 @@ img {
   opacity: 0.8;
 }
 
-.qa-banner,
-.blog-banner,
-.brand-banner,
-.store-banner,
-.design-banner,
-.news-page-banner,
-.collection-banner,
-.room-planner-banner {
-  padding: 175px 0;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  image-rendering: -webkit-optimize-contrast;
-}
-
-@media (max-width: 991px) {
-  .qa-banner,
-  .blog-banner,
-  .store-banner,
-  .design-banner,
-  .room-planner-banner {
-    background-position: bottom -50px right 50%;
-  }
-}
-
 /* 共通樣式 end */
 /* header start */
 .navbar {
@@ -197,6 +172,24 @@ img {
   white-space: nowrap;
 }
 
+.navbar .nav-item {
+  padding: 13px 0;
+}
+
+@media (max-width: 991px) {
+  .navbar .nav-item {
+    padding: 0;
+  }
+}
+
+.navbar .nav-item:hover {
+  background-color: var(--main-color);
+}
+
+.navbar .nav-item:hover .navbar-link {
+  color: #fff;
+}
+
 .navbar .navbar-link {
   padding: 0 20px;
   color: var(--main-color);
@@ -211,6 +204,19 @@ img {
   display: none;
 }
 
+@media (max-width: 991px) {
+  .navbar .navbar-brand {
+    margin: 0;
+  }
+}
+
+.navbar .navbar-brand img {
+  width: 70%;
+  margin-left: 25%;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
 .navbar .close-btn {
   display: inline-block;
   position: relative;
@@ -282,7 +288,7 @@ img {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  padding: 20px 0;
+  padding: 10px 0;
   background-color: #da831c;
   font-weight: bold;
 }
@@ -334,9 +340,9 @@ img {
   object-fit: cover;
 }
 
-@media (max-width: 575px) {
+@media (max-width: 991px) {
   .slider-item img {
-    height: 350px;
+    height: auto;
   }
 }
 
@@ -360,7 +366,7 @@ img {
 
 @media (max-width: 575px) {
   .slider-item p {
-    font-size: 18px;
+    font-size: 17px;
   }
 }
 
@@ -380,6 +386,12 @@ img {
   }
 }
 
+@media (max-width: 575px) {
+  .slider-item div {
+    padding: 20px 2vw 20px 0;
+  }
+}
+
 /* slick end */
 /* footer start */
 .footer {
@@ -417,7 +429,7 @@ img {
 .footer .title a {
   font-size: 15px;
   color: var(--main-color);
-  font-family: NSJP-400;
+  font-family: NSJP-500;
   font-weight: bold;
   letter-spacing: 1px;
 }
@@ -427,7 +439,7 @@ img {
 .footer .copyright a {
   color: #68686b;
   font-weight: bold;
-  font-family: NSJP-300;
+  font-family: NSJP-400;
   letter-spacing: 1px;
 }
 
@@ -445,6 +457,7 @@ img {
 .footer .mobile-list a {
   font-size: 20px;
   color: var(--main-color);
+  font-family: NSJP-400;
 }
 
 .footer .mobile-list a:hover {
@@ -488,10 +501,6 @@ img {
 
 /* footer end */
 /* home start */
-.home-container {
-  padding: 100px 0 125px;
-}
-
 .home-content {
   width: 50%;
   margin: 0 auto;
@@ -543,15 +552,9 @@ img {
 }
 
 @media (max-width: 767px) {
-  .home-container {
-    padding: 80px 0 200px;
-  }
   .home-content {
     width: 98.5%;
   }
-  .home-content:last-child {
-    display: none;
-  }
   .home-content img {
     max-width: 100%;
     width: 100%;
@@ -572,50 +575,19 @@ img {
 }
 
 .home-content .bg-portfolio .bg-img {
-  background-image: url(/img/bt_linkto_portfolio_web_h@2x.png);
-}
-
-.home-content .bg-portfolio:hover .bg-img {
-  background-image: url(/img/bt_linkto_portfolio_web_n@2x.png);
+  background-image: url(/img/home/X-1-02.png);
 }
 
 .home-content .bg-serve .bg-img {
-  background-image: url(/img/bt_linkto_serve_web_h@2x.png);
-}
-
-.home-content .bg-serve:hover .bg-img {
-  background-image: url(/img/bt_linkto_serve_web_n@2x.png);
+  background-image: url(/img/home/X-1-03.png);
 }
 
 .home-content .bg-qa .bg-img {
-  background-image: url(/img/bt_linkto_qa_web_h@2x.png);
-}
-
-.home-content .bg-qa:hover .bg-img {
-  background-image: url(/img/bt_linkto_qa_web_n@2x.png);
+  background-image: url(/img/home/X-1-04.png);
 }
 
 .home-content .bg-store .bg-img {
-  background-image: url(/img/bt_linkto_store_web_h@2x.png);
-}
-
-.home-content .bg-store:hover .bg-img {
-  background-image: url(/img/bt_linkto_store_web_n@2x.png);
-}
-
-@media (max-width: 767px) {
-  .home-content .bg-portfolio .bg-img {
-    background-image: url(/img/bt_linkto_portfolio_mobile@2x.png);
-  }
-  .home-content .bg-serve .bg-img {
-    background-image: url(/img/bt_linkto_serve_mobile@2x.png);
-  }
-  .home-content .bg-qa .bg-img {
-    background-image: url(/img/bt_linkto_qa_mobile@2x.png);
-  }
-  .home-content .bg-store .bg-img {
-    background-image: url(/img/bt_linkto_store_mobile@2x.png);
-  }
+  background-image: url(/img/home/X-1-05.png);
 }
 
 .reserve {
@@ -628,14 +600,16 @@ img {
   width: 130px;
 }
 
-/* home end */
-/* 服務常見QA-frequently_asked_questions start */
-.qa-banner {
-  background-image: url(/img/banner/bn_qa@2x.png);
+@media (max-width: 991px) {
+  .reserve img {
+    width: 100px;
+  }
 }
 
+/* home end */
+/* 服務常見QA-frequently_asked_questions start */
 .accordion {
-  padding: 140px 25% 40px;
+  padding: 200px 25% 40px;
   border-bottom: 1px solid var(--dark-gray);
 }
 
@@ -645,6 +619,14 @@ img {
   border-color: var(--second-color);
 }
 
+.accordion .accordion-item .title {
+  margin: auto;
+  font-size: 30px;
+  font-weight: bold;
+  letter-spacing: 3px;
+  color: var(--second-color);
+}
+
 .accordion .accordion-button,
 .accordion .accordion-button p {
   font-size: 14px;
@@ -718,13 +700,13 @@ img {
 
 @media (max-width: 1200px) {
   .accordion {
-    padding: 140px 15% 40px;
+    padding: 185px 15% 40px;
   }
 }
 
 @media (max-width: 767px) {
   .accordion {
-    padding: 140px 5% 40px;
+    padding: 150px 5% 40px;
   }
   .accordion .botder-item {
     padding: 0;
@@ -743,7 +725,7 @@ img {
     line-height: 30px;
   }
   .accordion .accordion-item {
-    padding: 5px 0;
+    padding: 15px 0;
   }
   .accordion .subtitle {
     display: block;
@@ -780,7 +762,6 @@ img {
 
 @media screen and (max-width: 991px) {
   .bhouseweb_loc_banner .banner-img {
-    height: 150px;
     -o-object-fit: cover;
     object-fit: cover;
   }
@@ -792,7 +773,13 @@ img {
 }
 
 .bt_container_margin {
-  margin-bottom: -100px;
+  margin-bottom: -180px;
+}
+
+@media screen and (max-width: 767px) {
+  .bt_container_margin {
+    margin-bottom: -150px;
+  }
 }
 
 .bt_slogan {
@@ -831,7 +818,7 @@ img {
   object-fit: cover;
   position: absolute;
   right: 260px;
-  bottom: -36%;
+  bottom: -175px;
   cursor: pointer;
 }
 
@@ -840,13 +827,13 @@ img {
     width: 300px;
     right: 250px;
     height: 200px;
-    bottom: -120px;
   }
 }
 
 @media screen and (max-width: 767px) {
   .bt_slogan_portfolio {
     right: 150px;
+    bottom: -140px;
   }
 }
 
@@ -883,10 +870,6 @@ img {
   padding-bottom: 5px;
 }
 
-.collection-banner {
-  background-image: url(/img/bn_portfolio2x.png);
-}
-
 .bhouseweb_loc_banner {
   position: relative;
 }
@@ -897,9 +880,9 @@ img {
   }
 }
 
-@media screen and (max-width: 767px) {
+@media screen and (max-width: 991px) {
   .bhouseweb_loc_banner .banner-img {
-    height: 150px;
+    height: 200px;
     -o-object-fit: cover;
     object-fit: cover;
   }
@@ -915,7 +898,7 @@ img {
 @media screen and (max-width: 767px) {
   .bhouseweb_loc_sec01 {
     width: 95%;
-    margin-top: 130px;
+    margin-top: 150px;
   }
 }
 
@@ -991,7 +974,7 @@ img {
 @media screen and (max-width: 767px) {
   .bhouseweb_loc_search_box #bhouseweb_search {
     width: 86%;
-    font-size: 0.5rem;
+    font-size: 1rem;
   }
 }
 
@@ -1421,12 +1404,14 @@ img {
   flex-wrap: nowrap;
 }
 
-.room-planner .room-planner-banner {
-  background-image: url(/img/banner/bn_serve@2x.png);
+.room-planner .sub-banner {
+  margin: 210px auto 50px;
 }
 
-.room-planner .sub-banner {
-  margin: 150px auto 50px;
+@media screen and (max-width: 767px) {
+  .room-planner .sub-banner {
+    margin: 160px auto 50px;
+  }
 }
 
 .room-planner .sub-banner img {
@@ -1586,7 +1571,7 @@ img {
   }
 }
 
-@media (max-width: 576px) {
+@media (max-width: 575px) {
   .room-planner .room-planner-moblie .line-6 {
     right: 36%;
   }
@@ -1615,26 +1600,22 @@ img {
 
 /* 成家設計服務-room_planner end */
 /* 成家知識專欄-categories start */
-.blog-banner {
-  background-image: url(../img/banner/bn_blog@2x.png);
-}
-
 .blog-categories .container {
   width: 50%;
   margin: 40px auto 25px;
 }
 
 .blog-categories .container .breadcrumb-item {
-  font-weight: bold;
+  font-family: NSJP-500;
 }
 
 .blog-categories .container .breadcrumb-item a {
+  font-family: NSJP-500;
   color: var(--main-color);
 }
 
 .blog-categories .container .link-list {
   width: 100%;
-  max-width: 190px;
 }
 
 .blog-categories .container .link-list a {
@@ -1704,7 +1685,7 @@ img {
 }
 
 .blog-categories .article .article-item .description:hover {
-  opacity: .8;
+  opacity: 0.8;
 }
 
 .blog-categories .article .article-item img {
@@ -1759,6 +1740,7 @@ img {
   color: #4c660b;
   font-weight: bold;
   font-family: NSJP-900;
+  margin-bottom: 50px;
 }
 
 .blog_article span {
@@ -1780,7 +1762,7 @@ img {
 
 .blog_article .content {
   width: 50%;
-  margin: auto;
+  margin: 60px auto;
   padding-bottom: 60px;
 }
 
@@ -1802,10 +1784,6 @@ img {
   }
 }
 
-.blog_article .icon-box img {
-  width: 35px;
-}
-
 .blog_article .question-box {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -1844,22 +1822,13 @@ img {
   opacity: 0.8;
 }
 
-.blog_article .img-box {
-  margin: 50px 0;
-  position: relative;
-}
-
-.blog_article .img-box img {
-  width: 100%;
+.blog_article .img-text {
+  margin-bottom: 50px;
 }
 
-.blog_article .img-box p {
+.blog_article .img-text p {
   margin: 0;
   padding: 20px 60px;
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0px;
   background-color: rgba(128, 143, 76, 0.6);
   text-align: start;
   color: #ffffff;
@@ -1869,7 +1838,17 @@ img {
   letter-spacing: 2px;
 }
 
-.blog_article section h4 {
+.blog_article .content img {
+  width: 100%;
+  margin-top: 50px;
+}
+
+.blog_article .icon-box img {
+  margin-top: 0px;
+  width: 35px;
+}
+
+.blog_article h4 {
   margin-bottom: 30px;
   font-size: 20px;
   font-weight: bold;
@@ -1886,59 +1865,25 @@ img {
   font-family: NSJP-400;
 }
 
-.blog_article .section-01 {
-  margin-bottom: 40px;
-  padding-bottom: 20px;
-  border-bottom: 1px solid var(--dark-gray);
-}
-
-.blog_article .section-02 li {
+.blog_article li {
   letter-spacing: 1px;
   line-height: 32px;
 }
 
-.blog_article .section-02 li:first-child,
-.blog_article .section-03 li:first-child {
-  margin-bottom: 20px;
+.blog_article .list-title {
   font-size: 20px;
   font-weight: bold;
   font-family: NSJP-700;
 }
 
-.blog_article .section-03 {
-  padding-bottom: 10px;
-  border-bottom: 1px solid var(--dark-gray);
-}
-
-.blog_article .section-03 span {
-  line-height: 32px;
-}
-
-.blog_article .section-04 {
-  padding-bottom: 40px;
-  border-bottom: 1px solid var(--dark-gray);
-}
-
-.blog_article .section-04 h4 {
-  margin-top: 30px;
-}
-
-.blog_article .section-04 span {
-  line-height: 32px;
-}
-
-.blog_article .section-04 li:first-child {
-  margin-bottom: 40px;
-}
-
-.blog_article .section-04 table {
+.blog_article table {
   width: 100%;
   margin-bottom: 50px;
 }
 
-.blog_article .section-04 table,
-.blog_article .section-04 table td,
-.blog_article .section-04 table th {
+.blog_article table,
+.blog_article table td,
+.blog_article table th {
   padding: 5px 10px;
   border: 1px solid #333;
 }
@@ -1991,12 +1936,14 @@ img {
   color: var(--main-color);
 }
 
-/* 成家知識專欄-article end */
-/* 最新消息公告-news start */
-.news-page-banner {
-  background-image: url(/img/banner/bn_news@2x.png);
+.blog_article .line {
+  display: block;
+  margin: 50px 0;
+  border-bottom: 1px solid var(--dark-gray);
 }
 
+/* 成家知識專欄-article end */
+/* 最新消息公告-news start */
 .bhouseweb_loc_content .subtitle {
   font-family: NSJP-900;
 }
@@ -2025,7 +1972,7 @@ img {
 }
 
 .furniture-design p {
-  padding-right: 20px;
+  padding-right: 15px;
   text-align: justify;
   font-family: NSJP-400;
 }
@@ -2046,6 +1993,18 @@ img {
   width: 100%;
 }
 
+.furniture-design .text-box {
+  width: 380px;
+  text-align: center;
+  margin: auto;
+}
+
+@media screen and (max-width: 575px) {
+  .furniture-design .text-box {
+    width: auto;
+  }
+}
+
 .furniture-design .nav-link {
   font-weight: bold;
   font-size: 14px;
@@ -2193,20 +2152,6 @@ img {
   }
 }
 
-.furniture-design .design-banner {
-  background-image: url(../img/banner/bn_product@2x.png);
-}
-
-.furniture-design #systeam-furniture p {
-  white-space: nowrap;
-}
-
-@media (max-width: 575px) {
-  .furniture-design #systeam-furniture p {
-    white-space: normal;
-  }
-}
-
 .furniture-design #systeam-furniture .cabinet-03 {
   height: 500px;
   display: -webkit-box;
@@ -2420,10 +2365,6 @@ img {
   font-family: NSJP-400;
 }
 
-.brand-banner {
-  background-image: url(/img/banner/bn_concept@2x.png);
-}
-
 .brand_content {
   width: 50%;
   margin: 0 auto;
@@ -2493,10 +2434,6 @@ img {
   cursor: pointer;
 }
 
-.store-banner {
-  background-image: url(/img/banner/bn_store@2x.png);
-}
-
 .sec01_store_map_img {
   width: 40%;
   margin: 0 auto;
@@ -2734,6 +2671,10 @@ img {
   margin-bottom: 10px;
 }
 
+.store_content_item span {
+  font-family: NSJP-500;
+}
+
 .assign-link {
   border-bottom: 2px solid var(--second-color);
 }

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

@@ -164,30 +164,30 @@ img {
   opacity: 0.8;
 }
 
-.qa-banner,
-.blog-banner,
-.brand-banner,
-.store-banner,
-.design-banner,
-.news-page-banner,
-.collection-banner,
-.room-planner-banner {
-  padding: 175px 0;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  image-rendering: -webkit-optimize-contrast;
-}
+// .qa-banner,
+// .blog-banner,
+// .brand-banner,
+// .store-banner,
+// .design-banner,
+// .news-page-banner,
+// .collection-banner,
+// .room-planner-banner {
+//   padding: 175px 0;
+//   background-size: cover;
+//   background-position: center;
+//   background-repeat: no-repeat;
+//   image-rendering: -webkit-optimize-contrast;
+// }
 
-@media (max-width: 991px) {
-  .qa-banner,
-  .blog-banner,
-  .store-banner,
-  .design-banner,
-  .room-planner-banner {
-    background-position: bottom -50px right 50%;
-  }
-}
+// @media (max-width: 991px) {
+//   .qa-banner,
+//   .blog-banner,
+//   .store-banner,
+//   .design-banner,
+//   .room-planner-banner {
+//     background-position: bottom -50px right 50%;
+//   }
+// }
 
 /* 共通樣式 end */
 /* header start */
@@ -199,6 +199,19 @@ img {
   white-space: nowrap;
 }
 
+.navbar .nav-item {
+  padding: 13px 0;
+  @media (max-width: 991px) {
+    padding: 0;
+  }
+  &:hover {
+    background-color: var(--main-color);
+    .navbar-link {
+      color: #fff;
+    }
+  }
+}
+
 .navbar .navbar-link {
   padding: 0 20px;
   color: var(--main-color);
@@ -211,6 +224,15 @@ img {
 
 .navbar .navbar-brand {
   display: none;
+  @media (max-width: 991px) {
+    margin: 0;
+  }
+}
+
+.navbar .navbar-brand img {
+  width: 70%;
+  margin-left: 25%;
+  object-fit: contain;
 }
 
 .navbar .close-btn {
@@ -290,7 +312,7 @@ img {
 
 .news-link {
   display: flex;
-  padding: 20px 0;
+  padding: 10px 0;
   background-color: #da831c;
   font-weight: bold;
   a {
@@ -335,8 +357,8 @@ img {
   height: 700px;
   -o-object-fit: cover;
   object-fit: cover;
-  @media (max-width: 575px) {
-    height: 350px;
+  @media (max-width: 991px) {
+    height: auto;
   }
 }
 
@@ -357,7 +379,7 @@ img {
   font-family: NSJP-500;
   letter-spacing: 2px;
   @media (max-width: 575px) {
-    font-size: 18px;
+    font-size: 17px;
   }
 }
 
@@ -374,6 +396,12 @@ img {
   }
 }
 
+@media (max-width: 575px) {
+  .slider-item div {
+    padding: 20px 2vw 20px 0;
+  }
+}
+
 /* slick end */
 /* footer start */
 .footer {
@@ -411,7 +439,7 @@ img {
 .footer .title a {
   font-size: 15px;
   color: var(--main-color);
-  font-family: NSJP-400;
+  font-family: NSJP-500;
   font-weight: bold;
   letter-spacing: 1px;
 }
@@ -421,7 +449,7 @@ img {
 .footer .copyright a {
   color: #68686b;
   font-weight: bold;
-  font-family: NSJP-300;
+  font-family: NSJP-400;
   letter-spacing: 1px;
 }
 
@@ -439,6 +467,7 @@ img {
 .footer .mobile-list a {
   font-size: 20px;
   color: var(--main-color);
+  font-family: NSJP-400;
 }
 
 .footer .mobile-list a:hover {
@@ -485,9 +514,6 @@ img {
 
 /* footer end */
 /* home start */
-.home-container {
-  padding: 100px 0 125px;
-}
 
 .home-content {
   width: 50%;
@@ -540,18 +566,10 @@ img {
 }
 
 @media (max-width: 767px) {
-  .home-container {
-    padding: 80px 0 200px;
-  }
-
   .home-content {
     width: 98.5%;
   }
 
-  .home-content:last-child {
-    display: none;
-  }
-
   .home-content img {
     max-width: 100%;
     width: 100%;
@@ -562,54 +580,6 @@ img {
   img {
     height: 100%;
   }
-  // h4 {
-  //   margin: 0;
-  //   color: #ffffff;
-  //   background-color: rgba(128, 128, 128, 0.8);
-  //   padding: 20px 15px;
-  //   transition: all 0.3s;
-  //   font-size: 1.7rem;
-  //   font-weight: bold;
-  //   white-space: nowrap;
-  //   text-align: center;
-  //   text-shadow: 1px 1px 7px #000;
-  // }
-  // div {
-  //   position: absolute;
-  //   top: 50%;
-  //   left: 50%;
-  //   -webkit-transform: translate(-50%, -50%);
-  //   transform: translate(-50%, -50%);
-  //   display: -webkit-box;
-  //   display: -ms-flexbox;
-  //   display: flex;
-  //   -webkit-box-pack: center;
-  //   -ms-flex-pack: center;
-  //   justify-content: center;
-  //   -webkit-box-align: center;
-  //   -ms-flex-align: center;
-  //   align-items: center;
-  //   -webkit-transition: all 0.3s;
-  //   transition: all 0.3s;
-  // }
-  // &:hover div {
-  //   display: -webkit-box;
-  //   display: -ms-flexbox;
-  //   display: flex;
-  //   -webkit-box-pack: center;
-  //   -ms-flex-pack: center;
-  //   justify-content: center;
-  //   -webkit-box-align: center;
-  //   -ms-flex-align: center;
-  //   align-items: center;
-  //   width: 96%;
-  //   height: 100%;
-  //   background: rgba(128, 128, 128, 0.8);
-  //   cursor: pointer;
-  // }
-  // &:hover div h4 {
-  //   background-color: transparent;
-  // }
   .bg-img {
     width: 100%;
     padding: 40% 0;
@@ -617,64 +587,24 @@ img {
     background-size: cover;
     transition: all 0.5s;
   }
-  // @media (max-width: 575px) {
-  //   margin: 20px 0;
-  //   &:hover div {
-  //   width: 95%;
-  //   }
-  // }
-  // @media (max-width: 375px) {
-  //   &:hover div {
-  //   width: 93%;
-  //   }
-  // }
   .bg-portfolio {
     .bg-img {
-      background-image: url(/img/bt_linkto_portfolio_web_h@2x.png);
-    }
-    &:hover .bg-img {
-      background-image: url(/img/bt_linkto_portfolio_web_n@2x.png);
+      background-image: url(/img/home/X-1-02.png);
     }
   }
   .bg-serve {
     .bg-img {
-      background-image: url(/img/bt_linkto_serve_web_h@2x.png);
-    }
-    &:hover .bg-img {
-      background-image: url(/img/bt_linkto_serve_web_n@2x.png);
+      background-image: url(/img/home/X-1-03.png);
     }
   }
   .bg-qa {
     .bg-img {
-      background-image: url(/img/bt_linkto_qa_web_h@2x.png);
-    }
-    &:hover .bg-img {
-      background-image: url(/img/bt_linkto_qa_web_n@2x.png);
+      background-image: url(/img/home/X-1-04.png);
     }
   }
   .bg-store {
     .bg-img {
-      background-image: url(/img/bt_linkto_store_web_h@2x.png);
-    }
-    &:hover .bg-img {
-      background-image: url(/img/bt_linkto_store_web_n@2x.png);
-    }
-  }
-  @media (max-width: 767px) {
-    .bg-portfolio .bg-img {
-      background-image: url(/img/bt_linkto_portfolio_mobile@2x.png);
-    }
-
-    .bg-serve .bg-img {
-      background-image: url(/img/bt_linkto_serve_mobile@2x.png);
-    }
-
-    .bg-qa .bg-img {
-      background-image: url(/img/bt_linkto_qa_mobile@2x.png);
-    }
-
-    .bg-store .bg-img {
-      background-image: url(/img/bt_linkto_store_mobile@2x.png);
+      background-image: url(/img/home/X-1-05.png);
     }
   }
 }
@@ -687,16 +617,16 @@ img {
 
 .reserve img {
   width: 130px;
+  @media (max-width: 991px) {
+    width: 100px;
+  }
 }
 
 /* home end */
 /* 服務常見QA-frequently_asked_questions start */
-.qa-banner {
-  background-image: url(/img/banner/bn_qa@2x.png);
-}
 
 .accordion {
-  padding: 140px 25% 40px;
+  padding: 200px 25% 40px;
   border-bottom: 1px solid var(--dark-gray);
 }
 
@@ -706,6 +636,14 @@ img {
   border-color: var(--second-color);
 }
 
+.accordion .accordion-item .title {
+  margin: auto;
+  font-size: 30px;
+  font-weight: bold;
+  letter-spacing: 3px;
+  color: var(--second-color);
+}
+
 .accordion .accordion-button,
 .accordion .accordion-button p {
   font-size: 14px;
@@ -779,13 +717,13 @@ img {
 
 @media (max-width: 1200px) {
   .accordion {
-    padding: 140px 15% 40px;
+    padding: 185px 15% 40px;
   }
 }
 
 @media (max-width: 767px) {
   .accordion {
-    padding: 140px 5% 40px;
+    padding: 150px 5% 40px;
   }
 
   .accordion .botder-item {
@@ -809,7 +747,7 @@ img {
   }
 
   .accordion .accordion-item {
-    padding: 5px 0;
+    padding: 15px 0;
   }
 
   .accordion .subtitle {
@@ -847,7 +785,7 @@ img {
 
 @media screen and (max-width: 991px) {
   .bhouseweb_loc_banner .banner-img {
-    height: 150px;
+    // height: 150px;
     -o-object-fit: cover;
     object-fit: cover;
   }
@@ -858,7 +796,10 @@ img {
 }
 
 .bt_container_margin {
-  margin-bottom: -100px;
+  margin-bottom: -180px;
+  @media screen and (max-width: 767px) {
+    margin-bottom: -150px;
+  }
 }
 
 .bt_slogan {
@@ -897,7 +838,7 @@ img {
   object-fit: cover;
   position: absolute;
   right: 260px;
-  bottom: -36%;
+  bottom: -175px;
   cursor: pointer;
 }
 
@@ -906,13 +847,13 @@ img {
     width: 300px;
     right: 250px;
     height: 200px;
-    bottom: -120px;
   }
 }
 
 @media screen and (max-width: 767px) {
   .bt_slogan_portfolio {
     right: 150px;
+    bottom: -140px;
   }
 }
 
@@ -949,10 +890,6 @@ img {
   padding-bottom: 5px;
 }
 
-.collection-banner {
-  background-image: url(/img/bn_portfolio2x.png);
-}
-
 .bhouseweb_loc_banner {
   position: relative;
 }
@@ -963,9 +900,9 @@ img {
   }
 }
 
-@media screen and (max-width: 767px) {
+@media screen and (max-width: 991px) {
   .bhouseweb_loc_banner .banner-img {
-    height: 150px;
+    height: 200px;
     -o-object-fit: cover;
     object-fit: cover;
   }
@@ -981,7 +918,7 @@ img {
 @media screen and (max-width: 767px) {
   .bhouseweb_loc_sec01 {
     width: 95%;
-    margin-top: 130px;
+    margin-top: 150px;
   }
 }
 
@@ -1057,7 +994,7 @@ img {
 @media screen and (max-width: 767px) {
   .bhouseweb_loc_search_box #bhouseweb_search {
     width: 86%;
-    font-size: 0.5rem;
+    font-size: 1rem;
   }
 }
 
@@ -1491,12 +1428,11 @@ img {
   flex-wrap: nowrap;
 }
 
-.room-planner .room-planner-banner {
-  background-image: url(/img/banner/bn_serve@2x.png);
-}
-
 .room-planner .sub-banner {
-  margin: 150px auto 50px;
+  margin: 210px auto 50px;
+  @media screen and (max-width: 767px) {
+    margin: 160px auto 50px;
+  }
 }
 
 .room-planner .sub-banner img {
@@ -1658,7 +1594,7 @@ img {
   }
 }
 
-@media (max-width: 576px) {
+@media (max-width: 575px) {
   .room-planner .room-planner-moblie .line-6 {
     right: 36%;
   }
@@ -1688,9 +1624,6 @@ img {
 
 /* 成家設計服務-room_planner end */
 /* 成家知識專欄-categories start */
-.blog-banner {
-  background-image: url(../img/banner/bn_blog@2x.png);
-}
 
 .blog-categories .container {
   width: 50%;
@@ -1698,16 +1631,16 @@ img {
 }
 
 .blog-categories .container .breadcrumb-item {
-  font-weight: bold;
+  font-family: NSJP-500;
 }
 
 .blog-categories .container .breadcrumb-item a {
+  font-family: NSJP-500;
   color: var(--main-color);
 }
 
 .blog-categories .container .link-list {
   width: 100%;
-  max-width: 190px;
 }
 
 .blog-categories .container .link-list a {
@@ -1775,7 +1708,7 @@ img {
 }
 
 .blog-categories .article .article-item .description:hover {
-  opacity: .8;
+  opacity: 0.8;
 }
 
 // .blog-categories .article .article-item h4,
@@ -1838,6 +1771,7 @@ img {
   color: #4c660b;
   font-weight: bold;
   font-family: NSJP-900;
+  margin-bottom: 50px;
 }
 
 .blog_article span {
@@ -1859,7 +1793,7 @@ img {
 
 .blog_article .content {
   width: 50%;
-  margin: auto;
+  margin: 60px auto;
   padding-bottom: 60px;
 }
 
@@ -1881,10 +1815,6 @@ img {
   }
 }
 
-.blog_article .icon-box img {
-  width: 35px;
-}
-
 .blog_article .question-box {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -1923,32 +1853,53 @@ img {
   opacity: 0.8;
 }
 
-.blog_article .img-box {
-  margin: 50px 0;
-  position: relative;
+.blog_article .img-text {
+  margin-bottom: 50px;
+  p {
+    margin: 0;
+    padding: 20px 60px;
+    background-color: rgba(128, 143, 76, 0.6);
+    text-align: start;
+    color: #ffffff;
+    font-size: 14px;
+    line-height: 28px;
+    font-family: NSJP-500;
+    letter-spacing: 2px;
+  }
 }
 
-.blog_article .img-box img {
+// .blog_article .img-box {
+//   margin: 50px 0;
+//   position: relative;
+// }
+
+.blog_article .content img {
   width: 100%;
+  margin-top: 50px;
 }
 
-.blog_article .img-box p {
-  margin: 0;
-  padding: 20px 60px;
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0px;
-  background-color: rgba(128, 143, 76, 0.6);
-  text-align: start;
-  color: #ffffff;
-  font-size: 14px;
-  line-height: 28px;
-  font-family: NSJP-500;
-  letter-spacing: 2px;
+.blog_article .icon-box img {
+  margin-top: 0px;
+  width: 35px;
 }
 
-.blog_article section h4 {
+// .blog_article .img-box p {
+//   margin: 0;
+//   padding: 20px 60px;
+//   position: absolute;
+//   left: 0;
+//   right: 0;
+//   bottom: 0px;
+//   background-color: rgba(128, 143, 76, 0.6);
+//   text-align: start;
+//   color: #ffffff;
+//   font-size: 14px;
+//   line-height: 28px;
+//   font-family: NSJP-500;
+//   letter-spacing: 2px;
+// }
+
+.blog_article h4 {
   margin-bottom: 30px;
   font-size: 20px;
   font-weight: bold;
@@ -1965,59 +1916,65 @@ img {
   font-family: NSJP-400;
 }
 
-.blog_article .section-01 {
-  margin-bottom: 40px;
-  padding-bottom: 20px;
-  border-bottom: 1px solid var(--dark-gray);
-}
+// .blog_article .section-01 {
+//   margin-bottom: 40px;
+//   padding-bottom: 20px;
+//   border-bottom: 1px solid var(--dark-gray);
+// }
 
-.blog_article .section-02 li {
+.blog_article li {
   letter-spacing: 1px;
   line-height: 32px;
 }
 
-.blog_article .section-02 li:first-child,
-.blog_article .section-03 li:first-child {
-  margin-bottom: 20px;
+.blog_article .list-title {
   font-size: 20px;
   font-weight: bold;
   font-family: NSJP-700;
 }
 
-.blog_article .section-03 {
-  padding-bottom: 10px;
-  border-bottom: 1px solid var(--dark-gray);
-}
+// .blog_article .section-02 li:first-child,
+// .blog_article .section-03 li:first-child {
+//   margin-bottom: 20px;
+//   font-size: 20px;
+//   font-weight: bold;
+//   font-family: NSJP-700;
+// }
 
-.blog_article .section-03 span {
-  line-height: 32px;
-}
+// .blog_article .section-03 {
+//   padding-bottom: 10px;
+//   border-bottom: 1px solid var(--dark-gray);
+// }
 
-.blog_article .section-04 {
-  padding-bottom: 40px;
-  border-bottom: 1px solid var(--dark-gray);
-}
+// .blog_article .section-03 span {
+//   line-height: 32px;
+// }
 
-.blog_article .section-04 h4 {
-  margin-top: 30px;
-}
+// .blog_article .section-04 {
+//   padding-bottom: 40px;
+//   border-bottom: 1px solid var(--dark-gray);
+// }
 
-.blog_article .section-04 span {
-  line-height: 32px;
-}
+// .blog_article .section-04 h4 {
+//   margin-top: 30px;
+// }
 
-.blog_article .section-04 li:first-child {
-  margin-bottom: 40px;
-}
+// .blog_article .section-04 span {
+//   line-height: 32px;
+// }
+
+// .blog_article .section-04 li:first-child {
+//   margin-bottom: 40px;
+// }
 
-.blog_article .section-04 table {
+.blog_article table {
   width: 100%;
   margin-bottom: 50px;
 }
 
-.blog_article .section-04 table,
-.blog_article .section-04 table td,
-.blog_article .section-04 table th {
+.blog_article table,
+.blog_article table td,
+.blog_article table th {
   padding: 5px 10px;
   border: 1px solid #333;
 }
@@ -2070,11 +2027,14 @@ img {
   color: var(--main-color);
 }
 
+.blog_article .line {
+  display: block;
+  margin: 50px 0;
+  border-bottom: 1px solid var(--dark-gray);
+}
+
 /* 成家知識專欄-article end */
 /* 最新消息公告-news start */
-.news-page-banner {
-  background-image: url(/img/banner/bn_news@2x.png);
-}
 
 .bhouseweb_loc_content {
   .subtitle {
@@ -2099,13 +2059,12 @@ img {
 
 /* 最新消息公告-news end */
 /* 小寶設計單品-furniture_design start */
-.furniture_design_content{
+.furniture_design_content {
   width: 55%;
   margin: 0 auto;
-
 }
 .furniture-design p {
-  padding-right: 20px;
+  padding-right: 15px;
   text-align: justify;
   font-family: NSJP-400;
 }
@@ -2126,6 +2085,15 @@ img {
   width: 100%;
 }
 
+.furniture-design .text-box {
+  width: 380px;
+  text-align: center;
+  margin: auto;
+  @media screen and (max-width: 575px) {
+    width: auto;
+  }
+}
+
 .furniture-design .nav-link {
   font-weight: bold;
   font-size: 14px;
@@ -2264,20 +2232,6 @@ img {
   }
 }
 
-.furniture-design .design-banner {
-  background-image: url(../img/banner/bn_product@2x.png);
-}
-
-.furniture-design #systeam-furniture p {
-  white-space: nowrap;
-}
-
-@media (max-width: 575px) {
-  .furniture-design #systeam-furniture p {
-    white-space: normal;
-  }
-}
-
 .furniture-design #systeam-furniture .cabinet-03 {
   height: 500px;
   display: -webkit-box;
@@ -2331,12 +2285,12 @@ img {
   letter-spacing: 2px;
 }
 
-.tw-85{
-  width:85%;
-  } 
-  .tw-15{
-    width:15%;
-    } 
+.tw-85 {
+  width: 85%;
+}
+.tw-15 {
+  width: 15%;
+}
 
 /* 小寶設計單品-furniture_design end */
 /* 設計家具 start */
@@ -2492,10 +2446,6 @@ img {
   font-family: NSJP-400;
 }
 
-.brand-banner {
-  background-image: url(/img/banner/bn_concept@2x.png);
-}
-
 .brand_content {
   width: 50%;
   margin: 0 auto;
@@ -2565,10 +2515,6 @@ img {
   cursor: pointer;
 }
 
-.store-banner {
-  background-image: url(/img/banner/bn_store@2x.png);
-}
-
 .sec01_store_map_img {
   width: 40%;
   margin: 0 auto;
@@ -2804,6 +2750,10 @@ img {
   margin-bottom: 10px;
 }
 
+.store_content_item span {
+  font-family: NSJP-500;
+}
+
 .assign-link {
   border-bottom: 2px solid var(--second-color);
 }