/****** START common ******/
body{
	background-color: #fff;
	width: 100%;
}
*{
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
[v-cloak]{
	display: none;
}
.main{
	width: 7.5rem;
	height: 55.8rem;
	margin: 0 auto;
	background-image: url(../img/bg.jpg);
	position: relative;
}
/** 汉仪旗黑 **/
@font-face {
	font-family: 'HYQiHei-60S';
	src: url("../../../resource/fonts/HYQiHei-60S.ttf") format('truetype');
}
@font-face {
	font-family: 'HYQiHei-80S';
	src: url("../../../resource/fonts/HYQiHei-80S.ttf") format('truetype');
}

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

/****** START topbar ******/
.topbar {
	position: absolute;
	width: 100%;
	height: .3rem;
	top: 1rem;
	left: 0;
}
/**登录**/
.btn_login {
	position: absolute;
	font-size: .24rem;
	color: #fcd24f;
	width: 5rem;
	height: .3rem;
	top: 0;
	left: .8rem;
	z-index: 2;
	cursor: pointer;
}

/**注销**/
.user_info {
	position: absolute;
	font-size: .24rem;
	color: #fcd24f;
	width: 6rem;
	height: .3rem;
	top: 0;
	left: .8rem;
	z-index: 2;
}
.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);
	left: .2rem;
	top: -.04rem;
	z-index: 2;
	cursor: pointer;
	transition: all .2s ease;
}
.btn_music.playing {
	background-image: url(../img/bgm_playing.png);
}
/****** END topbar ******/

/****** START 首屏 ******/
.main .home_wpr{
	width: 100%;
	height: 12.4rem;
	position: relative;
}
.home_wpr .slogan{
	position: absolute;
	top: 6.65rem;
	left: 0;
  width: 7.50rem;
  height: 4.58rem;
	background-image: url(../img/home/slogan.png);
}
.home_wpr .btns{
	position: absolute;
	top: 10.6rem;
	left: 0;
	text-align: center;
	width: 100%;
	display: table;
}
.home_wpr .btns .btn {
	display: inline-block;
	vertical-align: top;
	margin: 0 0.3rem;
}
.home_wpr .btns .btn_open_box{
  width: 3.02rem;
  height: 1.25rem;
	background-image: url(../img/home/btn_open_box.png);
}
.home_wpr .btns .btn_show_reward {
  width: 3.64rem;
  height: 2.93rem;
	background-image: url(../img/home/btn_show_reward.png);
}
.home_wpr .btns .btn_invite{
	width: 3.64rem;
	height: 2.93rem;
	background-image: url(../img/home/btn_invite.png);
}
.home_wpr .btns .btn_open_game{
  width: 3.02rem;
  height: 1.25rem;
  background-image: url(../img/home/btn_open_game.png);
}
.home_wpr .btn_video{
	width: .92rem;
	height: .96rem;
	background-image: url(../img/home/btn_video.png);
	position: absolute;
	top: 5.9rem;
	left: 50%;
	margin-left: -.46rem;
	cursor: pointer;
}
.home_wpr .btn-unbind {
	width: 1.84rem;
	height: .27rem;
	background-image: url(../img/home/btn_unbind.png);
	position: absolute;
	top: 6.9rem;
	left: 50%;
	margin-left: -.92rem;
	cursor: pointer;
}
/****** END 首屏 ******/

/****** START 活动奖励 ******/
/**礼盒进度**/
.prize_wpr {
	overflow: hidden;
	width: 100%;
	/* height: 19rem; */
	position: relative;
	height: 17.48rem;
	background-image: url(../img/prize/bg.png);
	margin-top: 0.3rem;
}
.prize_wpr .title {
  width: 4.40rem;
  height: 1.02rem;
  background-image: url(../img/prize/prize_title.png);
  margin: 0 auto;
  margin-top: 0.96rem;
}
/**邀请好友拆礼盒进度**/
.progress_invite_open {
	position: absolute;
	left: 0;
	top: 2.4rem;
	width: 7.5rem;
	height: 5.1rem;
	/* background-image: url(../img/prize/invite_progress_bg.png?__rev=3576a61); */
	z-index: 2;
}
.progress_invite_open .invite_title{
	margin: 0 auto;
	position: relative;
  width: 4.93rem;
  height: 1.15rem;
	background-image: url(../img/prize/invite_progress_title_bg.png);
	margin-top: 0.2rem;
}
.progress_invite_open .progress {
	width: 6rem;
	height: .3rem;
	background-color: #5d2821;
	border-radius: .3rem;
	margin: 1.63rem auto 0;
	overflow: hidden;
	position: relative;
}
.progress_invite_open .reached {
	width: 0;
	height: .22rem;
	background-color: #ffed8c;
	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.6rem;
	transform: translate(-50%, 0);
}
.progress_invite_open .prize_list .item {
	width: 1.14rem;
  height: 2.2rem;
	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.14rem;
	height: 1.26rem;
	background-image: url(../img/prize/box_red_b.png);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.progress_invite_open .prize_list .item.active .image_bg {
	background-image: url(../img/prize/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/prize/invite_prize_1.png);
}
.progress_invite_open .prize_list .item_2 .image {
	background-image: url(../img/prize/invite_prize_1.png);
}
.progress_invite_open .prize_list .item_3 .image {
	background-image: url(../img/prize/invite_prize_3.png);
}
.progress_invite_open .prize_list .item_4 .image {
  width: 0.73rem;
  height: 0.74rem;
	background-image: url(../img/prize/invite_prize_4.jpg);
	margin-top: -.1rem;
}
.progress_invite_open .prize_list .item .icon {
	width: .42rem;
	height: .43rem;
	background-image: url(../img/prize/i_notreach.png);
	display: block;
	margin: .04rem auto 0;
}
.progress_invite_open .prize_list .item.active .icon {
	background-image: url(../img/prize/i_reached.png);
}
.progress_invite_open .prize_list .item p {
	font-size: .28rem;
	color: #822e25;
	margin-top: .08rem;
	font-family: 'HYQiHei-60S';
}

/**帮好友拆礼盒进度**/
.progress_self_open {
	position: absolute;
	left: 0;
	top: 6.8rem;
	width: 7.5rem;
	height: 5.2rem;
	/* background-image: url(../img/prize/open_progress_bg.png?__rev=3576a6e); */
}
.progress_self_open .self_title {
	margin: 0 auto;
	position: relative;
	width: 4.93rem;
	height: 1.15rem;
	background-image: url(../img/prize/open_progress_titile_bg.png);
	margin-top: 0.2rem;
}
.progress_self_open .progress {
	width: 6rem;
	height: .3rem;
	background-color: #5d2821;
	border-radius: .3rem;
	margin: 1.48rem auto 0;
	overflow: hidden;
	position: relative;
}
.progress_self_open .reached {
	/* width: 0; */
	height: .22rem;
	background-color: #ffed8c;
	border-radius: .3rem;
	position: absolute;
	left: .05rem;
	top: .03rem;
}
.progress_self_open .prize_list {
	width: 6rem;
	height: 1.88rem;
	position: absolute;
	left: 50%;
	top: 1.7rem;
	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: .91rem;
	height: 1rem;
	background-image: url(../img/prize/box_red_s.png);
	overflow: hidden;
}
.progress_self_open .prize_list .item.active .image_bg {
	background-image: url(../img/prize/box_yellow_s.png);
}
.progress_self_open .prize_list .item .image {
	width: .7rem;
	height: .7rem;
	margin: .08rem auto 0;
	background-image: url(../img/prize/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/prize/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/prize/help_prize_1.png);
}
.progress_self_open .prize_list .item .icon {
	width: .42rem;
	height: .43rem;
	background-image: url(../img/prize/i_notreach.png);
	display: block;
	margin: .05rem auto 0;
}
.progress_self_open .prize_list .item.active .icon {
	background-image: url(../img/prize/i_reached.png);
}
.progress_self_open .prize_list .item p {
	font-size: .28rem;
	color: #822e25;
  margin-top: .07rem;
	font-family: 'HYQiHei-60S';
}
.progress_self_open .btn_show_prize {
  width: 2.20rem;
  height: 0.68rem;
  background-image: url(../img/prize/show_prize_btn.png);
  margin: .6rem auto 0;
  cursor: pointer;
}

/**邀请回归或新手玩家进度**/
.progress_invite_return{
	position: absolute;
	left: 0;
	top: 12rem;
	width: 7.5rem;
	height: 5rem;
	/* background-image: url(../img/prize/invite_return_bg.png); */
}  
.progress_invite_return .return_title{
	position: relative;
	margin: 0rem auto 0;
  width: 6.45rem;
  height: 1.15rem;
	background-image: url(../img/prize/title_03_bg.png);
} 
.progress_invite_return .prize_list{
	position: relative;
	width: 7.5rem;
	height: 1.8rem;
	margin: .3rem auto 0;
	background-image: url(../img/prize/invite_return_prize.png);
} 
/****** END 活动奖励 ******/

/****** START 规则说明 ******/
.rule_wpr .title {
	display: none;
}
.rule_wpr .content {
	width: 7.5rem;
	height: 12rem;
	background-image: url(../img/rule_part.png);
}
/****** END 规则说明 ******/

/****** START 其他活动 ******/
.swiper_wpr {
	position: relative;
	overflow: hidden;
  width: 7.34rem;
  height: 8.20rem;
	background-image: url(../img/act/extra_bg.png);
}
.swiper_wpr .title {
	position: relative;
	/* width: 7.5rem;
	height: 2.57rem; */
  width: 4.40rem;
  height: 1.02rem;
	background-image: url(../img/act/extra_title.png);
	margin: .9rem auto 0;
}
.swiper_wpr .content {
	margin: .2rem auto 0;
  width: 5.98rem;
  height: 3.56rem;
	/* background-image: url(../img/act/img_bg.jpg); */
	border: 3px solid #7c2b10;
	padding-top: 1px;
}
.swiper_wpr .swiper-container{
	width: 5.98rem;
	height: 3.49rem;
	/* margin: 0.03rem auto .1rem; */
	margin-top: -0.02rem;
	margin-left: -0.05rem;
}
.swiper_wpr .swiper-slide{
	width: 5.98rem;
	height: 3.49rem;
	text-align: center;
}
.swiper_wpr .img_bg {
	width: 5.98rem;
	height: 3.49rem;
	position: relative;
	font-size: 0;
}
.swiper_wpr .swiper-slide img{
	width: 5.90rem;
	height: 4.3rem;
	margin-top: -.4rem;
}
.swiper_wpr .swiper-pagination{
	position: relative;
	height: .24rem;
	line-height: .24rem;
	display: flex;
	justify-content: center;
	margin-top: .35rem;
}
.swiper_wpr .swiper-pagination .swiper-pagination-bullet{
	width: .24rem;
	height: .24rem;
	background-color: rgb(47,47,47);
	margin: 0 .125rem;
	opacity: 1;
}
.swiper_wpr .swiper-pagination .swiper-pagination-bullet-active{
	background-color: #5d2821;
}
/****** END 其他活动 ******/

/*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);
	}
}