初版

goto.js

@@ -0,0 +1,24 @@
+$('#sec03-slider').slick({
+    arrows: false,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    infinite:false,
+    
+   
+});
+
+$('#sec05-moblie-slider').slick({
+    arrows: false,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    infinite:false,
+
+});
+
+$('#sec04-moblie-container').slick({
+    arrows: false,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    infinite:false,
+    centerMode: true,
+});

style.css

@@ -0,0 +1,1005 @@
+@charset "UTF-8";
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.container-fluid {
+  width: 80vw;
+  margin: 0 auto;
+}
+
+@media screen and (max-width: 767px) {
+  .container-fluid {
+    width: 100vw;
+  }
+}
+
+#Navigation {
+  width: 100vw;
+  background-color: #000;
+  color: #fff;
+}
+
+#Navigation #logo {
+  padding-top: 1.3vw;
+}
+
+@media screen and (max-width: 767px) {
+  #Navigation #logo {
+    padding-top: 0;
+  }
+}
+
+#Navigation #logo img {
+  width: 180px;
+}
+
+@media screen and (max-width: 767px) {
+  #Navigation #logo img {
+    width: 150px;
+  }
+}
+
+#Navigation #link {
+  padding: 4vw 1vw 2vw 1vw;
+}
+
+@media screen and (max-width: 767px) {
+  #Navigation #link {
+    display: none;
+  }
+}
+
+#Navigation a {
+  text-decoration: none;
+  color: #fff;
+  letter-spacing: 1px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 15px;
+  position: relative;
+}
+
+#Navigation a :hover {
+  opacity: 0.8;
+}
+
+#Navigation a:after {
+  content: "";
+  display: block;
+  width: 80%;
+  height: 3px;
+  background-color: #fff;
+  position: absolute;
+  left: 12%;
+  bottom: 0;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  opacity: 0;
+}
+
+#Navigation a:hover:after {
+  width: 80%;
+  opacity: 1;
+}
+
+@media screen and (max-width: 1024px) {
+  #Navigation a {
+    padding: 5px;
+    padding-top: 2vw;
+  }
+}
+
+#Navigation #menu-btn1 {
+  position: absolute;
+  right: 1vw;
+  top: 5vw;
+  width: 15vw;
+  z-index: 6;
+}
+
+@media screen and (min-width: 1025px) {
+  #Navigation #menu-btn1 {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  #Navigation #menu-btn1 {
+    display: none;
+  }
+}
+
+#banner {
+  width: 100vw;
+  height: 100vh;
+  background: #313131;
+  display: inline-block;
+  background: linear-gradient(115deg, #313131 38%, transparent 30%, #707070 27%);
+  background-blend-mode: overlay;
+}
+
+@media screen and (max-width: 767px) {
+  #banner {
+    height: 65vh;
+    background: linear-gradient(115deg, #414141 100%, transparent 30%, #707070 0%);
+  }
+}
+
+#banner #banner-container {
+  width: 80vw;
+  margin: 50px auto;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container {
+    width: 100vw;
+    margin: 0;
+  }
+}
+
+#banner #banner-container img {
+  width: 80vw;
+  height: 70vh;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container img {
+    height: 35vh;
+    width: 100vw;
+  }
+}
+
+#banner #banner-container h1 {
+  text-align: center;
+  color: #fff;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container h1 {
+    font-size: 20px;
+    padding: 15px;
+  }
+}
+
+#banner #banner-container #email {
+  width: 75%;
+  font-size: 16px;
+  margin: 10px 0px;
+  padding: 10px 15px;
+  border: none;
+  height: 50px;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container #email {
+    display: none;
+  }
+}
+
+#banner #banner-container #email-moblie {
+  margin: 10px auto;
+  width: 75%;
+  padding: 10px 15px;
+  border: none;
+  height: 50px;
+  background: url(./img/email.png) 5% 50% no-repeat scroll transparent;
+  background-size: 20px 15px;
+  background-color: #fff;
+  text-align: center;
+  color: #313131;
+  font-weight: 900;
+}
+
+@media screen and (min-width: 1025px) {
+  #banner #banner-container #email-moblie {
+    display: none;
+  }
+}
+
+#banner #banner-container .btn {
+  color: #fff;
+  width: 25%;
+  height: 50px;
+  margin: 10px 0px;
+  font-size: 16px;
+  border-radius: 0%;
+  border: none;
+  font-weight: 900;
+  background: #93000a;
+  vertical-align: top;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .btn {
+    display: none;
+  }
+}
+
+#banner #banner-container #email-arrow {
+  width: 15%;
+  background: url(./img/button-arrow.png) 55% 50% no-repeat scroll transparent;
+  background-size: 10px 15px;
+  background-color: #93000a;
+  height: 50px;
+  margin: 10px auto;
+  font-size: 16px;
+  border-radius: 0%;
+  border: none;
+  font-weight: 900;
+  vertical-align: top;
+}
+
+@media screen and (min-width: 1025px) {
+  #banner #banner-container #email-arrow {
+    display: none;
+  }
+}
+
+#sec01 {
+  padding-top: 5vw;
+  padding-bottom: 5vw;
+}
+
+#sec01 .NEWS {
+  width: 80vw;
+  margin: 0 auto;
+  margin-top: -130px;
+  margin-bottom: 50px;
+}
+
+@media screen and (max-width: 767px) {
+  #sec01 .NEWS {
+    margin-top: -70px;
+    width: 90vw;
+  }
+}
+
+#sec01 .NEWS h1 {
+  padding: 0;
+  margin: 0;
+  font-weight: 900;
+  color: #fff;
+  letter-spacing: 3px;
+  font-size: 60px;
+}
+
+@media screen and (max-width: 767px) {
+  #sec01 .NEWS h1 {
+    font-size: 50px;
+  }
+}
+
+#sec01 #sec01-container {
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  margin: 0 auto !important;
+}
+
+@media screen and (max-width: 767px) {
+  #sec01 #sec01-container {
+    width: 90vw;
+    margin: 0 auto;
+  }
+}
+
+#sec01 #sec01-container #sec01-container-card .card {
+  padding: 30px;
+  border: none !important;
+}
+
+@media screen and (max-width: 767px) {
+  #sec01 #sec01-container #sec01-container-card .card {
+    padding: 15px;
+  }
+}
+
+#sec01 #sec01-container #sec01-container-card .card h1 {
+  padding: 15px;
+  font-size: 40px;
+  font-weight: 900;
+  color: #9b9b9b;
+}
+
+#sec01 #sec01-container #sec01-container-card .card p {
+  padding: 5px;
+  font-size: 20px;
+  margin-bottom: 0 !important;
+}
+
+@media screen and (max-width: 767px) {
+  #sec01 #sec01-container #sec01-container-card .card p {
+    padding: 0px;
+  }
+}
+
+#sec01 #sec01-container #sec01-container-card .card img {
+  text-align: center;
+  width: 38vw;
+}
+
+@media screen and (max-width: 767px) {
+  #sec01 #sec01-container #sec01-container-card .card img {
+    width: 85vw;
+    margin: 0 auto;
+  }
+}
+
+#sec02 {
+  background: #414141;
+  padding-top: 3vw;
+}
+
+@media screen and (max-width: 767px) {
+  #sec02 {
+    display: none;
+  }
+}
+
+#sec02 #sec02-container {
+  padding: 15px;
+  font-weight: 900;
+  color: #fff;
+}
+
+#sec02 #sec02-container #sec02-top-box {
+  position: relative;
+}
+
+#sec02 #sec02-container #sec02-top-box .sec02-box1 {
+  color: #000;
+}
+
+#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;
+}
+
+#sec02 #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text span {
+  font-size: 50px;
+}
+
+#sec02-moblie {
+  background: #414141;
+  padding-top: 3vw;
+  padding-bottom: 10vw;
+}
+
+@media screen and (min-width: 1025px) {
+  #sec02-moblie {
+    display: none;
+  }
+}
+
+#sec02-moblie #sec02-container {
+  padding: 15px;
+  font-weight: 900;
+  color: #fff;
+  text-align: right;
+}
+
+#sec02-moblie #sec02-container #sec02-top-box .sec02-box1 {
+  color: #000;
+  position: relative;
+}
+
+#sec02-moblie #sec02-container #sec02-top-box .sec02-box1 img {
+  position: absolute;
+  top: 1px;
+  width: 90px;
+  left: 30px;
+}
+
+#sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text {
+  position: absolute;
+  top: 60px;
+  left: 20px;
+}
+
+#sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text span {
+  font-size: 50px;
+}
+
+#sec03 {
+  padding-top: 10vw;
+  padding-bottom: 5vw;
+}
+
+@media screen and (max-width: 767px) {
+  #sec03 {
+    display: none;
+  }
+}
+
+#sec03 #sec03-table .sec03-table-title {
+  font-family: 微軟正黑體;
+  font-weight: 900;
+  padding: 15px;
+  font-size: 35px;
+}
+
+#sec03 #sec03-table .table th {
+  font-size: 40px;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+#sec03 #sec03-table .table td {
+  padding: 15px;
+}
+
+#sec03 #sec03-table .table img {
+  width: 50px;
+}
+
+#sec03 #sec03-table .table .sec03-table-text {
+  padding: 10px;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+#sec03 #sec03-table .table .sec03-table-text h1 {
+  font-size: 20px;
+  margin: 0;
+}
+
+#sec03 #sec03-table .table .sec03-table-text p {
+  margin: 0;
+}
+
+#sec03-moblie {
+  padding-top: 30vw;
+  position: relative;
+}
+
+#sec03-moblie .arrow-table {
+  position: fixed;
+  width: 25px;
+  right: 15px;
+  bottom: 250px;
+  z-index: 6;
+}
+
+@media screen and (max-width: 350px) {
+  #sec03-moblie .arrow-table {
+    right: 10px;
+  }
+}
+
+#sec03-moblie .sec03-table-title {
+  font-family: 微軟正黑體;
+  font-weight: 900;
+  font-size: 15px;
+  padding: 0 !important;
+  margin-bottom: 20px;
+}
+
+#sec03-moblie #sec03-slider .slick-slide img {
+  display: inline;
+}
+
+#sec03-moblie #sec03-slider #sec03-slider1,
+#sec03-moblie #sec03-slider #sec03-slider2 {
+  margin: 0 30px;
+}
+
+@media screen and (max-width: 350px) {
+  #sec03-moblie #sec03-slider #sec03-slider1,
+  #sec03-moblie #sec03-slider #sec03-slider2 {
+    margin: 0 10px;
+  }
+}
+
+#sec03-moblie #sec03-slider .table th {
+  font-size: 40px;
+  display: table-cell;
+  vertical-align: middle;
+  padding: 15px;
+}
+
+#sec03-moblie #sec03-slider .table td {
+  padding: 15px;
+}
+
+@media screen and (max-width: 350px) {
+  #sec03-moblie #sec03-slider .table td {
+    padding: 0px;
+  }
+}
+
+#sec03-moblie #sec03-slider .table img {
+  width: 50px;
+}
+
+#sec03-moblie #sec03-slider .table .sec03-table-text {
+  padding: 10px;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+#sec03-moblie #sec03-slider .table .sec03-table-text h1 {
+  font-size: 20px;
+  margin: 0;
+}
+
+#sec03-moblie #sec03-slider .table .sec03-table-text p {
+  margin: 0;
+}
+
+@media screen and (min-width: 1025px) {
+  #sec03-moblie {
+    display: none;
+  }
+}
+
+#sec04 {
+  padding-top: 5vw;
+  padding-bottom: 5vw;
+  background: #414141;
+}
+
+@media screen and (max-width: 767px) {
+  #sec04 {
+    display: none;
+  }
+}
+
+#sec04 h1 {
+  color: #fff;
+  font-size: 45px;
+  font-weight: 900;
+  padding: 5px 10px;
+}
+
+@media screen and (max-width: 767px) {
+  #sec04 h1 {
+    font-weight: 900;
+    font-size: 32px;
+  }
+}
+
+#sec04 hr {
+  width: 12vw;
+  height: 2px;
+  color: #fff;
+  margin: 10px;
+  opacity: 1 !important;
+}
+
+@media screen and (max-width: 767px) {
+  #sec04 hr {
+    width: 30vw;
+  }
+}
+
+#sec04 #sec04-container .card {
+  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);
+}
+
+#sec04 #sec04-container .card img {
+  height: 150px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+#sec04-moblie {
+  padding-top: 5vw;
+  padding-bottom: 5vw;
+  background: #414141;
+  position: relative;
+}
+
+#sec04-moblie .arrow-table {
+  position: fixed;
+  width: 25px;
+  right: 15px;
+  bottom: 240px;
+  z-index: 6;
+}
+
+@media screen and (max-width: 350px) {
+  #sec04-moblie .arrow-table {
+    right: 10px;
+  }
+}
+
+@media screen and (min-width: 1025px) {
+  #sec04-moblie {
+    display: none;
+  }
+}
+
+#sec04-moblie h1 {
+  color: #fff;
+  font-size: 45px;
+  font-weight: 900;
+  padding: 5px 10px;
+}
+
+@media screen and (max-width: 767px) {
+  #sec04-moblie h1 {
+    font-weight: 900;
+    font-size: 32px;
+  }
+}
+
+#sec04-moblie hr {
+  width: 30vw;
+  height: 2px;
+  color: #fff;
+  margin: 10px;
+  opacity: 1 !important;
+}
+
+#sec04-moblie #sec04-moblie-container {
+  padding-top: 10vw;
+}
+
+#sec04-moblie #sec04-moblie-container .col {
+  margin: 10px;
+}
+
+#sec04-moblie #sec04-moblie-container .col .card {
+  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);
+}
+
+#sec04-moblie #sec04-moblie-container .col .card img {
+  height: 150px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+#sec05 {
+  padding-top: 5vw;
+  padding-bottom: 5vw;
+}
+
+@media screen and (max-width: 767px) {
+  #sec05 {
+    display: none;
+  }
+}
+
+#sec05 h1 {
+  font-size: 45px;
+  font-weight: 900;
+  padding: 15px;
+}
+
+#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);
+}
+
+#sec05-moblie {
+  padding-top: 5vw;
+  padding-bottom: 5vw;
+  overflow: hidden;
+}
+
+@media screen and (min-width: 1025px) {
+  #sec05-moblie {
+    display: none;
+  }
+}
+
+#sec05-moblie #sec05-moblie-container {
+  position: relative;
+}
+
+#sec05-moblie #sec05-moblie-container .arrow-table {
+  position: fixed;
+  width: 25px;
+  right: 5px;
+  bottom: 300px;
+  z-index: 6;
+}
+
+@media screen and (max-width: 350px) {
+  #sec05-moblie #sec05-moblie-container .arrow-table {
+    right: 10px;
+  }
+}
+
+#sec05-moblie h1 {
+  font-size: 45px;
+  font-weight: 900;
+  padding: 15px;
+}
+
+#sec05-moblie #sec05-container #sec05-moblie-slider {
+  width: 100vw;
+}
+
+#sec05-moblie #sec05-container #sec05-moblie-slider .sec05-moblie-box {
+  margin: 30px;
+}
+
+#sec05-moblie #sec05-container #sec05-moblie-slider .sec05-moblie-box .card {
+  border: none;
+}
+
+#sec06 {
+  padding-top: 5vw;
+  padding-bottom: 5vw;
+  background: #525252;
+}
+
+@media screen and (max-width: 767px) {
+  #sec06 {
+    background: #313131;
+  }
+}
+
+#sec06 h1 {
+  font-size: 45px;
+  font-weight: 900;
+  padding: 15px;
+  color: #fff;
+}
+
+#sec06 hr {
+  width: 12vw;
+  height: 2px;
+  color: #fff;
+  margin: 10px;
+  opacity: 1 !important;
+}
+
+@media screen and (max-width: 767px) {
+  #sec06 hr {
+    width: 30vw;
+  }
+}
+
+#sec06 .card {
+  border: none;
+  background: none;
+}
+
+#sec07 {
+  padding-top: 5vw;
+  padding-bottom: 5vw;
+}
+
+@media screen and (max-width: 767px) {
+  #sec07 {
+    display: none;
+  }
+}
+
+#sec07 .NFT-Collections-Sales-Volume {
+  width: 80vw;
+  margin: 0 auto;
+  margin-top: -120px;
+  margin-bottom: 50px;
+}
+
+@media screen and (max-width: 767px) {
+  #sec07 .NFT-Collections-Sales-Volume {
+    display: none;
+  }
+}
+
+#sec07 .NFT-Collections-Sales-Volume h1 {
+  padding: 0;
+  margin: 0;
+  font-weight: normal;
+  color: #fff;
+  letter-spacing: 3px;
+  font-size: 50px;
+}
+
+#sec07 .table {
+  text-align: center;
+}
+
+#sec07 .table thead tr th {
+  border: 0;
+}
+
+#sec07 .table td {
+  display: table-cell;
+  vertical-align: middle;
+  text-align-last: left;
+}
+
+#sec07 .table td img {
+  width: 50px;
+}
+
+#sec07 .table td .data-line {
+  width: 100px;
+}
+
+#sec07 .table th {
+  display: table-cell;
+  vertical-align: middle;
+  text-align-last: left;
+}
+
+#sec07 .table img {
+  padding: 5px;
+}
+
+#sec07 .sec07-table-button {
+  text-align: right;
+}
+
+#sec07 .sec07-table-button .data-button {
+  text-align: left;
+  border-radius: 25px;
+  width: 10vw;
+  padding: 5px 20px;
+  color: #000;
+  background: url(./img/play.png) 80% 40% no-repeat scroll transparent;
+  background-size: 18px 18px;
+  background-color: #fff;
+  border: 1px solid #000;
+}
+
+#sec07-moblir-title {
+  background: #414141;
+}
+
+@media screen and (min-width: 1025px) {
+  #sec07-moblir-title {
+    display: none;
+  }
+}
+
+#sec07-moblir-title #sec07-container {
+  padding: 15px;
+  font-weight: 900;
+  color: #fff;
+}
+
+#sec07-moblie {
+  padding-top: 5vw;
+  padding-bottom: 5vw;
+}
+
+@media screen and (min-width: 1025px) {
+  #sec07-moblie {
+    display: none;
+  }
+}
+
+#sec07-moblie .table {
+  text-align: center;
+}
+
+#sec07-moblie .table thead tr th {
+  border: 0;
+}
+
+#sec07-moblie .table td {
+  display: table-cell;
+  vertical-align: middle;
+  text-align-last: left;
+  font-size: 14px;
+}
+
+#sec07-moblie .table td img {
+  width: 30px;
+}
+
+#sec07-moblie .table td .data-line {
+  width: 80px;
+}
+
+#sec07-moblie .table th {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+#sec07-moblie .table img {
+  padding: 5px;
+  width: 50px;
+}
+
+#sec07-moblie .sec07-table-button {
+  text-align: right;
+}
+
+#sec07-moblie .sec07-table-button .data-button {
+  text-align: left;
+  border-radius: 25px;
+  width: 35vw;
+  padding: 5px 20px;
+  color: #000;
+  background: url(./img/play.png) 80% 40% no-repeat scroll transparent;
+  background-size: 18px 18px;
+  background-color: #fff;
+  border: 1px solid #000;
+}
+
+#footer {
+  width: 100vw;
+  text-align: center;
+  line-height: 2;
+  background: #313131;
+  color: #fff;
+  padding-bottom: 3vw !important;
+}
+
+#footer .footer-link {
+  padding-top: 3vw;
+}
+
+#footer .footer-link a {
+  text-decoration: none;
+  font-size: 20px;
+  padding: 10px;
+  color: #fff;
+}
+
+@media screen and (max-width: 767px) {
+  #footer .footer-link a {
+    font-size: 14px;
+    padding: 0 !important;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  #footer .footer-link a {
+    font-size: 12px;
+  }
+}
+
+#footer .footer-link a span {
+  font-size: 28px;
+}
+
+@media screen and (max-width: 767px) {
+  #footer .footer-link a span {
+    font-size: 16px;
+  }
+}
+
+@media screen and (max-width: 350px) {
+  #footer .footer-link a span {
+    font-size: 14px;
+  }
+}
+
+#footer .text {
+  padding-top: 3vw;
+}
+
+#footer .text h2 {
+  font-size: 20px;
+  margin: 10px;
+  letter-spacing: 1px;
+  display: inline;
+}
+
+@media screen and (max-width: 767px) {
+  #footer .text h2 {
+    display: block;
+    font-size: 16px;
+    margin: 8px;
+  }
+}
+
+#footer .text p {
+  margin: 0 !important;
+}
+/*# sourceMappingURL=style.css.map */

style.scss

@@ -0,0 +1,815 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+$desktop: 1025px;
+$table: 1024px;
+$moblie: 767px;
+
+.container-fluid {
+    width: 80vw;
+    margin: 0 auto;
+    @media screen and(max-width:$moblie) {
+        width: 100vw;
+    }
+}
+// 主選單
+#Navigation {
+    width: 100vw;
+    background-color: #000;
+    color: #fff;
+    #logo {
+        padding-top: 1.3vw;
+        @media screen and(max-width:$moblie) {
+            padding-top: 0;
+        }
+
+        img {
+            width: 180px;
+            @media screen and(max-width:$moblie) {
+                width: 150px;
+            }
+        }
+    }
+    #link {
+        padding: 4vw 1vw 2vw 1vw;
+        @media screen and(max-width:$moblie) {
+            display: none;
+        }
+    }
+    a {
+        text-decoration: none;
+        color: #fff;
+        letter-spacing: 1px;
+        font-size: 0.9rem;
+        font-weight: 600;
+        cursor: pointer;
+        padding: 15px;
+        position: relative;
+        :hover {
+            opacity: 0.8;
+        }
+        &:after {
+            content: "";
+            display: block;
+            width: 80%;
+            height: 3px;
+            background-color: #fff;
+            position: absolute;
+            left: 12%;
+            bottom: 0;
+            transition: all 0.3s;
+            opacity: 0;
+        }
+        &:hover:after {
+            width: 80%;
+            opacity: 1;
+        }
+        @media screen and(max-width:$table) {
+            padding: 5px;
+            padding-top: 2vw;
+        }
+    }
+    #menu-btn1 {
+        position: absolute;
+        right: 1vw;
+        top: 5vw;
+        width: 15vw;
+        z-index: 6;
+
+        @media screen and(min-width:$desktop) {
+            display: none;
+        }
+        @media screen and(min-width:768px) {
+            display: none;
+        }
+    }
+}
+// banner
+#banner {
+    width: 100vw;
+    height: 100vh;
+    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 {
+        width: 80vw;
+        margin: 50px auto;
+        @media screen and(max-width:$moblie) {
+            width: 100vw;
+            margin: 0;
+        }
+
+        img {
+            width: 80vw;
+            height: 70vh;
+            object-fit: cover;
+            @media screen and(max-width:$moblie) {
+                height: 35vh;
+                width: 100vw;
+            }
+        }
+        h1 {
+            text-align: center;
+            color: #fff;
+            @media screen and(max-width:$moblie) {
+                font-size: 20px;
+                padding: 15px;
+            }
+        }
+        #email {
+            width: 75%;
+            font-size: 16px;
+            margin: 10px 0px;
+            padding: 10px 15px;
+            border: none;
+            height: 50px;
+            @media screen and(max-width:$moblie) {
+                display: none;
+            }
+        }
+        // 手機板訂閱email
+        #email-moblie {
+            margin: 10px auto;
+            width: 75%;
+            padding: 10px 15px;
+            border: none;
+            height: 50px;
+            background: url(./img/email.png) 5% 50% no-repeat scroll transparent;
+            background-size: 20px 15px;
+            background-color: #fff;
+            text-align: center;
+            color: #313131;
+            font-weight: 900;
+            @media screen and(min-width:$desktop) {
+                display: none;
+            }
+        }
+        // 電腦版按鈕
+        .btn {
+            color: #fff;
+            width: 25%;
+            height: 50px;
+            margin: 10px 0px;
+            font-size: 16px;
+            border-radius: 0%;
+            border: none;
+            font-weight: 900;
+            background: #93000a;
+            vertical-align: top;
+            @media screen and(max-width:$moblie) {
+                display: none;
+            }
+        }
+        // 手機板按鈕
+        #email-arrow {
+            width: 15%;
+            background: url(./img/button-arrow.png) 55% 50% no-repeat scroll transparent;
+            background-size: 10px 15px;
+            background-color: #93000a;
+            height: 50px;
+            margin: 10px auto;
+            font-size: 16px;
+            border-radius: 0%;
+            border: none;
+            font-weight: 900;
+            vertical-align: top;
+            @media screen and(min-width:$desktop) {
+                display: none;
+            }
+        }
+    }
+}
+
+// sec01 NEWS
+#sec01 {
+    padding-top: 5vw;
+    padding-bottom: 5vw;
+   
+    .NEWS{
+        width: 80vw;
+        margin: 0 auto;
+        margin-top: -130px;
+        margin-bottom: 50px;
+        @media screen and(max-width:$moblie) {
+            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) {
+                font-size: 50px;
+            }
+         }
+     }
+    #sec01-container {
+        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+        margin: 0 auto !important;
+        @media screen and(max-width:$moblie) {
+            width: 90vw;
+            margin: 0 auto;
+        }
+        #sec01-container-card {
+            .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: 20px;
+                    margin-bottom: 0 !important;
+                    @media screen and(max-width:$moblie) {
+                        padding: 0px;
+                    }
+                }
+                img {
+                    text-align: center;
+                    width: 38vw;
+                    @media screen and(max-width:$moblie) {
+                        width: 85vw;
+                        margin: 0 auto;
+                    }
+                }
+            }
+        }
+    }
+}
+// sec02 TOP排名 電腦版
+#sec02 {
+    background: #414141;
+    padding-top:3vw ;
+    @media screen and(max-width:$moblie) {
+        display: none;
+    }
+    #sec02-container {
+        padding: 15px;
+        font-weight: 900;
+        color: #fff;
+        
+        // 電腦版top圖片排行
+        #sec02-top-box{
+            position: relative;
+
+           
+            .sec02-box1{
+                color:#000;
+                img{
+                    position: absolute;
+                    top: 1px;
+                    width: 200px;
+                   
+                    
+                }
+                .sec02-top-text{
+                    position: absolute;
+                    top: 140px;
+                    padding-left: 15px;
+                    
+                    span{
+                        font-size: 50px;
+                    }
+                }
+            }
+        }
+
+
+    }
+}
+// sec02 top排名手機板
+#sec02-moblie {
+    background: #414141;
+    padding-top:3vw ;
+    padding-bottom: 10vw;
+ 
+    @media screen and(min-width:$desktop) {
+        display: none;
+    }
+    #sec02-container {
+        padding: 15px;
+        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-top-text{
+                    position: absolute;
+                    top: 60px;
+                    left:20px;
+                    span{
+                        font-size: 50px;
+                    }
+                }
+            }
+        }
+
+
+    }
+}
+// sec03 排名table-電腦版
+#sec03 {
+    padding-top: 10vw;
+    padding-bottom: 5vw;
+    @media screen and(max-width:$moblie) {
+        display: none;
+    }
+    #sec03-table {
+        .sec03-table-title {
+            font-family: 微軟正黑體;
+            font-weight: 900;
+            padding: 15px;
+            font-size: 35px;
+        }
+        .table {
+            th {
+                font-size: 40px;
+                display: table-cell;
+                vertical-align: middle;
+            }
+            td {
+                padding: 15px;
+            }
+
+            img {
+                width: 50px;
+            }
+            .sec03-table-text {
+                padding: 10px;
+                display: table-cell;
+                vertical-align: middle;
+                h1 {
+                    font-size: 20px;
+                    margin: 0;
+                }
+                p {
+                    margin: 0;
+                }
+            }
+        }
+    }
+}
+// sec03排名table-手機板
+#sec03-moblie {
+    padding-top: 30vw;
+    position: relative;
+    .arrow-table {
+        position: fixed;
+        width: 25px;
+        right: 15px;
+        bottom: 250px;
+        z-index: 6;
+        @media screen and(max-width:350px) {
+            right: 10px;
+        }
+    }
+    .sec03-table-title {
+        font-family: 微軟正黑體;
+        font-weight: 900;
+        font-size: 15px;
+        padding: 0 !important;
+        margin-bottom: 20px;
+    }
+    #sec03-slider {
+        .slick-slide img {
+            display: inline;
+        }
+        #sec03-slider1,
+        #sec03-slider2 {
+            margin: 0 30px;
+            @media screen and(max-width:350px) {
+                margin: 0 10px;
+            }
+        }
+
+        .table {
+            th {
+                font-size: 40px;
+                display: table-cell;
+                vertical-align: middle;
+                padding: 15px;
+            }
+            td {
+                padding: 15px;
+                @media screen and(max-width:350px) {
+                    padding: 0px;
+                }
+            }
+
+            img {
+                width: 50px;
+            }
+            .sec03-table-text {
+                padding: 10px;
+                display: table-cell;
+                vertical-align: middle;
+                h1 {
+                    font-size: 20px;
+                    margin: 0;
+                }
+                p {
+                    margin: 0;
+                }
+            }
+        }
+    }
+    @media screen and(min-width:$desktop) {
+        display: none;
+    }
+}
+// sec04  洞察報告 電腦版
+#sec04 {
+    padding-top: 5vw;
+    padding-bottom: 5vw;
+    background: #414141;
+    @media screen and(max-width:$moblie) {
+        display: none;
+    }
+    h1 {
+        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: 12vw;
+        height: 2px;
+        color: #fff;
+        margin: 10px;
+        opacity: 1 !important;
+        @media screen and(max-width:$moblie) {
+            width: 30vw;
+        }
+    }
+    #sec04-container {
+        .card {
+            img {
+                height: 150px;
+                object-fit: cover;
+            }
+            border-radius: 0%;
+            box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
+        }
+    }
+}
+#sec04-moblie {
+    padding-top: 5vw;
+    padding-bottom: 5vw;
+    background: #414141;
+    position: relative;
+    .arrow-table {
+        position: fixed;
+        width: 25px;
+        right: 15px;
+        bottom: 240px;
+        z-index: 6;
+        @media screen and(max-width:350px) {
+            right: 10px;
+        }
+    }
+    @media screen and(min-width:$desktop) {
+        display: none;
+    }
+    h1 {
+        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: 30vw;
+        height: 2px;
+        color: #fff;
+        margin: 10px;
+        opacity: 1 !important;
+    }
+    #sec04-moblie-container {
+        padding-top: 10vw;
+        .col {
+            margin: 10px;
+            .card {
+                
+
+                img {
+                    height: 150px;
+                    object-fit: cover;
+                }
+                border-radius: 0%;
+                box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
+            }
+        }
+    }
+}
+// sec05 熱門作品-電腦版
+#sec05 {
+    padding-top: 5vw;
+    padding-bottom: 5vw;
+    @media screen and(max-width:$moblie) {
+        display: none;
+    }
+    h1 {
+        font-size: 45px;
+        font-weight: 900;
+        padding: 15px;
+    }
+    #sec05-container {
+        .card {
+            box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
+        }
+    }
+}
+// sec05熱門作品-手機板
+#sec05-moblie {
+    padding-top: 5vw;
+    padding-bottom: 5vw;
+    overflow: hidden;
+    @media screen and(min-width:$desktop) {
+        display: none;
+    }
+    #sec05-moblie-container {
+        position: relative;
+        .arrow-table {
+            position: fixed;
+            width: 25px;
+            right: 5px;
+            bottom: 300px;
+            z-index: 6;
+            @media screen and(max-width:350px) {
+                right: 10px;
+            }
+        }
+    }
+    h1 {
+        font-size: 45px;
+        font-weight: 900;
+        padding: 15px;
+    }
+    #sec05-container {
+        #sec05-moblie-slider {
+            width: 100vw;
+
+            .sec05-moblie-box {
+                margin: 30px;
+                .card {
+                    border: none;
+                }
+            }
+        }
+    }
+}
+// sec06 NFT資訊
+#sec06 {
+    padding-top: 5vw;
+    padding-bottom: 5vw;
+    background: #525252;
+    @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;
+        opacity: 1 !important;
+        @media screen and(max-width:$moblie) {
+            width: 30vw;
+        }
+    }
+ 
+    .card {
+        border: none;
+        background: none;
+        // .fb-post {
+        //     margin: 10px 0 !important;
+        // }
+    }
+   
+}
+// sec07 table 電腦版
+#sec07 {
+    padding-top: 5vw;
+    padding-bottom: 5vw;
+    @media screen and(max-width:$moblie) {
+        display: none;
+    }
+    .NFT-Collections-Sales-Volume{
+       width: 80vw;
+       margin: 0 auto;
+       margin-top: -120px;
+       margin-bottom: 50px;
+        @media screen and(max-width:$moblie) {
+           display: none;
+        }
+        h1{
+            padding: 0;
+            margin: 0;
+            font-weight: normal;
+            color:#fff;
+            letter-spacing: 3px;
+            font-size: 50px;
+        }
+    }
+    .table {
+        text-align: center;
+        thead tr th {
+            border: 0;
+        }
+        td {
+            display: table-cell;
+            vertical-align: middle;
+            text-align-last: left;
+            img{
+                width: 50px;
+            }
+            .data-line{
+                width: 100px;
+            }
+        }
+        th {
+            display: table-cell;
+            vertical-align: middle;
+            text-align-last: left;
+        }
+        img {
+            padding: 5px;
+        }
+    }
+    .sec07-table-button{
+        text-align: right;
+        .data-button{
+            text-align:left;
+            border-radius: 25px;
+            width: 10vw;
+            padding: 5px 20px;
+            color:#000;
+            background: url(./img/play.png) 80% 40% no-repeat scroll transparent;
+            background-size:18px 18px;
+            background-color: #fff;
+            border: 1px solid #000;
+        }
+    }
+}
+// sec07 table手機板 標題
+#sec07-moblir-title {
+    background: #414141;
+
+    @media screen and(min-width:$desktop) {
+        display: none;
+    }
+    #sec07-container {
+        padding: 15px;
+        font-weight: 900;
+        color: #fff;
+        
+    }
+}
+// sec07 table手機板
+#sec07-moblie{
+    padding-top: 5vw;
+    padding-bottom: 5vw;
+    @media screen and(min-width:$desktop) {
+        display: none;
+    }
+    .table {
+        text-align: center;
+        thead tr th {
+            border: 0;
+        }
+        td {
+            display: table-cell;
+            vertical-align: middle;
+            text-align-last: left;
+            font-size: 14px;
+            img{
+                width: 30px;
+            }
+            .data-line{
+                width: 80px;
+            }
+        }
+        th {
+            display: table-cell;
+            vertical-align: middle;
+        }
+        img {
+            padding: 5px;
+            width: 50px;
+        }
+    }
+    .sec07-table-button{
+        text-align: right;
+        .data-button{
+            text-align:left;
+            border-radius: 25px;
+            width: 35vw;
+            padding: 5px 20px;
+            color:#000;
+            background: url(./img/play.png) 80% 40% no-repeat scroll transparent;
+            background-size:18px 18px;
+            background-color: #fff;
+            border: 1px solid #000;
+        }
+    }
+}
+
+// 頁尾
+#footer {
+    width: 100vw;
+    text-align: center;
+    line-height: 2;
+    background: #313131;
+    color: #fff;
+    padding-bottom: 3vw !important;
+    .footer-link {
+        padding-top: 3vw;
+
+        a {
+            text-decoration: none;
+            font-size: 20px;
+            padding: 10px;
+            color: #fff;
+
+            @media screen and(max-width:$moblie) {
+                font-size: 14px;
+                padding: 0 !important;
+            }
+
+            @media screen and(max-width:400px) {
+                font-size: 12px;
+            }
+
+            span {
+                font-size: 28px;
+                @media screen and(max-width:$moblie) {
+                    font-size: 16px;
+                }
+                @media screen and(max-width:350px) {
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+    .text {
+        padding-top: 3vw;
+        h2 {
+            font-size: 20px;
+            margin: 10px;
+            letter-spacing: 1px;
+            display: inline;
+            @media screen and(max-width:$moblie) {
+                display: block;
+                font-size: 16px;
+                margin: 8px;
+            }
+        }
+        p {
+            margin: 0 !important;
+        }
+    }
+}