@media screen and (min-width:320px) and (max-width:1024px) {
    .wrap {
        width: 92%;
    }

    .header,
    .banner {
        display: none;
    }

    .phoneheader {
        padding: 0 0.3rem;
        height: 1.2rem;
        line-height: 1.2rem;
        display: block;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 9999;
        background: #fff;
        box-shadow: 0 0 4px #a1a0a0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .phoneheader .fr img {
        width: 0.5rem;
        margin-left: 0.2rem;
    }

    .phoneheader .fl img {
        height: .8rem;
    }

    .phoneheader .fr {
        position: absolute;
        right: 0.3rem;
    }


    .phonebanner {
        display: block;
        margin-top: 1.2rem;
    }

    .phonebanner img {
        width: 100%;
    }


    .phonebanner .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        background: #FFFFFF;
        opacity: 0.5;
        border-radius: 50%;
        margin: 0 5px !important;
    }

    .phonebanner .swiper-pagination-bullet-active {
        width: 20px;
        height: 6px;
        background: #FFFFFF;
        border-radius: 3px;
        opacity: 1;
    }

    .mobile-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        z-index: 99999;
    }

    .mobile_nav {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: 70%;
        height: 100%;
        background: #fff;
        padding: 1rem 0.12rem;
        overflow-y: scroll;
    }

    .mobile_nav .del {
        position: absolute;
        right: .2rem;
        top: .2rem;
    }

    .mobile_nav>ul>li {
        border-bottom: 1px solid rgba(238, 238, 238, 1);
        position: relative;
        line-height: .8rem;
        text-align: left;
        padding-left: 0.3rem;
    }

    .mobile_nav>ul>li>a {
        font-size: .32rem;
        display: block;
        width: 100%;
    }

    .mobile-container .sub li {
        padding-left: 0.1rem;
        line-height: .6rem;
    }

    .mobile-container .sub li a {
        font-size: .28rem;
    }

    .mobile-container li .sub,
    .mobile-container li .three {
        display: none;
    }
    
    .mobile_nav>ul>li{
        background:url(../images/xl2.png) no-repeat right .2rem top .3rem;
    }
    .mobile_nav>ul>li:nth-of-type(5),.mobile_nav>ul>li:nth-of-type(8){
        background:none;
    }
    
    /* 间距 */
    
    .indexbox1,.indexbox2,.indexbox3,.indexbox4,.indexbox5,
    .footer,.detail,.contact,.indexbox6{
        padding:.5rem 0 .7rem;
    }
    
    .news .fr{
        margin:.4rem 0 0;
    }
    
    .indexbox1 .text,.indexbox2 .content,.section5 .titles{
        margin:.3rem 0;
    }
    .section5 .top img{
        margin:.2rem 0;
    }
    .indexbox2 .content div.fl{
        margin:0 0 .3rem;
    }
    .copy{
        padding:.2rem;
    }
    .news .fr .join li{
        padding:.3rem 0;
    }
    
    .indexbox2 .content .fr .box{
        padding:.3rem;
    }
    .indexbox2 .content .fr ul{
        padding:0;
        border:none;
    }
    
    .indexbox2 .content .fl .box{
        padding:.3rem .3rem .5rem;
    }
    .section3 .commonitem{
        padding:0;
    }
    
    .commonitem >a>img{
        width:.6rem;
        margin-top:-1.5rem;
    }
    
    /* 字体 */
    .footer dt{
        background: url(../images/xl.png) no-repeat right center/20px;
        margin:0;
    }
    .footer dl.active dt{
        background: url(../images/xl3.png) no-repeat right center/20px;
    }
    .footer dd{
        display: none;
    }
    .footer dl.active dd{
        display: block;
    }
    .news .fr .join li .title,.indexbox6 h2,
    .footer dt, .footer .fr .info span,.news .list li a div .title,
    .indexbox2 .content .fr li span.fl,.section4 .navs a,.section5 li .title,
    .indexbox2 .content .fl .box .title, .section3 li a>div .title, .news .fr .cg li div .title,
    .indexbox1 .text p:first-of-type,.indexbox2 .content .fl .box span, .section3 li a>div span, .news .fr .cg li div span{
        
        font-size:.28rem;
         line-height:.45rem;
         min-height:.45rem;
    }
    .contact .info li p{
        font-size:.24rem;
        margin-top:.1rem;
    }
    .section5 li .font,.footer dd a, .footer .fr .info p,.copy,
    .news .list li a div .font,.news .fr .join li .con,
    .indexbox1 .text p,.indexbox2 .content .fr li span.fr,.section4 .box p,.section5 .top p,
    .indexbox2 .content .fl .box .font, .section3 li a>div .font, .news .fr .cg li div .font{
        font-size:.24rem;
        line-height:.4rem;
        height:auto;
    }
    .news .fl li a{
        font-size:.24rem;
        padding:0 .2rem;
    }
    .news .list li a div span,.indexbox6 h3{
        font-size:.24rem;
    }
    .news .list li a img{
        height:1.5rem;
    }
    .news .list li a div .font{
        height:.8rem;
        overflow: hidden;
        margin:.2rem 0;
    }
    .news .list li{
        padding:.25rem 0;
    }
    .news .fl li.active{
        background:none;
        border-bottom:1px solid #0051A3;
    }
    .news .fl li.active a{
        color:#0051A3;
    }
    .news .fl li{
        border:none;
    }
    
    .indexbox2 .content .fl h2, .indexbox2 .content .fr h2,
    .detail>h2{
        font-size:.34rem;
    }
    
    .news .fr .cg li div .font{
        height:.8rem;
        overflow: hidden;
    }
    .news .fr .cg li a{
        align-items: center;
    }
    
    
    
    /* 大小 */
    .footer dl{
        width:100%;
        margin:0 0 .3rem 0;
    }
    .indexbox2 .content .fl,.indexbox2 .content div.fr,
    .section5 .top p,.section5 .top img,.link .fl, .link .fr,
    .footer .fl,.news .fl,.news .fr,.link .img{
        width:100%
    }
    .indexbox2 .content .fl .box, .indexbox2 .content .fr .box{
        height:auto;
    }
    .section5 li{
        width:100%;
        margin:0 0 .4rem 0;
    }
    .link .fl{
            border: 2px solid #375CB4;
            
            display: block;
    }
    .link .fl .title{
        margin:0;
        text-align: center;
    }
    .link .fl, .link .fr{
        height:auto;
        padding:.3rem;
    }
   
   .indexbox2 .content .fr li{
       height:.55rem;
       line-height:.55rem;
   }
    
    
    
    /* 布局 */
    .contact .map img, .contact .map{
        height:5rem;
    }
    .contact .info li{
        width:100%;
        margin:0 auto .3rem;
        padding:.4rem .2rem 0;
        height:2.2rem;
    }
    .contact .info li i img{
        max-height:85%;
    }
    .contact .info ul{
        display: block;
    }
    .hz li{
        width:30%;
        margin:0 2.9% .3rem 0;
    }
    .hz li:nth-of-type(3n){
        margin-right:0;
    }
    .footer .fr .code{
        margin:0;
    }
    .footer .fr .code img{
        width:1.5rem;
        height:1.5rem;
        margin:0 auto;
    }
    .section5 .titles>span{
        padding-bottom:0;
        height:.88rem;
    }
    .phonebanner video,.phonebanner .swiper-slide img{
        width:100%;
        height:4.5rem;
        object-fit: fill;
    }
    .section5 .titles>span.active{
        height:.93rem;
    }
    .section5 .top{
        display:block;
    }
    .section4 .btn{
        top:14%;
        height:.6rem;
        left:auto;
        right:2%;
    }
    .section4 .btn a img{
        width:.6rem;
    }
    .section4 .box{
        width:100%;
        position: relative;
        padding:.3rem;
    }
    .section4 .navs{
       
        margin:.3rem 0;
    }
    .section4 .navs ul{
         display: flex;
         align-items: center;
         justify-content: center;
    }
    .section4 .navs li{
        padding:0 .3rem;
    }
    .section3 li{
        width:100%;
        margin:0 0 .3rem 0;
    }
    .indexbox1 .wrap>a{
        font-size:.24rem;
        width:1.8rem;
    }
    
    .indexbox2 .swiper-button-prev,.indexbox2 .swiper-button-next{
        bottom:0
    }
    .indexbox2 .swiper-button-prev{
        right:26%;
    }
    .indexbox2 .swiper-pagination{
            bottom: 5%;
            width: 59px;
            text-align: center;
    }
    .indexbox2 .content .fr li span.fl{
        width:70%
    }
    
    .section3 li a>div .font{
        height:.8rem;
        overflow: hidden;
    }
    
    .news .fl ul{
        display: flex;
        border:none;
        border-bottom: 1px solid #D2D2D2;
            align-items: center;
            justify-content: center;
    }
    .news .fl h2{
        display: none;
    }
    .page{
        text-align: center;
    }
    .page a{
        margin:0;
    }
    

}


@media screen and (min-width:1025px) and (max-width:1400px) {
    .footer .wrap{
        width:85%
    }
    .footer .fr .code{
        margin:0
    }
    
    
}