@media screen and (min-width:320px) and (max-width:800px) {

	.phoneheader{
		padding:0 .3rem;
		height:1.5rem;
		line-height: 1.5rrem;
		display:block;
		position:fixed;
		top:0;
		width:100%;
        z-index:999;
        background: rgba(27,27,27,1);
       
        display:flex;
        justify-content: space-between;
        align-items: center;

	   
	}
	.header,.banner{
        display:none;
    }
    .wrap{
        width:94%;
        margin:0 auto;
    }

    .phoneheader .fr{
        position: absolute;
        right:.3rem;
    }
    .phoneheader .fl img{
        width:3.5rem;
    }
    .phoneheader .fr span{
        font-size:.6rem;
        margin:0 .1rem;
        color:#fff;
    }
    .phoneheader .fr  img{
        width:.5rem;
        margin-left:.2rem;
    }

    .phonebanner{
        display:block;
        margin-top:1.5rem;
    }
    .phonebanner img{
        width: 100%;
    }
    .phonebanner .swiper-pagination-bullet{
        width:.2rem;
        height:.2rem;
        background:rgba(255,255,255,0.5);
       
        border-radius:7px;
    }
    .phonebanner .swiper-pagination-bullet-active{
        background:rgba(255,255,255,0.8);
        width:.3rem;
    
    }
    
    .phonebanner  .swiper-pagination{
        bottom:10px !important;
    }


    .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:60%;
        height:100%;
        background:#fff;
        padding:0 0.12rem;
        overflow-y:scroll;
    }
    .mobile_nav .top{
       
       
       padding:20px 0 35px;
       
    }
    .mobile_nav  form{
 
        width:200px;
        height:30px;
        line-height: 30px;
        border:1px solid #eee;
        margin-right:30px;
       display:flex;
       margin:20px auto;
    }
  
    .mobile_nav  form button{
        height:30px;
        line-height: 30px;
        width:30px;
        background:url(../images/search.png) no-repeat center center;
    }
    .mobile_nav  form input{
        width:160px;
        padding-left:10px;
    }
    .mobile_nav .top img{
        
        width:1.5rem;
        display:block;
        margin:0 auto;
    }
    .mobile-container li{
      
        line-height: .8rem;
        text-align: left;
        padding-left:.3rem;
    }
    .mobile-container li ul.sub{
        display:none;
    }
    .mobile-container li a{
        font-size:.35rem;
        padding-right:1rem;
    }
    .mobile_nav>ul>li{
        border-bottom:1px solid rgba(238,238,238,1);
    
    }
    .mobile_nav>ul>li:nth-of-type(1),.mobile_nav>ul>li:last-child{
        background:none;
    }
    .mobile_nav>ul>li:nth-of-type(2), .mobile_nav>ul>li:nth-of-type(3){
        background:url(../images/arrow4.png) no-repeat right 10px top 10px;
    }
    .mobile-container li ul.sub li a{
        font-size:.3rem;
        line-height:.4rem;
    }
    .mobile-container li ul.sub .subs{
        display:none;
    }
    .submenus{
        margin-top:1.5rem;
        height: 1rem;
        line-height: 1rem;
    }
    .submenus .fl span,.submenus .fr a, .submenus .fr span{
        font-size:.25rem;
    }

    .indexbox1{
        padding:.3rem 0;
    }
    .indexbox1 li span{
        font-size:.45rem;
    }
    .indexbox1 li p,.indexbox1 li i{
        font-size:.2rem;
    }
    .indexbox2,.indexbox3,.indexbox4,.indexbox5,.abouts,.partners, .commonbox,.prolist,.contact{
        padding:.5rem 0 .7rem;
    }
    .abouts .photo{
        display:block;
        margin-top:20px;
    }
    .commontitle h2{
        font-size:.3rem;
    }
    .commontitle p{
        font-size:.2rem;
    }
    .indexbox2 .titles span.en, .indexbox3 .titles span.en, .indexbox4 .titles span.en, .indexbox5 .titles span.en{
        font-size:.6rem;
    }
    .indexbox2 .titles span.ch, .indexbox3 .titles span.ch, .indexbox4 .titles span.ch, .indexbox5 .titles span.ch{
        font-size:.35rem;
        top:auto;
        bottom:0;
    }
    .indexbox2 ul,.indexbox3 ul,.indexproduct .content,.abouts .contents,.partners ul,.prolist ul,.contact .content{
        margin-top:.5rem;
    }
    .contact .content .tab span.en,.contact .content .tab{
        margin-bottom:.5rem;
    }
    .contact .content .maps{
        margin-top:1rem;
    }
    .contact .content .tab .info input,.contact .content .tab .info textarea{
        width:100%;
    }
    .contact .content .tab button{
        margin:0 auto;
        display:block;
    }
    .contact .content .maps .tab{
        height:3rem;
    }
    .contact .content .maps ul{
        width:100%;
        margin-left:-50%;
    }
    .contact .content .maps li{
        height:.5rem;
        line-height: .5rem;
        font-size:.25rem;
    }
    .prolist li{
        padding:.2rem 0;
    }
    .prolist li .fl,.prolist li .fr{
        width:100%;
    }
    .prolist li .fr p.title{
        font-size:.35rem;
    }
    .prolist li .fr p.font{
        max-height:1.8rem; 
        font-size:.25rem;
        line-height:.45rem;
    }
    .prolist li .fr a{
        width: 2.3rem;
        height: .6rem;
        line-height: .6rem;
        font-size: .25rem;
        margin-top: .3rem;
        background: url(../images/arrow1.png) no-repeat right 10px center;

    }
    .details .grey{
        padding:.2rem;
    }
    .details .grey p.title{
        font-size:.3rem;
        padding-bottom:.2rem;
        margin-bottom:.2rem;
    }
    .details .grey .fl,.details .grey .fr{
        width:100%;
    }
    .details .contents .tabtitle li{
        margin-right:.22rem;
    }
    .details .contents .tab{
        margin-bottom:.2rem;
    }
    .details .contents .tabtitle li a{
        font-size:.2rem;
        padding:0;
    }
    .details .contents .tab p.titles{
        height:1rem;
        line-height:1rem;
        font-size:.25rem;
        padding-left:.2rem;
    }
    .details .contents .tab p.title{
        font-size:.3rem;
    }
    .details .contents .tab .text p{
        font-size:.25rem;
        line-height: .45rem;
    }
    .abouts .contents p{
        font-size:.25rem;
        line-height: .45rem;
    }
    .partners li{
        width:100%;
        padding:.2rem;
        margin: 0 0% .3rem 0;
    }
    .partners li p.title{
        font-size:.3rem;
        height:1rem;
        margin-bottom:.3rem;
    }
    .partners li p.font{
        font-size:.25rem;
        line-height: .45rem;
        height: auto;
    }
    .partners li a{
        width:2.3rem;
        height:.6rem;
        line-height:.6rem;
        font-size:.3rem;
        margin-top:.3rem;
    }
    .indexbox5 .titles{
        margin-bottom: .5rem;
    }
    .indexbox3 li .photo{
        padding:.2rem 0;
    }
  
    .indexbox3 li .photo span{
        font-size:.3rem;
    }
     .indexbox3 li .text{
        padding:.2rem;
    }
    .indexbox3 li .text span{
        font-size:.24rem;
        line-height: .3rem;
    }
    .indexbox3 li .text p{
        font-size:.22rem;

    }
    .indexbox5 .swiper-slide li{
        width:50%;
        height:1.3rem;
    }
    .indexbox5 .swiper-slide li img{
        max-width:80%;
    }
    .indexbox5 .swiper-button-prev,.indexbox5 .swiper-button-next{
        width:.7rem;
        height: 1.5rem;
    }
    .footer{
        padding:.3rem 0;
    }
    .footer .footer_top .fl:first-child{
        display:none;
    }
    .footer .footer_top{
        display:block;
    }
    .footer .center{
        margin:.2rem 0;
    }
    .footer .fr{
        width:100%;
    }
    .footer .fl p.title, .footer .fr p.title{
        font-size:.35rem;
        margin-bottom:.2rem;
    }
    .footer .fr .submenu .left{
        width:100%;
        margin-bottom:.2rem;
    }
    .footer .fr .submenu{
        display:block;
    }
    .footer .fr .submenu .left span{
        border-bottom: 1px solid rgba(255,255,255,0.5);
        margin-bottom:.1rem;
        background:url(../images/arrow3.png) no-repeat right 10px center/0.3rem;
    }
    .indexbox2 li .layer{
        padding-top:50%;
    }
    .indexproduct .content li{
        width:100%;
        margin:0 0 0.2rem 0;
    }
    .footer .fl p.p1{
        margin-bottom:.2rem;
    }
    .footer .copy{
        border:none;
        padding:0;
    }
    .indexbox4 a.more{
        width:1.6rem;
        height:.6rem;
        line-height: .6rem;
        font-size:.25rem;
    }
    .footer .fr .submenu .left  .sub{
        display:none;
    }
    .indexproduct .content li .photo{
        height:auto;
    }
    .indexproduct .content li .layer{
        height:100%;
    }
    .indexproduct .content li span.title{
        font-size:.25rem;
    }
    .indexproduct .content li p{
        font-size:.2rem;
    }
    .commonbox{
        padding:.4rem 0;
    }
    .commonbox .left{
        display:none;
    }
    .commonbox .right{
        width:100%;
        
    }
    .commonbox .right h2{
        font-size: .3rem;
        margin-bottom:.4rem;
    }
   
    .page a{
        padding:.2rem;
        margin:0 0.1rem;
    }
    .relate li .proimg img{
        max-height: 100%;
    }
    .commonbox .right li .proimg,.relate li .proimg {
        height: 3rem;
    }
    .commonbox .right li p.title,.relate li p {
        font-size: .25rem;
        margin: .2rem auto;
        height: .9rem;
        line-height:.3rem;
    overflow: hidden;
    }
    .commonbox .right li span.price,.relate li span.price {
        font-size: .25rem;
      
    }
  
    .details,.peoplecenter,.order,.popup{
        padding:.4rem 0;
    }
    .details .detail_top .fl,.details .detail_top .fr{
        width:100%;
    }
    .details .detail_top .fl .bigimg{
        height:5rem;
    }
    .details .detail_top .fl .bigimg img{
        max-height: 100%;
    }
    .details .detail_top .fr p.title{
        font-size: .4rem;
        line-height: .45rem;
    }
    .details .detail_top .fr{
        margin-top:15px;
    }
    .details .detail_top .fr p.font{
        font-size: .2rem;
        height:.6rem;
        line-height: .6rem;
        margin:.2rem 0;
    }
    .xq_box .xq_title .title_p{
        font-size:.35rem;
    }
    .xq_box .xq_title{
        padding-bottom:.2rem;
    }
    .indexbox3 li.swiper-slide-active .text{
        padding:.2rem;
    }
    .indexbox3 li .text p{
        height: auto;
    }
}


@media screen and (min-width:800px) and (max-width:1200px) {

    .wrap{
        width:90%;
        margin:0 auto;
    }
   
}


@media screen and (min-width:1200px) and (max-width:1600px) {

    .wrap{
        width:80%;
        margin:0 auto;
    }
    .header .fr>ul>li{
        margin:0 35px;
    }
}