#web-main {
  width: 100%;
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.color_ba8654{
  color: #ba8654;
}

.color_fff{
  color: #fff;
}
.color_ffcdb5{
  color: #ffcdb5;
}
.color_feecc0{
  color: #feecc0;
}
.color_ffd0bb{
  color: #ffd0bb;
}
.color_edb987{
  color: #edb987;
}
.color_f4cfa4{
  color: #f4cfa4;
}
.color_f1cda5{
  color: #f1cda5;
}
.color_ffeec4{
  color: #ffeec4;
}
.color_f2ba90{
  color: #f2ba90;
}
.color_b5401c{
  color: #b5401c;
}
.color_ffef83{
  color: #ffef83;
}
.color_ffdeb4{
  color: #ffdeb4;
}
.color_fdd796{
  color: #fdd796;
}


.page{
  overflow: hidden;
}

.user_box{ height: .68rem; border-radius: .68rem; top:.36rem; right:.2rem;z-index:666; padding: 0 .15rem; background-color: rgba(255, 255, 255, 0.1); font-size: .16rem; color: #fff;}
.user_box a{color: #fff;}
.user_box p a{color: #ffe17b; text-decoration: underline;}
.user_box .userInfo{display: none;}
.user_box.active .userInfo{display: block;}
.user_box.active p{display: none;}

/* tag: */
.page0{
  background: url(/Public/special/m/images/7zn/0/a_bg.jpg) no-repeat center top #22212f;
  background-size: 100% 16.25rem;
}
.page0 .b-lb{ width:2.15rem;  top: 1.5rem; right:.15rem; animation: downUpCss 10s linear infinite; -webkit-animation: downUpCss 10s linear infinite;}
.page0 .b-lb i{ top:.30rem; width:.24rem; height:.24rem; right:.26rem;}
.page0 .logo{
  width: 2.38rem;
  height: .83rem;
  background: url(/Public/special/m/images/7zn/0/logo.png) no-repeat;
  background-size: 100%;
  left: .24rem;
  top: .32rem;
}
.page0 .role{
  height: 12.57rem;
  background: url(/Public/special/m/images/7zn/0/role.png) no-repeat;
  background-size: 100%;
  left: 0rem;
  top: 3.7rem;
}
.page0 .title{
  width: 7.82rem;
  height: 4.21rem;
  background: url(/Public/special/m/images/7zn/0/a_slogan.png) no-repeat;
  background-size: 100%;
  left: 50%;
  margin-left: -3.85rem;
  bottom: 1.43rem;
}
.page .mousetips{
  width: 4.47rem;
  left: 50%;
  margin-left: -2.23rem;
  bottom: .28rem;
  -webkit-animation: b_t 2s ease-in-out 0s infinite 300ms 0 ease; 
  -moz-animation: b_t 2s ease-in-out 0s infinite 300ms 0 ease;
  -ms-animation: b_t 2s ease-in-out 0s infinite 300ms 0 ease;
  animation: b_t 2s ease-in-out 0s infinite 300ms 0 ease;
  -o-animation: b_t 2s ease-in-out 0s infinite;
  -webkit-animation: b_t 2s ease-in-out 0s infinite;
  -moz-animation: b_t 2s ease-in-out 0s infinite;
  -ms-animation: b_t 2s ease-in-out 0s infinite;
  animation: b_t 2s ease-in-out 0s infinite;
}

  @keyframes b_t{
    0% {
      -o-transform: translateY(-20px);
      -webkit-transform: translateY(-20px);
      -moz-transform: translateY(-20px);
      -ms-transform: translateY(-20px);
      transform: translateY(-20px);
      opacity: 0;
    }
    50% {
        -o-transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }
    100% {
        -o-transform: translateY(20px);
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
        opacity: 0;
    }
  }
.page0 .back{
  width: 1.25rem;
  height: 1.94rem;
  background: url(/Public/special/m/images/7zn/0/btn_back.png) no-repeat;
  background-size: 100%;
  right: 0rem;
  top: 3rem;
}
.page0 .pet{
  width: 2.98rem;
  height: 3.4rem;
  background: url(/Public/special/m/images/7zn/0/pet.png) no-repeat;
  background-size: 100%;
  right: 0rem;
  top: 1.02rem;
}
.page0 .back a.exit{
  width: .25rem;
  height: .25rem;
  background: url(/Public/special/m/images/7zn/2/x.png) no-repeat;
  background-size: 100%;
  right: .12rem;
  top: -.14rem;
  z-index: 55;
}
/* tag: */
.page1{
  background: url(/Public/special/m/images/7zn/1/a_bg.jpg) no-repeat center center;
  /* background: url(/Public/special/m/images/7zn/1/bg.jpg) no-repeat left top #22212f; */
  background-size: 100% 16.25rem;
}
.page1 .role1{
  width: 2.85rem;
  height: 4.07rem;
  background: url(/Public/special/m/images/7zn/1/a_role1.png) no-repeat;
  background-size: 100%;
  left: 0rem;
  bottom: 0rem;
  pointer-events: none;
}
.page1 .role2{
  width: 3.23rem;
  height: 5.09rem;
  background: url(/Public/special/m/images/7zn/1/a_role2.png) no-repeat;
  background-size: 100%;
  right: 0rem;
  bottom: 0rem;
  pointer-events: none;
}
.page1 .title{
  width: 8.68rem;
  height: 1.42rem;
  background: url(/Public/special/m/images/7zn/1/a_title.png) no-repeat;
  background-size: 100%;
  left: 50%;
  margin-left: -3.6rem;
  top: 1.23rem;
}
.page1 .lantern_box{
  width: 100%;
  /* height: 10.2rem; */
  background: url(/Public/special/m/images/7zn/3/bg2.png) no-repeat;
  background-size: 100%;
  left: 0;
  /* top: 3.8rem; */
  top: 50%;
  margin-top: -4.8rem;
}
.page1 .lantern_box ul:nth-child(1){
  margin-left: 1.05rem;
  margin-top: 1.1rem;
}
.page1 .lantern_box ul:nth-child(2){
  margin-left: .06rem;
  margin-top: 1.3rem;
}
.page1 .lantern_box ul:nth-child(3){
  margin-left: .25rem;
  margin-top: 1.2rem;
}
.page1 .lantern_box .lantern{
  width: 1.81rem;
  height: 2.53rem;
  background: url(/Public/special/m/images/7zn/3/lantern.png) no-repeat  center center;
  background-size: 1.35rem 2.07rem;
}
.page1 .lantern_box .lantern.active{
  background: url(/Public/special/m/images/7zn/3/lantern_hover.png) no-repeat;
  background-size: 100%;
}
.page1 .lantern_box .lantern:nth-child(n+2){
  margin-top: -.3rem;
}
.page1 .lantern_box .lantern.rope::after{
  content: "";
  position: absolute;
  width: .23rem;
  height: .83rem;
  background: url(/Public/special/m/images/7zn/3/lantern_rope.png) no-repeat;
  background-size: 100%;
  left: .78rem;
  bottom: -.6rem;
}
.page1 .lantern_box .lantern img{
  width: .76rem;
  margin-left: .51rem;
  margin-top: .83rem;
}
.page1 .lantern_box>div:nth-child(1) .lantern:nth-child(1) img{
  margin-top: .68rem;
}
.page1 .lantern_box>div:nth-child(2) .lantern:nth-child(2) img{
  margin-left: .35rem;
  width: 1rem;
}
.page1 .lantern_box>div:nth-child(3) .lantern:nth-child(2) img{
  margin-left: .31rem;
  margin-top: .63rem;
  width: 1.2rem;
}
.page1 .lantern_box .lantern .lantern_title{
  width: .54rem;
  height: 2.22rem;
  background: url(/Public/special/m/images/7zn/3/frame1.png) no-repeat;
  background-size: 100%;
  left: -.1rem;
  top: .4rem;
  padding-top: .26rem;
  padding-left: .14rem;
}
/* tag: */
.page2{
  background: url(/Public/special/m/images/7zn/2/a_bg.jpg) no-repeat left top #22212f;
  background-size: 100% 16.25rem;
}

.page2 .title{
  width: 8.68rem;
  height: 1.42rem;
  background: url(/Public/special/images/7zn/2/a_t.png) no-repeat;
  background-size: 100%;
  left: 50%;
  margin-left: -3.6rem;
  top: 1.23rem;
}
.page2 .ctx{margin-top: .5rem;}
.page2 .zbox1{padding-top: 4.1rem;width: 100%; box-sizing: border-box;}
.page2 .role_box{width: 100%; height: 6.70rem;}
.page2 .role_box img:nth-child(1){bottom: .55rem; margin-left: .3rem;}
.page2 .role_box img:nth-child(2){bottom: 0;}
.page2 .role_box img:nth-child(3){top: .85rem; margin-left: -1.50rem;}
.page2 .btn_switch{width: 5.80rem; height: .45rem; line-height: .42rem; border-radius: .44rem; background:url(/Public/special/images/7zn/2/a_bg_btn.png) no-repeat; background-size: 100% 100%; text-align: center;}
.page2 .btn_switch a{border-radius: .44rem;color: #ffeec6; font-size: .24rem;}
.page2 .btn_switch a.active{background-color: #d96f4f;   }
.page2 .btn_switch::before{content: "";position: absolute; width: .16rem; height: .16rem;background:url(/Public/special/images/7zn/2/a_icon2.png) no-repeat; background-size: 100% 100%; left: -.05rem; top: .13rem; transform: rotate(45deg);}
.page2 .btn_switch::after{content: "";position: absolute; width: .16rem; height: .16rem;background:url(/Public/special/images/7zn/2/a_icon2.png) no-repeat; background-size: 100% 100%; right: -.05rem; top: .13rem; transform: rotate(45deg);}

.t_center{top: 50%;transform: translateY(-50%);}
.z-index{z-index: 3;}
.t0{top: 0;}
.flex1{flex: 1;}

/* tag: */
.page3{
  background: url(/Public/special/m/images/7zn/3/a_bg.jpg) no-repeat left top #22212f;
  background-size: 100% 16.25rem;
  color: #fff;
}
.page3 .title{
  width: 8.68rem;
  height: 1.42rem;
  background: url(/Public/special/m/images/7zn/3/a_title.png) no-repeat;
  background-size: 100%;
  left: 50%;
  margin-left: -3.6rem;
  top: 1.23rem;
}
.page3 .ctx{
  height: 10.5rem;
  top: 4rem;
}
.page3 .skill_box{ width:3.12rem; height:2.63rem;  background:url(/Public/special/images/7zn/3/a_frame1.png) no-repeat; background-size: 100%;}
.page3 .name{ width:.40rem; height:1.76rem;  background:url(/Public/special/images/7zn/3/a_frame2.png) no-repeat; background-size: 100%; top: 2.2rem; left: .8rem; font-size: .22rem; padding-top: .28rem; padding-left: .1rem;}
.page3 .detail1{ width:.40rem; top: 2.45rem; left: 1.75rem; font-size: .22rem; color: #c3fdff;}
.page3 .detail2{ width:.40rem; top: 2.55rem; left: 1.35rem; font-size: .22rem; color: #c3fdff;}


/* tag: */
.page4{
  
}
.page4 .title{
  width: 8.68rem;
  height: 1.42rem;
  background: url(/Public/special/m/images/7zn/4/a_title.png) no-repeat;
  background-size: 100%;
  left: 50%;
  margin-left: -3.6rem;
  top: 1.23rem;
}
.page4 .btn_switch {
  bottom: 1.18rem;
}
.page4 .btn_switch a{
  width: 1.45rem;
  height: .6rem;
  line-height: .6rem;
  background: url(/Public/special/m/images/7zn/4/a_frame3.png) no-repeat;
  background-size: 100%;
  font-size: .26rem; color: #fdedca;
}
.page4 .btn_switch a{
  margin: 0 .08rem;
}
.page4 .btn_switch a.active{
  background: url(/Public/special/m/images/7zn/4/a_frame3_on.png) no-repeat;
  background-size: 100%;
  color: #f67744;
}
.page4 .role_woman{
  bottom: .36rem;
  left: .38rem;
}
.page4 .role_man{
  right: 0;
  bottom: 2.18rem;
}
.page4 .zbox1{background: url(/Public/special/m/images/7zn/4/a_bg.jpg) no-repeat center bottom #22212f;background-size: 100% 16.25rem;}
.page4 .zbox1 .skill_box{width: 3.76rem; height: 3.76rem; left: 50%; margin-left: -1.88rem; bottom: 8.83rem; background: url(/Public/special/images/7zn/4/a_frame2.png) no-repeat; background-size: 100%; text-align: center;}
.page4 .zbox1 .skill_box a{width: .77rem; height: .77rem; line-height: .77rem; background: url(/Public/special/images/7zn/4/a_frame3.png) no-repeat; background-size: 100%; font-size: .18rem; color: #fff;}
.page4 .zbox1 .skill_box a.active{ background: url(/Public/special/images/7zn/4/a_frame3_on.png) no-repeat; background-size: 100%;  color: #5f8bdb;}
.page4 .zbox1 .skill_box a:nth-child(1){right: -.4rem; bottom: 1.4rem;}
.page4 .zbox1 .skill_box a:nth-child(2){right: .1rem; bottom: .35rem;}

.page4 .zbox1 .skill_box .option{display: none;}
.page4 .zbox1 .skill_box a:nth-child(1).active~.option1{display: block;}
.page4 .zbox1 .skill_box a:nth-child(2).active~.option2{display: block;}

.page4 .zbox2 .ws_skill_box .option{    width: 3.3rem;
  height: 3.3rem; display: none; overflow: hidden;
  border-radius: 50%;  }
.page4 .zbox2 .ws_skill_box a:nth-child(1).active~.option1{display: block;}
.page4 .zbox2 .ws_skill_box a:nth-child(2).active~.option2{display: block;}

.page4 .zbox4 .st_skill_box .option{    width: 3.3rem;
  height: 3.3rem; overflow: hidden;
  border-radius: 50%;  }
/* .page4 .zbox4 .st_skill_box a:nth-child(1).active~.option1{display: block;}
.page4 .zbox4 .st_skill_box a:nth-child(2).active~.option2{display: block;} */

.page4 .zbox2{display: none;background: url(/Public/special/m/images/7zn/4/a_bg2.jpg) no-repeat center bottom #22212f;background-size: 100% 16.25rem;}
.page4 .zbox2 .ws{bottom: 4.5rem;}
.page4 .zbox2 .tag{width: .49rem; height: 2.74rem; left: 1.15rem; bottom: 5.8rem; background: url(/Public/special/images/7zn/4/a_frame5.png) no-repeat; background-size: 100%; font-size: .24rem;  padding-top: .3rem;  padding-left: .15rem; box-sizing: border-box; color: #fff;}
.page4 .zbox2 .ws_skill_box{width: 3.82rem; height: 3.82rem; left: 50%; margin-left: -1.9rem; bottom: 8.6rem; background: url(/Public/special/m/images/7zn/4/a_frame2.png?v=2) no-repeat; background-size: 100%;}
.page4 .zbox2 .ws_skill_box a {width: .8rem; height: .8rem; background: url(/Public/special/images/7zn/4/a_frame6.png) no-repeat; background-size: 100%;}
.page4 .zbox2 .ws_skill_box a p{width: .6rem; height: .6rem; line-height: .6rem; border-radius: .6rem; background-color: #f0755a; font-size: .18rem; color: #fff; text-align: center;}
.page4 .zbox2 .ws_skill_box a.active p{ background-color: #fff;  color: #e76836;}
.page4 .zbox2 .ws_skill_box a:nth-child(1){right: -.28rem;  bottom: 1.36rem;}
.page4 .zbox2 .ws_skill_box a:nth-child(2){right: .2rem;  bottom: .3rem;}
.t_center{top: 50%; transform: translateY(-50%);}

.page4 .zbox3{display: none;background: url(/Public/special/m/images/7zn/4/a_bg3.jpg) no-repeat center bottom #22212f;background-size: 100% 16.25rem;}
.page4 .zbox3 .mpk{bottom: 6.5rem;}
.page4 .zbox3 .tag{width: .49rem; height: 2.74rem; left: 1.15rem; bottom: 7rem; background: url(/Public/special/images/7zn/4/a_frame5.png) no-repeat; background-size: 100%; font-size: .24rem;  padding-top: .14rem;  padding-left: .15rem; box-sizing: border-box; color: #fff;}

.page4 .zbox4{display: none;background: url(/Public/special/m/images/7zn/4/a_bg2.jpg) no-repeat center bottom #22212f;background-size: 100% 16.25rem;}
.page4 .zbox4 .st{bottom: 4rem;}
.page4 .zbox4 .tag{width: .49rem; height: 2.74rem; left: 1.15rem; bottom: 5.8rem; background: url(/Public/special/images/7zn/4/a_frame5.png) no-repeat; background-size: 100%; font-size: .24rem;  padding-top: .14rem;  padding-left: .15rem; box-sizing: border-box; color: #fff;}
.page4 .zbox4 .st_skill_box{width: 3.82rem; height: 3.82rem; left: 50%; margin-left: -1.9rem; bottom: 8.6rem; background: url(/Public/special/m/images/7zn/4/a_frame2.png?v=2) no-repeat; background-size: 100%;}
.page4 .zbox4 .st_skill_box a {width: .8rem; height: .8rem; background: url(/Public/special/images/7zn/4/a_frame6.png) no-repeat; background-size: 100%;}
.page4 .zbox4 .st_skill_box a p{width: .6rem; height: .6rem; line-height: .6rem; border-radius: .6rem; background-color: #f0755a; font-size: .18rem; color: #fff; text-align: center;}
.page4 .zbox4 .st_skill_box a.active p{ background-color: #fff;  color: #e76836;}
.page4 .zbox4 .st_skill_box a:nth-child(1){right: -.28rem;  bottom: 1.36rem;}
.page4 .zbox4 .st_skill_box a:nth-child(2){right: .2rem;  bottom: .3rem;}
.t_center{top: 50%; transform: translateY(-50%);}

@-webkit-keyframes downUpLoop {

  0% {
      -webkit-transform: translate(-50%,0);
  }
  50% {
      -webkit-transform: translate(-50%,-20px);
  }
  100% {
      -webkit-transform: translate(-50%,0);
  }
}

@keyframes downUpLoop {
  0% {
    transform: translate(-50%,0);
  }
  50% {
    transform: translate(-50%,-20px);
  }
  100% {
    transform: translate(-50%,0);
  }
}

/* tag: */
.page5{
  background: url(/Public/special/m/images/7zn/5/a_bg.jpg) no-repeat left top #22212f;
  background-size: 100% 16.25rem;
}
.page5 .title{
  width: 8.68rem;
  height: 1.42rem;
  background: url(/Public/special/m/images/7zn/5/a_title.png) no-repeat;
  background-size: 100%;
  left: 50%;
  margin-left: -3.6rem;
  top: 1.23rem;
}
.page5 .ctx{
  height: 10.5rem;
  top: 3.35rem;
}
.page5 .ctx .btn_group1{
  top: .2rem;
  left: .55rem;
}
.page5 .ctx .btn_group1 a{
  margin-right: .42rem;
}
.page5 .ctx .cj_box {width: 100%;height: 6.75rem; top: 3.33rem; background: url(/Public/special/m/images/7zn/5/a_frame1.png) no-repeat; background-size: 100%; text-align: center;font-size: .18rem; color: #fff;}
.page5 .ctx .cj_box ul{width: 5.02rem; height: 5.02rem; margin: .52rem 0 0 1.63rem;}
.page5 .ctx .cj_box li{width: 1.62rem; height: 1.62rem;background: url(/Public/special/images/7zn/5/a_frame2.png) no-repeat; background-size: 100%; }
.page5 .ctx .cj_box li.active{background: url(/Public/special/images/7zn/5/a_frame2_on.png) no-repeat; background-size: 100%; }
.page5 .ctx .cj_box li p{width: 1.62rem; height: .28rem; line-height: .28rem; top: 1.07rem; background: url(/Public/special/images/7zn/5/a_frame3.png) no-repeat; background-size: 100%; }
.page5 .ctx .cj_box .btn_cj{width: 1.54rem; height: 1.54rem;background: url(/Public/special/images/7zn/5/a_bg_cj.png) no-repeat; background-size: 100%; }
.page5 .ctx .cj_box .btn_cj:hover{background: url(/Public/special/images/7zn/5/a_bg_cj_on.png) no-repeat; background-size: 100%; }
.page5 .ctx .cj_box .btn_cj img{margin-top: .40rem; }
.page5 .ctx .cj_box .btn_cj p{margin-top: .15rem; color: #fff;}

.page5 .ctx .btn_group2{
  right: .21rem;
  top: 2.85rem;
}
.page5 .ctx .fx_box{
  top: 9.9rem;
  font-size: .22rem;
  color: #f5c280;
}

.l0{left: 0;}
.t0{top: 0;}
.r0{right:0;}
.b0{bottom:0;}
.lt0 {  left: 0;  top: 0;}
.rt0 { right: 0; top: 0;}
.lb0 {  left: 0;  bottom: 0;}
.rb0 {  right: 0;  bottom: 0;}


/* tag:弹窗: */
.pop_win{
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  z-index: 99;
}

.pop_win .pop_box.min{
  width: 7.49rem;
  height: 6.87rem;
  background: url(/Public/special/m/images/7zn/pop/bg_min.png) no-repeat;
  background-size: 100%;
  padding: .77rem 1.1rem 0;

}
.pop_win .pop_box.max{
  width: 7.49rem;
  height: 9.04rem;
  background: url(/Public/special/m/images/7zn/pop/bg_max.png) no-repeat;
  background-size: 100%;
  padding: .85rem .9rem 0 1.2rem;
}

.pop_win .pop_box p{
  line-height: .45rem;
}

#lb_win .pop_box{
  width: 6.91rem;
  height: 10.64rem;
  background: url(/Public/special/m/images/7zn/pop/bg.png) no-repeat;
  background-size: 100%;
  padding: .8rem .3rem 0 .3rem;
  color: #b5876c;
  text-align: center;
}
#lb_win .pop_box h2{
  color: #e97b50;
  width: 3.8rem;
  height: .65rem;
  background: url(/Public/special/m/images/7zn/pop/bg_title.png) no-repeat;
  background-size: 100%;
  text-align: center;
  margin-left: -.4rem;
  line-height: .3rem;
}
#lb_win .pop_box ul{flex-wrap: wrap; width: 6.2rem;}
#lb_win .pop_box ul li{ width:1.86rem; height:1.83rem;  background: url(/Public/special/images/7zn/a_frame1.png) no-repeat; background-size: 100%; margin: .28rem .21rem; }
#lb_win .pop_box ul li:nth-child(n+3){ margin: .28rem .02rem; }
#lb_win .pop_box ul li p{width: 100%; bottom: -.4rem; white-space: nowrap;}
#lb_win .pop_box #lb_code{width: 5.10rem; height: .76rem; line-height: .76rem; border-radius: .76rem; font-size: .46rem; margin-top: .70rem; margin-bottom: .15rem; background-color: #f2e9d3; border: .01rem solid #e6d6ab;}
#lb_win .pop_box #lb_code::after{ content: "礼包码"; position: absolute; left: -.22rem; top: -.07rem; width: .88rem; height: .32rem; line-height: .32rem; border-radius: .32rem .32rem 0 .32rem; font-size: .18rem; background-color: #f78955; color: #fff;}
#lb_win .pop_box .btn_copy{ width:3.54rem; height:.88rem;  background: url(/Public/special/images/7zn/a_btn_copy.png) no-repeat; background-size: 100%; margin-top: .6rem;}


#rule_pop .pop_box{
  width: 6.91rem;
  height: 10.64rem;
  background: url(/Public/special/m/images/7zn/pop/bg.png) no-repeat;
  background-size: 100%;
  padding: .8rem .3rem 0 .8rem;
  color: #a06345;
}
#rule_pop p span{color: #f6613f;display: contents;}

#rule_pop .pop_box h2{
  color: #e97b50;
  width: 3.8rem;
  height: .65rem;
  background: url(/Public/special/m/images/7zn/pop/bg_title.png) no-repeat;
  background-size: 100%;
  text-align: center;
  margin-left: -.4rem;
  line-height: .3rem;
}
#rule_pop .pop_box h3{
  color: #fff;
  height: .36rem;
  line-height: .36rem;
  border-radius: .36rem;
  background-color: #e97b50;
  width: fit-content;
  padding: 0 .2rem;
  font-size: .24rem;
  margin-top: .3rem;
}
#rule_pop .pop_box .text{
  height: 8.5rem;
  overflow: auto;
  padding-bottom: .5rem;
  padding-right:.3rem;
}

#rule_pop .pop_box .text img{ width:100%; margin:.15rem 0;}

#rule_pop .pop_box p{
  width: 100%;
}

#rule_pop .pop_arrow{
  width: 1.73rem;
  height: .88rem;
  top: 4.4rem;

}

#rule_pop .pop_left{
  background: url(/Public/special/m/images/7zn/pop/btn_left.png) no-repeat;
  background-size: 100%;
  left: 0;
}

#rule_pop .pop_right{
  background: url(/Public/special/m/images/7zn/pop/btn_right.png) no-repeat;
  background-size: 100%;
  right: 0;
}

.pop_exit{
  width: .64rem;
  height: .64rem;
  background: url(/Public/special/m/images/7zn/pop/x.png) no-repeat;
  background-size: 100%;
  top: -.8rem;
}

#invite_win .btn1{
  width: 3.49rem;
  height: .76rem;
  background: url(/Public/special/m/images/7zn/pop/btn1.png) no-repeat;
  background-size: 100%;
}
#invite_win .btn1.hover{
  width: 3.49rem;
  height: .76rem;
  background: url(/Public/special/m/images/7zn/pop/btn1_hover.png) no-repeat;
  background-size: 100%;
}

#invite_win .btn2{
  width: 3.49rem;
  height: .76rem;
  background: url(/Public/special/m/images/7zn/pop/btn2.png) no-repeat;
  background-size: 100%;
}
#invite_win .btn2.hover{
  width: 3.49rem;
  height: .76rem;
  background: url(/Public/special/m/images/7zn/pop/btn2_hover.png) no-repeat;
  background-size: 100%;
}

.pop_win .pop_box .btn3{
  width: 3.49rem;
  height: .76rem;
  background: url(/Public/special/m/images/7zn/pop/btn3.png) no-repeat;
  background-size: 100%;
  bottom: .65rem;
}

.pop_win .pop_box .btn3.hover{
  width: 3.49rem;
  height: .76rem;
  background: url(/Public/special/m/images/7zn/pop/btn3_hover.png) no-repeat;
  background-size: 100%;
}

.pop_win .pop_box input,.pop_win .pop_box textarea,.pop_win .pop_box select{
  width: 5.23rem;
  height: .83rem;
  border-radius: .83rem;
  margin-top: .23rem;
  padding: .17rem .3rem;
  color: #ffdeb4;
  font-size: .3rem;
  background-color: #ad441f;
  border: none;
}
.pop_win .pop_box textarea{
  border-radius: .43rem;
  height: 1.21rem;
}
.pop_win .pop_box input::placeholder,.pop_win .pop_box textarea::placeholder{
  font-size: .22rem;
  color: #e49154;
}

#bind_win h2{
  margin-top: -.3rem;
}

#bind_win input{
  margin-top: .2rem;
}

#bind_win input::placeholder{
  text-align: center;
  font-size: .3rem;
}

#bind_win .btn3{
  bottom: .5rem;
}
#bind_win span {width: 0; height: 0; border: .3rem solid transparent; border-top-color: #fac25b;right: .3rem;  top: .5rem; pointer-events: none;}

#replace_win a {color: #fff;}
#replace_win .btn_add {width: 1.93rem; height: .48rem; border-radius: .48rem; line-height: .46rem;text-align: center;border: 1px solid #e3725c;}
#replace_win .rid_list {height: 2.20rem;}
#replace_win .rid_list a{width: .92rem; height: .38rem; line-height: .36rem; border-radius: .38rem; border: 1px solid #e3725c; color: #505050; text-align: center;}
#replace_win .rid_list a::after{content: "切换"; }
#replace_win .rid_list a.active::after{content: "当前"; }
#replace_win .rid_list a.active{background-color: #e3725c; color: #fff;}

.bind_phone .btn3{
  bottom: .9rem;
}
.bind_phone input{
  margin-top: .34rem;
}
.bind_phone input::placeholder{
  font-size: .3rem;
}
.bind_phone .getCode{
  width: 1.72rem;
  height: .58rem;
  line-height: .58rem;
  border-radius: .58rem;
  background-color: #e8b63f;
  bottom: .125rem;
  right: .125rem;
}

#prize_win .pop_box{
  width: 5.37rem;
  height: 5.36rem;
}
#prize_win .pop_box .bg{
  background: url(/Public/special/m/images/7zn/pop/bg2.png) no-repeat;
  background-size: 100%;
  animation: z 3.5s linear infinite;
  -webkit-animation: z 3.5s linear infinite;  
}

#prize_win .pop_box .pop_exit{ 
  width: .43rem;
  height: .43rem;
  background: url(/Public/special/m/images/7zn/pop/x2.png) no-repeat;
  background-size: 100%;
  right: .6rem;
  top: .7rem;
}
 #prize_win .pop_box .text{
  width: 7rem;
  height: .61rem;
  line-height: .61rem;
  background: url(/Public/special/m/images/7zn/pop/bg3.png) no-repeat;
  background-size: 100%;
  bottom: 1.23rem;
}
 #prize_win .pop_box .text span:nth-child(1){
  width: .61rem;
  height: 1.34rem;
  background: url(/Public/special/m/images/7zn/pop/icon1.png) no-repeat;
  background-size: 100%;
  margin-right: .2rem;
  margin-bottom: -.25rem;
  
}

 #prize_win .pop_box .btn3{
  width: 3.49rem;
  height: .76rem;
  background: url(/Public/special/m/images/7zn/pop/btn3.png) no-repeat;
  background-size: 100%;
  bottom: -.17rem;
}

#prize_win .pop_box .b-popbut4{
  background: url(/Public/special/m/images/7zn/pop/btn4.png) no-repeat;
  background-size: 100%;
  bottom: -.17rem;
}

 #prize_win .pop_box .b-popbut4.hover{
  background: url(/Public/special/m/images/7zn/pop/btn4_hover.png) no-repeat;
  background-size: 100%;
}

#prize_win .pop_box img{
  position: absolute;
  height: 1.5rem;
  top: 1.9rem;
  left: 50%;
  transform: translateX(-50%);
}
#prize_list .title {
  border-bottom: .01rem solid #983614;
  padding-bottom: .2rem;
}
#prize_list .title span{
  flex: 1;
}
#prize_list ul {
  height: 6.2rem;
  overflow: auto;
}
#prize_list ul li {
  height: .7rem;
  border-bottom: .01rem solid #983614;
}
#prize_list ul li span{
  flex: 1;
  position: relative;
}
#prize_list ul li span.state0::after{
  content: "已领取";
}
#prize_list ul li span.state1::after{
  content: "收件信息";
  display: block;
  background-color: #f4b343;
  width: 1.43rem;
  height: .48rem;
  border-radius: .48rem;
  line-height: .48rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: #fff0de;
}
#prize_list ul li span.state2::after{
  content: "立即领取";
  display: block;
  background-color: #e49154;
  width: 1.43rem;
  height: .48rem;
  border-radius: .48rem;
  line-height: .48rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: #fff0de;
}

.an-scaleLoop{
  animation: scaleLoop 2s linear infinite;
  -webkit-animation: scaleLoop 2s linear infinite;  
}
@-webkit-keyframes scaleLoop {
  0% {
      -webkit-transform: scale(1);
  }
  50% {
      -webkit-transform: scale(1.2);
  }
  100% {
      -webkit-transform: scale(1);
  }
}
@keyframes scaleLoop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}


/* tag: */
@media only screen and (max-height: 800px), only screen and (max-device-height:800px) {
  .user_box{top: .2rem;}
  .page1 .title{
    top: .8rem;
  }
  .page2 .title{
    top: .8rem;
  }
  .page2 .zbox1{
    zoom: .85;
  }
  .page3 .ctx{
    top: 3.4rem;
  }
  .page4 .title{
    top: .8rem;
  }
  .page4 .zbox1 .skill_box{
    bottom: 7.5rem;
  }
  .page4 .zbox1{
    zoom: .95;
  }
  .page4 .zbox2{
    zoom: .95;
  }
  .page4 .zbox2 .ws_skill_box{
    bottom: 7.6rem; 
  }
  .page4 .zbox4{
    zoom: .95;
  }
  .page4 .zbox4 .st_skill_box{
    bottom: 7.6rem; 
  }
  .page5 .title{
    top: .8rem;
  }
  .page5 .ctx{
    top: 2.2rem;
    zoom: .95;
  }

}

.fz14{ font-size:.28rem;}
#popOtt{ z-index:9002; width:100%; height:100%; position:fixed; _position:absolute; left:0px; top:0px; display:none;}
#popOtt .pwin_bg{width: 100%;height: 100%; background: #000; }
#popOtt .pwin_bg img{ position:absolute; width:1rem; height:1.61rem; left:50%; margin-left:-.5rem; margin-top:1.11rem; -webkit-animation: bzCss 2.6s linear 0s infinite; animation: bzCss 2.6s linear 0s infinite;}
#popOtt .pwin_bg p{ text-align:center; padding-top:2.92rem; height:.32rem; overflow:hidden;color:#fff;}
#popOtt .pwin_bg span{ font-size:.32rem; line-height:.64rem; margin-top:-.16rem;}

.current.an-downUpCss,.current .an-downUpCss{
	opacity:1;
  animation: downUpCss 3s linear infinite;
  -webkit-animation: downUpCss 3s linear infinite;  
}