/* component shade */
.component-shade{
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.85;
  z-index: 999;
  top:0;
}

/* component-start-game */
.component-start-game{
  display: none;
  position: fixed;
  /* bottom: 0; */
  padding-bottom: .5rem;
  width: 100%;
  height: auto;
  z-index: 1001;
  top: 100%;
  background-color: #ffffff;
}
.component-start-game p{
  text-align: center;
}
.component-start-game p:nth-child(1){
  background-color: #F8F8F8;
  font-size: .28rem;
  height: .7rem;
  line-height: .7rem;
  color: #838383;
  text-align: right;
  padding-right: .2rem;
}
.component-start-game p:nth-child(2){
  margin-top: .5rem;
  font-size: .28rem;
  color: #666;
}
.component-start-game p:nth-child(3){
  margin-top: .1rem;
  font-size: .46rem;
  color: #FC8709;
}
.component-start-game p:nth-child(4){
  font-size: .3rem;
  margin: .3rem 0 .4rem 0;
  color: #000000;
}
.component-start-game p:nth-child(4) b{
  color: #FB0044;
}

.component-btn{
  text-align: center;
  color: #FFF;
  text-decoration: none;
  font-weight: normal;
  background: linear-gradient(to right, #12cdb0 , #12cd80);
  box-shadow: .05rem .02rem .05rem #80fdca;
  display: block;
  width: 60%;
  margin: .3rem auto 0 auto;
  height: .9rem;
  font-size: .36rem;
  line-height: .9rem;
  border-radius: .9rem;
}


/* ios Wx */
#component-wx-open{
  display: none;
  z-index: 999;
  position: fixed;
  width: 100%;
  height: 100%;
  top:0;
}
#component-wx-open img{
  margin: 0;
  width: 100%;
  height: auto;
}


/* .component-guide-box */
.component-guide-box{
  position: fixed;
  top: 100%;
  /* 此处font-size 用于计算偏移量不做字体大小 */
  font-size: .2rem; 
  width: 97%;
  left: 1.5%;
  height: auto;
  z-index: 999;
  background-color: #ffffff;
  border-radius: .2rem;
}
.component-guide-box .component-btn{
  margin-top: 42.67px;
  margin-bottom: 42.67px;
}
.component-guide-sub{
  margin-top: 17.07px;
  text-align: right;
}
.component-guide-sub span{
  position: relative;
  margin-right: 42.67px;
  font-size: 16px;
}
 .component-guide-sub a{
   position: relative;
   font-size: .32rem;
   color: #12cdb0;
   float: left;
   font-weight: normal;
   margin-left: 1rem;
   text-decoration: none;
 }
.component-guide-sub a img{
  position: absolute;
  left: -.5rem;
  top: .02rem;
  display: inline-block;
  width: .4rem;
  height: auto;
}
.component-guide-content p{
  text-align: center;
}


/* ios-copy */
.component-ios-copy{
  display: none
}
.component-ios-copy .safari{
  width: 2rem;
  height: 2rem;
  margin-top: .4rem;
}
.component-ios-copy .safari-copy{
  margin: .3rem 0 .7rem 0;
  font-size: .3rem;
}
.component-ios-copy .copy-content{
  position: relative;
  font-size: .25rem;
  color: #838383;
  background-color: #EDECED;
  height: .8rem;
  line-height: .8rem;
  margin: 0 auto;
  width: 6rem;
  margin-bottom: .6rem;
  border-radius: 1rem;
}
.component-ios-copy .copy-content p{
  width: 4.2rem;
  overflow-x: scroll;
  white-space:nowrap;
  display: inline-block;
  margin-left: .2rem;
  font-size: .32rem;
}
.component-ios-copy .copy-content span{
  position: absolute;
  top: .05rem;
  height: .7rem;
  line-height: .7rem;
  display: inline-block;
  background-color: #50C1A2;
  color: #ffffff;
  width: 1.4rem;
  text-align: center;
  border-radius: .7rem;
  margin-left: .14rem;
  font-size: .34rem;
}
 .copy-suc{
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  font-size: .3rem;
  color: #ffffff;
  border-radius: .1rem;
  padding: .2rem;
  background: #000000;
  text-align: center;
}


/* component-issafari */
.is-safari {
  display: none;
}
.component-safari .component-guide-content{
  text-align: center;
}
.component-safari .component-guide-content p{
  margin-top: .4rem;
  color: #12cdb0;
  font-size: .36rem;
}
.component-safari .component-guide-content p:nth-child(2){
  margin-top: .2rem;
  color: #838383;
  font-size: .26rem;
  padding-right: .2rem;
}
.component-safari .component-guide-content p:nth-child(3){
  margin-top: .3rem;
  font-size: .26rem;
  color: #666;
}
.component-safari .component-guide-content img{
  position: relative;
  margin: 0 auto;
  width: 6rem;
  height: 4.02rem;
  margin-top: .2rem;
}
.component-safari .component-btn{
  font-size: .3rem;
}
.component-safari .next{
  color: #838383;
  display: none;
  background: linear-gradient(to right, #EFEFEF , #EFEFEF);
  box-shadow: .05rem .02rem .05rem #EFEFEF;
}
.component-safari .next b{
  color: #FB8B0C;
  font-size: .44rem;
}
.component-safari .load-next{
  display: block;
}


/* no-safari */
.no-safari{
  display: none;
}

/* ios-sec-download */
.ios-click-download{
  display: none;
}
.ios-click-install{
  display: none;
  text-align: center;
}
.ios-sec-download .component-guide-content p{
  position: relative;
  margin-top: .5rem;
  font-size: .38rem;
}
.ios-sec-download .component-guide-content p:nth-child(2){
  margin-top: .3rem;
  font-size: .26rem;
  color: #666;
}
.ios-sec-download .component-guide-content p span{
  position: relative;
  width: .4rem;
  height: .4rem; 
  line-height: .4rem;
  vertical-align: middle; 
  border-radius: .4rem;
  display: inline-block;
  background-color: #21C5A0;
  color: #ffffff;
  margin-right: .1rem;
  margin-top: -.05rem;
  font-size: .35rem;
}

/* 下载 */
.ios-click-install .check-file{
  position: relative;
  font-size: .24rem;
  color: #4CCCB3;
  border-bottom: #4CCCB3 solid .01rem;
  text-align: center;
  margin: 0 auto;
  width: 48%;
  margin-bottom: .6rem;
  display: block;
}



/* install-describe */
.install-describe{
  display: none;
}
.install-describe .component-guide-content{
  text-align: center;
}
.install-describe .component-guide-content img{
  width: 5rem;
  height: auto;
  position: relative;
  margin-top: .5rem;
}
.install-describe .component-guide-content p{
  padding-top: .3rem;
  text-align: left;
  width: 6rem;
  font-size: .24rem;
  margin: 0 auto;
  color: #666;
}
.install-describe .component-guide-content p:nth-child(2){
  padding-top: .5rem;
}

/* ready-install-packge */
.ready-install-packge{
  display: none;
}
.ready-install-packge .component-guide-content{
  text-align: center;
}
.ready-install-packge .component-guide-content img{
  width: 3rem;
  height: auto;
  margin-top: .4rem;
}
.ready-install-packge .component-guide-content span{
  color: #FB8B0C;
  font-size: .4rem;
}
.ready-install-packge .component-guide-content p:nth-child(1){
  color: #4CCCB3;
  font-size: .33rem;
  margin-top: .6rem;
}
.ready-install-packge .component-guide-content p:nth-child(3){
  color: #888888;
  font-size: .26rem;
  margin-top: 1.1rem;
  margin-bottom: .4rem;
}


/* install-packge-loading */
.install-packge-loading{
  display: none;
}
.install-packge-loading .component-guide-content {
  text-align: center;
}
.install-packge-loading .component-guide-content p:nth-child(1){
  color: #4CCCB3;
  margin-top: 1rem;
  font-size: .4rem;
}
.install-packge-loading .component-guide-content p:nth-child(2){
  color: #838383;
  font-size: .28rem;
  margin-top: .2rem;
  margin-bottom: .7rem;
}
.install-packge-loading  p:nth-child(4){
  font-size: .26rem;
  color: #888888;
  text-align: center;
  margin-top: -.1rem;
  margin-bottom: .4rem;
}
.install-packge-loading .component-btn{
  background: linear-gradient(to right, #EFEFEF , #EFEFEF);
  box-shadow: .05rem .02rem .05rem #EFEFEF;
  color: #838383;
}


/* install-timeout */
.install-timeout{
  display: none;
}
.install-timeout .component-guide-content p:nth-child(1){
  color: #4CCCB3;
  margin-top: .6rem;
  font-size: .4rem;
}
.install-timeout .component-guide-content p:nth-child(2){
  color: #838383;
  font-size: .28rem;
  margin-top: .2rem;
  margin-bottom: .7rem;
}

/* incognito-mode */
.incognito-mode{
  display: none;
}
.incognito-mode  .component-guide-content {
  position: relative;
  margin-top: .4rem;
  width: 80%;
  left: 10%;
}
.incognito-mode .component-guide-content p{
  margin-top: .3rem;
  color: #888888;
  font-size: .29rem;
}

/* personal-guide */
.personal-guide{
  display: none;
}
.personal-guide .component-guide-content{
  position: relative;
  width: 80%;
  margin: .3rem auto 0 auto;
  padding: .4rem .3rem .1rem .3rem;
  font-size: .34rem;
  background-color: #ffffff;
}
.personal-guide .component-guide-content p{
  font-size: .34rem;
}
.personal-guide .component-guide-content p span:nth-child(1) {
  font-size: .34rem;
  color: #12cdb0;
}
.personal-guide .component-guide-content p span:nth-child(2) {
  color: #f05;
  font-size: .34rem;
}
.personal-guide .comp-video-play{
  width: 40%;
  position: relative;
  font-size: .28rem;
  display: block;
  margin: 0 auto .4rem auto;
  text-align: center;
  color: #12cdb0;
}
.personal-guide .comp-video-play img{
  position: relative;
  top: .03rem;
  width: .3rem;
  height: auto;
}

.ss_none{color:#999; text-align:center; padding:50px 0 50px 0;}
.ss_none img{width:100px; padding:0 0 30px; height:100px;}
.ss_none p{font-size:.3rem!important;height: 20px!important;width: 100%!important;}

/* 送首充 */

.send-charge{
  position: fixed;
  right: .24rem;
  bottom: 1.88rem;
  width: 1.5rem;
  height: auto;
  z-index: 200;
}
#send-charge{
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100%;
  text-align: center;
  display: none;
  top:0;
}
#send-charge img{
  position: relative;
  top: 24%;
  width: 4.8rem;
  height: auto;
  margin: 0 auto;
}
#send-charge .close-send-charge{
  position: absolute;
  right: 10%;
  top: 17%;
  z-index: 1001;
}