@charset "utf-8";

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0}
body{
  font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  color:#eaf6ff;
  background:#020817;
}
a{text-decoration:none}

.login{
  position:fixed;
  inset:0;
  z-index:0;
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
  overflow:auto;
  background:
    linear-gradient(135deg,rgba(1,8,28,.88),rgba(5,23,58,.55)),
    url(../images/login-bg.png) center/cover no-repeat;
}
.login:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 34%,rgba(30,190,255,.23),transparent 34%),
    linear-gradient(rgba(77,196,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(77,196,255,.025) 1px,transparent 1px);
  background-size:auto,40px 40px,40px 40px;
}
.login:after{
  content:"";
  position:absolute;
  width:620px;
  height:620px;
  border:1px solid rgba(78,208,255,.10);
  border-radius:50%;
  box-shadow:0 0 100px rgba(0,153,255,.08),inset 0 0 100px rgba(0,153,255,.05);
  pointer-events:none;
}

.login > div:first-child{
  position:fixed;
  left:24px;
  top:20px;
  z-index:3;
}
.login > div:first-child a{
  margin:0!important;
  width:46px;
  height:46px;
  display:grid!important;
  place-items:center;
  border:1px solid rgba(255,255,255,.24);
  border-radius:15px;
  color:#fff!important;
  font-size:22px!important;
  background:rgba(5,15,38,.48);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:.25s ease;
}
.login > div:first-child a:hover{
  transform:translateX(-3px);
  background:rgba(25,190,255,.20);
  border-color:rgba(89,218,255,.55);
}

.welcome{
  position:relative;
  z-index:1;
  margin:0 0 22px!important;
  text-align:center;
  color:#fff;
  font-size:36px;
  font-weight:700;
  letter-spacing:6px;
  text-shadow:0 10px 32px rgba(0,0,0,.55);
}
.welcome:before{
  content:"SECURE ACCESS";
  display:block;
  margin-bottom:10px;
  color:#55d9ff;
  font:600 11px/1.2 Arial,sans-serif;
  letter-spacing:5px;
}

.login-form{
  position:relative;
  z-index:1;
  width:min(430px,calc(100vw - 40px));
  padding:32px;
  border:1px solid rgba(112,220,255,.30);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(11,28,67,.88),rgba(4,12,35,.80));
  box-shadow:0 28px 80px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
.login-form:before{
  content:"会员账号登录";
  display:block;
  margin-bottom:24px;
  color:#dff8ff;
  font-size:14px;
  text-align:center;
  letter-spacing:3px;
}

.login-inp{
  height:54px;
  margin:0 0 16px!important;
  display:flex;
  align-items:center;
  border:1px solid rgba(143,210,255,.25)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.065);
  overflow:hidden;
  transition:.22s ease;
}
.login-inp:hover{
  border-color:rgba(103,213,255,.48)!important;
}
.login-inp:focus-within{
  border-color:#39cfff!important;
  box-shadow:0 0 0 4px rgba(57,207,255,.10),0 8px 24px rgba(0,0,0,.16);
}
.login-inp label{
  flex:0 0 74px;
  width:auto!important;
  height:22px;
  line-height:22px;
  color:#a9d2ea!important;
  text-align:center!important;
  font-size:14px;
  border-right:1px solid rgba(255,255,255,.13);
}
.login-inp input{
  flex:1;
  min-width:0;
  height:100%;
  padding:0 16px;
  line-height:54px!important;
  color:#fff!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  font-family:inherit;
  font-size:16px;
}
.login-inp:last-child{
  margin:8px 0 0!important;
  border:0!important;
  background:transparent!important;
  overflow:visible;
}
.login-inp:last-child input{
  width:100%;
  cursor:pointer;
  border-radius:15px!important;
  background:linear-gradient(110deg,#168cff,#23d5f5)!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:700;
  letter-spacing:4px;
  box-shadow:0 12px 28px rgba(0,152,255,.34);
  transition:.22s ease;
}
.login-inp:last-child input:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(0,191,255,.44);
}
.login-inp:last-child input:active{
  transform:translateY(0);
}

.login-inp input:-webkit-autofill,
.login-inp input:-webkit-autofill:hover,
.login-inp input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff!important;
  -webkit-box-shadow:0 0 0 1000px #102650 inset!important;
  transition:background-color 9999s ease-out;
}
.login-txt{
  position:relative;
  z-index:1;
  margin-top:18px;
  text-align:center;
  color:#fff;
}
.login-txt a{color:#c9efff;padding:0 6px}

table{width:100%}
table tr{height:36px;border:1px solid #ccc}
table tr td input{width:94%;padding:5px;border:1px solid #ccc;border-radius:3px}
.anniu{margin:10px;text-align:center}
.anniu input{margin:2%;padding:2% 3%;border:0;border-radius:5px;background:#da251c;color:#fff;font:15px "Microsoft YaHei"}

@media(max-width:600px){
  .login{padding:72px 18px 28px}
  .login:after{width:360px;height:360px}
  .login > div:first-child{left:16px;top:14px}
  .login > div:first-child a{width:42px;height:42px;border-radius:13px}
  .welcome{margin-bottom:18px!important;font-size:30px;letter-spacing:4px}
  .welcome:before{font-size:10px;letter-spacing:4px}
  .login-form{width:100%;max-width:400px;padding:26px 20px;border-radius:23px}
  .login-form:before{margin-bottom:20px}
  .login-inp{height:52px}
  .login-inp label{flex-basis:66px}
  .login-inp input{padding:0 13px;line-height:52px!important}
}

@media(max-height:620px){
  .login{justify-content:flex-start;padding-top:72px}
  .welcome{font-size:28px}
  .login-form{padding-top:24px;padding-bottom:24px}
}