@charset "utf-8";
/* CSS Document */
.m-btn{height:60px;width:55px;display:none;position: absolute;right: 0;top: 0;}
.m-btn span{ width:20px; height:2px;background: #fff; position:absolute; left:17.5px; top:24px;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s;}
.m-btn .line1{-webkit-transform-origin:2px center;-moz-transform-origin:2px center;transform-origin:2px center}
.m-btn .line2{top:30px;}
.m-btn .line3{top:36px;-webkit-transform-origin:1px center;-moz-transform-origin:1px center;-ms-transform-origin:1px center;-o-transform-origin:1px center;transform-origin:1px center}
.m-btn.open-menu .line2 {opacity: 0;filter: alpha(opacity=0);}
.m-btn.open-menu .line1{webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
.m-btn.open-menu .line3{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}

.mobile-menu{width: 270px;position: fixed; top: 0; height: 100%; overflow: hidden;background: #1c55a4;z-index: 1001;left: 0;transform: translate3d(-270px,0,0);-webkit-transform: translate3d(-270px,0,0);-ms-transform: translate3d(-270px,0,0);-sand-transform: translate3d(-270px,0,0); -webkit-transition: transform .3s ease; -moz-transition: transform .3s ease; -o-transition: transform .3s ease; transition: transform .3s ease;}
.mobile-menu .closed{ display:block; width:30px; height:30px; background:url(../images/guanbi.png) no-repeat center #f8f8f8; position:absolute; right:15px; top:15px}
.mobile-menu ul{ width:100%;height:100%;overflow-y:auto;overflow-x:hidden; padding-top:20px}
.mobile-menu a{ display:block}
.mobile-menu li{ position:relative;border-bottom: 1px solid rgba(255,255,255,.23);}
.mobile-menu li.fir a{ display:inline-block; position:relative}
.mobile-menu li.fir a:after{ content:""; width:1px; height:15px; background:rgba(255,255,255,.3); position:absolute; right:0;top:18px}
.mobile-menu li.fir a:last-child::after{ display:none}
.mobile-menu li>a{display: block;padding:12px 15px; font-size: 16px; line-height: 26px; overflow-x: hidden;text-transform: uppercase;color: #fff;}
.mobile-menu .menua i{ width:17px; height:17px; background:url(../images/ico_03.png) no-repeat; background-size:contain; position:absolute; right:3%; top:15px}
.mobile-menu li .sub{ padding:0 3%; line-height:30px; margin:5px 0 15px 0; font-size:14px; display:none}

.mobile-menu .m-search{padding:12px 15px; font-size: 16px;border-bottom: 1px solid rgba(92,92,92,.23);position:relative}
.mobile-menu .m-search form{ position:relative}
.mobile-menu .m-search .input{background-color: rgba(255,255,255,.1);border: none;padding: 14px 50px 14px 18px;font-size: 14px;color: #fff;height: 48px;width:100%;color: rgba(255,255,255,.8)}
.mobile-menu .m-search .btn{position: absolute;top:0;right: 0;bottom:0;font-size: 0;border: none;background:url(../images/search-btn01.png) no-repeat center;width: 50px;}
.mobile-menu.show{left: 0;transform: translate3d(0,0,0);-webkit-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-sand-transform: translate3d(0,0,0);}
.mobile-menu-bg, .sidebar-left-bg{position: fixed;top: 0;left: 0;width: 100%; height: 100%;z-index: 1000; display:none;background-color: rgba(0,0,0,.7);}

.mobile-sidebar-btn{ font-weight:bold; color:#333; display:flex; display:-webkit-flex; align-items:center; opacity:0; visibility:hidden; height:0; overflow:hidden; font-size:16px}
.mobile-sidebar-btn .line{ margin-right:10px; position:relative}
.mobile-sidebar-btn .line, .mobile-sidebar-btn .line:before, .mobile-sidebar-btn .line:after{display: inline-block;width: 18px;height: 2px; background:#333;}
.mobile-sidebar-btn .line:before, .mobile-sidebar-btn .line:after{position: absolute;content: "";left: 0;}
.mobile-sidebar-btn .line:before{top: -6px;}
.mobile-sidebar-btn .line:after{top: 6px;}
.sidebar-left-close{display: none;padding: 16px 20px;background-color: #000;text-align: right; color:#fff}
.sidebar-left-close span{text-transform: uppercase;font-size: 12px;line-height: 35px;position: relative;cursor: pointer;padding-right: 21px;}
.sidebar-left-close span:after{content:" ";position: absolute; right: 0; top: 50%; margin-top: -1px;width: 15px;height: 2px; display: inline-block; background-color: #fff;}
.m-foot{ position:fixed; width:100%; height:50px; left:0; bottom:0;background:#00afc3; border-top:1px solid rgba(255,255,255,.1); color:#fff; display:none; z-index:99}
.m-foot li{ float:left; width:50%; text-align:center;}
.m-foot li a{ color:#fff; font-size:12px; display:block;}
.m-foot li.li1 a{ background:url(../images/tell.png) no-repeat center 5px; padding-top:27px}
.m-foot li.li2 a{ background:url(../images/mail.png) no-repeat center 5px; padding-top:27px}

@media screen and (max-width: 1366px){
.menu li a{ font-size:16px}
.i-applist .tit{ font-size:24px}
.i-about .more{ margin-top:20px}
.i-about .qlink{ margin-top:20px}
.i-about .qlink .icon{ width:120px; height:120px;border: 15px solid #cce9f6; margin-bottom:5px}
.i-about .title{ margin-bottom:20px}
}
@media screen and (max-width: 1300px){.fgs-map{ width:100%}}
@media screen and (max-width: 1200px){
.wrap{ width:90%;}
.menu li a{ padding:0 10px}
.title .en{ font-size:35px}
.i-about .title, .title{ font-size:26px; margin-bottom:3%}
.i-about .infor{ font-size:14px; line-height:26px;}
.i-about .more, .nmore{ height:30px; line-height:28px; padding:0 20px; margin-top:2%}
.i-about .more span, .nmore span{ padding-right:18px; background-size:12px auto}
.nmore{ margin-top:5%}
.i-about .qlink li{ font-size:16px}
.i-about .qlink .icon{ width:100px; height:100px}
.i-about .qlink .icon img{ display:block; width:35px}
.i-product-list .txt{ font-size:14px}
.i-product-list .bot a{ width:100px; line-height:30px; font-size:14px}
.i-product-list .txt .tit{ font-size:24px}
.i-product-list .txt .tit:after{ margin:10px 0}
.i-case-list .tit{ font-size:18px}
.i-applist .tit{ font-size:20px}
.i-news-list .tit{ font-size:16px}
.i-news-list .wz{ font-size:14px;-webkit-line-clamp: 2;}
.footertop .left h4, .footertop .mid h4, .footertop .right h4{ font-size:16px; margin-bottom:10px}
.f-contact .tel{ font-size:24px; line-height:30px}
.footertop .mid img{ width:100px}
.nbanner{ height:320px}
.appllist .appl-txt h3{ font-size:26px}
.appllist .appl-txt .infor{ font-size:14px; line-height:26px; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;}
}
@media screen and (max-width: 1024px){
.wrap{ width:94%;}
.header, .logo{ height:60px}
.logo img{ display:block; height:45px}
.header-r{ display:none}
.m-btn{ display:block}
.header-space{ height:60px}
.space{ padding:40px 0}
.i-case-list .swiper-slide, .baselist .swiper-slide{ width:550px}
.footertop{ padding:20px 0}
.footertop .left{width:100%; margin-bottom:20px}
.footertop .right{ float:left; width:50%; margin-left:3%}
.footerbot{ font-size:12px; padding:10px 0}
.nbanner{ height:280px}
.nnav{ height:45px; line-height:45px; margin-top:-45px;}
.location{ font-size:14px; padding-left:30px}
.nnav li a{ font-size:14px; padding:0 10px}
.nbanner-pro{ padding-top:40px; height:450px !important}
.product-toppic img{ height:300px}
.nbanner-pro .right{ padding-top:3%}
.nbanner-pro .right h2{ font-size:26px}
.nbanner-pro .right .infor{ font-size:14px; line-height:26px; margin-bottom:10%}
.nbanner-pro .right .tel{ font-size:16px;}
.nbanner-pro .right .zx{ font-size:14px;}
.related-case .tit{ height:40px; line-height:40px}
.news-content .newstit{ font-size:26px}
.hr-content .left{ width:100%; float:none}
.hr-content .right{ float:none; width:100%; margin-top:20px}
.hr-content .right .pic{ width:400px; float:left}
.hr-content .right .txt{ padding-left:430px; min-height:199px}
.newslist .wz{ font-size:14px; color:#666; line-height:20px}
.contact-list li{ font-size:14px; line-height:26px}
#map{ height:400px !important}
.fgslist li{ font-size:14px; line-height:20px; padding-top:40px; padding-bottom:40px}
.fgslist li h3{ font-size:20px; background-size:20px auto; padding-left:30px}
.fgs-map li.cur .hd{ display:none}
.nbanner-fgs{ padding-top:40px !important; height:auto!important}
.section-about .infor{ font-size:14px; line-height:26px}
.culture li{ font-size:14px; line-height:26px; padding:5% 3%}
.culture h3{ font-size:24px; margin:8% 0}
.culture .icon img{ height:50px}
.video-show{ width:90%}
}
@media screen and (max-width: 768px){
.space{ padding:30px 0}
.i-about .picbox, .i-about .txt, .section-about .picbox, .section-about .txt{ width:100%}
.i-about .picbox:after, .section-about .picbox:after{bottom:-20px;width: calc(100% - 20px);}
.i-about .pic, .section-about .pic{width: calc(100% - 20px);}
.i-about .txt, .section-about .txt{ margin-top:40px}
.i-product .pro-nav a{ line-height:30px; height:30px; padding:0 15px; font-size:14px;}
.i-product-list .swiper-button-prev, .i-product-list .swiper-button-next{ display:none}
.i-product-list .swiper-container{ padding-left:0; padding-right:5px}
.i-product-list .pic{ width:100%; height:350px; float:none}
.i-product-list .pic img{ max-height:80%}
.i-product-list .txt{ position:relative; width:100%; top:auto; padding:4%; height:auto}
.i-product-list .txt .num{top:-30px; height:50px; width:50px; line-height:30px; line-height:50px; padding-top:0}
.i-product-list .txt .num span{ border-bottom:0}
.i-product-list .swiper-slide-active .txt{box-shadow: none;}
.i-product-list .txt .tit{ font-size:20px;}
.i-product-list .txt .tit:after{ height:1px; margin:5px 0 10px}
.i-product-list .txt p{ margin-bottom:10px}
.i-product-list .bot{ margin-top:15px;}
.banner .swiper-pagination-bullet, .i-product-list .swiper-pagination-bullet, .i-news-list .swiper-pagination-bullet, .honorlist .swiper-pagination-bullet,.product-toppic .swiper-pagination-bullet, .related-product .swiper-pagination-bullet{ width:8px; height:8px}
.banner img{ height:300px; object-fit:cover}
.i-news-list, .honorlist, .product-toppic, .related-product{ padding-bottom:30px}
.i-case-list .swiper-slide, .baselist .swiper-slide{ width:400px}
.i-applist li{ width:33.33%}
.i-applist .pic{ height:300px; overflow:hidden}
.i-applist .img2{ object-fit:cover}
.i-applist .tit span{bottom:0}
.float-kf{ display:none}
.footertop .left{ display:none}
.footertop .right{ width:calc(100% - 150px); margin-left:0;float:right;}
.i-case-list .swiper-button-prev, .i-case-list .swiper-button-next,.baselist .swiper-button-prev, .baselist .swiper-button-next{ width:30px; height:40px; background-size:20px auto; margin-top:-60px}
.i-case-list .swiper-button-prev:hover, .i-case-list .swiper-button-next:hover,.baselist .swiper-button-prev:hover, .baselist .swiper-button-next:hover{background-size:20px auto;}
.nbanner{ height:220px}
.nnav-hr, .location{ display:none}

.nnav ul{ width:100%; float:none; display:flex; display:-webkit-flex;}
.nnav li a{ white-space:nowrap}
.prollist li{ width:48%}
.prollist .tit{ font-size:16px}
.related-product .tit{ font-size:16px; height:auto; padding-top:10px; padding-bottom:10px}
.related-product .tit span{ white-space:nowrap; text-overflow:ellipsis;}
.content-pro, .news-content, .hr-content{ font-size:14px; line-height:28px}
.appllist .appl-txt h3{ font-size:20px}
.appllist .appl-txt .infor{-webkit-line-clamp:2;}
.nmore{ margin-top:3%}
.newslist .tit{ font-size:18px; margin-top:0}
.newslist .time{ font-size:12px}
.nmore span{ font-size:14px;}
.news-content .newstit{ font-size:24px; line-height:30px}
.news-content .piece{ font-size:12px; line-height:20px}
.news-detail{ padding-top:2%; margin-top:2%}
.page{ margin-top:20px; line-height:40px; font-size:12px}
.hr-content .right .pic{ width:50%;}
.hr-content .right .txt{ padding-left:55%}
.hrlist .job{ font-size:16px}
.i-news-list .txt{ padding-top:10px}
.i-news-list .wz{ display:none}
.i-news-list .time{ font-size:12px; margin:5px 0 0}
.contact-list li{ width:50%; margin-bottom: 50px;}
.contact-list li:nth-child(3),.contact-list li:nth-child(4){ margin-bottom:0}
#map{ height:300px !important}
.message{ padding:0}
.message .row2 .colum{ width:100%}
.message .row{ margin-bottom:10px}
.message .row2 .colum:first-child{ margin-bottom:10px}
.message .row3{ flex-wrap:wrap;}
.message .row3 .colum{ width:100%; margin-bottom:10px}
.message .row3 .colum:last-child{ margin-bottom:0}
.message-con .ts{ margin-top:-10px; margin-bottom:20px}
.fgslist li{ width:50%; padding-top:30px; padding-bottom:30px}
.fgslist li:nth-child(3n)::after{ content:""; width:500%; height:100%; background:#f0f0f0; position:absolute; left:-100%;top:0;bottom:0; z-index:-1}
.fgs-map .dot{ font-size:14px;}
.baselist .tit{ font-size:16px; margin-top:0}
.base-tab a{ font-size:16px; width:120px; line-height:30px; height:30px;margin: 0 3px;}
.culture{ flex-wrap:wrap}
.culture li{ width:50%; border-right:0;}
.culture li:first-child{ border-left:0}
.culture li.cur{ background:none;}
.culture li:nth-child(1),.culture li:nth-child(2){ padding-bottom:0}
.honorlist .tit{ line-height:40px; height:40px; font-size:14px}
.i-news-list .tit{ font-size:14px}
}
@media screen and (max-width: 640px){
.space{ padding:20px 0}
.title .en{ font-size:20px;line-height:20px}
.i-product .pro-nav{ flex-wrap:wrap; margin-bottom:15px}
.i-product .pro-nav li{ margin:0 2px 5px}
.i-product .pro-nav a{ padding:0 10px}
.i-product-list .pic{ height:240px}
.i-about .title, .title{ font-size:20px;line-height: 20px;}
.i-applist .pic{ height:200px;}
.i-applist .tit{ font-size:16px;}
.i-applist .tit span{ line-height:35px}
.related-product .pic{ height:160px}
.banner img{ height:260px}
.nbanner-pro{ height:auto !important; position:relative}
.nbanner-pro:before{ content:""; width:100%;height:100%; position:absolute; left:0;top:0; background:rgba(28,85,164,.2);background: -webkit-linear-gradient(rgba(28,85,164,0) 50%,rgba(28,85,164,.8));
background: -o-linear-gradient(rgba(28,85,164,0) 50%,rgba(28,85,164,.8));
background: -moz-linear-gradient(rgba(28,85,164,0) 50%,rgba(28,85,164,.8));
background: -mos-linear-gradient(rgba(28,85,164,0) 50%,rgba(28,85,164,.8));
background: linear-gradient(rgba(28,85,164,0) 50%,rgba(28,85,164,.8));}
.nbanner-pro .left, .nbanner-pro .right{ width:100%; position:relative;z-index:2}
.product-toppic img{ height:200px}
.nbanner-pro .right{ color:#fff}
.nbanner-pro .right h2{ color:#fff; font-size:24px}
.nbanner-pro .right .infor{ color:#fff; font-size:14px; line-height:24px; margin-bottom:2%}
.nbanner-pro .right .zx, .nbanner-pro .right .tel{ display:none}
.content-pro .table td{ padding:5px}
.nnav .wrap{ overflow-x:auto;overflow-y: hidden;}
.nnav ul{ height:54px;}
.nbanner{ height:150px}
.nnav{ height:40px; line-height:40px; margin-top:-40px}
.nnav ul{ height:45px}
.nnav li a:after{border-right:5px solid transparent;border-left:5px solid transparent;border-top:5px solid rgba(28,85,164,.76); margin-left:-5px}
.nnav li.cur a:after, .nnav li:hover a:after{bottom:-5px}
.newslist li{ padding:20px 0}
.newslist .tit{ font-size:16px; line-height:20px; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom: 0; display:block}
.news-content .newstit{ font-size:20px; line-height:26px}
.hrlist .toptit{ flex-wrap:wrap;}
.hrlist .toptit span{ font-size:12px; width:auto}
.hrlist .toptit .job{ width:100%; font-size:16px;}
.hrlist .cont{ padding:3%; margin:0 2%}
.contact-list ul{ margin-top:30px}
.contact-list li{ width:100%; padding:0;margin-bottom:25px;}
.contact-list li:nth-child(3){ margin-bottom:25px}
.contact-list .icon{ width:50px; height:50px;box-shadow: 0 0 0 10px #cce9f6; margin-bottom:15px;}
.contact-list .icon img{ height:18px}
#map{ height:200px !important}
.message .inp{ padding:0 10px;font-size: 12px; line-height:38px}
.message textarea{ font-size:12px; height:100px; padding:10px}
.message .submit{ line-height:35px; font-size:14px; height:35px}
.message-con .ts{ margin-top:0}
.footertop .left h4, .footertop .mid h4, .footertop .right h4{ font-size:14px}
.f-contact .tel{ font-size:20px}
.footer{ font-size:12px; line-height:20px}
.nbanner-fgs{ padding-top:30px !important}
.fgslist li{ width:100%; padding-right:0; padding-top:20px; padding-bottom:20px}
.fgslist li:nth-child(2n)::after {content: "";width: 500%;height: 100%;background: #f0f0f0;position: absolute;left: -100%;top: 0;bottom: 0;z-index: -1;}
.fgslist li:nth-child(3n)::after { display:none}
.fgslist li p{ margin-bottom:5px}
.fgslist li h3{ font-size:18px; line-height:35px}
.section-culture{ padding:10px 0}
.culture li,.culture li:nth-child(1), .culture li:nth-child(2){width:100%;padding:3% 0}
.culture li{ border-bottom:1px dotted rgba(255,255,255,.8)}
.culture li:last-child{ border-bottom:none}
.culture h3{ font-size:20px; margin:2% 0}
.culture .icon img{ height:40px}
.history-list{ padding:0; padding-bottom:60px}
.history-list:before{ display:none}
.history-list .swiper-container{ padding:0}
.history-list .swiper-slide{ height:auto}
.history-list .item{ right:0;left:0; position:relative; height:auto}
.history-list .item h3{ position:relative}
.history-list .item .word{}
.history-list .swiper-slide:nth-child(even) .item .word{ margin-top:0}
.history-list .swiper-button-prev, .history-list .swiper-button-next{ width:35px; height:35px; background-size:cover;top:auto;bottom:0; margin-top:0}
.history-list .swiper-button-prev:hover,.history-list .swiper-button-next{background-size:cover !important}
.history-list .swiper-button-prev{ left:50%; margin-left:-40px}
.history-list .swiper-button-next{ left:50%; margin-left:0px}
}

@media screen and (max-width: 425px){
.banner img{ height:200px}
.i-applist .pic{ height:100px}
.i-about .video-btn, .section-about .video-btn{ width:60px; height:60px; background-size:cover; margin-left:-30px; margin-top:-30px}
.footertop .mid{ width:100%; text-align:center; margin-bottom:20px}
.footertop .mid img{ margin:0 auto}
.footertop .mid h4{ font-size:14px; margin-bottom:0}
.footertop .right{ width:100%; font-size:12px;}
.footertop .right h4{ font-size:14px;}
.f-contact .tel{ font-size:18px}
.f-online li .hd{ left:0; margin-left:0}
.footerbot{ line-height:20px}
.prollist ul{ margin-right:0}
.prollist li{ width:100%}
.prollist .tit{ height: auto; padding-top:10px; padding-bottom:10px}
.appllist .appl-pic{ width:100%;}
.appllist .appl-txt{ width:100%; padding:3% 0 4%}
.appllist .appl-txt h3{ font-size:18px; margin-bottom:2%}
.appllist .appl-txt .infor{ line-height:20px; font-size:12px; color:#666}
.i-about .more, .nmore{ padding:0 15px}
.i-about .more span, .nmore span{ font-size:12px}
.i-news-box{ margin:0}
.i-news-box .i-news-list{ padding-left:0; padding-right:0}
.news-content .newstit{ font-size:18px}
.page{ padding:10px 0;}
.page .prev, .page .next{ float:none; width:100%; line-height:20px}
.page .next{ text-align:left}
.hr-content .right .pic{ width:100%; float:none}
.hr-content .right .txt{ padding:3%; min-height:auto}
.newslist .wz{ display:none}.newslist .time{ display:block; margin:5px 0 }
.newslist .tit{ white-space:normal}
.message .inp02{ width:120px}
.fgs-map .dot{ font-size:12px; padding-top:15px}
.fgs-map .li3{top:80%}
.fgs-map .li2{left:56%}
}