* {
	margin: 0;
	padding: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent
}

body,html {
	width: 100%;
	height: 100%;
	background-color: #fafada;
	font-family: Helvetica,"Microsoft YaHei",Arial,sans-serif;
	color: #333;
	font: 14px/1.5 Helvetica,"Microsoft YaHei",Arial,sans-serif
}

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

.main .hammer-box {
	width: 100%;
	height: 100%;
	position: relative;
	background-color: #62adb1
}

.main .hammer-box .map {
	width: 51.56rem;
	height: 43.80rem;
	position: absolute;
	right: 0;
	top: 0;
	opacity: 0
}

.main .hammer-box .map .map-img {
	position: absolute
}

.main .hammer-box .map .map-img.img-1,.main .hammer-box .map .map-img.img-2,.main .hammer-box .map .map-img.img-3,.main .hammer-box .map .map-img.img-4 {
	top: 0
}

.main .hammer-box .map .map-img.img-5,.main .hammer-box .map .map-img.img-6,.main .hammer-box .map .map-img.img-7,.main .hammer-box .map .map-img.img-8 {
	top: 10.93rem
}

.main .hammer-box .map .map-img.img-10,.main .hammer-box .map .map-img.img-11,.main .hammer-box .map .map-img.img-12,.main .hammer-box .map .map-img.img-9 {
	top: 21.87rem
}

.main .hammer-box .map .map-img.img-13,.main .hammer-box .map .map-img.img-14,.main .hammer-box .map .map-img.img-15,.main .hammer-box .map .map-img.img-16 {
	top: 32.81rem
}

.main .hammer-box .map .map-img.img-1,.main .hammer-box .map .map-img.img-13,.main .hammer-box .map .map-img.img-5,.main .hammer-box .map .map-img.img-9 {
	left: 0
}

.main .hammer-box .map .map-img.img-10,.main .hammer-box .map .map-img.img-14,.main .hammer-box .map .map-img.img-2,.main .hammer-box .map .map-img.img-6 {
	left: 12.86rem
}

.main .hammer-box .map .map-img.img-11,.main .hammer-box .map .map-img.img-15,.main .hammer-box .map .map-img.img-3,.main .hammer-box .map .map-img.img-7 {
	left: 25.71rem
}

.main .hammer-box .map .map-img.img-12,.main .hammer-box .map .map-img.img-16,.main .hammer-box .map .map-img.img-4,.main .hammer-box .map .map-img.img-8 {
	left: 38.57rem
}

.main .hammer-box .map .spot {
	position: absolute;
	animation: ascale 1s alternate-reverse infinite linear
}

.main .hammer-box .map .spot .spot-text,.main .hammer-box .map .spot .spot-view {
	position: absolute
}

.main .hammer-box .map .spot.spot-1 {
	top: 1.5rem;
	left: 24rem;
	width: 3.02rem;
	height: 4.2rem
}

.main .hammer-box .map .spot.spot-1 .spot-view {
	top: 0;
	left: 0
}

.main .hammer-box .map .spot.spot-1 .spot-text {
	right: .25rem;
	bottom: 0
}
/* .main .hammer-box .map .spot.spot-1 img{ */
	/* width: 5rem; */
    /* height: 4rem; */
/* } */

.main .hammer-box .map .spot.spot-2 {
	top: 1.5rem;
	left: 32.5rem;
	width: 3.29rem;
	height: 4.27rem
}

.main .hammer-box .map .spot.spot-2 .spot-view {
	top: 0;
	left: 0
}

.main .hammer-box .map .spot.spot-2 .spot-text {
	right: 0;
	bottom: 0
}
.main .hammer-box .map .spot.spot-3 {
	top: 3.3rem;
	left: 37.7rem;
	width: 2.52rem;
	height: 3.03rem
}

.main .hammer-box .map .spot.spot-3 .spot-view {
	top: 0;
	left: 0
}

.main .hammer-box .map .spot.spot-3 .spot-text {
	right: 0;
	bottom: .1rem
}

.main .hammer-box .map .spot.spot-4 {
	top: 2.5rem;
	left: 18.7rem;
	width: 4.34rem;
	height: 4.08rem
}

.main .hammer-box .map .spot.spot-4 .spot-view {
	top: 0;
	left: 0
}

.main .hammer-box .map .spot.spot-4 .spot-text {
	right: 0;
	top: 1.9rem
}
.main .hammer-box .map .spot.spot-5 {
	top: 8.6rem;
	left: 24rem;
	width: 2.9rem;
	height: 6.68rem
}

.main .hammer-box .map .spot.spot-5 .spot-view {
	left: 0;
	top: 0
}

.main .hammer-box .map .spot.spot-5 .spot-text {
	right: 0;
	bottom: 0
}

.main .hammer-box .map .spot.spot-6 {
	top: 8rem;
	left: 33.8rem;
	width: 3.72rem;
	height: 5.1rem
}

.main .hammer-box .map .spot.spot-6 .spot-view {
	left: 0;
	top: 0
}
.main .hammer-box .map .spot.spot-6 .spot-text {
	right: 0;
	bottom: .53rem
}

.main .hammer-box .map .spot.spot-7 {
	top: 6rem;
	left: 11.5rem;
	width: 3.42rem;
	height: 5.84rem
}

.main .hammer-box .map .spot.spot-7 .spot-view {
	left: 0;
	top: 0
}

.main .hammer-box .map .spot.spot-7 .spot-text {
	right: 0;
	bottom: 0
}

.main .hammer-box .map .spot.spot-8 {
	top: 10.8rem;
	left: 19rem;
	width: 2.88rem;
	height: 3.9rem
}

.main .hammer-box .map .spot.spot-8 .spot-view {
	left: 0;
	top: 0
}
.main .hammer-box .map .spot.spot-8 .spot-text {
	right: 0;
	bottom: .34rem
}

.main .hammer-box .map .spot.spot-9 {
	top: 13rem;
	left: 10rem;
	width: 2.73rem;
	height: 3.34rem
}

.main .hammer-box .map .spot.spot-9 .spot-view {
	left: 0;
	top: 0
}
.main .hammer-box .map .spot.spot-9 .spot-text {
	bottom: 1.615rem;
	right: 0
}

.main .hammer-box .map .spot.spot-10 {
	top: 22rem;
	left: 10.5rem;
	width: 3.28rem;
	height: 5.77rem
}

.main .hammer-box .map .spot.spot-10 .spot-view {
	left: 0;
	top: 0
}

.main .hammer-box .map .spot.spot-10 .spot-text {
	right: 0;
	bottom: .825rem
}

.main .hammer-box .map .spot.spot-11 {
	top: 36.3rem;
	left: 39.5rem;
	width: 3.28rem;
	height: 5.77rem
}

.main .hammer-box .map .spot.spot-11 .spot-view {
	left: 0;
	top: 0
}
.main .hammer-box .map .spot.spot-11 .spot-text {
	right: 0;
	bottom: .825rem
}

.main .hammer-box .map .spot.spot-12 {
	top: 30.6rem;
	left: 34rem;
	width: 3.28rem;
	height: 5.77rem
}

.main .hammer-box .map .spot.spot-12 .spot-view {
	left: 0;
	top: 0
}

.main .hammer-box .map .spot.spot-12 .spot-text {
	right: 0;
	bottom: .825rem
}

.main .hammer-box .map .spot.spot-13 {
	top: 36.5rem;
	left: 33.5rem;
	width: 3.28rem;
	height: 5.77rem
}

.main .hammer-box .map .spot.spot-13 .spot-view {
	left: 0;
	top: 0
}
.main .hammer-box .map .spot.spot-13 .spot-text {
	right: 0;
	bottom: .825rem
}

.main .hammer-box .map .spot.spot-14 {
	top: 23.5rem;
	left: 16.5rem;
	width: 3.28rem;
	height: 5.77rem
}

.main .hammer-box .map .spot.spot-14 .spot-view {
	left: 0;
	top: 0
}
.main .hammer-box .map .spot.spot-14 .spot-text {
	right: 0;
	bottom: .825rem
}



.main .hammer-box .map .intro {
	width: 100%;
	height: 13.41rem;
	position: absolute;
	bottom: 0;
	left: 0
}

.main .hammer-box .map .intro .intro-img {
	position: absolute;
	top: 0
}

.main .hammer-box .map .intro .intro-img.intro-1 {
	left: 0
}

.main .hammer-box .map .intro .intro-img.intro-2 {
	left: 7.67rem
}

.main .hammer-box .map .intro .intro-img.intro-3 {
	left: 15.33rem
}

.main .hammer-box .map .intro .intro-img.intro-4 {
	left: 23rem
}

.main .hammer-box .map .intro .side {
	position: absolute
}

.main .hammer-box .map .intro .side:active {
	opacity: .6
}

.main .hammer-box .map .intro .side.side-1,.main .hammer-box .map .intro .side.side-3,.main .hammer-box .map .intro .side.side-5,.main .hammer-box .map .intro .side.side-7,.main .hammer-box .map .intro .side.side-9 {
	top: 10.16rem;
	transform: translateY(-50%)
}

.main .hammer-box .map .intro .side.side-1 {
	right: 2.6rem
}

.main .hammer-box .map .intro .side.side-3 {
	right: 7.94rem
}

.main .hammer-box .map .intro .side.side-5 {
	right: 12.05rem
}

.main .hammer-box .map .intro .side.side-7 {
	right: 17.23rem
}

.main .hammer-box .map .intro .side.side-9 {
	right: 22.33rem
}

.main .hammer-box .map .intro .side.side-10,.main .hammer-box .map .intro .side.side-2,.main .hammer-box .map .intro .side.side-4,.main .hammer-box .map .intro .side.side-6,.main .hammer-box .map .intro .side.side-8 {
	top: 4rem;
	transform: translateY(-50%)
}

.main .hammer-box .map .intro .side.side-2 {
	right: 5.26rem
}

.main .hammer-box .map .intro .side.side-4 {
	right: 9.19rem
}

.main .hammer-box .map .intro .side.side-6 {
	right: 14.38rem
}

.main .hammer-box .map .intro .side.side-8 {
	right: 19.7rem
}

.main .hammer-box .map .intro .side.side-10 {
	right: 23.5rem
}

.main .mask {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,.6)
}

/* .main .mask .fall-box { */
	/* position: absolute; */
	/* width: 100vh; */
	/* height: 100vw; */
/* } */

.main .mask .fall-box .fall {
	position: absolute;
	left: -.75rem;
	animation: fall infinite ease-out
}

.main .mask .fall-box .fall.fall-1 {
	top: 4rem;
	transform: translate3d(80vh,-4.76rem,1rem) rotate3d(1,1,1,180deg) scale3d(.5,.5,.5);
	animation-duration: 4s;
	animation-delay: .7s;
	opacity: .85
}

.main .mask .fall-box .fall.fall-2 {
	top: 5rem;
	transform: translate3d(60vh,-5.76rem,1rem) rotate3d(1,1,1,180deg) scale3d(.6,.5,.6);
	animation-duration: 3s;
	animation-delay: 1.5s;
	opacity: .89
}

.main .mask .fall-box .fall.fall-3 {
	top: 3rem;
	transform: translate3d(120vh,-2.76rem,1rem) rotate3d(1,1,1,180deg) scale3d(.8,.5,.8);
	animation-duration: 6s;
	animation-delay: .9s;
	opacity: .9
}

.main .mask .fall-box .fall.fall-4 {
	top: 2rem;
	transform: translate3d(70vh,-4.76rem,1rem) rotate3d(1,1,1,180deg) scale3d(.8,.8,.8);
	animation-duration: 4.5s;
	animation-delay: .8s;
	opacity: .82
}

.main .mask .fall-box .fall.fall-5 {
	top: 4rem;
	transform: translate3d(130vh,-3.76rem,1rem) rotate3d(1,1,1,180deg) scale3d(1,.5,.8);
	animation-duration: 6s;
	animation-delay: 1.2s;
	opacity: .7
}

.main .mask .fall-box .fall.fall-6 {
	top: 6rem;
	transform: translate3d(130vh,-3.76rem,1rem) rotate3d(1,1,1,180deg) scale3d(1,.5,.8);
	animation-duration: 7s;
	animation-delay: .5s;
	opacity: .8
}

.main .mask .fall-box .fall.fall-7 {
	top: 6rem;
	transform: translate3d(20vh,-6.76rem,1rem) rotate3d(1,1,1,180deg) scale3d(1,.5,.8);
	animation-duration: 5s;
	animation-delay: .5s;
	opacity: .8
}

.main .mask .fall-box .fall.fall-8 {
	top: 4rem;
	transform: translate3d(100vh,-4.76rem,1rem) rotate3d(1,1,1,180deg) scale3d(1,.5,1.2);
	animation-duration: 5s;
	animation-delay: .5s;
	opacity: .9
}

.main .mask .fall-box .fall.fall-9 {
	top: 3rem;
	transform: translate3d(120vh,-4.76rem,1rem) rotate3d(1,1,1,180deg) scale3d(1,.5,1.2);
	animation-duration: 9s;
	animation-delay: .5s;
	opacity: .9
}

.main .mask.screen .tip {
	width: 7.48rem;
	height: .96rem;
	border-radius: .48rem;
	border: .04rem solid #fff;
	background-color: #c3ddab;
	color: #464646;
	font-size: .32rem;
	font-weight: 700;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	line-height: 1em;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 5rem;
	margin: auto
}

.main .mask.screen .play {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 3rem;
	margin: auto
}

.main .mask.screen .play:active {
	opacity: .6
}

.main .mask.screen .text {
	height: 1em;
	font-size: .18rem;
	line-height: 1em;
	color: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}

.main .mask.screen .text.text-1 {
	left: 3rem;
	top: 86%;
}

.main .mask.screen .text.text-2 {
	left: 3rem;
	top: 90%;
}

.main .mask .view-box {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0
}

.main .mask .view-box .view {
	position: absolute;
	top: 0;
	bottom: 1rem;
	left: 17%;
	margin: auto
}

.main .mask .btns {
	position: absolute;
	top: 0;
	left: calc(30%);
	margin: auto;
	width: 3rem;
	padding: calc(68vh) 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	justify-content: space-between
}

.main .mask .btns .blur,.main .mask .btns .icon:active {
	opacity: .6
}

.main .mask .scroll {
	width: 5.5rem;
	height: 4.5rem;
	background-color: #c3ddab;
	background-position: 50%;
	background-size: 4.21rem auto;
	border-radius: .32rem;
	border: .04rem solid #fff;
	position: absolute;
	top: 0;
	bottom: 2rem;
	left: 14%;
	margin: auto;
	overflow: hidden
}

.main .mask .scroll.tip::after {
	content: '';
	display: block;
	width: .4rem;
	height: .4rem;
	border-left: .04rem solid #fff;
	border-bottom: .04rem solid #fff;
	transform: rotate(-45deg);
	position: absolute;
	left: 2.3rem;
	top: 3.5rem;
	bottom: 0;
	margin: auto;
	animation: fadeDown .5s alternate-reverse infinite linear
}

.main .mask .scroll .wrap {
	height: 100%;
	min-width: 4.5rem;
	position: relative
}

.main .mask .scroll .wrap .info-box {
	position: absolute;
	top: 0;
	width: 5.5rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	align-items: center;
	padding: .4rem;
	transform-origin: top;
}

.main .mask .scroll .wrap .info-box .head {
	width: 100%;
	height: 2.36rem;
	border-radius: .18rem;
	background-color: #f19ec2;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 4.3rem auto;
	margin-bottom: .2rem
}

.main .mask .scroll .wrap .info-box .item {
	height: 100%;
	font-size: .2rem;
	text-indent: .24rem;
	text-align: justify;
	color: #595757;
	position: relative;
	margin-bottom: .2rem;
	line-height: 2em
}

.main .mask .scroll .wrap .info-box .item::before {
	content: '';
	position: absolute;
	width: .16rem;
	height: .16rem;
	display: block;
	background-color: #595757;
	transform: rotate3d(0,0,1,45deg);
	left: 0;
	top: .12rem
}

.main .mask .close {
	position: absolute;
	left: calc(50% + 2.24rem);
	top: 20%;
	margin: auto
}

.main .mask .close:active {
	opacity: .6
}

.hide {
	display: none!important
}

@keyframes fall {
	to {
		transform: translate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1)
	}
}

@keyframes fadeDown {
	to {
		opacity: .5;
		transform: translateX(.1rem) rotate(-45deg)
	}
}

@keyframes ascale {
	to {
		transform: scale(.9)
	}
}

@keyframes spine {
	to {
		transform: rotate(360deg)
	}
}

.musicBtn {
	opacity: .7;
	position: fixed;
	right: .1rem;
	top: .1rem;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	z-index: 999;
	width: .4rem;
	height: .4rem
}

.music_open {
	animation: arotate 2s linear infinite
}

@keyframes arotate {
	100% {
		transform: rotateZ(-360deg)
	}
}

.arrow {
	width: .58rem;
	z-index: 1009;
	position: fixed;
	bottom: .4rem;
	left: 50%;
	margin-left: -.29rem
}

.loading {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	transition: all 1s;
	background-color: #c7dec0
}

.loading-icon {
	display: block;
	width: 30%!important;
	margin: 60px auto;
	transform-origin: 49% 50%;
	animation: spine 3s infinite linear
}

.loading .loadingArea {
	left: 50%;
	width: 200px;
	height: 200px;
	top: 50%;
	margin-left: -100px;
	margin-top: -100px;
	position: absolute
}

.loading .loading-percent {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,40px);
	font-size: .24rem;
	text-align: center;
	color: #999
}