add match page

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5502
+    "liveServer.settings.port": 5503
 }

index.html

@@ -336,6 +336,10 @@
       <!-- <div class="btn-gotop mb-2">
         <img src="images/gotop.png" width="28" alt="">
       </div> -->
+      <div class="btn-match mb-2">
+        <!-- <img data-src="images/match_icon_uncover.png" width="35" alt="" class="lazyload"> -->
+        <p>媒合<br>設計師</p>
+      </div> 
       <div class="btn-gotop">
         <img src="images/gotop.webp" width="28" alt="">
       </div>
@@ -747,6 +751,228 @@
         </div>
       </div>
     </div>
+
+    <div class="sec-match">
+      <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
+        <div class="container-fluid" style="padding:0 8px;margin:0;">
+            <div class="navbar-brand navbar-backs me-0">
+              <i class="fas fa-chevron-left"></i>
+            </div>
+            <a href="#" class="navbar-brand"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="141"></a>
+            <div class="navbar-brand navbar-search me-0">
+            </div>
+        </div>
+      </nav>
+      <div class="container-fluid sec-match-block px-0">
+        <div class="sec-match-list w-100">
+          <h4 class="sec- text-center">快速媒合設計師</h4>
+          <h6 class="sec- text-center mb-5">請填寫您的裝修資訊</h6>
+          <!-- 媒合表單一 -->
+          <div class="container container_match">
+            <div class="row ">
+              <div class="col-1"></div>
+              <div class="col-3 p-2">
+                <label for="area">房屋地區</label>
+              </div>
+              <div class="col-7 p-2">
+                <select name="area" id="area" class="form-select">
+                  <option value="" disabled selected>請選擇房屋地區</option>
+                  <option class="option" value="基隆市">基隆市</option>
+                  <option class="option" value="台北市">台北市</option>
+                  <option class="option" value="新北市">新北市</option>
+                  <option class="option" value="桃園市">桃園市</option>
+                  <option class="option" value="新竹縣">新竹縣</option>
+                  <option class="option" value="新竹市">新竹市</option>
+                  <option class="option" value="苗栗縣">苗栗縣</option>
+                  <option class="option" value="台中市">台中市</option>
+                  <option class="option" value="彰化縣">彰化縣</option>
+                  <option class="option" value="南投縣">南投縣</option>
+                  <option class="option" value="雲林縣">雲林縣</option>
+                  <option class="option" value="嘉義縣">嘉義縣</option>
+                  <option class="option" value="嘉義市">嘉義市</option>
+                  <option class="option" value="台南市">台南市</option>
+                  <option class="option" value="高雄市">高雄市</option>
+                  <option class="option" value="屏東縣">屏東縣</option>
+                  <option class="option" value="宜蘭縣">宜蘭縣</option>
+                  <option class="option" value="花蓮縣">花蓮縣</option>
+                  <option class="option" value="台東縣">台東縣</option>
+                  <option class="option" value="澎湖縣">澎湖縣</option>
+                </select>
+                <div class="text-danger text-end small" id="area-error"></div>
+              </div>
+              <div class="col-1"></div>
+              <div class="col-1"></div>
+              <div class="col-3 p-2">
+                <label for="type">房屋類型</label>
+              </div>
+              <div class="col-7 p-2">
+                <select name="type" id="type" class="form-select">
+                  <option value="" disabled selected>請選擇房屋類型</option>
+                  <option class="option" value="預售屋">預售屋</option>
+                  <option class="option" value="中古屋">中古屋</option>
+                  <option class="option" value="新成屋">新成屋</option>
+                  <option class="option" value="毛胚屋">毛胚屋</option>
+                  <option class="option" value="自地自建">自地自建</option>
+                </select>
+                <div class="text-danger text-end small" id="type-error"></div>
+              </div>
+              <div class="col-1"></div>
+              <div class="col-1"></div>
+              <div class="col-3 p-2">
+                <label for="square">房屋坪數</label>
+              </div>
+              <div class="col-7 p-2">
+                <select name="square" id="square" class="form-select">
+                  <option value="" disabled selected>請選擇房屋坪數</option>
+                  <option class="option" value="10坪以下">10坪以下</option>
+                  <option class="option" value="11~20坪">11~20坪</option>
+                  <option class="option" value="21~30坪">21~30坪</option>
+                  <option class="option" value="31~40坪">31~40坪</option>
+                  <option class="option" value="41~50坪">41~50坪</option>
+                  <option class="option" value="51坪以上">51坪以上</option>
+                </select>
+                <div class="text-danger text-end small" id="square-error"></div>
+              </div>
+              <div class="col-1"></div>
+              <div class="col-1"></div>
+              <div class="col-3 p-2">
+                <label for="pattern">房屋格局</label>
+              </div>
+              <div class="col-7 p-2">
+                <select name="pattern" id="pattern" class="form-select">
+                  <option value="" disabled selected>請選擇房屋格局</option>
+                  <option class="option" value="一房">一房</option>
+                  <option class="option" value="兩房">兩房</option>
+                  <option class="option" value="三房">三房</option>
+                  <option class="option" value="四房">四房</option>
+                  <option class="option" value="五房">五房</option>
+                  <option class="option" value="六房">六房</option>
+                  <option class="option" value="六房以上">六房以上</option>
+                </select>
+                <div class="text-danger text-end small" id="pattern-error"></div>
+              </div>
+              <div class="col-1"></div>
+              <div class="col-1"></div>
+              <div class="col-3 p-2">
+                <label for="style">喜愛風格</label>
+              </div>
+              <div class="col-7 p-2">
+                <select name="style" id="style" class="form-select">
+                  <option value="" disabled selected>請選擇喜愛風格</option>
+                  <option class="option" value="現代風">現代風</option>
+                  <option class="option" value="鄉村風">鄉村風</option>
+                  <option class="option" value="古典風">古典風</option>
+                  <option class="option" value="休閒多元">休閒多元</option>
+                  <option class="option" value="美式風">美式風</option>
+                  <option class="option" value="奢華風">奢華風</option>
+                  <option class="option" value="東方風">東方風</option>
+                  <option class="option" value="混搭風">混搭風</option>
+                  <option class="option" value="新古典">新古典</option>
+                  <option class="option" value="日式禪風">日式禪風</option>
+                  <option class="option" value="北歐風">北歐風</option>
+                  <option class="option" value="工業風">工業風</option>
+                  <option class="option" value="異國風">異國風</option>
+                </select>
+                <div class="text-danger text-end small" id="style-error"></div>
+              </div>
+              <div class="col-1"></div>
+            </div>
+            <div class="row mt-5">
+              <button class="match__next mx-auto d-inline-block col-6">下一步</button>
+            </div>
+          </div>
+          <!-- 媒合表單二 -->
+          <div class="container container_match2">
+            <div class="row">
+              <div class="col-1"></div>
+              <div class="col-3 p-2">
+                <label for="name">姓名</label>
+              </div>
+              <div class="col-7 p-2">
+                <input type="text" name="name" id="name" class="form-control" required>
+                <div class="text-danger text-end small" id="name-error"></div>
+              </div>
+              <div class="col-1"></div>
+              <div class="col-1"></div>
+              <div class="col-3 p-2">
+                <label for="phone">電話</label>
+              </div>
+              <div class="col-7 p-2">
+                <input type="text" name="phone" id="phone" class="form-control" required>
+                <div class="text-danger text-end small" id="phone-error"></div>
+              </div>
+              <div class="col-1"></div>
+              <div class="col-1"></div>
+              <div class="col-3 p-2">
+                <label for="sex">性別</label>
+              </div>
+              <div class="col-7 p-2">
+                <select name="sex" id="sex" class="form-select">
+                  <option value="" disabled selected>請選擇性別</option>
+                  <option value="男">男</option>
+                  <option value="女">女</option>
+                </select>
+                <div class="text-danger text-end small" id="sex-error"></div>
+              </div>
+              <div class="col-1"></div>
+              <div class="col-1"></div>
+              <div class="col-3 p-2">
+                <label for="pattern">方便聯絡時間</label>
+              </div>
+              <div class="col-7 d-flex flex-column align-items-center text-start p-2">
+                <div style="width: 60%;" class="form-check check-click">
+                  <input type="checkbox" value="上午9點至12點" name="time" id="2b" class="form-check-input"/>
+                  <label  for="2b" class="mt-0">
+                    <p>上午9點至12點</p>
+                  </label>
+                </div>
+                <div style="width: 60%;" class="form-check check-click">
+                  <input type="checkbox" value="中午12點至1點" name="time" id="2c" class="form-check-input"/>
+                  <label  for="2c" class="mt-0">
+                    <p>中午12點至1點</p>
+                  </label>
+                </div>
+                <div style="width: 60%;" class="form-check check-click">
+                  <input type="checkbox" value="下午1點至6點" name="time" id="2d" class="form-check-input"/>
+                  <label  for="2d" class="mt-0">
+                    <p>下午1點至6點</p>
+                  </label>
+                </div>
+                <div style="width: 60%;" class="form-check check-click">
+                  <input type="checkbox" value="晚上6點至9點" name="time" id="2e" class="form-check-input" />
+                  <label  for="2e" class="mt-0">
+                    <p>晚上6點至9點</p>
+                  </label>
+                </div>
+                <div style="width: 60%;" class="form-check check-click">
+                  <input type="checkbox" value="隨時皆可" name="time" id="2a" checked class="form-check-input"/>
+                  <label for="2a" class="mt-0">
+                    <p>隨時皆可</p>
+                  </label>
+                </div>
+              </div>
+              <div class="col-1"></div>
+            </div>
+            <div class="row mb-3 mt-5">
+              <button class="last-step mx-auto d-inline-block col-5">上一步</button>
+              <button class="match__next2 mx-auto d-inline-block col-5">送出</button>
+            </div>
+            <div class="row mb-3">
+              <div class="col-8 mx-auto text-center">
+                <div class="form-check">
+                  <input type="checkbox" id="readPolicy" class="form-check-input" checked>
+                  <label for="readPolicy" class="custom-control-label mt-0">同意 
+                    <a href="https://hhh.com.tw/about/privacy_policy/" target="_blank" style="color: #EE7800;
+                    text-decoration: none;">免責聲明與隱私使用政策</a>
+                  </label>
+                  <div class="text-danger text-left small" id="readPolicy-error"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <!-- <div class="sec-favor d-none">
       <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
         <div class="container-fluid" style="padding:0 8px;margin:0;">

index_designerList_mb.html

@@ -0,0 +1,1310 @@
+<!DOCTYPE html>
+<html lang="zh_TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1">
+    <meta http-equiv="Cache-Control" content="no-cache">
+    <meta name="copyright" content="2021 © 幸福空間 │ All Rights Reserved.">
+    <meta name="creation-date" content="2021-08-05 12:00:04 GTM+8">
+    <meta name="description" content="讓幸福室內設計，走進您的生活，解決您的裝潢問
+    題!幸福空間是台灣最大的室內設計、設計師與設計個案影音平台之一，找尋室內設計點子與案例我
+    們一定能幫助你!">
+    <meta name="distribution" content="Taiwan">
+    <meta name="keywords" content="">
+    <meta name="revisit-after" content="1 days">
+    <meta name="robots" content="all">
+    <meta name="format-detection" content="telephone=no">
+
+    <meta property="og:description" content="讓幸福室內設計，走進您的生活，解決您的裝潢問題!
+    幸福空間是台灣最大的室內設計、設計師與設計個案影音平台之一，找尋室內設計點子與案例我們一定能幫助
+    你!"/>
+    <meta property="og:site_name" content="幸福空間"/>
+    <meta property="og:title" content="幸福空間 - 台灣最大的室內設計、設計師與設計個案影音平台"/>
+    <meta property="og:type" content="website"/>
+    <meta property="og:locale" content="zh_TW">
+    <title>幸福空間 - 室內設計、裝潢、居家生活、影音平台</title>
+
+    <link rel="icon" href="images/favicon.ico">
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
+    crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
+        rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
+        crossorigin="anonymous">
+
+    <link rel="stylesheet" href="css/jquery-ui.css">
+    <link rel="stylesheet" type="text/css" href="css/slick.css" />
+    <link rel="stylesheet" type="text/css" href="css/slick-theme.css" />
+
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <link rel="stylesheet" href="sass/list-style.css">
+</head>
+<body>
+  <div style="overflow-x:hidden;" class="wholeBody">
+    <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
+        <div class="container-fluid" style="padding:0 8px;margin:0;">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <a href="https://m.hhh.com.tw/" class="navbar-brand"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="141"></a>
+            <div class="navbar-brand navbar-search me-0 d-flex align-items-center">
+                <img width="25" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMC4wMDMiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMC4wMDMgMjAiPgogIDxnIGlkPSJzZWFyY2giIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjA1KSI+CiAgICA8cGF0aCBpZD0iUGF0aF8yMjcyIiBkYXRhLW5hbWU9IlBhdGggMjI3MiIgZD0iTTE5Ljg4LDE4Ljk4bC00Ljg2Mi00Ljg2YTguNTM5LDguNTM5LDAsMSwwLS44NDMuODQzbDQuODYyLDQuODZhLjYuNiwwLDAsMCwuNDIxLjE3Ny41ODQuNTg0LDAsMCwwLC40MjEtLjE3N0EuNi42LDAsMCwwLDE5Ljg4LDE4Ljk4Wk0xLjI0Myw4LjUyOGE3LjMzMyw3LjMzMywwLDEsMSw3LjMzMyw3LjMzNUE3LjM0LDcuMzQsMCwwLDEsMS4yNDMsOC41MjhaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwKSIgZmlsbD0iI2VlNzgwMCIvPgogIDwvZz4KPC9zdmc+Cg==" alt="">
+            </div>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            </div>
+        </div>
+    </nav>
+
+    <section class="w-100 mb__hero">
+      <div class="mb__hero__bgImg" style="background-image: url(https://cloud.hhh.com.tw/upload/_hdesigner/background_mobile_447_20210128104517.jpg);">
+      </div>
+    </section>
+    <section class="mb__content container-fluid">
+      <div class="row">
+        <div class="col-12 col-md-3 position-relative">
+          <div class="mb__infoCard">
+            <div class="mb__infoCard__avatar mx-auto mb-3" style="background-image: url(https://cloud.hhh.com.tw/gs/designer/designer494_00.jpg);">
+            </div>
+            <h2 class="mt-3 mb__infoCard__name">蔡岳儒</h2>
+            <span class="mb-3 d-inline-block mb__infoCard__span">設計師</span>
+            <h4 class="mb-3 mb__infoCard__cmy">恆岳空間設計</h4>
+            <strong class="mb-3 mb__infoCard__seo">恆岳空間設計｜蔡岳儒 室內設計師，為台北老屋翻新好評推薦的室內設計師，
+                將老屋妙手回春成現代風小豪宅，亦擅長置入日式精闢手工藝術融入室內空間設計中。</strong>
+            <div class="mb__infoCard__approve mb-3">
+              ★老屋翻新‧住宅改造
+            </div>
+            <div class="mb__infoCard__detail">
+                  <aside class="d-flex">
+                    <div class="mb__infoCard__detail__l">
+                      <div>免費專線：</div>
+                    </div>
+                    <div class="mb__infoCard__detail__r">
+                      <a href="tel:0809000123,19499" class="text-hhh">0809-000-123#18890</a>
+                    </div>
+                  </aside>
+                  <aside class="d-flex">
+                    <div class="mb__infoCard__detail__l">
+                      <div>諮詢專線：</div>
+                    </div>
+                    <div class="mb__infoCard__detail__r">
+                      <div>0809-000-123#18890</div>
+                    </div>
+                  </aside>
+                  <aside class="d-flex">
+                    <div class="mb__infoCard__detail__l">
+                      <div>諮詢專線：</div>
+                    </div>
+                    <div class="mb__infoCard__detail__r">
+                      <div>0937-070-794</div>
+                    </div>
+                  </aside>
+                  <aside class="d-flex">
+                    <div class="mb__infoCard__detail__l">
+                      <div>公司傳真：</div>
+                    </div>
+                    <div class="mb__infoCard__detail__r">
+                      <div>02-2562-7002</div>
+                    </div>
+                  </aside>
+                  <aside class="d-flex">
+                    <div class="mb__infoCard__detail__l">
+                      <div>公司地址：</div>
+                    </div>
+                    <div class="mb__infoCard__detail__r">
+                      <div>台北市中山區林森北路50號4樓之一</div>
+                    </div>
+                  </aside>
+                  <aside class="d-flex">
+                    <div class="mb__infoCard__detail__l">
+                      <div>電子信箱：</div>
+                    </div>
+                    <div class="mb__infoCard__detail__r">
+                      <div>hengyuehdesign@gmail.com,gakuju@gmail.com</div>
+                    </div>
+                  </aside>
+                  <aside class="d-flex">
+                    <div class="mb__infoCard__detail__l">
+                      <div>公司網址：</div>
+                    </div>
+                    <div class="mb__infoCard__detail__r">
+                      <div>
+                        http://www.hengyueh.com.tw/</div>
+                    </div>
+                  </aside>
+                  <div class="mb__infoCard__more my-3">
+                    <i class="fa fa-chevron-down" aria-hidden="true"></i>
+                  </div>
+                  <div class="mb__infoCard__detail other">
+                    <aside class="d-flex">
+                      <div class="mb__infoCard__detail__l">
+                        <div>分公司地址：</div>
+                      </div>
+                      <div class="mb__infoCard__detail__r">
+                        <div>台北市中山區林森北路50號4樓之一</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="mb__infoCard__detail__l">
+                        <div>分公司電話：</div>
+                      </div>
+                      <div class="mb__infoCard__detail__r">
+                        <div>02-2562-7755</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="mb__infoCard__detail__l">
+                        <div>分公司傳真：</div>
+                      </div>
+                      <div class="mb__infoCard__detail__r">
+                        <div>02-2562-7002</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="mb__infoCard__detail__l">
+                        <div>分公司地址：</div>
+                      </div>
+                      <div class="mb__infoCard__detail__r">
+                        <div>上海市闵行区东川路2688号</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="mb__infoCard__detail__l title mt-5 mb-3">
+                        <div>接案條件</div>
+                      </div>
+                      <div class="infoCard__detail__r">
+                        <div></div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="mb__infoCard__detail__l">
+                        <div>接案預算：</div>
+                      </div>
+                      <div class="mb__infoCard__detail__r">
+                        <div>不限</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="mb__infoCard__detail__l">
+                        <div>接案坪數：</div>
+                      </div>
+                      <div class="mb__infoCard__detail__r">
+                        <div>不限</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="mb__infoCard__detail__l">
+                        <div>特殊接案：</div>
+                      </div>
+                      <div class="mb__infoCard__detail__r">
+                        <div>不限</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="mb__infoCard__detail__l">
+                        <div>收費方式：</div>
+                      </div>
+                      <div class="mb__infoCard__detail__r">
+                        <div>請來電洽詢 / 【丈量費】NT$5,000元(透天別墅另計) *此費用含實地丈量、需求訪談、
+                          初步平面配置與風格提案 *以上費用於簽設計合約時，可全額折抵</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="mb__infoCard__detail__l">
+                        <div>付費方式：</div>
+                      </div>
+                      <div class="mb__infoCard__detail__r">
+                        <div>簽約付30％、依工程進度分兩次，各付30％、完工驗收收10％</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="mb__infoCard__detail__l">
+                        <div>付費方式：</div>
+                      </div>
+                      <div class="mb__infoCard__detail__r">
+                        <div>簽約付30％、依工程進度分兩次，各付30％、完工驗收收10％</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="mb__infoCard__detail__l">
+                        <div>接案區域：</div>
+                      </div>
+                      <div class="mb__infoCard__detail__r">
+                        <div>北區,中區,南區,大陸</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="mb__infoCard__detail__l">
+                        <div>接案類型：</div>
+                      </div>
+                      <div class="mb__infoCard__detail__r">
+                        <div>小坪數,標準格局,別墅,大坪數,樓中樓,商業空間,工作空間,餐飲空間,民宿旅館,公共空間</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="mb__infoCard__detail__l">
+                        <div>接案風格：</div>
+                      </div>
+                      <div class="mb__infoCard__detail__r">
+                        <div>現代風,鄉村風,古典風,休閒多元,美式風,奢華風,新古典,日式禪風,東方風,混搭風,前衛風,北歐風,工業風,異國風</div>
+                      </div>
+                    </aside>
+                  </div>
+                  <section class="scMedia">
+                    <a href="">
+                      <img src="https://hhh.com.tw/assets/images/rv_web/fb.svg" alt="">
+                    </a>
+                    <a href="">
+                      <img src="https://hhh.com.tw/assets/images/rv_web/line.svg" alt="">
+                    </a>
+                    <a href="">
+                      <img src="https://hhh.com.tw/assets/images/rv_web/wechat.svg" alt="">
+                    </a>
+                    <a href="">
+                      <img src="https://hhh.com.tw/assets/images/rv_web/share.svg" alt="">
+                    </a>
+                    <a href="">
+                      <img src="https://hhh.com.tw/assets/images/rv_web/like-o.svg" alt="">
+                    </a>
+                  </section>
+            </div>
+          </div>
+        </div>
+        <div class="col-12 col-md-9 px-0">
+          <div class="infoContent">
+            <div class="bg-white infoContent__navBlock">
+              <ul class="nav d-flex nav-pills flex-wrap justify-content-around" id="pills-tab" role="tablist">
+                <li class="nav-item active p-0" role="presentation">
+                  <a class="nav-item-link nav-item-active bg-transparent active" id="pills-intro-tab"
+                  data-bs-toggle="pill" data-bs-target="#pills-intro" type="button" role="tab"
+                  aria-controls="pills-intro" aria-selected="true" data-link="https://hhh.com.tw/cases/lists/">作品</a>
+                </li>
+                <li class="nav-item p-0" role="presentation">
+                  <a class="nav-item-link nav-item-active bg-transparent" id="pills-video-tab"
+                  data-bs-toggle="pill" data-bs-target="#pills-video" type="button" role="tab"
+                  aria-controls="pills-video" aria-selected="false" data-link="https://hhh.com.tw/videos/lists/">影音</a>
+                </li>
+                <li class="nav-item p-0" role="presentation">
+                  <a class="nav-item-link nav-item-active bg-transparent" id="pills-columns-tab"
+                  data-bs-toggle="pill" data-bs-target="#pills-columns" type="button" role="tab"
+                  aria-controls="pills-columns" aria-selected="false" data-link="https://hhh.com.tw/columns/lists/">專欄</a>
+                </li>
+                <li class="nav-item p-0" role="presentation">
+                  <a class="nav-item-link nav-item-active bg-transparent" id="pills-company-tab"
+                  data-bs-toggle="pill" data-bs-target="#pills-company" type="button" role="tab"
+                  aria-controls="pills-company" aria-selected="false" data-link="https://hhh.com.tw/columns/lists/">公司簡介</a>
+                </li>
+              </ul>
+              <!-- <div class="likeSee" hidden>
+                <a href="">人氣</a>
+                <span class="likeSee__divider"></span>
+                <a href="">最新</a>
+              </div> -->
+            </div>
+            <div class="tab-content mt-5" id="pills-tabContent">
+              <div class="tab-pane fade active show" id="pills-intro" role="tabpanel"
+                  aria-labelledby="pills-intro-tab">
+                <div class="row">
+                  <div class="col-6 col-md-4">
+                    <a href="" target="_blank">
+                      <div class="card">
+                        <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
+                        </div>
+                        <div class="card-body">
+                          <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
+                          <p class="card-text mb-0">
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                          </p>
+                        </div>
+                      </div>
+                    </a>
+                  </div>
+                  <div class="col-6 col-md-4">
+                    <a href="" target="_blank">
+                      <div class="card">
+                        <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
+                        </div>
+                        <div class="card-body">
+                          <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
+                          <p class="card-text mb-0">
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                          </p>
+                        </div>
+                      </div>
+                    </a>
+                  </div>
+                  <div class="col-6 col-md-4">
+                    <a href="" target="_blank">
+                      <div class="card">
+                        <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
+                        </div>
+                        <div class="card-body">
+                          <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
+                          <p class="card-text mb-0">
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                          </p>
+                        </div>
+                      </div>
+                    </a>
+                  </div>
+                  <div class="col-6 col-md-4">
+                    <a href="" target="_blank">
+                      <div class="card">
+                        <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
+                        </div>
+                        <div class="card-body">
+                          <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
+                          <p class="card-text mb-0">
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                          </p>
+                        </div>
+                      </div>
+                    </a>
+                  </div>
+                  <div class="col-6 col-md-4">
+                    <a href="" target="_blank">
+                      <div class="card">
+                        <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
+                        </div>
+                        <div class="card-body">
+                          <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
+                          <p class="card-text mb-0">
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                          </p>
+                        </div>
+                      </div>
+                    </a>
+                  </div>
+                  <div class="col-6 col-md-4">
+                    <a href="" target="_blank">
+                      <div class="card">
+                        <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
+                        </div>
+                        <div class="card-body">
+                          <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
+                          <p class="card-text mb-0">
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                          </p>
+                        </div>
+                      </div>
+                    </a>
+                  </div>
+                </div>
+              </div>
+              <div class="tab-pane fade" id="pills-video" role="tabpanel"
+                  aria-labelledby="pills-video-tab">
+                  <div class="row">
+                    <div class="col-6 col-md-4">
+                      <a href="" target="_blank">
+                        <div class="card">
+                          <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
+                            <img src="https://hhh.com.tw/assets/images/rv_web/play.svg" alt="" width="50" height="50">
+                          </div>
+                          <div class="card-body">
+                            <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
+                            <p class="card-text mb-0">
+                              <a href="" class="card__tag" target="_blank">混搭風</a>
+                              <a href="" class="card__tag" target="_blank">混搭風</a>
+                              <a href="" class="card__tag" target="_blank">混搭風</a>
+                            </p>
+                          </div>
+                        </div>
+                      </a>
+                    </div>
+                    <div class="col-6 col-md-4">
+                      <a href="" target="_blank">
+                        <div class="card">
+                          <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
+                            <img src="https://hhh.com.tw/assets/images/rv_web/play.svg" alt="" width="50" height="50">
+                          </div>
+                          <div class="card-body">
+                            <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
+                            <p class="card-text mb-0">
+                              <a href="" class="card__tag" target="_blank">混搭風</a>
+                              <a href="" class="card__tag" target="_blank">混搭風</a>
+                              <a href="" class="card__tag" target="_blank">混搭風</a>
+                            </p>
+                          </div>
+                        </div>
+                      </a>
+                    </div>
+                    
+                  </div>
+              </div>
+              <div class="tab-pane fade" id="pills-columns" role="tabpanel"
+                aria-labelledby="pills-columns-tab">
+                <div class="row">
+                  <div class="col-6 col-md-4">
+                    <a href="" target="_blank">
+                      <div class="card">
+                        <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
+                        </div>
+                        <div class="card-body">
+                          <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
+                          <p class="card-text mb-0">
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                          </p>
+                        </div>
+                      </div>
+                    </a>
+                  </div>
+                  <div class="col-6 col-md-4">
+                    <a href="" target="_blank">
+                      <div class="card">
+                        <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
+                        </div>
+                        <div class="card-body">
+                          <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
+                          <p class="card-text mb-0">
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                          </p>
+                        </div>
+                      </div>
+                    </a>
+                  </div>
+                  <div class="col-6 col-md-4">
+                    <a href="" target="_blank">
+                      <div class="card">
+                        <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
+                        </div>
+                        <div class="card-body">
+                          <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
+                          <p class="card-text mb-0">
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                            <a href="" class="card__tag" target="_blank">混搭風</a>
+                          </p>
+                        </div>
+                      </div>
+                    </a>
+                  </div>
+                </div>
+              </div>
+              <div class="tab-pane fade" id="pills-company" role="tabpanel"
+                aria-labelledby="pills-company-tab">
+                <div class="row justfy-content-between">
+                  <div class="col-md-8">
+                    <article>
+                      <div class="company__block">
+                        <h4 class="company__title">設計理念</h4>
+                        <div class="company__text">
+                          空間設計的美學藝術，蔡岳儒總監更能將日式精闢的手工藝術融入台灣的設計與工程，更將留日所學發揚光大明確的把結構、
+                          動線、收納、光線與品味融入建築、景觀與室內三大空間之中，藉由點線面展現出空間的獨特性，並賦予空間延續的生命活力。
+                          <br>
+                          Design director Yueh-Ju Tsai is good at applying Japanese handmade fine art to the design
+                           and construction in Taiwan. Mr. Tsai has developed what he learned in Japan, and applied 
+                           structure, flow, storage, light and taste to the area of architecture, landscape and 
+                           interior. Mr. Tsai utilizes dots, lines, surface to show the unique character of space and 
+                           put vivid life into the space.
+                        </div>
+                      </div>
+                      <div class="company__block">
+                        <h4 class="company__title">公司統編</h4>
+                        <div class="company__text">
+                          經濟部／財政部登記有案：54656779
+                        </div>
+                      </div>
+                      <div class="company__block">
+                        <h4 class="company__title">相關經歷</h4>
+                        <div class="company__text">
+                          <p>蔡岳儒
+                            <br>◆現任／恆岳空間設計 主持設計師
+                            <br>◆學歷／東京デザイナー学院卒業
+                            <br>◆經歷／十餘年設計、工程經歷。
+                            <br><br>1999年日本國色彩士 
+                            <br>2000年東京デザイナ-学院卒業 
+                            <br>2009年一級室內裝飾設計師 
+                            <br>2012年環保署整潔綠美化管理人員 
+                            <br>2013年內政部建築物室內裝修登記立案
+                            <br>2014年無障礙設施設備勘檢人員培訓</p>
+                        </div>
+                      </div>
+                      <div class="company__block">
+                        <h4 class="company__title">專業證照</h4>
+                        <div class="company__text">
+                          建築物室內裝修專業技術人員登記證 高恒悌 第40EC116787號
+                          <br>建築物室內裝修專業技術人員登記證 高恒悌 第40EC116787號
+                        </div>
+                      </div>
+                    </article>
+                  </div>
+                  <div class="col-md-4"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- <section class="sec-guessLike">
+      <h3 class="px-3 pb-1">猜你喜歡</h3>
+      <div class="container-fluid" style="padding: 0 15px;margin:0;">
+        <h4 class="sec-guessLike__title">影音</h4>
+        <div class="row">
+          <div class="col mb-3">
+            <div class="sec-guessLike__img mb-2">
+            </div>
+            <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
+          </div>
+          <div class="col mb-3">
+            <div class="sec-guessLike__img mb-2">
+            </div>
+            <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
+          </div>
+        </div>
+        <h4 class="sec-guessLike__title">個案</h4>
+        <div class="row">
+          <div class="col mb-3">
+            <div class="sec-guessLike__img mb-2">
+            </div>
+            <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
+          </div>
+          <div class="col mb-3">
+            <div class="sec-guessLike__img mb-2">
+            </div>
+            <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
+          </div>
+        </div>
+        <h4 class="sec-guessLike__title">專欄</h4>
+        <div class="row">
+          <div class="col mb-3">
+            <div class="sec-guessLike__img mb-2">
+            </div>
+            <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
+          </div>
+          <div class="col mb-3">
+            <div class="sec-guessLike__img mb-2">
+            </div>
+            <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
+          </div>
+        </div>
+      </div>
+    </section> -->
+    <div class="fixed-btn">
+      <!-- <div class="btn-gotop mb-2">
+        <img src="images/gotop.png" width="28" alt="">
+      </div> -->
+      <div class="btn-gotop">
+        <img src="images/gotop.webp" width="28" alt="">
+      </div>
+    </div>
+    <div class="freeCall py-3">
+      <button class="btn freeCall__btn" >
+        <i class="fa fa-phone" aria-hidden="true"></i>免付費電話
+      </button>
+    </div>
+    <div style="margin-bottom:120px;"></div>
+    <!-- bottom fixed menu -->
+    <div class="container-fluid px-0 m-0 fixed_menu">
+      <div class="row gx-2 ps-1 pe-2">
+        <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/about/request/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/40a8bf5.svg" alt=""></a></div>
+        <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/about/calculator/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/170ebf4.svg" alt=""></a></div>
+        <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/decoquery/lists/address/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/479aa61.svg" alt=""></a></div>
+        <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/program/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/dc6b655.svg" alt=""></a></div>
+        <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/login/index" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/76749fd.svg" alt=""></a></div>
+      </div>
+    </div>
+    <div class="sec-menu">
+      <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
+        <div class="container-fluid" style="padding:0 8px;margin:0;">
+            <div class="navbar-brand navbar-back me-0">
+              <i class="fas fa-chevron-left"></i>
+            </div>
+            <a href="#" class="navbar-brand"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="141"></a>
+            <div class="navbar-brand navbar-search me-0">
+            </div>
+        </div>
+      </nav>
+      <div class="container-fluid sec-menu-block px-0">
+        
+          <div class="navbar sec-menu-list w-100">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+              <li class="nav-item">
+                <a class="nav-link active text-main d-flex align-items-center" aria-current="page" href="https://shop.hhh.com.tw/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/cart.svg" alt=""></div>
+                  <p>+好物</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link text-main d-flex align-items-center" href="https://m.hhh.com.tw/about/calculator/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/budget.svg" alt=""></div>
+                  <p>估預算</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item dropdown">
+                <span class="nav-link text-main d-flex align-items-center" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/style.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/photos/index/`;"><p>找風格</p></a>
+                  <div class="expand"><i class="fas fa-chevron-down"></i></div>
+                </span>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown" style="position: static;">
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/photos/lists/nordic-style/">北歐風</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/photos/lists/modern-style/">現代風</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/photos/lists/industry-style/">工業風</a></li>
+                </ul>
+              </li>
+              <hr>
+              <li class="nav-item dropdown">
+                <span class="nav-link d-flex align-items-center" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/designs.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/cases/lists/`;"><p>挑設計</p></a>
+                  <div class="expand"><i class="fas fa-chevron-down"></i></div>
+                </span>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown2" style="position: static;transform: none;">
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/cases/lists/small-ctype/">小坪數</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/cases/lists/renovation-condition/" target="_blank">老屋翻新</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/search/lists/case/%E9%A2%A8%E6%B0%B4-keyword/">風水</a></li>
+                </ul>
+              </li>
+              <hr>
+              <li class="nav-item dropdown">
+                <span class="nav-link d-flex align-items-center" id="navbarDropdown3" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/videos.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/videos/lists/`;"><p>看影音</p></a>
+                  <div class="expand"><i class="fas fa-chevron-down"></i></div>
+                </span>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown3" style="position: static;transform: none;">
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/videos/lists/">發燒影音</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/video-list-5945tw.php">呼叫師傅</a></li>
+                </ul>
+              </li>
+              <hr>
+              <li class="nav-item dropdown">
+                <span class="nav-link d-flex align-items-center" id="navbarDropdown4" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/person.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/designers/lists/`;"><p>設計師</p></a>
+                  <div class="expand"><i class="fas fa-chevron-down"></i></div>
+                </span>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown4" style="position: static;transform: none;">
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/designers/lists/">設計師總覽</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://event.hhh.com.tw/2021-Most-Favorite-Designers/index.php" target="_blank">觀眾最愛設計師</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://event.hhh.com.tw/topglory/" target="_blank">Glory國際大賞</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://hhh.com.tw/event170427/" target="_blank">老屋翻新</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/decoquery/lists/address/" target="_blank">查証照</a></li>
+                </ul>
+              </li>
+              <hr>
+              <li class="nav-item dropdown">
+                <span class="nav-link d-flex align-items-center" id="navbarDropdown5" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/pen.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/columns/lists/all-columntypea/`;"><p>專欄文章</p></a>
+                  <div class="expand"><i class="fas fa-chevron-down"></i></div>
+                </span>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown5" style="position: static;transform: none;">
+                  <hr>
+                  <li class="nav-item dropdown">
+                    <span class="dropdown-item nav-link sub-link" id="subDropdown1">
+                      <a href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/"><p>編輯精選</p></a>
+                      <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
+                    </span>
+                    <ul class="sub-menu ps-0" style="position: static;transform: none;">
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/hometrends-columntypeb/">居家趨勢</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/hotrank-columntypeb/">人氣排行</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/archdesign-columntypeb/">建築設計</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/styleselection-columntypeb/">風格選店</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/charitable-columntypeb/">公益活動</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/exhibition-columntypeb/">展演資訊</a></li>
+                    </ul>
+                  </li>
+                  <hr>
+                  <li class="nav-item">
+                    <span class="dropdown-item nav-link sub-link">
+                      <a href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/"><p>居家設計</p></a>
+                      <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
+                    </span>
+                    <ul class="sub-menu ps-0" style="position: static;transform: none;">
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/smallhouse-columntypeb/">小宅規劃</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/oldhouse-columntypeb/">老屋翻新</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/stylebuild-columntypeb/">風格營造</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/color-columntypeb/">配色佈置</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/goodhouse-columntypeb/">好宅特輯</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/proposal-columntypeb/">設計提案</a></li>
+                    </ul>
+                  </li>
+                  <hr>
+                  <li class="nav-item">
+                    <span class="dropdown-item nav-link sub-link">
+                      <a href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/"><p>裝修前線</p></a>
+                      <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
+                    </span>
+                    <ul class="sub-menu ps-0" style="position: static;transform: none;">
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/news-columntypeb/">新聞最前線</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/allocation-columntypeb/">預算分配</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/process-columntypeb/">施工流程</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/knowledge-columntypeb/">建材知識</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/decorating-columntypeb/">裝潢撇步</a></li>
+                    </ul>
+                  </li>
+                  <hr>
+                  <li class="nav-item">
+                    <span class="dropdown-item nav-link sub-link">
+                      <a href="https://m.hhh.com.tw/columns/lists/plus-columntypea/"><p>生活PLUS</p></a>
+                      <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
+                    </span>
+                    <ul class="sub-menu ps-0" style="position: static;transform: none;">
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/fengshui-columntypeb/">居家風水</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/housekeeping-columntypeb/">家事清潔</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/storageskills-columntypeb/">收納技巧</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/renovation-columntypeb/">改造修繕</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/retire-columntypeb/">退休好幸福</a></li>
+                    </ul>
+                  </li>
+                  <hr>
+                  <li class="nav-item">
+                    <span class="dropdown-item nav-link sub-link">
+                      <a href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/"><p>品牌好物</p></a>
+                      <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
+                    </span>
+                    <ul class="sub-menu ps-0" style="position: static;transform: none;">
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/furnishings-columntypeb/">家具家飾</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/appliances-columntypeb/">美型家電</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/recommend-columntypeb/">推薦廚衛</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/homegoods-columntypeb/">居家好物</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/quality-columntypeb/">優質建材</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/brandnews-columntypeb/">品牌快訊</a></li>
+                    </ul>
+                  </li>
+                  <hr>
+                  <li class="nav-item">
+                    <span class="dropdown-item nav-link sub-link">
+                      <a href="https://m.hhh.com.tw/columns/lists/focus-columntypea/"><p>房市焦點</p></a>
+                      <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
+                    </span>
+                    <ul class="sub-menu ps-0" style="position: static;transform: none;">
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/housingnews-columntypeb/">房市新聞</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/specsearch-columntypeb/">建案特搜</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/buyandsell-columntypeb/">買屋賣屋</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/mortgage-columntypeb/">房貸税務</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/renting-columntypeb/">租房須知</a></li>
+                    </ul>
+                  </li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/topic/lists/1-page/new-sort/">主題企劃</a></li>
+                </ul>
+              </li>
+              <hr>
+              <li class="nav-item dropdown">
+                <span class="nav-link d-flex align-items-center" id="navbarDropdown6" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/sofa.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/products/lists/`;"><p>居家商品</p></a>
+                  <div class="expand"><i class="fas fa-chevron-down"></i></div>
+                </span>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown6" style="position: static;transform: none;">
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/">商品總覽</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/furniture-pcategorya/">傢俱</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/household-pcategorya/">家電</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/kitchen-pcategorya/">廚房</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/bathroom-pcategorya/">衛浴</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/lighting-pcategorya/">照明</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/brands/lists/">品牌總覽</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/brand-index.php?brand_id=194">軟裝佈置</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://event.hhh.com.tw/2021-Top-Brands/index.php">消費者愛用品牌</a></li>
+                </ul>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center" href="https://m.hhh.com.tw/builder/lists/">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/building.svg" alt=""></div>
+                  <p>新建案</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center" href="https://m.hhh.com.tw/forum/category/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/discuss.svg" alt=""></div>
+                  <p>討論區</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center" href="https://event.hhh.com.tw/agent/lecture.html" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/freelecture.svg" alt=""></div>
+                  <p>免費報名幸福講堂</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item d-flex align-items-center">
+                <a class="nav-link d-flex align-items-center" href="https://event.hhh.com.tw/agent/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/agent.svg" alt=""></div>
+                  <p>幸福經紀人</p>
+                  <span class="ms-2"><a class="text-phone" href="tel:0800-366-086">0800-366-086</a></span></a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center" href="http://gstv.com.tw/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/tv.svg" alt=""></div>
+                  <p>幸福空間居家台</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center" href="https://event.hhh.com.tw/contest/2018/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/prize.svg" alt=""></div>
+                  <p>ADA 亞洲設計獎</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center" href="https://event.hhh.com.tw/2019global-award/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/champion.svg" alt=""></div>
+                  <p>國際設計大獎代辦</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center mb-1" href="https://www.leju.com.tw/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/Image 1@2x.png" alt="" width="20"></div>
+                  <p>樂居網</p>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="sec-menu-follows w-100">
+            <h5 class="sec-menu-follows-title w-100">追蹤我們</h5>
+            <div class="d-flex justify-content-between">
+              <a href="https://www.facebook.com/hhhfb"><img src="images/menu/fb.svg" alt="" class="d-inline-block"></a>
+              <a href="https://line.me/ti/p/%40ovs4341s"><img src="images/menu/line.svg" alt="" class="d-inline-block"></a>
+              <a href="https://www.youtube.com/user/gorgeousspace"><img src="images/menu/youtube.svg" alt="" class="d-inline-block"></a>
+              <a href="https://www.instagram.com/gorgeous_space/"><img src="images/menu/instagram@2x.png" alt="" width="43" class="d-inline-block"></a>
+              <a href=""><img src="images/menu/pinterest.svg" alt="" class="d-inline-block"></a>
+            </div>
+            <div class="py-4">
+              <a href="https://www.facebook.com/agent.hhh.com.tw" class="follows-fp"><img src="images/menu/fb.svg" alt="" width="20" class="d-inline-block me-2">幸福經紀人粉絲專頁</a>
+              <a href="https://www.facebook.com/retire.tw/" class="follows-fp"><img src="images/menu/fb.svg" alt="" width="20" class="d-inline-block me-2">退休好幸福粉絲專頁</a>
+            </div>
+            <div class="sec-menu-links">
+              <div class="d-flex mb-2">
+                <a href="https://m.hhh.com.tw/about/">關於我們</a>
+                <a href="https://m.hhh.com.tw/about/contact/">聯絡我們</a>
+                <a href="https://m.hhh.com.tw/about/privacy_policy/">隱私保護</a>
+                <a href="https://m.hhh.com.tw/about/timeline/">公司歷程</a>
+              </div>
+              <div class="d-flex">
+                <a href="https://www.104.com.tw/company/d6hr8sg">企業徵才</a>
+                <a href="https://m.hhh.com.tw/about/sitemap/">網站地圖</a>
+              </div>
+            </div>
+            <div class="copyright text-center">幸福空間　版權所有<br>© Gorgeous Space Co.Ltd. All Rights Reserved</div>
+          </div>
+      
+      </div>
+    </div>
+
+    <div class="sec-search">
+      <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
+        <div class="container-fluid" style="padding:0 8px;margin:0;">
+            <div class="navbar-brand navbar-backs me-0">
+              <i class="fas fa-chevron-left"></i>
+            </div>
+            <a href="#" class="navbar-brand"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="141"></a>
+            <div class="navbar-brand navbar-search me-0">
+            </div>
+        </div>
+      </nav>
+      <div class="container-fluid sec-search-block px-0">
+        <div class="sec-search-list w-100">
+          <div class="sec-search-form">
+            <input type="text" name="searchQuery" class="searchBar">
+            <button type="button" class="searchBtn">
+              <img width="30" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMC4wMDMiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMC4wMDMgMjAiPgogIDxnIGlkPSJzZWFyY2giIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjA1KSI+CiAgICA8cGF0aCBpZD0iUGF0aF8yMjcyIiBkYXRhLW5hbWU9IlBhdGggMjI3MiIgZD0iTTE5Ljg4LDE4Ljk4bC00Ljg2Mi00Ljg2YTguNTM5LDguNTM5LDAsMSwwLS44NDMuODQzbDQuODYyLDQuODZhLjYuNiwwLDAsMCwuNDIxLjE3Ny41ODQuNTg0LDAsMCwwLC40MjEtLjE3N0EuNi42LDAsMCwwLDE5Ljg4LDE4Ljk4Wk0xLjI0Myw4LjUyOGE3LjMzMyw3LjMzMywwLDEsMSw3LjMzMyw3LjMzNUE3LjM0LDcuMzQsMCwwLDEsMS4yNDMsOC41MjhaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwKSIgZmlsbD0iI2VlNzgwMCIvPgogIDwvZz4KPC9zdmc+Cg==" alt="">
+            </button>
+          </div>
+          <hr>
+          <div class="sec-search-hots">
+            <h4 class="sec-search-hots__title">熱搜關鍵字</h4>
+            <hr>
+            <div class="d-flex flex-wrap">
+              <a class="sec-search-hots__link">小坪數</a>
+              <a class="sec-search-hots__link">收納</a>
+              <a class="sec-search-hots__link">軟裝佈置</a>
+              <a class="sec-search-hots__link">幸福經紀人</a>
+              <a class="sec-search-hots__link">承炫設計</a>
+              <a class="sec-search-hots__link">風水</a>
+              <a class="sec-search-hots__link">北歐風</a>
+              <a class="sec-search-hots__link">周石設計</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="sec-login">
+      <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
+        <div class="container-fluid" style="padding:0 8px;margin:0;">
+            <div class="navbar-brand navbar-backs me-0">
+              <i class="fas fa-chevron-left"></i>
+            </div>
+            <a href="#" class="navbar-brand"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="141"></a>
+            <div class="navbar-brand navbar-search me-0">
+            </div>
+        </div>
+      </nav>
+      <div class="container-fluid sec-login-block px-0">
+        <div class="sec-login-list w-100">
+          <h4 class="sec- text-center">會員登入</h4>
+          <hr>
+          <div class="sec-login-btns">
+            
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="sec-favor d-none">
+      <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
+        <div class="container-fluid" style="padding:0 8px;margin:0;">
+            <div class="navbar-brand navbar-back-fav me-0">
+              <i class="fas fa-chevron-left"></i>
+            </div>
+            <a href="#" class="navbar-brand"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="141"></a>
+            <div class="navbar-brand navbar-search me-0">
+            </div>
+        </div>
+      </nav>
+      <div class="container-fluid sec-favor-block px-0">
+        <div class="sec-favor-list w-100">
+          <h4 class="sec-favor-title text-center">我的喜好</h4>
+          <hr>
+          <div class="sec-favor-form">
+            <form action="" method="" id="msform">
+              <div class="d-flex justify-content-between align-items">
+                <div class="form-user">Hi 陳喬治</div>
+                <ul class="p-0 form-progressbar">
+                  <li class="active">1</li>
+                  <li>2</li>
+                  <li>3</li>
+                </ul>
+              </div>
+              <fieldset class="form-step form-step1 text-center">
+                <div style="position: relative;">
+                <h4 class="mb-3">請選擇設計風格 / 多選</h4>
+                <div class="row mb-2">
+                  <input type="checkbox" value="北歐風" name="q1" id="1a" checked/>
+                  <label class="col-4 mr fs-label-info text-center" for="1a">
+                    <div class="imgfr mb-1"></div>
+                    <p>北歐風</p>
+                  </label>
+                  <input type="checkbox" value="現代風" name="q1" id="1b" />
+                  <label class="col-4 mr fs-label-info text-center" for="1b">
+                    <div class="imgfr mb-1"></div>
+                    <p>現代風</p>
+                  </label>
+                  <input type="checkbox" value="工業風" name="q1" id="1c" />
+                  <label class="col-4 mr fs-label-info text-center" for="1c">
+                    <div class="imgfr mb-1"></div>
+                    <p>工業風</p>
+                  </label>
+                </div>
+                <div class="row mb-2">
+                  <input type="checkbox" value="美式風" name="q1" id="1d" />
+                  <label class="col-4 mr fs-label-info text-center" for="1d">
+                    <div class="imgfr mb-1"></div>
+                    <p>美式風</p>
+                  </label>
+                  <input type="checkbox" value="鄉村風" name="q1" id="1e" />
+                  <label class="col-4 mr fs-label-info text-center" for="1e">
+                    <div class="imgfr mb-1"></div>
+                    <p>鄉村風</p>
+                  </label>
+                  <input type="checkbox" value="古典風" name="q1" id="1f" />
+                  <label class="col-4 mr fs-label-info text-center" for="1f">
+                    <div class="imgfr mb-1"></div>
+                    <p>古典風</p>
+                  </label>
+                </div>
+                <div class="row mb-2">
+                  <input type="checkbox" value="新古典風" name="q1" id="1g" />
+                  <label class="col-4 mr fs-label-info text-center" for="1g">
+                    <div class="imgfr mb-1"></div>
+                    <p>新古典風</p>
+                  </label>
+                  <input type="checkbox" value="休閒多元" name="q1" id="1h" />
+                  <label class="col-4 mr fs-label-info text-center" for="1h">
+                    <div class="imgfr mb-1"></div>
+                    <p>休閒多元</p>
+                  </label>
+                  <input type="checkbox" value="其他" name="q1" id="1i" />
+                  <label class="col-4 mr fs-label-info text-center" for="1i">
+                    <div class="imgfr mb-1"></div>
+                    <p>其他</p>
+                  </label>
+                </div>
+                <input class="next" type="button" value="下一步">
+              </div>
+              </fieldset>
+              <fieldset class="form-step form-step2 text-center">
+                <div style="">
+                <h4 class="mb-3">請選擇喜歡的居家空間 / 多選</h4>
+                <div class="row mb-2">
+                  <input type="checkbox" value="北歐風" name="q2" id="2a" checked/>
+                  <label class="col-4 mr fs-label-info text-center" for="2a">
+                    <div class="imgfr mb-1"></div>
+                    <p>客廳</p>
+                  </label>
+                  <input type="checkbox" value="現代風" name="q2" id="2b" />
+                  <label class="col-4 mr fs-label-info text-center" for="2b">
+                    <div class="imgfr mb-1"></div>
+                    <p>餐廳</p>
+                  </label>
+                  <input type="checkbox" value="工業風" name="q2" id="2c" />
+                  <label class="col-4 mr fs-label-info text-center" for="2c">
+                    <div class="imgfr mb-1"></div>
+                    <p>臥室</p>
+                  </label>
+                </div>
+                <div class="row mb-2">
+                  <input type="checkbox" value="美式風" name="q2" id="2d" />
+                  <label class="col-4 mr fs-label-info text-center" for="2d">
+                    <div class="imgfr mb-1"></div>
+                    <p>廚房</p>
+                  </label>
+                  <input type="checkbox" value="鄉村風" name="q2" id="2e" />
+                  <label class="col-4 mr fs-label-info text-center" for="2e">
+                    <div class="imgfr mb-1"></div>
+                    <p>浴室</p>
+                  </label>
+                  <input type="checkbox" value="古典風" name="q2" id="2f" />
+                  <label class="col-4 mr fs-label-info text-center" for="2f">
+                    <div class="imgfr mb-1"></div>
+                    <p>玄關</p>
+                  </label>
+                </div>
+                <div class="row mb-2">
+                  <input type="checkbox" value="新古典風" name="q2" id="2g" />
+                  <label class="col-4 mr fs-label-info text-center" for="2g">
+                    <div class="imgfr mb-1"></div>
+                    <p>兒童房</p>
+                  </label>
+                  <input type="checkbox" value="休閒多元" name="q2" id="2h" />
+                  <label class="col-4 mr fs-label-info text-center" for="2h">
+                    <div class="imgfr mb-1"></div>
+                    <p>陽台</p>
+                  </label>
+                  <input type="checkbox" value="其他" name="q1" id="2i" />
+                  <label class="col-4 mr fs-label-info text-center" for="2i">
+                    <div class="imgfr mb-1"></div>
+                    <p>其他</p>
+                  </label>
+                </div>
+                <input class="next" type="button" value="下一步">
+                </div>
+              </fieldset>
+              <fieldset class="form-step form-step3 text-center">
+                <h4 class="mb-3 text-center">請選擇以下條件</h4>
+                <div class="step3-block text-start">
+                  <span class="step3-block-title">房屋坪數 / 單選</span>
+                  <input type="radio" value="20坪以下" name="q3" id="3a" />
+                  <label class="mr fs-label-chbox radio" for="3a">20坪以下</label>
+                  <input type="radio" value="20~30坪" name="q3" id="3b" />
+                  <label class="mr fs-label-chbox radio" for="3b">20~30坪</label>
+                  <input type="radio" value="30~40坪" name="q3" id="3c" />
+                  <label class="mr fs-label-chbox radio" for="3c">31~50坪</label>
+                  <input type="radio" value="50坪以上" name="q3" id="3e" />
+                  <label class="mr fs-label-chbox radio" for="3e">50坪以上</label>
+                </div>
+                <div class="step3-block text-start">
+                  <span class="step3-block-title text-left">房屋預算 / 單選</span>
+                  <input type="radio" value="20坪以下" name="q4" id="4a" />
+                  <label class="mr fs-label-chbox radio" for="4a">100萬以下</label>
+                  <input type="radio" value="20~30坪" name="q4" id="4b" />
+                  <label class="mr fs-label-chbox radio" for="4b">101~200萬</label>
+                  <input type="radio" value="30~40坪" name="q4" id="4c" />
+                  <label class="mr fs-label-chbox radio" for="4c">201~300萬</label>
+                  <input type="radio" value="50坪以上" name="q4" id="4e" />
+                  <label class="mr fs-label-chbox radio" for="4e">301萬以上</label>
+                </div>
+                <div class="step3-block text-start">
+                  <span class="step3-block-title text-left">裝修屋況 / 單選</span>
+
+                  <input type="radio" value="20坪以下" name="q5" id="5a" />
+                  <label class="mr fs-label-chbox radio" for="5a">新成屋</label>
+                  <input type="radio" value="20~30坪" name="q5" id="5b" />
+                  <label class="mr fs-label-chbox radio" for="5b">中古屋</label>
+                  <input type="radio" value="30~40坪" name="q5" id="5c" />
+                  <label class="mr fs-label-chbox radio" for="5c">毛胚屋</label>
+                  <input type="radio" value="50坪以上" name="q5" id="5e" />
+                  <label class="mr fs-label-chbox radio" for="5e">老屋翻新</label>
+                  <input type="radio" value="50坪以上" name="q5" id="5e" />
+                  <label class="mr fs-label-chbox radio" for="5e">自地自建</label>
+                </div>
+                <div class="btngrp text-center">
+                  <input class="skip d-block mb-2" type="button" value="略過">
+                  <input class="next d-block" type="button" value="下一步">
+                </div>
+              </fieldset>
+            </form>
+          </div>
+          <div class="sec-favor-checklist d-none">
+            <form action="" method="">
+              <div class="form-user">Hi 陳喬治</div>
+              <fieldset class="form-step text-center">
+                <h4 class="mb-3 text-center">請選擇以下條件</h4>
+                <div class="step3-block text-start">
+                  <span class="step3-block-title">設計風格 / 多選</span>
+
+                  <input type="checkbox" value="20坪以下" name="style" id="north" />
+                  <label class="mr fs-label-chbox radio" for="north">北歐風</label>
+                  <input type="checkbox" value="20~30坪" name="style" id="modern" />
+                  <label class="mr fs-label-chbox radio" for="modern">現代風</label>
+                  <input type="checkbox" value="30~40坪" name="style" id="indust" />
+                  <label class="mr fs-label-chbox radio" for="indust">工業風</label>
+                  <input type="checkbox" value="50坪以上" name="style" id="usa" />
+                  <label class="mr fs-label-chbox radio" for="usa">美式風</label>
+                  <input type="checkbox" value="50坪以上" name="style" id="casual" />
+                  <label class="mr fs-label-chbox radio" for="casual">休閒多元</label>
+                  <input type="checkbox" value="50坪以上" name="style" id="country" />
+                  <label class="mr fs-label-chbox radio" for="country">鄉村風</label>
+                  <input type="checkbox" value="50坪以上" name="style" id="old" />
+                  <label class="mr fs-label-chbox radio" for="old">古典風</label>
+                  <input type="checkbox" value="50坪以上" name="style" id="other" />
+                  <label class="mr fs-label-chbox radio" for="other">其他</label>
+                </div>
+                <div class="step3-block text-start mb-3">
+                  <span class="step3-block-title">喜歡的居家空間 / 多選</span>
+
+                  <input type="checkbox" value="20坪以下" name="space" id="salon" />
+                  <label class="mr fs-label-chbox radio" for="salon">客廳</label>
+                  <input type="checkbox" value="20~30坪" name="space" id="restaurant" />
+                  <label class="mr fs-label-chbox radio" for="restaurant">餐廳</label>
+                  <input type="checkbox" value="30~40坪" name="space" id="bedroom" />
+                  <label class="mr fs-label-chbox radio" for="bedroom">臥室</label>
+                  <input type="checkbox" value="50坪以上" name="space" id="kitchen" />
+                  <label class="mr fs-label-chbox radio" for="kitchen">廚房</label>
+                  <input type="checkbox" value="50坪以上" name="space" id="bathroom" />
+                  <label class="mr fs-label-chbox radio" for="bathroom">浴室</label>
+                  <input type="checkbox" value="50坪以上" name="space" id="porch" />
+                  <label class="mr fs-label-chbox radio" for="porch">玄關</label>
+                  <input type="checkbox" value="50坪以上" name="space" id="childroom" />
+                  <label class="mr fs-label-chbox radio" for="childroom">兒童房</label>
+                  <input type="checkbox" value="50坪以上" name="space" id="balcony" />
+                  <label class="mr fs-label-chbox radio" for="balcony">陽台</label>
+                  <input type="checkbox" value="50坪以上" name="space" id="others" />
+                  <label class="mr fs-label-chbox radio" for="others">其他</label>
+                </div>
+                <div class="step3-block text-start">
+                  <span class="step3-block-title">房屋坪數 / 單選</span>
+
+                  <input type="radio" value="20坪以下" name="feet" id="below20" />
+                  <label class="mr fs-label-chbox radio" for="below20">20坪以下</label>
+                  <input type="radio" value="20~30坪" name="feet" id="20to30" />
+                  <label class="mr fs-label-chbox radio" for="20to30">20~30坪</label>
+                  <input type="radio" value="30~40坪" name="feet" id="30to50" />
+                  <label class="mr fs-label-chbox radio" for="30to50">31~50坪</label>
+                  <input type="radio" value="50坪以上" name="feet" id="above50" />
+                  <label class="mr fs-label-chbox radio" for="above50">50坪以上</label>
+                </div>
+                <div class="step3-block text-start">
+                  <span class="step3-block-title text-left">房屋預算 / 多選</span>
+                  <input type="checkbox" value="20坪以下" name="budget" id="below1m" />
+                  <label class="mr fs-label-chbox radio" for="below1m">100萬以下</label>
+                  <input type="checkbox" value="20~30坪" name="budget" id="100to200" />
+                  <label class="mr fs-label-chbox radio" for="100to200">101~200萬</label>
+                  <input type="checkbox" value="30~40坪" name="budget" id="200to300" />
+                  <label class="mr fs-label-chbox radio" for="200to300">201~300萬</label>
+                  <input type="checkbox" value="50坪以上" name="budget" id="300up" />
+                  <label class="mr fs-label-chbox radio" for="300up">301萬以上</label>
+                </div>
+                <div class="step3-block text-start">
+                  <span class="step3-block-title text-left">裝修屋況 / 單選</span>
+
+                  <input type="radio" value="20坪以下" name="condition" id="new" />
+                  <label class="mr fs-label-chbox radio" for="new">新成屋</label>
+                  <input type="radio" value="20~30坪" name="condition" id="aged" />
+                  <label class="mr fs-label-chbox radio" for="aged">中古屋</label>
+                  <input type="radio" value="30~40坪" name="condition" id="unfinished" />
+                  <label class="mr fs-label-chbox radio" for="unfinished">毛胚屋</label>
+                  <input type="radio" value="50坪以上" name="condition" id="refurbish" />
+                  <label class="mr fs-label-chbox radio" for="refurbish">老屋翻新</label>
+                  <input type="radio" value="50坪以上" name="condition" id="selfown" />
+                  <label class="mr fs-label-chbox radio" for="selfown">自地自建</label>
+                </div>
+                <div class="btngrp text-center">
+                  <input class="next d-block mb-3" type="button" value="下一步">
+                </div>
+              </fieldset>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div> -->
+  </div>
+    <!-- bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
+        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
+        crossorigin="anonymous"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+    <script src="js/lazy-load.js" async></script>
+    <script async defer src="js/index-list.js"></script>
+</body>
+</html>

index_match.html

@@ -0,0 +1,738 @@
+<!DOCTYPE html>
+<html lang="zh_TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1">
+    <meta http-equiv="Cache-Control" content="no-cache">
+    <meta name="copyright" content="2021 © 幸福空間 │ All Rights Reserved.">
+    <meta name="creation-date" content="2021-08-05 12:00:04 GTM+8">
+    <meta name="description" content="讓幸福室內設計，走進您的生活，解決您的裝潢問
+    題!幸福空間是台灣最大的室內設計、設計師與設計個案影音平台之一，找尋室內設計點子與案例我
+    們一定能幫助你!">
+    <meta name="distribution" content="Taiwan">
+    <meta name="keywords" content="">
+    <meta name="revisit-after" content="1 days">
+    <meta name="robots" content="all">
+    <meta name="format-detection" content="telephone=no">
+
+    <meta property="og:description" content="讓幸福室內設計，走進您的生活，解決您的裝潢問題!
+    幸福空間是台灣最大的室內設計、設計師與設計個案影音平台之一，找尋室內設計點子與案例我們一定能幫助
+    你!"/>
+    <meta property="og:site_name" content="幸福空間"/>
+    <meta property="og:title" content="幸福空間 - 台灣最大的室內設計、設計師與設計個案影音平台"/>
+    <meta property="og:type" content="website"/>
+    <meta property="og:locale" content="zh_TW">
+    <title>幸福空間 - 室內設計、裝潢、居家生活、影音平台</title>
+
+    <link rel="icon" href="images/favicon.ico">
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
+    crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
+        rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
+        crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
+    <link rel="stylesheet" href="css/jquery-ui.css">
+    <link rel="stylesheet" type="text/css" href="css/slick.css" />
+    <link rel="stylesheet" type="text/css" href="css/slick-theme.css" />
+
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <link rel="stylesheet" href="sass/main.css">
+</head>
+<body>
+  <div style="overflow-x:hidden;" class="wholeBody">
+    <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main">
+        <div class="container-fluid" style="padding:0 8px;margin:0;">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <a href="https://m.hhh.com.tw/" class="navbar-brand"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="141"></a>
+            <div class="navbar-brand navbar-search me-0 d-flex align-items-center">
+                <img width="25" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMC4wMDMiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMC4wMDMgMjAiPgogIDxnIGlkPSJzZWFyY2giIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjA1KSI+CiAgICA8cGF0aCBpZD0iUGF0aF8yMjcyIiBkYXRhLW5hbWU9IlBhdGggMjI3MiIgZD0iTTE5Ljg4LDE4Ljk4bC00Ljg2Mi00Ljg2YTguNTM5LDguNTM5LDAsMSwwLS44NDMuODQzbDQuODYyLDQuODZhLjYuNiwwLDAsMCwuNDIxLjE3Ny41ODQuNTg0LDAsMCwwLC40MjEtLjE3N0EuNi42LDAsMCwwLDE5Ljg4LDE4Ljk4Wk0xLjI0Myw4LjUyOGE3LjMzMyw3LjMzMywwLDEsMSw3LjMzMyw3LjMzNUE3LjM0LDcuMzQsMCwwLDEsMS4yNDMsOC41MjhaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwKSIgZmlsbD0iI2VlNzgwMCIvPgogIDwvZz4KPC9zdmc+Cg==" alt="">
+            </div>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            </div>
+        </div>
+    </nav>
+    <section class="sec-result">
+      <!-- <a class="close"><img src="https://hhh.com.tw/assets/images/section/icon/photos/icon-close.svg" alt=""></a> -->
+      <h3 class="text-center mt-3 mb-2" style="font-size: 1rem;font-weight: 400;color: #707070;line-height: 1.4rem;">依據你的需求，我們推薦以下案例和幾位設計師為您服務，
+        請選擇您有興趣的設計師，設計師將會主動與留言聯繫您。</h3>
+      <div class=" mb-3 text-center">
+        <p class="mb-1">想找免費顧問來幫你嗎？請撥打<span style="color: #EA068C;">0800-366-086</span>！</p>
+        <a class="btn-call d-inline-block" href="tel:0800-366-086">立即撥打</a>
+      </div>
+      <div class="container container__match">
+        <div class="row align-items-center py-4 pb-5 justify-content-center text-center container__row" style="border-bottom: 1px solid #B2B2B2;">
+          <div class="col-12 mb-4">
+            <div class="sec-result__imgfr mx-auto"></div>
+            <!-- <img src="https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_244_01.jpg" alt=""> -->
+          </div>
+          <div class="row">
+            <div class="col-6">
+              <div class="sec-result__designer mx-auto mb-4">
+              </div>
+              <button class="btn-match">我有興趣</button>
+            </div>
+            <div class="col-6">
+              <div class="text-start mx-auto">
+                <p>周明志 設計師</p>
+                <p class="mb-2">春風時尚空間設計</p>
+                <p>擅長風格 現代風 </p>
+                <p>接案坪數 20～30坪</p>
+                <p class="mb-2">接案地區 台北 新北 </p>
+                <span class="sec-result__consulting"><strong class="sec-result__num">15</strong> 人正在諮詢</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row align-items-center py-3 justify-content-center text-center container__row" style="border-bottom: 1px solid #B2B2B2;">
+          <div class="col">
+            <div class="sec-result__imgfr mx-auto"></div>
+            <!-- <img src="https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_244_01.jpg" alt=""> -->
+          </div>
+          <div class="col-12">
+            <div class="sec-result__designer mx-auto">
+            </div>
+          </div>
+          <div class="col-12">
+            <div style="width: 190px;" class="text-start mx-auto">
+              <p>周明志 設計師</p>
+              <p class="mb-2">春風時尚空間設計</p>
+              <p>擅長風格 現代風 </p>
+              <p>接案坪數 20～30坪</p>
+              <p>接案地區 台北 新北 </p>
+            </div>
+          </div>
+          <div class="col-12">
+            <p>15 人正在諮詢</p>
+          </div>
+          <div class="col-12">
+            <button class="btn-match">我有興趣</button>
+          </div>
+        </div>
+        <div class="row align-items-center py-3 justify-content-center text-center container__row">
+          <div class="col-12">
+            <div class="sec-result__imgfr mx-auto"></div>
+            <!-- <img src="https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_244_01.jpg" alt=""> -->
+          </div>
+          <div class="col-12">
+            <div class="sec-result__designer mx-auto">
+            </div>
+          </div>
+          <div class="col-12">
+            <div style="width: 190px;" class="text-start mx-auto">
+              <p>周明志 設計師</p>
+              <p class="mb-2">春風時尚空間設計</p>
+              <p>擅長風格 現代風 </p>
+              <p>接案坪數 20～30坪</p>
+              <p>接案地區 台北 新北 </p>
+            </div>
+          </div>
+          <div class="col-12">
+            <p>15 人正在諮詢</p>
+          </div>
+          <div class="col-12">
+            <button class="btn-match">我有興趣</button>
+          </div>
+        </div>
+      </div>
+    </section>
+    <div class="fixed-btn">
+      <!-- <div class="btn-gotop mb-2">
+        <img src="images/gotop.png" width="28" alt="">
+      </div> -->
+      <div class="btn-gotop">
+        <img src="images/gotop.webp" width="28" alt="">
+      </div>
+    </div>
+    <div style="margin-bottom:120px;"></div>
+    <!-- bottom fixed menu -->
+    <div class="container-fluid px-0 m-0 fixed_menu">
+      <div class="row gx-2 ps-1 pe-2">
+        <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/about/request/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/40a8bf5.svg" alt=""></a></div>
+        <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/about/calculator/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/170ebf4.svg" alt=""></a></div>
+        <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/decoquery/lists/address/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/479aa61.svg" alt=""></a></div>
+        <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/program/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/dc6b655.svg" alt=""></a></div>
+        <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/login/index" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/76749fd.svg" alt=""></a></div>
+      </div>
+    </div>
+    <div class="sec-menu">
+      <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
+        <div class="container-fluid" style="padding:0 8px;margin:0;">
+            <div class="navbar-brand navbar-back me-0">
+              <i class="fas fa-chevron-left"></i>
+            </div>
+            <a href="#" class="navbar-brand"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="141"></a>
+            <div class="navbar-brand navbar-search me-0">
+            </div>
+        </div>
+      </nav>
+      <div class="container-fluid sec-menu-block px-0">
+        
+          <div class="navbar sec-menu-list w-100">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+              <li class="nav-item">
+                <a class="nav-link active text-main d-flex align-items-center" aria-current="page" href="https://shop.hhh.com.tw/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/cart.svg" alt=""></div>
+                  <p>+好物</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link text-main d-flex align-items-center" href="https://m.hhh.com.tw/about/calculator/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/budget.svg" alt=""></div>
+                  <p>估預算</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item dropdown">
+                <span class="nav-link text-main d-flex align-items-center" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/style.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/photos/index/`;"><p>找風格</p></a>
+                  <div class="expand"><i class="fas fa-chevron-down"></i></div>
+                </span>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown" style="position: static;">
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/photos/lists/nordic-style/">北歐風</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/photos/lists/modern-style/">現代風</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/photos/lists/industry-style/">工業風</a></li>
+                </ul>
+              </li>
+              <hr>
+              <li class="nav-item dropdown">
+                <span class="nav-link d-flex align-items-center" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/designs.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/cases/lists/`;"><p>挑設計</p></a>
+                  <div class="expand"><i class="fas fa-chevron-down"></i></div>
+                </span>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown2" style="position: static;transform: none;">
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/cases/lists/small-ctype/">小坪數</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/cases/lists/renovation-condition/" target="_blank">老屋翻新</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/search/lists/case/%E9%A2%A8%E6%B0%B4-keyword/">風水</a></li>
+                </ul>
+              </li>
+              <hr>
+              <li class="nav-item dropdown">
+                <span class="nav-link d-flex align-items-center" id="navbarDropdown3" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/videos.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/videos/lists/`;"><p>看影音</p></a>
+                  <div class="expand"><i class="fas fa-chevron-down"></i></div>
+                </span>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown3" style="position: static;transform: none;">
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/videos/lists/">發燒影音</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/video-list-5945tw.php">呼叫師傅</a></li>
+                </ul>
+              </li>
+              <hr>
+              <li class="nav-item dropdown">
+                <span class="nav-link d-flex align-items-center" id="navbarDropdown4" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/person.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/designers/lists/`;"><p>設計師</p></a>
+                  <div class="expand"><i class="fas fa-chevron-down"></i></div>
+                </span>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown4" style="position: static;transform: none;">
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/designers/lists/">設計師總覽</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://event.hhh.com.tw/2021-Most-Favorite-Designers/index.php" target="_blank">觀眾最愛設計師</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://event.hhh.com.tw/topglory/" target="_blank">Glory國際大賞</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://hhh.com.tw/event170427/" target="_blank">老屋翻新</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/decoquery/lists/address/" target="_blank">查証照</a></li>
+                </ul>
+              </li>
+              <hr>
+              <li class="nav-item dropdown">
+                <span class="nav-link d-flex align-items-center" id="navbarDropdown5" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/pen.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/columns/lists/all-columntypea/`;"><p>專欄文章</p></a>
+                  <div class="expand"><i class="fas fa-chevron-down"></i></div>
+                </span>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown5" style="position: static;transform: none;">
+                  <hr>
+                  <li class="nav-item dropdown">
+                    <span class="dropdown-item nav-link sub-link" id="subDropdown1">
+                      <a href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/"><p>編輯精選</p></a>
+                      <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
+                    </span>
+                    <ul class="sub-menu ps-0" style="position: static;transform: none;">
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/hometrends-columntypeb/">居家趨勢</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/hotrank-columntypeb/">人氣排行</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/archdesign-columntypeb/">建築設計</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/styleselection-columntypeb/">風格選店</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/charitable-columntypeb/">公益活動</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/exhibition-columntypeb/">展演資訊</a></li>
+                    </ul>
+                  </li>
+                  <hr>
+                  <li class="nav-item">
+                    <span class="dropdown-item nav-link sub-link">
+                      <a href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/"><p>居家設計</p></a>
+                      <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
+                    </span>
+                    <ul class="sub-menu ps-0" style="position: static;transform: none;">
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/smallhouse-columntypeb/">小宅規劃</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/oldhouse-columntypeb/">老屋翻新</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/stylebuild-columntypeb/">風格營造</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/color-columntypeb/">配色佈置</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/goodhouse-columntypeb/">好宅特輯</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/proposal-columntypeb/">設計提案</a></li>
+                    </ul>
+                  </li>
+                  <hr>
+                  <li class="nav-item">
+                    <span class="dropdown-item nav-link sub-link">
+                      <a href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/"><p>裝修前線</p></a>
+                      <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
+                    </span>
+                    <ul class="sub-menu ps-0" style="position: static;transform: none;">
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/news-columntypeb/">新聞最前線</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/allocation-columntypeb/">預算分配</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/process-columntypeb/">施工流程</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/knowledge-columntypeb/">建材知識</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/decorating-columntypeb/">裝潢撇步</a></li>
+                    </ul>
+                  </li>
+                  <hr>
+                  <li class="nav-item">
+                    <span class="dropdown-item nav-link sub-link">
+                      <a href="https://m.hhh.com.tw/columns/lists/plus-columntypea/"><p>生活PLUS</p></a>
+                      <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
+                    </span>
+                    <ul class="sub-menu ps-0" style="position: static;transform: none;">
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/fengshui-columntypeb/">居家風水</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/housekeeping-columntypeb/">家事清潔</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/storageskills-columntypeb/">收納技巧</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/renovation-columntypeb/">改造修繕</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/retire-columntypeb/">退休好幸福</a></li>
+                    </ul>
+                  </li>
+                  <hr>
+                  <li class="nav-item">
+                    <span class="dropdown-item nav-link sub-link">
+                      <a href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/"><p>品牌好物</p></a>
+                      <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
+                    </span>
+                    <ul class="sub-menu ps-0" style="position: static;transform: none;">
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/furnishings-columntypeb/">家具家飾</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/appliances-columntypeb/">美型家電</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/recommend-columntypeb/">推薦廚衛</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/homegoods-columntypeb/">居家好物</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/quality-columntypeb/">優質建材</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/brandnews-columntypeb/">品牌快訊</a></li>
+                    </ul>
+                  </li>
+                  <hr>
+                  <li class="nav-item">
+                    <span class="dropdown-item nav-link sub-link">
+                      <a href="https://m.hhh.com.tw/columns/lists/focus-columntypea/"><p>房市焦點</p></a>
+                      <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
+                    </span>
+                    <ul class="sub-menu ps-0" style="position: static;transform: none;">
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/housingnews-columntypeb/">房市新聞</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/specsearch-columntypeb/">建案特搜</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/buyandsell-columntypeb/">買屋賣屋</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/mortgage-columntypeb/">房貸税務</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/renting-columntypeb/">租房須知</a></li>
+                    </ul>
+                  </li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/topic/lists/1-page/new-sort/">主題企劃</a></li>
+                </ul>
+              </li>
+              <hr>
+              <li class="nav-item dropdown">
+                <span class="nav-link d-flex align-items-center" id="navbarDropdown6" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/sofa.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/products/lists/`;"><p>居家商品</p></a>
+                  <div class="expand"><i class="fas fa-chevron-down"></i></div>
+                </span>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown6" style="position: static;transform: none;">
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/">商品總覽</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/furniture-pcategorya/">傢俱</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/household-pcategorya/">家電</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/kitchen-pcategorya/">廚房</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/bathroom-pcategorya/">衛浴</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/lighting-pcategorya/">照明</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/brands/lists/">品牌總覽</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/brand-index.php?brand_id=194">軟裝佈置</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://event.hhh.com.tw/2021-Top-Brands/index.php">消費者愛用品牌</a></li>
+                </ul>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center" href="https://m.hhh.com.tw/builder/lists/">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/building.svg" alt=""></div>
+                  <p>新建案</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center" href="https://m.hhh.com.tw/forum/category/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/discuss.svg" alt=""></div>
+                  <p>討論區</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center" href="https://event.hhh.com.tw/agent/lecture.html" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/freelecture.svg" alt=""></div>
+                  <p>免費報名幸福講堂</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item d-flex align-items-center">
+                <a class="nav-link d-flex align-items-center" href="https://event.hhh.com.tw/agent/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/agent.svg" alt=""></div>
+                  <p>幸福經紀人</p>
+                  <span class="ms-2"><a class="text-phone" href="tel:0800-366-086">0800-366-086</a></span></a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center" href="http://gstv.com.tw/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/tv.svg" alt=""></div>
+                  <p>幸福空間居家台</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center" href="https://event.hhh.com.tw/contest/2018/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/prize.svg" alt=""></div>
+                  <p>ADA 亞洲設計獎</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center" href="https://event.hhh.com.tw/2019global-award/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/champion.svg" alt=""></div>
+                  <p>國際設計大獎代辦</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center mb-1" href="https://www.leju.com.tw/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/Image 1@2x.png" alt="" width="20"></div>
+                  <p>樂居網</p>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="sec-menu-follows w-100">
+            <h5 class="sec-menu-follows-title w-100">追蹤我們</h5>
+            <div class="d-flex justify-content-between">
+              <a href="https://www.facebook.com/hhhfb"><img src="images/menu/fb.svg" alt="" class="d-inline-block"></a>
+              <a href="https://line.me/ti/p/%40ovs4341s"><img src="images/menu/line.svg" alt="" class="d-inline-block"></a>
+              <a href="https://www.youtube.com/user/gorgeousspace"><img src="images/menu/youtube.svg" alt="" class="d-inline-block"></a>
+              <a href="https://www.instagram.com/gorgeous_space/"><img src="images/menu/instagram@2x.png" alt="" width="43" class="d-inline-block"></a>
+              <a href=""><img src="images/menu/pinterest.svg" alt="" class="d-inline-block"></a>
+            </div>
+            <div class="py-4">
+              <a href="https://www.facebook.com/agent.hhh.com.tw" class="follows-fp"><img src="images/menu/fb.svg" alt="" width="20" class="d-inline-block me-2">幸福經紀人粉絲專頁</a>
+              <a href="https://www.facebook.com/retire.tw/" class="follows-fp"><img src="images/menu/fb.svg" alt="" width="20" class="d-inline-block me-2">退休好幸福粉絲專頁</a>
+            </div>
+            <div class="sec-menu-links">
+              <div class="d-flex mb-2">
+                <a href="https://m.hhh.com.tw/about/">關於我們</a>
+                <a href="https://m.hhh.com.tw/about/contact/">聯絡我們</a>
+                <a href="https://m.hhh.com.tw/about/privacy_policy/">隱私保護</a>
+                <a href="https://m.hhh.com.tw/about/timeline/">公司歷程</a>
+              </div>
+              <div class="d-flex">
+                <a href="https://www.104.com.tw/company/d6hr8sg">企業徵才</a>
+                <a href="https://m.hhh.com.tw/about/sitemap/">網站地圖</a>
+              </div>
+            </div>
+            <div class="copyright text-center">幸福空間　版權所有<br>© Gorgeous Space Co.Ltd. All Rights Reserved</div>
+          </div>
+      
+      </div>
+    </div>
+
+
+    <div class="sec-match">
+      
+      <div class="container-fluid sec-match-block px-0">
+        <div class="sec-match-list w-100">
+          <h4 class="sec- text-center">快速媒合設計師</h4>
+          <h6 class="sec- text-center mb-5">請填寫您的裝修資訊</h6>
+          <!-- 媒合表單一 -->
+          <div class="container container_match">
+            <div class="row ">
+              <div class="col-1"></div>
+              <div class="col-3 p-2">
+                <label for="area">房屋地區</label>
+              </div>
+              <div class="col-7 p-2">
+                <select name="area" id="area" class="form-select">
+                  <option value="" disabled selected>請選擇房屋地區</option>
+                  <option class="option" value="基隆市">基隆市</option>
+                  <option class="option" value="台北市">台北市</option>
+                  <option class="option" value="新北市">新北市</option>
+                  <option class="option" value="桃園市">桃園市</option>
+                  <option class="option" value="新竹縣">新竹縣</option>
+                  <option class="option" value="新竹市">新竹市</option>
+                  <option class="option" value="苗栗縣">苗栗縣</option>
+                  <option class="option" value="台中市">台中市</option>
+                  <option class="option" value="彰化縣">彰化縣</option>
+                  <option class="option" value="南投縣">南投縣</option>
+                  <option class="option" value="雲林縣">雲林縣</option>
+                  <option class="option" value="嘉義縣">嘉義縣</option>
+                  <option class="option" value="嘉義市">嘉義市</option>
+                  <option class="option" value="台南市">台南市</option>
+                  <option class="option" value="高雄市">高雄市</option>
+                  <option class="option" value="屏東縣">屏東縣</option>
+                  <option class="option" value="宜蘭縣">宜蘭縣</option>
+                  <option class="option" value="花蓮縣">花蓮縣</option>
+                  <option class="option" value="台東縣">台東縣</option>
+                  <option class="option" value="澎湖縣">澎湖縣</option>
+                </select>
+                <div class="text-danger text-end small" id="area-error"></div>
+              </div>
+              <div class="col-1"></div>
+              <div class="col-1"></div>
+              <div class="col-3 p-2">
+                <label for="type">房屋類型</label>
+              </div>
+              <div class="col-7 p-2">
+                <select name="type" id="type" class="form-select">
+                  <option value="" disabled selected>請選擇房屋類型</option>
+                  <option class="option" value="預售屋">預售屋</option>
+                  <option class="option" value="中古屋">中古屋</option>
+                  <option class="option" value="新成屋">新成屋</option>
+                  <option class="option" value="毛胚屋">毛胚屋</option>
+                  <option class="option" value="自地自建">自地自建</option>
+                </select>
+                <div class="text-danger text-end small" id="type-error"></div>
+              </div>
+              <div class="col-1"></div>
+              <div class="col-1"></div>
+              <div class="col-3 p-2">
+                <label for="square">房屋坪數</label>
+              </div>
+              <div class="col-7 p-2">
+                <select name="square" id="square" class="form-select">
+                  <option value="" disabled selected>請選擇房屋坪數</option>
+                  <option class="option" value="10坪以下">10坪以下</option>
+                  <option class="option" value="11~20坪">11~20坪</option>
+                  <option class="option" value="21~30坪">21~30坪</option>
+                  <option class="option" value="31~40坪">31~40坪</option>
+                  <option class="option" value="41~50坪">41~50坪</option>
+                  <option class="option" value="51坪以上">51坪以上</option>
+                </select>
+                <div class="text-danger text-end small" id="square-error"></div>
+              </div>
+              <div class="col-1"></div>
+              <div class="col-1"></div>
+              <div class="col-3 p-2">
+                <label for="pattern">房屋格局</label>
+              </div>
+              <div class="col-7 p-2">
+                <select name="pattern" id="pattern" class="form-select">
+                  <option value="" disabled selected>請選擇房屋格局</option>
+                  <option class="option" value="一房">一房</option>
+                  <option class="option" value="兩房">兩房</option>
+                  <option class="option" value="三房">三房</option>
+                  <option class="option" value="四房">四房</option>
+                  <option class="option" value="五房">五房</option>
+                  <option class="option" value="六房">六房</option>
+                  <option class="option" value="六房以上">六房以上</option>
+                </select>
+                <div class="text-danger text-end small" id="pattern-error"></div>
+              </div>
+              <div class="col-1"></div>
+              <div class="col-1"></div>
+              <div class="col-3 p-2">
+                <label for="style">喜愛風格</label>
+              </div>
+              <div class="col-7 p-2">
+                <select name="style" id="style" class="form-select">
+                  <option value="" disabled selected>請選擇喜愛風格</option>
+                  <option class="option" value="現代風">現代風</option>
+                  <option class="option" value="鄉村風">鄉村風</option>
+                  <option class="option" value="古典風">古典風</option>
+                  <option class="option" value="休閒多元">休閒多元</option>
+                  <option class="option" value="美式風">美式風</option>
+                  <option class="option" value="奢華風">奢華風</option>
+                  <option class="option" value="東方風">東方風</option>
+                  <option class="option" value="混搭風">混搭風</option>
+                  <option class="option" value="新古典">新古典</option>
+                  <option class="option" value="日式禪風">日式禪風</option>
+                  <option class="option" value="北歐風">北歐風</option>
+                  <option class="option" value="工業風">工業風</option>
+                  <option class="option" value="異國風">異國風</option>
+                </select>
+                <div class="text-danger text-end small" id="style-error"></div>
+              </div>
+              <div class="col-1"></div>
+            </div>
+            <div class="row mt-5">
+              <button class="match__next mx-auto d-inline-block col-6">下一步</button>
+            </div>
+          </div>
+          <!-- 媒合表單二 -->
+          <div class="container container_match2">
+            <div class="row">
+              <div class="col-1"></div>
+              <div class="col-3 p-2">
+                <label for="name">姓名</label>
+              </div>
+              <div class="col-7 p-2">
+                <input type="text" name="name" id="name" class="form-control" required>
+                <div class="text-danger text-end small" id="name-error"></div>
+              </div>
+              <div class="col-1"></div>
+              <div class="col-1"></div>
+              <div class="col-3 p-2">
+                <label for="phone">電話</label>
+              </div>
+              <div class="col-7 p-2">
+                <input type="text" name="phone" id="phone" class="form-control" required>
+                <div class="text-danger text-end small" id="phone-error"></div>
+              </div>
+              <div class="col-1"></div>
+              <div class="col-1"></div>
+              <div class="col-3 p-2">
+                <label for="sex">性別</label>
+              </div>
+              <div class="col-7 p-2">
+                <select name="sex" id="sex" class="form-select">
+                  <option value="" disabled selected>請選擇性別</option>
+                  <option value="男">男</option>
+                  <option value="女">女</option>
+                </select>
+                <div class="text-danger text-end small" id="sex-error"></div>
+              </div>
+              <div class="col-1"></div>
+              <div class="col-1"></div>
+              <div class="col-3 p-2">
+                <label for="pattern">方便聯絡時間</label>
+              </div>
+              <div class="col-7 d-flex flex-column align-items-center text-start p-2">
+                <div style="width: 60%;" class="form-check check-click">
+                  <input type="checkbox" value="上午9點至12點" name="time" id="2b" class="form-check-input"/>
+                  <label  for="2b" class="mt-0">
+                    <p>上午9點至12點</p>
+                  </label>
+                </div>
+                <div style="width: 60%;" class="form-check check-click">
+                  <input type="checkbox" value="中午12點至1點" name="time" id="2c" class="form-check-input"/>
+                  <label  for="2c" class="mt-0">
+                    <p>中午12點至1點</p>
+                  </label>
+                </div>
+                <div style="width: 60%;" class="form-check check-click">
+                  <input type="checkbox" value="下午1點至6點" name="time" id="2d" class="form-check-input"/>
+                  <label  for="2d" class="mt-0">
+                    <p>下午1點至6點</p>
+                  </label>
+                </div>
+                <div style="width: 60%;" class="form-check check-click">
+                  <input type="checkbox" value="晚上6點至9點" name="time" id="2e" class="form-check-input" />
+                  <label  for="2e" class="mt-0">
+                    <p>晚上6點至9點</p>
+                  </label>
+                </div>
+                <div style="width: 60%;" class="form-check check-click">
+                  <input type="checkbox" value="隨時皆可" name="time" id="2a" checked class="form-check-input"/>
+                  <label for="2a" class="mt-0">
+                    <p>隨時皆可</p>
+                  </label>
+                </div>
+              </div>
+              <div class="col-1"></div>
+            </div>
+            <div class="row mb-3 mt-5">
+              <button class="last-step mx-auto d-inline-block col-5">上一步</button>
+              <button class="match__next2 mx-auto d-inline-block col-5">送出</button>
+            </div>
+            <div class="row mb-3">
+              <div class="col-8 mx-auto text-center">
+                <div class="form-check">
+                  <input type="checkbox" id="readPolicy" class="form-check-input" checked>
+                  <label for="readPolicy" class="custom-control-label mt-0">同意 
+                    <a href="https://hhh.com.tw/about/privacy_policy/" target="_blank" style="color: #EE7800;
+                    text-decoration: none;">免責聲明與隱私使用政策</a>
+                  </label>
+                  <div class="text-danger text-left small" id="readPolicy-error"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+      <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
+        <div class="container-fluid" style="padding:0 8px;margin:0;">
+            <div class="navbar-brand navbar-back-fav me-0" onclick="window.close();">
+              <i class="fas fa-chevron-left"></i>
+            </div>
+            <a href="#" class="navbar-brand"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="141"></a>
+            <div class="navbar-brand navbar-search me-0">
+            </div>
+        </div>
+      </nav>
+      
+    </div>
+  </div>
+    <!-- bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
+        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
+        crossorigin="anonymous"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+    <script src="js/lazy-load.js" async></script>
+    <script async defer src="js/index_match.js"></script>
+</body>
+</html>

js/index-list.js

@@ -0,0 +1,153 @@
+let userAgent;
+let isSafari = false;
+let browserName;
+window.onload = function(){
+  //window.scrollBy(0, 1);
+  /* if(screen.width >= 901){
+      window.location.href = "https://www2.hhh.com.tw/";   
+  } */
+  userAgent = navigator.userAgent;
+  detectBrowser(userAgent);
+  detectDirection ();
+  let result; 
+}
+let over = document.querySelector('.infoContent__navBlock').offsetTop;
+
+function detectBrowser(agent){
+  if(userAgent.match(/chrome|chromium|crios/i)){
+    browserName = "chrome";
+  }else if(userAgent.match(/firefox|fxios/i)){
+    browserName = "firefox";
+  }  else if(userAgent.match(/safari/i)){
+    browserName = "safari";
+  }else if(userAgent.match(/opr\//i)){
+    browserName = "opera";
+  } else if(userAgent.match(/edg/i)){
+    browserName = "edge";
+  }else{
+    browserName="No browser detection";
+  }
+
+  if(browserName === 'safari'){
+    isSafari = true;
+  }
+  console.log(isSafari);
+}
+
+
+
+function detectDirection () {
+  let height = (window.screen.width * 2) / 3;
+  
+  $('.sec-02 .slide-item').css('height', `${height}px`);
+  let topHeight = (window.screen.width * 30) / 131;
+  
+  $('.sec-00 .slide-item').css('height', `${topHeight}px`);
+  $('.sec-00 .container-fluid').css('height', `${topHeight}px`);
+}
+
+
+    window.addEventListener('scroll', fixedOnScroll);
+    const navBlock = document.querySelector('.infoContent__navBlock');
+    function fixedOnScroll() {
+      if(window.innerHeight < window.innerWidth){
+      } else {
+        detectDirection ();
+      }
+      
+        if(window.pageYOffset >= over){
+          navBlock.classList.add('tab_sticky');
+        } else if(window.pageYOffset < over) {
+          navBlock.classList.remove('tab_sticky');
+        }
+    }
+    
+    $('.navbar-toggler').click(function(){
+        $(".sec-menu").css('display', 'block');
+        $(".wholeBody").css('overflow-y', 'hidden');
+        $('.sec-menu-block').addClass('slidein');
+        $('.sec-menu-block').removeClass('slideout');
+    });
+    
+    $('.navbar-back').click(function(){
+        $(".sec-menu").css('display', 'none');
+        $(".wholeBody").css('overflow-y', 'scroll');
+        $('.sec-menu-block').removeClass('slidein');
+        $('.sec-menu-block').addClass('slideout');
+    });
+    
+    $('.subexpand').click(function(){
+        $(this).parent().next().toggleClass('show');
+        $(this).parent().toggleClass('show');
+    });
+    
+    $('.navbar-search').click(function(){
+        $(".sec-search").css('display', 'block');
+        $(".wholeBody").css('overflow-y', 'hidden');
+    })
+    
+    $('.navbar-backs').click(function(){
+        $(".sec-search").css('display', 'none');
+        $(".wholeBody").css('overflow-y', 'scroll');
+    });
+
+    $('.navbar-back-fav').click(function(){
+      $(".sec-favor").css('display', 'none');
+    })
+
+      $('.btn-gotop').click(function () {
+        $('html, body').animate({
+            scrollTop: 0
+        }, 500)
+    });
+
+    $(window).scroll(function() {
+		if ( $(this).scrollTop() > 500 ){
+        $('.fixed-btn').fadeIn(222);
+        $('.freeCall').fadeIn(222);
+		} else {
+      $('.fixed-btn').stop().fadeOut(222);
+      $('.freeCall').stop().fadeOut(222);
+    }
+    }).scroll();
+
+    
+const searchBtn = document.querySelector('.searchBtn');
+const searchBar = document.querySelector('.searchBar');
+const searchHotLink = document.querySelectorAll('.sec-search-hots__link');
+searchBtn.addEventListener('click', search);
+searchBar.addEventListener('keyup', pressSearch);
+function search() {
+  if(searchBar.value == '') {
+    window.location.href = 'https://m.hhh.com.tw/search/lists/case/';
+  } else {
+    window.location.href = `https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`;
+  }
+}
+
+function pressSearch(e) {
+  if (e.keyCode === 13) {
+    e.preventDefault();
+    search();
+  }
+}
+
+searchHotLink.forEach((item, i) => {
+  item.addEventListener('click', function() {
+    window.location.href = `https://m.hhh.com.tw/search/lists/case/${this.textContent}-keyword/`;
+  })
+})
+
+document.addEventListener('lazybeforeunveil', function(e){
+  var bg = e.target.getAttribute('data-bg');
+  if(bg){
+      e.target.style.backgroundImage = 'url(' + bg + ')';
+  }
+});
+
+$('.mb__infoCard__more').click(function() {
+  $(this).hide();
+  $('.other').css('display', 'block');
+  over = document.querySelector('.infoContent__navBlock').offsetTop;
+})
+

js/index.js

@@ -400,6 +400,16 @@ $(".sec-01__slider").slick({
         $(".wholeBody").css('overflow-y', 'scroll');
     });
 
+    $('.btn-match').click(function(){
+      $(".sec-match").css('display', 'block');
+      $(".wholeBody").css('overflow-y', 'hidden');
+    })
+    
+    $('.navbar-backs').click(function(){
+        $(".sec-match").css('display', 'none');
+        $(".wholeBody").css('overflow-y', 'scroll');
+    });
+
     $('.navbar-back-fav').click(function(){
       $(".sec-favor").css('display', 'none');
     })
@@ -513,4 +523,171 @@ $(".next").click(function(){
 		easing: 'easeInOutBack'
   }); 
 });
+
+$('.container_match2').hide();
     
+$('.last-step').click(function() {
+  $('.container_match').fadeIn(500);
+  $('.container_match2').fadeOut(0);
+});
+
+$('.match__next').click(function() {
+  console.log($('#area').val());
+  console.log($('#type').val());
+  if ($('#area').val() == '' || $('#area').val() == null) {
+      $('#area-error').text('請選擇地區');
+      stop = 1;
+  } else {
+      $('#area-error').text('');
+      stop = 0
+  }
+
+  if ($('#type').val() == ''|| $('#type').val() == null) {
+      $('#type-error').text('請選擇房屋類型');
+      stop = 1;
+  } else {
+      $('#type-error').text('');
+      stop = 0
+  }
+
+  if ($('#square').val() == ''|| $('#square').val() == null) {
+      $('#square-error').text('請選擇房屋坪數');
+      stop = 1;
+  } else {
+      $('#square-error').text('');
+      stop = 0
+  }
+
+  if ($('#pattern').val() == ''|| $('#pattern').val() == null) {
+      $('#pattern-error').text('請選擇房屋格局');
+      stop = 1;
+  } else {
+      $('#pattern-error').text('');
+      stop = 0
+  }
+
+  if ($('#style').val() == ''|| $('#style').val() == null) {
+      $('#style-error').text('請選擇喜愛的風格');
+      stop = 1;
+  } else {
+      $('#style-error').text('');
+      stop = 0
+  }
+  console.log(stop);
+  if(stop === 0) {
+      $('.container_match').fadeOut(0);
+      $('.container_match2').fadeIn(500);
+  }
+  
+});
+
+$('.match__next2').click(function() {
+  if ($('#name').val() == ''|| $('#name').val() == null) {
+      $('#name-error').text('請填寫您的姓名');
+      name = 1;
+  } else {
+      $('#name-error').text('');
+      name = 0;
+  }
+
+  if ($('#phone').val() == ''|| $('#phone').val() == null || !/^[09]{2}[0-9]{8}$/.test($('#phone').val())) {
+      $('#phone-error').text('請以手機格式填寫(格式:0987654321)');
+      phone = 1;
+  } else {
+      $('#phone-error').text('');
+      phone = 0;
+  }
+  console.log($('#phone').val());
+
+  if ($('#sex').val() == ''|| $('#sex').val() == null) {
+      $('#sex-error').text('請選擇性別');
+      sex = 1;
+  } else {
+      $('#sex-error').text('');
+      sex = 0;
+  }
+  if(!$('#readPolicy').prop('checked')) {
+      $('#readPolicy-error').text('必須同意免責聲明與隱私使用政策');
+      readPolicy = 1;
+  } else {
+      $('#readPolicy-error').text(''); 
+      readPolicy = 0;
+  }
+  var obj = document.getElementsByName("time");
+  var time = [];
+  for (k in obj) {
+      if (obj[k].checked)
+          time.push(obj[k].value);
+  }
+  console.log(time);
+  if(name== 0 && phone == 0 && sex == 0 && readPolicy == 0) {
+      $.ajax({
+          type: "POST",
+          url: "",
+          data:
+              {
+                  data: JSON.stringify(
+                      {
+                          name: $('#name').val(),
+                          sex: $('#sex').val(),
+                          phone: $('#phone').val(),
+                          time: $('#datepicker').val(),
+                          area: $('#area').val(),
+                          type: $('#type').val(),
+                          square: $('#square').val(),
+                          pattern: $('#pattern').val(),
+                          style: $('#style').val(),
+                          time: time.toString(),
+                      })
+              },
+          success: function (res) {
+              if (res.status == "Success") {
+                  // gaEvent('功能 - 軟裝需求單 - 送出', '經紀人');
+                  Swal.fire({
+                      html: '<h5 class="text-primary font-weight-bold">' + res.error + '</h5>',
+                      showConfirmButton: true,
+                      confirmButtonText: '確定',
+                      confirmButtonColor: '#EE7800'
+                  }).then(function (result) {
+                      if (result.value) {
+                          location.reload();
+                      }
+                  })
+              } else {
+                  Swal.fire({
+                      title: '似乎出了什麼問題 請稍後再試',
+                      showConfirmButton: false,
+                  })
+              }
+          },
+          error: function (error) {
+              console.error(error)
+          }
+      })
+     window.open('./index_match.html');
+  }
+  
+})
+
+$('.check-click').click(function(e) {
+  if($('#2b').is(':checked')) {
+      $('#2a').prop('checked', false);
+  }
+  if($('#2c').is(':checked')) {
+      $('#2a').prop('checked', false);
+  }
+  if($('#2d').is(':checked')) {
+      $('#2a').prop('checked', false);
+  }
+  if($('#2e').is(':checked')) {
+      $('#2a').prop('checked', false);
+  }
+  console.log(e.target.id);
+  if(e.target.id === '2a') {
+      $('#2a').prop('checked', true);
+      $('#2b').prop('checked', false);
+      $('#2c').prop('checked', false);
+      $('#2d').prop('checked', false);
+      $('#2e').prop('checked', false);
+  }
+})

js/index_match.js

@@ -0,0 +1,568 @@
+let userAgent;
+let isSafari = false;
+let browserName;
+window.onload = function(){
+    // if(screen.width < 900){
+    //     window.location.href = "https://m3.hhh.com.tw/";   
+    // }
+    userAgent = navigator.userAgent;
+    detectBrowser(userAgent);
+    detectDirection ();
+    let result;
+    let matchData;
+      $.ajax({
+          method: "GET",
+          url: "./json/realtime.json",
+          dataType: "json",
+      }).done(function (msg) {
+        //   result = [...msg];
+        //   renderSec00(result);
+        //   renderSec02(result);
+        //   renderSec05(result);
+        //   renderSec06(result);
+        //   renderSec07(result);
+        //   renderSec08(result);
+        //   renderSec09(result);
+        //   renderSec10(result);
+        //   //renderSec11(result);
+        //   renderVideo(result);
+        //   renderTrending(result);
+      });
+      $.ajax({
+        method: "GET",
+        url: "./json/match.json",
+        dataType: "json",
+    }).done(function (msg) {
+        matchData = [...msg];
+        renderMatch(matchData);
+    });
+}
+
+
+function renderMatch(matchData){
+    let str = '';
+    for(let i = 0; i < matchData.length; i++){
+        str += `<div class="row align-items-center py-4 pb-5 justify-content-center text-center container__row" style="border-bottom: 1px solid #B2B2B2;">
+                    <div class="col-12 mb-4">
+                        <div class="sec-result__imgfr mx-auto" style="background-image: url('${matchData[i].WorkImg}');"
+                        onclick="window.open('${matchData[i].DesignerLink}');"></div>
+                        </div>
+                    <div class="row">
+                        <div class="col-6">
+                            <div class="sec-result__designer mx-auto mb-4" style="background-image: url('${matchData[i].DesignerImg}');">
+                            </div>
+                            <button class="btn-match">我有興趣</button>
+                        </div>
+                        <div class="col-6">
+                            <div class="text-start mx-auto">
+                            <p>${matchData[i].Name} 設計師</p>
+                            <p class="mb-2">${matchData[i].CompanyName}</p>
+                            <p>擅長風格 ${matchData[i].Style}</p>
+                            <p>接案坪數 ${matchData[i].Square}</p>
+                            <p class="mb-2">接案地區 ${matchData[i].Area}</p>
+                            <span class="sec-result__consulting"><strong class="sec-result__num">${matchData[i].Consulting}</strong> 人正在諮詢</span>
+                        </div>
+                    </div>
+                </div>
+                </div>
+                `
+    }
+
+    $('.container__match').html(str);
+    
+}
+  
+$(document).on("click", ".btn-match", function (event) {
+    Swal.fire({
+        icon: 'success',
+        text: '我們已收到您的訊息，將有幸福經紀人與您聯繫',
+        confirmButtonText: '關閉',
+    })
+});
+
+
+function detectDirection () {
+    let height = (window.screen.width * 5) / 12;
+    console.log(height);
+    $('.sec-02 .slide-item').css('height', `${height}px`);
+}
+
+function detectBrowser(agent){
+    if(userAgent.match(/chrome|chromium|crios/i)){
+      browserName = "chrome";
+    }else if(userAgent.match(/firefox|fxios/i)){
+      browserName = "firefox";
+    }  else if(userAgent.match(/safari/i)){
+      browserName = "safari";
+    }else if(userAgent.match(/opr\//i)){
+      browserName = "opera";
+    } else if(userAgent.match(/edg/i)){
+      browserName = "edge";
+    }else{
+      browserName="No browser detection";
+    }
+  
+    if(browserName === 'safari'){
+      isSafari = true;
+    }
+    console.log(isSafari);
+  }
+
+
+
+    function renderSec00(data) {
+        let temp = data[0]['data'];
+        renderBannerStr('sec-00__slider', temp);
+        $(".sec-00__slider").slick({
+            dots: false,
+            speed: 800,
+            autoplay: true,
+            autoplaySpeed: 5000,
+            arrows: true,
+            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>'
+        });
+    }
+
+    function renderSec02(data) {
+        let temp = data[1]['data'];
+        renderBannerStr('sec-02__slider', temp);
+        $(".sec-02__slider").slick({
+            dots: false,
+            autoplay: true,
+            arrows: true,
+            fade: true,
+            autoplaySpeed: 4000,
+            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 33px;color: white;transform: translateY(-10px);"></i></button>',
+            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 33px;color: white;transform: translateY(-10px);"></i></button>'
+        });
+    }
+
+    function renderBannerStr(sec, data) {
+        let str = '';
+        for(let i = 0; i < data.length; i++){
+            if(data[i]['Dwebp'] && !isSafari) {
+                str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['Dwebp']}');" data-bg="${data[i]['Dwebp']}"></div>`
+            } else {
+                str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['DimgUrl']}');" data-bg="${data[i]['DimgUrl']}"></div>`
+            }
+            
+        }
+        $(`.${sec}`).html(str);
+    }
+
+    function renderSec05(data) {
+        let randomIdx = Math.floor(Math.random()*3);
+        const ran = $('.sec-05__tabdiv .nav-pills li').eq(randomIdx);
+        const ranDiv = $('.sec-05tab-content>div').eq(randomIdx);
+        $('.sec-05tab-content>div').hide();
+        ranDiv.show();
+        ran.addClass('active');
+        ran.children().addClass('active');
+        $('.sec-05 .morelink').attr('href', $('.sec-05__tabdiv .nav-item-link.active').data('link'));
+          let temp = data[2]['data'];
+          for(let i = 0; i < temp.length; i++){
+            if(temp[i]["tab"] == '最夯設計'){
+              let str = '';
+              let sub = temp[i]["data"];
+              for(let j = 0; j < sub.length; j++){
+                str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
+                    <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"></div>
+                    <h5 class="mb-2 me-2">${sub[j]['title']}</h5>
+                    <p class="mt-2">${sub[j]['description']}</p>
+                </div>`;
+              }
+              $('#pills-hot-tab .tabpar').html(str);
+            }
+            if(temp[i]["tab"] == '影音實錄'){
+              let str = '';
+              let sub = temp[i]["data"];
+              for(let j = 0; j < sub.length; j++){
+                str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
+                <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"><img data-src="images/Play-Button.webp" alt="" class="tabpar__card__play lazyload"></div>
+                <h5 class="mb-2  me-2">${sub[j]['title']}</h5>
+                <p class="mt-2">${sub[j]['description']}</p>
+            </div>`;
+              }
+              $('#pills-video-tab .tabpar').html(str);
+            }
+            if(temp[i]["tab"] == '專欄文章'){
+              let str = '';
+              let sub = temp[i]["data"];
+              for(let j = 0; j < sub.length; j++){
+                str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
+                <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"></div>
+                <h5 class="mb-2  me-2">${sub[j]['title']}</h5>
+                <p class="mt-2">${sub[j]['description']}</p>
+            </div>`;
+              }
+              $('#pills-blog-tab .tabpar').html(str);
+            }
+          }
+          const cardText = document.querySelectorAll('.tabpar__card p');
+          cardText.forEach((item, i) => {
+            let len = item.textContent.length;
+            if(len > 18) {
+              let str = item.textContent.substring(0, 18) + '...';
+              item.textContent = str;
+            }
+          })
+          $('.sec-05__tabdiv .nav-pills button').on('click', function(event){
+            event.preventDefault();
+            $('.sec-05__tabdiv .nav-pills li').removeClass('active');
+            $('.sec-05__tabdiv .nav-pills li button').removeClass('active');
+            $(this).addClass('active');
+            $(this).parent().addClass('active');
+            $('.sec-05tab-content>div').hide();
+            var target = $(this).attr('id');
+            $(`#pills-tab #${target}`).show();
+            $('.sec-05tab-content .tabpar').slick('setPosition');
+        });
+
+        $(`.sec-05tab-content .tabpar`).slick({
+            arrows: true,
+            slidesToShow: 3,
+            infinite: false,
+            dots: false,
+            slidesToScroll: 1,
+            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
+            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
+        });
+
+        $('.sec-05__tabdiv .nav-item-link').click(function() {
+            $('.sec-05 .morelink').attr('href',$('.sec-05__tabdiv .nav-item-link.active').data('link'));
+        });
+    }
+
+    function renderSec06(data) {
+        let temp = data[3]['data'];
+        let str = '';
+        for(let i = 0; i < temp.length; i++){
+            if(temp[i].video == 'true'){
+                str+= `<div class="sec-06__card" onclick="window.open('${temp[i]['link']}');">
+                    <div class="sec-06__card__outer"><div class="sec-06__card__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-06__card__play lazyload" data-src="images/Play-Button.webp"></div></div>
+                    <h5 class="mb-2 mt-2">${temp[i]['title']}</h5>
+                    <p class="mt-2">${temp[i]['description']}</p>
+                    </div>`;
+            } else {
+                str+= `<div class="sec-06__card" onclick="window.open('${temp[i]['link']}');">
+                    <div class="sec-06__card__outer"><div class="sec-06__card__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div></div>
+                    <h5 class="mb-2 mt-2">${temp[i]['title']}</h5>
+                    <p class="mt-2">${temp[i]['description']}</p>
+                    </div>`;
+            }
+        }
+        $('.sec-06 .sec-06__slider').html(str);
+        $('.sec-06__slider').slick({
+            arrows: true,
+            dots: false,
+            speed: 800,
+            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 30px;color: white;"></i></button>',
+            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 30px;color: white;"></i></button>'
+        });
+        const cardText = document.querySelectorAll('.sec-06__card p');
+        cardText.forEach((item, i) => {
+            let len = item.textContent.length;
+            if(len > 20) {
+              let str = item.textContent.substring(0, 40) + '...';
+              item.textContent = str;
+            }
+        });
+    }
+
+    function renderSec07(data) {
+        let temp = data[5]['data'];
+        let str = '';
+        for(let i = 0; i < temp.length; i++){
+            str+= `<div class="sec-07__slider-${i+1} slide-item" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>`
+        }
+        $(`.sec-07__slider`).html(str);
+        $(".sec-07__slider").slick({
+            dots: false,
+            autoplay: true,
+            arrows: false,
+            slidesToShow: 4,
+            slidesToScroll: 1,
+            autoplaySpeed: 7000,
+            initialSlide: 0,
+            infinite: true,
+        });
+    }
+
+    function renderSec08(data) {
+        let temp = data[4]['data'];
+        let str = '';
+        for(let i = 0; i < temp.length; i++){
+            if(temp[i].video == 'true'){
+                str+= `<div class="sec-08__slider-${i+1} sec-08__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
+                        <div class="sec-08__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-08__card__play lazyload" data-src="images/Play-Button.webp"></div>
+                        <h5 class="mb-2 me-2">${temp[i]['title']}</h5>
+                        <p class="mb-2 me-2">${temp[i]['description']}</p>
+                    </div>`;
+            } else {
+                str+= `<div class="sec-08__slider-${i+1} sec-08__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
+                        <div class="sec-08__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>
+                        <h5 class="mb-2 me-2">${temp[i]['title']}</h5>
+                        <p class="mb-2 me-2">${temp[i]['description']}</p>
+                    </div>`;
+            }
+        }
+        $('.sec-08__slider').html(str);
+        $(".sec-08__slider").slick({
+          arrows: true,
+          slidesToShow: 1,
+          infinite: false,
+          dots: false,
+          slidesToShow: 3,
+          centerPadding: '12px',
+          prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
+            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
+      });
+      const cardText = document.querySelectorAll('.sec-08__card p');
+        cardText.forEach((item, i) => {
+          let len = item.textContent.length;
+          if(len > 20) {
+            let str = item.textContent.substring(0, 20) + '...';
+            item.textContent = str;
+          }
+        })
+    }
+
+    function renderSec09(data) {
+        let temp = data[6]['data'];
+        let str = '';
+        for(let i = 0; i < temp.length; i++){
+            if(temp[i].video !== 'false') {
+                str+= `<div class="sec-09__slider-1 sec-09__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
+                      <div class="sec-09__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-09__card__play lazyload" data-src="images/Play-Button.webp"></div>
+                      <p class="sec-09__cardtxt">${temp[i]['title']}</p>
+                    </div>`
+            } else {
+                str+= `<div class="sec-09__slider-1 sec-09__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
+                      <div class="sec-09__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>
+                      <p class="sec-09__cardtxt">${temp[i]['title']}</p>
+                    </div>`
+            }
+            
+        }
+        $('.sec-09__slider').html(str);
+        $(".sec-09__slider").slick({
+            autoplay: true,
+            autoplaySpeed: 7000,
+            arrows: true,
+            slidesToShow: 4,
+            infinite: true,
+            dots: false,
+            slidesToScroll: 1,
+            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
+            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
+        });
+    }
+    function renderSec10(data) {
+        renderRecStr("sec-10", data[7]['data'].slice(0, 6));
+        renderRecStr("sec-11", data[8]['data'].slice(0, 6));
+    }
+
+    function renderRecStr(sec, data) {
+        let str = '';
+        for(let i = 0; i < data.length; i++){
+            //console.log(data[i]['description'].length);
+            if(data[i]['description'].length > 0) {
+                data[i]['description'].split('，');
+                data[i]['description'] = data[i]['description'].split('，').slice(1).join("");
+            }
+            if(data[i].video !== 'false') {
+                str+= `<div class="${sec}__card col-4 mb-3" onclick="window.open('${data[i]['link']}');">
+                        <div class="${sec}__card-img mb-2" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"><img class="${sec}__card__play lazyload" data-src="images/Play-Button.webp"></div>
+                        <h5 class="me-2">${data[i]['title']}</h5>
+                        <p class="${sec}__cardtxt me-2">${data[i]['description']}</p>
+                    </div>`
+            } else {
+                str+= `<div class="${sec}__card col-4 mb-3" onclick="window.open('${data[i]['link']}');">
+                        <div class="${sec}__card-img mb-2" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"></div>
+                        <h5 class="me-2">${data[i]['title']}</h5>
+                        <p class="${sec}__cardtxt me-2">${data[i]['description']}</p>
+                    </div>`
+            }
+            
+        }
+        $(`.${sec} .row`).html(str);
+        const cardText = document.querySelectorAll(`.${sec}__card p`);
+        cardText.forEach((item, i) => {
+          let len = item.textContent.length;
+          if(len > 18) {
+            let str = item.textContent.substring(0, 18) + '...';
+            item.textContent = str;
+          }
+        })
+    }
+
+    function renderVideo(data) {
+        let temp = data[9];
+        console.log(data[9]);
+        $('.sec-06__videotxt').text(temp['title']);
+        console.log('test');
+        $('.sec-06__video__imgfr').css('background-image', `url(https://img.youtube.com/vi/${temp['yt']}/hqdefault.jpg)`);
+        $('#videoModal').on('shown.bs.modal', function () {
+            $('#videoModal iframe').attr('src', `https://www.youtube.com/embed/${temp['yt']}?controls=0&autoplay=1&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fm.hhh.com.tw&amp;widgetid=1`);
+        });
+        $('#videoModal').on('hidden.bs.modal', function () {
+          $('#videoModal iframe').removeAttr('src');
+        });
+    }
+
+    function renderTrending(result){
+        let temp = result[10]['data'];
+        let str = '';
+        for(let i = 0; i < temp.length; i++){
+            str += `<a class="dropbox__hots__link" href="https://hhh.com.tw/search/lists/case/${temp[i]}-keyword/">${temp[i]}</a>`
+        }
+        $('.dropbox__hots').html(`<strong class="dropbox__hots__title">熱搜關鍵字：</strong>${str}`);
+    }
+
+
+function tab2 () {
+    if(('.dropbox__tabdiv').length){
+        // Show the first tab by default
+    $('.dropbox-tab-content>div').hide();
+    $('.dropbox-tab-content>div:first').show();
+    $('.dropbox__tabdiv .nav-pills li:first').addClass('active');
+    $('.dropbox__tabdiv .nav-pills li:first button').addClass('active');
+
+    // Change tab class and display content
+    $('.dropbox__tabdiv .nav-pills button').on('click', function(event){
+        event.preventDefault();
+        $('.dropbox__tabdiv .nav-pills li').removeClass('active');
+        $('.dropbox__tabdiv .nav-pills li button').removeClass('active');
+        $(this).addClass('active');
+        $(this).parent().addClass('active');
+        $('.dropbox-tab-content>div').hide();
+        var target = $(this).attr('id');
+        $(`#pills-tab-2 #${target}`).show();
+    });
+    }
+}
+
+tab2();
+
+
+window.addEventListener('scroll', fixedOnScroll);
+    
+const navbar = document.querySelector('.navbar-main');
+    
+function fixedOnScroll() {
+   
+}
+
+$(window).scroll(function() {
+    if ( $(this).scrollTop() > 800 ){
+        $('.fixed-btn').fadeIn(222);
+    } else {
+        $('.fixed-btn').stop().fadeOut(222);
+    }
+}).scroll();
+
+$('.btn-gotop').click(function () {
+    $('html, body').animate({
+        scrollTop: 0
+    }, 500)
+});
+
+$('.navbar-search img').click(function(){
+    $('.navbar-search .dropbox').toggleClass('open');
+     if($('.navbar-search .dropbox').hasClass('open')) {
+        $('.navbar-nav .nav-item>.dropbox').addClass('d-none');
+    } else {
+        $('.navbar-nav .nav-item>.dropbox').removeClass('d-none');
+    } 
+});
+
+$('.sec-00__close').click(function(){
+    $(this).css('display', 'none');
+    $('.sec-00').addClass('bannerClose');
+    //$('.sec-02').css('padding-top', '53px');
+    sticky = 0;
+});
+
+
+
+document.addEventListener('lazybeforeunveil', function(e){
+    var bg = e.target.getAttribute('data-bg');
+    if(bg){
+        e.target.style.backgroundImage = 'url(' + bg + ')';
+    }
+});
+
+$('.container_match2').hide();
+$('.match__next').click(function() {
+    $('.container_match').fadeOut(0);
+    $('.container_match2').fadeIn(500);
+})
+
+    //jQuery time
+    var current_fs, next_fs, previous_fs; //fieldsets
+    var left, opacity, scale; //fieldset properties which we will animate
+    var animating; //flag to prevent quick multi-click glitches
+    
+    $(".next").click(function(){
+         if(animating) return false;
+         animating = true;
+        
+        current_fs = $(this).parent().parent();
+        next_fs = $(this).parent().parent().next();
+        
+        //activate next step on progressbar using the index of next_fs
+        $(".form-progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
+        
+        //show the next fieldset
+        next_fs.animate({opacity: 1}, {
+            step: function(now, mx) {
+                //as the opacity of current_fs reduces to 0 - stored in "now"
+                //1. scale current_fs down to 80%
+                scale = 0 + (1 + now) * .5 ;
+                //2. bring next_fs from the right(50%)
+                left = (now * 50)+"%";
+                //3. increase opacity of next_fs to 1 as it moves in
+                opacity = 0 + now;
+                next_fs.css({
+            'transform': 'scale('+scale+')',
+          });
+                next_fs.css({'opacity': opacity});
+            }, 
+            duration: 400, 
+            complete: function(){
+                next_fs.show();
+                animating = false;
+            }, 
+            //this comes from the custom easing plugin
+            easing: 'easeInOutBack'
+      }); 
+        //hide the current fieldset with style
+         current_fs.animate({opacity: 0}, {
+            step: function(now, mx) {
+                //as the opacity of current_fs reduces to 0 - stored in "now"
+                //1. scale current_fs down to 80%
+                scale = 1 - (1 - now) * 0.2;
+                //2. bring next_fs from the right(50%)
+                left = (now * 50)+"%";
+                //3. increase opacity of next_fs to 1 as it moves in
+                opacity = 1 - now;
+                current_fs.css({
+            'transform': 'scale('+scale+')',
+          });
+                next_fs.css({'opacity': opacity});
+            }, 
+            duration: 400, 
+            complete: function(){
+                current_fs.hide();
+                animating = false;
+            }, 
+            //this comes from the custom easing plugin
+            easing: 'easeInOutBack'
+      }); 
+    });
+
+$('.close').click(function () {
+    window.close();
+})
+

json/match.json

@@ -0,0 +1,38 @@
+[
+  {
+    "id": 0,
+    "WorkImg": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point04_449_11.jpg",
+    "DesignerImg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_722_20210610094358.jpg",
+    "DesignerLink": "https://hhh.com.tw/designers/cases/3/1-page/new-sort/",
+    "Name": "吳苡瑄",
+    "CompanyName": "春風時尚空間設計",
+    "Style": "現代風",
+    "Square": "20～30坪",
+    "Area": "台北 新北",
+    "Consulting": "15"
+  },
+  {
+    "id": 1,
+    "WorkImg": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point04_449_11.jpg",
+    "DesignerImg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_722_20210610094358.jpg",
+    "DesignerLink": "https://hhh.com.tw/designers/cases/3/1-page/new-sort/",
+    "Name": "吳苡瑄",
+    "CompanyName": "春風時尚空間設計",
+    "Style": "現代風",
+    "Square": "20～30坪",
+    "Area": "台北 新北",
+    "Consulting": "15"
+  },
+  {
+    "id": 2,
+    "WorkImg": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point04_449_11.jpg",
+    "DesignerImg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_722_20210610094358.jpg",
+    "DesignerLink": "https://hhh.com.tw/designers/cases/3/1-page/new-sort/",
+    "Name": "吳苡瑄",
+    "CompanyName": "春風時尚空間設計",
+    "Style": "現代風",
+    "Square": "20～30坪",
+    "Area": "台北 新北",
+    "Consulting": "15"
+  }
+]

quiz-test.html

@@ -2021,21 +2021,9 @@ TV節目表
     $('.article__contexts').css('height', height);
     console.log(height);
     $('.article__readMore').on('click', function () {
-            // $(this).children('.fa').toggleClass('is-rotate');
-            // $(this).children('.article__readMore__text').toggleClass('is-open')
-            // $(this).toggleClass('active')
             $('.article__readMore').toggle()
             $(".article__contexts").attr('style', 'height:auto')
 
-            // if ($(this).children('.article__readMore__text').hasClass('is-open')) {
-            //     //$('.article__readMore__text').text('')
-            //     $('.article__readMore::before').css('background', 'unset')
-            // } else {
-            //     $('.article__readMore__text').text('閱讀更多')
-            // }
-
-            // $('.article__moreContext').slideToggle();
-            //$('.blank-box').hide();
             $('.article__contexts').toggleClass('active');
 
         })
@@ -2377,6 +2365,7 @@ TV節目表
             }
         });
     };
+
 </script>
 </body>
 </html>

sass/list-style-mb.css

@@ -0,0 +1,774 @@
+body {
+  font-family: 'Helvetica Neue';
+}
+
+a:focus {
+  outline: none;
+}
+
+a:focus-visible {
+  outline: none;
+}
+
+button:focus-visible {
+  outline: none;
+}
+
+img:focus-visible {
+  outline: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+.text-hhh {
+  color: #EE7800;
+}
+
+.navbar {
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  padding-top: 5px;
+  padding-bottom: 5px;
+  background-color: white !important;
+  z-index: 99;
+}
+
+.navbar-toggler {
+  padding-left: 0;
+  border-color: transparent !important;
+}
+
+.navbar-toggler:focus {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.navbar-toggler-icon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  justify-items: center;
+}
+
+.navbar-toggler-icon i {
+  font-size: 25px;
+  line-height: 30px;
+  display: inline-block;
+}
+
+.navbar-search {
+  padding-right: 2px;
+}
+
+.navbar-brand {
+  font-size: 1.5rem;
+}
+
+.navbar-main.sticky {
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+.navbar-main.sticky + .sec-01 {
+  padding-top: 58px;
+}
+
+.fixed_menu {
+  height: 78px;
+  position: fixed;
+  z-index: 4;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #fff;
+  box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+@media (min-width: 480px) {
+  .fixed_menu {
+    height: 50px;
+  }
+}
+
+@media (min-width: 480px) {
+  .fixed_menu .row {
+    height: 50px;
+  }
+}
+
+@media (min-width: 480px) {
+  .fixed_menu__box {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.fixed_menu__box img:focus-visible {
+  outline: none;
+}
+
+@media (min-width: 480px) {
+  .fixed_menu__box img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.sec-menu {
+  display: none;
+  z-index: 105;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  font-size: 14px;
+}
+
+.sec-menu-block {
+  padding-top: 61px;
+  margin: 0;
+  -webkit-transition: -webkit-transform .5s;
+  transition: -webkit-transform .5s;
+  transition: transform .5s;
+  transition: transform .5s, -webkit-transform .5s;
+  position: fixed;
+  top: 0;
+  left: -100%;
+  right: 0;
+  height: 100%;
+  overflow-y: scroll;
+  max-width: 100%;
+  background-color: white;
+}
+
+.sec-menu-block.slidein {
+  -webkit-animation: slidein 0.3s forwards;
+  animation: slidein 0.3s forwards;
+}
+
+.sec-menu-block.slideout {
+  -webkit-animation: slideout 0.3s forwards;
+  animation: slideout 0.3s forwards;
+}
+
+.sec-menu-list {
+  background: white;
+  margin-bottom: 0;
+}
+
+.sec-menu-list .navbar-nav {
+  padding: 0 2rem;
+  width: 100%;
+}
+
+.sec-menu-list .navbar-nav .dropdown-menu {
+  border: none;
+  padding: 0;
+  height: 0;
+  opacity: 0;
+  -webkit-transition: all 1s;
+  transition: all 1s;
+}
+
+.sec-menu-list .navbar-nav .dropdown-menu.show {
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  opacity: 1;
+}
+
+.sec-menu-list .navbar-nav .dropdown-menu .dropdown-item {
+  padding-left: 3rem;
+}
+
+.sec-menu-list .navbar-nav .dropdown-menu .dropdown-item:active, .sec-menu-list .navbar-nav .dropdown-menu .dropdown-item.active, .sec-menu-list .navbar-nav .dropdown-menu .dropdown-item:focus {
+  background-color: white;
+}
+
+.sec-menu-list .navbar-nav .dropdown-menu .dropdown-item:hover {
+  background-color: white;
+}
+
+.sec-menu-list .navbar-nav .dropdown-menu .sub-menu .dropdown-item {
+  padding-left: 6rem;
+}
+
+.sec-menu-list .nav-item {
+  font-size: 17px;
+  display: block;
+  width: 100%;
+}
+
+.sec-menu-list .nav-link {
+  padding-top: 11px;
+  padding-bottom: 8px;
+  color: #707070;
+  position: relative;
+}
+
+.sec-menu-list .nav-link .link_div {
+  width: 25px;
+}
+
+.sec-menu-list .nav-link a {
+  color: #707070;
+  text-decoration: none;
+}
+
+.sec-menu-list .nav-link.show i {
+  -webkit-transform: rotate(-180deg);
+          transform: rotate(-180deg);
+}
+
+.sec-menu-list .nav-link .expand {
+  position: absolute;
+  right: 10px;
+}
+
+.sec-menu-list .nav-link .expand i {
+  font-size: 11px;
+  color: #D3D3D3;
+  -webkit-transition: all .5s;
+  transition: all .5s;
+}
+
+.sec-menu-list .nav-link.text-main {
+  color: #EE7800;
+}
+
+.sec-menu-list .sub-link .expand {
+  position: absolute;
+  right: 20px;
+  top: 8px;
+  width: 1.5rem;
+  text-align: center;
+}
+
+.sec-menu-list .sub-menu {
+  display: none;
+}
+
+.sec-menu-list .sub-menu.show {
+  display: block;
+}
+
+.sec-menu-list hr {
+  margin: 3px 0;
+  background-color: #bbbbbb;
+}
+
+.sec-menu-follows {
+  padding: 2rem 2.5rem;
+  background-color: #e6e6e6ef;
+  margin-top: -9px;
+}
+
+.sec-menu-follows-title {
+  color: #797979;
+  font-size: 14px;
+}
+
+.sec-menu-links {
+  margin-bottom: 2.5rem;
+}
+
+.sec-menu-links a {
+  color: #797979;
+  text-decoration: none;
+  display: inline-block;
+  padding: 1px 0;
+  border-bottom: 1px solid #acacac;
+  margin: 0 .6rem;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+}
+
+@media screen and (max-width: 385px) {
+  .sec-menu-links a {
+    margin: 0 .4rem;
+  }
+}
+
+.sec-menu .follows-fp {
+  color: #797979;
+  text-decoration: none;
+  font-weight: 400;
+  display: block;
+  padding-left: .5rem;
+}
+
+.sec-menu .follows-fp:nth-of-type(1) {
+  margin-bottom: .6rem;
+}
+
+.sec-menu .copyright {
+  color: #797979;
+  font-size: 13px;
+}
+
+@-webkit-keyframes slidein {
+  100% {
+    left: 0;
+  }
+}
+
+@keyframes slidein {
+  100% {
+    left: 0;
+  }
+}
+
+@-webkit-keyframes slideout {
+  100% {
+    left: -100%;
+  }
+}
+
+@keyframes slideout {
+  100% {
+    left: -100%;
+  }
+}
+
+.sec-search {
+  display: none;
+  z-index: 107;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  font-size: 14px;
+}
+
+.sec-search-block {
+  padding-top: 61px;
+  margin: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100;
+  height: 100%;
+  overflow-y: scroll;
+  background-color: rgba(0, 0, 0, 0.774);
+}
+
+.sec-search-list {
+  background-color: #F3F3F3;
+  padding: 1rem;
+  padding-bottom: 1.4rem;
+}
+
+.sec-search-list hr {
+  background-color: #aaaaaa;
+}
+
+.sec-search-form {
+  width: 100%;
+}
+
+.sec-search .searchBar {
+  font-size: 17px;
+  padding: .5rem .3rem;
+  display: inline-block;
+  width: 88%;
+  outline: none;
+  border: 2px solid #EE7800;
+  border-radius: 5px;
+}
+
+.sec-search .searchBtn {
+  outline: none;
+  border: none;
+  background-color: transparent;
+  display: inline-block;
+  width: 10%;
+}
+
+.sec-search-hots {
+  padding: 1rem;
+  background-color: white;
+  -webkit-box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
+          box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
+}
+
+.sec-search-hots__title {
+  color: #AAAAAA;
+  font-size: 18px;
+  font-weight: 400;
+  padding-top: .5rem;
+}
+
+.sec-search-hots__link {
+  display: inline-block;
+  text-decoration: none;
+  color: #797979;
+  border: 1px solid #797979;
+  border-radius: 3rem;
+  padding: .3rem .5rem;
+  margin-right: .8rem;
+  margin-bottom: .8rem;
+}
+
+.sec-search-hots__link:hover {
+  color: #797979;
+}
+
+.sec-login {
+  display: none;
+  z-index: 109;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  font-size: 14px;
+}
+
+.sec-login-block {
+  padding-top: 61px;
+  margin: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100;
+  height: 100%;
+  overflow-y: hidden;
+  background-color: #F3F3F3;
+}
+
+.sec-login-list {
+  background-color: #F3F3F3;
+  padding: 1rem;
+  padding-bottom: 1.4rem;
+}
+
+.sec-login-list hr {
+  background-color: #aaaaaa;
+}
+
+.sec-login-btns {
+  padding: 1rem;
+  background-color: white;
+  -webkit-box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
+          box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
+}
+
+.text-main {
+  color: #EE7800;
+}
+
+.text-phone {
+  color: #EA068C;
+  text-decoration: none;
+}
+
+.bg-white {
+  background-color: #fff;
+}
+
+.mb__hero {
+  margin-top: calc(52px);
+}
+
+.mb__hero__bgImg {
+  height: 240px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+}
+
+.mb__content {
+  background-color: rgba(244, 244, 244, 0.8);
+}
+
+.other {
+  display: none;
+}
+
+.mb__infoCard {
+  color: #727679;
+  text-align: center;
+  padding: 1rem;
+  background-color: rgba(244, 244, 244, 0.8);
+  margin: 3rem 0 0;
+}
+
+.mb__infoCard__name, .mb__infoCard__span {
+  font-size: 1.25rem;
+  color: #43484C;
+  font-weight: bold;
+}
+
+.mb__infoCard__span {
+  font-size: 1rem;
+}
+
+.mb__infoCard__cmy {
+  font-size: 1.125rem;
+  font-weight: 400;
+}
+
+.mb__infoCard__avatar {
+  width: 188px;
+  height: 188px;
+  position: absolute;
+  top: -120px;
+  border: 3px solid #FFF;
+  border-radius: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+
+.mb__infoCard__seo {
+  font-size: 1.12rem;
+  text-align: center;
+  padding: 1rem;
+  display: block;
+  line-height: 1.2;
+  font-weight: 400;
+}
+
+.mb__infoCard__approve {
+  color: #FF0000;
+}
+
+.mb__infoCard__more {
+  color: #FFAC73;
+  text-align: center;
+  cursor: pointer;
+}
+
+.mb__infoCard__detail aside {
+  line-height: 2;
+  font-size: 1rem;
+}
+
+.mb__infoCard__detail__l {
+  -ms-flex-preferred-size: 30%;
+      flex-basis: 30%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  -webkit-box-flex: 0;
+      -ms-flex-positive: 0;
+          flex-grow: 0;
+  max-width: 30%;
+}
+
+.mb__infoCard__detail__l.title {
+  color: #AAAAAA;
+  font-size: 1.125rem;
+  font-weight: bold;
+  -webkit-transform: translateX(-15px);
+          transform: translateX(-15px);
+}
+
+.mb__infoCard__detail__r {
+  -ms-flex-preferred-size: 70%;
+      flex-basis: 70%;
+  text-align: start;
+  -webkit-box-flex: 0;
+      -ms-flex-positive: 0;
+          flex-grow: 0;
+  max-width: 70%;
+  word-break: break-all;
+}
+
+.mb__infoCard .scMedia {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 1rem 0;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+}
+
+.mb__infoCard .scMedia a {
+  width: 16%;
+}
+
+.mb__infoCard .scMedia a img {
+  width: 100%;
+}
+
+.infoContent a {
+  color: #727679;
+  text-decoration: none;
+  font-size: .9rem;
+}
+
+.infoContent a.active {
+  color: #EE7800;
+}
+
+.infoContent__navBlock.tab_sticky {
+  position: fixed;
+  top: 60px;
+  width: 100%;
+  z-index: 12;
+}
+
+.infoContent .nav-item {
+  margin: 0;
+  width: 25%;
+  text-align: center;
+}
+
+.infoContent .nav-item-link {
+  display: block;
+  padding: 1rem 0.5rem;
+  text-decoration: none;
+  background-color: transparent;
+  font-size: .9rem;
+  color: #727679;
+  text-align: center;
+  font-size: 1.12rem;
+}
+
+.infoContent .nav-item-link.active {
+  color: #EE7800;
+  border-bottom: 2px solid #EE7800;
+}
+
+.infoContent .likeSee__divider {
+  height: 12px;
+  display: inline-block;
+  border: 0.5px solid #9d9d9d;
+}
+
+.infoContent .tab-content {
+  padding: 0 1rem;
+}
+
+.infoContent .tab-content .row > div {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.infoContent .card {
+  -webkit-box-shadow: 0 1px 10px #eee;
+          box-shadow: 0 1px 10px #eee;
+  margin: 0 0 1.5rem;
+  border: none;
+}
+
+.infoContent .card__bgImg {
+  height: 145px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+      justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+      align-items: center;
+  -webkit-box-pack: center;
+}
+
+.infoContent .card-body {
+  padding: 0.5rem 1rem;
+}
+
+.infoContent .card__title {
+  font-size: 1.125rem;
+  -webkit-box-orient: vertical;
+  box-orient: vertical;
+  -webkit-line-clamp: 2;
+  height: calc(18px * 2 * 1.5);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  font-weight: bold;
+  margin: 0.5rem 0;
+  color: #727679;
+}
+
+.infoContent .card__tag {
+  margin: 0 0.2rem 0 0;
+}
+
+.infoContent .company__block {
+  margin: 0 0 2rem;
+}
+
+.infoContent .company__title {
+  color: #AAAAAA;
+  font-size: 1.125rem;
+  font-weight: bold;
+}
+
+.infoContent .company__text {
+  color: #43484C;
+}
+
+.infoContent__navBlock {
+  padding-top: 0rem;
+}
+
+.infoContent__navBlock.tab_sticky + .tab-content {
+  padding-top: 60.8px;
+}
+
+.freeCall {
+  position: fixed;
+  bottom: 78px;
+  z-index: 11;
+  width: 100%;
+  text-align: center;
+  background: -webkit-gradient(linear, left top, left bottom, from(rgba(244, 244, 244, 0.9)), to(rgba(244, 244, 244, 0.9)));
+  background: linear-gradient(180deg, rgba(244, 244, 244, 0.9) 0%, rgba(244, 244, 244, 0.9) 100%);
+}
+
+.freeCall__btn {
+  color: #fff;
+  background-color: #EE7800;
+  border-color: #EE7800;
+}
+
+.fixed-btn {
+  position: fixed;
+  right: 15px;
+  bottom: 5.5rem;
+  z-index: 15;
+}
+
+@media (min-width: 480px) {
+  .fixed-btn {
+    bottom: 5rem;
+  }
+}
+
+.fixed-btn .btn-gotop {
+  padding: 1rem .65rem;
+  background-color: rgba(255, 255, 255, 0.897);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+/*# sourceMappingURL=list-style-mb.css.map */

sass/list-style-mb.scss

@@ -0,0 +1,652 @@
+$horizontal: 480px;
+body {
+    font-family: 'Helvetica Neue';
+}
+a:focus {
+    outline: none;
+}
+a:focus-visible {
+    outline: none;
+}
+button:focus-visible {
+    outline: none;
+}
+img:focus-visible  {
+    outline: none;
+}
+
+a {
+    text-decoration: none;
+}
+
+.text-hhh {
+    color: #EE7800;
+}
+
+.navbar {
+    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
+    -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
+    -moz-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
+    padding-top: 5px;
+    padding-bottom: 5px;
+    background-color: white !important;
+    z-index: 99;
+    &-toggler {
+        padding-left: 0;
+        border-color: transparent !important;
+        &:focus {
+            box-shadow: none;
+        }
+    }
+    &-toggler-icon {
+        display: flex;
+        justify-items: center;
+        i {
+            font-size: 25px;
+            line-height: 30px;
+            display: inline-block;
+        }
+    }
+    &-search {
+        padding-right: 2px;
+    }
+    &-brand {
+        font-size: 1.5rem;
+    }
+}
+
+.navbar-main.sticky {
+    position: fixed;
+    top: 0;
+    width: 100%;
+}
+
+.navbar-main.sticky + .sec-01 {
+    padding-top: 58px;
+}
+
+.fixed_menu {
+    height: 78px;
+    position: fixed;
+    z-index: 4;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: #fff;
+    box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    -moz-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    //padding-bottom: 16px;
+    @media (min-width: $horizontal) {
+        height: 50px;
+    }
+    .row {
+        @media (min-width: $horizontal) {
+            height: 50px;
+        } 
+    }
+    &__box {
+        @media (min-width: $horizontal) {
+            width: 100%;
+            height: 100%;
+        } 
+        img {
+            &:focus-visible {
+                outline: none;
+            }
+            @media (min-width: $horizontal) {
+                width: 100%;
+                height: 100%;
+            } 
+        }
+    }
+}
+
+.sec-menu {
+    display: none;
+    z-index: 105;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    font-size: 14px;
+    &-block {
+        padding-top: 61px;
+        margin:0;
+        // transform: translateX(-500px);
+        transition: transform .5s;
+        position: fixed;
+        top: 0;
+        left: -100%;
+        right: 0;
+        height: 100%;
+        overflow-y: scroll;
+        max-width: 100%;
+        background-color: white;
+        &.slidein {
+            //transform: translateX(0px);
+            -webkit-animation: slidein 0.3s forwards;
+            
+            animation: slidein 0.3s forwards;
+            
+        }
+        &.slideout {
+            //transform: translateX(0px);
+            -webkit-animation: slideout 0.3s forwards;
+            
+            animation: slideout 0.3s forwards;
+            
+        }
+    }
+    &-list {
+        background: white;
+        margin-bottom: 0;
+        .navbar-nav {
+            padding: 0 2rem;
+            width: 100%;
+            .dropdown-menu {
+                border: none;
+                padding: 0;
+                height: 0;
+                opacity: 0;
+                transition: all 1s;
+                &.show {
+                    height: fit-content;
+                    opacity: 1;
+                }
+                .dropdown-item {
+                    padding-left: 3rem;
+                    &:active, &.active, &:focus {
+                        background-color: white;
+                    }
+                    &:hover {
+                        background-color: white;
+                    }
+                }
+                .sub-menu {
+                    .dropdown-item {
+                        padding-left: 6rem;
+                    }
+                }
+            }
+        }
+        .nav-item {
+            font-size: 17px;
+            display: block;
+            width: 100%;
+        }
+        .nav-link {
+            padding-top: 11px;
+            padding-bottom: 8px;
+            color: #707070;
+            position: relative;
+            .link_div {
+                width: 25px;
+            }
+            a {
+                color: #707070;
+                text-decoration: none;
+            }
+            &.show {
+                i {
+                    transform: rotate(-180deg);
+                }
+            }
+            .expand {
+                position: absolute;
+                right: 10px;
+                i {
+                    font-size: 11px;
+                    color: #D3D3D3;
+                    transition: all .5s;
+                }
+            }
+            &.text-main {
+                color: #EE7800;
+            }
+        }
+        .sub-link {
+            .expand {
+                position: absolute;
+                right: 20px;
+                top: 8px;
+                width: 1.5rem;
+                text-align: center;
+            }
+        }
+        .sub-menu {
+            display: none;
+        }
+        .sub-menu.show {
+            display: block;
+        }
+        hr {
+            margin: 3px 0;
+            background-color: rgb(187, 187, 187);
+        }
+    }
+    &-follows {
+        padding: 2rem 2.5rem;
+        background-color: #e6e6e6ef;
+        margin-top: -9px;
+        &-title {
+            color: #797979;
+            font-size: 14px;
+        }
+    }
+    &-links {
+        margin-bottom: 2.5rem;
+        a {
+            color: #797979;
+            text-decoration: none;
+            display: inline-block;
+            padding: 1px 0;
+            border-bottom: 1px solid #acacac;
+            margin: 0 .6rem;
+            flex-wrap: nowrap;
+            @media screen and(max-width: 385px) {
+                margin: 0 .4rem;
+            }
+        }
+    }
+    .follows-fp {
+        color: #797979;
+        text-decoration: none;
+        font-weight: 400;
+        display: block;
+        padding-left: .5rem;
+        &:nth-of-type(1) {
+            margin-bottom: .6rem;
+        }
+    }
+    .copyright {
+        color: #797979;
+        font-size: 13px;
+    }
+}
+
+@-webkit-keyframes slidein {
+    100% { left: 0; }
+}
+
+@keyframes slidein {
+    100% { left: 0; }
+}
+
+@-webkit-keyframes slideout {
+    100% { left: -100%; }
+}
+
+@keyframes slideout {
+    100% { left: -100%; }
+}
+
+.sec-search {
+    display: none;
+    z-index: 107;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    font-size: 14px;
+    &-block {
+        padding-top: 61px;
+        margin:0;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        width: 100;
+        height: 100%;
+        overflow-y: scroll;
+        background-color: rgba(0, 0, 0, 0.774);
+    }
+    &-list {
+        background-color: #F3F3F3;
+        padding: 1rem;
+        padding-bottom: 1.4rem;
+        hr {
+            background-color: #aaaaaa;
+        }
+    }
+    &-form {
+        width: 100%;
+    }
+    .searchBar {
+        font-size: 17px;
+        padding: .5rem .3rem;
+        display: inline-block;
+        width: 88%;
+        outline: none;
+        border: 2px solid #EE7800;
+        border-radius: 5px;
+    }
+    .searchBtn {
+        outline: none;
+        border: none;
+        background-color: transparent;
+        display: inline-block;
+        width: 10%;
+    }
+    &-hots {
+        padding: 1rem;
+        background-color: white;
+        box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
+        &__title {
+            color: #AAAAAA;
+            font-size: 18px;
+            font-weight: 400;
+            padding-top: .5rem;
+        }
+        &__link {
+            display: inline-block;
+            text-decoration: none;
+            color: #797979;
+            border: 1px solid #797979;
+            border-radius: 3rem;
+            padding: .3rem .5rem;
+            margin-right: .8rem;
+            margin-bottom: .8rem;
+            &:hover {
+                color: #797979;
+            }
+        }
+    }
+}
+
+.sec-login {
+    display: none;
+    z-index: 109;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    font-size: 14px;
+    &-block {
+        padding-top: 61px;
+        margin:0;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        width: 100;
+        height: 100%;
+        overflow-y: hidden;
+        background-color: #F3F3F3;
+    }
+    &-list {
+        background-color: #F3F3F3;
+        padding: 1rem;
+        padding-bottom: 1.4rem;
+        hr {
+            background-color: #aaaaaa;
+        }
+    }
+    &-btns {
+        padding: 1rem;
+        background-color: white;
+        box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
+    }
+}
+
+
+.text-main {
+    color: #EE7800;
+}
+
+.text-phone {
+    color: #EA068C;
+    text-decoration: none;
+}
+
+.bg-white {
+  background-color: #fff;
+}
+.mb__hero {
+  margin-top: calc(52px);
+  &__bgImg {
+    height: 240px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+  }
+}
+
+.mb__content {
+  background-color: rgba(244, 244, 244, 0.8);
+}
+
+.other {
+    display: none;
+}
+
+.mb__infoCard {
+  color: #727679;
+  text-align: center;
+  padding: 1rem;
+  background-color: rgba(244, 244, 244, 0.8);
+  margin: 3rem 0 0;
+  &__name, &__span {
+    font-size: 1.25rem;
+    color: #43484C;
+    font-weight: bold;
+  }
+  &__span {
+      font-size: 1rem;
+  }
+  &__cmy {
+      font-size: 1.125rem;
+      font-weight: 400;
+  }
+  &__avatar {
+    width: 188px;
+    height: 188px;
+    position: absolute;
+    top: -120px;
+    border: 3px solid #FFF;
+    border-radius: 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  &__seo {
+    font-size: 1.12rem;
+    text-align: center;
+    padding: 1rem;
+    display: block;
+    line-height: 1.2;
+    font-weight: 400;
+  }
+  &__approve {
+    color: #FF0000;
+  }
+  &__more {
+    color: #FFAC73;
+    text-align: center;
+    cursor: pointer;
+  }
+  &__detail {
+    aside {
+        line-height: 2;
+        font-size: 1rem;
+    }
+    &__l {
+        flex-basis: 30%;
+        display: flex;
+        justify-content: flex-end;
+        flex-grow: 0;
+        max-width: 30%;
+        &.title {
+            color: #AAAAAA;
+            font-size: 1.125rem;
+            font-weight: bold;
+            transform: translateX(-15px);
+        }
+    }
+    &__r {
+        flex-basis: 70%;
+        text-align: start;
+        flex-grow: 0;
+        max-width: 70%;
+        word-break: break-all;
+    }
+    
+}
+.scMedia {
+    display: flex;
+    padding: 1rem 0;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    justify-content: space-around;
+    a {
+        width: 16%;
+        img {
+            width: 100%;
+        }
+    }
+}
+}
+
+.infoContent {
+  a {
+      color: #727679;
+      text-decoration: none;
+      font-size: .9rem;
+      &.active {
+          color: #EE7800;
+      }
+  }
+  &__navBlock {
+      &.tab_sticky {
+        position: fixed;
+        top: 60px;
+        width: 100%;
+        z-index: 12;
+    }
+  }
+  .nav-item {
+      margin: 0;
+      width: 25%;
+      text-align: center;
+      &-link {
+          display: block;
+          padding: 1rem 0.5rem;
+          text-decoration: none;
+          background-color: transparent;
+          font-size: .9rem;
+          color: #727679;
+          text-align: center;
+          font-size: 1.12rem;
+          &.active {
+              color: #EE7800;
+              border-bottom: 2px solid #EE7800;
+          }
+      }
+  }
+  .likeSee {
+      &__divider {
+          height: 12px;
+          display: inline-block;
+          border: 0.5px solid #9d9d9d;
+      }
+  }
+  .tab-content {
+      padding: 0 1rem;
+  }
+  .tab-content .row > div {
+      padding-left: 5px;
+      padding-right: 5px;
+  }
+  .card {
+      box-shadow: 0 1px 10px #eee;
+      margin: 0 0 1.5rem;
+      border: none;
+      &__bgImg {
+          height: 145px;
+          background-repeat: no-repeat;
+          background-size: cover;
+          background-position: center;
+          position: relative;
+          display: flex;
+          justify-content: center;
+          -webkit-box-align: center;
+          align-items: center;
+          -webkit-box-pack: center;
+      }
+      &-body {
+          padding: 0.5rem 1rem;
+      }
+      &__title {
+          font-size: 1.125rem;
+          -webkit-box-orient: vertical;
+          box-orient: vertical;
+          -webkit-line-clamp: 2;
+          height: calc(18px * 2 * 1.5);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          font-weight: bold;
+          margin: 0.5rem 0;
+          color: #727679;
+      }
+      &__tag {
+          margin: 0 0.2rem 0 0;
+      }
+  }
+  .company {
+      &__block {
+          margin: 0 0 2rem;
+      }
+      &__title {
+          color: #AAAAAA;
+          font-size: 1.125rem;
+          font-weight: bold;
+      }
+      &__text {
+          color: #43484C;
+      }
+  }
+}
+.infoContent__navBlock {
+    padding-top: 0rem;
+}
+.infoContent__navBlock.tab_sticky + .tab-content {
+    padding-top: 60.8px;
+}
+
+.freeCall {
+    position: fixed;
+    bottom: 78px;
+    z-index: 11;
+    width: 100%;
+    text-align: center;
+    background: linear-gradient(180deg, rgba(244, 244, 244, 0.9) 0%, rgba(244, 244, 244, 0.9) 100%);
+    &__btn {
+        color: #fff;
+        background-color: #EE7800;
+        border-color: #EE7800;
+    }
+}
+
+.fixed-btn {
+    position: fixed;
+    right: 15px;
+    bottom: 5.5rem;
+    z-index: 15;
+    @media (min-width: $horizontal) {
+        bottom: 5rem;
+    } 
+    .btn-gotop {
+        
+        padding: 1rem .65rem;
+        background-color: rgba(255, 255, 255, 0.897);
+        display: flex;
+        align-items: center;
+        box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+        -webkit-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+        -moz-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+    }
+        
+}

sass/main.css

@@ -1085,6 +1085,140 @@ img:focus-visible {
           box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
 }
 
+.sec-match {
+  display: none;
+  z-index: 109;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  font-size: 14px;
+}
+
+.sec-match-block {
+  padding-top: 61px;
+  margin: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100;
+  height: 100%;
+  overflow-y: hidden;
+  background-color: white;
+}
+
+.sec-match-list {
+  background-color: white;
+  padding: 1rem;
+  padding-bottom: 1.4rem;
+}
+
+.sec-match-btns {
+  padding: 1rem;
+  background-color: white;
+  -webkit-box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
+          box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
+}
+
+.sec-match p {
+  color: #707070;
+}
+
+.sec-match__imgfr {
+  width: 100%;
+  height: 14rem;
+  background-position: center;
+  background-size: cover;
+}
+
+.sec-match__designer {
+  width: 80%;
+  height: 12rem;
+  background-position: center;
+  background-size: cover;
+  border-radius: 50%;
+}
+
+.sec-match .btn-match {
+  outline: none;
+  border: none;
+  color: #EE7800;
+  border: 1px solid #EE7800;
+  background-color: transparent;
+  border-radius: 10px;
+  padding: .3rem .6rem;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+}
+
+.sec-match .btn-match:hover {
+  background-color: #EE7800;
+  color: white;
+}
+
+.sec-match .container__row {
+  border-bottom: 1px solid #B2B2B2;
+}
+
+.sec-match .container__row:last-of-type {
+  border-bottom: none;
+}
+
+.sec-result {
+  padding: .5rem;
+}
+
+.sec-result p {
+  color: #707070;
+}
+
+.sec-result__imgfr {
+  width: 90%;
+  height: 18rem;
+  background-image: url(https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_244_01.jpg);
+  background-position: center;
+  background-size: cover;
+}
+
+.sec-result__designer {
+  background-image: url(https://cloud.hhh.com.tw/upload/_hdesigner/img_path_611_20190318172644.jpg);
+  width: 6rem;
+  height: 6rem;
+  background-position: center;
+  background-size: cover;
+  border-radius: 50%;
+}
+
+.sec-result .btn-match {
+  outline: none;
+  border: none;
+  color: #EE7800;
+  border: 1px solid #EE7800;
+  background-color: transparent;
+  padding: .4rem .8rem;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+}
+
+.sec-result .btn-match:hover {
+  background-color: #EE7800;
+  color: white;
+}
+
+.sec-result .container__row {
+  border: 1px solid #B2B2B2;
+  margin-bottom: 1rem;
+}
+
+.sec-result__consulting {
+  color: #707070;
+}
+
+.sec-result__num {
+  color: #EE7800;
+}
+
 .sec-favor {
   display: block;
   z-index: 111;
@@ -1354,7 +1488,7 @@ img:focus-visible {
   }
 }
 
-.fixed-btn .btn-gotop {
+.fixed-btn .btn-gotop, .fixed-btn .btn-match {
   padding: 1.2rem .8rem;
   background-color: rgba(255, 255, 255, 0.897);
   display: -webkit-box;
@@ -1367,4 +1501,53 @@ img:focus-visible {
   -webkit-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   -moz-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
+
+.fixed-btn .btn-match {
+  padding: .4rem .2rem;
+  background-color: white;
+  font-size: 1em;
+  word-spacing: 5px;
+  width: 57px;
+  text-align: center;
+  position: relative;
+  background-color: #EE7800;
+  color: white;
+}
+
+.match__next {
+  outline: none;
+  border: none;
+  background-color: #EE7800;
+  border-radius: .3rem;
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+  color: white;
+}
+
+.match__next2, .last-step {
+  outline: none;
+  border: none;
+  background-color: #EE7800;
+  border-radius: .3rem;
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+  color: white;
+}
+
+.btn-call {
+  color: #EA068C;
+  padding: .6rem 1.5rem;
+  border: 1px solid #EA068C;
+  border-radius: 2rem;
+  background-color: transparent;
+  text-decoration: none;
+}
+
+.btn-call:hover {
+  color: #EA068C;
+}
+
+.small {
+  font-size: .7rem;
+}
 /*# sourceMappingURL=main.css.map */

sass/main.scss

@@ -903,6 +903,121 @@ img:focus-visible  {
     }
 }
 
+.sec-match {
+    display: none;
+    z-index: 109;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    font-size: 14px;
+    &-block {
+        padding-top: 61px;
+        margin:0;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        width: 100;
+        height: 100%;
+        overflow-y: hidden;
+        background-color: white;
+    }
+    &-list {
+        background-color: white;
+        padding: 1rem;
+        padding-bottom: 1.4rem;
+    }
+    &-btns {
+        padding: 1rem;
+        background-color: white;
+        box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
+    }
+    p {
+        color: #707070;
+    }
+    &__imgfr {
+        width: 100%;
+        height: 14rem;
+        // background-image: url(https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_244_01.jpg);
+        background-position: center;
+        background-size: cover;
+    }
+    &__designer {
+        // background-image: url(https://cloud.hhh.com.tw/upload/_hdesigner/img_path_611_20190318172644.jpg);
+        width: 80%;
+        height: 12rem;
+        background-position: center;
+        background-size: cover;
+        border-radius: 50%;
+    }
+    .btn-match {
+        outline: none;
+        border: none;
+        color: #EE7800;
+        border: 1px solid #EE7800;
+        background-color: transparent;
+        border-radius: 10px;
+        padding: .3rem .6rem;
+        transition: all .3s;
+        &:hover {
+            background-color: #EE7800;
+            color: white;
+        }
+    }
+    .container__row {
+        border-bottom: 1px solid #B2B2B2;
+        &:last-of-type {
+            border-bottom: none;
+        }
+    }
+}
+
+.sec-result {
+    padding: .5rem;
+    p {
+        color: #707070;
+    }
+    &__imgfr {
+        width: 90%;
+        height: 18rem;
+        background-image: url(https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_244_01.jpg);
+        background-position: center;
+        background-size: cover;
+    }
+    &__designer {
+        background-image: url(https://cloud.hhh.com.tw/upload/_hdesigner/img_path_611_20190318172644.jpg);
+        width: 6rem;
+        height: 6rem;
+        background-position: center;
+        background-size: cover;
+        border-radius: 50%;
+    }
+    .btn-match {
+        outline: none;
+        border: none;
+        color: #EE7800;
+        border: 1px solid #EE7800;
+        background-color: transparent;
+        padding: .4rem .8rem;
+        transition: all .3s;
+        &:hover {
+            background-color: #EE7800;
+            color: white;
+        }
+    }
+    .container__row {
+        border: 1px solid #B2B2B2;
+        margin-bottom: 1rem;
+    }
+    &__consulting {
+        color: #707070;
+    }
+    &__num {
+        color: #EE7800;
+    }
+}
+
 .sec-favor {
     display: block;
     z-index: 111;
@@ -1121,7 +1236,7 @@ img:focus-visible  {
     @media (min-width: $horizontal) {
         bottom: 5rem;
     } 
-    .btn-gotop {
+    .btn-gotop, .btn-match {
         padding: 1.2rem .8rem;
         background-color: rgba(255, 255, 255, 0.897);
         display: flex;
@@ -1130,7 +1245,54 @@ img:focus-visible  {
         -webkit-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
         -moz-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
     }
-        
+    .btn-match {
+        padding: .4rem .2rem;
+        background-color: white;
+        font-size: 1em;
+        word-spacing: 5px;
+        width: 57px;
+        text-align: center;
+        position: relative;
+        background-color: #EE7800;
+        color: white;
+    }   
+}
+
+.match__next {
+    outline: none;
+    border: none;
+    background-color: #EE7800;
+    border-radius: .3rem;
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    color: white;
+}
+
+
+.match__next2, .last-step {
+    outline: none;
+    border: none;
+    background-color: #EE7800;
+    border-radius: .3rem;
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    color: white;
+}
+
+.btn-call {
+    color: #EA068C;
+    padding: .6rem 1.5rem;
+    border: 1px solid #EA068C;
+    border-radius: 2rem;
+    background-color: transparent;
+    text-decoration: none;
+    &:hover {
+        color: #EA068C;
+    }
+}
+ 
+.small {
+    font-size: .7rem;
 }