@media screen and (max-width: 1300px) {
    .nav {
        display: none !important;
    }
}


html {
    height: 100%;
}

body {
    position: relative;
    font-family: MicrosoftYaHei;
    font-size: .16rem;
    background: url(../image/bgpic.jpg) top center no-repeat;
    background-size: 100% auto;
    height: 100%;
}

li,
div,
a {
    user-select: none;
}

i {
    display: inline-block;

}

.wrapper {
    overflow: hidden;
}

.head {
    box-sizing: border-box;
    padding: .15rem .15rem;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    background: rgba(0, 0, 0, 0.5);
}

.head__left {
    float: left;
}

.head__right {
    float: right;
}

.icon-logo {
    background: url(../image/logo.png) center no-repeat;
    width: 2.83rem;
    height: .61rem;
    background-size: 100% auto;
    cursor: pointer;
    vertical-align: middle;
}

.icon-mainstation {
    background: url(../image/btn_mainstation.png) center no-repeat;
    width: 1.98rem;
    height: .65rem;
    background-size: 100% auto;
    cursor: pointer;
    display: inline-block;
}

.gwbox {
    position: absolute;
    top: .8rem;
    right: 1rem;
    box-sizing: border-box;
    width: 3rem;
    height: 2rem;
    cursor: pointer;
    padding-top: .3rem;
    text-align: right;
    z-index: 2;
    /* display: none; */
}

.icon-gw {
    background: url(../image/icon_home.png) center no-repeat;
    width: .65rem;
    height: .66rem;
    background-size: 100% auto;
    display: inline-block;
}

.icon-seerpc {
    background: url(../image/btn_seer.png) center no-repeat;
    width: 2.5rem;
    height: .6rem;
    background-size: 100% auto;
    cursor: pointer;
    display: inline-block;
}

.icon-seer {
    background: url(../image/btn_seerPc.png) center no-repeat;
    width: 2.5rem;
    height: .6rem;
    background-size: 100% auto;
    cursor: pointer;
    display: inline-block;
}


.icon-share {
    background: url(../image/icon_share.png) center no-repeat;
    width: .65rem;
    height: .66rem;
    margin-right: .15rem;
    background-size: 100% auto;
    cursor: pointer;
    display: inline-block;
}


.sharebox {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    z-index: 3001;
    margin-top: 3.5rem;
    padding-top: 1rem;
    /* display: none; */
    width: 4.38rem;
    overflow: hidden;
}

.share-weibo {
    background: url(../image/share_weibo.png) center no-repeat;
    width: 1.12rem;
    height: 1.53rem;
    background-size: 100% auto;
    animation: upShow linear .05s 1 normal forwards;
}

.share-qqzone {
    background: url(../image/share_qqzone.png) center no-repeat;
    width: 1.12rem;
    height: 1.53rem;
    background-size: 100% auto;
    margin: 0 .5rem;
    animation: upShow linear .05s 1 .02s normal forwards;
}

.share-weixin {
    background: url(../image/share_weixin.png) center no-repeat;
    width: 1.12rem;
    height: 1.53rem;
    background-size: 100% auto;
    animation: upShow linear .05s 1 .04s normal forwards;
}

.sharebox .code1 {
    background: url(../image/code.png) center no-repeat;
    width: 2.73rem;
    height: 3.89rem;
    background-size: 100% auto;
    margin-left: 50%;
    transform: translateX(-50%);
}

.sharemask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 3000;
    display: none;
}


.topnav {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 11;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: #1a2133;
    height: .9rem;
    padding-top: .15rem;
}

.topnav__content {
    margin: 0 auto;
    box-sizing: border-box;
    font-size: 0;
}

.topnav__content li {
    display: inline-block;
    width: 1.48rem;
    color: #93c2ff;
    font-size: .24rem;
    height: .75rem;
    line-height: .6rem;
    font-weight: bold;
    border-right: .01rem solid #93c2ff;
    text-align: center;
}

.topnav__content li:last-child {
    border: none;
}

.topnavitem {
    background-size: 100% auto;
    width: 1rem;
}

.topnavitem--active {
    background: url(../image/bg_bottomnav.png) center bottom no-repeat;
    background-size: .37rem .19rem;
    color: #c9b07a !important;
    text-align: center;
}

.wrap1 .inf {
    text-align: center;
    color: #cfdaf3;
    font-size: .24rem;
    width: 6.7rem;
    margin: 0 auto .4rem auto;
    text-align: left;
}

.inf span,
.signnum span {
    color: #fee9bc;
}

.wrap1 {
    height: 15.3rem;
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 2.1rem;
}

.signnum {
    background: url(../image/bg_signnum.png) center no-repeat;
    width: 5.89rem;
    height: .52rem;
    line-height: .52rem;
    background-size: 100% auto;
    box-sizing: border-box;
    padding: 3px 0 0 60px;
    font-size: .24rem;
    color: #cfdaf3;
    margin: 0 auto .1rem auto;
    padding: 0 0 0 .7rem;
}

.signnum span {
    font-size: .22rem;
    margin: 0 .1rem;
}

.login {
    float: right;
    text-align: center;
    color: #cfdaf3;
    width: 3.2rem;
}

#J_login,
.J-logout {
    color: #fee9bc;
}

.signbox {
    margin: 0 auto;
    box-sizing: border-box;
}

.sign {
    font-size: 0;
    width: 4.2rem;
    height: 10rem;
    margin-left: .4rem;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    padding-top: 1.05rem;

}

.signitem {
    display: inline-block;
    box-sizing: border-box;
    width: 1.37rem;
    height: .9rem;
}

.signitem_0 {
    background: url(../image/icon_sign.png) center center no-repeat;
    background-size: .87rem .59rem;
    animation: stamp linear .2s 1 normal forwards;
}

.gift {
    font-size: 0;
    width: .86rem;
    box-sizing: border-box;
    display: inline-block;
    margin: .96rem 0 0 1.4rem;
    vertical-align: top;
}

.giftitem {
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    height: 1.48rem;
    padding-top: 1rem;
}

.btn_gift {
    margin: 0 auto;
    width: .85rem;
    height: .35rem;
    text-align: center;
    background-color: #868993;
    font-size: .16rem;
    color: #ffffff;
    line-height: .35rem;
    border-radius: .04rem;
}

.btn_gift_0 {
    background-color: #8797c7 !important;
    cursor: pointer !important;
}

.btn_gift_1 {
    background-color: #cb6e53 !important;
    cursor: default !important;
}

.wrap2 {
    height: 11.7rem;
    /* 2800 */
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 1.8rem;
}


.wrap2__shadow {
    background: url(../image/spirit.png) center no-repeat;
    width: 7.5rem;
    height: 11.9rem;
    background-size: cover;
    margin: 0 auto;
}

.spirit {
    min-width: 100%;
    transform: translateX(-50%);
    margin-left: 50%;
    margin-bottom: .8rem;
}


.spiritpic {
    opacity: 0;
    width: 6.06rem;
    height: 8.19rem;
}

.spiritinf {
    opacity: 0;
    position: absolute;
    top: 1.5rem;
    right: .5rem;
    width: 3.04rem;
    height: 4.45rem;
}

.spiritpic--active {
    animation: leftIn linear .2s 1 normal forwards;
}

.spiritinf--active {
    animation: rightIn linear .2s 1 normal forwards;
}

.wrap2__swiper-container1 .swiper-pagination-bullets,
.wrap2__swiper-container2 .swiper-pagination-bullets,
.wrap2__swiper-container3 .swiper-pagination-bullets,
.wrap2__swiper-container4 .swiper-pagination-bullets {
    bottom: 0rem !important;
    left: 0rem !important;
}

.wrap2__swiper-container1 .swiper-pagination-bullet:nth-child(1) {
    opacity: 1;
    vertical-align: middle;
    position: relative;
    background: url(../image/spirithead1.png) center no-repeat;
    width: .89rem;
    height: .9rem;
    background-size: 100% auto;
}

.wrap2__swiper-container1 .swiper-pagination-bullet:nth-child(2) {
    opacity: 1;
    vertical-align: middle;
    position: relative;
    background: url(../image/spirithead2.png) center no-repeat;
    width: .89rem;
    height: .9rem;
    background-size: 100% auto;
}

.wrap2__swiper-container2 .swiper-pagination-bullet:nth-child(1) {
    opacity: 1;
    vertical-align: middle;
    position: relative;
    background: url(../image/spirithead3.png) center no-repeat;
    width: .89rem;
    height: .9rem;
    background-size: 100% auto;
}

.wrap2__swiper-container2 .swiper-pagination-bullet:nth-child(2) {
    opacity: 1;
    vertical-align: middle;
    position: relative;
    background: url(../image/spirithead4.png) center no-repeat;
    width: .89rem;
    height: .9rem;
    background-size: 100% auto;
}

.wrap2__swiper-container2 .swiper-pagination-bullet:nth-child(3) {
    opacity: 1;
    vertical-align: middle;
    position: relative;
    background: url(../image/spirithead5.png) center no-repeat;
    width: .89rem;
    height: .9rem;
    background-size: 100% auto;
}

.wrap2__swiper-container2 .swiper-pagination-bullet:nth-child(4) {
    opacity: 1;
    vertical-align: middle;
    position: relative;
    background: url(../image/spirithead6.png) center no-repeat;
    width: .89rem;
    height: .9rem;
    background-size: 100% auto;
}

.wrap2__swiper-container2 .swiper-pagination-bullet:nth-child(5) {
    opacity: 1;
    vertical-align: middle;
    position: relative;
    background: url(../image/spirithead7.png) center no-repeat;
    width: .89rem;
    height: .9rem;
    background-size: 100% auto;
}

.wrap2__swiper-container3 .swiper-pagination-bullet:nth-child(1) {
    opacity: 1;
    vertical-align: middle;
    position: relative;
    background: url(../image/spirithead8.png) center no-repeat;
    width: .89rem;
    height: .9rem;
    background-size: 100% auto;
}

.wrap2__swiper-container3 .swiper-pagination-bullet:nth-child(2) {
    opacity: 1;
    vertical-align: middle;
    position: relative;
    background: url(../image/spirithead9.png) center no-repeat;
    width: .89rem;
    height: .9rem;
    background-size: 100% auto;
}

.wrap2__swiper-container3 .swiper-pagination-bullet:nth-child(3) {
    opacity: 1;
    vertical-align: middle;
    position: relative;
    background: url(../image/spirithead10.png) center no-repeat;
    width: .89rem;
    height: .9rem;
    background-size: 100% auto;
}

.wrap2__swiper-container3 .swiper-pagination-bullet:nth-child(4) {
    opacity: 1;
    vertical-align: middle;
    position: relative;
    background: url(../image/spirithead11.png) center no-repeat;
    width: .89rem;
    height: .9rem;
    background-size: 100% auto;
}

.wrap2__swiper-container3 .swiper-pagination-bullet:nth-child(5) {
    opacity: 1;
    vertical-align: middle;
    position: relative;
    background: url(../image/spirithead12.png) center no-repeat;
    width: .89rem;
    height: .9rem;
    background-size: 100% auto;
}

.wrap2__swiper-container4 .swiper-pagination-bullet:nth-child(1) {
    opacity: 1;
    vertical-align: middle;
    position: relative;
    background: url(../image/spirithead13.png) center no-repeat;
    width: .89rem;
    height: .9rem;
    background-size: 100% auto;
}

.wrap2__swiper-container4 .swiper-pagination-bullet:nth-child(2) {
    opacity: 1;
    vertical-align: middle;
    position: relative;
    background: url(../image/spirithead14.png) center no-repeat;
    width: .89rem;
    height: .9rem;
    background-size: 100% auto;
}

.wrap2__swiper-container1 .swiper-pagination-bullet-active::after,
.wrap2__swiper-container2 .swiper-pagination-bullet-active::after,
.wrap2__swiper-container3 .swiper-pagination-bullet-active::after,
.wrap2__swiper-container4 .swiper-pagination-bullet-active::after {
    content: "";
    position: absolute;
    background: url(../image/spirithead--hover.png) center no-repeat;
    width: .89rem;
    height: 1.3rem;
    background-size: 100% auto;
    left: 0;
    top: -.2rem;
}

.timeline {
    background: url(../image/timeline1.png) center no-repeat;
    width: 6.43rem;
    height: .88rem;
    background-size: 100% auto;
    margin: 0 auto;
    position: relative;
}

.timeline1 {
    width: .4rem;
    height: .4rem;
    position: absolute;
    left: .9rem;
}

.timeline2 {
    width: .4rem;
    height: .4rem;
    position: absolute;
    left: 2.3rem;
}

.timeline3 {
    width: .4rem;
    height: .4rem;
    position: absolute;
    left: 3.7rem;
}

.timeline4 {
    width: .4rem;
    height: .4rem;
    position: absolute;
    left: 5.1rem;
}

.wrap3 {
    height: 11rem;
    /* 3900 */
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 2.2rem;
}

.planet {
    height: 5.4rem;
    background-size: 100% auto;
    position: relative;
    box-sizing: border-box;
}

.planet1 {
    width: 2.77rem;
    height: 1.65rem;
    box-sizing: border-box;
    position: absolute;
    left: .3rem;
    top: 0;
    cursor: pointer;
}

.planet2 {
    width: 2.77rem;
    height: 1.65rem;
    box-sizing: border-box;
    position: absolute;
    left: 4.55rem;
    top: .85rem;
    cursor: pointer;
}

.planet3 {
    width: 2.77rem;
    height: 1.65rem;
    box-sizing: border-box;
    position: absolute;
    left: 4.55rem;
    top: 3.75rem;
    cursor: pointer;
}

.wrap4 {
    height: 7rem;
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 2.5rem;
    overflow: hidden;
}

.wrap4__vedio {
    margin: 0 auto;
    position: relative;
    padding-top: .15rem;
    margin-left: -2.6rem;
    width: 10rem;
}

.wrap4__swiper-container .swiper-slide {
    transform: scale(0.8);
    position: relative;
    transition: all .75s;
}


.wrap4__swiper-container .swiper-slide img {
    /* width: 100%; */
    width: 6.02rem;
    position: relative;
}

.wrap4__swiper-container .swiper-slide::after {
    content: "";
    width: 6.02rem;
    height: 3.37rem;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
}

.wrap4__swiper-container .swiper-slide-active {
    transform: scale(1);
    z-index: 100;
    transition: all .75s;
}

.wrap4__swiper-container .swiper-slide-active::after {
    content: "";
    width: 100%;
    height: 3.37rem;
    position: absolute;
    top: 0;
    left: 0;
    background: none;
}

.wrap4__swiper-container .swiper-button-prev {
    background-image: url(../image/pageleft.png);
    background-size: 100% auto;
    width: .37rem;
    height: .72rem;
    margin-left: 2.5rem;
    margin-top: -.1rem;
}

.wrap4__swiper-container .swiper-button-next {
    background-image: url(../image/pageright.png);
    background-size: 100% auto;
    width: .37rem;
    height: .72rem;
    margin-right: -.2rem;
    margin-top: -.1rem;
}

.vedio--hover {
    position: absolute;
    top: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: url(../image/vedio--hover.png) center no-repeat;
    width: 6.3rem;
    height: 3.66rem;
    z-index: 10;
    background-size: 100% auto;
}

.wrap5 {
    height: 11rem;
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 2.3rem;
}

.wrap5__swiper-container {
    width: 6.73rem;
    height: 5.84rem;
    overflow: hidden;
    margin: 0 auto;
}

.wrap5__swiper-container img {
    width: 6.73rem;
}

.wrap5__swiper-container .swiper-pagination-bullets {
    bottom: 1.5rem !important;
}

.wrap5__swiper-container .swiper-pagination-bullet {
    width: .4rem;
    border-radius: .2rem;
    margin: 0 .15rem !important;
    background-color: #252954;
    opacity: 1;
    vertical-align: middle;
}

.wrap5__swiper-container .swiper-pagination-bullet-active {
    background: url(../image/icon_swiper.png) center no-repeat;
    width: .37rem !important;
    height: .33rem;
    background-size: 100% auto;
}

/* 弹窗 */
.dialog-alert .dialog-content,
.dialog-confirm .dialog-content {
    width: 5.56rem !important;
    height: 3.5rem;
    background: url(../image/bg_tc.png) no-repeat top center;
    background-size: 100% auto;
    text-align: center;
    transform: translateX(-50%);
    box-sizing: border-box;
    padding: .6rem 0 0 0;
    margin-left: 0 !important;
    color: #9aa0af;
}

.dialog-alert .dialog-closebtn,
.dialog-confirm .dialog-closebtn {
    display: none;
}

.dialog-large .dialog-header,
.dialog-large .dialog-body,
.dialog-large .dialog-footer,
.dialog-alert .dialog-header,
.dialog-alert .dialog-body,
.dialog-alert .dialog-footer,
.dialog-confirm .dialog-header,
.dialog-confirm .dialog-body,
.dialog-confirm .dialog-footer {
    background: none !important;
}

.dialog-large .dialog-header,
.dialog-alert .dialog-header,
.dialog-confirm .dialog-header {
    height: .4rem !important;
}

.dialog-alert .dialog-header-title {
    font-size: .4rem !important;
    color: #c9b07a !important;
    font-weight: bold;
}

.dialog-alert .dialog-body {
    min-height: .7rem !important;
}

.dialog-alert .dialog-btn {
    color: #fee9bc !important;
    background-color: #52589f !important;
    width: 1.2rem !important;
    height: .5rem !important;
    line-height: .5rem !important;
    font-size: .3rem !important;
    border-radius: .05rem;
}

.imgmask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 3000;
    display: none;
}

.vediomask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 3000;
    display: none;
}

.vediodialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 30001;
    display: none;
}

.vedioplayer {
    width: 100%;
    object-fit: contain;
}

.imgbox {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6.25rem;
    height: 5.91rem;
    z-index: 3001;
}


@keyframes stamp {
    0% {
        opacity: 0;
        transform: scale(3);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes leftIn {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes rightIn {
    0% {
        transform: translateX(200%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes upShow {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-.5rem);
    }
}