.role-selector[data-v-5df60769] {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999
}

.role-selector .modal-content[data-v-5df60769] {
    position: relative;
    width: 396px;
    min-height: 472px;
    border-radius: 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
    animation: zoomIn-5df60769 .3s
}

.role-selector .modal-content .content-bg[data-v-5df60769] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%
}

.role-selector .modal-content .modal-header[data-v-5df60769] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.role-selector .modal-content .modal-header .modal-title[data-v-5df60769] {
    margin-top: 18px;
    color: #333;
    font-size: 20px;
    font-style: normal;
    font-weight: 700
}

.role-selector .modal-content .modal-header .modal-close[data-v-5df60769] {
    position: absolute;
    right: 28px;
    top: 18px;
    width: 36px;
    height: 36px;
    color: #333;
    cursor: pointer;
    transition: all .3s
}

.role-selector .modal-content .modal-body[data-v-5df60769] {
    padding: 28px 40px 32px;
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    z-index: 1
}

.role-selector .modal-content .modal-body .body-content[data-v-5df60769] {
    display: flex;
    flex-direction: column;
    flex: 1;
    font-size: 16px;
    font-style: normal;
    font-weight: 500
}

.role-selector .modal-content .modal-body .body-content .server[data-v-5df60769] {
    display: flex;
    align-items: center;
    white-space: nowrap
}

.role-selector .modal-content .modal-body .body-content .server .select-box[data-v-5df60769] {
    position: relative;
    width: 244px;
    height: 44px;
    margin-left: 24px
}

.role-selector .modal-content .modal-body .body-content .server .select-box .select-border[data-v-5df60769] {
    position: relative;
    width: 244px;
    height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #bda757;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    z-index: 999
}

.role-selector .modal-content .modal-body .body-content .server .select-box .select-border[data-v-5df60769]:hover {
    border: 1px solid #e2d299
}

.role-selector .modal-content .modal-body .body-content .server .select-box .select-border .select-arrow[data-v-5df60769] {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.role-selector .modal-content .modal-body .body-content .server .select-box .select-border .select-arrow img[data-v-5df60769] {
    width: 20px;
    height: 20px;
    transition: all .3s
}

.role-selector .modal-content .modal-body .body-content .server .select-box .select-border .select-arrow.reverse img[data-v-5df60769] {
    transform: rotate(180deg)
}

.role-selector .modal-content .modal-body .body-content .server .select-box .select-border .select-active[data-v-5df60769] {
    font-size: 16px;
    font-weight: 500
}

.role-selector .modal-content .modal-body .body-content .server .select-box .select-border .select-active.empty[data-v-5df60769] {
    color: #7e7e7e
}

.role-selector .modal-content .modal-body .body-content .server .select-box .select-content-box[data-v-5df60769] {
    position: absolute;
    top: 0;
    left: 0;
    width: 244px;
    max-height: 180px;
    overflow-y: auto;
    border-radius: 0 0 8px 8px;
    border: 1px solid #dadde3;
    background: #fff;
    transform: translateY(35px)
}

.role-selector .modal-content .modal-body .body-content .server .select-box .select-content-box .select-space[data-v-5df60769] {
    margin-top: 10px
}

.role-selector .modal-content .modal-body .body-content .server .select-box .select-content-box .select-item[data-v-5df60769] {
    height: 44px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    margin: 2px;
    box-sizing: border-box;
    cursor: pointer
}

.role-selector .modal-content .modal-body .body-content .server .select-box .select-content-box .select-item.active[data-v-5df60769], .role-selector .modal-content .modal-body .body-content .server .select-box .select-content-box .select-item[data-v-5df60769]:hover {
    background: #f9f9f9
}

.role-selector .modal-content .modal-body .body-content .role-info-container[data-v-5df60769] {
    height: 170px
}

.role-selector .modal-content .modal-body .body-content .role-info-container .role-id[data-v-5df60769] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 44px
}

.role-selector .modal-content .modal-body .body-content .role-info-container .role-name[data-v-5df60769], .role-selector .modal-content .modal-body .body-content .role-info-container .role-lv[data-v-5df60769] {
    margin-top: 24px
}

.role-selector .modal-content .modal-body .body-content .role-info-container .role-id[data-v-5df60769], .role-selector .modal-content .modal-body .body-content .role-info-container .role-name[data-v-5df60769], .role-selector .modal-content .modal-body .body-content .role-info-container .role-lv[data-v-5df60769] {
    color: #333;
    font-size: 16px;
    font-weight: 500
}

.role-selector .modal-content .modal-body .body-content .role-info-container .role-id .info-title[data-v-5df60769], .role-selector .modal-content .modal-body .body-content .role-info-container .role-name .info-title[data-v-5df60769], .role-selector .modal-content .modal-body .body-content .role-info-container .role-lv .info-title[data-v-5df60769] {
    color: #7e7e7e;
    font-size: 16px;
    font-weight: 500
}

.role-selector .modal-content .modal-body .body-content .no-role-info[data-v-5df60769] {
    padding-top: 44px;
    height: 170px;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    justify-content: center
}

.role-selector .modal-content .modal-body .modal-btn[data-v-5df60769] {
    border-radius: 8px;
    min-width: 280px;
    height: 48px;
    margin-top: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    cursor: pointer;
    background: #308bf5
}

.role-selector .modal-content .modal-body .modal-btn[data-v-5df60769]:hover {
    opacity: .8
}

.role-selector .modal-content .modal-footer[data-v-5df60769] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 32px;
    margin-left: 40px;
    margin-right: 40px;
    color: #7e7e7e;
    font-size: 14px
}

.role-selector .modal-content .modal-footer .agreement-box a[data-v-5df60769] {
    text-decoration: none
}

.role-selector .modal-content .modal-footer .agreement-item[data-v-5df60769] {
    color: #2980e5;
    cursor: pointer
}

.role-selector .modal-content .modal-footer .agreement-item[data-v-5df60769]:hover {
    opacity: .8
}

@keyframes slideUp-5df60769 {
    0% {
        transform: translateY(100%)
    }
}

@keyframes zoomIn-5df60769 {
    0% {
        transform: scale(.8)
    }
}

@media screen and (max-width: 428px) {
    .role-selector[data-v-5df60769] {
        align-items: flex-end
    }

    .role-selector .modal-content[data-v-5df60769] {
        width: 100%;
        min-height: 556px;
        border-radius: .32rem .32rem 0 0;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        animation: slideUp-5df60769 .3s
    }

    .role-selector .modal-content .content-bg[data-v-5df60769] {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0
    }

    .role-selector .modal-content .modal-header[data-v-5df60769] {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative
    }

    .role-selector .modal-content .modal-header .modal-title[data-v-5df60769] {
        margin-top: .4rem;
        color: #333;
        font-size: .36rem;
        font-style: normal;
        font-weight: 700
    }

    .role-selector .modal-content .modal-header .modal-close[data-v-5df60769] {
        position: absolute;
        right: .28rem;
        top: .28rem;
        width: .72rem;
        height: .72rem;
        color: #333;
        cursor: pointer;
        transition: all .3s
    }

    .role-selector .modal-content .modal-body[data-v-5df60769] {
        padding: .48rem .48rem .64rem;
        flex: 1;
        display: flex;
        align-items: center;
        flex-direction: column;
        z-index: 1
    }

    .role-selector .modal-content .modal-body .body-content[data-v-5df60769] {
        display: flex;
        flex-direction: column;
        font-size: .32rem;
        font-style: normal;
        font-weight: 500
    }

    .role-selector .modal-content .modal-body .body-content .server[data-v-5df60769] {
        display: flex;
        align-items: center
    }

    .role-selector .modal-content .modal-body .body-content .server .server-title[data-v-5df60769] {
        white-space: nowrap
    }

    .role-selector .modal-content .modal-body .body-content .server .select-box[data-v-5df60769] {
        position: relative;
        width: 5.1rem;
        height: .88rem;
        margin-left: .48rem
    }

    .role-selector .modal-content .modal-body .body-content .server .select-box .select-border[data-v-5df60769] {
        position: relative;
        width: 5.1rem;
        height: .88rem;
        padding: .2rem .24rem;
        border-radius: .16rem;
        border: .02rem solid #bda757;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        z-index: 999
    }

    .role-selector .modal-content .modal-body .body-content .server .select-box .select-border[data-v-5df60769]:hover {
        border: .02rem solid #e2d299
    }

    .role-selector .modal-content .modal-body .body-content .server .select-box .select-border .select-arrow[data-v-5df60769] {
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .role-selector .modal-content .modal-body .body-content .server .select-box .select-border .select-arrow img[data-v-5df60769] {
        width: 20px;
        height: 20px;
        transition: all .3s
    }

    .role-selector .modal-content .modal-body .body-content .server .select-box .select-border .select-arrow.reverse img[data-v-5df60769] {
        transform: rotate(180deg)
    }

    .role-selector .modal-content .modal-body .body-content .server .select-box .select-border .select-active[data-v-5df60769] {
        font-size: .32rem;
        font-weight: 500
    }

    .role-selector .modal-content .modal-body .body-content .server .select-box .select-border .select-active.empty[data-v-5df60769] {
        color: #7e7e7e
    }

    .role-selector .modal-content .modal-body .body-content .server .select-box .select-content-box[data-v-5df60769] {
        position: absolute;
        top: 0;
        left: 0;
        width: 5.1rem;
        max-height: 3.6rem;
        overflow-y: auto;
        border-radius: 0 0 .16rem .16rem;
        border: 1px solid #dadde3;
        background: #fff;
        transform: translateY(.7rem)
    }

    .role-selector .modal-content .modal-body .body-content .server .select-box .select-content-box .select-space[data-v-5df60769] {
        margin-top: .2rem
    }

    .role-selector .modal-content .modal-body .body-content .server .select-box .select-content-box .select-item[data-v-5df60769] {
        height: .88rem;
        padding: 0px .2rem;
        display: flex;
        align-items: center;
        border-radius: .16rem;
        margin: .04rem;
        box-sizing: border-box;
        cursor: pointer
    }

    .role-selector .modal-content .modal-body .body-content .server .select-box .select-content-box .select-item.active[data-v-5df60769], .role-selector .modal-content .modal-body .body-content .server .select-box .select-content-box .select-item[data-v-5df60769]:hover {
        background: #f9f9f9
    }

    .role-selector .modal-content .modal-body .body-content .role-info-container .role-id[data-v-5df60769] {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: .88rem
    }

    .role-selector .modal-content .modal-body .body-content .role-info-container .role-name[data-v-5df60769], .role-selector .modal-content .modal-body .body-content .role-info-container .role-lv[data-v-5df60769] {
        margin-top: .48rem
    }

    .role-selector .modal-content .modal-body .body-content .role-info-container .role-id[data-v-5df60769], .role-selector .modal-content .modal-body .body-content .role-info-container .role-name[data-v-5df60769], .role-selector .modal-content .modal-body .body-content .role-info-container .role-lv[data-v-5df60769] {
        color: #333;
        font-size: .32rem;
        font-weight: 500
    }

    .role-selector .modal-content .modal-body .body-content .role-info-container .role-id .info-title[data-v-5df60769], .role-selector .modal-content .modal-body .body-content .role-info-container .role-name .info-title[data-v-5df60769], .role-selector .modal-content .modal-body .body-content .role-info-container .role-lv .info-title[data-v-5df60769] {
        color: #7e7e7e;
        font-size: .32rem;
        font-weight: 500
    }

    .role-selector .modal-content .modal-body .modal-btn[data-v-5df60769] {
        border-radius: .16rem;
        min-width: 4.94rem;
        height: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: .32rem;
        font-style: normal;
        font-weight: 700;
        cursor: pointer;
        background: radial-gradient(64% 63.89% at 52.55% 111.11%, #79b7ff 0%, #4b9bf9 41.9%, #308af4 100%)
    }

    .role-selector .modal-content .modal-body .modal-btn[data-v-5df60769]:hover {
        opacity: 1
    }

    .role-selector .modal-content .modal-footer[data-v-5df60769] {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 1.2rem;
        margin-left: .48rem;
        margin-right: .48rem;
        color: #7e7e7e;
        font-size: .28rem
    }

    .role-selector .modal-content .modal-footer .agreement-item[data-v-5df60769] {
        color: #2980e5;
        cursor: pointer
    }

    .role-selector .modal-content .modal-footer .agreement-item[data-v-5df60769]:hover {
        opacity: .8
    }
}