html,body{background:linear-gradient(225deg, #25166C 0%, #37124A 48%, #180740 100%);height:100%;-ms-touch-action:none;outline:none;-moz-user-select:none;-webkit-user-select: none;-ms-user-select:none;-khtml-user-select: none;margin:0px; padding:0px;}
.pageContent{width:100%;height:100%;position:relative;background:url(./images/gameBg.gif) left top;}
.canvasBox{width:100%;height:100%;position: absolute;margin:0;padding:0;list-style: none;}
.canvasBox li{position: relative;height: 100%;}
.canvasBox li.canvasBox2{float:left;width:50%;}
.pageContent canvas{display: block;}
.deviceBox{position:fixed;width:auto;}
.climaxAnimation{display:none;position:fixed;z-index: 800;}
.climaxAnimation .icon{background:url(./images/heart.png) left top no-repeat;background-size:100%;position:absolute;z-index:999;width:200px;height:200px;}
.playDemo{position: absolute;width: 100%;margin-top:70%;text-align: center; font-size: 14px; color: #fff; display: none;}
.playDemo img{width:20%;max-width:120px;}
.systemMessage{position:absolute;text-align:center;padding:10px;margin:0px;color:#FFFFFF;z-index:99;}
.speedInfo{display:none;position:fixed;margin-top:50px;margin-left:20px;}
.speedInfo>div{position:relative;}
.speedInfo .statusBar{width:10px;height:100px;border-radius:4px;border:1px #999 solid;overflow:hidden;display:table-cell;vertical-align:bottom;}
.speedInfo .statusBar>div{width:100%;height:0px;overflow:hidden;}
.speedInfo .statusBar>div>span{
	display:block;width:100%;height:100px;
    background: -moz-linear-gradient(top, #ff0043 0%, #aa0c8d 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0043), color-stop(100%,#aa0c8d));
    background: -webkit-linear-gradient(top, #ff0043 0%,#aa0c8d 100%);
    background: -o-linear-gradient(top, #ff0043 0%,#aa0c8d 100%);
    background: -ms-linear-gradient(top, #ff0043 0%,#aa0c8d 100%);
    background: linear-gradient(to bottom, #ff0043 0%,#aa0c8d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0043', endColorstr='#aa0c8d',GradientType=0 );
}
.speedInfo .max,.speedInfo .min{position:fixed;margin-left:15px;color:#666;font-size:12px;}
.speedInfo .min{margin-top:-16px;}
.speedInfo .speed{color:#ccc;font-size:14px;margin:5px 0 0 -15px;width:40px;text-align:center;}
.myDevice{max-width: 260px;margin: 50px 0 0 20px;max-height: 200px;}
.myPositionPad{display:none;width: 12%;max-width: 80px;position: absolute;top: 40vh;left: 45vw;}
.close{position:absolute;color:#888;top:30px;right:0px;cursor:pointer;display:none;}
.closeServer{position:absolute;color:#888;right:0px;cursor:pointer;display:none;}
.pModesBox{position:absolute;z-index:9;left:0px;top:0px;height:100%;overflow:hidden;}
.animatedBg{background:rgba(78,35,142,0.7);border:1px #666 solid;border-radius:5px;}
.modeSwitch{position: absolute;width: 100%;}
.canvasBox2 .modeSwitch{height: 1px;}
.injectBut{background:url(./images/inject.png) no-repeat;background-size:100%;width:32px;height:32px;position: absolute;top:45%;right:20px;}
.injection{background-image:url(./images/injection.png);}
.modeButton{cursor:pointer;padding:3px;margin:10px 0px;margin-right:10px;float:right;}
.modeSelect{border-radius: 50%;-webkit-animation: bs linear 1.5s 1.5s infinite;-moz-animation: bs linear 1.5s 1.5s infinite;animation: bs linear 1.5s 1.5s infinite;animation-delay:-0.1s;}
.switchModes{background:url(./images/mode0.png) no-repeat;background-size:100%;width:32px;height:32px;}
.switchOn .switchModes{background:url(./images/mode1.png) no-repeat;background-size:100%;}
.switchVibrations{background:url(./images/vibration0.png) no-repeat;background-size:100%;width:32px;height:32px;}
.switchOn .switchVibrations{background:url(./images/vibration1.png) no-repeat;background-size:100%;}
.pModesBox>div>div{float:left;width:auto;}
.pModesBox>div>br{clear:both;}
.pModesBox>div img{cursor:pointer;position:absolute;z-index:2;border-radius:50%;background: radial-gradient(circle at 90% 25%, #fff 1px, #cd64ee 8%, #7c0f9c 50%, #8007a4 60%, #9d0cc8 80%, #9e07d0 80%);background-size: 100%;background-image: url(./images/hismith.png);}
.pModesBox .closeMode{width:40px;height:40px;padding: 0px;cursor: pointer;background: rgba(255,255,255,0.2);border-radius: 25px;border: 2px solid #fff;position: fixed;box-sizing:border-box;left:0;right:0;margin:15px auto;}
.pModesBox .closeMode::before{content:' ';display:block;width:16px;height:16px;background:#fff;margin:10px auto;border-radius:3px;}
.pModesBox.arrow_up::before{content:' ';display:block;width:100%;height:12px;position: absolute;background: rgba(0,0,0,0.3) url(./images/arrow_up.svg) center top no-repeat;background-size: 30px auto;}
.pModesBox.arrow_down::after{content:' ';display:block;width:100%;height:12px;position: absolute;background: rgba(0,0,0,0.3) url(./images/arrow_down.svg) center top no-repeat;background-size: 30px auto;bottom:0;}
.svGame::before{content: "";width: 1px;left: 50vw;height:100%;background: rgba(255,255,255,0.1);position:fixed;z-index:0;}
.svGame .deviceBox{display:flex;align-content: center;}
.svGame .deviceBox .myDevice{margin: 50px auto;}
.svGame .canvasBox li:last-child .modeSwitch .modeButton{float:left;}
@-webkit-keyframes bs {
  0% {box-shadow: 0 0 0px 0 #fff;}
  50% {box-shadow: 0 0 1em 0.3em #FFF500;}
  100% {box-shadow: 0 0 0px 0 #fff;}
}
@-moz-keyframes bs {
  0% {box-shadow: 0 0 0px 0 #fff;}
  50% {box-shadow: 0 0 1em 0.3em #FFF500;}
  100% {box-shadow: 0 0 0px 0 #fff;}
}
@-o-keyframes bs {
  0% {box-shadow: 0 0 0px 0 #fff;}
  50% {box-shadow: 0 0 1em 0.3em #FFF500;}
  100% {box-shadow: 0 0 0px 0 #fff;}
}
@keyframes bs {
  0% {box-shadow: 0 0 0px 0 #fff;}
  50% {box-shadow: 0 0 1em 0.3em #FFF500;}
  100% {box-shadow: 0 0 0px 0 #fff;}
}
@media (orientation:landscape){
	.playDemo{margin-top:20%;}
}
.messages{list-style:none;position:absolute;z-index:100;height:30%;left:0;bottom:0;width:60%;max-width: 360px;margin-bottom: 50px;}
.messages .msgTitle{float:left;display: inline-block;background: #fff;font-size: 12px;padding: 0 15px;position: absolute;border-radius: 0 15px 0 0;margin-top: -16px;}
.messages>ul{margin: 0px; padding: 0 10px;height:100%;overflow-y:auto;border: 1px rgba(255,255,255,0.3) solid;border-top:3px #fff solid;}
.messages>ul>li{width:100%;clear:both;}
.messages>ul>li>div{line-height:20px;font-size: 12px;}
.messages .f>div{float: left;color:#f0a;}
.messages .m>div{float: right;color:#5c17c0;}
.msgSend{position: absolute;z-index:110;width:100%;bottom:0;line-height:50px;}
.msgSend>span{float: left;width:40px;height:40px;margin: 5px;margin-top: 10px;cursor: pointer;}
.msgSend .msgHide{background:url("./images/msgClose.png") no-repeat left top;background-size: 100%;}
.msgSend .msgShow{background:url("./images/msgShow.png") no-repeat left top;background-size: 100%;}
.msgSend .megTxt{background:rgba(255, 255, 255, 0.2);border:none;height:36px;border-radius: 15px;color: #fff;padding: 0 10px;font-size: 16px;}