.div{width:80%;display:flex;justify-content:center;align-items:center;text-align:center;flex-direction:row;gap:30px}.response_div{background:#132442;border-color:#1d285d;border-radius:10px;border-width:2px;border-style:solid;width:50%;padding:20px}.div select{padding:10px;border:1px solid rgba(255,255,255,.25);background:#1d2b3a;border-radius:5px;outline:none;color:#fff;font-size:1em}.container{display:flex;justify-content:center;align-items:center;text-align:center;flex-direction:column;min-height:100vh;gap:30px;font-family:HYWenHei,sans-serif}.inputBox{position:relative;width:40%}.inputBox input{width:100%;padding:10px;border:1px solid rgba(255,255,255,.25);background:#1d2b3a;border-radius:5px;outline:none;color:#fff;font-size:1em}.inputBox span{position:absolute;left:0;padding:10px;pointer-events:none;font-size:1em;color:#ffffff40;transition:.2s}.inputBox input:valid~span,.inputBox input:focus~span{transform:translate(10px) translateY(-7px);font-size:.65em;padding:0 10px;background:#00dfc4;letter-spacing:.2em;border:1px solid #00dfc4;color:#1d2b3a;border-radius:2px}.inputBox input:valid,.inputBox input:focus{border:1px solid #00dfc4}.btn{position:relative;background:rgba(255,255,255,.5);color:#ffffff40;text-decoration:none;text-transform:uppercase;font-size:1.5em;letter-spacing:.1em;font-weight:400;padding:10px 30px;transition:.5s;border-radius:4px}.btn:hover{background:#00dfc4;color:#00dfc4;letter-spacing:.15em;box-shadow:0 0 35px #00dfc4}.btn:before{content:"";position:absolute;inset:2px;background:#1d2b3a}.btn span{position:relative;z-index:1}.btn i{position:absolute;inset:0;display:block}.btn i:before{content:"";position:absolute;top:0;left:80%;width:10px;height:4px;background:#1d2b3a;transform:translate(-50%) skew(325deg);transition:.5s}.btn:hover i:before{width:20px;left:20%}.btn i:after{content:"";position:absolute;bottom:0;left:20%;width:10px;height:4px;background:#1d2b3a;transform:translate(-50%) skew(325deg);transition:.5s}.btn:hover i:after{width:20px;left:80%}.login-title{font-size:2em;color:#fff;text-align:center}.inputbox{position:relative;margin:30px 0;width:310px;border-bottom:2px solid #ffffff}.inputbox label{position:absolute;top:50%;left:5px;transform:translateY(-50%);color:#fff;font-size:1em;pointer-events:none;transition:.3s}.inputbox input{width:100%;height:50px;background:transparent;border:none;outline:none;font-size:1em;padding:0 35px 0 5px;color:#fff}.inputbox input:focus~label,.inputbox input:valid~label{top:-5px}.forget{margin:-15px 0 15px;font-size:.9em;color:#fff;display:flex;justify-content:center}.forget label input{margin-right:3px}.forget label a{color:#fff;text-decoration:none}.forget label a:hover{text-decoration:underline}.login_btn{width:100%;height:40px;border-radius:40px;background:#ffffff;border:none;outline:none;cursor:pointer;font-size:1em;font-weight:600;text-align:center;color:#000}.other-login{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:10px;color:#000}.other-login button{width:80%;height:40px;border-radius:40px;background:#ffffff;border:none;outline:none;cursor:pointer;font-size:1em;font-weight:600;text-align:center}.register{font-size:.9em;color:#fff;text-align:center;margin:25px 0 10px}.register p a{text-decoration:none;color:#fff;font-weight:600}.register p a:hover{text-decoration:underline}.div-header{position:absolute;width:100%}.div-header button{width:100px;height:40px;margin:40px;float:right;border-radius:20px;background:#ffffff;border:none;outline:none;cursor:pointer;font-size:1em;font-weight:600;text-align:center;color:#000}
