@charset "utf-8";

/* CSS Document */

.m-menubtn{position: absolute;z-index: 100;top: 0;right:0;width:60px;height:60px; background:#4472c4;cursor: pointer;display: none;}
.m-menubtn>span{position: absolute;top: 0;bottom: 0;left: 0; right: 0; width: 20px;height: 2px; background-color: #fff; margin: auto;}
.m-menubtn>span:before, .m-menubtn>span:after {content: "";width: 100%;height: 100%;position: absolute;bottom: 0;left: 0;right: 0;margin: auto; background-color: #fff;}
.m-menubtn>span:before {bottom: 5px;}
.m-menubtn>span:after {bottom: -5px; left: 50%;width: 50%;}
.m-menubtn.active{ background:#00b050}
.m-menubtn.active>span:before{-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-o-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg); background:#fff}
.m-menubtn.active>span:after {-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-o-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg);opacity: 0;}
.m-menubtn.active>span {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg); background:#fff}
.m-menubtn.active>span, .m-menubtn.active>span:before, .m-menubtn.active>span:after {right: 0;bottom: 0;}
.m-menubtn>span, .m-menubtn>span:before, .m-menubtn>span:after{-webkit-transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);-moz-transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);-o-transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);}


.m-menu{position:fixed; left:0;top:0; width:100%; height:100%;overflow-y:auto; overflow-x:hidden;-webkit-transition:.4s;-moz-transition:.4s;transition:.4s;visibility: hidden;opacity: 0;z-index:99}
.m-menu ul{ width:100%;padding-top:80px; padding-bottom:30px;overflow-y:auto;overflow-x:hidden}
.m-menu li{ padding:0 5%; margin-bottom:10px; position: relative;bottom: -20px;opacity: 0;-webkit-transition:0.4s cubic-bezier(0.5, 0, 0, 1);-moz-transition: 0.4s cubic-bezier(0.5, 0, 0, 1);-o-transition: 0.4s cubic-bezier(0.5, 0, 0, 1);transition: 0.4s cubic-bezier(0.5, 0, 0, 1);}
.m-menu a{ display:block; color:#fff; line-height:35px; font-size:16px;}
.m-menu .sub a{color:#fff; line-height:26px; padding-left:20px; font-size:14px; position:relative}
.m-menu .sub a:before{content: "";position: absolute;bottom: 15px; left: 0; width: 10px; height: 1px; background: rgba(255,255,255,.5);}
.m-menu a:hover{color:#2479b9}
.m-menu.active{visibility: visible; opacity:1;}
.m-menu.active li{bottom: 0;opacity: 1;}
.m-menu.active li:nth-child(1){transition-delay:.1s;}
.m-menu.active li:nth-child(2){transition-delay:.15s;}
.m-menu.active li:nth-child(3){transition-delay:.2s;}
.m-menu.active li:nth-child(4){transition-delay:.25s;}
.m-menu.active li:nth-child(5){transition-delay:.3s;}
.m-menu.active li:nth-child(6){transition-delay:.35s;}
.m-menubg{display: block;width: 0;height:100%;z-index: 0;position: fixed;left: 0;-webkit-transition: all 0.4s cubic-bezier(0.5, 0, 0, 1); -moz-transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);-o-transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);transition: all 0.4s cubic-bezier(0.5, 0, 0, 1); background:#00b050; z-index:98}
.m-menubg.active{ width:100%}


.m-footer{background:#4472c4;color:#fff; position:fixed; width:100%; left:0;bottom:0; display:none; z-index:99}
.m-footer li{ float:left; width:50%; text-align:center}
.m-footer a{ display:block; line-height:20px;color:#fff;}
.m-footer .li1 i{ display:block;background:url(../images/mf_icon01.png) no-repeat center; background-size:20px; height:25px;}
.m-footer .li2 i{ display:block;background:url(../images/mf_icon02.png) no-repeat center; background-size:20px; height:25px;}
.m-footer span{ display:block;}
.inner-nav-pro-m{ display:none; position:relative; z-index:9}
.inner-nav-pro-m .tit{border-bottom: 1px solid #e8e8e8; background:#4472c4; padding:0 3%; color:#fff; font-size:16px; line-height:50px; white-space:nowrap; text-overflow:ellipsis; position:relative}
.inner-nav-pro-m .tit:after{ content:""; width:8px; height:8px; border-right:1px solid #fff; border-bottom:1px solid #fff; -moz-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg); position:absolute; right:3%;top:18px}
.inner-nav-pro-m .sub{position:absolute;top:50px; width:100%;left:0; background:#f3f3f3; display:none; }
.inner-nav-pro-m .sub a{ display:block; border-bottom:1px solid #e8e8e8; line-height:20px; padding:8px 3%}
.inner-nav-pro-m .sub a:hover{ background:#e56b15; color:#fff}
.nbannerbox-pro{ display:none}
@media screen and (max-width:1920px){
.banner .txt{ left:7.5%}
}
@media screen and (max-width:1680px){
.header .wrap{ width:94%}
.menu li{ margin:0 30px}
.banner .txt{ left:3%}
.banner .txt{ font-size:30px}
.banner .txt h2{ font-size:55px;}
}
@media screen and (max-width:1440px){
.wrap{ width:90%}
.footer-top .left{width: 32%;margin-right: 10%;}
.nbanner{ height:350px}
.banner .txt{ font-size:26px; line-height:80px;}
.banner .txt h2{ font-size:50px; line-height:100px;}

}
@media screen and (max-width:1366px){
.footer-top .middle{width:35%;margin-right: 8%;}
.footer-top:after{left: 80%;}
}

@media screen and (max-width:1200px){
.menu li{margin: 0 25px;}
.footer-top .flogo{ float:none;}
.footer-top .left .txt{ padding-left:0}
.footer-top .left ul{ margin-top:20px}
.bjkuai .biaoge table td{ line-height:45px;}
}
@media screen and (max-width:1024px){
.menu{ display:none}
.m-menubtn{ display:block}
.wrap{ width:94%}
.header .wrap{ width:100%}
.space,.main{ padding:40px 0}
.header, .logo, .serch-btn, .lang{ height:60px;}
.lang .tit{ line-height:60px;}
.logo{ left:3%}
.logo img{ height:45px}
.header_r{ right:75px}
.banner,.nbanner{ margin-top:60px}
.banner .swiper-pagination-bullets{ bottom:3%}
.banner .swiper-pagination-bullet{ width:8px; height:8px; margin:0 5px !important}
.i-about .txt-left{ padding-top:0}
.title{ font-size:30px; margin-bottom:20px}
.i-about .intro{ font-size:14px; line-height:26px}
.i-about .more,.i-about .ys{ margin-top:20px}
.i-about .ys .num{ font-size:20px;}
.i-about .ys .num .counter{ font-size:26px}
.company-pic{top:40px}
.footer{ padding-top:40px}
.footer-top .left{ width:100%; margin-right:0; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:20px; margin-bottom:20px}
.footer-top .flogo{}
.footer-top:before{ display:none}
.footer-top:after{ display:none}
.footer-top .left ul{ display:flex; display:-webkit-flex;}
.footer-top .left li{ width:initial;padding-right:3%; margin-right:3%}
.footer-top .left li:after{ right:0}
.footer-top .left li:nth-child(2n)::after{ display:block}
.footer-top .left li:last-child::after{ display:none}
.footer-top .middle{ width:auto}
.copyright{ text-align:center}
.i-product-list .txt{ padding:5px 10px}
.nbanner{ height:300px}
.nbanner .tit01{ font-size:16px}
.nbanner .tit02{ font-size:30px;line-height: 40px;}
.inner-nav li{ width:20%}
.inner-nav li a{ width:auto; line-height:50px}
.content_abt{ font-size:14px;}
.main .content{ line-height:26px}
.company .txt-r h1{ font-size:26px;}
.productlist .txt-left .tit{ font-size:26px;}
.productlist .txt-left .intro{ font-size:14px;}
.productlist .txt-left .more{ margin-top:10px}
.nav-left h3{ line-height:40px; font-size:16px;background: #4472c4 url(../images/proicon_w.png) no-repeat 20px center; background-size:15px; padding-left:45px}
.nav-left ul{ padding:20px}
.nav-left li{ margin-bottom:10px}
.nav-left li a{ margin-right:10px;padding:3px 10px; padding-left:25px}
.nav-left li a:before{border-top: 1px solid #666;border-right:1px solid #666;left: 10px;top: 12px;}
.banner .txt h2{ font-size:40px}
.contact-pic{ min-height:auto}
.contact-list .item{ margin:25px 0; padding-bottom:25px}
.content_c{ font-size:14px; line-height:26px}
.contact-list .address h4{ font-size:18px}
.contact-list .tel span, .contact-list .mail span{ font-size:14px;}
.contact-list .tel{ font-size:24px}
.content_c .title{ font-size:26px}
.en .inner-nav li{ width:33.33%}
.en .content_abt, .en .content_c{ font-size:14px; line-height:24px;}
.en .main .content{ line-height:24px}
.en .i-about .intro{ font-size:14px; line-height:24px}
.en .banner .txt{ max-width:400px}
.en .banner .txt h2{ font-size:30px; line-height:30px}
.en .banner .txt p{ font-size:20px}
}
@media screen and (max-width:768px){
.i-about .txt-left{ width:100%;}
.company-pic{ position:relative; width:100%; height:auto; right:auto; top:auto;}
.title{ text-align:center; font-size:26px; margin-bottom:15px;}.main .title{ line-height:30px; margin-bottom:15px}
.space,.main{ padding:20px 0}
.i-service-list .item{ width:98%; margin-bottom:3%}
.i-service-list .txt{ padding-top:15px}
.i-service-list .txt h3{ padding-bottom:10px}
.i-service-list .intro{ font-size:14px; margin-top:15px; line-height:24px}
.i-service-list .more{ margin-top:10px}
.i-product .tab-ul{ position:relative; right:auto;bottom:auto; display:flex; display:-webkit-flex; justify-content:center; margin-bottom:20px}
.i-product .tab-ul li{ float:none; margin:0 10px; font-size:14px;}
.i-product-list .txt h3{ font-size:16px}
.i-product-list .swiper-container{ padding-bottom:30px}
.i-product-list .swiper-pagination{ display:block;bottom:0}
.i-product-list .swiper-pagination-bullet{width: 8px;height: 8px;margin: 0 5px !important;opacity: 1;border: 1px solid #fff;border-radius: 50%; background:none; position: relative; outline:none}
.i-product-list .swiper-pagination-bullet.swiper-pagination-bullet-active{background: #00b050;border: 1px solid #00b050;}
.footer{ padding-top:20px; padding-bottom:50px}
.footer-top{ margin-bottom:20px}
.footer-top .flogo img{ display:block; width:auto; height:40px}
.footer-top .middle h4, .footer-top .right h4{ font-size:16px; font-weight:normal; margin-bottom:10px;}
.m-footer{ display:block}
.search-alert .search-form .tex{ font-size:30px;}
.nbanner{ height:200px}
.nbanner .tit01{ font-size:14px}
.nbanner .tit02{ font-size:20px; line-height:24px}
.inner-nav .wrap{ width:100%}
.inner-nav li{ width:25%;}
.inner-nav li a{ font-weight:normal}
.company .pic-l{ width:100%}
.company .txt-r{ width:100%}
.company .txt-r h1{ font-size:20px; line-height:30px; margin-bottom:10px}
.chejian .item{ margin-top:20px}
.chejian .item h3, .culture li h4{ font-size:18px;}
.equipment li{ width:48%}
.productlist02 li{ width:48%;}
.inner-nav-pro{ display:none}
.inner-nav-pro-m{ display:block}
.productlist .txt-left{ width:100%}
.productlist .pic-right{ width:100%; margin-top:20px}
.productlist .txt-left .tit{ font-size:20px}
.main_product .wrap{ width:100%}
.productlist{ margin-bottom:3%; padding:20px 3%}
.productlist:las-child{ margin-bottom:0}
.productlist .txt-left .tit{ padding-bottom:10px; margin-bottom:10px;}
.productlist li .tit{ font-size:14px; padding:5px; line-height:20px}
.banner .txt{left:0}
.banner .txt h2{ font-size:30px; line-height:60px;}
.banner .txt p{ line-height:40px; font-size:20px;padding: 10px;}
.contact-list{ width:100%}
.contact-pic{ position:relative; width:100%}
.nav-left{ margin-bottom:30px}
.nav-left h3{ border-bottom:1px solid #d8d8d8; background:#fff; color:#4472c4; position:relative}
.nav-left h3:before{ content:""; width:40px; height:40px;background: #4472c4 url(../images/proicon_w.png) no-repeat center;background-size: 15px; position:absolute; left:0;bottom:0; border-top-left-radius:15px}
.nav-left ul{ display:flex; display:-webkit-flex; flex-wrap:wrap;}
.nav-left li{ width:25%}
.en .title{ font-size:26px}
.en .nav-left li{ width:50%}
.bjkuai .lcsili li{ margin-right:15px}
}
@media screen and (max-width:640px){
.footer-top .left .txt{ line-height:20px; font-size:12px;}
.footer-top .left ul{ margin-top:10px}
.footer-top .left li:after{top:5px}
.footer-top .middle{ width:100%; margin-right:0; font-size:12px; line-height:20px}
.footer-top .middle .tel{ font-size:20px; background-size:30px;padding-left:40px;}
.footer-top .middle .email{ margin:5px 0 0}
.footer-top .right{ padding-top:10px; font-size:12px; line-height:20px}
.footer-top .right h4{ display:none}
.footer-bot{ padding:10px 0; font-size:12px; line-height:20px}
.i-service-list .txt h3{ font-size:16px;}
.i-about .ys p{ line-height:20px}
.search-alert .search-form .tex,.search-alert .search-form .btn{ font-size:24px;}
.lang .sub{ width:100px;margin-left: -50px;}
.lang .sub a{line-height: 20px;padding:6px 0;}
.banner a{ height:300px;}
.banner img{ height:100%; object-fit:cover}
.nbanner{ height:150px}
.culture{ flex-wrap:wrap;}
.culture li{ width:100%; margin-bottom:3%}
.inner-nav-about{ display:none}
.equipment ul{ margin-right:0}
.equipment li{ width:100%; margin-right:0; margin-bottom:3%}
.productlist02 ul{ margin-right:0}
.productlist02 li{ width:100%; margin-right:0; margin-bottom:3%}
.banner .txt p{ font-size:16px;}
.productlist03 ul{ margin-right:0}
.productlist03 li{ width:100%; margin-right:0; margin-bottom:3%}
.content_c .title{ font-size:20px; text-align:left}
.contact-list .tel, .contact-list .mail{ background-size:45px}
.contact-list .item{ padding-left:60px; margin:15px 0;padding-bottom: 15px;}
.contact-list .address span{ width:45px; height:45px; line-height:45px; font-size:20px}
.nav-left li{ width:50%}
.en .nav-left li{ width:100%}
.en .nav-left li a{ margin-right:0}
.en .main .title{ font-size:20px;line-height: 24px;}
.en .banner .txt{ max-width:260px}
.en .banner .txt h2{ font-size:20px; line-height:20px; padding:10px}
.en .banner .txt p{ font-size:14px; line-height:20px; padding:10px}

.bjtitle h3{padding: 5px 20px; font-size:18px}
.bjconn h3{font-size:16px; margin: 15px 0 5px 0;}
.bjconn .wenzi{ float:none; width:100%; margin-bottom:25px;}
.bjconn .image{ float:none; width:100%} 
.bjkuai .kuaititle h3{ line-height:34px; font-size:16px;}
.bjkuai .kuaititle span{width: 34px; height: 34px; font-size: 20px;}

.bjkuai .biaoge{ float:none; width:100%;  margin-bottom:25px;}
.bjkuai .image{ float:none; width:100%;}
.bjkuai .wenzi{ padding:15px;}
}
@media screen and (max-width:425px){
.title{ font-size:22px;}
.lang .tit{background-size:10px auto;padding-right: 12px;}
.lang{margin-left:10px;padding-left:10px;}
.serch-btn{ background-size:12px 12px; width:20px}
.nbanner{ height:120px}
.banner .txt h2{ font-size:26px;}
.banner .txt p{ font-size:14px}

.bjkuai .lcsili{ display:block}
.bjkuai .lcsili li{ float:left; width:48.5%; margin-right:3%; margin-bottom:3%}
.bjkuai .lcsili li:nth-child(2n){ margin-right:0}
.bjkuai .lcsili li img{ max-height:165px; width:100%; }
.bjprolist li{ float:left; width:48.5%; margin-right:0%;margin-top:3%}
.bjprolist li:nth-child(2n){ float:right}
}