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

#baccarat {}
	.game {position:relative; width:830px; height:599px; background:url('./img/game_bg.jpg') no-repeat; overflow:hidden}
    #baccarat_game {position:absolute;left:35px;top:85px;width:830px;height:521px}

		.url {position:absolute; left:0; top:70px; width:100%; text-align:center; font-size:20px; color:#FFF; text-shadow:0 0 5px #193d57}

		.sound {position:absolute; left:50%; top:374px; width:61px; height:67px; margin-left:-25px; background:url('./img/sound_on.png') no-repeat; cursor:pointer}
		.sound > img {opacity:0}
		.sound.off {background:none}
		.sound.off > img {opacity:1}

		.timeline {position:absolute; left:10px; top:485px; width:100%; text-align:center; overflow:hidden}
		.timeline > h1 {font-size:17px; color:#5384a4}
		.timeline > h2 {margin:-5px 0 18px; font-weight:500; font-size:30px; color:#9cb4c4}
		.timeline > h3 {width:160px; height:7px; margin:0 auto 5px; background:#484441; border-radius:4px; overflow:hidden}
		.timeline > h3 > span {display:block; height:6px; background:url('./img/gauge.jpg') repeat-x}
		.timeline > h4 {font-size:14px; color:#FFF; letter-spacing:-0.5px}

		.name {position:absolute}
		.name.player {left:196px; top:189px; width:102px; height:90px; background:url('./img/player.png') no-repeat}
		.name.banker {right:191px; top:187px; width:108px; height:93px; background:url('./img/banker.png') no-repeat}
		.name.tie {left:395px; top:272px; width:43px; height:24px; background:url('./img/tie.png') no-repeat}
		.name > img {opacity:0}
		.name.win > img {opacity:1}

		.card {position:absolute; bottom:170px; text-align:center}
		.card.player {left:70px; transform:rotate(25deg)}
		.card.banker {right:70px; transform:rotate(-22deg)}
		.card > h1 {margin-bottom:10px; font-family:"Jeju Myeongjo"; font-weight:bold; font-size:50px; color:#FFF}
		.card > h2 > img {width:100px; margin-left:-45px}
		.card.natural > h2 > img {width:100px; margin-left:10px}
		.card > h2 > img:first-child {margin-left:0}

		.display {position:absolute; width:177px; height:100px}
		.display.player {left:40px; top:426px}
		.display.banker {right:52px; top:437px}
		.display > h1 {display:none}
		.display.pair > h1 {display:block}
		.display > h2 {display:none}
		.display.natural > h2 {display:block}
		.display > h3 {display:none}
		.display.pair.natural > h1 {display:none}
		.display.pair.natural > h2 {display:none}
		.display.pair.natural > h3 {display:block}
		.player_sum {position:absolute; left:195px; top:284px; color:#80b9d2; font-size:24px; transform:rotate(25deg)}
		.banker_sum {position:absolute; left:635px; top:283px; color:#80b9d2; font-size:24px; transform:rotate(-25deg)}

	.betting_cart {position:relative; height:481px; background:#19242c; overflow:hidden}
		.betting_cart > div {height:67px; line-height:67px; margin-bottom:10px; padding-top:22px; overflow:hidden}
		.betting_cart > div > h1 {float:left; width:272px; margin-left:50px; text-align:right; font-size:25px; color:#FFF}
		.betting_cart > div > h1::after {content:" P"; font-size:25px; color:#FFF}
		.betting_cart > div > h1 > span {float:left; font-size:22px; color:#7591a5}
		.betting_cart > div > h2 {float:right; width:400px; height:65px; line-height:65px; margin-right:47px; padding:0 33px; text-align:right; font-size:25px; color:#fff778; background:#131b21; border:1px solid #30424e; border-radius:15px; box-shadow:2px 2px 5px black inset}
		.betting_cart > div > h2::after {content:" P"; font-size:25px; color:#fff778}
		.betting_cart > div > h2 > span {float:left; font-size:22px; color:#7591a5}

		.betting_cart > ul {margin:0 0 20px 44px; overflow:hidden}
		.betting_cart > ul > li {position:relative; float:left; margin-left:3px; cursor:pointer}
		.betting_cart > ul > li#btn_p {background:url('./img/btn_player.png?v=2') no-repeat}
		.betting_cart > ul > li#btn_b {background:url('./img/btn_banker.png?v=2') no-repeat}
		.betting_cart > ul > li#btn_t {background:url('./img/btn_tie.png') no-repeat}
		.betting_cart > ul > li#btn_pp {background:url('./img/btn_pair_player.png') no-repeat}
		.betting_cart > ul > li#btn_bp {background:url('./img/btn_pair_banker.png') no-repeat}
		.betting_cart > ul > li > img {opacity:0; transition:.3s}
		.betting_cart > ul > li.on > img {opacity:1}
		.betting_cart > ul > li:first-child {margin-left:0}
		.betting_cart > ol {margin-left:44px; overflow:hidden}
		.betting_cart > ol > li {float:left; cursor:pointer; transition:.3s}
		.betting_cart > ol > li:hover {opacity:0.9}
		.betting_cart > dl {float:left; margin-left:44px; padding-top:10px; overflow:hidden}
		.betting_cart > dl > dd {float:left; margin-left:4px; cursor:pointer; transition:.3s}
		.betting_cart > dl > dd:hover {opacity:0.9}
		.betting_cart > dl > dd:first-child {margin-left:0}

		.betting_cart > dfn {display:block; position:absolute; left:0; top:0; width:840px; height:311px; padding-top:170px; text-align:center; font-size:22px; color:#65879e; background:rgba(25, 36, 44, 0.98)}

	.betting_history {height:437px; overflow-y:scroll; padding-bottom:20px; background:#214863}
		.betting_history > dl {margin:0 25px; padding-top:15px}
		.betting_history > dl > dt {background:#1e2b34}
		.betting_history > dl > dt > ul {width:100%; overflow:hidden}
		.betting_history > dl > dt > ul > li {float:left; height:50px; line-height:50px; text-align:center; font-size:14px; color:#ececec; background:url('./img/betting_history_line.png') no-repeat left}
		.betting_history > dl > dt > ul > li:nth-child(1) {width:195px; background:none}
		.betting_history > dl > dt > ul > li:nth-child(2) {width:104px}
		.betting_history > dl > dt > ul > li:nth-child(3) {width:152px}
		.betting_history > dl > dt > ul > li:nth-child(4) {width:149px}
		.betting_history > dl > dt > ul > li:nth-child(5) {width:101px}
		.betting_history > dl > dt > ul > li:nth-child(6) {width:89px}
		.betting_history > dl > dd > ul {width:100%; border-bottom:1px solid #335d7a; overflow:hidden}
		.betting_history > dl > dd > ul > li {float:left; height:50px; line-height:50px; text-align:center; font-size:14px; color:#78a7c8}
		.betting_history > dl > dd > ul > li:nth-child(1) {width:195px}
		.betting_history > dl > dd > ul > li:nth-child(2) {width:104px}
		.betting_history > dl > dd > ul > li:nth-child(3) {width:152px}
		.betting_history > dl > dd > ul > li:nth-child(4) {width:149px; color:#FFF}
		.betting_history > dl > dd > ul > li:nth-child(5) {width:101px}
		.betting_history > dl > dd > ul > li:nth-child(6) {width:89px}
		.betting_history > dl > dd > ul > li.win {color:#fff778}
		.betting_history > dl > dd > ul > li.lose {color:#ff7878}

		.betting_history > div {width:230px; height:44px; line-height:44px; margin:20px auto 0; text-align:center; font-size:16px; color:#FFF; background:#0088b1; border:1px solid #00c4ff; border-radius:12px; box-shadow:1px 1px 3px black; cursor:pointer; transition:.2s}
		.betting_history > div:hover {opacity:.9}

	.history {width:830px; height:332px; background:#1c1c1c; border-top:1px solid #575757; overflow:hidden}
		.history > div {width:838px; height:332px; overflow-x:scroll}
		.history > div > ul {width:185760px; overflow:hidden}
		.history > div > ul > li {float:left; width:128px; border-right:1px solid #575757}
		.history > div > ul > li > dl > dt {height:34px; text-align:center; font-size:16px; letter-spacing:-1px; line-height:34px; background:#1e2b34; border-bottom:1px solid #575757}
		.history > div > ul > li > dl > dt:first-child {font-size:18px; color:#00b7df}
		.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 7px 7px; border-top:1px solid #575757}
		.history > div > ul > li > dl > dd.player {background:#192c5c}
		.history > div > ul > li > dl > dd.banker {background:#5c1919}
		.history > div > ul > li > dl > dd > img {width:54px; margin-left:6px}
		.history > div > ul > li > dl > dd.three > img {margin-left:-24px}
		.history > div > ul > li > dl > dd > img:first-child {margin-left:0}

	.histogram {width:830px; 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 {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:#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}




.flying_card_p {position:absolute; right:-100px; top:-200px; width:100px; transform:rotate(22deg)}
.flying_card_b {position:absolute; right:-100px; top:-200px; width:100px; transform:rotate(-22deg)}


/* HISTORY */
.history_detail {display:block;padding:10px; background:#ebede6; overflow:hidden}
.history_detail > div {background:#FFF; border:2px solid #ffa900; background:url('./img/bg_history_detail.jpg') repeat; overflow:hidden}
.history_detail > div > ul {float:left; height:113px; border-left:1px solid #d0d0d0}
.history_detail > div > ul:first-child {border-left:none}
.history_detail > div > ul > li {position:relative; width:18px; height:18px; border-top:1px solid #d0d0d0}
.history_detail > div > ul > li:first-child {border-top:none}
.history_detail > div > ul > li > h1 {width:14px; height:14px; text-align:center; line-height:14px; border-radius:9px}

.history_detail > div > ul.banker > li > h1 {color:#e24f4f; border:2px solid #e24f4f}
.history_detail > div > ul.player > li > h1 {color:#065bdb; border:2px solid #065bdb}
.history_detail > div > ul > li.banker > h1 {color:#e24f4f; border:2px solid #e24f4f}
.history_detail > div > ul > li.player > h1 {color:#065bdb; border:2px solid #065bdb}

.history_detail > div > ul > li.tai > h1 {color:#008d16; border:2px solid #008d16}
.history_detail > div > ul > li > h2 {display:none; position:absolute; left:1px; top:1px; width:4px; height:4px; background:#e24f4f; border:1px solid #FFF; border-radius:3px}
.history_detail > div > ul > li.left > h2 {display:block}
.history_detail > div > ul > li > h3 {display:none; position:absolute; right:1px; bottom:1px; width:4px; height:4px; background:#065bdb; border:1px solid #FFF; border-radius:3px}
.history_detail > div > ul > li.right > h3 {display:block}

.history_detail > div.winner {float:left; width:816px; margin:10px 8px 0 0}
.history_detail > div.winner > ul > li > h1 {color:#FFF}
.history_detail > div.winner > ul > li.player > h1 {background:#065bdb; border:2px solid #065bdb}
.history_detail > div.winner > ul > li.player > h1:after {content:"P"}
.history_detail > div.winner > ul > li.banker > h1 {background:#e24f4f; border:2px solid #e24f4f}
.history_detail > div.winner > ul > li.banker > h1:after {content:"B"}
.history_detail > div.winner > ul > li.tai > h1 {background:#008d16; border:2px solid #008d16}
.history_detail > div.winner > ul > li.tai > h1:after {content:"T"}

.history_detail > div.circle {float:left; width:539px; margin-top:10px; background:url('./img/bg_history_mini.jpg') repeat}
.history_detail > div.circle > ul {height:53px}
.history_detail > div.circle > ul > li {width:8px; height:8px}
.history_detail > div.circle > ul > li > h1 {width:4px; height:4px}
.history_detail > div.circle > ul > li.player > h1 {border:2px solid #e24f4f}
.history_detail > div.circle > ul > li.banker > h1 {border:2px solid #065bdb}
.history_detail > div.circle > ul > li.tai > h1 {border:2px solid #008d16}

.history_detail > div.dot {float:left; width:539px; margin-top:3px; background:url('./img/bg_history_mini.jpg') repeat}
.history_detail > div.dot > ul {height:53px}
.history_detail > div.dot > ul > li {width:8px; height:8px}
.history_detail > div.dot > ul > li > h1 {width:6px; height:6px; border:1px solid #FFF}
.history_detail > div.dot > ul > li.player > h1 {background:#e24f4f}
.history_detail > div.dot > ul > li.banker > h1 {background:#065bdb}
.history_detail > div.dot > ul > li.tai > h1 {background:#008d16}

div.mini_history_bg {float:left; width:193px; height:78px; background-color:#391817;border-right:1px soild #2a1211; border-bottom:1px soild #2e1312; border-left:1px soild #4a2e2d; border-radius:5px; box-shadow:1px 1px #1d0c0c;overflow-x:auto;}
div.mini_history_bg .top_scroll_box {min-width:193px; width:2000px; height:78px; overflow:hidden; background-image:url('./img/bg_mini_history.jpg'); }
div.mini_history_bg ul {float:left; border-left:1px solid #532b2a}
div.mini_history_bg ul:first-child {border-left:none}
div.mini_history_bg ul > li {position:relative; width:12px; height:12px; border-top:1px solid #532b2a; overflow:hidden}
div.mini_history_bg ul > li:first-child {border-top:none}
div.mini_history_bg ul > li > span {display:block; width:12px; height:12px; border-radius:6px; overflow:hidden}
div.mini_history_bg ul > li.ppair > span {background:#1f95ff}
div.mini_history_bg ul > li.player > span {background:#1f95ff}
div.mini_history_bg ul > li.tie > span {background:#009f33}
div.mini_history_bg ul > li.bank > span {background:#cb1f03}
div.mini_history_bg ul > li.bpair > span {background:#cb1f03}
div.mini_history_bg ul > li > em {position:absolute; left:1px; top:1px; width:2px; height:2px; background:#c7594f; border:1px solid #aed9ff; border-radius:2px; overflow:hidden; opacity:0}
div.mini_history_bg ul > li.left > em {opacity:1}
div.mini_history_bg ul > li > var {position:absolute; right:1px; bottom:1px; width:2px; height:2px; background:#608ceb; border:1px solid #aed9ff; border-radius:2px; overflow:hidden; opacity:0}
div.mini_history_bg ul > li.right > var {opacity:1}