@charset "utf-8";
@import url( "https://fonts.googleapis.com/earlyaccess/notosanskr.css" );
@import url( "https://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; }
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;  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.png')}
	.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; width:696px; 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}

#danalysis > div { position:relative; overflow-y:auto; }

/* resultA */
#danalysis > .dcontent { overflow-y:hidden; overflow-x:scroll; border:solid 1px #a3a4a8; }
#danalysis > .dcontent-head { width:840px; border:solid 1px #a3a4a8; line-height:38px; background-color:#ececee; border:solid 1px #d8d8d8; border-bottom:none; font-weight:bold; font-size:12px; margin-top:10px; text-indent:10px; }
#danalysis > .dcontent > .resultA { position:relative; width:840px; overflow:auto; }
#danalysis > .dcontent > .resultA > table { border-collapse:collapse; border-bottom:solid 1px #cacaca; margin-bottom:10px; float:left; }
#danalysis > .dcontent > .resultA > table > thead > tr > th { background-color:#efefef; font-family:Dotum; font-size:11px; font-weight:normal; width:33px; height:33px; vertical-align:middle; border-right:solid 1px #dedede; }
#danalysis > .dcontent > .resultA > table > thead > tr > th.last { border-right:none; }
#danalysis > .dcontent > .resultA > table > thead > tr > th.blue { color:#106de0; }
#danalysis > .dcontent > .resultA > table > thead > tr > th.gray { color:#27ae60; }
#danalysis > .dcontent > .resultA > table > thead > tr > th.red { color:#e01010; }
#danalysis > .dcontent > .resultA > table > tbody > tr > td { width:33px; height:33px; background-color:#fcfcfc; border-right:solid 1px #efefef; border-bottom:solid 1px #efefef; text-align:center; vertical-align:middle; }
#danalysis > .dcontent > .resultA > table > tbody > tr > td.blue { background-image:url(/game/sutda/img/bg_blue.png); background-repeat:no-repeat; background-position:center center; color:#ffffff; font-family:Tahoma; font-size:11px; }
#danalysis > .dcontent > .resultA > table > tbody > tr > td.gray { background-image:url(/game/sutda/img/bg_gray.png); background-repeat:no-repeat; background-position:center center; color:#ffffff; font-family:Tahoma; font-size:11px; }
#danalysis > .dcontent > .resultA > table > tbody > tr > td.red { background-image:url(/game/sutda/img/bg_red.png); background-repeat:no-repeat; background-position:center center; color:#ffffff; font-family:Tahoma; font-size:11px; }
#danalysis > .footer > .blank { width:840px; height:10px; border:none; background-color:#ffffff; border-right:solid 1px #ababab; border-left:solid 1px #ababab; }
#danalysis > .footer > .tab { width:840px; border-right:solid 1px #a3a4a8; border-bottom:solid 1px #a3a4a8; padding-bottom:0px; overflow-y:auto; background-color:#e8e8e8; border-left:solid 1px #ababab; clear:both; margin-bottom:10px; }
#danalysis > .footer > .tab > div { width:110px; float:left; font-size:12px; color:#666666; text-align:center; line-height:18px; padding:4px 0px; cursor:pointer; }
#danalysis > .footer > .tab > div > span { width:100%; display:block; border-right:solid 1px #ababab; }
#danalysis > .footer > .tab > .line { width:840px; background-color:#ababab; height:1px; padding:0px; border:none; z-index:1; }
#danalysis > .footer > .tab > .active { color:#3960a6; border-bottom:solid 2px #3960a6; border-left:solid 1px #ababab;border-right:solid 1px #ababab; background-color:#ffffff; margin-top:-1px; z-index:2; }
#danalysis > .footer > .tab > .active > span { border:none; }
#danalysis > .footer > .tab > .first { border-left:none; }