@charset "utf-8";

/* ********** 애니메이션 타입 ********** */
.ani {opacity:0;}

/* pc 이상 */
@media screen and (min-width: 768px) {
	.ani_on {
		opacity:1;
		-webkit-animation-fill-mode:forwards;
		-moz-animation-fill-mode:forwards;
		animation-fill-mode:none;
		-webkit-animation: ani_slideUp 1s 0s ease; 
		-moz-animation: ani_slideUp 1s 0s ease; 
		-o-animation: ani_slideUp 1s 0s ease; 
		animation: ani_slideUp 1s 0s ease; 
	} 
}

/* pc 이하 */
@media screen and (max-width: 767px) {
	.ani_on {
		opacity:1;
		-webkit-animation-fill-mode:forwards;
		-moz-animation-fill-mode:forwards;
		animation-fill-mode:none;
		-webkit-animation: ani_fadeIn 1s 0s ease; 
		-moz-animation: ani_fadeIn 1s 0s ease; 
		-o-animation: ani_fadeIn 1s 0s ease; 
		animation: ani_fadeIn 1s 0s ease; 
	} 
}

/* 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;}
}
@-moz-keyframes ani_fadeOut {
    from { opacity:1;}
    to { opacity:0;}
}
@-o-keyframes ani_fadeOut {
    from { opacity:1;}
    to { opacity:0;}
}
@keyframes ani_fadeOut {
    from { opacity:1;}
    to { opacity:0;}
}

/* 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.5); }
    to { opacity:1;-webkit-transform: scale(1); }
}
@-moz-keyframes ani_scaleDown {
    from { opacity:0;-moz-transform: scale(1.5); }
    to { opacity:1;-moz-transform: scale(1); }
}
@-o-keyframes ani_scaleDown {
    from { opacity:0;-o-transform: scale(1.5); }
    to { opacity:1;-o-transform: scale(1); }
}
@keyframes ani_scaleDown {
    from { opacity:0;transform: scale(1.5); }
    to { opacity:1;transform: scale(1); }
}

/* slide - 아래 > 위 */
@-webkit-keyframes ani_slideUp {
    from { -webkit-transform: translateY(100px); }
    to {-webkit-transform: translateY(0px); }
}
@-moz-keyframes ani_slideUp {
    from {-moz-transform: translateY(100px)); }
    to {-moz-transform: translateY(0px); }
}
@-o-keyframes ani_slideUp {
    from {-o-transform: translateY(100px); }
    to {-o-transform: translateY(0px); }
}
@keyframes ani_slideUp {
    from {transform: translateY(100px); }
    to {transform: translateY(0px); }
}

/* 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); }
}

/* ********** 애니메이션 속도 ********** */
.ani0 {
	transition:none !important;
	-webkit-transition:none !important;
	-moz-transition:none !important;
}
.ani01 {
	transition:all .1s ease !important;
	-webkit-transition:all .1s ease !important;
	-moz-transition:all .1s ease !important;
}
.ani02 {
	transition:all .2s ease !important;
	-webkit-transition:all .2s ease !important;
	-moz-transition:all .2s ease !important;
}
.ani03 {
	transition:all .3s ease !important;
	-webkit-transition:all .3s ease !important;
	-moz-transition:all .3s ease !important;
}
.ani05 {
	transition:all .5s ease !important;
	-webkit-transition:all .5s ease !important;
	-moz-transition:all .5s ease !important;
}
.ani1 {
	transition:all 1s ease !important;
	-webkit-transition:all 1s ease !important;
	-moz-transition:all 1s ease !important;
}
.ani2 {
	transition:all 2s ease !important;
	-webkit-transition:all 2s ease !important;
	-moz-transition:all 2s ease !important;
}
.ani3 {
	transition:all 3s ease !important;
	-webkit-transition:all 3s ease !important;
	-moz-transition:all 3s ease !important;
}