.section{ background: #f5f5f5; padding-bottom: 80px;}
footer{ margin-top: 0; }

ul.trait {
    /*text-align: justify;*/
    margin-bottom: 70px;
    overflow: hidden;
}

ul.trait li {
	/*display: inline-block;*/
    float: left;
    /*width: 180px;*/
    height: 180px;
    text-align: center;
    margin-left: 1px;
    padding: 0;
    color: #fff;
    cursor: pointer;
}
ul.trait li:first-child{ margin-left: 0; }
/*ul.trait li:first-child{ width: 480px; }*/
ul.trait li>div{ float: left; height: 100%; }
ul.trait li .img{
	width: 180px;
	background: #0d7377;
}
ul.trait li .img p{ margin: 0; font-size: 16px;}
ul.trait li .img img{ margin: 40px 0 30px; }
ul.trait li .text{
	width: 266px;
	background: #035b5e;
	text-align: justify;
	display: none;
	position: relative;
	/*transition: display 1s linear;*/
	/*animation: display 1s linear;*/
}
ul.trait li:first-child .text{ display: block; }
ul.trait li .text span{
	display: inline-block;
	padding: 0 40px;
	line-height: 25px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.ie8 ul.trait li .text span{ margin-top: -50px; }


.process{ color: #fff; text-align: center;}
.process .content{ 
	background: #fff; padding: 74px 35px;
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	-ms-justify-content: space-between;
	-o-justify-content: space-between;
	justify-content: space-between;
}
.process .area1,.process .area2{
	display: inline-block;
	/*width: 250px;*/
	border: 1px dashed #0d7377;
	padding-bottom: 11px;
	position: relative;
}
.process .area1 .arrow{
	display: inline-block;
	width: 58px;
	height: 45px;
	background: url(../image/software/icon_6.png) no-repeat;
	position: absolute; left: 234px;
	top: 50%; margin-top: -22.5px;
}
.process .area2{
	width: 855px;
}
.process .area1 p{
	width: 200px;
	line-height: 60px;
	font-size: 16px;
	background: #0d7377;
	margin: 14px 25px;
}

.process .area2 .list1{
	width: 626px;
	float: left;
	overflow: hidden;
}

ul.store {
	width: 560px!important;
    text-align: justify;
    margin: 0 33px;
}
ul.store:after {
    content: "";
    display: inline-block;
    width: 100%;
}

ul.store li {
    display: inline-block;
    width: 160px!important;
    text-align: center;
}


.process .area2 .list1 .lst4{
	background: #eee;
	margin: -9px 33px 0;
	padding: 10px 20px;
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	-ms-justify-content: space-between;
	-o-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}
.process .area2 .list1 p{
	width: 160px;
	line-height: 40px;
	background: #88abda;
	margin: 10px 0;
}

.ie9 .process .area1,.ie8 .process .area1{ float: left; }
.ie9 .process .area2,.ie8 .process .area2{ float: right; padding-bottom: 25px;}
.ie9 .process .area2 .list1 .lst4,.ie9 .process .content,
.ie8 .process .area2 .list1 .lst4,.ie8 .process .content{ overflow: hidden; }
.ie9 .process .area2 .list1 .lst4 p,
.ie8 .process .area2 .list1 .lst4 p{
	float: left; margin: 5px;
}
.ie9 .process .area2 .list1 .lst4 p:first-child{ margin: 5px; }
.ie8 .process .area2 .list1 .lst4 p:first-child{ margin: 5px; }


.process .area2 .list2{
	width: 200px;
	float: left;
	background: #89c22d;
}
.process .area2 .list2 p{
	width: 150px;
	line-height: 40px;
	background: #fff;
	margin: 11px 25px;
	color: #44444c;
}
.process .area2 .list2 p:last-child{ margin-bottom: 16px; }

.process .area2 .list1 .lst2 p{ background: #8c97cb; }
.process .area2 .list1 .lst3 p{ background: #8f82bc; }
.process .area1 p:first-child,
.process .list1 p:first-child,
.process .area2 .list1 p:first-child{
	color: #44444c;
	margin: 25px auto;
	line-height: 16px;
	background: none;
	font-size: 16px;
}
.process .area2 .list2 p:first-child{
	width: 100%; 
	margin: 0 0 16px 0; 
	font-size: 16px;
	line-height: 16px;
	padding: 25px 0;
}
.process .area2 .list1 .lst4 p{
	width: 120px;
	line-height: 40px;
	background: #89c997;
	margin: 5px 0;
}
.process .area2 .list1 .lst4 p:first-child{
	margin: 5px 0; color: #fff;
}


/*945分辨率以下*/
@media (max-width: 945px){
	
	ul.trait{ margin: 0 30px 70px; }
	ul.trait li:not(:first-child){ margin: 15px 0 0;}
	ul.trait li:nth-of-type(2n) .img { background: #8ac22e; }
	ul.trait li:nth-of-type(2n) .text { background: #5c8813; }
	ul.trait li .img{ width: 200px; }
	ul.trait li .img img { margin: 40px 0 20px; }
	ul.trait li .img p{ font-size: 24px; }
	ul.trait li .text{ width: 380px; display: block; }
	ul.trait li .text span{ line-height: 1.3; }
	
	.process .content{ display: block; padding: 0 20px;}
	.process .area1 p,.process .area2 .list2 p{ width: 180px; margin: 10px auto; font-size: 24px;}
	.process .area1{
		display: -webkit-box;
	    display: -moz-box;
	    display: -ms-flexbox;
	    display: -webkit-flex;
	    display: flex;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
		margin-bottom: 20px;
		padding: 0 8px 20px;
		background: #fff;
	} 
	.process .area1 .arrow{
		transform: rotate(90deg);
	    top: 100%;
	    margin-top: -12px;
	    left: 50%;
	    margin-left: -22.5px;
	    z-index: 1;
	}
	.process .area1 p:first-child, 
	.process .list1 p:first-child, 
	.process .area2 .list1 p:first-child{ 
		font-size: 24px; margin: 30px auto 15px;
		line-height: 24px;
	}
	.process .area1 p:first-child{ width: 100%;  }
	.process .area2{ width: 598px; padding-bottom: 34px; background: #fff;}
    .process .area2 .list1 {
	    width: 100%;
	}
	ul.store {
	    width: auto!important;
	    margin: 0 10px;
	}
	ul.store li { width: 180px!important; }
	.process .area2 .list1 p{ width: 180px; line-height: 50px; }
	.process .area2 .list1 .lst4 {
	    background: #eee;
	    margin: 0 10px;
	    padding: 7.5px 15px;
	}
	.process .area2 .list1 .lst4 p {
	    width: 130px;
	    line-height: 50px;
	    margin: 7.5px 0;
	}
	.process .area2 .list2{ 
		width: auto; 
		background: #fff; 
		margin: 0 7.5px;
	}
	.process .area2 .list2 p{ 
		line-height: 50px; background: #89c22d; color: #fff;
		float: left; margin: 7.5px 7px;
	}
	.process .area2 .list2 p:first-child{ 
		background: #fff; color: #44444c; font-size: 24px;
		line-height: 24px; padding: 40px 0 12.5px;
		margin-bottom: 0;
	}
	.section{ padding-bottom: 70px; }
	.process .content{ background: #f5f5f5; }


}