syuanyuri
/
calculator_request


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251
							<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Google Tag Manager -->
  <script>(function (w, d, s, l, i) {
      w[l] = w[l] || []; w[l].push({
        'gtm.start':
          new Date().getTime(), event: 'gtm.js'
      }); var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-W3RJHTZ');</script>
  <!-- End Google Tag Manager -->

  <!-- Google tag (gtag.js)  ga4-->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-97LXHMH1GQ"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-97LXHMH1GQ');


  </script>

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <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="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:description"
    content="不知道裝潢費用怎麼抓？滿足您幸福空間裝潢預算需求的最佳方案！內建裝潢價格計算機，輸入您的裝修預算需求與坪數，立即獲得量身定制的裝潢估價 ，並享受幸福經紀人的諮詢服務。" />
  <meta property="og:site_name" content="幸福空間" />
  <!-- <meta property="og:title" content="幸福空間 - 裝修預算需求單" /> -->
  <meta property="og:title" content="裝潢預算怎麼抓？2024裝修費用評估試算-幸福空間" />
  <meta property="og:type" content="website" />
  <meta property="og:locale" content="zh_TW" />

  <!-- <title>幸福空間 - 裝修預算需求單</title> -->
  <title>裝潢預算怎麼抓？2024裝修費用評估試算-幸福空間</title>

  <link rel="icon" href="/hhh_index/images/favicon.ico" />
  <link rel="stylesheet" href="hhh_index/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="hhh_index/css/slick.css" />
  <link rel="stylesheet" type="text/css" href="hhh_index/css/slick-theme.css" />
  <!-- <link rel="stylesheet" href="hhh_index/css/list-style.css" /> -->
  <link rel="stylesheet" href="./css/style.css?a=ggog2" />
  <link rel="stylesheet" href="./css/request.css?v=goggg2" />
  <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500&display=swap" rel="stylesheet" />

  <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "LocalBusiness",
        "@id": "https://hhh.com.tw/",
        "image": ["https://hhh.com.tw/_nuxt/img/def1b0a.svg"],
        "name": "幸福空間股份有限公司",
        "address": "110台北市信義區菸廠路88號五樓之6",
        "url": "https://hhh.com.tw/",
        "telephone": "+886-2-6617-0123"
      }
    </script>

  <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "Organization",
        "url": "https://hhh.com.tw/",
        "logo": "https://hhh.com.tw/_nuxt/img/def1b0a.svg",
        "name": "幸福空間",
        "sameAs": [
          "https://www.facebook.com/hhhfb/",
          "https://page.line.me/ovs4341s",
          "https://www.youtube.com/user/gorgeousspace",
          "https://www.instagram.com/gorgeous_space/"
        ],
        "contactPoint": [
          {
            "@type": "ContactPoint",
            "areaServed": "TW",
            "telephone": "+886-2-6617-0123",
            "contactType": "customer service",
            "availableLanguage": "Chinese"
          }
        ]
      }
    </script>

  <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "name": "幸福空間－室內設計、裝修裝潢、居家生活、影音平台",
        "author": "幸福空間",
        "url": "https://hhh.com.tw/",
        "potentialAction": {
          "@type": "SearchAction",
          "target": "https://hhh.com.tw/search/lists/case/{search_term_string}-keyword/",
          "query-input": "required name=search_term_string"
        }
      }
    </script>
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [{
        "@type": "Question",
        "name": "Q1:如何挑選優質室內設計公司?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": " 1. 室內設計公司是否為政府合法立案：可以到經濟部商業司或是內政部營建署「全國建築管理資訊系統入口網」的【室內裝修業登記查詢】網站上做查詢。
                    2. 室內設計公司與室內設計師是否持有室內裝修證照：如室內裝修工程管理乙級執照，未有證照就進行施工是違法的行為，請務必要當心。
                    3. 室內設計公司的專業能力與態度：洽談過程中，可透過提供圖面初步了解設計師技術與空間配置功力，並了解過往經驗與作品風格是否是自己喜歡的。"
        }
      }, {
        "@type": "Question",
        "name": "Q2:裝潢需要申請室內裝修許可嗎?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "依據「內政部營建署」所列的建築物室內裝修管理辦法第三條，室內裝修的行為包含以下幾點，但不包括壁紙、壁布、窗簾、家具、活動隔屏、地氈等之黏貼及擺設。
                    1. 固著於建築物構造體之天花板裝修。
                    2. 內部牆面裝修。
                    3. 高度超過地板面1.2公尺以上，固定之隔屏裝修或兼作櫥櫃使用之隔屏裝修。
                    4. 分間牆之變更。
                    換句話說，只要動到天花板、牆壁、固定式隔間的室內裝修行為幾乎都要申請。一般都是委託室內設計公司或建築師事務所，向當地主管機關申請室內裝修審查。"}
        }, {
        "@type": "Question",
        "name": "Q3:裝潢費用有哪些?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "一般來說，一個完整的裝修費用包含「設計費」、「工程費」及「監工費」，其中設計費取決於室內設計師個人的經歷、名氣、公司規模或是難易度，而有不同的計價方式；工程費則會因為選用的建材或是施工方法不同產生很大的價差，至於監工費部分通常為總工程款的5%～10%。"}
        }, {
        "@type": "Question",
        "name": "Q4:裝潢預算配置怎麼抓?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "在評估預算時，主要可分為四大項目，包括室內設計與裝潢工程、家電設備、家具以及軟裝佈置。室內設計與裝潢工程的費用通常佔據最大比例，約占總預算的60%至65%左右。至於家電設備和家具，建議各佔預算的15%。剩餘的5%至10%則可用於軟裝家飾的採購。"}
        }, {
        "@type": "Question",
        "name": "Q5:裝潢費用一坪多少?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "新成屋的裝潢報價大約在3萬至5萬元/坪之間，而中古屋的報價為6萬至8萬元/坪，老屋翻新的報價則在7萬至10萬元/坪，少數老舊房屋的報價甚至可能達到12萬元/坪。對於對裝潢品質有更高要求者，可能需要更多的預算。一般都會建議中古屋、老屋翻新要預留5~10%的預算做彈性調整。"}
        }, {
        "@type": "Question",
        "name": "Q6:老屋翻新預算怎麼抓?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "基本上，老屋翻新的施工項目大致分為基礎工程、裝潢工程及裝飾工程三大項目，在分配預算時，建議使用總預算的40%施作基礎工程，30%執行裝潢工程，30%進行裝飾工程。建議在評估預算時要規劃10%~15%的追加款，以備不時之需。"}
        }, {
        "@type": "Question",
        "name": "Q7:老屋翻新補助有哪些?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "政府為補助房屋修繕費用主要有三種方案：內政部「修繕住宅貸款利息補貼」及「簡易修繕住宅費用補貼」、地方政府「老屋修繕補助」。"}
        }, {
        "@type": "Question",
        "name": "Q8:老屋翻新補助的申辦條件是什麼?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "內政部提供的房屋修繕住宅補助針對10年以上老屋，約在每年7～8月間開放民眾申請。根據修繕住宅貸款利息補貼或簡易修繕住宅費用補貼評點基準採「評點制度」審核，若超過名額則公開抽籤。「修繕住宅貸款利息補貼」及「簡易修繕住宅費用補貼」的申請流程、文件、項目皆相同。"}
        }, {
        "@type": "Question",
        "name": "Q9:老屋翻新的補助結果哪裡查詢？",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "政府會在審查後1個月內將結果或補件通知，寄送至戶籍地址、通訊地址或修繕住宅地址，申請者需注意此3個地址的收件情形，以免錯過政府通知結果。"}
        }, {
        "@type": "Question",
        "name": "Q10:預售屋客變流程有哪些?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "建議於購入預售屋後，立刻向建設公司索取建築圖(格局)、水電圖(弱電、燈光迴路、給排水、消防)等完整電子檔，並先找設計師開始進行規劃，才不會來不及因應後續的客變時間。若決定找設計師協助，客變流程大概會細分為以下幾個流程：
            1. 向建設公司索取建築圖與水電圖電子檔
            2. 找設計師規劃客變內容
            3. 於建商通知可客變時，會同設計師、建設公司共同討論客變項目
            4. 建設公司修改圖面
            5. 討論並確認圖面
            6. 簽名確認圖面及加減帳明細
            7. 施工
            8. 完工驗收（攜帶最後完整建築圖與水電圖面，與設計師、建商共同驗收）
            9. 修改驗屋缺失
            10. 確認驗屋缺失已修正
            11. 三方簽名確認
            12. 交屋
            "}
        }, {
        "@type": "Question",
        "name": "Q11:裝潢一定要請設計師嗎?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "如果你對設計和裝潢沒有太多經驗，建議找一位擁有豐富經驗和美感的室內設計師可以節省你的時間和精力，讓整個裝潢過程更加順利。
            1.  省時省力： 室內設計師可以幫助您整合各方面需求，制定合理的設計方案，並統籌管理施工進度，讓您省心省力。
            2.  專業施工品質： 室內設計師擁有豐富的專業知識和經驗，可以確保施工品質符合您的要求。 
            3.  合理的裝修預算規劃： 室內設計師可以根據您的需求和預算，制定合理的設計方案和施工方案，幫助您有效控制成本。
            小編建議與設計師溝通時，可提供具體的風格照片、案例，溝通起來更有效率喔！"}
        }, {
        "@type": "Question",
        "name": "Q12:裝潢可以自己找統包商嗎?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "裝潢是一項專業性強、耗時費力的工程。如果您選擇自行承包，可能會面臨以下挑戰：
            1.  缺乏專業知識和經驗： 室內設計涉及多個專業領域，包括櫃體結構、動線規劃、施工流程、材料選購等。如果您沒有相關知識和經驗，可能會導致施工過程中出現各種問題，從而延長工期、降低施工品質。
            2.  難以掌控施工進度： 在自行承包的情況下，您需要親自跟進施工進度，這對於首次購屋者或繁忙的上班族來說可能是一項不小的負擔。
            3.  無法有效控制裝修預算： 由於缺乏專業知識和經驗，您可能難以準確估算施工成本，從而導致預算超支。
            "}
        }, {
        "@type": "Question",
        "name": "Q13:廚房設計的裝修預算怎麼抓？",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "廚房設計的裝修費用受到多種因素的影響，包括廚房大小、格局改動程度、水電管線是否需要重新配置、廚具品牌、材質等。一般來說，每坪廚房設計價格在3,000至12,000元之間。
對於常見的2至4坪廚房空間，如果格局改動不大且水電管線不需要重新配置，包含基本廚具的報價通常在10萬至15萬元之間。如果需要進行較大幅度的格局改動或重新配置水電管線，報價則會相應提高，大約在30萬至50萬元之間。"}
        }
      ]
    }
    </script>
</head>

<body style="overflow-x: hidden" id="top" class="wholeBody">
  <!-- 表單頁面 -->
  <div class="container-fluid request-content px-0">
    <div class="d-block d-md-none py-3">
      <a href="https://hhh.com.tw/" class="logo">
        <img alt="logo" src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" />
      </a>
    </div>
    <div class="d-flex flex-column flex-md-row w-100">
      <div class="main px-0">
        <div class="info-block">
          <section class="headline">
            <h2>
              您有裝修設計需求？ <br> 想了解裝修預算方案？
            </h2>
            <h3>
              填寫您的裝修需求，立即獲得裝修計算方案與幸福經紀人專人服務
            </h3>
          </section>
          <!-- <section>
            <h2>
              幸福空間 15 週年慶 <br> 想裝修？叫幸福空間送！
            </h2>
            <h3>
              填寫您的裝修需求，完成諮詢就有機會獲得免費裝修一套唷~商品價值超過37萬！ <br>
              即日起～8/16
            </h3>
          </section> -->

          <div class="ad-list d-none d-md-block">
            <p>您是裝修新手？歡迎參考</p>
            <!-- 單張廣告圖 -->
            <!-- <div class="img-item">
              <a href="https://hhh.style/hh07yaeye" target="_blank">
                <img src="./img/main-ad.jpg" alt="">
              </a>
            </div> -->
            <!-- 兩張廣告圖 -->
            <div class="img-item">

              <a href="https://hhh.com.tw/deco/" target="_blank" class="d-block w-100">
                <img src="./img/p1.jpg" alt="">
              </a>
              <!--暫時隱藏 心動活動到2023/12/3~2023/12/30-->
              <!-- <a href="https://promote.hhh.com.tw/hueiyeh-28403?utm_source=FB&utm_medium=GS&utm_campaign=hueiyeh#%E7%BF%BB%E7%89%8C%E9%81%8A%E6%88%B2"
                target="_blank" class="d-block w-100">
                <img src="./img/231229_輝葉第三波活動製作_664x180.jpg" alt="">
              </a> -->


              <!--         <a href="https://event.hhh.com.tw/agent/index.html" target="_blank" class="d-block w-100">
                <img src="./img/p2.jpg" alt="">
              </a> -->
              <a href="https://homeinspection.leju.com.tw/?utm_source=Google&utm_medium=Keywords&utm_campaign=homeinspection&gad_source=1&gclid=CjwKCAjww_iwBhApEiwAuG6ccOw8p8Bj3fcBK_LLSEsXZzXZwdytgpDI_Tb4BQqUi-Go_NVWQS_1shoCKWgQAvD_BwE"
                target="_blank" class="d-block w-100">
                <img src="./img/樂居.jpg" alt="">
              </a>
            </div>
          </div>
        </div>

        <div class="d-flex img-block">
          <div class="img-slider">
            <div data-anime="infinite-01" data-anime-direction="up" data-anime-duration="100">
              <div class="img-slider-list">
                <img src="./img/banner-01.png" alt="">
              </div>
              <div class="img-slider-list">
                <img src="./img/banner-02.png" alt="">
              </div>
              <div class="img-slider-list">
                <img src="./img/banner-03.png" alt="">
              </div>
              <div class="img-slider-list">
                <img src="./img/banner-05.png" alt="">
              </div>
              <div class="img-slider-list">
                <img src="./img/banner-06.png" alt="">
              </div>
            </div>
          </div>
          <div class="img-slider">
            <div data-anime="infinite-02" data-anime-direction="up" data-anime-duration="100">
              <div class="img-slider-list">
                <img src="./img/banner-04.png" alt="">
              </div>
              <div class="img-slider-list">
                <img src="./img/banner-05.png" alt="">
              </div>
              <div class="img-slider-list">
                <img src="./img/banner-06.png" alt="">
              </div>
              <div class="img-slider-list">
                <img src="./img/banner-08.png" alt="">
              </div>
              <div class="img-slider-list">
                <img src="./img/banner-09.png" alt="">
              </div>
            </div>
          </div>
          <div class="img-slider">
            <div data-anime="infinite-03" data-anime-direction="up" data-anime-duration="100">
              <div class="img-slider-list">
                <img src="./img/banner-07.png" alt="">
              </div>
              <div class="img-slider-list">
                <img src="./img/banner-08.png" alt="">
              </div>
              <div class="img-slider-list">
                <img src="./img/banner-09.png" alt="">
              </div>
              <div class="img-slider-list">
                <img src="./img/banner-02.png" alt="">
              </div>
              <div class="img-slider-list">
                <img src="./img/banner-03.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card form-block">
        <card-title class="d-none d-md-block">
          <a href="https://hhh.com.tw/" class="logo">
            <img alt="logo" src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" />
          </a>
        </card-title>
        <div class="card-body">
          <form>
            <div class="mb-3">
              <label for="name" class="form-label">姓名*</label>
              <input type="text" class="form-control" id="name" placeholder="請輸入姓名">
              <div class="name invalid-feedback">
                請輸入姓名，不超過 10 字元
              </div>
            </div>

            <div class="mb-3">
              <label for="phone" class="form-label">手機*</label>
              <input type="tel" class="form-control" id="phone" placeholder="請輸入手機號碼 0900-000-000" maxlength="12">
              <div class="phone invalid-feedback">
                請輸入完整手機號碼，不超過 10 字元
              </div>
            </div>

            <div class="mb-3">
              <label for="email" class="form-label">Email</label>
              <input type="text" class="form-control" id="email" placeholder="請輸入 E-mail 信箱">
              <div class="email invalid-feedback">
                請檢查 E-mail 格式
              </div>
            </div>

            <div class="mb-3">
              <label for="city" class="form-label">裝修所在地*</label>
              <select class="form-select" aria-label="select region" id="city">
                <option value="" disabled selected>請選擇裝修所在縣市</option>
                <option value="基隆市">基隆市</option>
                <option value="台北市">台北市</option>
                <option value="新北市">新北市</option>
                <option value="桃園市">桃園市</option>
                <option value="新竹市">新竹市</option>
                <option value="新竹縣">新竹縣</option>
                <option value="苗栗縣">苗栗縣</option>
                <option value="台中市">台中市</option>
                <option value="彰化縣">彰化縣</option>
                <option value="南投縣">南投縣</option>
                <option value="雲林縣">雲林縣</option>
                <option value="嘉義市">嘉義市</option>
                <option value="嘉義縣">嘉義縣</option>
                <option value="台南市">台南市</option>
                <option value="高雄市">高雄市</option>
                <option value="屏東縣">屏東縣</option>
                <option value="宜蘭縣">宜蘭縣</option>
                <option value="花蓮縣">花蓮縣</option>
                <option value="台東縣">台東縣</option>
              </select>
              <div class="city invalid-feedback">
                請選擇您所要裝修地點所在縣市
              </div>
            </div>

            <div class="mb-3 square-footage">
              <label for="area" class="form-label">坪數*</label>
              <input type="text" class="form-control" id="area" placeholder="請輸入室內裝修坪數">
              <!-- <p>坪</p> -->
              <div class="area invalid-feedback">
                請輸入正確坪數
              </div>
            </div>

            <div class="mb-3">
              <label for="name" class="form-label">裝修類型*</label>
              <div class="d-flex type-items">
                <input type="radio" id="type_1" name="type_options">
                <label for="type_1" class="ms-2 custom-control-label">
                  <div class="d-flex align-items-center">
                    <span class="d-flex flex-column">
                      <h4 class="title">
                        輕裝修
                      </h4>
                      <p>
                        適合新成屋
                      </p>
                    </span>
                    <small>
                      不更動房間格局、含系統櫃、軟裝、地板工程等
                    </small>
                  </div>
                </label>
              </div>
              <div class="d-flex type-items my-2">
                <input type="radio" id="type_2" name="type_options">
                <label for="type_2" class="ms-2 custom-control-label">
                  <div class="d-flex align-items-center">
                    <span class="d-flex flex-column">
                      <h4>
                        全室裝修
                      </h4>
                      <p>
                        適合毛胚屋、<br>老屋翻新
                      </p>
                    </span>
                    <small>
                      不更動房間格局，含系統櫃、油漆、地板工程等
                    </small>
                  </div>
                </label>
              </div>
              <div class="d-flex type-items">
                <input type="radio" id="type_3" name="type_options">
                <label for="type_3" class="ms-2 custom-control-label">
                  <div class="d-flex align-items-center">
                    <span class="d-flex flex-column">
                      <h4>
                        局部裝修
                      </h4>
                    </span>
                    <small>
                      只針對室內特定區域裝修，如廚房、衛浴空間等
                    </small>
                  </div>
                </label>
              </div>

              <div class="type invalid-feedback">
                請輸入正確坪數請選擇裝修類型
              </div>
            </div>

            <div class="mb-3 pt-1 form-check d-flex justify-content-center">
              <input class="form-check-input" type="checkbox" value="" id="marketing_consent" checked>
              <label class="form-check-label ms-2 d-flex align-items-center" for="marketing_consent">
                我同意收到幸福空間裝修設計訊息
              </label>
            </div>

            <button type="submit" class="btn btn-primary w-100 submit">查看預算方案並與我聯繫</button>

            <p class="disclaimer">
              送出即表示您已閱讀並同意 <a href="https://hhh.com.tw/about/privacy_policy/" target="_blank">免責聲明與隱私使用條款</a>
            </p>

            <div class="accordion solution-accordion mt-5" id="accordionExample">
              <div class="accordion-item">
                <h2 class="accordion-header" id="heading_1">
                  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_1"
                    aria-expanded="true" aria-controls="collapse_1" data-ga="Q1_button">
                    Q1 如何挑選優質室內設計公司?
                  </button>
                </h2>
                <div id="collapse_1" class="accordion-collapse collapse show" aria-labelledby="heading_1"
                  data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                    1. 室內設計公司是否為政府合法立案：可以到經濟部商業司或是內政部營建署「全國建築管理資訊系統入口網」的【室內裝修業登記查詢】網站上做查詢。<br>
                    2. 室內設計公司與室內設計師是否持有室內裝修證照：如室內裝修工程管理乙級執照，未有證照就進行施工是違法的行為，請務必要當心。<br>
                    3. 室內設計公司的專業能力與態度：洽談過程中，可透過提供圖面初步了解設計師技術與空間配置功力，並了解過往經驗與作品風格是否是自己喜歡的。<br>
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h2 class="accordion-header" id="heading_2">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapse_2" aria-expanded="true" aria-controls="collapse_2" data-ga="Q2_button">
                    Q2 裝潢需要申請室內裝修許可嗎?
                  </button>
                </h2>
                <div id="collapse_2" class="accordion-collapse collapse" aria-labelledby="heading_2"
                  data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                    依據「內政部營建署」所列的建築物室內裝修管理辦法第三條，室內裝修的行為包含以下幾點，但不包括壁紙、壁布、窗簾、家具、活動隔屏、地氈等之黏貼及擺設。<br>
                    1. 固著於建築物構造體之天花板裝修。<br>
                    2. 內部牆面裝修。<br>
                    3. 高度超過地板面1.2公尺以上，固定之隔屏裝修或兼作櫥櫃使用之隔屏裝修。<br>
                    4. 分間牆之變更。<br>
                    換句話說，只要動到天花板、牆壁、固定式隔間的室內裝修行為幾乎都要申請。一般都是委託室內設計公司或建築師事務所，向當地主管機關申請室內裝修審查。<br>
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h2 class="accordion-header" id="heading_3">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapse_3" aria-expanded="true" aria-controls="collapse_3" data-ga="Q3_button">
                    Q3 裝潢費用有哪些?
                  </button>
                </h2>
                <div id="collapse_3" class="accordion-collapse collapse" aria-labelledby="heading_3"
                  data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                    一般來說，一個完整的裝修費用包含「設計費」、「工程費」及「監工費」，其中設計費取決於室內設計師個人的經歷、名氣、公司規模或是難易度，而有不同的計價方式；工程費則會因為選用的建材或是施工方法不同產生很大的價差，至於監工費部分通常為總工程款的5%～10%
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h2 class="accordion-header" id="heading_4">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapse_4" aria-expanded="true" aria-controls="collapse_4" data-ga="Q4_button">
                    Q4 裝潢預算配置怎麼抓?
                  </button>
                </h2>
                <div id="collapse_4" class="accordion-collapse collapse" aria-labelledby="heading_4"
                  data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                    在評估預算時，主要可分為四大項目，包括室內設計與裝潢工程、家電設備、家具以及軟裝佈置。室內設計與裝潢工程的費用通常佔據最大比例，約占總預算的60%至65%左右。至於家電設備和家具，建議各佔預算的15%。剩餘的5%至10%則可用於軟裝家飾的採購。
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h2 class="accordion-header" id="heading_5">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapse_5" aria-expanded="true" aria-controls="collapse_5" data-ga="Q5_button">
                    Q5 裝潢費用一坪多少?
                  </button>
                </h2>
                <div id="collapse_5" class="accordion-collapse collapse" aria-labelledby="heading_5"
                  data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                    新成屋的裝潢報價大約在3萬至5萬元/坪之間，而中古屋的報價為6萬至8萬元/坪，老屋翻新的報價則在7萬至10萬元/坪，少數老舊房屋的報價甚至可能達到12萬元/坪。對於對裝潢品質有更高要求者，可能需要更多的預算。一般都會建議中古屋、老屋翻新要預留5~10%的預算做彈性調整。
                  </div>
                </div>
              </div>


              <div class="accordion-item">
                <h2 class="accordion-header" id="heading_6">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapse_6" aria-expanded="true" aria-controls="collapse_6" data-ga="Q6_button">
                    Q6 老屋翻新預算怎麼抓?
                  </button>
                </h2>
                <div id="collapse_6" class="accordion-collapse collapse" aria-labelledby="heading_6"
                  data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                    基本上，老屋翻新的施工項目大致分為基礎工程、裝潢工程及裝飾工程三大項目，在分配預算時，建議使用總預算的40%施作基礎工程，30%執行裝潢工程，30%進行裝飾工程。建議在評估預算時要規劃10%~15%的追加款，以備不時之需。
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h2 class="accordion-header" id="heading_7">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapse_7" aria-expanded="true" aria-controls="collapse_7" data-ga="Q7_button">
                    Q7 老屋翻新補助有哪些?
                  </button>
                </h2>
                <div id="collapse_7" class="accordion-collapse collapse" aria-labelledby="heading_7"
                  data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                    政府為補助房屋修繕費用主要有三種方案：內政部「修繕住宅貸款利息補貼」及「簡易修繕住宅費用補貼」、地方政府「老屋修繕補助」。
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h2 class="accordion-header" id="heading_8">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapse_8" aria-expanded="true" aria-controls="collapse_8" data-ga="Q8_button">
                    Q8 老屋翻新補助的申辦條件是什麼?
                  </button>
                </h2>
                <div id="collapse_8" class="accordion-collapse collapse" aria-labelledby="heading_8"
                  data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                    內政部提供的房屋修繕住宅補助針對10年以上老屋，約在每年7～8月間開放民眾申請。根據修繕住宅貸款利息補貼或簡易修繕住宅費用補貼評點基準採「評點制度」審核，若超過名額則公開抽籤。「修繕住宅貸款利息補貼」及「簡易修繕住宅費用補貼」的申請流程、文件、項目皆相同。
                  </div>
                </div>
              </div>


              <div class="accordion-item">
                <h2 class="accordion-header" id="heading_9">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapse_9" aria-expanded="true" aria-controls="collapse_9" data-ga="Q9_button">
                    Q9 老屋翻新的補助結果哪裡查詢？
                  </button>
                </h2>
                <div id="collapse_9" class="accordion-collapse collapse" aria-labelledby="heading_9"
                  data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                    政府會在審查後1個月內將結果或補件通知，寄送至戶籍地址、通訊地址或修繕住宅地址，申請者需注意此3個地址的收件情形，以免錯過政府通知結果。
                  </div>
                </div>
              </div>


              <div class="accordion-item">
                <h2 class="accordion-header" id="heading_10">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapse_10" aria-expanded="true" aria-controls="collapse_10" data-ga="Q10_button">
                    Q10 預售屋客變流程有哪些?
                  </button>
                </h2>
                <div id="collapse_10" class="accordion-collapse collapse" aria-labelledby="heading_10"
                  data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                    建議於購入預售屋後，立刻向建設公司索取建築圖(格局)、水電圖(弱電、燈光迴路、給排水、消防)等完整電子檔，並先找設計師開始進行規劃，才不會來不及因應後續的客變時間。若決定找設計師協助，客變流程大概會細分為以下幾個流程：<br>
                    1. 向建設公司索取建築圖與水電圖電子檔<br>
                    2. 找設計師規劃客變內容<br>
                    3. 於建商通知可客變時，會同設計師、建設公司共同討論客變項目<br>
                    4. 建設公司修改圖面<br>
                    5. 討論並確認圖面<br>
                    6. 簽名確認圖面及加減帳明細<br>
                    7. 施工<br>
                    8. 完工驗收（攜帶最後完整建築圖與水電圖面，與設計師、建商共同驗收）<br>
                    9. 修改驗屋缺失<br>
                    10. 確認驗屋缺失已修正<br>
                    11. 三方簽名確認<br>
                    12. 交屋<br>
                  </div>
                </div>
              </div>


              <div class="accordion-item">
                <h2 class="accordion-header" id="heading_11">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapse_11" aria-expanded="true" aria-controls="collapse_11" data-ga="Q11_button">
                    Q11 裝潢一定要請設計師嗎?
                  </button>
                </h2>
                <div id="collapse_11" class="accordion-collapse collapse" aria-labelledby="heading_11"
                  data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                    如果你對設計和裝潢沒有太多經驗，建議找一位擁有豐富經驗和美感的室內設計師可以節省你的時間和精力，讓整個裝潢過程更加順利。<br>
                    1. 省時省力： 室內設計師可以幫助您整合各方面需求，制定合理的設計方案，並統籌管理施工進度，讓您省心省力。<br>
                    2. 專業施工品質： 室內設計師擁有豐富的專業知識和經驗，可以確保施工品質符合您的要求。 <br>
                    3. 合理的裝修預算規劃： 室內設計師可以根據您的需求和預算，制定合理的設計方案和施工方案，幫助您有效控制成本。<br>
                    小編建議與設計師溝通時，可提供具體的風格照片、案例，溝通起來更有效率喔！<br>
                  </div>
                </div>
              </div>


              <div class="accordion-item">
                <h2 class="accordion-header" id="heading_12">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapse_12" aria-expanded="true" aria-controls="collapse_12" data-ga="Q12_button">
                    Q12 裝潢可以自己找統包商嗎?
                  </button>
                </h2>
                <div id="collapse_12" class="accordion-collapse collapse" aria-labelledby="heading_12"
                  data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                    裝潢是一項專業性強、耗時費力的工程。如果您選擇自行承包，可能會面臨以下挑戰：<br>
                    1. 缺乏專業知識和經驗： 室內設計涉及多個專業領域，包括櫃體結構、動線規劃、施工流程、材料選購等。如果您沒有相關知識和經驗，可能會導致施工過程中出現各種問題，從而延長工期、降低施工品質。<br>
                    2. 難以掌控施工進度： 在自行承包的情況下，您需要親自跟進施工進度，這對於首次購屋者或繁忙的上班族來說可能是一項不小的負擔。<br>
                    3. 無法有效控制裝修預算： 由於缺乏專業知識和經驗，您可能難以準確估算施工成本，從而導致預算超支。<br>
                  </div>
                </div>
              </div>


              <div class="accordion-item">
                <h2 class="accordion-header" id="heading_13">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapse_13" aria-expanded="true" aria-controls="collapse_13" data-ga="Q13_button">
                    Q13 廚房設計的裝修預算怎麼抓？
                  </button>
                </h2>
                <div id="collapse_13" class="accordion-collapse collapse" aria-labelledby="heading_13"
                  data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                    廚房設計的裝修費用受到多種因素的影響，包括廚房大小、格局改動程度、水電管線是否需要重新配置、廚具品牌、材質等。一般來說，每坪廚房設計價格在3,000至12,000元之間。<br>
                    對於常見的2至4坪廚房空間，如果格局改動不大且水電管線不需要重新配置，包含基本廚具的報價通常在10萬至15萬元之間。如果需要進行較大幅度的格局改動或重新配置水電管線，報價則會相應提高，大約在30萬至50萬元之間。<br>
                  </div>
                </div>
              </div>
              <!-- <div class="accordion-item">
                <h2 class="accordion-header" id="heading_8">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapse_8" aria-expanded="true" aria-controls="collapse_8">
                   老屋翻新預算怎麼抓?
                  </button>
                </h2>
                <div id="collapse_8" class="accordion-collapse collapse" aria-labelledby="heading_8"
                  data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                   基本上，老屋翻新的施工項目大致分為基礎工程、裝潢工程及裝飾工程三大項目，在分配預算時，建議使用總預算的40%施作基礎工程，30%執行裝潢工程，30%進行裝飾工程。建議在評估預算時要規劃10%~15%的追加款，以備不時之需。                 
     </div>
                </div>
              </div> -->
            </div>

          <div class="d-flex justify-content-center mt-3">
            <button class="d-flex align-items-center expand-btn">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
              </svg>
              <p class="ms-2 mb-0">
                全部展開
              </p>
            </button>
          </div>
          </form>


          <div class="ad-list d-block d-md-none">
            <p>您是裝修新手？歡迎參考</p>
            <!-- 單張廣告圖 -->
            <!-- <div class="img-item">
          <a href="https://hhh.style/hh07yaeye" target="_blank">
            <img src="./img/main-ad.jpg" alt="">
          </a>
        </div> -->
            <!-- 兩張廣告圖 -->
            <div class="img-item">

              <a href="https://hhh.com.tw/deco/" target="_blank" class="d-block w-100">
                <img src="./img/p1.jpg?a=2" alt="">
              </a>
              <!-- 暫時隱藏 因為心動活動 到 12/30-->

              <!--               <a href="https://promote.hhh.com.tw/hueiyeh-28403?utm_source=FB&utm_medium=GS&utm_campaign=hueiyeh#%E7%BF%BB%E7%89%8C%E9%81%8A%E6%88%B2"
                target="_blank" class="d-block w-100">
                <img src="./img/231229_輝葉第三波活動製作_664x180.jpg" alt="">
              </a> -->


              <!-- <a href="https://event.hhh.com.tw/agent/index.html" target="_blank" class="d-block w-100">
                <img src="./img/p2.jpg" alt="">
              </a> -->

              <a href="https://homeinspection.leju.com.tw/?utm_source=Google&utm_medium=Keywords&utm_campaign=homeinspection&gad_source=1&gclid=CjwKCAjww_iwBhApEiwAuG6ccOw8p8Bj3fcBK_LLSEsXZzXZwdytgpDI_Tb4BQqUi-Go_NVWQS_1shoCKWgQAvD_BwE"
                target="_blank" class="d-block w-100">
                <img src="./img/樂居.jpg" alt="">
              </a>

            </div>
          </div>
        </div>
      </div>

    </div>


    <div class="loading-block">
      <ul class="spinner">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <p>您的裝修方案預算正在計算中</p>
    </div>
  </div>

  <!-- 動態載入 -->
  <div id="btn-box"></div>
  <div id="footer"></div>

  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W3RJHTZ" height="0" width="0"
      style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->
  <!--
<script>
window.onload = function () {
    if (screen.width < 767) {
       
        window.location.href = `https://m.hhh.com.tw/HHH/calculator_request/index.html`;
    }
}
</script>
-->
  <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 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/chart.js@4.3.0/dist/chart.umd.min.js
  "></script>
  <!-- <script src="./js/index.js?a=ff2"></script> -->
  <script>
    // 若 localStorage 已儲存表單資訊則直接填入(避免重複填單)
    let userData = JSON.parse(localStorage.getItem('calculator_form'));

    if (userData) {
      $('#name').val(userData.name);
      $('#phone').val(userData.phone);
      $('#email').val(userData.email);
      $('#city').val(userData.city);
      $('#area').val(userData.area);
    }

    let imageHeight;

    // 更新圖片高度
    function updateImageHeight() {
      if (window.innerHeight > 1300) {
        // 螢幕高度高於 1300 後動態取得圖片高度 (因圖片高度由 px 改為 vh，避免出現空白)
        imageHeight = document.querySelector('.img-slider-list img').offsetHeight;
      } else {
        imageHeight = 330;
      }
    }

    updateImageHeight();

    let resizeTimer;

    window.addEventListener('resize', () => {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(() => {
        updateImageHeight();
      }, 250); // 延遲 250 毫秒後觸發
    });

    let translateUp = 0;
    let translateDown = -imageHeight; // 起始為第二張圖片
    const slider_1 = document.querySelector('.img-slider [data-anime="infinite-01"]');
    const slider_2 = document.querySelector('.img-slider [data-anime="infinite-02"]');
    const slider_3 = document.querySelector('.img-slider [data-anime="infinite-03"]');

    // 圖片動畫效果(垂直輪播)
    function animateSlider() {
      // 調整每秒移動的距離
      translateUp -= .5; // 圖片往上移動
      translateDown += .5; // 圖片往下移動

      slider_1.style.transform = `translate3d(0, ${translateUp}px, 0)`;
      slider_2.style.transform = `translate3d(0, ${translateDown}px, 0)`;
      slider_3.style.transform = `translate3d(0, ${translateUp}px, 0)`;

      // 往上移動到最後一張時將第一張加至底部
      if (translateUp <= -imageHeight) {
        const firstImage_1 = slider_1.querySelector('.img-slider-list:first-child');
        const firstImage_2 = slider_3.querySelector('.img-slider-list:first-child');
        slider_1.appendChild(firstImage_1);
        slider_3.appendChild(firstImage_2);
        translateUp = 0;
        slider_1.style.transform = `translate3d(0, ${translateUp}px, 0)`;
        slider_3.style.transform = `translate3d(0, ${translateUp}px, 0)`;
      }

      // 往下移動到第一張時將最後一張加至頂部
      if (translateDown >= 0) {
        const lastImage = slider_2.querySelector('.img-slider-list:last-child');
        slider_2.insertBefore(lastImage, slider_2.firstChild);
        translateDown = -imageHeight;
        slider_2.style.transform = `translate3d(0, ${translateDown}px, 0)`;
      }

      requestAnimationFrame(animateSlider); // 根據瀏覽器的刷新率調整動畫的執行時間
    }

    animateSlider();

    let data = {
      name: ""
    }

    // 正則表達式規則
    //let nameRegex = /^[\u4e00-\u9fa5a-zA-Z]{1,10}$/; // 中英文字，最長 10 字元
    let nameRegex = /^[\u4e00-\u9fa5a-zA-Z ]{1,10}$/;
    let phoneRegex = /^09\d{2}-\d{3}-\d{3}$/; // 須符合 0900-000-000 格式
    let emailRegex = /^(?:\s*|[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/; // email 格式
    let areaRegex = /^(?!0$)(?!0\.0$)(?:\d{1,3}(?:\.\d{1,2})?|1000(?:\.0{1,2})?)$/; // 可包含小數點符號，不可為「0」，下限為「1」，上限為「1000」

    // 驗證表單欄位
    function validateField(inputValue, regexPattern) {
      let pattern = new RegExp(regexPattern);
      return pattern.test(inputValue);
    }

    // 判斷裝修類型是否有勾選，無則將 button 設為 disabled
    // if ($('input[name="type_options"]').is(':checked')) {
    //   $('.submit').prop('disabled', false);
    // } else {
    //   $('.submit').prop('disabled', true);
    // }

    $('input[name="type_options"]').on('change', function () {
      $('.submit').prop('disabled', false);
    });

    // 取得驗證狀態後切換 CSS
    function validateState(name, state) {
      if (!state) {
        if (name !== 'city') {
          $(`#${name}`).css({ "color": "#dc3545", "border-color": "#dc3545" });
        } else {
          $(`#${name}`).css({ "border-color": "#dc3545" });
        }
        $(`.${name}.invalid-feedback`).show();

      } else {
        $(`#${name}`).css({ "color": "#000000", "border-color": "#ced4da" });
        $(`.${name}.invalid-feedback`).hide();
      }
    }

    // 驗證所有欄位
    function validateAllFields(fields) {
      let isValid = true;

      fields.forEach(field => {
        const fieldIsValid = validateField(field.value, field.regex);
        validateState(field.id, fieldIsValid);
        if (!fieldIsValid) {
          isValid = false;
        }
      });

      return isValid;
    }

    // 處理表單內容
    $('.request-content form').submit(function (event) {

      // 获取当前网址
      let currentURL = window.location.href;

      // 使用URLSearchParams对象获取查询参数
      let urlSearchParams = new URLSearchParams(window.location.search);

      let utmSource = urlSearchParams.get('utm_source');
      if (utmSource === null) {
        // 如果utm_source不存在，再检查gclid参数是否存在
        var gclidValue = urlSearchParams.get('gclid');
        if (gclidValue !== null) {
          // 如果gclid存在，则将utmSource设为"GoogleAds"
          utmSource = "GoogleAds";
        } else {
          // 如果都不存在，则utmSource设为null
          utmSource = '';
        }
      }

      let utmMedium = urlSearchParams.get('utm_medium') || '';

      let utmCampaign = urlSearchParams.get('utm_campaign') || '';

      //console.log(utmSource,utmMedium,utmCampaign);


      event.preventDefault(); // 阻止表單默認提交行為

      // 取得被選中的選項的 id 值
      const selectedOptionId = document.querySelector('input[name="type_options"]:checked')?.id;

      let name = $('#name').val(); // 姓名
      let phone = $('#phone').val(); // 手機
      let email = $('#email').val(); // Email
      let city = $('#city').val(); // 裝修所在地
      let area = $('#area').val(); // 坪數
      let type = $('input[name="type_options"]:checked').attr('id'); // 裝修類型
      let marketing_consent = $('#marketing_consent').is(':checked') ? '1' : '0'; // 是否同意設計訊息
      let ca_type = '';

      // 需驗證的欄位
      const fields = [
        { id: 'name', value: name, regex: nameRegex },
        { id: 'phone', value: phone, regex: phoneRegex },
        { id: 'email', value: email, regex: emailRegex },
        { id: 'area', value: area, regex: areaRegex },
      ];

      // 檢查所有欄位是否正確
      const allFieldsValid = validateAllFields(fields);

      // 判斷裝修所在地是否選擇
      if (!city) {
        validateState('city', false);
      } else {
        validateState('city', true);
      }

      // 判斷裝修類型是否選擇
      if (type) {
        validateState('type', true);
        if (type === 'type_1') {
          ca_type = '輕裝修';
        } else if (type === 'type_2') {
          ca_type = '全室裝修';
        } else {
          ca_type = '局部裝修';
        }
      } else {
        validateState('type', false);
        return;
      }

      let data = {
        name: name, // 姓名
        phone: phone, // 手機
        email: email, // Email
        city: city, // 裝修所在地
        area: area, // 坪數
        ca_type: ca_type, // 裝修類型
        marketing_consent: marketing_consent, // 是否同意設計訊息
        source: "官網", // 來源(固定值)
        h_class: "無",
        utmSource: utmSource,
        utmMedium: utmMedium,
        utmCampaign: utmCampaign


      };

      console.log('data', data);

      if (allFieldsValid) {
        // 表單驗證成功
        $(".loading-block").css({ display: "flex" }); // 開啟 loading 動畫
        if (data.email.trim() !== "") {

          send_email_customer(data);

        }

        send_email_sale(data);
        insertRequest(data);
      } else {
        // 表單驗證失敗
        return;
      }
    });

    let resultData = {};
    function send_email_sale(data) {
      $.ajax({
        method: "post",
        url: "https://m3.hhh.com.tw:18670/SendMail_to_sales",
        data: JSON.stringify(data),
        contentType: "application/json",
      }).done((response) => {

        console.log('send to sales')
      });

    }
    function send_email_customer(data) {
      $.ajax({
        method: "post",
        url: "https://m3.hhh.com.tw:18670/SendMail_to_customer",
        data: JSON.stringify(data),
        contentType: "application/json",
      }).done((response) => {

        console.log('send to customer')
      });

    }


    function insertRequest(data) {
      $.ajax({
        method: "post",
        url: "https://m3.hhh.com.tw:18670/insert_calculator_request",
        data: JSON.stringify(data),
        contentType: "application/json",
      }).done((response) => {
        console.log('response', response);

        dataLayer.push({
          'event': 'Request_Send',
          'btn_location': 'Calculator_Request_Page'
        });

        resultData = response;
        console.log('response', response);
        localStorage.setItem("calculator_form", JSON.stringify(data)); // 儲存表單內容
        localStorage.setItem("calculator_result", JSON.stringify(resultData)); // 儲存運算結果
        setTimeout(() => {
          $(".loading-block").css({ display: "none" }); // 關閉 loading 動畫
          window.location.href = "https://hhh.com.tw/calculator_request/result.html"; // 跳轉至結果頁面
          // $('.result-content').show(); // 結果頁
          // $('.request-content').hide(); // 填單頁
          // setValue(data.ca_type);
        }, 1000)
      }).fail((error) => {
        $(".loading-block").css({ display: "none" });
        console.log('error', error);
      });
    }

    // $('.request-content form #phone').on('input', function () {
    //   let phoneNumber = $(this).val();
    //   let formattedNumber = formatPhoneNumber(phoneNumber);
    //   $(this).val(formattedNumber);
    // });

    // // 輸入號碼時自動填入分隔「-」
    // function formatPhoneNumber(phoneNumber) {
    //   phoneNumber = phoneNumber.replace(/-/g, ''); // 移除現有的「-」

    //   // 檢查號碼長度並加入「-」
    //   if (phoneNumber.length >= 4 && phoneNumber.length < 7) {
    //     phoneNumber = phoneNumber.slice(0, 4) + '-' + phoneNumber.slice(4);
    //   } else if (phoneNumber.length >= 7) {
    //     phoneNumber = phoneNumber.slice(0, 4) + '-' + phoneNumber.slice(4, 7) + '-' + phoneNumber.slice(7);
    //   }

    //   return phoneNumber;
    // }

    $('.request-content form #phone').keyup(function () {
      addDashes(this);
    });

    let count = true;

    function addDashes(el) {
      let val = $(el).val().replace('-', '');

      if (val.length === 5) {
        let finalVal = val.match(/.{1,4}/g).join('-');
        $(el).val(finalVal);
      } else if (val.length === 7 && count) {
        $(el).val(`${$(el).val()}-`);
      } else {
        count = true;
      }

      if ($(el).val().charAt($(el).val().length - 1) === '-') {
        $(el).val().replace('-', '')
        count = false;
      }
    }

    const typeInputs = document.querySelectorAll('[name="type_options"]');
    // 切換裝修類型的 radio border
    typeInputs.forEach(function (typeInput) {
      typeInput.addEventListener('change', function (event) {
        const typeItems = this.closest('.type-items'); // 取得當前 radio 最近的 type-items
        const allTypeItems = document.querySelectorAll('.type-items');

        if (event.target.checked) {
          typeItems.style.borderColor = '#EE751B'; // checked 狀態切換顏色

          // 將其他的 borderColor 取消
          allTypeItems.forEach((item) => {
            if (item !== typeItems) {
              item.style.borderColor = '';
            }
          });
        }
      });
    });


  </script>

  <script> //2024/05/27新增FAQ按鈕點擊GA
    for (let i = 1; i <= 13; i++) {
      document.querySelector(`button[data-ga="Q${i}_button"]`).addEventListener('click', function () {
        dataLayer.push({
          'event': `calculator_request_Q${i}_button`,
          'btn_location': 'FixedBTN'
        });
      });
    }
  </script>

  <script>


    // 发送GA事件
    dataLayer.push({
      'event': 'calculator_request_PageView',
      'page_location': 'specific_page'
    });

    // 发送Facebook Pixel事件
    fbq('trackCustom', 'calculator_request_PageView');
  </script>>


</body>

</html>