@charset "utf-8";

/* CSS Document */

.m-menubtn{position:absolute;z-index:1002;top:0;right: 0;width:60px;height:60px;cursor: pointer;-webkit-transition:.5s;transition:.5s; display:none}
.m-menubtn span{position: absolute;top:0;bottom: 0;left: 0; right: 0; width:20px;height:2px; background: #333; 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: #333;}
.m-menubtn span:before {bottom: 5px;}
.m-menubtn span:after {bottom: -5px;}
.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:#db261d}
.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;background:#db261d}
.m-menubtn.active span {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);background:#db261d}
.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-menubtn:before {content: "Menu";font-size: 12px;position: absolute;bottom: 10px; left: 0; right: 0; margin: auto;text-align: center; color:#fff}

*/



.m-menu{position: fixed; right:0;left:0;top:60px; width:100%; height:100vh;z-index:400; background:#fff;display: none;}
.m-menu .m-menu-con{height: -webkit-calc(100vh - 60px);height: -moz-calc(100vh - 60px);height: calc(100vh - 60px);overflow: auto;padding-bottom: 80px;}
.m-menu li{ position: relative;border-bottom: 1px solid #ddd;}
.m-menu li>a{ font-size:17px;line-height:55px; padding:0 20px; position:relative}
.m-menu li>i{ position:absolute; width:55px; height:55px; right:0;top:0;}
.m-menu li>i:before{ content:""; width:16px; height:2px; background:#c2c2c2; position:absolute; left:12px;top:24px;}
.m-menu li>i:after{ content:""; width:2px; height:16px; background:#c2c2c2; position:absolute; left:19px;top:17px;}
.m-menu li.on i:after{ -moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg); opacity:0}

.m-menu a{ display:block; color:#101010;}
.m-menu .sub{ display:none; background:#f5f5f5; padding:10px 0}
.m-menu .sub li{ border-bottom:0}
.m-menu .sub a{color:#333; line-height:26px;font-size:14px; padding:2px 20px; position:relative}
.m-menu .sub ul ul{ padding-left:20px; padding-bottom:5px}





.m-footer{ position:fixed; width:100%; height:45px; line-height:1; left:0; bottom:0;background:#db261d; color:#fff;font-size:12px; display:none; z-index:1000;}
.m-footer a{ color:#fff;}
.m-footer li{ float:left; width:33.33%; text-align:center;}
.m-footer .tel i{ width:100%; height:30px; background:url(../images/c-ico1.png) no-repeat center center;  background-size:20px auto; margin:0 auto; display:block;}
.m-footer .tel2 i{ width:100%; height:30px; background:url(../images/c-ico2.png) no-repeat center center;  background-size:20px auto; margin:0 auto; display:block;}
.m-footer .mail i{ width:100%; height:30px; background:url(../images/c-ico3.png) no-repeat center center;  background-size:20px auto; margin:0 auto; display:block;}

@media screen and (max-width:1680px){
.menu ul>li>a{ padding:0 30px;}
.i-about .right{padding-right:7.5%}
}

@media screen and (max-width:1440px){
.menu ul>li>a{padding: 0 25px;}
.nbanner .nbantit h4{font-size: 40px;}
.nbanner .nbantit h5{ font-size:20px}
}

@media screen and (max-width:1366px){
.wrap{ width:94%}
.i-about .right{ padding-right:3%}
}

@media screen and (max-width:1250px){
.wrap{ width:100%}
.menu ul>li>a{padding: 0 18px;}
.header .tel{ margin-left:20px}
.logo img{ height:75px}
.f-nav li{ margin-left:60px}
.content-about .imgBox{width:350px;height: 350px;}
.content-about .img{ width:100%; height:100%}
.content-about h1{ margin-top:0}
.content-about h2{ max-width:100%}
}

@media screen and (max-width:1024px){
.menu,.header .tel{ display:none}
.header{ height:60px;line-height:60px}
.logo a{ height:60px}
.logo img{ height:50px;}
.m-menubtn{ display:block}
.banner, .nbanner{ margin-top:60px}
.space{ padding:30px 0}
.title{ font-size:1.875rem;margin-bottom:.8em}
.f20{font-size: 18px;}
.more{ width:100px; line-height:36px;}
.banner.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:3%!important}
.banner .swiper-pagination-bullet{ width:8px; height:8px;}
.banner.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ margin:0 5px}
.i-about .left{ position:relative; height:600px; overflow:hidden; width:100%}
.i-about .right{ width:100%; padding:2rem 1rem; min-height:inherit}
.i-about .right .content{ margin-bottom:1em}
.i-about .content h2{ font-size:1.3em}
.i-about .right .content p{ margin-bottom:.5em}
.i-about .more{ line-height:34px}
.i-process.space{ padding:30px 0}
.i-process .title2{ font-size:1.6rem;margin-bottom:.8em}
.i-processList li{ font-size:16px}
.i-processList .ico{ width:90px; height:90px;}
.i-processList .ico img{ height:40px; display:block}
.i-processList li:after{width: 20px;height: 14px; background-size:cover;right:-10px;top: 40px;}
.i-newsList .txt, .tj-newsList .txt{ padding:1.5em}
.i-newsList h3{ margin-bottom:.5em}
.i-newsList .intro{-webkit-line-clamp:2;font-size: .9em;margin-bottom: 1em;}
.i-newsList .more{line-height:36px}
.footer{ text-align:center;font-size: 14px; padding-top:20px}
.footer-top{ padding-bottom:20px}
.f-nav{ display:none}
.f-contact{ float:none}
.f-contact .tel{ margin-bottom:10px;background: url(../images/f-tel.png) no-repeat center top; background-size:30px;padding-left:0;padding-top:40px;}
.f-contact .tel h3{ font-size:18px}
.f-contact p{margin-left:0}
.f-contact .tel h3 span:nth-child(2){ padding-right:0}
.copyright{ padding:10px 0}
.float_kf .item>a{ width:45px; height:45px;}
.float_kf .backtop:before{width:8px;height: 8px;border-top: 1px solid #fff;border-left: 1px solid #fff;left:18px;top:20px;}

.nbanner .nbantit h4{ font-size:30px}
.nbanner .nbantit h5{font-size: 16px; margin-top:.2em}
.inner-nav li a{font-size: 16px;padding: 15px 20px}
.newslist .intro{ margin-bottom:1.5em;font-size: 14px;}
.f24{ font-size:20px}
.newsCon{ padding-top:70px}
.newsCon .newstit{ font-size:30px}
.newsCon .newstm{padding:1em 0;}
.n-article{ margin-top:1em}
.page-list{ margin-top: 2em; padding-top: 1em;}
.page-list .more{top:1.5em}
.tj-newsList{ padding-bottom:30px}
.tj-newsList .intro{-webkit-line-clamp:2}
.anchor{top:-60px}
.productList h3{ font-size:30px;}

.content-contact{ display:block; font-size:18px; line-height:1.8}
.contact-list, .content-contact .map{ width:100%}
.contact-list{ padding:4% 5%}
.contact-list li{ padding:2% 0}
.contact-list .tit{ line-height:1.2}
.contact-list .ico{ width:40px;}
#allmap{ height:300px}
.swiper-pagination-bullet{ width:8px!important; height:8px!important;}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:0!important}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ margin:0 5px !important}

.content-about .left,  .content-about .right{ width:100%}
.main .content-about{ font-size:16px;}
.content-about h1{ font-size:1.25em}
.content-about h2{ font-size:1.875em;margin-bottom: .4em;margin-top: .2em;}
.content-about p{ margin-bottom:.5em}
.main_culture.space{ padding:30px 0}
.main_culture ul{flex-wrap: wrap}
.main_culture li{ width:33.33%;background: url(../images/border.png) no-repeat center; margin-bottom:2%;font-size:20px;}
.culList li{ padding:3%}
.culList li p{ line-height:1.5}
}
@media screen and (max-width:768px){
html,body{ font-size:14px}
.banner a:before{content: "";padding-top:50%;display: block;}
.banner img{ position:absolute; left:0;top:0;right:0;bottom:0;height: 100%;}
.i-productList li{ width:48%; padding:2%}
.i-about .left{ height:450px}
.i-about .img{ width:350px; height:350px;}
.i-newsList{ padding-bottom:30px;}
.i-newsList .swiper-pagination{ display:block;bottom:0}
.i-processList ul{flex-wrap:wrap}
.i-processList li{ width:33.33%;}
.i-processList li:nth-child(1),.i-processList li:nth-child(2),.i-processList li:nth-child(3){ margin-bottom:2%}
.i-processList li:nth-child(3)::after{ display:none}
.newslist li a{align-items: flex-start;}
.newslist .txt{ padding-top:1%}
.newslist .intro{ display:none}
.n-article{line-height:1.8}
.newsCon .newstit{ font-size:1.8em}
.float_kf{ display:none}
.footer{ padding-bottom:55px}
.m-footer{ display:block}
.main .content{ font-size:14px; line-height:1.8}
.productList .item{ padding:30px 0;}
.productList h3{ font-size:1.8em}
.content-contact{ font-size:16px;}
.contact-list .ico{ width:30px}
.content-about h1{ font-size:1.2em}
.content-about h2{ font-size:1.5em}
.culList ul{ flex-wrap:wrap}
.culList li{ width:49%; margin-bottom:2%}

}
@media screen and (max-width:640px){
.i-about .img{ width:280px; height:280px}
.i-about .left{ height:350px}
.more{ font-size:12px;}
.more span{ margin-left:2px}
.newslist .txt{ padding-top:0}
.newslist .more{width: 90px;line-height: 28px;}
.i-newsList .more{ line-height:32px;width:85px;}
.i-about .more{line-height:30px}
.nbanner:before{ padding-top:25%}
.nbanner .nbantit h4{ font-size:22px}
.productList .item .wrap{ display:block;}
.productList .leftPic, .productList .rightCon{ width:100%; float:none}
.productList .leftPic{ margin-bottom:1em; margin-right:0}
.productpic-slide{ padding-bottom:10px}
.productpic-slide .swiper-button-prev span{ left:0}
.productpic-slide .swiper-button-next span{ right:0}
.productpic-slide:hover .swiper-button-prev span{left:2%}
.productpic-slide:hover .swiper-button-next span{right:2%}
.content-about .imgBox{ width:280px; height:280px}
.main_culture li{ font-size:18px; background-size: 120px;height: 120px;}
}

@media screen and (max-width:480px){
.space, .i-process.space, .productList .item{ padding:20px 0}
.more{width:85px;line-height: 34px;}
.title{ font-size:1.5rem}
.title:after{ width:20px; margin:2px auto 0}
.i-processList li{ font-size:14px;padding:0}
.i-processList li:nth-child(1), .i-processList li:nth-child(2), .i-processList li:nth-child(3){ margin-bottom:1.2em}
.i-productList .tit{ font-size:16px}
.i-processList .ico{ width:60px; height:60px;box-shadow: 0 2px 5px rgba(0,0,0,.05);margin: 0 auto 5px;}
.i-processList .ico img{ height:30px}
.i-processList li:after{ width:10px; height:7px;right: -5px;top: 30px;}
.i-about .right .content{ line-height:1.6}
.i-about .content h2{ font-size:1.15em}
.i-about .img{ width:220px; height:220px}
.i-about .more{ width:85px}
.i-process .title2{ font-size:1.35rem}
.footer{ font-size:12px}
.f-contact .tel h3{ font-size:1.3em}
.f-contact .tel h3 span{ padding-right:20px;}
.f-contact .tel h3 span:first-child::after{ height:10px;right: 10px;}
.nbanner .nbantit h4{ font-size:20px}
.nbanner .nbantit h5{ font-size:14px}
.inner-nav li:after{ height:3px}
.inner-nav li a{ padding:15px 0;font-size:1.15em;}
.newslist .tm{ font-size:0.85em}
.newslist .more{width:75px;line-height: 26px;}
.newslist h3.f24{ font-size:1.1em;padding-top: 0.2em;}
.newslist .pic{ width:40%}
.newslist .txt{ width:60%;}
.newsCon .newstit{font-size:1.45rem}
.newsCon .newstm{ font-size:12px; padding-bottom:.5em}
.productList h3{font-size:1.4em;margin-bottom:.5em}
.productList h3:after{ width:20px; margin-top:.2em}
.contact-list h2{ font-size:1.1em;padding-bottom: .5em;margin-bottom: .5em;line-height: 1.2;}
.content-about .left{ overflow:hidden}
.content-about .imgBox{ width:220px; height:220px}
.main_culture li{background-size: 100px;height: 100px;}
.culList li{ width:100%; padding:4% 3%;font-size:1.15em;}
.culList .ico{ margin-bottom:.2em}
.culList .ico img{ height:40px}
}