.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 100%;
  background-color: #68a4d2;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  overflow: hidden;
}
.wrapper .outer_wrap {
  width: 17.06666667rem;
}
.wrapper .outer_wrap .message_wrap {
  display: flex;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  border: 0.128rem solid #fff;
  border-radius: 0.42666667rem;
  overflow: hidden;
  padding: 0.42666667rem;
}
.wrapper .outer_wrap .message_wrap .leftBox_wrap {
  display: flex;
  flex: 1;
  height: 350px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.wrapper .outer_wrap .message_wrap .leftBox_wrap .title {
  width: 8.53333333rem;
  height: 2.624rem;
  background-image: url("../images/home_bigTitle_n.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  -webkit-animation: fadeInTopLeft 0.5s linear 0.5s 1 forwards;
  animation: fadeInTopLeft 0.5s linear 0.5s 1 forwards;
}
.wrapper .outer_wrap .message_wrap .leftBox_wrap .smallTitle {
  width: 7.50933333rem;
  height: 1.32266667rem;
  background-image: url("../images/pc_smTitle_n.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0;
  opacity: 0;
  -webkit-animation: fadeInLeft 0.5s linear 1s 1 forwards;
  animation: fadeInLeft 0.5s linear 1s 1 forwards;
}
.wrapper .outer_wrap .message_wrap .leftBox_wrap .units {
  width: 5.888rem;
  height: 0.81066667rem;
  background-image: url("../images/home_units_n.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  -webkit-animation: fadeInBottomLeft 0.5s linear 1.2s 1 forwards;
  animation: fadeInBottomLeft 0.5s linear 1.2s 1 forwards;
}
.wrapper .outer_wrap .message_wrap .rightBox_wrap {
  display: flex;
  width: 40%;
  flex-wrap: wrap;
  justify-content: center;
}
.wrapper .outer_wrap .message_wrap .rightBox_wrap .qrCode {
  width: 6.4rem;
  height: 6.4rem;
  background-image: url("../images/qrCode_icon.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-animation: backInDown 1s linear 1 forwards;
  animation: backInDown 1s linear 1 forwards;
}
.wrapper .outer_wrap .message_wrap .rightBox_wrap .text {
  font-size: 0.46933333rem;
  text-align: center;
  margin-top: 0.42666667rem;
  color: #fff;
  opacity: 0;
  -webkit-animation: bounceIn 2s linear 1s 1 forwards;
  animation: bounceIn 2s linear 1s 1 forwards;
}
.wrapper .outer_wrap .message_wrap .rightBox_wrap .downloadImg {
  display: none;
  font-size: 0.46933333rem;
  text-align: center;
  margin-top: 0.42666667rem;
  padding: 0.21333333rem 0.42666667rem;
  letter-spacing: 2px;
  background-image: linear-gradient(to right, #75e1d1, #0ac5e6);
}
.wrapper .outer_wrap .message_wrap .rightBox_wrap .downloadImg:active {
  background-image: linear-gradient(45deg, #8ad6c9, #19879a);
}
.wrapper .outer_wrap .link_wrap {
  margin-top: 0.64rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  font-size: 0.46933333rem;
  color: #fff;
  -webkit-animation: lightSpeedInLeft 0.75s linear 1 forwards;
  animation: lightSpeedInLeft 0.75s linear 1 forwards;
}
.wrapper .outer_wrap .link_wrap input {
  flex: 1;
  height: 1.06666667rem;
  line-height: 1.06666667rem;
  margin-left: 0.21333333rem;
  padding-left: 0.34133333rem;
  font-size: 0.46933333rem;
  outline: none;
  border-radius: 0.21333333rem 0 0 0.21333333rem;
}
.wrapper .outer_wrap .link_wrap button {
  height: 1.06666667rem;
  line-height: 0.64rem;
  padding: 0.21333333rem 0.42666667rem;
  border-radius: 0 5px 5px 0;
  font-size: 0.46933333rem;
  cursor: pointer;
  color: #128cf1;
  position: relative;
  z-index: 9;
}
.wrapper .outer_wrap .warnning {
  font-size: 0.46933333rem;
  margin-top: 0.42666667rem;
  color: #FFE882;
  text-align: center;
  opacity: 0;
  -webkit-animation: fadeInUp 0.5s linear 1.5s 1 forwards;
  animation: fadeInUp 0.5s linear 1.5s 1 forwards;
}
@media screen and (max-width: 768px) {
  .wrapper {
    text-align: center;
    height: auto;
  }
  .wrapper .outer_wrap {
    width: 90%;
    position: static;
    transform: none;
    margin: 0.85333333rem 0;
  }
  .wrapper .outer_wrap .message_wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .wrapper .outer_wrap .message_wrap .leftBox_wrap {
    display: flex;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  .wrapper .outer_wrap .message_wrap .leftBox_wrap .title {
    width: 13.84533333rem;
    height: 4.24533333rem;
  }
  .wrapper .outer_wrap .message_wrap .leftBox_wrap .smallTitle {
    width: 12.20266667rem;
    height: 2.176rem;
    margin: 0.64rem 0;
  }
  .wrapper .outer_wrap .message_wrap .leftBox_wrap .units {
    width: 9.536rem;
    height: 1.30133333rem;
  }
  .wrapper .outer_wrap .message_wrap .rightBox_wrap {
    width: auto;
    margin-left: 0rem;
    margin-top: 0.85333333rem;
  }
  .wrapper .outer_wrap .message_wrap .rightBox_wrap .qrCode {
    width: 8.53333333rem;
    height: 8.53333333rem;
  }
  .wrapper .outer_wrap .message_wrap .rightBox_wrap .text {
    width: 100%;
    font-size: 0.64rem;
  }
  .wrapper .outer_wrap .message_wrap .rightBox_wrap .downloadImg {
    font-size: 0.68266667rem;
    display: block;
    color: #fff;
    border-radius: 0.42666667rem;
  }
  .wrapper .outer_wrap .link_wrap {
    flex-wrap: wrap;
    justify-content: center;
  }
  .wrapper .outer_wrap .link_wrap .tips {
    display: block;
    width: 100%;
    margin-bottom: 0.42666667rem;
    font-size: 0.68266667rem;
  }
  .wrapper .outer_wrap .link_wrap #link {
    display: block;
    flex: 1;
    margin: 0 0 0.42666667rem;
    font-size: 0.59733333rem;
    height: 1.28rem;
    line-height: 1.28rem;
  }
  .wrapper .outer_wrap .link_wrap .btn {
    margin-bottom: 0.42666667rem;
    font-size: 0.59733333rem;
    height: 1.28rem;
    line-height: 0.85333333rem;
  }
  .wrapper .outer_wrap .warnning {
    margin-top: 0rem;
    font-size: 0.64rem;
  }
}