body{ min-width: 1280px; min-height: 768px; } .noselect{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .head{ width: 100%; height: 75px; background: rgba(0,0,0,0.5); position: fixed; left: 0; top: 0; z-index: 999; } .head .logo{ width: 100px; height: 75px; float: left; background:#615804; text-align: center; line-height: 75px; color: #fff; font-size: 25px; font-weight: 500; } .head .item{ line-height: 75px; color: #fff; font-weight: 500; margin: 0 20px; } .head .item.setup{ width: 100px; cursor: pointer; } .head .item.setup:active{ opacity: 0.8 } .head .item.setup label{ /*cursor: pointer;*/ pointer-events:none } .head .item.setup span{ display: inline-block; width: 26px; height: 26px; background: url(../img/setup_icon.png) center center no-repeat; vertical-align: middle; -webkit-background-size: cover; background-size: cover; margin-left: 10px; } .head .hide-nav{ position: absolute; right: 0px; top: 72px; background: rgba(0,0,0,0.8); border-radius: 4px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; overflow-y: hidden; height: 0; } .head .hide-nav a{ padding:0 30px; display: block; } .head .hide-nav a:first-child{ margin-top: 10px; } .head .hide-nav a:last-child{ margin-bottom: 28px; } .head .hide-nav li{ display: block; width: 90px; text-align: center; padding-top: 12px; padding-bottom: 5px; border-bottom: 1px solid #999; font-size: 15px; color: #ccc; cursor: pointer; font-weight: 500; } .head .hide-nav li:hover{ color: #fff; } .head .hide-nav li:active{ opacity: 0.8; } .hall{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; min-width: 1024px; min-height: 768px; background: url(../img/bg_2.jpg); -webkit-background-size: cover; background-size: cover; z-index: 1; background-color: #000; } .hall .game-box{ position: absolute; top: 50%; left: 50%; -webkit-translate(-50%, -50%); -moz-translate(-50%, -50%); -ms-translate(-50%, -50%); -o-translate(-50%, -50%); transform: translate(-50%, -50%); width: 540px; } .hall .game-box .item{ background:rgba(19,26,40,0.5); display: block; border-radius: 8px; overflow-y: hidden; } .hall .game-box .item:first-child{ margin-bottom: 35px; } .hall .game-box .item:hover{ background:rgba(19,26,40,0.8); -webkit-box-shadow: 0px 0px 3px #ccc; box-shadow: 0px 0px 3px #ccc; } .hall .game-box .item:active{ background:rgba(19,26,40,0.9); } .game-table{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; min-width: 1024px; min-height: 768px; background: url(../img/bg_2.jpg); -webkit-background-size: cover; background-size: cover; z-index: 1; background-color: #000; } .game-table .table-box{ width: 80%; position: absolute; top: 60%; left: 50%; -webkit-translate(-50%, -50%); -moz-translate(-50%, -50%); -ms-translate(-50%, -50%); -o-translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 99; } .game-table .table-box .table-item{ width: 48.5%; margin:18px 0; overflow: hidden; } .game-table .table-box .table-item .canvas-box{ overflow: hidden; position: relative; } .game-table .table-box .table-item .canvas-box .mask{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 40px; color: #eee; background: #000; opacity: 0.5; text-align: center; font-weight: 600; line-height: 4; } .game-table .table-box .table-item canvas{ background: #fff; float: left; } .game-table .table-item .hd{ background: #000; color: #fff; position: relative; text-align: center; height: 35px; font-size: 16px; font-weight: 500; overflow-y: hidden; } .game-table .table-item .hd .lab{ position: absolute; left: 20px; top: 0; line-height: 36px; } .game-table .table-item .hd .title{ font-size: 16px; font-weight: 500; line-height: 37px; padding-left: 40px; position: relative; font-size: 18px; display: block; height: 35px; } .game-table .table-item .hd .title i{ position: absolute; width: 24px; height: 24px; border-radius: 50px; background: #615804; line-height: 25px; left: 50%; top: 50%; margin-left: -52px; margin-top: -12px; font-size: 16px; } .game-table .peson-icon{ position: absolute; z-index: 1; width: 17%; left: 50%; top: 50%; -webkit-translate(-50%, -145%); -moz-translate(-50%,-145%); -ms-translate(-50%, -145%); -o-translate(-50%, -145%); transform: translate(-50%, -145%); } .surface-box{ width: 80%; position: absolute; left: 50%; top: 50%; -webkit-translate(-50%, -50%); -moz-translate(-50%,-50%); -ms-translate(-50%, -50%); -o-translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 999; border-radius: 6px; overflow: hidden; height: 608px; background: #d2d2d2; -moz-box-shadow: 0px 0px 8px #ccc; -webkit-box-shadow: 0px 0px 8px #ccc; box-shadow: 0px 0px 8px #ccc; display: none; } .surface-box .header{ background: #000; text-align: center; } .surface-box .header .title{ display: inline-block; width: 150px; margin-top: 10px; } .surface-box .column{ color: #fff; font-size: 15px; padding: 15px; font-weight: 500; line-height: 30px; padding-top: 5px; } .surface-box .column input{ background: #1c1c1c; text-align: center; color: #fff; width: 150px; height: 28px; font-size: 14px; margin:0 10px; } .surface-box .column .lookup-btn{ background:#038692; color:#fff; height: 28px; width: 80px; border-radius: 100px; margin-left: 10px; } .surface-box .column .close-btn{ background:#038692; color:#fff; height: 28px; width: 80px; border-radius: 100px; margin-right: 15px; position: relative; cursor: pointer; } .surface-box .column .close-btn:after{ content: "╳"; width: 30px; height: 30px; position: absolute; right: -10px; top: 50%; margin-top: -15px; background: #fff; border-radius: 100px; color: #006070; line-height: 30px; text-align: center; font-size: 12px; font-weight: bold; } .surface-box .column .lookup-btn:active,.surface-box .column .close-btn:active{ background: #0b96a2; } .surface-box .table{ width: 100%; border-collapse: collapse; } .surface-box .table thead{ background: #fff; } .surface-box .table th{ text-align: center; border: 1px solid #dbdbdb; color: #444; font-size: 14px; font-weight: 500; padding: 5px 0; } .surface-box .table tr{ border-bottom: 1px solid #bab9b9; } .surface-box .table td{ text-align: center; color: #5c5c5c; padding:5px 0; height: 20px; font-size: 14px; } .surface-box .ft{ width: 100%; display: table; background: #1c2826; height: 70px; position: absolute; bottom: 0; left: 0; } .surface-box .item{ display: table-cell; text-align: center; color: #fff; vertical-align: middle; } .surface-box .item span{ display: inline-block; margin: 0 5px; padding: 5px; } .surface-box .item.btn span{ cursor: pointer; } .surface-box .item.btn span:active{ opacity: 0.5 } .modification-box{ width: 490px; position: absolute; left: 50%; top: 50%; -webkit-translate(-50%, -50%); -moz-translate(-50%,-50%); -ms-translate(-50%, -50%); -o-translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 999; border-radius: 6px; overflow: hidden; background: rgba(0,0,0,0.7); -moz-box-shadow: 0px 0px 8px #ccc; -webkit-box-shadow: 0px 0px 8px #ccc; box-shadow: 0px 0px 8px #ccc; display: none; } .modification-box .title{ background: #000; text-align: center; padding: 2px 0; margin-bottom: 30px; position: relative; } .modification-box .title i{ position: absolute; right: 10px; width: 33px; height: 33px; background: #bf0505; color: #000; line-height: 33px; text-align: center; border-radius: 100px; top:50%; margin-top: -16.5px; cursor: pointer; } .modification-box .title img{ width: 115px; } .modification-box .item{ color: #c3c3c3; width: 242px; margin: 0 auto; margin-top: 15px; position: relative; } .modification-box .item .icon{ width: 15px; height: 15px; position: absolute; right: 10px; top: 26px; opacity: 0.8; } .modification-box .item .seepassword{ cursor: pointer; } .modification-box .item label{ display: block; font-size: 14px; font-weight: 500; line-height: 1.2; } .modification-box .item input{ background: #000; border: 1px solid #5c5c5d; color: #fff; padding: 3px 10px; line-height: 30px; width: 220px; } .modification-box .item.btn-box{ margin-top: 20px; margin-bottom: 40px; text-align: center; width: 100%; } .modification-box .item.btn-box button{ width: 95px; margin: 0 15px; height:34px; border-radius: 100px; font-weight: 500; color: #fff; -moz-box-shadow: 0px 0px 2px #fff inset; -webkit-box-shadow: 0px 0px 2px #fff inset; box-shadow: 0px 0px 2px #fff inset; } .modification-box .item.btn-box button.determine{ background: #b5970f; } .modification-box .item.btn-box button.cancel{ background: #182c48; } .modification-box .item.btn-box button:active{ -moz-box-shadow: 0px 0px 8px #fff inset; -webkit-box-shadow: 0px 0px 8px #fff inset; box-shadow: 0px 0px 8px #fff inset; } .play{ position: fixed; width: 100%; height: 100%; background: #006f4a; min-height: 768px; min-width: 1280px; } .play .header{ position: fixed; width: 100%; height: 75px; background: rgba(0,0,0,0.8); } .play .header .affiche{ color: #fff; padding-left: 30px; overflow: hidden; height: 75px; } .play .header .affiche .title{ display: block; width:55px; background: #fe0006; font-weight: 500; text-align: center; line-height: 25px; margin: 25px 0; position: relative; } .play .header .affiche .title:after{ content: ""; width: 18px; height: 18px; background: url(../img/affiche-icon.png) no-repeat center center; position: absolute; right: -25px; top: 50%; margin-top: -9px; -webkit-background-size: cover; background-size: cover; } .play .header .affiche-box{ margin-left: 35px; display: inline-block; font-size: 14px; height: 75px; overflow-y: hidden; } .play .header .affiche-box li{ height: 40px; line-height: 40px; padding: 17.5px 0; font-weight: 500; } .play .header .right{ padding-right: 30px; } .play .header .right span{ font-size: 16px; font-weight: 500; color: #fff; line-height: 35px; padding: 20px 30px; height: 35px; display: inline-block; padding-left: 0; } .play .header .right .back-btn{ color: #eee; font-weight: 500; padding: 10px; padding-left: 24px; position: relative; font-size: 14px; } .play .header .right .back-btn:active{ opacity: 0.8; } .play .header .right .back-btn:after{ content: ""; position: absolute; top: 50%; left: 0; margin-top: -8px; width: 16px; height: 16px; background: url(../img/back-icon.png) no-repeat; -webkit-background-size: 100% auto; background-size: 100% auto; } .play .table-info{ position: absolute; top: 75px; right: 15px; color: #fff; background: rgba(1,27,18,0.9); border: 1px solid #a8a8a8; padding:7px 4px; font-size: 14px; font-weight: 500; padding-bottom: 35px; -moz-box-shadow: 0px 2px 24px #000; -webkit-box-shadow: 0px 2px 24px #000; box-shadow: 0px 2px 24px #000; } .play .table-info .btn-box{ margin-bottom: 10px; } .play .table-info .btn-box span{ width: 45px; display: inline-block; text-align: center; background: #1e2923; height: 25px; line-height: 25px; cursor: pointer; border-radius: 3px; -moz-box-shadow: 0px 1px 3px #eee inset; -webkit-box-shadow: 0px 1px 3px #eee inset; box-shadow: 0px 1px 3px #eee inset; overflow-y: hidden; } .play .table-info .btn-box span.on{ background: #2d412f; -moz-box-shadow: 0px 1px 18px #54ca9c inset; -webkit-box-shadow: 0px 1px 18px #54ca9c inset; box-shadow: 0px 1px 18px #54ca9c inset; } .play .table-info .btn-box span:last-child{ background: none; width: 25px; font-weight: bold; font-size: 18px; } .play .table-info ul{ display: none; } .play .table-info ul li{ border-bottom: 1px solid #252c29; padding-bottom: 5px; padding-top: 8px; margin: 0 10px; } .play .table-info ul label{ color: #818584; } .play .table-info ul a{ color: #818584; } .play .foot-box{ position: absolute; bottom: 0; left: 0; width:100%; background: #000; padding: 5px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .play .foot-box .left-box{ width: 60%; float: left; } .play .foot-box .left-box canvas{ display: block; background: #fff; } .play .foot-box .right-box{ width: 40%; right: 0; top: 0; float: left; display: table; } .play .foot-box .count{ width: 36%; display: table-cell; padding: 0px 20px; vertical-align: middle; } .play .foot-box .count ul{ color: #fff; width: 100%; } .play .foot-box .count ul li{ border: 1px solid #8c8c8c; display: table; width: 100%; border-top: none; } .play .foot-box .count ul li:first-child{ border-top: 1px solid #8c8c8c; } .play .foot-box .count ul li span{ display: table-cell; width: 40%; padding-left: 5%; font-size: 16px; font-weight: 500; vertical-align: middle; } .play .foot-box .timer{ width: 64%; display: table-cell; /*vertical-align: middle;*/ } .play .foot-box .timer-box{ border: 1px solid #8c8c8c; } .play .foot-box .timer-box .toplab{ width: 100%; text-align: center; font-size: 16px; color: #fff; font-weight: 500; border-collapse: collapse;   border-spacing:0; } .play .foot-box .timer-box .toplab tr{ border-bottom: 1px solid #2d2d2d; font-size: 14px; } .play .foot-box .timer-box .toplab tr td{ width: 16.66%; } .play .foot-box .timer-box .toplab .title td:nth-child(odd){ background: #6b0104; } .play .foot-box .timer-box .toplab .title td:nth-child(even){ background: #303231; } .play .foot-box .timer-box .toplab #alldown{ text-align: center; font-weight: 500; font-size: 14px; border-collapse: collapse; } .play .foot-box .timer-box .toplab .ask-box td{ position: relative; left: 0; } .play .foot-box .timer-box .toplab .ask-box .banker-ask button{ width: 65px; position: absolute; top: -14px; height: 30px; left:10px; background: #c33c3f; color: #eee; z-index: 9; } .play .foot-box .timer-box .toplab .ask-box .player-ask button{ width: 65px; position: absolute; top: -14px; height: 30px; left: 120px; background: #3b39f2; color: #fff; z-index: 9; } .play .foot-box .timer-box .toplab .ask-box button:active{ opacity: 0.8; } .play .foot-box .timer-box .toplab .banker-ask span{ width: 25px; height: 25px; position: absolute; left: 80px; top: -11px; background: #c33b3f; border-radius: 100px; } .play .foot-box .timer-box .toplab .banker-ask span:after{ content: ""; width: 20px; height: 20px; position: absolute; left: 35px; top: 0; border: 2.5px solid #c33b3f; border-radius: 100px; } .play .foot-box .timer-box .toplab .banker-ask span:before{ content: ""; height: 25px; position: absolute; left: 70px; top: 1px; border-left: 2.5px solid #c33b3f; border-radius: 100px; transform:rotate(30deg); -ms-transform:rotate(30deg); -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg); -o-transform:rotate(30deg); } .play .foot-box .timer-box .toplab .player-ask span{ width: 25px; height: 25px; position: absolute; left: 190px; top: -11px; background: #3b39f2; border-radius: 100px; } .play .foot-box .timer-box .toplab .player-ask span:after{ content: ""; width: 20px; height: 20px; position: absolute; left: 35px; top: 0; border: 2.5px solid #3b39f2; border-radius: 100px; } .play .foot-box .timer-box .toplab .player-ask span:before{ content: ""; height: 25px; position: absolute; left: 70px; top: 1px; border-left: 2.5px solid #3b39f2; border-radius: 100px; transform:rotate(30deg); -ms-transform:rotate(30deg); -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg); -o-transform:rotate(30deg); } .play .bet-box{ position: absolute; top: -65px; right: 20px; } .play .bet-box ul li{ float: left; width: 60px; height: 60px; margin: 2.5px; border-radius: 100px; -webkit-background-size: 100%; background-size: 100%; cursor: pointer; background-position: center center; } .play .bet-box ul li.jeton_10{ background-image:url(../img/jeton_10_pre.png); } .play .bet-box ul li.jeton_50{ background-image:url(../img/jeton_50_pre.png); } .play .bet-box ul li.jeton_100{ background-image:url(../img/jeton_100_pre.png); } .play .bet-box ul li.jeton_500{ background-image:url(../img/jeton_500_pre.png); } .play .bet-box ul li.jeton_1k{ background-image:url(../img/jeton_1k_pre.png); } .play .bet-box ul li.jeton_5k{ background-image:url(../img/jeton_5k_pre.png); } .play .bet-box ul li.jeton_1w{ background-image:url(../img/jeton_1w_pre.png); } .play.start .bet-box ul li.jeton_10{ background-image:url(../img/jeton_10_nor.png); } .play.start .bet-box ul li.jeton_50{ background-image:url(../img/jeton_50_nor.png); } .play.start .bet-box ul li.jeton_100{ background-image:url(../img/jeton_100_nor.png); } .play.start .bet-box ul li.jeton_500{ background-image:url(../img/jeton_500_nor.png); } .play.start .bet-box ul li.jeton_1k{ background-image:url(../img/jeton_1k_nor.png); } .play.start .bet-box ul li.jeton_5k{ background-image:url(../img/jeton_5k_nor.png); } .play.start .bet-box ul li.jeton_1w{ background-image:url(../img/jeton_1w_nor.png); } .play.start .bet-box ul li.jeton_10.on{ background-image:url(../img/jeton_10_sel.png); } .play.start .bet-box ul li.jeton_50.on{ background-image:url(../img/jeton_50_sel.png); } .play.start .bet-box ul li.jeton_100.on{ background-image:url(../img/jeton_100_sel.png); } .play.start .bet-box ul li.jeton_500.on{ background-image:url(../img/jeton_500_sel.png); } .play.start .bet-box ul li.jeton_1k.on{ background-image:url(../img/jeton_1k_sel.png); } .play.start .bet-box ul li.jeton_5k.on{ background-image:url(../img/jeton_5k_sel.png); } .play.start .bet-box ul li.jeton_1w.on{ background-image:url(../img/jeton_1w_sel.png); } .play .bet-box ul .btn{ float: left; width: 60px; margin-top: 18px; margin-bottom: 16px; margin-left: 15px; height:30px; color: #eee; background: #666; border: 1px solid #eee; font-weight: 600; border-radius: 4px; } .play.start .bet-box ul .btn{ background: #000; } .play.start .bet-box ul .btn:active{ background: #444; } /*直播视频窗*/ /*.play .flash-div{ width:70%; background: pink; }*/ /*直播视频窗-end*/ .play.start .brand-table{ position: absolute; top: -220px; left: 50%; width: 850px; height: 125px; -webkit-translate(-50%, 0); -moz-translate(-50%, 0); -ms-translate(-50%, 0); -o-translate(-50%, 0); transform: translate(-50%, 0); z-index: 99; } .play .brand-table .small{ width: 16%; height: 95px; float: left; margin-top: 32px; -webkit-background-size: 100%; background-size: 100%; background-repeat: no-repeat; background-position-x: center; background-position-y: bottom; cursor: pointer; position: relative; } .play .brand-table .big{ height: 125px; float: left; -webkit-background-size: 100%; background-size: 100%; background-repeat: no-repeat; background-position-x: center; background-position-y: bottom; cursor: pointer; position: relative; } .play .brand-table .playerpair{ margin-right: 5.05%; background-image: url(../img/playerpair.png); } .play .brand-table .bankerpair{ margin-left: 5.05%; background-image: url(../img/bankerpair.png) ; float: right; } .play .brand-table .player{ background-image: url(../img/player.png) ; width: 18.1%; float: left; } .play .brand-table .banker{ background-image: url(../img/banker.png); width: 18.8%; } .play .brand-table .tie{ margin: 0 2%; background-image: url(../img/tie.png); width: 17%; } .play.start .brand-table .playerpair:active{ background-image: url(../img/playerpair_on.png); } .play.start .brand-table .bankerpair:active{ background-image: url(../img/bankerpair_on.png) ; } .play.start .brand-table .player:active{ background-image: url(../img/player_on.png) ; } .play.start .brand-table .banker:active{ background-image: url(../img/banker_on.png); } .play.start .brand-table .tie:active{ background-image: url(../img/tie_on.png); } .play.start .brand-table .bet_box{ position: relative; } .play.start .brand-table .small i{ position: absolute; background-position: center; background-repeat: no-repeat; width: 40px; height: 25px; -webkit-background-size: 100%; background-size: 100%; top: 50%; left: 50%; margin-left: -20px; z-index: 1; } .play.start .brand-table .big i{ position: absolute; background-position: center; background-repeat: no-repeat; width: 40px; height: 25px; -webkit-background-size: 100%; background-size: 100%; top: 62%; left: 50%; margin-left: -20px; z-index: 1; } .play.start .brand-table .bet_box i.chip10{ background-image: url(../img/jeton_10_nor_fall.png); } .play.start .brand-table .bet_box i.chip50{ background-image: url(../img/jeton_50_nor_fall.png); } .play.start .brand-table .bet_box i.chip100{ background-image: url(../img/jeton_100_nor_fall.png); } .play.start .brand-table .bet_box i.chip500{ background-image: url(../img/jeton_500_nor_fall.png); } .play.start .brand-table .bet_box i.chip1k{ background-image: url(../img/jeton_1k_nor_fall.png); } .play.start .brand-table .bet_box i.chip5k{ background-image: url(../img/jeton_5k_nor_fall.png); } .play.start .brand-table .bet_box i.chip1w{ background-image: url(../img/jeton_1w_nor_fall.png); } /*龙虎*/ .longhu .foot-box .count{ padding-right: 0; } .longhu .foot-box .timer-box{ margin-left: 20px; min-width: 325px; } .longhu .foot-box .timer-box .toplab .ask-box .player-ask button{ left:85px; } .longhu .foot-box .timer-box .toplab .player-ask span{ left:155px; } .longhu .brand-table .player{ background-image: url(../img/hu-bet.png); } .longhu.start .brand-table .player:active{ background-image: url(../img/hu_bet_on.png); } .longhu .brand-table .banker{ background-image: url(../img/long-bet.png); background-position: center; width:18%; } .longhu.start .brand-table .banker:active{ background-image: url(../img/long-bet_on.png); } .longhu .brand-table .small{ cursor: inherit; } /*后边的增加*/ .play .table-message{ position: absolute; top: 95px; left: 20px; color: #eee; padding: 7px 4px; font-size: 14px; width: 180px; height: 273px; } .play .table-message .box{ font-weight: 16px; text-align: center; border: 1px solid #eee; height: 180px; line-height: 1.5; margin-bottom: 20px; background: rgba(1,27,18,0.5); line-height: 90px; font-size:20px; }