[v-cloak]{
    display: none!important;
}
* {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
    font-size: calc(100vw/19.2);
    width: 100%;
    height: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-size: .16rem;
    min-width: 1200px;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: #000;
}

body,
.home-page {
    height: 100%;
    width: 100%;
}

ul,
li {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
}

.show_pc {
    display: block !important;
}

.show_mob {
    display: none !important;
}

@media (min-width: 1920px) {
    html {
        font-size: 100px;
    }
}

@media (max-width: 1400px) {
    html {
        font-size: 80px;
    }
}

.clearfix:after {
    content: '';
    display: block;
    clear: both
}

.nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    /* background: linear-gradient(180deg, rgba(0, 0, 0, .8) 0, transparent); */
    width: 100%;
    min-width: 1200px;
    /* padding-top: 18px; */
    height: 56px;
    align-items: center;
    background: rgba(0, 18, 40, 1);
}

/* .nav::before{
    height: 56px;
    background: rgba(0, 18, 40, 1);
    content: "";
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1;
} */
.nav .logo {
    width: 1.16rem;
    min-width: 100px;
    margin-left: .2rem;
    display: block;
    position: relative;
    z-index: 2;
    top: 25px;
}

.nav .tabs {
    display: flex;
    position: relative;
    z-index: 2;
}

.nav .tabs li {
    font-size: 14px;
    margin-left: .6rem;
    cursor: pointer;
    position: relative;
    line-height: .22rem;
}

.nav .tabs li a {
    color: #9cabc4;
}

.nav .tabs li.active a {
    color: #fff;
    font-weight: 600;
}

.nav .login {
    position: fixed;
    right: 7.3vw;
    /* margin-top: 17px; */
    line-height: 22px;
    font-size: 14px;
    color: #fff;
    z-index: 10;
    top: 17px;
}

.footer {
    background: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.4rem;
    color: #fff;
}

.footer>div:last-of-type {
    text-align: right;
    font-size: .14rem;
}

.footer a {
    text-decoration: underline;
    display: inline-block;
    margin-left: .1rem;
}

.footer .icons {
    padding: .15rem 0;
    display: flex;
}

.footer .icons img {
    height: .7rem;
    margin-right: .1rem;
    width: .7rem;
}

.footer .copyright {
    margin-top: .1rem;
}

.footer .beian {
    display: none;
}

.footer .beian a {
    font-size: .14rem;
    text-decoration: none;

}

.home-page .swiper-container {
    width: 100%;
    height: 100%;
}

.home-page .slide1 {
    background: url(../img/BG_1.jpg) center top no-repeat;
    background-size: cover;
    position: relative;
}

.home-page .slide1 .qrcode-box{
    width: 4.06rem;
    height: 2.38rem;
    padding:  .18rem;
    box-sizing: border-box;
    border: 1px solid rgba(0, 186, 255, 0.5);
    background: rgba(26, 82, 154, .3);
    position: absolute;
    right: 1.32rem;
    bottom: .6rem;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    box-shadow: 0px 0px 10px rgba(0,0,0,.3);
}
.home-page .slide1 .left-wrap {
    width: 6.42rem;
    position: absolute;
    left: 14.48vw;
    bottom: 1.1rem;
    min-width: 400px;
}
.home-page .slide1 .card_logo {
    width: 6.3rem;
    position: absolute;
    left: 14.48vw;
    bottom: 1.1rem;
    min-width: 400px;
}
.home-page .slide1 .form {
    position: absolute;
    bottom: 18.14vh;
    right: 14.48vw;
    width: 3.74rem;
    background: url(../img/form_bg.png) center bottom no-repeat;
    background-size: 100% auto;
    min-width: 280px;
}

.home-page .slide1 .form .logo {
    width: 3.13rem;
    min-width: 250px;
    display: block;
    float: right;
}

.home-page .slide1 .form .box {
    height: 2.36rem;
    min-height: 176px;
    background: rgba(255, 255, 255, .3);
    padding: .08rem .12rem;
    box-sizing: border-box;
}

.home-page .slide1 .tab {
    display: flex;
}

.home-page .slide1 .tab span {
    flex: 1;
    text-align: center;
    font-size: .16rem;
    line-height: .42rem;
    cursor: pointer;
}

.home-page .slide1 .tab span.active {
    background: #fff;
}

.home-page .slide1 .group {
    padding: .3rem .4rem 0;
}

.home-page .slide1 .group input {
    width: 100%;
    height: .35rem;
    border-radius: .35rem;
    background: url(../img/ipt_icon.png) #a3a1a9 93% center no-repeat;
    background-size: .24rem;
    border: 0;
    margin-bottom: .16rem;
    min-height: 30px;
    padding: 0 .5rem 0 .2rem;
    box-sizing: border-box;
    outline: none;
}

.home-page .slide2 {
    background: url(../img/slide2.jpg) center center no-repeat;
    background-size: cover;
    font-weight: bold;
}

.home-page .slide2 p {
    color: #fff;
    position: absolute;
    text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.75);
}

.home-page .slide2 p:nth-of-type(1) {
    font-size: .64rem;
    right: 7.29vw;
    top: 13.88vh;
    line-height: .9rem;
}

.home-page .slide2 p:nth-of-type(2) {
    font-size: .4rem;
    left: 7.29vw;
    bottom: 13.88vh;
    line-height: .56rem;

}

.home-page .slide3 {
    position: relative;
}

.home-page .slide3::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/Shadow.png) no-repeat;
    background-size: cover;
    z-index: 10;
}

.home-page .slide3 .box {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.home-page .slide3 .bg-box,
.home-page .slide3 .person-box,
.home-page .slide3 .info-icon {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
}


.home-page .slide3 .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/BG_sd1.jpg) center center no-repeat;
    background-size: cover;
    z-index: 1;
    opacity: 0;
}

.home-page .slide3 .anime_characters_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/T_SD01.png) center center no-repeat;
    background-size: cover;
    transform: translate(100%, 100%);
    z-index: 2;
}

.home-page .slide3 .anime_characters {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/SD01.png) center center no-repeat;
    background-size: cover;
    transform: translate(100%, 100%);
    z-index: 3;
}

.home-page .slide3 .box1 .anime_characters_bg,
.home-page .slide3 .box1 .anime_characters {
    transform: translate(-100%, 100%);
}

.home-page .slide3 .info-icon {
    width: 4.52rem;
    height: auto;
    top: 30vh;
    right: .56rem;
    left: auto;
    min-width: 380px;
    transform: translateY(-60%);
    z-index: 4;
    opacity: 0;
}

.home-page .slide3 .box.active .bg {
    opacity: 1;
    transition: all .6s ease-in
}

.home-page .slide3 .box.leave .bg {
    opacity: 0;
    transition: all .6s ease-in
}

.home-page .slide3 .box.active .info-icon {
    transition: all .6s ease-in;
    transform: translateY(0);
    opacity: 1;
    z-index: 12;
}

.home-page .slide3 .box.leave .info-icon {
    transition: all 0s;
    opacity: 0;
}

.home-page .slide3 .box.active .anime_characters_bg,
.home-page .slide3 .box.active .anime_characters {
    transition: all .6s ease-in;
    transform: translate(0, 0);
}

.home-page .slide3 .box.leave .anime_characters_bg,
.home-page .slide3 .box.leave .anime_characters {
    transition: all .6s ease-in;
    transform: translate(100%, 100%);
}

.home-page .slide3 .box1.leave .anime_characters_bg,
.home-page .slide3 .box1.leave .anime_characters {
    transform: translate(-100%, 100%);
}
.home-page .slide3 .box4.leave .anime_characters_bg,
.home-page .slide3 .box4.leave .anime_characters {
    transform: translate(-100%, 100%);
}




.home-page .slide3 .box2 .bg {
    background: url(../img/BG_sd2.jpg) center center no-repeat;
    background-size: cover;
}

.home-page .slide3 .box2 .anime_characters_bg {
    background: url(../img/T_SD02.png) center center no-repeat;
    background-size: cover;
}

.home-page .slide3 .box2 .anime_characters {
    background: url(../img/SD02.png) center center no-repeat;
    background-size: cover;
}

.home-page .slide3 .box2 .info-icon {
    left: .56rem;
}

.home-page .slide3 .box3 .bg {
    background: url(../img/BG_sd3.jpg) center center no-repeat;
    background-size: cover;
}

.home-page .slide3 .box3 .anime_characters_bg {
    background: url(../img/T_SD03.png) center center no-repeat;
    background-size: cover;
}

.home-page .slide3 .box3 .anime_characters {
    background: url(../img/SD03.png) center center no-repeat;
    background-size: cover;
}
.home-page .slide3 .box4 .bg {
    background: url(../img/BG_sd4.jpg) center center no-repeat;
    background-size: cover;
}

.home-page .slide3 .box4 .anime_characters_bg {
    background: url(../img/T_SD04.png) center center no-repeat;
    background-size: cover;
}

.home-page .slide3 .box4 .anime_characters {
    background: url(../img/SD04.png) center center no-repeat;
    background-size: cover;
}

.home-page .slide3 .box3 .info-icon {
    left: .56rem;
}
.home-page .slide3 .box4 .bg {
    background: url(../img/BG_sd4.jpg) center center no-repeat;
    background-size: cover;
}

.home-page .slide3 .box4 .anime_characters_bg {
    background: url(../img/T_SD04.png) center center no-repeat;
    background-size: cover;
}

.home-page .slide3 .box4 .anime_characters {
    background: url(../img/SD04.png) center center no-repeat;
    background-size: cover;
}
/* .home-page .slide3 .box2,.home-page .slide3 .box3{
    opacity: 0;
} */
.home-page .slide3 .icons {
    position: absolute;
    display: flex;
    width: 100%;
    bottom: .43rem;
    justify-content: center;
    z-index: 15;
    /* transform: translateY(200%); */
}

.home-page .slide3.swiper-slide-active .icons {
    /* transition: all .6s ease-in;
    transform: translateY(0%); */
}

.home-page .slide3 .icons>div {
    width: .98rem;
    height: 1.12rem;
    background: url(../img/blue_black.png) no-repeat;
    background-size: cover;
    margin: 0 .1rem;
    cursor: pointer;
    min-width: 80px;
    min-height: 91px;
}

.home-page .slide3 .icons>div:nth-of-type(1) {
    background: url(../img/blue_black.png) no-repeat;
    background-size: cover;
}

.home-page .slide3 .icons>div:nth-of-type(1).on {
    background: url(../img/blue.png) no-repeat;
    background-size: cover;
}

.home-page .slide3 .icons>div:nth-of-type(2) {
    background: url(../img/yellow_black.png) no-repeat;
    background-size: cover;
}

.home-page .slide3 .icons>div:nth-of-type(2).on {
    background: url(../img/yellow.png) no-repeat;
    background-size: cover;
}

.home-page .slide3 .icons>div:nth-of-type(3) {
    background: url(../img/black_black.png) no-repeat;
    background-size: cover;
}

.home-page .slide3 .icons>div:nth-of-type(3).on {
    background: url(../img/black.png) no-repeat;
    background-size: cover;
}
.home-page .slide3 .icons>div:nth-of-type(4) {
    background: url(../img/red_black.png) no-repeat;
    background-size: cover;
}



.home-page .slide3 .icons>div:nth-of-type(4).on {
    background: url(../img/red.png) no-repeat;
    background-size: cover;
}
.home-page .swiper-slide {
    overflow: hidden;
}

.home-page .slide4 {
    height: 1rem;

}

.home-page .mouse-img {
    position: absolute;
    z-index: 2;
    bottom: 10%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 40px;
    height: 40px;
    background: url(../img/mouse.png);
    background-size: contain;
    animation: mouseAni 2s ease-out infinite;
}

@keyframes mouseAni {
    0% {
        bottom: 10%;
        opacity: 0
    }

    30% {
        opacity: 1
    }

    to {
        bottom: 2%
    }
}

.home-page .logo-icon {
    position: fixed;
    top: .18rem;
    left: .2rem;
    width: 1.16rem;
    z-index: 6;
    min-width: 100px;
}

.home-page .logo-icon img {
    width: 100%;
    display: block;
}

.home-page .message {
    background: rgba(0, 0, 0, .7);
    height: .5rem;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    width: 240px;
    z-index: 60;
    border-radius: .06rem;
    text-align: center;
    line-height: .5rem;
    font-size: .13rem;
    display: none;
    color: #fff;
}

.guide-page {
    background: url(../img/guide/bg.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
    position: relative;
    padding: 0 1.4rem .6rem 4.16rem;
    min-width: 1200px;
    box-sizing: border-box;
    overflow: hidden;
    font-size: .18rem;
    line-height: .25rem;
}

.guide-page .fixed_left {
    width: 2.6rem;
    position: fixed;
    top: 108px;
    left: 1.4rem;
}

.guide-page .fixed_left div {
    background: rgba(0, 0, 0, .3);
    padding: .2rem 0;
}

.guide-page .fixed_left h1 {
    font-size: .64rem;
    line-height: .64rem;
    margin-bottom: .72rem;
}

.guide-page .fixed_left h2 {
    font-size: .16rem;
    background: rgba(0, 0, 0, .7);
    line-height: .5rem;
    /* margin-bottom: .2rem; */
    padding: 0 .2rem;
}

.guide-page .fixed_left h2:last-of-type {
    /* margin-top: .2rem; */
}

.guide-page .fixed_left p {
    line-height: .22rem;
    font-size: .16rem;
    margin-bottom: .1rem;
    padding: 0 .2rem;
    cursor: pointer;

}

.guide-page .fixed_left div p:last-of-type {
    margin-bottom: 0;
}

.guide-page .scroll_right {
    width: calc(100vw - 5.56rem);
    padding-top: 108px;
    min-width: 755px;
}

.guide-page .scroll_right .slogan {
    height: 1.36rem;
}

.guide-page .scroll_right h2 {
    font-size: .28rem;
    background: rgba(0, 0, 0, .7);
    line-height: .5rem;
    padding: 0 .6rem;
}

.guide-page .scroll_right h3 {
    font-size: .18rem;
    padding: 0 .6rem;
    line-height: .25rem;
    font-weight: normal;
}

.guide-page .scroll_right .mt60 {
    margin-top: .6rem;
}

.guide-page .scroll_right .cards-desc {
    margin-top: .26rem;
}

.guide-page .scroll_right .cards-desc ul {
    width: 60%;
    padding-left: .34rem;
    box-sizing: border-box;
    float: left;
    padding-right: .34rem;
}

.guide-page .scroll_right .cards-desc li {
    margin-top: .26rem;
    display: flex;
}

.guide-page .scroll_right .cards-desc li:first-of-type {
    margin: 0;
}

.guide-page .scroll_right .cards-desc .name {
    width: 1.3rem;
    line-height: .33rem;
    font-size: .24rem;
}

.guide-page .scroll_right .cards-desc .desc {
    width: 6.4rem;
}

.guide-page .font-medium {
    font-weight: bold;
}

.guide-page .scroll_right .cards-desc .structure {
    width: 40%;
    background: rgba(0, 0, 0, .3);
    padding: .2rem;
    box-sizing: border-box;
    /* min-width: 400px; */
    float: right;
    border-radius: .08rem;
}

.guide-page .scroll_right .cards-desc .structure .about {
    color: #B9B9B9;
    font-size: .2rem;
}

.guide-page .scroll_right .cards-desc .ml28 {
    margin-left: .28rem;
}

.guide-page .scroll_right .pc_card2 {
    max-width: 10.93rem;
    margin-left: .42rem;
    display: block;
    width: calc(100% - 1.7rem);
}

.guide-page .scroll_right .pc_card3 {
    max-width: 10.88rem;
    margin-left: 1.38rem;
    display: block;
    width: calc(100% - 2.2rem);
    margin-bottom: .4rem;
}

@media (max-width: 1200px) {
    .guide-page .scroll_right .pc_card3 {

        margin-left: 1.05rem;
        width: 565px;

    }

    .guide-page .scroll_right .cards-desc .name {
        width: 1.7rem;
    }
}

.guide-page .scroll_right .ml42 {
    margin-left: .42rem;
}

.guide-page .scroll_right .pc_card4 {
    width: 10.88rem;
    display: block;
    margin: 0 auto;
}

.guide-page .scroll_right .mt200 {
    margin-top: 2rem;
}

.guide-page .scroll_right .preparation_matters {
    max-width: 10.88rem;
    margin: 0 auto;
}

.guide-page .scroll_right .preparation_matters p {
    margin-bottom: .2rem;
}

.guide-page .scroll_right .pc_card5_desc p:last-of-type {
    margin-bottom: 0;
}

.guide-page .scroll_right .mb0 {
    margin-bottom: 0 !important;
}

.guide-page .scroll_right .game_flow {
    margin-top: .4rem;
    padding: 0 .6rem;
}

.guide-page .scroll_right .game_flow_item {
    background: rgba(27, 84, 155, .3);
    border-radius: .06rem;
    /* max-width: 12.44rem; */
    margin: .8rem .5rem 0;
    position: relative;
    padding: 1.04rem .78rem .6rem;
    box-sizing: border-box;
}

.guide-page .scroll_right .game_flow_item .title {
    position: absolute;
    top: -.4rem;
    right: .98rem;
    line-height: .84rem;
    font-size: .6rem;
    color: rgba(30, 115, 221);
}

.guide-page .scroll_right .game_flow_item1 {
    padding-bottom: .6rem;
}

.guide-page .scroll_right .game_flow_item p {
    /* padding-left: .78rem; */
}

.guide-page .scroll_right .game_flow_item1 img {
    max-width: 8.75rem;
    padding: .59rem 0 .6rem 1.53rem;
    display: block;
    box-sizing: border-box;
}

.guide-page .scroll_right .game_flow_item2 {
    padding-top: .57rem;
    padding-bottom: .6rem;
}

.guide-page .scroll_right .game_flow_item2 img {
    width: 8.12rem;
    margin: 0 auto .6rem;
    display: block;
}

.guide-page .scroll_right .game_flow_item3 {
    padding: .64rem .78rem .6rem;
    box-sizing: border-box;
}

.guide-page .scroll_right .game_flow_item h4 {
    font-weight: normal;
}

.guide-page .scroll_right .game_flow_item3 .box {
    background: rgba(0, 0, 0, .4);
    padding: .4rem;
    font-size: .16rem;
    line-height: .22rem
}

.guide-page .scroll_right .game_flow_item .box {
    border-radius: .04rem;
}

.guide-page .scroll_right .game_flow_item3 .box .about {
    color: rgb(185, 185, 185);
    padding-left: 0;
}

.guide-page .scroll_right .game_flow_item3 img {
    display: block;
    width: 8.12rem;
    margin: .4rem auto 0;
}

.guide-page .scroll_right .game_flow_item3 .box p {
    padding: 0 40px;
}

.guide-page .scroll_right .mt40 {
    margin-top: .4rem;
}

.guide-page .scroll_right .pc_card_info1 {
    margin-left: 1.38rem
}

.guide-page .scroll_right .mt20 {
    margin-top: .2rem;
}

.guide-page .scroll_right .game_flow_item4 {
    padding: .7rem .78rem .6rem;
    box-sizing: border-box;
}

.guide-page .scroll_right .game_flow_item4 .box {
    background: rgba(0, 0, 0, .4);
    padding: .4rem;
    font-size: .16rem;
    line-height: .22rem;
    border-radius: .04rem;
}

.guide-page .scroll_right .game_flow_item4 p {
    padding-left: 0;
}

.guide-page .scroll_right .game_flow_item4 .box .about {
    color: rgb(185, 185, 185);
    padding-left: 0;
}

.guide-page .scroll_right .step {
    padding: 0 .24rem;
    box-sizing: border-box;
}

.guide-page .scroll_right .fs22 {
    font-size: .22rem !important;
    line-height: .3rem !important;
}

.guide-page .scroll_right .fs20 {
    font-size: .2rem !important;
    line-height: .28rem !important;
}

.guide-page .scroll_right .fs18 {
    font-size: .18rem !important;
    line-height: .28rem !important;
}

.guide-page .scroll_right .mt10 {
    margin-top: .1rem;
}

.guide-page .scroll_right .pc_card14 {
    width: 5.36rem;
    display: block;
    margin: .4rem auto 0;
}

.guide-page .scroll_right .pc_card15 {
    width: 8.12rem;
    display: block;
    margin: .4rem auto 0;
}

.guide-page .scroll_right .pc_card16 {
    width: 7.15rem;
    display: block;
    margin: .4rem auto 0;
}

.guide-page .scroll_right .star {
    position: relative;
    padding-left: .28rem !important;
}

.guide-page .scroll_right .star::before {
    content: "✦";
    position: absolute;
    left: 0;

    top: 0;
}

.guide-page .scroll_right .circle {
    position: relative;
    padding-left: .22rem !important;
}

.guide-page .scroll_right .circle::before {
    content: "·";
    position: absolute;
    left: 0;

    top: 0;
}

.guide-page .scroll_right .game_flow_item5 {
    padding: .6rem .78rem;
    margin-bottom: 0;
}

.guide-page .scroll_right .ml40 {
    margin-left: .4rem !important;
}

.guide-page .scroll_right .game_flow_item6 {
    padding: .6rem;
    margin-top: .4rem;
}

.guide-page .scroll_right .game_flow_item6 .box {
    background: rgba(0, 0, 0, .4);
    padding: .4rem;
    font-size: .16rem;
    line-height: .22rem;
}

.guide-page .scroll_right .game_flow_item6 .box .about {
    color: rgb(185, 185, 185);
    padding-left: 0;
}

.guide-page .scroll_right .download_tip {
    width: 10.88rem;
    margin: .4rem auto 0;
}

.guide-page .scroll_right .pc_card17 {
    padding: 0 .4rem;
    width: 8.23rem;
    box-sizing: border-box;
}

.guide-page .scroll_right .flex {
    display: flex;
    justify-content: space-between;
}

.guide-page .scroll_right .flex .pc_card18 {
    width: 3.54rem;
}

.guide-page .scroll_right .flex .pc_card19 {
    width: 2.16rem;
}

.guide-page .scroll_right .flex .pc_card19_text {
    width: 6.72rem;
    padding-right: .6rem;
}

.guide-page .scroll_right .flex .pc_card20 {
    width: 3.96rem;
}

.guide-page .scroll_right .flex .pc_card20_text {
    width: 5.82rem;
    padding-right: .2rem;
    box-sizing: border-box;
}

.guide-page .scroll_right .mr40 {
    margin-right: .4rem;
}

.guide-page .scroll_right .pc_card21 {
    width: 3.58rem;
}

.guide-page .scroll_right .flex .pc_card21_text {
    width: 6.8rem;
    padding-right: .2rem;
    box-sizing: border-box;
}

.guide-page .scroll_right .text-shadow {
    text-shadow: 0px 0px 3px #00214A;
}

.guide-page .scroll_right .game_flow_item4 .num {
    padding-left: .28rem;
    position: relative;
}

.guide-page .scroll_right .game_flow_item4 .num::before {
    content: "1.";
    position: absolute;
    left: .03rem;
    top: 0;
}

.guide-page .scroll_right .game_flow_item4 .num_2::before {
    content: "2.";
}

.guide-page .scroll_right span.bg-circle {
    display: inline-block;
    width: .2rem;
    height: .2rem;
    background: url(../img/guide/step1.png) no-repeat;
    background-size: cover;
    position: relative;
    top: .03rem;
}

.guide-page .scroll_right span.bg-circle2 {
    background: url(../img/guide/step2.png) no-repeat;
    background-size: cover;
}

.guide-page .scroll_right span.bg-circle3 {
    background: url(../img/guide/step3.png) no-repeat;
    background-size: cover;
}

.guide-page .scroll_right span.bg-circle4 {
    background: url(../img/guide/step4.png) no-repeat;
    background-size: cover;
}

.layui-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    transform: scale(0);
    opacity: 0;
    z-index: 999999;
}

.layui-layer.show {
    animation: _scale .3s both;
}

.layui-layer.hide {
    animation: _scale2 .3s both;
}

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

@keyframes _scale2 {
    0% {
        opacity: 1;
        transform: scale(1);
    }

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

.layui-layer .layui-layer-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.layui-layer .yszctext {
    position: relative;
}

.layui-layer .scroll_box {
    color: #c5c5c5;
    width: 6rem;
    height: 3rem;
    overflow-y: scroll;
    padding: .32rem;
    box-sizing: border-box;
    background: #000;
}

.layui-layer .yszctext .close {
    position: absolute;
    width: 27px;
    height: 27px;
    border: .03rem solid #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    top: -10px;
    right: -10px;
    font-weight: bolder;
    background: #787878;
    font-size: 16px;
    cursor: pointer;
}

.layui-layer .yszccon p {
    line-height: 22px;
    font-size: 12px;
}

.layui-layer .yszccon .mt10 {
    margin-top: .1rem;
}

.layui-layer .yszctit {
    font-size: .16rem;
    margin: .1rem 0;
    text-align: center;
}

.page-container {
    margin: 0 auto;
    max-width: 1046px;
    color: #fff;

}

h1.page-title {
    padding-top: 108px;
    line-height: 53px;
    font-size: 38px;
    text-align: center;
    color: #fff;
    text-shadow: 0px 0px 10px rgba(0, 186, 255, 0.5);
}

input,
select {
    outline: none !important;
}

.card-page,
.game-page,
.product-page,
.shop-page,
.game-page-detail,
.product-page-detail {
    background: url(../img/guide/bg.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh;
    padding-bottom: 40px;
}

.page-container .filter-box {
    background: rgba(0, 0, 0, .3);
    padding: 16px 8px;
    margin-top: .4rem;
    font-size: 14px;

}

.page-container .filter-box .flex {
    display: flex;
    /* margin-bottom: 20px; */
}

.page-container .filter-box .input-group {
    flex: 1;
    padding: 0 8px;
}

.page-container .filter-box .el-input {
    /* line-height: 46px;
    border: 1px solid rgba(26, 82, 154, 1)!important;
    background: rgba(0,0,0,.3);
    width: 100%;
    padding: 0 8px 0 16px;
    box-sizing: border-box;
    border-radius: 8px; */


}

.page-container .filter-box .input-group>div {
    line-height: 46px;
    border: 1px solid rgba(26, 82, 154, 1) !important;
    background: rgba(0, 0, 0, .3);
    width: 100% !important;
    box-sizing: border-box;
    border-radius: 8px;
    height: 48px;
}

.page-container .filter-box .input-group>div.checkbox-group {
    border: 0 !important;
    height: auto;
    background: transparent;
    line-height: 0;
}

.page-container .filter-box .el-input input {
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0;
    height: 46px;
    color: #fff;
    font-size: 16px;
    padding: 0 16px;
}

.page-container .filter-box .icon-search {
    background: url(../img/icon-search.png) center center no-repeat;
    background-size: 20px;
    position: relative;
    top: -5px;
}

input::placeholder,textarea::placeholder,
select::placeholder {
    color: #888;
}

.el-input--suffix .el-input__inner {
    color: #fff;
}

.page-container .filter-box .el-select {
    width: 100%;
}

.page-container .filter-box .flex-inline .input-group {
    margin-right: 16px;
}

.page-container .filter-box .flex-inline .search-more {
    width: 87px;
    flex: none;
    border: 1px solid rgba(26, 82, 154, 1);
    border-radius: 8px;
    text-align: center;
    line-height: 38px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}

.page-container .filter-box .flex-inline .input-group:last-of-type {
    margin-right: 0;
}

.el-range-editor.is-active,
.el-range-editor.is-active:hover,
.el-select .el-input.is-focus .el-input__inner,
.el-select .el-input__inner:focus {
    border-color: rgba(26, 82, 154, 1) !important;
}

.page-container .filter-box .flex-wrap {
    flex-wrap: wrap;
    display: flex;
}

.game-page .filter-box .flex-2 {
    flex-wrap: wrap;
}

.page-container .filter-box .flex-2 .input-group {
    width: 50%;
    flex: auto;
    margin-bottom: 10px;
    padding: 0 8px;
    box-sizing: border-box;
}

.page-container .filter-box .flex-2 .input-group>label {
    line-height: 22px;
    font-size: 16px;
    display: block;
    font-weight: bold;
    margin: 0 0 10px;
}

.page-container .filter-box .btn {
    margin-top: 5px;
}

.page-container .filter-box .btn span {
    width: 350px;
    line-height: 32px;
    display: block;
    margin: 0 auto 0;
    background: #1A529A;
    border-radius: 30px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    height: 30px;
}

.game-page .filter-box .btn {
    margin-top: 4px;
}

.mt20px {
    margin-top: 20px;
}

.mb20px {
    margin-bottom: 20px;
}

.result-box {
    display: flex;
    margin: 40px 16px;

    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.result-box .reset {
    width: 100px;
    line-height: 27px;
    border: 2px solid #1A529A;
    border-radius: 30px;
    margin-right: 10px;
    font-size: 14px;
    text-align: center;
    height: 26px;
    cursor: pointer;
}

.result-box .total {
    font-size: 16px;
}

.result-box .flex {
    display: flex;
    flex: 1;
    align-items: center;
}

.card-page .cards-box {
    display: flex;
    flex-wrap: wrap;
}

.card-page .cards-box .pic {
    width: 190px;
    height: 265px;
    margin-right: 16px;
    margin-bottom: 16px;
    box-sizing: border-box;
    border-radius: 9px;
    overflow: hidden;
    background: rgba(0, 0, 0, .2);
    transition: all .3s ease;
    cursor: pointer;
    position: relative;
}

.card-page .cards-box .pic:hover {
    transform: translateY(-10px);
}

.card-page .cards-box img {
    width: 100%;

}

.card-page .bottom-pagintion {
    margin-top: 24px;
}

.card-page .cards-box div:nth-of-type(5n+1) {
    margin-left: 16px;
}

.card-page .add-btn {
    line-height: 40px;
    margin-top: 5px;
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
    background: url(../img/icon-plus.png) rgba(0, 0, 0, .3) 45% center no-repeat;
    background-size: 20px;
    cursor: pointer;
    font-weight: bold;
    user-select: none;
}

.card-page .add-btn.open {
    background: url(../img/icon-minus.png) rgba(0, 0, 0, .3) 45% center no-repeat;
    background-size: 20px;
}

.bottom-pagintion {
    text-align: center;
    margin-top: 40px;
}

.el-pagination {
    padding: 0;
}

.el-pagination .btn-next,
.el-pagination .btn-prev {
    background: transparent;
}

.el-pager li {
    background: transparent;
    color: #fff;
    width: 30px;
    height: 22px;
    line-height: 24px;
    font-size: 14px;
    margin-right: 5px;
    border: 2px solid #1A529A;
    padding: 0;
    box-sizing: content-box;
}

.el-pager li:last-of-type {
    margin-right: 0;
}

.el-pagination button:disabled {
    background: transparent;
}

.el-pager li.active {
    background: #1A529A;
    color: #fff;
}

.el-pager li:hover {
    color: #fff;
}

.el-pager li.active+li {
    border-left: 2px solid #1A529A;
}

.el-pagination button,
.el-pagination span:not([class*=suffix]) {
    height: 26px;
    line-height: 26px;
}

.el-pagination .btn-next,
.el-pagination .btn-prev,
.el-pagination button:disabled {
    width: 66px;
    height: 22px;
    border: 2px solid #1A529A;
    padding: 0;
    font-weight: bold;
    box-sizing: content-box;
    color: #fff;
    line-height: 22px;
}

.el-pagination button:disabled {
    color: #888;
    background: rgba(0, 0, 0, .3);
    border: 2px solid rgba(0, 0, 0, 0);
    line-height: 22px;
    height: 22px;
}

.el-pagination button:disabled span {
    height: 26px;
    line-height: 24px;
}

.el-pagination button,
.el-pagination span:not([class*=suffix]) {
    line-height: 22px;
    height: 22px;
}

.el-pagination .btn-prev {
    margin-right: 20px;
}

.el-pagination .btn-next {
    margin-left: 20px;
}

.el-pager .more {
    position: relative;

}

.el-pager .more::before {
    content: "···";
    color: #fff;
    line-height: 22px;
    top: 0;
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
    background: #000;
    font-weight: bold;
    color: #409EFF;
}


.el-select-dropdown__list {}

.el-select-dropdown {
    background: rgba(0, 0, 0, .9);
    border: 1px solid #000;
}

.el-select-dropdown__item {
    color: #fff;
}

.el-popper[x-placement^=bottom] .popper__arrow::after {
    border-bottom-color: rgba(0, 0, 0, .8);
}

.el-popper[x-placement^=bottom] .popper__arrow {
    border-bottom-color: rgba(0, 0, 0, .8);
}

.el-checkbox-button .el-checkbox-button__inner {
    padding: 0 12px;
    line-height: 22px;
    height: 26px;
    border: 2px solid #1A529A;
    margin-bottom: 5px;
    margin-right: 5px;
    background: transparent;
    color: rgba(255, 255, 255, .7);
}

.el-checkbox-button.is-checked .el-checkbox-button__inner {
    background: #1A529A;
    color: #fff;
    border-color: #1A529A;
    box-shadow: none;
}

.el-checkbox-button.is-focus .el-checkbox-button__inner {
    border-color: #1A529A;
}

.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner,
.el-checkbox-button:first-child .el-checkbox-button__inner {
    border-left: 2px solid #1A529A;
    border-radius: 0;
}

.el-checkbox-button:last-child .el-checkbox-button__inner {
    border-radius: 0;
}

.el-input-group__append .el-button {
    background: transparent;
    height: 100%;
}

.el-input-group__append,
.el-input-group__prepend {
    background: transparent;
    border: 0;
}

.el-range-editor .el-range-input {
    background: transparent;
    color: #fff;
    font-size: 16px;
}

.el-date-editor .el-range-separator {
    line-height: 40px;
    color: #fff;
}

.result-item-group {
    margin-top: 40px;
    font-size: 14px;
}

.result-item-group .item {
    background: rgba(0, 0, 0, .3);

}

.result-item-group .item:hover {
    background: rgba(0, 0, 0, .7);
}

.shop-page .result-item-group .item:hover {
    background: rgba(0, 0, 0, .3);
}

.product-page .result-item-group .item:hover,
.game-page .result-item-group .item:hover {

    background: rgba(26, 82, 154, 0.3);
}

.product-page .result-item-group .item:hover a,
.game-page .result-item-group .item:hover a {
    border: 1px solid rgba(26, 82, 154, 1);
}

.result-item-group .item a {
    border: 1px solid transparent;
}

.result-item-group .item a,
.result-item-group .item .box {
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
}

.result-item-group .item .box {}

.result-item-group .item:last-of-type {
    margin-bottom: 0;
}

.result-item-group .pic {
    height: 190px;
    width: 190px;
    background: rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-item-group .pic img {
    max-width: 100%;
    max-height: 100%;
}

.result-item-group .content {
    width: 812px;
}

.result-item-group .top {
    display: flex;
    margin-top: 10px;
}

.game-page .result-item-group .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.game-page .result-item-group .top>div {
    display: flex;
}

.result-item-group .icon {
    background: rgba(0, 0, 0, .3);
    width: 30px;
    height: 30px;
    margin-right: 10px;
    box-sizing: border-box;
}

.result-item-group p.title {
    line-height: 30px;
    font-size: 18px;
    margin-top: 0;
    font-weight: bold;
}

.result-item-group .desc {
    font-size: 28px;
    line-height: 40px;
    word-break: break-all;
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.result-item-group p {
    margin-top: 10px;
}

.result-item-group .tag {
    background: rgba(26, 82, 154, 1);
    line-height: 34px;
    padding: 0 12px;
    margin-top: 24px;
    display: inline-block;
    height: 32px;
    font-weight: bold;
}

.result-item-group p strong {
    padding-right: 10px;
}

.result-item-group p span {
    padding-right: 10px;
    line-height: 20px;
}

.product-page .result-item-group {
    margin-top: 35px;
}

.product-page .result-item-group .tag {
    margin-top: 0;
    border-radius: 4px;
    font-size: 20px;
}

.product-page .swiper-container {
    max-width: 1740px;
    margin: 40px auto;
    padding: 0 90px;
    position: relative;
    overflow: hidden;
    user-select: none;
}

.product-page .el-checkbox-button .el-checkbox-button__inner {
    line-height: 40px;
    height: 40px;
    font-size: 16px;
    padding: 0 24px;
}

.product-page .swiper-container .prev {
    position: absolute;
    width: 15px;
    height: 26px;
    left: 50px;
    top: 50%;
    margin-top: -13px;
    background: url(../img/arrow-left.png) no-repeat;
    background-size: cover;
    cursor: pointer;
}

.product-page .swiper-container .next {
    position: absolute;
    width: 15px;
    height: 26px;
    right: 50px;
    top: 50%;
    margin-top: -13px;
    background: url(../img/arrow-right.png) no-repeat;
    background-size: cover;
    cursor: pointer;
}

.product-page .swiper {
    width: 100%;
    /* height: 300px; */
    overflow: hidden;
}

.product-page .swiper .swiper-slide {
    /* background: #000; */

}
.product-page .swiper .swiper-slide a{
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}
.product-page .swiper-button-next:after,
.product-page .swiper-container-rtl .swiper-button-prev:after {
    content: "";
}

.el-picker-panel {
    background: rgba(0, 0, 0, .9);
    border: 1px solid #000;
    color: #fff;
}

.el-date-range-picker__content.is-left,
.el-date-table th {
    border-color: rgba(0, 0, 0, 1);

}

.el-date-table td.in-range div,
.el-date-table td.in-range div:hover,
.el-date-table.is-week-mode .el-date-table__row.current div,
.el-date-table.is-week-mode .el-date-table__row:hover div {
    background: #000;
}

.el-select .el-input .el-select__caret {
    background: url(../img/icon-arrow2.png) center center no-repeat;
    background-size: 24px;
}

.el-select .el-input .el-select__caret.is-reverse {
    background: url(../img/icon-arrow2.png) center center no-repeat;
    background-size: 24px;
}

.shop-page .page-container .filter-box .flex .search-group {
    width: 396px;
    flex: none;
}

.shop-page .result-item-group .pic {
    width: 396px;
    height: 223px;
}

.shop-page .result-item-group .content {
    width: 602px;
}

.shop-page .page-container .filter-box .btn {
    margin-top: 20px;
}

.shop-page .page-container .result-box {
    margin: 40px 0;
}

.shop-page .result-item-group p.area {
    font-weight: bold;
    margin-top: 0;
}

.shop-page .result-item-group .desc {
    -webkit-line-clamp: 3;
}

.popup-detail {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 3;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(30px);
    top: 0;
    left: 0;
}

.popup-detail .inner {
    width: 1046px;
    margin: 150px auto 0;
    color: #fff;
    background: rgba(0, 41, 93, 1);
    padding: 16px;
    box-sizing: border-box;
    position: relative;
}

.popup-detail .inner .close {
    position: absolute;
    right: -34px;
    top: 0;
    width: 24px;
    cursor: pointer;
}

.popup-detail .inner .flex {
    display: flex;
    flex-wrap: wrap;
}

.card-popup-detail .pic {
    width: 396px;
}

.card-popup-detail .pic img {
    box-shadow: 0px 3px 17px rgba(0, 0, 0, 0.75);
    margin-top: 10px;
    border-radius: 18px;
}

.card-popup-detail .info {
    margin-left: 16px;
    flex: 1;
    padding: 43px 0 0 0;
    box-sizing: border-box;
    line-height: 22px;
    font-size: 16px;
}

.card-popup-detail .name {
    line-height: 33px;
    font-size: 24px;
}

.card-popup-detail .item {
    border-radius: 4px;
    width: 293px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    line-height: 60px;
    border: 1px solid rgba(26, 82, 154, 1);
    font-size: 16px;
    border-radius: 6px;
    margin-bottom: 16px;
}

.card-popup-detail .item:nth-of-type(2n) {
    margin-left: 16px;
}

.card-popup-detail .item span {
    text-align: center;
    color: rgba(0, 186, 255, 1);
    width: 100px;
}

.card-popup-detail .item strong {
    flex: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
    padding-left: 20px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.card-popup-detail .content {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 10px;
    border: 1px solid rgba(26, 82, 154, 1);
    margin-bottom: 10px;
}

.card-popup-detail .content:last-of-type {
    margin-bottom: 0;
}

.card-popup-detail .content p.subtitle {
    color: rgba(0, 186, 255, 1);
    margin-bottom: 10px;
}

.game-page-detail .content,
.product-page-detail .content {
    width: 812px;
    padding-top: 1.08rem;
    margin: 0 auto;
    position: relative;
}

.game-page-detail .top-back,
.product-page-detail .top-back {
    position: absolute;
    top: 1.08rem;
    left: -78px;
    line-height: 20px;
    background: url(../img/arrow-left.png) left center no-repeat;
    background-size: auto 10px;
    padding-left: 15px;
}

.game-page-detail .content .pic,
.product-page-detail .content .pic {
    width: 100%;
    height: 460px;
    background: rgba(0, 0, 0, .3);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-page-detail .content .pic img,
.product-page-detail .content .pic img {
    max-width: 100%;
    max-height: 100%;
}

.game-page-detail .content .pic .tag,
.product-page-detail .content .pic .tag {
    position: absolute;
    width: 240px;
    height: 50px;
    background: #1A529A;
    text-align: center;
    display: block;
    line-height: 50px;
    right: -16px;
    top: 20px;
    font-size: 28px;
}

.game-page-detail .content .box,
.product-page-detail .content .box {
    background: rgba(0, 0, 0, .3);
    padding: 20px 28px;
    font-size: 16px;
    margin-top: 20px;
}

.game-page-detail .content .box>p,
.product-page-detail .content .box>p {
    display: flex;
    margin-bottom: 20px;
}

.game-page-detail .content .box>p span:first-of-type,
.product-page-detail .content .box>p span:first-of-type {
    width: 94px;
    font-weight: bold;
}

.game-page-detail .content .box>p span:last-of-type,
.product-page-detail .content .box>p span:last-of-type {
    width: 646px;
    padding-left: 16px;
}

.product-page-detail .content .tips {
    border: 1px solid rgba(112, 112, 112, 1);
    padding: 14px;
    font-size: 14px;
    line-height: 20px;
}

.game-page-detail .content .back,
.product-page-detail .content .back {
    width: 316px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    display: block;
    font-size: 28px;
    margin: 20px auto 0;
    background: rgba(26, 82, 154, 1);
    border-radius: 60px;
}

.game-page-detail .content .box .tag {
    line-height: 30px;
    padding: 0;
    display: flex;
    margin-bottom: 0;
    font-size: 18px;
}

.game-page-detail .content .box .tag div {
    width: 30px;
    height: 30px;

    margin-right: 10px;
}

.product-page-detail .content .box .tag {
    line-height: 32px;
    padding: 0 12px;
    display: inline-block;
    margin-bottom: 0;
    font-size: 18px;
    background: rgba(26, 82, 154, 1);
    border-radius: 4px;
}

.game-page-detail .content .box p.name,
.product-page-detail .content .box p.name {
    font-size: 36px;
    line-height: 50px;
    margin: 10px 0 0;

}

.el-icon-arrow-up:before,
.el-input__icon:after {
    content: "";
}

.el-icon-date:before {
    content: "";
}

.el-date-editor .el-range__icon,
.el-date-editor .el-range__close-icon {
    width: 0;
}

.el-picker-panel .el-date-table td,
.el-date-table th {
    color: #fff;
}

.el-date-table td.next-month,
.el-date-table td.prev-month {
    color: #666;
}

.login-content {
    width: 806px;
    margin: 42px auto 0;
    background: rgba(26, 82, 154, .16);
    border: 1px solid rgba(0, 186, 255, 0.16);
    height: 595px;
    padding: 100px 218px 0;
    box-sizing: border-box;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);

}

.commander-page .login-content .el-form-item__content {
    margin-left: 0 !important;
    width: 100%;
}

.commander-page .login-content .el-form-item__label {
    line-height: 25px;
}

/* .login-content label,
.register-content label {
    line-height: 25px;
    font-size: 18px;
    margin-bottom: 10px;
    display: block;
}

.login-content .input-group:last-of-type,
.register-content .input-group:last-of-type {
    margin-top: 20px;
}

.login-content input,
.register-content input,
.complete-register-content .input-group input {
    height: 48px;
    border-radius: 8px;
    padding: 0 16px;
    background: rgba(0, 0, 0, .3);
    border: 1px solid rgba(26, 82, 154, 1);
    display: block;
    width: 100%;
    font-size: 16px;
    box-sizing: border-box;
} */

.login-content p {
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    margin-top: 20px;
}

.login-content button,
.register-content button {
    width: 334px;
    height: 40px;
    background: rgba(26, 82, 154, 1);
    color: #fff;
    border: 1px solid rgba(26, 82, 154, 1);
    border-radius: 40px;
    display: block;
    margin: 20px auto 0;
    cursor: pointer;
}

.login-content button:hover,
.register-content button:hover {
    border: 1px solid rgba(0, 186, 255, 0.5);
}

.login-content .forget {
    margin-top: 10px;
    color: rgba(0, 186, 255, 1);
    display: block;
    text-align: center;
}

.login-content .create {
    font-size: 16px;
    line-height: 22px;
    color: rgba(0, 186, 255, 1);
    font-weight: bold;
}

.login-content .register {
    font-size: 12px;
    color: rgba(153, 153, 153, 1);

}

.register-content {
    width: 806px;
    margin: 0 auto;
    background: rgba(26, 82, 154, .3);
    border: 1px solid rgba(26, 82, 154, 1);
    padding: 100px;
    box-sizing: border-box;
}

.register-content button {
    margin-top: 60px;
}

.register-page h2,
.complete-register-page h2 {
    font-size: 16px;
    line-height: 22px;
    font-weight: 0;
    text-align: center;
    margin: 30px auto 99px;
}

.complete-register-content {
    width: 1042px;
    margin: 0 auto;
    background: rgba(26, 82, 154, .3);
    border: 1px solid rgba(26, 82, 154, 1);
    padding: 90px 118px;
    box-sizing: border-box;
}

.complete-register-content .input-group {
    display: flex;
    font-size: 18px;
    justify-content: flex-end;
    margin-bottom: 40px;
}

.complete-register-content .input-group:last-of-type {
    margin-bottom: 0;
}

.complete-register-content .input-group label {
    padding-right: 20px;
    line-height: 48px;
}

.complete-register-content .input-group input {
    width: 570px;
}

.complete-register-content .input-group+p {
    line-height: 17px;
    font-size: 12px;
    color: rgba(136, 136, 136, 1);
    margin-bottom: 40px;
    padding-left: 236px;
}

.complete-register-content .input-group.mb10 {
    margin-bottom: 10px;
}

.form-contaier {
    width: 1042px;
    margin: 60px auto 0;
    background: rgba(26, 82, 154, .3);
    border: 1px solid rgba(26, 82, 154, 1);
    box-sizing: border-box;
    padding: 90px 118px;
}

.form-contaier .el-form-item {
    margin-bottom: 20px;
}

.form-contaier .el-input__inner {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(26, 82, 154, 1);
    font-size: 16px;
    color: #fff;
}

.form-contaier .el-form-item__label {
    font-size: 18px;
    color: #fff;
    padding-right: 20px;
}

.settings-page .form-contaier .el-form-item:last-of-type {
    margin-bottom: 0;
}

.settings-page .form-contaier {
    padding: 20px;
}

.settings-page .form-contaier .el-form {
    padding: 0 98px;
}

.settings-page .flex,
.info-page .flex {
    display: flex;
    justify-content: space-between;
    margin-bottom: 26px;
}

.info-page .flex {
    margin-bottom: 0;
}

.info-page .content:first-of-type {
    margin-top: 60px;
    position: relative;
    z-index: 2;
}
.info-page .avator-list{
    position: absolute;
    border: 1px solid #00BAFF;
    background: rgba(0, 0, 0, 1);
    width: 972px;
    height: 292px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding:10px ;
    left: 35px;
    top:176px;
    z-index: 9;
    padding: .1rem;
}
.info-page .avator-list img{
    width: 116px;
    height: 116px;
    margin: 10px;
    display: block;
    border-radius: 10px;
    cursor: pointer;
}
.info-page .avator p{
    line-height: 116px;
    font-size: 16px;
    text-align: center;
}
.info-page .avator {
    cursor: pointer;
}
.settings-page .subtitle,
.info-page .subtitle {
    display: flex;
    align-items: center;
}

.settings-page .subtitle img,
.info-page .subtitle img {
    width: 32px;
    height: 32px;

    margin-right: 10px;
}

.settings-page .subtitle span,
.info-page .subtitle span {
    display: inline-block;
    line-height: 30px;
    font-size: 18px;
}

.settings-page .flex .el-button,
.info-page .flex .el-button {
    width: 87px;
    height: 30px;
    border: 1px solid rgba(0, 186, 255, 0.5);
    background: transparent;
    border-radius: 30px;
    color: #fff;
    padding: 0;
}

.settings-page .flex .el-button span,
.info-page .flex .el-button span {
    font-size: 14px;
    line-height: 28px;
}

.info-page .content-title {
    font-size: 18px;
    line-height: 25px;
}

.info-page .content.exchange-content {
    margin-top: 40px;
    padding: 20px;
}

.info-page .exchange-content .el-form-item {
    width: 334px;
    display: block;
    margin: 10px auto 0;
}

.info-page .exchange-content .el-input__inner {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(26, 82, 154, 1);
    border-radius: 8px;
    font-size: 16px;
    color: #fff;
    text-align: center;
}

.info-page .exchange-content .submit,
.info-page .more {
    width: 87px;
    height: 30px;
    border: 1px solid rgba(26, 82, 154, 1);
    background: rgba(26, 82, 154, .3);
    border-radius: 30px;
    color: #fff;
    padding: 0;
    margin: 0 auto;
    display: block;
    text-align: center;
    line-height: 28px;
}

.info-page .exchange-content .submit:hover,
.info-page .more:hover {
    background: #1A529A;
}

.info-page .flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.info-page .more {
    margin: 0;
}

.info-page .more:hover {
    background: rgba(26, 82, 154, 1);
}






















.settings-page .text {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 20px;
    margin-top: 16px;
}

.settings-page {
    padding-bottom: 40px;
}

.settings-page .back,
.historical-honors-page .back,
.message-page .back {
    width: 334px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    color: #fff;
    text-align: center;
    display: block;
    margin: 40px auto 0;
    background: rgba(26, 82, 154, 1);
}

.historical-honors-page .list {
    margin: 60px auto 0;
    width: 1042px;
    background: rgba(26, 82, 154, .3);
    border: 1px solid rgba(0, 186, 255, 0.16);
    padding: 20px;
    box-sizing: border-box;
}

.historical-honors-page .list li {
    display: flex;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
}

.historical-honors-page .list li:last-of-type {
    margin-bottom: 0;
}

.historical-honors-page .list li .pic {
    width: 100px;
    height: 100px;
    /* background: rgba(26, 82, 154, .3); */
}

.historical-honors-page .list li .content {
    width: 840px;
    margin-left: 20px;
}

.historical-honors-page .list li p {
    color: rgba(204, 204, 204, 1);
    font-size: 16px;
    line-height: 22px;
}

.historical-honors-page .list li .title {

    margin-bottom: 10px;
    color: #fff;
}

.message-page li {
    background: rgba(0, 0, 0, .3);
    padding: 10px;
    line-height: 22px;
    font-size: 16px;
    position: relative;
    margin-bottom: 10px;
    border-radius: 4px;
    cursor: pointer;
}

.message-page li:last-of-type {
    margin-bottom: 0;
}

.message-page li.new {
    border: 1px solid rgba(0, 186, 255, 0.5);
}

.message-page li.new::before {
    content: 'NEW';
    position: absolute;
    left: 10px;
    top: -10px;
    font-size: 14px;
    line-height: 20px;
    color: rgba(0, 186, 255, 1);
}

.message-page li.open .options {
    display: flex;
}

.message-page .open .group .date {
    display: none;
}

.message-page .open .group {
    display: block;

}

.message-page .open .group .title {
    overflow: visible;
    white-space: normal;
    height: auto;
}

.message-page .open .text p {
    overflow: visible;
    white-space: normal;
    height: auto;
}

.message-page .text p {
    height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(204, 204, 204, 1);
}

.message-page .date {
    color: rgba(204, 204, 204, 1);
}

.message-page .group {
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
}

.message-page .group .title {
    height: 22px;
    overflow: hidden;
    padding-right: 24px;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-page .flex-between {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}

.message-page .flex-between .el-button,
.message-page .btn .el-button {
    width: 87px;
    line-height: 30px;
    padding: 0;
    border: 1px solid rgba(26, 82, 154, 1);
    background: rgba(26, 82, 154, .3);
    color: #fff;
    border-radius: 30px;
}

.message-page .btn {
    text-align: right;
    margin-top: 5px;
}

.message-page .commander-block {
    margin-top: 20px !important;
}

.message-page .options {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    display: none;
}

.message-page .options .el-button {
    background: rgba(223, 6, 6, 1);
    color: #fff;
    height: 22px;
    width: 44px;
    line-height: 22px;
    padding: 0;
    border: 0;
}

/* .message-page .list li {
    display: flex;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
    justify-content: space-between;
    color: rgba(204, 204, 204, 1);
    font-size: 16px;
    line-height: 22px;
}

.message-page .list li:last-of-type {
    margin-bottom: 0;
}

.message-page .list li .icon {
    width: 24px;
    height: 24px;
    background: rgba(26, 82, 154, .3);
    margin-top: 10px;
}

.message-page .list .content {
    width: 948px;
}

.message-page .list .content .el-button {
    background: rgba(223, 6, 6, 1);
    border-radius: 2px;
    color: #fff;
    width: 44px;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    border: 0;
    padding: 0;
    margin-left: 10px;
}

.message-page .list .content .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;

}

.message-page .list .content .title span {
    width: 894px;
}

.message-page .list li .title {
    color: #fff;
} */

.info-page {
    padding-bottom: 40px;
    background: url(../img/guide/bg.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.info-page .content {
    background: rgba(26, 82, 154, .16);
    border: 1px solid rgba(0, 186, 255, 0.16);
    padding: 40px;
    box-sizing: border-box;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.info-page .flex-content {
    display: flex;
}

.info-page .flex-content .avator {
    width: 116px;
    height: 116px;
    box-shadow: 0px 0px 10px #00BAFF80;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    border: 1px solid #00BAFF80;
}
.info-page .flex-content .avator img{
    display: block;
    width: 100%;
    height: 100%;
}
.info-page .flex-content .avator::before {
    /* width: 166px;
    height: 100px;
    background: rgba(26, 82, 154, 1);
    top: 8px;
    left: -50px;
    content: "";
    position: absolute;
    z-index: -1;
    box-shadow: 0 0px 30px rgba(0, 186, 255, 0.5); */
}

.info-page .user-info {
    width: 316px;
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
}

.info-page .user-info p {
    line-height: 22px;
    font-size: 16px;
}

.info-page .user-info p:nth-of-type(1) {
    font-size: 28px;
    line-height: 40px;
}

.info-page .user-info p:nth-of-type(2) {
    color: rgba(204, 204, 204, 1);
}

.info-page .user-info p:nth-of-type(3) {
    color: rgba(0, 186, 255, 1);
}

.info-page .user-info .links {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
}

.info-page .user-info .links a {
    width: 60px;
    height: 60px;
    margin-right: 20px;
    position: relative;
}

.info-page .user-info .links a.new::before {
    content: "NEW";
    position: absolute;
    left: 0;
    width: 60px;
    text-align: center;
    color: #fff;
    top: -6px;
    color: #00BAFF;

}

.info-page .box1 {
    width: 216px;
    right: 0;
    bottom: 0;
}

.info-page .box1 p {
    line-height: 58px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(26, 82, 154, 1);
    margin-bottom: 11px;
    display: flex;
    font-size: 16px;
}

.info-page .box1 p span:nth-of-type(1) {
    width: 100px;
    color: rgba(0, 186, 255, 1);
    text-align: center;
    background: rgba(26, 82, 154, 0.3);
}

.info-page .box1 p span:nth-of-type(2) {
    padding-left: 20px;
}

.info-page .box1 p:last-of-type {
    margin-bottom: 0;
}

.info-page .box2 {
    width: 294px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(26, 82, 154, 1);
    height: 200px;
    margin-left: 20px;
}

.info-page .box2 p {
    line-height: 50px;
    background: rgba(26, 82, 154, 0.3);
    color: rgba(0, 186, 255, 1);
    font-size: 16px;
    text-align: center;
}

.info-page .box2 img {
    /* width: 100px; */
    height: 100px;
    display: block;
    margin: 0 auto;
}

.info-page .box2 strong {
    line-height: 40px;
    font-size: 28px;
    display: block;
    text-align: center;
}

.info-page .message-content {
    margin-top: 40px;
    padding: 20px;
}

.info-page .message-content li {
    display: flex;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
    justify-content: space-between;
    color: rgba(204, 204, 204, 1);
    font-size: 16px;
    line-height: 22px;
    border-radius: 4px;
}

.info-page .message-content li .icon {
    width: 24px;
    height: 24px;

    margin-top: 10px;
}

.info-page .message-content li .text {
    width: 948px;

}

.info-page .message-content li .text .title {
    color: #fff;
    margin-bottom: 5px;
}

.info-page .message-content li:last-of-type {
    margin-bottom: 0;
}

.info-page .history {
    margin-top: 40px;
    padding: 20px;
}

.info-page .history .honor {
    display: flex;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.3);
    padding: 13px;
    border-radius: 4px;
}

.info-page .history .honor .pic {
    width: 64px;
    height: 64px;
    margin-right: 12px;
}

.info-page .history .honor .pic:nth-of-type(13) {
    margin-right: 0;
}

/* .info-page .honor{
    display: flex;
    padding: 10px 10px 0 10px;
    background: rgba(0, 0, 0, 0.3);
    margin-bottom: 14px;
    color: rgba(204, 204, 204, 1);
    font-size: 16px;
    line-height: 22px;
    border-radius: 4px;

}
.info-page .honor .img{
    width: 64px;
    height: 64px;

    margin-left: 12px;
    margin-bottom: 10px;
}
.info-page .honor .img:nth-of-type(13n+1){
    margin-left: 0;
} */
.info-page .game-info {
    margin-top: 40px;
    padding: 20px;
}

.info-page .game-info p {
    line-height: 58px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(26, 82, 154, 1);
    display: flex;
    font-size: 16px;
    width: 216px;
}

.info-page .game-info p span:nth-of-type(1) {
    width: 100px;
    color: rgba(0, 186, 255, 1);
    text-align: center;
    background: rgba(26, 82, 154, 0.3);
}

.info-page .game-info p span:nth-of-type(2) {
    flex: 1;
    text-align: center;
}

.info-page .game-info .subtitle span:last-of-type {
    color: rgba(204, 204, 204, 1);
    display: inline-block;
    padding-left: 32px;
}

.info-page .game-info .flex:nth-of-type(1) {
    margin-bottom: 12px;
}

.info-page .game-info .flex:nth-of-type(2) {
    margin-bottom: 0;
}

.info-page .game-info table {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 4px;
}

.info-page .game-info table td {
    line-height: 27px;
    font-size: 16px;
    text-align: center;
}

.info-page .game-info .season {
    color: rgba(204, 204, 204, 1);
    margin-left: 20px;
}

.info-page .game-info h3 {
    font-size: 14px;
    line-height: 30px;
    color: rgba(0, 186, 255, 1);
    margin-bottom: 5px;
    margin-top: 20px;
}

.info-page .other {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
}

.info-page .other a {
    width: 334px;
    height: 80px;
    background: rgba(26, 82, 154, .3);
    border: 1px solid rgba(26, 82, 154, 1);
    padding-left: 75px;
    box-sizing: border-box;
    line-height: 80px;
    font-size: 18px;
}

.info-page .logout {
    line-height: 25px;
    text-align: right;
    margin: 30px 0 0;
    color: rgba(0, 186, 255, 1);
    font-size: 18px;
    line-height: 25px;
}

.search-page {
    background: url(../img/guide/bg.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.search-result ul {
    width: 100%;
}

.search-result ul li {
    margin-bottom: 5px;
}

.search-result ul li a {
    height: 64px;
    background: rgba(0, 0, 0, .3);
    display: flex;
    justify-content: space-between;

    text-align: center;
    line-height: 64px;
    font-size: 16px;
}

.search-result ul li:first-of-type a {
    height: 40px;
    line-height: 40px;
    background: rgba(26, 82, 154, .3);
    color: rgba(0, 186, 255, 1);
}

.search-result ul li a p:nth-of-type(1) {
    width: 293px;
}

.search-result ul li a p:nth-of-type(2) {
    width: 293px;
}

/* .search-result ul li a p:nth-of-type(3) {
    width: 380px;
} */

.search-result ul li a p:nth-of-type(3) {
    width: 380px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-result ul li a p:nth-of-type(3) img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
}

.search-page {
    padding-bottom: 60px;
}

.search-page .back {
    width: 334px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    color: #fff;
    text-align: center;
    display: block;
    margin: 40px auto 0;
    background: rgba(26, 82, 154, 1);
}

.commander-block {
    background: rgba(26, 82, 154, .16);
    border: 1px solid rgba(0, 186, 255, 0.16);
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.commander-page {
    background: url(../img/guide/bg.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding-bottom: 60px;
    min-height: calc(100vh - 180px);
}

.commander-page h1 {
    text-shadow: 0px 0px 10px rgba(0, 186, 255, 0.5);
}

.commander-container {
    width: 1042px;
    margin: 0 auto;
    color: #fff;
}

.commander-page .commander-block {
    margin-top: 40px;

}

.commander-page .commander-block:first-of-type {
    margin-top: 60px;
}

.commander-page .commander-block .top {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: bold;
    align-items: center;
}

.commander-page .commander-block .top img {
    width: 32px;
    height: 32px;

    margin-right: 10px;
}

.commander-page .commander-block .top div {
    display: flex;
    align-items: center;
}





.commander-fleet .inner-block textarea {
    width: 100%;
    height: 64px;
    background: transparent;
    border: 0;
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    resize: none;
    outline: none;
    font-size: 16px;
}

.commander-page .commander-block .top .date {
    color: rgba(204, 204, 204, 1);
    font-weight: normal;
    font-size: 16px;
}

.commander-page .commander-block .top .el-button {
    width: 87px;
    height: 30px;
    border: 1px solid rgba(0, 186, 255, 0.16);
    border-radius: 30px;
    padding: 0;
    background: transparent;
    color: #fff;
}

.commander-page .inner-block {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    margin-top: 20px;
}

.commander-page .inner-block.honor {
    display: flex;
    padding: 10px 10px 0 10px;
    background: rgba(0, 0, 0, 0.3);
    margin-bottom: 14px;
    color: rgba(204, 204, 204, 1);
    font-size: 16px;
    line-height: 22px;
    border-radius: 4px;

}

.commander-page .inner-block.honor .img {
    width: 64px;
    height: 64px;
    margin-left: 12px;
    margin-bottom: 10px;
}

.commander-page .inner-block.honor .img:nth-of-type(13n+1) {
    margin-left: 0;
}

.commander-page .inner-block table {
    width: 100%;
    border: 1px solid rgba(26, 82, 154, 1);
    font-size: 16px;
    border-radius: 4px;
}

.commander-page .inner-block table tr {
    height: 40px;
    line-height: 40px;
}

.commander-page .inner-block table td {
    text-align: center;
}

.commander-page .inner-block table tr:first-of-type {
    background: rgba(26, 82, 154, 0.3);

    color: rgba(0, 186, 255, 1);
}

.commander-fleet .inner-block table tr td:last-of-type,
.commander-fleet .inner-block table tr th:last-of-type {
    padding-right: 100px;
}

.commander-fleet .el-form {
    display: flex;
    width: 100%;
    margin-top: 10px;
}

.commander-fleet .el-form .el-form-item__content {
    width: 100%;
    margin-left: 0 !important;

}

.commander-fleet .el-form .el-form-item__label {
    width: 100% !important;
    text-align: left;
    color: #00BAFF;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 5px;
}

.commander-fleet .el-form .el-form-item {
    margin-right: 10px;
    flex: 1;
    margin-bottom: 10px;
}

.commander-fleet .el-form .el-form-item:last-of-type {
    margin-right: 0;
}

.commander-fleet .el-form .el-input__inner {
    border: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    font-size: 16px;
    color: #fff;
}

.commander-fleet .el-form .el-input__suffix {
    top: 12px;
}

.commander-fleet .team-block .inner-block {
    display: flex;
    /* padding: 10px 10px 0; */
    flex-wrap: wrap;
    margin-top: 0;
    background: transparent;

}

.commander-fleet-intelligence .recruit-team-block .inner-block {
    background: rgba(0, 0, 0, 0.3);
}

.commander-fleet .team-block .inner-block .item {
    width: 192px;
    margin-right: 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
}

.commander-fleet .team-block .inner-block .item:nth-of-type(5n) {
    margin-right: 0;
}

.commander-fleet .team-block .inner-block .item .el-button {}

.commander-fleet .team-block .inner-block .item:nth-of-type(5n) {
    margin-right: 0;
}

.commander-fleet .team-block p,
.commander-fleet .commander-block .subtitle {
    color: #00BAFF;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 5px;
}

.commander-fleet .recruitment-manifesto-block .inner-block {
    margin-top: 5px;
}

.commander-fleet .recruitment-manifesto-block .subtitle {
    margin-top: 10px;
}


.commander-fleet table {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 4px;
}

.commander-fleet table td {
    line-height: 27px;
    font-size: 16px;
    text-align: center;
    width: 24%;
}

.commander-fleet .table-member tr td:nth-of-type(1) {
    width: 28%;
}

.commander-fleet .table-member {
    margin-bottom: 20px;
}

.commander-fleet .game-block .flex {
    display: flex;
    align-items: end;
    margin-bottom: 40px;
}

.commander-fleet .game-block .item {
    width: 216px;
    margin-right: 20px;
    border: 1px solid rgba(26, 82, 154, 1);
    border-radius: 6px;
    line-height: 60px;
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    font-size: 16px;
    height: 60px;
    margin-top: 20px;
}

.commander-fleet .label {
    background: rgba(26, 82, 154, 0.3);
    width: 90px;
    color: #00BAFF;
}

.commander-fleet .value {
    flex: 1;
}

.commander-fleet .game-block .icon {
    width: 347px;
    background: url(../img/icon-level-bg.png) no-repeat;
    background-size: 100% auto;
    height: 221px;
    right: 92px;
    position: absolute;
    top: 20px;
}

.commander-fleet .game-block .icon img {
    width: 140px;
    display: block;
    margin: 30px auto 0;
}

.commander-fleet .game-block .icon p {
    border-radius: 4px;
    /* position: relative; */
    text-align: center;
    font-size: 28px;
    line-height: 40px;
    /* top: -12px; */
}

.commander-fleet .game-block .group {
    width: 660px;
    display: flex;
    flex-wrap: wrap;
}

.commander-fleet .game-block .top span:last-of-type {
    color: rgba(204, 204, 204, 1);
    padding-left: 20px;
}
.commander-fleet .commander-block{
    position: relative;
}
.commander-fleet .commander-block .fleet-btn{
    position: absolute;
    right: 0;
    top: -50px;
}

.commander-fleet .commander-block .fleet-btn .el-button{
    border: 1px solid #C60000;
    background: rgba(198, 0, 0, .3);
    color: #fff;
    font-size: 14px;
    padding: 0;
    line-height: 30px;
    width: 87px;
    border-radius: 30px;
    height: 30px;
}
.commander-fleet .commander-block .fleet-btn .el-button:hover {
    background: rgba(198, 0, 0, 1);
}











.commander-page .form {
    padding: 0 98px 0 0;
}

.commander-page .el-form-item__content {
    width: 688px;
    margin-left: 216px !important;
}

.commander-page .el-form-item__content .input-tips {
    color: #888;
    line-height: 17px;
    font-size: 12px;
    margin-top: 10px;
    /* margin-bottom: 20px; */
}

.commander-page .el-form-item__content .el-checkbox+.input-tips {
    margin-top: 0;
}

.commander-create .btns .submit {
    width: 216px;
}

.commander-page .el-form-item {
    margin-bottom: 20px;
}

.commander-page .el-form-item__label {
    width: 216px !important;
    color: #fff;
    font-size: 18px;
    padding-right: 20px;
    font-weight: bold;
}

.commander-page .el-input__inner {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(26, 82, 154, 1) !important;
    border-radius: 8px;
    font-size: 16px;
    color: #fff;
}

.commander-page .el-input.is-disabled .el-input__inner {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid transparent !important;
    color: #fff;
}

.commander-page .submit {
    width: 334px;
    height: 40px;
    color: #fff;
    background: rgba(26, 82, 154, 1);
    font-size: 14px;
    border-radius: 40px;
    border: 1px solid rgba(26, 82, 154, 1);
    margin: 0 0 0 115px;
    box-sizing: border-box;
    padding: 0;
}

.commander-page .el-form-item:last-of-type {
    margin-bottom: 0;
}

.commander-page .key-val-group {
    display: flex;
    justify-content: space-between;
}

.commander-page .key-val-group p {
    width: 300px;
    line-height: 60px;
    border: 1px solid rgba(26, 82, 154, 1);
    border-radius: 6px;
    display: flex;
    font-size: 16px;
    background: rgba(0, 0, 0, 0.3);
}

.commander-page .key-val-group .key {
    width: 100px;
    background: rgba(26, 82, 154, 0.3);
    color: rgba(0, 186, 255, 1);
    text-align: center;
}

.commander-page .key-val-group .value {
    padding-left: 12px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.commander-page .back {
    line-height: 38px;
    width: 334px;
    display: block;
    margin: 40px auto 0;
    font-size: 14px;
    background: rgba(27, 84, 155, .5);
    text-align: center;
    border-radius: 60px;
    border: 1px solid rgba(27, 84, 155, 1);
    box-sizing: border-box;
}

.commander-page .back:hover {
    background: #1B549B;
}

.commander-competition table tr td:nth-of-type(2) {
    text-align: left;
}

.commander-competition table tr td p {
    line-height: 22px;
}

.commander-competition .inner-block table tr td {
    line-height: 22px;
    vertical-align: top;
    padding-top: 10px;
}

.commander-competition .inner-block table tr:last-of-type td {
    padding-bottom: 10px;
}

.commander-competition .key-val-group {
    margin-top: 20px;
}

.commander-competition .key-val-group .key {
    width: 190px;

}

.commander-competition .key-val-group .value {}

.commander-competition .key-val-group p {
    width: 490px;
}

.commander-create {
    padding-bottom: 180px;
}

.commander-create .commander-block:first-of-type {
    padding: 90px 0;
}

.commander-create .el-form-item__label {
    width: 275px !important;
}

.commander-create .el-form-item__content {
    width: 570px;
    margin-left: 334px !important;
}

.commander-create .btns {
    margin-left: 334px !important;
    display: flex;
    justify-content: left;
}

.commander-create .btns a {
    width: 98px;
    height: 40px;
    color: #fff;
    background: rgba(26, 82, 154, 1);
    font-size: 14px;
    border-radius: 40px;
    border: 0;
    text-align: center;
    line-height: 40px;
}

.commander-create .btns .submit {
    margin-left: 20px;
}

.commander-create .btns .submit.is-disabled {
    background: rgba(26, 82, 154, 1);
    opacity: .8;
}

.commander-team .flex-between {
    display: flex;
    justify-content: center;
    padding-bottom: 100px;
}

.commander-team .item {
    margin-right: 20px;
    width: 480px;
    /* height: 270px; */
    /* background: #000000; */
}

.commander-team .item a {
    display: block;
    /* height: 100%; */
    position: relative;
    padding: 5px;
    font-size: 0;
}

.commander-team .item a:hover {
    background: url(../img/commander-active.png) no-repeat;
    background-size: cover;

}

.commander-team .item a img {
    display: block;
}

.commander-team .item:last-of-type {
    margin-right: 0;
}

.commander-team .team-name {
    text-align: center;
    margin-top: 10px;
    /* margin-bottom: 142px; */
    font-size: 16px;
    line-height: 22px;
}

.commander-team .team-link {
    margin-top: 100px;
}

.el-select {
    width: 100%;
    display: block;
}

.el-checkbox .el-checkbox__label {
    color: #fff;
}

.el-checkbox .el-checkbox__inner {
    background: transparent;
    border: 1px solid rgba(26, 82, 154, 1);
}

.el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
    background: rgba(26, 82, 154, 1);
    color: #fff;
}

.commander-page .el-form-item__content {
    margin-left: 275px !important;
    width: 630px;
}

.commander-intelligence-page .el-input__inner {
    border: 0 !important;
}

.commander-intelligence-page .blue .el-form-item__label,.commander-gift-redemption .blue  .el-form-item__label {
    color: #00BAFF;
    font-size: 14px;
}

.commander-intelligence-page .flex-between {
    display: flex;
    justify-content: space-between;
    align-items: top;
    position: relative;

}

.commander-intelligence-page .commander-block:first-of-type {
    position: relative;
    margin-top: 110px;
}

.commander-intelligence-page .commander-block .el-button {


    color: #fff;
    font-size: 14px;
    padding: 0;
    line-height: 30px;
    width: 87px;
    border-radius: 30px;
    height: 30px;
}

.commander-intelligence-page .commander-block .logout {
    position: absolute;
    top: -50px;
    right: 0;
    border: 1px solid #C60000;
    background: rgba(198, 0, 0, .3);
}

.commander-intelligence-page .commander-block .logout:hover {
    background: rgba(198, 0, 0, 1);
}

.commander-intelligence-page .commander-block .change {
    border: 1px solid rgba(0, 186, 255, 0.5);
    background: transparent;
    /* position: absolute;
    right: -98px; */
}

.commander-intelligence-page .commander-block .change:hover {
    background: rgba(26, 82, 154, 1);
}

.commander-intelligence-page .el-form-item {
    margin-bottom: 10px;
}

.commander-intelligence-page h2 ,.commander-gift-redemption h2{
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 20px;
}

.commander-intelligence-page .commander-block:first-of-type .el-input__inner {
    line-height: 48px;
    height: 48px;
}

.commander-intelligence-page .commander-block:first-of-type .el-form-item__label {
    line-height: 48px;
}

.red-button,
.red-button:hover,
.red-button:active,
.red-button:focus {
    background: rgba(223, 6, 6, 1);
    color: #fff;
    height: 22px;
    width: 44px;
    line-height: 22px;
    padding: 0;
    border: 0;
    font-size: 12px;
}

.mini-button {
    width: 87px;
    height: 30px;
    border: 1px solid rgba(0, 186, 255, 0.16);
    border-radius: 30px;
    padding: 0;
    background: transparent;
    color: #fff;
    display: block;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    box-sizing: border-box;
}

.commander-register .subtitle {
    text-align: center;
    margin-top: 30px;
    line-height: 22px;
    font-size: 16px;
}

.commander-register .commander-block {
    width: 806px;
    height: 383px;
    margin: 140px auto 140px !important;
    padding: 100px 100px 0;
    box-sizing: border-box;

}

.commander-register .el-form-item__content {
    width: 100%;
    margin-left: 0 !important;
    /* display: block; */
}

.commander-register .el-form-item__label {
    text-align: left;
}

.commander-register .form {
    padding-right: 0;
}

.commander-register .el-form--inline .el-form-item {
    margin-right: 0;
}

.commander-register .el-form--inline .el-form-item {
    display: block;
}

.commander-page .el-form .submit {
    width: 334px;
    height: 40px;
    padding: 0;
    line-height: 40px;
    font-size: 14px;
}

.commander-register .el-form .submit {
    margin-top: 40px;
}

.commander-complete-registration .el-form-item {
    margin-bottom: 40px;
}

.commander-complete-registration .subtitle {
    text-align: center;
    margin-top: 30px;
    line-height: 22px;
    font-size: 16px;
}

.commander-complete-registration .el-form-item__label {
    width: 275px !important;
}

.commander-complete-registration .el-form-item__content .input-tips {
    margin-bottom: 0;
}

.commander-complete-registration .commander-block {
    padding-top: 90px;
    padding-bottom: 100px;
}

.commander-complete-registration .el-checkbox {
    display: flex;
    height: 20px;
    margin-bottom: 10px;
}

.el-checkbox__input {
    /* vertical-align:top; */
}

.commander-page .commander-block .block-title {
    font-size: 18px;
    line-height: 25px;
}

.commander-join-fleet .join-input {
    width: 595px;
    margin: 10px auto 20px;
    display: block;

}

.commander-join-fleet .submit {
    margin: 0 auto;
    display: block;
}

.commander-join-fleet .flex-between {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.commander-join-fleet .el-form-item__content {
    margin-left: 0 !important;
    width: auto;
}

.commander-join-fleet .el-form-item {
    flex: 1;
    margin-left: 10px;
}

.commander-join-fleet .el-form-item:first-of-type {
    margin-left: 0;
}

.commander-join-fleet .el-form-item.search {
    width: 396px;
    flex: none;
}

.commander-login {
    padding-bottom: 138px;
}

.commander-create .el-form .submit {
    margin-left: 79px;
}

.commander-create .el-form .el-form-item:last-of-type {
    margin-top: 40px;
}

.commander-fleet-intelligence .recruit-team-block p {
    margin-top: 10px;
}

.commander-fleet-intelligence .recruit-team-block .inner-block {
    padding: 0px;
}

.commander-fleet-intelligence .recruit-team-block .inner-block textarea {
    height: 108px;
}

.commander-fleet-intelligence .bottom-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

.commander-fleet-intelligence .bottom-btns .back {
    width: 98px;
    margin: 0;
}

.commander-fleet-intelligence .bottom-btns .el-button {
    width: 216px;
    height: 40px;
    background: rgba(26, 82, 154, 1);
    color: #fff;
    border: 1px solid rgba(26, 82, 154, 1);
    ;
    border-radius: 40px;
    display: block;
    margin-left: 22px;
    cursor: pointer;
}

.commander-fleet-intelligence .bottom-btns .el-button:hover {
    border: 1px solid #00BAFF80;
}

.page-about {
    background: url(../img/about-bg.jpg) center center no-repeat;
    background-size: cover;
    /* height: 100%;
    width: 100%; */
}

.page-about .content {
    width: 1042px;
    margin: 185px auto 0;
    color: #fff;
    padding-bottom: 225px;
}

.page-about .item {
    position: relative;
    padding-left: 98px;
    padding-top: 56px;
    margin-bottom: 20px;
}

.page-about .item p {
    border: 1px solid #00BAFF29;
    background: rgba(26, 82, 154, .3) 0% 0% no-repeat padding-box;
    backdrop-filter: blur(30px);
    padding: 20px;
    font-size: 18px;
    line-height: 25px;
}

.page-about .item h2 {
    padding: 0 15px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 28px;
    background: rgba(0, 41, 93, 1);
    position: absolute;
    top: 0;
    left: 0;
}

.page-rule {
    padding-bottom: 40px;
}

.page-rule .video-box {
    border: 1px solid rgba(0, 186, 255, 0.5);
}
.page-rule .video-box video{
    width: 100%;
}
.page-rule .content {
    width: 1042px;
    margin: 40px auto 0;
    color: #fff;
}

.page-rule .content .video-box {
    height: 588px;
}

.page-rule .content a {
    display: block;
    line-height: 144px;
    padding: 0 120px;
    font-size: 28px;
    background: url('../img/icon-download.png') rgba(26, 82, 154, .3) 90% center no-repeat padding-box;
    background-size: 22px auto;
    backdrop-filter: blur(30px);
    margin-top: 40px;
}

.commander-complete-registration .el-form-item .rules {
    display: flex;
    align-items: center;
    height: 16px;
    margin-bottom: 10px;
}

.commander-complete-registration .el-form-item .rules .el-checkbox {
    margin-bottom: 0;
    height: 16px;
    margin-right: 10px;
}

.commander-complete-registration .el-form-item .rules span {
    cursor: pointer;
}

.rules-popop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rules-popop .content {

    position: relative;
}

.rules-popop .content .scroll_box {
    color: #c5c5c5;
    width: 6rem;
    height: 3rem;
    overflow-y: scroll;
    padding: 0.32rem;
    box-sizing: border-box;
    background: #000;
}

.rules-popop .content .close {
    position: absolute;
    width: 27px;
    height: 27px;
    border: 0.03rem solid #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    top: -10px;
    right: -10px;
    font-weight: bolder;
    background: #787878;
    font-size: 16px;
    cursor: pointer;
}

.commander-page .el-form-item .agree+.text {
    padding-left: 10px;
    cursor: pointer;
}

.el-input__inner::placeholder,.el-textarea__inner::placeholder {
    color: #888;
}

.commander-page .submit:hover {
    border: 1px solid rgba(0, 186, 255, 0.5);

}

.commander-intelligence-page .mail {
    display: block;
    line-height: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.3);
    padding: 0 15px;
    border-radius: 8px;
    font-size: 16px;
    text-decoration: underline;
}

.el-select .is-disabled .el-input__suffix-inner {
    display: none;
}

.page-rule {
    background: url(../img/guide/bg.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.el-button.is-disabled {
    background: rgba(112, 112, 112, 1) !important;
    border-color: rgba(112, 112, 112, 1) !important;
}

.ranking-list-page .head-block {
    display: flex;
    align-items: center;
}

.ranking-list-page .head-block .item1 {
    width: 334px;
    margin: 0 20px;
}

.ranking-list-page .head-block .item1 {}

.ranking-list-page .head-block .item1 p {
    margin-bottom: 20px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #1A529A;
    line-height: 60px;
    font-size: 16px;
    display: flex;
}

.ranking-list-page .head-block .item1 p span {
    text-align: center;
    flex: 1;
}

.ranking-list-page .head-block .item1 p span:first-of-type {
    width: 130px;
    background: rgba(26, 82, 154, 0.3);
    color: #00BAFF;

}

.ranking-list-page .head-block .item1 p:last-of-type {
    margin-bottom: 0;
}

.ranking-list-page .head-block .item-level {
    width: 294px;
    margin-left: 20px;
    border: 1px solid #1A529A;
    border-radius: 6px;
    height: 200px;
    background: rgba(0, 0, 0, 0.3);
}

.ranking-list-page .head-block .item-level img {
    height: 100px;
    display: block;
    margin: 0 auto;
}

.ranking-list-page .head-block .title {
    line-height: 50px;
    font-size: 16px;
    color: #00BAFF;
    text-align: center;
    background: rgba(26, 82, 154, 0.3);
}

.ranking-list-page .head-block .level {
    font-size: 28px;
    line-height: 40px;
    text-align: center;
}

.ranking-list-page .custom-list li {
    border-radius: 6px;
    background: rgba(0, 0, 0, .3);
    height: 52px;
    margin-top: 5px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.ranking-list-page .custom-list li:first-of-type p{
    justify-content: center;
    padding: 0 10px;
}
.ranking-list-page .custom-list li .no,.ranking-list-page .custom-list li .area{
    justify-content: center;
}
.ranking-list-page .custom-list li p {
    padding: 0 10px;
    font-size: 16px;
    display: flex;
    align-items: center;
    width: 216px;
    padding: 0 20px;
    box-sizing: border-box;
    /* justify-content: center; */

}
.ranking-list-page .custom-list li p:last-of-type{
    width: 250px;
}
.ranking-list-page .custom-list li.list3 .info,.ranking-list-page .custom-list li.list4 .info,.ranking-list-page .custom-list li.list2 .info:last-of-type{
    justify-content: center;
}

.ranking-list-page .custom-list li img {
    height: 40px;
    /* width: 40px; */
    border-radius: 6px;
    margin-right: 20px;
}
.ranking-list-page .custom-list li img.fleet_img{
    margin-right: 10px;
}
.ranking-list-page .custom-list li p:first-of-type {
    width: 98px;
}

.ranking-list-page .custom-list li:first-of-type {
    height: 40px;
    background: rgba(26, 82, 154, .3);
    color: rgba(0, 186, 255, 1);
    border-radius: 4px;
}

.ranking-list-page h2 {
    margin-bottom: 10px;
    font-size: 18px;
}
.commander-fleet-popup{
    min-height: calc(100vh - 135px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.commander-fleet-popup .content {
    margin: 108px auto 60px;
    width: 806px;
    height: 635px;
    background: rgba(26, 82, 154, .16);
    border: 1px solid rgba(0, 186, 255, 0.16);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    text-align: center;
}
.commander-fleet-popup .icon{
    width: 100px;
    margin-top: 75px;
}
.commander-fleet-popup .title{
    padding-top: 20px;
    line-height: 53px;
    font-size: 38px;
    text-align: center;
    color: #fff;
    text-shadow: 0px 0px 10px rgba(0, 186, 255, 0.5);
    font-weight: bold;
}
.commander-fleet-popup .tip1{
    font-size: 18px;
    line-height: 25px;
    color: #00BAFF;
    margin-top: 40px;
}
.commander-fleet-popup .tip2{
    margin-top: 20px;
    font-size: 16px;
    line-height: 22px;
    color: #fff;
}
.commander-fleet-popup .btn{
    line-height: 38px;
    width: 334px;
    display: block;
    margin: 94px auto 0;
    font-size: 14px;
    background: #C60000;
    text-align: center;
    border-radius: 60px;
    border: 1px solid #C60000;
    box-sizing: border-box;
    padding: 0;
    color: #fff;
}
.commander-fleet-popup .btn:hover{
    border: 1px solid #FF0000;
}
.commander-fleet-popup .back{
    color: #fff;
    margin-top: 30px;
}
.card-detail-page{
    background: url(../img/guide/bg.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh;
    padding-bottom: 40px;
}
.card-detail-page  .box {
    background: rgba(26, 82, 154, .16);
    border: 1px solid rgba(0, 186, 255, 0.16);
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    width: 1042px;
    margin: 60px auto 0;
    color: #fff;
}
.card-detail-page  .box .top{
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 10px;
}
.card-detail-page  .box .code{
    font-size: 16px;
    line-height: 22px;
}
.card-detail-page  .box .name{
    font-size: 24px;
    line-height: 33px;
}
.card-detail-page .card-info{
    display: flex;
    margin: 16px 0 0;
    justify-content: space-between;
}
.card-detail-page .card-info .pic{
    width: 396px;

}
.card-detail-page .card-info .pic img{
    box-shadow: 0px 3px 17px rgba(0, 0, 0, 0.75);
}
.card-detail-page .card-info .right{
    flex:1;
}
.card-detail-page .card-info .flex{
    display: flex;
    flex-wrap: wrap;
}
.card-detail-page .card-info .item{
    width: 284px;
    line-height: 24px;
    border-radius: 6px;
    border:1px solid rgba(26, 82, 154, 1);
    display: flex;
    font-size: 16px;
    margin-left: 16px;
    margin-bottom: 16px;
    overflow: hidden;

}
.card-detail-page .card-info .item>span,.card-detail-page .card-info .item strong{
    flex: 1;
    text-align: center;
    padding: 18px 0;
}
.card-detail-page .card-info .item strong{
    background: rgba(0, 0, 0, 0.3);
    padding: 18px 15px;
}
.card-detail-page .card-info .item strong span{
    display: inline-block;
    padding-right: 10px;
}
.card-detail-page .card-info .item>span:first-of-type{
    background: rgba(20, 56, 102, .3);
    color: rgba(0, 186, 255, 1);
    width: 100px;
}
.card-detail-page .card-info .subtitle{
    color: rgba(0, 186, 255, 1);
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 5px;
    margin-left: 16px;
}
.card-detail-page .card-info .subtitle+p{
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 10px;
    margin-left: 16px;
    margin-bottom: 10px;
}
.card-detail-page  .back{
    width: 334px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    color: #fff;
    text-align: center;
    display: block;
    margin: 40px auto 0;
    background: rgba(26, 82, 154, .3);
    border:1px solid rgba(27, 84, 155, 1);
}
.card-detail-page  .back:hover{
    background: rgba(26, 82, 154, 1);
}
.el-input-group--append{
    position: relative;
}
.el-input-group--append .el-input-group__append{
    position: static;
}
.el-input-group--append .el-input-group__append .icon-search{
    position: absolute;
    height: 100%;
    top: 0!important;
    right: 0;
    margin: 0;
}
.el-icon-arrow-left:before{
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-top: 6px solid transparent;
    border-right: 8px solid #409EFF;
    border-bottom: 6px solid transparent;
}
.el-icon-arrow-right:before{
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-top: 6px solid transparent;
    border-left: 8px solid #409EFF;
    border-bottom: 6px solid transparent;
}
.exchange-page{
    background: url(../img/exchange-bg.jpg) center top no-repeat;
    background-size: cover;
    width: 100%;
    height: calc(100vh - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.exchange-page .content{
    width: 718px;
height: 523px;
background: rgba(26, 82, 154, .16);
border-radius: 0px 0px 0px 0px;
opacity: 1;
border: 1px solid rgba(0,186,255,0.16);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
padding-top: 60px;
box-sizing: border-box;

}
.exchange-page .logo{
    width: 192px;
    margin: 0 auto 30px;
    display: block;
}
.exchange-page h1{
    text-align: center;
    font-size: 38px;
    line-height: 54px;
    text-shadow: 0px 0px 10px rgba(0,186,255,0.5);
}
.exchange-page h2{
    text-align: center;
    font-size: 24px;
    font-weight: normal;
    position: relative;
    line-height: 34px;
    margin-top: 20px;
}
.exchange-page h2::before{
    content: "";
    width: 74px;
    height: 14px;
    position: absolute;
    left: 192px;
    top: 10px;
    background: url(../img/exchange-l.png)  no-repeat;
    background-size: cover;
}
.exchange-page h2::after{
    content: "";
    width: 74px;
    height: 14px;
    position: absolute;
    right: 192px;
    top: 10px;
    background: url(../img/exchange-r.png)  no-repeat;
    background-size: cover;
}
.exchange-page .el-form{
    margin-top: 40px;
}
.exchange-page .el-form-item{
    display: flex;
    margin-top: 20px;
    padding-right: 118px;
    align-items: center;
    margin-bottom: 0;
}
.exchange-page .el-form-item__label{
    width: 192px;
    color: #fff;
    font-size: 18px;
    padding-right: 18px;
}
.exchange-page .el-form-item__content{
    flex:1;
}
.exchange-page .el-input__inner{
    background: transparent;
    border: 1px solid #1A529A;
    color:#fff;
    font-size: 16px;
    line-height: 48px;
    height: 48px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .4);
}
.exchange-page .id{
    margin: 0 118px 0 198px;
    line-height: 20px;
    margin-top: 10px;
    font-size: 14px;
}
.exchange-page .el-button{
    width: 334px;
height: 40px;
background: #1A529A;
border-radius: 30px 30px 30px 30px;
margin: 40px 0 0 198px;
display: block;
border: 0;
outline: 0;
font-size: 14px;
color: #fff;
}
.exchange-page .attention{
    text-align: center;
    text-decoration: underline;
    line-height: 20px;
    margin: 10px 0 0 198px;
    font-size: 14px;
    cursor: pointer;
    width: 334px;
}
.exchange-footer{
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    background: #000;
    color: #fff;
   
}
.news-page{
    padding-top: 108px;
    background: url(../img/guide/bg.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh;
    padding-bottom:60px;
}
.news-page .content{
    background: rgba(26, 82, 154, .16);
    border: 1px solid rgba(0, 186, 255, 0.16);
    padding: 30px;
    box-sizing: border-box;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    margin: 0 auto;
    max-width: 1046px;
    color: #fff;
}
.news-page .wrap{
    margin: 0 auto;
    max-width: 1046px;
}
.news-page .content h1{
    font-size: 36px;
    line-height: 50px;
    font-weight: normal;
}
.news-page .content .date{
    margin-top: 5px;
    font-weight: 18px;
    line-height: 25px;
    font-weight: bold;
}
.news-page .content:first-of-type{
    margin-bottom: 20px;
}
.news-page .back{
    line-height: 38px;
    width: 334px;
    display: block;
    margin: 60px auto 0;
    font-size: 14px;
    background: rgba(27, 84, 155, .5);
    text-align: center;
    border-radius: 60px;
    border: 1px solid rgba(27, 84, 155, 1);
    box-sizing: border-box;
    color: #fff;
}
.right-wrap{
    position: absolute;
    width: 3.58rem;    
    position: absolute;
    right: 1.32rem;
    bottom: 1rem;
    z-index: 10;
}
.right-wrap .banner{
    margin-bottom: .2rem;
}
.right-wrap .banner a{
    display: block;
}
.right-wrap .banner img{
    display: block;
    border:1px solid rgba(0, 186, 255, 0.5);
}
.right-wrap .news-box{
    border: 1px solid rgba(0, 186, 255, 0.5);
    background: rgba(26, 82, 154, .3);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    box-shadow: 0px 0px 10px rgba(0,0,0,.3);
    color: #fff;
    padding: .1rem;
    font-size: .16rem;

    height: 2.42rem;
}
.right-wrap .news-box .tabs{
    display: flex;
}
.right-wrap .news-box .tabs span{
    flex:1;
    margin-right: .06rem;
    height: .4rem;
    line-height: .4rem;
    border:1px solid rgba(0, 186, 255, 0.16);
    text-align: center;
    cursor: pointer;
}
.right-wrap .news-box .tabs span.active{
    background: rgba(26, 82, 154, 1);
    border-color: rgba(26, 82, 154, 1)!important;
    font-weight: bold;
}
.right-wrap .news-box .tabs span:hover{
    border:1px solid rgba(0, 186, 255, 0.5);
    background: rgba(26, 82, 154, 1);
}
.right-wrap .news-box .tabs span:last-of-type{
    margin-right: 0;
}
/* .right-wrap .list{
    height: 1.82rem;
    overflow: auto;
} */
/* 自定义整个滚动条 */
.right-wrap .list::-webkit-scrollbar {
    width: 8px; /* 设置滚动条的宽度 */
    border-radius: 8px;
  }
   
  /* 自定义滚动条轨道 */
  .right-wrap .list::-webkit-scrollbar-track {
    background: rgba(26, 82, 154, .7); /* 设置轨道的背景颜色 */
    border-radius: 8px;
  }
   
  /* 自定义滚动条的滑块（thumb） */
  .right-wrap .list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.5); /* 设置滑块的背景颜色 */
    border-radius: 8px;
  }
   
  /* 当滑块悬停或活动时，可以添加更多样式 */
  .right-wrap .list::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.5); /* 设置滑块的背景颜色 */
  }
.right-wrap .list .date {
    margin-bottom: .06rem;
}
.right-wrap .list .date span{
    background: rgba(26, 82, 154, 1);
    line-height: .26rem;
    padding: 0 .12rem;
    display: inline-block;
    font-size: .14rem;
    border-radius: .04rem;
}
.right-wrap .list .content{
    display: flex;
}
.right-wrap .list .content span{
    flex:1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.right-wrap .list .content span:first-of-type{
    width: 40px;
    flex:none;
    color: rgba(0, 186, 255, 1);
    font-weight: bold;
}
.right-wrap .list li{
    margin-top: .12rem;
}
.right-wrap .list li a{
    display: block;
    cursor: pointer;
}
.left-wrap .links{
    display: flex;
    align-items: center;
    margin-left: .18rem;
    margin-top: .08rem;
}
.left-wrap .links a{
    width: .44rem;
    margin: 0 .25rem;
}
.news-page .tabs{
    display: flex;
    margin-bottom: 20px;
}
.news-page .tabs span{
    width: 80px;
    line-height: 40px;
    border: 1px solid rgba(0, 186, 255, 0.5);
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    margin-right: 10px;
    text-align: center;
    cursor: pointer;
}
.news-page .tabs span.active{
    background: rgba(26, 82, 154, 1);
    color: #fff;
    border-color: rgba(26, 82, 154, 1)!important;
    font-weight: bold;
}
.news-page .tabs span:hover{
    border:1px solid rgba(0, 186, 255, 0.5);
    background: rgba(26, 82, 154, 1);
}
.news-page li{
    margin-bottom:10px ;
    border:1px solid transparent;
}
.news-page li a{
    display: flex;
    background: rgba(26, 82, 154, .16);
    padding: 16px;
    align-items: center;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}
.news-page li .show_time{
    background: rgba(26, 82, 154, 1);
    color: #fff;
    line-height: 22px;
    width: 108px;
    text-align: center;
    border-radius: .04rem;
}
.news-page li .title{
    font-size: 28px;
    color: #fff;
    width: 826px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 20px;
    box-sizing: border-box;
    font-weight: bold;
}
.news-page li:hover{
    border:1px solid rgba(0, 186, 255, 0.5);
}
.news-page li .tag{
    font-size: 28px;
    color: rgba(0, 186, 255, 1);
    width: 76px;
    font-weight: bold;
}
.news-page .back:hover{
    background: rgba(27, 84, 155, 1);
}
.commander-reset-password .commander-block{
    /* height: 627px; */
    width: 806px;
    margin: 40px auto 0 !important;
    padding-bottom: 100px;
    height: auto;
}
.commander-reset-password .tip{
    font-size: 12px;
    color: #888888;
    line-height: 17px;
    margin-top: 5px;
}
.commander-reset-password label,.commander-send-mail label{
    font-weight: bold;
}
.commander-reset-password a,.commander-send-mail a{
    line-height: 38px;
    width: 334px;
    display: block;
    margin: 90px auto 0;
    font-size: 14px;
    background: rgba(27, 84, 155, 1);
    text-align: center;
    border-radius: 60px;
    border: 1px solid rgba(27, 84, 155, 1);
    box-sizing: border-box;
    color: #fff;
}
.commander-reset-password a:hover,.commander-send-mail a:hover{
    border:1px solid rgba(0, 186, 255, 0.5);
    background: rgba(26, 82, 154, 1);
}
.pop-exchange{
    background: rgba(0, 0, 0, .5);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pop-exchange .pop-content{
    background: url(../img/pop-exchange-bg.png) no-repeat;
    background-size: cover;
    width: 632px;
    height: 440px;
    color: #fff;
    font-weight: bold;
    position: relative;
}
.pop-exchange .pop-content .title{
    font-size: 30px;
    padding: 14px 0 0 20px;
}
.pop-exchange .pop-content p:nth-of-type(2){
    font-size: 42px;
    text-align: center;
    margin-top: 17px;
}
.pop-exchange .pop-content p:nth-of-type(3){
    font-size: 22px;
    text-align: center;
    margin-top: 30px;
}
.pop-exchange .pop-content img{
    display: block;
    margin: 0 auto;
}
.pop-exchange .pop-content p:nth-of-type(4){
    font-size: 34px;
    text-align: center;
    margin-top: 6px;
    position: absolute;
    width: 290px;
    height: 60px;
    left: 50%;
    margin-left: -150px;
    bottom: 10px;
    line-height: 62px;cursor: pointer;
}
.commander-gift-redemption  .el-textarea__inner{
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(26, 82, 154, 1) !important;
    border-radius: 8px;
    font-size: 16px;
    color: #fff;
    resize: none;
}
.commander-gift-redemption .el-form .el-form-item:last-of-type{
    margin-top: 0;
}
.commander-gift-redemption .confirm-block .el-form-item{
    margin-bottom: 10px;
}
.commander-gift-redemption .confirm-block .tips{
    color: #00BAFF;
    font-size: 18px;
    line-height: 25px;
    width: 710px;
    margin: 40px 0 40px 200px;
}
.commander-gift-redemption .commander-block{
    padding-left: 0;
    padding-top: 90px;
    padding-bottom: 90px;
}
.commander-gift-redemption .commander-block.blue{
    padding-top: 20px;
    padding-bottom: 20px;
}
.commander-gift-redemption h2{
    padding-left: 20px;
}
.commander-gift-redemption .btns{
    position: relative;
}
.commander-gift-redemption .btns .el-button:last-of-type{
    position: absolute;
    right: 118px;
    border: 1px solid rgba(0, 186, 255, 0.16);
    background: transparent;
    width: 98px;
}
.commander-gift-redemption .region{
    display: flex;
}
.commander-gift-redemption .region>div:first-of-type{
    margin-right: 20px;
}
.winning-page .commander-block{
    margin-top: 94px!important;
}
.commander-gift-redemption .el-textarea__inner{
    background: rgba(0, 0, 0, 0.3)!important;
}
.commander-gift-redemption .el-textarea__inner:disabled{
    border-color:rgba(0, 0, 0, 0.3)!important ;
}
.commander-gift-redemption .subtitle{
    text-align: center;
    font-size: 16px;
    margin: 60px 0;
}
.winning-page p span{

    color: #00BAFF;
}
.commander-block-empty{
    padding: 60px 0;
    text-align: center;
    font-size: 16px;
    line-height: 22px;
}
.commander-block-empty img{
    width: 256px;
    margin-bottom: 20px;
}
.winning-page .info{
    display: none;
}
.winning-page .open .info{
    display: block;
}
.old{
    background: url(../img/arrow2.png) rgba(26, 82, 154, .2) 90% 30px no-repeat;
    background-size:20px auto;
    display: block;
    font-size: 28px;
    backdrop-filter: blur(30px);
    margin-top: 10px;
    padding: 24px 120px;
    cursor: pointer;
}
.old p{
    line-height: 32px;
}
.page-rule .old a{
    line-height: 72px;
}
.page-rule .old div{
    display: none;
}
.page-rule .old.open div{
    display: block;
}
.page-rule .old.open{
    background: url(../img/arrow2-down.png) rgba(26, 82, 154, .2) 90% 30px no-repeat;
    background-size:auto 20px ;
}