.net-safety-box{position:relative;/*background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/net_safet_whole_bg.jpg) no-repeat center;background-size:100%;*/}
.net-black-div-box{z-index:1;width:775px;height:457px;top:267px;left:187px;position:absolute;background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/net_black_bg.png) no-repeat center}
.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-title{margin-top:10px;font-size:50px;color:#fff}
.net-safety-intro-txt {font-size:20px;color:#fff;padding-top:10px;}
.net-safety-more-link{display:block;border:2px 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-animate-wrapper{transform:scale(.8);-webkit-transform:scale(.8);-moz-transform:scale(.8);}

@media only screen and (min-width:1400px){
.net-safety-animate-wrapper{position:absolute;top:-88px;right:-40px;width:909px;height:686px;}
}
.net-safety-animate-wrapper{position:absolute;top:50%;margin-top:-343px;right:3%;width:909px;height:686px;z-index: 99;}

.net-safety-animate-wrapper-bg-01{position:absolute;z-index:3;top:0;left:0;width:909px;height:686px;background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/net_safety_animate_wrapper_bg_01.png)}
.net-safety-animate-wrapper-bg-02{position:absolute;z-index:1;top:0;left:0;width:909px;height:686px;background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/net_safety_animate_wrapper_bg_02.png)}
.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(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_empty_box.png) no-repeat center}
	15%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_box.png) no-repeat center}
	30%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_box.png) no-repeat center}
	45%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_box.png) no-repeat center}
	60%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_light_box.png) no-repeat center}
	85%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_light_box.png) no-repeat center}
	100%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_box.png) no-repeat center}
}
@keyframes storage-animate2{0%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_empty_box.png) no-repeat center}
	15%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_empty_box.png) no-repeat center}
	30%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_box.png) no-repeat center}
	45%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_box.png) no-repeat center}
	60%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_light_box.png) no-repeat center}
	85%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_light_box.png) no-repeat center}
	100%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_box.png) no-repeat center}
}
@keyframes storage-animate3{0%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_empty_box.png) no-repeat center}
	15%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_empty_box.png) no-repeat center}
	30%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_empty_box.png) no-repeat center}
	45%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_box.png) no-repeat center}
	60%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_light_box.png) no-repeat center}
	85%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_light_box.png) no-repeat center}
	100%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_box.png) no-repeat center}
}
.storage-animate-item{width:78px;height:115px;background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/storage_box.png) no-repeat center}
.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(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/safe_animate_06.png) no-repeat center}
@keyframes safe-animate{0%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/safe_animate_01.png) no-repeat center}
12.5%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/safe_animate_02.png) no-repeat center}
25%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/safe_animate_03.png) no-repeat center}
37.5%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/safe_animate_04.png) no-repeat center}
50%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/safe_animate_05.png) no-repeat center}
62.5%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/safe_animate_06.png) no-repeat center}
75%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/safe_animate_07.png) no-repeat center}
87.5%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/safe_animate_07.png) no-repeat center}
100%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/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(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/server_animate_04.png) no-repeat center}
@keyframes server-animate{0%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/server_animate_01.png) no-repeat center}
15%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/server_animate_02.png) no-repeat center}
30%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/server_animate_03.png) no-repeat center}
45%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/server_animate_04.png) no-repeat center}
67.5%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/server_animate_05.png) no-repeat center}
100%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/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(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/net_connect_move.png) no-repeat center}
.net-connect-animate-btn{position:absolute;z-index:19;bottom:30px;left:511px;width:180px;height:180px}
.connect-bg-01{position:absolute;z-index:8;bottom:0;left:366px;width:405px;height:286px;background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/connect_bg_01.png) no-repeat center}
.connect-bg-02{position:absolute;z-index:1;bottom:0;left:366px;width:405px;height:286px;background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/connect_bg_02.png) no-repeat center}
/*
@keyframes net-move{from{transform:translate(-165.454px,-100px)}
70%{transform:translate(0,0);background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/net_connect_move.png) no-repeat center}
80%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/net_connect_move_light.png) no-repeat center}
90%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/net_connect_move_light.png) no-repeat center}
100%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/net_connect_move.png) no-repeat center}
}*/
.net-connect-animate-box.active{-webkit-animation:net-move 4s;-moz-animation:net-move 4s}
.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}
/*@keyframes yellow-light{0%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/yellow_light_01.png) no-repeat center}
25%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/yellow_light_02.png) no-repeat center}
75%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/yellow_light_02.png) no-repeat center}
100%{background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/yellow_light_01.png) no-repeat center}
}
.yellow-light{position:absolute;width:52px;height:35px;background:url(img/yellow_light_01.png) no-repeat center}*/
.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(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/net_safety_text_new_01.png) no-repeat center}
.net-safety-text2{width:77px;height:77px;top:222px;left:413px;background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/net_safety_text_new_02.png) no-repeat center}
.net-safety-text3{top:223px;left:739px;background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/net_safety_text_new_03.png) no-repeat center}
.net-safety-text4{top:429px;left:473px;background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/net_safety_text_new_04.png) no-repeat center}
.net-safety-light-circle{position:absolute;width:16px;height:12px;background:url(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/net-light-point.png) no-repeat center;box-shadow:0 1px 3px 5px rgba(46,109,169,.1);border-radius:50%}
@keyframes circle-animate01{from{transform:translate(60px,38.4px);opacity:.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(https://xgx2site.oss-accelerate.aliyuncs.com/xgxian.com/images/net_safety_block_last.png) no-repeat center;}



@media (max-width: 1200px){
.net-safety-intro-title{font-size:36px}

}
@media (max-width:780px){
.net-safety-intro-title{font-size:20px;line-height:28px;}
.net-safety-animate-wrapper {margin-top: -243px;right: -15%;}
}