.Panel.Lottery { position: absolute; top: 17%; height: 72%; opacity: 0; width: 96%; left: 50%; margin-left: -48%; display: none }
.lottery-left { width: 60%; height: 100%; position: relative; float: left; border: 1px solid rgba(255, 87, 34, 0.5); box-shadow: 0 0 20px 20px #ff572240 inset; box-sizing: border-box; z-index: 0; border-radius: 10px }
.lottery-right { width: 38%; height: 100%; position: relative; float: right; border: 1px solid rgba(255, 87, 34, 0.5); box-shadow: 0 0 20px 20px #ff572240 inset; box-sizing: border-box; padding: 10px; border-radius: 10px; overflow: auto }
.lottery-title { width: 100%; height: 60px; position: relative; color: #FFC107; font-size: 35px; line-height: 60px; font-family: Arial, Helvetica, sans-serif; border-bottom: 1px solid rgba(255, 87, 34, 0.25); background: url(lot-title.png) 10px center no-repeat }
.lottery-title .title-label { margin-left: 12px }
.lottery-title .usercount-label { position: absolute; right: 10px; text-align: right }
.lottery-bottom { position: absolute; bottom: 0; width: 100%; height: 60px; border-top: 1px solid rgba(255, 87, 34, 0.25) }
.lottery-bottom .round-num { font-size: 35px; line-height: 60px; font-family: Arial, Helvetica, sans-serif; color: #FFC107; margin-left: 10px }
.lottery-bottom .button-happy { position: absolute; right: 10px; height: 40px; top: 50%; margin-top: -20px; line-height: 40px; padding-left: 40px; width: 80px; font-size: 20px; color: #fff; border: 1px solid #fff; background: url(lot-happy.png) 15px center no-repeat; cursor: pointer; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px }
.lottery-bottom .button-showresult { position: absolute; right: 10px; height: 40px; top: 50%; margin-top: -20px; line-height: 40px; font-size: 18px; padding: 0 10px; color: #FFC107; border: 1px solid #FFC107; cursor: pointer; border-radius: 8px; }
.lottery-run { position: absolute; width: 36vh; height: 36vh; top: 50%; left: 50%; margin: -25vh auto auto -18vh; z-index: 1; }
.user { background: url(lot_nouser.jpg) center center no-repeat; background-size: contain; border-radius: 100%; }
.user .nick-name { display: none }
.lottery-run .user { position: relative; width: 30vh; height: 30vh; background: url(lot_nouser.jpg) center center no-repeat; background-size: contain; margin: 15px auto; overflow: visible; border: 6px solid rgba(255,255,255,1); border-radius: 100%; }
.lottery-run .user:before { content: ""; position: absolute; top: -15%; left: -15%; right: -15%; bottom: -15%; display: block; background: url(cjgx002.png) no-repeat; background-size: 100% 100%; opacity: 1; border-radius: 100%; -webkit-animation: cjout2 2s -3s linear infinite; }
@-webkit-keyframes cjout2 { 0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
.lottery-run .user:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; box-shadow: 0 0 100px 60px rgba(255, 235, 59, 1); opacity: 1; z-index: -1; border-radius: 100%; -webkit-animation: cjout 4s 0s linear infinite; }
@-webkit-keyframes cjout { 0% {
opacity:0;
}
50% {
opacity:1;
}
100% {
opacity:0;
}
}
.lottery-run .user .nick-name { position: absolute; width: 200%; left: -50%; bottom: -8vh; font-size: 3.5vh; color: #FFEB3B; text-align: center; display: block; text-shadow: 0 1px 3px rgba(0,0,0,.45); margin: 0; padding: 0; }
.result-line { position: relative; width: 100%; height: 70px; margin: 3px auto; background: rgba(0, 0, 0, 0.1); border-radius: 10px; overflow: hidden; display: none }
.result-line:first-child { margin-top: 0 }
.result-line:last-child { margin-bottom: 0 }
.result-line .result-num, .result-line .user, .result-line .user .nick-name { display: inline-block }
.result-line .result-num { width: 30px; height: 30px; color: #ffffff; position: relative; top: 20px; text-align: center; margin-left: 10px; font-size: 16px; line-height: 30px; background-color: #FFC107; text-shadow: 0 1px 3px #FF5722; border-radius: 100%; background: linear-gradient(145deg, #ffe500 0%, #FFC107 25%, #FF5722 100%); box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.25); }
.result-line .user { position: absolute; display: inline-block; width: 60px; height: 60px; background: url(lot_nouser.jpg) center center no-repeat; background-size: contain; top: 5px; left: 50px; border-radius: 100%；box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.25);
}
.result-line .user .nick-name { position: absolute; top: 0; left: 70px; height: 30px; line-height: 30px; margin: 0; font-size: 24px; text-align: left; display: block; color: #FFEB3B; text-shadow: 0 1px 3px rgba(0,0,0,.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lottery-run .control { display: none; position: absolute; left: 50%; transform: translate(-50%, 0%); box-sizing: border-box; bottom: -15vh; font-size: 2.4vh; text-align: center; padding: 0.6vh 3vh 1.4vh 3vh; background-color: #fff; border-radius: 8px; cursor: pointer; color: #fff; box-shadow: 0 2px 0 3px rgba(0,0,0,.15), 0 -5px 0 0 #d05028 inset; background: linear-gradient(145deg, #ffe500 0%, #FFC107 25%, #FF5722 100%); text-shadow: 0 1px 5px #FF5722; }
.lottery-run .control:active { padding: 1vh 3vh 1vh 3vh; box-shadow: 0 2px 0 3px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.52) inset }
.mobile { display: block; position: absolute; top: 30px; left: 70px; margin: 0; font-size: 24px; color: #FFEB3B; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.lottery-left .user .mobile { bottom: -12vh; left: -50%; top: auto; font-size: 3vh; text-align: center; width: 200%; color: #FFEB3B; }
.result-line .user:before { content: ""; position: absolute; top: -10%; left: -10%; right: -10%; bottom: -10%; display: block; background: url(cjgh002.png) no-repeat; background-size: 100% 100%; opacity: 1; border-radius: 100%; -webkit-animation: cjout2 2s -3s linear infinite; }