.login{
  background-color: #fff;
  height:100vh;
}
.login .head{
  background-color: var(--main-color);
  position: relative;
  height:554rpx;
}
.login .head .bg{
  width: 450rpx;height:486rpx;
  position: absolute;
  right:-40rpx;top:204rpx;
}
.login .head .title{
  font-size: 40rpx;
  position: absolute;
  left:40rpx;
  font-weight: 500;
  bottom:140rpx;
  display: flex;
  align-items: center;
}
.login .head .title .t-logo{
  height: 36rpx;
  margin-left: 10rpx;
}
.login .head .logo{
  position: absolute;
  width: 136rpx;height: 136rpx;
  bottom:218rpx;left:54rpx;
}
.login .input-area{
  border-radius: 30rpx 30rpx 0px 0px;
  margin-top:-80rpx;
  background-color: #fff;
  position: relative;
  padding:16rpx 50rpx 40rpx 50rpx;
}
.input-container{
  display: flex;
  align-items: center;
  background-color:#F7F7F7;
  border-radius: 18rpx;
  margin-top:24rpx;
  padding-left:30rpx;
}
.login .input-area .input{
  height: 100rpx;
  font-weight: 500;
  font-size: 36rpx;
}
.login .input-area .ph-class{
  font-weight: normal;
  font-size: 32rpx;
}
.input-container .input{
  flex: 1;
}
.input-container .icon{
  width:44rpx;height:44rpx;
  padding:20rpx;
}
.login .input-area .input.error{
  background-color: rgb(252, 198, 198);
}

.login .input-area .forgot-pwd{
  display:flex;
  justify-content: flex-end;
}
.login .input-area .forgot{
  color:#888888;
  font-size:24rpx;
  padding:30rpx 0 30rpx 30rpx;
}

.login .input-area .button{
  border-radius: 20rpx;
}

.agree{
  font-size: 28rpx;
  margin-top:50rpx;
  text-align: center;
}
.agree .yellow{
  color:var(--main-color);
  margin: 0;
}
.agree .policy{
  display: inline-flex;
  align-items: center;
}