@import "../css/rem.css";
@import "../css/ui.css";
@import "../css/sprite.css";
@import "../css/swiper.min.css";

* {
    background-size: contain;
}

@-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;
    }
}

html {
    width: 100%;
}

body {
    position: relative;
    width: 100%;
    font-size: .24rem;
    background-color: #000;
}

.pic .icon{
    width: .92rem;
    height: .92rem;
    background-image: url(../images/sprite-icon.png);
    background-size: auto 1.84rem;
}

.m-user {
    position: relative;
    display: flex;
    width: 7.5rem;
    height: 1.55rem;
    margin: 0 auto;
    background-image: url(../images/bg-user.png);
    z-index: 2;
}

.m-user .logo {
    width: 1.98rem;
    height: .72rem;
    margin-top: .25rem;
    margin-left: .09rem;
    background-image: url(../images/logo.png);
}

.m-user .user-info {
    width: 5.85rem;
    margin-left: -.1rem;
    text-align: center;
}

.m-user .info-text {
    line-height: 1.08rem;
    color: #000;
}

.m-user .logout {
    float: right;
    width: 1.3rem;
    height: .5rem;
    margin-top: .3rem;
    background-image: url(../images/btn-logout.png);
}

.m-viewport {
    position: relative;
    width: 7.5rem;
    min-height: 27.73rem;
    margin: -.6rem auto 0;
    padding-top: 8.05rem;
    background-image: url(../images/body.jpg);
    background-size: 100% auto !important;
    background-repeat: no-repeat;
    background-position: top center;
    box-sizing: border-box;
    overflow-x: hidden;
    color: #f5cf9a;
    background-color: #720d0c;
}

.main-title {
    position: absolute;
    left: 50%;
    top: 4rem;
    width: 6.13rem;
    height: 3.41rem;
    transform: translateX(-50%);
    background-image: url(../images/main-title.png);
}

.main-swiper .tab-hd {
    display: flex;
    justify-content: space-between;
}

.main-swiper .tab-hd .u-btn{
    height: .96rem;
}

/* .main-swiper .u-btn {
    height: .96rem;
} */

.main-swiper .u-btn.tab-1 {
    width: 3.86rem;
    background-image: url(../images/btn-tab-1-active.png);
}

.main-swiper .u-btn.tab-2 {
    width: 3.72rem;
    background-image: url(../images/btn-tab-2.png);
}

.main-swiper .swiper-wrapper {
    margin-top: .5rem;
}

.evt-info {
    color: #f5cf9a;
    padding: 0 .46rem;
}

.reward-view {
    width: 7.36rem;
    height: 2.94rem;
    margin: .4rem auto .6rem;
    background-image: url(../images/bg-reward-list.png);
}

.reward-view .view-body {
    padding-top: .77rem;
}

.reward-view ul {
    display: flex;
    justify-content: space-between;
    padding: 0 .4rem;
}

.reward-view li {
    width: 1.22rem;
}

.reward-view .pic {
    position: relative;
    width: 1.22rem;
    height: 1.22rem;
    background-image: url(../images/bg-item.png);
}

.reward-view .pic .icon{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.reward-view .item-name {
    margin-top: .05rem;
}

.exp-view .info-view {
    display: flex;
    justify-content: space-between;
    padding: 0 .28rem;
    margin-bottom: .5rem;
}

.u-btn.u-rule {
    width: 1.3rem;
    height: .24rem;
    background-image: url(../images/btn-rule.png);
}

.exp-bar {
    position: relative;
    width: 7.24rem;
    height: .6rem;
    margin: 0 auto;
    background-image: url(../images/bg-pro.png);
}

.bar {
    position: absolute;
    left: .12rem;
    top: 50%;
    width: 0;
    height: .46rem;
    transform: translateY(-50%);
    background-image: url(../images/bar.png);
    background-size: 7.1rem auto;
}

.exp-view .time {
    color: #c38447;
    text-align: center;
}

.exp-ctrl {
    display: flex;
    justify-content: space-between;
    padding: 0 .94rem;
    margin-top: .4rem;
    margin-bottom: .7rem;
}

.exp-ctrl .u-btn {
    width: 2.47rem;
    height: .96rem;
}

.u-btn.exp-apply {
    background-image: url(../images/btn-exp-apply.png);
}

.u-btn.extra-apply {
    background-image: url(../images/btn-extra-apply.png);
}

.u-btn.extra-apply.pre {
    position: relative;
    background-image: url(../images/btn-extra-apply-pre.png);
}

.u-btn.extra-apply.pre::after{
    display: block;
    content: '*预购奖励士兵卡*5';
    position: absolute;
    left: 50%;
    bottom: -.3rem;
    width: 100%;
    text-align: center;
    color: #c38447;
    transform: translateX(-50%);
}

.data-table {
    position: relative;
    width: 6.7rem;
    height: 8.14rem;
    padding-top: .65rem;
    margin: 0 auto;
    box-sizing: border-box;
    background-image: url(../images/bg-reward-table.png);
}

.data-table table {
    position: relative;
    width: 100%;
    height: 6.12rem;
}

.data-table table tr {
    height: 20%;
}

.data-table table .exp {
    width: 2rem;
}

.data-table table .r,
.data-table table .r-ex {
    width: 2.35rem;
}

.data-table .pic{
    position: relative;
    width: .92rem;
    height: .92rem;
    margin: 0 auto;
}

.data-table .pic.dismiss::after{
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    background-image: url(../images/reward-dismiss.png);
    background-size: .77rem auto;
    background-position: center;
    background-repeat: no-repeat;
}

.u-btn.reward-apply {
    width: 2.47rem;
    height: .96rem;
    margin: .2rem auto 0;
    background-image: url(../images/btn-reward-apply.png);
}

.list-table .page.u-btn{
    position: absolute;
    top: 50%;
    width: .79rem;
    height: .73rem;
    transform: translateY(-50%);
    background-repeat: no-repeat;
}
.list-table .page.u-btn.prev{
    left: -.2rem;
    background-image: url(../images/btn-prev.png);
}
.list-table .page.u-btn.next{
    right: -.2rem;
    background-image: url(../images/btn-next.png);
}

/* rank */
.my-kill{
    margin-bottom: .3rem;
    text-align: center;
}

.update-time{
    margin-bottom: .2rem;
    padding: 0 0.46rem;
    text-align: right;
}

.rank-table{
    width: 6.7rem;
    height: 14.94rem;
    margin: 0 auto;
    padding-top: .7rem;
    box-sizing: border-box;
    background-image: url(../images/bg-rank.png);
}

.m-rank{
    margin-top: .3rem;
}

.m-rank table{
    width: 100%;
}

.m-rank .main-table{
    height: 13.13rem;
}

.m-rank table tr{
    height: .8rem;
}

.m-rank table .rank{
    width: 1.3rem;
}

.m-rank table .area-name{
    width: 1.57rem;
}

.m-rank table .player-name{
    width: 2.37rem;
}

.rank-ctrl-view{
    display: flex;
    justify-content: space-between;
    margin-top: .25rem;
    padding: 0 .35rem;
}

.reward-show{
    width: 2.47rem;
    height: .96rem;
    background-image: url(../images/btn-reward-rank.png);
}

.rank-ctrl-view .page{
    display: flex;
    align-items: center;
}

.rank-ctrl-view .page .u-btn{
    width: .79rem;
    height: .73rem;
}
.rank-ctrl-view .page .u-btn.prev{
    background-image: url(../images/btn-prev.png);
}
.rank-ctrl-view .page .u-btn.next{
    background-image: url(../images/btn-next.png);
}

.rank-ctrl-view .page-detail{
    width: 1.81rem;
    height: .53rem;
    line-height: .53rem;
    color: #aa9977;
    text-align: center;
    background-image: url(../images/bg-page.png);
    background-repeat: no-repeat;
}
/* Modal */
.u-window {
    color: #e6cba5;
}

.u-window.m-rule {
    width: 6.7rem;
    height: 6.19rem;
    background-image: url(../images/bg-rule.png);
}

.m-rule .title {
    width: 1.61rem;
    height: .54rem;
    margin: .15rem auto .24rem;
    background-image: url(../images/title-rule.png);
    color: transparent;
}

.m-rule .rule-content {
    padding: 0 .18rem;
}

.m-rule .rule-content p {
    margin-bottom: .3rem;
}

/* sp show */
.u-window.m-sp-show {
    width: 6.7rem;
    height: 5.99rem;
    background-image: url(../images/bg-sp-show.png);
    background-size: 100% 100%;
}

.m-sp-show .title {
    margin: .15rem auto .2rem;
    text-align: center;
    color: #faca7e;
    font-size: .26rem;
}

.m-sp-show .show-pannel{
    width: 6rem;
    height: 3.4rem;
    margin: 0 auto;
    background-color: #680505;
    border: 1px solid #873714;
}

.show-pannel img{
    width: 100%;
    height: 100%;
}

.m-sp-show .text{
    padding: 0 .3rem;
    color: #faca7e;
}

/* bind */
.u-window.m-area{
    width: 5.84rem;
    height: 4.62rem;
    background-image: url(../images/bg-bind.png);    
}

.u-window.m-area .title {
    width: 1.16rem;
    height: .54rem;
    margin: .15rem auto .24rem;
    background-image: url(../images/title-bind.png);
    color: transparent;
}

.area-item{
    position: relative;
    width: 5.24rem;
    height: .8rem;
    line-height: .8rem;
    margin: 0 auto .32rem;
    background-color: #680505;
    border: 1px solid #802d11;
}

.area-item .result{
    padding-left: .2rem;
    color: #ebcf6e;
    box-sizing: border-box;
}

.area-view .now{
    position: relative;
}

.area-view .u-list {
    display: none;
    position: absolute;
    top: .81rem;
    left: 0;
    width: 5.24rem;
    background-color: #680505;
    z-index: 30;
}

.area-view .u-list li {
    display: inline-block;
    min-width: 50%;
    height: 30px;
    line-height: 30px;
    text-align: center;

}

.area-view .u-list li a {
    color: #e9e8d8;
    transition: all .5s;
}

.area-view .u-list li a:hover{
    color: #ebcf6e;
}

.u-window.m-area .u-btn.submit{
    width: 2.47rem;
    height: .98rem;
    margin: 0 auto 0;
    background-image: url(../images/btn-submit.png);
}

.u-window.m-area .notice{
    text-align: center;
}
/* extra */
.u-window.m-extra {
    width: 5.44rem;
    height: 3.32rem;
    background-image: url(../images/bg-extra.png);
}

.u-window.m-extra .title {
    width: 1.17rem;
    height: .44rem;
    margin: .15rem auto .24rem;
    background-image: url(../images/title-extra.png);
    color: transparent;
}

.u-window.m-extra .extra-view {
    width: 4.44rem;
    height: 1.41rem;
    margin: 0 auto;
    background-image: url(../images/bg-ex-view.png);
}

.u-window.m-extra .notice {
    padding-top: .35rem;
    text-align: center;
}

.u-window.m-extra .ctrl-view {
    display: flex;
    padding: 0 .3rem;
    justify-content: space-between;
}

.u-window.m-extra .u-btn {
    width: 2.47rem;
}

.u-window.m-extra .u-btn.cancel {
    height: .96rem;
    background-image: url(../images/btn-cancel.png);
}

.u-window.m-extra .u-btn.primary {
    height: .98rem;
    background-image: url(../images/btn-ok.png);
}

/*success&error */
.u-window.m-msg {
    width: 5.44rem;
    height: 3.32rem;
    background-image: url(../images/bg-extra.png);
}

.u-window.m-msg .msg-view {
    width: 4.44rem;
    height: 1.41rem;
    margin: 0 auto;
    background-image: url(../images/bg-ex-view.png);
}

.u-window.m-msg .notice {
    padding-top: .35rem;
    text-align: center;
}

.m-msg.m-success .title {
    width: 1.17rem;
    height: .44rem;
    margin: .15rem auto .24rem;
    background-image: url(../images/title-success.png);
    color: transparent;
}

.m-msg.m-error .title {
    width: 1.17rem;
    height: .44rem;
    margin: .15rem auto .24rem;
    background-image: url(../images/title-error.png);
    color: transparent;
}

.u-window.m-msg .ctrl-view {
    display: flex;
    padding: 0 .3rem;
    justify-content: center;
}

.u-window.m-msg .u-btn.cntdown {
    width: 2.47rem;
    height: .96rem;
    line-height: .90rem;
    text-align: center;
    color: #d74510;
    background-image: url(../images/btn-cntdown.png);
}

.u-window.m-msg .u-btn.close {
    width: 2.47rem;
    height: .96rem;
    line-height: .90rem;
    text-align: center;
    color: #d74510;
    background-image: url(../images/btn-close.png);
}

.u-window.m-msg .u-btn.m3b-charge {
    display: block;
    width: 2.47rem;
    height: .98rem;
    line-height: .90rem;
    text-align: center;
    background-image: url(../images/btn-charge.png);
}

/* rank reward */
.u-window.m-rank-show {
    width: 5.84rem;
    height: 11.15rem;
    background-image: url(../images/bg-rank-reward.png);
    background-size: 100% 100%;
    overflow-y: scroll;
}

@media screen and (min-height: 900px) {
    .u-window.m-rank-show {
        width: 5.84rem;
        height: 80%;
    }
}

.m-rank-show .title {
    width: 1.62rem;
    height: .54rem;
    margin: .05rem auto 0;
    background-image: url(../images/title-rank.png);
    color: transparent;
}

.m-rank-show .notice{
    text-align: center;
}

.m-rank-show .rank-name{
    height: 1.6rem;
    background-color: #550604;
}

.m-rank-show .reward-list{
    display: flex;
}

.m-rank-show .r-item{
    width: 33%;
}

.m-rank-show .r-item .pic{
    width: .92rem;
    height: .92rem;
    margin: 0 auto;
}

.m-rank-show .pic .icon{
    background-size: 100% auto;
}

.m-rank-show .pic .icon.C001{
    background-image: url(../images/C001.jpg);
}

.m-rank-show .pic .icon.C002{
    background-image: url(../images/C002.jpg);
}

.m-rank-show .pic .icon.C003{
    background-image: url(../images/C003.jpg);
}

.m-rank-show .pic .icon.C004{
    background-image: url(../images/C004.jpg);
}

/* exp */
.u-window.m-exp {
    width: 5.84rem;
    height: 4.62rem;
    background-image: url(../images/bg-buy.png);
}

.m-exp .title {
    width: 1.17rem;
    height: .44rem;
    margin: .15rem auto .24rem;
    background-image: url(../images/title-buy.png);
    color: transparent;
}

.exp-content {
    width: 5.24rem;
    min-height: 2.98rem;
    margin: 0 auto;
    background-image: url(../images/bg-exp-view.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.exp-content .info{
    display: flex;
    justify-content: space-between;
    padding: .3rem .24rem;
    margin-bottom: .6rem;
}

.u-window.m-exp .ctrl-view {
    display: flex;
    padding: 0 .3rem;
    margin-top: 1rem;
    justify-content: center;
}

.u-window.m-exp .u-btn.re {
    width: 2.47rem;
    height: .96rem;
    padding-top: .24rem;
    text-align: center;
    color: #d74510;
    box-sizing: border-box;
    background-image: url(../images/btn-cntdown.png);
}

.u-window.m-exp .u-btn.apply {
    width: 2.47rem;
    height: .98rem;
    padding-top: .08rem;
    text-align: center;
    color: #d74510;
    box-sizing: border-box;
    background-image: url(../images/btn-buy.png);
}

/* bar */
.slider-container {
    margin: 0 auto;
}

.slider-container .back-bar {
    height: .06rem;
    position: relative;
}

.slider-container .back-bar .selected-bar {
    position: absolute;
    height: 100%;
}

.slider-container .back-bar .pointer {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: col-resize;
    opacity: 1;
    z-index: 2;
}

.slider-container .back-bar .pointer.last-active {
    z-index: 3;
}

.slider-container .back-bar .pointer-label {
    position: absolute;
    left: 50%;
    top: -.5rem;
    font-size: .3rem;
    transform: translateX(-50%);
    white-space: nowrap;
    line-height: 1;
}

.slider-container .back-bar .focused {
    z-index: 10;
}

.slider-container .clickable-dummy {
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.slider-container .scale {
    top: 2px;
    position: relative;
}

.slider-container .scale span {
    position: absolute;
    /* height: 5px;
    border-left: 1px solid #999; */
    font-size: 0;
}

.slider-container .scale ins {
    font-size: .24rem;
    text-decoration: none;
    position: absolute;
    left: 50%;
    top: .15rem;
    color: #baae9b;
    line-height: 1;
}

.slider-container.slider-readonly .clickable-dummy,
.slider-container.slider-readonly .pointer {
    cursor: auto;
}

.theme-green .back-bar {
    background-image: url(../images/bg-select-bar.png);
    background-size: 4.51rem .06rem;
    background-repeat: no-repeat;
}

.theme-green .back-bar .selected-bar {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: .04rem;
    background-color: #f7cc72;
}

.theme-green .back-bar .pointer {
    width: .6rem;
    height: .6rem;
    background-image: url(../images/icon-circle.png);
}

.theme-green .back-bar .pointer-label {
    font-size: .28rem;
    color: #faca7e;
}

.theme-green .back-bar .focused {
    color: #faca7e;
}

.theme-green .scale span {
    /* border-left: 1px solid #e5e5e5; */
}