3 年前 · fec49faded
--- a/desktopB/goto.js
+++ b/desktopB/goto.js
@@ -0,0 +1,5 @@
 
				+$(".banner-slider").slick({
			
 
				+    speed: 1000,
			
 
				+    swipe: true,
			
 
				+    arrows: false,
			
 
				+  });
			
--- a/desktopB/img/banner/00.webp
+++ b/desktopB/img/banner/00.webp
--- a/desktopB/img/banner/001.webp
+++ b/desktopB/img/banner/001.webp
--- a/desktopB/img/banner/002.webp
+++ b/desktopB/img/banner/002.webp
--- a/desktopB/img/banner/003.webp
+++ b/desktopB/img/banner/003.webp
--- a/desktopB/img/black.png
+++ b/desktopB/img/black.png
--- a/desktopB/img/box33.png
+++ b/desktopB/img/box33.png
--- a/desktopB/img/content/0111.webp
+++ b/desktopB/img/content/0111.webp
--- a/desktopB/img/content/0211.webp
+++ b/desktopB/img/content/0211.webp
--- a/desktopB/img/content/02211.webp
+++ b/desktopB/img/content/02211.webp
--- a/desktopB/img/content/03.webp
+++ b/desktopB/img/content/03.webp
--- a/desktopB/img/feedback-img/feedback01.webp
+++ b/desktopB/img/feedback-img/feedback01.webp
--- a/desktopB/img/feedback-img/feedback02.webp
+++ b/desktopB/img/feedback-img/feedback02.webp
--- a/desktopB/img/feedback-img/feedback03.webp
+++ b/desktopB/img/feedback-img/feedback03.webp
--- a/desktopB/img/feedback-img/feedback04.webp
+++ b/desktopB/img/feedback-img/feedback04.webp
--- a/desktopB/img/feedback-img/feedback0411.webp
+++ b/desktopB/img/feedback-img/feedback0411.webp
--- a/desktopB/img/feedback-img/feedback05.webp
+++ b/desktopB/img/feedback-img/feedback05.webp
--- a/desktopB/img/feedback-img/feedback06.webp
+++ b/desktopB/img/feedback-img/feedback06.webp
--- a/desktopB/img/icondown.png
+++ b/desktopB/img/icondown.png
--- a/desktopB/img/logo-main-1-1.webp
+++ b/desktopB/img/logo-main-1-1.webp
--- a/desktopB/img/logo/facebook
+++ b/desktopB/img/logo/facebook
--- a/desktopB/img/logo/facebook.webp
+++ b/desktopB/img/logo/facebook.webp
--- a/desktopB/img/logo/line.webp
+++ b/desktopB/img/logo/line.webp
--- a/desktopB/img/play
+++ b/desktopB/img/play
--- a/desktopB/img/process/box1.png
+++ b/desktopB/img/process/box1.png
--- a/desktopB/img/process/box22.png
+++ b/desktopB/img/process/box22.png
--- a/desktopB/img/process/box3.png
+++ b/desktopB/img/process/box3.png
--- a/desktopB/img/process/box4.png
+++ b/desktopB/img/process/box4.png
--- a/desktopB/img/process/icon1.webp
+++ b/desktopB/img/process/icon1.webp
--- a/desktopB/img/process/icon2.webp
+++ b/desktopB/img/process/icon2.webp
--- a/desktopB/img/service/service01.webp
+++ b/desktopB/img/service/service01.webp
--- a/desktopB/img/service/service02.webp
+++ b/desktopB/img/service/service02.webp
--- a/desktopB/img/totop.png
+++ b/desktopB/img/totop.png
--- a/desktopB/index.html
+++ b/desktopB/index.html
@@ -0,0 +1,347 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <meta name="copyright" content="2021 © 幸福空間 │ All Rights Reserved.">
			
 
				+    <meta name="creation-date" content="2021-05-24 12:00:04 GTM+8">
			
 
				+    <meta name="description" content="免費預約裝修諮詢">
			
 
				+    <meta name="distribution" content="Taiwan">
			
 
				+    <meta name="keywords" content="">
			
 
				+    <meta name="revisit-after" content="1 days">
			
 
				+    <meta name="robots" content="all">
			
 
				+    <meta name="format-detection" content="telephone=no">
			
 
				+    <meta property="og:description" content="免費預約裝修諮詢" />
			
 
				+    <meta property="og:site_name" content="全室裝修" />
			
 
				+    <meta property="og:title" content="幸福空間 - 全室裝修" />
			
 
				+    <meta property="og:type" content="website" />
			
 
				+    <meta property="og:locale" content="zh_TW">
			
 
				+    <title>全室裝修</title>
			
 
				+
			
 
				+
			
 
				+
			
 
				+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
			
 
				+        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
			
 
				+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
			
 
				+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
			
 
				+    <link rel="stylesheet" href="./style.css">
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <div class="banner container-fluid" style="padding:0; margin:0 ">
			
 
				+        <!-- <section id="banner"> -->
			
 
				+        <div class="Navigation">
			
 
				+            <div class="logo">
			
 
				+                <a href="https://hhh.com.tw/"> <img src="./img/logo-main-1-1.webp" alt=""></a>
			
 
				+            </div>
			
 
				+            <div class="link">
			
 
				+                <a href=""><img src="./img/logo/facebook (3).webp" alt=""></a>
			
 
				+                <a href=""><img src="./img/logo/line.webp" alt=""></a>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        <hr class="hr  bg-white" style="opacity:1">
			
 
				+        <div id="text">
			
 
				+            <div class="banner-slider d-flex align-items-center justify-content-center">
			
 
				+                <div class="banner1">
			
 
				+                    <div class="banner-titleh1" >馬上預約設計師媒合</div>
			
 
				+                    <div class="process-box">
			
 
				+                        
			
 
				+                        <div class="box">
			
 
				+                            <img src="./img/process/box1.png" alt="">
			
 
				+                            <div class="box-text">填寫裝修需求表單</div>
			
 
				+                        </div>
			
 
				+                        <div class="box">
			
 
				+                            <img src="./img/process/box22.png" alt="">
			
 
				+                            <div class="box-text">專人聯繫裝修諮詢</div>
			
 
				+                            <div class="box-text">並依屋主需求</div>
			
 
				+                            <div class="box-text">推薦設計師</div>
			
 
				+                        </div>
			
 
				+                        <div class="box">
			
 
				+                            <img src="./img/process/box3.png" alt="">
			
 
				+                            <div class="box-text">設計公司會</div>
			
 
				+                            <div class="box-text"> 主動與屋主</div>
			
 
				+                        </div>
			
 
				+                        <div class="box">
			
 
				+                            <img src="./img/process/box4.png" alt="">
			
 
				+                            <div class="box-text">媒合成功</div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <img class="icondown"  src="./img/black.png" alt="">
			
 
				+                </div>
			
 
				+                <div class="banner2">
			
 
				+                    <div class="banner-titleh1" >馬上預約設計師媒合</div>
			
 
				+                    <div class="process-box">
			
 
				+                        
			
 
				+                        <div class="box">
			
 
				+                            <img src="./img/process/box1.png" alt="">
			
 
				+                            <div class="box-text">填寫裝修需求表單</div>
			
 
				+                        </div>
			
 
				+                        <div class="box">
			
 
				+                            <img src="./img/process/box22.png" alt="">
			
 
				+                            <div class="box-text">專人聯繫裝修諮詢</div>
			
 
				+                            <div class="box-text">並依屋主需求</div>
			
 
				+                            <div class="box-text">推薦設計師</div>
			
 
				+                        </div>
			
 
				+                        <div class="box">
			
 
				+                            <img src="./img/process/box3.png" alt="">
			
 
				+                            <div class="box-text">設計公司會</div>
			
 
				+                            <div class="box-text"> 主動與屋主</div>
			
 
				+                        </div>
			
 
				+                        <div class="box">
			
 
				+                            <img src="./img/process/box4.png" alt="">
			
 
				+                            <div class="box-text">媒合成功</div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <img class="icondown"  src="./img/black.png" alt="">
			
 
				+                </div>
			
 
				+                <div class="banner3">
			
 
				+                    <div class="banner-titleh1" >馬上預約設計師媒合</div>
			
 
				+                    <div class="process-box">
			
 
				+                        
			
 
				+                        <div class="box">
			
 
				+                            <img src="./img/process/box1.png" alt="">
			
 
				+                            <div class="box-text">填寫裝修需求表單</div>
			
 
				+                        </div>
			
 
				+                        <div class="box">
			
 
				+                            <img src="./img/process/box22.png" alt="">
			
 
				+                            <div class="box-text">專人聯繫裝修諮詢</div>
			
 
				+                            <div class="box-text">並依屋主需求</div>
			
 
				+                            <div class="box-text">推薦設計師</div>
			
 
				+                        </div>
			
 
				+                        <div class="box">
			
 
				+                            <img src="./img/process/box3.png" alt="">
			
 
				+                            <div class="box-text">設計公司會</div>
			
 
				+                            <div class="box-text"> 主動與屋主</div>
			
 
				+                        </div>
			
 
				+                        <div class="box">
			
 
				+                            <img src="./img/process/box4.png" alt="">
			
 
				+                            <div class="box-text">媒合成功</div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <img class="icondown"  src="./img/black.png" alt="">
			
 
				+                </div>
			
 
				+                
			
 
				+               
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </section>
			
 
				+    <img class="arrow" data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="./img/totop.png" alt="">
			
 
				+    </div>
			
 
				+    <section id="contact-us">
			
 
				+        <div class="form-title">
			
 
				+            <h1>已經服務超過14392個生活</h1>
			
 
				+            <h1>打造夢想中的完美居家生活</h1>
			
 
				+            <h1>即刻啟動!</h1>
			
 
				+        </div>
			
 
				+        <!-- <hr> -->
			
 
				+        <div class="contact-text">
			
 
				+            <div class="text-p">請撥打全台付費專線<span style="opacity: 0;">11</span><span id="phone"
			
 
				+                    style="color: #ee751b; font-weight:900;"> 0800-336-086</span></div>
			
 
				+            <div class="text-p">或填寫以下資料，專人將盡速與您聯繫</div>
			
 
				+        </div>
			
 
				+
			
 
				+        <div class="container-fluid" style="padding:0; margin:0;">
			
 
				+            <form class="contact-form1">
			
 
				+                <div id="contact-form">
			
 
				+                    <div id="form-left">
			
 
				+                        <select name="loc" id="location" required>
			
 
				+                            <option value="地區" disabled selected="selected">地區</option>
			
 
				+                            <option class="option">基隆市</option>
			
 
				+                            <option class="option">台北市</option>
			
 
				+                            <option class="option">新北市</option>
			
 
				+                            <option class="option">桃園市</option>
			
 
				+                            <option class="option">新竹縣</option>
			
 
				+                            <option class="option">新竹市</option>
			
 
				+                            <option class="option">苗栗縣</option>
			
 
				+                            <option class="option">台中市</option>
			
 
				+                            <option class="option">彰化縣</option>
			
 
				+                            <option class="option">南投縣</option>
			
 
				+                            <option class="option">雲林縣</option>
			
 
				+                            <option class="option">嘉義縣</option>
			
 
				+                            <option class="option">嘉義市</option>
			
 
				+                            <option class="option">台南市</option>
			
 
				+                            <option class="option">高雄市</option>
			
 
				+                            <option class="option">屏東縣</option>
			
 
				+                            <option class="option">宜蘭縣</option>
			
 
				+                            <option class="option">花蓮縣</option>
			
 
				+                            <option class="option">台東縣</option>
			
 
				+                            <option class="option">澎湖縣</option>
			
 
				+                        </select>
			
 
				+                        <select name="h_class" id="type" required>
			
 
				+                            <option value="房屋類型" disabled selected="selected">房屋類型</option>
			
 
				+                            <option class="option">預售屋</option>
			
 
				+                            <option class="option">中古屋</option>
			
 
				+                            <option class="option">新成屋</option>
			
 
				+                            <option class="option">毛胚屋</option>
			
 
				+                            <option class="option">自地自建</option>
			
 
				+                        </select>
			
 
				+                        <select name="type" id="modal" required>
			
 
				+                            <option value="房屋型態" disabled selected="selected">房屋型態</option>
			
 
				+                            <option class="option">透天</option>
			
 
				+                            <option class="option">電梯華廈</option>
			
 
				+                            <option class="option">公寓</option>
			
 
				+                            <option class="option">平房</option>
			
 
				+                            <option class="option">民宿</option>
			
 
				+                            <option class="option">商空</option>
			
 
				+                            <option class="option">其他</option>
			
 
				+                        </select>
			
 
				+                        <select name="budget" id="budget" required>
			
 
				+                            <option value="裝修預算" disabled selected="selected">裝修預算</option>
			
 
				+                            <option class="option">50~100萬</option>
			
 
				+                            <option class="option">100~200萬</option>
			
 
				+                            <option class="option">200~300萬</option>
			
 
				+                            <option class="option">300萬~400萬</option>
			
 
				+                            <option class="option">400~500萬</option>
			
 
				+                            <option class="option">500萬以上</option>
			
 
				+                        </select>
			
 
				+                        <input name="size" type="text" id="square" placeholder="請輸入坪數" required>
			
 
				+                        <select name="bed_num" id="rooms" required style="margin-right:1.5vw">
			
 
				+                            <option value="幾房" disabled selected="selected">幾房</option>
			
 
				+                            <option class="option" value="1">1</option>
			
 
				+                            <option class="option" value="2">2</option>
			
 
				+                            <option class="option" value="3">3</option>
			
 
				+                            <option class="option" value="4">4</option>
			
 
				+                            <option class="option" value="5">5</option>
			
 
				+                            <option class="option" value="6">6</option>
			
 
				+                            <option class="option" value="7">7</option>
			
 
				+                            <option class="option" value="8">8</option>
			
 
				+                        </select>
			
 
				+                        <select name="liv_num" id="livingroom" required style="margin-right:1.5vw">
			
 
				+                            <option value="幾廳" disabled selected="selected" style="margin-right:25px">幾廳</option>
			
 
				+                            <option class="option" value="1">1</option>
			
 
				+                            <option class="option" value="2">2</option>
			
 
				+                        </select>
			
 
				+                        <select name="bath_num" id="bathroom" required>
			
 
				+                            <option value="地區" disabled selected="selected">幾衛</option>
			
 
				+                            <option class="option" value="1">1</option>
			
 
				+                            <option class="option" value="2">2</option>
			
 
				+                            <option class="option" value="3">3</option>
			
 
				+                            <option class="option" value="4">4</option>
			
 
				+                            <option class="option" value="5">5</option>
			
 
				+                            <option class="option" value="6">6</option>
			
 
				+                            <option class="option" value="7">7</option>
			
 
				+                            <option class="option" value="8">8</option>
			
 
				+                        </select>
			
 
				+                        <select name="style" id="style" required>
			
 
				+                            <option value="風格類型" disabled selected="selected">風格類型</option>
			
 
				+                            <option class="option">現代風</option>
			
 
				+                            <option class="option">鄉村風</option>
			
 
				+                            <option class="option">古典風</option>
			
 
				+                            <option class="option">休閒多元</option>
			
 
				+                            <option class="option">美式風</option>
			
 
				+                            <option class="option">奢華風</option>
			
 
				+                            <option class="option">新古典</option>
			
 
				+                            <option class="option">日式禪風</option>
			
 
				+                            <option class="option">東方風</option>
			
 
				+                            <option class="option">混搭風</option>
			
 
				+                            <option class="option">前衛風</option>
			
 
				+                            <option class="option">北歐風</option>
			
 
				+                            <option class="option">工業風</option>
			
 
				+                            <option class="option">異國風</option>
			
 
				+                        </select>
			
 
				+                        <input name="prefer_date" type="date" id="date" placeholder="預選裝修日期" required>
			
 
				+                    </div>
			
 
				+                    <hr>
			
 
				+                    <div id="form-right">
			
 
				+                        <div id="facebook" onclick='callFB()'>
			
 
				+                            <img src="./img/logo/facebook.webp" alt="">
			
 
				+                            使用FB填入信箱與姓名
			
 
				+                        </div>
			
 
				+                        <input type="text" name="email" id="email" placeholder="請輸入信箱" required>
			
 
				+                        <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
			
 
				+                        <input type="text" name="phone" id="phone" placeholder="請輸入電話" required>
			
 
				+                        <select name="gender" id="gender">
			
 
				+                            <option value="性格" disabled selected="selected">性別</option>
			
 
				+                            <option class="option">男</option>
			
 
				+                            <option class="option">女</option>
			
 
				+                        </select>
			
 
				+                        <input type="checkbox" id="checkbox" required> <label for="agree">同意</label><a
			
 
				+                            href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
			
 
				+                    </div>
			
 
				+
			
 
				+                </div>
			
 
				+                <div class="form-btn">
			
 
				+                    <input class="btn" style="opacity: 1;" type="submit" value="送出">
			
 
				+
			
 
				+                </div>
			
 
				+            </form>
			
 
				+        </div>
			
 
				+    </section>
			
 
				+
			
 
				+    <div class="container-fluid" style="padding:0; margin: 0;">
			
 
				+        <section id="feedback">
			
 
				+            <h1 class="title">客戶真實見證</h1>
			
 
				+            <div id="feedback-box">
			
 
				+                <div class="box">
			
 
				+                    <img src="./img/feedback-img/feedback01.webp" alt="">
			
 
				+                    <p>嚮往人文接觸處的溫度-文響</p>
			
 
				+                    <a href="https://hhh.com.tw/video-post.php?id=2905"><img class="play"
			
 
				+                            style="width: 3vw;height: 3vw  " src="./img/play (1).png" alt=""></a>
			
 
				+                </div>
			
 
				+                <div class="box">
			
 
				+                    <img src="./img/feedback-img/feedback02.webp" alt="">
			
 
				+                    <p>緞帶般曲線 譜出家的律動與甜蜜</p>
			
 
				+                    <a href="https://hhh.com.tw/video-post.php?id=3782"><img class="play"
			
 
				+                            style="width: 3vw;height: 3vw  " src="./img/play (1).png" alt=""></a>
			
 
				+                </div>
			
 
				+                <div class="box">
			
 
				+                    <img src="./img/feedback-img/feedback03.webp" alt="">
			
 
				+                    <p>系統設計的變革 前衛科技宅</p>
			
 
				+                    <a href="https://hhh.com.tw/video-post.php?id=3549"><img class="play"
			
 
				+                            style="width: 3vw;height: 3vw  " src="./img/play (1).png" alt=""></a>
			
 
				+                </div>
			
 
				+                <div class="box">
			
 
				+                    <img src="./img/feedback-img/feedback0411.webp" alt="">
			
 
				+                    <p>用系統設計 實現歐洲皇室城堡夢</p>
			
 
				+                    <a href="https://hhh.com.tw/video-post.php?id=2985"><img class="play"
			
 
				+                            style="width: 3vw;height: 3vw  " src="./img/play (1).png" alt=""></a>
			
 
				+                </div>
			
 
				+                <div class="box">
			
 
				+                    <img src="./img/feedback-img/feedback05.webp" alt="">
			
 
				+                    <p>不良格局變身 3米6日光鄉村宅</p>
			
 
				+                    <a href="https://hhh.com.tw/video-post.php?id=2122"><img class="play"
			
 
				+                            style="width: 3vw;height: 3vw  " src="./img/play (1).png" alt=""></a>
			
 
				+                </div>
			
 
				+                <div class="box">
			
 
				+                    <img src="./img/feedback-img/feedback06.webp" alt="">
			
 
				+                    <p>雙拼豪宅古典、日式一次擁有</p>
			
 
				+                    <a href="https://hhh.com.tw/video-post.php?id=3847"><img class="play"
			
 
				+                            style="width: 3vw;height: 3vw  " src="./img/play (1).png" alt=""></a>
			
 
				+                </div>
			
 
				+
			
 
				+            </div>
			
 
				+
			
 
				+        </section>
			
 
				+
			
 
				+    </div>
			
 
				+
			
 
				+    <div class="container-fluid" style="padding:0; margin:0; ">
			
 
				+
			
 
				+        <div id="footer">
			
 
				+            <p>幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.</p>
			
 
				+            <a href="x">｜聯絡我們｜</a>
			
 
				+            <a href="">｜關於本站｜</a>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
			
 
				+        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
			
 
				+        crossorigin="anonymous"></script>
			
 
				+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
			
 
				+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
			
 
				+        crossorigin="anonymous"></script>
			
 
				+
			
 
				+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
			
 
				+    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
			
 
				+
			
 
				+    <script src="./goto.js"></script>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/desktopB/style.css
+++ b/desktopB/style.css
@@ -0,0 +1,488 @@
 
				+@charset "UTF-8";
			
 
				+* {
			
 
				+  font-family: 微軟正黑體;
			
 
				+}
			
 
				+
			
 
				+@font-face {
			
 
				+  font-family: 追奇手寫體;
			
 
				+  src: url(./drechifont-proportional.ttf);
			
 
				+  font-weight: 900;
			
 
				+}
			
 
				+
			
 
				+body .btn {
			
 
				+  width: 96vw;
			
 
				+  margin: 0 auto;
			
 
				+}
			
 
				+
			
 
				+body .btn .btn-main {
			
 
				+  -webkit-box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
			
 
				+          box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
			
 
				+  border: none;
			
 
				+  padding: 15px;
			
 
				+  background: #404854;
			
 
				+  color: #fff;
			
 
				+  font-size: 16px;
			
 
				+  font-weight: 600;
			
 
				+  width: 280px;
			
 
				+  border-radius: 30px;
			
 
				+  -webkit-transition: 0.3s;
			
 
				+  transition: 0.3s;
			
 
				+}
			
 
				+
			
 
				+body .btn .btn-main:hover {
			
 
				+  background-color: #9c857b;
			
 
				+  width: 285px;
			
 
				+  font-size: 17px;
			
 
				+}
			
 
				+
			
 
				+body .title {
			
 
				+  font-weight: bolder;
			
 
				+  font-family: "Times New Roman", Times, serif;
			
 
				+  padding: 15px;
			
 
				+  font-size: 45px;
			
 
				+  color: #4b515e;
			
 
				+  padding-left: 10vw;
			
 
				+}
			
 
				+
			
 
				+body .arrow {
			
 
				+  position: fixed;
			
 
				+  right: 30px;
			
 
				+  bottom: 30px;
			
 
				+  width: 30px;
			
 
				+  z-index: 10;
			
 
				+}
			
 
				+
			
 
				+.banner {
			
 
				+  width: 100vw;
			
 
				+  position: relative;
			
 
				+}
			
 
				+
			
 
				+.banner #text {
			
 
				+  text-align: center;
			
 
				+}
			
 
				+
			
 
				+.banner #text .banner-slider {
			
 
				+  margin: 0 !important;
			
 
				+  padding: 0 !important;
			
 
				+}
			
 
				+
			
 
				+.banner #text .banner-slider .banner1,
			
 
				+.banner #text .banner-slider .banner2,
			
 
				+.banner #text .banner-slider .banner3 {
			
 
				+  height: 100vh;
			
 
				+  background-size: cover;
			
 
				+  background-repeat: no-repeat;
			
 
				+  background-position: center;
			
 
				+  padding-right: 0 !important;
			
 
				+  position: relative;
			
 
				+}
			
 
				+
			
 
				+.banner #text .banner-slider .banner1 .banner-titleh1,
			
 
				+.banner #text .banner-slider .banner2 .banner-titleh1,
			
 
				+.banner #text .banner-slider .banner3 .banner-titleh1 {
			
 
				+  padding-top: 16vw;
			
 
				+  text-align: center;
			
 
				+  color: #fff;
			
 
				+  font-size: 55px;
			
 
				+}
			
 
				+
			
 
				+.banner #text .banner-slider .banner1 .icondown,
			
 
				+.banner #text .banner-slider .banner2 .icondown,
			
 
				+.banner #text .banner-slider .banner3 .icondown {
			
 
				+  position: absolute;
			
 
				+  left: 48vw;
			
 
				+  top: 45vw;
			
 
				+}
			
 
				+
			
 
				+.banner #text .banner-slider .banner1 .process-box,
			
 
				+.banner #text .banner-slider .banner2 .process-box,
			
 
				+.banner #text .banner-slider .banner3 .process-box {
			
 
				+  padding-top: 5vw;
			
 
				+  display: -ms-grid;
			
 
				+  display: grid;
			
 
				+  -ms-grid-columns: (1fr)[4];
			
 
				+      grid-template-columns: repeat(4, 1fr);
			
 
				+  width: 55vw;
			
 
				+  margin: auto;
			
 
				+}
			
 
				+
			
 
				+.banner #text .banner-slider .banner1 .process-box .box-text,
			
 
				+.banner #text .banner-slider .banner2 .process-box .box-text,
			
 
				+.banner #text .banner-slider .banner3 .process-box .box-text {
			
 
				+  font-family: 微軟正黑體;
			
 
				+  text-align: center;
			
 
				+  font-size: 18px;
			
 
				+  font-weight: 900;
			
 
				+  padding-right: 3vw;
			
 
				+  color: #fff;
			
 
				+}
			
 
				+
			
 
				+.banner #text .banner-slider .banner1 .process-box img,
			
 
				+.banner #text .banner-slider .banner2 .process-box img,
			
 
				+.banner #text .banner-slider .banner3 .process-box img {
			
 
				+  width: 180px;
			
 
				+  height: 180px;
			
 
				+}
			
 
				+
			
 
				+.banner #text .banner-slider .banner1 {
			
 
				+  background-image: url(./img/banner/001.webp);
			
 
				+}
			
 
				+
			
 
				+.banner #text .banner-slider .banner2 {
			
 
				+  background-image: url(./img/banner/001.webp);
			
 
				+}
			
 
				+
			
 
				+.banner #text .banner-slider .banner3 {
			
 
				+  background-image: url(./img/banner/001.webp);
			
 
				+}
			
 
				+
			
 
				+.banner #text h1 {
			
 
				+  padding: 15px;
			
 
				+  color: #fff;
			
 
				+  font-family: 追奇手寫體;
			
 
				+  font-size: 72px;
			
 
				+}
			
 
				+
			
 
				+.banner #text .btn-main {
			
 
				+  -webkit-box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
			
 
				+          box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
			
 
				+  border: none;
			
 
				+  padding: 15px;
			
 
				+  background: #404854;
			
 
				+  color: #fff;
			
 
				+  font-size: 16px;
			
 
				+  font-weight: 600;
			
 
				+  width: 280px;
			
 
				+  border-radius: 30px;
			
 
				+  -webkit-transition: 0.3s;
			
 
				+  transition: 0.3s;
			
 
				+}
			
 
				+
			
 
				+.banner #text .btn-main:hover {
			
 
				+  background-color: #9c857b;
			
 
				+  width: 285px;
			
 
				+  font-size: 17px;
			
 
				+}
			
 
				+
			
 
				+.banner .Navigation {
			
 
				+  width: 90vw;
			
 
				+  position: absolute;
			
 
				+  margin: 0 auto;
			
 
				+  top: 5px;
			
 
				+  z-index: 5;
			
 
				+  display: -ms-grid;
			
 
				+  display: grid;
			
 
				+  -ms-grid-columns: 2fr 4fr;
			
 
				+      grid-template-columns: 2fr 4fr;
			
 
				+}
			
 
				+
			
 
				+.banner .Navigation .logo {
			
 
				+  padding-top: 1.5vw;
			
 
				+  padding-left: 12vw;
			
 
				+}
			
 
				+
			
 
				+.banner .Navigation .logo img {
			
 
				+  width: 120px;
			
 
				+}
			
 
				+
			
 
				+.banner .Navigation .link {
			
 
				+  text-align: right;
			
 
				+  padding: 30px;
			
 
				+}
			
 
				+
			
 
				+.banner .Navigation .link img {
			
 
				+  width: 1.5vw;
			
 
				+  -webkit-filter: invert(100%) sepia(0%) saturate(10%) hue-rotate(238deg) brightness(104%) contrast(103%);
			
 
				+          filter: invert(100%) sepia(0%) saturate(10%) hue-rotate(238deg) brightness(104%) contrast(103%);
			
 
				+  -webkit-transition: 0.3s;
			
 
				+  transition: 0.3s;
			
 
				+}
			
 
				+
			
 
				+.banner .Navigation .link img:hover {
			
 
				+  -webkit-filter: none;
			
 
				+          filter: none;
			
 
				+}
			
 
				+
			
 
				+.banner .Navigation .link a {
			
 
				+  display: inline-block;
			
 
				+  text-decoration: none;
			
 
				+  color: #fff;
			
 
				+  letter-spacing: 1px;
			
 
				+  font-size: 0.9rem;
			
 
				+  font-weight: 600;
			
 
				+  cursor: pointer;
			
 
				+  padding: 15px;
			
 
				+  position: relative;
			
 
				+}
			
 
				+
			
 
				+.banner hr {
			
 
				+  width: 85vw;
			
 
				+  position: absolute;
			
 
				+  top: 80px;
			
 
				+  left: 100px;
			
 
				+  height: 1px;
			
 
				+  z-index: 5;
			
 
				+}
			
 
				+
			
 
				+#contact-us {
			
 
				+  margin: 0 auto;
			
 
				+  width: 100vw;
			
 
				+  background: #eee;
			
 
				+  position: relative;
			
 
				+}
			
 
				+
			
 
				+#contact-us .contact-text {
			
 
				+  margin: 0 auto;
			
 
				+  width: 68vw;
			
 
				+}
			
 
				+
			
 
				+#contact-us .contact-text .text-p {
			
 
				+  font-size: 16px;
			
 
				+  font-weight: 600;
			
 
				+}
			
 
				+
			
 
				+#contact-us .form-title {
			
 
				+  width: 70vw;
			
 
				+  margin: 0 auto;
			
 
				+  padding-top: 100px;
			
 
				+  margin-bottom: 120px;
			
 
				+  color: #5c5248;
			
 
				+}
			
 
				+
			
 
				+#contact-us .form-title h1 {
			
 
				+  text-align: center;
			
 
				+  font-size: 32px;
			
 
				+  font-weight: 900;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form {
			
 
				+  width: 75vw;
			
 
				+  display: -ms-grid;
			
 
				+  display: grid;
			
 
				+  -ms-grid-columns: (1fr)[2];
			
 
				+      grid-template-columns: repeat(2, 1fr);
			
 
				+  margin-top: 10px;
			
 
				+  margin: 0 auto;
			
 
				+  position: relative;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form hr {
			
 
				+  position: absolute;
			
 
				+  width: 34vw;
			
 
				+  -webkit-transform: rotate(90deg);
			
 
				+          transform: rotate(90deg);
			
 
				+  left: 20vw;
			
 
				+  top: 19vw;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #location,
			
 
				+#contact-us #contact-form #type,
			
 
				+#contact-us #contact-form #modal,
			
 
				+#contact-us #contact-form #budget,
			
 
				+#contact-us #contact-form #square,
			
 
				+#contact-us #contact-form #style,
			
 
				+#contact-us #contact-form #date,
			
 
				+#contact-us #contact-form #email,
			
 
				+#contact-us #contact-form #name,
			
 
				+#contact-us #contact-form #phone,
			
 
				+#contact-us #contact-form #gender {
			
 
				+  width: 100%;
			
 
				+  height: 50px;
			
 
				+  margin: 10px 0;
			
 
				+  padding-left: 10px;
			
 
				+  border: 1px solid rgba(0, 0, 0, 0.3);
			
 
				+  padding: 10px 15px;
			
 
				+  font-size: 16px;
			
 
				+  border-radius: 3px;
			
 
				+  -webkit-appearance: none;
			
 
				+     -moz-appearance: none;
			
 
				+          appearance: none;
			
 
				+  background: url(./img/icondown.webp) 95% 50% no-repeat scroll transparent;
			
 
				+  background-size: 10px 10px;
			
 
				+  background-color: #fff;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #form-left {
			
 
				+  width: 28vw;
			
 
				+  margin-left: 3vw;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #form-left #rooms,
			
 
				+#contact-us #contact-form #form-left #livingroom,
			
 
				+#contact-us #contact-form #form-left #bathroom {
			
 
				+  width: 28.5%;
			
 
				+  border: 1px solid rgba(0, 0, 0, 0.3);
			
 
				+  height: 50px;
			
 
				+  margin: 15px 0;
			
 
				+  padding-right: 50px;
			
 
				+  padding: 10px 15px;
			
 
				+  font-size: 16px;
			
 
				+  border-radius: 3px;
			
 
				+  -webkit-appearance: none;
			
 
				+     -moz-appearance: none;
			
 
				+          appearance: none;
			
 
				+  background: url(./img/icondown.webp) 85% 50% no-repeat scroll transparent;
			
 
				+  background-size: 10px 10px;
			
 
				+  background-color: #fff;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #form-left #square,
			
 
				+#contact-us #contact-form #form-left #date {
			
 
				+  background: none;
			
 
				+  background-color: #fff;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #form-right {
			
 
				+  width: 29vw;
			
 
				+  margin-left: 5vw;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #form-right #facebook {
			
 
				+  margin-top: 12px;
			
 
				+  width: 29vw;
			
 
				+  height: 50px;
			
 
				+  border: 1px solid #3b5998;
			
 
				+  text-align: right;
			
 
				+  padding-right: 50px;
			
 
				+  line-height: 50px;
			
 
				+  background-color: #fff;
			
 
				+  -webkit-transition: 0.3s;
			
 
				+  transition: 0.3s;
			
 
				+  position: relative;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #form-right #facebook img {
			
 
				+  position: absolute;
			
 
				+  left: 50px;
			
 
				+  top: 7px;
			
 
				+  width: 32px;
			
 
				+  height: 32px;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #form-right #facebook:hover {
			
 
				+  background-color: #2a4f91;
			
 
				+  color: #fff;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #form-right #facebook:hover img {
			
 
				+  -webkit-filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
			
 
				+          filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #form-right a {
			
 
				+  text-decoration: none;
			
 
				+  color: #ee751b;
			
 
				+  font-weight: 900;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #form-right #checkbox {
			
 
				+  margin: 15px;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #form-right #email,
			
 
				+#contact-us #contact-form #form-right #name,
			
 
				+#contact-us #contact-form #form-right #phone {
			
 
				+  background: none;
			
 
				+  background-color: #fff;
			
 
				+}
			
 
				+
			
 
				+#contact-us .btn {
			
 
				+  margin: 50px auto;
			
 
				+  border: none;
			
 
				+  padding: 15px;
			
 
				+  background: #edbc96;
			
 
				+  color: #4b515e;
			
 
				+  font-size: 20px;
			
 
				+  width: 450px;
			
 
				+  border-radius: 10px;
			
 
				+}
			
 
				+
			
 
				+#contact-us .btn:hover {
			
 
				+  color: #fff;
			
 
				+  background-color: #745c54;
			
 
				+}
			
 
				+
			
 
				+#contact-us .form-btn {
			
 
				+  text-align: center;
			
 
				+  position: relative;
			
 
				+  width: 75vw;
			
 
				+  margin: 0 auto;
			
 
				+}
			
 
				+
			
 
				+#contact-us .form-btn #phone {
			
 
				+  position: absolute;
			
 
				+  left: 500px;
			
 
				+}
			
 
				+
			
 
				+#feedback {
			
 
				+  width: 100vw;
			
 
				+  padding-bottom: 200px;
			
 
				+}
			
 
				+
			
 
				+#feedback h1 {
			
 
				+  margin-top: 50px;
			
 
				+  margin-bottom: 50px;
			
 
				+}
			
 
				+
			
 
				+#feedback #feedback-box {
			
 
				+  width: 80vw;
			
 
				+  margin: 0 auto;
			
 
				+  display: -ms-grid;
			
 
				+  display: grid;
			
 
				+  -ms-grid-columns: (1fr)[3];
			
 
				+      grid-template-columns: repeat(3, 1fr);
			
 
				+}
			
 
				+
			
 
				+#feedback #feedback-box .box {
			
 
				+  width: 25vw;
			
 
				+  -webkit-transition: 0.5s;
			
 
				+  transition: 0.5s;
			
 
				+  text-align: center;
			
 
				+  padding-bottom: 1vw;
			
 
				+  position: relative;
			
 
				+}
			
 
				+
			
 
				+#feedback #feedback-box .box .play {
			
 
				+  position: absolute;
			
 
				+  left: 12vw !important;
			
 
				+  top: 5vw !important;
			
 
				+  width: 3vw;
			
 
				+  height: 3vw;
			
 
				+  opacity: 0.8;
			
 
				+  z-index: 10;
			
 
				+}
			
 
				+
			
 
				+#feedback #feedback-box .box img {
			
 
				+  width: 25vw;
			
 
				+  margin: 0 auto;
			
 
				+  -o-object-fit: cover;
			
 
				+     object-fit: cover;
			
 
				+  -webkit-transition: 0.5s;
			
 
				+  transition: 0.5s;
			
 
				+}
			
 
				+
			
 
				+#feedback #feedback-box .box p {
			
 
				+  text-align: center;
			
 
				+  font-size: 18px;
			
 
				+  font-weight: 600;
			
 
				+  margin: 10px;
			
 
				+}
			
 
				+
			
 
				+#footer {
			
 
				+  width: 100vw;
			
 
				+  background-color: #ebe6e2;
			
 
				+  color: #9f5000;
			
 
				+  text-align: center;
			
 
				+  font-size: 18px;
			
 
				+  line-height: 130px;
			
 
				+}
			
 
				+
			
 
				+#footer a {
			
 
				+  text-decoration: none;
			
 
				+  color: #9f5000;
			
 
				+}
			
 
				+
			
 
				+#footer p {
			
 
				+  display: inline;
			
 
				+}
			
 
				+/*# sourceMappingURL=style.css.map */
			
--- a/desktopB/style.css.map
+++ b/desktopB/style.css.map
--- a/desktopB/style.scss
+++ b/desktopB/style.scss
@@ -0,0 +1,431 @@
 
				+* {
			
 
				+    font-family: 微軟正黑體;
			
 
				+}
			
 
				+$Font-color: #fff;
			
 
				+$title-color: #4b515e;
			
 
				+$toggle: #9c857b;
			
 
				+$process: #6f645a;
			
 
				+@font-face {
			
 
				+    font-family: 追奇手寫體;
			
 
				+    src: url(./drechifont-proportional.ttf);
			
 
				+    font-weight: 900;
			
 
				+}
			
 
				+
			
 
				+$destop: 1025px;
			
 
				+
			
 
				+body {
			
 
				+    .btn {
			
 
				+        width: 96vw;
			
 
				+        margin: 0 auto;
			
 
				+        .btn-main {
			
 
				+            box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
			
 
				+            border: none;
			
 
				+            padding: 15px;
			
 
				+            background: rgb(64, 72, 84);
			
 
				+            color: $Font-color;
			
 
				+            font-size: 16px;
			
 
				+            font-weight: 600;
			
 
				+            width: 280px;
			
 
				+            border-radius: 30px;
			
 
				+            transition: 0.3s;
			
 
				+
			
 
				+            &:hover {
			
 
				+                background-color: $toggle;
			
 
				+                width: 285px;
			
 
				+                font-size: 17px;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+    .title {
			
 
				+        font-weight: bolder;
			
 
				+        font-family: "Times New Roman", Times, serif;
			
 
				+        padding: 15px;
			
 
				+        font-size: 45px;
			
 
				+        color: $title-color;
			
 
				+        padding-left: 10vw;
			
 
				+    }
			
 
				+    .arrow {
			
 
				+        position: fixed;
			
 
				+        right: 30px;
			
 
				+        bottom: 30px;
			
 
				+        width: 30px;
			
 
				+        z-index: 10;
			
 
				+    }
			
 
				+}
			
 
				+.banner {
			
 
				+    width: 100vw;
			
 
				+    position: relative;
			
 
				+
			
 
				+    #text {
			
 
				+        text-align: center;
			
 
				+
			
 
				+        .banner-slider {
			
 
				+            margin: 0 !important;
			
 
				+            padding: 0 !important;
			
 
				+            .banner1,
			
 
				+            .banner2,
			
 
				+            .banner3 {
			
 
				+                height: 100vh;
			
 
				+                background-size: cover;
			
 
				+                background-repeat: no-repeat;
			
 
				+                background-position: center;
			
 
				+                padding-right: 0 !important;
			
 
				+                position: relative;
			
 
				+                .banner-titleh1 {
			
 
				+                    padding-top: 16vw;
			
 
				+                    text-align: center;
			
 
				+                    color: #fff;
			
 
				+                    font-size: 55px;
			
 
				+                   
			
 
				+                  
			
 
				+                }
			
 
				+                .icondown {
			
 
				+                    position: absolute;
			
 
				+                    left:48vw;
			
 
				+                    top:45vw;
			
 
				+                   
			
 
				+                    
			
 
				+                }
			
 
				+                .process-box {
			
 
				+                padding-top: 5vw;
			
 
				+                    display: grid;
			
 
				+                    grid-template-columns: repeat(4, 1fr);
			
 
				+                    width: 55vw;
			
 
				+                    margin: auto;
			
 
				+                   
			
 
				+                  
			
 
				+                    .box-text {
			
 
				+                        font-family: 微軟正黑體;
			
 
				+                        text-align: center;
			
 
				+                        font-size: 18px;
			
 
				+                        font-weight: 900;
			
 
				+                        padding-right: 3vw;
			
 
				+                        color: $Font-color;
			
 
				+                    }
			
 
				+                    img {
			
 
				+                        width: 180px;
			
 
				+                        height: 180px;
			
 
				+                    }
			
 
				+                }
			
 
				+            }
			
 
				+            .banner1 {
			
 
				+                background-image: url(./img/banner/001.webp);
			
 
				+            }
			
 
				+            .banner2 {
			
 
				+                background-image: url(./img/banner/001.webp);
			
 
				+            }
			
 
				+            .banner3 {
			
 
				+                background-image: url(./img/banner/001.webp);
			
 
				+            }
			
 
				+        }
			
 
				+        h1 {
			
 
				+            padding: 15px;
			
 
				+            color: $Font-color;
			
 
				+            font-family: 追奇手寫體;
			
 
				+            font-size: 72px;
			
 
				+        }
			
 
				+        .btn-main {
			
 
				+            box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
			
 
				+            border: none;
			
 
				+            padding: 15px;
			
 
				+            background: rgb(64, 72, 84);
			
 
				+            color: $Font-color;
			
 
				+            font-size: 16px;
			
 
				+            font-weight: 600;
			
 
				+            width: 280px;
			
 
				+            border-radius: 30px;
			
 
				+            transition: 0.3s;
			
 
				+
			
 
				+            &:hover {
			
 
				+                background-color: #9c857b;
			
 
				+                width: 285px;
			
 
				+                font-size: 17px;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+    .Navigation {
			
 
				+        width: 90vw;
			
 
				+        position: absolute;
			
 
				+        margin: 0 auto;
			
 
				+        top: 5px;
			
 
				+        z-index: 5;
			
 
				+        display: grid;
			
 
				+        grid-template-columns: 2fr 4fr;
			
 
				+
			
 
				+        .logo {
			
 
				+            padding-top: 1.5vw;
			
 
				+            padding-left: 12vw;
			
 
				+            img {
			
 
				+                width: 120px;
			
 
				+            }
			
 
				+        }
			
 
				+        .link {
			
 
				+            text-align: right;
			
 
				+            padding: 30px;
			
 
				+
			
 
				+            img {
			
 
				+                width: 1.5vw;
			
 
				+                filter: invert(100%) sepia(0%) saturate(10%) hue-rotate(238deg) brightness(104%) contrast(103%);
			
 
				+                transition: 0.3s;
			
 
				+                &:hover {
			
 
				+                    filter: none;
			
 
				+                }
			
 
				+            }
			
 
				+
			
 
				+            a {
			
 
				+                display: inline-block;
			
 
				+                text-decoration: none;
			
 
				+                color: $Font-color;
			
 
				+                // padding-right: 35px;
			
 
				+                letter-spacing: 1px;
			
 
				+                font-size: 0.9rem;
			
 
				+                font-weight: 600;
			
 
				+                cursor: pointer;
			
 
				+                padding: 15px;
			
 
				+                position: relative;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+    hr {
			
 
				+        width: 85vw;
			
 
				+        position: absolute;
			
 
				+        top: 80px;
			
 
				+        left: 100px;
			
 
				+        height: 1px;
			
 
				+        z-index: 5;
			
 
				+    }
			
 
				+}
			
 
				+#contact-us {
			
 
				+    margin: 0 auto;
			
 
				+    width: 100vw;
			
 
				+
			
 
				+    background: #eee;
			
 
				+    position: relative;
			
 
				+
			
 
				+    .contact-text {
			
 
				+        margin: 0 auto;
			
 
				+        width: 68vw;
			
 
				+
			
 
				+        .text-p {
			
 
				+            font-size: 16px;
			
 
				+            font-weight: 600;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .form-title {
			
 
				+        width: 70vw;
			
 
				+        margin: 0 auto;
			
 
				+        padding-top: 100px;
			
 
				+        margin-bottom: 120px;
			
 
				+        color: #5c5248;
			
 
				+
			
 
				+        h1 {
			
 
				+            text-align: center;
			
 
				+            font-size: 32px;
			
 
				+            font-weight: 900;
			
 
				+        }
			
 
				+    }
			
 
				+    #contact-form {
			
 
				+        width: 75vw;
			
 
				+        display: grid;
			
 
				+        grid-template-columns: repeat(2, 1fr);
			
 
				+        margin-top: 10px;
			
 
				+        margin: 0 auto;
			
 
				+        position: relative;
			
 
				+        hr {
			
 
				+            position: absolute;
			
 
				+            width: 34vw;
			
 
				+            transform: rotate(90deg);
			
 
				+            left: 20vw;
			
 
				+            top: 19vw;
			
 
				+        }
			
 
				+        #location,
			
 
				+        #type,
			
 
				+        #modal,
			
 
				+        #budget,
			
 
				+        #square,
			
 
				+        #style,
			
 
				+        #date,
			
 
				+        #email,
			
 
				+        #name,
			
 
				+        #phone,
			
 
				+        #gender {
			
 
				+            width: 100%;
			
 
				+            height: 50px;
			
 
				+            margin: 10px 0;
			
 
				+            padding-left: 10px;
			
 
				+            border: 1px solid rgba(0, 0, 0, 0.3);
			
 
				+            padding: 10px 15px;
			
 
				+            font-size: 16px;
			
 
				+            border-radius: 3px;
			
 
				+            appearance: none;
			
 
				+            background: url(./img/icondown.webp) 95% 50% no-repeat scroll transparent;
			
 
				+            background-size: 10px 10px;
			
 
				+            background-color: #fff;
			
 
				+        }
			
 
				+        #form-left {
			
 
				+            width: 28vw;
			
 
				+            margin-left: 3vw;
			
 
				+
			
 
				+            #rooms,
			
 
				+            #livingroom,
			
 
				+            #bathroom {
			
 
				+                width: 28.5%;
			
 
				+                border: 1px solid rgba(0, 0, 0, 0.3);
			
 
				+                height: 50px;
			
 
				+                margin: 15px 0;
			
 
				+                padding-right: 50px;
			
 
				+                padding: 10px 15px;
			
 
				+                font-size: 16px;
			
 
				+                border-radius: 3px;
			
 
				+                appearance: none;
			
 
				+                background: url(./img/icondown.webp) 85% 50% no-repeat scroll transparent;
			
 
				+                background-size: 10px 10px;
			
 
				+                background-color: #fff;
			
 
				+            }
			
 
				+            #square,
			
 
				+            #date {
			
 
				+                background: none;
			
 
				+                background-color: #fff;
			
 
				+            }
			
 
				+        }
			
 
				+        #form-right {
			
 
				+            width: 29vw;
			
 
				+            margin-left: 5vw;
			
 
				+
			
 
				+            #facebook {
			
 
				+                margin-top: 12px;
			
 
				+                width: 29vw;
			
 
				+                height: 50px;
			
 
				+                border: 1px solid #3b5998;
			
 
				+                text-align: right;
			
 
				+                padding-right: 50px;
			
 
				+                line-height: 50px;
			
 
				+                // background: url(./img/facebook.png) 10% 50% no-repeat scroll transparent;
			
 
				+                // background-size: 32px 32px;
			
 
				+                background-color: #fff;
			
 
				+                transition: 0.3s;
			
 
				+                position: relative;
			
 
				+                img {
			
 
				+                    position: absolute;
			
 
				+                    left: 50px;
			
 
				+                    top: 7px;
			
 
				+                    width: 32px;
			
 
				+                    height: 32px;
			
 
				+                }
			
 
				+                &:hover {
			
 
				+                    background-color: #2a4f91;
			
 
				+                    color: #fff;
			
 
				+                    img {
			
 
				+                        filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%)
			
 
				+                            contrast(106%);
			
 
				+                    }
			
 
				+                }
			
 
				+            }
			
 
				+            a {
			
 
				+                text-decoration: none;
			
 
				+                color: #ee751b;
			
 
				+                font-weight: 900;
			
 
				+            }
			
 
				+            #checkbox {
			
 
				+                margin: 15px;
			
 
				+            }
			
 
				+            #email,
			
 
				+            #name,
			
 
				+            #phone {
			
 
				+                background: none;
			
 
				+                background-color: #fff;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+    .btn {
			
 
				+        margin: 50px auto;
			
 
				+        border: none;
			
 
				+        padding: 15px;
			
 
				+        background: #edbc96;
			
 
				+        color: #4b515e;
			
 
				+        font-size: 20px;
			
 
				+        width: 450px;
			
 
				+        border-radius: 10px;
			
 
				+
			
 
				+        &:hover {
			
 
				+            color: #fff;
			
 
				+            background-color: #745c54;
			
 
				+        }
			
 
				+    }
			
 
				+    .form-btn {
			
 
				+        text-align: center;
			
 
				+        position: relative;
			
 
				+        width: 75vw;
			
 
				+        margin: 0 auto;
			
 
				+        #phone {
			
 
				+            position: absolute;
			
 
				+            left: 500px;
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+#feedback {
			
 
				+    width: 100vw;
			
 
				+    padding-bottom: 200px;
			
 
				+
			
 
				+    h1 {
			
 
				+        margin-top: 50px;
			
 
				+        margin-bottom: 50px;
			
 
				+    }
			
 
				+    #feedback-box {
			
 
				+        width: 80vw;
			
 
				+        margin: 0 auto;
			
 
				+        display: grid;
			
 
				+        grid-template-columns: repeat(3, 1fr);
			
 
				+
			
 
				+        .box {
			
 
				+            width: 25vw;
			
 
				+            transition: 0.5s;
			
 
				+            text-align: center;
			
 
				+            padding-bottom: 1vw;
			
 
				+            position: relative;
			
 
				+            .play {
			
 
				+                position: absolute;
			
 
				+                left: 12vw !important;
			
 
				+                top: 5vw !important;
			
 
				+                width: 3vw;
			
 
				+                height: 3vw;
			
 
				+                opacity: 0.8;
			
 
				+                z-index: 10;
			
 
				+            }
			
 
				+            img {
			
 
				+                width: 25vw;
			
 
				+                margin: 0 auto;
			
 
				+                object-fit: cover;
			
 
				+                transition: 0.5s;
			
 
				+                // &:hover {
			
 
				+                //     width: 400px;
			
 
				+                //     height: 200px;
			
 
				+                // }
			
 
				+            }
			
 
				+            p {
			
 
				+                text-align: center;
			
 
				+                font-size: 18px;
			
 
				+                font-weight: 600;
			
 
				+                margin: 10px;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+#footer {
			
 
				+    width: 100vw;
			
 
				+    background-color: #ebe6e2;
			
 
				+    color: #9f5000;
			
 
				+    text-align: center;
			
 
				+    font-size: 18px;
			
 
				+    line-height: 130px;
			
 
				+
			
 
				+    a {
			
 
				+        text-decoration: none;
			
 
				+        color: #9f5000;
			
 
				+    }
			
 
				+    p {
			
 
				+        display: inline;
			
 
				+    }
			
 
				+}
			
--- a/index.html
+++ b/index.html
@@ -0,0 +1,29 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+<script>
			
 
				+    
			
 
				+window.onload=function(){
			
 
				+    
			
 
				+    if(screen.width>1024)
			
 
				+    {
			
 
				+        window.location.href ="./desktopB/index.html";   
			
 
				+    }
			
 
				+    else
			
 
				+    {
			
 
				+        window.location.href ="./mobileB/index.html";  
			
 
				+        
			
 
				+    }
			
 
				+}
			
 
				+    
			
 
				+</script>
			
 
				+    
			
 
				+</head>
			
 
				+<body>
			
 
				+    
			
 
				+</body>
			
 
				+</html>
			
--- a/mobileB/goto.js
+++ b/mobileB/goto.js
@@ -0,0 +1,13 @@
 
				+$(".feedback-slider1").slick({
			
 
				+    dots: true,
			
 
				+    dotsClass: 'slick-dots',
			
 
				+    speed: 1000,
			
 
				+    swipe: true,
			
 
				+  });
			
 
				+  
			
 
				+  $(".banner-slider").slick({
			
 
				+  
			
 
				+    dotsClass: 'slick-dots',
			
 
				+    speed: 1000,
			
 
				+    swipe: true,
			
 
				+  });
			
--- a/mobileB/img/banner/001.webp
+++ b/mobileB/img/banner/001.webp
--- a/mobileB/img/banner/002.webp
+++ b/mobileB/img/banner/002.webp
--- a/mobileB/img/banner/003.webp
+++ b/mobileB/img/banner/003.webp
--- a/mobileB/img/content/01.webp
+++ b/mobileB/img/content/01.webp
--- a/mobileB/img/content/02.webp
+++ b/mobileB/img/content/02.webp
--- a/mobileB/img/content/03.webp
+++ b/mobileB/img/content/03.webp
--- a/mobileB/img/feedback/feedback01.webp
+++ b/mobileB/img/feedback/feedback01.webp
--- a/mobileB/img/feedback/feedback02.webp
+++ b/mobileB/img/feedback/feedback02.webp
--- a/mobileB/img/feedback/feedback03.webp
+++ b/mobileB/img/feedback/feedback03.webp
--- a/mobileB/img/feedback/feedback04.webp
+++ b/mobileB/img/feedback/feedback04.webp
--- a/mobileB/img/feedback/feedback05.webp
+++ b/mobileB/img/feedback/feedback05.webp
--- a/mobileB/img/feedback/feedback06.webp
+++ b/mobileB/img/feedback/feedback06.webp
--- a/mobileB/img/icondown.webp
+++ b/mobileB/img/icondown.webp
--- a/mobileB/img/logo/facebook
+++ b/mobileB/img/logo/facebook
--- a/mobileB/img/logo/facebook.webp
+++ b/mobileB/img/logo/facebook.webp
--- a/mobileB/img/logo/line.webp
+++ b/mobileB/img/logo/line.webp
--- a/mobileB/img/logo/logo-main-1-1.webp
+++ b/mobileB/img/logo/logo-main-1-1.webp
--- a/mobileB/img/logo/logomain-3.webp
+++ b/mobileB/img/logo/logomain-3.webp
--- a/mobileB/img/logo/menu.webp
+++ b/mobileB/img/logo/menu.webp
--- a/mobileB/img/play
+++ b/mobileB/img/play
--- a/mobileB/img/process/box1.png
+++ b/mobileB/img/process/box1.png
--- a/mobileB/img/process/box2.png
+++ b/mobileB/img/process/box2.png
--- a/mobileB/img/process/box3.png
+++ b/mobileB/img/process/box3.png
--- a/mobileB/img/process/box4.png
+++ b/mobileB/img/process/box4.png
--- a/mobileB/img/process/icon1.webp
+++ b/mobileB/img/process/icon1.webp
--- a/mobileB/img/process/icon2.webp
+++ b/mobileB/img/process/icon2.webp
--- a/mobileB/img/service/service001.webp
+++ b/mobileB/img/service/service001.webp
--- a/mobileB/img/service/service02.webp
+++ b/mobileB/img/service/service02.webp
--- a/mobileB/index.html
+++ b/mobileB/index.html
@@ -0,0 +1,333 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <meta name="copyright" content="2021 © 幸福空間 │ All Rights Reserved.">
			
 
				+    <meta name="creation-date" content="2021-05-24 12:00:04 GTM+8">
			
 
				+    <meta name="description" content="免費預約裝修諮詢">
			
 
				+    <meta name="distribution" content="Taiwan">
			
 
				+    <meta name="keywords" content="">
			
 
				+    <meta name="revisit-after" content="1 days">
			
 
				+    <meta name="robots" content="all">
			
 
				+    <meta name="format-detection" content="telephone=no">
			
 
				+    <meta property="og:description" content="免費預約裝修諮詢" />
			
 
				+    <meta property="og:site_name" content="全室裝修" />
			
 
				+    <meta property="og:title" content="幸福空間 - 全室裝修" />
			
 
				+    <meta property="og:type" content="website" />
			
 
				+    <meta property="og:locale" content="zh_TW">
			
 
				+    <title>全室裝修</title>
			
 
				+
			
 
				+
			
 
				+
			
 
				+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
			
 
				+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
			
 
				+
			
 
				+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
			
 
				+        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
			
 
				+    <link rel="stylesheet" href="./style.css">
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <div class="container-fluid" style="padding:0;margin:0 ">
			
 
				+
			
 
				+        <section id="banner-box">
			
 
				+                <div class="logo">
			
 
				+                    <a href="https://hhh.com.tw/"><img src="./img/logo/logo-main-1-1.webp" alt=""></a>
			
 
				+                </div>
			
 
				+                <div class="menu-btn1" >
			
 
				+                    <img  style="margin-right:5vw ;" src="./img/logo/facebook (3).webp" alt="">
			
 
				+                    <img  src="./img/logo/line.webp" alt="">
			
 
				+                </div>
			
 
				+                <hr style="opacity: 1; ">
			
 
				+            <div class="container-fluid" style="padding:0;margin:0 ">
			
 
				+            <div class="banner-slider">
			
 
				+                <div class="banner1">
			
 
				+                    <div style="padding-top:20vw">
			
 
				+                        <div class="banner-titleh1" >馬上預約</div>
			
 
				+                        <div class="banner-titleh1">設計師媒合</div>
			
 
				+                        <div class="process-box">
			
 
				+                            <div class="box">
			
 
				+                                <img src="./img/process/box1.png" alt="">
			
 
				+                                <div class="box-text">填寫裝修需求表單</div>
			
 
				+                            </div>
			
 
				+                            <div class="box">
			
 
				+                                <img src="./img/process/box2.png" alt="">
			
 
				+                                <div class="box-text">專人聯繫裝修諮詢</div>
			
 
				+                                <div class="box-text">並依屋主需求</div>
			
 
				+                                <div class="box-text">推薦設計師</div>
			
 
				+                            </div>
			
 
				+                            <div class="box">
			
 
				+                                <img src="./img/process/box3.png" alt="">
			
 
				+                                <div class="box-text">設計公司會</div>
			
 
				+                                <div class="box-text"> 主動與屋主</div>
			
 
				+                            </div>
			
 
				+                            <div class="box">
			
 
				+                                <img src="./img/process/box4.png" alt="">
			
 
				+                                <div class="box-text">媒合成功</div>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+
			
 
				+                    </div>
			
 
				+
			
 
				+                </div>
			
 
				+                <div class="banner2">
			
 
				+                    <div style="padding-top:20vw">
			
 
				+                        <div class="banner-titleh1" >馬上預約</div>
			
 
				+                        <div class="banner-titleh1">設計師媒合</div>
			
 
				+                        <div class="process-box">
			
 
				+                            <div class="box">
			
 
				+                                <img src="./img/process/box1.png" alt="">
			
 
				+                                <div class="box-text">填寫裝修需求表單</div>
			
 
				+                            </div>
			
 
				+                            <div class="box">
			
 
				+                                <img src="./img/process/box2.png" alt="">
			
 
				+                                <div class="box-text">專人聯繫裝修諮詢</div>
			
 
				+                                <div class="box-text">並依屋主需求</div>
			
 
				+                                <div class="box-text">推薦設計師</div>
			
 
				+                            </div>
			
 
				+                            <div class="box">
			
 
				+                                <img src="./img/process/box3.png" alt="">
			
 
				+                                <div class="box-text">設計公司會</div>
			
 
				+                                <div class="box-text"> 主動與屋主</div>
			
 
				+                            </div>
			
 
				+                            <div class="box">
			
 
				+                                <img src="./img/process/box4.png" alt="">
			
 
				+                                <div class="box-text">媒合成功</div>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                <div class="banner3">
			
 
				+                    <div style="padding-top:20vw">
			
 
				+                        <div class="banner-titleh1" >馬上預約</div>
			
 
				+                        <div class="banner-titleh1">設計師媒合</div>
			
 
				+                        <div class="process-box">
			
 
				+                            <div class="box">
			
 
				+                                <img src="./img/process/box1.png" alt="">
			
 
				+                                <div class="box-text">填寫裝修需求表單</div>
			
 
				+                            </div>
			
 
				+                            <div class="box">
			
 
				+                                <img src="./img/process/box2.png" alt="">
			
 
				+                                <div class="box-text">專人聯繫裝修諮詢</div>
			
 
				+                                <div class="box-text">並依屋主需求</div>
			
 
				+                                <div class="box-text">推薦設計師</div>
			
 
				+                            </div>
			
 
				+                            <div class="box">
			
 
				+                                <img src="./img/process/box3.png" alt="">
			
 
				+                                <div class="box-text">設計公司會</div>
			
 
				+                                <div class="box-text"> 主動與屋主</div>
			
 
				+                            </div>
			
 
				+                            <div class="box">
			
 
				+                                <img src="./img/process/box4.png" alt="">
			
 
				+                                <div class="box-text">媒合成功</div>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+
			
 
				+
			
 
				+        </section>
			
 
				+    </div>
			
 
				+    <section id="contact-us">
			
 
				+        <div id="form-title">
			
 
				+            <h1>已經服務超過14392個生活</h1>
			
 
				+            <h1>打造夢想中的完美居家生活</h1>
			
 
				+            <h1>即刻啟動!</h1>
			
 
				+
			
 
				+        </div>
			
 
				+        <div id="form-text">
			
 
				+            <p>請撥打全台免付費專線<span style="opacity: 0;">11</span><span id="phone"
			
 
				+                    style="color:  #ee751b;">0800-336-086</span></p>
			
 
				+            <p>或填寫以下資料，專人將盡速與您聯繫。</p>
			
 
				+        </div>
			
 
				+        <form class="contact-form1">
			
 
				+            <div id="contact-form">
			
 
				+                <select name="loc" id="location" required>
			
 
				+                    <option value="地區" disabled selected="selected">地區</option>
			
 
				+                    <option class="option" value="type">基隆市</option>
			
 
				+                    <option class="option" value="type">台北市</option>
			
 
				+                    <option class="option" value="type">新北市</option>
			
 
				+                    <option class="option" value="type">桃園市</option>
			
 
				+                    <option class="option" value="type">新竹縣</option>
			
 
				+                    <option class="option" value="type">新竹市</option>
			
 
				+                    <option class="option" value="type">苗栗縣</option>
			
 
				+                    <option class="option" value="type">台中市</option>
			
 
				+                    <option class="option" value="type">彰化縣</option>
			
 
				+                    <option class="option" value="type">雲林縣</option>
			
 
				+                    <option class="option" value="type">嘉義縣</option>
			
 
				+                    <option class="option" value="type">嘉義市</option>
			
 
				+                    <option class="option" value="type">台南市</option>
			
 
				+                    <option class="option" value="type">高雄市</option>
			
 
				+                    <option class="option" value="type">屏東縣</option>
			
 
				+                    <option class="option" value="type">宜蘭縣</option>
			
 
				+                    <option class="option" value="type">花蓮縣</option>
			
 
				+                    <option class="option" value="type">台東縣</option>
			
 
				+                    <option class="option" value="type">澎湖縣</option>
			
 
				+
			
 
				+
			
 
				+                </select>
			
 
				+                <select name="h_class" id="type" required>
			
 
				+                    <option value="房屋類型" disabled selected="selected">房屋類型</option>
			
 
				+                    <option class="option" value="type">預售屋</option>
			
 
				+                    <option class="option" value="type">中古屋</option>
			
 
				+                    <option class="option" value="type">新成屋</option>
			
 
				+                    <option class="option" value="type">毛胚屋</option>
			
 
				+                    <option class="option" value="type">自地自建</option>
			
 
				+                </select>
			
 
				+                <select name="type" id="modal" required>
			
 
				+                    <option value="modal" disabled selected="selected">房屋型態</option>
			
 
				+                    <option class="option" value="type">透天</option>
			
 
				+                    <option class="option" value="type">電梯華廈</option>
			
 
				+                    <option class="option" value="type">公寓</option>
			
 
				+                    <option class="option" value="type">平房</option>
			
 
				+                    <option class="option" value="type">民宿</option>
			
 
				+                    <option class="option" value="type">商空</option>
			
 
				+                    <option class="option" value="type">其他</option>
			
 
				+                </select>
			
 
				+                <select name="budget" id="budget" required>
			
 
				+                    <option value="裝修預算" disabled selected="selected">裝修預算</option>
			
 
				+                    <option class="option" value="type">50~100萬</option>
			
 
				+                    <option class="option" value="type">100~200萬</option>
			
 
				+                    <option class="option" value="type">200~300萬</option>
			
 
				+                    <option class="option" value="type">300萬~400萬</option>
			
 
				+                    <option class="option" value="type">400~500萬</option>
			
 
				+                    <option class="option" value="type">500萬以上</option>
			
 
				+                </select>
			
 
				+                <input name="size" type="text" id="square" placeholder="請輸入坪數" required>
			
 
				+                <select name="bed_num" id="rooms" required>
			
 
				+                    <option value="幾房" disabled selected="selected">幾房</option>
			
 
				+                    <option class="option" value="1">1</option>
			
 
				+                    <option class="option" value="2">2</option>
			
 
				+                    <option class="option" value="3">3</option>
			
 
				+                    <option class="option" value="4">4</option>
			
 
				+                    <option class="option" value="5">5</option>
			
 
				+                    <option class="option" value="6">6</option>
			
 
				+                    <option class="option" value="7">7</option>
			
 
				+                    <option class="option" value="8">8</option>
			
 
				+                </select>
			
 
				+                <select name="liv_num" id="livingroom" required style="margin-right:1.5vw">
			
 
				+                    <option value="living room" disabled selected="selected">幾廳</option>
			
 
				+                    <option class="option" value="1">1</option>
			
 
				+                    <option class="option" value="2">2</option>
			
 
				+                </select>
			
 
				+                <select name="bath_num" id="bathroom" required>
			
 
				+                    <option value="bathroom" disabled selected="selected">幾衛</option>
			
 
				+                    <option class="option" value="1">1</option>
			
 
				+                    <option class="option" value="2">2</option>
			
 
				+                    <option class="option" value="3">3</option>
			
 
				+                    <option class="option" value="4">4</option>
			
 
				+                    <option class="option" value="5">5</option>
			
 
				+                    <option class="option" value="6">6</option>
			
 
				+                    <option class="option" value="7">7</option>
			
 
				+                    <option class="option" value="8">8</option>
			
 
				+                </select>
			
 
				+                <select name="style" id="style" required>
			
 
				+                    <option value="風格類型" disabled selected="selected">風格類型</option>
			
 
				+                    <option class="option" value="type">現代風</option>
			
 
				+                    <option class="option" value="type">鄉村風</option>
			
 
				+                    <option class="option" value="type">古典風</option>
			
 
				+                    <option class="option" value="type">休閒多元</option>
			
 
				+                    <option class="option" value="type">美式風</option>
			
 
				+                    <option class="option" value="type">奢華風</option>
			
 
				+                    <option class="option" value="type">新古典</option>
			
 
				+                    <option class="option" value="type">日式禪風</option>
			
 
				+                    <option class="option" value="type">東方風</option>
			
 
				+                    <option class="option" value="type">混搭風</option>
			
 
				+                    <option class="option" value="type">前衛風</option>
			
 
				+                    <option class="option" value="type">北歐風</option>
			
 
				+                    <option class="option" value="type">工業風</option>
			
 
				+                    <option class="option" value="type">異國風</option>
			
 
				+                </select>
			
 
				+                <input name="prefer_date" type="date" id="date" placeholder="預選裝修日期" required>
			
 
				+                <div id="facebook">
			
 
				+                    <img src="./img/logo/facebook.webp" alt="">
			
 
				+                    <p>使用FB填入信箱與姓名 </p>
			
 
				+                </div>
			
 
				+                <input type="text" name="email" id="email" placeholder="請輸入信箱" required>
			
 
				+                <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
			
 
				+                <input type="text" name="phone" id="phone" placeholder="請輸入電話" required>
			
 
				+                <select name="gender" id="gender">
			
 
				+                    <option value="性格" disabled selected="selected">性別</option>
			
 
				+                    <option class="option" value="type">男</option>
			
 
				+                    <option class="option" value="type">女</option>
			
 
				+                </select>
			
 
				+                <input type="checkbox" id="checkbox"> <label id="agree" for="agree">同意</label><a
			
 
				+                    href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
			
 
				+                <div class="form-btn">
			
 
				+                    <input class="btn" style="opacity: 1;" type="submit" value="送出">
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </form>
			
 
				+    </section>
			
 
				+    <section id="feedback">
			
 
				+        <h1 class="title">客戶真實見證</h1>
			
 
				+        <div class="feedback-slider1">
			
 
				+            <div class="box">
			
 
				+                <img src="./img/feedback/feedback01.webp" alt="">
			
 
				+                <p>嚮往仁文街處的溫度-文響</p>
			
 
				+                <a href="https://hhh.com.tw/video-post.php?id=2905"><img class="play" src="./img/play (1).png"
			
 
				+                        alt=""></a>
			
 
				+            </div>
			
 
				+            <div class="box">
			
 
				+                <img src="./img/feedback/feedback02.webp" alt="">
			
 
				+                <p>緞帶般曲線 譜出家的律動與甜蜜</p>
			
 
				+                <a href="https://hhh.com.tw/video-post.php?id=3782"><img class="play" src="./img/play (1).png"
			
 
				+                        alt=""></a>
			
 
				+            </div>
			
 
				+            <div class="box">
			
 
				+                <img src="./img/feedback/feedback03.webp" alt="">
			
 
				+                <p>系統設計的變革 前衛科技宅</p>
			
 
				+                <a href="https://hhh.com.tw/video-post.php?id=3549"><img class="play" src="./img/play (1).png"
			
 
				+                        alt=""></a>
			
 
				+            </div>
			
 
				+            <div class="box">
			
 
				+                <img src="./img/feedback/feedback04.webp" alt="">
			
 
				+                <p>用系統設計 實現歐洲皇室城堡夢</p>
			
 
				+                <a href="https://hhh.com.tw/video-post.php?id=2985"><img class="play" src="./img/play (1).png"
			
 
				+                        alt=""></a>
			
 
				+            </div>
			
 
				+            <div class="box">
			
 
				+                <img src="./img/feedback/feedback05.webp" alt="">
			
 
				+                <p>不良格局變身 3米6日光鄉村宅</p>
			
 
				+                <a href="https://hhh.com.tw/video-post.php?id=2122"><img class="play" src="./img/play (1).png"
			
 
				+                        alt=""></a>
			
 
				+            </div>
			
 
				+            <div class="box">
			
 
				+                <img src="./img/feedback/feedback06.webp" alt="">
			
 
				+                <p>雙拼豪宅古典、日式一次擁有</p>
			
 
				+                <a href="https://hhh.com.tw/video-post.php?id=3847"><img class="play" src="./img/play (1).png"
			
 
				+                        alt=""></a>
			
 
				+            </div>
			
 
				+
			
 
				+        </div>
			
 
				+    </section>
			
 
				+    <div id="footer">
			
 
				+        <p>幸福空間 版權所有 &copy; Gorgeous Space Co.Ltd.</p>
			
 
				+        <p>All Rights Reserved.</p>
			
 
				+        <a href="x">｜聯絡我們</a>
			
 
				+        <a href="">｜關於本站｜</a>
			
 
				+    </div>
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
			
 
				+        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
			
 
				+        crossorigin="anonymous"></script>
			
 
				+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
			
 
				+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
			
 
				+        crossorigin="anonymous"></script>
			
 
				+    <!-- jQuery CDN -->
			
 
				+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
			
 
				+    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
			
 
				+    <script src="./goto.js"></script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/mobileB/style.css
+++ b/mobileB/style.css
@@ -0,0 +1,532 @@
 
				+@charset "UTF-8";
			
 
				+* {
			
 
				+  margin: 0;
			
 
				+  padding: 0;
			
 
				+  -webkit-box-sizing: border-box;
			
 
				+          box-sizing: border-box;
			
 
				+}
			
 
				+
			
 
				+@font-face {
			
 
				+  font-family: 追奇手寫體;
			
 
				+  src: url(./drechifont-proportional.ttf);
			
 
				+  font-weight: 900;
			
 
				+}
			
 
				+
			
 
				+body .title {
			
 
				+  font-weight: 900;
			
 
				+  padding: 15px;
			
 
				+  font-family: "Times New Roman", Times, serif;
			
 
				+  color: #4b515e;
			
 
				+  text-align: center;
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 1024px) {
			
 
				+  body .title {
			
 
				+    font-size: 48px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 767px) {
			
 
				+  body .title {
			
 
				+    font-size: 34px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 400px) {
			
 
				+  body .title {
			
 
				+    font-size: 25px !important;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+body .btn {
			
 
				+  width: 100vw;
			
 
				+  text-align: center;
			
 
				+  margin-top: 20px;
			
 
				+}
			
 
				+
			
 
				+body .btn-main {
			
 
				+  -webkit-box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
			
 
				+          box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
			
 
				+  border: none;
			
 
				+  padding: 15px;
			
 
				+  background: #404854;
			
 
				+  color: #fff;
			
 
				+  font-size: 16px;
			
 
				+  letter-spacing: 1px;
			
 
				+  width: 280px;
			
 
				+  border-radius: 30px;
			
 
				+  -webkit-transition: 0.3s;
			
 
				+  transition: 0.3s;
			
 
				+  margin-top: 50px;
			
 
				+}
			
 
				+
			
 
				+body .btn-main:hover {
			
 
				+  background-color: #9c857b;
			
 
				+  width: 285px;
			
 
				+  font-size: 16px;
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 1024px) {
			
 
				+  body .btn-main {
			
 
				+    font-size: 16px;
			
 
				+    padding: 20px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+#banner-box {
			
 
				+  height: 80vh;
			
 
				+  overflow: hidden;
			
 
				+  position: relative;
			
 
				+}
			
 
				+
			
 
				+#banner-box hr {
			
 
				+  width: 100vw;
			
 
				+  position: absolute;
			
 
				+  top: 12vw;
			
 
				+  z-index: 5;
			
 
				+  height: 2px;
			
 
				+  background: #fff;
			
 
				+}
			
 
				+
			
 
				+#banner-box .logo {
			
 
				+  padding: 5px;
			
 
				+  margin-bottom: 5px;
			
 
				+  position: absolute;
			
 
				+  z-index: 5;
			
 
				+}
			
 
				+
			
 
				+#banner-box .logo img {
			
 
				+  width: 128px;
			
 
				+}
			
 
				+
			
 
				+#banner-box .menu-btn1 {
			
 
				+  padding: 10px;
			
 
				+  position: absolute;
			
 
				+  right: 5px;
			
 
				+  z-index: 5;
			
 
				+  top: 5px;
			
 
				+}
			
 
				+
			
 
				+#banner-box .menu-btn1 img {
			
 
				+  margin: 2px;
			
 
				+  width: 6vw;
			
 
				+  -webkit-filter: invert(100%) sepia(0%) saturate(10%) hue-rotate(238deg) brightness(104%) contrast(103%);
			
 
				+          filter: invert(100%) sepia(0%) saturate(10%) hue-rotate(238deg) brightness(104%) contrast(103%);
			
 
				+  -webkit-transition: 0.3s;
			
 
				+  transition: 0.3s;
			
 
				+}
			
 
				+
			
 
				+#banner-box .menu-btn1 img:hover {
			
 
				+  -webkit-filter: none;
			
 
				+          filter: none;
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 767px) {
			
 
				+  #banner-box {
			
 
				+    height: 80vh;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+#banner-box .banner-slider .slick-dots {
			
 
				+  margin-bottom: 50px;
			
 
				+}
			
 
				+
			
 
				+#banner-box .banner-slider .slick-dots ::before {
			
 
				+  color: #fff;
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 1024px) {
			
 
				+  #banner-box .banner-slider .slick-dots {
			
 
				+    font-size: 48px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+#banner-box .banner-slider .banner1,
			
 
				+#banner-box .banner-slider .banner2,
			
 
				+#banner-box .banner-slider .banner3 {
			
 
				+  width: 100vw;
			
 
				+  height: 80vh;
			
 
				+  background-repeat: no-repeat;
			
 
				+  background-size: 100vw 70vh;
			
 
				+}
			
 
				+
			
 
				+#banner-box .banner-slider .banner1 .banner-titleh1,
			
 
				+#banner-box .banner-slider .banner2 .banner-titleh1,
			
 
				+#banner-box .banner-slider .banner3 .banner-titleh1 {
			
 
				+  text-align: center;
			
 
				+  color: #fff;
			
 
				+  font-size: 25px;
			
 
				+  font-weight: 900;
			
 
				+}
			
 
				+
			
 
				+#banner-box .banner-slider .banner1 .process-box,
			
 
				+#banner-box .banner-slider .banner2 .process-box,
			
 
				+#banner-box .banner-slider .banner3 .process-box {
			
 
				+  display: -ms-grid;
			
 
				+  display: grid;
			
 
				+  -ms-grid-columns: (1fr)[2];
			
 
				+      grid-template-columns: repeat(2, 1fr);
			
 
				+  width: 70vw;
			
 
				+  margin: auto;
			
 
				+}
			
 
				+
			
 
				+#banner-box .banner-slider .banner1 .process-box .box-text,
			
 
				+#banner-box .banner-slider .banner2 .process-box .box-text,
			
 
				+#banner-box .banner-slider .banner3 .process-box .box-text {
			
 
				+  font-family: 微軟正黑體;
			
 
				+  text-align: center;
			
 
				+  font-size: 12px;
			
 
				+  font-weight: 900;
			
 
				+  color: #fff;
			
 
				+  padding-right: 5vw;
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 767px) {
			
 
				+  #banner-box .banner-slider .banner1 .process-box .box-text,
			
 
				+  #banner-box .banner-slider .banner2 .process-box .box-text,
			
 
				+  #banner-box .banner-slider .banner3 .process-box .box-text {
			
 
				+    font-size: 14px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 400px) {
			
 
				+  #banner-box .banner-slider .banner1 .process-box .box-text,
			
 
				+  #banner-box .banner-slider .banner2 .process-box .box-text,
			
 
				+  #banner-box .banner-slider .banner3 .process-box .box-text {
			
 
				+    font-size: 12px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+#banner-box .banner-slider .banner1 .process-box img,
			
 
				+#banner-box .banner-slider .banner2 .process-box img,
			
 
				+#banner-box .banner-slider .banner3 .process-box img {
			
 
				+  width: 28vw;
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 767px) {
			
 
				+  #banner-box .banner-slider .banner1,
			
 
				+  #banner-box .banner-slider .banner2,
			
 
				+  #banner-box .banner-slider .banner3 {
			
 
				+    height: 80vh;
			
 
				+    background-size: cover;
			
 
				+    background-position: center center;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 1024px) {
			
 
				+  #banner-box .banner-slider .banner1,
			
 
				+  #banner-box .banner-slider .banner2,
			
 
				+  #banner-box .banner-slider .banner3 {
			
 
				+    height: 80vh;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+#banner-box .banner-slider .banner1 {
			
 
				+  background-image: url(./img/banner/001.webp);
			
 
				+}
			
 
				+
			
 
				+#banner-box .banner-slider .banner2 {
			
 
				+  background-image: url(./img/banner/002.webp);
			
 
				+}
			
 
				+
			
 
				+#banner-box .banner-slider .banner3 {
			
 
				+  background-image: url(./img/banner/003.webp);
			
 
				+}
			
 
				+
			
 
				+#contact-us p {
			
 
				+  font-size: 16px;
			
 
				+  font-weight: 600;
			
 
				+  margin: 0px 10px;
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 1024px) {
			
 
				+  #contact-us p {
			
 
				+    font-size: 24px;
			
 
				+    text-align: center;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 767px) {
			
 
				+  #contact-us p {
			
 
				+    font-size: 16px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+#contact-us #form-title {
			
 
				+  padding-top: 100px;
			
 
				+  margin-bottom: 50px;
			
 
				+  color: #5c5248;
			
 
				+}
			
 
				+
			
 
				+#contact-us #form-text {
			
 
				+  width: 100vw;
			
 
				+  margin: 30px auto;
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 1024px) {
			
 
				+  #contact-us #form-text {
			
 
				+    font-size: 24px;
			
 
				+    text-align: center;
			
 
				+    margin: 30px auto;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 767px) {
			
 
				+  #contact-us #form-text {
			
 
				+    font-size: 16px;
			
 
				+    margin: 30px auto;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+#contact-us h1 {
			
 
				+  text-align: center;
			
 
				+  font-size: 24px;
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 1024px) {
			
 
				+  #contact-us h1 {
			
 
				+    font-size: 36px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 767px) {
			
 
				+  #contact-us h1 {
			
 
				+    font-size: 24px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form {
			
 
				+  text-align: center;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form .btn {
			
 
				+  margin: 50px auto;
			
 
				+  border: none;
			
 
				+  padding: 15px;
			
 
				+  background: #ffaf60;
			
 
				+  color: #404854;
			
 
				+  font-size: 20px;
			
 
				+  width: 300px;
			
 
				+  border-radius: 30px;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form .btn:hover {
			
 
				+  color: #fff;
			
 
				+  background-color: #745c54;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #location,
			
 
				+#contact-us #contact-form #type,
			
 
				+#contact-us #contact-form #modal,
			
 
				+#contact-us #contact-form #budget,
			
 
				+#contact-us #contact-form #square,
			
 
				+#contact-us #contact-form #style,
			
 
				+#contact-us #contact-form #date,
			
 
				+#contact-us #contact-form #email,
			
 
				+#contact-us #contact-form #name,
			
 
				+#contact-us #contact-form #phone,
			
 
				+#contact-us #contact-form #gender,
			
 
				+#contact-us #contact-form #rooms,
			
 
				+#contact-us #contact-form #livingroom,
			
 
				+#contact-us #contact-form #bathroom {
			
 
				+  border-radius: 3px;
			
 
				+  width: 85%;
			
 
				+  height: 60px;
			
 
				+  margin: 15px 0;
			
 
				+  padding-left: 15px;
			
 
				+  border: 1px solid rgba(0, 0, 0, 0.3);
			
 
				+  font-size: 18px;
			
 
				+  -webkit-appearance: none;
			
 
				+     -moz-appearance: none;
			
 
				+          appearance: none;
			
 
				+  background: url(./img/icondown.webp) 95% 50% no-repeat scroll transparent;
			
 
				+  background-size: 10px 10px;
			
 
				+  background-color: #fff;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #square,
			
 
				+#contact-us #contact-form #date,
			
 
				+#contact-us #contact-form #email,
			
 
				+#contact-us #contact-form #name,
			
 
				+#contact-us #contact-form #phone {
			
 
				+  font-size: 18px;
			
 
				+  width: 85%;
			
 
				+  background: none;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #gender {
			
 
				+  display: block;
			
 
				+  margin: 0 auto;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #facebook {
			
 
				+  margin: 15px auto;
			
 
				+  width: 85vw;
			
 
				+  height: 60px;
			
 
				+  border: 1px solid #3b5998;
			
 
				+  text-align: right;
			
 
				+  background-color: #fff;
			
 
				+  -webkit-transition: 0.3s;
			
 
				+  transition: 0.3s;
			
 
				+  position: relative;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #facebook p {
			
 
				+  position: absolute;
			
 
				+  right: 30px;
			
 
				+  font-weight: normal;
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 1024px) {
			
 
				+  #contact-us #contact-form #facebook p {
			
 
				+    top: 10px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 767px) {
			
 
				+  #contact-us #contact-form #facebook p {
			
 
				+    top: 15px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #facebook img {
			
 
				+  position: absolute;
			
 
				+  left: 30px;
			
 
				+  top: 15px;
			
 
				+  width: 32px;
			
 
				+  height: 32px;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #facebook:hover {
			
 
				+  background-color: #2a4f91;
			
 
				+  color: #fff;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #facebook:hover img {
			
 
				+  -webkit-filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
			
 
				+          filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form a {
			
 
				+  text-decoration: none;
			
 
				+  color: #ee751b;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #checkbox {
			
 
				+  margin-top: 50px;
			
 
				+  padding: 20px;
			
 
				+  width: 15px;
			
 
				+  height: 15px;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form #email,
			
 
				+#contact-us #contact-form #name,
			
 
				+#contact-us #contact-form #phone {
			
 
				+  background: none;
			
 
				+  background-color: #fff;
			
 
				+}
			
 
				+
			
 
				+#contact-us #contact-form .option {
			
 
				+  width: 85%;
			
 
				+}
			
 
				+
			
 
				+#contact-us #form {
			
 
				+  text-align: center;
			
 
				+  position: relative;
			
 
				+}
			
 
				+
			
 
				+#contact-us #form #phone {
			
 
				+  position: absolute;
			
 
				+  left: 500px;
			
 
				+}
			
 
				+
			
 
				+#feedback {
			
 
				+  margin: auto;
			
 
				+  width: 70vw;
			
 
				+  padding-bottom: 100px;
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 767px) {
			
 
				+  #feedback {
			
 
				+    width: 90vw;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+#feedback .feedback-slider1 {
			
 
				+  width: 70vw;
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 767px) {
			
 
				+  #feedback .feedback-slider1 {
			
 
				+    width: 90vw;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+#feedback h1 {
			
 
				+  margin-top: 50px;
			
 
				+}
			
 
				+
			
 
				+#feedback .box {
			
 
				+  position: relative;
			
 
				+}
			
 
				+
			
 
				+#feedback .box p {
			
 
				+  margin: 20px;
			
 
				+  text-align: center;
			
 
				+  font-size: 18px;
			
 
				+  font-weight: 600;
			
 
				+}
			
 
				+
			
 
				+#feedback .box img {
			
 
				+  width: 390px;
			
 
				+  height: 195px;
			
 
				+  -o-object-fit: cover;
			
 
				+     object-fit: cover;
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 1024px) {
			
 
				+  #feedback .box img {
			
 
				+    width: 70vw;
			
 
				+    height: 30vh;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 767px) {
			
 
				+  #feedback .box img {
			
 
				+    width: 90vw;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+#feedback .box .play {
			
 
				+  position: absolute;
			
 
				+  left: 40vw;
			
 
				+  top: 25vw;
			
 
				+  width: 15vw;
			
 
				+  height: 15vw;
			
 
				+  opacity: 0.8;
			
 
				+  z-index: 10;
			
 
				+}
			
 
				+
			
 
				+#footer {
			
 
				+  margin-top: 50px;
			
 
				+  padding-top: 50px;
			
 
				+  width: 100vw;
			
 
				+  height: 150px;
			
 
				+  background-color: #ebe6e2;
			
 
				+  color: #4b515e;
			
 
				+  text-align: center;
			
 
				+  font-size: 16px;
			
 
				+  line-height: 2;
			
 
				+  font-weight: 900;
			
 
				+}
			
 
				+
			
 
				+#footer a {
			
 
				+  text-decoration: none;
			
 
				+  color: #4b515e;
			
 
				+}
			
 
				+
			
 
				+#footer p {
			
 
				+  margin-left: 5px;
			
 
				+  display: inline;
			
 
				+}
			
 
				+/*# sourceMappingURL=style.css.map */
			
--- a/mobileB/style.css.map
+++ b/mobileB/style.css.map
--- a/mobileB/style.scss
+++ b/mobileB/style.scss
@@ -0,0 +1,419 @@
 
				+* {
			
 
				+    margin: 0;
			
 
				+    padding: 0;
			
 
				+    box-sizing: border-box;
			
 
				+}
			
 
				+$table: 1024px;
			
 
				+$moblie: 767px;
			
 
				+
			
 
				+$process: #6f645a;
			
 
				+// 行動裝置
			
 
				+@font-face {
			
 
				+    font-family: 追奇手寫體;
			
 
				+    src: url(./drechifont-proportional.ttf);
			
 
				+    font-weight: 900;
			
 
				+}
			
 
				+$Font-color: #fff;
			
 
				+$toggle: #9c857b;
			
 
				+$title-color: #4b515e;
			
 
				+body {
			
 
				+    .title {
			
 
				+        font-weight: 900;
			
 
				+        padding: 15px;
			
 
				+        font-family: "Times New Roman", Times, serif;
			
 
				+        color: $title-color;
			
 
				+        text-align: center;
			
 
				+        @media screen and(max-width:$table) {
			
 
				+            font-size: 48px;
			
 
				+        }
			
 
				+        @media screen and(max-width:$moblie) {
			
 
				+            font-size: 34px;
			
 
				+        }
			
 
				+        @media screen and(max-width:400px) {
			
 
				+            font-size: 25px !important;
			
 
				+        }
			
 
				+    }
			
 
				+    .btn {
			
 
				+        width: 100vw;
			
 
				+        text-align: center;
			
 
				+        margin-top: 20px;
			
 
				+    }
			
 
				+    .btn-main {
			
 
				+        box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
			
 
				+        border: none;
			
 
				+        padding: 15px;
			
 
				+        background: rgb(64, 72, 84);
			
 
				+        color: $Font-color;
			
 
				+        font-size: 16px;
			
 
				+        letter-spacing: 1px;
			
 
				+        width: 280px;
			
 
				+        border-radius: 30px;
			
 
				+        transition: 0.3s;
			
 
				+        margin-top: 50px;
			
 
				+        &:hover {
			
 
				+            background-color: $toggle;
			
 
				+            width: 285px;
			
 
				+            font-size: 16px;
			
 
				+        }
			
 
				+        @media screen and(max-width:$table) {
			
 
				+            font-size: 16px;
			
 
				+            padding: 20px;
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+
			
 
				+#banner-box {
			
 
				+    height: 80vh;
			
 
				+    overflow: hidden;
			
 
				+position: relative;
			
 
				+hr{
			
 
				+    width: 100vw;
			
 
				+    position: absolute;
			
 
				+    top: 12vw;
			
 
				+    z-index: 5;
			
 
				+    height: 2px;
			
 
				+    background:#fff;
			
 
				+
			
 
				+}
			
 
				+        .logo {
			
 
				+            padding: 5px;
			
 
				+            margin-bottom: 5px;
			
 
				+            position: absolute;
			
 
				+            z-index:5;
			
 
				+            img {
			
 
				+                width: 128px;
			
 
				+            }
			
 
				+        }
			
 
				+        .menu-btn1 {
			
 
				+            padding: 10px;
			
 
				+            position: absolute;
			
 
				+            right:5px;
			
 
				+            z-index:5;
			
 
				+            top:5px;
			
 
				+            img{
			
 
				+              margin: 2px;
			
 
				+                width: 6vw;
			
 
				+                filter: invert(100%) sepia(0%) saturate(10%) hue-rotate(238deg) brightness(104%) contrast(103%);
			
 
				+                transition: 0.3s;
			
 
				+                &:hover{
			
 
				+                    filter:none;
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+    @media screen and(max-width:$moblie) {
			
 
				+        height: 80vh;
			
 
				+    }
			
 
				+    .banner-slider {
			
 
				+        .slick-dots {
			
 
				+            margin-bottom: 50px;
			
 
				+            ::before {
			
 
				+                color: #fff;
			
 
				+            }
			
 
				+
			
 
				+            @media screen and(max-width:$table) {
			
 
				+                font-size: 48px;
			
 
				+            }
			
 
				+        }
			
 
				+        .banner1,
			
 
				+        .banner2,
			
 
				+        .banner3 {
			
 
				+            
			
 
				+            width: 100vw;
			
 
				+            height: 80vh;
			
 
				+            // background-size: contain;
			
 
				+            background-repeat: no-repeat;
			
 
				+            background-size: 100vw 70vh;
			
 
				+            .banner-titleh1 {
			
 
				+                text-align: center;
			
 
				+                color: #fff;
			
 
				+                font-size: 25px;
			
 
				+                font-weight: 900;
			
 
				+              
			
 
				+            }
			
 
				+            .process-box {
			
 
				+                display: grid;
			
 
				+                grid-template-columns: repeat(2, 1fr);
			
 
				+                width: 70vw;
			
 
				+                margin: auto;
			
 
				+                .box-text {
			
 
				+                    font-family: 微軟正黑體;
			
 
				+                    text-align: center;
			
 
				+                    font-size: 12px;
			
 
				+                    font-weight: 900;
			
 
				+                    color: $Font-color;
			
 
				+                    padding-right: 5vw;
			
 
				+                    @media screen and(max-width:$moblie) {
			
 
				+                        font-size: 14px;
			
 
				+                    }
			
 
				+                    @media screen and(max-width:400px) {
			
 
				+                        font-size: 12px;
			
 
				+                    }
			
 
				+                }
			
 
				+                img {
			
 
				+                    width: 28vw;
			
 
				+                }
			
 
				+            }
			
 
				+
			
 
				+            @media screen and(max-width:$moblie) {
			
 
				+                height: 80vh;
			
 
				+                background-size: cover;
			
 
				+                background-position: center center;
			
 
				+            }
			
 
				+
			
 
				+            @media screen and(max-width:$table) {
			
 
				+                height: 80vh;
			
 
				+            }
			
 
				+        }
			
 
				+        .banner1 {
			
 
				+            background-image: url(./img/banner/001.webp);
			
 
				+        }
			
 
				+        .banner2 {
			
 
				+            background-image: url(./img/banner/002.webp);
			
 
				+        }
			
 
				+        .banner3 {
			
 
				+            background-image: url(./img/banner/003.webp);
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+#contact-us {
			
 
				+    p {
			
 
				+        font-size: 16px;
			
 
				+        font-weight: 600;
			
 
				+        margin: 0px 10px;
			
 
				+
			
 
				+        @media screen and(max-width:$table) {
			
 
				+            font-size: 24px;
			
 
				+            text-align: center;
			
 
				+        }
			
 
				+        @media screen and(max-width:$moblie) {
			
 
				+            font-size: 16px;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    #form-title {
			
 
				+        padding-top: 100px;
			
 
				+        margin-bottom: 50px;
			
 
				+        color: #5c5248;
			
 
				+    }
			
 
				+    #form-text {
			
 
				+        width: 100vw;
			
 
				+        margin: 30px auto;
			
 
				+        @media screen and(max-width:$table) {
			
 
				+            font-size: 24px;
			
 
				+            text-align: center;
			
 
				+            margin: 30px auto;
			
 
				+        }
			
 
				+        @media screen and(max-width:$moblie) {
			
 
				+            font-size: 16px;
			
 
				+            margin: 30px auto;
			
 
				+        }
			
 
				+    }
			
 
				+    h1 {
			
 
				+        text-align: center;
			
 
				+        font-size: 24px;
			
 
				+        @media screen and(max-width:$table) {
			
 
				+            font-size: 36px;
			
 
				+        }
			
 
				+        @media screen and(max-width:$moblie) {
			
 
				+            font-size: 24px;
			
 
				+        }
			
 
				+    }
			
 
				+    #contact-form {
			
 
				+        text-align: center;
			
 
				+        .btn {
			
 
				+            margin: 50px auto;
			
 
				+            border: none;
			
 
				+            padding: 15px;
			
 
				+            background: #ffaf60;
			
 
				+            color: rgb(64, 72, 84);
			
 
				+            font-size: 20px;
			
 
				+            width: 300px;
			
 
				+            border-radius: 30px;
			
 
				+
			
 
				+            &:hover {
			
 
				+                color: #fff;
			
 
				+                background-color: #745c54;
			
 
				+            }
			
 
				+        }
			
 
				+        #location,
			
 
				+        #type,
			
 
				+        #modal,
			
 
				+        #budget,
			
 
				+        #square,
			
 
				+        #style,
			
 
				+        #date,
			
 
				+        #email,
			
 
				+        #name,
			
 
				+        #phone,
			
 
				+        #gender,
			
 
				+        #rooms,
			
 
				+        #livingroom,
			
 
				+        #bathroom {
			
 
				+            border-radius: 3px;
			
 
				+            width: 85%;
			
 
				+            height: 60px;
			
 
				+            margin: 15px 0;
			
 
				+            padding-left: 15px;
			
 
				+            border: 1px solid rgba(0, 0, 0, 0.3);
			
 
				+            font-size: 18px;
			
 
				+            appearance: none;
			
 
				+            background: url(./img/icondown.webp) 95% 50% no-repeat scroll transparent;
			
 
				+            background-size: 10px 10px;
			
 
				+            background-color: #fff;
			
 
				+        }
			
 
				+        #square,
			
 
				+        #date,
			
 
				+        #email,
			
 
				+        #name,
			
 
				+        #phone {
			
 
				+            font-size: 18px;
			
 
				+            width: 85%;
			
 
				+            background: none;
			
 
				+        }
			
 
				+        #gender {
			
 
				+            display: block;
			
 
				+            margin: 0 auto;
			
 
				+        }
			
 
				+        #facebook {
			
 
				+            margin: 15px auto;
			
 
				+            width: 85vw;
			
 
				+            height: 60px;
			
 
				+            border: 1px solid #3b5998;
			
 
				+            text-align: right;
			
 
				+            // background: url(./img/facebook.png) 10% 50% no-repeat scroll transparent;
			
 
				+            // background-size: 32px 32px;
			
 
				+            background-color: #fff;
			
 
				+            transition: 0.3s;
			
 
				+            position: relative;
			
 
				+            p {
			
 
				+                position: absolute;
			
 
				+                right: 30px;
			
 
				+
			
 
				+                font-weight: normal;
			
 
				+                @media screen and(max-width:$table) {
			
 
				+                    top: 10px;
			
 
				+                }
			
 
				+
			
 
				+                @media screen and(max-width:$moblie) {
			
 
				+                    top: 15px;
			
 
				+                }
			
 
				+            }
			
 
				+            img {
			
 
				+                position: absolute;
			
 
				+                left: 30px;
			
 
				+                top: 15px;
			
 
				+                width: 32px;
			
 
				+                height: 32px;
			
 
				+            }
			
 
				+            &:hover {
			
 
				+                background-color: #2a4f91;
			
 
				+                color: #fff;
			
 
				+                img {
			
 
				+                    filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+        a {
			
 
				+            text-decoration: none;
			
 
				+            color: #ee751b;
			
 
				+        }
			
 
				+        #checkbox {
			
 
				+            margin-top: 50px;
			
 
				+            padding: 20px;
			
 
				+            width: 15px;
			
 
				+            height: 15px;
			
 
				+        }
			
 
				+        #email,
			
 
				+        #name,
			
 
				+        #phone {
			
 
				+            background: none;
			
 
				+            background-color: #fff;
			
 
				+        }
			
 
				+
			
 
				+        .option {
			
 
				+            width: 85%;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    #form {
			
 
				+        text-align: center;
			
 
				+        position: relative;
			
 
				+
			
 
				+        #phone {
			
 
				+            position: absolute;
			
 
				+            left: 500px;
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+#feedback {
			
 
				+    margin: auto;
			
 
				+    width: 70vw;
			
 
				+    padding-bottom: 100px;
			
 
				+    @media screen and(max-width:$moblie) {
			
 
				+        width: 90vw;
			
 
				+    }
			
 
				+
			
 
				+    .feedback-slider1 {
			
 
				+        width: 70vw;
			
 
				+        @media screen and(max-width:$moblie) {
			
 
				+            width: 90vw;
			
 
				+        }
			
 
				+    }
			
 
				+    h1 {
			
 
				+        margin-top: 50px;
			
 
				+    }
			
 
				+    .box {
			
 
				+        position: relative;
			
 
				+        p {
			
 
				+            margin: 20px;
			
 
				+            text-align: center;
			
 
				+            font-size: 18px;
			
 
				+            font-weight: 600;
			
 
				+        }
			
 
				+
			
 
				+        img {
			
 
				+            width: 390px;
			
 
				+            height: 195px;
			
 
				+            object-fit: cover;
			
 
				+            @media screen and(max-width:$table) {
			
 
				+                width: 70vw;
			
 
				+                height: 30vh;
			
 
				+            }
			
 
				+            @media screen and(max-width:$moblie) {
			
 
				+                width: 90vw;
			
 
				+            }
			
 
				+        }
			
 
				+        .play {
			
 
				+            position: absolute;
			
 
				+            left: 40vw;
			
 
				+            top: 25vw;
			
 
				+            width: 15vw;
			
 
				+            height: 15vw;
			
 
				+            opacity: 0.8;
			
 
				+            z-index: 10;
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+#footer {
			
 
				+    margin-top: 50px;
			
 
				+    padding-top: 50px;
			
 
				+    width: 100vw;
			
 
				+    height: 150px;
			
 
				+    background-color: #ebe6e2;
			
 
				+    color: $title-color;
			
 
				+    text-align: center;
			
 
				+    font-size: 16px;
			
 
				+    line-height: 2;
			
 
				+    font-weight: 900;
			
 
				+    a {
			
 
				+        text-decoration: none;
			
 
				+        color: $title-color;
			
 
				+    }
			
 
				+    p {
			
 
				+        margin-left: 5px;
			
 
				+        display: inline;
			
 
				+    }
			
 
				+}