@charset "utf-8";
/* CSS Document */
/*all*/
@media screen and (max-width: 1920px) {
	
}
@media screen and (max-width: 1840px) {
    .warp {padding: 0 70px;}
    .header .lan{
        padding-right: 0;
    }
}
@media screen and (max-width: 1640px) {
    .warp2{padding: 0 50px;}
    .header .mune .mbd{
        margin: 0 12px;
    }
    .footer .fo1 .fo_logo, .footer .fo2 .fo_logo{
        padding-left: 0;
    }

    /**/
    .banner .swiper-slide{
        height: 900px;
    }

    
}

@media screen and (max-width: 1450px) {

    .header .mune .mbd{
        margin: 0 8px
    }
    /**/


    .warp{padding: 0 50px;}
    .header .logo {
        padding: 10px 0;

    }
    .header .logo img {
        max-width: 100%;
    }
    .banner .swiper-slide{ height:830px;}
    .banner .swiper-pagination {
        bottom: 50px
    }

}
@media screen and (max-width: 1300px) {
    #hamburger{ display:block !important;}
    .header .mune{ display:none;} 
    .header .lan{display: none} 
    .header .logo {
        padding: 18px 0 ;
    }
    .banner .swiper-slide{ height:760px;}
}

@media screen and (max-width: 1200px) {
    h1 {
        font-size: 80px;
    }

    /**/
    .banner .swiper-slide{ height:740px;}
    
    .banners .txt img{
        width: 90%;
    }


}
@media screen and (max-width: 1100px) {
    .footer .fo1 .fo_logo, .footer .fo2 .fo_logo{
        width: 100%;
    }
    .footer .fo1 .nav, .footer .fo2 .nav{
        display: none;
    }
}
@media screen and (max-width: 1024px) {
    
    h2{
        font-size: 42px;
    }

    
    .header:hover{ background:#fff;}
    .header.up:hover{ background:#fff;}
    
    .banner .swiper-slide{ height:700px;}
    

}

@media screen and (max-width: 1000px) {
    h4 {
        font-size: 18px;
    }
	
    
    .banner .swiper-slide{ height:650px;}

    .banners .txt img{
        width: 70%;
    }

    /**/
    .footer{
        padding-bottom: 60px;
    }
	.bottomlist{ display:block;}
	
}
@media screen and (max-width: 850px) {
    h3{
        font-size: 32px;
    }
    .banners h4{
        padding-top: 20px;
    }
    .banner .swiper-slide{ height:650px;}

    

    .warp,.warp2{
        padding: 0 30px;
    }
    
    
}
@media screen and (max-width: 750px) {
    
    .banner .swiper-slide {
        height: 600px;
    }
    .banner .ban1 {
        background-image: url(../images/mbanner01.jpg);
    }
    .banner .txt {
        display:none
    }


    /**/
    
}
@media screen and (max-width: 640px) {
    
    h1{font-size: 70px}
    .warp {
        padding: 0 30px;
    }

    .banner .swiper-slide {
        height: 500px;
    }
    
    
    


    .banner .swiper-pagination {
        bottom: 20px
    }

    .footer .fo2{
        padding-bottom: 15px;
    }
    
}
@media screen and (max-width: 480px) {
    h1{font-size: 60px}
    h3{
        font-size: 24px;
    }
    .warp {
        padding: 0 20px;
    }
    .banner .swiper-slide{ height:390px;}
    .banner .txt {
        padding-left: 0px;
        padding-bottom: 0px;
    }
    
}
@media screen and (max-width: 375px) {

    .banner .swiper-slide {
        height: 360px;
    }
    .banner .swiper-pagination {
        bottom: 20px
    }
    
}
/*index*/
@media screen and (max-width: 1640px) {
	.ip3 .info1 .txt{
        padding: 0 50px
    }
    .ip3 .info1 .txt a{
        margin-top: 100px;

    }

}
@media screen and (max-width: 1450px) {
	

    /***/

    .header .mune .mbl h3 a, .header:hover .mune .mbl h3 a, .header.up .mune .mbl h3 a,.pron .header .mune .mbl h3 a{ padding:10px 15px;}
    .header .mune .mtpro .mpis{ padding:40px 20px;}
    .header .mune .mtpro .mpl a{ font-size:2em; margin:20px 0;}
    

    .ip1{
        padding: 50px 0;
    }
    .ip2{
        padding: 80px 0 200px 0;
    }
    .ip3{
        padding: 80px 0;
    }
    .ip4{
        padding: 150px 0;
    }
    
    .ip3 .info1 .txt a {
        margin-top: 60px;
    }


}
@media screen and (max-width: 1250px) {
	.header .mune .mbd{ padding:21px 0;}
    

	.header form { padding: 5px;}
	.header .mune .mbl h3 a, .header:hover .mune .mbl h3 a, .header.up .mune .mbl h3 a ,.pron .header .mune .mbl h3 a{
        padding: 5px 20px;
    }
	.header .mune .mbl h3 a{ padding:5px 10px;}
	.header .hmune img{ width:70px;}
	.header .mune .mbd{ margin:0 10px;}
	.header .mune a{ font-size:1.4em;}
	.header .mune .mtpro .mpi .t p{ font-size:1.8em;}
	.header .mune .mtpro .mpis{ padding:30px 0;}
	.header .mune .mtpro .mpd {  width: calc(33.33% - 40px);  margin: 0 20px;}
	.banner .txt img{ max-width:300px;}
	
    .ip3 .info1 .txt{
        padding: 0 30px;
    }
    .ip3 .info1 .txt h2 {
        padding-bottom: 25px;
        margin-bottom: 25px;
    }
    .ip3 .info1 .txt a {
        margin-top: 30px;
        padding: 15px 45px;
    }
    
 

}

@media screen and (max-width: 1100px) {
    .header .lan a{
        padding-left: 15px;
    }

    .ip2 .tit{
        width: 40%;
    }
    .ip2 .txt{
        width: 60%;
    }
    .ip3 .info1 .txt h3{
        padding-bottom: 15px;
    }
    .ip3 .info1 .txt a {
        margin-top: 20px;
        padding: 15px 30px;
    }
    /**/

    
}


@media screen and (max-width: 1000px) {
    
    .banner .txt,.ip1 .tit,.ip2 .tit,.ip2 .txt{
        padding-left: 0;
    }

    .ip1 .pros .title {
        padding: 30px 20px;
        
    }
    .ip2{
        background-position: left center;
        padding: 60px 0 150px 0;
    }
    .ip2 .tit{
        width: 100%; 
        padding-bottom: 50px;  
    }
    .ip2 .tit h4{
        padding-bottom: 12px;
    }
    .ip2 .txt{
        width:100%; 
    }
    .ip2 .txt a{
        font-size: 14px;
    }

    .ip3 .info1,.ip3 .info2{
        width: 100%;
    }
    
    .ip3 .info1{
        padding-bottom: 10px;
    }
    .ip3 .info1 .img{
        height: 600px;
    }
    .ip3 .info2 img{width: 100%}
    .ip3 .info1 .txt h3{
        padding-bottom: 30px;
    }
    .ip3 .info1 .txt a {
        margin-top: 50px;
        padding: 15px 30px;
    }



    

}
@media screen and (max-width: 850px) { 
    
    .banner .txt{
        padding-top: 50px;
        padding-bottom:0px;
    }
    .ip1 .tit {
        padding-bottom: 33px;
    }
    .ip1 .pros{
        padding: 0 30px;
    }
    
    .ip3 {
        padding: 50px 0;
    }
    
    .ip4{
        padding: 100px 0;
    } 
    
}
@media screen and (max-width: 650px) {
    .ip3{
        padding: 50px 0;
    }
   .ip3 .info1 .txt,.ip3 .info1 .img{
        width: 100%;
   } 
   .ip3 .info1 .txt{
        height: 500px;
   }
   .ip3 .info1 .img img{
        width: 100$;
   }
   .ip3 .info1 .img{
        height: 500px;
   }
   
    /**/
    .banner .swiper-pagination-bullet{ width:30px;}
    
    .footer .fo2 .fo_logo p{
        line-height: 24px;
    }


}

@media screen and (max-width: 480px) {
    .ip1 .pros{
        padding: 0 20px;
    }
    .ip2 .txt p{
        font-size: 14px;
    }
    .ip3 .info2 .do1 .dl{
        width: 100%;
    }
    .ip3 .info2 .do1 .dl:first-child{
        padding-bottom: 10px;
    }
    
}


/*about*/
@media screen and (max-width: 1750px) {
    .banners .warp{ height:700px;}

    
}
@media screen and (max-width: 1550px) {
    .ab1,.pro1,.productshow,.v1,.contact,.feedback{
        padding: 80px 0;
    }


}

@media screen and (max-width: 1450px) {
    .banners .warp{
        height: 600px;
    } 
}

@media screen and (max-width: 1250px) {
    .ab1,.pro1,.productshow,.v1,.contact,.feedback{
        padding: 60px 0;
    }
    .banners .warp{ height:550px;}
    .banners h3 {
        font-size: 5em;
        margin-bottom: 20px;
    }
    .banners p {
        font-size: 2.6em;
    }

    .inside .tit h2{
        font-size: 5em;
    }
    .inside .tit b{
        font-size: 2.6em;
    }

    .ab1 .txt {
        padding-right: 6%;
    }

    
    /**/
    
}
@media screen and (max-width: 1024px) {
    .banners h3, .banners2 h3 {
        font-size: 4em;
        
    }
    .banners .warp{
        height: 500px;

    }

    
    
    
}
@media screen and (max-width: 1000px) {
    .ab1,.pro1,.productshow,.v1,.contact,.feedback{
        padding: 50px 0;
    }
    
    .banners .warp {
        height: 450px;
    }
    .v1 .dot{
        width: calc(50% - 16px);
        margin-right: 32px;
    }

    
}
@media screen and (max-width: 850px) {

    .ab1 .warp2>*{
        width: 100%;
    }
   
    

}
@media screen and (max-width: 650px) {
    
    .banners h3, .banners2 h3 {
        font-size: 3.2em;
        margin-bottom: 15px;
    }
    .banners p {
        font-size: 2em;
    }

    .ab1 .txt h1{
        font-size: 6em;
    }
    
    .ab1 .txt p{
        padding-bottom: 15px;
    }
    
    .s2 .num {
        font-size: 4em;
    }
    .ab1 .warp2 .number{padding-top: 30px}

    .stip{
        bottom: 20px;
    }
    
    .v1 .dot{
        width: 100%;
        margin-right:0px;
    }
    
    
}
@media screen and (max-width: 480px) {
    
    .ab1 .txt h1{
        font-size: 4em;
    }
    
}


/*prodcut*/

@media screen and (max-width: 1450px) {
    
    
}
@media screen and (max-width: 1200px) {
    .pro1{
        padding: 30px 0;
    }
    .probox .dot{
        width: calc((100% - 52px)/3);
    }
    .probox .dot:nth-child(4n){
        margin-right: 26px;
    }

    .probox .dot:nth-child(3n){
        margin-right: 0;
    }
    
}
@media screen and (max-width: 1024px) {
	
}
@media screen and (max-width: 850px) {
    
    .pro1 .txt .dot {
        width: calc((100% - 26px)/2);
        margin-bottom: 30px;
    }

    .plist .pl a{
        
        margin-bottom: 15px;
    }
    .plist2{
        text-align: left;
    }
    .plist2 a{
        padding: 12px 15px;
        margin: 0 5px 10px 5px;
    }

    .probox .dot{
        width: calc((100% - 26px)/2);
    }
    .probox .dot:nth-child(4n){
        margin-right: 26px;
    }

    .probox .dot:nth-child(3n){
        margin-right: 26px;
    }
    .probox .dot:nth-child(2n){
        margin-right: 0;
    }

    .probox .dot .title{
        padding: 20px 0;
    }
    
}
@media screen and (max-width: 650px) {
    
    .pro1 .txt .dot {
        width: 100%;
        margin-bottom: 20px;
        
    }

    .probox .dot{
        width: 100%;
        margin-right: 0;
    }
    .probox .dot:nth-child(4n){
        margin-right: 0;
    }

    .probox .dot:nth-child(3n){
        margin-right: 0;
    }
    
}
@media screen and (max-width: 480px) {
    .protxt .dot .txt,.protxt .dot .img{
        width: 100%;
    }
    .protxt .dot .txt{
        margin-bottom: 20px;
    }
    .product-t .protxt .dot a{
        padding: 30px 40px;
    }
}

/*prodcutshow*/

@media screen and (max-width: 1250px) {
    .phead{
        height: 78px;
    }
    .proshow-box .ps1 .proinfo h4{
        margin-bottom: 50px;
    }
    
    /**/


    .pro-txts{ 
        flex-direction: column;
        flex-wrap: wrap;
     }
    .pro-txt{
        width: 100%;
    }
    .pro-txts .pro-list{
        width: 100%;
        padding-right: 0;
    }
    .pro-txts .pro-list .dl{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .pro-txts .pro-more .prod{
        width: calc((100% - 40px)/3);
    }
    .pro-txts .pro-more .tit{
        margin: 40px 0 20px 0;
    }
    /**/
    .ptable table {
        min-width: 900px;
        overflow-x: auto;
    }

}

@media screen and (max-width: 1000px) {
    
    .phead{
        height: 59px;
    }
    .proshow{
        padding: 30px 0;
    }
    .proshow-box .ps1 .img{
        padding: 10px 20px;
    }

}
@media screen and (max-width: 850px) {
    
    .ps2{
        padding: 35px 0 50px 0;
    }
    .ps2 a{
        margin-bottom: 20px;
    }
    .ps3 .ol .dot{
        width: calc((100% - 25px)/2);;
    }
    .ps3 .ol .dot:nth-child(2n){
        margin-right: 0;
    }

    .ps3 .ol .dot .img{
        padding: 20px 0;
    }

    
}

@media screen and (max-width: 640px) {
    
    .proshow-box .ps1 .img{
        width: 100%;
    }
    .proshow-box .ps1 .proinfo{
        width: 100%;
        padding-top: 50px;
        padding-bottom: 10px;
    }

    .ps3 .ol .dot{
        width: 100%;
        margin-right: 0;
    }
    .prostip .stip{
        padding: 20px 0 10px 0;
    }
    .ps2 {
        padding: 15px 0 20px 0;
    }
    .ps2 a{
        padding: 20px 30px 20px 100px;
        background: url(../images/left.jpg) 15px center no-repeat #fff;
    }
    .ps2 a:last-child {
        padding: 20px 100px 20px 30px;
        background: url(../images/right.jpg) right 15px center no-repeat #fff;
    }
    .ps2 a i{
        display: none;
    }
    .proshow-box .ps1 .proinfo .dl{
        padding-left: 0px;
    }
    
    .proshow-box .ps1 .proinfo h4{
        padding-left: 0;
        margin-bottom: 30px;
    }
}







/*contact*/
@media screen and (max-width: 1680px) {
	
}
@media screen and (max-width: 1400px) {
	

    .contact .txt{
        align-items: stretch;
        margin-top: 50px;
    }
    .contact .txt .dot{
        width: calc((100% - 20px)/2);
        margin-right: 20px;
        margin-bottom: 20px;
    }
    .contact .txt .dot:nth-child(2n){
        margin-right: 0;
    }
    .contact .txt .dot .img{
        padding-bottom: 70px;
    }


    .feedback .tit {
        width: 20%;
    }
    .feedback .feed-form {
        width: calc(80% - 100px);
    }
    .feedback .feed-form .dot {
        width: calc((100% - 70px)/2);
        
    }
}
@media screen and (max-width: 1200px) {
    

    
    
}
@media screen and (max-width: 1100px) {
    
}
@media screen and (max-width: 1000px) {
    .feedback .tit {
        width: 30%;
    }
    .feedback .feed-form {
        width: calc(70% - 80px);
    }
    .feedback .tit h4{
        font-size: 2.4em;
        padding-bottom: 15px;
        margin-bottom: 20px
    }
}
@media screen and (max-width: 850px) {

    
    .contact .tit {
        flex-direction: column;
        
    }
    .contact .tit .con-logo{
        padding-bottom: 15px;
    }
    .contact .txt .dot {
        
        padding: 30px 30px 40px 30px;
    }

    .feedback .tit {
        width: 100%;
        margin-bottom: 20px;
    }
    .feedback .feed-form {
        width: 100%;
    }
    
    
}
@media screen and (max-width: 650px) {
    
    .contact .txt .dot {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 20px;
    }
	.feedback .feed-form .dot {
        width: 100%;
        
    }
   
}