@charset "utf-8";
/* 首页样式 */

/* 首页布局 */
body{ background:#0581b2; }
.num_box { position: relative;}
.num { color: #fff; font-size: 50px; width: 100%; text-align: center; position: relative; background:url(../images/fullpage_bg.png) center center no-repeat ; /*background-position:50% 50%; background-size:contain;*/ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.fullpage_bg.jpg', sizingMethod='scale');}
/*.num p { position: absolute; top: 0; left: 50%; margin-left: -315px; background:#000; padding:3px 15px; opacity:0.6; filter:alpha(opacity=60) }*/
.num ul { width: 100%; position: absolute; left: 0; top: 0; height: 100%; }
.num ul li { float: left; height: 100%; position: relative; }
#num_0 { background: -url(../images/back1.png) no-repeat center #1875bc; background-size: 100% 100%; }
#num_1 { background: -url(../images/back2.png) no-repeat center #1875bc; background-size: 100% 100%; }
#num_2 { background: -url(../images/bac3.png) no-repeat center #1875bc; background-size: 100% 100%; }
#num_3 { background: -url(../images/bac1.png) no-repeat center #1875bc; background-size: 100% 100%; }
#num_4 { background: -url(../images/bac2.png) no-repeat center #1875bc; background-size: 100% 100%; }
#num_5 { background: -url(../images/bac3.png) no-repeat center #1875bc; background-size: 100% 100%; }
#num_6 { background: -url(../images/bac3.png) no-repeat center #1875bc; background-size: 100% 100%; }
#num_7 { background: #00F; }
#num_8 { background: #FF0; }
#num_9 { background: #F0F; }

/* page1 */
.main{ width:1100px; margin:0 auto; height:100%; position:absolute; left:0px; top:0px; right:0px; bottom:0px; /*background:url(../images/fullpage_bg.png) no-repeat; background-position:50% 50%; background-size:contain; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');*/}
.main_100{ width:100%; height:100%; position:absolute; left:0px; top:0px; right:0px; bottom:0px;}
.div_full{ background:rgba(0, 0, 0, 0.2); position:absolute; left:0px; top:0px; bottom:0px; right:0px; width:100%; height:100%; z-index:1;}
.video_img{ position:absolute; width:300px; height:240px; left:50%; margin-left:-150px; top:50%; margin-top:-50px;}
.page0_play{background:url(../images/windows_media_player_alt.png) center no-repeat; background-size:contain; position:absolute; left:50%; top:50%; margin-left:-64px;/* margin-top:366px;*/ width:128px; height:128px; display:inline-block; z-index:4;}
.page0_play:hover{ background:url(../images/windows_media_player_alt1.png); background-size:contain;}

/* 视频播放 */
.modal{position:absolute; left:0px; top:0px; bottom:0px; right:0px; background:rgba(0, 0, 0, 0.8); z-index:99; display:none;}
.modal_wrap{width:900px; height:500px; position:absolute; left:50%; top:50%; margin-top:-250px; margin-left:-450px;}
.exit_btn{ background:url(../images/exit_btn.png) 0px 0px no-repeat; width:36px; height:36px; display:block; position:absolute; right:30px; top:30px; opacity:0.3; filter:alpha(opacity=30); border:3px solid rgba(255, 255, 255, 0); 
transition:all 0.5s cubic-bezier(0.27,1.64,0.32,0.95) 0s; -o-transition:all 0.5s cubic-bezier(0.27,1.64,0.32,0.95) 0s; -ms-transition:all 0.5s cubic-bezier(0.27,1.64,0.32,0.95) 0s; -moz-transition:all 0.5s cubic-bezier(0.27,1.64,0.32,0.95) 0s; -webkit-transition:all 0.5s cubic-bezier(0.27,1.64,0.32,0.95) 0s;}
.exit_btn:hover{ /*background-position:0px -30px;*/ cursor:pointer; opacity:1; filter:alpha(opacity=100); border-radius:50%; -o-border-radius:50%; -ms-border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;
border-color:rgba(255, 255, 255, 1);
 transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg);}

/* 底部活动——微赞云搞大了    ,  底部降价活动*/
.adfree_wrap{  position:fixed; vertical-align:middle; bottom:0px; left:0px; right:0px; z-index:98; height:140px; line-height:70px;/*  background:#5678AE!important;  */filter:Alpha(opacity=60); background: url(../images/bann.png) center no-repeat ;}
.adfree { background: transparent url("../images/banner_tit.png") no-repeat scroll center center; height: 138px;margin: 0px auto;width:1060px;
display: inline-block;}
.adfree_wrap .exit_btn{ right:30px; top:50px;}

.num .title_h1, .num .bg{ position:absolute;}
.num .title_h1{ top:120px; left:0px; border-left:0px; z-index:4;}
.num .bg{ top:225px; right:20px; width:870px; height:412px;}
#num_2 .bg{ top:270px;}
#num_3 .bg, #num_4 .bg{ top:255px;}
/*.harddisk_wrap, .data_wrap, .environment_wrap, .safe_wrap, .close_wrap, .idle_wrap{  position: absolute; right: 50%; margin-left:-435px; top: 0; z-index:0;}*/
.num .title_h1{ left:50px; text-align:left;}
.title_h1 h1{ font-size:50px; font-weight:700; width:1100px;}
.title_h1 p{ font-size:18px; font-weight:400; line-height:32px; opacity:0.9; filter:alpha(opacity=90); text-shadow:0px 0px 1px rgb(51, 51, 51);}
.title_h1 span{ opacity:0; filter:alpha(opacity=0);}
#num_0 .title_h1{ text-align:center;}
#num_0 .title_h1 h1, #num_6 .title_h1 h1{ font-size:70px;}
#num_0 .title_h1{ margin-left:-45px;}
#num_0 .title_h1 .circle{ margin-left:45px;}
#num_0 .title_h1 p{ font-size:26px; line-height:36px;}
#num_6 .title_h1{ top:88px;}
#num_6 .title_h1 h1{ text-align:center; margin-left:-40px; font-size:48px; letter-spacing:0.06em;}



#num_1 .bg{ top:235px;}
.line { position: absolute; top: 160px; left: 50%; margin-left:-498px;	width: 128px; height: 6480px; background:url(../images/line.png) no-repeat left top; opacity: 0.8; *filter: alpha(opacity=80); -ms-filter: "alpha(opacity=80)";}
.circle { position: absolute; left: 0; top:-14px; width: 90px; height: 90px}
.circle div { position: absolute; top: 50%;	left: 50%;	background: rgba(255, 250, 188, 0.9); opacity:1; filter:alpha(opacity=100); width: 90px; height: 90px; margin-left: -45px; margin-top: -45px;	opacity: 1; border-radius: 90px; -webkit-border-radius: 90px; -moz-border-radius: 90px;
	-webkit-animation-duration: 1.2s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite;
	-ms-animation-duration: 1.2s; -ms-animation-timing-function: linear; -ms-animation-iteration-count: infinite;
	-moz-animation-duration: 1.2s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite;
	-o-animation-duration: 1.2s; -o-animation-timing-function: linear; -o-animation-iteration-count: infinite;
	animation-duration: 1.2s; animation-timing-function: linear; animation-iteration-count: infinite;}
.circle div.c1 { width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; opacity: 1; border-radius: 90px;}
.circle div.c2 {
	-webkit-animation-name: c2;	-webkit-animation-delay: .6s;
	-ms-animation-name: c2;	-ms-animation-delay: .6s;
	-moz-animation-name: c2; -moz-animation-delay: .6s;
	-o-animation-name: c2;	-o-animation-delay: .6s;
	animation-name: c2;	animation-delay: .6s;}
.circle div.c3 {
	-webkit-animation-name: c2;	-webkit-animation-delay: 1.2s;
	-ms-animation-name: c2;	-ms-animation-delay: 1.2s;
	-moz-animation-name: c2; -moz-animation-delay: 1.2s;
	-o-animation-name: c2; -o-animation-delay: 1.2s;
	animation-name: c2;	animation-delay: 1.2s;}
@-webkit-keyframes c2 {
0% {
	-webkit-transform: scale(.222);
	-ms-transform: scale(.222);
	-moz-transform: scale(.222);
	-o-transform: scale(.222);
	transform: scale(.222);
	opacity: 1
}
50% {
	-webkit-transform: scale(.622);
	-ms-transform: scale(.622);
	-moz-transform: scale(.622);
	-o-transform: scale(.622);
	transform: scale(.622);
	opacity: .4
}
98% {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	opacity: .2
}
100% {
	opacity: 0
}
}
@-ms-keyframes c2 {
	0% {
	-webkit-transform: scale(.222);
	-ms-transform: scale(.222);
	-moz-transform: scale(.222);
	-o-transform: scale(.222);
	transform: scale(.222);
	opacity: 1
}
50% {
	-webkit-transform: scale(.622);
	-ms-transform: scale(.622);
	-moz-transform: scale(.622);
	-o-transform: scale(.622);
	transform: scale(.622);
	opacity: .4
}
98% {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	opacity: .2
}
100% {
	opacity: 0
}
}
@-moz-keyframes c2 {
	0% {
	-webkit-transform: scale(.222);
	-ms-transform: scale(.222);
	-moz-transform: scale(.222);
	-o-transform: scale(.222);
	transform: scale(.222);
	opacity: 1
}
50% {
	-webkit-transform: scale(.622);
	-ms-transform: scale(.622);
	-moz-transform: scale(.622);
	-o-transform: scale(.622);
	transform: scale(.622);
	opacity: .4
}
98% {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	opacity: .2
}
100% {
	opacity: 0
}
}
@-o-keyframes c2 {
	0% {
	-webkit-transform: scale(.222);
	-ms-transform: scale(.222);
	-moz-transform: scale(.222);
	-o-transform: scale(.222);
	transform: scale(.222);
	opacity: 1
}
50% {
	-webkit-transform: scale(.622);
	-ms-transform: scale(.622);
	-moz-transform: scale(.622);
	-o-transform: scale(.622);
	transform: scale(.622);
	opacity: .4
}
98% {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	opacity: .2
}
100% {
	opacity: 0
}
}
@keyframes c2 {
	0% {
	-webkit-transform: scale(.222);
	-ms-transform: scale(.222);
	-moz-transform: scale(.222);
	-o-transform: scale(.222);
	transform: scale(.222);
	opacity: 1
}
50% {
	-webkit-transform: scale(.622);
	-ms-transform: scale(.622);
	-moz-transform: scale(.622);
	-o-transform: scale(.622);
	transform: scale(.622);
	opacity: .4
}
98% {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	opacity: .2
}
100% {
	opacity: 0
}
}

.harddisk_wrap div{ position:absolute; top:50%; left:50%; z-index:1; background:#fff; border-radius:100%; -webkit-border-radius:100%; -moz-border-radius:100%;}
.harddisk_wrap .harddisk_bg, .data_wrap .data_bg{ width:870px; height:412px; left: 0; top: 0; border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;}
.harddisk_wrap .harddisk_bg{ background:url(../images/back1.png) center center no-repeat;}
.data_wrap .data_bg{ background:url(../images/back2.png) center center no-repeat; }
.harddisk_wrap .harddisk1{}
.harddisk_wrap .harddisk2{ left:630px; top:320px;}
.harddisk_wrap .harddisk3{ left:110px; top:290px;}
.harddisk_wrap .harddisk4{ left:788px; top:112px;}
.harddisk_wrap div.circle_bg1, .harddisk_wrap div.circle_bg3, .harddisk_wrap div.circle_bg5, .harddisk_wrap div.circle_bg7{ opacity:0.7; filter:alpha(opacity=70);}
.harddisk_wrap div.circle_bg2, .harddisk_wrap div.circle_bg4, .harddisk_wrap div.circle_bg6, .harddisk_wrap div.circle_bg8{ opacity:0.5; filter:alpha(opacity=50);}
.harddisk_wrap div.circle_bg1{ width:260px; height:260px; margin-left:-130px; margin-top:-130px; -webkit-animation:2s part1; -moz-animation:2s part1; -o-animation:2s part1; animation:2s part1;}
.harddisk_wrap div.circle_bg2{ width:200px; height:200px; margin-left:-100px; margin-top:-100px; -webkit-animation:4s part2; -moz-animation:4s part2; -o-animation:4s part2; animation:4s part2;}
.harddisk_wrap div.circle_bg3{ width:156px; height:156px; margin-left:-78px; margin-top:-78px; -webkit-animation:6s part3; -moz-animation:6s part3; -o-animation:6s part3; animation:6s part3;}
.harddisk_wrap div.circle_bg4{ width:104px; height:104px; margin-left:-52px; margin-top:-52px; -webkit-animation:8s part4; -moz-animation:8s part4; -o-animation:8s part4; animation:8s part4;}
.harddisk_wrap div.circle_bg5{ width:136px; height:136px; margin-left:-68px; margin-top:-68px; -webkit-animation:10s part5; -moz-animation:10s part5; -o-animation:10s part5; animation:10s part5;}
.harddisk_wrap div.circle_bg6{ width:92px; height:92px; margin-left:-46px; margin-top:-46px; -webkit-animation:12s part6; -moz-animation:12s part6; -o-animation:12s part6; animation:12s part6;}
.harddisk_wrap div.circle_bg7{ width:76px; height:76px; margin-left:-38px; margin-top:-38px; -webkit-animation:14s part7; -moz-animation:14s part7; -o-animation:14s part7; animation:14s part7;}
.harddisk_wrap div.circle_bg8{ width:48px; height:48px; margin-left:-24px; margin-top:-24px; -webkit-animation:16s part8; -moz-animation:16s part8; -o-animation:16s part8; animation:16s part8;}
.harddisk_wrap img{ position:absolute; z-index:2;}
.harddisk_wrap .person1{ width:200px; height:290px; margin-left:-86px; margin-top:-130px;}

.harddisk_wrap .person2{ width:108px; height:156px; margin-left:-44px; margin-top:-78px;}
.harddisk_wrap .person3{ width:80px; height:116px; margin-left:-35px; margin-top:-44px;}
.harddisk_wrap .person4{ width:50px; height:70px; margin-left:-20px; margin-top:-35px;}
@-webkit-keyframes part1
{
	0%{ opacity:0;}
	50%{ opacity:0.4; height:130px; width:130px; margin-left:-65px; margin-top:-65px;}
	100%{ opacity:0.8; height:260px; width:260px; margin-left:-130px; margin-top:-130px;}
}
@-moz-keyframes part1
{
	0%{ opacity:0;}
	50%{ opacity:0.4; height:130px; width:130px; margin-left:-65px; margin-top:-65px;}
	100%{ opacity:0.8; height:260px; width:260px; margin-left:-130px; margin-top:-130px;}
}
@-o-keyframes part1
{
	0%{ opacity:0;}
	50%{ opacity:0.4; height:130px; width:130px; margin-left:-65px; margin-top:-65px;}
	100%{ opacity:0.8; height:260px; width:260px; margin-left:-130px; margin-top:-130px;}
}
@keyframes part1
{
	0%{ opacity:0;}
	50%{ opacity:0.4; height:130px; width:130px; margin-left:-65px; margin-top:-65px;}
	100%{ opacity:0.8; height:260px; width:260px; margin-left:-130px; margin-top:-130px;}
}

@-webkit-keyframes part2
{
	50%{ opacity:0;}
	75%{ opacity:0.4; height:100px; width:100px; margin-left:-50px; margin-top:-50px;}
	100%{ opacity:0.8; height:200px; width:200px; margin-left:-100px; margin-top:-100px;}
}
@-moz-keyframes part2
{
	50%{ opacity:0;}
	75%{ opacity:0.4; height:100px; width:100px; margin-left:-50px; margin-top:-50px;}
	100%{ opacity:0.8; height:200px; width:200px; margin-left:-100px; margin-top:-100px;}
}
@-o-keyframes part2
{
	50%{ opacity:0;}
	75%{ opacity:0.4; height:100px; width:100px; margin-left:-50px; margin-top:-50px;}
	100%{ opacity:0.8; height:200px; width:200px; margin-left:-100px; margin-top:-100px;}
}
@keyframes part2
{
	50%{ opacity:0;}
	75%{ opacity:0.4; height:100px; width:100px; margin-left:-50px; margin-top:-50px;}
	100%{ opacity:0.8; height:200px; width:200px; margin-left:-100px; margin-top:-100px;}
}

@-webkit-keyframes part3
{
	50.02%{ opacity:0;}
	83.34%{ opacity:0.4; height:78px; width:78px; margin-left:-39px; margin-top:-39px;}
	100%{ opacity:0.8; height:156px; width:156px; margin-left:-78px; margin-top:-78px;}
}
@-moz-keyframes part3
{
	50.02%{ opacity:0;}
	83.34%{ opacity:0.4; height:78px; width:78px; margin-left:-39px; margin-top:-39px;}
	100%{ opacity:0.8; height:156px; width:156px; margin-left:-78px; margin-top:-78px;}
}
@-o-keyframes part3
{
	50.02%{ opacity:0;}
	83.34%{ opacity:0.4; height:78px; width:78px; margin-left:-39px; margin-top:-39px;}
	100%{ opacity:0.8; height:156px; width:156px; margin-left:-78px; margin-top:-78px;}
}
@keyframes part3
{
	50.02%{ opacity:0;}
	83.34%{ opacity:0.4; height:78px; width:78px; margin-left:-39px; margin-top:-39px;}
	100%{ opacity:0.8; height:156px; width:156px; margin-left:-78px; margin-top:-78px;}
}

@-webkit-keyframes part4
{
	62.5%{ opacity:0;}
	87.5%{ opacity:0.4; height:52px; width:52px; margin-left:-26px; margin-top:-26px;}
	100%{ opacity:0.8; height:104px; width:104px; margin-left:-52px; margin-top:-52px;}
}
@-moz-keyframes part4
{
	62.5%{ opacity:0;}
	87.5%{ opacity:0.4; height:52px; width:52px; margin-left:-26px; margin-top:-26px;}
	100%{ opacity:0.8; height:104px; width:104px; margin-left:-52px; margin-top:-52px;}
}
@-o-keyframes part4
{
	62.5%{ opacity:0;}
	87.5%{ opacity:0.4; height:52px; width:52px; margin-left:-26px; margin-top:-26px;}
	100%{ opacity:0.8; height:104px; width:104px; margin-left:-52px; margin-top:-52px;}
}
@keyframes part4
{
	62.5%{ opacity:0;}
	87.5%{ opacity:0.4; height:52px; width:52px; margin-left:-26px; margin-top:-26px;}
	100%{ opacity:0.8; height:104px; width:104px; margin-left:-52px; margin-top:-52px;}
}

@-webkit-keyframes part5
{
	80%{ opacity:0;}
	90%{ opacity:0.4; height:68px; width:68px; margin-left:-34px; margin-top:-34px;}
	100%{ opacity:0.8; height:136px; width:136px; margin-left:-68px; margin-top:-68px;}
}
@-moz-keyframes part5
{
	80%{ opacity:0;}
	90%{ opacity:0.4; height:68px; width:68px; margin-left:-34px; margin-top:-34px;}
	100%{ opacity:0.8; height:136px; width:136px; margin-left:-68px; margin-top:-68px;}
}
@-o-keyframes part5
{
	80%{ opacity:0;}
	90%{ opacity:0.4; height:68px; width:68px; margin-left:-34px; margin-top:-34px;}
	100%{ opacity:0.8; height:136px; width:136px; margin-left:-68px; margin-top:-68px;}
}
@keyframes part5
{
	80%{ opacity:0;}
	90%{ opacity:0.4; height:68px; width:68px; margin-left:-34px; margin-top:-34px;}
	100%{ opacity:0.8; height:136px; width:136px; margin-left:-68px; margin-top:-68px;}
}

@-webkit-keyframes part6
{
	75.01%{ opacity:0;}
	91.67%{ opacity:0.4; height:46px; width:46px; margin-left:-23px; margin-top:-23px;}
	100%{ opacity:0.8; height:92px; width:92px; margin-left:-46px; margin-top:-46px;}
}
@-moz-keyframes part6
{
	75.01%{ opacity:0;}
	91.67%{ opacity:0.4; height:46px; width:46px; margin-left:-23px; margin-top:-23px;}
	100%{ opacity:0.8; height:92px; width:92px; margin-left:-46px; margin-top:-46px;}
}
@-o-keyframes part6
{
	75.01%{ opacity:0;}
	91.67%{ opacity:0.4; height:46px; width:46px; margin-left:-23px; margin-top:-23px;}
	100%{ opacity:0.8; height:92px; width:92px; margin-left:-46px; margin-top:-46px;}
}
@keyframes part6
{
	75.01%{ opacity:0;}
	91.67%{ opacity:0.4; height:46px; width:46px; margin-left:-23px; margin-top:-23px;}
	100%{ opacity:0.8; height:92px; width:92px; margin-left:-46px; margin-top:-46px;}
}

@-webkit-keyframes part7
{
	78.55%{ opacity:0;}
	92.85%{ opacity:0.4; height:38px; width:38px; margin-left:-19px; margin-top:-19px;}
	100%{ opacity:0.8; height:76px; width:76px; margin-left:-38px; margin-top:-38px;}
}
@-moz-keyframes part7
{
	78.55%{ opacity:0;}
	92.85%{ opacity:0.4; height:38px; width:38px; margin-left:-19px; margin-top:-19px;}
	100%{ opacity:0.8; height:76px; width:76px; margin-left:-38px; margin-top:-38px;}
}
@-o-keyframes part7
{
	78.55%{ opacity:0;}
	92.85%{ opacity:0.4; height:38px; width:38px; margin-left:-19px; margin-top:-19px;}
	100%{ opacity:0.8; height:76px; width:76px; margin-left:-38px; margin-top:-38px;}
}
@keyframes part7
{
	78.55%{ opacity:0;}
	92.85%{ opacity:0.4; height:38px; width:38px; margin-left:-19px; margin-top:-19px;}
	100%{ opacity:0.8; height:76px; width:76px; margin-left:-38px; margin-top:-38px;}
}

@-webkit-keyframes part8
{
	81.25%{ opacity:0;}
	93.75%{ opacity:0.4; height:24px; width:24px; margin-left:-12px; margin-top:-12px;}
	100%{ opacity:0.8; height:48px; width:48px; margin-left:-24px; margin-top:-24px;}
}
@-moz-keyframes part8
{
	81.25%{ opacity:0;}
	93.75%{ opacity:0.4; height:24px; width:24px; margin-left:-12px; margin-top:-12px;}
	100%{ opacity:0.8; height:48px; width:48px; margin-left:-24px; margin-top:-24px;}
}
@-o-keyframes part8
{
	81.25%{ opacity:0;}
	93.75%{ opacity:0.4; height:24px; width:24px; margin-left:-12px; margin-top:-12px;}
	100%{ opacity:0.8; height:48px; width:48px; margin-left:-24px; margin-top:-24px;}
}
@keyframes part8
{
	81.25%{ opacity:0;}
	93.75%{ opacity:0.4; height:24px; width:24px; margin-left:-12px; margin-top:-12px;}
	100%{ opacity:0.8; height:48px; width:48px; margin-left:-24px; margin-top:-24px;}
}

.data_wrap .data_circle_rbg, .data_wrap .data_circle_lbg{ width:336px; height:336px; position:absolute; top:50px; z-index:1;}
.data_wrap .data_circle_lbg{ left:0px;}
.data_wrap .data_circle_rbg{ right:0px;}
.data_wrap .back2_circle_l, .data_wrap .back2_circle_r{ width:336px; height:336px; position:absolute; left:50%; top:50%; margin-left:-168px; margin-top:-168px; background:url(../images/back2_circle.png) no-repeat;
	 -webkit-animation:4s data_pers; -moz-animation:4s data_pers; -o-animation:4s data_pers; animation:4s data_pers;}

@-webkit-keyframes data_pers
{
	0%{ opacity:0;}
	75%{ opacity:0.4; height:168px; width:168px; margin-left:-84px; margin-top:-84px;}
	100%{ opacity:0.8; height:336px; width:336px; margin-left:-168px; margin-top:-168px;}
}
@-moz-keyframes data_pers
{
	0%{ opacity:0;}
	75%{ opacity:0.4; height:168px; width:168px; margin-left:-84px; margin-top:-84px;}
	100%{ opacity:0.8; height:336px; width:336px; margin-left:-168px; margin-top:-168px;}
}
@-o-keyframes data_pers
{
	0%{ opacity:0;}
	75%{ opacity:0.4; height:168px; width:168px; margin-left:-84px; margin-top:-84px;}
	100%{ opacity:0.8; height:336px; width:336px; margin-left:-168px; margin-top:-168px;}
} 
@keyframes data_pers
{
	0%{ opacity:0;}
	75%{ opacity:0.4; height:168px; width:168px; margin-left:-84px; margin-top:-84px;}
	100%{ opacity:0.8; height:336px; width:336px; margin-left:-168px; margin-top:-168px;}
}
.data_person1, .data_person2{ width:328px; height:300px; position:absolute; z-index:2;}
.data_person1{ background:url(../images/data_person1.png) no-repeat; left:50px; top:60px;}
.data_person2{ background:url(../images/data_person2.png) no-repeat; width:346px; right:50px; top:18px;}
.eyes_person1, .eyes_person2{ background:url(../images/person_eyes.png) no-repeat; width:78px; height:40px; position:absolute; z-index:3;}
.eyes_person1{ left:142px; top:206px;}
.eyes_person2{ right:118px; top:172px;}
.eyes_animate1{ -webkit-animation:4s eyes1; -moz-animation:4s eyes1; -ms-animation:4s eyes1; -o-animation:4s eyes1; animation:4s eyes1;}
.eyes_animate2{ -webkit-animation:4s eyes2; -moz-animation:4s eyes2; -ms-animation:4s eyes2; -o-animation:4s eyes2; animation:4s eyes2;}
.hardl, .hardr{ width:122px; height:96px; position:absolute; z-index:5;}
.hardl{ background:url(../images/hard1.png) no-repeat;left:240px; top:264px;
 /*-webkit-animation:4s hard_roate infinite; -moz-animation:4s hard_roate infinite; -ms-animation:4s hard_roate infinite; -o-animation:4s hard_roate infinite; animation:4s hard_roate infinite;*/}
.hardr{ background:url(../images/hard2.png) no-repeat;right:260px; top:80px;}

@-webkit-keyframes eyes1
{
	0%{ left:142px;}
	12.5%{ left:132px;}
	25%{ left:152px;}
	37.5%{ left:132px;}
	50%{ left:152px;}
	37.5%{ left:132px;}
	50%{ left:152px;}
	62.5%{ left:132px;}
	75%{ left:152px;}
	87.5%{ left:132px;}
	100%{ left:152px;}
}
@-moz-keyframes eyes1
{
	0%{ left:142px;}
	12.5%{ left:132px;}
	25%{ left:152px;}
	37.5%{ left:132px;}
	50%{ left:152px;}
	37.5%{ left:132px;}
	50%{ left:152px;}
	62.5%{ left:132px;}
	75%{ left:152px;}
	87.5%{ left:132px;}
	100%{ left:152px;}
}
@-o-keyframes eyes1
{
	0%{ left:142px;}
	12.5%{ left:132px;}
	25%{ left:152px;}
	37.5%{ left:132px;}
	50%{ left:152px;}
	37.5%{ left:132px;}
	50%{ left:152px;}
	62.5%{ left:132px;}
	75%{ left:152px;}
	87.5%{ left:132px;}
	100%{ left:152px;}
}
@keyframes eyes1
{
	0%{ left:142px;}
	12.5%{ left:132px;}
	25%{ left:152px;}
	37.5%{ left:132px;}
	50%{ left:152px;}
	37.5%{ left:132px;}
	50%{ left:152px;}
	62.5%{ left:132px;}
	75%{ left:152px;}
	87.5%{ left:132px;}
	100%{ left:152px;}
}

@-webkit-keyframes eyes2
{
	0%{ right:118px;}
	12.5%{ right:108px;}
	25%{ right:128px;}
	37.5%{ right:108px;}
	50%{ right:128px;}
	37.5%{ right:108px;}
	50%{ right:128px;}
	62.5%{ right:108px;}
	75%{ right:128px;}
	87.5%{ right:108px;}
	100%{ right:128px;}
}
@-moz-keyframes eyes2
{
	0%{ right:118px;}
	12.5%{ right:108px;}
	25%{ right:128px;}
	37.5%{ right:108px;}
	50%{ right:128px;}
	37.5%{ right:108px;}
	50%{ right:128px;}
	62.5%{ right:108px;}
	75%{ right:128px;}
	87.5%{ right:108px;}
	100%{ right:128px;}
}
@-o-keyframes eyes2
{
	0%{ right:118px;}
	12.5%{ right:108px;}
	25%{ right:128px;}
	37.5%{ right:108px;}
	50%{ right:128px;}
	37.5%{ right:108px;}
	50%{ right:128px;}
	62.5%{ right:108px;}
	75%{ right:128px;}
	87.5%{ right:108px;}
	100%{ right:128px;}
}
@keyframes eyes2
{
	0%{ right:118px;}
	12.5%{ right:108px;}
	25%{ right:128px;}
	37.5%{ right:108px;}
	50%{ right:128px;}
	37.5%{ right:108px;}
	50%{ right:128px;}
	62.5%{ right:108px;}
	75%{ right:128px;}
	87.5%{ right:108px;}
	100%{ right:128px;}
}

.environment_bg{ background:url(../images/back3.png) center center no-repeat; width:870px; height:412px;}
.pos_centos, .pos_debian, .pos_mysql, .pos_php{ width:26px; height:36px; position:absolute;}
.pos_centos{ background:url(../images/icon_CentOS.png) no-repeat; background-size:contain; right:287px; top:238px;}
.pos_debian{ background:url(../images/icon_ubuntu.png) no-repeat; background-size:contain; left:290px; top:225px;}
.pos_mysql{ background:url(../images/icon_mysql.png) no-repeat; background-size:contain; height:56px; width:44px; left:134px; top:226px;}
.pos_nginx{ background:url(../images/icon_nginx.png) no-repeat; background-size:contain;  height:106px; width:82px; left:206px; top:228px; position:absolute;}
.pos_php{ background:url(../images/icon_php.png) no-repeat; background-size:contain; height:56px; width:43px; position:absolute; right:274px; top:246px;}
.pos_java{ background:url(../images/icon_java.png) no-repeat; background-size:contain; height:66px; width:51px; position:absolute; right:172px; top:222px;}
.icon_process{ background:url(../images/icon_process.png) no-repeat; background-size:contain; width:44px; height:34px; position:absolute; left:113px; top:302px;}
.icon_configuration{ background:url(../images/icon_configuration.png) no-repeat; background-size:contain; width:44px; height:50px; position:absolute; right:104px; top:306px;}
.icon_server1{ background:url(../images/icon_server1.png) no-repeat; background-size:contain; width:24px; height:34px; position:absolute; right:0px; top:320px;}
.icon_Internet{ background:url(../images/icon_Internet.png) no-repeat; background-size:contain; width:46px; height:38px; position:absolute; left:210px; top:310px;}

.php_animate{
	-webkit-animation: pos_environment 1.8s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	-ms-animation: pos_environment 1.8s ease-in-out;
	-ms-animation-fill-mode: forwards;
	-moz-animation: pos_environment 1.8s ease-in-out;
	-moz-animation-fill-mode: forwards;
	-o-animation: pos_environment 1.8s ease-in-out;
	-o-animation-fill-mode: forwards;
	animation: pos_environment 1.8s ease-in-out;
	animation-fill-mode: forwards;
	}
.nginx_animate{
	-webkit-animation: pos_environment 1.2s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	-ms-animation: pos_environment 1.2s ease-in-out;
	-ms-animation-fill-mode: forwards;
	-moz-animation: pos_environment 1.2s ease-in-out;
	-moz-animation-fill-mode: forwards;
	-o-animation: pos_environment 1.2s ease-in-out;
	-o-animation-fill-mode: forwards;
	animation: pos_environment 1.2s ease-in-out;
	animation-fill-mode: forwards;
	}
.mysql_animate{
	-webkit-animation: pos_environment 2.4s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	-ms-animation: pos_environment 2.4s ease-in-out;
	-ms-animation-fill-mode: forwards;
	-moz-animation: pos_environment 2.4s ease-in-out;
	-moz-animation-fill-mode: forwards;
	-o-animation: pos_environment 2.4s ease-in-out;
	-o-animation-fill-mode: forwards;
	animation: pos_environment 2.4s ease-in-out;
	animation-fill-mode: forwards;
	}
.java_animate{
	-webkit-animation: pos_environment 3.6s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	-ms-animation: pos_environment 3.6s ease-in-out;
	-ms-animation-fill-mode: forwards;
	-moz-animation: pos_environment 3.6s ease-in-out;
	-moz-animation-fill-mode: forwards;
	-o-animation: pos_environment 3.6s ease-in-out;
	-o-animation-fill-mode: forwards;
	animation: pos_environment 3.6s ease-in-out;
	animation-fill-mode: forwards;
	}
.pos_environment { display: block;}
@-webkit-keyframes pos_environment {
0% { opacity: 0;
	-webkit-transform: translateY(10px) scale(.4) translateZ(0);
	-ms-transform: translateY(10px) scale(.4) translateZ(0);
	-moz-transform: translateY(10px) scale(.4) translateZ(0);
	-o-transform: translateY(10px) scale(.4) translateZ(0);
	transform: translateY(10px) scale(.4) translateZ(0);
}
80% { opacity: .8;
	-webkit-transform: scale(1.1) translateZ(0);
	-ms-transform: scale(1.1) translateZ(0);
	-moz-transform: scale(1.1) translateZ(0);
	-o-transform: scale(1.1) translateZ(0);
	transform: scale(1.1) translateZ(0)
}
100% { opacity: 1;
	-webkit-transform: translateY(0) scale(1) translateZ(0);
	-ms-transform: translateY(0) scale(1) translateZ(0);
	-moz-transform: translateY(0) scale(1) translateZ(0);
	-o-transform: translateY(0) scale(1) translateZ(0);
	transform: translateY(0) scale(1) translateZ(0)
}
}
@-ms-keyframes pos_environment {
0% { opacity: 0;
	-webkit-transform: translateY(10px) scale(.4) translateZ(0);
	-ms-transform: translateY(10px) scale(.4) translateZ(0);
	-moz-transform: translateY(10px) scale(.4) translateZ(0);
	-o-transform: translateY(10px) scale(.4) translateZ(0);
	transform: translateY(10px) scale(.4) translateZ(0)
}
80% { opacity: .8;
	-webkit-transform: scale(1.1) translateZ(0);
	-ms-transform: scale(1.1) translateZ(0);
	-moz-transform: scale(1.1) translateZ(0);
	-o-transform: scale(1.1) translateZ(0);
	transform: scale(1.1) translateZ(0)
}
100% { opacity: 1;
	-webkit-transform: translateY(0) scale(1) translateZ(0);
	-ms-transform: translateY(0) scale(1) translateZ(0);
	-moz-transform: translateY(0) scale(1) translateZ(0);
	-o-transform: translateY(0) scale(1) translateZ(0);
	transform: translateY(0) scale(1) translateZ(0)
}
}
@-moz-keyframes pos_environment {
	0% {
	-webkit-transform: translateY(10px) scale(.4) translateZ(0);
	opacity: 0;
	-ms-transform: translateY(10px) scale(.4) translateZ(0);
	-moz-transform: translateY(10px) scale(.4) translateZ(0);
	-o-transform: translateY(10px) scale(.4) translateZ(0);
	transform: translateY(10px) scale(.4) translateZ(0)
}
80% {
	-webkit-transform: scale(1.1) translateZ(0);
	opacity: .8;
	-ms-transform: scale(1.1) translateZ(0);
	-moz-transform: scale(1.1) translateZ(0);
	-o-transform: scale(1.1) translateZ(0);
	transform: scale(1.1) translateZ(0)
}
100% {
	-webkit-transform: translateY(0) scale(1) translateZ(0);
	opacity: 1;
	-ms-transform: translateY(0) scale(1) translateZ(0);
	-moz-transform: translateY(0) scale(1) translateZ(0);
	-o-transform: translateY(0) scale(1) translateZ(0);
	transform: translateY(0) scale(1) translateZ(0)
}
}
@-o-keyframes pos_environment {
0% { opacity: 0;
	-webkit-transform: translateY(10px) scale(.4) translateZ(0);
	-ms-transform: translateY(10px) scale(.4) translateZ(0);
	-moz-transform: translateY(10px) scale(.4) translateZ(0);
	-o-transform: translateY(10px) scale(.4) translateZ(0);
	transform: translateY(10px) scale(.4) translateZ(0)
}
80% { opacity: .8;
	-webkit-transform: scale(1.1) translateZ(0);
	-ms-transform: scale(1.1) translateZ(0);
	-moz-transform: scale(1.1) translateZ(0);
	-o-transform: scale(1.1) translateZ(0);
	transform: scale(1.1) translateZ(0)
}
100% { opacity: 1;
	-webkit-transform: translateY(0) scale(1) translateZ(0);
	-ms-transform: translateY(0) scale(1) translateZ(0);
	-moz-transform: translateY(0) scale(1) translateZ(0);
	-o-transform: translateY(0) scale(1) translateZ(0);
	transform: translateY(0) scale(1) translateZ(0)
}
}
@keyframes pos_environment {
0% { opacity: 0;
	-webkit-transform: translateY(10px) scale(.4) translateZ(0);
	-ms-transform: translateY(10px) scale(.4) translateZ(0);
	-moz-transform: translateY(10px) scale(.4) translateZ(0);
	-o-transform: translateY(10px) scale(.4) translateZ(0);
	transform: translateY(10px) scale(.4) translateZ(0)
}
80% { opacity: .8;
	-webkit-transform: scale(1.1) translateZ(0);
	-ms-transform: scale(1.1) translateZ(0);
	-moz-transform: scale(1.1) translateZ(0);
	-o-transform: scale(1.1) translateZ(0);
	transform: scale(1.1) translateZ(0)
}
100% { opacity: 1;
	-webkit-transform: translateY(0) scale(1) translateZ(0);
	-ms-transform: translateY(0) scale(1) translateZ(0);
	-moz-transform: translateY(0) scale(1) translateZ(0);
	-o-transform: translateY(0) scale(1) translateZ(0);
	transform: translateY(0) scale(1) translateZ(0)
}
}


.safe_bg{ background:url(../images/back7.png) center no-repeat; width:870px; height:412px;}
.close_wrap{width:900px; height:480px;}
.close_bg{ background:url(../images/back5.png) top center no-repeat; width:900px; height:180px; margin-top:-86px;}
.bgp_person{ background:url(../images/bgp_person.png) no-repeat; width:246px; height:316px; margin-left:338px; position:relative; z-index:4;}
.dot_90{ filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);}
.dot_180{ filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);}
.dot_270 { filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg);}
.flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); filter:FlipH();}
.flipy { -moz-transform:scaleY(-1); -webkit-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); filter:FlipV();}

.pass_dot{ position:absolute;}
.pass_dot0{ width:67px; height:18px; background:url(../images/dot.png) center no-repeat; right:320px; bottom:90px; animation:2s dot infinite; -o-animation:2s dot infinite; -ms-animation:2s dot infinite; -moz-animation:2s dot infinite; -webkit-animation:2s dot infinite;}
.pass_dot1{background:url(../images/dot1.png) center no-repeat; right:336px; bottom:50px; width:50px; height:52px; 
animation:3s dot1 infinite; -o-animation:3s dot1 infinite; -ms-animation:3s dot1 infinite; -moz-animation:3s dot1 infinite; -webkit-animation:2s dot1 infinite;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
.pass_dot2{background:url(../images/dot2.png) center no-repeat; right:378px; bottom:36px; height:67px; width:18px; filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
animation:2s dot2 infinite; -o-animation:2s dot2 infinite; -ms-animation:2s dot2 infinite; -moz-animation:2s dot2 infinite; -webkit-animation:2s dot2 infinite;}
.pass_dot3{background:url(../images/dot3.png) center no-repeat; right:386px; bottom:51px; width:50px; height:52px;
animation:3s dot3 infinite; -o-animation:3s dot3 infinite; -ms-animation:3s dot3 infinite; -moz-animation:3s dot3 infinite; -webkit-animation:2s dot3 infinite;}
.pass_dot4{background:url(../images/dot4.png) center no-repeat; right:388px; bottom:92px; width:67px; height:18px;
animation:4s dot4 infinite; -o-animation:4s dot4 infinite; -ms-animation:4s dot4 infinite; -moz-animation:4s dot4 infinite; -webkit-animation:4s dot4 infinite;}
.pass_dot5{background:url(../images/dot5.png) center no-repeat; right:386px; bottom:100px; width:50px; height:52px; 
animation:2s dot5 infinite; -o-animation:2s dot5 infinite; -ms-animation:2s dot5 infinite; -moz-animation:2s dot5 infinite; -webkit-animation:2s dot5 infinite;}
.pass_dot6{background:url(../images/dot6.png) center no-repeat; right:376px; bottom:100px; width:18px; height:66px; 
animation:3s dot6 infinite; -o-animation:3s dot6 infinite; -ms-animation:3s dot6 infinite; -moz-animation:3s dot6 infinite; -webkit-animation:2s dot6 infinite;}
.pass_dot7{background:url(../images/dot7.png) center no-repeat; right:333px; bottom:100px; height:52px; width:50px;
animation:2s dot7 infinite; -o-animation:2s dot7 infinite; -ms-animation:2s dot7 infinite; -moz-animation:2s dot7 infinite; -webkit-animation:2s dot7 infinite;}

@-webkit-keyframes dot {
0% { opacity: 1;
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-o-transform: scale(0.5);
	transform: scale(0.5);}
100% {
	right:180px;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	opacity: 0;}
}
@-ms-keyframes dot {
0% { opacity: 1;
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-o-transform: scale(0.5);
	transform: scale(0.5);}
100% {
	right:180px;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	opacity: 0;}
}
@-moz-keyframes dot {
0% { opacity: 1;
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-o-transform: scale(0.5);
	transform: scale(0.5);}
100% {
	right:180px;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	opacity: 0;}
}
@-o-keyframes dot {
0% { opacity: 1;
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-o-transform: scale(0.5);
	transform: scale(0.5);}
100% {
	right:180px;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	opacity: 0;}
}
@keyframes dot {
0% { opacity: 1;
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-o-transform: scale(0.5);
	transform: scale(0.5);}
100% {
	right:180px;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	opacity: 0;}
}

@-webkit-keyframes dot1 {
0% { opacity: 1;-moz-transform: scale(1); -o-transform: scale(1); -webkit-transform:  scale(1); -ms-transform: scale(1); transform: scale(1);}
100% {
	bottom:0px; right:240px;
	-webkit-transform: scale(0.4);
	-ms-transform: scale(0.4);
	-moz-transform: scale(0.4);
	-o-transform: scale(0.4);
	transform: scale(0.4);
	opacity: 0;}
}
@-ms-keyframes dot1 {
0% { opacity: 1;-moz-transform: scale(1); -o-transform: scale(1); -webkit-transform:  scale(1); -ms-transform: scale(1); transform: scale(1);}
100% {
	bottom:0px; right:240px;
	-webkit-transform: scale(0.4);
	-ms-transform: scale(0.4);
	-moz-transform: scale(0.4);
	-o-transform: scale(0.4);
	transform: scale(0.4);
	opacity: 0;}
}
@-moz-keyframes dot1 {
0% { opacity: 1;-moz-transform: scale(1); -o-transform: scale(1); -webkit-transform:  scale(1); -ms-transform: scale(1); transform: scale(1);}
100% {
	bottom:0px; right:240px;
	-webkit-transform: scale(0.4);
	-ms-transform: scale(0.4);
	-moz-transform: scale(0.4);
	-o-transform: scale(0.4);
	transform: scale(0.4);
	opacity: 0;}
}
@-o-keyframes dot1 {
0% { opacity: 1;-moz-transform: scale(1); -o-transform: scale(1); -webkit-transform:  scale(1); -ms-transform: scale(1); transform: scale(1);}
100% {
	bottom:0px; right:240px;
	-webkit-transform: scale(0.4);
	-ms-transform: scale(0.4);
	-moz-transform: scale(0.4);
	-o-transform: scale(0.4);
	transform: scale(0.4);
	opacity: 0;}
}
@keyframes dot1 {
0% { opacity: 1;-moz-transform: scale(1); -o-transform: scale(1); -webkit-transform:  scale(1); -ms-transform: scale(1); transform: scale(1);}
100% {
	bottom:0px; right:240px;
	-webkit-transform: scale(0.4);
	-ms-transform: scale(0.4);
	-moz-transform: scale(0.4);
	-o-transform: scale(0.4);
	transform: scale(0.4);
	opacity: 0;}
}

@-webkit-keyframes dot2 {
0% { opacity: 1;-moz-transform: scale(1); -o-transform: scale(1); -webkit-transform:  scale(1); -ms-transform: scale(1); transform: scale(1);}
100% {
	bottom:0px;
	-webkit-transform: scale(0.4);
	-ms-transform: scale(0.4);
	-moz-transform: scale(0.4);
	-o-transform: scale(0.4);
	transform: scale(0.4);
	opacity: 0;}
}
@-ms-keyframes dot2 {
0% { opacity: 1;-moz-transform: scale(1); -o-transform: scale(1); -webkit-transform:  scale(1); -ms-transform: scale(1); transform: scale(1);}
100% {
	bottom:0px;
	-webkit-transform: scale(0.4);
	-ms-transform: scale(0.4);
	-moz-transform: scale(0.4);
	-o-transform: scale(0.4);
	transform: scale(0.4);
	opacity: 0;}
}
@-moz-keyframes dot2 {
0% { opacity: 1;-moz-transform: scale(1); -o-transform: scale(1); -webkit-transform:  scale(1); -ms-transform: scale(1); transform: scale(1);}
100% {
	bottom:0px;
	-webkit-transform: scale(0.4);
	-ms-transform: scale(0.4);
	-moz-transform: scale(0.4);
	-o-transform: scale(0.4);
	transform: scale(0.4);
	opacity: 0;}
}
@-o-keyframes dot2 {
0% { opacity: 1;-moz-transform: scale(1); -o-transform: scale(1); -webkit-transform:  scale(1); -ms-transform: scale(1); transform: scale(1);}
100% {
	bottom:0px;
	-webkit-transform: scale(0.4);
	-ms-transform: scale(0.4);
	-moz-transform: scale(0.4);
	-o-transform: scale(0.4);
	transform: scale(0.4);
	opacity: 0;}
}
@keyframes dot2 {
0% { opacity: 1;-moz-transform: scale(1); -o-transform: scale(1); -webkit-transform:  scale(1); -ms-transform: scale(1); transform: scale(1);}
100% {
	bottom:0px;
	-webkit-transform: scale(0.4);
	-ms-transform: scale(0.4);
	-moz-transform: scale(0.4);
	-o-transform: scale(0.4);
	transform: scale(0.4);
	opacity: 0;}
}

@-webkit-keyframes dot3 {
0% { opacity: 1;-moz-transform: scale(0.6); -o-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6);}
100% {
	right:460px; bottom:0px;
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;}
}
@-ms-keyframes dot3 {
0% { opacity: 1;-moz-transform: scale(0.6); -o-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6);}
100% {
	right:460px; bottom:0px;
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;}
}
@-moz-keyframes dot3 {
0% { opacity: 1;-moz-transform: scale(0.6); -o-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6);}
100% {
	right:460px; bottom:0px;
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;}
}
@-o-keyframes dot3 {
0% { opacity: 1;-moz-transform: scale(0.6); -o-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6);}
100% {
	right:460px; bottom:0px;
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;}
}
@keyframes dot3 {
0% { opacity: 1;-moz-transform: scale(0.6); -o-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6);}
100% {
	right:460px; bottom:0px;
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;}
}

@-webkit-keyframes dot4 {
0% { opacity: 1;-moz-transform: scale(0.6); -o-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6);}
100% {
	right:540px;
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;}
}
@-ms-keyframes dot4 {
0% { opacity: 1;-moz-transform: scale(0.6); -o-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6);}
100% {
	right:540px;
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;}
}
@-moz-keyframes dot4 {
0% { opacity: 1;-moz-transform: scale(0.6); -o-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6);}
100% {
	right:540px;
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;}
}
@-o-keyframes dot4 {
0% { opacity: 1;-moz-transform: scale(0.6); -o-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6);}
100% {
	right:540px;
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;}
}
@keyframes dot4 {
0% { opacity: 1;-moz-transform: scale(0.6); -o-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6);}
100% {
	right:540px;
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;}
}

@-webkit-keyframes dot5 {
0% { opacity: 1;-moz-transform: scale(0.6); -o-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6);}
100% {
	bottom:260px; right:486px;
	-webkit-transform: scale(0.2);
	-ms-transform: scale(0.2);
	-moz-transform: scale(0.2);
	-o-transform: scale(0.2);
	transform: scale(0.2);
	opacity: 0;}
}
@-ms-keyframes dot5 {
0% { opacity: 1;-moz-transform: scale(0.6); -o-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6);}
100% {
	bottom:260px; right:486px;
	-webkit-transform: scale(0.2);
	-ms-transform: scale(0.2);
	-moz-transform: scale(0.2);
	-o-transform: scale(0.2);
	transform: scale(0.2);
	opacity: 0;}
}
@-moz-keyframes dot5 {
0% { opacity: 1;-moz-transform: scale(0.6); -o-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6);}
100% {
	bottom:260px; right:486px;
	-webkit-transform: scale(0.2);
	-ms-transform: scale(0.2);
	-moz-transform: scale(0.2);
	-o-transform: scale(0.2);
	transform: scale(0.2);
	opacity: 0;}
}
@-o-keyframes dot5 {
0% { opacity: 1;-moz-transform: scale(0.6); -o-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6);}
100% {
	bottom:260px; right:486px;
	-webkit-transform: scale(0.2);
	-ms-transform: scale(0.2);
	-moz-transform: scale(0.2);
	-o-transform: scale(0.2);
	transform: scale(0.2);
	opacity: 0;}
}
@keyframes dot5 {
0% { opacity: 1;-moz-transform: scale(0.6); -o-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6);}
100% {
	bottom:260px; right:486px;
	-webkit-transform: scale(0.2);
	-ms-transform: scale(0.2);
	-moz-transform: scale(0.2);
	-o-transform: scale(0.2);
	transform: scale(0.2);
	opacity: 0;}
}

@-webkit-keyframes dot6 {
0% { opacity: 1;-moz-transform: rotate(315deg) scale(0.6); -o-transform: rotate(315deg) scale(0.6); -webkit-transform: rotate(315deg) scale(0.6); -ms-transform: rotate(315deg) scale(0.6); transform: rotate(315deg) scale(0.6);}
100% {
	bottom:180px; right:200px;
	-webkit-transform: rotate(315deg) scale(0.6);
	-ms-transform: rotate(315deg) scale(0.6);
	-moz-transform: rotate(315deg) scale(0.6);
	-o-transform: rotate(315deg) scale(0.6);
	transform: rotate(315deg) scale(0.6);
	opacity: 0;}
}
@-ms-keyframes dot6 {
0% { opacity: 1;}
100% {
	bottom:280px;
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;}
}
@-moz-keyframes dot6 {
0% { opacity: 1;}
100% {
	bottom:280px;
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;}
}
@-o-keyframes dot6 {
0% { opacity: 1;}
100% {
	bottom:280px;
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;}
}
@keyframes dot6 {
0% { opacity: 1;}
100% {
	bottom:280px;
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;}
}

@-webkit-keyframes dot7 {
0% { opacity: 1;}
100% {
	bottom:140px; right:180px;
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;}
}
@-ms-keyframes dot7 {
0% { opacity: 1;}
100% {
	bottom:140px; right:180px;
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;}
}
@-moz-keyframes dot7 {
0% { opacity: 1;}
100% {
	bottom:140px; right:180px;
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;}
}
@-o-keyframes dot7 {
0% { opacity: 1;}
100% {
	bottom:140px; right:180px;
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;}
}
@keyframes dot7 {
0% { opacity: 1;}
100% {
	bottom:140px; right:180px;
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;}
}

.idle_bg{ background:url(../images/back6.png) center no-repeat; width:870px; height:412px; margin-left:-100px;}
.back6_pao{ background:url(../images/back6_pao.png) no-repeat; width:46px; height:46px; position:absolute; right:310px; top:180px;
-webkit-animation-duration: 1.2s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite;
	-ms-animation-duration: 1.2s; -ms-animation-timing-function: linear; -ms-animation-iteration-count: infinite;
	-moz-animation-duration: 1.2s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite;
	-o-animation-duration: 1.2s; -o-animation-timing-function: linear; -o-animation-iteration-count: infinite;
	animation-duration: 1.2s; animation-timing-function: linear; animation-iteration-count: infinite;
	-webkit-animation-name: c2;	-webkit-animation-delay: .6s;
	-ms-animation-name: c2;	-ms-animation-delay: .6s;
	-moz-animation-name: c2; -moz-animation-delay: .6s;
	-o-animation-name: c2;	-o-animation-delay: .6s;
	animation-name: c2;	animation-delay: .6s;
}
.back6_pao1{ width:22px; height:22px; right:350px; top:220px; background-size:contain;}
@-webkit-keyframes pao {
0% {
	-webkit-transform: scale(.222);
	-ms-transform: scale(.222);
	-moz-transform: scale(.222);
	-o-transform: scale(.222);
	transform: scale(.222);
	opacity: 1
}
50% {
	-webkit-transform: scale(.622);
	-ms-transform: scale(.622);
	-moz-transform: scale(.622);
	-o-transform: scale(.622);
	transform: scale(.622);
	opacity: .4
}
98% {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	opacity: .2
}
100% {
	opacity: 0
}
}
@-ms-keyframes pao {
	0% {
	-webkit-transform: scale(.222);
	-ms-transform: scale(.222);
	-moz-transform: scale(.222);
	-o-transform: scale(.222);
	transform: scale(.222);
	opacity: 1
}
50% {
	-webkit-transform: scale(.622);
	-ms-transform: scale(.622);
	-moz-transform: scale(.622);
	-o-transform: scale(.622);
	transform: scale(.622);
	opacity: .4
}
98% {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	opacity: .2
}
100% {
	opacity: 0
}
}
@-moz-keyframes pao {
	0% {
	-webkit-transform: scale(.222);
	-ms-transform: scale(.222);
	-moz-transform: scale(.222);
	-o-transform: scale(.222);
	transform: scale(.222);
	opacity: 1
}
50% {
	-webkit-transform: scale(.622);
	-ms-transform: scale(.622);
	-moz-transform: scale(.622);
	-o-transform: scale(.622);
	transform: scale(.622);
	opacity: .4
}
98% {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	opacity: .2
}
100% {
	opacity: 0
}
}
@-o-keyframes pao {
	0% {
	-webkit-transform: scale(.222);
	-ms-transform: scale(.222);
	-moz-transform: scale(.222);
	-o-transform: scale(.222);
	transform: scale(.222);
	opacity: 1
}
50% {
	-webkit-transform: scale(.622);
	-ms-transform: scale(.622);
	-moz-transform: scale(.622);
	-o-transform: scale(.622);
	transform: scale(.622);
	opacity: .4
}
98% {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	opacity: .2
}
100% {
	opacity: 0
}
}
@keyframes pao {
	0% {
	-webkit-transform: scale(.222);
	-ms-transform: scale(.222);
	-moz-transform: scale(.222);
	-o-transform: scale(.222);
	transform: scale(.222);
	opacity: 1
}
50% {
	-webkit-transform: scale(.622);
	-ms-transform: scale(.622);
	-moz-transform: scale(.622);
	-o-transform: scale(.622);
	transform: scale(.622);
	opacity: .4
}
98% {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	opacity: .2
}
100% {
	opacity: 0
}
}

/* 立即体验*/
.login_wrap{ width:1100px; height:412px; margin:50px auto; position:relative; z-index:0;}
.sun{ background:url(../images/sun.png) no-repeat #fff377; width:60px; height:60px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; position:absolute; left:60px; top:-10px;}
.cloud{ background:url(../images/cloud.png) no-repeat; background-size:contain; width:108px; height:62px; opacity:0.8; filter:alpha(opacity=80); position:absolute; right:80px; top:68px;
	animation:float_cloud 6s linear infinite; -webkit-animation:float_cloud 6s linear infinite; -moz-animation:float_cloud 6s linear infinite; -ms-animation:float_cloud 6s linear infinite; -o-animation:float_cloud 6s linear infinite;}
.cloud4{ background:url(../images/cloud4.png) no-repeat; background-size:contain; width:108px; height:62px; opacity:0.8; filter:alpha(opacity=80); position:absolute; right:80px; top:68px;
	animation:float_cloud 6s linear infinite; -webkit-animation:float_cloud 6s linear infinite; -moz-animation:float_cloud 6s linear infinite; -ms-animation:float_cloud 6s linear infinite; -o-animation:float_cloud 6s linear infinite;}	
.cloud1{ background:url(../images/cloud1.png) no-repeat; width:166px; height:36px; position:absolute; left:100px; top:116px; z-index:2;}
.cloud2{ background:url(../images/cloud2.png) no-repeat; width:98px; height:56px; position:absolute; right:0px; top:180px;
	animation:float_cloud2 6s ease-in-out infinite; -webkit-animation:float_cloud2 6s ease-in-out infinite; -moz-animation:float_cloud2 6s ease-in-out infinite; -ms-animation:float_cloud2 6s ease-in-out infinite; -o-animation:float_cloud2 6s ease-in-out infinite;}
.cloud5{ background:url(../images/cloud5.png) no-repeat; width:98px; height:56px; position:absolute; right:0px; top:180px;
	animation:float_cloud2 6s ease-in-out infinite; -webkit-animation:float_cloud2 6s ease-in-out infinite; -moz-animation:float_cloud2 6s ease-in-out infinite; -ms-animation:float_cloud2 6s ease-in-out infinite; -o-animation:float_cloud2 6s ease-in-out infinite;}
	.cloud3{ background:url(../images/cloud3.png) no-repeat; background-size:contain; width:104px; height:50px; position:absolute; left:78px; top:68px; opacity:0.8; filter:alpha(opacity=80);
	animation:float_cloud4 6s linear infinite; -webkit-animation:float_cloud4 6s linear infinite; -moz-animation:float_cloud4 6s linear infinite; -ms-animation:float_cloud4 6s linear infinite; -o-animation:float_cloud4 6s linear infinite;}
.cloud_pos{left:310px; top:10px;
	animation:float_cloud5 8s ease infinite; -webkit-animation:float_cloud5 8s ease infinite; -moz-animation:float_cloud5 8s ease infinite; -ms-animation:float_cloud5 8s ease infinite; -o-animation:float_cloud5 8s ease infinite;}
.cloud_pos1{ right:320px; top:120px;  opacity:0.6; filter:alpha(opacity=60);
	animation:float_cloud3 8s ease infinite; -webkit-animation:float_cloud3 8s ease infinite; -moz-animation:float_cloud3 8s ease infinite; -ms-animation:float_cloud3 8s ease infinite; -o-animation:float_cloud3 8s ease infinite;}

.earth{ width:100%; height:360px; position:absolute; bottom:0px; left:0px; background:url(../images/earth.png) top center no-repeat;}
.airplane{ background:url(../images/airplane.png) center no-repeat; width:150px; height:300px; position:absolute; left:0px; bottom:60px;}
.grass, .grass1{ width:100%; height:160px; position:absolute; bottom:0px; left:0px;
	-webkit-animation:2.4s linear 1s alternate none infinite running float;
	-ms-animation:2.4s linear 1s alternate none infinite running float;
	-moz-animation:2.4s linear 1s alternate none infinite running float;
	-o-animation:2.4s linear 1s alternate none infinite running float;
	animation:2.4s linear 1s alternate none infinite running float}
.grass{ background:url(../images/grass.png) top center no-repeat;
	-webkit-animation-name: grass;	-webkit-animation-delay: 2.4s;
	-ms-animation-name: grass;	-ms-animation-delay: 2.4s;
	-moz-animation-name: grass; -moz-animation-delay: 2.4s;
	-o-animation-name: grass;	-o-animation-delay: 2.4s;
	animation-name: grass;	animation-delay: 2.4s;}
.grass1{ background:url(../images/grass1.png) top center no-repeat;
	-webkit-animation-name: grass;	-webkit-animation-delay: 3.2s;
	-ms-animation-name: grass;	-ms-animation-delay: 3.2s;
	-moz-animation-name: grass; -moz-animation-delay: 3.2s;
	-o-animation-name: grass;	-o-animation-delay: 3.2s;
	animation-name: grass;	animation-delay: 3.2s;}
@-webkit-keyframes float_cloud { 0%{ right:80;} 25%{ right:160px;} 50%{ right:0px;} 100%{ right:80px;}}
@-moz-keyframes float_cloud { 0%{ right:80;}	25%{ right:160px;}	50%{ right:0px;} 100%{ right:80px;}}
@-o-keyframes float_cloud { 0%{ right:80;} 25%{ right:160px;} 50%{ right:0px;} 100%{ right:80px;}}
@keyframes float_cloud { 0%{ right:80;} 25%{ right:160px;} 50%{ right:0px;} 100%{ right:80px;}}

@-webkit-keyframes float_cloud2 { 0%{ right:0;} 25%{ right:20px;} 50%{ right:-20px;} 100%{ right:0px;}}
@-moz-keyframes float_cloud2 { 0%{ right:0;}	25%{ right:20px;}	50%{ right:-20px;} 100%{ right:0px;}}
@-o-keyframes float_cloud2 { 0%{ right:0;} 25%{ right:20px;} 50%{ right:-20px;} 100%{ right:0px;}}
@keyframes float_cloud2 { 0%{ right:0;} 25%{ right:20px;} 50%{ right:-20px;} 100%{ right:0px;}}

@-webkit-keyframes float_cloud3 { 0%{ right:320px;} 25%{ right:360px;} 50%{ right:280px;} 100%{ right:320px;}}
@-moz-keyframes float_cloud3 { 0%{ right:320px;}	25%{ right:360px;}	50%{ right:280px;} 100%{ right:320px;}}
@-o-keyframes float_cloud3 { 0%{ right:320px;} 25%{ right:360px;} 50%{ right:280px;} 100%{ right:320px;}}
@keyframes float_cloud3 { 0%{ right:320px;} 25%{ right:360px;} 50%{ right:280px;} 100%{ right:320px;}}

@-webkit-keyframes float_cloud4 { 0%{ left:78px;} 25%{ left:100px;} 50%{ left:50px;} 100%{ left:78px;}}
@-moz-keyframes float_cloud4 { 0%{ left:78px;}	25%{ left:100px;}	50%{ left:50px;} 100%{ left:78px;}}
@-o-keyframes float_cloud4 { 0%{ left:78px;} 25%{ left:100px;} 50%{ left:50px;} 100%{ left:78px;}}
@keyframes float_cloud4 { 0%{ left:78px;} 25%{ left:100px;} 50%{ left:50px;} 100%{ left:78px;}}

@-webkit-keyframes float_cloud5 { 0%{ left:310px;} 25%{ left:350px;} 50%{ left:270px;} 100%{ left:310px;}}
@-moz-keyframes float_cloud5 { 0%{ left:310px;}	25%{ left:350px;}	50%{ left:270px;} 100%{ left:310px;}}
@-o-keyframes float_cloud5 { 0%{ left:310px;} 25%{ left:350px;} 50%{ left:270px;} 100%{ left:310px;}}
@keyframes float_cloud5 { 0%{ left:310px;} 25%{ left:350px;} 50%{ left:270px;} 100%{ left:310px;}}



.main_100 h2{left:50%; width:720px; margin-left:-360px; top:150px;}
.login_form{ display:block; width:1100px; z-index:1; position:absolute; top:40%; left:50%; margin-left:-550px;}
.form_wrap{}
.login_inner{ position:relative; display:table; width:100%; padding:25px; margin:10px auto 0px; background:rgba(0, 0, 0, 0.5); border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px;}
.input_wrap{ display:table-cell; float:left; background:#fff; width:320px; margin-right:40px; background:rgba(255, 255, 255, 0.5); padding:20px; position:relative; cursor:text; height:35px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px;}
.login_inner input{ outline:0px none; border:1px solid #fff; height:50px; width:336px; text-indent:1.2em; position:absolute; left:12px; top:12px;}
input[type="text"]:hover, input[type="text"]:focus { border:1px solid #666; }

.btn_wrap{ display:table-cell; vertical-align:top; float:left; position:relative; margin-left:40px;}
.btn_wrap button{ outline:0px none; cursor:pointer; background:#cd211d; border:1px solid #991815; color:#fff; letter-spacing:0.08em; width:256px; height:75px; font-size:24px; position:absolute; left:0px; top:0px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px;}
.btn_wrap button:hover{ background:#b31c19; border-color:#991815;}

@-webkit-keyframes grass {
0% { padding-top:20px;}
25% { padding-top:0px;}
50% { padding-top:20px;}
100% { padding-top:0px;}
}
@-ms-keyframes grass {
0% { padding-top:20px;}
25% { padding-top:0px;}
50% { padding-top:20px;}
100% { padding-top:0px;}
}
@-moz-keyframes grass {
0% { padding-top:20px;}
25% { padding-top:0px;}
50% { padding-top:20px;}
100% { padding-top:0px;}
}
@-o-keyframes grass {
0% { padding-top:20px;}
25% { padding-top:0px;}
50% { padding-top:20px;}
100% { padding-top:0px;}
}
@keyframes grass {
0% { padding-top:20px;}
25% { padding-top:0px;}
50% { padding-top:20px;}
100% { padding-top:0px;}
}

/* 开启按钮 */
.test_wrap, .test_wrap1{ position:absolute; left:50%; z-index:2;}
.test_wrap{ /*position:absolute; left:50%;*/ top:74%; margin-left:-96px;}
.test_wrap1{ top:360px; margin-left:-134px;}
.test_wrap .btn_test, .test_wrap1 .btn_test{ background:#8dcb9b/*#CAFFF8*/; color:#fff/*#37B6C1*/; border-bottom:8px solid #7bb388/* #5c8fd1*/; font-size:26px; display:inline-block; cursor:pointer; border-radius:12px; -webkit-border-radius:12px; -moz-border-radius:12px; -ms-border-radius:12px; -o-border-radius:12px;}
.test_wrap .btn_test{ padding:0.6em 1.8em;}
.test_wrap1 .btn_test{ padding:0.8em 2.2em;/* color:#004e72;*/}
.test_wrap .btn_test:hover, .test_wrap1 .btn_test:hover{ background:#85d297; border-bottom:8px solid #76b885; color:#fff;}

.test_wrap i, .test_wrap1 i{ background:url(../images/icon.png) 0px -240px no-repeat; width:42px; height:44px; display:inline-block; position:relative; float:right; right:44px; top:46px; z-index:3;
animation:test_animate 2s; -o-animation:test_animate 2s; -ms-animation:test_animate 2s; -moz-animation:test_animate 2s; -webkit-animation:test_animate 2s;}
.test_wrap:hover i, .test_wrap1:hover i{ top:40px;}

@-webkit-keyframes test_animate {
0% { top:46px}
25% { top:40px}
50% { top:46px}
100% { top:40px}
}
@-ms-keyframes test_animate {
0% { top:46px}
25% { top:40px}
50% { top:46px}
100% { top:40px}
}
@-moz-keyframes test_animate {
0% { top:46px}
25% { top:40px}
50% { top:46px}
100% { top:40px}
}
@-o-keyframes test_animate {
0% { top:46px}
25% { top:40px}
50% { top:46px}
100% { top:40px}
}
@keyframes test_animate {
0% { top:46px}
25% { top:40px}
50% { top:46px}
100% { top:40px}
}

/* 微赞云搞大了活动信息 */
.rainbow{ background:url(../images/rainbow.png) top center no-repeat; width:100%; height:100%; margin:90px auto; position:absolute; top:0px; left:0px; right:0px;/* opacity:0.6; filter:alpha(opacity=60);*/}
.raintext{ background:url(../images/rain_text.png) center no-repeat; width:808px; height:290px; position:absolute; bottom:30%; left:50%; margin-left:-404px;}
.raintext a{ cursor:pointer; font-size:22px; color:#fff; background:none; border:none; margin-left:-50px; position:absolute; left:50%; bottom:0px; z-index:4;
animation:2s rain_animate infinite; -o-animation:2s rain_animate infinite; -ms-animation:2s rain_animate infinite; -moz-animation:2s rain_animate infinite; -webkit-animation:2s rain_animate infinite;}
.raintext i{ background:url(../images/icon.png) 0px -74px no-repeat; width:16px; height:36px; float:right; margin-left:10px; margin-top:-8px; display:inline-block; 
}
.raintext a:hover{ text-decoration:underline;}
@keyframes rain_animate {
	0% { margin-left:-50px;}
	25% { margin-left:-40px;}
	50% { margin-left:-50px;}
	25% { margin-left:-40px;}	
	100% { margin-left:-50px;}
}
@-o-keyframes rain_animate {
	0% { margin-left:-50px;}
	25% { margin-left:-40px;}
	50% { margin-left:-50px;}
	25% { margin-left:-40px;}	
	100% { margin-left:-50px;}
}
@-ms-keyframes rain_animate {
	0% { margin-left:-50px;}
	25% { margin-left:-40px;}
	50% { margin-left:-50px;}
	25% { margin-left:-40px;}	
	100% { margin-left:-50px;}
}
@-moz-keyframes rain_animate {
	0% { margin-left:-50px;}
	25% { margin-left:-40px;}
	50% { margin-left:-50px;}
	25% { margin-left:-40px;}	
	100% { margin-left:-50px;}
}
@-webkit-keyframes rain_animate {
	0% { margin-left:-50px;}
	25% { margin-left:-40px;}
	50% { margin-left:-50px;}
	25% { margin-left:-40px;}
	100% { margin-left:-50px;}
}

/* 公测页面 */
.beta_wrap{ position:absolute; top:0px; bottom:0px; left:0px; right:0px; background:  #204589 url(../images/1920.jpg) center no-repeat; z-index:100; display:none;}
.beta_bg{ color:#fff;padding-top:140px;margin:0px auto; position:relative; width:870px; height:456px; font-size:16px; font-weight:400; z-index:1;}
.beta_bg_b{ ; width:100%; height:500px; position:absolute; bottom:0px;}
.beta_btn_wrap{ position:absolute; bottom:20%; height:50px; margin-bottom:-25px; left:50%; z-index:1;}
.beta_btn_wrap a{ width:130px; height:46px; line-height:46px; display:inline-block; cursor:pointer; border-radius:4px; -o-border-radius:4px; -ms-border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;
-webkit-box-shadow:0px 5px 0px 0px #36BBF6, 0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8);
    -moz-box-shadow:0px 5px 0px 0px #36BBF6, 0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8);
    box-shadow:0px 5px 0px 0px #36BBF6, 0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8); font-size:16px;

}

/*降价活动页面*/
.beta_bg strong{color:#FFFA0B}
.beta_bg span{  line-height:185px;float: left;padding-left:154px;width:538px;font-size: 33px;}
.beta_bg a{margin: 0px auto;border: 3px solid #C8C5C5;background: #F1EA00 none repeat scroll 0% 0%;font-size: 34px;color:#676211;display: inline-block;width: 310px;height: 68px;line-height: 68px;}
.beta_bg i{height:140px;display: block;margin: 0 auto}
.prec i{height:98px}
.icon_logo{background: url("../images/icon.png") 0% 81% no-repeat;   width:311px}
.icon_ima{float:left;background: url("../images/icon.png") 98%  100% no-repeat;width:196px}
.beta_bg h1{padding-top: 38px;font-size: 48px;  text-align: right;font-weight: lighter;letter-spacing: 8px ; float: left; width: 65%;}



.beta_bg a:hover{ background:#0A83CC;color:#fff}
.btn_detail{ background:#36bbf6; border:1px solid #fff; color:#fff; margin-left:-160px;}
.btn_website{ background:#f9e743; border:1px solid #f9e743; color:#36bbf6; margin-left:0px;}
.arrow{ background:url(../images/icon.png) no-repeat; width:16px; height:36px; float:right; margin-right:10px; display:inline-block;}
.btn_detail .arrow{ background-position: 0px -74px;
animation:2s arrow_animate infinite; -o-animation:2s arrow_animate infinite; -ms-animation:2s arrow_animate infinite; -moz-animation:2s arrow_animate infinite; -webkit-animation:2s arrow_animate infinite;}
.btn_website .arrow{ background-position: -16px -74px;
animation:2s arrow_animate infinite; -o-animation:2s arrow_animate infinite; -ms-animation:2s arrow_animate infinite; -moz-animation:2s arrow_animate infinite; -webkit-animation:2s arrow_animate infinite;}



/* 首页底部微信微博 */
.bot_icon_wrap{ width:-90px; height:40px; position:absolute; right:100px; bottom:80px;}
.icon_weixin, .icon_weibo{ background:rgba(246, 246, 246, 0.7); width:34px; height:34px; position:relative; padding:6px; margin-right:10px; display:inline-block; opacity:0.7; filter:alpha(opacity=70); border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%;}
.icon_weixin i, .icon_weibo i{ width:32px; height:32px; display:block;}
/*.icon_weixin i{ background:url(../images/icon.png) -4px -44px no-repeat;}
.icon_weibo i{ background:url(../images/icon.png -4px -4px no-repeat;}*/
.icon_weixin i{ background:url(../images/icon_weixin.png) center no-repeat; background-size:contain;}
.icon_weibo i{ background:url(../images/icon_weibo.png) center no-repeat; background-size:contain;}
.icon_weixin span, .icon_weibo span{ background:url(../images/icon_main.png) 0px -6px; position:absolute; top:-150px; left:-50px; height:150px; width:150px; display:none;}
.icon_weixin span{ background-position:0px -156px;}
.icon_weixin:hover, .icon_weibo:hover{ background:rgba(246, 246, 246, 0.95); opacity:0.95; filter:alpha(opacity=95);}
.icon_weixin:hover span, .icon_weibo:hover span{ display:block;}

@keyframes arrow_animate {
	0% { margin-right:10px;}
	25% { margin-right:20px;}
	50% { margin-right:10px;}
	25% { margin-right:20px;}	
	100% { margin-right:10px;}
}
@-o-keyframes arrow_animate {
	0% { margin-right:10px;}
	25% { margin-right:20px;}
	50% { margin-right:10px;}
	25% { margin-right:20px;}	
	100% { margin-right:10px;}
}
@-ms-keyframes arrow_animate {
	0% { margin-right:10px;}
	25% { margin-right:20px;}
	50% { margin-right:10px;}
	25% { margin-right:20px;}	
	100% { margin-right:10px;}
}
@-moz-keyframes arrow_animate {
	0% { margin-right:10px;}
	25% { margin-right:20px;}
	50% { margin-right:10px;}
	25% { margin-right:20px;}	
	100% { margin-right:10px;}
}
@-webkit-keyframes arrow_animate {
	0% { margin-right:10px;}
	25% { margin-right:20px;}
	50% { margin-right:10px;}
	25% { margin-right:20px;}	
	100% { margin-right:10px;}
}