*{outline:none}a{color:#000;text-decoration:none}html,body,.main{margin:0;padding:0;width:100%;height:100%}.main{display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg, #f3e6fe 0%, #d6dff8 100%)}.form-box{display:flex;flex-direction:column;align-items:center;width:600px;height:700px;background-color:#fff;border-radius:8px;overflow:hidden}.form-box .form-top{display:flex;width:100%;height:82px;background-color:#000}.form-box .form-top button{width:33.34%;height:100%;font-weight:100;font-size:32px;border:none;transition:opacity .5s;cursor:pointer}.form-box .form-top button:hover{opacity:.8}.form-box .form-top button.active{color:#fff;background-color:#fd7d92}.form-box .form-block{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.login-box{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}.login-box .login-form{display:flex;flex-direction:column;align-items:center;justify-content:center;width:600px}.login-box .login-form :nth-child(n){margin-bottom:24px}.login-box .login-form .input{display:flex;flex-direction:column;width:70%}.login-box .login-form input{width:calc(100% - 20px);height:50px;padding:0px 10px;font-size:20px;border:1px solid #dcdcdc;border-radius:6px;transition:border .5s}.login-box .login-form input:focus{border:1px solid #4765fb}.login-box .login-form .login-button{padding:0;width:70%;color:#fff;background-color:#4765fb;border:1px solid #4765fb;cursor:pointer;transition:opacity .5s}.login-box .login-form .login-button:hover{opacity:.8}