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

html {
	font-size: 5.208vw;
	font-family: sans-serif;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	user-select: none
}

body {
	background: #202020;
	color: #fff;
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-size: .16rem;
}

a {
	text-decoration: none;
	color: #fff;
}

canvas {
	position: fixed;
}

.page {
	position: absolute;
	display: flex;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
	font-size: .15rem;
	line-height: .4rem;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
}

.page div {
	padding: 0 .05rem;
	display: inline-block;
}

.page .current {
	height: .4rem;
	padding: 0;
}

.page .current div {
	display: block;
	font-size: .15rem;
	line-height: .4rem;
}

.symbol div {
	pointer-events: none;
	position: absolute;
	top: calc(50% - 11px);
	width: 22px;
	height: 22px;
	opacity: 0;
}

.symbol div svg {
	fill: #fff;
}

.symbol div:nth-child(1) {
	left: 16.19792vw
}

.symbol div:nth-child(2) {
	right: 16.19792vw
}

.symbol div:nth-child(3) {
	right: calc(50% - 11px)
}

.title {
	position: absolute;
	display: flex;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: .40rem;
	font-weight: normal;
	height: .6rem;
	line-height: .6rem;
	overflow: hidden;
	pointer-events: none;
	text-align: center;
	opacity: 0;
}

.top_title {
	position: fixed;
	top: 3%;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
}

.percentage {
	position: absolute;
	font-size: .18rem;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}


@media only screen and (max-width:768px){
body{ overflow:auto; overflow-x:hidden;}
}

/*# sourceMappingURL=main.css.map*/