@font-face { font-family: 'na-he'; src: url('../font/NationalPark-Heavy-3.otf'); } .na-he { font-family: "na-he"; } body { background-color: #212226; } .main { max-width: 1920px; margin: 0px auto; } .header { position: relative; overflow: hidden; } .header-top { background: url('../img/home/navBg@2x.png') repeat-x left -4px; height: 132px; position: absolute; width: 100%; left: 0; top: 0px; } .header-top-logo { margin-left: 86px; margin-top: 12px; float: left; } .nav { float: left; height: 118; margin-left: 100px; } .logout { color: white; line-height: 30px; display: none; } .nav a { font-family: 'na-he'; font-size: 40px; color: #fff; height: 118px; display: inline-block; text-align: center; line-height: 112px; position: relative; overflow: hidden; float: left; padding: 0 35px; } .nav a::after { position: absolute; content: ''; width: 100%; height: 0px; left: 0; top: 0px; background: url('../img/home/navcur@2x.png') repeat-x center top; transition: all .25s ease-out .01s; } .nav a.cur::after, .nav a:hover::after { height: 118px; } .market { margin-top: 44px; margin-right: 62px; } .login { margin-top: 33px; margin-right: 50px; } .header-lh { position: absolute; height: 120%; left: 0px; bottom: -35%; left: -70px; } .header-lh img{ height: 100%; } .header-adv { width: 50%; position: absolute; right: 7%; top: 20%; } .header-adv img{ width: 100%; } .header-adv-k { position: absolute; left:0px; top:0px; width: calc(100%); } .header-adv-wg { background: url('../img/home/ggwg@2x.png') no-repeat center center; width: 958px; height: 218px; position: absolute; right: 0; bottom: 0; } .download-btns { position: absolute; bottom: 7%; right: 8%; height: 8%; } .download-btns a { position: relative; float: left; overflow: hidden; top: 0px; transition: all .2s ease-out 0s; height: 100%; margin-left: 10px; } .download-btns a img{ height: 100%; } .download-btns a:first-child { margin-top: 5px; } .download-btns a:hover { top: -5px; } .content { background: url('../img/home/tbg@2x.png') no-repeat center -241px; overflow: hidden; } .content-f1 { text-align: center; color: #033465; } .content-f1 h3 { font-size: 58px; line-height: 58px; padding-top: 120px; letter-spacing: 2px; } .content-f1 p { font-size: 34px; line-height: 38px; margin-top: 30px; letter-spacing: 2px; } .content-f2 { width: 1475px; margin: 57px auto 0; display: flex; flex-wrap: row nowrap; } .content-f2-item { height: 433px; width: 340px; text-align: center; margin: 0 12px; } .content-f2-item img { margin-top: 74px; } .content-f2-item h3 { margin-top: 10px; margin-bottom: 10px; } .content-f2-item p { font-size: 26px; color: #5781aa; } .content-f2-item1 { background: url("../img/home/k1@2x.png") no-repeat center center; margin-right: 15px; } .content-f2-item2 { background: url("../img/home/k2@2x.png") no-repeat center center; } .content-f2-item3 { background: url("../img/home/k3@2x.png") no-repeat center center; } .content-f2-item4 { background: url("../img/home/k4@2x.png") no-repeat center center; } .content-f3 { width: 1452px; margin: 59px auto 135px; } .content-f3-item { background: url('../img/home/f3-1@2x.png') no-repeat center left; width: 1452px; height: 477px; margin-bottom: 13px; } .content-f3-item-txt { width: 760px; padding-top: 87px; margin-right: 50px; } .content-f3-item-txt h3 { margin-bottom: 10px; } .content-f3-item-txt h5 { color: #154678; margin: 10px 0; } .content-f3-item-txt p { color: #6186aa; font-size: 34px; line-height: 44px; } .content-f3-item2 { background: url('../img/home/f3-2@2x.png') no-repeat center left; } .banner { height: 1080px; position: relative; } .swiper-container { height: 1080px; } .pagination { position: absolute; z-index: 20; left: 10px; bottom: 25px; } span.swiper-pagination-bullet { display: inline-block; width: 10px; height: 10px; border-radius: 10px; background: #fff; margin-right: 20px; opacity: 0.8; border: 1px solid #fff; cursor: pointer; } .swiper-visible-switch { background: #fff; } .swiper-pagination-bullet-active { background: #222 !important; } .nft-btn { bottom: 110px; left: 0px; position: absolute; z-index: 20; } .inve { background: url("../img/home/inve@2x.png") no-repeat center center; height: 960px; text-align: center; overflow: hidden; } .inve h3 { font-size: 67px; color: #fff; margin-bottom: 34px; margin-top: 100px; } .inve h3:first-child { margin-top: 140px; } .inve p a { vertical-align: middle; margin: 15px 50px; display: inline-block; } .join { background: url('../img/home/join@2x.png') no-repeat center -1px; } .join-inner{ width: 100%; max-width: 1350px; margin: 0 auto; height: 106px; display: flex; flex-flow: row nowrap; align-items: center; justify-content:flex-end; } .join a { margin-left: 75px; transition: all .2s ease 0s; } .join a:hover { transform: scale(1.1); } .footer { background: url('../img/home/ftbg@2x.png') no-repeat center top; height: 499px; position: relative; } .footer-inner { font-family: "na-he"; max-width: 1460px; margin: 0 auto; display: flex; flex-flow: row nowrap; justify-content: space-between; } .footer-inner dl { flex: 1; line-height: 50px; padding-top: 30px; } .footer-inner dl dt { font-size: 33px; color: #fffefe; } .footer-inner dl dd { font-size: 25px; color: #9b9b9b; } .footer-inner dl dd a { transition: color .3s ease 0s; } .footer-inner dl dd a:hover { color: #fff; } .footer-bottom { font-size: 25px; color: #b4b4b4; position: absolute; bottom: 35px; left: 0px; text-align: center; width: 100%; } /* ========gamePlay========== */ .gameplay-content { background: url('../img/game play/gpbg@2x.png') no-repeat center top; padding-top: 80px; padding-bottom: 70px; } .gameplay-header { background: url('../img/game play/topbg@2x.png') no-repeat center top; } .gameplay-video { width: 80%; margin: 7% auto 0px; } .gameplay-video img{ width:100%; } .gameplay-content-f3 .content-f3-item { background: url('../img/game play/f1@2x.png') no-repeat center top; width: 1472px; height: 618px; margin-bottom: 40px; } .gameplay-content-f3 .content-f3-item-txt { float: left; width: 650px; margin: 10px 0 0 97px; } .gameplay-content-f3 .content-f3-item-txt h3 { margin-top: 20px; margin-bottom: 12px; font-size: 54px; color: #25486b; } .gameplay-content-f3 .content-f3-item-txt p { font-size: 29px; } .gameplay-content-f3 .content-f3-item-img { float: right; margin: 124px 73px 0 0; } .gameplay-content-f3 .content-f3-item:nth-child(2n) { background: url('../img/game play/f2@2x.png') no-repeat center top; } .gameplay-content-f3 .content-f3-item:nth-child(2n) .content-f3-item-txt { float: right; margin: 25px 60px 0 0px; } .gameplay-content-f3 .content-f3-item:nth-child(2n) .content-f3-item-img { float: left; margin: 110px 0 0 96px; } /* ============tokenomic============== */ .tokenomic-header { } .tokenomic-content { background: url('../img/tokenomic/01/tcbg@2x.png') no-repeat center top; } .tokenomic-tab { background: url('../img/tokenomic/01/tck@2x.png') no-repeat center top; width: 1348px; height: 102px; margin: 50px auto 0; overflow: hidden; } .tokenomic-tab-inner { background: url('../img/tokenomic/01/tckbg@2x.png') no-repeat center top; width: 1326px; height: 82px; margin: 10px 0 0 11px; display: flex; flex-flow: row nowrap; justify-content: space-between; } .tokenomic-tab-inner li { text-align: center; line-height: 82px; font-size: 38px; color: #fff; width: 394px; cursor: pointer; } .tokenomic-tab-inner li.cur, .tokenomic-tab-inner li:hover { background: url('../img/tokenomic/01/tccur@2x.png') no-repeat center top; } .tokenomic-p-item { display: none; } .tokenomic-p-wrap .cur { display: block; } .tokenomic-p-item-txt { display: flex; flex-flow: row nowrap; justify-content: center; line-height: 44px; max-width: 1700px; margin: 0 auto; padding-top: 100px; } .tokenomic-p-item-txt li:first-child { flex: 1.5 } .tokenomic-p-item-txt h5 { font-size: 25px; color: #b7b7b7; } .tokenomic-p-item-txt h3 { font-size: 33px; color: #FFFFFF; } .tokenomic-p-item-txt h4 { font-size: 29px; color: #00ffc9; padding: 10px 0; } .tokenomic-p-item-txt h4 img { vertical-align: middle; } .tokenomic-p-tit { text-align: center; padding-top: 40px; color: #fff; } .tokenomic-p-con { padding: 50px 0; text-align: center; } /* ==========team=============== */ .team-header { background: url('../img/team/teambg@2x.jpg') no-repeat center 0; height: auto; padding-bottom: 90px; } .team-tit { text-align: center; margin-top: 10%; } .team-item { background: url('../img/team/teamjxbg@2x.png') no-repeat 0 bottom; width: 1366px; min-height: 137px; margin: 40px auto 0; } .team-item h3 { font-size: 50px; color: #fff; padding-bottom: 14px; } .team-item h3 span { font-size: 33px; color: #072d48; } .team-item p { font-size: 29px; color: #343434; padding: 0px 0 0px 20px; line-height: 40px; height: 117px; display: flex; flex-flow: column; justify-content: center; } /* ========roadmap========== */ .roadmap-header { background: url('../img/roadmap/roadbg@2x.png') no-repeat center top; height: auto; } .roadmap { margin-top: 8%; } .roadmap-con { background: url('../img/roadmap/roadk@2x.png') no-repeat center top; height: 734px; width: 1433px; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; margin: 30px auto 40px; } /* ============nft================ */ .nft-header { } .nft-con { background: url('../img/nft/hero/nftbg@2x.jpg') repeat-y center top; min-height: 500px; overflow: hidden; } .nft-hero-t { max-width: 1603px; margin: 132px auto 0; position: relative; } .nft-hero-t a { position: absolute; right: 10px; top: 0px; height: 100%; display: flex; flex-flow: row; align-items: center; } .nft-hero-t a img { height: calc(100% - 30px); } .nft-hero-c { max-width: 1603px; margin: 64px auto 0; display: flex; flex-flow: row wrap; justify-content: center; } .nft-hero-c a { position: relative; transition: all 0.2s ease 0s; margin: 0 19px 24px 0; z-index: 1; } .nft-hero-c a:hover { transform: scale(1.1); z-index: 2; } .weapon-item-c a { margin: 0 17px 21px 0; } .chip-con { padding: 90px 0; text-align: center; min-height: 700px; } .chip-t { font-size: 74px; color: #2c4b69; padding-top: 47px; } .desc-wrap { position: fixed; left: 0; top: 0; bottom: 0; right: 0; overflow: hidden; z-index: 10; display: none; } .desc-in-model { height: 100%; width: calc(100%); overflow-y: scroll; overflow-x: hidden; } .desc-wrap .desc-close { position: absolute; right: 50px; top: 50px; cursor: pointer; } .desc-inner { background: url('../img/nft/hero/layerbg@2x.png') no-repeat center top; width: 1519px; height: 1373px; margin: 80px auto 0; position: relative; box-sizing: border-box; padding-top: 40px; } .chip-inner { background: url("../img/nft/chip/chip-layer-bg@2x.png") no-repeat center top; height: 906px; } .desc-inner h3 { color: #1e3b4e; font-size: 56px; padding: 30px 105px 5px; font-weight: bold; } .desc-inner p { color: #1e3b4e; font-size: 51px; padding: 0 105px; } .hero-d-layer { position: fixed; left: 0; top: 0; bottom: 0; right: 0; overflow: hidden; z-index: 10; display: none; } .hero-d-layer-inner { height: calc(100%); width: calc(100%); overflow-y: scroll; overflow-x: hidden; scrollbar-width: none; } .hero-d-layer-inner::-webkit-scrollbar{ width: 0; } .hero-d-layer-con { background: url('../img/nft/hero/herodbg@2x.png') no-repeat center top; max-width: 1920px; width: 100%; height: 1106px; margin: 50px auto 0; position: relative; } .weapon-view .hero-d-layer-con { background: url('../img/nft/weapon/weapbg@2x.png') no-repeat center top; } .hero-d-close { position: absolute; right: 20px; top: 20px; cursor: pointer; z-index: 12; } .hero-d-p { position: absolute; bottom: 0px; left: -8%; height: 1080px; overflow: hidden; } .hero-d-jx { background: url('../img/nft/hero/hjx2.png') no-repeat center top; width: 726px; height: 442px; position: absolute; top: 114px; right: 10%; } .weapon-view .hero-d-jx { background: url('../img/nft/weapon/hjx2.png') no-repeat center top; top: 155px; } .hero-d-data { position: absolute; right: 15%; bottom: 80px; } .weapon-view .hero-d-data{ bottom: 150px; } .weapon-view .hero-d-close { position: absolute; left: 30px; top: 30px; right: auto; cursor: pointer; } .weapon-silder { left: 150px; top: 100px; position: absolute; } .weapon-silder>.swiper-container { width: 775px; height: 900px; } .weapon-silder .swiper-slide { position: relative; cursor: grab } .weapon-silder .weapon-silder-item { background: url('../img/nft/weapon/wpbg@2x.png') no-repeat center center; width: 775px; height: 331px; transform: scale(.5); transition: all .3s ease 0s; opacity: 0.5; } .weapon-silder .swiper-slide-active .weapon-silder-item { transform: scale(1); opacity: 1; } .swiper-nested-1 { width: 775px; height: 331px; } .swiper-nested-1 .swiper-slide { display: flex; flex-flow: column; justify-content: center; align-items: center; } .weapon-silder .weapon-silder-item .prev, .weapon-silder .weapon-silder-item .next { position: absolute; top: 50%; z-index: 20; margin-top: -20px; display: none; cursor: pointer; } .weapon-silder .weapon-silder-item .prev { left: 20px; } .weapon-silder .weapon-silder-item .next { right: 20px; } .weapon-silder .swiper-slide-active .weapon-silder-item .prev, .weapon-silder .swiper-slide-active .weapon-silder-item .next { display: block; } @media screen and (max-width:1919px){ .header-top{ background: url('../img/home/navbg1.png') repeat-x left -4px; height: 68px; } .header-top .header-top-logo img{ height: 40px; } .nav a{ font-size: 20px; height: 57px; line-height: 58px; } .login{ margin-top: 14px; } .login img{ height: 30px; } .market{ margin-top: 19px; } .market img{ height: 20px; } .hero-d-p{ left:-20%; } .hero-d-jx { right: 5%; } .hero-d-data { right: 12%; } }