@charset "utf-8";
/*闪缩效果*/
.air-class{-webkit-animation: air 1s linear infinite alternate;-moz-animation: air 1s linear infinite alternate;-o-animation: air 1s linear infinite alternate;-ms-animation: air 1s linear infinite alternate;animation: air 1s linear infinite alternate;}
.trans-pre {-webkit-animation: anipre .3s linear both;-moz-animation: anipre .3s linear both;-ms-animation: anipre .3s linear both;-o-animation: anipre .3s linear both;}
.trans-cur {-webkit-animation: anicur .3s linear both;-moz-animation: anicur .3s linear both;-ms-animation: anicur .3s linear both;-o-animation: anicur .3s linear both;animation: anicur .3s linear both;box-shadow: -1px 0 10px #777, 0 -5px 5px #777, 0 1px 5px #777, 1px 0 5px #777;}
.trans-next {-webkit-animation: aninext .3s linear both;-moz-animation: aninext .3s linear both;-ms-animation: aninext .3s linear both;-o-animation: aninext .3s linear both;animation: aninext .3s linear both;}
.ani-comeout {margin-top:60px;position:relative;z-index:2;float:left; width:550px;height:367px;background:url(../img/bg_fonts.png) no-repeat;text-indent:-9999px;-webkit-animation: bouncein .3s linear both;-moz-animation: bouncein .3s linear both;-ms-animation: bouncein .3s linear both;-o-animation: bouncein .3s linear both;animation: bouncein .3s linear both;}
.trans-lufei {position:absolute;top:-700px;right:-900px;margin-right:;width:876px;height:688px;background:url(../img/man_lufi.png) no-repeat;-webkit-animation: lufei .7s linear both;-moz-animation: lufei .7s linear both;-ms-animation: lufei .7s linear both;-o-animation: lufei .7s linear both;animation: lufei .7s linear both;text-indent:-9999px;z-index:3;transition-delay: 1s;}
.sleftCloud{-webkit-animation: leftCloud 10s linear infinite alternate;-moz-animation: leftCloud 10s linear infinite alternate;-ms-animation: leftCloud 10s linear infinite alternate;-o-animation: leftCloud 10s linear infinite alternate;animation: leftCloud 10s linear infinite alternate;}
.hills{-webkit-animation: hills 30s linear infinite alternate;-moz-animation: hills 30s linear infinite alternate;-ms-animation: hills 30s linear infinite alternate;-o-animation: hills 30s linear infinite alternate;animation: hills 30s linear infinite alternate;}
.btp{-webkit-animation: floatCloudT 30s linear infinite alternate;-moz-animation: floatCloudT 30s linear infinite alternate;-ms-animation: floatCloudT 30s linear infinite alternate;-o-animation: floatCloudT 30s linear infinite alternate;animation: floatCloudT 30s linear infinite alternate;}
.bdm{-webkit-animation: floatCloudM 60s linear infinite alternate;-moz-animation: floatCloudM 60s linear infinite alternate;-ms-animation: floatCloudM 60s linear infinite alternate;-o-animation: floatCloudM 60s linear infinite alternate;animation: floatCloudM 60s linear infinite alternate;}
.bdmF{-webkit-animation: floatCloudmm 30s linear infinite alternate;-moz-animation: floatCloudmm 30s linear infinite alternate;-ms-animation: floatCloudmm 30s linear infinite alternate;-o-animation: floatCloudmm 30s linear infinite alternate;animation: floatCloudmm 30s linear infinite alternate;}
.btm{-webkit-animation: btm 30s linear infinite alternate;-moz-animation: btm 30s linear infinite alternate;-ms-animation: btm 30s linear infinite alternate;-o-animation: btm 30s linear infinite alternate;animation: btm 30s linear infinite alternate;}
.cloudOne{-webkit-animation: cloudOne 30s linear infinite alternate;-moz-animation: cloudOne 30s linear infinite alternate;-ms-animation: cloudOne 30s linear infinite alternate;-o-animation: cloudOne 30s linear infinite alternate;animation: cloudOne 30s linear infinite alternate;}
.girl{position:absolute;top:-20px;right:-50px;width:1130px;height:744px;background:url(../img/girl.png) no-repeat;-webkit-animation: girl .7s linear both;-moz-animation: girl .5s linear both;-ms-animation: girl .5s linear both;-o-animation: girl .5s linear both;animation: girl .5s linear both;text-indent:-9999px;z-index:3;}
.upDown{-webkit-animation: upDown 0.8s linear infinite alternate;-moz-animation: upDown 0.8s linear infinite alternate;-ms-animation: upDown 0.8s linear infinite alternate;-o-animation: upDown 0.8s linear infinite alternate;animation: upDown 0.8s linear infinite alternate;}


/*路飞IN*/
@-webkit-keyframes lufei{
	0%{-webkit-transform:scale(0.1);}
	100%{-webkit-transform:scale(1);top:-35px;right:-310px;}
}
@-moz-keyframes lufei{
	0%{-moz-transform:scale(0.1);}
	100%{-moz-transform:scale(1);top:-35px;right:-310px;}
}
@-o-keyframes lufei{
	0%{-o-transform:scale(0.1);}
	100%{-o-transform:scale(1);top:-35px;right:-310px;}
}
@-ms-keyframes lufei{
	0%{-ms-transform:scale(0.1);}
	100%{-ms-transform:scale(1);top:-35px;right:-310px;}
}
@keyframes lufei{
	0%{transform:scale(0.1);}
	100%{transform:scale(1);top:-35px;right:-310px;}
}







@-webkit-keyframes upDown{
	0%{margin-top:0;}
	100%{margin-top:10px;}
}
@-moz-keyframes upDown{
	0%{margin-top:-10px;}
	100%{margin-top:10px;}
}
@-o-keyframes upDown{
	0%{margin-top:-10px;}
	100%{margin-top:10px;}
}
@-ms-keyframes upDown{
	0%{margin-top:-10px;}
	100%{margin-top:10px;}
}
@keyframes upDown{
	0%{margin-top:-10px;}
	100%{margin-top:10px;}
}



@-webkit-keyframes girl{
	0%{right:-400%;-webkit-transform:scale(0.1);}
	100%{right:-100px;-webkit-transform:scale(1);}
}
@-moz-keyframes girl{
	0%{right:-400%;-moz-transform:scale(0.1);}
	100%{right:-100px;-moz-transform:scale(1);}
}
@-o-keyframes girl{
	0%{right:-400%;-o-transform:scale(0.1);}
	100%{right:-100px;-o-transform:scale(1);}
}
@-ms-keyframes girl{
	0%{right:-400%;-ms-transform:scale(0.1);}
	100%{right:-100px;-ms-transform:scale(1);}
}
@keyframes girl{
	0%{right:-400%;transform:scale(0.1);}
	100%{right:-100px;transform:scale(1);}
}




@-webkit-keyframes cloudOne{
	0%{left:-30%;}
	100%{left:160%;}
}
@-moz-keyframes cloudOne{
	0%{left:-30%;}
	100%{left:160%;}
}
@-o-keyframes cloudOne{
	0%{left:-30%;}
	100%{left:160%;}
}
@-ms-keyframes cloudOne{
	0%{left:-30%;}
	100%{left:160%;}
}
@keyframes cloudOne{
	0%{left:-30%;}
	100%{left:160%;}
}

@-webkit-keyframes btm{
	0%{left:140%;}
	100%{left:-80%;}
}
@-moz-keyframes btm{
	0%{left:140%;}
	100%{left:-80%;}
}
@-o-keyframes btm{
	0%{left:140%;}
	100%{left:-80%;}
}
@-ms-keyframes btm{
	0%{left:140%;}
	100%{left:-80%;}
}
@keyframes btm{
	0%{left:140%;}
	100%{left:-80%;}
}

@-webkit-keyframes floatCloudmm{
	0%{left:100%;}
	100%{left:0}
}
@-moz-keyframes floatCloudmm{
	0%{left:100%;}
	100%{left:0}
}
@-o-keyframes floatCloudmm{
	0%{left:100%;}
	100%{left:0}
}
@-ms-keyframes floatCloudmm{
	0%{left:100%;}
	100%{left:0}
}
@keyframes floatCloudmm{
	0%{left:100%;}
	100%{left:0;}
}


@-webkit-keyframes floatCloudM{
	0%{left:120%;}
	100%{left:-30%}
}
@-moz-keyframes floatCloudM{
	0%{left:120%;}
	100%{left:-30%}
}
@-o-keyframes floatCloudM{
	0%{left:120%;}
	100%{left:-30%}
}
@-ms-keyframes floatCloudM{
	0%{left:120%;}
	100%{left:-30%}
}
@keyframes floatCloudM{
	0%{left:120%;}
	100%{left:-30%}
}


@-webkit-keyframes floatCloudT{
	0%{left:10%;}
	100%{left:80%}
}
@-moz-keyframes floatCloudT{
	0%{left:0;}
	100%{left:80%}
}
@-o-keyframes floatCloudT{
	0%{left:0;}
	100%{left:80%}
}
@-ms-keyframes floatCloudT{
	0%{left:0;}
	100%{left:80%}
}
@keyframes floatCloudT{
	0%{left:0;}
	100%{left:80%}
}

/*左右浮山*/
@-webkit-keyframes hills{
	0%{
		-webkit-transform-origin:75% 50%;
		-webkit-transform:rotate(0deg);
	}
	100%{
		-webkit-transform-origin:75% 50%;
		-webkit-transform:rotate(20deg);
	}
}
@-moz-keyframes hills{
	0%{
		-moz-transform-origin:75% 50%;
		-moz-transform:rotate(0deg);
	}
	100%{
		-moz-transform-origin:75% 50%;
		-moz-transform:rotate(20deg);
	}
}
@-o-keyframes hills{
	0%{
		-o-transform-origin:75% 50%;
		-o-transform:rotate(0deg);
	}
	100%{
		-o-transform-origin:75% 50%;
		-o-transform:rotate(20deg);
	}
}
@-ms-keyframes hills{
	0%{
		-ms-transform-origin:75% 50%;
		-ms-transform:rotate(0deg);
	}
	100%{
		-ms-transform-origin:75% 50%;
		-ms-transform:rotate(20deg);
	}
}
@keyframes hills{
	0%{
		transform-origin:75% 50%;
		transform:rotate(0deg);
	}
	100%{
		transform-origin:75% 50%;
		transform:rotate(20deg);
	}
}



/*主城左右移动*/
@-webkit-keyframes maintown{
	0%{left:0;}
	10%{left:-10px;}
	20%{left:-20px;}
	30%{left:-10px;}
	55%{left:0px;}
	70%{left:10px;}
	80%{left:20px;}
	90%{left:10px;}
	100%{left:0;}

}
@-moz-keyframes maintown{
	0%{left:0;}
	10%{left:-10px;}
	20%{left:-20px;}
	30%{left:-10px;}
	55%{left:0px;}
	70%{left:10px;}
	80%{left:20px;}
	90%{left:10px;}
	100%{left:0;}

}
@-o-keyframes maintown{
	0%{left:0;}
	10%{left:-10px;}
	20%{left:-20px;}
	30%{left:-10px;}
	55%{left:0px;}
	70%{left:10px;}
	80%{left:20px;}
	90%{left:10px;}
	100%{left:0;}

}
@-ms-keyframes maintown{
	0%{left:0;}
	10%{left:-10px;}
	20%{left:-20px;}
	30%{left:-10px;}
	55%{left:0px;}
	70%{left:10px;}
	80%{left:20px;}
	90%{left:10px;}
	100%{left:0;}

}
@keyframes maintown{
	0%{left:0;}
	10%{left:-10px;}
	20%{left:-20px;}
	30%{left:-10px;}
	55%{left:0px;}
	70%{left:10px;}
	80%{left:20px;}
	90%{left:10px;}
	100%{left:0;}

}





/* 弹入 */
@-webkit-keyframes bouncein{
    0%{opacity:0;-webkit-transform:scale(5);}
    50%{opacity:0.4;-webkit-transform:scale(3);}
    70%{opacity:0.8;-webkit-transform:scale(2);}
    100%{opacity:1;-webkit-transform:scale(1);}
}
@-moz-keyframes bouncein{
    0%{opacity:0;-moz-transform:scale(5);}
    50%{opacity:1;-moz-transform:scale(3);}
    70%{-moz-transform:scale(2);}
    100%{-moz-transform:scale(1);}
}
@-ms-keyframes bouncein{
    0%{opacity:0;-ms-transform:scale(5);}
    50%{opacity:1;-ms-transform:scale(3);}
    70%{-ms-transform:scale(2);}
    100%{-ms-transform:scale(1);}
}
@-o-keyframes bouncein{
    0%{opacity:0;-ms-transform:scale(5);}
    50%{opacity:1;-ms-transform:scale(3);}
    70%{-o-transform:scale(2);}
    100%{-o-transform:scale(1);}
}
@keyframes bouncein{
    0%{opacity:0;transform:scale(5);}
    50%{opacity:1;transform:scale(3);}
    70%{transform:scale(2);}
    100%{transform:scale(1);}
}


@-webkit-keyframes air{
	0%{
		-webkit-transform: scale(0.9, 0.9);
		transform: scale(0.9, 0.9);
		opacity: 0.5;
	}
	100%{
		-webkit-transform: scale(1.2, 1.2);
		transform: scale(1.2, 1.2);
		opacity: 1;
	}
}
@keyframes air{
	0%{
		transform: scale(0.9, 0.9);
		opacity: 0.5;
	}
	100%{
		transform: scale(1.2, 1.2);
		opacity: 1;
	}
}

@-moz-keyframes air{
	0%{
		-moz-transform: scale(0.9, 0.9);
		transform: scale(0.9, 0.9);
		opacity: 0.5;
	}
	100%{
		-moz-transform: scale(1.2, 1.2);
		transform: scale(1.2, 1.2);
		opacity: 1;
	}
}

@-o-keyframes air{
	0%{
		-o-transform: scale(0.9, 0.9);
		transform: scale(0.9, 0.9);
		opacity: 0.5;
	}
	100%{
		-o-transform: scale(1.2, 1.2);
		transform: scale(1.2, 1.2);
		opacity: 1;
	}
}

@-ms-keyframes air{
	0%{
		-ms-transform: scale(0.9, 0.9);
		transform: scale(0.9, 0.9);
		opacity: 0.5;
	}
	100%{
		-ms-transform: scale(1.2, 1.2);
		transform: scale(1.2, 1.2);
		opacity: 1;
	}
}


@-webkit-keyframes anipre{
	0%{
	-webkit-transform-origin: 0px 0px;
		}
	100%{
	transform: matrix(1, 0, 0, 1, 0, 0);
	-webkit-transform-origin: 0px 0px;
	-webkit-transform:matrix3d(0.73913, -0.086957, 0, -0.00061, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		}	
	
	}


@keyframes anipre{
	0%{
	transform-origin: 0px 0px;
		}
	100%{
	transform: matrix(1, 0, 0, 1, 0, 0);
	transform-origin: 0px 0px;
	transform:matrix3d(0.73913, -0.086957, 0, -0.00061, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		}	
	
}


@-ms-keyframes anipre{
	0%{
	-ms-transform-origin: 0px 0px;
		}
	100%{
	transform: matrix(1, 0, 0, 1, 0, 0);
	-ms-transform-origin: 0px 0px;
	-ms-transform:matrix3d(0.73913, -0.086957, 0, -0.00061, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		}	
	
}


@-moz-keyframes anipre{
	0%{
	-moz-transform-origin: 0px 0px;
		}
	100%{
	transform: matrix(1, 0, 0, 1, 0, 0);
	-moz-transform-origin: 0px 0px;
	-moz-transform:matrix3d(0.73913, -0.086957, 0, -0.00061, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		}	
	
}



@-o-keyframes anipre{
	0%{
	-o-transform-origin: 0px 0px;
		}
	100%{
	transform: matrix(1, 0, 0, 1, 0, 0);
	-o-transform-origin: 0px 0px;
	-o-transform:matrix3d(0.73913, -0.086957, 0, -0.00061, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		}	
	
	}



@-webkit-keyframes anicur{
	0%{
		-webkit-transform-origin: 0px 0px;
	}
	100%{
		transform: matrix(1, 0, 0, 1, 0, 0);
		-webkit-transform-origin: 0px 0px;
		-webkit-transform: matrix3d(1.210526, 0, 0, 0, 0, 1.210526, 0, 0, 0, 0, 1, 0, -26, -30, 0, 1);
	}	
}



@-ms-keyframes anicur{
	0%{
		-ms-transform-origin: 0px 0px;
	}
	100%{
		transform: matrix(1, 0, 0, 1, 0, 0);
		-ms-transform-origin: 0px 0px;
		-ms-transform: matrix3d(1.210526, 0, 0, 0, 0, 1.210526, 0, 0, 0, 0, 1, 0, -26, -30, 0, 1);
	}	
}


@-moz-keyframes anicur{
	0%{
		-moz-transform-origin: 0px 0px;
	}
	100%{
		transform: matrix(1, 0, 0, 1, 0, 0);
		-moz-transform-origin: 0px 0px;
		-moz-transform: matrix3d(1.210526, 0, 0, 0, 0, 1.210526, 0, 0, 0, 0, 1, 0, -26, -30, 0, 1);
	}	
}

@-o-keyframes anicur{
	0%{
		-o-transform-origin: 0px 0px;
	}
	100%{
		transform: matrix(1, 0, 0, 1, 0, 0);
		-o-transform-origin: 0px 0px;
		-o-transform: matrix3d(1.210526, 0, 0, 0, 0, 1.210526, 0, 0, 0, 0, 1, 0, -26, -30, 0, 1);
	}	
}

@keyframes anicur{
	0%{
		transform-origin: 0px 0px;
	}
	100%{
		transform: matrix(1, 0, 0, 1, 0, 0);
		transform-origin: 0px 0px;
		transform: matrix3d(1.210526, 0, 0, 0, 0, 1.210526, 0, 0, 0, 0, 1, 0, -26, -30, 0, 1);
	}	
}

	
	
@-webkit-keyframes aninext{
	0%{
		-webkit-transform-origin: 0px 0px;
	}
	100%{
		transform: matrix(1, 0, 0, 1, 0, 0);
		-webkit-transform-origin: 0px 0px;
		-webkit-transform: matrix3d(1.105263, 0.105263, 0, 0.000739, 0, 1.210526, 0, 0, 0, 0, 1, 0, 30, -30, 0, 1);
	}
}

@-ms-keyframes aninext{
	0%{
		-ms-transform-origin: 0px 0px;
	}
	100%{
		transform: matrix(1, 0, 0, 1, 0, 0);
		-ms-transform-origin: 0px 0px;
		-ms-transform: matrix3d(1.105263, 0.105263, 0, 0.000739, 0, 1.210526, 0, 0, 0, 0, 1, 0, 30, -30, 0, 1);
	}
}
	
@-moz-keyframes aninext{
	0%{
		-moz-transform-origin: 0px 0px;
		}
	100%{
		transform: matrix(1, 0, 0, 1, 0, 0);
		-moz-transform-origin: 0px 0px;
		-moz-transform: matrix3d(1.105263, 0.105263, 0, 0.000739, 0, 1.210526, 0, 0, 0, 0, 1, 0, 30, -30, 0, 1);
	}


}
	
@-o-keyframes aninext{
	0%{
		-o-transform-origin: 0px 0px;
	}
	100%{
		transform: matrix(1, 0, 0, 1, 0, 0);
		-o-transform-origin: 0px 0px;
		-o-transform: matrix3d(1.105263, 0.105263, 0, 0.000739, 0, 1.210526, 0, 0, 0, 0, 1, 0, 30, -30, 0, 1);
	}	
}
	
@keyframes aninext{
	0%{
		transform-origin: 0px 0px;
	}
	100%{
		transform: matrix(1, 0, 0, 1, 0, 0);
		transform-origin: 0px 0px;
		transform: matrix3d(1.105263, 0.105263, 0, 0.000739, 0, 1.210526, 0, 0, 0, 0, 1, 0, 30, -30, 0, 1);
	}
}