* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 100vh;
  background: url("../images/login-bg.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.box .login {
  width: 41.1%;
  height: 100%;
  position: absolute;
  top: 50%;
  right: 11.67%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.box .login .logo {
  width: 58%;
}
.box .login form {
  width: 100%;
}
.box .login form .msgbox {
  width: 58%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.reg{ text-align: right; margin-top:20px; width: 100%;font-size: 18px;}
.box .login form .msgbox a{ text-decoration: none; color:#0088FF; }
.box .login form .msgbox p {
  color: #fff;
  font-size: 33px;
  font-weight: bold;
  text-align: center;
}
.input-box{  width: 100%; box-sizing: border-box; background: url("../images/input-bg.png") no-repeat;background-size: 100% 100%;  padding:15px 10px 20px 20px;margin-top:40px;}
.input-box img{ position: relative; top:3px; margin-right:25px;}
.box .login form .msgbox input {
 width: 80%;
  border:none;
  height: 10.51%;
  box-sizing: border-box;
  background: #fff;
  outline: none;
  font-size: 18px;
  font-family: Source Han Serif CN;
  color: #9EA8B8;
  box-sizing: border-box;height: 24px; line-height: 24px;

}
.box .login form .msgbox .submit {
  width:100%;
  height: 56px;
  background: #0088FF;
  border-radius: 10px;
  font-size: 24px;
  color: #fff;
  margin-top: 45px;
  border:none;
    cursor:pointer;
}
.register{background: url("../images/reg-bg.jpg") no-repeat;  box-sizing: border-box}
.register .login{ background: #ffffff; border-radius:20px; width:1000px ; height: auto;padding:50px;  display: block; right:50%;transform: translate(50% ,-50%);}
.reg_l{ float:left; width: 50%; margin-bottom:20px; height: 250px;}
.register .login .logo{ width: auto;display: block; margin: 0 auto 40px;}
.register .login form .msgbox{ width: 100%; display: block}
.register .line-box{ margin-bottom:20px; height: 40px;}
.register .login form .msgbox .submit{ width: 50%; margin:0 auto;display: block;}
.check-item{ display: inline-block;vertical-align: top; width: 300px}
.check-item .magic-checkbox + label{ display: inline-block;color: #666666; font-size:14px; vertical-align: top; padding-left:23px; margin-right:10px;}
.check-item .magic-checkbox + label::before{ margin-top:1px;}
.check-item .magic-checkbox + label::after{ top:5px;}