@import '../css/rem.css';
@import '../css/sprite.css';

body {
    position: relative;
    background-color: #000;
}

.logo {
    position: absolute;
    top: 20px;
    left: 2%;
    width: 1.39rem;
    height: .87rem;
    background-image: url(../images/logo.png);
    background-size: contain;
    z-index: 3;
    color: transparent;
    font-size: 0;
}

.logo a {
    display: block;
    width: 100%;
    height: 100%;
}

@-webkit-keyframes moveUp {
    0% {
        -webkit-transform: translateY(-20%);
        transform: translateY(-20%);
        opacity: 0;
    }

    50% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(20%);
        transform: translateY(20%);
        opacity: 0;
    }
}

@keyframes bounceInDown {

    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.animated.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.animated.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

.animated.delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

.animated.delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}


/* MAIN */
.m-viewport {
    position: relative;
    width: 7.5rem;
    min-height: 50rem;
    margin: 0 auto;
    /* padding-bottom: 3rem; */
    background-color: #08142e;
    background-image: url(../images/bg.jpg);
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    font-size: .24rem;
}

@media (max-width: 320px) {
    .m-viewport {
        background-size: 100% 100%;
    }
}

.main-title {
    /* display: none; */
    position: absolute;
    width: 100%;
    left: 0;
    top: 5.55rem;
}

.main-title .title {
    width: 6.32rem;
    height: 3.11rem;
    margin: 0 auto;
    background-image: url(../images/main-title.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.m-viewport>.m-main {
    position: relative;
    margin: 0 auto;
    padding-top: 12.75rem;
}

.version-container {
    width: 7.32rem;
    margin: 0 auto;
}

/* TIPS */
.u-tips {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 21;
}

.u-tips .u-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .75);
}


.u-tips .tip-container {
    position: relative;
    top: 50%;
    left: 50%;
    width: 7.5rem;
    transform: translate(-50%, -50%);
}

.u-tips .tip-container img {
    width: 100%;
    max-height: 100%;
}

.i-md {
    position: absolute;
    left: 50%;
    top: 9.5rem;
    width: .39rem;
    height: 1.08rem;
    margin-left: -.335rem;
    background-image: url(../images/icon-md.png);
    background-repeat: no-repeat;
    background-size: contain;
    animation: moveUp 1.8s infinite alternate linear;
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        transform: translateY(-1500px);
    }

    60% {
        opacity: 1;
        transform: translateY(30px);
    }

    80% {
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes move {
    0% {
        top: 8px;
    }

    50% {
        top: 10px;
    }

    100% {
        top: 12px;
    }
}

@keyframes move1 {
    0% {
        top: 18px;
    }

    50% {
        top: 25px;
    }

    100% {
        top: 32px;
    }
}

.m-main-body {
    padding-top: 12rem;
    width: 6.92rem;
    margin: 0 auto;
    color: #e4ecf1;
}

.m-main-body>.evt-intro {}

h3 {
    width: 100%;
    height: 1.23rem;
    margin-bottom: .2rem;
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    font-size: 0;
    color: transparent;
}

h3.t1 {
    background-image: url(../images/title-1.png);
}

h3.t2 {
    background-image: url(../images/title-2.png);
}

.raid-img {
    width: 6.89rem;
    height: 3.78rem;
    margin: 0 auto .2rem;
    padding: .2rem;
    box-sizing: border-box;
    background-image: url(../images/img-wrapper.png);
    background-size: contain;
}

.raid-img img {
    width: 100%;
    height: 100%;
}

.raid-detail {
    margin-bottom: .7rem;
}

.raid-detail .label b {
    font-weight: normal;
    color: #edc8a3;
}

.raid-detail .intro>li {
    position: relative;
    margin-bottom: .15rem;
}

.raid-detail .intro .label {
    position: relative;
    padding-left: .4rem;
}

.raid-detail .intro .label::after {
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    content: '';
    width: .35rem;
    height: .36rem;
    transform: translateY(-50%);
    background-image: url(../images/icon-label.png);
    background-size: contain;
}

.reward-list {
    display: flex;
    justify-content: space-between;
    margin-top: .2rem;
}

.reward-list li {
    margin-bottom: .2rem;
}

.reward-list li .icon {
    position: relative;
    width: 1.13rem;
    height: 1.13rem;
    background-image: url(../images/bg-item.png);
    background-size: contain;
}

.reward-list .icon .pic {
    position: absolute;
    left: 50%;
    top: 50%;
    width: .98rem;
    height: .98rem;
    background-image: url(../images/sprite-item.png);
    background-size: 5.88rem auto;
    transform: translate(-50%, -50%);
}

#legion-rank .icon .pic{
    background-image: url(../images/sprite-legion.png)
}

.reward-list .damege {
    width: 1.13rem;
    text-align: center;
    color: #d0bd36;
}

.raid-detail .notice {
    color: #e10b57;
}

.rank-item>p {
    margin: .15rem 0;
}

.m-rank .reward-list {
    flex-wrap: wrap;
}

/* .m-rank .reward-list li {
    width: 20%;
} */

.t-large.reward-list li {
    width: 1.44rem;
}

.t-large.reward-list li:nth-child(5n){
    width: 1.13rem;
}

.m-rank .reward-list i {
    display: inline-block;
    width: .27rem;
    height: .16rem;
    background-image: url(../images/icon-damege.png);
    background-size: cover;
}

.m-rank .label {
    width: 6.94rem;
    height: .42rem;
    line-height: .42rem;
    text-align: center;
    background-image: url(../images/bg-tag.png);
    background-size: cover;
    background-repeat: no-repeat;
    color: #edc8a3;
}

.m-rank .label p {
    width: 1.89rem;
    height: 100%;
    margin: 0 auto;
    background-image: url(../images/bg-text.png);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
}

.progress-view {
    margin-bottom: .1rem;
}

.progress-view .num {
    width: .68rem;
    height: .34rem;
    line-height: .3rem;
    margin-left: .24rem;
    text-align: center;
    color: #000;
    background-image: url(../images/bg-progress.png);
    background-size: 100% auto;
}

.progress-view .bar {
    width: 1.13rem;
    height: .09rem;
    margin-top: .02rem;
    background-image: url(../images/bg-bar.png);
    background-size: 100% auto;
}

.progress-view .progress-bar {
    width: 50%;
    height: .09rem;
    background-image: url(../images/bar.png);
    background-size: 100% 100%;
}

.m-rank .tag b {
    font-weight: normal;
    color: #edc8a3;
}

.m-rank .tag {
    position: relative;
    padding-left: .4rem;
}

.m-rank .tag::after {
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    content: '';
    width: .35rem;
    height: .36rem;
    transform: translateY(-50%);
    background-image: url(../images/icon-label.png);
    background-size: contain;
}

.qr-view {
    position: relative;
    width: 2.82rem;
    height: 2.82rem;
    margin: 0 auto .15rem;
    padding: .25rem;
    background-image: url(../images/qr-wrapper.png);
    background-size: cover;
    box-sizing: border-box;
}

.qr-view img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 2.36rem;
    height: 2.36rem;
}

.m-qr .txt {
    text-align: center;
    color: #cbd2dd;
}

.btn-top {
    position: relative;
    left: 50%;
    width: .69rem;
    height: 1.08rem;
    margin-top: .8rem;
    margin-left: -.35rem;
    background-image: url(../images/icon-top.png);
    background-size: contain;
    background-repeat: no-repeat;
    /* -webkit-animation: moveUp 2.2s infinite cubic-bezier(.65, .05, .36, 1);
    animation: moveUp 2.2s infinite cubic-bezier(.65, .05, .36, 1); */
}

.progress {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: .24rem;
}