body{
  background-color: #fff;
}
.v1,.v2,.v3,.v4{
  position: absolute;
}
.v1{color: red;right: 40px;} 
.v2{color: gray;right: 30px;} 
.v3{color: blue;right: 20px;} 
.v4{color: lime;right: 10px;}
.sec{background-color: #fff}
.loginform,
.result{
  border-radius: 10px;
  border:1px #bfbfbf solid;
  margin-bottom: 3vw;
  padding: 3vw 0;
  position: relative;
}  
.loginform{/*display: none;*/}
.loginform .title,.result .title{
  font-size: 2.2vw;text-align: center;margin-bottom: 1vw;
}
.loginform .sub-title,
.loginform .email,
.loginform .username,
.loginform .password,
.loginform .verification-code,
.loginform .new-password,
.loginform .confirm-password,
.loginform .submit,
.loginform .forgetpassword-link,
.result .container{
  width: 30%;
  margin: auto;
  margin-bottom: 2vw; 
}
.loginform .sub-title{
  margin-bottom: 1.2vw; 
}
.loginform .label,
.loginform .input{
  display: inline-block;
} 
.loginform .label{
  margin-left: 4px;display: none;
}
.loginform .input{
  flex-grow: 1;position: relative;
}
.loginform input{
  border:0px;padding: 3px; padding-right: 60px;width: 100%;border-bottom:1px #bfbfbf solid; 
} 
.loginform input:focus{
  outline: 0px none;
  border-bottom:1px #737070 solid; 
}
.loginform input:focus::placeholder {
  color: transparent;
}

.loginform .submit{
  margin-bottom: 1vw;
}
.loginform .email,
.loginform .username,
.loginform .password,
.loginform .verification-code,
.loginform .new-password,
.loginform .forgetpassword-link,
.loginform .confirm-password{
     display: flex;
}
.loginform .forgetpassword-link{
  width: auto;text-decoration: underline;
}
.loginform .submit a.submit,.result a.login-link{
  width: 100%;
  background-color: #3252a3;
  color: #fff;
  display: inline-block;
  text-align: center;
  padding: 5px 0;
  letter-spacing: 4px;
  text-decoration: none;
}
.loginform .tips{
  position: absolute;
  bottom: 10px;
  left: 20px;
}

.result {display: none;}
.result .container{
  margin: 6vw auto;text-align: center;
}
.result a.login-link{
  margin-top: 3vw;
}
@media screen and (min-width: 0) and (max-width: 640px)
{
	.loginform, .result{
		width: 90%;
    	margin-top: 5vw;
	}
	.loginform .tips{
		margin: 0 5vw;position: static;
	}
	.loginform .sub-title, .loginform .email, .loginform .username, .loginform .password, .loginform .verification-code, .loginform .new-password, .loginform .confirm-password, .loginform .submit, .loginform .forgetpassword-link, .result .container{
		width: 48%;
	}
	.loginform .forgetpassword-link{
		text-align: center;display: block;
	}
}