Merge branch 'master' of http://git.choozmo.com:3000/choozmo/NFTBoard

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();
+  });

index.html

@@ -40,23 +40,78 @@
             <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="" style="padding-top: 3vw;">相關新聞</a>
+            <hr>
+           <a class="link" data-gt-target="#sec02-moblie" data-gt-duration="800"
+                    data-gt-offset="60">TOP NFT ARTIST</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">NFT資訊</a>
+            <hr>
+           <a class="link" data-gt-target="#sec07-moblir-title" data-gt-duration="500"
+                    data-gt-offset="50">NFT趨勢數據</a>
+            <hr>
+            <a class="link" data-gt-target="#information-mobile" 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/banner.webp" alt="">
+            <div class="youtube " >
+                <div  class="row">
+                    <div id="youtube-text" class="col-12 order-2 col-lg-4 order-lg-1">
+                      <h1 style="text-align: left;">依照選舉結果變化的數位收藏品(NFT)？</h1>
+                      <hr>
+                      <p>去年10月美國邁阿密藝術收藏家羅德里格斯福瑞爾（Pablo Rodriguez-Fraile）以近 6 萬 7000 美元（約新台幣 187萬元）代價，買下數位藝術家 Beeple 的一件影片作品。</p>
+                      <p>兩幅畫正在美國總統拜登與川普在選舉前進行拍賣，川普的選舉結果決定了畫家這幅畫的最終呈現。</p> 
+                      <a target="https://www.abmedia.io/dynamic-nft-to-change-via-election-result
+                      https://twitter.com/i/status/1322273227977203713
+                      " href="https://www.abmedia.io/dynamic-nft-to-change-via-election-result
+                      https://twitter.com/i/status/1322273227977203713
+                      "><button class="learn-more">LearnMore</button> </a>                 
+                    </div>
+                    <div class="col-12  order-1 col-lg-8 order-lg-2">
+                        <style>.embed-container { position: relative;  padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//qj0_2TgJLtY' frameborder='0' allowfullscreen></iframe></div>
+                    </div>
+                </div>
+               
+            </div>
+           
             <h1>歡迎訂閱掌握最新活動資訊</h1>
             <!-- 電腦版按鈕 -->
-            <input type="email" name="email" id="email" placeholder="請在此輸入email"><input class="btn" type="submit"
-                value="立即訂閱">
+            <form class="contact-form-destop">
+                <input type="email" name="email" id="email" placeholder="請在此輸入email"><input class="btn" type="submit"
+                    value="立即訂閱">
+            </form>
             <!-- 手機板按鈕 -->
-            <div style="text-align: center;">
-                <input type="email" id="email-moblie" placeholder="請在此輸入email"><input id="email-arrow" type="submit"
-                    value="">
-            </div>
+            <form class="contact-form-mobile">
+                <div style="text-align: center;">
+                    <input type="email" id="email-moblie" placeholder="請在此輸入email"><input id="email-arrow" type="submit"
+                        value="">
+                </div>
+
+            </form>
         </div>
     </section>
 
-    <!-- news -->
+    <!-- sec01 news -->
     <section id="sec01" class="container-fluid" style="padding:5vw 0;">
         <div class="NEWS">
             <h1>NEWS</h1>
@@ -64,58 +119,57 @@
         <div id="sec01-container" class="container-fluid">
             <div id="sec01-container-card" class="row">
                 <div class="card col-lg-6">
-                    <img src="./img/sec01/box1webp.webp" alt="">
+                    <img src="https://storage.googleapis.com/image.blocktempo.com/2021/06/f3fd701e-beec-413f-982d-4a0c3e5b425c-1140x570.png" alt="">
                     <div class="row">
                         <div class="col-2">
                             <h1>1</h1>
 
                         </div>
                         <div class="col-10">
-                            <p>Lorem ipsum </p>
-                            <p>But I must explain to you how all this mistaken idea of.</p>
-
+                           <a target="https://www.blocktempo.com/binance-nft-everything-you-need-to-know-about-the-june-24-launch-2/" href="https://www.blocktempo.com/binance-nft-everything-you-need-to-know-about-the-june-24-launch-2/"><p  class="sec01-title">Binance NFT 市場上線！致敬藝術家創世紀拍賣、盲盒活動，平台首日驚喜不斷</p></a> 
+                            <p>就是幣安Binance NFT平台橫空出世，引起了全球大漣漪，圈起了無數熱衷藝術與數位創作者的突進!</p>
+                        
                         </div>
                     </div>
                 </div>
                 <div class="card col-lg-6">
-                    <img src="./img/sec01/box2webp.webp" alt="">
+                    <img src="./img/sec01/sec01-img02webp.webp" alt="">
                     <div class="row">
                         <div class="col-2">
                             <h1>2</h1>
 
                         </div>
                         <div class="col-10">
-                            <p>Lorem ipsum </p>
-                            <p>But I must explain to you how all this mistaken idea of.</p>
-
+                           <a target="https://www.facebook.com/nftboard/posts/115134340811601" href="https://www.facebook.com/nftboard/posts/115134340811601"><p  class="sec01-title">NFT的誕生基於2017年以太坊中一個叫做CryptoPunks的像素頭像項目</p></a> 
+                            <p>這些像素頭像總量上限為1萬，任何兩個人物都不能相同，擁有以太坊錢包的人都可以免費領取，領完可以放到二級市場交易。</p>
+                           
                         </div>
                     </div>
                 </div>
                 <div class="card col-lg-6">
-                    <img src="./img/sec01/box3webp.webp" alt="">
+                    <img src="https://external.ftpe13-2.fna.fbcdn.net/safe_image.php?d=AQFRPd2ASq15cuhX&w=584&h=305&url=https%3A%2F%2Fimg.chainnews.com%2Fupload%2Fcover%2F9016370500224ebbcdf7943b39add0f4.jpg-large&cfs=1&ext=jpg&ccb=3-5&_nc_hash=AQEexe9vdLe57p_Z" alt="">
                     <div class="row">
                         <div class="col-2">
                             <h1>3</h1>
 
                         </div>
                         <div class="col-10">
-                            <p>Lorem ipsum </p>
-                            <p>But I must explain to you how all this mistaken idea of.</p>
+                            <a target="https://www.chainnews.com/zh-hant/articles/776491954921.htm" href="https://www.chainnews.com/zh-hant/articles/776491954921.htm"><p  class="sec01-title">盤點︱你不知道的 NFT 交易量排行榜前 10 名</p></a>
+                            <p>根據 NonFungible 的排名，在 120 家上榜公司中，按歷史銷量排名前 10 位的公司如下......</p>
+               
 
                         </div>
                     </div>
                 </div>
                 <div class="card col-lg-6">
-                    <img src="./img/sec01/box4webp.webp" alt="">
+                    <img src="https://scontent.ftpe13-2.fna.fbcdn.net/v/t1.6435-9/201138769_116652273993141_3905296953708787561_n.jpg?_nc_cat=108&ccb=1-3&_nc_sid=730e14&_nc_ohc=pzjeWoR6-TEAX-MmeEg&_nc_ht=scontent.ftpe13-2.fna&oh=5a722d725f647e8992882de6143d8cf8&oe=60E30FCC" alt="">
                     <div class="row">
                         <div class="col-2">
                             <h1>4</h1>
-
                         </div>
                         <div class="col-10">
-                            <p>Lorem ipsum </p>
-                            <p>But I must explain to you how all this mistaken idea of.</p>
-
+                            <a target="https://www.facebook.com/100259488965753/posts/116652300659805/?d=n" href="https://www.facebook.com/100259488965753/posts/116652300659805/?d=n"><p class="sec01-title">NFT 大獎!Surprise!原來我們公司出現大獎Black BNB得主!</p></a>
+                            <p>是我們 #NFTBoard 的美女PM - Maggie!! NFTBoard公司位在 #N24台北方舟 研擬幣安搶購計畫.....</p>
                         </div>
                     </div>
                 </div>
@@ -125,24 +179,36 @@
     <!-- sec02-Top-box- 電腦版-->
     <section id="sec02">
         <div id="sec02-container" class="container-fluid">
-            <div class="row">
-                <div class="col-5 order-2 col-lg-5 order-lg-1">
+            <div id="sec02-top-box" class="row">
+                <div class="col-lg-3">
                     <h1>TOP SELLERS</h1>
                     <h1>THIS WEEK</h1>
                 </div>
-                <div class="col-7 order-1 col-lg-7 order-lg-2 ">
-                    <div id="sec02-top-box" class="row">
-                        <div class="sec02-box1 col-4 order-2 col-lg-4">
-                            <img src="./img/sec02/top1.png" alt="">
-                            <div class="sec02-top-text"><span>1</span>Name</div>
+                <div id="sec02-content" class="col-lg-9">
+                    <div  class="row">
+                        <div class="sec02-box1   col-lg-2">
+                            <img src="./img/sec02/top1webp.webp" alt="">
+                            <div class="sec02-top-text"><span>1</span>Beeple</div>
+                            <div>（邁克•溫克爾曼）</div>
                         </div>
-                        <div class="sec02-box1 col-4 order-1 col-lg-4">
-                            <img src="./img/sec02/top2.png" alt="">
-                            <div  class="sec02-top-text" ><span>2</span>Name</div>
+                        <div class="sec02-box1   col-lg-2">
+                            <img src="./img/sec02/top2webp.webp" alt="">
+                            <div class="sec02-top-text"><span>2</span>Trevorjonesart</div>
+                            <div>（特雷弗瓊斯）</div>
                         </div>
-                        <div class="sec02-box1 col-4  order-3 col-lg-4">
-                            <img src="./img/sec02/top3.png" alt="">
-                            <div  class="sec02-top-text"><span>3</span>Name</div>
+                        <div class="sec02-box1   col-lg-2">
+                            <img src="./img/sec02/top3webp.webp" alt="">
+                            <div class="sec02-top-text"><span>3</span>FEWOCIOUS</div>
+                        </div>
+                        <div class="sec02-box1   col-lg-2">
+                            <img src="./img/sec02/top4webp.webp" alt="">
+                            <div class="sec02-top-text"><span>4</span>muratpak</div>
+                            <div>(派克)</div>
+                        </div>
+                        <div class="sec02-box1  col-lg-2">
+                            <img src="./img/sec02/top5webp.webp" alt="">
+                            <div class="sec02-top-text"><span>5</span>Maddogjones</div>
+                            <div>(麥道瓊斯)</div>
                         </div>
                     </div>
                 </div>
@@ -153,24 +219,36 @@
     <!-- sec02-Top-box- 手機板-->
     <section id="sec02-moblie">
         <div id="sec02-container" class="container-fluid">
-            <div class="row">
+            <div class="sec02-top1-box" class="row">
                 <div class="col-12 order-1">
-                    <h1>TOP SELLERS</h1>
-                    <h1>THIS WEEK</h1>
+                    <div class="row">
+                        <div style="text-align: center;" class="col-6">
+                            <!-- <img src="./img/sec02/top1webp.webp" alt="">
+                            <div  class="sec02-top-text"><span>1</span>Beeple</div>
+                            <div style="text-align:center;">（邁克•溫克爾曼）</div> -->
+                        </div>
+                        <div class="col-6">
+                            <h1>TOP SELLERS</h1>
+                            <h1>THIS WEEK</h1>
+                        </div>
+                    </div>
                 </div>
-                <div class="col-12 order-2">
+                <div id="sec02-content" class="col-12 order-2">
                     <div id="sec02-top-box" class="row">
                         <div class="sec02-box1 col-4 order-2 ">
-                            <img src="./img/sec02/top1.png" alt="">
-                            <div class="sec02-top-text"><span>1</span>Name</div>
+                            <img style="width:120px; height:150px;" src="./img/sec02/top1webp.webp" alt="">
+                            <div class="sec02-top-text"><span>1</span>Beeple</div>
+                            <div  class="sec02-top-text" >（邁克溫克爾曼）</div>
                         </div>
                         <div class="sec02-box1 col-4 order-1 ">
-                            <img src="./img/sec02/top2.png" alt="">
-                            <div  class="sec02-top-text" ><span>2</span>Name</div>
+                            <img src="./img/sec02/top2webp.webp" alt="">
+                            <div class="sec02-top-text"><span>2</span>Trevorjonesart</div>
+                            <div  class="sec02-top-text" style="display: block;">（特雷弗瓊斯）</div>
                         </div>
                         <div class="sec02-box1 col-4  order-3 ">
-                            <img src="./img/sec02/top3.png" alt="">
-                            <div  class="sec02-top-text"><span>3</span>Name</div>
+                            <img src="./img/sec02/top3webp.webp" alt="">
+                            <div class="sec02-top-text"><span>3</span>muratpak</div>
+                            <div  class="sec02-top-text" style="display: block;">(派克)</div>
                         </div>
                     </div>
                 </div>
@@ -198,13 +276,13 @@
                             <tr>
                                 <th scope="row">1</th>
                                 <td>
-                                    <img src="./img/sec03/table1.png" alt="">
+                                    <img src="./img/sec03/top1webp.webp" alt="">
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <h1>Community</h1>
+                                            <h1>作者:Simon Denny</h1>
                                         </div>
                                         <div>
-                                            <p>Community</p>
+                                            <p>作品名稱:Backdated NFT/Ethereum Stamp</p>
                                         </div>
                                     </div>
                                 </td>
@@ -213,13 +291,13 @@
                             <tr>
                                 <th scope="row">2</th>
                                 <td>
-                                    <img src="./img/sec03/table2.png" alt="">
+                                    <img src="./img/sec03/top2webp.webp" alt="">
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <h1>Community</h1>
+                                            <h1>作者:beeple</h1>
                                         </div>
                                         <div>
-                                            <p>Community</p>
+                                            <p>作品名稱:BULL RUN #115/271</p>
                                         </div>
                                     </div>
                                 </td>
@@ -228,13 +306,13 @@
                             <tr>
                                 <th scope="row">3</th>
                                 <td>
-                                    <img src="./img/sec03/table3.png" alt="">
+                                    <img src="./img/sec03/top3webp.webp" alt="">
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <h1>Community</h1>
+                                            <h1>作者:楊夏蕙</h1>
                                         </div>
                                         <div>
-                                            <p>Community</p>
+                                            <p>作品名稱:The Eternal Cloudsitter</p>
                                         </div>
                                     </div>
                                 </td>
@@ -244,13 +322,13 @@
                             <tr>
                                 <th scope="row">4</th>
                                 <td>
-                                    <img src="./img/sec03/table4.png" alt="">
+                                    <img src="./img/sec03/top4webp.webp" alt="">
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <h1>Community</h1>
+                                            <h1>作者:SasGlas</h1>
                                         </div>
                                         <div>
-                                            <p>Community</p>
+                                            <p>作品名稱:The Eternal Cloudsitter</p>
                                         </div>
                                     </div>
                                 </td>
@@ -259,13 +337,13 @@
                             <tr>
                                 <th scope="row">5</th>
                                 <td>
-                                    <img src="./img/sec03/table5.png" alt="">
+                                    <img src="./img/sec03/top5webp.webp" alt="">
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <h1>Community</h1>
+                                            <h1>作者:nifty-gateway-omnibus</h1>
                                         </div>
                                         <div>
-                                            <p>Community</p>
+                                            <p>作品名稱:Seven Nation Army Remix 004 #225/333</p>
                                         </div>
                                     </div>
                                 </td>
@@ -281,13 +359,13 @@
                             <tr>
                                 <th scope="row">1</th>
                                 <td>
-                                    <img src="./img/sec03/table1.png" alt="">
+                                    <img src="./img/sec03/11webp.webp" alt="">
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <h1>Community</h1>
+                                            <h1>pplpleasr</h1>
                                         </div>
                                         <div>
-                                            <p>Community</p>
+                                       
                                         </div>
                                     </div>
                                 </td>
@@ -296,13 +374,13 @@
                             <tr>
                                 <th scope="row">2</th>
                                 <td>
-                                    <img src="./img/sec03/table2.png" alt="">
+                                    <img src="./img/sec03/22webp.webp" alt="">
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <h1>Community</h1>
+                                            <h1>Gabe Weis</h1>
                                         </div>
                                         <div>
-                                            <p>Community</p>
+                                            
                                         </div>
                                     </div>
                                 </td>
@@ -311,13 +389,13 @@
                             <tr>
                                 <th scope="row">3</th>
                                 <td>
-                                    <img src="./img/sec03/table3.png" alt="">
+                                    <img src="./img/sec03/33webp.webp" alt="">
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <h1>Community</h1>
+                                            <h1>馬修  </h1>
                                         </div>
                                         <div>
-                                            <p>Community</p>
+                                            
                                         </div>
                                     </div>
                                 </td>
@@ -327,13 +405,13 @@
                             <tr>
                                 <th scope="row">4</th>
                                 <td>
-                                    <img src="./img/sec03/table4.png" alt="">
+                                    <img src="./img/sec03/44webp.webp" alt="">
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <h1>Community</h1>
+                                            <h1>麥羨雲</h1>
                                         </div>
                                         <div>
-                                            <p>Community</p>
+                                            
                                         </div>
                                     </div>
                                 </td>
@@ -342,13 +420,13 @@
                             <tr>
                                 <th scope="row">5</th>
                                 <td>
-                                    <img src="./img/sec03/table5.png" alt="">
+                                    <img src="./img/sec03/55webp.webp" alt="">
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <h1>Community</h1>
+                                            <h1>林淵源</h1>
                                         </div>
                                         <div>
-                                            <p>Community</p>
+                                            
                                         </div>
                                     </div>
                                 </td>
@@ -376,18 +454,18 @@
                 <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.png" alt="">
-                                    <div class="sec03-table-text" style="display: inline-block ;">
+                                    <img src="./img/sec03/top1webp.webp" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block;" >
                                         <div>
-                                            <h1>Community</h1>
+                                            <h1>作者:Simon Denny</h1>
                                         </div>
                                         <div>
-                                            <p>Community</p>
+                                            <p>作品名稱:</p>
+                                            <p>Backdated NFT/Ethereum Stamp</p>
                                         </div>
                                     </div>
                                 </td>
@@ -396,13 +474,14 @@
                             <tr>
                                 <th scope="row">2</th>
                                 <td>
-                                    <img src="./img/sec03/table2.png" alt="">
-                                    <div class="sec03-table-text" style="display: inline-block ;">
+                                    <img src="./img/sec03/top2webp.webp" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block;">
                                         <div>
-                                            <h1>Community</h1>
+                                            <h1>作者:beeple</h1>
                                         </div>
                                         <div>
-                                            <p>Community</p>
+                                            <p>作品名稱:</p>
+                                            <p>BULL RUN #115/271</p>
                                         </div>
                                     </div>
                                 </td>
@@ -410,18 +489,17 @@
                             </tr>
                             <tr>
                                 <th scope="row">3</th>
-                                <td style="position: relative;">
-                                    <img src="./img/sec03/table3.png" alt="">
-                                    <div class="sec03-table-text" style="display: inline-block ;">
+                                <td>
+                                    <img src="./img/sec03/top3webp.webp" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block;" >
                                         <div>
-                                            <h1>Community</h1>
+                                            <h1>作者:楊夏蕙</h1>
                                         </div>
                                         <div>
-                                            <p>Community</p>
+                                            <p>作品名稱:</p>
+                                            <p>The Eternal Cloudsitter</p>
                                         </div>
                                     </div>
-
-
                                 </td>
 
 
@@ -429,13 +507,14 @@
                             <tr>
                                 <th scope="row">4</th>
                                 <td>
-                                    <img src="./img/sec03/table4.png" alt="">
-                                    <div class="sec03-table-text" style="display: inline-block ;">
+                                    <img src="./img/sec03/top4webp.webp" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block;" >
                                         <div>
-                                            <h1>Community</h1>
+                                            <h1>作者:SasGlas</h1>
                                         </div>
                                         <div>
-                                            <p>Community</p>
+                                            <p>作品名稱:</p>
+                                            <p>The Eternal Cloudsitter</p>
                                         </div>
                                     </div>
                                 </td>
@@ -444,13 +523,15 @@
                             <tr>
                                 <th scope="row">5</th>
                                 <td>
-                                    <img src="./img/sec03/table5.png" alt="">
-                                    <div class="sec03-table-text" style="display: inline-block ;">
+                                    <img src="./img/sec03/top5webp.webp" alt="">
+                                    <div class="sec03-table-text" style="display: inline-block" >
                                         <div>
-                                            <h1>Community</h1>
+                                            <h1>作者:nifty-gateway-omnibus</h1>
                                         </div>
                                         <div>
-                                            <p>Community</p>
+                                            <p>作品名稱:</p>
+                                            <p>Seven Nation Army Remix</p>
+                                            <p> 004#225/333</p>
                                         </div>
                                     </div>
                                 </td>
@@ -465,13 +546,13 @@
                             <tr>
                                 <th scope="row">1</th>
                                 <td>
-                                    <img src="./img/sec03/table1.png" alt="">
+                                    <img src="./img/sec03/11webp.webp" alt="">
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <h1>Community</h1>
+                                            <h1>pplpleasr</h1>
                                         </div>
                                         <div>
-                                            <p>Community</p>
+                                       
                                         </div>
                                     </div>
                                 </td>
@@ -480,13 +561,13 @@
                             <tr>
                                 <th scope="row">2</th>
                                 <td>
-                                    <img src="./img/sec03/table2.png" alt="">
+                                    <img src="./img/sec03/22webp.webp" alt="">
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <h1>Community</h1>
+                                            <h1>Gabe Weis</h1>
                                         </div>
                                         <div>
-                                            <p>Community</p>
+                                            
                                         </div>
                                     </div>
                                 </td>
@@ -495,13 +576,13 @@
                             <tr>
                                 <th scope="row">3</th>
                                 <td>
-                                    <img src="./img/sec03/table3.png" alt="">
+                                    <img src="./img/sec03/33webp.webp" alt="">
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <h1>Community</h1>
+                                            <h1>馬修  </h1>
                                         </div>
                                         <div>
-                                            <p>Community</p>
+                                            
                                         </div>
                                     </div>
                                 </td>
@@ -511,13 +592,13 @@
                             <tr>
                                 <th scope="row">4</th>
                                 <td>
-                                    <img src="./img/sec03/table4.png" alt="">
+                                    <img src="./img/sec03/44webp.webp" alt="">
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <h1>Community</h1>
+                                            <h1>麥羨雲</h1>
                                         </div>
                                         <div>
-                                            <p>Community</p>
+                                            
                                         </div>
                                     </div>
                                 </td>
@@ -526,13 +607,13 @@
                             <tr>
                                 <th scope="row">5</th>
                                 <td>
-                                    <img src="./img/sec03/table5.png" alt="">
+                                    <img src="./img/sec03/55webp.webp" alt="">
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <h1>Community</h1>
+                                            <h1>林淵源</h1>
                                         </div>
                                         <div>
-                                            <p>Community</p>
+                                            
                                         </div>
                                     </div>
                                 </td>
@@ -559,7 +640,8 @@
                             <h5 class="card-title">馬斯克比特幣購車喊卡，真是因為耗能？還是在炒幣？</h5>
                             <p class="card-text">【林之晨專欄】特斯拉2月原本要接受比特幣購車，5月卻改口說太耗能而喊停。背後的真相為何？這樣的耗能值得嗎？近期北美科技圈的熱門議題......
                             </p>
-                            <a href="https://www.cw.com.tw/article/5115048?from=search">查看更多</a>
+                            
+                            <a target="https://www.cw.com.tw/article/5115048?from=search" href="https://www.cw.com.tw/article/5115048?from=search"><button class="learn-more">LearnMore</button></a>
 
                         </div>
                     </div>
@@ -573,7 +655,7 @@
                             <p class="card-text">這類藝術品的規模有多大，大多數NFT都可以當成藝術品，比如卡牌，比如NBA TOP SHOT,那麼這個數據劃分其實有很大不一樣.......
                             </p>
 
-                            <a href="https://weibo.com/ttarticle/p/show?id=2309404643700557873571">查看更多</a>
+                            <a href="https://weibo.com/ttarticle/p/show?id=2309404643700557873571"><button class="learn-more">LearnMore</button></a>
                         </div>
                     </div>
                 </div>
@@ -585,7 +667,7 @@
                             <h5 class="card-title">馬斯克比特幣購車喊卡，真是因為耗能？還是在炒幣？</h5>
                             <p class="card-text">【林之晨專欄】特斯拉2月原本要接受比特幣購車，5月卻改口說太耗能而喊停。背後的真相為何？這樣的耗能值得嗎？近期北美科技圈的熱門議題......
                             </p>
-                            <a href="https://www.cw.com.tw/article/5115048?from=search">查看更多</a>
+                            <a href="https://www.cw.com.tw/article/5115048?from=search"><button class="learn-more">LearnMore</button></a>
 
                         </div>
                     </div>
@@ -599,7 +681,7 @@
                             <p class="card-text">這類藝術品的規模有多大，大多數NFT都可以當成藝術品，比如卡牌，比如NBA TOP SHOT,那麼這個數據劃分其實有很大不一樣.......
                             </p>
 
-                            <a href="https://weibo.com/ttarticle/p/show?id=2309404643700557873571">查看更多</a>
+                            <a href="https://weibo.com/ttarticle/p/show?id=2309404643700557873571"><button class="learn-more">LearnMore</button></a>
                         </div>
                     </div>
                 </div>
@@ -685,10 +767,9 @@
                 <a href=""><button>Templates</button></a>
             </div> -->
             <div id="sec05-container" class="container-fluid">
-                <div class="row row-cols-1 row-cols-md-3 g-4">
-                    <div class="col">
+                <div id="sec05-destop-slider" class="row ">
+                    <div  class="col">
                         <div class="card">
-
                             <blockquote class="instagram-media"
                                 data-instgrm-permalink="https://www.instagram.com/p/CNNSzxPAeeh/?utm_source=ig_embed&amp;utm_campaign=loading"
                                 data-instgrm-version="13"
@@ -3098,142 +3179,109 @@
         <div class="container-fluid">
             <h1>NFT資訊</h1>
             <hr>
-            <div class="row row-cols-1 row-cols-md-3 g-4">
+            <div id="sec06-container" class="row">
                 <div class="col">
                     <div class="card">
-                        <div class="fb-post" data-href="https://www.facebook.com/nftboard/posts/115144517477250"
-                            data-width="350" data-show-text="false">
-                            <blockquote cite="https://www.facebook.com/nftboard/posts/115144517477250"
-                                class="fb-xfbml-parse-ignore">
-                                <p>#NFT資訊
-                                    聊一聊NFT應用場景~(6)紀錄/身分驗證
-
-                                    11. 實體資產和文件記錄
-
-                                    NFT...</p>由 <a href="https://www.facebook.com/nftboard/">NFTBoard</a> 發佈於&nbsp;<a
-                                    href="https://www.facebook.com/nftboard/posts/115144517477250">2021年6月26日 星期六</a>
-                            </blockquote>
+                        <img src="https://external.ftpe13-2.fna.fbcdn.net/safe_image.php?d=AQEfCe0Wa6AbcoTq&w=1000&h=522&url=https%3A%2F%2Fstorage.googleapis.com%2Fwww-cw-com-tw%2Farticle%2F202103%2Farticle-6049c5a18f37c.jpg&cfs=1&ext=jpg&ccb=3-5&_nc_hash=AQGy_UtwawoXrsPb"
+                            class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">誰要買這個啦！推特執行長賣推文「加密熱潮」新標的，NFT是什麼？</h5>
+                            <p class="card-text">如果果你還沒聽過NFT，應該也快聽說了。NFT正在攻佔網路，並被認為是區塊鏈技術 （blockchain technology） 的最佳應用實例。</p>
+                            
+                            <a target="https://www.facebook.com/nftboard/posts/105110191814016" href="https://www.facebook.com/nftboard/posts/105110191814016"><button class="learn-more">LearnMore</button></a>
                         </div>
                     </div>
                 </div>
                 <div class="col">
                     <div class="card">
-                        <div class="fb-post" data-href="https://www.facebook.com/nftboard/posts/115143380810697"
-                            data-width="350" data-show-text="false">
-                            <blockquote cite="https://www.facebook.com/nftboard/posts/115143380810697"
-                                class="fb-xfbml-parse-ignore">
-                                <p>#NFT資訊
-                                    聊一聊NFT應用場景~(4)門票/體育
-                                    7. 活動門票
-
-                                    目前，門票偽造和大量囤票是一個亟需解決的大問題。NFT...</p>由 <a
-                                    href="https://www.facebook.com/nftboard/">NFTBoard</a> 發佈於&nbsp;<a
-                                    href="https://www.facebook.com/nftboard/posts/115143380810697">2021年6月26日 星期六</a>
-                            </blockquote>
-                        </div>
-                        <div class="fb-post" data-href="https://www.facebook.com/nftboard/posts/115142517477450"
-                            data-width="350" data-show-text="false">
-                            <blockquote cite="https://www.facebook.com/nftboard/posts/115142517477450"
-                                class="fb-xfbml-parse-ignore">
-                                <p>#NFT資訊
-                                    聊一聊NFT應用場景~(3)域名/技能
-                                    5. 域名
-
-                                    NFT 正是線上與線下對象銜接過程中真正缺失的環節，未來，NFT 不僅會改變藝術，還將改變商業、金融、社會和文化。對於藝術和知識產權來說，免經審查的NFT...</p>
-                                由 <a href="https://www.facebook.com/nftboard/">NFTBoard</a> 發佈於&nbsp;<a
-                                    href="https://www.facebook.com/nftboard/posts/115142517477450">2021年6月26日 星期六</a>
-                            </blockquote>
-                        </div>
-                        <div class="fb-post" data-href="https://www.facebook.com/nftboard/posts/115135607478141"
-                            data-width="350" data-show-text="false">
-                            <blockquote cite="https://www.facebook.com/nftboard/posts/115135607478141"
-                                class="fb-xfbml-parse-ignore">
-                                <p>#NFT資訊
-                                    當下火熱的NFT有沒投資價值？一般人如何通過參與NFT獲得收益？
-                                    NFT就是去中心化金融Defi世界當中的【藝術品投資收藏市場】，但不同於傳統的藝術品投資，經過互聯網加持下的文化產品已經不再僅僅局限於收藏實體的藝術品。
-
-                                    一首...</p>由 <a href="https://www.facebook.com/nftboard/">NFTBoard</a> 發佈於&nbsp;<a
-                                    href="https://www.facebook.com/nftboard/posts/115135607478141">2021年6月26日 星期六</a>
-                            </blockquote>
-                        </div>
+                        <img src="https://scontent.ftpe13-2.fna.fbcdn.net/v/t1.6435-9/201236812_115143364144032_8042637130702346240_n.png?_nc_cat=106&ccb=1-3&_nc_sid=730e14&_nc_ohc=wnzcy7cxZUEAX_BB-hm&_nc_ht=scontent.ftpe13-2.fna&oh=bb799ad063e1de0495c3fa4a220d4372&oe=60E1CE85"
+                            class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">聊一聊NFT應用場景~門票/體育、活動門票系列</h5>
+                            <p class="card-text">目前，門票偽造和大量囤票是一個亟需解決的大問題。NFT 在分佈式賬本上保存的記錄具有不可更改性，使得票據可以在區塊鏈上進行獨立驗證和認證，避免了作弊方法。</p>
+                           
 
+                            <a target="https://www.facebook.com/nftboard/posts/115143380810697" href="https://www.facebook.com/nftboard/posts/115143380810697"><button class="learn-more">LearnMore</button></a>
+                        </div>
                     </div>
                 </div>
                 <div class="col">
                     <div class="card">
-                        <div class="fb-post" data-href="https://www.facebook.com/nftboard/posts/115144110810624"
-                            data-width="350" data-show-text="false">
-                            <blockquote cite="https://www.facebook.com/nftboard/posts/115144110810624"
-                                class="fb-xfbml-parse-ignore">
-                                <p>#NFT資訊
-                                    聊一聊NFT應用場景~(5)時尚/娛樂
-                                    9. 時尚
-
-                                    與時尚行業相關的NFT 也可以在以太坊區塊鍊網絡上投入使用，推出項目。現在，越來越多的NFT...</p>由 <a
-                                    href="https://www.facebook.com/nftboard/">NFTBoard</a> 發佈於&nbsp;<a
-                                    href="https://www.facebook.com/nftboard/posts/115144110810624">2021年6月26日 星期六</a>
-                            </blockquote>
+                        <img src="./img/sec06.png"
+                            class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">聊一聊NFT應用場景~紀錄/身分驗證、實體資產和文件記錄</h5>
+                            <p class="card-text">NFT 可以將現實世界中的資產，如房產、股票或文件，如資質、執照、病歷、出生和死亡證明等，進行代幣化。NFT也可以應用於身份認證。提供完整記錄。</p>
+                            
+                            <a target="https://www.facebook.com/nftboard/posts/115144517477250" href="https://www.facebook.com/nftboard/posts/115144517477250"><button class="learn-more">LearnMore</button></a>
+
                         </div>
                     </div>
                 </div>
-
-
-
                 <div class="col">
                     <div class="card">
-                        <div class="fb-post" data-href="https://www.facebook.com/nftboard/posts/115141257477576"
-                            data-width="350" data-show-text="false">
-                            <blockquote cite="https://www.facebook.com/nftboard/posts/115141257477576"
-                                class="fb-xfbml-parse-ignore">
-                                <p>#NFT資訊
-                                    聊一聊NFT應用場景~(1)遊戲/藝術
+                        <img src="./img/sec06-02webp.webp"
+                            class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">聊一聊NFT應用場景~遊戲/藝術</h5>
+                            <p class="card-text">NFT 主要應用場景之一就是遊戲。基於區塊鏈技術的NFT 能夠記錄玩家在遊戲內的狀態和成就，保存遊戲中獲得的物品清單，如武器、電源、車輛、角色等。</p>
 
-                                    1. 遊戲
+                            <a target="https://www.facebook.com/nftboard/posts/115141257477576" href="https://www.facebook.com/nftboard/posts/115141257477576"><button class="learn-more">LearnMore</button></a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card">
+                        <img src="./img/sec06-03.png"
+                            class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">聊一聊NFT應用場景~音樂/虛擬世界</h5>
+                            <p class="card-text">NFT 市場有望為音樂迷們打開虛擬收藏品的世界。在K-pop 領域，許多歌迷已經接受了NFT 收藏品這種形式——獨立發行的專輯備受追捧。NFT 另一個用例是創建虛擬世界。</p>
 
-                                    NFT 主要應用場景之一就是遊戲。基於區塊鏈技術的NFT 能夠記錄玩家在遊戲內的狀態和成就，保存遊戲中獲得的物品清單，如武器、電源、車輛、角色等。
+                            <a target="https://www.facebook.com/nftboard/posts/115141780810857" href="https://www.facebook.com/nftboard/posts/115141780810857"><button class="learn-more">LearnMore</button></a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card">
+                        <img src="https://scontent.ftpe13-2.fna.fbcdn.net/v/t1.6435-9/199736752_115142487477453_8806712894992115858_n.png?_nc_cat=108&ccb=1-3&_nc_sid=730e14&_nc_ohc=f632SfbRzKoAX_CCRNo&_nc_ht=scontent.ftpe13-2.fna&oh=d3e9a6af8aca9151d5b8f8cf13c86340&oe=60E22786"
+                            class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">聊一聊NFT應用場景~域名/技能</h5>
+                            <p class="card-text">NFT 正是線上與線下對象銜接過程中真正缺失的環節，未來NFT 不僅會改變藝術，還將改變商業、金融、社會和文化。對於藝術和知識產權來說，免經審查的NFT 是一種寶貴財富和發展平台。</p>
 
-                                    用例:...</p>由 <a href="https://www.facebook.com/nftboard/">NFTBoard</a> 發佈於&nbsp;<a
-                                    href="https://www.facebook.com/nftboard/posts/115141257477576">2021年6月26日 星期六</a>
-                            </blockquote>
+                            <a target="https://www.facebook.com/nftboard/posts/115142517477450" href="https://www.facebook.com/nftboard/posts/115142517477450"><button class="learn-more">LearnMore</button></a>
                         </div>
                     </div>
                 </div>
 
                 <div class="col">
                     <div class="card">
-                        <div class="fb-post" data-href="https://www.facebook.com/nftboard/posts/115134340811601"
-                            data-width="350" data-show-text="false">
-                            <blockquote cite="https://www.facebook.com/nftboard/posts/115134340811601"
-                                class="fb-xfbml-parse-ignore">
-                                <p>#NFT資訊
-                                    NFT的誕生基於2017年以太坊中一個叫做CryptoPunks的像素頭像項目，這些像素頭像總量上限為1萬，任何兩個人物都不能相同，擁有以太坊錢包的人都可以免費領取，領完可以放到二級市場交易。
-
-                                    6個月後，區塊鏈小遊戲Cryp...</p>由 <a href="https://www.facebook.com/nftboard/">NFTBoard</a>
-                                發佈於&nbsp;<a href="https://www.facebook.com/nftboard/posts/115134340811601">2021年6月26日
-                                    星期六</a>
-                            </blockquote>
+                        <img src="./img/sec06-04.png"
+                            class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">當下火熱的NFT有沒投資價值？一般人如何通過參與NFT獲得收益？</h5>
+                            <p class="card-text">NFT就是去中心化金融Defi世界當中的【藝術品投資收藏市場】，但不同於傳統的藝術品投資，經過互聯網加持下的文化產品已經不再僅僅局限於收藏實體的藝術品。</p>
+
+                            <a target="https://www.facebook.com/nftboard/posts/115135607478141" href="https://www.facebook.com/nftboard/posts/115135607478141"><button class="learn-more">LearnMore</button></a>
                         </div>
                     </div>
                 </div>
+
                 <div class="col">
                     <div class="card">
-                        <div class="fb-post" data-href="https://www.facebook.com/nftboard/posts/115141780810857"
-                            data-width="350" data-show-text="false">
-                            <blockquote cite="https://www.facebook.com/nftboard/posts/115141780810857"
-                                class="fb-xfbml-parse-ignore">
-                                <p>#NFT資訊
-                                    聊一聊NFT應用場景~(2)音樂/虛擬世界
-                                    3. 音樂
-                                    NFT 市場有望為音樂迷們打開虛擬收藏品的世界。在K-pop 領域，許多歌迷已經接受了NFT...</p>由 <a
-                                    href="https://www.facebook.com/nftboard/">NFTBoard</a> 發佈於&nbsp;<a
-                                    href="https://www.facebook.com/nftboard/posts/115141780810857">2021年6月26日 星期六</a>
-                            </blockquote>
+                        <img src="https://external.ftpe13-2.fna.fbcdn.net/safe_image.php?d=AQGPzKGLC4W9ZOtx&w=862&h=450&url=https%3A%2F%2Fwww.blockchainappfactory.com%2Fimages%2Fog_images%2Findex.png&cfs=1&ext=jpg&ccb=3-5&_nc_hash=AQE10mYSe0P8G-hh"
+                            class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">聊一聊NFT應用場景時尚/娛樂</h5>
+                            <p class="card-text">與時尚行業相關的NFT 也可以在以太坊區塊鍊網絡上投入使用，推出項目。現在，越來越多的NFT 項目與全球的時尚設計師進行合作，為他們提供知識產權保護。</p>
+
+                            <a target="https://www.facebook.com/nftboard/posts/115144110810624" href="https://www.facebook.com/nftboard/posts/115144110810624"><button class="learn-more">LearnMore</button></a>
                         </div>
                     </div>
                 </div>
             </div>
 
-
         </div>
     </section>
 
@@ -3259,7 +3307,57 @@
                         <th scope="col">Last 7 Days</th>
                     </tr>
                 </thead>
-                <tbody id="pc"></tbody>
+                <tbody>
+                    <tr>
+                        <th scope="row">1</th>
+                        <td><img src="https://s3.coinmarketcap.com/generated/nft/collections/cryptopunks.png"
+                                alt="">CryptoPunks</td>
+                        <td>10000</td>
+                        <td>$364,897,006.99 </td>
+                        <td>$364,897,006.99 </td>
+                        <td>14,022</td>
+                        <td><img class="data-line"
+                                src="https://s3.coinmarketcap.com/generated/sparklines/nft/collection/web/30d/cryptopunks.png"
+                                alt=""></td>
+                    </tr>
+                    <tr>
+                        <th scope="row">2</th>
+                        <td><img src="https://s3.coinmarketcap.com/generated/nft/collections/artblocks.png" alt="">Art
+                            Blocks</td>
+                        <td>50,357</td>
+                        <td>$39,478,456.73</td>
+                        <td>$39,478,456.73 </td>
+                        <td>67,921</td>
+                        <td><img class="data-line"
+                                src="https://s3.coinmarketcap.com/generated/sparklines/nft/collection/web/30d/artblocks.png"
+                                alt=""></td>
+                    </tr>
+                    <tr>
+                        <th scope="row">3</th>
+                        <td><img src="https://s3.coinmarketcap.com/generated/nft/collections/sorare.png" alt="">Sorare
+                        </td>
+                        <td>310,463</td>
+                        <td>$71,376,688.34 </td>
+                        <td>$71,376,688.34 </td>
+                        <td>389,959 </td>
+                        <td><img class="data-line"
+                                src="https://s3.coinmarketcap.com/generated/sparklines/nft/collection/web/30d/sorare.png"
+                                alt=""></td>
+                    </tr>
+                    <tr>
+                        <th scope="row">4</th>
+                        <td> <img src="https://s3.coinmarketcap.com/generated/nft/collections/thesandbox.png" alt="">The
+                            Sandbox</td>
+                        <td>87,420</td>
+                        <td>$29,148,868.09 </td>
+                        <td>$29,148,868.09 </td>
+                        <td>94,561 </td>
+                        <td><img class="data-line"
+                                src="https://s3.coinmarketcap.com/generated/sparklines/nft/collection/web/30d/thesandbox.png"
+                                alt=""></td>
+                    </tr>
+
+                </tbody>
             </table>
             <div class="sec07-table-button">
                 <button class="showdata data-button">完整數據</button>
@@ -3304,10 +3402,10 @@
             <a href=""><span>｜</span>NFTfair.art<span>｜</span></a>
         </div>
         <div class="text">
-            <h2>客服電話:0988268521</h2>
-            <h2>客服信箱:elainsmail@gmail.com</h2>
+            <h2>客服電話：0988268521</h2>
+            <h2>客服信箱：elainsmail@gmail.com</h2>
             <h2 style="display: block;">公司名稱：微生活知識科技公司</h2>
-            <p>開拓opentalk &copy; All Rights Reserved.</p>
+            <p>開拓Open Talk &copy; All Rights Reserved.</p>
         </div>
     </footer>
 

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;
         }