@charset "UTF-8";

.page_34 {background-color:#fff;}
.page_34 .p_expiry {color:#B7B7B7;font-size:0.750rem}/* 170711 수정 */
.page_34 .div_container {display:flex;}
.div_roulette {background-color:#fff;}
.back_roulette {border:0;font-size:1rem;color:#2E2F37}
.div_container_upper {width:100%;height:auto;overflow:hidden;}
.div_roulette_wrap {width:80%;margin:5% auto;}
/*.upper_height {height:70%;}*/
.p_roulette_text, .p_complete_text {height:70px;line-height:1.3;color:#2E2F37;font-size:1rem;letter-spacing:-1px;}
.p_complete_text {text-align:center;}
.content_roulette_spin {width:70%;margin:auto;margin-top:10%;position:relative;}
/*.refresh_button {float:right;margin-top:-10%;margin-right:3%;}*/ /* 170711 수정 */

/* 코끼리 */
.spin_elp_img {
  width:35%;
  margin:auto;
  position:relative;
  z-index:15;
}
.stamp_balloon { /* 말풍선 */
  width:30%;
  position:absolute;
  top:4%;right:3%;
}
/* 룰렛 */
img.img_stamp_here {width:50%;}
img.spin_elp_roulette_shadow {width:50%;margin-top:-10%;}
img.spin_elp_roulette {width:100%; margin:0 auto; margin-top:-10%; position: relative; z-index: 2;}
/* 170712 수정 */
img.spin_elp_roulette.on {
  -webkit-animation:rotate 1s linear infinite;
  -moz-animation:rotate 1s linear infinite;
  -ms-animation:rotate 1s linear infinite;
  -o-animation:rotate 1s linear infinite;
  animation:rotate 1s linear infinite;
}
@-webkit-keyframes rotate {
	from{-webkit-transform:rotate(0deg)}
	to{-webkit-transform:rotate(-720deg)}
}
@-moz-keyframes rotate {
	from{-moz-transform:rotate(0deg)}
	to{-moz-transform:rotate(-720deg)}
}
@-ms-keyframes rotate {
	from{-ms-transform:rotate(0deg)}
	to{-ms-transform:rotate(-720deg)}
}
@-o-keyframes rotate {
	from{-o-transform:rotate(0deg)}
	to{-o-transform:rotate(-720deg)}
}
@keyframes rotate {
	from{transform:rotate(0deg)}
	to{transform:rotate(-720deg)}
}

/* 룰렛이멈췄을경우 키프레임 */
@-webkit-keyframes stopRotate {
	from{-webkit-transform:rotate(0deg)}
	to{-webkit-transform:rotate(-655deg)}
}
@-moz-keyframes stopRotate {
	from{-moz-transform:rotate(0deg)}
	to{-moz-transform:rotate(-655deg)}
}
@-ms-keyframes stopRotate {
	from{-ms-transform:rotate(0deg)}
	to{-ms-transform:rotate(-655deg)}
}
@-o-keyframes stopRotate {
	from{-o-transform:rotate(0deg)}
	to{-o-transform:rotate(-655deg)}
}
@keyframes stopRotate {
	from{transform:rotate(0deg)}
	to{transform:rotate(-655deg)}
}



.complete_paper { /* 종이가루(?) */
  width:100%;
  z-index:30;
  position:absolute;
  top:-45%;right:0;bottom:0;left:0;
  display: none;
}
.div_roulette_coupon {
  display:none;
  width:100%;
  /*height:35%;*/ /* 170713 수정 */
  background-color:#CFD0D8;
  z-index:20;
}
.coupon_btn {
  display:block;
  height:40px;
  line-height:40px;
  letter-spacing:1px;
  color:#9A9DAB;
  font-size:0.875rem;
  text-align:center;
  -webkit-tap-highlight-color: transparent;
}
.icon_slide.on {
  background-position-x:-19px;
}
.div_coupon_inner_bg {
  width:100%;
  height:100%; /* 170713 수정 */
  margin:auto;
  box-sizing:border-box;
}
.div_coupon_content {
  width:93%;
  margin:auto;
  padding:3%;
  box-sizing:border-box;
  background-color:#fff;
  margin-bottom:10px;
}
.img_area {
  display:inline-block;
  width:28%;
  box-sizing:border-box;
}
.img_area > img {
  width:100%;
  padding:5%;
  vertical-align:middle;
  box-sizing:border-box;
}
.div_content_desc {
  display:inline-block;
  width:70%;
  vertical-align:middle;
  text-align:left;
  line-height:1.25;
  font-size:0.875rem;
}
.p_coupon_name {
  margin-bottom: 3%; /* 170712 수정 */
  font-size:1rem;
  color:#414141;
}
.div_coupon_term, .p_date {
  font-size:0.750rem; /* 170711수정 */
  color:#B7B7B7;
}
.div_coupon_term {
  display:inline-block;
  width:25%;
}
.p_date {
  display:inline-block;
  width:70%;
}

/*.refresh_button{display: none;}*/
#p_roulette_text {display: block;word-break: break-word;}
#p_complete_text_stop {display: none;font-size:1.15rem;word-break: break-word;} /* 170711 수정*/

/*body.roulette_stop .refresh_button {display: inline-block;}*/
body.roulette_stop .complete_paper {display: block;}
body.roulette_stop .div_roulette_coupon {display: block;}
body.roulette_stop #p_complete_text_stop {display: block;}
body.roulette_stop #p_roulette_text {display: none;}
body.roulette_stop .div_footer {display: none;}
.stamp_balloon.roulette_start {display: none;} /* 170712 수정 */
.spin_elp_roulette.spin_stop {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;

  -webkit-animation:stopRotate 1s linear infinite;
  -moz-animation:stopRotate 1s linear infinite;
  -ms-animation:stopRotate 1s linear infinite;
  -o-animation:stopRotate 1s linear infinite;
  animation:stopRotate 1s linear infinite;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
/*body.roulette_stop .spin_elp_roulette {-webkit-animation: none !important;}*/
