/*************************************************************************/
/*全局样式开始*/
/*************************************************************************/
@charset "utf-8";
*{margin:0;padding:0;outline:0;}
body,html{overflow-x:hidden;color:#58595b;font:13px/30px "Raleway",Arial, Tahoma, Verdana, sans-serif;background:#fff;}
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;-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;}
img{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor;}
table{border-collapse:collapse;border-spacing:0;}
.clearfix{display:block;zoom:1;}
.clearfix:before{display:table;content:"";}
.clearfix:after{clear:both;display:block;visibility:hidden;height:0;content:"";}
* html .clearfix{height:1%;}
*{box-sizing:border-box;}
a{color:#58595b;text-decoration:none;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-ms-transition:.3s;}
a:hover{color:#58595b;text-decoration:none;}
.hide,.none,ins{display:none;}
.fl{float:left;display:inline-block;}
.fr{float:right;display:inline-block;}
.wrap{clear:both;display:block;margin:0 auto;width:100%;max-width:1920px;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;}
.rotate,.rotate2 img{-webkit-transition:all 0.8s;-moz-transition:all 0.8s;transition:all 0.8s;-ms-transition:all 0.8s;}
a:hover .rotate,a:hover rotate2 img{-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);-webkit-transition:all 0.8s;-moz-transition:all 0.8s;transition:all 0.8s;-ms-transition:all 0.8s;}
.bor_box::after,.bor_box::before{pointer-events:none;}
.bor_box::after,.bor_box::before{position:absolute;top:20px;right:20px;bottom:20px;left:20px;content:'';opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;}
.bor_box::before{border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);transform:scale(0,1);}
.bor_box::after{border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);transform:scale(1,0);}
a:hover .bor_box::after,a:hover .bor_box::before{opacity:.7;-webkit-transform:scale(1);transform:scale(1);}

@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{display:flex;justify-content:space-between ;align-items:center;height:80px; position:fixed; left:0; top:0; width:100%; padding:0 3%; box-sizing:border-box; z-index:999}
#header .logo{text-align:left}
#header .logo img{ height:30px}
#header .nav{display:flex;justify-content:center;align-items:center;}
#header .nav a{ margin:0 10px;font-size:18px;text-transform:uppercase;font-style:normal;;padding:2px 10px;color:#fff;}
#header .nav a:hover{ background:#58595b;color:#fff;}
#header .right{display:flex;align-items:center;}
#header .right .lan{text-align:right;color:#fff; font-size:18px;}
#header .right .lan img{max-height:30px}
#header .right .mnav{ display:none}
#header.on{ position:fixed;left:0;top:0;background:#232426;z-index:999}

#video{ width:100%;height:70vh; position:relative; background:#222}
#video video{width:100%;height:100%;object-fit:cover}
#video .text{ position:absolute; left:0; top:0; width:100%; height:100%;display:flex;justify-content:center ;align-items:center;}
#video .text .box{color:#FFFFFF;font-size:43px;font-weight:bold;text-transform:uppercase;text-shadow:1px 1px 1px #000000;;text-align:center;line-height:44px}

#nav{ width:100%;background:#666;padding:0 3%;background:url(../images/mbg.jpg) center center;}
#nav ul{display:flex;justify-content:space-between ;align-items:center;height:60px}
#nav ul li a{ color:#fff;font-size:16px;padding:5px 10px; font-weight:bold;}
#nav ul li a:hover{ background:#333;}

#banner{height:600px;position:relative;z-index:1;background:#333;}
#banner .swiper-container{height:100%;}
#banner .swiper-slide{background-position:center center;background-repeat:no-repeat;overflow:hidden;background-size:cover;}
#banner .swiper-slide .slide-inner{height:100%;background-size:cover;background-repeat:no-repeat;background-position:center center;position:relative;}
#banner .swiper-pagination-bullet{margin:0 10px;vertical-align:middle;opacity:.5;background:#fff;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#banner .swiper-pagination-bullet-active{background:0 0;border:2px solid #fff;width:12px;height:12px;opacity:1;}
#banner .swiper-pagination-bullets{bottom:20px;}
#banner .sub-mouse{position:absolute;bottom:40px;left:5%;cursor:pointer;z-index:1;zoom:0.7;-moz-transform:scale(0.7);}
#banner .sub-mouse span{text-align:center;display:block;position:relative;height:100%;}
#banner .sub-mouse span{animation:ani-svg 0.85s linear 0s alternate infinite;-webkit-animation:ani-svg 0.85s linear 0s alternate infinite;margin:0 auto;}
#banner .text{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;justify-content:flex-start;align-items:center;}
#banner .text .textbox{ width:100%;padding:0 3%}
#banner .text .textbox2{ text-align:center}
#banner .text .textbox3{ text-align:right}
#banner .text .textbox h2{color:#FFFFFF;font-size:62px;font-weight:bold;text-transform:uppercase;line-height:0.8em;}
#banner .text .textbox .description {    color:#FFFFFF;font-size:22px;text-transform:uppercase;letter-spacing:4px;}
#banner .btn{ position:absolute;left:0px;top:50%;margin-top:-20px;z-index:99}
#banner .btn{width:40px;height:40px;display:inline-block;color:#fff;line-height:40px;border-radius:100%;text-align:center;font-size:30px}
#banner .btn.t_next{ right:0px;left:auto}
#banner .btn.swiper-button-disabled{ color:#fff}

.stitle{ text-align:center}
.stitle h2{ font-size:24px;color:#58595b;}
.stitle em{ width:30px;height:4px;background:#999;margin:10px auto 0;overflow:hidden;display:block;border-radius:4px}

#product{ padding:50px 3%}
#product .list{ margin-top:50px}
#product .list ul{display:flex;justify-content:flex-start ;align-items:center;flex-wrap:wrap;gap:20px}
#product .list ul li{ width:calc((100% - 60px) / 3);-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-ms-transition:.3s;}
#product .list ul li .img img{ width:100%; border-radius:20px}
#product .list ul li p{ margin-top:20px;font-size:14px;font-weight:700; text-align:center;}
#product .list ul li:hover{-webkit-transform:translatey(-10px);-ms-transform:translatey(-10px);-o-transform:translatey(-10px);transform:translatey(-10px);}
#product .list ul li:hover .img{z-index:1;box-shadow:0px 0px 12px 0px rgba(0, 0, 0, 0.1);}

/*#about{ padding:50px 3%;background:#58595b;}*/
#about{ padding:50px 3%;}
#about .content{ margin-top:50px;display:flex;justify-content:space-between ;align-items:flex-start;}
#about .content .left{ width:48%}
#about .content .left .text{ font-size:14px;line-height:1.8;color:#999;}
#about .content .left .more{margin-top:30px}
#about .content .left .more a{ background:#000;color:#fff;padding:2px 20px;display:inline-block}
#about .content .img{ width:48%}
#about .content .img img{ width:100%}

#company{ padding:50px 3%;}
#company .list{ margin-top:50px;position:relative}
#company .list .swiper-slide img{ width:100%;border-radius:20px}
#company .list .btn{ position:absolute;left:-40px;top:50%;margin-top:-20px;z-index:99}
#company .list .btn{width:40px;height:40px;display:inline-block;color:#58595b;line-height:40px;border-radius:100%;text-align:center;font-size:30px}
#company .list .btn.t_next{ right:-40px;left:auto}
#company .list .btn.swiper-button-disabled{ color:#ccc}
#company .stitle h2{ font-size:24px;color:#58595b;}

#news{ width:100%;padding:50px 3%;background:#f9f9f9}
#news .list{ margin-top:50px}
#news .list ul{display:flex;justify-content:space-between ;align-items:flex-start;gap:0 20px}
#news .list ul li{ width:calc((100% - 40px) / 3);background:#fff}
#news .list ul li .img img{ width:100%}
#news .list ul li .info{ padding:20px;}
#news .list ul li .info h2{ font-size:18px;line-height:26px;font-weight:normal;}
#news .list ul li .info p{ margin-top:10px;line-height:24px}
#news .more{ text-align:center;margin-top:30px}
#news .more a{ background:#58595b;color:#fff;padding:2px 20px;display:inline-block}

#footer{ width:100%;padding:50px 3%;background:url(../images/foot_bg.jpg) no-repeat center center;background-size:cover}
#footer .share{ border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:20px;display:flex;justify-content:flex-end ;align-items:center;}
#footer .share a{ margin-left:20px;line-height:36px;display:flex;align-items:center;}
#footer .share a i{ font-size:30px;color:#fff;}
#footer .fbox{display:flex;justify-content:space-between ;align-items:flex-start;padding:50px 0 20px}
#footer .fbox .about{ width:30%}
#footer .fbox .about .title{ font-weight:700;color:#fff;font-size:18px;}
#footer .fbox .about .content{ color:#fff;margin-top:10px;line-height:26px}
#footer .fbox .product{ width:30%;}
#footer .fbox .product .title{ font-weight:700;color:#fff;font-size:18px;}
#footer .fbox .product .list{ margin-top:10px}
#footer .fbox .product .list p a{ color:#fff;}
#footer .fbox .contact{ width:30%;}
#footer .fbox .contact .title{ font-weight:700;color:#fff;font-size:18px;}
#footer .fbox .contact .list{ margin-top:10px}
#footer .fbox .contact .list p{ color:#fff}
#footer .fbox .contact .list p a{ color:#fff}

#copyright{ text-align:center;padding:10px 0;color:#fff;background:#58595b}

@media (max-width:1400px){
	.wrap{ padding:0 20px}
}
@media (max-width:1200px){
	#header .right .nav ul li h3 a{  padding:0 25px;}
}
@media (max-width:1100px){
	#header .right .nav ul li h3 a{padding:0 15px;}
}
@media (max-width:950px){
	body,html{font-size:.23rem;line-height:.34rem}
	.wrap{ padding:0px}
	
	#header{ padding:0 .2rem;height:.9rem}
	#header .wrap{height:.9rem}
	#header .logo img{ height:.3rem}
	#header .nav a:hover{ background:#58595b;color:#fff;}
	#header .right .lan{font-size:.22rem;}
	#header .right .lan img{max-height:30px}
	#header .right .mnav{position:relative;display:block;width:.34rem;height:.33rem;cursor:pointer;margin-left:.2rem}
	#header .right .mnav span{position:absolute;display:block;width:.34rem;height:.05rem;background:#fff;transition:all .5s;border-radius:.05rem}
	#header .right .mnav .s1{top:.05rem;}
	#header .right .mnav .s2{top:.15rem;width:.26rem;}
	#header .right .mnav .s3{top:.25rem;}
	#header .right .mnav.isopen .s1{top:.15rem;transform:rotate(45deg);}
	#header .right .mnav.isopen .s2{width:0;opacity:0;}
	#header .right .mnav.isopen .s3{top:.15rem;transform:rotate(-45deg);}
	#header .nav{position:absolute;background:#fff;height:auto;min-height:100vh;width:100%;top:.9rem;z-index:105;padding:.1rem .25rem 0;transform:translatex(100%);left:0;border-top:1px solid #eee; display:block}
	#header .nav a{line-height:.7rem;font-size:.24rem;padding:0; display:block; color:#333; margin:0; border-bottom:1px solid #eee}
	#header .nav.isopen{transform:translatex(0);}
	#header.on{ position:fixed;left:0;top:0;background:#232426;z-index:999}
	
	#nav ul{display:flex;justify-content:center;align-items:center;height:auto;flex-wrap:wrap;padding:.1rem 0}
	#nav ul li a{font-size:.22rem;padding:.02rem .1rem}
	#nav ul li a:hover{ background:#333;}	
	#banner{height:4rem;}
	#banner .text .textbox{ padding:0 .5rem}
	#banner .text .textbox h2{   font-size:.5rem;}
	#banner .text .textbox .description {  font-size:.22rem;letter-spacing:0;}
	#banner .btn{  margin-top:-.2rem;}
	#banner .btn{width:.4rem;height:.4rem;line-height:.4rem;font-size:.3rem}
	#banner .btn.t_next{ right:0px;left:auto}
	#banner .btn.swiper-button-disabled{ color:#fff}	
}
@media (max-width:800px){
		
	.stitle h2{ font-size:.3rem;}
	.stitle em{ width:.5rem;height:.05rem;margin:.2rem auto 0;}
	
	#product{ padding:.5rem .2rem}
	#product .list{ margin-top:.3rem}
	#product .list ul{flex-wrap:wrap;gap:.3rem 0}
	#product .list ul li{ width:100%}
	#product .list ul li .img img{ width:100%}
	#product .list ul li p{ margin-top:.2rem;font-size:.22rem;}
	
	#about{ padding:.5rem .2rem}
	#about .content{ margin-top:.3rem;display:block}
	#about .content .left{ width:100%}
	#about .content .left .text{ font-size:.22rem;line-height:1.6}
	#about .content .left .more{margin-top:.2rem}
	#about .content .left .more a{ padding:.1rem .3rem}
	#about .content .img{ width:100%;margin-top:.3rem}
	#about .content .img img{ width:100%}
	
	#company{ padding:.5rem .2rem;}
	#company .list{ margin-top:.5rem}
	
	#news{padding:.5rem .2rem;}
	#news .list{ margin-top:.5rem}
	#news .list ul{gap:.2rem 0;flex-wrap:wrap}
	#news .list ul li{ width:100%}
	#news .list ul li .img img{ width:100%}
	#news .list ul li .info{ padding:.2rem;}
	#news .list ul li .info h2{ font-size:.22rem;line-height:.4rem;font-weight:700}
	#news .list ul li .info p{ margin-top:.2rem;line-height:.36rem;font-size:.22rem}
	#news .more{ text-align:center;margin-top:.3rem}
	#news .more a{ padding:.05rem .2rem;display:inline-block;font-size:.22rem}
	
	#footer{ padding:.5rem .2rem;}
	#footer .share{ display:none}
	#footer .fbox{display:block;padding:0}
	#footer .fbox .about{ width:100%}
	#footer .fbox .about .title{ font-size:.24rem;}
	#footer .fbox .about .content{ margin-top:.1rem;line-height:.4rem}
	#footer .fbox .product{ display:none}
	#footer .fbox .contact{ width:100%;margin-top:.3rem}
	#footer .fbox .contact .title{ font-weight:700;color:#fff;font-size:18px;}
	#footer .fbox .contact .list{ margin-top:.1rem;line-height:.4rem}
	
	#copyright{padding:.1rem .2rem;font-size:.2rem;}
}

#clist{ padding:0 3%; border-bottom:1px solid #eee}
#clist .wrap{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;}
#clist a{ margin:0 10px; display:block; line-height:60px}
#clist a.currclass{ font-weight:700}
#main{ padding:50px 3%}
#main .title{ border-bottom:1px solid #eee; padding-bottom:10px}
#main .title h2{ font-size:18px; font-weight:700;}
#main .prolist{ padding:50px 0}
#main .prolist ul{display:flex;justify-content:flex-start ;align-items:flex-start; flex-wrap:wrap; gap:30px 30px}
#main .prolist ul li{ width:calc((100% - 60px) / 3)}
#main .prolist ul li .img img{ width:100%}
#main .prolist ul li p{ margin-top:20px; text-align:center; font-size:14px}

#main .about{ padding:50px 0;display:flex;justify-content:space-between ;align-items:flex-start;}
#main .about .text{ width:48%; line-height:2; font-size:14px}
#main .about .img{ width:48%}
#main .about .img img{ width:100%; border-radius:100px 0 100px 0}

#main .contact{ padding:50px 0;display:flex;justify-content:space-between ;align-items:flex-start;}
#main .contact .text{ width:48%; line-height:2; font-size:14px}
#main .contact .form{ width:48%}
#main .contact .form .ftitle{ font-size:20px; font-weight:700}
#main .contact .form .formbox{ margin-top:20px}
#main .contact .form .formbox .item{ margin-top:10px}
#main .contact .form .formbox .item .inp{ border:1px solid #eee; width:100%; line-height:50px; text-indent:10px}
#main .contact .form .formbox .item .textarea{ border:1px solid #eee; width:100%; line-height:30px; text-indent:10px; height:150px}
#main .contact .form .formbox .item .btn{ background:#333; border:0; color:#fff; padding:10px 20px}
#main .content{ padding:50px 0; line-height:1.9; font-size:16px}
#main .content img{ max-width:1200px}

@media (max-width:800px){
	body,html{font-size:.23rem;line-height:.34rem}
	.wrap{ padding:0px}
	
	#clist{ padding:0 .2rem;}
	#clist a{ margin:0 .1rem; line-height:.6rem}
	
	#main{ padding:.5rem .2rem}
	#main .title{ padding-bottom:.1rem}
	#main .title h2{ font-size:.26rem;}
	#main .prolist{ padding:.5rem 0}
	#main .prolist ul{gap:.3rem .3rem}
	#main .prolist ul li{ width:100% }
	#main .prolist ul li .img img{ width:100%}
	#main .prolist ul li p{ margin-top:.2rem; text-align:center; font-size:.22rem}
	
	#main .about{ padding:.5rem 0;display: block;}
	#main .about .text{ width:100%; font-size:.22rem; line-height:1.8}
	#main .about .img{ width:100%; margin-top:.3rem}
	
	#main .contact{ padding:.5rem 0;display: block;}
	#main .contact .text{ width:100%; font-size:.22rem; line-height:1.8}
	#main .contact .form{ width:100%; margin-top:.5rem}
	#main .contact .form .ftitle{ font-size:.26rem;}
	#main .contact .form .formbox{ margin-top:.2rem}
	#main .contact .form .formbox .item{ margin-top:.1rem}
	#main .contact .form .formbox .item .inp{line-height:.6rem; text-indent:.1rem}
	#main .contact .form .formbox .item .textarea{ line-height:.34rem; text-indent:.1rem; height:2rem}
	#main .contact .form .formbox .item .btn{padding:.2rem 0; width:100%; text-align:center; display:block}
	#main .content{ padding:.5rem 0; line-height:1.8; font-size:.22rem}
	#main .content img{ max-width:100%}
}

#fenye{padding:50px 0 0px;text-align:center;clear:both;}
#fenye table{text-align:center;margin:0 auto}
#fenye a{margin:0 2px;color:#5a5a5a;text-decoration:none;padding:10px 15px;border:1px solid #eee;background:#FFF}
#fenye .prev,#fenye .next{width:52px;text-align:center}
#fenye a.curr{font-weight:700;color:#fff;background:#333;border:1px solid #333}
#fenye a:hover{background:#333;color:#fff;border:1px solid #333}
#fenye span{margin:0 2px;color:#5a5a5a;text-decoration:none;padding:10px 15px;border:1px solid #eee;background:#FFF}

@media (max-width:800px){
	body,html{ font-size:.22rem; line-height:.34rem}
	#fenye{padding:.5rem 0 0px;}
	#fenye a{margin:0 .02rem;padding:.1rem .15rem}
	#fenye .prev,#fenye .next{width:.55rem;}
	#fenye span{margin:0 .02rem;padding:.1rem .15rem}
	#fenye .num,#fenye .prev{ display:none}
}