首頁 探索 說明
註冊 登入
choozmo
/
hhh-home-mb
2
0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
目錄樹: 1c3e5786c2
分支列表 標籤列表
hhh-home-mb
/
quiz-test.html

quiz-test.html 117 KB
文件歷史 原始文件

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    5. 

  5. <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no">
    6. 

  6. <title>【預售屋客變教學】客變改什麼？你必須了解的6件事</title>
    7. 

  7. <meta http-equiv="imagetoolbar" content="false">
    8. 

  8. <meta http-equiv="pragma" content="cache">
    9. 

  9. <meta name="company" content="幸福空間">
    10. 

  10. <meta name="copyright" content="2007 © 幸福空間 │ All Rights Reserved.">
    11. 

  11. <meta name="creation-date" content="2018-12-12 04:04:04 GTM+8">
    12. 

  12. <meta name="description" content="買房是人生一大要事，不少人會陷入思考，究竟要買新屋還是中古屋比較好，而新屋的屋況中，除了新成屋，還有預售屋跟毛胚屋等，其中不少民眾會擇購買預售屋，因為預售屋的分期付款壓力較低，議價空間也較有彈性，最大的優點是可以「客變」，能省下很多裝修費用。說到這，你可能會好奇，客變意思是什麼、客變流程有哪些、什麼是客變圖、為什麼客變能省錢、具體客變方式有哪些、客變注意事項又有什麼等諸多問題。《幸福空間》在這裡統整關於客變，大家最常詢問的6大問題，現在就繼續看下去，解開腦中的所有問號吧！">
    13. 

  13. <meta name="distribution" content="Taiwan">
    14. 

  14. <meta name="keywords" content="">
    15. 

  15. <meta name="revisit-after" content="1 days">
    16. 

  16. <meta name="robots" content="all">
    17. 

  17. <meta name="format-detection" content="telephone=no">
    18. 

  18. <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    19. 

  19. <meta property="fb:admins" content="100004637466842" />
    20. 

  20. <meta property="fb:pages" content="191820036010" />
    21. 

  21. <meta property="fb:app_id" content="582473075602626" />
    22. 

  22. <meta property="og:description" content="買房是人生一大要事，不少人會陷入思考，究竟要買新屋還是中古屋比較好，而新屋的屋況中，除了新成屋，還有預售屋跟毛胚屋等，其中不少民眾會擇購買預售屋，因為預售屋的分期付款壓力較低，議價空間也較有彈性，最大的優點是可以「客變」，能省下很多裝修費用。說到這，你可能會好奇，客變意思是什麼、客變流程有哪些、什麼是客變圖、為什麼客變能省錢、具體客變方式有哪些、客變注意事項又有什麼等諸多問題。《幸福空間》在這裡統整關於客變，大家最常詢問的6大問題，現在就繼續看下去，解開腦中的所有問號吧！" />
    23. 

  23. <meta property="og:image" content="https://images.hhh.com.tw/uploads/_hcolumn/column_4300_1628151497.jpg" />
    24. 

  24. <meta property="og:site_name" content="幸福空間" />
    25. 

  25. <meta property="og:title" content="【預售屋客變全攻略】客變改什麼？你必須了解的6件事 - 幸福空間 " />
    26. 

  26. <meta property="og:type" content="website" />
    27. 

  27. <meta property="og:url" content="https://hhh.com.tw/columns/detail/4300/" />
    28. 

  28. <meta property="og:locale" content="zh_TW">
    29. 

  29. <meta name="twitter:card" content="summary">
    30. 

  30. <meta name="twitter:site" content="@幸福空間">
    31. 

  31. <meta name="twitter:title" content="【預售屋客變全攻略】客變改什麼？你必須了解的6件事 - 幸福空間 ">
    32. 

  32. <meta name="twitter:description" content="買房是人生一大要事，不少人會陷入思考，究竟要買新屋還是中古屋比較好，而新屋的屋況中，除了新成屋，還有預售屋跟毛胚屋等，其中不少民眾會擇購買預售屋，因為預售屋的分期付款壓力較低，議價空間也較有彈性，最大的優點是可以「客變」，能省下很多裝修費用。說到這，你可能會好奇，客變意思是什麼、客變流程有哪些、什麼是客變圖、為什麼客變能省錢、具體客變方式有哪些、客變注意事項又有什麼等諸多問題。《幸福空間》在這裡統整關於客變，大家最常詢問的6大問題，現在就繼續看下去，解開腦中的所有問號吧！">
    33. 

  33. <meta name="twitter:creator" content="幸福空間">
    34. 

  34. <meta name="twitter:image" content="https://hhh.com.tw/images/logo-232x44.png">
    35. 

  35. <script src="/cdn-cgi/apps/head/vjHZ9ZstoGopMjAWtYYtYy59chw.js"></script><script src="/cdn-cgi/apps/head/vjHZ9ZstoGopMjAWtYYtYy59chw.js"></script><script type="application/ld+json">[
    36. 

  36. {
    37. 

  37. "@context": "https://schema.org",
    38. 

  38. "@type": "FAQPage",
    39. 

  39. "mainEntity": [{
    40. 

  40. "@type": "Question",
    41. 

  41. "name": "什麼是客變?",
    42. 

  42. "acceptedAnswer": {
    43. 

  43. "@type": "Answer",
    44. 

  44. "text": "預售屋所指的是還沒開始建造或正在興建中就開始販售的房屋。這種類型的房子議價空間較大，且具有格局變動彈性，對資金不充裕的人來說，常被視為不錯的選擇。而「客變」也只會發生在預售屋上，客變意思顧名思義就是意指「客戶變更」，也就是在房屋「未建成」之前變更「格局規劃」，請建商在不影響結構安全的前提下，調整內部格局、水電管線配置遷移或更換建材、廚房衛浴設備等，若消費者能把握此階段搶得先機，預先設定好未來的居住型態，便能省下日後敲牆、換建材、換設備等多餘的支出。而為了方便施工，建商通常規定只能做一次變更，也會規定買家必須在一定期間內申請，否則就不得再提出，以免延誤工期。若本身為裝修新手，想藉此打造更貼近生活需求的空間，可找尋專業設計師幫忙規劃，避免重複施工，產生更多花費。"
    45. 

  45. }
    46. 

  46. }, {
    47. 

  47. "@type": "Question",
    48. 

  48. "name": "所有的地方都能進行客變嗎?",
    49. 

  49. "acceptedAnswer": {
    50. 

  50. "@type": "Answer",
    51. 

  51. "text": "有些地方是無法更改：1、房子外觀：窗戶、大門及陽台的位置；2、承重牆、柱；3、管道：水管、天然氣管、糞管（由此可知，廁所、廚房的位置也不能變）"
    52. 

  52. }}]
    53. 

  53. }
    54. 

  54. ]
    55. 

  55. </script>
    56. 

  56. <script src="/cdn-cgi/apps/head/vjHZ9ZstoGopMjAWtYYtYy59chw.js"></script><script src="/assets/js/jquery-3.4.1.min.js"></script>
    57. 

  57. <link rel="icon" href="/assets/images/favicon.ico">
    58. 

  58. <link rel="stylesheet" href="/assets/font-awesome-4.7.0/css/font-awesome.min.css">
    59. 

  59. <link rel="stylesheet" href="/assets/css/all.css?v=1637659767">
    60. 

  60. <link rel="stylesheet" href="/assets/css/main.css?v=1637659767">
    61. 

  61. <link rel="stylesheet" href="/assets/css/top_banner/top_banner.css">
    62. 

  62. <link rel="stylesheet" href="/assets/css/policy.css">
    63. 

  63. <link rel="stylesheet" type="text/css" href="/assets/js/loadmask/jquery.loadmask.css" media="screen" />
    64. 

  64. <link rel="stylesheet" href="/assets/css/swiper.min.css">
    65. 

  65. <script src="/assets/js/swiper.min.js"></script>
    66. 

  66. <link rel="alternate" href="https://m.hhh.com.tw/columns/detail/4300/" />
    67. 

  67. <script type="text/javascript">
    68. 

  68.         _atrk_opts = {
    69. 

  69.             atrk_acct: "WblFi1a8Dy00OP",
    70. 

  70.             domain: "hhh.com.tw",
    71. 

  71.             dynamic: true
    72. 

  72.         };
    73. 

  73.         (function () {
    74. 

  74.             var as = document.createElement('script');
    75. 

  75.             as.type = 'text/javascript';
    76. 

  76.             as.async = true;
    77. 

  77.             as.src = "https://certify-js.alexametrics.com/atrk.js";
    78. 

  78.             var s = document.getElementsByTagName('script')[0];
    79. 

  79.             s.parentNode.insertBefore(as, s);
    80. 

  80.         })();
    81. 

  81.     </script>
    82. 

  82. <noscript><img src="https://certify.alexametrics.com/atrk.gif?account=WblFi1a8Dy00OP" style="display:none" height="1" width="1" alt=""/></noscript>
    83. 

  83. <script>
    84. 

  84.         !function (f, b, e, v, n, t, s) {
    85. 

  85.             if (f.fbq) return;
    86. 

  86.             n = f.fbq = function () {
    87. 

  87.                 n.callMethod ?
    88. 

  88.                     n.callMethod.apply(n, arguments) : n.queue.push(arguments)
    89. 

  89.             };
    90. 

  90.             if (!f._fbq) f._fbq = n;
    91. 

  91.             n.push = n;
    92. 

  92.             n.loaded = !0;
    93. 

  93.             n.version = '2.0';
    94. 

  94.             n.queue = [];
    95. 

  95.             t = b.createElement(e);
    96. 

  96.             t.async = !0;
    97. 

  97.             t.src = v;
    98. 

  98.             s = b.getElementsByTagName(e)[0];
    99. 

  99.             s.parentNode.insertBefore(t, s)
    100. 

  100.         }(window, document, 'script',
    101. 

  101.             'https://connect.facebook.net/en_US/fbevents.js');
    102. 

  102.         fbq('init', '585285442299590');
    103. 

  103.         fbq('track', 'PageView');
    104. 

  104.     </script>
    105. 

  105. <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=585285442299590&ev=PageView&noscript=1"/></noscript>
    106. 

  106. <script>
    107. 

  107.         var _comscore = _comscore || [];
    108. 

  108.         _comscore.push({
    109. 

  109.             c1: "2",
    110. 

  110.             c2: "17934019"
    111. 

  111.         });
    112. 

  112.         (function () {
    113. 

  113.             var s = document.createElement("script"),
    114. 

  114.                 el = document.getElementsByTagName("script")[0];
    115. 

  115.             s.async = true;
    116. 

  116.             s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js";
    117. 

  117.             el.parentNode.insertBefore(s, el);
    118. 

  118.         })();
    119. 

  119.     </script>
    120. 

  120. <script>
    121. 

  121.         var uid = 0;
    122. 

  122.         if (uid != '0') {
    123. 

  123.             window.ga = window.ga || function () {
    124. 

  124.                 (ga.q = ga.q || []).push(arguments)
    125. 

  125.             };
    126. 

  126.             ga.l = +new Date;
    127. 

  127.             if (window.location.href.indexOf('stage') == -1) {
    128. 

  128.                 ga('create', 'UA-133449203-1', 'auto');
    129. 

  129.                 ga('set', 'userId', 0);
    130. 

  130.                 ga('send', 'event', 'HHH_USER', '/columns/detail/4300/');
    131. 

  131.             }
    132. 

  132.         }
    133. 

  133.     </script>
    134. 

  134. <script>
    135. 

  135.             (function (h, o, t, j, a, r) {
    136. 

  136.                 h.hj = h.hj || function () {
    137. 

  137.                     (h.hj.q = h.hj.q || []).push(arguments)
    138. 

  138.                 };
    139. 

  139.                 h._hjSettings = {hjid: 1878896, hjsv: 6};
    140. 

  140.                 a = o.getElementsByTagName('head')[0];
    141. 

  141.                 r = o.createElement('script');
    142. 

  142.                 r.async = 1;
    143. 

  143.                 r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
    144. 

  144.                 a.appendChild(r);
    145. 

  145.             })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
    146. 

  146.         </script>
    147. 

  147. <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    148. 

  148.                 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    149. 

  149.             j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    150. 

  150.             'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    151. 

  151.         })(window,document,'script','dataLayer','GTM-W3RJHTZ');</script>
    152. 

  152. </head>
    153. 

  153. <link rel="stylesheet" href="/assets/css/swiper.min.css">
    154. 

  154. <link rel="stylesheet" href="/assets/css/rv_web/rv_web.css?v=1637659767">
    155. 

  155. <style>
    156. 

  156.   .article--style .article__contexts.active {
    157. 

  157.       height: auto;
    158. 

  158.       overflow: hidden;
    159. 

  159.   }
    160. 

  160.   .article--style .article__contexts {
    161. 

  161.       overflow: hidden;
    162. 

  162.   }
    163. 

  163.   .article__contexts--longHeight {
    164. 

  164.       height: auto;
    165. 

  165.       -webkit-transition: height 300ms ease-in-out;
    166. 

  166.       transition: height 300ms ease-in-out;
    167. 

  167.   }
    168. 

  168.   .article__contexts img {
    169. 

  169.       max-width: 80%;
    170. 

  170.       margin: 0.5rem 0;
    171. 

  171.       -webkit-transition: all 300ms ease-in-out;
    172. 

  172.       transition: all 300ms ease-in-out;
    173. 

  173.   }
    174. 

  174.   .article__contexts {
    175. 

  175.       font-size: 1.1rem;
    176. 

  176.       line-height: 1.8;
    177. 

  177.       height: 1044px;
    178. 

  178.       overflow: hidden;
    179. 

  179.       -webkit-transition: all 300ms ease-in-out;
    180. 

  180.       transition: all 300ms ease-in-out;
    181. 

  181.   }
    182. 

  182.   *, *::before, *::after {
    183. 

  183.       -webkit-box-sizing: border-box;
    184. 

  184.       box-sizing: border-box;
    185. 

  185.   }
    186. 

  186.   
    187. 

  187.   .article__readMore--gradHight {
    188. 

  188.       /* -webkit-transform: translateY(75px);
    189. 

  189.       transform: translateY(75px); */
    190. 

  190.       -webkit-transition: all 300ms ease-in-out;
    191. 

  191.       transition: all 300ms ease-in-out;
    192. 

  192.   }
    193. 

  193.   .article__readMore {
    194. 

  194.       margin-left: auto;
    195. 

  195.       margin-right: auto;
    196. 

  196.       text-align: center;
    197. 

  197.       font-size: 90%;
    198. 

  198.       padding: 1rem 1rem;
    199. 

  199.       width: 8rem;
    200. 

  200.       border-radius: 2rem;
    201. 

  201.       background-color: #FFAC73;
    202. 

  202.       -webkit-transition: all 300ms ease-in-out;
    203. 

  203.       transition: all 300ms ease-in-out;
    204. 

  204.       text-decoration: none;
    205. 

  205.       color: white;
    206. 

  206.   }
    207. 

  207.   
    208. 

  208.   .article__readMore__text {
    209. 

  209.     color: white;
    210. 

  210.     text-decoration: none;
    211. 

  211.   }
    212. 

  212.   
    213. 

  213.   .article__readMore__text:hover {
    214. 

  214.     color: white;
    215. 

  215.     text-decoration: none;
    216. 

  216.   }
    217. 

  217.   
    218. 

  218.   #prefer-form {
    219. 

  219.     max-width: 950px;
    220. 

  220.     width: 80%;
    221. 

  221.     margin: 1rem auto;
    222. 

  222.     border: 1px solid rgb(180, 180, 180);
    223. 

  223.     border-radius: 1rem;
    224. 

  224.     padding: .5rem;
    225. 

  225.   }
    226. 

  226.   
    227. 

  227.   #prefer-form .imgfr {
    228. 

  228.     background-size: cover;
    229. 

  229.     background-repeat: no-repeat;
    230. 

  230.     background-position: center;
    231. 

  231.     width: 75%;
    232. 

  232.     margin: auto;
    233. 

  233.     height: 8rem;
    234. 

  234.     border-radius: 8px;
    235. 

  235.     border: 3px solid transparent;
    236. 

  236.   }
    237. 

  237.   
    238. 

  238.   #prefer-form input[type="radio"]:checked + .fs-label-info .imgfr {
    239. 

  239.     border: 3px solid #EE7800;
    240. 

  240.   } 
    241. 

  241.   
    242. 

  242.   #prefer-form .prefer-form__submit {
    243. 

  243.       margin-left: auto;
    244. 

  244.       margin-right: auto;
    245. 

  245.       text-align: center;
    246. 

  246.       font-size: 90%;
    247. 

  247.       padding: .3rem 1rem;
    248. 

  248.       width: 6rem;
    249. 

  249.       border-radius: 2rem;
    250. 

  250.       background-color: #FFAC73;
    251. 

  251.       text-decoration: none;
    252. 

  252.       color: white;
    253. 

  253.       border: none;
    254. 

  254.       outline: none;
    255. 

  255.   }
    256. 

  256.   
    257. 

  257.   
    258. 

  258.   </style>
    259. 

  259. <script src="/assets/js/vue.min.js"></script>
    260. 

  260. <body>
    261. 

  261. <noscript>
    262. 

  262.     <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W3RJHTZ"
    263. 

  263.             height="0" width="0" style="display:none;visibility:hidden"></iframe>
    264. 

  264. </noscript>
    265. 

  265. <div id="loading" style="min-height:100vh;width:100vw; height:100%; z-index:20000; background: #fff">
    266. 

  266. </div>
    267. 

  267. <div class="swiper-bg">
    268. 

  268. <a class="ADclose"><p>隱藏<i class="fa fa-chevron-up fa-fw arrow" aria-hidden="true"></i></p></a>
    269. 

  269. <div id="top-banner" class="swiper-container">
    270. 

  270. <div class="swiper-wrapper swiper-wrapper-top-banner">
    271. 

  271. <div class="swiper-slide">
    272. 

  272. <div class="img-wrapper">
    273. 

  273. <div class="swiper-zoom-container">
    274. 

  274. <a href="javascript:void(0)" onclick="linkin_ga('0','15664','https://hhh.com.tw/designer-index.php?designer_id=23')">
    275. 

  275. <img src="https://images.hhh.com.tw/uploads/_had/adlogo_15664_1619582529.webp" alt="15664">
    276. 

  276. </a>
    277. 

  277. </div>
    278. 

  278. </div>
    279. 

  279. </div>
    280. 

  280. <div class="swiper-slide">
    281. 

  281. <div class="img-wrapper">
    282. 

  282. <div class="swiper-zoom-container">
    283. 

  283. <a href="javascript:void(0)" onclick="linkin_ga('1','15672','https://hhh.com.tw/designer-index.php?designer_id=28')">
    284. 

  284. <img src="https://images.hhh.com.tw/uploads/_had/adlogo_15672_1605260741.webp" alt="15672">
    285. 

  285. </a>
    286. 

  286. </div>
    287. 

  287. </div>
    288. 

  288. </div>
    289. 

  289. <div class="swiper-slide">
    290. 

  290. <div class="img-wrapper">
    291. 

  291. <div class="swiper-zoom-container">
    292. 

  292. <a href="javascript:void(0)" onclick="linkin_ga('2','15662','https://hhh.com.tw/designer-index.php?designer_id=447')">
    293. 

  293. <img src="https://images.hhh.com.tw/uploads/_had/adlogo_15662_1607045683.webp" alt="15662">
    294. 

  294. </a>
    295. 

  295. </div>
    296. 

  296. </div>
    297. 

  297. </div>
    298. 

  298. <div class="swiper-slide">
    299. 

  299. <div class="img-wrapper">
    300. 

  300. <div class="swiper-zoom-container">
    301. 

  301. <a href="javascript:void(0)" onclick="linkin_ga('3','15673','https://hhh.com.tw/designer-index.php?designer_id=31')">
    302. 

  302. <img src="https://images.hhh.com.tw/uploads/_had/adlogo_15673_1603855335.webp" alt="15673">
    303. 

  303. </a>
    304. 

  304. </div>
    305. 

  305. </div>
    306. 

  306. </div>
    307. 

  307. <div class="swiper-slide">
    308. 

  308. <div class="img-wrapper">
    309. 

  309. <div class="swiper-zoom-container">
    310. 

  310. <a href="javascript:void(0)" onclick="linkin_ga('4','16076','https://hhh.com.tw/designers/cases/586/1-page/new-sort/')">
    311. 

  311. <img src="https://images.hhh.com.tw/uploads/_had/adlogo_16076_1625209659.webp" alt="16076">
    312. 

  312. </a>
    313. 

  313. </div>
    314. 

  314. </div>
    315. 

  315. </div>
    316. 

  316. <div class="swiper-slide">
    317. 

  317. <div class="img-wrapper">
    318. 

  318. <div class="swiper-zoom-container">
    319. 

  319. <a href="javascript:void(0)" onclick="linkin_ga('5','15666','https://hhh.com.tw/designer-index.php?designer_id=32')">
    320. 

  320. <img src="https://images.hhh.com.tw/uploads/_had/adlogo_15666_1627961102.webp" alt="15666">
    321. 

  321. </a>
    322. 

  322. </div>
    323. 

  323. </div>
    324. 

  324. </div>
    325. 

  325. <div class="swiper-slide">
    326. 

  326. <div class="img-wrapper">
    327. 

  327. <div class="swiper-zoom-container">
    328. 

  328. <a href="javascript:void(0)" onclick="linkin_ga('6','16002','https://hhh.com.tw/brand-index.php?brand_id=202')">
    329. 

  329. <img src="https://images.hhh.com.tw/uploads/_had/adlogo_16002_1617866884.webp" alt="16002">
    330. 

  330. </a>
    331. 

  331. </div>
    332. 

  332. </div>
    333. 

  333. </div>
    334. 

  334. <div class="swiper-slide">
    335. 

  335. <div class="img-wrapper">
    336. 

  336. <div class="swiper-zoom-container">
    337. 

  337. <a href="javascript:void(0)" onclick="linkin_ga('7','16051','https://hhh.com.tw/designers/cases/33/1-page/new-sort/')">
    338. 

  338. <img src="https://images.hhh.com.tw/uploads/_had/adlogo_16051_1634264092.webp" alt="16051">
    339. 

  339. </a>
    340. 

  340. </div>
    341. 

  341. </div>
    342. 

  342. </div>
    343. 

  343. <div class="swiper-slide">
    344. 

  344. <div class="img-wrapper">
    345. 

  345. <div class="swiper-zoom-container">
    346. 

  346. <a href="javascript:void(0)" onclick="linkin_ga('8','16200','https://hhh.com.tw/designers/cases/523/1-page/new-sort/')">
    347. 

  347. <img src="https://images.hhh.com.tw/uploads/_had/adlogo_16200_1637546862.webp" alt="16200">
    348. 

  348. </a>
    349. 

  349. </div>
    350. 

  350. </div>
    351. 

  351. </div>
    352. 

  352. <div class="swiper-slide">
    353. 

  353. <div class="img-wrapper">
    354. 

  354. <div class="swiper-zoom-container">
    355. 

  355. <a href="javascript:void(0)" onclick="linkin_ga('9','16115','https://hhh.com.tw/designers/cases/438/1-page/new-sort/')">
    356. 

  356. <img src="https://images.hhh.com.tw/uploads/_had/adlogo_16115_1629356240.webp" alt="16115">
    357. 

  357. </a>
    358. 

  358. </div>
    359. 

  359. </div>
    360. 

  360. </div>
    361. 

  361. <div class="swiper-slide">
    362. 

  362. <div class="img-wrapper">
    363. 

  363. <div class="swiper-zoom-container">
    364. 

  364. <a href="javascript:void(0)" onclick="linkin_ga('10','16147','https://bigsale.tmall.com/wow/a/act/haiwaifenzu/dailygroup/1345/wupr?disableNav=YES&wh_pid=daily-249643&ali_trackid=2:mm_2663294')">
    365. 

  365. <img src="https://images.hhh.com.tw/uploads/_had/adlogo_16147_1634886101.webp" alt="16147">
    366. 

  366. </a>
    367. 

  367. </div>
    368. 

  368. </div>
    369. 

  369. </div>
    370. 

  370. <div class="swiper-slide">
    371. 

  371. <div class="img-wrapper">
    372. 

  372. <div class="swiper-zoom-container">
    373. 

  373. <a href="javascript:void(0)" onclick="linkin_ga('11','16107','https://hhh.com.tw/deco/')">
    374. 

  374. <img src="https://images.hhh.com.tw/uploads/_had/adlogo_16107_1628644163.webp" alt="16107">
    375. 

  375. </a>
    376. 

  376. </div>
    377. 

  377. </div>
    378. 

  378. </div>
    379. 

  379. </div>
    380. 

  380. <div class="swiper-scrollbar-top-banner swiper-pagination "></div>
    381. 

  381. <div class="swiper-button-next" style=""></div>
    382. 

  382. <div class="swiper-button-prev" style=""></div>
    383. 

  383. </div>
    384. 

  384. </div>
    385. 

  385. <nav class="navbar navbar-expand-lg navbar-light justify-content-between shadow-sm bg-white sticky-top">
    386. 

  386. <div class="nb-mobile-icon">
    387. 

  387. <i class="fa fa-bars bars"></i>
    388. 

  388. <i class="fa fa-arrow-left arrow"></i>
    389. 

  389. </div>
    390. 

  390. <div class="navbar-brand-block">
    391. 

  391. <a class="navbar-brand" href="/">
    392. 

  392. <img src="/assets/images/hhh-logo2.svg" width="145" height="40" alt="hhh-logo">
    393. 

  393. </a>
    394. 

  394. </div>
    395. 

  395. <div class="navbar-brand-block-sm">
    396. 

  396. <a class="navbar-brand" href="/">
    397. 

  397. <img src="/assets/images/hhh-logo2.svg" width="145" height="40" alt="hhh-logo-sm">
    398. 

  398. </a>
    399. 

  399. </div>
    400. 

  400. <div class="navbar-collapse-block">
    401. 

  401. <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
    402. 

  402. <ul class="navbar-nav w-100 justify-content-between">
    403. 

  403. <li class="nav-item">
    404. 

  404. <a class="nav-link  text-promote-color" href="https://shop.hhh.com.tw/" target="_blank">+好物 <span class="sr-only">(current)</a>
    405. 

  405. </li><li class="nav-item">
    406. 

  406. <a class="nav-link  text-promote-color" href="/about/calculator/" target="_blank">估預算 <span class="sr-only">(current)</a>
    407. 

  407. </li><li class="nav-item dropdown">
    408. 

  408. <a class="nav-link  text-promote-color" onClick="location.href='/photos/index/'" data-toggle="dropdown">找風格
    409. 

  409. </a>
    410. 

  410. <ul class="dropdown-menu dropdown-level-width">
    411. 

  411. <li class="dropdown-sub">
    412. 

  412. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    413. 

  413. <a class="submenu dropdown-item" href="/photos/lists/nordic-style/" target="">北歐風</a>
    414. 

  414. </div>
    415. 

  415. </li>
    416. 

  416. <li class="dropdown-sub">
    417. 

  417. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    418. 

  418. <a class="submenu dropdown-item" href="/photos/lists/modern-style/" target="">現代風</a>
    419. 

  419. </div>
    420. 

  420. </li>
    421. 

  421. <li class="dropdown-sub">
    422. 

  422. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    423. 

  423. <a class="submenu dropdown-item" href="/photos/lists/industry-style/" target="">工業風</a>
    424. 

  424. </div>
    425. 

  425. </li>
    426. 

  426. </ul>
    427. 

  427. </li>
    428. 

  428. <li class="nav-item dropdown">
    429. 

  429. <a class="nav-link  " onClick="location.href='/cases/lists/'" data-toggle="dropdown">挑設計
    430. 

  430. </a>
    431. 

  431. <ul class="dropdown-menu dropdown-level-width">
    432. 

  432. <li class="dropdown-sub">
    433. 

  433. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    434. 

  434. <a class="submenu dropdown-item" href="/cases/lists/small-ctype/" target="">小坪數</a>
    435. 

  435. </div>
    436. 

  436. </li>
    437. 

  437. <li class="dropdown-sub">
    438. 

  438. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    439. 

  439. <a class="submenu dropdown-item" href="/cases/lists/renovation-condition/" target="">老屋翻新</a>
    440. 

  440. </div>
    441. 

  441. </li>
    442. 

  442. <li class="dropdown-sub">
    443. 

  443. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    444. 

  444. <a class="submenu dropdown-item" href="/search/lists/case/風水-keyword/" target="">風水</a>
    445. 

  445. </div>
    446. 

  446. </li>
    447. 

  447. </ul>
    448. 

  448. </li>
    449. 

  449. <li class="nav-item dropdown">
    450. 

  450. <a class="nav-link  " onClick="location.href='/videos/lists/'" data-toggle="dropdown">看影音
    451. 

  451. </a>
    452. 

  452. <ul class="dropdown-menu dropdown-level-width">
    453. 

  453. <li class="dropdown-sub">
    454. 

  454. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    455. 

  455. <a class="submenu dropdown-item" href="/videos/lists/" target="">發燒影音</a>
    456. 

  456. </div>
    457. 

  457. </li>
    458. 

  458. <li class="dropdown-sub">
    459. 

  459. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    460. 

  460. <a class="submenu dropdown-item" href="/video-list-5945tw.php" target="">呼叫師傅</a>
    461. 

  461. </div>
    462. 

  462. </li>
    463. 

  463. </ul>
    464. 

  464. </li>
    465. 

  465. <li class="nav-item dropdown">
    466. 

  466. <a class="nav-link  " onClick="location.href='/designers/lists/'" data-toggle="dropdown">設計師
    467. 

  467. </a>
    468. 

  468. <ul class="dropdown-menu dropdown-level-width">
    469. 

  469. <li class="dropdown-sub">
    470. 

  470. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    471. 

  471. <a class="submenu dropdown-item" href="/designers/lists/" target="">設計師總覽</a>
    472. 

  472. </div>
    473. 

  473. </li>
    474. 

  474. <li class="dropdown-sub">
    475. 

  475. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    476. 

  476. <a class="submenu dropdown-item" href="https://event.hhh.com.tw/2021-Most-Favorite-Designers/index.php" target="_blank">觀眾最愛設計師</a>
    477. 

  477. </div>
    478. 

  478. </li>
    479. 

  479. <li class="dropdown-sub">
    480. 

  480. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    481. 

  481. <a class="submenu dropdown-item" href="https://event.hhh.com.tw/topglory/" target="_blank">Glory國際大賞</a>
    482. 

  482. </div>
    483. 

  483. </li>
    484. 

  484. <li class="dropdown-sub">
    485. 

  485. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    486. 

  486. <a class="submenu dropdown-item" href="https://hhh.com.tw/event170427/" target="">老屋翻新</a>
    487. 

  487. </div>
    488. 

  488. </li>
    489. 

  489. <li class="dropdown-sub">
    490. 

  490. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    491. 

  491. <a class="submenu dropdown-item" href="/decoquery/lists/address/" target="">查證照</a>
    492. 

  492. </div>
    493. 

  493. </li>
    494. 

  494. </ul>
    495. 

  495. </li>
    496. 

  496. <li class="nav-item dropdown">
    497. 

  497. <a class="nav-link active " onClick="location.href='/columns/lists/'" data-toggle="dropdown">專欄文章</a>
    498. 

  498. <ul class="dropdown-menu dropdown-level-width">
    499. 

  499. <li class="dropdown-sub">
    500. 

  500. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    501. 

  501. <a class="submenu dropdown-item" href="/columns/lists/editorchoose-columntypea/" target="">編輯精選</a>
    502. 

  502. <i class="fa fa-angle-right" aria-hidden="true"></i>
    503. 

  503. </div>
    504. 

  504. <ul class="thdmenu-block dropdown-menu dropdown-level-width px-3 py-2">
    505. 

  505. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/editorchoose-columntypea/hometrends-columntypeb/" target="">居家趨勢</a></li>
    506. 

  506. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/editorchoose-columntypea/hotrank-columntypeb/" target="">人氣排行</a></li>
    507. 

  507. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/editorchoose-columntypea/archdesign-columntypeb/" target="">建築設計</a></li>
    508. 

  508. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/editorchoose-columntypea/styleselection-columntypeb/" target="">風格選店</a></li>
    509. 

  509. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/editorchoose-columntypea/charitable-columntypeb/" target="">公益活動</a></li>
    510. 

  510. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/editorchoose-columntypea/exhibition-columntypeb/" target="">展演資訊</a></li>
    511. 

  511. </ul>
    512. 

  512. </li>
    513. 

  513. <li class="dropdown-sub">
    514. 

  514. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    515. 

  515. <a class="submenu dropdown-item" href="/columns/lists/housedesign-columntypea/" target="">居家設計</a>
    516. 

  516. <i class="fa fa-angle-right" aria-hidden="true"></i>
    517. 

  517. </div>
    518. 

  518. <ul class="thdmenu-block dropdown-menu dropdown-level-width px-3 py-2">
    519. 

  519. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/housedesign-columntypea/smallhouse-columntypeb/" target="">小宅規劃</a></li>
    520. 

  520. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/housedesign-columntypea/oldhouse-columntypeb/" target="">老屋翻新</a></li>
    521. 

  521. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/housedesign-columntypea/stylebuild-columntypeb/" target="">風格營造</a></li>
    522. 

  522. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/housedesign-columntypea/color-columntypeb/" target="">配色佈置</a></li>
    523. 

  523. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/housedesign-columntypea/goodhouse-columntypeb/" target="">好宅特輯</a></li>
    524. 

  524. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/housedesign-columntypea/proposal-columntypeb/" target="">設計提案</a></li>
    525. 

  525. </ul>
    526. 

  526. </li>
    527. 

  527. <li class="dropdown-sub">
    528. 

  528. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    529. 

  529. <a class="submenu dropdown-item" href="/columns/lists/decoration-columntypea/" target="">裝修前線</a>
    530. 

  530. <i class="fa fa-angle-right" aria-hidden="true"></i>
    531. 

  531. </div>
    532. 

  532. <ul class="thdmenu-block dropdown-menu dropdown-level-width px-3 py-2">
    533. 

  533. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/decoration-columntypea/news-columntypeb/" target="">新聞最前線</a></li>
    534. 

  534. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/decoration-columntypea/allocation-columntypeb/" target="">預算分配</a></li>
    535. 

  535. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/decoration-columntypea/process-columntypeb/" target="">施工流程</a></li>
    536. 

  536. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/decoration-columntypea/knowledge-columntypeb/" target="">建材知識</a></li>
    537. 

  537. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/decoration-columntypea/decorating-columntypeb/" target="">裝潢撇步</a></li>
    538. 

  538. </ul>
    539. 

  539. </li>
    540. 

  540. <li class="dropdown-sub">
    541. 

  541. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    542. 

  542. <a class="submenu dropdown-item" href="/columns/lists/plus-columntypea/" target="">生活PLUS</a>
    543. 

  543. <i class="fa fa-angle-right" aria-hidden="true"></i>
    544. 

  544. </div>
    545. 

  545. <ul class="thdmenu-block dropdown-menu dropdown-level-width px-3 py-2">
    546. 

  546. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/plus-columntypea/fengshui-columntypeb/" target="">居家風水</a></li>
    547. 

  547. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/plus-columntypea/housekeeping-columntypeb/" target="">家事清潔</a></li>
    548. 

  548. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/plus-columntypea/storageskills-columntypeb/" target="">收納技巧</a></li>
    549. 

  549. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/plus-columntypea/renovation-columntypeb/" target="">改造修繕</a></li>
    550. 

  550. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/plus-columntypea/retire-columntypeb/" target="">退休好幸福</a></li>
    551. 

  551. </ul>
    552. 

  552. </li>
    553. 

  553. <li class="dropdown-sub">
    554. 

  554. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    555. 

  555. <a class="submenu dropdown-item" href="/columns/lists/gooditem-columntypea/" target="">品牌好物</a>
    556. 

  556. <i class="fa fa-angle-right" aria-hidden="true"></i>
    557. 

  557. </div>
    558. 

  558. <ul class="thdmenu-block dropdown-menu dropdown-level-width px-3 py-2">
    559. 

  559. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/gooditem-columntypea/furnishings-columntypeb/" target="">家具家飾</a></li>
    560. 

  560. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/gooditem-columntypea/appliances-columntypeb/" target="">美型家電</a></li>
    561. 

  561. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/gooditem-columntypea/recommend-columntypeb/" target="">推薦廚衛</a></li>
    562. 

  562. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/gooditem-columntypea/homegoods-columntypeb/" target="">居家好物</a></li>
    563. 

  563. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/gooditem-columntypea/quality-columntypeb/" target="">優質建材</a></li>
    564. 

  564. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/gooditem-columntypea/brandnews-columntypeb/" target="">品牌新訊</a></li>
    565. 

  565. </ul>
    566. 

  566. </li>
    567. 

  567. <li class="dropdown-sub">
    568. 

  568. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    569. 

  569. <a class="submenu dropdown-item" href="/columns/lists/focus-columntypea/" target="">房市焦點</a>
    570. 

  570. <i class="fa fa-angle-right" aria-hidden="true"></i>
    571. 

  571. </div>
    572. 

  572. <ul class="thdmenu-block dropdown-menu dropdown-level-width px-3 py-2">
    573. 

  573. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/focus-columntypea/housingnews-columntypeb/" target="">房市新聞</a></li>
    574. 

  574. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/focus-columntypea/specsearch-columntypeb/" target="">建案特搜</a></li>
    575. 

  575. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/focus-columntypea/buyandsell-columntypeb/" target="">買屋賣屋</a></li>
    576. 

  576. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/focus-columntypea/mortgage-columntypeb/" target="">房貸稅務</a></li>
    577. 

  577. <li><a class="dropdown-item px-3 py-2" href="/columns/lists/focus-columntypea/renting-columntypeb/" target="">租房須知</a></li>
    578. 

  578. </ul>
    579. 

  579. </li>
    580. 

  580. <li class="dropdown-sub">
    581. 

  581. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    582. 

  582. <a class="submenu dropdown-item" href="/topic-list.php" target="">主題企劃</a>
    583. 

  583. </div>
    584. 

  584. </li>
    585. 

  585. </ul>
    586. 

  586. </li><li class="nav-item dropdown">
    587. 

  587. <a class="nav-link  " onClick="location.href='/products/lists/'" data-toggle="dropdown">居家商品
    588. 

  588. </a>
    589. 

  589. <ul class="dropdown-menu dropdown-level-width">
    590. 

  590. <li class="dropdown-sub">
    591. 

  591. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    592. 

  592. <a class="submenu dropdown-item" href="/products/lists/" target="">商品總覽</a>
    593. 

  593. </div>
    594. 

  594. </li>
    595. 

  595. <li class="dropdown-sub">
    596. 

  596. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    597. 

  597. <a class="submenu dropdown-item" href="/products/lists/furniture-pcategorya/" target="">傢俱</a>
    598. 

  598. </div>
    599. 

  599. </li>
    600. 

  600. <li class="dropdown-sub">
    601. 

  601. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    602. 

  602. <a class="submenu dropdown-item" href="/products/lists/household-pcategorya/" target="">家電</a>
    603. 

  603. </div>
    604. 

  604. </li>
    605. 

  605. <li class="dropdown-sub">
    606. 

  606. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    607. 

  607. <a class="submenu dropdown-item" href="/products/lists/kitchen-pcategorya/" target="">廚房</a>
    608. 

  608. </div>
    609. 

  609. </li>
    610. 

  610. <li class="dropdown-sub">
    611. 

  611. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    612. 

  612. <a class="submenu dropdown-item" href="/products/lists/bathroom-pcategorya/" target="">衛浴</a>
    613. 

  613. </div>
    614. 

  614. </li>
    615. 

  615. <li class="dropdown-sub">
    616. 

  616. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    617. 

  617. <a class="submenu dropdown-item" href="/products/lists/lighting-pcategorya/" target="">照明</a>
    618. 

  618. </div>
    619. 

  619. </li>
    620. 

  620. <li class="dropdown-sub">
    621. 

  621. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    622. 

  622. <a class="submenu dropdown-item" href="/brands/lists/" target="">品牌總覽</a>
    623. 

  623. </div>
    624. 

  624. </li>
    625. 

  625. <li class="dropdown-sub">
    626. 

  626. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    627. 

  627. <a class="submenu dropdown-item" href="/brand-index.php?brand_id=194" target="_blank">軟裝佈置</a>
    628. 

  628. </div>
    629. 

  629. </li>
    630. 

  630. <li class="dropdown-sub">
    631. 

  631. <div class="d-flex justify-content-between align-items-center px-3 py-2">
    632. 

  632. <a class="submenu dropdown-item" href="https://event.hhh.com.tw/2021-Top-Brands/index.php" target="_blank">消費者愛用品牌</a>
    633. 

  633. </div>
    634. 

  634. </li>
    635. 

  635. </ul>
    636. 

  636. </li>
    637. 

  637. <li class="nav-item">
    638. 

  638. <a class="nav-link  " href="/builder/lists/" target="">新建案 <span class="sr-only">(current)</a>
    639. 

  639. </li>
    640. 

  640. </ul>
    641. 

  641. </div>
    642. 

  642. </div>
    643. 

  643. <div class="nav-user-block">
    644. 

  644. <div class="nav-user">
    645. 

  645. <span class="d-none d-lg-block">
    646. 

  646. <span class="nav-user-wrapper ml-2">
    647. 

  647. <a class="nav-user-login" href="/login/index">登入 / 註冊</a>
    648. 

  648. </span>
    649. 

  649. </span>
    650. 

  650. </div>
    651. 

  651. </div>
    652. 

  652. </nav>
    653. 

  653. <section class="searchall searchall-overlay">
    654. 

  654. <div class="searchall-mask"></div>
    655. 

  655. <div class="searchall-box">
    656. 

  656. <div class="d-flex justify-content-center searchall-block">
    657. 

  657. <div class="w-100">
    658. 

  658. <form action=".">
    659. 

  659. <div class="input-group p-2 ">
    660. 

  660. <div class="d-flex searchall-wrapper searchall-input">
    661. 

  661. <input type="hidden" id="searchalltext" value="case">
    662. 

  662. <input type="text" class="form-control focus-status no-border no-padding" id="searchall-input-text" type="search" placeholder=" 請輸入關鍵字">
    663. 

  663. </div>
    664. 

  664. <div class="input-group-prepend">
    665. 

  665. <div class="input-group-prepend">
    666. 

  666. <div class="input-group-search"><img src="/assets/images/section/icon/search_icon.svg" alt="search_icon" onclick="linkin_keyword('')">
    667. 

  667. </div>
    668. 

  668. </div>
    669. 

  669. </div>
    670. 

  670. </div>
    671. 

  671. </form>
    672. 

  672. </div>
    673. 

  673. </div>
    674. 

  674. <div class="searchall-block pb-3">
    675. 

  675. <div class="text-muted searchall-keywords-title pl-4">熱門關鍵字</div>
    676. 

  676. <div class="mt-3 px-2">
    677. 

  677. <div class="d-flex flex-wrap">
    678. 

  678. <a href="javascript:void(0)" onclick="linkin_keyword('客變')" class="searchall-keywords-link mr-2">
    679. 

  679. <div class="searchall-keywords">客變</div>
    680. 

  680. </a>
    681. 

  681. <a href="javascript:void(0)" onclick="linkin_keyword('小坪數')" class="searchall-keywords-link mr-2">
    682. 

  682. <div class="searchall-keywords">小坪數</div>
    683. 

  683. </a>
    684. 

  684. <a href="javascript:void(0)" onclick="linkin_keyword('老屋翻新')" class="searchall-keywords-link mr-2">
    685. 

  685. <div class="searchall-keywords">老屋翻新</div>
    686. 

  686. </a>
    687. 

  687. <a href="javascript:void(0)" onclick="linkin_keyword('收納')" class="searchall-keywords-link mr-2">
    688. 

  688. <div class="searchall-keywords">收納</div>
    689. 

  689. </a>
    690. 

  690. <a href="javascript:void(0)" onclick="linkin_keyword('軟裝佈置')" class="searchall-keywords-link mr-2">
    691. 

  691. <div class="searchall-keywords">軟裝佈置</div>
    692. 

  692. </a>
    693. 

  693. <a href="javascript:void(0)" onclick="linkin_keyword('新手裝修')" class="searchall-keywords-link mr-2">
    694. 

  694. <div class="searchall-keywords">新手裝修</div>
    695. 

  695. </a>
    696. 

  696. <a href="javascript:void(0)" onclick="linkin_keyword('承炫設計')" class="searchall-keywords-link mr-2">
    697. 

  697. <div class="searchall-keywords">承炫設計</div>
    698. 

  698. </a>
    699. 

  699. <a href="javascript:void(0)" onclick="linkin_keyword('風水')" class="searchall-keywords-link mr-2">
    700. 

  700. <div class="searchall-keywords">風水</div>
    701. 

  701. </a>
    702. 

  702. <a href="javascript:void(0)" onclick="linkin_keyword('北歐風')" class="searchall-keywords-link mr-2">
    703. 

  703. <div class="searchall-keywords">北歐風</div>
    704. 

  704. </a>
    705. 

  705. </div>
    706. 

  706. </div>
    707. 

  707. </div>
    708. 

  708. </div>
    709. 

  709. </section>
    710. 

  710. <script>
    711. 

  711. 

  712.     var activeBulletIndex = 0;
    713. 

  713.     var random = 0;
    714. 

  714. 

  715.         var swiper = new Swiper('.swiper-container', {
    716. 

  716.             pagination: {
    717. 

  717.                 el: '.swiper-scrollbar-top-banner',
    718. 

  718.                 type: 'bullets',
    719. 

  719.                 bulletClass:'carouselPrimary-bullet',
    720. 

  720.                 bulletActiveClass:'carouselPrimary-bullet--active'
    721. 

  721.               },
    722. 

  722.               navigation: {
    723. 

  723.                 nextEl: '.swiper-button-next',
    724. 

  724.                 prevEl: '.swiper-button-prev',
    725. 

  725.               },
    726. 

  726.             autoplay: {
    727. 

  727.               delay: 4000,
    728. 

  728.               disableOnInteraction: false
    729. 

  729.             },
    730. 

  730.             slidesPerView: 'auto',
    731. 

  731.             centeredSlides: true,
    732. 

  732.             spaceBetween: 10,
    733. 

  733.             loop:true,
    734. 

  734.             loopAdditionalSlides:0,
    735. 

  735.             loopedSlides:11,
    736. 

  736.             on: {
    737. 

  737.               slideChange: function() {
    738. 

  738.                 activeBulletIndex = this.realIndex
    739. 

  739.               }
    740. 

  740.             }
    741. 

  741.         });
    742. 

  742.         $('.ADclose').click(function () {
    743. 

  743.             // $('.swiper-bg').slideUp('slow');
    744. 

  744.             $('.swiper-bg').slideUp('slow').addClass('readd');
    745. 

  745. 

  746.             
    747. 

  747. 

  748.             $.ajax({
    749. 

  749.                 type: "GET",
    750. 

  750.                 url: "/login/set_cookie?show=hide",
    751. 

  751.                 processData: false,
    752. 

  752.                 contentType : false,
    753. 

  753.                 success: function(res) {
    754. 

  754. 

  755.                     $('.search-bar-aside').attr('style','top:154px');
    756. 

  756.                 }
    757. 

  757.             })
    758. 

  758.         })
    759. 

  759. 

  760.     $('.nb-mobile-icon').click(function(){
    761. 

  761.         $('.swiper-bg').toggle();
    762. 

  762. 

  763.         if( $('.swiper-bg').hasClass('readd') ) {
    764. 

  764.             $('.swiper-bg').toggle();
    765. 

  765.         }
    766. 

  766.     });
    767. 

  767. 

  768.     $('.searchall-mask').click(function(){
    769. 

  769.         console.log('searchall-mask');
    770. 

  770.         $('.searchall-overlay').toggleClass('active');
    771. 

  771.     });
    772. 

  772. 

  773.     $('.searchall-item').click(function(){
    774. 

  774.         $('#searchalltext').val($(this).data('id'));
    775. 

  775.         $('.searchall-btn').html($(this).text()+'<i class="fa fa-angle-down" aria-hidden="true"><\/i>');
    776. 

  776.     });
    777. 

  777. 

  778.     $('#searchall-input-text').click(function(){
    779. 

  779.         $('#searchall-input-text').addClass('accent-text');
    780. 

  780.     });
    781. 

  781. 

  782.     $("#searchall-input-text").keypress(function(e){
    783. 

  783.         code = (e.keyCode ? e.keyCode : e.which);
    784. 

  784. 

  785.         if (code == 13)
    786. 

  786.         {
    787. 

  787.             var search_val = $('#searchalltext').val();
    788. 

  788.             var keyword = decodeURIComponent($('#searchall-input-text').val());
    789. 

  789.             var url = "/search/lists/"+search_val+'/'+keyword+'-keyword';
    790. 

  790.             location.href = url;
    791. 

  791.         }
    792. 

  792. 

  793.     });
    794. 

  794. 

  795.     $('form').bind("keypress", function(e) {
    796. 

  796.       if (e.keyCode == 13) {               
    797. 

  797.         e.preventDefault();
    798. 

  798.         return false;
    799. 

  799.       }
    800. 

  800.     });
    801. 

  801. 

  802.     function linkin_keyword( keyword) 
    803. 

  803.     {
    804. 

  804.         if(keyword == '幸福經紀人')
    805. 

  805.         {
    806. 

  806.             gaEvent('關鍵字 - '+keyword , '點擊');
    807. 

  807.             window.open('https://event.hhh.com.tw/agent','_blank');
    808. 

  808.         }
    809. 

  809.         else if(keyword == '軟裝佈置')
    810. 

  810.         {
    811. 

  811.             gaEvent('關鍵字 - '+keyword , '點擊');
    812. 

  812.             window.open('https://hhh.com.tw/brand-index.php?brand_id=194','_blank');
    813. 

  813.         }
    814. 

  814.         else if(keyword == '客變')
    815. 

  815.         {
    816. 

  816.             gaEvent('關鍵字 - '+keyword , '點擊');
    817. 

  817.             window.open('https://hhh.com.tw/columns/detail/4300/','_blank');
    818. 

  818.         }
    819. 

  819.         else if(keyword == '新手裝修')
    820. 

  820.         {
    821. 

  821.             gaEvent('關鍵字 - '+keyword , '點擊');
    822. 

  822.             window.open('https://hhh.com.tw/deco/','_blank');
    823. 

  823.         }
    824. 

  824.         else
    825. 

  825.         {
    826. 

  826.             if(keyword == '')
    827. 

  827.             {
    828. 

  828.                 location.href = '/search/lists/';
    829. 

  829.             }
    830. 

  830.             else
    831. 

  831.             {
    832. 

  832.                 if (typeof keyword !== 'undefined') {
    833. 

  833.                   gaEvent('關鍵字 - '+keyword , '點擊')
    834. 

  834.                 }
    835. 

  835. 

  836.                 if(window.location.href.includes('stage'))
    837. 

  837.                 {
    838. 

  838.                     location.href = '/search/lists/case/'+keyword+'-keyword';
    839. 

  839.                 }
    840. 

  840.                 else
    841. 

  841.                 {
    842. 

  842.                     location.href = '/search.php?tab=case&q='+keyword;
    843. 

  843.                 }
    844. 

  844.             }
    845. 

  845. 

  846.         }
    847. 

  847.     }
    848. 

  848. 

  849.     function linkin_ga(index, id,url) 
    850. 

  850.     {
    851. 

  851.         gaEvent('新刊頭'+index+' - '+id , 'banner 廣告點擊');
    852. 

  852.         window.open(url,'_blank');
    853. 

  853.     }
    854. 

  854. 

  855.     function gaEvent(category, action, label) {
    856. 

  856. 

  857.       if (typeof ga != 'undefined') {
    858. 

  858.         if (window.location.pathname.indexOf('demo') == -1) {
    859. 

  859.           if(window.location.href.indexOf('stage') != -1)
    860. 

  860.           {
    861. 

  861.             category = "[STAGE] " + category ;
    862. 

  862.             ga('gtag_UA_133449203_1.send', 'event', category, action, label)
    863. 

  863.           }
    864. 

  864.           else
    865. 

  865.           {
    866. 

  866.             ga('gtag_UA_133449203_1.send', 'event', category, action, label)
    867. 

  867.           }
    868. 

  868.           
    869. 

  869.         }
    870. 

  870.       }
    871. 

  871.     }
    872. 

  872. </script>
    873. 

  873. <nav class="nb-mobile">
    874. 

  874. <div class="nb-mobile-item">
    875. 

  875. <ul>
    876. 

  876. <a href="https://shop.hhh.com.tw/" target="_blank">
    877. 

  877. <li>
    878. 

  878. <div class="single-section-head  text-promote-color">
    879. 

  879. <img src="/assets/images/39a7e9b-1.svg" alt="icon" height="30px" width="30px">
    880. 

  880. +好物
    881. 

  881. </div>
    882. 

  882. <div class="single-section-head-sub--divider"></div>
    883. 

  883. </li>
    884. 

  884. </a>
    885. 

  885. <a href="/about/calculator/" target="_blank">
    886. 

  886. <li>
    887. 

  887. <div class="single-section-head  text-promote-color">
    888. 

  888. <img src="/assets/images/index/budget-2.svg" alt="icon" height="30px" width="30px">
    889. 

  889. 估預算
    890. 

  890. </div>
    891. 

  891. <div class="single-section-head-sub--divider"></div>
    892. 

  892. </li>
    893. 

  893. </a>
    894. 

  894. <li class="multi-section-wrapper">
    895. 

  895. <div class="multi-section">
    896. 

  896. <a href="/photos/index/" target="">
    897. 

  897. <div class="multi-section-head text-promote-color">
    898. 

  898. <img src="/assets/images/section/icon/navbar/witness.svg" alt="icon" height="30px" width="30px">
    899. 

  899. 找風格
    900. 

  900. </div>
    901. 

  901. </a>
    902. 

  902. <div class="nb-mobile-arrow ml-auto">
    903. 

  903. <i class="fa fa-angle-up active" aria-hidden="true"></i>
    904. 

  904. <i class="fa fa-angle-down" aria-hidden="true"></i>
    905. 

  905. </div>
    906. 

  906. </div>
    907. 

  907. <div class="multi-section-head-sub--divider"></div>
    908. 

  908. <ul class="nb-mobile-secItem active">
    909. 

  909. <a href="/photos/lists/nordic-style/" target=""><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">北歐風</div></li></a>
    910. 

  910. <div class="multi-section-head-sub--divider"></div>
    911. 

  911. <a href="/photos/lists/modern-style/" target=""><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">現代風</div></li></a>
    912. 

  912. <div class="multi-section-head-sub--divider"></div>
    913. 

  913. <a href="/photos/lists/industry-style/" target=""><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">工業風</div></li></a>
    914. 

  914. <div class="multi-section-head-sub--divider"></div>
    915. 

  915. </ul>
    916. 

  916. </li> <li class="multi-section-wrapper">
    917. 

  917. <div class="multi-section">
    918. 

  918. <a href="/cases/lists/" target="">
    919. 

  919. <div class="multi-section-head ">
    920. 

  920. <img src="/images/svg/idea.svg" alt="icon" height="30px" width="30px">
    921. 

  921. 挑設計
    922. 

  922. </div>
    923. 

  923. </a>
    924. 

  924. <div class="nb-mobile-arrow ml-auto">
    925. 

  925. <i class="fa fa-angle-up active" aria-hidden="true"></i>
    926. 

  926. <i class="fa fa-angle-down" aria-hidden="true"></i>
    927. 

  927. </div>
    928. 

  928. </div>
    929. 

  929. <div class="multi-section-head-sub--divider"></div>
    930. 

  930. <ul class="nb-mobile-secItem active">
    931. 

  931. <a href="/cases/lists/small-ctype/" target=""><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">小坪數</div></li></a>
    932. 

  932. <div class="multi-section-head-sub--divider"></div>
    933. 

  933. <a href="/cases/lists/renovation-condition/" target=""><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">老屋翻新</div></li></a>
    934. 

  934. <div class="multi-section-head-sub--divider"></div>
    935. 

  935. <a href="/search/lists/case/風水-keyword/" target=""><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">風水</div></li></a>
    936. 

  936. <div class="multi-section-head-sub--divider"></div>
    937. 

  937. </ul>
    938. 

  938. </li> <li class="multi-section-wrapper">
    939. 

  939. <div class="multi-section">
    940. 

  940. <a href="/videos/lists/" target="">
    941. 

  941. <div class="multi-section-head ">
    942. 

  942. <img src="/images/svg/media.svg" alt="icon" height="30px" width="30px">
    943. 

  943. 看影音
    944. 

  944. </div>
    945. 

  945. </a>
    946. 

  946. <div class="nb-mobile-arrow ml-auto">
    947. 

  947. <i class="fa fa-angle-up active" aria-hidden="true"></i>
    948. 

  948. <i class="fa fa-angle-down" aria-hidden="true"></i>
    949. 

  949. </div>
    950. 

  950. </div>
    951. 

  951. <div class="multi-section-head-sub--divider"></div>
    952. 

  952. <ul class="nb-mobile-secItem active">
    953. 

  953. <a href="/videos/lists/" target=""><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">發燒影音</div></li></a>
    954. 

  954. <div class="multi-section-head-sub--divider"></div>
    955. 

  955. <a href="/video-list-5945tw.php" target=""><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">呼叫師傅</div></li></a>
    956. 

  956. <div class="multi-section-head-sub--divider"></div>
    957. 

  957. </ul>
    958. 

  958. </li> <li class="multi-section-wrapper">
    959. 

  959. <div class="multi-section">
    960. 

  960. <a href="/designers/lists/" target="">
    961. 

  961. <div class="multi-section-head ">
    962. 

  962. <img src="/images/svg/design_tool.svg" alt="icon" height="30px" width="30px">
    963. 

  963. 設計師
    964. 

  964. </div>
    965. 

  965. </a>
    966. 

  966. <div class="nb-mobile-arrow ml-auto">
    967. 

  967. <i class="fa fa-angle-up active" aria-hidden="true"></i>
    968. 

  968. <i class="fa fa-angle-down" aria-hidden="true"></i>
    969. 

  969. </div>
    970. 

  970. </div>
    971. 

  971. <div class="multi-section-head-sub--divider"></div>
    972. 

  972. <ul class="nb-mobile-secItem active">
    973. 

  973. <a href="/designers/lists/" target=""><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">設計師總覽</div></li></a>
    974. 

  974. <div class="multi-section-head-sub--divider"></div>
    975. 

  975. <a href="https://event.hhh.com.tw/2021-Most-Favorite-Designers/index.php" target="_blank"><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">觀眾最愛設計師</div></li></a>
    976. 

  976. <div class="multi-section-head-sub--divider"></div>
    977. 

  977. <a href="https://event.hhh.com.tw/topglory/" target="_blank"><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">Glory國際大賞</div></li></a>
    978. 

  978. <div class="multi-section-head-sub--divider"></div>
    979. 

  979. <a href="https://hhh.com.tw/event170427/" target=""><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">老屋翻新</div></li></a>
    980. 

  980. <div class="multi-section-head-sub--divider"></div>
    981. 

  981. <a href="/decoquery/lists/address/" target=""><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">查證照</div></li></a>
    982. 

  982. <div class="multi-section-head-sub--divider"></div>
    983. 

  983. </ul>
    984. 

  984. </li><li class="multi-section-wrapper">
    985. 

  985. <div class="multi-section">
    986. 

  986. <a href="/columns/lists/" target="">
    987. 

  987. <div class="multi-section-head ">
    988. 

  988. <img src="/images/svg/pen.svg" alt="icon" height="30px" width="30px">
    989. 

  989. 專欄文章
    990. 

  990. </div>
    991. 

  991. </a>
    992. 

  992. <div class="nb-mobile-arrow ml-auto">
    993. 

  993. <i class="fa fa-angle-up active" aria-hidden="true"></i>
    994. 

  994. <i class="fa fa-angle-down" aria-hidden="true"></i>
    995. 

  995. </div>
    996. 

  996. </div>
    997. 

  997. <div class="multi-section-head-sub--divider"></div>
    998. 

  998. <ul class="nb-mobile-secItem active">
    999. 

  999. <li class="px-0">
    1000. 

  1000. <div class="multi-section-head-sub-wrapper">
    1001. 

  1001. <a href="/columns/lists/editorchoose-columntypea/" target="">
    1002. 

  1002. <div class="multi-section-head-sub py-2">
    1003. 

  1003. 編輯精選
    1004. 

  1004. </div>
    1005. 

  1005. </a>
    1006. 

  1006. <div class="nb-mobile-arrow-third ml-auto">
    1007. 

  1007. <i class="fa fa-angle-down fa-arrow-third" aria-hidden="true"></i>
    1008. 

  1008. </div>
    1009. 

  1009. </div>
    1010. 

  1010. <div class="multi-section-head-sub--divider"></div>
    1011. 

  1011. <ul class="nb-mobile-thdItem">
    1012. 

  1012. <a href="/columns/lists/editorchoose-columntypea/hometrends-columntypeb/" target="">
    1013. 

  1013. <li class="thd-menu py-2">
    1014. 

  1014. 居家趨勢
    1015. 

  1015. </li>
    1016. 

  1016. </a>
    1017. 

  1017. <div class="thd-menu--divider"></div>
    1018. 

  1018. <a href="/columns/lists/editorchoose-columntypea/hotrank-columntypeb/" target="">
    1019. 

  1019. <li class="thd-menu py-2">
    1020. 

  1020. 人氣排行
    1021. 

  1021. </li>
    1022. 

  1022. </a>
    1023. 

  1023. <div class="thd-menu--divider"></div>
    1024. 

  1024. <a href="/columns/lists/editorchoose-columntypea/archdesign-columntypeb/" target="">
    1025. 

  1025. <li class="thd-menu py-2">
    1026. 

  1026. 建築設計
    1027. 

  1027. </li>
    1028. 

  1028. </a>
    1029. 

  1029. <div class="thd-menu--divider"></div>
    1030. 

  1030. <a href="/columns/lists/editorchoose-columntypea/styleselection-columntypeb/" target="">
    1031. 

  1031. <li class="thd-menu py-2">
    1032. 

  1032. 風格選店
    1033. 

  1033. </li>
    1034. 

  1034. </a>
    1035. 

  1035. <div class="thd-menu--divider"></div>
    1036. 

  1036. <a href="/columns/lists/editorchoose-columntypea/charitable-columntypeb/" target="">
    1037. 

  1037. <li class="thd-menu py-2">
    1038. 

  1038. 公益活動
    1039. 

  1039. </li>
    1040. 

  1040. </a>
    1041. 

  1041. <div class="thd-menu--divider"></div>
    1042. 

  1042. <a href="/columns/lists/editorchoose-columntypea/exhibition-columntypeb/" target="">
    1043. 

  1043. <li class="thd-menu py-2">
    1044. 

  1044. 展演資訊
    1045. 

  1045. </li>
    1046. 

  1046. </a>
    1047. 

  1047. <div class="thd-menu--divider"></div>
    1048. 

  1048. </ul>
    1049. 

  1049. </li><li class="px-0">
    1050. 

  1050. <div class="multi-section-head-sub-wrapper">
    1051. 

  1051. <a href="/columns/lists/housedesign-columntypea/" target="">
    1052. 

  1052. <div class="multi-section-head-sub py-2">
    1053. 

  1053. 居家設計
    1054. 

  1054. </div>
    1055. 

  1055. </a>
    1056. 

  1056. <div class="nb-mobile-arrow-third ml-auto">
    1057. 

  1057. <i class="fa fa-angle-down fa-arrow-third" aria-hidden="true"></i>
    1058. 

  1058. </div>
    1059. 

  1059. </div>
    1060. 

  1060. <div class="multi-section-head-sub--divider"></div>
    1061. 

  1061. <ul class="nb-mobile-thdItem">
    1062. 

  1062. <a href="/columns/lists/housedesign-columntypea/smallhouse-columntypeb/" target="">
    1063. 

  1063. <li class="thd-menu py-2">
    1064. 

  1064. 小宅規劃
    1065. 

  1065. </li>
    1066. 

  1066. </a>
    1067. 

  1067. <div class="thd-menu--divider"></div>
    1068. 

  1068. <a href="/columns/lists/housedesign-columntypea/oldhouse-columntypeb/" target="">
    1069. 

  1069. <li class="thd-menu py-2">
    1070. 

  1070. 老屋翻新
    1071. 

  1071. </li>
    1072. 

  1072. </a>
    1073. 

  1073. <div class="thd-menu--divider"></div>
    1074. 

  1074. <a href="/columns/lists/housedesign-columntypea/stylebuild-columntypeb/" target="">
    1075. 

  1075. <li class="thd-menu py-2">
    1076. 

  1076. 風格營造
    1077. 

  1077. </li>
    1078. 

  1078. </a>
    1079. 

  1079. <div class="thd-menu--divider"></div>
    1080. 

  1080. <a href="/columns/lists/housedesign-columntypea/color-columntypeb/" target="">
    1081. 

  1081. <li class="thd-menu py-2">
    1082. 

  1082. 配色佈置
    1083. 

  1083. </li>
    1084. 

  1084. </a>
    1085. 

  1085. <div class="thd-menu--divider"></div>
    1086. 

  1086. <a href="/columns/lists/housedesign-columntypea/goodhouse-columntypeb/" target="">
    1087. 

  1087. <li class="thd-menu py-2">
    1088. 

  1088. 好宅特輯
    1089. 

  1089. </li>
    1090. 

  1090. </a>
    1091. 

  1091. <div class="thd-menu--divider"></div>
    1092. 

  1092. <a href="/columns/lists/housedesign-columntypea/proposal-columntypeb/" target="">
    1093. 

  1093. <li class="thd-menu py-2">
    1094. 

  1094. 設計提案
    1095. 

  1095. </li>
    1096. 

  1096. </a>
    1097. 

  1097. <div class="thd-menu--divider"></div>
    1098. 

  1098. </ul>
    1099. 

  1099. </li><li class="px-0">
    1100. 

  1100. <div class="multi-section-head-sub-wrapper">
    1101. 

  1101. <a href="/columns/lists/decoration-columntypea/" target="">
    1102. 

  1102. <div class="multi-section-head-sub py-2">
    1103. 

  1103. 裝修前線
    1104. 

  1104. </div>
    1105. 

  1105. </a>
    1106. 

  1106. <div class="nb-mobile-arrow-third ml-auto">
    1107. 

  1107. <i class="fa fa-angle-down fa-arrow-third" aria-hidden="true"></i>
    1108. 

  1108. </div>
    1109. 

  1109. </div>
    1110. 

  1110. <div class="multi-section-head-sub--divider"></div>
    1111. 

  1111. <ul class="nb-mobile-thdItem">
    1112. 

  1112. <a href="/columns/lists/decoration-columntypea/news-columntypeb/" target="">
    1113. 

  1113. <li class="thd-menu py-2">
    1114. 

  1114. 新聞最前線
    1115. 

  1115. </li>
    1116. 

  1116. </a>
    1117. 

  1117. <div class="thd-menu--divider"></div>
    1118. 

  1118. <a href="/columns/lists/decoration-columntypea/allocation-columntypeb/" target="">
    1119. 

  1119. <li class="thd-menu py-2">
    1120. 

  1120. 預算分配
    1121. 

  1121. </li>
    1122. 

  1122. </a>
    1123. 

  1123. <div class="thd-menu--divider"></div>
    1124. 

  1124. <a href="/columns/lists/decoration-columntypea/process-columntypeb/" target="">
    1125. 

  1125. <li class="thd-menu py-2">
    1126. 

  1126. 施工流程
    1127. 

  1127. </li>
    1128. 

  1128. </a>
    1129. 

  1129. <div class="thd-menu--divider"></div>
    1130. 

  1130. <a href="/columns/lists/decoration-columntypea/knowledge-columntypeb/" target="">
    1131. 

  1131. <li class="thd-menu py-2">
    1132. 

  1132. 建材知識
    1133. 

  1133. </li>
    1134. 

  1134. </a>
    1135. 

  1135. <div class="thd-menu--divider"></div>
    1136. 

  1136. <a href="/columns/lists/decoration-columntypea/decorating-columntypeb/" target="">
    1137. 

  1137. <li class="thd-menu py-2">
    1138. 

  1138. 裝潢撇步
    1139. 

  1139. </li>
    1140. 

  1140. </a>
    1141. 

  1141. <div class="thd-menu--divider"></div>
    1142. 

  1142. </ul>
    1143. 

  1143. </li><li class="px-0">
    1144. 

  1144. <div class="multi-section-head-sub-wrapper">
    1145. 

  1145. <a href="/columns/lists/plus-columntypea/" target="">
    1146. 

  1146. <div class="multi-section-head-sub py-2">
    1147. 

  1147. 生活PLUS
    1148. 

  1148. </div>
    1149. 

  1149. </a>
    1150. 

  1150. <div class="nb-mobile-arrow-third ml-auto">
    1151. 

  1151. <i class="fa fa-angle-down fa-arrow-third" aria-hidden="true"></i>
    1152. 

  1152. </div>
    1153. 

  1153. </div>
    1154. 

  1154. <div class="multi-section-head-sub--divider"></div>
    1155. 

  1155. <ul class="nb-mobile-thdItem">
    1156. 

  1156. <a href="/columns/lists/plus-columntypea/fengshui-columntypeb/" target="">
    1157. 

  1157. <li class="thd-menu py-2">
    1158. 

  1158. 居家風水
    1159. 

  1159. </li>
    1160. 

  1160. </a>
    1161. 

  1161. <div class="thd-menu--divider"></div>
    1162. 

  1162. <a href="/columns/lists/plus-columntypea/housekeeping-columntypeb/" target="">
    1163. 

  1163. <li class="thd-menu py-2">
    1164. 

  1164. 家事清潔
    1165. 

  1165. </li>
    1166. 

  1166. </a>
    1167. 

  1167. <div class="thd-menu--divider"></div>
    1168. 

  1168. <a href="/columns/lists/plus-columntypea/storageskills-columntypeb/" target="">
    1169. 

  1169. <li class="thd-menu py-2">
    1170. 

  1170. 收納技巧
    1171. 

  1171. </li>
    1172. 

  1172. </a>
    1173. 

  1173. <div class="thd-menu--divider"></div>
    1174. 

  1174. <a href="/columns/lists/plus-columntypea/renovation-columntypeb/" target="">
    1175. 

  1175. <li class="thd-menu py-2">
    1176. 

  1176. 改造修繕
    1177. 

  1177. </li>
    1178. 

  1178. </a>
    1179. 

  1179. <div class="thd-menu--divider"></div>
    1180. 

  1180. <a href="/columns/lists/plus-columntypea/retire-columntypeb/" target="">
    1181. 

  1181. <li class="thd-menu py-2">
    1182. 

  1182. 退休好幸福
    1183. 

  1183. </li>
    1184. 

  1184. </a>
    1185. 

  1185. <div class="thd-menu--divider"></div>
    1186. 

  1186. </ul>
    1187. 

  1187. </li><li class="px-0">
    1188. 

  1188. <div class="multi-section-head-sub-wrapper">
    1189. 

  1189. <a href="/columns/lists/gooditem-columntypea/" target="">
    1190. 

  1190. <div class="multi-section-head-sub py-2">
    1191. 

  1191. 品牌好物
    1192. 

  1192. </div>
    1193. 

  1193. </a>
    1194. 

  1194. <div class="nb-mobile-arrow-third ml-auto">
    1195. 

  1195. <i class="fa fa-angle-down fa-arrow-third" aria-hidden="true"></i>
    1196. 

  1196. </div>
    1197. 

  1197. </div>
    1198. 

  1198. <div class="multi-section-head-sub--divider"></div>
    1199. 

  1199. <ul class="nb-mobile-thdItem">
    1200. 

  1200. <a href="/columns/lists/gooditem-columntypea/furnishings-columntypeb/" target="">
    1201. 

  1201. <li class="thd-menu py-2">
    1202. 

  1202. 家具家飾
    1203. 

  1203. </li>
    1204. 

  1204. </a>
    1205. 

  1205. <div class="thd-menu--divider"></div>
    1206. 

  1206. <a href="/columns/lists/gooditem-columntypea/appliances-columntypeb/" target="">
    1207. 

  1207. <li class="thd-menu py-2">
    1208. 

  1208. 美型家電
    1209. 

  1209. </li>
    1210. 

  1210. </a>
    1211. 

  1211. <div class="thd-menu--divider"></div>
    1212. 

  1212. <a href="/columns/lists/gooditem-columntypea/recommend-columntypeb/" target="">
    1213. 

  1213. <li class="thd-menu py-2">
    1214. 

  1214. 推薦廚衛
    1215. 

  1215. </li>
    1216. 

  1216. </a>
    1217. 

  1217. <div class="thd-menu--divider"></div>
    1218. 

  1218. <a href="/columns/lists/gooditem-columntypea/homegoods-columntypeb/" target="">
    1219. 

  1219. <li class="thd-menu py-2">
    1220. 

  1220. 居家好物
    1221. 

  1221. </li>
    1222. 

  1222. </a>
    1223. 

  1223. <div class="thd-menu--divider"></div>
    1224. 

  1224. <a href="/columns/lists/gooditem-columntypea/quality-columntypeb/" target="">
    1225. 

  1225. <li class="thd-menu py-2">
    1226. 

  1226. 優質建材
    1227. 

  1227. </li>
    1228. 

  1228. </a>
    1229. 

  1229. <div class="thd-menu--divider"></div>
    1230. 

  1230. <a href="/columns/lists/gooditem-columntypea/brandnews-columntypeb/" target="">
    1231. 

  1231. <li class="thd-menu py-2">
    1232. 

  1232. 品牌新訊
    1233. 

  1233. </li>
    1234. 

  1234. </a>
    1235. 

  1235. <div class="thd-menu--divider"></div>
    1236. 

  1236. </ul>
    1237. 

  1237. </li><li class="px-0">
    1238. 

  1238. <div class="multi-section-head-sub-wrapper">
    1239. 

  1239. <a href="/columns/lists/focus-columntypea/" target="">
    1240. 

  1240. <div class="multi-section-head-sub py-2">
    1241. 

  1241. 房市焦點
    1242. 

  1242. </div>
    1243. 

  1243. </a>
    1244. 

  1244. <div class="nb-mobile-arrow-third ml-auto">
    1245. 

  1245. <i class="fa fa-angle-down fa-arrow-third" aria-hidden="true"></i>
    1246. 

  1246. </div>
    1247. 

  1247. </div>
    1248. 

  1248. <div class="multi-section-head-sub--divider"></div>
    1249. 

  1249. <ul class="nb-mobile-thdItem">
    1250. 

  1250. <a href="/columns/lists/focus-columntypea/housingnews-columntypeb/" target="">
    1251. 

  1251. <li class="thd-menu py-2">
    1252. 

  1252. 房市新聞
    1253. 

  1253. </li>
    1254. 

  1254. </a>
    1255. 

  1255. <div class="thd-menu--divider"></div>
    1256. 

  1256. <a href="/columns/lists/focus-columntypea/specsearch-columntypeb/" target="">
    1257. 

  1257. <li class="thd-menu py-2">
    1258. 

  1258. 建案特搜
    1259. 

  1259. </li>
    1260. 

  1260. </a>
    1261. 

  1261. <div class="thd-menu--divider"></div>
    1262. 

  1262. <a href="/columns/lists/focus-columntypea/buyandsell-columntypeb/" target="">
    1263. 

  1263. <li class="thd-menu py-2">
    1264. 

  1264. 買屋賣屋
    1265. 

  1265. </li>
    1266. 

  1266. </a>
    1267. 

  1267. <div class="thd-menu--divider"></div>
    1268. 

  1268. <a href="/columns/lists/focus-columntypea/mortgage-columntypeb/" target="">
    1269. 

  1269. <li class="thd-menu py-2">
    1270. 

  1270. 房貸稅務
    1271. 

  1271. </li>
    1272. 

  1272. </a>
    1273. 

  1273. <div class="thd-menu--divider"></div>
    1274. 

  1274. <a href="/columns/lists/focus-columntypea/renting-columntypeb/" target="">
    1275. 

  1275. <li class="thd-menu py-2">
    1276. 

  1276. 租房須知
    1277. 

  1277. </li>
    1278. 

  1278. </a>
    1279. 

  1279. <div class="thd-menu--divider"></div>
    1280. 

  1280. </ul>
    1281. 

  1281. </li><li class="px-0">
    1282. 

  1282. <div class="multi-section-head-sub justify-content-start py-2">
    1283. 

  1283. <a href="/topic-list.php" target="">主題企劃</a>
    1284. 

  1284. </div>
    1285. 

  1285. <div class="multi-section-head-sub--divider"></div>
    1286. 

  1286. </li>
    1287. 

  1287. </ul>
    1288. 

  1288. </li> <li class="multi-section-wrapper">
    1289. 

  1289. <div class="multi-section">
    1290. 

  1290. <a href="/products/lists/" target="">
    1291. 

  1291. <div class="multi-section-head ">
    1292. 

  1292. <img src="/images/svg/shopping.svg" alt="icon" height="30px" width="30px">
    1293. 

  1293. 居家商品
    1294. 

  1294. </div>
    1295. 

  1295. </a>
    1296. 

  1296. <div class="nb-mobile-arrow ml-auto">
    1297. 

  1297. <i class="fa fa-angle-up active" aria-hidden="true"></i>
    1298. 

  1298. <i class="fa fa-angle-down" aria-hidden="true"></i>
    1299. 

  1299. </div>
    1300. 

  1300. </div>
    1301. 

  1301. <div class="multi-section-head-sub--divider"></div>
    1302. 

  1302. <ul class="nb-mobile-secItem active">
    1303. 

  1303. <a href="/products/lists/" target=""><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">商品總覽</div></li></a>
    1304. 

  1304. <div class="multi-section-head-sub--divider"></div>
    1305. 

  1305. <a href="/products/lists/furniture-pcategorya/" target=""><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">傢俱</div></li></a>
    1306. 

  1306. <div class="multi-section-head-sub--divider"></div>
    1307. 

  1307. <a href="/products/lists/household-pcategorya/" target=""><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">家電</div></li></a>
    1308. 

  1308. <div class="multi-section-head-sub--divider"></div>
    1309. 

  1309. <a href="/products/lists/kitchen-pcategorya/" target=""><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">廚房</div></li></a>
    1310. 

  1310. <div class="multi-section-head-sub--divider"></div>
    1311. 

  1311. <a href="/products/lists/bathroom-pcategorya/" target=""><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">衛浴</div></li></a>
    1312. 

  1312. <div class="multi-section-head-sub--divider"></div>
    1313. 

  1313. <a href="/products/lists/lighting-pcategorya/" target=""><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">照明</div></li></a>
    1314. 

  1314. <div class="multi-section-head-sub--divider"></div>
    1315. 

  1315. <a href="/brands/lists/" target=""><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">品牌總覽</div></li></a>
    1316. 

  1316. <div class="multi-section-head-sub--divider"></div>
    1317. 

  1317. <a href="/brand-index.php?brand_id=194" target="_blank"><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">軟裝佈置</div></li></a>
    1318. 

  1318. <div class="multi-section-head-sub--divider"></div>
    1319. 

  1319. <a href="https://event.hhh.com.tw/2021-Top-Brands/index.php" target="_blank"><li class="px-0"><div class="multi-section-head-sub justify-content-start py-2">消費者愛用品牌</div></li></a>
    1320. 

  1320. <div class="multi-section-head-sub--divider"></div>
    1321. 

  1321. </ul>
    1322. 

  1322. </li><a href="/builder/lists/" target="">
    1323. 

  1323. <li>
    1324. 

  1324. <div class="single-section-head  ">
    1325. 

  1325. <img src="/images/svg/house.svg" alt="icon" height="30px" width="30px">
    1326. 

  1326. 新建案
    1327. 

  1327. </div>
    1328. 

  1328. <div class="single-section-head-sub--divider"></div>
    1329. 

  1329. </li>
    1330. 

  1330. </a>
    1331. 

  1331. <div>
    1332. 

  1332. <a href="https://event.hhh.com.tw/agent/lecture.html" target="_blank">
    1333. 

  1333. <li>
    1334. 

  1334. <div class="single-section-head">
    1335. 

  1335. <img src="/assets/images/section/icon/navbar/activity.svg" alt="熱門活動">
    1336. 

  1336. 熱門活動
    1337. 

  1337. </div>
    1338. 

  1338. </li>
    1339. 

  1339. </a>
    1340. 

  1340. <a href="https://event.hhh.com.tw/agent/" target="_blank">
    1341. 

  1341. <li>
    1342. 

  1342. <div class="single-section-head">
    1343. 

  1343. <img src="/assets/images/section/icon/navbar/manager.svg" alt="幸福經紀人">
    1344. 

  1344. 幸福經紀人 <span class="text-primary text-photo-color">0800-366-086</span>
    1345. 

  1345. </div>
    1346. 

  1346. <div class="single-section-head-sub--divider"></div>
    1347. 

  1347. </li>
    1348. 

  1348. </a>
    1349. 

  1349. </div>
    1350. 

  1350. </ul>
    1351. 

  1351. </div>
    1352. 

  1352. <footer class="footer">
    1353. 

  1353. <div class="container">
    1354. 

  1354. <div class="row">
    1355. 

  1355. <div class="col-12 py-4">
    1356. 

  1356. <div class="footer-box footer-contact text-center">
    1357. 

  1357. <div class="font-weight-bold">相關連結</div>
    1358. 

  1358. <div class="row">
    1359. 

  1359. <div class="col-6 footer-content mt-2 text-left">
    1360. 

  1360. <a href="http://gstv.com.tw/" target="_blank">
    1361. 

  1361. <img class="mr-2" src="/assets/images/footer-hhh-logo.svg" alt="幸福空間居家台" width="25px">
    1362. 

  1362. 幸福空間居家台
    1363. 

  1363. </a>
    1364. 

  1364. </div>
    1365. 

  1365. <div class="col-6 footer-content mt-2 text-left">
    1366. 

  1366. <a href="https://event.hhh.com.tw/contest/2018/" target="_blank">
    1367. 

  1367. <img class="mr-2" src="/assets/images/index/medal.svg" alt="ADA 亞洲設計獎" width="25px">
    1368. 

  1368. ADA 亞洲設計獎
    1369. 

  1369. </a>
    1370. 

  1370. </div>
    1371. 

  1371. </div>
    1372. 

  1372. <div class="row">
    1373. 

  1373. <div class="col-6 footer-content mt-2 text-left">
    1374. 

  1374. <a href="https://event.hhh.com.tw/2019global-award/" target="_blank">
    1375. 

  1375. <img class="mr-2" src="/assets/images/index/trouph.svg" alt="國際設計大獎代辦" width="25px">
    1376. 

  1376. 國際設計大獎代辦
    1377. 

  1377. </a>
    1378. 

  1378. </div>
    1379. 

  1379. <div class="col-6 footer-content mt-2 text-left">
    1380. 

  1380. <a href="https://www.leju.com.tw/" target="_blank" onClick="javascript:gaEvent('連結 - 樂居網','點擊')">
    1381. 

  1381. <img class="mr-2" src="/assets/images/leju.png" alt="樂居網" width="25px">
    1382. 

  1382. 樂居網
    1383. 

  1383. </a>
    1384. 

  1384. </div>
    1385. 

  1385. </div>
    1386. 

  1386. </div>
    1387. 

  1387. </div>
    1388. 

  1388. <div class="footer-divider-horizon"></div>
    1389. 

  1389. <div class="col-12 py-4">
    1390. 

  1390. <div class="footer-box text-center">
    1391. 

  1391. <div class="font-weight-bold">相關社群</div>
    1392. 

  1392. <div class="footer-content mt-4">
    1393. 

  1393. <div class="row">
    1394. 

  1394. <div class="col-3">
    1395. 

  1395. <a href="https://www.facebook.com/hhhfb" target="_blank">
    1396. 

  1396. <div class="footer-media">
    1397. 

  1397. <img src="/assets/images/section/icon/media/fb_h.svg" alt="fb" width="50" height="50" alt="">
    1398. 

  1398. </div>
    1399. 

  1399. </a>
    1400. 

  1400. </div>
    1401. 

  1401. <div class="col-3">
    1402. 

  1402. <a href="https://line.me/ti/p/%40ovs4341s" target="_blank">
    1403. 

  1403. <div class="footer-media">
    1404. 

  1404. <img src="/assets/images/section/icon/media/ln_h.svg" alt="line" width="50" height="50" alt="">
    1405. 

  1405. </div>
    1406. 

  1406. </a>
    1407. 

  1407. </div>
    1408. 

  1408. <div class="col-3">
    1409. 

  1409. <a href="https://www.youtube.com/user/gorgeousspace" target="_blank">
    1410. 

  1410. <div class="footer-media">
    1411. 

  1411. <img src="/assets/images/section/icon/media/yt_h.svg" alt="youtube" width="50" height="50" alt="">
    1412. 

  1412. </div>
    1413. 

  1413. </a>
    1414. 

  1414. </div>
    1415. 

  1415. <div class="col-3">
    1416. 

  1416. <a href="https://www.instagram.com/gorgeous_space/" target="_blank">
    1417. 

  1417. <div class="footer-media">
    1418. 

  1418. <img src="/assets/images/section/icon/media/ig_h.svg" alt="ig" width="50" height="50" alt="">
    1419. 

  1419. </div>
    1420. 

  1420. </a>
    1421. 

  1421. </div>
    1422. 

  1422. <div class="col-6 mt-4">
    1423. 

  1423. <a href="https://www.facebook.com/agent.hhh.com.tw" target="_blank">
    1424. 

  1424. <div class="footer-media font-weight-bold mx-3">
    1425. 

  1425. <img src="/assets/images/section/icon/media/fb_h.svg" alt="幸福經紀人" width="25" height="25" alt="">
    1426. 

  1426. 幸福經紀人
    1427. 

  1427. </div>
    1428. 

  1428. </a>
    1429. 

  1429. </div>
    1430. 

  1430. <div class="col-6 mt-4">
    1431. 

  1431. <a href="https://www.facebook.com/retire.tw/" target="_blank">
    1432. 

  1432. <div class="footer-media font-weight-bold mx-3">
    1433. 

  1433. <img src="/assets/images/section/icon/media/fb_h.svg" alt="退休好幸福" width="25" height="25" alt="">
    1434. 

  1434. 退休好幸福
    1435. 

  1435. </div>
    1436. 

  1436. </a>
    1437. 

  1437. </div>
    1438. 

  1438. </div>
    1439. 

  1439. </div>
    1440. 

  1440. </div>
    1441. 

  1441. </div>
    1442. 

  1442. <div class="footer-divider-horizon"></div>
    1443. 

  1443. <div class="col-12 py-4">
    1444. 

  1444. <div class="footer-box">
    1445. 

  1445. <h5 class="invisible"></h5>
    1446. 

  1446. <div class="footer-content mt-3 text-center">
    1447. 

  1447. <div class="footer-content-tel font-weight-bold">
    1448. 

  1448. 幸福經紀人免付費諮詢專線
    1449. 

  1449. <a class="text-primary text-photo-color" href="tel:0800366086">0800-366-086</a>
    1450. 

  1450. </div>
    1451. 

  1451. <div class="footer-note mt-2 d-flex px-3 justify-content-center">
    1452. 

  1452. <div class="px-2 footer-note-item">
    1453. 

  1453. <div><a href="/about/contact" target="_blank">聯絡我們</a></div>
    1454. 

  1454. </div>
    1455. 

  1455. <div class="px-2 footer-note-item">
    1456. 

  1456. <div><a href="/about/privacy_policy" target="_blank">隱私保護</a></div>
    1457. 

  1457. </div>
    1458. 

  1458. <div class="px-2 footer-note-item">
    1459. 

  1459. <div><a href="/about" target="_blank">關於本站</a></div>
    1460. 

  1460. </div>
    1461. 

  1461. </div>
    1462. 

  1462. <div class="footer-note mt-2 d-flex px-3 justify-content-center">
    1463. 

  1463. <div class="px-2 footer-note-item">
    1464. 

  1464. <div><a href="/about/timeline" target="_blank">公司歷程</a></div>
    1465. 

  1465. </div>
    1466. 

  1466. <div class="px-2 footer-note-item">
    1467. 

  1467. <div><a href="https://www.104.com.tw/company/d6hr8sg" target="_blank">工作機會</a></div>
    1468. 

  1468. </div>
    1469. 

  1469. <div class="px-2 footer-note-item">
    1470. 

  1470. <div><a href="/about/sitemap" target="_blank">網站地圖</a></div>
    1471. 

  1471. </div>
    1472. 

  1472. </div>
    1473. 

  1473. </div>
    1474. 

  1474. </div>
    1475. 

  1475. </div>
    1476. 

  1476. <div class="footer-divider-horizon"></div>
    1477. 

  1477. <div class="col-12 py-4">
    1478. 

  1478. <div class="footer-content text-center">
    1479. 

  1479. <div class="footer-copyright">
    1480. 

  1480. <a>
    1481. 

  1481. <div>幸福空間 版權所有</div>
    1482. 

  1482. <div>© Gorgeous Space Co.Ltd. All Rights Reserved</div>
    1483. 

  1483. </a>
    1484. 

  1484. </div>
    1485. 

  1485. </div>
    1486. 

  1486. </div>
    1487. 

  1487. </div>
    1488. 

  1488. </div>
    1489. 

  1489. </footer>
    1490. 

  1490. </nav>
    1491. 

  1491. <section>
    1492. 

  1492. <div class="container px-0">
    1493. 

  1493. <nav aria-label="breadcrumb">
    1494. 

  1494. <ol class="breadcrumb" itemscope="" itemtype="http://schema.org/BreadcrumbList">
    1495. 

  1495. <li class="breadcrumb-item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
    1496. 

  1496. <a itemprop="item" href="/"><span itemprop="name">首頁</span></a>
    1497. 

  1497. <meta itemprop="position" content="1">
    1498. 

  1498. </li>
    1499. 

  1499. <li class="breadcrumb-item" aria-current="page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
    1500. 

  1500. <a itemprop="item" href="/columns/lists/all-columntypea/">
    1501. 

  1501. <span itemprop="name" itemprop="item">專欄文章</span></a>
    1502. 

  1502. <meta itemprop="position" content="2">
    1503. 

  1503. </li>
    1504. 

  1504. <li class="breadcrumb-item" aria-current="page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
    1505. 

  1505. <a itemprop="item" href="/columns/lists/decoration-columntypea/"><span itemprop="name">裝修前線</span></a>
    1506. 

  1506. <meta itemprop="position" content="3">
    1507. 

  1507. </li>
    1508. 

  1508. <li class="breadcrumb-item active" aria-current="page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
    1509. 

  1509. <a itemprop="item" href="/columns/lists/decoration-columntypea/decorating-columntypeb/"><span itemprop="name">裝潢撇步</span></a>
    1510. 

  1510. <meta itemprop="position" content="4">
    1511. 

  1511. </li>
    1512. 

  1512. <li class="breadcrumb-item active" aria-current="page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
    1513. 

  1513. <a itemprop="item" href="/columns/detail/4300/"><span itemprop="name">【預售屋客變教學】客變改什麼？你必須了解的6件事</span></a>
    1514. 

  1514. <meta itemprop="position" content="5">
    1515. 

  1515. </li>
    1516. 

  1516. </ol>
    1517. 

  1517. </nav>
    1518. 

  1518. </div>
    1519. 

  1519. </section>
    1520. 

  1520. <section class="article">
    1521. 

  1521. <div class="container article--style">
    1522. 

  1522. <div class="container-width-column py-md-3">
    1523. 

  1523. <div>
    1524. 

  1524. <h1 class="article__title mt-4">【預售屋客變教學】客變改什麼？你必須了解的6件事</h1>
    1525. 

  1525. <div class="small mb-3">2021-08-13｜ 人氣：33956</div>
    1526. 

  1526. </div>
    1527. 

  1527. <div>
    1528. 

  1528. <div class="article__contexts article__contexts--longHeight">
    1529. 

  1529. <div class="photos-gallery"><img alt='幸福空間專欄' src="https://cloud.hhh.com.tw/upload/_hcolumn/content_20210814215433_0.jpg" /></div><p>（圖片提供／<a href="https://hhh.com.tw/cases/detail/10709/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">演拓空間室內設計</span></a>）</p><p>買房是人生一大要事，不少人會陷入思考，究竟要買新屋還是中古屋比較好，而新屋的屋況中，除了新成屋，還有預售屋跟毛胚屋等，其中不少民眾會擇購買預售屋，因為<a href="https://hhh.com.tw/columns/lists/%E9%A0%90%E5%94%AE%E5%B1%8B-keyword/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">預售屋</span></a>的分期付款壓力較低，議價空間比較有彈性，最大的優點是可以「<a href="https://hhh.com.tw/columns/detail/2104/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">客變</span></a>」，能省下很多<a href="https://hhh.com.tw/deco/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">裝修</span></a>費用。說到這，你可能會好奇，<a href="https://hhh.com.tw/columns/lists/%E5%AE%A2%E8%AE%8A-keyword/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">客變</span></a>意思是什麼，客變流程有哪些，為什麼客變能省錢、具體客變方式有哪些、客變注意事項又指哪些等諸多問題。《幸福空間》在這統整關於客變，大家最常詢問的6大問題，現在就繼續看下去，解開腦中所有問號吧。</p><p> </p><h3><strong><span style="color:#800000;">文章目錄</span></strong></h3><p>。<span style="color:#0000ff;"><a style="color:#0000ff;" href="#A">什麼是客變？</a></span></p><p>。<a href="#B"><span style="color:#0000ff;">所有的地方都能進行客變嗎？</span></a></p><p>。<a href="#C"><span style="color:#0000ff;">客變流程有哪些？</span></a></p><p>。<a href="#D"><span style="color:#0000ff;">客變所需的圖面有哪些（客變圖）？</span></a></p><p>。<a href="#E"><span style="color:#0000ff;">客變方式有哪些？</span></a></p><p>。<a href="#F"><span style="color:#0000ff;">客變費用如何最省錢？</span></a></p><p> </p><h2><span style="color:#800000;font-size:x-large;"><strong><a id="A"></a>Q1. 什麼是客變？</strong></span></h2><p>談到「客變」，就一定要從「預售屋」說起，預售屋所指的是還沒開始建造或正在興建中就開始販售的房屋。這種類型的房子議價空間較大，且具有格局變動彈性，對資金不充裕的人來說，常被視為不錯的選擇。而「<span style="color:#0000ff;"><a style="color:#0000ff;" href="https://hhh.com.tw/columns/detail/2104/#utm_source=RD_GS" target="_blank" rel="noopener">客變</a></span>」也只會發生在預售屋上，客變意思顧名思義就是意指「客戶變更」，也就是在房屋「未建成」之前變更「格局規劃」，請建商在不影響結構安全的前提下，調整內部格局、水電管線配置遷移或更換建材、廚房衛浴設備等，若消費者能把握此階段搶得先機，預先設定好未來的居住型態，便能省下日後敲牆、換建材、換設備等多餘的支出。而為了方便施工，建商通常規定只能做一次變更，也會規定買家必須在一定期間內申請，否則就不得再提出，以免延誤工期。若本身為裝修新手，想藉此打造更貼近生活需求的空間，可找尋專業設計師幫忙規劃，避免重複施工，產生更多花費。</p><p><img alt='幸福空間專欄' style="color:#626262;" src="https://cloud.hhh.com.tw/upload/_hcolumn/content_20200120153810_1.jpg" /></p><p>（圖片提供／<a href="https://hhh.com.tw/cases/detail/d/9139/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">春雨時尚空間設計</span></a>）</p><p>延伸閱讀：<span style="color:#3366ff;"><a style="color:#3366ff;" href="https://hhh.com.tw/column-post.php?id=2945#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">從客變開始造家計劃　風水、機能、美感都到位的完美住宅</span></a></span></p><p>延伸閱讀：<a href="https://hhh.com.tw/columns/detail/5983/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">預售屋客變退料不退工是正常的嗎？</span></a><a id="B"></a></p><p> </p><h2><strong><span style="color:#800000;font-size:x-large;">Q2. 所有的地方都能進行客變嗎？</span></strong></h2><p>根據房產達人<a href="https://hhh.com.tw/search/lists/column/%E8%B3%A3%E5%8E%9D%E9%98%BF%E6%98%8E-keyword/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">賣厝阿明</span></a>指出，「客變」並非能隨心所欲，想改哪裡就改哪裡，有些地方是無法更改：1、房子外觀：窗戶、大門及陽台的位置；2、承重牆、柱；3、管道：水管、天然氣管、糞管（由此可知，廁所、廚房的位置也不能變），如若以人體作比喻，上述這些地方就如同五官位置、骨骼、血管，輕易更改的話，建築主體容易受到破壞，因此在變更格局之前，需得跟專業設計師及建商做充分地討論。<br /><br />至於一般我們可以進行客變的地方則包括了：1、格局：隔間牆，例如，覺得二房太少，想再加一道牆；2、建材：地板的材質；3、設備：建商所附贈的家具設備，如果不滿意可請他不要安裝，例如：馬桶、浴缸、抽風機；4、弱電：即電力配置。若有工作特殊需求，想在房間內多裝插座，可請設計師計算可安裝插座上限及位置。<a id="C"></a></p><p>延伸閱讀：<a href="https://hhh.com.tw/deco/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">裝修攻略懶人包！第一次裝修輕鬆上手</span></a></p><p> </p><h2><span style="color:#800000;font-size:x-large;"><strong>Q3. 客變流程有哪些？</strong></span></h2><p>保險起見，屋主最好在簽約前就向建商確認是否能進行客變，並在簽約時明確告知建商有客變需求，了解有哪些變更內容，以及不可變更事項以及變更注意事項等規定，事先與建商溝通清楚，避免日後產生糾紛。簽約後，建商會於施作到當樓層前發函正式詢問是否進行客變並通知客變期限。通常這段時間為1～2個月，不少屋主經常會覺得措手不及（注意！客變通常只能變更一次）。為了爭取時間做好最充裕的準備，建議屋主於購入預售屋後，立刻向建設公司索取相關資料，著手進行自家空間的規劃，避免時間太過倉促，來不及在期限內完成。若決定找<a href="https://hhh.com.tw/columns/detail/1935/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">設計師</span></a>協助，客變流程大概會細分為以下幾個流程：</p><p>1. 向建設公司索取建築圖與水電圖電子檔</p><p>2. 找設計師規劃客變內容</p><p>3. 於建商通知可客變時，會同設計師、建設公司共同討論客變項目</p><p>4. 建設公司修改圖面</p><p>5. 討論並確認圖面</p><p>6. 簽名確認圖面及加減帳明細</p><p>7. 施工</p><p>8. 完工驗收（攜帶最後完整建築圖與水電圖面，與設計師、建商共同驗收）</p><p>9. 修改<a href="https://hhh.com.tw/columns/detail/5307/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">驗屋</span></a>缺失</p><p>10. 確認驗屋缺失已修正</p><p>11. 三方簽名確認</p><p>12. 交屋</p><p> </p><p><img alt='幸福空間專欄' src="https://cloud.hhh.com.tw/upload/_hcolumn/content_20200120154107_2.jpg" width="500" /></p><p>▲客變流程圖（圖片提供／<span style="color:#0000ff;"><a style="color:#0000ff;" href="https://hhh.com.tw/columns/detail/1935/#utm_source=RD_GS" target="_blank" rel="noopener">界陽＆大司室內設計</a></span>）</p><p><img alt='幸福空間專欄' src="https://cloud.hhh.com.tw/upload/_hcolumn/content_20200120154107_3.jpg" width="500" /></p><p> ▲圖面往返修改範例（圖片提供／<a href="https://hhh.com.tw/designers/cases/13/1-page/new-sort/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">界陽＆大司室內設計</span></a>）</p><p><img alt='幸福空間專欄' src="https://cloud.hhh.com.tw/upload/_hcolumn/content_20200120154411_4.jpg" /></p><p>（圖片提供／<span style="color:#0000ff;"><a style="color:#0000ff;" href="https://hhh.com.tw/designers/cases/28/1-page/new-sort/#utm_source=RD_GS" target="_blank" rel="noopener">張馨/瀚觀室內設計</a></span>）<a id="D"></a></p><p> </p><h2><span style="color:#800000;font-size:x-large;"><strong>Q4. 客變所需的圖面有哪些（客變圖）？</strong></span></h2><p>可詢問建商是否可提供下列圖面的PDF電子檔或AUTOCAD電子檔，部分規模較大的建商可能提供消防火警設備平面圖、消防灑水設備平面圖。</p><p>． 原始現況平面圖</p><p>． 直上層結構平面圖</p><p>． 動力插座設備平面圖</p><p>． 配電照明設備平面圖</p><p>． 冷氣套管預留平面圖</p><p>． 給水設備平面圖</p><p>． 污排水（含冷氣排水）設備平面圖</p><p>． 電信設備平面圖</p><p>． 弱電設備平面圖（含電視、網路、對講機、防盜）</p><p>． 配電盤單線圖</p><p><img alt='幸福空間專欄' src="https://cloud.hhh.com.tw/upload/_hcolumn/content_20200120154411_5.jpg" /></p><p>▲原始現況平面圖（圖片提供／<a href="https://hhh.com.tw/columns/detail/2030/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">昱承室內設計</span></a>）</p><p><img alt='幸福空間專欄' src="https://cloud.hhh.com.tw/upload/_hcolumn/content_20200120154411_6.jpg" /></p><p> ▲平面規劃圖（圖片提供／<a href="https://hhh.com.tw/columns/detail/2030/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">昱承室內設計</span></a>）</p><p><img alt='幸福空間專欄' style="color:#626262;" src="https://cloud.hhh.com.tw/upload/_hcolumn/content_20200120154411_7.jpg" /></p><p> ▲配電照明設備平面圖（圖片提供／<a href="https://hhh.com.tw/columns/detail/2030/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">昱承室內設計</span></a>）</p><p><a id="E"></a>延伸閱讀：<a href="https://hhh.com.tw/columns/detail/5781/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">【新手買房的八堂課】第五堂 傢配圖怎麼看？看預售屋的小撇步！</span></a></p><p> </p><h2><span style="color:#800000;font-size:x-large;"><strong>Q5. 客變方式有哪些？</strong></span></h2><p>主要有「格局變動」、「水電配置」、「設備選退」、「建材替換」四大項目。像是改門、拆牆、增加隔間或牆面，都屬於格局變動，而插座增減、廚房用水位置變更、廁所用水位置變更等都屬於水電配置。不喜歡建商配的廚具或衛浴品牌設備，想換成自己中意的品牌商品，屬於設備選退。想把地坪（木地板、拋光石英磚……等）、壁面或廚衛的材質（磁磚）更換掉屬於建材替換。</p><p><img alt='幸福空間專欄' src="https://cloud.hhh.com.tw/upload/_hcolumn/content_20200120154411_8.jpg" /></p><p>（圖片提供／幸福空間）</p><p> </p><h3><span style="color:#008080;font-size:large;"><strong>客變項目1：格局變動</strong></span></h3><p>格局變動是購買預售屋的最大優勢，其內容大致可分為「改門」、「拆牆」及「加牆」。而常見的工程如增減房間數、擴大客廳格局、將廚房牆面拆除變成開放式空間……等，這種「大手術」的格局變動，建議盡量在客變時完成，若規劃得宜，不僅可以更貼近居住者的理想，還能大幅降低日後的工程費用。</p><h3><span style="color:#008080;font-size:large;"><strong>客變項目2：格局變動水電及插座配置</strong></span></h3><p>水電配置與日後生活息息相關，更是裝修時不容輕忽的地方，可利用建商提供的平面圖，事先規劃好供水及排水系統，將廚房及廁所的用水位置安排妥當，並估算好所需的插座數量及位置，避免往後又要再加迴路的情形發生。</p><h3><span style="color:#008080;font-size:large;"><strong>客變項目3：建材更換</strong></span></h3><p>就建材上可以選擇「接受贈配」或「退掉另換」。一般來說，建商會提供不同種類、多樣化的款式讓屋主挑選，如地坪（木地板、拋光石英磚）、壁材（油漆）、廚房及衛浴（磁磚）是否更換。在進行客變溝通前，可以事先設定好自己喜愛的居家風格，再挑選適合的建材來搭配，若建商提供的建材選項都不符合需求，也可以直接退掉，留待裝修時再由設計公司處理。建商提供的建材品質及款式都具有一定的水準，也因為建商有長久合作的廠商又是大量進貨，多半也比後續屋主自行訂購來得便宜，所以除非與想像中落差很大，否則建議可以保留不做更換，這樣將能大幅節省支出。</p><h3><span style="color:#008080;font-size:large;"><strong>客變項目4：設備退換</strong></span></h3><p>倘落你本身有特別偏好特定的廚具及衛浴品牌，且建商提供的設備並不符合期待，在客變中也能進行退換。但若想減少花費，建議可以保留原本廚具，再依生活習慣做局部調整，像是移動爐灶位置，避免動工拆除又安裝，花上大筆費用。</p><p><img alt='幸福空間專欄' src="https://cloud.hhh.com.tw/upload/_hcolumn/content_20210830120540_0.jpg" /></p><p>（圖片提供／春雨時尚空間設計）<a id="F"></a></p><p> </p><h2><span style="color:#800000;font-size:x-large;"><strong>Q6. 客變費用如何最省錢？</strong></span></h2><p>客變注意事項中，費用是很重要的。客變的內容並不是每一項都免費，會依情況增加或刪減費用。這部分可在建設公司就客變內容的增減項目條列出的加減帳明細清楚確認。這裡要提醒大家，表單上面的單價是不能議價的，只需要確認內容數量是否正確。但一般來說，建商因大量進貨，單品價格會低於市價，若建材品質及款式與想像中的落差沒有很大，建議保留下來，節省開支。</p><p>另外，若能在客變前分配好插座位置及數量，能省去後續追加插座數的費用；若想做局部變更，但建商不接受，可以請建商直接不要安裝，待室內設計師規劃好後再加裝適合的建材，節省拆除費用；懶得清理又想兼顧視覺美感的人，可使用類建材壁紙，呈現文化石、清水模等建材的質感，省下大筆花費。</p><p>最重要的還是，確切了解自身需求，與<a href="https://hhh.com.tw/columns/detail/4389/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">設計師</span></a>討論出最周延的室內設計規劃，才能徹底善用建商資源，達到省錢的目的。</p><div class="photos-gallery"><img alt='幸福空間專欄' src="https://cloud.hhh.com.tw/upload/_hcolumn/content_20210815123119_0.jpg" /></div><p>（圖片提供／<a href="https://hhh.com.tw/cases/detail/13311/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">水設空間室內設計工坊</span></a>）</p><p><img alt='幸福空間專欄' src="https://cloud.hhh.com.tw/upload/_hcolumn/content_20200120154411_9.jpg" /></p><p>（圖片提供／<a href="https://hhh.com.tw/photos/detail/11920/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">奧立佛 x 竺居聯合設計</span></a>）</p><p><img alt='幸福空間專欄' src="https://m.hhh.com.tw/upload/_hcolumn/content_20211123094409_0.jpg" width="500" /></p><p>▲加減帳項目需明列，避免未來施工爭議。</p><p>延伸閱讀：<span style="color:#3366ff;"><a style="color:#3366ff;" href="https://hhh.com.tw/column-post.php?id=4286#utm_source=RD_GS" target="_blank" rel="noopener"><span style="color:#0000ff;">【新手裝修攻略】裝修前搞懂這7點，20年後也超好住！</span></a></span></p>
    1530. 

  1530. <div class="article__contexts__note">
    1531. 

  1531. <p>撰文：May、Jennifer</p><p>圖片來源：<a href="https://hhh.com.tw/cases/detail/10709/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="text-decoration:underline;">演拓空間室內設計</span></a>、<a href="https://hhh.com.tw/cases/detail/d/9139/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="text-decoration:underline;">春雨時尚空間設計</span></a>、<a href="https://hhh.com.tw/columns/detail/1935/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="text-decoration:underline;">界陽＆大司室內設計</span></a>、<a href="https://hhh.com.tw/designers/cases/28/1-page/new-sort/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="text-decoration:underline;">張馨/瀚觀室內設計</span></a>、<a href="https://hhh.com.tw/columns/detail/2030/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="text-decoration:underline;">昱承室內設計</span></a>、<a href="https://hhh.com.tw/cases/detail/13311/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="text-decoration:underline;">水設空間室內設計工坊</span></a>、<a href="https://hhh.com.tw/photos/detail/11920/#utm_source=RD_GS" target="_blank" rel="noopener"><span style="text-decoration:underline;">奧立佛 x 竺居聯合設計</span></a></p>
    1532. 

  1532. </div>
    1533. 

  1533. </div>
    1534. 

  1534. </div>
    1535. 

  1535. 

  1536. </div>
    1537. 

  1537. </div>
    1538. 

  1538. </section>
    1539. 

  1539. <section class="scMedia mt-md-5">
    1540. 

  1540. <div class="container">
    1541. 

  1541. <div class="scMedia__block">
    1542. 

  1542. <div class="scMedia__list">
    1543. 

  1543. <a href="javascript:void(0)" id="fb">
    1544. 

  1544. <img src="/assets/images/rv_web/fb.svg" alt="幸福空間fb分享">
    1545. 

  1545. </a>
    1546. 

  1546. <a href="javascript:void(0)" id="line">
    1547. 

  1547. <img src="/assets/images/rv_web/line.svg" alt="幸福空間line分享">
    1548. 

  1548. </a>
    1549. 

  1549. <a href="javascript:void(0)" id="wechat">
    1550. 

  1550. <img src="/assets/images/rv_web/wechat.svg" alt="幸福空間wechat分享">
    1551. 

  1551. </a>
    1552. 

  1552. <a href="javascript:void(0)" id="mail_forward">
    1553. 

  1553. <img src="/assets/images/rv_web/share.svg" alt="幸福空間轉寄">
    1554. 

  1554. </a>
    1555. 

  1555. <a href="javascript:addToFavorite(4300)" class="like-icon">
    1556. 

  1556. <img class="like-o" src="/assets/images/rv_web/like-o.svg" alt="幸福空間收藏">
    1557. 

  1557. <img class="like" src="/assets/images/rv_web/like.svg" alt="幸福空間收藏">
    1558. 

  1558. </a>
    1559. 

  1559. </div>
    1560. 

  1560. </div>
    1561. 

  1561. </div>
    1562. 

  1562. </section>
    1563. 

  1563. <section class="relTag d-block d-md-none">
    1564. 

  1564. <div class="container pl-md-4 pr-md-0">
    1565. 

  1565. <div class="row">
    1566. 

  1566. <div class="col-12">
    1567. 

  1567. <h4>標籤</h4>
    1568. 

  1568. <div class="d-flex flex-wrap justify-content-start py-md-3">
    1569. 

  1569. <a class="btn btn-outline-custom rounded-0" href="/columns/lists/新手裝修攻略-keyword/">新手裝修攻略</a><a class="btn btn-outline-custom rounded-0" href="/columns/lists/客變-keyword/">客變</a><a class="btn btn-outline-custom rounded-0" href="/columns/lists/預售屋-keyword/">預售屋</a><a class="btn btn-outline-custom rounded-0" href="/columns/lists/買房-keyword/">買房</a>
    1570. 

  1570. </div>
    1571. 

  1571. </div>
    1572. 

  1572. </div>
    1573. 

  1573. </div>
    1574. 

  1574. </section>
    1575. 

  1575. <section class="relTag d-none d-md-block">
    1576. 

  1576. <div class="container relTag__items">
    1577. 

  1577. <div class="relTag__items__title pl-md-3">
    1578. 

  1578. <h4>標籤</h4>
    1579. 

  1579. </div>
    1580. 

  1580. <div class="relTag__items__tags">
    1581. 

  1581. <a class="btn btn-outline-custom rounded-0" href="/columns/lists/新手裝修攻略-keyword/">新手裝修攻略</a><a class="btn btn-outline-custom rounded-0" href="/columns/lists/客變-keyword/">客變</a><a class="btn btn-outline-custom rounded-0" href="/columns/lists/預售屋-keyword/">預售屋</a><a class="btn btn-outline-custom rounded-0" href="/columns/lists/買房-keyword/">買房</a>
    1582. 

  1582. </div>
    1583. 

  1583. </div>
    1584. 

  1584. </section>
    1585. 

  1585. <section class="likeSee" id="search">
    1586. 

  1586. <div class="container">
    1587. 

  1587. <div class="row">
    1588. 

  1588. <div class="col-12">
    1589. 

  1589. <div class="likeSee__state px-md-0">
    1590. 

  1590. <div class="likeSee__state__title">
    1591. 

  1591. <h4>你可能想看</h4>
    1592. 

  1592. </div>
    1593. 

  1593. <div class="likeSee__state__filter">
    1594. 

  1594. <a href="javascript:void(0)" class="likeSee__state__filter--item " :class="type == 'hot' ? 'active':''" @click="change_type('hot')">
    1595. 

  1595. <span>人氣</span>
    1596. 

  1596. </a>
    1597. 

  1597. <span class="likeSee__state__filter--divider"></span>
    1598. 

  1598. <a href="javascript:void(0)" class="likeSee__state__filter--item" :class="type == 'new' ? 'active':''" @click="change_type('new')">
    1599. 

  1599. <span>最新</span>
    1600. 

  1600. </a>
    1601. 

  1601. </div>
    1602. 

  1602. </div>
    1603. 

  1603. </div>
    1604. 

  1604. <template v-if="type=='new'">
    1605. 

  1605. <template v-for="(img,index) in data_new">
    1606. 

  1606. <div class="col-12 col-md-4" :class="index == 1 ? 'mt-md-4':''" :class="index > 2 && index%3==1 ? 'mt-md-3':''" :style="(index > 2 && index%3!=1) ? 'margin-top: -2rem':''">
    1607. 

  1607. <div class="cardList__items">
    1608. 

  1608. <a :href="'/columns/detail/'+img.hcolumn_id+'/'" target="_blank">
    1609. 

  1609. <div class="cardList__items__bgImg" :style="'background-image: url('+img.clogo+');'">
    1610. 

  1610. <div class="new" v-if="check_date(img.sdate)">
    1611. 

  1611. <span>NEW</span>
    1612. 

  1612. </div>
    1613. 

  1613. </div>
    1614. 

  1614. </a>
    1615. 

  1615. <div class="cardList__items__content">
    1616. 

  1616. <a :href="'/columns/detail/'+img.hcolumn_id+'/'" target="_blank">
    1617. 

  1617. <div class="cardList__items--title cardList__items--ellipse">{{img.ctitle}}
    1618. 

  1618. </div>
    1619. 

  1619. </a>
    1620. 

  1620. <p v-html="filter_tag(img.ctag)">
    1621. 

  1621. </p>
    1622. 

  1622. </div>
    1623. 

  1623. </div>
    1624. 

  1624. </div>
    1625. 

  1625. </template>
    1626. 

  1626. </template>
    1627. 

  1627. <template v-else-if="type=='hot'">
    1628. 

  1628. <template v-for="(img,index) in data_hot">
    1629. 

  1629. <div class="col-12 col-md-4">
    1630. 

  1630. <div class="cardList__items">
    1631. 

  1631. <a :href="'/columns/detail/'+img.hcolumn_id+'/'" target="_blank">
    1632. 

  1632. <div class="cardList__items__bgImg" :style="'background-image: url('+img.clogo+');'">
    1633. 

  1633. <div class="new" v-if="check_date(img.sdate)">
    1634. 

  1634. <span>NEW</span>
    1635. 

  1635. </div>
    1636. 

  1636. </div>
    1637. 

  1637. </a>
    1638. 

  1638. <div class="cardList__items__content">
    1639. 

  1639. <a :href="'/columns/detail/'+img.hcolumn_id+'/'" target="_blank">
    1640. 

  1640. <div class="cardList__items--title cardList__items--ellipse">{{img.ctitle}}
    1641. 

  1641. </div>
    1642. 

  1642. </a>
    1643. 

  1643. <p v-html="filter_tag(img.ctag)">
    1644. 

  1644. </p>
    1645. 

  1645. </div>
    1646. 

  1646. </div>
    1647. 

  1647. </div>
    1648. 

  1648. </template>
    1649. 

  1649. </template>
    1650. 

  1650. </div>
    1651. 

  1651. </div>
    1652. 

  1652. <div class="d-flex justify-content-center py-3 py-md-5" v-if="is_update == 1 && data_end == 0">
    1653. 

  1653. <div>
    1654. 

  1654. <img class="loading-move" src="/assets/images/rv_web/loading.svg" alt="loading">
    1655. 

  1655. </div>
    1656. 

  1656. </div>
    1657. 

  1657. <div class="modal fade" id="forward_modal" tabindex="-1" role="dialog" aria-labelledby="forwardModalLabel" aria-hidden="true">
    1658. 

  1658. <div class="modal-dialog modal-dialog-centered" role="document">
    1659. 

  1659. <div class="modal-content">
    1660. 

  1660. <div class="modal-header">
    1661. 

  1661. <h5 class="modal-title text-primary font-weight-bold" id="forwardModalLabel">轉寄好友</h5>
    1662. 

  1662. </div>
    1663. 

  1663. <div class="modal-body">
    1664. 

  1664. <div class="col">
    1665. 

  1665. <div class="input-group">
    1666. 

  1666. <input type="text" class="form-control fm-input-border" placeholder="收件人email" name="email" v-model="email" id="email">
    1667. 

  1667. <div class="input-group-append">
    1668. 

  1668. <button class="btn btn-outline-secondary " id="button-fm" type="button" @click="putEmail()"><i class="fa fa-plus fm-plus" aria-hidden="true"></i></button>
    1669. 

  1669. </div>
    1670. 

  1670. </div>
    1671. 

  1671. <div class="text-right">
    1672. 

  1672. <small class="text-danger" id="email_error">email 格式有誤</small>
    1673. 

  1673. </div>
    1674. 

  1674. </div>
    1675. 

  1675. <div class="col mb-3 d-flex flex-wrap">
    1676. 

  1676. <template v-for="e in emailArray">
    1677. 

  1677. <span class="text-primary fm-email-btnWrapper m-1">
    1678. 

  1678. <span class="fm-email-btn">
    1679. 

  1679. <small class="mr-1">{{e}}</small>
    1680. 

  1680. <i class="fa fa-times-circle fm-close" aria-hidden="true" @click="del_email(e)"></i>
    1681. 

  1681. </span>
    1682. 

  1682. </span>
    1683. 

  1683. </template>
    1684. 

  1684. </div>
    1685. 

  1685. <div class="col mb-3">
    1686. 

  1686. <input type="text" class="form-control font-weight-bold " v-model="forward_title" placeholder="標題:引景入室，訴說自然氛圍">
    1687. 

  1687. </div>
    1688. 

  1688. <div class="col mb-3">
    1689. 

  1689. <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" name="content" v-model="content" placeholder="內容"></textarea>
    1690. 

  1690. </div>
    1691. 

  1691. </div>
    1692. 

  1692. <div class="modal-button-wrapper d-flex justify-content-center mb-4">
    1693. 

  1693. <a href="javascript:void(0)" class="btn modal-button mr-2 active" @click="doSend()">送出</a>
    1694. 

  1694. <a href="javascript:void(0)" class="btn modal-button" data-dismiss="modal">取消</a>
    1695. 

  1695. </div>
    1696. 

  1696. </div>
    1697. 

  1697. </div>
    1698. 

  1698. </div>
    1699. 

  1699. </section>
    1700. 

  1700. <br>
    1701. 

  1701. <br>
    1702. 

  1702. <br>
    1703. 

  1703. <br>
    1704. 

  1704. <footer class="footer pt-1 d-none d-lg-block" style="margin-bottom: 44px;">
    1705. 

  1705. <div class="container px-0">
    1706. 

  1706. <div class="row justify-content-center">
    1707. 

  1707. <div class="col-md-12 py-5">
    1708. 

  1708. <div class="row">
    1709. 

  1709. <div class="col-md-4 d-flex justify-content-around footer-block">
    1710. 

  1710. <div class="footer-box footer-contact">
    1711. 

  1711. <span class="font-weight-bold">相關連結</span>
    1712. 

  1712. <div class="footer-content mt-2">
    1713. 

  1713. <a href="http://gstv.com.tw/" target="_blank">
    1714. 

  1714. <img class="mr-2" src="/assets/images/footer-hhh-logo.svg" alt="幸福空間居家台" width="25px">
    1715. 

  1715. 幸福空間居家台
    1716. 

  1716. </a>
    1717. 

  1717. </div>
    1718. 

  1718. <div class="footer-content mt-2">
    1719. 

  1719. <a href="https://event.hhh.com.tw/contest/2018/" target="_blank">
    1720. 

  1720. <img class="mr-2" src="/assets/images/index/medal.svg" alt="ADA 亞洲設計獎" width="25px">
    1721. 

  1721. ADA 亞洲設計獎
    1722. 

  1722. </a>
    1723. 

  1723. </div>
    1724. 

  1724. <div class="footer-content mt-2">
    1725. 

  1725. <a href="https://event.hhh.com.tw/2019global-award/" target="_blank">
    1726. 

  1726. <img class="mr-2" src="/assets/images/index/trouph.svg" alt="國際設計大獎代辦" width="25px">
    1727. 

  1727. 國際設計大獎代辦
    1728. 

  1728. </a>
    1729. 

  1729. </div>
    1730. 

  1730. <div class="footer-content mt-2">
    1731. 

  1731. <a href="https://www.leju.com.tw/" target="_blank" onClick="javascript:gaEvent('連結 - 樂居網','點擊')">
    1732. 

  1732. <img class="mr-2" src="/assets/images/leju.png" alt="樂居網" width="25px">
    1733. 

  1733. 樂居網
    1734. 

  1734. </a>
    1735. 

  1735. </div>
    1736. 

  1736. <div class="footer-content mt-2">
    1737. 

  1737. <a href="https://shop.hhh.com.tw/" target="_blank" onClick="javascript:gaEvent('連結 - +好物','點擊')">
    1738. 

  1738. <img class="mr-2" src="/assets/images/shopping-01.svg" alt="+好物" width="25px">
    1739. 

  1739. +好物
    1740. 

  1740. </a>
    1741. 

  1741. </div>
    1742. 

  1742. </div>
    1743. 

  1743. </div>
    1744. 

  1744. <div class="col-md-4 d-flex justify-content-around footer-block">
    1745. 

  1745. <div class="footer-box">
    1746. 

  1746. <span class="font-weight-bold">相關社群</span>
    1747. 

  1747. <div class="footer-content mt-3">
    1748. 

  1748. <div class="d-flex justify-content-around">
    1749. 

  1749. <a href="https://www.facebook.com/hhhfb" target="_blank">
    1750. 

  1750. <div class="footer-media">
    1751. 

  1751. <img class="footer-media-item before" src="/assets/images/section/icon/media/fb.svg" alt="fb" width="50" height="50" alt="fb">
    1752. 

  1752. <img class="footer-media-item after" src="/assets/images/section/icon/media/fb_h.svg" alt="fb" width="50" height="50" alt="fb">
    1753. 

  1753. </div>
    1754. 

  1754. </a>
    1755. 

  1755. <a href="https://line.me/ti/p/%40ovs4341s" target="_blank">
    1756. 

  1756. <div class="footer-media">
    1757. 

  1757. <img class="footer-media-item before" src="/assets/images/section/icon/media/ln.svg" alt="line" width="50" height="50" alt="line">
    1758. 

  1758. <img class="footer-media-item after" src="/assets/images/section/icon/media/ln_h.svg" alt="line" width="50" height="50" alt="line">
    1759. 

  1759. </div>
    1760. 

  1760. </a>
    1761. 

  1761. <a href="https://www.youtube.com/user/gorgeousspace" target="_blank">
    1762. 

  1762. <div class="footer-media">
    1763. 

  1763. <img class="footer-media-item before" src="/assets/images/section/icon/media/yt.svg" alt="youtube" width="50" height="50" alt="youtube">
    1764. 

  1764. <img class="footer-media-item after" src="/assets/images/section/icon/media/yt_h.svg" alt="youtube" width="50" height="50" alt="youtube">
    1765. 

  1765. </div>
    1766. 

  1766. </a>
    1767. 

  1767. <a href="https://www.instagram.com/gorgeous_space/" target="_blank">
    1768. 

  1768. <div class="footer-media">
    1769. 

  1769. <img class="footer-media-item before" src="/assets/images/section/icon/media/ig.svg" alt="ig" width="50" height="50" alt="ig">
    1770. 

  1770. <img class="footer-media-item after" src="/assets/images/section/icon/media/ig_h.svg" alt="ig" width="50" height="50" alt="ig">
    1771. 

  1771. </div>
    1772. 

  1772. </a>
    1773. 

  1773. </div>
    1774. 

  1774. <div class="d-flex justify-content-center mt-3">
    1775. 

  1775. <a href="https://www.facebook.com/agent.hhh.com.tw" class="footer-media-wrapper" target="_blank">
    1776. 

  1776. <div class="footer-media d-flex align-items-center font-weight-bold mx-3">
    1777. 

  1777. <span class="mr-1">
    1778. 

  1778. <img class="footer-media-item before" src="/assets/images/section/icon/media/fb.svg" alt="fb" width="20" height="20" alt="fb">
    1779. 

  1779. <img class="footer-media-item after" src="/assets/images/section/icon/media/fb_h.svg" alt="fb" width="20" height="20" alt="fb">
    1780. 

  1780. </span>
    1781. 

  1781. <span>幸福經紀人</span>
    1782. 

  1782. </div>
    1783. 

  1783. </a>
    1784. 

  1784. <a href="https://www.facebook.com/retire.tw/" class="footer-media-wrapper" target="_blank">
    1785. 

  1785. <div class="footer-media d-flex align-items-center font-weight-bold mx-3">
    1786. 

  1786. <span class="mr-1">
    1787. 

  1787. <img class="footer-media-item before" src="/assets/images/section/icon/media/fb.svg" alt="fb" width="20" height="20" alt="fb">
    1788. 

  1788. <img class="footer-media-item after" src="/assets/images/section/icon/media/fb_h.svg" alt="fb" width="20" height="20" alt="fb">
    1789. 

  1789. </span>
    1790. 

  1790. <span>退休好幸福</span>
    1791. 

  1791. </div>
    1792. 

  1792. </a>
    1793. 

  1793. </div>
    1794. 

  1794. </div>
    1795. 

  1795. </div>
    1796. 

  1796. </div>
    1797. 

  1797. <div class="col-md-4 d-flex justify-content-around footer-block">
    1798. 

  1798. <div class="footer-box">
    1799. 

  1799. <h5 class="invisible">xxx</h5>
    1800. 

  1800. <div class="footer-content mt-3 text-center">
    1801. 

  1801. <span class="footer-content-tel">
    1802. 

  1802. 幸福經紀人免付費諮詢專線
    1803. 

  1803. <a href="tel:0800366086" class="text-primary text-photo-color">0800-366-086</a>
    1804. 

  1804. </span>
    1805. 

  1805. <div class="footer-note mt-2 d-flex justify-content-center px-3">
    1806. 

  1806. <div class="px-2 footer-note-item">
    1807. 

  1807. <span><a href="/about/contact" target="_blank">聯絡我們</a></span>
    1808. 

  1808. </div>
    1809. 

  1809. <div class="px-2 footer-note-item">
    1810. 

  1810. <span><a href="/about/privacy_policy" target="_blank">隱私保護</a></span>
    1811. 

  1811. </div>
    1812. 

  1812. <div class="px-2 footer-note-item">
    1813. 

  1813. <span><a href="/about" target="_blank">關於本站</a></span>
    1814. 

  1814. </div>
    1815. 

  1815. </div>
    1816. 

  1816. <div class="footer-note mt-2 d-flex px-3">
    1817. 

  1817. <div class="px-2 footer-note-item">
    1818. 

  1818. <span><a href="/about/timeline" target="_blank">公司歷程</a></span>
    1819. 

  1819. </div>
    1820. 

  1820. <div class="px-2 footer-note-item">
    1821. 

  1821. <span><a href="https://www.104.com.tw/company/d6hr8sg" target="_blank">工作機會</a></span>
    1822. 

  1822. </div>
    1823. 

  1823. <div class="px-2 footer-note-item">
    1824. 

  1824. <span><a href="/about/sitemap" target="_blank">網站地圖</a></span>
    1825. 

  1825. </div>
    1826. 

  1826. </div>
    1827. 

  1827. </div>
    1828. 

  1828. </div>
    1829. 

  1829. </div>
    1830. 

  1830. </div>
    1831. 

  1831. </div>
    1832. 

  1832. </div>
    1833. 

  1833. <div class="text-center py-4 footer-divider-horizon">
    1834. 

  1834. <div class="footer-content">
    1835. 

  1835. <div class="footer-copyright">
    1836. 

  1836. 幸福空間 版權所有© Gorgeous Space Co.Ltd. All Rights Reserved
    1837. 

  1837. </div>
    1838. 

  1838. </div>
    1839. 

  1839. </div>
    1840. 

  1840. </div>
    1841. 

  1841. <div id="toast" style="display: block">
    1842. 

  1842. <div id="toastTable">
    1843. 

  1843. <div id="toastTextColumn">
    1844. 

  1844. <div class="textToast">
    1845. 

  1845. 為提供您更優質的網站瀏覽體驗，本網站使用cookie取得資訊，若您繼續瀏覽我們的網站，表示您同意我們使用cookie。 <a href="/about/privacy_policy" target="_blank">了解隱私權保護</a>.
    1846. 

  1846. </div>
    1847. 

  1847. </div>
    1848. 

  1848. <div id="toastButtonColumn">
    1849. 

  1849. <button id="buttonToast" class="btn btn-default" onclick="cookiesAccepted()">
    1850. 

  1850. 我知道了
    1851. 

  1851. </button>
    1852. 

  1852. </div>
    1853. 

  1853. </div>
    1854. 

  1854. </div>
    1855. 

  1855. </footer>
    1856. 

  1856. <div class="gotop-btn-wrapper" style="display: none">
    1857. 

  1857. <img class="gotop-btn" src="/assets/images/section/icon/new-tool-icon/top1.svg" alt="top">
    1858. 

  1858. </div>
    1859. 

  1859. <section class="footer-fix fixed-bottom">
    1860. 

  1860. <div class="footer-fix-block py-1">
    1861. 

  1861. <div class="d-flex">
    1862. 

  1862. <div class="footer-fix-wrapper">
    1863. 

  1863. <a href="/about/request" target="_blank">
    1864. 

  1864. <img class="footer-fix-img" src="/assets/images/section/icon/mobile/phone.svg" height="24px" width="24px" alt="phone">
    1865. 

  1865. <div class="footer-fix-title">
    1866. 

  1866. 找諮詢
    1867. 

  1867. </div>
    1868. 

  1868. </a>
    1869. 

  1869. </div>
    1870. 

  1870. <div class="footer-fix-wrapper">
    1871. 

  1871. <a href="/about/calculator" target="_blank">
    1872. 

  1872. <img class="footer-fix-img" src="/assets/images/section/icon/mobile/calculator-6.svg" height="24px" width="24px" alt="calculator">
    1873. 

  1873. <div class="footer-fix-title">
    1874. 

  1874. 估預算
    1875. 

  1875. </div>
    1876. 

  1876. </a>
    1877. 

  1877. </div>
    1878. 

  1878. <div class="footer-fix-wrapper" id="searchall">
    1879. 

  1879. <img class="footer-fix-img" src="/assets/images/section/icon/mobile/license-5.svg" height="24px" width="24px" alt="search">
    1880. 

  1880. <div class="footer-fix-title">
    1881. 

  1881. 裝修導航GPS
    1882. 

  1882. </div>
    1883. 

  1883. </div>
    1884. 

  1884. <div class="footer-fix-wrapper">
    1885. 

  1885. <a href="/program">
    1886. 

  1886. <img class="footer-fix-img" src="/assets/images/section/icon/mobile/calendar.svg" height="24px" width="24px" alt="calendar">
    1887. 

  1887. <div class="footer-fix-title">
    1888. 

  1888. TV節目表
    1889. 

  1889. </div>
    1890. 

  1890. </a>
    1891. 

  1891. </div>
    1892. 

  1892. <div class="footer-fix-wrapper">
    1893. 

  1893. <a href="/login/index">
    1894. 

  1894. <img class="footer-fix-img" src="/assets/images/section/icon/mobile/user.svg" height="24px" width="24px" alt="user">
    1895. 

  1895. <div class="footer-fix-title">
    1896. 

  1896. 會員登入
    1897. 

  1897. </div>
    1898. 

  1898. </a>
    1899. 

  1899. </div>
    1900. 

  1900. </div>
    1901. 

  1901. </div>
    1902. 

  1902. </section>
    1903. 

  1903. <script>
    1904. 

  1904. 

  1905.         $('#deco').on('click',  function(event) {
    1906. 

  1906.             event.preventDefault();
    1907. 

  1907.             
    1908. 

  1908.             location.href="/decoquery/lists/address/"
    1909. 

  1909.         });
    1910. 

  1910.     </script>
    1911. 

  1911. <script>
    1912. 

  1912.     function cookiesAccepted()
    1913. 

  1913.     {
    1914. 

  1914.         Cookies.set('cookieaccepted', "hide", 365);
    1915. 

  1915.         $('#toast').hide();
    1916. 

  1916.         $('.footer').attr('style','');
    1917. 

  1917.     }
    1918. 

  1918. 

  1919. 

  1920.     window.Cookies = {
    1921. 

  1921.         set: function (key, value, days) {
    1922. 

  1922.             if (!days) {
    1923. 

  1923.                 days = 0.5;
    1924. 

  1924.             }
    1925. 

  1925.             var date = new Date();
    1926. 

  1926.             date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    1927. 

  1927.             var expires = "; expires=" + date.toGMTString();
    1928. 

  1928.             document.cookie = key + "=" + window.escape(value) + expires + "; path=/";
    1929. 

  1929.         }
    1930. 

  1930.     };
    1931. 

  1931. 

  1932.     window.onscroll = function() {myFunction()};
    1933. 

  1933. 

  1934.     function myFunction() {
    1935. 

  1935.          
    1936. 

  1936.       if (window.scrollY > 0 ) {
    1937. 

  1937.         $('.gotop-btn-wrapper').fadeIn('50');
    1938. 

  1938.       } 
    1939. 

  1939.       else
    1940. 

  1940.       {
    1941. 

  1941.         $('.gotop-btn-wrapper').fadeOut('50');
    1942. 

  1942.       }
    1943. 

  1943.     }
    1944. 

  1944.      $('#line').click(function(event) {
    1945. 

  1945. 

  1946.         if (location.hostname == 'm.hhh.com.tw') {
    1947. 

  1947.             var url = 'https://hhh.com.tw';
    1948. 

  1948.         } else if (location.hostname == 'stage-m.hhh.com.tw') {
    1949. 

  1949.             var url = 'https://stage.hhh.com.tw';
    1950. 

  1950.         }
    1951. 

  1951.         else{
    1952. 

  1952.             var url ='http://'+location.hostname;
    1953. 

  1953.         }
    1954. 

  1954. 

  1955.         window.open('https://www.addtoany.com/add_to/line?linkurl='+encodeURI(url+location.pathname+location.search)+'&amp;linkname=');
    1956. 

  1956.     });
    1957. 

  1957. 

  1958.     $('#fb').click(function(event) {
    1959. 

  1959.         if (location.hostname == 'm.hhh.com.tw') {
    1960. 

  1960.             var url = 'https://hhh.com.tw';
    1961. 

  1961.         } else if (location.hostname == 'stage-m.hhh.com.tw') {
    1962. 

  1962.             var url = 'https://stage.hhh.com.tw';
    1963. 

  1963.         }
    1964. 

  1964.         else{
    1965. 

  1965.             var url ='http://'+location.hostname;
    1966. 

  1966.         }
    1967. 

  1967.         window.open('https://www.addtoany.com/add_to/facebook?linkurl='+encodeURI(url+location.pathname+location.search)+'&amp;linkname=');
    1968. 

  1968.     });
    1969. 

  1969. 

  1970.     $('#wechat').click(function(event) {
    1971. 

  1971.         if (location.hostname == 'm.hhh.com.tw') {
    1972. 

  1972.             var url = 'https://hhh.com.tw';
    1973. 

  1973.         } else if (location.hostname == 'stage-m.hhh.com.tw') {
    1974. 

  1974.             var url = 'https://stage.hhh.com.tw';
    1975. 

  1975.         }
    1976. 

  1976.         else{
    1977. 

  1977.             var url ='http://'+location.hostname;
    1978. 

  1978.         }
    1979. 

  1979.         window.open('https://www.addtoany.com/add_to/wechat?linkurl='+encodeURI(url+location.pathname+location.search)+'&amp;linkname=');
    1980. 

  1980.     });
    1981. 

  1981. 

  1982.     
    1983. 

  1983.  </script>
    1984. 

  1984. <script src="/assets/js/loadmask/jquery.loadmask.js"></script>
    1985. 

  1985. <script src="/assets/js/popper.min.js"></script>
    1986. 

  1986. <script src="/assets/js/bootstrap.min.js"></script>
    1987. 

  1987. <script src="/assets/js/all.js"></script>
    1988. 

  1988. <script src="/assets/js/vue-waterfall.min.js"></script>
    1989. 

  1989. <script src="/assets/js/sweetalert2.all.min.js"></script>
    1990. 

  1990. <script src="/assets/js/swiper.min.js"></script>
    1991. 

  1991. <script>
    1992. 

  1992. 

  1993.     if (history.scrollRestoration) {
    1994. 

  1994.         history.scrollRestoration = 'manual';
    1995. 

  1995.     }
    1996. 

  1996. 

  1997.     $('#loading').mask(" ");
    1998. 

  1998. 

  1999.     var DateDiff = function (sDate1, sDate2) { // sDate1 和 sDate2 是 2016-06-18 格式
    2000. 

  2000.         var aDate, oDate1, oDate2, iDays
    2001. 

  2001.         aDate = sDate1.split("-")
    2002. 

  2002.         oDate1 = new Date(aDate[1] + '/' + aDate[2] + '/' + aDate[0]) // 轉換為 06/18/2016 格式
    2003. 

  2003.         aDate = sDate2.split("-")
    2004. 

  2004.         oDate2 = new Date(aDate[1] + '/' + aDate[2] + '/' + aDate[0])
    2005. 

  2005.         iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24) // 把相差的毫秒數轉換為天數
    2006. 

  2006.         return iDays;
    2007. 

  2007.     };
    2008. 

  2008. 

  2009.     window.onload = function() {
    2010. 

  2010.       const first = document.querySelector('.article__contexts').childNodes[1].nodeName.toLocaleLowerCase();
    2011. 

  2011.       const sec = document.querySelector('.article__contexts').childNodes[3].nodeName.toLocaleLowerCase();
    2012. 

  2012.       $( "<div class='article__readMore article__readMore--gradHight'><a class='article__readMore__text'>閱讀更多</a></div>" ).insertAfter( `.article__contexts>${sec}:nth-of-type(1)` );
    2013. 

  2013.    
    2014. 

  2014.       
    2015. 

  2015.       let height = $('.article__title').height() + 
    2016. 

  2016.                    $(`.article__contexts> ${first}:nth-child(1)`).height() + 
    2017. 

  2017.                   //  $('#prefer-form').height() + 
    2018. 

  2018.                    $(`.article__contexts> ${sec}:nth-child(1)`).height() + 60 ;
    2019. 

  2019. 

  2020. 

  2021.     $('.article__contexts').css('height', height);
    2022. 

  2022.     console.log(height);
    2023. 

  2023.     $('.article__readMore').on('click', function () {
    2024. 

  2024.             // $(this).children('.fa').toggleClass('is-rotate');
    2025. 

  2025.             // $(this).children('.article__readMore__text').toggleClass('is-open')
    2026. 

  2026.             // $(this).toggleClass('active')
    2027. 

  2027.             $('.article__readMore').toggle()
    2028. 

  2028.             $(".article__contexts").attr('style', 'height:auto')
    2029. 

  2029. 

  2030.             // if ($(this).children('.article__readMore__text').hasClass('is-open')) {
    2031. 

  2031.             //     //$('.article__readMore__text').text('')
    2032. 

  2032.             //     $('.article__readMore::before').css('background', 'unset')
    2033. 

  2033.             // } else {
    2034. 

  2034.             //     $('.article__readMore__text').text('閱讀更多')
    2035. 

  2035.             // }
    2036. 

  2036. 

  2037.             // $('.article__moreContext').slideToggle();
    2038. 

  2038.             //$('.blank-box').hide();
    2039. 

  2039.             $('.article__contexts').toggleClass('active');
    2040. 

  2040. 

  2041.         })
    2042. 

  2042.         
    2043. 

  2043.     };
    2044. 

  2044. 

  2045.     $(document).ready(function () {
    2046. 

  2046. 

  2047.         var favor = 0;
    2048. 

  2048. 

  2049.         if (favor == '1') {
    2050. 

  2050.             $('.like-o').css('display', 'none')
    2051. 

  2051.             $('.like').css('display', 'block')
    2052. 

  2052.         } else {
    2053. 

  2053.             $('.like').css('display', 'none')
    2054. 

  2054.             $('.like-o').css('display', 'block')
    2055. 

  2055.         }
    2056. 

  2056. 

  2057.         $('.ADclose').click(function () {
    2058. 

  2058.             $('.swiper-bg').slideUp('slow');
    2059. 

  2059.         })
    2060. 

  2060. 

  2061.         /* let article_h = $('.article__contexts').innerHeight()
    2062. 

  2062. 

  2063.         setTimeout(function () {
    2064. 

  2064.             if (article_h) {
    2065. 

  2065. 

  2066.                 $(".article__readMore").trigger("click");
    2067. 

  2067. 

  2068.             }
    2069. 

  2069.             // else
    2070. 

  2070.             // {
    2071. 

  2071.             //     $(".article__contexts").attr('style','height:4530px')
    2072. 

  2072.             // }
    2073. 

  2073.         }, 100)
    2074. 

  2074.         */
    2075. 

  2075. 

  2076.         //閱讀更多收合
    2077. 

  2077.         
    2078. 

  2078. 

  2079.         $('#loading').unmask(" ");
    2080. 

  2080.         $('#loading').hide();
    2081. 

  2081. 

  2082.         let bg_status = 0;
    2083. 

  2083.         if ($(".swiper-bg").attr('style') != undefined) {
    2084. 

  2084.             bg_status = 1;
    2085. 

  2085.         }
    2086. 

  2086. 

  2087.         if (App_search.banner_status == 'hide' && bg_status == 0) {
    2088. 

  2088.             window.scrollTo(0, 336)
    2089. 

  2089.         }
    2090. 

  2090.     })
    2091. 

  2091. 

  2092.     var App_search = new Vue({
    2093. 

  2093.         el: '#search',
    2094. 

  2094.         data: {
    2095. 

  2095.             data_new: [{"hcolumn_id":"6242","clogo":"https:\/\/images.hhh.com.tw\/uploads\/_hcolumn_orig\/point-index03_79.jpg","ctitle":"\u6392\u6c34\u5b54\u98c4\u81ed\u5473\uff1f\u767c\u51fa\u602a\u8072\uff1f2\u65b9\u6cd5\u6559\u4f60\u627e\u51fa\u554f\u984c\u539f\u56e0\uff01","sdate":"2021-11-19","ctag":"\u6c34\u7ba1,\u5b58\u6c34\u5f4e,\u6392\u6c34\u7ba1,\u81ed\u5473,\u6c34\u96fb,\u88dd\u4fee\u4f6c"},{"hcolumn_id":"6220","clogo":"https:\/\/images.hhh.com.tw\/uploads\/_hcolumn_orig\/point03_76_01.jpg","ctitle":"\u8a02\u505a\u597d\u7528\u7cfb\u7d71\u6ac3\u7684\u4e09\u62db\u5bc6\u6280\uff01","sdate":"2021-11-10","ctag":"\u7cfb\u7d71\u6ac3,\u9580\u7247,\u4e94\u91d1,\u628a\u624b,\u6536\u7d0d,918\u5efa\u6750\u5eab"},{"hcolumn_id":"6207","clogo":"https:\/\/images.hhh.com.tw\/uploads\/_hcolumn_orig\/point03_74_01.jpg","ctitle":"\u81ea\u5df1\u62c6\u66f4\u7701\uff1f\u4f7f\u7528\u9032\u53e3\u4e94\u91d1\u4e00\u5b9a\u5f88\u8cb4\uff1f\uff01\u7834\u89e3\u7cfb\u7d71\u6ac3\u56db\u5927\u8ff7\u601d","sdate":"2021-11-05","ctag":"\u7cfb\u7d71\u6ac3,\u4e94\u91d1,\u4fdd\u56fa,\u62c6\u9664,918\u5efa\u6750\u5eab"},{"hcolumn_id":"6169","clogo":"https:\/\/images.hhh.com.tw\/uploads\/_hcolumn_orig\/point03_70_01.jpg","ctitle":"\u5bb6\u4e2d\u96fb\u7dda\u4e82\u7cdf\u7cdf\uff0c\u600e\u9ebc\u898f\u756b\u624d\u6703\u597d\uff1f","sdate":"2021-10-22","ctag":"\u63d2\u5ea7,\u96fb\u7dda,\u88dd\u4fee,\u5f31\u96fb,\u96fb\u8def,\u7cbe\u9078\u597d\u66f8"},{"hcolumn_id":"6097","clogo":"https:\/\/images.hhh.com.tw\/uploads\/_hcolumn_orig\/point-index03_63.jpg","ctitle":"\u60f3\u505a\u5f88\u591a\u6ac3\u5b50\uff0c\u537b\u6015\u5bb6\u88e1\u986f\u5f97\u592a\u72f9\u7a84\u55ce\uff1f\u5ba4\u5167\u8a2d\u8a08\u5e2b\u516c\u958b\u9ec3\u91d1\u6bd4\u4f8b","sdate":"2021-09-27","ctag":"\u7cbe\u9078\u597d\u66f8,\u6536\u7d0d,\u66f8\u6ac3,\u6ac3\u5b50,\u6bd4\u4f8b"},{"hcolumn_id":"3059","clogo":"https:\/\/cloud.hhh.com.tw\/upload\/_hcolumn\/clogo_3059_20210924120106.jpg","ctitle":"\u585e\u6eff\u585e\u597d\u9084\u4e0d\u5920\uff01\u978b\u6ac35\u8a2d\u8a08\u6536\u7d0d\u91cf\u8b8adouble\uff01","sdate":"2021-09-24","ctag":"\u88dd\u4fee\u77e5\u8b58\u5eab,\u6536\u7d0d,\u978b\u6ac3,\u5c0f\u576a\u6578"},{"hcolumn_id":"6039","clogo":"https:\/\/images.hhh.com.tw\/uploads\/_hcolumn_orig\/point-index03_61.jpg","ctitle":"\u5bb6\u4e2d\u7e3d\u662f\u6709\u602a\u5473\uff0c\u5316\u7cde\u6c60\u5728\u5ba4\u5167\u600e\u9ebc\u8fa6\uff1f","sdate":"2021-09-06","ctag":"\u5316\u7cde\u6c60,\u8ce3\u539d\u963f\u660e,\u81ed\u5473,\u6392\u6c23\u7ba1,\u5b58\u6c34\u5f4e,\u6c34\u96fb"},{"hcolumn_id":"6030","clogo":"https:\/\/images.hhh.com.tw\/uploads\/_hcolumn_orig\/point06_60_04.jpg","ctitle":"20\u500b\u5e38\u898bNG\u88dd\u4fee\u554f\u984c\uff01\u4f60\u5bb6\u4e5f\u6709\u55ce\uff1f","sdate":"2021-09-01","ctag":"\u88dd\u4fee,\u6539\u9020,\u8001\u5c4b,\u5ec1\u6240,\u5eda\u623f,\u5ba2\u5ef3,\u967d\u53f0,\u7384\u95dc,\u6a13\u4e2d\u6a13,\u7cbe\u9078\u597d\u66f8"},{"hcolumn_id":"5939","clogo":"https:\/\/images.hhh.com.tw\/uploads\/_hcolumn_orig\/point03_56_01.jpg","ctitle":"\u6c34\u96fb\u5de5\u96e2\u7dda\u4e2d\uff01\u7c21\u6613\u5c45\u5bb6\u6c34\u96fb\u6aa2\u67e5\u4fee\u7e55DIY","sdate":"2021-08-15","ctag":"\u5c45\u5bb6\u4fee\u7e55,\u5eda\u623f\u6c34\u69fd,\u6f0f\u6c34,\u6c34\u9f8d\u982d,\u71c8\u5177,\u74e6\u65af\u7210,\u71b1\u6c34\u5668,DIY"},{"hcolumn_id":"5776","clogo":"https:\/\/images.hhh.com.tw\/uploads\/_hcolumn_orig\/point-index03_45.jpg","ctitle":"\u590f\u5929\u5bb6\u5c45\u88dd\u4fee\uff0c5\u5927\u6ce8\u610f\u4e8b\u9805\uff01","sdate":"2021-08-14","ctag":"\u590f\u5929,\u88dd\u4fee,\u51b7\u6c23,\u7532\u919b,\u6f6e\u6fd5,\u8b8a\u5f62,\u88dd\u4fee\u524d\u7dda"},{"hcolumn_id":"4369","clogo":"https:\/\/cloud.hhh.com.tw\/upload\/_hcolumn\/clogo_4369_20200227115239.jpg","ctitle":"\u4f60\u8b80\u61c2\u5e7e\u500b\uff1f\u4e00\u6b21\u4e86\u89e320\u500b\u5e38\u898b\u88dd\u4fee\u8853\u8a9e","sdate":"2021-08-11","ctag":"\u88dd\u4fee,\u88dd\u6f62,\u88dd\u4fee\u7528\u8a9e,\u9810\u552e\u5c4b,\u4e2d\u53e4\u5c4b,\u65b0\u6210\u5c4b,\u6bdb\u80da\u5c4b,\u5ba2\u8b8a"},{"hcolumn_id":"5970","clogo":"https:\/\/images.hhh.com.tw\/uploads\/_hcolumn_orig\/point-index03_58.jpg","ctitle":"\u5feb\u7b46\u8a18\uff01\u623f\u7522\u5c08\u5bb6\u9019\u6a23\u627e\u5ba4\u5167\u8a2d\u8a08\u5e2b","sdate":"2021-08-10","ctag":"\u7cbe\u9078\u597d\u66f8,\u7f85\u59d0,\u88dd\u4fee,\u5ba4\u5167\u8a2d\u8a08\u5e2b"}],
    2096. 

  2096.             data_hot: [{"hcolumn_id":"2569","clogo":"https:\/\/cloud.hhh.com.tw\/gs\/column\/issue-index10_90.jpg","ctitle":"\u539f\u4f86\u9019\u4e9b\u5bb6\u96fb\u64fa\u653e\u6709\u7981\u5fcc\uff01\u5c45\u5bb6\u597d\u904b\u98a8\u6c34\u4e0dNG","sdate":"2017-02-24","ctag":"\u88dd\u4fee\u77e5\u8b58\u5eab \u88dd\u4fee\u5e38\u898b\u984c \u98a8\u6c34 \u5bb6\u96fb \u98a8\u6c34\u7279\u8f2f \u7d9c\u5408\u6587\u7ae0"},{"hcolumn_id":"2303","clogo":"https:\/\/cloud.hhh.com.tw\/gs\/column\/issue-index10_56.jpg","ctitle":"\u88dd\u4fee\u623f\u5c4b\u9078\u7a7a\u8abf \u58c1\u639b\u5f0f\u8207\u540a\u96b1\u5f0f\u51b7\u6c23\u54ea\u500b\u597d\uff1f\u7f3a\u9ede?","sdate":"2016-10-13","ctag":"\u88dd\u4fee\u77e5\u8b58\u5eab,\u51b7\u6c23,\u7d9c\u5408\u6587\u7ae0"},{"hcolumn_id":"2700","clogo":"https:\/\/cloud.hhh.com.tw\/gs\/column\/issue-index10_102.jpg","ctitle":"\u60f3\u6253\u9020\u597d\u904b\u81e8\u9580\u98a8\u6c34\uff1f\u7384\u95dc\u8a2d\u8a08\u6700\u91cd\u8981\uff01","sdate":"2017-05-05","ctag":"\u98a8\u6c34\u7279\u8f2f,\u98a8\u6c34,\u88dd\u4fee\u77e5\u8b58\u5eab,\u7384\u95dc,\u7d9c\u5408\u6587\u7ae0,\u7384\u95dc\u8a2d\u8a08"},{"hcolumn_id":"3059","clogo":"https:\/\/cloud.hhh.com.tw\/upload\/_hcolumn\/clogo_3059_20210924120106.jpg","ctitle":"\u585e\u6eff\u585e\u597d\u9084\u4e0d\u5920\uff01\u978b\u6ac35\u8a2d\u8a08\u6536\u7d0d\u91cf\u8b8adouble\uff01","sdate":"2021-09-24","ctag":"\u88dd\u4fee\u77e5\u8b58\u5eab,\u6536\u7d0d,\u978b\u6ac3,\u5c0f\u576a\u6578"},{"hcolumn_id":"2342","clogo":"https:\/\/cloud.hhh.com.tw\/gs\/column\/issue-index10_61.jpg","ctitle":"\u4e0d\u88dd\u62c9\u9580\u4e5f\u80fd\u963b\u64cb\u6cb9\u7159\uff1f\u958b\u653e\u5f0f\u5eda\u623f\u9694\u6cb9\u7159\u505a\u6cd5","sdate":"2016-10-27","ctag":"\u88dd\u4fee\u77e5\u8b58\u5eab,\u958b\u653e\u7a7a\u9593,\u5eda\u623f,\u7d9c\u5408\u6587\u7ae0"},{"hcolumn_id":"2967","clogo":"https:\/\/cloud.hhh.com.tw\/gs\/column\/issue-index10_118.jpg","ctitle":"\u5bb6\u5ead\u4e3b\u5a66\u5be6\u7528\u624b\u672d\uff1a\u5eda\u623f\u6aaf\u9762\u9ad8\u5ea6\u6ce8\u610f3\u4ef6\u4e8b\uff0c\u751f\u6d3b\u66f4Easy\uff01","sdate":"2017-09-01","ctag":"\u88dd\u4fee\u77e5\u8b58\u5eab,\u5eda\u623f,\u5efa\u6750"},{"hcolumn_id":"4781","clogo":"https:\/\/cloud.hhh.com.tw\/upload\/_hcolumn\/clogo_4781_20200805181247.jpg","ctitle":"\u51b7\u6c23\u8981\u51b7\uff0c9\u500b\u4f60\u8a72\u6ce8\u610f\u7684\u4e8b","sdate":"2020-08-05","ctag":"\u51b7\u6c23,\u5b89\u88dd,\u88dd\u4fee\u524d\u7dda,\u7a7a\u8abf"},{"hcolumn_id":"3597","clogo":"https:\/\/cloud.hhh.com.tw\/gs\/column\/issue-index10_146.jpg","ctitle":"\u88dd\u6f62\u4ea4\u7d66\u8a2d\u8a08\u5e2b \u63d2\u5ea7\u898f\u5283\u81ea\u5df1\u4f86","sdate":"2018-09-13","ctag":"\u5ba2\u5ef3,\u7384\u95dc,\u6a5f\u80fd,\u5eda\u623f,\u9910\u5ef3,\u81e5\u623f,\u885b\u6d74"},{"hcolumn_id":"2538","clogo":"https:\/\/cloud.hhh.com.tw\/gs\/column\/issue-index10_85.jpg","ctitle":"\u3010\u5c45\u5bb6\u6536\u7d0d\u63d0\u6848\u3011\u9910\u5ef3\u6536\u7d0d\u6ac3\u8a2d\u8a08\u7bc7","sdate":"2017-02-10","ctag":"\u88dd\u4fee\u77e5\u8b58\u5eab,\u9910\u5ef3,\u6536\u7d0d,\u7d9c\u5408\u6587\u7ae0,\u9910\u5ef3\u6536\u7d0d,\u5eda\u623f"},{"hcolumn_id":"903","clogo":"https:\/\/cloud.hhh.com.tw\/gs\/column\/topic-index04_23.jpg","ctitle":"\u5be6\u7528\u5eda\u623f\u8d85\u91cd\u8981\u9ec3\u91d1\u4e09\u89d2\uff1f\u5f9e\u96f6\u958b\u59cb\u5eda\u623f\u6df1\u5ea6\u89e3\u6790\uff01","sdate":"2014-07-15","ctag":"\u5eda\u623f,\u683c\u5c40\u6539\u9020"},{"hcolumn_id":"4369","clogo":"https:\/\/cloud.hhh.com.tw\/upload\/_hcolumn\/clogo_4369_20200227115239.jpg","ctitle":"\u4f60\u8b80\u61c2\u5e7e\u500b\uff1f\u4e00\u6b21\u4e86\u89e320\u500b\u5e38\u898b\u88dd\u4fee\u8853\u8a9e","sdate":"2021-08-11","ctag":"\u88dd\u4fee,\u88dd\u6f62,\u88dd\u4fee\u7528\u8a9e,\u9810\u552e\u5c4b,\u4e2d\u53e4\u5c4b,\u65b0\u6210\u5c4b,\u6bdb\u80da\u5c4b,\u5ba2\u8b8a"},{"hcolumn_id":"1053","clogo":"https:\/\/cloud.hhh.com.tw\/gs\/column\/topic-index01_157.jpg","ctitle":"\u3010\u6211\u5011\u7d50\u5a5a\u4e86\u3011\u65b0\u5a5a\u5fc5\u770b\u301c\u65b0\u623f\u88dd\u4fee\uff14\u5927\u91cd\u9ede\u7d30\u7bc0","sdate":"2014-09-30","ctag":"\u5eda\u623f,\u81e5\u623f,\u885b\u6d74,\u6536\u7d0d"}],
    2097. 

  2097.             page_no: 1,
    2098. 

  2098.             search_data: {},
    2099. 

  2099.             type: 'new',
    2100. 

  2100.             forward_title: '',
    2101. 

  2101.             base_url: "http:\/\/hhh.com.tw",
    2102. 

  2102.             email: '',
    2103. 

  2103.             content: '',
    2104. 

  2104.             forwardurl: '',
    2105. 

  2105.             emailArray: [],
    2106. 

  2106.             is_login: 0,
    2107. 

  2107.             userdata: null,
    2108. 

  2108.             banner_status: '',
    2109. 

  2109.             is_update: 0,
    2110. 

  2110.             data_end: 1,
    2111. 

  2111.             temp: [],
    2112. 

  2112.             isBusy: false,
    2113. 

  2113.             align: 'center',
    2114. 

  2114.             today: '2021-11-23'
    2115. 

  2115.         }, components: {
    2116. 

  2116.             'waterfall': Waterfall.waterfall,
    2117. 

  2117.             'waterfall-slot': Waterfall.waterfallSlot
    2118. 

  2118.         },
    2119. 

  2119.         created: function () {
    2120. 

  2120. 

  2121.         },
    2122. 

  2122.         mounted: function () {
    2123. 

  2123. 

  2124.         }, methods: {
    2125. 

  2125.             reflowed: function () {
    2126. 

  2126.                 this.isBusy = false
    2127. 

  2127.             },
    2128. 

  2128.             filter_column: function (img) {
    2129. 

  2129.                 if (img.indexOf('https') == -1) {
    2130. 

  2130.                     return 'https://cloud.hhh.com.tw/gs/column/' + img;
    2131. 

  2131.                 } else {
    2132. 

  2132.                     return img;
    2133. 

  2133.                 }
    2134. 

  2134. 

  2135.             }, change_type: function (type) {
    2136. 

  2136.                 Vue.set(App_search, 'type', type);
    2137. 

  2137.             }, doSend: function () {
    2138. 

  2138.                 let recipient
    2139. 

  2139.                 if (App_search.email.length > 0) {
    2140. 

  2140.                     App_search.emailArray.push(App_search.email)
    2141. 

  2141.                     App_search.email = ''
    2142. 

  2142.                     recipient = App_search.emailArray.join(',')
    2143. 

  2143.                 } else {
    2144. 

  2144.                     recipient = App_search.emailArray.join(',')
    2145. 

  2145.                 }
    2146. 

  2146. 

  2147.                 if (App_search.emailArray.length == 0) {
    2148. 

  2148.                     $('#email').addClass('border-revise');
    2149. 

  2149.                     $('#button-fm').addClass('fm-btn-border');
    2150. 

  2150.                     $('#email_error').show();
    2151. 

  2151.                     $('#email_error').text('收件人不得為空');
    2152. 

  2152. 

  2153.                     $('#email').focus();
    2154. 

  2154.                     return false;
    2155. 

  2155.                 } else {
    2156. 

  2156.                     $('#email').removeClass('border-revise');
    2157. 

  2157.                     $('#button-fm').removeClass('fm-btn-border');
    2158. 

  2158.                     $('#email_error').hide();
    2159. 

  2159. 

  2160.                     $.ajax({
    2161. 

  2161.                         url: '/adapter/index?http_method=POST&api_url=/base/v1/member/forward',
    2162. 

  2162.                         type: 'post',
    2163. 

  2163.                         datatype: "json",
    2164. 

  2164.                         data: {
    2165. 

  2165.                             data: JSON.stringify(
    2166. 

  2166.                                 {
    2167. 

  2167.                                     uid: App_search.userdata.uid,
    2168. 

  2168.                                     sender: App_search.userdata.email,
    2169. 

  2169.                                     recipient: recipient,
    2170. 

  2170.                                     url: App_search.forwardurl,
    2171. 

  2171.                                     subject: App_search.forward_title,
    2172. 

  2172.                                     content: App_search.content
    2173. 

  2173.                                 }
    2174. 

  2174.                             )
    2175. 

  2175.                         },
    2176. 

  2176.                         success: function (result) {
    2177. 

  2177.                             App_search.emailArray = [];
    2178. 

  2178.                             $('#forward_modal').modal('hide');
    2179. 

  2179. 

  2180.                             Swal.fire({
    2181. 

  2181.                                 title: '發送成功',
    2182. 

  2182.                                 showConfirmButton: false,
    2183. 

  2183.                             })
    2184. 

  2184.                         }
    2185. 

  2185.                     });
    2186. 

  2186.                 }
    2187. 

  2187. 

  2188.             }, forward: function (category, url, title) {
    2189. 

  2189. 

  2190.                 if (App_search.is_login == '0') {
    2191. 

  2191.                     Swal.fire({
    2192. 

  2192.                         title: '請先登入',
    2193. 

  2193.                         showConfirmButton: false,
    2194. 

  2194.                     })
    2195. 

  2195. 

  2196.                     $.ajax({
    2197. 

  2197.                         url: '/hhhajax/save_http_referer',
    2198. 

  2198.                         type: 'post',
    2199. 

  2199.                         datatype: "json",
    2200. 

  2200.                         data: {http_referer: location.href},
    2201. 

  2201.                         success: function (result) {
    2202. 

  2202.                             location.href = '/login/index';
    2203. 

  2203.                         }
    2204. 

  2204.                     });
    2205. 

  2205. 

  2206.                     return false;
    2207. 

  2207.                 } else {
    2208. 

  2208.                     App_search.forward_title = title;
    2209. 

  2209.                     $('#email_error').hide();
    2210. 

  2210. 

  2211.                     App_search.forwardurl = this.base_url + url;
    2212. 

  2212. 

  2213.                     $('#forward_modal').modal('toggle');
    2214. 

  2214.                 }
    2215. 

  2215. 

  2216. 

  2217.             }, putEmail: function () {
    2218. 

  2218.                 const vm = App_search;
    2219. 

  2219.                 const emailPattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    2220. 

  2220. 

  2221. 

  2222.                 if (vm.email.length == 0) {
    2223. 

  2223.                     $('#email_error').show();
    2224. 

  2224.                     $('#email_error').text('請輸入Email');
    2225. 

  2225.                     $('#email').addClass('border-revise');
    2226. 

  2226.                     $('#button-fm').addClass('fm-btn-border');
    2227. 

  2227. 

  2228.                     $('#email').focus();
    2229. 

  2229.                     return false;
    2230. 

  2230.                 } else if (!emailPattern.test(vm.email)) {
    2231. 

  2231.                     $('#email_error').show();
    2232. 

  2232.                     $('#email_error').text('email 格式有誤');
    2233. 

  2233.                     $('#email').addClass('border-revise');
    2234. 

  2234.                     $('#button-fm').addClass('fm-btn-border');
    2235. 

  2235. 

  2236.                     $('#email').focus();
    2237. 

  2237.                     return false;
    2238. 

  2238.                 } else if (vm.emailArray.length >= 5) {
    2239. 

  2239.                     $('#email_error').show();
    2240. 

  2240.                     $('#email_error').text('最多一次轉寄 5 封');
    2241. 

  2241.                     $('#email').addClass('border-revise');
    2242. 

  2242.                     $('#button-fm').addClass('fm-btn-border');
    2243. 

  2243. 

  2244.                     $('#email').focus();
    2245. 

  2245.                     return false;
    2246. 

  2246.                 } else {
    2247. 

  2247.                     $('#email').removeClass('border-revise');
    2248. 

  2248.                     $('#button-fm').removeClass('fm-btn-border');
    2249. 

  2249.                     $('#email_error').hide();
    2250. 

  2250.                     vm.emailArray.push(vm.email)
    2251. 

  2251.                     vm.email = ''
    2252. 

  2252.                 }
    2253. 

  2253.             }, del_email: function (email) {
    2254. 

  2254.                 App_search.emailArray.splice(App_search.emailArray.indexOf(email), 1);
    2255. 

  2255.             }, check_date: function (sdate) {
    2256. 

  2256.                 var GetDateDiff = DateDiff(sdate, this.today);
    2257. 

  2257.                 if (GetDateDiff < 4)
    2258. 

  2258.                     return true;
    2259. 

  2259.                 else
    2260. 

  2260.                     return false;
    2261. 

  2261.             }, filter_tag: function (tag) {
    2262. 

  2262.                 var html_hot = '';
    2263. 

  2263.                 var limit = 5;
    2264. 

  2264. 

  2265.                 if (tag != null) {
    2266. 

  2266.                     string = tag.replace(/\s/g, ",");
    2267. 

  2267.                     var ex_tag = string.split(',');
    2268. 

  2268. 

  2269.                     for (var i = 0; i < ex_tag.length; i++) {
    2270. 

  2270.                         if (i < limit && ex_tag[i] != undefined) {
    2271. 

  2271. 

  2272.                             html_hot += '<a class="likeSee__tag--item" href="/columns/lists/' + ex_tag[i] + '-keyword/" target="_blank">' + ex_tag[i] + '</a>';
    2273. 

  2273. 

  2274.                         }
    2275. 

  2275. 

  2276. 

  2277.                     }
    2278. 

  2278.                 }
    2279. 

  2279. 

  2280.                 return html_hot;
    2281. 

  2281. 

  2282. 

  2283.             }
    2284. 

  2284.         }
    2285. 

  2285.     });
    2286. 

  2286. 

  2287. 

  2288.     $(window).scroll(function () {
    2289. 

  2289.         // console.log($(document).height());
    2290. 

  2290.         // console.log($(window).scrollTop() + $(window).height());
    2291. 

  2291.         if ($(window).scrollTop() + $(window).height() >= ($(document).height() - 200) && App_search.is_update == 0) {
    2292. 

  2292. 

  2293.             Vue.set(App_search, 'is_update', 1);
    2294. 

  2294.             if (App_search.is_update == 1) {
    2295. 

  2295. 

  2296.                 App_search.search_data.sort_type = App_search.type;
    2297. 

  2297.                 App_search.search_data.page_no = App_search.page_no;
    2298. 

  2298.                 App_search.search_data.hcolumn_id = 4300;
    2299. 

  2299.                 App_search.search_data.page_size = 12;
    2300. 

  2300.                 App_search.search_data.ctype = '裝修前線';
    2301. 

  2301.                 App_search.search_data.ctype_sub = '裝潢撇步';
    2302. 

  2302.                 $.ajax({
    2303. 

  2303.                     url: '/hhhajax/column_style_ajax',
    2304. 

  2304.                     type: 'post',
    2305. 

  2305.                     datatype: "json",
    2306. 

  2306.                     data: App_search.search_data,
    2307. 

  2307.                     success: function (result) {
    2308. 

  2308. 

  2309.                         App_search.temp = [];
    2310. 

  2310.                         var result_json = jQuery.parseJSON(result);
    2311. 

  2311.                         if (result_json.status == "Success") {
    2312. 

  2312.                             App_search.temp = result_json.data
    2313. 

  2313.                         } else {
    2314. 

  2314. 

  2315.                         }
    2316. 

  2316. 

  2317.                     }, complete: function () {
    2318. 

  2318. 

  2319.                         $.each(App_search.temp, function (index, el) {
    2320. 

  2320. 

  2321.                             if (App_search.type == 'new') {
    2322. 

  2322.                                 App_search.data_new.push(el);
    2323. 

  2323.                             } else {
    2324. 

  2324.                                 App_search.data_hot.push(el);
    2325. 

  2325.                             }
    2326. 

  2326.                         });
    2327. 

  2327. 

  2328.                         if (App_search.temp.length > 0) {
    2329. 

  2329.                             App_search.data_end = 0;
    2330. 

  2330.                             App_search.page_no++;
    2331. 

  2331.                             Vue.set(App_search, 'is_update', 0);
    2332. 

  2332.                         } else {
    2333. 

  2333.                             App_search.data_end = 1;
    2334. 

  2334.                             Vue.set(App_search, 'is_update', 1);
    2335. 

  2335.                         }
    2336. 

  2336. 

  2337.                     }
    2338. 

  2338.                 });
    2339. 

  2339.             }
    2340. 

  2340. 

  2341. 

  2342.         }
    2343. 

  2343.     });
    2344. 

  2344. 

  2345. 

  2346.     $('#mail_forward').click(function (event) {
    2347. 

  2347.         App_search.forward('column', '/columns/detail/4300/', '【預售屋客變教學】客變改什麼？你必須了解的6件事');
    2348. 

  2348.     });
    2349. 

  2349. 

  2350.     window.addToFavorite = function (id) {
    2351. 

  2351.         $.ajax({
    2352. 

  2352.             url: "/favorite/set?type=column&id=" + id
    2353. 

  2353.         }).done(function (data) {
    2354. 

  2354.             if (data == 1) {
    2355. 

  2355.                 $('.like-o').css('display', 'none')
    2356. 

  2356.                 $('.like').css('display', 'block')
    2357. 

  2357.             } else if (data == -1) {
    2358. 

  2358. 

  2359.                 Swal.fire({
    2360. 

  2360.                     title: '請先登入',
    2361. 

  2361.                     showConfirmButton: false,
    2362. 

  2362.                 })
    2363. 

  2363. 

  2364.                 $.ajax({
    2365. 

  2365.                     url: '/hhhajax/save_http_referer',
    2366. 

  2366.                     type: 'post',
    2367. 

  2367.                     datatype: "json",
    2368. 

  2368.                     data: {http_referer: location.href},
    2369. 

  2369.                     success: function (result) {
    2370. 

  2370.                         location.href = '/login/index';
    2371. 

  2371.                     }
    2372. 

  2372.                 });
    2373. 

  2373. 

  2374.             } else {
    2375. 

  2375.                 $('.like').css('display', 'none')
    2376. 

  2376.                 $('.like-o').css('display', 'block')
    2377. 

  2377.             }
    2378. 

  2378.         });
    2379. 

  2379.     };
    2380. 

  2380. </script>
    2381. 

  2381. </body>
    2382. 

  2382. </html>
    2383.