body {
	font-family: Microsoft YaHei, Arial, Helvetica, sans-serif;
	font-size: 100%;
	margin: 0;
	color: #486d80;
	-webkit-text-size-adjust: none !important;
	background-color: #000
}

body.initialized .page-content {
	display: block
}

body.initialized #loading {
	display: none
}

* {
	outline: none;
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	touch-callout: none
}

.scrollbar-track-vertical {
	right: 2px;
	bottom: 2px;
	top: 2px;
	border-radius: 3px
}

:hover .scrollbar-track-vertical {
	opacity: 1 !important
}

.scrollbar-thumb-vertical {
	position: relative;
	display: block;
	width: 100%;
	cursor: pointer;
	border-radius: inherit;
	background-color: hsla(0, 0%, 100%, .2)
}

.scrollbar-track-horizontal {
	right: 2px;
	bottom: 2px;
	left: 2px;
	border-radius: 3px
}

:hover .scrollbar-track-horizontal {
	opacity: 1 !important
}

.scrollbar-thumb-horizontal {
	position: relative;
	display: block;
	height: 100%;
	cursor: pointer;
	border-radius: inherit;
	background-color: hsla(0, 0%, 100%, .2)
}

.notice-horizontal {
	overflow: hidden
}

.notice-horizontal:after {
	content: "";
	background: url(http://static.event.mihoyo.com/common/images/horizon_hint2.png) 50% no-repeat;
	background-size: contain;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99999;
	background-color: #fff
}

.notice-horizontal.notice-wechat:after {
	background-image: url(http://static.event.mihoyo.com/common/images/horizon_hint3.png)
}

.dialog-container .dialog-content {
	-webkit-animation: dialog-in .3s both;
	animation: dialog-in .3s both
}

#app {
	margin: 0 auto;
	overflow: hidden
}

.btn:active {
	opacity: .95;
	-webkit-transform: scale(.95);
	transform: scale(.95)
}

@-webkit-keyframes dialog-in {
	0% {
		opacity: 0;
		-webkit-transform: scale(1.05);
		transform: scale(1.05)
	}

	to {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes dialog-in {
	0% {
		opacity: 0;
		-webkit-transform: scale(1.05);
		transform: scale(1.05)
	}

	to {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@-webkit-keyframes fade-in {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes fade-in {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@-webkit-keyframes fade-out {
	0% {
		opacity: 1
	}

	to {
		opacity: 0
	}
}

@keyframes fade-out {
	0% {
		opacity: 1
	}

	to {
		opacity: 0
	}
}

@-webkit-keyframes mask-out {
	0% {
		visibility: visible
	}

	to {
		visibility: hidden;
		display: none
	}
}

@keyframes mask-out {
	0% {
		visibility: visible
	}

	to {
		visibility: hidden;
		display: none
	}
}

.page {
	position: relative;
	width: 100%;
	height: 100%;
	font-size: .24rem;
	overflow: hidden
}

.page:before {
	content: "";
	visibility: hidden;
	width: 0;
	background-image: url(../images/index/btn_confirm.png), url(../images/index/btn_cancel.png), url(../images/index/btn_gacha_1.png), url(../images/index/btn_gacha_n.png), url(../images/index/btn_gacha_help.png), url(../images/index/dialog_close.png)
}

.page.page-in .page-index {
	-webkit-animation: page-in .6s both;
	animation: page-in .6s both
}

.page .page-index {
	width: 100%;
	height: 100%;
	background: url(../images/index/bg.png) 50% no-repeat;
	background-size: cover
}

@-webkit-keyframes page-in {
	0% {
		-webkit-transform: scale(1.3);
		transform: scale(1.3)
	}

	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes page-in {
	0% {
		-webkit-transform: scale(1.3);
		transform: scale(1.3)
	}

	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

#loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background-color: #000
}

#loading .loading-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2rem;
	height: .4rem;
	line-height: .4rem;
	margin-top: -.2rem;
	margin-left: -1rem;
	font-size: .24rem;
	color: #fff;
	text-align: center
}

@-webkit-keyframes loading-circle {
	0% {
		-webkit-transform: scale(.4) rotate(0);
		transform: scale(.4) rotate(0)
	}

	to {
		-webkit-transform: scale(.4) rotate(1turn);
		transform: scale(.4) rotate(1turn)
	}
}

@keyframes loading-circle {
	0% {
		-webkit-transform: scale(.4) rotate(0);
		transform: scale(.4) rotate(0)
	}

	to {
		-webkit-transform: scale(.4) rotate(1turn);
		transform: scale(.4) rotate(1turn)
	}
}

@-webkit-keyframes loading-float {
	0% {
		-webkit-transform: scale(.4) translateY(10px);
		transform: scale(.4) translateY(10px)
	}

	to {
		-webkit-transform: scale(.4) translateY(-10px);
		transform: scale(.4) translateY(-10px)
	}
}

@keyframes loading-float {
	0% {
		-webkit-transform: scale(.4) translateY(10px);
		transform: scale(.4) translateY(10px)
	}

	to {
		-webkit-transform: scale(.4) translateY(-10px);
		transform: scale(.4) translateY(-10px)
	}
}

.logo {
	background: url(../images/index/logo.png) 50% no-repeat;
	background-size: cover;
	width: 4.46rem;
	height: 1.59rem;
	top: .15rem;
	left: 1.15rem
}

.entry,
.logo {
	position: absolute
}

.entry {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	cursor: pointer;
	z-index: 1000;
	display: block
}

.entry.e-1 {
	background-image: url(../images/index/1.png);
	top: 1.36rem;
	left: 3.16rem;
	width: 1.91rem;
	height: 1.31rem
}

.entry.e-1:not(.lock):active {
	background-image: url(../images/index/1_a.png)
}

.entry.e-2 {
	background-image: url(../images/index/2.png);
	top: 1.23rem;
	left: 7.15rem;
	width: 1.7rem;
	height: 1.12rem
}

.entry.e-2:not(.lock):active {
	background-image: url(../images/index/2_a.png)
}

.entry.e-3 {
	background-image: url(../images/index/3.png);
	top: 3.2rem;
	left: 2.15rem;
	width: 1.77rem;
	height: 1.29rem
}

.entry.e-3:not(.lock):active {
	background-image: url(../images/index/3_a.png)
}

.entry.e-4 {
	background-image: url(../images/index/4.png);
	top: 1.79rem;
	left: 9.39rem;
	width: 1.81rem;
	height: 2.1rem
}

.entry.e-4:not(.lock):active {
	background-image: url(../images/index/4_a.png)
}

.entry.e-4.lock:after {
	bottom: .4rem;
	-webkit-transform: scale(.7);
	transform: scale(.7)
}

.entry.e-5 {
	background-image: url(../images/index/5.png);
	top: 4.94rem;
	left: 4.12rem;
	width: 1.81rem;
	height: 1.2rem
}

.entry.e-5:not(.lock):active {
	background-image: url(../images/index/5_a.png)
}

.entry.e-6 {
	background-image: url(../images/index/6.png);
	top: 4.52rem;
	left: 8.05rem;
	width: 1.74rem;
	height: 1.5rem
}

.entry.e-6:not(.lock):active {
	background-image: url(../images/index/6_a.png)
}

.entry.e-7 {
	background-image: url(../images/index/7.png);
	top: 5.6rem;
	left: 1.45rem;
	width: 1.72rem;
	height: 1.19rem
}

.entry.e-7:not(.lock):active {
	background-image: url(../images/index/7_a.png)
}

.entry.new:after {
	content: "";
	position: absolute;
	bottom: .25rem;
	right: .2rem;
	width: .29rem;
	height: .29rem;
	background: url(../images/index/new.png) 50% no-repeat;
	background-size: cover
}

.entry.lock:after {
	content: "";
	position: absolute;
	bottom: .4rem;
	left: 50%;
	margin-left: -.54rem;
	width: 1.09rem;
	height: .86rem;
	background: url(../images/index/lock.png) 50% no-repeat;
	background-size: cover
}

.gacha-area {
	position: absolute;
	top: 2.43rem;
	left: 5.16rem;
	width: 2.43rem;
	height: 1.86rem;
	z-index: 1000
}

.gacha-area.guide .gacha:after {
	content: "";
	text-align: center;
	position: absolute;
	background: url(../images/index/gacha_tip.png) 50% no-repeat;
	background-size: cover;
	top: .65rem;
	left: -.8rem;
	width: 4.22rem;
	height: .32rem;
	z-index: 1000
}

.gacha {
	position: absolute;
	top: 0;
	left: 0;
	width: 2.43rem;
	height: 1.86rem;
	background: url(../images/index/wheel.png) 50% no-repeat;
	background-size: cover;
	cursor: pointer
}

.gacha.animate .wheel-container {
	-webkit-animation: scale-outIn 1s;
	animation: scale-outIn 1s
}

.gacha .wheel-container {
	position: absolute;
	top: 0;
	left: .46rem;
	width: 1.64rem;
	height: 1.64rem
}

.gacha .wheel {
	position: absolute;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover;
	width: .36rem;
	height: .36rem;
	top: .64rem;
	left: .64rem;
	-webkit-animation: none !important;
	animation: none !important
}

.gacha .wheel.w-1 {
	background-image: url(../images/index/wheels/1.png);
	-webkit-transform: rotate(22.5deg) translateX(.82rem) rotate(-22.5deg);
	transform: rotate(22.5deg) translateX(.82rem) rotate(-22.5deg);
	-webkit-animation: circle1 20s linear infinite;
	animation: circle1 20s linear infinite
}

.gacha .wheel.w-2 {
	background-image: url(../images/index/wheels/2.png);
	-webkit-transform: rotate(67.5deg) translateX(.82rem) rotate(-67.5deg);
	transform: rotate(67.5deg) translateX(.82rem) rotate(-67.5deg);
	-webkit-animation: circle2 20s linear infinite;
	animation: circle2 20s linear infinite
}

.gacha .wheel.w-3 {
	background-image: url(../images/index/wheels/3.png);
	-webkit-transform: rotate(112.5deg) translateX(.82rem) rotate(-112.5deg);
	transform: rotate(112.5deg) translateX(.82rem) rotate(-112.5deg);
	-webkit-animation: circle3 20s linear infinite;
	animation: circle3 20s linear infinite
}

.gacha .wheel.w-4 {
	background-image: url(../images/index/wheels/4.png);
	-webkit-transform: rotate(157.5deg) translateX(.82rem) rotate(-157.5deg);
	transform: rotate(157.5deg) translateX(.82rem) rotate(-157.5deg);
	-webkit-animation: circle4 20s linear infinite;
	animation: circle4 20s linear infinite
}

.gacha .wheel.w-5 {
	background-image: url(../images/index/wheels/5.png);
	-webkit-transform: rotate(202.5deg) translateX(.82rem) rotate(-202.5deg);
	transform: rotate(202.5deg) translateX(.82rem) rotate(-202.5deg);
	-webkit-animation: circle5 20s linear infinite;
	animation: circle5 20s linear infinite
}

.gacha .wheel.w-6 {
	background-image: url(../images/index/wheels/6.png);
	-webkit-transform: rotate(247.5deg) translateX(.82rem) rotate(-247.5deg);
	transform: rotate(247.5deg) translateX(.82rem) rotate(-247.5deg);
	-webkit-animation: circle6 20s linear infinite;
	animation: circle6 20s linear infinite
}

.gacha .wheel.w-7 {
	background-image: url(../images/index/wheels/7.png);
	-webkit-transform: rotate(292.5deg) translateX(.82rem) rotate(-292.5deg);
	transform: rotate(292.5deg) translateX(.82rem) rotate(-292.5deg);
	-webkit-animation: circle7 20s linear infinite;
	animation: circle7 20s linear infinite
}

.gacha .wheel.w-8 {
	background-image: url(../images/index/wheels/8.png);
	-webkit-transform: rotate(337.5deg) translateX(.82rem) rotate(-337.5deg);
	transform: rotate(337.5deg) translateX(.82rem) rotate(-337.5deg);
	-webkit-animation: circle8 20s linear infinite;
	animation: circle8 20s linear infinite
}

.number {
	font-size: 0;
	display: inline-block;
	white-space: nowrap;
	line-height: normal
}

.number span {
	display: inline-block;
	background-repeat: no-repeat;
	background-size: .19rem 2.42rem;
	background-image: url(../images/index/number.png);
	width: .19rem;
	height: .24rem
}

.btn-gacha {
	width: 1.58rem;
	height: .6rem;
	position: absolute;
	z-index: 2000;
	cursor: pointer
}

.btn-gacha.gacha-reward {
	left: -.4rem;
	bottom: -.25rem;
	background: url(../images/index/btn_gacha_reward.png) 50% no-repeat;
	background-size: cover
}

.btn-gacha.gacha-list {
	right: -.6rem;
	bottom: -.25rem;
	background: url(../images/index/btn_gacha_list.png) 50% no-repeat;
	background-size: cover
}

#stage {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 90000;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: .3s;
	transition: .3s
}

#stage.stage-in {
	opacity: 1;
	visibility: visible
}

#stage.pv-in {
	background-color: #000
}

.opening-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .9);
	z-index: 90000;
	overflow: hidden;
	-webkit-animation: fade-in .3s both;
	animation: fade-in .3s both
}

.opening-container.fade-out {
	-webkit-animation: fade-out .3s both;
	animation: fade-out .3s both
}

.opening-container .text-container {
	position: absolute;
	bottom: .1rem;
	left: .1rem;
	color: #fff
}

.opening-container .text-container p {
	height: .32rem;
	line-height: .32rem;
	position: relative
}

.opening-container .text-container .t-arrow {
	display: inline-block;
	position: relative;
	background-color: #fff;
	width: .03rem;
	height: .2rem;
	top: 50%;
	margin-top: -.12rem;
	margin-left: .05rem;
	vertical-align: top;
	-webkit-animation: t-arrow .6s linear infinite alternate;
	animation: t-arrow .6s linear infinite alternate
}

.opening-container .op-page {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

.opening-container .op-page.leave.page-0,
.opening-container .op-page.leave.page-1 {
	-webkit-animation: fade-out .3s both;
	animation: fade-out .3s both
}

.opening-container .op-page.leave.page-2 {
	-webkit-animation: fade-out .5s both;
	animation: fade-out .5s both
}

.opening-container .op-page.leave.page-2 .op-page-content.c2 {
	-webkit-animation: op-p2-1 linear .3s both;
	animation: op-p2-1 linear .3s both
}

.opening-container .op-page.leave.page-3 {
	-webkit-animation: fade-out .3s both;
	animation: fade-out .3s both
}

.opening-container .op-page.leave.page-4 {
	animation: op-right .5s both reverse
}

.opening-container .op-page.leave.page-5 {
	-webkit-animation: fade-out .5s both;
	animation: fade-out .5s both
}

.opening-container .op-page .op-page-content {
	display: block;
	position: absolute;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain
}

.opening-container .page-0 .op-page-content.c1 {
	background-image: url(../images/index/opening/1.png);
	width: 10.5rem;
	left: 1.15rem;
	height: 7.2rem;
	-webkit-animation: op-down linear .5s both;
	animation: op-down linear .5s both
}

.opening-container .page-0 .op-page-content.c2 {
	background-image: url(../images/index/opening/1_t.png);
	width: 9.99rem;
	height: 7.2rem;
	left: 1.4rem;
	top: -.5rem;
	-webkit-animation: op-text .2s .3s both;
	animation: op-text .2s .3s both
}

.opening-container .page-1 .op-page-content.c1 {
	background-image: url(../images/index/opening/2.png);
	width: 12.8rem;
	left: 0;
	top: .5rem;
	height: 6.2rem;
	-webkit-animation: fade-in linear .3s both;
	animation: fade-in linear .3s both
}

.opening-container .page-2 .op-page-content.c1 {
	background-image: url(../images/index/opening/3_2.png);
	width: 10.93rem;
	height: 6.2rem;
	background-position: 0 50%;
	left: 5rem;
	top: 1rem;
	-webkit-animation: op-down linear .5s both;
	animation: op-down linear .5s both
}

.opening-container .page-2 .op-page-content.c2 {
	background-image: url(../images/index/opening/3_1.png);
	width: 6.45rem;
	left: .5rem;
	height: 6.2rem;
	background-position: 0 0;
	-webkit-animation: op-up linear .5s both;
	animation: op-up linear .5s both
}

.opening-container .page-3 .op-page-content.c1 {
	background-image: url(../images/index/opening/4_1.png);
	width: 12.8rem;
	left: 0;
	height: 7.2rem;
	-webkit-animation: op-scale-in .5s both;
	animation: op-scale-in .5s both
}

.opening-container .page-3 .op-page-content.c2 {
	background-image: url(../images/index/opening/4_2.png);
	width: 8.3rem;
	left: 50%;
	height: 7.2rem;
	margin-left: -4.15rem;
	background-position: 50%;
	-webkit-animation: op-up2 .5s .8s both;
	animation: op-up2 .5s .8s both
}

.opening-container .page-4 .op-page-content.c1 {
	background-image: url(../images/index/opening/5.png);
	width: 12.8rem;
	left: 0;
	height: 7.2rem;
	-webkit-animation: op-right .5s both;
	animation: op-right .5s both
}

.opening-container .page-4 .op-page-content.c2 {
	background-image: url(../images/index/opening/5_t.png);
	width: 9.22rem;
	height: 7.2rem;
	left: 1.8rem;
	top: -.2rem;
	background-position: 50% 0;
	-webkit-animation: op-text .2s .3s both;
	animation: op-text .2s .3s both
}

.opening-container .page-5 .op-page-content.c1 {
	background-image: url(../images/index/opening/6.png);
	width: 12.8rem;
	left: 0;
	height: 7.2rem;
	-webkit-animation: op-left .5s both;
	animation: op-left .5s both
}

.opening-container .page-5 .op-page-content.c2 {
	background-image: url(../images/index/opening/6_t.png);
	width: 9.65rem;
	height: 7.2rem;
	left: 1.4rem;
	top: -.1rem;
	background-position: 50% 0;
	-webkit-animation: op-text .2s .3s both;
	animation: op-text .2s .3s both
}

@-webkit-keyframes t-arrow {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes t-arrow {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@-webkit-keyframes op-down {
	0% {
		-webkit-transform: translateY(-7.2rem);
		transform: translateY(-7.2rem)
	}

	70% {
		-webkit-transform: translateY(1.5rem);
		transform: translateY(1.5rem)
	}

	to {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

@keyframes op-down {
	0% {
		-webkit-transform: translateY(-7.2rem);
		transform: translateY(-7.2rem)
	}

	70% {
		-webkit-transform: translateY(1.5rem);
		transform: translateY(1.5rem)
	}

	to {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

@-webkit-keyframes op-up {
	0% {
		-webkit-transform: translateY(7.2rem);
		transform: translateY(7.2rem)
	}

	70% {
		-webkit-transform: translateY(-1.5rem);
		transform: translateY(-1.5rem)
	}

	to {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

@keyframes op-up {
	0% {
		-webkit-transform: translateY(7.2rem);
		transform: translateY(7.2rem)
	}

	70% {
		-webkit-transform: translateY(-1.5rem);
		transform: translateY(-1.5rem)
	}

	to {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

@-webkit-keyframes op-up2 {
	0% {
		opacity: 0;
		-webkit-transform: translateY(7.2rem) scale(.6);
		transform: translateY(7.2rem) scale(.6)
	}

	to {
		opacity: 1;
		-webkit-transform: translateY(0) scale(1);
		transform: translateY(0) scale(1)
	}
}

@keyframes op-up2 {
	0% {
		opacity: 0;
		-webkit-transform: translateY(7.2rem) scale(.6);
		transform: translateY(7.2rem) scale(.6)
	}

	to {
		opacity: 1;
		-webkit-transform: translateY(0) scale(1);
		transform: translateY(0) scale(1)
	}
}

@-webkit-keyframes op-scale-in {
	0% {
		opacity: 0;
		-webkit-transform: scale(1.1);
		transform: scale(1.1)
	}

	to {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes op-scale-in {
	0% {
		opacity: 0;
		-webkit-transform: scale(1.1);
		transform: scale(1.1)
	}

	to {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@-webkit-keyframes op-left {
	0% {
		opacity: 0;
		-webkit-transform: translateX(10rem);
		transform: translateX(10rem)
	}

	70% {
		-webkit-transform: translateX(-1.5rem);
		transform: translateX(-1.5rem)
	}

	to {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

@keyframes op-left {
	0% {
		opacity: 0;
		-webkit-transform: translateX(10rem);
		transform: translateX(10rem)
	}

	70% {
		-webkit-transform: translateX(-1.5rem);
		transform: translateX(-1.5rem)
	}

	to {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

@-webkit-keyframes op-right {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-10rem);
		transform: translateX(-10rem)
	}

	70% {
		-webkit-transform: translateX(1.5rem);
		transform: translateX(1.5rem)
	}

	to {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

@keyframes op-right {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-10rem);
		transform: translateX(-10rem)
	}

	70% {
		-webkit-transform: translateX(1.5rem);
		transform: translateX(1.5rem)
	}

	to {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

@-webkit-keyframes op-p2-1 {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}

	to {
		-webkit-transform: translate(4rem, .6rem) scale(1.2);
		transform: translate(4rem, .6rem) scale(1.2)
	}
}

@keyframes op-p2-1 {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}

	to {
		-webkit-transform: translate(4rem, .6rem) scale(1.2);
		transform: translate(4rem, .6rem) scale(1.2)
	}
}

@-webkit-keyframes op-text {
	0% {
		opacity: 0;
		-webkit-transform: scale(.5);
		transform: scale(.5)
	}

	to {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes op-text {
	0% {
		opacity: 0;
		-webkit-transform: scale(.5);
		transform: scale(.5)
	}

	to {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

.video {
	position: absolute;
	top: 0;
	left: 0;
	display: none
}

.video,
.video video {
	width: 100%;
	height: 100%
}

.btn-back-to-game {
	position: absolute;
	top: .1rem;
	right: .2rem;
	width: 1.22rem;
	height: .79rem;
	background: url(../images/index/btn_backtogame.png) 50% no-repeat;
	background-size: cover;
	z-index: 1000;
	cursor: pointer
}

.btn-back-to-game:active {
	opacity: .95;
	-webkit-transform: scale(.95);
	transform: scale(.95)
}

.start-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/index/bg_start.png) 50% no-repeat;
	background-size: cover;
	z-index: 80000;
	-webkit-transition: .5s;
	transition: .5s
}

.start-bg:before {
	content: "";
	visibility: hidden;
	width: 0;
	background-image: url(../images/index/btn_start_a.png)
}

.page-in .start-bg {
	opacity: 0;
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	visibility: hidden
}

.start-bg .start-btn {
	position: absolute;
	bottom: .4rem;
	left: 50%;
	margin-left: -1.5rem;
	width: 3rem;
	height: .4rem
}

.start-bg .start-btn:active:after {
	background-image: url(../images/index/btn_start_a.png)
}

.start-bg .start-btn:before {
	content: "";
	width: .59rem;
	height: .61rem;
	background: url(../images/index/btn_start_icon.png) 50% no-repeat;
	background-size: cover;
	display: block;
	position: absolute;
	left: -.3rem;
	top: -.1rem;
	-webkit-animation: start-btn 2s linear infinite;
	animation: start-btn 2s linear infinite
}

.start-bg .start-btn:after {
	content: "";
	width: 2.38rem;
	height: .28rem;
	background: url(../images/index/btn_start.png) 50% no-repeat;
	background-size: cover;
	display: block;
	position: absolute;
	left: .4rem;
	top: .05rem
}

@-webkit-keyframes start-btn {
	0% {
		-webkit-transform: rotateY(0);
		transform: rotateY(0)
	}

	to {
		-webkit-transform: rotateY(1turn);
		transform: rotateY(1turn)
	}
}

@keyframes start-btn {
	0% {
		-webkit-transform: rotateY(0);
		transform: rotateY(0)
	}

	to {
		-webkit-transform: rotateY(1turn);
		transform: rotateY(1turn)
	}
}

.gacha-list-view {
	margin-top: 1.14rem;
	height: 2.5rem
}

.gacha-list-view.empty:after {
	content: "";
	width: 3.29rem;
	height: .25rem;
	top: 50%;
	left: 50%;
	margin-top: -.12rem;
	margin-left: -1.64rem;
	background: url(../images/index/reward_empty.png) 50% no-repeat;
	background-size: cover;
	position: absolute
}

.gacha-list-view .gacha-list {
	font-size: .24rem;
	font-weight: 400
}

.gacha-list-view .gacha-list li {
	zoom: 1;
	line-height: .42rem;
	background-color: #fff;
	border-radius: .04rem;
	padding: 0 .1rem
}

.gacha-list-view .gacha-list li:after {
	content: "";
	display: block;
	visibility: hidden;
	height: 0;
	clear: both;
	font-size: 0
}

.gacha-list-view .gacha-list li .r-name {
	float: left
}

.gacha-list-view .gacha-list li .r-date {
	float: right
}

.gacha-list-view .gacha-list li+li {
	margin-top: .1rem
}

.gacha-list-view .gacha-list-arrow {
	position: absolute;
	width: .31rem;
	height: .19rem;
	bottom: .5rem;
	left: 50%;
	margin-left: -.15rem;
	background: url(../images/index/arrow.png) 50% no-repeat;
	background-size: cover;
	-webkit-transform: .3s opacity;
	transform: .3s opacity;
	-webkit-animation: arrow-float 1s linear infinite alternate;
	animation: arrow-float 1s linear infinite alternate
}

.gacha-list-view .gacha-list-arrow.arrow-out {
	opacity: 0
}

.summary-view {
	margin-top: 1.53rem
}

.summary-view .summary-list {
	font-size: .24rem;
	font-weight: 400
}

.summary-view .summary-list li {
	zoom: 1;
	line-height: .42rem;
	padding: 0 .1rem
}

.summary-view .summary-list li:after {
	content: "";
	display: block;
	visibility: hidden;
	height: 0;
	clear: both;
	font-size: 0
}

.summary-view .summary-list li .s-desc {
	float: left
}

.summary-view .summary-list li .s-num {
	float: right
}

.summary-view .summary-list li+li {
	margin-top: .1rem
}

.summary-view .s-sum {
	position: absolute;
	bottom: .32rem;
	right: 1.38rem;
	width: .64rem;
	text-align: center;
	white-space: nowrap
}

.dialog-container .dialog-mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .8);
	z-index: 11200
}

.dialog-container.dialog-summary .dialog-content {
	width: 6.29rem;
	height: 3.94rem;
	margin-left: -3.14rem;
	margin-top: -1.97rem;
	background: url(../images/index/dialog_summary.png) 50% no-repeat;
	background-size: cover
}

.dialog-container.dialog-gacha-0 .dialog-content .dialog-help,
.dialog-container.dialog-gacha .dialog-content .dialog-help {
	position: absolute;
	width: .3rem;
	height: .45rem;
	background: url(../images/index/btn_gacha_help.png) 50% no-repeat;
	background-size: cover
}

.dialog-container.dialog-gacha-0 .dialog-content .ticket-num,
.dialog-container.dialog-gacha .dialog-content .ticket-num {
	position: absolute;
	top: .35rem;
	font-size: .24rem;
	line-height: .24rem;
	color: #fd4848;
	font-weight: bolder;
	-webkit-text-stroke: 1px #fff
}

.dialog-container.dialog-gacha-0 .dialog-content .ticket-num .number,
.dialog-container.dialog-gacha .dialog-content .ticket-num .number {
	vertical-align: bottom
}

.dialog-container.dialog-gacha .dialog-content {
	width: 7.92rem;
	height: 3.16rem;
	margin-left: -3.96rem;
	margin-top: -1.58rem;
	background: url(../images/index/dialog_gacha.png) 50% no-repeat;
	background-size: cover
}

.dialog-container.dialog-gacha .dialog-content .dialog-help {
	right: 1.65rem;
	top: .2rem
}

.dialog-container.dialog-gacha .dialog-content .dialog-close {
	right: 1rem
}

.dialog-container.dialog-gacha .dialog-content .ticket-num {
	left: 1.75rem
}

.dialog-container.dialog-gacha .dialog-content .dialog-btn-wrp {
	bottom: .5rem
}

.dialog-container.dialog-gacha .dialog-content .dialog-btn {
	width: 1.58rem;
	height: .6rem;
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	cursor: pointer;
	display: inline-block;
	vertical-align: top
}

.dialog-container.dialog-gacha .dialog-content .dialog-btn.dialog-btn-confirm {
	position: relative
}

.dialog-container.dialog-gacha .dialog-content .dialog-btn.dialog-btn-confirm.single {
	background-image: url(../images/index/btn_gacha_1.png)
}

.dialog-container.dialog-gacha .dialog-content .dialog-btn.dialog-btn-confirm.multi {
	background-image: url(../images/index/btn_gacha_n.png)
}

.dialog-container.dialog-gacha .dialog-content .dialog-btn.dialog-btn-confirm .number {
	position: absolute;
	right: 1.04rem;
	top: .18rem
}

.dialog-container.dialog-gacha .dialog-content .dialog-btn.dialog-btn-confirm .number span {
	background-image: url(../images/index/number_gacha.png)
}

.dialog-container.dialog-gacha .dialog-content .dialog-btn+.dialog-btn {
	margin-left: .6rem
}

.dialog-container.dialog-rule .dialog-content {
	width: 7.73rem;
	height: 4.9rem;
	margin-left: -3.86rem;
	margin-top: -2.45rem;
	background: url(../images/index/rule.png) 50% no-repeat;
	background-size: cover
}

.dialog-container.dialog-gacha-0 .dialog-content {
	width: 6.26rem;
	height: 3.16rem;
	margin-left: -3.13rem;
	margin-top: -1.58rem;
	background: url(../images/index/dialog_gacha_0.png) 50% no-repeat;
	background-size: cover
}

.dialog-container.dialog-gacha-0 .dialog-content .dialog-help {
	right: .8rem;
	top: .2rem
}

.dialog-container.dialog-gacha-0 .dialog-content .ticket-num {
	left: .9rem
}

.dialog-container.dialog-reward .dialog-content {
	width: 7.38rem;
	height: 6.35rem;
	margin-left: -3.69rem;
	margin-top: -3.17rem;
	background: url(../images/index/dialog_reward2.png) 50% no-repeat;
	background-size: cover
}

.dialog-container.dialog-reward .dialog-content .dialog-close {
	top: .16rem;
	right: .16rem
}

.dialog-container.dialog-reward .dialog-content .gacha-reward-state {
	position: absolute;
	top: 1.92rem;
	left: .79rem;
	width: 6.1rem;
	zoom: 1
}

.dialog-container.dialog-reward .dialog-content .gacha-reward-state:after {
	content: "";
	display: block;
	visibility: hidden;
	height: 0;
	clear: both;
	font-size: 0
}

.dialog-container.dialog-reward .dialog-content .gacha-reward-state li {
	width: .85rem;
	height: .85rem;
	float: left;
	margin-right: .14rem;
	margin-bottom: .13rem
}

.dialog-container.dialog-reward .dialog-content .gacha-reward-state li.empty {
	background: url(../images/index/reward_get.png) 50% no-repeat;
	background-size: cover
}

.dialog-container.dialog-reward .dialog-content .gacha-reward-state li.r25 {
	position: absolute;
	top: -1.12rem;
	left: .03rem
}

.dialog-container.dialog-gacha-list .dialog-content .dialog-text-wrp,
.dialog-container.dialog-summary .dialog-content .dialog-text-wrp {
	height: auto;
	padding-left: .3rem;
	padding-right: .3rem
}

.dialog-container.dialog-gacha-list .dialog-content {
	width: 6.26rem;
	height: 4.44rem;
	margin-left: -3.13rem;
	margin-top: -2.22rem;
	background: url(../images/index/dialog_list.png) 50% no-repeat;
	background-size: cover
}

.dialog-container .dialog-content {
	position: absolute;
	z-index: 11300;
	top: 50%;
	left: 50%;
	width: 5.29rem;
	height: 2.69rem;
	margin-left: -2.64rem;
	margin-top: -1.34rem;
	background: url(../images/index/dialog.png) 50% no-repeat;
	background-size: cover;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.dialog-container .dialog-content .dialog-close {
	position: absolute;
	right: .2rem;
	top: .2rem;
	width: .44rem;
	height: .45rem;
	background: url(../images/index/dialog_close.png) 50% no-repeat;
	background-size: cover;
	cursor: pointer
}

.dialog-container .dialog-content .dialog-close:active {
	opacity: .95;
	-webkit-transform: scale(.95);
	transform: scale(.95)
}

.dialog-container .dialog-content .dialog-help {
	position: absolute;
	cursor: pointer
}

.dialog-container .dialog-content .dialog-help:active {
	opacity: .95;
	-webkit-transform: scale(.95);
	transform: scale(.95)
}

.dialog-container .dialog-content .dialog-text-wrp {
	padding-top: 0;
	padding-left: .4rem;
	padding-right: .4rem;
	height: 2rem;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	display: table;
	width: 100%
}

.dialog-container .dialog-content .dialog-text-wrp .dialog-text {
	font-size: .32rem;
	color: #eb9f69;
	font-weight: 700;
	display: table-cell;
	vertical-align: middle;
	word-break: break-all;
	word-wrap: break-word;
	line-height: .5rem
}

.dialog-container .dialog-content .dialog-btn-wrp {
	position: absolute;
	width: 100%;
	text-align: center;
	left: 0;
	bottom: .2rem;
	font-size: 0;
	color: #fff
}

.dialog-container .dialog-content .dialog-btn {
	width: 1.61rem;
	height: .71rem;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover;
	cursor: pointer;
	display: inline-block;
	vertical-align: top
}

.dialog-container .dialog-content .dialog-btn:active {
	opacity: .95;
	-webkit-transform: scale(.95);
	transform: scale(.95)
}

.dialog-container .dialog-content .dialog-btn.dialog-btn-confirm {
	background-image: url(../images/index/btn_confirm.png)
}

.dialog-container .dialog-content .dialog-btn.dialog-btn-cancel {
	background-image: url(../images/index/btn_cancel.png)
}

.dialog-container .dialog-content .dialog-btn+.dialog-btn {
	margin-left: .6rem
}

.tip-content {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 11300
}

.wechat .tip-content {
	width: 9.59rem;
	height: 5.22rem;
	background: url(http://static.event.mihoyo.com/common/images/tip_wechat.png) 50% no-repeat;
	background-size: cover;
	margin-left: -4.79rem;
	margin-top: -2.61rem
}

.page-body {
	z-index: 9999;
	-webkit-animation: fade-in .3s both;
	animation: fade-in .3s both
}

.page-body,
.page-body .page-mask {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0
}

.page-body .page-mask {
	background-color: rgba(0, 0, 0, .8);
	z-index: 100
}

.page-body .page-content {
	position: relative;
	z-index: 200;
	width: 100%;
	height: 100%
}

.page-body .btn-close {
	position: absolute;
	top: .1rem;
	right: .1rem;
	width: .71rem;
	height: .71rem;
	background: url(../images/index/activity/btn_close.png) 50% no-repeat;
	background-size: cover;
	cursor: pointer
}

.page-body .btn-close:active {
	opacity: .95;
	-webkit-transform: scale(.95);
	transform: scale(.95)
}

.page-activity .activity-pages {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10.66rem;
	height: 6.99rem;
	margin-left: -5.33rem;
	margin-top: -3.5rem
}

.page-activity .activity-pages .p {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	-webkit-transition: .5s;
	transition: .5s;
	-webkit-transform: translate(.3rem, .3rem);
	transform: translate(.3rem, .3rem)
}

.page-activity .activity-pages .p.p1 {
	background: url(../images/index/activity/p1.png) 50% no-repeat;
	background-size: cover
}

.page-activity .activity-pages .p.p2 {
	background: url(../images/index/activity/p2.png) 50% no-repeat;
	background-size: cover
}

.page-activity .activity-pages .p.p3 {
	background: url(../images/index/activity/p3.png) 50% no-repeat;
	background-size: cover
}

.page-activity .activity-pages .p.p4 {
	background: url(../images/index/activity/p4.png) 50% no-repeat;
	background-size: cover
}

.page-activity .activity-pages .p.enter {
	opacity: 1;
	-webkit-transform: translate(0);
	transform: translate(0)
}

.page-activity .arrow {
	position: absolute;
	top: 50%;
	margin-top: -.45rem;
	width: .55rem;
	height: .9rem;
	background: url(../images/index/activity/arrow.png) 50% no-repeat;
	background-size: cover;
	cursor: pointer
}

.page-activity .arrow:active {
	opacity: .95;
	-webkit-transform: scale(.95);
	transform: scale(.95)
}

.page-activity .arrow.arrow-prev {
	left: .2rem;
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1)
}

.page-activity .arrow.arrow-next {
	right: .2rem
}

.page-live .live-bg {
	width: 100%;
	height: 100%;
	background: url(../images/index/live/bg.png) 50% no-repeat;
	background-size: cover
}

.page-live .live-btn {
	position: absolute;
	width: 2.28rem;
	height: .78rem;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover;
	cursor: pointer
}

.page-live .live-btn:active {
	opacity: .95;
	-webkit-transform: scale(.95);
	transform: scale(.95)
}

.page-live .live-btn.btn-feedback {
	bottom: .8rem;
	left: 1.6rem;
	background-image: url(../images/index/live/btn_feedback.png)
}

.page-live .live-btn.btn-live {
	bottom: 1.14rem;
	right: 1.3rem;
	background-image: url(../images/index/live/btn_live.png)
}

.page-gallery .bg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9.98rem;
	height: 5.89rem;
	margin-left: -5.77rem;
	margin-top: -2.77rem;
	background: url(../images/index/gallery/bg.png) 50% no-repeat;
	background-size: cover
}

.page-gallery .g-item {
	position: absolute
}

.page-gallery .g-item.pv {
	top: 2.62rem;
	left: 3.12rem;
	width: 3.56rem;
	height: 3.28rem;
	background: url(../images/index/gallery/pv.png) 50% 0 no-repeat;
	background-size: 3.56rem 6.56rem
}

.page-gallery .g-item.pv:not(.lock):active {
	background-position: 0 -3.28rem
}

.page-gallery .g-item.pv.lock:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -.52rem;
	margin-top: -.52rem;
	width: 1.03rem;
	height: 1.04rem;
	background: url(../images/index/gallery/lock.png) 50% no-repeat;
	background-size: cover;
	margin-top: -.3rem;
	margin-left: -.6rem
}

.page-gallery .g-item.pv.lock .click-layer {
	cursor: default
}

.page-gallery .g-item.pv .click-layer {
	position: absolute;
	top: .8rem;
	left: .5rem;
	width: 2.7rem;
	height: 2.2rem;
	cursor: pointer
}

.page-gallery .g-item.comics {
	top: .48rem;
	right: .33rem
}

.page-gallery .g-item.comics li {
	position: relative
}

.page-gallery .g-item.comics li .img-layer {
	position: absolute;
	top: -.06rem;
	width: 1.89rem;
	height: 1.16rem;
	background: url(../images/index/gallery/comic.png) 50% 0 no-repeat;
	background-size: 11.34rem 1.16rem;
	z-index: 0
}

.page-gallery .g-item.comics li .click-layer {
	width: 1.89rem;
	height: 1.04rem;
	position: relative;
	z-index: 10;
	cursor: pointer
}

.page-gallery .g-item.comics li.lock .img-layer:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -.52rem;
	margin-top: -.52rem;
	width: 1.03rem;
	height: 1.04rem;
	background: url(../images/index/gallery/lock.png) 50% no-repeat;
	background-size: cover
}

.page-gallery .g-item.comics li.lock .click-layer {
	cursor: default
}

.page-gallery .g-item.comics li.c1 .img-layer {
	background-position: 0 0
}

.page-gallery .g-item.comics li.c1:not(.lock):active .img-layer {
	background-position: -1.89rem 0
}

.page-gallery .g-item.comics li.c2 .img-layer {
	background-position: -3.78rem 0
}

.page-gallery .g-item.comics li.c2:not(.lock):active .img-layer {
	background-position: -5.67rem 0
}

.page-gallery .g-item.comics li.c3 .img-layer {
	background-position: -7.56rem 0
}

.page-gallery .g-item.comics li.c3:not(.lock):active .img-layer {
	background-position: -9.45rem 0
}

.page-gallery .g-item.cg-1 {
	top: .17rem;
	left: 5.13rem;
	width: 2.44rem;
	height: 3.25rem;
	background: url(../images/index/gallery/btn_cg1.png) 50% 0 no-repeat;
	background-size: 2.44rem 6.5rem;
	cursor: pointer
}

.page-gallery .g-item.cg-1:active {
	background-position: 0 -3.25rem
}

.page-gallery .g-item.cg-2 {
	bottom: .18rem;
	right: .42rem;
	width: 3.11rem;
	height: 2.17rem;
	background: url(../images/index/gallery/btn_cg2.png) 50% 0 no-repeat;
	background-size: 3.11rem 4.34rem;
	cursor: pointer
}

.page-gallery .g-item.cg-2:active {
	background-position: 0 -2.17rem
}

.page-gallery .cg-view {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover;
	-webkit-animation: fade-in .5s both;
	animation: fade-in .5s both
}

.page-gallery .cg-view.fade-out {
	-webkit-animation: fade-out .3s both;
	animation: fade-out .3s both
}

.page-gallery .cg-view.cg-1 {
	background-image: url(../images/index/gallery/cg1.jpg)
}

.page-gallery .cg-view.cg-2 {
	background-image: url(../images/index/gallery/cg2.jpg)
}

.page-gallery .comic-content {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10000;
	-webkit-animation: fade-in .5s both;
	animation: fade-in .5s both
}

.page-gallery .comic-content .comic-mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .8);
	z-index: 200
}

.page-gallery .comic-content .comic-close {
	position: absolute;
	top: .2rem;
	right: .8rem;
	width: .71rem;
	height: .71rem;
	background: url(../images/index/activity/btn_close.png) 50% no-repeat;
	background-size: cover;
	z-index: 800;
	cursor: pointer
}

.page-gallery .comic-content .comic-page-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 500
}

.page-gallery .comic-content .comic-page-container .comic-view {
	width: 8.5rem;
	margin: 0 auto
}

.page-gallery .comic-content .comic-page-container .comic-page {
	width: 100%
}

.page-gallery .comic-content .comic-page-container .comic-page img {
	display: block;
	width: 100%
}

@-webkit-keyframes scale-outIn {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	50% {
		-webkit-transform: scale(1.2);
		transform: scale(1.2)
	}

	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes scale-outIn {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	50% {
		-webkit-transform: scale(1.2);
		transform: scale(1.2)
	}

	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@-webkit-keyframes circle1 {
	0% {
		-webkit-transform: rotate(-67.5deg) translateX(.82rem) rotate(67.5deg);
		transform: rotate(-67.5deg) translateX(.82rem) rotate(67.5deg)
	}

	to {
		-webkit-transform: rotate(292.5deg) translateX(.82rem) rotate(-292.5deg);
		transform: rotate(292.5deg) translateX(.82rem) rotate(-292.5deg)
	}
}

@keyframes circle1 {
	0% {
		-webkit-transform: rotate(-67.5deg) translateX(.82rem) rotate(67.5deg);
		transform: rotate(-67.5deg) translateX(.82rem) rotate(67.5deg)
	}

	to {
		-webkit-transform: rotate(292.5deg) translateX(.82rem) rotate(-292.5deg);
		transform: rotate(292.5deg) translateX(.82rem) rotate(-292.5deg)
	}
}

@-webkit-keyframes circle2 {
	0% {
		-webkit-transform: rotate(-22.5deg) translateX(.82rem) rotate(22.5deg);
		transform: rotate(-22.5deg) translateX(.82rem) rotate(22.5deg)
	}

	to {
		-webkit-transform: rotate(337.5deg) translateX(.82rem) rotate(-337.5deg);
		transform: rotate(337.5deg) translateX(.82rem) rotate(-337.5deg)
	}
}

@keyframes circle2 {
	0% {
		-webkit-transform: rotate(-22.5deg) translateX(.82rem) rotate(22.5deg);
		transform: rotate(-22.5deg) translateX(.82rem) rotate(22.5deg)
	}

	to {
		-webkit-transform: rotate(337.5deg) translateX(.82rem) rotate(-337.5deg);
		transform: rotate(337.5deg) translateX(.82rem) rotate(-337.5deg)
	}
}

@-webkit-keyframes circle3 {
	0% {
		-webkit-transform: rotate(22.5deg) translateX(.82rem) rotate(-22.5deg);
		transform: rotate(22.5deg) translateX(.82rem) rotate(-22.5deg)
	}

	to {
		-webkit-transform: rotate(382.5deg) translateX(.82rem) rotate(-382.5deg);
		transform: rotate(382.5deg) translateX(.82rem) rotate(-382.5deg)
	}
}

@keyframes circle3 {
	0% {
		-webkit-transform: rotate(22.5deg) translateX(.82rem) rotate(-22.5deg);
		transform: rotate(22.5deg) translateX(.82rem) rotate(-22.5deg)
	}

	to {
		-webkit-transform: rotate(382.5deg) translateX(.82rem) rotate(-382.5deg);
		transform: rotate(382.5deg) translateX(.82rem) rotate(-382.5deg)
	}
}

@-webkit-keyframes circle4 {
	0% {
		-webkit-transform: rotate(67.5deg) translateX(.82rem) rotate(-67.5deg);
		transform: rotate(67.5deg) translateX(.82rem) rotate(-67.5deg)
	}

	to {
		-webkit-transform: rotate(427.5deg) translateX(.82rem) rotate(-427.5deg);
		transform: rotate(427.5deg) translateX(.82rem) rotate(-427.5deg)
	}
}

@keyframes circle4 {
	0% {
		-webkit-transform: rotate(67.5deg) translateX(.82rem) rotate(-67.5deg);
		transform: rotate(67.5deg) translateX(.82rem) rotate(-67.5deg)
	}

	to {
		-webkit-transform: rotate(427.5deg) translateX(.82rem) rotate(-427.5deg);
		transform: rotate(427.5deg) translateX(.82rem) rotate(-427.5deg)
	}
}

@-webkit-keyframes circle5 {
	0% {
		-webkit-transform: rotate(112.5deg) translateX(.82rem) rotate(-112.5deg);
		transform: rotate(112.5deg) translateX(.82rem) rotate(-112.5deg)
	}

	to {
		-webkit-transform: rotate(472.5deg) translateX(.82rem) rotate(-472.5deg);
		transform: rotate(472.5deg) translateX(.82rem) rotate(-472.5deg)
	}
}

@keyframes circle5 {
	0% {
		-webkit-transform: rotate(112.5deg) translateX(.82rem) rotate(-112.5deg);
		transform: rotate(112.5deg) translateX(.82rem) rotate(-112.5deg)
	}

	to {
		-webkit-transform: rotate(472.5deg) translateX(.82rem) rotate(-472.5deg);
		transform: rotate(472.5deg) translateX(.82rem) rotate(-472.5deg)
	}
}

@-webkit-keyframes circle6 {
	0% {
		-webkit-transform: rotate(157.5deg) translateX(.82rem) rotate(-157.5deg);
		transform: rotate(157.5deg) translateX(.82rem) rotate(-157.5deg)
	}

	to {
		-webkit-transform: rotate(517.5deg) translateX(.82rem) rotate(-517.5deg);
		transform: rotate(517.5deg) translateX(.82rem) rotate(-517.5deg)
	}
}

@keyframes circle6 {
	0% {
		-webkit-transform: rotate(157.5deg) translateX(.82rem) rotate(-157.5deg);
		transform: rotate(157.5deg) translateX(.82rem) rotate(-157.5deg)
	}

	to {
		-webkit-transform: rotate(517.5deg) translateX(.82rem) rotate(-517.5deg);
		transform: rotate(517.5deg) translateX(.82rem) rotate(-517.5deg)
	}
}

@-webkit-keyframes circle7 {
	0% {
		-webkit-transform: rotate(202.5deg) translateX(.82rem) rotate(-202.5deg);
		transform: rotate(202.5deg) translateX(.82rem) rotate(-202.5deg)
	}

	to {
		-webkit-transform: rotate(562.5deg) translateX(.82rem) rotate(-562.5deg);
		transform: rotate(562.5deg) translateX(.82rem) rotate(-562.5deg)
	}
}

@keyframes circle7 {
	0% {
		-webkit-transform: rotate(202.5deg) translateX(.82rem) rotate(-202.5deg);
		transform: rotate(202.5deg) translateX(.82rem) rotate(-202.5deg)
	}

	to {
		-webkit-transform: rotate(562.5deg) translateX(.82rem) rotate(-562.5deg);
		transform: rotate(562.5deg) translateX(.82rem) rotate(-562.5deg)
	}
}

@-webkit-keyframes circle8 {
	0% {
		-webkit-transform: rotate(247.5deg) translateX(.82rem) rotate(-247.5deg);
		transform: rotate(247.5deg) translateX(.82rem) rotate(-247.5deg)
	}

	to {
		-webkit-transform: rotate(607.5deg) translateX(.82rem) rotate(-607.5deg);
		transform: rotate(607.5deg) translateX(.82rem) rotate(-607.5deg)
	}
}

@keyframes circle8 {
	0% {
		-webkit-transform: rotate(247.5deg) translateX(.82rem) rotate(-247.5deg);
		transform: rotate(247.5deg) translateX(.82rem) rotate(-247.5deg)
	}

	to {
		-webkit-transform: rotate(607.5deg) translateX(.82rem) rotate(-607.5deg);
		transform: rotate(607.5deg) translateX(.82rem) rotate(-607.5deg)
	}
}

@-webkit-keyframes arrow-float {
	0% {
		-webkit-transform: translateY(5px);
		transform: translateY(5px)
	}

	to {
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px)
	}
}

@keyframes arrow-float {
	0% {
		-webkit-transform: translateY(5px);
		transform: translateY(5px)
	}

	to {
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px)
	}
}