* {
	padding: 0;
	margin: 0;
	word-break: break-all;
	white-space: normal;
}

html,
body,
#app {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #000;
}

li {
	list-style: none;
}

ul {
	padding: 0;
	margin: 0
}

*,
*:before,
*:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
}

input,
button,
textarea {
	padding: 0;
	margin: 0;
	outline: none;
	-webkit-appearance: none;
	border-radius: 0;
	border: none;
	background-color: #fff;
}

.wrapper{
	width: 100%;
	height: 100%;
	/*background: url(img/5EE79F19078EDD93C6699433636006AF.jpg) no-repeat center;*/
	/*background-size: cover;*/
}

/*相机*/
.videoBox {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

video {
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
}

.main,.Radar{
	position: absolute;
	z-index: 4;
	top: 0;
	left: 0;
}
.main{
	z-index: 3;
	width: 100%;
	height: 100%;
}
.main canvas{
	position: absolute;
	top: 0;
	left: 0;
}
.deviceOrientation{
	position: absolute;
	top: 10px;
	z-index: 4;
	right: 10px;
	color: #333;
	font-size: 12px;
	background-color: rgba(255,255,255,0.7);
	padding: 5px 15px;
	border-radius: 4px;
}
.geolocation{
	position: absolute;
	top: 40px;
	z-index: 4;
	right: 10px;
	color: #333;
	font-size: 12px;
	background-color: rgba(255,255,255,0.7);
	padding: 5px 15px;
	border-radius: 4px;
}
.loadingStart{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-color: #fff;
	z-index: 9999;
}
.loadingStart p{
	font-size:12px;
	color: #999;
	padding-top: 3px;
}
.threeVideo{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.iosTip{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
	z-index: 9999;
	display: none;
}
.iosTip img{
	width: 90%;
	float: right;
}



.hand {
	width: 25%;
	min-width: 15em;
	text-align: center;
	/*margin: 20% auto;*/
	padding: 0;
	border-bottom: .25em solid #70e94e;
}
.thumb {
	display: inline-block;
	width: 1em;
	height: 1.5em;
	background-color: #bb357a;
	margin: 1em .75em 0 .25em;
	border-left: .5em solid #dc84b1;
	border-radius: 25% 15% 15% 40%;
}
.finger {
	display: inline-block;
	width: 1.5em;
	height: 2.5em;
	background-color: #bb357a;
	margin: 0 .25em;
	border-bottom: .5em solid #dc84b1;
	border-left: .25em solid #ab3070;
	border-radius: 15% 15% 25% 25%;
	animation-name: tap;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}
.finger:nth-child(2) {
	animation-delay: .8s;
}
.finger:nth-child(3) {
	animation-delay: .7s;
}
.finger:nth-child(4) {
	animation-delay: .6s;
}
.finger:nth-child(5) {
	animation-delay: .5s;
}
@keyframes tap {
	0% {
		transform: translateY(0);
	}
	60% {
		transform: translateY(-1em);
	}
	70% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(0);
	}
}