@keyframes anime{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}*{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;position:relative;background-color:#f6faff}.login-box{display:flex;width:1400px;height:700px;border-radius:16px;overflow:hidden}.login-box .left-box{display:flex;align-items:center;justify-content:center;position:relative;width:50%;height:100%;background-color:#acc6f8;background-image:linear-gradient(-225deg, #2cd8d5 0%, #c5c1ff 50%, #ffbac3 100%);background-size:600%;animation:anime 20s linear infinite}.login-box .left-box .center-block{width:70%;height:70%;background-color:rgba(255,255,255,.35);-webkit-backdrop-filter:blur(13.5px);backdrop-filter:blur(13.5px)}.login-box .left-box .center-block .text{color:#fff;margin:28px;position:relative;font-size:24px;font-weight:100}.login-box .right-box{display:flex;align-items:center;justify-content:center;position:relative;width:50%;height:100%;background-color:#fff}.login-box .right-box .login-form{display:flex;flex-direction:column;width:70%}.login-box .right-box .login-form .login-title{margin-bottom:30px}.login-box .right-box .login-form .login-title h2{display:inline;font-weight:600;font-size:40px}.login-box .right-box .login-form .login-title span{display:block;color:#88879a;margin-top:10px}.login-box .right-box .login-form .login-input label{font-weight:600;color:#29284e}.login-box .right-box .login-form .login-input .input{display:block;margin:10px 0;width:100%;height:50px;border:1px solid #c9c8cf;border-radius:8px;padding:10px;box-sizing:border-box;outline:none;font-size:20px;font-weight:200}.login-box .right-box .login-form .login-input .input:hover,.login-box .right-box .login-form .login-input .input:focus{border:1px solid #9bb5f7}.login-box .right-box .login-form .login-input .options #remember[type=checkbox]{position:relative;width:16px;height:16px;vertical-align:middle;cursor:pointer}.login-box .right-box .login-form .login-input .options #remember[type=checkbox]::after{content:"";display:inline-block;position:absolute;top:0;width:16px;height:16px;color:#000;text-align:center;padding-left:0px;border-radius:3px}.login-box .right-box .login-form .login-input .options #remember[type=checkbox]:checked::after{content:"✓";color:#fff;font-size:12px;line-height:16px;font-weight:bold;border:0;background:linear-gradient(to right, rgb(93, 172, 250) 0%, rgb(95, 139, 250) 40%, rgb(97, 96, 251) 70%, rgb(154, 140, 252) 100%)}.login-box .right-box .login-form .login-input .options .remember-me{color:#29284e;font-weight:600;vertical-align:middle;cursor:pointer}.login-box .right-box .login-form .login-input .options .forget{float:right;background-image:linear-gradient(to right, rgb(93, 172, 250) 0%, rgb(95, 139, 250) 40%, rgb(97, 96, 251) 70%, rgb(154, 140, 252) 100%);-webkit-background-clip:text;background-clip:text;color:rgba(0,0,0,0);margin-top:1px;transition:opacity .5s;cursor:pointer}.login-box .right-box .login-form .login-input .options .forget:hover{opacity:.5}.login-box .right-box .login-form .login-input .login-button{width:100%;height:60px;color:#fff;background:linear-gradient(to right, rgb(93, 172, 250) 0%, rgb(95, 139, 250) 40%, rgb(97, 96, 251) 70%, rgb(154, 140, 252) 100%);border-radius:10px;border:0;margin-top:20px;font-size:20px;transition:opacity .5s;cursor:pointer}.login-box .right-box .login-form .login-input .login-button:hover{opacity:.5}.login-box .right-box .login-form .divider{display:flex;align-items:center;justify-content:space-between;width:100%;margin:20px 0;text-align:center}.login-box .right-box .login-form .divider .line{display:inline-block;max-width:45%;width:45%;flex:1;height:1px;background-color:#c9cad1}.login-box .right-box .login-form .divider .divider-text{display:inline-block;width:50px;vertical-align:middle;margin:0px 20px;line-height:0px;color:#c9cad1}.login-box .right-box .login-form .other-login-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;margin-bottom:16px}.login-box .right-box .login-form .other-login-wrapper .other-login-item{display:flex;align-items:center;justify-content:center;width:calc(100% - 20px);padding:10px;text-align:center;border-radius:10px;font-weight:600;margin-bottom:16px;transition:opacity .5s;cursor:pointer}.login-box .right-box .login-form .other-login-wrapper .other-login-item img{position:relative;width:32px;height:32px;margin-right:8px}.login-box .right-box .login-form .other-login-wrapper .other-login-item:nth-child(1){color:#fff;background-color:#0095ff}.login-box .right-box .login-form .other-login-wrapper .other-login-item:nth-child(2){color:#fff;background-color:#2de820}.login-box .right-box .login-form .other-login-wrapper .other-login-item:hover{opacity:.5}.login-box .right-box .login-form .register{text-align:center;background-image:linear-gradient(to right, rgb(93, 172, 250) 0%, rgb(95, 139, 250) 40%, rgb(97, 96, 251) 70%, rgb(154, 140, 252) 100%);-webkit-background-clip:text;background-clip:text;color:rgba(0,0,0,0);transition:opacity .5s;cursor:pointer}.login-box .right-box .login-form .register:hover{opacity:.5}