/* GLOBAL STYLES
-------------------------------------------------- */


html,
body {
	position: relative;
	width: 100%;
	max-width: 750px;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: "kai", "Helvetica Neue", "Helvetica", "Microsoft YaHei", "宋体", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", "Simsun", "sans-self";
	-webkit-font-smoothing: antialiased;
	font-size: calc(100vw / 7.5);
	overflow: hidden;
	background-color: #004878;
}

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
em,
img,
strong,
sub,
sup,
tt,
dd,
dl,
dt,
form,
label,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
ul,
li,
p,
a,
section {
	margin: 0;
	padding: 0;
}

input,
select,
textarea {
	vertical-align: middle;
}

img {
	border: 0;
	margin: 0;
	padding: 0;
	display: block;
}

ul,
li {
	list-style-type: none;
}

a {
	blr: expression(this.onFocus=this.blur());
}

a:focus,input:focus,p:focus,div:focus{ 
    -webkit-tap-highlight-color:rgba(0,0,0,0); 
    -webkit-user-modify:read-write-plaintext-only; 
}

* {
	margin: 0;
	padding: 0;
	border: 0;
}



body {
	padding-top: constant(safe-area-inset-top);
	/*为导航栏+状态栏的高度 88px       */
	padding-left: constant(safe-area-inset-left);
	/*如果未竖屏时为0 */
	padding-right: constant(safe-area-inset-right);
	/*如果未竖屏时为0 */
	padding-bottom: constant(safe-area-inset-bottom);
	/*为底下圆弧的高度 34px */
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-user-select: none; /*webkit浏览器*/
	user-select: none;/*选中文字时避免出现蓝色背景*/
}

body::-webkit-scrollbar {
	display: none;
}

div,
a {
	tap-highlight-color: rgba(0, 0, 0, 0);
	focus-ring-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-focus-ring-color: rgba(0, 0, 0, 0);
	-moz-tap-highlight-color: rgba(0, 0, 0, 0);
	-moz-focus-ring-color: rgba(0, 0, 0, 0);
}

.music-box {
	position: absolute;
	z-index: 999;
	top: 1.5%;
	right: 2%;
	width: 6%;
	opacity: .2;
}

.music-box>img {
	width: 100%;
}

/*首页*/

@media all and (orientation: landscape) {

	/*　　横屏时的css代码　　*/
	.container {
		height: 300%;
	}
}

@media all and (orientation: portrait) {

	/*　竖屏时的css代码　　*/
	.container {
		height: 100%;
	}
}

.container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.page {
	position: absolute;
	z-index: 888;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #004878;
	background-image: url(../images/bg1.jpg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	-webkit-background-size: 100% auto;
}

.pageTemp {
	z-index: 100;
}

.main {
	position: relative;
	width: 100%;
	height: 100%;
}

.logo {
	position: absolute;
	z-index: 111;
	top: 0.35rem;
	left: 0.35rem;
	width: 40%;
}

.logo>img {
	width: 100%;
}

/**  首页  ****/
.page01-t,
.page01-btn {
	margin: 0 auto;
	width: 77%;
}

.page01-icon {
	position: relative;
	margin-top: 1.3rem;
	margin-left: 13%;
	width: 60%;
}

.page01-btn {
	margin-top: 0.3rem;
	width: 33%;
}

.page01-t>img,
.page01-icon>img,
.page01-btn>img {
	width: 100%;
}

.h01 {
	height: 0.9rem;
}

.over {
	position: absolute;
	z-index: 111;
	top: 0;
	left: 0;
	width: 100%;
}

.over>img {
	width: 100%;
}

/**  引导页  ****/
.page02-t,
.page02-btn {
	margin: 0 auto;
	width: 83%;
}

.page02-t {
	position: relative;
	padding-bottom: 26%;
}

.page02-icon {
	position: absolute;
	z-index: 111;
	left: 37%;
	bottom: 0;
	width: 37%;
}

.page02-btn {
	margin-top: 0.2rem;
	width: 33%;
}

.page02-t>img,
.page02-icon>img,
.page02-btn>img {
	width: 100%;
}

.h02 {
	height: 0.6rem;
}

/**  关 ***/
.map-box {
	position: relative;
	margin-left: 1%;
	width: 84%;
}

.map-t {
	position: absolute;
	z-index: 333;
	top: -5%;
	left: 23%;
	width: 54%;
}

.map-time {
	margin-top: 0.3rem;
	width: 100%;
	font-size: 0.3rem;
	color: #e6b577;
	text-align: center;
}

.map-time span {
	padding: 1px 13px 3px 8px;
	display: inline-block;
	vertical-align: middle;
	width: 12%;
	font-size: 0.5rem;
	color: #945704;
	text-align: center;
	font-weight: bolder;
	background-image: url(../images/time-bg.png);
	background-repeat: no-repeat;
	background-size: 100%;
	-webkit-background-size: 100%;
}

.map-b {
	position: absolute;
	z-index: 333;
	bottom: 2.5%;
	left: 26%;
	width: 48%;
}

.map-10s {
	position: absolute;
	z-index: 333;
	top: 36%;
	left: 16%;
	width: 68%;
}

.map-box>img,
.map-t>img,
.map-b>img,
.map-10s>img {
	width: 100%;
}

.hm {
	height: 0.6rem;
}

.map-c {
	position: absolute;
	z-index: 222;
	top: 0;
	left: 0;
	width: 98%;
	height: 99%;
	border-radius: 20px;
	overflow: hidden;
}

.quan-box {
	position: absolute;
	z-index: 100;
	top: 50%;
	left: 50%;
	width: 1.3rem;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-webkit-touch-callout: none;
}

.quan-box-err {
	position: absolute;
	z-index: 112;
	width: 1.3rem;
}

.quan-err {
	position: relative;
	width: 100%;
}

.quan-err-txt {
	position: absolute;
	z-index: 111;
	top: -50%;
	left: -20%;
	width: 140%;
}

.quan-box>img,
.quan-err>img,
.quan-err-txt>img {
	width: 100%;
}

.prod {
	position: absolute;
	z-index: 111;
	top: 0;
	left: 0;
	width: 0;
}

.prod-box {
	position: relative;
	width: 100%;
	-webkit-touch-callout: none;
}

.prod1 {
	top: 35.5%;
	left: 60.6%;
	width: 5.5%;
}

.prod2 {
	top: 65%;
	left: 66%;
	width: 11%;
}

.prod3 {
	top: 55.5%;
	left: 21%;
	width: 4%;
}

.prod4 {
	top: 24.8%;
	left: 46%;
	width: 4.5%;
}

.prod5 {
	top: 28.6%;
	left: 20.5%;
	width: 8.5%;
}

.prod6 {
	top: 11%;
	left: 62%;
	width: 14%;
}

.prod7 {
	top: 39%;
	left: 1.5%;
	width: 14.5%;
}

.prod8 {
	top: 67.2%;
	left: 85.5%;
	width: 7%;
}

.prod-box>img {
	width: 100%;
}

/******** 弹窗 *********/
.pageTan {
	position: absolute;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .6);
}

/*规则*/
.rule-box,
.rule-btn {
	margin: 0 auto;
	width: 78%;
}

.rule-box {
	position: relative;
	padding-bottom: 15%;
}

.rule-c {
	width: 100%;
	background-image: url(../images/rule-bg.png);
	background-repeat: no-repeat;
	background-size: 100%;
	-webkit-background-size: 100%;
}

.rule-btn {
	margin-top: 0.5rem;
	width: 25%;
	-webkit-touch-callout: none;
}

.rule-icon {
	position: absolute;
	z-index: 111;
	right: 10%;
	bottom: 0;
	width: 28%;
}

.rule-c>img,
.rule-btn>img,
.rule-icon>img {
	width: 100%;
}

/*luck  找到物体*/
.luck-box {
	position: relative;
	margin: 0 auto;
	width: 83%;
	background-image: url(../images/luck-bg.png);
	background-repeat: no-repeat;
	background-size: 100%;
	-webkit-background-size: 100%;
}

.luck-box>img {
	width: 100%;
}

.luck-icon,
.luck-btn {
	position: absolute;
	z-index: 111;
	bottom: 38.5%;
	left: 49%;
	width: 23.5%;
}

.luck-btn {
	bottom: 8.5%;
	left: 30%;
	width: 40%;
}

.luck-icon>img,
.luck-btn>img {
	width: 100%;
}

/** 称号 **/
.hao-c {
	position: relative;
	margin: 0.15rem auto 0;
	width: 82%;
	/* -webkit-touch-callout: none; */
}

.hao-t {
	margin: 0 auto;
	width: 96%;
}

.hao-info {
	position: absolute;
	z-index: 111;
	top: 10.5%;
	left: 0;
	width: 100%;
}

.hao-code {
	position: relative;
	width: 100%;
}

.hao-btn {
	position: absolute;
	z-index: 111;
	bottom: 5%;
	right: 0;
	width: 27%;
}

.hao-btn-over {
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
}

.hao-next {
	position: absolute;
	z-index: 111;
	top: 29%;
	right: 0;
	width: 23%;
}

.hao-img{
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.hao-t>img,
.hao-info>img,
.hao-c>img,
.hao-code>img,
.hao-btn>img,
.hao-next>img,
.hao-img>img,
.hao-btn-over>img{
	width: 100%;
}

/* .hao-c>img {
	pointer-events: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
} */

/* 结果页 */
.result-box {
	position: relative;
	margin: 0 auto;
	;
	width: 80%;
	background-image: url(../images/result-bg.png);
	background-repeat: no-repeat;
	background-size: 100%;
	-webkit-background-size: 100%;
}

.result-btn {
	position: absolute;
	z-index: 111;
	bottom: 10%;
	left: 24%;
	width: 52%;
}

.result-box>img,
.result-btn>img {
	width: 100%;
}

/* 列表页 */
.list-box {
	position: relative;
	padding: 22px 5.5%;
	margin: 0.3rem auto 0;
	width: 82%;
	background-image: url(../images/luck-bg.png);
	background-repeat: no-repeat;
	background-size: 100%;
	-webkit-background-size: 100%;
	box-sizing: border-box;
}

.list-t {
	margin: 0 auto;
	width: 100%;
}

.list-btn {
	margin: 0.2rem auto 0;
	width: 82%;
	font-size: 0;
}

.list-btn span {
	display: inline-block;
	vertical-align: middle;
}

.list-btn1 {
	width: 50%;
}

.list-btn2 {
	margin-left: 10%;
	width: 40%;
}

.list-txt1 {
	margin-left: 8%;
	width: 40%;
}

.list-txt2 {
	margin-top: 0.2rem;
	width: 100%;
}

.list-t>img,
.list-txt1>img,
.list-txt2>img,
.list-btn span>img {
	width: 100%;
}

.zhang-box {
	position: relative;
	width: 100%;
}

.zhang-item {
	margin-top: 0.15rem;
	padding: 2.5% 0;
	width: 60%;
	background-image: url(../images/list-zhang-bg.png);
	background-repeat: no-repeat;
	background-size: 100%;
	-webkit-background-size: 100%;
	box-sizing: border-box;
	font-size: 0;
}

.zhang-item span {
	position: relative;
	display: inline-block;
	margin: 0 8%;
	width: 34%;
	background-image: url(../images/zhang0.png);
	background-repeat: no-repeat;
	background-size: 100%;
	-webkit-background-size: 100%;
	box-sizing: border-box;
}

.zhang-over {
	position: absolute;
	z-index: 111;
	top: 0;
	left: 0;
	width: 100%;
}

.zhang-over>img {
	width: 100%;
}

.zhang-btn {
	position: absolute;
	z-index: 111;
	top: 35%;
	right: 0;
	width: 30%;
}
.zhang-btn-c{
	width: 100%;
}

.zhang-item span>img,
.zhang-btn-c>img{
	width: 100%;
}

/*列表页查看勋章*/
.list-hao-box {
	position: relative;
	margin: 0 auto;
	width: 83%;
}

.list-hao-info {
	position: absolute;
	z-index: 111;
	top: 12%;
	left: 0;
	width: 100%;
}

.list-hao-btn {
	margin: 0.2rem auto 0;
	width: 24%;
}

.list-hao-box>img,
.list-hao-btn>img,
.list-hao-info>img {
	width: 100%;
}

.lan-box {
	width: 10px;
}

.lan-box>img {
	width: 100%;
}

/*列表页查看规则*/
.list-rule-box {
	margin: 0 auto;
	padding-bottom: 30px;
	width: 86%;
	background-image: url(../images/luck-bg.png);
	background-repeat: no-repeat;
	background-size: 100%;
	-webkit-background-size: 100%;
}
.list-rule-t,
.list-rule-c{
	width: 100%;
}
.list-rule-c{
	height: 60vh;
	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}

.list-rule-t>img,
.list-rule-c>img{
	width: 100%;
}

@media screen and (min-aspect-ratio: 6/9) {}

@media screen and (max-aspect-ratio: 9/16) {
	.h01 {
		height: 0;
	}

	.logo {
		width: 46%;
	}

	.page01-icon {
		margin-top: 1.3rem;
		margin-left: 15%;
		width: 65%;
	}

	.h02 {
		height: 0;
	}

	.map-box {
		margin-left: 1%;
		width: 92%;
	}

	.hao-t {
		width: 100%;
	}

	.hao-c {
		width: 92%;
		margin-bottom: 0.2rem;
	}

	.list-box {
		width: 87%;
	}

	.list-btn {
		margin-top: 0.5rem;
	}

	.zhang-item {
		margin-top: 0.2rem;
		width: 65%;
	}

	.list-hao-box {
		width: 86%;
	}
}

.align-v {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}