#app{
    background: black;
    display: flex;
    flex-direction: column;
    position: relative;
}

.header{
    background: #18202B;
    height: .8rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: .28rem;
    padding-right: .1rem;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
}

.header .logo{
    height: .32rem;
}

.header .download{
    height: .55rem;
    display: flex;
}

.header .download img{
    height: .55rem;
}

.page-one{
    background: #13202C;
    background-image: url(../images/bg.jpg);
    background-size: 100%;
    background-position: top;
    background-repeat: no-repeat;
    width: 100%;
    /* height: 10000px; */
    padding-top: 4.49rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.page-one .a12{
    position: absolute;
    right: .3rem;
    top: 1.02rem;
    width: .43rem;
    height: .55rem;
}

.page-one .sologon{
    width: 5.29rem;
    height: 1.02rem;
    position: relative;
    left: -0.09rem;
}

.page-one .download2{
    margin-top: .6rem;
}

.page-one .download2 img{
    width: 3.09rem;
    height: 1.27rem;
}

.page-one .title1{
    /* margin-top: .2rem; */
    width: 2.4rem;
}

.page-one .news-types{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: center;
    margin-top: .3rem;
    margin-bottom: .15rem;
    font-size: .28rem;
}

.page-one .news-types .new{
    width: .9rem;
    height: .39rem;
    text-align: center;
    line-height: .39rem;
    margin-right: .2rem;
}

.page-one .news-types .more{ 
    font-size: .2rem;
}

.page-one .news-types .more img{
    width: .14rem;
    height: .14rem;
}

.page-one .news-types .new:first-child{
    margin-right: 0;
}

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

.page-one .tag-1{
    align-self: self-start;
    position: relative;
    left: 0.6rem;
    top: .07rem;
}

.page-one .line{
    width: 5.92rem;
    height: .01rem;
}


.news-swiper{
    width: 6.04rem;
    height: 3.33rem;
    position: relative;
    margin-top: .18rem;
}

.swiper1{
    width: 6.04rem;
    height: 3.33rem;
}

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

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


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

}

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

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

.page-one .news-list{
    display: flex;
    flex-direction: column;
    width: 5.96rem;
    margin-top: .5rem;
    /* height: 465px; */
}

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

.page-one .news-list .new-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-image: url(../images/line.png);
    background-position: bottom;
    background-repeat: repeat-x;
    height: .52rem;
    cursor: pointer;
    font-size: .22rem;
    color: #CFE6E6;
    filter: grayscale(100%);
}

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

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


.page-one .title2{
    margin-top: .6rem;
    width: 2.4rem;
}

.page-one .video-types{
    flex-grow: 1;
    display: flex;
    align-items: end;
    flex-direction: row-reverse;
    margin-top: .32rem;
    margin-bottom: .13rem;
    font-size: .28rem;
}

.page-one .video-types .video{
    width: 1.64rem;
    height: .39rem;
    text-align: center;
    line-height: .36rem;
    cursor: pointer;
    /* margin-left: .50rem; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.page-one .video-types .video img{
    padding-top: 3px;
}

.page-one .video-types .more{ 
    font-size: .2rem;
}

.page-one .video-types .more img{
    width: .14rem;
    height: .14rem;
}

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

.page-one .video-types .video:hover{
    color: #33E5F1;
}

.page-one .video-list{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 5.9rem;
    margin: .2rem auto 0;
}

.page-one .video-list .video-item{
    position: relative;
    width: 2.78rem;
    height: 1.56rem;
    cursor: pointer;
    margin-bottom: .18rem;
}

.page-one .video-list .video-item .cover{
    width: 100%;
    height: 100%;
}

.page-one .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;
}

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

.page-one .title3{
    margin-top: .8rem;
    width: 2.4rem;
}

.page-one .weapon-types{
    flex-grow: 1;
    display: flex;
    align-items: end;
    flex-direction: row-reverse;
    padding-bottom: 12px;
    font-size: .28rem;
    margin-top: .32rem;
}

.page-one .weapon-types .weapon{
    width: .9rem;
    height: .39rem;
    text-align: center;
    line-height: .39rem;
    margin-right: .2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-one .weapon-types .weapon:first-child{
    margin-right: 0;
}

.page-one .weapon-types .weapon img{
    padding-top: .03px;
}

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

.page-one .weapon-types .weapon:hover{
    color: #33E5F1;
}

.weapon-box{
    position: relative;
}

.weapon-box .weapon-swiper{
    width: 7.5rem;
    height: 4.22rem;
}

.weapon-box .weapon-swiper .swiper2{
    width: 7.5rem;
    height: 4.22rem;
}

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

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

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

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

.weapon-box{
    margin-top: .16rem;
}

.weapon-box .desc-box{
    width: 6.2rem;
    margin: 0 auto;
    position: absolute;
    top: 3.73rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
}

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

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

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

.weapon-box .desc-box .desc-item .desc-img{
    width: 6.2rem;
    height: .49rem;
}

.weapon-box .desc-box .desc-item .desc-text{
    font-size: .2rem;
}

.page-one .title4{
    margin-top: 1.6rem;
    width: 2.4rem;
}


.feature-box .feature-swiper{
    width: 7.5rem;
    height: 4.22rem;
}

.feature-box .feature-swiper .swiper3{
    width: 7.5rem;
    height: 4.22rem;
}

.feature-box .feature-swiper .swiper-slide{
    position: relative;
}

.feature-box .feature-swiper .swiper-slide img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 6.2rem;
    height: 3.48rem;
}

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

.feature-swiper .swiper3-button-prev {
    top: 50%;
    left: .3rem;
    width: .19rem;
    height: .4rem;
    background: url(../images/left.png) no-repeat;
    background-position: 0 0;
    background-size: 100% 100%;
    transform: translateY(-50%);
}

.feature-swiper .swiper3-button-next {
    top: 50%;
    right: .3rem;
    width: .19rem;
    height: .4rem;
    background: url(../images/right.png) no-repeat;
    background-size: 100% 100%;
    transform: translateY(-50%);
}

.feature-box .page{
    display: flex;
    justify-content: center;
    margin-top: -.15rem;
    margin-bottom: .5rem;
}


.follow{
    width: 7.5rem;
    height: .62rem;
    background-image: url(../images/follow-bg.png);
    background-size: 100% 100%;
    padding-left: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.follow a{
    height: .40rem;
    margin-right: .19rem;
    overflow: hidden;
}

.follow a img,.follow .wechat img{
    height: 100%;
}

.follow .wechat{
    position: relative;
    cursor: pointer;
    height: .40rem;
    margin-right: .19rem;
}

.code-img{
    width: 3rem;
}

.el-dialog__header{
    background: transparent;
    height: 0;
    padding: 0;
}

.el-dialog__body{
    background: transparent;
    height: 0;
    padding: 0;
}