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 {
     text-decoration: none;
     cursor: pointer
 }

 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
 }

 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
 }

 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;
 }

 body {
     background-color: #FEF3E0;
     width: 7.5rem;
     margin: 0 auto;
     font-family: "Noto Sans SC"
 }

 .wrap {
     padding: 0.3rem 10px 8px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

 .header-title {
     background-color: #F44336;
     width: 100%;
     height: 0.9rem;
     border-radius: 0.3rem;
     margin-bottom: 0.3rem;
     display: flex;
     align-items: center;
     padding-left: 0.2rem;
 }


 .header-title span {
    font-size: 0.4rem;
    color: #896556;
    width: 270px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
 }

 .header {
     width: 100%;
 }

 .game-img {
     display: flex;
     align-items: center;
     width: 100%;
     height: 3rem;
     margin-bottom: 0.4rem;
     position: relative;
 }

 .game-img .img {
     width: 3rem;
     height: 3rem;
     border-radius: 15px;
 }

 .right {
     margin-left: 0.2rem;
 }

 .game-img .title {
    color: #F44336;
    height: 0.8rem;
    width: 200px;
    text-overflow: ellipsis;
    font-size: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
 }

 .game-img .r-star {
     display: flex;
     flex-direction: row;
     margin-bottom: 0.6rem;
     margin-top: 0.3rem;
 }

 .game-img .score {
     font-size: 0.4rem;
     color: #FF0014;
 }

 .btn-plays {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 3.5rem;
 }

 .game-intro {
     position: absolute;
     left: 50%;
     top: 0;
     transform: translateX(-50%);
     background-color: rgba(0, 0, 0, .5);
     width: 6.94rem;
     height: 3.26rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     border-top-left-radius: 0.2rem;
     border-top-right-radius: 0.2rem;
     cursor: pointer;
 }

 .info {
     width: 100%;
     height: 0.9rem;
     background-color: #fff;
     position: absolute;
     left: 0;
     bottom: 0;
     border-bottom-left-radius: 0.2rem;
     border-bottom-right-radius: 0.2rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 0.2rem;
 }

 .info .name {
     color: #1E1E1E;
     font-size: 0.34rem;
     font-weight: bold;
 }

 .stars>img {
     width: 0.34rem;
     height: 0.34rem;
     margin-right: 0.16rem;
 }

 .stars {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .line {
     width: 100%;
     height: 0.01rem;
     background-color: #896556;
     margin: 0.3rem 0 0;
 }

 .icon-desc {
     width: 3.06rem;
     margin-bottom: 0.2rem;
 }

 .icon-popual {
     width: 3.32rem;
     margin-bottom: 0.2rem;
 }

 .icon-more {
     width: 4.28rem;
     margin-bottom: 0.2rem;
 }

 .icon-disc {
     width: 2.32rem;
     margin-bottom: 0.2rem;
     margin-top: 0.2rem;
 }

 .box-txt {
     width: 6.94rem;
     display: flex;
     flex-direction: column;
     border-radius: 0.2rem;
 }

 .box-txt .txt {
     width: 100%;
     padding: 0.2rem;
     background-color: #F44336;
     border-radius: 0.2rem;
 }

 .box-txt .con {
     font-size: 0.28rem;
     color: #ffffff;
     line-height: 21px;
     height: 2rem;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .box-txt .con1 {
     font-size: 0.28rem;
     color: #000;
     line-height: 21px;
 }

 .btn-more {
     width: 2.88rem;
     height: 0.74rem;
     line-height: 0.74rem;
     background-color: #FECE53;
     border: 0.01rem solid #F44336;
     border-radius: 0.37rem;
     color: #F44336;
     margin: 0 auto;
     font-size: 0.28rem;
     text-align: center;
     margin-top: 0.3rem;
     margin-bottom: 0.4rem;
 }

 .popular {
     width: 6.94rem;
     overflow-x: hidden;
     margin: 0 auto;
 }

 .popular .title {
     color: #F44336;
     font-size: 0.4rem;
     font-weight: bold;
     margin-bottom: 0.2rem;
 }

 .popularWrapper .swiper-slide {
     width: 2.8rem !important;
 }

 .popularWrapper .swiper-slide a,
 .popularWrapper .swiper-slide a img {
     width: 2.8rem;
     height: 4.16rem;
     border-radius: 0.2rem;
 }

 .all {
     width: 100%;
 }

 .all .title,
 .box-txt .title {
     color: #F44336;
     font-size: 0.4rem;
     font-weight: bold;
     margin-top: 0.2rem;
     margin-bottom: 0.2rem;
 }

 .all .list-box {
     width: 100%;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
 }

 .all .list-box>.item {
     width: 3.38rem;
     height: 2.02rem;
     border-radius: 0.2rem;
     margin-left: 0.2rem;
     margin-bottom: 0.2rem;
     background: url("../images/default.png") center center no-repeat;
     background-size: 100%;
 }

 .all .list-box>.item:nth-child(2n+1) {
     margin-left: 0;
 }

 .all .list-box>.item>a {
     display: block;
     width: 100%;
     height: 100%;
 }

 .swiper {
     width: 100%;
     height: 4.5rem;
 }

 .swiper-slide {
     text-align: center;
     font-size: 18px;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 .swiper-slide::before {
     content: "";
     position: absolute;
     width: 0.6rem;
     height: 0.6rem;
     top: 0.1rem;
     left: 0.1rem;
     background: url("../images/icon_pp.png") center center no-repeat;
     background-size: 100%;
 }

 .swiper-slide a {
     width: 100%;
     display: inline-block;
 }

 .swiper-slide a img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .hot {
     width: 6.94rem;
     margin-top: 0.2rem;
     padding-bottom: 0.2rem;
     background-color: #fff;
     border-radius: 0.2rem;
     padding-top: 0.2rem;
     padding-left: 0.05rem;
 }

 .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;
 }

 .start-progress {
     display: none;
     width: 90%;
     height: 1.33333rem;
     line-height: 1.33333rem;
     margin: .26667rem auto;
     color: #fff;
     text-align: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     align-items: center;
 }

 .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
     }
 }

 .footer {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 100%;
     background-color: #F44336;
     padding: 0.4rem 0.3rem;
     .about {
         width: 6.94rem;
         background-color: #FEF3E0;
         padding: 0.4rem 0.3rem;
         border-radius: 0.2rem;
     }
     .about>p:nth-child(1) {
         color: #F44336;
         font-size: 0.5rem;
         text-align: center;
         margin-bottom: 0.4rem;
     }
     .about>p {
         width: 100%;
         color: #F44336;
         line-height: 21px;
     }
 }