html {
  font-size: 100px;
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  background: #fff;
}

.container {
  position: relative;
  width: 100%;
  max-width: 1200px !important;
}

.browser {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1031;
}

.browser-mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1029;
  background: rgba(0, 0, 0, 0.8);
}

.browser-icon {
  width: 0.5rem;
  height: 0.44rem;
  position: absolute;
  display: block;
  top: 0.1rem;
  right: 0.18rem;
  z-index: 1030;
  background: url('../images/browser_jt_icon.4b799.png') no-repeat center;
  background-size: 0.5rem 0.44rem;
}

.browser-text {
  width: 1.56rem;
  height: 0.4rem;
  display: flex;
  position: absolute;
  top: 0.74rem;
  right: 0.15rem;
  z-index: 1030;
  background: #fff;
  background-size: 0.3rem 0.3rem;
  border-radius: 1.56rem;
}

.browser-text .text-icon {
  margin: 0.06rem 0 0 0.14rem;
  width: 0.3rem;
  height: 0.3rem;
  background: url('../images/browser_icon.83f8d.png') no-repeat;
  background-size: 0.3rem 0.3rem;
}

.browser-text .text-p {
  padding: 0.085rem 0 0 0.08rem;
  flex: 1;
  font-size: 0.16rem;
  color: #999;
}

.ios-download {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1031;
}

.download-mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1029;
  background: rgba(0, 0, 0, 0.8);
}

.download-qrcode {
  position: absolute;
  margin: -0.7rem 0 0 -0.65rem;
  width: 1.3rem;
  height: 1.4rem;
  top: 50%;
  left: 50%;
  z-index: 1031;
}

.download-qrcode img {
  width: 1.3rem;
  height: 1.3rem;
}

.download-qrcode p {
  text-align: center;
  padding: 0.08rem 0 0 0;
  font-size: 0.14rem;
  color: #fff;
  line-height: 0.18rem;
}

.index-banner {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  height: 11.36rem;
  background: url('../images/index_b_bg.a874d.png') no-repeat top center;
  background-size: cover;
  z-index: 1;
}

header .logo {
  display: flex;
  align-items: center;
  padding: 0.4rem 0 0 0;
  font-weight: 400;
  font-size: 0.16rem;
  color: #ffffff;
}

header .logo span {
  margin-left: 0.1rem;
}

.index-banner-img {
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.index-banner-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.09rem 0 0 0;
  position: relative;
}

.index-banner-button:after {
  content: '';
  display: block;
  clear: both;
}

.index-banner-button a.android {
  float: left;
  display: block;
  width: 4.58rem;
  height: 1.28rem;
  background: url('../images/android_btn.88131.png') no-repeat;
  background-size: 4.58rem 1.28rem;
  cursor: pointer;
}

.index-banner-button a.ios {
  margin: 0 0 0 1rem;
  float: left;
  display: block;
  width: 4.58rem;
  height: 1.28rem;
  background: url('../images/ios_btn.b42ca.png') no-repeat;
  background-size: 4.58rem 1.28rem;
  cursor: pointer;
}

.index-content1 {
  position: relative;
  margin: 0 auto ;
  width: 100%;
  max-width: 1920px;
  height: 9.49rem;
  background: url('../images/banner1.45d47.png') no-repeat center;
}

.index-content1::after {
  content: '';
  display: block;
  clear: both;
}

.index-content1 .container {
  height: 9.49rem;
}

.index-content1-img {
  position: absolute;
  bottom: -0.06rem;
  left: 0.15rem;
  width: 5.1rem;
  z-index: 0;
}

.index-content1-img img {
  border-bottom: 0;
  width: 100%;
}

.index-content1-text {
  position: relative;
  margin: 4.8rem 0 0 0;
  float: right;
  padding: 0 0 0 1.35rem;
  background-size: 0.54rem 0.66rem;
  z-index: 1;
}

.index-content1-text .big-title {
  font-size: 0.8rem;
  font-weight: bold;
  color: #ffffff;
}

.index-content1-text .small-title {
  padding: 0.45rem 0 0 0;
  font-size: 0.34rem;
  font-weight: bold;
  color: #bb8ced;
}

.index-content2 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  height: 10.52rem;
  background: url('../images/banner2.33587.png') no-repeat center;
}

.index-content2::after {
  content: '';
  display: block;
  clear: both;
}

.index-content2 .container {
  height: 10.52rem;
}

.index-content2-img {
  position: absolute;
  right: 0.15rem;
  width: 5.5rem;
  z-index: 0;
  bottom: -0.06rem;

}

.index-content2-img img {
  border-bottom: 0;
  width: 100%;
}

.index-content2-text {
  position: relative;
  margin: 3.87rem 0 0 0;
  float: left;
  padding: 0 0 0 1.01rem;
  background-size: 0.56rem 0.68rem;
  z-index: 1;


}

.index-content2-text .big-title {
  font-size: 0.8rem;
  font-weight: bold;
  color: #ffffff;
  text-align: right;

}

.index-content2-text .small-title {
  padding: 0.45rem 0 0 0;
  font-size: 0.34rem;
  font-weight: bold;
  color: #bb8ced;
  text-align: right;

}

.index-content3 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  height: 10.76rem;
  background: url('../images/banner3.55971.png') no-repeat center;
}

.index-content3::after {
  content: '';
  display: block;
  clear: both;
}

.index-content3 .container {
  height: 10.71rem;
}

.index-content3-img {
  position: absolute;
  left: 0.15rem;
  width: 5.1rem;
  z-index: 0;
  bottom: -0.1rem;

}

.index-content3-img img {
  border-bottom: 0;
  width: 100%;
  
}

.index-content3-text {
  position: relative;
  margin: 4.8rem 0 0 0;
  float: right;
  padding: 0 0 0 1.35rem;
  background-size: 0.54rem 0.66rem;
  z-index: 1;
}

.index-content3-text .big-title {
  font-size: 0.8rem;
  font-weight: bold;
  color: #ffffff;

}

.index-content3-text .small-title {
  display: inline-block;
  padding: 0.45rem 0 0 0;
  font-size: 0.34rem;
  font-weight: bold;
  color: #bb8ced;

}

footer {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 3.62rem;
  max-width: 1920px;
  background: #412380;
  padding-bottom: 0.44rem;
}

footer .footer-title {
  padding: 1.18rem 0 0 0;
  font-size: 0.36rem;
  line-height: 0.38rem;
  color: #fff;
  text-align: center;
}

footer .footer-link {
  padding: 0.42rem 0 0 0;
}

footer .footer-link::after {
  content: '';
  display: block;
  clear: both;
}

footer .footer-link-item {
  padding: 0.04rem 0;
  float: left;
  width: 33.33%;
  font-size: 0.18rem;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

footer .advice {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 0.2rem;
  color: #C8C8C8;
  margin-top: 0.44rem;
  white-space: nowrap;
}

footer .advice .copyright {
  font-size: 0.21rem;
  color: #FFFFFF;
  margin-left: 0.1rem;
  white-space: nowrap;
}

@media screen and (max-width: 1164px) {
  .index-content1-img {
    width: 4.2rem;
  }

  .index-content2-img {
    width: 4.6rem;
  }

  .index-content3-img {
    width: 4.6rem;
  }
}

@media screen and (max-width: 767px) {
  header .logo {
    padding: 0.24rem 0 0 0;
  }

  .index-banner {
    height: 8.2rem;
    background: url('../images/index_b_bg.a874d.png') no-repeat center;
    background-size: cover;
  }

  .index-banner-title {
    padding: 1.4rem 0 0 0;
  }

  .index-banner-title p.big {
    font-size: 0.54rem;
    color: #fff;
    text-align: center;
  }

  .index-banner-title p.small {
    padding: 0 0 0 0.18rem;
    font-size: 0.26rem;
    color: #96a0dd;
    letter-spacing: 0.2rem;
    text-align: center;
  }


  .index-banner-img {
    padding: 0.8rem 0 0 0;
    margin: 0 auto;
    text-align: center;
    position: relative;
  }
  .index-banner-img  img{
    width: 3rem;
  }
  .index-banner-button {
    flex-direction: column;
    padding: 0.8rem 0 0 0;
    position: relative;
  }


  .index-banner-button a.android {
    margin: 0 auto;
    float: none;

    width: 2.29rem;
    height: 0.64rem;
    background: url('../images/android_btn.88131.png') no-repeat;
    background-size: 2.29rem 0.64rem;
    cursor: pointer;
  }
  
  .index-banner-button a.ios {
    margin: 0.1rem auto 0;
    float: none;

    width: 2.29rem;
    height: 0.64rem;
    background: url('../images/ios_btn.b42ca.png') no-repeat;
    background-size: 2.29rem 0.64rem;
    cursor: pointer;
  }

  .index-content1 {
    height: 8.3rem;
    border-bottom: 0.04rem solid #a880fc;
  }

  .index-content1 .container {
    height: 8.3rem;
  }

  .index-content1-img {
    margin: 0 0 0 -1.3rem;
    left: 50%;
    width: 2.6rem;
  }

  .index-content1-text {
    margin: 1.8rem 0 0 0;
    float: none;
    padding: 0 ;
    text-align: center;
    background-size: 0.36rem 0.44rem;
  }

  .index-content1-text .big-title {
    padding: 0 ;
    font-size: 0.36rem;
  }

  .index-content1-text .small-title {
    padding: 0.26rem 0 0 0;
    font-size: 0.18rem;
    text-align: center;
  }

  .index-content2 {
    height: 8.3rem;
    border-bottom: 0.04rem solid #a880fc;

  }

  .index-content2 .container {
    height: 8.3rem;
  }

  .index-content2-img {
    margin: 0 0 0 -1.3rem;
    left: 50%;
    width: 2.6rem;
  }

  .index-content2-text {
    margin: 1.8rem 0 0 0;
    float: none;
    padding: 0 ;
    background-size: 0.36rem 0.44rem;
  }

  .index-content2-text .big-title {
    padding: 0 ;
    font-size: 0.36rem;
    text-align: center;

  }

  .index-content2-text .small-title {
    padding: 0.26rem 0 0 0;
    font-size: 0.18rem;
    text-align: center;
  }

  .index-content3 {
    height: 8.3rem;
    border-bottom: 0.04rem solid #a880fc;

  }

  .index-content3 .container {
    height: 8.3rem;
  }

  .index-content3-img {
    margin: 0 0 0 -1.3rem;
    left: 50%;
    width: 2.6rem;
  }

  .index-content3-text {
    margin: 1.8rem 0 0 0;
    float: none;
    padding: 0 ;
    background-size: 0.36rem 0.44rem;
  }

  .index-content3-text .big-title {
    padding: 0 ;
    font-size: 0.36rem;
    text-align: center;
  }

  .index-content3-text .small-title {
    display: block;
    padding: 0.26rem 0 0 0;
    font-size: 0.18rem;
    text-align: center;

  }

  footer {
    margin: 0 auto;
    width: 100%;
    height: 3.6rem;
    max-width: 1920px;
    background: #412380;
  }

  footer .footer-title {
    padding: 0.6rem 0 0 0;
    font-size: 0.24rem;
    line-height: 0.26rem;
    color: #fff;
    text-align: center;
  }

  footer .footer-link {
    padding: 0.26rem 0 0 0;
  }

  footer .footer-link::after {
    content: '';
    display: block;
    clear: both;
  }

  footer .footer-link-item {
    width: 100%;
    font-size: 0.14rem;
  }
  footer .advice {
    display: block;
    margin-top: 0.14rem;
    font-size: 0.12rem;
  }
  footer .advice span{
    display: block;
    text-align: center;
    margin-top: 0.05rem;
  }
  footer .advice .copyright {
    margin-top: 0.14rem;
    font-size: 0.16rem;
  }

}