body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

body {
	width: 100vw;
	height: 100vh;
	background: url('../images/bg.png');
	background-size: 100% 100%;
	/*display: flex;*/
	/*justify-content: center;*/
	/*align-items: center;*/
}

.none {
	display: none;
}

.cameraBox {
	position: fixed;
	z-index: 100;
	width: 100%;
	text-align: center;
}

#openCamera {
	width: 200px;
	height: auto;
	border: none;
	border-radius: 30px;
	position: absolute;
	z-index: 99;
	top: 47%;
	left: 50%;
	background: transparent;
	opacity: 0;
	transform: translate(-50%, -50%);
	animation: 1s openCameraAnime ease-in 0.6s forwards;
}
@keyframes openCameraAnime{
	from{transform:transform: translate(-40%, -40%);opacity: 0;}
	to{transform:transform: translate(-50%, -50%);opacity: 1;}
}
#openCamera >img{
	width: 100%;
	height: 100%;
}
.tipsIco{
	width: 6vw;
	position: absolute;
	top: 56%;
	left: 50%;
	transform: translateX(-50%);
	animation: 1s tipsIcoAnime alternate infinite;
}
@keyframes tipsIcoAnime{
	from{opacity: 0;}
	to{opacity: 1;}
}
.tipsIco>img{
	width: 100%;
	height: 100%;
}
.tipsText{
	width: 60vw;
	position: absolute;
	top: 60%;
	left: 0;
	left: 50%;
	transform: translateX(-50%);
}
.tipsText>img{
	width: 100%;
	height: 100%;
}

#start {
	width: 40vw;
	height: 50px;
	border: none;
	border-radius: 30px;
	position: absolute;
	z-index: 99;
	top: 10%;
	left: 50%;
	color: #ffffff;
	background-size: 400%;
	background: #a97e33;
	transform: translate(-50%, -50%);
}
#stop {
	width: 40vw;
	height: 50px;
	border: none;
	border-radius: 30px;
	position: absolute;
	z-index: 99;
	top: 20%;
	left: 50%;
	color: #ffffff;
	background-size: 400%;
	background: #a97e33;
	transform: translate(-50%, -50%);
}

.Scancode {
	position: fixed;
	z-index: 999;
	width: 60vw;
	height: 60vw;
	display: none;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: url(../images/scancodeBG.png);
	background-size: 100%;
}

.Scancode::after {
	position: absolute;
	content: '';
	width: 80%;
	height: 5px;
	left: 50%;
	top: 10%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: url(../images/scanLight.png) no-repeat;
	background-size: 100%;
	animation: ScancodeAnime 1s infinite linear alternate;
}

.Scancode::before {
	position: absolute;
	content: '';
	width: 50vw;
	height: 11vw;
	left: 50%;
	transform: translateX(-50%);
	bottom: -60px;
	background: url(../images/tipsText.png) no-repeat;
	background-size: 100%;
}

@keyframes ScancodeAnime {
	from {
		top: 10%;
	}

	to {
		top: 90%;
	}
}

.getSafari {
	width: 100px;
	height: 100px;
	position: fixed;
	right: 10px;
	top: 0px;
	color: white;
	display: none;
}

.getSafari span {
	position: absolute;
	top: 0;
	left: 0;
	animation: getSafariSpan 1s infinite linear alternate;
}

.getSafari span>img {
	width: 100%;
	height: 100%;
}

.getSafari i {
	position: absolute;
	top: 15vh;
	left: 0;
}

@keyframes getSafariSpan {
	from {
		transform: translateX(-20px);
		translateY(0px);
	}

	to {
		transform: translateX(10px);
		translateY(-30px);
	}
}