@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; } } body .learn-more { color: #fff; width: 30%; height: 50px; margin: 10px 0px; font-size: 16px; border-radius: 0%; border: none; font-weight: 900; background: #93000a; vertical-align: top; -webkit-transition: 0.3s; transition: 0.3s; } body .learn-more:hover { color: #93000a; background: #fff; border: 1px solid #93000a; } #Navigation { width: 100vw; background-color: #000; color: #fff; position: fixed; z-index: 20; } #Navigation #logo { 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; } } #menu-box { width: 40vw; right: 0px; position: fixed; z-index: 20; overflow: hidden; } @media screen and (min-width: 1025px) { #menu-box { display: none; } } #menu-box hr { margin: 5px auto !important; width: 25vw; background: #fff; opacity: 1 !important; } #menu-box #menu-box2 { padding-bottom: 5vw; position: relative; width: 40vw; background-color: #313131; z-index: 7; text-align: center; } #menu-box #menu-box2 .close { padding: 30px 15px 15px 15px; } #menu-box #menu-box2 a { display: inline-block; text-decoration: none; color: #fff; font-size: 14px; font-weight: 900; text-align: center; padding: 0 !important; } #banner { width: 100vw; display: inline-block; background: linear-gradient(115deg, #313131 38%, transparent 30%, #707070 27%); background-blend-mode: overlay; } @media screen and (max-width: 767px) { #banner { background: linear-gradient(115deg, #414141 100%, transparent 30%, #707070 0%); } } #banner #banner-container { width: 80vw; margin: 50px auto; padding-bottom: 5vw; } @media screen and (max-width: 767px) { #banner #banner-container { width: 100vw; margin: 0; padding-bottom: 15vw; } } #banner #banner-container .youtube { width: 80vw; padding-top: 10vw; margin: 0 auto; color: #fff; } @media screen and (max-width: 767px) { #banner #banner-container .youtube { padding-top: 30vw; } } #banner #banner-container .youtube hr { width: 12vw; height: 2px; color: #fff; margin: 20px 0px; opacity: 1 !important; } @media screen and (max-width: 767px) { #banner #banner-container .youtube hr { width: 30vw; } } #banner #banner-container .youtube p { font-size: 18px; } #banner #banner-container .youtube h1 { font-size: 40px; padding-top: 0; } @media screen and (max-width: 767px) { #banner #banner-container .youtube h1 { font-size: 25px; padding: 15px 0px; } } @media screen and (max-width: 767px) { #banner #banner-container .youtube .learn-more { width: 100%; margin: 10px 0px; } } #banner #banner-container h1 { padding-top: 3vw; text-align: center; color: #fff; } @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; -webkit-transition: 0.3s; transition: 0.3s; } @media screen and (max-width: 767px) { #banner #banner-container .btn { display: none; } } #banner #banner-container .btn:hover { font-size: 17px; } #banner #banner-container #email-arrow { width: 15%; background: url(./img/button-arrow.png) 55% 50% no-repeat scroll transparent; 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: 100px; } @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: 18px; margin-bottom: 0 !important; } @media screen and (max-width: 767px) { #sec01 #sec01-container #sec01-container-card .card p { padding: 0px; font-size: 16px; } } #sec01 #sec01-container #sec01-container-card .card .sec01-title { padding: 15px 0px; font-weight: 900; font-size: 22px; } @media screen and (max-width: 767px) { #sec01 #sec01-container #sec01-container-card .card .sec01-title { font-size: 18px; } } #sec01 #sec01-container #sec01-container-card .card a { text-decoration: none; color: #000; -webkit-transition: 0.3s; transition: 0.3s; cursor: pointer; } #sec01 #sec01-container #sec01-container-card .card a:hover { color: #2828ff; } #sec01 #sec01-container #sec01-container-card .card img { text-align: center; width: 38vw; height: 240px; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 767px) { #sec01 #sec01-container #sec01-container-card .card img { width: 85vw; height: 200px; margin: 0 auto; } } #sec02 { background: #414141; padding-top: 3vw; } @media screen and (max-width: 767px) { #sec02 { display: none; } } #sec02 #sec02-container { width: 90vw; padding: 15px; font-weight: 900; color: #fff; position: relative; } #sec02 #sec02-container #sec02-top-box { position: relative; } #sec02 #sec02-container #sec02-top-box #sec02-content { position: absolute; top: 10px; left: 300px; } #sec02 #sec02-container #sec02-top-box .sec02-box1 { color: #000; width: 13vw; } #sec02 #sec02-container #sec02-top-box .sec02-box1 img { border-radius: 50%; width: 150px; height: 200px; -o-object-fit: cover; object-fit: cover; } #sec02 #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text span { font-size: 30px; } #sec02-moblie { background: #414141; padding-top: 3vw; padding-bottom: 20vw; } @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-top1-box img { width: 80px; } #sec02-moblie #sec02-container .sec02-top1-box span { font-size: 30px; } #sec02-moblie #sec02-container .sec02-top1-box .sec02-top-text { text-align: center; } #sec02-moblie #sec02-container #sec02-content { position: relative; } #sec02-moblie #sec02-container #sec02-top-box { position: absolute; top: 1px; } #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 { color: #000; } #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 img { width: 80px; height: 120px; border-radius: 50%; } #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text { font-size: 12px; } #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text span { font-size: 30px; } #sec03 { padding-top: 15vw; 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: 40vw; 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; bottom: 200px; } } #sec03-moblie .sec03-table-title, #sec03-moblie .sec03-table-title2 { font-family: 微軟正黑體; font-weight: 900; font-size: 15px; padding: 0 !important; margin-bottom: 20px; color: #9B9B9B; } #sec03-moblie .contant-toggle { color: #000; } #sec03-moblie #sec03-slider .slick-slide img { display: inline; } #sec03-moblie #sec03-slider #sec03-slider1, #sec03-moblie #sec03-slider #sec03-slider2 { margin: 0 5px; } @media screen and (max-width: 350px) { #sec03-moblie #sec03-slider #sec03-slider1, #sec03-moblie #sec03-slider #sec03-slider2 { margin: 0 5px; } } #sec03-moblie #sec03-slider .table th { font-size: 40px; display: table-cell; vertical-align: middle; padding: 15px; } @media screen and (max-width: 350px) { #sec03-moblie #sec03-slider .table th { font-size: 30px; } } #sec03-moblie #sec03-slider .table td { display: table-cell; vertical-align: middle; padding: 15px; padding: 10px; } @media screen and (max-width: 350px) { #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: 0px 0px 0px 3px; display: table-cell; vertical-align: middle; } @media screen and (max-width: 350px) { #sec03-moblie #sec03-slider .table .sec03-table-text { padding: 0px; } } #sec03-moblie #sec03-slider .table .sec03-table-text h1 { font-size: 14px; margin: 0; } #sec03-moblie #sec03-slider .table .sec03-table-text p { margin: 0; font-size: 12px; } @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 .learn-more { width: 45%; } #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 { padding: 5px; height: 150px; -o-object-fit: cover; object-fit: cover; } #sec04 #sec04-container .card .card-title { font-weight: 900; } #sec04-moblie { padding-top: 5vw; padding-bottom: 5vw; background: #414141; position: relative; overflow: hidden; } #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; } #sec04-moblie #sec04-moblie-container .col .card .card-title { font-weight: 900; } #sec04-moblie #sec04-moblie-container .col .card .learn-more { width: 120px; } #sec05 { width: 85vw; margin: 0 auto; 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 #sec05-destop-slider .slick-prev:before, #sec05 #sec05-container #sec05-destop-slider .slick-next:before { opacity: 0; } #sec05 #sec05-container #sec05-destop-slider .slick-prev, #sec05 #sec05-container #sec05-destop-slider .slick-next { width: 40px; height: 40px; content: none; } #sec05 #sec05-container #sec05-destop-slider .slick-prev { background-image: url(./img/arrow-table2.png); background-repeat: no-repeat; left: -40px; } #sec05 #sec05-container #sec05-destop-slider .slick-prev:hover, #sec05 #sec05-container #sec05-destop-slider .slick-prev:focus { background-image: url(./img/arrow-table2.png); background-repeat: no-repeat; } #sec05 #sec05-container #sec05-destop-slider .slick-next { background-image: url(./img/arrow-table.png); background-repeat: no-repeat; right: -50px; } #sec05 #sec05-container #sec05-destop-slider .slick-next:hover, #sec05 #sec05-container #sec05-destop-slider .slick-next:focus { background-image: url(./img/arrow-table.png); background-repeat: no-repeat; } #sec05 #sec05-container .col { margin: 5px; } #sec05 #sec05-container .card { -webkit-box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8); box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8); } #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 #sec06-container .card { height: 480px; margin: 10px; border-radius: 0%; -webkit-box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8); box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8); } #sec06 #sec06-container .card img { padding: 5px; height: 150px; -o-object-fit: cover; object-fit: cover; } #sec06 #sec06-container .card .card-title { font-weight: 900; } #sec06 #sec06-container .card .learn-more { width: 120px; } #sec07 { 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: 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: 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; text-align: left; font-size: 14px; } #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 a { text-decoration: none; color: #fff; } #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 */