/* 产品功能 */
.product {
	font-size: 14px;
	padding: 32px 0;
	border-bottom: 1px solid #eee;
}
.product-center {
	display: table;
}
.product-container {
	margin: 0 -11px;
}
.product a {
	width: 148px;
	height: 120px;
	background: #fff;
	margin: 0 11px;
	box-sizing: border-box;
	display: block;
	float: left;
	position: relative;
	text-decoration: none;
	text-align: center;
}

.product.small-icon a {
	width: 124px;
}

.product a span {
	font-size: 4em;
	color: #36c8e7;
	margin-top: 16px;
	display: inline-block;
}
.product a p {
	position: absolute;
	bottom: 17px;
	width: 100%;
	text-decoration: none;
	font-size: 1em;
	color: #000;
	text-align: center;
	margin: 0px;
}
.product a:hover {
	box-shadow: 0 0 20px rgba(0,0,0,.2);
}
.product a:hover span,
.product a:hover p {
	color: #36c8e7;
}
@media only screen and (max-width: 800px) {
	.product {
		padding: 5px 0 15px;
	}
	.product-container {
		margin: 0px;
	}
	.product a {
		width: 28.33%;
		height: 100px;
		margin: 11px 11px 0 0;
		left: 11px;
	}
	.product a span {
		font-size: 2.7em;
	}
	.product a p {
		font-size: 0.8em;
	}
}

/* 动态展示 */
.dynamic {
	/*height: 770px;*/
	padding-bottom: 30px;
}
.dynamic .container-center {
	position: relative;
}
.dynamic h2 {
	text-align: center;
	margin: 0;
	padding-top: 60px;
	font-size: 2.3em;
	color: #333;
	font-weight: normal;
}
.dynamic-bg {
	height: 600px;
	background-position: 80px center;
	background-repeat: no-repeat;
	background-image: url('../images/dynamic/jxfa_img.png');
}
.dynamic-item {
	position: absolute;
}
.dynamic-item .dynamic-item-bg {
	background-repeat: no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.6;
}
.dynamic-item-text {
	display: inline-block;
	width: 210px;
	color: #fff;
	position: absolute;
	z-index: 2;
}
.dynamic-item-text i {
	display: none;
}
.dynamic-item-text p {
	margin: 0px;
	line-height: 1.5rem;
}
.dynamic-item-ripple {
	position: absolute;
	display: none;
}
.dynamic-item-ripple i:before,
.dynamic-item-ripple em:before {
	content:' ';
	position: absolute;
	z-index:2;
	left:0;
	top:0;
	width:10px;
	height:10px;
	background-color: #36c8e7;
	border-radius: 50%;
}
.dynamic-item-ripple i:after,
.dynamic-item-ripple em:after {
	content:' ';
	position: absolute;
	z-index:1;
	width:10px;
	height:10px;
	background-color: #36c8e7;
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
	-webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
	-webkit-animation-duration: 1s;/*动画持续时间*/
	-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
	-webkit-animation-delay: 0s;/*动画延迟时间*/
	-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
	-webkit-animation-direction: normal;/*定义动画方式*/
}
.dynamic-item-ripple i:after {
	-webkit-animation-name:'ripple2';/*动画属性名，也就是我们前面keyframes定义的动画名*/
}
.dynamic-item-ripple em:after {
}
.dynamic-item-top-left {
	left: 0px;
	top: 130px;
	width: 401px;
	height: 236px;
}
.dynamic-item-top-left .dynamic-item-bg {
	background-image: url(../images/dynamic/back_left01_hover.png);
}
.dynamic-item-top-left .dynamic-item-text {
	left: 32px;
	top: 23px;
}
.dynamic-item-top-left .dynamic-item-ripple {
	top: 228px;
	left: 394px;
}
.dynamic-item-top-right {
	right: 0px;
	top: 127px;
	width: 444px;
	height: 319px;
}
.dynamic-item-top-right .dynamic-item-bg {
	background-image: url(../images/dynamic/back_right01_hover.png);
}
.dynamic-item-top-right .dynamic-item-text {
	right: 32px;
	top: 23px;
}
.dynamic-item-top-right .dynamic-item-ripple {
	top: 310px;
	left: -2px;
}
.dynamic-item-bottom-left {
	left: 0px;
	bottom: 20px;
	width: 408px;
	height: 252px;
}
.dynamic-item-bottom-left .dynamic-item-bg {
	background-image: url(../images/dynamic/back_left02_hover.png);
}
.dynamic-item-bottom-left .dynamic-item-text {
	left: 32px;
	bottom: 10px;
}
.dynamic-item-bottom-left .dynamic-item-ripple {
	top: 0px;
	right: 9px;
}
.dynamic-item-bottom-right {
	right: 4px;
	bottom: 18px;
	background-position: 0px 0px;
	width: 396px;
	height: 189px;
}
.dynamic-item-bottom-right .dynamic-item-bg {
	background-image: url(../images/dynamic/back_right02_hover.png);
}
.dynamic-item-bottom-right .dynamic-item-text {
	right: 32px;
	bottom: 52px;
}
.dynamic-item-bottom-right .dynamic-item-ripple {
	top: 0px;
	left: -3px;
}
.dynamic-item:hover .dynamic-item-bg {
	opacity: 1;
}
.dynamic-item:hover .dynamic-item-ripple {
	display: block;
}
@keyframes ripple {
	0% {
		left:5px;
		top:5px;
		opcity:75;
		width:0;
		height:0;
	}
	100% {
		left:-45px;
		top:-45px;
		opacity: 0;
		width:100px;
		height:100px;
	}
}
@keyframes ripple2 {
	0% {
		left:5px;
		top:5px;
		opcity:75;
		width:0;
		height:0;
	}
	100% {
		left:-25px;
		top:-25px;
		opacity: 0;
		width:60px;
		height:60px;
	}
}
@media only screen and (max-width: 800px) {
	.dynamic h2 {
		font-size: 1.5em;
		padding: 20px;
	}
	.dynamic-bg {
		background-size: 300px;
		background-position: center;
		height: 200px;
		background-image: url('../images/dynamic/jxfa_img_num.png');
	}
	.dynamic-item {
		position: initial;
		height: auto;
		width: auto;
		margin-top: 20px;
	}
	.dynamic-item-bg {
		display: none;
	}
	.dynamic-item-text {
		color: #000;
		position: initial;
		margin: 0 20px;
		width: auto;
	}
	.dynamic-item-text i {
		display: inline-block;
		font-style: normal;
		margin-right: 4px;
	}
}

/* 解决方案 */
.problem {
	background: #eee;
}
.problem .container-center {
	padding-bottom: 72px;
}
.problem h2 {
	margin: 0px;
	padding: 60px 20px 40px;
	font-size: 2.3em;
	color: #333;
	text-align: center;
	font-weight: normal;
}
.problem-left {
	width: 260px;
	float: left;
	border-left: 1px solid #d5d5d5;
	border-bottom: 1px solid #d5d5d5;
	box-sizing: border-box;
}
.problem-right {
	float: left;
	width: 740px;
	height: 561px;
	overflow: hidden;
	border-bottom: 1px solid #dedede;
	border-right: 1px solid #dedede;
	box-sizing: border-box;
}
.problem-title {
	height: 48px;
	line-height: 48px;
	font-size: 14px;
	background: #37393b;
	text-align: center;
	color: #fff;
}
.problem-right .problem-title {
	border-left: 2px solid #545556;
}
@media only screen and (max-width: 800px) {
	.problem .container-center {
		padding: 0px;
	}
	.problem h2 {
		font-size: 1.2em;
		padding: 20px;
	}
	.problem-left {
		display: none;
	}
	.problem-right {
		width: auto;
		height: auto;
	}
	.problem-title {
		display: none;
	}
}

/* 管理问题 - 菜单 */
.problem-menu {
	height: 480px;
	overflow: hidden;
}
.problem-menu a {
	height: 20%;
	display: block;
	padding: 25px 30px 0;
	color: #000;
	font-size: 0.9rem;
	line-height: 22px;
	text-decoration: none;
	border-bottom: 1px solid #e2e2e2;
	border-right: 1px solid #e2e2e2;
	box-sizing: border-box;
}
.problem-menu a span {
	color: #36c8e7;
}
.problem-menu a.current {
	background: #fff;
	border-left: 8px solid #36c8e7;
	padding-left: 22px;
	border-right: 0px;
}
.problem-index {
	height: 32px;
	line-height: 32px;
	border-right: 1px solid #e2e2e2;
}
.problem-index a {
	display: inline-block;
	width: 50%;
	height: 100%;
	float: left;
	text-decoration: none;
	text-align: center;
	background: #fff;
	color: #111;
}
.problem-index a.current {
	background: #36c8e7;
	color: #fff;
}

/* 管理问题 - 内容 */
.problem-content {
	/*padding: 48px 96px;*/
	padding: 40px 45px;
	height: 512px;
	background: #fff;
	box-sizing: border-box;
}
.problem-content h3 {
	font-size: 1.7em;
	color: #36c8e7;
	margin: 0px;
	font-weight: normal;
}
.problem-content p {
	margin: 32px 0 0;
	font-size: 1em;
	line-height: 21px;
}
.problem-content a {
	/*margin-top: 24px;*/
	display: inline-block;
	/*width: 96px;*/
	/*height: 32px;*/
	/*line-height: 32px;*/
	text-align: center;
	color: #36c8e7;
	/*border: 1px solid #111;*/
	border-radius: 5px;
	font-size: 14px;
	/*text-decoration: none;*/
}
/*.problem-content a:hover {
	background: #36c8e7;
	border-color: #36c8e7;
	color: #fff;
}*/
.problem-content-img {
	width: auto;
	height: 267px;
	height: 330px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	/*margin: 20px -96px 0;*/
	margin: 20px -45px 0;
	/*margin-top: 30px;*/
}
/*.problem-content-img img {
	width: 100%;
	box-shadow: 0 0 20px rgba(0,0,0,.2);
}*/
.problem-content-img-fix {
	margin-top: 25x;
}
.problem-more {
	text-align: center;
	padding: 10px 0;
	color: #666;
	display: none;
	cursor: pointer;
}
.problem-half .problem-content:nth-child(n+7) {
	display: none;
}
@media only screen and (max-width: 800px) {
	.problem-content {
		width: auto;
		height: auto;
		padding: 20px;
		border-bottom: 1px solid #eee;
	}
	.problem-content:last-child {
		border-bottom: 0px;
	}
	.problem-content h3 {
		font-size: 1.3em;
	}
	.problem-content p {
		margin-top: 10px;
	}
	.problem-content-img {
		width: auto;
		margin: 0px;
	}
	.problem-more {
		display: block;
	}
}

/* 解决方案 */
.solution h2 {
	margin: 0px;
	padding: 60px 20px 40px;
	font-size: 2.3em;
	color: #333;
	text-align: center;
	font-weight: normal;
}
.solution-container {
	margin: 0 -11px;
}
.solution-item {
	float: left;
	width: 25%;
}
.solution-item-container {
	margin: 0 11px;
	border: 1px solid #eee;
	position: relative;
	top: 0px;
	animation: 1s;
	-webkit-animation: 1s;
}
.solution-item h3 {
	height: 114px;
	line-height: 114px;
	background: #333;
	color: #fff;
	text-align: center;
	font-size: 1.3em;
	margin: 0px;
	font-weight: normal;
	background-repeat: no-repeat;
	background-size: cover;
}
.solution-item ul {
	text-align: center;
	padding: 0px;
	height: 226px;
	width: 350px;
	margin: 0px;
	display: table-cell;
	vertical-align: middle;
}
.solution-item li {
	display: inline-block;
	width: 48px;
	margin: 10px;
	font-size: 12px;
}
.solution-item li span {
	display: inline-block;
	width: 100%;
	height: 48px;
	font-size: 2.5rem;
}
.solution-item li p {
	margin: 0px -6px;
}
.solution-item-container:hover {
	box-shadow: 0 0 20px rgba(0,0,0,.3);
	animation: 1s;
	-webkit-animation: 1s;
	color: #36c8e7;
}
.solution-item-container h3 b {
	display: inline-block;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.2);
}
.solution-item-container:hover h3 {
	color: #36c8e7;
}
.solution-item-container:hover h3 b {
	background-color: rgba(0,0,0,.0);
}
.solution-bottom {
	margin: 48px 0;
	text-align: center;
}
.solution-bottom a {
	display: inline-block;
	border-radius: 5px;
	width: 160px;
	height: 48px;
	line-height: 48px;
	border: 1px solid #333;
	color: #333;
	text-decoration: none;
	font-size: 14px;
	box-sizing: border-box;
}
.solution-bottom a:hover {
	background: #36c8e7;
	border-color: #36c8e7;
	color: #fff;
}
@media only screen and (max-width: 800px) {
	.solution-container {
		margin: 0px;
	}
	.solution h2 {
		font-size: 1.4em;
		padding: 30px;
	}
	.solution-item h3 {
		font-size: 1.1em;
	}
	.solution-item {
		width: 100%;
	}
	.solution-item-container {
		margin-bottom: 11px;
	}
	.solution-bottom {
		margin: 20px 0 31px;
	}
	.solution-item ul {
		width: 100%;
		display: inline-block;
		padding: 20px 0;
		height: auto;
	}
	.solution-item li {
		width: 24%;
	}
}