內容更新

artist-course.html

@@ -35,7 +35,7 @@
     <section id="Navigation" class="container-fluid">
         <div id="nav" class="row">
             <div id="logo" class=" col-md-2 col-lg-2">
-                <a href=""> <img src="./img/logo03_png.png" alt=""></a>
+                <a href="./index.html"> <img src="./img/logo03_png.png" alt=""></a>
             </div>
             <div id="link" class="col-md-10 col-lg-10">
                 <a data-gt-target="#sec01 " data-gt-duration="500" data-gt-offset="100">最新課程</a>

beauty.html

@@ -35,7 +35,7 @@
     <section id="Navigation" class="container-fluid">
         <div id="nav" class="row">
             <div id="logo" class=" col-md-2 col-lg-2">
-                <a href=""> <img src="./img/logo03_png.png" alt=""></a>
+                <a href="./index.html"> <img src="./img/logo03_png.png" alt=""></a>
             </div>
             <div id="link" class="col-md-10 col-lg-10">
                 <a data-gt-target="#sec01 " data-gt-duration="500" data-gt-offset="100">最新課程</a>

goto.js

@@ -1,6 +1,6 @@
 
 
-  
+
 // 手機板menu彈跳視窗
 $("#menu-box2").hide();
 $("#menu-box").hide();
@@ -26,79 +26,159 @@ $(".close").click(function () {
 
 // sec01 最新課程手機輪播 
 $('#sec01-moblie-container').slick({
-    arrows: false,
-    slidesToShow: 1,
-    slidesToScroll: 1,
-    infinite: false,
-    centerMode: true,
-  });
-  $('#sec01-slider-next').click(function () {
-    $('#sec01-moblie-container').slick('slickNext')
-  });
+  arrows: false,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  infinite: false,
+  centerMode: true,
+});
+$('#sec01-slider-next').click(function () {
+  $('#sec01-moblie-container').slick('slickNext')
+});
 
- 
 
-  // sec04  專欄報導 手機輪播 
+
+// sec04  專欄報導 手機輪播 
 $('#sec04-moblie-container').slick({
-    arrows: false,
-    slidesToShow: 1, 
-    slidesToScroll: 1,
-    infinite: false,
-    centerMode: true,
-  });
-  $('#sec04-slider-next').click(function () {
-    $('#sec04-moblie-container').slick('slickNext')
-  });
+  arrows: false,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  infinite: false,
+  centerMode: true,
+});
+$('#sec04-slider-next').click(function () {
+  $('#sec04-moblie-container').slick('slickNext')
+});
 
-  // sec03排名table輪播
+// sec03排名table輪播
 $('#sec03-slider').slick({
-    arrows: false,
-    slidesToShow: 1,
-    slidesToScroll: 1,
-    infinite: true,
-  });
-  
-  $('#sec03-slider-next').click(function () {
-    $('#sec03-slider').slick('slickNext')
+  arrows: false,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  infinite: true,
+});
+
+$('#sec03-slider-next').click(function () {
+  $('#sec03-slider').slick('slickNext')
+});
+
+$("*").each(function (index, element) {
+  // 此元素被點選後執行
+  $(this).click(function (e) {
+    // 取得被點選元素的屬性：data-gt-target
+    var target = $(this).attr("data-gt-target");
+    var duration = $(this).attr("data-gt-duration");
+    var offset = $(this).attr("data-gt-offset");
+
+    // JS 語法：判斷式
+    // if (條件) {程式區塊}
+    // 當條件成立，會執行程式區塊
+
+    // 如果 目標有資料 才會執行 { } 內的程式
+    // 避免出現 undefine (未定義 - 不存在的資料)
+    if (target) {
+      //console.log("目標：" + target);
+      //console.log("時間：" + duration);
+      //console.log("位移：" + offset);
+
+      // 上方位置 = 目標區塊.位移().上方位置
+      var top = $(target).offset().top;
+      //console.log("要前往元素的上方位置：" + top);
+
+      // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
+      // parseInt() 將文字轉為數字
+
+      $("html").stop().animate({
+        scrollTop: top - offset
+      }, parseInt(duration));
+    }
   });
-  
-  $("*").each(function (index, element) {
-    // 此元素被點選後執行
-    $(this).click(function (e) {
-      // 取得被點選元素的屬性：data-gt-target
-      var target = $(this).attr("data-gt-target");
-      var duration = $(this).attr("data-gt-duration");
-      var offset = $(this).attr("data-gt-offset");
-  
-      // JS 語法：判斷式
-      // if (條件) {程式區塊}
-      // 當條件成立，會執行程式區塊
-  
-      // 如果 目標有資料 才會執行 { } 內的程式
-      // 避免出現 undefine (未定義 - 不存在的資料)
-      if (target) {
-        //console.log("目標：" + target);
-        //console.log("時間：" + duration);
-        //console.log("位移：" + offset);
-  
-        // 上方位置 = 目標區塊.位移().上方位置
-        var top = $(target).offset().top;
-        //console.log("要前往元素的上方位置：" + top);
-  
-        // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
-        // parseInt() 將文字轉為數字
-  
-        $("html").stop().animate({
-          scrollTop: top - offset
-        }, parseInt(duration));
+});
+
+// 避免動畫與使用者滾輪衝突
+// html 在滾動滾輪時 停止 html 所有效果
+$("html").on("mousewheel", function () {
+  $("html").stop();
+});
+// 點擊次數增加JS
+$(document).on("click", ".course-src", function (event) {
+  var courseid = $(this).data("info");
+  console.log(courseid);
+
+  var url = "https://welife.asia:8002/course_click/" + courseid + "";
+
+  var xhr = new XMLHttpRequest();
+  xhr.open("GET", url);
+
+  xhr.setRequestHeader("accept", "application/json");
+
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4) {
+      console.log(xhr.status);
+      console.log(xhr.responseText);
+    }
+  };
+
+  xhr.send();
+});
+
+
+
+$.fn.serializeObject = function () {
+  var o = {};
+  var a = this.serializeArray();
+  // o["id"] = 0;
+  // o["time_stamp"] = "";
+  $.each(a, function () {
+    if (o[this.name]) {
+      if (!o[this.name].push) {
+        o[this.name] = [o[this.name]];
       }
-    });
+      o[this.name].push(this.value || '');
+    } else {
+      o[this.name] = this.value || '';
+    }
   });
-  
-  // 避免動畫與使用者滾輪衝突
-  // html 在滾動滾輪時 停止 html 所有效果
-  $("html").on("mousewheel", function () {
-    $("html").stop();
+
+  return o;
+};
+
+$(".email-sub").submit(function (e) {
+  /*	var formRef = $('#form1').serializeArray();
+    var jsonString = JSON.stringify(formRef);*/
+  var jsonInfo = $('.email-sub').serializeObject();
+  tag_str = ''
+  jsonInfo.tags.forEach(function (value) {
+    tag_str += value + ',';
   });
+  jsonInfo.tags = tag_str.slice(0, -1)
+  var jsonString = JSON.stringify(jsonInfo);
+  console.log(jsonString),
+    $.ajax({
+      type: 'POST',
+      url: 'https://welife.asia:8002/email_interest',
+      data: jsonString,
+      dataType: 'json',
 
- 
+      success: function (data) {
+        console.log('送出成功: ' + data);
+        alert("訂閱成功");
+        location.reload();
+      },
+      beforeSend: function () {
+        console.log('beforeSend');
+      },
+      complete: function () {
+        console.log('complete');
+      },
+      error: function (jqXHR, textStatus, errorThrown) {
+        console.log(JSON.stringify(jqXHR));
+        console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
+        console.log('送出失敗: ' + jqXHR.responseText);
+      }
+    });
+  return false;
+});
+$( ".close-adv" ).click(function() {
+  $( ".courseadv" ).hide();
+});

index.html

@@ -15,23 +15,70 @@
 </head>
 
 <body>
+   
     <!-- 主選單 -->
-    <section id="Navigation" class="container-fluid">
-        <div id="nav" class="row">
-            <div id="logo" class=" col-md-2 col-lg-2">
-                <a href=""> <img src="./img/logo03_png.png" alt=""></a>
-            </div>
-            <div id="link" class="col-md-10 col-lg-10">
-                <a data-gt-target="#sec01 " data-gt-duration="500" data-gt-offset="100">最新課程</a>
-                <a data-gt-target="#sec02" data-gt-duration="800" data-gt-offset="180">TOP 10 熱門課程</a>
-                <a data-gt-target="#sec04" data-gt-duration="500" data-gt-offset="150">專欄報導</a>
-                <a data-gt-target="#sec05" data-gt-duration="500" data-gt-offset="100">課程分類</a>
-                <a data-gt-target="#sec06" data-gt-duration="500" data-gt-offset="80">合作對象</a>
-                <a data-gt-target="#footer" data-gt-duration="500" data-gt-offset="50">聯絡我們</a>
+    <section id="Navigation" class="container-fluid mx-0 px-0">
+        <div style="position: fixed; z-index: 20;">
+            <!-- <section class="courseadv" style="background: #fff;" class="course-adv px-0 mx-0">
+                <div class="row">
+                    <div class="col-lg-11"> <p class="text-center">爱学习折扣| 购买课程最低仅需 NT$330，可以获得折扣课程的最后一天。仅剩 9 小时 51 分钟 29 秒。</p></div>
+                    <div class="col-lg-1"><img  class="close-adv" width="16px" src="./img/close2.png" alt=""></div>
+                </div>
+            </section> -->
+            <div id="nav" class="row" style="width: 100vw; background:rgba(41, 36, 33, 0.9); color:#fff">
+                <div id="logo" class=" col-md-2 col-lg-2">
+                    <a style="color:#fff ;text-decoration: none;" href="./index.html"><h1>Opentalk</h1></a>
+                </div>
+                <div id="link" class="col-md-10 col-lg-10">
+                    <a data-gt-target="#sec01 " data-gt-duration="500" data-gt-offset="100">最新課程</a>
+                    <a data-gt-target="#sec02" data-gt-duration="800" data-gt-offset="180">TOP 10 熱門課程</a>
+                    <a data-gt-target="#sec04" data-gt-duration="500" data-gt-offset="150">專欄報導</a>
+                    <a data-gt-target="#sec05" data-gt-duration="500" data-gt-offset="100">課程分類</a>
+                    <a data-gt-target="#sec06" data-gt-duration="500" data-gt-offset="80">合作對象</a>
+                    <a data-gt-target="#footer" data-gt-duration="500" data-gt-offset="50">聯絡我們</a>
+                </div>
+                <img id="menu-btn1" src="./img/menu.png" alt="">
             </div>
-            <img id="menu-btn1" src="./img/menu.png" alt="">
+
         </div>
+        <section id="banner" class="container-fluid px-0 mx-0">
+    
+            <div class="row mx-0">
+                <div class="form col-12 order-2 col-lg-5 order-lg-2">
+                    <form class="email-sub" action="">
+                        <h1>TODAY'S THE DAY</h1>
+                        <h4>歡迎訂閱掌握最新課程資訊</h4>
+                        <!-- <h2>歡迎訂閱掌握最新課程資訊</h2> -->
+                        
+                        <div class="email-form mt-3" style="margin: 0 auto;">
+                            <div style="text-align: center;">
+                                <input type="email" id="email" name="email" placeholder="請留下您的Email" required>
+                            </div>
+                           
+                            <span class="course-tab" for="name">選擇您有興趣的課程類別(可複選)</span>
+                            <label for="20" class="selector1">直播講堂<input type="checkbox" class="selecbox ms-1" id="20" name="tags" value="20" style="width:15px;height:15px;"></label>
+                            <label for="18" class="selector1">個人成長<input type="checkbox" class="selecbox ms-1" id="18" name="tags" value="18"  style="width:15px;height:15px;"></label>
+                            <label for="16" class="selector1">變美課程<input type="checkbox" class="selecbox ms-1" id="16" name="tags" value="16" style="width:15px;height:15px;"></label>
+                            <label for="21" class="selector1">專業影像<input type="checkbox" class="selecbox ms-1" id="21" name="tags" value="21" style="width:15px;height:15px;"></label>
+                            <label for="22" class="selector1">管理營銷<input type="checkbox" class="selecbox ms-1" id="22" name="tags" value="22" style="width:15px;height:15px;"></label>
+                            <label for="15" class="selector1">享受生活<input type="checkbox" class="selecbox ms-1" id="15" name="tags" value="15" style="width:15px;height:15px;"></label>
+                          
+                            <input class="email-subbtn my-3 " style="opacity: 1;" type="submit" value="立即訂閱">
+                         
+                            
+                        </div>
+                       
+                    </form>
+                </div>
+                <div class="secbanner col-12 order-1 col-lg-7 order-lg-2 d-flex align-items-center">
+                    <div  id="banner-container">
+                        <img class="" src="./img/banner-test/bruce-mars-xj8qrWvuOEs-unsplash2.jpg" alt="">
+                    </div>
+                </div>
+            </div>
+        </section>
     </section>
+
     <!-- 手機板行動選單 -->
     <div id="menu-box" class="container-fluid" style="padding:0;margin:0 ">
         <div id="menu-box2">
@@ -55,17 +102,12 @@
         </div>
 
     </div>
-    <!-- 主視覺 -->
-    <section id="banner" class="container-fluid" style="margin: 0; padding: 0;">
-        <div id="banner-container">
-            <img src="./img/banner11.jpg" alt="">
-        </div>
-    </section>
+   
     <!-- 最新課程  電腦版-->
     <section id="sec01">
         <div class="container-fluid">
             <div id="sec01-title" style="text-align: center;">
-                <h1>最新課程</h1>
+                <h1 class="secn-title">最新課程</h1>
                 <hr class="line">
             </div>
             <div id="sec01-container" class="row row-cols-1 row-cols-md-4 g-4">
@@ -152,7 +194,7 @@
                             <a target="_blank"
                                 href="https://www.masterclass.com/classes/gordon-ramsay-teaches-cooking-restaurant-recipes-at-home"><img
                                     src="./img/sec02/sec02-2.png" alt=""></a>
-                            <div class="sec02-top-text"><span>2.</span>Gordon Ramsayl</div>
+                            <div class="sec02-top-text"><span>2.</span>Gordon Ramsay</div>
                             <div>13 道餐廳風格的菜肴專為家庭烹飪而設計，您可以學習如何使用日常食材構建從開胃菜到甜點的高級菜肴。 </div>
                         </div>
                         <div class="sec02-box1   col-lg-4">
@@ -209,10 +251,13 @@
                             <tr>
                                 <th scope="row">1</th>
                                 <td>
-                                    <a target="_blank" href="https://opentalk.center/courses/camera"><img src="./img/sec03/table1.jpg" alt=""></a>  
+                                    <a target="_blank" href="https://opentalk.center/courses/camera"><img
+                                            src="./img/sec03/table1.jpg" alt=""></a>
                                     <div class="sec03-table-text" style="display: inline-block;">
                                         <div>
-                                            <a target="_blank" href="https://opentalk.center/courses/camera"><h1>12堂小白手機攝影课</h1></a>
+                                            <a target="_blank" href="https://opentalk.center/courses/camera">
+                                                <h1 class="fw-bold">12堂小白手機攝影课</h1>
+                                            </a>
                                         </div>
                                         <div>
                                             <p>一天提升手機技能晉升攝影大神</p>
@@ -224,10 +269,13 @@
                             <tr>
                                 <th scope="row">2</th>
                                 <td>
-                                    <a target="_bnank" href="https://opentalk.center/courses/drppt8"><img src="./img/sec03/table2.jpg" alt=""></a>
+                                    <a target="_bnank" href="https://opentalk.center/courses/drppt8"><img
+                                            src="./img/sec03/table2.jpg" alt=""></a>
                                     <div class="sec03-table-text" style="display: inline-block;">
                                         <div>
-                                            <a target="_bnank" href="https://opentalk.center/courses/drppt8"><h1>靠PPT設計翻身年收破百萬</h1></a>     
+                                            <a target="_bnank" href="https://opentalk.center/courses/drppt8">
+                                                <h1 class="fw-bold">靠PPT設計翻身年收破百萬</h1>
+                                            </a>
                                         </div>
                                         <div>
                                             <p>被你老板、同事、客戶驚豔全場的8堂課</p>
@@ -239,12 +287,15 @@
                             <tr>
                                 <th scope="row">3</th>
                                 <td>
-                                    <a target="_blank" href="https://opentalk.center/courses/beauty12"> <img src="./img/sec03/table3.jpg" alt=""></a>
-                                   
+                                    <a target="_blank" href="https://opentalk.center/courses/beauty12"> <img
+                                            src="./img/sec03/table3.jpg" alt=""></a>
+
                                     <div class="sec03-table-text" style="display: inline-block;">
                                         <div>
-                                            <a target="_blank" href="https://opentalk.center/courses/beauty12"><h1>超級逆齡煥顏術</h1></a>
-                                           
+                                            <a target="_blank" href="https://opentalk.center/courses/beauty12">
+                                                <h1 class="fw-bold">超級逆齡煥顏術</h1>
+                                            </a>
+
                                         </div>
                                         <div>
                                             <p>女人我最大長駐示範老師</p>
@@ -262,7 +313,7 @@
                                     <div class="sec03-table-text" style="display: inline-block;">
                                         <div>
                                             <a target="_blank" href=""></a>
-                                            <h1>Modern and Contemporary</h1>
+                                            <h1 class="fw-bold">Modern and Contemporary</h1>
                                         </div>
                                         <div>
                                             <p>專項課程 </p>
@@ -274,11 +325,16 @@
                             <tr>
                                 <th scope="row">5</th>
                                 <td>
-                                    <a target="_blank" href="https://opentalk.center/courses/aerobic_cat#section-description">  <img src="./img/sec03/table5.jpg" alt=""></a>
-                                  
+                                    <a target="_blank"
+                                        href="https://opentalk.center/courses/aerobic_cat#section-description"> <img
+                                            src="./img/sec03/table5.jpg" alt=""></a>
+
                                     <div class="sec03-table-text" style="display: inline-block">
                                         <div>
-                                            <a target="_blank" href="https://opentalk.center/courses/aerobic_cat#section-description"><h1>有氧廋身塑形操</h1></a>
+                                            <a target="_blank"
+                                                href="https://opentalk.center/courses/aerobic_cat#section-description">
+                                                <h1 class="fw-bold">有氧廋身塑形操</h1>
+                                            </a>
                                         </div>
                                         <div>
 
@@ -298,12 +354,15 @@
                             <tr>
                                 <th scope="row">6</th>
                                 <td>
-                                    <a target="_blank" href="https://sat.cool/course/intro/6/info"><img src="./img/sec03/table2-1.png" alt=""></a>
-                                  
+                                    <a target="_blank" href="https://sat.cool/course/intro/6/info"><img
+                                            src="./img/sec03/table2-1.png" alt=""></a>
+
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <a target="_blank" href="https://sat.cool/course/intro/6/info"> <h1>解密圖像故事力 </h1></a>
-                                           
+                                            <a target="_blank" href="https://sat.cool/course/intro/6/info">
+                                                <h1 class="fw-bold">解密圖像故事力 </h1>
+                                            </a>
+
                                         </div>
                                         <div>
                                             <p>打造深入人心的創作</p>
@@ -315,12 +374,15 @@
                             <tr>
                                 <th scope="row">7</th>
                                 <td>
-                                    <a target="_blank" href="https://opentalk.center/courses/tea-spirit"> <img src="./img/sec03/table2-2.jpg" alt=""></a>
-                                   
+                                    <a target="_blank" href="https://opentalk.center/courses/tea-spirit"> <img
+                                            src="./img/sec03/table2-2.jpg" alt=""></a>
+
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <a target="_blank" href="https://opentalk.center/courses/tea-spirit"><h1>借茶修為以茶養德</h1></a>
-                                           
+                                            <a target="_blank" href="https://opentalk.center/courses/tea-spirit">
+                                                <h1 class="fw-bold">借茶修為以茶養德</h1>
+                                            </a>
+
                                         </div>
                                         <div>
                                             <p>讓靈動氣韻成為你的鮮活名片。</p>
@@ -332,10 +394,13 @@
                             <tr>
                                 <th scope="row">8</th>
                                 <td>
-                                    <a target="_blank" href="https://sat.cool/course/intro/2/info"><img src="./img/sec03/table2-3.png" alt=""></a>
+                                    <a target="_blank" href="https://sat.cool/course/intro/2/info"><img
+                                            src="./img/sec03/table2-3.png" alt=""></a>
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <a target="_blank" href="https://sat.cool/course/intro/2/info"><h1>【多益職涯力】</h1></a>
+                                            <a target="_blank" href="https://sat.cool/course/intro/2/info">
+                                                <h1 class="fw-bold">【多益職涯力】</h1>
+                                            </a>
                                         </div>
                                         <div>
                                             <p>新制多益神速解題課程</p>
@@ -348,12 +413,15 @@
                             <tr>
                                 <th scope="row">9</th>
                                 <td>
-                                    <a target="_blank" href="https://opentalk.center/courses/drexcel"><img src="./img/sec03/table2-4.jpg" alt=""></a>
-                                 
+                                    <a target="_blank" href="https://opentalk.center/courses/drexcel"><img
+                                            src="./img/sec03/table2-4.jpg" alt=""></a>
+
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <a target="_blank" href="https://opentalk.center/courses/drexcel"><h1>EXCEL實戰速成</h1></a>
-                                            
+                                            <a target="_blank" href="https://opentalk.center/courses/drexcel">
+                                                <h1 class="fw-bold">EXCEL實戰速成</h1>
+                                            </a>
+
                                         </div>
                                         <div>
                                             <p>職場晉升加薪秘密武器</p>
@@ -365,12 +433,15 @@
                             <tr>
                                 <th scope="row">10</th>
                                 <td>
-                                    <a target="_blank" href="https://opentalk.center/courses/starface"><img src="./img/sec03/table2-5.webp" alt=""></a>
-                                   
+                                    <a target="_blank" href="https://opentalk.center/courses/starface"><img
+                                            src="./img/sec03/table2-5.webp" alt=""></a>
+
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <a target="_blank" href="https://opentalk.center/courses/starface"><h1>中醫養顏凍齡術</h1></a>
-                                            
+                                            <a target="_blank" href="https://opentalk.center/courses/starface">
+                                                <h1 class="fw-bold">中醫養顏凍齡術</h1>
+                                            </a>
+
                                         </div>
                                         <div>
                                             <p>劉詩詩佟麗娅明星御用中醫師</p>
@@ -399,10 +470,13 @@
                             <tr>
                                 <th scope="row">1</th>
                                 <td>
-                                    <a target="_blank" href="https://opentalk.center/courses/camera"><img src="./img/sec03/table1.jpg" alt=""></a>  
+                                    <a target="_blank" href="https://opentalk.center/courses/camera"><img
+                                            src="./img/sec03/table1.jpg" alt=""></a>
                                     <div class="sec03-table-text" style="display: inline-block;">
                                         <div>
-                                            <a target="_blank" href="https://opentalk.center/courses/camera"><h1>12堂小白手機攝影课</h1></a>
+                                            <a target="_blank" href="https://opentalk.center/courses/camera">
+                                                <h1 class="fw-bold">12堂小白手機攝影课</h1>
+                                            </a>
                                         </div>
                                         <div>
                                             <p>一天提升手機技能晉升攝影大神</p>
@@ -414,10 +488,13 @@
                             <tr>
                                 <th scope="row">2</th>
                                 <td>
-                                    <a target="_bnank" href="https://opentalk.center/courses/drppt8"><img src="./img/sec03/table2.jpg" alt=""></a>
+                                    <a target="_bnank" href="https://opentalk.center/courses/drppt8"><img
+                                            src="./img/sec03/table2.jpg" alt=""></a>
                                     <div class="sec03-table-text" style="display: inline-block;">
                                         <div>
-                                            <a target="_bnank" href="https://opentalk.center/courses/drppt8"><h1>靠PPT設計翻身年收破百萬</h1></a>     
+                                            <a target="_bnank" href="https://opentalk.center/courses/drppt8">
+                                                <h1 class="fw-bold">靠PPT設計翻身年收破百萬</h1>
+                                            </a>
                                         </div>
                                         <div>
                                             <p>被你老板、同事、客戶驚豔全場的8堂課</p>
@@ -429,12 +506,15 @@
                             <tr>
                                 <th scope="row">3</th>
                                 <td>
-                                    <a target="_blank" href="https://opentalk.center/courses/beauty12"> <img src="./img/sec03/table3.jpg" alt=""></a>
-                                   
+                                    <a target="_blank" href="https://opentalk.center/courses/beauty12"> <img
+                                            src="./img/sec03/table3.jpg" alt=""></a>
+
                                     <div class="sec03-table-text" style="display: inline-block;">
                                         <div>
-                                            <a target="_blank" href="https://opentalk.center/courses/beauty12"><h1>超級逆齡煥顏術</h1></a>
-                                           
+                                            <a target="_blank" href="https://opentalk.center/courses/beauty12">
+                                                <h1 class="fw-bold">超級逆齡煥顏術</h1>
+                                            </a>
+
                                         </div>
                                         <div>
                                             <p>女人我最大長駐示範老師</p>
@@ -451,9 +531,10 @@
                                     <img src="./img/sec03/table2-2.jpg" alt="">
                                     <div class="sec03-table-text" style="display: inline-block;">
                                         <div>
-                                            <a target="_blank" href=""></a>
-                                            <h1>Modern and Contemporary</h1>
-                                            <h1> Art and Desi</h1>
+                                            <a target="_blank" href="">
+                                                <h1 class="fw-bold">Modern and Contemporary</h1>
+                                            </a>
+                                          
                                         </div>
                                         <div>
                                             <p>專項課程 </p>
@@ -465,11 +546,16 @@
                             <tr>
                                 <th scope="row">5</th>
                                 <td>
-                                    <a target="_blank" href="https://opentalk.center/courses/aerobic_cat#section-description">  <img src="./img/sec03/table5.jpg" alt=""></a>
-                                  
+                                    <a target="_blank"
+                                        href="https://opentalk.center/courses/aerobic_cat#section-description"> <img
+                                            src="./img/sec03/table5.jpg" alt=""></a>
+
                                     <div class="sec03-table-text" style="display: inline-block">
                                         <div>
-                                            <a target="_blank" href="https://opentalk.center/courses/aerobic_cat#section-description"><h1>有氧廋身塑形操</h1></a>
+                                            <a target="_blank"
+                                                href="https://opentalk.center/courses/aerobic_cat#section-description">
+                                                <h1 class="fw-bold">有氧廋身塑形操</h1>
+                                            </a>
                                         </div>
                                         <div>
 
@@ -489,12 +575,15 @@
                             <tr>
                                 <th scope="row">6</th>
                                 <td>
-                                    <a target="_blank" href="https://sat.cool/course/intro/6/info"><img src="./img/sec03/table2-1.png" alt=""></a>
-                                  
+                                    <a target="_blank" href="https://sat.cool/course/intro/6/info"><img
+                                            src="./img/sec03/table2-1.png" alt=""></a>
+
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <a target="_blank" href="https://sat.cool/course/intro/6/info"> <h1>解密圖像故事力 </h1></a>
-                                           
+                                            <a target="_blank" href="https://sat.cool/course/intro/6/info">
+                                                <h1 class="fw-bold">解密圖像故事力 </h1>
+                                            </a>
+
                                         </div>
                                         <div>
                                             <p>打造深入人心的創作</p>
@@ -506,12 +595,15 @@
                             <tr>
                                 <th scope="row">7</th>
                                 <td>
-                                    <a target="_blank" href="https://opentalk.center/courses/tea-spirit"> <img src="./img/sec03/table2-2.jpg" alt=""></a>
-                                   
+                                    <a target="_blank" href="https://opentalk.center/courses/tea-spirit"> <img
+                                            src="./img/sec03/table2-2.jpg" alt=""></a>
+
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <a target="_blank" href="https://opentalk.center/courses/tea-spirit"><h1>借茶修為以茶養德</h1></a>
-                                           
+                                            <a target="_blank" href="https://opentalk.center/courses/tea-spirit">
+                                                <h1 class="fw-bold">借茶修為以茶養德</h1>
+                                            </a>
+
                                         </div>
                                         <div>
                                             <p>讓靈動氣韻成為你的鮮活名片。</p>
@@ -523,10 +615,13 @@
                             <tr>
                                 <th scope="row">8</th>
                                 <td>
-                                    <a target="_blank" href="https://sat.cool/course/intro/2/info"><img src="./img/sec03/table2-3.png" alt=""></a>
+                                    <a target="_blank" href="https://sat.cool/course/intro/2/info"><img
+                                            src="./img/sec03/table2-3.png" alt=""></a>
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <a target="_blank" href="https://sat.cool/course/intro/2/info"><h1>【多益職涯力】</h1></a>
+                                            <a target="_blank" href="https://sat.cool/course/intro/2/info">
+                                                <h1 class="fw-bold">【多益職涯力】</h1>
+                                            </a>
                                         </div>
                                         <div>
                                             <p>新制多益神速解題課程</p>
@@ -539,12 +634,15 @@
                             <tr>
                                 <th scope="row">9</th>
                                 <td>
-                                    <a target="_blank" href="https://opentalk.center/courses/drexcel"><img src="./img/sec03/table2-4.jpg" alt=""></a>
-                                 
+                                    <a target="_blank" href="https://opentalk.center/courses/drexcel"><img
+                                            src="./img/sec03/table2-4.jpg" alt=""></a>
+
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <a target="_blank" href="https://opentalk.center/courses/drexcel"><h1>EXCEL實戰速成</h1></a>
-                                            
+                                            <a target="_blank" href="https://opentalk.center/courses/drexcel">
+                                                <h1 class="fw-bold">EXCEL實戰速成</h1>
+                                            </a>
+
                                         </div>
                                         <div>
                                             <p>職場晉升加薪秘密武器</p>
@@ -556,12 +654,15 @@
                             <tr>
                                 <th scope="row">10</th>
                                 <td>
-                                    <a target="_blank" href="https://opentalk.center/courses/starface"><img src="./img/sec03/table2-5.webp" alt=""></a>
-                                   
+                                    <a target="_blank" href="https://opentalk.center/courses/starface"><img
+                                            src="./img/sec03/table2-5.webp" alt=""></a>
+
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <a target="_blank" href="https://opentalk.center/courses/starface"><h1>中醫養顏凍齡術</h1></a>
-                                            
+                                            <a target="_blank" href="https://opentalk.center/courses/starface">
+                                                <h1 class="fw-bold">中醫養顏凍齡術</h1>
+                                            </a>
+
                                         </div>
                                         <div>
                                             <p>劉詩詩佟麗娅明星御用中醫師</p>
@@ -581,46 +682,61 @@
     <section id="sec04">
         <div class="container-fluid">
             <div id="sec04-title" style="text-align: center;">
-                <h1>專欄報導</h1>
+                <h1 class="secn-title">專欄報導</h1>
                 <hr class="line">
             </div>
             <div id="sec04-container" class="row row-cols-1 row-cols-md-4 g-4">
                 <div class="col">
                     <div class="card h-100">
-                        <a target="_blank" href="./artist-course.html"><img src="./img/sec04/sec04-4.jpg" class="card-img-top" alt="..."></a>
+                        <a target="_blank" href="./artist-course.html"><img src="./img/sec04/sec04-4.jpg"
+                                class="card-img-top" alt="..."></a>
                         <div class="card-body">
-                            <a target="_blank" href="./artist-course.html"> <h5 class="card-title">從王力宏的直播看線上課程的推動</h5></a>
-                           
-                            <p class="card-text">線上課程因為每一次的疫情再起助推了一波又一波的趨勢，7月王力宏在直播中公開這一次線上課程的發布，引起了課單價7000台幣、同時間三千多堂課的搶購，意外的再次掀起名人課的風潮。</p>
+                            <a target="_blank" href="./artist-course.html">
+                                <h5 class="card-title">從王力宏的直播看線上課程的推動</h5>
+                            </a>
+
+                            <p class="card-text">
+                                線上課程因為每一次的疫情再起助推了一波又一波的趨勢，7月王力宏在直播中公開這一次線上課程的發布，引起了課單價7000台幣、同時間三千多堂課的搶購，意外的再次掀起名人課的風潮。
+                            </p>
                         </div>
                     </div>
                 </div>
                 <div class="col">
                     <div class="card h-100">
-                        <a target="_blank" href="./top5-course-platform.html"><img src="./img/sec04/sec04-1.png" class="card-img-top" alt="..."></a>
+                        <a target="_blank" href="./top5-course-platform.html"><img src="./img/sec04/sec04-1.png"
+                                class="card-img-top" alt="..."></a>
                         <div class="card-body">
-                            <a target="_blank" href="./top5-course-platform.html"><h5 class="card-title">5個國際最佳線上課程選擇</h5></a>
-                           
+                            <a target="_blank" href="./top5-course-platform.html">
+                                <h5 class="card-title">5個國際最佳線上課程選擇</h5>
+                            </a>
+
                             <p class="card-text">2021 年5門國際最受好評的個人和專業發展課程、課程認證和培訓網站</p>
                         </div>
                     </div>
                 </div>
                 <div class="col">
                     <div class="card h-100">
-                        <a target="_blank" href="./beauty.html"> <img src="./img/sec04/sec01-2.png" class="card-img-top" alt="..."></a>
+                        <a target="_blank" href="./beauty.html"> <img src="./img/sec04/sec01-2.png" class="card-img-top"
+                                alt="..."></a>
                         <div class="card-body">
-                            <a target="_blank" href="./beauty.html"><h5 class="card-title">強推薦~生命洗禮後的變美課</h5></a>
-                         
+                            <a target="_blank" href="./beauty.html">
+                                <h5 class="card-title">強推薦~生命洗禮後的變美課</h5>
+                            </a>
+
                             <p class="card-text">健康飲食真的很重要，節食和吃藥看似效果快，其實反彈起來更加可怕，分分鐘超過原來的體重。而運動沒效果，是因為我們女生肌肉少，能量消耗慢</p>
                         </div>
                     </div>
                 </div>
                 <div class="col">
                     <div class="card h-100">
-                        <a target="_blank" href="./writing-course.html"><img src="./img/sec04/sec04-3.png" class="card-img-top" alt="..."></a>
+                        <a target="_blank" href="./writing-course.html"><img src="./img/sec04/sec04-3.png"
+                                class="card-img-top" alt="..."></a>
                         <div class="card-body">
-                            <a target="_blank" href="./writing-course.html"> <h5 class="card-title">侯吉諒書法講堂：從零開始，學寫一手好字</h5></a>
-                            <p class="card-text">侯吉諒精通詩文、古典與現代文學、書法、繪畫，篆刻，為難得一見之全方位創作者，因長期接觸中西方各種藝術，在作品中深入古典而又具有強烈的現代意識，</p>
+                            <a target="_blank" href="./writing-course.html">
+                                <h5 class="card-title">侯吉諒書法講堂：從零開始，學寫一手好字</h5>
+                            </a>
+                            <p class="card-text">侯吉諒精通詩文、古典與現代文學、書法、繪畫，篆刻，為難得一見之全方位創作者，因長期接觸中西方各種藝術，在作品中深入古典而又具有強烈的現代意識，
+                            </p>
 
                         </div>
                     </div>
@@ -635,43 +751,58 @@
 
         <div id="sec04-moblie-title" class="container-fluid">
             <div id="sec04-moblie-header">
-                <h1>專欄報導</h1>
-                <hr>
+                <h1 class="secn-title">專欄報導</h1>
+                <hr class="line">
             </div>
             <div id="sec04-moblie-container" class="row row-cols-1 row-cols-md-4 g-4">
                 <div class="col">
                     <div class="card h-100">
-                        <a target="_blank" href="./artist-course.html"><img src="./img/sec04/sec04-4.jpg" class="card-img-top" alt="..."></a>
+                        <a target="_blank" href="./artist-course.html"><img src="./img/sec04/sec04-4.jpg"
+                                class="card-img-top" alt="..."></a>
                         <div class="card-body">
-                            <a target="_blank" href="./artist-course.html"> <h5 class="card-title">從王力宏的直播看線上課程的推動</h5></a>
-                            <p class="card-text">線上課程因為每一次的疫情再起助推了一波又一波的趨勢，7月王力宏在直播中公開這一次線上課程的發布，引起了課單價7000台幣、同時間三千多堂課的搶購，意外的再次掀起名人課的風潮。</p>
+                            <a target="_blank" href="./artist-course.html">
+                                <h5 class="card-title">從王力宏的直播看線上課程的推動</h5>
+                            </a>
+                            <p class="card-text">
+                                線上課程因為每一次的疫情再起助推了一波又一波的趨勢，7月王力宏在直播中公開這一次線上課程的發布，引起了課單價7000台幣、同時間三千多堂課的搶購，意外的再次掀起名人課的風潮。
+                            </p>
                         </div>
                     </div>
                 </div>
                 <div class="col">
                     <div class="card h-100">
-                        <a target="_blank" href="./top5-course-platform.html"><img src="./img/sec04/sec04-1.png" class="card-img-top" alt="..."></a>
+                        <a target="_blank" href="./top5-course-platform.html"><img src="./img/sec04/sec04-1.png"
+                                class="card-img-top" alt="..."></a>
                         <div class="card-body">
-                            <a target="_blank" href="./top5-course-platform.html"><h5 class="card-title">5個國際最佳線上課程選擇</h5></a>
+                            <a target="_blank" href="./top5-course-platform.html">
+                                <h5 class="card-title">5個國際最佳線上課程選擇</h5>
+                            </a>
                             <p class="card-text">2021 年5門國際最受好評的個人和專業發展課程、課程認證和培訓網站</p>
                         </div>
                     </div>
                 </div>
                 <div class="col">
                     <div class="card h-100">
-                        <a target="_blank" href="./beauty.html"> <img src="./img/sec04/sec01-2.png" class="card-img-top" alt="..."></a>
+                        <a target="_blank" href="./beauty.html"> <img src="./img/sec04/sec01-2.png" class="card-img-top"
+                                alt="..."></a>
                         <div class="card-body">
-                            <a target="_blank" href="./beauty.html"><h5 class="card-title">強推薦~生命洗禮後的變美課</h5></a>
+                            <a target="_blank" href="./beauty.html">
+                                <h5 class="card-title">強推薦~生命洗禮後的變美課</h5>
+                            </a>
                             <p class="card-text">健康飲食真的很重要，節食和吃藥看似效果快，其實反彈起來更加可怕，分分鐘超過原來的體重。而運動沒效果，是因為我們女生肌肉少，能量消耗慢</p>
                         </div>
                     </div>
                 </div>
                 <div class="col">
                     <div class="card h-100">
-                        <a target="_blank" href="./writing-course.html"><img src="./img/sec04/sec04-3.png" class="card-img-top" alt="..."></a>
+                        <a target="_blank" href="./writing-course.html"><img src="./img/sec04/sec04-3.png"
+                                class="card-img-top" alt="..."></a>
                         <div class="card-body">
-                            <a target="_blank" href="./writing-course.html"> <h5 class="card-title">侯吉諒書法講堂：從零開始，學寫一手好字</h5></a>
-                            <p class="card-text">侯吉諒精通詩文、古典與現代文學、書法、繪畫，篆刻，為難得一見之全方位創作者，因長期接觸中西方各種藝術，在作品中深入古典而又具有強烈的現代意識，</p>
+                            <a target="_blank" href="./writing-course.html">
+                                <h5 class="card-title">侯吉諒書法講堂：從零開始，學寫一手好字</h5>
+                            </a>
+                            <p class="card-text">侯吉諒精通詩文、古典與現代文學、書法、繪畫，篆刻，為難得一見之全方位創作者，因長期接觸中西方各種藝術，在作品中深入古典而又具有強烈的現代意識，
+                            </p>
 
                         </div>
                     </div>
@@ -683,12 +814,12 @@
     </section>
 
     <!-- 課程分類 -->
-    <section id="sec05" class="container-fluid" style="padding:5vw 0;">
+    <section id="sec05" class="container-fluid">
         <div id="sec05-title">
-            <h1>課程分類</h1>
+            <h1 class="secn-title">課程分類</h1>
             <hr class="line">
         </div>
-        <div id="tag-group" class="container-fluid my-5 text-center rounded-pill px-0 mx-0">
+        <div id="tag-group" class="my-5 rounded-pill">
             <div class="tag btn-group" role="group" aria-label="Basic outlined example">
                 <button id="15" type="button" class=" border-0 rounded-pill">享受生活</button>
                 <button id="16" type="button" class="border-0  rounded-pill">我要變美</button>
@@ -697,22 +828,19 @@
             </div>
         </div>
 
-        <div id="sec05-container" class="container-fluid">
-            <div id="sec05-course" class="row row-cols-1 row-cols-md-2 g-4">
+        <div id="sec05-container" class="container-fluid mx-0 p-2">
+            <div id="sec05-course" class="row row-cols-1 row-cols-md-2 g-4 mx-0 px-0">
 
             </div>
-            <!-- <img src="./img/sec05img1.webp" alt=""> -->
         </div>
     </section>
 
     <!-- 合作對象  電腦版-->
     <section id="sec06">
         <div id="sec06-container-box">
-            <div class="">
-                <div id="sec06-title">
-                    <h1 class="mb-0">合作對象</h1>
-                    <hr>
-                </div>
+            <div id="sec06-title">
+                <h1 style="color: #fff;" class="secn-title">合作對象</h1>
+                <hr class="line bg-white">
             </div>
             <!-- <div id="sec06-title-m">
                 <h1>合作對象</h1>
@@ -730,28 +858,25 @@
                             <div class="sec09-1 col-3 py-3"><a target="_blank" href="https://www.ximalaya.com/"><img
                                         class="img-fluid" src="./img/sec06/sec06-06.jpg" alt=""></a></div>
 
-
-                            <div class="sec09-1 col-3 py-3"><a target="_blank"
-                                    href="https://www.chain.tw/"><img class="img-fluid"
-                                        src="./img/sec06/sec06-04.png" alt=""></a></div>
-
-
+                            <div class="col-3 py-3 d-flex align-items-center justfy-content-center"><a target="_blank"
+                                    href="https://nftboard.info/"><img class="img-fluid" src="./img/logo.jpg"
+                                        alt=""></a>
+                            </div>
 
                             <div class="sec09-1 col-3 py-3"><a target="_blank" href="https://www.lizhiweike.com/"><img
                                         class="img-fluid" src="./img/sec06/sec06-07.png" alt=""></a></div>
 
-                            <div class="sec09-1 col-3 py-3"><a target="_blank" href=""><img
-                                        class="img-fluid" src="./img/sec06/sec06-8.png" alt=""></a></div>
+                            <div class="sec09-1 col-3 py-3"><a target="_blank" href=""><img class="img-fluid"
+                                        src="./img/sec06/sec06-8.png" alt=""></a></div>
 
-                            <div class="sec09-1 col-3 py-3"><a target="_blank" href="https://www.facebook.com/ARK.TPE/"><img
-                                        class="img-fluid" src="./img/sec06/sec06-02.png" alt=""></a></div>
+                            <div class="sec09-1 col-3 py-3"><a target="_blank"
+                                    href="https://www.facebook.com/ARK.TPE/"><img class="img-fluid"
+                                        src="./img/sec06/sec06-02.png" alt=""></a></div>
 
+                            <div class="sec09-1 col-3 py-3"><a target="_blank" href="https://www.chain.tw/"><img
+                                        class="img-fluid" src="./img/sec06/sec06-04.png" alt=""></a></div>
                             <div class="col-3 py-3 d-flex align-items-center justfy-content-center"><a target="_blank"
-                                    href="https://bwxk.ke.qq.com/#tab=1&category=-1"><img class="img-fluid"
-                                        src="./img/sec06/sec06-06-removebg-preview.png" alt=""></a>
-                            </div>
-                            <div class="col-3 py-3 d-flex align-items-center justfy-content-center"><a
-                                    target="_blank" href="https://www.facebook.com/Shengeng.Foundation"><img class="sec09-7 img-fluid"
+                                    href="https://www.facebook.com/Shengeng.Foundation"><img class="sec09-7 img-fluid"
                                         src="./img/sec06/sec06-05.png" alt=""></a></div>
 
                         </div>
@@ -800,23 +925,23 @@
                     for (var i = 0; i < limit; i++) {
                         sec01course += ' \
                             <div  class="sec01-1 col-lg-3">\
-                                <div class="card h-100 d-inline-block">\
+                                <div class="card h-100">\
                                     <a target="_blank" href="'+ msg[i].url + '"><img src="' + msg[i].cover_img + '" class="img-fluid rounded-start" alt=""></a>\
                                     <div  class="card-body">\
                                         <div class="card-title1 d-flex align-items-center">\
-                                            <a style="text-decoration: none;" target="_blank" href="'+ msg[i].url + '"><h1 style="font-weight:900;  font-size: 22px; color:#000;" class="title-text">' + msg[i].title + '</h1></a>\
+                                            <a class="course-src" data-info="'+ msg[i].id + '" target="_blank" href="'+ msg[i].url + '"><h1 style="font-weight:900;  font-size: 22px;" class="title-text">' + msg[i].title + '</h1></a>\
                                          </div>\
                                         <p  class="card-text card-content1 d-flex align-items-center">'+ msg[i].profile + '</p>\
                                         <p  class="card-text row">\
                                             <small class="text-muted col-6">\
-                                            <img class="m-1" style="width: 25px; object-fit: cover; " src="./img/sec05/time.png"alt=""><span>'+ msg[i].hours + 'hr</span>\
+                                            <img class="mb-1 mx-1" style="width: 25px; object-fit: cover; " src="./img/sec05/fire.png"alt=""><span>'+msg[i].clicks+'人</span>\
                                             </small>\
-                                            <small style="color:#eb144c; font-size:20px;" class="col-6">NT$'+ msg[i].price_discount + '</small>\
+                                            <small style="color:#292421; font-size:20px;" class="col-6">NT$'+ msg[i].price_discount + '</small>\
                                         </p>\
                                     </div>\
-                                </div>\
+                                    </div>\
                             </div>';
-
+                    
                     }
                     $('#sec01-container').html(sec01course);
                     $(".title-text").each(function () {
@@ -864,15 +989,14 @@
                                             <div class="banner col-12 col-lg-12">\
                                                 <a target="_blank" href="'+ msg[i].url + '"><img src="' + msg[i].cover_img + '" class="img-fluid rounded-start" alt=""></a>\
                                             </div>\
-                                            <small class="text-muted py-2"><img class="m-1" style="width: 20px;" src="./img/sec05/master.png" alt="">'+ msg[i].units + '次學習</small>\
                                             <div class="col-12 col-lg-12 p-1">\
-                                                <a style="text-decoration: none;" target="_blank" href="'+ msg[i].url + '"><h1 style="font-weight:900;  font-size: 22px;" class="card-title d-flex align-items-center">' + msg[i].title + '</h1></a>\
+                                                <a class="course-src" data-info="'+ msg[i].id + '" style="text-decoration: none;" target="_blank" href="'+ msg[i].url + '"><h1 style="font-weight:900;  font-size: 22px;" class="card-title d-flex align-items-center">' + msg[i].title + '</h1></a>\
                                                 <p class="card-text card-content">'+ msg[i].profile + '</p>\
                                                 <p class="card-text row">\
                                                     <small class="text-muted col-8">\
-                                                        <img class="m-1" style="width: 20px;" src="./img/sec05/time.png"alt=""><span>'+ msg[i].hours + 'hr</span>\
+                                                        <img class="mb-1 mx-1" style="width: 20px;" src="./img/sec05/fire.png"alt=""><span class="">'+msg[i].clicks+'人</span>\
                                                     </small>\
-                                                <small style="color:#eb144c;" class="price col-4">NT$'+ msg[i].price_discount + '</small>\
+                                                <small style="color:#292421;" class="price col-4">NT$'+ msg[i].price_discount + '</small>\
                                                 </p>\
                                             </div>\
                                         </div> \

style.css

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@600;700;900&display=swap");
 * {
   margin: 0;
   padding: 0;
@@ -6,6 +7,49 @@
           box-sizing: border-box;
 }
 
+@font-face {
+  font-family: 綜藝體繁;
+  src: url(./wt040-綜藝體繁.ttf);
+  font-weight: 900;
+  font-display: swap;
+}
+
+body {
+  position: relative;
+}
+
+body .secn-title {
+  font-family: 'Noto Serif TC', serif;
+  text-align: left;
+  color: #292421;
+  font-size: 30px;
+  font-weight: 700;
+  padding: 5px 10px;
+  margin-bottom: 0px;
+}
+
+@media screen and (max-width: 767px) {
+  body .secn-title {
+    font-weight: 900;
+    font-size: 32px;
+  }
+}
+
+body .line {
+  width: 8vw;
+  height: 3px;
+  color: #292421;
+  margin-left: 12px;
+  opacity: 1 !important;
+  margin-top: 10px;
+}
+
+@media screen and (max-width: 767px) {
+  body .line {
+    width: 30vw;
+  }
+}
+
 .container-fluid {
   width: 80vw;
   margin: 0 auto;
@@ -18,16 +62,12 @@
 }
 
 #Navigation {
+  position: relative;
   width: 100vw;
-  background-color: #eb144c;
-  color: #fff;
-  position: fixed;
-  opacity: 1 !important;
-  z-index: 20;
 }
 
 #Navigation #logo {
-  padding-top: 3vw;
+  padding-top: 2.5vw;
 }
 
 @media screen and (max-width: 767px) {
@@ -143,7 +183,7 @@
   padding-bottom: 5vw;
   position: relative;
   width: 40vw;
-  background-color: #eb144c;
+  background-color: #292421;
   z-index: 7;
   text-align: center;
 }
@@ -162,16 +202,131 @@
   padding: 0 !important;
 }
 
+.courseadv {
+  width: 100vw;
+  padding: 2vw;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+}
+
+.courseadv img {
+  cursor: pointer;
+}
+
 #banner {
+  margin-top: 7.5vw;
+  padding-bottom: 3vw;
   width: 100vw;
   display: inline-block;
-  background: #fff;
+  background: #000;
+}
+
+#banner .form {
+  padding-top: 5vw;
+  background: #000;
+}
+
+#banner .form h1 {
+  text-align: center;
+  font-size: 2.5rem;
+  color: #fff;
+  font-weight: 900;
+}
+
+@media screen and (max-width: 767px) {
+  #banner .form h1 {
+    font-size: 2rem;
+  }
+}
+
+#banner .form h4 {
+  text-align: center;
+  margin-top: 2rem;
+  color: #adadad;
+}
+
+#banner .form h2 {
+  text-align: center;
+  margin-top: 30px;
+  color: #fff;
+}
+
+#banner .form .email-form {
+  width: 70%;
+}
+
+@media screen and (max-width: 767px) {
+  #banner .form .email-form {
+    width: 100%;
+  }
+}
+
+#banner .form .email-form .course-tab {
+  margin: 15px 0px;
+  font-family: 微軟正黑體;
+  font-size: 18px;
+  display: inline-block;
+  width: 100%;
+  color: #fff;
+}
+
+#banner .form .email-form #email {
+  width: 100%;
+  height: 35px;
+  margin: 15px 0;
+  padding: 25px 5px;
+  background: #1b1c1e;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+  color: #fff;
+}
+
+#banner .form .email-form .selector1 {
+  cursor: pointer;
+  margin: 0.3rem;
+  padding: 0.5rem;
+  border: 1px solid #bebebe;
+  border-radius: 5px;
+  width: 8vw;
+  color: #bebebe;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+@media screen and (max-width: 767px) {
+  #banner .form .email-form .selector1 {
+    width: 40%;
+  }
+}
+
+#banner .form .email-form .selector1 img {
+  -webkit-filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(174deg) brightness(102%) contrast(101%);
+          filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(174deg) brightness(102%) contrast(101%);
+}
+
+#banner .form .email-form .selector1:hover {
+  color: #fff;
+  border: 1px solid #fff;
+}
+
+#banner .form .email-form .email-subbtn {
+  margin: 0 auto;
+  width: 100%;
+  margin: 30px 0px;
+  padding: 15px 0;
+  background-color: #9400d3;
+  /*   邊框：寬度 樣式 顏色  */
+  border: 0 solid #000;
+  color: #fff;
+  border-radius: 5px;
+}
+
+#banner .form .email-form .email-subbtn:hover {
+  background-color: #57027c;
 }
 
 #banner #banner-container {
-  width: 80vw;
-  margin: 50px auto;
-  padding-bottom: 5vw;
+  overflow: hidden;
 }
 
 @media screen and (max-width: 767px) {
@@ -183,8 +338,9 @@
 }
 
 #banner #banner-container img {
-  padding-top: 10vw;
-  width: 80vw;
+  margin-bottom: -50px;
+  width: 55vw;
+  height: 30vw;
   -o-object-fit: cover;
      object-fit: cover;
 }
@@ -193,10 +349,12 @@
   #banner #banner-container img {
     padding-top: 15vw;
     width: 100vw;
+    height: auto;
   }
 }
 
 #sec01 {
+  padding-top: 5vw;
   padding-bottom: 10vw;
   background: #fff;
 }
@@ -205,35 +363,6 @@
   margin-bottom: 50px;
 }
 
-#sec01 #sec01-title h1 {
-  text-align: center;
-  color: #e02d4b;
-  font-size: 45px;
-  font-weight: 900;
-  padding: 5px 10px;
-}
-
-@media screen and (max-width: 767px) {
-  #sec01 #sec01-title h1 {
-    font-weight: 900;
-    font-size: 32px;
-  }
-}
-
-#sec01 #sec01-title hr {
-  width: 5vw;
-  height: 5px;
-  color: #e02d4b;
-  margin: 10px auto;
-  opacity: 1 !important;
-}
-
-@media screen and (max-width: 767px) {
-  #sec01 #sec01-title hr {
-    width: 30vw;
-  }
-}
-
 #sec01 .learn-more {
   width: 45%;
 }
@@ -250,8 +379,19 @@
      object-fit: cover;
 }
 
+#sec01 #sec01-container .sec01-1 .card a {
+  color: #000;
+  text-decoration: none;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+#sec01 #sec01-container .sec01-1 .card a:hover {
+  color: #9400d3;
+}
+
 #sec01 #sec01-container .sec01-1 .card .card-title1 {
-  font-weight: 900;
   height: 100px;
 }
 
@@ -340,7 +480,7 @@
 }
 
 #sec02 {
-  background: #eb144c;
+  background: #292421;
   padding: 5vw 0px;
   padding-bottom: 8vw;
 }
@@ -367,6 +507,10 @@
   text-align: center;
 }
 
+#sec02 #sec02-container #sec02-top-box #sec02-top-title h1 {
+  font-family: 'Noto Serif TC', serif;
+}
+
 #sec02 #sec02-container #sec02-top-box #sec02-top-title hr {
   width: 5vw;
   height: 5px;
@@ -419,7 +563,7 @@
 
 #sec02-moblie #sec02-moblie-header h1 {
   text-align: center;
-  color: #eb144c;
+  color: #292421;
   font-size: 45px;
   font-weight: 900;
   padding: 5px 10px;
@@ -436,14 +580,14 @@
   margin: 10px auto !important;
   width: 25vw;
   height: 5px;
-  color: #eb144c;
+  color: #292421;
   margin: 10px;
   opacity: 1 !important;
 }
 
 #sec02-moblie #sec02-container {
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #fff), color-stop(35%, transparent), color-stop(20%, #eb144c));
-  background: linear-gradient(180deg, #fff 20%, transparent 35%, #eb144c 20%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #fff), color-stop(35%, transparent), color-stop(20%, #292421));
+  background: linear-gradient(180deg, #fff 20%, transparent 35%, #292421 20%);
   font-weight: 900;
   color: #fff;
   text-align: right;
@@ -530,6 +674,7 @@
   font-size: 40px;
   display: table-cell;
   vertical-align: middle;
+  color: #292421;
 }
 
 #sec03 #sec03-table .table td {
@@ -545,7 +690,7 @@
 }
 
 #sec03 #sec03-table .table td a:hover {
-  color: #2828ff;
+  color: #9400d3;
 }
 
 #sec03 #sec03-table .table img {
@@ -708,35 +853,6 @@
   margin-bottom: 50px;
 }
 
-#sec04 #sec04-title h1 {
-  text-align: center;
-  color: #eb144c;
-  font-size: 45px;
-  font-weight: 900;
-  padding: 5px 10px;
-}
-
-@media screen and (max-width: 767px) {
-  #sec04 #sec04-title h1 {
-    font-weight: 900;
-    font-size: 32px;
-  }
-}
-
-#sec04 #sec04-title hr {
-  width: 5vw;
-  height: 5px;
-  color: #eb144c;
-  margin: 10px auto;
-  opacity: 1 !important;
-}
-
-@media screen and (max-width: 767px) {
-  #sec04 #sec04-title hr {
-    width: 30vw;
-  }
-}
-
 #sec04 .learn-more {
   width: 45%;
 }
@@ -750,12 +866,12 @@
 }
 
 #sec04 #sec04-container a:hover {
-  color: #eb144c;
+  color: #9400d3;
 }
 
 #sec04 #sec04-container .card {
-  -webkit-box-shadow: 0 10px 1px #eb144c;
-          box-shadow: 0 10px 1px #eb144c;
+  -webkit-box-shadow: 0 10px 1px #9400d3;
+          box-shadow: 0 10px 1px #9400d3;
   border-radius: 10px;
 }
 
@@ -798,30 +914,6 @@
   }
 }
 
-#sec04-moblie #sec04-moblie-header h1 {
-  text-align: center;
-  color: #eb144c;
-  font-size: 45px;
-  font-weight: 900;
-  padding: 5px 10px;
-}
-
-@media screen and (max-width: 767px) {
-  #sec04-moblie #sec04-moblie-header h1 {
-    font-weight: 900;
-    font-size: 32px;
-  }
-}
-
-#sec04-moblie #sec04-moblie-header hr {
-  margin: 10px auto !important;
-  width: 25vw;
-  height: 5px;
-  color: #eb144c;
-  margin: 10px;
-  opacity: 1 !important;
-}
-
 #sec04-moblie #sec04-moblie-container {
   padding-top: 10vw;
 }
@@ -839,12 +931,12 @@
 }
 
 #sec04-moblie #sec04-moblie-container .col a:hover {
-  color: #eb144c;
+  color: #292421;
 }
 
 #sec04-moblie #sec04-moblie-container .col .card {
-  -webkit-box-shadow: 0 10px 1px #eb144c;
-          box-shadow: 0 10px 1px #eb144c;
+  -webkit-box-shadow: 0 10px 1px #9400d3;
+          box-shadow: 0 10px 1px #9400d3;
   border-radius: 10px;
 }
 
@@ -860,7 +952,7 @@
 
 @media screen and (max-width: 350px) {
   #sec04-moblie #sec04-moblie-container .col .card .card-body {
-    padding: .5rem .5rem;
+    padding: 0.5rem 0.5rem;
   }
 }
 
@@ -879,73 +971,52 @@
   padding-bottom: 5vw;
 }
 
-#sec05 #sec05-title {
-  margin-bottom: 50px;
-}
-
-#sec05 #sec05-title h1 {
-  text-align: center;
-  color: #eb144c;
-  font-size: 45px;
-  font-weight: 900;
-  padding: 5px 10px;
-}
-
 @media screen and (max-width: 767px) {
-  #sec05 #sec05-title h1 {
-    font-weight: 900;
-    font-size: 32px;
+  #sec05 {
+    padding: 0;
+    margin: 0;
   }
 }
 
-#sec05 #sec05-title hr {
-  width: 5vw;
-  height: 5px;
-  color: #eb144c;
-  margin: 10px auto;
-  opacity: 1 !important;
-}
-
-@media screen and (max-width: 767px) {
-  #sec05 #sec05-title hr {
-    width: 30vw;
-  }
+#sec05 #sec05-title {
+  margin-bottom: 50px;
 }
 
-#sec05 #tag-group {
-  border: 3px solid #ea504d;
+#sec05 #tag-group .tag button {
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-right: 30px;
+  color: #292421;
+  background: none;
+  font-size: 24px;
 }
 
 @media screen and (max-width: 767px) {
-  #sec05 #tag-group {
+  #sec05 #tag-group .tag button {
     font-size: 16px;
-    padding: 0 10px;
-    margin: 0 10px;
-    border: 0;
+    padding-left: 5px;
+    padding-right: 5px;
+    margin-right: 5px;
+    color: #292421;
   }
 }
 
-#sec05 #tag-group .tag button {
-  padding: 0 30px;
-  margin: 0 30px;
-  color: #ffafae;
-  background: none;
-  font-size: 32px;
-}
-
 @media screen and (max-width: 767px) {
   #sec05 #tag-group .tag button {
-    font-size: 16px;
-    padding: 0 15px;
-    margin: 0 10px;
-    color: #fff;
-    background: #ffafae;
+    font-size: 14px;
   }
 }
 
 #sec05 #tag-group .tag button:hover, #sec05 #tag-group .tag button:focus {
   color: #fff;
-  background: #eb144c;
+  background: #292421;
+}
+
+@media screen and (max-width: 767px) {
+  #sec05 #sec05-container {
+    padding: 5px;
+    margin: 0;
+  }
 }
 
 #sec05 #sec05-container .course-content {
@@ -964,7 +1035,7 @@
 }
 
 #sec05 #sec05-container #sec05-course a:hover {
-  color: #eb144c;
+  color: #9400d3;
 }
 
 #sec05 #sec05-container #sec05-course img {
@@ -972,12 +1043,6 @@
      object-fit: cover;
 }
 
-@media screen and (max-width: 767px) {
-  #sec05 #sec05-container #sec05-course img {
-    width: 95vw;
-  }
-}
-
 #sec05 #sec05-container #sec05-course .card-title {
   font-weight: 900;
   height: 55px;
@@ -1009,7 +1074,7 @@
 
 @media screen and (max-width: 350px) {
   #sec05 #sec05-container #sec05-course .price {
-    font-size: 18px;
+    font-size: 16px;
   }
 }
 
@@ -1020,15 +1085,15 @@
 
 #sec06 #sec06-container-box {
   padding-top: 8vw;
-  background: url(./img/sec06/sec06-1.png), -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(30%, #fff));
-  background: url(./img/sec06/sec06-1.png), linear-gradient(180deg, transparent 50%, #fff 30%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #292421), color-stop(50%, transparent), color-stop(50%, #fff));
+  background: linear-gradient(180deg, #292421 50%, transparent 50%, #fff 50%);
   background-size: contain;
   background-repeat: no-repeat;
   background-blend-mode: overlay;
 }
 
 #sec06 #sec06-title {
-  width: 75vw;
+  width: 80vw;
   margin: 0 auto;
   text-align: right !important;
 }
@@ -1039,41 +1104,6 @@
   }
 }
 
-#sec06 #sec06-title h1 {
-  color: #eb144c;
-  font-size: 45px;
-  font-weight: 900;
-  padding: 5px 10px;
-  margin-top: 50px;
-  margin-right: 50px;
-}
-
-@media screen and (max-width: 767px) {
-  #sec06 #sec06-title h1 {
-    font-size: 28px;
-    margin-top: 10px;
-    margin-right: 10px;
-  }
-}
-
-#sec06 #sec06-title hr {
-  display: inline-block;
-  margin-right: 110px;
-  width: 5vw;
-  height: 5px;
-  color: #eb144c;
-  opacity: 1 !important;
-}
-
-@media screen and (max-width: 767px) {
-  #sec06 #sec06-title hr {
-    margin-top: 0;
-    width: 15vw;
-    height: 3px;
-    margin-right: 50px;
-  }
-}
-
 #sec06 #sec06-container {
   text-align: center;
 }
@@ -1153,7 +1183,7 @@
   width: 100vw;
   text-align: center;
   line-height: 2;
-  background: #eb144c;
+  background: #292421;
   color: #fff;
 }
 
@@ -1287,7 +1317,7 @@
 }
 
 #sec10 .side-bar a:hover {
-  color: #eb144c;
+  color: #292421;
 }
 
 #sec10 .side-bar h5 {
@@ -1312,7 +1342,7 @@
 }
 
 #sec11 #sec11-container a:hover {
-  color: #eb144c;
+  color: #292421;
 }
 
 #sec11 #sec11-container h1 {

style.scss

@@ -3,17 +3,50 @@
     padding: 0;
     box-sizing: border-box;
 }
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@600;700;900&display=swap');
 
+@font-face {
+    font-family: 綜藝體繁;
+    src: url(./wt040-綜藝體繁.ttf);
+    font-weight: 900;
+    font-display: swap;
+}
 $desktop: 1025px;
 $table: 1024px;
 $moblie: 767px;
-$navbgcolor: #eb144c;
-
+$navbgcolor: #292421;
+$subcolor: #9400d3;
 @media screen and(max-width:$table) {
 }
 @media screen and(max-width:$moblie) {
 }
-
+body {
+    position: relative;
+    .secn-title {
+        font-family: 'Noto Serif TC', serif;
+        text-align: left;
+        color: #292421;
+        font-size: 30px;
+        font-weight: 700;
+        padding: 5px 10px;
+        margin-bottom: 0px;
+        @media screen and(max-width:$moblie) {
+            font-weight: 900;
+            font-size: 32px;
+        }
+    }
+    .line {
+        width: 8vw;
+        height: 3px;
+        color: #292421;
+        margin-left: 12px;
+        opacity: 1 !important;
+        margin-top: 10px;
+        @media screen and(max-width:$moblie) {
+            width: 30vw;
+        }
+    }
+}
 .container-fluid {
     width: 80vw;
     margin: 0 auto;
@@ -24,15 +57,13 @@ $navbgcolor: #eb144c;
 
 // 主選單
 #Navigation {
+    position: relative;
     width: 100vw;
-    background-color: $navbgcolor;
-    color: #fff;
-    position: fixed;
-    opacity: 1 !important;
-    z-index: 20;
-
+    // background-color: $navbgcolor;
+    // background: rgba(41, 36, 33, 0.9);
+   
     #logo {
-        padding-top: 3vw;
+        padding-top: 2.5vw;
         @media screen and(max-width:$moblie) {
             padding: 15px;
         }
@@ -144,35 +175,128 @@ $navbgcolor: #eb144c;
         }
     }
 }
-
+.courseadv{
+    width: 100vw;
+    padding: 2vw;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+    img{
+        cursor: pointer;
+    }
+}
 // banner
 #banner {
+  margin-top: 7.5vw;
+   padding-bottom:3vw ;
     width: 100vw;
     display: inline-block;
-    background: #fff;
+    background: #000;
+    .form {
+        padding-top: 5vw;
+        background: #000;
+        h1 {
+            text-align: center;
+            font-size: 2.5rem;
+            color: #fff;
+            font-weight: 900;
+            @media screen and(max-width:$moblie) {
+                font-size: 2rem;
+            }
+        }
+        h4 {
+            text-align: center;
+            margin-top: 2rem;
+            color: #adadad;
+        }
+        h2 {
+            text-align: center;
+            margin-top: 30px;
+            color: #fff;
+        }
+        .email-form {
+            width: 70%;
+            @media screen and(max-width:$moblie) {
+                width: 100%;
+            }
+            .course-tab {
+                margin: 15px 0px;
+                font-family: 微軟正黑體;
+                font-size: 18px;
+                display: inline-block;
+                width: 100%;
+                color: #fff;
+            }
+            #email {
+                width: 100%;
+                height: 35px;
+                margin: 15px 0;
+                padding: 25px 5px;
+                background: #1b1c1e;
+                border: 1px solid rgba(0, 0, 0, 0.3);
+                border-radius: 5px;
+                color: #fff;
+            }
+            .selector1 {
+                cursor: pointer;
+                margin: 0.3rem;
+                padding: 0.5rem;
+                border: 1px solid #bebebe;
+                border-radius: 5px;
+                width: 8vw;
+                color: #bebebe;
+                transition: 0.3s;
+                @media screen and(max-width:$moblie) {
+                    width: 40%;
+                }
+                img {
+                    filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(174deg) brightness(102%) contrast(101%);
+                }
+                &:hover {
+                    color: #fff;
+                    border: 1px solid #fff;
+                }
+            }
+
+            .email-subbtn {
+                margin: 0 auto;
+                width: 100%;
+                margin: 30px 0px;
+                padding: 15px 0;
+                background-color: #9400d3;
+                // background-color: $navbgcolor;
+                // background: rgba(41, 36, 33, 0.9);
+                /*   邊框：寬度 樣式 顏色  */
+                border: 0 solid #000;
+                color: #fff;
+                border-radius: 5px;
+                &:hover {
+                    background-color: #57027c;
+                }
+            }
+        }
+    }
     #banner-container {
-        width: 80vw;
-        margin: 50px auto;
-        padding-bottom: 5vw;
+        overflow: hidden;
         @media screen and(max-width:$moblie) {
             width: 100vw;
             margin: 0;
             padding-bottom: 15vw;
         }
         img {
-            padding-top: 10vw;
-            width: 80vw;
+            margin-bottom: -50px;
+            width: 55vw;
+            height: 30vw;
             object-fit: cover;
-
             @media screen and(max-width:$moblie) {
                 padding-top: 15vw;
                 width: 100vw;
+                height: auto;
             }
         }
     }
 }
 // 最新課程-電腦版
 #sec01 {
+    padding-top: 5vw;
     padding-bottom: 10vw;
     background: #fff;
     // @media screen and(max-width:$moblie) {
@@ -180,28 +304,6 @@ $navbgcolor: #eb144c;
     // }
     #sec01-title {
         margin-bottom: 50px;
-        h1 {
-            text-align: center;
-            color: #e02d4b;
-            font-size: 45px;
-            font-weight: 900;
-            padding: 5px 10px;
-           
-            @media screen and(max-width:$moblie) {
-                font-weight: 900;
-                font-size: 32px;
-            }
-        }
-        hr {
-            width: 5vw;
-            height: 5px;
-            color: #e02d4b;
-            margin: 10px auto;
-            opacity: 1 !important;
-            @media screen and(max-width:$moblie) {
-                width: 30vw;
-            }
-        }
     }
     .learn-more {
         width: 45%;
@@ -211,17 +313,27 @@ $navbgcolor: #eb144c;
             .card {
                 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
                 border-radius: 10px;
+
                 img {
                     padding: 5px;
                     object-fit: cover;
                 }
-
-                .card-title1{
-                    font-weight: 900;
+                a{
+                    color:#000;
+                    text-decoration: none;
+                    transition: 0.3s;
+                    cursor: pointer;
+                    &:hover {
+                        color: $subcolor;
+                    }
+                }
+                .card-title1 {
+                    // font-weight: 900;
                     height: 100px;
+                   
                 }
 
-                .card-content1{
+                .card-content1 {
                     height: 100px;
                 }
             }
@@ -295,6 +407,7 @@ $navbgcolor: #eb144c;
 // sec02 TOP排名 電腦版
 #sec02 {
     background: $navbgcolor;
+    // background: rgba(41,36,33,0.9);
     padding: 5vw 0px;
     padding-bottom: 8vw;
     @media screen and(max-width:$moblie) {
@@ -311,6 +424,12 @@ $navbgcolor: #eb144c;
         #sec02-top-box {
             #sec02-top-title {
                 text-align: center;
+                h1{
+                    font-family: 'Noto Serif TC', serif;
+                }
+                // h1{
+                //     font-family:綜藝體繁 ;
+                // }
                 hr {
                     width: 5vw;
                     height: 5px;
@@ -378,7 +497,7 @@ $navbgcolor: #eb144c;
         }
     }
     #sec02-container {
-        background: linear-gradient(180deg, #fff 20%, transparent 35%, #eb144c 20%);
+        background: linear-gradient(180deg, #fff 20%, transparent 35%, $navbgcolor 20%);
         font-weight: 900;
         color: #fff;
         text-align: right;
@@ -395,7 +514,7 @@ $navbgcolor: #eb144c;
                 color: #fff;
 
                 #top1 {
-                    width:120px;
+                    width: 120px;
                     @media screen and(max-width:350px) {
                         width: 100px;
                         height: auto;
@@ -405,16 +524,15 @@ $navbgcolor: #eb144c;
                     object-fit: cover;
                     @media screen and(max-width:350px) {
                         width: 70px;
-                        height:auto;
+                        height: auto;
                     }
                 }
                 .sec02-top-text {
                     font-size: 12px;
                     text-align: left;
-                    
+
                     @media screen and(max-width:350px) {
                         text-align: left;
-                     
                     }
 
                     span {
@@ -446,16 +564,18 @@ $navbgcolor: #eb144c;
                 font-size: 40px;
                 display: table-cell;
                 vertical-align: middle;
+                color: $navbgcolor;
             }
             td {
                 padding: 15px;
                 a {
+                   
                     text-decoration: none;
                     color: #000;
                     transition: 0.3s;
                     cursor: pointer;
                     &:hover {
-                        color: #2828ff;
+                        color:$subcolor;
                     }
                 }
             }
@@ -579,36 +699,12 @@ $navbgcolor: #eb144c;
 // sec04 專欄報導-電腦版
 #sec04 {
     background: linear-gradient(180deg, #fff 50%, #ededf9 50%);
-
     padding-bottom: 10vw;
-
     @media screen and(max-width:$moblie) {
         display: none;
     }
     #sec04-title {
         margin-bottom: 50px;
-        h1 {
-            text-align: center;
-            color: $navbgcolor;
-            font-size: 45px;
-            font-weight: 900;
-            padding: 5px 10px;
-
-            @media screen and(max-width:$moblie) {
-                font-weight: 900;
-                font-size: 32px;
-            }
-        }
-        hr {
-            width: 5vw;
-            height: 5px;
-            color: $navbgcolor;
-            margin: 10px auto;
-            opacity: 1 !important;
-            @media screen and(max-width:$moblie) {
-                width: 30vw;
-            }
-        }
     }
     .learn-more {
         width: 45%;
@@ -620,11 +716,11 @@ $navbgcolor: #eb144c;
             transition: 0.3s;
             cursor: pointer;
             &:hover {
-                color:$navbgcolor;
+                color: $subcolor;
             }
         }
         .card {
-            box-shadow: 0 10px 1px $navbgcolor;
+            box-shadow: 0 10px 1px #9400d3;
             border-radius: 10px;
             img {
                 padding: 5px;
@@ -658,28 +754,7 @@ $navbgcolor: #eb144c;
     @media screen and(min-width:$desktop) {
         display: none;
     }
-    #sec04-moblie-header {
-        h1 {
-            text-align: center;
-            color: $navbgcolor;
-            font-size: 45px;
-            font-weight: 900;
-            padding: 5px 10px;
 
-            @media screen and(max-width:$moblie) {
-                font-weight: 900;
-                font-size: 32px;
-            }
-        }
-        hr {
-            margin: 10px auto !important ;
-            width: 25vw;
-            height: 5px;
-            color: $navbgcolor;
-            margin: 10px;
-            opacity: 1 !important;
-        }
-    }
     #sec04-moblie-container {
         padding-top: 10vw;
         .col {
@@ -690,7 +765,7 @@ $navbgcolor: #eb144c;
                 transition: 0.3s;
                 cursor: pointer;
                 &:hover {
-                    color:$navbgcolor;
+                    color: $navbgcolor;
                 }
             }
             .card {
@@ -698,20 +773,20 @@ $navbgcolor: #eb144c;
                     height: 150px;
                     object-fit: cover;
                 }
-                box-shadow: 0 10px 1px $navbgcolor;
+                box-shadow: 0 10px 1px #9400d3;
                 border-radius: 10px;
-                .card-body{
+                .card-body {
                     height: 260px;
                     @media screen and(max-width:350px) {
-                       padding: .5rem .5rem;
-                     }
+                        padding: 0.5rem 0.5rem;
+                    }
                 }
                 .card-title {
                     font-weight: 900;
                 }
-                .card-text{
+                .card-text {
                     @media screen and(max-width:350px) {
-                       font-size: 14px;
+                        font-size: 14px;
                     }
                 }
             }
@@ -723,113 +798,95 @@ $navbgcolor: #eb144c;
 #sec05 {
     padding-top: 5vw;
     padding-bottom: 5vw;
-
+    @media screen and(max-width:$moblie) {
+        padding: 0;
+        margin: 0;
+    }
     #sec05-title {
         margin-bottom: 50px;
-
-        h1 {
-            text-align: center;
-            color: $navbgcolor;
-            font-size: 45px;
-            font-weight: 900;
-            padding: 5px 10px;
-
-            @media screen and(max-width:$moblie) {
-                font-weight: 900;
-                font-size: 32px;
-            }
-        }
-        hr {
-            width: 5vw;
-            height: 5px;
-            color: $navbgcolor;
-            margin: 10px auto;
-            opacity: 1 !important;
-            @media screen and(max-width:$moblie) {
-                width: 30vw;
-            }
-        }
     }
     #tag-group {
-        border: 3px solid #ea504d;
-        @media screen and(max-width:$moblie) {
-            font-size: 16px;
-            padding: 0 10px;
-            margin: 0 10px;
-            border: 0;
-        }
+        // border: 3px solid #ea504d;
+        // @media screen and(max-width:$moblie) {
+        //     font-size: 16px;
+        //     padding: 0 10px;
+        //     margin: 0 10px;
+        //     border: 0;
+        // }
         .tag {
             button {
-                padding: 0 30px;
-                margin: 0 30px;
-                color: #ffafae;
+                padding-left: 10px;
+                padding-right: 10px;
+                margin-right: 30px;
+                color: #292421;
                 background: none;
-                font-size: 32px;
-
+                font-size: 24px;
                 @media screen and(max-width:$moblie) {
                     font-size: 16px;
-                    padding: 0 15px;
-                    margin: 0 10px;
-                    color: #fff;
-                    background: #ffafae;
+                    padding-left: 5px;
+                    padding-right: 5px;
+                    margin-right: 5px;
+                    color: #292421;
+                }
+                @media screen and(max-width:$moblie) {
+                    font-size: 14px;
                 }
                 &:hover,
                 &:focus {
                     color: #fff;
-                    background: #eb144c;
+                    background: #292421;
                 }
             }
         }
     }
 
     #sec05-container {
-        .course-content{
-            animation-name:Cardload;
+        @media screen and(max-width:$moblie) {
+            padding: 5px;
+            margin: 0;
+        }
+        .course-content {
+            animation-name: Cardload;
             animation-duration: 1.5s;
         }
         #sec05-course {
-           
             a {
                 text-decoration: none;
                 color: #000;
                 transition: 0.3s;
                 cursor: pointer;
                 &:hover {
-                    color:$navbgcolor;
+                    color: $subcolor;
                 }
             }
             img {
-                
                 object-fit: cover;
                 @media screen and(max-width:$moblie) {
-                    width: 95vw;
+                    // width: 95vw;
                 }
             }
             .card-title {
                 font-weight: 900;
                 height: 55px;
             }
-            .banner{
-                img{
+            .banner {
+                img {
                     height: 22vw;
                     @media screen and(max-width:$moblie) {
                         height: auto;
                     }
                 }
             }
-            .card-content{
-              height: 100px;
-              @media screen and(max-width:$moblie) {
-                height: auto;
-               
-            }
+            .card-content {
+                height: 100px;
+                @media screen and(max-width:$moblie) {
+                    height: auto;
+                }
             }
-            .price{
-                font-size:20px;
+            .price {
+                font-size: 20px;
                 @media screen and(max-width:350px) {
-                    font-size:18px;
-
-                   
+                    font-size: 16px;
                 }
             }
         }
@@ -841,45 +898,20 @@ $navbgcolor: #eb144c;
     padding-bottom: 5vw;
     #sec06-container-box {
         padding-top: 8vw;
-        background: url(./img/sec06/sec06-1.png), linear-gradient(180deg, transparent 50%, #fff 30%);
+        background: linear-gradient(180deg, #292421 50%, transparent 50%, #fff 50%);
+        // background: url(./img/sec06/sec06-1.png), linear-gradient(180deg, transparent 50%, #fff 30%);
+        // background:$navbgcolor;
         background-size: contain;
         background-repeat: no-repeat;
         background-blend-mode: overlay;
     }
     #sec06-title {
-        width: 75vw;
+        width: 80vw;
         margin: 0 auto;
         text-align: right !important;
         @media screen and(max-width:$moblie) {
             width: 100vw;
         }
-        h1 {
-            color: $navbgcolor;
-            font-size: 45px;
-            font-weight: 900;
-            padding: 5px 10px;
-            margin-top: 50px;
-            margin-right: 50px;
-            @media screen and(max-width:$moblie) {
-                font-size: 28px;
-                margin-top: 10px;
-                margin-right: 10px;
-            }
-        }
-        hr {
-            display: inline-block;
-            margin-right: 110px;
-            width: 5vw;
-            height: 5px;
-            color: $navbgcolor;
-            opacity: 1 !important;
-            @media screen and(max-width:$moblie) {
-                margin-top: 0;
-                width: 15vw;
-                height: 3px;
-                margin-right: 50px;
-            }
-        }
     }
     #sec06-container {
         text-align: center;
@@ -972,7 +1004,6 @@ $navbgcolor: #eb144c;
         a {
             text-decoration: none;
             color: #fff;
-           
         }
         h2 {
             font-size: 20px;
@@ -1012,18 +1043,17 @@ $navbgcolor: #eb144c;
     }
     hr {
         height: 1px;
-        background:#eee;
+        background: #eee;
         opacity: 1;
     }
     .content {
-        word-wrap:break-word;
+        word-wrap: break-word;
         p {
             line-height: 2;
             font-size: 18px;
         }
 
-        .video-work{
-
+        .video-work {
             #video2 {
                 video {
                     width: 100%;
@@ -1032,7 +1062,7 @@ $navbgcolor: #eb144c;
         }
     }
     .side-bar {
-        h1{
+        h1 {
             color: #e02d4b;
             font-size: 36px;
             font-weight: 900;
@@ -1063,7 +1093,7 @@ $navbgcolor: #eb144c;
             transition: 0.3s;
             cursor: pointer;
             &:hover {
-                color:$navbgcolor;
+                color: $navbgcolor;
             }
         }
         h1 {
@@ -1102,9 +1132,9 @@ $navbgcolor: #eb144c;
 
 @keyframes Cardload {
     0% {
-       opacity: 0;
+        opacity: 0;
     }
     100% {
         opacity: 1;
     }
-}
+}

top5-course-platform.html

@@ -35,7 +35,7 @@
     <section id="Navigation" class="container-fluid">
         <div id="nav" class="row">
             <div id="logo" class=" col-md-2 col-lg-2">
-                <a href=""> <img src="./img/logo03_png.png" alt=""></a>
+                <a href="./index.html"> <img src="./img/logo03_png.png" alt=""></a>
             </div>
             <div id="link" class="col-md-10 col-lg-10">
                 <a data-gt-target="#sec01 " data-gt-duration="500" data-gt-offset="100">最新課程</a>

writing-course.html

@@ -35,7 +35,7 @@
     <section id="Navigation" class="container-fluid">
         <div id="nav" class="row">
             <div id="logo" class=" col-md-2 col-lg-2">
-                <a href=""> <img src="./img/logo03_png.png" alt=""></a>
+                <a href="./index.html"> <img src="./img/logo03_png.png" alt=""></a>
             </div>
             <div id="link" class="col-md-10 col-lg-10">
                 <a data-gt-target="#sec01 " data-gt-duration="500" data-gt-offset="100">最新課程</a>