初版

goto.js

@@ -1,3 +1,4 @@
+// sec03排名table輪播
 $('#sec03-slider').slick({
     arrows: false,
     slidesToShow: 1,
@@ -6,19 +7,121 @@ $('#sec03-slider').slick({
     
    
 });
-
+// sec05 熱門作品 手機輪播
 $('#sec05-moblie-slider').slick({
     arrows: false,
     slidesToShow: 1,
     slidesToScroll: 1,
-    infinite:false,
+    infinite:true,
+
+});
+// sec05桌機輪播
+$('#sec05-destop-slider').slick({
+    arrows: true,
+    slidesToShow: 3,
+    slidesToScroll: 3,
+    infinite:true,
 
 });
+// sec06桌機輪波
+// $('#sec06-container').slick({
+//     arrows: true,
+//     slidesToShow: 4,
+//     slidesToScroll: 3,
+//     infinite:true,
+// });
+
+$(function(){
+    $('#sec06-container').slick({
+        arrows: true,
+        slidesToShow: 4,
+        slidesToScroll: 3,
+        infinite:true,
+         responsive: [
+           {
+               breakpoint: 600, // RWD在1024寬度時切換顯示數量
+               settings: {
+                   slidesToShow: 1, //一次顯示3個
+                   slidesToScroll: 1,//切換下一頁時移動3個
+              }
+          },{
+               breakpoint: 600,// RWD在600寬度時切換顯示數量
+               settings: {
+                   slidesToShow: 1,//一次顯示2個
+                   slidesToScroll: 1,//切換下一頁時移動2個
+              }
+          },
+         ]
+    });
+ })
 
+// sec04  洞察報告 手機輪播 
 $('#sec04-moblie-container').slick({
     arrows: false,
     slidesToShow: 1,
     slidesToScroll: 1,
     infinite:false,
     centerMode: true,
-});
+});
+
+// 手機板menu彈跳視窗
+$("#menu-box2").hide();
+$("#menu-box").hide();
+
+$(".link").click(function () {
+  $("#menu-box").fadeOut("slow", function () {
+    $("#menu-box2").fadeOut("slow");
+    // Animation complete.
+  });
+});
+
+$("#menu-btn1").click(function () {
+    $("#menu-box").fadeIn();
+    $("#menu-box2").fadeIn();
+  
+  });
+  
+  $(".close").click(function () {
+    $("#menu-box").fadeOut();
+    $("#menu-box2").fadeOut();
+  
+  });
+
+$("*").each(function (index, element) {
+    // 此元素被點選後執行
+    $(this).click(function (e) {
+      // 取得被點選元素的屬性：data-gt-target
+      var target = $(this).attr("data-gt-target");
+      var duration = $(this).attr("data-gt-duration");
+      var offset = $(this).attr("data-gt-offset");
+  
+      // JS 語法：判斷式
+      // if (條件) {程式區塊}
+      // 當條件成立，會執行程式區塊
+  
+      // 如果 目標有資料 才會執行 { } 內的程式
+      // 避免出現 undefine (未定義 - 不存在的資料)
+      if (target) {
+        //console.log("目標：" + target);
+        //console.log("時間：" + duration);
+        //console.log("位移：" + offset);
+  
+        // 上方位置 = 目標區塊.位移().上方位置
+        var top = $(target).offset().top;
+        //console.log("要前往元素的上方位置：" + top);
+  
+        // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
+        // parseInt() 將文字轉為數字
+  
+        $("html").stop().animate({
+          scrollTop: top - offset
+        }, parseInt(duration));
+      }
+    });
+  });
+  
+  // 避免動畫與使用者滾輪衝突
+  // html 在滾動滾輪時 停止 html 所有效果
+  $("html").on("mousewheel", function () {
+    $("html").stop();
+  });

style.css

@@ -17,10 +17,33 @@
   }
 }
 
+body .learn-more {
+  color: #fff;
+  width: 30%;
+  height: 50px;
+  margin: 10px 0px;
+  font-size: 16px;
+  border-radius: 0%;
+  border: none;
+  font-weight: 900;
+  background: #93000a;
+  vertical-align: top;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+body .learn-more:hover {
+  color: #93000a;
+  background: #fff;
+  border: 1px solid #93000a;
+}
+
 #Navigation {
   width: 100vw;
   background-color: #000;
   color: #fff;
+  position: fixed;
+  z-index: 20;
 }
 
 #Navigation #logo {
@@ -114,9 +137,52 @@
   }
 }
 
+#menu-box {
+  width: 40vw;
+  right: 0px;
+  position: fixed;
+  z-index: 20;
+  overflow: hidden;
+}
+
+@media screen and (min-width: 1025px) {
+  #menu-box {
+    display: none;
+  }
+}
+
+#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: #313131;
+  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;
-  background: #313131;
   display: inline-block;
   background: linear-gradient(115deg, #313131 38%, transparent 30%, #707070 27%);
   background-blend-mode: overlay;
@@ -124,7 +190,6 @@
 
 @media screen and (max-width: 767px) {
   #banner {
-    height: 65vh;
     background: linear-gradient(115deg, #414141 100%, transparent 30%, #707070 0%);
   }
 }
@@ -139,24 +204,62 @@
   #banner #banner-container {
     width: 100vw;
     margin: 0;
+    padding-bottom: 15vw;
   }
 }
 
-#banner #banner-container img {
+#banner #banner-container .youtube {
   width: 80vw;
-  height: 70vh;
-  -o-object-fit: cover;
-     object-fit: cover;
+  padding-top: 10vw;
+  margin: 0 auto;
+  color: #fff;
 }
 
 @media screen and (max-width: 767px) {
-  #banner #banner-container img {
-    height: 35vh;
-    width: 100vw;
+  #banner #banner-container .youtube {
+    padding-top: 30vw;
+  }
+}
+
+#banner #banner-container .youtube hr {
+  width: 12vw;
+  height: 2px;
+  color: #fff;
+  margin: 20px 0px;
+  opacity: 1 !important;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .youtube hr {
+    width: 30vw;
+  }
+}
+
+#banner #banner-container .youtube p {
+  font-size: 18px;
+}
+
+#banner #banner-container .youtube h1 {
+  font-size: 40px;
+  padding-top: 0;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .youtube h1 {
+    font-size: 25px;
+    padding: 15px 0px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .youtube .learn-more {
+    width: 100%;
+    margin: 10px 0px;
   }
 }
 
 #banner #banner-container h1 {
+  padding-top: 3vw;
   text-align: center;
   color: #fff;
 }
@@ -214,6 +317,8 @@
   font-weight: 900;
   background: #93000a;
   vertical-align: top;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
 }
 
 @media screen and (max-width: 767px) {
@@ -222,6 +327,10 @@
   }
 }
 
+#banner #banner-container .btn:hover {
+  font-size: 17px;
+}
+
 #banner #banner-container #email-arrow {
   width: 15%;
   background: url(./img/button-arrow.png) 55% 50% no-repeat scroll transparent;
@@ -309,24 +418,53 @@
 
 #sec01 #sec01-container #sec01-container-card .card p {
   padding: 5px;
-  font-size: 20px;
+  font-size: 18px;
   margin-bottom: 0 !important;
 }
 
 @media screen and (max-width: 767px) {
   #sec01 #sec01-container #sec01-container-card .card p {
     padding: 0px;
+    font-size: 16px;
   }
 }
 
+#sec01 #sec01-container #sec01-container-card .card .sec01-title {
+  padding: 15px 0px;
+  font-weight: 900;
+  font-size: 22px;
+}
+
+@media screen and (max-width: 767px) {
+  #sec01 #sec01-container #sec01-container-card .card .sec01-title {
+    font-size: 18px;
+  }
+}
+
+#sec01 #sec01-container #sec01-container-card .card a {
+  text-decoration: none;
+  color: #000;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+#sec01 #sec01-container #sec01-container-card .card a:hover {
+  color: #2828ff;
+}
+
 #sec01 #sec01-container #sec01-container-card .card img {
   text-align: center;
   width: 38vw;
+  height: 240px;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 @media screen and (max-width: 767px) {
   #sec01 #sec01-container #sec01-container-card .card img {
     width: 85vw;
+    height: 200px;
     margin: 0 auto;
   }
 }
@@ -343,39 +481,44 @@
 }
 
 #sec02 #sec02-container {
+  width: 90vw;
   padding: 15px;
   font-weight: 900;
   color: #fff;
+  position: relative;
 }
 
 #sec02 #sec02-container #sec02-top-box {
   position: relative;
 }
 
+#sec02 #sec02-container #sec02-top-box #sec02-content {
+  position: absolute;
+  top: 10px;
+  left: 300px;
+}
+
 #sec02 #sec02-container #sec02-top-box .sec02-box1 {
   color: #000;
+  width: 13vw;
 }
 
 #sec02 #sec02-container #sec02-top-box .sec02-box1 img {
-  position: absolute;
-  top: 1px;
-  width: 200px;
-}
-
-#sec02 #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text {
-  position: absolute;
-  top: 140px;
-  padding-left: 15px;
+  border-radius: 50%;
+  width: 150px;
+  height: 200px;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 #sec02 #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text span {
-  font-size: 50px;
+  font-size: 30px;
 }
 
 #sec02-moblie {
   background: #414141;
   padding-top: 3vw;
-  padding-bottom: 10vw;
+  padding-bottom: 20vw;
 }
 
 @media screen and (min-width: 1025px) {
@@ -391,30 +534,47 @@
   text-align: right;
 }
 
-#sec02-moblie #sec02-container #sec02-top-box .sec02-box1 {
-  color: #000;
+#sec02-moblie #sec02-container .sec02-top1-box img {
+  width: 80px;
+}
+
+#sec02-moblie #sec02-container .sec02-top1-box span {
+  font-size: 30px;
+}
+
+#sec02-moblie #sec02-container .sec02-top1-box .sec02-top-text {
+  text-align: center;
+}
+
+#sec02-moblie #sec02-container #sec02-content {
   position: relative;
 }
 
-#sec02-moblie #sec02-container #sec02-top-box .sec02-box1 img {
+#sec02-moblie #sec02-container #sec02-top-box {
   position: absolute;
   top: 1px;
-  width: 90px;
-  left: 30px;
+}
+
+#sec02-moblie #sec02-container #sec02-top-box .sec02-box1 {
+  color: #000;
+}
+
+#sec02-moblie #sec02-container #sec02-top-box .sec02-box1 img {
+  width: 80px;
+  height: 120px;
+  border-radius: 50%;
 }
 
 #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text {
-  position: absolute;
-  top: 60px;
-  left: 20px;
+  font-size: 12px;
 }
 
 #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text span {
-  font-size: 50px;
+  font-size: 30px;
 }
 
 #sec03 {
-  padding-top: 10vw;
+  padding-top: 15vw;
   padding-bottom: 5vw;
 }
 
@@ -461,7 +621,7 @@
 }
 
 #sec03-moblie {
-  padding-top: 30vw;
+  padding-top: 40vw;
   position: relative;
 }
 
@@ -476,6 +636,7 @@
 @media screen and (max-width: 350px) {
   #sec03-moblie .arrow-table {
     right: 10px;
+    bottom: 200px;
   }
 }
 
@@ -493,13 +654,13 @@
 
 #sec03-moblie #sec03-slider #sec03-slider1,
 #sec03-moblie #sec03-slider #sec03-slider2 {
-  margin: 0 30px;
+  margin: 0 5px;
 }
 
 @media screen and (max-width: 350px) {
   #sec03-moblie #sec03-slider #sec03-slider1,
   #sec03-moblie #sec03-slider #sec03-slider2 {
-    margin: 0 10px;
+    margin: 0 5px;
   }
 }
 
@@ -510,8 +671,17 @@
   padding: 15px;
 }
 
+@media screen and (max-width: 350px) {
+  #sec03-moblie #sec03-slider .table th {
+    font-size: 30px;
+  }
+}
+
 #sec03-moblie #sec03-slider .table td {
+  display: table-cell;
+  vertical-align: middle;
   padding: 15px;
+  padding: 10px;
 }
 
 @media screen and (max-width: 350px) {
@@ -525,18 +695,25 @@
 }
 
 #sec03-moblie #sec03-slider .table .sec03-table-text {
-  padding: 10px;
+  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: 20px;
+  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) {
@@ -585,6 +762,10 @@
   }
 }
 
+#sec04 .learn-more {
+  width: 45%;
+}
+
 #sec04 #sec04-container .card {
   border-radius: 0%;
   -webkit-box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
@@ -592,11 +773,16 @@
 }
 
 #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;
@@ -667,6 +853,8 @@
 }
 
 #sec05 {
+  width: 85vw;
+  margin: 0 auto;
   padding-top: 5vw;
   padding-bottom: 5vw;
 }
@@ -683,6 +871,44 @@
   padding: 15px;
 }
 
+#sec05 #sec05-container #sec05-destop-slider .slick-prev:before,
+#sec05 #sec05-container #sec05-destop-slider .slick-next:before {
+  opacity: 0;
+}
+
+#sec05 #sec05-container #sec05-destop-slider .slick-prev,
+#sec05 #sec05-container #sec05-destop-slider .slick-next {
+  width: 40px;
+  height: 40px;
+  content: none;
+}
+
+#sec05 #sec05-container #sec05-destop-slider .slick-prev {
+  background-image: url(./img/arrow-table2.png);
+  background-repeat: no-repeat;
+  left: -40px;
+}
+
+#sec05 #sec05-container #sec05-destop-slider .slick-prev:hover, #sec05 #sec05-container #sec05-destop-slider .slick-prev:focus {
+  background-image: url(./img/arrow-table2.png);
+  background-repeat: no-repeat;
+}
+
+#sec05 #sec05-container #sec05-destop-slider .slick-next {
+  background-image: url(./img/arrow-table.png);
+  background-repeat: no-repeat;
+  right: -50px;
+}
+
+#sec05 #sec05-container #sec05-destop-slider .slick-next:hover, #sec05 #sec05-container #sec05-destop-slider .slick-next:focus {
+  background-image: url(./img/arrow-table.png);
+  background-repeat: no-repeat;
+}
+
+#sec05 #sec05-container .col {
+  margin: 5px;
+}
+
 #sec05 #sec05-container .card {
   -webkit-box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
           box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
@@ -769,9 +995,27 @@
   }
 }
 
-#sec06 .card {
-  border: none;
-  background: none;
+#sec06 #sec06-container .card {
+  height: 480px;
+  margin: 10px;
+  border-radius: 0%;
+  -webkit-box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
+          box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
+}
+
+#sec06 #sec06-container .card img {
+  padding: 5px;
+  height: 150px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+#sec06 #sec06-container .card .card-title {
+  font-weight: 900;
+}
+
+#sec06 #sec06-container .card .learn-more {
+  width: 120px;
 }
 
 #sec07 {
@@ -818,7 +1062,7 @@
 #sec07 .table td {
   display: table-cell;
   vertical-align: middle;
-  text-align-last: left;
+  text-align: left;
 }
 
 #sec07 .table td img {
@@ -832,7 +1076,7 @@
 #sec07 .table th {
   display: table-cell;
   vertical-align: middle;
-  text-align-last: left;
+  text-align: left;
 }
 
 #sec07 .table img {
@@ -908,6 +1152,8 @@
 #sec07-moblie .table th {
   display: table-cell;
   vertical-align: middle;
+  text-align: left;
+  font-size: 14px;
 }
 
 #sec07-moblie .table img {

style.scss

@@ -7,19 +7,44 @@
 $desktop: 1025px;
 $table: 1024px;
 $moblie: 767px;
-
+$navbgcolor: #313131;
 .container-fluid {
     width: 80vw;
     margin: 0 auto;
     @media screen and(max-width:$moblie) {
         width: 100vw;
     }
+}
+body {
+    .learn-more {
+        color: #fff;
+        width: 30%;
+        height: 50px;
+        margin: 10px 0px;
+        font-size: 16px;
+        border-radius: 0%;
+        border: none;
+        font-weight: 900;
+        background: #93000a;
+        vertical-align: top;
+        transition: 0.3s;
+        &:hover{
+            color:#93000a;
+            background: #fff;
+            border:1px solid #93000a;
+        }
+
+    }
+
+
 }
 // 主選單
 #Navigation {
     width: 100vw;
     background-color: #000;
     color: #fff;
+    position: fixed;
+    z-index: 20;
     #logo {
         padding-top: 1.3vw;
         @media screen and(max-width:$moblie) {
@@ -87,16 +112,60 @@ $moblie: 767px;
         }
     }
 }
+
+// 行動版彈跳式選單
+#menu-box {
+    width: 40vw;
+    right: 0px;
+    position: fixed;
+    z-index: 20;
+    overflow: hidden;
+
+    @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;
-   
-    background: #313131;
     display: inline-block;
     background: linear-gradient(115deg, #313131 38%, transparent 30%, #707070 27%);
     background-blend-mode: overlay;
     @media screen and(max-width:$moblie) {
-        height: 65vh;
+      
         background: linear-gradient(115deg, #414141 100%, transparent 30%, #707070 0%);
     }
     #banner-container {
@@ -106,18 +175,50 @@ $moblie: 767px;
         @media screen and(max-width:$moblie) {
             width: 100vw;
             margin: 0;
+            padding-bottom: 15vw;
         }
-
-        img {
+        .youtube {
             width: 80vw;
-            height: 70vh;
-            object-fit: cover;
+            padding-top: 10vw;
+            margin: 0 auto;
+            color: #fff;
             @media screen and(max-width:$moblie) {
-                height: 35vh;
-                width: 100vw;
+                padding-top: 30vw;
+            }
+            hr {
+                width: 12vw;
+                height: 2px;
+                color: #fff;
+                margin: 20px 0px; 
+                opacity: 1 !important;
+                @media screen and(max-width:$moblie) {
+                    width: 30vw;
+                }
+            }
+           
+            p{
+                font-size: 18px;
+            }
+            h1{
+                font-size: 40px;
+                padding-top: 0;
+                @media screen and(max-width:$moblie) {
+                    font-size: 25px;
+                    padding: 15px 0px;
+                }
+            }
+            .learn-more{
+
+                @media screen and(max-width:$moblie) {
+                    width: 100%;
+                    margin: 10px 0px;
+                }
             }
         }
+
         h1 {
+       
+            padding-top: 3vw;
             text-align: center;
             color: #fff;
             @media screen and(max-width:$moblie) {
@@ -166,9 +267,13 @@ $moblie: 767px;
             font-weight: 900;
             background: #93000a;
             vertical-align: top;
+            transition: 0.3s;
             @media screen and(max-width:$moblie) {
                 display: none;
             }
+            &:hover {
+                font-size: 17px;
+            }
         }
         // 手機板按鈕
         #email-arrow {
@@ -194,8 +299,8 @@ $moblie: 767px;
 #sec01 {
     padding-top: 5vw;
     padding-bottom: 5vw;
-   
-    .NEWS{
+
+    .NEWS {
         width: 80vw;
         margin: 0 auto;
         margin-top: -130px;
@@ -204,18 +309,18 @@ $moblie: 767px;
             margin-top: -70px;
             width: 90vw;
         }
-         h1{
-             padding: 0;
-             margin: 0;
-             font-weight: 900;
-             color:#fff;
-             letter-spacing: 3px;
-             font-size: 60px;
-             @media screen and(max-width:$moblie) {
+        h1 {
+            padding: 0;
+            margin: 0;
+            font-weight: 900;
+            color: #fff;
+            letter-spacing: 3px;
+            font-size: 60px;
+            @media screen and(max-width:$moblie) {
                 font-size: 50px;
             }
-         }
-     }
+        }
+    }
     #sec01-container {
         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
         margin: 0 auto !important;
@@ -229,7 +334,6 @@ $moblie: 767px;
                 border: none !important;
                 @media screen and(max-width:$moblie) {
                     padding: 15px;
-                
                 }
                 h1 {
                     padding: 15px;
@@ -239,17 +343,38 @@ $moblie: 767px;
                 }
                 p {
                     padding: 5px;
-                    font-size: 20px;
+                    font-size: 18px;
                     margin-bottom: 0 !important;
                     @media screen and(max-width:$moblie) {
                         padding: 0px;
+                        font-size: 16px;
+                    }
+                }
+                .sec01-title {
+                    padding: 15px 0px;
+                    font-weight: 900;
+                    font-size: 22px;
+                    @media screen and(max-width:$moblie) {
+                        font-size: 18px;
+                    }
+                }
+                a {
+                    text-decoration: none;
+                    color: #000;
+                    transition: 0.3s;
+                    cursor: pointer;
+                    &:hover {
+                        color: #2828ff;
                     }
                 }
                 img {
                     text-align: center;
                     width: 38vw;
+                    height: 240px;
+                    object-fit: cover;
                     @media screen and(max-width:$moblie) {
                         width: 85vw;
+                        height: 200px;
                         margin: 0 auto;
                     }
                 }
@@ -260,50 +385,49 @@ $moblie: 767px;
 // sec02 TOP排名 電腦版
 #sec02 {
     background: #414141;
-    padding-top:3vw ;
+    padding-top: 3vw;
     @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-box {
             position: relative;
-
-           
-            .sec02-box1{
-                color:#000;
-                img{
-                    position: absolute;
-                    top: 1px;
-                    width: 200px;
-                   
-                    
+            #sec02-content {
+                position: absolute;
+                top: 10px;
+                left: 300px;
+            }
+            .sec02-box1 {
+                color: #000;
+                width: 13vw;
+                img {
+                    border-radius: 50%;
+                    width: 150px;
+                    height: 200px;
+                    object-fit: cover;
                 }
-                .sec02-top-text{
-                    position: absolute;
-                    top: 140px;
-                    padding-left: 15px;
-                    
-                    span{
-                        font-size: 50px;
+                .sec02-top-text {
+                    span {
+                        font-size: 30px;
                     }
                 }
             }
         }
-
-
     }
 }
 // sec02 top排名手機板
 #sec02-moblie {
     background: #414141;
-    padding-top:3vw ;
-    padding-bottom: 10vw;
- 
+    padding-top: 3vw;
+    padding-bottom: 20vw;
+
     @media screen and(min-width:$desktop) {
         display: none;
     }
@@ -312,36 +436,45 @@ $moblie: 767px;
         font-weight: 900;
         color: #fff;
         text-align: right;
-        // 電腦版top圖片排行
-        #sec02-top-box{
-            .sec02-box1{
-                color:#000;
-                position: relative;
-                
-                img{
-                    position: absolute;
-                    top: 1px;
-                    width: 90px;
-                 left:30px;
-                    
+        .sec02-top1-box {
+            img {
+                width: 80px;
+            }
+            span {
+                font-size: 30px;
+            }
+            .sec02-top-text {
+                text-align: center;
+            }
+        }
+        #sec02-content {
+            position: relative;
+        }
+        #sec02-top-box {
+            position: absolute;
+            top: 1px;
+            .sec02-box1 {
+                color: #000;
+
+                img {
+                    width: 80px;
+                    height: 120px;
+                    border-radius: 50%;
                 }
-                .sec02-top-text{
-                    position: absolute;
-                    top: 60px;
-                    left:20px;
-                    span{
-                        font-size: 50px;
+                .sec02-top-text {
+                    font-size: 12px;
+
+                    span {
+                        font-size: 30px;
                     }
                 }
             }
         }
-
-
     }
 }
 // sec03 排名table-電腦版
 #sec03 {
-    padding-top: 10vw;
+    padding-top: 15vw;
     padding-bottom: 5vw;
     @media screen and(max-width:$moblie) {
         display: none;
@@ -383,7 +516,7 @@ $moblie: 767px;
 }
 // sec03排名table-手機板
 #sec03-moblie {
-    padding-top: 30vw;
+    padding-top: 40vw;
     position: relative;
     .arrow-table {
         position: fixed;
@@ -393,6 +526,7 @@ $moblie: 767px;
         z-index: 6;
         @media screen and(max-width:350px) {
             right: 10px;
+            bottom: 200px;
         }
     }
     .sec03-table-title {
@@ -408,9 +542,9 @@ $moblie: 767px;
         }
         #sec03-slider1,
         #sec03-slider2 {
-            margin: 0 30px;
+            margin: 0 5px;
             @media screen and(max-width:350px) {
-                margin: 0 10px;
+                margin: 0 5px;
             }
         }
 
@@ -420,9 +554,15 @@ $moblie: 767px;
                 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;
                 }
@@ -432,15 +572,20 @@ $moblie: 767px;
                 width: 50px;
             }
             .sec03-table-text {
-                padding: 10px;
+                padding: 0px 0px 0px 3px;
                 display: table-cell;
                 vertical-align: middle;
+                @media screen and(max-width:350px) {
+                    padding: 0px;
+                }
+
                 h1 {
-                    font-size: 20px;
+                    font-size: 14px;
                     margin: 0;
                 }
                 p {
                     margin: 0;
+                    font-size: 12px;
                 }
             }
         }
@@ -478,14 +623,22 @@ $moblie: 767px;
             width: 30vw;
         }
     }
+    .learn-more{
+        width: 45%;
+    }
     #sec04-container {
         .card {
+          
             img {
+                padding: 5px;
                 height: 150px;
                 object-fit: cover;
             }
             border-radius: 0%;
             box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
+            .card-title{
+                font-weight: 900;
+            }
         }
     }
 }
@@ -530,8 +683,6 @@ $moblie: 767px;
         .col {
             margin: 10px;
             .card {
-                
-
                 img {
                     height: 150px;
                     object-fit: cover;
@@ -544,6 +695,8 @@ $moblie: 767px;
 }
 // sec05 熱門作品-電腦版
 #sec05 {
+    width: 85vw;
+    margin: 0 auto;
     padding-top: 5vw;
     padding-bottom: 5vw;
     @media screen and(max-width:$moblie) {
@@ -555,6 +708,42 @@ $moblie: 767px;
         padding: 15px;
     }
     #sec05-container {
+        #sec05-destop-slider {
+            .slick-prev:before,
+            .slick-next:before {
+                opacity: 0;
+            }
+
+            .slick-prev,
+            .slick-next {
+                width: 40px;
+                height: 40px;
+                content: none;
+            }
+            .slick-prev {
+                background-image: url(./img/arrow-table2.png);
+                background-repeat: no-repeat;
+                left: -40px;
+                &:hover,
+                &:focus {
+                    background-image: url(./img/arrow-table2.png);
+                    background-repeat: no-repeat;
+                }
+            }
+            .slick-next {
+                background-image: url(./img/arrow-table.png);
+                background-repeat: no-repeat;
+                right: -50px;
+                &:hover,
+                &:focus {
+                    background-image: url(./img/arrow-table.png);
+                    background-repeat: no-repeat;
+                }
+            }
+        }
+        .col {
+            margin: 5px;
+        }
         .card {
             box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
         }
@@ -623,15 +812,26 @@ $moblie: 767px;
             width: 30vw;
         }
     }
- 
-    .card {
-        border: none;
-        background: none;
-        // .fb-post {
-        //     margin: 10px 0 !important;
-        // }
+
+    #sec06-container {
+        .card {
+            height: 480px;
+            margin:10px ;
+            img {
+                padding: 5px;
+                height: 150px;
+                object-fit: cover;
+            }
+            border-radius: 0%;
+            box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
+            .card-title{
+                font-weight: 900;
+            }
+            .learn-more{
+                width: 120px;
+            }
+        }
     }
-   
 }
 // sec07 table 電腦版
 #sec07 {
@@ -640,19 +840,19 @@ $moblie: 767px;
     @media screen and(max-width:$moblie) {
         display: none;
     }
-    .NFT-Collections-Sales-Volume{
-       width: 80vw;
-       margin: 0 auto;
-       margin-top: -120px;
-       margin-bottom: 50px;
+    .NFT-Collections-Sales-Volume {
+        width: 80vw;
+        margin: 0 auto;
+        margin-top: -120px;
+        margin-bottom: 50px;
         @media screen and(max-width:$moblie) {
-           display: none;
+            display: none;
         }
-        h1{
+        h1 {
             padding: 0;
             margin: 0;
             font-weight: normal;
-            color:#fff;
+            color: #fff;
             letter-spacing: 3px;
             font-size: 50px;
         }
@@ -665,33 +865,33 @@ $moblie: 767px;
         td {
             display: table-cell;
             vertical-align: middle;
-            text-align-last: left;
-            img{
+            text-align: left;
+            img {
                 width: 50px;
             }
-            .data-line{
+            .data-line {
                 width: 100px;
             }
         }
         th {
             display: table-cell;
             vertical-align: middle;
-            text-align-last: left;
+            text-align: left;
         }
         img {
             padding: 5px;
         }
     }
-    .sec07-table-button{
+    .sec07-table-button {
         text-align: right;
-        .data-button{
-            text-align:left;
+        .data-button {
+            text-align: left;
             border-radius: 25px;
             width: 10vw;
             padding: 5px 20px;
-            color:#000;
+            color: #000;
             background: url(./img/play.png) 80% 40% no-repeat scroll transparent;
-            background-size:18px 18px;
+            background-size: 18px 18px;
             background-color: #fff;
             border: 1px solid #000;
         }
@@ -708,11 +908,10 @@ $moblie: 767px;
         padding: 15px;
         font-weight: 900;
         color: #fff;
-        
     }
 }
 // sec07 table手機板
-#sec07-moblie{
+#sec07-moblie {
     padding-top: 5vw;
     padding-bottom: 5vw;
     @media screen and(min-width:$desktop) {
@@ -728,32 +927,34 @@ $moblie: 767px;
             vertical-align: middle;
             text-align-last: left;
             font-size: 14px;
-            img{
+            img {
                 width: 30px;
             }
-            .data-line{
+            .data-line {
                 width: 80px;
             }
         }
         th {
             display: table-cell;
             vertical-align: middle;
+            text-align: left;
+            font-size: 14px;
         }
         img {
             padding: 5px;
             width: 50px;
         }
     }
-    .sec07-table-button{
+    .sec07-table-button {
         text-align: right;
-        .data-button{
-            text-align:left;
+        .data-button {
+            text-align: left;
             border-radius: 25px;
             width: 35vw;
             padding: 5px 20px;
-            color:#000;
+            color: #000;
             background: url(./img/play.png) 80% 40% no-repeat scroll transparent;
-            background-size:18px 18px;
+            background-size: 18px 18px;
             background-color: #fff;
             border: 1px solid #000;
         }