﻿.monitor-module.double {
	padding-bottom: 55px;
	background: #f5f5f5;
}

.info-banner {
	background: url(../images/monitor_new_banner.jpg) no-repeat center top;
}
.monitor-part-01 {
	padding: 180px 0 0 0;
	height: 505px;
}
.monitor-part-02 {
	padding: 90px 0 0 125px;
	height: 445px;
}
.monitor-part-03 {
	padding: 180px 0 0 0;
	height: 500px;
}
.monitor-part-01 .monitor-part-title,.monitor-part-01 .monitor-part-introduce,.monitor-part-03 .monitor-part-title,.monitor-part-03 .monitor-part-introduce {
	margin-left: 670px;
}
/*区块一\二动画*/
@keyframes animate01scale1{
	0%{
		opacity: 0;
		filter:alpha(opacity=0);
		transform: scale(0.4);
	}
	50% {
		opacity: 1;
		filter:alpha(opacity=100);
	}
	100%{
		opacity: 0;
		filter:alpha(opacity=0);
		transform: scale(1.2);
	}
}
 @keyframes animate02translateY1{
	0%{
		opacity: 0;
		filter:alpha(opacity=0);
		transform: translateY(-250px);
	}
	75%{
		opacity: 0.75;
		filter:alpha(opacity=75);
		transform: translateY(0)
		
	}
	100%{
		opacity: 1;
		filter:alpha(opacity=100);
	}
}
 @-webkit-keyframes numblescroll {
	0% {
		opacity: 0;
		filter:alpha(opacity=0);
		transform: translateY(50px) rotate(90deg);
		
	}
	50% {
		opacity: 1;
		filter:alpha(opacity=100);
	}
	100% {
		opacity: 0;
		filter:alpha(opacity=0);
		transform: translateY(-50px) rotate(90deg);
		
	}
}


/*区块三动画*/
/*透明动画1*/
@keyframes animateopacity1{
	0%{
		opacity: 0;
		filter:alpha(opacity=0);
	}
	100%{
		opacity: 1;
		filter:alpha(opacity=100);
	}
}
@keyframes animateopacity2{
	0%{
		opacity: 0;
		filter:alpha(opacity=0);
	}
	50%{
		opacity: 1;
		filter:alpha(opacity=100);
	}
	100%{
		opacity: 0;
		filter:alpha(opacity=0);
	}
}
@keyframes animatetranslateY1{
	0%{
		opacity: 0;
		filter:alpha(opacity=0);
	}
	50%{
		opacity: 1;
		filter:alpha(opacity=100);
	}
	100%{
		transform: translateY(-50px) scaleX(1.5) rotateX(55deg);
		opacity: 0;
		filter:alpha(opacity=0)
	}
}
/*区块一动画*/
.animate-bg-01 {
	position: absolute;
	z-index: 10;
	left: 126px;
	top: 100px;
	width: 466px;
	height: 400px;
	background: url(../images/animate-bg-01.png) no-repeat left bottom;
	animation: animate02translateY1 1.5s ease-in 100ms both;
}
.animate-bg-01-circle {
	left: 100px;
	top: 62px;
	width: 217px;
	height: 224px;
	background: url(../images/animate-bg-01-circle.png) no-repeat center;
	animation: animate02translateY1 .5s ease-in 1500ms both;
}
.far-01 {
	left: 90px;
	top: 102px;
	width: 12px;
	height: 14px;
	background: url(../images/far-01.png) no-repeat center;
	animation: animate02translateY1 .5s ease-in 1900ms both;
}
.far-02 {
	left: 100px;
	top: 37px;
	width: 21px;
	height: 25px;
	background: url(../images/far-02.png) no-repeat center;
	animation: animate02translateY1 1s ease-in 1900ms both;
}
.far-02-bg {
	left: 85px;
	top: 22px;
	width: 49px;
	height: 57px;
	background: url(../images/far-02-bg.png) no-repeat center;
	animation: animate01scale1 2s  2900ms infinite both;
}
.far-03 {
	left: 176px;
	top: 24px;
	width: 51px;
	height: 61px;
	background: url(../images/far-03.png) no-repeat center;
	animation: animate02translateY1 .5s ease-in 1900ms both;
}
.far-04 {
	left: 264px;
	top: 52px;
	width: 12px;
	height: 14px;
	background: url(../images/far-04.png) no-repeat center;
	animation: animate02translateY1 1s ease-in 1900ms  both;
}
.far-04-bg {
	left: 255px;
	top: 43px;
	width: 29px;
	height: 34px;
	background: url(../images/far-04-bg.png) no-repeat center;
	animation: animate01scale1 2s  2900ms infinite both;
}
.far-05 {
	left: 342px;
	top: 83px;
	width: 24px;
	height: 28px;
	background: url(../images/far-05.png) no-repeat center;
	animation: animate02translateY1 .5s ease-in 1900ms both;
}
/*区块二动画*/
.animate-bg-02 {
	position: absolute;
	z-index: 10;
	right: 50px;
	top: 70px;
	width: 475px;
	height: 400px;
	background: url(../images/animate-bg-02.png) no-repeat left bottom;
	animation: animate02translateY1 1.5s ease-in 100ms both;
}
.animate-bg-02-under {
	position: absolute;
	z-index: 5;
	right: 50px;
	top: 70px;
	width: 475px;
	height: 400px;
	animation: animate02translateY1 1.5s ease-in 100ms both;

}
.animate-bg-02-circle {
	left: 204px;
	top: 50px;
	width: 114px;
	height: 111px;
	background: url(../images/animate-bg-02-circle.png) no-repeat center;
	animation: animate02translateY1 .5s ease-in 1500ms both;
}
.animate-bg-02-light {
	width: 29px;
	height: 69px;
	background: url(../images/animate-bg-02-light.png) no-repeat center;
	animation: animateopacity1 2s 2600ms both;
}
.animate-bg-02-light.light-01 {
	left: 163px;
	top: 62px;
}
.animate-bg-02-light.light-02 {
	left: 247px;
	top: 113px;
}
.animate-bg-02-light.light-03 {
	left: 326px;
	top: 64px;
}

 div.scroll-numble {
	position: absolute;
	transform: rotate(90deg);
}

 div.scroll-numble{
 	font-size: 12px;
	color: rgba(16,175,255,0.6);
}
 .d1 {
 	left:90px;
 	top: 160px;
	animation: numblescroll 5s 3000ms infinite  both;
}

 .d2 {
 	top: 90px;
 	left:118px;
	animation: numblescroll 3s 3400ms infinite both;
}

 .d3 {
 	top: 58px;
 	left:155px;
	animation: numblescroll 4s 3800ms infinite both;
}

 .d4 {
 	top: 123px;
	animation: numblescroll 5s 3900ms infinite both;
 	left:189px;
}
 .d5 {
 	top: 136px;
	animation: numblescroll 4s 4400ms  infinite both;
 	left:253px;
}
 .d6 {
 	top: 153px;
	animation: numblescroll 4s 3800ms infinite both;
 	left:348px;
}
 .d7 {
 	top: 58px;
	animation: numblescroll 6s 3200ms  both;
 	left:338px;
}
/*区块三动画*/
.animate-bg-03 {
	position: absolute;
	left: 75px;
	top: 106px;
	width: 496px;
	height: 340px;
	background: url(../images/animate-bg-03.png) no-repeat center;
	animation: animate02translateY1 1s ease-in 100ms both;
}
.monitor-part-03,.monitor-part-02,.monitor-part-01 {
	position: relative;
}
.animate-bg-div>div {
	position: absolute;
}
.animate-bg-03-blue-circle {
	left: 152px;
	top: 56px;
	width: 87px;
	height: 59px;
	background: url(../images/animate-bg-03-blue-circle.png) no-repeat center;
	animation: animate02translateY1 2s 100ms ;
	
}
.animate-bg-03-blue-light {
	left: 115px;
	top: 36px;
	width: 162px;
	height: 58px;
	/*opacity: 0;
	filter:alpha(opacity=0);*/
	background: url(../images/animate-bg-03-blue-light.png) no-repeat center;
	animation: animateopacity1 2s 2100ms both;
}
.animate-bg-03-blue-border {
	left: 142px;
	top: 41px;
	width: 107px;
	height: 107px;
	border: 3px solid #87d7ff;
	border-radius: 50%;
	transform:  rotateX(58deg);
	animation: animateopacity1 2s 1100ms both;
	
}
.animate-bg-03-blue-border1,.animate-bg-03-blue-border2,.animate-bg-03-blue-border3 {
	left: 142px;
	top: 41px;
	width: 107px;
	height: 107px;
	border: 3px solid #87d7ff;
	border-radius: 50%;
	transform:  rotateX(58deg);

}
.animate-bg-03-blue-border1 {
	animation: animatetranslateY1 1.5s 1100ms both infinite;
}
.animate-bg-03-blue-border2 {
	animation: animatetranslateY1 1.5s 1600ms both infinite;
}
.animate-bg-03-blue-border3 {
	animation: animatetranslateY1 1.5s 2100ms both infinite;
}
.animate-bg-03-yellow-circle {
	left: 291px;
	top: 148px;
	width: 87px;
	height: 59px;
	background: url(../images/animate-bg-03-yellow-circle.png) no-repeat center;
	animation: animate02translateY1 2s 1500ms both;
}
.animate-bg-03-yellow-light {
	left: 256px;
	top: 133px;
	width: 156px;
	height: 63px;
	background: url(../images/animate-bg-03-yellow-light.png) no-repeat center;
	animation: animateopacity1 2s 3000ms both;
}
.animate-bg-03-yellow-border {
	left: 280px;
	top: 134px;
	width: 107px;
	height: 107px;
	border: 3px solid #f7e78e;
	border-radius: 50%;
	transform:  rotateX(58deg);
	animation: animateopacity1 2s 3000ms both;
	
}
.animate-bg-03-yellow-border1,.animate-bg-03-yellow-border2,.animate-bg-03-yellow-border3 {
	left: 280px;
	top: 134px;
	width: 107px;
	height: 107px;
	border: 3px solid #f7e78e;
	border-radius: 50%;
	transform:  rotateX(58deg);

}
.animate-bg-03-yellow-border1 {
	animation: animatetranslateY1 1.5s 3100ms both infinite;
}
.animate-bg-03-yellow-border2 {
	animation: animatetranslateY1 1.5s 3600ms both infinite;
}
.animate-bg-03-yellow-border3 {
	animation: animatetranslateY1 1.5s 4100ms both infinite;
}
.animate-bg-div {
	position: absolute;
}

/*区块三动画end*/
.monitor-part-title {
	margin-bottom: 22px;
	height:32px;
	line-height: 32px;
	font-size: 32px;
	color: #333333;
}
.monitor-part-introduce {
	width: 370px;
	line-height: 32px;
	font-size: 16px;
	color: #666666;
}
.monitor-part-02 .monitor-part-introduce {
	margin-bottom: 18px;
	width: 465px;
}
.function-table{
	width: 476px;
	/*border: 1px solid #d3d3d3;*/
}
.function-table th {
	width: 50%;
	line-height: 40px;
	background-color: #f0f0f0;
	font-size: 14px;
	border: 1px solid #d3d3d3;
	color: #666666;
}
.function-table th:first-child {
	border-right: none;
}
.function-table td {
	width: 50%;
	line-height: 40px;
	text-align: center;
	border: 1px solid #d3d3d3;
	border-top: none;
	background-color: #fff;
	font-size: 12px;
	color: #666666;
}
.function-table tr td:first-child {
	border-right: none;
}
/*ie兼容*/
.animate-bg-02>div,.animate-bg-02-under>div,.animate-bg-03>div {
	display: none\9;
}
.animate-bg-02 {
	background: url(../images/monitor_part_bg_02.png) no-repeat center 20px\9;
}
.animate-bg-03 {
	background: url(../images/monitor_part_bg_03.png) no-repeat center 20px\9;
}