@charset "utf-8";
body, html { min-width: 1200px; overflow-x: hidden; }  
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }  
body, p, h1, h2, h3, h4, h5, table, ul, li, form, input { margin: 0; padding: 0; color: #000; font-family: '微软雅黑'; line-height: 1; }  
body, p { font-size: 14px; border: none; color: #000; }  
a { font-size: 14px; color: #000; text-decoration: none; border: none; padding: 0; margin: 0; }  
table { border-collapse: collapse; }  
img { border: 0; margin: 0; padding: 0; }  
ul, li { list-style: none; border: 0; margin: 0; padding: 0; } 
dl, dt, dd { margin: 0; padding: 0; -webkit-margin-start: 0; }  
h1, h2, h3, h4, h5 { font-weight: normal; font-size: 12px; display: block; }  
strong, b { font-weight: normal; }  
table, tr, td { border-spacing: 0; }  
em, i, b { font-style: normal; }  
p { line-height: 170%; color: #555; font-size: 14px; }  
input { border: none; background: none; }  
figcaption { display: block; }  
input:focus { outline: none; }  
::-webkit-input-placeholder { /* WebKit browsers */ font-size: 14px; color: #555; }  
::-ms-input-placeholder { /* Internet Explorer 10+ */ font-size: 14px; color: #555; }  
.fl { float: left; }  
.fr { float: right; }  
.clearfix { *zoom: 1; }  
.clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; }  
.clearfix:after { clear: both; } 




.header{ display: flex; align-items: center; padding: 0 50px; height: 90px; justify-content: space-between;}
.navbar{ display: flex; align-items: center; justify-content: space-between; flex: 1; padding: 0 125px;}
.navbar li a{ display: block; font-size: 16px; color: #333; position: relative; height: 90px; line-height: 90px;}
.navbar a::before{  position: absolute; bottom: 0; left: 0%; right: 50%; height: 2px; background: #003399; width: 100%; display: block; content: ''; transform: scale(0,1);
transition: all 0.6s;}
.navbar li:hover a::before,.navbar li.on a::before{ transform: scale(1);}
.header-info{ display: flex;  align-items: center; width: 280px; justify-content: space-between;}
.header-info h3 img{ display: inline-block; vertical-align: middle;  margin-right: 10px;}
.header-info h3{ font-size: 22px; color: #003399}
.code-div{ position: absolute; top: 80px; right: 200px; z-index: 33; display: none;}



/*搜索*/
.barwrap .zoom{ cursor: pointer; display: inline-block; vertical-align: middle; margin-left:60px;  cursor: pointer;}
.search-close{ position: fixed; top: 30px; right: 30px; cursor: pointer;}
.search-box{ background: #fff; position: fixed; top: 0px; left: 0; right: 0; background: rgba(0,0,0,0.8); z-index: 333;
 bottom: 0; height: 100%; transform-origin: bottom center;  -ms-transform-origin:bottom center ; -moz-transform-origin: bottom center;
 -webkit-transform-origin: bottom center;  transform: scaleY(0); -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); 
 transition: transform .3s .5s; }
.search-box .div{ width: 800px; margin: 0 auto; transition: all .5s .3s; filter:alpha(opacity=0); opacity: 0; transform: translate(0px,20px);
top: 300px; position: absolute; left: 50%; margin-left: -400px;}
.search-box .in{ background: #fff; height: 50px; width: 700px; padding-left: 20px; font-size: 16px;}
.search-box .sub{ background: #0661e6; height: 50px; width: 100px; font-size: 16px; color: #fff; cursor: pointer;}
.search-box p{ padding: 30px 0 0 0;}
.search-box p a{ display: inline-block; padding: 0 20px; font-size: 14px; color: #fff; opacity: 0.8; filter:alpha(opacity=80); transition: all 0.36s;}
.search-box p strong{ display: inline-block; font-size: 16px; color: #fff;}
.search-box p a:hover{ color: #d7a449;}
.search-box .div.on{ opacity: 1; -webkit-opacity: 1;  transform: translate(0,0); -webkit-transform: translate(0,0);   -ms-transform: translate(0,0); 
-moz-transform: translate(0,0); filter:alpha(opacity=100); }
.search-box.active{transform-origin: top center; transform: scaleY(1); transition: transform .3s;}


/*banner*/
.banner { width: 100%; height: 750px; background-color: rgb(179, 189, 196); transition: 1s background-color 1.3s; }  
.banner .swiper-wrapper { transition-delay: 1s; transition-timing-function: cubic-bezier(0.5, 0, 0, 1); }  
.banner .swiper-slide { text-align: center; font-size: 18px; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; 
 display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; 
 -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }  
.img-box { width: 100%; height: 100%; position: absolute; transform: scale(0.6, 0.6); transition-duration: 1s; transition-property: transform; 
 transition-timing-function: cubic-bezier(0.5, 0, 0, 1); opacity: 0.9; overflow: hidden; }  
.img-box img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2, 1.2) translateX(50%); transition-timing-function: cubic-bezier(0.5, 0, 0, 1); 
 transition-property: transform; }  
.button-prev, .button-next { transition: 0.5s; outline: none; position: absolute; width: 140px; z-index: 10; top: 50%; transform: translateY(-34px);
  cursor: pointer; }  .button-prev { left: 30px; }  
.button-next { right: 30px; }  
.button.disabled { opacity: 0.2; cursor: default; }  
#arrow-svg-home { transform: translateY(353px); } 
.button-next #arrow-svg-home { transform: translateY(353px) rotateY(180deg); transform-origin: 80px 0px 0px; }  svg { transition: 0.5s; }  
.cls-1 { transition: 0.5s; opacity: 0.4; transform-origin: -20px 40px; opacity: 1; }  
.cls-4 { transition: 0.5s; stroke-width: 2px; stroke: #fff; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.4; transform-origin: 0px 0px 0px; }  
#arrow-trg { transition: 0.5s; fill: #fff; transform: rotateY(180deg) translate(-53px, 39px); } 
#line { transition: 0.5s; stroke: #fff; transform: translate(50px, 42px); }  
.button-prev:not(.disabled):hover svg { transform: translateX(-25px); }  
.button-next:not(.disabled):hover svg { transform: translateX(25px); }  
.button:not(.disabled):hover .cls-1 { transform: scale(1.1); }  
.button:not(.disabled):hover .cls-4 { stroke-dasharray: 2px; stroke-dashoffset: 2px; opacity: 1; }  
.button:not(.disabled):hover #arrow-trg { transform: rotateY(180deg) translate(-37px, 39px); }  
.button:not(.disabled):hover #line { transform: translate(35px, 42px) scaleX(0.33); }

.title h3{ font-size: 60px; color: #000; opacity: 0.1; text-transform: uppercase; text-align: center; font-family: arial;}
.title h2{ font-size: 30px; color: #000; text-align: center; }

/*服务*/
.service{ padding: 50px 20px; background: #F5F5F5;}
.service-list{ display: flex; justify-content: space-between; margin-top: 35px;}
.service-list li{  width: 19%;  background: #fff;  transition: all 0.6s; position: relative;} 
.service-list li a{ display: block; padding: 20px;}
.service-list li figure img{ display: block; max-width: 100%;}
.service-list figcaption{ padding: 0 30px;}
.service-list h3{ color: #000; font-size: 24px; text-align: center; padding: 30px 0 20px 0;}
.service-list .index-p{ color: #666; font-size: 14px; line-height: 32px; text-align: center;}
.service-list .index-p p{ color: #666; font-size: 14px; line-height: 32px; text-align: center;}

.service-list li:hover{ box-shadow: 0 0 15px rgba(0,0,0,0.1); transform: translateY(10px);}

.more{ display: block; width: 200px; height: 55px; border:1px solid #003399; border-radius: 5px; text-align: center; color: #003399;
line-height: 55px; font-size: 16px; margin: 30px auto 0 auto; transition: all 0.6s; position: relative; z-index: 33; overflow: hidden;}
.more b{ transition: all 0.6s;}
.more:hover{ background: #003399;}
.more:hover b{ color: #fff; transition-delay: 0.36s;}



/*关于*/
.about{ display: flex; overflow: hidden;}
.about .left{ padding: 50px; width: 50%;  position: relative;}
.about .bg{ background: url(/image/lh_34.png) no-repeat; background-size: 100% 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1;}
.about .title h2,.about .title h3{ text-align: left;}
.about .title h2{ padding: 20px 0;}
.about .left p{ line-height: 36px; color: #333; margin-top: 30px; font-size: 15px; }
.about .left .index-ab{ line-height: 36px; color: #333; margin-top: 30px; font-size: 15px;text-indent:2em; }
.about .right{ width: 50%; position: relative; overflow: hidden;}
.about a{ display: block; width: 200px; height: 55px;   text-align: center; color: #fff; background: #003399;
line-height: 55px; font-size: 16px; margin: 50px 0; transition: all 0.6s; position: relative; z-index: 33; overflow: hidden;}
.about .right img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: all 0.6s; display: block; }
.about a:hover{ transform: translateX(10px);}


.culture{ display: flex; background: url(/image/culture.jpg) no-repeat top center; background-size: 100% 100%; padding: 50px 0; justify-content: space-around;}
.culture h3{ color: #fff; text-align: center; font-size: 30px;} 
.culture p{ color: #fff; text-align: center; font-size: 16px; padding: 40px 0;} 
.culture a{ display: block; width: 200px; height: 50px; border:1px solid #fff; border-radius: 45px; text-align: center; color: #fff;
line-height: 50px; font-size: 16px; text-transform: uppercase; margin: 0 auto; transition: all 0.6s;}
.culture a:hover{ background: #fff; color: #003399;}



/*表单*/
.contact{ display: flex; padding: 60px 100px; align-items: center; justify-content: space-around;}
.contact .title h2,.contact .title h3{ text-align: left;}
.contact .title h2{ padding-top: 20px; padding-bottom: 40px;}
.contact .left{padding-right: 50px; }
.contact .left p{ font-size: 20px; color: #666; line-height: 60px;}
.contact .left p img{ display: inline-block; vertical-align: middle; margin-right: 10px;}
.sheji-icon{ display: flex; padding: 20px 0;}
.sheji-icon a{ display: block; border:1px solid #003399; border-radius: 100%; width: 80px; height: 80px; display: flex;align-items: center; justify-content: center;
margin-right: 20px; transition: all 0.6s;}
.sheji-icon a:hover{ transform: translateY(10px);}
.contact .right{ border:20px solid  #003399; background: #fff; border-radius: 5px; padding:35px 40px 10px 40px; flex: 0.7;}
.contact .right h3{ color: #000; text-align: center; font-size: 34px; padding-bottom: 35px;}
.contact input{ display: block; border:1px solid #F5F5F5; height: 50px; line-height: 50px; width: 100%; margin: 0 0 30px 0; padding-left: 10px;}
.contact .div{ display: flex; justify-content: space-between;}
.contact .div input{ width: 49%;}
.contact .sub{ padding-left: 0; background: #003399; color: #fff; font-size: 16px;}

.copyright{ background: #003399; padding: 20px 0;margin-bottom: 86px;}
.copyright p{ text-align: center; font-size: 14px; color: #fff; line-height: 36px;}
.copyright div{ display: flex; justify-content: center;}
.copyright div img{ display: block; margin:0 10px;}


.copyright1{ background: #003399; padding: 20px 0;}
.copyright1 p{ text-align: center; font-size: 14px; color: #fff; line-height: 36px;}
.copyright1 div{ display: flex; justify-content: center;}
.copyright1 div img{ display: block; margin:0 10px;}


/*内页banner*/
.neibanner{ position: relative; overflow: hidden; width: 100%;}
.neibanner img{ display: block; width: 100%; height: auto; overflow: hidden;}
.banner-text{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.banner-text h3{ color: #fff; font-size: 28px; text-align: center; letter-spacing: 2px;}
.banner-text h5{ color: #fff; font-size: 16px; font-family:arial; opacity: 0.9; text-align: center; padding: 20px 0;}
.banner-text b{ display: block; margin: 0 auto; height: 2px; background: #fff; width: 40px; margin-top: 20px;}

/*面包屑导航*/
 .bread-crumb { padding: 0 100px; height:100px;line-height:100px; display: flex; display: -ms-flexbox; display: -webkit-flex; justify-content: space-between; align-items: center; 
 border-bottom: 1px solid #E0E0E0; position: relative; }  
.bread-crumb .left { display: flex; display: -ms-flexbox; display: -webkit-flex; justify-content: space-between; align-items: center; }  
.bread-crumb .left a, .bread-crumb .left em { display: inline-block; margin-right: 25px; font-size: 16px; }  
.bread-crumb .right ul { display: flex; display: -ms-flexbox; display: -webkit-flex; justify-content: space-between; align-items: center; }  
.bread-crumb .right ul li { margin-left: 50px; line-height: 100px; }  
.bread-crumb .right ul li a { display: inline-block; position: relative; font-size: 14px; }  
.bread-crumb li>a::before { display: block; content: ''; position: absolute; bottom: 0; height: 2px; background: #003399; left: 0; right: 0; transition: all 0.6s; 
transform: scale(0, 1); }  
.bread-crumb li>a::after { display: block; content: ''; position: absolute; top: 0; height: 2px; border-left: 10px solid transparent; transition: all 0.6s;
 border-right: 10px solid transparent; border-bottom: 10px solid transparent; border-top: 10px solid rgba(0, 0, 0, 0.3); ; opacity: 0; visibility: hidden; 
 left: 10px; }  
.bread-crumb li:hover>a::before, .bread-crumb li.on>a::before { transform: scale(1); }  
.bread-crumb li:hover>a, .bread-crumb li.on>a { color: #003399; }  

/*新闻中心*/
.newspage{ padding: 50px 100px;}
.newsList{  display: flex; flex-wrap: wrap; justify-content: space-between;}
.newsList li {  height: auto; overflow: hidden; width:32%; vertical-align: top; position: relative; 
margin-bottom: 40px; background: #fff; } 
.newsList .bodr { border: 1px solid #dfdfdf; height: 305px; position: relative; overflow: hidden;} 
.newsList .txts { display: block; position: absolute; left: 0; right: 0; top: 0; height: 100%; padding: 0 45px; transition: 400ms; 
-webkit-transition: 400ms; } 
.newsList .txts .sy { margin-bottom: 15px; padding-top: 50px; font-size: 14px; } 
.newsList .txts .nowti { font-size: 20px; color: #464646; line-height: 1.5; overflow: hidden; height:50px; } 
.newsList .txts .tx { line-height: 26px; overflow: hidden; font-size: 14px; margin-top: 5px; } 
.newsList .txts .date { position: absolute; left: 45px; bottom: 40px; font-size: 14px; } 
.newsList .pic { height: 100%; transform: scale(1.2); -webkit-transform: scale(1.2); opacity: 0; display: none\9; transition: 600ms; 
-webkit-transition: 600ms; background-repeat: no-repeat; background-size: cover; background-position: center center; 
background-color: rgba(101, 190, 186, 1); position: relative; } 
.newsList .pic img { height:100%; display:block; background-repeat: no-repeat; background-size: cover; background-position: center center; 
left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); 
position: absolute; } 
.newsList .pic .cover { background: rgba(0,0,0,.3); opacity: 0; display: none\9; } 
.newsList li:hover .pic { transform: scale(1); -webkit-transform: scale(1); opacity: 1; display: block\9; } 
.newsList li:hover .pic .cover { opacity: 1; display: block\9; } 
.newsList li:hover .bg { background: #ff0000; } 
.newsList li:hover a, .newsList li:hover .txts .nowti { color: #fff; } 
.newsList li:hover .txts { top: 30%; background:rgba(0,0,0,0.5); } 
.ixmore { display: block; width: 34px; height: 34px; border: 2px solid #fff; position: absolute; right: 45px; top: 40px;
 transform: translateX(-30px); -webkit-transform: translateX(-30px); opacity: 0; display: none\9; transition: 400ms 100ms; 
 -webkit-transition: 400ms 100ms; } 
.ixmore .ico { background-image: url(/image/arrow.png); } 
.newsList li:hover .ixmore { transform: translateX(0); -webkit-transform: translateX(0); opacity: 1; display: block\9; }
.bodr .ico { width: 100%; height: 100%; display: block; background-repeat: no-repeat; background-position: center center; transition: 600ms;
 -webkit-transition: 600ms; position: relative; }
.newsList li:hover .tx,.newsList li:hover .sy{ color: #fff;}
.newsList li:hover .sy{ padding-top: 30px;}



/*详情页*/
.detailpage{  padding: 50px 0;}
.detailpage .w1200{ background: #fff; padding: 0 30px 0px 30px; animation-name: fadeInUp;  width: 1300px; margin: 0 auto;}
.detailpage .det-tit h3{ font-weight: bold; color: #000; font-size: 24px; text-align: center;}
.detailpage .det-tit .div1{ display: flex; justify-content: center; padding: 20px 0; border-bottom: 1px solid #F5F5F5;
margin-bottom: 20px;}
.detailpage .det-tit span{ color: #666; font-size: 14px; display: block; padding: 0 15px;}
.detailpage .de-tu img{ display: block; width: 100%; margin: 10px auto;}
.detailpage .de-text p{ line-height: 46px; font-size: 15px; color: #000;}


.fenpian{ display: flex; display: -webkit-flex; border:1px solid #F5F5F5; padding: 20px 0; border-left: none; border-right: none; margin: 50px 0;
justify-content: space-between;}
.fenpian i{ display: block; color: #000; font-size: 14px; margin-bottom: 10px;}
.fenpian a{ display: block; color: #555; font-size: 14px;}


.hot-tui h2{ color: #003399; font-weight: bold; font-size: 18px; margin-bottom: 20px;}
.hot-tui ul{ display: flex; justify-content: space-between; flex-wrap: wrap; display: -webkit-flex;}
.hot-tui li{ width: 48%;}
.hot-tui li a{ font-size: 14px; color: #555; display: block; margin: 10px 0;  transition: all 0.36s; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap;}
.hot-tui li:hover a{ color: #003399;}

/*案例页面*/
.casepage{ padding: 50px 100px; background: #F5F5F5;}
.casepage .service-list{ display: flex;  flex-wrap: wrap; justify-content: flex-start; margin-right: -2%; margin-top: 0;}
.service-list li{  width:23%;  background: #fff;   transition: all 0.6s; position: relative; margin-bottom: 35px; margin-right: 2%;}  
.service-list li a{ display: block; padding: 20px;}
.service-list li figure img{ display: block; width: 100%;}
.service-list figcaption{ padding: 0 30px;}
.service-list h3{ color: #000; font-size: 24px; text-align: center; padding: 30px 0 20px 0;}
.service-list p{ color: #666; font-size: 14px; line-height: 32px; text-align: center;}
.service-list li:hover{ box-shadow: 0 0 15px rgba(0,0,0,0.1); transform: translateY(10px);}



@keyframes down{
 	from{transform: translateY(-100%); opacity: 0;}
 	to{transform: none; opacity: 1;}
 }




@media screen and ( max-width: 1600px) {
	
	.newspage{ padding: 50px;}
	.header{ padding: 0 30px;}
	.navbar{ padding: 0 50px;}
	.service-list figcaption{ padding: 0 10px;}
	.service-list li a{ padding: 10px;}
	.service-list h3{ padding: 30px 0 10px 0; font-size: 20px;}
	.contact{ padding: 50px;}
	.contact .right{ flex: 1;}
	
}
@media screen and ( max-width: 1500px) {
	
	.casepage{ padding: 50px 50px;}
}