*{
    padding: 0;
    margin: 0;
}
.voteContent{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url("../img/vote/lo.png") no-repeat center;
    background-size: cover;
    padding: 3rem 2rem;
    padding-top: 5rem;
    box-sizing: border-box;
}
.voteContent-bg{
    position: absolute;
    height: 39.875rem;
    left: 50%;
    transform: translateX(-50%);
    /* background: url("../img/vote/tb.png") no-repeat center;
    background-size: auto 100%;
    height: 100%; */
}
.voteContent-z{
    position: absolute;
    z-index: 0;
    width: 110%;
    left: -5%;
    top: 0;
}
.voteContent-role{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.voteContent-role-1{
    position: absolute;
    left: 14rem;
    top:6rem;
    width: 11.375rem;
    height: 11.375rem;
    /* background: red; */
}
.voteContent-role-2{
    position: absolute;
    left: 37rem;
    top:10rem;
    width: 11.375rem;
    height: 11.375rem;
    /* background: red; */
}
.voteContent-role-3{
    position: absolute;
    left: 57rem;
    top:5rem;
    width: 11.375rem;
    height: 11.375rem;
    /* background: red; */
}
.voteContent-role-4{
    position: absolute;
    left: 8rem;
    top:26rem;
    width: 11.375rem;
    height: 11.375rem;
    /* background: red; */
}
.voteContent-role-5{
    position: absolute;
    left: 30rem;
    top:25rem;
    width: 11.375rem;
    height: 11.375rem;
    /* background: red; */
}
.voteContent-role-6{
    position: absolute;
    left: 54rem;
    top:26rem;
    width: 11.375rem;
    height: 11.375rem;
    /* background: red; */
}
.voteContent-role-img{
    width: 100%;
}
.voteContent-star1{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1.9375rem;
}
.voteContent-star2{
    position: absolute;
    bottom: .875rem;
    right: 0;
    width: 1.9375rem;
}
.voteContent-star3{
    position: absolute;
    right: 0;
    bottom: 50%;
    width: 1.9375rem;
}
.voteContent-star4{
    position: absolute;
    left: 0;
    bottom: 2rem;
    width: 1.9375rem;
}
.voteContent-star5{
    position: absolute;
    left: 0;
    top: .9375rem;
    width: 1.9375rem;
}
.voteContent-star6{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1.9375rem;
}
.voteContent-name1{
    position: absolute;
    left: 1rem;
    bottom: 1.5rem;
    width: 3.625rem;
}
.voteContent-name2{
    position: absolute;
    left: 2rem;
    bottom: 1.5rem;
    width: 4.6875rem;
}
.voteContent-name3{
    position: absolute;
    left: 1rem;
    bottom: 1.5rem;
    width: 4.4375rem;
}
.voteContent-name4{
    position: absolute;
    left: 1rem;
    bottom: 1.5rem;
    width: 4.75rem;
}
.voteContent-name5{
    position: absolute;
    left: 2rem;
    bottom: 1.5rem;
    width: 5.75rem;
}
.voteContent-name6{
    position: absolute;
    left: 1rem;
    bottom: 1.5rem;
    width: 4.8125rem;
}
.voteContent-role-xian{
    position: absolute;
    bottom: -2rem;
    left: 2rem;
    width: 100%;
}
.roleText{
    position: absolute;
    top: -1rem;
    left: -1em;
    background: url("../img/vote/label.png") no-repeat center;
    background-size: cover;
    width: 14.25rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    font-style: italic;
    font-size: 1rem;
    font-weight: 600;
    padding-left: 2rem;
}
.roleText-t1{
    transform: rotate(-10deg);
}
.roleText-t2{
    transform: rotate(0);
}
.roleText-t3{
    transform: rotate(10deg);
}
.roleText-t4{
    transform: rotate(10deg);
}
.roleText-t5{
    transform: rotate(-10deg);
}
.roleText-t6{
    transform: rotate(10deg);
}
.voteLoading{
    position: absolute;
    z-index: 100;
    background: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.voteBg{
    background: url("../img/vote/tb.png") no-repeat center;
    width: 45rem;
    height: 26.25rem;
    background-size: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.voteBg-close{
    position: absolute;
    top: -2rem;
    right: -2rem;
    width: 5.1875rem;
    height: 5.25rem;
}
.voteBg-t{
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 12.5625rem;
    height: 5.9375rem;
}
.voteBg-cbt{
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 12.5625rem;
    height: 5.9375rem;
}
.voteLoading-str{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 6rem;
    text-align: center;
    line-height: 2.2rem;
    color: rgb(77, 85, 92);
}
.voteContent-num{
    height: 2.625rem;
    position: absolute;
    left: 0;
}
@keyframes shark {
    0%{
        transform: rotate(0);
    }
    25%{
        transform: rotate(20deg);  
    }
    75%{
        transform: rotate(-20deg);  
    }
    100%{
        transform: rotate(0);
    }
}
.roleShark{
    /* animation: shark 1s linear infinite; */
}
.logo{
    width: 7.9375rem;
    margin-right: 2rem;
    display: none;
}