/*************************************************************************/
/*全局样式开始*/
/*************************************************************************/
@charset "utf-8";
*{margin:0;padding:0;outline:0;}
body,html{overflow-x:hidden;color:#333;font:14px/30px "微软雅黑","Microsoft YaHei", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;background:url(../images/bg.jpg) #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:1920px;width:100%;padding:0 5%; }
.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{ width:100%; position:relative}
#header .logonav{width:100%;position:absolute;left:0;top:0;display:flex;justify-content:space-between;align-items:center;z-index:99;border-bottom:1px rgba(255,255,255,.2) solid; background:rgba(0,26,66,.8)}
#header .logonav .logo{padding-left:5%}
#header .logonav .logo img{ height:60px}
#header .logonav .logo img.blue{ display:none}
#header .logonav .right{display:flex;justify-content:space-between;align-items:center; padding-right:2%}
#header .logonav .right .nav ul{display:flex;justify-content:space-between;align-items:center;}
#header .logonav .right .nav ul li{position:relative;padding:0 20px}
#header .logonav .right .nav ul li h3{text-align:center}
#header .logonav .right .nav ul li h3 a{position:relative;color:#fff;font-size:15px;font-weight:normal;line-height:90px;display:block;}
#header .logonav .right .nav ul li h3 a::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:20%;height:2px;width:0;background-color:#FFF;transition:all 0.3s;}
#header .logonav .right .nav ul li h3 a i{display:none}
#header .logonav .right .nav ul li.active h3 a::after{width:100%;}
#header .logonav .right .nav ul li .sub{display:none;position:absolute;left:50%;margin-left:-80px;top:90px;background:#fff;padding:0 20px;width:160px;z-index:98;border-radius:10px;}
#header .logonav .right .nav ul li .sub::after{content:'';position:absolute;left:50%;top:-10px;width:0;height:0;border-left:10px transparent solid;border-right:10px transparent solid;border-bottom:10px #FFF solid;transform:translateX(-50%);}
#header .logonav .right .nav ul li .sub p{border-bottom:1px solid #eee;padding:4px 0;text-align:center}
#header .logonav .right .nav ul li .sub p:first-child{margin-top:10px}
#header .logonav .right .nav ul li .sub p:last-child{margin-bottom:10px}
#header .logonav .right .nav ul li .sub p:hover{color:#01459a;font-weight:700}
#header .logonav .right .nav ul li:hover h3 a::after{width:100%;}
#header .logonav .right .tel{border-left:1px solid #01459a;background:#01459a;height:90px;padding:0 30px;color:#fff;margin-left:50px;display:flex;align-items:center;}
#header .logonav .right .tel .txt{font-size:15px}
#header .logonav .right .tel .txt i{ margin-right:5px}
#header .logonav .right .tel p{font-size:24px;font-family:"din"}
#header .logonav .mnav{display:none}

#header .focus{position:relative}
#header .focus .swiper-slide{ text-align:center; height:800px}
#header .focus .swiper-slide.n{ text-align:center; height:500px}
#header .focus .swiper-slide img{width:100%;height:100%;object-fit:cover}
#header .focus .swiper-slide .video{width:100%;height:100%;object-fit:cover}

#service{ width:100%; padding:80px 0;}
#service .list{ margin-top:0px}
#service .list ul{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;}
#service .list ul li{ width:calc((100% - 60px) / 3); position:relative; border-radius:6px; overflow:hidden;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#service .list ul li .img{ height:350px; overflow:hidden}
#service .list ul li .img img{width:100%;height:100%;object-fit:cover}
#service .list ul li .info{ position: absolute; left:0; top:0; width:100%; height:100%;}
#service .list ul li .info{display:flex;align-items:center; padding:20px}
#service .list ul li .info h2{ font-size:26px; color:#fff; font-weight:normal}
#service .list ul li .info p{color:#fff; margin-top:10px}
#service .list ul li:hover{-webkit-transform:translatey(-10px);-ms-transform:translatey(-10px);-o-transform:translatey(-10px);transform:translatey(-10px);}


.htitle{border-bottom:1px solid #eee ;display: flex;justify-content:space-between ;align-items:flex-end; padding-bottom:15px}
.htitle .title{ display: flex;justify-content:flex-start ;align-items:flex-end;}
.htitle .title h2{ font-size:30px;font-weight:700; line-height:30px}
.htitle .title p{ font-family:"din"; margin-left:10px; font-size:18px; line-height:18px}
.htitle .more{line-height:14px}
.htitle .more i{ margin-left:10px}
.htitle.w{border-bottom:1px solid rgba(255,255,255,.4)}
.htitle.w .title h2{color:#fff;}
.htitle.w .title p{ color:#fff}
.htitle.w .more a{ color:#fff;}


#about{ width:100%; padding:80px 0; background:url(../images/bg_about.jpg) no-repeat center center; background-size:cover}
#about .list{ margin-top:30px;display: flex;justify-content:space-between ;align-items:flex-start}
#about .list .left{ width:55%}
#about .list .left .content{line-height:2; color:#fff; font-size:15px}
#about .list .left .num{ margin-top:100px;;display: flex;justify-content:space-between ;align-items:center}
#about .list .left .num .item{ padding:0 30px; color:#fff; border-left:1px solid rgba(255,255,255,.5); margin-right:5%}
#about .list .left .num .item span{ font-size:50px; line-height:50px; font-family:"din";display: flex;align-items:flex-start;}
#about .list .left .num .item span i{ font-size:16px; line-height:16px; margin-left:10px; margin-top:5px}
#about .list .left .num .item p{ font-size:16px; margin-top:20px; line-height:16px}
#about .list .right{ width:40% ;height:100%; position:relative; padding-left:8px}
#about .list .right img{width:100%;height:100%;object-fit:cover}
#about .list .right:after {position: absolute;left: 0;    bottom: 0;    width: 8px;    height: 160px;    background: #ff9326;    content: "";}

#case{ width:100%; padding:80px 0;}
#case .list{ margin-top:30px}
#case .list ul{ display: flex;justify-content:space-between ;align-items:flex-start;gap:30px;flex-wrap:wrap;}
#case .list ul li{ width:calc((100% - 60px) / 3); position:relative; overflow:hidden;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s; border-radius:6px}
#case .list ul li .img{ height:300px; position:relative}
#case .list ul li .img img{width:100%;height:100%;object-fit:cover}
#case .list ul li .img .info{ position:absolute; left:0; top:100%; width:100%; height:100%;  color:#fff; padding:20px; line-height:24px;display: flex;align-items:center}
#case .list ul li .title{background:#01459a; padding:20px; position:relative; z-index:10}
#case .list ul li .title h2{ color:#fff; line-height:24px; font-size:16px; font-weight:normal;}
#case .list ul li .title h2{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical}
#case .list ul li .title p{ opacity:.9; color:#fff}
#case .list ul li:hover{-webkit-transform:translatey(-10px);-ms-transform:translatey(-10px);-o-transform:translatey(-10px);transform:translatey(-10px);}
#case .list ul li:hover .info{top:0;}

#pic img{ width:100%}
#news{ width:100%; padding:80px 0;}
#news .list{ margin-top:30px}
#news .list ul{display: flex;justify-content:space-between ;align-items:flex-start;gap:30px;flex-wrap:wrap;}
#news .list ul li{ width:calc((100% - 60px) / 3); border-bottom:1px solid #eee; padding-bottom:30px; padding:40px 20px; background:#fff; position:relative; overflow:hidden}
#news .list ul li{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#news .list ul li .text{ position:relative; z-index:11}
#news .list ul li .text time{ color:#888}
#news .list ul li .text h2{ line-height:26px; font-size:18px; margin-top:10px;}
#news .list ul li .text h2{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical}
#news .list ul li .text p{ line-height:26px; color:#888; margin-top:15px}
#news .list ul li .text p{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical}
#news .list ul li .text .more{ margin-top:10px; color:#01459a}
#news .list ul li .img{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:10; opacity:0}
#news .list ul li .img img{width:100%;height:100%;object-fit:cover}
#news .list ul li:hover{ background:#01459a; }
#news .list ul li:hover .text h2,
#news .list ul li:hover .text time,
#news .list ul li:hover .text p,
#news .list ul li:hover .text .more{ color:#fff}
#news .list ul li:hover .img{ opacity:.8}

#map{ width:100%; padding:80px 0; background: url(../images/bg_footer.jpg) no-repeat center center; background-size:cover; border-bottom:1px solid rgba(255,255,255,.1)}
#map .wrap{display: flex;justify-content:space-between ;align-items:flex-start;gap:30px;flex-wrap:wrap;}
#map .left{ width:250px}
#map .left .tel{ font-size:20px; font-family:"din"; color:#fff; margin-top:20px}
#map .left .qrcode{ margin-top:40px;display: flex;justify-content:flex-start}
#map .left .qrcode .item{ text-align:center; margin-right:10px}
#map .left .qrcode .item img{ width:100px}
#map .left .qrcode .item p{ text-align:center; color:#fff}
#map .right{display: flex;justify-content:flex-end ;align-items:flex-start;gap:100px;flex-wrap:wrap}
#map .right .item h3{ color:#fff; font-size:18px; margin-bottom:20px}
#map .right .item p{line-height:26px}
#map .right .item p a{ color:#fff;}

#footer{ text-align:center; padding:20px 0; background:#01459a}
#footer i{ margin:0 10px}
#footer p{ color:#fff}
#footer p a{ color:#fff}

@media (max-width:1400px){
	.wrap{ padding:0 20px}
	#header .logonav .right .nav ul li{padding:0 10px}
	#header .logonav .right .tel{padding:0 20px}
	#service .list ul li .img{ height:300px;}
	#case .list ul li .img{ height:280px;}
}
@media (max-width:1300px){
	#map .right{gap:40px;}
}
@media (max-width:1200px){
	#header .logonav .right .nav ul li{padding:0 10px}
	#header .logonav .right .tel{ display:none}
	#service .list ul li .img{ height:280px;}
	#case .list ul li .img{ height:260px;}
}
@media (max-width:900px){
	.wrap{ padding:0px}
	body,html{font-size:.23rem;line-height:.34rem}
	#header .logonav{padding:0 .25rem;height:1rem;}
	#header .logonav .logo{padding-left:0}
	#header .logonav .logo img{height:.6rem}
	#header .logonav .right{justify-content:flex-end; overflow:hidden}
	#header .logonav .right .searchbtn{ display: block; margin-right:20px; color:#0a5a90}
	#header .logonav .right .mnav{position:relative;display:block;width:.34rem;height:.33rem;cursor:pointer;margin-left:.1rem}
	#header .logonav .right .mnav span{position:absolute;display:block;width:.34rem;height:.05rem;background:#fff;transition:all .5s;border-radius:.05rem}
	#header .logonav .right .mnav .s1{top:.05rem;}
	#header .logonav .right .mnav .s2{top:.15rem;width:.26rem;}
	#header .logonav .right .mnav .s3{top:.25rem;}
	#header .logonav .right .mnav.isopen .s1{top:.15rem;transform:rotate(45deg);}
	#header .logonav .right .mnav.isopen .s2{width:0;opacity:0;}
	#header .logonav .right .mnav.isopen .s3{top:.15rem;transform:rotate(-45deg);}
	#header .logonav .right .search{ display:none}
	#header .logonav .right .tel{ display:none}
	
	#header .logonav .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;}
	#header .logonav .right .nav ul{display:block}
	#header .logonav .right .nav ul li{ width:100%;}
	#header .logonav .right .nav ul li h3{line-height:.7rem;height:.7rem;border-bottom:1px solid #eee; text-align:left}
	#header .logonav .right .nav ul li h3 a{line-height:.7rem;font-size:.24rem;padding:0; display:block; color:#333;display: flex;justify-content:space-between ;align-items:center;}
	#header .logonav .right .nav ul li h3 a i{ display: block; color:#888; font-size:.28rem}
	#header .logonav .right .nav ul li .sub{display:none;position:inherit;left:0;width:auto;margin-left:0;top:0;background:#fff;border-radius:0;box-shadow:0 0 0}
	#header .logonav .right .nav ul li .sub p{padding:0; text-align:left; border-bottom:0}
	#header .logonav .right .nav ul li .sub a{color:#68747f;border-bottom:1px solid #eee;line-height:.7rem;font-size:.24rem;padding:0; display:block}
	#header .logonav .right .nav ul li .sub a:hover{background:#fff;color:#68747f;font-weight:700}
	#header .logonav .right .nav ul li.demo{margin-top:.2rem}
	#header .logonav .right .nav ul li.currclass{ background:#fff}
	#header .logonav .right .nav ul li:hover{ background:#fff}
	#header .logonav .right .nav.isopen{transform:translatex(0);}
	
	#header .focus .swiper-slide{ text-align:center; height:5rem}
	#header .focus .swiper-slide.n{ text-align:center; height:5rem}
	
	#service{padding:.5rem .25rem}
	#service .list ul{display:flex;justify-content:space-between;align-items:center;gap:.3rem 0;flex-wrap:wrap;}
	#service .list ul li{ width:100%}
	#service .list ul li .img{ height:3rem;}
	#service .list ul li .info{display:flex;align-items:center; padding:.3rem}
	#service .list ul li .info h2{ font-size:.4rem;}
	#service .list ul li .info p{ margin-top:.2rem}
	
	.htitle{padding-bottom:.2rem}
	.htitle .title{ display: block}
	.htitle .title h2{ font-size:.34rem; line-height:.5rem}
	.htitle .title p{ margin-left:0; font-size:.22rem;; line-height:.3rem}
	.htitle .more{line-height:.22rem; line-height:.3rem}
	.htitle .more i{ margin-left:.1rem}
	
	#about{padding:.8rem .25rem; }
	#about .list{ margin-top:.4rem;display: block}
	#about .list .left{ width:100%}
	#about .list .left .content{line-height:1.6; font-size:.23rem}
	#about .list .left .num{ margin-top:.5rem;gap:.3rem 0;flex-wrap:wrap;}
	#about .list .left .num .item{ padding:0 .3rem;  margin-right:0; width:50%}
	#about .list .left .num .item span{ font-size:.5rem; line-height:.5rem; }
	#about .list .left .num .item span i{ font-size:.22rem; line-height:.22rem; margin-left:.1rem; margin-top:0}
	#about .list .left .num .item p{ font-size:.23rem; margin-top:.1rem; line-height:.3rem}
	#about .list .right{ width:100% ;height: auto; padding-left:0; margin-top:.5rem}
	#about .list .right:after { display:none}
	
	#case{padding:.5rem .25rem}
	#case .list{ margin-top:.3rem}
	#case .list ul{gap:.3rem;flex-wrap:wrap;}
	#case .list ul li{ width:100%;}
	#case .list ul li .img{ height:3rem;}
	#case .list ul li .img .info{padding:.25rem; line-height:.3rem;}
	#case .list ul li .title{ padding:.25rem; }
	#case .list ul li .title h2{ line-height:.3rem; font-size:.23rem; ;}
	#case .list ul li .title h2{-webkit-line-clamp:3;}
	
	#news{padding:.5rem .25rem}
	#news .list{ margin-top:.3rem}
	#news .list ul{display: flex;justify-content:space-between ;align-items:flex-start;gap:.3rem 0;flex-wrap:wrap;}
	#news .list ul li{ width:100%;padding:.2rem}
	#news .list ul li .text time{font-size:.2rem}
	#news .list ul li .text h2{ line-height:.34rem; font-size:.24rem; margin-top:.1rem;}
	#news .list ul li .text h2{-webkit-line-clamp:2;}
	#news .list ul li .text p{ line-height:.34rem; margin-top:.2rem; font-size:.22rem}
	#news .list ul li .text .more{ margin-top:.1rem; font-size:.2rem}
	
	#map{padding:.5rem .25rem;border-bottom:0}
	#map .wrap{display: block}
	#map .left{ width:100%; text-align:center}
	#map .left .logo img{ height:.5rem}
	#map .left .tel{ font-size:.3rem; margin-top:.2rem}
	#map .left .tel a{ color:#fff}
	#map .left .qrcode{ margin-top:.4rem;;justify-content:center}
	#map .left .qrcode .item{ margin-right:.2rem}
	#map .left .qrcode .item img{ width:1.5rem}
	#map .right{ display:none}
	#footer{  padding:.2rem .25rem; font-size:.2rem}
	#footer i{ margin:0 .1rem}
}



#main{ width:100%; padding:50px 0 100px;}
#main .wrap{display:flex;justify-content:space-between;align-items:flex-start;}
#main .left{ width:200px;  position:relative}
#main .left .leftbox{background:#fff; border-radius:6px; overflow:hidden; width:200px}
#main .left .leftbox.active{ position:fixed; left:5%; top:10px}
#main .left .leftbox h3{ padding:20px; background:#01459a; color:#fff; font-size:18px; font-weight:700}
#main .left .leftbox ul{ padding:20px}
#main .left .leftbox ul li a{ border-bottom:1px solid #eee; padding:10px 0;display:flex;justify-content:space-between;align-items:center; font-size:16px}
#main .left .leftbox ul li a i{ color:#ccc; font-size:14px}
#main .right{ width:calc(100% - 250px)}
#main .right .htitle{border-bottom:1px solid #ddd; padding:20px 0 20px;display:flex;justify-content:space-between;align-items:center;}
#main .right .htitle h2{ font-size:24px}
#main .right .htitle i{ font-size:18px; margin-right:10px; font-weight:normal}
#main .right .htitle span{ color:#999}
#main .right .htitle span a{ color:#999}
#main .right .htitle span i{ margin:0 10px}
#main .right .content .ctitle{ text-align:center; border-bottom:1px solid #ddd; padding:20px 0 20px;}
#main .right .content .ctitle h1{ font-size:28px; text-align:center; font-weight:700}
#main .right .content .ctitle .info{ color:#999; margin-top:20px}
#main .right .content .ctitle .info span{ margin:0 10px}
#main .right .content .mycontent{ margin-top:30px; line-height:1.9; font-size:16px;min-height:500px;}
#main .right .content .mycontent img{ max-width:800px;}
#main .right .content .mycontent video{ max-width:800px}
#main .right .content .pagecontent{ margin-top:30px; line-height:1.9; font-size:16px}
#main .right .content .pagecontent img{ max-width:100%;}
#main .right .content .pagecontent video{ max-width:800px}
#main .right .content .updown{ border-top:1px solid #ddd; margin-top:30px; padding-top:20px}
#main .right .content .updown p a{ color:#01459a}

#main .right .service{ margin-top:30px}
#main .right .service ul{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;}
#main .right .service ul li{ width:calc((100% - 60px) / 3); position:relative; border-radius:6px; overflow:hidden;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#main .right .service ul li .img{ height:350px; overflow:hidden}
#main .right .service ul li .img img{width:100%;height:100%;object-fit:cover}
#main .right .service ul li .info{ position: absolute; left:0; top:0; width:100%; height:100%;background-image: linear-gradient(to right,rgba(1,69,154,.8),rgba(255,255,255,0))}
#main .right .service ul li .info{display:flex;align-items:center; padding:20px}
#main .right .service ul li .info h2{ font-size:26px; color:#fff; font-weight:normal}
#main .right .service ul li .info p{color:#fff; margin-top:10px}
#main .right .service ul li:hover{-webkit-transform:translatey(-10px);-ms-transform:translatey(-10px);-o-transform:translatey(-10px);transform:translatey(-10px);}
#main .right .service ul li:hover .info{background-image: linear-gradient(to right,rgba(1,69,154,1),rgba(255,255,255,.5))}

#main .right .contact .text{ margin-top:30px; line-height:1.9; font-size:18px;}
#main .right .contact .map{ margin-top:30px}
#main .right .contact .map iframe{ height:500px}

#main .right .honor{ margin-top:30px}
#main .right .honor ul{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;}
#main .right .honor ul li{ width:calc((100% - 90px) / 4); position:relative; overflow:hidden;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#main .right .honor ul li .img{ height:350px; overflow:hidden; border:1px solid #eee; background:#fff; padding:20px}
#main .right .honor ul li .img img{width:100%;height:100%;object-fit:contain}
#main .right .honor ul li p{ margin-top:10px; text-align:center; font-size:16px;}
#main .right .honor ul li:hover{-webkit-transform:translatey(-10px);-ms-transform:translatey(-10px);-o-transform:translatey(-10px);transform:translatey(-10px);}
#main .right .honor ul li:hover .info{background-image: linear-gradient(to right,rgba(1,69,154,1),rgba(255,255,255,.5))}

#main .right .video{ margin-top:30px}
#main .right .video ul{display:flex;justify-content:flex-start;align-items:center;gap:30px;flex-wrap:wrap;}
#main .right .video ul li{ width:calc((100% - 60px) / 3);border-radius:6px; position:relative;overflow:hidden;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#main .right .video ul li .img{ height:320px; overflow:hidden}
#main .right .video ul li .img img{width:100%;height:100%;object-fit:cover}
#main .right .video ul li p{text-align:center; font-size:16px;background:#01459a; color:#fff; padding:10px 0}
#main .right .video ul li:hover{-webkit-transform:translatey(-10px);-ms-transform:translatey(-10px);-o-transform:translatey(-10px);transform:translatey(-10px);}
#main .right .video ul li:hover .info{background-image: linear-gradient(to right,rgba(1,69,154,1),rgba(255,255,255,.5))}

#main .right .product{ margin-top:30px}
#main .right .product ul{display:flex;justify-content:flex-start;align-items:center;gap:30px;flex-wrap:wrap;}
#main .right .product ul li{ width:calc((100% - 90px) / 4);border-radius:6px; position:relative;overflow:hidden;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#main .right .product ul li .img{ height:320px; overflow:hidden}
#main .right .product ul li .img img{width:100%;height:100%;object-fit:cover}
#main .right .product ul li p{text-align:center; font-size:16px;background:#01459a; color:#fff; padding:10px 0}
#main .right .product ul li:hover{-webkit-transform:translatey(-10px);-ms-transform:translatey(-10px);-o-transform:translatey(-10px);transform:translatey(-10px);}
#main .right .product ul li:hover .info{background-image: linear-gradient(to right,rgba(1,69,154,1),rgba(255,255,255,.5))}


#main .right .case{ margin-top:30px}
#main .right .case ul{ display: flex;justify-content:space-between ;align-items:flex-start;gap:30px;flex-wrap:wrap;}
#main .right .case ul li{ width:calc((100% - 60px) / 3); position:relative; overflow:hidden;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s; border-radius:6px}
#main .right .case ul li .img{ height:300px; position:relative}
#main .right .case ul li .img img{width:100%;height:100%;object-fit:cover}
#main .right .case ul li .img .info{ position:absolute; left:0; top:100%; width:100%; height:100%; background:rgba(0,0,0,.5); color:#fff; padding:20px; line-height:24px;display: flex;align-items:center}
#main .right .case ul li .title{background:#01459a; padding:20px; position:relative; z-index:10}
#main .right .case ul li .title h2{ color:#fff; line-height:24px; font-size:16px; font-weight:normal;}
#main .right .case ul li .title h2{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical}
#main .right .case ul li .title p{ opacity:.9; color:#fff}
#main .right .case ul li:hover{-webkit-transform:translatey(-10px);-ms-transform:translatey(-10px);-o-transform:translatey(-10px);transform:translatey(-10px);}
#main .right .case ul li:hover .info{top:0;}


#main .right .news{ margin-top:30px}
#main .right .news ul{display: flex;justify-content:space-between ;align-items:flex-start;gap:30px;flex-wrap:wrap;}
#main .right .news ul li{ width:calc((100% - 60px) / 3); border-bottom:1px solid #eee; padding-bottom:30px; padding:40px 20px; background:#fff; position:relative; overflow:hidden}
#main .right .news ul li{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#main .right .news ul li .text{ position:relative; z-index:200}
#main .right .news ul li .text time{ color:#888}
#main .right .news ul li .text h2{ line-height:26px; font-size:18px; margin-top:10px;}
#main .right .news ul li .text h2{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical}
#main .right .news ul li .text p{ line-height:26px; color:#888; margin-top:15px}
#main .right .news ul li .text p{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical}
#main .right .news ul li .text .more{ margin-top:10px; color:#01459a}
#main .right .news ul li .img{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:10; opacity:0}
#main .right .news ul li .img img{width:100%;height:100%;object-fit:cover}
#main .right .news ul li:hover{ background:#01459a; }
#main .right .news ul li:hover h2,
#main .right .news ul li:hover time,
#main .right .news ul li:hover p,
#main .right .news ul li:hover .more{ color:#fff}
#main .right .news ul li:hover .img{ opacity:.8}

#fenye{padding:80px 0 0px;text-align:center;clear:both;display: flex;justify-content:center ;align-items:center;}
#fenye a{margin:0 2px;color:#5a5a5a;text-decoration:none;padding:5px 10px;border:1px solid #eee; background:#FFF;}
#fenye .prev,#fenye .next{text-align:center}
#fenye a.curr{font-weight:700;color:#fff;background:#01459a;border:1px solid #01459a}
#fenye a:hover{background:#01459a;color:#fff;border:1px solid #01459a}
#fenye span{margin:0 2px;color:#5a5a5a;text-decoration:none;padding:5px 10px;border:1px solid #eee;background:#FFF}

@media (max-width:900px){
	body,html{font-size:.23rem;line-height:.34rem}

	#fenye{padding:.5rem 0 0px;}
	#fenye a{margin:0 .02rem;padding:.1rem .15rem}
	#fenye span{margin:0 .02rem;padding:.1rem .15rem}
	#fenye .num,#fenye .prev{display:none}
	
	#main{ width:100%; padding:.5rem .2rem 1rem;}
	#main .wrap{display: block;}
	#main .left{ width:100%;  position:relative}
	#main .left .leftbox{background:#fff; border-radius:6px; overflow:hidden; width:100%}
	#main .left .leftbox.active{ position: inherit; left:0; top:0;}
	#main .left .leftbox h3{ padding:.2rem; font-size:.3rem;}
	#main .left .leftbox ul{ padding:.2rem}
	#main .left .leftbox ul li{ border-bottom:1px solid #eee; padding:.1rem 0}
	#main .left .leftbox ul li a{ font-size:.24rem}
	#main .right{ width:100%; margin-top:.5rem}
	#main .right .htitle{ border-bottom:1px solid #ddd; padding:0 0 .2rem;display: block;}
	#main .right .htitle h2{ font-size:.3rem}
	#main .right .htitle span{ display:none}
	#main .right .service{ margin-top:.3rem}
	#main .right .service ul{display:flex;justify-content:space-between;align-items:center;gap:.3rem 0;flex-wrap:wrap;}
	#main .right .service ul li{ width:100%}
	#main .right .service ul li .img{ height:3rem;}
	#main .right .service ul li .info{display:flex;align-items:center; padding:.3rem}
	#main .right .service ul li .info h2{ font-size:.4rem;}
	#main .right .service ul li .info p{ margin-top:.2rem}

	#main .right .content .ctitle{ padding:0 0 .2rem;}
	#main .right .content .ctitle h1{ font-size:.3rem;}
	#main .right .content .mycontent{ margin-top:.3rem; line-height:1.8; font-size:.26rem;}
	#main .right .content .mycontent img{ max-width:100%; width:100%}
	#main .right .content .pagecontent{ margin-top:.3rem; line-height:1.8; font-size:.26rem;}
	#main .right .content .pagecontent img{ max-width:100%; width:100%}
	
	#main .right .contact .text{ margin-top:.3rem; line-height:1.8; font-size:.26rem;}
	#main .right .contact .map{ margin-top:.3rem}
	#main .right .contact .map iframe{ height:4rem}
	
	#main .right .honor{ margin-top:.3rem}
	#main .right .honor ul{gap:.2rem .2rem;}
	#main .right .honor ul li{width:calc((100% - .2rem) / 2);}
	#main .right .honor ul li .img{ height:3rem;}
	#main .right .honor ul li p{ margin-top:.2rem; font-size:.24rem; line-height:.4rem; height:.8rem}
	
	#main .right .video{ margin-top:.3rem}
	#main .right .video ul{gap:.2rem 0;}
	#main .right .video ul li{width:100%;}
	#main .right .video ul li .img{ height:3rem;}
	#main .right .video ul li p{ padding:.1rem ;font-size:.24rem;}
	
	#main .right .product{ margin-top:.3rem}
	#main .right .product ul{gap:.2rem 0;}
	#main .right .product ul li{width:100%;}
	#main .right .product ul li .img{ height:3rem;}
	#main .right .product ul li p{ padding:.1rem ;font-size:.24rem;}
	
	#main .right .case{ margin-top:.3rem}
	#main .right .case ul{gap:.3rem;flex-wrap:wrap;}
	#main .right .case ul li{ width:100%;}
	#main .right .case ul li .img{ height:3rem;}
	#main .right .case ul li .img .info{padding:.25rem; line-height:.3rem;}
	#main .right .case ul li .title{ padding:.25rem; }
	#main .right .case ul li .title h2{ line-height:.3rem; font-size:.23rem; ;}
	#main .right .case ul li .title h2{-webkit-line-clamp:3;}
	
	#main .right .news{ margin-top:.3rem}
	#main .right .news ul{display: flex;justify-content:space-between ;align-items:flex-start;gap:.3rem 0;flex-wrap:wrap;}
	#main .right .news ul li{ width:100%;padding:.2rem}
	#main .right .news ul li .text{ position:relative; z-index:101}
	#main .right .news ul li .text time{font-size:.2rem}
	#main .right .news ul li .text h2{ line-height:.34rem; font-size:.24rem; margin-top:.1rem;}
	#main .right .news ul li .text h2{-webkit-line-clamp:2;}
	#main .right .news ul li .text p{ line-height:.34rem; margin-top:.2rem; font-size:.22rem}
	#main .right .news ul li .text .more{ margin-top:.1rem; font-size:.2rem}
	#main .right .news ul li .img{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:10; opacity:0}
	#main .right .news ul li .img img{width:100%;height:100%;object-fit:cover}
	#main .right .news ul li:hover{ background:#01459a; }
	#main .right .news ul li:hover .text h2,
	#main .right .news ul li:hover .text time,
	#main .right .news ul li:hover .text p,
	#main .right .news ul li:hover .text .more{ color:#fff}
	#main .right .news ul li:hover .img{ opacity:.8}
	#main .right .news ul li:hover .text{ color:#fff}
}