@charset "utf-8";

/* margin and padding */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,
s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,
td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video,input {
  margin: 0;  padding: 0;  border: none;  outline: 0;  font-size: 100%;  font: inherit;  vertical-align: baseline;
}
html {
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: 100%;
  height: 100%;
}

/* body */
body {
  font-family: "微软雅黑";
  font-size: 10px;
  color: #666;
  min-width: 320px;
  max-width: 720px;
  height: 100%;
  margin: 0 auto;
  background: #F8F9FB;
  position:relative;
}
body,div,fieldset,form,h1,h2,h3,h4,h5,h6,html,p {
  -webkit-text-size-adjust: none
}
input::-ms-clear {
  display: none;
}

/*清楚文本框X*/
input,select,textarea {
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999999;
}

strong {
  font-weight: bold;
}

/* img */
img {
  padding: 0;
  margin: 0 auto;
  vertical-align: middle;
  border: none;
}

i,em {
  font-style: normal;
}
/* a */
a {
  color: #555;
  text-decoration: none;
}
/* ul li */
ul,li {
  outline:none;
  list-style: none;
}
.fl{ float: left;}
.fr{ float: right;}
.img100{ width: 100%; height: 100%;}
/*去浮动*/
.clearFloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearFloat{zoom:1}
/*超过宽度显示...*/
.white-space{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
/*公共头部*/
.wrap{ width: 100%; min-width: 320px;  max-width: 720px;}
.radius-8{border-radius:0.08rem; }
.radius-24{border-radius: 0.24rem;}
header{
  z-index: 100;background: #fff;position: fixed;top: 0;
  /*position: fixed;top: 0; display: flex;align-items: center;*/
}
.fill-top{ height:1.92rem;}
.menu{padding:0.3rem 0.16rem; background: #fff; height: 0.8rem; display: none; }
.close{ width: 0.4rem; height: 0.4rem;  cursor: pointer;  float: left; margin-top: 0.2rem;}
.close img{ width: 100%; height: 100%;}
.menu-list{ float: left; margin-left: 0.16rem;height: 0.8rem;}
.menu-list-img{margin-right: 0.24rem; float: left;height: 0.8rem;}
.menu-list-img img{height: 100%;}
.menu-list-title{ float: left;}
.menu-list-title h3{max-width: 3.4rem; text-align: left; font-size: 0.3rem; line-height: 0.38rem; color: #333;}
.menu-list-title p{max-width: 3.4rem; padding-top: 0.1rem; text-align: left; font-size: 0.22rem; line-height: 0.33rem; color: #999;}
.menu-list-url{ width:1.56rem; height: 0.54rem; float: right; color: #fff; line-height: 0.54rem; font-size: 0.28rem; border-radius: 0.27rem; text-align: center;
  background: #0089FF; display: block;margin-top: 0.12rem;
}
.header{ padding:0.2rem 0.3rem; background:linear-gradient(90deg,rgba(0,137,255,1) 0%,rgba(39,171,255,1) 100%); height: 0.56rem; }
.header a{ float: right; margin-left: 0.3rem;}
.header a:first-child{ float: left;margin-left:0;}
.header img{ height: 0.56rem;}

html {
  font-size: 50px;
}
@media screen and (min-width:320px){
  html{font-size:44.44444444444444px;}
}
@media screen and (min-width:360px){
  html{font-size:50px}
}
@media screen and (min-width:375px){
  html{font-size:52.083333333333336px;}
}
@media screen and (min-width:384px){
  html{font-size:375%;}
}
@media screen and (min-width:390px){
  html{font-size:380.85%;}
}
@media screen and (min-width:393px){    /* 小米NOTE */
  html{font-size:383.79%;}
}
@media screen and (min-width:410px){
  html{font-size:57.083333333333336px;}
}
@media screen and (min-width:432px){ /* 魅族3 */
  html{font-size:421.875%;}
}
@media screen and (min-width:480px){
  html{font-size:469%;}
}
@media screen and (min-width:540px){
  html{font-size:527.34%;}
}
@media screen and (min-width:640px){
  html{font-size: 625%;}
}

@media screen and (width:720px){
  html{font-size: 703.125%;}
}

.nav {
  margin-top: 0.3rem;
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  z-index: 100;
  background: #fff;
  position: relative;
  height: 0.54rem;
  line-height: 0.54rem;padding-bottom: 0.16rem;
  border-bottom: 1px #d9d9d9 solid;
  /*top: 2.58rem;*/
}

.nav a{
  /* width: 17%; */
  width: 30%;
  text-align: center;
  margin: 0 0.3rem;
  color: #909090;
  display:inline-block;
  text-align: center;
  position: relative;
  font-size: 0.28rem;
}
@media(min-width: 721px)  {
  .nav a{ width:auto;}
}
.ranking {
  text-align: center;
  width: 100%;
  display: block;
  font-size: .32rem;
  color: #505050;
}
.ranking-warp {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.p2 span{display: inline-block; position: relative;padding-left: 0.1rem;float: left;}
.p2 I{
  display: inline-block;
  float: left;
  color: #666;
  padding-left: .15rem;
}
.p2 I:first-child{
  padding-left: 0;
}
.p2 span:first-child{padding-left: 0rem;}
.p2 span:before{content:"."; position: absolute;bottom: 0.08rem; left: 0.02rem;  }
.p2 span:first-child:before{content:'';}
.nav .select:before{
  content: '';
  display: block;
  width: 50%;
  height: 0.06rem;
  background: #0089FF;
  position: absolute;
  bottom: -30%;
  left: 25%;
  opacity: .9;
  z-index: -1;
  border-radius: 0.1rem;
}
.nav .select {
  font-size: 0.28rem;
  font-weight: 600;
  color: black
}
.application {
  padding: 0 0.3rem 0.3rem;
}
.transverse-wrap {
  width: 100%;
  background: #FFFFFF;
  border-radius:.24rem;
  padding-top: .01rem;
  box-shadow: 0px 2px 8px 0px rgba(153,153,153,0.2);
}
.transverse-list {
  width: 1.2rem;
  font-size: .24rem;
  color: #323232;
}
.game-img {
  width: 100%;
  height: 1.2rem;
  margin-bottom: .08rem;
}
.playgame {
  width: 1.2rem;
  height: .54rem;
  display: block;
  background:rgba(0,137,255,0.1);
  border-radius: .27rem;
  text-align: center;
  line-height: .54rem;
  font-size: .24rem;
  color: #0089FF;
  font-weight: 600;
}
.transverse-content {
  padding:.2rem .32rem;
  display: flex;
  justify-content: space-between;
}
.gamename {
  margin-bottom: .16rem;
  width: 100%;
}
.vertical-wrap {
  background: #FFFFFF;
  border-radius:.24rem;
  padding-top: .01rem;
  padding-bottom: .01rem;
  box-shadow: 0px 9px 16px 0px rgba(153,153,153,0.2);
}
.game-img img{
  width: 100%;
  height: 100%;
}
/*公共尾部*/
footer{ background: #fff;padding:0.16rem 0.3rem; }
footer .menu-list{ width: 100%; float: none; margin-left: 0;}
.menu-list-plate{ float: right; color: #ccc;margin-right: 0.3rem; padding-top: 0.2rem; font-size: 0.3rem;}
.menu-list-plate a{ color: #333;}
.menu-list-plate a:last-child{ color: #ccc;}
.menu-list-plate span{ padding: 0px 10px; font-size: 0.16rem;}
.footer-end{ border-top: 1px #ccc solid; margin-top:0.24rem; text-align:center; }
.footer-menu{ width: 100%; height: 0.3rem; line-height: 0.36rem; margin: 0.2rem 0;}
.footer-menu a{color: #333; font-size: 0.24rem; display: inline-block;}
.footer-menu span{color: #ccc; font-size: 0.12rem;display: inline-block; padding: 0rem 0.12rem;}
.footer-end p{ font-size: 0.24rem; line-height: 0.38rem; color: #333;}
/*公共游戏列表页*/
.common-tag{ width: 6.6rem; padding: 0 0.3rem; font-size: 0.28rem; text-align: left; line-height: 0.96rem;height: 0.96rem;background: #fff; }
.common-tag span{color: #909090; font-family: 宋体;}
.common-tab{height: 0.82rem;line-height: 0.82rem;background: #F3F4F5;}
.common-tab a{ display: inline-block;font-size: 0.24rem; background:#eee;line-height: 0.44rem;padding: 0rem 0.24rem; color: #909090; margin-left: 0.1rem;
 border-radius: 0.26rem; }
 .common-tab a:first-child{ margin-left: 0;}
.common-tab a.current{background: rgba(0,182,237,0.1); color: #0089FF; }

.common-list{margin:0.1rem 0.3rem;}
.common-list li{ margin:0.24rem 0rem; display: block;}
.common-list-game{ display: block; width: 100%; min-height: 1.2rem; position: relative; z-index: 1;}
.common-img{ width: 1.2rem; height: 1.2rem;position: relative; float: left;display: block; overflow: hidden;border-radius: 0.08rem;}
.common-col{ width:4.5rem; margin-left: 0.16rem; float: left;}
.common-col strong{width: 68%; display: block; font-size: 0.28rem; font-weight: normal;}
.common-col i{display: block;font-size: 0.24rem;}
.common-url{ 
  height: 0.54rem; 
  width: 1.08rem; 
  text-align: center; 
  display: block; 
  line-height: 0.54rem; 
  color:#0089FF;
  background:rgba(0,182,237,.1);
  font-weight: 600;
  position: absolute; 
  right: 0;
  top:0.07rem; 
  border-radius: 0.54rem; 
  z-index: 2; 
  font-size: 0.24rem;
}
.common-tags{ font-size: 0.22rem;color: #999; margin: 0.06rem 0rem; display:block; overflow: hidden; line-height: 0.33rem; height: 0.33rem;}
.common-tags span{display: inline-block; position: relative;padding-left: 0.1rem;float: left;}
.common-tags i{
  display: inline-block;
  float: left;
  color: #666;
  padding-left: .15rem;
}
.common-tags span:first-child{padding-left: 0rem;}
.common-tags span:before{content:"."; position: absolute;bottom: 0.08rem; left: 0rem;  }
.common-tags span:first-child:before{content:'';}
.common-keyword{ display:block; overflow: hidden; }
.common-keyword span{color: #fff;display:inline-block;background:#FDB448;font-size: 0.1rem;padding:0.02rem 0.06rem; border-radius: 4px; margin-right: 0.06rem;}
.common-keyword span:first-child{margin-left: 0rem;}
.links{margin: 0rem 0.3rem; color: #999; padding-top: 0.3rem; padding-bottom: 0.4rem;  }
.links h3{line-height: 0.5rem; text-align: center; color: #505050; font-size: 0.28rem;}
.links a{display:inline-block;padding-right: 0.2rem; color: #999; font-size: 0.24rem;word-wrap: break-word;}
.common-tabs{float: left; width: 22%;overflow-y: scroll;z-index: 2; height: 100%;box-sizing: border-box;}
.common-tabs a{height: 0.8rem;  display: block; text-align: center; line-height: 0.8rem; font-size: 0.28rem; border-left: 0.03rem #F3F4F5 solid; border-bottom: 1px #eee solid;background: #F8F9FB;}
.common-tabs a.blue{border-left: 0.03rem #0089FF solid; color:#0089FF;background: #fff;}
.tabsCon{}
.common-mod{ width:78%; height: 100%; float:left;  overflow: hidden;background: #fff; overflow-y: scroll; box-sizing: border-box; padding-left: 4%;}
.common-mod li{ margin-top:0.3rem;}
.common-cols{ width:70%;}

.masking{ width: 100%;height: 100%;position: fixed; left: 0; top: 0; background: rgba(0,0,0,0.6); z-index: 108; display: none;}
.down-popup{ width:5.8rem; height:5.2rem; position: absolute; left: 50%;top:50%;margin-left: -2.9rem; margin-top: -2.6rem; background: #fff;
  border-radius: 0.1rem;}
.down-popup img{ border-radius: 0.1rem; width: 1.3rem; height: 1.3rem;position: absolute; left: 50%;top:0;margin-left: -0.65rem; margin-top: -0.65rem;}
.down-popup h3{ width: 100%; margin-top: 0.9rem; line-height: 0.4rem; font-size: 0.3rem; text-align: center;}
.down-popup-tips{ width: 80%; margin: 0.3rem auto; font-size: 0.22rem; line-height: 0.38rem; color: #999;}
.down-popup-tips p{ font-size: 0.26rem; padding-bottom: 0.2rem; color: #666;}
.down-popup-link{ width: 80%; margin: 0 auto; display: block; text-align: right;}
.down-popup-link label,.down-popup-link a{ margin-left: 0.4rem;}
.col-blue{ color: #0089FF;}
.down-pop{ width:5.8rem; height:6.3rem; position: absolute; left: 50%;top:50%;margin-left: -2.9rem; margin-top: -3.15rem; background: #fff;
  border-radius: 0.1rem;}
.down-pop img{ width: 100%;}
.down-pop h3{ width: 100%; margin-top: 0.2rem; line-height: 0.4rem; font-size: 0.3rem; text-align: center;}
.col-blue{ color: #0089FF;}
/*角标*/
.marker{width:1.2rem;height: 1.2rem;position: absolute; left: 0; top:0;display: block;}
.marker1{width:1.2rem;height: 1.2rem;position: absolute; left: 0; top:0;display: block;}
.marker img,.marker1 img{ width: 100%; height: auto;}
.top-selling-img .marker{width:0.96rem;height: 0.96rem;}
.game-icon  .marker{width:1.34rem;height: 1.34rem;}

.game-list {
  padding-left: .32rem;
    background: #ffffff;
}
.game-item {
  display: flex;
  width: 100%;
  height: 1.68rem;
  padding: .24rem .32rem .24rem 0;
  box-sizing: border-box;
  background: #ffffff;
  align-items: center;
  justify-content: space-between;
}
.game-items {
  display: flex;
  width: 100%;
  /* height: 1.68rem; */
  padding: .24rem .32rem .24rem 0;
  box-sizing: border-box;
  background: #ffffff;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #DDDDDD;
}
.games-img{
  width: 1.2rem;
  height: 1.2rem;
  margin-right: .3rem;
  position: relative;
  overflow: hidden;
  border-radius: 0.24rem;
}
.games-img img{
  width: 100%;
  height: 100%;
}
.p1 {
  font-size: .28rem;
  color: #323232;
  width: 3.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.p2 {
  color: #909090;
  font-size: .24rem;
  line-height: 0.33rem;
}
.game-content {
  /* height: 1.2rem; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.games-info {
  display: flex;
  width: 100%;
}
.game-content-warp{
  flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.game-p {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  width: 100%;
}
.summary {
  font-size: .2rem;
  color: #909090;
  width: 5.1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/* .game-tag {
  font-size: 0.2rem;
  width: 100%;
  overflow: hidden;
  height: 0.34rem;
  margin-top: 0.05rem;
} */
.game-tag span {
  padding: 0rem 2px;
  color: #fff;
  border-radius: 0.04rem;
  display: block;
  float: left;
  margin-right: 0.1rem;
  line-height: 0.36rem;
  font-family: 宋体;
  font-size: .2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #FF3B30;
  background: rgba(255, 237, 237, 1);
}
.game-tag span:last-child {
  margin-right: 0rem;
}

/*提示*/
.toast-container {
  line-height: 17px;
  position: fixed;
  z-index: 9999;
  bottom: 180px;
  left: 50%;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  opacity: 0
}

.toast-container.active {
  opacity: .9
}

.toast-message {
  font-size: 14px;
  padding: 10px 25px;
  text-align: center;
  color: #fff;
  border-radius: 6px;
  background-color: #323232
}

.tips{
  z-index: 99;
  width: 200px;
  font-size: 18px;
  background-color: rgba(0,0,0,0.8);
  height: 50px;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 6px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  letter-spacing: 2px;
}
.footer-box{
  width: 100%;
  height: 0.96rem;
}
.footer-tab{
  box-sizing: content-box;
  padding-top: .1rem;
  z-index: 99;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.96rem;
  background-color: #fff;
  padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
  padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
}
.footer-tab a{
  float: left;
  width: 33.3%;
  height: 100%;
}
.footer-tab img{
  display: block;
  width: 0.56rem;
  height: 0.56rem;
}
.footer-tab span{
  display: block;
  width: 100%;
  font-size: .2rem;
  color: #909090;
  text-align: center;
}
.logo{
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../images/logo.gif) no-repeat center;
  background-size: 2rem auto;
  background-color: #fff;
}
.default-box{
  float: left;
  width: 100%;
  height: auto;
}
.default-box img{
  display: block;
  margin: .7rem auto .1rem auto;
  width: 1.8rem;
  height: auto;
}
.default-text{
  padding-bottom: .3rem;
  font-size: .3rem;
  text-align: center;
  color: #ccc;
}
.breadcrumb-nav{
  box-sizing: border-box;
  padding: 0 .32rem;
  width: 100%;
  height: .96rem;
  line-height: .96rem;
  font-size: .28rem;
  color: #505050;
  margin-bottom: .16rem;
  background-color: #fff;
}
.breadcrumb-nav img{
  width: .16rem;
}
.desktop{
  z-index: 99;
  position: fixed;
  bottom: 1.36rem;
  right: .24rem;
  width: .96rem;
  height: .96rem;
}
.desktop-popout .box{
  position: relative;
  box-sizing: border-box;
  padding: 0.32rem 0.32rem 0.12rem 0.32rem;
  width: 100%;
  border-radius: 0.16rem 0.16rem 0 0;
  background-color: #fff;
}
.desktop-popout .desktop-title{
  padding-bottom: .4rem;
  width: 100%;
  font-size: 0.32rem;
  color: #000000;
  text-align: center;
}
.desktop-popout .desktop-img{
  width: 100%;
  height: 6.36rem;
}
.desktop-popout .close-img{
  position: absolute;
  right: 0.24REM;
  top: 0.24rem;
  width: .4rem;
  height: .4rem;
}
.gap{
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}