.app_tit { width:90%;
	max-width: 1200px;
	margin: 0 auto;
	padding-top: 100px;
	text-align: center
}

.app_tit h5 {
	font-size: 30px;
	line-height: 46px;
	color: #333;
	margin: 0 0 20px;
	font-weight: lighter
}

.app_tit .tit2 {
	position: relative
}

.app_tit h6 {
	font-weight: lighter;
	background: #fff;
	z-index: 2;
	font-weight: lighter;
	display: inline-block;
	font-size: 20px;
	line-height: 30px;
	color: #666;
	margin: 0;
	padding: 0 21px;
	position: relative
}

.app_tit h6:before {
	content: " ";
	width: 7px;
	height: 7px;
	position: absolute;
	top: 12px;
	left: -7px;
	background: #d2d2d2;
	border-radius: 100%
}

.app_tit h6:after {
	content: " ";
	width: 7px;
	height: 7px;
	position: absolute;
	top: 12px;
	right: -7px;
	background: #d2d2d2;
	border-radius: 100%
}

.app_tit i {
	display: block;
	position: absolute;
	width: 100%;
	height: 1px;
	background: #d2d2d2;
	top: 15px;
	left: 0
}

.app2 {
	background: url(app2_bg.png);
	 position:relative; 
}

.app2_ul {
	overflow: hidden;
	padding-top: 45px; width:98%;
	max-width: 1200px;
	margin: 0 auto 0
}

.app2_ul li {
	width: 23%;
	height: 405px;
	border: 1px solid #ddd;
	text-align: center;
	background: #fff;
	float: left;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-ms-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
    margin-top: 50px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 2%;
}

.app2_ul li:first-child {
	margin-left: 0
}

.app2_ul li .icon {
	width: 144px;
	height: 144px;
	border: 1px solid #ddd;
	border-radius: 100%;
	margin: 69px auto 26px;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-ms-transition: .5s;
	-o-transition: .5s;
	transition: .5s
}

.app2_ul li .icon1 {
	background: url(applet_19.png) no-repeat center
}

.app2_ul li .icon2 {
	background: url(applet_08.png) no-repeat center
}

.app2_ul li .icon3 {
	background: url(applet_16.png) no-repeat center
}

.app2_ul li .icon4 {
	background: url(applet_22.png) no-repeat center
}

.app2_ul li:hover .icon1 {
	background: url(applet_11.png) no-repeat center;
	border-color: #e10616
}

.app2_ul li:hover .icon2 {
	background: url(applet_05.png) no-repeat center;
	border-color: #e10616
}

.app2_ul li:hover .icon3 {
	background: url(applet_14.png) no-repeat center;
	border-color: #e10616
}

.app2_ul li:hover .icon4 {
	background: url(applet_24.png) no-repeat center;
	border-color: #e10616
}

.app2_ul li span {
	display: block;
	line-height: 28px;
	font-size: 18px;
	color: #333;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-ms-transition: .5s;
	-o-transition: .5s;
	transition: .5s
}

.app2_ul li p {
	line-height: 26px;
	font-size: 14px;
	color: #888;
	margin: 1px 0 0 0;
	/*height: 78px;*/
	overflow: hidden
}

.app2_ul li:hover {
	margin-top: 0
}

.app2_ul li:hover span {
	color: #e10616
}


.xcx-f1>li{float:left;width:20%;margin-bottom:80px; text-align:center;}
.xcx-in{background-image:url("1.png");width:100px;height:100px;display:inline-block}.xcx-in.qr{background-position:0 0}.xcx-in.fj{background-position:0 -110px}.xcx-in.wx{background-position:0 -220px}.xcx-in.ls{background-position:0 -330px}.xcx-in.hy{background-position:0 -440px}.xcx-in.zd{background-position:0 -550px}.xcx-in.xx{background-position:0 -660px}.xcx-in.gzh{background-position:0 -770px}.xcx-in.tw{background-position:0 -880px}.xcx-in.ff{background-position:0 -990px}


.boxx{ max-width:1200px; margin:auto;}

@media screen and (max-width :815px){
.app2_ul li{ width:48%;}
.app2_ul li:nth-child(2n+1) {
	margin-left: 0; clear:both;
}
.app2_ul li:hover,.app2_ul li {
	margin-top: 30px;
}

}

@media screen and (max-width :500px){
.app2_ul li{ width:48%; max-height:250px;}
.app2_ul li br{ display:none}
.app2_ul li p{ padding-left:20px; padding-right:20px; font-size:12px; line-height:1.5;}
.app2_ul li:nth-child(2n+1) {
	margin-left: 0; clear:both;
}
.app2_ul li:hover,.app2_ul li {
	margin-top: 30px;
}
.xcx-f1 li{ width:25%; margin-top:5px; margin-bottom:5px;}

.xcx-in{width:100px;height:80px;}

.app2_ul li .icon {
	width: 100px;
	height: 100px;
	margin: 10px auto 10px;}
/*.app2_ul li {

	height: 305px;

    margin-top: 50px;


}*/
.xcx-f1{ margin-bottom:50px; float:left; width:100%;}
}

@media screen and (max-width :320px){
.app2_ul li{ width:48%;}
.app2_ul li:nth-child(2n+1) {
	margin-left: 0; clear:both;
}
.app2_ul li:hover,.app2_ul li {
	margin-top: 30px;
}
.xcx-f1 li{ width:50%;}
}