@font-face {font-family: montserrat;src: url('montserrat.woff2') format('woff2');}

/* basic */
* {font-family: montserrat !important;}
body,
load {background-color: var(--111);}
h1,h2,h3,h4,h5,h6 {font-weight: normal;}
.main {max-width: 1600px;}

load::after {background: url(../images/ico.svg) center no-repeat;animation: 1s load infinite;}
@keyframes load {
    0% {transform: rotateY(0);}
    100% {transform: rotateY(360deg);}}

/* color */
:root {
    --color: #DDFF00;
    --deep: #7CC200;
    --lg: linear-gradient(45deg,var(--color),var(--deep));
}

/*ico*/
.ico-lv1 {background-image: url(../images/level/1.png);}
.ico-lv2 {background-image: url(../images/level/2.png);}
.ico-lv3 {background-image: url(../images/level/3.png);}
.ico-lv4 {background-image: url(../images/level/4.png);}
.ico-lv5 {background-image: url(../images/level/5.png);}

.ico-wallet-binancechain {background-image: url(../images/wallet/binancechain.svg);}
.ico-wallet-metamasck {background-image: url(../images/wallet/metamasck.svg);}
.ico-wallet-safepalwallet {background-image: url(../images/wallet/safepalwallet.svg);}
.ico-wallet-trustwallet {background-image: url(../images/wallet/trustwallet.svg);}
.ico-wallet-wanetconnect {background-image: url(../images/wallet/wanetconnect.svg);}

/*swiper*/
.swiper-pagination-bullet {background-color: var(--fff-5);}

/* btn */
.btn {background-image: var(--lg);color: var(--333);font-weight: bold;border-radius: 3px;}
.btn-submit {width: 200px;margin: 20px auto;}

/* head */
.head {height: 80px;position: relative;z-index: 3;border-bottom: 1px var(--fff-1) solid;}
.logo {width: 170px;height: 100%;background-image: url(../images/logo.svg);}

.head-cont {height: 100%;}
.head-other .btn {height: 40px;}
.head-other hop {margin-right: 10px;}
.head-other hop > a {width: 30px;height: 30px;line-height: 30px;border-radius: 100%;color: var(--deep);font-size: 30px;min-width: inherit;}
.head-other hop-cont {top: 50px !important;}
.head-other hop-cont a:hover {background-color: var(--333);color: white;}

.color {}

/* menu */
menu {}
menu x {color: var(--color);}
menu-cont {}
menu-cont li {width: 150px;}
menu-cont li > a {color: white;font-size: 16px;border-bottom: 2px transparent solid;margin: 0 20px;line-height: 80px;height: 80px;}
menu-cont li > a:hover,
menu-cont li > a.active {color: var(--color);border-color: var(--color);}
menu-group a:hover {background-image: var(--lg);}


/*banner*/
.banner {height: 800px;background-image: url(../images/banner.jpg);background-size: cover;max-width: 2560px;margin: auto;}
.banner .main {display: flex;height: 100%;align-items: center;}
.banner-cont {animation-delay: 1s;}
.banner-cont > * {margin: 30px 0;}
.banner-cont h2 {font-size: 90px;position: relative;z-index: 1;color: var(--color);text-transform: uppercase;white-space: nowrap;font-weight: bold;}
.banner-cont h2::before {content: attr(data);position: absolute;top: 0;left: 0;color: black;z-index: -1;margin: 5px;}
.banner-cont h2::after {content: attr(data);position: absolute;top: 0;left: 0;z-index: -2;-webkit-text-stroke: 2px var(--color);text-stroke: 2px var(--color);margin: 5px;}

.banner-cont h3 {color: white;font-size: 50px;}
.banner-cont h5 {color: var(--666);font-size: 20px;}
.banner-cont a {display: inline-block;padding: 0 40px;}

/*dapp*/
.dapp {padding: 30px 0;}
.dapp-title {padding: 50px 0;display: flex;align-items: center;}
.dapp-title h3 {color: white;font-size: 36px;}
.dapp-title span {font-size: 16px;color: var(--666);display: block;padding-top: 20px;}
.dapp-link {overflow: hidden;margin: 20px 0;}
.dapp-link a {display: block;line-height: 50px;float: left;margin: 5px;padding: 0 30px;background-color: var(--222);color: white;text-transform: capitalize;border-radius: 3px;}
.dapp-link a:hover,
.dapp-link a.active {background-image: var(--lg);color: var(--333);}
.dapp-list {padding: 20px 0;}
.dapp-list li {width: 33.33%;float: left;padding: 10px;}
.dapp-list li a {background-color: var(--222);display: block;border-radius: 10px;overflow: hidden;}
.dapp-list li a em {display: block;width: 100%;height: 210px;overflow: hidden;}
.dapp-list li a:hover em img {transform: scale(1.1);}
.dapp-list li a:hover h5 {color: var(--color);}
.dapp-txt {padding: 20px;}
.dapp-txt h5 {color: white;font-size: 20px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin: 10px 0;height: 25px;}
.dapp-txt p {margin: 10px 0;line-height: 25px;height: 75px;overflow: hidden;color: var(--666);}
.dapp-txt span {margin: 10px 0;color: var(--color);text-align: right;display: block;text-transform: uppercase;}

/*search*/
.search {width: 400px;border: 2px var(--333) solid;height: 60px;display: flex;align-items: center;border-radius: 100px;padding: 0 20px;}
.search input {color: var(--color);font-size: 18px;}
.search a {color: var(--color);font-size: 32px;}

/*grow*/
.grow {display: flex;}
.grow-cont {flex: 1;text-align: center;}
.grow-title {padding: 20px 0;}
.grow-title h3 {color: var(--color);font-size: 40px;padding-bottom: 10px;}
.grow-title span {color: white;font-size: 20px;}
.grow-project {}
.grow-project li {margin: 30px 0;background-color: var(--222);padding: 40px;border-radius: 10px;}
.grow-project li:hover {background-color: var(--333);}
.grow-project li .btn {font-size: 18px;display: inline-block;margin-bottom: 30px;}
.grow-project li span {display: block;color: white;}
.grow-list {width: 520px;margin-left: 100px;}
.grow-list li {display: flex;align-items: center;padding: 25px 0;border-radius: 10px;}
.grow-list li i {width: 80px;height: 80px;display: block;margin: 0 30px;}
.grow-list a:nth-child(1) i {background-image: url(../images/grow/1.png);}
.grow-list a:nth-child(2) i {background-image: url(../images/grow/2.png);}
.grow-list a:nth-child(3) i {background-image: url(../images/grow/3.png);}
.grow-list a:nth-child(4) i {background-image: url(../images/grow/4.png);}
.grow-list li h5 {color: white;font-size: 20px;flex: 1;}
.grow-list li h5 span {color: var(--666);display: block;padding-top: 20px;font-size: 14px;}
.grow-list li:hover {background-color: var(--222);}
.grow-list li:hover i {transform: rotateY(180deg);}
.grow-list li:hover b {color: var(--color);}

/*hot*/
.hot {}
.hot .swiper-wrapper {margin-bottom: 40px;}
.hot .swiper-slide {width: 1200px;height: 400px;border-radius: 10px;overflow: hidden;}
.hot .swiper-slide span {position: absolute;bottom: 0;left: 0;width: 100%;padding: 10px;color: white;background-color: var(--000-5);opacity: 0;}
.hot .swiper-slide-active span {opacity: 1;}

/*news*/
.news {padding: 50px 0;}
.news .swiper-wrapper {padding-bottom: 50px;}
.news .swiper-slide {background-color: var(--222);overflow: hidden;border-radius: 10px;}
.news .swiper-slide em {height: 240px;overflow: hidden;display: block;}
.news .swiper-slide h5 {color: white;margin: 20px;line-height: 25px;height: 50px;overflow: hidden;}
.news .swiper-slide span {margin: 20px;color: var(--666);display: block;}
.news .swiper-button-next,
.news .swiper-button-prev {position: static;margin: 0;}
.news .swiper-slide:hover em img {transform: scale(1.1);}
.news .swiper-slide:hover h5 {color: var(--color);}

/* title */
.title {text-align: left;padding: 50px 0;}
.title i {font-size: 48px;color: var(--color);margin-right: 10px;}
.title h3 {color: white;font-size: 36px;}

/* foot */
.foot {border-top: 1px var(--fff-1) solid;margin-top: 120px;}
.foot-cont {padding: 40px 0;display: flex;align-items: center;}
.foot-logo {width: 260px;height: 80px;background-image: url(../images/logo.svg);}
.foot-list {flex: 1;display: flex;margin: 0 100px;}
.foot-list li {flex: 1;}
.foot-list li h5 {color: white;font-size: 18px;margin-bottom: 20px;}
.foot-list li a {display: block;line-height: 200%;color: var(--666);}
.foot-list li a:hover {color: white;}
.foot-sns {text-align: center;flex: 1;}
.foot-sns a {margin: 20px;}
.foot-sns a i {font-size: 32px;color: var(--color);display: inline-block;margin-right: 5px;}
.foot-sns a span {color: white;}
.foot-sns a:hover i {transform: rotate(360deg);}
.foot-copy {color: white;text-align: center;text-transform: uppercase;padding: 20px 0;border-top: 1px var(--fff-1) solid;}
.foot-copy a {color: white;}
.foot-copy a:hover {color: var(--color);}

/* crumb */
crumb {padding: 10px 0;color: var(--666);text-transform: capitalize;}
crumb li a {color: var(--666);}
crumb li a:hover {color: white;}

/* frame */
.subject {display: flex;padding: 30px 0;}
.contant {flex: 1;min-width: 0;}
.sider {width: 300px;}
.sider:first-child {margin: 0 20px 0 0;}
.sider:last-child {margin: 0 0 0 20px;}
.item {background-color: var(--222);border-radius: 10px;padding: 20px;margin-bottom: 20px;}
.item .title {padding: 30px 0;}

.sider-list {}
.sider-list li {margin: 5px 0;}
.sider-list li a {color: white;display: flex;align-items: center;padding: 15px;border-radius: 5px;transition-duration: 0s;}
.sider-list li a i {margin-right: 10px;transition-duration: 0s;}
.sider-list li a span {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;min-width: 0;flex: 1;}
.sider-list li.active a,
.sider-list li:hover a {background-color: var(--222);}
.sider-list li.active a {background-image: var(--lg);color: var(--333);}

.tab-cont {display: none;}
.tab-cont:first-child {display: block;}

.sider-contact {margin-bottom: 20px;}
.sider-contact h5 {color: white;}
.sider-contact h5 i {margin-right: 10px;}
.sider-contact h5 span {flex: 1;}
.sider-contact li {margin: 10px 0;padding-left: 35px;}
.sider-contact li a {color: var(--color);font-size: 16px;}


/*game*/
.game {}
.game-sider {position: fixed;width: 300px;}
.game-sider .btn {margin-bottom: 10px;}
.game-sider .btn-flex .btn {background-color: var(--222);background-image: none;color: white;}
.game-sider .btn-flex .btn:hover {background-color: var(--333);}
.game-sider .btn-flex .btn:not(:last-child) {margin-right: 10px;}

.game-title {padding-bottom: 15px;border-bottom: 1px var(--fff-1) solid;}
.game-title h3 {color: white;}

.game-info {display: flex;}
.game-info .avatar {width: 150px;height: 100px;border-radius: 20px;}
.game-info-cont {padding: 0 20px;}
.game-info-cont h3 {font-size: 32px;color: white;padding-bottom: 10px;}
.game-info-cont drop {background-color: var(--333);color: white;border-radius: 5px;width: 200px;}
.game-info-cont drop a {color: white;}
.game-info-cont drop-list {background-color: var(--333);border-radius: 5px;overflow: hidden;}
.game-info-cont drop-list li {border-color: var(--fff-1);}
.game-info-cont drop-list li a:hover {background-color: var(--fff-1);}

.game-trad {display: flex;}
.game-trad-cont {flex: 1;}
.game-trad .swiper {width: 520px;}
.game-trad .swiper-wrapper {margin: 30px 0;}
.game-trad .swiper-slide {height: 120px;border-radius: 5px;overflow: hidden;}

.game-sns {margin: 10px 0;}
.game-sns a {background-color: var(--333);color: var(--999);border-radius: 100%;display: inline-block;margin: 5px;width: 40px;height: 40px;line-height: 40px;}
.game-sns a:hover {background-color: white;color: var(--333);z-index: 3;}

.game-tab {}
.game-tab tab-list {margin: 20px 0;}
.game-tab tab-list li a {color: white;padding: 10px 20px;border-radius: 5px;text-transform: uppercase;font-weight: normal;}
.game-tab tab-list li.active a {background-color: var(--333);}

.game-data ul {display: flex;align-items: center;}
.game-data li {flex: 1;padding: 10px;}
.game-data li a {padding: 10px 20px;display: block;background-color: var(--333);border-radius: 10px;}
.game-data li a > * {margin: 10px 0;}
.game-data li span {color: var(--666);text-transform: capitalize;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.game-data li h4 {color: white;text-transform: uppercase;}
.game-data li b {display: block;font-weight: normal;}

.game-wax {padding: 20px 0;}
.game-wax li {width: 20%;float: left;text-align: center;}
.game-wax li em {width: 100px;height: 100px;margin: auto;}
.game-wax li span {color: white;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 10px 0;display: block;}
.game-wax li h5 {color: white;font-size: 20px;}
.game-wax li:hover em {transform: rotate(360deg);}

.game-chart {height: 300px;}

.game-suggest {padding: 20px 0;}
.game-suggest li {float: left;width: 12.5%;text-align: center;padding: 10px;}
.game-suggest li a em {width: 100px;height: 100px;margin: auto;border-radius: 20px;overflow: hidden;display: block;}
.game-suggest li a h6 {color: white;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 10px 0;}
.game-suggest li a span {display: flex;align-items: center;justify-content: center;color: white;text-transform: capitalize;}
.game-suggest li a span i {width: 20px;height: 20px;border-radius: 100%;overflow: hidden;display: block;margin-right: 5px;}
.game-suggest li a:hover em img {transform: scale(1.1);}
.game-suggest li a:hover h6 {color: var(--color);}

.game-news li {width: 25%;}
.game-news li a em {width: 100%;height: 150px;}
.game-news li a span {color: var(--666);justify-content:flex-start;}

.game-table table {background-color: transparent;color: var(--999);}
.game-table table b {font-weight: normal;}
.game-table table a {color: white;}
.game-table table a:hover {color: var(--color);}
.game-table table thead .ico-alone-bottom.active {transform: rotate(180deg);}
.game-table table thead td {font-weight: normal;}
.game-table table tbody tr:hover,
.game-table table tbody tr:nth-child(2n) {background-color: transparent;}
.game-table table tbody td {border-bottom: 1px var(--fff-1) solid;}
.game-table table td:first-child {text-align: left;}
.game-table table td:first-child span.center {justify-content: flex-start;}
.game-table table td {padding: 10px;}
.game-table table td .avatar {width: 50px;height: 50px;float: left;margin-right: 10px;}
.game-table table td h6 {white-space: nowrap;padding: 4px 0;}
.game-table table td span.center i {width: 20px;height: 20px;border-radius: 100%;overflow: hidden;margin-right: 5px;}
.game-table table td cite {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100px;display: inline-block;vertical-align: middle;padding: 0 10px;}
.game-table table td progress {margin: 0 10px;}

/*article*/
article {color: var(--999);}
article > * {margin: 10px 0;}
article a {color: white;}
article ul {padding-left: 20px;}
article li {line-height: 200%;list-style: disc;}
article table {width: 100%;text-align: center;}
article table td {padding: 10px;border-bottom: 1px var(--333) solid;}
article table thead td {border-color: var(--fff);}
article img {margin: auto;display: block;}

.article {}
.article-title {text-align: center;padding: 20px 0;}
.article-title h3 {font-size: 30px;color: white;padding: 20px 0;border-bottom: 1px var(--fff-1) solid;margin-bottom: 20px;}
.article-title span {color: var(--666);}
.article-cont {}
.article-page {display: flex;align-items: center;justify-content: center;}
.article-page a {display: block;color: var(--666);padding: 10px 20px;background-color: var(--222);border-radius: 5px;}
.article-page a i,
.article-page a span {vertical-align: middle;}
.article-page a:last-child i {float: right;}
.article-page a:hover {background-color: white;color: var(--333);}

/*tag*/
.tag {overflow: hidden;}
.tag a {float: left;display: block;margin: 5px;padding: 5px 15px;border-radius: 100px;background-color: var(--333);color: var(--999);text-transform: capitalize;}
.tag a:hover {background-color: var(--666);color: white;}

/* page */
page {padding: 30px 0;color: var(--999);}
page button,
page a {background-color: var(--333);color: white;}
page input {border-color: var(--333);color: white;}
page button:hover,
page a:hover,
page a.active {color: var(--333);}

/*subscribe*/
.subscribe {margin: 30px 0;}
.subscribe-cont {background-image: var(--lg);border-radius: 10px;padding: 60px;display: flex;align-items: center;}
.subscribe-cont h3 {font-size: 30px;}
.subscribe-cont form {display: flex;width: 40%;}
.subscribe-cont input {background-color: white;border-radius: 3px;flex: 1;}
.subscribe-cont button {margin: 0 10px;}

/*form*/
.form-wide {}
.form-wide li {display: block;color: white;overflow: hidden;}
.form-wide li span:first-child {width: 100%;line-height: normal;}
.form-wide li cite {color: var(--999);line-height: normal;}
.form-wide li input,
.form-wide li select,
.form-wide li textarea {background-color: var(--333);color: white;}
.form-wide li textarea {height: auto;}
.form-wide li sub {font-size: 20px;color: var(--red);line-height: 0;}

/*notice*/
.notice fold-title {color: white;border-bottom-color: var(--333);}

/*step*/
.step {}
.step li {margin: 20px 0;}
.step li i {margin: 0 40px;font-size: 36px;}
.step li i.ico-radio-done {color: var(--color);}
.step-cont {flex: 1;background-color: var(--333);padding: 30px;border-radius: 10px;}
.step-cont h5 {color: white;margin-bottom: 10px;}
.step-input input {flex: 1;background-color: var(--222);margin-right: 10px;color: white;}

/*level*/
.level {display: flex;align-items: center;padding: 30px 0;}
.level li {flex: 1;}
.level li em {width: 80px;height: 80px;display: block;margin: auto;}
.level li span {padding-top: 10px;}
.level li.active {transform: scale(1.2);}
.level li.mono {opacity: .5;}
.level-cont i {color: var(--color);margin: 0;}

/*team*/
.team {}
.team-referrals {display: flex;align-items: center;}
.team-referrals li {padding: 10px;flex: 1;}
.team-referrals li a {background-color: var(--333);display: flex;align-items: center;padding: 30px;border-radius: 10px;}
.team-referrals li a span {flex: 1;color: white;font-size: 18px;}
.team-referrals li a h4 {font-size: 24px;color: var(--color);}

/*invite*/
.invite {padding: 40px;}
.invite h4 {text-align: center;color: white;font-size: 20px;padding: 50px 0;}
.invite-addrss input {flex: 1;color: white;background-color: var(--333);margin-right: 10px;}
.invite-img {display: block;text-align: center;}
.invite-img img {border-radius: 20px;}

/*wallet*/
.wallet {}
.wallet-list {padding: 10px;}
.wallet-list li {width: 33.33%;float: left;padding: 10px;}
.wallet-list li a {display: block;text-align: center;background-color: var(--000-1);border-radius: 10px;padding: 30px 0;}
.wallet-list li a i {width: 80px;height: 80px;display: block;margin: 0 auto 20px;}
.wallet-list li a span {font-size: 16px;}













.light .banner-cont h3,
.light menu-cont li a,
.light .dapp-title h3,
.light .dapp-txt h5,
.light .dapp-link a,
.light .search input,
.light .grow-title h3,
.light .grow-project h5,
.light .grow-project li span,
.light .grow-list li h5,
.light .recommend h3,
.light .news .swiper-slide h5,
.light .title h3,
.light .foot-list li h5,
.light .foot-list li a,
.light .foot-copy,
.light .foot-copy a,
.light .article-title h3,
.light article,
.light article a,
.light .game-title h3,
.light .game-info-cont h3,
.light .game-info-cont drop a,
.light .game-data li h4,
.light .game-wax li span,
.light .game-wax li h5,
.light .game-suggest li a h6,
.light .game-table table,
.light .game-table table a,
.light .sider-list li a,
.light .sider-contact h5,
.light .form-wide li,
.light .notice fold-title,
.light .step-cont h5,
.light .step-input input,
.light .team-referrals li a span,
.light .invite h4,
.light .invite-addrss input
{color: var(--333);}

.light menu x,
.light .banner-cont h2,
.light .dapp-list li a:hover h5,
.light .dapp-txt span,
.light .search a,
.light .title i,
.light .news .swiper-button-next,
.light .news .swiper-button-prev,
.light .foot-list li a:hover,
.light .foot-sns a,
.light .foot-copy a:hover,
.light crumb li a:hover,
.light .game-table table a:hover,
.light .sider-contact li a,
.light .step li i.ico-radio-done,
.light .level-cont i,
.light .team-referrals li a h4,
.light .grow-list li:hover b
{color: var(--deep);}

.light,
.light load {background-color: white;}
.light .head {border-bottom-color: var(--eee);}
.light .logo {height: 100%;background-image: url(../images/logo-black.svg);}
.light .banner-cont h2::after {-webkit-text-stroke: 2px var(--deep);text-stroke: 2px var(--deep);}
.light menu-cont li a:hover,
.light menu-cont li a.active {color: var(--deep);border-color: var(--deep);}
.light .banner {background-image: url(../images/banner-white.jpg);}
.light .banner-cont h2::before {color: white;}
.light .dapp-link a {background-color: var(--f7);}
.light .dapp-list li a {background: var(--f7);}
.light .dapp-txt span,
.light .search {border-color: var(--eee);}
.light .grow-title span {color: var(--ccc);}
.light .grow-project li {background-color: var(--f7);}
.light .grow-project li:hover {background-color: var(--eee);}
.light .recommend {background-color: var(--f7);background-image: url(../images/hand-white.png);}
.light .news .swiper-slide {background-color: var(--f7);}
.light .swiper-pagination-bullet {background-color: var(--ccc);}
.light .swiper-pagination-bullet-active {background-color: var(--deep);}
.light .foot {border-top-color: var(--eee);}
.light .foot-logo {background-image: url(../images/logo-black.svg);}
.light page button,
.light page a,
.light page a {background-color: var(--f7);color: var(--333);}
.light page button:hover,
.light page a:hover,
.light page a.active {background-color: var(--deep);}
.light page input {border-color: var(--eee);color: var(--333);}
.light .item {background-color: var(--f7);}
.light .article-title h3,
.light article table thead td,
.light article table td {border-bottom-color: var(--ddd);}
.light .article-page a {background-color: var(--f7);}
.light .article-page a:hover {background-color: var(--eee);}
.light .game-sider .btn-flex .btn {background-color: var(--f7);color: var(--333);}
.light .game-info-cont drop {background-image: var(--lg);}
.light .game-info-cont drop-list {background-color: white;}
.light .game-info-cont drop-list li a:hover {background-color: var(--eee);}
.light .tag a,
.light .game-sns a {background-color: var(--eee);color: var(--333);}
.light .tag a:hover,
.light .game-sns a:hover {background-color: var(--deep);}
.light .game-tab tab-list li a {color: var(--333);}
.light .game-tab tab-list li.active a {background-image: var(--lg);}
.light .game-data li a {background-color: var(--eee);}
.light .game-table table thead td {border-bottom-color: var(--deep);}
.light .sider-list li a:hover {background-color: var(--eee);}
.light .form-wide li input,
.light .form-wide li select,
.light .form-wide li textarea {background-color: var(--eee);color: var(--333);}
.light .notice fold-title {border-bottom-color: var(--eee);}
.light .step-cont {background-color: var(--eee);}
.light .step-input input {background-color: var(--ddd);}
.light .game-table table td progress::-webkit-progress-value {background-color: var(--deep);}
.light .team-referrals li a,
.light .invite-addrss input {background-color: var(--eee);}















@media(max-width:640px){
    /* btn */
    .btn {border-radius: .05rem;}
    .btn-submit {width: 3rem;margin: .3rem auto;}

    /* head */
    .head {height: .8rem;}
    .logo {width: 1.7rem;}
    .head-other .btn {height: .5rem;font-size: .18rem;}
    .head-other hop {margin-right: .1rem;}
    .head-other hop > a {width: .4rem;height: .4rem;line-height: .4rem;font-size: .36rem;}
    .head-other hop-cont {top: .6rem !important;width: auto;}

    /* menu */
    menu + u {display: none;}
    menu-cont li a {font-size: .22rem;border: 0;margin: 0;line-height: .8rem;height: .8rem;color: white !important;}

    /*banner*/
    .banner {height: 5rem;}
    .banner-cont > * {margin: .1rem 0;}
    .banner-cont h2 {font-size: .6rem;}
    .banner-cont h2::before,
    .banner-cont h2::after {margin: .05rem;}

    .banner-cont h3 {font-size: .4rem;}
    .banner-cont h5 {font-size: .2rem;}
    .banner-cont a {padding: 0 .5rem;}

    /*dapp*/
    .dapp {padding: .3rem 0;}
    .dapp-title {padding: .5rem 0;display: block;}
    .dapp-title h3 {font-size: .4rem;}
    .dapp-title span {font-size: .2rem;padding: .2rem 0;}
    .dapp-link {margin: .2rem 0;}
    .dapp-link a {line-height: .6rem;margin: 0 .1rem .1rem 0;padding: 0 .2rem;border-radius: .05rem;}
    .dapp-list {padding: .1rem 0;}
    .dapp-list li {width: 100%;float: none;padding: .1rem;}
    .dapp-list li a {border-radius: .1rem;}
    .dapp-list li a em {height: 2.5rem;}
    .dapp-txt {padding: .2rem;}
    .dapp-txt h5 {font-size: .22rem;margin: .1rem 0;height: .3rem;}
    .dapp-txt p {margin: .1rem 0;line-height: .3rem;height: .6rem;}
    .dapp-txt span {margin: .1rem 0;}

    /*search*/
    .search {width: 100%;height: .8rem;padding: 0 .2rem;}
    .search input {font-size: .22rem;}
    .search a {font-size: .4rem;}

    /*grow*/
    .grow {display: block;}
    .grow-title {padding: .2rem 0;}
    .grow-title h3 {font-size: .4rem;padding-bottom: .1rem;}
    .grow-title span {font-size: .2rem;}
    .grow-project li {margin: .2rem 0;padding: .4rem;border-radius: .1rem;}
    .grow-project li .btn {margin-bottom: .3rem;}
    .grow-list {width: 100%;margin: 0;}
    .grow-list li {margin: .4rem 0;}
    .grow-list li i {width: 1rem;height: 1rem;margin: 0 .3rem;}
    .grow-list li h5 {font-size: .24rem;}
    .grow-list li h5 span {padding-top: .2rem;font-size: .18rem;}

    /*hot*/
    .hot {padding: .1rem;}
    .hot .swiper-wrapper {margin-bottom: .5rem;}
    .hot .swiper-slide {width: 100%;height: 4rem;border-radius: .1rem;}
    .hot .swiper-slide span {padding: .1rem;}

    /*news*/
    .news {padding: 0 .1rem;}
    .news .swiper-wrapper {padding-bottom: .5rem;}
    .news .swiper-slide {border-radius: .1rem;}
    .news .swiper-slide em {height: 3rem;}
    .news .swiper-slide h5 {margin: .2rem;line-height: 150%;height: auto;}
    .news .swiper-slide span {margin: .2rem;}

    /* title */
    .title {padding: .5rem 0;}
    .title i {font-size: .48rem;margin-right: .1rem;}
    .title h3 {font-size: .32rem;}

    /* foot */
    .foot {margin-top: 1.2rem;}
    .foot-cont {padding: .4rem 0;display: block;}
    .foot-logo {width: 3rem;margin: auto;}
    .foot-list {display: block;margin: 0;padding: 10px 0;text-align: center;}
    .foot-list li {padding: 20px 0;}
    .foot-list li h5 {font-size: .28rem;margin: .2rem 0;}
    .foot-sns a {margin: .1rem;}
    .foot-sns a i {font-size: .4rem;margin-right: .1rem;}
    .foot-copy {padding: .2rem 0;}

    /* crumb */
    crumb {padding: .1rem 0;}

    /* frame */
    .subject {display: block;padding: .3rem 0;}
    .sider {width: 100%;margin: 0;}
    .sider:first-child,
    .sider:last-child {margin: 0;}
    .item {border-radius: .1rem;padding: .2rem;margin-bottom: .2rem;}
    .item .title {padding: .4rem 0;}

    .sider-list li {margin: .05rem 0;}
    .sider-list li a {padding: .2rem;border-radius: .05rem;}
    .sider-list li a i {margin-right: .1rem;}

    .sider-contact {margin-bottom: .2rem;}
    .sider-contact h5 i {margin-right: .1rem;}
    .sider-contact li {margin: .2rem 0;padding-left: .45rem;}
    .sider-contact li a {font-size: .22rem;}

    /*game*/
    .game-sider {position: static;width: 100%;}
    .game-sider .btn {margin-bottom: .1rem;}
    .game-sider .btn-flex .btn:not(:last-child) {margin-right: .1rem;}

    .game-title {padding-bottom: .2rem;}

    .game-info {}
    .game-info .avatar {width: 1.6rem;height: 1.3rem;border-radius: .2rem;}
    .game-info-cont {padding: 0 .2rem;}
    .game-info-cont h3 {font-size: .3rem;padding: .1rem 0;}
    .game-info-cont drop {border-radius: .05rem;width: 3rem;}

    .game-trad {display: block;}
    .game-trad .swiper {width: 100%;;}
    .game-trad .swiper-wrapper {margin: .4rem 0;}
    .game-trad .swiper-slide {height: 1.5rem;border-radius: .05rem;}

    .game-sns {margin: .1rem 0;}
    .game-sns a {margin: .05rem;width: .6rem;height: .6rem;line-height: .6rem;}

    .game-tab tab-list {margin: .2rem 0;}
    .game-tab tab-list li a {padding: .2rem;border-radius: .05rem;}

    .game-data ul {display: block;}
    .game-data li {width: 50%;padding: .1rem;float: left;}
    .game-data li a {padding: .1rem .2rem;border-radius: .1rem;}
    .game-data li a > * {margin: .1rem 0;}

    .game-wax {padding: .2rem 0;}
    .game-wax li {width: 33.33%;padding: .1rem;}
    .game-wax li em {width: 1rem;height: 1rem;}
    .game-wax li span {padding: .1rem 0;}
    .game-wax li h5 {font-size: .2rem;}

    .game-chart {height: 3rem;}

    .game-suggest {padding: .2rem 0;}
    .game-suggest li {width: 33.33%;padding: .1rem;}
    .game-suggest li a em {width: 1rem;height: 1rem;border-radius: .2rem;}
    .game-suggest li a h6 {padding: .1rem 0;}
    .game-suggest li a span i {width: .3rem;height: .3rem;margin-right: .1rem;}

    .game-news li {width: 50%;}
    .game-news li a em {width: 100%;height: 1.7rem;}

    .game-table table {min-width: 200vw;}
    .game-table table td {padding: .1rem;}
    .game-table table td .avatar {width: .6rem;height: .6rem;margin-right: .1rem;}
    .game-table table td h6 {padding: .05rem 0;}
    .game-table table td span.center i {width: .3rem;height: .3rem;margin-right: .05rem;}
    .game-table table td cite {width: 1rem;padding: 0 .1rem;}
    .game-table table td progress {margin: 0 .1rem;}

    /*article*/
    article > * {margin: .1rem 0;}
    article ul {padding-left: .2rem;}
    article table td {padding: .1rem;}
    .article-title {padding: .2rem 0;}
    .article-title h3 {font-size: .3rem;padding: .2rem 0;margin-bottom: .2rem;}
    .article-page {display: block;}
    .article-page a {padding: .2rem;border-radius: .1rem;display: flex;margin: 10px 0;}

    /*tag*/
    .tag a {margin: .05rem;padding: .1rem .2rem;}

    /* page */
    page {padding: .3rem 0;}

    /*subscribe*/
    .subscribe {margin: .3rem 0;}
    .subscribe-cont {border-radius: .1rem;padding: .5rem;display: block;}
    .subscribe-cont h3 {font-size: .4rem;margin-bottom: .3rem;}
    .subscribe-cont form {width: 100%;}
    .subscribe-cont input {height: .8rem;}
    .subscribe-cont button {margin: 0 0 0 .1rem;width: 1rem;}

    /*form*/
    .form-wide {}
    .form-wide li {border: 0;}
    .form-wide li span,
    .form-wide li cite {display: block;margin-bottom: .1rem;}
    .form-wide li sub {font-size: .3rem;}

    /*step*/
    .step li {margin: .2rem 0;}
    .step li i {margin: 0 0 0 .2rem;font-size: .4rem;}
    .step-cont {padding: .2rem;border-radius: .1rem;}
    .step-cont h5 {margin-bottom: .1rem;}
    .step-input input {margin-right: .1rem;height: .8rem;}

    /*level*/
    .level {display: block;padding: 0;}
    .level li {margin: .3rem 0;}
    .level li em {width: 1rem;height: 1rem;}
    .level li span {padding-top: .1rem;}

    /*team*/
    .team-referrals {display: block;}
    .team-referrals li {padding: .1rem;}
    .team-referrals li a {padding: .2rem;border-radius: .1rem;}
    .team-referrals li a span {font-size: .22rem;}
    .team-referrals li a h4 {font-size: .3rem;}

    /*invite*/
    .invite {padding: 0;}
    .invite h4 {font-size: .3rem;padding: .3rem 0;}
    .invite-addrss input {margin-right: .1rem;height: .8rem;}
    .invite-img img {border-radius: .2rem;}

    /*wallet*/
    .wallet-list {padding: .1rem;}
    .wallet-list li {width: 50%;padding: .1rem;}
    .wallet-list li a {border-radius: .1rem;padding: .2rem 0;}
    .wallet-list li a i {width: .8rem;height: .8rem;margin: 0 auto .2rem;}
    .wallet-list li a span {font-size: .2rem;}
}