@charset "utf-8";

/* CSS Document */

.m-menubtn{position: absolute;z-index: 100;top: 10px;right: 10px;width: 40px;height: 40px;cursor: pointer;display: none;}
.m-menubtn>span{position: absolute;top: 0;bottom: 0;left: 0; right: 0; width: 20px;height: 2px; background-color: #000; 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: #000;}
.m-menubtn>span:before {bottom: 5px;}
.m-menubtn>span:after {bottom: -5px; left: 50%;width: 50%;}
.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:rgba(255,255,255,.5); line-height:26px; padding-left:20px; 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:#333}
.m-menubg.active{ width:100%}

.m-footer{background: #2479b9;color:#fff; position:fixed; width:100%; left:0;bottom:0; display:none; z-index:99}
.m-footer li{ float:left; width:25%; text-align:center}
.m-footer a{ display:block; line-height:20px;color:#fff;}
.m-footer li i{ display:block;background:url(../images/tel01.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:#fff url(../images/arrow_down_h.png) no-repeat right 3% center; padding:0 3%; font-size:16px; line-height:50px; white-space:nowrap; text-overflow:ellipsis;}
.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){

}
@media screen and (max-width:1680px){
.wrap{ width:1300px}
.inner-nav{bottom: calc(60px + 10%);}
}
@media screen and (max-width:1440px){
.banner a, .nbanner .imgbox{ padding-left:200px;}
.wrap{ width:90%}
.honorlist li .pic{ height:240px}
}
@media screen and (max-width:1366px){
.products .item .txtcon{ margin-top:30px}
.products .item .txtcon .intro{ margin-bottom:30px}
}
@media screen and (max-width:1024px){
.menu{ display:none}
.header{ height:60px; background:#fff}
.header .wrap{ padding:0 15px}
.logo{ height:60px;}
.logo img{ height:50px}
.header.header-scroll, .header-scroll .logo{ height:60px;}
.banner a{ padding-top:60px; padding-bottom:40px; padding-left:60px;height:600px}
.banner img{ width:100%; height:100%; object-fit:cover}
.banner .swiper-pagination-bullets{ bottom:10px}
.banner .swiper-pagination-bullet:before{ height:6px; width:6px;}
.banner .txt{ font-size:50px; left:15px;}
.banner .swiper-pagination-bullets{left:15px}
.banner:before{width: calc(100% - 60px);}
.nbanner .imgbox{ padding-left:60px; padding-top:60px; padding-bottom:40px; height:340px}
.nbanner .imgbox .img{ padding-top:0; height:100%}
.nbanner:before{width: calc(100% - 60px);}
.nbanner .ntitle{ font-size:50px}
.m-menubtn{ display:block}
.wrap{ width:100%; padding:0 15px;}
.i-product .wrap, .footer .wrap{ padding:0 15px}
.i-product, .main{ padding:50px 0}
.title{ font-size:30px; margin-bottom:30px}
.i-product-list .item .pic{ height:300px;}
.i-product-list img{ width:100%; height:100%; object-fit:cover}
.i-product-list h3, .i-product-list .intro{ margin-bottom:15px}
.i-product-list .intro{ font-size:20px;}
.honorlist li .pic{ height:200px;}
.inner-nav{ bottom: calc(45px + 10%);}
.product-top{ margin-top:60px; padding-top:30px}
.product-top .ntitle{ margin-bottom:30px; font-size:50px; line-height:50px}
}
@media screen and (max-width:768px){
.i-product-list{ margin-bottom:4%}
.i-product-list2{ margin-right:0}
.i-product-list2 .item{ width:100%; margin-right:0; margin-bottom:4%}.i-product-list2 .item:last-child{ margin-bottom:0}
.i-product-list2 .item a{ display:flex; display:-webkit-flex; align-items:center; background:#f2f2f2}
.i-product-list2 .item .pic{ width:50%}
.i-product-list2 .item .txt{ margin-top:0; width:50%; padding-left:4%; padding-right:3%}
.i-product-list2 .item .more{ position:relative; right:auto;top:auto; margin-top:20px}
.i-product-list2 .item h3{ margin-bottom:10px}
.footer{ padding-bottom:60px;}
.m-footer{ display:block}
.nbanner .imgbox .img{ background-position:center !important}
.honorlist li{ width:47%}
.equipment .item{ width:47%}
.equipment .item .tit{ padding:10px}
.newslist li{ width:46%}
.newslist li:nth-child(2n)::after{ display:none}
.newslist li:nth-child(-n+3){ margin-top:100px}
.newslist li:nth-child(-n+2){ margin-top:0}
.newslist li:nth-child(3n){ margin-right:8%}
.newslist li:nth-child(2n){ margin-right:0}
.newslist li:nth-child(3n-2)::before{ display:none}
.newslist li:nth-child(2n-1)::before{content: "";display: block;width: 1000%;height: 1px;background-color: #DDD;position: absolute;top: -50px;left: 0;}
.newslist li:after{right: -8.5%;}
.newslist li:nth-child(3n)::after{ opacity:1; visibility:visible}
.contactBox{ padding:0 10%} 
.newscon .ntit{ padding-right:0; font-size:24px; line-height:28px}
.newscon .ntime{ position:relative; display:block}
.related-news .item{ width:100%; margin-top:3%}
.related-news .item .pic{ width:25%}
.related-news .item .txt{ padding-left:30%}
.related-news .next .tit{ text-align:left; margin-bottom:10px}
.related-news .next .tit:after{ right:0; left:auto}
.page_2 .more{ line-height:40px}
.products .item a{ display:block}
.products .item .pic{ width:100%}
.products .item .txtcon{ margin-top:0}
.products .item .txt{ padding:5%}
.products .item .txtcon .intro{ margin-bottom:3%}
.products .item .txtcon .num{ font-size:35px; font-weight:bold; line-height:35px; font-family:Arial; float:left; margin-right:5px}
.products .item .txtcon h2{ padding-top:0; padding-bottom:0; line-height:35px;}
.products .item .txtcon .more{ line-height:32px;padding: 0 10px; width:110px}
.product-list li a{ padding:15px}
.product-top .ntitle{ font-size:40px}
.nbannerbox-pro{ display:block}
.product-top{ background:none; margin-top:0}
.product-top:before{ display:none}
.product-top .ntitle{ display:none;}
.product-top-box{ padding:0; padding-bottom:10px}
.product-top-box:before{ width:100%; left:0}
.pro-related a{ padding:5%}
.product_con .protit{ font-size:18px; margin-top:20px; margin-bottom:10px}

}
@media screen and (max-width:640px){
.banner .txt, .nbanner .ntitle{ font-size:40px}
.nbanner .ntitle{ left:15px;-webkit-transform: translate(0); -moz-transform: translate(0); transform: translate(0);}
.nbanner .imgbox{ height:300px; padding-bottom:20px}
.nbanner:before{ height:70%}
.i-product, .main{padding:30px 0}
.i-product-list h3{ font-size:24px}
.i-product-list .intro{ font-size:16px; padding:20px 80px}
.i-product-list .item .pic{ height:240px}
.i-product-list .more{ line-height:32px}
.i-product-list2 .item h3{ font-size:20px; margin-bottom:5px}
.i-product-list2 .item h4{ font-size:14px;}
.footer{ padding-top:15px}
.footer .left{ float:none;}
.footer .right{ float:none}
.footer .share li{ margin-right:10px; margin-left:0}
.flink a{ margin-right:10px; padding-right:10px;}
.intro-list li{ width:97%; margin-bottom:3%}
.intro-list li:last-child{ margin-bottom:0}
.intro-list h3{ margin-top:10px; margin-bottom:10px}
.main .content{ line-height:24px}
.content_abt{ font-size:15px}
.company p{ text-align:left}
.honorlist li{ width:97%}
.honorlist li .pic{ height:220px}
.equipment .item{ width:97%}
.contactBox{ padding:0}
.contactBox h2{ font-size:24px}
.contactBox .item{ padding:20px 0; padding-left:70px; font-size:14px; line-height:20px}
.contactBox .item p{ margin-bottom:8px}
.newslist li{ width:100%; margin-right:0; margin-top:8%}
.newslist li:nth-child(-n+3){ margin-top:8%}
.newslist li:nth-child(1){ margin-top:0}
.newslist li:after{ display:none}
.newslist li:nth-child(2n-1)::before{ display:none}
.newslist h3{ height:auto}
.related-news .item h3{ font-size:16px;}
.newscon .ntit{ font-size:20px; line-height:26px;}
.product-list ul{ margin-right:0}
.product-list li{ width:100%; margin-right:0}
.inner-nav{ bottom:45px}
.inner-nav li{ margin-left:0}
.inner-nav li a{ font-size:16px; line-height:40px; width:auto; padding:0 15px}
.inner-nav ul{justify-content:flex-start;}
.products .item .txtcon .num, .products .item .txtcon h2{ font-size:24px}
.nav-sed{ font-size:16px}
.product-top-box .left{ width:100%}
.product-top-box .right{ width:100%}
.package{ flex-wrap:wrap;}
.package li{ width:100%; margin-bottom:3%}
.jiancebg li{ width:49%}
.jiancebg02 li{ margin-right:1%}
.jiancebg02 li:nth-child(2n){ float:right; margin-right:0}
.product-top .ntitle{ font-size:30px; margin-bottom:20px; line-height:30px}
.product-top-box .right h2{ font-size:24px; line-height:26px; margin-bottom:10px}
}
@media screen and (max-width:425px){
.i-product-list, .i-product-list2 .item{ margin-bottom:5%}
.banner a{ padding-left:45px;height:550px}
.banner:before{width: calc(100% - 45px);}
.banner .txt, .nbanner .ntitle{ font-size:35px}
.nbanner .imgbox{ padding-left:45px}
.title{ font-size:24px}
.i-product-list .item .pic{ height:200px;}
.i-product-list .txt{ width:90%}
.i-product-list .intro{ padding:10px 0}
.i-product-list .intro:before, .i-product-list .intro:after{ display:none}
.i-product-list2 .item h3{ font-size:18px; margin-bottom:0}
}