.loginBox-mask,
.loginBox-mask *{
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
            box-sizing: border-box;
    -webkit-tap-highlight-color:transparent;
    margin: 0;
    padding: 0;
}
.loginBox-mask{
    width: 100%;
    height: 100%;
    background-color: rgba(50, 50, 50, 0.5);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.loginBox-body{
    height: 335px;
    width: 580px;
    border-radius: 8px;
    box-shadow: 8px 13px 30px 0px rgba(177,177,177,0.5);
    background-color: #F6F6F6;
    zoom: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 9999;
}
.loginBox-closeBtn{
    display: block;
    width: 50px;
    height: 14px;
    line-height: 14px;
    font-size: 13px;
    color: #999;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAJFBMVEUAAACZmZmampqXl5eZmZmfn5+ZmZmYmJiYmJiZmZmXl5eZmZmkQTK6AAAAC3RSTlMA8DBgUBDPsJCAINREkMAAAACNSURBVCjPhc+xDcJAEETRkQ0BhAQkJKYDchKX4Bbogg5IaQU53OZAp8/90BOcdKsXzGQ7+8fNz3heMtbq4V5zjpfqZKzPklxrFZx+79AIYEogAogAIoAIIH8gAUgAEoCkAXOoeodQkrrOpK4zqevMAeJMiDMhHUAEEAFEAOlAMgAgU3YAyJy8GoA8Q8wXSmZFnd3ZtAIAAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    background-size: 11px 11px;
    background-position: left center;
    cursor: pointer;
    user-select: none;
    padding-left: 18px;
    position: absolute;
    right: 8px;
    top: 8px;
}
.loginBox-body-left,
.loginBox-body-right{
    padding: 45px 5px 25px;
}
.loginBox-body-left{
    height: 100%;
    width: 330px;
    background-color: #FFF;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    float: left;
}
.loginBox-body-right{
    height: 100%;
    width: 250px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    padding-bottom: 10px;
    float: right;
}
.loginBox-body-pic{
    width: 220px;
    height: 180px;
    background-image: url(data:image/png;base64,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);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    margin: 0 auto;
}
.loginBox-body-desc{
    width: 240px;
    line-height: 1.7;
    font-size: 13px;
    color: #333;
    text-align: center;
    padding: 15px 0;
    margin: 10px auto 0;
}
.loginBox-body-content{
    padding-top: 20px;
}
.login-qrcode-wrap,
.qrcode-overdue{
    width: 150px;
    height: 150px;
    margin: 0 auto;
    font-size: 0;
}
.loginBox-body-content.timeout .login-qrcode-wrap{
    display: none;
}
.login-qrcode-wrap img{
    width: 100%;
    height: 100%;
}
.qrcode-overdue{
    display: none;
    background-color: #E3E3E3;
    border-radius: 5px;
    text-align: center;
    font-size: 0;
}
.loginBox-body-content.timeout .qrcode-overdue{
    display: block;
}
.qrcode-overdue:after{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
    font-size: 0;
}
.qrcode-overdue P{
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    color: #999;
}
.login-tips{
    font-size: 16px;
    color: #666;
    text-align: center;
    padding: 20px 0;
}
.qrcode-time{
    font-size: 14px;
    color: #666;
    text-align: center;
}
.loginBox-body-content.timeout .qrcode-time{
    display: none;
}
.qrcode-time span{
    color: #D0021B;
}
.get-qrcode-again{
    display: none;
    font-size: 0;
    text-align: center;
}
.loginBox-body-content.timeout .get-qrcode-again{
    display: block;
}
.get-qrcode-again a{
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    color: #015792;
    cursor: pointer;
}

@media (max-width: 750px) {
    .loginBox-body{
        width: 300px;
        height: auto;
    }
    .loginBox-body-left{
        width: 100%;
        height: auto;
        background-color: transparent;
        padding: 0;
    }
    .loginBox-body-pic{
        display: none;
    }
    .loginBox-body-desc{
        padding-top: 20px;
    }
    .loginBox-body-right{
        width: 100%;
        padding: 0;
        padding-bottom: 30px;
    }
    .loginBox-body-content{
        padding-top: 5px;
    }
    .loginBox-qr-wrap{
        height: 270px;
    }
    .loginBox-qr-desc{
        margin: 0;
    }
    .login-tips{
        padding: 15px 0;
    }
}