@-webkit-keyframes swing{
20%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}
40%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}
60%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}
80%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}
100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
}
@keyframes swing{
20%{-webkit-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg)}
40%{-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg)}
60%{-webkit-transform:rotate(2deg);-ms-transform:rotate(2deg);transform:rotate(2deg)}
80%{-webkit-transform:rotate(-2deg);-ms-transform:rotate(-2deg);transform:rotate(-2deg)}
100%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}
}
@-webkit-keyframes swing_cup {
25%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}
50%{-webkit-transform:rotate(-3deg);transform:rotate(-3deg)}
75%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}
100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
}
@keyframes swing_cup {
25%{-webkit-transform:rotate(3deg);-ms-transform:rotate(3deg);transform:rotate(3deg)}
50%{-webkit-transform:rotate(-3deg);-ms-transform:rotate(-3deg);transform:rotate(-3deg)}
75%{-webkit-transform:rotate(2deg);-ms-transform:rotate(2deg);transform:rotate(2deg)}
100%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}
}
 
 /* 커피 섞이는 효과 */
@-webkit-keyframes coffee2{ 
0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1);}
100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1);}
}
@keyframes coffee2{
0%{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);-ms-transform:rotate(0) scale(1);transform:rotate(0) scale(1);}
100%{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1);}
}


/* ㅋㅍㅋ 배경 텍스트 효과 */
@-webkit-keyframes back_txt {
0% { -webkit-transform:translateX(-3px) translateY(-3px);transform:translateX(-3px) translateY(-3px) }
25 { -webkit-transform:translateX(0) translateY(-3px);transform:translateX(0) translateY(-3px) }
50% { -webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0) }
75% { -webkit-transform:translateX(-3px) translateY(0);transform:translateX(-3px) translateY(0) }
100% { -webkit-transform:translateX(-3px) translateY(-3px);transform:translateX(-3px) translateY(-3px) }
}
@keyframes back_txt {
0% { -webkit-transform:translateX(-3px) translateY(-3px);-ms-transform:translateX(-3px) translateY(-3px);transform:translateX(-3px) translateY(-3px)}
25% { -webkit-transform:translateX(0) translateY(-3px);-ms-transform:translateX(0) translateY(-3px);transform:translateX(0) translateY(-3px)}
50% { -webkit-transform:translateX(0) translateY(0);-ms-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}
75% { -webkit-transform:translateX(-3px) translateY(0);-ms-transform:translateX(-3px) translateY(0);transform:translateX(-3px) translateY(0)}
100% { -webkit-transform:translateX(-3px) translateY(-3px);-ms-transform:translateX(-3px) translateY(-3px);transform:translateX(-3px) translateY(-3px)}
}

@-webkit-keyframes back_txt2 {
0% { -webkit-transform:translateX(0);transform:translateX(0) }
50% { -webkit-transform:translateX(-50%);transform:translateX(-50%) }
100% { -webkit-transform:translateX(-100%);transform:translateX(-100%) }
}
@keyframes back_txt2 {
0% { -webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
50% { -webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
100% { -webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}
}
@-webkit-keyframes back_txt3 {
0% { -webkit-transform:translateX(105%);transform:translateX(105%) }
50% { -webkit-transform:translateX(50%);transform:translateX(50%) }
100% { -webkit-transform:translateX(0);transform:translateX(0) }
}
@keyframes back_txt3 {
0% { -webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}
50% { -webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%)}
100% { -webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
}

@-webkit-keyframes back_txt4 {
0% { -webkit-transform:translateX(0) ;transform:translateX(0) }
50% { -webkit-transform:translateX(-50%);transform:translateX(-50%) }
100% { -webkit-transform:translateX(-100%);transform:translateX(-100%) }
}
@keyframes back_txt4 {
0% { -webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
50% { -webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
100% { -webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}
}
@-webkit-keyframes back_txt5 {
0% { -webkit-transform:translateX(105%);transform:translateX(105%) }
50% { -webkit-transform:translateX(50%);transform:translateX(50%) }
100% { -webkit-transform:translateX(0);transform:translateX(0) }
}
@keyframes back_txt5 {
0% { -webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}
50% { -webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%)}
100% { -webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
}
/* KING index_2 */
@-webkit-keyframes king {
10%,30%,50%,70%,90% {-webkit-transform:scale(1) rotate(1.2deg);transform:scale(1) rotate(1.2deg)}
20%,40%,60%,80%,100% {-webkit-transform:scale(1) rotate(-1.2deg);transform:scale(1) rotate(-1.2deg)}
}
@keyframes king {
10%,30%,50%,70%,90% {-webkit-transform:scale(1) rotate(1.2deg);-ms-transform:scale(1) rotate(1.2deg);transform:scale(1) rotate(1.2deg)}
20%,40%,60%,80%,100% {-webkit-transform:scale(1) rotate(-1.2deg);-ms-transform:scale(1) rotate(-1.2deg);transform:scale(1) rotate(-1.2deg)}
}
/* KING 커피섞일때 왕도 섞이는 효과? */
@-webkit-keyframes king2 { 
0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1);}
100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1);}
}
@keyframes king2 {
0%{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);-ms-transform:rotate(0) scale(1);transform:rotate(0) scale(1);}
100%{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(360deg) scale(1);-ms-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1);}
}

@-webkit-keyframes coffee {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes coffee {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes coffee {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes coffee {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
/* KING 커피섞일때 왕도 섞이는 효과? */
@-webkit-keyframes txt_1 { 
0%{-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:scale(1,1) translateX(0) translateY(0);transform:scale(1,1) translateX(0) translateY(0);}
90%{-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:scale(1,1.1) translateX(0) translateY(2px);transform:scale(1,1.1) translateX(0px) translateY(2px);}
}
@keyframes txt_1 {
0%{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-transform:scale(1,1) translateX(0) translateY(0);-ms-transform:scale(1,1) translateX(0) translateY(0);transform:scale(1,1) translateX(0) translateY(0);}
90%{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-transform:scale(1,1.1) translateX(0px) translateY(2px);-ms-transform:scale(1,1.1) translateX(0px) translateY(2px);transform:scale(1,1.1) translateX(0px) translateY(2px);}
}
@-webkit-keyframes txt_2 { 
	0%{-webkit-transform:scale(1) translateX(0) translateY(0);transform:scale(1) translateX(0) translateY(0);}
	40%{-webkit-transform:scale(1) translateX(0) translateY(-3px);transform:scale(1) translateX(0) translateY(-3px);}
	80%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);}
}
@keyframes txt_2 {
	0%{-webkit-transform:scale(1) translateX(0) translateY(0);-ms-transform:scale(1) translateX(0) translateY(0);transform:scale(1) translateX(0) translateY(0);}
	40%{-webkit-transform:scale(1) translateX(0) translateY(-3px);-ms-transform:scale(1) translateX(0) translateY(-3px);transform:scale(1) translateX(0) translateY(-3px);}
	80%{-webkit-transform:scale(1) translateX(0) translateY(0);-ms-transform:scale(1) translateX(0) translateY(0);transform:scale(1) translateX(0) translateY(0);}
}
@keyframes updown {
	0% { margin-top:0; }
	50% { margin-top:10px; }
	100% { margin-top:0; }
}
/* touchstart 작아짐 */
@-webkit-keyframes smaller {
		0%{ -webkit-transform:scale(1);transform:scale(1); }
		100%{ -webkit-transform:scale(.95);transform:scale(.95); }
}
@keyframes smaller {
		0%{ -webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1); }
		100%{ -webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95); }
}
/* touchend 커짐 */
@-webkit-keyframes bigger {
		0%{ -webkit-transform:scale(.95);transform:scale(.95); }
		100%{ -webkit-transform:scale(1);transform:scale(1); }
}
@keyframes bigger {
		0%{ -webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95); }
		100%{ -webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1); }
}
.smaller { -webkit-animation-name:smaller;animation:smaller 0.05s linear forwards; }
.bigger { -webkit-animation-name:bigger;animation:bigger 0.05s linear forwards; }
@keyframes updown_1 {
	0% { bottom:38px; }
	50% { bottom:42px; }
	100% { bottom:38px; }
}
@keyframes updown_2 {
	0% { bottom:30px; }
	50% { bottom:34px; }
	100% { bottom:30px; }
}
@keyframes updown_3 {
	0% { bottom:56px; }
	50% { bottom:60px; }
	100% { bottom:56px; }
}
@keyframes updown_line_100 {
	0% { height:100%; }
	50% { height:95%; }
	100% { height:100%; }
}
.updown_line_100 { -webkit-animation-name:updown_line_100;animation:updown_line_100 1s linear infinite; }
@keyframes updown_line_90 {
	0% { height:90%; }
	50% { height:85%; }
	100% { height:90%; }
}
.updown_line_90 { -webkit-animation-name:updown_line_90;animation:updown_line_90 1s linear infinite; }
@keyframes updown_line_80 {
	0% { height:80%; }
	50% { height:75%; }
	100% { height:80%; }
}
.updown_line_80 { -webkit-animation-name:updown_line_80;animation:updown_line_80 1s linear infinite; }
@keyframes updown_line_70 {
	0% { height:70%; }
	50% { height:65%; }
	100% { height:70%; }
}
.updown_line_70 { -webkit-animation-name:updown_line_70;animation:updown_line_70 1s linear infinite; }
@keyframes updown_line_60 {
	0% { height:60%; }
	50% { height:55%; }
	100% { height:60%; }
}
.updown_line_60 { -webkit-animation-name:updown_line_60;animation:updown_line_60 1s linear infinite; }
@keyframes updown_line_60 {
	0% { height:60%; }
	50% { height:55%; }
	100% { height:60%; }
}
.updown_line_60 { -webkit-animation-name:updown_line_60;animation:updown_line_60 1s linear infinite; }
@keyframes updown_line_50 {
	0% { height:50%; }
	50% { height:45%; }
	100% { height:50%; }
}
.updown_line_50 { -webkit-animation-name:updown_line_50;animation:updown_line_50 1s linear infinite; }
@keyframes updown_line_40 {
	0% { height:40%; }
	50% { height:35%; }
	100% { height:40%; }
}
.updown_line_40 { -webkit-animation-name:updown_line_40;animation:updown_line_40 1s linear infinite; }
@keyframes updown_line_30 {
	0% { height:30%; }
	50% { height:25%; }
	100% { height:30%; }
}
.updown_line_30 { -webkit-animation-name:updown_line_30;animation:updown_line_30 1s linear infinite; }
@keyframes updown_line_20 {
	0% { height:20%; }
	50% { height:15%; }
	100% { height:20%; }
}
.updown_line_20 { -webkit-animation-name:updown_line_20;animation:updown_line_20 1s linear infinite; }
@keyframes updown_line_10 {
	0% { height:10%; }
	50% { height:5%; }
	100% { height:10%; }
}
.updown_line_10 { -webkit-animation-name:updown_line_10;animation:updown_line_10 1s linear infinite; }

@keyframes shakes_coffee {
	0% {transform: rotate(0deg);}
	35% {transform: rotate(2deg);}
	70% {transform: rotate(-2deg);}
	100% {transform:  rotate(0deg);}
}
.shakes_coffee {-webkit-transform-origin:bottom center;-ms-transform-origin:bottom center;transform-origin:bottom center;-webkit-animation-name:shakes_coffee;animation:shakes_coffee 0.5s linear infinite;}

@keyframes smallbig_coffee {
	0% {transform: scale(1);}
	50% {transform: scale(0.95);}
	100% {transform:  scale(1);}
}
.smallbig_coffee {-webkit-transform-origin:bottom center;-ms-transform-origin:bottom center;transform-origin:bottom center;-webkit-animation-name:smallbig_coffee;animation:smallbig_coffee 1s linear infinite;}
.smallbig_attend {-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-animation-name:smallbig_coffee;animation:smallbig_coffee 0.6s linear infinite;}
/* 로비화면 왕이 웃는 효과 */
@-webkit-keyframes king_smile {
20% {-webkit-transform:scale(1.15) rotate(1deg);transform:scale(1.15) rotate(1deg)}
30%,50%,70% {-webkit-transform:scale(1.15) rotate(2.4deg);transform:scale(1.15) rotate(2.4deg)}
40%,60%,80% {-webkit-transform:scale(1.15) rotate(-2.4deg);transform:scale(1.15) rotate(-2.4deg)}
90% {-webkit-transform:scale(1) rotate(1deg);transform:scale(1) rotate(1deg)}
}
@keyframes king_smile {
20% {-webkit-transform:scale(1.15) rotate(1deg);-ms-transform:scale(1.15) rotate(1deg);transform:scale(1.15) rotate(1deg)}
30%,50%,70% {-webkit-transform:scale(1.15) rotate(2.4deg);-ms-transform:scale(1.15) rotate(2.4deg);transform:scale(1.15) rotate(2.4deg)}
40%,60%,80% {-webkit-transform:scale(1.15) rotate(-2.4deg);-ms-transform:scale(1.15) rotate(-2.4deg);transform:scale(1.15) rotate(-2.4deg)}
90% {-webkit-transform:scale(1) rotate(1deg);-ms-transform:scale(1) rotate(1deg);transform:scale(1) rotate(1deg)}
}

@-webkit-keyframes whipIn_1 {  /* 휘핑추가-휘핑 등장 */
0%{-webkit-transform-origin:bottom center;transform-origin:bottom center;-webkit-transform:scale(0);transform:scale(0);opacity:0;}
100%{-webkit-transform-origin:bottom center;transform-origin:bottom center;-webkit-transform:scale(1);transform:scale(0.9);opacity:1;}
}
@keyframes whipIn_1 {
0%{-webkit-transform-origin:bottom center;-ms-transform-origin:bottom center;transform-origin:bottom center;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}
100%{-webkit-transform-origin:bottom center;-ms-transform-origin:bottom center;transform-origin:bottom center;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(0.9);opacity:1;}
}
@-webkit-keyframes whipIn_2 {  /* 휘핑추가-휘핑 등장 */
0%{-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:scale(0);transform:scale(0);opacity:0;}
100%{-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:scale(1);transform:scale(0.9);opacity:1;}
}
@keyframes whipIn_2 {
0%{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}
100%{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(0.9);opacity:1;}
}

@keyframes cupIn_1 { /* 휘핑추가-컵 */
	0% { top:0px;opacity:0; }
	100% { top:15px;opacity:1; }
}

@keyframes fadeout { 
	0% { opacity:1;left:0; }
	90% { opacity:0;left:0px; }
	100% { opacity:0;left:1500px; }
}
.fadeout { -webkit-animation-name:fadeout;animation:fadeout 0.5s 3s linear forwards; }
@keyframes fadeout_coffeebean { 
	0% { opacity:1;left:0; }
	90% { opacity:0;left:0px; }
	100% { opacity:0;left:1500px; }
}
.fadeout_coffeebean { -webkit-animation-name:fadeout_coffeebean;animation:fadeout_coffeebean 0.5s 4s linear forwards; }
.fadeout_time { -webkit-animation-name:fadeout_coffeebean;animation:fadeout_coffeebean 0.8s 1.2s linear forwards; }

@keyframes fadein { 
	0% { opacity:0; }
	100% { opacity:1; }
}
.fadein { -webkit-animation-name:fadein;animation:fadein 0.5s linear forwards; }
.fadein_line { -webkit-animation-name:fadein;animation:fadein 0.1s 0.5s linear forwards; }
@keyframes shot_1 { 
	0% { opacity:0;top:70px;width:30px;left:50%; }
	80% { opacity:1;top:270px;width:30px;left:50%; }
	100% { opacity:0;top:320px;width:30px;left:50%; }
}
.shot_1 { -webkit-animation-name:shot_1;animation:shot_1 1s linear infinite; }
@keyframes shot_2 { 
	0% { opacity:0;top:70px;width:25px;left:40%; }
	80% { opacity:1;top:250px;width:25px;left:40%; }
	100% { opacity:0;top:300px;width:25px;left:40%; }
}
.shot_2 { -webkit-animation-name:shot_2;animation:shot_2 1.2s 0.3s linear infinite; }
@keyframes shot_3 { 
	0% { opacity:0;top:85px;width:20px;left:65%; }
	80% { opacity:1;top:260px;width:20px;left:65%; }
	100% { opacity:0;top:320px;width:20px;left:65%; }
}
.shot_3 { -webkit-animation-name:shot_3;animation:shot_3 1.2s 0.2s linear infinite; }
@keyframes shot_4 { 
	0% { opacity:0;top:85px;width:30px;left:32%; }
	80% { opacity:1;top:260px;width:30px;left:32%; }
	100% { opacity:0;top:320px;width:30px;left:32%; }
}
.shot_4 { -webkit-animation-name:shot_4;animation:shot_4 1s 0.5s linear infinite; }
@keyframes shot_5 { 
	0% { opacity:0;top:85px;width:20px;left:55%; }
	80% { opacity:1;top:260px;width:20px;left:55%; }
	100% { opacity:0;top:320px;width:20px;left:55%; }
}
.shot_5 { -webkit-animation-name:shot_5;animation:shot_5 1s 0.8s linear infinite; }
@keyframes shot_6 { 
	0% { opacity:0;top:105px;width:25px;left:58%; }
	80% { opacity:1;top:240px;width:25px;left:58%; }
	100% { opacity:0;top:300px;width:25px;left:58%; }
}
.shot_6 { -webkit-animation-name:shot_6;animation:shot_6 1s 1.5s linear infinite; }
@keyframes shot_7 { 
	0% { opacity:0;top:55px;width:30px;left:58%; }
	80% { opacity:1;top:200px;width:30px;left:58%; }
	100% { opacity:0;top:260px;width:30px;left:58%; }
}
.shot_7 { -webkit-animation-name:shot_7;animation:shot_7 1s 1s linear infinite; }

@-webkit-keyframes time_arrow_ani { 
0%{ -webkit-transform:rotate(0);transform:rotate(0);margin-top:-130px;margin-left:-130px;opacity:0; }
10%{-webkit-transform:rotate(270deg);transform:rotate(270deg);margin-top:-130px;margin-left:-130px;opacity:1; }
100%{-webkit-transform:rotate(270deg);transform:rotate(270deg);margin-top:-130px;margin-left:-130px;opacity:1; }
}
@keyframes time_arrow_ani {
0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);margin-top:-130px;margin-left:-130px;opacity:0; }
10%{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);margin-top:-130px;margin-left:-130px;opacity:1; }
100%{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);margin-top:-130px;margin-left:-130px;opacity:1; }
}
.time_arrow_ani { -webkit-animation-name:time_arrow_ani;animation:time_arrow_ani 5s  0.3s ease-out forwards; }

@-webkit-keyframes in_toright { 
	0% {-webkit-transform:rotate(0) translate(-0%,-50%);transform:rotate(0) translate(-0%,-50%);left:-50%;opacity:1;}
	45% {-webkit-transform:rotate(0) translate(-0%,-50%);transform:rotate(0) translate(-0%,-50%);left:50%;opacity:1;}
	55% {-webkit-transform:rotate(0) translate(-0%,-50%);transform:rotate(0) translate(-0%,-50%);left:50%;opacity:1;}
	65% {-webkit-transform-origin:bottom 200px;transform-origin:bottom 200px;-webkit-transform:rotate(20deg) translate(-50%,-50%);transform:rotate(20deg) translate(-50%,-50%);opacity:1;}
	70% {-webkit-transform-origin:bottom 200px;transform-origin:bottom 200px;-webkit-transform:rotate(0) translate(-50%,-50%);transform:rotate(0) translate(-50%,-50%);opacity:1;}
	90% {-webkit-transform-origin:bottom 200px;transform-origin:bottom 200px;-webkit-transform:rotate(0) translate(-50%,-50%);transform:rotate(0) translate(-50%,-50%);opacity:1;}
	100% {-webkit-transform-origin:bottom 200px;transform-origin:bottom 200px;-webkit-transform:rotate(0) translate(-50%,-50%);transform:rotate(0) translate(-50%,-50%);opacity:0;}
}
@keyframes in_toright {
	0%{-webkit-transform:rotate(0)  translate(-0%,-50%);-ms-transform:rotate(0) translate(-0%,-50%);transform:rotate(0) translate(-50%,-50%);left:-50%;opacity:1;}
	45%{-webkit-transform:rotate(0)  translate(-0%,-50%);-ms-transform:rotate(0) translate(-0%,-50%);transform:rotate(0) translate(-50%,-50%);left:50%;opacity:1;}
	55%{-webkit-transform:rotate(0)  translate(-0%,-50%);-ms-transform:rotate(0) translate(-0%,-50%);transform:rotate(0) translate(-50%,-50%);left:50%;opacity:1;}
	65%{-webkit-transform-origin:bottom 200px;-ms-transform-origin:bottom 200px;transform-origin:bottom 200px;-webkit-transform:rotate(20deg) translate(-50%,-50%);-ms-transform:rotate(20deg) translate(-50%,-50%);transform:rotate(20deg) translate(-50%,-50%);opacity:1;}
	70%{-webkit-transform-origin:bottom 200px;-ms-transform-origin:bottom 200px;transform-origin:bottom 200px;-webkit-transform:rotate(0) translate(-50%,-50%);-ms-transform:rotate(0) translate(-50%,-50%);transform:rotate(0) translate(-50%,-50%);opacity:1;}
	90%{-webkit-transform-origin:bottom 200px;-ms-transform-origin:bottom 200px;transform-origin:bottom 200px;-webkit-transform:rotate(0) translate(-50%,-50%);-ms-transform:rotate(0) translate(-50%,-50%);transform:rotate(0) translate(-50%,-50%);opacity:1;}
	100%{-webkit-transform-origin:bottom 200px;-ms-transform-origin:bottom 200px;transform-origin:bottom 200px;-webkit-transform:rotate(0) translate(-50%,-50%);-ms-transform:rotate(0) translate(-50%,-50%);transform:rotate(0) translate(-50%,-50%);opacity:0;}
}
.in_toright { -webkit-animation-name:in_toright;animation:in_toright 2.7s 1.5s linear forwards; }

@-webkit-keyframes out_toright { 
0% {-webkit-transform:rotate(0) translate(-0%,-50%);transform:rotate(0) translate(-0%,-50%);left:50%;opacity:1;}
20% {-webkit-transform-origin:bottom 200px;transform-origin:bottom 200px;-webkit-transform:rotate(20deg) translate(-50%,-50%);transform:rotate(20deg) translate(-50%,-50%);opacity:1;}
30% {-webkit-transform-origin:bottom 200px;transform-origin:bottom 200px;-webkit-transform:rotate(0) translate(-50%,-50%);transform:rotate(0) translate(-50%,-50%);opacity:1;}
40% {-webkit-transform:rotate(0) translate(-0%,-50%);transform:rotate(0) translate(-0%,-50%);left:50%;opacity:1;}
100% {-webkit-transform:rotate(0) translate(-0%,-50%);transform:rotate(0) translate(-0%,-50%);left:150%;opacity:1;}
}
@keyframes out_toright {
0%{-webkit-transform:rotate(0)  translate(-0%,-50%);-ms-transform:rotate(0) translate(-0%,-50%);transform:rotate(0) translate(-50%,-50%);left:50%;opacity:1;}
20%{-webkit-transform-origin:bottom 200px;-ms-transform-origin:bottom 200px;transform-origin:bottom 200px;-webkit-transform:rotate(20deg) translate(-50%,-50%);-ms-transform:rotate(20deg) translate(-50%,-50%);transform:rotate(20deg) translate(-50%,-50%);opacity:1;}
30%{-webkit-transform-origin:bottom 200px;-ms-transform-origin:bottom 200px;transform-origin:bottom 200px;-webkit-transform:rotate(0) translate(-50%,-50%);-ms-transform:rotate(0) translate(-50%,-50%);transform:rotate(0) translate(-50%,-50%);opacity:1;}
40%{-webkit-transform:rotate(0)  translate(-0%,-50%);-ms-transform:rotate(0) translate(-0%,-50%);transform:rotate(0) translate(-50%,-50%);left:50%;opacity:1;}
100%{-webkit-transform:rotate(0)  translate(-0%,-50%);-ms-transform:rotate(0) translate(-0%,-50%);transform:rotate(0) translate(-50%,-50%);left:150%;opacity:1;}
}
.out_toright { -webkit-animation-name:out_toright;animation:out_toright 1.8s  linear forwards; }
@-webkit-keyframes in_tobottom { 
0% { opacity:0;margin-top:-10px; }
100% { opacity:1;margin-top:0px; }
}
@keyframes in_tobottom {
0% { opacity:0;margin-top:-10px; }
100% { opacity:1;margin-top:0px; }
}
.in_tobottom { -webkit-animation-name:in_tobottom;animation:in_tobottom 0.4s  linear forwards; }

@-webkit-keyframes in_tobottom2 { 
0% { opacity:0;margin-top:-10px; }
100% { opacity:1;margin-top:2px; }
}
@keyframes in_tobottom2 {
0% { opacity:0;margin-top:-10px; }
100% { opacity:1;margin-top:2px; }
}
.in_tobottom2 { -webkit-animation-name:in_tobottom2;animation:in_tobottom2 0.4s  linear forwards; }

@-webkit-keyframes smile {
0% {-webkit-transform:scale(1.15) rotate(1deg);transform:scale(1.15) rotate(1deg);opacity:0;left:25%; }
20% {-webkit-transform:scale(1.15) rotate(1deg);transform:scale(1.15) rotate(1deg);opacity:1;left:25%; }
30%,50%,70% {-webkit-transform:scale(1.15) rotate(2.4deg);transform:scale(1.15) rotate(2.4deg);opacity:1;left:25%;}
40%,60%,80% {-webkit-transform:scale(1.15) rotate(-2.4deg);transform:scale(1.15) rotate(-2.4deg);opacity:1;left:25%;}
100% {-webkit-transform:scale(1) rotate(1deg);transform:scale(1) rotate(1deg);opacity:1;left:25%;}
}
@keyframes smile {
0% {-webkit-transform:scale(1.15) rotate(1deg);-ms-transform:scale(1.15) rotate(1deg);transform:scale(1.15) rotate(1deg);opacity:0;left:25%; }
20% {-webkit-transform:scale(1.15) rotate(1deg);-ms-transform:scale(1.15) rotate(1deg);transform:scale(1.15) rotate(1deg);opacity:1;left:25%; }
30%,50%,70% {-webkit-transform:scale(1.15) rotate(2.4deg);-ms-transform:scale(1.15) rotate(2.4deg);transform:scale(1.15) rotate(2.4deg);opacity:1;left:25%;}
40%,60%,80% {-webkit-transform:scale(1.15) rotate(-2.4deg);-ms-transform:scale(1.15) rotate(-2.4deg);transform:scale(1.15) rotate(-2.4deg);opacity:1;left:25%;}
100% {-webkit-transform:scale(1) rotate(1deg);-ms-transform:scale(1) rotate(1deg);transform:scale(1) rotate(1deg);opacity:1;left:25%;}
}

/* 상단 선반에 완료된 스티커 나타날때 */
@-webkit-keyframes shake_once {
0%{-webkit-transform:scale(1);transform:scale(1);opacity:0;}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg);opacity:1;}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg);opacity:1;}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg);opacity:1;}
100%{-webkit-transform:scale(0.95) rotate(0);transform:scale(0.95) rotate(0);opacity:1;}
}
@keyframes shake_once {
0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:0;}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);-ms-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg);opacity:1;}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);-ms-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg);opacity:1;}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);-ms-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg);opacity:1;}
100%{-webkit-transform:scale(0.95) rotate(0);-ms-transform:scale(0.95) rotate(0);transform:scale(0.95) rotate(0);opacity:1;}
}
@-webkit-keyframes shake_repeat {
0%{-webkit-transform:scale(1);transform:scale(1);opacity:1;}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg);opacity:1;}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg);opacity:1;}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg);opacity:1;}
100%{-webkit-transform:scale(0.95) rotate(0);transform:scale(0.95) rotate(0);opacity:1;}
}
@keyframes shake_repeat {
0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1;}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);-ms-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg);opacity:1;}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);-ms-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg);opacity:1;}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);-ms-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg);opacity:1;}
100%{-webkit-transform:scale(0.95) rotate(0);-ms-transform:scale(0.95) rotate(0);transform:scale(0.95) rotate(0);opacity:1;}
}

/* 아이템 수령- 아이템 나타날때 */
@-webkit-keyframes fadeInUp_item {
0%{opacity:0;top:50px;}
100%{opacity:1;top:0px;}
}
@keyframes fadeInUp_item {
0%{opacity:0;top:50px;}
100%{opacity:1;top:0px;}
}

/* 아이템 수령 - 갯수 숫자 나타날때 */
@-webkit-keyframes fadeIn_itemget {
0%{opacity:0;-webkit-transform:scale(2.5);transform:scale(2.5)}
60%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
80%{opacity:1;-webkit-transform:scale(1.2);transform:scale(1.2)}
100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes fadeIn_itemget {
0%{opacity:0;-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5)}
60%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
80%{opacity:1;-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}
100%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
}
.fadeIn_itemget { -webkit-animation-name:fadeIn_itemget;animation:fadeIn_itemget 0.4s linear 1.3s forwards; } /* 아이템수령 숫자등장 */

@-webkit-keyframes stamp {
0%{opacity:0;-webkit-transform:scale(10);transform:scale(10)}
100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes stamp {
0%{opacity:0;-webkit-transform:scale(10);-ms-transform:scale(10);transform:scale(10)}
100%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
}
.stamp_t { -webkit-animation-name:stamp;animation:stamp 0.3s linear forwards; } /* 출석체크 도장 */

@keyframes rain_1 { 
	0% { opacity:0;top:70px;width:30px;left:10%; }
	80% { opacity:0.6;top:270px;width:30px;left:10%; }
	100% { opacity:0;top:320px;width:30px;left:10%; }
}
.rain_1 { -webkit-animation-name:rain_1;animation:rain_1 1s linear infinite; }
@keyframes rain_2 { 
	0% { opacity:0;top:70px;width:25px;left:15%; }
	80% { opacity:0.6;top:250px;width:25px;left:15%; }
	100% { opacity:0;top:300px;width:25px;left:15%; }
}
.rain_2 { -webkit-animation-name:rain_2;animation:rain_2 1.3s 0.5s linear infinite; }
@keyframes rain_3 { 
	0% { opacity:0;top:30px;width:25px;left:18%; }
	60% { opacity:0.6;top:160px;width:25px;left:18%; }
	100% { opacity:0;top:240px;width:25px;left:18%; }
}
.rain_3 { -webkit-animation-name:rain_3;animation:rain_3 1.1s 1.2s linear infinite; }
@keyframes rain_4 { 
	0% { opacity:0;top:40px;width:25px;left:21%; }
	60% { opacity:0.6;top:160px;width:25px;left:21%; }
	100% { opacity:0;top:240px;width:25px;left:21%; }
}
.rain_4 { -webkit-animation-name:rain_4;animation:rain_4 1.5s 1.4s linear infinite; }
@keyframes rain_5 { 
	0% { opacity:0;top:40px;width:22px;left:23%; }
	60% { opacity:0.6;top:180px;width:22px;left:23%; }
	100% { opacity:0;top:260px;width:22px;left:23%; }
}
.rain_5 { -webkit-animation-name:rain_5;animation:rain_5 1.2s 1s linear infinite; }
@keyframes rain_6 { 
	0% { opacity:0;top:40px;width:24px;left:28%; }
	60% { opacity:0.6;top:180px;width:24px;left:28%; }
	100% { opacity:0;top:260px;width:24px;left:28%; }
}
.rain_6 { -webkit-animation-name:rain_6;animation:rain_6 1.6s 1.6s linear infinite; }
@keyframes rain_7 { 
	0% { opacity:0;top:40px;width:24px;left:32%; }
	60% { opacity:0.6;top:220px;width:24px;left:32%; }
	100% { opacity:0;top:300px;width:24px;left:32%; }
}
.rain_7 { -webkit-animation-name:rain_7;animation:rain_7 1.8s 1.2s linear infinite; }
@keyframes rain_8 { 
	0% { opacity:0;top:70px;width:30px;right:10%; }
	80% { opacity:0.6;top:270px;width:30px;right:10%; }
	100% { opacity:0;top:320px;width:30px;right:10%; }
}
.rain_8 { -webkit-animation-name:rain_8;animation:rain_8 0.5s linear infinite; }
@keyframes rain_9 { 
	0% { opacity:0;top:70px;width:25px;right:15%; }
	80% { opacity:0.6;top:250px;width:25px;right:15%; }
	100% { opacity:0;top:300px;width:25px;right:15%; }
}
.rain_9 { -webkit-animation-name:rain_9;animation:rain_9 1.1s 0.5s linear infinite; }
@keyframes rain_10 { 
	0% { opacity:0;top:30px;width:25px;right:18%; }
	60% { opacity:0.6;top:160px;width:25px;right:18%; }
	100% { opacity:0;top:240px;width:25px;right:18%; }
}
.rain_10 { -webkit-animation-name:rain_10;animation:rain_10 1.0s 1.2s linear infinite; }
@keyframes rain_11 { 
	0% { opacity:0;top:40px;width:25px;right:21%; }
	60% { opacity:0.6;top:160px;width:25px;right:21%; }
	100% { opacity:0;top:240px;width:25px;right:21%; }
}
.rain_11 { -webkit-animation-name:rain_11;animation:rain_11 1.2s 1.4s linear infinite; }
@keyframes rain_12 { 
	0% { opacity:0;top:40px;width:22px;right:23%; }
	60% { opacity:0.6;top:180px;width:22px;right:23%; }
	100% { opacity:0;top:260px;width:22px;right:23%; }
}
.rain_12 { -webkit-animation-name:rain_12;animation:rain_12 1.5s 1s linear infinite; }
@keyframes rain_13 { 
	0% { opacity:0;top:40px;width:24px;right:28%; }
	60% { opacity:0.6;top:180px;width:24px;right:28%; }
	100% { opacity:0;top:260px;width:24px;right:28%; }
}
.rain_13 { -webkit-animation-name:rain_13;animation:rain_13 1.3s 1.6s linear infinite; }
@keyframes rain_14 { 
	0% { opacity:0;top:40px;width:24px;right:32%; }
	60% { opacity:0.6;top:220px;width:24px;right:32%; }
	100% { opacity:0;top:300px;width:24px;right:32%; }
}
.rain_14 { -webkit-animation-name:rain_14;animation:rain_14 1.6s 1.2s linear infinite; }

@keyframes txt_1_1 { /* 요즘 */
	0% { opacity:0;margin-left:-230px; }
	100% { opacity:1;margin-left:-220px; }
}
@keyframes txt_1_2 {  /* 누가 */
	0% { opacity:0;width:150px;top:-10px; }
	100% { opacity:1;width:90px;top:0; }
}
@keyframes txt_1_3 {  /* 커피 돈 내고 마셔 */
	0% { opacity:0;margin-left:80px; }
	100% { opacity:1;margin-left:70px; }
}
@keyframes txt_1_4 {  /* ? */
	0% { opacity:0;width:100px;top:-10px; }
	100% { opacity:1;width:40px;top:0; }
}
@keyframes txt_1_1n { /* 요즘 */
	0% { opacity:0;margin-left:-40%; }
	100% { opacity:1;margin-left:-35%; }
}
@keyframes txt_1_2n {  /* 누가 */
	0% { opacity:0;width:18%;top:-10px; }
	100% { opacity:1;width:14%;top:0; }
}
@keyframes txt_1_3n {  /* 커피 돈 내고 마셔 */
	0% { opacity:0;margin-left:20%; }
	100% { opacity:1;margin-left:13%; }
}
@keyframes txt_1_4n {  /* ? */
	0% { opacity:0;width:11%;top:-10px; }
	100% { opacity:1;width:7%;top:0px; }
}
@keyframes txt_2_1 {  /* 접속만 하면 */
	0% { opacity:0;width:400px;top:-10px; }
	100% { opacity:1;width:340px;top:0; }
}
@keyframes txt_2_2 {  /* 향긋한 커피가 공짜 */
	0% { opacity:0;width:480px;top:70px; }
	100% { opacity:1;width:420px;top:80px; }
}
@keyframes txt_2_3 {  /* ! */
	0% { opacity:0;width:115px;top:7px; }
	100% { opacity:1;width:55px;top:17px; }
}
@keyframes txt_2_1n {  /* 접속만 하면 */
	0% { opacity:0;width:75%;top:-10px; }
	100% { opacity:1;width:65%;top:0; }
}
@keyframes txt_2_2n {  /* 향긋한 커피가 공짜 */
	0% { opacity:0;width:85%;top:50px; }
	100% { opacity:1;width:75%;top:63px; }
}
@keyframes txt_2_2n2 {  /* 향긋한 커피가 공짜 */
	0% { opacity:0;width:85%;top:48px; }
	100% { opacity:1;width:75%;top:55px; }
}
@keyframes txt_2_3n {  /* ! */
	0% { opacity:0;width:15%;top:7px; }
	100% { opacity:1;width:10%;top:17px; }
}
@keyframes txt_2_3n3 {  /* ! */
	0% { opacity:0;width:15%;top:5px; }
	100% { opacity:1;width:10%;top:12px; }
}
@keyframes txt_3_1 {  /* 동그라미 */
	0% { opacity:0;width:310px; }
	100% { opacity:1;width:250px; }
}
@keyframes txt_3_2 {
	0% { opacity:0; }
	100% { opacity:1; }
}
@keyframes txt_3_1n {  /* 동그라미 */
	0% { opacity:0;width:250px; }
	100% { opacity:1;width:200px; }
}
@keyframes app_1 {
	0% { opacity:0;margin-top:-20px; }
	100% { opacity:1;margin-top:0px;}
}