body{ background: #413f40; padding: 15px; padding-bottom: 0; overflow: hidden; position: relative; } .iframe-box{position: fixed; top: 0; left: 0; width: 80%; height: 88%; padding:6% 10% 0; background: rgba(0,0,0,0.5); z-index: 999;} .iframe-box .title{text-align: center; font-size: 14px; position: relative; background:#fff; font-weight: normal; padding: 5px; border-bottom: 1px solid #ccc;} .iframe-box iframe{width: 100%; min-height: 720px;} .off-btn{position: absolute; right: -10px; top: -10px; width: 30px; height: 30px; text-align: center; line-height: 30px; border-radius: 100px; background: #fff; -webkit-box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.45); box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.45);} .section{ min-height: 630px; } .section .head{ height: 17vh; background: url(../new_img/head_bg.png) repeat-x; -webkit-background-size: auto 100%; background-size: auto 100%; border-radius: 10px; /* border-left: 2px solid #4a4a46; border-right: 2px solid #4a4a46;*/ overflow: hidden; display: table; width: 100%; } .section .head .logo{ height: 100%; /*background: url(../../hc-logo-1.png) center center no-repeat;*/ width: 8vw; -webkit-background-size: 8vw; background-size: 8vw; display: table-cell; } .section .head .box{ height: 100%; } .section .head .box .date{ float: right; color: #fff; font-size: 1vw; padding-top: 2.5vh; padding-right: 0.8vw; } .section .head .box .list{ display: table; padding-top: 3.2vh; width:100%; } .section .head .box .list .item{ color: #fff; font-size: 28px; font-weight: 500; float: left; padding-bottom: 2px; } .section .head .input-box{ /*background: url(../new_img/input_box.png);*/ -webkit-background-size: 100% 100%; background-size: 100% 100%; position: relative; width: 28%; padding-left:30px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; margin-left: 0; } /*.section .head .input-box:first-child{ width: 35%; margin-left: 0; }*/ .section .head .input-box.m0{ margin-right: 0; } .section .head .input-box input{ width: 100%; height: 100%; background: #f00; color:#fff; font-size:24px; /*float: left;*/ /*background: url(../new_img/input-bg.png);*/ -webkit-background-size: 100% 100%; background-size: 100% 100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; text-align: center; } .section .head .input-box label{ position: absolute; left: 5px; top: 0; vertical-align: middle; text-shadow: 0px 1px 0px #6f493a; } .section .head .box .list .date{ width: 34%; text-align: right; line-height: 4.8vh; } .section .head .box .list .date p{ display: inline-block; width: 225px; text-align: left; } .section .head .box .list .date span{ background: #ab7963; padding: 0 5px; } .section .head .box .list .notice{ height:4.2vh; line-height: 4.2vh; background: #606463; border-radius: 5px; color: #fff; overflow: hidden; width: 100%; position: relative; } .notice .scroll{ overflow: hidden; position: absolute; } .notice .scroll ul{ width: 200000px; } .notice .scroll ul li{ float: left; color:#ddd; font-size: 15px; padding: 0 20px; font-weight: 500; } .canvas-box{ border: 2px solid #87756c; background: #4a3d3a; border-radius: 5px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; padding: 5px; position: relative; } .canvas-box.small{ height: 27.9vh; margin-bottom: 0.5vh; min-height: 150px; position: relative; } .canvas-box.big{ height: 31vh; min-height: 200px; } .canvas-box .item:last-child{ margin-top: 5px; } .footer{ display:table; width: 100%; } .footer .askbox{ width:140px; display: table-cell; vertical-align: middle; background-color: #ae7c67; border-left: 2px solid #2a1606; border-right: 2px solid #2a1606; border-top: 2px solid #87756c; border-bottom: 2px solid #87756c; border-radius: 5px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 5px; position: relative; } .footer .askbox .item{ width:70px; font-size: 35px; font-weight: bold; color: #2a1606; display: table-cell; padding-top: 20px; } .footer .askbox .item .box{ width: 50px; margin: 0 auto; line-height: 1; text-align: center; text-shadow:0px 0px 1px #000 } .footer .askbox strong{ display: block; font-weight:bold; padding-top: 15px; } .footer .askbox .tip{ display:block; width:35px; height:35px; vertical-align: top; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; margin:8px auto; display: none; position:relative; } .footer .askbox .circle{ border-radius: 100%; border: 5px solid #000; } .footer .askbox .round{ background: #000; border-radius: 100%; } .footer .askbox .bar:after{ top: -1px; left: 12px; content:""; position: absolute; width:6px; height:40px; background: #000; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0.45); } .footer .askbox .bar.red:after{ background:#b20a00; } .footer .askbox .bar.blue:after{ background:#0543bc; } .footer .canvas-box{ display: table-cell; vertical-align: middle; } .canvas-box canvas{ background: #fff; width: 100%; height: 100%; display: block; } .table-data{ display: table-cell; background: url(../new_img/table-bg.jpg) repeat-x; border-radius: 5px; -webkit-background-size: auto 100%; background-size: auto 100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; min-height: 200px; height: 40vh; margin-left: 0; min-width: 560px; width: 34vw; vertical-align: middle; } .table-data .hd{ height: 16vh; background-color: pink } .table-data .title{ width: 100%; display: table; text-align: center; } .table-data .title li{ display: table-cell; color: #3c180a; width: 16%; position: relative; } .table-data .title li:after{ content: ""; border-left: 1px solid #e8ccbf; height: 30px; position: absolute; right: 0; top: 50%; margin-top: -15px; } .table-data .title li:last-child:after{ border: none; } .table-data .title li>*{ display: block; } .table-data .title li strong{ font-weight: 600; font-size: 18px; text-shadow: 0px 1px 0px #fff; } .table-data .title li small{ font-size: 12px; font-weight: 500; } .table-data .top{ /*background: #fff;*/ width: 100%; display: table; text-align: center; margin: 0 auto; border-radius: 2px; /*margin-top: 0.8vh;*/ line-height: 3vh; font-weight: 500; /*-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset; -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset;*/ } .table-data .top span{ display: table-cell; color: #3c180a; width: 16%; font-weight: 600; } .table-data .limit-box{ /*width: 100%;*/ padding: 0 3%; position: relative; } .table-data .lan-box{ padding-top: 1vh; text-align: center; line-height: 3vh; } .table-data .lan-box .item{ width: 50%; color: #3c180a; font-weight: 600; } .table-data .lan-box .item span { font-weight: 600; } .limit-box .list{ padding: 0.6vh 0; padding-left: 50px; position: relative; font-size: 14px; color: #3c180a; line-height: 4vh; font-weight: 500; } .limit-box .list .lab{ position: absolute; left: -20px; top: 0; text-align: center; margin:0.6vh 0; font-weight: 600; font-size: 16px; width: 70px; color: #FFFFFF; background-color: #2a1606; } .limit-box .list .item{ background: #fff; width: 48%; border-radius: 2px; padding: 0 10px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset; -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset; font-weight: 800; } .limit-box .list .item small{ font-size: 12px; font-weight: normal; font-weight: 800; } .limit-box .list .item span{ font-size: 13px; } .control-box{ position: fixed; right: -410px; top: 19vh; background: rgba(21, 34, 34, 0.71); width: 410px; height: 60vh; text-align: center; z-index: 1000; } .control-box .slide-btn{ opacity: 0; background: rgba(21, 34, 34, 0.71); position: absolute; height: 65px; border-radius: 100px 0 0 100px; width: 30px; left: -35px; top: 50%; margin-top: -32.5px; cursor: pointer; color: #ddd; line-height: 65px; font-size: 20px; padding-left: 5px; } .control-box .btn-box1{ padding: 7vh 0; } .control-box .btn-box1 span{ cursor: pointer; width: 110px; height: 35px; display: inline-block; margin:0 10px ; line-height: 35px; color: #fff; font-weight: 500; font-size: 16px; border-radius: 5px; -webkit-box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2); box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2); } .control-box .btn-box2 span{ cursor: pointer; display: inline-block; width: 60px; height: 30px; line-height: 30px; color: #fff; background: #c0bbbb; font-weight: 500; margin: 0 4px; border-radius: 5px; font-size: 16px; -webkit-box-shadow: 0px 6px 5px rgba(0,0,0,0.2); -moz-box-shadow: 0px 6px 5px rgba(0,0,0,0.2); box-shadow: 0px 6px 5px rgba(0,0,0,0.2); } .control-box .btn-box2 span.on{ background: #0b6140; -webkit-box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset, 0px 6px 5px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2); box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset, 0px 6px 5px rgba(0,0,0,0.2); } .control-box .btn-box3{ padding: 5vh 0; } .control-box .btn-box3 span{ cursor: pointer; display: inline-block; width: 160px; height: 35px; line-height: 35px; color: #fff; font-weight: 500; margin: 0 4px; border-radius: 5px; font-size: 16px; -webkit-box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2); box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2); } .control-box .btn-box4 span{ display: inline-block; width: 60px; height: 30px; line-height: 30px; color: #fff; background: #a07667; font-weight: 500; margin: 0 4px; border-radius: 5px; font-size: 12px; -webkit-box-shadow: 0px 6px 5px rgba(0,0,0,0.2); -moz-box-shadow: 0px 6px 5px rgba(0,0,0,0.2); box-shadow: 0px 6px 5px rgba(0,0,0,0.2); cursor: pointer; } .control-box .btn-box1 span:active, .control-box .btn-box3 span:active, .control-box .btn-box4 span:active{ opacity: 0.7; } .control-box .green_bg{ background: #0b6140; } .control-box .red_bg{ background: #7a1e1e; } .control-box .btn-box5{ padding: 2vh 0; } .btn-box5 .currencyBox { color: #fff; font-size: 16px; } .btn-box5 .limitBox{ color: #fff; font-size: 16px; } .countdown{ display: none; position: absolute; z-index: 999; width: 210px; height: 210px; /*background: rgba(21, 34, 34, 0.71);*/ bottom: 5px; right: 5px; } .countdown .roll{ position: absolute; width: 180px; height: 180px; top:50%; left: 50%; margin-left: -90px; margin-top: -90px; -webkit-animation: rotate 1s linear 1s 5 alternate; animation: rotate 1s linear infinite; } .countdown .num{ color: #fff; font-size: 60px; position: relative; font-weight: 500; z-index: 999; text-align: center; line-height: 210px; text-shadow: 0px 1px 0px #555; } .countdown .inner, .inner2 { position: absolute; width: 170px; height: 170px; border-radius: 170px; overflow: hidden; left: 50%; top: 50%; margin-top: -85px; margin-left: -85px; } .countdown .inner { opacity: 1; background-color: #d4b0a3; animation: second-half-hide 2s steps(1, end) infinite; } .countdown .inner2 { opacity: 0; background-color: #a9735f; animation: second-half-show 2s steps(1, end) infinite; } .countdown .spiner, .filler, .masker { position: absolute; width: 50%; height: 100%; } .countdown .spiner { border-radius: 40px 0 0 40px; background-color: #a9735f; transform-origin: right center; animation: spin 1s infinite linear; left: 0; top: 0; } .countdown .filler { border-radius: 0 40px 40px 0; background-color: #a9735f; animation: second-half-hide 1s steps(1, end) infinite; left: 50%; top: 0; opacity: 1; } .countdown .masker { border-radius: 40px 0 0 40px; background-color: #d4b0a3; animation: second-half-show 1s steps(1, end) infinite; left: 0; top: 0; opacity: 0; } .countdown .inner2 .spiner, .inner2 .filler { background-color: #d4b0a3; } .countdown .inner2 .masker { background-color: #a9735f; } /*结果弹窗*/ .result-box{ position: absolute; z-index: 1000; top: 0; left: 0; width: 1080px; left: 50%; top: 50%; margin-left: -550px; margin-top: -340px; /* -webkit-animation: bounceIn .5s 0s ease both; -moz-animation: bounceIn .5s 0s ease both;*/ } .result-box.blink{ -webkit-animation: bounceIn 1s 0s ease both infinite; -moz-animation: bounceIn 1s 0s ease both infinite; } .canvas-main{ position: relative; } /*自动翻牌*/ .begincard{ position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 999; display: none; } .begincard .box{ position: absolute; width: 732px; left: 50%; margin-left: -386px; top:0%; margin-top: -423px; /*background:url(../img/border.png);*/ background-size: 100% 100%; background-color: rgba(0,0,0,0.5); opacity: 0; } .begincard .list{ display: inline-block; margin:50px; vertical-align: middle; margin-bottom: 20px; } .begincard .list .card{ width: 130px; height: 180px; display: inline-block; border-radius: 3px; background-color: #fff; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.15); box-shadow: 0 1px 1px rgba(0,0,0,.15); position: relative; font-size: 18px; color: #000; overflow: hidden; } .begincard .list .draw .rotate{ width: 94px; height: 130px; filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); display: none; } .begincard .list .draw .card{ width: 94px; height: 130px; font-size: 14px; vertical-align: middle; } .begincard .list .draw{ text-align: center; height:135px; width: 264px; } .begincard .list .draw .text{ font-size: 30px; display: inline-block; color: #fff; vertical-align: top; width:130px; height:135px; line-height: 135px; font-weight: 500; } .begincard .card .topleft, .begincard .card .bottomright { position: absolute; text-align: center; line-height: 1; letter-spacing:-3px; font-family: ubuntu condensed,sans-serif; white-space: pre; -webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -o-transform: translate(-50%,0); -ms-transform: translate(-50%,0); transform: translate(-50%,0); } .begincard .card .topleft { top: 8px; left:7px; } .begincard .card .bottomright { bottom: 8px; right: 7px; -webkit-transform: rotate(180deg) translate(-50%,0); -moz-transform: rotate(180deg) translate(-50%,0); -o-transform: rotate(180deg) translate(-50%,0); -ms-transform: rotate(180deg) translate(-50%,0); transform: rotate(180deg) translate(-50%,0); } .begincard .list .draw .card .topleft { top: 5px; left:5px; } .begincard .list .draw .card .bottomright { bottom: 5px; right:5px; } .begincard .list .card .face{ /*background-image: url('../../faces/faces.png');*/ height: 100%; background-position: 50% 50%; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-size: 100% 100%; background-repeat: no-repeat; } .begincard .list .card.begin{ -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: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .result_img{ position: absolute; z-index: 999; top: 50%; left: 50%; width: 200px; height: 128px; margin-left: -100px; margin-top:-128px; -webkit-animation: bounceIn .5s 0s ease both; -moz-animation: bounceIn .5s 0s ease both; display: none; } /*自动翻牌*/ @-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) } } @keyframes spin { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } @keyframes second-half-hide { 0% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes second-half-show { 0% { opacity: 0; } 50%, 100% { opacity: 1; } } @-webkit-keyframes bounceIn { 0% { opacity: .8; -webkit-transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: .8; -moz-transform: scale(0.5); } 100% { opacity: 1; -moz-transform: scale(1); } } @media screen and (max-width: 1366px){ .section .head .box .list .item{ font-size: 22px; } .section .head .box .list .date p{ width: 160px; font-size: 13px; } .result-box { width: 220px; margin-left: -110px; margin-top: -200px; } .section .head .box .list .date span{ padding-right: 0; padding-left: 0 } } .update-ludan{z-index: 99999999; left: 38%; top: 30%; background:#fff; min-width:400px; min-height:142px; position: fixed; box-shadow: 1px 1px 50px rgba(0,0,0,.3); border-radius: 2px; display:none;} .update-ludan-title{padding: 0 80px 0 20px; height: 42px; line-height: 42px; border-bottom: 1px solid #eee; font-size: 14px; color: #333; overflow: hidden; background-color: #F8F8F8; border-radius: 2px 2px 0 0;} .update-ludan-content{padding-left:20px; padding-top:40px; padding-bottom:20px;} .update-ludan-content select{border:1px solid #eee; padding:5px; min-width:260px;} .update-ludan-win6{padding-left:20px; padding-top:0px; padding-bottom:20px;} .update-ludan-footer{text-align:center; padding-bottom:30px;} .update-ludan-footer a{display:inline-block; padding:7px 20px; cursor:pointer; border-radius: 2px;} .update-ludan-footer #confirm_update_ludan{background:#33A3F6; color:#fff; border-color: #1E9FFF; background-color: #1E9FFF; margin-right:20px;} .update-ludan-footer #cancel_update_ludan{border: 1px solid #dedede;} /*胜派新样式*/ .section .head{ background-color: #1d2020; height: 13vh; position: relative; } .section .head .logo{ width: 8.5vw; background-size: 7.5vw; } .canvas-box.big{ height: 40vh; } .table-data .top span{ font-size: 40px; } .table-data .lan-box{ padding-top: 1vh; padding-bottom: 0.8vh; } .table-data .lan-box .item{ width:33.33%; font-size: 18px; } .table-data .title li strong{ font-size: 28px; font-weight: 700; text-shadow: 0px 0px 2px #fff; margin-top: 0.1vh; } .section .head .box .list{ padding-top: 20px; } .limit-box .list .item span{ text-align: left; width: 100%; font-size: 16px; font-weight: 500; } .limit-box .list{ padding-left: 80px; } .limit-box .list .lab{ font-size: 20px; width: 100px; left: -3%; } .countdown{ /*background: url(../new_img/countdown.png) no-repeat center center;*/ height: 100vh; width: 60%; overflow: hidden; -webkit-background-size: 100%; background-size: 100%; position:absolute; float: left; display: block; opacity: 0; margin-left: 1vw; top:50%; } .countdown .num{ line-height: 60vh; font-size: 60vh; color: #000000; opacity: 0.4; } .section .head .box .list .date span{ margin-right: 10px; } #language{ width:120px; height:35px; border-radius:5px; color:#fff; padding: 0 15px; } /*--------c_new_index----------------*/ .section .head { /*background: linear-gradient(#694F1B,#EAB446,#EAB446,#694F1B);*/ border-top: 2px solid #E8C3B0; border-right: 2px solid #E8C3B0; box-shadow: 1px 1px 50px #000; border-radius: 5px; width: calc(100% + 4px); top: -15px; left: -2px; } .section .head .logo { height: 100%; /*background: url(../../c_logo.png?v=1) center center no-repeat;*/ width: 8vw; -webkit-background-size: 8vw; background-size: 8vw; display: table-cell; } .section .head .box .date { color: #fff; } .section .head .box .date span{ color: #fff; background: #916C23; padding: 0 15px; } .table-data { border: 2px solid #87756c; /*background: linear-gradient(#694F1B,#694F1B,#EAB446,#AA8649,#C49B86,#463107,#C49B86);*/ } .table-data .top { /*margin-top: 0.7vh;*/ } .table-data .lan-box .item small { font-weight: 600; font-size: 18px; } .table-data .lan-box { padding-bottom: 0; padding: 0.3vh 0 0.3vh; } .limit-box .list .item span { font-weight: 1000; font-size: 24px; font-family: "微软雅黑"; }