.box {
  background-color: #f1f2f8;
  overflow-x: hidden;
  width: 100vw;
}
.box .navigation {
  background: ;
  background-size: 100%;
  height: 10vw;
  width: 100vw;
  position: fixed;
  padding: 0 3.06666667vw;
  top: 0;
  z-index: 999;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.box .navigation .left {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 3.2vw;
  color: #fff;
}
.box .navigation .left:hover {
  color: #fff;
  text-decoration: none;
}
.box .navigation .left img {
  width: 8.26666667vw;
  margin-right: 1.33333333vw;
}
.box .navigation .right {
  width: 21.33333333vw;
  height: 7.46666667vw;
  border-radius: 26.66666667vw;
  font-size: 3.2vw;
  border: 2px solid #f18330;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f18330;
  text-decoration: none;
}
.box .navigation .right:hover {
  color: #f18330;
  text-decoration: none;
}
.box .pic1 {
  background: ;
  width: 100%;
  background-size: 100%;
  height: 95.06666667vw;
  position: relative;
}
.box .form-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 3.73333333vw;
  top: 5.33333333vw;
}
.box .form-data .form-control {
  width: 56.93333333vw;
  height: 8.26666667vw;
  border-radius: 1.6vw;
  background-color: #dba07b;
  font-size: 3.2vw;
  margin-bottom: 1.6vw;
  padding: 0 2.8vw;
}
.box .form-data input::placeholder {
  color: #fff;
  font-size: 3.2vw;
}
.box .form-data .submit-bottom {
  cursor: pointer;
  width: 48.13333333vw;
  height: 8.8vw;
  background: ;
  background-size: cover;
}
.box .form {
  width: 78.5vw;
  height: 66.8vw;
}
.box .form__header {
  width: 82.53333333vw;
  height: 27.73333333vw;
  border-radius: 2.66666667vw;
  padding: 4vw 4.93333333vw;
  font-size: 5.06666667vw;
  color: #fff;
  z-index: 100;
  background-color: #5463ff;
  position: relative;
}
.box .form__header img {
  width: 13.06666667vw;
  position: absolute;
  top: 2vw;
  right: 1.46666667vw;
}
.box .form__body {
  width: 56.93333333vw;
  z-index: 101;
  display: flex;
  position: absolute;
  align-items: center;
  border-radius: 2.66666667vw;
  flex-direction: column;
  left: 8vw;
  top: 22.66666667vw;
}
.box .form__body__title {
  font-size: 6vw;
  color: #5463ff;
  margin-bottom: 2.26666667vw;
}
.box .form__body__tip {
  font-size: 3.2vw;
  color: #171717;
  margin-bottom: 4.26666667vw;
}
.box .pic2 {
  background: ;
  width: 100%;
  background-size: 100%;
  height: 67.73333333vw;
  position: relative;
}
.box .pic2 .form-info {
  position: absolute;
  left: 10.66666667vw;
  top: 0vw;
  background: ;
  background-size: cover;
}
.box .pic3 {
  background: ;
  width: 100%;
  background-size: 100%;
  height: 115.73333333vw;
  position: relative;
}
.box .pic4 {
  background: ;
  width: 100%;
  background-size: 100%;
  height: 125.6vw;
  position: relative;
}
.box .pic5 {
  background: ;
  background-size: cover;
  width: 100%;
  height: 145.73333333vw;
  position: relative;
}
.box .pic5 .form-info {
  position: absolute;
  left: 12vw;
  top: 12vw;
  background: ;
  background-size: cover;
}
.box .pic5__img {
  width: 37.33333333vw;
  position: absolute;
  left: 32.66666667vw;
  top: 89.06666667vw;
}
.box .pic6 {
  background: ;
  width: 100%;
  background-size: 100%;
  height: 90.26666667vw;
  margin-top: -0.26666667vw;
  position: relative;
}
.box .pic6 .qrcode {
  position: absolute;
  left: 28.66666667vw;
  top: 22.66666667vw;
  width: 43.6vw;
}
.alert-message-success {
  position: fixed;
  top: 10px;
  width: 300px;
  right: calc(50% - 150px);
  z-index: 1000;
}
.alert-message-danger {
  position: fixed;
  top: 100px;
  width: 300px;
  right: calc(50% - 150px);
  z-index: 1000;
}
.error {
  color: red;
  margin-top: 20px;
  line-height: 0px;
}