/*登录 注册*/ #loading{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background:url(../img/loading_bg_1.jpg) #191919 bottom center no-repeat; -webkit-background-size: 100%; background-size: 100%; } #video_loading{ position:absolute; top: 50%; left: 50%; margin-top: -25px; margin-left:-25px; z-index: 9999; display:none; } .login,.register{ height: 100vh; background: url(../img/hc_bg.png) no-repeat center top #191919; -webkit-background-size: 100% auto; background-size: 100% auto; position: relative; } .login .logo{ width: 4.5rem; margin: 0 auto; display: block; padding-top: 1rem; } .login .title{ color: #fff; font-weight: 500; font-size: 0.6rem; text-align: center; padding-top: 0.4rem; padding-bottom: 0.2rem; } .login .input-box,.register .input-box{ width: 7.5rem; margin: 0.5rem auto; height: 36px; position: relative; overflow: hidden; background: url(../img/hc_input_bg.png); -webkit-background-size: 100% 100%; background-size: 100% 100%; padding: 5px 0; } .login .input-box input,.register .input-box input{ width: 6rem; height: 36px; line-height: 36px; background: none; font-size: 16px; color: #000; font-weight: 500; padding-left: 1.6rem; display: block; text-shadow: 1px 1px 1px #eee; } .login .input-box input:-webkit-autofill,.register .input-box input:-webkit-autofill{ /*-webkit-box-shadow: 0 0 0px 1000px #2b7335 inset !important; background-color: rgba(0, 0, 0, 0) !important; background-image: none !important; -webkit-tap-highlight-color:rgba(0,0,0,0) !important;*/ } .login .input-box input::-webkit-input-placeholder,.register .input-box input::-webkit-input-placeholder{ color: #423500; } .login .input-box .icon-img,.register .input-box .icon-img{ position: absolute; width: 30px; height: 30px; left: 0.5rem; top: 50%; margin-top: -16px; pointer-events: none; } .login .input-box i.user,.register .input-box i.user{ background: url(../img/icon-user.png?1) no-repeat center center; -webkit-background-size: 20px auto; background-size: 20px auto; } .login .input-box i.password,.register .input-box i.password{ background: url(../img/icon-password.png?1) no-repeat center center; -webkit-background-size: 20px auto; background-size: 20px auto; } .loading{ margin-top: 2rem; text-align: center; color: #fff; font-size: 0.3rem; } .loading .lin1{ width: 7rem; height: 8px; background: #ccc; margin:0 auto; border-radius: 10px; position: relative; overflow: hidden; } .loading .lin1 .lin2{ width:0; left: 0; top: 0; height:100%; border-radius: 10px; background:#faf773; } .clause{ width: 6rem; margin: 0 auto; color: #fff; font-size: 13px; margin-bottom: 1.2rem; padding-left: 1.5rem; position: relative; font-weight: 500; } .clause .checkbox{ position: absolute; webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 0.5rem; left: 0.1rem; top: 50%; margin-top: -0.25rem; } .clause .checkbox input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; opacity: 0; cursor: pointer; } .clause .checkbox label { width: 1.1rem; height: 0.5rem; background: #544e3e; position: relative; display: inline-block; border-radius: 100rem; -webkit-transition: 0.4s; transition: 0.4s; } .clause .checkbox label:after { content: ''; position: absolute; width: 0.5rem; height: 0.5rem; border-radius: 100%; left: 0; top: 0px; z-index: 2; background: #e3d883; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -webkit-transition: 0.4s; transition: 0.4s; } .clause .checkbox input:checked + label { background: #544e3e; } .clause .checkbox input:checked + label:after { left: 0.6rem; } .login .login-btn,.register .login-btn{ width: 7.5rem; height: 1rem; display: block; margin: 0 auto; border-radius: 100rem; font-size: 0.45rem; font-weight: 500; background: url(../img/hc_login_btn.png); -webkit-background-size: 100% 100%; background-size: 100% 100%; color: #504c31; box-shadow: 0px 1px 10px #001f00; text-shadow:1px 1px 1px #fff; } .register .login-btn{ margin-top: 1.5rem; } .login .login-btn:active,.register .login-btn:active{ opacity: 0.8; } .register .title{ color: #30d9c4; font-size: 0.8rem; font-weight: 500; text-align: center; padding-top: 3.5rem; padding-bottom: 1.5rem; } .register .title h2{ color: #fff; } .toregister{ color: #fff; font-size: 0.36rem; font-weight: 500; margin-top: 1rem; display: inline-block; border-bottom: solid 1px #fff; padding: 0.1rem 0; } .tologin{ position: absolute; z-index: 99; width: 1.2rem; height: 1.2rem; top: 0.6rem; left: 0.6rem; background: url(../img/tologin.png) no-repeat center center; -webkit-background-size: cover; background-size: cover; } .tologin:active{ opacity: 0.8; } /*游戏大厅*/ .hall{ background:url(../img/hc_hall_bg.png) bottom center #191919 no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; min-height: 100vh; overflow: auto; } .hall.game-list{ background: url(../img/hc_hall.jpg) no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; } .hall .hall-bg{ min-height: 100vh; } .hall .game_tab{ padding-top: 1.8rem; } .hall .game_tab .item{ display: block; width: 5.5rem; margin: 0 auto; position: relative; } .hall .game_tab .item:after{ content: ""; position: absolute; left: -0.3rem; top: -0.55rem; width: 2rem; height: 2rem; background:url(../img/bright_1.png)no-repeat; -webkit-background-size: 100%; background-size: 100%; z-index: 1; } .hall .game_tab .item .num{ position: absolute; color: #fff09b; font-size: 14px; top: 50%; margin-top: 0.1rem; left: 2rem; } .hall .game_tab .item .lightY{ width: 6.4rem; height: 100%; top: 0; left: 50%; margin-left: -3.2rem; border-radius: 1rem; overflow: hidden; position: absolute; } .hall .game_tab .item .lightY:before{ position: absolute; content: ""; width: 100%; height: 100%; top: 0; z-index: 2; background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0)); background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0)); transform: skewx(-25deg); -o-transform: skewx(-25deg); -moz-transform: skewx(-25deg); -webkit-transform: skewx(-25deg); -webkit-animation: lightY 3s 0s infinite; animation: lightY 3s 0s infinite; } .hall .hall-bg .line{ border: 0.05rem dashed #cb9c53; margin:0 0.4rem; margin-bottom: 0; min-height: 95vh } .hall .head{ height: 1.35rem; position: fixed; top: 0; left: 0; width: 100%; background: url(../img/hc_nav_bg.jpg?1) repeat-x; -webkit-background-size: auto 100%; background-size: auto 100%; font-size: 0.5rem; color: #000; text-align: center; line-height: 1.35rem; font-weight: 500; text-shadow: 1px 1px 1px #fff; z-index: 999; -moz-box-shadow: 0px 1px 10px rgba(3, 12, 3, 0.31); box-shadow: 0px 1px 10px rgba(3, 12, 3, 0.31); } .hall .head .toback{ position: absolute; width: 0.9rem; height: 0.9rem; background: url(../img/hc_back_btn.png) no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; left: 0.35rem; top: 50%; margin-top: -0.45rem; } .hall .head .language{ position: absolute; width: 1.5rem; height: 0.9rem; background-size: 100% 100%; right: 0.35rem; color:#191919; } .hall .language-box{ position:fixed; right:0.4rem; width:3rem; z-index:1000; margin-top:1rem; background:#424242; text-align:center; display:none; } .hall .language-box a{ font-size:16px; display:block; color:#fff; padding:0.2rem 0; } .hall .language-box .lang_bg{ background:#9a9a9a; } .hall .head a:active{ opacity: 0.6; } .hall .head .signout{ position: absolute; width: 0.9rem; height: 0.9rem; background: url(../img/hc_back_btn.png) no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; left: 0.35rem; top: 50%; margin-top: -0.45rem; } .hall .head .signout:active{ opacity: 0.6; } .hall .touser{ position: absolute; width: 0.9rem; height: 0.9rem; background: url(../img/user_icon.png) no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; right: 0.35rem; top: 50%; margin-top: -0.45rem; text-shadow: 1px 1px 1px #000; } .hall .tab-box{ margin: 0.3rem; margin-top: 1.8rem; position: relative; z-index: 8; } .hall .tab-box .item{ border: 1px solid #d2b523; border-radius: 5px; -moz-box-shadow: 0px 1px 10px rgba(3, 12, 3, 0.8); box-shadow: 0px 1px 10px rgba(3, 12, 3, 0.8); color: #191919; overflow: hidden; font-weight: 500; background: #fcf8da; display: block; margin: 0.5rem 0; } .hall .tab-box .item .canvas-box{ position: relative; } .hall .tab-box .item .canvas-box .mask{ position: absolute; width: 100%; height: 100%; text-align: center; color: #fff; background: #000; opacity: 0.6; top: 0; left: 0; font-weight: 500; font-size: 1rem; line-height: 3.5; } .hall .tab-box .item canvas{ display: block; } .hall .tab-box .item .top{ font-size: 0.38rem; padding: 0.2rem; background: url(../img/hc_table_lan_bg.png) no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; } .hall .tab-box .item .foot{ display: table; width:100%; text-align: center; font-size: 0.35rem; padding: 0.1rem 0; background: url(../img/canvas-foot.jpg) no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; } .hall .tab-box .item .foot span{ display: table-cell; } .hall .tab-box .item .foot span.red{color: #ad5c58} .hall .tab-box .item .foot span.blue{color: #00d2ff} .hall .tab-box .item .foot span.green{color: #1bdf4b} .game-list .hall-bg .line{ /*background: url(../img/games-tree.png) no-repeat center top; -webkit-background-size: 8rem; background-size: 8rem;*/ } .game-list .hall-bg .list{ padding:0 0.2rem; width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing:border-box; margin-top: 0.1rem; } .game-list .hall-bg .banner{ padding-top: 0.8rem; } .game-list .hall-bg .list .item{ width: 50%; float: left; text-align: center; } .game-list .hall-bg .item:active{ opacity: 0.8; } .game-list .list-box{ margin: 0.3rem; margin-top: 7.5rem; position: relative; z-index: 8; } .game-list .list-box .list{ display: block; width: 6rem; margin: 0.4rem auto; position: relative; } .game-list .list-box .list:active{ opacity: 0.9; } .game-list .dodge{ background: url(../img/dodge.png) no-repeat; -webkit-background-size: 100%; background-size: 100%; position: absolute; width: 2rem; height: 2rem; } .game-list .hall-bg .dodge{ top: 3.3rem; right: 0.5rem; animation-iteration-count: infinite; animation-duration: 4s; -webkit-animation-duration: 4s; animation-delay: 0s; -webkit-animation-delay: 0s; } .game-list .list-box .dodge{ position: absolute; z-index: -1; animation-iteration-count: infinite; animation-duration: 4s; -webkit-animation-duration: 4s; animation-delay: 0.2s; -webkit-animation-delay: 0.2s; width: 4rem; height: 4rem; top: -1rem; left: -1rem; } .game-list .list-box .longhu .dodge{ width: 2rem; height: 2rem; left: 2.5rem; top: auto; bottom: -0.55rem; animation-delay: 0.5s; -webkit-animation-delay: 0.5s; } /*游戏页*/ .play{ background:#1f542c; } .play .video-box{ position: relative; overflow: hidden; } .play .video-box .countdown{ position: absolute; bottom: 0.1rem; left: 0.3rem; font-size: 0.7rem; background: url(../img/time_bg.png) no-repeat; width: 1.5rem; height: 1.5rem; -webkit-background-size: 100%; background-size: 100%; text-align: center; line-height: 1.5rem; color: #f1e537; -webkit-animation: bounceIn .5s 0s ease both; -moz-animation: bounceIn .5s 0s ease both; display: none; font-weight: 500; z-index:99; } .play .video-box .countdown.slow{ -webkit-animation-duration: 1s;animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: verical-slow; animation-name: verical-slow; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .play .video-box .change-tab{ position: fixed; width: 1.8rem; top: 0.2rem; left: 0.2rem; z-index: 999; } .play .video-box .change-tab:active{ opacity: 0.8; } .tab-info{ color: #fff; position: absolute; right: 0; top: 0; text-align: right; font-weight: 500; text-shadow: 1px 1px 1px #000; font-size: 0.35rem; background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)); padding: 0.2rem; z-index: 10; } .tab-info>*{ display: block; } .tab-info h3{ color: #fffd00; font-size: 0.35rem; } .play .video-box button{ position: absolute; right: 0.3rem; background: #000; width: 1rem; height: 1rem; z-index: 10; } .play .video-box .videoH5{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .play .video-box .mask-bg{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 11; background: url(../img/play-btn.png) no-repeat center center rgba(0,0,0,0.5); } .play .video-box button.play-btn{ top:50%; margin-top: -0.8rem; background: url(../img/play-btn.png) no-repeat center center; -webkit-background-size: cover; background-size: cover; } .play .video-box button.voice-btn{ top: 50%; /*margin-top: 0.8rem;*/ background: url(../img/voice-btn.png) no-repeat center center; -webkit-background-size: cover; background-size: cover; } .play .video-box button.enlarge-btn{ bottom: 0.5rem; background: url(../img/enlarge-btn.png) no-repeat center center; -webkit-background-size: 1rem; background-size: 1rem; } .play .video-box .linechange{ cursor: pointer; position: absolute; left: 0; top: 50%; font-size: 0.32rem; color: orange; padding:0.5rem 0; text-align: center; opacity: 0.8; background-color: rgba(0,0,0,0.5); text-shadow: 1px 1px 1px #000; line-height: 1; width: 0.5rem; text-align: center; border-top-left-radius: 0rem; border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; border-bottom-left-radius: 0rem; transform: translate(0, -50%); -moz-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); } .play .video-box .linebox{ background-color: rgba(0,0,0,0.5); position: absolute; font-size: 0.32rem; color: orange; z-index: 999; bottom:0; left: -100%; display: none; z-index: 999; } .play .video-box .linebox span,.play .video-box .linebox p{ display: block; padding: 0.2rem 0.3rem; border-bottom: 1px solid #4c412c; position: relative; opacity: 0.8; } .play .video-box .linebox p.audio.on{ background: #e09621; color: #fff; } .play .video-box .linebox .active:before{ content: ""; width:0.15rem; height: 0.15rem; border-radius: 1rem; position: absolute; background-color: orange; top: 50%; left:0.08rem; margin-top: -0.07rem; } .play .video-box .linebox .active{ opacity: 1; } .play .control-box{ width: 100%; overflow: hidden; } .play .bet-box{ border: 2px dashed #7d4c2e; border-top: none; border-bottom-right-radius: 0.65rem; border-bottom-left-radius: 0.65rem; position: relative; margin-left:2px; margin-right:2px; } .play .bet-box .usermenoy{ position: absolute; top: 0.05rem; left: 0.65rem; color: #f1e537; background: #000; font-size: 0.34rem; padding:0 0.15rem; border-radius: 0.1rem; } .play .bet-box .usermenoy:after{ content: ""; position: absolute; width: 0.5rem; height: 0.5rem; background: url(../img/menoy-icon.png) no-repeat; left: -0.58rem; top: 0; -webkit-background-size: 100%; background-size: 100%; } .play .bet-box .main{ height: 4.5rem; background: url(../img/bet-bg.jpg) repeat; border-bottom-right-radius: 0.65rem; border-bottom-left-radius: 0.65rem; } .play .bet-box .main .box{ float: left; width: 30%; height:100%; position: relative; } .play .bet-box .main .box:nth-of-type(2){ width: 40%; } .play .bet-box .main .list{ width: 100%; height: 50%; position: relative; } .play .bet-box .main .player{ width: 80%; height: 80%; position: absolute; top: 50%; left: 50%; margin-left: -40%; margin-top: -46%; background: url(../img/player-font.png) no-repeat center top; -webkit-background-size: 1rem; background-size: 1rem; transition:0.1s all; z-index: 9; } .play .bet-box .main .player:active{ background-image: url(../img/player-font-active.png) } .play .bet-box .main .player .proportion,.play .bet-box .main .banker .proportion{ position: absolute; color: #fff; font-size: 0.35rem; font-weight: 500; width: 100%; text-align: center; bottom: 1.2rem; transition:0.1s all; opacity: 0.6; } .play .bet-box .main .player:active .proportion{ opacity: 1; } .play .bet-box .main .banker:active .proportion{ opacity: 1; } .play .bet-box .main .player .menoy,.play .bet-box .main .banker .menoy{ width: 1.3rem; position: absolute; bottom: 0.2rem; color: #fff; text-align: center; font-size: 0.3rem; background: url(../img/money-bg.png) no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; padding-top: 0.02rem; padding-bottom: 0.15rem; left: 50%; margin-left: -0.65rem; font-weight: 500; color: #f1e537; } .play .bet-box .main .tie{ width: 2.2rem; height: 2rem; border: 1px solid rgba(193,193,193,0.7); border-radius: 5px; position: absolute; left:50%; margin-left: -1.1rem; bottom: 0.05rem; background: url(../img/tie-font.png) no-repeat center 4px; -webkit-background-size: 0.58rem; background-size: 0.58rem; transition:0.1s all; z-index: 9; } .play .bet-box .main .tie:active{ background-image: url(../img/tie-font-active.png); border-color: rgba(241, 229, 55, 0.7); } .play .bet-box .main .tie .proportion{ position: absolute; color: #fff; font-size: 0.35rem; font-weight: 500; width: 100%; text-align: center; bottom: 0.6rem; opacity: 0.6; } .play .bet-box .main .tie:active .proportion{ opacity: 1; } .play .bet-box .main .tie .menoy{ width: 1.3rem; position: absolute; bottom:0; color: #fff; text-align: center; font-size: 0.3rem; background: url(../img/money-bg.png) no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; padding-top: 0.02rem; padding-bottom: 0.15rem; left: 50%; margin-left: -0.65rem; font-weight: 500; color: #f1e537; } .play .bet-box .main .banker{ width: 80%; height: 80%; position: absolute; top: 50%; left: 50%; margin-left: -40%; margin-top: -46%; background: url(../img/banker-font.png) no-repeat center top; -webkit-background-size: 1rem; background-size: 1rem; z-index: 9; } .play .bet-box .main .banker:active{ background-image: url(../img/banker-font-active.png); } .play .bet-box .main .list .ppair,.play .bet-box .main .list .bpair{ width: 50%; height:100%; float: left; position: relative; } .play .bet-box .main .list .ppair{ background: url(../img/ppair-font.png) no-repeat center 10px; -webkit-background-size: 1.25rem; background-size: 1.25rem; transition:0.1s all; } .play .bet-box .main .list .ppair:active{ background-image: url(../img/ppair-font-active.png); } .play .bet-box .main .list .ppair:active .proportion{ opacity: 1; } .play .bet-box .main .list .bpair{ background: url(../img/bpair-font.png) no-repeat center 10px; -webkit-background-size: 1.25rem; background-size: 1.25rem; transition:0.1s all; } .play .bet-box .main .list .bpair:active{ background-image: url(../img/bpair-font-active.png); } .play .bet-box .main .list .bpair:active .proportion{ opacity: 1; } .play .bet-box .main .list .ppair .proportion,.play .bet-box .main .list .bpair .proportion{ position: absolute; color: #fff; font-size: 0.35rem; font-weight: 500; width: 100%; text-align: center; bottom: 0.9rem; z-index: 1; opacity: 0.6; transition:0.1s all; } .play .bet-box .main .list .ppair .menoy,.bet-box .main .list .bpair .menoy{ width: 1.3rem; position: absolute; bottom:0.2rem; color: #fff; text-align: center; font-size: 0.3rem; background: url(../img/money-bg.png) no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; padding-top: 0.02rem; padding-bottom: 0.15rem; left: 50%; margin-left: -0.65rem; font-weight: 500; color: #f1e537; } .play .bet-box .main .item .after-bet,.play .bet-box .main .item .before-bet{ width: 90%; height: 60%; margin: 0 auto; position: absolute; top: 0; left: 50%; margin-left: -45%; } .play .bet-box .main .after-bet i,.play .bet-box .main .before-bet i{ width: 1.2rem; height: 0.55rem; position: absolute; top: 0; left: 50%; margin-top: 1.4rem; margin-left: -0.64rem; background-image: url(../img/chip.png); -webkit-background-size: 10rem auto; background-size: 10rem auto; z-index: 9; } .play .bet-box .main .tie .after-bet i,.play .bet-box .main .tie .before-bet i{ width: 1.2rem; height: 0.55rem; position: absolute; top: 0; left: 50%; margin-top: 1rem; margin-left: -0.64rem; background-image: url(../img/chip.png); -webkit-background-size: 10rem auto; background-size: 10rem auto; z-index: 20; } .play .bet-box .main .list .item .after-bet i,.play .bet-box .main .list .item .before-bet i{ width: 1.2rem; height: 0.55rem; position: absolute; top: 0; left: 50%; margin-top: 1rem; margin-left: -0.64rem; background-image: url(../img/chip.png); -webkit-background-size: 10rem auto; background-size: 10rem auto; z-index: 20; } .play .bet-box .main .item .temporary{ color: #fff; font-size: 0.3rem; text-align: center; position: absolute; width: 100%; bottom: 0; left: 0; text-shadow: 1px 1px 1px #000; } .play .bet-box .main .tie .temporary{ bottom: -8px; } .play .bet-box .main .before-bet i{ -webkit-animation: chip_player .5s 0s ease both; -moz-animation: chip_player .5s 0s ease both; } .play .bet-box .main .after-bet .chip-5,.play .bet-box .main .before-bet .chip-5{ background-position: -0.12rem -7.93rem; } .play .bet-box .main .after-bet .chip-10,.play .bet-box .main .before-bet .chip-10{ background-position: -5.04rem -6.43rem; } .play .bet-box .main .after-bet .chip-20,.play .bet-box .main .before-bet .chip-20{ background-position: -6.27rem -7.15rem; } .play .bet-box .main .after-bet .chip-50,.play .bet-box .main .before-bet .chip-50{ background-position: -1.36rem -7.93rem; } .play .bet-box .main .after-bet .chip-100,.play .bet-box .main .before-bet .chip-100{ background-position:-2.6rem -6.43rem; } .play .bet-box .main .after-bet .chip-200,.play .bet-box .main .before-bet .chip-200{ background-position: -5.04rem -7.93rem; } .play .bet-box .main .after-bet .chip-500,.play .bet-box .main .before-bet .chip-500{ background-position: -5.04rem -7.15rem; } .play .bet-box .main .after-bet .chip-1k,.play .bet-box .main .before-bet .chip-1k{ background-position: -0.15rem -6.43rem; } .play .bet-box .main .after-bet .chip-2k,.play .bet-box .main .before-bet .chip-2k{ background-position: -2.57rem -7.93rem; } .play .bet-box .main .after-bet .chip-5k,.play .bet-box .main .before-bet .chip-5k{ background-position: -3.8rem -7.93rem; } .play .bet-box .main .after-bet .chip-1w,.play .bet-box .main .before-bet .chip-1w{ background-position: -6.27rem -7.92rem; } .play .bet-box .main .after-bet .chip-2w,.play .bet-box .main .before-bet .chip-2w{ background-position: -3.81rem -6.43rem; } .play .bet-box .main .after-bet .chip-5w,.play .bet-box .main .before-bet .chip-5w{ background-position: -6.27rem -7.15rem; } .play .bet-box .main .after-bet .chip-5w,.play .bet-box .main .before-bet .chip-20w{ background-position: -6.26rem -6.43rem; } .play .bet-box .main .after-bet .chip-5w,.play .bet-box .main .before-bet .chip-50w{ background-position: -1.355rem -6.43rem; } .play .chip-box{ padding: 0.05rem 0; text-align: center; position: relative; } .play .chip-box .swiper-container{ width: 6rem; margin: 0 auto; height: 1.3rem; padding: 0.12rem; } .play .chip-box li{ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background-image:url(../img/chip.png); -webkit-background-size: 6.4rem auto; background-size: 6.4rem auto; position: relative; z-index: 1; } .play .chip-box li.active{ transform:scale(1.2); transition:all 0.1s; } .play .chip-box li.active:before{ content: ""; position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; -webkit-box-shadow: 0px 0px 10px #fff; box-shadow: 0px 0px 10px #fff; border-radius: 100%; z-index: 2; } .play .chip-box .chip-5{ background-position: -0.09rem -2.68rem; } .play .chip-box .chip-10{ background-position: -0.04rem -0.05rem; } .play .chip-box .chip-20{ background-position: -0.04rem -1.38rem; } .play .chip-box .chip-50{ background-position: -1.28rem -2.68rem; } .play .chip-box .chip-100{ background-position: -1.28rem -0.05rem; } .play .chip-box .chip-200{ background-position: -1.3rem -1.38rem; } .play .chip-box .chip-500{ background-position: -2.52rem -2.68rem; } .play .chip-box .chip-1k{ background-position: -2.52rem -0.05rem; } .play .chip-box .chip-2k{ background-position: -2.52rem -1.38rem; } .play .chip-box .chip-5k{ background-position: -3.78rem -2.68rem; } .play .chip-box .chip-1w{ background-position: -3.78rem -0.05rem; } .play .chip-box .chip-2w{ background-position: -3.78rem -1.38rem; } .play .chip-box .chip-5w{ background-position: -3.78rem -2.68rem; } .play .chip-box .clear-btn{ width:1.65rem; height: 0.7rem; position: absolute; background: url(../img/clear-btn.png) no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; left: 0.2rem; top: 50%; margin-top: -0.33rem; opacity: 0.8; } .play .chip-box .ensure-btn{ width:1.65rem; height: 0.7rem; position: absolute; background: url(../img/ensure-btn.png) no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; right: 0.2rem; top: 50%; margin-top: -0.33rem; opacity: 0.8; } .play .chip-box .clear-btn:active,.play .chip-box .ensure-btn:active{ opacity: 1; } .play .head-box { color: #fff; font-size: 0.36rem; background: url(../img/billhead-bg.jpg) repeat-x; height: 0.8rem; line-height: 0.85rem; text-shadow: 1px 1px 1px #000; font-weight: 500; position: relative; -webkit-background-size: auto 100%; background-size: auto 100%; } .play .head-box span{ padding: 0 0.1rem; } .play .ask-box{ position: absolute; top: 50%; right: 0.2rem; background: url(../img/ask-bg.png); -webkit-background-size: 100% 100%; background-size: 100% 100%; width: 2.8rem; margin-top: -0.31rem; } .play .ask-box button{ float: left; background: none; width: 50%; height: 0.65rem; line-height:0.64rem; color: #fff; font-size: 0.3rem; font-weight: 500; text-align: center; } .play .head-box .triangle-btn{ width: 0.6rem; height: 0.5rem; background: url(../img/triangle-btn.png) no-repeat; -webkit-background-size: 100%; background-size: 100%; position: absolute; top: 50%; margin-top: -0.22rem; right: 0.5rem; } .play .canvas-box{ background: #cbf0cd; width: 100%; overflow: hidden; } .play .canvas-box canvas{ display: block; } .play .maskResult{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: none; z-index: 1000; display: none; pointer-events: none; } .play .maskResult .item { position: absolute; width: 2.5rem; height: 2.5rem; background: url(../img/wl_box1.png) no-repeat top left; -webkit-background-size: 5rem 5rem; background-size: 5rem 5rem; z-index: 20; overflow: hidden; left: 50%; top: 0; pointer-events: none; } .play .maskResult .player-card { background-position: 0 -0.02rem; margin-left: -4rem; } .play .maskResult .player-card.win{ background-position: 0rem -2.51rem; -webkit-backface-visibility: visible!important; backface-visibility: visible!important; -webkit-animation-name: flipInY; animation-name: flipInY -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .play .maskResult .banker-card { background-position: -2.5rem 0rem; margin-left: 1.5rem; } .play .maskResult .banker-card.win{ background-position: -2.5rem -2.51rem; -webkit-backface-visibility: visible!important; backface-visibility: visible!important; -webkit-animation-name: flipInY; animation-name: flipInY -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .play .maskResult .tie-card { background: url(../img/wl_box2.png) no-repeat; -webkit-background-size: 2.4rem 2.4rem; background-size: 2.4rem 2.4rem; width: 2.4rem; height: 2.4rem; position: absolute; top: 50%; left: 50%; margin-left: -1.25rem; margin-top: -0.65rem; -webkit-animation: bounceIn 1s 0s ease both; -moz-animation: bounceIn 1s 0s ease both; display: none; } .play .result{ position: fixed; width:100%; bottom:-100%; left: 0; overflow: hidden; opacity: 0; z-index: 1000; } .play .result .box{ background: rgba(31, 84, 44,0.8); margin: 0.2rem; padding: 0.2rem 0; border: 0.05rem solid #f2d589; border-radius: 0.1rem; color: #efc91a; text-shadow: 1px 1px 1px #000; font-size: 0.35rem; font-weight: 500; text-align: center; position: relative; box-shadow: 0px 10px 20px #000; -moz-box-shadow: 0px 10px 20px #000; } .play .result .box .off-btn{ position: absolute; width: 0.9rem; height: 0.9rem; top: 0.1rem; right: 0.1rem; background: url(../img/btn_close_nor.png) no-repeat; -webkit-background-size: cover; background-size: cover; z-index: 99; } .play .result .box .off-btn:active{ opacity: 0.8; } .play .result .box .item{ width: 30%; height: 100%; position: relative; } .play .result .box .item .type span{ display: block; font-size: 0.5rem; color: #dfe677; line-height: 1.5; } .play .result .box .item .type{ padding-top: 2.5rem; background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; } .play .result .box .item .type.win{ background-image: url(../img/icon_win.png); } .play .result .box .item .type.lose{ background-image: url(../img/icon_lose.png); } .play .result .box .item .type.tie{ background-image: url(../img/icon_tie.png); } .play .result .box .data{ width: 70%; } .play .result .box table{ width: 85%; border-collapse: collapse; table-layout: fixed; } .play .result .box table td{ padding: 0.05rem 0.1rem; } .play .result .box table tr:first-child{ font-size: 0.4rem; } .play .result .box table tr:last-child{ border-top: 1px solid #cbf0cd; font-weight: 800; color: #dfe677; } .play audio{ opacity: 0; position: absolute; bottom: 0; left: 0; } /*龙虎模板*/ .play .longhu { height: 4.5rem; background: url(../img/bet-bg.jpg); border-bottom-right-radius: 0.65rem; border-bottom-left-radius: 0.65rem; } .play .longhu .box{ float: left; width: 33.33%; height: 100%; position: relative; } .play .longhu .banker{ background: url(../img/lh_btn_long_pre.png) no-repeat center center; -webkit-background-size: 90%; background-size: 90%; } .play .longhu .tie{ background: url(../img/lh_btn_tie_dis.png) no-repeat center center; -webkit-background-size: 90%; background-size: 90%; } .play .longhu .player{ background: url(../img/lh_btn_hu_nor.png) no-repeat center center; -webkit-background-size: 95%; background-size: 95%; } .play .longhu .before-bet{ width: 2.4rem; height: 2.4rem; margin: 0 auto; margin-top: 1rem; position: relative; } .play .longhu .after-bet{ width: 2.4rem; height: 2.4rem; position: absolute; left: 50%; margin-left: -1.2rem; margin-top: 1rem; } .play .longhu .menoy { width: 1.3rem; position: absolute; bottom: 0.2rem; color: #fff; text-align: center; font-size: 0.3rem; background: url(../img/money-bg.png) no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; padding-top: 0.02rem; padding-bottom: 0.15rem; left: 50%; margin-left: -0.65rem; font-weight: 500; color: #f1e537; } .play .longhu .temporary { color: #fff; font-size: 0.3rem; text-align: center; position: absolute; width: 100%; bottom: 0; left: 0; text-shadow: 1px 1px 1px #000; } /*.play .longhu .after-bet i,.play .longhu .before-bet i{ width: 0.5rem; height: 0.5rem; position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; background-size: cover; z-index: 99; text-align: center; color: #fff; text-shadow: 1px 1px 1px #555; line-height: 0.5rem; font-size: 0.25rem; }*/ .play .longhu .after-bet i,.play .longhu .before-bet i{ width: 1.2rem; height: 0.55rem; position: absolute; top: 0; left: 50%; margin-top: 1.4rem; margin-left: -0.64rem; background-image: url(../img/chip.png); -webkit-background-size: 10rem auto; background-size: 10rem auto; z-index: 9; } /*.play .longhu .before-bet i{ -webkit-animation: chip_player .5s 0s ease both; -moz-animation: chip_player .5s 0s ease both; } .play .longhu .after-bet .chip-10,.play .longhu .before-bet .chip-10{ background-image: url(../img/chip-10.png); } .play .longhu .after-bet .chip-100,.play .longhu .before-bet .chip-100{ background-image: url(../img/chip-100.png); } .play .longhu .after-bet .chip-500,.play .longhu .before-bet .chip-500{ background-image: url(../img/chip-500.png); } .play .longhu .after-bet .chip-1k,.play .longhu .before-bet .chip-1k{ background-image: url(../img/chip-1k.png); } .play .longhu .after-bet .chip-5k,.play .longhu .before-bet .chip-5k{ background-image: url(../img/chip-5k.png); } */ .play .longhu .before-bet i{ -webkit-animation: chip_player .5s 0s ease both; -moz-animation: chip_player .5s 0s ease both; } .play .longhu .after-bet .chip-5,.play .longhu .before-bet .chip-5{ background-position: -0.12rem -7.93rem; } .play .longhu .after-bet .chip-10,.play .longhu .before-bet .chip-10{ background-position: -5.04rem -6.43rem; } .play .longhu .after-bet .chip-20,.play .longhu .before-bet .chip-20{ background-position: -6.26rem -7.15rem; } .play .longhu .after-bet .chip-50,.play .longhu .before-bet .chip-50{ background-position: -1.35rem -7.93rem; } .play .longhu .after-bet .chip-100,.play .longhu .before-bet .chip-100{ background-position:-2.58rem -6.43rem; } .play .longhu .after-bet .chip-200,.play .longhu .before-bet .chip-200{ background-position: -5.02rem -7.93rem; } .play .longhu .after-bet .chip-500,.play .longhu .before-bet .chip-500{ background-position: -5.04rem -7.15rem; } .play .longhu .after-bet .chip-1k,.play .longhu .before-bet .chip-1k{ background-position: -0.12rem -6.43rem; } .play .longhu .after-bet .chip-2k,.play .longhu .before-bet .chip-2k{ background-position: -2.57rem -7.93rem; } .play .longhu .after-bet .chip-5k,.play .longhu .before-bet .chip-5k{ background-position: -3.8rem -7.93rem; } .play .longhu .after-bet .chip-1w,.play .longhu .before-bet .chip-1w{ background-position: -6.26rem -7.92rem; } .play .longhu .after-bet .chip-2w,.play .longhu .before-bet .chip-2w{ background-position: -3.8rem -6.43rem; } .play .longhu .after-bet .chip-5w,.play .longhu .before-bet .chip-5w{ background-position: -6.26rem -7.15rem; } .play .longhu .after-bet .chip-5w,.play .longhu .before-bet .chip-20w{ background-position: -6.26rem -6.43rem; } .play .longhu .after-bet .chip-5w,.play .longhu .before-bet .chip-50w{ background-position: -1.355rem -6.43rem; } .play .maskResult.longhus .item{ background-image: url(../img/wl_box3.png); } .play .maskResult.longhus .player-card{ margin-left: 1.5rem; } .play .maskResult.longhus .banker-card{ margin-left: -4rem; } /*会员中心*/ .user .head .refresh{ width: 0.9rem; height: 0.9rem;; position: absolute; right: 0.25rem; top: 50%; margin-top: -0.45rem; background: url(../img/ic_refresh.png) no-repeat center center; -webkit-background-size: 0.6rem; background-size: 0.6rem; } .user .main{ width: 90%; margin: 0.3rem auto; margin-top: 1.8rem; position: relative; z-index: 8; } .user .main .item{ margin:0.3rem 0.1rem; background: #fff; border-radius: 5px; padding:0.3rem 0.2rem; color: #384c42; font-size: 0.32rem; font-weight: 500; } .user .main .item .list{ padding:0.2rem 0; padding-left: 0.6rem; } .user .main .item .hd{ font-size: 0.38rem; color: #384c42; border-bottom: 1px solid #87a68e; position: relative; } .user .main .item .hd .btn{ position: absolute; line-height: 30px; right: 0; background: #ffa800; color: #fff; font-size: 14px; width: 2rem; text-align: center; border-radius: 4px; height:30px; top: 50%; margin-top: -15px; } .user .main .item .btn:active{ opacity: 0.8; } .user .main .item .red{ color: #D41C1F; } .user .main .item .green{ color: #00522e; } .user .main .item .orange{ color: #ffa800; } .user .main .item .input{ padding-left: 0.1rem; } .user .main .item .btn-box{ text-align: center; } .user .main .item .btn-box .btn{ display: inline-block; margin: 0 0.3rem; margin-top: 0.4rem; width: 3.5rem; border-radius: 4px; color: #fff; font-size: 15px; line-height: 36px; } .user .main .item .box{ margin-top: 0.4rem; } .user .main .item .box .list{ padding-top: 0.35rem; padding-bottom: 0.35rem; position: relative; } .user .main .item .box .list .btn{ position: absolute; right: 0; background: #2ECC71; color: #fff; font-size: 15px; width: 2rem; text-align: center; border-radius: 4px; top: 50%; margin-top: -18px; line-height:36px; } .hall .section { width: 90%; margin: 0.3rem auto; margin-top: 1.8rem; position: relative; z-index: 8; } /*充值上分*/ .recharge .item{ margin: 0.3rem 0.1rem; background: #fff; border-radius: 5px; padding: 0.4rem 0.5rem; color: #384c42; font-size: 0.35rem; font-weight: 500; } .recharge .item .input-box{ width: 100%; padding:0.2rem; font-size: 0.39rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 20px; border: 1px solid #87a68e; border-radius: 4px; margin-top: 0.1rem; } .recharge .item .btn{ line-height: 0.8rem; margin: 0rem 0.2rem; width: 2.5rem; border-radius: 0.1rem; color: #fff; background: #E74C3C; font-size: 0.37rem; font-weight: 500; display: block; margin: 0.4rem auto; height: 0.8rem; } .recharge .item .btn:active{ opacity: 0.8; } .recharge .item .text{ border-top: 1px solid #87a68e; padding-top: 0.4rem; padding-bottom: 0.2rem; font-size: 0.33rem; line-height: 1.6 } /*提现*/ .withdrawals .item{ margin: 0.3rem 0.2rem; background: #fff; border-radius: 0.1rem; padding: 0.3rem 0.2rem; color: #384c42; font-size: 0.37rem; font-weight: 500; } .withdrawals .item .list.hd{ font-size: 0.38rem; color: #384c42; border-bottom: 1px solid #87a68e; position: relative; padding: 0.2rem 0; padding-left: 0.6rem; } .withdrawals .item .text-box{ padding: 0.4rem 0; display: table; width: 100%; } .withdrawals .item .text-box label{ display: table-cell; width: 1.5rem; text-align: right; padding-right: 0.2rem; vertical-align: middle; } .withdrawals .item .text-box input{ background:none; border: 1px solid #87a68e; line-height: 0.7rem; font-size: 0.37rem; padding: 0 0.2rem; border-radius: 0.1rem; color: #D41C1F; display: table-cell; } .withdrawals .item .text-box .select-box{ display: inline-block; position: relative; } .withdrawals .item .text-box select{ background: none; font-size: 0.37rem; line-height: 0.7rem; border-bottom: 1px solid #87a68e; font-weight: 500; width: 2.6rem; outline: none; appearance:none; -moz-appearance:none; -webkit-appearance:none; } .withdrawals .item .text-box .select-box:after{ content: ""; width: 0; height: 0; border-bottom: 0.3rem solid #736E6C; border-left: 0.32rem solid transparent; position: absolute; right:0; bottom: 0; pointer-events:none; } .withdrawals .item .text-box.text label{ vertical-align: top; } .withdrawals .item .text-box.text textarea{ display: table-cell; width: 80%; background:none; border: 1px solid #87a68e; border-radius:4px; padding:0.1rem 0.2rem; font-size: 0.35rem; color: #733525; } .withdrawals .item .text-box .btn { line-height: 0.8rem; width: 2.5rem; border-radius: 0.1rem; color: #fff; background: #E74C3C; font-size: 0.35rem; font-weight: 500; display: block; margin: 0 auto; } /*账单*/ .hall .ic_query { width: 0.9rem; height: 0.9rem; position: absolute; right: 0.25rem; top: 50%; margin-top: -0.45rem; background: url(../img/ic_query.png) no-repeat center center; -webkit-background-size: 0.7rem; background-size: 0.7rem; } .record .item{ position: fixed; top: 2rem; left: 50%; width:9rem; margin-left: -4.7rem; background: #fff; border-radius: 0.1rem; padding: 0.3rem 0.2rem; color: #733525; font-size: 0.35rem; font-weight: 500; -webkit-animation: bounceIn .3s 0s ease both; -moz-animation: bounceIn .3s 0s ease both; z-index: 999; } .record .item .list{ position: relative; } .record .item .list label{ position: absolute; top: 50%; left: 0; padding-left: 0.2rem; height: 1rem; margin-top: -0.5rem; line-height: 1rem; width: 1.6rem; } .record .item .list.select-box{ /*height: 50px;*/ height: 1rem; } .record .item .list.select-box:after { content: ""; width: 0; height: 0; border-bottom: 0.3rem solid #736E6C; border-left: 0.32rem solid transparent; position: absolute; right: 0; bottom:0.15rem; pointer-events: none; } .record .item .list.select-box select{ width: 7.2rem; padding-left: 0.2rem; position: absolute; right: 0; font-size: 0.35rem; line-height: 0.7rem; height: 0.7rem; top: 50%; margin-top: -0.35rem; border-bottom: 1px solid #b59f9f; background: none; outline: none; appearance:none; -moz-appearance:none; -webkit-appearance:none; } .record .item .list .input-time{ width: 100%; background:none; border-bottom: 1px solid #b59f9f; padding-left:2rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 0.35rem; line-height: 0.5rem; padding-top:0.25rem; padding-bottom:0.25rem; } .record .item .list .btn { line-height: 0.8rem; width: 2.5rem; border-radius: 0.1rem; color: #fff; background: #E74C3C; font-size: 0.35rem; font-weight: 500; display: block; margin: 0.6rem auto; margin-bottom: 0.2rem; } .section .item{ background: rgba(255, 255, 255, 0.93); margin: 0.3rem 0.1rem; padding: 0.2rem; font-size: 0.35rem; border-radius: 0.1rem; position: relative; color: #949493; font-weight: 500; } .section .brown{ color: #9c5244; } .section .gray{ color: #928e8b; } .section .win,.section .banker{ color: #e94c3d; } .section .lows,.section .player{ color: #3598db; } .section .tie{ color: #447824; } .bill .item p{ display: blcok; padding: 0.1rem; } .bill .item .title{ color: #00522e; font-size: 0.4rem; font-weight: 500; } .bill .item .date{ border-bottom: 1px solid #87a68e; } .bill .item .money{ position: absolute; right: 0.4rem; top: 0.3rem; font-size: 0.5rem; font-weight: 500; color: #E74C3C; } /*游戏记录*/ .game_record .item .hd{ font-size: 0.32rem; padding-bottom: 0.1rem; } .game_record .item .hd p{ color: #3598db; padding-bottom: 0.1rem; } .game_record .item table{ width: 100%; text-align: center; border-top: 1px solid #87a68e; border-bottom: 1px solid #87a68e; color: #384c42; } .game_record .item table td{ padding: 0.1rem 0; } .game_record .item .ft{ text-align: right; padding-right: 0.3rem; padding-top: 0.1rem; font-size: 0.4rem; } .section .item .blue{ color: #3598db; } .section .item .red{ color: #e94c3d; } .section .item .green{ color: #63c1a9; } .wash_record .item p{ padding: 0.1rem 0; color: #a9a5a2; } .wash_record .item .list p{ color: #666; } .wash_record .item span{ padding-left: 0.4rem; } .Maskplay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.6; z-index: 998; font-size: 1.5rem; text-align: center; color: #fff; font-weight: 500; } .Maskplay span{ display: block; margin-top: 5rem; } .play .video-box{ /*background: url(../img/start.jpg) no-repeat; -webkit-background-size: cover; background-size: cover;*/ } #video-container2 video{ transition:0.5s all; } #video-container2 .vcp-player{ overflow: hidden; } .scale{ -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transform: scale(2); } .video-canvas{ transition:1s all; } .ludanbox{ background: rgba(0,0,0,0.8); position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 99; visibility: hidden; transition:0.1s all; opacity: 0; } .ludanbox .box{ background: #1f542c; margin:1rem 5px; margin-top: 2.5rem; border: 2px solid #f2d589; border-radius: 0.1rem; } .ludanbox .box .title{ color: #fffd00; font-size: 0.38rem; font-weight: 500; padding:0.3rem 0.2rem; border-bottom: 2px solid #f2d589; position: relative; } .ludanbox .box .title .off-btn{ position: absolute; width: 0.8rem; height: 0.8rem; font-size: 0.6rem; right: 0; top: 50%; text-align: center; margin-top: -0.4rem; line-height: 0.85rem; } .ludanbox .box .lab{ display: table; width: 100%; } .ludanbox .box .lab li{ display: table-cell; width: 16.66%; background: rgba(0,0,0,0.4); color: #fff; text-align: center; font-size: 0.32rem; padding: 0.2rem 0; text-shadow: 1px 1px 1px #000; font-weight: 500; } .ludanbox .box .canvas{ margin-bottom: 0.4rem; border-top: 2px solid #f2d589; border-bottom: 2px solid #f2d589; } .ludanbox .box canvas{ background: #cbf0cd; width: 100%; height:100%; display: block; } .ludanbox .btn-box{ text-align: center; margin-bottom: 0.3rem; } .ludanbox .btn-box .btn{ color: #fff; font-size: 0.3rem; padding:0.1rem 0.2rem; display: inline-block; margin: 0 0.4rem; border-radius: 0.05rem; cursor: pointer; } .ludanbox .btn-box .btn:active{ opacity: 0.8; } .ludanbox .btn-box .banker2{ background: #b9605d; } .ludanbox .btn-box .player2{ background: #00d2ff; } /*------------------牛牛----------------------*/ .niuniu .bet-box .main .tab-box{ width:50%; float: left; height: 100%; } .niuniu .bet-box .main .player-box{ width: 4.5rem; margin:0 auto; margin-top:0.9rem; height: 3rem; border-radius: 0.2rem; border:2px solid rgba(255,255,255,0.4); position: relative; } .niuniu .bet-box .main .banker-box{ width: 4.5rem; margin:0 auto; margin-top:0.9rem; height: 3rem; border-radius: 0.2rem; border:2px solid rgba(255,255,255,0.4); position: relative; } .niuniu .bet-box .main .tab-box .lab{ position: absolute; width: 1rem; height: 0.8rem; left: -2px; top:-2px; border-top-left-radius: 0.2rem; border-bottom-right-radius: 0.1rem; } .niuniu .bet-box .main .tab-box .pot{ font-size: 0.3rem; color: #eee; width: 3.3rem; position: absolute; top:0.1rem; left: 1rem; } .niuniu .bet-box .main .tab-box .pot{ padding-left: 0.2rem; } .niuniu .bet-box .main .player-box .lab{ background: url(../dn_img/player_text.png) rgba(255,255,255,0.35) no-repeat center center; background-size: 0.7rem auto; -webkit-background-size: 0.7rem auto; } .niuniu .bet-box .main .banker-box .lab{ background: url(../dn_img/banker_text.png) rgba(255,255,255,0.35) no-repeat center center; background-size: 0.75rem auto; -webkit-background-size: 0.75rem auto; } .niuniu .bet-box .main .area{ width: 2rem ; border:2px solid rgba(255,255,255,0.5); box-sizing: border-box; height:1.2rem; border-radius: 0.1rem; margin-top: 1.2rem; position: relative; } .niuniu .bet-box .main .area:active{ border-color:rgba(255,253,0,0.6); } .niuniu .bet-box .main .equal{ float: left; margin-left: 0.12rem; background: url(../dn_img/equal.png) no-repeat center center; background-size: 0.75rem auto; -webkit-background-size: 0.75rem auto; position: relative; } .niuniu .bet-box .main .double{ float: right; margin-right: 0.12rem; background: url(../dn_img/double.png) no-repeat center center; background-size: 0.75rem auto; -webkit-background-size: 0.75rem auto; position: relative; } .niuniu .bet-box .main .equal:active{ background-image: url(../dn_img/equal_active.png); } .niuniu .bet-box .main .double:active{ background-image: url(../dn_img/double_active.png); } .niuniu .bet-box .main .after-bet, .niuniu .bet-box .main .before-bet{ position: absolute; width: 100%; height: 100%; top:0; left: 0; } .niuniu .bet-box .main .money{ width: 1.3rem; position: absolute; bottom: -0.7rem; text-align: center; font-size: 0.3rem; background: url(../img/money-bg.png) no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; padding-top: 0.02rem; padding-bottom: 0.15rem; left: 50%; margin-left: -0.65rem; font-weight: 500; color: #f1e537; } .niuniu .bet-box .main .temporary{ color: #fff; font-size: 0.3rem; text-align: center; position: absolute; width: 100%; bottom: -1.1rem; left: 0; text-shadow: 1px 1px 1px #000; } .niuniu .bet-box .main .area .after-bet i,.niuniu .bet-box .main .area .before-bet i{ margin-top: 0.58rem; } /*------------------牛牛end----------------------*/ .IIV::-webkit-media-controls-play-button, .IIV::-webkit-media-controls-start-playback-button{ opacity 0; pointer-events none; width 5px; } /*动画*/ .flash{-webkit-animation-name:flash;animation-name:flash} @-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}} @keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}} @-webkit-keyframes bounceIn{ 0%,20%,40%,60%,80%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000);transition-timing-function:cubic-bezier(0.215,.610,.355,1.000)} 0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)} 20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)} 40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)} 60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)} 80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)} 100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} } @keyframes bounceIn{ 0%,20%,40%,60%,80%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000);transition-timing-function:cubic-bezier(0.215,.610,.355,1.000)} 0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)} 20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)} 40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)} 60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)} 80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)} 100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} } @-webkit-keyframes verical-slow { 2% { -webkit-transform: translate(0, 1.5px) rotate(1.5deg); transform: translate(0, 1.5px) rotate(1.5deg); } 4% { -webkit-transform: translate(0, -1.5px) rotate(-0.5deg); transform: translate(0, -1.5px) rotate(-0.5deg); } 6% { -webkit-transform: translate(0, 1.5px) rotate(-1.5deg); transform: translate(0, 1.5px) rotate(-1.5deg); } 8% { -webkit-transform: translate(0, -1.5px) rotate(-1.5deg); transform: translate(0, -1.5px) rotate(-1.5deg); } 10% { -webkit-transform: translate(0, 2.5px) rotate(1.5deg); transform: translate(0, 2.5px) rotate(1.5deg); } 12% { -webkit-transform: translate(0, -0.5px) rotate(1.5deg); transform: translate(0, -0.5px) rotate(1.5deg); } 14% { -webkit-transform: translate(0, -1.5px) rotate(1.5deg); transform: translate(0, -1.5px) rotate(1.5deg); } 16% { -webkit-transform: translate(0, -0.5px) rotate(-1.5deg); transform: translate(0, -0.5px) rotate(-1.5deg); } 18% { -webkit-transform: translate(0, 0.5px) rotate(-1.5deg); transform: translate(0, 0.5px) rotate(-1.5deg); } 20% { -webkit-transform: translate(0, -1.5px) rotate(2.5deg); transform: translate(0, -1.5px) rotate(2.5deg); } 22% { -webkit-transform: translate(0, 0.5px) rotate(-1.5deg); transform: translate(0, 0.5px) rotate(-1.5deg); } 24% { -webkit-transform: translate(0, 1.5px) rotate(1.5deg); transform: translate(0, 1.5px) rotate(1.5deg); } 26% { -webkit-transform: translate(0, 0.5px) rotate(0.5deg); transform: translate(0, 0.5px) rotate(0.5deg); } 28% { -webkit-transform: translate(0, 0.5px) rotate(1.5deg); transform: translate(0, 0.5px) rotate(1.5deg); } 30% { -webkit-transform: translate(0, -0.5px) rotate(2.5deg); transform: translate(0, -0.5px) rotate(2.5deg); } 32% { -webkit-transform: translate(0, 1.5px) rotate(-0.5deg); transform: translate(0, 1.5px) rotate(-0.5deg); } 34% { -webkit-transform: translate(0, 1.5px) rotate(-0.5deg); transform: translate(0, 1.5px) rotate(-0.5deg); } 36% { -webkit-transform: translate(0, -1.5px) rotate(2.5deg); transform: translate(0, -1.5px) rotate(2.5deg); } 38% { -webkit-transform: translate(0, 1.5px) rotate(-1.5deg); transform: translate(0, 1.5px) rotate(-1.5deg); } 40% { -webkit-transform: translate(0, -0.5px) rotate(2.5deg); transform: translate(0, -0.5px) rotate(2.5deg); } 42% { -webkit-transform: translate(0, 2.5px) rotate(-1.5deg); transform: translate(0, 2.5px) rotate(-1.5deg); } 44% { -webkit-transform: translate(0, 1.5px) rotate(0.5deg); transform: translate(0, 1.5px) rotate(0.5deg); } 46% { -webkit-transform: translate(0, -1.5px) rotate(2.5deg); transform: translate(0, -1.5px) rotate(2.5deg); } 48% { -webkit-transform: translate(0, -0.5px) rotate(0.5deg); transform: translate(0, -0.5px) rotate(0.5deg); } 50% { -webkit-transform: translate(0, 0.5px) rotate(0.5deg); transform: translate(0, 0.5px) rotate(0.5deg); } 52% { -webkit-transform: translate(0, 2.5px) rotate(2.5deg); transform: translate(0, 2.5px) rotate(2.5deg); } 54% { -webkit-transform: translate(0, -1.5px) rotate(1.5deg); transform: translate(0, -1.5px) rotate(1.5deg); } 56% { -webkit-transform: translate(0, 2.5px) rotate(2.5deg); transform: translate(0, 2.5px) rotate(2.5deg); } 58% { -webkit-transform: translate(0, 0.5px) rotate(2.5deg); transform: translate(0, 0.5px) rotate(2.5deg); } 60% { -webkit-transform: translate(0, 2.5px) rotate(2.5deg); transform: translate(0, 2.5px) rotate(2.5deg); } 62% { -webkit-transform: translate(0, -0.5px) rotate(2.5deg); transform: translate(0, -0.5px) rotate(2.5deg); } 64% { -webkit-transform: translate(0, -0.5px) rotate(1.5deg); transform: translate(0, -0.5px) rotate(1.5deg); } 66% { -webkit-transform: translate(0, 1.5px) rotate(-0.5deg); transform: translate(0, 1.5px) rotate(-0.5deg); } 68% { -webkit-transform: translate(0, -1.5px) rotate(-0.5deg); transform: translate(0, -1.5px) rotate(-0.5deg); } 70% { -webkit-transform: translate(0, 1.5px) rotate(0.5deg); transform: translate(0, 1.5px) rotate(0.5deg); } 72% { -webkit-transform: translate(0, 2.5px) rotate(1.5deg); transform: translate(0, 2.5px) rotate(1.5deg); } 74% { -webkit-transform: translate(0, -0.5px) rotate(0.5deg); transform: translate(0, -0.5px) rotate(0.5deg); } 76% { -webkit-transform: translate(0, -0.5px) rotate(2.5deg); transform: translate(0, -0.5px) rotate(2.5deg); } 78% { -webkit-transform: translate(0, -0.5px) rotate(1.5deg); transform: translate(0, -0.5px) rotate(1.5deg); } 80% { -webkit-transform: translate(0, 1.5px) rotate(1.5deg); transform: translate(0, 1.5px) rotate(1.5deg); } 82% { -webkit-transform: translate(0, -0.5px) rotate(0.5deg); transform: translate(0, -0.5px) rotate(0.5deg); } 84% { -webkit-transform: translate(0, 1.5px) rotate(2.5deg); transform: translate(0, 1.5px) rotate(2.5deg); } 86% { -webkit-transform: translate(0, -1.5px) rotate(-1.5deg); transform: translate(0, -1.5px) rotate(-1.5deg); } 88% { -webkit-transform: translate(0, -0.5px) rotate(2.5deg); transform: translate(0, -0.5px) rotate(2.5deg); } 90% { -webkit-transform: translate(0, 2.5px) rotate(-0.5deg); transform: translate(0, 2.5px) rotate(-0.5deg); } 92% { -webkit-transform: translate(0, 0.5px) rotate(-0.5deg); transform: translate(0, 0.5px) rotate(-0.5deg); } 94% { -webkit-transform: translate(0, 2.5px) rotate(0.5deg); transform: translate(0, 2.5px) rotate(0.5deg); } 96% { -webkit-transform: translate(0, -0.5px) rotate(1.5deg); transform: translate(0, -0.5px) rotate(1.5deg); } 98% { -webkit-transform: translate(0, -1.5px) rotate(-0.5deg); transform: translate(0, -1.5px) rotate(-0.5deg); } 0%, 100% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } } @keyframes verical-slow { 2% { -webkit-transform: translate(0, 1.5px) rotate(1.5deg); transform: translate(0, 1.5px) rotate(1.5deg); } 4% { -webkit-transform: translate(0, -1.5px) rotate(-0.5deg); transform: translate(0, -1.5px) rotate(-0.5deg); } 6% { -webkit-transform: translate(0, 1.5px) rotate(-1.5deg); transform: translate(0, 1.5px) rotate(-1.5deg); } 8% { -webkit-transform: translate(0, -1.5px) rotate(-1.5deg); transform: translate(0, -1.5px) rotate(-1.5deg); } 10% { -webkit-transform: translate(0, 2.5px) rotate(1.5deg); transform: translate(0, 2.5px) rotate(1.5deg); } 12% { -webkit-transform: translate(0, -0.5px) rotate(1.5deg); transform: translate(0, -0.5px) rotate(1.5deg); } 14% { -webkit-transform: translate(0, -1.5px) rotate(1.5deg); transform: translate(0, -1.5px) rotate(1.5deg); } 16% { -webkit-transform: translate(0, -0.5px) rotate(-1.5deg); transform: translate(0, -0.5px) rotate(-1.5deg); } 18% { -webkit-transform: translate(0, 0.5px) rotate(-1.5deg); transform: translate(0, 0.5px) rotate(-1.5deg); } 20% { -webkit-transform: translate(0, -1.5px) rotate(2.5deg); transform: translate(0, -1.5px) rotate(2.5deg); } 22% { -webkit-transform: translate(0, 0.5px) rotate(-1.5deg); transform: translate(0, 0.5px) rotate(-1.5deg); } 24% { -webkit-transform: translate(0, 1.5px) rotate(1.5deg); transform: translate(0, 1.5px) rotate(1.5deg); } 26% { -webkit-transform: translate(0, 0.5px) rotate(0.5deg); transform: translate(0, 0.5px) rotate(0.5deg); } 28% { -webkit-transform: translate(0, 0.5px) rotate(1.5deg); transform: translate(0, 0.5px) rotate(1.5deg); } 30% { -webkit-transform: translate(0, -0.5px) rotate(2.5deg); transform: translate(0, -0.5px) rotate(2.5deg); } 32% { -webkit-transform: translate(0, 1.5px) rotate(-0.5deg); transform: translate(0, 1.5px) rotate(-0.5deg); } 34% { -webkit-transform: translate(0, 1.5px) rotate(-0.5deg); transform: translate(0, 1.5px) rotate(-0.5deg); } 36% { -webkit-transform: translate(0, -1.5px) rotate(2.5deg); transform: translate(0, -1.5px) rotate(2.5deg); } 38% { -webkit-transform: translate(0, 1.5px) rotate(-1.5deg); transform: translate(0, 1.5px) rotate(-1.5deg); } 40% { -webkit-transform: translate(0, -0.5px) rotate(2.5deg); transform: translate(0, -0.5px) rotate(2.5deg); } 42% { -webkit-transform: translate(0, 2.5px) rotate(-1.5deg); transform: translate(0, 2.5px) rotate(-1.5deg); } 44% { -webkit-transform: translate(0, 1.5px) rotate(0.5deg); transform: translate(0, 1.5px) rotate(0.5deg); } 46% { -webkit-transform: translate(0, -1.5px) rotate(2.5deg); transform: translate(0, -1.5px) rotate(2.5deg); } 48% { -webkit-transform: translate(0, -0.5px) rotate(0.5deg); transform: translate(0, -0.5px) rotate(0.5deg); } 50% { -webkit-transform: translate(0, 0.5px) rotate(0.5deg); transform: translate(0, 0.5px) rotate(0.5deg); } 52% { -webkit-transform: translate(0, 2.5px) rotate(2.5deg); transform: translate(0, 2.5px) rotate(2.5deg); } 54% { -webkit-transform: translate(0, -1.5px) rotate(1.5deg); transform: translate(0, -1.5px) rotate(1.5deg); } 56% { -webkit-transform: translate(0, 2.5px) rotate(2.5deg); transform: translate(0, 2.5px) rotate(2.5deg); } 58% { -webkit-transform: translate(0, 0.5px) rotate(2.5deg); transform: translate(0, 0.5px) rotate(2.5deg); } 60% { -webkit-transform: translate(0, 2.5px) rotate(2.5deg); transform: translate(0, 2.5px) rotate(2.5deg); } 62% { -webkit-transform: translate(0, -0.5px) rotate(2.5deg); transform: translate(0, -0.5px) rotate(2.5deg); } 64% { -webkit-transform: translate(0, -0.5px) rotate(1.5deg); transform: translate(0, -0.5px) rotate(1.5deg); } 66% { -webkit-transform: translate(0, 1.5px) rotate(-0.5deg); transform: translate(0, 1.5px) rotate(-0.5deg); } 68% { -webkit-transform: translate(0, -1.5px) rotate(-0.5deg); transform: translate(0, -1.5px) rotate(-0.5deg); } 70% { -webkit-transform: translate(0, 1.5px) rotate(0.5deg); transform: translate(0, 1.5px) rotate(0.5deg); } 72% { -webkit-transform: translate(0, 2.5px) rotate(1.5deg); transform: translate(0, 2.5px) rotate(1.5deg); } 74% { -webkit-transform: translate(0, -0.5px) rotate(0.5deg); transform: translate(0, -0.5px) rotate(0.5deg); } 76% { -webkit-transform: translate(0, -0.5px) rotate(2.5deg); transform: translate(0, -0.5px) rotate(2.5deg); } 78% { -webkit-transform: translate(0, -0.5px) rotate(1.5deg); transform: translate(0, -0.5px) rotate(1.5deg); } 80% { -webkit-transform: translate(0, 1.5px) rotate(1.5deg); transform: translate(0, 1.5px) rotate(1.5deg); } 82% { -webkit-transform: translate(0, -0.5px) rotate(0.5deg); transform: translate(0, -0.5px) rotate(0.5deg); } 84% { -webkit-transform: translate(0, 1.5px) rotate(2.5deg); transform: translate(0, 1.5px) rotate(2.5deg); } 86% { -webkit-transform: translate(0, -1.5px) rotate(-1.5deg); transform: translate(0, -1.5px) rotate(-1.5deg); } 88% { -webkit-transform: translate(0, -0.5px) rotate(2.5deg); transform: translate(0, -0.5px) rotate(2.5deg); } 90% { -webkit-transform: translate(0, 2.5px) rotate(-0.5deg); transform: translate(0, 2.5px) rotate(-0.5deg); } 92% { -webkit-transform: translate(0, 0.5px) rotate(-0.5deg); transform: translate(0, 0.5px) rotate(-0.5deg); } 94% { -webkit-transform: translate(0, 2.5px) rotate(0.5deg); transform: translate(0, 2.5px) rotate(0.5deg); } 96% { -webkit-transform: translate(0, -0.5px) rotate(1.5deg); transform: translate(0, -0.5px) rotate(1.5deg); } 98% { -webkit-transform: translate(0, -1.5px) rotate(-0.5deg); transform: translate(0, -1.5px) rotate(-0.5deg); } 0%, 100% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } 0%,40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg) } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } 0%,40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg) } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @-webkit-keyframes flipInXY { 0% { -webkit-transform: perspective(400px) rotateY(90deg) rotateX(90deg); transform: perspective(400px) rotateY(90deg) rotateX(90deg); opacity: 0 } 0%,40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg) } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInXY { 0% { -webkit-transform: perspective(400px) rotateY(90deg) rotateX(90deg); transform: perspective(400px) rotateY(90deg) rotateX(90deg); opacity: 0 } 0%,40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg) } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @-webkit-@keyframes lightY { 0%,70% { left: -14rem; } 100% { left: 14rem; } } @keyframes lightY { 0%,70% { left: -14rem; } 100% { left: 14rem; } }