* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  font-family: "PingFang SC", sans-serif;
  font-weight: 300;
  background-repeat: no-repeat;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.page-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  background: #CDF587 url(../images/51c4485e340c1f70e1bbaf2283f2f412.png);
  background-repeat: no-repeat;
  background-size: 100%;
  overflow: hidden;
  position: relative;
}

.page-title {
  margin-top: 0.74rem;
  width: 5.14rem;
  height: 2.8rem;
}

.user-info {
  width: 100%;
  height: 3.3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: 46%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.user-info-img-ipad, .user-info-img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.user-info-img-ipad {
  display: none;
}

.avatar {
  position: relative;
  margin-top: 0.1rem;
  width: 1.43rem;
  height: 1.43rem;
  border: 2px solid #5CBB7F;
  border-radius: 50%;
  vertical-align: middle;
}

.nickname {
  width: 4.76rem;
  height: 0.76rem;
  line-height: 0.76rem;
  text-align: center;
  font-size: 0.36rem;
  margin-left: -0.8rem;
  padding-left: 0.6rem;
  padding-right: 0.2rem;
  border-radius: 1.45rem 1.45rem;
  background-color: #B0EB91;
  color: #125A42;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.join {
  width: 100%;
  position: absolute;
  top: 3.5rem;
  font-size: 0.28rem;
  font-weight: bolder;
  color: #125A42;
  text-align: center;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.download {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.6rem;
  background: #F5FDE7;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.download .logo {
  width: 1.24rem;
  height: 1.24rem;

}

.download-tips p:first-child {
  font-size: 0.32rem;
  color: #4E4E4E;
  font-weight: bold;
}

.download-tips p:nth-child(2) {
  font-size: 0.28rem;
  color: #7F7F7F;
  margin-top: 0.15rem;
}


.download-btn {
  display: inline-block;
  width: 2.32rem;
  height: 0.74rem;
  position: relative;
}

.download-btn span{
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: 0.74rem;
  text-align: center;
  color: #fff;
  font-size: 0.32rem;
  font-weight: bold;
  background: url(data:image/png;base64,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) left top no-repeat;
  background-size: 100%,100%;
  position: absolute;
  left:0;
  top:0;
}