@charset "utf-8";

/* RESET */
/* 화면전환 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:900px; overflow:hidden}
	.game {position:relative; width:900px; 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:328px; top:41px}
	.title > div {position:relative; width:241px; height:264px}
	.title > div > img {position:absolute; left:0; 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:425px; 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:67px; 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:98px; 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:#ffee79}
	.timeline > h2 {margin-bottom:10px; font-weight:500; font-size:14px; color:#FFF}
	.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:#b76457}

	.now_playing {display:none; position:absolute; left:315px; top:308px; width:279px; 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:900px; height:332px; background:#1c1c1c; border:1px solid #575757; border-top:none; overflow:hidden}
	#history > div {width:900px; 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:#5c1919}
	#history > div > ul > li > dl > dd.tiger {background:#192c5c}
	#history > div > ul > li > dl > dd > img {width:54px}

.histogram {width:900px; 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:#d31616}
.histogram > h1 > ul > li > span.blue {background:#1062af}
.histogram > h1 > ul > li > span.green {background:#4b9708}
.histogram > div {width:900px; 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:#0686ff}
.histogram > div > ul > li.banker > dl > dd:first-child {color:#fe2424}
.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:#1062af}
.histogram > div > ul > li > dl > dd.banker > span {background:#d31616}
.histogram > div > ul > li > dl > dd.tai > span {background:#77ff00;color:#000;}
.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}

.summary_btn_area .btn{
	position:absolute;top:25px;width:34px;height:34px;background:url(/game/dtcard/img/sp_btn.png) no-repeat 0 -9999px;text-indent:-9999px;overflow:hidden
}
.summary_btn_area .btn_tip{
	right:160px;background-position:0 0
}
.summary_btn_area .btn_share{
	left:20px;background-position:-40px 0
}
.summary_btn_area .btn_effect_sound{
	right:72px;background-position:-200px 0
}
.summary_btn_area .btn_effect_sound.on{
	background-position:-120px 0
}
.summary_btn_area .btn_stats{
	left:72px
}
.summary_btn_area .btn_stats:before{
	background-position:0 -50px
}
.summary_btn_area .btn_pattern{
	left:156px
}
.summary_btn_area .btn_pattern:before{
	background-position:-30px -50px
}


.layer_option{
	display:none;position:absolute;top:0;left:0;right:0;background-color:#342b24;z-index:101;box-shadow:0 5px 15px rgba(0,0,0,.3)
}
.layer_option .inner{
	margin:0 auto;width:790px
}
.layer_option .inner:after{
	display:block;content:'';clear:both
}
.layer_option .hd{
	height:71px
}
.layer_option .hd .tit{
	float:left;line-height:71px;font-size:12px;color:#fff
}
.layer_option .bd{
	background-color:#000;color:#837765
}
.layer_option .bd .inner{
	padding:20px 0 30px
}
.layer_option .lbtn_close{
	float:right;margin-right:-20px;width:71px;height:71px;text-indent:-9999px;overflow:hidden
}
.layer_option .lbtn_close:before{
	float:left;margin:20px;content:'';width:31px;height:31px;background:url(/game/dtcard/img/ic_close.png) no-repeat
}
.layer_option .ft .inner{
	padding:25px 0
}
.layer_option .ft p{
	height:21px;line-height:21px;color:#837765
}

.layer_share .left{
	float:left;width:380px
}
.layer_share .right{
	float:right;width:380px
}
.layer_share .center{
	padding-top:20px;clear:both
}
.layer_share dt{
	height:31px;line-height:31px;color:#837765;text-align:left
}
.layer_share .size_box{
	width:100%;height:50px;border:none;text-align:center;font-size:18px;background-color:#342b24;color:#eace63
}
.layer_share .source_box{
	padding:20px;width:100%;height:83px;line-height:20px;border:none;font-size:16px;background-color:#342b24;color:#eace63;outline:none;box-sizing:border-box
}


.layer_pattern{
	top:0;left:0;right:0;background:url(../img/bg_sell.png) repeat-x;z-index:101;box-shadow:0 5px 15px rgba(0,0,0,.3)
}
.layer_pattern .inner{
	position:relative;margin:0 auto;
}
.layer_pattern .inner:after{
	display:block;content:'';clear:both
}
.layer_pattern .btn_close{
	position:absolute;top:0;right:-20px;width:71px;height:71px;text-indent:-9999px;overflow:hidden
}
.layer_pattern .btn_close:before{
	float:left;margin:20px;content:'';width:31px;height:31px;background:url(../img/ic_close.png) no-repeat
}
.layer_pattern .hd .tit{
	float:left;margin-right:15px;line-height:71px;font-size:12px;color:#fff
}
.layer_pattern .hd .menu{
	float:left
}
.layer_pattern .hd .menu li{
	float:left
}
.layer_pattern .hd .menu a{
	float:left;padding:0 15px;height:71px;line-height:71px;color:#837765
}
.layer_pattern .hd .menu a.selected{
	font-weight:700;color:#eace63;letter-spacing:-1px
}
.layer_pattern .bd{
}
.layer_pattern .bd .inner:after{
	position:absolute;content:'';bottom:0;right:0;width:10px;height:10px;background-color:#000
}
.layer_pattern .option{
	position:absolute;top:-51px;height:51px
}
.layer_pattern .option:after{
	display:block;content:'';clear:both
}
.layer_pattern .option li{
	float:left
}
.layer_pattern .option a{
	float:left;padding:0 15px;height:51px;line-height:51px;color:#837765
}
.layer_pattern .option a.selected{
	font-weight:700;color:#eace63;letter-spacing:-1px
}
.layer_pattern .option li:first-child a{
	padding-left:0
}
.layer_pattern .data_area{
	position:relative;max-height:480px;overflow-y:auto;overflow-x:scroll
}
.layer_pattern .data_area:before{
	position:absolute;content:'';left:0;right:0;height:85px
}

.layer_pattern .pattern_data{
	padding-bottom:10px;font-size:0
}
.layer_pattern .pattern_data dl{
	display:inline-block;margin-left:-1px;vertical-align:top
}
.layer_pattern .pattern_data dl span{
	position:relative;display:block;width:29px;text-align:center;font-family:Tahoma,sans-serif;font-size:10px;z-index:1
}
.layer_pattern .pattern_data dl:first-child{
	margin-left:0
}
.layer_pattern .pattern_data dt{
	margin-bottom:5px
}
.layer_pattern .pattern_data dt .tx{
	height:31px;line-height:31px;font-family:굴림,Gulim,Helvetica,sans-serif;font-size:12px;
}
.layer_pattern .pattern_data dt .tx.SELL,.layer_pattern .pattern_data dt .tx.ODD,.layer_pattern .pattern_data dt .tx.UNDER{
	color:#3498db
}
.layer_pattern .pattern_data dt .tx.BUY,.layer_pattern .pattern_data dt .tx.EVEN,.layer_pattern .pattern_data dt .tx.OVER{
	color:#e74c3c
}
.layer_pattern .pattern_data dt .length{
	height:27px;line-height:27px;background-color:#342b24
}
.layer_pattern .pattern_data dt .times{
	height:27px;line-height:27px;
}
.layer_pattern .pattern_data dd{
	margin-top:1px
}
.layer_pattern .pattern_data dd span{
	width:27px;height:27px;line-height:27px;border-radius:100%;color:#fff
}
.layer_pattern .pattern_data dd .SELL,.layer_pattern .pattern_data dd .ODD,.layer_pattern .pattern_data dd .UNDER{
	background-color:#3498db
}
.layer_pattern .pattern_data dd .BUY,.layer_pattern .pattern_data dd .EVEN,.layer_pattern .pattern_data dd .OVER{
	background-color:#e74c3c
}


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

/* resultA */
#danalysis > .dcontent { width:900px; overflow-y:hidden; overflow-x:scroll; border:solid 1px #a3a4a8; }
#danalysis > .dcontent-head { width:900px; 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:900px; 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/ladder/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/ladder/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/ladder/img/bg_red.png); background-repeat:no-repeat; background-position:center center; color:#ffffff; font-family:Tahoma; font-size:11px; }
#danalysis > .footer > .blank { width:900px; height:10px; border:none; background-color:#ffffff; border-right:solid 1px #ababab; border-left:solid 1px #ababab; }
#danalysis > .footer > .tab { width:900px; 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:900px; 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; }