﻿/*************************************************************************/
/*全局样式开始*/
/*************************************************************************/
@charset "utf-8";
*{margin:0;padding:0;outline:0;}
body,html{color:#333;font:14px/30px "Noto Sans SC","思源雅黑","微软雅黑","Microsoft YaHei", "Helvetica Neue", Helvetica, STHeiTi, 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:"微软雅黑","Microsoft YaHei", "Helvetica Neue", Helvetica, STHeiTi, 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:#0564b4;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;max-width:1500px;width:100%;}
.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);}


#header{ width:100%; height:120px; padding:0 10%;display: flex;justify-content:space-between ;align-items:center;}
#header .logo img{ height:70px}
#header .right{}
#header .right .top{display: flex;justify-content:flex-end;align-items:center;}
#header .right .top .share{display: flex;align-items:center;}
#header .right .top .share a{ margin-left:5px}
#header .right .top .share i{ font-size:20px; line-height:30px}
#header .right .top .email{display: flex;align-items:center; margin-left:10%}
#header .right .top .email i{ font-size:16px; margin-right:5px}
#header .right .top .email span{}
#header .right .top .search{display: flex;align-items:center; margin-left:10%}
#header .right .top .search form{display: flex;align-items:center;}
#header .right .top .search .key{ border:1px solid #c2292d; line-height:30px}
#header .right .top .search .btn{ border:1px solid #c2292d; background:#c2292d; color:#fff; line-height:30px; padding:0 10px}
#header .right .nav{ background:#2c3090; margin-top:10px}
#header .right .nav ul{ display: flex;justify-content:space-between ;align-items:center;}
#header .right .nav ul li a{ padding:5px 25px; color:#fff; display:block; font-size:13px}
#header .right .nav ul li.active{ background:#5357bc}
#header .right .nav ul li:hover{ background:#5357bc}
#header .right .mnav{ display: none;}

#banner{ width:100%;}
#banner .focus{ position:relative; overflow:hidden;}
#banner .focus .swiper-slide{ width:100%;}
#banner .focus .swiper-slide img{ width:100%;}

.stitle h2{ font-size:34px; text-align:center; line-height:1}
.stitle p{ text-align:center; color:#999;line-height:1.6; margin-top:10px}

#product{ width:100%; padding:80px 0}
#product .clist{ margin-top:50px; display:flex;;justify-content:center;gap:0 10px}
#product .clist a{ display:block; background:#eee; padding:5px 20px}
#product .clist a.active{ background:#282d8c; color:#fff}
#product .list{ margin-top:30px; overflow:hidden}
#product .list ul{display: flex;justify-content:flex-start ;align-items:flex-start; flex-wrap:wrap;gap:30px}
#product .list ul li{ width:calc((100% - 90px) / 4);}
#product .list ul li .img{ position:relative; overflow:hidden}
#product .list ul li .img img{ width:100%}
#product .list ul li .img .active{ position:absolute; left:50%; top:50%; width:0; height:0; background:rgba(83,87,188,.5);display: flex;justify-content:center;align-items:center;transform: scale(0);}
#product .list ul li .img .active i{ width:80px; height:80px; border-radius:80px; background:rgba(255,255,255,.8); font-size:28px;display: flex;justify-content:center;align-items:center; color:#c2282d}
#product .list ul li .title{ line-height:1.6; margin-top:20px}
#product .list ul li:hover .img .active{ left:5%; top:5%; width:90%; height:90%;transform: scale(1);}

#about{ width:100%; background:#f5f5f5;display: flex;justify-content:space-between;}
#about .left{ width:48%; overflow:hidden}
#about .left img{width:100%;height:100%;object-fit:cover}
#about .left .stitle em{font-size:20px; font-weight:bold;}
#about .left .stitle h2{ font-size:34px; text-align:left;}
#about .right{ width:48%; padding:50px 0 250px; position:relative}
#about .right .stitle h2{ font-size:34px; line-height:1; text-align:left}
#about .right .content{ margin-top:20px; line-height:1.6; max-width:600px;}
#about .right .more{ margin-top:30px}
#about .right .more a{ border:1px solid #282d8c; color:#282d8c; padding:5px 30px; display: inline-block}
#about .right .more a:hover{ border:1px solid #c3292f; background:#c3292f; color:#fff;}
#about .right .count{display: flex;justify-content:space-between;align-items:center; background:#2c2f90; padding:40px 80px; position:absolute; right:10%; bottom:50px;width:1000px}
#about .right .count .item{display: flex;justify-content:flex-start;align-items:center;}
#about .right .count .item .icon i{ color:#fff; font-size:50px}
#about .right .count .item .info{ color:#fff; margin-left:20px}
#about .right .count .item .info big{ display:block; font-size:34px; font-weight:700}
#about .right .count .item .info small{ display:block; font-size:16px}

#about .content1{ margin-top:50px;display:flex;justify-content:space-between ;align-items:flex-start;}
#about .content1 .left{ width:48%}
#about .content1 .left .text{ font-size:16px;line-height:1.8;color:#000;}
#about .content1 .left .more{margin-top:30px}
#about .content1 .left .more a{ background:#2c2f90;color:#fff;padding:2px 20px;display:inline-block}

#apply{ width:100%; padding:80px 0}
#apply .list{ margin-top:50px}
#apply .list ul{display: flex;justify-content:flex-start ;align-items:flex-start; flex-wrap:wrap;gap:30px}
#apply .list ul li{ width:calc((100% - 90px) / 4); position:relative}
#apply .list ul li .img{ position:relative; overflow:hidden}
#apply .list ul li .img img{ width:100%}
#apply .list ul li p{ line-height:1.6; position:absolute; left:0; bottom:0; width:100%; color:#fff; background:rgba(83,87,188,.5); padding:10px;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#apply .list ul li:hover p{ background:#c2282d; color:#fff}

#factory{ width:100%; padding:80px 0; background:#f5f5f5}
#factory .list{ margin-top:50px}
#factory .list ul{display: flex;justify-content:flex-start ;align-items:flex-start; flex-wrap:wrap;gap:30px}
#factory .list ul li{ width:calc((100% - 90px) / 4); position:relative; overflow:hidden}
#factory .list ul li img{ width:100%}

#footer{ width:100%; background:#2c3090;}
#footer .map{ padding:50px 0;display: flex;justify-content:space-between;}
#footer .map .about{ width:25%}
#footer .map .about .logo img{ height:60px}
#footer .map .about .content{ color:#fff; margin-top:20px; line-height:1.6}
#footer .map .about .share{ margin-top:30px;display: flex;gap:0 10px}
#footer .map .about .share i{ width:30px; height:30px; border-radius:30px; border:1px solid #fff; line-height:30px; text-align:center; color:#fff}
#footer .map .about .share a:hover i{ background:#ce241c; border:1px solid #ce241c}
#footer .map .linker{ width:10%}
#footer .map .linker h3{ font-size:16px; color:#fff; margin-bottom:20px}
#footer .map .linker p{ line-height:26px;}
#footer .map .linker p a{ color:#fff}
#footer .map .contact{ width:20%}
#footer .map .contact h3{ font-size:16px; color:#fff; margin-bottom:20px}
#footer .map .contact .content{ line-height:26px;color:#fff}
#footer .map .contact .content a{ color:#fff}
#footer .map .from{ width:20%}
#footer .map .from h3{ font-size:16px; color:#fff; margin-bottom:20px}
#footer .map .from .box .text{ width:100%; border:1px solid #fff; line-height:30px; border-radius:4px; background:none; padding:0 10px;color:#fff}
#footer .map .from .box .textarea{ width:100%; border:1px solid #fff; line-height:30px; margin-top:10px; border-radius:4px; background:none; padding:0 10px;color:#fff}
#footer .map .from .box .btn{ border:1px solid #fff; line-height:30px; text-align:center; color:#fff; display:block; border-radius:4px; background:none; width:100%}
#footer .map .from .box .btn:hover{ background:#c2292d; border:1px solid #c2292d; color:#fff}
#footer .copyright{ color:#fff; border-top:1px solid rgba(255,255,255,.3); padding:20px 0; text-align:center}
#footer .copyright a{ margin:0 5px; color:#fff}
#footer .map .from .box .text::placeholder{color:#fff;}
#footer .map .from .box .textarea::placeholder{color:#fff;}

@media (max-width:1750px){
	#header{padding:0 20px;}
	.wrap{ padding:0 20px}
}
@media (max-width:1500px){
	#header .right .nav ul li a{ padding:5px 15px;}
}

@media (max-width:1250px){
	#header .right .nav ul li a{ padding:5px 5px;}
	#header .right .top .email{margin-left:5%}
	#header .right .top .search{margin-left:5%}
}

@media (max-width:1100px){
	.wrap{ padding:0px}
	body,html{font-size:.22rem;line-height:.34rem}	
	#header{padding:0 .2rem;height:1rem; position:fixed; left:0; top:0; z-index:999; background:#fff}
	#header .logo img{height:.6rem}
	#header .right .top{ display:none}	
	#header .right .nav{position:absolute;background:#fff;height:auto;min-height:100vh;width:100%;top:1rem;z-index:105;padding:.1rem .25rem 0;transform:translatex(100%);left:0;border-top:1px solid #eee; margin-top:0;}
	#header .right .nav ul{display:block}
	#header .right .nav ul li a{line-height:.7rem;font-size:.22rem;padding:0; display:block;border-bottom:1px solid #eee; color:#333}
	#header .right .nav ul li.active{ background:none; color:#5357bc;}
	#header .right .nav ul li.active a{ color:#5357bc; font-weight:700}
	#header .right .nav ul li:hover a{ color:#fff; padding:0 .2rem}
	#header .right .nav ul li.active:hover a{ background:#5357bc;color:#fff; padding:0 .2rem}
	#header .right .nav.isopen{transform:translatex(0);}
	
	#header .right .mnav{position:relative;display:block;width:.34rem;height:.33rem;cursor:pointer;margin-left:.1rem}
	#header .right .mnav span{position:absolute;display:block;width:.34rem;height:.05rem;background:#2c3190;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);}

}
@media (max-width:800px){
	.stitle h2{ font-size:.4rem;}
	.stitle p{margin-top:.2rem}

	#banner{ margin-top:1rem}
	#product{padding:.8rem .2rem}
	#product .clist{ margin-top:.3rem; gap:.1rem;flex-wrap:wrap}
	#product .clist a{ padding:.05rem .2rem}
	#product .list{ margin-top:.3rem}
	#product .list ul{gap:.2rem}
	#product .list ul li{ width:calc((100% - .2rem) / 2);}
	#product .list ul li .img .active i{ width:1rem; height:1rem; border-radius:1rem;  font-size:.3rem;}
	#product .list ul li .title{margin-top:.2rem; font-size:.22rem}
	
	#about{display:block;}
	#about .left{ width:100%; overflow:hidden}
	#about .left img{width:100%;height:100%;object-fit:cover}
	#about .right{ width:100%; padding:.8rem .2rem 0}
	#about .right .stitle h2{ font-size:.4rem; text-align:center}
	#about .right .content{ margin-top:.2rem; max-width:100%; font-size:.22rem;}
	#about .right .more{ margin-top:.3rem}
	#about .right .more a{ padding:.1rem .3rem;}
	#about .right .count{padding:.4rem .3rem .4rem; position: inherit; right: auto; bottom:auto;width:100%; margin-top:.5rem; display:block}
	#about .right .count .item{ margin-top:.4rem}
	#about .right .count .item:first-child{ margin-top:0}
	#about .right .count .item .icon i{ font-size:.6rem}
	#about .right .count .item .info{ margin-left:.2rem}
	#about .right .count .item .info big{ font-size:.3rem;line-height:1}
	#about .right .count .item .info small{ font-size:.22rem; line-height:1; margin-top:.1rem}
	
	#apply{padding:.8rem .2rem}
	#apply .list{ margin-top:.5rem}
	#apply .list ul{gap:.2rem}
	#apply .list ul li{ width:calc((100% - .2rem) / 2);}
	#apply .list ul li p{ padding:.2rem; font-size:.22rem}
	
	#factory{padding:.8rem .2rem}
	#factory .list{ margin-top:.5rem}
	#factory .list ul{gap:.2rem}
	#factory .list ul li{ width:calc((100% - .2rem) / 2);}
	
	#footer .map{ padding:.5rem .2rem;display: block;}
	#footer .map .about{ width:100%}
	#footer .map .about .logo img{ height:.6rem}
	#footer .map .about .content{margin-top:.2rem; font-size:.2rem}
	#footer .map .about .share{ margin-top:.3rem;gap:0 .1rem}
	#footer .map .about .share i{ width:.5rem; height:.5rem; border-radius:.5rem; line-height:.5rem;}
	#footer .map .about .share a:hover i{ background:#ce241c; border:1px solid #ce241c}
	#footer .map .linker{display:none}
	#footer .map .contact{ width:100%; margin-top:.5rem}
	#footer .map .contact h3{ font-size:.24rem;margin-bottom:.2rem}
	#footer .map .contact .content{ line-height:26px;color:#fff; font-size:.2rem}
	#footer .map .contact .content a{ color:#fff}
	#footer .map .from{ width:100%; margin-top:.5rem}
	#footer .map .from h3{ font-size:.24rem; margin-bottom:.2rem}
	#footer .map .from .box .text{line-height:.6rem; padding:0 .2rem; font-size:.22rem}
	#footer .map .from .box .textarea{  line-height:.34rem; margin-top:.2rem; padding:0 .2rem; height:2rem; font-size:.22rem}
	#footer .map .from .box .btn{ line-height:.6rem; width:100%;font-size:.22rem}
	#footer .copyright{padding:.2rem; font-size:.2rem; line-height:1.6}
	#footer .copyright a{ margin:0 .05rem;}
}

#nbanner{ width:100%}
#nbanner img{ width:100%}

#pro_text{ width:100%; padding:50px 0}
#pro_text .item{ margin-top:30px}
#pro_text .item:frist-child{ margin-top:0}
#pro_text .item .ftitle{ font-size:26px; font-weight:700;; line-height:1.3}
#pro_text .item .ftitle.c{ text-align:center}
#pro_text .item .content{ margin-top:10px;line-height:1.6}

#pro_list{ padding:50px 0}
#pro_list .list{ margin-top:50px}
#pro_list .list ul{display: flex;justify-content:flex-start ;align-items:flex-start; flex-wrap:wrap;gap:30px}
#pro_list .list ul li{ width:calc((100% - 90px) / 4);}
#pro_list .list ul li .img{ position:relative; overflow:hidden}
#pro_list .list ul li .img img{ width:100%}
#pro_list .list ul li .img .active{ position:absolute; left:50%; top:50%; width:0; height:0; background:rgba(83,87,188,.5);display: flex;justify-content:center;align-items:center;transform: scale(0);}
#pro_list .list ul li .img .active i{ width:80px; height:80px; border-radius:80px; background:rgba(255,255,255,.8); font-size:28px;display: flex;justify-content:center;align-items:center; color:#c2282d}
#pro_list .list ul li .title{ line-height:1.6; margin-top:20px}
#pro_list .list ul li:hover .img .active{ left:5%; top:5%; width:90%; height:90%;transform: scale(1);}

#pro_apply{ width:100%; padding:50px 0}
#pro_apply .list{ margin-top:50px; display:flex;justify-content:space-between;align-items:flex-start;}
#pro_apply .list .left{ width:40%}
#pro_apply .list .left .text{ line-height:26px}
#pro_apply .list .left .olist{ margin-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
#pro_apply .list .left .olist .item{ width:50%; display:flex;align-items:center;}
#pro_apply .list .left .olist .item i{ margin-right:10px}
#pro_apply .list .right{ width:55%}
#pro_apply .list .right img{ width:100%}

#pro_vs{ width:100%; padding:50px 0}
#pro_vs .list{ margin-top:50px; display:flex;justify-content:space-between;align-items:flex-start;}
#pro_vs .itembox{ width:40%}
#pro_vs .itembox .img img{ width:100%}
#pro_vs .itembox .title{ text-align:center; font-size:24px; font-weight:700; margin-top:20px}
#pro_vs .itembox .text{ margin-top:20px}
#pro_vs .itembox .text .item{ margin-top:10px}
#pro_vs .center{ width:20%; text-align:center; padding-top:100px}
#pro_vs .center img{ width:50%}

#pro_acc{ width:100%; padding:50px 0}
#pro_acc .list{ margin-top:50px;}
#pro_acc .list ul{display:flex;justify-content:space-between;align-items:flex-start;}
#pro_acc .list ul li{ background:#f5f5f5; width:31%}
#pro_acc .list ul li .img img{ width:100%}
#pro_acc .list ul li .info{ padding:20px}
#pro_acc .list ul li .info h2{ font-size:18px; font-weight:700}
#pro_acc .list ul li .info p{ margin-top:20px; line-height:1.6}

#pro_que{ width:100%; padding:50px 0}
#pro_que .list{ margin-top:20px;}
#pro_que .list ul{display:flex;justify-content:space-between;align-items:flex-start; flex-wrap:wrap;gap:30px 50px}
#pro_que .list ul li{ width:calc((100% - 50px) / 2); border-bottom:1px solid #eee; padding:30px 0}
#pro_que .list ul li .title{ font-size:18px; font-weight:700}
#pro_que .list ul li .info{ line-height:1.6; margin-top:10px}

#about_text{ width:100%; padding:50px 0}
#about_text .list{ margin-top:50px;display:flex;justify-content:space-between;align-items:flex-start;}
#about_text .list .text{ width:45%}
#about_text .list .text em{ font-weight:600; font-style:italic; font-size:18px}
#about_text .list .img{ width:45%}
#about_text .list .img img{ width:100%}

#about_count{ width:100%; padding:50px 0; background:url(../images/bg_about_count.jpg) no-repeat center center; background-size:cover}
#about_count .wrap{display:flex;justify-content:space-between;align-items:center;}
#about_count .item{ width:25%; text-align:center}
#about_count .item .icon i{ font-size:44px; color:#fff; line-height:1.6}
#about_count .item big{ font-size:44px; display:block; text-align:center; color:#fff; line-height:1.6; padding:20px 0 10px}
#about_count .item small{ font-size:20px; display:block; text-align:center; color:#fff}

#about_adv{ width:100%; padding:50px 0}
#about_adv .list{ margin-top:50px;}
#about_adv .list ul{display:flex;justify-content:space-between; flex-wrap:wrap;gap:20px 20px}
#about_adv .list ul li{ width:calc((100% - 20px) / 2); padding:20px; border:1px solid #eee}
#about_adv .list ul li .title{ font-size:18px; font-weight:700}
#about_adv .list ul li .info{ line-height:1.4; margin-top:10px}

#contact{ width:100%; padding:50px 0}
#contact .list{ margin-top:100px;display:flex;justify-content:space-between;gap:0 30px}
#contact .list .item{ width:calc((100% - 60px) / 3); border:5px solid #eee; border-radius:4px;position:relative}
#contact .list .item .icon{ position:absolute; left:50%; top:-50px; margin-left:-50px; width:100px; height:100px; border:5px solid #eee; border-radius:50px; background:#fff}
#contact .list .item .icon{display:flex;justify-content:center; align-items:center; font-size:36px; color:#2c3090 }
#contact .list .item .info{ margin-top:50px; padding:30px; text-align:center; font-size:16px}

#formbox{ width:100%; padding:50px 0}
#formbox .wrap{ display:flex;justify-content:space-between;}
#formbox .img{ width:48%}
#formbox .img img{ width:100%}
#formbox .right{ width:48%}
#formbox .right .ftitle{ font-size:26px; font-weight:700}
#formbox .right .form{ margin-top:30px}
#formbox .right .form .item{ margin-top:10px}
#formbox .right .form .item .t font{ color:#f00; margin-right:5px}
#formbox .right .form .item .input .text{ border:1px solid #ddd; width:100%; line-height:40px; border-radius:4px; font-size:14px}
#formbox .right .form .item .input .select{ border:1px solid #ddd; line-height:40px;height:40px; border-radius:4px; font-size:14px}
#formbox .right .form .item .input .textarea{ border:1px solid #ddd; width:100%; line-height:40px; height:140px; border-radius:4px; font-size:14px}
#formbox .right .form .button{ margin-top:10px}
#formbox .right .form .button .btn{ background:#c2292d; color:#fff; line-height:50px; border-radius:4px; padding:0 50px; border:0}
#formbox .right .form .button .btn:hover{ background:#4145af}


#pro_view{ width:100%; padding:50px 0}
#pro_view .wrap{display:flex;justify-content:space-between;}
#pro_view .focus{ width:510px; overflow:hidden}
#pro_view .focus .bigpic { width: 100%; border:1px solid #ddd; box-sizing:border-box}
#pro_view .focus .bigpic .swiper-slide {background-size: cover;background-position: center;}
#pro_view .focus .bigpic .swiper-slide img {display: block;width: 100%; height: 100%;object-fit: cover;}
#pro_view .focus .smallpic {box-sizing: border-box;padding: 10px 0;}
#pro_view .focus .smallpic .swiper-slide {width: 20%;height: 100%;opacity: 0.4; border:2px solid #ddd}
#pro_view .focus .smallpic .swiper-slide-thumb-active {opacity: 1; border:2px solid #c2292d;}
#pro_view .focus .smallpic .swiper-slide img {display: block;width: 100%; height: 100%;object-fit: cover;}
#pro_view .right{ width:calc(100% - 580px)}
#pro_view .right h1{ font-size:26px; line-height:1.4}
#pro_view .right .info{line-height:1.8; color:#666; margin-top:20px}
#pro_view .right .pdf{margin-top:20px;}
#pro_view .right .pdf a{ background:#0070C0; color:#fff; display:inline-block; padding:10px 50px}
#pro_content{ width:100%;}
#pro_content .box{ border:1px solid #ddd}
#pro_content .box .item{ border-bottom:1px solid #ddd}
#pro_content .box .item:last-child{ border-bottom:0}
#pro_content .box .item .title{ background:#f1f1f1; padding:8px 20px; border-bottom:1px solid #ddd; font-size:18px; font-weight:700}
#pro_content .box .item .content{ padding:30px}
#pro_content .box .item .content table{margin:15px auto 15px;width:100%;border-collapse:collapse;border-color:#ddd;border-width:1px;}
#pro_content .box .item .content table tr{padding:2px 4px;border-color:#ddd;border-style:solid;border-width:1px;}
#pro_content .box .item .content table tr:first-child{height:30px;background:#f7f7f7;font-weight:700;line-height:30px;}
#pro_content .box .item .content table td{padding:5px 4px;border-color:#ddd;border-style:solid;border-width:1px;text-align:center;font-size:14px;}
#pro_content .box .item .content table td p{margin:0;padding:0;}

#xgcp{ width:100%; padding:50px 0}
#xgcp .container{padding:0 100px;width:100%;position:relative;z-index:99}
#xgcp .container .swiper-button-prev1{position:absolute;left:0px;top:50%;margin-top:-10px;;z-index:99;width:50px;height:50px;text-align:center;line-height:50px;border-radius:50px;background:#005dc1;color:#fff;overflow:hidden}
#xgcp .container .swiper-button-next1{position:absolute;right:0px;top:50%;margin-top:-10px;;z-index:99;width:50px;height:50px;text-align:center;line-height:50px;border-radius:50px;background:#005dc1;color:#fff;overflow:hidden}
#xgcp .container .swiper-container{margin-top:50px}
#xgcp .container .swiper-container .swiper-slide .img img{width:100%;}
#xgcp .container .swiper-container .swiper-slide p{text-align:center;margin-top:20px;font-size:12px; line-height:1.6}

#soulist{ width:100%; padding:50px 0}
#soulist .list{ margin-top:50px}
#soulist .list ul{display: flex;justify-content:flex-start ;align-items:flex-start; flex-wrap:wrap;gap:30px}
#soulist .list ul li{ width:calc((100% - 90px) / 4); position:relative}
#soulist .list ul li .img{ position:relative; overflow:hidden}
#soulist .list ul li .img img{ width:100%}
#soulist .list ul li p{ line-height:1.6; position:absolute; left:0; bottom:0; width:100%; color:#fff; background:rgba(83,87,188,.5); padding:10px;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#soulist .list ul li:hover p{ background:#c2282d; color:#fff}

#sou_view{ width:100%; padding:50px 0}
#sou_view .view .title{ text-align:center; font-size:30px; font-weight:700; padding:20px 0}
#sou_view .view .content{ border-top:1px solid #eee; margin-top:30px; padding-top:30px; line-height:1.8;}
#sou_view .view .content p{ margin-bottom:10px}
#sou_view .view .content img{ max-width:800px}

#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:#2c3090;border:1px solid #2c3090}
#fenye a:hover{background:#2c3090;color:#fff;border:1px solid #2c3090}
#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}	
	#nbanner{ margin-top:1rem}
	
	#pro_text{ width:100%; padding:.3rem .2rem}
	#pro_text .item{ margin-top:.3rem}
	#pro_text .item:frist-child{ margin-top:0}
	#pro_text .item .stitle{ font-size:.26rem; line-height:1.4}
	#pro_text .item .stitle.c{ text-align:center}
	#pro_text .item .content{ margin-top:10px; font-size:.22rem;; line-height:1.4}	
	
	#pro_list{ padding:.5rem .2rem}
	#pro_list .list{ margin-top:.3rem}
	#pro_list .list ul{gap:.2rem}
	#pro_list .list ul li{ width:calc((100% - .2rem) / 2);}
	#pro_list .list ul li .img .active i{ width:1rem; height:1rem; border-radius:1rem;  font-size:.3rem;}
	#pro_list .list ul li .title{margin-top:.2rem; font-size:.22rem}

	#pro_apply{padding:.5rem .2rem}
	#pro_apply .list{ margin-top:.3rem;flex-direction:row-reverse;flex-wrap:wrap-reverse}
	#pro_apply .list .left{ width:100%; margin-top:.3rem}
	#pro_apply .list .left .text{line-height:1.6; font-size:.22rem}
	#pro_apply .list .left .olist{ margin-top:.2rem;}
	#pro_apply .list .left .olist .item{ font-size:.22rem}
	#pro_apply .list .left .olist .item i{ margin-right:.1rem}
	#pro_apply .list .right{ width:100%}
	#pro_apply .list .right img{ width:100%}
	
	#pro_vs{padding:.5rem .2rem}
	#pro_vs .list{ margin-top:.3rem; display: block}
	#pro_vs .itembox{ width:100%; margin-top:.5rem}
	#pro_vs .itembox:first-child{ margin-top:0}
	#pro_vs .itembox .title{ text-align:center; font-size:.24rem; margin-top:.2rem}
	#pro_vs .itembox .text{ margin-top:.2rem; font-size:.22rem}
	#pro_vs .itembox .text .item{ margin-top:.3rem}
	#pro_vs .center{ display:none}
	
	#pro_acc{padding:.5rem .2rem}
	#pro_acc .list{ margin-top:.3rem;}
	#pro_acc .list ul{display:block}
	#pro_acc .list ul li{width:100%; margin-top:.3rem}
	#pro_acc .list ul li:first-child{ margin-top:0}
	#pro_acc .list ul li .img img{ width:100%}
	#pro_acc .list ul li .info{ padding:.2rem}
	#pro_acc .list ul li .info h2{ font-size:.24rem;}
	#pro_acc .list ul li .info p{ margin-top:.1rem; font-size:.22rem}
	
	#pro_que{padding:.5rem .2rem}
	#pro_que .list{ margin-top:.3rem;}
	#pro_que .list ul{display:block}
	#pro_que .list ul li{ width:100%; border-bottom:1px solid #eee; padding:.3rem 0}
	#pro_que .list ul li .title{ font-size:.24rem; font-weight:700}
	#pro_que .list ul li .info{ line-height:1.6; margin-top:.2rem; font-size:.22rem}
	
	#about_text{padding:.5rem .2rem}
	#about_text .list{ margin-top:.3rem;display: block;}
	#about_text .list .text{ width:100%}
	#about_text .list .text .t1{font-size:.26rem}
	#about_text .list .text .t2{ margin-top:.22rem}
	#about_text .list .img{ width:100%; margin-top:.3rem}
	
	#about_count{padding:.5rem .2rem }
	#about_count .wrap{display: block;}
	#about_count .item{ width:100%; padding:.3rem 0}
	#about_count .item .icon i{ font-size:.5rem; }
	#about_count .item big{ font-size:.5rem; padding:0}
	#about_count .item small{ font-size:.3rem; }
	
	#about_adv{padding:.5rem .2rem}
	#about_adv .list{ margin-top:.3rem;}
	#about_adv .list ul{display: block}
	#about_adv .list ul li{ width:100%; padding:.2rem; margin-top:.3rem}
	#about_adv .list ul li:fist-child{ margin-top:0}
	#about_adv .list ul li .title{ font-size:.26rem;}
	#about_adv .list ul li .info{margin-top:.1rem; font-size:.22rem}
	
	#contact{ width:100%; padding:.5rem .2rem}
	#contact .list{ margin-top:.8rem;display: block;}
	#contact .list .item{ width:100%; margin-top:.2rem}
	#contact .list .item .icon{  top:-.5rem; margin-left:-.5rem; width:1rem; height:1rem; border-radius:.5rem;}
	#contact .list .item .icon{font-size:.4rem }
	#contact .list .item .info{ margin-top:.5rem; padding:.5rem .3rem; font-size:.24rem}

	#formbox{ padding:.5rem .2rem}
	#formbox .wrap{ display: block;}
	#formbox .img{ width:100%}
	#formbox .img img{ width:100%}
	#formbox .right{ width:100%; margin-top:.5rem}
	#formbox .right .stitle{ font-size:.3rem; line-height:1.6}
	#formbox .right .form{ margin-top:.3rem}
	#formbox .right .form .item{ margin-top:.1rem}
	#formbox .right .form .item .t font{ margin-right:.05rem}
	#formbox .right .form .item .input .text{  line-height:.6rem; font-size:.22rem}
	#formbox .right .form .item .input .select{line-height:.6rem;height:.6rem;font-size:.22rem; background:#fff; width:100%}
	#formbox .right .form .item .input .textarea{height:2rem;font-size:.22rem}
	#formbox .right .form .button{ margin-top:.1rem}
	#formbox .right .form .button .btn{ line-height:.7rem; padding:0 0; border:0; width:100%; font-size:.24rem}
	
	#pro_view{padding:.5rem .2rem}
	#pro_view .wrap{display: block;}
	#pro_view .focus{ width:100%; overflow:hidden}
	#pro_view .right{ width:100%}
	#pro_view .right h1{ font-size:.3rem; line-height:1.3; margin-top:.2rem}
	#pro_view .right .info{ margin-top:.2rem; line-height:1.6; }
	#pro_view .right .pdf{margin-top:.2rem;}
	#pro_view .right .pdf a{ padding:.2rem .8rem}
	#pro_content{ padding:0 .2rem}
	#pro_content .box .item .title{padding:.1rem .2rem;font-size:.26rem;}
	#pro_content .box .item .content{ padding:.3rem}
	#pro_content .box .item .content img{ max-width:100%}
	
	#xgcp{padding:.5rem .2rem}
	#xgcp .container{padding:0;width:100%;position:relative;z-index:99}
	#xgcp .container .swiper-button-prev1{margin-top:-.1rem;width:.5rem;height:.5rem;line-height:.5rem;border-radius:.5rem;}
	#xgcp .container .swiper-button-next1{margin-top:-.1rem;width:.5rem;height:.5rem;line-height:.5rem;border-radius:.5rem;}
	#xgcp .container .swiper-container{margin-top:.5rem}
	#xgcp .container .swiper-container .swiper-slide .img img{width:100%;}
	#xgcp .container .swiper-container .swiper-slide p{margin-top:.2rem;font-size:.22rem;}
	
	#soulist{padding:.5rem .2rem}
	#soulist .list{ margin-top:.5rem}
	#soulist .list ul{gap:.2rem}
	#soulist .list ul li{ width:calc((100% - .2rem) / 2);}
	#soulist .list ul li p{ padding:.2rem; font-size:.22rem}
	
	#sou_view{padding:.5rem .2rem}
	#sou_view .view .title{font-size:.4rem; padding:.3rem 0}
	#sou_view .view .content{ margin-top:.3rem; padding-top:.3rem; line-height:1.6;}
	#sou_view .view .content p{ margin-bottom:.1rem}
	#sou_view .view .content img{ max-width:100%}

	#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}
}