@charset "utf-8";

.reward_con{position:relative; width:100%; max-width:1180px; margin:0 auto;}

.reward_pop{position:absolute; width:100%; height:100%; z-index:40;}
.reward_pop_align{display:table; width:100%; height:100%;}
.reward_pop_align:after{display:block; position:absolute; content:""; width:100%; height:100%; background:#000; top:0; left:0; opacity:0.6;}
.reward_pop_middle{display:table-cell; position:relative; width:100%; height:100%; vertical-align:middle; z-index:10;}
.reward_pop_event{position:relative; width:94%; margin:auto;}
.reward_pop_event .reward_close{position:absolute; width:28px; height:28px; right:0; z-index:1;}
.reward_pop_event.reward_pop_event_mar{width:61.86%;}
.reward_pop_event.reward_pop_event_mar img{float:left;}

.reward_con .leaf{position:absolute; width:100%; height:100%; z-index:19; overflow:hidden;}
.reward_con img{position:relative; width:100%; height:auto;}
.reward_top_img{position:relative; width:100%; overflow:hidden;}
.reward_top_img .reward_txt{position:absolute; width:20.33%; top:2.76%; left:2.2%; z-index:20;}
.reward_top_img .reward_title{position:absolute; width:63.72%; top:16.72%; left:17.96%; z-index:19;}
.reward_top_img .reward_cup{position:absolute; width:23.89%; top:50.86%; left:43.89%; z-index:20;}
.reward_top_img .object01{position:absolute; width:8.3%; top:8.07%; left:13.81%; z-index:18;
	      animation:object01 2.5s ease-out infinite;
-webkit-animation:object01 2.5s ease-out infinite;
   -moz-animation:object01 2.5s ease-out infinite;
     -o-animation:object01 2.5s ease-out infinite;}
@keyframes object01{
0%{transform:translateY(0)}
50%{transform:translateY(10px)}
100%{transform:translateY(0)}
}
@-webkit-keyframes object01{
0%{-webkit-transform:translateY(0)}
50%{-webkit-transform:translateY(10px)}
100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes object01{
0%{-moz-transform:translateY(0)}
50%{-moz-transform:translateY(10px)}
100%{-moz-transform:translateY(0)}
}
@-o-keyframes object01{
0%{-o-transform:translateY(0)}
50%{-o-transform:translateY(10px)}
100%{-o-transform:translateY(0)}
}
.reward_top_img .object02{position:absolute; width:2.71%; top:13.03%; left:27.62%; z-index:18;
	      animation:object02 2s ease-out infinite;
-webkit-animation:object02 2s ease-out infinite;
   -moz-animation:object02 2s ease-out infinite;
     -o-animation:object02 2s ease-out infinite;}
@keyframes object02{
0%{transform:translateY(0)}
50%{transform:translateY(5px)}
100%{transform:translateY(0)}
}
@-webkit-keyframes object02{
0%{-webkit-transform:translateY(0)}
50%{-webkit-transform:translateY(5px)}
100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes object02{
0%{-moz-transform:translateY(0)}
50%{-moz-transform:translateY(5px)}
100%{-moz-transform:translateY(0)}
}
@-o-keyframes object02{
0%{-o-transform:translateY(0)}
50%{-o-transform:translateY(5px)}
100%{-o-transform:translateY(0)}
}
.reward_top_img .object03{position:absolute; width:7.28%; top:39.1%; left:11.61%; z-index:18;
	      animation:object03 8s ease-out infinite;
-webkit-animation:object03 8s ease-out infinite;
   -moz-animation:object03 8s ease-out infinite;
     -o-animation:object03 8s ease-out infinite;}
@keyframes object03{
0%{transform:rotate(0); transform-origin:100% 0;}
50%{transform:rotate(-360deg)}
100%{transform:rotate(-360deg)}
}
@-webkit-keyframes object03{
0%{-webkit-transform:rotate(0); -webkit-transform-origin:100% 0;}
50%{-webkit-transform:rotate(-360deg)}
100%{-webkit-transform:rotate(-360deg)}
}
@-moz-keyframes object03{
0%{-moz-transform:rotate(0); -moz-transform-origin:100% 0;}
50%{-moz-transform:rotate(-360deg)}
100%{-moz-transform:rotate(-360deg)}
}
@-o-keyframes object03{
0%{-o-transform:rotate(0); -o-transform-origin:100% 0;}
50%{-o-transform:rotate(-360deg)}
100%{-o-transform:rotate(-360deg)}
}
.reward_top_img .object04{position:absolute; width:7.28%; top:61.24%; right:17.88%; z-index:18;
	      animation:object04 8s ease-out infinite;
-webkit-animation:object04 8s ease-out infinite;
   -moz-animation:object04 8s ease-out infinite;
     -o-animation:object04 8s ease-out infinite;
		    animation-delay:0.5s;
-webkit-animation-delay:0.5s;
   -moz-animation-delay:0.5s;
     -o-animation-delay:0.5s;}
@keyframes object04{
0%{transform:rotate(0); transform-origin:0 0;}
50%{transform:rotate(360deg)}
100%{transform:rotate(360deg)}
}
@-webkit-keyframes object04{
0%{-webkit-transform:rotate(0); -webkit-transform-origin:0 0;}
50%{-webkit-transform:rotate(360deg)}
100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes object04{
0%{-moz-transform:rotate(0); -moz-transform-origin:0 0;}
50%{-moz-transform:rotate(360deg)}
100%{-moz-transform:rotate(360deg)}
}
@-o-keyframes object04{
0%{-o-transform:rotate(0); -o-transform-origin:0 0;}
50%{-o-transform:rotate(360deg)}
100%{-o-transform:rotate(360deg)}
}

.reward_map_img{position:relative; width:100%; margin-bottom:30px;}
.reward_map_img .object05{position:absolute; width:7.28%; top:48.89%; left:12.37%; z-index:20;
	      animation:object05 8s ease-out infinite;
-webkit-animation:object05 8s ease-out infinite;
   -moz-animation:object05 8s ease-out infinite;
     -o-animation:object05 8s ease-out infinite;}
@keyframes object05{
0%{transform:rotate(0); transform-origin:0 100%;}
50%{transform:rotate(-360deg)}
100%{transform:rotate(-360deg)}
}
@-webkit-keyframes object05{
0%{-webkit-transform:rotate(0); -webkit-transform-origin:0 100%;}
50%{-webkit-transform:rotate(-360deg)}
100%{-webkit-transform:rotate(-360deg)}
}
@-moz-keyframes object05{
0%{-moz-transform:rotate(0); -moz-transform-origin:0 100%;}
50%{-moz-transform:rotate(-360deg)}
100%{-moz-transform:rotate(-360deg)}
}
@-o-keyframes object05{
0%{-o-transform:rotate(0); -o-transform-origin:0 100%;}
50%{-o-transform:rotate(-360deg)}
100%{-o-transform:rotate(-360deg)}
}

.reward_map_img .month_over{position:absolute; width:12.54%; z-index:30;}
.reward_map_img .month_over a{display:block; position:relative; z-index:10;}
.reward_map_img .this_month:before{display:block; position:absolute; content:""; width:43%; height:38.06%; background:url(../images/reward/reward_click.png) no-repeat; background-size:cover; top:85.16%; left:-40.93%; z-index:10;
	      animation:click 2.8s ease-out infinite;
-webkit-animation:click 2.8s ease-out infinite;
   -moz-animation:click 2.8s ease-out infinite;
     -o-animation:click 2.8s ease-out infinite;}
@keyframes click{
0%{opacity:1;}
6%{opacity:0;}
12%{opacity:1;}
18%{opacity:0;}
24%{opacity:1;}
100%{opacity:1;}
}
@-webkit-keyframes click{
0%{opacity:1;}
6%{opacity:0;}
12%{opacity:1;}
18%{opacity:0;}
24%{opacity:1;}
100%{opacity:1;}
}
@-moz-keyframes click{
0%{opacity:1;}
6%{opacity:0;}
12%{opacity:1;}
18%{opacity:0;}
24%{opacity:1;}
100%{opacity:1;}
}
@-o-keyframes click{
0%{opacity:1;}
6%{opacity:0;}
12%{opacity:1;}
18%{opacity:0;}
24%{opacity:1;}
100%{opacity:1;}
}
.reward_map_img .this_month:after{display:block; position:absolute; content:""; width:97.4%; height:93.54%; background:url(../images/reward/over_light.png) no-repeat; background-size:cover; top:13.54%; left:-2.07%;}
.reward_map_img .this_month:hover:after{
		    animation:overLight 0.5s ease-in-out;
-webkit-animation:overLight 0.5s ease-in-out;
   -moz-animation:overLight 0.5s ease-in-out;
     -o-animation:overLight 0.5s ease-in-out;}
@keyframes overLight{
0%{opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes overLight{
0%{opacity:0;}
100%{opacity:1;}
}
@-moz-keyframes overLight{
0%{opacity:0;}
100%{opacity:1;}
}
@-o-keyframes overLight{
0%{opacity:0;}
100%{opacity:1;}
}
.reward_map_img .last_month a:after{display:block; position:absolute; content:""; width:93.91%; height:65.89%; background:url(../images/reward/event_complete.png) no-repeat; background-size:cover; top:14.72%; right:0; z-index:11;}
.reward_map_img .jan_over{top:0%; left:31.77%;}
.reward_map_img .feb_over{top:0.84%; left:61.44%;}
.reward_map_img .mar_over{top:12.62%; left:74.83%;}
.reward_map_img .apr_over{top:27.31%; left:41.69%;}
.reward_map_img .may_over{top:17.08%; left:19.74%;}
.reward_map_img .jun_over{top:36.34%; left:6.01%;}
.reward_map_img .jul_over{top:36.34%; left:29.23%;}
.reward_map_img .aug_over{top:36.95%; left:62.71%;}
.reward_map_img .sep_over{top:46.91%; left:74.91%;}
.reward_map_img .oct_over{top:56%; left:37.79%;}

.reward_map_img .nov_over{width:16.35%; top:61.59%; left:59%;}
.reward_map_img .nov_over span:before{display:block; position:absolute; content:""; width:18.65%; height:29.67%; background:url(../images/reward/over_leaf01.png) no-repeat; background-size:cover; top:11.61%; right:-15.54%; z-index:11;
	      animation:leaf01 1.5s ease-out infinite;
-webkit-animation:leaf01 1.5s ease-out infinite;
   -moz-animation:leaf01 1.5s ease-out infinite;
     -o-animation:leaf01 1.5s ease-out infinite;
		 		transform-origin:left bottom;
-webkit-transform-origin:left bottom;
   -moz-transform-origin:left bottom;
     -o-transform-origin:left bottom;}
@keyframes leaf01{
0%{transform:rotate(2deg)}
50%{transform:rotate(-6deg)}
100%{transform:rotate(2deg)}
}
@-webkit-keyframes leaf01{
0%{-webkit-transform:rotate(2deg)}
50%{-webkit-transform:rotate(-6deg)}
100%{-webkit-transform:rotate(2deg)}
}
@-moz-keyframes leaf01{
0%{-moz-transform:rotate(2deg)}
50%{-moz-transform:rotate(-6deg)}
100%{-moz-transform:rotate(2deg)}
}
@-o-keyframes leaf01{
0%{-o-transform:rotate(2deg)}
50%{-o-transform:rotate(-6deg)}
100%{-o-transform:rotate(2deg)}
}
.reward_map_img .nov_over span:after{display:block; position:absolute; content:""; width:21.76%; height:22.58%; background:url(../images/reward/over_leaf02.png) no-repeat; background-size:cover; top:43.87%; right:-18.65%; z-index:11;
	      animation:leaf02 1.5s ease-out infinite;
-webkit-animation:leaf02 1.5s ease-out infinite;
   -moz-animation:leaf02 1.5s ease-out infinite;
     -o-animation:leaf02 1.5s ease-out infinite;
		 		transform-origin:left top;
-webkit-transform-origin:left top;
   -moz-transform-origin:left top;
     -o-transform-origin:left top;}
@keyframes leaf02{
0%{transform:rotate(-2deg)}
50%{transform:rotate(6deg)}
100%{transform:rotate(-2deg)}
}
@-webkit-keyframes leaf02{
0%{-webkit-transform:rotate(-2deg)}
50%{-webkit-transform:rotate(6deg)}
100%{-webkit-transform:rotate(-2deg)}
}
@-moz-keyframes leaf02{
0%{-moz-transform:rotate(-2deg)}
50%{-moz-transform:rotate(6deg)}
100%{-moz-transform:rotate(-2deg)}
}
@-o-keyframes leaf02{
0%{-o-transform:rotate(-2deg)}
50%{-o-transform:rotate(6deg)}
100%{-o-transform:rotate(-2deg)}
}
.reward_map_img .nov_over a:before{display:block; position:absolute; content:""; width:18.13%; height:34.19%; background:url(../images/reward/over_tail.png) no-repeat; background-size:cover; top:-14.19%; left:70.46%;
	      animation:tail 1.2s ease-out infinite;
-webkit-animation:tail 1.2s ease-out infinite;
   -moz-animation:tail 1.2s ease-out infinite;
     -o-animation:tail 1.2s ease-out infinite;
		 		transform-origin:left bottom;
-webkit-transform-origin:right bottom;
   -moz-transform-origin:right bottom;
     -o-transform-origin:right bottom;}
@keyframes tail{
0%{transform:rotate(2deg)}
50%{transform:rotate(-6deg)}
100%{transform:rotate(2deg)}
}
@-webkit-keyframes tail{
0%{-webkit-transform:rotate(2deg)}
50%{-webkit-transform:rotate(-6deg)}
100%{-webkit-transform:rotate(2deg)}
}
@-moz-keyframes tail{
0%{-moz-transform:rotate(2deg)}
50%{-moz-transform:rotate(-6deg)}
100%{-moz-transform:rotate(2deg)}
}
@-o-keyframes tail{
0%{-o-transform:rotate(2deg)}
50%{-o-transform:rotate(-6deg)}
100%{-o-transform:rotate(2deg)}
}
.reward_map_img .nov_over a:after{display:block; position:absolute; content:""; width:12.95%; height:18.7%; background:url(../images/reward/over_head.png) no-repeat; background-size:cover; top:-6.45%; left:52.33%;
	      animation:head 2.0s ease-out infinite;
-webkit-animation:head 2.0s ease-out infinite;
   -moz-animation:head 2.0s ease-out infinite;
     -o-animation:head 2.0s ease-out infinite;
		 		transform-origin:right bottom;
-webkit-transform-origin:right bottom;
   -moz-transform-origin:right bottom;
     -o-transform-origin:right bottom;}
@keyframes head{
0%{transform:rotate(-2deg)}
10%{transform:rotate(6deg)}
20%{transform:rotate(-2deg)}
30%{transform:rotate(6deg)}
40%{transform:rotate(-2deg)}
50%{transform:rotate(6deg)}
60%{transform:rotate(-2deg)}
100%{transform:rotate(-2deg)}
}
@-webkit-keyframes head{
0%{-webkit-transform:rotate(-2deg)}
10%{-webkit-transform:rotate(6deg)}
20%{-webkit-transform:rotate(-2deg)}
30%{-webkit-transform:rotate(6deg)}
40%{-webkit-transform:rotate(-2deg)}
50%{-webkit-transform:rotate(6deg)}
60%{-webkit-transform:rotate(-2deg)}
100%{-webkit-transform:rotate(-2deg)}
}
@-moz-keyframes head{
0%{-moz-transform:rotate(-2deg)}
10%{-moz-transform:rotate(6deg)}
20%{-moz-transform:rotate(-2deg)}
30%{-moz-transform:rotate(6deg)}
40%{-moz-transform:rotate(-2deg)}
50%{-moz-transform:rotate(6deg)}
60%{-moz-transform:rotate(-2deg)}
100%{-moz-transform:rotate(-2deg)}
}
@-o-keyframes head{
0%{-o-transform:rotate(-2deg)}
10%{-o-transform:rotate(6deg)}
20%{-o-transform:rotate(-2deg)}
30%{-o-transform:rotate(6deg)}
40%{-o-transform:rotate(-2deg)}
50%{-o-transform:rotate(6deg)}
60%{-o-transform:rotate(-2deg)}
100%{-o-transform:rotate(-2deg)}
}

/* 640px 이상 해상도 */
@media screen and (min-width:640px){
/*.reward_pop_event .reward_close{position:absolute; width:28px; height:28px; right:-38px;}*/
	
.reward_top_img .reward_txt{width:15.33%;}
}

/* 980px 이상 해상도 */
@media screen and (min-width:980px){
.reward_pop_event{width:84%;}
.reward_pop_event .reward_close{width:50px; height:50px; right:-50px;}
	
.reward_map_img{margin-bottom:60px;}
.reward_top_img .reward_txt{width:11.1%;}
}

/* 1180px 이상 해상도 */
@media screen and (min-width:1180px){
.reward_pop_event{width:79.66%;}

.reward_con{margin:30px auto 0;}
.reward_map_img{margin-bottom:100px;}
}