初版

goto.js

@@ -29,116 +29,130 @@ $( "#1" ).click(function() {
     });
   });
 
-  $( "#2" ).click(function() {
-    $.ajax('http://172.105.205.52:8000/tags', {
-        type: 'GET',  // http method
-        headers: { 'Access-Control-Allow-Origin': '*' },
-        success: function (res) {
-            var myJSON = JSON.stringify(res);
-            // var a = res;
-            // console.log(res);
-            var d = JSON.parse(myJSON);
-            console.log(d[1].name); 
-        },
+  // $( "#2" ).click(function() {
+  //   $.ajax('http://172.105.205.52:8000/tags', {
+  //       type: 'GET',  // http method
+  //       headers: { 'Access-Control-Allow-Origin': '*' },
+  //       success: function (res) {
+  //           var myJSON = JSON.stringify(res);
+  //           // var a = res;
+  //           // console.log(res);
+  //           var d = JSON.parse(myJSON);
+  //           console.log(d[1].name); 
+  //       },
         
-        error: function (err) {
-            console.log(err);
-        }
-    });
-  });
-  $( "#3" ).click(function() {
-    $.ajax('http://172.105.205.52:8000/tags', {
-        type: 'GET',  // http method
-        headers: { 'Access-Control-Allow-Origin': '*' },
-        success: function (res) {
-            var myJSON = JSON.stringify(res);
-            // var a = res;
-            // console.log(res);
-            var d = JSON.parse(myJSON);
-            console.log(d[2].name); 
-        },
+  //       error: function (err) {
+  //           console.log(err);
+  //       }
+  //   });
+  // });
+  // $( "#3" ).click(function() {
+  //   $.ajax('http://172.105.205.52:8000/tags', {
+  //       type: 'GET',  // http method
+  //       headers: { 'Access-Control-Allow-Origin': '*' },
+  //       success: function (res) {
+  //           var myJSON = JSON.stringify(res);
+  //           // var a = res;
+  //           // console.log(res);
+  //           var d = JSON.parse(myJSON);
+  //           console.log(d[2].name); 
+  //       },
         
-        error: function (err) {
-            console.log(err);
-        }
-    });
-  });
-  $( "#4" ).click(function() {
-    $.ajax('http://172.105.205.52:8000/tags', {
-        type: 'GET',  // http method
-        headers: { 'Access-Control-Allow-Origin': '*' },
-        success: function (res) {
-            var myJSON = JSON.stringify(res);
-            // var a = res;
-            // console.log(res);
-            var d = JSON.parse(myJSON);
-            console.log(d[3].name); 
-        },
+  //       error: function (err) {
+  //           console.log(err);
+  //       }
+  //   });
+  // });
+  // $( "#4" ).click(function() {
+  //   $.ajax('http://172.105.205.52:8000/tags', {
+  //       type: 'GET',  // http method
+  //       headers: { 'Access-Control-Allow-Origin': '*' },
+  //       success: function (res) {
+  //           var myJSON = JSON.stringify(res);
+  //           // var a = res;
+  //           // console.log(res);
+  //           var d = JSON.parse(myJSON);
+  //           console.log(d[3].name); 
+  //       },
         
-        error: function (err) {
-            console.log(err);
-        }
-    });
-  });
-  $( "#5" ).click(function() {
-    $.ajax('http://172.105.205.52:8000/tags', {
-        type: 'GET',  // http method
-        headers: { 'Access-Control-Allow-Origin': '*' },
-        success: function (res) {
-            var myJSON = JSON.stringify(res);
-            // var a = res;
-            // console.log(res);
-            var d = JSON.parse(myJSON);
-            console.log(d[4].name); 
-        },
+  //       error: function (err) {
+  //           console.log(err);
+  //       }
+  //   });
+  // });
+  // $( "#5" ).click(function() {
+  //   $.ajax('http://172.105.205.52:8000/tags', {
+  //       type: 'GET',  // http method
+  //       headers: { 'Access-Control-Allow-Origin': '*' },
+  //       success: function (res) {
+  //           var myJSON = JSON.stringify(res);
+  //           // var a = res;
+  //           // console.log(res);
+  //           var d = JSON.parse(myJSON);
+  //           console.log(d[4].name); 
+  //       },
         
-        error: function (err) {
-            console.log(err);
-        }
-    });
-  });
-
+  //       error: function (err) {
+  //           console.log(err);
+  //       }
+  //   });
+  // });
 
+// 手機板menu彈跳視窗
+$("#menu-box2").hide();
+$("#menu-box").hide();
 
+$(".link").click(function () {
+  $("#menu-box").fadeOut("slow", function () {
+    $("#menu-box2").fadeOut("slow");
+    // Animation complete.
+  });
+});
 
-// jquery
-// $(document).ready(function () {
-//     $.ajax('http://172.105.205.52:8000/tags', {
-//         type: 'GET',  // http method
-//         headers: { 'Access-Control-Allow-Origin': '*' },
-//         success: function (res) {
+$("#menu-btn1").click(function () {
+  $("#menu-box").fadeIn();
+  $("#menu-box2").fadeIn();
 
-//             var myJSON = JSON.stringify(res);
+});
 
-//             // var a = res;
-//             console.log(res);
-//             var d = JSON.parse(myJSON);
-//             console.log("start");
-//             console.log(d);
-//             console.log(d[0].name);
-//             console.log("end");
-            
-            
-               
-//         },
-        
-//         error: function (err) {
-//             console.log(err);
-//         }
-//     });
-//     $("#submit").bind('click', function () {
-//         var idiom = $("#idiom").val();
+$(".close").click(function () {
+  $("#menu-box").fadeOut();
+  $("#menu-box2").fadeOut();
 
-//     });
-// });
+});
 
-// $.get("date-time.php", function(data){
-//     console.log(res);
-// });
+// 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')
+  });
 
-$(".slider1").slick({
-    dots: true,
-    dotsClass: 'slick-dots',
-    speed: 1000,
+  // 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')
+  });
 
-});
+  // sec03排名table輪播
+$('#sec03-slider').slick({
+    arrows: false,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    infinite: true,
+  });
+  
+  $('#sec03-slider-next').click(function () {
+    $('#sec03-slider').slick('slickNext')
+  });

index.html

@@ -1,15 +1,1000 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <title>OpenTalk</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>opentalk</title>
+
+    <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" />
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
+    <link rel="stylesheet" href="./style.css">
 </head>
 <body>
-<img class="img-fluid" src="opentalk.webp"></img>
+    <!-- 主選單 -->
+    <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="">最新課程</a>
+                <a data-gt-target="#sec02" data-gt-duration="800" data-gt-offset="60">TOP 10 熱門課程</a>
+                <a data-gt-target="#sec04" data-gt-duration="500" data-gt-offset="60">專欄報導</a>
+                <a data-gt-target="#sec05" data-gt-duration="500" data-gt-offset="60">課程分類</a>
+                <a data-gt-target="#sec06" data-gt-duration="500" data-gt-offset="60">合作對象</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>
+    </section>
+    <!-- 手機板行動選單 -->
+    <div id="menu-box" class="container-fluid" style="padding:0;margin:0 ">
+        <div id="menu-box2">
+            <div style="text-align: right;">
+                <img class="close" src="./img/close.png" alt="">
+            </div>
+            <a class="link" data-gt-target="#sec01" data-gt-duration="500" data-gt-offset="0"
+                style="padding-top: 3vw;">最新課程</a>
+            <hr>
+            <a class="link" data-gt-target="#sec02-moblie" data-gt-duration="800" data-gt-offset="60">TOP10 熱門課程</a>
+            <hr>
+            <a class="link" data-gt-target="#sec04-moblie" data-gt-duration="500" data-gt-offset="60">專欄報導</a>
+            <hr>
+            <a class="link" data-gt-target="#sec05-moblie" data-gt-duration="500" data-gt-offset="60">課程分類</a>
+            <hr>
+            <a class="link" data-gt-target="#sec06" data-gt-duration="500" data-gt-offset="60">合作對象</a>
+            <hr>
+            <a class="link" data-gt-target="#footer" data-gt-duration="500" data-gt-offset="">聯絡我們</a>
+            <hr>
+
+        </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>
+                <hr class="line">
+            </div>
+            <div id="sec01-container" class="row row-cols-1 row-cols-md-4 g-4">
+                <div class="col">
+                    <div class="card">
+                        <img src="./img/sec01/sec01-01webp.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">標題</h5>
+                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
+                                additional</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card">
+                        <img src="./img/sec01/sec01-2webp.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">標題</h5>
+                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
+                                additional</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card">
+                        <img src="./img/sec01/sec01-3webp.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">標題</h5>
+                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
+                                additional</p>
+
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card">
+                        <img src="./img/sec01/sec01-4webp.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">標題</h5>
+                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
+                                additional</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+        </div>
+    </section>
+    <!-- 最新課程 手機板 -->
+    <section id="sec01-moblie">
+        <img id="sec01-slider-next" style="position: absolute;" class="arrow-table" src="./img/arrow-table.png" alt="">
+        <div id="sec01-moblie-title" class="container-fluid">
+            <div id="sec01-moblie-header">
+                <h1>最新課程</h1>
+                <hr>
+            </div>
+            <div id="sec01-moblie-container" class="row row-cols-1 row-cols-md-4 g-4">
+                <div class="col">
+                    <div class="card">
+                        <img src="./img/sec01/sec01-01webp.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">標題</h5>
+                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
+                                additional</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card">
+                        <img src="./img/sec01/sec01-2webp.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">標題</h5>
+                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
+                                additional</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card">
+                        <img src="./img/sec01/sec01-3webp.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">標題</h5>
+                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
+                                additional</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card">
+                        <img src="./img/sec01/sec01-4webp.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">標題</h5>
+                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
+                                additional</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+        </div>
+    </section>
+
+    <!-- 排名區塊 topbox 電腦版 -->
+    <section id="sec02">
+        <div id="sec02-container" class="container-fluid">
+            <div id="sec02-top-box" class="row">
+                <div id="sec02-top-title" class="col-lg-3">
+                    <h1>TOP 10</h1>
+                    <h1>熱門課程</h1>
+                    <hr>
+                </div>
+                <div id="sec02-content" class="col-lg-9">
+                    <div class="row">
+                        <div class="sec02-box1   col-lg-4">
+                            <a target="_blank"
+                                href="https://www.masterclass.com/classes/bobbi-brown-teaches-makeup-and-beauty"><img
+                                    src="./img/sec02/sec02-1-removebg-preview.png" alt=""></a>
+                            <div class="sec02-top-text"><span>1</span>Bobbi Brown</div>
+                            <div>你會學會如何選擇正確的基礎，做一個煙熏的眼睛和動人的嘴唇，並按著你的樣子呈現，無論是白天或晚上。但最重要的是，你會學會如何對自己的皮膚有信心。</div>
+                        </div>
+                        <div class="sec02-box1   col-lg-4">
+                            <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>13 道餐廳風格的菜肴專為家庭烹飪而設計，您可以學習如何使用日常食材構建從開胃菜到甜點的高級菜肴。 </div>
+                        </div>
+                        <div class="sec02-box1   col-lg-4">
+                            <a target="_blank"
+                                href="https://www.masterclass.com/classes/jane-goodall-teaches-conservation"></a><img
+                                src="./img/sec02/sec02-3-removebg-preview.png" alt="">
+                            <div class="sec02-top-text"><span>3</span>Dr. Jane Goodall</div>
+                            <div>珍古德道爾博士分享了她對黑猩猩行為模式的研究，以及他們教她什麼關於保護的工作。您將學習如何在當地採取行動並保護地球。</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </section>
+    <!--排名區塊Top-box- 手機板-->
+    <section id="sec02-moblie">
+        <div id="sec02-moblie-header">
+            <h1>TOP10 熱門課程</h1>
+            <hr>
+        </div>
+        <div id="sec02-container" class="container-fluid">
+            <div id="sec02-content">
+                <div id="sec02-top-box" class="row" style="margin-right: 0; padding-right:0;">
+                    <div class="sec02-box1 col-4 order-2">
+                        <img width="130px;" class="" id="top1" src="./img/sec02/sec02-1-removebg-preview.png" alt="">
+                        <div class="sec02-top-text"><span>1</span>Bobbi</div>
+                        <div class="sec02-top-text">你會學會如何對自己的皮膚有信心。</div>
+                    </div>
+                    <div class="sec02-box1 col-4 order-1">
+                        <img width="110px;" src="./img/sec02/sec02-2.png" alt="">
+                        <div class="sec02-top-text"><span>2</span>Gordon</div>
+                        <div class="sec02-top-text" style="display: block;">您可以學習如何使用日常食材構建從開胃菜到甜點的高級菜肴。 </div>
+                    </div>
+                    <div class="sec02-box1 col-4  order-3">
+                        <img width="115px;" src="./img/sec02/sec02-3-removebg-preview.png" alt="">
+                        <div class="sec02-top-text"><span>3</span>Dr. Jane</div>
+                        <div class="sec02-top-text" style="display: block;">您將學習如何在當地採取行動並保護地球。</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        </div>
+
+    </section>
+
+    <!-- 排名區塊table 電腦版 -->
+    <section id="sec03">
+        <div id="sec03-table" class="container-fluid">
+            <div class="row" style="box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);">
+                <div class="col-lg-6">
+                    <table class="table">
+                        <tbody>
+                            <tr>
+                                <th scope="row">1</th>
+                                <td>
+                                    <img src="./img/sec03/table1.jpg" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block;">
+                                        <div>
+                                            <h1>12堂小白手機攝影课</h1>
+                                        </div>
+                                        <div>
+                                            <p>一天提升手機技能晉升攝影大神</p>
+                                        </div>
+                                    </div>
+                                </td>
+
+                            </tr>
+                            <tr>
+                                <th scope="row">2</th>
+                                <td>
+                                    <img src="./img/sec03/table2.jpg" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block;">
+                                        <div>
+                                            <h1>靠PPT設計翻身年收破百萬</h1>
+                                        </div>
+                                        <div>
+                                            <p>被你老板、同事、客戶驚豔全場的8堂課</p>
+                                        </div>
+                                    </div>
+                                </td>
+
+                            </tr>
+                            <tr>
+                                <th scope="row">3</th>
+                                <td>
+                                    <img src="./img/sec03/table3.jpg" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block;">
+                                        <div>
+                                            <h1>超級逆齡煥顏術</h1>
+                                        </div>
+                                        <div>
+                                            <p>女人我最大長駐示範老師</p>
+                                        </div>
+                                    </div>
+                                </td>
+
+
+                            </tr>
+                            <tr>
+                                <th scope="row">4</th>
+                                <td>
+                                    <img src="./img/sec03/table2-2.jpg" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block;">
+                                        <div>
+                                            <h1>Modern and Contemporary</h1>
+                                            <h1> Art and Desi</h1>
+                                        </div>
+                                        <div>
+                                            <p>專項課程 </p>
+                                        </div>
+                                    </div>
+                                </td>
+
+                            </tr>
+                            <tr>
+                                <th scope="row">5</th>
+                                <td>
+                                    <img src="./img/sec03/table5.jpg" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block">
+                                        <div>
+                                            <h1>有氧廋身塑形操</h1>
+                                        </div>
+                                        <div>
+
+                                            <p>每天居家15分鐘跳出好身材 </p>
+
+                                        </div>
+                                    </div>
+                                </td>
+
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="col-lg-6">
+                    <table class="table ">
+                        <tbody>
+                            <tr>
+                                <th scope="row">1</th>
+                                <td>
+                                    <img src="./img/sec03/table2-1.png" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block ;">
+                                        <div>
+                                            <h1>解密圖像故事力 </h1>
+                                        </div>
+                                        <div>
+                                            <p>打造深入人心的創作</p>
+                                        </div>
+                                    </div>
+                                </td>
+
+                            </tr>
+                            <tr>
+                                <th scope="row">2</th>
+                                <td>
+                                    <img src="./img/sec03/table2-2.jpg" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block ;">
+                                        <div>
+                                            <h1>借茶修為以茶養德</h1>
+                                        </div>
+                                        <div>
+                                            <p style="opacity: 0;">打造深入人心的創作</p>
+                                        </div>
+                                    </div>
+                                </td>
+
+                            </tr>
+                            <tr>
+                                <th scope="row">3</th>
+                                <td>
+                                    <img src="./img/sec03/table2-3.png" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block ;">
+                                        <div>
+                                            <h1>【多益職涯力】</h1>
+                                        </div>
+                                        <div>
+                                            <p>新制多益神速解題課程</p>
+                                        </div>
+                                    </div>
+                                </td>
+
+
+                            </tr>
+                            <tr>
+                                <th scope="row">4</th>
+                                <td>
+                                    <img src="./img/sec03/table2-4.jpg" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block ;">
+                                        <div>
+                                            <h1>EXCEL實戰速成</h1>
+                                            <h1 style="opacity: 0;">EXCEL實戰速成</h1>
+                                          
+                                        </div>
+                                        <div>
+                                            <p>職場晉升加薪秘密武器</p>
+                                        </div>
+                                    </div>
+                                </td>
+
+                            </tr>
+                            <tr>
+                                <th scope="row">5</th>
+                                <td>
+                                    <img src="./img/sec03/table2-5.webp" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block ;">
+                                        <div>
+                                            <h1>中醫養顏凍齡術</h1>
+                                        </div>
+                                        <div>
+                                            <p>劉詩詩佟麗娅明星御用中醫師</p>
+                                        </div>
+                                    </div>
+                                </td>
+
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        </div>
+    </section>
+    <!-- 排名區塊table手機板 -->
+    <section id="sec03-moblie">
+        <div id="sec03-table" class="container-fluid">
+            <img id="sec03-slider-next" style="position: absolute;" class="arrow-table" src="./img/arrow-table.png"
+                alt="">
+            <div id="sec03-slider" class="row">
+                <div id="sec03-slider1" class="col-6" style="box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);">
+
+                    <table class="table">
+                        <tbody>
+                            <tr>
+                                <th scope="row">1</th>
+                                <td>
+                                    <img src="./img/sec03/table1.jpg" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block;">
+                                        <div>
+                                            <h1>12堂小白手機攝影课</h1>
+                                        </div>
+                                        <div>
+                                            <p>一天提升手機技能晉升攝影大神</p>
+                                        </div>
+                                    </div>
+                                </td>
+
+                            </tr>
+                            <tr>
+                                <th scope="row">2</th>
+                                <td>
+                                    <img src="./img/sec03/table2.jpg" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block;">
+                                        <div>
+                                            <h1>靠PPT設計翻身年收破百萬</h1>
+                                        </div>
+                                        <div>
+                                            <p>被你老板、同事、客戶驚豔全場的8堂課</p>
+                                        </div>
+                                    </div>
+                                </td>
+
+                            </tr>
+                            <tr>
+                                <th scope="row">3</th>
+                                <td>
+                                    <img src="./img/sec03/table3.jpg" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block;">
+                                        <div>
+                                            <h1>超級逆齡煥顏術</h1>
+                                        </div>
+                                        <div>
+                                            <p>女人我最大長駐示範老師</p>
+                                        </div>
+                                    </div>
+                                </td>
+
+
+                            </tr>
+                            <tr>
+                                <th scope="row">4</th>
+                                <td>
+                                    <img src="./img/sec03/top4webp.webp" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block;">
+                                        <div>
+                                            <h1>Modern and Contemporary</h1>
+                                            <h1> Art and Desi</h1>
+                                        </div>
+                                        <div>
+                                            <p>專項課程 </p>
+                                        </div>
+                                    </div>
+                                </td>
+
+                            </tr>
+                            <tr>
+                                <th scope="row">5</th>
+                                <td>
+                                    <img src="./img/sec03/table5.jpg" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block">
+                                        <div>
+                                            <h1>有氧廋身塑形操</h1>
+                                        </div>
+                                        <div>
+
+                                            <p>每天居家15分鐘跳出好身材 </p>
+
+                                        </div>
+                                    </div>
+                                </td>
+
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div id="sec03-slider2" class="col-6" style=" box-shadow: 5px 0 10px -5px rgba(0, 0, 0, 0.3);">
+                    <table class="table ">
+                        <tbody>
+                            <tr>
+                                <th scope="row">1</th>
+                                <td>
+                                    <img src="./img/sec03/table2-1.png" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block ;">
+                                        <div>
+                                            <h1>解密圖像故事力 </h1>
+                                        </div>
+                                        <div>
+                                            <p>打造深入人心的創作</p>
+                                        </div>
+                                    </div>
+                                </td>
+
+                            </tr>
+                            <tr>
+                                <th scope="row">2</th>
+                                <td>
+                                    <img src="./img/sec03/table2-2.jpg" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block ;">
+                                        <div>
+                                            <h1>借茶修為以茶養德</h1>
+                                        </div>
+                                        <div>
+
+                                        </div>
+                                    </div>
+                                </td>
+
+                            </tr>
+                            <tr>
+                                <th scope="row">3</th>
+                                <td>
+                                    <img src="./img/sec03/table2-3.png" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block ;">
+                                        <div>
+                                            <h1>【多益職涯力】</h1>
+                                        </div>
+                                        <div>
+                                            <p>新制多益神速解題課程</p>
+                                        </div>
+                                    </div>
+                                </td>
+
+
+                            </tr>
+                            <tr>
+                                <th scope="row">4</th>
+                                <td>
+                                    <img src="./img/sec03/table2-4.jpg" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block ;">
+                                        <div>
+                                            <h1>EXCEL實戰速成</h1>
+                                        </div>
+                                        <div>
+                                            <p>職場晉升加薪秘密武器</p>
+                                        </div>
+                                    </div>
+                                </td>
+
+                            </tr>
+                            <tr>
+                                <th scope="row">5</th>
+                                <td>
+                                    <img src="./img/sec03/table2-5.webp" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block ;">
+                                        <div>
+                                            <h1>中醫養顏凍齡術</h1>
+                                        </div>
+                                        <div>
+                                            <p>劉詩詩佟麗娅明星御用中醫師</p>
+                                        </div>
+                                    </div>
+                                </td>
+
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 專欄報導---電腦版 -->
+    <section id="sec04">
+        <div class="container-fluid">
+            <div id="sec04-title" style="text-align: center;">
+                <h1>專欄報導</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">
+                        <img src="./img/sec01/sec01-01webp.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">標題</h5>
+                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
+                                additional</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card">
+                        <img src="./img/sec01/sec01-2webp.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">標題</h5>
+                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
+                                additional</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card">
+                        <img src="./img/sec01/sec01-3webp.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">標題</h5>
+                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
+                                additional</p>
+
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card">
+                        <img src="./img/sec01/sec01-4webp.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">標題</h5>
+                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
+                                additional</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+        </div>
+    </section>
+    <!-- 專欄報導  手機板-->
+    <section id="sec04-moblie">
+
+        <div id="sec04-moblie-title" class="container-fluid">
+            <div id="sec04-moblie-header">
+                <h1>專欄報導</h1>
+                <hr>
+            </div>
+            <div id="sec04-moblie-container" class="row row-cols-1 row-cols-md-4 g-4">
+                <div class="col">
+                    <div class="card">
+                        <img src="./img/sec01/sec01-01webp.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">標題</h5>
+                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
+                                additional</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card">
+                        <img src="./img/sec01/sec01-2webp.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">標題</h5>
+                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
+                                additional</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card">
+                        <img src="./img/sec01/sec01-3webp.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">標題</h5>
+                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
+                                additional</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card">
+                        <img src="./img/sec01/sec01-4webp.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">標題</h5>
+                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
+                                additional</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+        </div>
+    </section>
+
+    <!-- 課程分類 -->
+    <section id="sec05" class="container-fluid" style="padding:5vw 0;">
+        <div id="sec05-title">
+            <h1>課程分類</h1>
+            <hr class="line">
+        </div>
+        <div id="sec05-container" class="container-fluid">
+            <div id="sec05-course" class="row">
+                <div class="col-12 col-lg-6">
+                    <div class="card mb-3" style="max-width: 540px;">
+                        <div class="row g-0">
+                            <div class="col-6  col-lg-4">
+                                <img src="..." class="img-fluid rounded-start" alt="...">
+                                <small class="text-muted">
+                                    <img class="m-1" style="width: 20px;" src="./img/sec05/master.png" alt="">4320
+                                </small>
+                            </div>
+                            <div class="col-6  col-lg-8">
+                                <div class="card-body">
+                                    <h5 class="card-title">Card title</h5>
+                                    <p class="card-text">This is a wider card with supporting text below as a natural
+                                        lead-in to additional content. This content is a little bit longer.</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>125分鐘</span>
+                                        </small>
+                                        <small style="color:#eb144c; font-size:20px;" class="col-4">NT$1200</small>
+
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12 col-lg-6">
+                    <div class="card mb-3" style="max-width: 540px;">
+                        <div class="row g-0">
+                            <div class="col-6  col-lg-4">
+                                <img src="..." class="img-fluid rounded-start" alt="...">
+                            </div>
+                            <div class="col-6  col-lg-8">
+                                <div class="card-body">
+                                    <h5 class="card-title">Card title</h5>
+                                    <p class="card-text">This is a wider card with supporting text below as a natural
+                                        lead-in to additional content. This content is a little bit longer.</p>
+                                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12 col-lg-6">
+                    <div class="card mb-3" style="max-width: 540px;">
+                        <div class="row g-0">
+                            <div class="col-6  col-lg-4">
+                                <img src="..." class="img-fluid rounded-start" alt="...">
+                            </div>
+                            <div class="col-6  col-lg-8">
+                                <div class="card-body">
+                                    <h5 class="card-title">Card title</h5>
+                                    <p class="card-text">This is a wider card with supporting text below as a natural
+                                        lead-in to additional content. This content is a little bit longer.</p>
+                                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12 col-lg-6">
+                    <div class="card mb-3" style="max-width: 540px;">
+                        <div class="row g-0">
+                            <div class="col-6  col-lg-4">
+                                <img src="..." class="img-fluid rounded-start" alt="...">
+                            </div>
+                            <div class="col-6  col-lg-8">
+                                <div class="card-body">
+                                    <h5 class="card-title">Card title</h5>
+                                    <p class="card-text">This is a wider card with supporting text below as a natural
+                                        lead-in to additional content. This content is a little bit longer.</p>
+                                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <img src="./img/sec05img1.webp" alt="">
+            <div class="row">
+                <div class="col-12 col-lg-6">
+                    <div class="card mb-3" style="max-width: 540px;">
+                        <div class="row g-0">
+                            <div class="col-6  col-lg-4">
+                                <img src="..." class="img-fluid rounded-start" alt="...">
+                            </div>
+                            <div class="col-6  col-lg-8">
+                                <div class="card-body">
+                                    <h5 class="card-title">Card title</h5>
+                                    <p class="card-text">This is a wider card with supporting text below as a natural
+                                        lead-in to additional content. This content is a little bit longer.</p>
+                                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12 col-lg-6">
+                    <div class="card mb-3" style="max-width: 540px;">
+                        <div class="row g-0">
+                            <div class="col-6 col-lg-4">
+                                <img src="..." class="img-fluid rounded-start" alt="...">
+                            </div>
+                            <div class="col-6 col-lg-8">
+                                <div class="card-body">
+                                    <h5 class="card-title">Card title</h5>
+                                    <p class="card-text">This is a wider card with supporting text below as a natural
+                                        lead-in to additional content. This content is a little bit longer.</p>
+                                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12 col-lg-6">
+                    <div class="card mb-3" style="max-width: 540px;">
+                        <div class="row g-0">
+                            <div class="col-6 col-lg-4">
+                                <img src="..." class="img-fluid rounded-start" alt="...">
+                            </div>
+                            <div class="col-6 col-lg-8">
+                                <div class="card-body">
+                                    <h5 class="card-title">Card title</h5>
+                                    <p class="card-text">This is a wider card with supporting text below as a natural
+                                        lead-in to additional content. This content is a little bit longer.</p>
+                                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12 col-lg-6">
+                    <div class="card mb-3" style="max-width: 540px;">
+                        <div class="row g-0">
+                            <div class="col-6 col-lg-4">
+                                <img src="..." class="img-fluid rounded-start" alt="...">
+                            </div>
+                            <div class="col-6 col-lg-8">
+                                <div class="card-body">
+                                    <h5 class="card-title">Card title</h5>
+                                    <p class="card-text">This is a wider card with supporting text below as a natural
+                                        lead-in to additional content. This content is a little bit longer.</p>
+                                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 合作對象  電腦版-->
+    <section id="sec06">
+        <div id="sec06-container-box">
+            <div class="">
+                <div id="sec06-title">
+                    <h1>合作對象</h1>
+                    <hr>
+                </div>
+            </div>
+
+            <div id="sec06-container" class="container-fluid">
+                <div class="card">
+
+                    <div class="row">
+                        <div class="row">
+                            <div class="sec09-1 col-3 py-3"><a target="_blank" href="https://mintable.app/browse"><img
+                                        class="img-fluid" src="./img/sec06/sec06-01-removebg-preview.png" alt=""></a>
+                            </div>
+
+                            <div class="sec09-1 col-3 py-3"><a target="_blank" href="https://knownorigin.io/"><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.binance.com/zh-TW/nft"><img class="img-fluid"
+                                        src="./img/sec06/sec06-04.png" alt=""></a></div>
+
+
+
+                            <div class="sec09-1 col-3 py-3"><a target="_blank" href="https://mintable.app/browse"><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="https://makersplace.com/"><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://opensea.io/"><img
+                                        class="img-fluid" src="./img/sec06/sec06-02.png" alt=""></a></div>
+
+
+                            <div class="col-3 py-3 d-flex align-items-center justfy-content-center"><a target="_blank"
+                                    href=" https://superrare.com/"><img class="img-fluid"
+                                        src="./img/sec06/sec06-06-removebg-preview.png" alt=""></a>
+                            </div>
+                            <div class="sec09-1 col-3 py-3 d-flex align-items-center justfy-content-center"><a
+                                    target="_blank" href="https://zora.co/"><img class="sec09-7 img-fluid"
+                                        src="./img/sec06/sec06-05.png" alt=""></a></div>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- footer -->
+    <footer id="footer" class="container-fluid" style="padding:0;margin:0">
+        <div class="footer-link">
+
+            <a target="https://www.facebook.com/nftboard"
+                href="https://www.facebook.com/nftboard"><span>｜</span>粉絲專頁<span>｜</span></a>
+            <a href=""><span>｜</span>OpenTalk<span>｜</span></a>
+            <a href=""><span>｜</span>Ark.cards<span>｜</span></a>
+            <a href=""><span>｜</span>NFTfair.art<span>｜</span></a>
+        </div>
+        <div class="text">
+            <a href="tel:0988268521">
+                <h2>客服電話：0988268521</h2>
+            </a>
+            <a href="mailto:elainsmail@gmail.com">
+                <h2>客服信箱：elainsmail@gmail.com</h2>
+            </a>
+            <h2 style="display: block;">公司名稱：微生活知識科技公司</h2>
+            <p>開拓Open Talk &copy; All Rights Reserved.</p>
+        </div>
+    </footer>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
+        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
+        crossorigin="anonymous"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+    <script src="./goto.js"></script>
+    <!-- 課程分類 -->
+    <script>
+        $(document).ready(function () {
+
+            $.ajax({
+                method: "POST",
+                url: "https://welife.asia:8002/get_courses",
+                data: jsonString,
+                dataType: "json",
+            })
+
+                .done(function (msg) {
+                    var sec05course = '';
+                    console.log(msg);
+                    const limit = 7;
+                    for (var i = 0; i < limit; i++) {
+                        sec05course += ' \
+                <div  class="col-12 col-lg-6">\
+                    <div class="card mb-3" style="max-width: 540px;">\
+                        <div class="row g-0">\
+                            <div class="col-6  col-lg-4">\
+                                <img src="'+ msg[i].cover_img +'" class="img-fluid rounded-start" alt="">\
+                                <small class="text-muted"><img class="m-1" style="width: 20px;" src="./img/sec05/master.png" alt="">'+ msg[i].units +'</small>\
+                            </div>\
+                            <div class="col-6  col-lg-8">\
+                               <h5 class="card-title">'+ msg[i].title +'</h5>\
+                              <p class="card-text">'+ 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 +'</span>\
+                                    </small>\
+                                    <small style="color:#eb144c; font-size:20px;" class="col-4">'+ msg[i].price_discount +'</small>\
+                                </p>\
+                            </div>\
+                        </div> \
+                    </div> \
+                </div>';
+
+                    }
+                    // $('#sec-work-box').html(sec05course);
+                    // var test = msg[0].newstext1;
+
+                    // $('#jsontest').append(test);
+                });
+
+
+
+        });
+    </script>
 </body>
 </html>

style.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 * {
   margin: 0;
   padding: 0;
@@ -5,144 +6,1044 @@
           box-sizing: border-box;
 }
 
-body {
-  height: 2800px;
+.container-fluid {
+  width: 80vw;
+  margin: 0 auto;
 }
 
-body hr {
-  margin: 20px;
+@media screen and (max-width: 767px) {
+  .container-fluid {
+    width: 100vw;
+  }
 }
 
-#banner {
+#Navigation {
   width: 100vw;
-  height: 500px;
+  background-color: #eb144c;
+  color: #fff;
+  position: fixed;
+  opacity: 1 !important;
+  z-index: 20;
 }
 
-.marquee {
-  margin: 100px auto;
-  height: 100px;
-  width: 1000px;
-  overflow: hidden;
+#Navigation #logo {
+  padding-top: 3vw;
+}
+
+@media screen and (max-width: 767px) {
+  #Navigation #logo {
+    padding: 15px;
+  }
+}
+
+#Navigation #logo img {
+  width: 180px;
+}
+
+@media screen and (max-width: 767px) {
+  #Navigation #logo img {
+    width: 140px;
+  }
+}
+
+#Navigation #link {
+  padding: 4vw 1vw 2vw 1vw;
+}
+
+@media screen and (max-width: 767px) {
+  #Navigation #link {
+    display: none;
+  }
+}
+
+#Navigation #link a {
+  text-decoration: none;
+  color: #fff;
+  letter-spacing: 1px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 15px;
   position: relative;
-  font-size: 48px;
 }
 
-.marquee #marquee-box {
+#Navigation #link a :hover {
+  opacity: 0.8;
+}
+
+#Navigation #link a:after {
+  content: "";
   display: block;
-  width: 200%;
-  height: 75px;
+  width: 80%;
+  height: 3px;
+  background-color: #fff;
   position: absolute;
-  overflow: hidden;
-  -webkit-animation: marquee 5s linear infinite;
-          animation: marquee 5s linear infinite;
+  left: 12%;
+  bottom: 0;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  opacity: 0;
 }
 
-.marquee #marquee-box .span {
-  float: left;
-  width: 50%;
+#Navigation #link a:hover:after {
+  width: 80%;
+  opacity: 1;
 }
 
-@-webkit-keyframes marquee {
-  0% {
-    left: 0;
+@media screen and (max-width: 1024px) {
+  #Navigation #link a {
+    padding: 5px;
+    padding-top: 2vw;
   }
-  100% {
-    left: -100%;
+}
+
+#Navigation #menu-btn1 {
+  position: absolute;
+  right: 2vw;
+  top: 5vw;
+  width: 15vw;
+  z-index: 6;
+}
+
+@media screen and (min-width: 1025px) {
+  #Navigation #menu-btn1 {
+    display: none;
   }
 }
 
-@keyframes marquee {
-  0% {
-    left: 0;
+@media screen and (min-width: 768px) {
+  #Navigation #menu-btn1 {
+    display: none;
   }
-  100% {
-    left: -100%;
+}
+
+#menu-box {
+  width: 40vw;
+  right: 0px;
+  position: fixed;
+  z-index: 20;
+  overflow: hidden;
+  display: none;
+}
+
+@media screen and (min-width: 1025px) {
+  #menu-box {
+    display: none;
   }
 }
 
-#tag {
+#menu-box hr {
+  margin: 5px auto !important;
+  width: 25vw;
+  background: #fff;
+  opacity: 1 !important;
+}
+
+#menu-box #menu-box2 {
+  padding-bottom: 5vw;
+  position: relative;
+  width: 40vw;
+  background-color: #eb144c;
+  z-index: 7;
+  text-align: center;
+}
+
+#menu-box #menu-box2 .close {
+  padding: 30px 15px 15px 15px;
+}
+
+#menu-box #menu-box2 a {
+  display: inline-block;
+  text-decoration: none;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 900;
+  text-align: center;
+  padding: 0 !important;
+}
+
+#banner {
   width: 100vw;
+  display: inline-block;
+  background: #fff;
+}
+
+#banner #banner-container {
+  width: 80vw;
+  margin: 50px auto;
+  padding-bottom: 5vw;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container {
+    width: 100vw;
+    margin: 0;
+    padding-bottom: 15vw;
+  }
+}
+
+#banner #banner-container img {
+  padding-top: 10vw;
+  width: 80vw;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container img {
+    padding-top: 15vw;
+    width: 100vw;
+  }
+}
+
+#sec01 {
+  padding-bottom: 10vw;
+  background: #fff;
+}
+
+@media screen and (max-width: 767px) {
+  #sec01 {
+    display: none;
+  }
+}
+
+#sec01 #sec01-title {
+  margin-bottom: 50px;
+}
+
+#sec01 #sec01-title h1 {
   text-align: center;
+  color: #e02d4b;
+  font-size: 45px;
+  font-weight: 900;
+  padding: 5px 10px;
 }
 
-#tag .btn {
-  padding: 15px;
-  width: 150px;
+@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%;
+}
+
+#sec01 #sec01-container .card {
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+}
+
+#sec01 #sec01-container .card img {
+  padding: 5px;
+  height: 150px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+#sec01 #sec01-container .card .card-title {
+  font-weight: 900;
+}
+
+#sec01-moblie {
+  padding-top: 5vw;
+  padding-bottom: 5vw;
+  background: #fff;
+  position: relative;
+  overflow: hidden;
+}
+
+#sec01-moblie .arrow-table {
+  position: fixed;
+  width: 25px;
+  right: 15px;
+  bottom: 240px;
+  z-index: 6;
+}
+
+@media screen and (max-width: 350px) {
+  #sec01-moblie .arrow-table {
+    right: 10px;
+  }
+}
+
+@media screen and (min-width: 1025px) {
+  #sec01-moblie {
+    display: none;
+  }
+}
+
+#sec01-moblie #sec01-moblie-header h1 {
+  text-align: center;
+  color: #e02d4b;
+  font-size: 45px;
+  font-weight: 900;
+  padding: 5px 10px;
+}
+
+@media screen and (max-width: 767px) {
+  #sec01-moblie #sec01-moblie-header h1 {
+    font-weight: 900;
+    font-size: 32px;
+  }
+}
+
+#sec01-moblie #sec01-moblie-header hr {
+  margin: 10px auto !important;
+  width: 25vw;
+  height: 5px;
+  color: #e02d4b;
   margin: 10px;
-  background-color: #CE0000;
+  opacity: 1 !important;
+}
+
+#sec01-moblie #sec01-moblie-container {
+  padding-top: 10vw;
+}
+
+#sec01-moblie #sec01-moblie-container .col {
+  margin: 10px;
+}
+
+#sec01-moblie #sec01-moblie-container .col .card {
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
   border-radius: 10px;
-  font-size: 24px;
+}
+
+#sec01-moblie #sec01-moblie-container .col .card img {
+  height: 150px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+#sec01-moblie #sec01-moblie-container .col .card .card-title {
+  font-weight: 900;
+}
+
+#sec01-moblie #sec01-moblie-container .col .card .learn-more {
+  width: 120px;
+}
+
+#sec02 {
+  background: #eb144c;
+  padding: 5vw 0px;
+}
+
+@media screen and (max-width: 767px) {
+  #sec02 {
+    display: none;
+  }
+}
+
+#sec02 #sec02-container {
+  width: 90vw;
+  padding: 15px;
+  font-weight: 900;
   color: #fff;
-  border: none;
+  position: relative;
 }
 
-#Search-result .result-box {
-  margin: 50px auto;
-  width: 700px;
-  display: -ms-grid;
-  display: grid;
-  -ms-grid-columns: (1fr)[2];
-      grid-template-columns: repeat(2, 1fr);
-  grid-gap: 10px;
+#sec02 #sec02-container #sec02-top-box {
+  position: relative;
 }
 
-#Search-result .result-box h1 {
-  margin: 10px;
+#sec02 #sec02-container #sec02-top-box #sec02-top-title {
+  text-align: center;
+}
+
+#sec02 #sec02-container #sec02-top-box #sec02-top-title hr {
+  width: 5vw;
+  height: 5px;
+  color: #fff;
+  margin: 10px auto;
+  opacity: 1 !important;
+}
+
+@media screen and (max-width: 767px) {
+  #sec02 #sec02-container #sec02-top-box #sec02-top-title hr {
+    width: 30vw;
+  }
+}
+
+#sec02 #sec02-container #sec02-top-box #sec02-content {
+  position: absolute;
+  top: -150px;
+  left: 300px;
+}
+
+#sec02 #sec02-container #sec02-top-box .sec02-box1 {
+  color: #fff;
+}
+
+#sec02 #sec02-container #sec02-top-box .sec02-box1 img {
+  display: inline;
+  width: 200px;
+  height: 200px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+#sec02 #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text {
+  font-size: 20px;
+}
+
+#sec02 #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text span {
+  font-size: 30px;
+}
+
+#sec02-moblie {
+  padding-top: 3vw;
+}
+
+@media screen and (min-width: 1025px) {
+  #sec02-moblie {
+    display: none;
+  }
 }
 
-#Search-result .result-box p {
-  padding: 15px 0;
+#sec02-moblie #sec02-moblie-header h1 {
+  text-align: center;
+  color: #eb144c;
+  font-size: 45px;
+  font-weight: 900;
+  padding: 5px 10px;
+}
+
+@media screen and (max-width: 767px) {
+  #sec02-moblie #sec02-moblie-header h1 {
+    font-weight: 900;
+    font-size: 32px;
+  }
+}
+
+#sec02-moblie #sec02-moblie-header hr {
+  margin: 10px auto !important;
+  width: 25vw;
+  height: 5px;
+  color: #eb144c;
   margin: 10px;
+  opacity: 1 !important;
 }
 
-#Search-result .result-box span {
-  padding: 0px 10px;
+#sec02-moblie #sec02-container {
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #fff), color-stop(40%, transparent), color-stop(20%, #eb144c));
+  background: linear-gradient(180deg, #fff 20%, transparent 40%, #eb144c 20%);
+  padding: 15px;
+  font-weight: 900;
+  color: #fff;
+  text-align: right;
+  padding: 20vw 0;
 }
 
-#logo {
-  width: 100vw;
+#sec02-moblie #sec02-container #sec02-content {
+  position: relative;
+}
+
+@media screen and (max-width: 350px) {
+  #sec02-moblie #sec02-container #sec02-top-box {
+    left: 10px;
+  }
+}
+
+#sec02-moblie #sec02-container #sec02-top-box .sec02-box1 {
+  color: #fff;
+}
+
+@media screen and (max-width: 350px) {
+  #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 #top1 {
+    width: 100px;
+    height: 130px;
+  }
+}
+
+@media screen and (max-width: 350px) {
+  #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 img {
+    width: 70px;
+    height: 100px;
+  }
+}
+
+#sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text {
+  font-size: 12px;
   text-align: center;
 }
 
-@media screen and (max-width: 1024px) {
-  #logo {
-    width: 80vw;
-    margin: 0 auto;
+#sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text span {
+  font-size: 30px;
+}
+
+@media screen and (max-width: 350px) {
+  #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text span {
+    font-size: 25px;
+  }
+}
+
+#sec03 {
+  padding-bottom: 5vw;
+}
+
+@media screen and (max-width: 767px) {
+  #sec03 {
+    display: none;
+  }
+}
+
+#sec03 #sec03-table .sec03-table-title {
+  font-family: 微軟正黑體;
+  font-weight: 900;
+  padding: 15px;
+  font-size: 35px;
+}
+
+#sec03 #sec03-table .table th {
+  font-size: 40px;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+#sec03 #sec03-table .table td {
+  padding: 15px;
+}
+
+#sec03 #sec03-table .table img {
+  width: 80px;
+}
+
+#sec03 #sec03-table .table .sec03-table-text {
+  padding: 10px;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+#sec03 #sec03-table .table .sec03-table-text h1 {
+  font-size: 20px;
+  margin: 0;
+}
+
+#sec03 #sec03-table .table .sec03-table-text p {
+  margin: 0;
+}
+
+#sec03-moblie {
+  position: relative;
+}
+
+#sec03-moblie .arrow-table {
+  position: fixed;
+  width: 25px;
+  right: 15px;
+  bottom: 250px;
+  z-index: 6;
+}
+
+@media screen and (max-width: 350px) {
+  #sec03-moblie .arrow-table {
+    right: 10px;
+    bottom: 200px;
+  }
+}
+
+#sec03-moblie .sec03-table-title,
+#sec03-moblie .sec03-table-title2 {
+  font-family: 微軟正黑體;
+  font-weight: 900;
+  font-size: 14px;
+  display: inline-block;
+  color: #9b9b9b;
+}
+
+#sec03-moblie .contant-toggle {
+  display: inline-block;
+  color: #000;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #000;
+}
+
+#sec03-moblie #sec03-slider {
+  padding-top: 5vw;
+}
+
+#sec03-moblie #sec03-slider .slick-slide img {
+  display: inline;
+}
+
+#sec03-moblie #sec03-slider #sec03-slider1,
+#sec03-moblie #sec03-slider #sec03-slider2 {
+  margin: 0 5px;
+}
+
+@media screen and (max-width: 350px) {
+  #sec03-moblie #sec03-slider #sec03-slider1,
+  #sec03-moblie #sec03-slider #sec03-slider2 {
+    margin: 0 5px;
+  }
+}
+
+#sec03-moblie #sec03-slider .table th {
+  font-size: 40px;
+  display: table-cell;
+  vertical-align: middle;
+  padding: 15px;
+}
+
+@media screen and (max-width: 350px) {
+  #sec03-moblie #sec03-slider .table th {
+    font-size: 30px;
   }
 }
 
-#logo .logo {
+#sec03-moblie #sec03-slider .table td {
+  display: table-cell;
+  vertical-align: middle;
   padding: 15px;
-  width: 150px;
+  padding: 10px;
+}
+
+@media screen and (max-width: 350px) {
+  #sec03-moblie #sec03-slider .table td {
+    padding: 0px;
+  }
+}
+
+#sec03-moblie #sec03-slider .table img {
+  width: 70px;
+}
+
+#sec03-moblie #sec03-slider .table .sec03-table-text {
+  padding: 0px 0px 0px 3px;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+@media screen and (max-width: 350px) {
+  #sec03-moblie #sec03-slider .table .sec03-table-text {
+    padding: 0px;
+  }
+}
+
+#sec03-moblie #sec03-slider .table .sec03-table-text h1 {
+  font-size: 14px;
+  margin: 0;
+}
+
+#sec03-moblie #sec03-slider .table .sec03-table-text p {
+  margin: 0;
+  font-size: 12px;
+}
+
+@media screen and (min-width: 1025px) {
+  #sec03-moblie {
+    display: none;
+  }
+}
+
+#sec04 {
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #fff), color-stop(50%, #ededf9));
+  background: linear-gradient(180deg, #fff 50%, #ededf9 50%);
+  padding-bottom: 10vw;
+}
+
+@media screen and (max-width: 767px) {
+  #sec04 {
+    display: none;
+  }
+}
+
+#sec04 #sec04-title {
+  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%;
+}
+
+#sec04 #sec04-container .card {
+  -webkit-box-shadow: 0 10px 1px #eb144c;
+          box-shadow: 0 10px 1px #eb144c;
+  border-radius: 10px;
+}
+
+#sec04 #sec04-container .card img {
+  padding: 5px;
+  height: 150px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+#sec04 #sec04-container .card .card-title {
+  font-weight: 900;
+}
+
+#sec04-moblie {
+  padding-top: 5vw;
+  padding-bottom: 5vw;
+  background: #fff;
+  position: relative;
+  overflow: hidden;
+}
+
+#sec04-moblie .arrow-table {
+  position: fixed;
+  width: 25px;
+  right: 15px;
+  bottom: 240px;
+  z-index: 6;
+}
+
+@media screen and (max-width: 350px) {
+  #sec04-moblie .arrow-table {
+    right: 10px;
+  }
+}
+
+@media screen and (min-width: 1025px) {
+  #sec04-moblie {
+    display: none;
+  }
+}
+
+#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;
+}
+
+#sec04-moblie #sec04-moblie-container .col {
   margin: 10px;
-  background-color: #CE0000;
+}
+
+#sec04-moblie #sec04-moblie-container .col .card {
+  -webkit-box-shadow: 0 10px 1px #eb144c;
+          box-shadow: 0 10px 1px #eb144c;
   border-radius: 10px;
-  font-size: 24px;
-  color: #fff;
-  border: none;
 }
 
-#news {
-  display: -ms-grid;
-  display: grid;
-  -ms-grid-columns: (1fr)[3];
-      grid-template-columns: repeat(3, 1fr);
-  margin: 50px;
-  grid-gap: 30px;
+#sec04-moblie #sec04-moblie-container .col .card img {
+  height: 150px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+#sec04-moblie #sec04-moblie-container .col .card .card-title {
+  font-weight: 900;
+}
+
+#sec04-moblie #sec04-moblie-container .col .card .learn-more {
+  width: 120px;
+}
+
+#sec05 {
+  padding-top: 5vw;
+  padding-bottom: 5vw;
+  background-image: url();
+}
+
+#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 #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-container img {
+  width: 78vw;
+  margin: 30px 0;
+}
+
+@media screen and (max-width: 767px) {
+  #sec05 #sec05-container img {
+    width: 95vw;
+  }
 }
 
-#news h1 {
-  margin-bottom: 10px;
+#sec06 {
+  padding-top: 5vw;
+  padding-bottom: 5vw;
 }
 
-#news a {
-  margin-top: 20px;
-  line-height: 1.5;
+#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-size: contain;
+  background-repeat: no-repeat;
+  background-blend-mode: overlay;
+}
+
+#sec06 #sec06-title {
+  width: 80vw;
+  margin: 0 auto;
+  text-align: right !important;
+}
+
+#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-weight: 900;
+    font-size: 32px;
+  }
+}
+
+#sec06 #sec06-title hr {
   display: inline-block;
+  margin-right: 80px;
+  width: 8vw;
+  height: 5px;
+  color: #eb144c;
+  opacity: 1 !important;
+}
+
+@media screen and (max-width: 767px) {
+  #sec06 #sec06-title hr {
+    width: 30vw;
+  }
+}
+
+#sec06 #sec06-container {
+  text-align: center;
+}
+
+#sec06 #sec06-container .card {
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  background: #fff;
+  padding-top: 5vw;
+  padding-bottom: 5vw;
+  border: none;
+}
+
+#sec06 #sec06-container .card .sec09-7 {
+  width: 200px;
+}
+
+#sec06 #sec06-container .card .adv4 {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+#sec06 #sec06-container .card .adv4 img {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+#sec06 #sec06-container .col-3 {
+  margin: 10px 0;
+}
+
+@media screen and (max-width: 1025px) {
+  #sec06 #sec06-container .col-3 {
+    padding: 15px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #sec06 #sec06-container .col-3 {
+    padding: 5px;
+  }
+}
+
+#sec06 #sec06-container .col-3 img {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+@media screen and (max-width: 767px) {
+  #sec06 #sec06-container .col-3 img {
+    padding: 0px;
+  }
+}
+
+#sec06 #sec06-container .sec09-1 {
+  padding: 50px;
+}
+
+@media screen and (max-width: 767px) {
+  #sec06 #sec06-container .sec09-1 {
+    padding: 20px;
+  }
 }
 
 #footer {
+  width: 100vw;
   text-align: center;
   line-height: 2;
+  background: #eb144c;
+  color: #fff;
+  padding-bottom: 3vw !important;
+}
+
+#footer .footer-link {
+  padding-top: 3vw;
+}
+
+#footer .footer-link a {
+  text-decoration: none;
+  font-size: 20px;
+  padding: 10px;
+  color: #fff;
+}
+
+@media screen and (max-width: 767px) {
+  #footer .footer-link a {
+    font-size: 14px;
+    padding: 0 !important;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  #footer .footer-link a {
+    font-size: 12px;
+  }
+}
+
+#footer .footer-link a span {
+  font-size: 28px;
+}
+
+@media screen and (max-width: 767px) {
+  #footer .footer-link a span {
+    font-size: 16px;
+  }
+}
+
+@media screen and (max-width: 350px) {
+  #footer .footer-link a span {
+    font-size: 14px;
+  }
+}
+
+#footer .text {
+  padding-top: 3vw;
+}
+
+#footer .text a {
+  text-decoration: none;
+  color: #fff;
+}
+
+#footer .text h2 {
+  font-size: 20px;
+  margin: 10px;
+  letter-spacing: 1px;
+  display: inline;
+}
+
+@media screen and (max-width: 767px) {
+  #footer .text h2 {
+    display: block;
+    font-size: 16px;
+    margin: 8px;
+  }
+}
+
+#footer .text p {
+  margin: 0 !important;
 }
 /*# sourceMappingURL=style.css.map */

style.scss

@@ -7,128 +7,857 @@
 $desktop: 1025px;
 $table: 1024px;
 $moblie: 767px;
+$navbgcolor: #eb144c;
 
 @media screen and(max-width:$table) {
 }
 @media screen and(max-width:$moblie) {
-    
 }
-body {
-    height: 2800px;
-    hr{
-        margin: 20px;
+
+.container-fluid {
+    width: 80vw;
+    margin: 0 auto;
+    @media screen and(max-width:$moblie) {
+        width: 100vw;
+    }
+}
+
+// 主選單
+#Navigation {
+    width: 100vw;
+    background-color: $navbgcolor;
+    color: #fff;
+    position: fixed;
+    opacity: 1 !important;
+    z-index: 20;
+
+    #logo {
+        padding-top: 3vw;
+        @media screen and(max-width:$moblie) {
+            padding: 15px;
+        }
+
+        img {
+            width: 180px;
+            @media screen and(max-width:$moblie) {
+                width: 140px;
+            }
+        }
+    }
+    #link {
+        padding: 4vw 1vw 2vw 1vw;
+        @media screen and(max-width:$moblie) {
+            display: none;
+        }
+        a {
+            text-decoration: none;
+            color: #fff;
+            letter-spacing: 1px;
+            font-size: 0.9rem;
+            font-weight: 600;
+            cursor: pointer;
+            padding: 15px;
+            position: relative;
+            :hover {
+                opacity: 0.8;
+            }
+            &:after {
+                content: "";
+                display: block;
+                width: 80%;
+                height: 3px;
+                background-color: #fff;
+                position: absolute;
+                left: 12%;
+                bottom: 0;
+                transition: all 0.3s;
+                opacity: 0;
+            }
+            &:hover:after {
+                width: 80%;
+                opacity: 1;
+            }
+            @media screen and(max-width:$table) {
+                padding: 5px;
+                padding-top: 2vw;
+            }
+        }
+    }
+    #menu-btn1 {
+        position: absolute;
+        right: 2vw;
+        top: 5vw;
+        width: 15vw;
+        z-index: 6;
+
+        @media screen and(min-width:$desktop) {
+            display: none;
+        }
+        @media screen and(min-width:768px) {
+            display: none;
+        }
     }
 }
 
+// 行動版彈跳式選單
+#menu-box {
+    width: 40vw;
+    right: 0px;
+    position: fixed;
+    z-index: 20;
+    overflow: hidden;
+    display: none;
+    @media screen and(min-width:$desktop) {
+        display: none;
+    }
+
+    hr {
+        margin: 5px auto !important;
+        width: 25vw;
+        background: #fff;
+        opacity: 1 !important;
+    }
+    #menu-box2 {
+        padding-bottom: 5vw;
+        position: relative;
+        width: 40vw;
+        background-color: $navbgcolor;
+
+        z-index: 7;
+        text-align: center;
+        @media screen and(max-width:$moblie) {
+        }
+        @media screen and(max-width:350px) {
+        }
+        .close {
+            padding: 30px 15px 15px 15px;
+        }
+
+        a {
+            display: inline-block;
+            text-decoration: none;
+            color: #fff;
+            font-size: 14px;
+            font-weight: 900;
+            text-align: center;
+            padding: 0 !important;
+        }
+    }
+}
+
+// banner
 #banner {
     width: 100vw;
-    height: 500px;
+    display: inline-block;
+    background: #fff;
+    #banner-container {
+        width: 80vw;
+        margin: 50px auto;
+        padding-bottom: 5vw;
+        @media screen and(max-width:$moblie) {
+            width: 100vw;
+            margin: 0;
+            padding-bottom: 15vw;
+        }
+        img {
+            padding-top: 10vw;
+            width: 80vw;
+            object-fit: cover;
+
+            @media screen and(max-width:$moblie) {
+                padding-top: 15vw;
+                width: 100vw;
+            }
+        }
+    }
 }
-.marquee {
-    margin: 100px auto;
-    height: 100px;
-    width: 1000px;
+// 最新課程-電腦版
+#sec01 {
+    padding-bottom: 10vw;
+    background: #fff;
+    @media screen and(max-width:$moblie) {
+        display: none;
+    }
+    #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%;
+    }
+    #sec01-container {
+        .card {
+            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+            border-radius: 10px;
+            img {
+                padding: 5px;
+                height: 150px;
+                object-fit: cover;
+            }
+
+            .card-title {
+                font-weight: 900;
+            }
+        }
+    }
+}
+// 最新課程-手機板
+#sec01-moblie {
+    padding-top: 5vw;
+    padding-bottom: 5vw;
+    background: #fff;
+    position: relative;
     overflow: hidden;
+    .arrow-table {
+        position: fixed;
+        width: 25px;
+        right: 15px;
+        bottom: 240px;
+        z-index: 6;
+        @media screen and(max-width:350px) {
+            right: 10px;
+        }
+    }
+    @media screen and(min-width:$desktop) {
+        display: none;
+    }
+    #sec01-moblie-header {
+        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 {
+            margin: 10px auto !important ;
+            width: 25vw;
+            height: 5px;
+            color: #e02d4b;
+            margin: 10px;
+            opacity: 1 !important;
+        }
+    }
+    #sec01-moblie-container {
+        padding-top: 10vw;
+        .col {
+            margin: 10px;
+            .card {
+                img {
+                    height: 150px;
+                    object-fit: cover;
+                }
+                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+                border-radius: 10px;
+                .card-title {
+                    font-weight: 900;
+                }
+
+                .learn-more {
+                    width: 120px;
+                }
+            }
+        }
+    }
+}
+// sec02 TOP排名 電腦版
+#sec02 {
+    background: $navbgcolor;
+    padding: 5vw 0px;
+
+    @media screen and(max-width:$moblie) {
+        display: none;
+    }
+    #sec02-container {
+        width: 90vw;
+        padding: 15px;
+        font-weight: 900;
+        color: #fff;
+        position: relative;
+
+        // 電腦版top圖片排行
+        #sec02-top-box {
+            #sec02-top-title {
+                text-align: center;
+                hr {
+                    width: 5vw;
+                    height: 5px;
+                    color: #fff;
+                    margin: 10px auto;
+                    opacity: 1 !important;
+                    @media screen and(max-width:$moblie) {
+                        width: 30vw;
+                    }
+                }
+            }
+            position: relative;
+            #sec02-content {
+                position: absolute;
+                top: -150px;
+                left: 300px;
+            }
+
+            .sec02-box1 {
+                color: #fff;
+
+                img {
+                    display: inline;
+                    width: 200px;
+                    height: 200px;
+                    object-fit: cover;
+                }
+                .sec02-top-text {
+                    font-size: 20px;
+                    span {
+                        font-size: 30px;
+                    }
+                }
+            }
+        }
+    }
+}
+// sec02 TOP排名 手機板
+#sec02-moblie {
+    padding-top: 3vw;
+   
+    @media screen and(min-width:$desktop) {
+        display: none;
+    }
+    #sec02-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;
+        }
+    }
+    #sec02-container {
+        background: linear-gradient(180deg, #fff 20%, transparent 40%, #eb144c 20%);
+       
+        padding: 15px;
+        font-weight: 900;
+        color: #fff;
+        text-align: right;
+        padding: 20vw 0;
+       
+        #sec02-content {
+            position: relative;
+        }
+        #sec02-top-box {
+        
+            
+           @media screen and(max-width:350px) {
+                left: 10px;
+            }
+            .sec02-box1 {
+                color: #fff;
+                
+                #top1 {
+
+                    @media screen and(max-width:350px) {
+                        width: 100px;
+                        height: 130px;
+                    }
+                }
+                img {
+                   
+                    @media screen and(max-width:350px) {
+                        width: 70px;
+                        height: 100px;
+                    }
+                }
+                .sec02-top-text {
+                    font-size: 12px;
+                    text-align: center;
+                    @media screen and(max-width:350px) {
+                    }
+
+                    span {
+                        font-size: 30px;
+                        @media screen and(max-width:350px) {
+                            font-size: 25px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+// sec03 排名table-電腦版
+#sec03 {
+   
+    padding-bottom: 5vw;
+    @media screen and(max-width:$moblie) {
+        display: none;
+    }
+    #sec03-table {
+        .sec03-table-title {
+            font-family: 微軟正黑體;
+            font-weight: 900;
+            padding: 15px;
+            font-size: 35px;
+        }
+        .table {
+            th {
+                font-size: 40px;
+                display: table-cell;
+                vertical-align: middle;
+            }
+            td {
+                padding: 15px;
+            }
+
+            img {
+                width: 80px;
+            }
+            .sec03-table-text {
+                padding: 10px;
+                display: table-cell;
+                vertical-align: middle;
+                h1 {
+                    font-size: 20px;
+                    margin: 0;
+                }
+                p {
+                    margin: 0;
+                }
+            }
+        }
+    }
+}
+// sec03排名table-手機板
+#sec03-moblie {
+   
     position: relative;
-    font-size: 48px;
-    #marquee-box {
-        display: block;
-        width: 200%;
-        height: 75px;
-        position: absolute;
-        overflow: hidden;
-        animation: marquee 5s linear infinite;
-        .span {
-            float: left;
-            width: 50%;
+    .arrow-table {
+        position: fixed;
+        width: 25px;
+        right: 15px;
+        bottom: 250px;
+        z-index: 6;
+        @media screen and(max-width:350px) {
+            right: 10px;
+            bottom: 200px;
+        }
+    }
+    .sec03-table-title,
+    .sec03-table-title2 {
+        font-family: 微軟正黑體;
+        font-weight: 900;
+        font-size: 14px;
+        display: inline-block;
+
+        color: #9b9b9b;
+    }
+    .contant-toggle {
+        display: inline-block;
+        color: #000;
+        padding-bottom: 10px;
+        border-bottom: 2px solid #000;
+    }
+
+    #sec03-slider {
+        padding-top: 5vw;
+        .slick-slide img {
+            display: inline;
         }
-        @keyframes marquee {
-            0% {
-                left: 0;
+        #sec03-slider1,
+        #sec03-slider2 {
+            margin: 0 5px;
+            @media screen and(max-width:350px) {
+                margin: 0 5px;
             }
-            100% {
-                left: -100%;
+        }
+
+        .table {
+            th {
+                font-size: 40px;
+                display: table-cell;
+                vertical-align: middle;
+                padding: 15px;
+                @media screen and(max-width:350px) {
+                    font-size: 30px;
+                }
+            }
+            td {
+                display: table-cell;
+                vertical-align: middle;
+                padding: 15px;
+                padding: 10px;
+                @media screen and(max-width:350px) {
+                    padding: 0px;
+                }
+            }
+
+            img {
+                width: 70px;
+            }
+            .sec03-table-text {
+                padding: 0px 0px 0px 3px;
+                display: table-cell;
+                vertical-align: middle;
+                @media screen and(max-width:350px) {
+                    padding: 0px;
+                }
+
+                h1 {
+                    font-size: 14px;
+                    margin: 0;
+                }
+                p {
+                    margin: 0;
+                    font-size: 12px;
+                }
             }
         }
     }
+    @media screen and(min-width:$desktop) {
+        display: none;
+    }
 }
+// sec04 專欄報導-電腦版
+#sec04 {
+    background: linear-gradient(180deg, #fff 50%, #ededf9 50%);
 
-#tag{
-    width: 100vw;
-    text-align: center;
-    .btn{
-    padding: 15px;
-    width: 150px;
-    margin: 10px;
-    background-color:#CE0000;
-    border-radius: 10px;;
-    font-size: 24px;
-    color:#fff;
-    border: none;
+    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%;
+    }
+    #sec04-container {
+        .card {
+            box-shadow: 0 10px 1px $navbgcolor;
+            border-radius: 10px;
+            img {
+                padding: 5px;
+                height: 150px;
+                object-fit: cover;
+            }
+
+            .card-title {
+                font-weight: 900;
+            }
+        }
     }
-    
 }
+// sec04專欄報導 手機板
+#sec04-moblie {
+    padding-top: 5vw;
+    padding-bottom: 5vw;
+    background: #fff;
+    position: relative;
+    overflow: hidden;
+    .arrow-table {
+        position: fixed;
+        width: 25px;
+        right: 15px;
+        bottom: 240px;
+        z-index: 6;
+        @media screen and(max-width:350px) {
+            right: 10px;
+        }
+    }
+    @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;
 
-.btn1{
-    display: none;
+            @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 {
+            margin: 10px;
+            .card {
+                img {
+                    height: 150px;
+                    object-fit: cover;
+                }
+                box-shadow: 0 10px 1px $navbgcolor;
+                border-radius: 10px;
+                .card-title {
+                    font-weight: 900;
+                }
+
+                .learn-more {
+                    width: 120px;
+                }
+            }
+        }
+    }
 }
 
+// sec05 課程分類-電腦版
+#sec05 {
+    padding-top: 5vw;
+    padding-bottom: 5vw;
 
-#Search-result{
-    .result-box{
-        margin: 50px auto;
-        width: 700px;
-        display: grid;
-     grid-template-columns: repeat(2,1fr );
-     grid-gap:10px;
-     h1{
-         margin: 10px;
-         
-     }
-     p{
-         padding: 15px 0;
-         margin: 10px;
-     }
-     span{
-        padding: 0px 10px;
-    
-     }
+    #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;
+            }
+        }
+    }
+    background-image: url();
+
+    #sec05-container {
+        img {
+            width: 78vw;
+            margin: 30px 0;
+            @media screen and(max-width:$moblie) {
+                width: 95vw;
+            }
+        }
     }
 }
-#logo{
-    width: 100vw;
-    text-align: center;
-    @media screen and(max-width:$table) {
+// sec06 合作對象 - 電腦版
+#sec06 {
+    padding-top: 5vw;
+    padding-bottom: 5vw;
+    #sec06-container-box {
+        padding-top: 8vw;
+        background: url(./img/sec06/sec06-1.png), linear-gradient(180deg, transparent 50%, #fff 30%);
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-blend-mode: overlay;
+    }
+    #sec06-title {
         width: 80vw;
         margin: 0 auto;
+        text-align: right !important;
+        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-weight: 900;
+                font-size: 32px;
+            }
+        }
+        hr {
+            display: inline-block;
+            margin-right:80px;
+            width: 8vw;
+            height: 5px;
+            color: $navbgcolor;
+            opacity: 1 !important;
+            @media screen and(max-width:$moblie) {
+                width: 30vw;
+            }
+        }
     }
-    .logo{
-    padding: 15px;
-    width: 150px;
-    margin: 10px;
-    background-color:#CE0000;
-    border-radius: 10px;;
-    font-size: 24px;
-    color:#fff;
-    border: none;
-    }
-}
-#news{
-    display: grid;
-    grid-template-columns: repeat(3,1fr );
-    margin: 50px;
-    grid-gap:30px;
-    h1{
-        margin-bottom: 10px;
-    }
-    a{
-        margin-top: 20px;
-        line-height: 1.5;
-        display: inline-block;
+    #sec06-container {
+        text-align: center;
+      
+        .card {
+            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+            background: #fff;
+            padding-top: 5vw;
+            padding-bottom: 5vw;
+            border: none;
+            .sec09-7{
+                width: 200px;
+            }
+            .adv4 {
+                display: flex;
+                align-items: center;
+                img {
+                    align-items: center;
+                }
+            }
+        }
+
+        .col-3 {
+            margin: 10px 0;
+            @media screen and(max-width:$desktop) {
+                padding: 15px;
+            }
+
+            @media screen and(max-width:$moblie) {
+                padding: 5px;
+            }
+            img {
+                object-fit: cover;
+              
+                @media screen and(max-width:$moblie) {
+                    padding: 0px;
+                }
+            }
+        }
+    
+        .sec09-1 {
+            padding: 50px;
+            @media screen and(max-width:$moblie) {
+                padding: 20px;
+            }
+        }
     }
 }
-#footer{
-text-align: center;
-line-height: 2;
-}
+// 頁尾
+#footer {
+    width: 100vw;
+    text-align: center;
+    line-height: 2;
+    background: $navbgcolor;
+    color: #fff;
+    padding-bottom: 3vw !important;
+    .footer-link {
+        padding-top: 3vw;
+
+        a {
+            text-decoration: none;
+            font-size: 20px;
+            padding: 10px;
+            color: #fff;
 
+            @media screen and(max-width:$moblie) {
+                font-size: 14px;
+                padding: 0 !important;
+            }
+
+            @media screen and(max-width:400px) {
+                font-size: 12px;
+            }
+
+            span {
+                font-size: 28px;
+                @media screen and(max-width:$moblie) {
+                    font-size: 16px;
+                }
+                @media screen and(max-width:350px) {
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+    .text {
+        padding-top: 3vw;
+        a {
+            text-decoration: none;
+            color: #fff;
+        }
+        h2 {
+            font-size: 20px;
+            margin: 10px;
+            letter-spacing: 1px;
+            display: inline;
+            @media screen and(max-width:$moblie) {
+                display: block;
+                font-size: 16px;
+                margin: 8px;
+            }
+        }
+        p {
+            margin: 0 !important;
+        }
+    }
+}