頁面問題修正

NFTContent.json

@@ -0,0 +1,13 @@
+[{"sec01news":1,"newsimg":"https://storage.googleapis.com/image.blocktempo.com/2021/06/f3fd701e-beec-413f-982d-4a0c3e5b425c-1140x641.png","newstext1":"Binance NFT 市場上線！致敬藝術家創世紀拍賣、盲盒活動，平台首日驚喜不斷",
+    "newstext2":"就是幣安Binance NFT平台橫空出世，引起了全球大漣漪，圈起了無數熱衷藝術與數位創作者的突進","website":"https://www.blocktempo.com/binance-nft-everything-you-need-to-know-about-the-june-24-launch-2/"},
+
+{"sec01news":2,"newsimg":"http://127.0.0.1:5500/img/sec01/sec01-img02webp.webp","newstext1":"發明家蒂姆·伯納斯·李 (Tim Berners-Lee) 將網絡的源代碼作為 NFT 拍賣",
+    "newstext2":"他補充說：“NFT，無論是藝術品還是像這樣的數位產品，都是該領域最新的有趣創作，也是最合適的所有權方式。它們是包裝網絡背後起源的理想方式。","website":"https://www.facebook.com/nftboard/posts/115261730798862"},
+
+{"sec01news":3,"newsimg":"http://127.0.0.1:5500/img/sec01/sec01-img03.webp","newstext1":"TR Lab攜手Amber Group 助攻蔡國強首件NFT作品義拍",
+    "newstext2":"TR Lab主席李昕表示，我們十分榮幸與蔡國強合作，推出他的首件NFT作品。過去十多年，我一直密切關注他的創作歷程，並深信他是一位不斷追求創新的藝術家。","website":"https://www.facebook.com/nftboard/posts/118623850462650"},
+
+{"sec01news":4,"newsimg":"http://127.0.0.1:5500/img/sec01/sec01-img04.webp","newstext1":"NFT 大獎!Surprise!原來我們公司出現大獎Black BNB得主!",
+    "newstext2":"是我們 #NFTBoard 的美女PM - Maggie!! NFTBoard公司位在 #N24台北方舟 研擬幣安搶購計畫.....","website":"https://www.facebook.com/nftboard/posts/116652300659805"}
+
+]

goto.js

@@ -1,3 +1,5 @@
+var random = Math.floor(Math.random() * $('.youtube').length);
+$('.youtube').hide().eq(random).show();
 // sec03排名table輪播
 $('#sec03-slider').slick({
   arrows: false,
@@ -44,12 +46,23 @@ $('#sec05-destop-slider').slick({
 //     infinite:true,
 // });
 
+// $('#sec06-2-slider').slick({
+//   arrows: true,
+//   slidesToShow: 3,
+//   slidesToScroll: 3,
+//   infinite:true,
+//   vertical:true,
+// });
+
+
+
 $(function () {
   $('#sec06-container').slick({
     arrows: false,
     slidesToShow: 4,
     slidesToScroll: 3,
     infinite: true,
+    
     responsive: [
       {
         breakpoint: 600, // RWD在1024寬度時切換顯示數量
@@ -57,6 +70,7 @@ $(function () {
           arrows: false,
           slidesToShow: 1, //一次顯示3個
           slidesToScroll: 1,//切換下一頁時移動3個
+          infinite: true,
         }
       }, {
         breakpoint: 600,// RWD在600寬度時切換顯示數量
@@ -64,6 +78,7 @@ $(function () {
           arrows: false,
           slidesToShow: 1,//一次顯示2個
           slidesToScroll: 1,//切換下一頁時移動2個
+          infinite: true,
         }
       },
     ]
@@ -75,12 +90,12 @@ $('#sec04-moblie-container').slick({
   arrows: false,
   slidesToShow: 1,
   slidesToScroll: 1,
-  infinite: false,
+  infinite: true,
   // centerMode: true,
 });
-$('#sec04-slider-next').click(function () {
-  $('#sec04-moblie-container').slick('slickNext')
-});
+// $('#sec04-slider-next').click(function () {
+//   $('#sec04-moblie-container').slick('slickNext')
+// });
 
 // 手機板menu彈跳視窗
 $("#menu-box2").hide();
@@ -304,3 +319,25 @@ $(function() {
   }
   });
 
+  $(function() {
+
+    $("#sec06").swipe( { fingers:'all', swipeLeft:swipe1, swipeRight:swipe2} );
+    function swipe1(event, direction, distance, duration, fingerCount) {
+      $('#sec06-container').slick('slickNext')//向左滑動你要執行的動作 
+    }
+    function swipe2(event, direction, distance, duration, fingerCount) {
+      $('#sec06-container').slick('slickPrev') //向右滑動你要執行的動作
+    }
+  });
+
+  $(function() {
+
+    $("#sec04-moblie").swipe( { fingers:'all', swipeLeft:swipe1, swipeRight:swipe2} );
+    function swipe1(event, direction, distance, duration, fingerCount) {
+      $('#sec04-moblie-container').slick('slickNext')//向左滑動你要執行的動作 
+    }
+    function swipe2(event, direction, distance, duration, fingerCount) {
+      $('#sec04-moblie-container').slick('slickPrev') //向右滑動你要執行的動作
+    }
+  });
+

style.css

@@ -127,6 +127,29 @@ body .learn-more:hover {
   }
 }
 
+#Navigation #socail-link {
+  padding: 4vw 1vw 2vw 1vw;
+}
+
+@media screen and (max-width: 767px) {
+  #Navigation #socail-link {
+    display: none;
+  }
+}
+
+#Navigation #socail-link img {
+  width: 30px;
+  -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(138deg) brightness(103%) contrast(102%);
+          filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(138deg) brightness(103%) contrast(102%);
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+#Navigation #socail-link img:hover {
+  -webkit-filter: invert(14%) sepia(5%) saturate(8%) hue-rotate(320deg) brightness(95%) contrast(84%);
+          filter: invert(14%) sepia(5%) saturate(8%) hue-rotate(320deg) brightness(95%) contrast(84%);
+}
+
 #Navigation #menu-btn1 {
   position: absolute;
   right: 2vw;
@@ -153,6 +176,7 @@ body .learn-more:hover {
   position: fixed;
   z-index: 20;
   overflow: hidden;
+  display: none;
 }
 
 @media screen and (min-width: 1025px) {
@@ -226,6 +250,11 @@ body .learn-more:hover {
   color: #fff;
 }
 
+#banner #banner-container .youtube a {
+  text-decoration: none;
+  color: #fff;
+}
+
 @media screen and (max-width: 767px) {
   #banner #banner-container .youtube {
     padding-top: 10vw;
@@ -322,6 +351,37 @@ body .learn-more:hover {
   }
 }
 
+#banner #banner-container #youtube2 #youtube-text h1 {
+  font-size: 30px;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container #youtube2 #youtube-text h1 {
+    font-size: 23px;
+    margin: 0;
+  }
+}
+
+#banner #banner-container #youtube2 #youtube-text .youtube-text-title1 {
+  width: 450px;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container #youtube2 #youtube-text .youtube-text-title1 {
+    width: 80vw;
+  }
+}
+
+#banner #banner-container #youtube2 #youtube-text .youtube-text-title2 {
+  width: 450px;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container #youtube2 #youtube-text .youtube-text-title2 {
+    width: 80vw;
+  }
+}
+
 #banner #banner-container .contact-form-destop {
   text-align: center;
 }
@@ -731,10 +791,12 @@ body .learn-more:hover {
 #sec03 #sec03-table .table .sec03-table-text h1 {
   font-size: 20px;
   margin: 0;
+  font-weight: 900;
 }
 
 #sec03 #sec03-table .table .sec03-table-text p {
   margin: 0;
+  color: #9B9B9B;
 }
 
 #sec03-moblie {
@@ -844,11 +906,13 @@ body .learn-more:hover {
 #sec03-moblie #sec03-slider .table .sec03-table-text h1 {
   font-size: 14px;
   margin: 0;
+  font-weight: 900;
 }
 
 #sec03-moblie #sec03-slider .table .sec03-table-text p {
   margin: 0;
   font-size: 12px;
+  color: #9B9B9B;
 }
 
 @media screen and (min-width: 1025px) {
@@ -861,6 +925,8 @@ body .learn-more:hover {
   padding-top: 5vw;
   padding-bottom: 5vw;
   background: #414141;
+  background-position: center center;
+  background-size: cover;
 }
 
 @media screen and (max-width: 767px) {
@@ -951,6 +1017,167 @@ body .learn-more:hover {
   }
 }
 
+#sec04-moblie .sec04-button {
+  text-align: center;
+  margin-top: -50px;
+  width: 85vw;
+}
+
+@media screen and (min-width: 1025px) {
+  #sec04-moblie .sec04-button {
+    display: none;
+  }
+}
+
+#sec04-moblie .sec04-button .mouse_scroll {
+  display: inline-block;
+  margin: 0 auto;
+  width: 24px;
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+
+#sec04-moblie .sec04-button .testright {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+
+#sec04-moblie .sec04-button .m_scroll_arrows {
+  display: block;
+  width: 5px;
+  height: 5px;
+  /* IE 9 */
+  -webkit-transform: rotate(45deg);
+  /* Chrome, Safari, Opera */
+  transform: rotate(45deg);
+  border-right: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+  margin: 0 0 3px 4px;
+  width: 16px;
+  height: 16px;
+}
+
+#sec04-moblie .sec04-button .unu {
+  margin-top: 1px;
+}
+
+#sec04-moblie .sec04-button .unu,
+#sec04-moblie .sec04-button .doi,
+#sec04-moblie .sec04-button .trei {
+  -webkit-animation: mouse-scroll 1s infinite;
+  animation: mouse-scroll 1s infinite;
+}
+
+#sec04-moblie .sec04-button .unu {
+  -webkit-animation-delay: 0.1s;
+  -moz-animation-delay: 0.1s;
+  -webkit-animation-direction: alternate;
+  animation-direction: alternate;
+  -webkit-animation-delay: alternate;
+          animation-delay: alternate;
+}
+
+#sec04-moblie .sec04-button .doi {
+  -webkit-animation-delay: 0.2s;
+  -moz-animation-delay: 0.2s;
+  -webkit-animation-direction: alternate;
+  animation-delay: 0.2s;
+  animation-direction: alternate;
+  margin-top: -6px;
+}
+
+#sec04-moblie .sec04-button .trei {
+  -webkit-animation-delay: 0.3s;
+  -moz-animation-delay: 0.3s;
+  -webkit-animation-direction: alternate;
+  animation-delay: 0.3s;
+  animation-direction: alternate;
+  margin-top: -6px;
+}
+
+#sec04-moblie .sec04-button .mouse {
+  height: 42px;
+  width: 24px;
+  border-radius: 14px;
+  -webkit-transform: none;
+          transform: none;
+  border: 2px solid #fff;
+  top: 170px;
+}
+
+#sec04-moblie .sec04-button .wheel {
+  height: 5px;
+  width: 2px;
+  display: block;
+  margin: 5px auto;
+  background: #fff;
+  position: relative;
+  height: 4px;
+  width: 4px;
+  border: 2px solid #fff;
+  border-radius: 8px;
+}
+
+#sec04-moblie .sec04-button .wheel {
+  -webkit-animation: mouse-wheel 0.6s linear infinite;
+  animation: mouse-wheel 0.8s linear infinite;
+}
+
+@-webkit-keyframes mouse-wheel {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(6px);
+    transform: translateY(6px);
+  }
+}
+
+@keyframes mouse-wheel {
+  0% {
+    top: 1px;
+  }
+  25% {
+    top: 5px;
+  }
+  50% {
+    top: 15px;
+  }
+  75% {
+    top: 5px;
+  }
+  100% {
+    top: 1px;
+  }
+}
+
+@-webkit-keyframes mouse-scroll {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes mouse-scroll {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 @media screen and (min-width: 1025px) {
   #sec04-moblie {
     display: none;
@@ -1288,6 +1515,166 @@ body .learn-more:hover {
   }
 }
 
+#sec06 .sec06-button {
+  text-align: center;
+  width: 75vw;
+}
+
+@media screen and (min-width: 1025px) {
+  #sec06 .sec06-button {
+    display: none;
+  }
+}
+
+#sec06 .sec06-button .mouse_scroll {
+  display: inline-block;
+  margin: 0 auto;
+  width: 24px;
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+
+#sec06 .sec06-button .testright {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+
+#sec06 .sec06-button .m_scroll_arrows {
+  display: block;
+  width: 5px;
+  height: 5px;
+  /* IE 9 */
+  -webkit-transform: rotate(45deg);
+  /* Chrome, Safari, Opera */
+  transform: rotate(45deg);
+  border-right: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+  margin: 0 0 3px 4px;
+  width: 16px;
+  height: 16px;
+}
+
+#sec06 .sec06-button .unu {
+  margin-top: 1px;
+}
+
+#sec06 .sec06-button .unu,
+#sec06 .sec06-button .doi,
+#sec06 .sec06-button .trei {
+  -webkit-animation: mouse-scroll 1s infinite;
+  animation: mouse-scroll 1s infinite;
+}
+
+#sec06 .sec06-button .unu {
+  -webkit-animation-delay: 0.1s;
+  -moz-animation-delay: 0.1s;
+  -webkit-animation-direction: alternate;
+  animation-direction: alternate;
+  -webkit-animation-delay: alternate;
+          animation-delay: alternate;
+}
+
+#sec06 .sec06-button .doi {
+  -webkit-animation-delay: 0.2s;
+  -moz-animation-delay: 0.2s;
+  -webkit-animation-direction: alternate;
+  animation-delay: 0.2s;
+  animation-direction: alternate;
+  margin-top: -6px;
+}
+
+#sec06 .sec06-button .trei {
+  -webkit-animation-delay: 0.3s;
+  -moz-animation-delay: 0.3s;
+  -webkit-animation-direction: alternate;
+  animation-delay: 0.3s;
+  animation-direction: alternate;
+  margin-top: -6px;
+}
+
+#sec06 .sec06-button .mouse {
+  height: 42px;
+  width: 24px;
+  border-radius: 14px;
+  -webkit-transform: none;
+          transform: none;
+  border: 2px solid #fff;
+  top: 170px;
+}
+
+#sec06 .sec06-button .wheel {
+  height: 5px;
+  width: 2px;
+  display: block;
+  margin: 5px auto;
+  background: #fff;
+  position: relative;
+  height: 4px;
+  width: 4px;
+  border: 2px solid #fff;
+  border-radius: 8px;
+}
+
+#sec06 .sec06-button .wheel {
+  -webkit-animation: mouse-wheel 0.6s linear infinite;
+  animation: mouse-wheel 0.8s linear infinite;
+}
+
+@-webkit-keyframes mouse-wheel {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(6px);
+    transform: translateY(6px);
+  }
+}
+
+@keyframes mouse-wheel {
+  0% {
+    top: 1px;
+  }
+  25% {
+    top: 5px;
+  }
+  50% {
+    top: 15px;
+  }
+  75% {
+    top: 5px;
+  }
+  100% {
+    top: 1px;
+  }
+}
+
+@-webkit-keyframes mouse-scroll {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes mouse-scroll {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 #sec06 h1 {
   font-size: 45px;
   font-weight: 900;
@@ -1499,6 +1886,191 @@ body .learn-more:hover {
   border: 1px solid #000;
 }
 
+#sec08 {
+  padding-top: 5vw;
+}
+
+#sec08 #sec08-container-box {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-blend-mode: overlay;
+}
+
+#sec08 #sec08-title {
+  padding: 5vw;
+  background: #414141;
+}
+
+#sec08 #sec08-title h1 {
+  text-align: center;
+  color: #fff;
+  font-size: 45px;
+  font-weight: 900;
+  padding: 5px 10px;
+}
+
+@media screen and (max-width: 767px) {
+  #sec08 #sec08-title h1 {
+    font-weight: 900;
+    font-size: 32px;
+  }
+}
+
+#sec08 #sec08-title hr {
+  width: 5vw;
+  height: 5px;
+  color: #fff;
+  margin: 10px auto;
+  opacity: 1 !important;
+}
+
+@media screen and (max-width: 767px) {
+  #sec08 #sec08-title hr {
+    width: 30vw;
+  }
+}
+
+#sec08 #sec08-container {
+  text-align: center;
+}
+
+#sec08 #sec08-container .card {
+  padding-top: 5vw;
+  padding-bottom: 5vw;
+  border: none;
+}
+
+#sec08 #sec08-container .card .adv4 {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+#sec08 #sec08-container .card .adv4 img {
+  -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 {
+  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;
+  background-blend-mode: overlay;
+}
+
+#sec09 #sec09-title {
+  padding: 5vw;
+  background: #fff;
+}
+
+#sec09 #sec09-title h1 {
+  text-align: center;
+  color: #000;
+  font-size: 45px;
+  font-weight: 900;
+  padding: 5px 10px;
+}
+
+@media screen and (max-width: 767px) {
+  #sec09 #sec09-title h1 {
+    font-weight: 900;
+    font-size: 32px;
+  }
+}
+
+#sec09 #sec09-title hr {
+  width: 5vw;
+  height: 5px;
+  color: #000;
+  margin: 10px auto;
+  opacity: 1 !important;
+}
+
+@media screen and (max-width: 767px) {
+  #sec09 #sec09-title hr {
+    width: 30vw;
+  }
+}
+
+#sec09 #sec09-container {
+  text-align: center;
+}
+
+#sec09 #sec09-container .card {
+  padding-top: 5vw;
+  padding-bottom: 5vw;
+  border: none;
+  background: #000;
+}
+
+#sec09 #sec09-container .card .adv4 {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+#sec09 #sec09-container .card .adv4 img {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin: 0 30px;
+  width: 300px;
+}
+
+@media screen and (max-width: 767px) {
+  #sec09 #sec09-container .card .adv4 img {
+    width: 100px;
+    margin: 0px;
+  }
+}
+
+#sec09 #sec09-container .col-4 {
+  margin: 10px 0;
+}
+
+#sec09 #sec09-container .col-4 img {
+  width: 250px;
+}
+
+@media screen and (max-width: 767px) {
+  #sec09 #sec09-container .col-4 img {
+    width: 100px;
+  }
+}
+
 #footer {
   width: 100vw;
   text-align: center;

style.scss

@@ -99,6 +99,21 @@ body {
             }
         }
     }
+    #socail-link{
+        padding: 4vw 1vw 2vw 1vw;
+        @media screen and(max-width:$moblie) {
+            display: none;
+        }
+        img{
+            width: 30px;
+         
+            filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(138deg) brightness(103%) contrast(102%);
+            transition: 0.3s;
+            &:hover {
+                filter: invert(14%) sepia(5%) saturate(8%) hue-rotate(320deg) brightness(95%) contrast(84%);
+            }
+        }
+    }
     #menu-btn1 {
         position: absolute;
         right: 2vw;
@@ -122,7 +137,7 @@ body {
     position: fixed;
     z-index: 20;
     overflow: hidden;
-
+    display: none;
     @media screen and(min-width:$desktop) {
         display: none;
     }
@@ -180,16 +195,21 @@ body {
 
             padding-bottom: 10vw;
         }
-        .youtube {
+        .youtube{
             width: 80vw;
             padding-top: 10vw;
             margin: 0 auto;
             color: #fff;
+            a{
+                text-decoration: none;
+                color:#fff;
+            }
             @media screen and(max-width:$moblie) {
                 padding-top: 10vw;
                 margin: 0 auto;
             }
             #youtube-text {
+          
                 h1 {
                     font-size: 40px;
                     text-align: left;
@@ -254,6 +274,32 @@ body {
                 }
             }
         }
+        #youtube2{
+            #youtube-text{
+
+                h1{
+                    font-size: 30px;
+                    @media screen and(max-width:$moblie) {
+                        font-size: 23px;
+                        margin: 0;
+                    }
+                }
+                .youtube-text-title1 {
+                   width: 450px;
+                    @media screen and(max-width:$moblie) {
+                        width: 80vw;
+                    }
+                }
+                .youtube-text-title2 {
+                    width: 450px;
+                    @media screen and(max-width:$moblie) {
+                        width: 80vw;
+                    }
+                }
+                
+            }
+        }
+
         .contact-form-destop {
             text-align: center;
             @media screen and(max-width:$moblie) {
@@ -567,6 +613,7 @@ body {
             }
             td {
                 padding: 15px;
+               
                 a {
                     text-decoration: none;
                     color: #000;
@@ -583,9 +630,11 @@ body {
                 h1 {
                     font-size: 20px;
                     margin: 0;
+                    font-weight: 900;
                 }
                 p {
                     margin: 0;
+                    color:#9B9B9B;
                 }
             }
         }
@@ -674,10 +723,12 @@ body {
                 h1 {
                     font-size: 14px;
                     margin: 0;
+                    font-weight: 900;
                 }
                 p {
                     margin: 0;
                     font-size: 12px;
+                    color:#9B9B9B;
                 }
             }
         }
@@ -690,7 +741,9 @@ 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) {
         display: none;
     }
@@ -722,8 +775,9 @@ body {
         width: 45%;
     }
     #sec04-container {
-        // box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+   
         background: linear-gradient(180deg, #414141 15%, #eee 0%);
+        // background: rgba(0,0,0,0.72);
         padding: 20px;
         padding-bottom: 50px;
         .card {
@@ -757,6 +811,225 @@ body {
             right: 10px;
         }
     }
+    .sec04-button {
+        text-align: center;
+        margin-top: -50px;
+        width: 85vw;
+        @media screen and(min-width:$desktop) {
+            display: none;
+        }
+        .mouse_scroll {
+            display: inline-block;
+            margin: 0 auto;
+            width: 24px;
+
+            transform: rotate(90deg);
+        }
+        .testright {
+            transform: rotate(180deg);
+        }
+
+        .m_scroll_arrows {
+            display: block;
+            width: 5px;
+            height: 5px;
+            -ms-transform: rotate(45deg); /* IE 9 */
+            -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
+            transform: rotate(45deg);
+
+            border-right: 2px solid #fff;
+            border-bottom: 2px solid #fff;
+            margin: 0 0 3px 4px;
+
+            width: 16px;
+            height: 16px;
+        }
+
+        .unu {
+            margin-top: 1px;
+        }
+
+        .unu,
+        .doi,
+        .trei {
+            -webkit-animation: mouse-scroll 1s infinite;
+            -moz-animation: mouse-scroll 1s infinite;
+            animation: mouse-scroll 1s infinite;
+        }
+
+        .unu {
+            -webkit-animation-delay: 0.1s;
+            -moz-animation-delay: 0.1s;
+            -webkit-animation-direction: alternate;
+
+            animation-direction: alternate;
+            animation-delay: alternate;
+        }
+
+        .doi {
+            -webkit-animation-delay: 0.2s;
+            -moz-animation-delay: 0.2s;
+            -webkit-animation-direction: alternate;
+
+            animation-delay: 0.2s;
+            animation-direction: alternate;
+
+            margin-top: -6px;
+        }
+
+        .trei {
+            -webkit-animation-delay: 0.3s;
+            -moz-animation-delay: 0.3s;
+            -webkit-animation-direction: alternate;
+
+            animation-delay: 0.3s;
+            animation-direction: alternate;
+
+            margin-top: -6px;
+        }
+
+        .mouse {
+            height: 42px;
+            width: 24px;
+            border-radius: 14px;
+            transform: none;
+            border: 2px solid #fff;
+            top: 170px;
+        }
+
+        .wheel {
+            height: 5px;
+            width: 2px;
+            display: block;
+            margin: 5px auto;
+            background: #fff;
+            position: relative;
+
+            height: 4px;
+            width: 4px;
+            border: 2px solid #fff;
+            -webkit-border-radius: 8px;
+            border-radius: 8px;
+        }
+
+        .wheel {
+            -webkit-animation: mouse-wheel 0.6s linear infinite;
+            -moz-animation: mouse-wheel 0.6s linear infinite;
+            animation: mouse-wheel 0.8s linear infinite;
+        }
+
+        @-webkit-keyframes mouse-wheel {
+            0% {
+                opacity: 1;
+                -webkit-transform: translateY(0);
+                -ms-transform: translateY(0);
+                transform: translateY(0);
+            }
+
+            100% {
+                opacity: 0;
+                -webkit-transform: translateY(6px);
+                -ms-transform: translateY(6px);
+                transform: translateY(6px);
+            }
+        }
+        @-moz-keyframes mouse-wheel {
+            0% {
+                top: 1px;
+            }
+            25% {
+                top: 5px;
+            }
+            50% {
+                top: 10px;
+            }
+            75% {
+                top: 5px;
+            }
+            100% {
+                top: 1px;
+            }
+        }
+        @-o-keyframes mouse-wheel {
+            0% {
+                top: 1px;
+            }
+            25% {
+                top: 2px;
+            }
+            50% {
+                top: 3px;
+            }
+            75% {
+                top: 2px;
+            }
+            100% {
+                top: 1px;
+            }
+        }
+        @keyframes mouse-wheel {
+            0% {
+                top: 1px;
+            }
+            25% {
+                top: 5px;
+            }
+            50% {
+                top: 15px;
+            }
+            75% {
+                top: 5px;
+            }
+            100% {
+                top: 1px;
+            }
+        }
+
+        @-webkit-keyframes mouse-scroll {
+            0% {
+                opacity: 0;
+            }
+            50% {
+                opacity: 0.5;
+            }
+            100% {
+                opacity: 1;
+            }
+        }
+        @-moz-keyframes mouse-scroll {
+            0% {
+                opacity: 0;
+            }
+            50% {
+                opacity: 0.5;
+            }
+            100% {
+                opacity: 1;
+            }
+        }
+        @-o-keyframes mouse-scroll {
+            0% {
+                opacity: 0;
+            }
+            50% {
+                opacity: 0.5;
+            }
+            100% {
+                opacity: 1;
+            }
+        }
+        @keyframes mouse-scroll {
+            0% {
+                opacity: 0;
+            }
+            50% {
+                opacity: 0.5;
+            }
+            100% {
+                opacity: 1;
+            }
+        }
+    }
     @media screen and(min-width:$desktop) {
         display: none;
     }
@@ -1121,17 +1394,236 @@ body {
     @media screen and(max-width:$moblie) {
         background: #313131;
     }
-    h1 {
-        font-size: 45px;
-        font-weight: 900;
-        padding: 15px;
-        color: #fff;
-    }
-    hr {
-        width: 12vw;
-        height: 2px;
-        color: #fff;
-        margin: 10px;
+    .sec06-button {
+        text-align: center;
+        
+        width: 75vw;
+        @media screen and(min-width:$desktop) {
+            display: none;
+        }
+        .mouse_scroll {
+            display: inline-block;
+            margin: 0 auto;
+            width: 24px;
+
+            transform: rotate(90deg);
+        }
+        .testright {
+            transform: rotate(180deg);
+        }
+
+        .m_scroll_arrows {
+            display: block;
+            width: 5px;
+            height: 5px;
+            -ms-transform: rotate(45deg); /* IE 9 */
+            -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
+            transform: rotate(45deg);
+
+            border-right: 2px solid #fff;
+            border-bottom: 2px solid #fff;
+            margin: 0 0 3px 4px;
+
+            width: 16px;
+            height: 16px;
+        }
+
+        .unu {
+            margin-top: 1px;
+        }
+
+        .unu,
+        .doi,
+        .trei {
+            -webkit-animation: mouse-scroll 1s infinite;
+            -moz-animation: mouse-scroll 1s infinite;
+            animation: mouse-scroll 1s infinite;
+        }
+
+        .unu {
+            -webkit-animation-delay: 0.1s;
+            -moz-animation-delay: 0.1s;
+            -webkit-animation-direction: alternate;
+
+            animation-direction: alternate;
+            animation-delay: alternate;
+        }
+
+        .doi {
+            -webkit-animation-delay: 0.2s;
+            -moz-animation-delay: 0.2s;
+            -webkit-animation-direction: alternate;
+
+            animation-delay: 0.2s;
+            animation-direction: alternate;
+
+            margin-top: -6px;
+        }
+
+        .trei {
+            -webkit-animation-delay: 0.3s;
+            -moz-animation-delay: 0.3s;
+            -webkit-animation-direction: alternate;
+
+            animation-delay: 0.3s;
+            animation-direction: alternate;
+
+            margin-top: -6px;
+        }
+
+        .mouse {
+            height: 42px;
+            width: 24px;
+            border-radius: 14px;
+            transform: none;
+            border: 2px solid #fff;
+            top: 170px;
+        }
+
+        .wheel {
+            height: 5px;
+            width: 2px;
+            display: block;
+            margin: 5px auto;
+            background: #fff;
+            position: relative;
+
+            height: 4px;
+            width: 4px;
+            border: 2px solid #fff;
+            -webkit-border-radius: 8px;
+            border-radius: 8px;
+        }
+
+        .wheel {
+            -webkit-animation: mouse-wheel 0.6s linear infinite;
+            -moz-animation: mouse-wheel 0.6s linear infinite;
+            animation: mouse-wheel 0.8s linear infinite;
+        }
+
+        @-webkit-keyframes mouse-wheel {
+            0% {
+                opacity: 1;
+                -webkit-transform: translateY(0);
+                -ms-transform: translateY(0);
+                transform: translateY(0);
+            }
+
+            100% {
+                opacity: 0;
+                -webkit-transform: translateY(6px);
+                -ms-transform: translateY(6px);
+                transform: translateY(6px);
+            }
+        }
+        @-moz-keyframes mouse-wheel {
+            0% {
+                top: 1px;
+            }
+            25% {
+                top: 5px;
+            }
+            50% {
+                top: 10px;
+            }
+            75% {
+                top: 5px;
+            }
+            100% {
+                top: 1px;
+            }
+        }
+        @-o-keyframes mouse-wheel {
+            0% {
+                top: 1px;
+            }
+            25% {
+                top: 2px;
+            }
+            50% {
+                top: 3px;
+            }
+            75% {
+                top: 2px;
+            }
+            100% {
+                top: 1px;
+            }
+        }
+        @keyframes mouse-wheel {
+            0% {
+                top: 1px;
+            }
+            25% {
+                top: 5px;
+            }
+            50% {
+                top: 15px;
+            }
+            75% {
+                top: 5px;
+            }
+            100% {
+                top: 1px;
+            }
+        }
+
+        @-webkit-keyframes mouse-scroll {
+            0% {
+                opacity: 0;
+            }
+            50% {
+                opacity: 0.5;
+            }
+            100% {
+                opacity: 1;
+            }
+        }
+        @-moz-keyframes mouse-scroll {
+            0% {
+                opacity: 0;
+            }
+            50% {
+                opacity: 0.5;
+            }
+            100% {
+                opacity: 1;
+            }
+        }
+        @-o-keyframes mouse-scroll {
+            0% {
+                opacity: 0;
+            }
+            50% {
+                opacity: 0.5;
+            }
+            100% {
+                opacity: 1;
+            }
+        }
+        @keyframes mouse-scroll {
+            0% {
+                opacity: 0;
+            }
+            50% {
+                opacity: 0.5;
+            }
+            100% {
+                opacity: 1;
+            }
+        }
+    }
+    h1 {
+        font-size: 45px;
+        font-weight: 900;
+        padding: 15px;
+        color: #fff;
+    }
+    hr {
+        width: 12vw;
+        height: 2px;
+        color: #fff;
+        margin: 10px;
         opacity: 1 !important;
         @media screen and(max-width:$moblie) {
             width: 30vw;
@@ -1290,6 +1782,148 @@ body {
     }
 }
 
+#sec08{
+    padding-top: 5vw;
+   
+    #sec08-container-box{
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-blend-mode:overlay; 
+    }
+    #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;
+            }
+        }
+        hr {
+            width: 5vw;
+            height: 5px;
+            color: #fff;
+            margin: 10px auto;
+            opacity: 1 !important;
+            @media screen and(max-width:$moblie) {
+                width: 30vw;
+            }
+        }
+    }
+    #sec08-container{
+        text-align: center;
+        .card{
+            padding-top: 5vw;
+            padding-bottom: 5vw;
+           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;
+                @media screen and(max-width:$moblie) {
+                    width: 100px;
+                }
+            }
+        }
+    }
+}
+
+#sec09{
+  background: #000;
+ 
+    #sec09-container-box{
+     
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-blend-mode:overlay; 
+    }
+    #sec09-title{
+     padding:5vw;
+     background: #fff;
+
+        h1 {
+            text-align: center;
+            color: #000;
+            font-size: 45px;
+            font-weight: 900;
+            padding: 5px 10px;
+    
+            @media screen and(max-width:$moblie) {
+                font-weight: 900;
+                font-size: 32px;
+            }
+        }
+        hr {
+            width: 5vw;
+            height: 5px;
+            color: #000;
+            margin: 10px auto;
+            opacity: 1 !important;
+            @media screen and(max-width:$moblie) {
+                width: 30vw;
+            }
+        }
+    }
+    #sec09-container{
+        text-align: center;
+        .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;
+             }
+
+            }
+        }
+
+        }
+        .col-4{
+            margin:10px 0 ;
+            
+            img{
+                width: 250px;
+                @media screen and(max-width:$moblie) {
+                   width: 100px;
+                }
+                
+            }
+        }
+    }
+}
 // 頁尾
 #footer {
     width: 100vw;