頁面修復

goto.js

@@ -22,13 +22,46 @@
 
 // }
 // 手機課程大綱輪播
-$("#card-box").slick({
-  arrows: false,
-  slidesToShow: 1,
-  centerMode: true,
-  infinite: false,
-  dots: true,
-});
+$(function () {
+  $('#card-box').slick({
+    arrows: false,
+    slidesToShow: 3,
+    slidesToScroll: 3,
+    infinite: true,
+    centerMode: true,
+    dots: true,
+    responsive: [
+      , {
+        breakpoint: 768,
+        settings: {
+          arrows: false,
+          slidesToShow: 3,
+          slidesToScroll: 3,
+          centerMode: true,
+          infinite: true,
+          dots: true,
+        }
+      },
+      , {
+        breakpoint: 767,// RWD在600寬度時切換顯示數量
+        settings: {
+          arrows: false,
+          slidesToShow: 1,
+          centerMode: true,
+          infinite: false,
+          dots: true,
+        }
+      },
+    ]
+  });
+})
+// $("#card-box").slick({
+//   arrows: false,
+//   slidesToShow: 1,
+//   centerMode: true,
+//   infinite: false,
+//   dots: true,
+// });
 
 // 手機課程大綱彈跳視窗
 // 視窗一
@@ -425,7 +458,7 @@ $(".close").click(function () {
 
       var day1 = Math.floor(a);
       var result4 = day1 < 10 ? '0' + day1 : day1;
-      
+
       document.getElementById("days").innerText = result4,
         document.getElementById("hours").innerText = result,
         document.getElementById("minutes").innerText = result3,

index.html

@@ -395,7 +395,7 @@
         <h1 class="title-main">精華課程大綱</h1>
         <hr class="line" style="opacity: 1;">
         <div id="card-box" class="row">
-            <div class="card col-8">
+            <div class="card ">
                 <h1 class="card-title" style="font-weight: 900;">課程1手機拍片</h1>
                 <h2>知名媒體網站電視台店長</h2>
                 <div class="box-img01">
@@ -406,7 +406,7 @@
                     <img src="./img/Course-list/box11.png" style="padding-top:1vw" alt="">
                 </div>
             </div>
-            <div class="card col-8">
+            <div class="card ">
                 <h1 class="card-title" style="font-weight: 900;">課程2社群營造</h1>
                 <h2>資深數位廣告投手</h2>
                 <div class="box-img02">
@@ -417,7 +417,7 @@
                     <img src="./img/Course-list/box12.png" style="padding-top:1vw" alt="">
                 </div>
             </div>
-            <div class="card col-8">
+            <div class="card ">
                 <h1 class="card-title" style="font-weight: 900;">課程3文案撰寫</h1>
                 <h2>資深新聞媒體工作者</h2>
                 <div class="box-img03">
@@ -767,7 +767,7 @@
                         <option class="option">其他</option>
                     </select>
                     <input type="text" id="phone" name="phone" placeholder="連絡電話" pattern="09\d{2}\d{6}" required>
-                    <input type="email" id="line" name="Line_id" placeholder="聯絡email" required>
+                    <input type="text" id="line" name="Line_id" placeholder="聯絡email" required>
                     <input type="email" id="email" name="email" placeholder="請留下您的LINE ID,便於開課時邀請入私密群組(請設定開放搜尋)"
                         required>
                     <input type="text" id="pay" name="cert_last5" placeholder="已匯款, 後五碼是" required>
@@ -825,7 +825,7 @@
                     <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="email" id="line" name="Line_id" placeholder="請留下您的LINE ID,(請設定開放搜尋)" required>
+                    <input type="text" id="line" name="Line_id" placeholder="請留下您的LINE ID,(請設定開放搜尋)" required>
                     <input type="text" id="pay" name="cert_last5" placeholder="已匯款, 後五碼是" required>
                     <textarea name="where_learn" id="message" cols="50" rows="3"
                         placeholder="是怎麼知道這個課程的" required></textarea>

style.css

@@ -639,6 +639,12 @@ body #btn-a #mobile-btn {
   }
 }
 
+@media screen and (max-width: 1024px) {
+  #Course-list {
+    display: none;
+  }
+}
+
 #Course-list .parallax {
   -webkit-transition: 1s;
   transition: 1s;
@@ -871,13 +877,21 @@ body #btn-a #mobile-btn {
   background-color: rgba(0, 0, 0, 0.8);
   width: 100vw;
   height: 100vh;
-  z-index: 8;
+  z-index: 12;
   padding: 50px 50px 100px 50px;
   position: fixed;
   top: 0vw;
   display: none;
 }
 
+@media screen and (max-width: 1024px) {
+  #Course-box01,
+  #Course-box02,
+  #Course-box03 {
+    padding: 50px 20px 100px 20px;
+  }
+}
+
 #Course-box01 .close,
 #Course-box02 .close,
 #Course-box03 .close {
@@ -894,6 +908,14 @@ body #btn-a #mobile-btn {
   margin: 0 auto;
 }
 
+@media screen and (max-width: 1024px) {
+  #Course-box01 .Course-box01,
+  #Course-box02 .Course-box01,
+  #Course-box03 .Course-box01 {
+    width: 95vw;
+  }
+}
+
 #Course-box01 .Course-box01 h1,
 #Course-box02 .Course-box01 h1,
 #Course-box03 .Course-box01 h1 {
@@ -939,6 +961,20 @@ body #btn-a #mobile-btn {
   padding-right: 0 !important;
 }
 
+@media screen and (max-width: 1024px) {
+  #Course-box01 .Course-box01 #box01 .card,
+  #Course-box01 .Course-box01 #box02 .card,
+  #Course-box01 .Course-box01 #box03 .card,
+  #Course-box02 .Course-box01 #box01 .card,
+  #Course-box02 .Course-box01 #box02 .card,
+  #Course-box02 .Course-box01 #box03 .card,
+  #Course-box03 .Course-box01 #box01 .card,
+  #Course-box03 .Course-box01 #box02 .card,
+  #Course-box03 .Course-box01 #box03 .card {
+    margin: 10px 3px;
+  }
+}
+
 #Course-box01 .Course-box01 #box01 .card .card-title,
 #Course-box01 .Course-box01 #box02 .card .card-title,
 #Course-box01 .Course-box01 #box03 .card .card-title,
@@ -954,6 +990,21 @@ body #btn-a #mobile-btn {
   font-size: 1.1rem;
 }
 
+@media screen and (max-width: 1024px) {
+  #Course-box01 .Course-box01 #box01 .card .card-title,
+  #Course-box01 .Course-box01 #box02 .card .card-title,
+  #Course-box01 .Course-box01 #box03 .card .card-title,
+  #Course-box02 .Course-box01 #box01 .card .card-title,
+  #Course-box02 .Course-box01 #box02 .card .card-title,
+  #Course-box02 .Course-box01 #box03 .card .card-title,
+  #Course-box03 .Course-box01 #box01 .card .card-title,
+  #Course-box03 .Course-box01 #box02 .card .card-title,
+  #Course-box03 .Course-box01 #box03 .card .card-title {
+    width: 18vw;
+    font-size: 1rem;
+  }
+}
+
 #Course-box01 .Course-box01 #box01 .card .box-img img,
 #Course-box01 .Course-box01 #box02 .card .box-img img,
 #Course-box01 .Course-box01 #box03 .card .box-img img,
@@ -968,6 +1019,22 @@ body #btn-a #mobile-btn {
   height: 13vw;
 }
 
+@media screen and (max-width: 1024px) {
+  #Course-box01 .Course-box01 #box01 .card .box-img img,
+  #Course-box01 .Course-box01 #box02 .card .box-img img,
+  #Course-box01 .Course-box01 #box03 .card .box-img img,
+  #Course-box02 .Course-box01 #box01 .card .box-img img,
+  #Course-box02 .Course-box01 #box02 .card .box-img img,
+  #Course-box02 .Course-box01 #box03 .card .box-img img,
+  #Course-box03 .Course-box01 #box01 .card .box-img img,
+  #Course-box03 .Course-box01 #box02 .card .box-img img,
+  #Course-box03 .Course-box01 #box03 .card .box-img img {
+    width: 15vw;
+    height: 20vw;
+    padding: 90px 20px 0px 20px;
+  }
+}
+
 #Course-box01 .Course-box01 #box01 .card .box-img2 img,
 #Course-box01 .Course-box01 #box02 .card .box-img2 img,
 #Course-box01 .Course-box01 #box03 .card .box-img2 img,
@@ -981,6 +1048,21 @@ body #btn-a #mobile-btn {
   width: 12vw;
 }
 
+@media screen and (max-width: 1024px) {
+  #Course-box01 .Course-box01 #box01 .card .box-img2 img,
+  #Course-box01 .Course-box01 #box02 .card .box-img2 img,
+  #Course-box01 .Course-box01 #box03 .card .box-img2 img,
+  #Course-box02 .Course-box01 #box01 .card .box-img2 img,
+  #Course-box02 .Course-box01 #box02 .card .box-img2 img,
+  #Course-box02 .Course-box01 #box03 .card .box-img2 img,
+  #Course-box03 .Course-box01 #box01 .card .box-img2 img,
+  #Course-box03 .Course-box01 #box02 .card .box-img2 img,
+  #Course-box03 .Course-box01 #box03 .card .box-img2 img {
+    width: 15vw;
+    padding: 90px 15px 0px 15px;
+  }
+}
+
 #Course-box03 .card {
   width: 25vw !important;
 }
@@ -994,7 +1076,7 @@ body #btn-a #mobile-btn {
   position: relative;
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 1025px) {
   .sec04 {
     display: none;
   }
@@ -1021,6 +1103,12 @@ body #btn-a #mobile-btn {
   background-position: 40% 50%;
 }
 
+@media screen and (min-width: 767px) {
+  .sec04 #card-box {
+    padding-top: 15vw;
+  }
+}
+
 .sec04 #card-box .slick-dots {
   margin-top: 50px;
 }
@@ -1057,6 +1145,12 @@ body #btn-a #mobile-btn {
   color: #646464;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec04 #card-box .card .card-title {
+    font-size: 1.5rem;
+  }
+}
+
 @media screen and (max-width: 350px) {
   .sec04 #card-box .card .card-title {
     font-size: 1.8rem;
@@ -1068,6 +1162,12 @@ body #btn-a #mobile-btn {
   font-size: 1.3rem;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec04 #card-box .card h2 {
+    font-size: 1rem;
+  }
+}
+
 @media screen and (max-width: 350px) {
   .sec04 #card-box .card h2 {
     font-size: 1rem;
@@ -1078,6 +1178,18 @@ body #btn-a #mobile-btn {
   margin: 0 auto;
 }
 
+@media screen and (min-width: 768px) {
+  .sec04 #card-box .card .box-img01 img, .sec04 #card-box .card .box-img02 img, .sec04 #card-box .card .box-img03 img {
+    width: 20vw;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .sec04 .name {
+    font-size: 3rem;
+  }
+}
+
 @media screen and (min-width: 1000px) {
   .sec04 {
     display: none;
@@ -1224,6 +1336,20 @@ body #btn-a #mobile-btn {
   color: #414346;
 }
 
+@media screen and (max-width: 1024px) {
+  .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: 3rem;
+  }
+}
+
 @media screen and (max-width: 400px) {
   .mobile01-1 .mobile-box1 .Course-mobile01 h1,
   .mobile01-1 .mobile-box2 .Course-mobile01 h1,
@@ -1331,6 +1457,70 @@ body #btn-a #mobile-btn {
   margin: 0px 10px;
 }
 
+@media screen and (max-width: 1024px) {
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-1 .card,
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-2 .card,
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-3 .card,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-1 .card,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-2 .card,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-3 .card,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-1 .card,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-2 .card,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-3 .card,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-1 .card,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-2 .card,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-3 .card,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-1 .card,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-3 .card,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-1 .card,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-2 .card,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-3 .card,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-1 .card,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-2 .card,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-3 .card,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-1 .card,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-2 .card,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-3 .card,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-1 .card,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-2 .card,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card {
+    font-size: 1.5rem;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-1 .card,
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-2 .card,
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-3 .card,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-1 .card,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-2 .card,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-3 .card,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-1 .card,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-2 .card,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-3 .card,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-1 .card,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-2 .card,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-3 .card,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-1 .card,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-3 .card,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-1 .card,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-2 .card,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-3 .card,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-1 .card,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-2 .card,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-3 .card,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-1 .card,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-2 .card,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-3 .card,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-1 .card,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-2 .card,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card {
+    font-size: 0.9rem;
+  }
+}
+
 @media screen and (max-width: 400px) {
   .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-1 .card,
   .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-2 .card,
@@ -1396,6 +1586,70 @@ body #btn-a #mobile-btn {
   font-size: 1.3rem;
 }
 
+@media screen and (max-width: 1024px) {
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .card-title {
+    font-size: 2rem;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .card-title {
+    font-size: 1.3rem;
+  }
+}
+
 @media screen and (max-width: 400px) {
   .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-1 .card .card-title,
   .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-2 .card .card-title,
@@ -1519,6 +1773,7 @@ body #btn-a #mobile-btn {
   .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-2 .card .box-img img,
   .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .box-img img {
     padding: 13vw 10vw;
+    height: 51vw;
   }
 }
 
@@ -1553,11 +1808,55 @@ body #btn-a #mobile-btn {
   width: 40vw;
 }
 
+@media screen and (min-width: 767px) {
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-1 .card .box-img2 img,
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-2 .card .box-img2 img,
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-3 .card .box-img2 img,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-1 .card .box-img2 img,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-2 .card .box-img2 img,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-3 .card .box-img2 img,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-1 .card .box-img2 img,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-2 .card .box-img2 img,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-3 .card .box-img2 img,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-1 .card .box-img2 img,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-2 .card .box-img2 img,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-3 .card .box-img2 img,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-1 .card .box-img2 img,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .box-img2 img,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-3 .card .box-img2 img,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-1 .card .box-img2 img,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-2 .card .box-img2 img,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-3 .card .box-img2 img,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-1 .card .box-img2 img,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-2 .card .box-img2 img,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-3 .card .box-img2 img,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-1 .card .box-img2 img,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-2 .card .box-img2 img,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-3 .card .box-img2 img,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-1 .card .box-img2 img,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-2 .card .box-img2 img,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .box-img2 img {
+    padding-top: 5vw;
+  }
+}
+
 .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card {
   margin: 0px 10px;
   font-size: 1rem;
 }
 
+@media screen and (max-width: 1024px) {
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card {
+    font-size: 1.5rem;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card {
+    font-size: 1rem;
+  }
+}
+
 @media screen and (max-width: 400px) {
   .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card {
     font-size: 0.8rem;
@@ -1575,6 +1874,18 @@ body #btn-a #mobile-btn {
   width: 40vw;
 }
 
+@media screen and (min-width: 767px) {
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .box-img2 img {
+    padding-top: 5vw;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .box-img2 img {
+    padding-top: 5vw;
+  }
+}
+
 @media screen and (max-width: 350px) {
   .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .box-img2 img {
     padding-top: 15vw;
@@ -1600,9 +1911,15 @@ body #btn-a #mobile-btn {
   font-size: 1.3rem;
 }
 
-@media screen and (max-width: 400px) {
+@media screen and (max-width: 1024px) {
   .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .card-title {
-    font-size: 1.3rem;
+    font-size: 2rem;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .card-title {
+    font-size: 1rem;
   }
 }
 
@@ -1612,6 +1929,12 @@ body #btn-a #mobile-btn {
   }
 }
 
+@media screen and (min-width: 1024px) {
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 {
+    height: 691px;
+  }
+}
+
 .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .box-img img {
   width: 43vw;
   height: 50vw;
@@ -1629,12 +1952,24 @@ body #btn-a #mobile-btn {
   width: 40vw;
 }
 
-@media screen and (max-width: 350px) {
+@media screen and (max-width: 1024px) {
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .box-img2 img {
+    padding-top: 4vw;
+  }
+}
+
+@media screen and (max-width: 767px) {
   .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .box-img2 img {
     padding-top: 10vw;
   }
 }
 
+@media screen and (max-width: 350px) {
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .box-img2 img {
+    padding-top: 5vw;
+  }
+}
+
 .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .card-title {
   padding-top: 1rem;
   font-weight: 900;
@@ -1642,12 +1977,24 @@ body #btn-a #mobile-btn {
   font-size: 1.3rem;
 }
 
-@media screen and (max-width: 400px) {
+@media screen and (max-width: 1024px) {
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .card-title {
+    font-size: 2rem;
+  }
+}
+
+@media screen and (max-width: 767px) {
   .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .card-title {
     font-size: 1.3rem;
   }
 }
 
+@media screen and (max-width: 400px) {
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .card-title {
+    font-size: 1rem;
+  }
+}
+
 #course-schedule {
   background: #f4fffc;
   text-align: center;

style.scss

@@ -478,7 +478,9 @@ body {
     @media screen and(max-width:$moblie) {
         display: none;
     }
-
+    @media screen and(max-width:$table) {
+        display: none;
+    }
     .parallax {
         transition: 1s;
         object-fit: contain;
@@ -638,11 +640,15 @@ body {
     background-color: rgba(0, 0, 0, 0.8);
     width: 100vw;
     height: 100vh;
-    z-index: 8;
+    z-index: 12;
     padding: 50px 50px 100px 50px;
     position: fixed;
     top: 0vw;
     display: none;
+    @media screen and(max-width:$table) {
+        padding: 50px 20px 100px 20px;
+       
+    }
     .close {
         position: absolute;
         right: 3vw;
@@ -652,6 +658,10 @@ body {
         background: #fff;
         width: 90vw;
         margin: 0 auto;
+        @media screen and(max-width:$table) {
+            width: 95vw;
+           
+        }
         h1 {
             padding-top: 50px;
             text-align: center;
@@ -676,11 +686,20 @@ body {
                 border: none !important;
                 padding-left: 0 !important;
                 padding-right: 0 !important;
+                @media screen and(max-width:$table) {
+                    margin: 10px 3px;
+                   
+                }
                 .card-title {
                     padding: 30px 0px 20px 0px;
                     font-weight: 900;
                     color: #414346;
                     font-size: 1.1rem;
+                    @media screen and(max-width:$table) {
+                        width: 18vw;
+                        font-size: 1rem;
+                       
+                    }
                 }
 
                 .box-img {
@@ -688,12 +707,22 @@ body {
                         padding: 90px 30px 0px 30px;
                         width: 10.5vw;
                         height: 13vw;
+                        @media screen and(max-width:$table) {
+                            width: 15vw;
+                            height: 20vw;
+                            padding: 90px 20px 0px 20px;
+                        }
                     }
                 }
                 .box-img2 {
                     img {
                         padding: 90px 30px 0px 30px;
                         width: 12vw;
+                        @media screen and(max-width:$table) {
+                            width: 15vw;
+                           
+                            padding: 90px 15px 0px 15px;
+                        }
                     }
                 }
             }
@@ -714,7 +743,7 @@ body {
     color: $title-color;
     overflow: hidden;
     position: relative;
-    @media screen and(min-width:768px) {
+    @media screen and(min-width:$desktop) {
         display: none;
     }
     .element1 {
@@ -733,6 +762,10 @@ body {
         background-size: cover;
         background-repeat: no-repeat;
         background-position: 40% 50%;
+        @media screen and(min-width:767px) {
+            padding-top: 15vw;
+       
+        }
         .slick-dots {
             margin-top: 50px;
 
@@ -762,16 +795,29 @@ body {
             margin: 0px 10px;
             position: relative;
             z-index: 2;
+            @media screen and(max-width:$table) {
+              
+               
+            }
             .card-title {
                 padding-top: 2rem;
                 color: $title-color;
+                @media screen and(max-width:$table) {
+                    font-size: 1.5rem;
+               
+                }
                 @media screen and(max-width:350px) {
                     font-size: 1.8rem;
                 }
             }
+           
             h2 {
                 color: $title-color;
                 font-size: 1.3rem;
+                @media screen and(max-width:$table) {
+                    font-size: 1rem;
+               
+                }
                 @media screen and(max-width:350px) {
                     font-size: 1rem;
                 }
@@ -779,16 +825,36 @@ body {
             img {
                 margin: 0 auto;
             }
+            .box-img01, .box-img02,.box-img03{
+
+                img{
+                    @media screen and(min-width:768px) {
+                        width: 20vw;
+                   
+                    }
+                  
+                }
+                
+            }
+
         }
     }
+   .name{
+    @media screen and(max-width:$table) {
+        font-size: 3rem;
+       
+    }
+   }
 
     @media screen and(min-width:1000px) {
         display: none;
     }
+
     @media screen and(max-width:$moblie) {
         .name {
             padding-bottom: 2rem;
             font-size: 4rem;
+            
         }
     }
     @media screen and(max-width:400px) {
@@ -819,6 +885,7 @@ body {
     .mobile-box2,
     .mobile-box3 {
         height: 80vh;
+        
         .close {
             position: absolute;
             right: 5vw;
@@ -862,6 +929,10 @@ body {
                 font-family: 追奇手寫體;
                 font-size: 2.5rem;
                 color: #414346;
+                @media screen and(max-width:$table) {
+                    font-size: 3rem;
+           
+                }
                 @media screen and(max-width:400px) {
                     font-size: 2rem;
                 }
@@ -879,6 +950,13 @@ body {
                    
                     text-align: center;
                     margin: 0px 10px;
+                    @media screen and(max-width:$table) {
+                        font-size: 1.5rem;
+               
+                    }
+                    @media screen and(max-width:$moblie) {
+                        font-size: 0.9rem;
+                    }
                     @media screen and(max-width:400px) {
                         font-size: 0.7rem;
                     }
@@ -888,6 +966,13 @@ body {
                         font-weight: 900;
                         color: #414346;
                         font-size: 1.3rem;
+                        @media screen and(max-width:$table) {
+                            font-size: 2rem;
+                   
+                        }
+                        @media screen and(max-width:$moblie) {
+                            font-size: 1.3rem;
+                        }
                         @media screen and(max-width:400px) {
                             font-size: 1rem;
                         }
@@ -901,8 +986,10 @@ body {
                             width: 43vw;
                             height: 53vw;
                             padding: 15vw 12vw;
+                          
                             @media screen and(max-width:400px) {
                                 padding: 13vw 10vw;
+                                height: 51vw;
                             }
                            
                         }
@@ -911,6 +998,11 @@ body {
                         img {
                             padding-top: 20vw;
                             width: 40vw;
+                            @media screen and(min-width:767px) {
+                                padding-top: 5vw;
+                           
+                            }
+                            
                         }
                     }
                 }
@@ -922,13 +1014,17 @@ body {
     .mobile-box2 {
         .Course-mobile01 {
             .card-box-2 {
-                @media screen and(max-width:350px) {
-                   
-                }
+                
                 .card {
                     margin: 0px 10px;
                     font-size: 1rem;
-                  
+                    @media screen and(max-width:$table) {
+                        font-size: 1.5rem;
+               
+                    }
+                    @media screen and(max-width:$moblie) {
+                        font-size: 1rem;
+                    }
 
                     @media screen and(max-width:400px) {
                         font-size: 0.8rem;
@@ -942,6 +1038,13 @@ body {
                         img {
                             padding-top: 20vw;
                             width: 40vw;
+                            @media screen and(min-width:767px) {
+                                padding-top: 5vw;
+                           
+                            }
+                            @media screen and(max-width:$moblie) {
+                                padding-top: 5vw;
+                            }
                             @media screen and(max-width:350px) {
                                
                                 padding-top: 15vw;
@@ -964,12 +1067,19 @@ body {
                         font-weight: 900;
                         color: #414346;
                         font-size: 1.3rem;
-                        @media screen and(max-width:400px) {
-                            font-size: 1.3rem;
+                        @media screen and(max-width:$table) {
+                            font-size: 2rem;
+                   
+                        }
+                        @media screen and(max-width:$moblie) {
+                            font-size: 1rem;
                         }
+                        
+
                         @media screen and(max-width:400px) {
                             font-size: 1rem;
                         }
+                        
                     }
                 }
             }
@@ -981,8 +1091,12 @@ body {
     .mobile-box3 {
         .Course-mobile01 {
             .card-box-3 {
-              
+                @media screen and(min-width:$table) {
+                    height: 691px;
+           
+                }
                 .card {
+                   
                     .box-img {
                         img {
                             width: 43vw;
@@ -998,9 +1112,17 @@ body {
                         img {
                             padding-top: 20vw;
                             width: 40vw;
+                            @media screen and(max-width:$table) {
+                                padding-top: 4vw;
+                           
+                            }
+                            @media screen and(max-width:$moblie) {
+                                padding-top: 10vw;
+                            }
+                            
                             @media screen and(max-width:350px) {
                                
-                                padding-top: 10vw;
+                                padding-top: 5vw;
                             }
                         }
                     }
@@ -1009,9 +1131,16 @@ body {
                         font-weight: 900;
                         color: #414346;
                         font-size: 1.3rem;
-                        @media screen and(max-width:400px) {
+                        @media screen and(max-width:$table) {
+                            font-size: 2rem;
+                   
+                        }
+                        @media screen and(max-width:$moblie) {
                             font-size: 1.3rem;
                         }
+                        @media screen and(max-width:400px) {
+                            font-size: 1rem;
+                        }
                     }
                 }
             }