@charset "utf-8";
	a,mark {
	color:inherit
}
html {
	color:#000;
	background:#fff;
	font-family:Arial,'Microsoft YaHei';
	font-size:34px;
	-webkit-user-select:none;
	user-select:none;
	-webkit-overflow-scrolling:touch
}
body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,strong,td,textarea,th,ul {
	padding:0;
	margin:0
}
table {
	border-collapse:collapse;
	border-spacing:0
}
img {
	display:block;
	border:0;
	max-width:100%
}
a {
	text-decoration:none;
	outline:0
}
em,i,strong {
	font-style:inherit;
	font-weight:inherit
}
li {
	list-style:none
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:400
}
button,input,optgroup,option,select,textarea {
	font-family:inherit;
	font-size:inherit;
	font-style:inherit;
	font-weight:inherit
}
mark {
	background-color:rgba(0,0,0,0)
}
.clearfix:after {
	content:"\200B";
	display:block;
	height:0;
	clear:both
}
.none,[v-cloak] {
	display:none
}
.dire-wrap,.key-wrap {
	display:inline-block;
	overflow:hidden;
	will-change:auto;
	contain:style;
	backface-visibility:hidden
}
.mask {
	position:fixed;
	width:100%;
	height:100%;
	left:0;
	top:0;
	z-index:95;
	background:rgba(0,0,0,.7);
}
.tx_ov {
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis
}
.tx_wrap {
	word-break:break-all;
	word-wrap:break-word
}
body {
	background:#000
}
.dc-centre,.dc-dire,.dire-ctrl,.key-btn {
	background-size:100% 100%
}
#screen {
	position:absolute;
	width:256px;
	height:240px;
	top:calc((100vh + 50px - 256px)/ 2);
	right: 240px;
	transform:scale(3.3333,3.3333) rotate(90deg);
	border:none;
	overflow:hidden
}
.ctrl-wrap {
	position:fixed;
	height:100vh;
	width:100%;
	top:0;
	left:0
}
.dc-centre,.dc-dire,.dire-ctrl,.dire-wrap,.key-btn,.key-wrap {
	position:absolute
}
.dire-wrap {
	width:390px;
	height:390px;
	top:-10px;
	left:-10px
}
.dire-ctrl {
	width:290px;
	height:290px;
	margin:50px;
	background-image:url(../images/7.png);
	overflow:hidden
}
.dc-centre {
	width:124px;
	height:124px;
	background-image:url(../images/8.png);
	will-change:auto;
	contain:style
}
.dc-dire {
	width:384px;
	height:384px;
	margin:3px;
	background-image:url(../images/9.png);
	will-change:auto;
	contain:style
}
.key-wrap {
	width:100vw;
	height:390px;
	bottom:20px;
	left:20px
}
.key-btn {
	width:150px;
	height:150px;
	line-height:150px;
	text-align:center;
	font-size:56px;
	transform:rotate(90deg);
	font-weight:700;
	color:rgba(255,255,255,.5);
	opacity:.5;
	background-image:url(../images/8.png)
}
.key-btn.kay-B {
	top:88px;
	left:90px;
	opacity:.7
}
.key-btn.kay-A {
	top:220px;
	left:0px;
	opacity:.7
}
.key-btn.kay-Y {
	top:88px;
	left:232px
}
.key-btn.kay-X {
	top:256px;
	left:162px
}
.key-btn.kay-AB {
	top:220px;
	left:222px
}
.key-btn.flat-btn {
	width:120px;
	height:80px;
	font-size:30px;
	line-height:80px
}
.key-btn.kay-SE {
	top:120px;
	right:60px
}
.key-btn.kay-ST {
	top:260px;
	right:60px
}
.btn-on {
	transform:scale(.9,.9) rotate(90deg)
}
.layui-m-layer {
	position:relative;
	z-index:19891014
}
.layui-m-layer * {
	-webkit-box-sizing:content-box;
	-moz-box-sizing:content-box;
	box-sizing:content-box
}
.layui-m-layermain,.layui-m-layershade {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%
}
.layui-m-layershade {
	background-color:rgba(0,0,0,.7);
	pointer-events:auto
}
.layui-m-layermain {
	display:table;
	pointer-events:none
}
.layui-m-layermain .layui-m-layersection {
	display:table-cell;
	vertical-align:middle;
	text-align:center
}
.layui-m-layerchild {
	position:relative;
	display:inline-block;
	text-align:left;
	background-color:#fff;
	font-size:2.6vh;
	border-radius:20px;
	box-shadow:0 0 8px rgba(0,0,0,.1);
	pointer-events:auto;
	-webkit-overflow-scrolling:touch;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:.2s;
	animation-duration:.2s
}
@-webkit-keyframes layui-m-anim-scale {
	0% {
	opacity:0;
	-webkit-transform:scale(.5);
	transform:scale(.5)
}
100% {
	opacity:1;
	-webkit-transform:scale(1);
	transform:scale(1)
}
}@keyframes layui-m-anim-scale {
	0% {
	opacity:0;
	-webkit-transform:scale(.5);
	transform:scale(.5)
}
100% {
	opacity:1;
	-webkit-transform:scale(1);
	transform:scale(1)
}
}.layui-m-anim-scale {
	animation-name:layui-m-anim-scale;
	-webkit-animation-name:layui-m-anim-scale
}
@-webkit-keyframes layui-m-anim-up {
	0% {
	opacity:0;
	-webkit-transform:translateY(1600px);
	transform:translateY(1600px)
}
100% {
	opacity:1;
	-webkit-transform:translateY(0);
	transform:translateY(0)
}
}@keyframes layui-m-anim-up {
	0% {
	opacity:0;
	-webkit-transform:translateY(1600px);
	transform:translateY(1600px)
}
100% {
	opacity:1;
	-webkit-transform:translateY(0);
	transform:translateY(0)
}
}.layui-m-anim-up {
	-webkit-animation-name:layui-m-anim-up;
	animation-name:layui-m-anim-up
}
.layui-m-layer0 .layui-m-layerchild {
	width:70%
}
.layui-m-layer1 .layui-m-layerchild {
	border:none;
	border-radius:0
}
.layui-m-layer2 .layui-m-layerchild {
	width:15vh;
	border:none;
	padding:35px 0;
	box-shadow:none;
	color:#fff;
	background-color:rgba(0,0,0,.7)
}
.layui-m-layerchild h3 {
	padding:0 5%;
	height:7.5vh;
	line-height:7.5vh;
	font-size:2.8vh;
	font-weight:400;
	border-radius:20px 20px 0 0;
	text-align:center;
	border-bottom:1px solid #E0E0E0
}
.layui-m-layerbtn span,.layui-m-layerchild h3 {
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap
}
.layui-m-layercont {
	padding:8% 10%;
	line-height:4vh;
	text-align:center
}
.layui-m-layer1 .layui-m-layercont {
	padding:0;
	text-align:left
}
.layui-m-layer2 .layui-m-layercont {
	text-align:center;
	padding:0;
	line-height:0
}
.layui-m-layer2 .layui-m-layercont i {
	width:3vh;
	height:3vh;
	margin-left:1vh;
	display:inline-block;
	background-color:#fff;
	border-radius:100%;
	-webkit-animation:layui-m-anim-loading 1.4s infinite ease-in-out;
	animation:layui-m-anim-loading 1.4s infinite ease-in-out;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both
}
.layui-m-layerbtn,.layui-m-layerbtn span {
	position:relative;
	text-align:center;
	border-radius:0 0 20px 20px
}
.layui-m-layer2 .layui-m-layercont p {
	margin-top:2vh;
	font-size:2.5vh
}
@-webkit-keyframes layui-m-anim-loading {
	0%,100%,80% {
	transform:scale(0);
	-webkit-transform:scale(0)
}
40% {
	transform:scale(1);
	-webkit-transform:scale(1)
}
}@keyframes layui-m-anim-loading {
	0%,100%,80% {
	transform:scale(0);
	-webkit-transform:scale(0)
}
40% {
	transform:scale(1);
	-webkit-transform:scale(1)
}
}.layui-m-layer2 .layui-m-layercont i:first-child {
	margin-left:0;
	-webkit-animation-delay:-.32s;
	animation-delay:-.32s
}
.layui-m-layer2 .layui-m-layercont i.layui-m-layerload {
	-webkit-animation-delay:-.16s;
	animation-delay:-.16s
}
.layui-m-layer2 .layui-m-layercont>div {
	line-height:3.3vh;
	padding-top:14px;
	margin-bottom:40px;
	font-size:3vh
}
.layui-m-layerbtn {
	display:block;
	display:-moz-box;
	display:-webkit-box;
	width:100%;
	height:7.5vh;
	line-height:7.5vh;
	font-size:0;
	border-top:1px solid #ddd;
	background-color:#FFF
}
.layui-m-layerbtn span {
	display:block;
	-moz-box-flex:1;
	box-flex:1;
	-webkit-box-flex:1;
	font-size:2.8vh;
	cursor:pointer;
	color:#0084ff
}
.layui-m-layerbtn span[yes] {
	border-radius:0 0 20px
}
.layui-m-layerbtn span[no] {
	border-right:1px solid #ddd;
	border-radius:0 0 0 20px
}
.layui-m-layerbtn span:active {
	background-color:#F6F6F6
}
.layui-m-layerend {
	position:absolute;
	right:14px;
	top:20px;
	width:60px;
	height:60px;
	border:0;
	font-weight:400;
	background:0 0;
	cursor:pointer;
	-webkit-appearance:none;
	font-size:6vh
}
.layui-m-layerend::after,.layui-m-layerend::before {
	position:absolute;
	left:10px;
	top:30px;
	content:'';
	width:18px;
	height:1px;
	background-color:#999;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	border-radius:12px
}
.layui-m-layerend::after {
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg)
}
body .layui-m-layer .layui-m-layer-footer {
	position:fixed;
	width:95%;
	max-width:100%;
	margin:0 auto;
	left:0;
	right:0;
	bottom:20px;
	background:0 0
}
.layui-m-layer-footer .layui-m-layercont {
	padding:20px;
	border-radius:20px 20px 0 0;
	background-color:rgba(255,255,255,.8)
}
.layui-m-layer-footer .layui-m-layerbtn {
	display:block;
	height:auto;
	background:0 0;
	border-top:none
}
.layui-m-layer-footer .layui-m-layerbtn span {
	background-color:rgba(255,255,255,.8)
}
.layui-m-layer-footer .layui-m-layerbtn span[no] {
	color:#FD482C;
	border-top:1px solid #c2c2c2;
	border-radius:0 0 20px 20px
}
.layui-m-layer-footer .layui-m-layerbtn span[yes] {
	margin-top:20px;
	border-radius:20px
}
body .layui-m-layer .layui-m-layer-msg {
	width:auto;
	max-width:90%;
	margin:0 auto;
	background-color:rgba(0,0,0,.7);
	color:#fff
}
.layui-m-layer-msg .layui-m-layercont {
	padding:20px 40px;
	font-size:2.8vh
}
/*html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    cursor: none;
}
canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}*/
/*span {
    color: red;
    bottom: 0px;
    position: absolute;
    right: 0px;
    display: none;
    font-size: 40pt;
    font-weight: bold;
    text-align: right;
    vertical-align: bottom;
    font-family: monospace;
    display:none;
}*/
.background-div{
  position: fixed;
  background-color: #000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.info-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 110vw;
  height: 250vw;
  background-color: #000;
  overflow-x: hidden;
	overflow-y: auto;
  background-image:url(../images/invite-mask.jpg);
  background-repeat:no-repeat;
  background-size: 100%;
  z-index: 11;
}
#mask-img {
	width: 100%;
	height: 100%;
	opacity: 0;
}
.container::-webkit-scrollbar {
    display: none;
}
.real .dire-ctrl {
	background-image:url(../images/rocker.png);
}

.real .dc-centre {
	display: none;
}
.real .dc-dire {
	background-image:url(../images/direct-shadow.png);
}

.real .direct-wrap {
	display: grid;
}
.direct-btn {
}
.real .key-btn {
	opacity:1!important;
	background-image:url(../images/button.png)!important;
}

.real .flat-btn {
	background-image:url(../images/flat-button.png)!important;;
	opacity:.7!important;;
	width:150px!important;
}
.real .kay-SE {
	top:100px!important;
}
.real .kay-ST {
	right:60px!important;;
}
.hidden {
    display: none!important;
}
.menu-back {
    background-color: #000;
    opacity: 0.5;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right:0;
    display: none;
}
.menu-container {
    background-color: white;
    width: 100vw;
    height: 60vw;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50vw;
    margin-top: -30vw;
    transform: rotate(90deg);
    display: flex;
    flex-direction: column;
    border-radius: 10px;
}
.menu-container .menu-title {
    height: 80px;
    padding: 10px 30px;
    display: flex;
    align-items: center;
    color: #777;
}
.menu-container .menu-body {
    flex: 1;
    padding: 10px;
}
.menu-body .row {
    margin-left: 5px;
    margin-right: 5px;
    padding: 15px;
    margin-bottom: 5px;
    display: flex;
}
.menu-body .row .row-title {
    width: 30%;
    color: #777;
}
.menu-body .row .row-body {
    flex: 1;
    display: flex;
}
.row-body .row-part{
    width: 50%;
}
.row-part input[type='radio']{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}
.menu-container .menu-footer {
    height: 80px;
    display: flex;
}
.menu-container .menu-footer .left-part {
    flex:1;
}
.menu-container .menu-footer .right-part {
    display: flex;
    padding: 5px 20px;
}
.menu-container .menu-footer .menu-btn {
    width: 100px;
    height: 50px;
    text-align: center;
    border: 1px solid #ddd;
    margin-right: 10px;
    padding: 4px 10px;
    border-radius: 4px;
}
.menu-btn.btn-success{
    color: #fff;
    background-color: #449d44;
    border-color: #398439;
}
#menu_btn{
    top: 120px;
    right: 60px;
    width: 120px;
    height: 80px;
    font-size: 30px;
    line-height: 80px;
    text-align: center;
    transform: rotate(90deg);
    font-weight: 700;
    color: rgba(255,255,255,.5);
    opacity: .5;
    position: absolute;
    background-size: 100% 100%;
    background-image: url(../images/8.png);
    z-index: 10;
}
#menu_btn.real{
    background-image: url(../images/flat-button.png);
}