.roleBox {
    position: relative;
    overflow: visible;
    text-align: center;
    display: inline-block;
    width: 20%;
    max-width: 144px;
    white-space: nowrap;
}

.roleImg {
    position: relative;
}

.roleLink {
    cursor: pointer;
    position: absolute;
    width: 100%;
    top: 20%;
    height: 80%;
    z-index: 10000;
}

.roleImg1 {
    position: absolute;
    /* transform: translate(-35%, -60%); */
    left: -100%;
    width: 300%;
    /* -webkit-animation: turn 18s infinite; */
    /* animation: turn 18s infinite; */
    /* -webkit-backface-visibility: hidden; */
    backface-visibility: hidden;
    z-index: 1000;
}

.roleName {
    display: inline-block;
    width: 100%;
}

.roleImg img {
    display: inline-block;
    height: 30rem;
    position: relative;

}