修正頁面

goto.js

@@ -3,13 +3,19 @@ $(window).bind('scroll', function (e) {
 });
 function parallaxScroll() {
   var scrolled = $(window).scrollTop();
-
+  // 困擾
+  $('#circle2').css('top', (350 - (scrolled * .2)) + 'px');
+  $('#circle3').css('top', (1000- (scrolled * .2)) + 'px');
+  $('#circle1').css('top', (650 - (scrolled * .2)) + 'px');
+// 課程大綱
   $('#act1').css('top', (30 + (scrolled * .1)) + 'px');
   $('#act2').css('top', (800 - (scrolled * .2)) + 'px');
   $('#act3').css('top', (300 - (scrolled * .1)) + 'px');
   $('#act4').css('top', (0 + (scrolled * .1)) + 'px');
   $('#act5').css('top', (800 - (scrolled * .2)) + 'px');
 
+
+
 }
 // 手機課程大綱輪播
 $("#card-box").slick({

index.html

@@ -67,8 +67,10 @@
                             src="./img/mobile-logo/line.png" alt=""></a></div>
                 <div class="menu-logo col-3"><a href="https://www.facebook.com/hhhfb"><img
                             src="./img/mobile-logo/fb.png" alt=""></a></div>
-                <div class="menu-logo col-3"><a href="https://www.instagram.com/gorgeous_space/"><img src="./img/mobile-logo/ig.png" alt=""></a></div>
-                <div class="menu-logo col-3"><a href="https://www.youtube.com/user/gorgeousspace"><img src="./img/mobile-logo/youtube.png" alt=""></a></div>
+                <div class="menu-logo col-3"><a href="https://www.instagram.com/gorgeous_space/"><img
+                            src="./img/mobile-logo/ig.png" alt=""></a></div>
+                <div class="menu-logo col-3"><a href="https://www.youtube.com/user/gorgeousspace"><img
+                            src="./img/mobile-logo/youtube.png" alt=""></a></div>
             </div>
 
         </div>
@@ -118,12 +120,18 @@
 
     <section id="trouble" class="container-fluid">
         <div id="content" class="row">
-            <img id="img01" src="./img/91899837_L11.webp" class="col-12 order-2 col-md-7 order-md-2 col-lg-7 order-lg-1"
-                style="padding:5vw 0;margin: 0;" alt="">
-            <img id="circle1" src="./img/circle1.png" alt="">
-            <img id="circle2" src="./img/circle2.png" alt="">
-            <img id="circle3" src="./img/circle3.png" alt="">
+            <div id="trouble-img" class="col-12 order-2 col-md-7 order-md-2 col-lg-7 order-lg-1"
+                style="padding:0;margin: 0;">
+                <img id="img01" src="./img/91899837_L11.webp" alt="">
+                <img id="circle2" src="./img/circle2.png" alt="">
+                <img id="circle3" src="./img/circle3.png" alt="">
+                <!-- 手機圖片 -->
+                <img class="circle2" src="./img/circle2.png" alt="">
+                <img class="circle3" src="./img/circle3.png" alt="">
+                <img class="circle1" src="./img/circle1.png" alt="">
+            </div>
             <div id="trouble-text" class="col-12 order-1 col-md-5 order-md-2 col-lg-5 order-lg-2" style="margin: 0;">
+                <img id="circle1" src="./img/circle1.png" alt="">
                 <div class="text-box">
                     <p>Do You Have the following Problems</p>
                     <h1 class="title-main">你有以下困擾嗎?</h1>
@@ -136,6 +144,9 @@
             </div>
         </div>
     </section>
+
+    <!-- 格狀元素1 -->
+
     <!-- 電腦版課程大綱 -->
     <section id="Course-list" class="container-fluid" style="padding:0;margin: 0; ">
         <p>Essential Course Syllabus</p>
@@ -416,6 +427,7 @@
                 </div>
             </div>
         </div>
+        <img class="element1" src="./img/element1.png" alt="">
     </section>
     <!-- 課程彈跳視窗-手機板 -->
     <section class="mobile01-1" class="container-fluid">
@@ -495,64 +507,69 @@
             <div class="Course-mobile01">
                 <h1>社群營造，你可以學到</h1>
                 <hr class="line" style="opacity: 1;">
-                <div class="card-box-2" class="row">
+                <div class="card-box-2 row">
                     <div class="card col-6">
-                        <div class="card-title">1.當紅短影音趨勢</div>
-                        <div>現今當紅影音的</div>
-                        <div>拍攝手法分析與觀察</div>
+                        <div class="card-title">1. 市場狀況</div>
+                        <div>國人擁有社群帳號比例、</div>
+                        <div>使用社群帳號頻率</div>
+                        <div style="opacity: 0;">1111</div>
                         <div class="box-img">
-                            <img style="width: 42vw;" src="./img/course-box/box1.png" alt="">
+                            <img style="width: 45vw;" src="./img/course-box02/box1.png" alt="">
                         </div>
                         <div class="box-img2">
-                            <img src="./img/Course-list/box11.png" alt="">
+                            <img src="./img/Course-list/box12.png" alt="">
                         </div>
                     </div>
                     <div class="card col-6">
-                        <div class="card-title">1.當紅短影音趨勢</div>
-                        <div>現今當紅影音的</div>
-                        <div>拍攝手法分析與觀察</div>
+                        <div class="card-title">2. FB經營重要性</div>
+                        <div>使用人數眾多、觸及率、</div>
+                        <div>與實體結合度、帶動業績成長</div>
+                        <div style="opacity: 0;">1111</div>
                         <div class="box-img">
-                            <img src="./img/course-box/box2.png" alt="">
+                            <img src="./img/course-box02/box2.png" alt="">
                         </div>
                         <div class="box-img2">
 
-                            <img src="./img/Course-list/box11.png" alt="">
+                            <img src="./img/Course-list/box12.png" alt="">
                         </div>
                     </div>
                     <div class="card col-6">
-                        <div class="card-title">1.當紅短影音趨勢</div>
-                        <div>現今當紅影音的</div>
-                        <div>拍攝手法分析與觀察</div>
+                        <div class="card-title">3. 經營目的</div>
+                        <div>品牌經營、社群互動、</div>
+                        <div>產品推廣、客戶服務、</div>
+                        <div>虛實整合</div>
                         <div class="box-img">
-                            <img src="./img/course-box/box3.png" alt="">
+                            <img src="./img/course-box02/box3.png" alt="">
                         </div>
                         <div class="box-img2">
 
-                            <img src="./img/Course-list/box11.png" alt="">
+                            <img src="./img/Course-list/box12.png" alt="">
                         </div>
                     </div>
                     <div class="card col-6">
-                        <div class="card-title">1.當紅短影音趨勢</div>
-                        <div>現今當紅影音的</div>
-                        <div>拍攝手法分析與觀察</div>
+                        <div class="card-title">4. 經營規劃</div>
+                        <div>主題規劃、小編個性、</div>
+                        <div>ｃｕｅ表</div>
+                        <div style="opacity: 0;">1111</div>
                         <div class="box-img">
-                            <img src="./img/course-box/box4.png" alt="">
+                            <img src="./img/course-box02/box4.png" alt="">
                         </div>
                         <div class="box-img2">
 
-                            <img src="./img/Course-list/box11.png" alt="">
+                            <img src="./img/Course-list/box12.png" alt="">
                         </div>
                     </div>
                     <div class="card col-6">
-                        <div class="card-title">1.當紅短影音趨勢</div>
-                        <div>現今當紅影音的</div>
-                        <div>拍攝手法分析與觀察</div>
+                        <div class="card-title">5. 貼文範例</div>
+                        <div>品牌＆產品貼文、</div>
+                        <div>選心情＆時事貼文、</div>
+                        <div>互動貼文、活動貼文</div>
                         <div class="box-img">
-                            <img style="width: 42vw;" src="./img/course-box/box5.png" alt="">
+                            <img style="width: 42vw;" src="./img/course-box02/box5.png" alt="">
                         </div>
                         <div class="box-img2">
 
-                            <img src="./img/Course-list/box11.png" alt="">
+                            <img src="./img/Course-list/box12.png" alt="">
                         </div>
                     </div>
                 </div>
@@ -567,63 +584,42 @@
                 <h1>文案撰寫，你可以學到</h1>
                 <hr class="line" style="opacity: 1;">
                 <div class="card-box-3" class="row">
-                    <div class="card col-6">
-                        <div class="card-title">1.當紅短影音趨勢</div>
-                        <div>現今當紅影音的</div>
-                        <div>拍攝手法分析與觀察</div>
+                    <div class="card col-7">
+                        <div class="card-title">1. 掌握文字能力</div>
+                        <div style="opacity:0;font-size: 20px;" >2.</div>
+                        <div>用文案創造出</div>
+                        <div>消費者心中畫面感</div>
                         <div class="box-img">
-                            <img style="width: 42vw;" src="./img/course-box/box1.png" alt="">
+                            <img style="width: 42vw;" src="./img/course-box03/box1.png" alt="">
                         </div>
                         <div class="box-img2">
-                            <img src="./img/Course-list/box11.png" alt="">
+                            <img src="./img/Course-list/box13.png" alt="">
                         </div>
                     </div>
-                    <div class="card col-6">
-                        <div class="card-title">1.當紅短影音趨勢</div>
-                        <div>現今當紅影音的</div>
-                        <div>拍攝手法分析與觀察</div>
-                        <div class="box-img">
-                            <img src="./img/course-box/box2.png" alt="">
-                        </div>
-                        <div class="box-img2">
-
-                            <img src="./img/Course-list/box11.png" alt="">
-                        </div>
-                    </div>
-                    <div class="card col-6">
-                        <div class="card-title">1.當紅短影音趨勢</div>
-                        <div>現今當紅影音的</div>
-                        <div>拍攝手法分析與觀察</div>
-                        <div class="box-img">
-                            <img src="./img/course-box/box3.png" alt="">
-                        </div>
-                        <div class="box-img2">
-
-                            <img src="./img/Course-list/box11.png" alt="">
-                        </div>
-                    </div>
-                    <div class="card col-6">
-                        <div class="card-title">1.當紅短影音趨勢</div>
-                        <div>現今當紅影音的</div>
-                        <div>拍攝手法分析與觀察</div>
+                    <div class="card col-7">
+                        <div class="card-title">2. 營造自己的風格差異性</div>
+                        <div>從品牌屬性與定位</div>
+                        <div>找出文案切入點</div>
+                   
                         <div class="box-img">
-                            <img src="./img/course-box/box4.png" alt="">
+                            <img src="./img/course-box03/box2.png" alt="">
                         </div>
                         <div class="box-img2">
 
-                            <img src="./img/Course-list/box11.png" alt="">
+                            <img src="./img/Course-list/box13.png" alt="">
                         </div>
                     </div>
-                    <div class="card col-6">
-                        <div class="card-title">1.當紅短影音趨勢</div>
-                        <div>現今當紅影音的</div>
-                        <div>拍攝手法分析與觀察</div>
+                    <div class="card col-7">
+                        <div class="card-title">3. 抓住受眾的心</div>
+                        <div style="opacity:0;font-size: 20px;">2.</div>
+                        <div>找到自己的主要客群，</div>
+                        <div>說他們想聽的</div>
                         <div class="box-img">
-                            <img style="width: 42vw;" src="./img/course-box/box5.png" alt="">
+                            <img src="./img/course-box03/box3.png" alt="">
                         </div>
                         <div class="box-img2">
 
-                            <img src="./img/Course-list/box11.png" alt="">
+                            <img src="./img/Course-list/box13.png" alt="">
                         </div>
                     </div>
                 </div>
@@ -633,6 +629,7 @@
 
     <!-- 電腦版上課日程 -->
     <section id="course-schedule">
+        <img id="element1" src="./img/element1.png" alt="">
         <p>3 Days Class Schedule</p>
         <h1 class="title-main">3 Days 上課日程</h1>
         <hr class="line" style="opacity: 1;">
@@ -642,7 +639,6 @@
                 <div class="schedule-box col-md-4">
                     <h1>Day1上午</h1>
                     <div class="content-box">
-
                         <div>手機拍片(一)</div>
                     </div>
                 </div>
@@ -683,6 +679,7 @@
                 </div>
             </div>
         </div>
+        <img id="element2" src="./img/element2.png" alt="">
     </section>
     <!-- 手機板上課日程 -->
     <section id="mobile02" class="sec05 container-fluid" style="padding:0;margin: 0; ">
@@ -738,6 +735,7 @@
                 </div>
             </div>
         </div>
+        <img class="element2" src="./img/element2.png" alt="">
     </section>
     <!-- 電腦版收款資訊 -->
     <section id="information">
@@ -768,7 +766,8 @@
                         <option class="option">非室內設計師</option>
                         <option class="option">其他</option>
                     </select>
-                    <input type="text" id="phone" name="phone" placeholder="連絡電話(必填, 詳答)" pattern="09\d{2}\d{6}" required>
+                    <input type="text" id="phone" name="phone" placeholder="連絡電話(必填, 詳答)" pattern="09\d{2}\d{6}"
+                        required>
                     <input type="email" id="email" name="email" placeholder="聯絡email(必填, 詳答)" required>
                     <input type="text" id="pay" name="cert_last5" placeholder="已匯款, 後五碼是(選填, 詳答)">
                     <textarea name="where_learn" id="message" cols="50" rows="3"

style.css

@@ -26,6 +26,12 @@ body p {
   color: #adadad;
 }
 
+@media screen and (max-width: 767px) {
+  body p {
+    font-size: 0.5rem;
+  }
+}
+
 body .title-main {
   font-family: "Noto Sans TC", sans-serif;
   font-weight: 600;
@@ -353,8 +359,8 @@ body .arrow {
 #trouble {
   padding-top: 10vw;
   background: #f4fffc;
-  padding-bottom: 10vw !important;
-  position: relative;
+  padding-bottom: 5vw !important;
+  overflow: hidden;
 }
 
 @media screen and (max-width: 767px) {
@@ -369,46 +375,124 @@ body .arrow {
   }
 }
 
-#trouble #circle1 {
-  position: absolute;
-  width: 20vw;
-  top: 35vw;
-  right: 3vw;
+#trouble #trouble-img {
+  position: relative;
   z-index: 1;
 }
 
-#trouble #circle2 {
+#trouble #trouble-img #circle2 {
   position: absolute;
-  top: 10vw;
+  top: 15vw;
   left: 45vw;
   width: 18vw;
   z-index: 0;
 }
 
-#trouble #circle3 {
+@media screen and (max-width: 767px) {
+  #trouble #trouble-img #circle2 {
+    display: none;
+  }
+}
+
+#trouble #trouble-img #circle3 {
   position: absolute;
-  top: 52vw;
+  top: 55vw;
   width: 25vw;
   left: 10vw;
   z-index: 2;
 }
 
+@media screen and (max-width: 767px) {
+  #trouble #trouble-img #circle3 {
+    display: none;
+  }
+}
+
+#trouble #trouble-img .circle2 {
+  position: absolute;
+  width: 30vw;
+  top: 5vw;
+  right: 5vw;
+  z-index: 0;
+}
+
+@media screen and (min-width: 1025px) {
+  #trouble #trouble-img .circle2 {
+    display: none;
+  }
+}
+
+#trouble #trouble-img .circle1 {
+  position: absolute;
+  width: 30vw;
+  right: -15vw;
+  top: 85vw;
+}
+
+@media screen and (min-width: 1025px) {
+  #trouble #trouble-img .circle1 {
+    display: none;
+  }
+}
+
+#trouble #trouble-img .circle3 {
+  position: absolute;
+  width: 40vw;
+  top: 85vw;
+  left: 5vw;
+  z-index: 2;
+}
+
+@media screen and (min-width: 1025px) {
+  #trouble #trouble-img .circle3 {
+    display: none;
+  }
+}
+
 #trouble #img01 {
-  padding: 10vw 10vw;
   -o-object-fit: cover;
      object-fit: cover;
   position: relative;
   z-index: 1;
+  width: 60vw;
+  padding: 10vw 0px;
+}
+
+@media screen and (max-width: 1024px) {
+  #trouble #img01 {
+    width: 60vw;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #trouble #img01 {
+    width: 95vw;
+  }
 }
 
 #trouble #trouble-text {
   padding-top: 20vw;
   position: relative;
-  z-index: 1;
+}
+
+#trouble #trouble-text #circle1 {
+  position: absolute;
+  width: 18vw;
+  top: 35vw;
+  right: 5vw;
+  z-index: 0;
+}
+
+@media screen and (max-width: 767px) {
+  #trouble #trouble-text #circle1 {
+    display: none;
+  }
 }
 
 #trouble #trouble-text .text-box {
+  position: relative;
   margin-left: 5vw;
+  z-index: 1;
 }
 
 #trouble #trouble-text .text-box h1 {
@@ -747,9 +831,24 @@ body .arrow {
 .sec04 {
   text-align: center;
   padding-top: 4.5rem;
-  padding-bottom: 8rem !important;
+  padding-bottom: 10rem !important;
   color: #646464;
   overflow: hidden;
+  position: relative;
+}
+
+.sec04 .element1 {
+  position: absolute;
+  top: 150vw;
+  width: 70vw;
+  right: -30vw;
+  z-index: 1;
+}
+
+@media screen and (max-width: 350px) {
+  .sec04 .element1 {
+    top: 180vw;
+  }
 }
 
 .sec04 #card-box {
@@ -762,6 +861,8 @@ body .arrow {
 .sec04 #card-box .card {
   text-align: center;
   margin: 0px 10px;
+  position: relative;
+  z-index: 2;
 }
 
 .sec04 #card-box .card .card-title {
@@ -803,6 +904,13 @@ body .arrow {
   }
 }
 
+@media screen and (max-width: 400px) {
+  .sec04 .name {
+    padding-bottom: 2rem;
+    font-size: 3rem;
+  }
+}
+
 .mobile01-1,
 .mobile01-2,
 .mobile01-3 {
@@ -812,7 +920,7 @@ body .arrow {
   position: fixed;
   top: 0vw;
   z-index: 10;
-  padding: 15vw 5vw 21vw 5vw;
+  padding: 15vw 5vw 21vw 1vw;
   overflow: hidden;
   margin: 0 !important;
   display: none;
@@ -871,6 +979,20 @@ body .arrow {
   color: #414346;
 }
 
+@media screen and (max-width: 400px) {
+  .mobile01-1 .mobile-box1 .Course-mobile01 h1,
+  .mobile01-1 .mobile-box2 .Course-mobile01 h1,
+  .mobile01-1 .mobile-box3 .Course-mobile01 h1,
+  .mobile01-2 .mobile-box1 .Course-mobile01 h1,
+  .mobile01-2 .mobile-box2 .Course-mobile01 h1,
+  .mobile01-2 .mobile-box3 .Course-mobile01 h1,
+  .mobile01-3 .mobile-box1 .Course-mobile01 h1,
+  .mobile01-3 .mobile-box2 .Course-mobile01 h1,
+  .mobile01-3 .mobile-box3 .Course-mobile01 h1 {
+    font-size: 2rem;
+  }
+}
+
 .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-1,
 .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-2,
 .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-3,
@@ -1090,6 +1212,15 @@ body .arrow {
   width: 40vw;
 }
 
+.mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 {
+  padding: 1vw 15px 5vw 15px;
+}
+
+.mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card {
+  margin: 0px 5px;
+  font-size: 0.8rem;
+}
+
 #course-schedule {
   background: #f4fffc;
   text-align: center;
@@ -1097,6 +1228,21 @@ body .arrow {
   position: relative;
 }
 
+#course-schedule #element1 {
+  position: absolute;
+  top: 0vw;
+  width: 25vw;
+  right: -10vw;
+}
+
+#course-schedule #element2 {
+  position: absolute;
+  width: 25vw;
+  left: -10vw;
+  top: 50vw;
+  z-index: 5;
+}
+
 @media screen and (max-width: 767px) {
   #course-schedule {
     display: none;
@@ -1174,6 +1320,21 @@ body .arrow {
   color: #646464;
   padding-bottom: 8rem !important;
   overflow: hidden;
+  position: relative;
+}
+
+.sec05 .element2 {
+  position: absolute;
+  width: 70vw;
+  left: -30vw;
+  top: 140vw;
+  z-index: 3;
+}
+
+@media screen and (max-width: 350px) {
+  .sec05 .element2 {
+    top: 152vw;
+  }
 }
 
 @media screen and (min-width: 1025px) {

style.scss

@@ -27,8 +27,13 @@ body {
     background: $bgcolor;
     position: relative;
     z-index: -2;
+
     p {
         color: #adadad;
+
+        @media screen and(max-width:$moblie) {
+            font-size: 0.5rem;
+        }
     }
     .title-main {
         font-family: "Noto Sans TC", sans-serif;
@@ -63,6 +68,8 @@ body {
             height: 20vw;
         }
     }
+
+    // 元素
 }
 #Navigation {
     background: $navbgcolor;
@@ -282,51 +289,99 @@ body {
 #trouble {
     padding-top: 10vw;
     background: $bgcolor;
-    padding-bottom: 10vw !important;
-    position: relative;
+    padding-bottom: 5vw !important;
+    overflow: hidden;
     @media screen and(max-width:$moblie) {
         padding-top: 30vw;
     }
     @media screen and(min-height:800px) {
         padding-top: 0vw;
     }
-    #circle1{
-        position: absolute;
-        width: 20vw;
-        top:35vw;
-        right:3vw;
-        z-index:1;
-    }
-    #circle2{
-        position: absolute;
-        top:10vw;
-        left:45vw;
-        width:18vw;
-        z-index: 0;
-    }
-    #circle3{
-        position: absolute;
-        top:52vw;
-        width: 25vw;
-        left:10vw;
-        z-index: 2;
+    #trouble-img {
+        position: relative;
+        z-index: 1;
+        #circle2 {
+            position: absolute;
+            top: 15vw;
+            left: 45vw;
+            width: 18vw;
+            z-index: 0;
+            @media screen and(max-width:$moblie) {
+                display: none;
+            }
+        }
+        #circle3 {
+            position: absolute;
+            top: 55vw;
+            width: 25vw;
+            left: 10vw;
+            z-index: 2;
+            @media screen and(max-width:$moblie) {
+                display: none;
+            }
+        }
+
+        .circle2 {
+            position: absolute;
+            width: 30vw;
+            top: 5vw;
+            right: 5vw;
+            z-index: 0;
+            @media screen and(min-width:$desktop) {
+                display: none;
+            }
+        }
+        .circle1 {
+            position: absolute;
+            width: 30vw;
+            right: -15vw;
+            top: 85vw;
+            @media screen and(min-width:$desktop) {
+                display: none;
+            }
+        }
+        .circle3 {
+            position: absolute;
+            width: 40vw;
+            top: 85vw;
+            left: 5vw;
+            z-index: 2;
+            @media screen and(min-width:$desktop) {
+                display: none;
+            }
+        }
     }
 
-    #img01{
-        padding: 10vw 10vw;
+    #img01 {
         object-fit: cover;
         position: relative;
-        z-index:1;
+        z-index: 1;
+        width: 60vw;
+        padding: 10vw 0px;
         @media screen and(max-width:$table) {
-            // width: 60vw;
+            width: 60vw;
+        }
+        @media screen and(max-width:$moblie) {
+            width: 95vw;
         }
     }
     #trouble-text {
         padding-top: 20vw;
         position: relative;
-        z-index:1;
+        #circle1 {
+            position: absolute;
+            width: 18vw;
+            top: 35vw;
+            right: 5vw;
+            z-index: 0;
+            @media screen and(max-width:$moblie) {
+                display: none;
+            }
+        }
         .text-box {
+            position: relative;
             margin-left: 5vw;
+            z-index: 1;
             h1 {
                 padding-bottom: 3vw !important;
                 @media screen and(max-width:$moblie) {
@@ -490,7 +545,7 @@ body {
     padding: 50px 50px 100px 50px;
     position: fixed;
     top: 0vw;
-display: none;
+    display: none;
     .close {
         position: absolute;
         right: 3vw;
@@ -558,9 +613,22 @@ display: none;
 .sec04 {
     text-align: center;
     padding-top: 4.5rem;
-    padding-bottom: 8rem !important;
+    padding-bottom: 10rem !important;
     color: $title-color;
     overflow: hidden;
+    position: relative;
+
+    .element1 {
+        position: absolute;
+        top: 150vw;
+        width: 70vw;
+        right: -30vw;
+        z-index: 1;
+        @media screen and(max-width:350px) {
+            top: 180vw;
+        }
+    }
+
     #card-box {
         background-image: url(./img/Course-list/bg.png);
         background-size: cover;
@@ -569,6 +637,8 @@ display: none;
         .card {
             text-align: center;
             margin: 0px 10px;
+            position: relative;
+            z-index: 2;
             .card-title {
                 padding-top: 2rem;
                 color: $title-color;
@@ -598,6 +668,12 @@ display: none;
             font-size: 4rem;
         }
     }
+    @media screen and(max-width:400px) {
+        .name {
+            padding-bottom: 2rem;
+            font-size: 3rem;
+        }
+    }
 }
 // 課程大綱彈跳視窗手機板
 .mobile01-1,
@@ -609,7 +685,7 @@ display: none;
     position: fixed;
     top: 0vw;
     z-index: 10;
-    padding: 15vw 5vw 21vw 5vw;
+    padding: 15vw 5vw 21vw 1vw;
     overflow: hidden;
     margin: 0 !important;
     display: none;
@@ -636,6 +712,9 @@ display: none;
                 font-family: 追奇手寫體;
                 font-size: 2.5rem;
                 color: #414346;
+                @media screen and(max-width:400px) {
+                    font-size: 2rem;
+                }
             }
 
             .card-box-1,
@@ -678,12 +757,40 @@ display: none;
         }
     }
 }
+.mobile01-2 {
+    .mobile-box2 {
+        .Course-mobile01 {
+         
+            .card-box-2 {
+                padding: 1vw 15px 5vw 15px;
+                .card {
+                    margin: 0px 5px;
+                    font-size: 0.8rem;
+                }
+            }
+        }
+    }
+}
 // 電腦版上課日程
 #course-schedule {
     background: $bgcolor;
     text-align: center;
     padding-bottom: 12vw !important;
     position: relative;
+
+    #element1 {
+        position: absolute;
+        top: 0vw;
+        width: 25vw;
+        right: -10vw;
+    }
+    #element2 {
+        position: absolute;
+        width: 25vw;
+        left: -10vw;
+        top: 50vw;
+        z-index: 5;
+    }
     @media screen and(max-width:$moblie) {
         display: none;
     }
@@ -747,6 +854,18 @@ display: none;
     color: $title-color;
     padding-bottom: 8rem !important;
     overflow: hidden;
+    position: relative;
+    .element2 {
+        position: absolute;
+        width: 70vw;
+        left: -30vw;
+        top: 140vw;
+        z-index: 3;
+        @media screen and(max-width:350px) {
+            top: 152vw;
+        }
+    }
+
     @media screen and(min-width:$desktop) {
         display: none;
     }
@@ -1072,13 +1191,12 @@ display: none;
         width: 85vw;
         @media screen and(max-width:$moblie) {
             width: 100vw;
-         }
+        }
         @media screen and(max-width:400px) {
             width: 100vw;
         }
         ul {
             padding-left: 0 !important;
-           
         }
     }
 }
@@ -1094,7 +1212,7 @@ li {
     list-style-type: none;
     text-transform: uppercase;
     padding-left: 0 !important;
-position: relative;
+    position: relative;
     #days,
     #hours,
     #minutes,
@@ -1115,7 +1233,7 @@ position: relative;
         position: absolute;
         text-align: center;
         top: 4.5vw;
-       
+
         display: block;
         font-size: 1rem;
         color: #000;
@@ -1137,10 +1255,10 @@ position: relative;
             font-size: 12px;
         }
     }
-    #unit0{
-        right:5vw;
+    #unit0 {
+        right: 5vw;
         @media screen and(max-width:$moblie) {
-            right:9vw;
+            right: 9vw;
         }
     }
 }