@charset "utf-8";
@import url( "http://fonts.googleapis.com/earlyaccess/notosanskr.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 KR', 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 KR', Dotum}
select, input, img, li {vertical-align:middle; text-align:left; font-size:12px; font-family:'Noto Sans KR', 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 KR', Dotum}

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

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

.blind {display:none}

#powerball {position:relative; width:840px; height:895px; 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 #4576c3; 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:#26416b; border:none; border-radius:10px; resize:none}
	.popup > h2 {font-weight:400; font-size:13px; color:#26416b}

	.share {position:absolute; right:88px; top:58px; width:55px; height:55px; 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:30px; top:58px; width:55px; height:55px; background:url('./img/sound_on.png') no-repeat; cursor:pointer; z-index:999}
	.sound.off {background:url('./img/sound_off.png') no-repeat}

.game_area {position:absolute; left:267px; top:343px; width:309px; height:309px; background:url('./img/glass_bg.png') no-repeat}
	.game_area .game_zone {position:relative; width:279px; height:279px; padding:15px}
	.game_area .game_zone h1 {position:absolute; width:48px; height:48px}
	.game_area .game_zone h1.ball1 {left:77px; top:195px; background:url('./img/ball1.png') no-repeat; z-index:14}
	.game_area .game_zone h1.ball2 {left:28px; top:186px; background:url('./img/ball2.png') no-repeat; z-index:13}
	.game_area .game_zone h1.ball3 {left:228px; top:194px; background:url('./img/ball3.png') no-repeat; z-index:12}
	.game_area .game_zone h1.ball4 {left:174px; top:192px; background:url('./img/ball4.png') no-repeat; z-index:11}
	.game_area .game_zone h1.ball5 {left:138px; top:203px; background:url('./img/ball5.png') no-repeat; z-index:10}
	.game_area .game_zone h1.ball6 {left:109px; top:220px; background:url('./img/ball6.png') no-repeat; z-index:9}
	.game_area .game_zone h1.ball7 {left:151px; top:247px; background:url('./img/ball7.png') no-repeat; z-index:8}
	.game_area .game_zone h1.ball8 {left:102px; top:245px; background:url('./img/ball8.png') no-repeat; z-index:7}
	.game_area .game_zone h1.ball9 {left:185px; top:235px; background:url('./img/ball9.png') no-repeat; z-index:6}
	.game_area .game_zone h1.ball10 {left:127px; top:231px; background:url('./img/ball10.png') no-repeat; z-index:5}
	.game_area .game_zone h1.ball11 {left:57px; top:223px; background:url('./img/ball11.png') no-repeat; z-index:4}
	.game_area .game_zone h1.ball12 {left:211px; top:217px; background:url('./img/ball12.png') no-repeat; z-index:3}
	.game_area .game_zone h1.ball13 {left:165px; top:220px; background:url('./img/ball13.png') no-repeat; z-index:2}
	.game_area .game_zone h1.ball14 {left:87px; top:218px; background:url('./img/ball14.png') no-repeat; z-index:1}
	.game_area .game_zone.canvas_r h1 {background:url('./img/powerball.png') no-repeat}

	.glass {position:absolute; left:267px; top:343px; width:309px; height:309px; background:url('./img/glass.png') no-repeat; z-index:20}

.info {position:absolute; left:253px; top:257px; width:335px; height:65px; text-align:center; background:url('./img/info_bg.png') no-repeat}
.info > h1 {margin-bottom:6px; padding-top:15px; font-weight:400; font-size:16px; color:#FFF}
.info > h1 > span {font-weight:400; color:#fff606}
.info > h2 {width:296px; height:5px; margin:0 auto; background:#123a75; border-radius:3px}
.info > h2 > var {display:block; height:5px; background:#FFF; border-radius:3px}

.info2 {position:absolute; left:275px; top:676px; width:294px; height:56px; text-align:center}
.info2 > h1 {height:42px; line-height:42px; margin-bottom:5px; font-weight:400; font-size:21px; color:#2e4262}
.info2 > h2 {height:8px; background:#426191; border-radius:4px}

.last {display:none; position:absolute; left:275px; top:676px; width:300px; height:44px; text-align:center; overflow:hidden}
.last > li {float:left; width:44px; height:44px; line-height:44px; margin-left:6px; text-align:center; font-weight:400; font-size:20px; color:#2e4262; background:#f9fbff; border-radius:22px}
.last > li:first-child {margin-left:0}
.last > li.power {color:#FFF; background:#ff4444}

.result {position:absolute; left:31px; top:241px; width:191px; height:506px; padding:7px; text-align:center}
.result > h1 {width:191px; height:37px; line-height:37px; margin-bottom:10px; font-weight:400; font-size:16px; color:#2366a0; background:#FFF; border-radius:6px}
.result > ul {height:15px; margin-bottom:10px; overflow:hidden}
.result > ul > li {float:left; width:50%; height:15px; line-height:15px; text-align:center; font-weight:400; font-size:12px; color:#8ebbff}
.result > ul > li:first-child {width:calc(50% - 1px); border-right:1px solid #8ebbff}
.result > div {width:191px; height:425px; overflow-y:scroll}
.result > div > ul {height:2000px}
.result > div > ul > li {height:67px; margin-top:3px; background:#4c607e; border:2px solid #142238; border-radius:7px}
.result > div > ul > li:first-child {margin-top:0}
.result > div > ul > li > h1 {margin-bottom:5px; padding-top:5px; text-align:center; font-weight:400; font-size:12px; color:#bcd7ff}
.result > div > ul > li > h1 > span {font-weight:400; color:#ffe21c}
.result > div > ul > li > dl {margin:0 8px; overflow:hidden}
.result > div > ul > li > dl > dt {float:left; width:31px; height:31px; line-height:31px; margin-left:3px; text-align:center; font-weight:400; font-size:11px; color:#FFF; background:#ff4444; border-radius:16px}
.result > div > ul > li > dl > dd {float:left; width:31px; height:31px; line-height:31px; margin-left:3px; text-align:center; font-weight:400; font-size:11px; color:#FFF; background:#447dff; border-radius:16px}
.result > div > ul > li > dl > var {float:left; width:1px; height:15px; margin:8px 10px 0; background:#142238}
.result > div > ul > li > dl > .margin {margin-right:5px}

.history {position:absolute; left:604px; top:241px; width:191px; height:506px; padding:7px; text-align:center}
.history > h1 {width:191px; height:37px; line-height:37px; margin-bottom:10px; font-weight:400; font-size:16px; color:#2366a0; background:#FFF; border-radius:6px}
.history > div {width:191px; height:451px; overflow-y:scroll}
.history > div > ul {height:2000px}
.history > div > ul > li {height:65px; margin-top:3px; background:#4c607e; border:2px solid #142238; border-radius:7px}
.history > div > ul > li:first-child {margin-top:0}
.history > div > ul > li > h1 {margin-bottom:5px; padding-top:5px; text-align:center; font-weight:400; font-size:12px; color:#bcd7ff}
.history > div > ul > li > h1 > span {font-weight:400; color:#ffe21c}
.history > div > ul > li > dl {margin:0 8px; overflow:hidden}
.history > div > ul > li > dl > dd {float:left; width:26px; height:26px; line-height:26px; margin-left:3px; text-align:center; font-weight:400; font-size:11px; color:#2e4262; background:#f9fbff; border-radius:13px}
.history > div > ul > li > dl > dd:first-child {margin-left:0}
.history > div > ul > li > dl > dd:last-child {color:#FFF; background:#ff4444}

.box {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.box::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

.footer {position:absolute; left:21px; bottom:11px; width:804px; height:99px; text-align:center; background:rgba(6, 20, 43, 0.8)}
.footer > h1 {margin-bottom:9px; padding-top:20px; font-weight:400; font-size:12px; color:#a9c2e7}
.footer > h2 {font-weight:400; font-size:11px; color:#FFF; text-shadow:1px 1px 1px black}