@charset "utf-8";
*{user-select: none;}

#container{min-width: 1900px; overflow: hidden;}

@keyframes up{
	0%{
		transform: translateY(20px);
		opacity: 0;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes left{
	0%{
		transform: translateX(-20px);
		opacity: 0;
	}
	100%{
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes right{
	0%{
		transform: translateX(20px);
		opacity: 0;
	}
	100%{
		transform: translateX(0);
		opacity: 1;
	}
}

/*intro*/
#intro{position: relative; height: 980px; background: url('../images/images-intro_bg.jpg') center 0 no-repeat;}
#intro div.top{width: 100%;}
#intro div.top div.topin{position: relative; z-index: 999; width: 1240px; margin: 0 auto;}
#intro div.top div.topin a.logo {
    position: absolute;
    top: 50px;
    width: 102px;      /* kích thước mong muốn */
    height: 102px;      /* kích thước mong muốn */
    background: url('../images/images-ao_logo.png') no-repeat center center;
    background-size: contain; /* hoặc cover, tùy ý */
}

#intro div.top div.topin a.btn_today{position: absolute; top: 54px; right: 133px; width: 123px; height: 40px; background: url('../images/images-btn_home.png') no-repeat;}
#intro div.top div.topin a.btn_today:before{
	content: '';
	display: block;
	clear: both;
	width: 123px;
	height: 40px;
	position: absolute;
	top: 0;
	left: 0;
	background: url('../images/images-btn_home_hover.png') no-repeat;
	opacity: 0;
}
#intro div.top div.topin a.btn_today_close{position: absolute; top: 54px; right: 0;  width: 123px; height: 40px; background: url('../images/images-btn_close.png') no-repeat;}
#intro div.top div.topin a.btn_today_close:before{
	content: '';
	display: block;
	clear: both;
	width: 123px;
	height: 40px;
	position: absolute;
	top: 0;
	left: 0;
	background: url('../images/images-btn_close_hover.png') no-repeat;
	opacity: 0;
}
#intro div.top div.topin a.btn_today:hover:before,
#intro div.top div.topin a.btn_today_close:hover:before{opacity: 1;}

#intro div.intro_ttl{position: absolute; opacity: 0; transform: translateY(20px);}
#intro div.intro_ttl01{top: 160px; left: 50%; margin-left: -369px; width: 838px; height: 104px; background: url('../images/images-ttl01.png') no-repeat; animation: up 0.5s 0.1s forwards;}
#intro div.intro_ttl02{top: 240px; left: 50%; margin-left: -729.5px; width: 1459px; height: 292px; background: url('../images/images-ttl02.png') no-repeat; animation: up 0.5s 0.3s forwards;}
#intro div.intro_ttl03{top: 500px; left: 50%; margin-left: -295px; width: 590px; height: 140px; background: url('../images/images-ttl03.png') no-repeat; animation: up 0.5s 0.5s forwards;}
#intro a.btn_event{opacity: 0; transform: translateY(20px); position: absolute; top: 685px; left: 50%; margin-left: -439.5px; display: block; width: 437px; height: 103px; background: url('../images/images-btn_event.png') no-repeat;  
animation: up 0.5s 0.7s forwards;}
#intro a.btn_event:before{
	content: '';
	display: block;
	clear: both;
	width: 437px;
	height: 103px;
	background: url('../images/images-btn_event_hover.png') no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
#intro a.btn_event:hover:before{opacity: 1;}

#intro a.btn_down{opacity: 0; transform: translateY(20px); position: absolute; top: 685px; left: 50%; margin-left: -190.5px; display: block; width: 437px; height: 103px; background: url('../images/images-btn_down.png') no-repeat;  
animation: up 0.5s 0.7s forwards;}
#intro a.btn_down:before{
	content: '';
	display: block;
	clear: both;
	width: 437px;
	height: 103px;
	background: url('../images/images-btn_down_hover.png') no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
#intro a.btn_down:hover:before{opacity: 1;}

#particles-js{ position:absolute; width: 1393px; height: 897px; top:0; left: 0;}

#event{position: relative; height: 1507px; background: url('../images/images-cont_bg.jpg') center 0 no-repeat;}
#event div.cont_ttl{position: absolute; top: 202px; left: 50%; margin-left: -589px; width: 1178px; height: 83px; background: url('../images/images-cont_ttl.png') no-repeat; opacity: 0; transform: translateY(20px);}
#event div.cont_ttl.active{animation: up 0.5s 0.1s forwards;}
#event div.cont_box{position: absolute; top: 440px; left: 50%; margin-left: -528px; }
#event div.cont{width: 1056px; height: 82px; margin-bottom: 20px;  opacity: 0; transform: translateY(20px);}
#event div.cont01{background: url('../images/images-cont_cont01.png') no-repeat;}
#event div.cont01.active{animation: up 0.5s 0.3s forwards;}
#event div.cont02{background: url('../images/images-cont_cont02.png') no-repeat;}
#event div.cont02.active{animation: up 0.5s 0.5s forwards;}
#event div.cont03{background: url('../images/images-cont_cont03.png') no-repeat;}
#event div.cont03.active{animation: up 0.5s 0.8s forwards;}
#event div.cont04{background: url('../images/images-cont_cont04.png') no-repeat;}
#event div.cont04.active{animation: up 0.5s 1.1s forwards;}
#event div.char{position: absolute; top: 250px; opacity: 0;}
#event div.char01{left: 50%; margin-left: -952px;  width: 440px; height: 962px; background: url('../images/images-char01.png') no-repeat; transform: translateX(-20px);}
#event div.char01.active{ animation: left 0.5s 1.3s forwards;}
#event div.char02{top: 260px; left: 50%; margin-left: 379px;  width: 572px; height: 985px; background: url('../images/images-char02.png') no-repeat; transform: translateX(20px);}
#event div.char02.active{ animation: right 0.5s 1.3s forwards;}

p.btn_top{display: none; position: fixed; right: 0; bottom: 200px; width: 85px; height: 45px; background: url('../images/images-btn_top.png') no-repeat; cursor: pointer;}