@import "../../sass/base/mixins";

html,body,.o-container {
    @include gradient(#382062,#231441);
}

.page-lastrank{
    padding: px2rem(50) 0 px2rem(150) 0;
    font-size: px2rem(24);
    color: #e4dded;
    text-align: center;
    @include gradient(#382062,#231441);
    h2{
        
    }
    .list-award{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: px2rem(36);
        li{
            flex: 1;
        }
        em{
            display: block;
            margin-top: px2rem(15);
            font-size: px2rem(50);
            color: #ffffff;
        }
    }
    .list-bingo{
        margin-top: px2rem(10);
        transform: translate3d(0,100%,0);
        -webkit-animation: fadeInUp .2s .4s ease-out;
                animation: fadeInUp .2s .4s ease-out;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
        li{
            display: inline-block;
            width: px2rem(120);
            margin: px2rem(30) px2rem(25) 0 px2rem(25);
        }
        img{
            display: block;
            width: px2rem(120);
            height: px2rem(120);
            overflow: hidden;
            border-radius: 50%;
            background: #3e266d;
        }
        p{
            line-height: px2rem(40);
            margin-top: px2rem(10);
            @include ellipsis();
        }
    }
}
.rank-uinfo{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(87,61,134,0.9);
    height: px2rem(120);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 px2rem(40);
    font-size: px2rem(30);
    transition: transform .2s;
    &.isHasDlfooter{
        transform: translateY(px2rem(-120))
    }
    .info_name{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
    }
    img{
        display: block;
        width: px2rem(88);
        height: px2rem(88);
        background: #8e6acf;
        overflow: hidden;
        border-radius: 50%;
        margin-right: px2rem(24);
    }
}

.tip-empty{
    padding: px2rem(300) 0 px2rem(20);
    text-align: center;
    color: #61498c;
    background: url(./../../img/no-data2.png) center px2rem(100) no-repeat;
    background-size: auto px2rem(170);
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
                transform: translate3d(0,100%,0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
                transform: translate3d(0,100%,0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}