@charset "utf-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0; padding:0; box-sizing:border-box;
}
img {display:block; width:100%; }
#wrapper { width:100%; margin:0 auto; }
.container { position:relative; width:100%; }
.roulette {position:relative; width:100%; height:0; padding-bottom:169%; overflow:hidden; background-size: 100%;background-repeat: no-repeat;}
.roulette .arrow {position:absolute; width: 8%; top: 28.5%; left:0;right:0; margin:auto; z-index:9; }
.roulette .board_bg {position:absolute; width: 80%; top: 30%; left:0;right:0; margin:auto;z-index:7; }
.roulette .board {position:absolute; width: 77.5%; top: 30.5%; left:0;right:0;padding: 0; margin:0 auto;z-index:8; }
.roulette .start {position:absolute; width: 23%; top: 46.6%; left:0;right:0; margin:auto;z-index:9; }
.roulette .start button { display:block;width:100%; padding:0; background-color:transparent; border:none; cursor:pointer;outline: none;}

body.pop_on { height:100%; overflow:hidden; }
.pop_bg {display:none; position:fixed; width:100%; height:100%; background-color:rgba(0,0,0,0.3); top:0;left:0; z-index:98; }
.pop_bg.on {display:block; }
.pop_gift { display:none; position:absolute; width:83.333%; height:0; padding-bottom:84.6693%; margin:auto; top:20.66%; left:0; right:0; z-index:99;}
.pop_gift.coupon-icon{background: #fff url(../../../../assets/event/roulette/images/coupon-bg.png) no-repeat center top;background-size: 100%;}
.pop_gift.point-icon{background: #fff url(../../../../assets/event/roulette/images/point-bg.png) no-repeat center top;background-size: 100%;}
.pop_gift.on { display:block; }
.pop_gift .gift {position:absolute; width:61.333%; top:15.3%; left:0; right:0; margin:auto;z-index:99;}
.pop_gift .star_left {position:absolute; width:30.416%; top:15.8%; left:2%; margin:auto; z-index:98;}
.pop_gift .star_right {position:absolute; width:32.361%; top:9.333%;right:2%; z-index:98;}

.pop_already { display:none; position:absolute; width:83.333%; height:0; padding-bottom:46.804%; margin:auto; top:31.666%; left:0;right:0; z-index:99; background:#fff url(../../../../assets/event/roulette/images/alreadypopbg.png) no-repeat center top; background-size:cover; border-radius:0px; }
.pop.on { display:block; }
.pop .btn_wrap { position:absolute;width:100%; bottom:6.575%; text-align:center; line-height:0; }
.pop.pop_already .btn_wrap { bottom:14.836%; }
.pop .btn_wrap a, .pop .btn_wrap button { display: inline-block;width: 42.333%;line-height: 12vw;padding: 0;font-size: 3.5vw;background-color: transparent;border: none;cursor: pointer;background: #ddd;}
.pop .btn_wrap a, .pop .btn_wrap button.mycoupon{background: #e84e0f;color: #fff;}
.roulette .border_bottom {position:absolute; width:30.6%; top:63.6%; left:0;right:0; margin:auto;z-index:6; }
.pop_gift .gift-txt{position: relative;display:none;width: 100%;height: auto;text-align: center;font-weight: 700;color: #0078a9;}
.pop_gift.coupon-icon .gift-txt{display: inline-block;padding-top: 51%;font-size: 4.4vw;}
.pop_gift.point-icon .gift-txt{display: inline-block;padding-top: 53%;font-size: 5vw;}
