/*----------------------------------------
	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; }
	100% { opacity: 0; visibility: hidden; } 
}
/* animation: fade_out 0.4s ease forwards; */

/*----------------------------------------
	common animation
------------------------------------------*/

.cmn_in_page_head {
	&.animate {transform: translateY(-30%); opacity: 0;
		.page_title {transform: translateY(-20%); opacity: 0;}
		.page_title_sub { transform: translateY(-60%); opacity: 0;}
		&.load_open { transform: translateY(0); opacity: 1; transition: 1.6s var(--easeOutQuint);
			.page_title { transform: translateY(0); opacity: 1; transition: 1.6s var(--easeOutQuint); transition-delay: 0.1s;}
			.page_title_sub { transform: translateY(0); opacity: 1; transition: 1.6s var(--easeOutQuint); transition-delay: 0.2s;}
		}
	}
}

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

#fv {
    &.animate {
		.cmn_bg_layer {
    	    .plus_texture {}
    	    .bg_lines_pattern {opacity: 0; transform: scale(3 , 1);}
    	    .bg_lines_section {
    	        span {transform: scale(1 , 0); transform-origin: bottom;}
    	    }
    	    .bg_logo {
    	        img {transform: translate(0 , 10%); opacity: 0;}
    	    }
    	    .catch_text {
    	        .catch_text_1 {
					img { transform: translate(0 , 20%); opacity: 0;}
				}
    	        .catch_text_2 {
					img { transform: translate(0 , 20%); opacity: 0;}
				}
    	    }
    	}
    	.cmn_main_layer {
    	    .talents_area {
    	        .talent_box_layer { 
    	            .talent_box {
    	                .talent_img {
							img {transform: translate(-20% , 0); opacity: 0;}
						}
						&:nth-of-type(1) .talent_img img , &:nth-of-type(4) .talent_img img { transform: translate(-10% , 0);}
						&:nth-of-type(2) .talent_img img , &:nth-of-type(5) .talent_img img { transform: translate(0 , 0);}
						&:nth-of-type(3) .talent_img img , &:nth-of-type(6) .talent_img img { transform: translate(10% , 0);}
    	            }
    	        }
    	        .info_layer {
    	            .info_box_area {
    	                .info_box {}
    	            }
    	        }
    	    }
    	}
		&.load_open {
			.cmn_bg_layer {
    		    .plus_texture {}
    		    .bg_lines_pattern { opacity: 1; transform: scale(1 , 1); transition: 1.8s var(--easeOutQuint);}
    		    .bg_lines_section {
    		        span { transform: scale(1 , 1); transition: 1.8s var(--easeOutQuint);}
    		    }
    		    .bg_logo {
    		        img { transform: translate(0 , 0); opacity: 1; transition: 1.8s var(--easeOutQuint);}
    		    }
    		    .catch_text {
    		        .catch_text_1 {
						img { transform: translate(0 , 0); opacity: 1; transition: 1.8s var(--easeOutQuint);}
					}
    		        .catch_text_2 {
						img { transform: translate(0 , 0); opacity: 1; transition: 1.8s var(--easeOutQuint); transition-delay: 0.2s;}
					}
    		    }
    		}
    		.cmn_main_layer {
    		    .talents_area {
    		        .talent_box_layer { 
    		            .talent_box {
    		                .talent_img {
								img { opacity: 1; transition: 1.8s var(--easeOutQuint);}
							}
							&:nth-of-type(1) .talent_img img , &:nth-of-type(4) .talent_img img { transform: translate(0 , 0);}
							&:nth-of-type(2) .talent_img img , &:nth-of-type(5) .talent_img img { transform: translate(0 , 0);}
							&:nth-of-type(3) .talent_img img , &:nth-of-type(6) .talent_img img { transform: translate(0 , 0);}
			            }
    		        }
    		        .info_layer {
    		            .info_box_area {
    		                .info_box {}
    		            }
    		        }
    		    }
    		}
		}
	}
}

/* about
-------------------------------*/
.cmn_about_mekpark {
    .section_title {
		&.animate {transform: translateY(20%); opacity: 0;
			&.scroll_in {transform: translateY(0); opacity: 1; transition: 0.6s var(--easeOutQuint);}
		}
	}
    .catch {
		&.animate {transform: translateY(20%); opacity: 0;
			&.scroll_in {transform: translateY(0); opacity: 1; transition: 0.9s var(--easeOutQuint);}
		}
	}
    .text_area {
		&.animate {transform: translateY(20%); opacity: 0;
			&.scroll_in {transform: translateY(0); opacity: 1; transition: 0.9s var(--easeOutQuint);}
		}
	}
}

/* units
-------------------------------*/
#units {
    .unit_box_area {
        .unit_box {
            .cmn_bg_layer {
                .plus_texture {}
                .mosaic_ornament {}
                .bg_unit_name {}
            }
            .cmn_main_layer {
                .talent_images {
					&.animate {
						.talent_img {
							img {opacity: 0; transform: translate(-5% , 0);}
                    	    &:nth-of-type(1) img {}
                    	    &:nth-of-type(2) img {}
                    	    &:nth-of-type(3) img {}
                    	}
						&.scroll_in {
							.talent_img {
								img {opacity: 1; transform: translate(0 , 0); transition: 1.2s var(--easeOutQuint);}
                    		    &:nth-of-type(1) img {transition-delay: 0.3s;}
                    		    &:nth-of-type(2) img {transition-delay: 0.4s;}
                    		    &:nth-of-type(3) img {transition-delay: 0.2s;}
                    		}
						}
					}
                }
                .talent_info {
                    &.animate {
						.unit_name {
                    	    img {}
                    	}
						&.scroll_in {
							.unit_name {
							    img {}
							}
						}
					}
                }
            }
        }
    }
}