*{margin:0;padding:0;list-style:none;}
body{font-family:microsoft yahei;}

	@keyframes scaleDraw {  
            0%{
				opacity:0;
                transform: scale(5); 
            }
            25%{
                transform: scale(4);
            }
            50%{
                transform: scale(3);
            }
            75%{
                transform: scale(2);
				opacity:10;
            }
            100%{
                transform: scale(1);
				opacity:10;
            }
        }
		@keyframes show {  
            0%{
				opacity:0; 
            }
            
            100%{
				opacity:10;
            }
        }
    #logo1{
			text-align:center;
        }
	.logo1{animation: scaleDraw 4s 0s linear;}
	.ui_base{ color:#c59361;font-size:16px;z-index:99;position:absolute;top:30%;width:100%;animation: hide 500ms 8s ease-in 1 both;}
	
	.ball_base{position:absolute;top:20%;left:20%;z-index:99}
	.ball{z-index:99;line-height:2}
	
        .yin1{
          position:absolute;
            -webkit-animation: myfirst1 1000ms 4s ease-in 1 both;
			
        }
        .yin2{
          position:absolute;
            -webkit-animation: myfirst2 1000ms 4.4s ease-in 1 both;
			
        }
        .yin3{
          position:absolute;
		  
            -webkit-animation: myfirst3 1000ms 4.7s ease-in 1 both;
			
        }
        .yin4{
          position:absolute;
		  
            -webkit-animation: myfirst4 1000ms 4.8s ease-in 1 both;
			
        }
        .yin5{
          position:absolute;
		  
            -webkit-animation: myfirst5 1000ms 4.4s ease-in 1 both;
			
        }
        .yin6{
          position:absolute;
		 
            -webkit-animation: myfirst6 1000ms 5s ease-in 1 both;
			
        }
        .yin7{
          position:absolute;
		  
            -webkit-animation: myfirst7 1000ms 4.6s ease-in 1 both;
        }
		
@keyframes myfirst1
{
0%   { top:-300px;opacity:0}
100% { left:30%;top:-12%;opacity:10}
}	
@keyframes myfirst2
{
0%   { left:1800px; top:20px;opacity:0}
100% {left:60%; top:20%;opacity:10}
}	
@keyframes myfirst3
{
0%   { left:1800px; top:60%;opacity:0}
100% {left:60%; top:46%;opacity:10}
}	
@keyframes myfirst4
{
0%   { left:800px; top:90%;opacity:0}
100% {left:55%; top:82%;opacity:10}
}	
@keyframes myfirst5
{
0%   { left:-300px; top:90%;opacity:0}
100% {left:24%; top:95%;opacity:10}
}	
@keyframes myfirst6
{
0%   { left:-400px; top:40%;opacity:0}
100% {left:18%; top:50%;opacity:10}
}	
@keyframes myfirst7
{
0%   { left:-600px; top:10%;opacity:0}
100% {left:16%; top:20%;opacity:10}
}	
@keyframes hide
{
0%   { opacity:10}
100% {opacity:0;}
}
.ball1{text-align:center}


@media (min-width: 991px) {
	.ui_base{font-size:24px;}
}
@media (max-width: 600px) {
	.ui_base{font-size:10px;top:22%;}
	.logo1 img{width:120px;}
	
	@keyframes myfirst1
	{
	0%   { top:-300px;opacity:0}
	100% { left:24%;top:-12%;opacity:10}
	}	
	@keyframes myfirst2
	{
	0%   { left:1800px; top:20px;opacity:0}
	100% { left:67%; top:3%;opacity:10}
	}	
	@keyframes myfirst3
	{
	0%   { left:1800px; top:60%;opacity:0}
	100% { left:64%; top:16%;opacity:10}
	}	
	@keyframes myfirst4
	{
	0%   { left:800px; top:90%;opacity:0}
	100% { left:38%; top:42%;opacity:10}
	}	
	@keyframes myfirst5
	{
	0%   { left:-300px; top:90%;opacity:0}
	100% { left:10%; top:34%;opacity:10}
	}	
	@keyframes myfirst6
	{
	0%   { left:-400px; top:40%;opacity:0}
	100% { left:6%; top:18%;opacity:10}
	}	
	@keyframes myfirst7
	{
	0%   { left:-600px; top:10%;opacity:0}
	100% { left:6%; top:4%;opacity:10}
	}	
}