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

body { margin:0; padding:0;}

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

.chemchem { position:absolute; z-index:350; animation: chemchem 16s ease-out 2 1s; mix-blend-mode: screen; }

.hand { position:absolute;   z-index:340; animation: hand 16s ease-out 2 1s; visibility: hidden;  }

.tn { position:absolute; z-index:360; left: 83px; top: 103px; animation: tn 16s ease-out 2 1s; }

.bg2 { position:absolute; z-index:400; animation: bg2 16s ease-out 2 1s; }

.bg3 { position:absolute; z-index:420; animation: bg3 16s ease-out 2 1s; visibility: hidden; }

.loa { position:absolute; z-index:410; animation: loa 16s ease-out 2 1s; }

.dichvu { position:absolute; left: 205px; top: 46px; z-index:451; animation: dichvu 16s ease-out 2 1s;  }

.qc { position:absolute; left: 153px; top: 62px; z-index:450; animation: qc 16s ease-out 2 1s;  }

.doanhnghiep { position:absolute; left: 156px; top: 102px; z-index:452; animation: doanhnghiep 16s ease-out 2 1s;  }

.haimot { position:absolute; left: 226px; top: 137px; z-index:453; animation: haimot 16s ease-out 2 1s;  }

.line { position:absolute; left: 182px; top: 168px; z-index:453; animation: line 16s ease-out 2 1s;  }

.trian1 { position:absolute; left: 139px; top: 140px; z-index:457; animation: trian1 16s ease-out 2 1s;  }

.trian2 { position:absolute; left: 258px; top: 26px; z-index:458; animation: trian2 16s ease-out 2 1s;  }

.ttin { position:absolute; left: 140px; top: 195px; z-index:455; animation: ttin 16s ease-out 2 1s;  }

.return {position: absolute; z-index: 1000; left: 4px; top: 232px; animation: return 16s ease-out 2 1s; transform:  rotate(0deg);}

.return:hover {transform: scale(1.1,1.1);}

@keyframes return {
    0%, 65% {opacity:0;}
    70%, 100% {opacity:1;}
}


@keyframes tn  {
    0%, 1% {opacity:1; transform: scale(1,1);}
    3% {opacity:1; transform: scale(0.8,0.8);}
    5% {opacity:1; transform: scale(1,1);}
    7% {opacity:1; transform: scale(0.8,0.8);}
    9%,13% {opacity:1; transform: scale(1,1);}
    17%, 100% {opacity:0; transform: scale(6,6);}
}

@keyframes hand {
    0%, 8% {opacity:0; transform: translateY(50px);}
    10%  {opacity:1; transform: translateY(0px); visibility: visible;}
    10.5% {opacity:1; transform: translateY(-5px);}
    11% {opacity:1; transform: translateY(5px);}
    12%, 100% {opacity:1; transform: translateY(0px);}
}

@keyframes bg2 {
    0%, 14% {opacity:0; transform: scale(3,3);}
    16%, 100% {opacity:1; transform: scale(1,1);}
}

@keyframes bg3 {
    0%, 16% {opacity:0; }
    17%, 100% {opacity:1; visibility: visible;}
}

@keyframes loa {
    0%, 18% {opacity:1; transform: translateY(270px);}
    20%, 21% {opacity:1; transform: translateY(0px);}
    23% {opacity:1; transform: translateY(15px);}
    25% {opacity:1; transform: translateY(0px);}
    27% {opacity:1; transform: translateY(15px);}
    29% {opacity:1; transform: translateY(0px);}
    31% {opacity:1; transform: translateY(15px);}
    33% {opacity:1; transform: translateY(0px);}
    35% {opacity:1; transform: translateY(15px);}
    37% {opacity:1; transform: translateY(0px);}
    39% {opacity:1; transform: translateY(15px);}
    41% {opacity:1; transform: translateY(0px);}
    43% {opacity:1; transform: translateY(15px);}
    45% {opacity:1; transform: translateY(0px);}
    47% {opacity:1; transform: translateY(15px);}
    49% {opacity:1; transform: translateY(0px);}
    51% {opacity:1; transform: translateY(15px);}
    53% {opacity:1; transform: translateY(0px);}
    55% {opacity:1; transform: translateY(15px);}
    53% {opacity:1; transform: translateY(0px);}
    55% {opacity:1; transform: translateY(15px);}
    57% {opacity:1; transform: translateY(0px);}
    59% {opacity:1; transform: translateY(15px);}
    61%, 100% {opacity:1; transform: translateY(0px);}
    
}

@keyframes dichvu {
    0%, 24% {opacity:0; transform:scaleY(0) translateY(-50px);} 
	28%, 100% {opacity:1; transform:scaleY(1) translateY(0px); }
}

@keyframes qc {
    0%, 26% { opacity:1; transform:scale(0,0) rotate3d(1,1,1,0deg);}
	30%, 100% { opacity:1; transform:scale(1,1) rotate3d(2,1,1,360deg); }
}

@keyframes doanhnghiep {
   0%, 28% {opacity:0; transform:scaleY(0) translateY(50px);} 
   32%, 100% {opacity:1; transform:scaleY(1) translateY(0px); }
}

@keyframes haimot {
   0%, 30% {opacity:0; transform:scaleY(0) translateY(50px);} 
   34%, 100% {opacity:1; transform:scaleY(1) translateY(0px); }
}

@keyframes line {
   0%, 31% {opacity:0; transform:scaleX(0) translateX(20px);} 
   36%, 100% {opacity:1; transform:scaleX(1) translateX(0px); }
}

@keyframes ttin {
    0%, 34% { opacity:0; transform:scale(0,0) translateX(-100px);}
	37%, 100% { opacity:1; transform:scale(1,1) translateX(0px); }
}


@keyframes trian1 {
    0%, 38% { opacity:1; transform:scale(0,0) rotate(0deg);}
	44% { opacity:1; transform:scale(1.2,1.2) rotate(360deg); }
    49%, 100% { opacity:1; transform:scale(1,1) rotate(0deg);}
}

@keyframes trian2 {
    0%, 40% { opacity:1; transform:scale(0,0) rotate(0deg);}
	55% { opacity:1; transform:scale(1.2,1.2) rotate(360deg); }
    75%, 100% { opacity:1; transform:scale(1,1) rotate(0deg);}
    
}