@charset "utf-8";
body {
	margin: 0;
	padding: 0;
	font-family: "微软雅黑";
}

* {
	-webkit-tap-highlight-color: transparent;
}

.page {
	position: absolute;
	left: 0;
	top: 0;
	background-size: cover;
	background-position: center;
	display: none;
	overflow: hidden;
	background-image: url(../img/bg.jpg);
	background-color: #000033;
	transform: translate(0%, 0%);
	-ms-transform: translate(0%, 0%);
	-moz-transform: translate(0%, 0%);
	-webkit-transform: translate(0%, 0%);
}

.page_transition {
	transition: transform 0.4s ease;
	-ms-transition: transform 0.4s ease;
	-moz-transition: transform 0.4s ease;
	-webkit-transition: transform 0.4s ease;
}

.page_outer,
.page_inner {
	position: absolute;
}

.preload {
	display: none;
}

.preload img {
	width: 1px;
	height: 1px;
	display: none;
}

.music_btn {
	position: fixed;
	width: 30px;
	height: 30px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	height: 30px;
	width: 30px;
	top: 15px;
	right: 15px;
}

.music_play {
	background-image: url(../img/music.png);
	animation: shunshi 2s 0s linear infinite;
	-ms-animation: shunshi 2s 0s linear infinite;
	-moz-animation: shunshi 2s 0s linear infinite;
	-webkit-animation: shunshi 2s 0s linear infinite;
}

.music_pause {
	background-image: url(../img/music_close.png);
}

.page_down {
	position: absolute;
	width: 8%;
	height: auto;
	left: 46%;
	bottom: 3%;
	opacity: 0;
}

.page_0 {
	display: block;
}

.loader_text {
	position: absolute;
	width: 100%;
	height: auto;
	text-align: center;
	color: white;
	font-size: 4vw;
	left: 0;
	top: 45%;
}

.page .page_down {
	animation: fadeIn 0.5s 1.5s ease forwards, ufo 1.5s 0s ease infinite alternate;
	-ms-animation: fadeIn 0.5s 1.5s ease forwards, ufo 1.5s 0s ease infinite alternate;
	-moz-animation: fadeIn 0.5s 1.5s ease forwards, ufo 1.5s 0s ease infinite alternate;
	-webkit-animation: fadeIn 0.5s 1.5s ease forwards, ufo 1.5s 0s ease infinite alternate;
}

.page_1 {
	background-image: url(../img/bg_1.jpg);
}

.page_1_12 {
	position: absolute;
	width: 14.67%;
	height: auto;
	left: 84.80%;
	top: 53.42%;
	animation: shunshi 3s 0s linear infinite;
	-ms-animation: shunshi 3s 0s linear infinite;
	-moz-animation: shunshi 3s 0s linear infinite;
	-webkit-animation: shunshi 3s 0s linear infinite;
}

.page_1_11 {
	position: absolute;
	width: 94.00%;
	height: auto;
	left: 6.00%;
	top: 5.91%;
	animation: shine 0.5s 0s linear infinite alternate;
	-ms-animation: shine 0.5s 0s linear infinite alternate;
	-moz-animation: shine 0.5s 0s linear infinite alternate;
	-webkit-animation: shine 0.5s 0s linear infinite alternate;
}

.page_1_10 {
	position: absolute;
	width: 28.93%;
	height: auto;
	left: 74.40%;
	top: 0.93%;
	animation: ufo 4s 0s linear infinite alternate;
	-ms-animation: ufo 4s 0s linear infinite alternate;
	-moz-animation: ufo 4s 0s linear infinite alternate;
	-webkit-animation: ufo 4s 0s linear infinite alternate;
}

.page_1_9 {
	position: absolute;
	width: 65.07%;
	height: auto;
	left: 20.13%;
	top: -14.85%;
	opacity: 0;
	transform-origin: bottom center;
	-ms-transform-origin: bottom center;
	-moz-transform-origin: bottom center;
	-webkit-transform-origin: bottom center;
	animation: sbin 1s 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
	-ms-animation: sbin 1s 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
	-moz-animation: sbin 1s 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
	-webkit-animation: sbin 1s 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.page_1_8 {
	position: absolute;
	width: 78.53%;
	height: auto;
	left: 10.13%;
	top: 16.71%;
	opacity: 0;
	transform-origin: 50% 150%;
	-ms-transform-origin: 50% 150%;
	-moz-transform-origin: 50% 150%;
	-webkit-transform-origin: 50% 150%;
	animation: nishiin 1s 0s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
	-ms-animation: nishiin 1s 0s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
	-moz-animation: nishiin 1s 0s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
	-webkit-animation: nishiin 1s 0s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.page_1_7 {
	position: absolute;
	width: 12.67%;
	height: auto;
	left: 0.67%;
	top: 36.54%;
	animation: rocket 2s 0s linear infinite alternate;
	-ms-animation: rocket 2s 0s linear infinite alternate;
	-moz-animation: rocket 2s 0s linear infinite alternate;
	-webkit-animation: rocket 2s 0s linear infinite alternate;
}

@keyframes rocket {
	from {
		transform: translate(0%, 0%);
	}
	to {
		transform: translate(50%, -50%);
	}
}

@-ms-keyframes rocket {
	from {
		-ms-transform: translate(0%, 0%);
	}
	to {
		-ms-transform: translate(50%, -50%);
	}
}

@-moz-keyframes rocket {
	from {
		-moz-transform: translate(0%, 0%);
	}
	to {
		-moz-transform: translate(50%, -50%);
	}
}

@-webkit-keyframes rocket {
	from {
		-webkit-transform: translate(0%, 0%);
	}
	to {
		-webkit-transform: translate(50%, -50%);
	}
}

.page_1_6 {
	position: absolute;
	width: 95.87%;
	height: auto;
	left: 2.80%;
	top: 64.39%;
	opacity: 0;
	animation: ssin 1s 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
	-ms-animation: ssin 1s 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
	-moz-animation: ssin 1s 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
	-webkit-animation: ssin 1s 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.page_1_5 {
	position: absolute;
	width: 49.60%;
	height: auto;
	left: 26.40%;
	top: 72.91%;
	opacity: 0;
	animation: fadeIn 0.5s 1.5s ease forwards, ufo 2s 0s linear infinite alternate;
	-ms-animation: fadeIn 0.5s 1.5s ease forwards, ufo 2s 0s linear infinite alternate;
	-moz-animation: fadeIn 0.5s 1.5s ease forwards, ufo 2s 0s linear infinite alternate;
	-webkit-animation: fadeIn 0.5s 1.5s ease forwards, ufo 2s 0s linear infinite alternate;
}

.page_1_4 {
	position: absolute;
	width: 16.67%;
	height: auto;
	left: 4.53%;
	top: 2.28%;
}

.page_1_3 {
	position: absolute;
	width: 11.87%;
	height: auto;
	left: 22.80%;
	top: 94.26%;
}

.page_1_2 {
	position: absolute;
	width: 18.27%;
	height: auto;
	left: 22.13%;
	top: 1.69%;
}

.page_1_1 {
	position: absolute;
	width: 17.60%;
	height: auto;
	left: 4.53%;
	top: 93.33%;
}

.page_1_0 {
	position: absolute;
	width: 24.00%;
	height: auto;
	left: 69.87%;
	top: 93.67%;
}

.mission_head_bg {
	position: absolute;
	width: 31.73%;
	height: auto;
	left: 34.13%;
	top: 1.01%;
	animation: shunshi 6s 0s linear infinite;
	-ms-animation: shunshi 6s 0s linear infinite;
	-moz-animation: shunshi 6s 0s linear infinite;
	-webkit-animation: shunshi 6s 0s linear infinite;
}

.mission_main_box {
	position: absolute;
	width: 89.73%;
	height: auto;
	left: 2.93%;
	top: 21.77%;
}

.mission_show_item {
	display: none;
}

.mission_show_item:nth-child(1) {
	display: block;
}

.mission_info {
	position: absolute;
	width: 97.73%;
	height: auto;
	left: 1.47%;
	top: 1.69%;
}

.mission_head_1 {
	position: absolute;
	width: 16.53%;
	height: auto;
	left: 41.73%;
	top: 2.45%;
}

.mission_head_2 {
	position: absolute;
	width: 15.5%;
	height: auto;
	left: 41.5%;
	top: 2.9%;
}

.mission_head_3 {
	position: absolute;
	width: 16.8%;
	height: auto;
	left: 42%;
	top: 2.4%;
}

.mission_head_4 {
	position: absolute;
	width: 20.4%;
	height: auto;
	left: 39.6%;
	top: 1.8%;
}

.mission_head_5 {
	position: absolute;
	width: 20.8%;
	height: auto;
	left: 39.7%;
	top: 1.8%;
}

.mission_head_6 {
	position: absolute;
	width: 18%;
	height: auto;
	left: 40.5%;
	top: 2.1%;
}

.pop_box {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgba(16, 32, 51, 0.6);
}

.tip_main {
	position: absolute;
	width: 81.60%;
	height: auto;
	left: 5.33%;
	top: 25.06%;
}

.tip_ast {
	position: absolute;
	width: 35.60%;
	height: auto;
	left: 19.33%;
	top: 61.60%;
}

.btn_next {
	position: absolute;
	width: 21.33%;
	height: auto;
	left: 51.20%;
	top: 60.93%;
}

.pop_box {
	display: none;
}

.rule_pop_1 {
	display: block;
}

.game_ready {
	display: none;
}

.game_ready img {
	display: block;
	position: absolute;
	width: 50.4%;
	height: auto;
	left: 25.1%;
	top: 36.4%;
	opacity: 0;
}

.ready_act {
	animation: ready_act 1s 0s ease forwards;
	-ms-animation: ready_act 1s 0s ease forwards;
	-moz-animation: ready_act 1s 0s ease forwards;
	-webkit-animation: ready_act 1s 0s ease forwards;
}

@keyframes ready_act {
	from {
		transform: scale(2);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

@-ms-keyframes ready_act {
	from {
		-ms-transform: scale(2);
		opacity: 0;
	}
	to {
		-ms-transform: scale(1);
		opacity: 1;
	}
}

@-moz-keyframes ready_act {
	from {
		-moz-transform: scale(2);
		opacity: 0;
	}
	to {
		-moz-transform: scale(1);
		opacity: 1;
	}
}

@-webkit-keyframes ready_act {
	from {
		-webkit-transform: scale(2);
		opacity: 0;
	}
	to {
		-webkit-transform: scale(1);
		opacity: 1;
	}
}

.game-container {
	position: absolute;
	width: 750px;
	height: 1185px;
	left: 0;
	top: 0;
	transform-origin: left top;
	-ms-transform-origin: left top;
	-moz-transform-origin: left top;
	-webkit-transform-origin: left top;
}

.full {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.game_over_cover {
	background-color: rgba(0, 0, 0, 0.8);
	display: none;
}

.p3_top {
	position: absolute;
	width: 100%;
	height: auto;
	left: 0;
	top: 0;
}

.p3_main {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.bonus_skill {
	position: absolute;
	width: 100%;
	height: auto;
	left: 0;
	top: 67%;
}

.bonus_score {
	position: absolute;
	width: 100%;
	height: auto;
	left: 0;
	top: 30.3%;
	text-align: center;
	font-weight: bold;
	color: white;
	font-size: 7vw;
}

.btn_share {
	position: absolute;
	width: 27.4%;
	height: auto;
	left: 53.5%;
	top: 83.0%;
}

.btn_again {
	position: absolute;
	width: 27.4%;
	height: auto;
	left: 19.3%;
	top: 83.0%;
}

.share_pop {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.6);
	display: none;
}

.share_pop img {
	position: absolute;
	width: 27.3%;
	height: auto;
	left: 65.7%;
	top: 3.4%;
}

.radar_chart {
	position: absolute;
	width: 210px;
	height: 210px;
	left: 35.3333%;
	top: 39.1561%;
	transform-origin: left top;
	-ms-transform-origin: left top;
	-moz-transform-origin: left top;
	-webkit-transform-origin: left top;
}