@charset "utf-8";
@import url( "https://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:400}
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:400; 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)}
}

#hiiktalk_dnt {width:840px; overflow:hidden}
	.game {position:relative; width:840px; height:944px; background:url('./img/game_bg.jpg') no-repeat; overflow:hidden}

	.logo {position:absolute; left:41px; top:33px; cursor:pointer; transition:.3s}
	.logo:hover {opacity:.75}

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

	.title {position:absolute; left:278px; top:41px}
	.title > div {position:relative; width:241px; height:264px}
	.title > div > img {position:absolute; left:-10px; top:0; z-index:2}
	.title > div > h1 {position:absolute; left:-78px; top:0; width:328px; height:275px}
	.title > div > h1 > img {width:100%}
	.title > div > h1.smoke1 {animation:smoke1 30s ease-out infinite}
	.title > div > h1.smoke2 {transform:rotate(180deg); animation:smoke2 25s ease-out infinite}
	.title > div > h1.smoke3 {animation:smoke3 20s ease-out infinite}

	@keyframes smoke1 {
		from {left:-102px; top:-30px; width:376px; height:315px; opacity:1}
		25% {left:-50px; top:15px; width:328px; height:275px; opacity:0.5}
		50% {left:-152px; top:-40px; width:477px; height:400px; opacity:1}
		75% {left:-78px; top:15px; width:328px; height:275px; opacity:0.5}
		to {left:-102px; top:-30px; width:376px; height:315px; opacity:1}
	}
	@keyframes smoke2 {
		from {left:-50px; top:15px; width:328px; height:275px; opacity:0.5}
		50% {left:-102px; top:-30px; width:376px; height:315px; opacity:0.25}
		to {left:-50px; top:15px; width:328px; height:275px; opacity:0.5}
	}
	@keyframes smoke3 {
		from {left:-102px; top:-30px; width:376px; height:315px; opacity:0.25}
		50% {left:-78px; top:15px; width:328px; height:275px; opacity:0.5}
		to {left:-102px; top:-30px; width:376px; height:315px; opacity:0.25}
	}

	.name {position:absolute}
	.name.dragon {left:140px; top:518px; width:110px; height:68px; background:url('./img/name_dragon.png') no-repeat}
	.name.tiger {right:145px; top:526px; width:88px; height:52px; background:url('./img/name_tiger.png') no-repeat}
	.name.tie {left:397px; top:592px; width:50px; height:24px; background:url('./img/name_tie.png') no-repeat}
	.name > img {opacity:0}
	.name.win > img {opacity:1}

	.card {position:absolute; top:234px; width:127px; height:300px; overflow:hidden}
	.card.dragon {left:129px}
	.card.tiger {right:129px}
	.card > h1 {position:relative}
	.card > h1 > span > img {width:127px}
	.card > h1 > em {display:block; position:absolute; left:0; top:0; width:127px; height:187px}
	.card.dragon > h1 > em {background:url('./img/img_card_back.png') no-repeat}
	.card.tiger > h1 > em {background:url('./img/img_card_back.png') no-repeat}

	.display {position:absolute; z-index:3}
	.display.dragon_img {left:17px; top:170px; opacity:0; transition:.3s}
	.display.dragon_img.on {left:57px; top:220px; opacity:1}
	.display.dragon_img.move {animation:dragon 3s ease-out forwards} /* 투닥투닥 시간. 현재 3초 */
	.display.dragon_img.lose {animation:dragon_lose 0.5s ease-out forwards}
	.display.tiger_img {right:48px; top:347px; opacity:0; transition:.3s}
	.display.tiger_img.on {right:88px; top:297px; opacity:1}
	.display.tiger_img.move {animation:tiger 3s ease-out forwards}  /* 투닥투닥 시간. 현재 3초 */
	.display.tiger_img.lose {animation:tiger_lose 0.5s ease-out forwards}

	@keyframes dragon {  /* 용 투닥투닥 모션 */
		from {left:67px; top:220px}
		10% {left:37px; top:230px}
		20% {left:167px; top:210px}
		30% {left:17px; top:210px}
		40% {left:77px; top:230px}
		50% {left:37px; top:230px}
		60% {left:107px; top:220px}
		70% {left:67px; top:210px}
		to {left:-63px; top:220px}
	}

	@keyframes tiger { /* 호랑이 투닥투닥 모션 */
		from {right:98px; top:297px}
		10% {right:58px; top:287px}
		20% {right:118px; top:307px}
		30% {right:43px; top:307px}
		40% {right:198px; top:287px}
		50% {right:68px; top:287px}
		60% {right:138px; top:297px}
		70% {right:98px; top:307px}
		to {right:-38px; top:297px}
	}

	@keyframes dragon_lose { /* 용 패배 fade Out */
		from {left:-63px; top:220px}
		to {left:-163px; top:240px; opacity:0}
	}

	@keyframes tiger_lose { /* 호랑이 패배 fade Out */
		from {right:-38px; top:297px}
		to {right:-122px; top:317px; opacity:0}
	}

	.timeline {position:absolute; left:50%; top:300px; width:320px; margin-left:-160px; text-align:center}
	.timeline > h1 {margin-bottom:10px; font-family:"Jeju Myeongjo"; font-weight:bold; font-size:46px; color:#6f3001}
	.timeline > h2 {margin-bottom:10px; font-weight:500; font-size:14px; color:#503826;text-shadow:-1px -1px 0 #ffffff,1px -1px 0 #ffffff,-1px  1px 0 #ffffff,1px  1px 0 #ffffff;}
	.timeline > h3 {position:relative; width:280px; height:20px; padding:2px; margin:0 auto 15px; background:#4a150d; border:2px solid #c76154; border-radius:6px}
	.timeline > h3 > span {display:block; height:20px; background:#ffa443; border-radius:4px}
	.timeline > h4 {font-weight:500; font-size:14px; color:#503826;text-shadow:-1px -1px 0 #ffffff,1px -1px 0 #ffffff,-1px  1px 0 #ffffff,1px  1px 0 #ffffff;}

	.now_playing {display:none; position:absolute; left:295px; top:308px; width:249px; height:121px; background:url('./img/start_bg.png') no-repeat}

	#tail {position:absolute; left:0; bottom:12px; width:100%; text-align:center; font-weight:500; font-size:14px; color:#cecece; text-shadow:0 0 3px black}

#history {width:838px; height:332px; background:#1c1c1c; border:1px solid #575757; border-top:none; overflow:hidden}
	#history > div {width:838px; height:332px; overflow-x:scroll}
	#history > div > ul {width:38700px; overflow:hidden}
	#history > div > ul > li {float:left; width:128px; border-left:1px solid #575757}
	#history > div > ul > li:first-child {border-left:none}
	#history > div > ul > li > dl > dt {height:34px; text-align:center; font-size:16px; letter-spacing:-1px; line-height:34px; background:#2d2d2d; border-bottom:1px solid #575757}
	#history > div > ul > li > dl > dt:first-child {font-size:18px; color:#FFF; background:#3d0f07}
	#history > div > ul > li > dl > dt:last-child {font-size:14px; color:#dfce9c; letter-spacing:2px; background:#000}
	#history > div > ul > li > dl > dt.red {color:#fe5353}
	#history > div > ul > li > dl > dt.blue {color:#0084ff}
	#history > div > ul > li > dl > dt.green {color:#4b9708}
	#history > div > ul > li > dl > dd {padding:7px 0; text-align:center; border-top:1px solid #575757}
	#history > div > ul > li > dl > dd.dragon {background:#192c5c}
	#history > div > ul > li > dl > dd.tiger {background:#5c1919}
	#history > div > ul > li > dl > dd > img {width:54px}

.histogram {width:840px; height:427px; background:#1c1c1c; border-top:1px solid #575757; border-top:none}
.histogram > h1 {display:table; width:100%; height:48px; background:#000; border-bottom:1px solid #575757}
.histogram > h1 > ul {display:table-cell; height:48px; vertical-align:middle; text-align:center}
.histogram > h1 > ul > li {display:inline-block; margin:0 11px; font-size:16px; color:#e5e5e5}
.histogram > h1 > ul > li > span {display:inline-block; width:32px; height:32px; margin-right:10px; text-align:center; font-size:16px; color:#FFF; line-height:32px; border-radius:16px}
.histogram > h1 > ul > li > span.red {background:#1062af}
.histogram > h1 > ul > li > span.blue {background:#d31616}
.histogram > h1 > ul > li > span.green {background:#4b9708}
.histogram > div {width:838px; height:379px; overflow-x:scroll}
.histogram > div > ul {width:2000px; background:url('./img/histogram_bg.png') repeat; overflow:hidden}
.histogram > div > ul > li {float:left; width:42px}
.histogram > div > ul > li:first-child {border-left:none}
.histogram > div > ul > li > dl > dd {width:42px; height:42px; text-align:center; line-height:41px}
.histogram > div > ul > li > dl > dd:first-child {font-size:20px; background:url('./img/histogram_head_bg.png') no-repeat}
.histogram > div > ul > li.player > dl > dd:first-child {color:#fe2424}
.histogram > div > ul > li.banker > dl > dd:first-child {color:#0686ff}
.histogram > div > ul > li > dl > dd > span {display:inline-block; width:32px; height:32px; font-size:14px; color:#FFF; letter-spacing:-1px; line-height:31px; border-radius:16px}
.histogram > div > ul > li > dl > dd.player > span {background:#d31616}
.histogram > div > ul > li > dl > dd.banker > span {background:#1062af}
.histogram > div > ul > li > dl > dd.tai > span {background:#4b9708}
.histogram > div > ol {width:2000px; ; background:url('./img/histogram_tail_bg.png') repeat; overflow:hidden}
.histogram > div > ol > li {float:left; width:42px; height:42px; text-align:center; font-size:14px; color:#FFF; line-height:41px}