a,
abbr,
acronym,
address,
applet,
big,
blockquote,
body,
caption,
cite,
code,
dd,
del,
dfn,
div,
dl,
dt,
em,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
iframe,
img,
ins,
kbd,
label,
legend,
li,
object,
ol,
p,
pre,
q,
s,
samp,
small,
span,
strike,
strong,
sub,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
tt,
ul,
var {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

a,a:hover,a:active,a:visited,a:link,a:focus{

    -webkit-tap-highlight-color:rgba(0,0,0,0);
   
    -webkit-tap-highlight-color: transparent;
   
    outline:none;
   
    background: none;
   
    text-decoration: none;
   
    }
::selection {
    background-color: transparent;

}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
video {
    display: inline-block
}

[hidden],
audio:not([controls]) {
    display: none
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
video {
    display: inline-block
}

[hidden],
audio:not([controls]) {
    display: none
}

a,
abbr,
acronym,
address,
applet,
big,
blockquote,
body {
    vertical-align: baseline;

}

a,
abbr,
acronym,
address,
applet,
big,
blockquote,
body,
caption {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    font-size: 100%
}

cite,
code,
dd,
del,
dfn,
div,
dl,
dt,
em,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
iframe,
img,
ins,
kbd,
label,
legend,
li,
object,
ol,
p,
pre,
q,
s,
samp,
small,
span,
strike,
strong,
sub,
sup {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    font-size: 100%;
    vertical-align: baseline;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

table {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    font-size: 100%
}

tbody {
    vertical-align: baseline
}

tbody,
td {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    font-size: 100%
}

tfoot {
    vertical-align: baseline
}

tfoot,
th,
thead,
tr,
tt,
ul,
var {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    font-size: 100%
}

thead,
tr,
tt,
ul,
var {
    vertical-align: baseline
}

body {
    line-height: 1
}

ol,
ul {
    list-style: none
}

table {
    border-collapse: separate;
    border-spacing: 0;
    vertical-align: middle
}

caption,
td,
th {
    text-align: left;
    font-weight: 400;
    vertical-align: middle
}

a img {
    border: none
}

a {
    color: #222
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
video {
    display: inline-block
}

[hidden],
audio:not([controls]) {
    display: none
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    font-size: 100%;
    vertical-align: baseline
}

[hidden],
audio:not([controls]) {
    display: none
}

* {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased
}

body {
    -webkit-font-smoothing: auto;
    font: 14px -apple-system, BlinkMacSystemFont, "SegoeUI", Roboto, Ubuntu, "HelveticaNeue", Helvetica, Arial, "PingFangSC", "HiraginoSansGB", "MicrosoftYaHeiUI", "MicrosoftYaHei", "SourceHanSansCN", sans-serif;
    background-color: #210209;
    min-height: 100%;
    position: relative;
    color: #222
}

body {
    width: 7.5rem;
    margin: 0 auto;
}

.btn-back {
    width: .7rem;
    height: .7rem;
    background: url("../images/back.png") center center no-repeat;
    background-size: 100%;
    z-index: 100;
    position: absolute;
    top: .26667rem;
    left: .26667rem
}
.header{
    width:6.94rem;
    margin:0 auto;
    position: relative;
}
.head-img{
    width:6.94rem;

}
.header-top {
    width: 100%;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
  }
  .header-top > img {
    margin: .2rem .2rem;
    width: 1rem;
    height: 1rem;
  }
  .header-top > a >img {
    width: 88%;
    /* height: 1rem; */
    color: #fff;
    font-weight: bold;
    /* margin: 11px 0 16px 28px;  */
    margin: 5px 0 0 5px;
  }
.header-box {
    width: 6.94rem;
    height:4.16rem;
    margin:0.3rem auto 0;
    border-radius: .2rem;
    position: relative;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden
}

.header-box>div:nth-child(1) {
    filter: blur(10px);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

.header-box .game-con {
    position: relative;
    width: 100%;
    height: 100%;
}

.header-box .game-img {
    width: 1.38rem;
    height: 1.38rem;
    position: absolute;
    top: 0.84rem;
    left: .2rem;
    -webkit-transform: translate(0, -45%);
    transform: translate(0, -45%);
    background: url("/images/iconbg.png") center center no-repeat;
    background-size: 100%;
    border:2px solid #fff;
    overflow: hidden;
    border-radius: 0.2rem;
}

.header-box .game-img img {
    width: 2rem;
    height: 2rem;
    position: relative;
    top: 0;
    left: 0;
    border-radius: .26667rem;
    overflow: hidden
}

.header-box .game-intro {
    width:5.32rem;
    position: absolute;
    left: 1.74rem;
    top: 0.86rem;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.header-box .game-intro .star-box {
    position: relative;
    top: 0;

}

.header-box .game-intro .score {
    color: #fff;
    font-size: .32rem;
    margin: .26667rem 0;
    line-height: .53333rem;
    position: absolute
}

.header-box .game-intro .name {
    color: #fff;
    font-size: .32rem;
    font-weight: 800
}

.header-box .game-intro .p-num {
    color: #fff;
    font-size: .32rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right:0.6rem;
}
.header-box .game-intro .p-num i{
    background: url("../images/zan.png") center center no-repeat;
    background-size:100%;
    width:0.4rem;
    height:0.4rem;
    display: inline-block;
    margin-right:0.1rem;

}
.game-score {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width:100%;
    height:0.34rem;
    margin-top:0.6rem;

}

.btn-plays {
    width: 6.16rem;
    height:0.84rem;
    line-height: 0.84rem;
    margin: .26667rem auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #0AA760!important;
    border-radius: .56rem;
    font-size: .53333rem;
    color: #fff;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    bottom: 0.3rem;
    animation: trembling 3s linear infinite backwards;
}
.start-progress{
    display: none;
    width: 90%;
    height: 1.33333rem;
    line-height: 1.33333rem;
    margin: .26667rem auto;
    background-color: #0AA760;
    border-radius: .56rem;
    font-size: .53333rem;
    color: #fff;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0.3rem;
}

@keyframes trembling {
    26% {
        transform: rotate(0deg) scale(1);
    }
    28% {
        transform: rotate(-2deg) scale(1.04);
    }
    32% {
        transform: rotate(-2deg) scale(1.04);
    }
    34% {
        transform: rotate(-2deg) scale(1.02);
    }
    36% {
        transform: rotate(3deg) scale(1);
    }
    39% {
        transform: rotate(-1deg) scale(1);
    }
    44% {
        transform: rotate(0deg) scale(1);
    }
}

.desc {
    margin: .26667rem
}
.title{
    width:6.94rem;
    height:0.8rem;
    background-color:#0AA760;
    margin:0.3rem auto;
    display: flex;
    align-items: center;
    padding-left:0.14rem;
    padding-right:0.2rem;
    position: relative;
    font-weight: bold;
    color:#fff;
    font-size:0.28rem;
    display: flex;
    justify-content: space-between;
    border-radius: 0.2rem;
}
.t-left{
    display: flex;
    align-items: center;
}
.t-left>img{
    margin-right:0.2rem;
}
.title a{
    display:flex;
    align-items: center;
}
.title .icon{
    width:0.42rem;
    height:0.42rem;
}
.title span{
    color:#fff;
    font-size:0.28rem;
    display: flex;
}
.arrow{
    width:0.28rem;
    height:0.28rem;
}
.more-box .item {
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.more-box .game-intro {
    width: 4rem;
    position: absolute;
    left: 2.66667rem;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%)
}



.more-box .btn-play {
    width: 2.45333rem;
    height: 1.13333rem;
    line-height: .66667rem;
    text-align: center;
    position: absolute;
    right: -.13333rem;
    display: inline-block;
    background: url("/images/btn_playb.png") center center no-repeat;
    background-size: 100%
}

.more-box .more-list,
.more-box .recent-list {
    width:6.94rem;
    margin:0 auto;
    display: grid;
    grid-template-columns: 1.54rem 1.54rem 1.54rem 1.54rem;
    grid-gap: 0.24rem 0.24rem;

}

.more-box .more-list .item,
.more-box .recent-list .item {
    position: relative;
    width:1.54rem;
    height:1.54rem;
}

.more-box .more-list .item>a,
.more-box .recent-list .item>a {
    display: inline-block
}

.more-box .more-list .item .game-info,
.more-box .recent-list .item .game-info {
    color: #fff
}

.more-box .more-list .item .game-info>span {
    font-size: .32rem
}

.more-box .more-list .item .game-info>span:nth-child(1) {
    margin-right: .66667rem
}

.more-box .more-list .item .game-img,
.more-box .recent-list .item .game-img {
    width: 100%;
    height: 100%;
    border-radius: .26667rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    /* -webkit-box-shadow: 0 5px 10px 0 rgba(9, 11, 86, .3);
    box-shadow: 0 5px 10px 0 rgba(9, 11, 86, .3) */
}

.more-box .more-list .item .game-img>img,
.more-box .recent-list .item .game-img>img {
    width: 100%;
    height: 100%;
    vertical-align: middle
}

.vers {
    width: 100%;
    text-align: center
}

#star {
    display: inline-block;
    color: #fff;
    margin: .26667rem 0
}

#star img {
    width: .34rem;
    height: .34rem;
}

.show_number li {
    width: 3.46667rem;
    padding: .13333rem 0;
    margin-right: .06667rem
}

.atar_Show {
    background: url(/images/stark2.png);
    width: 2.13333rem;
    height: .28rem;
    position: relative;
    float: left;
    overflow: hidden
}

.atar_Show p {
    background: url(/images/stars2.png);
    left: 0;
    height: .28rem;
    width: 1.78667rem
}

.show_number li span {
    display: inline-block;
    line-height: 23px;
    color: #fff;
    font-size: .37333rem
}
.footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:6.94rem;
    border-radius: 0.2rem;
    margin:0.4rem auto 0.2rem;
}
.footer>p:nth-child(1){
    color:#fff;
    font-size:0.5rem;
    text-align: center;
    margin-bottom: 0.3rem;
}
.footer>p{
    width:100%;
    color:#fff;
    line-height: 21px;
    margin-top:0.2rem;
}
.footer h2{
    width:100%;
    margin:0.2rem 0;
    font-weight: bold;
}
.ft-img{
    width:4.68rem;
    height:0.64rem;
    margin:0.3rem auto 0;
}
.items{
    position: relative;
}
.items>a{
    display: block;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
}

.footer-bt{    
    width: 100%;

     margin:0 auto 0.2rem;
 }
 .footer-bt a{
     display: block;
     width:6.94rem;
     margin: 0 auto;
 }
 .ft-img{
     width:6.94rem;
     height: 100%;
     margin: 0 auto;
 }
 .footer-bt .txts{
     width: 100%;
     color:#fff;
     font-size:0.28rem;
     text-align: center;
     margin-bottom:0.2rem;
     display:block;
     margin-top:0.2rem;
 }
 .ft-nav{
     width:6.94rem;
     height:0.8rem;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     margin:0.5rem auto;
     background-color: #0AA760;
     border-radius: 0.2rem;
     
 }
 .ft-nav a{
     color:#fff;
     font-size:0.28rem;
     font-weight: bold;
     text-align: center;
 }
 .empty{
     width:100%;
     height:0.4rem;
 }

.adv {
    margin: .26667rem auto;
    width: 9.33333rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}
.empty{
    width:100%;
    height:2rem;
}
.dialog{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index: 200;
    display: none;
}
.game-tips{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    background-color: rgb(0, 0, 0, 0.7);
    background-image: url(../images/game_tips.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 157.5px 125px;
    display: none;
}
.loaders {
    display: flex;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    font-size: 0;
    margin-right: 10px;
}

.ball-pulse>div {
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
}

.ball-pulse>div:nth-child(1) {
    -webkit-animation: scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08);
    animation: scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08);
    display: inline-block;
}

.ball-pulse>div:nth-child(2) {
    -webkit-animation: scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08);
    animation: scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08);
    display: inline-block;
}

.ball-pulse>div:nth-child(3) {
    -webkit-animation: scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08);
    animation: scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08);
    display: inline-block;
}

@-webkit-keyframes scale {
    0%, 80% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }

    45% {
        -webkit-transform: scale(.1);
        transform: scale(.1);
        opacity: .7
    }
}
.type-list{
    position: fixed;
    top:2rem;
    left:0.3rem;
    background-color: #fff;
    width:6.94rem;
    border-radius: 0.2rem;
    box-shadow: 0px 1px 7px 0px rgba(0,0,0,0.2);
}
.type-list{
    display: flex;
    flex-direction: column;
    padding:0.2rem;
    overflow: scroll;
    height: 80vh;
    display: none;
}
.type-list .item{
    display: flex;
    align-items: center;
    flex-direction: row;
    box-shadow: 0px 1px 7px 0px rgba(0,0,0,0.2);
    margin-bottom: 0.2rem;
    border-radius: 0.14rem;
    width:100%;
    height:1.28rem;
    position: relative;
    padding:0.3rem 0;
}
.type-list .item>a{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    display: block;

}
.type-list .item>span{
    font-size:0.34rem;
    margin-left:0.3rem;
}
.type-list .item>img{
    width:0.92rem;
    height:0.92rem;
    display: inline-block;
    margin-left:0.3rem;
}
.adv {
    flex-direction: column;
    align-items: center;
    width: 100%;
    display: flex
}

.adv p {
    text-align: center;
    color: #fff;
    width: 100%;
    margin: 20px 0;
    font-size: 20px
}