body {background: url('/content.news/kbm/images/user/background.jpg') no-repeat center;}
section {display: flex;align-items: center;justify-content: center;}
.footer-main {background: rgba(26,26,26,0);}
.box {width: 400px;height: 400px;background: #FFFFFF;border-radius: 5px 5px 0px 0px;box-sizing: border-box;position: relative;margin-top:50px;margin-bottom:50px;}
.box .title {height: 49px;background: rgba(253,78,78,1);border-radius: 5px 5px 0px 0px;color: #fff;line-height: 49px;font-size: 16px;text-align: center;letter-spacing: 0.57px;}
.box .username, .box .password, .box .number {position: relative;margin-bottom: 20px;background: rgba(246,246,246,1);display: flex;border: 1px solid rgba(242,242,242,1);position: relative;}
.box .username input, .box .password input, .box .number input {width: 100%;height: 44px;border-radius: 5px;background: rgba(246,246,246,1);padding-left: 5px;}
.box .username .error-username, .box .password .error-password, .box .number .error-number {position: absolute;left: 50%;top: -45px;height: 30px;color: #FD4E4E;background: rgba(249,249,249,1);box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.15);font-size: 14px;min-width: 140px;text-align: center;line-height: 30px;display: flex;align-items: center;justify-content: center;z-index: 1;margin-left: -160px;padding: 0 10px;}
.box .username .error-username:after, .box .password .error-password:after, .box .number .error-number:after {content: "";border-top: solid 5px rgba(249,249,249,1);border-left: solid 7px #00800000;border-right: solid 7px #00800000;border-bottom: solid 5px #00800000;position: absolute;left: 50%;top: 30px;margin-left: -7px;}
.box .username .error-username img, .box .password .error-password img, .box .number .error-number img {display: inline-block;width: 14px;height: 14px;margin-right: 5px;}
.box .password span {color: #1A1A1A;font-size: 16px;display: block;position: absolute;right: 0;top: 50%;padding: 2px 8px;margin-top: -12px;border-left: 1px solid #E6E6E6;cursor: pointer;width: 100px;text-align: center;}
.box .username .error-username-wrapper, .box .password .error-password-wrapper, .box .number .error-number-wrapper {display:none;}
.input-wrapper {padding: 0 30px;box-sizing: border-box;padding-top: 30px;}
.box .login-btn {height: 44px;background: rgba(253,78,78,1);border-radius: 5px;line-height: 44px;text-align: center;color: #fff;margin-bottom: 27px;cursor: pointer;font-size: 20px;font-weight: 600;}
.box .resgiter {color: #999999;font-size: 16px;text-align: center;width: 400px;height: 50px;background: rgba(252,252,252,1);border-radius: 0px 0px 5px 5px;box-sizing: border-box;line-height: 50px;position: absolute;bottom: 0;left: 0;}
.box .resgiter a {color: #FD4E4E;font-weight: 600;}