hhh_index_dev/hhh_index/template/nav.html

<!-- 手機版 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top navbar-mb d-block d-lg-none">
  <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>

<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 designers-nav">
        <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="hhh_index/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="hhh_index/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="hhh_index/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="hhh_index/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="hhh_index/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="hhh_index/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="hhh_index/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="hhh_index/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="hhh_index/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="hhh_index/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="hhh_index/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="hhh_index/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="hhh_index/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="hhh_index/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="hhh_index/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="hhh_index/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="hhh_index/images/menu/fb.svg" alt="" class="d-inline-block"></a>
        <a href="https://line.me/ti/p/%40ovs4341s"><img src="hhh_index/images/menu/line.svg" alt="" class="d-inline-block"></a>
        <a href="https://www.youtube.com/user/gorgeousspace"><img src="hhh_index/images/menu/youtube.svg" alt=""
            class="d-inline-block"></a>
        <a href="https://www.instagram.com/gorgeous_space/"><img src="hhh_index/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="hhh_index/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="hhh_index/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>

<!-- 電腦版 -->
<nav class="toolbar v-toolbar v-toolbar--fixed theme--light navbar-main sticky-top d-none d-lg-block" data-booted="true"
  style="margin-top: 0px; padding-right: 0px; padding-left: 0px; transform: translateY(0px);">
  <div class="v-toolbar__content" style="height: 64px;">
    <div class="layout toolbar__content align-center v-toolbar__content_nav_box justify-content-between">
      <a href="https://hhh.com.tw/"><img alt="logo" src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" width="140"
          class="logo"></a>
      <nav class="navbar navbar-expand-lg navbar-light justify-content-between shadow-none hidden-sm-and-down">
        <div class="navbar-collapse-block">
          <div id="navbarSupportedContent" class="collapse navbar-collapse justify-content-center">
            <ul class="navbar-nav w-100 justify-content-between">
              <li class="nav-item"><a href="https://shop.hhh.com.tw/" target="_blank"
                  class="nav-link text-promote-color">+好物</a></li>
              <li class="nav-item"><a href="https://hhh.com.tw/about/calculator/" target="_blank"
                  class="nav-link text-promote-color">估預算</a></li>
              <li class="nav-item dropdown"><a href="https://hhh.com.tw/photos/index/" target=""
                  class="nav-link text-promote-color">找風格</a>
                <ul class="dropdown-menu dropdown-level-width">
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2">
                      <a href="https://hhh.com.tw/photos/lists/nordic-style/" class="submenu dropdown-item">北歐風</a>
                    </div>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/photos/lists/modern-style/" class="submenu dropdown-item">現代風</a>
                    </div>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/photos/lists/industry-style/" class="submenu dropdown-item">工業風</a>
                    </div>
                  </li>
                </ul>
              </li>
              <li class="nav-item dropdown"><a href="https://hhh.com.tw/cases/lists/" target="" data-toggle="dropdown"
                  class="nav-link">挑設計</a>
                <ul class="dropdown-menu dropdown-level-width">
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/cases/lists/small-ctype/" class="submenu dropdown-item">小坪數</a></div>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/cases/lists/renovation-condition/"
                        class="submenu dropdown-item">老屋翻新</a></div>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/search/lists/case/%E9%A2%A8%E6%B0%B4-keyword/"
                        class="submenu dropdown-item">風水</a></div>
                  </li>
                </ul>
              </li>
              <li class="nav-item dropdown"><a href="https://hhh.com.tw/videos/lists/" target="" data-toggle="dropdown"
                  class="nav-link">看影音</a>
                <ul class="dropdown-menu dropdown-level-width">
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/videos/lists/" class="submenu dropdown-item">發燒影音</a></div>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/video-list-5945tw.php" class="submenu dropdown-item">呼叫師傅</a></div>
                  </li>
                </ul>
              </li>
              <li class="nav-item dropdown"><a href="https://hhh.com.tw/designers/lists/" target=""
                  data-toggle="dropdown" class="nav-link">設計師</a>
                <ul class="dropdown-menu dropdown-level-width">
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/designers/lists/" class="submenu dropdown-item">設計師總覽</a></div>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://event.hhh.com.tw/2023-Most-Favorite-Designers/index.php" target="_blank"
                        class="submenu dropdown-item">觀眾最愛設計師</a></div>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://event.hhh.com.tw/2023trends/" target="_blank"
                        class="submenu dropdown-item">大師有約</a></div>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://event.hhh.com.tw/topglory/" target="_blank"
                        class="submenu dropdown-item">Glory國際大賞</a></div>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/event170427/" target="_blank" class="submenu dropdown-item">老屋翻新</a>
                    </div>
                  </li>
                </ul>
              </li>
              <li class="nav-item dropdown"><a href="https://hhh.com.tw/columns/lists/all-columntypea/" target=""
                  data-toggle="dropdown" class="nav-link">專欄文章</a>
                <ul class="dropdown-menu dropdown-level-width">
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/columns/lists/editorchoose-columntypea/" target=""
                        class="submenu dropdown-item">編輯精選</a> <i aria-hidden="true"
                        class="v-icon fa fa-angle-right theme--light" style="font-size: 14px;"></i></div>
                    <ul class="thdmenu-block dropdown-menu dropdown-level-width px-3 py-2">
                      <li><a href="https://hhh.com.tw/columns/lists/editorchoose-columntypea/hometrends-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">居家趨勢</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/editorchoose-columntypea/hotrank-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">人氣排行</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/editorchoose-columntypea/archdesign-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">建築設計</a></li>
                      <li><a
                          href="https://hhh.com.tw/columns/lists/editorchoose-columntypea/styleselection-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">風格選店</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/editorchoose-columntypea/charitable-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">公益活動</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/editorchoose-columntypea/exhibition-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">展演資訊</a></li>
                    </ul>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/columns/lists/housedesign-columntypea/" target=""
                        class="submenu dropdown-item">居家設計</a> <i aria-hidden="true"
                        class="v-icon fa fa-angle-right theme--light" style="font-size: 14px;"></i></div>
                    <ul class="thdmenu-block dropdown-menu dropdown-level-width px-3 py-2">
                      <li><a href="https://hhh.com.tw/columns/lists/housedesign-columntypea/smallhouse-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">小宅規劃</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/housedesign-columntypea/oldhouse-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">老屋翻新</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/housedesign-columntypea/stylebuild-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">風格營造</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/housedesign-columntypea/color-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">配色佈置</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/housedesign-columntypea/goodhouse-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">好宅特輯</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/housedesign-columntypea/proposal-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">設計提案</a></li>
                    </ul>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/columns/lists/decoration-columntypea/" target=""
                        class="submenu dropdown-item">裝修前線</a> <i aria-hidden="true"
                        class="v-icon fa fa-angle-right theme--light" style="font-size: 14px;"></i></div>
                    <ul class="thdmenu-block dropdown-menu dropdown-level-width px-3 py-2">
                      <li><a href="https://hhh.com.tw/columns/lists/decoration-columntypea/news-columntypeb/" target=""
                          class="dropdown-item px-3 py-2">新聞最前線</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/decoration-columntypea/allocation-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">預算分配</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/decoration-columntypea/process-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">施工流程</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/decoration-columntypea/knowledge-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">建材知識</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/decoration-columntypea/decorating-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">裝潢撇步</a></li>
                    </ul>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/columns/lists/plus-columntypea/" target=""
                        class="submenu dropdown-item">生活PLUS</a> <i aria-hidden="true"
                        class="v-icon fa fa-angle-right theme--light" style="font-size: 14px;"></i></div>
                    <ul class="thdmenu-block dropdown-menu dropdown-level-width px-3 py-2">
                      <li><a href="https://hhh.com.tw/columns/lists/plus-columntypea/fengshui-columntypeb/" target=""
                          class="dropdown-item px-3 py-2">居家風水</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/plus-columntypea/housekeeping-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">家事清潔</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/plus-columntypea/storageskills-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">收納技巧</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/plus-columntypea/renovation-columntypeb/" target=""
                          class="dropdown-item px-3 py-2">改造修繕</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/plus-columntypea/retire-columntypeb/" target=""
                          class="dropdown-item px-3 py-2">退休好幸福</a></li>
                    </ul>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/columns/lists/gooditem-columntypea/" target=""
                        class="submenu dropdown-item">品牌好物</a> <i aria-hidden="true"
                        class="v-icon fa fa-angle-right theme--light" style="font-size: 14px;"></i></div>
                    <ul class="thdmenu-block dropdown-menu dropdown-level-width px-3 py-2">
                      <li><a href="https://hhh.com.tw/columns/lists/gooditem-columntypea/furnishings-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">家具家飾</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/gooditem-columntypea/appliances-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">美型家電</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/gooditem-columntypea/recommend-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">推薦廚衛</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/gooditem-columntypea/homegoods-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">居家好物</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/gooditem-columntypea/quality-columntypeb/" target=""
                          class="dropdown-item px-3 py-2">優質建材</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/gooditem-columntypea/brandnews-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">品牌新訊</a></li>
                    </ul>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/columns/lists/focus-columntypea/" target=""
                        class="submenu dropdown-item">房市焦點</a> <i aria-hidden="true"
                        class="v-icon fa fa-angle-right theme--light" style="font-size: 14px;"></i></div>
                    <ul class="thdmenu-block dropdown-menu dropdown-level-width px-3 py-2">
                      <li><a href="https://hhh.com.tw/columns/lists/focus-columntypea/housingnews-columntypeb/"
                          target="" class="dropdown-item px-3 py-2">房市新聞</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/focus-columntypea/specsearch-columntypeb/" target=""
                          class="dropdown-item px-3 py-2">建案特搜</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/focus-columntypea/buyandsell-columntypeb/" target=""
                          class="dropdown-item px-3 py-2">買屋賣屋</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/focus-columntypea/mortgage-columntypeb/" target=""
                          class="dropdown-item px-3 py-2">房貸稅務</a></li>
                      <li><a href="https://hhh.com.tw/columns/lists/focus-columntypea/renting-columntypeb/" target=""
                          class="dropdown-item px-3 py-2">租房須知</a></li>
                    </ul>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/topic/lists/1-page/new-sort/" target=""
                        class="submenu dropdown-item">主題企劃</a>
                    </div>
                  </li>
                </ul>
              </li>
              <li class="nav-item dropdown"><a href="https://hhh.com.tw/products/lists/" target=""
                  data-toggle="dropdown" class="nav-link">居家商品</a>
                <ul class="dropdown-menu dropdown-level-width">
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/products/lists/" class="submenu dropdown-item">商品總覽</a></div>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/products/lists/furniture-pcategorya/"
                        class="submenu dropdown-item">傢俱</a></div>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/products/lists/household-pcategorya/"
                        class="submenu dropdown-item">家電</a></div>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/products/lists/kitchen-pcategorya/"
                        class="submenu dropdown-item">廚房</a></div>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/products/lists/bathroom-pcategorya/"
                        class="submenu dropdown-item">衛浴</a></div>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/products/lists/lighting-pcategorya/"
                        class="submenu dropdown-item">照明</a></div>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/brands/lists/" class="submenu dropdown-item">品牌總覽</a></div>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://hhh.com.tw/brand-index.php?brand_id=194" target="_blank"
                        class="submenu dropdown-item">軟裝佈置</a></div>
                  </li>
                  <li class="dropdown-sub">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2"><a
                        href="https://event.hhh.com.tw/2021-Top-Brands/index.php" target="_blank"
                        class="submenu dropdown-item">消費者愛用品牌</a></div>
                  </li>
                </ul>
              </li>
              <li class="nav-item"><a href="https://hhh.com.tw/builder/lists/" target="" class="nav-link">新建案</a></li>
            </ul>
          </div>
        </div>
      </nav>
      <div class="navbar-brand navbar-login ms-2 d-flex align-items-center m-0" id="app_user">
        <!-- <div class="v-btn d-flex align-items-center justify-content-center">
          <div class="navbar-brand navbar-login ms-2 d-flex align-items-center m-0">
            <a href="https://hhh.com.tw/login/index">登入 / 註冊</a>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</nav>

<script>
  window.addEventListener("scroll", fixedOnScroll);
  function fixedOnScroll() {
    if (window.pageYOffset >= 344) {
      document.querySelector("#navbar").classList.add("sticky");
    } else {
      document.querySelector("#navbar").classList.remove("sticky");
    }
  }

  /* 漢堡選單收合 */
  $(".navbar-toggler").click(function () {
    console.log('click');
    $(".sec-menu").css("display", "block");
    $(".wholeBody").css("overflow-y", "hidden");
    $(".sec-menu-block").animate(
      {
        left: "0",
      },
      300
    );
  });

  $(".navbar-back").click(function () {
    $(".wholeBody").css("overflow-y", "scroll");
    $(".sec-menu-block").css("left", "-100%");
    setTimeout(() => {
      $(".sec-menu").css("display", "none");
    }, 300);
  });
</script>