.login-page{background:var(--gray1);width:100vw;height:100vh;padding:5em;display:flex;justify-content:center;align-items:center}.login-page .login-container{background:#fff;border-radius:20px;width:1200px;height:600px;display:flex;overflow:hidden}.login-page .login-container form,.login-page .login-container>div{width:50%;display:flex;flex-flow:column wrap;justify-content:center;align-items:center}.login-page .login-container .register-box{background:var(--dark)}.login-page .login-container .register-box p{color:#fff;font-family:SUITB;font-size:25px;text-align:center}.login-page .login-container .register-box span{display:block;margin:10px 0;color:#fff;font-family:SUITEL;font-size:20px;text-align:center}.login-page .login-container .register-box a{border:1px solid #fff;width:180px;height:50px;margin-top:2em;color:#fff;font-size:20px}.login-page .login-container .register-box a:hover{background:#fff;color:var(--main)}.login-page .login-container .login-box .form-box{position:relative;margin-bottom:30px}.login-page .login-container .login-box .form-box:nth-child(2){margin-bottom:0}.login-page .login-container .login-box .form-box input{background:var(--gray3);width:250px;font-size:16px}.login-page .login-container .login-box .form-box input:focus+label,.login-page .login-container .login-box .form-box input:not(:placeholder-shown)+label{transform:translateY(-45px);font-size:12px;color:var(--main)}.login-page .login-container .login-box .form-box label{position:absolute;left:1em;top:50%;transform:translateY(-50%);color:rgba(41,41,41,.5);font-size:16px;pointer-events:none;padding:0 4px;transition:all .2s ease}.login-page .login-container .login-box .error{color:red;font-size:14px;margin-bottom:10px}.login-page .login-container .login-box a{display:block;margin:2em 0;color:rgba(41,41,41,.5);text-decoration:underline;transition:.3s}.login-page .login-container .login-box a:hover{color:var(--dark)}.login-page .login-container .login-box button{background:var(--main);width:250px;height:50px;font-size:20px}.login-page .login-container .login-box button:hover{color:#fff}@media(max-width:1280px){.login-page{height:auto;margin-top:60px;padding:3em;display:block}.login-page .login-container{width:100%;height:100%;flex-flow:column wrap}.login-page .login-container form,.login-page .login-container>div{width:100%}.login-page .login-container .register-box{height:30%;padding:2em 1em;order:1}.login-page .login-container .register-box p{font-size:20px}.login-page .login-container .register-box span{font-size:16px}.login-page .login-container .register-box a{margin-top:0;height:45px}.login-page .login-container .login-box{height:auto;padding:5em 2em}}@media(max-width:800px){.login-page{padding:2em}.login-page .login-container{border-radius:10px}.login-page .login-container .register-box{padding:2em 1em}.login-page .login-container .register-box p{font-size:18px}.login-page .login-container .register-box span{font-size:14px}.login-page .login-container .register-box a{width:150px;height:40px;margin-top:0;font-size:16px}.login-page .login-container .login-box{padding:2em 1em}.login-page .login-container .login-box .form-box:first-child{margin-top:17px}}