.box {
    width:100%;
    max-width:10rem;
    height:16.106666666666666rem;
    background:url("../images/bg.png")  no-repeat;
    background-size:100% 100%;
    display:flex;
    justify-content:center;
    padding-top:1.28rem;
    box-sizing:border-box;
    margin:0 auto;
}
.main {
    position:relative;
    width:8.4rem;
    height:8.906667rem;
    background:url("../images/content-bg.png") no-repeat;
    background-size:100% 100%;
    text-align:center;
}
.main-content {
    width: 100%;
    height: 6.2rem;
}
.main-title {
    width:3.493333333333333rem;
    height:0.49333333333333335rem;
    margin:0.6933333333333334rem 0 0.5866666666666667rem;
}
.main-channel {
    /* width:4.88rem; */
    width: 7.5rem;
    display:flex;
    justify-content:space-between;
    margin:0 auto 0.3333333333333333rem;
    font-size:0.3466666666666667rem;
    color:#a4a4a4;
}
.main-channel-title {
    position:relative;
    padding-bottom:0.13333333333333333rem;
    box-sizing:border-box;
}
.active-channel {
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:0.44rem;
    height:0.04rem;
    background-color:#cd292d;
}
.f1 {
    color:#ffffff;
}
.check-box {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:0.28rem;
}
.input-long-box {
    width:7.573333333333333rem;
    height:0.9733333333333334rem;
    background:url("../images/input-long-box.png") no-repeat;
    background-size:100% 100%;
    border:none;
    padding-left:0.26666666666666666rem;
    font-size:0.29333333333333333rem;
    color:#a4a4a4;
    margin-bottom:0.28rem;
}
.input-box {
    width:4.333333333333333rem;
    height:0.9733333333333334rem;
    background:url("../images/input-box.png") no-repeat;
    background-size:100% 100%;
    border:none;
    padding-left:0.26666666666666666rem;
    font-size:0.29333333333333333rem;
    color:#a4a4a4;
}
.check-box-right {
    display:flex;
    justify-content:center;
    align-items:center;
    width:2.6133333333333333rem;
    height:0.9733333333333334rem;
    background-color:#3e3e4a;
    margin-left:0.6266666666666667rem;
    font-size:0.29333333333333333rem;
    color:#e2e2e2;
}
.check-box-right img {
    width:2.6133333333333333rem;
    height:0.9733333333333334rem;
}
.login-btn {
    width:7.573333333333333rem;
    height:0.9733333333333334rem;
    margin:0.3333333333333333rem auto 0;
}
.login-btn img {
    width:100%;
    height:100%;
}
.password-right {
    display:block;
    font-size:0.29333333333333333rem;
    color:#c3c3c5;
    margin:0.14666666666666667rem 0.26666666666666666rem 0 0;
    text-align:right;
}
.main-item .login-tip {
    color: grey;
    font-size:0.29333333333333333rem;
    margin-top: 0.147rem;
    width: 100%;
    text-align: center;
}
.main-bottom {
    margin-top:0.48rem;
}
.main-fast-login {
    width:1.16rem;
    height:0.28rem;
    margin-bottom:0.37333333333333335rem;
}
.main-bottom-logo {
    width:3.933333333333333rem;
    display:flex;
    justify-content:space-between;
    margin:0 auto 0.76rem;
}
.main-logo {
    width:0.8533333333333334rem;
    height:0.84rem;
}
.main-logo img{
    width:0.8533333333333334rem;
    height:0.84rem;
}
.close-btn {
    width:0.37333333333333335rem;
    height:0.37333333333333335rem;
    position:absolute;
    top:0.32rem;
    right:0.25333333333333335rem;
}
.close-btn img{
    width:0.37333333333333335rem;
    height:0.37333333333333335rem;
}
/* 弹窗 */
.confirm-btn {
    width:7.573333333333333rem;
    height:0.9733333333333334rem;
    margin:0 auto;
}
.confirm-btn img {
    width:7.573333333333333rem;
    height:0.9733333333333334rem;
}
.login-success-box {
    width:8.4rem;
    height:5.613333333333333rem;
    background:url("../images/model-bg-login.png") no-repeat;
    background-size:100% 100%;
    text-align:center;
}
.login-success-title {
    width:100%;
    height:0.48rem;
    margin:0.5333333333333333rem 0 0.6666666666666666rem;
    color: #fff;
    font-size: 0.36rem;
    font-weight: bold;
}
.content {
    margin-bottom:0.8933333333333333rem;
}
.desc {
    font-size:0.37333333333333335rem;
    color:#a4a4a4;
    margin-bottom:0.17333333333333334rem;
}
.name {
    font-size:0.37333333333333335rem;
    color:#ffffff;
}
.no-create-role-box {
    width:8.4rem;
    height:4.866666666666666rem;
    background:url("../images/model-bg-role.png") no-repeat;
    background-size:100% 100%;
    margin-top:5.906666666666666rem;
    text-align:center;
}
.no-create-role-desc {
    width:4.28rem;
    height:0.8533333333333334rem;
    margin:1.2266666666666666rem 0 1.16rem;
}

/*alert*/
.custom-alert-wrap{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.custom-alert{
    border-radius: 4px;
    width: 60%;
    min-height: 2rem;
    background-color: #fff;
    padding: 0.5rem;
}
.custom-alert-text{
    font-size: .35rem;
}
.custom-alert-btn{
    display: block;
    width: 1.5rem;
    height: .8rem;
    line-height: .8rem;
    border-radius: .05rem;
    background-color: #2c82ff;
    color: #fff;
    text-align: center;
    margin: .8rem auto 0;
}