修正

index.html

@@ -3670,13 +3670,13 @@
                 <div class="card">
 
                     <div id="sec08-slider" class="row">
-                        <div class="col-4"><a href=""><img src="./img/sec08/sec06-01.jpg" alt=""></a></div>
-                        <div class="col-4"><a href=""><img src="./img/sec08/sec06-02.png" alt=""></a></div>
-                        <div class="col-4"><a href=""><img src="./img/sec08/sec06-04.png" alt=""></a></div>
-                        <div class="col-4 adv4"><a href=""><img src="./img/sec08/sec06-05.png" alt=""></a></div>
-                        <div class="col-4"><a href=""><img src="./img/sec08/sec06-8.jpg" alt=""></a></div>
-                        <div class="col-4"><a href="https://opentalk.center/"><img src="./img/sec08/logo01_jpg.jpg" alt=""></a></div>     
-                        <div class="col-4"> <a href="https://www.oursong.com/party/vbloqxgl?redeem_code=XJBONRDL"></a><img src="./img/sec08/oursong.jpg" alt=""></div>
+                        <div class="col-3"><a href=""><img class="img-fluid" src="./img/sec08/sec06-8.jpg" alt=""></a></div>
+                        <div class="col-3"><a href=""><img class="img-fluid" src="./img/sec08/sec06-02.png" alt=""></a></div>
+                        <div class="col-3"><a href=""><img class="img-fluid" src="./img/sec08/sec06-04.png" alt=""></a></div>
+                        <div class="col-3 d-flex align-items-center justfy-content-center"><a href=""><img  class="img-fluid" src="./img/sec08/sec06-05.png" alt=""></a></div>
+                        <div class="col-3"><a href=""><img class="img-fluid"  src="./img/sec08/sec06-01.jpg" alt=""></a></div>
+                        <div class="col-3"><a href="https://opentalk.center/"><img class="img-fluid" src="./img/sec08/logo01_jpg.jpg" alt=""></a></div>     
+                        <div class="col-3"><a href="https://www.oursong.com/party/vbloqxgl?redeem_code=XJBONRDL"></a><img class="img-fluid"  src="./img/sec08/oursong.jpg" alt=""></div>
                       
                     </div>
                 </div>
@@ -3687,7 +3687,7 @@
     <section id="sec09">
         <div id="sec09-container-box">
             <div id="sec09-title">
-                <h1>合作夥伴</h1>
+                <h1>交易平台</h1>
                 <hr class="line">
             </div>
             <div id="sec09-container" class="container-fluid">

style.css

@@ -805,7 +805,7 @@ body .learn-more:hover {
 
 #sec03 #sec03-table .table .sec03-table-text p {
   margin: 0;
-  color: #9B9B9B;
+  color: #9b9b9b;
 }
 
 #sec03-moblie {
@@ -921,7 +921,7 @@ body .learn-more:hover {
 #sec03-moblie #sec03-slider .table .sec03-table-text p {
   margin: 0;
   font-size: 12px;
-  color: #9B9B9B;
+  color: #9b9b9b;
 }
 
 @media screen and (min-width: 1025px) {
@@ -1996,35 +1996,12 @@ body .learn-more:hover {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  margin: 0 30px;
-  width: 300px;
-}
-
-@media screen and (max-width: 767px) {
-  #sec08 #sec08-container .card .adv4 img {
-    width: 100px;
-    margin: 0px;
-  }
 }
 
-#sec08 #sec08-container .col-4 {
+#sec08 #sec08-container .col-3 {
   margin: 10px 0;
 }
 
-#sec08 #sec08-container .col-4 img {
-  width: 250px;
-}
-
-@media screen and (max-width: 767px) {
-  #sec08 #sec08-container .col-4 img {
-    width: 100px;
-  }
-}
-
-#sec09 {
-  background: #000;
-}
-
 #sec09 #sec09-container-box {
   background-size: contain;
   background-repeat: no-repeat;
@@ -2073,7 +2050,6 @@ body .learn-more:hover {
   padding-top: 5vw;
   padding-bottom: 5vw;
   border: none;
-  background: #000;
 }
 
 #sec09 #sec09-container .card .adv4 {
@@ -2102,10 +2078,13 @@ body .learn-more:hover {
 
 #sec09 #sec09-container .col-4 {
   margin: 10px 0;
+  padding: 15px;
 }
 
 #sec09 #sec09-container .col-4 img {
-  width: 250px;
+  width: 200px;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 @media screen and (max-width: 767px) {

style.scss

@@ -14,7 +14,6 @@ $navbgcolor: #313131;
     @media screen and(max-width:$moblie) {
         width: 90vw;
     }
-
 }
 body {
     background: #fff;
@@ -99,14 +98,14 @@ body {
             }
         }
     }
-    #socail-link{
+    #socail-link {
         padding: 4vw 1vw 2vw 1vw;
         @media screen and(max-width:$moblie) {
             display: none;
         }
-        img{
+        img {
             width: 30px;
-         
+
             filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(138deg) brightness(103%) contrast(102%);
             transition: 0.3s;
             &:hover {
@@ -195,21 +194,20 @@ body {
 
             padding-bottom: 10vw;
         }
-        .youtube{
+        .youtube {
             width: 80vw;
             padding-top: 10vw;
             margin: 0 auto;
             color: #fff;
-            a{
+            a {
                 text-decoration: none;
-                color:#fff;
+                color: #fff;
             }
             @media screen and(max-width:$moblie) {
                 padding-top: 10vw;
                 margin: 0 auto;
             }
             #youtube-text {
-          
                 h1 {
                     font-size: 40px;
                     text-align: left;
@@ -274,10 +272,9 @@ body {
                 }
             }
         }
-        #youtube2{
-            #youtube-text{
-
-                h1{
+        #youtube2 {
+            #youtube-text {
+                h1 {
                     font-size: 30px;
                     @media screen and(max-width:$moblie) {
                         font-size: 23px;
@@ -285,7 +282,7 @@ body {
                     }
                 }
                 .youtube-text-title1 {
-                   width: 450px;
+                    width: 450px;
                     @media screen and(max-width:$moblie) {
                         width: 80vw;
                     }
@@ -296,7 +293,6 @@ body {
                         width: 80vw;
                     }
                 }
-                
             }
         }
 
@@ -484,7 +480,7 @@ body {
 // sec02 TOP排名 電腦版
 #sec02 {
     background: #414141;
-    padding:3vw;
+    padding: 3vw;
     @media screen and(max-width:$moblie) {
         display: none;
     }
@@ -515,9 +511,8 @@ body {
                     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
                 }
                 .sec02-top-text {
-                    h1{
+                    h1 {
                         font-size: 50px;
-                        
                     }
                     span {
                         font-size: 30px;
@@ -541,12 +536,12 @@ body {
         padding: 15px;
         font-weight: 900;
         color: #fff;
-       
+
         width: 100vw;
         .sec02-top1-box {
-            h1{
+            h1 {
                 font-size: 40px;
-                padding:3vw 0;
+                padding: 3vw 0;
             }
             img {
                 width: 80px;
@@ -558,11 +553,11 @@ body {
                 text-align: center;
             }
         }
-       
+
         #sec02-top-box {
             width: 95vw;
             margin: 5px;
-          
+
             .sec02-box1 {
                 color: #000;
 
@@ -621,7 +616,7 @@ body {
             }
             td {
                 padding: 15px;
-               
+
                 a {
                     text-decoration: none;
                     color: #000;
@@ -642,7 +637,7 @@ body {
                 }
                 p {
                     margin: 0;
-                    color:#9B9B9B;
+                    color: #9b9b9b;
                 }
             }
         }
@@ -650,7 +645,6 @@ body {
 }
 // sec03排名table-手機板
 #sec03-moblie {
-
     position: relative;
     .arrow-table {
         position: fixed;
@@ -686,8 +680,8 @@ body {
         }
         #sec03-slider1,
         #sec03-slider2 {
-         margin-left: 10px;
-         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+            margin-left: 10px;
+            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
             @media screen and(max-width:350px) {
                 margin: 0 5px;
             }
@@ -736,7 +730,7 @@ body {
                 p {
                     margin: 0;
                     font-size: 12px;
-                    color:#9B9B9B;
+                    color: #9b9b9b;
                 }
             }
         }
@@ -749,7 +743,7 @@ body {
 #sec04 {
     padding-top: 5vw;
     padding-bottom: 5vw;
-    background:#414141 ;
+    background: #414141;
     background-position: center center;
     background-size: cover;
     @media screen and(max-width:$moblie) {
@@ -783,7 +777,6 @@ body {
         width: 45%;
     }
     #sec04-container {
-   
         background: linear-gradient(180deg, #414141 15%, #eee 0%);
         // background: rgba(0,0,0,0.72);
         padding: 20px;
@@ -1404,7 +1397,7 @@ body {
     }
     .sec06-button {
         text-align: center;
-        
+
         width: 75vw;
         @media screen and(min-width:$desktop) {
             display: none;
@@ -1821,24 +1814,24 @@ body {
     }
 }
 
-#sec08{
+#sec08 {
     padding-top: 5vw;
-   
-    #sec08-container-box{
+
+    #sec08-container-box {
         background-size: contain;
         background-repeat: no-repeat;
-        background-blend-mode:overlay; 
+        background-blend-mode: overlay;
     }
-    #sec08-title{
-     padding:5vw;
-background: #414141;
+    #sec08-title {
+        padding: 5vw;
+        background: #414141;
         h1 {
             text-align: center;
             color: #fff;
             font-size: 45px;
             font-weight: 900;
             padding: 5px 10px;
-    
+
             @media screen and(max-width:$moblie) {
                 font-weight: 900;
                 font-size: 32px;
@@ -1855,54 +1848,44 @@ background: #414141;
             }
         }
     }
-    #sec08-container{
+    #sec08-container {
         text-align: center;
-        .card{
+        .card {
             padding-top: 5vw;
             padding-bottom: 5vw;
-           border:none;
-         
-            .adv4{
+            border: none;
+
+            .adv4 {
                 display: flex;
                 align-items: center;
-                img{
-                    align-items:center;
-                    margin:0 30px; 
-                width: 300px;
-                @media screen and(max-width:$moblie) {
-                    width: 100px;
-                    margin:0px; 
-                }
-
+                img {
+                    align-items: center;
+                    
                 }
             }
-
         }
-        .col-4{
-            margin:10px 0 ;
-            
-            img{
-                width: 250px;
-                @media screen and(max-width:$moblie) {
-                    width: 100px;
-                }
+        .col-3{
+            margin: 10px 0;
+
+            img {
+           
+                
             }
         }
     }
 }
 
-#sec09{
-  background: #000;
- 
-    #sec09-container-box{
-     
+#sec09 {
+
+
+    #sec09-container-box {
         background-size: contain;
         background-repeat: no-repeat;
-        background-blend-mode:overlay; 
+        background-blend-mode: overlay;
     }
-    #sec09-title{
-     padding:5vw;
-     background: #fff;
+    #sec09-title {
+        padding: 5vw;
+        background: #fff;
 
         h1 {
             text-align: center;
@@ -1910,7 +1893,7 @@ background: #414141;
             font-size: 45px;
             font-weight: 900;
             padding: 5px 10px;
-    
+
             @media screen and(max-width:$moblie) {
                 font-weight: 900;
                 font-size: 32px;
@@ -1927,38 +1910,36 @@ background: #414141;
             }
         }
     }
-    #sec09-container{
+    #sec09-container {
         text-align: center;
-        .card{
+        .card {
             padding-top: 5vw;
             padding-bottom: 5vw;
-            border:none;
-          background: #000;
-          .adv4{
-            display: flex;
-            align-items: center;
-            img{
-                align-items:center;
-                margin:0 30px; 
-            width: 300px;
-            @media screen and(max-width:$moblie) {
-                width: 100px;
-                margin:0px;
-             }
-
+            border: none;
+        
+            .adv4 {
+                display: flex;
+                align-items: center;
+                img {
+                    align-items: center;
+                    margin: 0 30px;
+                    width: 300px;
+                    @media screen and(max-width:$moblie) {
+                        width: 100px;
+                        margin: 0px;
+                    }
+                }
             }
         }
-
-        }
         .col-4{
-            margin:10px 0 ;
-            
-            img{
-                width: 250px;
+            margin: 10px 0;
+            padding: 15px;
+            img {
+                width: 200px;
+                object-fit: cover;
                 @media screen and(max-width:$moblie) {
-                   width: 100px;
+                    width: 100px;
                 }
-                
             }
         }
     }