@charset "utf-8";
@import "../fonts/iconfont.css";
@import "fonts/iconfont.css";

*{margin:0;padding:0}
html,body{margin:0;padding:0;height: 100%;font-size:14px;-webkit-overflow-scrolling : touch;}
/* body{background-color: #1e2746;background-image: -webkit-repeating-radial-gradient(center center,rgba(0,0,0,.1),rgba(0,0,0,.1) 1px,transparent 0,transparent 100%);background-image: repeating-radial-gradient(center center,rgba(0,0,0,.1),rgba(0,0,0,.1) 1px,transparent 0,transparent 100%);background-size: 4px 4px;background-attachment: fixed;position: relative} */
body{position: relative;display: flex;
    flex-direction: column;}
ul,li,p{margin:0;padding:0}
ul,li{list-style: none;}
a{text-decoration: none;color:#666}
a,a:hover,a:active,a:visited,a:link,a:focus,li,button,label{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;outline:none;}
input,button{outline: none;-webkit-appearance: none;-moz-appearance: none;}
input::-ms-clear{display:none;}

/* input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill {background-color:rgba(64,81,128,0.7);background-image: none;} */
/* input:-webkit-autofill { box-shadow: 0 0 0 1000px #364571 inset !important;color:#fff} */

/* .wrapper{width: 1178px;margin: 0 auto;padding-top: 68px;position: relative;-webkit-overflow-scrolling : touch;z-index: 1;padding-bottom: 80px;box-sizing: border-box} */
.wrapper {
    flex: 1;
    /* width: 1178px;
    position: absolute;
    margin-top: 30px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
}
.fl{float: left}
.fr{float: right}
.clear:after{content:'';display: table;clear: both}
.blue{color:#2981ff !important;}
.red{color:#ff5f5f !important;}
.grey{color:#d2d3d7 !important;}
.black{color: #626266;}
.underline{text-decoration: underline}
.inline-block{display: inline-block}
.center{text-align: center}
.left{text-align: left}
.bold{font-weight: bold}
.f16{font-size: 16px}
.f18{font-size: 18px}
.f20{font-size: 20px}
.mobile-data {display:none;}
.pc-data {display: block;}

/*滚动条样式*/
::-webkit-scrollbar-track-piece {background-color:#f0f1f7;}
::-webkit-scrollbar{width:9px;height:9px;border-radius: 9px;}
::-webkit-scrollbar-thumb{background-color:#dddddd;background-clip:padding-box;min-height:28px;border-radius: 9px;}
::-webkit-scrollbar-thumb:hover{background-color:#bbb;}

/*头*/
.login-header {position: absolute;top: 0;left:0;right:0;height: 66px;box-sizing: border-box; z-index: 9;border-bottom: 1px solid rgba(230, 230, 230, .4);}
/* .login-logo img{width: 129px;height: 32px;} */
.login-header-r li{display:inline-block;line-height: 33px;padding-left: 30px;}
.login-header-r li:after{content:'|';color:#ced1db;margin-left: 30px;opacity: 0.3;}
.login-header-r li:last-child:after{display: none}
.login-header-r li a{color:#323235}
.login-header-r li a:hover {color: #2981ff;}
.free-register{display: inline-block;height: 66px;background-color: #2981ff;width: 120px;line-height: 66px;color: #fff;text-align: center;margin-left: 15px;}

/*尾*/
.login-footer{position:absolute;bottom:19px;left: 0;right: 0; width:100%;text-align: center;color: #626266;}
.login-footer .info {font-size: 12px;color: #626266;opacity: 0.7;line-height: 2;}
.login-footer img {vertical-align: sub;}
.login-footer .links { color: #626266;font-size: 0; }
.login-footer .links a {font-size: 14px;line-height: 3;margin: 0 20px;}
.login-footer .info a:hover,.login-footer .links a:hover {color: #2981ff;opacity: 1;}


/* 左侧图片 */
.login-banner{width: calc(50% + 40px);height:100%;min-height: 750px;padding: 45px 8%;box-sizing: border-box; background: url('/static/image/new_login/login-bg.png') no-repeat right bottom;position: relative; background-size: cover;}
.login-banner .slogan { min-width: 380px; }
.login-banner .slogan h3 {font-size: 40px; font-weight: bold; color: #080808;margin-bottom: 14px; }
.login-banner .slogan p { font-size: 16px;color: #fff;height: 38px; line-height: 38px;display: inline-block;padding: 0 32px;box-sizing: border-box;text-align: center; background-image: linear-gradient(90deg, #2981ff 0%, #77edff 100%); }
.login-banner .slogan ul{ width: 100%; display: flex; flex-wrap: wrap;    max-width: 404px;margin-top: 27px; }
.login-banner .slogan ul li{width: 50%;padding-left: 22px;position: relative;box-sizing: border-box;line-height: 46px;color: #323233; }
.login-banner .slogan ul li::before{
    content: "";
    position: absolute;
    left: 7px;
    top: 20px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #2981ff;
}
.login-banner .slogan .new-logo{
    margin-bottom: 110px;
    display: inline-block;
}
.login-banner .slogan .new-logo img{
    max-width: 155px;
}
.new-logo-title{
    display: block;
    width: 360px;
    margin-bottom: 15px;
    margin-top: 8px;
}


/* 登录框 */
.login-item {
    flex: 1;
    padding: 66px 40px 0;
    box-sizing: border-box;
    background-color: #ffffff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-tab {padding-bottom: 0;}
.login-tab li{display: inline-block;padding-bottom: 15px;line-height: 1; font-size: 14px; margin-right: 26px;padding-top: 11px; cursor: pointer;color: #93939a;}
.login-tab li.on{color: #323235;font-size: 18px;}
.login-switch {width: 40px;height: 40px;cursor: pointer;position: relative;}
.login-qrcode {background: url('/static/image/new_login/QR.png') no-repeat;}
.login-diannao {background: url('/static/image/new_login/icon_diannao.png') no-repeat;}
.login-switch .tips-left {position: absolute;right: 50px;top: 6px;padding:0 8px;height: 28px;line-height: 28px;text-align: center;border-radius: 6px;white-space: nowrap; color: #2981ff;background-color: #e9f1ff;border: solid 1px #2981ff;}
.login-switch .tips-left:before{content:'';width: 0;height: 0;border-left: 6px solid #2981ff;border-bottom: 6px solid transparent;border-top: 6px solid transparent;position: absolute;right: -6px;top: 7px;}
.login-switch .tips-left:after{content:'';width: 0;height: 0;border-left: 4px solid #e9f1ff;border-bottom: 4px solid transparent;border-top: 4px solid transparent;position: absolute;right: -4px;top: 9px;}

.item-body{
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex: 1;
    max-width: 378px;
}
.item-body .login-right {flex:1;}
.qr-scanner {
    position: relative;
    height: 24px; width: 24px;
    background: url('/static/image/new_login/scan.png') no-repeat;
    background-repeat: no-repeat;
    -webkit-animation: radar-beam 2s steps(29) infinite;
    animation: radar-beam 2s steps(29) infinite;
}

.qrcode-login .wx-qrcode-title p{font-size: 16px;color: #323235;margin-left: 16px;}

@keyframes radar-beam {
    0% {
        background-position: 0, 0;
    }

    100% {
        background-position: 100%, 0;
    }
}
.new-login{display: flex;height: 100%;}

.btn{width:120px;display:inline-block;height: 48px;font-size: 14px; line-height:48px;border-radius: 6px;background-color: #2981ff;color:#fff;border:0;cursor: pointer;text-align: center;vertical-align: top}
.btn:active{background-color: #2981ff;color: #ffffff;}
.btn-md{width: 170px;}
.btn-sm{width: 120px;}
.btn-lg{width: 100%;text-indent: 10px;font-size: 14px;}
.btn-white{background-color: #fff;border:1px solid rgb(234, 235, 239);color:#333}
.btn-white:active{background-color: #fff;}
.btn-primary{background-color: transparent;color: #2981ff;border:1px solid #2981ff}
.btn-primary:active{background-color: transparent;}
.hollow-out { width: 132px; height: 48px;color: #323235;background-color: #ffffff;border: solid 1px #eaebef;}

.input-group{margin-top:20px;position: relative}
/* .input-group:first-child {margin-top: 20px;} */
/* .input-group:first-child{margin-top:10px;} */
.input-group input[type=text],.input-group input[type=password],.input-group input[type=number],select{position: relative;font-size: 14px; display:inline-block;height: 48px;border:none;border-radius: 6px;width: 100%;padding:0 17px;box-sizing: border-box;background-color: #f6f7fb;}
.input-group input::-webkit-input-placeholder{color:#b1b5bb}
.input-group input::-moz-placeholder{color:#b1b5bb}
.input-group input:-ms-input-placeholder{color:#b1b5bb}
.input-group input::-ms-input-placeholder{color:#b1b5bb}
.input-group input::placeholder{color:#b1b5bb}
/* .input-group input:focus{border:1px solid #2981ff;} */
/* .input-group.error input{border:1px solid #e02020;background-color: #fce8e8;} */
.input-group input:focus + i{color:#0195ff}
.input-group.error input + i{color:#e02020;}
/* .input-group .code-input{width: calc(100% - 130px) !important;} */
.input-group.error .tips.ERROR{
    position: absolute;
    left: 9px;
    bottom: -19px;
    display: block;
    font-size: 12px;
    color: #e02020;
}
.input-group.error .tips.ERROR i {vertical-align: -2px;margin-right: 3px;position: static;color:#e02020;}
.input-group.error input{-webkit-animation: shake 0.18s linear forwards;animation: shake 0.18s linear forwards}
.form-item{margin-top:15px;font-size: 14px;}
.form-group-tips {padding-top: 20px;}

.input-group.graph-code input{padding:0 110px 0 15px;}
.input-group.graph-code img{width:100px;height:35px;position: absolute;right: 7px;top:7px;cursor: pointer}
.code-box {        display: flex;
        align-items: center;
        justify-content: space-around;}
.input-group.input-code {width:calc(100% - 130px)}
.verify-bind .input-group.input-code {width: 61%;}
.verify-bind .p-hide {margin-top: 20px;}
.verify-bind .input-group .iconfont {position: absolute;right: 10px;top: 13px;color: #bdbdbd;}

.login-color{color: #93939a;}

.checkbox{cursor: pointer;font-size: 0;-webkit-user-select:none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.checkbox input{display: none;}
.checkbox i{display: inline-block;width: 16px;height: 16px;border:1px solid #dde4ed;position: relative;top: 3px;font-size: 12px;border-radius: 3px;}
.checkbox input:checked + i:before{content:'';display: block;position: absolute;top: -1px;left: -1px;border-radius: 3px; width: 18px;height: 18px;line-height: 12px;color:#fff; background-color: #2981ff; border: 1px solid #2981ff; box-sizing: border-box;}
.checkbox input:checked + i:after {content: '\e613';font-family: 'iconfont';z-index: 9;position: relative;color: #fff;display: block;transform: scale(.7);top: 1px;}
.checkbox span{color:#93939a;display: inline-block;line-height: 22px;vertical-align: top;font-size: 14px;margin-left: 10px;}
.forget_psw:hover {color:#323235;}

/* 二维码登录 */
.qrcode-login{text-align: center;}
.qrcode-login img{width: 140px;
    height: 140px;
    cursor: pointer;
    border: 1px solid #ededed;
    border-radius: 10px;}
.qrcode-login p{color:#626266;line-height: 22px}
.wx-qrcode-title {
    font-size: 14px;
    color: #323235;
    font-weight: bold;
    margin-bottom: 12px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-item-box .login-tip{
    position: relative;
    text-align: center;
    color: #93939a;
    margin: 21px 0 30px;

}
.login-item-box .login-tip::before{
    content: "";
    position: absolute;
    width: calc(100% - 22px);
    height: 1px;
    background-color: #f3f3f3;
    top: 9px;
    left: 11px;
}
.login-item-box .login-tip p{
    background-color: #fff;
    display: inline-block;
    z-index: 1;
    position: relative;
    padding: 0 14px;
}


/* 微信未绑定 */
.qrcode-unbind {width: 400px;padding: 20px 40px;box-sizing: border-box;background-color: #ffffff;}
.qrcode-unbind .title{font-size: 14px;color: #1c1d1f;font-weight: bold;}
.qrcode-unbind .title .iconfont{color: #2981ff;font-size: 18px;vertical-align: top;margin-right: 5px}
.qrcode-unbind p{text-align: left; margin-bottom: 18px; margin-top: 18px; padding: 0 11px;}
.qrcode-unbind .btn-md{width: 134px;line-height: 40px;height: 40px;box-sizing: border-box;}
.qrcode-unbind .btn-md + .btn-md{margin-left: 15px}


/* 绑定邮箱 */
.bind-email-box {position: relative;}
.bind-email-box .item-body { height: 100%;padding: 0; justify-content: center; }
.bind-email-box .close {position: absolute;top: 10px;right: 10px;}
.bind-email-box .close i {font-size: 20px;color: #bec3c9;}

.bindEmail .ts {display: flex;margin: 63px auto 20px;font-size: 16px;color: #1c1d1f;text-align: left;font-weight: bold;}
.bindEmail .ts i {position: relative;top: -2px;font-size: 20px; margin-right: 10px;}
.bindEmail .inline-block {padding: 0 20px;}
.bindEmail .inline-block p {line-height: 24px;font-size: 14px;	color: #626266;}
.bindEmail .btn-div {margin-top: 23px;font-size: 0;}
.bindEmail .hollow-out {margin-left: 20px;}

.pop .content {text-align: center;}
.pop .content i { position: relative;top: 1px; font-size: 20px;margin-right: 10px; }
.pop .content p {margin-bottom: 27px;font-size: 16px; color: #1c1d1f;font-weight: bold;}
.pop .bind-fail {margin-top: 25px;color: #626266;}


/* 注册 */
.register-item {width: 1180px;max-height: 724px;background-color: #ffffff;padding: 27px 0;box-sizing: border-box;}
.register-item .item-header {padding:21px;padding-top: 0; border-bottom: 1px solid #eaebef;}
.register-item .item-header .title {margin-left: 20px;font-size: 20px;}
.register-item .item-reg-main {margin: 50px 360px;}
.register-item .tips {color: #babac2;position: absolute;white-space: nowrap;bottom: -17px;left: 0;font-size: 12px;}
/* .register-item .phonecode.input-group.error .tips {right: 145px !important;} */
.item-reg-main{width: 378px;}
.item-reg-main .title{
    font-size: 18px;
    text-align: center;
    color: #323235;
    padding-bottom: 13px;
}
.item-reg-main .tips:not(.ERROR){
    position: absolute;
    width: 100%;
    left: 0;
    top: 60px;
    background-color: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    padding: 14px;
    box-sizing: border-box;
    z-index: 1;
}
.item-reg-main .tips:not(.ERROR)::before{
    content: "";
    position: absolute;
    left: 47px;
    top: -7px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid rgba(0, 0, 0, .7);
}

/*滑动验证码 - 20191106补充*/
#sliding {bottom: -2px;left: 0;z-index: 9;}
.form-group.input-code{position: relative;}
.sliding-img-check-box{position: absolute;
    bottom: 55px;
    left: 10px;
    width: 360px;
    text-align: center;
    background-color: #ffffff;
    box-shadow: 0 5px 20px rgb(14 106 231 / 15%);
    visibility: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 9;
}
.sliding-img-check-box>div:last-child{margin-bottom: 10px;}
.sliding-img-check-box>.close{position: absolute;right:16px;top: 12px;cursor: pointer;font-size: 22px;z-index: 1;color: rgb(190, 195, 201);}
.sliding-img-display{position:relative;padding: 0 10px 0;overflow:hidden;margin:auto;background-color: #ffffff;}
.sliding-img-display>p{text-align: left;line-height: 35px;font-size: 12px;color: #000;}
.sliding-img-cnt{position:relative;width: 100%;height: 160px}
.sliding-img-src,.sliding-img-fragment-hollow{position:absolute;left:0;top:0;z-index:10}
.sliding-img-src{position:static !important;width: 100% !important;;height: 100% !important;;border-radius: 0 !important;}
.sliding-img-fragment-cnt{top:0;left:2px;position:absolute;width: 100% ;height: 100%}
.sliding-img-fragment-cnt .sliding-img-fragment-content,.sliding-img-fragment-cnt .sliding-img-fragment{position:absolute;left:0;z-index:20}
.sliding-smooth-cnt{position:relative;width:320px;height: 40px;margin: 0 auto;border-radius:24px;margin-top: 10px;}
.sliding-smooth-bar,.sliding-smooth-circle{position:relative;top:50%;transform:translateY(-50%)}
.sliding-smooth-bar{width:100%;height:10px;background-color:#e4e4e4;border-radius:24px}
.sliding-smooth-circle{position:absolute;width: 52px;height:30px;background-color: #306af4;border-radius: 30px;box-shadow: 0 0 6px 0 #306af4;cursor:pointer;padding: 10px 14px;box-sizing: border-box;}
.sliding-smooth-circle span{float: left;display: block;width: 2px;height: 10px;background-color: #fff;margin: 0 3px;}
.sliding-smooth-circle span:last-child{margin-right: 0}
.sliding-icon-refresh{display:block;position:relative;cursor:pointer;font-size: 12px;color: #333;margin-top: 5px;margin-bottom: 5px;}
.sliding-icon-refresh span{position: relative !important;top:1px !important;right: auto !important;font-size: 14px;margin-right: 4px;margin-left: 1px;color: #323235;}
.sliding-loadding{background-color: #ffffff;position: absolute;top:0;left:0;width: 100%;height: 100%;display: none;z-index: 99;padding:60px 0;box-sizing: border-box;color:#fff}
.sliding-loadding img{position: static !important;width: 32px !important;height: 32px !important;border-radius: 0}

.sliding-btn{height: 42px;background-color: #eaebef;border-radius: 6px;position: relative;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.sliding-btn:before{content:'向右拖动滑块';display:block;line-height: 42px;text-align: center;color: #626266;font-size: 14px;}
.sliding-btn.success{background-color: #44cb77;color:#fff}
.sliding-btn.success >*{display: none}
.sliding-btn.success:before{content:'验证成功';color:#fff;padding-left: 20px;}
.sliding-btn.success:after{content:'\e61c';color:#fff;display:block;width: 100%;font-family: iconfont;font-size: 20px;position: absolute;top:-1px;line-height: 45px;text-align: center;margin-left: -35px;}
.sliding-btn.error:before{content:'验证失败';color:#f4583f;padding-left: 20px;}
.sliding-btn.error:after{content:'\e6b2';color:#f4583f;display:block;width: 100%;font-family: iconfont;font-size: 20px;position: absolute;top:-1px;line-height: 45px;text-align: center;margin-left: -35px;}
.sliding-btn .sliding-smooth-bar{width:0;height: 42px;position: absolute;left: 0;bottom:0;background-color: #2981ff;border-radius:4px;z-index: 9}
.sliding-btn .sliding-smooth-circle{width: 50px;height: 42px;border-radius: 6px;box-shadow: 0 0 10px rgba(14,106,231,0.15);background-color: #ffffff;z-index: 9;left: 0px;}
.sliding-btn .sliding-smooth-circle i{position: absolute;left: 15px;top: 11px;color:#6aa7ff;font-size: 18px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.sliding-btn .sliding-smooth-circle i:nth-child(2){left: 22px;}
.sliding-btn .sliding-smooth-circle.moving{background-color: #fff}
.sliding-btn .sliding-smooth-circle.moving i{color:#8bb8ff;-webkit-animation: moving 1s infinite;animation: moving 1s infinite}
.sliding-btn .sliding-smooth-circle.moving i:nth-child(2){-webkit-animation-delay: 1s;animation-delay: 1s}

.sliding-btn[data-disabled=true]{opacity: .6}
.sliding-btn[data-disabled=true]:before{content:'暂不可拖动';color:#d6d5d5}
.sliding-btn[data-disabled=true]:after{display: none}
.sliding-btn[data-disabled=true] .sliding-smooth-circle{opacity: .6}

.input-code input{padding:0 115px 0 20px;}
.input-code .btn{width: 120px;min-width: 120px; height: 48px;line-height:48px;position: absolute;border-radius: 6px;text-align: center;right: -130px;}
.input-code .btn[disabled="disabled"],.input-code .btn:disabled{ background-color: #bdc4d2; }
.input-code img{width:38px;height:42px;border-radius: 0;top: 50px;}
.input-code .sliding-img-fragment-cnt { -webkit-filter: drop-shadow(rgb(255, 255, 255) 0px 0px 2px); filter: drop-shadow(rgb(255, 255, 255) 0px 0px 2px); }
@media screen and (min-width: 1024px) and (max-width: 1600px){
    .login-banner{
        /* padding: 45px 70px; */
    }
}
@media screen and (max-width:1023px) {
    .new-logo-title{
        width: 100%;
        margin-top: 5px;
        margin-bottom: 15px;
    }
    .login-banner .slogan .new-logo{
        margin-bottom: 17px;
        display: inline-block;
    }
    .login-banner .slogan .new-logo img{
        max-width: 94px;
    }
    .mobile-data {display:inline-block;}
    img[alt="logo"] {width: 97.5px;}
    body {
        background-color: #e4eaf4;
    }
    .login-tab li {padding-bottom: 16px;}
    .wrapper {width: 100%;position: static;transform: none;margin: auto;}
    .item-body {padding-top: 0;}
    .login-banner {background: none !important;width: 100%;height: auto;min-height: auto; padding: 0;}
    .login-banner .slogan h3 {font-size: 24px;font-weight: bold;margin-bottom: 12px;}
    .login-banner .slogan p {font-size: 13px;line-height: 30px;height: 30px;padding: 0 12px;}
    .login-header,.qrcode-body,.qrcode-login,.links,.info:nth-child(2) {display: none;}
    .login-item {width: 100%;padding: 10px 20px 20px;min-height: auto;align-items: flex-start;border-radius: 20px 20px 0px 0px;}
    .item-body .login-right {border: none;padding: 0;margin: 0;}
    #sliding {
        position: fixed;
        width: 100%;
        max-width: 349px;
        bottom: initial;
        top: 15%;
        left: 50%;
        transform: translate(-50%,-15%);
    }
    .sliding-img-check-box {
        position: fixed;
        width: 100%;
        max-width: 349px;
        bottom: initial;
        top: 21%;
        left: 50% !important;
        transform: translate(-50%, -15%);
    }

    .input-group.input-code {width:100%}
    .input-group.input-code.error .tips.ERROR{
        right: 105px;
    }
    .input-code .btn {
        background-color: transparent;
        color: #2981ff;
        font-size: 14px;
        z-index: 1;
        right: 0;
        text-align: right;
    }

    /* .input-group{
        background-color: #f6f7fb;
    } */

    .register-item {width: 100%;padding: 20px 15px;margin-top: 12px;}
    .register-item .item-header {padding: 16px; padding-left: 0;padding-top: 0; color: #1c1d1f;font-size: 18px;}
    .register-item .item-reg-main {margin: 0;}
    .login-footer {position: static;margin-top: 30px;display: none;}

    .new-login{
        display: flex;
        flex-direction: column;
    }
    .login-banner .slogan{
        min-width: auto;
        min-height: 190px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .login-banner .slogan ul{display: none;}
    .m-banner-bg{
        position: absolute;
        left: 50%;
        top: 0;
        height: 190px;
        width: 100%;
        -webkit-transform: translate(-50%);
        transform: translate(-50%);
        background-repeat: no-repeat;
        background-position: right;
        background-image: url(/static/image/new_login/m-banner-bg.png);
        background-size: cover;
    }
    .input-group input[type=text],.input-group input[type=password]{
        background-color: transparent;
        padding: 0;
        padding-right: 140px;
        height: 44px;
    }
    .input-group.error .tips.ERROR i{
        vertical-align: 0px;
        margin-right: 6px;
        font-size: 12px;
    }
    .input-group.error .tips.ERROR{
        position: absolute;
        bottom: 12px;
        left: auto;
        right: 0;
        display: block;
        font-size: 11px;
        line-height: 20px;
        color: #e02020;
        background-color: #fde9e9;
        padding: 1px 6px;
        z-index: 1;
        border: 1px solid #eb2626;
        box-sizing: border-box;
    }
    /* .input-group.error .tips.ERROR::after{
        position: absolute;
        content: '';
        left: -5px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-right: 5px solid #fde9e9;
    } */
    /* .input-group.error .tips.ERROR::before{
        position: absolute;
        content: '';
        left: -11px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        border-width: 5px;
        border-style: solid;
        border-color: transparent #eb2626 transparent transparent;
    } */
    .item-reg-main .tips:not(.ERROR)::before{
        content: "";
        border:none
    }
    .input-group.error .tips.ERROR::after{
        position: absolute;
        content: '';
        left: -5px;
        top: 50%;
        transform:translateY(-50%) rotate(45deg) ;
        width: 8px;
        height: 8px;
        border-left: 1px solid #eb2626;
        border-bottom: 1px solid #eb2626;
        background-color: #fde9e9;
        -webkit-transform:translateY(-50%) rotate(45deg) ;
        -moz-transform:translateY(-50%) rotate(45deg) ;
        -ms-transform:translateY(-50%) rotate(45deg) ;
        -o-transform:translateY(-50%) rotate(45deg) ;
        z-index: 99;
}
    .input-group:not(.no-border){
        border-bottom: 1px solid #e7eaef;
    }
    .m-login-tab{width: 100%;}
    .m-login-tab ul{
        font-size: 0;
        margin: 0 -7.5px;
    }
    .m-login-tab ul li{
        width: 100%;
        margin: 0;
        padding: 0 7.5px;
        box-sizing: border-box;
        font-size: 12px;
        color: #323235;
    }
    .m-login-tab ul li.on{
        display: none;
    }
    .login-tab li.on {
        color: #323235;
        font-size: 12px;
    }
    .m-login-tab ul li img{
        width: 15px;
        height: 15px;
        margin-right: 10px;
    }
    .m-login-tab ul li .m-login-btn{
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e7eaef;
        height: 36px;
        border-radius: 6px;
    }
    .m-login-bottom{
        text-align: center;
        font-size: 13px;
        color: #626266;
        margin-top: 42px;
    }
    .m-login-bottom .m-free-register{
        color: #2981ff;
    }
    .login-item-box .login-tip {
        position: relative;
        text-align: center;
        color: #b1b5bb;
        margin: 17px 32px;
        font-size: 13px;
    }
    .btn-lg{font-size: 16px;}
    .input-group-name{
        font-size: 16px;
        color: #1c1d1f;
        font-weight: 500;
    }
    .input-group.m-longin-btn{
        margin-top: 50px;
    }
    .input-group.error input{
        color: #e02020;
    }
    .login-color,.checkbox span{color: #323235;}
    .login-item-box .login-tip::before{ width: 100%; left: 0; }
    .m-reg-main{
        width: 100%;
    }
    .m-login-item{
        flex-direction: column;
        align-items: center;
    }
    .input-group .code-input{
        width: 100% !important;
    }
    .phonecode .btn-sm{
        position: absolute;
        background-color: transparent;
        color: #2981ff;
        font-size: 14px;
        z-index: 1;
        right: 0;
        text-align: right;
    }
    .input-code .btn.m-code-btn[disabled="disabled"],.input-code .btn.m-code-btn:disabled{ background-color: transparent; color: #b0b5b9;}
}

.colorred{color:#f6667f !important;}
.colorgreen{color:#3fb76a !important;}
.coloryellow{color:#fa8c0a !important;}
.colorgrey{color:#a8a8a8 !important;}
.colorblack{color:#333333 !important;}

.colorred{color:#f6667f !important;}
.colorgreen{color:#3fb76a !important;}
.coloryellow{color:#fa8c0a !important;}

.colorred *{color:#f6667f !important;}
.colorgreen *{color:#3fb76a !important;}
.coloryellow *{color:#fa8c0a !important;}

.psw-policy{ position: absolute; top: -23px;left: 0; display: inline-block; margin-left: 8px; width: calc(100% + 4px); }
.psw-policy label {margin-right: 8px;}
.psw-policy span {display: inline-block; width: 33.33333%;height: 2px;background-color: rgb(223, 226, 229);vertical-align: 2px;}
.psw-policy.danger span:nth-child(1){background-color:#f6667f !important;}
.psw-policy.warning span:not(:last-child){background-color:#fa8c0a !important;}
.psw-policy.safe span{background-color:#3fb76a !important;}

.safety-box {display: none;position: absolute;top: 60px;left: 0;width: 100%;max-width: 358px; box-shadow: 0px 1px 7px 0px rgba(150, 150, 150, 0.26);text-align: left;padding: 8px 9px;box-sizing: border-box;background-color: #ffffff;border-radius: 6px;z-index: 9; font-size: 12px;}
.safety-box::before {position: absolute;content: '';left: 47px;top: -10px;width: 0; border-right: 10px solid transparent; border-bottom: 10px solid rgba(150, 150, 150, 0.16); border-left: 10px solid transparent; }
.safety-box::after {position: absolute;content: '';left: 48px;top: -9px;width: 0;border-right: 9px solid transparent; border-bottom: 9px solid #fff; border-left: 9px solid transparent;}
.safety-box p {line-height: 1.6;}
.safety-box i {vertical-align: -1px;color: #d1d3d6;margin-right: 6px;font-weight: bold;font-size: 14px;}
.safety-box i.pass {color: #26ad5c;}

@media screen and (max-width:1023px) {
    .psw-policy{ top: -26px;}
}

@media screen and (min-height:667px) {
    .login-footer {position: absolute;margin-top: 0;}
}

@media screen and (max-width: 850px) {
    /* .safety-box {top: 60px;right: 0;} */
    .safety-box::before {
        position: absolute;
        content: '';
        left: 17px;
        top: -8px;
        transform: translateY(-50%);
        width: 0;
        height: 0px;
        border-top: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid rgba(150, 150, 150);
        border-left: 7px solid transparent;
        filter: drop-shadow(0px -4px 4px rgba(150, 150, 150, 0.2));
        -webkit-filter: drop-shadow(0px -4px 4px rgba(150, 150, 150, 0.2));
}
    .safety-box::after {position: absolute;content: '';left: 15px;top: -4px;transform: translateY(-50%);width: 0;border-left: 9px solid transparent;border-right: 9px solid transparent;border-bottom: 9px solid #ffffff;}
}