/*HEADER_IN*/
.header_in { animation:header_in 1s ease-in-out 1s forwards; }
@keyframes header_in {
	0% { top:-60px; opacity:0; }
	100% { top:0; opacity:1; }
}

/*HEADER_ON*/
.header_on .menu_list > div:nth-child(1) { animation:header_on 1s ease-in-out forwards; }
@keyframes header_on {
	0% { top:100%; opacity:0; }
	25% { top:100%; opacity:0; }
	75% { top:0; opacity:1; }
	100% { top:0; opacity:1; }
}

/*HEADER_FIX*/
.header_fix_on { animation:header_fix_on 0.5s ease-in-out forwards; }
@keyframes header_fix_on {
	0% { top:-60px; opacity:0; }
	100% { top:0; opacity:1; }
}
.header_fix_off { animation:header_fix_off 0.5s ease-in-out forwards; }
@keyframes header_fix_off {
	0% { top:0; opacity:1; }
	100% { top:-60px; opacity:0; }
}



/*HEADER_MENU_LIST*/
.header .menu_list_on > div:nth-child(1) { animation:menu_list_on1 0.3s ease-in-out forwards; }
.header .menu_list_on > div:nth-child(2) { animation:menu_list_on2 0.3s ease-in-out forwards; }
@keyframes menu_list_on1 {
	0% { top:0; opacity:1; }
	100% { top:-25%; opacity:0; }
}
@keyframes menu_list_on2 {
	0% { top:25%; opacity:0; }
	100% { top:0; opacity:1; }
}
.header .menu_list_off > div:nth-child(1) { animation:menu_list_off1 0.3s ease-in-out forwards; }
.header .menu_list_off > div:nth-child(2) { animation:menu_list_off2 0.3s ease-in-out forwards; }
@keyframes menu_list_off1 {
	0% { top:-25%; opacity:0; }
	100% { top:0; opacity:1; }
}
@keyframes menu_list_off2 {
	0% { top:0; opacity:1; }
	100% { top:25%; opacity:0; }
}