ww

content/規劃師服務/index.md

@@ -1,607 +0,0 @@
----
-title: "成家設計服務:住宅設計、家具與系統櫃、安心裝修|小寶優居"
-date: 2021-02-06T18:14:22+08:00
-draft: false
-url: "/room_planner"
-description: "把房子變成家，成家設計服務流程:線上預約、專人聯繫、門市諮詢、簽約設計、到府丈量、確認設計、訂單付款、進場施工、完工驗收、保固與售後服務。"
----
-
-<script src="https://code.jquery.com/jquery-3.6.0.min.js"
-  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
-
-<script>
-  window.onload = () => {
-    let questionList = document.querySelectorAll('.question');
-    Array.from(questionList).map(e => {
-      e.addEventListener('click', (item) => {
-        let rotateElement;
-        // 判斷是否點擊三角形
-        item.target.firstElementChild?.id ? rotateElement = item.target.firstElementChild.id : rotateElement = item.target.id;
-        let element = document.getElementById(`${rotateElement}`);
-        if (element.style.webkitTransform === 'rotate(0deg)') {
-          element.style = "transform: rotate(-90deg)";
-        } else {
-          element.style = "transform: rotate(0deg)";
-        }
-      }, false);
-    })
-  };
-
-  $("*").each(function (index, element) {
-    // 此元素被點選後執行
-    $("body").click(function (e) {
-      // 取得被點選元素的屬性：data-gt-target
-      var target = $(event.target).attr("data-gt-target");
-      var duration = $(event.target).attr("data-gt-duration");
-      var offset = $(event.target).attr("data-gt-offset");
-
-      if (target) {
-        // 上方位置 = 目標區塊.位移().上方位置
-        var top = $(target).offset().top;
-
-        // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
-        // parseInt() 將文字轉為數字
-        $("html").stop().animate({
-          scrollTop: top - offset
-        }, parseInt(duration));
-      }
-    });
-  });
-
-  // 避免動畫與使用者滾輪衝突
-  // html 在滾動滾輪時 停止 html 所有效果
-  $("html").on("mousewheel", function () {
-    $("html").stop();
-  });
-</script>
-
-<section class="section13">
-  <div class="mt-4">
-    <amp-img src="/img/room_planner3/1.webp" width="5344" height="3529" layout="responsive"
-      alt="小寶優居-首購族首選 安心成家 室內設計品牌">
-    </amp-img>
-  </div>
-</section>
-
-<section class="section14 d-flex align-items-center">
-  <div class="text-center mx-auto">
-    <div class="title mb-4"><b>成家設計服務 五大服務流程</b></div>
-    <div class="title"><b>詳細說明</b></div>
-  </div>
-</section>
-
-<section class="section25" style="padding-bottom: 100px;">
-  <div class="container">
-    <div class="title-box">
-      <a data-gt-target="#container-1" data-gt-duration="100" data-gt-offset="30">
-        01諮詢階段
-      </a>
-      <a data-gt-target="#container-2" data-gt-duration="100" data-gt-offset="150">
-        02設計階段
-      </a>
-      <a data-gt-target="#container-3" data-gt-duration="100" data-gt-offset="150">
-        03報價階段
-      </a>
-      <a data-gt-target="#container-4" data-gt-duration="100" data-gt-offset="80">
-        04付款階段
-      </a>
-      <a data-gt-target="#container-5" data-gt-duration="100" data-gt-offset="150">
-        05施工階段
-      </a>
-    </div>
-    <div class="d-flex flex-column align-items-center header">
-      <div class="d-flex">
-        <div style="margin-right: 30px">
-          <img src="/img/room_planner4/Header1.png" alt="" class="header-img">
-          <p>設計</p>
-        </div>
-        <div>
-          <img src="/img/room_planner4/Header2.png" alt="" class="header-img" style="width: 380px;">
-          <p>安心裝修</p>
-        </div>
-      </div>
-      <div>
-        <div class="d-flex header-img-box">
-          <div style="margin-right: 30px">
-            <img src="/img/room_planner4/Header3.png" alt="" class="header-img">
-            <p>家具</p>
-          </div>
-          <div>
-            <img src="/img/room_planner4/Header4.png" alt="" class="header-img">
-            <p>系統櫃</p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div id="container-1" class="d-flex">
-      <div>
-        <p class="d-flex justify-content-center align-items-center number-1">
-          01 <br> 諮詢階段
-        </p>
-      </div>
-      <div class="row" style="letter-spacing: 1px">
-        <div class="col-12 col-md-6" style="padding: 0 20px;">
-          <section>
-            <img src="/img/room_planner4/1-1.png" alt="" class="img-style">
-            <h4>1.官網預約</h4>
-            <p class="text-box">在官網填寫表單，讓我們對你的需求初步瞭解。</p>
-          </section>
-        </div>
-        <div class="col-12 col-md-6" style="padding: 0 20px;">
-          <section>
-            <img src="/img/room_planner4/1-2.png" alt="" class="img-style">
-            <h4>2.專人聯繫</h4>
-            <p class="text-box">三天內，我們與你聯繫，確認需求與預約到門市。</p>
-          </section>
-        </div>
-        <div class="col-12 col-md-6" style="padding: 0 20px;">
-          <section>
-            <img src="/img/room_planner4/1-3.png" alt="" class="img-style" style="margin-bottom: 15px;">
-            <h4>3.門市諮詢</h4>
-            <p class="text-box">
-              你到門市體驗設計空間，諮詢成家設計服務與預算。<br />（約2個小時）
-            </p>
-            <amp-accordion id="myAccordion" disable-session-states="">
-              <section>
-                <div id="question-1" class="question example" style="border: none; background: none; padding: 0;"><span
-                    id="rotate-1">▼</span> 總預算參考<br />（含設計、裝修、系統櫃、家具）
-                </div>
-                <div style="padding: 0;">
-                  <ul>
-                    <li style="list-style: none; margin-left: -20px;">【屋況】</li>
-                    <li>無需拆除工程，<span class="break"><br></span>約 2-4 萬/坪。</li>
-                    <li>需要拆除工程，<span class="break"><br></span>約 2.5-5 萬/坪。</li>
-                    <li>需要拆除工程管線更新，<span class="break"><br></span>約 3-6 萬/坪。</li>
-                  </ul>
-                </div>
-              </section>
-            </amp-accordion>
-          </section>
-        </div>
-        <div class="col-12 col-md-6" style="padding: 0 20px;">
-          <section>
-            <img src="/img/room_planner4/1-4.png" alt="" class="img-style" style="margin-bottom: 15px;">
-            <h4>4.設計簽約</h4>
-            <p class="text-box">
-              當你認同我們的服務，再簽訂成家設計合約與支付訂金，我們將與你約時間到府丈量。
-            </p>
-            <amp-accordion id="myAccordion" disable-session-states="">
-              <section>
-                <div class="question example" style="border: none; background: none; padding: 0;"><span
-                    id="rotate-2">▼</span> 成家設計合約
-                </div>
-                <div style="padding: 0;">
-                  <ul>
-                    <li>一個空間設計費 1 萬元，訂金為 3 千元。</li>
-                    <li>
-                      進行生活習慣調查、風格測驗、空間丈量並提供平面配置圖與 3D
-                      渲染彩圖。
-                    </li>
-                    <li>
-                      在設計階段，添購成家必備的系統櫃、家具，支付金額滿 8
-                      萬，即可折抵一個空間設計費。
-                    </li>
-                  </ul>
-                </div>
-              </section>
-            </amp-accordion>
-          </section>
-        </div>
-      </div>
-    </div>
-    <div id="container-2" class="d-flex">
-      <div>
-        <p class="d-flex justify-content-center align-items-center number-2">
-          02 <br> 設計階段
-        </p>
-      </div>
-      <div class="container" style="padding: 0;">
-        <div class="row" style="letter-spacing: 1px;">
-          <div class="col-12 col-md-6" style="padding: 0 20px;">
-            <section>
-              <img src="/img/room_planner4/2-1.png" alt="" class="img-style">
-              <h4>1.到府服務</h4>
-              <div class="text-box">
-                <p>在官網填寫表單，讓我們對你的需求初步瞭解。</p>
-                <ul>
-                  <li>生活習慣調查</li>
-                  <li>風格測驗</li>
-                  <li>空間丈量</li>
-                </ul>
-                <p>（約 3 個小時，並在 2-4 週後，與你在門市欣賞設計成果。）</p>
-              </div>
-            </section>
-          </div>
-          <div class="col-12 col-md-6" style="padding: 0 20px;">
-            <section>
-              <img src="/img/room_planner4/2-2.png" alt="" class="img-style">
-              <h4>2.確認設計</h4>
-              <div class="text-box">
-                <p>在門市，我們會以平面配置圖與 3D 渲染彩圖，與你討論未來家的設計：</p>
-                <ul>
-                  <li>色彩計畫</li>
-                  <li>生活動線計畫</li>
-                  <li>收納計畫</li>
-                  <li>用料材質</li>
-                  <li>裝修項目</li>
-                  <li>搭配的家具與系統櫃</li>
-                </ul>
-                <p>（約 4 個小時）</p>
-              </div>
-            </section>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div id="container-3" class="d-flex">
-      <div>
-        <p class="d-flex justify-content-center align-items-center number-3">
-          03 <br> 報價階段
-        </p>
-      </div>
-      <div class="container" style="padding: 0;">
-        <div class="row" style="letter-spacing: 1px;">
-          <div class="col-12 col-md-6" style="padding: 0 20px;">
-            <section>
-              <img src="/img/room_planner4/3-1.png" alt="" class="img-style" style="margin-bottom: 15px;">
-              <h4>裝修</h4>
-              <p class="text-box">裝修報價：<br>我們安排安心裝修師傅與你聯繫，依照設計定案圖面，到府進行裝修場勘（約 1
-                個小時）<br>場勘一週後，你、我們、安心裝修師傅，一起到門市討論裝修訂單，訂單確認簽名後，才進行付款。</p>
-            </section>
-          </div>
-          <div class="col-12 col-md-6" style="padding: 0 20px;">
-            <section>
-              <img src="/img/room_planner4/3-2.png" alt="" class="img-style" style="margin-bottom: 15px;">
-              <h4>家具、系統櫃</h4>
-              <p class="text-box">家具、系統櫃報價：<br>訂單確認簽名後，才進行付款。</p>
-            </section>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div id="container-4" class="d-flex number-mt">
-      <div>
-        <p class="d-flex justify-content-center align-items-center number-4">
-          04 <br> 付款階段
-        </p>
-      </div>
-      <div class="row" style="letter-spacing: 1px; width: 100%;">
-        <div class="col-12 col-md-6" style="padding: 0 20px;">
-          <section>
-            <img src="/img/room_planner4/4-1.png" alt="" class="img-style" style="margin-bottom: 15px;">
-            <h4>裝修簽約並付款</h4>
-            <p class="text-box">
-              確認裝修報價明細後，進行安心裝修服務簽約並訂單付款。
-            </p>
-            <amp-accordion id="myAccordion" disable-session-states="">
-              <section>
-                <div class="question example" style="border: none; background: none; padding: 0;"> <span
-                    id="rotate-3">▼</span> 安心裝修合約
-                </div>
-                <div style="padding: 0;">
-                  <ul>
-                    <li>信用卡付款(全額付款)</li>
-                    <li>現金/匯款付款(簽約付 50%、木工完成後 40%、驗收後 10%)</li>
-                    <li>合約內小寶優居收取裝修總價 5% 為安心裝修服務費</li>
-                  </ul>
-                  <span class="example" style="color: black;">【裝修總價 5% 的服務費，<span class="break"><br></span>換 100%
-                    的安心裝修】</span>
-                  <ul style="list-style: none; margin: 0;">
-                    <li>∨ 嚴選裝修師傅</li>
-                    <li>∨ 嚴選裝修材料</li>
-                    <li>∨ 專人協助監工</li>
-                    <li>∨ 裝修履約保證</li>
-                    <li>∨ 約束裝修保固</li>
-                  </ul>
-                </div>
-              </section>
-            </amp-accordion>
-          </section>
-        </div>
-        <div class="col-12 col-md-6" style="padding: 0 20px;">
-          <section>
-            <img src="/img/room_planner4/4-2.png" alt="" class="img-style" style="margin-bottom: 15px;">
-            <h4>家具、系統櫃付款</h4>
-            <p class="text-box">
-              確認所有家具、系統櫃品項與金額，進行訂單付款。
-            </p>
-            <amp-accordion id="myAccordion" disable-session-states="">
-              <section>
-                <div class="question example" style="border: none; background: none; padding: 0;"><span
-                    id="rotate-4">▼</span> 家具、系統櫃訂單付款
-                </div>
-                <div style="padding: 0;">
-                  <ul>
-                    <li>信用卡付款(全額付款)</li>
-                    <li>
-                      現金/匯款付款(確認訂單、系統櫃出貨前付時付 50%、系統櫃出貨前付 50%)
-                    </li>
-                  </ul>
-                </div>
-              </section>
-            </amp-accordion>
-          </section>
-        </div>
-      </div>
-    </div>
-    <div id="container-5" class="d-flex">
-      <div>
-        <p class="d-flex justify-content-center align-items-center number-5">
-          05 <br> 施工階段
-        </p>
-      </div>
-      <div class="row" style="letter-spacing: 1px">
-        <div class="col-12 col-md-6" style="padding: 0 20px;">
-          <section>
-            <img src="/img/room_planner4/5-1.png" alt="" class="img-style">
-            <h4>1.裝修動工</h4>
-            <p class="text-box">
-              安心裝修師傅，開始到你家進行裝修工程，過程我們將每週向你回報工程進度，與每一種工種完工後將進行驗收並拍照向你回報。
-            </p>
-          </section>
-        </div>
-        <div class="col-12 col-md-6" style="padding: 0 20px;">
-          <section>
-            <img src="/img/room_planner4/5-2.png" alt="" class="img-style">
-            <h4>2.家具定位</h4>
-            <p class="text-box">
-              當裝修完成80%，我們安排系統櫃到你家進行安裝，接著進行細部清潔，並安排家具到府定位。
-            </p>
-            <amp-accordion id="myAccordion" disable-session-states="">
-              <section class="example-5">
-                <div class="question example" style="border: none; background: none; padding: 0;"><span
-                    id="rotate-5">▼</span> 整體完工時間參考
-                </div>
-                <div style="padding: 0;">
-                  <ul>
-                    <li style="list-style: none; margin-left: -20px;">【屋況】</li>
-                    <li>無需拆除工程，<span class="break"><br></span>約 2-3 個月。</li>
-                    <li>需要拆除工程，<span class="break"><br></span>約 2.5-3.5 個月。</li>
-                    <li>需要拆除工程管線更新，<span class="break"><br></span>約 3-4 個月。</li>
-                  </ul>
-                </div>
-              </section>
-            </amp-accordion>
-          </section>
-        </div>
-        <div class="col-12" style="padding: 0 20px;">
-          <section>
-            <img src="/img/room_planner4/5-3.png" alt="" class="img-style" style="margin-bottom: 15px;">
-            <h4>3.完工驗收</h4>
-            <div class="text-box">
-              <p>最後，我們到你家，與你進行整體驗收：</p>
-              <ul>
-                <li>設計</li>
-                <li>裝修</li>
-                <li>家具</li>
-                <li>系統櫃</li>
-              </ul>
-              <p>並提供後續保固資訊與服務。</p>
-            </div>
-            <span class="example">「小寶優居，陪你一輩子」</span>
-            <ul>
-              <li>沙發、床架實木骨架：<span class="break"><br></span>保固 10 年，永久保修。</li>
-              <li>系統櫃、五金：<span class="break"><br></span>保固 5 年，永久保修。</li>
-              <li>靠墊坐墊泡棉：<span class="break"><br></span>保固 3 年，永久保修。</li>
-              <li>實木家具：<span class="break"><br></span>保固 5 年，永久保修。</li>
-              <li>裝修：<span class="break"><br></span>保固 1 年，永久保修。</li>
-            </ul>
-          </section>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- <div class="container text-center">
-        <div class="row row-cols-1 row-cols-sm-3">
-            <div class="col">
-                <div class="card h-100">
-                    <div class="card-body">
-                        <div class="title-size"><b>Step1</b></div>
-                        <div><b>線上預約</b></div>
-                    </div>
-                    <amp-img
-                        class="card-img-top"
-                        alt="Step1.線上預約"
-                        src="/img/home/step1.webp"
-                        width="700"
-                        height="450"
-                        layout="responsive">
-                    </amp-img>
-                </div>
-            </div>
-            <div class="col">
-                <div class="card h-100">
-                    <div class="card-body">
-                        <div class="title-size"><b>Step2</b></div>
-                        <div><b>專人聯繫</b></div>
-                    </div>
-                    <amp-img
-                        class="card-img-top"
-                        alt="Step2.專人聯繫"
-                        src="/img/home/step2.webp"
-                        width="700"
-                        height="450"
-                        layout="responsive">
-                    </amp-img>
-                </div>
-            </div>
-            <div class="col">
-                <div class="card h-100">
-                    <div class="card-body">
-                        <div class="title-size"><b>Step3</b></div>
-                        <div><b>門市諮詢</b></div>
-                    </div>
-                    <amp-img
-                        class="card-img-top"
-                        alt="Step3.門市諮詢"
-                        src="/img/home/step3.webp"
-                        width="700"
-                        height="450"
-                        layout="responsive">
-                    </amp-img>
-                </div>
-            </div>
-        </div>
-        <div class="mt-1 row row-cols-1 row-cols-sm-3">
-            <div class="col">
-                <div class="card h-100">
-                    <div class="card-body">
-                        <div class="title-size"><b>Step4</b></div>
-                        <div><b>設計簽約</b></div>
-                    </div>
-                    <amp-img
-                        class="card-img-top"
-                        alt="Step4.設計簽約"
-                        src="/img/home/step4.webp"
-                        width="700"
-                        height="450"
-                        layout="responsive">
-                    </amp-img>
-                </div>
-            </div>
-            <div class="col">
-                <div class="card h-100">
-                    <div class="card-body">
-                        <div class="title-size"><b>Step5</b></div>
-                        <div><b>到府丈量</b></div>
-                    </div>
-                    <amp-img
-                        class="card-img-top"
-                        alt="Step5.到府丈量"
-                        src="/img/home/step5.webp"
-                        width="700"
-                        height="450"
-                        layout="responsive">
-                    </amp-img>
-                </div>
-            </div>
-            <div class="col">
-                <div class="card h-100">
-                    <div class="card-body">
-                        <div class="title-size"><b>Step6</b></div>
-                        <div><b>確認設計</b></div>
-                    </div>
-                    <amp-img
-                        class="card-img-top"
-                        alt="Step6.確認設計"
-                        src="/img/home/step6.webp"
-                        width="700"
-                        height="450"
-                        layout="responsive">
-                    </amp-img>
-                </div>
-            </div>
-        </div>
-        <div class="mt-1 row row-cols-1 row-cols-sm-3">
-            <div class="col">
-                <div class="card h-100">
-                    <div class="card-body">
-                        <div class="title-size"><b>Step7</b></div>
-                        <div><b>訂單付款</b></div>
-                    </div>
-                    <amp-img
-                        class="card-img-top"
-                        alt="Step7.訂單付款"
-                        src="/img/home/step7.webp"
-                        width="700"
-                        height="450"
-                        layout="responsive">
-                    </amp-img>
-                </div>
-            </div>
-            <div class="col">
-                <div class="card h-100">
-                    <div class="card-body">
-                        <div class="title-size"><b>Step8</b></div>
-                        <div><b>進場施工</b></div>
-                    </div>
-                    <amp-img
-                        class="card-img-top"
-                        alt="Step8.進場施工"
-                        src="/img/home/step8.webp"
-                        width="700"
-                        height="450"
-                        layout="responsive">
-                    </amp-img>
-                </div>
-            </div>
-            <div class="col">
-                <div class="card h-100">
-                    <div class="card-body">
-                        <div class="title-size"><b>Step9</b></div>
-                        <div><b>完工驗收</b></div>
-                    </div>
-                    <amp-img
-                        class="card-img-top"
-                        alt="Step9.完工驗收"
-                        src="/img/home/step9.webp"
-                        width="700"
-                        height="450"
-                        layout="responsive">
-                    </amp-img>
-                </div>
-            </div>
-        </div>
-    </div> -->
-
-</section>
-
-<section class="section25" style="padding-top: 0;">
-  <div class="container text-center">
-    <div class="content" style="padding: 10% 5%;">
-      <div class="mb-3">
-        成家不是你一個人的事
-        <br>
-        而是『我們』的事
-      </div>
-      <a
-        href="https://ocard.co/q?s=mV8ggl&qtk=bZ9nam&_ga=2.217024726.1920529194.1647230971-537084252.1585651100&_gac=1.92506735.1644819785.CjwKCAiA-9uNBhBTEiwAN3IlND3kaFKezwU7hxt8Vw2R5Y5kO3NOLDzqsOwF3oNtJ8Aypb0zOcpThhoCXbUQAvD_BwE">立即預約成家設計師
-        >>></a>
-    </div>
-    <div style="padding:80px 0;">
-      <div class="title mb-3"><b>小寶優居和你一起</b></div>
-      <div class="title"><b>客製化你的成家故事</b></div>
-    </div>
-    <div class="row row-cols-1 row-cols-sm-3">
-      <div class="col">
-        <div class="card h-100">
-          <a href="https://accu-url.me/3k46hc">
-            <amp-img class="card-img-top" alt="台南 張家人" src="/img/room_planner3/12.webp" width="1398" height="970"
-              layout="responsive">
-            </amp-img>
-          </a>
-          <div class="card-body">
-            <div class="mb-1 title-size"><b>台南 張家人</b></div>
-            <div class="sub-title">「成家設計師就是知道我要什麼，朋友都說，這個模組系統櫃用料很好，很實在」</div>
-          </div>
-        </div>
-      </div>
-      <div class="col">
-        <div class="card h-100">
-          <a href="https://accu-url.me/3k2zu7">
-            <amp-img class="card-img-top" alt="桃園 Luke&東東" src="/img/room_planner3/13.webp" width="1398" height="970"
-              layout="responsive">
-            </amp-img>
-          </a>
-          <div class="card-body">
-            <div class="mb-1 title-size"><b>桃園 Luke&圈圈</b></div>
-            <div class="sub-title">「成家設計師就像好朋友一樣，幫我打造溫暖又很潮的家，相處起來溫暖又自在」</div>
-          </div>
-        </div>
-      </div>
-      <div class="col">
-        <div class="card h-100">
-          <a href="https://accu-url.me/3jtmhp">
-            <amp-img class="card-img-top" alt="基隆 暖爸&暖媽" src="/img/room_planner3/14.webp" width="1398" height="970"
-              layout="responsive">
-            </amp-img>
-          </a>
-          <div class="card-body">
-            <div class="mb-1 title-size"><b>基隆 暖爸&暖媽</b></div>
-            <div class="sub-title">「感謝成家設計師在過程中，不怕麻煩的不斷幫我們跟統包師傅溝通，最後也順利準時入住啦」</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>

themes/hugo-lamp/layouts/partials/head.html

@@ -91,7 +91,8 @@
 <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
 <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
 <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
-
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
 <!-- Site made with Mobirise Website Builder v4.7.1, https://mobirise.com -->
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -101,6 +102,7 @@
 <!-- <link rel="shortcut icon" href="assets/images/logo-1.png" type="image/x-icon"> -->
 <link href="/img/shortcut.png" rel="shortcut icon" type="image/png">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
   
 <link rel="canonical" href="index.html">
 <style amp-boilerplate="">body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>

themes/hugo-lamp/static/css/chuz.css

@@ -29,7 +29,7 @@
   --breakpoint-lg: 992px;
   --breakpoint-xl: 1200px;
   --font-family-sans-serif: "Roboto Condensed", sans-serif;
-  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
+  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
 ;
 }
 
@@ -1835,9 +1835,9 @@ nav {
   margin: 0;
   padding: 0;
   background-color: #FFFFFF;
-  /* Since we'll have the "ul li" "float:left"
+  /* Since we'll have the "ul li" "float:left"
 	* we need to add a clear after the container. */
-  /* Removing padding, margin and "list-style" from the "ul",
+  /* Removing padding, margin and "list-style" from the "ul",
 	* and adding "position:reltive" */
   /* Styling the links */
 }
@@ -1854,7 +1854,7 @@ nav ul {
   margin: 0;
   list-style: none;
   position: relative;
-  /* Hide Dropdowns by Default
+  /* Hide Dropdowns by Default
 		* and giving it a position of absolute */
 }
 
@@ -1876,9 +1876,9 @@ nav ul ul {
   /* top: 60px;  */
   top: 50px;
   /* Fisrt Tier Dropdown */
-  /* Second, Third and more Tiers	
-			* We move the 2nd and 3rd etc tier dropdowns to the left
-			* by the amount of the width of the first tier.
+  /* Second, Third and more Tiers	
+			* We move the 2nd and 3rd etc tier dropdowns to the left
+			* by the amount of the width of the first tier.
 			*/
 }
 
@@ -1920,7 +1920,7 @@ li > a:only-child:after {
   content: '';
 }
 
-/* Media Queries
+/* Media Queries
 --------------------------------------------- */
 @media all and (max-width: 768px) {
   nav {
@@ -3643,4 +3643,597 @@ amp-accordion div .start {
   background-color: #0d6efd;
   border-color: #0d6efd;
 }
-/*# sourceMappingURL=chuz.css.map */
+/*# sourceMappingURL=chuz.css.map */
+
+.section25 {
+  background-color: #f1f1f1;
+  font-family: "Noto Sans TC", sans-serif;
+}
+
+.section25 h2 {
+  color: #78ad42;
+}
+
+.section25 .title {
+  color: #78ad42;
+}
+
+.section25 .sub-title {
+  color: #4d4d4d;
+}
+
+.section25 .header p {
+  font-size: 1.1rem;
+  padding-bottom: 5px;
+  color: black;
+  text-align: center;
+  font-weight: bold;
+}
+
+.section25 .title-box {
+  max-width: 700px;
+  width: 100%;
+  margin: auto;
+  padding-bottom: 25px;
+  margin-bottom: 40px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  border-bottom: 2px solid #78ad42;
+  color: #78ad42;
+  font-size: 1.1rem;
+  font-weight: bold;
+}
+
+.section25 .title-box a {
+  padding: 5px 8px;
+  color: #78ad42;
+  cursor: pointer;
+}
+
+.section25 .title-box a:hover {
+  opacity: 0.7;
+}
+
+@media (max-width: 767px) {
+  .section25 .header-img-box {
+    padding: 0 8%;
+  }
+
+  .section25 .title-box {
+    max-width: 400px;
+    margin-bottom: 40px;
+    justify-content: start;
+  }
+}
+
+@media (max-width: 414px) {
+  .section25 .title-box {
+    max-width: 350px;
+    width: 100%;
+  }
+}
+
+@media (max-width: 576px) {
+  .section25 .header-img-box {
+    padding: 0 12%;
+  }
+}
+
+.section25 #rotate-1,
+.section25 #rotate-2,
+.section25 #rotate-3,
+.section25 #rotate-4,
+.section25 #rotate-5 {
+  display: inline-block;
+  transform: rotate(-90deg);
+}
+
+.section25 .header-img {
+  width: 200px;
+  height: auto;
+  max-width: 100%;
+  margin-bottom: 30px;
+}
+
+.section25 .number-1,
+.section25 .number-2,
+.section25 .number-3,
+.section25 .number-4,
+.section25 .number-5 {
+  width: 120px;
+  height: 120px;
+  position: relative;
+  margin-right: 20px;
+  border: 2px solid #769948;
+  border-radius: 100%;
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 2px;
+  color: #78ad42;
+  text-align: center;
+}
+
+.section25 .number-1::before,
+.section25 .number-2::before,
+.section25 .number-3::before,
+.section25 .number-4::before,
+.section25 .number-5::before {
+  content: "";
+  display: block;
+  width: 2px;
+  background: #78ad42;
+  position: relative;
+  left: 2.3rem;
+}
+
+.section25 .number-1::before {
+  height: 610px;
+  bottom: -22.8rem;
+}
+
+.section25 .number-2::before,
+.section25 .number-3::before {
+  height: 380px;
+  bottom: -15.6rem;
+}
+
+.section25 .number-4::before {
+  height: 470px;
+  bottom: -18.3rem;
+}
+
+.section25 .number-5::before {
+  height: 1050px;
+  bottom: -36.5rem;
+}
+
+@media (max-width: 1200px) {
+  .section25 .number-1::before {
+    height: 680px;
+    bottom: -25rem;
+  }
+
+  .section25 .number-4::before {
+    height: 560px;
+    bottom: -21.2rem;
+  }
+
+  .section25 .number-5::before {
+    height: 1080px;
+    bottom: -37.5rem;
+  }
+}
+
+@media (max-width: 992px) {
+  .section25 .number-1::before {
+    height: 780px;
+    bottom: -28rem;
+  }
+
+  .section25 .number-4::before {
+    height: 600px;
+    bottom: -22.5rem;
+  }
+
+  .section25 .number-5::before {
+    height: 1100px;
+    bottom: -38.1rem;
+  }
+}
+
+@media (max-width: 767px) {
+  .section25 .number-1::before {
+    height: 1530px;
+    bottom: -51.5rem;
+  }
+
+  .section25 .number-2::before {
+    height: 780px;
+    bottom: -28rem;
+  }
+
+  .section25 .number-3::before {
+    height: 570px;
+    bottom: -21.5rem;
+  }
+
+  .section25 .number-4::before {
+    height: 980px;
+    bottom: -34.3rem;
+  }
+
+  .section25 .number-5::before {
+    height: 1440px;
+    bottom: -48.6rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .section25 .number-1::before {
+    height: 1700px;
+    bottom: -56.2rem;
+  }
+
+  .section25 .number-2::before {
+    height: 900px;
+    bottom: -31.2rem;
+  }
+
+  .section25 .number-3::before {
+    height: 650px;
+    bottom: -23.4rem;
+  }
+
+  .section25 .number-4::before {
+    height: 1070px;
+    bottom: -36.5rem;
+  }
+
+  .section25 .number-5::before {
+    height: 1480px;
+    bottom: -49.4rem;
+  }
+
+  .section25 .number-1,
+  .section25 .number-2,
+  .section25 .number-3,
+  .section25 .number-4,
+  .section25 .number-5 {
+    width: 100px;
+    height: 100px;
+    margin-right: 0px;
+  }
+}
+
+@media (max-width: 414px) {
+  .section25 .number-5::before {
+    height: 1550px;
+    bottom: -51.5rem;
+  }
+}
+
+@media (max-width: 375px) {
+  .section25 .number-1::before {
+    height: 1800px;
+    bottom: -59.3rem;
+  }
+
+  .section25 .number-2::before {
+    height: 950px;
+    bottom: -32.7rem;
+  }
+
+  .section25 .number-3::before {
+    height: 700px;
+    bottom: -25rem;
+  }
+
+  .section25 .number-4::before {
+    height: 1170px;
+    bottom: -39.6rem;
+  }
+
+  .section25 .number-5::before {
+    height: 1630px;
+    bottom: -54rem;
+  }
+}
+
+.section25 .number-1::after,
+.section25 .number-2::after,
+.section25 .number-3::after,
+.section25 .number-4::after {
+  content: "";
+  display: block;
+  width: 10px;
+  height: 10px;
+  border-top: solid 15px #78ad42;
+  border-left: solid 15px transparent;
+  border-right: solid 15px transparent;
+  position: absolute;
+}
+
+.section25 .number-5::after {
+  content: "";
+  display: block;
+  width: 18px;
+  height: 18px;
+  border-radius: 100%;
+  border-top: solid 18px #78ad42;
+  position: absolute;
+  left: 2.75rem;
+}
+
+.section25 .number-1::after {
+  bottom: -39rem;
+}
+
+.section25 .number-2::after,
+.section25 .number-3::after {
+  bottom: -24.7rem;
+}
+
+.section25 .number-4::after {
+  bottom: -30rem;
+}
+
+.section25 .number-5::after {
+  bottom: -66.5rem;
+  left: 3.15rem;
+}
+
+@media (max-width: 1200px) {
+  .section25 .number-1::after {
+    bottom: -43rem;
+  }
+
+  .section25 .number-4::after {
+    bottom: -35.5rem;
+  }
+
+  .section25 .number-5::after {
+    bottom: -68rem;
+    left: 3.15rem;
+  }
+}
+
+@media (max-width: 992px) {
+  .section25 .number-1::after {
+    bottom: -49rem;
+  }
+
+  .section25 .number-4::after {
+    bottom: -38rem;
+  }
+
+  .section25 .number-5::after {
+    bottom: -69.5rem;
+    left: 3.15rem;
+  }
+}
+
+@media (max-width: 767px) {
+  .section25 .number-1::after {
+    bottom: -96rem;
+  }
+
+  .section25 .number-2::after {
+    bottom: -49rem;
+  }
+
+  .section25 .number-3::after {
+    bottom: -36rem;
+  }
+
+  .section25 .number-4::after {
+    bottom: -62rem;
+  }
+
+  .section25 .number-5::after {
+    bottom: -90.5rem;
+    left: 3.1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .section25 .number-1::after {
+    bottom: -107rem;
+  }
+
+  .section25 .number-2::after {
+    bottom: -56.5rem;
+  }
+
+  .section25 .number-3::after {
+    bottom: -41.5rem;
+  }
+
+  .section25 .number-4::after {
+    bottom: -67.5rem;
+  }
+
+  .section25 .number-5::after {
+    bottom: -93.5rem;
+    left: 2.5rem;
+  }
+}
+
+@media (max-width: 414px) {
+  .section25 .number-5::after {
+    bottom: -97rem;
+  }
+}
+
+@media (max-width: 375px) {
+  .section25 .number-1::after {
+    bottom: -113rem;
+  }
+
+  .section25 .number-2::after {
+    bottom: -60rem;
+  }
+
+  .section25 .number-3::after {
+    bottom: -44.5rem;
+  }
+
+  .section25 .number-4::after {
+    bottom: -74rem;
+  }
+
+  .section25 .number-5::after {
+    bottom: -102.5rem;
+  }
+}
+
+.section25 .number-mt {
+  padding-top: 5rem;
+}
+
+@media (max-width: 992px) {
+  .section25 .number-mt {
+    padding-top: 0;
+  }
+}
+
+.section25 .img-style {
+  width: 150px;
+  height: auto;
+  margin-bottom: 30px;
+}
+
+.section25 h3 {
+  margin: 30px 0 60px;
+}
+
+.section25 h3,
+.section25 h4 {
+  margin: 0;
+  padding-bottom: 5px;
+  font-size: 1.1rem;
+  font-weight: bold;
+  color: #78ad42;
+}
+
+.section25 .text-box {
+  margin: 0;
+  padding: 20px;
+  font-family: "Noto Sans TC", sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  letter-spacing: 2px;
+  color: #4d4d4d;
+  border: 2px solid #78ad42;
+  text-align: justify;
+}
+
+.section25 .text-box p {
+  margin-bottom: 0;
+}
+
+.section25 .example {
+  margin: 20px 0;
+  display: block;
+  color: #78ad42;
+  font-weight: bold;
+}
+
+.section25 ul {
+  margin-left: 25px;
+  padding-left: 0;
+  margin-bottom: 0;
+}
+
+.section25 .content {
+  color: #fff;
+  background: #565656;
+  font-size: 1.3rem;
+  font-weight: bold;
+}
+
+.section25 a {
+  color: #29b4e8;
+  text-decoration: underline;
+  font-size: 1rem;
+}
+
+@media (min-width: 768px) {
+  .section25 .img-padding {
+    padding: 0px 350px;
+  }
+}
+
+.section25 .break {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .section25 .break {
+    display: inline;
+  }
+}
+
+.section25 #container-1 {
+  padding-top: 100px;
+  height: 850px;
+}
+
+.section25 #container-4 {
+  height: 700px;
+}
+
+.section25 #container-5 {
+  height: 1050px;
+}
+
+.section25 #container-1,
+.section25 #container-2,
+.section25 #container-3,
+.section25 #container-4,
+.section25 #container-5 {
+  margin-bottom: 12rem;
+}
+
+@media (max-width: 992px) {
+  .section25 #container-1 {
+    height: 950px;
+  }
+}
+
+@media (max-width: 767px) {
+  .section25 #container-1 {
+    height: 1750px;
+  }
+
+  .section25 #container-4 {
+    height: 1100px;
+  }
+
+  .section25 #container-5 {
+    height: 1450px;
+  }
+
+  .section25 #container-1,
+  .section25 #container-2,
+  .section25 #container-3,
+  .section25 #container-4,
+  .section25 #container-5 {
+    margin-bottom: 8rem;
+  }
+
+}
+
+@media (max-width: 480px) {
+  .section25 #container-1 {
+    height: 1850px;
+  }
+
+  .section25 #container-4 {
+    height: 1200px;
+  }
+
+  .section25 #container-5 {
+    height: 1520px;
+  }
+}
+
+@media (max-width: 376px) {
+  .section25 #container-1 {
+    height: 1950px;
+  }
+
+  .section25 #container-5 {
+    height: 1600px; 
+  }
+}
+
+.section25 .example-5 {
+  height: 100px;
+}
+
+@media (max-width: 768px) {
+  .section25 .example-5 {
+    height: auto;
+  }
+}