css fixed

layouts/room_planner/room_planner.html

@@ -276,7 +276,9 @@
                           </div>
                         </div>
                         <!-- <div class="dottedline"></div> -->
-                        <hr class="dotted">
+                        <!-- <hr class="dotted"> -->
+                        <img class="img-fluid mb-3" src="/img/room_planner/web.svg" alt="">
+
                         <div class="room-planner-process-main-content-left-step-item d-flex">
                           <div>
                             <div class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
@@ -290,7 +292,8 @@
                         </div>
                         <div class="room-planner-process-main-content-left-step-item d-flex mt-3">
                           <div>
-                            <div style="background:#F6DC63;" class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                            <div style="background:#F6DC63;"
+                              class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
                               <span style="color:#736357;" class="step-qa-q">A</span>
                             </div>
                           </div>
@@ -304,7 +307,9 @@
                                 class="f-649E2E-18">2.5~5</span> 萬/權狀坪</p>
                           </div>
                         </div>
-                        <hr class="dotted">
+                        <!-- <hr class="dotted"> -->
+                    <img class="img-fluid mb-3" src="/img/room_planner/web.svg" alt="">
+
                         <div class="room-planner-process-main-content-left-step-item d-flex">
                           <div>
                             <div class="step-number-circle me-2 mt-03">
@@ -317,7 +322,9 @@
                                 class="f-649E2E-18">《成家設計服務合約》</span>，並支付設計訂金，簽約後會正式開始你家的成家設計。</p>
                           </div>
                         </div>
-                        <hr class="dotted">
+                        <!-- <hr class="dotted"> -->
+                    <img class="img-fluid mb-3" src="/img/room_planner/web.svg" alt="">
+
                         <div class="room-planner-process-main-content-left-step-item d-flex">
                           <div>
                             <div class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
@@ -331,7 +338,8 @@
                         </div>
                         <div class="d-flex mt-3">
                           <div>
-                            <div style="background:#F6DC63;" class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                            <div style="background:#F6DC63;"
+                              class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
                               <span style="color:#736357;" class="step-qa-q">A</span>
                             </div>
                           </div>
@@ -473,7 +481,9 @@
                               確認裝修細節後，提供完整的報價單，並簽訂<span class="f-649E2E-18">《安心裝修服務合約》</span>。</p>
                           </div>
                         </div>
-                        <hr class="dotted">
+                        <!-- <hr class="dotted"> -->
+                    <img class="img-fluid mb-3" src="/img/room_planner/web.svg" alt="">
+
                         <div class="room-planner-process-main-content-left-step-item d-flex">
                           <div>
                             <div class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
@@ -487,7 +497,8 @@
                         </div>
                         <div class="d-flex mt-3">
                           <div>
-                            <div style="background:#F6DC63;" class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                            <div style="background:#F6DC63;"
+                              class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
                               <span style="color:#736357;" class="step-qa-q">A</span>
                             </div>
                           </div>
@@ -593,7 +604,9 @@
                           </div>
                         </div>
                         <!-- <div class="dottedline"></div> -->
-                        <hr class="dotted">
+                        <!-- <hr class="dotted"> -->
+                    <img class="img-fluid mb-3" src="/img/room_planner/web.svg" alt="">
+
                         <div class="room-planner-process-main-content-left-step-item d-flex">
                           <div>
                             <div class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
@@ -607,7 +620,8 @@
                         </div>
                         <div class="room-planner-process-main-content-left-step-item d-flex mt-3">
                           <div>
-                            <div style="background:#F6DC63;" class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                            <div style="background:#F6DC63;"
+                              class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
                               <span style="color:#736357;" class="step-qa-q">A</span>
                             </div>
                           </div>
@@ -619,7 +633,9 @@
                             <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">需要拆除工程與管線更新</span> 約 3-4 個月</p>
                           </div>
                         </div>
-                        <hr class="dotted">
+                        <!-- <hr class="dotted"> -->
+                    <img class="img-fluid mb-3" src="/img/room_planner/web.svg" alt="">
+
                         <div class="room-planner-process-main-content-left-step-item d-flex">
                           <div>
                             <div class="step-number-circle me-2 mt-03">
@@ -654,7 +670,12 @@
             </div>
           </div>
         </div>
-        <div class="room-planner-process-main-chenjia text-center">美好成家</div>
+        <div style="position:relative;">
+          <div class="room-planner-process-main-chenjia text-center">美好成家</div>
+          <img class="room-planner-process-main-star-yellow-m" src="/img/room_planner/yellow.png" alt="" width="20">
+          <img class="room-planner-process-main-star-green-m" src="/img/room_planner/green.png" alt="" width="20">
+          <img class="room-planner-process-main-star-line-m" src="/img/room_planner/Start3.png" alt="" width="20">
+        </div>
       </div>
     </div>
 
@@ -709,7 +730,9 @@
                       </div>
                     </div>
                     <!-- <div class="dottedline"></div> -->
-                    <hr class="dotted">
+                    <!-- <hr class="dotted"> -->
+                    <img class="img-fluid" src="/img/room_planner/web.svg" alt="">
+                
                     <div class="room-planner-process-main-content-left-step-item d-flex">
                       <div>
                         <div class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
@@ -723,7 +746,8 @@
                     </div>
                     <div class="room-planner-process-main-content-left-step-item d-flex mt-3">
                       <div>
-                        <div style="background:#F6DC63;" class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                        <div style="background:#F6DC63;"
+                          class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
                           <span style="color:#736357;" class="step-qa-q">A</span>
                         </div>
                       </div>
@@ -737,7 +761,8 @@
                             class="f-649E2E-18">2.5~5</span> 萬/權狀坪</p>
                       </div>
                     </div>
-                    <hr class="dotted">
+                    <!-- <hr class="dotted"> -->
+                    <img class="img-fluid" src="/img/room_planner/web.svg" alt="">
                     <div class="room-planner-process-main-content-left-step-item d-flex">
                       <div>
                         <div class="step-number-circle me-2 mt-03">
@@ -750,7 +775,8 @@
                             class="f-649E2E-18">《成家設計服務合約》</span>，並支付設計訂金，簽約後會正式開始你家的成家設計。</p>
                       </div>
                     </div>
-                    <hr class="dotted">
+                    <!-- <hr class="dotted"> -->
+                    <img class="img-fluid" src="/img/room_planner/web.svg" alt="">
                     <div class="room-planner-process-main-content-left-step-item d-flex">
                       <div>
                         <div class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
@@ -764,7 +790,8 @@
                     </div>
                     <div class="d-flex mt-3">
                       <div>
-                        <div style="background:#F6DC63;" class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                        <div style="background:#F6DC63;"
+                          class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
                           <span style="color:#736357;" class="step-qa-q">A</span>
                         </div>
                       </div>
@@ -801,7 +828,8 @@
                       </div>
                     </div>
                     <!-- <div class="dottedline"></div> -->
-                    <hr class="dotted">
+                    <!-- <hr class="dotted"> -->
+                    <img class="img-fluid" src="/img/room_planner/web.svg" alt="">
                     <div class="room-planner-process-main-content-left-step-item d-flex">
                       <div>
                         <div class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
@@ -815,7 +843,8 @@
                     </div>
                     <div class="room-planner-process-main-content-left-step-item d-flex mt-3">
                       <div>
-                        <div style="background:#F6DC63;" class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                        <div style="background:#F6DC63;"
+                          class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
                           <span style="color:#736357;" class="step-qa-q">A</span>
                         </div>
                       </div>
@@ -827,7 +856,8 @@
                         <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">需要拆除工程與管線更新</span> 約 3-4 個月</p>
                       </div>
                     </div>
-                    <hr class="dotted">
+                    <!-- <hr class="dotted"> -->
+                    <img class="img-fluid" src="/img/room_planner/web.svg" alt="">
                     <div class="room-planner-process-main-content-left-step-item d-flex">
                       <div>
                         <div class="step-number-circle me-2 mt-03">
@@ -1008,7 +1038,8 @@
                           確認裝修細節後，提供完整的報價單，並簽訂<span class="f-649E2E-18">《安心裝修服務合約》</span>。</p>
                       </div>
                     </div>
-                    <hr class="dotted">
+                    <!-- <hr class="dotted"> -->
+                    <img class="img-fluid" src="/img/room_planner/web.svg" alt="">
                     <div class="room-planner-process-main-content-left-step-item d-flex">
                       <div>
                         <div class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
@@ -1022,7 +1053,8 @@
                     </div>
                     <div class="d-flex mt-3">
                       <div>
-                        <div style="background:#F6DC63;" class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
+                        <div style="background:#F6DC63;"
+                          class="step-qa-circle-q me-2 d-flex justify-content-center align-items-center">
                           <span style="color:#736357;" class="step-qa-q">A</span>
                         </div>
                       </div>
@@ -1180,9 +1212,11 @@
             </div>
           </div>
           <div class="col-md-1 col-lg-2 my-1 my-md-0 divider-wrapper d-flex justify-content-center align-items-center">
-            <div class="divider"></div>
+            <!-- <div class="divider"></div> -->
+            <img class="d-md-block d-none" src="/img/room_planner/Group 302.svg" alt="" width="3">
           </div>
-          <hr class="dotted d-md-none d-block">
+          <!-- <hr class="dotted d-md-none d-block"> -->
+          <img class="img-fluid d-md-none d-block mb-3" src="/img/room_planner/web.svg" alt="">
           <div class="col-12 col-md-5 col-lg-5">
             <div class="w-80-auto">
               <div class="room-planner-service"><mark><span class="room-planner-service-no">5</span>項保固與售後服務</mark>

static/img/room_planner/Group 302.svg

@@ -0,0 +1,37 @@
+<svg width="3" height="309" viewBox="0 0 3 309" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="1.5" cy="1.5" r="1.5" transform="rotate(90 1.5 1.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="10.5" r="1.5" transform="rotate(90 1.5 10.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="19.5" r="1.5" transform="rotate(90 1.5 19.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="28.5" r="1.5" transform="rotate(90 1.5 28.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="37.5" r="1.5" transform="rotate(90 1.5 37.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="46.5" r="1.5" transform="rotate(90 1.5 46.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="55.5" r="1.5" transform="rotate(90 1.5 55.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="64.5" r="1.5" transform="rotate(90 1.5 64.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="73.5" r="1.5" transform="rotate(90 1.5 73.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="82.5" r="1.5" transform="rotate(90 1.5 82.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="91.5" r="1.5" transform="rotate(90 1.5 91.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="100.5" r="1.5" transform="rotate(90 1.5 100.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="109.5" r="1.5" transform="rotate(90 1.5 109.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="118.5" r="1.5" transform="rotate(90 1.5 118.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="127.5" r="1.5" transform="rotate(90 1.5 127.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="136.5" r="1.5" transform="rotate(90 1.5 136.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="145.5" r="1.5" transform="rotate(90 1.5 145.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="154.5" r="1.5" transform="rotate(90 1.5 154.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="163.5" r="1.5" transform="rotate(90 1.5 163.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="172.5" r="1.5" transform="rotate(90 1.5 172.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="181.5" r="1.5" transform="rotate(90 1.5 181.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="190.5" r="1.5" transform="rotate(90 1.5 190.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="199.5" r="1.5" transform="rotate(90 1.5 199.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="208.5" r="1.5" transform="rotate(90 1.5 208.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="217.5" r="1.5" transform="rotate(90 1.5 217.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="226.5" r="1.5" transform="rotate(90 1.5 226.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="235.5" r="1.5" transform="rotate(90 1.5 235.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="244.5" r="1.5" transform="rotate(90 1.5 244.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="253.5" r="1.5" transform="rotate(90 1.5 253.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="262.5" r="1.5" transform="rotate(90 1.5 262.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="271.5" r="1.5" transform="rotate(90 1.5 271.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="280.5" r="1.5" transform="rotate(90 1.5 280.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="289.5" r="1.5" transform="rotate(90 1.5 289.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="298.5" r="1.5" transform="rotate(90 1.5 298.5)" fill="#E0EE79"/>
+<circle cx="1.5" cy="307.5" r="1.5" transform="rotate(90 1.5 307.5)" fill="#E0EE79"/>
+</svg>

static/img/room_planner/web.svg

@@ -0,0 +1,49 @@
+<svg width="417" height="3" viewBox="0 0 417 3" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="1.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="10.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="19.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="28.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="37.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="46.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="55.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="64.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="73.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="82.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="91.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="100.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="109.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="118.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="127.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="136.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="145.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="154.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="163.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="172.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="181.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="190.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="199.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="208.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="217.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="226.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="235.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="244.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="253.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="325.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="262.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="334.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="271.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="343.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="280.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="352.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="289.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="361.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="298.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="370.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="307.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="379.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="397.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="316.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="388.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="406.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+<circle cx="415.5" cy="1.5" r="1.5" fill="#E0EE79"/>
+</svg>

themes/hugo-universal-theme-master/static/css/style.bhouse.css

@@ -1692,7 +1692,7 @@ input[type="search"]::-webkit-search-cancel-button {
 }
 
 .room-planner-service-no-28 {
-  font-family: NSJP-500;
+  font-family: "Quicksand", sans-serif;
   font-size: 28px;
   color: #649e2e;
 }
@@ -2156,6 +2156,11 @@ input[type="search"]::-webkit-search-cancel-button {
   height: 188px;
 }
 
+.room_planner-sales-service-box .room-planner-service-content img {
+  width: 21px;
+  height: 21px;
+}
+
 @media screen and (max-width: 767px) {
   .room_planner-sales-service-box .room-planner-service-content {
     width: 60%;
@@ -2167,11 +2172,6 @@ input[type="search"]::-webkit-search-cancel-button {
   margin-bottom: 0.9rem;
 }
 
-.room_planner-sales-service-box img {
-  width: 21px;
-  height: 21px;
-}
-
 .divider {
   width: 1px;
   height: 350px !important;
@@ -3179,6 +3179,104 @@ input[type="search"]::-webkit-search-cancel-button {
   }
 }
 
+.room-planner-process-main-star-yellow-m {
+  position: absolute;
+  right: 100px;
+  bottom: 50px;
+  -webkit-animation-name: star;
+          animation-name: star;
+  -webkit-animation-duration: 2s;
+          animation-duration: 2s;
+  -webkit-animation-delay: 0;
+          animation-delay: 0;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  animation-direction: alternate-reverse;
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
+}
+
+@media screen and (max-width: 1024px) {
+  .room-planner-process-main-star-yellow-m {
+    right: 35vw;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .room-planner-process-main-star-yellow-m {
+    right: 100px;
+    bottom: 50px;
+  }
+}
+
+.room-planner-process-main-star-green-m {
+  position: absolute;
+  bottom: -10px;
+  left: 100px;
+  -webkit-animation-name: star;
+          animation-name: star;
+  -webkit-animation-duration: 1s;
+          animation-duration: 1s;
+  -webkit-animation-delay: 0;
+          animation-delay: 0;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  -webkit-animation-direction: alternate;
+          animation-direction: alternate;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
+}
+
+@media screen and (max-width: 1024px) {
+  .room-planner-process-main-star-green-m {
+    left: 35vw;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .room-planner-process-main-star-green-m {
+    bottom: -30px;
+    left: 80px;
+  }
+}
+
+@media screen and (max-width: 375px) {
+  .room-planner-process-main-star-green-m {
+    left: 80px;
+  }
+}
+
+.room-planner-process-main-star-line-m {
+  position: absolute;
+  bottom: -30px;
+  right: 100px;
+  -webkit-animation-name: star;
+          animation-name: star;
+  -webkit-animation-duration: 1s;
+          animation-duration: 1s;
+  -webkit-animation-delay: 0;
+          animation-delay: 0;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  -webkit-animation-direction: alternate;
+          animation-direction: alternate;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
+}
+
+@media screen and (max-width: 1024px) {
+  .room-planner-process-main-star-line-m {
+    right: 35vw;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .room-planner-process-main-star-line-m {
+    bottom: -30px;
+    right: 100px;
+  }
+}
+
 /* 成家設計服務-room_planner end */
 /* 成家知識專欄-categories start */
 .w-80-auto {

themes/hugo-universal-theme-master/static/css/style.bhouse.scss

@@ -1667,7 +1667,7 @@ input[type="search"]::-webkit-search-cancel-button {
   color: #649e2e;
 }
 .room-planner-service-no-28 {
-  font-family: NSJP-500;
+  font-family: "Quicksand", sans-serif;
   font-size: 28px;
   color: #649e2e;
 }
@@ -1979,6 +1979,7 @@ input[type="search"]::-webkit-search-cancel-button {
   width: 77%;
   margin: 30px auto;
   padding: 50px 0;
+ 
   @media screen and (max-width: $table) {
     width: 95%;
   }
@@ -1989,6 +1990,10 @@ input[type="search"]::-webkit-search-cancel-button {
   .room-planner-service-content {
     margin-top: 50px;
     height: 188px;
+    img {
+      width: 21px;
+      height: 21px;
+    }
     @media screen and (max-width: 767px) {
       width: 60%;
       margin: 50px auto;
@@ -1997,10 +2002,7 @@ input[type="search"]::-webkit-search-cancel-button {
       margin-bottom: 0.9rem;
     }
   }
-  img {
-    width: 21px;
-    height: 21px;
-  }
+
 }
 
 .divider {
@@ -2850,6 +2852,70 @@ input[type="search"]::-webkit-search-cancel-button {
      transform: translate(0, -20px);
   }
 }
+.room-planner-process-main-star-yellow-m{
+  position: absolute;
+  right: 100px;
+  bottom: 50px;
+  animation-name: star;
+  animation-duration: 2s;
+  animation-delay: 0;
+  animation-iteration-count: infinite;
+  animation-direction: alternate-reverse;
+  animation-timing-function: linear;
+  @media screen and (max-width: $table) {
+    right: 35vw;
+  }
+  @media screen and (max-width: 767px) {
+    right: 100px;
+    bottom: 50px;
+  }
+
+}
+.room-planner-process-main-star-green-m{
+  position: absolute;
+  bottom: -10px;
+  left: 100px;
+  animation-name: star;
+  animation-duration: 1s;
+  animation-delay: 0;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-timing-function: ease-in-out;
+  @media screen and (max-width: $table) {
+    left: 35vw;
+  }
+  @media screen and (max-width: 767px) {
+    bottom: -30px;
+    left: 80px;
+  }
+  @media screen and (max-width: 375px) {
+    left: 80px;
+  }
+ 
+
+}
+.room-planner-process-main-star-line-m{
+  position: absolute;
+  bottom: -30px;
+  right: 100px;
+  animation-name: star;
+  animation-duration: 1s;
+  animation-delay: 0;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-timing-function: ease-in-out;
+  @media screen and (max-width: $table) {
+    right: 35vw;
+  }
+  @media screen and (max-width: 767px) {
+    bottom: -30px;
+  right: 100px;
+  }
+  @media screen and (max-width: 375px) {
+   
+  }
+ 
+}
 
 /* 成家設計服務-room_planner end */