/*网络品质安全*/
.net-safety-box {
	position: relative;
	padding-top: 90px;
	height: 905px;
	/* background: url(../img/dh/net_safet_whole_bg.jpg) no-repeat center; */
	background-repeat: no-repeat;
	background-position: center;
}
.net-black-div-box {
	z-index: 1;
	width: 775px;
	height: 457px;
	top: 267px;
	left: 187px;
	position: absolute;
	/* background: url(../img/dh/net_black_bg.png) no-repeat center; */
	background: url(../img/xb.png) no-repeat;
	/* background-repeat: no-repeat; */
	background-position: -1915px 0;
}
.net-safety-title {
	margin-bottom: 26px;
	font-size: 32px;
	line-height: 32px;
	text-align: center;
	color: #fff;
}
.net-safety-explain {
	margin-bottom: 100px;
	font-size: 16px;
	line-height: 16px;
	text-align: center;
	color: #999;
}

.net-safety-intro-wrapper {
	margin-bottom: 40px;
}
.net-safety-intro-div {
	padding-left: 50px;
	height: 120px;
	width: 340px;
}
.net-safety-intro-title {
	margin-bottom: 8px;
	padding-left: 8px;
	height: 18px;
	line-height: 18px;
	font-size: 18px;
	color: #fff;
}
.net-safety-intro-subtitle {
	position: relative;
	display: inline-block;
	padding: 0 30px 0 8px;
	height: 42px;
	line-height: 42px;
	font-size: 32px;
	color: #999999;
}
.net-safety-subtitle-line {
	position: absolute;
	z-index: 8;
	left: 0;
	top: 1px;
	width: 100%;
	height: 1px;
	background: #36373e;
}
.net-safety-subtitle-dot {
	position: absolute;
	z-index: 9;
	left: 0px;
	top: 0px;
	width: 4px;
	height: 3px;
	background-color: #89898e;
}
.net-safety-more-link {
	display: block;
	border: 1px solid #919295;
	width: 172px;
	height: 38px;
	line-height: 38px;
	font-size: 14px;
	background-color: transparent;
	color: #fff;
	text-align: center;
}
.net-safety-more-link:hover {
	border-color: #fff;
	background-color: #fff;
	color: #333;
}

/*网络安全动画*/
.net-safety-box .auto {
	position: relative;
}
.net-safety-animate-wrapper {
	position: absolute;
	right: -140px;
	/* left: 50%;
	transform: translate(-50%, -40px); */
	width: 909px;
	height: 686px;
}
@media only screen and (min-width: 1400px) {
	.net-safety-animate-wrapper {
		position: absolute;
		width: 909px;
		height: 686px;
	}
}
@media only screen and (min-width: 1600px) {
	.net-safety-animate-wrapper {
		position: absolute;
		width: 909px;
		height: 686px;
	}
}

.net-safety-animate-wrapper-bg-01 {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: 909px;
	height: 686px;
	/* background: url(../img/dh/net_safety_animate_wrapper_bg_01.png); */
	background: url(../img/xb.png);
	background-position: -3771px 0;
}
.net-safety-animate-wrapper-bg-02 {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 909px;
	height: 686px;
	/* background: url(../img/dh/net_safety_animate_wrapper_bg_02.png); */
	background: url(../img/xb.png);
	background-position: -2690px 0;
}
.animate-inner-box,.animate-item {
	position: absolute;
}
/*数据存储动画*/
.storage-animate-box {
	position: absolute;
	z-index: 9;
	top: 97px;
	left: 582px;
	width: 180px;
	height: 180px;
}
@keyframes storage-animate1{
	0%{
		background: url(../img/dh/storage_empty_box.png) no-repeat center;
	}
	15%{
		background: url(../img/dh/storage_box.png) no-repeat center;
	}
	30%{
		background: url(../img/dh/storage_box.png) no-repeat center;
	}
	45%{
		background: url(../img/dh/storage_box.png) no-repeat center;
	}
	60%{
		background: url(../img/dh/storage_light_box.png) no-repeat center;
	}
	85%{
		background: url(../img/dh/storage_light_box.png) no-repeat center;
	}
	100%{
		background: url(../img/dh/storage_box.png) no-repeat center;
	}
}
@keyframes storage-animate2{
	0%{
		background: url(../img/dh/storage_empty_box.png) no-repeat center;
	}
	15%{
		background: url(../img/dh/storage_empty_box.png) no-repeat center;
	}
	30%{
		background: url(../img/dh/storage_box.png) no-repeat center;
	}
	45%{
		background: url(../img/dh/storage_box.png) no-repeat center;
	}
	60%{
		background: url(../img/dh/storage_light_box.png) no-repeat center;
	}
	85%{
		background: url(../img/dh/storage_light_box.png) no-repeat center;
	}
	100%{
		background: url(../img/dh/storage_box.png) no-repeat center;
	}
}
@keyframes storage-animate3{
	0%{
		background: url(../img/dh/storage_empty_box.png) no-repeat center;
	}
	15%{
		background: url(../img/dh/storage_empty_box.png) no-repeat center;
	}
	30%{
		background: url(../img/dh/storage_empty_box.png) no-repeat center;
	}
	45%{
		background: url(../img/dh/storage_box.png) no-repeat center;
	}
	60%{
		background: url(../img/dh/storage_light_box.png) no-repeat center;
	}
	85%{
		background: url(../img/dh/storage_light_box.png) no-repeat center;
	}
	100%{
		background: url(../img/dh/storage_box.png) no-repeat center;
	}
}
.storage-animate-item {
	width: 78px;
	height: 115px;
	/* background: url(../img/dh/storage_box.png) no-repeat center; */
	background: url(../img/xb.png) no-repeat;
	/* background-repeat: no-repeat; */
	background-position: -210px 0;
}
.storage-animate-item-01 {
	top: 0;
	left: 0;
}
.storage-animate-item-02 {
	top: 36px;
	left: 52px;
}
.storage-animate-item-03 {
	top: 67px;
	left: 106px;
}
.storage-animate-box.active .storage-animate-item-01{
	animation: storage-animate1 3s both;
}
.storage-animate-box.active .storage-animate-item-02{
	animation: storage-animate2 3s both;
}
.storage-animate-box.active .storage-animate-item-03{
	animation: storage-animate3 3s both;
}
.storage-animate-box.reverse .storage-animate-item-01{
	animation: storage-animate1 3s  reverse;
}
.storage-animate-box.reverse .storage-animate-item-02{
	animation: storage-animate2 3s  reverse;
}
.storage-animate-box.reverse .storage-animate-item-03{
	animation: storage-animate3 3s  reverse;
}
/*数据安全动画*/
.safe-animate-box {
	z-index: 9;
	top: 242px;
	left: 116px;
	width: 396px;
	height: 315px;
	/* background: url(../img/dh/safe_animate_06.png) no-repeat center; */
	background: url(../img/xb.png) no-repeat center;
	background-position: -709px 0;
}
@keyframes safe-animate{
	0%{
		background: url(../img/dh/safe_animate_01.png) no-repeat center;
	}
	12.5%{
		background: url(../img/dh/safe_animate_02.png) no-repeat center;
	}
	25%{
		background: url(../img/dh/safe_animate_03.png) no-repeat center;
	}
	37.5%{
		background: url(../img/dh/safe_animate_04.png) no-repeat center;
	}
	50%{
		background: url(../img/dh/safe_animate_05.png) no-repeat center;
	}
	62.5%{
		background: url(../img/dh/safe_animate_06.png) no-repeat center;
	}
	75%{
		background: url(../img/dh/safe_animate_07.png) no-repeat center;
	}
	87.5%{
		background: url(../img/dh/safe_animate_07.png) no-repeat center;
	}
	100%{
		background: url(../img/dh/safe_animate_06.png) no-repeat center;
	}
}
.safe-animate-box.active {
	animation: safe-animate 3s both;
}
.safe-animate-box.reverse {
	animation: safe-animate 3s both reverse;
}

/*服务器动画*/
.server-animate-box {
	z-index: 9;
	top: 139px;
	left: 107px;
	width: 204px;
	height: 260px;
	background: url(../img/dh/server_animate_04.png) no-repeat center;
	/* background: url(../img/xb.png) no-repeat; */
	/* background-repeat: no-repeat; */
	/* background-position: -1611px 0; */
}
@keyframes server-animate{
	0%{
		background: url(../img/dh/server_animate_01.png) no-repeat center;
	}
	15%{
		background: url(../img/dh/server_animate_02.png) no-repeat center;
	}
	30%{
		background: url(../img/dh/server_animate_03.png) no-repeat center;
	}
	45%{
		background: url(../img/dh/server_animate_04.png) no-repeat center;
	}
	67.5%{
		background: url(../img/dh/server_animate_05.png) no-repeat center;
	}
	100%{
		background: url(../img/dh/server_animate_04.png) no-repeat center;
	}
}
.server-animate-box.active{
	animation: server-animate 3s;
}
.server-animate-box.reverse{
	animation: server-animate 3s both reverse;
}

/*网络连通动画*/
.net-connect-animate-box {
	z-index: 2;
	left: 290px;
	top: 0;
	width: 500px;
	height: 686px;
	background: url(../img/dh/net_connect_move.png) no-repeat center;
	/* background: url(../img/xb.png) no-repeat; */
	/* background-repeat: no-repeat; */
	/* background-position: -6580px 0; */
}
/*由于图片被覆盖了,要做出效果,模拟hover,需要添加一个块*/
.net-connect-animate-btn {
	position: absolute;
	z-index: 19;
	bottom: 30px;
	left: 511px;
	width: 180px;
	height: 180px;
	/*background-color: #ccc;*/
}

.connect-bg-01 {
	position: absolute;
	z-index: 8;
	bottom: 0;
	left: 366px;
	width: 405px;
	height: 286px;
	/* background: url(../img/dh/connect_bg_01.png) no-repeat center; */
	background: url(../img/xb.png) no-repeat;
	/* background-repeat: no-repeat;*/
	background-position: -1510px 0;
}
.connect-bg-02 {
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 366px;
	width: 405px;
	height: 286px;
	/* background: url(../img/dh/connect_bg_02.png) no-repeat center; */
	background: url(../img/xb.png) no-repeat;
	/* background-repeat: no-repeat; */
	background-position: -1105px 0;
}

@keyframes net-move{
	from{
		transform: translate(-165.454px,-100px);
	}
	70%{
		transform: translate(0,0);
		background: url(../img/dh/net_connect_move.png) no-repeat center;
	}
	80% {
		background: url(../img/dh/net_connect_move_light.png) no-repeat center;
	}
	90% {
		background: url(../img/dh/net_connect_move_light.png) no-repeat center;
	}
	100% {
		background: url(../img/dh/net_connect_move.png) no-repeat center;
	}
}
.net-connect-animate-box.active {
	-webkit-animation: net-move 4s;
	-moz-animation: net-move 4s;
	/*animation: none＼9;*/
}
.net-connect-animate-box.reverse {
	animation: net-move 4s both reverse;
}
/*闪光灯*/
.yellow-light-wrapper {
	z-index: 99;
	position: absolute;
	top: 410px;
	left: 156px;
	width: 168px;
	height: 202px;
	/*background: #ccc;*/
}
@keyframes yellow-light{
	0%{
	background: url(../img/dh/yellow_light_01.png) no-repeat center;

	}
	25%{
	background: url(../img/dh/yellow_light_02.png) no-repeat center;
	}
	75%{
	background: url(../img/dh/yellow_light_02.png) no-repeat center;
	}
	100%{
	background: url(../img/dh/yellow_light_01.png) no-repeat center;

	}
}
.yellow-light {
	position: absolute;
	width: 52px;
	height: 35px;
	/* background: url(../img/dh/yellow_light_01.png) no-repeat center; */
	background: url(../img/xb.png) no-repeat;
	/* background-repeat: no-repeat; */
	background-position: -16px 0;
}
.yellow-light-01 {
	top: 0;
	left: 0;
}
.yellow-light-02 {
	top: 33px;
	left: 57px;
}
.yellow-light-03 {
	top: 66px;
	left: 115px;
}
.yellow-light-wrapper.active .yellow-light-01{
	animation: yellow-light 3s ;
}
.yellow-light-wrapper.active .yellow-light-02{
	animation: yellow-light 3s 1s ;
}
.yellow-light-wrapper.active .yellow-light-03{
	animation: yellow-light 3s 2s ;
}
.yellow-light-wrapper.reverse .yellow-light-01{
	animation: yellow-light 3s reverse;
}
.yellow-light-wrapper.reverse .yellow-light-02{
	animation: yellow-light 3s 1s reverse;
}
.yellow-light-wrapper.reverse .yellow-light-03{
	animation: yellow-light 3s 2s reverse;
}
/*文字*/
.net-safety-text {
	z-index: 12;
	position: absolute;
	width: 87px;
	height: 83px;
}
.net-safety-text1 {
	top: 133px;
	left: 133px;
	/* background: url(../img/dh/net_safety_text_new_01.png) no-repeat center; */
	background: url(../img/xb.png) no-repeat;
	/* background-repeat: no-repeat; */
	background-position: -462px 0;
}
.net-safety-text2 {
	width: 77px;
	height: 77px;
	top: 222px;
	left: 413px;
	/* background: url(../img/dh/net_safety_text_new_02.png) no-repeat center; */
	background: url(../img/xb.png) no-repeat;
	/* background-repeat: no-repeat; */
	background-position: -133px 0;
}
.net-safety-text3 {
	top: 223px;
	left: 739px;
	/* background: url(../img/dh/net_safety_text_new_03.png) no-repeat center; */
	background: url(../img/xb.png) no-repeat;
	/* background-repeat: no-repeat; */
	background-position: -375px 0;
}
.net-safety-text4 {
	top: 429px;
	left: 473px;
	/* background: url(../img/dh/net_safety_text_new_04.png) no-repeat center; */
	background: url(../img/xb.png) no-repeat;
	/* background-repeat: no-repeat; */
	background-position: -288px 0;
}
.net-safety-text5 {
	top: 477px;
    left: 292px;
	height: 69px;
    width: 65px;
	/* background: url(../img/dh/net_safety_text_new_05.png) no-repeat center; */
	background: url(../img/xb.png) no-repeat;
	/* background-repeat: no-repeat; */
	background-position: -68px 0;
	z-index: 160;
}

/*小光点*/
.net-safety-light-circle {
	position: absolute;
	width: 16px;
	height: 12px;
	/* background: url(../img/dh/net-light-point.png) no-repeat center; */
	background: url(../img/xb.png) no-repeat;
	/* background-repeat: no-repeat; */
	background-position: 0 0;
	box-shadow: 0 1px 3px 5px rgba(46,109,169,.1);
	border-radius: 50%;
}
@keyframes circle-animate01{
	from{
		transform: translate(60px,38.4px);
		opacity: 0.4;
	}
	to{
		transform: translate(0,0);
		opacity: 1;
	}
}
.light-circle-01 {
	z-index: 2;
	top: 300px;
	left: 249px;
	animation: circle-animate01 4s ease-in alternate infinite;
}
@keyframes circle-animate02{
	0%{
		transform: translate(0,0);
		opacity: 0;
	}
	20%{
		transform: translate(0,0);
		opacity: 1;

	}
	40%{
		transform: translate(37px,23px);
	}
	70%{
		transform: translate(4px,43px);
	}
	100%{
		transform: translate(44px,75px);
	}
}
.light-circle-02 {
	z-index: 8;
	top: 405px;
	left: 451px;
	animation: circle-animate02 5s ease-in alternate infinite;
}
@keyframes circle-animate03{
	0%{
		transform: translate(0,0);
		opacity: 0;
	}
	20%{
		transform: translate(0,0);
		opacity: 1;

	}
	40%{
		transform: translate(-16px,11px);
	}
	70%{
		transform: translate(-64px,-14px);
	}
	90%{
		opacity: 1;
		transform: translate(-120px,16px);
	}
	100%{
		transform: translate(-120px,16px);
		opacity: 0;
	}
}
.light-circle-03 {
	z-index: 8;
	top: 433px;
	left: 377px;
	animation: circle-animate03 5.4s ease-in alternate infinite;
}
@keyframes circle-animate04{
	0%{
		transform: translate(0,0);
		opacity: 0;
	}
	20%{
		transform: translate(0,0);
		opacity: 1;

	}
	40%{
		transform: translate(-18px,12px);
	}
	70%{
		transform: translate(28px,39px);
	}
	90%{
		opacity: 1;
		transform: translate(-28px,71px);
	}
	100%{
		opacity: 0;
		transform: translate(-28px,71px);

	}
}
.light-circle-04 {
	z-index: 8;
	top: 378px;
	left: 284px;
	animation: circle-animate04 5.4s ease-in alternate infinite;
}
@keyframes circle-animate05{
	0%{
		transform: translate(0,0);
		opacity: 0;
	}
	20%{
		transform: translate(0,0);
		opacity: 1;

	}
	40%{
		transform: translate(-97px,60px);
	}
	70%{
		transform: translate(-34px,97px);
	}
	90% {
		opacity: 1;
	}
	95% {
		opacity: 0;
	}
	100%{
		transform: translate(-91px,130px);
		opacity: 0;
	}
}
.light-circle-05 {
	z-index: 2;
	top: 208px;
	left: 585px;
	animation: circle-animate05 6.4s ease-in alternate infinite;
}
@keyframes circle-animate06{
	0%{
		transform: translate(0,0);
		opacity: 0;
	}
	20%{
		transform: translate(0,0);
		opacity: 1;

	}
	39%{
		transform: translate(-61px,37px);
		opacity: 1;
	}
	40% {
		opacity: 0;
	}
	41%{
		transform: translate(-114px,13px);
	}
	42%{
		opacity: 0;

		transform: translate(-146px,29px);
	}
	70%{
		opacity: 0;
		transform: translate(-83px,66px);
	}
	71% {
		opacity: 0;
	}
	95% {
		opacity: 0;
	}
	100%{
		transform: translate(-140px,99px);
		opacity: 0;
	}
}
.light-circle-06 {
	z-index: 2;
	top: 239px;
	left: 634px;
	animation: circle-animate06 6.4s ease-in alternate infinite;
}
@keyframes circle-animate07{
	0%{
		transform: translate(0,0);
		opacity: 0;
	}
	20%{
		transform: translate(0,0);
		opacity: 1;
	}
	30%{
		transform: translate(-79px,47px);
	}
	45%{
		transform: translate(-45px,68px);
	}
	50%{
		transform: translate(-61px,77px);
	}
	70%{
		opacity: 1;
		transform: translate(-137px,32px);
	}
	71% {
		opacity: 0;
	}
	95% {
		opacity: 0;
	}
	100%{
		transform: translate(-194px,65px);
		opacity: 0;
	}
}
.light-circle-07 {
	z-index: 2;
	top: 273px;
	left: 688px;
	animation: circle-animate07 6.4s ease-in alternate infinite;
}
.net-safety-last-block {
	position: absolute;
	z-index: 19;
	top: 233px;
	left: 495px;
	width: 159px;
	height: 112px;
	/* background: url(../img/dh/net_safety_block_last.png) no-repeat center; */
	background: url(../img/xb.png) no-repeat;
	background-position: -550px 0;
}
/*网络品质安全end*/