@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:umfadein .7s ease-out none;-webkit-animation:umfadein .7s ease-out none}

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

.blind {display:none}

#hiiktalk_powerball {position:relative; width:840px; overflow:hidden}
	.title {position:absolute; left:0; top:30px; width:100%; text-align:center}
	
	.logo {position:absolute; right:209px; top:105px; cursor:pointer; transition:.3s}
	.logo:hover {opacity:.75}

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

#result {position:absolute; left:181px; top:148px; width:484px; height:184px; background:url('./img/result_bg.png') no-repeat}
	#result .backboard {position:relative; width:404px; height:51px; padding:62px 0 55px 80px}
	#result .backboard > span {display:block; position:absolute; left:168px; top:18px; width:148px; height:27px; line-height:27px; text-align:center; font-weight:500; font-size:15px; color:#FFF}
	#result .backboard > h1 > ul {height:51px; overflow:hidden}
	#result .backboard > h1 > ul > li {position:relative; float:left; width:51px; height:51px; margin-right:2px; margin-left:500px; text-align:center; font-weight:700; font-size:26px; color:#000; line-height:51px; background:url('./img/ball.png') no-repeat}
	#result .backboard > h1 > ul > li > span {display:block; position:absolute; width:51px; text-align:center; font-weight:700}
	#result .backboard > h1 > ul > li:last-child {margin-right:0; color:#FFF; background:url('./img/powerball.png') no-repeat}
	#result .backboard > var {display:block; width:463px; height:1px; margin:0 auto; background:rgba(48,65,150,0.38)}
	#result .backboard > h2 {padding:10px 0; text-align:center; font-size:22px; color:#a7c5e5}
	#result .result_front {position:absolute; left:0; top:0; width:484px; height:184px; background:url('./img/result_front.png') no-repeat}

#result .backboard > h1 > ul > li.in {animation:ball 3s ease-out forwards}
#result .backboard > h1 > ul > li.in span {animation:text 3s ease-out forwards}

@keyframes ball {
	from {margin-left:500px; transform:rotate(0)}
	to {margin-left:0; transform:rotate(1080deg)}
}

@keyframes text {
	from {left:-10px; top:-10px; transform:rotateX(0) rotateY(0)  rotateZ(0)}
	33% {left:10px; top:-10px; transform:rotateX(720deg) rotateY(720deg)  rotateZ(720deg)}
	66% {left:10px; top:10px; transform:rotateX(960deg) rotateY(960deg)  rotateZ(960deg)}
	to {left:0; top:0; transform:rotateX(1080deg) rotateY(1080deg) rotateZ(1080deg)}
}

.game_area {position:absolute; left:0; top:325px; width:840px; height:626px}
#game_display {position:relative; height:626px}
	#game_display > .box {position:absolute; left:50%; top:0; width:464px; height:569px; margin-left:-232px;}
	#game_display > .box > .game_area {position:relative; width:388px; height:388px; margin:54px 0 0 54px; border-radius:194px}
	#game_display > .box > .game_area > div {position:absolute; width:51px; height:51px; background:url('./img/ball.png') no-repeat}
	#game_display > .box > .game_area.canvas_r > div {background:url('./img/powerball.png') no-repeat}
    #game_display > .box > .game_area .ball_gra_s {margin-top:-317px;}
    #game_display > .box > .game_area .ball_gra_m {margin-top:-317px; z-index:99}
    /*
		#game_display > .box > .game_area > h1.dis1 {left:164px; top:5px}
		#game_display > .box > .game_area > h1.dis2 {left:282px; top:50px}
		#game_display > .box > .game_area > h1.dis3 {left:332px; top:164px}
		#game_display > .box > .game_area > h1.dis4 {left:282px; top:282px}
		#game_display > .box > .game_area > h1.dis5 {left:164px; top:332px}
		#game_display > .box > .game_area > h1.dis6 {left:50px; top:282px}
		#game_display > .box > .game_area > h1.dis7 {left:5px; top:164px}
		#game_display > .box > .game_area > h1.dis8 {left:55px; top:50px}
    */
	#game_display > .box > .glass {position:absolute; left:0; top:0; width:464px; height:569px; background:url('./img/game_glass.png') no-repeat}

	#game_display > .info {position:absolute; left:0; top:115px; width:840px; height:277px; text-align:center; background:rgba(227,0,0,0.85)}
	#game_display > .info > h1 {padding:10px 0 7px}
	#game_display > .info > h1 > img {width:180px}
	#game_display > .info > h2 {height:103px; line-height:103px; font-family:"Arial Black"; font-size:60px; color:#FFF; background:#171717}
	#game_display > .info > h3 {margin-bottom:15px; padding-top:15px; font-weight:400; font-size:18px; color:#FFF}
	#game_display > .info > h4 {font-weight:500; font-size:13px; color:#000}

#footer {width:810px; height:275px; padding:0 15px; background:url('./img/footer_bg.jpg') no-repeat}
	#history {position:relative; height:221px}
		#history > h1 {height:60px; line-height:60px; font-family:"Arial Black"; font-size:20px; color:#FFF; text-shadow:1px 1px 3px black}
		#history > div {width:810px; height:161px; overflow-x:scroll}
		#history > div > ul {width:20000px}
		#history > div > ul > li {float:left; width:194px; height:131px; margin-left:5px; text-align:center; background:#101010; border-radius:7px}
		#history > div > ul > li:first-child {margin-left:0}
		#history > div > ul > li > h1 {height:33px; line-height:33px; font-weight:500; font-size:13px; color:#898989}
		#history > div > ul > li > h1 > span {font-weight:500; color:#FFF}
		#history > div > ul > li > h2 {height:41px; line-height:41px; margin-bottom:10px; background:#202020}
		#history > div > ul > li > h2 > dl {overflow:hidden}
		#history > div > ul > li > h2 > dl > dd {display:inline-block; width:24px; height:24px; line-height:24px; margin-right:3px; text-align:center; font-weight:700; font-size:13px; color:#000; background:#FFF; border-radius:12px}
		#history > div > ul > li > h2 > dl > dd:last-child {margin-right:0; color:#FFF; background:#fa0000}
		#history > div > ul > li > h3 {font-weight:500; font-size:13px; color:#FFF}
		#history > div > ul > li > h3::before {content:"일반볼 "; color:#898989}
		#history > div > ul > li > h3.en::before {content:"Generalballs "; color:#898989}
		#history > div > ul > li > h3.cn::before {content:"普通球 "; color:#898989}
		#history > div > ul > li > h4 {font-weight:500; font-size:13px; color:#FFF}
		#history > div > ul > li > h4::before {content:"파워볼 "; color:#898989}
		#history > div > ul > li > h4.en::before {content:"powerball "; color:#898989}
		#history > div > ul > li > h4.cn::before {content:"红色球 "; color:#898989}

	.copyright {height:54px; line-height:54px; text-align:center; font-weight:500; font-size:13px; color:#ff9c9c}