.inviteList .rank {
    height: 235px !important;
    padding-top: 10px; 
}

.rank .warp {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    max-width: 80%;
    margin: 0 auto;
    margin-top: 30px; 
}

/* .rank .warp div {
    width: 90px;
    height: 121px;
} */

.relative {
    width: 30%;
    height: 180px;
    position: relative;
}

.rank .warp .content>img {
    width: 7.0rem;
    height: 7.0rem;
    border-radius: 50%;
    position: relative;
    left: 0.1rem;
}

.rank .content {
    /* padding-top: 27px; */
    font-size: 1.4rem;
    background-color: #fff;
}

/* .rank .content>p:nth-of-type(1) {
    margin-top: 20px;
} */

.rank .content>p:nth-of-type(1) {
    margin-top: 10px;
    max-width: 107px;
}

.rank .first .content {
    color: #e36b65;
}

.rank .second .content {
    color: #889ad4;
}

.rank .third .content {
    color: #ea8654;
}

.rank .background {
    min-width: 90px;
    height: 121px;
    position: absolute;
    top: -2.1rem;
    left: 0rem;
    z-index: 999;
}

.bg-first {
    background: url("../image/ranking-first.png") no-repeat center;
}

.bg-second {
    background: url("../image/ranking-second.png") no-repeat center;
}

.bg-third {
    background: url("../image/ranking-third.png") no-repeat center;
}
@media (min-width: 414px) {
    .rank .background {
        min-width: 90px;
        height: 121px;
        position: absolute;
        top: -2.1rem;
        left: 0.3rem;
        z-index: 999;
    }
}

@media (max-width: 375px) {
    .rank .background {
        min-width: 90px;
        height: 121px;
        position: absolute;
        top: -2.3rem;
        left: 0rem;
        z-index: 999;
    }
}

@media (max-width: 320px) {
   .rank .background {
        position: absolute;
        top: -2.3rem;
        left: -0.7rem;
        z-index: 999;
        background-size: 6.3rem 10rem;

    }
}