@charset "utf-8";

* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body,
h1,
h2,
h3,
p,
div,
ol,
ul,
input,
button {
	margin: 0;
	padding: 0
}

body {
	-webkit-text-size-adjust: 100%;
	color: #333333;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	font-family: PingFangSC-Regular, Helvetica, "Droid Sans", Arial, sans-serif;
}

ol,
ul {
	list-style: none
}

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

input,
button,
textarea {
	border: 0;
	border-radius: 0;
	background: transparent;
	-webkit-appearance: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	outline: none;
}

button {
	outline: none
}

.view {
	position: absolute;
	width: 750px;
	height: 100%;
	overflow: hidden;
	left: 50%;
	margin-left: -375px;
	background-color: #191533;
}

.page {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-size: cover;
	background-position: center;
	background-color: #191533;
	display: none;
}

.page_transition {
	transition: transform 0.45s ease;
}

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

.page_box.fill {
	height: 100%;
}

.page_box.cover {}

.page_box.contain {}

.scrollview {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.preload {
	display: none;
}

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

.music_btn {
	position: fixed;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	height: 65px;
	width: 65px;
	top: 58px;
	right: 48px;
	background-image: url(../img/music.png);
}

.back {
	position: fixed;
	top: 58px;
	left: 48px;
}
.back2 {
	position: fixed;
	top: 58px;
	left: 48px;
}

.music_play {
	animation: shunshi 2s 0s linear infinite;
}

.music_pause {
	animation: none;
}

.page_down {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 3%;
	opacity: 0;
	margin: auto;
}

.page_down {
	animation: fadeIn 0.5s 1.5s ease forwards, ufo 1.5s 0s ease infinite alternate;
}

.page_0 {
	display: block;
}

.loader_spin {
	position: absolute;
	width: 140px;
	height: auto;
	top: 50%;
	left: 0;
	right: 0;
	margin: -70px auto auto auto;
	animation: shunshi 2s 0s linear infinite;
	-webkit-animation: shunshi 2s 0s linear infinite;
}

.loader_text {
	position: absolute;
	width: 100%;
	height: 140px;
	left: 0%;
	top: 50%;
	text-align: center;
	line-height: 140px;
	font-size: 36px;
	color: white;
	margin-top: -70px;
}

.page_1 {}

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

.rgba_page_blue {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(23, 17, 79, 0.74);
}

.rgba_page_blue img {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}

.idx_item img {
	opacity: 0;
}

@keyframes top_idx {
	0% {
		transform: translateY(-30px);
		opacity: 0
	}

	to {
		transform: translateY(0px);
		opacity: 1
	}
}

.p_1_0 {
	top: 515px;
	animation: top_idx 1s 0s ease-in-out forwards;
}

.p_1_1 {
	top: 579px;
	animation: top_idx 1s 0.5s ease-in-out forwards;
}

.p_1_2 {
	top: 642px;
	animation: top_idx 1s 1s ease-in-out forwards;
}

.p_1_3 {
	top: 706px;
	animation: top_idx 1s 1.5s ease-in-out forwards;
}

.p_1_4 {
	top: 769px;
	animation: top_idx 1s 2s ease-in-out forwards;
}


.p_1_5 {
	top: 832px;
	animation: top_idx 1s 2.5s ease-in-out forwards;
}

.p_1_6 {
	top: 896px;
	animation: top_idx 1s 3s ease-in-out forwards;
}

.p_1_7 {
	top: 1135px;
	animation: fadeIn 1s 3.5s ease-in-out forwards, shine 1s 4s ease-in-out infinite alternate;
}

.page_2 {
	background-color: #091042;
}

.logo {
	position: absolute;
	top: 94px;
	left: 0;
	right: 0;
	margin: auto;
}

.p_2_0 {
	position: absolute;
	top: 650px;
	left: 0;
	right: 0;
	margin: auto;
	opacity: 0;
	transform-origin: bottom;
	animation: lightSpeedInRight 1s 0s ease-in-out forwards;
}

.p_2_1 {
	position: absolute;
	top: 1010px;
	left: 0;
	right: 0;
	margin: auto;
	/* 	opacity: 0;
	transform-origin: bottom;
	animation: flipInY 1s 1s ease-in-out forwards; */
}

.p_2_2 {
	position: absolute;
	top: 2390px;
	left: 0;
	right: 0;
	margin: auto;
	/* 	opacity: 0;
	transform-origin: bottom;
	animation: flipInY 1s 2s ease-in-out forwards; */
}

.p_2_2_d {
	position: absolute;
	width: 31px;
	height: auto;
	top: 3210px;
	left: 0;
	right: 0;
	margin: auto;
	opacity: 0;
	animation: fadeIn 1s 2.5s ease forwards, ufo 1s -1s ease-in-out infinite alternate;
}

.p_2_3 {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 110px;
}

.p_2_3>div {
	position: absolute;
	height: 100%;
	width: 50%;
	top: 0;
}

.p_2_3 .btn_1 {
	left: 0;
}

.p_2_3 .btn_2 {
	right: 0;
}

.p_2_box {}

.p_2_4 {
	position: absolute;
	left: 93px;
	top: 121px;
	animation: y_40 2s -1s ease-in-out infinite alternate;
}

.p_2_5 {
	position: absolute;
	left: 167px;
	top: 397px;
	animation: btn 0.5s -1s ease-in-out infinite alternate;
}

.p_2_6 {
	position: absolute;
	left: 78px;
	top: 413px;
	animation: y_40 2.5s -1s ease-in-out infinite alternate;
}

.p_2_7 {
	position: absolute;
	left: 91px;
	top: 400px;
	animation: y_40 2s -1.5s ease-in-out infinite alternate;
}

.p_2_8 {
	position: absolute;
	left: 654px;
	top: 639px;
	animation: shunshi 5s 0s linear infinite;
}

.p_2_9 {
	position: absolute;
	left: 0px;
	top: 889px;
	animation: y_40 1.5s -1s ease-in-out infinite alternate;
}

.p_2_10 {
	position: absolute;
	left: 101px;
	top: 937px;
	width: 549px;
	opacity: 0;
	animation: sbin 1.5s 0s ease-in-out forwards;
}

.p_2_11 {
	position: absolute;
	left: 101px;
	top: 1067px;
	width: 549px;
	opacity: 0;
	animation: sbin 1.5s 0.2s ease-in-out forwards;
}

.p_2_12 {
	position: absolute;
	left: 101px;
	top: 1197px;
	width: 549px;
	opacity: 0;
	animation: sbin 1.5s 0.4s ease-in-out forwards;
}

.p_2_13 {
	position: absolute;
	left: 101px;
	top: 1332px;
	width: 266px;
	opacity: 0;
	animation: leftin 1.5s 0.8s ease-in-out forwards;
}

.p_2_14 {
	position: absolute;
	left: 384px;
	top: 1332px;
	width: 266px;
	opacity: 0;
	animation: rightin 1.5s 0.8s ease-in-out forwards;
}

.p_2_15 {
	position: absolute;
	left: 239px;
	top: 1554px;
	width: 272px;
}

.p_2_16 {
	position: absolute;
	left: 0px;
	top: 1701px;
	width: 390px;
}

.jq_btn{
	transition: all 0.4s !important;
}
.jq_btn.animal{
	transform: scale(0.9) !important;
}

.input_box {
	position: absolute;
	top: 486px;
	left: 0;
	right: 0;
	margin: auto;
	width: 659px;
	height: 673px;
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0;
	animation: topin 1s 0.5s ease-in-out forwards;
}

.p_3_0 {
	position: absolute;
	top: 1219px;
	left: 0;
	right: 0;
	margin: auto;
	opacity: 0;
	animation: bottomin 1s 0.5s ease-in-out forwards;
}

.p_3_item,
.p_4_item,
.p_5_item {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}

.p_3_a {
	top: 424px;
}

.p_3_b {
	top: 570px;
}

.p_3_c {
	top: 720px;
}

.p_3_d {
	top: 876px;
}

.p_3_e {
	top: 1018px;
}

.p_3_f {
	top: 1170px;
}

.p_3_g {
	top: 1318px;
}

.p_4_a {
	top: 360px;
}

.p_4_b {
	top: 506px;
}

.p_4_c {
	top: 650px;
}

.p_4_d {
	top: 798px;
}

.p_4_e {
	top: 942px;
}

.p_4_f {
	top: 1090px;
}

.p_4_g {
	top: 1234px;
}

.p_4_h {
	top: 1380px;
}

.p_5_1 {
	top: 644px;
}

.p_5_2 {
	top: 794px;
}
.p_5_2_t{
top: 944px;	
}
.input_box input {
	position: absolute;
	left: 128px;
	height: 66px;
	color: #b9f0ff;
	font-size: 24px;
}

.input_box .ipt_1 {
	top: 82px;
	width: 120px;
}

.input_box .ipt_2 {
	top: 82px;
	left: 370px;
	width: 220px;
}

.input_box .ipt_3 {
	top: 194px;
	width: 477px;
}

.input_box .ipt_4 {
	top: 302px;
	width: 477px;
}

.input_box .ipt_5 {
	top: 412px;
	width: 477px;
}

.input_box .ipt_6 {
	top: 524px;
}

.input_box .btn_yzm {
	position: absolute;
	width: 165px;
	top: 526px;
	left: 432px;
	height: 66px;
	color: #b9f0ff;
	font-size: 26px;
	line-height: 66px;
	letter-spacing: 3px;
}

.input_box .ipt_chance {
	position: absolute;
	top: 490px;
	left: 50px;
	width: 556px;
	height: 150px;
	display: none;
}

.input_box .ipt_chance span {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 70px;
}

.rgba_page_blue .item_t {
	position: absolute;
	top: 522px;
	left: 0;
	right: 0;
	opacity: 0;
	margin: auto;
	animation: topin 1s 0.5s ease-in-out forwards;
}

.rgba_page_blue .item_b {
	position: absolute;
	top: 1148px;
	left: 0;
	right: 0;
	opacity: 0;
	margin: auto;
	animation: bottomin 1s 0.5s ease-in-out forwards;
}

.p_5_ipt {
	position: absolute;
	width: 300px;
	left: 170px;
	top: 640px;
	height: 66px;
	color: #b9f0ff;
	font-size: 24px;
	opacity: 0;
	animation: topin 1s 0.5s ease-in-out forwards;
}

input::-webkit-input-placeholder {
	/* WebKit browsers */
	color: #c4efff;
}

.btn_chax {
	position: absolute;
	top: 948px;
	left: 0;
	right: 0;
	margin: auto;
}

@keyframes bottomin {
	from {
		opacity: 0;
		transform: translateY(100px);
	}

	to {
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes btn {
	from {
		transform: scale(1, 1);
	}

	to {
		transform: scale(0.9, 0.9);
	}
}

.p_12_4 {
	position: absolute;
	width: 642px;
	height: auto;
	left: 59px;
	top: 490px;
	opacity: 0;
	animation: flipInY 1s 1s ease-in forwards;
}


.load_page {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	background-color: rgba(0, 0, 0, 0.5);
}

.load_page span {
	position: absolute;
	top: 48%;
	left: 0;
	width: 100%;
	color: #fff;
	font-size: 30px;
	text-align: center;
}

.layui-layer-dialog .layui-layer-content {
	font-size: 20px !important;
}
.page_4,.page_3{background-color: #151545;}
.page_4_b{    background-color: rgba(23, 17, 79, 0.74);}
.t_169{	top: -169px;}