@charset "utf-8";
@import url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);

/* RESET */
::selection {background:#ff5961; color:#FFF}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 
address, big, cite, code, del, dfn, em, font, img, ins, 
q, s, samp, small, strike, strong, sub, sup, tt, var, b, 
u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:none 0; font-family:'Noto Sans Korean', Dotum; font-weight:300}
h1, h2, h3, h4, h5, h6 {font-size:12px}
img, fieldset, iframe {border:0 none}
table, div {border-collapse: collapse; font-size:12px}
textarea {overflow:auto; outline-style:none; font-family:'Noto Sans Korean', Dotum}
select, input, img, li {vertical-align:middle; text-align:left; font-size:12px; font-family:'Noto Sans Korean', Dotum, sans-serif; font-weight:300; outline-style:none}
address, caption, cite, code, dfn, em, th, var {font-style:normal; font-weight:normal}
ul, li, ol {list-style-type:none}
legend, caption {display:none}
hr {border-collapse:collapse; display:none}
a { text-decoration:none; cursor:pointer; color:#222}
html, body {width:100%; height:100%; background:#FFF; font-size:12px; color:#222}
.sound_only {display:none}
.clearboth {clear:both}
#go_top {display:none; position:fixed; bottom:50px; left:50%; margin-left:520px; width:50px; height:35px; padding-top:15px; background:#CCC; font-family:Tahoma; font-weight:bold; font-size:14px; color:#000; cursor:pointer; text-align:center; border-radius:50px; opacity:0.8; filter:alpha(opacity=80); z-index:999}
* {font-family:'Noto Sans Korean', Dotum}

/* 화면전환 FADEIN 효과*/
body {animation:fadein .7s ease-out none;-webkit-animation:fadein .7s ease-out none}

@keyframes fadein {
	from {opacity:0; filter:alpha(opacity=0)}
	to {opacity:1; filter:alpha(opacity=100)}
}
@-webkit-keyframes fadein {
	from {opacity:0; filter:alpha(opacity=0)}
	to {opacity:1; filter:alpha(opacity=100)}
}

#roulette {width:840px; height:937px}

.game_top {position:relative; width:840px; height:937px; background:url('./img/game_bg.jpg') no-repeat; overflow:hidden}
	.popup {display:none; position:absolute; right:96px; top:63px; width:489px; height:152px; padding:15px 25px; background:#FFF; border:2px solid #b72120; border-radius:16px; z-index:2}
	.popup.off {display:block}
	.popup > h1 {margin-bottom:10px; font-weight:300; font-size:19px; color:#1d304f}
	.popup > textarea {width:458px; height:47px; margin-bottom:5px; padding:10px 15px; text-align:left; font-size:15px; color:#FFF; background:#b72120; border:none; border-radius:10px; resize:none}
	.popup > h2 {font-weight:400; font-size:13px; color:#26416b}

	.share {position:absolute; right:68px; top:30px; width:78px; height:78px; background:url('./img/share.png') no-repeat; cursor:pointer; z-index:999}
	.share.off {background:url('./img/share_close.png') no-repeat}

	.sound {position:absolute; right:10px; top:30px; width:78px; height:78px; background:url('./img/sound_on.png') no-repeat center; cursor:pointer}
	.sound > img {opacity:0}
	.sound.off {background:none}
	.sound.off > img {opacity:1}

	.roulette {position:absolute; left:33px; top:237px; width:592px; height:593px; *width:520px; *height:520px; background:url('./img/roulette_bg.png') no-repeat}
	.roulette_wrap {position:relative; width:100%; height:100%}
	.wheel {position:absolute; left:58px; top:58px; width:483px; height:483px; *width:396px; *height:396px; background:url('./img/wheel_bg.png') no-repeat}
    /*
	.ball {position:absolute; left:0; top:0; width:520px; height:520px; background:url('./img/ball.png') no-repeat}
	.ball.on {position:absolute; left:0; top:82px}
    */
	.ball {position:absolute; left:0; top:-150px; width:22px; height:22px; background:url('./img/bb.png') no-repeat; background-position:center; margin-left:289px;margin-top:289px; }

	.timeline {position:absolute; left:0; top:830px; width:100%; text-align:center}
	.timeline > h1 {font-weight:500; font-size:40px; color:#FFF}
	.timeline > h2 {margin-bottom:5px; font-weight:400; font-size:13px; color:#debec0}
	.timeline > h3 {width:160px; height:6px; margin:0 auto 5px; background:#28090c; border-top:1px solid #140406; border-right:1px solid linear-gradient(to top, #602127, #140406); border-bottom:1px solid #602127; border-left:1px solid linear-gradient(to top, #602127, #140406); border-radius:4px; overflow:hidden}
	.timeline > h3 > span {display:block; height:6px; background:linear-gradient(to top, #ef5757, #c52828); border-radius:3px}

	.history {position:absolute; right:20px; top:240px; width:120px; height:551px; padding:70px 39px 0; background:url('./img/history_bg.png') no-repeat}
	.history > div {width:120px; height:505px; overflow-y:scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */}
	.history > div::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/}
	.history > div > ul {height:20000px}
	.history > div > ul > li {display:table; width:100%; border-top:1px solid #393939; border-bottom:1px solid #000}
	.history > div > ul > li:first-child {border-top:none}
	.history > div > ul > li:last-child {border-bottom:none}
	.history > div > ul > li > h1 {display:table-cell; height:45px; padding:10px 10px 10px 0; vertical-align:middle; text-align:center}
	.history > div > ul > li:first-child > h1 {padding-top:0}
	.history > div > ul > li > h1 > p {font-size:12px; color:#9a9a9a}
	.history > div > ul > li > h1 > span {font-size:14px; color:#FFF}
	.history > div > ul > li > h2 {display:table-cell; max-width:45px; height:45px; vertical-align:middle}
	.history > div > ul > li > h2 > span {display:block; width:41px; height:41px; line-height:41px; text-align:center; font-weight:500; font-size:18px; color:#FFF; border:2px solid #FFF; border-radius:23px}
	.history > div > ul > li > h2.black > span {background:#000}
	.history > div > ul > li > h2.red > span {background:#d72828}
	.history > div > ul > li > h2.green > span {background:#4f8f34}