syuanyuri
/
New_Bhouse_Web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800
							<!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>