行動版版面優化

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

desktop11/goto.js

@@ -2,5 +2,5 @@ $(".banner-slider").slick({
     dots:true,
     dotsClass:'slick-dots',
     speed:1000, 
-   
+    swipe:true,
   });

desktop11/index.html

@@ -16,7 +16,7 @@
     <section id="banner">
         <div class="Navigation">
             <div class="logo">
-                <img src="./img/logo-main-1-1_结果.webp" alt="">
+                <img src="./img/logo-main-1-1.webp" alt="">
             </div>
             <div class="link">
                 <a href="">首頁</a>
@@ -78,12 +78,12 @@
     <section id="service">
         <h1 class="title">我們提供的服務</h1>
         <div id="service-img">
-            <div id="img-right"><img src="./img/service/service01_结果.webp" alt=""></div>
-            <div id="img-left"><img src="./img/service/service02_结果.webp" alt=""></div>
+            <div id="img-right"><img src="./img/service/service01.webp" alt=""></div>
+            <div id="img-left"><img src="./img/service/service02.webp" alt=""></div>
         </div>
         <div id="service-text">
             <div id="text-left">
-                <img src="./img/process/icon1_结果.webp" alt="">
+                <img src="./img/process/icon1.webp" alt="">
                 <div class="icon-text">
                     <p>推薦合法立案</p>
                     <p>無裝修司法糾紛紀錄的專業設計師</p>
@@ -92,7 +92,7 @@
                 </div>
             </div>
             <div id="text-right">
-                <img src="./img/process/icon2_结果.webp" alt="">
+                <img src="./img/process/icon2.webp" alt="">
                 <div class="icon-text">
                     <p>13年經驗安心把關</p>
                     <p>不懂預算行情</p>
@@ -112,33 +112,33 @@
         <h1 class="title">最嚴謹的服務流程</h1>
         <div id="process-box">
             <div class="box">
-                <img src="./img/process/box1_结果.webp" alt="">
+                <img src="./img/process/box1.webp" alt="">
                 <p>填寫需求表單</p>
             </div>
             <div class="box">
-                <img src="./img/process/box2_结果.webp" alt="">
+                <img src="./img/process/box2.webp" alt="">
                 <p>專人聯繫</p>
                 <p>進行裝修前諮詢</p>
             </div>
             <div class="box">
-                <img src="./img/process/box3_结果.webp" alt="">
+                <img src="./img/process/box3.webp" alt="">
                 <p>依照屋主的需求</p>
                 <p>推薦合法立案的</p>
                 <p>設計公司</p>
             </div>
             <div class="box">
-                <img src="./img/process/box4_结果.webp" alt="">
+                <img src="./img/process/box4.webp" alt="">
                 <p>設計公司會</p>
                 <p>主動與屋主聯繫</p>
             </div>
             <div class="box">
-                <img src="./img/process/box5_结果.webp" alt="">
+                <img src="./img/process/box5.webp" alt="">
                 <p>選擇是否使用</p>
                 <p>幸福經紀人制度</p>
                 <p>來保障裝修權益</p>
             </div>
             <div class="box">
-                <img src="./img/process/box6_结果.webp" alt="">
+                <img src="./img/process/box6.webp" alt="">
                 <p>媒合成功</p>
             </div>
 
@@ -150,27 +150,27 @@
         <h1 class="title">客戶真實見證</h1>
         <div id="feedback-box">
             <div class="box">
-                <img src="./img/feedback-img/feedback01_结果.webp" alt="">
+                <img src="./img/feedback-img/feedback01.webp" alt="">
                 <p>嚮往仁文街處的溫度-文響</p>
             </div>
             <div class="box">
-                <img src="./img/feedback-img/feedback02_结果.webp" alt="">
+                <img src="./img/feedback-img/feedback02.webp" alt="">
                 <p>嚮往仁文街處的溫度-文響</p>
             </div>
             <div class="box">
-                <img src="./img/feedback-img/feedback03_结果.webp" alt="">
+                <img src="./img/feedback-img/feedback03.webp" alt="">
                 <p>嚮往仁文街處的溫度-文響</p>
             </div>
             <div class="box">
-                <img src="./img/feedback-img/feedback04_结果.webp" alt="">
+                <img src="./img/feedback-img/feedback04.webp" alt="">
                 <p>嚮往仁文街處的溫度-文響</p>
             </div>
             <div class="box">
-                <img src="./img/feedback-img/feedback05_结果.webp" alt="">
+                <img src="./img/feedback-img/feedback05.webp" alt="">
                 <p>嚮往仁文街處的溫度-文響</p>
             </div>
             <div class="box">
-                <img src="./img/feedback-img/feedback06_结果.webp" alt="">
+                <img src="./img/feedback-img/feedback06.webp" alt="">
                 <p>嚮往仁文街處的溫度-文響</p>
             </div>
 
@@ -219,7 +219,7 @@
 
             <div id="form-right">
                 <div id="facebook">
-                    <img src="./img/logo/facebook_结果.webp" alt="">
+                    <img src="./img/logo/facebook.webp" alt="">
                     使用FB填入信箱與姓名
                 </div>
                 <input type="text" id="email" placeholder="請輸入信箱" required>

desktop11/style.css

@@ -427,7 +427,7 @@ body .title {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background: url(./img/icondown.png) 95% 50% no-repeat scroll transparent;
+  background: url(./img/icondown.webp) 95% 50% no-repeat scroll transparent;
   background-size: 10px 10px;
   background-color: #fff;
 }
@@ -447,7 +447,7 @@ body .title {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background: url(./img/icondown.png) 85% 50% no-repeat scroll transparent;
+  background: url(./img/icondown.webp) 85% 50% no-repeat scroll transparent;
   background-size: 10px 10px;
   background-color: #fff;
 }

desktop11/style.scss

@@ -11,6 +11,7 @@ $Font-color: #fff;
     font-weight: 900;
 }
 
+
 body {
     height: 5300px;
     .btn-main {
@@ -367,7 +368,7 @@ body {
             border: 1px solid rgba(0, 0, 0, 0.3);
             font-size: 18px;
             appearance: none;
-            background: url(./img/icondown.png) 95% 50% no-repeat scroll transparent;
+            background: url(./img/icondown.webp) 95% 50% no-repeat scroll transparent;
             background-size: 10px 10px;
             background-color: #fff;
         }
@@ -382,7 +383,7 @@ body {
                 padding: 5px;
                 font-size: 18px;
                 appearance: none;
-                background: url(./img/icondown.png) 85% 50% no-repeat scroll transparent;
+                background: url(./img/icondown.webp) 85% 50% no-repeat scroll transparent;
                 background-size: 10px 10px;
                 background-color: #fff;
             }

index1.html → index.html

@@ -11,10 +11,12 @@ window.onload=function(){
     
     if(screen.width>1024)
     {
-        window.location.href = "./desktop11/index.html";   
+        alert("pc");
+        window.location.href ="./desktop11/index.html";   
     }
     else
     {
+        alert("phone");
         window.location.href ="./mobile/index.html";  
         
     }

mobile/index.html

@@ -11,24 +11,26 @@
     <!-- Slick CDN -->
     <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" />
-     <!--  可視區域 viewport  -->
-  <!--  寬度 = 裝置寬度 width=device-width  -->
-  <!--  初始寬度 = 100% initial-scale=1.0  -->
-  <!--  縮放 = 否 user-scalable=no  -->
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <!--  可視區域 viewport  -->
+    <!--  寬度 = 裝置寬度 width=device-width  -->
+    <!--  初始寬度 = 100% initial-scale=1.0  -->
+    <!--  縮放 = 否 user-scalable=no  -->
+    <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>
     <nav class="navigation">
         <div class="logo">
-            <a href=""><img src="./img/logo/logomain-3_结果.webp" alt=""></a>
+            <a href=""><img src="./img/logo/logomain-3.webp" alt=""></a>
         </div>
-        <img id="menu-btn1" src="./img/logo/menu_结果.webp" alt="">
+        <img id="menu-btn1" src="./img/logo/menu.webp" alt="">
     </nav>
 
     <div id="menu-box">
-       
+
         <div id="menu-box2">
             <div id="menu1" class="menu-text"><a href="#!">首頁</a>
                 <div class="menu-text"><a href="#!">我有裝修需求</a></div>
@@ -37,35 +39,35 @@
             </div>
             <hr>
             <div id="menu-link">
-                <div class="menu-logo"><img src="./img/process/logo1_结果.webp" alt=""></div>
-                <div class="menu-logo"><img src="./img/logo/facebook (3)_结果.webp" alt=""></div>
-                <div class="menu-logo"><img src="./img/logo/line_结果.webp" alt=""></div>
+                <div class="menu-logo"><img src="./img/process/logo1.webp" alt=""></div>
+                <div class="menu-logo"><img src="./img/logo/facebook (3).webp" alt=""></div>
+                <div class="menu-logo"><img src="./img/logo/line.webp" alt=""></div>
             </div>
 
         </div>
-      
+
     </div>
 
     <section id="banner-box">
         <div class="banner-slider">
             <div class="banner1">
-                
+
                 <h1>北歐風</h1>
             </div>
             <div class="banner2">
-               
+
                 <h1>次代風</h1>
             </div>
             <div class="banner3">
-                
+
                 <h1>美式風</h1>
             </div>
         </div>
-        
-        
+
+
     </section>
     <div class="btn">
-        <button class="btn-main">預約免費裝修諮詢</button>
+        <button class="btn-main">預約居家布置諮詢</button>
     </div>
     <section id="content1">
         <h1 class="title">你有以這些下困擾嗎</h1>
@@ -76,30 +78,84 @@
                     <h2>裝修公司眾多</h2>
                     <h2>不知道如何邀選最適合的設計師?</h2>
                 </div>
-                <img src="./img/content/01_结果.webp" alt="">
+                <img src="./img/content/01.webp" alt="">
             </div>
             <div class="text">
                 <div class="text2">
                     <h2>擔心遇到不良裝修公司</h2>
                     <h2>容易產生裝修糾紛</h2>
                 </div>
-                <img src="./img/content/02_结果.webp" alt="">
+                <img src="./img/content/02.webp" alt="">
             </div>
             <div class="text">
                 <div class="text2">
                     <h2>不了解裝修工程預算行情</h2>
                     <h2>害怕被騙嗎?</h2>
                 </div>
-                <img src="./img/content/03_结果.webp" alt="">
+                <img src="./img/content/03.webp" alt="">
             </div>
 
 
     </section>
     <section id="service">
         <h1 class="title">我們提供的服務</h1>
-        <div class="service-box">
+        <!-- <div class="service container-fluid ">
+            <div class="row  vh-25">
+                <div class="col-lg-5 col-md-4  bg-light.bg-gradient " style="background-color: #eee;">
+                    <img class="icon" src="./img/process/icon1.webp" alt="">
+                    <div>推薦合法立案</div>
+                    <div>無裝修司法糾紛紀錄的</div>
+                    <div>專業設計師</div>
+                    <div>輕鬆找到合適人選</div>
+                    <div>不再大海撈針</div>
+                </div>
+                <div class="col-lg-7 col-md-8 ">
+                    <img class="img-fluid" src="./img/service/service001.jpg" alt="">
+                </div>
+            </div>
+        </div> -->
+        <div class="container-fluid  mt-5 ">
+            <div class="row">
+                <div class="text col-6  bg-light.bg-gradient  " style="background-color: #eee;">
+                    <div class="left-box ">
+                        <img class="icon  " src="./img/process/icon2.webp" alt="">
+                        <div class="left-text">
+                            <div class="text-font  ">推薦合法立案</div>
+                            <div class="text-font">無裝修司法糾紛紀錄的</div>
+                            <div class="text-font">專業設計師</div>
+                            <div class="text-font">輕鬆找到合適人選</div>
+                            <div class="text-font">不再大海撈針</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-6" style="padding:0">
+                    <img class="img-fluid" src="./img/service/service001.jpg" alt="">
+                </div>
+            </div>
+        </div>
+        <div class="container-fluid  mt-5 ">
+            <div class="row ">
+                <div class="text col-6  bg-light.bg-gradient " style="background-color: #eee;">
+                    <div class="left-box ">
+                        <img class="icon  " src="./img/process/icon2.webp" alt="">
+                        <div class="left-text">
+                            <div class="text-font  ">推薦合法立案</div>
+                            <div class="text-font">無裝修司法糾紛紀錄的</div>
+                            <div class="text-font">專業設計師</div>
+                            <div class="text-font">輕鬆找到合適人選</div>
+                            <div class="text-font">不再大海撈針</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-6" style="padding:0">
+                    <img class="img-fluid" src="./img/service/service001.jpg" alt="">
+                </div>
+
+            </div>
+        </div>
+        <!-- <div class="service-box">
             <div class="text-left">
-                <img src="./img/process/icon1_结果.webp" alt="">
+                <img src="./img/process/icon1.webp" alt="">
                 <div class="icon-text">
                     <p>推薦合法立案</p>
                     <p>無裝修司法糾紛紀錄的</p>
@@ -109,12 +165,12 @@
                 </div>
             </div>
             <div class="text-right">
-                <img src="./img/service/service01_结果.webp" alt="">
+                <img src="./img/service/service01.webp" alt="">
             </div>
-        </div>
-        <div class="service-box">
+        </div> -->
+        <!-- <div class="service-box">
             <div class="text-left">
-                <img src="./img/process/icon2_结果.webp" alt="">
+                <img src="./img/process/icon2.webp" alt="">
                 <div class="icon-text">
                     <p>推薦合法立案</p>
                     <p>無裝修司法糾紛紀錄的</p>
@@ -124,9 +180,9 @@
                 </div>
             </div>
             <div class="text-right">
-                <img src="./img/service/service02_结果.webp" alt="">
+                <img src="./img/service/service02.webp" alt="">
             </div>
-        </div>
+        </div> -->
         <div class="btn">
             <button class="btn-main">預約免費裝修諮詢</button>
         </div>
@@ -134,48 +190,48 @@
     <section id="service-process">
         <h1 class="title">最嚴謹的服務流程</h1>
         <div class="process-box">
-            <img src="./img/process/box1_结果.webp" alt="">
+            <img src="./img/process/box1.webp" alt="">
             <div style="margin-top: 70px;" class="process-title">
                 <p>填寫需求表單</p>
-                <img src="./img/process/arrowdown_结果.webp" alt="">
+                <img src="./img/process/arrowdown.webp" alt="">
             </div>
         </div>
         <div class="process-box">
-            <img src="./img/process/box2_结果.webp" alt="">
+            <img src="./img/process/box2.webp" alt="">
             <div style="margin-top: 50px;" class="process-title">
                 <p>專人聯繫</p>
                 <p>進行裝修前諮詢</p>
-                <img src="./img/process/arrowdown_结果.webp" alt="">
+                <img src="./img/process/arrowdown.webp" alt="">
             </div>
         </div>
         <div class="process-box">
-            <img src="./img/process/box3_结果.webp" alt="">
+            <img src="./img/process/box3.webp" alt="">
             <div style="margin-top: 30px;" class="process-title">
                 <p>依照屋主的需求</p>
                 <p>推薦合法立案的</p>
                 <p>設計公司</p>
-                <img src="./img/process/arrowdown_结果.webp" alt="">
+                <img src="./img/process/arrowdown.webp" alt="">
             </div>
         </div>
         <div class="process-box">
-            <img src="./img/process/box4 _结果.webp" alt="">
+            <img src="./img/process/box4.webp" alt="">
             <div style="margin-top: 50px;" class="process-title">
                 <p>設計公司會</p>
                 <p>主動與屋主聯繫</p>
-                <img src="./img/process/arrowdown_结果.webp" alt="">
+                <img src="./img/process/arrowdown.webp" alt="">
             </div>
         </div>
         <div class="process-box">
-            <img src="./img/process/box5_结果.webp" alt="">
+            <img src="./img/process/box5.webp" alt="">
             <div style="margin-top: 30px;" class="process-title">
                 <p>選擇是否使用</p>
                 <p>幸福經紀人制度</p>
                 <p>來保障裝修權益</p>
-                <img src="./img/process/arrowdown_结果.webp" alt="">
+                <img src="./img/process/arrowdown.webp" alt="">
             </div>
         </div>
         <div class="process-box">
-            <img src="./img/process/box6_结果.webp" alt="">
+            <img src="./img/process/box6.webp" alt="">
             <div style="margin-top: 50px;" class="process-title">
                 <p>媒合成功</p>
             </div>
@@ -186,27 +242,27 @@
         <h1 class="title">客戶真實見證</h1>
         <div class="feedback-slider1">
             <div class="box">
-                <img src="./img/feedback/feedback01_结果.webp" alt="">
+                <img src="./img/feedback/feedback01.webp" alt="">
                 <p>嚮往仁文街處的溫度-文響</p>
             </div>
             <div class="box">
-                <img src="./img/feedback/feedback02_结果.webp" alt="">
+                <img src="./img/feedback/feedback02.webp" alt="">
                 <p>嚮往仁文街處的溫度-文響</p>
             </div>
             <div class="box">
-                <img src="./img/feedback/feedback03_结果.webp" alt="">
+                <img src="./img/feedback/feedback03.webp" alt="">
                 <p>嚮往仁文街處的溫度-文響</p>
             </div>
             <div class="box">
-                <img src="./img/feedback/feedback04_结果.webp" alt="">
+                <img src="./img/feedback/feedback04.webp" alt="">
                 <p>嚮往仁文街處的溫度-文響</p>
             </div>
             <div class="box">
-                <img src="./img/feedback/feedback05_结果.webp" alt="">
+                <img src="./img/feedback/feedback05.webp" alt="">
                 <p>嚮往仁文街處的溫度-文響</p>
             </div>
             <div class="box">
-                <img src="./img/feedback/feedback06_结果.webp" alt="">
+                <img src="./img/feedback/feedback06.webp" alt="">
                 <p>嚮往仁文街處的溫度-文響</p>
             </div>
 
@@ -227,32 +283,103 @@
         <div id="contact-form">
             <select name="location" id="location">
                 <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="type" id="type">
                 <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="modal" id="modal">
-                <option value="房屋型態" disabled selected="selected">房屋型態</option>
+                <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">
                 <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 type="text" id="square" placeholder="請輸入坪數" required>
             <select name="rooms" id="rooms">
                 <option value="幾房" disabled selected="selected">幾房</option>
+                <option class="option" value="type">1房</option>
+                <option class="option" value="type">2房</option>
+                <option class="option" value="type">3房</option>
+                <option class="option" value="type">4房</option>
+                <option class="option" value="type">5房</option>
+                <option class="option" value="type">6房</option>
+                <option class="option" value="type">7房</option>
+                <option class="option" value="type">8房</option>
             </select>
             <select name="living room" id="livingroom">
-                <option value="幾廳" disabled selected="selected">幾廳</option>
+                <option value="living room" disabled selected="selected">幾廳</option>
+                <option class="option" value="type">1廳</option>
+                <option class="option" value="type">2廳</option>
             </select>
             <select name="bathroom" id="bathroom">
-                <option value="地區" disabled selected="selected">幾衛</option>
+                <option value="bathroom" disabled selected="selected">幾衛</option>
+                <option class="option" value="type">1衛</option>
+                <option class="option" value="type">2衛</option>
+                <option class="option" value="type">3衛</option>
+                <option class="option" value="type">4衛</option>
+                <option class="option" value="type">5衛</option>
+                <option class="option" value="type">6衛</option>
+                <option class="option" value="type">7衛</option>
+                <option class="option" value="type">8衛</option>
             </select>
             <select name="cars" id="style">
                 <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 type="text" id="date" placeholder="預選裝修日期" required>
             <div id="facebook">
-                <img src="./img/process/facebook_结果.webp" alt="">
+                <img src="./img/process/facebook.webp" alt="">
                 <p>使用FB填入信箱與姓名 </p>
             </div>
             <input type="text" id="email" placeholder="請輸入信箱" required>
@@ -260,6 +387,8 @@
             <input type="text" id="phone" placeholder="請輸入電話" required>
             <select name="cars" 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="">免責聲明與隱私使用政策</a>
         </div>
@@ -274,6 +403,12 @@
         <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>

mobile/style.css

@@ -38,6 +38,7 @@ body .title {
 }
 
 body .btn {
+  width: 100vw;
   text-align: center;
   margin-top: 20px;
 }
@@ -50,7 +51,7 @@ body .btn-main {
   background: #404854;
   color: #fff;
   font-size: 16px;
-  font-weight: 600;
+  letter-spacing: 1px;
   width: 280px;
   border-radius: 30px;
   -webkit-transition: 0.3s;
@@ -61,12 +62,12 @@ body .btn-main {
 body .btn-main:hover {
   background-color: #927368;
   width: 285px;
-  font-size: 17px;
+  font-size: 16px;
 }
 
 @media screen and (max-width: 1024px) {
   body .btn-main {
-    font-size: 20px;
+    font-size: 16px;
     padding: 20px;
   }
 }
@@ -108,6 +109,16 @@ body .btn-main:hover {
   }
 }
 
+#banner-box .banner-slider .slick-dots {
+  margin-bottom: 50px;
+}
+
+@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 {
@@ -236,141 +247,58 @@ body .btn-main:hover {
 }
 
 #service {
-  width: 90vw;
-  margin: 0 auto;
-}
-
-#service h1 {
-  margin: 50px;
-}
-
-@media screen and (max-width: 767px) {
-  #service h1 {
-    font-size: 36px;
-  }
-}
-
-#service .service-box {
-  display: -ms-grid;
-  display: grid;
-  -ms-grid-columns: (1fr)[2];
-      grid-template-columns: repeat(2, 1fr);
-  width: 80vw;
-  height: 35vh;
-}
-
-@media screen and (max-width: 767px) {
-  #service .service-box {
-    width: 70vw;
-    height: 40vh;
-  }
+  width: 100vw;
+  text-align: center;
 }
 
-@media screen and (max-width: 1024px) {
-  #service .service-box {
-    width: 70vw;
-    margin: 15px;
-  }
+#service .img-box img {
+  padding: 0 0 !important;
 }
 
-#service .service-box .text-left {
-  height: 25vh;
-  width: 30vw;
-  background: #eee;
+#service .text {
+  font-size: 1.5rem;
+  display: inline;
   text-align: left;
 }
 
-@media screen and (max-width: 1024px) {
-  #service .service-box .text-left {
-    width: 40vw;
-    height: 32vh;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  #service .service-box .text-left {
-    text-align: left;
-    width: 50vw;
-  }
-}
-
-#service .service-box .text-left .icon-text {
-  width: 40vw;
-  margin: 15px auto;
-}
-
 @media screen and (max-width: 767px) {
-  #service .service-box .text-left .icon-text {
-    margin: 10px auto;
-    font-size: 15px;
+  #service .text {
+    font-size: 1rem;
   }
 }
 
-@media screen and (max-width: 1024px) {
-  #service .service-box .text-left .icon-text {
-    font-size: 24px;
-    margin-left: 40px;
+@media screen and (max-width: 576px) {
+  #service .text {
+    font-size: 0.8rem;
   }
 }
 
-#service .service-box .text-left .icon-text p {
-  font-family: 微軟正黑體;
-  font-weight: bolder;
-  font-size: 15px;
-  line-height: 1.5;
-  text-align: left;
-}
-
-@media screen and (max-width: 1024px) {
-  #service .service-box .text-left .icon-text p {
-    font-size: 22px;
+@media screen and (max-width: 769px) {
+  #service .text .left-box {
+    width: 45vw;
+    padding-left: 50px;
+    margin-top: 30px;
   }
 }
 
-@media screen and (max-width: 767px) {
-  #service .service-box .text-left .icon-text p {
-    font-size: 14px;
+@media screen and (max-width: 576px) {
+  #service .text .left-box {
+    padding-left: 30px;
+    margin-top: 20px;
   }
 }
 
-#service .service-box .text-left img {
-  margin-top: 30px;
-  margin-left: 50px;
-  width: 128px;
-  height: 128px;
-}
-
-@media screen and (max-width: 1024px) {
-  #service .service-box .text-left img {
-    width: 128px;
-    height: 128px;
-    margin-top: 10px;
-  }
+#service .icon {
+  width: 20vw;
 }
 
-@media screen and (max-width: 767px) {
-  #service .service-box .text-left img {
-    width: 80px;
-    height: 80px;
-  }
-}
-
-#service .service-box .text-right img {
-  -o-object-fit: cover;
-     object-fit: cover;
-}
-
-@media screen and (max-width: 1024px) {
-  #service .service-box .text-right img {
-    height: 32vh;
-    width: 40vw;
-  }
+#service h1 {
+  margin: 50px;
 }
 
 @media screen and (max-width: 767px) {
-  #service .service-box .text-right img {
-    width: 40vw;
-    height: 32vh;
+  #service h1 {
+    font-size: 34px;
   }
 }
 
@@ -622,7 +550,7 @@ body .btn-main:hover {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background: url(./img/icondown.png) 95% 50% no-repeat scroll transparent;
+  background: url(./img/icondown.webp) 95% 50% no-repeat scroll transparent;
   background-size: 10px 10px;
   background-color: #fff;
 }
@@ -634,6 +562,7 @@ body .btn-main:hover {
 #contact-us #contact-form #phone {
   font-size: 18px;
   width: 85%;
+  background: none;
 }
 
 #contact-us #contact-form #gender {
@@ -656,7 +585,6 @@ body .btn-main:hover {
 #contact-us #contact-form #facebook p {
   position: absolute;
   right: 30px;
-  top: 20px;
   font-weight: normal;
 }
 
@@ -666,6 +594,12 @@ body .btn-main:hover {
   }
 }
 
+@media screen and (max-width: 767px) {
+  #contact-us #contact-form #facebook p {
+    top: 15px;
+  }
+}
+
 #contact-us #contact-form #facebook img {
   position: absolute;
   left: 30px;
@@ -703,6 +637,10 @@ body .btn-main:hover {
   background-color: #fff;
 }
 
+#contact-us #contact-form .option {
+  width: 85%;
+}
+
 #contact-us #form {
   text-align: center;
   position: relative;

mobile/style.scss

@@ -6,6 +6,7 @@
 $table: 1024px;
 $moblie: 767px;
 
+// 行動裝置
 @font-face {
     font-family: 追奇手寫體;
     src: url(./drechifont-proportional.ttf);
@@ -14,6 +15,7 @@ $moblie: 767px;
 $Font-color: #fff;
 body {
     height: 6000px;
+
     .title {
         font-weight: bolder;
         padding: 15px;
@@ -29,6 +31,7 @@ body {
         }
     }
     .btn {
+        width: 100vw;
         text-align: center;
         margin-top: 20px;
     }
@@ -39,7 +42,7 @@ body {
         background: rgb(64, 72, 84);
         color: $Font-color;
         font-size: 16px;
-        font-weight: 600;
+        letter-spacing: 1px;
         width: 280px;
         border-radius: 30px;
         transition: 0.3s;
@@ -47,10 +50,10 @@ body {
         &:hover {
             background-color: #927368;
             width: 285px;
-            font-size: 17px;
+            font-size: 16px;
         }
         @media screen and(max-width:$table) {
-            font-size: 20px;
+            font-size: 16px;
             padding: 20px;
         }
     }
@@ -79,11 +82,18 @@ body {
 }
 #banner-box {
     height: 45vh;
-    
+
     @media screen and(max-width:$moblie) {
         height: 50vh;
     }
     .banner-slider {
+        .slick-dots {
+            margin-bottom: 50px;
+
+            @media screen and(max-width:$table) {
+                font-size: 48px;
+            }
+        }
         .banner1,
         .banner2,
         .banner3 {
@@ -108,7 +118,7 @@ body {
                 font-family: 追奇手寫體;
                 font-size: 72px;
             }
-            .img{
+            .img {
                 width: 20px;
             }
         }
@@ -121,7 +131,6 @@ body {
         .banner3 {
             background-image: url(./img/banner/003.webp);
         }
-       
     }
 }
 
@@ -175,96 +184,123 @@ body {
     }
 }
 #service {
-    width: 90vw;
-    margin: 0 auto;
-    h1 {
-        margin: 50px;
-        @media screen and(max-width:$moblie) {
-            font-size: 36px;
-        }
-    }
-    .service-box {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        width: 80vw;
-        height: 35vh;
+    width: 100vw;
+    text-align: center;
+    
+    .text {
+        font-size: 1.5rem;
+        display: inline;
+        text-align: left;
+
         @media screen and(max-width:$moblie) {
-            width: 70vw;
-            height: 40vh;
+            font-size: 1rem;
         }
-        @media screen and(max-width:$table) {
-            width: 70vw;
-            margin: 15px;
+        @media screen and(max-width: 576px) {
+            font-size: 0.8rem;
         }
-        .text-left {
-            height: 25vh;
-            width: 30vw;
-            background: #eee;
-            text-align: left;
-            @media screen and(max-width:$table) {
-                width: 40vw;
-                height: 32vh;
-            }
-            @media screen and(max-width:$moblie) {
-                text-align: left;
-                width: 50vw;
-            }
 
-            .icon-text {
-                width: 40vw;
-                margin: 15px auto;
-                @media screen and(max-width:$moblie) {
-                    margin: 10px auto;
-                    font-size: 15px;
-                }
-                @media screen and(max-width:$table) {
-                    font-size: 24px;
-                    margin-left: 40px;
-                }
-                p {
-                    font-family: 微軟正黑體;
-                    font-weight: bolder;
-                    font-size: 15px;
-                    line-height: 1.5;
-                    text-align: left;
-                    @media screen and(max-width:$table) {
-                        font-size: 22px;
-                    }
-                    @media screen and(max-width:$moblie) {
-                        font-size: 14px;
-                    }
-                }
-            }
-            img {
+        .left-box {
+            @media screen and(max-width: 769px) {
+                width: 45vw;
+                padding-left: 50px;
                 margin-top: 30px;
-                margin-left: 50px;
-                width: 128px;
-                height: 128px;
-                @media screen and(max-width:$table) {
-                    width: 128px;
-                    height: 128px;
-                    margin-top: 10px;
-                }
-                @media screen and(max-width:$moblie) {
-                    width: 80px;
-                    height: 80px;
-                }
             }
-        }
-        .text-right {
-            img {
-                object-fit: cover;
-                @media screen and(max-width:$table) {
-                    height: 32vh;
-                    width: 40vw;
-                }
-                @media screen and(max-width:$moblie) {
-                    width: 40vw;
-                    height: 32vh;
-                }
+            @media screen and(max-width: 576px) {
+                padding-left: 30px;
+                margin-top: 20px;
             }
         }
     }
+    .icon {
+        width: 20vw;
+    }
+    h1 {
+        margin: 50px;
+        @media screen and(max-width:$moblie) {
+            font-size: 34px;
+        }
+    }
+    // .service-box {
+    //     display: grid;
+    //     grid-template-columns: repeat(2, 1fr);
+    //     width: 100vw;
+    //     height: 35vh;
+    //     @media screen and(max-width:$moblie) {
+    //         width: 100vw;
+    //         height: 40vh;
+    //     }
+    //     @media screen and(max-width:$table) {
+    //         width: 100vw;
+
+    //     }
+    //     .text-left {
+    //         background: #eee;
+    //         text-align: left;
+    //         @media screen and(max-width:$table) {
+    //             width: 40vw;
+    //             height: 32vh;
+    //             padding-left: 10vw;
+
+    //         }
+    //         @media screen and(max-width:$moblie) {
+    //             text-align: left;
+    //             width: 50vw;
+    //             padding-left:-10vw;
+    //         }
+
+    //         .icon-text {
+    //             width: 60vw;
+    //             @media screen and(max-width:$moblie) {
+    //                 margin: 10px 10px;
+    //                 font-size: 15px;
+    //             }
+    //             @media screen and(max-width:$table) {
+    //                 font-size: 24px;
+    //                padding-top: 3vw;
+
+    //             }
+    //             p {
+    //                 font-family: 微軟正黑體;
+    //                 font-weight: bolder;
+    //                 font-size: 15px;
+    //                 line-height: 1.5;
+    //                 text-align: left;
+    //                 @media screen and(max-width:$table) {
+    //                     font-size: 24px;
+    //                 }
+    //                 @media screen and(max-width:$moblie) {
+    //                     font-size: 14px;
+    //                 }
+    //             }
+    //         }
+    //         img {
+
+    //             @media screen and(max-width:$table) {
+    //                 width: 150px;
+    //                 height: 150px;
+    //                 margin-top: 2vw;
+    //             }
+    //             @media screen and(max-width:$moblie) {
+    //                 width: 80px;
+    //                 height: 80px;
+    //                 margin-left: 15px;
+    //             }
+    //         }
+    //     }
+    //     .text-right {
+    //         img {
+    //             object-fit: cover;
+    //             @media screen and(max-width:$table) {
+    //                 height: 32vh;
+    //                 width: 60vw;
+    //             }
+    //             @media screen and(max-width:$moblie) {
+    //                 width: 50vw;
+    //                 height: 32vh;
+    //             }
+    //         }
+    //     }
+    // }
 }
 #service-process {
     margin: 0 auto;
@@ -440,7 +476,7 @@ body {
             border: 1px solid rgba(0, 0, 0, 0.3);
             font-size: 18px;
             appearance: none;
-            background: url(./img/icondown.png) 95% 50% no-repeat scroll transparent;
+            background: url(./img/icondown.webp) 95% 50% no-repeat scroll transparent;
             background-size: 10px 10px;
             background-color: #fff;
         }
@@ -451,6 +487,7 @@ body {
         #phone {
             font-size: 18px;
             width: 85%;
+            background: none;
         }
         #gender {
             display: block;
@@ -470,11 +507,15 @@ body {
             p {
                 position: absolute;
                 right: 30px;
-                top: 20px;
+
                 font-weight: normal;
                 @media screen and(max-width:$table) {
                     top: 10px;
                 }
+
+                @media screen and(max-width:$moblie) {
+                    top: 15px;
+                }
             }
             img {
                 position: absolute;
@@ -507,6 +548,10 @@ body {
             background: none;
             background-color: #fff;
         }
+
+        .option {
+            width: 85%;
+        }
     }
 
     #form {