@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: 760px; margin: 0px auto; position: relative; } .header { position: relative; overflow: hidden; } .header-top { background: url('../imgMobile/home/navBg.png') repeat-x left -2px; height: 59px; position: absolute; z-index: 8; top:0px; left: 0px; width: 100%; } .header-top-logo { margin-left: 30px; margin-top: 5px; float: left; } .nav { background: url('../imgMobile/home/menubg@2x.png') no-repeat center top; position: absolute; top: 49px; z-index: 9; width: 100%; padding-bottom: 30px; display: none; left: 0px; } .nav a { font-family: 'na-he'; font-size: 22px; color: #fffefe; display: block; text-align: center; padding: 15px 0; } .market { margin-top: 12px; margin-right: 30px; } .login { margin-top: 12px; margin-right: 30px; } .logout{ color: white; line-height: 24px; font-weight: bold; display: none; } .header-lh { position: absolute; width: 100%; right:-25%; bottom:-24%; z-index: 6; } .header-adv { position: absolute; width: 80%; top:12%; left: 5%; } .download-btns { position: absolute; bottom: 30px; left:0; z-index: 10; display: flex; flex-flow: row nowrap; width: 100%; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 0 10px; } .download-btns a { flex: 1; margin: 0 5px; } .content { background: url('../imgMobile/home/tbg@2x.png') no-repeat center -241px; overflow: hidden; } .content-f1 { text-align: center; color: #033465; padding: 0 20px; } .content-f1 h3 { font-size: 26px; padding-top: 20px; letter-spacing: 2px; } .content-f1 p { font-size: 17px; margin-top: 15px; letter-spacing: 2px; } .content-f2 { margin: 28px auto 0; display: flex; flex-flow: row wrap; justify-content: center; } .content-f2-item { width: 40%; text-align: center; margin: 10px 8px 0; } /* .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: 100%; margin: 20px auto; } .content-f3-item { margin-bottom: 10px; position: relative; } .content-f3-item img{ width: 100%; } .content-f3-item-txt { margin-right: 10px; position: absolute; top:8px; left:42%; } .content-f3-item-txt h3 { margin-bottom: 0px; font-size: 20px; } .content-f3-item-txt h5 { color: #154678; margin: 2px 0; line-height: 14px; font-size: 12px; } .content-f3-item-txt p { color: #6186aa; font-size: 12px; line-height: 14px; } .content-f3-item2 { } .banner { position: relative; } .swiper-container { } .swiper-container img{ width: 100%; } .pagination { position: absolute; z-index: 20; left: 10px; bottom: 10px; } span.swiper-pagination-bullet { display: inline-block; width: 10px; height: 10px; border-radius: 10px; background: #fff; margin-right: 10px; opacity: 0.8; border: 1px solid #fff; cursor: pointer; } .swiper-visible-switch { background: #fff; } .swiper-pagination-bullet-active { background: #222 !important; } .nft-btn { bottom: 40px; left: 0px; position: absolute; z-index: 20; } .nft-btn img{ height: 30px; } .inve { background: url("../imgMobile/home/inve.png") repeat center top; text-align: center; overflow: hidden; } .inve h3 { font-size:34px; color: #fff; margin-bottom: 30px; margin-top: 30px; } .inve h3:first-child { margin-top: 40px; } .inve p{ display: flex; flex-flow: row wrap; align-items: center; justify-content: center; padding-bottom: 20px; } .inve p a { vertical-align: middle; margin: 15px 15px; display: inline-block; width: 35%; } .inve p a img{ width: 100%; } .join { background-image: linear-gradient(to right, #abe8ad,#34eecc); } .join-inner{ width: 95%; height: 40px; margin: 0 auto; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; color: #25486b; font-size: 20px; } .join a { margin-left: 15px; } .join a img{ height: 20px; } .join a:hover { transform: scale(1.1); } .footer { background: url('../imgMobile/home/ftbg.png') repeat left top; position: relative; } .footer-inner { font-family: "na-he"; max-width: 760px; margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: space-between; padding: 0 8px 40px; } .footer-inner dl { line-height: 25px; padding-top: 20px; } .footer-inner dl dt { font-size: 16px; color: #fffefe; } .footer-inner dl dd { font-size: 12px; color: #9b9b9b; } .footer-inner dl dd a { transition: color .3s ease 0s; } .footer-inner dl dd a:hover { color: #fff; } .footer-bottom { font-size: 12px; color: #b4b4b4; text-align: center; width: 100%; padding-bottom: 20px; } /* ========gamePlay========== */ .gameplay-content { background: url('../imgMobile/game play/topbg@2x.png') no-repeat center -1px; padding-top: 30px; padding-bottom: 20px; } .gameplay-header { background: url('../imgMobile/game play/gpbg@2x.png') no-repeat center center; } .gameplay-video { width: 100%; margin: 60px auto 0px; } .gameplay-content-f3{ text-align: center; position: relative; background: url('../imgMobile/game play/ibg.png') repeat-y left top #fff; background-size: 80% auto; width: 80%; margin: 0 auto 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 20px 30px 20px 30px; } .gameplay-img{ padding-bottom: 5px; width: 90%; margin: 0 auto; } .gameplay-content-f3 .gameplay-content-f3-txt{ padding: 30px 10px; } .gameplay-content-f3 .gameplay-content-f3-txt h3 { margin-top: 5px; margin-bottom: 5px; font-size:27px; color: #25486b; line-height: 27px; } .gameplay-content-f3 .gameplay-content-f3-txt p { font-size: 14px; color: #6186aa; } .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('../imgMobile/TOKENOMIC/01/tcbg.png') no-repeat center top; padding-top: 20px; } .tokenomic-tab { border: 3px solid #1e8581; height: 40px; position: relative; border-radius: 25px; margin: 0 4px; } .tokenomic-tab-inner { background: url('../imgMobile/TOKENOMIC/01/tckbg@2x.png') no-repeat center top; height: 38px; margin: 1px 1px; display: flex; flex-flow: row nowrap; justify-content: space-between; border-radius: 25px; } .tokenomic-tab-inner li { text-align: center; line-height: 38px; font-size: 14px; color: #fff; cursor: pointer; flex:1; border-radius: 25px; overflow: hidden; -webkit-tap-highlight-color:transparent; } .tokenomic-tab-inner li.cur{ background-image: linear-gradient(to right, #3bc7c4,#229299); } .tokenomic-p-item { display: none; } .tokenomic-p-wrap .cur { display: block; } .tokenomic-p-item-txt { margin: 0 10px; padding-top: 20px; display: flex; flex-flow: row wrap; } .tokenomic-p-item-txt li { width: 50%; line-height: 20px; } .tokenomic-p-item-txt h5 { font-size: 12px; color: #b7b7b7; } .tokenomic-p-item-txt h3 { font-size: 14px; color: #FFFFFF; } .tokenomic-p-item-txt h4 { font-size: 12px; color: #00ffc9; padding: 4px 0; } .tokenomic-p-item-txt h4 img { vertical-align: middle; } .tokenomic-p-tit { text-align: center; padding-top: 40px; color: #fff; } .tokenomic-p-tit img{ height: 20px; } .tokenomic-p-con { padding: 20px 0 50px; text-align: center; } /* ==========team=============== */ .team-header { background: url('../imgMobile/TEAM/teambg@2x.png') no-repeat center 0; height: auto; padding-bottom: 40px; } .team-tit { text-align: center; padding-top: 80px; } .team-item { margin: 20px 20px 0; } .team-item h3 { font-size: 24px; color: #fff; padding-bottom: 8px; } .team-item h3 span { font-size: 16px; color: #072d48; } .team-item p { font-size: 18px; color: #343434; padding: 10px; line-height: 24px; background:rgba(255,255,255,0.2); position: relative; } .team-item p::after{ position: absolute; background: url("../imgMobile/TEAM/dian.png") no-repeat center center; width: 10px; height: 10px; content: ""; right: 0; top:-10px } /* ========roadmap========== */ .roadmap-header { background: url('../imgMobile/ROADMAP/roadbg@2x.png') no-repeat center top; height: auto; } .roadmap { padding-top: 80px; } .roadmap-con { display: flex; flex-flow: row wrap; align-items: center; justify-content: center; margin: 20px 20px 40px; border: 4px solid #f8f8f8; border-radius: 30px 20px; padding: 20px 0; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .roadmap-con img{ width: 90%; } /* ============nft================ */ .nft-header { /* background: url('../img/nft/hero/nftti@2x.png') no-repeat center top; */ /* height: 838px; */ } .nft-con { background: url('../img/nft/hero/nftbg@2x.jpg') repeat-y center top; min-height: 500px; overflow: hidden; } .nft-hero-t { margin: 30px 10px 0; position: relative; } .nft-hero-t a { position: absolute; right: 4px; top: 0px; height: 100%; display: flex; flex-flow: row; align-items: center; } .nft-hero-t a img { height: calc(100% - 6px); } .nft-hero-c { display: flex; flex-flow: row wrap; justify-content: center; padding-left: 4px; padding-top: 14px; } .nft-hero-c a { position: relative; width: 23%; z-index: 1; } .nft-hero-c a img{ width: 100%; } .nft-hero-c a:hover { transform: scale(1.1); z-index: 2; } .weapon-item-c{ justify-content: flex-start; padding-left: 14px; } .weapon-item-c a { margin-right: 5px; width: 48%; } .chip-con { padding: 50px 0 100px; text-align: center; } .chip-con img{ width: 50%; } .chip-t { font-size: 36px; 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: auto; } .desc-wrap .desc-close { position: absolute; right: 10px; top: 10px; cursor: pointer; -webkit-tap-highlight-color:transparent; } .desc-inner { background: url('../imgMobile/nft/hero/layerbg@2x.png') no-repeat center top; background-size: 100% auto; width: 375px; height: 600px; margin: 60px auto 0; position: relative; box-sizing: border-box; } .chip-inner { background: url("../imgMobile/nft/chip/chip-layer-bg@2x.png") no-repeat center top; background-size: 100% auto; height: 310px; } .desc-inner h3 { color: #1e3b4e; font-size: 28px; padding: 20px 20px 5px; font-weight: bold; } .weapon-inner h3{ padding-bottom: 0px; } .desc-inner p { color: #1e3b4e; font-size: 16px; padding: 0 20px; } .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% + 26px); width: calc(100%); overflow-y: auto; } .hero-d-layer-con { margin: 60px auto 0; position: relative; } .weapon-view .hero-d-layer-con { background: url('../imgMobile/nft/weapon/weapbg@2x.png') no-repeat center top; background-size: 100% auto; } .hero-d-close { position: absolute; right: 0px; top: 8px; cursor: pointer; z-index: 12; -webkit-tap-highlight-color:transparent; } .hero-d-p { position: absolute; bottom: 0px; right: 0; width: 100%; height: 100%; overflow: hidden; text-align: center; overflow: hidden; } .hero-d-p img{ height: 140%; margin-left: -20%; } .hero-d-jx { width: 80%; position: absolute; bottom: -5px; left: 0px; } .hero-d-jx img{ width: 100%; } .weapon-view .hero-d-jx { background: url('../img/nft/weapon/hjx@2x.png') no-repeat center top; top: 155px; } .hero-d-data { position: absolute; left: 15px; bottom: 2px; width: 50%; } .hero-d-data img{ width: 100%; } .weapon-view .hero-d-data{ position: static; text-align: center; width: 100%; padding: 10px 0; } .weapon-view .hero-d-data img{ height: 145px; width: auto; } .weapon-view .hero-d-close { position: absolute; left: 10px; top: 10px; right: auto; cursor: pointer; } .weapon-silder { padding-top: 10px; } .weapon-silder>.swiper-container { width: 80%; height: 380px; } .weapon-silder .swiper-slide { position: relative; cursor: grab } .weapon-silder .weapon-silder-item { background: url('../imgMobile/nft/weapon/wpbg@2x.png') no-repeat center center; background-size: auto 100%; width: 100%; height: 100%; transform: scale(.7); 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: 80%; height: 100%; } .swiper-nested-1 .swiper-slide { display: flex; flex-flow: column; justify-content: center; align-items: center; } .swiper-nested-1 .swiper-slide img{ width: 70%; } .weapon-silder .weapon-silder-item .prev, .weapon-silder .weapon-silder-item .next { position: absolute; top: 50%; z-index: 20; margin-top: -10px; display: none; cursor: pointer; } .weapon-silder .weapon-silder-item .prev img, .weapon-silder .weapon-silder-item .next img{ width: 14px; } .weapon-silder .weapon-silder-item .prev { left: 18px; } .weapon-silder .weapon-silder-item .next { right: 18px; } .weapon-silder .swiper-slide-active .weapon-silder-item .prev, .weapon-silder .swiper-slide-active .weapon-silder-item .next { display: block; } /* @media screen and (min-width:1919px){ .header-top{ background: url('../img/home/navbg1.png') repeat-x left -4px; height: 132px; } .nav a{ font-size: 30px; } } */