.logo{width:100%; margin: 0 auto; text-align: center;background-size: 200% 100%;}
.logo img{width:50%; margin: 10px auto; text-align: center;}

.btn-login {
 background:linear-gradient(90deg,#b4060f,#5d1ee7)
}
.el-form-item {
 padding-bottom:1em!important
}
.agreement {
 font-size:.8rem
}
.agreement-text {
 color:#12c4b9;
 text-decoration:none
}
.form  {
 width:100%
}
.third-party  {
 width:100%;
 padding-top:1em;
 color:#99abc1;
 text-align:center
}
#login{background: rgba(0,0,0,0.2);
padding: 10px;
border-radius: 5px;
border: 1px solid rgba(2,251,254,.2);
box-shadow: 2px 2px 4px rgba(0,0,0,.4);

}
.third-party__title  {
 width:80%;
 line-height:2.5;
 text-align:center;
 text-decoration:none;
 background:linear-gradient(90deg,#b4060f,#5d1ee7);
 border-radius:35px;
 box-shadow:none;
 color:#fff;
 cursor:pointer
}
.third-party__title i  {
 margin-right:10px
}
@media(min-width:600px) {
 .third-party__title  {
  width:30%;
  line-height:3;
  border-radius:6px
 }
}
.third-party__title :hover {
 background:linear-gradient(90deg,#b4060f,#5d1ee7,#b4060f);
 background-size:300%;
 -webkit-animation:glow 3s linear infinite;
 animation:glow 3s linear infinite;
 box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
}
.login  {
 width:100vw;
 height:100vh;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:flex-end;
 background:linear-gradient(90deg,#1e113e,#430b31);
 background:url(../images/loginbj.jpg) center top no-repeat;
 background-size:cover;
 padding:0 10vw 0 5vw
}
@media(max-width:600px) {
 .login  {
  font-size:14px
 }
}
.login__wrapper  {
 width:600px
}
.login__wrapper-type  {
 position:relative;
 width:70%;
 line-height:3;
 margin:0 auto;
 margin-bottom:1.2em;
 font-size:20px
}
.login__wrapper-type p  {
 width:4em; font-weight:bold ;
 /*text-align:center;*/
 cursor:pointer
}
.login__wrapper-type-line  {
 position:absolute;
 bottom:0;
 left:0;
 width:4em;
 height:2px;
 background-image:linear-gradient(-90deg,rgba(2,251,254,.8),rgba(255,31,228,.8));
 transition:all .5s
}
.login__wrapper-type .register  {
 left:100%;
 transform:translateX(-100%)
}
.login__wrapper .form ,
.login__wrapper .form  .el-select {
 width:100%
}
.login__wrapper .form  .el-input__inner {
 background-color:transparent;
 box-shadow:none!important;
 color:#fff;
 font-size:16px;
 padding:0
}
@media(max-width:600px) {
 .login__wrapper .form  .el-input__inner {
  font-size:14px
 }
}
.login__wrapper .form  .el-form-item {
 padding-bottom:2em;
 /*margin-bottom:2em;*/
 border-bottom:1px solid rgba(2,251,254,.5)
}
.login__wrapper .form  .el-form-item .el-form-item__label {
 color:#fff;
 text-align:left;
 font-size:16px
}
@media(max-width:600px) {
 .login__wrapper .form  .el-form-item .el-form-item__label {
  font-size:14px
 }
}
.login__wrapper .form  .el-form-item .el-input-group__append {
 padding:0;
 background-color:transparent;
 box-shadow:none
}
.login__wrapper .form  .el-form-item .el-input-number__decrease,
.login__wrapper .form  .el-form-item .el-input-number__increase {
 background:transparent;
 border:0
}
.login__wrapper .form  .form-item {
 -webkit-user-select:none;
 -moz-user-select:none;
 user-select:none
}
.login__wrapper .form  .form-item span {
 border-radius:5px;
 color:#666;
 line-height:2;
 /*margin-bottom:2em;*/
 padding:0 5px;
 cursor:pointer;
 transition:all .3s
}
.login__wrapper .form  .form-item span:last-child {
 color:#0984d8; margin-right: 20px;
}
.login__wrapper .form  .form-item span:hover {
 background-color:rgba(0,0,0,.2)
}
.login__wrapper .form  .form-item .btn {
 width:30%;
 line-height:3;
 text-align:center;
 background:linear-gradient(90deg,#b4060f,#5d1ee7);
 border-radius:6px;
 box-shadow:none;
 cursor:pointer
}
@media(max-width:600px) {
 .login__wrapper .form  .form-item .btn {
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content
 }
}
.login__wrapper .form  .form-item .btn:hover {
 background:linear-gradient(90deg,#b4060f,#5d1ee7,#b4060f);
 background-size:300%;
 -webkit-animation:glow 3s linear infinite;
 animation:glow 3s linear infinite;
 box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
}
@media(max-width:600px) {
 .login__wrapper .form  .form-item .btn-login {
  width:80%;
  line-height:2.5;
  border-radius:35px;
  background:hsla(0,0%,100%,.2);
  border:1px solid rgba(94,30,231,.5)
 }
 .login  {
  padding:0;
  justify-content:center;
  align-items:center;
  background-size:200% 100%;
  background-position-x:right
 }
 .login__wrapper  {
  width:85vw
 }
}
.login-procuratorate-handset  {
 transform:rotate(90deg)
}



.clear{clear:both;}




.btn-login {
 background:linear-gradient(90deg,#b4060f,#5d1ee7)
}
.el-form-item {
 padding-bottom:1em!important
}
.agreement {
 font-size:.8rem
}
.agreement-text {
 color:#12c4b9;
 text-decoration:none
}
.form[data-v-3ffbb631] {
 width:100%
}
.third-party[data-v-45d17e0b] {
 width:100%;
 padding-top:1em;
 color:#99abc1;
 text-align:center
}
.third-party__title[data-v-45d17e0b] {
 width:80%;
 line-height:2.5;
 text-align:center;
 text-decoration:none;
 background:linear-gradient(90deg,#b4060f,#5d1ee7);
 border-radius:35px;
 box-shadow:none;
 color:#fff;
 cursor:pointer
}
.third-party__title i[data-v-45d17e0b] {
 margin-right:10px
}
@media(min-width:600px) {
 .third-party__title[data-v-45d17e0b] {
  width:30%;
  line-height:3;
  border-radius:6px
 }
}
.third-party__title[data-v-45d17e0b]:hover {
 background:linear-gradient(90deg,#b4060f,#5d1ee7,#b4060f);
 background-size:300%;
 -webkit-animation:glow 3s linear infinite;
 animation:glow 3s linear infinite;
 box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
}
.login {
 width:100vw;
 height:100vh;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:flex-end;
 background:linear-gradient(90deg,#1e113e,#430b31);
 background:url(../images/loginbj.jpg) center top no-repeat;
 background-size:cover;
 padding:0 10vw 0 5vw;
}
@media(max-width:600px) {
 .login {
  font-size:14px
 }
}
.login__wrapper {
 width:600px
}
.login__wrapper-type {
 position:relative;
 width:70%;
 line-height:3;
 margin:0 auto;
 margin-bottom:1.2em;
 font-size:20px
}
.login__wrapper-type p {
 width:4em;
 text-align:center;
 cursor:pointer
}
.login__wrapper-type-line {
 position:absolute;
 bottom:0;
 left:0;
 width:4em;
 height:2px;
 background-image:linear-gradient(-90deg,rgba(2,251,254,.8),rgba(255,31,228,.8));
 transition:all .5s
}
.login__wrapper-type .register {
 left:100%;
 transform:translateX(-100%)
}
.login__wrapper .form,
.login__wrapper .form .el-select {
 width:100%
}
.login__wrapper .form .el-input__inner {
 background-color:transparent;
 box-shadow:none!important;
 color:#fff;
 font-size:16px;
 padding:0
}
@media(max-width:600px) {
 .login__wrapper .form .el-input__inner {
  font-size:14px
 }
}
.login__wrapper .form .el-form-item {
 padding-bottom:2em;
 /*margin-bottom:2em;*/
 border-bottom:1px solid rgba(2,251,254,.35)
}
.login__wrapper .form .el-form-item .el-form-item__label {
 color:#fff;
 text-align:left;
 font-size:16px
}
@media(max-width:600px) {
 .login__wrapper .form .el-form-item .el-form-item__label {
  font-size:14px
 }
}
.login__wrapper .form .el-form-item .el-input-group__append {
 padding:0;
 background-color:transparent;
 box-shadow:none
}
.login__wrapper .form .el-form-item .el-input-number__decrease,
.login__wrapper .form .el-form-item .el-input-number__increase {
 background:transparent;
 border:0
}
.login__wrapper .form .form-item {
 -webkit-user-select:none;
 -moz-user-select:none;
 user-select:none
}
.login__wrapper .form .form-item span {
 border-radius:5px;
 color:#666;
 line-height:2;
 /*margin-bottom:2em;*/
 padding:0 5px;
 cursor:pointer;
 transition:all .3s
}
.login__wrapper .form .form-item span:last-child {
 color:#0984d8; margin-right: 20px;
}
.login__wrapper .form .form-item span:hover {
 background-color:rgba(0,0,0,.2)
}
.login__wrapper .form .form-item .btn {
 width:30%;
 line-height:3;
 text-align:center;
 background:linear-gradient(45deg,#157c74,#15ded0);
 border-radius:6px;
 box-shadow:none;
 cursor:pointer
}
@media(max-width:600px) {
 .login__wrapper .form .form-item .btn {
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content
 }
}
.login__wrapper .form .form-item .btn:hover {
 background:linear-gradient(90deg,#13ad9d,#1df4f1,#15ded0);
 background-size:300%;
 -webkit-animation:glow 3s linear infinite;
 animation:glow 3s linear infinite;
 box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
}
@media(max-width:600px) {
 .login__wrapper .form .form-item .btn-login {
  width:80%;
  line-height:2.5;
  border-radius:35px;
  background:hsla(0,0%,100%,.3);
  border:1px solid #2be6f7
 }
 .login {
  padding:0;
  justify-content:center;
  align-items:center;
  /*background-size:200% 100%;*/
  background-position-x:center;
 }
 .login__wrapper {
  width:85vw
 }
}
.login-procuratorate-handset {
 transform:rotate(90deg)
}


.clear{clear:both;}
#login .hd .on{background-image: linear-gradient(45deg,#0ef6e2,#15ded0);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;}
#login .hd li{list-style-type: none; float:left; margin:0 20px 0px 20px; }
#login .hd li.on{border-bottom: 2px solid #15ded0;

}
#login .hd .on,.d-flex a{color:#12c4b9 ; text-align: center;}


#login{position: relative;}
#login .hd li:nth-of-type(3){position: absolute; top:280px;}
#login .hd li:nth-of-type(4){position: absolute; top:280px;}

#login2 .hd{ display: block;}
#login2 .hd ul { margin-bottom: 20px;}

#login2 .bd2{ display: none; }
#login2 li{list-style-type: none; }
.layui-layer-msg{
 color:red !important;
}