@-webkit-keyframes toppfield-bouncedelay {
0%,80%,
	to {
		-webkit-transform: scale(0);
		transform: scale(0);
		opacity: 0;
	} 40% {
		-webkit-transform :scale(1); transform:scale(1);opacity:1
		}
}
@keyframes toppfield-bouncedelay {
	0%,80%,
	to {
		-webkit-transform: scale(0);
		transform: scale(0);
		opacity: 0
	}
	40%{
	-webkit-transform:scale(1);transform:scale(1);opacity:1
	}
}

@keyframes bounce
{
	0% { transform: scale(0); opacity: 0; }
	10% { transform:scale(1.3); }
	15% { transform:scale(0.9); }
	20% { transform:scale(1); opacity:1; }
	75% { transform:scale(1); opacity:1; }
	100% { transform:scale(0); opacity:0; }
}

@-webkit-keyframes bounce {
	0% { -webkit-transform: scale(0); opacity: 0; }
	10% { -webkit-transform:scale(1.3); }
	15% { -webkit-transform:scale(0.9); }
	20% { -webkit-transform:scale(1); opacity:1; }
	75% { -webkit-transform:scale(1); opacity:1; }
	100% { -webkit-transform:scale(0); opacity:0; }
}
@keyframes bounce2 {
	0% { transform: scale(0); opacity: 0; }
	12.5% { transform:scale(1.3); }
	18.75% { transform:scale(0.9); }
	25% { transform:scale(1); opacity:1; }
	100%{ transform:scale(1); opacity:1; }
}
@-webkit-keyframes bounce2 {
	0% { transform: scale(0); opacity: 0; }
	12.5% { transform:scale(1.3); }
	18.75% { transform:scale(0.9); }
	25% { transform:scale(1); opacity:1; }
	100%{ transform:scale(1); opacity:1; }
}

@keyframes fadein {
	from { opacity:0; }
    to { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
	from { opacity:0; }
    to { opacity: 1; }
 }

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
	from { opacity:0; }
    to { opacity: 1; }
 }

/* Internet Explorer */
@-ms-keyframes fadein {
	from { opacity:0; }
    to { opacity: 1; }
 }

/* Opera < 12.1 */
@-o-keyframes fadein {
	from { opacity:0;}
    to { opacity: 1; }
}

@-webkit-keyframes fadein {
	from { opacity:0;}
	to { opacity: 1; }
}

@-moz-keyframes fadein {
	from { opacity:0; }
    to { opacity: 1; }
}

@keyframes fadein {
	from { opacity:0; }
    to { opacity: 1; }
}

@-webkit-keyframes fadeout {
	from { opacity:1; }
    to { opacity: 0; }
}

@-moz-keyframes fadeout {
	from { opacity:1;}
	to { opacity: 0; }
}

@keyframes fadeout {
	from { opacity:1;}
    to { opacity: 0; }
}

/* keyframes for slidein from sides */
@-webkit-keyframes slideinfromright {
	from { -webkit-transform:translate3d(50%, 0, 0); opacity: 0; }
    to { -webkit-transform: translate3d(0, 0, 0); opacity: 1; }
 }
@-moz-keyframes slideinfromright {
	from { -moz-transform:translateX(50%); opacity: 0; }
 	to { -moz-transform: translateX(0); opacity: 1; }
 }

@keyframes slideinfromright {
	from { transform:translateX(50%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
 }
@-webkit-keyframes slideinfromleft {
	from { -webkit-transform:translate3d(-50%, 0, 0); opacity: 0; }
 	to { -webkit-transform: translate3d(0, 0, 0); opacity: 1; }
}
@-moz-keyframes slideinfromleft {
	from { -moz-transform:translateX(-50%); opacity: 0;}
    to { -moz-transform: translateX(0); opacity: 1; }
}

@keyframes slideinfromleft {
	from { transform:translateX(-50%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
 }
/* keyframes for slideout to sides */
@-webkit-keyframes slideouttoleft {
	from { -webkit-transform:translate3d(0, 0, 0); opacity: 1; }
    to { -webkit-transform: translate3d(-80%, 0, 0); opacity: 0; }
}
@-moz-keyframes slideouttoleft {
	from { -moz-transform:translateX(0); opacity: 1; }
	to { -moz-transform: translateX(-80%); opacity: 0; }
 }
@keyframes slideouttoleft {
	from { transform:translateX(0); opacity: 1; }
    to { transform: translateX(-80%); opacity: 0; }
}
@-webkit-keyframes slideouttoright {
	from { -webkit-transform:translate3d(0, 0, 0); opacity: 1; }
 	to { -webkit-transform: translate3d(80%, 0, 0); opacity: 0; }
 }
@-moz-keyframes slideouttoright {
	from { -moz-transform:translateX(0); opacity: 1; }
    to { -moz-transform: translateX(80%); opacity: 0; }
 }
@keyframes slideouttoright {
	from { transform:translateX(0); opacity: 1; }
    to { transform: translateX(80%); opacity: 0; }
 }


@-webkit-keyframes slideinfromtop {
	from { -webkit-transform:translateY(-100%);}
	to {-webkit-transform: translateY(0); }

}
@-moz-keyframes slideinfromtop {
	from { -moz-transform:translateY(-100%);}
     to { -moz-transform: translateY(0); }
}

@keyframes slideinfromtop {
	from { transform:translateY(-100%); }
    to { transform: translateY(0); }
 }
@-webkit-keyframes slideouttotop {
	from { -webkit-transform:translateY(0); }
	to { -webkit-transform: translateY(-100%); }
 }
@-moz-keyframes slideouttotop {
	from { -moz-transform:translateY(0); }
      to { -moz-transform: translateY(-100%); }
 }
@keyframes slideouttotop {
	from { transform:translateY(0); }
    to { transform: translateY(-100%); }
 }
@-webkit-keyframes slideinfrombottom {
	from { -webkit-transform:translateY(100%); }
     to { -webkit-transform: translateY(0); }

}
@-moz-keyframes slideinfrombottom {
	from { -moz-transform:translateY(100%); }
    to { -moz-transform: translateY(0); }
 }
@keyframes slideinfrombottom {
	from { transform:translateY(100%); }
 	to { transform: translateY(0); }
}
@-webkit-keyframes slideouttobottom {
	from { -webkit-transform:translateY(0);}
      to { -webkit-transform: translateY(100%); }
 }
@-moz-keyframes slideouttobottom {
	from { -moz-transform:translateY(0);}
	to {-moz-transform: translateY(100%);}
}
@keyframes slideouttobottom {
	from { transform:translateY(0);}
	to {transform: translateY(100%);}
}

.in {
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-duration: 350ms;
	-moz-animation-timing-function: ease-out;
	-moz-animation-duration: 350ms;
	animation-timing-function: ease-out;
	animation-duration: 350ms;
}

.out {
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-duration: 225ms;
	-moz-animation-timing-function: ease-in;
	-moz-animation-duration: 225ms;
	animation-timing-function: ease-in;
	animation-duration: 225ms;
}

.fade {
	opacity: 100; /* // 애니메이션 적용 시 0으로 변경 */
}
.slide {
	opacity: 100; /* // 애니메이션 적용 시 0으로 변경 */
}

.fade.out {
	opacity: 0;
	-webkit-animation-duration: 125ms;
	-webkit-animation-name: fadeout;
	-moz-animation-duration: 125ms;
	-moz-animation-name: fadeout;
	animation-duration: 125ms;
	animation-name: fadeout;
}

.fade.in {
	opacity: 1;
	-webkit-animation-duration: 75ms;
	-webkit-animation-name: fadein;
	-moz-animation-duration: 75ms;
	-moz-animation-name: fadein;
	animation-duration: 75ms;
	animation-name: fadein;
}




.slide.in {
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-duration: 300ms;
	-moz-animation-timing-function: ease-out;
	-moz-animation-duration: 300ms;
	animation-timing-function: ease-out;
	animation-duration: 150ms;
}

.slide.out {
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-duration: 200ms;
	-moz-animation-timing-function: ease-out;
	-moz-animation-duration: 200ms;
	animation-timing-function: ease-out;
	animation-duration: 300ms;
}

.slide.out {
	-webkit-animation-name: slideouttoleft;
	-moz-animation-name: slideouttoleft;
	animation-name: slideouttoleft;
}

.slide.in {
	opacity: 1;
	-webkit-animation-name: slideinfromright;
	-moz-animation-name: slideinfromright;
	animation-name: slideinfromright;
}

.slide.out.reverse {
	-webkit-animation-name: slideouttoright;
	-moz-animation-name: slideouttoright;
	animation-name: slideouttoright;
}

.slide.in.reverse {
	opacity: 1;
	-webkit-animation-name: slideinfromleft;
	-moz-animation-name: slideinfromleft;
	animation-name: slideinfromleft;
}

.slidefade {
	opacity: 0;
	left: 100%;
	position: relative;
	height: 100%;
	width: 100%;
}

.slidefade.out {
	left: -100%;
	-webkit-transform: translateX(-100%);
	-webkit-animation-name: slideouttoleft;
	-webkit-animation-duration: 225ms;
	-moz-transform: translateX(-100%);
	-moz-animation-name: slideouttoleft;
	-moz-animation-duration: 225ms;
	transform: translateX(-100%);
	animation-name: slideouttoleft;
	animation-duration: 225ms;
}

.slidefade.in {
	left: 0;
	opacity: 1;
	-webkit-transform: translateX(0);
	-webkit-animation-name: fadein;
	-webkit-animation-duration: 200ms;
	-moz-transform: translateX(0);
	-moz-animation-name: fadein;
	-moz-animation-duration: 200ms;
	transform: translateX(0);
	animation-name: fadein;
	animation-duration: 200ms;
}

.slidefade.out.reverse {
	-webkit-transform: translateX(100%);
	-webkit-animation-name: slideouttoright;
	-webkit-animation-duration: 200ms;
	-moz-transform: translateX(100%);
	-moz-animation-name: slideouttoright;
	-moz-animation-duration: 200ms;
	transform: translateX(100%);
	animation-name: slideouttoright;
	animation-duration: 200ms;
}

.slidefade.in.reverse {
	-webkit-transform: translateX(0);
	-webkit-animation-name: fadein;
	-webkit-animation-duration: 200ms;
	-moz-transform: translateX(0);
	-moz-animation-name: fadein;
	-moz-animation-duration: 200ms;
	transform: translateX(0);
	animation-name: fadein;
	animation-duration: 200ms;
}
/* slide down */
.slidedown.out {
	-webkit-animation-name: fadeout;
	-webkit-animation-duration: 100ms;
	-moz-animation-name: fadeout;
	-moz-animation-duration: 100ms;
	animation-name: fadeout;
	animation-duration: 100ms;
}

.slidedown.in {
	-webkit-transform: translateY(0);
	-webkit-animation-name: slideinfromtop;
	-webkit-animation-duration: 250ms;
	-moz-transform: translateY(0);
	-moz-animation-name: slideinfromtop;
	-moz-animation-duration: 250ms;
	transform: translateY(0);
	animation-name: slideinfromtop;
	animation-duration: 250ms;
}

.slidedown.in.reverse {
	-webkit-animation-name: fadein;
	-webkit-animation-duration: 150ms;
	-moz-animation-name: fadein;
	-moz-animation-duration: 150ms;
	animation-name: fadein;
	animation-duration: 150ms;
}

.slidedown.out.reverse {
	-webkit-transform: translateY(-100%);
	-webkit-animation-name: slideouttotop;
	-webkit-animation-duration: 200ms;
	-moz-transform: translateY(-100%);
	-moz-animation-name: slideouttotop;
	-moz-animation-duration: 200ms;
	transform: translateY(-100%);
	animation-name: slideouttotop;
	animation-duration: 200ms;
}

/* slide up */
.slideup.out {
	-webkit-animation-name: fadeout;
	-webkit-animation-duration: 100ms;
	-moz-animation-name: fadeout;
	-moz-animation-duration: 100ms;
	animation-name: fadeout;
	animation-duration: 100ms;
}

.slideup.in {
	-webkit-transform: translateY(0);
	-webkit-animation-name: slideinfrombottom;
	-webkit-animation-duration: 250ms;
	-moz-transform: translateY(0);
	-moz-animation-name: slideinfrombottom;
	-moz-animation-duration: 250ms;
	transform: translateY(0);
	animation-name: slideinfrombottom;
	animation-duration: 250ms;
}

.slideup.in.reverse {
	-webkit-animation-name: fadein;
	-webkit-animation-duration: 150ms;
	-moz-animation-name: fadein;
	-moz-animation-duration: 150ms;
	animation-name: fadein;
	animation-duration: 150ms;
}

.slideup.out.reverse {
	-webkit-transform: translateY(100%);
	-webkit-animation-name: slideouttobottom;
	-webkit-animation-duration: 200ms;
	-moz-transform: translateY(100%);
	-moz-animation-name: slideouttobottom;
	-moz-animation-duration: 200ms;
	transform: translateY(100%);
	animation-name: slideouttobottom;
	animation-duration: 200ms;
}