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

body { margin:0; padding:0;}

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

.vrg { position:absolute; z-index:200; left: 308px; top: 62px; animation: vrg 20s ease-out infinite 0s;}

.tap-doan { position:absolute; z-index:203;  animation: tap-doan 20s ease-out infinite 0s; }

.pic { position:absolute; z-index:205;  animation: pic 20s ease-out infinite 0s; }

.sao { position:absolute; z-index:210; left: 268px; top: 23px;  animation: sao 20s ease-out infinite 0s; mix-blend-mode: screen;}


.bg2 { position:absolute; z-index:300; animation: bg2 20s ease-out infinite 0s; visibility: hidden;}

.geru { position:absolute; z-index:301; left: 279px; top: 62px; animation: geru 20s ease-out infinite 0s; visibility: hidden; }

.ball1 { position:absolute; z-index:350; left: 400px; top: 148px; animation: ball1 20s ease-out infinite 0s; visibility: hidden; }

.ball2 { position:absolute; z-index:350; left: 522px; top: 148px; animation: ball2 20s ease-out infinite 0s; visibility: hidden; }

.ball3 { position:absolute; z-index:350; left: 638px; top: 148px; animation: ball3 20s ease-out infinite 0s; visibility: hidden; }

.sao1 { position:absolute; z-index:351; left: 662px; top: 110px;  animation: sao1 20s ease-out infinite 0s; mix-blend-mode: screen; visibility: hidden;}

.sao2 { position:absolute; z-index:351; left: 485px; top: 161px;  animation: sao2 20s ease-out infinite 0s; mix-blend-mode: screen; visibility: hidden;}

.sao3 { position:absolute; z-index:351; left: 391px; top: 95px;  animation: sao3 20s ease-out infinite 0s; mix-blend-mode: screen; visibility: hidden;}

.web { position:absolute; z-index:352; animation: web 20s ease-out infinite 0s; visibility: hidden; }

.mask { position:absolute; z-index:304; left: 0px; top: 0px; animation: mask 20s ease-out infinite 0s; visibility: hidden;}

.xoet { position:absolute; z-index:303; left: 172px; top: 35px; animation: xoet 20s ease-out infinite 0s; mix-blend-mode: overlay; visibility: hidden;}


.bg3 {position: absolute; z-index: 400; animation: bg3 20s ease-out infinite 0s; visibility: hidden;}

.hop { position:absolute; z-index:402; animation: hop 20s ease-out infinite 0s; visibility: hidden;}

.goi { position:absolute; z-index:403; animation: goi 20s ease-out infinite 0s; visibility: hidden;}

.nem { position:absolute; z-index:404; animation: nem 20s ease-out infinite 0s; visibility: hidden;}

.dc-2 { position:absolute; z-index:402; animation: dc-2 20s ease-out infinite 0s; visibility: hidden;}

.sao4 { position:absolute; z-index:451; left: 659px; top: 80px;  animation: sao4 20s ease-out infinite 0s; mix-blend-mode: screen; visibility: hidden;}

.sao5 { position:absolute; z-index:452; left: 421px; top: 43px;  animation: sao5 20s ease-out infinite 0s; mix-blend-mode: screen; visibility: hidden;}

.sao6 { position:absolute; z-index:453; left: 175px; top: 104px;  animation: sao6 20s ease-out infinite 0s; mix-blend-mode: screen; visibility: hidden;}


@keyframes vrg {
    0%, 2% {opacity:0; transform: scaleY(0) translateY(-70px);}
    5%, 30% {opacity:1; transform: scaleY(1) translateY(0px) ; }
    32%, 100% {opacity:0; transform: scaleY(1) translateY(0px); }
}


@keyframes tap-doan {
    0% {opacity:0; transform: translateX(-20px);} 
	3%, 30% {opacity:1; transform: translateX(0px); }
    32%, 100% {opacity:0; transform: translateX(0px); }
}

@keyframes pic {
    0%, 4%  {opacity:0; transform: translateX(-100px) scale(2,2);}
    7%, 30% {opacity:1; transform: translateX(0px) scale(1,1);  }
    32%, 100% {opacity:0; transform: translateX(0px) scale(1,1);  }
}

@keyframes sao {
    0%, 11% {opacity:1; transform: rotate(0deg) scale(0,0) ;}
    18%  {opacity:3; transform: rotate(180deg) scale(0.7,0.7) ; visibility: visible;  }
	25%, 100%  {opacity:0; transform:rotate(250deg)  scale(1,1) ;  }
	}


@keyframes bg2 {
    0%,30% {opacity:0; ;}
    32%, 100% {opacity:1; visibility: visible;  }
}

@keyframes geru {
    0%, 32% {opacity:0; transform: translateY(-30px) scale(0,0);}
    34%, 100% {opacity:1; transform: translateY(0px) scale(1,1); visibility: visible;  }
}

@keyframes ball1 {
    0%, 34% {opacity:0; transform:  scale(0,0) rotate(360deg); top: 155px;}
    36%, 100% {opacity:1;transform:  scale(1,1) rotate(0deg); top: 148px; visibility: visible;  }
}

@keyframes ball2 {
    0%, 35% {opacity:0; transform:  scale(0,0) rotate(360deg); top: 155px;}
    37%, 100% {opacity:1;transform:  scale(1,1) rotate(0deg); top: 148px; visibility: visible;  }
}

@keyframes ball3 {
    0%, 36% {opacity:0; transform:  scale(0,0) rotate(360deg); top: 155px;}
    38%, 100% {opacity:1;transform:  scale(1,1) rotate(0deg); top: 148px; visibility: visible;  }
}

@keyframes web {
    0%, 37% {opacity:0; transform:  translateY(30px);}
    39%, 100% {opacity:1;transform:  translateY(0px); visibility: visible;  }
}

@keyframes sao1 {
    0%, 38% {opacity:0; transform: scale(1,1) rotate(0deg);}
    42%  {opacity:1; transform: scale(1,1) rotate(180deg); visibility: visible;  }
	48%, 100%  {opacity:0; transform: scale(3,3) rotate(250deg);  }
	}

@keyframes sao2 {
    0%, 39% {opacity:0; transform: scale(1,1) rotate(0deg);}
    43%  {opacity:1; transform: scale(1,1) rotate(180deg); visibility: visible;  }
	49%, 100%  {opacity:0; transform: scale(3,3) rotate(250deg);  }
	}

@keyframes sao3 {
    0%, 40% {opacity:0; transform: scale(1,1) rotate(0deg);}
    44%  {opacity:1; transform: scale(1,1) rotate(180deg); visibility: visible;  }
	50%, 100%  {opacity:0; transform: scale(3,3) rotate(250deg);  }
	}

@keyframes mask {
    0%, 40% {opacity:0;}
    41%, 100% {opacity:1; visibility: visible;  }
}

@keyframes xoet {
    0%, 42% {opacity:0; transform: translateX(-500px);}
    43% {opacity:1;transform: translateX(-500px); visibility: visible;  }
    50%, 51% {opacity:1;transform: translateX(900px);   }
    57%, 58% {opacity:1;transform: translateX(-500px);  }
    59%, 100% {opacity:0;transform: translateX(500px);  }
}


@keyframes bg3 {
    0%, 62% {opacity:0; ;}
    64%, 100% {opacity:1; visibility: visible;  }
    
}

@keyframes dc-2 {
    0%, 64% {opacity:0; transform: translateX(-20px) ;}
    66%, 100% {opacity:1; transform: translate(0px); visibility: visible;  }
}

@keyframes goi {
    0%, 66% {opacity:0; transform: translateX(-30px) ;}
    68%, 100% {opacity:1; transform: translateX(0px); visibility: visible;  }
}



@keyframes hop {
    0%, 67% {opacity:0; transform: translateY(-30px) ;}
    69%, 100% {opacity:1; transform: translateY(0px); visibility: visible;  }
}



@keyframes nem {
    0%, 68% {opacity:0; transform: scale(2,2) translateY(10px);}
    72%, 100% {opacity:1; transform: scale(1,1) translateY(0px); visibility: visible;  }
}



@keyframes sao4 {
    0%, 70% {opacity:0; transform: scale(1,1) rotate(0deg);}
    74%  {opacity:1; transform: scale(1,1) rotate(180deg); visibility: visible;  }
	79%, 100%  {opacity:0; transform: scale(2,2) rotate(250deg);  }
	}

@keyframes sao5 {
    0%, 71% {opacity:0; transform: scale(1,1) rotate(0deg);}
    75%  {opacity:1; transform: scale(1,1) rotate(180deg); visibility: visible;  }
	80%, 100%  {opacity:0; transform: scale(2,2) rotate(250deg);  }
	}

@keyframes sao6 {
    0%, 72% {opacity:0; transform: scale(1,1) rotate(0deg);}
    76%  {opacity:1; transform: scale(1,1) rotate(180deg); visibility: visible;  }
	81%, 100%  {opacity:0; transform: scale(2,2) rotate(250deg);  }
	}