@charset "utf-8";
:root{
  font: 16px/1.5 'Jost', system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, sans-serif, Serif, apple color emoji, segoe ui emoji, segoe ui symbol;
  --primary: #072258;
  --text: #222;
  --info: #666;
  --desc: #999;
  --gray: #F2F3F5;
  --white: #fff;
  --rounded: 290486px;
}

::-webkit-scrollbar{ width: 5px; height: 5px; }
::-webkit-scrollbar-thumb{ width: 5px; border-radius: 3px; background: var(--secondary);}
::-webkit-scrollbar-track{ background: transparent;}
::-webkit-scrollbar-corner{ background: transparent;}


*,
*::before,
*::after{ box-sizing: border-box; margin: 0; padding: 0; outline: none;}

html,
body{ width: 100%; color: var(--text); overflow-x: hidden;overflow-y: overlay;}

button,
input,
select,
textarea{ all: unset; font-size: 1rem; border: 1px solid var(--gray); border-radius: var(--rounded);}

h1,h2,h3,h4,h5,h6{ line-height: 1.75; font-family: 'Jost', system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, sans-serif, Serif, apple color emoji, segoe ui emoji, segoe ui symbol;}

h1{ font-size: 2rem;}
h2{ font-size: 1.5rem;}
h3{ font-size: 1.25rem;}
h4{ font-size: 1rem;}
h5{ font-size: .875rem;}
h6{ font-size: .75rem;}

img{ position: relative; all: unset; display: inline-block; vertical-align: middle;}
img::before {  
  position: absolute;
  content: '暂无图片';
}

iframe{ all: unset;}

button:focus,
input:focus,
select:focus,
textarea:focus{ border: 1px solid var(--border);}

a:link,
a:visited,
a:active,
a:focus{ color: var(--text); text-decoration: none;}
a:hover{ color: var(--primary)}

.login-wrapper{ position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; width: 100vw; height: 100vh; align-items: center; padding: 0 6.25vw; color: white; overflow: hidden;}
.login-wrapper:after{ content: ''; position: absolute; z-index: -1; top: 0; right: 0; width: 100%; height: 100%; background-image: url('bg.webp'); background-repeat: no-repeat; background-size: cover; animation: up 240s linear infinite;}
@keyframes up{ 0% { background-position: center 0; transform: scale(1);} 50% { background-position: center 100%; transform: scale(1.1); } 100% { background-position: center 0; transform: scale(1);}}

.login-font{ grid-column: 2 / 6; display: grid; grid-gap: 2.5vw; line-height: 1.5;}
.login-font .caption{ display: grid;}
.login-font .caption .cn{ font-size: 2rem;}
.login-font .caption .en{ font-size: 0.75rem; text-transform: uppercase;}
.login-font .service{ display: grid; grid-gap: 1rem;}
.login-font .service .tit{ font-size: 1rem;}
.login-font .service .strip{ width: 1rem; height: 2px; background: white;}
.login-font .service .con{ font-size: 0.875rem; display: grid; grid-auto-flow: column; grid-gap: 1.5em;}
.login-font .service .con a{ color: white;}
.login-font .contact{ font-size: 0.75rem; line-height: 2;}
.login-font .qrcode{ width: 5vw; height: 5vw;}
.login-font .qrcode img{ width: 100%; height: 100%; object-fit: cover;}

.login-form{ grid-column: 8 / 12; position: relative; display: grid; grid-gap: 1.5rem; padding: 5vw;}
.login-form:after{ content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; border-radius: 1rem; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(20px);}
.login-form *{ position: relative; z-index: 1;}
.login-form .caption{ display: grid; line-height: 1.5; font-weight: 600;}
.login-form .caption .en{ font-size: 2rem;}
.login-form .caption .cn{ font-size: 2rem; text-align: right;}
.login-form .caption .slogan{ grid-column: span 2; font-size: 0.875rem; line-height: 2; font-weight: normal;}
.login-form label{ position: relative; display: grid; grid-gap: 1.5rem;}
.login-form label.half{ grid-template-columns: 2fr 1fr;}
.login-form label.half img{ width: 100%; height: 2.5rem; border-radius: var(--rounded); object-fit: cover;}
.login-form label span{ position: absolute; z-index: 1; display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; font-size: 1.25rem; line-height: 1; font-family: 'neko'; color: var(--primary);}
.login-form label input{ position: relative; z-index: 0; display: flex; align-items: center; width: 100%; height: 2.5rem; border-radius: var(--rounded); border: none; background: white; font-size: 0.875rem; line-height: 1.25; text-indent: 2.5rem; color: var(--info);}
.login-form label button{ display: flex; justify-content: center; align-items: center; width: 100%; height: 3rem; border: none; margin-top: 1rem; background: var(--primary); font-size: 1rem; line-height: 2;}


@media screen and (min-width:1921px){
  :root{
    font-size: 20px;
  }
}
@media screen and (max-width:1680px){
  :root{
    font-size: 14px;
  }
}
@media screen and (max-width:1440px){
  :root{
    font-size: 12px;
  }
}
@media screen and (max-width:1280px){
}
@media screen and (max-width:1024px){
  :root{
    font-size: 14px;
  }
  .login-font{ display: none;}
  .login-form{ grid-column: 1 / 13; padding: 10vw;}
}