index_designerList_mb.html 78 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310
  1. <!DOCTYPE html>
  2. <html lang="zh_TW">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1">
  7. <meta http-equiv="Cache-Control" content="no-cache">
  8. <meta name="copyright" content="2021 © 幸福空間 │ All Rights Reserved.">
  9. <meta name="creation-date" content="2021-08-05 12:00:04 GTM+8">
  10. <meta name="description" content="讓幸福室內設計,走進您的生活,解決您的裝潢問
  11. 題!幸福空間是台灣最大的室內設計、設計師與設計個案影音平台之一,找尋室內設計點子與案例我
  12. 們一定能幫助你!">
  13. <meta name="distribution" content="Taiwan">
  14. <meta name="keywords" content="">
  15. <meta name="revisit-after" content="1 days">
  16. <meta name="robots" content="all">
  17. <meta name="format-detection" content="telephone=no">
  18. <meta property="og:description" content="讓幸福室內設計,走進您的生活,解決您的裝潢問題!
  19. 幸福空間是台灣最大的室內設計、設計師與設計個案影音平台之一,找尋室內設計點子與案例我們一定能幫助
  20. 你!"/>
  21. <meta property="og:site_name" content="幸福空間"/>
  22. <meta property="og:title" content="幸福空間 - 台灣最大的室內設計、設計師與設計個案影音平台"/>
  23. <meta property="og:type" content="website"/>
  24. <meta property="og:locale" content="zh_TW">
  25. <title>幸福空間 - 室內設計、裝潢、居家生活、影音平台</title>
  26. <link rel="icon" href="images/favicon.ico">
  27. <link rel="stylesheet" href="css/reset.css">
  28. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
  29. crossorigin="anonymous">
  30. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
  31. rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
  32. crossorigin="anonymous">
  33. <link rel="stylesheet" href="css/jquery-ui.css">
  34. <link rel="stylesheet" type="text/css" href="css/slick.css" />
  35. <link rel="stylesheet" type="text/css" href="css/slick-theme.css" />
  36. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  37. <link rel="stylesheet" href="sass/list-style.css">
  38. </head>
  39. <body>
  40. <div style="overflow-x:hidden;" class="wholeBody">
  41. <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
  42. <div class="container-fluid" style="padding:0 8px;margin:0;">
  43. <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  44. <span class="navbar-toggler-icon"></span>
  45. </button>
  46. <a href="https://m.hhh.com.tw/" class="navbar-brand"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="141"></a>
  47. <div class="navbar-brand navbar-search me-0 d-flex align-items-center">
  48. <img width="25" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMC4wMDMiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMC4wMDMgMjAiPgogIDxnIGlkPSJzZWFyY2giIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjA1KSI+CiAgICA8cGF0aCBpZD0iUGF0aF8yMjcyIiBkYXRhLW5hbWU9IlBhdGggMjI3MiIgZD0iTTE5Ljg4LDE4Ljk4bC00Ljg2Mi00Ljg2YTguNTM5LDguNTM5LDAsMSwwLS44NDMuODQzbDQuODYyLDQuODZhLjYuNiwwLDAsMCwuNDIxLjE3Ny41ODQuNTg0LDAsMCwwLC40MjEtLjE3N0EuNi42LDAsMCwwLDE5Ljg4LDE4Ljk4Wk0xLjI0Myw4LjUyOGE3LjMzMyw3LjMzMywwLDEsMSw3LjMzMyw3LjMzNUE3LjM0LDcuMzQsMCwwLDEsMS4yNDMsOC41MjhaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwKSIgZmlsbD0iI2VlNzgwMCIvPgogIDwvZz4KPC9zdmc+Cg==" alt="">
  49. </div>
  50. <div class="collapse navbar-collapse" id="navbarSupportedContent">
  51. </div>
  52. </div>
  53. </nav>
  54. <section class="w-100 mb__hero">
  55. <div class="mb__hero__bgImg" style="background-image: url(https://cloud.hhh.com.tw/upload/_hdesigner/background_mobile_447_20210128104517.jpg);">
  56. </div>
  57. </section>
  58. <section class="mb__content container-fluid">
  59. <div class="row">
  60. <div class="col-12 col-md-3 position-relative">
  61. <div class="mb__infoCard">
  62. <div class="mb__infoCard__avatar mx-auto mb-3" style="background-image: url(https://cloud.hhh.com.tw/gs/designer/designer494_00.jpg);">
  63. </div>
  64. <h2 class="mt-3 mb__infoCard__name">蔡岳儒</h2>
  65. <span class="mb-3 d-inline-block mb__infoCard__span">設計師</span>
  66. <h4 class="mb-3 mb__infoCard__cmy">恆岳空間設計</h4>
  67. <strong class="mb-3 mb__infoCard__seo">恆岳空間設計|蔡岳儒 室內設計師,為台北老屋翻新好評推薦的室內設計師,
  68. 將老屋妙手回春成現代風小豪宅,亦擅長置入日式精闢手工藝術融入室內空間設計中。</strong>
  69. <div class="mb__infoCard__approve mb-3">
  70. ★老屋翻新‧住宅改造
  71. </div>
  72. <div class="mb__infoCard__detail">
  73. <aside class="d-flex">
  74. <div class="mb__infoCard__detail__l">
  75. <div>免費專線:</div>
  76. </div>
  77. <div class="mb__infoCard__detail__r">
  78. <a href="tel:0809000123,19499" class="text-hhh">0809-000-123#18890</a>
  79. </div>
  80. </aside>
  81. <aside class="d-flex">
  82. <div class="mb__infoCard__detail__l">
  83. <div>諮詢專線:</div>
  84. </div>
  85. <div class="mb__infoCard__detail__r">
  86. <div>0809-000-123#18890</div>
  87. </div>
  88. </aside>
  89. <aside class="d-flex">
  90. <div class="mb__infoCard__detail__l">
  91. <div>諮詢專線:</div>
  92. </div>
  93. <div class="mb__infoCard__detail__r">
  94. <div>0937-070-794</div>
  95. </div>
  96. </aside>
  97. <aside class="d-flex">
  98. <div class="mb__infoCard__detail__l">
  99. <div>公司傳真:</div>
  100. </div>
  101. <div class="mb__infoCard__detail__r">
  102. <div>02-2562-7002</div>
  103. </div>
  104. </aside>
  105. <aside class="d-flex">
  106. <div class="mb__infoCard__detail__l">
  107. <div>公司地址:</div>
  108. </div>
  109. <div class="mb__infoCard__detail__r">
  110. <div>台北市中山區林森北路50號4樓之一</div>
  111. </div>
  112. </aside>
  113. <aside class="d-flex">
  114. <div class="mb__infoCard__detail__l">
  115. <div>電子信箱:</div>
  116. </div>
  117. <div class="mb__infoCard__detail__r">
  118. <div>hengyuehdesign@gmail.com,gakuju@gmail.com</div>
  119. </div>
  120. </aside>
  121. <aside class="d-flex">
  122. <div class="mb__infoCard__detail__l">
  123. <div>公司網址:</div>
  124. </div>
  125. <div class="mb__infoCard__detail__r">
  126. <div>
  127. http://www.hengyueh.com.tw/</div>
  128. </div>
  129. </aside>
  130. <div class="mb__infoCard__more my-3">
  131. <i class="fa fa-chevron-down" aria-hidden="true"></i>
  132. </div>
  133. <div class="mb__infoCard__detail other">
  134. <aside class="d-flex">
  135. <div class="mb__infoCard__detail__l">
  136. <div>分公司地址:</div>
  137. </div>
  138. <div class="mb__infoCard__detail__r">
  139. <div>台北市中山區林森北路50號4樓之一</div>
  140. </div>
  141. </aside>
  142. <aside class="d-flex">
  143. <div class="mb__infoCard__detail__l">
  144. <div>分公司電話:</div>
  145. </div>
  146. <div class="mb__infoCard__detail__r">
  147. <div>02-2562-7755</div>
  148. </div>
  149. </aside>
  150. <aside class="d-flex">
  151. <div class="mb__infoCard__detail__l">
  152. <div>分公司傳真:</div>
  153. </div>
  154. <div class="mb__infoCard__detail__r">
  155. <div>02-2562-7002</div>
  156. </div>
  157. </aside>
  158. <aside class="d-flex">
  159. <div class="mb__infoCard__detail__l">
  160. <div>分公司地址:</div>
  161. </div>
  162. <div class="mb__infoCard__detail__r">
  163. <div>上海市闵行区东川路2688号</div>
  164. </div>
  165. </aside>
  166. <aside class="d-flex">
  167. <div class="mb__infoCard__detail__l title mt-5 mb-3">
  168. <div>接案條件</div>
  169. </div>
  170. <div class="infoCard__detail__r">
  171. <div></div>
  172. </div>
  173. </aside>
  174. <aside class="d-flex">
  175. <div class="mb__infoCard__detail__l">
  176. <div>接案預算:</div>
  177. </div>
  178. <div class="mb__infoCard__detail__r">
  179. <div>不限</div>
  180. </div>
  181. </aside>
  182. <aside class="d-flex">
  183. <div class="mb__infoCard__detail__l">
  184. <div>接案坪數:</div>
  185. </div>
  186. <div class="mb__infoCard__detail__r">
  187. <div>不限</div>
  188. </div>
  189. </aside>
  190. <aside class="d-flex">
  191. <div class="mb__infoCard__detail__l">
  192. <div>特殊接案:</div>
  193. </div>
  194. <div class="mb__infoCard__detail__r">
  195. <div>不限</div>
  196. </div>
  197. </aside>
  198. <aside class="d-flex">
  199. <div class="mb__infoCard__detail__l">
  200. <div>收費方式:</div>
  201. </div>
  202. <div class="mb__infoCard__detail__r">
  203. <div>請來電洽詢 / 【丈量費】NT$5,000元(透天別墅另計) *此費用含實地丈量、需求訪談、
  204. 初步平面配置與風格提案 *以上費用於簽設計合約時,可全額折抵</div>
  205. </div>
  206. </aside>
  207. <aside class="d-flex">
  208. <div class="mb__infoCard__detail__l">
  209. <div>付費方式:</div>
  210. </div>
  211. <div class="mb__infoCard__detail__r">
  212. <div>簽約付30%、依工程進度分兩次,各付30%、完工驗收收10%</div>
  213. </div>
  214. </aside>
  215. <aside class="d-flex">
  216. <div class="mb__infoCard__detail__l">
  217. <div>付費方式:</div>
  218. </div>
  219. <div class="mb__infoCard__detail__r">
  220. <div>簽約付30%、依工程進度分兩次,各付30%、完工驗收收10%</div>
  221. </div>
  222. </aside>
  223. <aside class="d-flex">
  224. <div class="mb__infoCard__detail__l">
  225. <div>接案區域:</div>
  226. </div>
  227. <div class="mb__infoCard__detail__r">
  228. <div>北區,中區,南區,大陸</div>
  229. </div>
  230. </aside>
  231. <aside class="d-flex">
  232. <div class="mb__infoCard__detail__l">
  233. <div>接案類型:</div>
  234. </div>
  235. <div class="mb__infoCard__detail__r">
  236. <div>小坪數,標準格局,別墅,大坪數,樓中樓,商業空間,工作空間,餐飲空間,民宿旅館,公共空間</div>
  237. </div>
  238. </aside>
  239. <aside class="d-flex">
  240. <div class="mb__infoCard__detail__l">
  241. <div>接案風格:</div>
  242. </div>
  243. <div class="mb__infoCard__detail__r">
  244. <div>現代風,鄉村風,古典風,休閒多元,美式風,奢華風,新古典,日式禪風,東方風,混搭風,前衛風,北歐風,工業風,異國風</div>
  245. </div>
  246. </aside>
  247. </div>
  248. <section class="scMedia">
  249. <a href="">
  250. <img src="https://hhh.com.tw/assets/images/rv_web/fb.svg" alt="">
  251. </a>
  252. <a href="">
  253. <img src="https://hhh.com.tw/assets/images/rv_web/line.svg" alt="">
  254. </a>
  255. <a href="">
  256. <img src="https://hhh.com.tw/assets/images/rv_web/wechat.svg" alt="">
  257. </a>
  258. <a href="">
  259. <img src="https://hhh.com.tw/assets/images/rv_web/share.svg" alt="">
  260. </a>
  261. <a href="">
  262. <img src="https://hhh.com.tw/assets/images/rv_web/like-o.svg" alt="">
  263. </a>
  264. </section>
  265. </div>
  266. </div>
  267. </div>
  268. <div class="col-12 col-md-9 px-0">
  269. <div class="infoContent">
  270. <div class="bg-white infoContent__navBlock">
  271. <ul class="nav d-flex nav-pills flex-wrap justify-content-around" id="pills-tab" role="tablist">
  272. <li class="nav-item active p-0" role="presentation">
  273. <a class="nav-item-link nav-item-active bg-transparent active" id="pills-intro-tab"
  274. data-bs-toggle="pill" data-bs-target="#pills-intro" type="button" role="tab"
  275. aria-controls="pills-intro" aria-selected="true" data-link="https://hhh.com.tw/cases/lists/">作品</a>
  276. </li>
  277. <li class="nav-item p-0" role="presentation">
  278. <a class="nav-item-link nav-item-active bg-transparent" id="pills-video-tab"
  279. data-bs-toggle="pill" data-bs-target="#pills-video" type="button" role="tab"
  280. aria-controls="pills-video" aria-selected="false" data-link="https://hhh.com.tw/videos/lists/">影音</a>
  281. </li>
  282. <li class="nav-item p-0" role="presentation">
  283. <a class="nav-item-link nav-item-active bg-transparent" id="pills-columns-tab"
  284. data-bs-toggle="pill" data-bs-target="#pills-columns" type="button" role="tab"
  285. aria-controls="pills-columns" aria-selected="false" data-link="https://hhh.com.tw/columns/lists/">專欄</a>
  286. </li>
  287. <li class="nav-item p-0" role="presentation">
  288. <a class="nav-item-link nav-item-active bg-transparent" id="pills-company-tab"
  289. data-bs-toggle="pill" data-bs-target="#pills-company" type="button" role="tab"
  290. aria-controls="pills-company" aria-selected="false" data-link="https://hhh.com.tw/columns/lists/">公司簡介</a>
  291. </li>
  292. </ul>
  293. <!-- <div class="likeSee" hidden>
  294. <a href="">人氣</a>
  295. <span class="likeSee__divider"></span>
  296. <a href="">最新</a>
  297. </div> -->
  298. </div>
  299. <div class="tab-content mt-5" id="pills-tabContent">
  300. <div class="tab-pane fade active show" id="pills-intro" role="tabpanel"
  301. aria-labelledby="pills-intro-tab">
  302. <div class="row">
  303. <div class="col-6 col-md-4">
  304. <a href="" target="_blank">
  305. <div class="card">
  306. <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
  307. </div>
  308. <div class="card-body">
  309. <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
  310. <p class="card-text mb-0">
  311. <a href="" class="card__tag" target="_blank">混搭風</a>
  312. <a href="" class="card__tag" target="_blank">混搭風</a>
  313. <a href="" class="card__tag" target="_blank">混搭風</a>
  314. </p>
  315. </div>
  316. </div>
  317. </a>
  318. </div>
  319. <div class="col-6 col-md-4">
  320. <a href="" target="_blank">
  321. <div class="card">
  322. <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
  323. </div>
  324. <div class="card-body">
  325. <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
  326. <p class="card-text mb-0">
  327. <a href="" class="card__tag" target="_blank">混搭風</a>
  328. <a href="" class="card__tag" target="_blank">混搭風</a>
  329. <a href="" class="card__tag" target="_blank">混搭風</a>
  330. </p>
  331. </div>
  332. </div>
  333. </a>
  334. </div>
  335. <div class="col-6 col-md-4">
  336. <a href="" target="_blank">
  337. <div class="card">
  338. <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
  339. </div>
  340. <div class="card-body">
  341. <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
  342. <p class="card-text mb-0">
  343. <a href="" class="card__tag" target="_blank">混搭風</a>
  344. <a href="" class="card__tag" target="_blank">混搭風</a>
  345. <a href="" class="card__tag" target="_blank">混搭風</a>
  346. </p>
  347. </div>
  348. </div>
  349. </a>
  350. </div>
  351. <div class="col-6 col-md-4">
  352. <a href="" target="_blank">
  353. <div class="card">
  354. <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
  355. </div>
  356. <div class="card-body">
  357. <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
  358. <p class="card-text mb-0">
  359. <a href="" class="card__tag" target="_blank">混搭風</a>
  360. <a href="" class="card__tag" target="_blank">混搭風</a>
  361. <a href="" class="card__tag" target="_blank">混搭風</a>
  362. </p>
  363. </div>
  364. </div>
  365. </a>
  366. </div>
  367. <div class="col-6 col-md-4">
  368. <a href="" target="_blank">
  369. <div class="card">
  370. <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
  371. </div>
  372. <div class="card-body">
  373. <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
  374. <p class="card-text mb-0">
  375. <a href="" class="card__tag" target="_blank">混搭風</a>
  376. <a href="" class="card__tag" target="_blank">混搭風</a>
  377. <a href="" class="card__tag" target="_blank">混搭風</a>
  378. </p>
  379. </div>
  380. </div>
  381. </a>
  382. </div>
  383. <div class="col-6 col-md-4">
  384. <a href="" target="_blank">
  385. <div class="card">
  386. <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
  387. </div>
  388. <div class="card-body">
  389. <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
  390. <p class="card-text mb-0">
  391. <a href="" class="card__tag" target="_blank">混搭風</a>
  392. <a href="" class="card__tag" target="_blank">混搭風</a>
  393. <a href="" class="card__tag" target="_blank">混搭風</a>
  394. </p>
  395. </div>
  396. </div>
  397. </a>
  398. </div>
  399. </div>
  400. </div>
  401. <div class="tab-pane fade" id="pills-video" role="tabpanel"
  402. aria-labelledby="pills-video-tab">
  403. <div class="row">
  404. <div class="col-6 col-md-4">
  405. <a href="" target="_blank">
  406. <div class="card">
  407. <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
  408. <img src="https://hhh.com.tw/assets/images/rv_web/play.svg" alt="" width="50" height="50">
  409. </div>
  410. <div class="card-body">
  411. <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
  412. <p class="card-text mb-0">
  413. <a href="" class="card__tag" target="_blank">混搭風</a>
  414. <a href="" class="card__tag" target="_blank">混搭風</a>
  415. <a href="" class="card__tag" target="_blank">混搭風</a>
  416. </p>
  417. </div>
  418. </div>
  419. </a>
  420. </div>
  421. <div class="col-6 col-md-4">
  422. <a href="" target="_blank">
  423. <div class="card">
  424. <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
  425. <img src="https://hhh.com.tw/assets/images/rv_web/play.svg" alt="" width="50" height="50">
  426. </div>
  427. <div class="card-body">
  428. <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
  429. <p class="card-text mb-0">
  430. <a href="" class="card__tag" target="_blank">混搭風</a>
  431. <a href="" class="card__tag" target="_blank">混搭風</a>
  432. <a href="" class="card__tag" target="_blank">混搭風</a>
  433. </p>
  434. </div>
  435. </div>
  436. </a>
  437. </div>
  438. </div>
  439. </div>
  440. <div class="tab-pane fade" id="pills-columns" role="tabpanel"
  441. aria-labelledby="pills-columns-tab">
  442. <div class="row">
  443. <div class="col-6 col-md-4">
  444. <a href="" target="_blank">
  445. <div class="card">
  446. <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
  447. </div>
  448. <div class="card-body">
  449. <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
  450. <p class="card-text mb-0">
  451. <a href="" class="card__tag" target="_blank">混搭風</a>
  452. <a href="" class="card__tag" target="_blank">混搭風</a>
  453. <a href="" class="card__tag" target="_blank">混搭風</a>
  454. </p>
  455. </div>
  456. </div>
  457. </a>
  458. </div>
  459. <div class="col-6 col-md-4">
  460. <a href="" target="_blank">
  461. <div class="card">
  462. <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
  463. </div>
  464. <div class="card-body">
  465. <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
  466. <p class="card-text mb-0">
  467. <a href="" class="card__tag" target="_blank">混搭風</a>
  468. <a href="" class="card__tag" target="_blank">混搭風</a>
  469. <a href="" class="card__tag" target="_blank">混搭風</a>
  470. </p>
  471. </div>
  472. </div>
  473. </a>
  474. </div>
  475. <div class="col-6 col-md-4">
  476. <a href="" target="_blank">
  477. <div class="card">
  478. <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
  479. </div>
  480. <div class="card-body">
  481. <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
  482. <p class="card-text mb-0">
  483. <a href="" class="card__tag" target="_blank">混搭風</a>
  484. <a href="" class="card__tag" target="_blank">混搭風</a>
  485. <a href="" class="card__tag" target="_blank">混搭風</a>
  486. </p>
  487. </div>
  488. </div>
  489. </a>
  490. </div>
  491. </div>
  492. </div>
  493. <div class="tab-pane fade" id="pills-company" role="tabpanel"
  494. aria-labelledby="pills-company-tab">
  495. <div class="row justfy-content-between">
  496. <div class="col-md-8">
  497. <article>
  498. <div class="company__block">
  499. <h4 class="company__title">設計理念</h4>
  500. <div class="company__text">
  501. 空間設計的美學藝術,蔡岳儒總監更能將日式精闢的手工藝術融入台灣的設計與工程,更將留日所學發揚光大明確的把結構、
  502. 動線、收納、光線與品味融入建築、景觀與室內三大空間之中,藉由點線面展現出空間的獨特性,並賦予空間延續的生命活力。
  503. <br>
  504. Design director Yueh-Ju Tsai is good at applying Japanese handmade fine art to the design
  505. and construction in Taiwan. Mr. Tsai has developed what he learned in Japan, and applied
  506. structure, flow, storage, light and taste to the area of architecture, landscape and
  507. interior. Mr. Tsai utilizes dots, lines, surface to show the unique character of space and
  508. put vivid life into the space.
  509. </div>
  510. </div>
  511. <div class="company__block">
  512. <h4 class="company__title">公司統編</h4>
  513. <div class="company__text">
  514. 經濟部/財政部登記有案:54656779
  515. </div>
  516. </div>
  517. <div class="company__block">
  518. <h4 class="company__title">相關經歷</h4>
  519. <div class="company__text">
  520. <p>蔡岳儒
  521. <br>◆現任/恆岳空間設計 主持設計師
  522. <br>◆學歷/東京デザイナー学院卒業
  523. <br>◆經歷/十餘年設計、工程經歷。
  524. <br><br>1999年日本國色彩士
  525. <br>2000年東京デザイナ-学院卒業
  526. <br>2009年一級室內裝飾設計師
  527. <br>2012年環保署整潔綠美化管理人員
  528. <br>2013年內政部建築物室內裝修登記立案
  529. <br>2014年無障礙設施設備勘檢人員培訓</p>
  530. </div>
  531. </div>
  532. <div class="company__block">
  533. <h4 class="company__title">專業證照</h4>
  534. <div class="company__text">
  535. 建築物室內裝修專業技術人員登記證 高恒悌 第40EC116787號
  536. <br>建築物室內裝修專業技術人員登記證 高恒悌 第40EC116787號
  537. </div>
  538. </div>
  539. </article>
  540. </div>
  541. <div class="col-md-4"></div>
  542. </div>
  543. </div>
  544. </div>
  545. </div>
  546. </div>
  547. </div>
  548. </section>
  549. <!-- <section class="sec-guessLike">
  550. <h3 class="px-3 pb-1">猜你喜歡</h3>
  551. <div class="container-fluid" style="padding: 0 15px;margin:0;">
  552. <h4 class="sec-guessLike__title">影音</h4>
  553. <div class="row">
  554. <div class="col mb-3">
  555. <div class="sec-guessLike__img mb-2">
  556. </div>
  557. <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
  558. </div>
  559. <div class="col mb-3">
  560. <div class="sec-guessLike__img mb-2">
  561. </div>
  562. <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
  563. </div>
  564. </div>
  565. <h4 class="sec-guessLike__title">個案</h4>
  566. <div class="row">
  567. <div class="col mb-3">
  568. <div class="sec-guessLike__img mb-2">
  569. </div>
  570. <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
  571. </div>
  572. <div class="col mb-3">
  573. <div class="sec-guessLike__img mb-2">
  574. </div>
  575. <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
  576. </div>
  577. </div>
  578. <h4 class="sec-guessLike__title">專欄</h4>
  579. <div class="row">
  580. <div class="col mb-3">
  581. <div class="sec-guessLike__img mb-2">
  582. </div>
  583. <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
  584. </div>
  585. <div class="col mb-3">
  586. <div class="sec-guessLike__img mb-2">
  587. </div>
  588. <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
  589. </div>
  590. </div>
  591. </div>
  592. </section> -->
  593. <div class="fixed-btn">
  594. <!-- <div class="btn-gotop mb-2">
  595. <img src="images/gotop.png" width="28" alt="">
  596. </div> -->
  597. <div class="btn-gotop">
  598. <img src="images/gotop.webp" width="28" alt="">
  599. </div>
  600. </div>
  601. <div class="freeCall py-3">
  602. <button class="btn freeCall__btn" >
  603. <i class="fa fa-phone" aria-hidden="true"></i>免付費電話
  604. </button>
  605. </div>
  606. <div style="margin-bottom:120px;"></div>
  607. <!-- bottom fixed menu -->
  608. <div class="container-fluid px-0 m-0 fixed_menu">
  609. <div class="row gx-2 ps-1 pe-2">
  610. <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/about/request/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/40a8bf5.svg" alt=""></a></div>
  611. <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/about/calculator/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/170ebf4.svg" alt=""></a></div>
  612. <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/decoquery/lists/address/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/479aa61.svg" alt=""></a></div>
  613. <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/program/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/dc6b655.svg" alt=""></a></div>
  614. <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/login/index" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/76749fd.svg" alt=""></a></div>
  615. </div>
  616. </div>
  617. <div class="sec-menu">
  618. <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
  619. <div class="container-fluid" style="padding:0 8px;margin:0;">
  620. <div class="navbar-brand navbar-back me-0">
  621. <i class="fas fa-chevron-left"></i>
  622. </div>
  623. <a href="#" class="navbar-brand"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="141"></a>
  624. <div class="navbar-brand navbar-search me-0">
  625. </div>
  626. </div>
  627. </nav>
  628. <div class="container-fluid sec-menu-block px-0">
  629. <div class="navbar sec-menu-list w-100">
  630. <ul class="navbar-nav me-auto mb-2 mb-lg-0">
  631. <li class="nav-item">
  632. <a class="nav-link active text-main d-flex align-items-center" aria-current="page" href="https://shop.hhh.com.tw/" target="_blank">
  633. <div class="d-inline-block link_div me-2"><img src="images/menu/cart.svg" alt=""></div>
  634. <p>+好物</p>
  635. </a>
  636. </li>
  637. <hr>
  638. <li class="nav-item">
  639. <a class="nav-link text-main d-flex align-items-center" href="https://m.hhh.com.tw/about/calculator/" target="_blank">
  640. <div class="d-inline-block link_div me-2"><img src="images/menu/budget.svg" alt=""></div>
  641. <p>估預算</p>
  642. </a>
  643. </li>
  644. <hr>
  645. <li class="nav-item dropdown">
  646. <span class="nav-link text-main d-flex align-items-center" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
  647. <div class="d-inline-block link_div me-2"><img src="images/menu/style.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/photos/index/`;"><p>找風格</p></a>
  648. <div class="expand"><i class="fas fa-chevron-down"></i></div>
  649. </span>
  650. <ul class="dropdown-menu" aria-labelledby="navbarDropdown" style="position: static;">
  651. <hr>
  652. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/photos/lists/nordic-style/">北歐風</a></li>
  653. <hr>
  654. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/photos/lists/modern-style/">現代風</a></li>
  655. <hr>
  656. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/photos/lists/industry-style/">工業風</a></li>
  657. </ul>
  658. </li>
  659. <hr>
  660. <li class="nav-item dropdown">
  661. <span class="nav-link d-flex align-items-center" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
  662. <div class="d-inline-block link_div me-2"><img src="images/menu/designs.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/cases/lists/`;"><p>挑設計</p></a>
  663. <div class="expand"><i class="fas fa-chevron-down"></i></div>
  664. </span>
  665. <ul class="dropdown-menu" aria-labelledby="navbarDropdown2" style="position: static;transform: none;">
  666. <hr>
  667. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/cases/lists/small-ctype/">小坪數</a></li>
  668. <hr>
  669. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/cases/lists/renovation-condition/" target="_blank">老屋翻新</a></li>
  670. <hr>
  671. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/search/lists/case/%E9%A2%A8%E6%B0%B4-keyword/">風水</a></li>
  672. </ul>
  673. </li>
  674. <hr>
  675. <li class="nav-item dropdown">
  676. <span class="nav-link d-flex align-items-center" id="navbarDropdown3" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
  677. <div class="d-inline-block link_div me-2"><img src="images/menu/videos.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/videos/lists/`;"><p>看影音</p></a>
  678. <div class="expand"><i class="fas fa-chevron-down"></i></div>
  679. </span>
  680. <ul class="dropdown-menu" aria-labelledby="navbarDropdown3" style="position: static;transform: none;">
  681. <hr>
  682. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/videos/lists/">發燒影音</a></li>
  683. <hr>
  684. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/video-list-5945tw.php">呼叫師傅</a></li>
  685. </ul>
  686. </li>
  687. <hr>
  688. <li class="nav-item dropdown">
  689. <span class="nav-link d-flex align-items-center" id="navbarDropdown4" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
  690. <div class="d-inline-block link_div me-2"><img src="images/menu/person.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/designers/lists/`;"><p>設計師</p></a>
  691. <div class="expand"><i class="fas fa-chevron-down"></i></div>
  692. </span>
  693. <ul class="dropdown-menu" aria-labelledby="navbarDropdown4" style="position: static;transform: none;">
  694. <hr>
  695. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/designers/lists/">設計師總覽</a></li>
  696. <hr>
  697. <li class="nav-item"><a class="dropdown-item nav-link" href="https://event.hhh.com.tw/2021-Most-Favorite-Designers/index.php" target="_blank">觀眾最愛設計師</a></li>
  698. <hr>
  699. <li class="nav-item"><a class="dropdown-item nav-link" href="https://event.hhh.com.tw/topglory/" target="_blank">Glory國際大賞</a></li>
  700. <hr>
  701. <li class="nav-item"><a class="dropdown-item nav-link" href="https://hhh.com.tw/event170427/" target="_blank">老屋翻新</a></li>
  702. <hr>
  703. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/decoquery/lists/address/" target="_blank">查証照</a></li>
  704. </ul>
  705. </li>
  706. <hr>
  707. <li class="nav-item dropdown">
  708. <span class="nav-link d-flex align-items-center" id="navbarDropdown5" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
  709. <div class="d-inline-block link_div me-2"><img src="images/menu/pen.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/columns/lists/all-columntypea/`;"><p>專欄文章</p></a>
  710. <div class="expand"><i class="fas fa-chevron-down"></i></div>
  711. </span>
  712. <ul class="dropdown-menu" aria-labelledby="navbarDropdown5" style="position: static;transform: none;">
  713. <hr>
  714. <li class="nav-item dropdown">
  715. <span class="dropdown-item nav-link sub-link" id="subDropdown1">
  716. <a href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/"><p>編輯精選</p></a>
  717. <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
  718. </span>
  719. <ul class="sub-menu ps-0" style="position: static;transform: none;">
  720. <hr>
  721. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/hometrends-columntypeb/">居家趨勢</a></li>
  722. <hr>
  723. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/hotrank-columntypeb/">人氣排行</a></li>
  724. <hr>
  725. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/archdesign-columntypeb/">建築設計</a></li>
  726. <hr>
  727. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/styleselection-columntypeb/">風格選店</a></li>
  728. <hr>
  729. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/charitable-columntypeb/">公益活動</a></li>
  730. <hr>
  731. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/exhibition-columntypeb/">展演資訊</a></li>
  732. </ul>
  733. </li>
  734. <hr>
  735. <li class="nav-item">
  736. <span class="dropdown-item nav-link sub-link">
  737. <a href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/"><p>居家設計</p></a>
  738. <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
  739. </span>
  740. <ul class="sub-menu ps-0" style="position: static;transform: none;">
  741. <hr>
  742. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/smallhouse-columntypeb/">小宅規劃</a></li>
  743. <hr>
  744. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/oldhouse-columntypeb/">老屋翻新</a></li>
  745. <hr>
  746. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/stylebuild-columntypeb/">風格營造</a></li>
  747. <hr>
  748. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/color-columntypeb/">配色佈置</a></li>
  749. <hr>
  750. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/goodhouse-columntypeb/">好宅特輯</a></li>
  751. <hr>
  752. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/proposal-columntypeb/">設計提案</a></li>
  753. </ul>
  754. </li>
  755. <hr>
  756. <li class="nav-item">
  757. <span class="dropdown-item nav-link sub-link">
  758. <a href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/"><p>裝修前線</p></a>
  759. <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
  760. </span>
  761. <ul class="sub-menu ps-0" style="position: static;transform: none;">
  762. <hr>
  763. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/news-columntypeb/">新聞最前線</a></li>
  764. <hr>
  765. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/allocation-columntypeb/">預算分配</a></li>
  766. <hr>
  767. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/process-columntypeb/">施工流程</a></li>
  768. <hr>
  769. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/knowledge-columntypeb/">建材知識</a></li>
  770. <hr>
  771. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/decorating-columntypeb/">裝潢撇步</a></li>
  772. </ul>
  773. </li>
  774. <hr>
  775. <li class="nav-item">
  776. <span class="dropdown-item nav-link sub-link">
  777. <a href="https://m.hhh.com.tw/columns/lists/plus-columntypea/"><p>生活PLUS</p></a>
  778. <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
  779. </span>
  780. <ul class="sub-menu ps-0" style="position: static;transform: none;">
  781. <hr>
  782. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/fengshui-columntypeb/">居家風水</a></li>
  783. <hr>
  784. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/housekeeping-columntypeb/">家事清潔</a></li>
  785. <hr>
  786. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/storageskills-columntypeb/">收納技巧</a></li>
  787. <hr>
  788. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/renovation-columntypeb/">改造修繕</a></li>
  789. <hr>
  790. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/retire-columntypeb/">退休好幸福</a></li>
  791. </ul>
  792. </li>
  793. <hr>
  794. <li class="nav-item">
  795. <span class="dropdown-item nav-link sub-link">
  796. <a href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/"><p>品牌好物</p></a>
  797. <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
  798. </span>
  799. <ul class="sub-menu ps-0" style="position: static;transform: none;">
  800. <hr>
  801. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/furnishings-columntypeb/">家具家飾</a></li>
  802. <hr>
  803. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/appliances-columntypeb/">美型家電</a></li>
  804. <hr>
  805. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/recommend-columntypeb/">推薦廚衛</a></li>
  806. <hr>
  807. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/homegoods-columntypeb/">居家好物</a></li>
  808. <hr>
  809. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/quality-columntypeb/">優質建材</a></li>
  810. <hr>
  811. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/brandnews-columntypeb/">品牌快訊</a></li>
  812. </ul>
  813. </li>
  814. <hr>
  815. <li class="nav-item">
  816. <span class="dropdown-item nav-link sub-link">
  817. <a href="https://m.hhh.com.tw/columns/lists/focus-columntypea/"><p>房市焦點</p></a>
  818. <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
  819. </span>
  820. <ul class="sub-menu ps-0" style="position: static;transform: none;">
  821. <hr>
  822. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/housingnews-columntypeb/">房市新聞</a></li>
  823. <hr>
  824. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/specsearch-columntypeb/">建案特搜</a></li>
  825. <hr>
  826. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/buyandsell-columntypeb/">買屋賣屋</a></li>
  827. <hr>
  828. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/mortgage-columntypeb/">房貸税務</a></li>
  829. <hr>
  830. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/renting-columntypeb/">租房須知</a></li>
  831. </ul>
  832. </li>
  833. <hr>
  834. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/topic/lists/1-page/new-sort/">主題企劃</a></li>
  835. </ul>
  836. </li>
  837. <hr>
  838. <li class="nav-item dropdown">
  839. <span class="nav-link d-flex align-items-center" id="navbarDropdown6" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
  840. <div class="d-inline-block link_div me-2"><img src="images/menu/sofa.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/products/lists/`;"><p>居家商品</p></a>
  841. <div class="expand"><i class="fas fa-chevron-down"></i></div>
  842. </span>
  843. <ul class="dropdown-menu" aria-labelledby="navbarDropdown6" style="position: static;transform: none;">
  844. <hr>
  845. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/">商品總覽</a></li>
  846. <hr>
  847. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/furniture-pcategorya/">傢俱</a></li>
  848. <hr>
  849. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/household-pcategorya/">家電</a></li>
  850. <hr>
  851. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/kitchen-pcategorya/">廚房</a></li>
  852. <hr>
  853. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/bathroom-pcategorya/">衛浴</a></li>
  854. <hr>
  855. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/lighting-pcategorya/">照明</a></li>
  856. <hr>
  857. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/brands/lists/">品牌總覽</a></li>
  858. <hr>
  859. <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/brand-index.php?brand_id=194">軟裝佈置</a></li>
  860. <hr>
  861. <li class="nav-item"><a class="dropdown-item nav-link" href="https://event.hhh.com.tw/2021-Top-Brands/index.php">消費者愛用品牌</a></li>
  862. </ul>
  863. </li>
  864. <hr>
  865. <li class="nav-item">
  866. <a class="nav-link d-flex align-items-center" href="https://m.hhh.com.tw/builder/lists/">
  867. <div class="d-inline-block link_div me-2"><img src="images/menu/building.svg" alt=""></div>
  868. <p>新建案</p>
  869. </a>
  870. </li>
  871. <hr>
  872. <li class="nav-item">
  873. <a class="nav-link d-flex align-items-center" href="https://m.hhh.com.tw/forum/category/" target="_blank">
  874. <div class="d-inline-block link_div me-2"><img src="images/menu/discuss.svg" alt=""></div>
  875. <p>討論區</p>
  876. </a>
  877. </li>
  878. <hr>
  879. <li class="nav-item">
  880. <a class="nav-link d-flex align-items-center" href="https://event.hhh.com.tw/agent/lecture.html" target="_blank">
  881. <div class="d-inline-block link_div me-2"><img src="images/menu/freelecture.svg" alt=""></div>
  882. <p>免費報名幸福講堂</p>
  883. </a>
  884. </li>
  885. <hr>
  886. <li class="nav-item d-flex align-items-center">
  887. <a class="nav-link d-flex align-items-center" href="https://event.hhh.com.tw/agent/" target="_blank">
  888. <div class="d-inline-block link_div me-2"><img src="images/menu/agent.svg" alt=""></div>
  889. <p>幸福經紀人</p>
  890. <span class="ms-2"><a class="text-phone" href="tel:0800-366-086">0800-366-086</a></span></a>
  891. </li>
  892. <hr>
  893. <li class="nav-item">
  894. <a class="nav-link d-flex align-items-center" href="http://gstv.com.tw/" target="_blank">
  895. <div class="d-inline-block link_div me-2"><img src="images/menu/tv.svg" alt=""></div>
  896. <p>幸福空間居家台</p>
  897. </a>
  898. </li>
  899. <hr>
  900. <li class="nav-item">
  901. <a class="nav-link d-flex align-items-center" href="https://event.hhh.com.tw/contest/2018/" target="_blank">
  902. <div class="d-inline-block link_div me-2"><img src="images/menu/prize.svg" alt=""></div>
  903. <p>ADA 亞洲設計獎</p>
  904. </a>
  905. </li>
  906. <hr>
  907. <li class="nav-item">
  908. <a class="nav-link d-flex align-items-center" href="https://event.hhh.com.tw/2019global-award/" target="_blank">
  909. <div class="d-inline-block link_div me-2"><img src="images/menu/champion.svg" alt=""></div>
  910. <p>國際設計大獎代辦</p>
  911. </a>
  912. </li>
  913. <hr>
  914. <li class="nav-item">
  915. <a class="nav-link d-flex align-items-center mb-1" href="https://www.leju.com.tw/" target="_blank">
  916. <div class="d-inline-block link_div me-2"><img src="images/menu/Image 1@2x.png" alt="" width="20"></div>
  917. <p>樂居網</p>
  918. </a>
  919. </li>
  920. </ul>
  921. </div>
  922. <div class="sec-menu-follows w-100">
  923. <h5 class="sec-menu-follows-title w-100">追蹤我們</h5>
  924. <div class="d-flex justify-content-between">
  925. <a href="https://www.facebook.com/hhhfb"><img src="images/menu/fb.svg" alt="" class="d-inline-block"></a>
  926. <a href="https://line.me/ti/p/%40ovs4341s"><img src="images/menu/line.svg" alt="" class="d-inline-block"></a>
  927. <a href="https://www.youtube.com/user/gorgeousspace"><img src="images/menu/youtube.svg" alt="" class="d-inline-block"></a>
  928. <a href="https://www.instagram.com/gorgeous_space/"><img src="images/menu/instagram@2x.png" alt="" width="43" class="d-inline-block"></a>
  929. <a href=""><img src="images/menu/pinterest.svg" alt="" class="d-inline-block"></a>
  930. </div>
  931. <div class="py-4">
  932. <a href="https://www.facebook.com/agent.hhh.com.tw" class="follows-fp"><img src="images/menu/fb.svg" alt="" width="20" class="d-inline-block me-2">幸福經紀人粉絲專頁</a>
  933. <a href="https://www.facebook.com/retire.tw/" class="follows-fp"><img src="images/menu/fb.svg" alt="" width="20" class="d-inline-block me-2">退休好幸福粉絲專頁</a>
  934. </div>
  935. <div class="sec-menu-links">
  936. <div class="d-flex mb-2">
  937. <a href="https://m.hhh.com.tw/about/">關於我們</a>
  938. <a href="https://m.hhh.com.tw/about/contact/">聯絡我們</a>
  939. <a href="https://m.hhh.com.tw/about/privacy_policy/">隱私保護</a>
  940. <a href="https://m.hhh.com.tw/about/timeline/">公司歷程</a>
  941. </div>
  942. <div class="d-flex">
  943. <a href="https://www.104.com.tw/company/d6hr8sg">企業徵才</a>
  944. <a href="https://m.hhh.com.tw/about/sitemap/">網站地圖</a>
  945. </div>
  946. </div>
  947. <div class="copyright text-center">幸福空間 版權所有<br>© Gorgeous Space Co.Ltd. All Rights Reserved</div>
  948. </div>
  949. </div>
  950. </div>
  951. <div class="sec-search">
  952. <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
  953. <div class="container-fluid" style="padding:0 8px;margin:0;">
  954. <div class="navbar-brand navbar-backs me-0">
  955. <i class="fas fa-chevron-left"></i>
  956. </div>
  957. <a href="#" class="navbar-brand"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="141"></a>
  958. <div class="navbar-brand navbar-search me-0">
  959. </div>
  960. </div>
  961. </nav>
  962. <div class="container-fluid sec-search-block px-0">
  963. <div class="sec-search-list w-100">
  964. <div class="sec-search-form">
  965. <input type="text" name="searchQuery" class="searchBar">
  966. <button type="button" class="searchBtn">
  967. <img width="30" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMC4wMDMiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMC4wMDMgMjAiPgogIDxnIGlkPSJzZWFyY2giIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjA1KSI+CiAgICA8cGF0aCBpZD0iUGF0aF8yMjcyIiBkYXRhLW5hbWU9IlBhdGggMjI3MiIgZD0iTTE5Ljg4LDE4Ljk4bC00Ljg2Mi00Ljg2YTguNTM5LDguNTM5LDAsMSwwLS44NDMuODQzbDQuODYyLDQuODZhLjYuNiwwLDAsMCwuNDIxLjE3Ny41ODQuNTg0LDAsMCwwLC40MjEtLjE3N0EuNi42LDAsMCwwLDE5Ljg4LDE4Ljk4Wk0xLjI0Myw4LjUyOGE3LjMzMyw3LjMzMywwLDEsMSw3LjMzMyw3LjMzNUE3LjM0LDcuMzQsMCwwLDEsMS4yNDMsOC41MjhaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwKSIgZmlsbD0iI2VlNzgwMCIvPgogIDwvZz4KPC9zdmc+Cg==" alt="">
  968. </button>
  969. </div>
  970. <hr>
  971. <div class="sec-search-hots">
  972. <h4 class="sec-search-hots__title">熱搜關鍵字</h4>
  973. <hr>
  974. <div class="d-flex flex-wrap">
  975. <a class="sec-search-hots__link">小坪數</a>
  976. <a class="sec-search-hots__link">收納</a>
  977. <a class="sec-search-hots__link">軟裝佈置</a>
  978. <a class="sec-search-hots__link">幸福經紀人</a>
  979. <a class="sec-search-hots__link">承炫設計</a>
  980. <a class="sec-search-hots__link">風水</a>
  981. <a class="sec-search-hots__link">北歐風</a>
  982. <a class="sec-search-hots__link">周石設計</a>
  983. </div>
  984. </div>
  985. </div>
  986. </div>
  987. </div>
  988. <div class="sec-login">
  989. <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
  990. <div class="container-fluid" style="padding:0 8px;margin:0;">
  991. <div class="navbar-brand navbar-backs me-0">
  992. <i class="fas fa-chevron-left"></i>
  993. </div>
  994. <a href="#" class="navbar-brand"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="141"></a>
  995. <div class="navbar-brand navbar-search me-0">
  996. </div>
  997. </div>
  998. </nav>
  999. <div class="container-fluid sec-login-block px-0">
  1000. <div class="sec-login-list w-100">
  1001. <h4 class="sec- text-center">會員登入</h4>
  1002. <hr>
  1003. <div class="sec-login-btns">
  1004. </div>
  1005. </div>
  1006. </div>
  1007. </div>
  1008. <!-- <div class="sec-favor d-none">
  1009. <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
  1010. <div class="container-fluid" style="padding:0 8px;margin:0;">
  1011. <div class="navbar-brand navbar-back-fav me-0">
  1012. <i class="fas fa-chevron-left"></i>
  1013. </div>
  1014. <a href="#" class="navbar-brand"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="141"></a>
  1015. <div class="navbar-brand navbar-search me-0">
  1016. </div>
  1017. </div>
  1018. </nav>
  1019. <div class="container-fluid sec-favor-block px-0">
  1020. <div class="sec-favor-list w-100">
  1021. <h4 class="sec-favor-title text-center">我的喜好</h4>
  1022. <hr>
  1023. <div class="sec-favor-form">
  1024. <form action="" method="" id="msform">
  1025. <div class="d-flex justify-content-between align-items">
  1026. <div class="form-user">Hi 陳喬治</div>
  1027. <ul class="p-0 form-progressbar">
  1028. <li class="active">1</li>
  1029. <li>2</li>
  1030. <li>3</li>
  1031. </ul>
  1032. </div>
  1033. <fieldset class="form-step form-step1 text-center">
  1034. <div style="position: relative;">
  1035. <h4 class="mb-3">請選擇設計風格 / 多選</h4>
  1036. <div class="row mb-2">
  1037. <input type="checkbox" value="北歐風" name="q1" id="1a" checked/>
  1038. <label class="col-4 mr fs-label-info text-center" for="1a">
  1039. <div class="imgfr mb-1"></div>
  1040. <p>北歐風</p>
  1041. </label>
  1042. <input type="checkbox" value="現代風" name="q1" id="1b" />
  1043. <label class="col-4 mr fs-label-info text-center" for="1b">
  1044. <div class="imgfr mb-1"></div>
  1045. <p>現代風</p>
  1046. </label>
  1047. <input type="checkbox" value="工業風" name="q1" id="1c" />
  1048. <label class="col-4 mr fs-label-info text-center" for="1c">
  1049. <div class="imgfr mb-1"></div>
  1050. <p>工業風</p>
  1051. </label>
  1052. </div>
  1053. <div class="row mb-2">
  1054. <input type="checkbox" value="美式風" name="q1" id="1d" />
  1055. <label class="col-4 mr fs-label-info text-center" for="1d">
  1056. <div class="imgfr mb-1"></div>
  1057. <p>美式風</p>
  1058. </label>
  1059. <input type="checkbox" value="鄉村風" name="q1" id="1e" />
  1060. <label class="col-4 mr fs-label-info text-center" for="1e">
  1061. <div class="imgfr mb-1"></div>
  1062. <p>鄉村風</p>
  1063. </label>
  1064. <input type="checkbox" value="古典風" name="q1" id="1f" />
  1065. <label class="col-4 mr fs-label-info text-center" for="1f">
  1066. <div class="imgfr mb-1"></div>
  1067. <p>古典風</p>
  1068. </label>
  1069. </div>
  1070. <div class="row mb-2">
  1071. <input type="checkbox" value="新古典風" name="q1" id="1g" />
  1072. <label class="col-4 mr fs-label-info text-center" for="1g">
  1073. <div class="imgfr mb-1"></div>
  1074. <p>新古典風</p>
  1075. </label>
  1076. <input type="checkbox" value="休閒多元" name="q1" id="1h" />
  1077. <label class="col-4 mr fs-label-info text-center" for="1h">
  1078. <div class="imgfr mb-1"></div>
  1079. <p>休閒多元</p>
  1080. </label>
  1081. <input type="checkbox" value="其他" name="q1" id="1i" />
  1082. <label class="col-4 mr fs-label-info text-center" for="1i">
  1083. <div class="imgfr mb-1"></div>
  1084. <p>其他</p>
  1085. </label>
  1086. </div>
  1087. <input class="next" type="button" value="下一步">
  1088. </div>
  1089. </fieldset>
  1090. <fieldset class="form-step form-step2 text-center">
  1091. <div style="">
  1092. <h4 class="mb-3">請選擇喜歡的居家空間 / 多選</h4>
  1093. <div class="row mb-2">
  1094. <input type="checkbox" value="北歐風" name="q2" id="2a" checked/>
  1095. <label class="col-4 mr fs-label-info text-center" for="2a">
  1096. <div class="imgfr mb-1"></div>
  1097. <p>客廳</p>
  1098. </label>
  1099. <input type="checkbox" value="現代風" name="q2" id="2b" />
  1100. <label class="col-4 mr fs-label-info text-center" for="2b">
  1101. <div class="imgfr mb-1"></div>
  1102. <p>餐廳</p>
  1103. </label>
  1104. <input type="checkbox" value="工業風" name="q2" id="2c" />
  1105. <label class="col-4 mr fs-label-info text-center" for="2c">
  1106. <div class="imgfr mb-1"></div>
  1107. <p>臥室</p>
  1108. </label>
  1109. </div>
  1110. <div class="row mb-2">
  1111. <input type="checkbox" value="美式風" name="q2" id="2d" />
  1112. <label class="col-4 mr fs-label-info text-center" for="2d">
  1113. <div class="imgfr mb-1"></div>
  1114. <p>廚房</p>
  1115. </label>
  1116. <input type="checkbox" value="鄉村風" name="q2" id="2e" />
  1117. <label class="col-4 mr fs-label-info text-center" for="2e">
  1118. <div class="imgfr mb-1"></div>
  1119. <p>浴室</p>
  1120. </label>
  1121. <input type="checkbox" value="古典風" name="q2" id="2f" />
  1122. <label class="col-4 mr fs-label-info text-center" for="2f">
  1123. <div class="imgfr mb-1"></div>
  1124. <p>玄關</p>
  1125. </label>
  1126. </div>
  1127. <div class="row mb-2">
  1128. <input type="checkbox" value="新古典風" name="q2" id="2g" />
  1129. <label class="col-4 mr fs-label-info text-center" for="2g">
  1130. <div class="imgfr mb-1"></div>
  1131. <p>兒童房</p>
  1132. </label>
  1133. <input type="checkbox" value="休閒多元" name="q2" id="2h" />
  1134. <label class="col-4 mr fs-label-info text-center" for="2h">
  1135. <div class="imgfr mb-1"></div>
  1136. <p>陽台</p>
  1137. </label>
  1138. <input type="checkbox" value="其他" name="q1" id="2i" />
  1139. <label class="col-4 mr fs-label-info text-center" for="2i">
  1140. <div class="imgfr mb-1"></div>
  1141. <p>其他</p>
  1142. </label>
  1143. </div>
  1144. <input class="next" type="button" value="下一步">
  1145. </div>
  1146. </fieldset>
  1147. <fieldset class="form-step form-step3 text-center">
  1148. <h4 class="mb-3 text-center">請選擇以下條件</h4>
  1149. <div class="step3-block text-start">
  1150. <span class="step3-block-title">房屋坪數 / 單選</span>
  1151. <input type="radio" value="20坪以下" name="q3" id="3a" />
  1152. <label class="mr fs-label-chbox radio" for="3a">20坪以下</label>
  1153. <input type="radio" value="20~30坪" name="q3" id="3b" />
  1154. <label class="mr fs-label-chbox radio" for="3b">20~30坪</label>
  1155. <input type="radio" value="30~40坪" name="q3" id="3c" />
  1156. <label class="mr fs-label-chbox radio" for="3c">31~50坪</label>
  1157. <input type="radio" value="50坪以上" name="q3" id="3e" />
  1158. <label class="mr fs-label-chbox radio" for="3e">50坪以上</label>
  1159. </div>
  1160. <div class="step3-block text-start">
  1161. <span class="step3-block-title text-left">房屋預算 / 單選</span>
  1162. <input type="radio" value="20坪以下" name="q4" id="4a" />
  1163. <label class="mr fs-label-chbox radio" for="4a">100萬以下</label>
  1164. <input type="radio" value="20~30坪" name="q4" id="4b" />
  1165. <label class="mr fs-label-chbox radio" for="4b">101~200萬</label>
  1166. <input type="radio" value="30~40坪" name="q4" id="4c" />
  1167. <label class="mr fs-label-chbox radio" for="4c">201~300萬</label>
  1168. <input type="radio" value="50坪以上" name="q4" id="4e" />
  1169. <label class="mr fs-label-chbox radio" for="4e">301萬以上</label>
  1170. </div>
  1171. <div class="step3-block text-start">
  1172. <span class="step3-block-title text-left">裝修屋況 / 單選</span>
  1173. <input type="radio" value="20坪以下" name="q5" id="5a" />
  1174. <label class="mr fs-label-chbox radio" for="5a">新成屋</label>
  1175. <input type="radio" value="20~30坪" name="q5" id="5b" />
  1176. <label class="mr fs-label-chbox radio" for="5b">中古屋</label>
  1177. <input type="radio" value="30~40坪" name="q5" id="5c" />
  1178. <label class="mr fs-label-chbox radio" for="5c">毛胚屋</label>
  1179. <input type="radio" value="50坪以上" name="q5" id="5e" />
  1180. <label class="mr fs-label-chbox radio" for="5e">老屋翻新</label>
  1181. <input type="radio" value="50坪以上" name="q5" id="5e" />
  1182. <label class="mr fs-label-chbox radio" for="5e">自地自建</label>
  1183. </div>
  1184. <div class="btngrp text-center">
  1185. <input class="skip d-block mb-2" type="button" value="略過">
  1186. <input class="next d-block" type="button" value="下一步">
  1187. </div>
  1188. </fieldset>
  1189. </form>
  1190. </div>
  1191. <div class="sec-favor-checklist d-none">
  1192. <form action="" method="">
  1193. <div class="form-user">Hi 陳喬治</div>
  1194. <fieldset class="form-step text-center">
  1195. <h4 class="mb-3 text-center">請選擇以下條件</h4>
  1196. <div class="step3-block text-start">
  1197. <span class="step3-block-title">設計風格 / 多選</span>
  1198. <input type="checkbox" value="20坪以下" name="style" id="north" />
  1199. <label class="mr fs-label-chbox radio" for="north">北歐風</label>
  1200. <input type="checkbox" value="20~30坪" name="style" id="modern" />
  1201. <label class="mr fs-label-chbox radio" for="modern">現代風</label>
  1202. <input type="checkbox" value="30~40坪" name="style" id="indust" />
  1203. <label class="mr fs-label-chbox radio" for="indust">工業風</label>
  1204. <input type="checkbox" value="50坪以上" name="style" id="usa" />
  1205. <label class="mr fs-label-chbox radio" for="usa">美式風</label>
  1206. <input type="checkbox" value="50坪以上" name="style" id="casual" />
  1207. <label class="mr fs-label-chbox radio" for="casual">休閒多元</label>
  1208. <input type="checkbox" value="50坪以上" name="style" id="country" />
  1209. <label class="mr fs-label-chbox radio" for="country">鄉村風</label>
  1210. <input type="checkbox" value="50坪以上" name="style" id="old" />
  1211. <label class="mr fs-label-chbox radio" for="old">古典風</label>
  1212. <input type="checkbox" value="50坪以上" name="style" id="other" />
  1213. <label class="mr fs-label-chbox radio" for="other">其他</label>
  1214. </div>
  1215. <div class="step3-block text-start mb-3">
  1216. <span class="step3-block-title">喜歡的居家空間 / 多選</span>
  1217. <input type="checkbox" value="20坪以下" name="space" id="salon" />
  1218. <label class="mr fs-label-chbox radio" for="salon">客廳</label>
  1219. <input type="checkbox" value="20~30坪" name="space" id="restaurant" />
  1220. <label class="mr fs-label-chbox radio" for="restaurant">餐廳</label>
  1221. <input type="checkbox" value="30~40坪" name="space" id="bedroom" />
  1222. <label class="mr fs-label-chbox radio" for="bedroom">臥室</label>
  1223. <input type="checkbox" value="50坪以上" name="space" id="kitchen" />
  1224. <label class="mr fs-label-chbox radio" for="kitchen">廚房</label>
  1225. <input type="checkbox" value="50坪以上" name="space" id="bathroom" />
  1226. <label class="mr fs-label-chbox radio" for="bathroom">浴室</label>
  1227. <input type="checkbox" value="50坪以上" name="space" id="porch" />
  1228. <label class="mr fs-label-chbox radio" for="porch">玄關</label>
  1229. <input type="checkbox" value="50坪以上" name="space" id="childroom" />
  1230. <label class="mr fs-label-chbox radio" for="childroom">兒童房</label>
  1231. <input type="checkbox" value="50坪以上" name="space" id="balcony" />
  1232. <label class="mr fs-label-chbox radio" for="balcony">陽台</label>
  1233. <input type="checkbox" value="50坪以上" name="space" id="others" />
  1234. <label class="mr fs-label-chbox radio" for="others">其他</label>
  1235. </div>
  1236. <div class="step3-block text-start">
  1237. <span class="step3-block-title">房屋坪數 / 單選</span>
  1238. <input type="radio" value="20坪以下" name="feet" id="below20" />
  1239. <label class="mr fs-label-chbox radio" for="below20">20坪以下</label>
  1240. <input type="radio" value="20~30坪" name="feet" id="20to30" />
  1241. <label class="mr fs-label-chbox radio" for="20to30">20~30坪</label>
  1242. <input type="radio" value="30~40坪" name="feet" id="30to50" />
  1243. <label class="mr fs-label-chbox radio" for="30to50">31~50坪</label>
  1244. <input type="radio" value="50坪以上" name="feet" id="above50" />
  1245. <label class="mr fs-label-chbox radio" for="above50">50坪以上</label>
  1246. </div>
  1247. <div class="step3-block text-start">
  1248. <span class="step3-block-title text-left">房屋預算 / 多選</span>
  1249. <input type="checkbox" value="20坪以下" name="budget" id="below1m" />
  1250. <label class="mr fs-label-chbox radio" for="below1m">100萬以下</label>
  1251. <input type="checkbox" value="20~30坪" name="budget" id="100to200" />
  1252. <label class="mr fs-label-chbox radio" for="100to200">101~200萬</label>
  1253. <input type="checkbox" value="30~40坪" name="budget" id="200to300" />
  1254. <label class="mr fs-label-chbox radio" for="200to300">201~300萬</label>
  1255. <input type="checkbox" value="50坪以上" name="budget" id="300up" />
  1256. <label class="mr fs-label-chbox radio" for="300up">301萬以上</label>
  1257. </div>
  1258. <div class="step3-block text-start">
  1259. <span class="step3-block-title text-left">裝修屋況 / 單選</span>
  1260. <input type="radio" value="20坪以下" name="condition" id="new" />
  1261. <label class="mr fs-label-chbox radio" for="new">新成屋</label>
  1262. <input type="radio" value="20~30坪" name="condition" id="aged" />
  1263. <label class="mr fs-label-chbox radio" for="aged">中古屋</label>
  1264. <input type="radio" value="30~40坪" name="condition" id="unfinished" />
  1265. <label class="mr fs-label-chbox radio" for="unfinished">毛胚屋</label>
  1266. <input type="radio" value="50坪以上" name="condition" id="refurbish" />
  1267. <label class="mr fs-label-chbox radio" for="refurbish">老屋翻新</label>
  1268. <input type="radio" value="50坪以上" name="condition" id="selfown" />
  1269. <label class="mr fs-label-chbox radio" for="selfown">自地自建</label>
  1270. </div>
  1271. <div class="btngrp text-center">
  1272. <input class="next d-block mb-3" type="button" value="下一步">
  1273. </div>
  1274. </fieldset>
  1275. </form>
  1276. </div>
  1277. </div>
  1278. </div>
  1279. </div> -->
  1280. </div>
  1281. <!-- bootstrap JS -->
  1282. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  1283. integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
  1284. crossorigin="anonymous"></script>
  1285. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
  1286. integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
  1287. crossorigin="anonymous"></script>
  1288. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  1289. <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  1290. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  1291. <script src="js/lazy-load.js" async></script>
  1292. <script async defer src="js/index-list.js"></script>
  1293. </body>
  1294. </html>