/*html, body { height: 98%; }*/
body { background: url('../img/background/loginbackground2.jpg') center center no-repeat fixed; background-size: cover; }

.LoginBox { background: #FFF; width: 600px; height: 500px; position: absolute; left: calc(50% - 300px); top: calc(50% - 250px); border-radius: 0 60px 0 60px; padding: 20px 60px; box-shadow: 0 0 10px 3px #999; }
.LoginBox > label.t1 { display: block; font-size: 32px; text-align: center; font-weight: 900; }
.LoginBox > label.t2 { display: block; font-size: 24px; text-align: center; }
.LoginBox > input.t3 { text-align: center; font-size: 24px; border-radius: 24px 0.25rem 0.25rem 24px; margin-top: 20px; }
.LoginBox > input.t4 { text-align: center; font-size: 24px; border-radius: 0.25rem 24px 24px 0.25rem; margin-top: 20px; }
.LoginBox > input.t3::placeholder, .LoginBox > input.t4::placeholder, .LoginBox > div.t5 > input.t6::placeholder { color: #CCC; }
.LoginBox > div.t5 { margin-top: 20px; }
.LoginBox > div.t5 > input.t6 { width: calc(100% - 120px); text-align: center; font-size: 24px; border-radius: 24px 0 0 24px; display: inline-block; border-right: none; }
.LoginBox > div.t5 > span.t7 { display:inline-block; width: 118px; vertical-align:top; border: 1px solid #CCC; border-left: none; }
.LoginBox > div.t5 > span.t7 > img.t8 { height: 48px; cursor: pointer; }
.LoginBox > label.t9 { display: block; height: 50px; font-size: 20px; margin-top: 20px; color: red; text-align: center; }

.LoginBox > .t10 { text-align: center; }
.LoginBox > .t10 > button.t11 { width: 50%; height: 50px; margin: auto; border-radius: 24px; }
.LoginBox > .t12 { margin-top: 20px; text-align: center; }
.LoginBox > .t14 { display: none; }
.LoginBox ~ .footer { position: absolute; bottom: 20px; width: 100%; color: #FFF; }
/*ForgetPwdBox*/
.ForgetPwdBox { background: #FFF; width: 600px; height: 500px; position: absolute; left: calc(50% - 300px); top: calc(50% - 250px); border-radius: 0 60px 0 60px; padding: 20px 60px; box-shadow: 0 0 10px 3px #999; }
.ForgetPwdBox > label.t1 { display: block; font-size: 32px; text-align: center; font-weight: 900; }
.ForgetPwdBox > label.t2 { display: block; font-size: 24px; text-align: center; }
.ForgetPwdBox > input.t3 { text-align: center; font-size: 24px; border-radius: 24px 0.25rem 0.25rem 24px; margin-top: 20px; }
.ForgetPwdBox > input.t4 { text-align: center; font-size: 24px; border-radius: 0.25rem 24px 24px 0.25rem; margin-top: 20px; }
.ForgetPwdBox > input.t3::placeholder, .ForgetPwdBox > input.t4::placeholder, .ForgetPwdBox > div.t5 > input.t6::placeholder { color: #CCC; }
.ForgetPwdBox > div.t5 { margin-top: 20px; }
.ForgetPwdBox > div.t5 > input.t6 { width: calc(100% - 120px); text-align: center; font-size: 24px; border-radius: 24px 0 0 24px; display: inline-block; border-right: none; }
.ForgetPwdBox > div.t5 > span.t7 { display:inline-block; width: 118px; vertical-align:top; border: 1px solid #CCC; border-left: none; }
.ForgetPwdBox > div.t5 > span.t7 > img.t8 { height: 48px; cursor: pointer; }
.ForgetPwdBox > label.t9 { display: block; height: 50px; font-size: 24px; margin-top: 20px; color: red; text-align: center; }

.ForgetPwdBox > .t10 { text-align: center; }
.ForgetPwdBox > .t10 > button.t11 { width: 50%; height: 50px; margin: auto; border-radius: 24px; }
.ForgetPwdBox > .t12 { margin-top: 20px; text-align: center; }
.ForgetPwdBox > .t14 { display: none; }
.ForgetPwdBox ~ .footer { position: absolute; bottom: 20px; width: 100%; color: #FFF; }
/*ForgetPwdBox*/

/*ResetPwdBox*/
.ResetPwdBox { background: #FFF; width: 600px; height: 500px; position: absolute; left: calc(50% - 300px); top: calc(50% - 250px); border-radius: 0 60px 0 60px; padding: 20px 60px; box-shadow: 0 0 10px 3px #999; }
.ResetPwdBox > label.t1 { display: block; font-size: 32px; text-align: center; font-weight: 900; }
.ResetPwdBox > label.t2 { display: block; font-size: 24px; text-align: center; }
.ResetPwdBox > input.t3 { text-align: center; font-size: 24px; border-radius: 24px 0.25rem 0.25rem 24px; margin-top: 20px; }
.ResetPwdBox > input.t4 { text-align: center; font-size: 24px; border-radius: 0.25rem 24px 24px 0.25rem; margin-top: 20px; }
.ResetPwdBox > input.t3::placeholder, .ResetPwdBox > input.t4::placeholder, .ResetPwdBox > div.t5 > input.t6::placeholder { color: #CCC; }
.ResetPwdBox > div.t5 { margin-top: 20px; }
.ResetPwdBox > div.t5 > input.t6 { width: calc(100% - 120px); text-align: center; font-size: 24px; border-radius: 24px 0 0 24px; display: inline-block; border-right: none; }
.ResetPwdBox > div.t5 > span.t7 { display:inline-block; width: 118px; vertical-align:top; border: 1px solid #CCC; border-left: none; }
.ResetPwdBox > div.t5 > span.t7 > img.t8 { height: 48px; cursor: pointer; }
.ResetPwdBox > label.t9 { display: block; height: 50px; font-size: 24px; margin-top: 20px; color: red; text-align: center; }

.ResetPwdBox > .t10 { text-align: center; }
.ResetPwdBox > .t10 > button.t11 { width: 50%; height: 50px; margin: auto; border-radius: 24px; }
.ResetPwdBox > .t12 { margin-top: 20px; text-align: center; }
.ResetPwdBox > .t14 { display: none; }
.ResetPwdBox ~ .footer { position: absolute; bottom: 20px; width: 100%; color: #FFF; }
/*ResetPwdBox*/