@charset "UTF-8";
/*  主色-亮     */
.fontMain {
  color: #84E05A;
}

.fontColor1 {
  color: #1a1a1a;
}

.fontColor2 {
  color: #525252;
}

.fontColor3 {
  color: #999999;
}

.btnBg1 {
  background-color: #1a1a1a;
}

.btnBg2 {
  background-color: #e6e6e6;
}

.btnBg3 {
  background-color: #f2f2f2;
}

.mainColorbg {
  background-color: #84E05A;
}

.mainColor2bg {
  background-color: #ECFFE5;
}

/* 主色 */
/* 主色 - 暗*/
/* 一级黑 */
/* 二级黑 */
/*按钮背景色*/
.linear1 {
  background: linear-gradient(90deg, #7DF2C6 0%, #CAFB5F 100%);
}

.linear2 {
  background: linear-gradient(0deg, #D2F868, #D2F868), linear-gradient(0deg, #A6F78F, #A6F78F);
}

.linear3 {
  background: linear-gradient(90deg, #EEEEEE 0%, #FFFFFF 100%);
}

.boxtop_linear {
  background: linear-gradient(180deg, #EEFED1 0%, #FFFFFF 60.94%);
}

.scl ::-webkit-scrollbar-thumb:horizontal {
  width: 0.05rem;
  border-radius: 0.05rem;
  background: transparent;
}

.scl ::-webkit-scrollbar {
  width: 0.05rem;
  height: 0.05rem;
  border-radius: 0.05rem;
  background: transparent;
}

.scl ::-webkit-scrollbar-thumb:vertical {
  background: rgba(153, 153, 153, 0.3);
  outline-offset: -2px;
  border-radius: 0.05rem;
}

.tc {
  text-align: center;
}

:root {
  --black-bg_white: #ffffff;
  --white-bg_black: #000000;
  --black-black_h1: #131715;
  --black-black_h2: #3E403F;
  --black-black_h3: #7A7D7A;
  --black-black_h4: #A7A8A7;
}

.btnty, .hotbox .list li .btn, .detaillist li .ht .btn, .detaillist li .ht .btn2 {
  padding: .12rem .3rem;
  border-radius: .27rem;
  line-height: .27rem;
  height: .27rem;
  box-sizing: content-box;
  background: #B9FB1C;
}

body, html, a, img, div, form, select, input, ul, ol, li, h1, h2, h3, h4, h5, h6, dd, dl, dt, p, label, em, span, cude, i {
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-size: 0.24rem;
  font-family: Helvetica,STHeiti,Droid Sans Fallback;
  color: #222;
  position: relative;
  width: 100%;
  background-color: #fff;
  line-height: 1;
  color: #3E403F;
}

body, html {
  height: 100%;
}

a {
  text-decoration: none;
  color: #222;
  word-break: break-all;
}

ol, ul, li {
  list-style: none;
}

em, i {
  font-style: normal;
}

img {
  border: none;
}

textarea {
  -webkit-appearance: none;
  font-family: Helvetica,STHeiti,Droid Sans Fallback;
}

input {
  font-family: Helvetica,STHeiti,Droid Sans Fallback;
  font-size: 0.24rem;
  outline: none;
  resize: none;
}

.cf {
  *zoom: 1;
}

.cf:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.pr {
  position: relative;
}

.lh {
  line-height: 5rem;
  overflow: hidden;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

.w {
  margin: 0 auto;
  width: 7.5rem;
  overflow: hidden;
  position: relative;
  margin-top: -1.1rem;
}

.headArea {
  position: relative;
  /* 渐变遮罩 */
}

.headArea .bgs {
  position: relative;
}

.headArea img {
  width: 7.5rem;
  display: block;
  margin: 0 auto;
}

.headArea .headtxt {
  position: absolute;
  bottom: 1.45rem;
  left: 50%;
  margin-left: -3.3rem;
  padding: 0 .1rem;
  background-color: #222;
  color: #fff;
  border-radius: .08rem;
  display: inline-block;
  height: .48rem;
  font-size: .26rem;
  line-height: .48rem;
}

.headArea .headtxt2 {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  margin-left: -3rem;
  display: inline-block;
  line-height: .4rem;
  color: #fff;
}

.boxcont {
  border-radius: .4rem .4rem 0 0;
  box-shadow: inset 0 0 0 .04rem #fff;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, #F2F3F5 2rem);
  backdrop-filter: blur(0.6rem);
  -webkit-backdrop-filter: blur(0.6rem);
  padding: .48rem .32rem 1.7rem;
  box-sizing: border-box;
}

.boxcont.notfilter {
  backdrop-filter: inherit;
  -webkit-backdrop-filter: inherit;
}

.boxcont3 {
  border-radius: .4rem .4rem 0 0;
  overflow: hidden;
  background-color: #F2F3F5;
  padding: .48rem .32rem 1.7rem;
  box-sizing: border-box;
}

.searchbox {
  height: .8rem;
  box-shadow: 0 0 0 0.03rem #131715;
  border-radius: .4rem;
  line-height: .8rem;
  background: linear-gradient(90deg, #F8FFE9 0%, #fff 50%, #E9FFED 100%);
  padding: 0 .12rem 0 .32rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.searchbox input {
  border: none;
  background: none;
  font-size: .26rem;
  line-height: .8rem;
  width: 85%;
}

.searchbox .btn {
  width: .88rem;
  height: .56rem;
  line-height: .56rem;
  border-radius: .4rem;
  background: url(../images/icon-search.png) no-repeat center #131715;
  display: block;
  background-size: auto .24rem;
}

.searchbox .close {
  background: url(../images/close.png) no-repeat center;
  background-size: auto .32rem;
  opacity: .3;
  width: .32rem;
  height: .32rem;
  position: absolute;
  top: 50%;
  margin-top: -.16rem;
  right: 1.1rem;
  display: none;
}

.searchbox.on .close {
  display: block;
}

.searchbox.searchbox2 .close {
  right: .3rem;
}

.searchlist {
  margin-top: .4rem;
  display: none;
}

.searchon.w .searchlist {
  display: block;
}

.searchon.w .main {
  display: none;
}

.searchon.w .sharebtn {
  display: none;
}

.tabbox {
  margin: .36rem 0;
  height: .68rem;
  line-height: .68rem;
  font-size: .28rem;
  align-items: center;
  justify-content: space-between;
  position: relative;
  display: flex;
}

.tabbox .tab-fix {
  height: .98rem;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 9;
  box-shadow: 0 0 0.2rem #ccc;
  padding: 0 .32rem;
  justify-content: space-between;
}

.tabbox .lis {
  display: flex;
  align-items: center;
}

.tabbox .lis span {
  margin-right: .24rem;
  display: block;
  position: relative;
}

.tabbox .lis span.on {
  width: 1.38rem;
  height: .68rem;
  overflow: hidden;
  line-height: 5rem;
  background: url(../images/tab_hover.png) no-repeat center bottom;
  background-size: auto .28rem;
}

.tabbox .lis span.on::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/tab1.png) no-repeat center;
  background-size: auto .32rem;
}

.tabbox .lis span.on.s2::before {
  background-image: url(../images/tab2.png);
}

.tabbox .lis span.on.s3 {
  width: .68rem;
}

.tabbox .lis span.on.s3::before {
  background-image: url(../images/tab3.png);
}

.tabbox .lis span.on.s4 {
  width: .68rem;
}

.tabbox .lis span.on.s4::before {
  background-image: url(../images/tab4.png);
}

.tabbox .lis span.on.s5 {
  width: 1.26rem;
}

.tabbox .lis span.on.s5::before {
  background-image: url(../images/tab5.png);
}

.sortbox {
  display: flex;
  justify-content: space-between;
  margin-bottom: .3rem;
  align-items: center;
}

.sortbox .tab {
  margin: 0;
}

.sort {
  position: relative;
}

.sort .default {
  background: url(../images/icon_sort.png) no-repeat left center;
  background-size: auto .32rem;
  color: #A7A8A7;
  padding-left: .4rem;
}

.sort .boxs {
  display: none;
}

.sort.on .boxs {
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: .2rem;
  background-color: #fff;
  box-shadow: 0 0.02rem 0.1rem rgba(19, 23, 21, 0.2);
  width: 1.12rem;
  text-align: center;
  line-height: .5rem;
  border-radius: .16rem 0 .16rem .16rem;
  padding: .05rem 0;
}

.sort.on .boxs li.at {
  color: #3AAD11;
}

.tabcont {
  display: none;
}

.tabcont .box {
  background-color: #fff;
  border-radius: .32rem;
  padding: .24rem .24rem .32rem;
  margin-bottom: .24rem;
}

.htcont {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .28rem;
  font-weight: bold;
  padding: .12rem 0 .16rem;
  line-height: .48rem;
}

.htcont span {
  font-weight: normal;
  font-size: .22rem;
  color: #A7A8A7;
}

.guessbox .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.guessbox .list span {
  width: 3rem;
  height: .58rem;
  line-height: .58rem;
  margin-bottom: .16rem;
  display: block;
  text-align: center;
  background-color: #F6F5F5;
  border-radius: .2rem;
  border: 0.02rem solid #131715;
  position: relative;
}

.guessbox .list span::after {
  content: '';
  position: absolute;
  top: -.14rem;
  right: .1rem;
  background: url(../images/star.png) no-repeat;
  width: .4rem;
  height: .3rem;
  background-size: auto 100%;
}

.btn-refresh {
  margin-top: .32rem;
  text-align: center;
}

.btn-refresh a {
  color: #A7A8A7;
  height: .28rem;
  line-height: .28rem;
  display: inline-block;
}

.btn-refresh a i {
  background: url(../images/icon-refresh.png) no-repeat left center;
  background-size: auto .25rem;
  width: .25rem;
  height: .28rem;
  margin-right: .12rem;
  display: inline-block;
  vertical-align: top;
}

.hotbox {
  margin-bottom: 0 !important;
}

.hotbox .list li {
  height: .52rem;
  line-height: .52rem;
  margin: .2rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #3E403F;
}

.hotbox .list li .ns {
  flex-shrink: 0;
  font-weight: bold;
  width: .52rem;
  text-align: center;
  color: #7A7D7A;
  font-weight: bold;
  font-size: .28rem;
}

.hotbox .list li .ns.n1, .hotbox .list li .ns.n2, .hotbox .list li .ns.n3 {
  background: url(../images/honor_img_top1.png) no-repeat center;
  background-size: auto .4rem;
  line-height: 5rem;
  overflow: hidden;
  height: .52rem;
}

.hotbox .list li .ns.n2 {
  background-image: url(../images/honor_img_top2.png);
}

.hotbox .list li .ns.n3 {
  background-image: url(../images/honor_img_top3.png);
}

.hotbox .list li .btn {
  flex-shrink: 0;
  /* 不缩小 */
  margin-left: .12rem;
}

.hotbox .list li .info {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
}

.hotbox .list li .info .hotval {
  font-size: .22rem;
  color: #7A7D7A;
  background: url(../images/icon-hot.png) no-repeat left center;
  background-size: auto .2rem;
  padding-left: .24rem;
  flex-shrink: 0;
}

.hotbox .list li .info .username {
  flex: 1;
  /* 占据剩余空间 */
  min-width: 0;
  /* 允许被压缩，否则省略号不生效 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* 超出显示 ... */
  margin-right: .24rem;
  /* 给 hotval 留点间距 */
}

.sharebtn {
  text-align: center;
  position: fixed;
  width: 100%;
  bottom: .48rem;
  left: 0;
}

.sharebtn a {
  border-radius: 24px;
  background: #131715;
  height: .84rem;
  width: 3.76rem;
  display: block;
  margin: 0 auto;
  color: #fff;
  line-height: .84rem;
  font-size: .3rem;
}

.sharebtn a i {
  background: url(../images/icon-share.png) no-repeat left center;
  background-size: auto .31rem;
  width: .42rem;
  height: 100%;
  display: inline-block;
  vertical-align: top;
}

.detaillist li {
  background-color: #fff;
  border-radius: .32rem;
  margin-bottom: .24rem;
  padding: .32rem .3rem;
}

.detaillist li:last-child {
  margin-bottom: 0;
}

.detaillist li .ht {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detaillist li .ht .r {
  display: flex;
  align-items: center;
}

.detaillist li .ht .collect {
  display: inline-block;
  height: .37rem;
  line-height: .37rem;
  margin-right: .16rem;
  background: url(../images/icon-collect.png) no-repeat left center;
  background-size: auto .36rem;
  padding-left: .4rem;
  color: #3E403F;
}

.detaillist li .ht .collect.on {
  background-image: url(../images/icon-collecton.png);
}

.detaillist li .ht .auditing {
  color: #A7A8A7;
}

.detaillist li .ht .auditing.waiting {
  color: #3AAD11;
}

.detaillist li .ht .hot {
  height: .27rem;
  background: url(../images/icon-hot.png) no-repeat left center;
  background-size: auto .2rem;
  padding-left: .26rem;
  display: inline-block;
  margin-right: .1rem;
  line-height: .27rem;
}

.detaillist li .ht .name {
  font-size: .26rem;
  font-weight: bold;
  line-height: .38rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.detaillist li .ht .name span:nth-child(2) {
  margin-left: .12rem;
  background: url(../images/line.png) no-repeat left center;
  background-size: auto .24rem;
  padding-left: .12rem;
}

.detaillist li .ht .btn2 {
  background-color: #FFF03D;
  margin-right: .1rem;
  padding: .12rem .2rem;
}

.detaillist li .ishare {
  display: flex;
  color: #7A7D7A;
  height: .28rem;
  align-items: center;
  justify-content: space-between;
  margin-top: .24rem;
}

.detaillist li .ishare .cover {
  width: .28rem;
  height: .28rem;
  overflow: hidden;
  border-radius: 100%;
  margin-right: .08rem;
}

.detaillist li .ishare .cover img {
  width: 100%;
  display: block;
}

.detaillist li .ishare p {
  line-height: .3rem;
  height: .28rem;
  flex: 1;
}

.detaillist li .ishare .nums {
  padding-right: .1rem;
}

.detaillist li .itxt {
  line-height: .4rem;
  font-size: .26rem;
  color: #3E403F;
  margin-top: .24rem;
}

.detaillist li .itxt p {
  word-break: break-word;
}

.detaillist li .iimgs {
  overflow: hidden;
  margin-top: .24rem;
}

.detaillist li .iimgs .c {
  font-size: 0;
  width: 120%;
}

.detaillist li .iimgs .cover {
  width: 2rem;
  height: 2rem;
  margin-right: .13rem;
  overflow: hidden;
  border-radius: .2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;
}

.detaillist li .iimgs .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 等比例裁剪，保证填满 */
  object-position: center;
  /* 居中对齐（默认） */
  display: block;
}

.classify {
  overflow: hidden;
}

.classify ul {
  width: 120%;
  font-size: 0;
}

.classify li {
  display: inline-block;
  width: 2.16rem;
  font-size: .28rem;
  text-align: center;
  margin: 0 .16rem .24rem 0;
}

.classify li .cover {
  width: 2.16rem;
  height: 2.16rem;
  overflow: hidden;
  border-radius: .2rem;
  margin: 0 auto .18rem;
}

.classify li .cover img {
  width: 100%;
  display: block;
}

.mytab {
  margin-bottom: .24rem;
}

.mytab span {
  width: 1.3rem;
  height: .58rem;
  line-height: .58rem;
  display: inline-block;
  border: 1px solid #fff;
  border-radius: .16rem;
  text-align: center;
  background-color: #fff;
  margin-right: .2rem;
}

.mytab span.on {
  color: #131715;
  border-color: #131715;
}

.mycont {
  display: none;
}

.nodata {
  background: url(../images/empty.png) no-repeat center 0;
  background-size: auto 2.8rem;
  padding-top: 2.9rem;
  font-size: .28rem;
  color: #A7A8A7;
  text-align: center;
  margin: 1rem 0;
}

.boxcont2 {
  border-radius: .4rem .4rem 0 0;
  box-shadow: inset 0 0 0 .04rem #fff;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, #fff 10.12%);
  backdrop-filter: blur(0.6rem);
  -webkit-backdrop-filter: blur(0.6rem);
  padding: .48rem .32rem 0;
  box-sizing: border-box;
}

.form-submit {
  overflow: hidden;
}

.form-submit .tit {
  font-size: .28rem;
  font-weight: bold;
  line-height: .36rem;
  margin: .72rem auto .2rem;
}

.form-submit .tit:first-child {
  margin-top: 0;
}

.form-submit .tit em {
  color: #F16456;
  margin-right: .05rem;
}

.form-submit .nameinput {
  border-radius: .2rem;
  border: 0.02rem solid #131715;
  display: flex;
}

.form-submit .nameinput input {
  border: none;
  background: none;
  height: .72rem;
  padding: 0 .2rem;
  font-size: .24rem;
  text-align: center;
  width: 49%;
}

.form-submit .nameinput input:nth-child(2) {
  margin-left: .12rem;
  background: url(../images/line.png) no-repeat left center;
  background-size: auto .24rem;
  padding-left: .12rem;
}

.form-submit .namebox {
  display: none;
}

.form-submit .namebox.name1 input {
  text-align: left;
  width: 100%;
}

.form-submit .nameClass {
  width: 120%;
}

.form-submit .nameClass span {
  width: 2.16rem;
  height: .58rem;
  display: inline-block;
  border-radius: .16rem;
  background-color: #F6F5F5;
  box-shadow: inset 0 0 0 0.02rem #F6F5F5;
  text-align: center;
  line-height: .58rem;
  padding: 0 .1rem;
  margin: 0 .19rem .2rem 0;
}

.form-submit .nameClass span.on {
  background-color: #fff;
  box-shadow: inset 0 0 0 0.02rem #131715;
}

.form-submit .nametips {
  font-size: .22rem;
  color: #A7A8A7;
  line-height: .3rem;
  font-weight: normal;
  margin-top: .1rem;
}

.form-submit .imgupbox {
  border-radius: .2rem;
  background-color: #F6F5F5;
  padding: .32rem .24rem;
  position: relative;
}

.form-submit .imgupbox textarea {
  border: none;
  background: none;
  width: 100%;
  outline: none;
  resize: none;
  font-size: .24rem;
}

.form-submit .imgupbox .txtlen {
  position: absolute;
  right: .2rem;
  bottom: .32rem;
  color: #ccc;
  font-size: .18rem;
}

.form-submit .imgupbox .upload {
  margin-top: .2rem;
  display: flex;
}

.form-submit .imgupbox .upload .imglist {
  display: flex;
}

.form-submit .imgupbox .upload .imgbox {
  width: 1.12rem;
  height: 1.12rem;
  margin-right: .18rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: .16rem;
  background-color: #EEEEEE;
  position: relative;
}

.form-submit .imgupbox .upload .imgbox:last-child {
  margin-right: 0;
}

.form-submit .imgupbox .upload .imgbox img {
  max-width: 1.12rem;
  max-height: 1.12rem;
}

.form-submit .imgupbox .upload .imgbox .iclose {
  background: url(../images/close.png) no-repeat center;
  width: .33rem;
  height: .32rem;
  background-size: auto .32rem;
  top: -.1rem;
  right: -.1rem;
  position: absolute;
}

.form-submit .imgupbox .upload .btn {
  margin-left: .18rem;
  width: 1.12rem;
  height: 1.12rem;
  border-radius: .16rem;
  overflow: hidden;
  background: url(../images/add.png) no-repeat center;
  background-size: auto .26rem;
  border: 0.02rem dashed #A7A8A7;
}

.form-submit .imgupbox .upload .btn input {
  width: 100%;
  height: 100%;
  opacity: 0;
}

.form-submit .btn-submit {
  margin: .34rem 0;
  text-align: center;
}

.form-submit .btn-submit a {
  width: 3.76rem;
  height: .84rem;
  line-height: .84rem;
  text-align: center;
  border-radius: .84rem;
  background-color: #131715;
  color: #fff;
  display: inline-block;
}

.form-submit .btn-submit.out a {
  opacity: .2;
}

.page3 .bgs {
  height: 5.48rem;
  overflow: hidden;
}

.page3 .bgs img {
  margin: 0 auto;
  display: block;
  height: 100%;
}

.page3 .bgs::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  background: #000;
  backdrop-filter: blur(0.6rem);
}

.gameinfo {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  width: 100%;
  padding: 0 .3rem 0 .56rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

.gameinfo .cover {
  width: 1.52rem;
  height: 1.52rem;
  border-radius: .32rem;
  border: .04rem solid #FFF;
  margin-right: .2rem;
  overflow: hidden;
}

.gameinfo .cover img {
  width: 100%;
  display: block;
}

.gameinfo .info {
  flex: 1;
  min-width: 0;
}

.gameinfo .info .p1 {
  font-size: .48rem;
  font-weight: bold;
  line-height: .72rem;
  margin-bottom: .14rem;
}

.gameinfo .info .p2 {
  line-height: .28rem;
  font-weight: normal;
}

.gameinfo .filter {
  position: relative;
  z-index: 20;
  margin-bottom: .25rem;
}

.gameinfo .filter .default {
  width: 1.12rem;
  height: .6rem;
  line-height: .6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  text-align: center;
  border-radius: .16rem;
  background: rgba(255, 255, 255, 0.2);
}

.gameinfo .filter .default i {
  background: url(../images/icon-shaixuanpng.png) no-repeat center;
  width: .28rem;
  height: .29rem;
  background-size: 100% auto;
  display: block;
  margin-top: -.05rem;
}

.gameinfo .filter .selectbox {
  display: none;
}

.gameinfo .filter.on .selectbox {
  display: block;
  position: absolute;
  top: .8rem;
  right: -.1rem;
  width: 7.1rem;
  background-color: #fff;
  border-radius: .32rem;
  padding: .4rem .32rem;
  color: #131715;
  font-size: .22rem;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
}

.gameinfo .filter.on .selectbox .tit {
  margin-bottom: .24rem;
}

.gameinfo .filter.on .selectbox .spans {
  margin-bottom: .4rem;
  overflow: hidden;
}

.gameinfo .filter.on .selectbox .spans .ul {
  width: 120%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.gameinfo .filter.on .selectbox .spans span {
  width: 1.48rem;
  height: .56rem;
  border-radius: .2rem;
  border: 1px solid #F6F5F5;
  background-color: #F6F5F5;
  display: inline-block;
  line-height: .56rem;
  text-align: center;
  margin-bottom: .15rem;
  margin-right: .17rem;
}

.gameinfo .filter.on .selectbox .spans span.on {
  border: 1px solid #131715;
  background-color: #fff;
}

.gameinfo .filter .btns span {
  height: .76rem;
  line-height: .76rem;
  text-align: center;
  font-size: .28rem;
  display: inline-block;
  border-radius: .76rem;
}

.gameinfo .filter .btns span.reset {
  width: 2.14rem;
  background-color: #F6F5F5;
  color: #A7A8A7;
  margin-right: .09rem;
}

.gameinfo .filter .btns span.ok {
  width: 4.16rem;
  background-color: #131715;
  color: #fff;
}

.tab {
  position: relative;
  align-items: center;
  margin: .3rem 0;
  flex: 1;
}

.tab .swiper-slide {
  width: auto;
  padding: 0;
  overflow: hidden;
  position: relative;
  width: 1.42rem;
  text-align: center;
}

.tab .swiper-slide a {
  position: relative;
  height: .56rem;
  line-height: .56rem;
  color: #666;
  padding: 0 0.18rem;
  background-color: #fff;
  margin: 0 .05rem;
  display: block;
  border: 1px solid #F6F5F5;
  border-radius: .2rem;
}

.tab .swiper-slide.swiper-slide-active a {
  color: #222;
  border: 1px solid #131715;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 19;
  display: none;
}

.imgOpen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
}

.imgOpen .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.imgOpen .cover {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.imgOpen .cover img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.side {
  width: 0.96rem;
  height: 1.92rem;
  position: fixed;
  right: 0.22rem;
  bottom: 1.4rem;
  z-index: 11;
  animation: fixShow2 .3s forwards;
}

.side a {
  display: block;
  width: 0.96rem;
  margin-bottom: 0.1rem;
  height: 0.96rem;
  border-radius: 0.2rem;
  box-shadow: 0px 0.04rem 0.12rem 0px rgba(173, 177, 190, 0.25);
  font-size: .18rem;
  text-align: center;
  padding-top: .65rem;
}

.side a.a1 {
  background: url(../images/side1.png) no-repeat center 0.14rem #fff;
  background-size: auto .38rem;
}

.side a.a2 {
  background: url(../images/side2.png) no-repeat center 0.14rem #fff;
  background-size: auto .41rem;
}

@keyframes fixShow2 {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

.sideBtn {
  width: 0.44rem;
  height: 0.62rem;
  background: url(../images/sidebtn.png) no-repeat 0 0;
  background-size: 100% 100%;
  background-color: transparent;
  position: fixed;
  right: 0;
  bottom: 2.4rem;
  z-index: 6;
  animation: fixShow .3s forwards;
  display: none;
}

.popbox {
  width: 5.76rem;
  padding: .6rem .48rem;
  background-color: #fff;
  border-radius: .24rem;
  position: fixed;
  z-index: 20;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: .28rem;
  line-height: .42rem;
}

.popbox .poptit {
  text-align: center;
  font-size: .32rem;
  font-weight: bold;
  margin-bottom: .34rem;
}

.popbox .popbtn {
  margin-top: .24rem;
  display: flex;
  justify-content: space-between;
}

.popbox .popbtn a {
  width: 100%;
  height: .88rem;
  line-height: .88rem;
  text-align: center;
  display: inline-block;
  border-radius: .28rem;
  background-color: #F6F5F5;
}

.popbox .popbtn a.a2 {
  background-color: #B9FB1C;
}

.toast {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 21;
  color: #fff;
  font-size: .28rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.toast .txt {
  background: #000;
  border-radius: .24rem;
  padding: .24rem .3rem;
  position: relative;
  z-index: 1;
}

.popbox2 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10;
  display: none;
}

.popbox2 .createbox {
  position: absolute;
  bottom: -10rem;
  left: 0;
  width: 100%;
  background-color: #F2F3F5;
  border-radius: .48rem;
  padding: .48rem;
}

.popbox2 .createbox .tit {
  font-size: .36rem;
  text-align: center;
  font-weight: bold;
  line-height: .58rem;
  margin-bottom: .36rem;
}

.popbox2 .createbox .createselect {
  position: absolute;
  right: .48rem;
  height: .58rem;
  top: .48rem;
  line-height: .58rem;
  border-radius: .16rem;
  padding: 0 .3rem 0 .2rem;
  text-align: center;
  background: url(../images/arrow2.png) right 0.1rem center no-repeat #fff;
}

.popbox2 .createbox .createselect .boxs {
  display: none;
}

.popbox2 .createbox .createselect.on .boxs {
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: .4rem;
  background-color: #fff;
  box-shadow: 0 0.02rem 0.1rem rgba(19, 23, 21, 0.2);
  width: 1.12rem;
  text-align: center;
  line-height: .5rem;
  border-radius: .16rem 0 .16rem .16rem;
  padding: .05rem 0;
}

.popbox2 .createbox .createselect.on .boxs li.at {
  color: #3AAD11;
}

.popbox2 .createbox .createbtn {
  height: .94rem;
  border-radius: .36rem;
  line-height: .94rem;
  font-size: .32rem;
  font-weight: bold;
  text-align: center;
  background-color: #B9FB1C;
  margin-top: .48rem;
}

.popbox2.on {
  display: block;
}

.popbox2.on .createbox {
  animation: fixShow .3s forwards;
}

.popbox2 .scl {
  max-height: 5rem;
  overflow-y: auto;
}

@keyframes fixShow {
  0% {
    bottom: -10rem;
  }
  100% {
    bottom: 0;
  }
}