commit

.gitignore

@@ -0,0 +1,2 @@
+content/
+static/img/title

archetypes/default.md

@@ -0,0 +1,6 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+---
+

config.toml

@@ -0,0 +1,256 @@
+baseURL = 'https://bhouse.com.tw/'
+languageCode = 'en-us'
+title = '小寶優居・美好成家：陪伴你成家的住宅設計品牌'
+theme = 'hugo-universal-theme-master'
+
+paginate = 60
+
+[menu]
+
+[markup]
+  [markup.goldmark.renderer]
+    unsafe=true
+  [markup.tableOfContents]
+    endLevel = 3
+    startLevel = 2
+    ordered = true
+
+# Main menu
+
+[[menu.main]]
+    name       = "室內設計作品"
+    identifier = "menu.blog1"
+    url        = "/collection/"
+    weight     = 1
+
+[[menu.main]]
+    name       = "成家設計服務"
+    identifier = "menu.blog2"
+    url        = "/room_planner/"
+    weight     = 2
+
+[[menu.main]]
+    name       = "服務常見QA"
+    identifier = "menu.blog3"
+    url        = "/frequently_asked_questions/"
+    weight     = 3
+
+[[menu.main]]
+    name       = "成家知識專欄"
+    identifier = "menu.blog4"
+    url        = "/blog_main/"
+    weight     = 4
+
+[[menu.main]]
+    name       = "小寶設計單品"
+    identifier = "menu.faq52"
+    url        = "/furniture_design/sofa"
+    weight     = 5
+
+[[menu.main]]
+    name       = "小寶優居門市"
+    identifier = "menu.faq5"
+    url        = "/store/"
+    weight     = 6
+
+
+
+# Top bar social links menu
+
+[[menu.topbar]]
+    weight = 1
+    name = "Phone"
+    url = "tel:+12 34 567 89 01"
+    pre = "<i class='fas fa-2x fa-phone'></i>"
+
+[[menu.topbar]]
+    weight = 2
+    name = "GitHub"
+    url = "https://github.com/devcows/hugo-universal-theme"
+    pre = "<i class='fab fa-2x fa-github'></i>"
+
+[[menu.topbar]]
+    weight = 3
+    name = "Facebook"
+    url = "http://facebook.com"
+    pre = "<i class='fab fa-2x fa-facebook'></i>"
+
+[[menu.topbar]]
+    weight = 4
+    name = "Twitter"
+    url = "http://twitter.com"
+    pre = "<i class='fab fa-2x fa-twitter'></i>"
+
+[[menu.topbar]]
+    weight = 5
+    name = "Email"
+    url = "mailto:hello@universal.com"
+    pre = "<i class='fas fa-2x fa-envelope'></i>"
+
+[params]
+    viewMorePostLink = "/blog/"
+    author = "小寶優居"
+    keywords = "小寶優居 | 小寶幽居 | 小寶家居 | 小寶 | ptt 評價 | 小優家居 | 小寶優居裝潢 | 小寶股份有限公司 | 優居 | bhouse  | 小寶文創 | 收費 | 折扣 | 費用 | 台南小寶優居 | 小寶居家 | 台中 | 負評 | 熟成吐司 | 沙發"
+    mainSections = ["blog"]
+    sitemap = "/sitemap.xml"
+    defaultDescription = "小寶優居的成家設計服務，提供透明可信任的住宅設計、家具與系統櫃、安心裝修服務，陪伴第一次成家、沒有室內設計經驗的人，以人為本、健康、安全的美好成家體驗。"
+    collection_description ="小寶優居設計作品集，用系統櫃、設計家具、輕裝修完成你家的室內設計，搭配安心裝修服務，用透明的報價方式、客製化成家預算，把你辛苦買的房子變成美好的家。"
+
+    # Social media
+    facebook_site = "" # the Facebook handle of your site ('https://www.facebook.com/HANDLE')
+    twitter_site = "GoHugoIO" # the Twitter handle of your site (without the '@')
+    default_sharing_image = "img/sharing-default.png"
+
+    # Google Maps widget: If `googleMapsApiKey` is not set, no key will be passed to Google (which likely results in a broken map widget).
+    enableGoogleMaps = false
+    googleMapsApiKey = "AIzaSyAv7Sza8NSp9_l_g8G2vlo0H4ydEPn_2jY"
+
+    latitude = "-12.043333"
+    longitude = "-77.028333"
+
+    # Style options: default (light-blue), blue, green, marsala, pink, red, turquoise, violet
+    style = "bhouse"
+
+    # Since this template is static, the contact form uses www.formspree.io as a
+    # proxy. The form makes a POST request to their servers to send the actual
+    # email. Visitors can send up to a 50 emails each month for free.
+    #
+    # What you need to do for the setup?
+    #
+    # - register your account to https://formspree.io/register
+    # - login and create new form
+    # - set your form's endpoint url under 'formspree_action' below
+    # - upload the generated site to your server
+    # - test a dummy email yourself
+    # - you're done. Happy mailing!
+    #
+    # Enable the contact form by entering your Formspree.io endpoint url
+    formspree_action = "https://formspree.io/sample/of/endpoint"
+    contact_form_ajax = false
+
+    # Formspree form supports Google reCAPTCHA Key (type v2).
+    # If you use this feature, you should enable reCAPTCHA feature in the Formspree dashboard.
+    #
+    # By default, Formspree use a redirect page for recaptcha widget.
+    # If you use a recaptcha widget in your contact page, you should do next steps.
+    # (if you don't want, skip these steps)
+    #
+    #   1. register your site on Google recaptcha admin page: https://www.google.com/recaptcha/admin
+    #   2. select reCAPTCHA v2 and checkbox widget type.
+    #   3. remember site key and secret key.
+    #   4. enter secret key into "Custom reCAPTCHA Key" field in your Formspree form setting page.
+    #   5. change `enableRecaptchaInContactForm` is to true
+    #   6. enter site key into `googleRecaptchaKey` to enable a recaptcha widget in your page.
+    #
+    enableRecaptchaInContactForm = false
+    googleRecaptchaKey = "site_key_for_google_recaptcha"
+
+    about_us = "<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>"
+    copyright = "Copyright (c) 2015 - 2016, YourCompany; all rights reserved."
+
+    # Format dates with Go's time formatting
+    date_format = "January 2, 2006"
+
+    dropdown_mouse_over = false
+
+    disabled_logo = false
+    logo_text = "Universal"
+
+    logo = "img/home/bt_index@2x.png"
+    logo_mobile = "img/home/logo_mb.png"
+    logo_small = "img/logo-small.png"
+    contact_url = "/contact"
+    address = """<p class="text-uppercase"><strong>Universal Ltd.</strong>
+        <br>13/25 New Avenue
+        <br>Newtown upon River
+        <br>45Y 73J
+        <br>England
+        <br>
+        <strong>Great Britain</strong>
+      </p>
+      """
+
+# Enable or disable top bar with social icons
+[params.topbar]
+    enable = true
+    text = """<p class="hidden-sm hidden-xs">Contact us on +420 777 555 333 or hello@universal.com.</p>
+      <p class="hidden-md hidden-lg"><a href="tel:+420 777 555 333" data-animate-hover="pulse"><i class="fas fa-phone"></i></a>
+      <a href="mailto:hello@universal.com" data-animate-hover="pulse"><i class="fas fa-envelope"></i></a>
+      </p>
+      """
+
+# Enable and disable widgets for the right sidebar
+[params.widgets]
+    categories = true
+    tags = true
+    search = true
+
+[params.carouselCustomers]
+    items = 6
+    auto_play = false
+    slide_speed = 2000
+    pagination_speed = 1000
+
+[params.carouselTestimonials]
+    items = 4
+    auto_play = false
+    slide_speed = 2000
+    pagination_speed = 1000
+
+[params.carouselHomepage]
+    # All carousel items are defined in their own files. You can find example items
+    # at 'exampleSite/data/carousel'.
+    # For more information take a look at the README.
+    enable = true
+    auto_play = true
+    slide_speed = 2000
+    pagination_speed = 1000
+
+[params.features]
+    enable = true
+    cols = 3 # Default: 3, Available values 2,3,4,6
+    # All features are defined in their own files. You can find example items
+    # at 'exampleSite/data/features'.
+    # For more information take a look at the README.
+
+[params.testimonials]
+    enable = true
+    # All testimonials are defined in their own files. You can find example items
+    # at 'exampleSite/data/testimonials'.
+    # For more information take a look at the README.
+    title = "Testimonials"
+    subtitle = "We have worked with many clients and we always like to hear they come out from the cooperation happy and satisfied. Have a look what our clients said about us."
+
+[params.see_more]
+    enable = true
+    icon = "far fa-file-alt"
+    title = "Do you want to see more?"
+    subtitle = "We have prepared for you more than 40 different HTML pages, including 5 variations of homepage."
+    link_url = "#"
+    link_text = "Check other homepages"
+
+[params.clients]
+    enable = true
+    # All clients are defined in their own files. You can find example items
+    # at 'exampleSite/data/clients'.
+    # For more information take a look at the README.
+    title = "Our Clients"
+    subtitle = ""
+
+[params.recent_posts]
+    enable = true
+    title = "From our blog"
+    subtitle = "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo."
+    hide_summary = false
+
+[params.footer.recent_posts]
+    enable = true
+
+[taxonomies]
+  category = "categories"
+  tag = "tags"
+  author = "authors"
+
+[permalinks]
+  blog = "/blog/:year/:month/:day/:filename/"
+  categories = "/blog/:slug/"

data/carousel/customizable.yaml

@@ -0,0 +1,9 @@
+weight: 4
+title: "Easy to customize"
+description: >
+  <ul class="list-style-none">
+    <li>7 preprepared colour variations.</li>
+    <li>Easily to change fonts</li>
+  </ul>
+image: "img/carousel/template-easy-code.png"
+href: "https://devcows.github.io/hugo-universal-theme/"

data/carousel/design.yaml

@@ -0,0 +1,10 @@
+weight: 3
+title: "Design"
+description: >
+  <ul class="list-style-none">
+    <li>Clean and elegant design</li>
+    <li>Full width and boxed mode</li>
+    <li>Easily readable Roboto font and awesome icons</li>
+    <li>7 preprepared colour variations</li>
+  </ul>
+image: "img/carousel/template-easy-customize.png"

data/carousel/features.yaml

@@ -0,0 +1,11 @@
+weight: 2
+title: "46 HTML pages full of features"
+description: >
+  <ul class="list-style-none">
+     <li>Sliders and carousels</li>
+     <li>4 Header variations</li>
+     <li>Google maps, Forms, Megamenu, CSS3 Animations and much more</li>
+     <li>+ 11 extra pages showing template features</li>
+   </ul>
+image: "img/carousel/template-mac.png"
+href: "faq"

data/carousel/multipurpose.yaml

@@ -0,0 +1,4 @@
+weight: 1
+title: "Multipurpose responsive theme"
+description: "<p>Business. Corporate. Agency.<br>Portfolio. Blog. E-commerce.</p>"
+image: "img/carousel/template-homepage.png"

data/clients/1.yaml

@@ -0,0 +1,3 @@
+name: "customer-1"
+image: "img/clients/customer-1.png"
+url: "http://www.customer1.com"

data/clients/2.yaml

@@ -0,0 +1,3 @@
+name: "customer-2"
+image: "img/clients/customer-2.png"
+url: "http://www.customer2.com"

data/clients/3.yaml

@@ -0,0 +1,3 @@
+name: "customer-3"
+image: "img/clients/customer-3.png"
+url: "http://www.customer3.com"

data/clients/4.yaml

@@ -0,0 +1,3 @@
+name: "customer-4"
+image: "img/clients/customer-4.png"
+url: "http://www.customer4.com"

data/clients/5.yaml

@@ -0,0 +1,3 @@
+name: "customer-5"
+image: "img/clients/customer-5.png"
+url: "http://www.customer5.com"

data/clients/6.yaml

@@ -0,0 +1,3 @@
+name: "customer-6"
+image: "img/clients/customer-6.png"
+url: "http://www.customer6.com"

data/features/consulting.yaml

@@ -0,0 +1,5 @@
+weight: 4
+name: "Consulting"
+icon: "fas fa-lightbulb"
+url: ""
+description: "Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring."

data/features/email.yaml

@@ -0,0 +1,5 @@
+weight: 5
+name: "Email Marketing"
+icon: "far fa-envelope"
+url: ""
+description: "Advantage old had otherwise sincerity dependent additions. It in adapted natural hastily is justice. Six draw you him full not mean evil."

data/features/print.yaml

@@ -0,0 +1,5 @@
+weight: 2
+name: "Print"
+icon: "fas fa-print"
+url: ""
+description: "Advantage old had otherwise sincerity dependent additions. It in adapted natural hastily is justice. Six draw you him full not mean evil."

data/features/seo.yaml

@@ -0,0 +1,5 @@
+weight: 3
+name: "SEO and SEM"
+icon: "fas fa-globe"
+url: ""
+description: "Am terminated it excellence invitation projection as. She graceful shy believed distance use nay. Lively is people so basket ladies window expect."

data/features/uiux.yaml

@@ -0,0 +1,5 @@
+weight: 6
+name: "UI/UX"
+icon: "fas fa-user"
+url: ""
+description: "Am terminated it excellence invitation projection as. She graceful shy believed distance use nay. Lively is people so basket ladies window expect."

data/features/webdesign.yaml

@@ -0,0 +1,5 @@
+weight: 1
+name: "Webdesign"
+icon: "fas fa-desktop"
+url: ""
+description: "Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring."

data/testimonials/1.yaml

@@ -0,0 +1,4 @@
+text: "One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections."
+name: "John McIntyre"
+position: "CEO, TransTech"
+avatar: "img/testimonials/person-1.jpg"

data/testimonials/2.yaml

@@ -0,0 +1,4 @@
+text: "One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections."
+name: "John McIntyre"
+position: "CEO, TransTech"
+avatar: "img/testimonials/person-2.jpg"

data/testimonials/3.yaml

@@ -0,0 +1,4 @@
+text: "One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections."
+name: "John McIntyre"
+position: "CEO, TransTech"
+avatar: "img/testimonials/person-3.png"

data/testimonials/4.yaml

@@ -0,0 +1,4 @@
+text: "One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections."
+name: "John McIntyre"
+position: "CEO, TransTech"
+avatar: "img/testimonials/person-4.jpg"

data/testimonials/5.yaml

@@ -0,0 +1,4 @@
+text: "One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections."
+name: "John McIntyre"
+position: "CEO, TransTech"
+avatar: "img/testimonials/person-1.jpg"

layouts/_default/baseof.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<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">
+  {{ partial "headers.html" . }}
+</head>
+
+<body>
+  <div id="all">
+    {{ partial "nav.html" . }}
+    <div class="reserve d-flex flex-column">
+      <a href="https://maac.io/1Pife" target="_blank">
+        <img src="/img/bhousev2_img/LINE-CONTACT.png" alt="">
+      </a>
+      <!-- <a href="/store/">
+        <img src="/img/home/store-reserve.png" alt="">
+      </a> -->
+    </div>
+    {{ block "main" . }}
+    {{ end }}
+    {{ partial "footer.html" . }}
+  </div>
+  {{ partial "scripts.html" . }}
+
+</body>
+
+</html>

layouts/_default/single.html

@@ -0,0 +1,5 @@
+{{ define "main" }}
+<div>
+    {{ .Content }}
+</div>
+{{ end }}

layouts/about_bhouse/about_bhouse.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body>
+  {{ partial "nav.html" . }}
+  <section class="bhouseweb_loc_banner">
+    <img src="/img/banner/bn_concept@2x.webp" class="banner-img card-img" alt="...">
+  </section>
+  <div class="brand_content">
+    <section class="brand_sec01">
+      <img class="img-fluid" src="/img/bn_concept_pic@2x.webp" alt="">
+    </section>
+  </div>
+  <div class="brand_content">
+    <section class="brand_sec02">
+      <h2 class="bhouse_title">起源 – 因為有人，所以有家。</h2>
+      <div class="brand_sec02_content">
+        <p>「我一直很想要有一個家，很想要一個屬於自己的家。」-創辦人 James。這是當時來自內心最真實且深層的渴望。</p>
+        <p class="my-4">但，成家真的不容易，只有在自己真的成家，才會知道成家的美好與哀傷，那是夢想最現實的模樣。</p>
+        <p>所以，我們創辦《小寶優居》伴隨每個成家過程，那不僅僅只是設計到完工，我們希望與你一起走過成家過程，讓你有美好的成家體驗。</p>
+      </div>
+      <h2 class="bhouse_title">理念 – 讓每一個人的成家更美好。</h2>
+      <div class="brand_sec02_content">
+        <p>小寶優居我們深信『因為有人，所以有家』，秉持讓每一個人的成家更美好，我們有四個最主要的核心『以人為本、信任、健康、安全』。</p>
+      </div>
+      <div class="brand_sec02_content">
+        <h3 class="bhouse_subtitle">『以人為本』</h3>
+        <p>從你與家人的生活出發，從生活習慣打造實用面的設計；從家人喜歡的設計風格，透過不同風格的文明與歷史，創造屬於你們家的風格。</p>
+      </div>
+      <div class="brand_sec02_content">
+        <h3 class="bhouse_subtitle">『信任』</h3>
+        <p>『在非常不透明的現代市場，我們堅持設計流程，施工流程與報價方式透明化，讓每個第一次成家的人，清楚知道「好的」標準是什麼。</p>
+      </div>
+      <div class="brand_sec02_content">
+        <h3 class="bhouse_subtitle">『健康』</h3>
+        <p>我們堅持使用無毒、極低甲醛板料與裝修建材，希望打造一個低重金屬、低甲醛、低TVOC的健康生活空間，給家人一個真正健康的家，也給裝修師傅一個健康的施工空間。</p>
+      </div>
+      <div class="brand_sec02_content">
+        <h3 class="bhouse_subtitle">『安全』</h3>
+        <p>規範裝修的施作工法與工序，重視商品的結構測試檢驗，提供客人一個安全的居住環境，也給裝修師傅一個安全的施工環境。</p>
+      </div>
+      <div class="brand_sec02_content">
+        <p>我們相信，成家的結局，不需要犧牲與忍耐，而是美好的笑容。
+          <br>這是我們會一直做的事，讓每個想成家的人，都可以美好成家。
+        </p>
+      </div>
+      <div class="bhouse_subtitle mb-4 text-center"><b style="font-size: 1.3rem;">～美好未來，從陪伴開始～</b></div>
+    </section>
+  </div>
+  {{ partial "footer.html" . }}
+  {{ partial "scripts.html" . }}
+</body>
+
+</html>

layouts/about_mattress/about_mattress.html

@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body style="overflow-x: hidden;">
+
+  {{ partial "nav.html" . }}
+
+  <div class="furniture-design">
+    <section class="bhouseweb_loc_banner">
+      <img src="/img/banner/bn_product@2x.png" class="banner-img card-img" alt="...">
+    </section>
+    <!-- 手機版型 -->
+    <div class="mobile-tab d-block d-md-none">
+      <div class="row">
+        <div class="col-4 m-auto all-tab">
+          <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
+        </div>
+      </div>
+      <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
+        <div class="row w-100">
+          <div class="col-4">
+            <li class="nav-item tab-item" role="presentation">
+              <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
+            </li>
+          </div>
+          <div class="col-4">
+            <li class="nav-item tab-item" role="presentation">
+              <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
+            </li>
+          </div>
+          <div class="col-4">
+            <li class="nav-item tab-item" role="presentation">
+              <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
+            </li>
+          </div>
+        </div>
+      </ul>
+    </div>
+    <!-- 電腦版型 -->
+    <div class="d-none d-md-block">
+      <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
+        <li class="nav-item" role="presentation">
+          <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/about_mattress" id="mattress-tab" class="nav-link design-border">關於床墊</a>
+        </li>
+      </ul>
+    </div>
+    <!-- 關於床墊 -->
+    <div class="bhouseweb_loc_content" id="mattress">
+      <div class="container" style="margin-top: 50px;">
+        <div class="row mb-5 align-items-center b-bottom">
+          <div class="col-12">
+            <h5>小寶優居 x 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/sleep.gif" alt="">
+          </div>
+        </div>
+        <div class="bg-text">
+          <p>住在自己喜歡的房子，睡在一張舒服的床，<br>
+            這是小寶優居和ZZ想給你的最棒成家禮！</p>
+        </div>
+        <section class="mattress-top">
+          <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 flex-column" 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" . }}
+  {{ partial "scripts.html" . }}
+
+</body>
+
+</html>

layouts/blog/list.html

@@ -0,0 +1,310 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body style="overflow-x: hidden;">
+  {{ partial "nav.html" . }}
+  <div class="container-fluid blog-categories p-0">
+    <section class="bhouseweb_loc_banner">
+      <img src="/img/banner/bn_blog@2x.webp" 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;);"
+        aria-label="breadcrumb">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item"><a href="/"><img src="/img/bt_footer_index@2x.png" width="30px" alt=""
+                style="margin-bottom: 5px;"></a></li>
+          <li class="breadcrumb-item"><a href="/blog_main/">成家知識專欄</a></li>
+          <li class="breadcrumb-item active" aria-current="page" id="category_name">預售屋客變</li>
+        </ol>
+      </nav>
+      <div class="d-flex flex-column align-items-start">
+        <!-- 暫時隱藏標籤 -->
+        <!-- <div class="link-list">
+          <button><a href="">客廳</a></button>
+          <button><a href="">主臥</a></button>
+          <button><a href="">客房</a></button>
+          <button><a href="">客廳</a></button>
+          <button><a href="">主臥</a></button>
+          <button><a href="">客房</a></button>
+        </div> -->
+
+        <div class="bhouseweb_loc_search_box">
+          <form class="bhouseweb_search_form d-flex">
+            <div class="bhouseweb_search_img" style="margin-right: 1vw;">
+              <img src="/img/icon_search@2x.png" alt="">
+            </div>
+            <input id="blog_search" class="me-md-2" type="search" placeholder="搜尋「預算」「電視牆設計」「天花板」「電器櫃」「沙發」"
+              aria-label="Search">
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <div style="border-top: 1px solid #969696;"></div>
+
+    <div class="article" id="articleList">
+
+      <div id="blog-loading" class="d-flex justify-content-center mb-5">
+        <div class="spinner-border text-success" role="status" style="color: rgba(128, 143, 76, 1) !important;">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+      </div>
+
+      {{ $paginator := .Paginate .Data.Pages }}
+      {{ range $paginator.Pages }}
+      <!-- <div class="article-item" id="defaultArticle">
+        <a href="{{ .RelPermalink }}">
+          <img src="{{ .Params.Image | relURL }}" alt="">
+        </a>
+        <div class="d-flex flex-column">
+          <a href="{{ .RelPermalink }}">
+            <h4>{{ .Title }}</h4>
+          </a>
+          <p class="mt-auto my-2 fw-bold">{{ .PublishDate.Format "2006-01-02" }}</p>
+          <a href="{{ .RelPermalink }}" class="description">
+            <p style="letter-spacing: 1px;">{{.Params.description }}</p>
+          </a>
+        </div>
+      </div> -->
+      {{ end }}
+    </div>
+    <a class="nav-link article_readMore" href="/blog_main/">＜ 回到成家知識庫</a>
+    <div class="reserve d-flex flex-column">
+      <a href="https://maac.io/1Pife" target="_blank">
+        <img src="/img/bhousev2_img/LINE-CONTACT.png" alt="">
+      </a>
+      <!-- <a href="/store/">
+        <img src="/img/home/store-reserve.png" alt="">
+      </a> -->
+    </div>
+  </div>
+
+  {{ partial "footer.html" . }}
+  {{ partial "scripts.html" . }}
+
+  <script>
+    window.onload = function () {
+      document.getElementById('blog_search').value = '';
+
+      // 取得 apiData
+      let contentsData = [];
+      // let category = localStorage.getItem('category');
+      // console.log('分類名稱', category);
+
+      // 取得網址參數
+      let getUrlString = location.href;
+      let url = new URL(getUrlString);
+      let tagsVal = url.searchParams.get('tags');
+      let category = "";
+
+      if (url.pathname === '/blog/') {
+        document.getElementById('category_name').style.display = 'none';
+      } else {
+        category = url.pathname.slice(6, -1);
+      }
+
+      // 麵包屑
+      if (tagsVal !== null) {
+        document.getElementById('category_name').style.display = 'block';
+        document.getElementById('category_name').textContent = tagsVal;
+      } else if (category !== null) {
+        document.getElementById('category_name').textContent = category;
+      } else {
+        document.getElementById('category_name').style.display = 'none';
+      }
+
+      (function getContentsData() {
+        // 線上版網址 https://bhouse3.ptt.cx:9002/api/
+        // 本地端網址 http://localhost:9001/api/
+        fetch('https://bhouse3.ptt.cx:9002/api/contents?url=/blog').then(res => res.json()).then(list => {
+          contentsData = list;
+          // contentsData.shift();
+          filterCategory();
+          // if (category !== null) {
+          //   filterCategory();
+          // }
+        })
+      })();
+
+      let matchContent = "";
+
+      // 分類篩選
+      function filterCategory() {
+        // 網址有參數
+        if (tagsVal !== null) {
+          contentsData.map(item => {
+            if (item.draft !== "true") {
+              if (item.blog_tag) {
+                if (item.blog_tag.includes(tagsVal)) {
+                  matchContent += `
+                <div class="article-item">
+                  <a href="${item.url}?tags=${tagsVal}">
+                    <img src="${item.image}" alt="">
+                  </a>
+                  <div class="d-flex flex-column">
+                    <a href="${item.url}?tags=${tagsVal}">
+                      <h4>${item.title}</h4>
+                    </a>
+                    <p class="mt-auto my-2 fw-bold">${item.date.substr(0, 10)}</p>
+                    <a href="${item.url}?tags=${tagsVal}" class="description">
+                      <p style="letter-spacing: 1px;">${item.description}</p>
+                    </a>
+                  </div>
+                </div>`
+                }
+              }
+            }
+          })
+        } else if (url.pathname === '/blog/') {
+          contentsData.map(item => {
+            if (item.draft !== "true") {
+              // 排除根目錄
+              if (item.url !== "/blog") {
+                matchContent += `
+              <div class="article-item">
+                <a href="${item.url}">
+                  <img src="${item.image}" alt="">
+                </a>
+                <div class="d-flex flex-column">
+                  <a href="${item.url}">
+                    <h4>${item.title}</h4>
+                  </a>
+                  <p class="mt-auto my-2 fw-bold">${item.date.substr(0, 10)}</p>
+                  <a href="${item.url}" class="description">
+                    <p style="letter-spacing: 1px;">${item.description}</p>
+                  </a>
+                </div>
+              </div>`
+              }
+            }
+          }
+          )
+        } else {
+          // 網址沒有參數
+          contentsData.map(item => {
+            if (item.draft !== "true") {
+              if (category !== null) {
+                if (item.categories) {
+                  if (item.categories.includes(category)) {
+                    matchContent += `
+                <div class="article-item">
+                  <a href="${item.url}">
+                    <img src="${item.image}" alt="">
+                  </a>
+                  <div class="d-flex flex-column">
+                    <a href="${item.url}">
+                      <h4>${item.title}</h4>
+                    </a>
+                    <p class="mt-auto my-2 fw-bold">${item.date.substr(0, 10)}</p>
+                    <a href="${item.url}" class="description">
+                      <p style="letter-spacing: 1px;">${item.description}</p>
+                    </a>
+                  </div>
+                </div>`
+                  }
+                }
+              } else {
+                matchContent += `
+              <div class="article-item">
+                <a href="${item.url}">
+                  <img src="${item.image}" alt="">
+                </a>
+                <div class="d-flex flex-column">
+                  <a href="${item.url}">
+                    <h4>${item.title}</h4>
+                  </a>
+                  <p class="mt-auto my-2 fw-bold">${item.date.substr(0, 10)}</p>
+                  <a href="${item.url}" class="description">
+                    <p style="letter-spacing: 1px;">${item.description}</p>
+                  </a>
+                </div>
+              </div>`
+              }
+            }
+
+          })
+        }
+
+        $('#blog-loading').addClass("blog_loading");
+        document.getElementById("articleList").innerHTML = matchContent;
+      }
+
+      // 增加延遲(待輸入完成後再進行搜尋)
+      function delay(fn, ms) {
+        let timer = 0
+        return function (...args) {
+          clearTimeout(timer)
+          timer = setTimeout(fn.bind(this, ...args), ms || 0)
+        }
+      }
+
+      // 搜尋
+      $('#blog_search').keyup(delay(function (e) {
+        // 搜尋全部文章需移除分類麵包屑
+        document.getElementById('category_name').style.display = 'none';
+        // 取得輸入框的值
+        let inputVal = $('#blog_search').val();
+        matchContent = "";
+        let draftItem = []; // 草稿 (draft: true)
+        let falseItem = []; // 不符合搜尋條件文章
+
+        contentsData.map((item, index) => {
+          // 搜尋特定分類文章
+          // if (item.categories) {
+          //   if (item.categories.includes(category)) {
+          // 搜尋所有分類文章
+          if (item.draft !== "true") {
+            if (item.url !== '/blog') {
+              if (item.title.includes(inputVal) || item.description.includes(inputVal) || item.content.includes(inputVal)) {
+                matchContent += `
+                <div class="article-item">
+                  <a href="${item.url}">
+                    <img src="${item.image}" alt="">
+                  </a>
+                  <div class="d-flex flex-column">
+                    <a href="${item.url}">
+                      <h4>${item.title}</h4>
+                    </a>
+                    <p class="mt-auto my-2 fw-bold">${item.date.substr(0, 10)}</p>
+                    <a href="${item.url}" class="description">
+                      <p style="letter-spacing: 1px;">${item.description}</p>
+                    </a>
+                  </div>
+                </div>`
+              } else {
+                falseItem.push(item);
+              }
+            }
+          } else {
+            draftItem.push(item); // 草稿
+          }
+
+          if (falseItem.length === (contentsData.length - draftItem.length) - 1) {
+            matchContent = `
+            <div class="alert d-flex align-items-center" role="alert" style="max-width: 300px;margin: 0 auto 25px;justify-content: center;">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" style="color: #808e4c;" viewBox="0 0 16 16" role="img" aria-label="Warning:">
+                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+              </svg>
+              <div>
+                找不到符合條件的文章
+              </div>
+            </div>
+            `;
+          }
+          //   }
+          // }
+        })
+        document.getElementById("articleList").innerHTML = matchContent;
+      }, 500));
+    }
+  </script>
+
+</body>
+
+</html>

layouts/blog/single.html

@@ -0,0 +1,166 @@
+{{ define "main" }}
+<div class="container-fluid blog_article p-0">
+  <section class="bhouseweb_loc_banner">
+    <img src="/img/banner/bn_blog@2x.webp" class="banner-img card-img" alt="...">
+  </section>
+  <div class="content">
+    <nav aria-label="breadcrumb">
+      <ol class="breadcrumb mb-4">
+        <li class="breadcrumb-item">
+          <a href="/">
+            <img src="/img/bt_footer_index@2x.png" style="width: 30px; margin: 0 0 5px;" alt="logo">
+          </a>
+        </li>
+        <li class="breadcrumb-item">
+          <a href="/blog_main/">成家知識專欄</a>
+        </li>
+        <li class="breadcrumb-item active" aria-current="page" id="category_name">{{ .Title }}</li>
+      </ol>
+    </nav>
+    <h1>{{ .Title }}</h1>
+    <div class="d-flex justify-content-between align-items-center">
+      <span>{{ .PublishDate.Format "2006-01-02" }}</span>
+      <div class="icon-box">
+        <!-- 網址動態載入 -->
+        <a href="" id="collection_icon_fb" target="_blank"><img src="/img/icon_fb@2x.png" alt=""></a>
+        <a href="" id="collection_icon_line" target="_blank"><img src="/img/icon_line@2x.png" alt=""></a>
+      </div>
+    </div>
+    <span class="line"></span>
+    <p>{{ .Params.introduction | safeHTML }}</p>
+    <br>
+    <div class="question-box">
+      <div>
+        <p>
+          本文目錄
+          <!-- {{ .Params.question_box_intro }} -->
+        </p>
+        {{ .TableOfContents }}
+      </div>
+    </div>
+
+    <div class="blog-content">
+      {{ .Content }}
+    </div>
+
+    <div class="d-flex justify-content-between link-box">
+      <div class="d-flex flex-wrap align-items-center link-list">
+        <p class="m-0">相關標籤：</p>
+        <span>
+          {{ range .Params.blog_tag }}
+          <a href="/blog?tags={{ . }}">{{ . }}</a>
+        </span>
+        {{ end }}
+      </div>
+      <div class="icon-box">
+        <a href="" id="collection_icon_fb" target="_blank"><img src="/img/icon_fb@2x.png" alt=""></a>
+        <a href="" id="collection_icon_line" target="_blank"><img src="/img/icon_line@2x.png" alt=""></a>
+      </div>
+    </div>
+
+    <a class="nav-link" onclick="previousPage()">
+      <p class="readMore text-center">
+        <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到成家知識庫
+      </p>
+    </a>
+
+    <ul class="read-more-list"></ul>
+
+    <!-- <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> -->
+  </div>
+</div>
+</div>
+
+<script>
+  function previousPage() {
+    history.back();
+  }
+
+  // 延伸閱讀清單
+  (function getContentsData() {
+    // 線上版網址 https://bhouse3.ptt.cx:9002/api/
+    // 本地端網址 http://localhost:9001/api/
+    fetch('https://bhouse3.ptt.cx:9002/api/contents?url=/blog').then(res => res.json()).then(list => {
+      let title = document.querySelector('h1').innerHTML;
+      let lnkList = [];
+      // console.log('list', list);
+      list.map(e => {
+        // 找出符合標題的文章
+        if (`${e.url}\/` === window.location.pathname) {
+          lnkList = JSON.parse(e.readmore_lnk);
+          // let ttlList = JSON.parse(e.readmore_ttl.replace("\/", ""));
+        }
+      });
+
+      let content = [
+        '<li>你可能會喜歡的，延伸閱讀點擊標題，看更多設計專欄！</li>',
+      ];
+
+      list.map(item => {
+        for (let i = 0; i < lnkList.length; i++) {
+          const link = lnkList[i];
+          if (link == `${item.url}\/`) {
+            /* 分類英文名稱 :
+               預售屋客變 pre-sale-house-design-change
+               驗收交屋 house-acceptance-check
+               預算準備 budget-planning
+               認識裝修裝潢 about-interior-decoration
+               空間計畫 floor-planning
+               居家風格 decoration-style
+               家具家電 furnitures-appliances
+               驗收入住 design-acceptanc-and-move-in */
+
+            let categorieZh = "";
+
+            if (item.categories.includes("pre-sale-house-design-change")) {
+              categorieZh = "預售屋客變";
+            } else if (item.categories.includes("house-acceptance-check")) {
+              categorieZh = "驗收交屋";
+            } else if (item.categories.includes("budget-planning")) {
+              categorieZh = "預算準備";
+            } else if (item.categories.includes("about-interior-decoration")) {
+              categorieZh = "認識裝修裝潢";
+            } else if (item.categories.includes("floor-planning")) {
+              categorieZh = "空間計畫";
+            } else if (item.categories.includes("decoration-style")) {
+              categorieZh = "居家風格";
+            } else if (item.categories.includes("furnitures-appliances")) {
+              categorieZh = "家具家電";
+            } else if (item.categories.includes("design-acceptanc-and-move-in")) {
+              categorieZh = "驗收入住";
+            }
+
+            let dom = `
+            <li>
+              <a href="https://bhouse.com.tw/${item.url}">【${categorieZh}】 ${item.title}</a>
+            </li>`;
+
+            content.push(dom);
+          }
+        }
+        document.querySelector('.read-more-list').innerHTML = content.join(" ");
+      })
+
+      let moreList = document.querySelector('.read-more-list');
+      if (moreList.children.length === 1) {
+        moreList.style.display = 'none';
+      }
+    })
+  })();
+
+  let contentList = document.getElementById("TableOfContents").getElementsByTagName("li");
+  for (let i = 0; i < contentList.length; i++) {
+    const element = contentList[i];
+    if (element.childNodes.length == 0) {
+      element.style.display = 'none';
+    }
+  }
+</script>
+{{ end }}

layouts/blog_main/list.html

@@ -0,0 +1,1800 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body style="overflow-x: hidden;">
+  {{ partial "nav.html" . }}
+  <div class="container-fluid blog-categories blog-main p-0">
+    <section class="bhouseweb_loc_banner">
+      <img src="/img/banner/bn_blog@2x.webp" class="banner-img card-img" alt="...">
+    </section>
+
+    <!-- 分類英文名稱 :
+    預售屋客變 pre-sale-house-design-change
+    驗收交屋 house-acceptance-check
+    預算準備 budget-planning
+    認識裝修裝潢 about-interior-decoration
+    空間計畫 floor-planning
+    居家風格 decoration-style
+    家具家電 furnitures-appliances
+    驗收入住 design-acceptanc-and-move-in -->
+
+    <!-- 電腦版 -->
+    <div class="d-none d-md-block">
+      <div class="container">
+        <section class="text-box">
+          <p class="title" data-aos="fade-in" data-aos-duration="1000">買了房然後呢？</p>
+          <span class="underline"></span>
+          <div data-aos="fade-in" data-aos-duration="2000">
+            <p>
+              最完整的成家知識地圖，一步步指導你從零開始完成 住宅設計、裝修裝潢、家具規劃，陪你美好成家！
+            </p>
+            <img class="left_img" src="/img/blog/dot_left.png" alt="">
+            <img class="right_img" src="/img/blog/dot_right.png" alt="">
+          </div>
+        </section>
+      </div>
+
+      <div class="process">
+        <img class="house_img" src="/img/blog/house.png" alt="" data-aos="fade-in" data-aos-duration="3000">
+        <img class="star_green" src="/img/blog/star_green.png" alt="" data-aos="fade-in" data-aos-duration="3000">
+        <img class="star_yellow" src="/img/blog/star_yellow.png" alt="" data-aos="fade-in" data-aos-duration="3000">
+        <img class="ruler_img" src="/img/blog/ruler2.png" alt="" data-aos="fade-in" data-aos-duration="3000">
+        <img class="line_01" src="/img/blog/Vector01.png" alt="">
+
+        <div>
+          <section style="position: relative;">
+            <img src="/img/blog/icon/step01.png" alt="" data-gt-target="#blogTag_01" data-gt-duration="500"
+              data-gt-offset="100">
+            <span>
+              <img src="/img/blog/number/01.svg" alt="" style="width: 35px;">
+            </span>
+            <h4>預售屋客變</h4>
+          </section>
+          <span class="dot"></span>
+          <section>
+            <img src="/img/blog/icon/step02.png" alt="" data-gt-target="#blogTag_02" data-gt-duration="500"
+              data-gt-offset="180">
+            <span>
+              <img src="/img/blog/number/02.svg" alt="">
+            </span>
+            <h4>驗收交屋</h4>
+          </section>
+
+          <section>
+            <img src="/img/blog/icon/step03.png" alt="" data-gt-target="#blogTag_03" data-gt-duration="500"
+              data-gt-offset="180">
+            <span>
+              <img src="/img/blog/number/03.svg" alt="">
+            </span>
+            <h4>預算準備</h4>
+          </section>
+
+          <section>
+            <img src="/img/blog/icon/step04.png" alt="" data-gt-target="#blogTag_04" data-gt-duration="500"
+              data-gt-offset="180">
+            <span>
+              <img src="/img/blog/number/04.svg" alt="">
+            </span>
+            <h4>認識裝修裝潢</h4>
+          </section>
+
+          <section style="margin-right: 0; position: relative;">
+            <img src="/img/blog/icon/step05.png" alt="" data-gt-target="#blogTag_05" data-gt-duration="500"
+              data-gt-offset="180">
+            <span>
+              <img src="/img/blog/number/05.svg" alt="">
+            </span>
+            <h4>空間計畫</h4>
+            <img class="line_02" src="/img/blog/Vector02.png" alt="">
+          </section>
+        </div>
+
+        <div>
+          <section>
+            <img src="/img/blog/icon/step06.png" alt="" data-gt-target="#blogTag_06" data-gt-duration="500"
+              data-gt-offset="180">
+            <span>
+              <img src="/img/blog/number/06.svg" alt="">
+            </span>
+            <h4>居家風格</h4>
+          </section>
+          <section>
+            <img src="/img/blog/icon/step07.png" alt="" data-gt-target="#blogTag_07" data-gt-duration="500"
+              data-gt-offset="180">
+            <span>
+              <img src="/img/blog/number/07.svg" alt="">
+            </span>
+            <h4>家具家電</h4>
+          </section>
+          <section style="margin-right: 0;">
+            <img src="/img/blog/icon/step08.png" alt="" data-gt-target="#blogTag_08" data-gt-duration="500"
+              data-gt-offset="180">
+            <span>
+              <img src="/img/blog/number/08.svg" alt="">
+            </span>
+            <h4>驗收入住</h4>
+          </section>
+        </div>
+      </div>
+
+      <div class="article_list">
+        <div class="container-fluid article_item">
+          <!-- 01 -->
+          <div class="row gx-5 align-items-center" id="blogTag_01">
+            <div class="col-4" data-aos="fade-in" data-aos-duration="1000">
+              <section class="img_box">
+                <img src="/img/blog/step1.png" alt="">
+                <img src="/img/blog/number/01.png" alt="">
+              </section>
+            </div>
+            <div class="col-8">
+              <section class="text_box">
+                <h4>
+                  <span>第 1 步：</span>預售屋客變
+                </h4>
+
+                <ul>
+                  {{ $t := $.Site.GetPage "/blog" }}
+                  {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "pre-sale-house-design-change") }}
+                  <li>
+                    <div class="blog_img">
+                      <a href="{{ .Params.url }}">
+                        <span>
+                          <img src="{{ .Params.image }}" alt="">
+                        </span>
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      </a>
+                    </div>
+                    <div class="blog_text">
+                      <h5>
+                        <a href="{{ .Params.url }}">{{ .Title }}</a>
+                        <span></span>
+                      </h5>
+                      <a href="{{ .Params.url }}">
+                        <p>
+                          {{ .Params.description }}
+                        </p>
+                      </a>
+                    </div>
+                  </li>
+                  <li>
+                    <span>
+                      <img src="/img/blog/line.png" alt="">
+                    </span>
+                  </li>
+                  {{ end }}
+                </ul>
+
+                <!-- 如有三篇文章需顯示按鈕 -->
+                {{ $t := $.Site.GetPage "/blog" }}
+                {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "pre-sale-house-design-change") }}
+                {{ if (eq $index 2) }}
+                <div class="btn_box">
+
+                  <!-- 網址加上分類名稱 -->
+                  {{- if isset site.Taxonomies "categories" }}
+                  {{- if not (eq (len site.Taxonomies.categories) 0) }}
+                  {{- range $name, $items := site.Taxonomies.categories }}
+                  {{ if eq $name "pre-sale-house-design-change" }}
+
+                  <a href="{{ `blog/` | relLangURL }}{{ $name | safeHTML | lower }}/" class="read_more"
+                    onclick="getCategories('{{ $name }}')" data-vars-event="accuhit" data-vars-event-type="5"
+                    data-vars-event-col1="{{ $name }}" data-vars-event-col2="篩選_官網設計專欄{{ $name }}">
+                    <p>閱讀更多</p>
+                    <img src="/img/blog/readmore.svg" alt="">
+                  </a>
+
+                  {{ end }}
+                  {{- end }}
+                  {{- end }}
+                  {{- end }}
+
+                  <!-- <a href="/blog/" class="read_more" onclick="getCategories('{{ .Params.categories }}')">
+                    <p>閱讀更多</p>
+                    <img src="/img/blog/readmore.svg" alt="">
+                  </a> -->
+                  <span></span>
+                </div>
+                {{ end }}
+                {{ end }}
+
+              </section>
+            </div>
+          </div>
+
+          <div class="blog_divider">
+            <div class="bg_img"></div>
+            <img src="/img/blog/line_first.png" alt="" class="line_right" style="top: -282px; height: auto;">
+            <img src="/img/blog/line_left.png" alt="" class="line_left">
+            <img src="/img/blog/tree1.png" alt="" class="logo_01">
+          </div>
+
+          <!-- 02 -->
+          <div class="row gx-5 align-items-center" id="blogTag_02">
+            <div class="col-8">
+              <section class="text_box">
+                <h4>
+                  <span>第 2 步：</span>驗收交屋
+                </h4>
+                <ul>
+                  {{ $t := $.Site.GetPage "/blog" }}
+                  {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "house-acceptance-check") }}
+                  <li>
+                    <div class="blog_img">
+                      <a href="{{ .Params.url }}">
+                        <span>
+                          <img src="{{ .Params.image }}" alt="">
+                        </span>
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      </a>
+                    </div>
+                    <div class="blog_text">
+                      <h5>
+                        <a href="{{ .Params.url }}">{{ .Title }}</a>
+                        <span></span>
+                      </h5>
+                      <a href="{{ .Params.url }}">
+                        <p>
+                          {{ .Params.description }}
+                        </p>
+                      </a>
+                    </div>
+                  </li>
+                  <li>
+                    <span>
+                      <img src="/img/blog/line.png" alt="">
+                    </span>
+                  </li>
+                  {{ end }}
+                </ul>
+
+                {{ $t := $.Site.GetPage "/blog" }}
+                {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "house-acceptance-check") }}
+                {{ if (eq $index 2) }}
+                <div class="btn_box">
+
+                  {{- if isset site.Taxonomies "categories" }}
+                  {{- if not (eq (len site.Taxonomies.categories) 0) }}
+                  {{- range $name, $items := site.Taxonomies.categories }}
+                  {{ if eq $name "house-acceptance-check" }}
+
+                  <a href="{{ `blog/` | relLangURL }}{{ $name | safeHTML | lower }}/" class="read_more"
+                    onclick="getCategories('{{ $name }}')" data-vars-event="accuhit" data-vars-event-type="5"
+                    data-vars-event-col1="{{ $name }}" data-vars-event-col2="篩選_官網設計專欄{{ $name }}">
+                    <p>閱讀更多</p>
+                    <img src="/img/blog/readmore.svg" alt="">
+                  </a>
+
+                  {{ end }}
+                  {{- end }}
+                  {{- end }}
+                  {{- end }}
+
+                  <!-- <a href="/blog/" class="read_more" onclick="getCategories('{{ .Params.categories }}')">
+                    <p>閱讀更多</p>
+                    <img src="/img/blog/readmore.svg" alt="">
+                  </a> -->
+                  <span></span>
+                </div>
+                {{ end }}
+                {{ end }}
+              </section>
+            </div>
+            <div class="col-4" data-aos="fade-in" data-aos-duration="1000">
+              <section class="img_box">
+                <img src="/img/blog/step2.png" alt="">
+                <img src="/img/blog/number/02.png" alt="">
+              </section>
+            </div>
+          </div>
+
+          <div class="blog_divider">
+            <div class="bg_img"></div>
+            <!-- <img src="/img/blog/Vector.png" alt=""> -->
+            <img src="/img/blog/line_right.png" alt="" class="line_right">
+          </div>
+
+          <!-- 03 -->
+          <div class="row gx-5 align-items-center" id="blogTag_03">
+            <div class="col-4" data-aos="fade-in" data-aos-duration="1000">
+              <section class="img_box">
+                <img src="/img/blog/step3.png" alt="">
+                <img src="/img/blog/number/03.png" alt="">
+              </section>
+            </div>
+            <div class="col-8">
+              <section class="text_box">
+                <h4>
+                  <span>第 3 步：</span>預算準備
+                </h4>
+                <ul>
+                  {{ $t := $.Site.GetPage "/blog" }}
+                  {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "budget-planning") }}
+                  <li>
+                    <div class="blog_img">
+                      <a href="{{ .Params.url }}">
+                        <span>
+                          <img src="{{ .Params.image }}" alt="">
+                        </span>
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      </a>
+                    </div>
+                    <div class="blog_text">
+                      <h5>
+                        <a href="{{ .Params.url }}">{{ .Title }}</a>
+                        <span></span>
+                      </h5>
+                      <a href="{{ .Params.url }}">
+                        <p>
+                          {{ .Params.description }}
+                        </p>
+                      </a>
+                    </div>
+                  </li>
+                  <li>
+                    <span>
+                      <img src="/img/blog/line.png" alt="">
+                    </span>
+                  </li>
+                  {{ end }}
+                </ul>
+
+                {{ $t := $.Site.GetPage "/blog" }}
+                {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "budget-planning") }}
+                {{ if (eq $index 2) }}
+
+                <div class="btn_box">
+
+                  {{- if isset site.Taxonomies "categories" }}
+                  {{- if not (eq (len site.Taxonomies.categories) 0) }}
+                  {{- range $name, $items := site.Taxonomies.categories }}
+                  {{ if eq $name "budget-planning" }}
+
+                  <a href="{{ `blog/` | relLangURL }}{{ $name | safeHTML | lower }}/" class="read_more"
+                    onclick="getCategories('{{ $name }}')" data-vars-event="accuhit" data-vars-event-type="5"
+                    data-vars-event-col1="{{ $name }}" data-vars-event-col2="篩選_官網設計專欄{{ $name }}">
+                    <p>閱讀更多</p>
+                    <img src="/img/blog/readmore.svg" alt="">
+                  </a>
+
+                  {{ end }}
+                  {{- end }}
+                  {{- end }}
+                  {{- end }}
+
+                  <!-- <a href="/blog/{{ .Params.categories }}" class="read_more"
+                    onclick="getCategories('{{ .Params.categories }}')">
+                    <p>閱讀更多</p>
+                    <img src="/img/blog/readmore.svg" alt="">
+                  </a> -->
+                  <span></span>
+                </div>
+                {{ end }}
+                {{ end }}
+              </section>
+            </div>
+          </div>
+
+          <div class="blog_divider" style="margin-top: -1.3rem;">
+            <div class="bg_img"></div>
+            <!-- <img src="/img/blog/Vector.png" alt=""> -->
+            <img src="/img/blog/line_left.png" alt="" class="line_left">
+            <img src="/img/blog/tree2.png" alt="" class="logo_01">
+          </div>
+
+          <!-- 04 -->
+          <div class="row gx-5 align-items-center" id="blogTag_04">
+            <div class="col-8">
+              <section class="text_box">
+                <h4>
+                  <span>第 4 步：</span>認識裝修裝潢
+                </h4>
+                <ul>
+                  {{ $t := $.Site.GetPage "/blog" }}
+                  {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "about-interior-decoration") }}
+                  <li>
+                    <div class="blog_img">
+                      <a href="{{ .Params.url }}">
+                        <span>
+                          <img src="{{ .Params.image }}" alt="">
+                        </span>
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      </a>
+                    </div>
+                    <div class="blog_text">
+                      <h5>
+                        <a href="{{ .Params.url }}">{{ .Title }}</a>
+                        <span></span>
+                      </h5>
+                      <a href="{{ .Params.url }}">
+                        <p>
+                          {{ .Params.description }}
+                        </p>
+                      </a>
+                    </div>
+                  </li>
+                  <li>
+                    <span>
+                      <img src="/img/blog/line.png" alt="">
+                    </span>
+                  </li>
+                  {{ end }}
+                </ul>
+
+                {{ $t := $.Site.GetPage "/blog" }}
+                {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "about-interior-decoration") }}
+                {{ if (eq $index 2) }}
+                <div class="btn_box">
+
+                  {{- if isset site.Taxonomies "categories" }}
+                  {{- if not (eq (len site.Taxonomies.categories) 0) }}
+                  {{- range $name, $items := site.Taxonomies.categories }}
+                  {{ if eq $name "about-interior-decoration" }}
+
+                  <a href="{{ `blog/` | relLangURL }}{{ $name | safeHTML | lower }}/" class="read_more"
+                    onclick="getCategories('{{ $name }}')" data-vars-event="accuhit" data-vars-event-type="5"
+                    data-vars-event-col1="{{ $name }}" data-vars-event-col2="篩選_官網設計專欄{{ $name }}">
+                    <p>閱讀更多</p>
+                    <img src="/img/blog/readmore.svg" alt="">
+                  </a>
+
+                  {{ end }}
+                  {{- end }}
+                  {{- end }}
+                  {{- end }}
+
+                  <!-- <a href="/blog/" class="read_more" onclick="getCategories('{{ .Params.categories }}')">
+                    <p>閱讀更多</p>
+                    <img src="/img/blog/readmore.svg" alt="">
+                  </a> -->
+                  <span></span>
+                </div>
+                {{ end }}
+                {{ end }}
+              </section>
+            </div>
+            <div class="col-4" data-aos="fade-in" data-aos-duration="1000">
+              <section class="img_box">
+                <img src="/img/blog/step4.png" alt="">
+                <img src="/img/blog/number/04.png" alt="">
+              </section>
+            </div>
+          </div>
+
+          <div class="blog_divider">
+            <div class="bg_img"></div>
+            <!-- <img src="/img/blog/Vector.png" alt=""> -->
+            <img src="/img/blog/line_right.png" alt="" class="line_right">
+            <img src="/img/blog/search.png" alt="" class="logo_02">
+          </div>
+
+          <!-- 05 -->
+          <div class="row gx-5 align-items-center" id="blogTag_05">
+            <div class="col-4" data-aos="fade-in" data-aos-duration="1000">
+              <section class="img_box">
+                <img src="/img/blog/step5.png" alt="">
+                <img src="/img/blog/number/05.png" style="top: -40px;" alt="">
+              </section>
+            </div>
+            <div class="col-8">
+              <section class="text_box">
+                <h4>
+                  <span>第 5 步：</span>空間計畫
+                </h4>
+                <ul>
+                  {{ $t := $.Site.GetPage "/blog" }}
+                  {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "floor-planning") }}
+                  <li>
+                    <div class="blog_img">
+                      <a href="{{ .Params.url }}">
+                        <span>
+                          <img src="{{ .Params.image }}" alt="">
+                        </span>
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      </a>
+                    </div>
+                    <div class="blog_text">
+                      <h5>
+                        <a href="{{ .Params.url }}">{{ .Title }}</a>
+                        <span></span>
+                      </h5>
+                      <a href="{{ .Params.url }}">
+                        <p>
+                          {{ .Params.description }}
+                        </p>
+                      </a>
+                    </div>
+                  </li>
+                  <li>
+                    <span>
+                      <img src="/img/blog/line.png" alt="">
+                    </span>
+                  </li>
+                  {{ end }}
+                </ul>
+
+                {{ $t := $.Site.GetPage "/blog" }}
+                {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "floor-planning") }}
+                {{ if (eq $index 2) }}
+                <div class="btn_box">
+
+                  {{- if isset site.Taxonomies "categories" }}
+                  {{- if not (eq (len site.Taxonomies.categories) 0) }}
+                  {{- range $name, $items := site.Taxonomies.categories }}
+                  {{ if eq $name "floor-planning" }}
+
+                  <a href="{{ `blog/` | relLangURL }}{{ $name | safeHTML | lower }}/" class="read_more"
+                    onclick="getCategories('{{ $name }}')" data-vars-event="accuhit" data-vars-event-type="5"
+                    data-vars-event-col1="{{ $name }}" data-vars-event-col2="篩選_官網設計專欄{{ $name }}">
+                    <p>閱讀更多</p>
+                    <img src="/img/blog/readmore.svg" alt="">
+                  </a>
+
+                  {{ end }}
+                  {{- end }}
+                  {{- end }}
+                  {{- end }}
+
+                  <!-- <a href="/blog/" class="read_more" onclick="getCategories('{{ .Params.categories }}')">
+                    <p>閱讀更多</p>
+                    <img src="/img/blog/readmore.svg" alt="">
+                  </a> -->
+                  <span></span>
+                </div>
+                {{ end }}
+                {{ end }}
+              </section>
+            </div>
+          </div>
+
+          <div class="blog_divider" style="margin-top: -1.3rem;">
+            <div class="bg_img"></div>
+            <!-- <img src="/img/blog/Vector.png" alt=""> -->
+            <img src="/img/blog/line_left.png" alt="" class="line_left">
+            <img src="/img/blog/tree3.png" alt="" class="logo_01">
+          </div>
+
+          <!-- 06 -->
+          <div class="row gx-5 align-items-center" id="blogTag_06">
+            <div class="col-8">
+              <section class="text_box">
+                <h4>
+                  <span>第 6 步：</span>居家風格
+                </h4>
+                <ul>
+                  {{ $t := $.Site.GetPage "/blog" }}
+                  {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "decoration-style") }}
+                  <li>
+                    <div class="blog_img">
+                      <a href="{{ .Params.url }}">
+                        <span>
+                          <img src="{{ .Params.image }}" alt="">
+                        </span>
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      </a>
+                    </div>
+                    <div class="blog_text">
+                      <h5>
+                        <a href="{{ .Params.url }}">{{ .Title }}</a>
+                        <span></span>
+                      </h5>
+                      <a href="{{ .Params.url }}">
+                        <p>
+                          {{ .Params.description }}
+                        </p>
+                      </a>
+                    </div>
+                  </li>
+                  <li>
+                    <span>
+                      <img src="/img/blog/line.png" alt="">
+                    </span>
+                  </li>
+                  {{ end }}
+                </ul>
+
+                {{ $t := $.Site.GetPage "/blog" }}
+                {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "decoration-style") }}
+                {{ if (eq $index 2) }}
+                <div class="btn_box">
+
+                  {{- if isset site.Taxonomies "categories" }}
+                  {{- if not (eq (len site.Taxonomies.categories) 0) }}
+                  {{- range $name, $items := site.Taxonomies.categories }}
+                  {{ if eq $name "decoration-style" }}
+
+                  <a href="{{ `blog/` | relLangURL }}{{ $name | safeHTML | lower }}/" class="read_more"
+                    onclick="getCategories('{{ $name }}')" data-vars-event="accuhit" data-vars-event-type="5"
+                    data-vars-event-col1="{{ $name }}" data-vars-event-col2="篩選_官網設計專欄{{ $name }}">
+                    <p>閱讀更多</p>
+                    <img src="/img/blog/readmore.svg" alt="">
+                  </a>
+
+                  {{ end }}
+                  {{- end }}
+                  {{- end }}
+                  {{- end }}
+
+                  <!-- <a href="/blog/" class="read_more" onclick="getCategories('{{ .Params.categories }}')">
+                    <p>閱讀更多</p>
+                    <img src="/img/blog/readmore.svg" alt="">
+                  </a> -->
+                  <span></span>
+                </div>
+                {{ end }}
+                {{ end }}
+              </section>
+            </div>
+            <div class="col-4" data-aos="fade-in" data-aos-duration="1000">
+              <section class="img_box">
+                <img src="/img/blog/step6.png" alt="">
+                <img src="/img/blog/number/06.png" alt="">
+              </section>
+            </div>
+          </div>
+
+          <div class="blog_divider">
+            <div class="bg_img"></div>
+            <!-- <img src="/img/blog/Vector.png" alt=""> -->
+            <img src="/img/blog/line_right.png" alt="" class="line_right">
+          </div>
+
+          <!-- 07 -->
+          <div class="row gx-5 align-items-center" id="blogTag_07">
+            <div class="col-4" data-aos="fade-in" data-aos-duration="1000">
+              <section class="img_box">
+                <img src="/img/blog/step7.png" alt="">
+                <img src="/img/blog/number/07.png" style="top: -40px;" alt="">
+              </section>
+            </div>
+            <div class="col-8">
+              <section class="text_box">
+                <h4>
+                  <span>第 7 步：</span>家具家電
+                </h4>
+                <ul>
+                  {{ $t := $.Site.GetPage "/blog" }}
+                  {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "furnitures-appliances") }}
+                  <li>
+                    <div class="blog_img">
+                      <a href="{{ .Params.url }}">
+                        <span>
+                          <img src="{{ .Params.image }}" alt="">
+                        </span>
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      </a>
+                    </div>
+                    <div class="blog_text">
+                      <h5>
+                        <a href="{{ .Params.url }}">{{ .Title }}</a>
+                        <span></span>
+                      </h5>
+                      <a href="{{ .Params.url }}">
+                        <p>
+                          {{ .Params.description }}
+                        </p>
+                      </a>
+                    </div>
+                  </li>
+                  <li>
+                    <span>
+                      <img src="/img/blog/line.png" alt="">
+                    </span>
+                  </li>
+                  {{ end }}
+                </ul>
+
+                {{ $t := $.Site.GetPage "/blog" }}
+                {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "furnitures-appliances") }}
+                {{ if (eq $index 2) }}
+                <div class="btn_box">
+
+                  {{- if isset site.Taxonomies "categories" }}
+                  {{- if not (eq (len site.Taxonomies.categories) 0) }}
+                  {{- range $name, $items := site.Taxonomies.categories }}
+                  {{ if eq $name "furnitures-appliances" }}
+
+                  <a href="{{ `blog/` | relLangURL }}{{ $name | safeHTML | lower }}/" class="read_more"
+                    onclick="getCategories('{{ $name }}')" data-vars-event="accuhit" data-vars-event-type="5"
+                    data-vars-event-col1="{{ $name }}" data-vars-event-col2="篩選_官網設計專欄{{ $name }}">
+                    <p>閱讀更多</p>
+                    <img src="/img/blog/readmore.svg" alt="">
+                  </a>
+
+                  {{ end }}
+                  {{- end }}
+                  {{- end }}
+                  {{- end }}
+
+                  <!-- <a href="/blog/" class="read_more" onclick="getCategories('{{ .Params.categories }}')">
+                    <p>閱讀更多</p>
+                    <img src="/img/blog/readmore.svg" alt="">
+                  </a> -->
+                  <span></span>
+                </div>
+                {{ end }}
+                {{ end }}
+              </section>
+            </div>
+          </div>
+
+          <div class="blog_divider" style="margin-top: -1.3rem;">
+            <div class="bg_img"></div>
+            <!-- <img src="/img/blog/Vector.png" alt=""> -->
+            <img src="/img/blog/line_end.png" alt="" class="line_left" style="height: auto;">
+            <img src="/img/blog/cube.png" alt="" class="logo_03">
+          </div>
+
+          <!-- 08 -->
+          <div class="row gx-5 align-items-center" id="blogTag_08">
+            <div class="col-8">
+              <section class="text_box">
+                <h4>
+                  <span>第 8 步：</span>驗收入住
+                </h4>
+                <ul>
+                  {{ $t := $.Site.GetPage "/blog" }}
+                  {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "design-acceptanc-and-move-in") }}
+                  <li>
+                    <div class="blog_img">
+                      <a href="{{ .Params.url }}">
+                        <span>
+                          <img src="{{ .Params.image }}" alt="">
+                        </span>
+                        <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                      </a>
+                    </div>
+                    <div class="blog_text">
+                      <h5>
+                        <a href="{{ .Params.url }}">{{ .Title }}</a>
+                        <span></span>
+                      </h5>
+                      <a href="{{ .Params.url }}">
+                        <p>
+                          {{ .Params.description }}
+                        </p>
+                      </a>
+                    </div>
+                  </li>
+                  <li>
+                    <span>
+                      <img src="/img/blog/line.png" alt="">
+                    </span>
+                  </li>
+                  {{ end }}
+                </ul>
+
+                {{ $t := $.Site.GetPage "/blog" }}
+                {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "design-acceptanc-and-move-in") }}
+                {{ if (eq $index 2) }}
+                <div class="btn_box">
+
+                  {{- if isset site.Taxonomies "categories" }}
+                  {{- if not (eq (len site.Taxonomies.categories) 0) }}
+                  {{- range $name, $items := site.Taxonomies.categories }}
+                  {{ if eq $name "design-acceptanc-and-move-in" }}
+
+                  <a href="{{ `blog/` | relLangURL }}{{ $name | safeHTML | lower }}/" class="read_more"
+                    onclick="getCategories('{{ $name }}')" data-vars-event="accuhit" data-vars-event-type="5"
+                    data-vars-event-col1="{{ $name }}" data-vars-event-col2="篩選_官網設計專欄{{ $name }}">
+                    <p>閱讀更多</p>
+                    <img src="/img/blog/readmore.svg" alt="">
+                  </a>
+
+                  {{ end }}
+                  {{- end }}
+                  {{- end }}
+                  {{- end }}
+
+                  <!-- <a href="/blog/" class="read_more" onclick="getCategories('{{ .Params.categories }}')">
+                    <p>閱讀更多</p>
+                    <img src="/img/blog/readmore.svg" alt="">
+                  </a> -->
+                  <span></span>
+                </div>
+                {{ end }}
+                {{ end }}
+              </section>
+            </div>
+            <div class="col-4" data-aos="fade-in" data-aos-duration="1000">
+              <section class="img_box">
+                <img src="/img/blog/step8.png" alt="">
+                <img src="/img/blog/number/08.png" alt="">
+              </section>
+            </div>
+          </div>
+        </div>
+
+        <!-- 暫時隱藏主題 -->
+        <div class="topic_list mt-5">
+          <img src="/img/blog/ruler.png" alt="">
+          <section>
+            <h5>熱門主題</h5>
+            <div class="blog-tags">
+              <!-- forLoop -->
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+
+    <!-- 手機版 -->
+    <div class="d-block d-md-none">
+      <div class="container">
+        <section class="text-box">
+          <p class="title" data-aos="fade-in" data-aos-duration="1000">買了房然後呢？</p>
+          <span class="underline"></span>
+          <div data-aos="fade-in" data-aos-duration="2000">
+            <p>
+              最完整的成家知識地圖，<br>一步步指導你從零開始完成<br>住宅設計、裝修裝潢、家具規劃，<br>陪你美好成家！
+            </p>
+            <img class="left_img" src="/img/blog/dot_left.png" alt="">
+            <img class="right_img" src="/img/blog/dot_right.png" alt="">
+          </div>
+        </section>
+      </div>
+
+      <div class="process">
+        <img class="house_img" src="/img/blog/house.png" alt="" data-aos="fade-in" data-aos-duration="3000">
+        <img class="star_green" src="/img/blog/star_green.png" alt="" data-aos="fade-in" data-aos-duration="3000">
+        <img class="star_yellow" src="/img/blog/star_yellow.png" alt="" data-aos="fade-in" data-aos-duration="3000">
+
+        <div class="container process_mb">
+          <div class="row w-100">
+            <div class="col-6">
+              <section style="position: relative;">
+                <img src="/img/blog/icon/step01.png" alt="" data-gt-target="#blogTag_mb_01" data-gt-duration="500"
+                  data-gt-offset="0">
+                <span>
+                  <img src="/img/blog/number/01.svg" alt="" style="width: 35px;">
+                </span>
+                <h4>預售屋客變</h4>
+              </section>
+              <span class="dot_mb"></span>
+              <div class="mb_line_01"></div>
+            </div>
+            <div class="col-6">
+              <section>
+                <img src="/img/blog/icon/step02.png" alt="" data-gt-target="#blogTag_mb_02" data-gt-duration="500"
+                  data-gt-offset="0">
+                <span>
+                  <img src="/img/blog/number/02.svg" alt="">
+                </span>
+                <h4>驗收交屋</h4>
+              </section>
+              <div class="mb_line_02"></div>
+            </div>
+            <div class="col-6">
+              <section>
+                <img src="/img/blog/icon/step03.png" alt="" data-gt-target="#blogTag_mb_03" data-gt-duration="500"
+                  data-gt-offset="0">
+                <span>
+                  <img src="/img/blog/number/03.svg" alt="">
+                </span>
+                <h4>預算準備</h4>
+              </section>
+              <div class="mb_line_01"></div>
+            </div>
+            <div class="col-6">
+              <section>
+                <img src="/img/blog/icon/step04.png" alt="" data-gt-target="#blogTag_mb_04" data-gt-duration="500"
+                  data-gt-offset="0">
+                <span>
+                  <img src="/img/blog/number/04.svg" alt="">
+                </span>
+                <h4>認識裝修裝潢</h4>
+              </section>
+              <div class="mb_line_02"></div>
+            </div>
+            <div class="col-6">
+              <section style="margin-right: 0; position: relative;">
+                <img src="/img/blog/icon/step05.png" alt="" data-gt-target="#blogTag_mb_05" data-gt-duration="500"
+                  data-gt-offset="0">
+                <span>
+                  <img src="/img/blog/number/05.svg" alt="">
+                </span>
+                <h4>空間計畫</h4>
+              </section>
+              <div class="mb_line_01"></div>
+            </div>
+            <div class="col-6">
+              <section>
+                <img src="/img/blog/icon/step06.png" alt="" data-gt-target="#blogTag_mb_06" data-gt-duration="500"
+                  data-gt-offset="0">
+                <span>
+                  <img src="/img/blog/number/06.svg" alt="">
+                </span>
+                <h4>居家風格</h4>
+              </section>
+              <div class="mb_line_02"></div>
+            </div>
+            <div class="col-6 mb-0">
+              <section>
+                <img src="/img/blog/icon/step07.png" alt="" data-gt-target="#blogTag_mb_07" data-gt-duration="500"
+                  data-gt-offset="0">
+                <span>
+                  <img src="/img/blog/number/07.svg" alt="">
+                </span>
+                <h4>家具家電</h4>
+              </section>
+              <div class="mb_line_01"></div>
+            </div>
+            <div class="col-6 mb-0">
+              <section style="margin-right: 0;">
+                <img src="/img/blog/icon/step08.png" alt="" data-gt-target="#blogTag_mb_08" data-gt-duration="500"
+                  data-gt-offset="0">
+                <span>
+                  <img src="/img/blog/number/08.svg" alt="">
+                </span>
+                <h4>驗收入住</h4>
+              </section>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="article_list">
+        <div class="row gx-5 align-items-center article_item">
+          <div class="col-12" data-aos="fade-in" data-aos-duration="1000" id="blogTag_mb_01">
+            <section class="img_box">
+              <img src="/img/blog/step1.png" alt="">
+              <img src="/img/blog/number/01.png" alt="">
+            </section>
+          </div>
+          <div class="col-12">
+            <section class="text_box">
+              <h4>
+                <span>第 1 步：</span>預售屋客變
+              </h4>
+
+              <ul>
+                {{ $t := $.Site.GetPage "/blog" }}
+                {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "pre-sale-house-design-change") }}
+                <li>
+                  <div class="blog_img">
+                    <a href="{{ .Params.url }}">
+                      <span>
+                        <img src="{{ .Params.image }}" alt="">
+                      </span>
+                      <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                    </a>
+                  </div>
+                  <div class="blog_text">
+                    <h5>
+                      <a href="{{ .Params.url }}">{{ .Title }}</a>
+                      <span></span>
+                    </h5>
+                    <a href="{{ .Params.url }}">
+                      <p>
+                        {{ .Params.description }}
+                      </p>
+                    </a>
+                  </div>
+                </li>
+                <li>
+                  <span class="divider-mb">
+                    <img src="/img/blog/line_mb.svg" alt="">
+                  </span>
+                </li>
+                {{ end }}
+              </ul>
+
+              <!-- 如有三篇文章需顯示按鈕 -->
+              {{ $t := $.Site.GetPage "/blog" }}
+              {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "pre-sale-house-design-change") }}
+              {{ if (eq $index 2) }}
+              <div class="btn_box">
+
+                {{- if isset site.Taxonomies "categories" }}
+                {{- if not (eq (len site.Taxonomies.categories) 0) }}
+                {{- range $name, $items := site.Taxonomies.categories }}
+                {{ if eq $name "pre-sale-house-design-change" }}
+
+                <a href="{{ `blog/` | relLangURL }}{{ $name | safeHTML | lower }}/" class="read_more"
+                  onclick="getCategories('{{ $name }}')" data-vars-event="accuhit" data-vars-event-type="5"
+                  data-vars-event-col1="{{ $name }}" data-vars-event-col2="篩選_官網設計專欄{{ $name }}">
+                  <p>閱讀更多</p>
+                  <img src="/img/blog/readmore.svg" alt="">
+                </a>
+
+                {{ end }}
+                {{- end }}
+                {{- end }}
+                {{- end }}
+
+                <!-- <a href="/blog/" class="read_more" onclick="getCategories('{{ .Params.categories }}')">
+                  <p>閱讀更多</p>
+                  <img src="/img/blog/readmore.svg" alt="">
+                </a> -->
+                <span></span>
+              </div>
+              {{ end }}
+              {{ end }}
+            </section>
+          </div>
+          <span class="mobile_line">
+            <img src="/img/blog/mobile_line.png" alt="">
+          </span>
+
+          <!-- 02 -->
+          <div class="col-12" data-aos="fade-in" data-aos-duration="1000" id="blogTag_mb_02">
+            <section class="img_box">
+              <img src="/img/blog/step2.png" alt="">
+              <img src="/img/blog/number/02.png" alt="">
+            </section>
+          </div>
+          <div class="col-12">
+            <section class="text_box">
+              <h4>
+                <span>第 2 步：</span>驗收交屋
+              </h4>
+
+              <ul>
+                {{ $t := $.Site.GetPage "/blog" }}
+                {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "house-acceptance-check") }}
+                <li>
+                  <div class="blog_img">
+                    <a href="{{ .Params.url }}">
+                      <span>
+                        <img src="{{ .Params.image }}" alt="">
+                      </span>
+                      <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                    </a>
+                  </div>
+                  <div class="blog_text">
+                    <h5>
+                      <a href="{{ .Params.url }}">{{ .Title }}</a>
+                      <span></span>
+                    </h5>
+                    <a href="{{ .Params.url }}">
+                      <p>
+                        {{ .Params.description }}
+                      </p>
+                    </a>
+                  </div>
+                </li>
+                <li>
+                  <span class="divider-mb">
+                    <img src="/img/blog/line_mb.svg" alt="">
+                  </span>
+                </li>
+                {{ end }}
+              </ul>
+
+              {{ $t := $.Site.GetPage "/blog" }}
+              {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "house-acceptance-check") }}
+              {{ if (eq $index 2) }}
+              <div class="btn_box">
+
+                {{- if isset site.Taxonomies "categories" }}
+                {{- if not (eq (len site.Taxonomies.categories) 0) }}
+                {{- range $name, $items := site.Taxonomies.categories }}
+                {{ if eq $name "house-acceptance-check" }}
+
+                <a href="{{ `blog/` | relLangURL }}{{ $name | safeHTML | lower }}/" class="read_more"
+                  onclick="getCategories('{{ $name }}')" data-vars-event="accuhit" data-vars-event-type="5"
+                  data-vars-event-col1="{{ $name }}" data-vars-event-col2="篩選_官網設計專欄{{ $name }}">
+                  <p>閱讀更多</p>
+                  <img src="/img/blog/readmore.svg" alt="">
+                </a>
+
+                {{ end }}
+                {{- end }}
+                {{- end }}
+                {{- end }}
+
+                <!-- <a href="/blog/" class="read_more" onclick="getCategories('{{ .Params.categories }}')">
+                  <p>閱讀更多</p>
+                  <img src="/img/blog/readmore.svg" alt="">
+                </a> -->
+                <span></span>
+              </div>
+              {{ end }}
+              {{ end }}
+            </section>
+          </div>
+          <span class="mobile_line">
+            <img src="/img/blog/mobile_line.png" alt="">
+          </span>
+
+          <!-- 03 -->
+          <div class="col-12" data-aos="fade-in" data-aos-duration="1000" id="blogTag_mb_03">
+            <section class="img_box">
+              <img src="/img/blog/step3.png" alt="">
+              <img src="/img/blog/number/03.png" alt="">
+            </section>
+          </div>
+          <div class="col-12">
+            <section class="text_box">
+              <h4>
+                <span>第 3 步：</span>預算準備
+              </h4>
+
+              <ul>
+                {{ $t := $.Site.GetPage "/blog" }}
+                {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "budget-planning") }}
+                <li>
+                  <div class="blog_img">
+                    <a href="{{ .Params.url }}">
+                      <span>
+                        <img src="{{ .Params.image }}" alt="">
+                      </span>
+                      <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                    </a>
+                  </div>
+                  <div class="blog_text">
+                    <h5>
+                      <a href="{{ .Params.url }}">{{ .Title }}</a>
+                      <span></span>
+                    </h5>
+                    <a href="{{ .Params.url }}">
+                      <p>
+                        {{ .Params.description }}
+                      </p>
+                    </a>
+                  </div>
+                </li>
+                <li>
+                  <span class="divider-mb">
+                    <img src="/img/blog/line_mb.svg" alt="">
+                  </span>
+                </li>
+                {{ end }}
+              </ul>
+
+              {{ $t := $.Site.GetPage "/blog" }}
+              {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "budget-planning") }}
+              {{ if (eq $index 2) }}
+              <div class="btn_box">
+
+                {{- if isset site.Taxonomies "categories" }}
+                {{- if not (eq (len site.Taxonomies.categories) 0) }}
+                {{- range $name, $items := site.Taxonomies.categories }}
+                {{ if eq $name "budget-planning" }}
+
+                <a href="{{ `blog/` | relLangURL }}{{ $name | safeHTML | lower }}/" class="read_more"
+                  onclick="getCategories('{{ $name }}')" data-vars-event="accuhit" data-vars-event-type="5"
+                  data-vars-event-col1="{{ $name }}" data-vars-event-col2="篩選_官網設計專欄{{ $name }}">
+                  <p>閱讀更多</p>
+                  <img src="/img/blog/readmore.svg" alt="">
+                </a>
+
+                {{ end }}
+                {{- end }}
+                {{- end }}
+                {{- end }}
+
+                <!-- <a href="/blog/" class="read_more" onclick="getCategories('{{ .Params.categories }}')">
+                  <p>閱讀更多</p>
+                  <img src="/img/blog/readmore.svg" alt="">
+                </a> -->
+                <span></span>
+              </div>
+              {{ end }}
+              {{ end }}
+            </section>
+          </div>
+          <span class="mobile_line">
+            <img src="/img/blog/mobile_line.png" alt="">
+          </span>
+
+          <!-- 04 -->
+          <div class="col-12" data-aos="fade-in" data-aos-duration="1000" id="blogTag_mb_04">
+            <section class="img_box">
+              <img src="/img/blog/step4.png" alt="">
+              <img src="/img/blog/number/04.png" alt="">
+            </section>
+          </div>
+          <div class="col-12">
+            <section class="text_box">
+              <h4>
+                <span>第 4 步：</span>認識裝修裝潢
+              </h4>
+
+              <ul>
+                {{ $t := $.Site.GetPage "/blog" }}
+                {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "about-interior-decoration") }}
+                <li>
+                  <div class="blog_img">
+                    <a href="{{ .Params.url }}">
+                      <span>
+                        <img src="{{ .Params.image }}" alt="">
+                      </span>
+                      <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                    </a>
+                  </div>
+                  <div class="blog_text">
+                    <h5>
+                      <a href="{{ .Params.url }}">{{ .Title }}</a>
+                      <span></span>
+                    </h5>
+                    <a href="{{ .Params.url }}">
+                      <p>
+                        {{ .Params.description }}
+                      </p>
+                    </a>
+                  </div>
+                </li>
+                <li>
+                  <span class="divider-mb">
+                    <img src="/img/blog/line_mb.svg" alt="">
+                  </span>
+                </li>
+                {{ end }}
+              </ul>
+
+              {{ $t := $.Site.GetPage "/blog" }}
+              {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "about-interior-decoration") }}
+              {{ if (eq $index 2) }}
+              <div class="btn_box">
+
+                {{- if isset site.Taxonomies "categories" }}
+                {{- if not (eq (len site.Taxonomies.categories) 0) }}
+                {{- range $name, $items := site.Taxonomies.categories }}
+                {{ if eq $name "about-interior-decoration" }}
+
+                <a href="{{ `blog/` | relLangURL }}{{ $name | safeHTML | lower }}/" class="read_more"
+                  onclick="getCategories('{{ $name }}')" data-vars-event="accuhit" data-vars-event-type="5"
+                  data-vars-event-col1="{{ $name }}" data-vars-event-col2="篩選_官網設計專欄{{ $name }}">
+                  <p>閱讀更多</p>
+                  <img src="/img/blog/readmore.svg" alt="">
+                </a>
+
+                {{ end }}
+                {{- end }}
+                {{- end }}
+                {{- end }}
+
+                <!-- <a href="/blog/" class="read_more" onclick="getCategories('{{ .Params.categories }}')">
+                  <p>閱讀更多</p>
+                  <img src="/img/blog/readmore.svg" alt="">
+                </a> -->
+                <span></span>
+              </div>
+              {{ end }}
+              {{ end }}
+            </section>
+          </div>
+          <span class="mobile_line">
+            <img src="/img/blog/mobile_line.png" alt="">
+          </span>
+
+          <!-- 05 -->
+          <div class="col-12" data-aos="fade-in" data-aos-duration="1000" id="blogTag_mb_05">
+            <section class="img_box">
+              <img src="/img/blog/step5.png" alt="">
+              <img src="/img/blog/number/05.png" style="top: -40px;" alt="">
+            </section>
+          </div>
+          <div class="col-12">
+            <section class="text_box">
+              <h4>
+                <span>第 5 步：</span>空間計畫
+              </h4>
+
+              <ul>
+                {{ $t := $.Site.GetPage "/blog" }}
+                {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "floor-planning") }}
+                <li>
+                  <div class="blog_img">
+                    <a href="{{ .Params.url }}">
+                      <span>
+                        <img src="{{ .Params.image }}" alt="">
+                      </span>
+                      <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                    </a>
+                  </div>
+                  <div class="blog_text">
+                    <h5>
+                      <a href="{{ .Params.url }}">{{ .Title }}</a>
+                      <span></span>
+                    </h5>
+                    <a href="{{ .Params.url }}">
+                      <p>
+                        {{ .Params.description }}
+                      </p>
+                    </a>
+                  </div>
+                </li>
+                <li>
+                  <span class="divider-mb">
+                    <img src="/img/blog/line_mb.svg" alt="">
+                  </span>
+                </li>
+                {{ end }}
+              </ul>
+
+              {{ $t := $.Site.GetPage "/blog" }}
+              {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "floor-planning") }}
+              {{ if (eq $index 2) }}
+              <div class="btn_box">
+
+                {{- if isset site.Taxonomies "categories" }}
+                {{- if not (eq (len site.Taxonomies.categories) 0) }}
+                {{- range $name, $items := site.Taxonomies.categories }}
+                {{ if eq $name "floor-planning" }}
+
+                <a href="{{ `blog/` | relLangURL }}{{ $name | safeHTML | lower }}/" class="read_more"
+                  onclick="getCategories('{{ $name }}')" data-vars-event="accuhit" data-vars-event-type="5"
+                  data-vars-event-col1="{{ $name }}" data-vars-event-col2="篩選_官網設計專欄{{ $name }}">
+                  <p>閱讀更多</p>
+                  <img src="/img/blog/readmore.svg" alt="">
+                </a>
+
+                {{ end }}
+                {{- end }}
+                {{- end }}
+                {{- end }}
+
+                <!-- <a href="/blog/" class="read_more" onclick="getCategories('{{ .Params.categories }}')">
+                  <p>閱讀更多</p>
+                  <img src="/img/blog/readmore.svg" alt="">
+                </a> -->
+                <span></span>
+              </div>
+              {{ end }}
+              {{ end }}
+            </section>
+          </div>
+          <span class="mobile_line">
+            <img src="/img/blog/mobile_line.png" alt="">
+          </span>
+
+          <!-- 06 -->
+          <div class="col-12" data-aos="fade-in" data-aos-duration="1000" id="blogTag_mb_06">
+            <section class="img_box">
+              <img src="/img/blog/step6.png" alt="">
+              <img src="/img/blog/number/06.png" alt="">
+            </section>
+          </div>
+          <div class="col-12">
+            <section class="text_box">
+              <h4>
+                <span>第 6 步：</span>居家風格
+              </h4>
+
+              <ul>
+                {{ $t := $.Site.GetPage "/blog" }}
+                {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "decoration-style") }}
+                <li>
+                  <div class="blog_img">
+                    <a href="{{ .Params.url }}">
+                      <span>
+                        <img src="{{ .Params.image }}" alt="">
+                      </span>
+                      <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                    </a>
+                  </div>
+                  <div class="blog_text">
+                    <h5>
+                      <a href="{{ .Params.url }}">{{ .Title }}</a>
+                      <span></span>
+                    </h5>
+                    <a href="{{ .Params.url }}">
+                      <p>
+                        {{ .Params.description }}
+                      </p>
+                    </a>
+                  </div>
+                </li>
+                <li>
+                  <span class="divider-mb">
+                    <img src="/img/blog/line_mb.svg" alt="">
+                  </span>
+                </li>
+                {{ end }}
+              </ul>
+
+              {{ $t := $.Site.GetPage "/blog" }}
+              {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "decoration-style") }}
+              {{ if (eq $index 2) }}
+              <div class="btn_box">
+
+                {{- if isset site.Taxonomies "categories" }}
+                {{- if not (eq (len site.Taxonomies.categories) 0) }}
+                {{- range $name, $items := site.Taxonomies.categories }}
+                {{ if eq $name "decoration-style" }}
+
+                <a href="{{ `blog/` | relLangURL }}{{ $name | safeHTML | lower }}/" class="read_more"
+                  onclick="getCategories('{{ $name }}')" data-vars-event="accuhit" data-vars-event-type="5"
+                  data-vars-event-col1="{{ $name }}" data-vars-event-col2="篩選_官網設計專欄{{ $name }}">
+                  <p>閱讀更多</p>
+                  <img src="/img/blog/readmore.svg" alt="">
+                </a>
+
+                {{ end }}
+                {{- end }}
+                {{- end }}
+                {{- end }}
+
+                <!-- <a href="/blog/" class="read_more" onclick="getCategories('{{ .Params.categories }}')">
+                  <p>閱讀更多</p>
+                  <img src="/img/blog/readmore.svg" alt="">
+                </a> -->
+                <span></span>
+              </div>
+              {{ end }}
+              {{ end }}
+            </section>
+          </div>
+          <span class="mobile_line">
+            <img src="/img/blog/mobile_line.png" alt="">
+          </span>
+
+          <!-- 07 -->
+          <div class="col-12" data-aos="fade-in" data-aos-duration="1000" id="blogTag_mb_07">
+            <section class="img_box">
+              <img src="/img/blog/step7.png" alt="">
+              <img src="/img/blog/number/07.png" style="top: -40px;" alt="">
+            </section>
+          </div>
+          <div class="col-12">
+            <section class="text_box">
+              <h4>
+                <span>第 7 步：</span>家具家電
+              </h4>
+
+              <ul>
+                {{ $t := $.Site.GetPage "/blog" }}
+                {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "furnitures-appliances") }}
+                <li>
+                  <div class="blog_img">
+                    <a href="{{ .Params.url }}">
+                      <span>
+                        <img src="{{ .Params.image }}" alt="">
+                      </span>
+                      <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                    </a>
+                  </div>
+                  <div class="blog_text">
+                    <h5>
+                      <a href="{{ .Params.url }}">{{ .Title }}</a>
+                      <span></span>
+                    </h5>
+                    <a href="{{ .Params.url }}">
+                      <p>
+                        {{ .Params.description }}
+                      </p>
+                    </a>
+                  </div>
+                </li>
+                <li>
+                  <span class="divider-mb">
+                    <img src="/img/blog/line_mb.svg" alt="">
+                  </span>
+                </li>
+                {{ end }}
+              </ul>
+
+              {{ $t := $.Site.GetPage "/blog" }}
+              {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "furnitures-appliances") }}
+              {{ if (eq $index 2) }}
+              <div class="btn_box">
+
+                {{- if isset site.Taxonomies "categories" }}
+                {{- if not (eq (len site.Taxonomies.categories) 0) }}
+                {{- range $name, $items := site.Taxonomies.categories }}
+                {{ if eq $name "furnitures-appliances" }}
+
+                <a href="{{ `blog/` | relLangURL }}{{ $name | safeHTML | lower }}/" class="read_more"
+                  onclick="getCategories('{{ $name }}')" data-vars-event="accuhit" data-vars-event-type="5"
+                  data-vars-event-col1="{{ $name }}" data-vars-event-col2="篩選_官網設計專欄{{ $name }}">
+                  <p>閱讀更多</p>
+                  <img src="/img/blog/readmore.svg" alt="">
+                </a>
+
+                {{ end }}
+                {{- end }}
+                {{- end }}
+                {{- end }}
+
+                <!-- <a href="/blog/" class="read_more" onclick="getCategories('{{ .Params.categories }}')">
+                  <p>閱讀更多</p>
+                  <img src="/img/blog/readmore.svg" alt="">
+                </a> -->
+                <span></span>
+              </div>
+              {{ end }}
+              {{ end }}
+            </section>
+          </div>
+          <span class="mobile_line">
+            <img src="/img/blog/mobile_line.png" alt="">
+          </span>
+
+          <!-- 08 -->
+          <div class="col-12" data-aos="fade-in" data-aos-duration="1000" id="blogTag_mb_08">
+            <section class="img_box">
+              <img src="/img/blog/step8.png" alt="">
+              <img src="/img/blog/number/08.png" alt="">
+            </section>
+          </div>
+          <div class="col-12">
+            <section class="text_box">
+              <h4>
+                <span>第 8 步：</span>驗收入住
+              </h4>
+
+              <ul>
+                {{ $t := $.Site.GetPage "/blog" }}
+                {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "design-acceptanc-and-move-in") }}
+                <li>
+                  <div class="blog_img">
+                    <a href="{{ .Params.url }}">
+                      <span>
+                        <img src="{{ .Params.image }}" alt="">
+                      </span>
+                      <img class="point-img" src='/img/blog/points{{ add $index 1 }}.png' alt="">
+                    </a>
+                  </div>
+                  <div class="blog_text">
+                    <h5>
+                      <a href="{{ .Params.url }}">{{ .Title }}</a>
+                      <span></span>
+                    </h5>
+                    <a href="{{ .Params.url }}">
+                      <p>
+                        {{ .Params.description }}
+                      </p>
+                    </a>
+                  </div>
+                </li>
+                <li>
+                  <span class="divider-mb">
+                    <img src="/img/blog/line_mb.svg" alt="">
+                  </span>
+                </li>
+                {{ end }}
+              </ul>
+
+              {{ $t := $.Site.GetPage "/blog" }}
+              {{ range $index, $element := first 3 ( where $t.Pages "Params.categories" "design-acceptanc-and-move-in") }}
+              {{ if (eq $index 2) }}
+              <div class="btn_box">
+
+                {{- if isset site.Taxonomies "categories" }}
+                {{- if not (eq (len site.Taxonomies.categories) 0) }}
+                {{- range $name, $items := site.Taxonomies.categories }}
+                {{ if eq $name "design-acceptanc-and-move-in" }}
+
+                <a href="{{ `blog/` | relLangURL }}{{ $name | safeHTML | lower }}/" class="read_more"
+                  onclick="getCategories('{{ $name }}')" data-vars-event="accuhit" data-vars-event-type="5"
+                  data-vars-event-col1="{{ $name }}" data-vars-event-col2="篩選_官網設計專欄{{ $name }}">
+                  <p>閱讀更多</p>
+                  <img src="/img/blog/readmore.svg" alt="">
+                </a>
+
+                {{ end }}
+                {{- end }}
+                {{- end }}
+                {{- end }}
+
+                <!-- <a href="/blog/" class="read_more" onclick="getCategories('{{ .Params.categories }}')">
+                  <p>閱讀更多</p>
+                  <img src="/img/blog/readmore.svg" alt="">
+                </a> -->
+                <span></span>
+              </div>
+              {{ end }}
+              {{ end }}
+            </section>
+          </div>
+
+          <!-- 暫時隱藏主題 -->
+          <div class="topic_list">
+            <img src="/img/blog/ruler.png" alt="">
+            <section>
+              <h5>熱門主題</h5>
+              <main>
+                <div class="container blog-tags">
+                  <!-- forLoop -->
+                </div>
+              </main>
+            </section>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="reserve d-flex flex-column">
+      <a href="https://maac.io/1Pife" target="_blank">
+        <img src="/img/bhousev2_img/LINE-CONTACT.png" alt="">
+      </a>
+      <!-- <a href="/store/">
+        <img src="/img/home/store-reserve.png" alt="">
+      </a> -->
+    </div>
+  </div>
+
+  {{ partial "footer.html" . }}
+  {{ partial "scripts.html" . }}
+
+  <script>
+    let domHeight = $('.process_mb').height();
+    let windowWidth = $(window).width();
+    let x = windowWidth / 2.4;
+    let y = domHeight * (110 / 693.38);
+    let callState = true;
+    const dotDom = document.querySelector(".dot_mb");
+
+    function dotAnimate(x, y) {
+      callState = true;
+      const keyFrames = document.createElement("style");
+      const dotKeyFrames = `
+        @keyframes dot_mb {
+          0% {
+            transform: 'translate(0, 5px)';
+          }
+          10% {
+            transform: translate(${x}px, 5px);
+          }
+          15% {
+            transform: translate(${x}px, ${y}px);
+          }
+          25% {
+            transform: translate(-13px, ${y}px);
+          }
+          30% {
+            transform: translate(-13px, ${y * 1.727}px);
+          }
+          40% {
+            transform: translate(${x}px, ${y * 1.727}px);
+          }
+          45% {
+            transform: translate(${x}px,  ${y * 2.68}px);
+          }
+          55% {
+            transform: translate(-13px, ${y * 2.68}px);
+          }
+          60% {
+            transform: translate(-13px, ${y * 3.4}px);
+          }
+          70% {
+            transform: translate(${x}px, ${y * 3.4}px);
+          }
+          75% {
+            transform: translate(${x}px, ${y * 4.35}px);
+          }
+          85% {
+            transform: translate(-13px, ${y * 4.35}px);
+          }
+          90% {
+            transform: translate(-13px, ${y * 5.08}px);
+          }
+          100% {
+            transform: translate(${x}px, ${y * 5.08}px);
+          }
+        }
+
+          .dot_mb::before {
+            animation: dot_mb 8s infinite;
+          }
+        `;
+
+      keyFrames.innerHTML = dotKeyFrames;
+
+      let oldStyle = document.querySelector('style');
+
+      // 如已有 style 則直接覆蓋
+      if (!oldStyle) {
+        dotDom.appendChild(keyFrames);
+      } else {
+        dotDom.replaceChild(keyFrames, oldStyle);
+      }
+
+      /* 以下 animate() 方法 iOS 不支援 */
+      // const dotPosition = [
+      //   {
+      //     transform: 'translate(0, 5px)'
+      //   },
+      //   {
+      //     transform: `translate(${x}px, 5px)`
+      //   },
+      //   , {
+      //     transform: `translate(${x}px, ${y}px)`
+      //   }
+      //   , {
+      //     transform: `translate(-13px, ${y}px)`
+      //   }
+      //   , {
+      //     // (110 + 80) / 110
+      //     transform: `translate(-13px, ${y * 1.727}px)`
+      //   }
+      //   , {
+      //     transform: `translate(${x}px,  ${y * 1.727}px)`
+      //   }
+      //   , {
+      //     // (190 + 110) / 110
+      //     transform: `translate(${x}px,  ${y * 2.68}px)`
+      //   }
+      //   , {
+      //     transform: `translate(-13px, ${y * 2.68}px)`
+      //   }
+      //   , {
+      //     // (275 + 110) / 110
+      //     transform: `translate(-13px, ${y * 3.4}px)`
+      //   }
+      //   , {
+      //     transform: `translate(${x}px, ${y * 3.4}px)`
+      //   }
+      //   , {
+      //     // (380 + 110) / 110
+      //     transform: `translate(${x}px, ${y * 4.35}px)`
+      //   }
+      //   , {
+      //     transform: `translate(-13px, ${y * 4.35}px)`
+      //   }
+      //   , {
+      //     // (550 + 110) / 110
+      //     transform: `translate(-13px, ${y * 5.08}px)`
+      //   }
+      //   , {
+      //     transform: `translate(${x}px, ${y * 5.08}px)`
+      //   }
+      // ];
+
+      // // 動畫時間
+      // const dotTiming = {
+      //   duration: 8000,
+      //   iterations: Infinity
+      // }
+
+      // dotDom.animate(dotPosition, dotTiming);
+    }
+
+    // 於手機尺寸開始動畫
+    if ($(window).width() < 576) {
+      dotAnimate(x, y);
+    }
+
+    // 判斷是否為手機
+    function mobile() {
+      try {
+        document.createEvent("TouchEvent");
+        return true;
+      } catch (e) {
+        return false;
+      }
+    }
+
+    if (!mobile()) {
+      /* 電腦版偵測縮放 */
+      if (callState) {
+        addEventListener('resize', (event) => {
+          console.log('call');
+          if ($(window).width() < 576 && callState) {
+            // 避免重複 call function
+            callState = false;
+
+            const stopStyle = document.createElement("style");
+            // 尺寸改變後動畫重新開始
+            const stopKeyFrames = `
+                .dot_mb::before {
+                  animation: none;
+                }
+             `;
+            stopStyle.innerHTML = stopKeyFrames;
+
+            let oldStyle = document.querySelector('style');
+
+            if (oldStyle) {
+              dotDom.replaceChild(stopStyle, oldStyle);
+            }
+
+            setTimeout(() => {
+              // 縮放畫面時重新取得x、y軸
+              const x1 = $(window).width() / 2.4;
+              const y1 = $('.process_mb').height() * (110 / 693.38);
+              dotAnimate(x1, y1);
+            }, 1000);
+          }
+        });
+      }
+    }
+  </script>
+</body>
+
+</html>

layouts/blog_main/single.html

@@ -0,0 +1,48 @@
+{{ define "main" }}
+<div class="container-fluid blog_article p-0">
+    <section class="bhouseweb_loc_banner">
+      <img src="/img/banner/bn_blog@2x.webp" class="banner-img card-img" alt="...">
+    </section>
+    <div class="content">
+      
+        <h3>{{ .Title }}</h3>
+        <div class="d-flex justify-content-between align-items-center">
+          <span>{{ .PublishDate.Format "2006-01-02" }}</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>
+        <span class="line"></span>
+        {{ .Params.introduction | safeHTML }}
+      <br>
+      <div class="question-box">
+        <p>
+          {{ .Params.question_box_intro }}
+        </p>
+        {{ .TableOfContents }}
+      </div>
+     
+      <div class="blog-content">
+        {{ .Content }}
+      </div>
+      
+      <a class="nav-link" href="/blog">
+        <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>
+    </div>
+  </div>
+</div>
+{{ end }}

layouts/cabinet/list.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body style="overflow-x: hidden;">
+
+  {{ partial "nav.html" . }}
+  {{ partial "furniture_design.html" . }}
+
+  <div class="furniture-design design-list">
+    <div class="container bhouseweb_loc_content sub-tab-content my-5">
+      <div class="row g-3 mt-3">
+        {{ $paginator := .Paginate .Data.Pages }}
+        {{ range $paginator.Pages }}
+        <div class="col-12 col-md-6 mb-4 my-auto">
+          <div class="position-relative text-item">
+            <a href="{{ .RelPermalink }}">
+              <div>
+                <h4 style="line-height: 32px; width: 100%;">
+                  {{ replace .Title "｜小寶優居・設計家具" "" }}<br>
+                  <span style="font-size: 1rem;">{{ .Params.custom_title_value }}</span>
+                </h4>
+              </div>
+              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
+            </a>
+          </div>
+        </div>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+
+  {{ partial "footer.html" . }}
+  {{ partial "scripts.html" . }}
+</body>
+
+</html>

layouts/collection/list.html

@@ -0,0 +1,288 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body>
+  <!-- <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_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="" />
+        </div>
+      </div>
+      <img class="bt_slogan_portfolio" src="/img/bt_slogan_portfolio_h@2x.png" alt="" />
+    </div>
+  </section>
+  <div class="bhouseweb_loc_content">
+    <section class="bhouseweb_loc_sec01">
+      <div class="bhouseweb_loc_box">
+        <p class="fw-bold m-0">類型</p>
+        <div class="bhouseweb_loc_type">
+          <input style="opacity: 0;" class="type ms-1" type="radio" id="m_全部類型" name="m_type" value="全部類型" checked />
+          <label for="m_全部類型" class="bhouseweb_item_type select">全部</label>
+          <input style="opacity: 0;" class="type ms-1" type="radio" id="m_大樓" name="m_type" value="大樓" />
+          <label id="building" for="m_大樓" class="bhouseweb_item_type">大樓</label>
+          <input style="opacity: 0;" class="type ms-1" type="radio" id="m_透天" name="m_type" value="透天" />
+          <label id="house" for="m_透天" class="bhouseweb_item_type">透天</label>
+        </div>
+      </div>
+      <div class="bhouseweb_loc_box">
+        <p class="fw-bold m-0">權狀</p>
+        <div class="bhouseweb_loc_type">
+          <input style="opacity: 0;" class="ping ms-1" type="radio" id="m_全部坪數" name="m_ping" value="全部坪數" checked />
+          <label class="bhouseweb_item_type select" for="m_全部坪數">全部</label>
+
+          <!-- <input style="opacity: 0;" class="ping ms-1" type="radio" id="m_20坪以下" name="m_ping" value="20坪以下" />
+          <label class="bhouseweb_item_type" for="m_20坪以下">20坪以下</label> -->
+
+          <input style="opacity: 0;" class="ping ms-1" type="radio" id="m_20-35坪" name="m_ping" value="20-35坪" />
+          <label class="bhouseweb_item_type" for="m_20-35坪">20-35坪</label>
+
+          <input style="opacity: 0;" class="ping ms-1" type="radio" id="m_36-50坪" name="m_ping" value="36-50坪" />
+          <label class="bhouseweb_item_type" for="m_36-50坪">36-50坪</label>
+
+          <input style="opacity: 0;" class="ping ms-1" type="radio" id="m_51坪以上" name="m_ping" value="51坪以上" />
+          <label class="bhouseweb_item_type" for="m_51坪以上">51坪以上</label>
+
+          <!-- <a class="bhouseweb_item_type select">全部</a>
+            <a class="bhouseweb_item_type">20坪以下</a>
+            <a class="bhouseweb_item_type">20-35坪</a>
+            <a class="bhouseweb_item_type">36-50坪</a>
+            <a class="bhouseweb_item_type">50坪以上</a>
+            <a class="bhouseweb_item_type">50坪以上</a>
+            <a class="bhouseweb_item_type">50坪以上</a>
+            <a class="bhouseweb_item_type">50坪以上</a> -->
+        </div>
+      </div>
+      <div class="bhouseweb_loc_box">
+        <p class="fw-bold m-0">預算</p>
+        <div class="bhouseweb_loc_type">
+          <input style="opacity: 0;" class="budget ms-1" type="radio" id="m_全部預算" name="m_budget" value="全部預算"
+            checked />
+          <label class="bhouseweb_item_type select" for="m_全部預算">全部</label>
+
+          <input style="opacity: 0;" class="budget ms-1" type="radio" id="m_59萬以下" name="m_budget" value="59萬以下" />
+          <label class="bhouseweb_item_type" for="m_59萬以下">59萬以下</label>
+
+          <input style="opacity: 0;" class="budget ms-1" type="radio" id="m_60-79萬" name="m_budget" value="60-79萬" />
+          <label class="bhouseweb_item_type" for="m_60-79萬">60-79萬</label>
+
+          <input style="opacity: 0;" class="budget ms-1" type="radio" id="m_80-99萬" name="m_budget" value="80-99萬" />
+          <label class="bhouseweb_item_type" for="m_80-99萬">80-99萬</label>
+
+          <input style="opacity: 0;" class="budget ms-1" type="radio" id="m_100萬以上" name="m_budget" value="100萬以上" />
+          <label class="bhouseweb_item_type" for="m_100萬以上">100萬以上</label>
+
+          <!-- <a class="bhouseweb_item_type">全部</a>
+            <a class="bhouseweb_item_type">59萬以下</a>
+            <a class="bhouseweb_item_type">60-79萬</a>
+            <a class="bhouseweb_item_type">80-99萬</a>
+            <a class="bhouseweb_item_type">100萬</a> -->
+        </div>
+      </div>
+      <div class="bhouseweb_loc_box">
+        <p class="fw-bold m-0">格局</p>
+        <div class="bhouseweb_loc_type">
+          <input style="opacity: 0;" class="rooms ms-1" type="radio" id="m_全部格局" name="m_rooms" value="全部格局" checked />
+          <label class="bhouseweb_item_type select" for="m_全部格局">全部</label>
+
+          <input style="opacity: 0;" class="rooms ms-1" type="radio" id="m_二房" name="m_rooms" value="二房" />
+          <label class="bhouseweb_item_type" for="m_二房">兩房</label>
+
+          <input style="opacity: 0;" class="rooms ms-1" type="radio" id="m_三房" name="m_rooms" value="三房" />
+          <label class="bhouseweb_item_type" for="m_三房">三房</label>
+
+          <input style="opacity: 0;" class="rooms ms-1" type="radio" id="m_四房" name="m_rooms" value="四房" />
+          <label class="bhouseweb_item_type" for="m_四房">四房</label>
+
+          <input style="opacity: 0;" class="rooms ms-1" type="radio" id="m_四房以上" name="m_rooms" value="四房以上" />
+          <label class="bhouseweb_item_type" for="m_四房以上">四房以上</label>
+
+          <!-- <a class="bhouseweb_item_type">全部</a>
+            <a class="bhouseweb_item_type">兩房</a>
+            <a class="bhouseweb_item_type">三房</a>
+            <a class="bhouseweb_item_type">四房</a>
+            <a class="bhouseweb_item_type">四房以上</a> -->
+        </div>
+      </div>
+    </section>
+
+    <section class="p-1">
+      <div class="bhouseweb_loc_search_box">
+        <form class="bhouseweb_search_form d-flex">
+          <div class="bhouseweb_search_img">
+            <i class="fas fa-search"></i>
+          </div>
+          <input id="bhouseweb_search" class="me-md-2" type="search" placeholder="搜 尋「 工 業 」「 中 島 」「 台 中 」"
+            aria-label="Search" />
+          <!-- <button class="btn btn-outline-success" type="submit">Search</button> -->
+        </form>
+      </div>
+    </section>
+  </div>
+  <hr class="bhouseweb_loc_line" />
+  <div class="bhouseweb_loc_content" style="overflow-x: hidden">
+    <div class="bhouseweb_loc_sec02">
+      <div class="update_info row px-0 mx-0" id="articleList">
+        {{ $paginator := .Paginate .Data.Pages }} {{ range $paginator.Pages }}
+        <div class="col-12 col-sm-6 p-1">
+          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
+            <a href="{{ .RelPermalink }}">
+              <img class="img-fluid" src="{{ .Params.Image | relURL }}" alt="" />
+              <div class="slide_item_text">
+                <p>{{ replace .Title "｜小寶優居・成家故事" "" }}</p>
+              </div>
+              <div class="sec02-p-dec p-1 mt-1 text-center">
+                <h5 class="card-title">
+                  {{ replace .Title "｜小寶優居・成家故事" "" }}
+                </h5>
+                <p class="card-text">{{ .Description | safeHTML }}</p>
+              </div>
+            </a>
+          </div>
+        </div>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+
+  <p class="article__readMore text-center fw-bold my-3">
+    看更多案例
+    <span style="font-size: 16px" class="fw-normal me-2"> &or;</span>
+  </p>
+
+  <div class="reserve d-flex flex-column">
+    <a href="https://maac.io/1Pife" target="_blank">
+      <img src="/img/bhousev2_img/LINE-CONTACT.png" alt="">
+    </a>
+    <!-- <a href="/store/">
+      <img src="/img/home/store-reserve.png" alt="">
+    </a> -->
+  </div>
+
+  <!-- <div class="footer-template"></div> -->
+
+  {{ partial "footer.html" . }}
+
+  <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
+    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+    integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
+    crossorigin="anonymous"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+
+  <script async defer src="./js/index.js"></script> -->
+  {{ partial "scripts.html" . }}
+  <script src="/js/cz_filter.js"></script>
+
+  <script>
+    window.onload = function () {
+      // 暫時隱藏第一篇作品
+      // let first = document.querySelector('#articleList div');
+      // first.style.display = "none"
+
+      document.getElementById('bhouseweb_search').value = '';
+
+      // 取得 apiData
+      let contentsData = [];
+      // let category = localStorage.getItem('category');
+
+      (function getContentsData() {
+        // 線上版網址 http://192.53.174.202:9001/api/
+        // 本地端網址 http://localhost:9001/api/
+        fetch('https://bhouse3.ptt.cx:9002/api/contents?url=/collection').then(res => res.json()).then(list => {
+          contentsData = list;
+          console.log('contentsData', contentsData);
+          // filterCategory();
+        })
+      })();
+
+      let matchContent = "";
+
+      // 增加延遲(待輸入完成後再進行搜尋)
+      function delay(fn, ms) {
+        let timer = 0
+        return function (...args) {
+          clearTimeout(timer)
+          timer = setTimeout(fn.bind(this, ...args), ms || 0)
+        }
+      }
+
+      // 搜尋
+      $('#bhouseweb_search').keyup(delay(function (e) {
+        console.log(1)
+        console.log('Time elapsed!', this.value);
+        // 取得輸入框的值
+        let inputVal = $('#bhouseweb_search').val();
+        console.log('inputVal', inputVal);
+        matchContent = "";
+        let falseItem = [];
+        contentsData.map((item, index) => {
+          // 搜尋特定分類文章
+          // if (item.categories) {
+          //   if (item.categories.includes(category)) {
+          if (item.title.includes(inputVal) || item.description.includes(inputVal) || item.banner_img_text?.includes(inputVal) || item.content.includes(inputVal)) {
+            if (item.url != '/collection') {
+              matchContent += ` 
+        <div class="col-12 col-sm-6 p-1"> \
+          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0"> \
+            <a href="${item.url}"> \
+              <img \
+                alt="${item.title}" \
+                src="${item.image}" \
+                layout="responsive"> \
+            <div class="slide_item_text"> \
+                <p>${item.title}</p>\
+            </div>  \
+            <div class="sec02-p-dec p-1 mt-1 text-center">\
+              <h5 class="card-title">${item.title}</h5>\
+              <p>${item.description}</p>\
+            </div>\
+            </div> \
+          </a> \
+          </div> \
+        </div>`;
+            }
+
+
+          } else {
+            falseItem.push(item);
+          }
+          if (falseItem.length === contentsData.length) {
+            matchContent = `
+        <div class="alert d-flex align-items-center" role="alert" style="max-width: 300px;margin: 0 auto 25px;justify-content: center;">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" style="color: #808e4c;" viewBox="0 0 16 16" role="img" aria-label="Warning:">
+            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+          </svg>
+          <div>
+            找不到符合條件的作品集
+          </div>
+        </div>
+        `;
+          }
+          //   }
+          // }
+        })
+        document.getElementById("articleList").innerHTML = matchContent;
+      }, 500));
+
+      // 離開頁面前清除 localStorage
+      $(window).bind('beforeunload', function () {
+        return window.localStorage.removeItem('type');
+      }
+      );
+    }
+  </script>
+</body>
+
+</html>

layouts/collection/single.html

@@ -0,0 +1,190 @@
+{{ define "main" }}
+<section class="bhouseweb_loc_banner d-md-none d-block">
+  <div class="card bg-transparent text-white border-0 rounded-0">
+    <img src="/img/bn_portfolio2x.png" class="banner-img card-img" alt="...">
+  </div>
+</section>
+<div class="style_house_ads">
+  <h2 class="style_house_title style_house_text m-0">{{ .Params.title }}</h2>
+</div>
+<section class="style_house_banner container-fluid px-0">
+  <img src="{{ .Params.cover_img }}" alt="">
+  <div class="collection_banner_text_box">
+    <p>{{ .Params.banner_img_text }}</p>
+    <p>{{ .Params.homeowner }}｜{{ .Params.room_count }}｜{{ .Params.house_size }}</p>
+  </div>
+</section>
+<div class="style_house_content">
+  <div class="style_house_sec01">
+    <nav aria-label="breadcrumb">
+      <ol class="breadcrumb mb-5">
+        <li class="breadcrumb-item">
+          <a href="/">
+            <img src="/img/bt_footer_index@2x.png" style="width: 30px; margin: 0 0 5px;" alt="logo">
+          </a>
+        </li>
+        <li class="breadcrumb-item"><a href="/collection/">室內設計作品</a></li>
+        <li class="breadcrumb-item active" aria-current="page" id="category_name">{{ .Title }}</li>
+      </ol>
+    </nav>
+    <div class="style_house_sec01_box">
+      <div class="row px-0 mx-0">
+        <div class="col-4 col-md-4">
+          <h3 class="fw-bold">{{ .Params.house_size }}</h3>
+          <p>權狀坪數</p>
+        </div>
+        <div class="col-4 col-md-4">
+          <h3 class="fw-bold">{{ .Params.room_count }}</h3>
+          <p>格局</p>
+        </div>
+        <div class="col-4 col-md-4">
+          <h3 class="fw-bold">{{ .Params.house_cat }}</h3>
+          <p>屋型</p>
+        </div>
+      </div>
+    </div>
+    <div class="style_house_sec01_box">
+      <div class="row px-0 mx-0">
+        <div class="col-4 col-md-4">
+          <h3 class="fw-bold">{{ .Params.loc }}</h3>
+          <p>地區</p>
+        </div>
+        <div class="col-4 col-md-4">
+          <h3 class="fw-bold">{{ .Params.construction }}</h3>
+          <p>建案名稱</p>
+        </div>
+        <div class="col-4 col-md-4">
+          <h3 class="fw-bold">{{ .Params.designer }}</h3>
+          <p>設計師</p>
+        </div>
+      </div>
+    </div>
+    <div class="style_house_sec01_box">
+      <div class="style_house_sec01_box-1">
+        <div class="row px-0 mx-0">
+          <div class="col-4 ol-md-4 d-flex align-items-end justify-content-center px-0">
+            <div>
+              <h3 class="fw-bold">{{ .Params.space | safeHTML}}</h3>
+              <!-- <h3 class="fw-bold">書房 主臥</h3> -->
+              <p>設計空間</p>
+            </div>
+          </div>
+          <div class="col-8 col-md-8 d-flex align-items-end justify-content-center px-0">
+            <div>
+              <h3 class="fw-bold">{{ .Params.budget}}</h3>
+              <p>總預算(含設計/裝修/裝潢/系統櫃/家具)</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<hr class="style_house_line">
+<div class="style_house_content">
+  <div class="style_house_sec02">
+    <div class="style_house_sec02_content">
+      <div class="d-flex justify-content-between align-items-center">
+        <span></span>
+        <div class="icon-box">
+          <a href="" id="collection_icon_fb" target="_blank"><img src="/img/icon_fb@2x.png" alt=""></a>
+          <a href="" id="collection_icon_line" target="_blank"><img src="/img/icon_line@2x.png" alt=""></a>
+        </div>
+      </div>
+      <div class="row px-0 mx-0 mt-3">
+        {{ if eq .Params.owner_img "" }}
+        <div class="col-12 pe-0">
+          <div class="sec02_content_text mt-3 mt-lg-0">
+            <h2 class="style_house_subtitle"> {{ .Params.collection_name }}</h2>
+            <p>
+              {{.Params.collection_description | safeHTML }}
+            </p>
+          </div>
+        </div>
+        {{ else }}
+        <div class="col-12 col-lg-5">
+          <img class="img-fluid" src={{ .Params.owner_img }} alt="">
+        </div>
+        <div class="col-12 col-lg-7 pe-0">
+          <div class="sec02_content_text mt-3 mt-lg-0">
+            <h2 class="style_house_subtitle"> {{ .Params.collection_name }}</h2>
+            <p>
+              {{.Params.collection_description | safeHTML }}
+            </p>
+          </div>
+        </div>
+
+        {{ end }}
+      </div>
+    </div>
+  </div>
+
+  {{ if (len .Params.collection_slider) }}
+  <hr class="style_house_line">
+  <div class="style_house_sec02">
+    {{ range .Params.collection_slider }}
+    <div class="img-content">
+      <!-- alt 若為空值則以圖說取代 -->
+      <img class="img-fluid" src="./{{ .slide_img }}"
+        alt="{{ with .slide_alt }}{{ . }}{{ else }}{{ .slide_text }}{{ end }}">
+      <div class="slide_item_text">
+        <p> {{ .slide_text }}</p>
+      </div>
+    </div>
+    {{ end }}
+    <!-- 輪播圖 -->
+    <!-- <div id="slider-loading" class="d-flex justify-content-center mb-5">
+      <div class="spinner-border text-success" role="status" style="color: rgba(128, 143, 76, 1) !important;">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </div> -->
+    <!-- <div class="content" style="opacity: 0;">
+      <div class="slider slider-for style_house_sec02_slide m-auto">
+        {{ range .Params.collection_slider }}
+        <div class="slide-box">
+          <img class="img-fluid slide_single_img" src="./{{ .slide_img }}" alt="{{ .slide_alt }}">
+          <div class="slide_item_text">
+            <p> {{ .slide_text }}</p>
+          </div>
+        </div>
+        {{ end }}
+      </div>
+      <div class="slider slider-nav">
+        {{ range .Params.collection_slider }}
+        <div class="sec02_slide_item">
+          <img class="img-fluid slide_img" src="./{{ .slide_img }}" alt="{{.slide_alt}}">
+        </div>
+        {{ end }}
+      </div>
+    </div> -->
+  </div>
+  {{ end }}
+
+  <hr class="style_house_line">
+  <div class="style_house_sec03">
+    {{ .Content }}
+  </div>
+  <hr class="style_house_line">
+  <a href="/collection/">
+    <p class="article__readMore text-center"> <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到成家故事案例
+    </p>
+  </a>
+</div>
+<hr class="style_house_line ">
+<div class="style_house_content home-content">
+  <div class="style_house_sec06 container-fluid px-0">
+    <div class="row px-0 mx-0">
+      <div class="col-6 col-sm-6 bg-serve ps-0">
+        <a href="/room_planner/">
+          <div class="bg-img"></div>
+        </a>
+      </div>
+      <div class="col-6 col-sm-6 bg-qa pe-0">
+        <a href="/frequently_asked_questions/">
+          <div class="bg-img"></div>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+{{ end }}

layouts/desk/list.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body style="overflow-x: hidden;">
+
+  {{ partial "nav.html" . }}
+  {{ partial "furniture_design.html" . }}
+
+  <div class="furniture-design design-list">
+    <div class="container bhouseweb_loc_content sub-tab-content my-5">
+      <div class="row g-3 mt-3">
+        {{ $paginator := .Paginate .Data.Pages }}
+        {{ range $paginator.Pages }}
+        <div class="col-12 col-md-6 mb-4 my-auto">
+          <div class="position-relative text-item">
+            <a href="{{ .RelPermalink }}">
+              <div>
+                <h4 style="line-height: 32px; width: 100%;">
+                  {{ replace .Title "｜小寶優居・設計家具" "" }}<br>
+                  <span style="font-size: 1rem;">{{ .Params.custom_title_value }}</span>
+                </h4>
+              </div>
+              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
+            </a>
+          </div>
+        </div>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+
+  {{ partial "footer.html" . }}
+  {{ partial "scripts.html" . }}
+</body>
+
+</html>

layouts/dining_chair/list.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body style="overflow-x: hidden;">
+
+  {{ partial "nav.html" . }}
+  {{ partial "furniture_design.html" . }}
+
+  <div class="furniture-design design-list">
+    <div class="container bhouseweb_loc_content sub-tab-content my-5">
+      <div class="row g-3 mt-3">
+        {{ $paginator := .Paginate .Data.Pages }}
+        {{ range $paginator.Pages }}
+        <div class="col-12 col-md-6 mb-4 my-auto">
+          <div class="position-relative text-item">
+            <a href="{{ .RelPermalink }}">
+              <div>
+                <h4 style="line-height: 32px; width: 100%;">
+                  {{ replace .Title "｜小寶優居・設計家具" "" }}<br>
+                  <span style="font-size: 1rem;">{{ .Params.custom_title_value }}</span>
+                </h4>
+              </div>
+              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
+            </a>
+          </div>
+        </div>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+
+  {{ partial "footer.html" . }}
+  {{ partial "scripts.html" . }}
+</body>
+
+</html>

layouts/dining_table/list.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body style="overflow-x: hidden;">
+
+  {{ partial "nav.html" . }}
+  {{ partial "furniture_design.html" . }}
+
+  <div class="furniture-design design-list">
+    <div class="container bhouseweb_loc_content sub-tab-content my-5">
+      <div class="row g-3 mt-3">
+        {{ $paginator := .Paginate .Data.Pages }}
+        {{ range $paginator.Pages }}
+        <div class="col-12 col-md-6 mb-4 my-auto">
+          <div class="position-relative text-item">
+            <a href="{{ .RelPermalink }}">
+              <div>
+                <h4 style="line-height: 32px; width: 100%;">
+                  {{ replace .Title "｜小寶優居・設計家具" "" }}<br>
+                  <span style="font-size: 1rem;">{{ .Params.custom_title_value }}</span>
+                </h4>
+              </div>
+              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
+            </a>
+          </div>
+        </div>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+
+  {{ partial "footer.html" . }}
+  {{ partial "scripts.html" . }}
+</body>
+
+</html>

layouts/frequently_asked_questions/single.html

@@ -0,0 +1,46 @@
+{{ define "main" }}
+<div class="container-fluid p-0">
+  <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>
+  </section>
+
+  <div class="reserve d-flex flex-column">
+    <a href="https://maac.io/1Pife" target="_blank">
+      <img src="/img/bhousev2_img/LINE-CONTACT.png" alt="">
+    </a>
+    <!-- <a href="/store/">
+      <img src="/img/home/store-reserve.png" alt="">
+    </a> -->
+  </div>
+   
+  
+  <div class="accordion accordion-flush" id="accordionPanelsStayOpenExample">
+    {{ .Content }}
+   
+  </div>
+
+  <div class="container-fluid qa-navs mt-5">
+    <div class="row g-3 home-content">
+      <div class="col-6 m-0 bg-portfolio">
+        <a href="/collection/">
+          <div class="bg-img"></div>
+        </a>
+      </div>
+      <div class="col-6 m-0 bg-serve">
+        <a href="/room_planner/">
+          <div class="bg-img"></div>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+{{ end }}

layouts/maincategories/list.html

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body style="overflow-x: hidden;">
+  {{ partial "nav.html" . }}
+  <div class="container-fluid blog-categories p-0">
+    <section class="bhouseweb_loc_banner">
+      <img src="/img/banner/bn_blog@2x.webp" 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;);"
+        aria-label="breadcrumb">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item"><a href="#"><img src="/img/bt_footer_index@2x.png" width="30px" alt="" style="margin-bottom: 5px;"></a></li>
+          <li class="breadcrumb-item"><a href="#">成家知識專欄</a></li>
+          <li class="breadcrumb-item active" aria-current="page">預售屋客變</li>
+        </ol>
+      </nav>
+      <div class="d-flex flex-column align-items-start">
+        <div class="link-list">
+          <button><a href="">客廳</a></button>
+          <button><a href="">主臥</a></button>
+          <button><a href="">客房</a></button>
+          <button><a href="">客廳</a></button>
+          <button><a href="">主臥</a></button>
+          <button><a href="">客房</a></button>
+        </div>
+
+        <div class="bhouseweb_loc_search_box">
+          <form class="bhouseweb_search_form d-flex">
+            <div class="bhouseweb_search_img" style="margin-right: 1vw;">
+              <img src="/img/icon_search@2x.png" alt="">
+            </div>
+            <input id="bhouseweb_search" class="me-md-2" type="search" placeholder="搜尋「客變」「工業風」「三代同堂」"
+              aria-label="Search">
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <div style="border-top: 1px solid #969696;"></div>
+
+    <div class="article">
+
+      {{ $paginator := .Paginate .Data.Pages }}
+      {{ range $paginator.Pages }}
+      <div class="article-item">
+        <a href="{{ .RelPermalink }}">
+          <img src="{{ .Params.Image | relURL }}" alt="">
+        </a>
+        <div class="d-flex flex-column">
+          <a href="{{ .RelPermalink }}">
+            <h4>{{ .Title }}</h4>
+          </a>
+          <p class="mt-auto my-2 fw-bold">{{ .PublishDate.Format "2006-01-02" }}</p>
+          <a href="{{ .RelPermalink }}" class="description">
+            <p style="letter-spacing: 1px;">{{.Params.description }}</p>
+          </a>
+          <!-- <p style="color:#4D4D4D;">{{ .Summary }}</p> -->
+        </div>
+      </div>
+
+      {{ end }}
+      <!-- <div class="article-item">
+        <a href="">
+          <img src="/img//collection/boutique_hotel_slightly_drunk_chill_house_2.webp" alt="">
+        </a>
+        <div class="d-flex flex-column">
+          <a href="">
+            <h4>【客變】 預售屋客變懶人包：客變什麼？這樣做好不好？</h4>
+          </a>
+          <p class="mt-auto mb-0">2021-11-23</p>
+        </div>
+      </div>
+
+      <div class="article-item">
+        <a href="">
+          <img src="/img//collection/boutique_hotel_slightly_drunk_chill_house_2.webp" alt="">
+        </a>
+        <div class="d-flex flex-column">
+          <a href="">
+            <h4>【文章類別】 標題NotoJPBold22級字行距32pt置左</h4>
+          </a>
+          <p class="mt-auto mb-0">2021-11-23</p>
+        </div>
+      </div>
+
+      <div class="article-item">
+        <a href="">
+          <img src="/img//collection/boutique_hotel_slightly_drunk_chill_house_2.webp" alt="">
+        </a>
+        <div class="d-flex flex-column">
+          <a href="">
+            <h4>【文章類別】 標題NotoJPBold22級字行距
+              32pt置左</h4>
+          </a>
+          <p class="mt-auto mb-0">2021-11-23</p>
+        </div>
+      </div> -->
+
+      <a class="nav-link article_readMore" href="#">＜ 回到成家知識庫</a>
+    </div>
+  </div>
+
+  {{ partial "footer.html" . }}
+  {{ partial "scripts.html" . }}
+</body>
+
+</html>

layouts/maincategories/single.html

@@ -0,0 +1,59 @@
+{{ define "main" }}
+<div class="container-fluid blog_article p-0">
+    <section class="bhouseweb_loc_banner">
+      <img src="/img/banner/bn_blog@2x.webp" class="banner-img card-img" alt="...">
+    </section>
+    <div class="content">
+      
+        <h3>{{ .Title }}</h3>
+        <div class="d-flex justify-content-between align-items-center">
+          <span>{{ .PublishDate.Format "2006-01-02" }}</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>
+        <span class="line"></span>
+        <p>「我買了預售屋，有很多客變的想法！建設公司通知我要客變了，但我不知道這樣做好不好？」</p>
+      <br>
+      <p>「客變」是許多人在成家過程中遇到的第一個考題，對新手買房的屋主來說，要在短時間決定影響未來生活機
+        能的客變項目，甚至在對格局、生活需求沒有想像時，決定要做哪些更動，是有難度的。</p>
+      <br>
+      <div class="question-box">
+        <p>
+          {{ .Params.question_box_intro }}
+        </p>
+        {{ .TableOfContents }}
+        <!-- <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>
+     
+      <div class="blog-content">
+        {{ .Content }}
+      </div>
+      
+      <a class="nav-link" href="/blog">
+        <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>
+    </div>
+  </div>
+</div>
+{{ end }}

layouts/mattress/list.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- 床組 -->
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body style="overflow-x: hidden;">
+
+  {{ partial "nav.html" . }}
+  {{ partial "furniture_design.html" . }}
+
+  <div class="furniture-design design-list">
+    <div class="container bhouseweb_loc_content sub-tab-content my-5">
+      <div class="row g-3 mt-3">
+        {{ $paginator := .Paginate .Data.Pages }}
+        {{ range $paginator.Pages }}
+        <div class="col-12 col-md-6 mb-4 my-auto">
+          <div class="position-relative text-item">
+            <a href="{{ .RelPermalink }}">
+              <div>
+                <h4 style="line-height: 32px; width: 100%;">
+                  {{ replace .Title "｜小寶優居・設計家具" "" }}<br>
+                  <span class="custom-title">{{ .Params.custom_title_value }}</span>
+                </h4>
+              </div>
+              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
+            </a>
+          </div>
+        </div>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+
+  {{ partial "footer.html" . }}
+  {{ partial "scripts.html" . }}
+</body>
+
+</html>

layouts/news/list.html

@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body style="overflow-x: hidden;">
+  {{ partial "nav.html" . }}
+  <section class="bhouseweb_loc_banner">
+    <img src="/img/banner/bn_news@2x.png" class="banner-img card-img" alt="...">
+  </section>
+
+  <div class="bhouseweb_loc_content mb-80">
+    <section class="bhouseweb_loc_sec02 mt-80">
+      {{ $paginator := .Paginate .Data.Pages }}
+      {{ range $paginator.Pages }}
+      <div class="bhouse_news my-50 article-item">
+        <div class="likeSee__state pl-md-0 pr-md-0">
+          <div class="likeSee__state">
+            <a href="{{ .RelPermalink }}">
+              <h1 class="bhouse_title">{{ .Title }}</h1>
+            </a>
+          </div>
+          <div class="likeSee__state__filter">
+            <p>{{ .PublishDate.Format "2006-01-02" }}</p>
+          </div>
+        </div>
+        <div class="bhouseweb_loc_sec mt-15">
+          <a style="color:#212529" href="{{ .RelPermalink }}" class="description">
+            <div class="NewsDescription">
+              <p class="NewsDescription_p" style="letter-spacing: 1px;">{{.Summary}}</p>
+            </div>
+          </a>
+        </div>
+      </div>
+      <hr class="bhouseweb_loc_line mt-30">
+      {{ end }}
+
+
+      <!--<div class="bhouse_news my-50">
+        <div class="likeSee__state pl-md-0 pr-md-0">
+          <div class="likeSee__state">
+            <a href="/news/news_page">
+              <h1 class="bhouse_title">【門市公告】新北門市移點，營業時間調整說明</h1>
+            </a>
+          </div>
+          <div class="likeSee__state__filter">
+            <p>2021-08-23</p>
+          </div>
+        </div>
+        <div class="bhouseweb_loc_sec mt-15">
+          <p>從你與家人的生活出發，透過你們的生活習慣，打造實用面的設計與喜歡的風格，完成獨一無二，屬於你們家的風格。</p>
+        </div>
+      </div>
+      <hr class="bhouseweb_loc_line mt-30">
+      <div class="bhouse_news my-50">
+        <div class="likeSee__state pl-md-0 pr-md-0">
+          <div class="likeSee__state">
+            <h1 class="bhouse_title">【公告類別】標題NotoJPBold18級字行距26pt 置左上限28字元跨行</h1>
+          </div>
+          <div class="likeSee__state__filter">
+            <p>2021-08-23</p>
+          </div>
+        </div>
+        <div class="bhouseweb_loc_sec mt-15">
+          <p>從你與家人的生活出發，透過你們的生活習慣，打造實用面的設計與喜歡的風格，完成獨一無二，屬於你們家的風格。</p>
+        </div>
+      </div>
+      <hr class="bhouseweb_loc_line mt-30">
+      <div class="bhouse_news my-50">
+        <div class="likeSee__state pl-md-0 pr-md-0">
+          <div class="likeSee__state">
+            <h1 class="bhouse_title">【公告類別】標題NotoJPBold18級字行距26pt 置左上限28字元跨行</h1>
+          </div>
+          <div class="likeSee__state__filter">
+            <p>2021-08-23</p>
+          </div>
+        </div>
+        <div class="bhouseweb_loc_sec mt-15">
+          <p>從你與家人的生活出發，透過你們的生活習慣，打造實用面的設計與喜歡的風格，完成獨一無二，屬於你們家的風格。</p>
+        </div>
+      </div>
+      <hr class="bhouseweb_loc_line mt-30">
+      <div class="bhouse_news my-50">
+        <div class="likeSee__state pl-md-0 pr-md-0">
+          <div class="likeSee__state">
+            <h1 class="bhouse_title">【門市公告】新北門市移點，營業時間調整說明</h1>
+          </div>
+          <div class="likeSee__state__filter">
+            <p>2021-08-23</p>
+          </div>
+        </div>
+        <div class="bhouseweb_loc_sec mt-15">
+          <p>從你與家人的生活出發，透過你們的生活習慣，打造實用面的設計與喜歡的風格，完成獨一無二，屬於你們家的風格。</p>
+        </div>
+      </div>
+      <hr class="bhouseweb_loc_line mt-30">
+      <div class="bhouse_news my-50">
+        <div class="likeSee__state pl-md-0 pr-md-0">
+          <div class="likeSee__state">
+            <h1 class="bhouse_title">【門市公告】新北門市移點，營業時間調整說明</h1>
+          </div>
+          <div class="likeSee__state__filter">
+            <p>2021-08-23</p>
+          </div>
+        </div>
+        <div class="bhouseweb_loc_sec mt-15">
+          <p>從你與家人的生活出發，透過你們的生活習慣，打造實用面的設計與喜歡的風格，完成獨一無二，屬於你們家的風格。</p>
+        </div>
+      </div>
+      <hr class="bhouseweb_loc_line mt-30">
+      <div class="bhouse_news my-50">
+        <div class="likeSee__state pl-md-0 pr-md-0">
+          <div class="likeSee__state">
+            <h1 class="bhouse_title">【門市公告】新北門市移點，營業時間調整說明</h1>
+          </div>
+          <div class="likeSee__state__filter">
+            <p>2021-08-23</p>
+          </div>
+        </div>
+        <div class="bhouseweb_loc_sec mt-15">
+          <p>從你與家人的生活出發，透過你們的生活習慣，打造實用面的設計與喜歡的風格，完成獨一無二，屬於你們家的風格。</p>
+        </div>
+      </div>-->
+    </section>
+    <p class="article__readMore text-center fw-bold mt-5">看更多消息 <span style="font-size: 14px;" class="fw-normal me-2">
+        &or;</span></p>
+  </div>
+  {{ partial "footer.html" . }}
+  {{ partial "scripts.html" . }}
+</body>
+
+</html>

layouts/news/single.html

@@ -0,0 +1,30 @@
+{{ define "main" }}
+<div class="container-fluid blog_article p-0">
+    <section class="bhouseweb_loc_banner">
+    </section>
+    <div class="content">
+      
+        <h3>{{ .Title }}</h3>
+        <div class="d-flex justify-content-between align-items-center">
+          <span>{{ .PublishDate.Format "2006-01-02" }}</span>
+          <div class="icon-box">
+            <a href="" id="collection_icon_fb" target="_blank"><img src="/img/icon_fb@2x.png" alt=""></a>
+            <a href="" id="collection_icon_line" target="_blank"><img src="/img/icon_line@2x.png" alt=""></a>
+          </div>
+        </div>
+        <span class="line"></span>
+        
+      <div class="news-content">
+        {{ .Content }}
+      </div>
+      <hr class="bhouseweb_loc_line">
+      </div>
+    </section>
+    <a href="/news">
+      <p class="article__readMore text-center fw-bold"> <span style="font-size: 18px;"
+          class="fw-normal me-2">&lt;</span>回到最新消息公告</p>
+    </a>
+    </div>
+  </div>
+  {{ end }}
+  

layouts/other_furniture/list.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body style="overflow-x: hidden;">
+
+  {{ partial "nav.html" . }}
+  {{ partial "furniture_design.html" . }}
+
+  <div class="furniture-design design-list">
+    <div class="container bhouseweb_loc_content sub-tab-content my-5">
+      <div class="row g-3 mt-3">
+        {{ $paginator := .Paginate .Data.Pages }}
+        {{ range $paginator.Pages }}
+        <div class="col-12 col-md-6 mb-4 my-auto">
+          <div class="position-relative text-item">
+            <a href="{{ .RelPermalink }}">
+              <div>
+                <h4 style="line-height: 32px; width: 100%;">
+                  {{ replace .Title "｜小寶優居・設計家具" "" }}<br>
+                  <span style="font-size: 1rem;">{{ .Params.custom_title_value }}</span>
+                </h4>
+              </div>
+              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
+            </a>
+          </div>
+        </div>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+
+  {{ partial "footer.html" . }}
+  {{ partial "scripts.html" . }}
+</body>
+
+</html>

layouts/room_planner/room_planner.html

@@ -0,0 +1,1624 @@
+<!DOCTYPE html>
+<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">
+
+  <link rel="stylesheet" href="/css/style.css">
+  <title>小寶優居-首購族首選 安心成家 室內設計品牌</title> -->
+  {{ partial "headers.html" . }}
+
+</head>
+
+<body style="overflow-x: hidden;">
+  {{ partial "nav.html" . }}
+
+  <div class="room-planner">
+    <section class="bhouseweb_loc_banner">
+      <div class="card bg-transparent text-white border-0 rounded-0">
+        <h1>成家設計服務</h1>
+        <!-- <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>
+    </section>
+
+    <section class="sub-banner">
+      <div class="text-center room-planner-service" data-aos="fade-in" data-aos-duration="1000" data-aos-delay="50">
+        <h2 class="mark-title">
+          <span class="room-planner-service-no">3</span>大服務項目
+        </h2>
+        <!-- <mark><span class="room-planner-service-no">3</span>大服務項目</mark> -->
+      </div>
+      <!-- <img src="/img/icon_serve@2x.png" alt=""> -->
+      <div class="room-planner-service-icon-box">
+        <div class="row px-0 mx-0">
+          <div class="col-12 col-md-4 col-lg-4 room-planner-service-icon-box-item">
+            <div class="row px-0 mx-0">
+              <div class="col-4 col-md-12">
+                <div class="icon-radius" data-aos="fade-in" data-aos-duration="1000">
+                  <img class="icon-radius-img01" src="/img/room_planner/Group.png" alt="">
+                </div>
+              </div>
+              <div class="col-8 col-md-12">
+                <h3 class="icon-radius-text" data-aos="fade-in" data-aos-duration="1000" data-aos-delay="50">成家設計服務</h3>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 col-md-4 col-lg-4 room-planner-service-icon-box-item">
+            <div class="row px-0 mx-0">
+              <div class="col-4 col-md-12">
+                <div class="icon-radius" data-aos="fade-in" data-aos-duration="1000">
+                  <img class="icon-radius-img02" src="/img/room_planner/Group-1.png" alt="">
+                </div>
+              </div>
+              <div class="col-8 col-md-12">
+                <h3 class="icon-radius-text" data-aos="fade-in" data-aos-duration="1000" data-aos-delay="50">安心裝修服務</h3>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-12 col-md-4 col-lg-4 room-planner-service-icon-box-item">
+            <div class="row px-0 mx-0">
+              <div class="col-4 col-md-12">
+                <div class="icon-radius" data-aos="fade-in" data-aos-duration="1000">
+                  <img class="icon-radius-img03" src="/img/room_planner/Group-2.png" alt="">
+                </div>
+              </div>
+              <div class="col-8 col-md-12">
+                <h3 class="icon-radius-text" data-aos="fade-in" data-aos-duration="1000" data-aos-delay="50">家具與系統櫃</h3>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- 桌機版 -->
+    <section class="room-planner-process room-planner-process-destop">
+      <img class="room-planner-process-star-yellow" src="/img/room_planner/yellow.png" alt="" width="20">
+      <img class="room-planner-process-star-green" src="/img/room_planner/green.png" alt="" width="20">
+
+      <img class="room-planner-process-house" src="/img/room_planner/house.png" alt="">
+      <img class="room-planner-process-ruler2" data-aos="fade-in" data-aos-duration="1000"
+        src="/img/room_planner/ruler2.png" alt="" width="118">
+
+      <div class="room-planner-process-box">
+        <img class="room-planner-process-box_line_01 img-fluid" src="/img/blog/Vector01.png" alt="">
+        <div class="container px-0">
+          <div class="row px-0 mx-0 justify-content-between">
+            <div class="col-6 col-md-auto">
+              <div data-gt-target="#scrollTarget1" data-gt-duration="500" data-gt-offset="50">
+                <div class="room-planner-process-icon-number"><img src="/img/room_planner/01.png" alt="" width="38">
+                </div>
+                <div class="room-planner-process-icon">
+                  <img src="/img/room_planner/Group-10.png" alt="" width="61">
+                </div>
+                <p class="room-planner-process-icon-text">需求諮詢</p>
+              </div>
+              <div class="room-planner-process-box_mb_line"></div>
+            </div>
+            <div class="col-6 col-md-auto">
+              <div data-gt-target="#scrollTarget2" data-gt-duration="500" data-gt-offset="50">
+                <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/02.png" alt=""
+                    width="38"></div>
+                <div class="room-planner-process-icon">
+                  <img src="/img/room_planner/Group-11.png" alt="" width="54">
+                </div>
+                <p class="room-planner-process-icon-text">成家設計</p>
+              </div>
+              <div class="room-planner-process-box_mb_line2"></div>
+            </div>
+            <div class="col-6 col-md-auto">
+              <div data-gt-target="#scrollTarget3" data-gt-duration="500" data-gt-offset="50">
+                <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/03.png" alt=""
+                    width="45"></div>
+
+                <div class="room-planner-process-icon">
+                  <img src="/img/room_planner/Group-12.png" alt="" width="47">
+                </div>
+                <p class="room-planner-process-icon-text">設計報價</p>
+              </div>
+              <div class="room-planner-process-box_mb_line"></div>
+            </div>
+            <div class="col-6 col-md-auto">
+              <div data-gt-target="#scrollTarget4" data-gt-duration="500" data-gt-offset="50">
+                <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/04.png" alt=""
+                    width="45"></div>
+
+                <div class="room-planner-process-icon">
+                  <img src="/img/room_planner/Group-13.png" alt="" width="58">
+                </div>
+                <p class="room-planner-process-icon-text">確認付款</p>
+              </div>
+              <div class="room-planner-process-box_mb_line2"></div>
+
+            </div>
+            <div class="col-6 col-md-auto">
+              <div data-gt-target="#scrollTarget5" data-gt-duration="500" data-gt-offset="20">
+                <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/05.png" alt=""
+                    width="45"></div>
+                <div class="room-planner-process-icon">
+                  <img src="/img/room_planner/Group-14.png" alt="" width="54">
+                </div>
+                <p class="room-planner-process-icon-text">施工保固</p>
+              </div>
+            </div>
+            <div class="col d-md-none d-block">
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- 手機版 -->
+
+    <!-- <section class="room-planner-process room-planner-process-mb">
+      <img class="room-planner-process-star-yellow" src="/img/room_planner/yellow.png" alt="" width="20">
+      <img class="room-planner-process-star-green" src="/img/room_planner/green.png" alt="" width="20">
+
+      <img class="room-planner-process-house" src="/img/room_planner/house.png" alt="">
+      <img class="room-planner-process-ruler2" data-aos="fade-in" data-aos-duration="1000"
+        src="/img/room_planner/ruler2.png" alt="" width="118">
+
+      <div class="room-planner-process-box">
+        <img class="room-planner-process-box_line_01 img-fluid" src="/img/blog/Vector01.png" alt="">
+        <div class="container px-0">
+          <div class="row px-0 mx-0 justify-content-between">
+            <div class="col-6 col-md-auto">
+              <div data-gt-target="#scrollTarget1-m" data-gt-duration="500" data-gt-offset="20">
+                <div class="room-planner-process-icon-number"><img src="/img/room_planner/01.png" alt="" width="38">
+                </div>
+                <div class="room-planner-process-icon">
+                  <img src="/img/room_planner/Group-10.png" alt="" width="61">
+                </div>
+                <p class="room-planner-process-icon-text">需求諮詢</p>
+              </div>
+              <div class="room-planner-process-box_mb_line"></div>
+            </div>
+            <div class="col-6 col-md-auto">
+              <div data-gt-target="#scrollTarget2-m" data-gt-duration="500" data-gt-offset="20">
+                <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/02.png" alt=""
+                    width="38"></div>
+                <div class="room-planner-process-icon">
+                  <img src="/img/room_planner/Group-11.png" alt="" width="54">
+                </div>
+                <p class="room-planner-process-icon-text">成家設計</p>
+              </div>
+              <div class="room-planner-process-box_mb_line2"></div>
+            </div>
+            <div class="col-6 col-md-auto">
+              <div data-gt-target="#scrollTarget3-m" data-gt-duration="500" data-gt-offset="20">
+                <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/03.png" alt=""
+                    width="45"></div>
+
+                <div class="room-planner-process-icon">
+                  <img src="/img/room_planner/Group-12.png" alt="" width="47">
+                </div>
+                <p class="room-planner-process-icon-text">設計報價</p>
+              </div>
+              <div class="room-planner-process-box_mb_line"></div>
+            </div>
+            <div class="col-6 col-md-auto">
+              <div data-gt-target="#scrollTarget4-m" data-gt-duration="500" data-gt-offset="20">
+                <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/04.png" alt=""
+                    width="45"></div>
+
+                <div class="room-planner-process-icon">
+                  <img src="/img/room_planner/Group-13.png" alt="" width="58">
+                </div>
+                <p class="room-planner-process-icon-text">確認付款</p>
+              </div>
+              <div class="room-planner-process-box_mb_line2"></div>
+
+            </div>
+            <div class="col-6 col-md-auto">
+              <div data-gt-target="#scrollTarget5-m" data-gt-duration="500" data-gt-offset="20">
+                <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/05.png" alt=""
+                    width="45"></div>
+                <div class="room-planner-process-icon">
+                  <img src="/img/room_planner/Group-14.png" alt="" width="54">
+                </div>
+                <p class="room-planner-process-icon-text">施工保固</p>
+              </div>
+            </div>
+            <div class="col d-md-none d-block">
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </section> -->
+
+    <div class="process d-lg-none d-block">
+      <img class="house_img" src="/img/blog/house.png" alt="" data-aos="fade-in" data-aos-duration="1000">
+      <img class="star_green" src="/img/blog/star_green.png" alt="" data-aos="fade-in" data-aos-duration="1000">
+      <img class="star_yellow" src="/img/blog/star_yellow.png" alt="" data-aos="fade-in" data-aos-duration="1000">
+
+      <div class="container process_mb">
+        <div class="row w-100">
+          <div class="col-6 col-md-auto">
+            <section>
+              <img src="/img/room_planner/icon/step01.png" alt="" data-gt-target="#scrollTarget1-m"
+                data-gt-duration="500" data-gt-offset="0">
+              <span>
+                <img src="/img/blog/number/01.png" alt="">
+              </span>
+              <h4>需求諮詢</h4>
+            </section>
+            <span class="dot_mb"></span>
+            <div class="mb_line_01"></div>
+          </div>
+          <div class="col-6 col-md-auto">
+            <section>
+              <img src="/img/room_planner/icon/step02.png" alt="" data-gt-target="#scrollTarget2-m"
+                data-gt-duration="500" data-gt-offset="0">
+              <span>
+                <img src="/img/blog/number/02.png" alt="">
+              </span>
+              <h4>成家設計</h4>
+            </section>
+            <div class="mb_line_02"></div>
+            <div class="mb_line_03"></div>
+          </div>
+          <div class="col-6 col-md-auto">
+            <section>
+              <img src="/img/room_planner/icon/step03.png" alt="" data-gt-target="#scrollTarget3-m"
+                data-gt-duration="500" data-gt-offset="0">
+              <span>
+                <img src="/img/blog/number/03.png" alt="">
+              </span>
+              <h4>設計報價</h4>
+            </section>
+            <div class="mb_line_01"></div>
+          </div>
+          <div class="col-6 col-md-auto">
+            <section>
+              <img src="/img/room_planner/icon/step04.png" alt="" data-gt-target="#scrollTarget4-m"
+                data-gt-duration="500" data-gt-offset="0">
+              <span>
+                <img src="/img/blog/number/04.png" alt="">
+              </span>
+              <h4>確認付款</h4>
+            </section>
+            <div class="mb_line_02"></div>
+            <div class="mb_line_03"></div>
+          </div>
+          <div class="col-6 col-md-auto mx-md-auto m-0">
+            <section style="margin-right: 0; position: relative;">
+              <img src="/img/room_planner/icon/step05.png" alt="" data-gt-target="#scrollTarget5-m"
+                data-gt-duration="500" data-gt-offset="0">
+              <span>
+                <img src="/img/blog/number/05.png" alt="">
+              </span>
+              <h4>施工保固</h4>
+            </section>
+            <!-- <div class="mb_line_01"></div> -->
+          </div>
+        </div>
+      </div>
+      <img class="room-planner-process-ruler2" data-aos="fade-in" data-aos-duration="1000"
+        src="/img/room_planner/ruler2.png" alt="" width="118">
+    </div>
+
+    <div class="mt-50 section-room-planner-process-mb-main">
+      <div class="about-page section-b-space room-planner-process-mb-main">
+
+        <div class="container min">
+          <div style="position:relative;" class="room-planner-process-main-title-box border-E0EE79">
+            <h2 class="room-planner-process-main-title">室內設計、裝修服務流程</h2>
+          </div>
+          <div class="accordion px-0" id="accordionPanelsStayOpenExample">
+            <div class="accordion-item" id="scrollTarget1-m">
+              <h2 class="accordion-header" id="panelsStayOpen-headingOne">
+                <button class="accordion-button fw-bold" type="button" data-bs-toggle="collapse"
+                  data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false"
+                  aria-controls="panelsStayOpen-collapseOne">
+                  <h2><span class="steup-mb-title">Step 1：</span><span class="step-sub-title"
+                      style="background-color:#fff ;">需求諮詢</span> </h2>
+                </button>
+                <div data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false"
+                  aria-controls="panelsStayOpen-collapseOne">
+                  <div class="text-center">
+                    <img class="img-fluid" src="/img/room_planner/step1-0.png" alt="" width="151">
+                  </div>
+                  <div class="room-planner-process-main-content-step-img">
+                    <img class="img-fluid" src="/img/room_planner/step1-1.png" alt="">
+                  </div>
+                </div>
+              </h2>
+              <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
+                aria-labelledby="panelsStayOpen-headingOne">
+                <div class="accordion-body">
+                  <div class="room-planner-process-main-content-left">
+                    <div class="room-planner-process-main-content-left-box">
+                      <div class="room-planner-process-main-content-left-step">
+                        <!-- <div class="room-planner-process-main-content-left-step-item d-flex">
+                          <div>
+                            <div class="step-number-circle me-2 mt-03">
+                              <span class="step-number">1</span>
+                            </div>
+                          </div>
+                          <div>
+                            <span class="f-649E2E-24">官網預約</span>
+                            <p class="f-2A2A2A-16-400">填寫表單，讓我們初步瞭解你的成家需求。</p>
+                          </div>
+                        </div>
+                        <div class="room-planner-process-main-content-left-step-item d-flex">
+                          <div>
+                            <div class="step-number-circle me-2 mt-03">
+                              <span class="step-number">2</span>
+                            </div>
+                          </div>
+                          <div>
+                            <span class="f-649E2E-24">專人聯繫</span>
+                            <p class="f-2A2A2A-16-400">三日內，將有專人聯繫，了解你的需求、幫你預約成家設計師。</p>
+                          </div>
+                        </div> -->
+                        <div class="room-planner-process-main-content-left-step-item d-flex">
+                          <div>
+                            <div class="step-number-circle me-2 mt-03">
+                              <span class="step-number">1</span>
+                            </div>
+                          </div>
+                          <div>
+                            <h3 class="f-649E2E-24">門市諮詢</h3>
+                            <p class="f-2A2A2A-16-400">到小寶優居的「成家故事館」，讓成家設計師陪伴你，了解成家的過程、諮詢設計服務與預算規劃。</p>
+                          </div>
+                        </div>
+                        <!-- <div class="dottedline"></div> -->
+                        <!-- <hr class="dotted"> -->
+                        <img class="img-fluid mb-3" src="/img/room_planner/web.svg" alt="">
+
+                        <div class="room-planner-process-main-content-left-step-item d-flex">
+                          <div>
+                            <div class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                              <span class="step-qa-q">Q</span>
+                            </div>
+                          </div>
+                          <div>
+                            <p class="f-649E2E-18 mb-0">可以提供預算的建議嗎？</p>
+                            <!-- <p class="f-2A2A2A-16-400">到小寶優居的「成家故事館」，讓成家設計師陪伴你，了解成家的過程、諮詢設計服務與預算規劃。</p> -->
+                          </div>
+                        </div>
+                        <div class="room-planner-process-main-content-left-step-item d-flex mt-3">
+                          <div>
+                            <div style="background:#F6DC63;"
+                              class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                              <span style="color:#736357;" class="step-qa-q">A</span>
+                            </div>
+                          </div>
+                          <div>
+                            <p class="f-2A2A2A-16-400">成家設計服務的預算規劃參考(含設計、裝修裝潢、系統櫃、家具)</p>
+                            <p class="f-2A2A2A-16-400"><span class="f-649E2E-18">無拆除工程</span> 全室設計約<span
+                                class="f-649E2E-20-q"> 2~4 </span>萬/權狀坪</p>
+                            <p class="f-2A2A2A-16-400"><span class="f-649E2E-18">需要拆除工程</span> 全室設計約<span
+                                class="f-649E2E-20-q"> 2.5~5 </span> 萬/權狀坪</p>
+                            <p class="f-2A2A2A-16-400"><span class="f-649E2E-18">需要拆除工程、管線更新</span>全室設計約<span
+                                class="f-649E2E-20-q"> 3~6 </span>萬/權狀坪</p>
+                          </div>
+                        </div>
+                        <!-- <hr class="dotted"> -->
+                        <img class="img-fluid mb-3" src="/img/room_planner/web.svg" alt="">
+
+                        <div class="room-planner-process-main-content-left-step-item d-flex">
+                          <div>
+                            <div class="step-number-circle me-2 mt-03">
+                              <span class="step-number">2</span>
+                            </div>
+                          </div>
+                          <div>
+                            <h3 class="f-649E2E-24">設計簽約</h3>
+                            <p class="f-2A2A2A-16-400">決定將家交給小寶優居時，我們會先簽訂<span
+                                class="f-649E2E-18">《成家設計服務合約》</span>，並支付設計訂金，簽約後會正式開始你家的成家設計。</p>
+                          </div>
+                        </div>
+                        <!-- <hr class="dotted"> -->
+                        <img class="img-fluid mb-3" src="/img/room_planner/web.svg" alt="">
+
+                        <div class="room-planner-process-main-content-left-step-item d-flex">
+                          <div>
+                            <div class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                              <span class="step-qa-q">Q</span>
+                            </div>
+                          </div>
+                          <div>
+                            <p class="f-649E2E-18 mb-0">成家設計服務的訂金是多少？</p>
+                            <!-- <p class="f-2A2A2A-16-400">到小寶優居的「成家故事館」，讓成家設計師陪伴你，了解成家的過程、諮詢設計服務與預算規劃。</p> -->
+                          </div>
+                        </div>
+                        <div class="d-flex mt-3">
+                          <div>
+                            <div style="background:#F6DC63;"
+                              class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                              <span style="color:#736357;" class="step-qa-q">A</span>
+                            </div>
+                          </div>
+                          <div>
+                            <p class="f-2A2A2A-16-400">《成家設計服務合約》內的訂金，是指空間設計費用的訂金，空間設計費用以空間計算：</p>
+                            <p class="f-2A2A2A-16-400">一個空間設計費 <span class="f-649E2E-18">1</span> 萬元，訂金為 <span
+                                class="f-649E2E-18">3</span> 千元。</p>
+                            <p class="f-2A2A2A-16-400">你在小寶優居的系統櫃、家具消費，可折抵空間設計費用，支付金額每滿 <span
+                                class="f-649E2E-18">8</span>
+                              萬元，可折抵一個空間的設計費 <span class="f-649E2E-18">1</span> 萬元。</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="accordion-item" id="scrollTarget2-m">
+              <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
+                <button class="accordion-button collapsed fw-bold" type="button" data-bs-toggle="collapse"
+                  data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
+                  aria-controls="panelsStayOpen-collapseTwo">
+                  <h2><span class="steup-mb-title">Step 2：</span><span class="step-sub-title"
+                      style="background-color:#fff ;">成家設計</span> </h2>
+                </button>
+                <div data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
+                  aria-controls="panelsStayOpen-collapseTwo">
+                  <img class="img-fluid" src="/img/room_planner/step2.png" alt="">
+                </div>
+              </h2>
+              <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
+                aria-labelledby="panelsStayOpen-headingTwo">
+                <div class="accordion-body">
+                  <div class="room-planner-process-main-content-left">
+                    <div class="room-planner-process-main-content-left-box">
+
+                      <div class="room-planner-process-main-content-left-step">
+                        <div class="room-planner-process-main-content-left-step-item d-flex">
+                          <div>
+                            <div class="step-number-circle me-2 mt-03">
+                              <span class="step-number">3</span>
+                            </div>
+                          </div>
+                          <div>
+                            <h3 class="f-649E2E-24">到府服務</h3>
+                            <p class="f-2A2A2A-16-400">成家設計師到府進行以下事項，詳細的了解你家，跟你現在的生活。</p>
+                            <div class="room-planner-service-5-service-inf d-flex">
+                              <ul class="me-2 list">
+                                <li class="f-2A2A2A-16-400">生活習慣調查</li>
+                                <li class="f-2A2A2A-16-400">風格測驗</li>
+                                <li class="f-2A2A2A-16-400">空間丈量</li>
+                              </ul>
+                            </div>
+                            <p class="f-2A2A2A-16-400">接著就會進行設計，完成後設計師會再約你到門市確認設計。</p>
+                          </div>
+                        </div>
+                        <div class="room-planner-process-main-content-left-step-item d-flex">
+                          <div>
+                            <div class="step-number-circle me-2 mt-03">
+                              <span class="step-number">4</span>
+                            </div>
+                          </div>
+                          <div>
+                            <h3 class="f-649E2E-24">確認設計</h3>
+                            <p class="f-2A2A2A-16-400">成家設計師會以《平面配置圖》與《3D渲染彩圖》，向你提案未來家的設計，內容包含：</p>
+                            <div class="room-planner-service-5-service-inf d-flex">
+                              <ul class="me-1">
+                                <li class="f-2A2A2A-16-400">生活動線計畫</li>
+                                <li class="f-2A2A2A-16-400">色彩計畫</li>
+                                <li class="f-2A2A2A-16-400">用料材質</li>
+                              </ul>
+                              <ul>
+
+                                <li class="f-2A2A2A-16-400">收納計畫</li>
+                                <li class="f-2A2A2A-16-400">裝修項目</li>
+                                <li class="f-2A2A2A-16-400">搭配的家具與系統櫃</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="accordion-item" id="scrollTarget3-m">
+              <h2 class="accordion-header" id="panelsStayOpen-headingThree">
+                <button class="accordion-button collapsed fw-bold" type="button" data-bs-toggle="collapse"
+                  data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false"
+                  aria-controls="panelsStayOpen-collapseThree">
+                  <h2><span class="steup-mb-title">Step 3：</span><span class="step-sub-title"
+                      style="background-color:#fff ;">設計報價</span> </h2>
+                </button>
+                <div data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false"
+                  aria-controls="panelsStayOpen-collapseThree">
+                  <img class="img-fluid" src="/img/room_planner/step3.png" alt="">
+                </div>
+
+              </h2>
+              <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse"
+                aria-labelledby="panelsStayOpen-headingThree">
+                <div class="accordion-body">
+                  <div class="room-planner-process-main-content-left">
+                    <div class="room-planner-process-main-content-left-box">
+                      <div class="room-planner-process-main-content-left-step">
+                        <div class="room-planner-process-main-content-left-step-item d-flex">
+                          <div>
+                            <p class="f-2A2A2A-16-400">小寶優居的報價分為兩個部分：</p>
+                            <div class="room-planner-service-5-service-inf d-flex">
+                              <ul class="me-2">
+                                <li class="f-2A2A2A-16-400">家具、系統櫃報價</li>
+                              </ul>
+                              <ul class="me-2">
+                                <li class="f-2A2A2A-16-400">安心裝修報價</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="room-planner-process-main-content-left-step-item d-flex">
+                          <div>
+                            <div class="step-number-circle me-2 mt-03">
+                              <span class="step-number">5</span>
+                            </div>
+                          </div>
+                          <div>
+                            <h3 class="f-649E2E-24">家具、系統櫃報價</h3>
+                            <p class="f-2A2A2A-16-400">在確認家具、系統櫃設計內容後，成家設計師會提供完整的報價單，與你進行最終設計確認。</p>
+                          </div>
+                        </div>
+                        <div class="room-planner-process-main-content-left-step-item d-flex">
+                          <div>
+                            <div class="step-number-circle me-2 mt-03">
+                              <span class="step-number">6</span>
+                            </div>
+                          </div>
+                          <div>
+                            <h3 class="f-649E2E-24">安心裝修報價</h3>
+                            <p class="f-2A2A2A-16-400">依照你與成家設計師共同定案的設計內容，小寶優居安排安心裝修師傅到府場勘。
+                              一週後，你、成家設計師、安心裝修師傅三方，一起到門市討論裝修內容。<br>
+                              確認裝修細節後，提供完整的報價單，並簽訂<span class="f-649E2E-18">《安心裝修服務合約》</span>。</p>
+                          </div>
+                        </div>
+                        <!-- <hr class="dotted"> -->
+                        <img class="img-fluid mb-3" src="/img/room_planner/web.svg" alt="">
+
+                        <div class="room-planner-process-main-content-left-step-item d-flex">
+                          <div>
+                            <div class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                              <span class="step-qa-q">Q</span>
+                            </div>
+                          </div>
+                          <div>
+                            <p class="f-649E2E-18 mb-0">什麼是安心裝修服務？</p>
+                            <!-- <p class="f-2A2A2A-16-400">到小寶優居的「成家故事館」，讓成家設計師陪伴你，了解成家的過程、諮詢設計服務與預算規劃。</p> -->
+                          </div>
+                        </div>
+                        <div class="d-flex mt-3">
+                          <div>
+                            <div style="background:#F6DC63;"
+                              class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                              <span style="color:#736357;" class="step-qa-q">A</span>
+                            </div>
+                          </div>
+                          <div>
+                            <p class="f-2A2A2A-16-400">安心裝修服務是小寶優居提供的裝修履約保證服務，裝修總價 <span class="f-649E2E-18">5%</span>
+                              為安心裝修服務費。</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="accordion-item" id="scrollTarget4-m">
+              <h2 class="accordion-header" id="panelsStayOpen-headingFour">
+                <button class="accordion-button collapsed fw-bold" type="button" data-bs-toggle="collapse"
+                  data-bs-target="#panelsStayOpen-collapseFour" aria-expanded="false"
+                  aria-controls="panelsStayOpen-collapseFour">
+                  <h2><span class="steup-mb-title">Step 4：</span><span class="step-sub-title"
+                      style="background-color:#fff ;">確認付款</span> </h2>
+                </button>
+                <div class="text-center" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseFour"
+                  aria-expanded="false" aria-controls="panelsStayOpen-collapseFour">
+                  <img class="img-fluid" src="/img/room_planner/step4.png" alt="" width="226">
+                </div>
+              </h2>
+              <div id="panelsStayOpen-collapseFour" class="accordion-collapse collapse"
+                aria-labelledby="panelsStayOpen-headingFour">
+                <div class="accordion-body">
+                  <div class="room-planner-process-main-content-left">
+                    <div class="room-planner-process-main-content-left-box">
+                      <div class="room-planner-process-main-content-left-step">
+                        <div class="room-planner-process-main-content-left-step-item d-flex">
+                          <div>
+                            <div class="step-number-circle me-2 mt-03">
+                              <span class="step-number">7</span>
+                            </div>
+                          </div>
+                          <div>
+                            <h3 class="f-649E2E-24">家具、系統櫃報價</h3>
+                            <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">信用卡付款</span> </p>
+                            <p> 訂單確認時<span class="f-649E2E-20-q">100%</span></p>
+                            <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">現金/匯款付款</span></p>
+                            <p class="f-2A2A2A-16-400">訂單確認時<span class="f-649E2E-20-q">50%</span><span
+                                class="f-2b2b2b-18-q">、</span> 系統櫃出貨前付<span class="f-649E2E-20-q">50%</span></p>
+
+                          </div>
+                        </div>
+                        <div class="room-planner-process-main-content-left-step-item d-flex">
+                          <div>
+                            <div class="step-number-circle me-2 mt-03">
+                              <span class="step-number">8</span>
+                            </div>
+                          </div>
+                          <div>
+                            <h3 class="f-649E2E-24">安心裝修付款方式</h3>
+                            <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">信用卡付款</span></p>
+                            <p> 訂單確認時<span class="f-649E2E-20-q">100%</span> </p>
+                            <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">現金/匯款付款</span></p>
+                            <p class="f-2A2A2A-16-400">訂單確認時<span class="f-649E2E-20-q">50%</span>、 木工完成後 <span
+                                class="f-649E2E-20-q">50%<span class="f-2b2b2b-18-q">
+                          </div>
+                        </div>
+
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="accordion-item" id="scrollTarget5-m">
+              <h2 class="accordion-header" id="panelsStayOpen-headingFive">
+                <button class="accordion-button collapsed fw-bold" type="button" data-bs-toggle="collapse"
+                  data-bs-target="#panelsStayOpen-collapseFive" aria-expanded="false"
+                  aria-controls="panelsStayOpen-collapseFive">
+                  <h2><span class="steup-mb-title">Step 5：</span><span class="step-sub-title"
+                      style="background-color:#fff ;">施工保固</span> </h2>
+                </button>
+                <div style="margin-top:10px ;" class="room-planner-process-main-content-step-img"
+                  data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseFive" aria-expanded="false"
+                  aria-controls="panelsStayOpen-collapseFive">
+                  <img class="img-fluid" src="/img/room_planner/step5.png" alt="">
+                </div>
+                <div class="room-planner-process-main-content-step-img text-center">
+                  <img style="margin-right:80px; margin-top: -10px;" class="img-fluid"
+                    src="/img/room_planner/step5-2.png" alt="" width="173">
+                </div>
+              </h2>
+              <div id="panelsStayOpen-collapseFive" class="accordion-collapse collapse"
+                aria-labelledby="panelsStayOpen-headingFive">
+                <div class="accordion-body">
+                  <div class="room-planner-process-main-content-left">
+                    <div class="room-planner-process-main-content-left-box">
+                      <div class="room-planner-process-main-content-left-step">
+                        <div class="room-planner-process-main-content-left-step-item d-flex">
+                          <div>
+                            <div class="step-number-circle me-2 mt-03">
+                              <span class="step-number">9</span>
+                            </div>
+                          </div>
+                          <div>
+                            <h3 class="f-649E2E-24">裝修施工</h3>
+                            <p class="f-2A2A2A-16-400">安心裝修師傅開始到你家進行裝修，小寶優居將每週回報工程進度，每一項工種的完工，我們都將拍照驗收並進行回報。</p>
+                          </div>
+                        </div>
+                        <!-- <div class="dottedline"></div> -->
+                        <!-- <hr class="dotted"> -->
+                        <img class="img-fluid mb-3" src="/img/room_planner/web.svg" alt="">
+
+                        <div class="room-planner-process-main-content-left-step-item d-flex">
+                          <div>
+                            <div class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                              <span class="step-qa-q">Q</span>
+                            </div>
+                          </div>
+                          <div>
+                            <p class="f-649E2E-18 mb-0">從施工到完工需要多久呢？</p>
+                            <!-- <p class="f-2A2A2A-16-400">到小寶優居的「成家故事館」，讓成家設計師陪伴你，了解成家的過程、諮詢設計服務與預算規劃。</p> -->
+                          </div>
+                        </div>
+                        <div class="room-planner-process-main-content-left-step-item d-flex mt-3">
+                          <div>
+                            <div style="background:#F6DC63;"
+                              class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                              <span style="color:#736357;" class="step-qa-q">A</span>
+                            </div>
+                          </div>
+                          <div>
+                            <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">無需拆除工程</span> 約 <span
+                                class="f-649E2E-20-q">2-3</span> 個月</p>
+                            <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">需要拆除工程</span> 約 <span
+                                class="f-649E2E-20-q">2.5-3.5</span> 個月</p>
+                            <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">需要拆除工程與管線更新</span> 約<span
+                                class="f-649E2E-20-q">3-4</span> 個月</p>
+                          </div>
+                        </div>
+                        <!-- <hr class="dotted"> -->
+                        <img class="img-fluid mb-3" src="/img/room_planner/web.svg" alt="">
+
+                        <div class="room-planner-process-main-content-left-step-item d-flex">
+                          <div>
+                            <div class="step-number-circle me-2 mt-03">
+                              <span class="step-number">10</span>
+                            </div>
+                          </div>
+                          <div>
+                            <h3 class="f-649E2E-24">家具定位</h3>
+                            <p class="f-2A2A2A-16-400">裝修完成 <span class="f-649E2E-20-q">80%</span>
+                              時，會進行系統櫃安裝，接著進行裝修工程的細部清潔，並安排家具運送到府定位。</p>
+                          </div>
+                        </div>
+                        <div class="room-planner-process-main-content-left-step-item d-flex">
+                          <div>
+                            <div class="step-number-circle me-2 mt-03">
+                              <span class="step-number">11</span>
+                            </div>
+                          </div>
+                          <div>
+                            <h3 class="f-649E2E-24">完工驗收</h3>
+                            <p class="f-2A2A2A-16-400">最後，成家設計師會到府陪伴你一起進行驗收。</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div style="position:relative;">
+          <div class="room-planner-process-main-chenjia text-center">美好成家</div>
+          <img class="room-planner-process-main-star-yellow-m" src="/img/room_planner/yellow.png" alt="" width="20">
+          <img class="room-planner-process-main-star-green-m" src="/img/room_planner/green.png" alt="" width="20">
+          <img class="room-planner-process-main-star-line-m" src="/img/room_planner/Start3.png" alt="" width="20">
+        </div>
+      </div>
+    </div>
+
+    <!-- <div style="margin:150px 0;"></div> -->
+    <section class="room-planner-process-main">
+      <div class="room-planner-process-main-box">
+        <div style="position:relative;" class="room-planner-process-main-title-box border-E0EE79">
+          <h2 class="room-planner-process-main-title">室內設計、裝修服務流程</h2>
+          <img style="position:absolute; right:-30px; bottom:-30px;" src="/img/room_planner/ruler2.png" alt=""
+            width="77">
+        </div>
+        <div class="room-planner-process-main-content mt-100 container-fluid">
+          <div class="row px-0 mx-0">
+            <div class="col-lg-4 ps-0 pe-0">
+              <div class="room-planner-process-main-content-left border-E0EE79">
+                <div id="scrollTarget1" class="room-planner-process-main-content-left-box">
+                  <!-- <h2 class="room-planner-process-sub-title">
+                    <span class="stepbox me-4">Step 1</span>
+                    <span class="step-sub-title" style="background-color:#fff ;">需求諮詢</span> 
+                  </h2> -->
+                  <div class="d-flex align-items-center room-planner-process-sub-title">
+                    <span class="stepbox me-4">Step 1</span>
+                    <h3 class="step-sub-title" style="background-color:#fff;">
+                      需求諮詢
+                    </h3>
+                  </div>
+                  <!-- <h3 class="step-sub-title" style="background-color:#fff;">
+                        需求諮詢
+                      </h3> -->
+                  <img class="step01_direction" src="/img/room_planner/direction.png" alt="" width="65">
+                  <div class="room-planner-process-main-content-left-step">
+                    <!-- <div class="room-planner-process-main-content-left-step-item d-flex">
+                      <div>
+                        <div class="step-number-circle me-2 mt-03">
+                          <span class="step-number">1</span>
+                        </div>
+                      </div>
+                      <div>
+                        <span class="f-649E2E-24">官網預約</span>
+                        <p class="f-2A2A2A-16-400">填寫表單，讓我們初步瞭解你的成家需求。</p>
+                      </div>
+                    </div>
+                    <div class="room-planner-process-main-content-left-step-item d-flex">
+                      <div>
+                        <div class="step-number-circle me-2 mt-03">
+                          <span class="step-number">2</span>
+                        </div>
+                      </div>
+                      <div>
+                        <span class="f-649E2E-24">專人聯繫</span>
+                        <p class="f-2A2A2A-16-400">三日內，將有專人聯繫，了解你的需求、幫你預約成家設計師。</p>
+                      </div>
+                    </div> -->
+                    <div class="room-planner-process-main-content-left-step-item d-flex">
+                      <div>
+                        <div class="step-number-circle me-2 mt-03">
+                          <span class="step-number">1</span>
+                        </div>
+                      </div>
+                      <div>
+                        <h3 class="f-649E2E-24">門市諮詢</h3>
+                        <p class="f-2A2A2A-16-400">到小寶優居的「成家故事館」，讓成家設計師陪伴你，了解成家的過程、諮詢設計服務與預算規劃。</p>
+                      </div>
+                    </div>
+                    <!-- <div class="dottedline"></div> -->
+                    <!-- <hr class="dotted"> -->
+                    <img class="img-fluid" src="/img/room_planner/web.svg" alt="">
+
+                    <div class="room-planner-process-main-content-left-step-item d-flex">
+                      <div>
+                        <div class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                          <span class="step-qa-q">Q</span>
+                        </div>
+                      </div>
+                      <div>
+                        <p class="f-649E2E-18 mb-0">可以提供預算的建議嗎？</p>
+                        <!-- <p class="f-2A2A2A-16-400">到小寶優居的「成家故事館」，讓成家設計師陪伴你，了解成家的過程、諮詢設計服務與預算規劃。</p> -->
+                      </div>
+                    </div>
+                    <div class="room-planner-process-main-content-left-step-item d-flex mt-3">
+                      <div>
+                        <div style="background:#F6DC63;"
+                          class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                          <span style="color:#736357;" class="step-qa-q">A</span>
+                        </div>
+                      </div>
+                      <div>
+                        <p class="f-2A2A2A-16-400">成家設計服務的預算規劃參考(含設計、裝修裝潢、系統櫃、家具)</p>
+                        <p class="f-2A2A2A-16-400"><span class="f-649E2E-18">無拆除工程</span> 全室設計約<span
+                            class="f-649E2E-20-q"> 2~4 </span>萬/權狀坪</p>
+                        <p class="f-2A2A2A-16-400"><span class="f-649E2E-18">需要拆除工程</span> 全室設計約<span
+                            class="f-649E2E-20-q"> 2.5~5 </span> 萬/權狀坪</p>
+                        <p class="f-2A2A2A-16-400"><span class="f-649E2E-18">需要拆除工程、管線更新</span>全室設計約<span
+                            class="f-649E2E-20-q"> 3~6 </span>萬/權狀坪</p>
+                      </div>
+                    </div>
+                    <!-- <hr class="dotted"> -->
+                    <img class="img-fluid" src="/img/room_planner/web.svg" alt="">
+                    <div class="room-planner-process-main-content-left-step-item d-flex">
+                      <div>
+                        <div class="step-number-circle me-2 mt-03">
+                          <span class="step-number">2</span>
+                        </div>
+                      </div>
+                      <div>
+                        <h3 class="f-649E2E-24">設計簽約</h3>
+                        <p class="f-2A2A2A-16-400">決定將家交給小寶優居時，我們會先簽訂<span
+                            class="f-649E2E-18">《成家設計服務合約》</span>，並支付設計訂金，簽約後會正式開始你家的成家設計。</p>
+                      </div>
+                    </div>
+                    <!-- <hr class="dotted"> -->
+                    <img class="img-fluid" src="/img/room_planner/web.svg" alt="">
+                    <div class="room-planner-process-main-content-left-step-item d-flex">
+                      <div>
+                        <div class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                          <span class="step-qa-q">Q</span>
+                        </div>
+                      </div>
+                      <div>
+                        <p class="f-649E2E-18 mb-0">成家設計服務的訂金是多少？</p>
+                        <!-- <p class="f-2A2A2A-16-400">到小寶優居的「成家故事館」，讓成家設計師陪伴你，了解成家的過程、諮詢設計服務與預算規劃。</p> -->
+                      </div>
+                    </div>
+                    <div class="d-flex mt-3">
+                      <div>
+                        <div style="background:#F6DC63;"
+                          class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                          <span style="color:#736357;" class="step-qa-q">A</span>
+                        </div>
+                      </div>
+                      <div>
+                        <p class="f-2A2A2A-16-400">《成家設計服務合約》內的訂金，是指空間設計費用的訂金，空間設計費用以空間計算：</p>
+                        <p class="f-2A2A2A-16-400">一個空間設計費 <span class="f-649E2E-18">1</span> 萬元，訂金為 <span
+                            class="f-649E2E-18">3</span> 千元。</p>
+                        <p class="f-2A2A2A-16-400">你在小寶優居的系統櫃、家具消費，可折抵空間設計費用，支付金額每滿 <span class="f-649E2E-18">8</span>
+                          萬元，可折抵一個空間的設計費 <span class="f-649E2E-18">1</span> 萬元。</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="text-end">
+                <img src="/img/room_planner/background02.png" alt="" width="260">
+              </div>
+              <div class="room-planner-process-main-content-left border-E0EE79">
+                <div id="scrollTarget5" class="room-planner-process-main-content-left-box">
+                  <!-- <h2 class="room-planner-process-sub-title text-center">施工保固</h2> -->
+                  <!-- <h2 class="room-planner-process-sub-title">
+                    <span class="stepbox me-4">Step 5</span>
+                    <span class="step-sub-title" style="background-color:#fff ;">施工保固</span>
+                  </h2> -->
+                  <div class="d-flex align-items-center room-planner-process-sub-title">
+                    <span class="stepbox me-4">Step 5</span>
+                    <h3 class="step-sub-title" style="background-color:#fff;">
+                      施工保固
+                    </h3>
+                  </div>
+                  <img class="step05_direction" src="/img/room_planner/direction.png" alt="" width="65">
+                  <div class="room-planner-process-main-content-left-step">
+                    <div class="room-planner-process-main-content-left-step-item d-flex">
+                      <div>
+                        <div class="step-number-circle me-2 mt-03">
+                          <span class="step-number">9</span>
+                        </div>
+                      </div>
+                      <div>
+                        <h3 class="f-649E2E-24">裝修施工</h3>
+                        <p class="f-2A2A2A-16-400">安心裝修師傅開始到你家進行裝修，小寶優居將每週回報工程進度，每一項工種的完工，我們都將拍照驗收並進行回報。</p>
+                      </div>
+                    </div>
+                    <!-- <div class="dottedline"></div> -->
+                    <!-- <hr class="dotted"> -->
+                    <img class="img-fluid" src="/img/room_planner/web.svg" alt="">
+                    <div class="room-planner-process-main-content-left-step-item d-flex">
+                      <div>
+                        <div class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                          <span class="step-qa-q">Q</span>
+                        </div>
+                      </div>
+                      <div>
+                        <p class="f-649E2E-18 mb-0">從施工到完工需要多久呢？</p>
+                        <!-- <p class="f-2A2A2A-16-400">到小寶優居的「成家故事館」，讓成家設計師陪伴你，了解成家的過程、諮詢設計服務與預算規劃。</p> -->
+                      </div>
+                    </div>
+                    <div class="room-planner-process-main-content-left-step-item d-flex mt-3">
+                      <div>
+                        <div style="background:#F6DC63;"
+                          class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                          <span style="color:#736357;" class="step-qa-q">A</span>
+                        </div>
+                      </div>
+                      <div>
+                        <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">無需拆除工程</span> 約 <span
+                            class="f-649E2E-20-q">2-3</span> 個月</p>
+                        <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">需要拆除工程</span> 約 <span
+                            class="f-649E2E-20-q">2.5-3.5</span> 個月</p>
+                        <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">需要拆除工程與管線更新</span> 約 <span
+                            class="f-649E2E-20-q">3-4</span> 個月</p>
+                      </div>
+                    </div>
+                    <!-- <hr class="dotted"> -->
+                    <img class="img-fluid" src="/img/room_planner/web.svg" alt="">
+                    <div class="room-planner-process-main-content-left-step-item d-flex">
+                      <div>
+                        <div class="step-number-circle me-2 mt-03">
+                          <span class="step-number">10</span>
+                        </div>
+                      </div>
+                      <div>
+                        <h3 class="f-649E2E-24">家具定位</h3>
+                        <p class="f-2A2A2A-16-400">裝修完成 <span class="f-649E2E-20-q">80%</span>
+                          時，會進行系統櫃安裝，接著進行裝修工程的細部清潔，並安排家具運送到府定位。</p>
+                      </div>
+                    </div>
+                    <div class="room-planner-process-main-content-left-step-item d-flex">
+                      <div>
+                        <div class="step-number-circle me-2 mt-03">
+                          <span class="step-number">11</span>
+                        </div>
+                      </div>
+                      <div>
+                        <h3 class="f-649E2E-24">完工驗收</h3>
+                        <p class="f-2A2A2A-16-400">最後，成家設計師會到府陪伴你一起進行驗收。</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+            <div style="position:relative; top:-10px;" class="col-lg-4" id="room-planner-process-main-content-center">
+              <div style="width: 107px;position: absolute; right:-22px; top:-100px;"><img class="img-fluid"
+                  src="/img/room_planner/start.png" alt=""></div>
+              <img class="main-content-bg-line" src="/img/room_planner/line2.png" alt="">
+              <div class="room-planner-process-main-content-left">
+                <div class="room-planner-process-main-content-step-img text-center">
+                  <div class="step1-0-box" data-aos="fade-in" data-aos-duration="1000">
+                    <img class="img-fluid step1-0 hover_up" src="/img/room_planner/step1-0.png" alt="">
+                  </div>
+                </div>
+                <div class="step1-1-box" data-aos="fade-in" data-aos-duration="1000">
+                  <img class="step1-1 hover_up" src="/img/room_planner/step1-1.png" alt="">
+                </div>
+                <div class="text-center" data-aos="fade-in" data-aos-duration="1000">
+                  <img class="img-fluid step2 hover_up" src="/img/room_planner/step2.png" alt="">
+                </div>
+                <img class="bg01-hand" src="/img/room_planner/background01.png" alt="" width="105">
+                <div data-aos="fade-in" data-aos-duration="1000">
+                  <img class="step3 hover_up" src="/img/room_planner/step3.png" alt="">
+                </div>
+                <div class="room-planner-process-main-content-step-4-6img">
+                  <div class="room-planner-process-main-content-step-img text-end" data-aos="fade-in"
+                    data-aos-duration="1000">
+                    <img class="step4 img-fluid hover_up" src="/img/room_planner/step4.png" alt="">
+                  </div>
+                  <div data-aos="fade-in" data-aos-duration="1000">
+                    <img class="step5 img-fluid hover_up" src="/img/room_planner/step5.png" alt="">
+                  </div>
+                  <div style="position: relative;" class="text-center">
+                    <div data-aos="fade-in" data-aos-duration="1000">
+                      <img class="step5-2 hover_up" class="img-fluid" src="/img/room_planner/step5-2.png" alt=""
+                        width="173">
+                    </div>
+                    <img class="room-planner-process-main-star-yellow" src="/img/room_planner/yellow.png" alt=""
+                      width="20">
+                    <img class="room-planner-process-main-star-green" src="/img/room_planner/green.png" alt=""
+                      width="20">
+                    <img class="room-planner-process-main-star-line" src="/img/room_planner/Start3.png" alt=""
+                      width="20">
+                    <div class="meihaochengjia">
+                      <img class="img-fluid" data-aos="fade-in" data-aos-duration="1000"
+                        src="/img/room_planner/finish.png" alt="">
+                    </div>
+                  </div>
+                </div>
+                <div>
+
+                </div>
+              </div>
+            </div>
+            <div class="col-lg-4 mt-50">
+              <div class="room-planner-process-main-content-left border-E0EE79">
+                <div id="scrollTarget2" class="room-planner-process-main-content-left-box">
+                  <!-- <h2 class="room-planner-process-sub-title">
+                    <span class="stepbox me-4">Step 2</span>
+                    <span class="step-sub-title" style="background-color:#fff ;">成家設計</span>
+                  </h2> -->
+                  <div class="d-flex align-items-center room-planner-process-sub-title">
+                    <span class="stepbox me-4">Step 2</span>
+                    <h3 class="step-sub-title" style="background-color:#fff;">
+                      成家設計
+                    </h3>
+                  </div>
+                  <img class="step02_direction" src="/img/room_planner/direction2.png" alt="" width="65">
+                  <div class="room-planner-process-main-content-left-step">
+                    <div class="room-planner-process-main-content-left-step-item d-flex">
+                      <div>
+                        <div class="step-number-circle me-2 mt-03">
+                          <span class="step-number">3</span>
+                        </div>
+                      </div>
+                      <div>
+                        <h3 class="f-649E2E-24">到府服務</h3>
+                        <p class="f-2A2A2A-16-400">成家設計師到府進行以下事項，詳細的了解你家，跟你現在的生活。</p>
+                        <div class="room-planner-service-5-service-inf">
+                          <ul class="me-2 list">
+                            <li class="me-2 f-2A2A2A-16-400">生活習慣調查</li>
+                            <li class="me-2 f-2A2A2A-16-400">風格測驗</li>
+                            <li class="me-2 f-2A2A2A-16-400">空間丈量</li>
+                          </ul>
+                        </div>
+                        <p class="f-2A2A2A-16-400">接著就會進行設計，完成後設計師會再約你到門市確認設計。</p>
+                      </div>
+                    </div>
+                    <div class="room-planner-process-main-content-left-step-item d-flex">
+                      <div>
+                        <div class="step-number-circle me-2 mt-03">
+                          <span class="step-number">4</span>
+                        </div>
+                      </div>
+                      <div>
+                        <h3 class="f-649E2E-24">確認設計</h3>
+                        <p class="f-2A2A2A-16-400">成家設計師會以《平面配置圖》與《3D渲染彩圖》，向你提案未來家的設計，內容包含：</p>
+                        <div class="room-planner-service-5-service-inf d-flex">
+                          <ul class="me-4 flex-column">
+                            <li class="f-2A2A2A-16-400">生活動線計畫</li>
+                            <li class="f-2A2A2A-16-400">色彩計畫</li>
+                            <li class="f-2A2A2A-16-400">用料材質</li>
+                          </ul>
+                          <ul class="flex-column">
+                            <li class="f-2A2A2A-16-400">收納計畫</li>
+                            <li class="f-2A2A2A-16-400">裝修項目</li>
+                            <li class="f-2A2A2A-16-400">搭配的家具與系統櫃</li>
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="room-planner-process-main-content-left border-E0EE79 mt-80">
+                <div id="scrollTarget3" class="room-planner-process-main-content-left-box">
+                  <!-- <h2 class="room-planner-process-sub-title">
+                    <span class="stepbox me-4">Step 3</span>
+                    <span class="step-sub-title" style="background-color:#fff ;">設計報價</span>
+                  </h2> -->
+                  <div class="d-flex align-items-center room-planner-process-sub-title">
+                    <span class="stepbox me-4">Step 3</span>
+                    <h3 class="step-sub-title" style="background-color:#fff;">
+                      設計報價
+                    </h3>
+                  </div>
+                  <img class="step03_direction" src="/img/room_planner/direction2.png" alt="" width="65">
+                  <div class="room-planner-process-main-content-left-step">
+                    <div class="room-planner-process-main-content-left-step-item d-flex">
+                      <div>
+                        <p class="f-2A2A2A-16-400">小寶優居的報價分為兩個部分：</p>
+                        <div class="room-planner-service-5-service-inf d-flex">
+                          <ul class="me-2">
+                            <li class="f-2A2A2A-16-400">家具、系統櫃報價</li>
+                          </ul>
+                          <ul class="me-2">
+                            <li class="f-2A2A2A-16-400">安心裝修報價</li>
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="room-planner-process-main-content-left-step-item d-flex">
+                      <div>
+                        <div class="step-number-circle me-2 mt-03">
+                          <span class="step-number">5</span>
+                        </div>
+                      </div>
+                      <div>
+                        <h3 class="f-649E2E-24">家具、系統櫃報價</h3>
+                        <p class="f-2A2A2A-16-400">在確認家具、系統櫃設計內容後，成家設計師會提供完整的報價單，與你進行最終設計確認。</p>
+                      </div>
+                    </div>
+                    <div class="room-planner-process-main-content-left-step-item d-flex">
+                      <div>
+                        <div class="step-number-circle me-2 mt-03">
+                          <span class="step-number">6</span>
+                        </div>
+                      </div>
+                      <div>
+                        <h3 class="f-649E2E-24">安心裝修報價</h3>
+                        <p class="f-2A2A2A-16-400">
+                          依照你與成家設計師共同定案的設計內容，小寶優居安排安心裝修師傅到府場勘，再由你、成家設計師、安心裝修師傅三方，一起到門市討論裝修內容。<br>
+                          確認裝修細節後，提供完整的報價單，並簽訂<span class="f-649E2E-18">《安心裝修服務合約》</span>。</p>
+                      </div>
+                    </div>
+                    <!-- <hr class="dotted"> -->
+                    <img class="img-fluid" src="/img/room_planner/web.svg" alt="">
+                    <div class="room-planner-process-main-content-left-step-item d-flex">
+                      <div>
+                        <div class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                          <span class="step-qa-q">Q</span>
+                        </div>
+                      </div>
+                      <div>
+                        <p class="f-649E2E-18 mb-0">什麼是安心裝修服務？</p>
+                        <!-- <p class="f-2A2A2A-16-400">到小寶優居的「成家故事館」，讓成家設計師陪伴你，了解成家的過程、諮詢設計服務與預算規劃。</p> -->
+                      </div>
+                    </div>
+                    <div class="d-flex mt-3">
+                      <div>
+                        <div style="background:#F6DC63;"
+                          class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                          <span style="color:#736357;" class="step-qa-q">A</span>
+                        </div>
+                      </div>
+                      <div>
+                        <p class="f-2A2A2A-16-400">安心裝修服務是小寶優居提供的裝修履約保證服務，裝修總價 <span class="f-649E2E-18">5%</span>
+                          為安心裝修服務費。</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="room-planner-process-main-content-left border-E0EE79 mt-50">
+                <div id="scrollTarget4" class="room-planner-process-main-content-left-box">
+                  <!-- <h2 class="room-planner-process-sub-title">
+                    <span class="stepbox me-4">Step 4</span>
+                    <span class="step-sub-title" style="background-color:#fff ;">確認付款</span>
+                  </h2> -->
+                  <div class="d-flex align-items-center room-planner-process-sub-title">
+                    <span class="stepbox me-4">Step 4</span>
+                    <h3 class="step-sub-title" style="background-color:#fff;">
+                      確認付款
+                    </h3>
+                  </div>
+                  <img class="step04_direction" src="/img/room_planner/direction2.png" alt="" width="65">
+                  <div class="room-planner-process-main-content-left-step">
+                    <div class="room-planner-process-main-content-left-step-item d-flex">
+                      <div>
+                        <div class="step-number-circle me-2 mt-03">
+                          <span class="step-number">7</span>
+                        </div>
+                      </div>
+                      <div>
+                        <h3 class="f-649E2E-24">家具、系統櫃報價</h3>
+                        <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">信用卡付款</span> </p>
+                        <p> 訂單確認時<span class="f-649E2E-20-q">100%</span></p>
+                        <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">現金/匯款付款</span></p>
+                        <p class="f-2A2A2A-16-400">訂單確認時<span class="f-649E2E-20-q">50%</span><span
+                            class="f-2b2b2b-18-q">、</span> 系統櫃出貨前付<span class="f-649E2E-20-q">50%</span></p>
+
+                      </div>
+                    </div>
+                    <div class="room-planner-process-main-content-left-step-item d-flex">
+                      <div>
+                        <div class="step-number-circle me-2 mt-03">
+                          <span class="step-number">8</span>
+                        </div>
+                      </div>
+                      <div>
+                        <h3 class="f-649E2E-24">安心裝修付款方式</h3>
+                        <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">信用卡付款</span> </p>
+                        <p> 訂單確認時<span class="f-649E2E-20-q">100%</span></p>
+                        <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">現金/匯款付款</span></p>
+                        <p class="f-2A2A2A-16-400">訂單確認時<span class="f-649E2E-20-q">50%</span>、 木工完成後 <span
+                            class="f-649E2E-20-q">50%<span class="f-2b2b2b-18-q">
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <img class="bg03-table" src="/img/room_planner/background03.png" alt="">
+    </section>
+
+    <div style="position:relative;" class="bg-F0F6DD mt-50">
+      <div class="d-md-none d-block text-center bg-ruler-img">
+        <img src="/img/room_planner/ruler.png" alt="" width="123">
+      </div>
+      <section class="sub-banner2">
+        <div class="text-center room-planner-service2">
+          <h2 class="mark-title">
+            <span class="room-planner-service-no">3</span>大服務特色
+          </h2>
+          <!-- <mark><span class="room-planner-service-no">3</span>大服務特色</mark> -->
+        </div>
+        <!-- <img src="/img/icon_serve@2x.png" alt=""> -->
+        <div class="room-planner-service-icon-box2">
+          <div class="row px-0 mx-0">
+            <div class="col-12 col-md-4 col-lg-4 room-planner-service-icon-box-item">
+              <div class="row px-0 mx-0">
+                <div class="col-4 col-md-12">
+                  <div style="background-color: #fff;" class="icon-radius">
+                    <img class="icon-radius-img04" src="/img/room_planner/Group-15.png" alt="貼近生活的設計">
+                  </div>
+                </div>
+                <div class="col-8 col-md-12">
+                  <h3 class="f-78B142-20 icon-radius-text">貼近生活的設計</h3>
+                </div>
+              </div>
+            </div>
+            <div class="col-12 col-md-4 col-lg-4 room-planner-service-icon-box-item">
+              <div class="row px-0 mx-0">
+                <div class="col-4 col-md-12">
+                  <div style="background-color: #fff;" class="icon-radius">
+                    <img class="icon-radius-img05" src="/img/room_planner/Group-16.png" alt="透明清楚的服務">
+                  </div>
+                </div>
+                <div class="col-8 col-md-12">
+                  <h3 class="f-78B142-20 icon-radius-text">透明清楚的服務</h3>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12 col-md-4 col-lg-4 room-planner-service-icon-box-item">
+              <div class="row px-0 mx-0">
+                <div class="col-4 col-md-12">
+                  <div style="background-color: #fff;" class="icon-radius">
+                    <img class="icon-radius-img06" src="/img/room_planner/Group-17.png" alt="健康安全的品質">
+                  </div>
+                </div>
+                <div class="col-8 col-md-12">
+                  <h3 class="f-78B142-20 icon-radius-text">健康安全的品質</h3>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <img class="fix-img" data-aos="fade-in" data-aos-duration="1000" src="/img/room_planner/fix.png" alt=""
+        width="53">
+    </div>
+
+    <section style="position:relative;" class="room_planner-sales-service">
+      <div class="room_planner-sales-service-box">
+        <h2 class="text-center mb-5">為什麼你需要「安心裝修服務？」</h2>
+        <div class="row px-0 mx-0">
+          <div class="col-12 col-md-6 col-lg-5">
+            <div class="text-center room-planner-service">
+              <h3 class="mark-title">
+                <span class="room-planner-service-no">5</span>大安心裝修堅持
+              </h3>
+              <!-- <mark><span class="room-planner-service-no">5</span>大安心裝修堅持</mark> -->
+            </div>
+            <div class="room-planner-service-content">
+              <div class="row px-0 mx-0 d-flex align-items-start">
+                <div class="col-md-6">
+                  <div class="d-flex ">
+                    <img class="me-3 mt-1" src="/img/room_planner/check.png" alt="">
+                    <p class="f-78B142-20">嚴選裝修師傅</p>
+                  </div>
+                  <div class="d-flex">
+                    <img class="me-3 mt-1" src="/img/room_planner/check.png" alt="">
+                    <p class="f-78B142-20">篩選裝修材料</p>
+                  </div>
+                  <div class="d-flex">
+                    <img class="me-3 mt-1" src="/img/room_planner/check.png" alt="">
+                    <p class="f-78B142-20">專人協助監工</p>
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <div class="d-flex ">
+                    <img class="me-3 mt-1" src="/img/room_planner/check.png" alt="">
+                    <p class="f-78B142-20">裝修履約保證</p>
+                  </div>
+                  <div class="d-flex">
+                    <img class="me-3 mt-1" src="/img/room_planner/check.png" alt="">
+                    <p class="f-78B142-20">約束裝修保固</p>
+                  </div>
+
+                </div>
+              </div>
+            </div>
+            <div class="room_planner-sales-service-left-text">
+              <p class="f-2A2A2A-20 d-none d-lg-block text-center">用<span
+                  class="room-planner-service-no-28 px-1">5%</span>的裝修服務費，換<span
+                  class="room-planner-service-no-28 px-1">100%</span>的安心裝修
+              </p>
+              <p class="f-2A2A2A-20 d-block d-lg-none text-center">用<span
+                  class="room-planner-service-no-28 px-1">5%</span>的裝修服務費，<br>換<span
+                  class="room-planner-service-no-28 px-1">100%</span>的安心裝修</p>
+            </div>
+          </div>
+          <div class="col-md-1 col-lg-2 my-1 my-md-0 divider-wrapper d-flex justify-content-center align-items-center">
+            <!-- <div class="divider"></div> -->
+            <img class="d-md-block d-none" src="/img/room_planner/Group 302.svg" alt="" width="3">
+          </div>
+          <!-- <hr class="dotted d-md-none d-block"> -->
+          <img class="img-fluid d-md-none d-block mb-3" src="/img/room_planner/web.svg" alt="">
+          <div class="col-12 col-md-5 col-lg-5">
+            <div class="w-80-auto">
+              <div class="room-planner-service">
+                <h3 class="mark-title">
+                  <span class="room-planner-service-no">5</span>項保固與售後服務
+                </h3>
+                <!-- <mark><span class="room-planner-service-no">5</span>項保固與售後服務</mark> -->
+              </div>
+              <div id="room-planner-service-5-service-inf2" class="room-planner-service-5-service-inf mt-50">
+                <ul>
+                  <li>沙發、床架實木骨架保固 10 年，永久保修</li>
+                  <li>系統櫃、五金保固 5 年，永久保修</li>
+                  <li>實木家具保固 5 年，永久保修</li>
+                  <li>靠墊、坐墊泡棉保固 3 年，永久保修</li>
+                  <li>裝修保固 1 年，永久保修</li>
+                </ul>
+              </div>
+            </div>
+            <div class="room_planner-sales-service-right-text text-center">
+              <p class="f-2A2A2A-20 d-none d-lg-block">全品項終身保修，給你能住一輩子的家</p>
+              <p class="f-2A2A2A-20 d-block d-lg-none text-center mb-2">全品項終身保修，</p>
+              <p class="f-2A2A2A-20 d-block d-lg-none text-center">給你能住一輩子的家</p>
+            </div>
+          </div>
+        </div>
+        <div class="text-center mt-50"><a href="/store/">
+            <button type="button" class="btn room_planner-sales-service-CTA"><span
+                class="f-fff-18 me-3">設計諮詢</span></button>
+          </a></div>
+      </div>
+      <img style="position:absolute;bottom:50px; right:100px" class="tree2-img" src="/img/room_planner/big.png" alt=""
+        width="53">
+
+    </section>
+    <hr class="style_house_line ">
+    <div class="style_house_content home-content">
+      <div class="style_house_sec06 container-fluid px-0">
+        <div class="row px-0 mx-0">
+          <div class="col-6 col-sm-6 bg-portfolio ps-0">
+            <a href="/collection/">
+              <div class="bg-img"></div>
+            </a>
+          </div>
+          <div class="col-6 col-sm-6 bg-qa pe-0">
+            <a href="/frequently_asked_questions/">
+              <div class="bg-img"></div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="reserve d-flex flex-column">
+      <a href="https://maac.io/1Pife" target="_blank">
+        <img src="/img/bhousev2_img/LINE-CONTACT.png" alt="">
+      </a>
+      <!-- <a href="/store/">
+        <img src="/img/home/store-reserve.png" alt="">
+      </a> -->
+    </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" . }}
+    <script>
+      let domHeight = $('.process_mb').height();
+      let windowWidth = $(window).width();
+
+      // let x = windowWidth / 2.4;
+      // let y = domHeight * (110 / 693.38);
+      let x = windowWidth;
+      let y = domHeight;
+      let callState = true;
+      const dotDom = document.querySelector(".dot_mb");
+
+      console.log(windowWidth);
+      console.log(domHeight);
+      function dotAnimate(x, y) {
+        callState = true;
+        const keyFrames = document.createElement("style");
+        const dotKeyFrames = `
+        @keyframes dot2 {
+          0% {
+            transform: translate(0, ${y * 8 / 495.586}px);
+          }
+          15% {
+            transform: translate(${x * 170 / 390}px, ${y * 8 / 495.586}px);
+          }
+          25% {
+            transform: translate(${x * 170 / 390}px, ${y * 112 / 495.586}px);
+          }
+          35% {
+            transform: translate(${x * -11 / 390}px,${y * 112 / 495.586}px);
+          }
+          45% {
+            transform: translate(${x * -11 / 390}px, ${y * 185 / 495.586}px);
+          }
+          55% {
+            transform: translate(${x * 170 / 390}px, ${y * 185 / 495.586}px);
+          }
+          65% {
+            transform: translate(${x * 170 / 390}px, ${y * 290 / 495.586}px);
+          }
+          75% {
+            transform: translate(${x * -13 / 390}px, ${y * 290 / 495.586}px);
+          }
+          85% {
+            transform: translate(${x * -13 / 390}px, ${y * 375 / 495.586}px);
+          }
+          100%{
+            transform: translate(${x * -13 / 390}px, ${y * 375 / 495.586}px);
+          }
+        }
+
+          .dot_mb::before {
+            animation: dot2 8s infinite;
+          }
+        `;
+
+        keyFrames.innerHTML = dotKeyFrames;
+
+        let oldStyle = document.querySelector('style');
+
+        // 如已有 style 則直接覆蓋
+        if (!oldStyle) {
+          dotDom.appendChild(keyFrames);
+        } else {
+          dotDom.replaceChild(keyFrames, oldStyle);
+        }
+
+        /* 以下 animate() 方法 iOS 不支援 */
+        // const dotPosition = [
+        //   {
+        //     transform: 'translate(0, 5px)'
+        //   },
+        //   {
+        //     transform: `translate(${x}px, 5px)`
+        //   },
+        //   , {
+        //     transform: `translate(${x}px, ${y}px)`
+        //   }
+        //   , {
+        //     transform: `translate(-13px, ${y}px)`
+        //   }
+        //   , {
+        //     // (110 + 80) / 110
+        //     transform: `translate(-13px, ${y * 1.727}px)`
+        //   }
+        //   , {
+        //     transform: `translate(${x}px,  ${y * 1.727}px)`
+        //   }
+        //   , {
+        //     // (190 + 110) / 110
+        //     transform: `translate(${x}px,  ${y * 2.68}px)`
+        //   }
+        //   , {
+        //     transform: `translate(-13px, ${y * 2.68}px)`
+        //   }
+        //   , {
+        //     // (275 + 110) / 110
+        //     transform: `translate(-13px, ${y * 3.4}px)`
+        //   }
+        //   , {
+        //     transform: `translate(${x}px, ${y * 3.4}px)`
+        //   }
+        //   , {
+        //     // (380 + 110) / 110
+        //     transform: `translate(${x}px, ${y * 4.35}px)`
+        //   }
+        //   , {
+        //     transform: `translate(-13px, ${y * 4.35}px)`
+        //   }
+        //   , {
+        //     // (550 + 110) / 110
+        //     transform: `translate(-13px, ${y * 5.08}px)`
+        //   }
+        //   , {
+        //     transform: `translate(${x}px, ${y * 5.08}px)`
+        //   }
+        // ];
+
+        // // 動畫時間
+        // const dotTiming = {
+        //   duration: 8000,
+        //   iterations: Infinity
+        // }
+
+        // dotDom.animate(dotPosition, dotTiming);
+      }
+
+      // 於手機尺寸開始動畫
+      if ($(window).width() < 576) {
+        dotAnimate(x, y);
+      }
+
+      // 判斷是否為手機
+      function mobile() {
+        try {
+          document.createEvent("TouchEvent");
+          return true;
+        } catch (e) {
+          return false;
+        }
+      }
+
+      if (!mobile()) {
+        /* 電腦版偵測縮放 */
+        if (callState) {
+          addEventListener('resize', (event) => {
+            console.log('call');
+            if ($(window).width() < 576 && callState) {
+              // 避免重複 call function
+              callState = false;
+
+              const stopStyle = document.createElement("style");
+              // 尺寸改變後動畫重新開始
+              const stopKeyFrames = `
+                .dot_mb::before {
+                  animation: none;
+                }
+             `;
+              stopStyle.innerHTML = stopKeyFrames;
+
+              let oldStyle = document.querySelector('style');
+
+              if (oldStyle) {
+                dotDom.replaceChild(stopStyle, oldStyle);
+              }
+
+              setTimeout(() => {
+                // 縮放畫面時重新取得x、y軸
+                const x1 = $(window).width() / 2.4;
+                const y1 = $('.process_mb').height() * (110 / 693.38);
+                dotAnimate(x1, y1);
+              }, 1000);
+            }
+          });
+        }
+      }
+
+    </script>
+</body>
+
+</html>

layouts/room_planner/room_planner2.html

@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<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">
+
+  <link rel="stylesheet" href="/css/style.css">
+  <title>小寶優居-首購族首選 安心成家 室內設計品牌</title> -->
+  {{ partial "headers.html" . }}
+
+</head>
+
+<body style="overflow-x: hidden;">
+  {{ partial "nav.html" . }}
+  
+  <div class="room-planner">
+    <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>
+    </section>
+
+    <div class="sub-banner">
+      <img src="/img/icon_serve@2x.png" alt="">
+    </div>
+
+    <div style="border-top: 2px solid; max-width: 800px; width: 100%; margin: 0 auto 50px;"></div>
+
+    <div class="container room-planner-images">
+      <div class="row" style="margin: 0 70px">
+        <div class="line-1"></div>
+        <div class="col-3 img-box step-01" style="width: 240px; height: 215px; margin-right: 50px;">
+        </div>
+        <div class="col-9 img-box step-02" style="width: 535px; height: 270px;">
+        </div>
+        <div class="line-2"></div>
+      </div>
+
+      <div class="row" style="margin: 0;">
+        <div class="col-4 img-box step-03" style="max-width: 240px; height: 240px;">
+        </div>
+        <div class="col-4 img-box step-04" style="width: 240px; height: 175px; margin: 0 50px;">
+        </div>
+        <div class="col-4 img-box step-05" style="max-width: 240px; height: 270px;">
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="line-3"></div>
+        <div class="col-9 img-box step-06" style="max-width: 535px; height: 275px; margin-right: 50px;">
+        </div>
+        <div class="col-3 img-box d-flex justify-content-center align-items-center"
+          style="width: 240px; height: 270px;">
+          <div class="d-flex flex-column align-items-center text-white fw-bold">
+            <span style="margin-bottom: -10px; font-size: 60px;">7</span>
+            <p>訂單付款</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="line-4"></div>
+        <div class="col-3 img-box" style="width: 240px; height: 270px; margin-right: 50px;">
+        </div>
+        <div class="col-9 img-box step-09" style="max-width: 535px; height: 275px;">
+        </div>
+      </div>
+
+      <div class="row" style="margin: 0;">
+        <div class="line-5"></div>
+        <div class="col-12 img-box bg-item d-flex justify-content-center align-items-center">
+          <div class="d-flex flex-column align-items-center text-white fw-bold">
+            <span style="margin-bottom: -10px; font-size: 60px;">10</span>
+            <p>美好成家</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container room-planner-moblie">
+      <div class="row" style="position: relative;">
+        <div class="col-4 col-sm-6 p-0 me-3">
+          <p class="text-box">
+            <span>1</span>
+            <br>線上預約
+          </p>
+        </div>
+        <div class="col-8 col-sm-6 img-box" style="width: 300px; height: 270px;"></div>
+        <div class="line-6"></div>
+      </div>
+
+      <div class="row">
+        <div class="col-4 col-sm-6 p-0 me-3">
+          <p class="text-box">
+            <span>2</span>
+            <br>專人聯繫
+          </p>
+        </div>
+        <div class="col-8 col-sm-6 img-box" style="width: 300px; height: 155px;"></div>
+      </div>
+
+      <div class="row">
+        <div class="col-4 col-sm-6 p-0 me-3">
+          <p class="text-box">
+            <span>3</span>
+            <br>門市諮詢
+          </p>
+        </div>
+        <div class="col-8 col-sm-6 img-box" style="width: 300px; height: 300px;"></div>
+      </div>
+
+      <div class="row">
+        <div class="col-4 col-sm-6 p-0 me-3">
+          <p class="text-box">
+            <span>4</span>
+            <br>設計簽約
+          </p>
+        </div>
+        <div class="col-8 col-sm-6 img-box" style="width: 300px; height: 220px;"></div>
+      </div>
+
+      <div class="row">
+        <div class="col-4 col-sm-6 p-0 me-3">
+          <p class="text-box">
+            <span>5</span>
+            <br>設計簽約
+          </p>
+        </div>
+        <div class="col-8 col-sm-6 img-box" style="width: 300px; height: 300px;"></div>
+      </div>
+
+      <div class="row">
+        <div class="col-4 col-sm-6 p-0 me-3">
+          <p class="text-box">
+            <span>6</span>
+            <br>設計簽約
+          </p>
+        </div>
+        <div class="col-8 col-sm-6 img-box" style="width: 300px; height: 150px;"></div>
+      </div>
+
+      <div class="row">
+        <div class="col-4 col-sm-6 p-0 me-3">
+          <p class="text-box">
+            <span>7</span>
+            <br>設計簽約
+          </p>
+        </div>
+        <div class="col-8 col-sm-6 img-box" style="width: 300px; height: 345px;"></div>
+      </div>
+
+      <div class="row">
+        <div class="col-4 col-sm-6 p-0 me-3">
+          <p class="text-box">
+            <span>8</span>
+            <br>設計簽約
+          </p>
+        </div>
+        <div class="col-8 col-sm-6 img-box" style="width: 300px; height: 150px;"></div>
+      </div>
+
+      <div class="row">
+        <div class="col-4 col-sm-6 p-0 me-3">
+          <p class="text-box">
+            <span>9</span>
+            <br>設計簽約
+          </p>
+        </div>
+        <div class="col-8 col-sm-6 img-box" style="width: 300px; height: 345px;"></div>
+      </div>
+
+      <div class="row">
+        <div class="col-4 col-sm-6 p-0 me-3">
+          <p class="text-box">
+            <span>10</span>
+            <br>美好成家
+          </p>
+        </div>
+        <div class="col-8 col-sm-6 img-box" style="width: 300px; height: 100px;"></div>
+      </div>
+    </div>
+
+
+    <div class="container-fluid rp-navs" style="border-top: 1px solid;">
+      <div class="row g-3 home-content">
+        <div class="col-sm-6 m-0 bg-portfolio">
+          <a href="/collection/">
+            <div class="bg-img"></div>
+          </a>
+        </div>
+        <div class="col-sm-6 m-0 bg-qa">
+          <a href="/frequently_asked_questions/">
+            <div class="bg-img"></div>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="reserve">
+      <a href="https://ocard.co/q?s=mV8ggl&qtk=LmybMx&_ga=2.252447817.1761930027.1658133789-1993023897.1656902976">
+        <img src="/img/home/線上預約icon.png" alt="">
+      </a>
+    </div>
+  </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>
+
+</html>

layouts/side_cabinet/list.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body style="overflow-x: hidden;">
+
+  {{ partial "nav.html" . }}
+  {{ partial "furniture_design.html" . }}
+
+  <div class="furniture-design design-list">
+    <div class="container bhouseweb_loc_content sub-tab-content my-5">
+      <div class="row g-3 mt-3">
+        {{ $paginator := .Paginate .Data.Pages }}
+        {{ range $paginator.Pages }}
+        <div class="col-12 col-md-6 mb-4 my-auto">
+          <div class="position-relative text-item">
+            <a href="{{ .RelPermalink }}">
+              <div>
+                <h4 style="line-height: 32px; width: 100%;">{{ replace .Title "｜小寶優居・設計家具" "" }}</h4>
+              </div>
+              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
+            </a>
+          </div>
+        </div>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+
+  {{ partial "footer.html" . }}
+  {{ partial "scripts.html" . }}
+</body>
+
+</html>

layouts/side_table/list.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body style="overflow-x: hidden;">
+
+  {{ partial "nav.html" . }}
+  {{ partial "furniture_design.html" . }}
+
+  <div class="furniture-design design-list">
+    <div class="container bhouseweb_loc_content sub-tab-content my-5">
+      <div class="row g-3 mt-3">
+        {{ $paginator := .Paginate .Data.Pages }}
+        {{ range $paginator.Pages }}
+        <div class="col-12 col-md-6 mb-4 my-auto">
+          <div class="position-relative text-item">
+            <a href="{{ .RelPermalink }}">
+              <div>
+                <h4 style="line-height: 32px; width: 100%;">
+                  {{ replace .Title "｜小寶優居・設計家具" "" }}<br>
+                  <span style="font-size: 1rem;">{{ .Params.custom_title_value }}</span>
+                </h4>
+              </div>
+              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
+            </a>
+          </div>
+        </div>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+
+  {{ partial "footer.html" . }}
+  {{ partial "scripts.html" . }}
+</body>
+
+</html>

layouts/sofa/list.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body style="overflow-x: hidden;">
+
+  {{ partial "nav.html" . }}
+  {{ partial "furniture_design.html" . }}
+
+  <div class="furniture-design design-list">
+    <div class="container bhouseweb_loc_content sub-tab-content my-5">
+      <div class="row g-3 mt-3">
+        {{ $paginator := .Paginate .Data.Pages }}
+        {{ range $paginator.Pages }}
+        <div class="col-12 col-md-6 mb-4 my-auto">
+          <div class="position-relative text-item">
+            <a href="{{ .RelPermalink }}">
+              <div>
+                <h4 style="line-height: 32px; width: 100%;">
+                  {{ replace .Title "｜小寶優居・設計家具" "" }}<br>
+                  <span style="font-size: 1rem;">{{ .Params.custom_title_value }}</span>
+                </h4>
+              </div>
+              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
+            </a>
+          </div>
+        </div>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+
+  {{ partial "footer.html" . }}
+  {{ partial "scripts.html" . }}
+</body>
+
+</html>

layouts/solid_wood_furniture/solid_wood_furniture.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body style="overflow-x: hidden;">
+
+  {{ partial "nav.html" . }}
+
+  <div class="furniture-design">
+    <section class="bhouseweb_loc_banner">
+      <img src="/img/banner/bn_product@2x.png" class="banner-img card-img" alt="...">
+    </section>
+    <!-- 手機版型 -->
+    <div class="mobile-tab d-block d-md-none">
+      <div class="row">
+        <div class="col-4 m-auto all-tab">
+          <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
+        </div>
+      </div>
+      <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
+        <div class="row w-100">
+          <div class="col-4">
+            <li class="nav-item tab-item" role="presentation">
+              <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
+            </li>
+          </div>
+          <div class="col-4">
+            <li class="nav-item tab-item" role="presentation">
+              <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
+            </li>
+          </div>
+          <div class="col-4">
+            <li class="nav-item tab-item" role="presentation">
+              <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
+            </li>
+          </div>
+        </div>
+      </ul>
+    </div>
+    <!-- 電腦版型 -->
+    <div class="d-none d-md-block">
+      <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
+        <li class="nav-item" role="presentation">
+          <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link design-border">關於家具</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
+        </li>
+      </ul>
+    </div>
+    <!-- 關於家具 -->
+    <div class="bhouseweb_loc_content" id="furniture">
+      <div class="container" style="margin-top: 50px;">
+        <div class="row mb-5 pb-5 align-items-center b-bottom">
+          <div class="col-12 col-lg-6">
+            <img src="/img/system_furniture/bn_product_cabinet_01@2x.webp" alt="">
+          </div>
+          <div class="col-12 col-lg-6">
+            <h5 class="text-center text-lg-start">因你而設計</h5>
+            <p class="text-center text-lg-start text-box">
+              我們以「人」為中心，用人因工程的設計概念，設計讓你順手好用的家具。
+            </p>
+          </div>
+        </div>
+        <div class="row g-2 mb-5 pb-5 b-bottom">
+          <div class="col-12">
+            <img src="/img/bn_product_furniture_02_1@2x.png" alt="">
+          </div>
+          <div class="col-12 col-md-4">
+            <img src="/img/bn_product_furniture_02_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>
+          </div>
+          <div class="col-12 col-md-4">
+            <img src="/img/bn_product_furniture_02_3@2x.png" alt="">
+            <h5 class="mt-4 mb-3 text-center text-md-start">顏色客製</h5>
+            <p class="text-center text-md-start">130 種布料配色<br>自己配或我們幫你配都好配</p>
+          </div>
+          <div class="col-12 col-md-4">
+            <img src="/img/bn_product_furniture_02_4@2x.png" alt="">
+            <h5 class="mt-4 mb-3 text-center text-md-start">材質客製</h5>
+            <p class="text-center text-md-start">7 種表布材質<br>各有各的風格跟個性</p>
+          </div>
+        </div>
+        <div class="row g-2 mb-5 pb-5 b-bottom">
+          <div class="col-12">
+            <img src="/img/bn_product_furniture_03_1@2x.png" alt="">
+          </div>
+          <div class="col-12 col-md-4">
+            <img src="/img/bn_product_furniture_03_2@2x.png" alt="">
+            <h5 class="mt-4 mb-3 text-center text-md-start">架高床底｜<br>最常見的選擇</h5>
+            <p>實木床腳，架高12公分，容易清潔，床箱採「前後分割」受力更平均。</p>
+          </div>
+          <div class="col-12 col-md-4">
+            <img src="/img/bn_product_furniture_03_3@2x.png" alt="">
+            <h5 class="mt-4 mb-3 text-center text-md-start">抽屜床底｜<br>單抽、雙抽更彈性</h5>
+            <p>安裝工業級滑輪，承重200公斤側邊採用實木滑軌，不怕銹蝕更耐久。</p>
+          </div>
+          <div class="col-12 col-md-4">
+            <img src="/img/bn_product_furniture_03_4@2x.png" alt="">
+            <h5 class="mt-4 mb-3 text-center text-md-start">掀床床底｜<br>小坪數創造大收納</h5>
+            <p>採用「自動安全扣」 與「MIT專利油氣壓桿」安全省力，讓女生能夠輕鬆開闔，拿取物品時也能更安心。</p>
+          </div>
+        </div>
+        <div class="row g-2 mb-5 pb-5 b-bottom">
+          <div class="col-12">
+            <img src="/img/bn_product_furniture_04_1@2x.png" alt="">
+          </div>
+          <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">硬度密度高，穩定、堅固、耐衝擊，適合製作大型家具</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">材質重、抗壓能力強，不易分裂，細密紋理易於加工染色</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">紋理通直，富有彈性容易乾燥，而且具有耐磨性</p>
+          </div>
+        </div>
+        <div class="row mb-5 pb-5 b-bottom">
+          <div class="col-12">
+            <img src="/img/bn_product_furniture_05@2x.png" alt="">
+          </div>
+          <div class="col-12">
+            <img src="/img/bn_product_furniture_06@2x.png" alt="">
+          </div>
+        </div>
+        <div class="row g-3 mb-5 pb-5">
+          <div class="col-12">
+            <img src="/img/bn_product_furniture_07@2x.png" alt="">
+          </div>
+          <div class="col-12 col-lg-6">
+            <img src="/img/bn_product_furniture_08@2x.png" alt="">
+          </div>
+          <div class="col-12 col-lg-6">
+            <img src="/img/bn_product_furniture_09@2x.png" alt="">
+          </div>
+          <div class="col-12 col-lg-6">
+            <img src="/img/bn_product_furniture_10@2x.png" alt="">
+          </div>
+          <div class="col-12 col-lg-6">
+            <img src="/img/bn_product_furniture_11@2x.png" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  {{ partial "footer.html" . }}
+  {{ partial "scripts.html" . }}
+
+</body>
+
+</html>

layouts/store/store.html

@@ -0,0 +1,616 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body style="overflow-x: hidden;">
+  {{ partial "nav.html" . }}
+
+  <section class="bhouseweb_loc_banner">
+    <img src="/img/banner/bn_store@2x.webp" class="banner-img card-img" alt="...">
+  </section>
+  <div class="brand_content" id="scope">
+    <div class="card bg-transparent border-0 rounded-0">
+      <img src="/img/store/map.webp" class="sec01_store_map_img card-img rounded-0" alt="...">
+      <div class="store_cta_box_reserve">
+        <div class="store_cta">
+          可服務地區
+        </div>
+        <!-- <div class="store_cta_text mt-15">
+          <p>立即<a
+              href="https://ocard.co/q?s=mV8ggl&qtk=LmybMx&_ga=2.252447817.1761930027.1658133789-1993023897.1656902976">預約諮詢</a>
+          </p>
+        </div> -->
+      </div>
+      <div class="d-flex justify-content-end store_cta_box">
+        <div class="store_cta_box_form">
+          <div class="store_cta">
+            需專人評估地區
+          </div>
+          <!-- <div class="store_cta_text mt-15">
+            <p>請填寫<a
+                href="https://ocard.co/q?s=mV8ggl&qtk=LmybMx&_ga=2.252447817.1761930027.1658133789-1993023897.1656902976">評估表單</a>，將會有專人致電諮詢與評估
+            </p>
+          </div> -->
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Tab start -->
+  <!-- <div class="text-center store-tab">
+    <ul class="nav d-flex nav-pills flex-wrap justify-content-center" id="pills-tab" role="tablist">
+      <ul class="nav d-flex nav-pills flex-wrap" id="pills-tab" role="tablist">
+        <li class="nav-item active p-0" role="presentation">
+          <a class="nav-item-link nav-item-active bg-transparent active" id="pills-north-tab" data-bs-toggle="pill"
+            data-bs-target="#pills-north" type="button" role="tab" aria-controls="pills-north"
+            aria-selected="false">新北門市</a>
+        </li>
+        <li class="nav-item p-0" role="presentation">
+          <a class="nav-item-link nav-item-active bg-transparent" id="pills-central-tab" data-bs-toggle="pill"
+            data-bs-target="#pills-central" type="button" role="tab" aria-controls="pills-central"
+            aria-selected="false">台中門市</a>
+        </li>
+        <li class="nav-item p-0" role="presentation">
+          <a class="nav-item-link nav-item-active bg-transparent" id="pills-south-tab" data-bs-toggle="pill"
+            data-bs-target="#pills-south" type="button" role="tab" aria-controls="pills-south"
+            aria-selected="false">台南門市</a>
+        </li>
+      </ul>
+  </div>
+  <span class="line store-line"></span>
+  <div class="brand_content">
+    <div class="tab-content" id="pills-tabContent">
+      <div class="tab-pane fade active show" id="pills-north" role="tabpanel" aria-labelledby="pills-north-tab">
+        <div id="NewTaipei" class="row px-0 mx-0">
+          <div class="col-md-8">
+            <img class="img-fluid" src="/img/store/north.webp" alt="">
+          </div>
+          <div class="col-md-4 d-flex align-items-end">
+            <div>
+              <h1 class="store_title">小寶成家故事館新北門市</h1>
+            </div>
+          </div>
+          <div class="col-md-12">
+            <div class="store_content block ms-md-3 mt-30">
+              <div class="store_content_item">
+                <span class="title">營業時間</span> &emsp;&emsp; 中午12:00 ~ 晚上9:00
+              </div>
+              <div class="store_content_item">
+                <span class="title">門市電話</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 d-flex">
+                <span class="title" style="width: 100px;">門市地點</span> &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" style="width: 60%; display: inline-flex;">新北市土城區中華路二段201號</a>
+              </div>
+              <div class="store_content_item">
+                <span class="title">停車資訊</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>
+                  <span class="d-none d-md-inline">(土城區興城路112號，到門市步行約7分鐘)</span>
+                  <p class="d-block d-md-none">
+                    <span class="d-inline d-md-none">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</span>
+                    (到門市步行約7分鐘)
+                  </p>
+              </div>
+              <div class="store_content_item">
+                <span>&emsp;&emsp;&emsp;&emsp;</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>
+                  <span class="d-none d-md-inline">(土城區中華路二段271號，到門市步行約5分鐘)</span>
+                  <p class="d-block d-md-none">
+                    <span class="d-inline d-md-none">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</span>
+                    (到門市步行約5分鐘)
+                  </p>
+              </div>
+              <div class="store_content_item">
+                <span class="title">交通方式</span> &emsp;&emsp; 捷運點 土城站
+                <span class="d-none d-md-inline">(到門市步行約10分鐘)</span>
+                  <p class="d-block d-md-none">
+                    <span class="d-inline d-md-none">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</span>
+                    (到門市步行約10分鐘)
+                  </p>
+              </div>
+              <div class="store_content_item">
+                <span>&emsp;&emsp;&emsp;&emsp;</span> &emsp;&emsp; 公車點 中華中學一站
+                <span class="d-none d-md-inline">(到門市步行約2分鐘)</span>
+                  <p class="d-block d-md-none">
+                    <span class="d-inline d-md-none">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</span>
+                    (到門市步行約2分鐘)
+                  </p>
+              </div>
+              <div class="store_content_item">
+                <span>&emsp;&emsp;&emsp;&emsp;</span> &emsp;&emsp; YouBike點 中華城林路口
+                <span class="d-none d-md-inline">(到門市步行約2分鐘)</span>
+                  <p class="d-block d-md-none">
+                    <span class="d-inline d-md-none">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</span>
+                    (到門市步行約2分鐘)
+                  </p>
+              </div>
+              <div class="mt-4">
+                <a class="reservation-link" href="https://lihi1.com/uoYTg" data-vars-event="accuhit">立即預約，將有專人與你聯繫
+                  &gt;</a>
+                <p class="mt-2">成家設計師是一對一的客製化服務，前往門市諮詢前，請務必「提早預約」喔！</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <span class="line store-line"></span>
+        <div class="row px-0 mx-0">
+          <div class="col-md-8">
+            <img class="img-fluid" src="/img/store/taoyuan.webp" alt="">
+          </div>
+          <div class="col-md-4 d-flex align-items-end">
+            <div>
+              <h1 class="store_title">小寶成家故事館桃園門市</h1>
+            </div>
+          </div>
+          <div class="col-md-12">
+            <div class="store_content block ms-md-3 mt-30">
+              <div class="store_content_item">
+                <span>營業時間</span> &emsp;&emsp; 中午12:00 ~ 晚上9:00
+              </div>
+              <div class="store_content_item">
+                <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">
+                <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">
+                <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"
+                  data-vars-event="accuhit">立即預約，將有專人與你聯繫 &gt;</a>
+                <p class="mt-2">成家設計師是一對一的客製化服務，前往門市諮詢前，請務必「提早預約」喔！</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tab-pane fade" id="pills-central" role="tabpanel" aria-labelledby="pills-central-tab">
+        <div id="Taichung" class="row px-0 mx-0">
+          <div class="col-md-8">
+            <img class="img-fluid" src="/img/store/central.webp" alt="">
+          </div>
+          <div class="col-md-4 d-flex align-items-end">
+            <div>
+              <h1 class="store_title">小寶成家故事館台中門市</h1>
+            </div>
+          </div>
+          <div class="col-md-12">
+            <div class="store_content block ms-md-3 mt-30">
+              <div class="store_content_item">
+                <span class="title">營業時間</span> &emsp;&emsp; 中午12:00 ~ 晚上9:00
+              </div>
+              <div class="store_content_item">
+                <span class="title">門市電話</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">
+                <span class="title" style="width: 100px;">門市地點</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" style="width: 60%; display: inline-flex;"> 台中市北屯區環中路一段1700號之小寶優居</a>
+              </div>
+              <div class="store_content_item">
+                <span class="title">停車資訊</span> &emsp;&emsp; 門口停車場
+              </div>
+              <div class="mt-4">
+                <a class="reservation-link" href="https://lihi1.com/uoYTg" data-vars-event="accuhit">立即預約，將有專人與你聯繫
+                  &gt;</a>
+                <p class="mt-2">成家設計師是一對一的客製化服務，前往門市諮詢前，請務必「提早預約」喔！</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tab-pane fade" id="pills-south" role="tabpanel" aria-labelledby="pills-south-tab">
+        <div id="Tainan" class="row px-0 mx-0">
+          <div class="col-md-8">
+            <img class="img-fluid" src="/img/store/south.webp" alt="">
+          </div>
+          <div class="col-md-4 d-flex align-items-end">
+            <div>
+              <h1 class="store_title">小寶成家故事館台南門市</h1>
+            </div>
+          </div>
+          <div class="col-md-12">
+            <div class="store_content block ms-md-3 mt-30">
+              <div class="store_content_item">
+                <span class="title">營業時間</span> &emsp;&emsp; 中午12:00 ~ 晚上9:00
+              </div>
+              <div class="store_content_item">
+                <span class="title">門市電話</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">
+                <span class="title" style="width: 100px;">門市地點</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" style="width: 60%; display: inline-flex;"> 台南市北區中華北路一段420號</a>
+              </div>
+              <div class="store_content_item">
+                <span class="title">停車資訊</span> &emsp;&emsp; 門口停車場
+              </div>
+              <div class="mt-4">
+                <a class="reservation-link" href="https://lihi1.com/uoYTg" data-vars-event="accuhit">立即預約，將有專人與你聯繫
+                  &gt;</a>
+                <p class="mt-2">成家設計師是一對一的客製化服務，前往門市諮詢前，請務必「提早預約」喔！</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span class="line store-line mx-0"></span> -->
+  <!-- Tab end -->
+
+  <!-- 錨點 start -->
+  <div class="text-center store-tab">
+    <ul class="d-flex flex-wrap justify-content-center p-0" id="anchor-tab">
+      <li class="p-0">
+        <a class="" id="pills-north-tab" data-gt-target="#NewTaipei" data-gt-duration="0" data-gt-offset="50">新北門市</a>
+      </li>
+      <li class="p-0">
+        <a class="" id="pills-central-tab" data-gt-target="#Taichung" data-gt-duration="0" data-gt-offset="50">台中門市</a>
+      </li>
+      <li class="p-0">
+        <a class="" id="pills-south-tab" data-gt-target="#Tainan" data-gt-duration="0" data-gt-offset="50">台南門市</a>
+      </li>
+    </ul>
+  </div>
+
+  <span class="line store-line"></span>
+  <div class="brand_content">
+    <div id="NewTaipei" class="row px-0 mx-0">
+      <div class="col-md-8">
+        <img class="img-fluid" src="/img/store/north.webp" alt="">
+
+      </div>
+      <div class="col-md-4 d-flex align-items-end">
+        <div>
+          <h1 class="store_title">小寶成家故事館新北門市</h1>
+        </div>
+      </div>
+      <div class="col-md-12">
+        <div class="store_content block ms-md-3 mt-30">
+          <div class="store_content_item">
+            <span class="title">營業時間</span> &emsp;&emsp; 中午12:00 ~ 晚上9:00
+          </div>
+          <div class="store_content_item">
+            <span class="title">門市電話</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 d-flex">
+            <span class="title" style="width: 100px;">門市地點</span> &emsp; <a href="https://g.page/bhousentp?share"
+              class="store-link" data-vars-event="accuhit" data-vars-event-type="9" data-vars-event-col1="新北門市"
+              data-vars-event-col2="官網點擊新北門市地點" target="_blank"
+              style="width: 60%; display: inline-flex;">新北市土城區中華路二段201號</a>
+          </div>
+          <div class="store_content_item d-flex">
+            <span class="title" style="width: 100px;">停車資訊</span> &emsp;&emsp;
+            <span class="d-flex flex-md-row flex-column link_item">
+              <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"
+                target="_blank"><span class="store-link">Times 24h</span> <span
+                  class="d-none d-md-inline">(土城區興城路112號，到門市步行約7分鐘)</span></a>
+              <p class="d-block d-md-none m-0">
+                (到門市步行約7分鐘)
+              </p>
+            </span>
+          </div>
+          <div class="store_content_item d-flex">
+            <span style="width: 100px;">&emsp;&emsp;&emsp;&emsp;</span> &emsp;&emsp;
+            <span class="d-flex flex-md-row flex-column link_item">
+              <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"
+                target="_blank"><span class="store-link">168停車聯盟</span> <span
+                  class="d-none d-md-inline">(土城區中華路二段271號，到門市步行約5分鐘)</span></a>
+              <p class="d-block d-md-none m-0">
+                (到門市步行約5分鐘)
+              </p>
+            </span>
+            <!-- <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>
+            <span class="d-none d-md-inline">(土城區中華路二段271號，到門市步行約5分鐘)</span>
+            <p class="d-block d-md-none">
+              <span class="d-inline d-md-none">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</span>
+              (到門市步行約5分鐘)
+            </p> -->
+          </div>
+          <div class="store_content_item d-flex">
+            <span class="title" style="width: 100px;">交通方式</span> &emsp;&emsp;
+            <span class="d-flex flex-md-row flex-column link_item">
+              <div>
+                <span>捷運點 土城站</span>
+                <span class="d-none d-md-inline">(到門市步行約10分鐘)</span>
+              </div>
+              <p class="d-block d-md-none m-0">
+                (到門市步行約10分鐘)
+              </p>
+            </span>
+          </div>
+          <div class="store_content_item d-flex">
+            <span style="width: 100px;">&emsp;&emsp;&emsp;&emsp;</span> &emsp;&emsp;
+            <span class="d-flex flex-md-row flex-column link_item">
+              <div>
+                <span>公車點 中華中學一站</span>
+                <span class="d-none d-md-inline">(到門市步行約2分鐘)</span>
+              </div>
+              <p class="d-block d-md-none m-0">
+                (到門市步行約2分鐘)
+              </p>
+            </span>
+          </div>
+          <div class="store_content_item d-flex">
+            <span style="width: 100px;">&emsp;&emsp;&emsp;&emsp;</span> &emsp;&emsp;
+            <span class="d-flex flex-md-row flex-column link_item">
+              <div>
+                <span>YouBike點 中華城林路口</span>
+                <span class="d-none d-md-inline">(到門市步行約2分鐘)</span>
+              </div>
+              <p class="d-block d-md-none m-0">
+                (到門市步行約2分鐘)
+              </p>
+            </span>
+
+            <!-- YouBike點 中華城林路口
+            <span class="d-none d-md-inline">(到門市步行約2分鐘)</span>
+            <p class="d-block d-md-none">
+              <span class="d-inline d-md-none">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</span>
+              (到門市步行約2分鐘)
+            </p> -->
+          </div>
+          <!-- <div class="mt-4">
+            <a class="reservation-link" href="https://lihi1.com/uoYTg" data-vars-event="accuhit">立即預約，將有專人與你聯繫
+              &gt;</a>
+            <p class="mt-2">成家設計師是一對一的客製化服務，前往門市諮詢前，請務必「提早預約」喔！</p>
+          </div> -->
+        </div>
+      </div>
+    </div>
+    <span class="line store-line"></span>
+    <!-- <div class="row px-0 mx-0">
+      <div class="col-md-8">
+        <img class="img-fluid" src="/img/store/taoyuan.webp" alt="">
+
+      </div>
+      <div class="col-md-4 d-flex align-items-end">
+        <div>
+          <h1 class="store_title">小寶成家故事館桃園門市</h1>
+        </div>
+      </div>
+      <div class="col-md-12">
+        <div class="store_content block ms-md-3 mt-30">
+          <div class="store_content_item">
+            <span>營業時間</span> &emsp;&emsp; 中午12:00 ~ 晚上9:00
+          </div>
+          <div class="store_content_item">
+            <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">
+            <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">
+            <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"
+              data-vars-event="accuhit">立即預約，將有專人與你聯繫 &gt;</a>
+            <p class="mt-2">成家設計師是一對一的客製化服務，前往門市諮詢前，請務必「提早預約」喔！</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <span class="line store-line"></span> -->
+    <div id="Taichung" class="row px-0 mx-0">
+      <div class="col-md-8">
+        <img class="img-fluid" src="/img/store/central.webp" alt="">
+
+      </div>
+      <div class="col-md-4 d-flex align-items-end">
+        <div>
+          <h1 class="store_title">小寶成家故事館台中門市</h1>
+        </div>
+      </div>
+      <div class="col-md-12">
+        <div class="store_content block ms-md-3 mt-30">
+          <div class="store_content_item">
+            <span class="title">營業時間</span> &emsp;&emsp; 中午12:00 ~ 晚上9:00
+          </div>
+          <div class="store_content_item">
+            <span class="title">門市電話</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">
+            <span class="title" style="width: 100px;">門市地點</span> &emsp;&emsp; <a
+              href="https://goo.gl/maps/HdzcBvzoeQv8kb929" class="store-link" data-vars-event="accuhit"
+              data-vars-event-type="9" data-vars-event-col1="台中門市" data-vars-event-col2="官網點擊台中門市地點" target="_blank"
+              style="width: 60%; display: inline-flex;">
+              台中市北屯區環中路一段1700號之小寶優居</a>
+          </div>
+          <div class="store_content_item">
+            <span class="title">停車資訊</span> &emsp;&emsp; 門口停車場
+          </div>
+          <!-- <div class="mt-4">
+            <a class="reservation-link" href="https://lihi1.com/uoYTg" data-vars-event="accuhit">立即預約，將有專人與你聯繫
+              &gt;</a>
+            <p class="mt-2">成家設計師是一對一的客製化服務，前往門市諮詢前，請務必「提早預約」喔！</p>
+          </div> -->
+        </div>
+      </div>
+    </div>
+    <span class="line store-line"></span>
+    <div id="Tainan" class="row px-0 mx-0">
+      <div class="col-md-8">
+        <img class="img-fluid" src="/img/store/south.webp" alt="">
+
+      </div>
+      <div class="col-md-4 d-flex align-items-end">
+        <div>
+          <h1 class="store_title">小寶成家故事館台南門市</h1>
+        </div>
+      </div>
+      <div class="col-md-12">
+        <div class="store_content block ms-md-3 mt-30">
+          <div class="store_content_item">
+            <span class="title">營業時間</span> &emsp;&emsp; 中午12:00 ~ 晚上9:00
+          </div>
+          <div class="store_content_item">
+            <span class="title">門市電話</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">
+            <span class="title" style="width: 100px;">門市地點</span> &emsp;&emsp; <a
+              href="https://goo.gl/maps/x9Wqad1UraygXupw6" class="store-link" data-vars-event="accuhit"
+              data-vars-event-type="9" data-vars-event-col1="台南門市" data-vars-event-col2="官網點擊台南門市地點" target="_blank"
+              style="width: 60%; display: inline-flex;">
+              台南市北區中華北路一段420號</a>
+          </div>
+          <div class="store_content_item">
+            <span class="title">停車資訊</span> &emsp;&emsp; 門口停車場
+          </div>
+          <!-- <div class="mt-4">
+            <a class="reservation-link" href="https://lihi1.com/uoYTg" data-vars-event="accuhit">立即預約，將有專人與你聯繫
+              &gt;</a>
+            <p class="mt-2">成家設計師是一對一的客製化服務，前往門市諮詢前，請務必「提早預約」喔！</p>
+          </div> -->
+        </div>
+        </dizv>
+      </div>
+    </div>
+    <span class="line store-line mx-0"></span>
+  </div>
+  </div>
+  <!-- 錨點 end -->
+  <div class="brand_content">
+    <div class="style_house_sec06">
+      <div class="row px-0 mx-0">
+        <div class="col-6 col-md-6 ps-0">
+          <a href="/room_planner/">
+            <img class="img-fluid" src="/img/service planner.png" alt="">
+          </a>
+        </div>
+        <div class="col-6 col-md-6 pe-0">
+          <a href="/frequently_asked_questions/">
+            <img class="img-fluid" src="/img/qa.png" alt="">
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="reserve d-flex flex-column">
+    <a href="https://maac.io/1Pife" target="_blank">
+      <img src="/img/bhousev2_img/LINE-CONTACT.png" alt="">
+    </a>
+    <!-- <a href="/store/">
+      <img src="/img/home/store-reserve.png" alt="">
+    </a> -->
+  </div>
+
+  {{ partial "footer.html" . }}
+  {{ partial "scripts.html" . }}
+
+  <script>
+    // 根據 localStorage 的值切換 tab (預設為新北門市)
+    $(document).ready(function () {
+      let storeVal = localStorage.getItem('store');
+      if (storeVal === "NewTaipei") {
+        // $(".show").removeClass("show");
+        // $(".active").removeClass("active");
+        // $("#pills-north").addClass("active show");
+        // $("#pills-north-tab").addClass("active");
+        $("*").each(function (index, element) {
+          var target = $("#NewTaipei");
+          var offset = 50;
+          // var duration = $(this).attr("data-gt-duration");
+
+          if (target) {
+            //console.log("目標：" + target);
+            //console.log("時間：" + duration);
+            //console.log("位移：" + offset);
+
+            // 上方位置 = 目標區塊.位移().上方位置
+            var top = $(target).offset().top;
+            $("html").stop().animate({
+              scrollTop: top - offset
+            });
+          }
+
+        });
+      } else if (storeVal === "Taichung") {
+        // $(".show").removeClass("show");
+        // $(".active").removeClass("active");
+        // $("#pills-central").addClass("active show");
+        // $("#pills-central-tab").addClass("active");
+        $("*").each(function (index, element) {
+          var target = $("#Taichung");
+          var offset = 50;
+
+          if (target) {
+            var top = $(target).offset().top;
+            $("html").stop().animate({
+              scrollTop: top - offset
+            });
+          }
+
+        });
+      } else if (storeVal === "Tainan") {
+        // $(".show").removeClass("show");
+        // $(".active").removeClass("active");
+        // $("#pills-south").addClass("active show");
+        // $("#pills-south-tab").addClass("active");
+        $("*").each(function (index, element) {
+          var target = $("#Tainan");
+          var offset = 50;
+
+          if (target) {
+            var top = $(target).offset().top;
+            $("html").stop().animate({
+              scrollTop: top - offset
+            });
+          }
+
+        });
+      } else if (storeVal === "scope") {
+        $("*").each(function (index, element) {
+          var target = $("#scope");
+          var offset = 0;
+
+          if (target) {
+            var top = $(target).offset().top;
+            $("html").stop().animate({
+              scrollTop: top - offset
+            });
+          }
+        });
+      }
+      // 離開頁面前清除 localStorage
+      // $(window).bind('beforeunload', function () {
+      //   return window.localStorage.removeItem('store');
+      // }
+      // );
+    })
+  </script>
+</body>
+
+</html>

layouts/system_furniture/system_furniture.html

@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body style="overflow-x: hidden;">
+
+  {{ partial "nav.html" . }}
+
+  <div class="furniture-design">
+    <section class="bhouseweb_loc_banner">
+      <img src="/img/banner/bn_product@2x.png" class="banner-img card-img" alt="...">
+    </section>
+    <!-- 手機版型 -->
+    <div class="mobile-tab d-block d-md-none">
+      <div class="row">
+        <div class="col-4 m-auto all-tab">
+          <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
+        </div>
+      </div>
+      <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
+        <div class="row w-100">
+          <div class="col-4">
+            <li class="nav-item tab-item" role="presentation">
+              <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
+            </li>
+          </div>
+          <div class="col-4">
+            <li class="nav-item tab-item" role="presentation">
+              <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
+            </li>
+          </div>
+          <div class="col-4">
+            <li class="nav-item tab-item" role="presentation">
+              <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
+            </li>
+          </div>
+        </div>
+      </ul>
+    </div>
+    <!-- 電腦版型 -->
+    <div class="d-none d-md-block">
+      <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
+        <li class="nav-item" role="presentation">
+          <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link design-border">關於系統櫃</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
+        </li>
+        <li class="nav-item tab-item" role="presentation">
+          <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
+        </li>
+      </ul>
+    </div>
+    <!-- 關於系統櫃 -->
+    <div class="bhouseweb_loc_content" id="systeam-furniture">
+      <div class="container" style="margin-top: 50px;">
+        <div class="row gy-5 mb-5 pb-5 align-items-center b-bottom">
+          <div class="col-12 col-lg-6">
+            <img src="/img/system_furniture/bn_product_cabinet_01@2x.webp" alt="">
+          </div>
+          <div class="col-12 col-lg-6">
+            <h5 class="text-center text-lg-start">因你而設計</h5>
+            <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="">
+          </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">
+              EGGER、KAINDL<br>
+              KASTAMONU<br>
+              MAURO SAVIOLA<br>
+              PFLEIDERER<br>
+              松華實業、振量企業<br>
+              彰美興業、薪豐豐業
+            </p>
+          </div>
+          <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">
+              <b style="font-family: NSJP-700;">甲醛釋出量經認證檢驗</b><br>
+              符合『國家經濟部標準檢驗局』F1等級<br>
+              (最低甲醛釋出量，且無添加甲醛物質)<br><br>
+              符合『歐盟 』E1等級<br>
+              (最低甲醛釋出量，且無添加甲醛物質)
+            </p>
+          </div>
+          <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"><b style="font-family: NSJP-700;">防潮檢驗</b><br>
+              經『國家經濟部標準檢驗局 CNS2215』<br>
+              吸水膨脹率檢測數值為6%以下，符合V313<br>
+              最高防潮等級。<br><br>
+              經『歐盟標準EN317』檢驗結果<br>
+              因驗出來的吸水膨脹率在6%以下，為V313<br>
+              最高防潮等級。</p>
+          </div>
+        </div>
+        <div class="row gy-5 mb-5 pb-5 align-items-center  b-bottom">
+          <div class="col-12 col-lg-6">
+            <img src="/img/system_furniture/bn_product_cabinet_05@2x.webp" alt="">
+          </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">
+              奧地利 BLUM 五金<br>
+              台灣 KING SLIDE 滑軌
+            </p>
+          </div>
+          <div class="col-12 col-lg-6">
+            <img src="/img/system_furniture/bn_product_cabinet_06@2x.webp" alt="">
+          </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">
+              內政部綠建築SGS標章<br>
+              INTERTEK全球耐用度認證
+            </p>
+          </div>
+        </div>
+        <div class="row mb-5 pb-5">
+          <div class="col-12 col-lg-6">
+            <img src="/img/bn_product_cabinet_06_02@2x.png" alt="">
+          </div>
+          <div class="col-12 col-lg-6">
+            <img src="/img/bn_product_cabinet_07_02@2x.png" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  {{ partial "footer.html" . }}
+  {{ partial "scripts.html" . }}
+
+</body>
+
+</html>

layouts/wardrobe/list.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body style="overflow-x: hidden;">
+
+  {{ partial "nav.html" . }}
+  {{ partial "furniture_design.html" . }}
+
+  <div class="furniture-design design-list">
+    <div class="container bhouseweb_loc_content sub-tab-content my-5">
+      <div class="row g-3 mt-3">
+        {{ $paginator := .Paginate .Data.Pages }}
+        {{ range $paginator.Pages }}
+        <div class="col-12 col-md-6 mb-4 my-auto">
+          <div class="position-relative text-item">
+            <a href="{{ .RelPermalink }}">
+              <div>
+                <h4 style="line-height: 32px; width: 100%;">
+                  {{ replace .Title "｜小寶優居・系統家具" "" }}<br>
+                <span style="font-size: 1rem;">{{ .Params.custom_title_value }}</span>
+              </h4>
+              </div>
+              <img src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
+            </a>
+          </div>
+        </div>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+
+  {{ partial "footer.html" . }}
+  {{ partial "scripts.html" . }}
+</body>
+
+</html>

resources/bhouse.js

@@ -0,0 +1,234 @@
+$(".responsive").slick({
+  dots: true,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  autoplay: true,
+  autoplaySpeed: 3000,
+  arrows: false,
+});
+
+// 直式輪播圖動態更改高度
+function changeHeight() {
+  let firstImg = $('.style_house_sec02_slide div:first-child img');
+  let firstImgHeight = firstImg.css('height');
+  $('.style_house_sec02_slide .vertical-img').css("height", `${firstImgHeight}`)
+}
+changeHeight();
+$(window).resize(function () {
+  setTimeout(() => {
+    changeHeight();
+  }, 100)
+});
+
+let imgCount = $(".slide_single_img").length;
+let heightImg = [];
+
+window.onload = function() {
+  console.log('onload');
+  $('.slide_single_img').each(function (i,array) { // jquery.each() 循環讀取所有圖片
+    
+    let height = $(this).height();
+    let width = $(this).width();
+    let x = (height / width);
+    console.log('height / width = ', x);
+    if (x >= 1) {
+      if (i===0) {
+        return;
+      }
+      heightImg.push($(this));
+      // 預設高度為 0
+      $(this).css({
+        'height': 0 + 'px',
+        "margin": 'auto',
+      });
+    }
+
+    if (i === imgCount-1) {
+      $('#slider-loading').addClass("slider_loading");
+      $('.style_house_sec02').css("height", "auto");
+      $('.style_house_sec02 .content').css('opacity', '1');
+      
+    }
+  });
+  
+  let heightImgIndex = [];
+  
+  function getAllIndex(arr) {
+    // 篩選符合條件 Index
+    for (i = 0; i < arr.length; i++) {
+      if (arr[i].height === 0)
+        heightImgIndex.push(i);
+    }
+    return heightImgIndex;
+  }
+  let allSlideImg = document.querySelectorAll('.slide_single_img');
+  getAllIndex(allSlideImg);
+  
+  // 取得 slick 當前的 Index
+  $('.style_house_sec02 .slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
+    for (i = 0; i < heightImgIndex.length; i++) {
+      console.log(heightImgIndex[i]);
+      if (nextSlide == heightImgIndex[i]) {
+      //   allSlideImg[nextSlide].style.cssText = `
+      //   height: 500px; 
+      //   margin: auto;
+      // `;
+      allSlideImg[nextSlide].classList.add("img-height-vw");
+      } else {
+        allSlideImg[heightImgIndex[i]].style.height = '0px';
+      }
+    }
+  });
+  
+  $('.slide_img').each(function () { // jquery.each() 循環讀取所有圖片
+    var height = $(this).height();
+    var width = $(this).width();
+    let x = (height / width);
+    if (x > 1) {
+      $(this).css({
+        'width': 100 + 'px',
+        "margin": 'auto',
+        "padding": "0px",
+      });
+    } else {
+      $(this).css({
+        "margin-top": '30px',
+        "padding": "5px",
+      });
+    }
+  });
+}
+// $('.slide_single_img').each(function (i) { // jquery.each() 循環讀取所有圖片
+//   let height = $(this).height();
+//   let width = $(this).width();
+//   let x = (height / width);
+//   console.log('index', i);
+//   console.log('height / width = ', x);
+//   if (x >= 1) {
+//     console.log('長圖',i);
+//     if (i===0) {
+//       return;
+//     }
+//     heightImg.push($(this));
+//     // 預設高度為 0
+//     $(this).css({
+//       'height': 0 + 'px',
+//       "margin": 'auto',
+//     });
+//   }
+// });
+
+// let heightImgIndex = [];
+
+// function getAllIndex(arr) {
+//   // 篩選符合條件 Index
+//   for (i = 0; i < arr.length; i++) {
+//     if (arr[i].height === 0)
+//       heightImgIndex.push(i);
+//   }
+//   return heightImgIndex;
+// }
+// let allSlideImg = document.querySelectorAll('.slide_single_img');
+// getAllIndex(allSlideImg);
+
+// // 取得 slick 當前的 Index
+// $('.style_house_sec02 .slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
+//   for (i = 0; i < heightImgIndex.length; i++) {
+//     console.log(heightImgIndex[i]);
+//     if (nextSlide == heightImgIndex[i]) {
+//       allSlideImg[nextSlide].style.cssText = `
+//       height: 500px; 
+//       margin: auto;
+//     `;
+//     } else {
+//       allSlideImg[heightImgIndex[i]].style.height = '0px';
+//     }
+//   }
+// });
+
+// $('.slide_img').each(function () { // jquery.each() 循環讀取所有圖片
+//   var height = $(this).height();
+//   var width = $(this).width();
+//   let x = (height / width);
+//   if (x > 1) {
+//     $(this).css({
+//       'width': 100 + 'px',
+//       "margin": 'auto',
+//       "padding": "0px",
+//     });
+//   } else {
+//     $(this).css({
+//       "margin-top": '30px',
+//       "padding": "5px",
+//     });
+//   }
+// });
+
+$('.style_house_sec02 .slider-for').slick({
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  arrows: false,
+  fade: true,
+  asNavFor: '.slider-nav'
+});
+$('.style_house_sec02 .slider-nav').slick({
+  slidesToShow: 5,
+  slidesToScroll: 3,
+  asNavFor: '.slider-for',
+  dots: false,
+  arrows: false,
+  // centerMode: true,
+  focusOnSelect: true
+});
+
+$(document).on("click", ".article__readMore", function (event) {
+  $('.bhouseweb_loc_sec02').css('height', 'auto');
+  $('.article__readMore').hide();
+
+});
+
+$(document).on("click", ".bhouseweb_loc_type>label", function (event) {
+  $(this).siblings().removeClass('select');
+
+  $(this).toggleClass("select");
+
+});
+
+$(".bt_slogan_portfolio").click(function () {
+  $(".bt_slogan_portfolio").fadeOut();
+});
+
+
+$(".bt_slogan").click(function () {
+  $(".bt_slogan_portfolio").fadeIn();
+});
+
+// Navbar Icon
+function changeIcon(e) {
+  const item = document.querySelector('[data-toggle-class]');
+  item.className === "close-btn" ? item.className = "navbar-toggler-icon" : item.className = "close-btn";
+}
+
+$('.furniture_design_content .slider-for').slick({
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  arrows: false,
+  fade: true,
+  asNavFor: '.slider-nav'
+});
+$('.furniture_design_content .slider-nav').slick({
+  slidesToShow: 3,
+  slidesToScroll: 1,
+  asNavFor: '.slider-for',
+  focusOnSelect: true
+});
+
+// 外部連結
+let fb_link = `https://www.facebook.com/sharer.php?u=${location.href}`;
+let collection_icon_fb = document.getElementById('collection_icon_fb');
+$("#collection_icon_fb").attr("href",fb_link);
+
+let line_link = `https://social-plugins.line.me/lineit/share?url=${location.href}`;
+let collection_icon_line = document.getElementById('collection_icon_line');
+
+$("#collection_icon_line").attr("href",line_link);

static/css/custom.css

@@ -0,0 +1,16 @@
+/* your styles go here */
+/* Example site test */
+
+.box-image-text .image {
+    min-height: 190px;
+    max-height: 190px;
+}
+
+.box-image-text .image img {
+    max-height: 190px;
+    margin: auto;
+}
+
+.box-simple {
+    min-height: 230px;
+}