@charset "utf-8";
/* CSS Document */
*{margin:0; padding:0; word-break:break-all;}
.hidden{display: none;}
html {height:100%; min-height:100%; font-family:"微软雅黑"}  
img{border:none;}
ul,li{list-style:none;}
.text-c{text-align:center;}
.text-r{text-align:right;}
.text-l{text-align:left;}
.w100{width: 100%;}
.w80{width: 80%;}
/* 变量全局通用：颜色、字体大小... */
:root {  
    /* 颜色  */
    --primary-color: #007BFF;  /* 主要颜色 */  
    --primary-color-text:#fff;
    --color-b6:#666;
    --color-b9:#999;
    --secondary-color: #d7d7d7; /* 次要颜色-边框 */  
    --dark-color: #343a40;     /* 暗色 */  
    --dark-color-text:#fff;
    --light-color: #f8f9fa;    /* 浅色 */  
    --neutral-color: #e9ecef;  /* 中性色 */  
    --border-color: #dee2e6;   /* 边框颜色 */  
    --text-color: #212529;     /* 文字颜色 */  
    --bg-color: #eff7ff;       /* 背景颜色 */  
    --bg-main-color:#fff;      /* 主体常用背景色 */
    --color-l-h:#e7e7e7;
    --bg-accent-p:#fce2ec;   /* 辅助背景 粉红 */
    --bg-accent-y:#fcffe1;    /* 辅助背景 黄 */
    --bg-b1:rgb(5 86 233 / 10%);
     /* 字体大小  */
     --font-size-base: 16px;  
     --font-size-mm: 12px; 
     --font-size-m: 14px; 
     --font-h3: 24px;  
     --font-h2: 32px;
     --font-h1: 48px;  
     /* 边距 */
     --padding-8: 8px;
     --padding-10: 10px; 
     --padding-20: 20px; 
     --margin-10: 10px;
     --margin-16: 16px;    
     --margin-20: 20px;  
     --margin-40: 40px;  
     /* 高 */
     --height24:24px;
     --height32:32px;
     --height40:40px;
     /* 阴影 */
     --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}  
  
/*通用*/  
body {background:url(../images/wzdlv_bg.jpg) no-repeat center center; font-size: var(--font-size-base);  font-family:'Microsoft YaHei', sans-serif; height: 100%; position: relative; font-size: 16px;}  
a{color: var(--primary-color);}
h2{font-size: var(--font-h2);}
h3{font-size: var(--font-h3);}
h4{font-size: 1.25rem;}
.color-b{background: #ff8800; color: var(--primary-color-text) ;}/* 登录按钮 */
.color-b6{color: var(--color-b9);}
.box-shadow{box-shadow: var(--box-shadow);}
.flex{display: flex; flex-wrap: wrap;}
.flex>div{box-sizing: border-box; flex-basis: 0;}
.flex-ct{flex: 1 0; display: flex; justify-content: center; align-items: center; text-align: center;}
.m-top10{margin-top: var(--margin-10);}
.m-top40{margin-top:2rem;}
.p-20{padding: var(--padding-20);}
.position-r{position: relative;}
.position-a-c{position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);}
.t-c{text-align: center;}
.but-l{padding: 1.5rem;}
.but-m{padding: 0.5rem 1rem; border-radius: 2rem;}
.bg-b1{background:var(--bg-b1);}
/* 登录界面 */
.login{position: relative; height: 100%; width: 100%;}
.login-lt{width: 480px; background: #fff; height: 100vh;}
.login-logo{ width: 100%;}
.login-logo img{height: 60px; display: block; margin: 0 auto;}
.login-main{background: var(--bg-main-color); padding:40px; border-radius: 30px; width:50%; position: relative; min-height: 450px;}
.login-main h2{text-align: left;font-size: 32px; color: #256cff; line-height: 32px; padding: 6px; }
.login-tit{padding: 0px 40px;}
.login-tit>ul{width: 90%; margin: 0 auto;}
.login-tit>ul>li {padding: 8px 20px; cursor: pointer; font-size: 1.15rem;}
.login-tit>ul>li.login-on, .login-tit>ul>li:hover{color: var(--primary-color); border-bottom: 2px solid var(--primary-color); font-weight: bold;}
.login-ewm{width: 180px; height: 180px; margin:var(--margin-20) auto; padding: 12px; border: 1px solid var(--secondary-color); border-radius: 8px;}
ul.login-input{padding: 2rem 3rem 0;}
ul.login-input li{position: relative; margin-top:1rem; width: 100%;}
ul.login-input li p{text-align: left;}
ul.login-input li button{display: block; width:100%;padding: 1rem 20px;border-radius: 8px; border: none; font-size: var(--font-size-d);}
ul.login-input li select{ border: 1.5px solid var(--secondary-color); width:31%;  border-radius: 8px; padding: 1rem 10px; font-size: 1rem;}
ul.login-input li select:first-child{margin-right: 4%;}
.user-label { position: absolute; left: 20px; top: 0px; pointer-events: none; transform: translateY(1rem); transition: 150ms; color: var(--color-b9);}
.login-i{border: solid 1.5px var(--secondary-color); width: calc(100% - 20px);  border-radius: 8px; padding: 1rem 10px;font-size: 1rem;  transition: border 150ms; color: var( --dark-color);}
.login-i:focus, input:valid { outline: none; border: 1.5px solid  var(--primary-color);}
.login-i:focus ~ label, input:valid ~ label { transform: translateY(-50%) scale(0.8); background: var(--bg-main-color); padding: 0 .2em; color: var(--primary-color);}
.login-eg{position: absolute; top:20px; right: 20px; color: var(--color-b6);}
.login-w{position: absolute; bottom: -60px; text-align: center; left: 50%; transform: translateX(-50%); width: 100%; color:rgb(255 255 255 / 60%);}
.login-w a{color: #fff;}
.login-choose ul li{margin-top: 20px; border-radius: 8px; position: relative;cursor: pointer; overflow: hidden; height: 4rem; background:var(--color-l-h); background-size: 400%;}
.login-choose ul li p{padding: 1.5rem 20px; text-align: left; position: relative;z-index: 1;}
.login-choose ul li p i{position: absolute; right: 20px; top:50%; transform: translateY(-50%) scale(0.8); font-size: 24px;}
.login-choose ul li:hover::before { transform: scaleX(1);}
.login-choose ul li:hover p{color: #fff;}
.login-choose ul li::before { content: ""; position: absolute; top: 0; left: 0; transform: scaleX(0); transform-origin: 0 50%; width: 100%; height: inherit; border-radius: inherit;
     background: linear-gradient(  82.3deg, var(--primary-color) 10.8%,var(--primary-color) 94.3% ); transition: all 0.475s;}
.disable-button{background-color: #979797;}
.box-lt{padding-right: 40px; flex: 1.2;}
.box-lt img{width: 90%; margin-top: 20%; max-width: 480px;}
.login-tit{flex: 1;}
/* 首页*/  
@media screen and (max-width: 1680px) {  
     .login-lt{display: none;}  
     .login-main{padding: 40px; width: 66%;}
     .login-main h2{font-size:1.75rem;}
     .box-lt{flex: 1; padding: 0;}
   }  
@media screen and (max-width: 1024px) {  
    .login-lt{display: none;}  
    .login-main{padding: 40px; width: 70%;}
    .box-lt{display: none;}
  }  
  @media screen and (max-width: 820px) {  
     body{font-size: 14px;}
     .login-lt{display: none;}  
     .login-main{padding: 20px 20px 40px; width: 80%; margin-top: -40px;}
     .login-main h2{font-size:1.25rem; margin: 0; text-align: center;}
     .login-tit{margin: 4px 10px;}
   }  
   @media screen and (max-width: 600px) {  
     .login-tit{padding:0}
     ul.login-input{padding: 10px;}
     .login-tit>ul>li{font-size: 0.95rem;}
     .login-main h2{font-size: 1rem;}
     h3{font-size: 1.25rem;}
     .m-top40{margin-top: 1rem;}
   }