內容更新

goto.js

@@ -23,13 +23,12 @@
 // }
 // 手機課程大綱輪播
 $(function () {
-  $('#card-box').slick({
+  $('.card-box').slick({
     arrows: false,
     slidesToShow: 3,
     slidesToScroll: 3,
     infinite: true,
     centerMode: true,
-    dots: true,
     responsive: [
       , {
         breakpoint: 768,
@@ -39,7 +38,6 @@ $(function () {
           slidesToScroll: 3,
           centerMode: true,
           infinite: true,
-          dots: true,
         }
       },
       , {
@@ -49,7 +47,7 @@ $(function () {
           slidesToShow: 1,
           centerMode: true,
           infinite: false,
-          dots: true,
+
         }
       },
     ]
@@ -66,35 +64,35 @@ $(function () {
 // 手機課程大綱彈跳視窗
 // 視窗一
 
-$(".box-img01").click(function () {
-  $(".mobile01-1").fadeIn();
-  $(".mobile-box1").fadeIn();
-  $(".card-box-1").slick({
-    arrows: false,
-    slidesToShow: 1,
-    centerMode: true,
-    infinite: false,
-    dots: true,
-  });
-});
-$("#sec01-1").click(function () {
-  $(".mobile01-1").fadeIn();
-  $(".mobile-box1").fadeIn();
-  $(".card-box-1").slick({
-    arrows: false,
-    slidesToShow: 1,
-    centerMode: true,
-    infinite: false,
-    dots: true,
-  });
-});
+// $(".box-img01").click(function () {
+//   $(".mobile01-1").fadeIn();
+//   $(".mobile-box1").fadeIn();
+//   $(".card-box-1").slick({
+//     arrows: false,
+//     slidesToShow: 1,
+//     centerMode: true,
+//     infinite: false,
+//     dots: true,
+//   });
+// });
+// $("#sec01-1").click(function () {
+//   $(".mobile01-1").fadeIn();
+//   $(".mobile-box1").fadeIn();
+//   $(".card-box-1").slick({
+//     arrows: false,
+//     slidesToShow: 1,
+//     centerMode: true,
+//     infinite: false,
+//     dots: true,
+//   });
+// });
 
 
-$(".close").click(function () {
-  $(".mobile-box1").fadeOut();
-  $(".mobile01-1").fadeOut();
+// $(".close").click(function () {
+//   $(".mobile-box1").fadeOut();
+//   $(".mobile01-1").fadeOut();
 
-});
+// });
 
 
 
@@ -102,72 +100,72 @@ $(".close").click(function () {
 $(".mobile01-2").fadeOut(0);
 $(".mobile-box2").fadeOut(0);
 
-$(".box-img02").click(function () {
-  $(".mobile01-2").fadeIn();
-  $(".mobile-box2").fadeIn();
-  $(".card-box-2").slick({
-    arrows: false,
-    slidesToShow: 1,
-    centerMode: true,
-    infinite: false,
-    dots: true,
-  });
-});
+// $(".box-img02").click(function () {
+//   $(".mobile01-2").fadeIn();
+//   $(".mobile-box2").fadeIn();
+//   $(".card-box-2").slick({
+//     arrows: false,
+//     slidesToShow: 1,
+//     centerMode: true,
+//     infinite: false,
+//     dots: true,
+//   });
+// });
 
-$("#sec01-2").click(function () {
-  $(".mobile01-2").fadeIn();
-  $(".mobile-box2").fadeIn();
-  $(".card-box-2").slick({
-    arrows: false,
-    slidesToShow: 1,
-    centerMode: true,
-    infinite: false,
-    dots: true,
-  });
-});
+// $("#sec01-2").click(function () {
+//   $(".mobile01-2").fadeIn();
+//   $(".mobile-box2").fadeIn();
+//   $(".card-box-2").slick({
+//     arrows: false,
+//     slidesToShow: 1,
+//     centerMode: true,
+//     infinite: false,
+//     dots: true,
+//   });
+// });
 
-$(".close").click(function () {
-  $(".mobile-box2").fadeOut();
-  $(".mobile01-2").fadeOut();
+// $(".close").click(function () {
+//   $(".mobile-box2").fadeOut();
+//   $(".mobile01-2").fadeOut();
 
-});
+// });
 
 
 // 視窗三
 $(".mobile01-3").fadeOut(0);
 $(".mobile-box3").fadeOut(0);
 
-$(".box-img03").click(function () {
-  $(".mobile01-3").fadeIn();
-  $(".mobile-box3").fadeIn();
-  $(".card-box-3").slick({
-    arrows: false,
-    slidesToShow: 1,
-    centerMode: true,
-    infinite: false,
-    dots: true,
-  });
+// $(".box-img03").click(function () {
+//   $(".mobile01-3").fadeIn();
+//   $(".mobile-box3").fadeIn();
+//   $(".card-box-3").slick({
+//     arrows: false,
+//     slidesToShow: 1,
+//     centerMode: true,
+//     infinite: false,
+//     dots: true,
+//   });
 
-});
+// });
 
-$("#sec01-3").click(function () {
-  $(".mobile01-3").fadeIn();
-  $(".mobile-box3").fadeIn();
-  $(".card-box-3").slick({
-    arrows: false,
-    slidesToShow: 1,
-    centerMode: true,
-    infinite: false,
-    dots: true,
-  });
+// $("#sec01-3").click(function () {
+//   $(".mobile01-3").fadeIn();
+//   $(".mobile-box3").fadeIn();
+//   $(".card-box-3").slick({
+//     arrows: false,
+//     slidesToShow: 1,
+//     centerMode: true,
+//     infinite: false,
+//     dots: true,
+//   });
 
-});
+// });
 
-$(".close").click(function () {
-  $(".mobile-box3").fadeOut();
-  $(".mobile01-3").fadeOut();
+// $(".close").click(function () {
+//   $(".mobile-box3").fadeOut();
+//   $(".mobile01-3").fadeOut();
 
-});
+// });
 
 
 // 手機課程日程輪播
@@ -372,52 +370,52 @@ $(".contact-form2").submit(function (e) {
   return false;
 });
 
-$(function () {
+// $(function () {
 
-  $(".box1").hover(
-    function () {
-      $("#title1").html('課程1手機拍片');
-      $("#title1-1").html('知名媒體網站電視台台長');
-      $("#title1-2").html('Vincnet');
-    },
-
-    function () {
-      $("#title1").html('課程1');
-      $("#title1-1").html('手機拍片');
-      $("#title1-2").html('');
-    })
-});
+//   $(".box1").hover(
+//     function () {
+//       $("#title1").html('課程1手機拍片');
+//       $("#title1-1").html('知名媒體網站電視台台長');
+//       $("#title1-2").html('Vincnet');
+//     },
 
-$(function () {
+//     function () {
+//       $("#title1").html('課程1');
+//       $("#title1-1").html('手機拍片');
+//       $("#title1-2").html('');
+//     })
+// });
 
-  $(".box2").hover(
-    function () {
-      $("#title2").html('課程2數位行銷與社群');
-      $("#title2-1").html('品牌行銷實戰經驗業務經理');
-      $("#title2-2").html('Ruby');
-    },
-
-    function () {
-      $("#title2").html('課程2');
-      $("#title2-1").html('數位行銷與社群');
-      $("#title2-2").html('');
-    })
-});
-$(function () {
+// $(function () {
 
-  $(".box3").hover(
-    function () {
-      $("#title3").html('課程3文案撰寫');
-      $("#title3-1").html('資深新聞媒體工作者');
-      $("#title3-2").html('Jennifer');
-    },
-
-    function () {
-      $("#title3").html('課程3');
-      $("#title3-1").html('文案撰寫');
-      $("#title3-2").html('');
-    })
-});
+//   $(".box2").hover(
+//     function () {
+//       $("#title2").html('課程2數位行銷與社群');
+//       $("#title2-1").html('品牌行銷實戰經驗業務經理');
+//       $("#title2-2").html('Ruby');
+//     },
+
+//     function () {
+//       $("#title2").html('課程2');
+//       $("#title2-1").html('數位行銷與社群');
+//       $("#title2-2").html('');
+//     })
+// });
+// $(function () {
+
+//   $(".box3").hover(
+//     function () {
+//       $("#title3").html('課程3文案撰寫');
+//       $("#title3-1").html('資深新聞媒體工作者');
+//       $("#title3-2").html('Jennifer');
+//     },
+
+//     function () {
+//       $("#title3").html('課程3');
+//       $("#title3-1").html('文案撰寫');
+//       $("#title3-2").html('');
+//     })
+// });
 
 // 電腦版彈跳視窗
 $("#Course-box01").fadeOut(0);
@@ -430,43 +428,43 @@ $("#Course-box03").fadeOut(0);
 $(".Course-box01").fadeOut(0);
 
 // 電腦版視窗一
-$(".box1").click(function () {
-  $("#Course-box01").fadeIn();
-  $(".Course-box01").fadeIn();
+// $(".box1").click(function () {
+//   $("#Course-box01").fadeIn();
+//   $(".Course-box01").fadeIn();
 
-});
+// });
 
-$(".close").click(function () {
-  $("#Course-box01").fadeOut();
-  $(".Course-box01").fadeOut();
+// $(".close").click(function () {
+//   $("#Course-box01").fadeOut();
+//   $(".Course-box01").fadeOut();
 
-});
+// });
 
-// 電腦版視窗二
-$(".box2").click(function () {
-  $("#Course-box02").fadeIn();
-  $(".Course-box01").fadeIn();
+// // 電腦版視窗二
+// $(".box2").click(function () {
+//   $("#Course-box02").fadeIn();
+//   $(".Course-box01").fadeIn();
 
-});
+// });
 
-$(".close").click(function () {
-  $("#Course-box02").fadeOut();
-  $(".Course-box01").fadeOut();
+// $(".close").click(function () {
+//   $("#Course-box02").fadeOut();
+//   $(".Course-box01").fadeOut();
 
-});
+// });
 
-// 電腦版視窗三
-$(".box3").click(function () {
-  $("#Course-box03").fadeIn();
-  $(".Course-box01").fadeIn();
+// // 電腦版視窗三
+// $(".box3").click(function () {
+//   $("#Course-box03").fadeIn();
+//   $(".Course-box01").fadeIn();
 
-});
+// });
 
-$(".close").click(function () {
-  $("#Course-box03").fadeOut();
-  $(".Course-box01").fadeOut();
+// $(".close").click(function () {
+//   $("#Course-box03").fadeOut();
+//   $(".Course-box01").fadeOut();
 
-});
+// });
 
 (function () {
   const second = 1000,
@@ -511,13 +509,27 @@ $(".close").click(function () {
 }());
 
 
-window.onload=function(){
-  $("#light-box").fadeIn();
-  $(".light-box1").fadeIn();
-}
+// window.onload=function(){
+//   $("#light-box").fadeIn();
+//   $(".light-box1").fadeIn();
+// }
 
-$(".close").click(function () {
-  $("#light-box").fadeOut();
-  $(".light-box1").fadeOut();
+// $(".close").click(function () {
+//   $("#light-box").fadeOut();
+//   $(".light-box1").fadeOut();
 
-});
+// });
+
+// $(window).scroll(function () {
+//   var y = window.scrollY;
+//   console.log(y);
+//   if (y > 4400) {
+//     $("#bg-fixed").css({ "position": "static" });
+    
+//   }else if (y > 1900) {
+//     $("#bg-fixed").css({ "position":"sticky;","top": "0px"});
+//   } else {
+//     $("#bg-fixed").css({ "position": "static" });
+//   }
+
+// });

index.html

@@ -59,9 +59,9 @@
             <img id="menu-btn1" src="./img/mobile-logo/menu.png" alt="">
         </div>
     </section>
-    
+
     <!-- lightbox -->
-   
+
     <!-- mobile彈跳視窗 -->
     <div id="menu-box" class="container-fluid" style="padding:0;margin:0 ">
         <div id="menu-box2">
@@ -124,26 +124,26 @@
             <!-- 手機背景 -->
             <div style="text-align: center;">
                 <img id="mobilecover" src="./img/banner/cover-m.webp" alt="">
-                
-         
+
+
             </div>
-           
+
             <a data-gt-target="#information" data-gt-duration="500" data-gt-offset="70"><button
-                class="btn">手刀報名</button></a>
+                    class="btn">手刀報名</button></a>
         </div>
 
     </section>
-     <a  id="btn-a" data-gt-target="#information-mobile" data-gt-duration="500" data-gt-offset="100"><button
-                id="mobile-btn" class="btn mt-1">手刀報名</button></a>
+    <a id="btn-a" data-gt-target="#information-mobile" data-gt-duration="500" data-gt-offset="100"><button
+            id="mobile-btn" class="btn mt-1">手刀報名</button></a>
     <img class="arrow" data-gt-target="#top" data-gt-duration="500" data-gt-offset="0" src="./img/gotop.png" alt="">
-    
-    <section id="light-box" class="container-fluid">
+
+    <!-- <section id="light-box" class="container-fluid">
         <img class="close" src="./img/course-box/close.png" alt="">
         <div class="light-box1">
            <img class="light-box img-fluid" src="./img/ligjtbox.jpg" alt="">
            <img class="light-box-m" src="./img/lighbox-m.png" alt="">
         </div>
-    </section>
+    </section> -->
     <!-- 困擾 -->
     <section id="trouble" class="container-fluid">
         <div id="content" class="row" style="padding-right: 0;">
@@ -170,68 +170,300 @@
             </div>
         </div>
     </section>
-
-    <!-- 格狀元素1 -->
-
-    <!-- 電腦版課程大綱 -->
-    <section id="Course-list" class="container-fluid" style="padding:0;margin: 0; ">
+    <section class="text-center">
         <p>Essential Course Syllabus</p>
         <h1 class="title-main">精華課程大綱</h1>
         <hr class="line" style="opacity: 1;">
-        <img id="bg" src="./img/Course-list/BG12.png" alt="">
-        <div class="parallax">
-            <img id="act1" class="act" src="./img/Course-list/act1.png" alt="">
-            <img id="act2" class="act" src="./img/Course-list/act2.png" alt="">
-            <img id="act3" class="act" src="./img/Course-list/act3.png" alt="">
-            <img id="act4" class="act" src="./img/Course-list/act4.png" alt="">
-            <img id="act5" class="act" src="./img/Course-list/act5.png" alt="">
-            <img id="act6" class="act" src="./img/Course-list/act6.png" alt="">
-        </div>
-        <div id="Course-content">
-            <div id="row" class="row">
-                <div class="box1 col-12 col-md-4">
-                    <h1 id="title1">課程1</h1>
-                    <h2 id="title1-1">手機拍片</h2>
-                    <div class="box-img">
-                        <img src="./img/Course-list/box1.png" alt="">
-                        <div id="title1-2"></div>
+    </section>
+   <!-- 電腦版課程大綱 -->
+    <section style="position:relative;" id="Course123-Des">
+        <img class="bg2" src="./img/Course-list/bg.png" alt="">
+        <!-- 課程一 -->
+        <section style="position: absolute; top: 0px;" class="Course-list bg-transparent container-fluid px-0 mx-0 mt-5">
+            <div id="content-fixed" class="Course-content">
+                <h1 class="Course-title">手機拍片，你可以學到</h1>
+                <hr class="line" style="opacity: 1;">
+                <div class="row">
+                    <div class="col-lg-6">
+                        <div class="row">
+                            <div class="box-item col-lg-12 p-3">
+                                <div class="box-item-1 bg-white px-3 px-xl-3 h-100">
+                                    <div class="row">
+                                        <div class="col-lg-7 px-0 d-flex align-items-center">
+                                            <div class="p-3">
+                                                <h1>課程1手機拍片</h1>
+                                                <h2>知名媒體網站電視台台長</h2>
+                                            </div>
+                                        </div>
+                                        <div class="teacher col-lg-5 px-xl-0">
+                                            <div class="teacher01 pt-3">
+                                                <img style="width: 150px;" src="./img/people/people1.jpg" alt="">
+                                                <p style="margin-top: -25px;" class="techer-name mb-0">Vincent</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="box-item col-lg-6 p-3">
+                                <div style="background: #00B871;"
+                                    class="box-item-1 py-5 d-flex align-items-center justify-content-center h-100">
+                                    <div style="background: #00B871;">
+                                        <div class="box-img">
+                                            <img style="width: 150px;" src="./img/people/Group207.png" alt="">
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+                            <div class="box-item col-lg-6 p-3">
+                                <div class="box-item-1 bg-white px-3 py-4 px-xl-0">
+                                    <div class="card-title">3.我是影片主角</div>
+                                    <div>眼神、肢體、聲音表情、</div>
+                                    <div>面對鏡頭萬用公式</div>
+                                    <div class="box-img">
+                                        <img style="width: 94px;" src="./img/course-box/box3.png" alt="">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <div id="teacher-name1"></div>
-                    <div class="box-img2">
-                        <img src="./img/Course-list/box11.png" alt="">
-                        <div class="more">了解更多</div>
+                    <div class="col-lg-6">
+                        <div class="row h-100">
+                            <div class="box-item col-lg-6 p-3">
+                                <div class="box-item-1 bg-white px-3 py-4">
+                                    <div class="card-title">1.當紅短影音趨勢</div>
+                                    <div>現今當紅影音的</div>
+                                    <div>拍攝手法分析與觀察</div>
+                                    <div class="box-img">
+                                        <img style="width: 94px;" src="./img/course-box/box1.png" alt="">
+                                    </div>
+                                </div>
+
+                            </div>
+                            <div class="box-item col-lg-6 p-3">
+                                <div class="box-item-1 bg-white px-1 py-4">
+                                    <div class="card-title">2.隨時想拍就拍</div>
+                                    <div>手機攝影構圖、光線、運鏡</div>
+                                    <div>與器材應用演練</div>
+                                    <div class="box-img">
+                                        <img style="width: 108px;" src="./img/course-box/box2.png" alt="">
+                                    </div>
+                                </div>
+
+                            </div>
+                            <div class="box-item col-lg-6 p-3">
+                                <div class="box-item-1 bg-white px-3 py-4">
+                                    <div class="card-title">4.從0到有</div>
+                                    <div>團隊合作發想影片故事</div>
+                                    <div>與撰寫分鏡腳本</div>
+                                    <div class="box-img">
+                                        <img style="width: 68px;" src="./img/course-box/box4.png" alt="">
+                                    </div>
+                                </div>
+
+                            </div>
+                            <div class="box-item col-lg-6 p-3">
+                                <div class="box-item-1 bg-white px-3 py-4 px-xl-0">
+                                    <div class="card-title">5.畫龍點睛的後製剪輯</div>
+                                    <div>實際剪輯演練及</div>
+                                    <div>選擇恰如其分的配樂、音效</div>
+                                    <div class="box-img">
+                                        <img style="width: 102px;" src="./img/course-box/box5.png" alt="">
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
                     </div>
                 </div>
-                <div class="box2 col-12 col-md-4">
-                    <h1 id="title2">課程2</h1>
-                    <h2 id="title2-1">數位行銷與社群</h2>
-                    <div id="boximg1" class="box-img">
-                        <img class="img-fluid" src="./img/Course-list/box2.png" alt="">
-                        <div id="title2-2"></div>
+            </div>
+        </section>
+        <!-- 課程二 -->
+        <section style="padding-top: 200px;" class="Course-list container-fluid px-0 mx-0 mt-5">
+            <div class="Course-content">
+                <h1 class="Course-title">社群營造，你可以學到</h1>
+                <hr class="line" style="opacity: 1;">
+                <div class="row">
+                    <div class="col-lg-6">
+                        <div class="row">
+                            <div class="box-item col-lg-12 p-3">
+                                <div class="box-item-1 bg-white px-3 pb-3 pt-3 px-xl-3 h-100">
+                                    <div class="row">
+                                        <div class="col-lg-7 px-0 d-flex align-items-center">
+                                            <div class="p-3">
+                                                <h1>課程2社群營造</h1>
+                                                <h2>資深數位廣告投手</h2>
+                                            </div>
+                                        </div>
+                                        <div class="teacher col-lg-5 px-xl-0">
+                                            <div class="teacher01">
+                                                <img style="width: 150px;" src="./img/people/people2.jpg" alt="">
+                                                <p class="techer-name mb-0">Ruby</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="box-item col-lg-6 p-3">
+                                <div style="background:#C63D4F;"
+                                    class="box-item-1 py-5 d-flex align-items-center justify-content-center h-100">
+                                    <div class="Group" style="background: #C63D4F;">
+                                        <div class="box-img">
+                                            <img style="width: 150px;" src="./img/people/Group208.png" alt="">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="box-item col-lg-6 p-3">
+                                <div class="box-item-1 bg-white px-3 py-2 h-100 px-xl-0">
+                                    <div class="card-title pt-3">3. 數位行銷之執行</div>
+                                    <div style="height: 80px;">
+                                        <div>產品、內容、平台、行銷</div>
+                                    </div>
+                                    <div class="box-img">
+                                        <img style="width: 94px;" src="./img/course-box02/box3.png" alt="">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <div id="teacher-name2"></div>
-                    <div class="box-img2">
-                        <img class="img-fluid" src="./img/Course-list/box12.png" alt="">
-                        <div class="more">了解更多</div>
+                    <div class="col-lg-6">
+                        <div class="row row-cols-md-2 g-4">
+                            <div class="box-item col p-3">
+                                <div class="box-item-1 bg-white px-3 py-2 h-100 px-xl-0">
+                                    <div class="card-title pt-3">1. 消費者網路行為洞察</div>
+                                    <div style="height: 80px;">
+                                        <div>消費者購買決策流程、</div>
+                                        <div>裝修歷程與需求概觀</div>
+                                    </div>
+                                    <div class="box-img">
+                                        <img style="width: 100px;" src="./img/course-box02/box1.png" alt="">
+                                    </div>
+                                </div>
+
+                            </div>
+                            <div class="box-item col p-3">
+                                <div class="box-item-1 bg-white px-3 py-2 h-100 px-xl-0">
+                                    <div class="card-title pt-3">2.數位行銷之趨勢</div>
+                                    <div style="height: 80px;">
+                                        <div>社群營銷、內容視覺化、</div>
+                                        <div>直播&KOL、UGC (User Generated Content)、</div>
+                                        <div>更貼近消費者的媒體內容</div>
+                                    </div>
+                                    <div class="box-img">
+                                        <img style="width: 70px;" src="./img/course-box02/box2.png" alt="">
+                                    </div>
+                                </div>
+
+                            </div>
+                            <div class="box-item col p-3 mt-0">
+                                <div class="box-item-1 bg-white px-3 py-2 h-100">
+                                    <div class="card-title pt-3">4.經營規劃</div>
+                                    <div style="height: 80px;">
+                                        <div>室內設計品牌定位規劃</div>
+                                    </div>
+                                    <div class="box-img">
+                                        <img style="width: 95px;" src="./img/course-box02/box4.png" alt="">
+                                    </div>
+                                </div>
+
+                            </div>
+                            <div class="box-item col p-3 mt-0">
+                                <div style="background:#C63D4F;"
+                                    class="box-item-1 py-5 d-flex align-items-center justify-content-center h-100">
+                                    <div class="Group" style="background: #C63D4F;">
+                                        <div class="box-img">
+                                            <img style="width: 150px;" src="./img/people/Group208.svg" alt="">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
-                <div class="box3 col-12 col-md-4">
-                    <h1 id="title3">課程1</h1>
-                    <h2 id="title3-1">文案撰寫</h2>
-                    <div class="box-img">
-                        <img class="img-fluid" src="./img/Course-list/box3.png" alt="">
-                        <div id="title3-2"></div>
+            </div>
+        </section>
+        <!-- 課程三 -->
+        <section class="Course-list container-fluid px-0 mx-0">
+            <div class="Course-content">
+                <h1 class="Course-title">文案撰寫，你可以學到</h1>
+                <hr class="line" style="opacity: 1;">
+                <div class="row">
+                    <div class="col-lg-4 p-3">
+                        <div style="border-radius: 5px; box-shadow:0px 5px 30px #B9CCC7;"
+                            class="bg-white h-100 d-flex justify-content-center">
+                            <div style="text-align: center;" class="pt-4">
+                                <div class="p-3">
+                                    <h1>課程3文案撰寫</h1>
+                                    <h2>資深新聞媒體工作者</h2>
+                                </div>
+                                <div class="teacher pt-3">
+                                    <div class="teacher01">
+                                        <div>
+                                            <img style="width: 160px;" src="./img/people/people3.jpg" alt="">
+                                            <p style="margin-top:-20px;" class="techer-name mb-0 text-center">Jennifer
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <div id="teacher-name3"></div>
-                    <div class="box-img2">
-                        <img src="./img/Course-list/box13.png" alt="">
-                        <div class="more">了解更多</div>
+                    <div class="col-lg-8">
+                        <div class="row h-100">
+                            <div class="box-item col-lg-6 p-3">
+                                <div class="box-item-1 bg-white px-3 py-4 h-100">
+                                    <div class="card-title">1. 掌握文字能力</div>
+                                    <div>用文案創造出</div>
+                                    <div>消費者心中畫面感</div>
+                                    <div>拍攝手法分析與觀察</div>
+                                    <div class="box-img">
+                                        <img style="width: 94px;" src="./img/course-box03/box1.png" alt="">
+                                    </div>
+                                </div>
+
+                            </div>
+                            <div class="box-item col-lg-6 p-3">
+                                <div class="box-item-1 bg-white px-3 py-4 h-100">
+                                    <div class="card-title">2. 營造自己的風格差異性</div>
+                                    <div>從品牌屬性與定位</div>
+                                    <div>找出文案切入點</div>
+                                    <div>&emsp;</div>
+                                    <div class="box-img">
+                                        <img style="width: 68px;" src="./img/course-box03/box2.png" alt="">
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="box-item col-lg-6 p-3">
+                                <div style="background:#4A80AA;"
+                                    class="box-item-1 py-5 d-flex align-items-center justify-content-center h-100">
+                                    <div class="Group" style="background: #4A80AA;">
+                                        <div class="box-img">
+                                            <img style="width: 150px;" src="./img/people/Group209.svg" alt="">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="box-item col-lg-6 p-3">
+                                <div class="box-item-1 bg-white px-3 py-4 h-100">
+                                    <div class="card-title">3. 抓住受眾的心</div>
+                                    <div>找到自己的主要客群，</div>
+                                    <div>說他們想聽的</div>
+                                    <div class="box-img">
+                                        <img style="width: 108px;" src="./img/course-box03/box3.png" alt="">
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
                     </div>
                 </div>
-
             </div>
-        </div>
+        </section>
     </section>
+
+
+
     <!-- 課程大綱彈跳視窗 -電腦板-->
     <section id="Course-box01" class="container-fluid">
         <img class="close" src="./img/course-box/close.png" alt="">
@@ -413,46 +645,161 @@
         </div>
     </section>
     <!-- 手機板課程大綱 -->
-    <section id="mobile01" class="sec04 container-fluid" style="padding:0;margin: 0; ">
+    <!-- 課程一 -->
+    <section class="sec04 container-fluid" style="padding:0;margin: 0; ">
         <p>Essential Course Syllabus</p>
         <h1 class="title-main">精華課程大綱</h1>
         <hr class="line" style="opacity: 1;">
-        <div id="card-box" class="row">
-            <div id="sec01-1" class="card ">
-                <h1 class="card-title" style="font-weight: 900;">課程1手機拍片</h1>
-                <h2>知名媒體網站電視台台長</h2>
-                <div class="box-img01">
-                    <img src="./img/people/people1.jpg" alt="">
-                </div>
-                <h1  class="name" style="font-family:追奇手寫體;">Vincent</h1>
+        <h1 class="course-name">手機拍片，你可以學到</h1>
+        <hr class="line" style="opacity: 1;">
+        <div class="card-box" class="row">
+            <div class="card">
+                <div class="p-3">
+                    <h1 class="teacher-name pt-4" style="font-weight: 900;">課程1手機拍片</h1>
+                    <h2>知名媒體網站電視台台長</h2>
+                    <div class="box-img01">
+                        <img src="./img/people/people1.jpg" alt="">
+                    </div>
+                    <h1 class="name" style="font-family:追奇手寫體;">Vincent</h1>
+                </div>
                 <div class="box-img2" style="padding: 0;">
                     <img src="./img/Course-list/box11.png" style="padding-top:1vw" alt="">
-                    <div class="more">了解更多</div>
-
                 </div>
             </div>
-            <div id="sec01-2" class="card ">
-                <h1 class="card-title" style="font-weight: 900;">課程2數位行銷與社群</h1>
-                <h2>品牌行銷實戰經驗業務經理</h2>
-                <div class="box-img02">
-                    <img src="./img/people/people2.jpg" alt="">
+            <div class="card">
+                <div class="card-title">1.當紅短影音趨勢</div>
+                <div>現今當紅影音的</div>
+                <div>拍攝手法分析與觀察</div>
+                <div class="box-img">
+                    <img src="./img/course-box/box1.png" alt="">
                 </div>
-                <h1 class="name" style="font-family:追奇手寫體;">Ruby</h1>
-                <div class="box-img2">
-                    <img src="./img/Course-list/box12.png" style="padding-top:1vw" alt="">
-                    <div class="more">了解更多</div>
+            </div>
+            <div class="card">
+                <div class="card-title">2.隨時想拍就拍</div>
+                <div>手機攝影構圖、光線、運鏡</div>
+                <div>與器材應用演練</div>
+                <div class="box-img">
+                    <img src="./img/course-box/box2.png" alt="">
                 </div>
             </div>
-            <div id="sec01-3" class="card ">
-                <h1 class="card-title" style="font-weight: 900;">課程3文案撰寫</h1>
-                <h2>資深新聞媒體工作者</h2>
-                <div class="box-img03">
-                    <img src="./img/people/people3.jpg" alt="">
+            <div class="card">
+                <div class="card-title">3.我是影片主角</div>
+                <div>眼神、肢體、聲音表情、</div>
+                <div>面對鏡頭萬用公式</div>
+                <div class="box-img">
+                    <img src="./img/course-box/box3.png" alt="">
                 </div>
-                <h1 class="name" style="font-family:追奇手寫體;">Jennifer</h1>
-                <div class="box-img2">
-                    <img src="./img/Course-list/box13.png" style="padding-top:1vw" alt="">
-                    <div class="more">了解更多</div>
+            </div>
+            <div class="card">
+                <div class="card-title">4.從0到有</div>
+                <div>團隊合作發想影片故事</div>
+                <div>與撰寫分鏡腳本</div>
+                <div class="box-img">
+                    <img src="./img/course-box/box4.png" alt="">
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-title">5.畫龍點睛後製剪輯</div>
+                <div>實際剪輯演練及</div>
+                <div>選擇恰如其芬的配樂、音效</div>
+                <div class="box-img">
+                    <img src="./img/course-box/box5.png" alt="">
+                </div>
+            </div>
+        </div>
+        <img class="element1" src="./img/element1.png" alt="">
+    </section>
+    <!-- 課程二 -->
+    <section class="sec04 container-fluid" style="padding:0;margin: 0; ">
+        <h1 class="course-name">社群營造，你可以學到</h1>
+        <hr class="line" style="opacity: 1;">
+        <div class="card-box" class="row">
+            <div class="card">
+                <div class="p-3">
+                    <h1 class="teacher-name pt-4" style="font-weight: 900;">課程2社群營造</h1>
+                    <h2>資深數位廣告投手</h2>
+                    <div class="box-img01">
+                        <img src="./img/people/people2.jpg" alt="">
+                    </div>
+                    <h1 class="name" style="font-family:追奇手寫體;">Ruby</h1>
+                </div>
+                <div class="box-img2" style="padding: 0;">
+                    <img src="./img/Course-list/box11.png" style="padding-top:1vw" alt="">
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-title">1. 消費者網路行為洞察</div>
+                        <div>消費者購買決策流程、</div>
+                        <div>裝修歷程與需求概觀</div>
+                <div class="box-img">
+                    <img src="./img/course-box02/box1.png" alt="">
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-title">2. 數位行銷之趨勢</div>
+                        <div>社群營銷、內容視覺化、</div>
+                        <div>直播&KOL、UGC (User Generated Content)</div>
+                        <div>更貼近消費者的媒體內容</div>
+                <div style="padding-top: 5vw;" class="box-img">
+                    <img src="./img/course-box02/box2.png" alt="">
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-title">3. 數位行銷之執行</div>
+                        <div>產品、內容、平台、行銷</div>
+                <div class="box-img">
+                    <img src="./img/course-box02/box3.png" alt="">
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-title">4. 整合行銷操作案例分享</div>
+                <div>室內設計品牌定位規劃</div>
+                <div class="box-img">
+                    <img src="./img/course-box02/box4.png" alt="">
+                </div>
+            </div>
+        </div>
+        <img class="element1" src="./img/element1.png" alt="">
+    </section>
+    <!-- 課程三 -->
+    <section class="sec04 container-fluid" style="padding:0;margin: 0; ">
+        <h1 class="course-name">文案撰寫，你可以學到</h1>
+        <hr class="line" style="opacity: 1;">
+        <div class="card-box" class="row">
+            <div class="card">
+                <div class="p-3">
+                    <h1 class="teacher-name pt-4" style="font-weight: 900;">課程3文案撰寫</h1>
+                    <h2>資深新聞媒體工作者</h2>
+                    <div class="box-img01">
+                        <img src="./img/people/people3.jpg" alt="">
+                    </div>
+                    <h1 class="name" style="font-family:追奇手寫體;">Jennifer</h1>
+                </div>
+                <div class="box-img2" style="padding: 0;">
+                    <img src="./img/Course-list/box11.png" style="padding-top:1vw" alt="">
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-title">1. 掌握文字能力</div>
+                        <div>用文案創造出</div>
+                        <div>消費者心中畫面感</div>
+                <div class="box-img">
+                    <img src="./img/course-box03/box1.png" alt="">
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-title">2. 營造自己的風格差異性</div>
+                <div>從品牌屬性與定位</div>
+                <div>找出文案切入點</div>
+                <div class="box-img">
+                    <img src="./img/course-box03/box2.png" alt="">
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-title">3. 抓住受眾的心</div>
+                <div>說他們想聽的</div>
+                <div class="box-img">
+                    <img src="./img/course-box03/box3.png" alt="">
                 </div>
             </div>
         </div>
@@ -461,7 +808,6 @@
     <!-- 課程彈跳視窗-手機板 -->
     <section class="mobile01-1" class="container-fluid">
         <div class="mobile-box1">
-
             <img class="close" src="./img/course-box/close.png" alt="">
             <div class="Course-mobile01">
                 <h1>手機拍片，你可以學到</h1>
@@ -484,12 +830,10 @@
                         <div class="card-title">2.隨時想拍就拍</div>
                         <div>手機攝影構圖、光線、運鏡</div>
                         <div>與器材應用演練</div>
-                        <div style="opacity: 0;">1111</div>
-                        <div style="opacity: 0;">1111</div>
                         <div class="box-img">
                             <img src="./img/course-box/box2.png" alt="">
                         </div>
-                        <div class="box-img2">
+                        <div class="box-img">
 
                             <img src="./img/Course-list/box11.png" alt="">
                         </div>
@@ -776,8 +1120,7 @@
             <div><span style="font-weight: 900;">開課日期:</span>暫定為10月底，詳細日期將另行通知</div>
             <div><span style="font-weight: 900;">開課地點:</span>於LINE私密群組中即時LIVE開課!</div>
             <div><span style="font-weight: 900;">8/31前享早鳥價:</span>NT$30,000（可獲得幸福空間官網專欄及百萬粉專曝光，媒體價值等同於NT$80,000）</div>
-            <div><span style="font-weight: 900;">報名流程:請點擊<a style="color:#70b2a0;"
-                        target="_blank"
+            <div><span style="font-weight: 900;">報名流程:請點擊<a style="color:#70b2a0;" target="_blank"
                         href="https://p.ecpay.com.tw/3AEB8E0">繳費連結</a>(可刷卡/ATM匯款)完成付款後，填寫底下報名表並送出，將有專人與您聯繫!</span>
             </div>
         </div>
@@ -835,9 +1178,9 @@
                 <div><span style="font-weight: 900;">截止報名日:</span>2021/10/01 23:59 (逾時不候!)</div>
                 <div><span style="font-weight: 900;">開課日期:</span>暫定為10月底，詳細日期將另行通知</div>
                 <div><span style="font-weight: 900;">開課地點:</span>於LINE私密群組中即時LIVE開課!</div>
-                <div><span style="font-weight: 900;">8/31前享早鳥價:</span>NT$30,000（可獲得幸福空間官網專欄及百萬粉專曝光，媒體價值等同於NT$80,000）</div>
-                <div><span style="font-weight: 900;">報名流程:請點擊<a style="color:#70b2a0;"
-                            target="_blank"
+                <div><span style="font-weight: 900;">8/31前享早鳥價:</span>NT$30,000（可獲得幸福空間官網專欄及百萬粉專曝光，媒體價值等同於NT$80,000）
+                </div>
+                <div><span style="font-weight: 900;">報名流程:請點擊<a style="color:#70b2a0;" target="_blank"
                             href="https://p.ecpay.com.tw/3AEB8E0">繳費連結</a>(可刷卡/ATM匯款)完成付款後，填寫底下報名表並送出，將有專人與您聯繫!</span>
                 </div>
             </div>

style.css

@@ -130,7 +130,7 @@ body #btn-a #mobile-btn:hover {
   height: 4.5vw;
   width: 100vw !important;
   position: fixed;
-  z-index: 10;
+  z-index: 100;
 }
 
 @media screen and (max-width: 1024px) {
@@ -742,311 +742,148 @@ body #btn-a #mobile-btn:hover {
   }
 }
 
-#Course-list {
-  background: #f4fffc;
+#Course123-Des {
   text-align: center;
-  position: relative;
-  padding-bottom: 12vw !important;
 }
 
 @media screen and (max-width: 767px) {
-  #Course-list {
+  #Course123-Des {
     display: none;
   }
 }
 
-@media screen and (max-width: 1024px) {
-  #Course-list {
-    display: none;
-  }
-}
-
-#Course-list .parallax {
-  -webkit-transition: 1s;
-  transition: 1s;
-  -o-object-fit: contain;
-     object-fit: contain;
-  z-index: 0;
-}
-
-#Course-list .parallax .act {
-  position: absolute;
-  -webkit-transition: 0.5s;
-  transition: 0.5s;
-}
-
-#Course-list .parallax img {
-  position: absolute;
-  -webkit-transition: 0.3s;
-  transition: 0.3s;
-}
-
-#Course-list .parallax #act5 {
-  left: 12vw;
-  top: 33vw;
-  width: 15vw;
-  -webkit-transition: 0.5s;
-  transition: 0.5s;
-}
-
-@media screen and (max-width: 1024px) {
-  #Course-list .parallax #act5 {
-    width: 18vw;
-    top: 35vw;
-  }
-}
-
-#Course-list .parallax #act4 {
-  left: 13vw;
-  top: 13vw;
-  width: 18vw;
-  -webkit-transition: 0.5s;
-  transition: 0.5s;
-}
-
-@media screen and (max-width: 1024px) {
-  #Course-list .parallax #act4 {
-    width: 20vw;
-    top: 15vw;
-  }
-}
-
-#Course-list .parallax #act3 {
-  left: 22vw;
-  top: 8vw;
-  width: 10vw;
-  -webkit-transition: 0.5s;
-  transition: 0.5s;
-}
-
-@media screen and (max-width: 1024px) {
-  #Course-list .parallax #act3 {
-    width: 15vw;
-    top: 10vw;
-  }
-}
-
-#Course-list .parallax #act2 {
-  right: 9vw;
-  top: 32vw;
-  width: 19vw;
-  -webkit-transition: 0.5s;
-  transition: 0.5s;
-}
-
-@media screen and (max-width: 1024px) {
-  #Course-list .parallax #act2 {
-    width: 20vw;
-    top: 35vw;
-  }
+#Course123-Des .bg2 {
+  width: 80vw;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 60px;
 }
 
-#Course-list .parallax #act6 {
-  left: 25vw;
-  top: 13vw;
-  width: 35vw;
-  -webkit-transition: 0.5s;
-  transition: 0.5s;
+.Course-list {
+  text-align: center;
+  position: relative;
+  padding-bottom: 12vw !important;
 }
 
-@media screen and (max-width: 1024px) {
-  #Course-list .parallax #act6 {
-    width: 40vw;
-    top: 15vw;
+@media screen and (max-width: 767px) {
+  .Course-list {
+    display: none;
   }
 }
 
-#Course-list .parallax #act1 {
-  right: 14vw;
-  top: 20vw;
-  width: 15vw;
-  -webkit-transition: 0.5s;
-  transition: 0.5s;
-}
-
 @media screen and (max-width: 1024px) {
-  #Course-list .parallax #act1 {
-    width: 18vw;
-    right: 10vw;
-    top: 23vw;
+  .Course-list {
+    display: none;
   }
 }
 
-#Course-list #bg {
+.Course-list .bg2 {
   width: 80vw;
 }
 
 @media screen and (max-width: 1024px) {
-  #Course-list #bg {
+  .Course-list .bg2 {
     width: 90vw;
   }
 }
 
-#Course-list .title-main {
+.Course-list .title-main {
   font-family: 微軟正黑體;
   font-weight: 900;
   color: #646464;
 }
 
-#Course-list #Course-content {
+.Course-list .Course-content {
   width: 65vw;
   margin: 10px auto;
   padding-top: -10vw;
-  position: absolute;
-  top: 15vw;
-  left: 20vw;
 }
 
 @media screen and (max-width: 1024px) {
-  #Course-list #Course-content {
+  .Course-list .Course-content {
     top: 22vw;
   }
 }
 
-#Course-list #Course-content .box1,
-#Course-list #Course-content .box2,
-#Course-list #Course-content .box3 {
-  width: 20vw;
-  background: #fff;
-  border-radius: 8px;
-  margin: 10px;
-}
-
-#Course-list #Course-content .box1 #title1-2, #Course-list #Course-content .box1 #title2-2, #Course-list #Course-content .box1 #title3-2,
-#Course-list #Course-content .box2 #title1-2,
-#Course-list #Course-content .box2 #title2-2,
-#Course-list #Course-content .box2 #title3-2,
-#Course-list #Course-content .box3 #title1-2,
-#Course-list #Course-content .box3 #title2-2,
-#Course-list #Course-content .box3 #title3-2 {
-  font-family: 追奇手寫體;
-  padding-top: 2.9vw;
-  font-size: 45px;
-  color: #646464;
-}
-
-#Course-list #Course-content .box1 .box-img img,
-#Course-list #Course-content .box2 .box-img img,
-#Course-list #Course-content .box3 .box-img img {
-  padding: 3vw 1.6vw;
-  width: 12.5vw;
-  height: 15vw;
-  -o-object-fit: cover;
-     object-fit: cover;
-}
-
-#Course-list #Course-content .box1 .box-img2,
-#Course-list #Course-content .box2 .box-img2,
-#Course-list #Course-content .box3 .box-img2 {
+.Course-list .Course-content .Course-title {
   text-align: center;
+  font-family: 追奇手寫體;
+  font-size: 4rem;
+  color: #414346;
 }
 
-#Course-list #Course-content .box1 .box-img2 img,
-#Course-list #Course-content .box2 .box-img2 img,
-#Course-list #Course-content .box3 .box-img2 img {
-  width: 11vw;
-  height: 2vw;
-}
-
-#Course-list #Course-content .box1 .box-img2 .more,
-#Course-list #Course-content .box2 .box-img2 .more,
-#Course-list #Course-content .box3 .box-img2 .more {
-  margin-top: -25px;
-  font-weight: 900;
-  color: #fff;
-  cursor: pointer;
-}
-
-#Course-list #Course-content .box1 h1,
-#Course-list #Course-content .box2 h1,
-#Course-list #Course-content .box3 h1 {
-  padding-top: 2vw;
-  font-family: 微軟正黑體;
+.Course-list .Course-content .card-title {
   font-weight: 900;
-  font-size: 1.5rem;
-  color: #646464;
+  color: #414346;
+  font-size: 16px;
 }
 
 @media screen and (max-width: 1024px) {
-  #Course-list #Course-content .box1 h1,
-  #Course-list #Course-content .box2 h1,
-  #Course-list #Course-content .box3 h1 {
+  .Course-list .Course-content .card-title {
+    width: 18vw;
     font-size: 1rem;
   }
 }
 
-#Course-list #Course-content .box1 h2,
-#Course-list #Course-content .box2 h2,
-#Course-list #Course-content .box3 h2 {
-  font-size: 28px;
-  color: #646464;
-}
-
-@media screen and (max-width: 1024px) {
-  #Course-list #Course-content .box1 h2,
-  #Course-list #Course-content .box2 h2,
-  #Course-list #Course-content .box3 h2 {
-    font-size: 1.5rem;
-  }
+.Course-list .Course-content .box-item {
+  font-size: 14px;
 }
 
-#Course-list #Course-content .box1:hover h2 {
-  font-size: 1.3rem;
+.Course-list .Course-content .box-item .box-item-1 {
+  border-radius: 5px;
+  -webkit-box-shadow: 0px 5px 30px #B9CCC7;
+          box-shadow: 0px 5px 30px #B9CCC7;
 }
 
-#Course-list #Course-content .box1:hover .box-img {
-  margin-top: -57px;
-  text-align: center;
-  background-image: url(./img/people/people1.jpg);
-  background-size: 15vw 15vw;
-  background-repeat: no-repeat;
-  background-position: center center;
+.Course-list .Course-content .box-item .box-img {
+  padding-top: 10px;
+  height: 120px;
 }
 
-#Course-list #Course-content .box1:hover .box-img img {
-  opacity: 0;
+.Course-list .Course-content .box-item .box-img img {
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
-#Course-list #Course-content .box2:hover h2 {
-  font-size: 1.1rem;
+.Course-list .Course-content .Group {
+  padding-bottom: 25px;
 }
 
-#Course-list #Course-content .box2:hover .box-img {
-  margin-top: -57px;
+.Course-list .Course-content .teacher {
   text-align: center;
-  background-image: url(./img/people/people2.jpg);
-  background-size: 15vw 15vw;
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-
-#Course-list #Course-content .box2:hover .box-img img {
-  opacity: 0;
 }
 
-#Course-list #Course-content .box2:hover .box-img2 {
-  padding-top: 0vw;
+.Course-list .Course-content .teacher .techer-name {
+  font-family: 追奇手寫體;
+  font-size: 60px;
+  color: #646464;
+  margin-top: -10px;
+  -webkit-transform: matrix(1, -0.09, 0.09, 1, 0, 0);
+          transform: matrix(1, -0.09, 0.09, 1, 0, 0);
 }
 
-#Course-list #Course-content .box3:hover h2 {
-  font-size: 1.3rem;
+.Course-list .Course-content h1 {
+  font-family: 微軟正黑體;
+  font-weight: 900;
+  font-size: 28px;
+  color: #646464;
 }
 
-#Course-list #Course-content .box3:hover .box-img {
-  margin-top: -57px;
-  text-align: center;
-  background-image: url(./img/people/people3.jpg);
-  background-size: 15vw 15vw;
-  background-repeat: no-repeat;
-  background-position: center center;
+@media screen and (max-width: 1024px) {
+  .Course-list .Course-content h1 {
+    font-size: 1rem;
+  }
 }
 
-#Course-list #Course-content .box3:hover .box-img img {
-  opacity: 0;
+.Course-list .Course-content h2 {
+  font-size: 20px;
+  color: #646464;
 }
 
-#Course-list #Course-content .box3:hover .box-img2 {
-  padding-top: 0vw;
+@media screen and (max-width: 1024px) {
+  .Course-list .Course-content h2 {
+    font-size: 1.5rem;
+  }
 }
 
 #Course-box01,
@@ -1287,7 +1124,15 @@ body #btn-a #mobile-btn:hover {
   }
 }
 
-.sec04 #card-box {
+.sec04 .course-name {
+  padding-top: 5vw;
+  text-align: center;
+  font-family: 追奇手寫體;
+  font-size: 2rem;
+  color: #414346;
+}
+
+.sec04 .card-box {
   background-image: url(./img/Course-list/bg.png);
   background-size: cover;
   background-repeat: no-repeat;
@@ -1295,24 +1140,24 @@ body #btn-a #mobile-btn:hover {
 }
 
 @media screen and (min-width: 767px) {
-  .sec04 #card-box {
+  .sec04 .card-box {
     padding-top: 15vw;
   }
 }
 
-.sec04 #card-box .slick-slide {
+.sec04 .card-box .slick-slide {
   outline: none !important;
 }
 
-.sec04 #card-box .slick-dots {
+.sec04 .card-box .slick-dots {
   margin-top: 50px;
 }
 
-.sec04 #card-box .slick-dots li {
+.sec04 .card-box .slick-dots li {
   margin: 0 10px;
 }
 
-.sec04 #card-box .slick-dots button {
+.sec04 .card-box .slick-dots button {
   margin-top: 10px;
   display: block;
   width: 30px;
@@ -1324,82 +1169,76 @@ body #btn-a #mobile-btn:hover {
   text-indent: -9999px;
 }
 
-.sec04 #card-box .slick-dots li.slick-active button {
+.sec04 .card-box .slick-dots li.slick-active button {
   background-color: #fce49d;
 }
 
-.sec04 #card-box .card {
+.sec04 .card-box .card {
   text-align: center;
   margin: 0px 10px;
   position: relative;
   z-index: 2;
+  height: 64vh;
 }
 
-.sec04 #card-box .card .box-img2 .more {
-  font-weight: 900;
-  color: #fff;
-  margin-top: -25px;
+@media screen and (max-width: 350px) {
+  .sec04 .card-box .card {
+    height: 75vh;
+  }
 }
 
-.sec04 #card-box .card .card-title {
-  padding-top: 2rem;
+.sec04 .card-box .card .card-title {
+  padding-top: 20vw;
   color: #646464;
+  font-weight: 900;
+  font-size: 18px;
 }
 
-@media screen and (max-width: 1024px) {
-  .sec04 #card-box .card .card-title {
-    font-size: 1.5rem;
-  }
+.sec04 .card-box .card .box-img {
+  padding-top: 15vw;
 }
 
-@media screen and (max-width: 350px) {
-  .sec04 #card-box .card .card-title {
-    font-size: 1.8rem;
-  }
+.sec04 .card-box .card .box-img img {
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
-.sec04 #card-box .card h2 {
+.sec04 .card-box .card h2 {
   color: #646464;
   font-size: 1.3rem;
 }
 
 @media screen and (max-width: 1024px) {
-  .sec04 #card-box .card h2 {
+  .sec04 .card-box .card h2 {
     font-size: 1rem;
   }
 }
 
 @media screen and (max-width: 350px) {
-  .sec04 #card-box .card h2 {
+  .sec04 .card-box .card h2 {
     font-size: 1rem;
   }
 }
 
-.sec04 #card-box .card img {
+.sec04 .card-box .card img {
   margin: 0 auto;
 }
 
-.sec04 #card-box .card .box-img01 img,
-.sec04 #card-box .card .box-img02 img,
-.sec04 #card-box .card .box-img03 img {
-  width: 214px;
-  height: 214px;
+.sec04 .card-box .card .box-img01 img,
+.sec04 .card-box .card .box-img02 img,
+.sec04 .card-box .card .box-img03 img {
+  width: 180px;
+  height: 180px;
 }
 
 @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 {
+  .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;
@@ -1679,38 +1518,6 @@ body #btn-a #mobile-btn:hover {
   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,
@@ -2000,69 +1807,6 @@ body #btn-a #mobile-btn:hover {
   }
 }
 
-.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: 20vw;
-  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;
-  }
-}
-
 #course-schedule {
   background: #f4fffc;
   text-align: center;

style.scss

@@ -111,7 +111,7 @@ body {
     height: 4.5vw;
     width: 100vw !important;
     position: fixed;
-    z-index: 10;
+    z-index: 100;
     @media screen and(max-width:$table) {
         height: 8vw;
     }
@@ -199,7 +199,7 @@ body {
     }
 }
 // light-box
-#light-box{
+#light-box {
     background-color: rgba(0, 0, 0, 0.8);
     width: 100vw;
     height: 100vh;
@@ -207,7 +207,7 @@ body {
     padding: 100px 50px 100px 50px;
     position: fixed;
     top: 0vw;
-   
+
     @media screen and(max-width:$table) {
         padding: 100px 20px 100px 20px;
     }
@@ -217,31 +217,30 @@ body {
         top: 4.5vw;
         @media screen and(max-width:$moblie) {
             right: 1vw;
-            top: 33vw;;
+            top: 33vw;
         }
     }
-    .light-box1{
+    .light-box1 {
         text-align: center;
         padding-bottom: 5vw;
         @media screen and(min-width:$desktop) {
             width: 60vw;
             margin: 0 auto;
-         }
-       
-        .light-box{
+        }
+
+        .light-box {
             object-fit: cover;
             @media screen and(max-width:$moblie) {
-               display: none;
+                display: none;
             }
-
         }
 
-        .light-box-m{
+        .light-box-m {
             padding-top: 15vw;
             width: 90vw;
             @media screen and(min-width:$desktop) {
                 display: none;
-             }
+            }
         }
     }
 }
@@ -258,18 +257,14 @@ body {
     @media screen and(max-width:$moblie) {
         background-image: none;
         // height: 88vh;
- 
-      
     }
     @media screen and(max-width:350px) {
         height: 90vh;
     }
 
-   
     // @media screen and(min-height:823px) {
     //     height: 75vh;
     // }
-    
 
     .banner1 {
         width: 85vw;
@@ -279,13 +274,13 @@ body {
         a {
             text-decoration: none;
         }
-       
+
         @media screen and(max-width:$moblie) {
             width: 100vw;
             padding-bottom: 40vh;
             padding-top: 20vw;
         }
-        
+
         @media screen and(max-width:350px) {
             padding-top: 20vw;
         }
@@ -293,11 +288,11 @@ body {
         #mobilecover {
             object-fit: cover;
             width: 120vw;
-            margin:0 auto ;
+            margin: 0 auto;
             display: block;
             position: absolute;
             top: 35vw;
-          right:-5vw;
+            right: -5vw;
             z-index: -1;
             @media screen and(min-width:$desktop) {
                 display: none;
@@ -308,7 +303,7 @@ body {
             }
             #btn-a {
                 text-decoration: none;
-        
+
                 #mobile-btn {
                     display: block;
                     margin: 0 auto;
@@ -334,7 +329,6 @@ body {
                     display: none;
                 }
             }
-            
         }
         h1 {
             font-size: 28px;
@@ -569,9 +563,20 @@ body {
         }
     }
 }
+#Course123-Des{
+    text-align: center;
+    @media screen and(max-width:$moblie) {
+        display: none;
+    }
+    // 背景圖片
+    .bg2{
+        width: 80vw;
+        position: sticky;
+        top:60px;
+    }
+}
 // 電腦版課程大綱
-#Course-list {
-    background: $bgcolor;
+.Course-list {
     text-align: center;
     position: relative;
     padding-bottom: 12vw !important;
@@ -581,82 +586,7 @@ body {
     @media screen and(max-width:$table) {
         display: none;
     }
-    .parallax {
-        transition: 1s;
-        object-fit: contain;
-        z-index: 0;
-
-        .act {
-            position: absolute;
-            transition: 0.5s;
-        }
-        img {
-            position: absolute;
-            transition: 0.3s;
-        }
-        #act5 {
-            left: 12vw;
-            top: 33vw;
-            width: 15vw;
-            transition: 0.5s;
-            @media screen and(max-width:$table) {
-                width: 18vw;
-                top: 35vw;
-            }
-        }
-        #act4 {
-            left: 13vw;
-            top: 13vw;
-            width: 18vw;
-            transition: 0.5s;
-            @media screen and(max-width:$table) {
-                width: 20vw;
-                top: 15vw;
-            }
-        }
-        #act3 {
-            left: 22vw;
-            top: 8vw;
-            width: 10vw;
-            transition: 0.5s;
-            @media screen and(max-width:$table) {
-                width: 15vw;
-                top: 10vw;
-            }
-        }
-        #act2 {
-            right: 9vw;
-            top: 32vw;
-            width: 19vw;
-            transition: 0.5s;
-            @media screen and(max-width:$table) {
-                width: 20vw;
-                top: 35vw;
-            }
-        }
-        #act6 {
-            left: 25vw;
-            top: 13vw;
-            width: 35vw;
-            transition: 0.5s;
-            @media screen and(max-width:$table) {
-                width: 40vw;
-                top: 15vw;
-            }
-        }
-        #act1 {
-            right: 14vw;
-            top: 20vw;
-            width: 15vw;
-            transition: 0.5s;
-            @media screen and(max-width:$table) {
-                width: 18vw;
-                right: 10vw;
-                top: 23vw;
-            }
-        }
-    }
-    #bg {
+    .bg2 {
         width: 80vw;
         @media screen and(max-width:$table) {
             width: 90vw;
@@ -668,159 +598,72 @@ body {
         color: $title-color;
     }
 
-    #Course-content {
+    .Course-content {
         width: 65vw;
         margin: 10px auto;
         padding-top: -10vw;
-        position: absolute;
-        top: 15vw;
-        left: 20vw;
         @media screen and(max-width:$table) {
             top: 22vw;
         }
-        .box1,
-        .box2,
-        .box3 {
-            width: 20vw;
-            background: #fff;
-            border-radius: 8px;
-            margin: 10px;
-            #title1-2, #title2-2, #title3-2{
-                font-family: 追奇手寫體;
-                padding-top: 2.9vw;
-                font-size: 45px;
-                color: $title-color;
+        .Course-title{
+            text-align: center;
+            font-family: 追奇手寫體;
+            font-size: 4rem;
+            color: #414346;
+        }
+        .card-title {
+            font-weight: 900;
+            color: #414346;
+            font-size: 16px;
+            @media screen and(max-width:$table) {
+                width: 18vw;
+                font-size: 1rem;
             }
-            // &:hover {
-            //     h2 {
-            //         font-size: 1.3rem;
-            //     }
-
-            //     .box-img {
-            //         text-align: center;
-            //         img {
-            //             opacity: 0;
-            //         }
-            //         background-image: url(./img/people.png);
-            //         background-size: 15vw 15vw;
-            //         background-repeat: no-repeat;
-            //         background-position: center center;
-            //     }
-            //     .box-img2 {
-            //         padding-top: 2.7vw;
-            //     }
-            // }
-            .box-img {
-                img {
-                    padding: 3vw 1.6vw;
-                    width: 12.5vw;
-                    height: 15vw;
+        }
+        .box-item{
+           font-size: 14px;
+            .box-item-1{
+                border-radius: 5px;
+                box-shadow: 0px 5px 30px #B9CCC7;
+            }
+            .box-img{
+                padding-top: 10px;
+                height: 120px;
+                img{
                     object-fit: cover;
                 }
-            }
-            .box-img2 {
                
-                text-align: center;
-
-                img {
-                    width: 11vw;
-                    height: 2vw;
-                }
-                .more {
-                    margin-top: -25px;
-                    font-weight: 900;
-                    color: #fff;
-                    cursor: pointer;
-                }
             }
-            h1 {
-                padding-top: 2vw;
-                font-family: 微軟正黑體;
-                font-weight: 900;
-                font-size: 1.5rem;
-                color: $title-color;
-                @media screen and(max-width:$table) {
-                    font-size: 1rem;
-                }
-            }
-            h2 {
-                font-size: 28px;
+         
+        }
+        .Group{
+            padding-bottom: 25px;
+        }
+        .teacher{
+            text-align: center;
+            .techer-name{
+                font-family: 追奇手寫體;
+                font-size: 60px;
                 color: $title-color;
-                @media screen and(max-width:$table) {
-                    font-size: 1.5rem;
-                }
+              margin-top: -10px;
+                transform: matrix(1, -0.09, 0.09, 1, 0, 0);
             }
-        }
 
-        .box1{
-            &:hover {
-               
-                h2 {
-                    font-size: 1.3rem;
-                }
-
-                .box-img {
-                   margin-top: -57px;
-                    text-align: center;
-                  
-                    img {
-                        opacity: 0;
-                    }
-                    background-image: url(./img/people/people1.jpg);
-                    background-size:15vw 15vw;
-                    background-repeat: no-repeat;
-                    background-position: center center;
-                  
-                    
-                }
-                
-            }
         }
-        .box2{
-            &:hover {
-                h2 {
-                    font-size: 1.1rem;
-                }
-
-                .box-img {
-                    margin-top: -57px;
-                    text-align: center;
-                    img {
-                        opacity: 0;
-                    }
-                    background-image: url(./img/people/people2.jpg);
-                    background-size: 15vw 15vw;
-                    background-repeat: no-repeat;
-                    background-position: center center;
-                  
-                }
-                .box-img2 {
-                    padding-top: 0vw;
-                }
+        h1 {
+            font-family: 微軟正黑體;
+            font-weight: 900;
+            font-size: 28px;
+            color: $title-color;
+            @media screen and(max-width:$table) {
+                font-size: 1rem;
             }
         }
-        .box3{
-            &:hover {
-                h2 {
-                    font-size: 1.3rem;
-                }
-
-                .box-img {
-                    margin-top: -57px;
-                    text-align: center;
-                   
-                    img {
-                        opacity: 0;
-                    }
-                    background-image: url(./img/people/people3.jpg);
-                    background-size: 15vw 15vw;
-                    background-repeat: no-repeat;
-                    background-position: center center;
-                 
-                }
-                .box-img2 {
-                    padding-top: 0vw;
-                }
+        h2 {
+            font-size: 20px;
+            color: $title-color;
+            @media screen and(max-width:$table) {
+                font-size: 1.5rem;
             }
         }
     }
@@ -895,7 +738,7 @@ body {
                     img {
                         padding: 10px;
                         margin: 50px auto;
-                        height:8vw;
+                        height: 8vw;
                         object-fit: cover;
                         @media screen and(max-width:$table) {
                             width: 15vw;
@@ -926,6 +769,7 @@ body {
         width: 25vw !important;
     }
 }
+
 // 手機板課程大綱
 .sec04 {
     text-align: center;
@@ -947,8 +791,14 @@ body {
             top: 180vw;
         }
     }
-
-    #card-box {
+    .course-name {
+        padding-top: 5vw;
+        text-align: center;
+        font-family: 追奇手寫體;
+        font-size: 2rem;
+        color: #414346;
+    }
+    .card-box {
         background-image: url(./img/Course-list/bg.png);
         background-size: cover;
         background-repeat: no-repeat;
@@ -989,26 +839,22 @@ body {
             margin: 0px 10px;
             position: relative;
             z-index: 2;
-            .box-img2 {
-                .more {
-                    font-weight: 900;
-                    color: #fff;
-                    margin-top: -25px;
-                }
-            }
-            @media screen and(max-width:$table) {
+            height:64vh;
+            @media screen and(max-width:350px) {
+                height:75vh;
             }
             .card-title {
-                padding-top: 2rem;
+                padding-top:20vw;
                 color: $title-color;
-                @media screen and(max-width:$table) {
-                    font-size: 1.5rem;
-                }
-                @media screen and(max-width:350px) {
-                    font-size: 1.8rem;
+                font-weight: 900;
+                font-size: 18px;
+            }
+            .box-img{
+                padding-top: 15vw;
+                img{
+                    object-fit: cover;
                 }
             }
-
             h2 {
                 color: $title-color;
                 font-size: 1.3rem;
@@ -1026,8 +872,8 @@ body {
             .box-img02,
             .box-img03 {
                 img {
-                    width: 214px;
-                    height: 214px;
+                    width: 180px;
+                    height: 180px;
                     @media screen and(min-width:768px) {
                         width: 20vw;
                     }
@@ -1035,11 +881,6 @@ body {
             }
         }
     }
-    .name {
-        @media screen and(max-width:$table) {
-            font-size: 3rem;
-        }
-    }
 
     @media screen and(min-width:1000px) {
         display: none;
@@ -1126,9 +967,6 @@ body {
                 font-family: 追奇手寫體;
                 font-size: 2rem;
                 color: #414346;
-                @media screen and(max-width:$table) {
-                  
-                }
                 @media screen and(max-width:400px) {
                     font-size: 1.5rem;
                 }
@@ -1144,9 +982,6 @@ body {
                 .card {
                     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;
                     }
@@ -1184,152 +1019,11 @@ body {
                             }
                         }
                     }
-                    .box-img2 {
-                        img {
-                            padding-top: 20vw;
-                            width: 40vw;
-                            @media screen and(min-width:767px) {
-                                padding-top: 5vw;
-                            }
-                        }
-                    }
                 }
             }
         }
     }
 }
-// .mobile01-2 {
-//     .mobile-box2 {
-//         .Course-mobile01 {
-//             .card-box-2 {
-//                 .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;
-//                     }
-//                     @media screen and(max-width:350px) {
-//                         font-size: 0.7rem;
-//                     }
-
-//                     .box-img2 {
-//                         img {
-//                             padding-top: 18vw;
-//                             width: 40vw;
-//                             @media screen and(min-width:767px) {
-//                                 padding-top: 5vw;
-//                             }
-//                             @media screen and(max-width:$moblie) {
-//                                 padding-top: 20vw;
-//                             }
-//                             @media screen and(max-width:350px) {
-//                                 padding-top: 15vw;
-//                             }
-//                         }
-//                     }
-//                     img {
-//                         margin: 0 auto;
-//                     }
-//                     .box-img {
-//                         img {
-//                             // padding: 20vw 12vw;
-//                             object-fit: cover;
-//                             padding: 15vw;
-//                             margin: 0 auto;
-//                             @media screen and(max-width:350px) {
-//                                 padding: 15vw;
-//                             }
-//                         }
-//                     }
-//                     .card-title {
-//                         padding-top: 1rem;
-//                         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: 1rem;
-//                         }
-
-//                         @media screen and(max-width:400px) {
-//                             font-size: 1rem;
-//                         }
-//                     }
-//                 }
-//             }
-//         }
-//     }
-// }
-
-// .mobile01-3 {
-//     .mobile-box3 {
-//         .Course-mobile01 {
-//             .slick-dots {
-//                 width: 85%;
-//                 @media screen and(max-width:350px) {
-//                     width: 95%;
-//                 }
-//             }
-//             .card-box-3 {
-//                 @media screen and(min-width:$table) {
-//                     height: 691px;
-//                 }
-//                 .card {
-//                     .box-img {
-//                         img {
-//                             width: 43vw;
-//                             height: 50vw;
-//                             padding: 15vw 12vw;
-//                             @media screen and(max-width:350px) {
-//                                 padding: 10vw 10vw;
-//                             }
-//                         }
-//                     }
-//                     .box-img2 {
-//                         img {
-//                             padding-top: 20vw;
-//                             width: 40vw;
-//                             @media screen and(max-width:$table) {
-//                                 padding-top: 4vw;
-//                             }
-//                             @media screen and(max-width:$moblie) {
-//                                 padding-top: 20vw;
-//                             }
-
-//                             @media screen and(max-width:350px) {
-//                                 padding-top: 5vw;
-//                             }
-//                         }
-//                     }
-//                     .card-title {
-//                         padding-top: 1rem;
-//                         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;
-//                         }
-//                     }
-//                 }
-//             }
-//         }
-//     }
-// }
 // 電腦版上課日程
 #course-schedule {
     background: $bgcolor;
@@ -1473,8 +1167,6 @@ body {
             outline: none !important;
         }
         .slick-dots {
-     
-
             li {
                 margin: 0 10px;
             }
@@ -1520,15 +1212,14 @@ body {
             }
         }
         .box {
-         
             .boxs-chedule1 {
-              padding-bottom: 5vw;
+                padding-bottom: 5vw;
                 h1 {
                     color: #70b2a0;
                     text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.3);
                 }
             }
-          
+
             .boxs-chedule1,
             .boxs-chedule2 {
                 margin: 0px 30px;
@@ -1577,8 +1268,8 @@ body {
         top: 15vw;
         left: 20vw;
         width: 55vw;
-        
-        span{
+
+        span {
             font-size: 1.5rem;
         }
         @media screen and(max-width:$table) {
@@ -1872,14 +1563,10 @@ body {
         @media screen and(max-width:$moblie) {
             width: 100vw;
             text-align: center;
-           
         }
         @media screen and(max-width:400px) {
-        
-           
             width: 100vw;
         }
-        
     }
     li {
         display: inline-block;
@@ -1894,7 +1581,6 @@ body {
         @media screen and(max-width:$moblie) {
             font-size: 12px;
             text-align: center;
-           
         }
         @media screen and(max-width:400px) {
             font-size: 12px;