@charset "utf-8";

/* CSS Document */

.m-menubtn{position:absolute;z-index: 102;top:0;right: 0;width:20px;height:60px; margin:0 1rem;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);}
.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);}
.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:16px;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:26px;}
.m-menu li>i:after{ content:""; width:2px; height:16px; background:#c2c2c2; position:absolute; left:19px;top:19px;}
.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 a{color:#333; line-height:26px;font-size:14px; padding:2px 20px; position:relative}


.m-footer{color:#fff; position:fixed; width:100%; left:0;bottom:0; display:none; z-index:99;background: #ffaf42;font-size: 12px;background: -webkit-linear-gradient(left, #ffaf42 , #ff798f);
    background: -o-linear-gradient(right, #ffaf42, #ff798f);
    background: -moz-linear-gradient(right, #ffaf42, #ff798f);
    background: linear-gradient(to right, #ffaf42 , #ff798f);}
.m-footer li{ float:left; width:50%; text-align:center}
.m-footer a{ display:block; line-height:1;color:#fff; padding:2px 0 4px}
.m-footer a i{display:block;height:30px;}
.m-footer .tel i{ background:url(../images/f-ico1.png) no-repeat center; background-size:20px;}
.m-footer .mail i{background:url(../images/f-ico3.png) no-repeat center; background-size:20px;}
.m-footer span{ display:block;}
.inner-nav-m{ display:none; position:absolute;right:0;top:0;width:100%;z-index:9}
.inner-nav-m .tit{font-size:16px; line-height:40px; height:45px; white-space:nowrap; text-overflow:ellipsis; padding-right:20px; color:#333; float:right;position:relative;}
.inner-nav-m .tit:after{ content:""; width:6px; height:6px; border-top:1px solid #333; border-right:1px solid #333; -moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg); display:block; position:absolute;right:5px;top:16px}
.inner-nav-m .sub{position:absolute;top:45px; width:100%;left:0; background:#093580; display:none; }
.inner-nav-m .sub a{ display:block; border-bottom:1px solid rgba(255,255,255,.2); background:#093580; line-height:20px;color:#fff; padding:8px 10px}
.inner-nav-m .sub a:hover{ background:#f4ce1a;}



@media screen and (max-width:1920px){
/*.f-contact li.add{ font-size:17px; max-width:300px}*/
.f-contact li.add{ font-size:17px; max-width:320px}
.f-contact li .ico{flex-shrink:0}
.i-about .cont h3{ font-size:1.3em}
.i-about .cont .intro{-webkit-line-clamp: 3;}

}
@media screen and (max-width:1680px){
.news-tit h2{ font-size:2.2rem}
.nbanner_news .news-tit:after{height:9rem}
.f-contact li{margin-left: 30px; font-size:18px}
.i-about .cont{ font-size:16px}
.i-about .cont h3{ font-size:1.17em}
.left-nav{ width:240px}
.left-nav li{ font-size:1.125rem}
.main_product .rightCon{ width:calc(100% - 280px)}
}
@media screen and (max-width:1440px){
.menu>ul>li{ margin:0 25px}
.wrap{ width:94%}
.banner .swiper-slide-active .txt{left:3%}
.banner .swiper-pagination{ padding:0 3%}
.i-about .wrap{ padding-right:3%}
.space{ padding:60px 0}
.title{ font-size:42px;}
.title .en{ font-size:.56em}
.nbanner .title .cn{ font-size:1.1em}
.main .content-about .txt{ font-size:20px}
.main .content-about h2{ font-size:1.4em}
.left-nav{ width:240px}
.left-nav li{ font-size:1.03rem}
.left-nav li a{ padding:8px 0}
.left-nav .list{padding: 20px 30px 50px;}
.left-nav li a:after{top:20px;width: 5px;height: 5px;}
.main_product .rightCon{width: calc(100% - 280px);}
.main_product .rightCon .t-tit{ font-size:1.5rem}
.main_product .rightCon .p-tit{ font-size:1.375rem}
.i-product-nav li a{padding:13px 15px}
.inner-nav li a{padding: 18px 40px;}
.nbanner_news .news-tit:after{height: 6rem;}
.nbanner_news .news-tit{ font-size:14px}
.news-tit h2{ font-size:2rem}

}
@media screen and (max-width:1366px){
.menu>ul>li{ margin:0 15px}
.menu>ul>li:nth-child(2)>a, .menu>ul>li:nth-child(3)>a{ padding-right:15px}
.f-contact{ max-width:calc(100% - 130px)}
.i-product-nav li a{padding:12px 10px}
.video-show{ width:900px}
}
@media screen and (max-width:1024px){
body,html{ font-size:14px;}
.menu, .header .tel{ display:none}
.header{  background:#fff}
.logo{ padding-top:0; height:60px;}
.header-scroll .logo{ height:60px}
.logo .ico_1{ display:none}
.logo .ico_2{ display:block}
.logo img{ height:45px;}
.wrap, .header .wrap{ width:100%; padding:0 1rem}
.banner,.nbanner,.nbanner-abt{ margin-top:60px}
.banner{ height:auto}
.banner .txt{ font-size:35px}
.m-menubtn{ display:block}

.space{ padding:35px 0}
.title{ font-size:32px;margin-bottom: 25px;}
.title .line{ width:40px;margin: 10px auto;}
.footer{ padding-top:30px}
.footer .top{ padding-bottom:20px; margin-bottom:20px}
.f-logo{ width:100%}
.f-logo img{ height:40px; margin:0 auto; opacity:.4}
.f-contact{ max-width:100%; width:100%; margin-top:20px}
.f-contact li{ margin-left:0; margin-right:10px;font-size: 16px; margin-bottom:10px}
.f-contact .ico{ width:35px; height:35px}
.f-contact .ico img{ width:15px}
.f-contact li.add{ font-size:16px; max-width:inherit}
.f-nav{ line-height:30px}
.copyright{ font-size:14px}
.i-product-nav{margin-bottom: 25px;}
.i-product-nav li{ display:none}
.i-product-nav li:first-child{ display:block;}
.i-product-nav li a{ padding:10px 20px}
.i-product-list .txt, .i-product-newlist .txt{ font-size:1.285rem;line-height:45px;}
.i-product-newlist{ padding-bottom:30px}
.i-about.space{ padding:0}
.i-about:after{ display:none}
.i-about .wrap{ display:block; padding:0}
.i-about .left{ width:100%; float:none}
.i-about .right{ width:100%; padding:2rem 1rem 2.25rem}
.i-about .cont{ margin-bottom:1.5rem}
.i-about .cont h3{ margin-bottom:10px}
.i-about .cont p{ margin-bottom:0}
.more{width:120px; line-height:35px;font-size: .95rem;}
.video-show{width: 90%;}
.video-close{right:0}
.i-custom .left .video-btn{ background-size:auto 60px}
.i-client-list .swiper-pagination{bottom:-30px}
.i-news.space{ padding-top:35px}
.i-news-list .txt h4{ font-size:1.285rem}
.i-news .content{ margin-bottom:25px}
.i-news .left .txt{ padding:20px 15px}
.i-news .left .tm{ width:60px;font-size: 12px;}
.i-news .left .tm span{ font-size:3em}
.i-news .left .intro{ width:calc(100% - 60px)}
.i-news .left h3{ font-size:1.285rem}

.nbanner .title, .nbanner-abt .title{ top:40%}
.main .content{ line-height:1.8}
.main .content-about .video{ width:100%; margin-bottom:2em}
.main .content-about .txt{ width:100%; font-size:16px;}
.main .content-about h2{ margin-top:0; margin-bottom:.5em}
.main .content-about p{ margin-bottom:10px}
.clientList li{ width:19%}
.left-nav{ position:relative;top:inherit}
.inner-nav ul{ margin-top:-24px}
.inner-nav li{ margin-right:10px}
.inner-nav li a{ font-size:16px;padding: 12px 20px;}
.factoryimgList .tit{ line-height:45px}
.newsList li{ width:31.33%}
.newsList h3{ font-size:1.25em}
.nbanner_news:before{ display:none}
.nbanner_news .news-tit:after{ display:none}
.nbanner_news .news-tit{ padding:4em 0 3em;position: relative;left:auto; margin-left:0; width:100%; font-size:13px;}
.news-tit h2{ font-size:1.5em}
.news-tit p span{ margin:0 5px;opacity: .6;}

.main_news{ background:#fff; padding-bottom:30px}
.n-article{top:0; border-radius:0; padding:35px 0}
.page-list{ margin-top:30px; padding-top:20px}
.page-list .back img{ height:40px !important}
.page-list p{ font-size:1em;line-height: 1.8;}
.newsRelated{ padding-bottom:30px}
.newsRelated .txt{ padding:1em 0 0}
.newsRelated h3{ font-size:1.25em}
.newsRelated p{ margin-bottom:.5em}
.process .ico{ width:65px; height:65px}
.process .ico img{ height:30px}
.process .jt{ height:30px; margin-top:-15px}
.craftList{ padding:30px 0}
.craftList .picList, .craftList .txt{ padding:0 30px}
.craftList .txt{ font-size:1em}
.craftList .txt .tit{padding-bottom: 5px;margin-bottom: 10px;}
.craftList .txt .tit::after{ width:25px}
.content-contact{ font-size:16px; line-height:1.8}
.contact-list{ margin-bottom:30px} 
.contact-list li{ width:25%}
.contact-list .ico{ width:65px; height:65px}
.contact-list .ico img{ height:32px}
.contact-list .tit{ margin:5px 0}
.contact-list p{ font-weight:normal}

#allmap{ height:400px}
.left-nav{ width:100%; margin-bottom:20px}
.left-nav .list{ border-radius:0; padding:0; border:0; overflow:hidden}
.left-nav .list ul{ display:flex; display:-webkit-flex;flex-wrap:wrap; margin-right:-1%}
.left-nav .list li{ width:15.6666%; margin-right:1%; margin-bottom:1%;border-bottom:0;}
.left-nav li a{padding:5px; text-align:center; height:40px; line-height:1.2; background:#f3f3f3;display:flex; display:-webkit-flex;justify-content:center;align-items:center;}
.left-nav li a:after{ display:none}
.left-nav li.cur a{color: #fff; background:#ffaf42;
    background: -webkit-linear-gradient(left, #ffaf42 , #ff798f);
    background: -o-linear-gradient(right, #ffaf42, #ff798f);
    background: -moz-linear-gradient(right, #ffaf42, #ff798f);
    background: linear-gradient(to right, #ffaf42 , #ff798f);}
.main_product .rightCon{ width:100%}
.main_product .rightCon .t-tit{ margin-bottom:15px; line-height:1.4;}
.productList{ overflow:hidden}
.productList li{ width:31.33%}
.productList .tit{ line-height:45px; font-size:1.25rem}
.pages{ margin-top:20px}
.main_product .rightCon .p-tit{ margin-bottom:10px; padding-top:20px}
.float_kf{ display:none}
}
@media screen and (max-width:768px){
.banner .swiper-pagination-bullet{ width:10px}
.banner .swiper-pagination-bullet-active{ width:20px}
.banner.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ margin:0 3px}
.i-product-newlist .swiper-pagination-bullet, .i-custom-list .swiper-pagination-bullet, .i-client-list .swiper-pagination-bullet, .newsRelated .swiper-pagination-bullet{ width:15px; height:3px}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ margin:0 3px}
.banner .txt{ font-size:24px}
.space{ padding:25px 0}
.i-product-list li{ width:48%}
.i-product-list .txt, .i-product-newlist .txt{ font-size:1.25rem;line-height: 40px;}
.title{ font-size:26px}
.i-custom .content{flex-wrap:wrap}
.i-custom .left, .i-custom .right{ width:100%}
.i-custom .wrap{ padding:0 !important}
.i-client-list li{ width:25%}
.i-client-list ul li:nth-child(6n){border-right:1px solid #f2f2f2}
.i-client-list ul li:nth-child(4n){ border-right:0}
.i-news.space{ padding-top:25px}
.i-news .content{ display:block}
.i-news .left{ width:100%}
.i-news .right{ width:100%; margin-top:2%; padding:3%}
.footer{ padding-bottom:60px;}
.footer .top{ padding-bottom:0}
.footer .bot{ padding-right:0; min-height:inherit; font-weight:normal}
.f-ewm{ position:relative;right:auto;}
.f-contact .add .ico img{ width:12px}
.f-nav{ line-height:1.8}
.f-nav h4{ margin-right:15px}
.f-nav h4 span{ padding:0 10px}
.f-nav .sub a{ padding-right:8px; margin-right:5px}
.copyright{ font-size:12px; padding-bottom:2%}
.m-footer{ display:block}
.f-contact li.qq a{ pointer-events:none}
.inner-nav ul{ margin-top:0; padding-top:25px}
.inner-nav li a{ font-size:14px; padding:10px}
.main .content-about .txt{ font-size:14px}
.main .content-about p{ font-weight:normal}
.clientList li{ width:24%}
.factoryimgList ul{ margin-right:0}
.factoryimgList li{ width:100%; margin-right:0}
.factoryimgList .tit{ font-size:1.25rem;line-height: 40px;}
.newsList{ overflow:hidden}
.newsList li{ width:48%}
.newsList h3{font-size:1.25rem; margin-bottom:.1em}
.newsList p{ margin-bottom:.5em}
.serviceList h3{padding: .5em 0 0;}
.serviceList ul{flex-wrap:wrap}
.serviceList li{ width:100%;margin-bottom:3%}
.process ul{ flex-wrap:wrap}
.process li{ width:30%;}
.process li:nth-child(1), .process li:nth-child(2), .process li:nth-child(3){ margin-bottom:3%}
.craftList .topDot, .craftList .botDot, .craftList li:after{ left:0;margin-left:0}
.craftList::after{ left:6px}
.craftList li{flex-wrap:wrap}
.craftList li::after{top:8px; margin-top:0}
.craftList .picList, .craftList .txt{ width:100%; padding:0 0 0 30px;text-align:left}
.craftList .txt{ margin-bottom:.5em}
.craftList .txt .tit::after{left:0}
.craftList li:nth-child(2n) .txt{ -ms-flex-order:0;order: 0;}
.craftList li:nth-child(2n) .picList div{ margin-right:1%; margin-left:0}

.productList li{ width:48%}
.productList .tit{ line-height:40px}
.left-nav li{ font-size:14px; width:24%}
.nbanner-abt:before{ content:""; width:100%; padding-top:26.0416%; display:block}
.nbanner-abt img{ position:absolute; left:0;top:0; width:100%; height:100%; object-fit:cover}

}
@media screen and (max-width:640px){
.newsList ul{ margin-right:0}
.newsList li{ width:100%; margin-right:0; margin-bottom:3%}
.newsList p{ margin-bottom:.2em}
.nbanner .title{top:35%}
.content-contact{ font-size:14px; line-height:1.6}
.contact-list ul{ flex-wrap:wrap}
.contact-list li{ width:100%; padding:0; border-bottom:1px solid #d8d8d8; padding-bottom:10px; margin-bottom:10px; position:relative; padding-left:55px; text-align:left}
.contact-list .ico{ width:45px; height:45px; left:0;top:0; position:absolute}
.contact-list .ico img{ height:25px}
.contact-list .tit{ margin:0}

#allmap{ height:260px}
}
@media screen and (max-width:480px){
.banner .txt{ font-size:16px}
.title{ font-size:22px; margin-bottom: 15px;}
.title .line{ width:20px;margin: 5px auto;}
.space{ padding:20px 0}
.i-product-newlist{ padding-bottom:20px}
.i-client-list .swiper-pagination{bottom:-20px}
.i-product-list .txt, .i-product-newlist .txt{ font-size:1.145em}
.i-product-nav{ margin-top:0; margin-bottom:15px}
.i-product-nav li a{ padding:5px 20px}
.i-news.space{ padding-top:20px}
.more {width:100px;line-height:30px;font-size:.9rem;}
.more .bg{left: 2px;top: 3px;}
.i-about .cont{ font-size:14px; margin-bottom:.8rem}
.i-about .cont .intro{-webkit-line-clamp: 5;}
.i-news .content{ margin-bottom:.8rem}
.i-news .left h3{font-size:1.145em}
.i-news .left p{ font-size:.9em}
.i-news-list .txt span{ font-size:.9em}
.i-news-list .txt h4{ font-size:1.145em}
.i-news-list .mor{line-height: 20px;padding: 0 5px;}
.i-client-list li{ width:33.33%}
.i-client-list ul li:nth-child(4n){border-right:1px solid #f2f2f2}
.i-client-list ul li:nth-child(3n){border-right:0}
.nbanner .title{top:30%}
.nbanner_news .news-tit{padding: 2.5em 0 2em; font-size:12px}
.n-article{ padding:25px 0}
.newsList li, .serviceList li{ margin-bottom:4%}
.newsRelated{ padding-bottom:20px}
.newsRelated h3{font-size:1.145em;margin-bottom:0}
.newsRelated p{ margin-bottom:0}
.serviceList h3{ font-size:1.25rem}
.factoryimgList .tit, .newsList h3{ font-size:1.145rem}

.f-contact li.add{ font-size:14px;}
.f-contact .ico{ width:30px; height:30px}
.f-nav{ flex-wrap:wrap}
.f-nav .sub{ width:100%; line-height:1.6; margin-top:5px}
.craftList li{ margin-bottom:4%}
.craftList .txt .tit{ font-size:1.25em}
.process .ico{ width:50px; height:50px}
.process .ico img{ height:25px}
.process .jt{height:20px; margin-top:-10px}
.process h3{font-size:1.25em;margin: .5em 0 .2em;}
.process .txt{ line-height:1.6}
.productList ul{ margin-right:0}
.productList li{ width:100%; margin-right:0}
.productList .tit{ font-size:1.145rem}
.productpic-slide .preview{ width:100%}
.main_product .rightCon .t-tit{ font-size:1.25em}
.left-nav .list li{ width:32.3333%}
.main .content-about .video{ margin-bottom:1em}
.main .content-about h2{ font-size:1.285em; margin-bottom:.2em}
.main_product .rightCon .p-tit{ font-size:1.15rem; padding-top: 10px;}

}
@media screen and (max-width:425px){
.f-ewm img{ width:90px}
}