@charset "utf-8";

/* ********** ¾Ö´Ï¸ÞÀÌ¼Ç Å¸ÀÔ ********** */
.cani {opacity:0;}
.cani2 {opacity:0;}
.cani3 {position:relative; opacity:1; top:50px; transition: top 0.6s ease-in-out;}
.cani_scaleUp {opacity:0;}
.cani_fadeIn {opacity:0;}
.cani_slideRight {opacity:0;}
.cani_slideLeft {opacity:0;}
/* pc ÀÌ»ó */
@media screen and (min-width: 768px) {
	.cani_on {
		opacity:1;
		-webkit-animation-fill-mode:forwards;
		-moz-animation-fill-mode:forwards;
		animation-fill-mode:none;
		-webkit-animation: ani_slideUp 1.5s 0s ease; 
		-moz-animation: ani_slideUp 1.5s 0s ease; 
		-o-animation: ani_slideUp 1.5s 0s ease; 
		animation: ani_slideUp 1.5s 0s ease; 
	} 
	.cani2_on {
		opacity:1;
		-webkit-animation-fill-mode:forwards;
		-moz-animation-fill-mode:forwards;
		animation-fill-mode:none;
		-webkit-animation: ani_slideDown 1.5s 0s ease; 
		-moz-animation: ani_slideDown 1.5s 0s ease; 
		-o-animation: ani_slideDown 1.5s 0s ease; 
		animation: ani_slideDown 1.5s 0s ease; 
	} 
	.cani3_on {
		opacity:1;
		top:0;
		
	} 
	.cani_scaleUp_on
	{
		opacity:1;
		-webkit-animation-fill-mode:forwards;
		-moz-animation-fill-mode:forwards;
		animation-fill-mode:none;
		-webkit-animation: ani_scaleUp 1.5s 0s ease; 
		-moz-animation: ani_scaleUp 1.5s 0s ease; 
		-o-animation: ani_scaleUp 1.5s 0s ease; 
		animation: ani_scaleUp 1.5s 0s ease; 
	} 

	.cani_scaleDown_on
	{
		opacity:1;
		-webkit-animation-fill-mode:forwards;
		-moz-animation-fill-mode:forwards;
		animation-fill-mode:none;
		-webkit-animation: ani_scaleDown 1.5s 0s ease; 
		-moz-animation: ani_scaleDown 1.5s 0s ease; 
		-o-animation: ani_scaleDown 1.5s 0s ease; 
		animation: ani_scaleDown 1.5s 0s ease; 
	} 

	.cani_fadeIn_on
	{
		opacity:1;
		-webkit-animation-fill-mode:forwards;
		-moz-animation-fill-mode:forwards;
		animation-fill-mode:none;
		-webkit-animation: ani_fadeIn 1.5s 0s ease; 
		-moz-animation: ani_fadeIn 1.5s 0s ease; 
		-o-animation: ani_fadeIn 1.5s 0s ease; 
		animation: ani_fadeIn 1.5s 0s ease; 
	} 

	.cani_fadeOut_on
	{
		opacity:0.8;
		-webkit-animation-fill-mode:forwards;
		-moz-animation-fill-mode:forwards;
		animation-fill-mode:none;
		-webkit-animation: ani_fadeOut 1.5s 0s ease; 
		-moz-animation: ani_fadeOut 1.5s 0s ease; 
		-o-animation: ani_fadeOut 1.5s 0s ease; 
		animation: ani_fadeOut 1.5s 0s ease; 
	} 

	.cani_slideRight_on
	{
		opacity:1;
		animation: ani_slideRight 1.5s 0s ease; 
	}
	
	.cani_slideLeft_on
	{
		opacity:1;
		animation: ani_slideLeft 1.5s 0s ease; 
	}

}

/* pc ÀÌÇÏ */
@media screen and (max-width: 767px) {
	.cani {opacity:1;}
	.cani_on {
		/*opacity:1;
		-webkit-animation-fill-mode:forwards;
		-moz-animation-fill-mode:forwards;
		animation-fill-mode:none;
		-webkit-animation: ani_fadeIn 1.0s 0s ease; 
		-moz-animation: ani_fadeIn 1.0s 0s ease; 
		-o-animation: ani_fadeIn 1.0s 0s ease; 
		animation: ani_fadeIn 1.0s 0s ease;*/ 
	} 
	.cani2_on {
		opacity:1;
		-webkit-animation-fill-mode:forwards;
		-moz-animation-fill-mode:forwards;
		animation-fill-mode:none;
		-webkit-animation: ani_scaleUp 1.5s 0s ease; 
		-moz-animation: ani_scaleUp 1.5s 0s ease; 
		-o-animation: ani_scaleUp 1.5s 0s ease; 
		animation: ani_scaleUp 1.5s 0s ease; 
	} 


	.cani_scaleUp_on
	{
		opacity:1;
		-webkit-animation-fill-mode:forwards;
		-moz-animation-fill-mode:forwards;
		animation-fill-mode:none;
		-webkit-animation: ani_scaleUp 1.5s 0s ease; 
		-moz-animation: ani_scaleUp 1.5s 0s ease; 
		-o-animation: ani_scaleUp 1.5s 0s ease; 
		animation: ani_scaleUp 1.5s 0s ease; 
	} 


	.cani_fadeIn,.cani_fadeIn_on
	{
		opacity:1;

	} 

	.cani_fadeOut,.cani_fadeOut_on
	{
		opacity:1;
		

	} 

}

/* fade - õõÈ÷ ¼±¸íÇØÁü */
@-webkit-keyframes ani_fadeIn {
    from { opacity:0;}
    to { opacity:1;}
}
@-moz-keyframes ani_fadeIn {
    from { opacity:0;}
    to { opacity:1;}
}
@-o-keyframes ani_fadeIn {
    from { opacity:0;}
    to { opacity:1;}
}
@keyframes ani_fadeIn {
    from { opacity:0; }
    to { opacity:1;}
}

/* fade - õõÈ÷ Èå·ÁÁü */
@-webkit-keyframes ani_fadeOut {
    from { opacity:1;}
    to { opacity:0.8;}
}
@-moz-keyframes ani_fadeOut {
    from { opacity:1;}
    to { opacity:0.8;}
}
@-o-keyframes ani_fadeOut {
    from { opacity:1;}
    to { opacity:0.8;}
}
@keyframes ani_fadeOut {
    from { opacity:1;}
    to { opacity:0.8;}
}

/* scale - ÀÛ´Ù°¡ Ä¿Áü */
@-webkit-keyframes ani_scaleUp {
    from { opacity:0;-webkit-transform: scale(0.5); }
    to { opacity:1;-webkit-transform: scale(1); }
}
@-moz-keyframes ani_scaleUp {
    from { opacity:0;-moz-transform: scale(0.5); }
    to { opacity:1;-moz-transform: scale(1); }
}
@-o-keyframes ani_scaleUp {
    from { opacity:0;-o-transform: scale(0.5); }
    to { opacity:1;-o-transform: scale(1); }
}
@keyframes ani_scaleUp {
    from { opacity:0;transform: scale(0.5); }
    to { opacity:1;transform: scale(1); }
}

/* scale - Å©´Ù°¡ ÀÛ¾ÆÁü */
@-webkit-keyframes ani_scaleDown {
    from { opacity:0;-webkit-transform: scale(1.2); opacity:0;}
    to { opacity:1;-webkit-transform: scale(1); opacity:1;}
}
@-moz-keyframes ani_scaleDown {
    from { opacity:0;-moz-transform: scale(1.2); opacity:0;}
    to { opacity:1;-moz-transform: scale(1); opacity:1;}
}
@-o-keyframes ani_scaleDown {
    from { opacity:0;-o-transform: scale(1.2); opacity:0;}
    to { opacity:1;-o-transform: scale(1); opacity:1;}
}
@keyframes ani_scaleDown {
    from { opacity:0;transform: scale(1.2); opacity:0;}
    to { opacity:1;transform: scale(1); opacity:1;}
}


/* slide - ¾Æ·¡ > À§ */
@-webkit-keyframes ani_slideUp {
    from { -webkit-transform: translateY(100px); opacity:0; }
    to {-webkit-transform: translateY(0px); opacity:1; }
}
@-moz-keyframes ani_slideUp {
    from {-moz-transform: translateY(100px));opacity:0; }
    to {-moz-transform: translateY(0px); opacity:1; }
}
@-o-keyframes ani_slideUp {
    from {-o-transform: translateY(100px); opacity:0;}
    to {-o-transform: translateY(0px);  opacity:1;}
}
@keyframes ani_slideUp {
    from {transform: translateY(100px);opacity:0; }
    to {transform: translateY(0px); opacity:1; }
}



/* slide - À§ > ¾Æ·¡ */
@-webkit-keyframes ani_slideDown {
    from {-webkit-transform: translateY(-50px); }
    to { opacity:1;-webkit-transform: translateY(0px); }
}
@-moz-keyframes ani_slideDown {
    from {-moz-transform: translateY(-50px)); }
    to { opacity:1;-moz-transform: translateY(0px); }
}
@-o-keyframes ani_slideDown {
    from {-o-transform: translateY(-50px); }
    to {-o-transform: translateY(0px); }
}
@keyframes ani_slideDown {
    from {transform: translateY(-50px); }
    to {transform: translateY(0px); }
}

/* slide - ÁÂ > ¿ì */
@-webkit-keyframes ani_slideRight {
    from {-webkit-transform: translateX(-50px); }
    to { opacity:1;-webkit-transform: translateX(0px);}
}
@-moz-keyframes ani_slideRight {
    from {-moz-transform: translateX(-50px)); opacity:0;}
    to { opacity:1;-moz-transform: translateX(0px); opacity:1;}
}
@-o-keyframes ani_slideRight {
    from {-o-transform: translateX(-50px); opacity:0;}
    to {-o-transform: translateX(0px); opacity:1;}
}
@keyframes ani_slideRight {
    from {transform: translateX(-50px); opacity:0;}
    to {transform: translateX(0px); opacity:1;}
}

/* slide - ¿ì > ÁÂ */
@-webkit-keyframes ani_slideLeft {
    from {-webkit-transform: translateX(50px); }
    to { opacity:1;-webkit-transform: translateX(0px);}
}
@-moz-keyframes ani_slideLeft {
    from {-moz-transform: translateX(50px)); opacity:0;}
    to { opacity:1;-moz-transform: translateX(0px); opacity:1;}
}
@-o-keyframes ani_slideLeft {
    from {-o-transform: translateX(50px); opacity:0;}
    to {-o-transform: translateX(0px); opacity:1;}
}
@keyframes ani_slideLeft {
    from {transform: translateX(50px); opacity:0;}
    to {transform: translateX(0px); opacity:1;}
}


/* ********** ¾Ö´Ï¸ÞÀÌ¼Ç ¼Óµµ ********** */
.ani0 {
	transition:none !important;
	-webkit-transition:none !important;
	-moz-transition:none !important;
}
.ani01 {
	transition:all .1s linear !important;
	-webkit-transition:all .1s linear !important;
	-moz-transition:all .1s linear !important;
}
.ani02 {
	transition:all .2s linear !important;
	-webkit-transition:all .2s linear !important;
	-moz-transition:all .2s linear !important;
}
.ani03 {
	transition:all .3s linear !important;
	-webkit-transition:all .3s linear !important;
	-moz-transition:all .3s linear !important;
}
.ani05 {
	transition:all .5s linear !important;
	-webkit-transition:all .5s linear !important;
	-moz-transition:all .5s linear !important;
}
.ani1 {
	transition:transform 1.1s ease-out !important;
	-webkit-transition:all 1.1s ease-out !important;
	-moz-transition:all 1.1s ease-out !important;
	 opacity 1.1s ease 167ms;
}
.ani2 {
	transition:all 1s linear !important;
	-webkit-transition:all 1s linear !important;
	-moz-transition:all 1s linear !important;
}
.ani3 {
	transition:all 1s linear !important;
	-webkit-transition:all 1s linear !important;
	-moz-transition:all 1s linear !important;
}


/* ********** ¾Ö´Ï¸ÞÀÌ¼Ç Áö¿¬ ********** */

.delay-1 {animation-delay: 0.1s;}
.delay-2 {animation-delay: 0.2s;}
.delay-3 {animation-delay: 0.3s;}
.delay-5 {animation-delay: 0.5s;}
.delay-7 {animation-delay: 0.7s;}
.delay-10 {animation-delay: 1.0s;}
.delay-13 {animation-delay: 1.3s;}
.delay-16 {animation-delay: 1.6s;}