page {
  width: 100%;
  height: 100vh;
}
.main-bg {
  width: 100%;
  height: 100%;
  background:#fff;
  position: relative;
}


.main-bg image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
}

.login-top{
  width: 100%;
  height: 230rpx;
  z-index: 100;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-top .picture{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.login-top .picture .picture-bg{
  width: 160rpx;
  height: 160rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-name{
  width: 96rpx;
  height: 36rpx;
  text-align: center;
  position: relative;
  left: 85rpx;
  top: -22rpx;
}
.data-name image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
}
.data-name .name{
  font-size:24rpx;
  font-family:PingFang SC;
  font-weight:500;
  position: relative;
  color:rgba(255,255,255,1);
}


.login-bottom{
  width: 100%;
  height: 570rpx;
  z-index: 100;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 127rpx;
}
.login-bottom .info{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.login-bottom .info .info-bg{
  width: 640rpx;
  height: 570rpx;
  position: relative;
  background:rgba(255,255,255,1);
  box-shadow:0px 8px 10px 0px rgba(33,155,138,0.22);
  border-radius: 24rpx;
}
.login-bottom .info .info-bg .name{
  width:560rpx;
  height:88rpx;
  background:rgba(248,248,248,1);
  border-radius:44rpx;
  position: relative;
  margin-top: 97rpx;
  left: 39rpx;
}
.name-pw-bg{
  width: 34rpx;
  height: 34rpx;
  float: left;
  position: absolute;
  left: 41rpx;
  margin-top: 27rpx;
}
.info-input{
  float: left;
  width: 395rpx;
  height: 100%;
  position: absolute;
  margin-left: 107rpx;
}
.info-input input{
  margin-top: 15rpx;
  font-size:30rpx;
}
.login-bottom .info .info-bg .password{
  width:560rpx;
  height:88rpx;
  background:rgba(248,248,248,1);
  border-radius:44rpx;
  position: relative;
  margin-top: 29rpx;
  left: 39rpx;
}

.login-bottom .info .info-bg .login{
  width:560rpx;
  height:88rpx;
  background:#29b9a5;
  border-radius:44rpx;
  position: relative;
  margin-top: 82rpx;
  left: 39rpx;
  text-align: center;
  line-height: 88rpx;
  font-size:36rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(255,255,255,1);
}
.note-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.note {
  width: 640rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  position: relative;
  top: 130rpx;
}
.note .intro-note {
  width: 100%;
  display: flex;
  align-items: center;
  height: 40rpx;
  position: relative;
  z-index: 100;
}
.note .intro-note .note-title {
  font-size: 24rpx;
  color: #eee;
}
.note .intro-note image {
  width: 26rpx;
  height: 26rpx;
  margin-left: 7rpx;
  position:relative;
}
.note .intro-content {
  width: 100%;
  position: relative;
  top: -20rpx;
}
.note .intro-content .close {
  width: 100%;
  height: 30rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10rpx;
}
.note .intro-content .close image {
  width: 30rpx;
  height: 30rpx;
  position:relative;
}
.note .intro-content .program-intro {
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx 25rpx;
  font-size: 26rpx;
  color: #666;
  line-height: 36rpx;
  border-radius: 24rpx;
  background: #fff;
  text-indent: 52rpx;
}