@import "../css/rem.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%;
    overflow-x: hidden;
}

h1.logo {
    position: absolute;
    right: .3rem;
    top: 1rem;
    width: 1.87rem;
    height: 1.32rem;
    background-image: url(../images/logo_m.png);
    z-index: 2;
}

h1.logo a {
    display: block;
    width: 100%;
    height: 100%;
}

.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

.f-l {
    float: left;
}

.f-r {
    float: right;
}

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

.u-header {
    position: fixed;
    top: 0;
    left: 50%;
    width: 7.5rem;
    padding: .1rem 0;
    transform: translateX(-50%);
    z-index: 4;
    background-color: #1b1a1f;
}

.u-header>.wrapper {
    display: flex;
    width: 7.2rem;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
}

.logo-header {
    width: 2.31rem;
    height: .8rem;
    background-image: url(../images/logo-head.png);
    background-repeat: no-repeat;
}

.btn-header {
    display: flex;
}

.btn-header a {
    display: block;
    margin-left: .1rem;
    width: 1.82rem;
    height: .71rem;
}

.btn-header .btn-dl {
    background-image: url(../images/btn-dl.png);
}

.btn-header .btn-web {
    background-image: url(../images/btn-web.png);
}

.icon-md {
    position: absolute;
    left: 50%;
    top: 11.4rem;
    width: .71rem;
    height: 1.1rem;
    margin-left: -.35rem;
    background-image: url(../images/icon-md.png);
    background-repeat: no-repeat;
    background-size: contain;
    animation: moveUp 1.8s infinite alternate linear;
    z-index: 3;
}

.m-viewport {
    position: relative;
    width: 7.5rem;
    height: 48.5rem;
    margin: 0 auto;
    padding-top: 13.2rem;
    background-color: #183018;
    background-image: url(../images/body.jpg);
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.main-title {
    position: absolute;
    left: .2rem;
    top: 3.3rem;
    width: 2.92rem;
    height: 6.01rem;
    background-image: url(../images/main-title.png);
}

.evt-item {
    margin-bottom: 1.5rem;
}

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

.evt-item>.title {
    margin: 0 auto .2rem;
}

.evt-item>.title.t-1 {
    width: 4.99rem;
    height: .60rem;
    background-image: url(../images/title-1.png);
}

.evt-item>.title.t-2 {
    width: 4.95rem;
    height: .60rem;
    background-image: url(../images/title-2.png);
}

.evt-item>.title.t-3 {
    width: 4.99rem;
    height: .60rem;
    background-image: url(../images/title-3.png);
}

.evt-item .slogen {
    margin-bottom: .3rem;
    text-align: center;
    color: #f5f591;
}

.tab-view {
    width: 7.07rem;
    height: 3.36rem;
    margin: 0 auto;
    padding: .3rem 0;
    background-image: url(../images/bg-tab.png);
}

.m-tab .swiper-nav {
    margin-top: .2rem;
    text-align: center;
}

.m-tab .swiper-nav .u-btn {
    display: inline-block;
    margin: 0 .3rem;
    background-image: url(../images/sprite-tab.png?v=1.3);
    background-size: auto .69rem;
    background-repeat: no-repeat;
}

#nav-tab-2 .u-btn {
    margin: 0 .1rem;
}

.m-tab ul {
    display: flex;
    flex: 25%;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    padding: 0 .35rem;
}

.m-tab li {
    width: 25%;
    margin-bottom: .3rem;
}

.m-tab .icon {
    margin: 0 auto;
}

.m-tab .item-name {
    height: 2em;
    margin-top: .1rem;
    color: #f5f591;
    text-align: center;
}

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

.reward-list.reward-view .header {
    width: 100%;
    height: .56rem;
    line-height: .5rem;
    padding-top: .06rem;
    text-align: center;
    color: #f5f591;
}

.reward-list.reward-view .header b {
    color: #e7b023;
}

.reward-list ul {
    display: flex;
    justify-content: space-between;
    margin-top: .12rem;
    padding: 0 .15rem;
}

.reward-list li {
    width: 1.48rem;
    height: 1.84rem;
    padding-top: .22rem;
    background-image: url(../images/bg-item.png);
}

.reward-list.reward-view .pic {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: .94rem;
    height: .94rem;
    margin: 0 auto;
    background-image: url(../images/bg-icon.png);
}

.reward-list.reward-view .item-name {
    padding: 0 .15rem;
    color: #442c00;
    text-align: center;
}

a.more {
    display: block;
    margin-top: .4rem;
    text-align: center;
    color: #e7b023;
}

.evt-list>li {
    width: 7.08rem;
    height: 3.18rem;
    margin: 0 auto .4rem;
    padding-top: .25rem;
    background-image: url(../images/bg-evt.png);
}

.evt-list .title {
    width: 2.74rem;
    height: .36rem;
    margin: 0 auto .1rem;
}

.evt-list .t-1 {
    background-image: url(../images/sub-title-1.png);
}

.evt-list .t-2 {
    background-image: url(../images/sub-title-2.png);
}

.evt-list .t-3 {
    background-image: url(../images/sub-title-3.png);
}

.evt-list .t-4 {
    background-image: url(../images/sub-title-4.png);
}


.evt-detail {
    margin-bottom: .1rem;
    padding-left: .3rem;
    color: #f5f591;
}

.evt-detail b {
    display: inline-block;
    padding-left: .3rem;
    color: #e7b023;
    background-image: url(../images/icon-tag.png);
    background-size: .16rem .16rem;
    background-repeat: no-repeat;
    background-position: left center;
}

.evt-detail ul {
    display: flex;
    justify-content: center;
    margin: .25rem 0 .15rem;
}

.evt-detail li {
    margin: 0 .35rem;
}

.icon-a1 {
    background-position: -0rem -0rem;
}

.icon-a2 {
    background-position: -0.71rem -0rem;
}

.icon-a3 {
    background-position: -1.42rem -0rem;
}

.icon-a4 {
    background-position: -2.13rem -0rem;
}

.icon-a5 {
    background-position: -2.84rem -0rem;
}

.icon-a6 {
    background-position: -3.55rem -0rem;
}

.icon-a7 {
    background-position: -4.26rem -0rem;
}

.icon-a8 {
    background-position: -4.97rem -0rem;
}

.icon-a9 {
    background-position: -0rem -0.71rem;
}

.icon-a10 {
    background-position: -0.71rem -0.71rem;
}

.icon-a11 {
    background-position: -1.42rem -0.71rem;
}

.icon-b1 {
    background-position: -2.13rem -0.71rem;
}

.icon-b2 {
    background-position: -2.84rem -0.71rem;
}

.icon-b3 {
    background-position: -3.55rem -0.71rem;
}

.icon-b4 {
    background-position: -4.26rem -0.71rem;
}

.icon-c1 {
    background-position: -4.97rem -0.71rem;
}

.icon-c2 {
    background-position: -0rem -1.42rem;
}

.icon-c3 {
    background-position: -0.71rem -1.42rem;
}

.icon-c4 {
    background-position: -1.42rem -1.42rem;
}

.icon-c5 {
    background-position: -2.13rem -1.42rem;
}

.icon-c6 {
    background-position: -2.84rem -1.42rem;
}

.icon-c7 {
    background-position: -3.55rem -1.42rem;
}

.icon-c8 {
    background-position: -4.26rem -1.42rem;
}

.icon-c9 {
    background-position: -4.97rem -1.42rem;
}

.icon-c10 {
    background-position: -0rem -2.13rem;
}

.icon-c11 {
    background-position: -0.71rem -2.13rem;
}

.icon-c12 {
    background-position: -1.42rem -2.13rem;
}

.icon-c13 {
    background-position: -2.13rem -2.13rem;
}

.icon-c14 {
    background-position: -2.84rem -2.13rem;
}

.icon-c15 {
    background-position: -3.55rem -2.13rem;
}

.icon-c16 {
    background-position: -4.26rem -2.13rem;
}

.icon-c17 {
    background-position: -4.97rem -2.13rem;
}

.icon-c18 {
    background-position: -0rem -2.84rem;
}

.icon-c19 {
    background-position: -0.71rem -2.84rem;
}

.icon-c20 {
    background-position: -1.42rem -2.84rem;
}

.icon-c21 {
    background-position: -2.13rem -2.84rem;
}

.icon-c22 {
    background-position: -2.84rem -2.84rem;
}

.icon-c23 {
    background-position: -3.55rem -2.84rem;
}

.icon-c24 {
    background-position: -4.26rem -2.84rem;
}

.icon-d1 {
    background-position: -4.97rem -2.84rem;
}

.icon-d2 {
    background-position: -0rem -3.55rem;
}

.icon-d3 {
    background-position: -0.71rem -3.55rem;
}

.icon-d4 {
    background-position: -1.42rem -3.55rem;
}

.icon-d5 {
    background-position: -2.13rem -3.55rem;
}

.icon-d6 {
    background-position: -2.84rem -3.55rem;
}

.icon-d7 {
    background-position: -3.55rem -3.55rem;
}

.icon-d8 {
    background-position: -4.26rem -3.55rem;
}

/* tab */
.tab-1.active {
    background-position: -0rem -0rem;
    height: 0.69rem;
    width: 2.09rem;
}

.tab-2.active {
    background-position: -2.11rem -0rem;
    height: 0.69rem;
    width: 2.09rem;
}

.tab-3.active {
    background-position: -4.22rem -0rem;
    height: 0.69rem;
    width: 2.09rem;
}

.tab-4.active {
    background-position: -6.33rem -0rem;
    height: 0.69rem;
    width: 2.09rem;
}

.tab-5.active{
    background-position: -8.44rem -0rem;
    height: 0.69rem;
    width: 2.09rem;
}

.tab-1 {
    background-position: -10.55rem -0rem;
    height: 0.65rem;
    width: 2.05rem;
}

.tab-2 {
    background-position: -12.62rem -0rem;
    height: 0.65rem;
    width: 2.05rem;
}

.tab-3 {
    background-position: -14.69rem -0rem;
    height: 0.65rem;
    width: 2.05rem;
}

.tab-4 {
    background-position: -16.76rem -0rem;
    height: 0.65rem;
    width: 2.05rem;
}

.tab-5 {
    background-position: -18.83rem -0rem;
    height: 0.65rem;
    width: 2.05rem;
}

/* 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, .85);
    opacity: 1;
    z-index: 1;
}


.u-tips .tip-container {
    position: relative;
    top: 50%;
    left: 50%;
    width: 7.5rem;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.u-tips .tip-container .img {
    margin-top: .2rem;
}

.u-tips .tip-container img {
    width: 100%;
    max-height: 100%;
}

.topic .sub_type,
.topic .sub_desc {
    color: #0088ff;
}

.topic .itemDesc {
    margin-top: 10px;
    color: #a1e5ff;
}

.topic .type2 {
    color: #fff;
}

.topic .type3 {
    margin-bottom: 10px;
}

.topic .green,
.topic .strength,
.topic .agility,
.topic .mentality,
.topic .iniMovementSpeed,
.topic .healthPoint,
.topic .manaPerSecond,
.topic .skillStats,
.integralAddition,
.topic .smPerSecond,
.fightingCapAdd {
    color: #00ff00;
}

.topic .skillAdd1 {
    margin-top: 10px;
}

.topic .skillAdd1,
.topic .skillAdd2 {}

.topic .skillAdd1,
.topic .skillAdd2 {
    color: #0088ff;
}

.topic .purple {
    color: #9205EA;
}

.topic .gold,
.topic .type3 {
    color: #FFCC11;
}

.topic .dGold {
    color: #dd9955;
}

.topic .orange,
.topic .magicValue {
    color: #FF8800;
}

.topic .blue {
    color: #0088ff;
}

.tips-detail {
    font-size: .24rem;
    padding: 0 .3rem;
}

/* end */