@keyframes sprite_btn{
    0% { background-image: url(../images/btns2/b1.png); }
    2%  { background-image: url(../images/btns2/b2.png); }
    4%  { background-image: url(../images/btns2/b3.png); }
    6%  { background-image: url(../images/btns2/b4.png); }
    8%  { background-image: url(../images/btns2/b5.png); }
    10% { background-image: url(../images/btns2/b6.png); }
    12% { background-image: url(../images/btns2/b7.png); }
    14% { background-image: url(../images/btns2/b8.png); }
    16% { background-image: url(../images/btns2/b9.png); }
    18% { background-image: url(../images/btns2/b10.png); }
    20% { background-image: url(../images/btns2/b11.png); }
    22% { background-image: url(../images/btns2/b12.png); }
    24% { background-image: url(../images/btns2/b13.png); }
    26% { background-image: url(../images/btns2/b14.png); }
    28% { background-image: url(../images/btns2/b15.png); }
    30% { background-image: url(../images/btns2/b16.png); }
    32% { background-image: url(../images/btns2/b17.png); }
    34% { background-image: url(../images/btns2/b18.png); }
    36% { background-image: url(../images/btns2/b19.png); }
    38% { background-image: url(../images/btns2/b20.png); }
    40% { background-image: url(../images/btns2/b21.png); }
    42% { background-image: url(../images/btns2/b22.png); }
    44% { background-image: url(../images/btns2/b23.png); }
    46% { background-image: url(../images/btns2/b24.png); }
    48% { background-image: url(../images/btns2/b25.png); }
    50% { background-image: url(../images/btns2/b26.png); }
    52% { background-image: url(../images/btns2/b27.png); }
    54% { background-image: url(../images/btns2/b28.png); }
    56% { background-image: url(../images/btns2/b29.png); }
    58% { background-image: url(../images/btns2/b30.png); }
    60% { background-image: url(../images/btns2/b31.png); }
    62% { background-image: url(../images/btns2/b32.png); }
    64% { background-image: url(../images/btns2/b33.png); }
    66% { background-image: url(../images/btns2/b34.png); }
    68% { background-image: url(../images/btns2/b35.png); }
    70% { background-image: url(../images/btns2/b36.png); }
    72% { background-image: url(../images/btns2/b37.png); }
    74% { background-image: url(../images/btns2/b38.png); }
    76% { background-image: url(../images/btns2/b39.png); }
    78% { background-image: url(../images/btns2/b40.png); }
    80% { background-image: url(../images/btns2/b41.png); }
    82% { background-image: url(../images/btns2/b42.png); }
    84% { background-image: url(../images/btns2/b43.png); }
    86% { background-image: url(../images/btns2/b44.png); }
    88% { background-image: url(../images/btns2/b45.png); }
    90% { background-image: url(../images/btns2/b46.png); }
    92% { background-image: url(../images/btns2/b47.png); }
    94% { background-image: url(../images/btns2/b48.png); }
    100% { background-image: url(../images/btns2/b49.png); }
}

#app{
    background: #18202B;
}

.header-wrap{
    background: #18202B;
    width: 100%;
    height: 56px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.header{
    height: 100%;
    width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.header a img{
    width: 215px;
}

.header .navs{
    display: flex;
    align-items: center;
    margin-left: 90px;
}

.header .navs .nav{
    margin-right: 83px;
    cursor: pointer;
}

.header .navs .nav:hover{
    color: #2BBAC6;
}

.header .navs .nav-active{
    color: #2BBAC6;
}

.header .navs .dropdown-nav{
    position: relative;
}

.header .navs .dropdown-nav .dropdown-list{
    position: absolute;
    left: 50%;
    top: 23px;
    transform: translateX(-50%);
    width: 135px;
    height: 0px;
    background: #18202B;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    /* justify-content: center; */
    overflow: hidden;
    transition: height .1s ease-in-out;
    font-size: 16px;
}

.header .navs .dropdown-nav .dropdown-list .dropdown-item{
    margin-bottom: 13px;
    color: #fff;
}

.header .navs .dropdown-nav .dropdown-list .dropdown-item:hover{
    color: #2BBAC6;
}

.header .navs .dropdown-nav:hover  .dropdown-list{
    height: 170px;
}

.header .download-btn{
    position: absolute;
    right: 0;
    width: 280px;
    height: 56px;
    background-image: url(../images/download.png);
    background-repeat: no-repeat;
    background-size: 280px 56px;
}

.header .download-btn:hover{
    /* background-image: url(../images/btns.png); */
    animation: sprite_btn 2s 0s infinite normal;
    /* background-position: 0px -273px ; */
    /* background-size: 3000px 826px; */
}

#home{
    background: #18202B;
    overflow: hidden;
}

.home-container{
    width: 100%;
    max-width: 1920px;
    min-width: 1400px;
    height: 1080px;
    background: url(../images/home/home-bg.jpg);
    background-size: cover;
    margin: 0 auto;
}

.home-container .download{
    padding-top: 745px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-container .download .qrcode-box{
    width: 137px;
    height: 162px;
    background: url(../images/home/code-bg.png);
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 8px;
}

.home-container .download .qrcode-box .downloadmobileqrcode{
    width: 106px;
    height: 106px;
    margin-top: 5px;
}

.home-container .download .items{ 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 162px;
    font-size: 20px;
    margin: 0 11px;
}

.home-container .download .item{
    width: 192px;
    height: 52px;
    background: url(../images/home/item-bg.png);
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.home-container .download .item:hover{
    color: #33E5F1;
}

.home-container .download .item:last-child{
    flex-direction: column;
}

.home-container .download .item:last-child:hover{
    cursor: not-allowed;
}

.home-container .download .item:last-child .t{
    font-size: 14px;
    color: #228CB1;
}

#news{
    background: #18202B;
    overflow: hidden;
    padding-top: 45px;
}

.news-container{
    background: #18202B;
    width: 1400px;
    margin: 0 auto;
}

.news-container .news-title{
    display: flex;
    flex-shrink: 0;
}

.news-container .news-title .tiele{
    position: relative;
    bottom: -14px;
}

.news-container .news-title .news-types{
    flex-grow: 1;
    background-image: url(../images/news/line.png);
    background-repeat: repeat-x;
    background-position: bottom;
    display: flex;
    align-items: end;
    flex-direction: row-reverse;
    padding-bottom: 12px;
}

.news-container .news-title .news-types .new{
    width: 67px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    cursor: pointer;
    margin-left: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.news-container .news-title .news-types .new img{
    padding-top: 3px;
}

.news-container .news-title .news-types .more img{
    width: 16px;
    height: 16px;
    transition: transform .3s ease-in-out;
}

.news-container .news-title .news-types .more:hover img{
    transform: rotate(90deg);
}

.news-container .news-title .news-types .new-active{
    background-image: url(../images/news/type-bg.png);
    background-size: 100% 100%;
    color: #33E5F1;
}

.news-container .news-title .news-types .new:hover{
    background-image: url(../images/news/type-bg.png);
    background-size: 100% 100%;
    color: #33E5F1;
}

.news-container .news-box{
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding-top: 40px;
}

.news-container .news-box .news-list{
    display: flex;
    flex-direction: column;
    width: 540px;
    height: 465px;
}

.news-container .news-box .news-list .new-top{
    color: #13FFFC;
    font-size: 24px;
    font-weight: bold;
    font-family: 'PINGFANG-BOLD';
    background-image: url(../images/news/line.png);
    background-position: bottom;
    background-repeat: no-repeat;
    cursor: pointer;
    padding-bottom: 5px;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出的文本 */
    text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
}

.news-container .news-box .news-list .new-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-image: url(../images/news/line.png);
    background-position: bottom;
    background-repeat: no-repeat;
    height: 70px;
    cursor: pointer;
    font-size: 16px;
    color: #CFE6E6;
    filter: grayscale(100%);
}

.news-container .news-box .news-list .new-item:hover{
    filter: grayscale(0);
}

.news-container .news-box .news-list .new-item .new-type{
    width: 69px;
    height: 26px;
    background-image: url(../images/news/item-bg.png);
    background-size: 100% 100%;
    text-align: center;
    line-height: 26px;
    flex-shrink: 0;
}
.news-container .news-box .news-list .new-item .new-title{
    flex-grow: 1;
    padding: 0 20px;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出的文本 */
    text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
}
.news-container .news-box .news-list .new-item .new-time{
    flex-shrink: 0;
}

.news-swiper{
    margin-left: 23px;
    width: 837px;
    height: 465px;
    background-image: url(../images/news/line.png);
    background-repeat: repeat-x;
    background-position: bottom;
    position: relative;
}

.swiper1{
    width: 837px;
    height: 463px;
}

.swiper1 .swiper-wrapper{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.swiper1 .swiper-slide img{
    width: 100%;
    height: 100%;
}

.swiper1 .swiper-slide .cover{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 184px;
}


.news-swiper .swiper-pagination-bullets {
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);

}

.news-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
    width: 23px;
    height: 5px;
    background-image: url(../images/news/page.png);
    background-size: 100% 100%;
    background-color: transparent;
    filter: grayscale(100%);
    margin-right: 20px;
}

.news-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
    filter: grayscale(0);
}

.news-container .video-title{
    display: flex;
    flex-shrink: 0;
    margin-top: 36px;
}

.news-container .video-title .tiele{
    position: relative;
}

.news-container .video-title .video-types{
    flex-grow: 1;
    /* background-image: url(../images/news/line.png);
    background-repeat: repeat-x;
    background-position: bottom; */
    display: flex;
    align-items: end;
    flex-direction: row-reverse;
}

.news-container .video-title .video-types .video{
    width: 120px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    cursor: pointer;
    margin-left: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.news-container .video-title .video-types .video img{
    padding-top: 3px;
}

.news-container .video-title .video-types .more img{
    width: 16px;
    height: 16px;
    transition: transform .3s ease-in-out;
}

.news-container .video-title .video-types .more:hover img{
    transform: rotate(90deg);
}

.news-container .video-title .video-types .video-active{
    background-image: url(../images/news/video-bg.png);
    background-size: 100% 100%;
    color: #33E5F1;
}

.news-container .video-title .video-types .video:hover{
    background-image: url(../images/news/video-bg.png);
    background-size: 100% 100%;
    color: #33E5F1;
}

.news-container .video-list{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.news-container .video-list .video-item{
    position: relative;
    width: 335px;
    height: 188px;
    cursor: pointer;
}

.news-container .video-list .video-item .cover{
    width: 100%;
    height: 100%;
}

.news-container .video-list .video-item:hover::after{
    width: 100%;
    height: 100%;
    background-color: #000;
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    opacity: 0.5;
}

.news-container .video-list .video-item:hover::before{
    width: 77px;
    height: 67px;
    background-image: url(../images/news/play.png);
    background-size: 100% 100%;
    content: '';
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
}

#weapon{
    background: #18202B;
    overflow: hidden;
    margin-top: 60px;
}

.weapon-container{
    width: 1920px;
    margin: 0 auto;
    position: relative;
}

.weapon-container .weapon-title-box{
    position: absolute;
    width: 100%;
    top: 110px;
    left: 0;
    z-index: 99;
}

.weapon-container .weapon-title{
    width: 1400px;
    margin: 0 auto;
}

.weapon-container .weapon-title{
    display: flex;
    flex-shrink: 0;
}

.weapon-container .weapon-title .tiele{
    position: relative;
    bottom: -14px;
}

.weapon-container .weapon-title .weapon-types{
    flex-grow: 1;
    display: flex;
    align-items: end;
    flex-direction: row-reverse;
    padding-bottom: 12px;
}

.weapon-container .weapon-title .weapon-types .weapon{
    width: 67px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    cursor: pointer;
    margin-left: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.weapon-container .weapon-title .weapon-types .weapon img{
    padding-top: 3px;
}

.weapon-container .weapon-title .weapon-types .weapon-active{
    background-image: url(../images/news/type-bg.png);
    background-size: 100% 100%;
    color: #33E5F1;
}

.weapon-container .weapon-title .weapon-types .weapon:hover{
    background-image: url(../images/news/type-bg.png);
    background-size: 100% 100%;
    color: #33E5F1;
}

.weapon-container .weapon-swiper{
    width: 1920px;
    height: 1080px;
}

.weapon-swiper .swiper2-button-prev::after,
.weapon-swiper .swiper2-button-next::after {
    content: '';
}

.weapon-swiper .swiper2-button-prev {
    top: 50%;
    left: 100px;
    width: 24px;
    height: 62px;
    background: url(../images/weapon/left.png) no-repeat;
    background-position: 0 0;
    background-size: 100% 100%;
    transform: translateY(-50%);
}

.weapon-swiper .swiper2-button-next {
    top: 50%;
    right: 100px;
    width: 24px;
    height: 62px;
    background: url(../images/weapon/right.png) no-repeat;
    background-size: 100% 100%;
    transform: translateY(-50%);
}

.weapon-container .desc-box{
    width: 1400px;
    height: 158px;
    margin: 0 auto;
    position: absolute;
    bottom: 80px;
    left: 80px;
    z-index: 99;
}

.weapon-container .desc-box .desc-list{
    position: relative;
}

.weapon-container .desc-box .desc-item{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 8;
    transition: .5s transform, .5s opacity;
    transform: translate(-100px);
    opacity: 0;
}

.weapon-container .desc-box .desc-item-active{
    z-index: 9;
    transform: translate(0);
    opacity: 1;
}

.weapon-container .desc-box .desc-item .desc-text{
    position: absolute;
    bottom: 0;
    left: 200px;
    min-width: 700px;
}

#feature{
    background: #18202B;
    overflow: hidden;
}

.feature-container{ 
    width: 1920px;
    margin: 0 auto;
    position: relative;
}

.feature-container .feature-swiper{
    width: 1920px;
    height: 1080px;
}

.feature-container .feature-title-box{
    width: 100%;
    position: absolute;
    z-index: 99;
    top: 110px;
}
.feature-container .feature-title{
    display: flex;
    flex-shrink: 0;
    width: 1400px;
    margin: 0 auto;
}

.feature-container .feature-title .tiele{
    position: relative;
    bottom: -14px;
}

.feature-container .desc-box{
    /* width: 1400px; */
    height: 129px;
    margin: 0 auto;
    position: absolute;
    bottom: 172px;
    left: 0px;
    z-index: 99;
}

.feature-container .desc-box .desc-list{
    position: relative;
}

.feature-container .desc-box .desc-item{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 8;
    transition: .5s transform, .5s opacity;
    transform: translate(-100px);
    opacity: 0;
}

.feature-container .desc-box .desc-item img{
    height: 199px;
}

.feature-container .desc-box .desc-item-active{
    z-index: 9;
    transform: translate(0);
    opacity: 1;
}

.feature-container .feature-small-swiper{
    position: absolute;
    right: 13px;
    bottom: 80px;
    width: 1032px;
    height: 169px;
    padding: 0 64px;
}

.feature-small-swiper .swiper4-button-prev::after,
.feature-small-swiper .swiper4-button-next::after {
    content: '';
}

.feature-small-swiper .swiper4-button-prev {
    width: 20px;
    height: 53px;
    background: url(../images/weapon/left.png) no-repeat;
    background-position: 0 0;
    background-size: 100% 100%;
}

.feature-small-swiper .swiper4-button-next {
    width: 20px;
    height: 53px;
    background: url(../images/weapon/right.png) no-repeat;
    background-size: 100% 100%;
}


.feature-small-swiper .swiper-slide{
    opacity: .8;
    cursor: pointer;
}

.feature-small-swiper .swiper-slide::after{
    content: '';
    width: 285px;
    height: 163px;
    background: #000;
    opacity: .5;
    position: absolute;
    left: 7px;
    top: 3px;
    /* left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); */
}

.feature-small-swiper .swiper-slide-active{
    opacity: 1;
}

.feature-small-swiper .swiper-slide-active::after{
    display: none;
}

.swiper4-wrapper .swiper-slide:hover{
    opacity: 1;
}

.swiper4-wrapper .swiper-slide:hover::after{
    display: none;
}

.feature-container .slide-page{
    position: absolute;
    left: 46px;
    top: 288px;
    z-index: 99;
}

.feature-container .slide-page .slide-item{
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 25px;
}

.feature-container .slide-page .slide-item .slide-text{
    width: 261px;
    height: 46px;
    background-image: url(../images/feature/un-bg.png);
    background-size: 100% 100%;
    text-align: center;
    line-height: 46px;
    color: #89A7B3;
    margin-left: 23px;
}

.feature-container .slide-page .slide-item .slide-text-active{
    background-image: url(../images/feature/bg.png);
    background-size: 100% 100%;
    color: #13FFFC;
}

.feature-container .slide-page .dlide-divider{
    position: absolute;
    width: 6px;
    height: 360px;
    background-image: url(../images/feature/divider.png);
    background-size: 100% 100%;
    left: 70px;
    top: -10px;
}

.follow{
    background: #13FFFC;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    color: #000;
    /* overflow-x: hidden; */
}

.follow a{
    height: 50px;
    margin-right: 19px;
    overflow: hidden;
}

.follow a img{
    height: 100%;
}

.follow .wechat{
    position: relative;
    cursor: pointer;
    margin-right: 19px;
}

.follow .wechat .code-img{
    display: none;
    width: 97px;
    /* height: 315px; */
    position: absolute;
    z-index: 99;
    left: 50%;
    top: -100px;
    transform: translateX(-50%);
}

.follow .wechat:hover .code-img{
    display: inline-block;
}