@charset "utf-8";
.clear { clear: both; }
.w { width: 1200px; margin: 0 auto; clear: both; overflow: hidden; }


.clearfix:before, .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.C:before, .C:after { content: "."; display: block; height: 0; visibility: hidden; }
.C:after { clear: both; }
.C { zoom: 1; }

/*一站式服务*/
.serve {height: 400px; overflow: hidden; }
.serve ul { margin-top: 5px; }
.serve li { float: left; margin-right:10px; margin-left:10px; width:277px; height: 350px; text-align: center; overflow: hidden; border: 1px solid #ebebeb; cursor: pointer }
.serve li.last { margin-right: 0; }
.serve li span { margin: 0 auto 18px; display: block; width:277px; height: 205px; overflow: hidden; position: relative; }
.serve li span img { width: 100%; }
.serve li span .tg-feature-hover { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.70); position: absolute; top: 0; left: 0; opacity: 0; z-index: 1; }
.serve li span .tg-feature-hover a { color: #fff; display: block; left: 50%; margin-left: -23px; position: absolute; transform: rotate(180deg); visibility: hidden; top: -100%; opacity: 1; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; }
.serve li span .tg-feature-hover a i { display: block; width: 46px; height: 46px; background: url(../index_files/a_bg.png) center center no-repeat; }
.serve li h5 { font-size: 18px; color: #555; }
.serve li h5 i { display: block; font-size: 12px; color: 888; font-weight: normal; text-transform: uppercase; }
.serve li p { margin-top: 10px; font-size: 12px; color: #666; line-height: 25px; padding: 0 20px; }
.serve li:hover .tg-feature-hover { opacity: 1; }
.serve li:hover .tg-feature-hover a { opacity: 1; top: 70px; visibility: visible }
.serve li:hover h5, .serve li:hover i { color: #004fa3; }


@-webkit-keyframes empty { 0% {
opacity:1
}
}
@-moz-keyframes empty { 0% {
opacity:1
}
}
@keyframes empty { 0% {
opacity:1
}
}
@-webkit-keyframes fadeIn { 0% {
opacity:0
}
100% {
opacity:1
}
}
@-moz-keyframes fadeIn { 0% {
opacity:0
}
100% {
opacity:1
}
}
@keyframes fadeIn { 0% {
opacity:0
}
100% {
opacity:1
}
}
@-webkit-keyframes fadeOut { 0% {
opacity:1
}
100% {
opacity:0
}
}
@-moz-keyframes fadeOut { 0% {
opacity:1
}
100% {
opacity:0
}
}
@keyframes fadeOut { 0% {
opacity:1
}
100% {
opacity:0
}
}
@-webkit-keyframes backSlideOut { 25% {
opacity:.5;
-webkit-transform:translateZ(-500px)
}
75% {
opacity:.5;
-webkit-transform:translateZ(-500px) translateX(-200%)
}
100% {
opacity:.5;
-webkit-transform:translateZ(-500px) translateX(-200%)
}
}
@-moz-keyframes backSlideOut { 25% {
opacity:.5;
-moz-transform:translateZ(-500px)
}
75% {
opacity:.5;
-moz-transform:translateZ(-500px) translateX(-200%)
}
100% {
opacity:.5;
-moz-transform:translateZ(-500px) translateX(-200%)
}
}
@keyframes backSlideOut { 25% {
opacity:.5;
transform:translateZ(-500px)
}
75% {
opacity:.5;
transform:translateZ(-500px) translateX(-200%)
}
100% {
opacity:.5;
transform:translateZ(-500px) translateX(-200%)
}
}
@-webkit-keyframes backSlideIn { 0%, 25% {
opacity:.5;
-webkit-transform:translateZ(-500px) translateX(200%)
}
75% {
opacity:.5;
-webkit-transform:translateZ(-500px)
}
100% {
opacity:1;
-webkit-transform:translateZ(0) translateX(0)
}
}
@-moz-keyframes backSlideIn { 0%, 25% {
opacity:.5;
-moz-transform:translateZ(-500px) translateX(200%)
}
75% {
opacity:.5;
-moz-transform:translateZ(-500px)
}
100% {
opacity:1;
-moz-transform:translateZ(0) translateX(0)
}
}
@keyframes backSlideIn { 0%, 25% {
opacity:.5;
transform:translateZ(-500px) translateX(200%)
}
75% {
opacity:.5;
transform:translateZ(-500px)
}
100% {
opacity:1;
transform:translateZ(0) translateX(0)
}
}
@-webkit-keyframes scaleToFade { to {
opacity:0;
-webkit-transform:scale(.8)
}
}
@-moz-keyframes scaleToFade { to {
opacity:0;
-moz-transform:scale(.8)
}
}
@keyframes scaleToFade { to {
opacity:0;
transform:scale(.8)
}
}
@-webkit-keyframes goDown { from {
-webkit-transform:translateY(-100%)
}
}
@-moz-keyframes goDown { from {
-moz-transform:translateY(-100%)
}
}
@keyframes goDown { from {
transform:translateY(-100%)
}
}
@-webkit-keyframes scaleUpFrom { from {
opacity:0;
-webkit-transform:scale(1.5)
}
}
@-moz-keyframes scaleUpFrom { from {
opacity:0;
-moz-transform:scale(1.5)
}
}
@keyframes scaleUpFrom { from {
opacity:0;
transform:scale(1.5)
}
}
@-webkit-keyframes scaleUpTo { to {
opacity:0;
-webkit-transform:scale(1.5)
}
}
@-moz-keyframes scaleUpTo { to {
opacity:0;
-moz-transform:scale(1.5)
}
}
@keyframes scaleUpTo { to {
opacity:0;
transform:scale(1.5)
}
}

/* .call-to-action */
.call-to-action { background: rgba(30, 30, 30, 0.6); padding:20px 0; position: relative; z-index:1; margin-top:-80px; text-align: center; height:40PX; line-height:40PX; }
.call-to-action p { margin:0; font-size: 18px; color: #fff; line-height:40px; }
.call-to-action A { background:#004fa3; color: #FFF; padding: 15PX; border: 1px solid transparent; border-color: #004fa3; margin-left:20px;}
.call-to-action A:hover { color:#fff; background: #004fa3 }
/* i_proclass */
.i_proclass { position: relative; padding:50px 0; background: url(../index_files/Advantage_bg1.jpg) top center no-repeat; margin: 0; height:546px; }
.i_proclass .owl-item { width: 400px; float: left; color: #fff; height: 220px; cursor: pointer; transition: all 0.5s ease; position: relative; margin-bottom: 10px; }
.i_proclass .owl-item div { color: #fff; text-align: center; z-index: 10; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; }
.i_proclass .owl-item div.item { color: #fff; text-align: center; transition: all 0.5s ease; z-index: 10; position: relative; }
.i_proclass .owl-item div.img { margin: 25px auto; height: 40px; width: 40px; display: block; background: url(../index_files/ico_proclass.png) 0 0 no-repeat; margin-top: 50px; transition: all 0.5s ease; }
.i_proclass .owl-item div.img1 { }
.i_proclass .owl-item div.img2 { background-position: 0 -40px }
.i_proclass .owl-item div.img3 { background-position: 0 -80px }
.i_proclass .owl-item div.img4 { background-position: 0 -120px }
.i_proclass .owl-item div.img5 { background-position: 0 -160px }
.i_proclass .owl-item div.img6 { background-position: 0 -200px }
.i_proclass .owl-item .h3 { margin-bottom: 10px; font-size: 18px; padding: 0 50px; line-height: 36px; }
.i_proclass .owl-item p { padding: 0 50px; line-height: 30px; }
.i_proclass .owl-item .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; transition: all 0.5s ease; opacity: 0; border-bottom: 3px solid #004fa3; overflow-y: hidden; z-index: 0; }
.i_proclass .owl-item .overlay:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.6); opacity: 1; transition: all 0.5s ease; }
.i_proclass .owl-item .overlay .box { display: table; width: 100%; height: 100%; }
.i_proclass .owl-item .overlay .box .box-content { display: table-cell; vertical-align: bottom; text-align: center; }
.i_proclass .owl-item .overlay .box .box-content a { color: #fff; text-transform: uppercase; background: #004fa3; font-weight: normal; font-size: 14px; line-height: 45px; display: inline-block; padding: 0 55px; position: relative; top: 3px; transform: translate3d(0, 45px, 0); transition: all 0.5s ease; }
.i_proclass .owl-item .overlay .box .box-content a:before, .i_proclass .owl-item .overlay .box .box-content a:after { content: ''; background: #004fa3; position: absolute; top: 0; width: 45px; height: 100%; transition: all 0.5s ease; }
.i_proclass .owl-item .overlay .box .box-content a:before { left: -17px; transform: skew(-37deg); }
.i_proclass .owl-item .overlay .box .box-content a:after { right: -17px; transform: skew(37deg); }
.i_proclass .owl-item:hover { background: #004fa3; }
.i_proclass .owl-item:hover div.img { margin-top: 20px; }
.i_proclass .owl-item:hover .overlay { opacity: 1; }
.i_proclass .owl-item:hover .overlay .box .box-content a { transform: translate3d(0, 0px, 0); }