html{   
    width: 300px;
    height: 250px;   
    overflow: hidden;
    position: relative;
    margin: 0;
}
body{
    margin: 0;
    height: 100%;
    width: 100%;
}
div{
    position: absolute;
    animation-duration: 30s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
	overflow: hidden;
}
a{
    width: 100%;
    height:100%;
    display: block;

}
.main {
    border: 1px solid #333;
    height: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.back {
    height: 100%;
    width: 100%;
    background: url("back.jpg") left top no-repeat;
}
.bg1 {
    height: 100%;
    width: 100%;
	/*background: red;*/
    background: url("bg_1.jpg") left top no-repeat;
	animation-name: bg1 ;
}
.bg2{
    height: 100%;
    width: 100%;
   /* background: green;*/
	background: url("bg_2.jpg") left top no-repeat;
	animation-name: bg2 ;
}
.bg3{
    height: 100%;
    width: 100%;
    /*background: blue;*/
	background: url("bg_3.jpg") left top no-repeat;
	animation-name: bg3 ;
}
.rect{
    bottom: 9px;
    left: 90px;
    background: url("rect.png") left top no-repeat;
    height: 43px;
    width: 101px;
    animation-name: rect;
}
.arr{
    top: 68px;
    left: 148px;
    background: url("arr.png")left top no-repeat;
    height: 86px;
    width: 9px; 
	transform-origin: 0 85%;
	animation-name: arr;
}
.fog{
    bottom: 0px;    
    background: url("fog.png")left top repeat-x;
    height: 216px;
    width: 2000px; 	
	animation-name: fog;	
}
.txt3 , .txt3, .txt4   {top: 20px; }
.txt1 {   
   top:10px;
   left:40px;
   background: url("txt1.png") left top no-repeat;
    height: 25px;
    width: 200px;		
    animation-name: txt1;
}
.txt2 {   
    top: 35px;
    left: 40px;
	background: url("txt2.png") left top no-repeat;
    height: 25px;
    width: 220px;	
    animation-name: txt2;
}
.txt3 {       
   background: url("txt3.png") left top no-repeat;
    height: 25px;
    width: 300px;	
    animation-name: txt3;
	}
.txt4 {    
   background: url("txt4.png") left top no-repeat;
    height: 20px;
    width: 300px;	
    animation-name: txt4;
	}
.txt5 {    
   top:15px;
   right:15px;
   background: url("txt5.png") left top no-repeat;
    height: 50px;
    width: 200px;	
    animation-name: txt5;
	}	
.txt6 {    
   top:12px;
   right:9px;
   background: url("txt6.png") left top no-repeat;
   height: 50px;
   width: 200px;	
   animation-name: txt6;
	}		
.logo {
   background: url("logo.png") left top no-repeat;
    height: 42px;
    width: 88px;
    bottom: 9px;
    right: 9px;
    animation-name: logo;	
}
.logo2 {
   background: url("logo2.png") left top no-repeat;
    height: 25px;
    width: 125px;
    top: 10px;
    left: 9px;
    animation-name: logo2;	
}
.dis1{   
    background: url("legal_01.png") left top no-repeat;
    width: 300px;
    height: 300px;
    animation-name: dis1;
    top: 0px;   
    left: 0px;
}

.fon{
    width: 100%;
    height: 100%;
    background-color: #000;
    animation-name: fon;
}
/*frame2*/
@keyframes logo {
    0%,70% {opacity: 1}   
	78%,100%{opacity: 0}
}
@keyframes txt1 {
    0% {top: -30%; opacity: 0;}
    2% ,12%{top: 10px; opacity: 1;}
	14%,100%{opacity: 0;}
}
@keyframes txt2 {
    0%,3% {opacity: 0;}
    8%,12% {opacity: 1;}
	14%,100%{opacity: 0;}
}
@keyframes fog {
    0% {left: 0; opacity: 0.5;}	
	13%{opacity: 0.5;}
	15%,45%	{opacity: 0;}
	48%,90%{opacity: 0.5;}
	100%{left: -270px;}
}
/*frame2*/
@keyframes bg1 {
    0%,13% {opacity: 0;}
    15% ,25%{opacity: 1;}
	27%,100%{opacity: 0;}
}

@keyframes txt3 {
   0%,13% {opacity: 0;}
    15% ,33%{opacity: 1;}
	35%,100%{opacity: 0;}
}
/*frame3*/
@keyframes bg2 {
    0%,20% {opacity: 0;}
    25% ,35%{opacity: 1;}
	37%,100%{opacity: 0;}
}
@keyframes arr {
    0%,20%,35%,100% {opacity: 0;}
	25%,33%{opacity: 1;}
	25% {transform: rotate(-30deg)}
	32%{transform: rotate(60deg)}
	
}
/*frame4*/
@keyframes bg3 {
    0%,33% {opacity: 0;}
    35% ,45%{opacity: 1;}
	47%,100%{opacity: 0;}
}
@keyframes txt4 {
    0%,33% {opacity: 0;}
    36% ,43%{opacity: 1;}
	45%,100%{opacity: 0;}
}
/*frame5*/
@keyframes txt5 {
    0%,43%{opacity: 0; right:-100%;}
    47%,60% {opacity: 1; right:15px;}
	62%,100%{opacity: 0;}
}
@keyframes logo2 {
    0%,43%{opacity: 0;}
    50%,100% {opacity: 1;}
}
@keyframes txt6 {
    0%,58%{opacity: 0; top:-100%;}
    63%,100% {opacity: 1; top: 12px;}
}
@keyframes rect {
    0%,45% {opacity: 0;}
    50%,100%  {opacity: 1;}
}

/*frame-disclamer*/
@keyframes  fon {
    0%,98%{opacity: 1;}
	2%,97% {opacity: 0;}    
}

@keyframes dis1 {
    0%,73% {opacity: 0;}   
    75%,99% {opacity: 1;}
	100% {opacity: 0;}
}