.m-nav{
    height: 1.58rem;
    background: var(--web-color1);
    position: fixed;
    z-index: 30;
    box-shadow: 0px 0px .2rem 0px rgba(0,0,0,0.2);
    display: none;
}
.m-nav .logo{
    height: .63rem;
}


#h_nav{ height:.62rem; width:.62rem; position:absolute; top:50%; margin-top: -.3rem; right:.74rem; cursor:pointer; }
#h_nav .hn_x,.hn_x:before,
#h_nav .hn_x:after{ position:absolute;left:0; width:100%; height:.05rem; padding:0; font-size:1px; display:block; background:var(--web-color7);-webkit-transition:all .5s;-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;}
#h_nav .hn_x:before{content:"";top:-.2rem;}
#h_nav .hn_x:after,.hn_x{content:"";top:.2rem;}
#h_nav.nav_exit .hn_x{background:transparent;}
#h_nav.nav_exit .hn_x:before{top:0;-webkit-transform:rotate(45deg);transform:rotate(45deg);}
#h_nav.nav_exit .hn_x:after{top:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}

.m-nav-menu{
    height: calc(100vh - 1.58rem);
    background-color: var(--web-color1);
    top: 1.56rem;
    z-index: 2;
    display: none;
}
.m-nav-menu > div{
    padding-bottom: .58rem;
}
.m-nav-menu > div ul{
    overflow-y: auto;
}
.m-nav-menu > div ul::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.m-nav-menu > div ul{
    scrollbar-width: none; 
}
.m-nav-menu > div ul .tab-list a{
    background: #F4F4F4 !important;
}

@media (max-width: 1080px){
    html::-webkit-scrollbar{
        width: 0;
        height: 0;
    }
    html{
        scrollbar-width: none; 
    }
    :root{
        --web-size-h1:.68rem;
        --web-size-h2:.52rem;
        --web-size-h3:.5rem;
        --web-size-h4:.46rem;
        --web-size-h5:.48rem;
        --web-size-h6:.58rem;
        --web-size-max:.44rem;
        --web-size:.4rem;
        --web-size-small:.36rem;
        --web-size-min:.32rem;
        --web-color2:#F4F4F4;
        --web-color8:#919191;
    }
    .m-banner{
        justify-content: center;
        height: 4.32rem !important;
    }
    .m-banner img,
    .banner-swiper img{
        height: 100%;
        width: auto !important;
    }
    .m-banner .swiper-slide,
    .banner-swiper .swiper-slide{
        overflow: hidden;
        justify-content: center !important;
    }
    .pd-c{
        padding-left: .48rem!important;
        padding-right: .48rem!important;
    }
    .reverse{
        flex-direction: column-reverse !important;
    }
    .m-block{
        display: flex !important;
    }
    .b-more,.button{
        width: 4.46rem;
        height: .98rem;
        max-width: 4.46rem;
        max-height: .98rem;
        min-width: 4.46rem;
        min-height: .98rem;
        background: var(--web-color1) !important;
        border-radius: .12rem;
        border: .03rem solid var(--web-color4);
        font-size: .43rem;
        font-weight: 400;
        color: var(--web-color4);
        box-shadow: none !important;
    }
    .main-container .main-container-box:nth-child(even) .b-more,
    .b-more2,.button{
        border: .03rem solid var(--web-color3);
        color: var(--web-color3);
    }
    .b-more3{
        color: var(--web-color1);
        background: var(--web-color4) !important;
    }
       
    #web-main{
        padding-top: 1.58rem;
        background-color: var(--web-color2);
    }
    .pc-nav,
    .banner-swiper .swiper-button{
        display: none;
    }
    .m-nav{
        display: block;
    }
    .banner-swiper{
        height: 5.76rem;
    }
    .swiper-pagination .swiper-pagination-bullet{
        width: .72rem;
        min-width: auto;
        max-width: auto;
        height: .12rem;
        max-height: auto;
        min-height: auto;
        margin: 0 .07rem;
        background: #D3D3D3;
    }
    .banner-text .b-more{
        display: none;
    }
    .banner-text p{
        line-height: .36rem;
        font-size: .28rem;
    }
    .banner-text.type2 h1{
        line-height: .86rem;
        font-size: .58rem;
    }
    .banner-text.type1{
        height: 100%;
        width: 4.52rem;
        text-align: left;
        justify-content: center;
        padding-top: 0;
    }
    .banner-text.type2{
        color: var(--web-color1);
        width: 100%;
    }
    .banner-text.type1 p{
        height: auto;
        margin: .5rem 0 0;
        
    }
    .banner-text.type2 p{
        font-size: .4rem;
       margin: .46rem 0 .1rem;
    }
 
    .main-web-nav{
        flex-wrap: wrap;
        justify-content: space-between;
        margin: .58rem 0 .88rem;
    }
    .main-web-nav a{
        padding:.35rem 0;
        margin-bottom: .28rem;
        width: 4.78rem;
        min-height: 2.56rem;
        font-size: .3rem;
        justify-content: flex-start;
        font-weight: bold;
    }
    .main-web-nav a i{
        width: 2.16rem;
        min-width: 2.16rem;
        padding: 0;
        margin:.14rem auto .3rem;
    }
    .main-container .main-container-box{
        padding: 0;
        margin-bottom: .58rem;
    }
    .main-container-box .title{
        margin: .2rem 0 .68rem 0;
        line-height: .58rem;
    }

    .main-container-box .main-box-item{
        flex-direction: column;
        background-color: var(--web-color1) !important;
        padding-bottom: 1.15rem;
        box-shadow: 0px 0px .2rem 0px rgba(0,0,0,0.1);
        border-radius: .14rem; 
        overflow: hidden;       
    }
    .main-container-box .main-box-item  >div{
        padding:0 .48rem;
    }
    .main-container-box .main-box-item h3{
        line-height: .7rem;
        padding: .62rem 0 0;
    }
    .main-container-box .main-box-item div >p, 
    .main-container-box .main-box-item label{
        line-height: .58rem;
        margin:.54rem 0 .8rem 0 !important;
        min-height: auto;
        font-size: .4rem;
        color: var(--web-color8);
    }
    .main-container-box .main-box-item i{
        width: 100%;
        min-width: 100%;
        margin: 0 !important;
        border-radius: 0;
    }
    .main-container-box .main-box-item .b-more{
        margin: 0 auto;
    }
    .main-container-box.video{
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .Why-Riotouch{
        padding: 0 0 .85rem 0;
    }
    .Why-Riotouch > p{
        font-weight: 400;
        font-size: .4rem;
        color: #222629;
        line-height: .58rem;
    }
    .Why-Riotouch .button{
        margin: .86rem 0 !important;
    }
    .Why-Riotouch  .main-box-nav{
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .Why-Riotouch  .main-box-nav a{
        width: 4.78rem;
        height: 4.49rem;
        margin-bottom: .30rem;
        padding: .56rem .15rem 0;
        min-height: auto;
    }
    .Why-Riotouch  .main-box-nav a img{
        height: 1.17rem;
        width: 1.17rem;
    }
    .Why-Riotouch  .main-box-nav a p{
        margin: .4rem 0;
        font-size: .32rem;
    }
    .Why-Riotouch  .main-box-nav a span{
        font-weight: 400;
        font-size: .26rem;
        color: #919191;
        line-height: .35rem;
    }

    /**blogs-page*/

    .blogs-page,.content-page{
        
        background: var(--web-color1) !important;
    }
    .blogs-box{
        padding: 1.15rem 0;
    }
    .blogs-box .back{
        display: none;
    }
    .blogs-box h6{
        font-size: .52rem;
        line-height: .58rem;
    }
    .blogs-box .time{
        margin: .3rem 0 .72rem 0;
        font-size: .37rem;
    }
    .blogs-box .blogs-wp{
        font-size: var(--web-size-min);
        color: var(--web-color8);
    }
    .blogs-box .blogs-wp img{
        max-width: 100%;
    }
    .blogs-box .blogs-wp img,
    .blogs-box .blogs-wp p{
        margin-bottom: .5rem;
        line-height: .5rem;
    }
    .blogs-list{
        padding: 0 0 1.15rem 0;
        background-color: var(--web-color2);
    }
    .blogs-list .blogs-item{
        width: 100%;
        padding-bottom: 1.15rem;
        height: auto;
        overflow: hidden;
        font-size: .5rem;
        margin:.58rem 0 0 0;
        background: #FFFFFF;
        box-shadow: 0px 0px .2rem 0px rgba(0,0,0,0.1);
        border-radius: .14rem;
    }
    
    .blogs-list .blogs-item i{
        width: 100%;
        height: auto;
        overflow: hidden;
        max-height: 4.85rem;
    }
    .blogs-list .blogs-item  p{
        font-size: .5rem;
        line-height: .62rem;
        margin: .68rem 0;
        max-height: 1.2rem;

    }
    .blogs-list .blogs-item span{
        line-height: 1;
        font-size: .37rem;
        color: var(--web-color8);
        display: flex;
        align-items: end;

    }
    .blogs-list .blogs-item  p,
    .blogs-list .blogs-item label{
        padding:0 .45rem;
    }
    
    /**content-page*/
    .content-box{
        padding: 1.15rem 0;
    }
    .content-page h1{
        font-size: .52rem;
        line-height: .62rem;
    }
    .content-box .content-wp{
        padding-top: .72rem;
    }
    .content-box .content-wp p{
        font-size: .35rem;
        line-height: .52rem;
        margin-bottom: .52rem;
    }

    /* about-box*/
    .about-box,.about-list-box {
        font-size: var(--web-size-small); 
        padding: 1.15rem 0;
        background-color: var(--web-color1);
        margin-bottom: .58rem;
    }
    .about-list-box {
        padding: 1.15rem 0 0 0; 
    }
    .about-box h2,
    .about-list-box h2{
        margin:0 0 .72rem 0;
    }
    .about-box .about-wp p{
        margin: 0 0 .5rem 0;
        font-size: .32rem;
        color: var(--web-color8);
        line-height: .5rem;
    }
    .about-box .about-wp .about-img{
        margin: .18rem 0 0;
        border-top-left-radius: .96rem;
        border-bottom-right-radius:.96rem;
        width: 100%;
    }
    .about-list{
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .about-list a{
        width: 4.8rem;
        box-shadow: none;
        margin-bottom: 1.15rem;
    }
    .about-list a i{
        height: 3.74rem;
    }
    .about-list a p{
        height: .84rem;
        line-height: .84rem;
        padding: 0 .2rem; 
    }
    .about-list a dd{
        margin: 0 auto;
    }
    .about-world{
        background-color:var(--web-color2);
        padding: .57rem 0 1.15rem;
    }
    .about-world-list{
        margin: .57rem 0 .72rem;
        height: auto;
        background: none;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .about-world-list >div{
        width: 4.87rem;
        height: 2.44rem;
        padding: 0 .12rem;
        background-color: var(--web-color1);
        justify-content: flex-start;
        font-size: .3rem;
        margin-bottom: .14rem;
    }
    .about-world-list >div::after{
        width: 0;
    }
    .about-world-list >div label{
        flex: 1;
    }
    .about-world-list >div img{
        margin:0 .12rem 0 .6rem;
        width: .72rem;
        max-width: .72rem;
        min-width: .72rem;
    }
    .about-world-list >div h6{
        margin-bottom: .2rem;
        font-size: .5rem;
    }
    .about-world-list >div p{
        display: flex;
        justify-content: center;
        align-items: center;
        height: .64rem;
    }

    /* */
    .download-box{
        padding: .58rem 0;
        min-height: 8rem;
        flex-direction: column;
    }
    .download-left-nav{
        width: 100%;
        margin-right: 0;
    }
    .download-nav{
        position: relative !important;
        top: 0 !important;
        width:100%;
        border-right: none;
    }
    .download-nav ul{
        border-bottom: none;
        margin-bottom: 0;
        flex-wrap: wrap;
        flex-direction: initial;
        justify-content: space-between;
    }
    .download-nav ul:last-child{
        border: none;
        margin-bottom: 0;
    }
    .download-nav ul label{
        display: none;
    }
    .download-nav ul a{
        background-color: var(--web-color1);
        width: 4.87rem;
        height: 1.15rem;
        line-height: 1.15rem;
        font-size: .35rem;
        color: #919191;
        margin: 0 0 .14rem;
        padding:0;
        position:relative;
        text-align: center;
        font-weight: bold;
    }
    .download-nav ul:last-child a{
        width: 100%;
    }
    .download-nav ul a span{
        display: inline;
        font-weight: bold;
        padding-right: .1rem;
    }
    .download-nav ul a.active::after{
        width: 0;
    }
    .download-nav ul a.active{
        background-color: var(--web-color4);
        color: var(--web-color1);
    }
    .download-list .download-title{
        display: none;
    }
    .download-list .b-more{
        margin: .14rem auto .57rem;
    }
    
    .download-list ul{
        padding-bottom: 3vw;
    }
    .download-list ul a{
        width: 100%;
        margin: .44rem 0 .14rem 0;
        height: auto;
        background-color: var(--web-color1);
    }
    .download-list ul a i{
        height: 5.33rem;
        overflow: hidden;
        background-color: var(--web-color);
    }
    .download-list ul a i img{
        max-width: 100%;
        width: 100%;
    }
    .download-list ul.video-ul a i::after{
        width: 1.71rem;
        height: 1.73rem;
        max-width: 1.71rem;
        max-height: 1.73rem;
    }
    .download-list ul.download-ul a i::after{
        width: 0;
        display: none;
    }

    .download-list ul a p{
        line-height: 1.48rem;
        padding: 0 .15rem;
        font-size: .32rem;
    }
    .download-list-item{
        display: none;
    }
    .download-list-item.active{
        display: flex;
    }
    .download-list ul.download-ul a .b-more{
        border-radius: .49rem;
        position: relative;
        width: 4.46rem;
        font-size: .37rem;
        margin:  .12rem auto .72rem;
        
    }
    .download-list ul.download-ul a .b-more img{
        width: .46rem;
        position: absolute;
        right: .29rem;
        top: .26rem;
        padding: 0;
    }
    .detail-item-4,.detail-item-2,.detail-item2{
        margin-bottom: .58rem !important;
        background-color: var(--web-color1);
    }
    .detail-item2 .detail-item-img i{
        width: 4.8rem;
        height: 3.74rem;
    }
    .detail-item p{
        font-size: .32rem;
        color: var(--web-color8);
        line-height: .5rem;
    }
    .detail-item h2, .detail-item p{
        padding-bottom: .72rem;
    }
    .m-banner + .detail-item-text,
    .main-container .detail-item-text:nth-child(1){
        margin-top: .58rem;
    }

    .detail-item-3{
        padding: .58rem 0 1.15rem;
    }
    .detail-item-3 ul{
        margin-top: 0;
        flex-direction: column;
    }
    .detail-item-3 ul li{
        margin-bottom: .58rem;
        width: 100%;
        margin-right:0;
        background-color: var(--web-color1);
    }
    .detail-item-3 ul li:last-child{
        margin-bottom: 0;
    }
    .detail-item-3 ul li i{
        background-color: var(--web-color);
        width: 7.5rem;
        height: 4.76rem;
        margin: .58rem 0 0;
    }
    .detail-item-3 ul li i img{
        max-width: 100%;
    }
    .detail-item-3 ul li p{
        font-size: .32rem;
        line-height: .5rem;
        color: var(--web-color);
        margin: .2rem 0 .58rem 0;
        padding: 0 .2rem;
    }
    .detail-item-3 ul li a{
        color: var(--web-color4);
        width: 4.46rem;
        height: .98rem;
        min-width: 4.46rem;
        min-height: .98rem;
        background: #FFFFFF;
        border-radius: .49rem;
        border: .03rem solid var(--web-color4);
        margin-bottom: .72rem;
    }
    .detail-item-4 .web-button{
        border-radius: .49rem;
        border: .03rem solid var(--web-color4);
    }
    .detail-item-4 .b-more{
        background-color: var(--web-color4) !important;
        color: var(--web-color1) !important;
    }
    .detail-item-4 .button{
        background-color: var(--web-color1) !important;
        color: var(--web-color4) !important;
    }

    .detail-swiper{
        padding: .58rem 0 1.15rem;
        height: auto;
        overflow: hidden;
    }
    .detail-swiper .swiper-container{
        margin-top: .72rem;
        height: 6.94rem;
        background-color: var(--web-color1);
    }
    .detail-swiper .swiper-slide {
        text-align: center;
        font-size: var(--web-size-small);
        height: 100%;
        width: 100% !important;
    }
    .detail-swiper .swiper-slide label{
        padding: .58rem 0 .3rem;
        width: 7.5rem;
        height: 4.76rem;
        overflow: hidden;
        cursor: pointer;
        margin: 0 auto;
    }
    .detail-swiper .swiper-slide p{
        font-size: .32rem;
    }
    .detail-swiper .swiper-pagination{
        bottom: .58rem !important;
    }
}