body{
	background-color: #fff;
}
*{
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
[v-cloak]{
	display: none;
}
.main{
	width: 7.5rem;
	height: 49.5rem;
	margin: 0 auto;
	background-image: url(../img/bg.jpg);
	position: relative;
}
* {
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% auto;
}

/**登录**/
.btn_login {
	position: absolute;
	font-size: .24rem;
	color: #8ab0e3;
	width: 5rem;
	height: .3rem;
	top: .28rem;
	right: .7rem;
	z-index: 2;
	text-align: right;
}

/**注销**/
.user_info {
	position: absolute;
	font-size: .24rem;
	color: #8ab0e3;
	width: 6rem;
	height: .3rem;
	top: .28rem;
	right: .7rem;
	z-index: 2;
	text-align: right;
}
.user_info .change_role {
	cursor: pointer;
}
.user_info .login_out {
	cursor: pointer;
}

/**bgm**/
.btn_music {
	position: absolute;
	width: .44rem;
	height: .44rem;
	background-image: url(../img/bgm.png);
	right: .2rem;
	top: .22rem;
	z-index: 2;
	cursor: pointer;
	transition: all .2s ease;
}
.btn_music.playing {
	background-image: url(../img/bgm_playing.png);
}

.fade-enter{
	opacity: 0;
}
.fade-enter-active{
	transition: opacity 1s;
}
.fade-leave-to{
	opacity: 0;
}
.fade-leave-active{
	transition: opacity 1s;
}

/**首屏**/
.main .home_wpr{
	width: 100%;
	height: 16rem;
	position: relative;
}
.home_wpr .slogan{
	position: absolute;
	width: 7.5rem;
	height: 3.2rem;
	top: 9.2rem;
	left: 0;
	background-image: url(../img/slogan.png);
}
.home_wpr .btns{
	position: absolute;
	top: 14.9rem;
	left: 0;
	text-align: center;
	width: 100%;
	height: 1.04rem;
	display: table;
}
.home_wpr .btns .btn {
	width: 2.8rem;
	height: 1.04rem;
	display: inline-block;
	vertical-align: top;
	margin: 0 .45rem;
}
.home_wpr .btns .btn_open_box{
	background-image: url(../img/btn_open_box.png);
}
.home_wpr .btns .btn_show_reward {
	background-image: url(../img/btn_show_reward.png);
}
.home_wpr .btns .btn_invite{
	background-image: url(../img/btn_invite.png);
}
.home_wpr .btns .btn_open_game{
	background-image: url(../img/btn_open_game.png);
}
.home_wpr .btn_video{
	width: 1.73rem;
	height: 1.72rem;
	background-image: url(../img/btn_video.png);
	position: absolute;
	top: 12.4rem;
	left: 50%;
	margin-left: -0.865rem;
	cursor: pointer;
}
.home_wpr .btn-unbind {
	width: 2.31rem;
	height: 0.34rem;
	background-image: url(../img/btn_unbind.png);
	position: absolute;
	top: 14.2rem;
	left: 50%;
	margin-left: -1.15rem;
	cursor: pointer;
}

/**礼盒进度**/
.prize_wpr {
	overflow: hidden;
	width: 100%;
	height: 15.6rem;
	position: relative;
}
.prize_wpr .title {
	display: none;
}
/**邀请好友拆礼盒**/
.progress_invite_open {
	width: 7.5rem;
	height: 4.6rem;
	margin: 0 auto;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: .4rem;
	z-index: 2;
}
.progress_invite_open .invite_title{
	width: 7.5rem;
	height: 1.5rem;
	background-image: url(../img/invite_progress_title.png?__rev=3576a61);
	margin: 0 auto;
	position: relative;
}
.progress_invite_open .progress {
	width: 6rem;
	height: 0.3rem;
	background-color: #69c2e9;
	border-radius: 0.3rem;
	margin: 1.7rem auto 0;
	overflow: hidden;
	position: relative;
}
.progress_invite_open .reached {
	width: 0;
	height: .22rem;
	background-color: #ed3f39;
	border-radius: .3rem;
	position: absolute;
	left: .05rem;
	top: .04rem;
}
.progress_invite_open .prize_list {
	width: 6rem;
	height: 2.1rem;
	position: absolute;
	left: 50%;
	top: 1.84rem;
	transform: translate(-50%, 0);
}
.progress_invite_open .prize_list .item {
	width: 1.12rem;
	height: 2.1rem;
	text-align: center;
	float: left;
	position: absolute;
	left: 0;
	top: 0;
}
.progress_invite_open .prize_list .item_2 {
	left: 1.4rem;
}
.progress_invite_open .prize_list .item_3 {
	left: 3rem;
}
.progress_invite_open .prize_list .item_4 {
	left: 4.8rem;
}
.progress_invite_open .prize_list .item .image_bg {
	width: 1.12rem;
	height: 1.24rem;
	background-image: url(../img/box_blue_b.png);
	overflow: hidden;
}
.progress_invite_open .prize_list .item.active .image_bg {
	background-image: url(../img/box_yellow_b.png);
}
.progress_invite_open .prize_list .item .image {
	width: 100%;
	height: 100%;
}
.progress_invite_open .prize_list .item_1 .image {
	background-image: url(../img/invite_prize_1.png);
}
.progress_invite_open .prize_list .item_2 .image {
	background-image: url(../img/invite_prize_2.png);
}
.progress_invite_open .prize_list .item_3 .image {
	background-image: url(../img/invite_prize_3.png);
}
.progress_invite_open .prize_list .item_4 .image {
	background-image: url(../img/invite_prize_4.png);
}
.progress_invite_open .prize_list .item .icon {
	width: .42rem;
	height: .43rem;
	background-image: url(../img/i_notreach.png);
	display: block;
	margin: .04rem auto 0;
}
.progress_invite_open .prize_list .item.active .icon {
	background-image: url(../img/i_reached.png);
}
.progress_invite_open .prize_list .item p {
	font-size: .28rem;
	color: #2471ae;
	margin-top: .1rem;
}

/**帮好友拆礼盒**/
.progress_self_open {
	width: 7.5rem;
	height: 5rem;
	margin: 0 auto;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 5.3rem;
}
.progress_self_open .self_title{
	width: 7.5rem;
	height: 1.5rem;
	background-image: url(../img/open_progress_title.png?__rev=3576a6e);
	margin: 0 auto;
	position: relative;
}
.progress_self_open .progress {
	width: 6rem;
	height: 0.3rem;
	background-color: #69c2e9;
	border-radius: 0.3rem;
	margin: 1.5rem auto 0;
	overflow: hidden;
	position: relative;
}
.progress_self_open .reached {
	width: 0;
	height: .22rem;
	background-color: #ed3f39;
	border-radius: .3rem;
	position: absolute;
	left: .05rem;
	top: .04rem;
}
.progress_self_open .prize_list {
	width: 6rem;
	height: 1.88rem;
	position: absolute;
	left: 50%;
	top: 1.86rem;
	transform: translate(-50%, 0);
}
.progress_self_open .prize_list .item {
	width: .89rem;
	height: 1.88rem;
	text-align: center;
	float: left;
	position: absolute;
	left: 0;
	top: 0;
}
.progress_self_open .prize_list .item_2 {
	left: 16.6667%;
}
.progress_self_open .prize_list .item_3 {
	left: 33.333%;
}
.progress_self_open .prize_list .item_4 {
	left: 50%;
}
.progress_self_open .prize_list .item_5 {
	left: 66.666667%;
}
.progress_self_open .prize_list .item_6 {
	left: 83.33333%;
}
.progress_self_open .prize_list .item .image_bg {
	width: .89rem;
	height: .98rem;
	background-image: url(../img/box_blue_s.png);
	overflow: hidden;
}
.progress_self_open .prize_list .item.active .image_bg {
	background-image: url(../img/box_yellow_s.png);
}
.progress_self_open .prize_list .item .image {
	width: .7rem;
	height: .7rem;
	margin: .08rem auto 0;
	background-image: url(../img/invite_prize_1.png);
}
.progress_self_open .prize_list .item_2 .image,
.progress_self_open .prize_list .item_3 .image,
.progress_self_open .prize_list .item_4 .image,
.progress_self_open .prize_list .item_5 .image {
	width: .76rem;
	height: .72rem;
	background-image: url(../img/help_prize_2.png);
}
.progress_self_open .prize_list .item_1 .image,
.progress_self_open .prize_list .item_6 .image {
	width: .69rem;
	height: .7rem;
	background-image: url(../img/help_prize_1.png);
}
.progress_self_open .prize_list .item .icon {
	width: .42rem;
	height: .43rem;
	background-image: url(../img/i_notreach.png);
	display: block;
	margin: .05rem auto 0;
}
.progress_self_open .prize_list .item.active .icon {
	background-image: url(../img/i_reached.png);
}
.progress_self_open .prize_list .item p {
	font-size: .28rem;
	color: #2471ae;
  margin-top: .06rem;
}
.progress_self_open .btn_show_prize {
	width: 2.86rem;
	height: .7rem;
	background-image: url(../img/show_prize_btn.png);
	margin: .74rem auto 0;
	cursor: pointer;
}

.progress_invite_return{
	width: 7.5rem;
	height: 4.4rem;
	margin: 0 auto;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 10.4rem;
} 
.progress_invite_return .return_title{
	position: relative;
	width: 7.5rem;
	height: 1.5rem;
	margin: 0.2rem auto 0;
	background-image: url(../img/invite_return_title.png);
} 
.progress_invite_return .prize_list{
	position: relative;
	width: 7.5rem;
	height: 1.9rem;
	margin: 0 auto;
	background-image: url(../img/invite_return_prize.png);
} 

/**规则说明**/
.rule_wpr {
	overflow: hidden;
	width: 7.1rem;
	height: 7.4rem;
	position: relative;
	margin: 0 auto;
}
.rule_wpr .title {
	position: relative;
	width: 4.42rem;
	height: 0.8rem;
	margin: 0 auto 0.3rem;
	background-image: url(../img/rule_title.png);
}
.rule_wpr .content {
	width: 6.78rem;
	height: 5.45rem;
	margin: 0.5rem auto;
	background-image: url(../img/rule_cnt.png?__rev=3576a63);
}

/**其他福利**/
.swiper_wpr {
	overflow: hidden;
	width: 100%;
	height: 7rem;
	position: relative;
}
.swiper_wpr .title {
	position: relative;
	width: 4.42rem;
	height: 0.8rem;
	background-image: url(../img/extra_title.png);
	margin: 1rem auto 0;
}
.swiper_wpr .content {
	width: 6.9rem;
	margin: .16rem auto 0;
}
.swiper_wpr .swiper-container{
	width: 6.9rem;
	height: 4.18rem;
	margin: .3rem auto .1rem;
}
.swiper_wpr .swiper-slide{
	height: 4.18rem;
	width: 6.9rem;
	text-align: center;
}
.swiper_wpr .img_bg {
	height: 4rem;
	width: 6.9rem;
	background-image: url(../img/act_img_bg.png);
	position: relative;
}
.swiper_wpr .swiper-slide img{
	width: 6.75rem;
	height: 3.86rem;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
}
.swiper_wpr .swiper-pagination{
	position: relative;
	height: .24rem;
	line-height: .24rem;
	display: flex;
	justify-content: center;
}
.swiper_wpr .swiper-pagination .swiper-pagination-bullet{
	width: .24rem;
	height: .24rem;
	background-color: #6296d6;
	margin: 0 .13rem;
	opacity: 1;
}
.swiper_wpr .swiper-pagination .swiper-pagination-bullet-active{
	background-color: #da4544;
}

/*css3*/
.g-animEle1,
.g-animEle2,
.g-animEle3 {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1
}

.ui-animEle {
  -webkit-transform: translate3d(0, 40px, 0);
  -moz-transform: translate3d(0, 40px, 0);
  -ms-transform: translate3d(0, 40px, 0);
  -o-transform: translate3d(0, 40px, 0);
  transform: translate3d(0, 40px, 0);
  opacity: 0
}

.g-animEle1 {
  -webkit-transition: all .8s ease-out .1s;
  -moz-transition: all .8s ease-out .1s;
  -ms-transition: all .8s ease-out .1s;
  -o-transition: all .8s ease-out .1s;
  transition: all .8s ease-out .1s
}

.g-animEle2 {
  -webkit-transition: all 1.0s ease-out .3s;
  -moz-transition: all .8s ease-out .8s;
  -ms-transition: all .8s ease-out .8s;
  -o-transition: all .8s ease-out .8s;
  transition: all 1.0s ease-out .3s
}

.g-animEle3 {
  -webkit-transition: all 1.2s ease-out .5s;
  -moz-transition: all .8s ease-out .9s;
  -ms-transition: all .8s ease-out .9s;
  -o-transition: all .8s ease-out .9s;
  transition: all 1.2s ease-out .5s
}

.g-animEle4 {
  -webkit-transition: all 1.4s ease-out .7s;
  -moz-transition: all .8s ease-out .9s;
  -ms-transition: all .8s ease-out .9s;
  -o-transition: all .8s ease-out .9s;
  transition: all 1.4s ease-out .7s
}

@-webkit-keyframes circle-rotate {
	0% {
			transform: rotate(0);
			-webkit-transform: rotate(0);
			-moz-transform: rotate(0);
	}

	100% {
			transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			-moz-transform: rotate(360deg);
	}
}

@keyframes circle-rotate {
	0% {
			transform: rotate(0);
			-webkit-transform: rotate(0);
			-moz-transform: rotate(0);
	}

	100% {
			transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			-moz-transform: rotate(360deg);
	}
}