﻿/*世界杯首页专题样式*/
body {
	background-image: url(/images/worldcup/bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
.worldcup_div { width:970px; height:118px; position:relative; margin:0 auto; overflow:hidden}
	.logoball { 
		animation:ballx 5s infinite linear;
        -webkit-animation:ballx 5s infinite linear; }
	@keyframes ballx
{
0%  {transform:rotate(0)}
100% {transform:rotate(360deg)}

}
	.wc-ball {
	left: 385px;
	top:44px;
	position:absolute;
	animation:ball 2.5s infinite;
	-webkit-animation:ball 2.5s infinite;
}



.fball { 
		animation:ball2s 0.7s infinite linear;
        -webkit-animation:ball2s 0.7s infinite linear; }
	@keyframes ball2s
{
0%  {transform:rotate(0)}
100% {transform:rotate(-360deg)}

}

	.flyball {
	left: 795px;
	top:120px;
	position:absolute;
	animation:flyball 4.5s infinite linear ;
	-webkit-animation:flyball 4.5s infinite linear ;
}
@keyframes flyball{  
     0% { transform: translate3d(0px, 0, 0);        } 
     5% { transform: translate3d(-30px, -50px, 0); }
     10% { transform: translate3d(-60px, -110px, 0); }
	11% { transform: translate3d(-70px, -109px, 0); }
	15% { transform: translate3d(-98px, -90px, 0); }
     18% { transform: translate3d(-115px, -60px, 0); } 
    28% { transform: translate3d(-180px, 0, 0); } 
	100% { transform: translate3d(0, 0, 0); } }
	
.fr-ball { 
		animation:fr 1.5s infinite linear;
        -webkit-animation:fr 1.5s infinite linear;width: 66%; }
	@keyframes fr
{
0%  {transform:rotate(0)}
100% {transform:rotate(720deg)}

}

	.fly-right-ball  {
	left: 800px; 
	top:120px;
	position:absolute;
	animation:flyball2 5.4s infinite linear 0.4s ;
	-webkit-animation:flyball2 5.4s infinite linear 0.4s ;
}
@keyframes flyball2{  
     0% { transform: translate3d(0px, 0, 0);        } 
     5% { transform: translate3d(20px, -30px, 0); }
     10% { transform: translate3d(45px, -70px, 0); }
	11% { transform: translate3d(53px, -69px, 0); }
	15% { transform: translate3d(68px, -50px, 0); }
     18% { transform: translate3d(75px, -30px, 0); } 
    22% { transform: translate3d(85px, 0, 0); } 
	100% { transform: translate3d(0, 0, 0); } }
		.light {animation:lig 0.8s infinite linear ;
        -webkit-animation:lig 0.8s infinite linear;
}
		
			@keyframes lig
{
0%  {opacity: 0.9}
50% {opacity: 0.4 }
100% {opacity: 0.9 }
}

@-webkit-keyframes lig 
{
0%  {opacity: 0.8}
50% {opacity: 0.3 }
100% {opacity: 0.8 }
}
		.l-flash {animation:ll 3.5s infinite linear;
        -webkit-animation:ll 3.5s infinite linear; width: 70px; height: 400px; position: absolute;
	left: 750px;
	top: -36px}
			@keyframes ll
{
0%  {transform:rotate(0)}
25% {transform:rotate(20deg)}
	50%  {transform:rotate(0)}
	75% {transform:rotate(-15deg)}
	100%  {transform:rotate(0)}
}
		
		.light2 {;animation:lig2 0.8s infinite linear ;
        -webkit-animation:lig2 0.8s infinite linear;
}
		
			@keyframes lig2
{
0%  {opacity: 0.9}
50% {opacity: 0.4 }
100% {opacity: 0.9 }
}

@-webkit-keyframes lig 
{
0%  {opacity: 0.8}
50% {opacity: 0.4 }
100% {opacity: 0.8 }
}
				.l-flash-2 {animation:ll2 2s infinite linear;
        -webkit-animation:ll2 2s infinite linear; width: 40px; height: 228px; position: absolute;
	left: 800px;
	top: 16px}
			@keyframes ll2
{
0%  {transform:rotate(0)}
25% {transform:rotate(-11deg)}
	50%  {transform:rotate(0)}
	75% {transform:rotate(15deg)}
	100%  {transform:rotate(0)}
}
		
		.wcball { width: 30px; height: 30px; left: 670px; bottom: -130px;
			animation:wcball 2.5s infinite linear; position: relative;
        -webkit-animation:wcball 2.5s infinite linear; }
	@keyframes wcball
{
0%  {transform:rotate(0)}
100% {transform:rotate(-360deg)}

}
		.out {position: absolute;top:-130px}