1125 lines
23 KiB
CSS
1125 lines
23 KiB
CSS
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: 22px;
|
|
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:50px;
|
|
box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
-webkit-box-sizing:border-box;
|
|
margin-left: 3%;
|
|
}
|
|
|
|
/*.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: #fff;
|
|
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 .active-box{
|
|
position: absolute;
|
|
right: 5px;
|
|
bottom: 5px;
|
|
width: 225px;
|
|
background: url(../new_img/active_bg.jpg) repeat-x;
|
|
border-radius: 5px;
|
|
-webkit-background-size: auto 100%;
|
|
background-size: auto 100%;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
padding: 1.5vh;
|
|
box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
-webkit-box-sizing:border-box;
|
|
}
|
|
.canvas-box .active-box .item{
|
|
width: 100px;
|
|
cursor: pointer;
|
|
|
|
}
|
|
.canvas-box .active-box .item:first-child{
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
|
|
.canvas-box .item:last-child{
|
|
margin-top: 5px;
|
|
}
|
|
.canvas-box .active-box p{
|
|
position: absolute;
|
|
left: 110px;
|
|
top: 50%;
|
|
margin-top: -22px;
|
|
}
|
|
|
|
.canvas-box .active-box strong{
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.footer{
|
|
display:flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.footer .canvas-box{
|
|
flex:3;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.canvas-box canvas{
|
|
background: #fff;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
.table-data{
|
|
display: table-cell;
|
|
background: url(../new_img/table-bg.jpg) repeat-x;
|
|
border-radius: 5px;
|
|
height: 31vh;
|
|
margin-left: 5px;
|
|
-webkit-background-size: auto 100%;
|
|
background-size: auto 100%;
|
|
box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
-webkit-box-sizing:border-box;
|
|
flex:1.1;
|
|
min-width: 350px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.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: 20%;
|
|
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: 95%;
|
|
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: 20%;
|
|
font-weight: 600;
|
|
}
|
|
|
|
|
|
|
|
.table-data .limit-box{
|
|
width: 95%;
|
|
padding: 0 2.5%;
|
|
}
|
|
|
|
|
|
.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: 3vh;
|
|
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: 46.5vh;
|
|
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;
|
|
}
|
|
|
|
|
|
.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: 320px;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-left: -160px;
|
|
margin-top: -270px;
|
|
/* -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;
|
|
}
|
|
|
|
.canvas-box .active-box p{
|
|
max-width: 300px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
|
|
|
|
/*自动翻牌*/
|
|
.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;
|
|
|
|
}
|
|
/*问路*/
|
|
.canvas-box .active-box .item{
|
|
width:155px;
|
|
}
|
|
.canvas-box .active-box p{
|
|
left:166px;
|
|
}
|
|
.canvas-box .active-box .tip{
|
|
display:inline-block;
|
|
width:18px;
|
|
height:18px;
|
|
vertical-align: top;
|
|
box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
-webkit-box-sizing:border-box;
|
|
position: relative;
|
|
margin:2px 0;
|
|
opacity:0;
|
|
}
|
|
|
|
.canvas-box .active-box .circle{
|
|
border-radius: 100%;
|
|
border: 2px solid #000;
|
|
}
|
|
|
|
|
|
|
|
.canvas-box .active-box .round{
|
|
background: #000;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.canvas-box .active-box .bar:after{
|
|
top: -1px;
|
|
left: 8px;
|
|
content:"";
|
|
position: absolute;
|
|
width:3px;
|
|
height:20px;
|
|
background: #000;
|
|
-webkit-transform: rotate(45deg);
|
|
-moz-transform: rotate(45deg);
|
|
filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0.45);
|
|
}
|
|
|
|
.canvas-box .active-box .bar.red:after{
|
|
background:#b20a00;
|
|
}
|
|
|
|
.canvas-box .active-box .bar.blue:after{
|
|
background:#0543bc;
|
|
}
|
|
|
|
|
|
|
|
/*自动翻牌*/
|
|
@-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;
|
|
|
|
}
|
|
.canvas-box .active-box p{
|
|
padding-left: 5px;
|
|
padding-right: 0;
|
|
}
|
|
.section .head .box .list .date span{
|
|
padding-right: 0;
|
|
padding-left: 0
|
|
}
|
|
|
|
}
|
|
.update-ludan{z-index: 1; 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{
|
|
height: 40vh;
|
|
flex: 1.5;
|
|
margin-left: 0;
|
|
/*border: 5px solid #4a3d3a;*/
|
|
box-sizing:border-box;
|
|
min-width: 508px;
|
|
}
|
|
|
|
.table-data .top span{
|
|
font-size: 18px;
|
|
}
|
|
.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: 26px;
|
|
font-weight: 700;
|
|
text-shadow: 0px 0px 2px #fff;
|
|
margin-top: 0.8vh;
|
|
}
|
|
|
|
.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: 20vh;
|
|
width: 32vh;
|
|
overflow: hidden;
|
|
-webkit-background-size: 100%;
|
|
background-size: 100%;
|
|
position:absolute;
|
|
float: left;
|
|
display: block;
|
|
opacity: 0;
|
|
margin-left: 1vw;
|
|
top:50%;
|
|
}
|
|
|
|
.canvas-box .active-box{
|
|
font-size: 20px;
|
|
}
|
|
|
|
.canvas-box .active-box .item{
|
|
width: 200px;
|
|
}
|
|
|
|
.canvas-box .active-box strong{
|
|
font-size: 20px;
|
|
font-size: 500;
|
|
}
|
|
.canvas-box .active-box .tip{
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.canvas-box .active-box p{
|
|
left: 206px;
|
|
margin-top: -27px;
|
|
}
|
|
.canvas-box .active-box .item:first-child{
|
|
margin-bottom: 10px;
|
|
margin-top: 5px;
|
|
}
|
|
.countdown .num{
|
|
line-height: 20vh;
|
|
font-size: 180px;
|
|
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;
|
|
}
|
|
|
|
|