@charset "utf-8";
*{margin:0;padding:0;outline:0;}
body,html{overflow-x:hidden;color:#222;font:14px/30px  "Inter","poppins", Arial; position:relative;}
blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0;}
input[type=text],input[type=submit],textarea,button{-webkit-border-radius:0;font-family:"Inter","poppins", Arial;-webkit-appearance:none;}
input:focus{outline:0;}
textarea{resize:none;}
h1,h2,h3,h4,h5,h6{font-style:normal;font-size:100%;}
abbr,em,i,li,ol,ul{list-style-type:none;font-style:normal;}
img{border:0;vertical-align:middle;}
*{box-sizing:border-box;}
a{color:#222;text-decoration:none;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-ms-transition:.3s;}
a:hover{color:#0899ee;text-decoration:none;}
.hide,.none,ins{display:none;}
.wrap{clear:both;display:block;margin:0 auto;max-width:1400px;width:100%;padding:0 0;}
.animate img{position:relative;opacity:1;-webkit-transition:.5s all;-moz-transition:.5s all;-o-transition:.5s all;transition:.5s all;-webkit-transform:scale(1,1) rotate(0);-ms-transition:.5s all;}
a:hover .animate img{-webkit-transform:scale(1.06,1.06);-moz-transform:scale(1.06,1.06);-o-transform:scale(1.06,1.06);transform:scale(1.06,1.06);-ms-transform:scale(1.06,1.06);}
.animate img:hover{-webkit-transform:scale(1.06,1.06);-moz-transform:scale(1.06,1.06);-o-transform:scale(1.06,1.06);transform:scale(1.06,1.06);-ms-transform:scale(1.06,1.06);}
.tran,.tran a,a.tran,.tran img{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
.popup{width: 100%;height: 100vh;background-color: rgba(0, 0, 0, 0.8);position: fixed;top: 0;left: 0;z-index: 999;display: none;}

@font-face{
	font-family:"quicksand";
	src:url('../fonts/quicksand.ttf') format('truetype');
	font-weight:normal;
	font-style:normal;
}
@font-face{
	font-family:"din";
	src:url("../fonts/din-medium.woff") format("woff"),
		url("../fonts/din-medium.ttf") format("truetype"),
		url("../fonts/din-medium.eot") format("embedded-opentype"),
		url("../fonts/din-medium.svg") format("svg");
	font-weight:normal;
	font-style:normal;
}


#header{ width:100%;}
#header .wrap{ height:100px;display:flex;justify-content:space-between ;align-items:center;}
#header .logo img{ height:40px;}
#header .right{ display:flex;align-items:center;gap:0 50px;}
#header .right .tel{ font-size:22px; font-family:"quicksand"}
#header .right .lan a{ border:1px solid #eee; border-radius:50px; padding:3px 15px;display:flex;align-items:center;gap:0 5px; background:#f9f9f9}
#header .right .lan a img{ border-radius:4px}

#nav{ width:100%; background:#F5F5F5;background-image: linear-gradient(to bottom, #fafafa, #e1e1e1, #c6c6c6); box-shadow:0 2px 10px 0 rgba(28,28,28,.2);}
#nav ul{display:flex;justify-content:space-between ;align-items:center;}
#nav ul li a{ padding:0 20px; display:block; line-height:50px; font-weight:700}
#nav ul li.active{ background:#7d7d7d}
#nav ul li.active a{ color:#fff}

#banner{width:100%;}
#banner .focus{position:relative;}
#banner .focus .swiper-slide .img{width:100%;}
#banner .focus .swiper-slide .img img{width:100%;}
#banner .focus .swiper-slide .img img.pc{display:block;}
#banner .focus .swiper-slide .img img.m{display:none;}
#banner .focus .swiper-slide .info{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;}
#banner .focus .swiper-slide .info .text{color:#fff;}
#banner .focus .swiper-slide .info .text .text1{font-size:18px;}
#banner .focus .swiper-slide .info .text .text2{font-size:40px;margin-top:15px;font-weight:700;}
#banner .focus .swiper-slide .info .text .text3{font-size:26px;margin-top:15px;}
#banner .focus .swiper-slide .info .text .text4{color:#525456;}
#banner .focus .swiper-slide .info .text .text5{color:#040404;}
#banner .focus .swiper-slide .info .text .more{margin-top:35px;}
#banner .focus .swiper-slide .info .text .more a{display:inline-block;width:140px;text-align:center;line-height:44px;height:44px;border-radius:22px;background:#274aae; color:#fff;}
#banner .focus .swiper-slide .info .text .more a:hover{opacity:0.8;}

.stitle{ text-align:center}
.stitle .title{ font-size:36px; line-height:1; font-family:"quicksand"}
.stitle .desc{ margin-top:10px; color:#666}
#about{ width:100%; padding:80px 0;}
#about .list{ margin-top:50px;display:flex;justify-content:space-between;flex-wrap:wrap; }
#about .list .text{ width:48%}
#about .list .text .content{ line-height:2; font-size:16px}
#about .list .text .count{ margin-top:80px;display:flex;justify-content:space-between; background:#0899ee; padding:40px; position:relative;; width:140%; left:-40%;}
#about .list .text .count .item{ width:33.33%; display:flex;align-items:center;gap:0 20px;}
#about .list .text .count .item .icon{ width:60px; height:60px; border:1px solid #fff; border-radius:80px;display:flex;justify-content:center;align-items:center;}
#about .list .text .count .item .icon i{ color:#fff;font-size:36px}
#about .list .text .count .item .info{ color:#fff}
#about .list .text .count .item .info .num{ font-size:46px; font-family:"Oswald"; line-height:1}
#about .list .text .count .item .info .desc{ font-size:16px; margin-top:10px; line-height:1}
#about .list .img{ width:48%}
#about .list .img img{ width:100%}

#product{ width:100%; padding:80px 0; background:#f8f8f8;}
#product .list{ margin-top:50px}
#product .list ul{display:flex;flex-wrap:wrap;gap:20px}
#product .list ul li{ width:calc((100% - 40px) / 3); border-radius:4px; padding:10px; background:#fff}
#product .list ul li .img{ overflow:hidden}
#product .list ul li .img img{ width:100%}
#product .list ul li .info{ padding:20px 0; text-align:center}
#product .list ul li .info .title{ font-weight:700; font-size:18px;font-family:"quicksand"}
#product .list ul li .info .desc{ color:#666; margin-top:10px; line-height:1.6}
#product .list ul li:hover{box-shadow:0 2px 10px 0 rgba(28,28,28,.1);}

#news{ width:100%; padding:80px 0}
#news .list{ margin-top:50px;}
#news .list ul{display:flex;flex-wrap:wrap;gap:20px}
#news .list ul li{ width:calc((100% - 40px) / 3);}
#news .list ul li .img{ overflow:hidden}
#news .list ul li .img img{ width:100%}
#news .list ul li .info{ margin-top:20px}
#news .list ul li .info .time{ color:#999}
#news .list ul li .info .title{ font-size:16px; font-weight:700; line-height:1.6}
#news .list ul li .info .desc{ margin-top:10px; line-height:1.6; color:#666}

#footer{ width:100%; background:#0899ee; padding:50px 0}
#footer .wrap{display:flex;justify-content:space-between;}
#footer .about{ width:30%}
#footer .about .company{ font-size:18px; font-weight:700; color:#fff}
#footer .about .intro{ color:#fff; line-height:1.6}
#footer .about .intro p{ margin-top:10px}
#footer .about .share{ margin-top:20px;display:flex;gap:5px}
#footer .about .share a{ display:block; width:34px; height:34px; background:#000; color:#fff;display:flex;justify-content:center;align-items:center;}
#footer .about .share a:nth-child(1){ background:#3b5998}
#footer .about .share a:nth-child(2){ background:#007fb1}
#footer .about .share a:nth-child(3){ background:#cd332d}
#footer .about .share a:nth-child(4){ background:#f32c7f}
#footer .about .share a:nth-child(5){ background:#49c42d}
#footer .about .qrcode{ margin-top:30px; display:flex;gap:0 10px}
#footer .about .qrcode img{ width:100px}
#footer .link{ width:20%}
#footer .link p{ border-bottom:1px solid rgba(255,255,255,.2); padding:3px 0}
#footer .link p a{ color:#fff;}
#footer .formbox{ width:30%}
#footer .formbox .input{display:flex;justify-content:space-between; flex-wrap:wrap;gap:10px 0;}
#footer .formbox .input .text{ width:48%; border:0; background:#fff; line-height:30px; padding:10px; border-radius:4px;}
#footer .formbox .input .textarea{ width:100%;border:0; background:#fff; line-height:30px; padding:10px;; border-radius:4px;height:150px}
#footer .formbox .button{ margin-top:10px}
#footer .formbox .button .btn{ background:#fff; border:0; color:#0899ee; font-size:16px; padding:10px 20px; border-radius:4px;}
#copyright{ width:100%; padding:10px; text-align:center}

@media (max-width:800px){
	body,html{font-size:.23rem;line-height:.34rem;}
	.wrap{padding:0;}
	#header{ padding:0 .25rem;}
	#header .wrap{ height:.9rem;}
	#header .logo img{ height:.36rem;}
	#header .right{ display:flex;align-items:center;gap:0 .2rem;}
	#header .right .tel{ display:none}
	#header .right .lan a{border-radius:.5rem; padding:.03rem .15rem; font-size:.2rem}
	#header .right .mnav{position:relative;display:block;width:.34rem;height:.25rem;cursor:pointer;}
	#header .right .mnav span{position:absolute;display:block;width:.34rem;height:.05rem;background:#0899ee;transition:all .5s;border-radius:.05rem;}
	#header .right .mnav .s1{top:0;}
	#header .right .mnav .s2{top:.1rem;width:.26rem;}
	#header .right .mnav .s3{top:.2rem;}
	#header .right .mnav.isopen .s1{top:.1rem;transform:rotate(45deg);}
	#header .right .mnav.isopen .s2{width:0;opacity:0;}
	#header .right .mnav.isopen .s3{top:.1rem;transform:rotate(-45deg);}
	#header .right .mnav.active .s1{top:.1rem;transform:rotate(45deg);}
	#header .right .mnav.active .s2{width:0;opacity:0;}
	#header .right .mnav.active .s3{top:.1rem;transform:rotate(-45deg);}
	
	#nav{position:absolute;background:#fff;min-height:100vh;width:100%;top:.9rem;z-index:999;padding:0 0;transform:translatex(100%);left:0;}
	#nav.active{transform:translatex(0);display:block;}
	#nav ul{display:block;}
	#nav ul li a{ border-bottom:1px solid rgba(0,0,0,.06);line-height:.7rem;padding:0 .2rem}
	
	#banner .focus .swiper-slide .img img.pc{display:none;}
	#banner .focus .swiper-slide .img img.m{display:block;}
	#banner .focus .swiper-slide .info{ display:none}
	
	.stitle .title{ font-size:.4rem;}
	.stitle .desc{ margin-top:.1rem; font-size:.2rem;}
	#about{padding:.8rem .25rem;}
	#about .list{ margin-top:.5rem;}
	#about .list .text{ width:100%; margin-top:.3rem}
	#about .list .text .content{ line-height:1.8; font-size:.22rem}
	#about .list .text .count{ margin-top:.8rem;padding:.2rem 0; width:100%; left:0;flex-wrap:wrap;gap:.3rem 0}
	#about .list .text .count .item{ width:100%;gap:.2rem; border-bottom:1px solid rgba(255,255,255,.5); padding: .2rem .4rem}
	#about .list .text .count .item .icon{ width:.6rem; height:.6rem;border-radius:.6rem;}
	#about .list .text .count .item .icon i{font-size:.4rem}
	#about .list .text .count .item .info{ display:flex;align-items:flex-end;gap:.3rem}
	#about .list .text .count .item .info .num{ font-size:.56rem;}
	#about .list .text .count .item .info .desc{ font-size:.2rem; margin-top:0;}
	#about .list .img{ width:100%}
	
	#product{ padding:.8rem .25rem;}
	#product .list{ margin-top:.5rem}
	#product .list ul{display:flex;flex-wrap:wrap;gap:.3rem}
	#product .list ul li{ width:100%; padding:.2rem;}
	#product .list ul li .img{ overflow:hidden}
	#product .list ul li .img img{ width:100%}
	#product .list ul li .info{ padding:.2rem 0;}
	#product .list ul li .info .title{font-size:.24rem;}
	#product .list ul li .info .desc{ margin-top:.2rem; font-size:.2rem;}

	#news{padding:.8rem .25rem}
	#news .list{ margin-top:.5rem;}
	#news .list ul{gap:.3rem}
	#news .list ul li{ width:100%;}
	#news .list ul li .info{ margin-top:.2rem}
	#news .list ul li .info .time{ font-size:.2rem}
	#news .list ul li .info .title{ font-size:.24rem; }
	#news .list ul li .info .desc{ margin-top:.1; font-size:.2rem}
	
	#footer{ padding:.5rem .25rem}
	#footer .wrap{ display:block}
	#footer .about{ width:100%}
	#footer .about .company{ font-size:.3rem;}
	#footer .about .intro p{ margin-top:.1rem; font-size:.2rem;}
	#footer .about .intro p a{ color:#fff}
	#footer .about .share{ margin-top:.2rem;}
	#footer .about .share a{ width:.46rem; height:.46rem; }
	#footer .about .qrcode{ margin-top:.3rem; gap:0 .1rem}
	#footer .about .qrcode img{ width:1.2rem}
	#footer .link{ display:none}
	#footer .formbox{ width:100%; margin-top:.5rem}
	#footer .formbox .input{gap:.1rem 0;}
	#footer .formbox .input .text{ width:100%;line-height:.4rem; padding:.1rem; font-size:.2rem;}
	#footer .formbox .input .textarea{ width:100%;line-height:.4rem; padding:.1rem;height:1.5rem}
	#footer .formbox .button{ margin-top:.1rem}
	#footer .formbox .button .btn{ font-size:.22rem; padding:.1rem .2rem;}
	#copyright{ padding:.2rem .25rem; font-size:.2rem}
	
}

#nbanner{ width:100%}
#nbanner img{ width:100%}
#main{ width:100%; padding:80px 0}
#main .product .htitle{ font-size:36px; line-height:1; font-family:"Oswald"}
#main .product .list{ margin-top:30px}
#main .product .list ul{display:flex;flex-wrap:wrap;gap:20px}
#main .product .list ul li{ width:calc((100% - 40px) / 3); border-radius:4px; padding:10px; border:1px solid #eee}
#main .product .list ul li .img{ overflow:hidden}
#main .product .list ul li .img img{ width:100%}
#main .product .list ul li .info{ padding:20px 0; text-align:center}
#main .product .list ul li .info .title{ font-weight:700; font-size:18px;font-family:"quicksand"}
#main .product .list ul li .info .desc{ color:#666; margin-top:10px; line-height:1.6}
#main .product .list ul li:hover{box-shadow:0 2px 10px 0 rgba(28,28,28,.1);}


#main{ width:100%; padding:80px 0}
#main .news .htitle{ font-size:36px; line-height:1; font-family:"Oswald"}
#main .news .list{ margin-top:30px}
#main .news .list ul{display:flex;flex-wrap:wrap;gap:60px 20px}
#main .news .list ul li{ width:calc((100% - 40px) / 3);}
#main .news .list ul li .img{ overflow:hidden}
#main .news .list ul li .img img{ width:100%}
#main .news .list ul li .info{ margin-top:20px}
#main .news .list ul li .info .time{ color:#999}
#main .news .list ul li .info .title{ font-size:16px; font-weight:700; line-height:1.6}
#main .news .list ul li .info .desc{ margin-top:10px; line-height:1.6; color:#666}

#main{ width:100%; padding:80px 0}
#main .view .pro_pic{ display:flex;justify-content:space-between; ;}
#main .view .pro_pic .img{ width:40%; border:1px solid #eee; border-radius:4px; padding:20px;}
#main .view .pro_pic .img img{ width:100%}
#main .view .pro_pic .info{ width:55%}
#main .view .pro_pic .info h1{ font-size:24px; font-weight:700}
#main .view .pro_pic .info .intro{ margin-top:20px; line-height:2.5}
#main .view .pro_pic .button{ margin-top:20px}
#main .view .pro_pic .button a{ background:#f30; padding:8px 30px; display:inline-block; color:#fff}
#main .view .pro_content{ margin-top:50px; overflow:hidden}
#main .view .pro_content .tabs{ border-bottom:1px solid #999; display:flex;gap:5px}
#main .view .pro_content .tabs a{ padding:10px 30px; background:#f1f1f1; font-size:16px}
#main .view .pro_content .tabs a.active{ background:#999; color:#fff;}
#main .view .pro_content .swiper-slide{ padding:20px}
#main .view .pro_content .swiper-slide p{ margin-bottom:10px}
#main .view .pro_content .swiper-slide img{ max-width:80%}

#main .about .htitle{ font-size:36px; line-height:1; font-family:"Oswald"; border-bottom:1px solid #eee; padding-bottom:20px}
#main .about .box{display:flex;justify-content:space-between; margin-top:30px}
#main .about .box .img{ width:48%}
#main .about .box .img img{ width:100%; border-radius:10px;}
#main .about .box .content{ width:48%; font-size:16px; line-height:2}

#main .contact .htitle{ font-size:36px; line-height:1; font-family:"Oswald"; border-bottom:1px solid #eee; padding-bottom:20px}
#main .contact .box{display:flex;justify-content:space-between; margin-top:30px}
#main .contact .box .content{ width:40%; font-size:16px; line-height:2}
#main .contact .box .formbox{width:40%;}
#main .contact .box .formbox .input{display:flex;justify-content:space-between; flex-wrap:wrap;gap:10px 0;}
#main .contact .box .formbox .input .text{ width:100%; border:1px solid #ddd; line-height:30px; padding:10px; border-radius:4px;}
#main .contact .box .formbox .input .textarea{ width:100%;border:1px solid #ddd; line-height:30px; padding:10px;; border-radius:4px;height:150px}
#main .contact .box .formbox .button{ margin-top:10px}
#main .contact .box .formbox .button .btn{ background:#0899ee; border:0; color:#fff; font-size:16px; padding:10px 20px; border-radius:4px;}

#main .newsview .ntitle{ text-align:center}
#main .newsview .ntitle .title{ font-size:36px; line-height:1; padding-bottom:20px;}
#main .newsview .ntitle .info{ color:#999; border-bottom:1px solid #eee}
#main .newsview .content{ margin-top:20px; font-size:14px; line-height:2;min-height:500px;}

@media (max-width:800px){
	body,html{font-size:.23rem;line-height:.34rem;}
	.wrap{padding:0;}
	#nbanner{ height:3rem;}
	#nbanner img{ width:100%; height:100%;object-fit:cover}
	#main{padding:.8rem .25rem}
	#main .product .htitle{ font-size:.4rem;}
	#main .product .list{ margin-top:.3rem}
	#main .product .list ul{gap:.3rem}
	#main .product .list ul li{ width:100%; padding:.2rem;}
	#main .product .list ul li .img{ overflow:hidden}
	#main .product .list ul li .img img{ width:100%}
	#main .product .list ul li .info{ padding:.2rem 0;}
	#main .product .list ul li .info .title{font-size:.24rem;}
	#main .product .list ul li .info .desc{ margin-top:.2rem; font-size:.2rem}
	
	#main .news .htitle{ font-size:.4rem;}
	#main .news .list{ margin-top:.3rem}
	#main .news .list ul{gap:.3rem}
	#main .news .list ul li{ width:100%;}
	#main .news .list ul li .info{ margin-top:.2rem}
	#main .news .list ul li .info .time{ font-size:.2rem}
	#main .news .list ul li .info .title{ font-size:.24rem; }
	#main .news .list ul li .info .desc{ margin-top:.1; font-size:.2rem}
	
	#main .view .pro_pic{ display:block;}
	#main .view .pro_pic .img{ width:100%; padding:.2rem;}
	#main .view .pro_pic .info{ width:100%; margin-top:.5rem}
	#main .view .pro_pic .info h1{ font-size:.3rem; font-weight:700}
	#main .view .pro_pic .info .intro{ margin-top:.2rem; line-height:2; font-size:.2rem}
	#main .view .pro_pic .button{ margin-top:.2rem}
	#main .view .pro_pic .button a{ padding:.1rem .3rem;}
	#main .view .pro_content{ margin-top:.5rem; overflow:hidden}
	#main .view .pro_content .tabs{display:flex;gap:.1rem; flex-wrap:wrap;}
	#main .view .pro_content .tabs a{ width:calc((100% - .1rem) /2);padding:.1rem;font-size:.22rem}
	#main .view .pro_content .swiper-slide{ padding:.2rem 0}
	#main .view .pro_content .swiper-slide p{ margin-bottom:.1rem}
	#main .view .pro_content .swiper-slide img{ max-width:100%}
	
	#main .about .htitle{ font-size:.4rem;}
	#main .about .box{display:block; margin-top:.3rem}
	#main .about .box .img{ width:100%}
	#main .about .box .img img{ width:100%; border-radius:.1rem;}
	#main .about .box .content{ width:100%; font-size:.22rem; line-height:1.8; margin-top:.3rem;}
	
	#main .newsview .ntitle .title{ font-size:.4rem; line-height:1; padding-bottom:.2rem;}
	#main .newsview .ntitle .info{ color:#999; border-bottom:1px solid #eee}
	#main .newsview .content{ margin-top:.2rem; font-size:.24rem; line-height:1.8; }
}

#fenye{padding:50px 0;display:flex;align-items:center;justify-content:center;gap:0 8px;}
#fenye a{color:#5a5a5a;height:50px;width:50px;line-height:50px;text-align:center;border:1px solid #eee;border-radius:4px; background:#fff}
#fenye a.page-num-current{color:#fff;background:#274aae;border:1px solid #274aae;}
#fenye a:hover{background:#274aae;color:#fff;border:1px solid #274aae;}
#fenye a.page-num-current + a,
#fenye a.page-num-current + a + a{display:block;}


@media (max-width:800px){
	#fenye{padding:.5rem 0 0px;gap:0 .1rem;}
	#fenye a{width:.66rem;height:.66rem;line-height:.66rem;}
	#fenye .num,#fenye .prev{display:none;}
}