.login-page{display:flex;align-items:center;transition:opacity .3s ease-out;z-index:10;background-color:#000}.login-page.page-fade-out{opacity:.1}.login-page div.exit{position:absolute;top:14px;right:12px;z-index:5;font-size:14px;letter-spacing:2px;color:rgba(28,228,235,.5);border:1px solid #063536;padding:8px 14px;border-radius:4px;background-color:rgba(6,53,54,.5);opacity:.7}.login-page div.exit>span{margin-right:5px}.login-page .login-dialog{position:absolute;border:2px solid #108387;background:rgba(6,53,54,.85);padding:15px;border-radius:4px;width:500px;left:5%;background-clip:content-box;z-index:2;opacity:0;transform:translateY(-150px);transition:all .75s ease-out;will-change:opacity,transform}.login-page .login-dialog.active{transform:translateY(0);opacity:1}.login-page .login-dialog:before{content:"";position:absolute;left:-2px;bottom:-2px;width:15px;height:15px;border-bottom:2px solid #1ce4eb;border-left:2px solid #1ce4eb;border-bottom-left-radius:4px}.login-page .login-dialog:after{content:"";position:absolute;right:-2px;bottom:-2px;width:15px;height:15px;border-bottom:2px solid #1ce4eb;border-right:2px solid #1ce4eb;border-bottom-right-radius:4px}.login-page .login-dialog>h3{position:relative;text-align:center;font-size:30px;letter-spacing:6px;line-height:2.8;font-weight:700;padding-top:12px}.login-page .login-dialog>h3:before{content:"";position:absolute;left:-17px;top:-17px;width:15px;height:15px;border-top:2px solid #1ce4eb;border-left:2px solid #1ce4eb;border-top-left-radius:4px}.login-page .login-dialog>h3:after{content:"";position:absolute;right:-17px;top:-17px;width:15px;height:15px;border-top:2px solid #1ce4eb;border-right:2px solid #1ce4eb;border-top-right-radius:4px}.login-page .login-dialog>div{margin-left:25px;margin-right:25px}.login-page .form-item{position:relative;border-bottom:1px dotted hsla(0,0%,100%,.35);margin-bottom:16px;padding:10px 0;height:35px}.login-page .form-item:after{content:"";position:absolute;display:block;left:0;bottom:-1px;width:0;height:2px;background-color:#1ce4eb;transition:width .4s ease-out;will-change:width}.login-page .form-item label{position:absolute;top:26px;left:0;font-size:15px;transition:top .4s ease-out,font-size .4s linear;will-change:top,font-size;letter-spacing:2px}.login-page .form-item input{left:0;width:100%;bottom:2px;height:35px;box-sizing:border-box;color:#fff;font-size:16px;padding:0;color:#1ce4eb}.login-page .form-item img,.login-page .form-item input{position:absolute;background:transparent;border:none;outline:none}.login-page .form-item img{display:block;right:0;bottom:4px;width:100px;height:42px;cursor:pointer}.login-page .form-item.active:after{width:100%}.login-page .form-item.top label{top:0;font-size:12px}.login-page div.remember-account{position:relative;display:flex;align-items:center;height:26px;letter-spacing:1px;color:hsla(0,0%,100%,.8);cursor:pointer;transition:color .35s ease-out;margin-bottom:20px}.login-page div.remember-account:before{content:"";display:block;width:12px;height:12px;border-radius:1px;border:1px solid hsla(0,0%,100%,.85);margin-right:8px;margin-top:2px}.login-page div.remember-account:hover{color:#fff}.login-page div.remember-account:after{display:none;content:"✔";position:absolute;top:0;left:0;text-align:center;font-size:1.15em;padding:2px 0 0 1px}.login-page div.remember-account.active:after{display:block}.login-page div.login-button{position:relative;text-align:center;font-size:18px;line-height:2.5;letter-spacing:10px;margin-bottom:30px;border:1px solid hsla(0,0%,100%,.2);border-radius:30px;cursor:pointer;overflow:hidden;z-index:0}.login-page div.login-button:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:hsla(0,0%,100%,.1);z-index:-1;transform-origin:center center;transition:transform .45s ease-out,background-color .35s ease;will-change:transform,background-color;transform:scaleX(0)}.login-page div.login-button:hover:before{transform:scale(1);background-color:hsla(0,0%,100%,.4)}.login-page .sphere{width:100%;height:100%;z-index:1}@media screen and (max-width:1400px){.login-page .login-dialog{width:400px;padding:10px}.login-page .login-dialog>h3{font-size:24px}.login-page .login-dialog>h3:before{left:-12px;top:-12px}.login-page .login-dialog>h3:after{right:-12px;top:-12px}.login-page .form-item{margin-bottom:5px}.login-page .form-item input,.login-page .form-item label,.login-page div.login-button,.login-page div.remember-account{font-size:14px}}@media screen and (max-width:1200px){.login-page .login-dialog{width:350px;padding:5px;left:3%}.login-page .login-dialog>h3{font-size:23px;padding-top:3px;letter-spacing:3px}.login-page .login-dialog>h3:before{left:-7px;top:-7px}.login-page .login-dialog>h3:after{right:-7px;top:-7px}.login-page .form-item{margin-bottom:6px}.login-page .form-item label{font-size:12px}.login-page .form-item input{font-size:14px}.login-page .form-item img{width:90px;height:36px}.login-page div.login-button{font-size:14px;margin-bottom:20px}.login-page div.remember-account{font-size:12px;margin-bottom:10px}}@media screen and (max-width:1000px){.login-page .login-dialog{left:2%}.login-page .login-dialog>h3{line-height:2.5}.login-page .login-dialog>div{margin-left:20px;margin-right:20px}.login-page .sphere{margin-left:-3%}}