內容更新

atricle.html

@@ -44,16 +44,16 @@
     </section>
     <section class="py-5 bg-white mb-5"></section>
     <section id="adv01" class="py-5 bg-light">
-        <div class="container-fluid w-50">
+        <div class="adv01-1 container-fluid">
             <img class="img-fluid" src="./img/adv/adv1.webp" alt="">
         </div>
     </section>
 
     <section id="sec10" class="container-fluid pt-3">
         <div class="row">
-            <div class="col-lg-8">
+            <div class="col-lg-7">
                 <h1>
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                 </h1>
                 <p class="card-text"><small class="text-muted">By NFTBoard</small></p>
                 <img class="m-1" style="width: 20px;" src="./img/time.png" alt=""><span>2hr ago</span>
@@ -62,30 +62,30 @@
                 <div class="sec11-content mt-3">
                     <h2> Lorem ipsum dolor sit amet consectetur, </h2>
                     <p>
-                        Lorem ipsum dolor sit amet consectetur, 
-                        adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi? 
+                        Lorem ipsum dolor sit amet consectetur,
+                        adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
                         Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia repellendus!
-                        Lorem ipsum dolor sit amet consectetur, 
-                        adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi? 
+                        Lorem ipsum dolor sit amet consectetur,
+                        adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
                         Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia repellendus!
                     </p>
                     <img class="img-fluid" src="./img/sec01/sec01-img04.webp" alt="">
                     <h2 class="mt-3"> Lorem ipsum dolor sit amet consectetur </h2>
                     <p>
-                        Lorem ipsum dolor sit amet consectetur, 
-                        adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi? 
-                        Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia 
-                        Lorem ipsum dolor sit amet consectetur, 
-                        adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi? 
-                        Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia 
+                        Lorem ipsum dolor sit amet consectetur,
+                        adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
+                        Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia
+                        Lorem ipsum dolor sit amet consectetur,
+                        adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
+                        Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia
                     </p>
                     <h2 class="mt-3"> Culpa blanditiis recusandae </h2>
                     <p>
-                        Lorem ipsum dolor sit amet consectetur, 
-                        adipisicing elit. Accusamus reprehenderit 
-                        Culpa blanditiis recusandae minus. Eos quasi 
-                        Lorem ipsum dolor sit amet consectetur, 
-                       
+                        Lorem ipsum dolor sit amet consectetur,
+                        adipisicing elit. Accusamus reprehenderit
+                        Culpa blanditiis recusandae minus. Eos quasi
+                        Lorem ipsum dolor sit amet consectetur,
+
                     </p>
 
                     <ul>
@@ -95,24 +95,54 @@
                     </ul>
 
                     <h2 class="my-3"> Accusamus reprehenderit unde </h2>
-                    <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//hSO68EnYsgM' frameborder='0' allowfullscreen></iframe></div>
+                    <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//hSO68EnYsgM'
+                            frameborder='0' allowfullscreen></iframe></div>
                     <p>
-                         Eos quasi 
-                        Lorem ipsum dolor sit amet consectetur, 
-                        adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi? 
+                        Eos quasi
+                        Lorem ipsum dolor sit amet consectetur,
+                        adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
                         Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia repellendus!
                     </p>
                     <img class="img-fluid" src="./img/sec01/6.jpg" alt="">
                     <h2>Eos quasi iste culpa voluptatibus</h2>
                     <p>
-                        Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi? 
-                        Lorem ipsum dolor sit amet consectetur, 
-                        adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi? 
+                        Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
+                        Lorem ipsum dolor sit amet consectetur,
+                        adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
+                        Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia repellendus!
+                    </p>
+                    <ul>
+                        <li>Lorem ipsum dolor sit amet consectetu</li>
+                        <li>adipisicing elit. Accusamus</li>
+                        <li>Eos quasi iste culpa voluptatibus</li>
+                        <li>Culpa blanditiis recusandae minus</li>
+                    </ul>
+                    <p> Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
                         Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia repellendus!
                     </p>
                 </div>
-               
+
             </div>
+            <div class="col-lg-1"></div>
             <div class="col-lg-4">
                 <hr>
                 <div class="card-body">
@@ -140,6 +170,63 @@
             </div>
         </div>
     </section>
+    <section id="adv02" class="py-5 bg-light">
+        <div class="adv01-1 container-fluid">
+            <img class="img-fluid" src="./img/sec01/218116504_124830393175329_4675674980376029305_n.jpg" alt="">
+        </div>
+    </section>
+    <section id="sec11">
+
+        <div id="sec11-container" class="container-fluid px-0">
+            <hr>
+            <h1>Related posts</h1>
+            <div class="sec11-01 row row-col-1 row-cols-sm-2">
+                <div class="col my-3">
+                    <div class="card mb-3 p-1 h-100 border-0">
+                        <div class="col-12"></div>
+                        <img class="sec11-img img-fluid rounded-3" src="./img/sec01/Olympic.png" alt="">
+                        <h2 class="my-3"> Lorem ipsum dolor sit</h2>
+                        <p class="card-text"><small class="text-muted">By NFTBoard | <img class="m-1"
+                                    style="width: 15px;" src="./img/time.png" alt=""> 2 hr ago </small></p>
+                    </div>
+                </div>
+                <div class="col my-3">
+                    <div class="card mb-3 p-1 h-100 border-0">
+                        <div class="col">
+                            <img class="sec11-img img-fluid rounded-3" src="./img/sec06/sec06-01.webp" alt="">
+                            <h2 class="my-3"> Lorem ipsum dolor sit</h2>
+                            <p class="card-text"><small class="text-muted">By NFTBoard | <img class="m-1"
+                                        style="width: 15px;" src="./img/time.png" alt=""> 2 hr ago </small></p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col my-3">
+                    <div class="card mb-3 p-1 h-100 border-0">
+                        <div class="col">
+                            <img class="sec11-img img-fluid rounded-3" src="./img/sec01/SEC11.png" alt="">
+                            <h2 class="my-3"> Lorem ipsum dolor sit</h2>
+                            <p class="card-text"><small class="text-muted">By NFTBoard | <img class="m-1"
+                                        style="width: 15px;" src="./img/time.png" alt=""> 2 hr ago </small></p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col my-3">
+                    <div class="card mb-3 p-1 h-100 border-0">
+                        <div class="col">
+                            <img class="sec11-img img-fluid rounded-3" src="./img/sec01/sec01-img02webp.webp" alt="">
+                            <h2 class="my-3"> Lorem ipsum dolor sit</h2>
+                            <p class="card-text"><small class="text-muted">By NFTBoard | <img class="m-1"
+                                        style="width: 15px;" src="./img/time.png" alt=""> 2 hr ago </small></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+
+        </div>
+    </section>
 
     <footer id="footer" class="container-fluid" style="padding:0;margin:0">
         <div class="text" style="padding-right:0;">
@@ -149,7 +236,8 @@
             <h2>公司名稱：微生活知識科技公司</h2>
             <a target="_blank" href="https://www.facebook.com/nftboard">
                 <img src="./img/facebook (2).png" alt=""></a>
-            <a target="_blank" href="https://www.instagram.com/nftboard.info/"><img src="./img/instagram.png" alt=""></a>    
+            <a target="_blank" href="https://www.instagram.com/nftboard.info/"><img src="./img/instagram.png"
+                    alt=""></a>
             <p>NFTBoard &copy; All Rights Reserved.</p>
         </div>
     </footer>

goto.js

@@ -376,4 +376,3 @@ $(function () {
   }
 });
 
-

index.html

@@ -77,7 +77,7 @@
                 <a data-gt-target="#sec05" data-gt-duration="500" data-gt-offset="60">熱門作品</a>
                 <a data-gt-target="#sec06" data-gt-duration="500" data-gt-offset="60">NFT資訊</a>
                 <a data-gt-target="#sec06" data-gt-duration="500" data-gt-offset="-700">NFT趨勢數據</a>
-                <a target="_blank" href="  https://docs.google.com/forms/d/e/1FAIpQLSf2gw6oO4WJ2lmNGescLRdGgS3H5IUgOd2xu4nmzqh5g0JH5g/viewform">聯絡我們</a>
+                <a target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLSf2gw6oO4WJ2lmNGescLRdGgS3H5IUgOd2xu4nmzqh5g0JH5g/viewform">聯絡我們</a>
 
             </div>
             <img id="menu-btn1" src="./img/menu.png" alt="">
@@ -280,12 +280,10 @@
                             <h2 style="font-size: 25px;" class="youtube-text-title2">國際奧委會今年與nWayPlay 合作推出一系列 紀念 NFT 胸章</h2>
                             <div class="youtube-text-hr" style="border-top:1px dashed #cccccc;height: 1px;overflow:hidden"></div>
                             <p>此次發行的有1896年的雅典奧運、1924年的巴黎奧運、1924 年的霞慕尼冬奧（首屆冬季奧運）、1932 年的普萊西德湖冬奧（首屆在美國舉行的冬奧）、1964 年的東京奧運（首度在亞洲舉行的奧運）、1972 年的慕尼黑奧運（首次有官方吉祥物的奧運）。
-
                             </p>
                         </div>
                         <div class="col-12  order-1 col-lg-7 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//p4ma3rmPY2E?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
-                           
+                            <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//p4ma3rmPY2E?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>                           
                         </div>
                     </div>
 
@@ -565,7 +563,7 @@
                                             </a>
                                         </div>
                                         <div>
-                                            <a target="https://www.oursong.com/project/dprnydqw/song-share-card"
+                                            <a target="_blank"
                                                 href="https://www.oursong.com/project/dprnydqw/song-share-card">
                                                 <p>1970Marlboro</p>
                                             </a>
@@ -964,11 +962,11 @@
                 <h1>洞察報告</h1>
                 <hr class="line">
             </div>
-            <div id="sec04-container" class="row row-cols-1 row-cols-md-4 g-4">
+            <div id="sec04-container" class="row row-cols-1 row-cols-md-3 g-4">
                 <div class="col">
                     <div class="card h-100 d-inline-block">
                         <img src="./img/sec04/safe_image.jpg" class="card-img-top" alt="...">
-                        <div style="height: 320px;" class="card-body mb-5">
+                        <div style="height: 280px;" class="card-body mb-2">
                             <h5 class="card-title">區塊鏈可以幫助出版商提高受眾信任度，46% 的受訪者表示他們願意為準確的新聞付費</h5>
                             <p class="card-text">"區塊鏈如何增加信任?艾米·惠特克在《華爾街日報》上寫道。“什麼可以防止篡改歷史記錄——是否有可能為子孫後代保護這些信息？” Haber 和 Stornetta 的解決方案：........。
                             </p>
@@ -981,7 +979,7 @@
                 <div class="col">
                     <div class="card h-100 d-inline-block">
                         <img src="./img/sec04/5.png" class="card-img-top" alt="...">
-                        <div style="height: 320px;" class="card-body mb-5">
+                        <div style="height: 280px;" class="card-body">
                             <h5 class="card-title">NFT 熱潮”對生態系統有何影響？被炒作吸引的人是留下來還是來得快？繁榮後看起來像繁榮前嗎？</h5>
                             <p class="card-text">之前：2020年9月至12月
                                 繁榮前：2021 年 1 月至 2 月
@@ -998,7 +996,7 @@
                 <div class="col">
                     <div class="card h-100 d-inline-block">
                         <img src="./img/sec04/sec01-img-03.jpg" class="card-img-top" alt="...">
-                        <div style="height: 320px;" class="card-body mb-5">
+                        <div style="height: 280px;" class="card-body mb-2">
                             <h5 class="card-title">藝術家塑造了我們的集體文化，推動了幾代人的進步。</h5>
                             <p class="card-text">借助 NFT、DeFi 和 VR，我們可以顛覆現有的剝削創作者的模式，而是推動一場革命，引領下一次復興。
                             </p>
@@ -1007,7 +1005,7 @@
                             class="learn-more">LearnMore</button></a>
                     </div>
                 </div>
-                <div class="col">
+                <!-- <div class="col">
                     <div class="card h-100 d-inline-block">
                         <img src="./img/sec04/sec04-img-04.jpg" class="card-img-top" alt="...">
                         <div style="height: 320px;" class="card-body mb-5">
@@ -1018,7 +1016,7 @@
                         <a  class="p-3" target="_blank" href="https://www.facebook.com/nftboard/posts/120019486989753"><button
                             class="learn-more">LearnMore</button></a>
                     </div>
-                </div>
+                </div> -->
             </div>
 
 
@@ -3818,10 +3816,9 @@
 
     <!--sec07 table -電腦版 -->
     <section id="sec07">
-        <div class="NFT-Collections-Sales-Volume">
-
+        <a style="text-decoration: none;" target="_blank" href="./atricle.html"><div  class="NFT-Collections-Sales-Volume">
             <h1>NFT COLLECTIONS SALES VOLUME</h1>
-        </div>
+        </div></a>
         <div class="container-fluid">
             <table id="mytab" class="table">
                 <thead class="llll">

style.css

@@ -1250,14 +1250,6 @@ body .learn-more:hover {
 #sec04 #sec04-container .card {
   border: none;
   border-radius: 0%;
-  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
-          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
-}
-
-#sec04 #sec04-container .card img {
-  height: 150px;
-  -o-object-fit: cover;
-     object-fit: cover;
 }
 
 #sec04 #sec04-container .card .card-title {
@@ -2562,8 +2554,87 @@ body .learn-more:hover {
   opacity: 0.6;
 }
 
+@media screen and (max-width: 767px) {
+  #adv01 .adv01-1 {
+    width: 100vw;
+    margin: 0;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #adv01 .adv01-1 img {
+    width: 100vw;
+  }
+}
+
+#adv02 .adv01-1 {
+  width: 90vw;
+}
+
+@media screen and (max-width: 767px) {
+  #adv02 .adv01-1 {
+    width: 100vw;
+    margin: 0;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #adv02 .adv01-1 img {
+    width: 100vw;
+  }
+}
+
+#sec10 {
+  width: 85vw;
+}
+
 #sec10 p {
   line-height: 2;
   font-size: 16px;
 }
+
+#sec11 #sec11-container {
+  width: 85vw;
+}
+
+#sec11 #sec11-container h1 {
+  font-weight: 900;
+  font-size: 28px;
+}
+
+@media screen and (max-width: 767px) {
+  #sec11 #sec11-container .sec11-01 {
+    display: block;
+  }
+}
+
+#sec11 #sec11-container .col {
+  overflow: hidden;
+}
+
+#sec11 #sec11-container .sec11-img {
+  width: 550px;
+  height: 350px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+#sec11 #sec11-container .sec11-img:hover {
+  -webkit-transform: scale(1.02);
+          transform: scale(1.02);
+}
+
+@media screen and (max-width: 767px) {
+  #sec11 #sec11-container .sec11-img {
+    height: 250px;
+  }
+}
+
+#sec11 #sec11-container h2 {
+  font-weight: 900;
+  font-size: 24px;
+}
 /*# sourceMappingURL=style.css.map */

style.scss

@@ -206,7 +206,7 @@ body {
             }
             @media screen and(max-width:$moblie) {
                 padding-top: 10vw;
-               
+
                 width: 95vw;
             }
             #youtube-text {
@@ -224,8 +224,7 @@ body {
                         width: 80vw;
                     }
                 }
-               
-                
+
                 .youtube-text-title2 {
                     width: 350px;
                     @media screen and(max-width:$moblie) {
@@ -300,7 +299,7 @@ body {
             }
         }
 
-        .youtube7-10{
+        .youtube7-10 {
             width: 80vw;
             padding-top: 10vw;
             margin: 0 auto;
@@ -311,7 +310,7 @@ body {
             }
             @media screen and(max-width:$moblie) {
                 padding-top: 10vw;
-               
+
                 width: 95vw;
             }
             #youtube-text {
@@ -474,64 +473,61 @@ body {
     }
 }
 // sec01 video
-#sec01-container-viedeo{
-    
-        .card {
-            padding: 30px;
-            border: none !important;
+#sec01-container-viedeo {
+    .card {
+        padding: 30px;
+        border: none !important;
+        @media screen and(max-width:$moblie) {
+            padding: 15px;
+        }
+        h1 {
+            padding: 15px;
+            font-size: 40px;
+            font-weight: 900;
+            color: #9b9b9b;
+        }
+        p {
+            padding: 5px;
+            font-size: 18px;
+            margin-bottom: 0 !important;
             @media screen and(max-width:$moblie) {
-                padding: 15px;
-            }
-            h1 {
-                padding: 15px;
-                font-size: 40px;
-                font-weight: 900;
-                color: #9b9b9b;
+                padding: 0px;
+                font-size: 16px;
             }
-            p {
-                padding: 5px;
+        }
+        .sec01-title {
+            padding: 15px 0px;
+            font-weight: 900;
+            font-size: 22px;
+            @media screen and(max-width:$moblie) {
                 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;
-                }
+        }
+        a {
+            text-decoration: none;
+            color: #000;
+            transition: 0.3s;
+            cursor: pointer;
+            &:hover {
+                color: #2828ff;
             }
-            img {
-                text-align: center;
-                width: 35vw;
-                height: 240px;
-                object-fit: cover;
-                @media screen and(max-width:$moblie) {
-                    width: 85vw;
-                    height: 200px;
-                    margin: 0 auto;
-                }
+        }
+        img {
+            text-align: center;
+            width: 35vw;
+            height: 240px;
+            object-fit: cover;
+            @media screen and(max-width:$moblie) {
+                width: 85vw;
+                height: 200px;
+                margin: 0 auto;
             }
         }
-    
+    }
 }
 // sec01 NEWS
 #sec01 {
     padding-top: 5vw;
-  
 
     .NEWS {
         width: 80vw;
@@ -616,52 +612,50 @@ body {
     }
 }
 // 影片區塊
-#video{
+#video {
     width: 100vw;
     padding-bottom: 10vw;
     text-align: center;
     // background: url(./img/sec04banner.jpg);
     background-position: center center;
     background-size: cover;
-    video{
+    video {
         width: 80vw;
         margin: 0 auto;
     }
 }
-.wrap{
-text-align: center;
-width: 100vw;
-    .adv-banner{
+.wrap {
+    text-align: center;
+    width: 100vw;
+    .adv-banner {
         width: 100%;
         height: 90vh;
         position: relative;
         overflow: hidden;
         display: flex;
         justify-content: center;
-        align-items:center;
+        align-items: center;
         @media screen and(max-width:$moblie) {
             height: 35vh;
         }
-      }
-      .adv-banner video{
+    }
+    .adv-banner video {
         position: absolute;
         width: 100%;
         height: 90%;
-        top:0;
-        left:0;
+        top: 0;
+        left: 0;
         object-fit: cover;
-      }
-}   
+    }
+}
 // 活動作品集
 #sec-works {
-    
     .sec-work-container {
         width: 85vw;
     }
     #sec-work-box {
         .work-box {
             .card {
-             
                 height: 780px;
                 text-align: center;
                 display: inline-block !important;
@@ -989,12 +983,10 @@ width: 100vw;
         padding-bottom: 50px;
         .card {
             border: none;
-            img {
-                height: 150px;
-                object-fit: cover;
-            }
+         
+
             border-radius: 0%;
-            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+            
             .card-title {
                 font-weight: 900;
             }
@@ -2028,7 +2020,7 @@ width: 100vw;
     position: relative;
     @media screen and(max-width:$moblie) {
         background: linear-gradient(180deg, #414141 100%, transparent 30%, #fff 55%);
-        padding-top:10vw;
+        padding-top: 10vw;
     }
 
     #sec08-container-box {
@@ -2039,16 +2031,15 @@ width: 100vw;
     #sec08-title {
         background: #414141;
         padding-top: 5vw;
-        .col-lg-9{
+        .col-lg-9 {
             position: relative;
             #OUR-PARTNER {
                 position: absolute;
-                    top: -10px;
-                    right: 0vw;
-                    @media screen and(max-width:$moblie) {
-                        top: 0px;
-                         
-                      }
+                top: -10px;
+                right: 0vw;
+                @media screen and(max-width:$moblie) {
+                    top: 0px;
+                }
                 h5 {
                     font-size: 5em;
                     opacity: 0.8;
@@ -2057,13 +2048,12 @@ width: 100vw;
                     text-align: center;
                     letter-spacing: 10px;
                     font-weight: 900;
-                   
+
                     color: #f5f5f5;
                     @media screen and(max-width:$moblie) {
-                      font-size: 20px;
+                        font-size: 20px;
                         letter-spacing: 5px;
                         text-align: left;
-                       
                     }
                 }
             }
@@ -2098,7 +2088,7 @@ width: 100vw;
             box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
             @media screen and(max-width:$moblie) {
                 padding-top: 5vw;
-            padding-bottom: 5vw;
+                padding-bottom: 5vw;
             }
             .adv4 {
                 display: flex;
@@ -2126,17 +2116,16 @@ width: 100vw;
 
 #sec09 {
     background: #414141;
-    
 
     padding-bottom: 5vw;
-    .col-lg-9{
+    .col-lg-9 {
         position: relative;
         #TRADING {
             position: absolute;
             right: -10px;
             top: -180px;
             @media screen and(max-width:$moblie) {
-                top:5px;
+                top: 5px;
                 right: 30px;
             }
             @media screen and(max-width:350px) {
@@ -2153,9 +2142,8 @@ width: 100vw;
                 color: #f5f5f5;
                 @media screen and(max-width:$moblie) {
                     font-size: 20px;
-                      letter-spacing: 5px;
-                      text-align: left;
-                  
+                    letter-spacing: 5px;
+                    text-align: left;
                 }
             }
         }
@@ -2198,7 +2186,7 @@ width: 100vw;
             padding-top: 5vw;
             padding-bottom: 5vw;
             border: none;
-            .sec09-7{
+            .sec09-7 {
                 width: 200px;
             }
             .adv4 {
@@ -2241,7 +2229,7 @@ width: 100vw;
     line-height: 2;
     background: #313131;
     color: #fff;
- 
+
     .footer-link {
         padding-top: 3vw;
 
@@ -2281,7 +2269,7 @@ width: 100vw;
             font-size: 20px;
             margin: 10px;
             letter-spacing: 1px;
-           
+
             @media screen and(max-width:$moblie) {
                 display: block;
                 font-size: 16px;
@@ -2289,25 +2277,92 @@ width: 100vw;
             }
         }
         p {
-            
             margin: 0 !important;
         }
         img {
             width: 30px;
-            margin:10px;
+            margin: 10px;
             filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(138deg) brightness(103%) contrast(102%);
             transition: 0.3s;
             &:hover {
-              opacity: 0.6;
+                opacity: 0.6;
             }
         }
     }
 }
+#adv01{
+    .adv01-1{
+        @media screen and(max-width:$moblie) {
+            width: 100vw;
+            margin: 0;
+          }
 
+        img{
+            @media screen and(max-width:$moblie) {
+              width: 100vw;
+            }
+        }
+    }
+    
+}
+#adv02{
+    .adv01-1{
+        width: 90vw;
+        @media screen and(max-width:$moblie) {
+            width: 100vw;
+            margin: 0;
+          }
+
+        img{
+            @media screen and(max-width:$moblie) {
+              width: 100vw;
+            }
+        }
+    }
+    
+}
 // 第二層文章
-#sec10{
-    p{
+#sec10 {
+    width: 85vw;
+    p {
         line-height: 2;
         font-size: 16px;
     }
 }
+
+#sec11 {
+    #sec11-container {
+        h1{
+            font-weight: 900;
+            font-size: 28px;
+          
+        }
+        width: 85vw;
+        .sec11-01{
+            @media screen and(max-width:$moblie) {
+                display: block;
+            }
+        }
+        .col{
+            overflow: hidden;
+        }
+       .sec11-img{
+         width: 550px;
+         height: 350px;
+           object-fit: cover;
+           transition: 0.3s;
+            cursor: pointer;
+           &:hover{
+            transform: scale(1.02);
+           }
+           @media screen and(max-width:$moblie) {
+            height: 250px;
+        }
+           
+       }
+        h2 {
+            font-weight: 900;
+            font-size: 24px;
+        }
+    }
+}