@charset "utf-8";
/* CSS Document */

body { margin:0px; padding:0px }

.bg { position:relative; width:970px; height:250px; background-image:url(images/BG.png); z-index:100; overflow:hidden;}

.led { position:absolute; left:273px; top:24px; z-index:700; animation: led 16s ease-out infinite 1s; }

.sao1 { position:absolute; left:577px; top:24px; z-index:799; animation: sao1 16s ease-out infinite 1s; mix-blend-mode: screen; visibility:hidden; }

.denwhite { position:absolute; z-index:750; animation: denwhite 16s ease-out infinite 1s;}

.denvang { position:absolute; z-index:751; animation: denvang 16s ease-out infinite 1s; }

.denred { position:absolute; z-index:752; animation: denred 16s ease-out infinite 1s; }

.dentim { position:absolute; z-index:753; animation: dentim 16s ease-out infinite 1s; }

.dencyan { position:absolute; z-index:754; animation: dencyan 16s ease-out infinite 1s; }

.bantay { position:absolute; z-index:760; animation: bantay 16s ease-out infinite 1s;}

.tron { position:absolute; left:132px; top:162px; z-index:761; animation: tron 16s ease-out infinite 1s;}

.roomgold { position:absolute; z-index:780; animation: roomgold 16s ease-out infinite 1s;}

.roomred { position:absolute; z-index:781; animation: roomred 16s ease-out infinite 1s; }

.roomcyan { position:absolute; z-index:783; animation: roomcyan 16s ease-out infinite 1s; }

.roomviolet { position:absolute; z-index:782; animation: roomviolet 16s ease-out infinite 1s; }

.wifi1 { position:absolute; z-index:790; animation: wifi1 16s ease-out infinite 1s;}

.wifi2 { position:absolute; z-index:791; animation: wifi2 16s ease-out infinite 1s;}

.wifi3 { position:absolute; z-index:792; animation: wifi3 16s ease-out infinite 1s;}

@keyframes led {
	0%, 1% { opacity:0; transform:scaleY(0) translateY(50px) translateX(-50px); }
	5%, 55% { opacity:1; transform:scaleY(1) translateY(0px) translateX(0px); }
	56%, 100% { opacity:0; transform:scaleY(1) translateY(0px) translateX(0px); }
	}
	
@keyframes sao1 {
	0%, 5% { opacity:0; transform: scale(2,2) rotate(0deg); left:261px;}
	5.5% { opacity:1; transform: scale(2,2) rotate(0deg); left:261px; visibility:visible;}
	10% { opacity:3; transform: scale(1,1) rotate(360deg); left:577px; }
	15%, 100% { opacity:0; transform: scale(5,5) rotate(0deg); left:577px;}
}	

@keyframes denwhite  {
	0%, 4% {opacity:1; transform:translateY(200px);}
	6%, 55% {opacity:1; transform:translateY(0px);}
	56%, 100% {opacity:0; transform:translateY(0px);}
	}

@keyframes bantay {
	0%, 6% {opacity:1; transform:translateX(-200px);}
	8%, 12% {opacity:1; transform:translateX(0px);}
	15%, 23% {opacity:1; transform:translateX(10px);}
	26%, 34% {opacity:1; transform:translateX(0px);}
	37%, 45% {opacity:1; transform:translateX(10px);}
	48%, 55% {opacity:1; transform:translateX(0px);}
	56%, 100% {opacity:0; transform:translateY(100px);}
	}		
	
@keyframes tron {
	0%, 6% {opacity:1; transform:translateX(-200px); left:132px;}
	8%, 12% {opacity:1; transform:translateX(0px); left:132px;}
	15%, 23% {opacity:1; transform:translateX(0px); left:148px; top:161px;}
	26%, 34% {opacity:1; transform:translateX(0px); left:144px; top:168px;}
	37%, 45% {opacity:1; transform:translateX(0px); left:130px; top:171px;}
	48%, 55% {opacity:1; transform:translateX(0px); left:123px; top:158px;}
	56%, 100% {opacity:0; transform:translateY(100px);}
	}		

@keyframes roomgold {
	0%, 8% { opacity:0;}
	15%, 55% { opacity:1; }  
	56%, 100% {opacity:0;}
	}

@keyframes roomred {
	0%, 23% { opacity:0;}
	26%, 55% { opacity:1; }  
	56%, 100% {opacity:0;}
	}

@keyframes roomviolet {
	0%, 34% { opacity:0;}
	37%, 55% { opacity:1; }  
	56%, 100% {opacity:0;}
	}

@keyframes roomcyan {
	0%, 45% { opacity:0;}
	48%, 55% { opacity:1; }  
	56%, 100% {opacity:0;}
	}

@keyframes denvang {
	0%, 8% { opacity:0;}
	15%, 24% { opacity:1; }  
	25%, 100% {opacity:0;}
	}
	
@keyframes denred {
	0%, 23% { opacity:0;}
	26%, 35% { opacity:1; }  
	36%, 100% {opacity:0;}
	}		
	
@keyframes dentim {
	0%, 34% { opacity:0;}
	37%, 48% { opacity:1; }  
	49%, 100% {opacity:0;}
	}

@keyframes dencyan {
	0%, 45% { opacity:0;}
	48%, 55% { opacity:1; }  
	56%, 100% {opacity:0;}
	}


@keyframes wifi1 {
	0%, 7% { opacity:0; }
	8% { opacity:1; }
	10% {opacity:0;}
	11%, 15% { opacity:1;}
	16% { opacity:0;}
	17%, 22% { opacity:1}
	23% { opacity:0;}
	24%, 30% { opacity:1;}
	31% { opacity:0;}
	32%, 38% { opacity:1;}
	39% { opacity:0;}
	40%, 46% { opacity:1;}
	47% { opacity:0;}
	48%, 53% { opacity:1;}
	54%, 100% { opacity:0;}
	}

@keyframes wifi2 {
	0%, 8% { opacity:0; }
	9%  { opacity:1; }
	11% {opacity:0;}
	12%, 16% { opacity:1; }
	17% { opacity:0;}
	18%, 23% { opacity:1}
	24% { opacity:0;}
	25%, 31% { opacity:1;}
	32% { opacity:0;}
	33%, 39% { opacity:1;}
	40% { opacity:0;}
	41%, 47% { opacity:1;}
	48% { opacity:0;}
	49%, 54% { opacity:1;}
	55%, 100% { opacity:0;}
	} 
 

@keyframes wifi3 {
	0%, 9% { opacity:0; }
	10% { opacity:1; }
	12% {opacity:0;}
	13%, 17% { opacity:1; }
	18% { opacity:0;}
	19%, 24% { opacity:1}
	25% { opacity:0;}
	26%, 32% { opacity:1;}
	33% { opacity:0;}
	34%, 40% { opacity:1;}
	41% { opacity:0;}
	42%, 48% { opacity:1;}
	49% { opacity:0;}
	50%, 55% { opacity:1;}
	56%, 100% { opacity:0;}
}


.logo2 { position:absolute; z-index:500; animation: logo2 16s ease-out infinite 1s; visibility: hidden; }

.light1 { position:absolute; z-index:500; animation: light1 16s ease-out infinite 1s; visibility: hidden; }

.light2 { position:absolute; z-index:500; animation: light2 16s ease-out infinite 1s; visibility: hidden;}

.light3 { position:absolute; z-index:500; animation: light3 16s ease-out infinite 1s;visibility: hidden;}

.light4 { position:absolute; z-index:500; animation: light4 16s ease-out infinite 1s; visibility: hidden;}

.light5 { position:absolute; z-index:500; animation: light5 16s ease-out infinite 1s; visibility: hidden;}	

.light6 { position:absolute; z-index:500; animation: light6 16s ease-out infinite 1s; visibility: hidden;}

.sao2 { position:absolute; left:41px; top:103px; z-index:550; animation: sao2 16s ease-out infinite 1s; mix-blend-mode: screen; visibility:hidden; }

.sao3 { position:absolute; left:171px; top:140px; z-index:550; animation: sao3 16s ease-out infinite 1s; mix-blend-mode: screen; visibility:hidden; }

.sao4 { position:absolute; left:303px; top:121px; z-index:550; animation: sao4 16s ease-out infinite 1s; mix-blend-mode: screen; visibility:hidden; }

.sao5 { position:absolute; left:452px; top:111px; z-index:550; animation: sao5 16s ease-out infinite 1s; mix-blend-mode: screen; visibility:hidden; }

.sao6 { position:absolute; left:593px; top:100px; z-index:550; animation: sao6 16s ease-out infinite 1s; mix-blend-mode: screen; visibility:hidden; }

.sao7 { position:absolute; left:733px; top:107px; z-index:550; animation: sao7 16s ease-out infinite 1s; mix-blend-mode: screen; visibility:hidden; }
	
.tieuchuan { position:absolute; z-index:500; animation: tieuchuan 16s ease-out infinite 1s; visibility: hidden; }

.cungcap { position:absolute; z-index:500; animation: cungcap 16s ease-out infinite 1s; visibility: hidden; }

.sanghon { position:absolute; z-index:510; animation: sanghon 16s ease-out infinite 1s; visibility: hidden;}
	
	
@keyframes logo2 {
	0%, 55% {opacity:0; transform:translateX(-100px);}
	60%, 100% {opacity:1; transform:translateX(0px); visibility: visible;}
	}
	
@keyframes light1 {
	0%, 59% {opacity:0; transform:translateY(200px);}
	60%, 100% {opacity:1; transform:translateX(0px); visibility: visible;}
	}

@keyframes light2 {
	0%, 60% {opacity:0; transform:translateY(200px);}
	61%, 100% {opacity:1; transform:translateX(0px); visibility: visible;}
	}
	
@keyframes light3 {
	0%, 61% {opacity:0; transform:translateY(200px);}
	62%, 100% {opacity:1; transform:translateX(0px); visibility: visible;}
	}
	
@keyframes light4 {
	0%, 62% {opacity:0; transform:translateY(200px);}
	63%, 100% {opacity:1; transform:translateX(0px); visibility: visible;}
	}
		
@keyframes light5 {
	0%, 63% {opacity:0; transform:translateY(200px);}
	64%, 100% {opacity:1; transform:translateX(0px); visibility: visible;}
	}
	
@keyframes light6 {
	0%, 64% {opacity:0; transform:translateY(200px);}
	65%, 100% {opacity:1; transform:translateX(0px); visibility: visible;}
	}
	
@keyframes cungcap {
	0%, 66% {opacity:0; transform:translateY(20px) ;}
	68%, 80% {opacity:1; transform:translateY(0px) ; visibility: visible; }
	81%, 100% {opacity:0; transform:translateX(200px) scaleY(1);}
	}	

@keyframes sanghon {
	0%, 80% {opacity:0; transform:translateY(-50px) ;}
	83%, 100% {opacity:1; transform:translateY(0px) ; visibility: visible; }
	}
	
@keyframes tieuchuan {
	0%, 64% {opacity:0; transform:translateX(100px) ;}
	66%, 100% {opacity:1; transform:translateX(0px) ; visibility: visible; }
	
	}	
		
@keyframes sao2 {
	0%, 80% {opacity:0; transform:scale(0.8,0.8) rotate(0deg);}
	82% {opacity:3; transform:scale(1,1) rotate(0deg); visibility:visible;}
	84%, 100% {opacity:0; transform:scale(3,3) rotate(0deg);}
	}

@keyframes sao3 {
	0%, 80% {opacity:0; transform:scale(0.8,0.8) rotate(0deg);}
	83% {opacity:3; transform:scale(1,1) rotate(0deg); visibility:visible;}
	85%, 100% {opacity:0; transform:scale(3,3) rotate(0deg);}
	}

@keyframes sao4 {
	0%, 80% {opacity:0; transform:scale(0.8,0.8) rotate(0deg);}
	84% {opacity:3; transform:scale(1,1) rotate(0deg); visibility:visible;}
	86%, 100% {opacity:0; transform:scale(3,3) rotate(0deg);}
	}

@keyframes sao5 {
	0%, 80% {opacity:0; transform:scale(0.8,0.8) rotate(0deg);}
	85% {opacity:3; transform:scale(1,1) rotate(0deg); visibility:visible;}
	87%, 100% {opacity:0; transform:scale(3,3) rotate(0deg);}
	}

@keyframes sao6 {
	0%, 80% {opacity:0; transform:scale(0.8,0.8) rotate(0deg);}
	86% {opacity:3; transform:scale(1,1) rotate(0deg); visibility:visible;}
	88%, 100% {opacity:0; transform:scale(3,3) rotate(0deg);}
	}
	
@keyframes sao7 {
	0%, 80% {opacity:0; transform:scale(1,1) rotate(0deg);}
	87% {opacity:3; transform:scale(1.5,1.5) rotate(0deg); visibility:visible;}
	89%, 100% {opacity:0; transform:scale(2,2) rotate(0deg);}
	}