修正

desktop11/goto.js

@@ -89,8 +89,6 @@ $(".contact-form1").submit(function (e) {
     var jsonString = JSON.stringify(formRef);*/
   var jsonInfo = $('.contact-form1').serializeObject();
   var jsonString = JSON.stringify(jsonInfo);
-  alert(jsonString);
-  console.log(jsonString);
   // email 格式檢查
   $(document).ready(function () {
 

desktop11/index.html

@@ -18,6 +18,7 @@
     <meta property="og:title" content="幸福空間 - 全室裝修" />
     <meta property="og:type" content="website" />
     <meta property="og:locale" content="zh_TW">
+    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
     <title>全室裝修</title>
 
 
@@ -207,32 +208,38 @@
                     <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>
+                        <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>
+                        <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>
+                        <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>
+                        <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>
+                        <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>
+                        <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>
@@ -326,14 +333,14 @@
                             </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>
+                                <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>
@@ -356,7 +363,7 @@
                         </div>
                         <hr>
                         <div id="form-right">
-                            <div id="facebook" onclick='callFB()' >
+                            <div id="facebook" onclick='callFB()'>
                                 <img src="./img/logo/facebook.webp" alt="">
                                 使用FB填入信箱與姓名
                             </div>
@@ -402,28 +409,28 @@
 
 
 
-<script async="" src="https://connect.facebook.net/en_US/fbevents.js"></script>
-<script>
-!function (f, b, e, v, n, t, s) {
-    if (f.fbq) return;
-    n = f.fbq = function () {
-        n.callMethod ?
-            n.callMethod.apply(n, arguments) : n.queue.push(arguments)
-    };
-    if (!f._fbq) f._fbq = n;
-    n.push = n;
-    n.loaded = !0;
-    n.version = '2.0';
-    n.queue = [];
-    t = b.createElement(e);
-    t.async = !0;
-    t.src = v;
-    s = b.getElementsByTagName(e)[0];
-    s.parentNode.insertBefore(t, s)
-}(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');
-fbq('init', '585285442299590');
-fbq('track', 'PageView');
-</script>
+    <script async="" src="https://connect.facebook.net/en_US/fbevents.js"></script>
+    <script>
+        !function (f, b, e, v, n, t, s) {
+            if (f.fbq) return;
+            n = f.fbq = function () {
+                n.callMethod ?
+                    n.callMethod.apply(n, arguments) : n.queue.push(arguments)
+            };
+            if (!f._fbq) f._fbq = n;
+            n.push = n;
+            n.loaded = !0;
+            n.version = '2.0';
+            n.queue = [];
+            t = b.createElement(e);
+            t.async = !0;
+            t.src = v;
+            s = b.getElementsByTagName(e)[0];
+            s.parentNode.insertBefore(t, s)
+        }(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');
+        fbq('init', '585285442299590');
+        fbq('track', 'PageView');
+    </script>
 
 
 

desktopB/goto.js

@@ -0,0 +1,5 @@
+$(".banner-slider").slick({
+    speed: 1000,
+    swipe: true,
+    arrows: false,
+  });

desktopB/index.html

@@ -0,0 +1,277 @@
+<!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">
+    <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="">首頁</a>
+                <a data-gt-target="#contact-us" data-gt-duration="800" data-gt-offset="-300">我有裝修需求</a>
+                <a data-gt-target="#feedback" data-gt-duration="500" data-gt-offset="0">屋主都說好</a>
+                <a data-gt-target="#service-process" data-gt-duration="500" data-gt-offset="0">服務流程</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="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>
+                        <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 class="banner2">
+                    
+                </div>
+                <div class="banner3">
+                    
+                </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>

desktopB/style.css

@@ -0,0 +1,480 @@
+@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;
+}
+
+.banner #text .banner-slider .banner1 .process-box,
+.banner #text .banner-slider .banner2 .process-box,
+.banner #text .banner-slider .banner3 .process-box {
+  padding-top: 20vw;
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: (1fr)[4];
+      grid-template-columns: repeat(4, 1fr);
+  width: 50vw;
+  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: 150px;
+  height: 150px;
+}
+
+.banner #text .banner-slider .banner1 {
+  background-image: url(./img/banner/00.webp);
+}
+
+.banner #text .banner-slider .banner2 {
+  background-image: url(./img/banner/002.webp);
+}
+
+.banner #text .banner-slider .banner3 {
+  background-image: url(./img/banner/003.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: 20px;
+  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 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 .Navigation .link a :hover {
+  opacity: 0.8;
+}
+
+.banner .Navigation .link a:after {
+  content: "";
+  display: block;
+  width: 80%;
+  height: 3px;
+  background-color: #fff;
+  position: absolute;
+  left: 12%;
+  bottom: 0;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  opacity: 0;
+}
+
+.banner .Navigation .link a:hover:after {
+  width: 80%;
+  opacity: 1;
+}
+
+.banner hr {
+  width: 85vw;
+  position: absolute;
+  top: 90px;
+  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 */

desktopB/style.scss

@@ -0,0 +1,424 @@
+* {
+    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;
+                .process-box{
+                    padding-top: 20vw;
+                    display: grid;
+                    grid-template-columns: repeat(4, 1fr);
+                    width: 50vw;
+                    margin: auto;
+                    .box-text {
+                        font-family: 微軟正黑體;
+                        text-align: center;
+                        font-size: 18px;
+                        font-weight: 900;
+                        padding-right: 3vw;
+                        color:$Font-color;
+                    }
+                    img {
+                        width: 150px;
+                        height: 150px;
+                      
+                    }
+                }
+            }
+            .banner1 {
+                background-image: url(./img/banner/00.webp);
+            }
+            .banner2 {
+                background-image: url(./img/banner/002.webp);
+            }
+            .banner3 {
+                background-image: url(./img/banner/003.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: 20px;
+        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;
+            // padding-right: 150px;
+
+            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;
+                :hover {
+                    opacity: 0.8;
+                }
+                &:after {
+                    content: "";
+                    display: block;
+                    width: 80%;
+                    height: 3px;
+                    background-color: #fff;
+                    position: absolute;
+                    left: 12%;
+                    bottom: 0;
+                    transition: all 0.3s;
+                    opacity: 0;
+                }
+                &:hover:after {
+                    width: 80%;
+                    opacity: 1;
+                }
+            }
+        }
+    }
+    hr {
+        width: 85vw;
+        position: absolute;
+        top: 90px;
+        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;
+    }
+}