@charset "utf-8";





/*LOAD*/
.load_off #load { animation:load_on1 0.5s ease-in-out forwards; }
@keyframes load_on1 {
	0% { opacity:1; }
	100% { opacity:0; }
}
.load_off .visual_stamp { animation:load_on2 0.5s ease-in-out 0.5s forwards; }
@keyframes load_on2 {
	0% { opacity:0; transform:scale(1.25) rotate(0deg); }
	100% { opacity:1; transform:scale(1) rotate(22.5deg); }
}





/*FRONT*/
.front_on .front_nav { animation:front_on1 0.5s ease-in-out forwards; }
@keyframes front_on1 {
	0% { opacity:0; transform:translateY(-50%); }
	100% { opacity:1; transform:translateY(0%); }
}
.front_off .front_nav { animation:front_off1 0.5s ease-in-out forwards; }
@keyframes front_off1 {
	0% { opacity:1; transform:translateY(0%); }
	100% { opacity:0; transform:translateY(-50%); }
}
@media (max-width:1024px){
	.front_on .front_nav { animation:none; }
	.front_off .front_nav { animation:none; }
}





/*BANNER*/
.banner_on .banner_image { animation:banner_on1 0.5s ease-in-out forwards; }
@keyframes banner_on1 {
	0% { opacity:0; transform:translateY(50%); }
	100% { opacity:1; transform:translateY(0%); }
}
.banner_off .banner_image { animation:banner_off1 0.5s ease-in-out forwards; }
@keyframes banner_off1 {
	0% { opacity:1; transform:translateY(0%); }
	100% { opacity:0; transform:translateY(50%); }
}
.banner_hide .banner_image { animation:banner_hide1 0.5s ease-in-out forwards; }
@keyframes banner_hide1 {
	0% { opacity:1; transform:translateY(0%); }
	100% { opacity:0; transform:translateY(50%); }
}





/*HEADER*/
.header_show header { animation:none; }
@media (max-width:1024px){
	.header_on header { animation:header_on1 0.5s ease-in-out forwards; }
	.header_off header { animation:header_off1 0.5s ease-in-out forwards; }
}
@keyframes header_on1 {
	0% { opacity:0; transform:translateY(-50%); }
	100% { opacity:1; transform:translateY(0%); }
}
@keyframes header_off1 {
	0% { opacity:1; transform:translateY(0%); }
	100% { opacity:0; transform:translateY(-50%); }
}





/*MENU*/
@media (max-width:1024px){
	.menu_on #front { animation:menu_on1 0.5s ease-in-out forwards; }
	.menu_off #front { animation:menu_off1 0.5s ease-in-out forwards; }
	.menu_on.header_on .header_line { animation:menu_on5 0.5s ease-in-out forwards; }
	.menu_off.header_on .header_line { animation:menu_off5 0.5s ease-in-out forwards; }
}
@keyframes menu_on1 {
	0% { opacity:0; }
	100% { opacity:1; }
}
@keyframes menu_off1 {
	0% { opacity:1; }
	100% { opacity:0; }
}
@keyframes menu_on5 {
	0% { opacity:0; }
	100% { opacity:1; }
}
@keyframes menu_off5 {
	0% { opacity:1; }
	100% { opacity:0; }
}
.menu_on .header_button a > div:nth-child(1) { animation:menu_on2 1s ease-in-out forwards; }
.menu_on .header_button a > div:nth-child(2) { animation:menu_on3 1s ease-in-out forwards; }
.menu_on .header_button a > div:nth-child(3) { animation:menu_on4 1s ease-in-out forwards; }
@keyframes menu_on2 {
	0% { transform:translateY(-10px) rotate(0); }
	50% { transform:translateY(0px) rotate(0deg); }
	100% { transform:translateY(0px) rotate(45deg); }
}
@keyframes menu_on3 {
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:0; }
}
@keyframes menu_on4 {
	0% { transform:translateY(10px) rotate(0); }
	50% { transform:translateY(0px) rotate(0deg); }	
	100% { transform:translateY(0px) rotate(-45deg); }
}
.menu_off .header_button a > div:nth-child(1) { animation:menu_off2 1s ease-in-out forwards; }
.menu_off .header_button a > div:nth-child(2) { animation:menu_off3 1s ease-in-out forwards; }
.menu_off .header_button a > div:nth-child(3) { animation:menu_off4 1s ease-in-out forwards; }
@keyframes menu_off2 {
	0% { transform:translateY(0px) rotate(45deg); }
	50% { transform:translateY(0px) rotate(0deg); }
	100% { transform:translateY(-10px) rotate(0); }
}
@keyframes menu_off3 {
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}
@keyframes menu_off4 {
	0% { transform:translateY(0px) rotate(-45deg); }
	50% { transform:translateY(0px) rotate(0deg); }	
	100% { transform:translateY(10px) rotate(0); }
}





/*SCROLL*/
.scroll_on1 { animation:scroll_on1 0.5s ease-in-out forwards; }
@keyframes scroll_on1 {
	0% { opacity:0; transform:translateY(40px); }
	100% { opacity:1; transform:translateY(0px); }
}
.scroll_off1 { animation:scroll_off1 0.5s ease-in-out forwards; }
@keyframes scroll_off1 {
	0% { opacity:1; transform:translateY(0px); }
	100% { opacity:0; transform:translateY(40px); }
}