@charset "utf-8";

.service-title{text-align: center;margin: 30px 0 0 0;}
.service-title h2{display: block;font-size: 36px;}
.service-title p{display: block;color: #888;font-size: 16px;}
.solution-box{margin: 10px 0 0 0;}
.solution-cut{width: 1360px;margin: 0 auto;position: relative;}
.solution-swiper{width: 100%;overflow: hidden;}
.solution-box button.fa{position: absolute;top: 0;bottom: 0;width: 50px;background: rgba(16,116,188, .6);color: rgba(255, 255, 255, .5);cursor: pointer;border: none;font-size: 40px;padding: 0;transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;-webkit-transition: .3s;}
.solution-box button.fa:hover{background: #0166ce;color: #fff;}
.solution-box .fa-back{right: 100%;}
.solution-box .fa-more{left: 100%;}
.solution-box ul{width: 10000%;}
.solution-box ul:after{display: block;clear: both;content: '';}
.solution-box ul li{width: .2%;float: left;text-align: center;color: #fff;position: relative;}
.solution-box ul li span{display: block;position: absolute;left: 0;top: 0;right: 0;bottom: 0;background: rgba(0,0,0, .1);transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;-webkit-transition: .3s;margin-right:1px;}
.solution-box ul li:nth-child(2) span,
.solution-box ul li:nth-child(4) span{background: rgba(0, 0, 0, .75);transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;-webkit-transition: .3s;}
.solution-box ul li i{font-size: 50px;opacity: .85;position: absolute;width: 100%;left: 0;bottom: 53%;transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;-webkit-transition: .3s;}
.solution-box ul li hr{width: 30px;height: 2px;background: #fff;border: none;position: absolute;left: 50%;top: 50%;margin: 0 0 0 -15px;padding: 0;transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;-webkit-transition: .3s;}
.solution-box ul li h3{font-size: 18px;position: absolute;padding-top:8px;padding-bottom:8px;margin:0 auto;width: 100%;left: 6%;top: 43%;transition: .3s;background: rgba(0,0,0, .6);width:88%;}
.solution-box ul li p{width: 80%;position: absolute;font-size: 12px;left: 10%;padding-top:8px;top: 80%;opacity: 0;transition: .3s;}
.solution-box ul li a{position: absolute;top: 85%;font-size: 16px;line-height: 32px;width: 120px;margin: 0 0 0 -60px;color: #fff;border: 2px solid #fff;opacity: 0;transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;-webkit-transition: .3s;}
.solution-box ul li a:hover{background: #fff;color: #373d41;}
.solution-box ul li img{display: block;width: 100%;}
.solution-box ul li:hover span{background: rgba(48, 113, 255, .85);}
.solution-box ul li:hover i{bottom: 63%;}
.solution-box ul li:hover hr{top: 40%;opacity: 0;}
.solution-box ul li:hover h3{top: 38%;}
.solution-box ul li:hover p{top: 50%;opacity: 1;}
.solution-box ul li:hover a{top: 75%;opacity: 1;}
/*适应手机*/
@media(max-width:680px){
	.solution-cut{width:100%;margin: 0 auto;position: relative;}
}	
/*响应式*/
@media(max-width:1680px){.solution-cut{width: 1380px;}.solution-box ul li i{font-size: 46px;}.solution-box ul li h3{font-size: 22px;}.solution-box ul li p{font-size: 14px;}.solution-box ul li a{font-size: 14px;line-height: 28px;width: 100px;margin: 0 0 0 -50px;}}
@media(max-width:1600px){.solution-cut{width: 1300px;}}
@media(max-width:1440px){.solution-cut{width: 1200px;}.solution-box ul li i{font-size: 40px;}.solution-box ul li h3{font-size: 18px;}.solution-box ul li p{font-size: 12px;}}
@media(max-width:767px){.solution-cut{width: 100%;padding: 0;}.solution-box ul li{width: 290px;}.solution-box button.fa{display: none;}.solution-box .fa-back{left: 0;right: auto;}.solution-box .fa-more{left: auto;right: 0;}}
/*字体标*/
@font-face{font-family: "icon";src: url('../font/iconfont.eot?');src: url('../font/iconfont.eot?') format('embedded-opentype'), url('../font/iconfont.woff?') format('woff'), url('../font/iconfont.ttf?') format('truetype'), url('../font/iconfont.svg?') format('svg');}
.fa{font-family: "icon" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.fa-back:before{content: url(../images/ban_l_btn.png);}
.fa-more:before{content: url(../images/ban_r_btn.png);}
.fa-wxbgongju:before{content: "\e61b";}
.fa-all:before{content: "\e696";}
.fa-security:before{content: "\e71c";}
.fa-huanhuobz:before{content: "\e67c";}
.fa-aniukefu2:before{content: "\e6ca";}
.fa-set1:before{content: "\e6dc";}
.fa-naozhong:before{content: "\e648";}
.fa-suo:before{content: "\e652";}





.ato-content-title {color: #393b40;padding: 20px 0 10px;text-align: center; font-size: 30px;letter-spacing: 1.09px;}
.ato-content {width: 1200px; margin: 0 auto; padding-top: 10px;}
.ato-list ul { height: 470px;}
.ato-list ul li {margin-top:30px;width: 270px;height: 350px;float: left;margin-left: 26px; margin-right: 0;text-align: center;
    background-color: #fff; -webkit-transition: height 300ms; -moz-transition: height 300ms; -ms-transition: height 300ms;
    -o-transition: height 300ms;transition: height 300ms; position: relative; box-shadow: 1px 0px 8px rgba(0,0,0,0.12);
    top: 10px; left: -10px;}
.ato-list ul li:before {content: ''; display: block; width: 100%;height: 100%; position: absolute;top: 0; left: 0;
box-shadow: 0 0px 2px rgba(0,0,0,0.24);}
.ato-list ul li div { width: 270px;margin: 30px 0 25px 0; text-align: center;}
.ato-list ul li div img {width: 38%;height: auto;border: none;display: block; margin: 0 auto;}
.ato-list ul li h3 {font-size: 14px;color: #244e6f;font-weight: normal; margin-bottom: 10px;}
.ato-list ul li p { margin: 0;text-align: left;font-size: 13px;color: #8e8e8e;line-height: 20px;padding: 0 8px 2px 8px;
	height:140px;overflow:hidden;}
.ato-more {width: 157px;height: 36px; text-align: center;display: none;display: inline-block;border: 1px solid #7D7D7D;
    line-height: 34px;color: #666; font-size: 13px;text-decoration: none; position: absolute; bottom: 30px;left: 55px;}
.ato-more:hover { background-color: #108cee; border-color: #108CEE; -webkit-transition: all 0.3s; -moz-transition: all 0.3s;
    -ms-transition: all 0.3s; -o-transition: all 0.3s;transition: all 0.3s; color: #FFF;}
.ato-list-fl { float: left;}
.ato-title { width: 266px; margin-top: 130px; padding-right: 20px;}
.ato-title h2 {font-size: 24px;line-height: 33px; color: #333; padding: 0;margin: 0; font-weight: inherit;}
.ato-title p {margin-top: 10px; font-size: 14px;color: #666; line-height: 26px;}
.ato-list-fl a { width: 50px;height: 50px; position: relative; margin-top: 54px; margin-right: 10px; float: left;
    border: 1px solid #ABABAB; display: block; background: #f2f2f2;overflow: hidden;}

.ato-list-fl a img {width: 22px;height: 22px; display: block;border: none; margin: 0 auto; margin-top: 12px;}
.ato-list { float: left;width: 910px;height: 430px;}
.ato-list ul li:hover {top: -5px; box-shadow: 0 10px 12px rgba(0,0,0,0.12);-webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s}
.prev:hover .ato-ope {opacity: 0;}
.ato-ope1 {opacity: 0;}
.prev:hover .ato-ope1 {opacity: 1; position: absolute; top: 0; left: 11px;}
.prev:hover .ato-ope {opacity: 0;}
.ato-ope1 {opacity: 0;}
.prev:hover .ato-ope1 {opacity: 1;position: absolute;top: 0;left: 11px;}
.next:hover .ato-ope {opacity: 0;}
.ato-ope1 {opacity: 0;}
.next:hover .ato-ope1 { opacity: 1; position: absolute;top: 0;left: 11px;}
.next:hover .ato-ope {opacity: 0;}
.ato-ope1 {opacity: 0;}
.next:hover .ato-ope1 {opacity: 1;position: absolute;top: 0;right: 11px;}
.ato-list-fl a:hover {background: #108cee; border: 1px solid #108cee;}

@media (max-width: 768px) {
	.ato-list-fl {width:100%;margin-left:12px;}
	.ato-title { width: 266px; margin-top: 8px;}
	.ato-content {width: 100%; margin: 0 auto;padding-top: 10px;}
	.ato-list { float: left;width: 96%;height: 100%;}
	.ato-list ul li div { width: 98%;margin: 10px 0 10px 0; text-align: center;}
	.ato-list ul li div img {width: 100%;height: auto;border: none;display: block; margin: 0 auto;}
	.ato-list ul li {margin-top:20px;width:100%;height: 100%;float: left;margin-left: 18px; margin-right: 0;text-align: center;
    background-color: #fff; -webkit-transition: height 300ms; -moz-transition: height 300ms; -ms-transition: height 300ms;
    -o-transition: height 300ms;transition: height 300ms; position: relative; box-shadow: 1px 0px 8px rgba(0,0,0,0.12);
    top: 10px; left: -10px;}	
}