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


/* component-start-game */
.component-start-game{
  display: none;
  position: fixed;
  padding-bottom: 42.67px;
  width: 100%;
  height: auto;
  z-index: 10001;
  top: 100%;
  background-color: #ffffff;
  font-size: 0px;
}
.component-start-game p{
  text-align: center;
}
.component-start-game p:nth-child(1){
  background-color: #F8F8F8;
  font-size: 23.89px;
  height: 59.73px;
  line-height: 59.73px;
  color: #838383;
  text-align: right;
  padding-right: 17.07px;
}
.component-start-game p:nth-child(2){
  margin-top: 42.67px;
  font-size: 23.89px;
  color: #666;
}
.component-start-game p:nth-child(3){
  margin-top: 8.53px;
  font-size: 39.25px;
  color: #FC8709;
}
.component-start-game p:nth-child(4){
  font-size: 25.6px;
  margin: 25.6px 0 34.13px 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: 4.267px 1.707px 4.267px #80fdca;
  display: block;
  width: 60%;
  margin: 25.6px auto 0 auto;
  height: 76.8px;
  font-size: 30.72px;
  line-height: 76.8px;
  border-radius: 76.8px;
}


/* ios Wx */
#component-wx-open{
  display: none;
  z-index: 9999;
  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: 17.07px; 
  width: 97%;
  left: 1.5%;
  height: auto;
  z-index: 10000;
  background-color: #ffffff;
  border-radius: 17.07px;
}
.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: 24.75px;
}

.component-guide-sub a{
  position: relative;
  font-size: 24px;
  color: #12cdb0;
  float: left;
  font-weight: normal;
  margin-left: 85.33px;
  text-decoration: none;
}
.component-guide-sub a img{
  position: absolute;
  left: -42.67px;
  top: 1.7px;
  display: inline-block;
  width: 34.13px;
  height: auto;
}
.component-guide-content p{
  text-align: center;
}

.component-guide-content{
  width: 100%;
}

/* ios-copy */
.component-ios-copy{
  display: none
}
.component-ios-copy .safari{
  width: 170.67px;
  height: 170.67px;
  margin-top: 34.13px;
}
.component-ios-copy .safari-copy{
  margin: 25.6px 0 59.73px 0;
  font-size: 25.6px; 
}
.component-ios-copy .copy-content{
  position: relative;
  font-size: 31.33px;
  color: #838383;
  background-color: #EDECED;
  height: 68.27px;
  line-height: 68.27px;
  margin: 0 auto;
  width: 512px;
  margin-bottom: 51.2px;
  border-radius: 85.33px;
}
.component-ios-copy .copy-content p{
  width: 358.4px;
  overflow-x: scroll;
  white-space:nowrap;
  display: inline-block;
  margin-left: 17.07px;
}
.component-ios-copy .copy-content span{
  position: absolute;
  top: 4.27px;
  height: 59.73px;
  line-height: 59.73px;
  display: inline-block;
  background-color: #50C1A2;
  color: #ffffff;
  width: 119.47px;
  text-align: center;
  border-radius: 59.73px;
  margin-left: 11.95px;
}
.component-ios-copy .copy-suc{
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  font-size: 25.6px;
  color: #ffffff;
  border-radius: 8.53px;
  padding: 17.07px;
  background: #000000;
}


/* component-issafari */
.is-safari {
  display: none;
}
.component-safari .component-guide-content{
  text-align: center;
}
.component-safari .component-guide-content p{
  margin-top: 34.13px;
  color: #12cdb0;
  font-size: 30.72px;
}
.component-safari .component-guide-content p:nth-child(2){
  margin-top: 17.07px;
  color: #838383;
  font-size: 22.19px;
  padding-right: 17.07px;
}
.component-safari .component-guide-content p:nth-child(3){
  margin-top: 25.6px;
  font-size: 22.19px;
  color: #666;
}
.component-safari .component-guide-content img{
  position: relative;
  margin: 0 auto;
  width: 512px;
  height: 343.04px;
  margin-top: 17.07px;
}
.component-safari .component-btn{
  font-size: 25.6px;
}
.component-safari .next{
  color: #838383;
  display: none;
  background: linear-gradient(to right, #EFEFEF , #EFEFEF);
  box-shadow: 4.27px 1.71px 4.27px #EFEFEF;
}
.component-safari .next b{
  color: #FB8B0C;
  font-size: 37.55px;
}
.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: 42.67px;
  font-size: 32.43px;
}
.ios-sec-download .component-guide-content p:nth-child(2){
  margin-top: 25.6px;
  font-size: 22.19px;
  color: #666;
}
.ios-sec-download .component-guide-content p span{
  position: relative;
  width: 34.13px;
  height: 34.13px; 
  line-height: 34.13px;
  vertical-align: middle; 
  border-radius: 34.13px;
  display: inline-block;
  background-color: #21C5A0;
  color: #ffffff;
  margin-right: 8.53px;
  margin-top: -4.27px;
}

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



/* install-describe */
.install-describe{
  display: none;
}
.install-describe .component-guide-content{
  text-align: center;
}
.install-describe .component-guide-content img{
  width: 426.67px;
  height: auto;
  position: relative;
  margin-top: 42.67px;
}
.install-describe .component-guide-content p{
  padding-top: 25.6px;
  text-align: left;
  width: 512px;
  font-size: 20.48px;
  margin: 0 auto;
  color: #666;
}
.install-describe .component-guide-content p:nth-child(2){
  padding-top: 42.67px;
}

/* 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: 256px;
  height: auto;
  margin-top: 34.13px;
}
.ready-install-packge .component-guide-content span{
  color: #FB8B0C;
  font-size: 34.13px;
}
.ready-install-packge .component-guide-content p:nth-child(1){
  color: #4CCCB3;
  font-size: 28.16px;
  margin-top: 51.2px;
}
.ready-install-packge .component-guide-content p:nth-child(3){
  color: #888888;
  font-size: 22.18px;
  margin-top: 93.87px;
  margin-bottom: 34.13px;
}


/* 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: 51.2px;
  font-size: 34.13px;
}
.install-packge-loading .component-guide-content p:nth-child(2){
  color: #838383;
  font-size: 23.89px;
  margin-top: 17.07px;
  margin-bottom: 59.73px;
}
.install-packge-loading  p:nth-child(4){
  font-size: 22.18px;
  color: #888888;
  text-align: center;
  margin-top: -8.53px;
  margin-bottom: 34.13px;
}
.install-packge-loading .component-btn{
  background: linear-gradient(to right, #EFEFEF , #EFEFEF);
  box-shadow: 4.27px 1.71px 4.27px #EFEFEF;
  color: #838383;
}

.copy-suc{
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  font-size: 25.6px;
  color: #ffffff;
  border-radius: 8.53px;
  padding: 17.07px;
  background: #000000;
  text-align: center;
}

/* install-timeout */
.install-timeout{
  display: none;
}
.install-timeout .component-guide-content p:nth-child(1){
  color: #4CCCB3;
  margin-top: 51.2px;
  font-size: 34.13px;
}
.install-timeout .component-guide-content p:nth-child(2){
  color: #838383;
  font-size: 23.89px;
  margin-top: 17.07px;
  margin-bottom: 59.73px;
}

/* incognito-mode */
.incognito-mode{
  display: none;
}
.incognito-mode  .component-guide-content {
  position: relative;
  margin-top: 34.13px;
  width: 80%;
  left: 10%;
}
.incognito-mode .component-guide-content p{
  margin-top: 25.6px;
  color: #888888;
  font-size: 24.75px;
}

/* personal-guide */
.personal-guide{
  display: none;
}
.personal-guide .component-guide-content{
  position: relative;
  width: 80%;
  margin: 25.6px auto 0 auto;
  padding: 34.13px .25.6px .8.53px 25.6px;
  font-size: 29px;
  background-color: #ffffff;
}
.personal-guide .component-guide-content p{
  font-size: 30px;
}
.personal-guide .component-guide-content p span:nth-child(1) {
  font-size: 30px;
  color: #12cdb0;
}
.personal-guide .component-guide-content p span:nth-child(2) {
  color: #f05;
  font-size: 30px;
}
.personal-guide .comp-video-play{
  width: 40%;
  position: relative;
  font-size: 23.9px;
  display: block;
  margin: 0 auto 34.13px auto;
  text-align: center;
  color: #12cdb0;
}
.personal-guide .comp-video-play img{
  position: relative;
  top: 2.56px;
  width: 25.6px;
  height: auto;
}