choozmo
/
New-Bhouse-Web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494
							<!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.png" class="banner-img card-img" alt="...">
    </section>

    <!-- 電腦版 -->
    <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.png" alt="">
            </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.png" 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.png" 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.png" 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.png" 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.png" 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.png" 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.png" 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" "預售屋客變") }}
                  <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" "預售屋客變") }}
                {{ if (eq $index 2) }}
                <div class="btn_box">
                  <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" "驗收交屋") }}
                  <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" "驗收交屋") }}
                {{ if (eq $index 2) }}
                <div class="btn_box">
                  <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" "預算準備") }}
                  <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" "預算準備") }}
                {{ if (eq $index 2) }}
                <div class="btn_box">
                  <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/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" "認識裝修裝潢") }}
                  <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" "認識裝修裝潢") }}
                {{ if (eq $index 2) }}
                <div class="btn_box">
                  <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" "空間計畫") }}
                  <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" "空間計畫") }}
                {{ if (eq $index 2) }}
                <div class="btn_box">
                  <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" "居家風格") }}
                  <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" "居家風格") }}
                {{ if (eq $index 2) }}
                <div class="btn_box">
                  <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" "家具家電") }}
                  <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" "家具家電") }}
                {{ if (eq $index 2) }}
                <div class="btn_box">
                  <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" "驗收入住") }}
                  <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" "驗收入住") }}
                {{ if (eq $index 2) }}
                <div class="btn_box">
                  <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">
          <img src="/img/blog/ruler.png" alt="">
          <section>
            <h5>熱門主題</h5>
            <div>
              <a href="">標籤名稱</a>
              <a href="">標籤名稱</a>
              <a href="">標籤名稱</a>
              <a href="">標籤名稱</a>
              <a href="">標籤名稱</a>
              <a href="">標籤名稱</a>
              <a href="">標籤名稱</a>
              <a href="">標籤名稱</a>
            </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.png" alt="">
                </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.png" 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.png" 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.png" 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.png" 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.png" 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.png" 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.png" 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" "預售屋客變") }}
                <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" "預售屋客變") }}
              {{ if (eq $index 2) }}
              <div class="btn_box">
                <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" "驗收交屋") }}
                <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" "驗收交屋") }}
              {{ if (eq $index 2) }}
              <div class="btn_box">
                <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" "預算準備") }}
                <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" "預算準備") }}
              {{ if (eq $index 2) }}
              <div class="btn_box">
                <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" "認識裝修裝潢") }}
                <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" "認識裝修裝潢") }}
              {{ if (eq $index 2) }}
              <div class="btn_box">
                <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" "空間計畫") }}
                <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" "空間計畫") }}
              {{ if (eq $index 2) }}
              <div class="btn_box">
                <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" "居家風格") }}
                <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" "居家風格") }}
              {{ if (eq $index 2) }}
              <div class="btn_box">
                <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" "家具家電") }}
                <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" "家具家電") }}
              {{ if (eq $index 2) }}
              <div class="btn_box">
                <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" "驗收入住") }}
                <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" "驗收入住") }}
              {{ if (eq $index 2) }}
              <div class="btn_box">
                <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">
                  <a href="">標籤名稱</a>
                  <a href="">標籤名稱</a>
                  <a href="">標籤名稱</a>
                  <a href="">標籤名稱</a>
                  <a href="">標籤名稱</a>
                  <a href="">標籤名稱</a>
                  <a href="">標籤名稱</a>
                  <a href="">標籤名稱</a>
                </div>
              </main>
            </section>
          </div> -->
        </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" . }}
  {{ 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);
    }

    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');
    
        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>