內容修改

goto.js

@@ -355,14 +355,14 @@ $(function () {
 
   $(".box2").hover(
     function () {
-      $("#title2").html('課程2社群營造');
+      $("#title2").html('課程2數位行銷與社群');
       $("#title2-1").html('資深數位廣告投手');
 
     },
 
     function () {
       $("#title2").html('課程2');
-      $("#title2-1").html('社群營造');
+      $("#title2-1").html('數位行銷與社群');
     })
 });
 $(function () {

index.html

@@ -177,7 +177,7 @@
                 </div>
                 <div class="box2 col-12 col-md-4">
                     <h1 id="title2">課程2</h1>
-                    <h2 id="title2-1">社群營造</h2>
+                    <h2 id="title2-1">數位行銷與社群</h2>
                     <div id="boximg1" class="box-img">
                         <img src="./img/Course-list/box2.png" alt="">
                     </div>
@@ -215,7 +215,7 @@
                     <div>現今當紅影音的</div>
                     <div>拍攝手法分析與觀察</div>
                     <div class="box-img">
-                        <img src="./img/course-box/box1.png" alt="">
+                        <img  src="./img/course-box/box1.png" alt="">
                     </div>
                     <div class="box-img2">
 
@@ -227,7 +227,7 @@
                     <div>手機攝影構圖、光線、運鏡</div>
                     <div>與器材應用演練</div>
                     <div class="box-img">
-                        <img src="./img/course-box/box2.png" alt="">
+                        <img  src="./img/course-box/box2.png" alt="">
                     </div>
                     <div class="box-img2">
 
@@ -239,7 +239,7 @@
                     <div>眼神、肢體、聲音表情、</div>
                     <div>面對鏡頭萬用公式</div>
                     <div class="box-img">
-                        <img src="./img/course-box/box3.png" alt="">
+                        <img   src="./img/course-box/box3.png" alt="">
                     </div>
                     <div class="box-img2">
 
@@ -251,7 +251,7 @@
                     <div>團隊合作發想影片故事</div>
                     <div>與撰寫分鏡腳本</div>
                     <div class="box-img">
-                        <img src="./img/course-box/box4.png" alt="">
+                        <img   src="./img/course-box/box4.png" alt="">
                     </div>
                     <div class="box-img2">
 
@@ -263,7 +263,7 @@
                     <div>實際剪輯演練及</div>
                     <div>選擇恰如其分的配樂、音效</div>
                     <div class="box-img">
-                        <img src="./img/course-box/box5.png" alt="">
+                        <img  src="./img/course-box/box5.png" alt="">
                     </div>
                     <div class="box-img2">
                         <img src="./img/Course-list/box11.png" alt="">
@@ -275,16 +275,17 @@
     <section id="Course-box02" class="container-fluid">
         <img class="close" src="./img/course-box/close.png" alt="">
         <div class="Course-box01">
-            <h1>社群營造，你可以學到</h1>
+            <h1>數位行銷與社群，你可以學到</h1>
             <hr class="line" style="opacity: 1;">
             <div id="box02" class="row">
                 <div class="card col-lg-2">
-                    <div class="card-title">1. 市場狀況</div>
-                    <div>國人擁有社群帳號比例、</div>
-                    <div>使用社群帳號頻率</div>
+                    <div class="card-title">1. 消費者網路行為洞察</div>
+                    <div>消費者購買決策流程、</div>
+                    <div>裝修歷程與需求概觀</div>
+                    <div style="opacity: 0;">1111</div>
                     <div style="opacity: 0;">1111</div>
                     <div class="box-img">
-                        <img style="width: 12vw;" src="./img/course-box02/box1.png" alt="">
+                        <img  src="./img/course-box02/box1.png" alt="">
                     </div>
                     <div class="box-img2">
 
@@ -292,23 +293,25 @@
                     </div>
                 </div>
                 <div class="card col-lg-2">
-                    <div class="card-title">2. FB經營重要性</div>
-                    <div>使用人數眾多、觸及率、</div>
-                    <div>與實體結合度、帶動業績成長</div>
-                    <div style="opacity: 0;">1111</div>
+                    <div class="card-title">數位行銷之趨勢</div>
+                    <div>社群營銷、內容視覺化、</div>
+                    <div>直播&KOL、UGC (User Generated Content)、</div>
+                    <div>更貼近消費者的媒體內容</div>
+                 
                     <div class="box-img">
-                        <img src="./img/course-box02/box2.png" alt="">
+                        <img  src="./img/course-box02/box2.png" alt="">
                     </div>
-                    <div class="box-img2">
+                    <div class="box-img2" >
 
                         <img src="./img/Course-list/box12.png" alt="">
                     </div>
                 </div>
                 <div class="card col-lg-2">
-                    <div class="card-title">3. 經營目的</div>
-                    <div>品牌經營、社群互動、</div>
-                    <div>產品推廣、客戶服務、</div>
-                    <div>虛實整合</div>
+                    <div class="card-title">3. 數位行銷之執行</div>
+                    <div>產品、內容、平台、行銷</div>
+                    <div style="opacity: 0;">1111</div>
+                    <div style="opacity: 0;">1111</div>
+                    <div style="opacity: 0;">1111</div>
                     <div class="box-img">
                         <img src="./img/course-box02/box3.png" alt="">
                     </div>
@@ -318,12 +321,13 @@
                     </div>
                 </div>
                 <div class="card col-lg-2">
-                    <div class="card-title">4. 經營規劃</div>
-                    <div>主題規劃、小編個性、</div>
-                    <div>ｃｕｅ表</div>
+                    <div class="card-title">4. 整合行銷操作案例分享</div>
+                    <div>室內設計品牌定位規劃</div>
+                    <div style="opacity: 0;">1111</div>
+                    <div style="opacity: 0;">1111</div>
                     <div style="opacity: 0;">1111</div>
                     <div class="box-img">
-                        <img src="./img/course-box02/box4.png" alt="">
+                        <img  src="./img/course-box02/box4.png" alt="">
                     </div>
                     <div class="box-img2">
 
@@ -335,8 +339,9 @@
                     <div>品牌＆產品貼文、</div>
                     <div>選心情＆時事貼文、</div>
                     <div>互動貼文、活動貼文</div>
+                    <div style="opacity: 0;">1111</div>
                     <div class="box-img">
-                        <img src="./img/course-box02/box5.png" alt="">
+                        <img  src="./img/course-box02/box5.png" alt="">
                     </div>
                     <div class="box-img2">
                         <img src="./img/Course-list/box12.png" alt="">
@@ -356,11 +361,11 @@
                     <div>用文案創造出</div>
                     <div>消費者心中畫面感</div>
                     <div class="box-img">
-                        <img src="./img/course-box03/box1.png" alt="">
+                        <img   src="./img/course-box03/box1.png" alt="">
                     </div>
                     <div class="box-img2">
 
-                        <img src="./img/course-box03/box13.png" alt="">
+                        <img  src="./img/course-box03/box13.png" alt="">
                     </div>
                 </div>
                 <div class="card col-lg-5">
@@ -368,7 +373,7 @@
                     <div>從品牌屬性與定位</div>
                     <div>找出文案切入點</div>
                     <div class="box-img">
-                        <img src="./img/course-box03/box2.png" alt="">
+                        <img    src="./img/course-box03/box2.png" alt="">
                     </div>
                     <div class="box-img2">
 
@@ -380,7 +385,7 @@
                     <div>找到自己的主要客群，</div>
                     <div>說他們想聽的</div>
                     <div class="box-img">
-                        <img src="./img/course-box03/box3.png" alt="">
+                        <img  src="./img/course-box03/box3.png" alt="">
                     </div>
                     <div class="box-img2">
 
@@ -449,8 +454,10 @@
                         <div class="card-title">1.當紅短影音趨勢</div>
                         <div>現今當紅影音的</div>
                         <div>拍攝手法分析與觀察</div>
+                        <div style="opacity: 0;">1111</div>
+                        <div style="opacity: 0;">1111</div>
                         <div class="box-img">
-                            <img style="width: 48vw;" src="./img/course-box/box1.png" alt="">
+                            <img  src="./img/course-box/box1.png" alt="">
                         </div>
                         <div class="box-img2">
                             <img src="./img/Course-list/box11.png" alt="">
@@ -460,8 +467,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 style="width: 48vw;" src="./img/course-box/box2.png" alt="">
+                            <img  src="./img/course-box/box2.png" alt="">
                         </div>
                         <div class="box-img2">
 
@@ -472,8 +481,10 @@
                         <div class="card-title">3.我是影片主角</div>
                         <div>眼神、肢體、聲音表情、</div>
                         <div>面對鏡頭萬用公式</div>
+                        <div style="opacity: 0;">1111</div>
+                        <div style="opacity: 0;">1111</div>
                         <div class="box-img">
-                            <img style="width: 45vw;" src="./img/course-box/box3.png" alt="">
+                            <img  src="./img/course-box/box3.png" alt="">
                         </div>
                         <div class="box-img2">
 
@@ -484,6 +495,8 @@
                         <div class="card-title">4.從0到有</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/box4.png" alt="">
                         </div>
@@ -496,8 +509,10 @@
                         <div class="card-title">5.畫龍點睛後製剪輯</div>
                         <div>實際剪輯演練及</div>
                         <div>選擇恰如其芬的配樂、音效</div>
+                        <div style="opacity: 0;">1111</div>
+                        <div style="opacity: 0;">1111</div>
                         <div class="box-img">
-                            <img style="width: 48vw;" src="./img/course-box/box5.png" alt="">
+                            <img  src="./img/course-box/box5.png" alt="">
                         </div>
                         <div class="box-img2">
 
@@ -512,26 +527,27 @@
         <div class="mobile-box2">
             <img class="close" src="./img/course-box/close.png" alt="">
             <div class="Course-mobile01">
-                <h1>社群營造，你可以學到</h1>
+                <h1>數位行銷與社群，你可以學到</h1>
                 <hr class="line" style="opacity: 1;">
                 <div class="card-box-2">
                     <div class="card col-8">
-                        <div class="card-title">1. 市場狀況</div>
-                        <div>國人擁有社群帳號比例、</div>
-                        <div>使用社群帳號頻率</div>
+                        <div class="card-title">1. 消費者網路行為洞察</div>
+                        <div>消費者購買決策流程、</div>
+                        <div>裝修歷程與需求概觀</div>
+                        <div style="opacity: 0;">1111</div>
                         <div style="opacity: 0;">1111</div>
                         <div class="box-img">
-                            <img style="width: 50vw;" src="./img/course-box02/box1.png" alt="">
+                            <img src="./img/course-box02/box1.png" alt="">
                         </div>
                         <div class="box-img2">
                             <img src="./img/Course-list/box12.png" alt="">
                         </div>
                     </div>
                     <div class="card col-8">
-                        <div class="card-title">2. FB經營重要性</div>
-                        <div>使用人數眾多、觸及率、</div>
-                        <div>與實體結合度、帶動業績成長</div>
-                        <div style="opacity: 0;">1111</div>
+                        <div class="card-title">2. 數位行銷之趨勢</div>
+                        <div>社群營銷、內容視覺化、</div>
+                        <div>直播&KOL、UGC (User Generated Content)</div>
+                        <div >更貼近消費者的媒體內容</div>
                         <div class="box-img">
                             <img src="./img/course-box02/box2.png" alt="">
                         </div>
@@ -541,10 +557,11 @@
                         </div>
                     </div>
                     <div class="card col-8">
-                        <div class="card-title">3. 經營目的</div>
-                        <div>品牌經營、社群互動、</div>
-                        <div>產品推廣、客戶服務、</div>
-                        <div>虛實整合</div>
+                        <div class="card-title">3. 數位行銷之執行</div>
+                        <div>產品、內容、平台、行銷</div>
+                        <div style="opacity: 0;">1111</div>
+                        <div style="opacity: 0;">1111</div>
+                        <div style="opacity: 0;">1111</div>
                         <div class="box-img">
                             <img src="./img/course-box02/box3.png" alt="">
                         </div>
@@ -554,12 +571,13 @@
                         </div>
                     </div>
                     <div class="card col-8">
-                        <div class="card-title">4. 經營規劃</div>
-                        <div>主題規劃、小編個性、</div>
-                        <div>ｃｕｅ表</div>
+                        <div class="card-title">4. 整合行銷操作案例分享</div>
+                        <div>室內設計品牌定位規劃</div>
+                        <div style="opacity: 0;">1111</div>
+                        <div style="opacity: 0;">1111</div>
                         <div style="opacity: 0;">1111</div>
                         <div class="box-img">
-                            <img style="width: 50vw;"  src="./img/course-box02/box4.png" alt="">
+                            <img   src="./img/course-box02/box4.png" alt="">
                         </div>
                         <div class="box-img2">
 
@@ -571,8 +589,9 @@
                         <div>品牌＆產品貼文、</div>
                         <div>選心情＆時事貼文、</div>
                         <div>互動貼文、活動貼文</div>
+                        <div style="opacity: 0;">1111</div>
                         <div class="box-img">
-                            <img style="width: 50vw;" src="./img/course-box02/box5.png" alt="">
+                            <img  src="./img/course-box02/box5.png" alt="">
                         </div>
                         <div class="box-img2">
                             <img src="./img/Course-list/box12.png" alt="">
@@ -592,11 +611,12 @@
                 <div class="card-box-3" class="row">
                     <div class="card col-7">
                         <div class="card-title">1. 掌握文字能力</div>
-                        <div style="opacity:0;font-size: 20px;">2.</div>
                         <div>用文案創造出</div>
                         <div>消費者心中畫面感</div>
+                        <div style="opacity: 0;">1111</div>
+                        <div style="opacity: 0;">1111</div>
                         <div class="box-img">
-                            <img style="width: 48vw;" src="./img/course-box03/box1.png" alt="">
+                            <img  src="./img/course-box03/box1.png" alt="">
                         </div>
                         <div class="box-img2">
                             <img src="./img/Course-list/box13.png" alt="">
@@ -606,9 +626,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 style="width: 48vw;" src="./img/course-box03/box2.png" alt="">
+                            <img  src="./img/course-box03/box2.png" alt="">
                         </div>
                         <div class="box-img2">
 
@@ -617,11 +638,12 @@
                     </div>
                     <div class="card col-7">
                         <div class="card-title">3. 抓住受眾的心</div>
-                        <div style="opacity:0;font-size: 20px;">2.</div>
-                        <div>找到自己的主要客群，</div>
                         <div>說他們想聽的</div>
+                        <div style="opacity: 0;">1111</div>
+                        <div style="opacity: 0;">1111</div>
+                        <div style="opacity: 0;">1111</div>
                         <div class="box-img">
-                            <img style="width: 48vw;" src="./img/course-box03/box3.png" alt="">
+                            <img  src="./img/course-box03/box3.png" alt="">
                         </div>
                         <div class="box-img2">
 
@@ -740,7 +762,7 @@
     <!-- 電腦版收款資訊 -->
     <section id="information">
 
-        <p>Collection Information + Customer Service Information</p>
+        <p>  Registration Information</p>
         <h1 class="title-main">報名資訊</h1>
         <hr class="line" style="opacity: 1;">
         <img id="bg3" src="./img/information/bg3.png" alt="">
@@ -795,7 +817,7 @@
     </section>
     <!-- 手機板收款資訊 -->
     <section id="information-mobile">
-        <p>Collection Information + Customer Service Information</p>
+        <p>  Registration Information</p>
         <h1 class="title-main">報名資訊</h1>
         <hr class="line" style="opacity: 1;">
         <div class="information   container-fluid" style="margin: 0;">

style.css

@@ -11,7 +11,7 @@
 
 @font-face {
   font-family: 追奇手寫體;
-  src: url(./drechifont-proportional.woff);
+  src: url(./drechifont-Proportional3.woff);
   font-weight: 900;
 }
 
@@ -861,7 +861,7 @@ body #btn-a #mobile-btn:hover {
 #Course-list #Course-content .box1:hover .box-img2,
 #Course-list #Course-content .box2:hover .box-img2,
 #Course-list #Course-content .box3:hover .box-img2 {
-  padding-top: 2.9vw;
+  padding-top: 2.7vw;
 }
 
 #Course-list #Course-content .box1 .box-img img,
@@ -902,7 +902,7 @@ body #btn-a #mobile-btn:hover {
   padding-top: 2vw;
   font-family: 微軟正黑體;
   font-weight: 900;
-  font-size: 1.8rem;
+  font-size: 1.6rem;
   color: #646464;
 }
 
@@ -917,7 +917,7 @@ body #btn-a #mobile-btn:hover {
 #Course-list #Course-content .box1 h2,
 #Course-list #Course-content .box2 h2,
 #Course-list #Course-content .box3 h2 {
-  font-size: 32px;
+  font-size: 28px;
   color: #646464;
 }
 
@@ -1063,6 +1063,18 @@ body #btn-a #mobile-btn:hover {
   }
 }
 
+#Course-box01 .Course-box01 #box01 .card .box-img,
+#Course-box01 .Course-box01 #box02 .card .box-img,
+#Course-box01 .Course-box01 #box03 .card .box-img,
+#Course-box02 .Course-box01 #box01 .card .box-img,
+#Course-box02 .Course-box01 #box02 .card .box-img,
+#Course-box02 .Course-box01 #box03 .card .box-img,
+#Course-box03 .Course-box01 #box01 .card .box-img,
+#Course-box03 .Course-box01 #box02 .card .box-img,
+#Course-box03 .Course-box01 #box03 .card .box-img {
+  padding-top: 1vw;
+}
+
 #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,
@@ -1072,9 +1084,11 @@ body #btn-a #mobile-btn:hover {
 #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 {
-  padding: 90px 30px 0px 30px;
-  width: 10.5vw;
-  height: 13vw;
+  padding: 10px;
+  margin: 50px auto;
+  height: 8vw;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 @media screen and (max-width: 1024px) {
@@ -1089,7 +1103,6 @@ body #btn-a #mobile-btn:hover {
   #Course-box03 .Course-box01 #box03 .card .box-img img {
     width: 15vw;
     height: 20vw;
-    padding: 90px 20px 0px 20px;
   }
 }
 
@@ -1428,24 +1441,10 @@ body #btn-a #mobile-btn:hover {
   padding-top: 10vw;
   text-align: center;
   font-family: 追奇手寫體;
-  font-size: 2.5rem;
+  font-size: 2rem;
   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,
@@ -1456,7 +1455,7 @@ body #btn-a #mobile-btn:hover {
   .mobile01-3 .mobile-box1 .Course-mobile01 h1,
   .mobile01-3 .mobile-box2 .Course-mobile01 h1,
   .mobile01-3 .mobile-box3 .Course-mobile01 h1 {
-    font-size: 2rem;
+    font-size: 1.5rem;
   }
 }
 
@@ -1742,7 +1741,7 @@ body #btn-a #mobile-btn:hover {
   .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;
+    font-size: 1rem;
   }
 }
 
@@ -1774,7 +1773,7 @@ body #btn-a #mobile-btn:hover {
   .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: 1rem;
+    font-size: 0.9rem;
   }
 }
 
@@ -1835,9 +1834,10 @@ body #btn-a #mobile-btn:hover {
 .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-1 .card .box-img img,
 .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 {
-  width: 43vw;
-  height: 53vw;
-  padding: 15vw 12vw;
+  padding: 15vw 10vw;
+  height: 51vw;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 @media screen and (max-width: 400px) {
@@ -1868,7 +1868,7 @@ body #btn-a #mobile-btn:hover {
   .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-1 .card .box-img img,
   .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;
+    padding: 13vw 8vw;
     height: 51vw;
   }
 }
@@ -1936,171 +1936,6 @@ body #btn-a #mobile-btn:hover {
   }
 }
 
-.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;
-  }
-}
-
-@media screen and (max-width: 350px) {
-  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card {
-    font-size: 0.7rem;
-  }
-}
-
-.mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .box-img2 img {
-  padding-top: 20vw;
-  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: 20vw;
-  }
-}
-
-@media screen and (max-width: 350px) {
-  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .box-img2 img {
-    padding-top: 15vw;
-  }
-}
-
-.mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .box-img img {
-  width: 43vw;
-  height: 50vw;
-  padding: 15vw 12vw;
-}
-
-@media screen and (max-width: 350px) {
-  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .box-img img {
-    padding: 12vw 10vw;
-  }
-}
-
-.mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .card-title {
-  padding-top: 1rem;
-  font-weight: 900;
-  color: #414346;
-  font-size: 1.3rem;
-}
-
-@media screen and (max-width: 1024px) {
-  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .card-title {
-    font-size: 2rem;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .card-title {
-    font-size: 1rem;
-  }
-}
-
-@media screen and (max-width: 400px) {
-  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .card-title {
-    font-size: 1rem;
-  }
-}
-
-.mobile01-3 .mobile-box3 .Course-mobile01 .slick-dots {
-  width: 85%;
-}
-
-@media screen and (max-width: 350px) {
-  .mobile01-3 .mobile-box3 .Course-mobile01 .slick-dots {
-    width: 95%;
-  }
-}
-
-@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;
-  padding: 15vw 12vw;
-}
-
-@media screen and (max-width: 350px) {
-  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .box-img img {
-    padding: 10vw 10vw;
-  }
-}
-
-.mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .box-img2 img {
-  padding-top: 20vw;
-  width: 40vw;
-}
-
-@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: 20vw;
-  }
-}
-
-@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;
-  color: #414346;
-  font-size: 1.3rem;
-}
-
-@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

@@ -15,7 +15,7 @@ $navbgcolor: #a9d0c5;
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap");
 @font-face {
     font-family: 追奇手寫體;
-    src: url(./drechifont-Proportional.woff);
+    src: url(./drechifont-Proportional3.woff);
     font-weight: 900;
 }
 @media screen and(max-width:$table) {
@@ -626,7 +626,7 @@ body {
                     background-position: center center;
                 }
                 .box-img2 {
-                    padding-top: 2.9vw;
+                    padding-top: 2.7vw;
                 }
             }
             .box-img {
@@ -655,14 +655,14 @@ body {
                 padding-top: 2vw;
                 font-family: 微軟正黑體;
                 font-weight: 900;
-                font-size: 1.8rem;
+                font-size: 1.6rem;
                 color: $title-color;
                 @media screen and(max-width:$table) {
                     font-size: 1rem;
                 }
             }
             h2 {
-                font-size: 32px;
+                font-size: 28px;
                 color: $title-color;
                 @media screen and(max-width:$table) {
                     font-size: 1.5rem;
@@ -737,14 +737,16 @@ body {
                 }
 
                 .box-img {
+                    padding-top: 1vw;
                     img {
-                        padding: 90px 30px 0px 30px;
-                        width: 10.5vw;
-                        height: 13vw;
+                        padding: 10px;
+                        margin: 50px auto;
+                        height:8vw;
+                        object-fit: cover;
                         @media screen and(max-width:$table) {
                             width: 15vw;
                             height: 20vw;
-                            padding: 90px 20px 0px 20px;
+                            // padding: 90px 20px 0px 20px;
                         }
                     }
                 }
@@ -966,13 +968,13 @@ body {
                 padding-top: 10vw;
                 text-align: center;
                 font-family: 追奇手寫體;
-                font-size: 2.5rem;
+                font-size: 2rem;
                 color: #414346;
                 @media screen and(max-width:$table) {
-                    font-size: 3rem;
+                  
                 }
                 @media screen and(max-width:400px) {
-                    font-size: 2rem;
+                    font-size: 1.5rem;
                 }
             }
 
@@ -1005,10 +1007,10 @@ body {
                             font-size: 2rem;
                         }
                         @media screen and(max-width:$moblie) {
-                            font-size: 1.3rem;
+                            font-size: 1rem;
                         }
                         @media screen and(max-width:400px) {
-                            font-size: 1rem;
+                            font-size: 0.9rem;
                         }
                     }
 
@@ -1017,12 +1019,11 @@ body {
                     }
                     .box-img {
                         img {
-                            width: 43vw;
-                            height: 53vw;
-                            padding: 15vw 12vw;
-
+                            padding: 15vw 10vw;
+                            height: 51vw;
+                            object-fit: cover;
                             @media screen and(max-width:400px) {
-                                padding: 13vw 10vw;
+                                padding: 13vw 8vw;
                                 height: 51vw;
                             }
                         }
@@ -1041,134 +1042,138 @@ body {
         }
     }
 }
-.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: 20vw;
-                            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;
-                            }
-                        }
-                    }
-                    .box-img {
-                        img {
-                            width: 43vw;
-                            height: 50vw;
-                            padding: 15vw 12vw;
-                            @media screen and(max-width:350px) {
-                                padding: 12vw 10vw;
-                            }
-                        }
-                    }
-                    .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;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
+// .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;