.modal-body .login-warp{display:flex;}
.modal-body .signin {background-size: 100%;border:1px solid #ffffff47;width:100%;border-radius: 20px;display: flex;justify-content:center;    position: relative;}
.modal-body .login-logo{width: 200px;position:absolute;left:0px;top: -78px;  height: 0px;}
.modal-body .sign-warp .check-font a{color:#4a95fb}
.modal-body .form-warp .svgimg{width:20px;height:20px;overflow: hidden;position:absolute;top: 30px;left:0px;opacity: 0.8;}
.modal-body .form-warp .svgimg img{width: 100%;height: 100%; filter: drop-shadow(#333 100px 0); transform: translateX(-100px); }
.modal-body .form-warp .password-icon{height:24px;top: 28px;left: 3px;}
.modal-body .form-warp .code-icon{height:24px;top: 28px;left:0px;}


.modal-body .form-tips{color:#fff}
.modal-body .form-warp .password-icon img{width: 80%;height: 80%; }
.modal-body .login-logo img{width:100%}
.modal-body .login-footer {font-size: 12px;width: 100%;position: absolute;left: 0px;bottom: -13px; height: 0px;color: #c9c9c9; text-align: center;opacity: 0.6;}
.modal-body .sign-box{width:90%;height:100%;    position: relative;}

.modal-body .sign-warp{color:#333;position:relative;}
.modal-body .sign-warp .sign-title{text-align: center;padding-top: 28px;}
.modal-body .sign-warp .sign-title .title{font-size:16px;font-weight:bold;}
.modal-body .sign-warp .sign-title a{color:#4a95fb}
.modal-body .sign-warp .sign-title .s-font{font-size:14px;color:#666}
.modal-body .sign-warp .sign-title .s-font .btn-primary{background:transparent;font-size: 14px;padding-top: 6px;color: #4a95fb;}
.modal-body .btn-close{position: absolute;right: -33px;padding: 13px; top: -13px;}
.modal-body .btn-close:focus{box-shadow:none;}
.modal-body .login-tab{padding-top:0px;}
.modal-body .login-tab ul{display:flex;height:40px;justify-content: center;}
.modal-body .login-tab li button{background:transparent;color:#333;border:0px;height:42px;display:block;padding: 0px 9px;}
.modal-body .login-tab li .active{height: 40px;color:#000;font-size:18px;font-weight: bold;}
.modal-body .login-tab li{padding: 0px 14px;}
.modal-body .form-check-input {--bs-form-check-bg: #ffffff;}

.modal-body .web-button{position: relative;    margin-top: 20px;}
.modal-body .web-button .form-tips{top:-37px}

.modal-body .form-warp{margin-top:20px;}
.modal-body .sign-warp .form-group{position:relative;margin-top:12px;padding-bottom:6px;}
.modal-body .form-warp .form-title{font-size:13px;display:block;padding-bottom:6px;opacity:0.8}
.modal-body .form-warp .form-control,
.modal-body .form-warp .form-control:focus,
.modal-body .form-warp .form-control:active{box-shadow:none;outline:none;background:transparent;border-radius:0px;border:none;border-bottom:1px solid #494a55;color:#333;font-size:14px;text-indent: 15px;}
.modal-body .form-warp .form-control:hover{border-bottom:1px solid #fbb92a;}
.modal-body .form-warp .form-control::-moz-placeholder {color: #999;}
.modal-body .form-warp .form-control:-ms-input-placeholder {color: #999;}
.modal-body .form-warp .form-control::-webkit-input-placeholder {color: #999;}

.modal-body .form-warp .form-code{position:relative;display:flex}
.modal-body .form-warp .form-code .code-img{width: 210px;height: 36px}
.modal-body .form-warp .form-code .code-img img {width: 107px;position: absolute; bottom: 0px;    right: 0px}
.modal-body .sign-warp .check-font{position:relative;display:flex;justify-content: space-between;opacity: 0.8;    font-size: 13px;}
.modal-body .form-warp .form-code .code-btn {display: block;margin-left: 30px;background: transparent; border: 1px solid var(--font-theme);border-radius: 6px;font-size: 13px; color: var(--font-theme);padding:8px 0px; width: 140px;}
.modal-body .form-warp .form-code .code-btn[disabled=disabled]{border: 1px solid #373737;color: #828282;cursor: no-drop;}
.modal-body .tab-content .unable{font-size:13px;padding-bottom:30px;opacity: 0.8;}
.modal-body .tab-content .unable span{color:#66dfc6}
.modal-body .tab-content .return-btn{opacity: 0.8;display:flex;justify-content:center;padding:20px;}
.modal-body .tab-content .return-btn button{cursor: pointer;background: transparent;color: #fff;opacity: 0.8;border: 0px;padding: 12px;font-size:13px}
.modal-body .tab-content .return-btn button:hover{opacity:1}
.modal-body .third-login{text-align:center;padding-top:15px;}
.modal-body .third-login .or-line{height: 12px;font-size: 12px;color: #9e9e9e;position:relative;display:flex;}
.modal-body .third-login .or-line:before,
.modal-body .third-login .or-line:after{content: "";border-bottom:1px solid #e5e5e5;width:40%;display: block;flex:1}
.modal-body .third-login .or-line span{font-size: 12px;padding: 0px 12px;position: relative;top: 2px;}
.modal-body .third-login .third-font {font-size: 12px;padding-top: 15px;color: #9a9a9a;}
.modal-body .third-icon{display:flex;justify-content:center;margin-top: 0px;}
.modal-body .third-icon span {width: 30px; background: #fff; border-radius: 4px; margin: 7px;padding: 3px; height: 30px;cursor:pointer;opacity:0.8}
.modal-body .third-icon img{height:80%;width:80%}
.modal-body .third-icon span:first-child img{height:90%;width:90%}
.modal-body .third-icon span:hover{opacity:1}

.modal-body .step ul{margin-top: 34px;display:flex;height: 18px;}
.modal-body .step li{line-height:32px;flex:1;color:#9f9f9f;position:relative;text-align:center;font-size:12px}
.modal-body .step li span{margin:auto;font-size:12px;background: #1e212a;color:#8d8d93;border-radius:40px;line-height:25px;width:25px;height:25px;border:1px solid #494a55;display:inline-block;    margin-right: 10px;}
.modal-body .step .active{color: var(--font-theme);}
.modal-body .step .active span{ background: var(--btn-theme);color: #000;border:1px solid var(--font-theme);}
.modal-body .forgot-success{text-align:center}
.modal-body .forgot-success img{width:90px;display:block;margin:auto;padding: 38px 0px;}
.modal-body .forgot-success .btn { border-radius: 62px;padding: 8px 0px;font-size: 14px;width: 221px;}
.modal-body .btn-top-m{margin-top:18px}
.modal-body .mod-flex {display: flex;align-items: center;justify-content: center;padding: 30px 15px;position: relative;}
.modal-body .mod-flex .svgimg{width: 80px;height: 80px;overflow: hidden;}
.modal-body .mod-flex .svgimg img{width: 100%;height: 100%; filter: drop-shadow(#d19595 100px 0); transform: translateX(-100px); }
.modal-body .mod-flex .mode-title{color:#d19595;font-size: 20px; padding-bottom: 6px;}
.modal-body .mod-flex .mode-cont{color:#7e7e7e}
.modal-body .mod-flex .mode-warp{padding-left:12px}
.modal-body .mod-flex .btn-close {position: absolute;right: 0;padding: 2px; top: 0;}
.modal-body .success-color .svgimg img{filter: drop-shadow(#77b38a 100px 0); }
.modal-body .success-color .mode-title{color: #77b38a;}
.modal-body .warn-color .svgimg img{filter: drop-shadow(#ffb17d 100px 0); }
.modal-body .warn-color .mode-title{color: #ffb17d;}
.modal-body .fail-color .svgimg img{filter: drop-shadow(#d19595 100px 0); }
.modal-body .fail-color .mode-title{color: #d19595;}

/*tips*/
.brief-ok,
.brief-wrong {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 50%;
  top: 50%;
  border-radius: 5px;
  padding: 9px 21px;
  background: #000b;
  box-shadow: 0 12px 24px 0 rgba(175, 175, 175, .2);
  opacity: 1;
  animation: myfirst 1s;
  transform: translate(-50%, -50%);
}
.brief-ok .brief-warp,
.brief-wrong .brief-warp {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.brief-ok .svgimg,
.brief-wrong .svgimg {
  width: 30px;
  height: 30px;
  overflow: hidden;
}

.brief-ok img,
.brief-wrong img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(#77b38a 100px 0);
  transform: translateX(-100px);
}

.brief-ok .brief-cont,
.brief-wrong .brief-cont {
  color: #77b38a;
  padding-left: 6px
}

@keyframes myfirst {
  0% {
    opacity: 0.1;
    transform: translate(-50%, -50%) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.brief-wrong img {
  filter: drop-shadow(#ffc7cf 100px 0);
}

.brief-wrong .brief-cont {
  color: #ffc7cf;
}