/*----------------------------------------
	animation keyframes
------------------------------------------*/

@keyframes rotation{
	0%{ transform: rotate(0);}
	100%{ transform: rotate(360deg); }
}
/* animation: rotation 60s linear infinite; */

@keyframes rotation_r{
	0%{ transform: rotate(0);}
	100%{ transform: rotate(-360deg); }
}
/* animation: rotation 60s linear infinite; */

@keyframes hor_move_l{
	0% {transform: translateX(0%);}
	100% {transform: translateX(-100%);}
}
/* animation: hor_move_l 60s linear infinite; */

@keyframes hor_move_r{
	0% {transform: translateX(-100%);}
	100% {transform: translateX(0%);}
}
/* animation: hor_move_r 60s linear infinite; */

@keyframes ver_move_t{
	0% {transform: translateY(0%);}
	100% {transform: translateY(-100%);}
}
/* animation: ver_move_t 60s linear infinite; */

@keyframes ver_move_b{
	0% {transform: translateY(-100%);}
	100% {transform: translateY(0%);}
}
/* animation: ver_move_b 60s linear infinite; */

@keyframes fade_out { 
	0% { opacity: 1; }
	99% { opacity: 0; visibility: hidden; } 
	100% { opacity: 0; visibility: hidden; display: none;} 
}
/* animation: fade_out 0.4s ease forwards; */

/*----------------------------------------
	common animation
------------------------------------------*/
.cmn_head_title {
	&.animate {filter: brightness(0);
		.main_title {letter-spacing: 0.4em; transform: translateX(3em); opacity: 0;}
		.sub_title {letter-spacing: 0.5em; transform: translateX(5em); opacity: 0;}
		&::before {}
		&::after {transform: translateY(-50%) translateX(130%); opacity: 0;}
		&.type_in_page_head {
			&::after {}
		}
		&.no_icon {}
		&.scroll_in, &.load_open {filter: brightness(1); transition: filter 3.8s var(--easeOutQuint);
			.main_title {letter-spacing: 0.15em; transform: translateX(0); opacity: 1; transition: letter-spacing 1.6s var(--easeOutQuint), transform 1.6s var(--easeOutQuint), opacity 1.6s var(--easeOutQuint);}
			.sub_title {letter-spacing: 0em; transform: translateX(0); opacity: 1; transition: letter-spacing 1.6s var(--easeOutQuint), transform 1.6s var(--easeOutQuint), opacity 1.6s var(--easeOutQuint); transition-delay: 0.2s;}
			&::before {}
			&::after {transform: translateY(-50%) translateX(0%); opacity: 1; transition: transform 1.6s var(--easeOutQuint), opacity 1.6s var(--easeOutQuint);}
			&.type_in_page_head {
				&::after {}
			}
			&.no_icon {}
		}
	}
}

/*----------------------------------------
	pages animation
------------------------------------------*/

/* fv_teaser
-------------------------------*/
#fv_teaser {
    &.animate {
		.cmn_bg_layer {
    	    .teaser_bg {
    	        img {transform: scale(1.1);}
    	    }
    	}
    	.cmn_main_layer {
    	    .main_title {
    	        img { transform: scale(1.1); opacity: 0; }
    	    }
    	}
		&.load_open {
			.cmn_bg_layer {
    		    .teaser_bg {
    		        img { transform: scale(1); transition: transform 3s var(--easeOutQuint); }
    		    }
    		}
    		.cmn_main_layer {
    		    .main_title {
    		        img { transform: scale(1); opacity: 1; transition: transform 2s var(--easeOutQuint), opacity 2s var(--easeOutQuint); }
    		    }
    		}
		}
	}
}

/* fv main
-------------------------------*/
#fv_main {
    &.animate {
		.kv_area_aspect_ratio {
    	    .kv_area {transform: scale(1.1);}
    	}
    	.main_title {
    	    img {transform: scale(1.1); opacity: 0;}
    	}
		&.load_open {
			.kv_area_aspect_ratio {
    		    .kv_area {transform: scale(1); transition: transform 3s var(--easeOutQuint);}
    		}
    		.main_title {
    		    img {transform: scale(1); opacity: 1; transition: transform 2s var(--easeOutQuint);}
    		}
		}
	}
}