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

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

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

.logo { position:absolute; z-index:900; animation: logo 16s ease-out infinite 0s;  }

.thanhlich { position:absolute; z-index:330; animation: thanhlich 16s ease-out infinite 0s;  }

.ertiga { position:absolute; z-index:104; animation: ertiga 16s ease-out infinite 0s;  }

.lightdark { position:absolute; z-index:102; animation: lightdark 16s ease-out infinite 0s;  }

.hotro1 { position:absolute; z-index:329; left: 36px; top: 111px; animation: hotro1 16s ease-out infinite 0s, vanish 1.5s infinite 3s;  }

.saubon { position:absolute; z-index:328; left: 22px; top: 167px; animation: saubon 16s ease-out infinite 0s, chop 0.2s infinite 3s; }

.saubon2 { position:absolute; z-index:326; left: 22px; top: 167px; animation: saubon2 16s ease-out infinite 0s; opacity: 0.5; }

.tron1 { position:absolute; z-index:324; animation: tron1 16s ease-out infinite 0s;  }

.cta1 { position:absolute; z-index:328; left: 310px; top: 172px; animation: cta1 16s ease-out infinite 0s, nhay 0.7s infinite 3s;  }

.text1 { position:absolute; z-index:327; animation: text1 16s ease-out infinite 0s;  }

.apdung1 { position:absolute; z-index:327; animation: apdung1 16s ease-out infinite 0s;  }

.bg1a { position:absolute; z-index:106; animation: bg1a 16s ease-out infinite 0s; visibility: hidden;   }

.xoec { position:absolute; z-index:105; left: -100px; top: 0px; animation: xoec 16s ease-in infinite 0s; mix-blend-mode:overlay;  }


.bg2 { position:absolute; z-index:500; animation: bg2 16s ease-out infinite 0s;  }

.khoidau { position:absolute; z-index:550; animation: khoidau 16s ease-out infinite 0s;  }

.xl7 { position:absolute; z-index:520; animation: xl7 16s ease-out infinite 0s;  }

.hotro2 { position:absolute; z-index:549; left: 36px; top: 130px; animation: hotro2 16s ease-out infinite 0s, vanish2 1.5s infinite 3s;  }

.bayba5 { position:absolute; z-index:970; left: 132px; top: 179px; animation: bayba5 16s ease-out infinite 0s, chop2 0.2s infinite 3s;  }

.apdung2 { position:absolute; z-index:560; animation: apdung2 16s ease-out infinite 0s;  }

.cta2 { position:absolute; z-index:600; left: 873px; top: 197px; animation: cta2 16s ease-out infinite 0s, nhay2 0.7s infinite 3s;  }

.lightcar {position:absolute; z-index: 860; animation: lightcar 16s ease-in infinite 0s; mix-blend-mode: screen; }


@keyframes logo {
    0%, 1% {opacity:0; transform: translateY(-20px);}
    3%, 100% {opacity:1; transform: translateY(0px);}
}

@keyframes thanhlich {
    0%, 3% {opacity:0; transform: scale(3,3) translateY(20px);}
    5%, 50% {opacity:1; transform: scale(1,1) translateY(0px);}
    51%, 100% {opacity:0; transform: scale(1,1) translateY(0px);}
}

@keyframes lightdark {
    0%, 5% {opacity:1;}
    5.2% {opacity:0;}
    5.4% {opacity:1;}
    5.6% {opacity:0;}
    5.8% {opacity:1;}
    6% {opacity:0;}
    6.2% {opacity:1;}
    6.4% {opacity:0;}
    6.6% {opacity:1;}
    6.8% {opacity:0;}
    7% {opacity:1;}
    7.2% {opacity:0;}
    9%, 50% {opacity:1;}
    51%, 100% {opacity:1;}
}

@keyframes ertiga {
    0%, 8% {opacity:0; transform: translateX(60px);}
    10%, 50% {opacity:1; transform: translateX(0px);}
    51%, 100% {opacity:0; transform: translateX(0px);}
}

@keyframes hotro1 {
    0%, 10% {opacity:0; transform:scaleY(0) translateY(-50px);} 
	14%, 50% {opacity:1; transform:scaleY(1) translateY(0px); }
    51%, 100% {opacity:0; transform:scaleY(1) translateY(0px); }
}


@keyframes vanish {
    from { transform: scale(1,1);}
    20% { transform: scale(0.95,0.95);}
    to {transform: scale(1,1);}
}

@keyframes saubon {
    0%, 11% {opacity:0; transform:scaleY(0) translateY(50px);} 
	15%, 50% {opacity:1; transform:scaleY(1) translateY(0px); }
    51%, 100% {opacity:0; transform:scaleY(1) translateY(0px); }
}

@keyframes chop {
    from {mix-blend-mode: normal;}
    to {mix-blend-mode: hard-light;}
}

@keyframes saubon2 {
    0%, 16% {opacity: 0; transform: scale(0,0) translateY(0px);}
    17% {opacity: 0.5; transform: scale(1.5,1.5) translateY(0px);}
    20%, 100% {opacity: 0; transform: scale(1.5,1.5) translateY(-10px);}

}

@keyframes tron1 {
    0%, 12% {opacity:0; transform: translateX(-10px);}
    13%, 50% {opacity:1; transform: translateX(0px);}
    51%, 100% {opacity:0; transform: translateX(0px);}
}

@keyframes text1 {
    0%, 13% {opacity:0; transform: translateX(-10px);}
    14%, 50% {opacity:1; transform: translateX(0px);}
    51%, 100% {opacity:0; transform: translateX(0px);}
}

@keyframes cta1 {
    0%, 15% {opacity:0; transform: translateX(-10px);}
    17%, 50% {opacity:1; transform: translateX(0px);}
    51%, 100% {opacity:0; transform: translateX(0px);}
}

@keyframes nhay {
    from {mix-blend-mode: normal;}
    
    to {mix-blend-mode: luminosity; }
}


@keyframes apdung1 {
    0%, 16% {opacity:0; transform: translateX(-10px);}
    18%, 50% {opacity:1; transform: translateX(0px);}
    51%, 100% {opacity:0; transform: translateX(0px);}
}

@keyframes bg1a {
    0%, 21% {opacity:0;}
    22%, 50% {opacity:1; visibility: visible;}
    51%, 100% {opacity:0; }
}


@keyframes xoec {
    0%, 23% {opacity:1; transform: translateX(0px);}
    33% {opacity:1; transform: translateX(1100px); }
    47%, 50% {opacity:1; transform: translateX(0px);}
    51%, 100% {opacity:0; transform: translateX(0px);}
    
}





@keyframes bg2 {
    0%, 49% {opacity:0; }
    50%, 100% {opacity:1; }
}


@keyframes khoidau {
    0%, 52% {opacity:0; transform: scale(3,3) translateY(20px);}
    55%, 100% {opacity:1; transform: scale(1,1) translateY(0px); }
}



@keyframes xl7 {
    0%, 55% {opacity:0; transform: translateX(-10px);}
    57%, 100% {opacity:1; transform: translateX(0px); }
}

@keyframes hotro2 {
    0%, 56% {opacity:0; transform:scaleY(0) translateY(50px);} 
	58%, 100% {opacity:1; transform:scaleY(1) translateY(0px);  }
}


@keyframes vanish2 {
    from { transform: scale(1,1);}
    20% { transform: scale(0.95,0.95); }
    to {transform: scale(1,1);}
}

@keyframes bayba5 {
    0%, 57% {opacity:0; transform: translateY(50px);} 
	59%, 100% {opacity:1; transform: translateY(0px); }
}

@keyframes chop2 {
    from {mix-blend-mode: normal;}
    to {mix-blend-mode: hard-light; }
}

@keyframes apdung2 {
    0%, 58% {opacity:0; transform: translateX(0px);}
    60%, 100% {opacity:1; transform: translateX(0px); }
    
}



@keyframes cta2 {
    0%, 59% {opacity:0; transform: translateX(-10px);}
    61%, 100% {opacity:1; transform: translateX(0px); }
    
}

@keyframes nhay2 {
    from {mix-blend-mode: normal;}
    
    to {mix-blend-mode: luminosity; }
}

@keyframes lightcar {
    0%, 62% {opacity:0; }
    63% {opacity:1; }
    64% {opacity:0}
    65% {opacity:1}
    66% {opacity:0}
    67% {opacity:1}
    71%, 100% {opacity:0}
}