body {
	background: lightblue;
	padding: 0;
	margin: 0;
	font: 20px/1 HanHei SC, PingHei, PingFang SC, STHeitiSC-Light, Helvetica Neue, Helvetica, Arial, sans-serif;
	overflow: hidden;
	cursor: default;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-moz-font-feature-settings: "liga", "kern";
	direction: ltr;
	text-align: left
}

.r {
	float: right
}

.l {
	float: left
}

.clear {
	clear: both
}

b {
	width: 20px;
	height: 20px;
	padding: 2px;
	border: 2px solid #879372;
	margin: 0 2px 2px 0;
	float: left
}

b,
b:after {
	display: block
}

b:after {
	content: "";
	width: 12px;
	height: 12px;
	background: #879372;
	overflow: hidden
}

b.c {
	border-color: #000
}

b.c:after {
	background: #000
}

b.d {
	border-color: #560000
}

b.d:after {
	background: #560000
}

.bg {
	background: url(TB1qq7kNXXXXXacXFXXXXXXXXXX-400-186.png) no-repeat;
	overflow: hidden
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0
}

.app {
	width: 640px;
	padding-top: 42px;
	/**box-shadow: inset 0 0 10px #fff;**/
	border-radius: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -480px 0 0 -320px;
	background: lightblue
}

.rect {
	width: 480px;
	padding: 45px 0 35px;
	border: solid #000;
	border-width: 0 10px 10px;
	margin: 0 auto;
	position: relative
}

.rect.drop {
	-webkit-transform: translateY(5px);
	transform: translateY(5px)
}

.screen {
	width: 390px;
	height: 478px;
	border: 5px solid;
	border-color: #987f0f lightblue lightblue #987f0f;
	margin: 0 auto;
	position: relative
}

.screen .panel {
	width: 380px;
	height: 468px;
	margin: 0 auto;
	background: #9ead86;
	padding: 8px;
	border: 2px solid #494536
}

.state {
	width: 108px;
	position: absolute;
	top: 0;
	right: 15px
}

.state p {
	line-height: 47px;
	height: 57px;
	padding: 10px 0 0;
	white-space: nowrap;
	clear: both
}

.state .bottom {
	position: absolute;
	width: 114px;
	top: 426px;
	left: 0
}

.load {
	width: 240px;
	height: 240px;
	float: left;
	position: relative;
	color: #fff;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -120px 0 0 -120px
}

@-webkit-keyframes loads {

	0%,
	80%,
	to {
		box-shadow: 0 0 #efcc19;
		height: 4em
	}

	40% {
		box-shadow: 0 -2em #efcc19;
		height: 5em
	}
}

@keyframes loads {

	0%,
	80%,
	to {
		box-shadow: 0 0 #efcc19;
		height: 4em
	}

	40% {
		box-shadow: 0 -2em #efcc19;
		height: 5em
	}
}

.load p {
	position: absolute;
	bottom: 0;
	left: -25%;
	width: 150%;
	white-space: nowrap;
	display: none
}

.load .loader {
	text-indent: -9999em;
	margin: 8em auto;
	position: relative;
	font-size: 11px;
	-webkit-animation-delay: -.16s;
	animation-delay: -.16s
}

.load .loader,
.load .loader:after,
.load .loader:before {
	background: #efcc19;
	-webkit-animation: loads 1s infinite ease-in-out;
	animation: loads 1s infinite ease-in-out;
	width: 1em;
	height: 4em
}

.load .loader:after,
.load .loader:before {
	position: absolute;
	top: 0;
	content: ""
}

.load .loader:before {
	left: -1.5em;
	-webkit-animation-delay: -.32s;
	animation-delay: -.32s
}

.load .loader:after {
	left: 1.5em
}

.decorate h1 {
	text-align: center;
	font-weight: 400;
	top: -12px;
	margin: 0;
	padding: 0;
	font-size: 30px
}

.decorate .topBorder,
.decorate h1 {
	position: absolute;
	width: 100%;
	left: 0
}

.decorate .topBorder {
	height: 10px;
	top: 0;
	overflow: hidden
}

.decorate .topBorder span {
	display: block;
	width: 10px;
	height: 10px;
	overflow: hidden;
	background: #000
}

.decorate .topBorder span.mr {
	margin-right: 10px
}

.decorate .topBorder span.ml {
	margin-left: 10px
}

.decorate .view {
	position: absolute;
	right: -70px;
	top: 20px;
	width: 44px
}

.decorate .view em {
	display: block;
	width: 22px;
	height: 22px;
	overflow: hidden;
	float: left
}

.decorate .view p {
	height: 22px;
	clear: both
}

.decorate .view.l {
	right: auto;
	left: -70px
}

.guide {
	position: absolute;
	left: 115%;
	right: 115%;
	text-align: center;
	line-height: 1;
	white-space: nowrap
}

.guide.right {
	right: auto;
	bottom: 5%;
	display: none;
}

.guide.left {
	left: auto;
	bottom: 5%;
	display:none;
}

.guide p {
	text-align: left;
	margin-bottom: 350px;
	opacity: .5
}

.guide p iframe {
	margin-top: 20px
}

.guide a {
	color: #005850;
	font-size: 30px;
	position: relative;
	z-index: 1;
	cursor: alias;
	text-decoration: none
}

.guide.qr {
	left: auto;
	top: 5%;
	width: 190px;
	height: 190px;
	opacity: .45;
	padding: 0 0 40px 40px;
	text-align: right;
	display: none;
}

.guide.qr:hover img {
	width: 100%;
	height: 100%
}

.guide.qr img {
	width: 38px;
	height: 38px
}

.guide>div {
	width: 100px;
	height: 54px;
	background: #364d4b;
	display: inline-block;
	border-radius: 4px;
	position: relative;
	color: #acc3c1;
	font-size: 16px
}

.guide>div em {
	display: block;
	width: 0;
	height: 0;
	border: 6px solid;
	border-color: transparent transparent #acc3c1;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -9px 0 0 -6px
}

.guide>div:after,
.guide>div:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 4px;
	box-shadow: inset 0 5px 10px hsla(0, 0%, 100%, .15)
}

.guide>div:before {
	box-shadow: inset 0 -5px 10px rgba(0, 0, 0, .15)
}

.guide .up {
	height: 60px;
	display: block;
	margin: 0 auto 2px
}

.guide .down {
	margin: 0 10px
}

.guide .space {
	left: auto;
	bottom: 5%;
	height: 80px;
	width: 400px;
	line-height: 80px;
	letter-spacing: 2px
}

.next div {
	height: 22px;
	width: 88px;
	float: right
}

.music {
	width: 25px;
	height: 21px;
	background-position: -175px -75px;
	position: absolute;
	top: 2px;
	left: -12px
}

.music.c {
	background-position: -150px -75px
}

.pause {
	width: 20px;
	height: 18px;
	background-position: -100px -75px;
	position: absolute;
	top: 3px;
	left: 18px
}

.pause.c {
	background-position: -75px -75px
}

.number {
	height: 24px;
	font-size: 14px;
	float: right
}

.number span {
	float: left;
	width: 14px;
	height: 24px
}

.number .s_0 {
	background-position: -75px -25px
}

.number .s_1 {
	background-position: -89px -25px
}

.number .s_2 {
	background-position: -103px -25px
}

.number .s_3 {
	background-position: -117px -25px
}

.number .s_4 {
	background-position: -131px -25px
}

.number .s_5 {
	background-position: -145px -25px
}

.number .s_6 {
	background-position: -159px -25px
}

.number .s_7 {
	background-position: -173px -25px
}

.number .s_8 {
	background-position: -187px -25px
}

.number .s_9 {
	background-position: -201px -25px
}

.number .s_n {
	background-position: -215px -25px
}

.number .s_d {
	background-position: -243px -25px
}

.number .s_d_c {
	background-position: -229px -25px
}

.keyboard {
	width: 580px;
	height: 330px;
	margin: 20px auto 0;
	position: relative
}

.button {
	text-align: center;
	color: #111;
	position: absolute;
	white-space: nowrap;
	line-height: 1.6;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.button.s2 {
	font-size: 16px
}

.button span.position {
	position: absolute;
	top: 5px;
	left: 102px
}

.button i {
	display: block;
	position: relative;
	border: 1px solid #000;
	border-radius: 50%;
	box-shadow: 0 3px 3px rgba(0, 0, 0, .2)
}

.button i:after,
.button i:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	box-shadow: inset 0 5px 10px hsla(0, 0%, 100%, .8)
}

.button i:after {
	box-shadow: inset 0 -5px 10px rgba(0, 0, 0, .8)
}

.button i.active:before {
	box-shadow: inset 0 -3px 6px hsla(0, 0%, 100%, .6)
}

.button i.active:after {
	box-shadow: inset 0 5px 5px rgba(0, 0, 0, .6)
}

.button.blue i {
	background: yellow;
	background: -moz-linear-gradient(top, #6e77ef, #6e77ef)
}

.button.green i {
	background: #2dc421;
	background: -moz-linear-gradient(top, #4bc441, #4bc441)
}

.button.red i {
	background: #dd1a1a;
	background: -moz-linear-gradient(top, #dc3333, #dc3333)
}

.button.s0 i {
	width: 160px;
	height: 160px
}

.button.s1 i {
	width: 100px;
	height: 100px
}

.button.s2 i {
	width: 52px;
	height: 52px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, .2)
}

.button.s2 i:after,
.button.s2 i:before {
	box-shadow: inset 0 3px 6px hsla(0, 0%, 100%, .8)
}

.button.s2 i:after {
	box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .8)
}

.button.s2 i.active:before {
	box-shadow: inset 0 -1px 2px hsla(0, 0%, 100%, .6)
}

.button.s2 i.active:after {
	box-shadow: inset 0 3px 3px rgba(0, 0, 0, .7)
}

.button.s1 em {
	display: block;
	width: 0;
	height: 0;
	border: 8px solid;
	border-color: transparent transparent #111;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -12px 0 0 -8px
}

.logo {
	width: 224px;
	height: 200px;
	left: 12px;
	text-align: center;
	overflow: hidden
}

.logo,
.logo p {
	position: absolute;
	top: 100px
}

.logo p {
	width: 100%;
	line-height: 1.4;
	left: 0;
	font-family: initial;
	letter-spacing: 6px;
	text-shadow: 1px 1px 1px hsla(0, 0%, 100%, .35)
}

.logo .dragon {
	width: 80px;
	height: 86px;
	margin: 0 auto
}

.logo .dragon,
.logo .dragon.l1,
.logo .dragon.r1 {
	background-position: 0 -100px
}

.logo .dragon.l2,
.logo .dragon.r2 {
	background-position: -100px -100px
}

.logo .dragon.l3,
.logo .dragon.r3 {
	background-position: -200px -100px
}

.logo .dragon.l4,
.logo .dragon.r4 {
	background-position: -300px -100px
}

.logo .dragon.l1,
.logo .dragon.l2,
.logo .dragon.l3,
.logo .dragon.l4 {
	transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1)
}

.matrix {
	border: 2px solid #000;
	padding: 3px 1px 1px 3px;
	width: 228px
}

.matrix p {
	width: 220px;
	height: 22px
}