@charset "utf-8";
@import url( "http://fonts.googleapis.com/earlyaccess/notosanskr.css" );
@import url( "http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css" );

/* UMADE 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}

#sutda {position:relative; width:840px; height:967px; background:#27211c; background:url('../img/game_bg.jpg') no-repeat; overflow:hidden}

.top_area {position:relative; width:840px; height:619px; overflow:hidden}
	.sound {position:absolute; right:27px; top:27px; width:45px; height:45px; background:url('../img/sound_on.png') no-repeat; cursor:pointer}
	.sound > img {opacity:0}
	.sound.off {background:none}
	.sound.off > img {opacity:1}

	.info {position:absolute; left:0; top:210px; width:840px; text-align:center}
	.info > h1 {margin-bottom:10px; font-size:14px; color:#ffd9b3; text-shadow:1px 1px 2px black}
	.info > h1 > span {color:#fff32b}
	.info > h2 {width:179px; height:52px; margin:0 auto; background:url('../img/info_btn.png') no-repeat center; cursor:pointer; transition:.3s}
	.info > h2:hover {opacity:0.75}

	.game {position:absolute; left:0; top:327px; width:840px; height:280px; overflow:hidden}
	.game .game_area {position:relative; width:840px; height:280px}
	.game .game_area .timer {position:absolute; left:0; top:20px; width:840px; text-align:center; font-family:"Nanum Myeongjo"; font-weight:800; font-size:16px; color:#f8ffc4}
	.game .game_area .timer > span {font-family:"Nanum Myeongjo"; font-weight:800; font-size:16px; color:#ffda47}
	.game .game_area .round {position:absolute; left:0; top:50px; width:840px; text-align:center; font-family:"Nanum Myeongjo"; font-weight:800; font-size:32px; color:#FFF; text-shadow:1px 1px 2px black}
	.game .game_area .center {position:absolute; left:387px; top:100px} /* top 92px → 100px 변경됨 */
	.game .game_area .card {position:absolute; top:66px; width:220px} /* top 75px → 66px 변경됨 */
	.game .game_area .blue {left:120px}
	.game .game_area .red {left:514px}
	.game .game_area .card > dl {position:relative}
	.game .game_area .card > dl > dt {position:relative; float:left; width:108px; height:164px; margin-left:4px}
	.game .game_area .card > dl > dt:first-child {margin-left:0}
	.game .game_area .card > dl > dt > var {position:absolute; left:0; top:0; width:108px; height:164px; background:url('../img/card_back.png') no-repeat}
	.game .game_area .card > dl > dd {position:absolute; left:-17px; top:-18px; width:251px; height:197px; line-height:197px; text-align:center; font-size:36px; font-weight:500; color:#ffea3c; text-shadow:0 0 3px #353910, 0 0 3px #353910, 0 0 3px #353910, 0 0 3px #353910, 0 0 3px #353910, 0 0 3px #353910, 0 0 3px #353910, 0 0 3px #353910, 0 0 3px #353910, 0 0 3px #353910, 0 0 3px #353910}
	.game .game_area .card > dl > dd > span {font-weight:500; color:#FFF}
	.game .game_area .card.lose > dl > dd {position:absolute; background:url('../img/lose.png') no-repeat}
	.game .game_area .card.draw > dl > dd {position:absolute; background:url('../img/lose.png') no-repeat} /* 무승부가 추가됨 */
	.game .game_area .card.win > dl > dd {position:absolute; background:url('../img/win.png') no-repeat}

	.hand_rank {display:none; position:absolute; left:0; top:0; width:840px; height:619px; background:url('../img/rank_bg.jpg')}
	.hand_rank > .title {position:relative; width:840px; height:82px}
	.hand_rank > .title > .close_btn {position:absolute; right:20px; top:24px; cursor:pointer; transition:.3s}
	.hand_rank > .title > .close_btn:hover {opacity:0.75}
	.hand_rank > dl {width:838px; margin:0 1px; overflow:hidden}
	.hand_rank > dl > dt {float:left; width:138px; height:133px; text-align:center; border-top:1px solid #575757; border-left:1px solid #575757}
	.hand_rank > dl > dt.left {width:141px; border-left:none}
	.hand_rank > dl > dt > h1 {height:34px; line-height:34px; font-size:14px; color:#FFF; background:#56391b; border-bottom:1px solid #575757}
	.hand_rank > dl > dt > h2 {height:98px; line-height:98px; background:#000}
	.hand_rank > dl > dt > h2 > img {width:49px}
	.hand_rank > dl > dt > h2 > img:first-child {margin-right:7px}
	.hand_rank > dl > dd {float:left; height:133px; text-align:center; background:#1c1c1c; border-top:1px solid #575757; border-left:1px solid #575757}
	.hand_rank > dl > dd > ul {padding:22px 35px}
	.hand_rank > dl > dd > ul > li {margin-bottom:3px}
	.hand_rank > dl > dd > ul > li > span {margin-right:10px; font-weight:400; font-size:13px; color:#FFF}
	.hand_rank > dl > dd > ul > li > code {font-weight:400; font-size:13px; color:#8c8c8c}

#history {width:840px; height:348px; overflow:hidden}
	#history > div {width:840px; height:348px; background:#1c1c1c; overflow-x:scroll}
	.history {width:38705px; overflow:hidden}
	.history > dl {float:left; width:128px; height:331px; text-align:center; border-left:1px solid #575757}
	.history > dl:last-child {border-right:1px solid #575757}
	.history > dl > dt {height:34px; line-height:34px; font-weight:400; background:#000; border-bottom:1px solid #575757}
	.history > dl > dt.num {font-size:16px; color:#cbcbcb}
	.history > dl > dt.vs {font-size:13px; color:#FFF}
	.history > dl > dt.win {font-size:15px; background:#2d2d2d}
	.history > dl > dt.win.red {color:#fe5353}
	.history > dl > dt.win.red::after {color:#fe5353}
	.history > dl > dt.win.blue {color:#536ffe}
	.history > dl > dt.win.blue::after {color:#536ffe}
	.history > dl > dt.win.draw {color:#888}
	.history > dl > dt.win.draw::after {color:#888}
	.history > dl > dt.sum {font-size:13px; color:#dfce9c}
	.history > dl > dd {padding:10px 0; border-bottom:1px solid #575757}
	.history > dl > dd.blue {background:#192c5c}
	.history > dl > dd.red {background:#5c1919}
	.history > dl > dd > img {width:49px; margin:0 3px}