內容新增

goto.js

@@ -341,13 +341,13 @@ $(function () {
     function () {
       $("#title1").html('課程1手機拍片');
       $("#title1-1").html('知名媒體網站電視台店長');
-
+      $("#title1-2").html('Vincnet');
     },
 
     function () {
       $("#title1").html('課程1');
       $("#title1-1").html('手機拍片');
-
+      $("#title1-2").html('');
     })
 });
 
@@ -357,12 +357,13 @@ $(function () {
     function () {
       $("#title2").html('課程2數位行銷與社群');
       $("#title2-1").html('資深數位廣告投手');
-
+      $("#title2-2").html('Ruby');
     },
 
     function () {
       $("#title2").html('課程2');
       $("#title2-1").html('數位行銷與社群');
+      $("#title2-2").html('');
     })
 });
 $(function () {
@@ -371,12 +372,13 @@ $(function () {
     function () {
       $("#title3").html('課程3文案撰寫');
       $("#title3-1").html('資深新聞媒體工作者');
-
+      $("#title3-2").html('Jennifer');
     },
 
     function () {
       $("#title3").html('課程3');
       $("#title3-1").html('文案撰寫');
+      $("#title3-2").html('');
     })
 });
 
@@ -470,3 +472,15 @@ $(".close").click(function () {
       //seconds
     }, 0)
 }());
+
+
+window.onload=function(){
+  $("#light-box").fadeIn();
+  $(".light-box1").fadeIn();
+}
+
+$(".close").click(function () {
+  $("#light-box").fadeOut();
+  $(".light-box1").fadeOut();
+
+});

index.html

@@ -7,23 +7,32 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="copyright" content="2021 © 幸福空間 │ All Rights Reserved.">
     <meta name="creation-date" content="2021-06-22 12:00:04 GTM+8">
-    <meta name="description" content="掌握三招增粉再增變現力">
+    <meta name="description" content="全台最大室內設計平台的自媒體經營心法">
     <meta name="distribution" content="Taiwan">
     <meta name="keywords" content="">
     <meta name="revisit-after" content="1 days">
     <meta name="robots" content="all">
     <meta name="format-detection" content="telephone=no">
-    <meta property="og:description" content="掌握三招增粉再增變現力" />
-    <meta property="og:site_name" content="設計師自媒體課程" />
-    <meta property="og:title" content="幸福空間 - 設計師自媒體課程" />
+    <meta property="og:description" content="全台最大室內設計平台的自媒體經營心法" />
+    <meta property="og:site_name" content="全台最大室內設計平台的自媒體經營心法" />
+    <meta property="og:title" content="幸福空間 - 全台最大室內設計平台的自媒體經營心法" />
     <meta property="og:type" content="website" />
     <meta property="og:locale" content="zh_TW">
-    <title>設計師自媒體課程</title>
+    <title>全台最大室內設計平台的自媒體經營心法</title>
 
 
 
 
 
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-133449203-1"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', 'UA-133449203-1');
+    </script>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
@@ -49,7 +58,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">
@@ -95,6 +106,7 @@
     </div>
     <!-- banner -->
     <section id="banner" class="container-fluid" style="margin: 0; padding: 0;">
+        <div class=""></div>
         <div class="banner1" class="container-fluid">
             <img id="bannertitle" src="./img/banner/banner-title.png" alt="">
             <h1>掌握關鍵三招，增粉再增變現能力</h1>
@@ -111,13 +123,20 @@
             </div>
             <!-- 手機背景 -->
             <img id="mobilecover" src="./img/banner/cover1webp.webp" alt="">
-            <a  data-gt-target="#information" data-gt-duration="500" data-gt-offset="70"><button  class="btn">手刀報名</button></a>
+            <a data-gt-target="#information" data-gt-duration="500" data-gt-offset="70"><button
+                    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">手刀報名</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">
+        <img class="close" src="./img/course-box/close.png" alt="">
+        <div class="light-box1">
+           <img src="./img/lightbox.webp" alt="">
+        </div>
+    </section>
     <!-- 困擾 -->
     <section id="trouble" class="container-fluid">
         <div id="content" class="row" style="padding-right: 0;">
@@ -168,6 +187,7 @@
                     <h2 id="title1-1">手機拍片</h2>
                     <div class="box-img">
                         <img src="./img/Course-list/box1.png" alt="">
+                        <div id="title1-2"></div>
                     </div>
                     <div id="teacher-name1"></div>
                     <div class="box-img2">
@@ -179,11 +199,12 @@
                     <h1 id="title2">課程2</h1>
                     <h2 id="title2-1">數位行銷與社群</h2>
                     <div id="boximg1" class="box-img">
-                        <img src="./img/Course-list/box2.png" alt="">
+                        <img class="img-fluid" src="./img/Course-list/box2.png" alt="">
+                        <div id="title2-2"></div>
                     </div>
                     <div id="teacher-name2"></div>
                     <div class="box-img2">
-                        <img src="./img/Course-list/box12.png"  alt="">
+                        <img class="img-fluid" src="./img/Course-list/box12.png" alt="">
                         <div class="more">了解更多</div>
                     </div>
                 </div>
@@ -191,11 +212,12 @@
                     <h1 id="title3">課程1</h1>
                     <h2 id="title3-1">文案撰寫</h2>
                     <div class="box-img">
-                        <img src="./img/Course-list/box3.png" alt="">
+                        <img class="img-fluid" src="./img/Course-list/box3.png" alt="">
+                        <div id="title3-2"></div>
                     </div>
                     <div id="teacher-name3"></div>
                     <div class="box-img2">
-                        <img src="./img/Course-list/box13.png"  alt="">
+                        <img src="./img/Course-list/box13.png" alt="">
                         <div class="more">了解更多</div>
                     </div>
                 </div>
@@ -215,7 +237,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 +249,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 +261,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 +273,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 +285,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="">
@@ -285,7 +307,7 @@
                     <div style="opacity: 0;">1111</div>
                     <div style="opacity: 0;">1111</div>
                     <div class="box-img">
-                        <img  src="./img/course-box02/box1.png" alt="">
+                        <img src="./img/course-box02/box1.png" alt="">
                     </div>
                     <div class="box-img2">
 
@@ -297,11 +319,11 @@
                     <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>
@@ -327,14 +349,14 @@
                     <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">
 
                         <img src="./img/Course-list/box12.png" alt="">
                     </div>
                 </div>
-               
+
             </div>
         </div>
     </section>
@@ -349,11 +371,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">
@@ -361,7 +383,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">
 
@@ -373,7 +395,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">
 
@@ -393,22 +415,22 @@
                 <h1 class="card-title" style="font-weight: 900;">課程1手機拍片</h1>
                 <h2>知名媒體網站電視台店長</h2>
                 <div class="box-img01">
-                    <img src="./img/people.png" alt="">
+                    <img src="./img/people/people1.jpg" alt="">
                 </div>
                 <h1 class="name" style="font-family:追奇手寫體;">Vincent</h1>
                 <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 class="card ">
                 <h1 class="card-title" style="font-weight: 900;">課程2社群營造</h1>
                 <h2>資深數位廣告投手</h2>
                 <div class="box-img02">
-                    <img src="./img/people.png" alt="">
+                    <img src="./img/people/people2.jpg" alt="">
                 </div>
-                <h1 class="name" style="font-family:追奇手寫體;">John</h1>
+                <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>
@@ -418,7 +440,7 @@
                 <h1 class="card-title" style="font-weight: 900;">課程3文案撰寫</h1>
                 <h2>資深新聞媒體工作者</h2>
                 <div class="box-img03">
-                    <img src="./img/people.png" alt="">
+                    <img src="./img/people/people3.jpg" alt="">
                 </div>
                 <h1 class="name" style="font-family:追奇手寫體;">Jennifer</h1>
                 <div class="box-img2">
@@ -445,7 +467,7 @@
                         <div style="opacity: 0;">1111</div>
                         <div style="opacity: 0;">1111</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">
                             <img src="./img/Course-list/box11.png" alt="">
@@ -458,7 +480,7 @@
                         <div style="opacity: 0;">1111</div>
                         <div style="opacity: 0;">1111</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">
 
@@ -472,7 +494,7 @@
                         <div style="opacity: 0;">1111</div>
                         <div style="opacity: 0;">1111</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">
 
@@ -500,7 +522,7 @@
                         <div style="opacity: 0;">1111</div>
                         <div style="opacity: 0;">1111</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">
 
@@ -511,7 +533,7 @@
             </div>
         </div>
     </section>
-    <section class="mobile01-2" class="container-fluid" >
+    <section class="mobile01-2" class="container-fluid">
         <div class="mobile-box2">
             <img class="close" src="./img/course-box/close.png" alt="">
             <div class="Course-mobile01">
@@ -535,7 +557,7 @@
                         <div class="card-title">2. 數位行銷之趨勢</div>
                         <div>社群營銷、內容視覺化、</div>
                         <div>直播&KOL、UGC (User Generated Content)</div>
-                        <div >更貼近消費者的媒體內容</div>
+                        <div>更貼近消費者的媒體內容</div>
                         <div class="box-img">
                             <img src="./img/course-box02/box2.png" alt="">
                         </div>
@@ -565,14 +587,14 @@
                         <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">
 
                             <img src="./img/Course-list/box12.png" alt="">
                         </div>
                     </div>
-              
+
                 </div>
             </div>
         </div>
@@ -592,7 +614,7 @@
                         <div style="opacity: 0;">1111</div>
                         <div style="opacity: 0;">1111</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-list/box13.png" alt="">
@@ -605,7 +627,7 @@
                         <div style="opacity: 0;">1111</div>
                         <div style="opacity: 0;">1111</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">
 
@@ -619,7 +641,7 @@
                         <div style="opacity: 0;">1111</div>
                         <div style="opacity: 0;">1111</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">
 
@@ -689,15 +711,15 @@
         <hr class="line" style="opacity: 1;">
         <div id="card-box2" class="row" style="outline: none;">
             <div class="box col-10">
-                <div class="boxs-chedule1" > 
+                <div class="boxs-chedule1">
                     <h1>Day1上午</h1>
                     <div class="card" style="padding: 54px 42px;">
                         <div>社群營造(一)</div>
                     </div>
                 </div>
-                <div class="boxs-chedule1"  style="padding-top: 15vw;">
+                <div class="boxs-chedule1" style="padding-top: 15vw;">
                     <h1>Day1下午</h1>
-                    <div class="card"  style="padding: 54px 42px;">
+                    <div class="card" style="padding: 54px 42px;">
                         <div>社群營造(二)</div>
                     </div>
                 </div>
@@ -712,20 +734,20 @@
                 </div>
                 <div class="boxs-chedule1" style="padding-top: 15vw;">
                     <h1>Day2下午</h1>
-                    <div class="card"  style="padding: 54px 42px;">
+                    <div class="card" style="padding: 54px 42px;">
                         <div>文案撰寫(二)</div>
                     </div>
                 </div>
                 <img class="arrow-right" src="./img/course-schedule/arrow-right.png" alt="">
             </div>
             <div class="box col-10">
-                <div class="boxs-chedule1" >
+                <div class="boxs-chedule1">
                     <h1>Day3上午</h1>
                     <div class="card" style="padding: 54px 42px;">
                         <div>手機拍片(一)</div>
                     </div>
                 </div>
-                <div class="boxs-chedule1"  style="padding-top: 15vw;">
+                <div class="boxs-chedule1" style="padding-top: 15vw;">
                     <h1>Day3下午</h1>
                     <div class="card" style="padding: 54px 42px;">
                         <div>手機拍片(二)</div>
@@ -738,7 +760,7 @@
     <!-- 電腦版收款資訊 -->
     <section id="information">
 
-        <p>  Registration 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="">
@@ -773,9 +795,14 @@
                         required></textarea> </textarea>
                     <textarea name="why_sign" id="message1" cols="50" rows="3" placeholder="為甚麼想報名" required></textarea>
                     <div style="text-align: left; padding:5px 0;">
-                        <input type="checkbox"  id="checkbox" required ><label style="margin-left:10px;" for="agree">同意</label><a style="color:#646464" target="https://hhh.com.tw/about/privacy_policy/" href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
-                    </div>
-                    <div style="text-align: left;" id="form05">如有問題歡迎來信<a style="color:#646464" href="mailto:yiya@hhh.com.tw">yiya@hhh.com.tw</a> 或來電<a style="color:#646464" href="">02-6617-0123</a> #348
+                        <input type="checkbox" id="checkbox" required><label style="margin-left:10px;"
+                            for="agree">同意</label><a style="color:#646464"
+                            target="https://hhh.com.tw/about/privacy_policy/"
+                            href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
+                    </div>
+                    <div style="text-align: left;" id="form05">如有問題歡迎來信<a style="color:#646464"
+                            href="mailto:yiya@hhh.com.tw">yiya@hhh.com.tw</a> 或來電<a style="color:#646464"
+                            href="">02-6617-0123</a> #348
                         Yiya
                     </div>
                     <div class="form-btn">
@@ -793,7 +820,7 @@
     </section>
     <!-- 手機板收款資訊 -->
     <section id="information-mobile">
-        <p>  Registration 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;">
@@ -823,19 +850,22 @@
                         <option class="option">非室內設計師</option>
                         <option class="option">其他</option>
                     </select>
-                    <input type="text" id="phone" name="phone" placeholder="連絡電話" pattern="09\d{2}\d{6}"
-                        required>
+                    <input type="text" id="phone" name="phone" placeholder="連絡電話" pattern="09\d{2}\d{6}" required>
                     <input type="email" id="email" name="email" placeholder="聯絡email" required>
                     <input type="text" id="line" name="line_id" placeholder="請留下您的LINE ID,(請設定開放搜尋)" required>
                     <input type="text" id="pay" name="cert_last5" placeholder="已匯款, 後五碼是" required>
-                    <textarea name="where_learn" id="message" cols="50" rows="3"
-                        placeholder="是怎麼知道這個課程的" required></textarea>
+                    <textarea name="where_learn" id="message" cols="50" rows="3" placeholder="是怎麼知道這個課程的"
+                        required></textarea>
                     <textarea name="why_sign" id="message1" cols="50" rows="3" placeholder="為甚麼想報名" required></textarea>
                     <div style="text-align: left; padding:5px 0;">
-                        <input type="checkbox"  id="checkbox" required><label  style="margin-left:5px;" for="agree">同意</label><a style="color:#646464" target="https://hhh.com.tw/about/privacy_policy/" href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
-                    </div>
-                    <div style="text-align: left;" id="form05">如有問題歡迎來信<a style="color:#646464" href="mailto:yiya@hhh.com.tw">yiya@hhh.com.tw</a> </div>
-                    <div style="text-align: left;">或來電<a style="color:#646464" href="">02-6617-0123 </a>#348  Yiya</div>
+                        <input type="checkbox" id="checkbox" required><label style="margin-left:5px;"
+                            for="agree">同意</label><a style="color:#646464"
+                            target="https://hhh.com.tw/about/privacy_policy/"
+                            href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
+                    </div>
+                    <div style="text-align: left;" id="form05">如有問題歡迎來信<a style="color:#646464"
+                            href="mailto:yiya@hhh.com.tw">yiya@hhh.com.tw</a> </div>
+                    <div style="text-align: left;">或來電<a style="color:#646464" href="">02-6617-0123 </a>#348 Yiya</div>
                     <div class="form-btn">
                         <input class="btn" style="opacity: 1;" type="submit" value="SEND">
                     </div>

style.css

@@ -11,7 +11,7 @@
 
 @font-face {
   font-family: 追奇手寫體;
-  src: url(./drechifont-Proportional3.woff);
+  src: url(./drechifont-Proportional4.woff);
   font-weight: 900;
 }
 
@@ -246,6 +246,50 @@ body #btn-a #mobile-btn:hover {
   }
 }
 
+#light-box {
+  background-color: rgba(0, 0, 0, 0.8);
+  width: 100vw;
+  height: 100vh;
+  z-index: 12;
+  padding: 50px 50px 100px 50px;
+  position: fixed;
+  top: 0vw;
+}
+
+@media screen and (max-width: 1024px) {
+  #light-box {
+    padding: 50px 20px 100px 20px;
+  }
+}
+
+#light-box .close {
+  position: absolute;
+  right: 22vw;
+  top: 5vw;
+}
+
+@media screen and (max-width: 767px) {
+  #light-box .close {
+    right: 5vw;
+    top: 50vw;
+  }
+}
+
+#light-box .light-box1 {
+  text-align: center;
+}
+
+#light-box .light-box1 img {
+  width: 60vw;
+}
+
+@media screen and (max-width: 767px) {
+  #light-box .light-box1 img {
+    padding-top: 40vw;
+    width: 90vw;
+  }
+}
+
 #banner {
   background-size: cover;
   background-repeat: no-repeat;
@@ -836,32 +880,17 @@ body #btn-a #mobile-btn:hover {
   margin: 10px;
 }
 
-#Course-list #Course-content .box1:hover h2,
-#Course-list #Course-content .box2:hover h2,
-#Course-list #Course-content .box3:hover h2 {
-  font-size: 1.3rem;
-}
-
-#Course-list #Course-content .box1:hover .box-img,
-#Course-list #Course-content .box2:hover .box-img,
-#Course-list #Course-content .box3:hover .box-img {
-  text-align: center;
-  background-image: url(./img/people.png);
-  background-size: 15vw 15vw;
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-
-#Course-list #Course-content .box1:hover .box-img img,
-#Course-list #Course-content .box2:hover .box-img img,
-#Course-list #Course-content .box3:hover .box-img img {
-  opacity: 0;
-}
-
-#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.7vw;
+#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,
@@ -877,7 +906,6 @@ body #btn-a #mobile-btn:hover {
 #Course-list #Course-content .box1 .box-img2,
 #Course-list #Course-content .box2 .box-img2,
 #Course-list #Course-content .box3 .box-img2 {
-  padding-top: 2vw;
   text-align: center;
 }
 
@@ -929,6 +957,65 @@ body #btn-a #mobile-btn:hover {
   }
 }
 
+#Course-list #Course-content .box1:hover h2 {
+  font-size: 1.3rem;
+}
+
+#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 .box1:hover .box-img img {
+  opacity: 0;
+}
+
+#Course-list #Course-content .box2:hover h2 {
+  font-size: 1.3rem;
+}
+
+#Course-list #Course-content .box2:hover .box-img {
+  margin-top: -57px;
+  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 .box3:hover h2 {
+  font-size: 1.3rem;
+}
+
+#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;
+}
+
+#Course-list #Course-content .box3:hover .box-img img {
+  opacity: 0;
+}
+
+#Course-list #Course-content .box3:hover .box-img2 {
+  padding-top: 0vw;
+}
+
 #Course-box01,
 #Course-box02,
 #Course-box03 {
@@ -1259,6 +1346,13 @@ body #btn-a #mobile-btn:hover {
   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;
+}
+
 @media screen and (min-width: 768px) {
   .sec04 #card-box .card .box-img01 img,
   .sec04 #card-box .card .box-img02 img,

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-Proportional3.woff);
+    src: url(./drechifont-Proportional4.woff);
     font-weight: 900;
 }
 @media screen and(max-width:$table) {
@@ -199,6 +199,40 @@ body {
         }
     }
 }
+// light-box
+#light-box{
+    background-color: rgba(0, 0, 0, 0.8);
+    width: 100vw;
+    height: 100vh;
+    z-index: 12;
+    padding: 50px 50px 100px 50px;
+    position: fixed;
+    top: 0vw;
+   
+    @media screen and(max-width:$table) {
+        padding: 50px 20px 100px 20px;
+    }
+    .close {
+        position: absolute;
+        right: 22vw;
+        top: 5vw;
+        @media screen and(max-width:$moblie) {
+            right: 5vw;
+            top: 50vw;;
+        }
+    }
+    .light-box1{
+        text-align: center;
+        img{
+     
+            width: 60vw;
+            @media screen and(max-width:$moblie) {
+                padding-top: 40vw;
+                width: 90vw;
+            }
+        }
+    }
+}
 // 主視覺
 #banner {
     background-size: cover;
@@ -610,25 +644,31 @@ body {
             background: #fff;
             border-radius: 8px;
             margin: 10px;
-            &: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;
-                }
+            #title1-2, #title2-2, #title3-2{
+                font-family: 追奇手寫體;
+                padding-top: 2.9vw;
+                font-size: 45px;
+                color: $title-color;
             }
+            // &: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;
@@ -638,7 +678,7 @@ body {
                 }
             }
             .box-img2 {
-                padding-top: 2vw;
+               
                 text-align: center;
 
                 img {
@@ -669,6 +709,78 @@ body {
                 }
             }
         }
+
+        .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.3rem;
+                }
+
+                .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;
+                }
+            }
+        }
+        .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;
+                }
+            }
+        }
     }
 }
 // 課程大綱台跳視窗電腦版
@@ -872,6 +984,8 @@ body {
             .box-img02,
             .box-img03 {
                 img {
+                    width: 214px;
+                    height: 214px;
                     @media screen and(min-width:768px) {
                         width: 20vw;
                     }