@charset "utf-8";
*{margin:0;padding:0;outline:0;}
body,html{color:#333;font:14px/30px -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,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;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;-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:#333;text-decoration:none;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-ms-transition:.3s;}
a:hover{color:#16284d;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%;padding:0 8%; max-width:1900px; box-sizing:border-box}

.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;}

@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;
}
@font-face {
	font-family: "RobotoCondensed-Light";
	src: url('../fonts/RobotoCondensed-Light-5.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}




#header{ width:100%; background:#fff}
#header .wrap{ height:100px;display: flex;justify-content:space-between ;align-items:center;}
#header .logo img{ height:60px}
#header .right .lan{display: flex;justify-content:flex-end;;align-items:center;}
#header .right .lan .lanbox{ width:140px; position:relative;}
#header .right .lan .lanbox .title{ border:1px solid #eee; padding:0 10px; height:40px; border-radius:3px;display: flex;justify-content:space-between ;align-items:center;}
#header .right .lan .lanbox .title img{ width:20px}
#header .right .lan .lanbox .title span{ font-size:14px; margin-left:5px}
#header .right .lan .lanbox .title i{ color:#777}
#header .right .lan .lanbox .sub{ background:#fff; width:100%; position: absolute; right:0; top:39px; display:none; z-index:100;border:1px solid #eee;}
#header .right .lan .lanbox .sub a{ display:block; text-align:center; border-bottom:1px solid #eee; line-height:44px;padding:0 20px}
#header .right .lan .lanbox .sub a:last-child{ border:0}
#header .right .lan .lanbox:hover .sub{ display: block}
#header .right .other{ margin-top:5px;display: flex;gap:0 60px;align-items:center;}
#header .right .other .share{ display:flex;gap:0 5px}
#header .right .other .share a{ width:26px; height:26px; border-radius:100%; background:#f39800; color:#fff;display: flex;justify-content:center;align-items:center; font-size:12px}
#header .right .other .share a:nth-child(1){ background:#e32e26}
#header .right .other .share a:nth-child(2){ background:#3868ac}
#header .right .other .share a:nth-child(3){ background:#000}
#header .right .other .share a:nth-child(4){ background:#d7935a}
#header .right .other .share a:nth-child(5){ background:#84cfec}
#header .right .other .share a:nth-child(6){ background:#0094d3}
#header .right .other .share a:hover{ background:#16284d}
#header .right .other .tel{display: flex;gap:0 10px;align-items:center;}
#nav{ width:100%; background:#16284d;}
#nav .wrap{display: flex;justify-content:space-between;align-items:center; }
#nav .navbox ul{display: flex;align-items:center; }
#nav .navbox ul li{ position:relative}
#nav .navbox ul li h3 a{ color: #fff;font-weight: normal; padding:0 40px; display:block; font-size:16px; line-height:50px;font-family: 'RobotoCondensed-Light'}
#nav .navbox ul li h3 a:hover{ background:#f39800;}
#nav .navbox ul li.on h3 a{ background:#f39800;}
#nav .navbox ul li.active h3 a{ background:#f39800;}
#nav .navbox ul li .sub{ display:none; position:absolute; left:0; top:50px; z-index:99; width:360px;}
#nav .navbox ul li .sub p{ border-bottom:1px solid rgba(255,255,255,.5); background:#f39800;; line-height:1; padding:10px}
#nav .navbox ul li .sub p a{ color:#fff;}
#nav .navbox ul li .sub p:last-child{ border:0}
#nav .search form{ display:flex;align-items:center;}
#nav .search .key{ border:0; background:#fff; line-height:30px; text-indent:10px;}
#nav .search .btn{ border:0; background:#f39800; line-height:30px; color:#fff; padding:0 10px}

#banner{ width:100%}
#banner .focus{ width:100%; overflow:hidden; position:relative}
#banner .focus img{ width:100%}

.htitle{display: flex;justify-content:space-between ;align-items:center;}
.htitle .left{ position:relative}
.htitle .left h2{ font-size:52px; color:#ebebec}
.htitle .left span{ color:#222; font-size:32px; position:absolute; left:0; bottom:-20px; font-weight:700}
.htitle .right{display: flex}
.wrap2{ padding:50px 8%;display: flex;justify-content:space-between ;}

#product{ width:100%; padding:80px 0; background:#f6f6f7}
#product .htitle{display: flex;justify-content:space-between ;align-items:center;}
#product .htitle .right{display: flex; max-width:80%}
#product .htitle .right a{ background:#16284d; padding:10px 40px; color:#fff; font-size:16px; line-height:1.3}
#product .htitle .right a:hover{ background:#f39800}
#product .list{ margin-top:50px}
#product .list ul{display: flex;align-items:flex-start;flex-wrap:wrap;gap:30px}
#product .list ul li{ width:calc((100% - 90px) / 4);}
#product .list ul li .img{ padding:20px; height:350px; background:#fff;box-shadow: 1px 1px 6px 0 rgba(0,0,0,0.05);display: flex;justify-content:center ;align-items:center; overflow:hidden}
#product .list ul li .img img{ max-width:100%;max-height:100%}
#product .list ul li p{ text-align:center; margin-top:20px; line-height:1.6}

#about{ width:100%; padding:150px 0; background:url(../images/bg_about.jpg) no-repeat center center; background-size:cover}
#about .aboutbox{display: flex;justify-content:space-between ;align-items:center;background:#fff}
#about .aboutbox .img{ width:40%}
#about .aboutbox .img img{width:100%;height:100%;object-fit:cover}
#about .aboutbox .text{ width:60%; padding:50px 5%}
#about .aboutbox .text h2{ font-size:30px; font-weight:700}
#about .aboutbox .text .content{ margin-top:20px; font-size:16px; line-height:1.6}
#about .aboutbox .text .content p{ padding:5px 0}
#about .aboutbox .text .more{ margin-top:20px}
#about .aboutbox .text .more a{ display:inline-block; border:2px solid #16284d; padding:8px 40px; font-size:16px}
#about .aboutbox .text .more a:hover{background:#16284d; color:#fff}

#num{ width:100%; background:#f6f6f7}
#num .list{ background:#fff;display: flex;justify-content:space-between ;align-items:center;}
#num .list .item{ width:25%; padding:40px 0}
#num .list .item .num{ text-align:center; font-size:34px}
#num .list .item p{ text-align:center;; display:block; margin-top:10px; font-size:16px}

#photo{ width:100%; padding:80px 0;; background:#f6f6f7}
#photo .list{ margin-top:50px}
#photo .list ul{display: flex;gap:0 20px}
#photo .list ul li{ width:calc((100% - 120px) / 7);}
#photo .list ul li .img{height:280px; overflow:hidden; border:1px solid #eee; border-radius:4px; padding:10px; background:#fff;display: flex;justify-content:center;align-items:center;}
#photo .list ul li .img img{max-width:100%;max-height:100%;}
#photo .list ul li .title{ text-align:center; margin-top:10px; padding:0 10px}

#zh{ width:100%; padding:80px 0;}
#zh .list{ margin-top:50px}
#zh .list ul{display: flex;gap:0 20px}
#zh .list ul li{ width:calc((100% - 60px) / 4);}
#zh .list ul li .img{ height:290px; overflow:hidden; border:1px solid #eee; border-radius:4px; padding:10px}
#zh .list ul li .img img{width:100%;height:100%;object-fit:cover}
#zh .list ul li .title{ text-align:center; margin-top:10px; padding:0 10px}

#news{ width:100%; padding:80px 0; background:#f6f6f7}
#news .title{display: flex;justify-content:space-between ;align-items:center;}
#news .title .left{ position:relative}
#news .title .left h2{ font-size:52px; color:#ebebec}
#news .title .left span{ color:#222; font-size:32px; position:absolute; left:0; bottom:-20px; font-weight:700}
#news .title .right{display: flex}
#news .list{ margin-top:50px}
#news .list ul{display: flex;align-items:center;flex-wrap:wrap;gap:30px}
#news .list ul li{ width:calc((100% - 30px) / 2); background:#fff; padding:30px 20px;box-shadow: 1px 1px 6px 0 rgba(0,0,0,0.05);}
#news .list ul li h2{ font-size:19px}
#news .list ul li time{ display:block; color:#999; margin-top:5px}
#news .list ul li .info{ line-height:1.5; font-size:15px; margin-top:20px}

#map{ width:100%; background:#16284d; padding:50px 0}
#map .wrap{display: flex;justify-content:space-between ;align-items:flex-start;gap:0 5%}
#map .about{ width:30%}
#map .about .logo img{ height:50px}
#map .about .text{ margin-top:20px; line-height:2; color:#fff}
#map .about .text a{color:#fff}
#map .about .text p i{ width:30px;}
#map .about .share{display: flex; margin-top:20px;gap:0 5px}
#map .about .share a{ width:28px; height:28px; border-radius:100%; background:#f39800; color:#fff;display: flex;justify-content:center;align-items:center; font-size:14px}
#map .about .share a:nth-child(1){ background:#e32e26}
#map .about .share a:nth-child(2){ background:#3868ac}
#map .about .share a:nth-child(3){ background:#000}
#map .about .share a:nth-child(4){ background:#d7935a}
#map .about .share a:nth-child(5){ background:#84cfec}
#map .about .share a:nth-child(6){ background:#0094d3}
#map .about .share a:hover{ background:#f39800}

#map .nav{width:30%}
#map .nav h3{ font-size:18px; color:#fff; margin-bottom:10px}
#map .nav p{ line-height:1.8}
#map .nav p a{ color:#fff;}
#map .contact{ width:30%}
#map .contact h3{ font-size:18px; color:#fff; margin-bottom:10px}
#map .contact .form{ margin-top:10px; display:flex;flex-wrap:wrap;gap:10px}
#map .contact .form .text{ width:calc((100% - 10px) / 2); line-height:40px; text-indent:10px; border:0; border-radius:4px}
#map .contact .form .textarea{ width:100%; line-height:40px; text-indent:10px; height:100px; border:0; border-radius:4px}
#map .contact .button{ margin-top:20px; text-align:center}
#map .contact .button .btn{ background:#f39800; border-radius:4px; font-size:16px; padding:10px 50px;; color:#fff; border:0}

#copyright{ width:100%; background:#0e2044; padding:10px 0; color:#fff; font-size:13px; text-align:center}
#copyright a{ color:#fff}

#float{ position:fixed; right:10px; top:50%; background:#16284d; z-index:999}
#float ul li a{ color:#fff; display:block; padding:15px 18px}
#float ul li a:hover{ background:#f39800}
@media (max-width:1500px){
	.wrap{padding:0 20px;}
	#header .right .nav ul li h3 a{padding:0 20px;}
	#map .wrap{gap:0 5%}
}
@media (max-width:1100px){
	#header .right .nav ul li h3 a{padding:0 10px;}
	#header .right .search{ margin-left:20px}
}
@media (max-width:900px){
	body,html{ width:100%;font-size:.22rem;line-height:.34rem;}	
	.wrap{ padding:0px .2rem}
	
	#header .wrap{ height:1rem;}
	#header .logo img{ height:.6rem}
	#header .right .lan .lanbox{ width:2rem; position:relative;}
	#header .right .lan .lanbox .title{ padding:0 .1rem; height:.5rem; }
	#header .right .lan .lanbox .title img{ width:.26rem}
	#header .right .lan .lanbox .title span{ font-size:.22rem; margin-left:.05rem}
	#header .right .lan .lanbox .sub{  top:.5rem;}
	#header .right .lan .lanbox .sub a{line-height:.5rem;padding:0 .2rem}
	#header .right .mnav{position:relative;display:block;width:.34rem;height:.25rem;cursor:pointer;;margin-left:.1rem}
	#header .right .mnav span{position:absolute;display:block;width:.34rem;height:.05rem;background:#16284d;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 .other{ display:none}
	#nav{position:absolute;;width:100%; min-height:100vh;top:1rem;z-index:105;padding:.1rem .25rem 0;left:0;border-top:1px solid #eee; margin-top:0; display:none}
	#nav .wrap{display: block; }
	#nav .navbox ul{display: block;}
	#nav .navbox ul li h3 a{padding:0;font-size:.24rem; line-height:.7rem; border-bottom:1px solid rgba(255,255,255,.5)}
	#nav .navbox ul li h3 a:hover{ background:none;}
	#nav .navbox ul li.on h3 a{ background:none;}
	#nav .navbox ul li.active h3 a{ background:none;}
	#nav .navbox ul li .sub{ display:none; position: inherit; left:0; top:0; z-index:99; width:100%; padding:0 .25rem}
	#nav .navbox ul li .sub p{ border-bottom:1px solid rgba(255,255,255,.3); background:none;; line-height:1; padding:.2rem 0}
	#nav .navbox ul li .sub p a{ color:#fff; opacity:.7}
	#nav .search{ display:none;}
	#nav.isopen{ display:block}	
	
	#map{padding:.5rem 0}
	#map .wrap{display: block;}
	#map .about{ width:100%}
	#map .about .logo img{ height:.8rem}
	#map .about .text{ margin-top:.2rem; line-height:1.6; font-size:.22rem}
	#map .about .text a{ color:#fff}
	#map .nav{ width:100%; margin-top:.5rem}
	#map .nav h3{ font-size:.3rem; margin-bottom:.2rem}
	#map .nav p{ line-height:1.6}
	#map .nav p a{ color:#fff; font-size:.22rem;}
	#map .contact{ width:100%; margin-top:.5rem}
	#map .contact h3{ font-size:.3rem; margin-bottom:.2rem}
	#map .contact .form{ margin-top:.1rem; display: block;}
	#map .contact .form .text{ width:100%; line-height:.6rem; margin-bottom:.1rem; font-size:.22rem}
	#map .contact .form .textarea{ width:100%; line-height:.34rem; height:2rem; font-size:.22rem}
	#map .contact .button{ margin-top:.2rem;}
	#map .contact .button .btn{font-size:.24rem; padding:.1rem .5rem}
	
	#copyright{padding:.2rem 0}
}
@media (max-width:800px){
	.htitle .left h2{ font-size:.5rem; }
	.htitle .left span{font-size:.38rem;bottom:-.2rem;}
	
	#product{padding:.8rem 0;}
	#product .htitle{display:block;}
	#product .htitle .right{ margin-top:.5rem;flex-wrap:wrap;gap:.1rem; max-width:100%}
	#product .htitle .right a{ padding:.2rem .2rem;font-size:.2rem; width:100%}
	#product .list{ margin-top:.5rem}
	#product .list ul{gap:.2rem}
	#product .list ul li{ width:calc((100% - .2rem) / 2);}
	#product .list ul li .img{ padding:.2rem; height:3.5rem;}
	#product .list ul li p{ margin-top:.2rem; font-size:.22rem}
	#product .list ul li p{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical}
	
	#about{ padding:1.5rem 0;}
	#about .aboutbox{display: block;}
	#about .aboutbox .img{ width:100%}
	#about .aboutbox .text{ width:100%; padding:.4rem}
	#about .aboutbox .text h2{ font-size:.3rem;}
	#about .aboutbox .text .content{ margin-top:.2rem; font-size:.22rem;}
	#about .aboutbox .text .content p{ padding:.2rem 0}
	#about .aboutbox .text .more{ margin-top:.2rem}
	#about .aboutbox .text .more a{ padding:.08rem .4rem; font-size:.22rem}
	
	#num .list{flex-wrap:wrap; padding:.1rem 0}
	#num .list .item{ width:50%; padding:.3rem 0}
	#num .list .item .num{font-size:.5rem}
	#num .list .item p{ margin-top:.1rem; font-size:.22rem}
	
	#photo{padding:.8rem 0;}
	#photo .list{ margin-top:.5rem}
	#photo .list ul{flex-wrap:wrap;gap:.2rem}
	#photo .list ul li{ width:calc((100% - .2rem) / 2);}
	#photo .list ul li .img{height:3rem; padding:.2rem; }
	#photo .list ul li .title{ margin-top:.2rem; padding:0}
	
	#zh{ padding:.5rem 0;}
	#zh .list{ margin-top:.5rem}
	#zh .list ul{flex-wrap:wrap;gap:.2rem}
	#zh .list ul li{ width:calc((100% - .2rem) / 2);}
	#zh .list ul li .img{ height:2.5rem;padding:.1rem}
	#zh .list ul li .title{margin-top:.2rem; padding:0}
	
	#news{padding:.8rem 0;}
	#news .title{display:block;}
	#news .title .left h2{ font-size:.5rem; }
	#news .title .left span{font-size:.38rem;bottom:-.2rem;}
	#news .title .right{ margin-top:.5rem;flex-wrap:wrap;gap:.1rem}
	#news .title .right a{ padding:.1rem .2rem;font-size:.2rem; width:calc((100% - .1rem) / 2)}
	#news .list{ margin-top:.5rem}
	#news .list ul{gap:.3rem 0}
	#news .list ul li{ width:100%; padding:.3rem .3rem}
	#news .list ul li h2{ font-size:.26rem; line-height:1.5}
	#news .list ul li time{ margin-top:.1rem}
	#news .list ul li .info{font-size:.22rem; margin-top:.2rem}
}

#nbanner{ height:400px; background-repeat:no-repeat; background-position:center center; background-size:cover}
#local{ width:100%; padding:10px 0}
#local a{ margin:0 5px}

#main{ width:100%; background:#f6f6f7;}
#main .left{ width:280px}
#main .left .clist{ background:#fff}
#main .left .clist .title{ background:#16284d; color:#fff; padding:10px 20px; font-size:20px;}
#main .left .clist .list ul li{ border-bottom:1px solid #eee}
#main .left .clist .list ul li a{ padding:10px 20px; display:block; line-height:1.4; font-weight:normal}
#main .left .clist .list ul li.active a{ font-weight:700;color:#f39800}
 
#main .product{ width:calc(100% - 320px)}
#main .product .classinfo .title{ font-size:24px; font-weight:700; line-height:1.8}
#main .product .classinfo .desc{ margin-top:10px; line-height:1.6}
#main .product .list{ margin-top:40px}
#main .product .list ul{display: flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;gap:30px}
#main .product .list ul li{ width:calc((100% - 60px) / 3);}
#main .product .list ul li .img{ padding:20px; background:#fff;box-shadow: 1px 1px 6px 0 rgba(0,0,0,0.05);}
#main .product .list ul li .img{height:370px; display: flex;justify-content:center ;align-items:center; overflow:hidden}
#main .product .list ul li .img img{ max-width:100%;max-height:100%}
#main .product .list ul li p{ text-align:center; padding:20px 10px; line-height:1.6}

#main .about{padding:50px 0}
#main .about .title{ font-size:24px; font-weight:700; line-height:1.8}
#main .about .content{ padding:20px 0; font-size:16px; line-height:1.8}
#main .about .content p{ padding-bottom:10px}
#main .about .content img{ max-width:100%}
#main .about .piclist{ margin-top:20px}
#main .about .piclist ul{display: flex;justify-content:flex-start;align-items:flex-start;gap:0 20px}
#main .about .piclist ul li img{ width:100%}
#main .about .itemlist{ margin-top:20px;}
#main .about .itemlist ul{ display:flex;flex-wrap:wrap;gap:20px}
#main .about .itemlist ul li{ width:calc((100% - 20px) / 2); border:1px solid #eee; background:#fff; padding:20px;display: flex;justify-content:space-between;align-items:center;}
#main .about .itemlist ul li .icon{ width:15%; font-size:44px}
#main .about .itemlist ul li .text{ width:85%}
#main .about .itemlist ul li .text .tit{ font-size:18px; font-weight:700}
#main .about .itemlist ul li .text .desc{ line-height:1.6; margin-top:5px} 

#main .news{padding:50px 0}
#main .news .title{ font-size:24px; font-weight:700; line-height:1.8}
#main .news .list ul li{ background:#fff; padding:20px; margin-top:20px;}
#main .news .list ul li a{display: flex;justify-content:space-between ;align-items:center;}
#main .news .list ul li .img{ width:25%; height:280px;}
#main .news .list ul li .img img{width:100%;height:100%;object-fit:cover}
#main .news .list ul li .info{ width:72%}
#main .news .list ul li .info h2{ font-size:18px}
#main .news .list ul li .info time{ display:block; margin-top:10px}
#main .news .list ul li .info p{line-height:1.6; margin-top:10px}

#main .down{padding:50px 0}
#main .down .title{ font-size:24px; font-weight:700; line-height:1.8}
#main .down .list ul li{ background:#fff; padding:20px; margin-top:10px;display: flex;justify-content:space-between ;align-items:center;}
#main .down .list ul li h2{ font-size:18px}
#main .down .list ul li span a{ background:#16284d; color:#fff; border-radius:6px; padding:0 10px; line-height:40px; display:inline-block}

#main .rcontact{padding:50px 0}
#main .rcontact .company h2{ font-size:20px; font-weight:700; line-height:1.8; margin-bottom:20px}
#main .rcontact .company p{ font-size:16px; display:flex;align-items:center;justify-content:space-between; padding:10px 0}
#main .rcontact .company p i{ width:36px; height:36px; border-radius:36px; background:#16284d;display:flex;align-items:center;justify-content:center; color:#fff;}
#main .rcontact .company p em{ width:calc(100% - 50px)}
#main .rcontact .msg{ margin-top:30px}
#main .rcontact .msg .title{ font-size:20px; font-weight:700; line-height:1.8; margin-bottom:20px}
#main .rcontact .msg .form{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 2%}
#main .rcontact .msg .form .item{ width:32%}
#main .rcontact .msg .form .item label{ display:block}
#main .rcontact .msg .form .item label font{ color:#f00}
#main .rcontact .msg .form .item .input{ border:1px solid #eee; background:#fff; line-height:50px; width:100%; text-indent:20px}
#main .rcontact .msg .form .item2{ width:100%}
#main .rcontact .msg .form .item2 label{ display:block}
#main .rcontact .msg .form .item2 label font{ color:#f00}
#main .rcontact .msg .form .item2 .textarea{ border:1px solid #eee; background:#fff; line-height:50px; width:100%; text-indent:20px; height:200px}
#main .rcontact .msg .button{ text-align:center; margin-top:20px}
#main .rcontact .msg .button .btn{ border:0; background:#16284d; line-height:50px; padding:0 50px; color:#fff; font-size:16px}

#main .view{ max-width:1200px; margin:0 auto;padding:50px 0;}
#main .view .title{text-align: center}
#main .view .title h1{ font-size:24px; font-weight:700; text-align: center; padding:20px 0}
#main .view .title .info{ text-align:center; border-bottom:1px solid #eee;}
#main .view .content{ padding:20px 0; line-height:1.8; font-size:16px}
#main .view .content p{ margin-bottom:20px}
#main .view .content img{ max-width:800px}
#main .view .content span{ text-wrap: normal;}
#main .view .uppage{ border-top:1px solid #eee; margin-top:20px; padding-top:20px}

#main .pro_pic{ padding:50px 0;display: flex;justify-content:space-between ;}
#main .pro_pic .focus{ width:480px; overflow:hidden}
#main .pro_pic .focus .bigpic { width: 100%;height:480px; border:1px solid #ddd; box-sizing:border-box; background:#fff}
#main .pro_pic .focus .bigpic .swiper-slide { height:480px; overflow:hidden;background-size: cover;background-position: center;display: flex;justify-content:center ;align-items:center;}
#main .pro_pic .focus .bigpic .swiper-slide img {display: block;max-width: 100%; max-height: 100%;}
#main .pro_pic .focus .smallpic {box-sizing: border-box;padding: 10px 0;}
#main .pro_pic .focus .smallpic .swiper-slide {width: 20%;height:80px;opacity: 0.4; border:2px solid #ddd;display: flex;justify-content:center ;align-items:center; background:#fff; padding:2px;}
#main .pro_pic .focus .smallpic .swiper-slide-thumb-active {opacity: 1; border:2px solid #c2292d;}
#main .pro_pic .focus .smallpic .swiper-slide img {display: block;max-width: 100%; max-height: 100%;object-fit: cover;}
#main .pro_pic .right{ width:calc(100% - 550px);}
#main .pro_pic .right h1{ font-size:26px; line-height:1.4}
#main .pro_pic .right .info{line-height:1.8; color:#666; margin-top:20px;background: #fafafa;border-radius: 6px;padding: 20px;}
#main .pro_pic .right .info .infon{font-size: 16px;line-height: 48px;color: #505050;	border-bottom:#ddd 1px solid;padding:0 20px 5px 20px;display:block;}
#main .pro_pic .right .button{ margin-top:50px; display:flex}
#main .pro_pic .right .button a{ margin-right:20px; border-radius:6px; background:#fff; border:1px solid #16284d; color:#16284d; padding:15px 50px; font-size:16px}
#main .pro_pic .right .button a:last-child{ background:#16284d; color:#fff}
#main .pro_pic .right .button a:hover{ background:#f39800; border:1px solid #f39800; color:#fff}

#main .pro_content{ width:100%; padding:0 0 50px; }
#main .pro_content .tabbox{ border:1px solid #ddd}
#main .pro_content .title{font-size: 20px;color: #16284d;line-height: 28px;padding-top:20px;margin-bottom:20px; font-weight:700}
#main .pro_content .details{border-radius: 6px ;padding: 20px;display: flex;flex-wrap: wrap;align-items: flex-start; background: #fff;gap:0 5%}
#main .pro_content .details table, th, td {
  border: 1px solid black; /* 设置边框为1像素黑色实线 */
}
#main .pro_content .details table{margin:0 auto;}
#main .pro_content .details .item{width: 30%;margin-bottom: 30px;}
	
#main .pro_content .details .item .itemTitle{font-size: 16px;font-weight: 700;line-height: 30px;border-bottom: 1px solid #c8c8c8;color: #505050;overflow: hidden;text-overflow: ellipsis}	
#main .pro_content .details .item .itemValue {font-size: 16px;font-weight: 400;color: #323232;line-height: 30px;margin-top: 10px}


#main .pro_send{ width:100%;  padding:0 0 50px; }
#main .pro_send .title{ color:#16284d; font-weight:700; font-size:18px}
#main .pro_send .listbox{ margin-top:30px;background:#fff; padding:20px;border-radius: 6px }
#main .pro_send .listbox .form{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 2%}
#main .pro_send .listbox .form .item{ width:32%}
#main .pro_send .listbox .form .item label{ display:block}
#main .pro_send .listbox .form .item label font{ color:#f00}
#main .pro_send .listbox .form .item .input{ border:1px solid #eee; background:#fff; line-height:50px; width:100%; text-indent:20px}
#main .pro_send .listbox .form .item2{ width:100%}
#main .pro_send .listbox .form .item2 label{ display:block}
#main .pro_send .listbox .form .item2 label font{ color:#f00}
#main .pro_send .listbox .form .item2 .textarea{ border:1px solid #eee; background:#fff; line-height:50px; width:100%; text-indent:20px; height:200px}
#main .pro_send .listbox .button{margin-top:20px}
#main .pro_send .listbox .button .btn{ border:0; background:#16284d; line-height:50px; padding:0 50px; color:#fff; font-size:16px}

@media (max-width:800px){
	body,html{ width:100%;font-size:.22rem;line-height:.34rem;}	
	.wrap{ padding:0px .2rem}
	
	#nbanner{ height:3rem;}
	#local{ width:100%; padding:.2rem 0; font-size:.2rem}
	#local a{ margin:0 .05rem; font-size:.2rem}
		
	#main .wrap{display:block;}
	#main .left{ width:100%}
	#main .left .clist .title{ padding:.2rem .2rem; font-size:.24rem;}
	#main .left .clist .list ul li a{ padding:.2rem .2rem}
	#main .left .contact{ display:none}
	#main .product{ width:100%; margin-top:.5rem}
	#main .product .classinfo{ padding:.2rem;flex-wrap:wrap}
	#main .product .classinfo .img{ width:100%}
	#main .product .classinfo .img img{ width:100%}
	#main .product .classinfo .info{ width:100%; margin-top:.3rem;}
	#main .product .classinfo .info .title{ font-size:.3rem;}
	#main .product .classinfo .info .desc{ margin-top:.1rem;}
	#main .product .list{ margin-top:.2rem}
	#main .product .list ul{gap:.3rem}
	#main .product .list ul li{ width:100%;}
	#main .product .list ul li .img{ padding:.2rem; height:5rem}
	#main .product .list ul li p{padding:.2rem; font-size:.22rem;}
	
	#main .about{ width:100%; padding:.5rem 0}
	#main .about .title{font-size:.3rem;}
	#main .about .content{ padding:.2rem 0; font-size:.22rem; line-height:1.6}
	#main .about .content p{ padding-bottom:.2rem}
	#main .about .piclist{ margin-top:.2rem}
	#main .about .piclist ul{gap:0 .2rem;flex-wrap:wrap;gap:.2rem;}
	#main .about .piclist ul li{ width:calc((100% - .2rem) / 2)}
	#main .about .itemlist{ margin-top:.2rem;}
	#main .about .itemlist ul{ display:flex;flex-wrap:wrap;gap:.2rem}
	#main .about .itemlist ul li{ width:100%;  padding:.2rem;}
	#main .about .itemlist ul li .icon{font-size:.34rem}
	#main .about .itemlist ul li .text .tit{ font-size:.24rem; }
	#main .about .itemlist ul li .text .desc{ margin-top:.1rem; font-size:.2rem} 
	
	#main .news{ width:100%; padding:.5rem 0}
	#main .news .title{font-size:.3rem;}
	#main .news .list ul li{ background:#fff; padding:.2rem; margin-top:.2rem;}
	#main .news .list ul li a{display: block;justify-content:space-between ;align-items:center;}
	#main .news .list ul li .img{ width:100%; height:auto}
	#main .news .list ul li .img img{ width:100%}
	#main .news .list ul li .info{ width:100%; margin-top:.2rem}
	#main .news .list ul li .info h2{ font-size:.22rem; line-height:1.4}
	#main .news .list ul li .info time{ display:block; margin-top:.1rem; font-size:.2rem; color:#777}
	#main .news .list ul li .info p{ display:none}
	
	#main .down{ width:100%; padding:.5rem 0}
	#main .down .title{font-size:.3rem;}
	#main .down .list ul li{ background:#fff; padding:.2rem; margin-top:.2rem;display: block;}
	#main .down .list ul li h2{ font-size:.22rem; line-height:1.4}
	#main .down .list ul li span{ display:block; margin-top:.1rem}
	#main .down .list ul li span a{padding:0 .1rem; line-height:.4rem;}
		
	#main .rcontact{ width:100%;}
	#main .rcontact .company h2{ font-size:.26rem;margin-bottom:.2rem}
	#main .rcontact .company p{ font-size:.22rem; padding:.1rem 0}
	#main .rcontact .company p i{ width:.4rem; height:.4rem; border-radius:.4rem; margin-right:.1rem;}
	#main .rcontact .company p em{ width:calc(100% - .5rem)}
	#main .rcontact .msg{ margin-top:.3rem}
	#main .rcontact .msg .title{ font-size:.26rem; margin-bottom:.2rem}
	#main .rcontact .msg .form{display: block;}
	#main .rcontact .msg .form .item{ width:100%; margin-top:.2rem}
	#main .rcontact .msg .form .item .input{ line-height:.6rem; text-indent:.2rem}
	#main .rcontact .msg .form .item2{ width:100%;margin-top:.2rem}
	#main .rcontact .msg .form .item2 .textarea{line-height:.6rem;text-indent:.2rem; height:2rem}
	#main .rcontact .msg .button{margin-top:.2rem}
	#main .rcontact .msg .button .btn{line-height:.6rem; padding:0 .5rem; font-size:0.22rem}
	
	#main .view{ max-width:100%;}
	#main .view .title h1{ font-size:.3rem; padding:.2rem 0}
	#main .view .title .info{ font-size:.2rem}
	#main .view .content{ padding:.2rem 0; line-height:1.8; font-size:.22rem}
	#main .view .content p{ margin-bottom:.2rem}
	#main .view .content img{ max-width:100%}
	#main .view .uppage{margin-top:.2rem; padding-top:.2rem}
	
	#main .pro_pic{padding:.5rem 0;}
	#main .pro_pic{display:block;}
	#main .pro_pic .focus{ width:100%;}
	#main .pro_pic .focus .bigpic { width: 100%; height:4.8rem}
	#main .pro_pic .focus .bigpic .swiper-slide { height:4.8rem; }
	#main .pro_pic .focus .smallpic {padding: .1rem 0;}
	#main .pro_pic .focus .smallpic .swiper-slide {width: 20%;height:1rem;border:2px solid #ddd;padding:2px;}
	#main .pro_pic .right{ width:100%; margin-top:.5rem}
	#main .pro_pic .right h1{ font-size:.3rem;}
	#main .pro_pic .right .info{line-height:1.6; color:#666; margin-top:.2rem; font-size:.22rem}
	#main .pro_pic .right .button{ margin-top:.5rem; display:flex}
	#main .pro_pic .right .button a{ margin-right:.2rem; padding:.2rem .4rem; font-size:.24rem}
		
	#main .pro_content{ padding:0 0 .5rem; }
	#main .pro_content .title{font-size: .26rem;line-height: 1;padding-top:.2rem;margin-bottom:.2rem;}
	#main .pro_content .details{padding: .2rem;display: block}
	#main .pro_content .details .item{width: 100%;margin-bottom: .1rem;}		
	#main .pro_content .details .item .itemTitle{font-size: .22rem;}	
	#main .pro_content .details .item .itemValue {font-size: .22rem;}

	
	#main .pro_send{padding:0 0 .5rem; }
	#main .pro_send .box{padding:.2rem}
	#main .pro_send .title{ font-size:.24rem}
	#main .pro_send .listbox{ margin-top:.3rem}
	#main .pro_send .listbox .form{display: block;}
	#main .pro_send .listbox .form .item{ width:100%; margin-top:.2rem}
	#main .pro_send .listbox .form .item .input{ line-height:.6rem; text-indent:.2rem}
	#main .pro_send .listbox .form .item2{ width:100%;margin-top:.2rem}
	#main .pro_send .listbox .form .item2 .textarea{line-height:.6rem;text-indent:.2rem; height:2rem}
	#main .pro_send .listbox .button{margin-top:.2rem}
	#main .pro_send .listbox .button .btn{line-height:.6rem; padding:0 .5rem; font-size:0.22rem}
}
#fenye{padding:50px 0;text-align:center;clear:both;}
#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.page-num-current{font-weight:700;color:#fff;background:#16284d;border:1px solid #16284d}
#fenye a:hover{background:#16284d;color:#fff;border:1px solid #16284d}
#fenye span{margin:0 2px;color:#5a5a5a;text-decoration:none;padding:10px 15px;border:1px solid #eee;background:#FFF}

@media (max-width:900px){	
	#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 .page-num{ display:none}
}

.icon-button {
    display: inline-block;
    height: 56px !important;
    text-align: center;
    padding: 13px 30px !important;
    line-height: 21px !important;
    border-radius: 6px !important;
    font-size: 18px !important;
    font-weight: normal !important;
    text-transform: capitalize;
    outline: 0;
    -webkit-transition: background-color .2s ease-in-out;
    -moz-transition: background-color .2s ease-in-out;
    -o-transition: background-color .2s ease-in-out;
    -ms-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out;
    cursor: pointer;
    background-image: none !important
}
.icon-button:first-of-type {
    margin: 48px 36px 0 0 !important
}
.icon-button:last-of-type {
    margin: 48px 0 0 -4px !important;
    width: 300px
}

 .buttonClass2 {
    background-color: #16284d !important;
    border-color: #16284d !important;
    color: #fff !important;
    border: none !important;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis
}

.buttonClass1 {
    background-color: #fff;
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #16284d !important;
    font-size: 18px;
    font-family: PingFang SC-Regular,PingFang SC;
    font-weight: 400;
    color: #16284d !important;
    line-height: 21px;
    width: 260px;
    overflow: hidden;
    text-overflow: ellipsis
}

.buttonClass1 span {
    overflow: hidden;
    max-width: 160px
}

.buttonClass1 a {
    color: #16284d !important;
    overflow: hidden;
    max-width: 160px
}

.buttonClass1:hover a {
    color: #fff !important
}

. .buttonClass1:hover {
    border-color: #16284d !important;
    background-color: #16284d !important;
    color: #fff !important
}