@charset "utf-8";






/*OPENING*/
.opening_start .loading_logo { animation:opening0 0.5s ease-in-out forwards; }
@keyframes opening0 {
	0% { opacity:0; }
	100% { opacity:1; }
}
.opening_off { animation:opening1 0.5s ease-in-out 1s forwards; }
@keyframes opening1 {
	0% { opacity:1; }
	100% { opacity:0; }
}



/*LOADING*/
.wrap_on .loading { animation:wrap_on0 0.5s ease-in-out forwards; }
@keyframes wrap_on0 {
	0% { opacity:1; }
	100% { opacity:0; }
}
.wrap_on .contents { animation:wrap_on1 0.5s ease-in-out forwards; }
@keyframes wrap_on1 {
	0% { transform:translateY(25px); }
	100% { transform:translateY(0px); }
}
.wrap_on .contents_article,.wrap_on .contents_contact { animation:wrap_on1_article 0.5s ease-in-out forwards; }
@keyframes wrap_on1_article {
	0% { opacity:0; }
	100% { opacity:1; }
}



.wrap_on .main_block { animation:wrap_on2 0.75s ease-in-out 0.25s forwards; }
@keyframes wrap_on2 {
	0% { transform:translateY(15px); opacity:0; }
	100% { transform:translateY(0px); opacity:1; }
}
.wrap_off .loading { animation:wrap_off0 0.5s ease-in-out forwards; }
@keyframes wrap_off0 {
	0% { opacity:0; }
	100% { opacity:1; }
}
.wrap_off .contents,.wrap_off .footer { animation:wrap_off1 0.5s ease-in-out forwards; }
@keyframes wrap_off1 {
	0% { transform:translateY(0px); }
	100% { transform:translateY(-25px); }
}
.wrap_off .contents_article,.wrap_off .contents_contact { animation:wrap_off1_article 0.5s ease-in-out forwards; }
@keyframes wrap_off1_article {
	0% { opacity:1; }
	100% { opacity:0; }
}








/*SLIDE*/
.main_slide .slide_on { animation:slide_on0 1.5s ease-in-out forwards; }
@keyframes slide_on0 {
	0% { width:0; }
	100% { width:100%; }
}
.main_slide .slide_on > div { animation:slide_on1 1.5s ease-in-out forwards; }
@keyframes slide_on1 {
	0% { opacity:0; transform:scale(1.05); }
	100% { opacity:1; transform:scale(1); }
}
.main_slide .slide_on > div > div,.main_slide .slide_off > div > div { animation:slide_on2 10s linear forwards; }
@keyframes slide_on2 {
	0% { transform:scale(1.1); }
	100% { transform:scale(1); }
}
.grid_slide .slide_on { animation:slide_on3 1.5s ease-in-out forwards; }
@keyframes slide_on3 {
	0% { opacity:0; }
	100% { opacity:1; }
}
.grid_slide .slide_on div div,.grid_slide .slide_off div div { animation:slide_on4 10s linear forwards; }
@keyframes slide_on4 {
	0% { transform:scale(1.1); }
	100% { transform:scale(1); }
}
.main_loader .slide_on { animation:slide_on5 0.75s ease-in-out forwards; }
@keyframes slide_on5 {
	0% { background:rgba(54,53,53,0); transform:scale(1); }
	20% { transform:scale(0.5); }
	40% { transform:scale(1.1); }
	60% { transform:scale(0.9); }
	80% { transform:scale(1.05); }
	100% { background:rgba(54,53,53,1); transform:scale(1); }
}
.main_loader .slide_off { animation:slide_off5 0.75s ease-in-out forwards; }
@keyframes slide_off5 {
	0% { background:rgba(54,53,53,1); transform:scale(1); }
	20% { transform:scale(0.5); }
	40% { transform:scale(1.1); }
	60% { transform:scale(0.9); }
	80% { transform:scale(1.05); }
	100% { background:rgba(54,53,53,0); transform:scale(1); }
}
.grid_list_loader .slide_on { animation:slide_on6 0.75s ease-in-out forwards; }
@keyframes slide_on6 {
	0% { background:rgba(255,255,255,0); transform:scale(1); }
	20% { transform:scale(0.5); }
	40% { transform:scale(1.1); }
	60% { transform:scale(0.9); }
	80% { transform:scale(1.05); }
	100% { background:rgba(255,255,255,1); transform:scale(1); }
}
.grid_list_loader .slide_off { animation:slide_off6 0.75s ease-in-out forwards; }
@keyframes slide_off6 {
	0% { background:rgba(255,255,255,1); transform:scale(1); }
	20% { transform:scale(0.5); }
	40% { transform:scale(1.1); }
	60% { transform:scale(0.9); }
	80% { transform:scale(1.05); }
	100% { background:rgba(255,255,255,0); transform:scale(1); }
}



/*SCROLL*/
.scroll_on0 { animation:scroll_on0 0.5s ease-in-out forwards; }
@keyframes scroll_on0 {
	0% { opacity:0; }
	100% { opacity:1; }
}
.scroll_on1 { animation:scroll_on1 0.5s ease-in-out forwards; }
@keyframes scroll_on1 {
	0% { opacity:0; transform:translate(0,20px); }
	100% { opacity:1; transform:translate(0,0); }
}
.scroll_on0 .footer_img { animation:scroll_on2 0.75s ease-in-out 0.25s forwards; }
@keyframes scroll_on2 {
	0% { opacity:0; transform:translate(0,30px); }
	100% { opacity:1; transform:translate(0,0); }
}
.scroll_on0 .contents_title div span { animation:scroll_on3 1s ease-in-out forwards; }
@keyframes scroll_on3 {
	0% { opacity:1; left:0; }
	49% { opacity:0; left:100%; }
	51% { opacity:0; left:-100%; }
	100% { opacity:1; left:0; }
}
.scroll_off0,.scroll_off1 .footer_img { animation:scroll_off0 0.5s ease-in-out forwards; }
@keyframes scroll_off0 {
	0% { opacity:1; }
	100% { opacity:0; }
}
.scroll_off1 { animation:scroll_off1 0.5s ease-in-out forwards; }
@keyframes scroll_off1 {
	0% { opacity:1; transform:translate(0,0); }
	100% { opacity:0; transform:translate(0,20px); }
}



/*BUTTON*/
.line_on .line_button_inner,.line_on:after { animation:line_on0 0.5s ease-in-out forwards; }
@keyframes line_on0 {
	0% { opacity:1; left:0; }
	49% { opacity:0; left:100%; }
	51% { opacity:0; left:-100%; }
	100% { opacity:1; left:0; }
}



/*HEADER*/
.header_off .header_button_inner > div:nth-child(1) > span { animation:header_button_off0 2.5s ease-in-out 0s infinite; }
.header_off .header_button_inner > div:nth-child(2) > span { animation:header_button_off0 2.5s ease-in-out 0.15s infinite; }
.header_off .header_button_inner > div:nth-child(3) > span { animation:header_button_off0 2.5s ease-in-out 0.3s infinite; }
@keyframes header_button_off0 {
	0% { left:0; opacity:1; }
	65% { left:0; opacity:1; }
	80% { left:100%; opacity:0; }
	85% { left:-100%; opacity:0; }
	100% { left:0; opacity:1; }	
}
.header_on .header_inner { animation:header_on0 0.5s ease-in-out forwards; }
@keyframes header_on0 {
	0% { background:rgba(255,255,255,1); }
	100% { background:rgba(255,255,255,0); }
}
.header_on .header_button_inner > div:nth-child(1) { animation:header_on1 0.125s ease-in-out 0.25s forwards; }
@keyframes header_on1 {
	0% {  transform:rotate(0deg); }
	100% {  transform:rotate(45deg); }	
}
.header_on .header_button_inner > div:nth-child(3) { animation:header_on2 0.125s ease-in-out 0.25s forwards; }
@keyframes header_on2 {
	0% {  transform:rotate(0deg); }
	100% {  transform:rotate(-45deg); }	
}
.header_on .header_button_inner > div:nth-child(1) span span { animation:header_on3 0.25s ease-in-out 0.325s forwards; }
@keyframes header_on3 {
	0% { left:-100%; background:rgba(255,255,255,0); }
	100% { left:0; background:rgba(255,255,255,1); }	
}
.header_on .header_button_inner > div:nth-child(3) span span { animation:header_on4 0.25s ease-in-out 0.625s forwards; }
@keyframes header_on4 {
	0% { left:100%; background:rgba(255,255,255,0); }
	100% { left:0; background:rgba(255,255,255,1); }	
}
.header_off .header_inner { animation:header_off0 0.5s ease-in-out forwards; }
@keyframes header_off0 {
	0% { background:rgba(255,255,255,0); }
	100% { background:rgba(255,255,255,1); }
}
.header_off .header_button_inner > div:nth-child(1) { animation:header_off1 0.125s ease-in-out forwards; }
@keyframes header_off1 {
	0% {  transform:rotate(45deg); }	
	100% {  transform:rotate(0deg); }
}
.header_off .header_button_inner > div:nth-child(3) { animation:header_off2 0.125s ease-in-out forwards; }
@keyframes header_off2 {
	0% {  transform:rotate(-45deg); }	
	100% {  transform:rotate(0deg); }
}



/*MENU*/
.menu_on .menu_bg { animation:menu_on0 0.5s ease-in-out forwards; }
@keyframes menu_on0 {
	0% { opacity:0; left:100%; transform:skew(17.5deg); }
	100% { opacity:1; left:0; transform:skew(0deg); }
}
.menu_on .menu_inner { animation:menu_on1 0.5s ease-in-out forwards; }
@keyframes menu_on1 {
	0% { opacity:0; left:100%; }
	100% { opacity:1; left:0; }
}
.menu_on .menu_block > .menu_list:nth-child(1) { animation:menu_on2 0.5s ease-in-out 0.21s forwards; }
.menu_on .menu_block > .menu_list:nth-child(2) { animation:menu_on2 0.5s ease-in-out 0.215s forwards; }
.menu_on .menu_block > .menu_sub:nth-child(3) { animation:menu_on2 0.5s ease-in-out 0.22s forwards; }
.menu_on .menu_block > .menu_list:nth-child(4) { animation:menu_on2 0.5s ease-in-out 0.225s forwards; }
.menu_on .menu_block > .menu_list:nth-child(5) { animation:menu_on2 0.5s ease-in-out 0.23s forwards; }
.menu_on .menu_block > .menu_sub:nth-child(6) { animation:menu_on2 0.5s ease-in-out 0.235s forwards; }
.menu_on .menu_block > .menu_list:nth-child(7) { animation:menu_on2 0.5s ease-in-out 0.24s forwards; }
.menu_on .menu_block > .menu_list:nth-child(8) { animation:menu_on2 0.5s ease-in-out 0.245s forwards; }
.menu_on .menu_sns,.menu_on .menu_copy,.menu_on .menu_logo,.menu_on .menu_lang { animation:menu_on2 0.5s ease-in-out 0.25s forwards; }
@keyframes menu_on2 {
	0% { opacity:0; transform:translateX(50px); }
	100% { opacity:1; transform:translateX(0); }
}
.menu_off .menu_bg { animation:menu_off0 0.5s ease-in-out forwards; }
@keyframes menu_off0 {
	0% { opacity:1; left:0; transform:skew(0deg); }
	100% { opacity:0; left:100%; transform:skew(-7.5deg); }
}
.menu_off .menu_inner { animation:menu_off1 0.5s ease-in-out forwards; }
@keyframes menu_off1 {
	0% { opacity:1; left:0; }
	50% { opacity:0; }
	100% { opacity:0; left:100%; }
}
.menu_list_on span { animation:menu_list_on0 0.25s ease-in-out forwards; }
@keyframes menu_list_on0 {
	0% { opacity:0; left:-100%; }
	100% { opacity:1; left:0; }
}
.menu_list_off span { animation:menu_list_off0 0.25s ease-in-out forwards; }
@keyframes menu_list_off0 {
	0% { opacity:1; left:0; }
	100% { opacity:0; left:100%; }
}



/*POPUP*/
.popup_on { animation:popup_on0 0.5s ease-in-out forwards; }
@keyframes popup_on0 {
	0% { opacity:0; }
	100% { opacity:1; }
}
.popup_on .popup_close { animation:popup_on1 0.5s ease-in-out 0.25s forwards; }
@keyframes popup_on1 {
	0% { opacity:0; transform:scale(0.5) translate3d(0,0,0); }
	100% { opacity:1; transform:scale(1) translate3d(0,0,0); }
}
.popup_on .popup_close > div > div:nth-child(1) span { animation:popup_on2 0.375s ease-in-out 0.75s forwards; }
@keyframes popup_on2 {
	0% { left:-100%; }
	100% { left:0; }
}
.popup_on .popup_close > div > div:nth-child(2) span { animation:popup_on3 0.375s ease-in-out 1s forwards; }
@keyframes popup_on3 {
	0% { left:100%; }
	100% { left:0; }
}
.popup_on .popup_block { animation:popup_on4 0.75s ease-in-out 0.5s forwards; }
@keyframes popup_on4 {
	0% { opacity:0; transform:scale(1.1) translate(0,50px) skew(0deg,-2.5deg); }
	100% { opacity:1; transform:scale(1) translate(0,0) skew(0deg,0deg); }
}
.popup_off { animation:popup_off0 0.5s ease-in-out forwards; }
@keyframes popup_off0 {
	0% { opacity:1; }
	100% { opacity:0; }
}