@charset "utf-8";

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
    margin: 0;
    padding: 0
}

* {
    outline: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-focus-ring-color: rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

body {
    padding: 0;
    margin: 0;
    background: #000;
    font: .16rem/1.8 "sans-serif";
}

html,
body,
fieldset,
img,
iframe,
abbr {
    border: 0
}

li {
    list-style: none
}

input,
button,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

textarea {
    overflow: auto;
    resize: none
}

h1,
h2,
h3,
h4,
h5,
h6,
em,
strong,
b {
    font-weight: 700
}

a {
    border: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    outline: none;
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    text-decoration: none
}

img {
    width: 100%;
    vertical-align: middle;
}

input,
select {
    outline: none;
}

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand {
    display: none;
}

textarea {
    overflow: auto;
    resize: none;
}

/* 去除input输入框自动填充后的背景色 */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px rgb(255,255,255,.9) inset !important;
}


.hide {
    display: none
}

.fl {
    float: left
}

.fr {
    float: right
}

.show {
    display: block
}

.text-center {
    text-align: center;
}

img[src=""],
img:not([src]) {
    opacity: 0;
}

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

    100% {
        -webkit-transform: scale(1, .3);
        transform: scale(1, .3)
    }
}

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

    100% {
        -webkit-transform: scale(1, .3);
        transform: scale(1, .3)
    }
}

@keyframes tinyScale {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.01, 1.01, 1.01);
        transform: scale3d(1.01, 1.01, 1.01);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@-webkit-keyframes bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0.0)
    }

    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes bouncedelay {

    0%,
    80%,
    100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }

    40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

@keyframes rotate {
    100% {
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate-reserve {
    100% {
        -o-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@keyframes bubble {
    0% {
        -o-transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -o-transform: translateY(-24px);
        -webkit-transform: translateY(-24px);
        -moz-transform: translateY(-24px);
        -ms-transform: translateY(-24px);
        transform: translateY(-24px);
    }

    100% {
        -o-transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 20deg);
        transform: rotate3d(0, 0, 1, 20deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -20deg);
        transform: rotate3d(0, 0, 1, -20deg);
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -15deg);
        transform: rotate3d(0, 0, 1, -15deg);
    }

    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

html,
body,
.container {
    position: relative;
    width: 100%;
    /* background: url("../image/bg.jpg") no-repeat; */
    /* background-size: 100%; */
    height: 100%;
    /* min-width: 1000px; */
    overflow-x: hidden;
}

.fullpage {
    width: 100%;
    height: 100%;
}





.footer {
    height: 1.1rem;
    background-color: #000;
}

.wrap {
    width: 100%;
    /* background: url('../images/bg.jpg') no-repeat; */
    /* background-size: 100%; */
    position: relative;
}

.page1 {
    height: 10.8rem;
    margin: 0 auto;
    /* min-width: 1200px; */
    overflow: hidden;
    position: relative;
    /* background: url(../image/bg_1.png) no-repeat center; */
}

.pager2 {
    /* height: 1000px; */
    height: 10.8rem;
    /* margin: 1rem auto; */
    /* min-width: 1200px; */
    overflow: hidden;
    position: relative;
    /* background: url(../images/bg_2.jpg) no-repeat center; */
}




.poker-hide {
    opacity: 0;
}

.poker-block {
    display: block;
}

/* 兔兔翻卡 */


.poker-swiper {
    width: 10.5rem;
    height: 5.6rem;
    padding-top: 2rem;
    top: -2rem;
    left: -0.52rem;
}


/* .poker-swiper .swiper-slide-next{
    transform: translate3d(-20px, -20px, -70px) rotateX(-26deg) rotateY(-18deg) !important;
}
.poker-swiper .swiper-slide-prev{
    transform: translate3d(-50px, -10px, -150px) rotateX(-10deg) rotateY(35deg) !important;
} */

/* .intro-info::after {
    content: '';
    position: absolute;
    width: 1.36rem;
    height: 1.6rem;
    background: url("../images/intro-decoration.png") no-repeat;
    background-size: 100%;
    top: 0;
    right: 0.4rem;
    z-index: 1;
} */
.page3 .intro-swiper {
    width: 9.34rem;
    height: 4.84rem;
}

.page3 .intro-swiper .swiper-slide {
    display: block !important;
}

.page3 .intro-swiper .swiper-slide .intro-pic {
    position: absolute;
    width: 9.18rem;
    height: 4.84rem;
}

.page3 .intro-swiper .swiper-slide .intro-pic {
    display: none;
}

.page3 .intro-swiper .swiper-slide-active .intro-pic {
    display: block;
}

.page3 .intro-swiper .swiper-slide-next .intro-pic {
    display: block;
    left: 0.8rem;
    opacity: 0.3;
}

.page3 .intro-swiper .swiper-slide-prev .intro-pic {
    display: block;
    left: 0.2rem;
    opacity: 0.3;
}

/* .intro-swiper .swiper-slide .intro-pic .swiper-lazy img{
    width: 8.20rem;
    height: 5.03rem;
} */
.page3 .intro-swiper .swiper-slide.swiper-slide-active .intro-pic {
    -webkit-animation: fadeIn .15s .15s;
    -o-animation: fadeIn .15s .152s;
    animation: fadeIn .1s .1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.page3 .intro-swiper .swiper-slide.swiper-slide-active .intro-pic::after {
    content: '';
    position: absolute;
    /* background: url("../images/slide-active-bg.png") no-repeat; */
    /* background-size: 100%; */
    width: 9.34rem;
    height: 5.33rem;
    left: 0.1rem;
    top: 0.05rem;
}

.page3 .intro-swiper .swiper-slide.swiper-slide-active .intro-intro {
    -webkit-animation: fadeIn .4s .4s;
    -o-animation: fadeIn .4s .4s;
    animation: fadeIn .4s .4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}


.page3 .intro-swiper-pagination {
    position: absolute;
    top: 5.4rem;
    left: 8.29rem;
}

.page3 .intro-swiper-pagination .swiper-pagination-bullet {
    width: .11rem;
    height: .11rem;
    border-radius: 0;
    opacity: 1;
    background: url("../images/intro-s-1.png") no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(2) {
    left: .4rem;
}

.intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(3) {
    left: .8rem;
}

.intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(4) {
    left: 1.2rem;
}

.nav-boli1 {
    width: 2.68rem;
    height: 1.95rem;
}

.nav-boli2 {
    width: 2.68rem;
    height: 1.54rem;
}

.nav-boli3 {
    width: 2.68rem;
    height: 1.95rem;
}

.nav-boli4 {
    width: 2.68rem;
    height: 1.95rem;
}

.gp1-img {
    width: 2.68rem;
    height: 1.95rem;
}

.pager4-numList {
    width: 11.30rem;
    height: 2.80rem;
}


.numList-gp {
    width: 7.06rem;
    height: 2.10rem;
}

/* 兔兔翻卡弹窗 */
.draw-frame {
    background: url(../image/draw-frame.png) no-repeat;
    background-size: 100%;
    width: 7.62rem;
    height: 5.77rem;

}

.frame-flex {
    display: flex;
    justify-content: space-evenly;
    position: relative;
    top: 4.3rem;
}

.draw-img {
    width: 3.1rem;
    height: 3.19rem;
    background: url(../image/draw-img.png) no-repeat;
    background-size: 100%;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    top: 1rem;
}

.draw-btn {
    width: 1.8rem;
    height: 0.86rem;
    background: url('../image/draw-btn.png') no-repeat;
    background-size: 100%;
    cursor: pointer;
}

.draw-clone {
    width: 1.8rem;
    height: 0.86rem;
    background: url('../image/draw-clone.png') no-repeat;
    background-size: 100%;
    cursor: pointer;
}

.result-frame {
    /* background: url(../img/result-frame.png) no-repeat; */
    background-size: 100%;
    width: 8.62rem;
    height: 5.77rem;
}

.result-frame .frame-gif,
.rabbit-frame .frame-gif {
    width: 2.1rem;
    height: 2.4rem;
    background: url('../image/poker-pop-gif.png') no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 1.8rem;

}

.result-btn {
    width: 2.4rem;
    height: 0.86rem;
    background: url(../image/result-btn.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    top: 4.8rem;
}

.rabbit-frame {
    /* background: url(../img/rabbit-frame.png) no-repeat; */
    background-size: 100%;
    width: 8.62rem;
    height: 5.77rem;
}

.rabbit-btn {
    width: 2.45rem;
    height: 0.86rem;
    background: url(../image/rabbit-btn.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    top: 4.8rem;
}





.pager-order-left {
    width: 100%;
    height: 100%;
    padding-top: 0.75rem;
    box-sizing: border-box;
}

.pager-order-left .login-bto {
    width: 2.4rem;
    height: .6rem;
    position: absolute;
    right: 3.3rem;
    bottom: 0.38rem;
    background: url('../image/btn-login-bto.png') no-repeat;
    background-size: 100%;
    cursor: pointer;
}

.pager3 {
    height: 10.8rem;
    margin: 0 auto;
    /* min-width: 1200px; */
    overflow: hidden;
    position: relative;
    /* background: url(../images/bg_3.jpg) no-repeat center; */
}

.pager4 {
    padding-top: .6rem;
    margin: 0 auto;
    height: 10.8rem;
    /* min-width: 1200px; */
    overflow: hidden;
    position: relative;
    /* background: url(../images/bg_4.jpg) no-repeat center; */
}

.page4 .page4-gif li {
    position: absolute;
}

.page4 .page4-gif li:first-child {
    position: absolute;
}

.page4 .page4-gif li:last-child {
    position: absolute;
}

/* .page4 .pager4-numContent {
    width: 7.78rem;
    height: .26rem;
    position: relative;
    margin: 0.65rem auto 0;
    background: url(../image/bg-num-notreach.png) no-repeat;
    background-size: 100%;
} */

.page4 .numList-bg li:first-child {
    width: .57rem;
    height: .30rem;
    position: absolute;
    background: url(../image/reach-active1.png) no-repeat;
    background-size: 100%;
    top: -0.03rem;
    opacity: .5;
}

.page4 .numList-bg li:nth-child(1) {
    width: .57rem;
    height: .30rem;
    position: absolute;
    background: url(../image/reach-active1.png) no-repeat;
    background-size: 100%;
    top: -0.03rem;
    opacity: .5;
}

.page4 .numList-bg li:nth-child(2) {
    width: .57rem;
    height: .30rem;
    position: absolute;
    background: url(../image/reach-active2.png) no-repeat;
    background-size: 100%;
    top: -0.03rem;
    opacity: .5;
}

.page4 .numList-bg li:nth-child(3) {
    width: .57rem;
    height: .30rem;
    position: absolute;
    background: url(../image/reach-active3.png) no-repeat;
    background-size: 100%;
    top: -0.04rem;
    opacity: .5;
}

.page4 .numList-bg li:nth-child(4) {
    width: .72rem;
    height: .30rem;
    position: absolute;
    background: url(../image/reach-active4.png) no-repeat;
    background-size: 100%;
    top: -0.05rem;
    opacity: .5;
}

.page4 .numList-bg li:nth-child(5) {
    width: .71rem;
    height: .30rem;
    position: absolute;
    background: url(../image/reach-active5.png) no-repeat;
    background-size: 100%;
    top: -0.04rem;
    opacity: .5;
}

.page4 .numList-bg li:first-child {
    left: 0.7rem;
}

.page4 .numList-bg li:nth-child(2) {
    left: 3rem;
}

.page4 .numList-bg li:nth-child(3) {
    left: 5.38rem;
}

.page4 .numList-bg li:nth-child(4) {
    left: 7.57rem;
}

.page4 .numList-bg li:nth-child(5) {
    left: 9.88rem;
}

.page4 .numList-bg li.numContent-active {
    opacity: 1;
}


.moving img {
    left: 270px;
    opacity: 1;
    transition: all 1000ms ease 300ms;
    /* 动画关键，延迟300ms执行，在1s内完成 */
}

/* 类moving下的p样式 */
.moving p {
    right: 270px;
    opacity: 1;
    transition: all 1000ms ease 300ms;
}


.gp-title {
    position: absolute;
    bottom: 3.6rem;
}


/* 人数达成板块 */
.pager5 {
    height: 10.4rem;
    margin: 0 auto;
    /* min-width: 1200px; */
    overflow: hidden;
    position: relative;
    /* background: url(../images/bg_5.jpg) no-repeat center; */
}

.pager5 .pager5-title {
    width: 2.93rem;
    height: .63rem;
    margin: 0 auto;
}

/*  */
.pager6 {
    height: 9rem !important;
    margin: 0.2rem auto 0;
    /* min-width: 1200px; */
    overflow: hidden;
    position: relative;
    /* background: url(../images/bg_6.jpg) no-repeat center; */
}

.pager6 .pager6-title {
    margin: 0 auto;
    width: 9.61rem;
    height: .91rem;
}

/* .pager6 .pager6-title img{
    display: block;
    width: 1.057rem;
    height: .68rem;
} */
.pager6 .pager6-menu-list {
    margin-bottom: .4rem;
    width: 100%;
    height: .52rem;
    display: flex;
    justify-content: center;
}

.pager6 .pager6-menu-list li {
    cursor: pointer;

}

.pager6 .pager6-menu-list li:first-child {
    width: 1.33rem;
    height: .36rem;
    margin-right: 1.9rem;
    background: url(../image/menu-pager6-1.png) no-repeat;
    background-size: 100%;
}

.pager6 .pager6-menu-list li:last-child {
    width: 2.14rem;
    height: .37rem;
    background: url(../image/menu-pager6-2.png) no-repeat;
    background-size: 100%;
}

.pager6 .pager6-menu-list .pager6-menu-list-active:first-child {
    margin-top: -0.1rem;
    width: 1.48rem;
    height: .51rem;
    background: url(../image/menu-pager6-active-1.png) no-repeat;
    background-size: 100%;
}

.pager6 .pager6-menu-list .pager6-menu-list-active:last-child {
    margin-top: -0.1rem;
    width: 2.3rem;
    height: .52rem;
    background: url(../image/menu-pager6-active-2.png) no-repeat;
    background-size: 100%;
}

.pager7 {
    height: 12rem;
    margin: 0 auto;
    /* min-width: 1200px; */
    overflow: hidden;
    position: relative;
    /* background: url(../images/bg_7.jpg) no-repeat center; */
}

.swiper-container {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.page1-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80px;
    font-weight: bold;
    color: #000;
    background-size: cover;
}

.pager7-slider {
    display: flex;
    justify-content: center;
    align-items: end;
    font-size: 80px;
    font-weight: bold;
    color: #000;
    background-size: cover;
}

.pager7-title {
    position: absolute;
    top: 0rem;

}

.footer {
    height: 1.1rem;
    background-color: #000;
}

/* 顶部图标列表 */
.top-list {
    position: absolute;
    top: 0rem;
    left: 0rem;
    display: flex;
    align-items: center;
    z-index: 10;
    width: 19.2rem;
    height: .72rem;
    /* background-color: rgba(0, 0, 0, 0.9); */
    background: url(../image/section1/top-list-bg.png) no-repeat;
    background-size: 100%;
}

.top-list li {
    /* margin-right: .28rem; */
    top: 0.25rem;
}

.top-list li:last-child {
    margin-right: 0;
}

.top-list li.top-lounge {
    position: absolute;
    right: 1.86rem;
    width: 0.39rem;
    height: 0.32rem;
    background: url(../image/section1/top-Lounge.png) no-repeat;
    background-size: 100%;
}

.top-list li.top-youtube {
    position: absolute;
    right: 1.28rem;
    width: 0.35rem;
    height: 0.29rem;
    background: url(../image/section1/top-YouTube.png) no-repeat;
    background-size: 100%;
}

.top-list li.top-discord {
    position: absolute;
    right: 2.05rem;
    width: .52rem;
    height: .52rem;
    background: url(../image/section1/top-Discord.png) no-repeat;
    background-size: 100%;
}

.top-list li.top-tiktok {
    position: absolute;
    right: 4rem;
    top: 0.23rem;
    width: .52rem;
    height: .52rem;
    background: url(../image/section1/top-tiktok.png) no-repeat;
    background-size: 100%;
}

.top-list li.top-music {
    position: absolute;
    right: 0.8rem;
    top: 0.25rem;
    width: .27rem;
    height: .3rem;
    background: url(../image/section1/nomusic.png) no-repeat;
    background-size: 100%;
}

.top-list li.top-music.active {
    background: url(../image/section1/music.png) no-repeat;
    background-size: 100%;
    animation: continuous-rotate 4s linear infinite;
}

@keyframes continuous-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.shade.video_mask {
  z-index: 101;
}

.top-list li.top-home {
    position: absolute;
    right: 0.15rem;
    top: 0.25rem;
    width: .54rem;
    height: .3rem;
    color: transparent;
    background: url(../image/section1/top-home.png) no-repeat;
    background-size: 100%;
}
.head-icon{
    width: 1.59rem;
    height: 0.59rem;
    background: url(../image/section1/head-icon.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 0.4rem;
    top: 0.1rem;
}
.top-list li a {
    display: block;
    width: 100%;
    height: 100%;
}
.hasChild.isActive ul {
    visibility: visible;
    -webkit-animation: subMenuAni.2s cubic-bezier(.65,0,.25,1) Alternate both;
    animation: subMenuAni .2s cubic-bezier(.65,0,.25,1) Alternate both;
}

.hasChild.nav-3 ul{
    width: 3.76rem;
    height: 0.92rem;
    background: url(../image/section1/menu-ul.png) no-repeat;
    background-size: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: #000;
    left: -0.74rem;
    top: 0.42rem;
    opacity: 0;

}
.hasChild.isActive ul div.circle::after{
    content: '';
    width: 1.25rem;
    height: 0.53rem;
    background: url('../image/section1/circle.png') no-repeat;
    background-size: 100%;
    position: absolute;
    left: -0.13rem;
    top: -0.15rem;

}
.hasChild.isActive ul div:nth-child(3).circle::after{
    content: '';
    width: 1.25rem;
    height: 0.53rem;
    background: url('../image/section1/circle.png') no-repeat;
    background-size: 100%;
    position: absolute;
    left: -0.18rem;
    top: -0.15rem;

}
.hasChild.nav-3 ul div a{
    text-decoration: none;
    color: #000;
}
.hasChild.nav-3 ul div{
    font-size: 18px;
    font-weight: bold;
    position: relative;
    top: 0.1rem;
}
.nav-one{
    width: 1.03rem;
    height: 0.25rem;
    background: url(../image/section1/nav-one.png) no-repeat;
    background-size: 100%;
    display: inline-block;

}
.nav-two{
    display: inline-block;
    width: 1.03rem;
    height: 0.26rem;
    background: url(../image/section1/nav-two.png) no-repeat;
    background-size: 100%;

}
.nav-three{
    display: inline-block;
    width: 0.86rem;
    height: 0.25rem;
    background: url(../image/section1/nav-three.png) no-repeat;
    background-size: 100%;

}
.circle .nav-one{
    width: 1.03rem;
    height: 0.25rem;
    background: url(../image/section1/nav-one-active.png) no-repeat;
    background-size: 100%;
    display: inline-block;

}
.circle .nav-two{
    display: inline-block;
    width: 1.03rem;
    height: 0.26rem;
    background: url(../image/section1/nav-two-active.png) no-repeat;
    background-size: 100%;

}
.circle .nav-three{
    display: inline-block;
    width: 0.86rem;
    height: 0.25rem;
    background: url(../image/section1/nav-three-active.png) no-repeat;
    background-size: 100%;

}
@keyframes subMenuAni {
    90% {
        -webkit-transform: scale(1.1);
        transform:  scale(1.1);
    }
    100% {
        opacity: 1;
        -webkit-transform:  scale(1);
        transform:  scale(1);
    }
}


/* 二级页面背景 */
.role-page-bg {
    background-image: url(../images/role-page-bg.jpg);
}



.topic {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
}

.topic .main-logo {
    background: url(../image/logo.png) no-repeat;
    background-size: 100%;
    position: absolute;
    width: 2.25rem;
    height: 1.31rem;
    left: 0.2rem;
}

.topic .slogan {
    width: 7.56rem;
    position: absolute;
    top: 3.1rem;
    left: 9.1rem;
}

.topic .btn-order {
    width: 5.5rem;
    height: 1.5rem;
    position: absolute;
    top: 8rem;
    left: 6.77rem;
    z-index: 1;
}


.topic .order-count {
    width: 8.95rem;
    height: 1.76rem;
    position: absolute;
    top: 8.9rem;
    left: 5.2rem;
    /* background: url("../images/order-slogan.png") no-repeat; */
    background-size: 100%;
}

.topic .order-count .count span {
    width: 2.46rem;
    height: .6rem;
    text-align: center;
    position: absolute;
    top: 0.6rem;
    left: 2.14rem;
    line-height: .6rem;
    font-size: 0.7rem;
    -webkit-text-size-adjust: none;
    font-weight: 700;
    color: #c63e2e;
    letter-spacing: .02rem;
    /*background: linear-gradient(to bottom, #8439ff 0%, #fffeff 49%, #9d88fe 50%, #6d26e5 100%);*/
    /*-webkit-background-clip: text;*/
    /*-webkit-text-fill-color: transparent;*/
}

.topic .topic-ball {
    width: 1.83rem;
    height: 1.54rem;
    /* background: url("../images/topic-ball.png") no-repeat; */
    background-size: 100%;
    position: absolute;
    top: 3.6rem;
    left: 7.8rem;
    -webkit-animation: ball 3s ease-in-out infinite;
    animation: ball 3s ease-in-out infinite;
    z-index: 1;
    transform-style: preserve-3d;

}

.topic .topic-ball::before {
    content: '';
    width: 2.71rem;
    height: 2.72rem;
    /* background: url("../images/topic-ball-light.png") no-repeat; */
    background-size: 100%;
    position: absolute;
    top: -0.6rem;
    left: -0.6rem;
    transform: translateZ(-1px);
    z-index: -1;
    -webkit-animation: ball-light 3s ease-in-out infinite;
    animation: ball-light 3s ease-in-out infinite;
}

@keyframes ball {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(0.18rem);
        transform: translateY(0.18rem);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes ball-light {
    0% {
        width: 2.71rem;
        height: 2.72rem;
    }

    50% {
        width: 3.20rem;
        height: 3.21rem;
    }

    100% {
        width: 2.71rem;
        height: 2.72rem;
    }
}

/*标题*/
.title {
    /* width: auto; */
    text-align: center;

}

.pager2 .title>img {

    width: 8.38rem;
    height: 1.71rem;

}

.pager-top-title {
    /* position: absolute;
    left: 50%;
    transform: translate(-50%, -50%); */
    display: flex;
    justify-content: center;
    /* margin-top: 2.5rem; */
    /* top: 2.5rem; */
}

.pager3 .title img {
    position: absolute;
    width: 5.78rem;
    height: 1.71rem;
    left: 6.34rem;
    top: 0.6rem;
}

.pager-title-click {
    margin-left: 0.5rem;
    cursor: pointer;
}

.pager-Jackpot {
    position: absolute;
    width: 12rem;
    /* margin: 0rem auto; */
    /* top: 50%; */
    left: 50%;
    transform: translate(-50%, -50%);
    top: 4rem;

    /* top: 5.2rem;
    left: 50%;
    transform: translate(-50%,-50%); */
}

.pager-Jackpot>.pop-pool-heros>.pager-jack-img {
    transition: transform 0.5s;
}

.pager-jack-img.active,
.pager-jack-img:hover {
    animation: slowpulse 4s infinite;
    transform: translate(0, -0.2rem);

    /* box-shadow: 0px 0px 60px #fff61b ; */
    filter: drop-shadow(0 15px 20px hsl(64, 100%, 50%))
        /* position: absolute;
    width: 100%;

    height: 100%;
    animation: myfirst 3s infinite;
    box-shadow: 0px 0px 60px #fff61b;
    margin: 0px;
    content: '';
    z-index: -1;
    transition: 3s linear;  */
        /* transform: translate(0,-0.1rem);
    content: "";
     width: 100%;
    height: 100%;
    border-radius: 8px;
    background-image: linear-gradient( var(--rotate) , #5ddcff, #3c67e3 43%, #4e00c2);
    position: absolute;
    z-index: -1;
    top: -1%;
    left: -2%;
    animation: spin 2.5s linear infinite; */
}

/* @keyframes slowpulse {
    0%{
    filter: drop-shadow(0 0 5px hsl(0, 0%, 100%)) drop-shadow(0 0 10px hsl(0, 0%, 100%));
    }
    25%{
        filter: drop-shadow(0 0 5px hsl(0, 0%, 100%)) drop-shadow(0 0 10px hsl(0, 0%, 100%));
    }
    50%{
        filter: drop-shadow(0 0 5px hsl(0, 0%, 100%)) drop-shadow(0 0 10px hsl(0, 0%, 100%));
    }
    75%{
        filter: drop-shadow(0 0 5px hsl(0, 0%, 100%)) drop-shadow(0 0 10px hsl(0, 0%, 100%));
    }
    100%{
        filter: drop-shadow(0 5px 5px hsl(0, 0%, 100%)) drop-shadow(0 5px 10px hsl(0, 0%, 100%));
    }
} */
@keyframes myfirst {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.8);
    }
}

.pager-Jackpot>ul>li {
    cursor: pointer;
    position: absolute;

}

/* .pager-Jackpot>ul>li:first-child{

    position: absolute;
    left: 5rem;
    top: 1rem;
} */
/* .pager-Jackpot>ul>li:nth-child(1){
    position: absolute;
    left: 5rem;
    top: -0.5rem;
    width: 2.98rem;
    height: 0.72rem;
} */
.pager-Jackpot>ul>li:nth-child(2)>img {
    width: 2.02rem;
    height: 2.54rem;

}

.pager-Jackpot>ul>li:nth-child(2) {
    position: absolute;
    left: 0.2rem;
    top: 3.2rem;

}

/* .pager-Jackpot>ul>li>img:nth-child(2){
    position: absolute;
    left: 7.5rem;
    top: 2.2rem;
    width: 1.96rem;
    height: 2.53rem;
} */
.pager-Jackpot>ul>li:nth-child(3)>img {
    width: 2.49rem;
    height: 3.60rem;

    /* left: 8.5rem;
    top: 5rem; */
}

.pager-Jackpot>ul>li:nth-child(3) {
    position: absolute;
    left: 2.3rem;
    top: 1.5rem;
}

.pager-Jackpot>ul>li:nth-child(4)>img {
    width: 2.41rem;
    height: 3.36rem;

    /* left: 8.5rem;
    top: 5rem; */
}

.pager-Jackpot>ul>li:nth-child(4) {
    position: absolute;
    top: -0.3rem;
    left: 5.1rem;
}

.pager-Jackpot>ul>li:nth-child(5)>img {
    width: 2.44rem;
    height: 3.73rem;


    /* left: 8.5rem;
    top: 5rem; */
}

.pager-Jackpot>ul>li:nth-child(5) {
    position: absolute;
    top: 0.7rem;
    left: 7.9rem;

    /* left: 8.5rem;
    top: 5rem; */
}

.pager-Jackpot>ul>li:nth-child(6)>img {
    width: 1.89rem;
    height: 2.64rem;

    /* left: 8.5rem;
    top: 5rem; */
}

.pager-Jackpot>ul>li:nth-child(6) {
    position: absolute;
    top: 2.9rem;
    left: 10.5rem;
    /* left: 8.5rem;+
    top: 5rem; */
}

.pager-Jackpot-btn {
    position: absolute;
    /* bottom: 0rem; */
    top: 12rem;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

/* .pager-Jackpot>ul>li>img:nth-child(1){
    width: 2.98rem;
    height: 0.72rem;
} */
/* .pager-Jackpot>ul>li>img:nth-child(2){
    width: 2.49rem;
    height: 3.73rem;
} */
/* .pager-Jackpot>ul>li>img:nth-child(3){
    width: 2.44rem;
    height: 3.43rem;
} */
/* .pager-Jackpot>ul>li>img:nth-child(4){
    width: 2.41rem;
    height: 3.36rem;
} */
/* .pager-Jackpot>ul>li>img:nth-child(5){
    width: 1.88rem;
    height: 2.54rem;
} */
/* 人数达成板块 */
.pager5>.title {
    margin-top: 0.5rem;
}

.pager5>.count>#reachedNum {
    color: #fff;
    font-size: 0.6rem;
    position: relative;

    text-align: center;
}

.pager5>.count {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -0.2rem;
    left: 0;
    right: 0;
}

.pager5>.count>div {
    background: url('../image/reachedNum-text.png') no-repeat;
    width: 4.86rem;
    height: 1.71rem;
    background-size: 100%;
}

.reached-number {
    width: 11.5rem;
    height: 4.4rem;

    position: absolute;
    top: 3rem;
    margin: 0 auto;
    right: 0rem;
    left: 0;
}

.reached-number>ul {
    display: flex;

}

.reached-number>ul>.page5-reward-one {
    background: url('../image/number-two.png') no-repeat;
    width: 2.17rem;
    height: 4.28rem;
    background-size: 100%;
}

.reached-number>ul>.page5-reward-two {
    background: url('../image/number-two.png') no-repeat;
    width: 2.17rem;
    height: 4.28rem;
    background-size: 100%;
}

.reached-number>ul>.page5-reward-three {
    background: url('../image/number-two.png') no-repeat;
    width: 2.17rem;
    height: 4.28rem;
    background-size: 100%;
}

.reached-number>ul>.page5-reward-four {
    background: url('../image/number-two.png') no-repeat;
    width: 2.17rem;
    height: 4.28rem;
    background-size: 100%;
}

.reached-number>ul>.page5-reward-five {
    background: url('../image/number-two.png') no-repeat;
    width: 2.17rem;
    height: 4.28rem;
    background-size: 100%;
}


.pager4 .title>img {
    position: absolute;
    width: 4.11rem;
    height: 1.56rem;
    left: 0rem;
    right: 0rem;
    margin: 0 auto;
    /* top: 0.95rem; */
}

.pager4 .pager4-title {
    margin: 0 auto;
    width: 10.58rem;
    height: 1.03rem;
    line-height: 1.03rem;
    background: url(../image/page4-header-bg.png) no-repeat;
    background-size: 100%;
    padding-left: 5.25rem;
    box-sizing: border-box;
}

.pager4 .pager4-title span {
    display: block;
    width: 3.7rem;
    text-align: center;
    font-size: .64rem;
    background: linear-gradient(to bottom, #fff 0%, #6c748d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pager5 .title>img {
    position: absolute;
    width: 9.36rem;
    height: 1.56rem;
    left: 0rem;
    top: 0rem;
    right: 0rem;
    margin: 0 auto;
    z-index: 1;
}

.pager6 .title img {
    position: absolute;
    width: 7.13rem;
    height: 1.48rem;
    left: 6.05rem;
    top: 1.4rem;
    z-index: 1;
}

.pager7 .title img {
    position: absolute;
    width: 6.76rem;
    height: 1.71rem;
    /* left: 8.2rem; */
    top: 0rem;
    z-index: 101;
    margin: 0 auto;
    right: 0rem;
    left: 0rem;
}

/*事前登录*/
.order {
    overflow: hidden;
    font-size: 0;
    /* width: 12rem; */
    margin: 0 auto;
    height: 100%;
    margin-top: -1rem;
}

.order .title {
    height: .94rem;
    text-align: center;
}

.order .order-figure {
    background: url(../images/sun.png) no-repeat;
    background-size: 100%;
    width: 13.04rem;
    height: 11.55rem;
    position: absolute;
}

.order .order-sign {
    background: url(../images/order-sign.png) no-repeat;
    background-size: 100%;
    width: 1.08rem;
    height: 3.18rem;
    position: absolute;
    margin-top: 3.5rem;
    margin-left: 4.2rem;
}

.order-info {
    width: 9.99rem;
    height: 6.79rem;
    background: url(../images/order-bg.png) no-repeat;
    background-size: 100%;
    margin: 0 auto;
    position: absolute;
    top: 6rem;
    /* margin-left: -.33rem; */
    left: 50%;
    transform: translate(-50%, -50%);
}

.order-info .order-count {
    /* width: 5.69rem; */
    /* height: .33rem; */
    position: absolute;
    top: 0.31rem;
    left: 2.2rem;
    /* background: url(../images/order-slogan.png) no-repeat; */
    /* background-size: 100%; */
}

.order-info .count span {
    width: 2.46rem;
    height: .6rem;
    text-align: center;
    position: absolute;
    /* top: -0.14rem; */
    /* left: .9rem; */
    line-height: .6rem;
    font-size: 0.58rem;
    -webkit-text-size-adjust: none;
    font-weight: 700;
    color: #d0254c;
    letter-spacing: .02rem;
    /*background: linear-gradient(to bottom, #8439ff 0%, #fffeff 49%, #9d88fe 50%, #6d26e5 100%);*/
    /*-webkit-background-clip: text;*/
    /*-webkit-text-fill-color: transparent;*/
}

.pager-content {
    /* overflow: hidden; */
    position: relative;
    /* top: .8rem;
    left: 5.3rem;
    width: 8.6rem;
    height: 3.3rem; */
    /* background: url("../images/order-content-bg.png") no-repeat; */
    /* background-size: 100%; */
    /* padding-top: 0.6rem;
    padding-left: .35rem; */
}

.pager2-order-select {
    position: absolute;
    color: #9F9F9F;
    font-weight: lighter;
    top: 5.8rem;
    width: 100%;
}

#step-type-protocol,
#step-type-protocol1 {
    cursor: pointer;
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.step-type-protocol1 {
    /* position: absolute; */
    left: 1.4rem;
    cursor: pointer;
    left: 1.3rem;
    margin-left: 0.04rem;
    /* width: 1.2rem; */
}

.step-type-protocol {
    cursor: pointer;
    /* width: 1.5rem; */
}

#step-type-protocol1[type='radio']+label::before,
#step-type-protocol[type='radio']+label::before {
    content: '';
    width: .18rem;
    height: .18rem;
    background: url(../image/step-type-checkbox.png) no-repeat;
    background-size: 100%;
    float: left;
    margin-top: 0.06rem;
    margin-right: 0.08rem;
}

#step-type-protocol1[type='radio']:checked+label::before,
#step-type-protocol[type='radio']:checked+label::before {
    background: url(../image/step-type-checkbox-active.png) no-repeat;
    background-clip: content-box;
    background-size: 100%;
    width: 0.18rem;
    height: 0.18rem;
    margin-top: 0.06rem;
    margin-right: 0.08rem;
}

.protocol-bg {
    width: 0.54rem;
    height: 0.17rem;
    background: url('../image/protocol-bg.png') no-repeat;
    background-size: 100%;
}

.protocol1-bg {
    width: 0.54rem;
    height: 0.17rem;
    background: url('../image/protocol-bg.png') no-repeat;
    background-size: 100%;
    margin-right: 0.03rem;
}

.protocol1 {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.protocol {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

@keyframes fblike {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

.order-info .content .step-fb a {
    /* background-color: #1877F2; */
    border-radius: .1rem;
    display: block;
    padding: 0.18rem 0;
}

.order-info .step-fb .join-fb {
    width: 2.14rem;
}

.order-info .content .step-fb a .fb-like {
    margin: 0 .6rem;
    display: block;
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5);
    transform: scale(2.5);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.order-info .content .step-fb a#shareBtn {
    width: 1.02rem;
    height: .44rem;
    background-color: #4267B2;
    border-radius: .05rem;
    line-height: .44rem;
    font-size: .24rem;
    color: #fff;
    text-align: center;
}

.order-info .content .step-prize {
    position: absolute;
    top: 6.2rem;
    left: 1.1rem;
    background: url(../images/step-prize.png) no-repeat;
    background-size: 100%;
    width: 2.68rem;
    height: 1.26rem;
}

.order-info .content .step-gift {
    position: absolute;
    top: 6.5rem;
    left: 4.6rem;
}

.order-info .step-gift .step-gift-btn {
    position: absolute;
    width: 2.39rem;
    height: .78rem;
    background: url(../images/step-gift-btn.png) no-repeat;
    background-size: 100%;
}

.order-info .step-gift .step-gift-btn.over {
    pointer-events: none;
    background: url(../images/step-gift-got.png) no-repeat;
    background-size: 100%;
}

.order-info .order-store {
    position: absolute;
    top: 4rem;
    left: 0.45rem;
}

.order-info .like-award {
    position: absolute;
    top: 5.1rem;
    left: 0.1rem;
}

.like-award img {
    width: 3.34rem;
    height: 1.22rem;
    background-size: 100%;
}

.like-award .like-award-sdjqr {
    position: absolute;
    left: 0.3rem;
    top: 0.1rem;
}

.like-award .award-swiper {
    position: absolute;
    top: 0.1rem;
    left: 1.9rem;
}

.like-award .award-swiper img {
    position: absolute;
    width: 1.58rem;
    height: 1.33rem;
}

.order-info .order-store .order-store-ios {
    width: 1.8rem;
    height: 0.55rem;
    background: url(../images/order-store-ios.png) no-repeat;
    background-size: 100%;
    position: absolute;
}

.order-info .order-store .order-store-gp {
    width: 1.8rem;
    height: 0.55rem;
    background: url(../images/order-store-gp.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 1.92rem;
}

.order-info .order-store .order-store-ios-over {
    width: 3.24rem;
    height: 1.05rem;
    background: url(../images/order-store-ios-over.png) no-repeat;
    background-size: 100%;
    position: absolute;
}

.order-info .order-store .order-store-gp span,
.order-info .order-store .order-store-ios span,
.order-info .order-store .order-store-ios-over span {
    width: 1.8rem;
    height: 0.55rem;
    position: relative;
    display: inline;
    float: left;
    overflow: hidden;
    border-radius: 0.1rem;
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

.order-info .order-store .order-store-gp-light,
.order-info .order-store .order-store-ios-light {
    position: absolute;
    top: 0;
    left: -100%;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: url(../images/order-store-light.png) no-repeat;
    background-size: 100%;
    content: "";
    transition: all 650ms;
    -webkit-animation: sg 2s linear infinite;
    -moz-animation: sg 2s linear infinite;
    -ms-animation: sg 2s linear infinite;
    animation: sg 2s linear infinite;
}

@keyframes sg {
    from {
        left: -100%;
    }

    to {
        left: 100%;
    }
}

@-webkit-keyframes sg

/* Safari 和 Chrome*/
    {
    from {
        left: -100%;
    }

    to {
        left: 100%;
    }
}

.order-info .order-store>a img {
    width: 3.24rem;
    height: 1.05rem;
}

.order-info .content .step1-os-radio {
    position: absolute;
    top: 1.3rem;
    left: 3.4rem;
    font-size: .3rem;
    color: #fff;
}

.order-info .step1-os-radio #osRadioIOS {
    margin-left: .6rem;
}

.order-info .step1-os-radio img {
    width: .4rem;
}

.order-info .step1-os-radio span {
    vertical-align: middle;
    user-select: none;
}

.step-info .setp-010 {
    width: .52rem;
    height: .23rem;
    position: absolute;
    left: -.66rem;
}

.gif-code .pack-text{
    width: 3rem !important;
    color: #737a82;
    font-size: 0.15rem;
    margin-top: 0.14rem;
}

.gif-code-key2 .pack-text{
  width: 3rem !important;
  color: #737a82;
  font-size: 0.15rem;
  margin-top: 0.14rem;
}

.step-info-flex {
    display: flex;
    /* margin-left: -.3rem; */
    align-items: center;
}

.step-info-img>img {
    width: 0.88rem;
    height: 0.18rem;
}

.step1-os-radio .andriodLabel {
    margin-right: .6rem;
}

.font-division {
    color: #636159
}

.step1-os-radio label {
    cursor: pointer;
}

#phone {
    font-size: 0.16rem;
    width: 3.1rem;
    background: transparent !important;
    height: 0.4rem;
    line-height: 0.4rem;
    color: #fff;
    border: none;
    /* font-weight: 400; */
}
#phone::placeholder {
  font-size: 0.16rem;
}

#phone2::placeholder{
    text-align: center;
    color: #ffffff;
    opacity: 0.6;
    font-size: 0.16rem;
}

.rules-clone {
    width: 0.25rem;
    height: 0.27rem;
    background: url('../image/rules-clone.png') no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0.12rem;
    right: 0.1rem;
    cursor: pointer;
}

/* custom radio style */
.step1-os-radio input[type="radio"] {
    display: none;
}

.step1-os-radio input[type="radio"]+label::before {
    content: "\a0";
    /*不换行空格*/
    display: inline-block;
    vertical-align: middle;
    width: .26rem;
    height: .26rem;
    border-radius: 50%;
    border: 2px solid #fff;
    box-sizing: border-box;
}

.step1-os-radio input[type="radio"]:checked+label::before {
    background-color: #fff;
    background-clip: content-box;
    padding: 3px;
}

.font-number {
    background: url('../images/font-number.png') no-repeat;
    width: 0.99rem;
    height: 0.51rem;
    color: #656566;
    /* position: absolute; */
    font-size: 0.24rem;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    background-size: 100%;
}

.order-info .content .step-info .order-select {
    width: 1.75rem;
    height: 0.6rem;
    /* margin-top: 0.12rem; */
    margin-right: 0.07rem;
    /* padding: 0 25% 0 30%; */
    padding-left: 1%;
    display: inline-block;
    /* vertical-align: top; */
    background: #E7E3D7 url(../images/order-select.png) no-repeat 100%;
    background-size: 0.27rem 0.18rem;
    background-position-x: 1.4rem;
    border: 0.01rem solid #9B7842;
    font-size: .22rem;
    font-weight: 700;
    color: #513A32;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    box-sizing: border-box;
}

.order-info .content .step-info .order-tel {
    width: 3.5rem;
    height: 0.66rem;
    background: #392B2B;
    vertical-align: bottom;
    border: 0.01rem solid #4B1F0F;
    font-size: .18rem;
    font-weight: 500;
    color: #fff !important;
    text-align: left;
    text-align-last: left;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    /* padding-left: 0.9rem; */
    position: absolute;
    top: 1.2rem;
    font-size: 0.2rem;
}

.order-info .content .step-info .order-tel.activeFalse {
    color: red;
    font-size: 0.2rem;
    /* border: 0.01rem solid red; */
}

.order-info .content .step-info .order-tel.activeTrue {
    color: green;
    font-size: 0.2rem;
    /* border: 0.01rem solid green; */
}

.order-info .content .step-info input::-webkit-input-placeholder {
    color: #fffb91;
}

.order-info .content .step-info input:-moz-placeholder {
    color: #fffb91;
}

.order-info .content .step-info input:-ms-input-placeholder {
    color: #fffb91;
}


.pager-order-right-flex {
    /* display: flex; */
}


.store-reservation {
    position: absolute;
    right: 0.09rem;
    top: 2.4rem;
}

.store {
    filter: grayscale(100%);
    pointer-events: none;
}

/* .notclick{
    pointer-events: none;
} */
.store-reservation>img {
    width: 2.81rem;
    height: 0.68rem;
}


@media screen and (max-width:2560px) {
    .content .step-second {
        top: 4.1rem;
    }
}

@media screen and (max-width:1920px) {
    .content .step-second {
        top: 4.5rem;
    }
}

.content .step-third .lounge-btn {
    position: absolute;
    background: url(../images/lounge-btn.png) no-repeat;
    background-size: 100%;
    width: 0.98rem;
    height: 0.66rem;
    left: 7.8rem;
    top: 5.47rem;
}

.content .step-second .order-store-gp {
    width: 1.23rem;
    height: 0.37rem;
}

.content .step-second .order-store-ios {
    width: 1.23rem;
    height: 0.37rem;
}

.content .step-second .order-store-one {
    width: 1.26rem;
    height: 0.37rem;
}

.content .step-second .order-store-galaxy {
    width: 1.37rem;
    height: 0.37rem;
}

@media screen and (max-width: 1600px) {
    .content .step-second {
        top: 3.6rem;
    }
}

@media screen and (max-width: 1300px) {
    .content .step-second {
        top: 3.4rem;
    }
}

/* 奖励板块 */
#lottery {
    width: 5.2rem;
    height: 5.2rem;
    position: absolute;
    background: url(../images/lottery-bg.png) no-repeat;
    background-size: 100%;
    top: 2.3rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    /* transform: translate(-50%,-50%); */

}

#lottery ul .awards_1 {
    background: url(../images/lottery-1.png) no-repeat;
    background-size: 100%;
    top: 0.25rem;
    left: 2.55rem;
    position: absolute;
    width: 2.03rem;
    height: 1.93rem;
}

#lottery ul li.active .lottery-cur-1 {
    width: 2.1rem;
    height: 2.41rem;
    position: absolute;
    left: 0.05rem;
    top: -0.06rem;
    background-image: url(../images/lottery-cur-1.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

#lottery ul .awards_2 {
    background: url(../images/lottery-2.png) no-repeat;
    background-size: 100%;
    top: 1.55rem;
    left: 3.2rem;
    position: absolute;
    width: 1.88rem;
    height: 1.83rem;
}

#lottery ul li.active .lottery-cur-2 {
    width: 2.42rem;
    height: 2.41rem;
    left: -0.61rem;
    top: -0.17rem;
    position: absolute;
    background-image: url(../images/lottery-cur-2.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

#lottery ul .awards_3 {
    background: url(../images/lottery-3.png) no-repeat;
    background-size: 100%;
    top: 3.15rem;
    left: 2.1rem;
    position: absolute;
    width: 2.35rem;
    height: 1.7rem;
}

#lottery ul li.active .lottery-cur-3 {
    width: 2.11rem;
    height: 2.42rem;
    left: 0.51rem;
    position: absolute;
    top: -0.6rem;
    background-image: url(../images/lottery-cur-3.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

#lottery ul .awards_4 {
    background: url(../images/lottery-4.png) no-repeat;
    background-size: 100%;
    top: 3rem;
    position: absolute;
    left: 0.4rem;
    width: 2.3rem;
    height: 1.85rem;
}

#lottery ul li.active .lottery-cur-4 {
    width: 2.1rem;
    height: 2.42rem;
    left: 0.15rem;
    position: absolute;
    top: -0.448rem;
    background-image: url(../images/lottery-cur-4.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

#lottery ul .awards_5 {
    background: url(../images/lottery-5.png) no-repeat;
    background-size: 100%;
    top: 1.6rem;
    left: 0.25rem;
    position: absolute;
    width: 1.2rem;
    height: 1.57rem;
}

#lottery ul li.active .lottery-cur-5 {
    width: 2.42rem;
    height: 2.42rem;
    left: -0.04rem;
    top: -0.23rem;
    position: absolute;
    background-image: url(../images/lottery-cur-5.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

#lottery ul .awards_6 {
    background: url(../images/lottery-6.png) no-repeat;
    background-size: 100%;
    top: 0.4rem;
    left: 0.9rem;
    position: absolute;
    width: 2.22rem;
    height: 1.74rem;
}

#lottery ul li.active .lottery-cur-6 {
    width: 2.09rem;
    height: 2.42rem;
    left: -0.35rem;
    position: absolute;
    top: -0.21rem;
    background-image: url(../images/lottery-cur-6.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.lottery-btn .lottery-start {
    width: 1.56rem;
    height: 1.56rem;
    position: absolute;
    top: 1.84rem;
    left: 1.84rem;
    background: url(../images/lottery-btn.png) no-repeat;
    background-size: 100%;
}

/* 设备识别弹窗ios */
.equipment-ios-frame {
    background: url('../image/pop/equipment-ios-frame.png') no-repeat;
    background-size: 100%;
    width: 8.71rem;
    height: 5.91rem;
}

.gif-ios-code,
.gif-android-code {
  top: 1.1rem;
  left: 6.54rem;
  display: flex;
  color: #000;
  position: absolute;
  align-items: center;
  justify-content: space-between;
  font-size: 0.2rem;
}
.gif-ios-code2,
.gif-android-code2 {
  top: 1.5rem;
}

.equipment-ios .copy-code-2,
.equipment-android .copy-code-2 {
    background: url('../image/pop/regulations-2.png') no-repeat;
    background-size: 100%;
    width: 0.41rem;
    height: 0.22rem;
    cursor: pointer;
    margin-left: 0.2rem;
    margin-top: .02rem;
}

.copy-code {
    background: url('../image/regulations.png') no-repeat;
    background-size: 100%;
    width: 0.93rem;
    height: 0.19rem;
    cursor: pointer;
    margin-left: 0.2rem;
}

.equipment-ios-btn::after {
    content: '';
    display: inline-block;
    width: 0.28rem;
    height: 0.28rem;
    background: url(../image/section2/fb-like-red.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: -0.09rem;
    /* left: 2.2rem; */
    left: -0.1rem;
    z-index: 1;
    cursor: default;
    z-index: 3;
}
.equipment-ios-btn::before {
    content: '';
    display: inline-block;
    width: 0.43rem;
    height: 0.38rem;
    background: url(../image/section2/hand.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: 0.45rem;
    right: -0.33rem;
    -webkit-animation: fblike 1s ease-in-out infinite;
    animation: fblike 1s ease-in-out infinite;
    cursor: default;
    z-index: 3;
}

.equipment-ios-btn>span,
.equipment-android-btn>span {
    display: inline-block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    /*border-radius: 0.28rem;*/
}

/* 设备识别安卓 */
.equipment-android-frame {
    background: url('../image/pop/equipment-android-frame.png') no-repeat;
    background-size: 100%;
    width: 8.71rem;
    height: 5.91rem;
}

.equipment-ios-btn,
.equipment-android-btn {
    position: absolute;
    background: url(../image/pop/equipment-android.png) no-repeat;
    background-size: 100%;
    width: 2.2rem;
    height: 0.81rem;
    left: 5.6rem;
    bottom: 0.4rem;
    cursor: pointer;
}
.equipment-ios-btn {
    background-image: url(../image/pop/order-store-ios-pop.png);
}

.equipment-frame {
    width: 7.22rem;
    height: 4.78rem;
}

.equipment-frame.eq-ios,
.equipment-frame.eq-aos {
    width: 5.72rem;
    height: 8.69rem;
    background: url('../image/pop/pop-aos.png') no-repeat;
    background-size: 100%;
}
.equipment-frame.eq-ios {
    background-image: url('../image/pop/pop-ios.png');
}

.equipment-frame.eq-ios .pager2-order-bg,
.equipment-frame.eq-aos .pager2-order-bg 
{
  width: 4.2rem;
  height: 4.2rem;
  background: url(../image/section2/order-bg-i2.png) no-repeat center;
  background-size: 68%;
  position: absolute;
  top: 0.65rem;
  left: 0.5rem; 
  pointer-events: none;
}

.equipment-frame.eq-ios .pager2-order-bg .order-bg-i, 
.equipment-frame.eq-aos .pager2-order-bg .order-bg-i
{
  width: 4.69rem;
  height: 2.77rem;
  background: url('../image/section2/order-bg-i2b.png.png') no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 0.75rem;
  left: 0rem; 
  pointer-events: none;
}

.equipment-frame.eq-aos .dia-close{
  top: 0.3rem;
  right: 0.2rem;
}
.equipment-frame.eq-ios .dia-close{
  top: 0.3rem;
  right: 0.3rem;
}
.equipment-android .dia-close{
    left:7.8rem;
    top: 0.3rem;
}
.equipment-ios .dia-close{
    left:7.8rem;
    top: 0.3rem;
}

.eq-top1 #code,
.eq-top2 #code {
    width: 1.1rem;
    overflow: visible !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}
#code {
    width: 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #cbc7bb;
    text-align: right;
}
#code.scode {
  width: 0.45rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #cbc7bb;
  text-align: right;
}

.equipment-ios .pager2-order-bg,
.equipment-android .pager2-order-bg 
{
  width: 4.2rem;
  height: 4.2rem;
  background: url('../image/section2/order-bg-i2.png') no-repeat center;
  background-size: 82%;
  position: absolute;
  top: -0.35rem;
  left: 0.45rem;
}

.equipment-ios .pager2-order-bg .order-bg-i,
.equipment-android .pager2-order-bg .order-bg-i
{
  width: 4.61rem;
  height: 2.63rem;
  background: url('../image/pop/order-bg-i.png') no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 0.75rem;
  left: -0.1rem;
}

.equipment-ios .pager2-order-bg .order-bg-i {
  width: 4.62rem;
  height: 2.64rem;
  background: url('../image/pop/order-bg-ios.png') no-repeat center;
  background-size: 100%;
}

.equipment-ios .pager2-order-bg2,
.equipment-android .pager2-order-bg2 
{
  width: 4.2rem;
  height: 4.2rem;
  background: url('../image/section2/order-bg-i2.png') no-repeat center;
  background-size: 44%;
  position: absolute;
  top: 2.15rem;
  left: 0.15rem;
}

.equipment-ios .pager2-order-bg2 .order-bg-i2,
.equipment-android .pager2-order-bg2 .order-bg-i2
{
  width: 2.77rem;
  height: 1.88rem;
  background: url('../image/pop/order-bg-i2b.png') no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 1.15rem;
  left: 0.9rem;
}

.equipment-ios .pager2-order-bg2 .order-bg-i2 {
  width: 2.05rem;
  height: 1.96rem;
  background: url('../image/pop/order-bg-ios2b.png') no-repeat center;
  background-size: 100%;
  top: 0.95rem;
  left: 1.2rem;
}

/* 獎勵選擇 */
.equipment-ios .pop-order-radio,
.equipment-android .pop-order-radio {
    position: absolute;
    font-size: 0;
    top: 5.04rem;
    left: 1.23rem;
}
.pop-order-radio .options {
    position: absolute;
    display: flex;
}
.pop-order-radio .options .option {
    position: absolute;
}
.pop-order-radio .options .option:nth-child(2) {
    left: 1.06rem;
}
.pop-order-radio .options .option:nth-child(3) {
    left: 2.07rem;
}
.pop-order-radio .options .option:nth-child(4) {
    left: 3.05rem;
}
.pop-order-radio .options input[type="radio"] {
    display: none;
}
.pop-order-radio .options label {
    display: block;
    width: 0.23rem;
    height: 0.23rem;
    background: url('../image/pop/pop-login-radio.png') no-repeat;
    background-size: 100%;
    cursor: pointer;
}
.pop-order-radio .options input[type="radio"]:checked+label {
    width: 0.24rem;
    height: 0.26rem;
    background-image: url('../image/pop/pop-login-radio-active.png');
    margin-top: -0.03rem;
}

.reward-bg #code {
    color: #dddddd;
    font-weight: 500;
}
.reward-bg #no-code {
    color: #dddddd;
    font-weight: 500;
    height: 0.33rem;
}
.reward-bg .ul-4 #no-code {
    color: #dddddd;
    font-weight: 500;
    font-size: 0.12rem;
    height: 0.2rem;
}
.reward-bg .ul-3 #no-code {
    color: #dddddd;
    font-weight: 500;
    font-size: 0.12rem;
    height: 0.1rem;
}
.reward-bg #no-code a{
    font-size: 0.15rem;
    text-decoration:underline;
    text-decoration-color:#dddddd;
    display: inline-block;
    line-height: 0.2rem;
    text-align: center;
}
.code-full-container .gif-code2  #code {
    width: 0.45rem;
    overflow: hidden;
    /*text-overflow: unset;*/
    white-space: nowrap;
    color: #887360;
    font-weight: bold;
}

.eq-ios .gif-code,
.eq-aos .gif-code {
    top: 1rem;
    left: 3.3rem;
    font-size: 0.2rem;
}
.eq-ios .gif-code {
  top: 1.05rem;
  left: 3.3rem;
}
.eq-ios .gif-code-key2,
.eq-aos .gif-code-key2 {
  top: 1.3rem;
  left: 3.3rem;
    font-size: 0.2rem;
}


.eq-ios .copy-code-2,
.eq-aos .copy-code-2 {
    background: url('../image/pop/regulations-3.png') no-repeat;
    background-size: 100%;
    width: 0.33rem;
    height: 0.21rem;
    cursor: pointer;
    margin-left: 0.2rem;
    margin-top: .03rem;
}

.gif-code,
.gif-code-key2 {
    top: 1.48rem;
    left: 4.4rem;
    /* width: 1.5rem; */
    display: flex;
    position: absolute;
    align-items: center;
}

.code-full-bg .gif-code {
    top: 0.9rem;
    left: 2.2rem;
    display: flex;
    position: absolute;
    align-items: center;
}
.code-full-bg .gif-code2 {
    top: 1.34rem;
    left: 1.74rem;
    display: flex;
    position: absolute;
    align-items: center;
}

.code-full-container .code-full-bg .gif-code2 {
    top: 1.34rem;
    left: 2.2rem;
    display: flex;
    position: absolute;
    align-items: center;
}

.born-first-container .gif-code {
    top: 1.23rem;
    left: 3rem;
}

.gif-code2 {
    top: 1.1rem;
    left: 5rem;
    width: 1.5rem;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: space-between;
}

.code-full-container .gif-code2 {
    top: 1.1rem;
    left: 5rem;
    width: 1.05rem;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: space-between;
}

.eq-ios .equipment-btn,
.eq-aos .equipment-btn {
    position: absolute;
    background: url(../image/pop/pop-lounge-btn.png) no-repeat;
    background-size: 100%;
    width: 2.59rem;
    height: 0.79rem;
    bottom: 3.7rem;
    left: -.2rem;
    right: 0;
    margin: 0 auto;
    cursor: pointer;
}

.lounge-frame .lounge-btn {
    position: absolute;
    background: url(../image/pop/btn-Privacy.png) no-repeat;
    background-size: 100%;
    width: 2.59rem;
    height: 0.79rem;
    bottom: 0.5rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    cursor: pointer;
}

/* 未预约弹窗 */
.no-appoin-content {
    width: 6.21rem;
    height: 5.75rem;
    background: url('../image/pop-weiyuyue.png');
    background-size: 100%;

}

.no-appoin-content .no-appoin-cloce {
    width: 2.22rem;
    height: .47rem;
    background: url('../image/btn-weiyuyue.png');
    background-size: 100%;
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-52%);
}

.no-appoin-content .noappoin-cloce {
    width: .42rem;
    height: .36rem;
    position: absolute;
    right: 0.2rem;
    top: -0.2rem;
    background: url(../image/appointment-clone.png) no-repeat;
    background-size: 100%;
}

.list .item .item-text:empty+.item-copy {
    display: none;
}


.appoin-bg .appoin-cloce {
    cursor: pointer;
    position: absolute;
    top: -0.2rem;
    right: -0.4rem;
    width: .42rem;
    height: .36rem;
    background: url(../image/appointment-clone.png) no-repeat;
    background-size: 100%;
}

/* 测试弹窗1 */
.cesi-frame {
    width: 5.39rem;
    height: 2.53rem;
    background: url(../image/pop-MBTI.png) no-repeat;
    background-size: 100%;
}

.cesi-frame ul {
    display: flex;
    justify-content: center;
    padding-top: 1.4rem;
}

.cesi-frame ul li {
    cursor: pointer;
    width: 1.47rem;
    height: .57rem;
}

.cesi-frame ul .cesi-btn1 {
    background: url(../image/equipment-btn.png) no-repeat;
    background-size: 100%;
    margin-right: .76rem;
}

.cesi-frame ul .cesi-btn2 {
    background: url(../image/btn-ceshi.png) no-repeat;
    background-size: 100%;
}

/* 测试弹窗2 */
.cesi2-frame {
    width: 5.39rem;
    height: 2.85rem;
    background: url(../image/pop-MBTI2.png) no-repeat;
    background-size: 100%;
}

.cesi2-frame .gif-code {
    top: 0.89rem;
    left: 2.6rem;
}

.cesi2-frame .cesi2-btn {
    cursor: pointer;
    width: 1.47rem;
    height: .56rem;
    background: url(../image/equipment-btn.png) no-repeat;
    background-size: 100%;
    position: absolute;
    bottom: .3rem;
    left: 50%;
    transform: translateX(-50%);
}

/* 测试弹窗3 */
.cesi3-frame {
    width: 5.39rem;
    height: 2.35rem;
    background: url(../image/pop-MBTI3.png) no-repeat;
    background-size: 100%;

}

.cesi3-frame .cesi3-btn {
    cursor: pointer;
    width: 1.47rem;
    height: .56rem;
    background: url(../image/equipment-btn.png) no-repeat;
    background-size: 100%;
    position: absolute;
    bottom: .4rem;
    left: 50%;
    transform: translateX(-50%);
}

/* 预约弹窗 */
.yuyue-frame {
    background: url(../image/pop-yuyue.png) no-repeat;
    background-size: 100%;
    width: 5.19rem;
    height: 3.18rem;
}

.yuyue-frame .gif-code {
    top: .82rem;
}

.yuyue-frame .yuyue-btn {
    cursor: pointer;
    width: 1.47rem;
    height: .56rem;
    background: url(../image/equipment-btn.png) no-repeat;
    background-size: 100%;
    position: absolute;
    bottom: .4rem;
    left: 50%;
    transform: translateX(-50%);

}

/* lounge 弹窗 */
.lounge-frame {
    background: url(../image/pop/lounge-bg.png) no-repeat;
    background-size: 100%;
    width: 5.72rem;
    height: 7.03rem;
}

.lounge-frame::after  {
  content: '';
  width: 4.51rem;
  height: 3.58rem;
  background: url('../image/pop/pop-gift2.png') no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 1.2rem;
  left: 0.3rem;
  pointer-events: none; 
}

.lounge-frame::before{
  content: '';
  width: 4.2rem;
  height: 4.2rem;
  background: url('../image/section2/order-bg-i2.png') no-repeat center;
  background-size: 80%;
  position: absolute;
  top: 1.05rem;
  left: 0.75rem;
  pointer-events: none;
}


.lounge-code {
    top: 1.08rem;
    left: 4.52rem;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: space-between;
    font-size: 0.2rem;
    color: #fff;
}

#loungecode {
    width: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lounge-pop  #loungecode {
    width: 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

.lounge-code .copy-code-2 {
    background: url('../image/pop/regulations-3.png') no-repeat;
    background-size: 100%;
    width: 0.28rem;
    height: 0.17rem;
    cursor: pointer;
    margin-left: 0.1rem;
    margin-top: 0.05rem;
}

.lounge-frame .dia-close {
    top: 0.3rem;
    right: 0.2rem;
}

.introduce-content {
    background: url(../image/pop/pop-introduce.png) no-repeat;
    background-size: 100%;
    width: 7.22rem;
    height: 4.77rem;
}

.introduce-content .animates {
    width: 6rem;
    height: 5rem;
    background: url("../image/pop/pop-animate.png") no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.introduce-content .introduce-cloce {
    width: .28rem;
    height: .28rem;
    background: url(../image/pop/appointment-clone.png) no-repeat;
    background-size: 100%;
    position: absolute;
    right: 0.3rem;
    top: 0.3rem;
}

/* 领取奖励 */
.suspend-content {
    background: url(../image/suspend-img.png) no-repeat;
    background-size: 100%;
    width: 7.62rem;
    height: 4.39rem;
}

.suspend-btn {
    position: absolute;
    background: url(../image/btn-Privacy.png) no-repeat;
    background-size: 100%;
    width: 2.21rem;
    height: 0.86rem;
    bottom: 0.7rem;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

.suspend-code {
    display: flex;
    position: absolute;
    top: 0.96rem;
    left: 4rem;
    color: #ABABAB;
}

/* 15s未预约弹窗 */
.appointment-login {
    width: 8.71rem;
    height: 5.72rem;
    background: url('../image/pop/appointment-login.png') no-repeat;
    background-size: 100%;
}

.appointment-center {
    position: relative;
}

.pager2-order-select {
    font-size: .18rem;
}

#step-type-IOS,
#step-type-AOS {
    cursor: pointer;
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.step-type-appointment {
    position: absolute;
    font-size: 0.22rem;
    display: flex;
    width: 2.4rem;
    justify-content: space-between;
    top: 1.2rem;
    left: 5.08rem;
    align-items: center;
    color: #000;
}

.step-type-AOS-cur {
    cursor: pointer;
}

.step-type-IOS-cur {
    cursor: pointer;
}

#step-type-IOS {
    position: absolute;
    cursor: pointer;
    width: 1.2rem;
}

#step-type-AOS {
    position: absolute;
    cursor: pointer;
    width: 1.5rem;
}
.step-type-IOS, .step-type-AOS {
    color: #fff;
    cursor: pointer;
}

#step-type-IOS[type='radio']+label::before,
#step-type-AOS[type='radio']+label::before {
    content: '';
    width: .18rem;
    height: .18rem;
    background: url(../image/pop/step-type-checkbox.png) no-repeat;
    background-size: 100%;
    float: left;
    margin-top: 0.1rem;
    margin-right: 0.1rem;
    cursor: pointer;
}

#step-type-IOS[type='radio']:checked+label::before,
#step-type-AOS[type='radio']:checked+label::before {
    background: url(../image/pop/step-type-checkbox-active.png) no-repeat;
    background-clip: content-box;
    background-size: 100%;
    width: .29rem;
    height: .31rem;
    margin-top: 0.03rem;
    margin-right: 0.08rem;
    margin-left: -0.08rem;
    cursor: pointer;
}



#step-type-IOS[type='radio']+label {
  color: #b29f78;
}

#step-type-AOS[type='radio']+label {
  color: #b29f78;
}

#step-type-IOS[type='radio']:checked+label {
  color: #ffffe8;
}

#step-type-AOS[type='radio']:checked+label {
    color: #ffffe8;
}

.login .appointment-phone {
    position: absolute;
    top: 1.56rem;
    left: 5.42rem;
    transform: none;
}

.equity-jump1,
.equity-jump2 {
    background: url('../image/pop/regulations2.png') no-repeat;
    width: 0.47rem;
    height: 0.16rem;
    background-size: 100%;
    cursor: pointer;
}

.equity-text,
.equity-text1 {
    width: 1.88rem;
    height: 0.14rem;
    background: url('../image/pop/equity-text1.png') no-repeat;
    background-size: 100%;
    margin-left: 0.2rem;
    margin-top: 0.02rem;
}
.equity-text {
    width: 1.19rem;
    height: 0.14rem;
    background-image: url('../image/pop/equity-text.png');
}

input:-internal-autofill-selected {
    background: transparent !important;
}

.appointment-phone .cell-phone {
    /* background: #D1BA99; */
    background: transparent !important;
    border: 0rem;
    outline: none;
    height: 0.43rem;
    width: 2.3rem;
    text-align: center;
    color: #fffb91;
}

.cell-phone::-ms-input-placeholder {
    text-align: left;
    color: #fffb91;
}

.cell-phone::-webkit-input-placeholder {
    text-align: left;
    color: #fffb91;
}

/* .appointment-clone {
    position: absolute;.step-type-appointment
    background: url(../image/appointment-clone.png) no-repeat;
    background-size: 100%;
    width: 0.28rem;
    height: 0.28rem;
    right: 0.3rem;
    top: 0.3rem;
    cursor: pointer;
} */
.appointment-login .logo-close{
  top: 0.2rem;
  right: 0.15rem;
}
.equity {
    display: flex;
    position: absolute;
    top: 2.1rem;
    left: 4.58rem;
    justify-content: space-between;
    width: 3.62rem;
    align-items: center;
}

.equity1 {
    display: flex;
    position: absolute;
    top: 2.4rem;
    left: 4.58rem;
    justify-content: space-between;
    width: 3.64rem;
    align-items: center;
}

.appointment-login .pop-requ {
    position: absolute;
    bottom: 0.5rem;
    left: 0.57rem;
}
.appointment-login .pop-requ div {
    position: absolute;
    width: 0.96rem;
    height: 0.32rem;
    cursor: pointer;
    transition: all 0.3s;
    background: url(../image/pop/claim.png) no-repeat;
    background-size: 100%;
}
.appointment-login .pop-requ .first-btn{
    position: absolute;
    bottom: 0.24rem;
    left: 0.6rem;
}

.appointment-login .pop-requ .second-btn {
    left: 1.93rem;
    bottom: 0.24rem;
}

.appointment-login .pop-requ .third-btn {
    left: 3.22rem;
    bottom: 0.24rem;
}
.appointment-login .pop-requ div.active {
    pointer-events: none;
    background: url(../image/pop/claimed.png) no-repeat;
    background-size: 100%;
}



.equity-login-check {
    display: flex;
    align-items: center;
}

.equity-login-check1 {
    display: flex;
    align-items: center;
}

.equity-login-check input[type=checkbox],
.equity-login-check1 input[type=checkbox] {
    position: relative;
    display: inline-block;
    appearance: none;
    -webkit-appearance: none;
    width: 0.18rem;
    height: 0.18rem;
    outline: none;
    background-color: transparent;
    margin: 0;
}

.equity-login-check input[type=checkbox]:checked,
.equity-login-check1 input[type=checkbox]:checked {
    background: transparent;
}

.equity-login-check .login-checkbox,
.equity-login-check1 .login-checkbox {
    width: .19rem;
    height: .19rem;
    background: url(../image/pop/checkbox-text.png) no-repeat;
    background-size: 100%;
}

.equity-login-check .login-checkbox:checked::after,
.equity-login-check1 .login-checkbox:checked::after {
    content: '';
    display: inline-block;
    width: .22rem;
    height: .20rem;
    background: url(../image/pop/checkbox-text-active.png) no-repeat;
    background-size: 100%;
    margin-left: -0.01rem;
    margin-top: -0.005rem;
    cursor: pointer;
    position: absolute;
}


/*.confirm-appointment-btn.no-aftere::after {*/
/*    content: '';*/
/*    display: inline-block;*/
/*    width: 0.30rem;*/
/*    height: 0.30rem;*/
/*    background: url(../image/section2/fb-like-red.png) no-repeat;*/
/*    background-size: 100%;*/
/*    cursor: pointer;*/
/*    position: absolute;*/
/*    top: -0.08rem;*/
/*    left: 0.2rem;*/
/*    z-index: 1;*/
/*    cursor: default;*/
/*}*/

/*.confirm-appointment-btn.no-aftere::before {*/
/*    content: '';*/
/*    display: inline-block;*/
/*    width: 0.58rem;*/
/*    height: 0.47rem;*/
/*    background: url(../image/section2/header.png) no-repeat;*/
/*    background-size: 100%;*/
/*    position: absolute;*/
/*    bottom: -0.1rem;*/
/*    right: -0.2rem;*/
/*    z-index: 1;*/
/*    cursor: default;*/
/*}*/

.confirm-appointment-btn {
    background: url('../image/pop/pop-order-login.png') no-repeat;
    width: 2.57rem;
    height: 0.79rem;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: 2.8rem;
    left: 5.07rem;
}

.confirm-appointment  .confirm-appointment-btn span{
  width: 92%;
  height: 80%;
  position: absolute;
  top: .026rem;
  left: .15rem;
}

.appointment-login .pop-gift-radio {
    position: absolute;
    font-size: 0;
    top: 5.04rem;
    left: 0.86rem;
}
.pop-gift-radio .options {
    position: absolute;
    display: flex;
}
.pop-gift-radio .options .option {
    position: absolute;
}
.pop-gift-radio .options .option:nth-child(1) {
  left: -0.01rem;
}
.pop-gift-radio .options .option:nth-child(2) {
    left: 1.02rem;
}
.pop-gift-radio .options .option:nth-child(3) {
    left: 2.06rem;
}
.pop-gift-radio .options .option:nth-child(4) {
  left: 3.12rem;
}
.pop-gift-radio .options input[type="radio"] {
    display: none;
}
.pop-gift-radio .options label {
    display: block;
    width: 0.23rem;
    height: 0.23rem;
    background: url('../image/pop/pop-login-radio.png') no-repeat;
    background-size: 100%;
    cursor: pointer;
}
.pop-gift-radio .options input[type="radio"]:checked+label {
    width: 0.24rem;
    height: 0.26rem;
    background-image: url('../image/pop/pop-login-radio-active.png');
    margin-top: -0.03rem;
}

/* 预约人数 EVENT 1 */
.pager4 .count span {
    text-align: center;
    position: absolute;
    top: 1.72rem;
    left: 10.45rem;
    line-height: 0.6rem;
    font-size: 0.75rem;
    -webkit-text-size-adjust: none;
    font-weight: bolder;
    background-image: -webkit-linear-gradient(272deg, #FFFFFF, #89827E);
    letter-spacing: .02rem;
    /* text-decoration: underline; */
    /* background: linear-gradient(to bottom, #8439ff 0%, #fffeff 49%, #9d88fe 50%, #6d26e5 100%); */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.task-prize-btn {
    position: absolute;
    /* top: 0rem; */
    left: 0rem;
    right: 0rem;
    text-align: center;
    bottom: 0rem;
}

.task-prize-btn>a>img {
    width: 4.14rem;
    height: 0.95rem;
}




.task-title-dec {
    /* top: 2.5rem; */
    /* left: 6.3rem; */
    position: absolute;
    height: 0.63rem;
    width: 9.41rem;
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    left: 0rem;
    right: 0rem;
    margin: 1.5rem auto;
}

.reached-number>ul>.task-1 {
    background: url(../images/number-two.png) no-repeat;
    background-size: 100%;
    width: 2.17rem;
    height: 4.28rem;
    /* position: absolute;
    top: -1.6rem; */
    left: 0rem;
}

.reached-number>ul>.task-1::after {
    content: "";
    width: 2.17rem;
    height: 4.28rem;
    top: 0.005rem;
    position: absolute;
    background-color: rgba(0, 0, 0, .6);
    pointer-events: none;
}

.reached-number>ul>.task-1.finish::after {
    content: "";
    width: 99.3%;
    height: 99.9%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
}

/* .reached-number>ul> .task-1.finish::after{
    content: "";
    width:2.17rem;
    height: 4.28rem;
    position: absolute;
    background-color: rgba(0,0,0,0);
    pointer-events: none;
} */
.task-prize .task-1 .task-1-more,
.task-prize .task-2 .task-2-more {
    height: 0.2rem;
    width: 0.2rem;
    border-radius: 50%;
    border: 0.01rem solid #A49292;
    color: #A49292;
    text-align: center;
    font-size: 0.25rem;
    font-weight: lighter;
    align-items: center;
    line-height: 0.21rem;
    position: absolute;
    left: 1.6rem;
    top: 3.25rem;
    cursor: default;
}

.task-1 .task-1-more:hover .task-1-pop {
    background: url(../images/task-1-pop.png) no-repeat;
    background-size: 100%;
    width: 2.29rem;
    height: 3.02rem;
    position: absolute;
    top: -0.5rem;
    left: -2.5rem;
    z-index: 99;
}

.task-2 .task-2-more:hover .task-2-pop {
    background: url(../images/task-2-pop.png) no-repeat;
    background-size: 100%;
    width: 2.26rem;
    height: 3.02rem;
    position: absolute;
    top: -0.5rem;
    left: -2.5rem;
    z-index: 99;
}

.task-prize .task-3 .task-3-more {
    height: 0.2rem;
    width: 0.2rem;
    border-radius: 50%;
    border: 0.01rem solid #A49292;
    color: #A49292;
    text-align: center;
    font-size: 0.25rem;
    font-weight: lighter;
    align-items: center;
    line-height: 0.21rem;
    position: absolute;
    left: 1.6rem;
    top: 3.25rem;
    cursor: default;
}

.task-3 .task-3-more:hover .task-3-pop {
    background: url(../images/task-3-pop.png) no-repeat;
    background-size: 100%;
    width: 2.26rem;
    height: 3.02rem;
    position: absolute;
    top: -0.4rem;
    left: -2.5rem;
    z-index: 99;
}

.task-prize .task-5 .task-5-more {
    height: 0.2rem;
    width: 0.2rem;
    border-radius: 50%;
    border: 0.01rem solid #A49292;
    color: #A49292;
    text-align: center;
    font-size: 0.25rem;
    font-weight: lighter;
    align-items: center;
    line-height: 0.21rem;
    position: absolute;
    left: 1.6rem;
    top: 3.25rem;
    cursor: default;
}

.task-5 .task-5-more:hover .task-5-pop {
    background: url(../images/task-5-pop.png) no-repeat;
    background-size: 100%;
    width: 2.26rem;
    height: 3.02rem;
    position: absolute;
    top: -0.5rem;
    left: -2.5rem;
    z-index: 1;
}

.reached-number>ul>.task-2 {
    background: url(../images/number-five.png) no-repeat;
    background-size: 100%;
    width: 2.17rem;
    height: 4.28rem;
    position: absolute;
    /* top: -1.6rem; */
    left: 2.3rem;
}

.reached-number>ul>.task-2::after {
    content: "";
    width: 2.17rem;
    height: 4.28rem;
    /* top: 0.0149rem; */
    left: 0rem;
    position: absolute;
    background-color: rgba(0, 0, 0, .6);
    pointer-events: none;
}

.reached-number>ul>.task-2.finish::after {
    content: "";
    width: 2.17rem;
    height: 4.28rem;
    /* top: 0.0149rem; */
    left: 0rem;
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
}

.reached-number>ul>.task-3 {
    background: url(../images/number-six.png) no-repeat;
    background-size: 100%;
    width: 2.17rem;
    height: 4.28rem;
    position: absolute;
    /* top: -1.6rem; */
    left: 4.6rem;
}

.reached-number>ul>.task-3::after {
    content: "";
    width: 2.17rem;
    height: 4.28rem;
    /* top: 0.0149rem; */
    left: 0rem;
    position: absolute;
    background-color: rgba(0, 0, 0, .6);
    pointer-events: none;
}

.reached-number>ul>.task-3.finish::after {
    content: "";
    width: 2.17rem;
    height: 4.28rem;
    /* top: 0.0149rem; */
    left: 0rem;
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
}

.reached-number>ul>.task-4 {
    background: url(../images/number-eight.png) no-repeat;
    background-size: 100%;
    width: 2.17rem;
    height: 4.28rem;
    position: absolute;
    /* top: -1.6rem; */
    left: 6.9rem;
}

.reached-number>ul>.task-4::after {
    content: "";
    width: 2.17rem;
    height: 4.28rem;
    /* top: 0rem; */
    left: 0rem;
    position: absolute;
    background-color: rgba(0, 0, 0, .6);
    pointer-events: none;
}

.reached-number>ul>.task-4.finish::after {
    content: "";
    width: 2.17rem;
    height: 4.28rem;
    /* top: 0rem; */
    left: 0rem;
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
}

/* .task-prize .task-4{
    background: rgba(0,0,0,.4);
    background-size: 100%;
    width: 2.35rem;
    height: 3.61rem;
    position: absolute;
    top: -1.6rem;
    left: 6.57rem;
} */
.reached-number>ul>.task-5 {
    background: url(../images/number-ten.png) no-repeat;
    background-size: 100%;
    width: 2.17rem;
    height: 4.28rem;
    position: absolute;
    /* top: -1.6rem; */
    left: 9.2rem;
}

.reached-number>ul>.task-5::after {
    content: "";
    width: 2.17rem;
    height: 4.28rem;
    top: 0.0149rem;
    left: 0rem;
    position: absolute;
    background-color: rgba(0, 0, 0, .6);
    pointer-events: none;
}

.reached-number>ul>.task-5.finish::after {
    content: "";
    width: 2.17rem;
    height: 4.28rem;
    top: 0.0149rem;
    left: 0rem;
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
}

/* EVENT2 */
.pager5 .weapon {
    background: url(../images/weapon.png) no-repeat;
    background-size: 100%;
    width: 11rem;
    height: 8.72rem;
    position: absolute;
    left: 5.8rem;
    top: 0.9rem;
}

@media screen and (max-width:1680px) {
    .page5 .weapon {
        top: 1.4rem;
    }
}

.weapon-name {
    background: url(../images/weapon-name.png) no-repeat;
    background-size: 100%;
    width: 4rem;
    height: 0.5rem;
    position: absolute;
    top: 6.5rem;
    left: 50%;
    transform: translate(-50%, -50%);
}

.weapon-status {
    position: absolute;
    font-size: 0.28rem;
    letter-spacing: -0.02rem;
    color: #BCB7B6;
    cursor: default;
    top: 7.1rem;
    left: 50%;
    transform: translate(-50%, -50%);
}

.invite-link {
    width: 4.5rem;
    height: 0.4rem;
    background: #392B2B;
    vertical-align: bottom;
    border: 0.02rem solid #7D6940;
    font-size: .24rem;
    font-weight: 500;
    color: #C8A861;
    text-align: left;
    text-align-last: left;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    padding: 0rem 0.08rem;
    position: absolute;
    letter-spacing: -0.02rem;
    top: 7.7rem;
    left: 5.55rem;
}

.copy-btn {
    background: url(../images/copy-btn.png) no-repeat;
    background-size: 100%;
    width: 1.26rem;
    height: 0.4rem;
    position: absolute;
    top: 7.72rem;
    left: 10.2rem;
}

.copy-btn.finish {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    pointer-events: none;
}

.get-award-btn {
    background: url(../images/get-award-btn.png) no-repeat;
    background-size: 100%;
    width: 1.26rem;
    height: 0.4rem;
    position: absolute;
    top: 7.72rem;
    left: 11.6rem;
}

.get-award-btn.finish {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    pointer-events: none;
}

.award-btns input::-webkit-input-placeholder {
    color: #C8A861;
}

.award-btns input:-moz-placeholder {
    color: #C8A861;
}

.award-btns input:-ms-input-placeholder {
    color: #C8A861;
}

/* EVENT3 */
.pager6 .prize-content {
    display: flex;
    justify-content: space-around;
    width: 10rem;
    top: 3rem;
    left: 4.6rem;
    position: absolute;
}

.prize-content li {
    width: 2.32rem;
    height: 4.6rem;
}

.prize-content .prize-1 {
    background: url(../images/prize-1.png) no-repeat;
    background-size: 100%;
}

.prize-content .prize-1 .prize-1-btn {
    background: url(../images/prize-1-btn.png) no-repeat;
    background-size: 100%;
    width: 1.54rem;
    height: 0.46rem;
    position: absolute;
    top: 3.95rem;
    left: 0.485rem;
}

.prize-content .prize-2 {
    background: url(../images/prize-2.png) no-repeat;
    background-size: 100%;
}

.prize-content .prize-2 .prize-2-btn {
    background: url(../images/prize-2-btn.png) no-repeat;
    background-size: 100%;
    width: 1.54rem;
    height: 0.46rem;
    position: absolute;
    top: 3.95rem;
    left: 2.98rem;
}

.prize-content .prize-3 {
    background: url(../images/prize-3.png) no-repeat;
    background-size: 100%;
}

.prize-content .prize-3 .prize-3-btn {
    background: url(../images/prize-3-btn.png) no-repeat;
    background-size: 100%;
    width: 1.54rem;
    height: 0.46rem;
    position: absolute;
    top: 3.95rem;
    left: 5.49rem;
}

.prize-content .prize-4 {
    background: url(../images/prize-4.png) no-repeat;
    background-size: 100%;
}

.prize-content .prize-4 .prize-4-btn {
    background: url(../images/prize-4-btn.png) no-repeat;
    background-size: 100%;
    width: 1.54rem;
    height: 0.46rem;
    position: absolute;
    top: 3.95rem;
    left: 7.98rem;
}

/* 福利板块 */
.welfare {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
}

.welfare .title img {
    width: 6.85rem;
    height: 2.25rem;
}

.welfare .welfare-content {
    position: relative;
    margin: 0 auto;
    width: 10.4rem;
    display: flex;
    flex-direction: column;
    margin-bottom: 0.1rem;
}

.welfare-content .welfare-1 {
    position: relative;
    background: url(../images/welfare-1.png) no-repeat;
    background-size: 100%;
    width: 10.37rem;
    height: 2.85rem;
    left: -0.57rem;
    margin-bottom: 0.15rem;
}

.welfare-1 .welfare-btn-1 {
    position: absolute;
    width: 2.11rem;
    height: 0.72rem;
    left: 8.1rem;
    top: 1.32rem;
}

.welfare-content .welfare-2 {
    background: url(../images/welfare-2.png) no-repeat;
    background-size: 100%;
    width: 9.21rem;
    height: 2.27rem;
    margin: 0 auto;
    margin-bottom: 0.15rem;
}

.welfare-2 .welfare-btn-2 {
    position: absolute;
    width: 1.92rem;
    height: 0.53rem;
    left: 7.7rem;
    top: 3.97rem;
    background: url(../images/receive.png) no-repeat;
    background-size: 100%;
}

.welfare-2 .welfare-btn-2.finish {
    position: absolute;
    width: 1.92rem;
    height: 0.53rem;
    left: 7.7rem;
    top: 3.97rem;
    background: url(../images/received.png) no-repeat;
    background-size: 100%;
    pointer-events: none;
}

.welfare-2 .welfare-btn-2.end {
    position: absolute;
    width: 1.92rem;
    height: 0.53rem;
    left: 7.7rem;
    top: 3.97rem;
    background: url(../images/end.png) no-repeat;
    background-size: 100%;
    pointer-events: none;
}

.welfare-content .welfare-3 {
    background: url(../images/welfare-3.png) no-repeat;
    background-size: 100%;
    width: 9.22rem;
    height: 2.35rem;
    margin: 0 auto;
    margin-bottom: 0.15rem;
}

.welfare-3 .welfare-btn-3 {
    position: absolute;
    width: 1.92rem;
    height: 0.53rem;
    left: 7.7rem;
    top: 6.42rem;
    background: url(../images/receive.png) no-repeat;
    background-size: 100%;
}

.welfare-3 .welfare-btn-3.end {
    position: absolute;
    width: 1.92rem;
    height: 0.53rem;
    left: 7.7rem;
    top: 6.42rem;
    background: url(../images/end.png) no-repeat;
    background-size: 100%;
    pointer-events: none;
}

.welfare-content .welfare-4 {
    background: url(../images/welfare-4.png) no-repeat;
    background-size: 100%;
    width: 9.32rem;
    height: 2.3rem;
    position: relative;
    left: 0.5rem;
    margin-bottom: 0.15rem;
}

.welfare-4 .welfare-btn-4 {
    position: absolute;
    width: 1.92rem;
    height: 0.53rem;
    left: 7.2rem;
    top: 1rem;
    background: url(../images/receive.png) no-repeat;
    background-size: 100%;
}

.welfare-4 .welfare-btn-4.end {
    position: absolute;
    width: 1.92rem;
    height: 0.53rem;
    left: 7.2rem;
    top: 1rem;
    background: url(../images/end.png) no-repeat;
    background-size: 100%;
    pointer-events: none;
}

.welfare-content .welfare-5 {
    background: url(../images/welfare-5.png) no-repeat;
    background-size: 100%;
    width: 9.21rem;
    height: 2.30rem;
    margin: 0 auto;
    margin-bottom: 0.15rem;
}

.welfare-5 .welfare-btn-5 {
    position: absolute;
    width: 1.92rem;
    height: 0.53rem;
    left: 7.7rem;
    top: 11.35rem;
    background: url(../images/receive.png) no-repeat;
    background-size: 100%;
}

.welfare-5 .welfare-btn-5.finish {
    position: absolute;
    width: 1.92rem;
    height: 0.53rem;
    left: 7.7rem;
    top: 11.35rem;
    background: url(../images/received.png) no-repeat;
    background-size: 100%;
    pointer-events: none;
}

.welfare-5 .welfare-btn-5.end {
    position: absolute;
    width: 1.92rem;
    height: 0.53rem;
    left: 7.7rem;
    top: 11.35rem;
    background: url(../images/end.png) no-repeat;
    background-size: 100%;
    pointer-events: none;
}

/* 扭蛋抽獎 */
.gashapon {
    position: relative;
    margin-top: .9rem;
}

.gashapon .title {
    height: 1.32rem;
}

.gashapon .gashapon-wrapper {
    position: relative;
}

.gashapon .gashapon-wrapper .gashapon-main {
    width: 11.71rem;
    height: 8.61rem;
    position: relative;
    background: url("../images/gashapon-main-bg.png") no-repeat;
    background-size: 100%;
    margin: 0 auto;
    margin-top: .2rem;
}

.gashapon .gashapon-main .gashapon-hover-gift {
    position: absolute;
}

.gashapon .gashapon-main .gashapon-hover-gift-1 {
    width: 1.9rem;
    left: 1.8rem;
    top: 2.3rem;
    animation: bubble 8s infinite;
}

.gashapon .gashapon-main .gashapon-hover-gift-2 {
    width: 1.71rem;
    top: 2.3rem;
    left: 4rem;
    animation: bubble 6s infinite;
}

.gashapon .gashapon-main .gashapon-hover-gift-3 {
    width: 3.01rem;
    top: 2.4rem;
    left: 5.9rem;
    animation: bubble 9s infinite;
}

.gashapon .gashapon-wrapper .gashapon-btns {
    position: absolute;
    top: 6.3rem;
    left: 6.9rem;
}

.gashapon-wrapper .gashapon-btns>a {
    display: block;
    position: absolute;
}

.gashapon-wrapper .gashapon-btns .gashapon-lottery {
    width: 2.9rem;
}

.gashapon-wrapper .gashapon-btns .gashapon-share {
    width: 1.57rem;
    top: .46rem;
    left: 3.3rem;
}

/*测试*/
.pager3 .tect {
    display: flex;
    justify-content: center;
    /* margin-top: .67rem; */
}

.pager3 .tect .tect-left {
    width: 1.27rem;
    height: 7.07rem;
    background: url('../image/bg-tect-active.png') no-repeat;
    background-size: 100%;
    margin-right: .2rem;
}

.pager3 .tect .tect-left ul {
    width: .89rem;
    margin: .62rem auto 0;
}

.pager3 .tect .tect-left ul li {
    text-align: center;
    width: .89rem;
    height: .85rem;
    margin-bottom: .12rem;
    opacity: .5;
}

.pager3 .tect .tect-left ul li:last-child {
    margin-bottom: 0;
}

.pager3 .tect .tect-left ul li.active {
    opacity: 1;
}

.pager3 .tect .tect-right {
    margin-top: .61rem;
    width: 9.58rem;
    height: 5.75rem;
    background: url('../image/bg-tect.png') no-repeat;
    background-size: 100%;
}

.pager3 .tect .tect-right ul {
    margin: 1.4rem auto 0;
}

.pager3 .tect .tect-right ul li {
    width: 7.56rem;
    height: .57rem;
    position: relative;
    margin: 0 auto .25rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.tect .tect-right ul li div {
    display: flex;
    align-items: center;
}

.tect .tect-right ul li div:first-child {
    position: absolute;
    right: 1.3rem;
    transform: translateY(-55%);
    top: 50%;
}

.tect .tect-right ul li div:last-child {
    position: absolute;
    right: -.2rem;
    transform: translateY(-55%);
    top: 50%;
}

.tect .tect-right ul li input {
    z-index: 2;
    cursor: pointer;
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.tect .tect-right ul li label {
    display: block;
    width: .36rem;
    height: .36rem;
}

.tect .tect-right ul li:first-child {
    background: url('../image/tect-text1.png') no-repeat;
    background-size: 100%;
}

.tect-right ul li:first-child input[type='radio']+label::before {
    content: '';
    display: block;
    width: .25rem;
    height: .25rem;
    background: url(../image/tect-check1.png) no-repeat;
    background-size: 100%;
    margin: 0;
}

.tect-right ul li:first-child input[type='radio']:checked+label::before {
    content: '';
    display: block;
    background: url(../image/tect-check-active1.png) no-repeat;
    background-size: 100%;
    width: 0.36rem;
    height: 0.35rem;
    margin-top: -0.09rem;
    margin-left: -0.05rem;
}

.tect .tect-right ul li:nth-child(2) {
    background: url('../image/tect-text2.png') no-repeat;
    background-size: 100%;
}

.tect-right ul li:nth-child(2) input[type='radio']+label::before {
    content: '';
    display: block;
    width: .25rem;
    height: .25rem;
    background: url(../image/tect-check2.png) no-repeat;
    background-size: 100%;
    margin: 0;
}

.tect-right ul li:nth-child(2) input[type='radio']:checked+label::before {
    content: '';
    display: block;
    background: url(../image/tect-check-active2.png) no-repeat;
    background-size: 100%;
    width: 0.36rem;
    height: 0.35rem;
    margin-top: -0.08rem;
    margin-left: -0.05rem;
}

.tect .tect-right ul li:nth-child(3) {
    background: url('../image/tect-text3.png') no-repeat;
    background-size: 100%;
}

.tect-right ul li:nth-child(3) input[type='radio']+label::before {
    content: '';
    display: block;
    width: .25rem;
    height: .25rem;
    background: url(../image/tect-check3.png) no-repeat;
    background-size: 100%;
    margin: 0;
}

.tect-right ul li:nth-child(3) input[type='radio']:checked+label::before {
    content: '';
    display: block;
    background: url(../image/tect-check-active3.png) no-repeat;
    background-size: 100%;
    width: 0.36rem;
    height: 0.35rem;
    margin-top: -0.09rem;
    margin-left: -0.05rem;
}

.tect .tect-right ul li:nth-child(4) {
    width: 7.34rem;
    height: .42rem;
    background: url('../image/tect-text4.png') no-repeat;
    background-size: 100%;
    transform: translateX(-0.1rem);
}

.tect .tect-right ul li:nth-child(4) div:first-child {
    right: 1.1rem;
    transform: translateY(-40%);
}

.tect .tect-right ul li:nth-child(4) div:last-child {
    right: -0.42rem;
    transform: translateY(-40%);
}

.tect-right ul li:nth-child(4) input[type='radio']+label::before {
    content: '';
    display: block;
    width: .25rem;
    height: .25rem;
    background: url(../image/tect-check4.png) no-repeat;
    background-size: 100%;
    margin: 0;
}

.tect-right ul li:nth-child(4) input[type='radio']:checked+label::before {
    content: '';
    display: block;
    background: url(../image/tect-check-active4.png) no-repeat;
    background-size: 100%;
    width: 0.36rem;
    height: 0.35rem;
    margin-top: -0.09rem;
    margin-left: -0.05rem;
}

.tect-right .tect-btnList {
    display: flex;
    justify-content: center;
}

.tect-right .tect-btnList .tect-btn {
    margin-top: .1rem;
    width: 2.14rem;
    height: .56rem;
    cursor: pointer;
}

.tect-right .tect-btnList .tect-btn1 {
    background: url(../image/btn-tect-1.png) no-repeat;
    background-size: 100%;
    margin-right: .32rem;
}

.tect-right .tect-btnList .tect-btn2 {
    background: url(../image/btn-tect-2.png) no-repeat;
    background-size: 100%;
}

.tect2 {
    margin: 0 auto;
    width: 13.32rem;
    height: 5.68rem;
    position: relative;
}

.tect2.yellow {
    background: url(../image/character/bg-yellow.png) no-repeat;
    background-size: 100%;
}

.tect2.blue {
    background: url(../image/character/bg-blue.png) no-repeat;
    background-size: 100%;
}

.tect2.greer {
    background: url(../image/character/bg-greer.png) no-repeat;
    background-size: 100%;
}

.tect2.purple {
    background: url(../image/character/bg-purple.png) no-repeat;
    background-size: 100%;
}

.tect2 .tect2-info {
    width: 4.11rem;
    height: 3.27rem;
    position: absolute;
    right: 1.7rem;
    top: 1.2rem;
}

.tect2 .tect2-text {
    width: 4.46rem;
    height: 3.41rem;
    position: absolute;
    left: -0.9rem;
    bottom: -2rem;
}

.tect2 .tect2-btnList {
    display: flex;
    position: absolute;
    left: 50%;
    bottom: -1rem;
    transform: translateX(-50%);
}

.tect2 .tect2-btnList .tect2-btn {
    width: 2.47rem;
    height: .59rem;
    cursor: pointer;
}

.tect2 .tect2-btnList .tect2-btn1 {
    margin-right: .34rem;
}

.tect2-btnList .tect2-btn1.yellow {
    background: url(../image/character/btn-yellow.png) no-repeat;
    background-size: 100%;
}

.tect2-btnList .tect2-btn1.blue {
    background: url(../image/character/btn-blue.png) no-repeat;
    background-size: 100%;
}

.tect2-btnList .tect2-btn1.purple {
    background: url(../image/character/btn-purple.png) no-repeat;
    background-size: 100%;
}

.tect2-btnList .tect2-btn1.greer {
    background: url(../image/character/btn-greer.png) no-repeat;
    background-size: 100%;
}

.tect2 .tect2-btnList .tect2-btn2 {
    background: url(../image/character/btn-black.png) no-repeat;
    background-size: 100%;
}

.pager3 .lottery-btns .order-btn {
    background: url(../images/order-btn.png) no-repeat;
    background-size: 100%;
    height: 0.71rem;
    width: 2.02rem;
    position: absolute;
    top: 7.92rem;
    left: 6.45rem;
}

.pager3 .lottery-btns .order-btn.finish {
    background: url(../images/order-btn-finish.png) no-repeat;
    background-size: 100%;
    height: 0.53rem;
    width: 1.86rem;
    position: absolute;
    top: 8.1rem;
    left: 6.61rem;
    pointer-events: none;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

.pager3 .lottery-btns .lounge-btn {
    background: url(../images/tolounge-btn.png) no-repeat;
    background-size: 100%;
    height: 0.71rem;
    width: 2.02rem;
    position: absolute;
    top: 7.92rem;
    left: 8.55rem;
}

.pager3 .lottery-btns .lounge-btn.finish {
    position: absolute;
    background: url(../images/tolounge-btn-finish.png) no-repeat;
    background-size: 100%;
    height: 0.53rem;
    width: 1.86rem;
    top: 8.105rem;
    left: 8.71rem;
    pointer-events: none;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

.pager3 .lottery-btns .award-btn {
    background: url(../images/award-btn.png) no-repeat;
    background-size: 100%;
    height: 0.53rem;
    width: 1.86rem;
    margin: 0.175rem 0.159rem;
    position: absolute;
    top: 7.92rem;
    left: 10.65rem;
}

.flip-item {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
    /* 元素变形的原点 */
    transform-origin: center;
    /* 背部可见 翻转更立体 */
    backface-visibility: visible;
}

.item-front,
.item-back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

/* 卡片前面内容 */
.item-front {
    z-index: 2;
    width: 2.04rem;
    height: 3.42rem;
    top: .5rem;
    opacity: 0.5;
}

/* .item-front::after {
    content: '';
    position: absolute;
    width: 1.8rem;
    height: 3.22rem;
    box-shadow: 0px 0px 20px #fff61b;
    left: 0.1rem;
    top: 0.1rem;
} */
.item-front p {
    position: absolute;
    width: 1.8rem;
    height: 3.3rem;
    animation: myfirst 3s infinite;
    box-shadow: 0px 0px 60px #fff61b;
    margin: 0px;
    content: '';
    z-index: -1;
    transition: 3s linear;
    top: 0.1rem;
    left: 0.05rem;
}

@keyframes myfirst {
    0% {
        transform: scale(0.8);
        -o-transform: scale(0.8);
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
    }

    50% {
        transform: scale(1);
        -o-transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
    }

    100% {
        transform: scale(0.8);
        -o-transform: scale(0.8);
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
    }
}

/* 卡片后面内容 */
.item-back {
    transform: rotateY(180deg);
    width: 3.97rem;
    height: 5.97rem;
    top: .2rem;
    left: -0.2rem;
    /* background: url(../images/poker-1.png) no-repeat;
    background-size: 100%; */
    background-color: red;
}

.flip-container {
    perspective: 1000;
}

/* :hover翻转180度 */
/* .flip-container:hover .flip-item, .flip-container.hover .flip-item {
    transform: rotateY(180deg);
    animation: animal 2s;
} */
.flip-container {
    /* opacity: 0.5; */
    top: 0.5rem;
    left: 0.3rem;
}

/* 中间卡牌 */
.poker-wrapper .swiper-slide-next {
    /* opacity: 1; */
    /* left: -0.55rem; */
    /* top: -0.1rem !important; */
    /* left: 1.2rem; */
}

.poker-wrapper .swiper-slide-prev {
    /* left: -1.2rem; */
}

.swiper-slide-next .item-front {
    width: 3.24rem;
    height: 5.44rem;
    top: .1rem;
    left: 0.3rem;
}

.swiper-slide-next .item-front.active {
    width: 3.24rem;
    height: 5.44rem;
    top: .1rem;
    left: 0.3rem;
    opacity: 1;
}

.swiper-slide-next .item-front.active::after {
    content: '';
    position: absolute;
    width: 3rem;
    height: 5.04rem;
    top: 0.2rem;
    left: 0.05rem;
    box-shadow: 0px 0px 20px #fff61b;
}

.swiper-slide-next .back {
    width: 4rem;
    height: 6rem;
    top: .1rem;
    left: -0.36rem;
}

.poker-light {
    background: url(../images/poker-light-bg.png) no-repeat;
    background-size: 100%;
    width: 7.71rem;
    height: 5.01rem;
    position: absolute;
    top: 7.8rem;
    left: 5.5rem;
}

.poker-star {
    position: absolute;
    top: 9.4rem;
    left: 8rem;
    z-index: 10;
    pointer-events: none;
    /* background-color: brown; */
}

.poker-star ul {
    display: flex;
    flex-direction: row;
    list-style: none;
}

.poker-star .poker-star1 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    left: 1.4rem;
    top: -4.1rem;
    animation: pokerstar 3s ease-in-out infinite;
}

.poker-star .poker-star2 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: -4.2rem;
    left: -0.3rem;
    animation: pokerstar 3s 2s infinite ease-out;
}

.poker-star .poker-star3 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: -.5rem;
    left: 3rem;
    animation: pokerstar 3s 3s infinite ease-out;
}

.poker-star .poker-star4 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: -0.1rem;
    left: 2.5rem;
    animation: pokerstar 4s infinite ease-out;
}

.poker-star .poker-star5 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: -.5rem;
    left: -2rem;
    animation: pokerstar 4s infinite ease-out;
}

.poker-star .poker-star6 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: -2.5rem;
    left: -3rem;
    animation: pokerstar 3s 4s infinite ease-out;
}

.poker-star .poker-star7 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: 0.5rem;
    left: -3.8rem;
    animation: pokerstar 3s 3s infinite ease-out;
}

.poker-star .poker-star8 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: -2rem;
    left: -2.8rem;
    animation: pokerstar 2s 1s infinite ease-out;
}

.poker-star .poker-star9 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    left: 4rem;
    top: -4.9rem;
    animation: pokerstar 2s 1s infinite ease-out;
}

@keyframes pokerstar {
    0% {
        transform: scale(0.8);
        /*开始为原始大小*/
        opacity: 0.4;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0.8);
        opacity: 0.4;
    }
}

@keyframes pokerstar2 {
    0% {
        transform: scale(1) translate(0rem, 2.50rem);
        -webkit-transform: scale(1) translate(0rem, 2.50rem);
        opacity: 1;
    }

    100% {
        transform: scale(0.1) translate(0, 0);
        -webkit-transform: scale(0.1) translate(0, 0);
        opacity: 0.5;
    }
}

@keyframes pokerstar3 {
    0% {
        transform: scale(1) translate(-1rem, 2.50rem);
        -webkit-transform: scale(1) translate(-1rem, 2.50rem);
        opacity: 1;
    }

    100% {
        transform: scale(0.1) translate(0, 0);
        -webkit-transform: scale(0.1) translate(0, 0);
        opacity: 0.5;
    }
}

@keyframes pokerstar4 {
    0% {
        transform: scale(1) translate(-0.5rem, 2.50rem);
        -webkit-transform: scale(1) translate(-0.5rem, 2.50rem);
        opacity: 1;
    }

    100% {
        transform: scale(0.1) translate(0, 0);
        -webkit-transform: scale(0.1) translate(0, 0);
        opacity: 0.5;
    }
}

.poker-btn {
    position: relative;
    left: 4.92rem;
    top: -0.6rem;
}

.poker-btn a {
    margin-left: 0.2rem;
}

.poker-btn .btn-award-img {
    width: 2.75rem;
    height: 0.67rem;
    background: url("../images/btn-award-img.png");
    background-size: 100%;
}

.poker-btn .btn-detail-img {
    width: 2.75rem;
    height: 0.67rem;
    background: url(../images/btn-detail-img.png);
    background-size: 100%;
}

.poker-btn .btn-rule-img {
    width: 2.75rem;
    height: 0.67rem;
    background: url(../images/btn-rule-img.png);
    background-size: 100%;
}

.poker-btn .lottery-share {
    width: 1.23rem;
    height: 0.62rem;
    position: absolute;
    left: 5.3rem;
    top: 13rem;
    z-index: 1;
}

.poker-btn .lottery-share-draw {
    width: 0.61rem;
    height: 0.28rem;
    position: absolute;
    left: 5.05rem;
    top: 12.85rem;
    z-index: 2;
}

.poker-screen {
    height: 100%;
}

.roll>li {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 0.35rem;
    color: #DAC09C;
}

.roll-text {
    color: #D9AB36;
}

.gray {
    color: gray;
}

.roll-phone {
    color: #C35310;
    padding-right: 0.2rem;
}

#roll-slide {
    width: 11.36rem;
    height: 0.35rem;
    position: absolute;
    /* top: 15.75rem; */
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    background: url(../images/roll-slide.png) no-repeat;
    background-size: 100%;
    bottom: 1.2rem;
    /* height:45px; */
    overflow: hidden;
    text-align: center;
}

.header-select>a {
    height: 0.68rem;
}

.poker-screen .lottery-slide {
    /* width: 8.86rem;
    height: 0.4rem; */
    position: absolute;
    /* top: 15.75rem; */
    left: 5.1rem;
    white-space: nowrap;
    background: url(../images/lottery-slide-img.png) no-repeat;
    background-size: 100%;
    bottom: 1.5rem;
    height: 45px;
    overflow: hidden;
    width: 3rem;
    border: solid 1px;
    text-align: center;
}

.poker-screen .lottery-slide-list li {
    display: inline;
    padding-left: 0.2rem;
    color: #DAC09C;
}

.poker-screen .lottery-slide-list {
    position: relative;
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.2rem;
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    -moz-animation: my-animation 15s linear infinite;
    -webkit-animation: my-animation 15s linear infinite;
    animation: my-animation 15s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
    from {
        -moz-transform: translateX(100%);
    }

    to {
        -moz-transform: translateX(-100%);
    }
}

/* for Chrome */
@-webkit-keyframes my-animation {
    from {
        -webkit-transform: translateX(100%);
    }

    to {
        -webkit-transform: translateX(-100%);
    }
}

@keyframes my-animation {
    from {
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(0%);
    }

    to {
        -moz-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-74%);
    }
}

.lottery-slide-list li {
    display: inline;
    padding-left: 0.2rem;
    color: #ffffff;
}

.lottery-slide-list li .reward-list-user {
    color: #C35310;
}

.lottery-slide-list li .reward-list-award {
    color: #D9AB36;
}

.poker-btn .lottery-start {
    width: 4.51rem;
    height: 1.29rem;
    position: absolute;
    left: 7.1rem;
    top: 5.5rem;
    z-index: 1;
}

.poker-btn .lottery-mycard {
    width: 1.8rem;
    height: 2.1rem;
    position: absolute;
    left: 12.3rem;
    z-index: 1;
}

.poker-real {
    width: 11.00rem;
    height: 5rem;
    position: absolute;
    top: 13.2rem;
    left: 3.85rem;
    background: url(../images/poker-real-bg.png) no-repeat;
    background-size: 100%;
}

.poker-real .poker-number {
    text-align: center;
    position: absolute;
    top: 1.65rem;
    left: 2.25rem;
    width: 2rem;
    text-align: center;
}

.poker-real .poker-number span {
    font-size: 1rem;
    -webkit-text-size-adjust: none;
    font-weight: 700;
    margin-left: 0.1rem;
    background-image: -webkit-linear-gradient(top, #fcdb92, #fefaf1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.poker-real .poker-diamond {
    position: absolute;
    top: 1.65rem;
    left: 6.7rem;
    width: 2rem;
    text-align: center;
}

.poker-real .poker-diamond span {
    font-size: 1rem;
    -webkit-text-size-adjust: none;
    font-weight: 700;
    margin-left: 0.1rem;
    background-image: -webkit-linear-gradient(top, #fcdb92, #fefaf1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.poker-explain {
    width: 1.06rem;
    height: 0.38rem;
    position: absolute;
    top: 3.4rem;
    left: 6.8rem;
}

.poker-dec {
    width: 5.19rem;
    height: 0.63rem;
    position: absolute;
    top: 15.5rem;
    left: 4rem;
}

.lottery .title {
    text-align: center;
    /* height: .94rem; */
    width: 100%;
}

.zoom {
    -webkit-animation: pulse 1s infinite;
    -o-animation: pulse 1s infinite;
    animation: pulse 1s infinite;
}
.zoom2 {
    -webkit-animation: pulse 1.5s infinite;
    -o-animation: pulse 1.5s infinite;
    animation: pulse 1.5s infinite;
}
.zoom3 {
    -webkit-animation: pulse 2.3s infinite;
    -o-animation: pulse 2.3s infinite;
    animation: pulse 2.3s infinite;
}
.zoom4 {
    -webkit-animation: pulse 2.2s infinite;
    -o-animation: pulse 2.2s infinite;
    animation: pulse 2.2s infinite;
}

.tiny-zoom {
    -webkit-animation: tinyScale 1s infinite;
    -o-animation: tinyScale 1s infinite;
    animation: tinyScale 1s infinite;
}

#lottery a.lottery-share {
    width: 1.88rem;
    position: absolute;
    top: 1rem;
    left: 1.5rem;
}

#lottery a.btn-query {
    width: 1.44rem;
    position: absolute;
    top: .55rem;
    left: 5.8rem;
    z-index: 3;
}

#lottery a.btn-query img {
    width: 1.44rem;
}

.lottery-btn .lottery-start .lottery-start-bg {
    width: 2.2rem;
    position: absolute;
    top: -3rem;
    left: 0.2rem;
    z-index: -1;
}

.lottery-start-bg.shaking {
    -webkit-animation: swing 1s linear infinite;
    animation: swing 1s linear infinite;
}

.lottery .lottery-hint {
    margin-top: .2rem;
}

.lottery .lottery-hint img {
    height: .42rem;
    width: auto;
}

/*视频*/
/* .video{
    padding-bottom: 1.0rem;
    overflow: hidden;
    font-size: 0;
}
.video-info{
    width: 16.52rem;
    height: 7.02rem;
    margin-top: .27rem;
    position: relative;
    background: url("../images/video-bg.png") no-repeat;
    background-size: 100%;
}
.video-info:before{
    content: '';
    width: 12.58rem;
    height: 6.40rem;
    position: absolute;
    top: .53rem;
    left: 2.22rem;
    background: url("../images/video-screen.png") no-repeat;
    background-size: 100%;
}
.video-swiper{
    width: 8.59rem;
    height: 5.42rem;
    margin: .65rem 0 0 4.60rem;
    position: relative;
}
.video-swiper .swiper-slide .play{
    width: 100%;
    height: 100%;
    z-index: 1;
}
.video-swiper .swiper-slide .youtube{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0rem;
    top: 0rem;
    display: none;
    z-index: 3;
}
.video-swiper-pagination{
    position: absolute;
    top: .88rem;
    right: 1.3rem;
}
.video-swiper-pagination .swiper-pagination-bullet{
    width: .36rem;
    height: 3.42rem;
    margin: 0rem .1rem;
    position: relative;
    opacity: 1;
    border-radius: 0;
}
.video-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
    top: -.2rem;
}
.video-swiper-pagination .swiper-pagination-bullet:first-child{
    background: url("../images/video-s-1.png") no-repeat;
    background-size: 100%;
}
.video-swiper-pagination .swiper-pagination-bullet:nth-child(2){
    background: url("../images/video-s-2.png") no-repeat;
    background-size: 100%;
}
.video-swiper-pagination .swiper-pagination-bullet:nth-child(3){
    background: url("../images/video-s-3.png") no-repeat;
    background-size: 100%;
} */
/* 邀请好友 */
.invite {
    overflow: hidden;
    margin-top: 2.0rem;
}

.invite .title {
    width: 8.49rem;
    height: 2.59rem;
    margin: 0 auto;
}

.invite .title img {
    /* width: 4.83rem;
    height: 1.22rem; */
}

.invite-info {
    display: block;
}

.invite-info .swiper-container {
    width: 12rem;
    height: 7.2rem;
    position: relative;
    margin: 0 auto;
    overflow: initial;
}

.invite .invite-tip {
    font-size: .3rem;
}

.invite #yournumber {
    height: .5rem;
    width: 4.6rem;
    font-size: .29rem;
    margin-left: 0.2rem;
    margin-top: .14rem;
    padding-left: 1.14rem;
    /* border-radius: .12rem; */
    text-align: center;
    border: 0;
    color: #ffffff;
    background-color: inherit;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.invite .btn-copy3 {
    position: absolute;
    top: -0.05rem;
    left: 6.4rem;
    display: block;
}

.invite .btn-copy3 img {
    width: 3.02rem;
    height: 0.91rem;
}

.invite .btn-copy3::after {
    /* content: '';
    display: block;
    width: 1.9rem;
    height: 2.45rem;
    background: url(../images/invite-copy-tiger.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: -1.3rem;
    right: -.5rem;
    z-index: -1; */
}

.invite .btn-share4 {
    position: absolute;
    top: -.7rem;
    left: 7.4rem;
}

.invite .btn-share4 img {
    width: 2.03rem;
}

.invite .invite-tip2 {
    width: 2.5rem;
    height: .57rem;
    background: url("../images/invite-bar.png") no-repeat;
    background-size: 100%;
    position: relative;
    margin: 0 auto;
    margin-top: 0.8rem;
}

.invite #invite-num {
    font-size: .5rem;
    font-weight: 700;
    color: #fff;
    position: absolute;
    top: -0.3rem;
    left: .9rem;
    text-align: center;
    width: 0.7rem;
}

.invite .invite-query-btn {
    position: absolute;
    top: 0.54rem;
    right: 1.2rem;
    cursor: pointer;
}

.invite .invite-query-btn img {
    width: 1rem;
    height: .24rem;
}

.invite .invite-text-box {
    width: 6.13rem;
    height: .8rem;
    background: url(../images/invite-text-bg.png) no-repeat;
    background-size: 100%;
    margin-top: 1rem;
    margin-left: 1.1rem;
    position: relative;
}

/* .invite .invite-text-box::before {
    content: '';
    display: block;
    width: 3.63rem;
    height: 6.92rem;
    background: url(../images/invite-girl.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: -2.4rem;
    left: -3rem;
    z-index: -1;
} */
.invite .invite-role-bg {
    position: absolute;
    right: -1.3rem;
    top: 1.23rem;
    z-index: -1;
}

.invite .invite-role-bg .invite-role-big {
    width: 7.04rem;
}

.invite .invite-role-bg .invite-role-cute {
    width: 1.78rem;
}

.invite .invite-role-cute {
    width: 1.64rem;
    position: absolute;
    bottom: 0.3rem;
    right: 3.1rem;
}

.invite .invite-ul {
    width: 9.41rem;
    height: 3.26rem;
    text-align: center;
    position: relative;
    left: -0.6rem;
    background: url(../images/invite-ul-bg.png) no-repeat;
    background-size: 100%;
}

.invite .invite-ul li {
    /* font-size:0; 去除图片间隙 */
    font-size: 0;
    display: inline-block;
    position: absolute;
}

.invite .invite-ul li:nth-of-type(1) {
    left: 0.8rem;
    top: 0.75rem;
}

.invite .invite-ul li:nth-of-type(3) {
    left: 8.5rem;
    top: 0.3rem;
}

.invite .invite-ul li:nth-of-type(1) .invite-1 {
    width: 3.34rem;
}

.invite .invite-ul li:nth-of-type(1) .invite-1-finish {
    width: 3.45rem;
}

.invite .invite-ul li:nth-of-type(2) img {
    width: 3.16rem;
}

.invite-ul li:nth-of-type(3) img:nth-of-type(1) {
    width: 3.61rem;
}

.invite-ul li:nth-of-type(4) img:nth-of-type(1) {
    /* width: 2.93rem; */
}

.invite .invite-ul li span {
    font-size: .24rem;
}

.invite .invite-ul li:nth-of-type(2) {
    left: 4.5rem;
    top: 0.53rem;
}

.invite .invite-ul li:nth-of-type(4) {
    left: 8.9rem;
    top: -0.36rem;
}

.invite-ul li .invite-finish-mark {
    position: absolute;
    width: 2.73rem;
    display: none;
    left: 0rem;
    top: 0;
}

.invite-ul li:nth-of-type(2) .invite-finish-mark {
    width: 3.16rem;
}

.invite-ul li:nth-of-type(3) .invite-finish-mark {
    width: 3.61rem;
}

.invite-ul li:nth-of-type(4) .invite-finish-mark {
    top: .5rem;
    right: .43rem;
}

.invite-draw {
    position: absolute;
    width: .63rem;
    top: 3.5rem;
    left: 1.8rem;
}

.invite-ul li .active {
    display: block;
}

.invite .invite-hint {
    width: 5.51rem;
    text-align: center;
    position: absolute;
    top: 6.25rem;
    left: 3rem;
}

/* 文案板塊 */
.some-text .text-hint {
    width: 5.12rem;
    height: 1.03rem;
    background: url(../images/text-hint.png) no-repeat;
    background-size: 100%;
    margin: 0 auto;
    margin-bottom: 2.4rem;
}

/* 女神阵营 */
.goddesses {
    height: 11rem;
}

.goddesses .title {
    height: .94rem;
}

.goddesses-info .goddesses-container {
    width: 10.42rem;
    height: 9.05rem;
    background: url(../images/goddesses-bg.png) no-repeat;
    background-size: 100%;
    margin: 0 auto;
    position: relative;
}

.goddesses-container .goddesses-pointer {
    width: .73rem;
    height: .73rem;
    background: url(../images/goddesses-pointer.png) no-repeat;
    background-size: 100%;
    position: absolute;
    cursor: pointer;
}

.goddesses-container .goddesses-pointer.goddesses-pointer-waist {
    top: 2.8rem;
    left: 4.2rem;
}

.goddesses-container .goddesses-pointer.goddesses-pointer-heart {
    top: 2.5rem;
    left: 6.36rem;
}

.goddesses-container .goddesses-pointer.goddesses-pointer-knee_1 {
    top: 3.83rem;
    left: 1.97rem;
}

.goddesses-container .goddesses-pointer.goddesses-pointer-knee_2 {
    top: 6.24rem;
    left: 5.8rem;
}

/* 武器专精 */
.weapons {
    height: 17.8rem;
}

.weapons .title:nth-of-type(1) {
    height: .94rem;
}

.weapons .title:nth-of-type(2) {
    margin-top: .5rem;
    height: .59rem;
}

.weapons .swiper-container {
    overflow: visible;
}

.weapons .weapons-info {
    width: 9.9rem;
    height: 8.79rem;
    margin: 0 auto;
    margin-top: 0.1rem;
    background: url("../images/weapons-bg.png") no-repeat;
    background-size: 100%;
    position: relative;
}

.weapons-swiper .swiper-slide .weapons-pic {
    width: 11.88rem;
    position: absolute;
    top: -.7rem;
    left: -0.36rem;
}

.weapons-swiper .swiper-slide.swiper-slide-active .weapons-pic {
    -webkit-animation: fadeInRight .2s .2s;
    -o-animation: fadeInRight .2s .2s;
    animation: fadeInRight .2s .2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.weapons-swiper .swiper-slide .weapons-intro {
    width: 10.26rem;
    position: absolute;
    left: 0.1rem;
    top: 7rem;
}

.weapons-swiper .swiper-slide img {
    width: 100%;
}

.weapons-info .weapons-swiper-button-prev {
    position: absolute;
    width: 1.05rem;
    height: 1.49rem;
    background: url("../images/weapons-prev.png") no-repeat;
    background-size: 100%;
    top: 3.1rem;
    left: -1.2rem;
    z-index: 1;
    cursor: pointer;
}

.weapons-info .weapons-swiper-button-next {
    position: absolute;
    width: 1.05rem;
    height: 1.49rem;
    background: url("../images/weapons-next.png") no-repeat;
    background-size: 100%;
    top: 3.1rem;
    left: 9.9rem;
    z-index: 1;
    cursor: pointer;
}

.weapons-swiper-pagination {
    position: relative;
    top: .8rem;
    left: -4.6rem;
}

.weapons-swiper-pagination .swiper-pagination-bullet {
    width: 1.26rem;
    height: 1.24rem;
    border-radius: 0;
    opacity: 1;
    position: absolute;
    z-index: 1;
}

.weapons-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    /* width: 3.64rem;
    height: 2.09rem; */
    z-index: 0;
}

.weapons-swiper-pagination .swiper-pagination-bullet:nth-of-type(1) {
    background: url("../images/weapons-s-1.png") no-repeat;
    background-size: 100%;
}

.weapons-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:nth-of-type(1) {
    background: url("../images/weapons-s-1-active.png") no-repeat;
    background-size: 100%;
}

.weapons-swiper-pagination .swiper-pagination-bullet:nth-of-type(2) {
    background: url("../images/weapons-s-2.png") no-repeat;
    background-size: 100%;
    top: .96rem;
    left: 4.6rem;
}

.weapons-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:nth-of-type(2) {
    background: url("../images/weapons-s-2-active.png") no-repeat;
    background-size: 100%;
}

.weapons-swiper-pagination .swiper-pagination-bullet:nth-of-type(3) {
    background: url("../images/weapons-s-3.png") no-repeat;
    background-size: 100%;
    top: 1.96rem;
    left: 4.44rem;
}

.weapons-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:nth-of-type(3) {
    background: url("../images/weapons-s-3-active.png") no-repeat;
    background-size: 100%;
}

.weapons-swiper-pagination .swiper-pagination-bullet:nth-of-type(4) {
    background: url("../images/weapons-s-4.png") no-repeat;
    background-size: 100%;
    top: 2.96rem;
    left: 4.48rem;
}

.weapons-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:nth-of-type(4) {
    background: url("../images/weapons-s-4-active.png") no-repeat;
    background-size: 100%;
}

.weapons-swiper-pagination .swiper-pagination-bullet:nth-of-type(5) {
    background: url("../images/weapons-s-5.png") no-repeat;
    background-size: 100%;
    top: 3.96rem;
    left: 4.7rem;
}

.weapons-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:nth-of-type(5) {
    background: url("../images/weapons-s-5-active.png") no-repeat;
    background-size: 100%;
}

.weapons-swiper-pagination .swiper-pagination-bullet:nth-of-type(6) {
    background: url("../images/weapons-s-6.png") no-repeat;
    background-size: 100%;
    top: 4.86rem;
    left: 5.1rem;
}

.weapons-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:nth-of-type(6) {
    background: url("../images/weapons-s-6-active.png") no-repeat;
    background-size: 100%;
}

.create-role-info {
    position: relative;
    top: 9.7rem;
}

.weapons .create-role-info .title {
    height: .5rem;
}

.create-role-info .create-role-container {
    position: relative;
    width: 9.19rem;
    height: 5.82rem;
    background: url(../images/create-role-bg.png) no-repeat;
    background-size: 100%;
    margin: 0 auto;
    top: 0rem;
}

.create-role-container .create-role-input {
    width: 4.8rem;
    height: .5rem;
    background: #fff;
    vertical-align: middle;
    border: 0 solid #ffffff;
    font-size: .28rem;
    font-weight: 700;
    color: #454545;
    text-align: center;
    text-align-last: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    top: 1.66rem;
    left: 2.8rem;
}

.create-role-container .create-role-sel {
    width: 4.8rem;
    height: .5rem;
    padding-left: 1%;
    display: inline-block;
    vertical-align: middle;
    background: #fff url(../images/order-select.png) no-repeat 93% center;
    background-size: .21rem .14rem;
    border: 0 solid #ffffff;
    font-size: .28rem;
    font-weight: 700;
    color: #454545;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align-last: center;
    position: absolute;
    top: 2.55rem;
    left: 2.8rem;
}

.weapons-bottom {
    position: relative;
    top: 2.3rem;
}

.weapons-bottom .create-role,
.weapons-bottom .create-role-done {
    position: absolute;
    z-index: 1;
    width: 4.01rem;
    height: .98rem;
    top: 5.26rem;
    left: 3rem;
}

.weapons-bottom .weapon-hint {
    position: absolute;
    width: 3.91rem;
    top: 9rem;
    left: 2.9rem;
}

/* 選中 */
.weapons-swiper .weapon-selected {
    position: absolute;
    top: 7.5rem;
    left: 7.36rem;
    width: 1rem;
    height: 1rem;
    background: url("../images/weapon-select.png") no-repeat;
    background-size: 100%;
}

.weapons-swiper .weapon-selected.active {
    background-image: url("../images/weapon-select-active.png");
}

/* 同盟板塊 */
.team {
    position: relative;
    height: 100%;
}

.team .title {
    height: 2.5rem;
}

.team .title img {
    margin: 0.47rem 0;
    width: 6.86rem;
    height: 2.19rem;
}

.team-fb-login {
    width: 3.83rem;
    height: 1rem;
    position: absolute;
    left: 7.5rem;
    top: 2.6rem;
    z-index: 1;
}

.team-fb-login-over {
    width: 3.83rem;
    position: absolute;
    left: 7.5rem;
    top: 2.6rem;
}

.team .team-activity {
    position: relative;
    width: 8.09rem;
    top: 0.58rem;
    left: 5.4rem;
}

.team .award-content {
    position: relative;
    width: 8.92rem;
    height: 4.51rem;
    top: 0.7rem;
    left: 4.92rem;
}

.team .award-content .activity-btn {
    position: relative;
    width: 1.34rem;
    height: 0.3rem;
    top: -0.38rem;
    left: 9rem;
}

.team .award-content .activity-btn img {
    width: 1.34rem;
    height: 0.3rem;
}

.team .team-container {
    position: relative;
    width: 11.06rem;
    height: 5.87rem;
    top: 1rem;
    background: url("../images/team-container-bg.png") no-repeat;
    background-size: 100%;
}

.team .team-container-btns {
    position: relative;
    top: 0.12rem;
    left: 1rem;
}

.team .create-team-img {
    position: relative;
    width: 2.97rem;
    height: 1.01rem;
}

.team .join-team-img {
    position: relative;
    width: 2.97rem;
    height: 1.01rem;
}

.team .my-team-img {
    position: relative;
    width: 2.97rem;
    height: 1.01rem;
}

.team .team-gift-ul {
    position: absolute;
    z-index: 1;
    left: -1rem;
    top: 0.3rem;
}

.team-gift-ul li {
    display: inline-block;
    position: absolute;
    cursor: pointer;
}

.team-gift-ul li:nth-of-type(1) {
    width: 2.89rem;
    height: 4.27rem;
    background: url("../images/team-flag-1.png") no-repeat;
    background-size: 100%;
    left: 0.1rem;
}

.team-gift-ul li:nth-of-type(1):hover {
    width: 3.33rem;
    height: 4.49rem;
    background: url("../images/team-flag-1-active.png") no-repeat;
    background-size: 100%;
    left: -0.12rem;
}

.team-gift-ul li:nth-of-type(2) {
    width: 2.87rem;
    height: 5.03rem;
    background: url("../images/team-flag-2.png") no-repeat;
    background-size: 100%;
    left: 2rem;
    top: 0.25rem;
}

.team-gift-ul li:nth-of-type(2):hover {
    width: 3.31rem;
    height: 5.25rem;
    background: url("../images/team-flag-2-active.png") no-repeat;
    background-size: 100%;
    left: 1.78rem;
}

.team-gift-ul li:nth-of-type(3) {
    width: 2.87rem;
    height: 4.09rem;
    background: url("../images/team-flag-3.png") no-repeat;
    background-size: 100%;
    left: 4rem;
    top: 0.35rem;
}

.team-gift-ul li:nth-of-type(3):hover {
    width: 3.31rem;
    height: 4.31rem;
    background: url("../images/team-flag-3-active.png") no-repeat;
    background-size: 100%;
    left: 3.78rem;
}

.team-gift-ul li:nth-of-type(4) {
    width: 2.87rem;
    height: 4.9rem;
    background: url("../images/team-flag-4.png") no-repeat;
    background-size: 100%;
    left: 6rem;
    top: 0.38rem;
}

.team-gift-ul li:nth-of-type(4):hover {
    width: 3.31rem;
    height: 5.12rem;
    background: url("../images/team-flag-4-active.png") no-repeat;
    background-size: 100%;
    left: 5.78rem;
}

.team-gift-ul li:nth-of-type(5) {
    width: 2.87rem;
    height: 4.16rem;
    background: url("../images/team-flag-5.png") no-repeat;
    background-size: 100%;
    left: 8rem;
    top: 0.28rem;
}

.team-gift-ul li:nth-of-type(5):hover {
    width: 3.31rem;
    height: 4.38rem;
    background: url("../images/team-flag-5-active.png") no-repeat;
    background-size: 100%;
    left: 7.78rem;
}

.team-gift-ul li:nth-of-type(6) {
    width: 2.87rem;
    height: 5.16rem;
    background: url("../images/team-flag-6.png") no-repeat;
    background-size: 100%;
    left: 10rem;
    top: 0.1rem;
}

.team-gift-ul li:nth-of-type(6):hover {
    width: 3.32rem;
    height: 5.38rem;
    background: url("../images/team-flag-6-active.png") no-repeat;
    background-size: 100%;
    left: 9.78rem;
}

.team-container {
    position: relative;
    width: 12.74rem;
    height: 10.22rem;
    margin-left: 4rem;
    /* margin-top: 0.6rem; */
}

.team-container .team-container-top-left {
    position: relative;
    top: 0.2rem;
    left: 0.4rem;
}

.team-container .team-container-top-left .hotsort {
    position: relative;
    width: 1.04rem;
    height: 0.34rem;
    font-size: 0.15rem;
    color: #90562E;
    padding: 0.08rem 0.2rem;
    border: 1.25px solid #90562E;
    border-right: 1px solid transparent;
}

.team .team-container .team-container-top-left .team-active {
    color: #ffffff;
    background-color: #90562E;
}

.team-container .team-container-top-left .timesort {
    position: relative;
    width: 1.04rem;
    height: 0.34rem;
    font-size: 0.15rem;
    color: #90562E;
    padding: 0.08rem 0.2rem;
    border: 1.25px solid #90562E;
}

.team-container .team-container-search {
    position: relative;
}

.team-container .team-container-search .team-search_form {
    margin-top: -0.1rem;
    margin-left: 0.6rem;
}

.team-container-search .team-search-btn {
    position: absolute;
    width: 0.22rem;
    height: 0.21rem;
    right: 0.6rem;
    top: 0.03rem;
}

.team-container-search .team-search_input {
    width: 2.75rem;
    height: 0.34rem;
    /* background: #ffe7b3; */
    border: 1px solid #C9BC9E;
    /* font-size: 22px; */
    color: #999999;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    margin-top: 0rem;
    margin-left: 7rem;
    float: left;
    padding-left: 0.2rem;
}

.team-container-content {
    position: relative;
    display: flex;
    width: 10.36rem;
    height: 3.52rem;
    margin-left: 0.35rem;
    margin-top: 0.55rem;
    flex-wrap: wrap;
    overflow: hidden;
}

.team-container-content .team-container-box {
    position: relative;
    width: 2.51rem;
    height: 1.7rem;
    padding: 0.04rem;
}

.team-container-box-person {
    font-size: 0.14rem;
    float: left;
    color: #FFEE8A;
    margin-top: -1.65rem;
    margin-left: 0.05rem;
    white-space: nowrap;
    overflow: hidden;
}

.team-container-box-point {
    font-size: 0.14rem;
    float: right;
    color: #FFEE8A;
    margin-top: -1.65rem;
    margin-right: 0.05rem;
    white-space: nowrap;
    overflow: hidden;
}

.team-container-box-join {
    display: flex;
    width: 2.5rem;
    height: 0.4rem;
    background: rgba(0, 0, 0, 0.6);
    margin-top: -0.41rem;
}

.team-container-box-join p {
    width: 1.2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    margin-top: 0.06rem;
    margin-left: 0.08rem;
    color: #FCE6C0;
}

.team-container-box-join a {
    padding: 0.035rem;
}

.team-container-box-join .detail-btn-img {
    width: .53rem;
    height: .26rem;
}

.team-container-box-join .join-btn-img {
    width: .53rem;
    height: .26rem;
}

.team-container .team-toggle-btns {
    position: relative;
    top: 6.9rem;
    left: 2.05rem;
    z-index: 1;
}

.team-toggle-btns>a {
    position: absolute;
    width: 2.49rem;
}

.team-toggle-btns .team-toggle-join {
    left: 4.5rem;
}

.team-panel-title {
    padding-top: 1.98rem;
    margin-bottom: .56rem;
}

.team-panel-title>img {
    width: 1.98rem;
}

.team-panel-create .team-create-content {
    width: 7.83rem;
    height: 5.09rem;
    background: url(../images/team-create-content.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 7.2rem;
    left: 1.6rem;
}

.team-panel-create .team-create-content .team-create-form {
    /* width: 7.37rem;
    height: 3.42rem;
    background: url("../images/team-create-form-bg.png") no-repeat;
    background-size: 100%;
    position: absolute;
    top: 6rem;
    left: .8rem; */
}

.team-create-content .team-create-form {
    position: relative;
}

.team-create-form .team-create-input {
    width: 3.6rem;
    height: .36rem;
    background: #d8d8e6;
    vertical-align: middle;
    border: 0 solid #ffffff;
    font-size: .24rem;
    color: #454545;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    top: 2rem;
    left: 3.2rem;
    text-align: center;
}

.team-create-form .team-create-tenet {
    top: 2.7rem;
}

.team-create-form .team-create-line {
    top: 3.35rem;
    left: 3.4rem;
    width: 3.4rem;
}

.team-create-content .team-create-btn,
.team-create-content>.text-center>a {
    width: 2.35rem;
    height: 0.63rem;
    left: 2.75rem;
    top: 4.2rem;
    position: absolute;
}

.team-panel-create .team-create-content_done {
    width: 7.83rem;
    height: 5.09rem;
    background: url(../images/team-create-content_done.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 7.2rem;
    left: 1.6rem;
}

.team-create-content_done .my-team-title {
    color: #fff5ff;
    font-size: .30rem;
    padding-left: 1.14rem;
    padding-top: 1.8rem;
}

.team-create-content_done .my-team-title .my-team-name {
    /* font-size: .42rem; */
}

.my-team-title .my-team-count {
    /* font-size: .26rem; */
}

.team-create-content_done .my-team-form {
    color: #353872;
    box-sizing: border-box;
    padding-top: 0.1rem;
    padding-left: 1.1rem;
    font-size: .25rem;
    position: relative;
}

.my-team-form .my-team-form_tenet span {
    /* display: block; */
    width: 6.4rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.my-team-form .my-team-form_tenet div {
    overflow: hidden;
    word-wrap: break-word;
    height: 0.9rem;
}

.my-team-form .my-team-form_line {
    margin-top: 0.3rem;
}

.my-team-form .my-team-form_line span {
    /* display: block; */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.my-team-form .my-team-copy-fb {
    position: absolute;
    top: 1.7rem;
    left: 4.02rem;
    width: 2.88rem;
}

.my-team-form .my-team-copy-line {
    position: absolute;
    top: 1.7rem;
    left: 0.9rem;
    width: 2.88rem;
}

.team-panel-create .team-create-hint {
    position: absolute;
    width: 4.9rem;
    top: 9.74rem;
    left: 3rem;
}

.team-container .team-panel-join {
    position: relative;
}

.team-panel-join .team-join-content {
    width: 7.83rem;
    height: 5.09rem;
    background: url("../images/team-panel-join-bg.png") no-repeat;
    background-size: 100%;
    padding-top: 1.75rem;
    padding-left: .65rem;
    box-sizing: border-box;
    position: absolute;
    top: 7.2rem;
    left: 1.6rem;
}

.team-join-content .team-join-search {
    width: 6.7rem;
    height: .51rem;
    /* background: url("../images/team-search-bg.png") no-repeat;
    background-size: 100%; */
    position: relative;
}

.team-join-search .team-join-search_input {
    width: 4.3rem;
    height: .42rem;
    background-color: #cfcfde;
    vertical-align: middle;
    border: 0 solid #ffffff;
    font-size: .26rem;
    color: #272458;
    text-align: center;
    text-align-last: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    top: 0rem;
    left: 0.8rem;
}

.team-join-search .team-search-btn {
    position: absolute;
    right: 1.1rem;
    top: .04rem;
    width: .3rem;
}

.team-join-content .team-join-list {
    color: #fff;
    font-size: .2rem;
    padding: 0.1rem;
}

.team-join-list .team-join-item {
    margin-top: .06rem;
}

.team-join-item .team-detail-btn {
    display: inline-block;
    width: 1.11rem;
    margin-right: 0.1rem;
}

.team-join-item .team-join-btn {
    display: inline-block;
    width: 1.06rem;
}

.team-join-item .team-join-item_content {
    display: inline-block;
    width: 4.25rem;
    white-space: nowrap;
}

.team-join-content .team-prev-btn {
    position: absolute;
    top: 4.6rem;
    left: 2.5rem;
}

.team-join-content .team-random-btn {
    position: absolute;
    top: 4.6rem;
    left: 4.6rem;
}

.team-join-content .team-prev-btn span,
.team-join-content .team-random-btn span {
    font-size: .2rem;
    color: #fff;
}

.team-join-content .team-prev-btn span:hover,
.team-join-content .team-random-btn span:hover {
    text-decoration: underline;
}

.team-toggle-entity {
    width: 11rem;
    height: 6rem;
    background: url("../images/team-toggle-entity.png") no-repeat;
    background-size: 100%;
    position: absolute;
    top: 5.8rem;
    left: 0.3rem;
}

.team-entity-btns {
    width: 4.59rem;
    height: .8rem;
    background: url("../images/team-entity-btns.png") no-repeat;
    background-size: 100%;
    position: absolute;
    top: 11.7rem;
    left: 3.4rem;
}

/*游戏特色*/
.shuffling {
    padding-top: .4rem;
    overflow: hidden;
    text-align: center;
}

.shuffling li.on {
    width: 7.1rem;
}

.shuffling li {
    width: .83rem;
    height: 4.03rem;
    margin-left: .06rem;
    position: relative;
    display: inline-block;
    -webkit-transition: width .6s;
    transition: width .6s;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.shuffling a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: 100;
}

.shuffling li.on b {
    -webkit-opacity: 0;
    opacity: 0;
    filter: alpha(opacity=0);
}

.shuffling li b {
    display: block;
    width: .83rem;
    height: 4.02rem;
    float: right;
    -webkit-opacity: 1;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: all .5s;
    transition: all .5s
}

.shuffling .ul-li1 {
    margin-left: 0rem;
}

.shuffling .ul-li1.on {
    background: url(../images/feature-pic-1.png) no-repeat;
    background-size: 7.1rem 3.99rem;
}

.shuffling .ul-li1 b {
    background: url(../images/feature-title-1.png) no-repeat;
    background-size: 100%;
}

.shuffling .ul-li2.on {
    background: url(../images/feature-pic-2.png) no-repeat;
    background-size: 7.1rem 3.99rem;
}

.shuffling .ul-li2 b {
    background: url(../images/feature-title-2.png) no-repeat;
    background-size: 100%;
}

.shuffling .ul-li3.on {
    background: url(../images/feature-pic-3.png) no-repeat;
    background-size: 7.1rem 3.99rem;
}

.shuffling .ul-li3 b {
    background: url(../images/feature-title-3.png) no-repeat;
    background-size: 100%;
}

.shuffling .ul-li4.on {
    background: url(../images/feature-pic-4.png) no-repeat;
    background-size: 7.1rem 3.99rem;
}

.shuffling .ul-li4 b {
    background: url(../images/feature-title-4.png) no-repeat;
    background-size: 100%;
}

.shuffling .ul-li5.on {
    background: url(../images/feature-pic-5.png) no-repeat;
    background-size: 7.1rem 3.99rem;
}

.shuffling .ul-li5 b {
    background: url(../images/feature-title-5.png) no-repeat;
    background-size: 100%;
}

/*任务完成度*/
.task {
    /* padding-bottom: .5rem; */
    overflow: hidden;
    font-size: 0;
    position: relative;
    margin-top: 0.8rem;
    height: 11rem;
}

.task .title {
    height: 2.5rem;
}

.task .order-count {
    width: 2.37rem;
    height: 0.32rem;
    position: absolute;
    top: 3rem;
    left: 7.4rem;
    background: url(../images/order-slogan.png) no-repeat;
    background-size: 100%;
}

.task .count span {
    text-align: center;
    position: absolute;
    top: -0.13rem;
    left: 2.45rem;
    line-height: .6rem;
    font-size: 0.4rem;
    -webkit-text-size-adjust: none;
    font-weight: 700;
    background-image: -webkit-linear-gradient(top, #FFF7E9, #F6E0A6);
    letter-spacing: .02rem;
    /* text-decoration: underline; */
    /* background: linear-gradient(to bottom, #8439ff 0%, #fffeff 49%, #9d88fe 50%, #6d26e5 100%); */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.task .task-progress {
    width: 11.26rem;
    top: 1.33rem;
    left: 3.92rem;
}

.task .task-hint {
    width: 6.16rem;
    height: 0.23rem;
    margin: 0 auto;
    background: url(../images/task-hint.png) no-repeat;
    background-size: 100%;
    position: relative;
    top: 6.65rem;
}

.task .title img {
    width: 6.4rem;
    height: 2.15rem;
}

.task .task-progress {
    /* position: relative;
    width: 15.48rem;
    height: .83rem;
    background: url(../images/task-progress.png) no-repeat;
    background-size: 100%;
    margin: 0 auto;
    margin-top: 1.6rem; */
    position: relative;
}

.task-person li {
    position: absolute;
    width: 0.73rem;
    height: 0.56rem;
}

.task-person .task_1 {
    background: url("../images/task-1.png") no-repeat;
    background-size: 100%;
    left: 4.38rem;
    top: 3.86rem;
}

.task-person .task_1.active {
    background: url(../images/task-1-finish.png) no-repeat;
    background-size: 100%;
    width: 1.33rem;
    height: 1.35rem;
    left: 4.08rem;
    top: 3.57rem;
}

.task-person .task_2 {
    background: url("../images/task-1.png") no-repeat;
    background-size: 100%;
    left: 6.78rem;
    top: 3.84rem;
}

.task-person .task_2.active {
    background: url(../images/task-2-finish.png) no-repeat;
    background-size: 100%;
    width: 1.33rem;
    height: 1.35rem;
    left: 6.48rem;
    top: 3.54rem;
}

.task-person .task_3 {
    background: url("../images/task-1.png") no-repeat;
    background-size: 100%;
    left: 9.17rem;
    top: 3.84rem;
}

.task-person .task_3.active {
    background: url(../images/task-3-finish.png) no-repeat;
    background-size: 100%;
    width: 1.33rem;
    height: 1.35rem;
    left: 8.865rem;
    top: 3.54rem;
}

.task-person .task_4 {
    background: url("../images/task-1.png") no-repeat;
    background-size: 100%;
    left: 11.49rem;
    top: 3.84rem;
}

.task-person .task_4.active {
    background: url(../images/task-4-finish.png) no-repeat;
    background-size: 100%;
    width: 1.33rem;
    height: 1.35rem;
    left: 11.19rem;
    top: 3.54rem;
}

.task-person .task_5 {
    background: url("../images/task-1.png") no-repeat;
    background-size: 100%;
    left: 13.92rem;
    top: 3.84rem;
}

.task-person .task_5.active {
    background: url(../images/task-5-finish.png) no-repeat;
    background-size: 100%;
    width: 1.33rem;
    height: 1.35rem;
    left: 13.62rem;
    top: 3.41rem;
}

.task-progress .task-progress-bg {
    width: 15.48rem;
    margin-top: 1rem;
}

.task .task-progress .task-active-dots {
    position: absolute;
    top: -0.06rem;
    left: 2.8rem;
}

.task-progress .task-active-dots .task-active-dot {
    position: absolute;
    width: 2.89rem;
    height: 2.36rem;
    background: url(../images/task-active-dot-1.png) no-repeat;
    background-size: 100%;
    top: 2.7rem;
    left: -1.7rem;
}

.task-progress .task-active-dots .task-active-dot.active {
    background: url(../images/task-active-dot-1-finish.png) no-repeat;
    background-size: 100%;
}

.task-progress .task-active-dots .task-active-dot-2 {
    background: url(../images/task-active-dot-2.png) no-repeat;
    background-size: 100%;
    top: 4rem;
    left: 1.8rem;
    width: 1.84rem;
    height: 3.47rem;
}

.task-progress .task-active-dots .task-active-dot-2.active {
    background: url(../images/task-active-dot-2-finish.png) no-repeat;
    background-size: 100%;
}

.task-progress .task-active-dots .task-active-dot-3 {
    background: url(../images/task-active-dot-3.png) no-repeat;
    background-size: 100%;
    top: 4rem;
    left: 3.6rem;
    width: 1.84rem;
    height: 3.47rem;
}

.task-progress .task-active-dots .task-active-dot-3.active {
    background: url(../images/task-active-dot-3-finish.png) no-repeat;
    background-size: 100%;
}

.task-progress .task-active-dots .task-active-dot-4 {
    background: url(../images/task-active-dot-4.png) no-repeat;
    background-size: 100%;
    top: 4rem;
    left: 4.8rem;
    width: 1.84rem;
    height: 3.47rem;
}

.task-progress .task-active-dots .task-active-dot-4.active {
    background: url(../images/task-active-dot-4-finish.png) no-repeat;
    background-size: 100%;
}

.task-progress .task-active-dots .task-active-dot-5 {
    background: url(../images/task-active-dot-5.png) no-repeat;
    background-size: 100%;
    top: 4rem;
    left: 6.6rem;
    width: 1.84rem;
    height: 3.47rem;
}

.task-progress .task-active-dots .task-active-dot-5.active {
    background: url(../images/task-active-dot-5-finish.png) no-repeat;
    background-size: 100%;
}

.task-progress .task-active-dots .task-active-dot-6 {
    background: url(../images/task-active-dot-6.png) no-repeat;
    background-size: 100%;
    top: 4rem;
    left: 7.8rem;
    width: 1.84rem;
    height: 3.47rem;
}

.task-progress .task-active-dots .task-active-dot-6.active {
    background: url(../images/task-active-dot-6-finish.png) no-repeat;
    background-size: 100%;
}

.task-progress .task-active-dots .task-active-dot-7 {
    background: url(../images/task-active-dot-7.png) no-repeat;
    background-size: 100%;
    top: 4rem;
    left: 9.6rem;
    width: 1.84rem;
    height: 3.47rem;
}

.task-progress .task-active-dots .task-active-dot-7.active {
    background: url(../images/task-active-dot-7-finish.png) no-repeat;
    background-size: 100%;
}

.task-progress .task-active-dots .task-active-dot-8 {
    background: url(../images/task-active-dot-8.png) no-repeat;
    background-size: 100%;
    top: 3.9rem;
    left: 11.3rem;
    width: 3.37rem;
    height: 2.08rem;
}

.task-progress .task-active-dots .task-active-dot-8.active {
    background: url(../images/task-active-dot-8-finish.png) no-repeat;
    background-size: 100%;
}

.task-progress .task-active-dots.task-active-1 .task-active-dot-1 {
    /* 5W */
    display: block;
}

.task-progress .task-active-dots.task-active-2 .task-active-dot-1,
/* 10W */
.task-progress .task-active-dots.task-active-2 .task-active-dot-2 {
    display: block;
}

.task-progress .task-active-dots.task-active-3 .task-active-dot-1,
/* 20W */
.task-progress .task-active-dots.task-active-3 .task-active-dot-2,
.task-progress .task-active-dots.task-active-3 .task-active-dot-3 {
    display: block;
}

.task-progress .task-active-dots.task-active-4 .task-active-dot-1,
/* 30W */
.task-progress .task-active-dots.task-active-4 .task-active-dot-2,
.task-progress .task-active-dots.task-active-4 .task-active-dot-3,
.task-progress .task-active-dots.task-active-4 .task-active-dot-4 {
    display: block;
}

.task-progress .task-active-dots.task-active-5 .task-active-dot-1,
/* 50W */
.task-progress .task-active-dots.task-active-5 .task-active-dot-2,
.task-progress .task-active-dots.task-active-5 .task-active-dot-3,
.task-progress .task-active-dots.task-active-5 .task-active-dot-4,
.task-progress .task-active-dots.task-active-5 .task-active-dot-5 {
    display: block;
}

.task-progress .task-active-dots.task-active-6 .task-active-dot-1,
/* 60W */
.task-progress .task-active-dots.task-active-6 .task-active-dot-2,
.task-progress .task-active-dots.task-active-6 .task-active-dot-3,
.task-progress .task-active-dots.task-active-6 .task-active-dot-4,
.task-progress .task-active-dots.task-active-6 .task-active-dot-5,
.task-progress .task-active-dots.task-active-6 .task-active-dot-6 {
    display: block;
}

.task-progress .task-active-dots.task-active-7 .task-active-dot-1,
/* 70W */
.task-progress .task-active-dots.task-active-7 .task-active-dot-2,
.task-progress .task-active-dots.task-active-7 .task-active-dot-3,
.task-progress .task-active-dots.task-active-7 .task-active-dot-4,
.task-progress .task-active-dots.task-active-7 .task-active-dot-5,
.task-progress .task-active-dots.task-active-7 .task-active-dot-6,
.task-progress .task-active-dots.task-active-7 .task-active-dot-7 {
    display: block;
}

.task-progress .task-active-dots .task-progress-dot {
    width: 1.35rem;
    position: absolute;
    z-index: -1;
    top: -.48rem;
    display: none;
}

.task-progress .task-active-dots.task-active-1 .task-progress-dot {
    /* 5W */
    display: block;
    left: -.36rem;
}

.task-progress .task-active-dots.task-active-2 .task-progress-dot {
    /* 10W */
    display: block;
    left: 1.96rem;
}

.task-progress .task-active-dots.task-active-3 .task-progress-dot {
    /* 20W */
    display: block;
    left: 4.26rem;
}

.task-progress .task-active-dots.task-active-4 .task-progress-dot {
    /* 30W */
    display: block;
    left: 6.68rem;
}

.task-progress .task-active-dots.task-active-5 .task-progress-dot {
    /* 50W */
    display: block;
    left: 9rem;
}

.task-info {
    text-align: center;
    position: relative;
    width: 16.20rem;
    height: 14.91rem;
    margin: -1.8rem auto;
    background: url(../images/task-bg.png) no-repeat;
    background-size: 100%;
}

.task-prize {
    width: 10.45rem;
    height: 5.69rem;
    position: absolute;
    left: 4rem;
    top: 6rem;
}

.task-prize ul {
    position: absolute;
    width: 0.73rem;
}

.task-prize li .poker-front {
    position: absolute;
    width: 1.76rem;
    height: 2.93rem;
    background: url(../images/poker-1.png) no-repeat;
    background-size: 100%;
    top: 0.13rem;
    left: -0.52rem;
    backface-visibility: hidden;
    z-index: 2;
}

.task-prize .task_1 .poker-back {
    position: absolute;
    width: 1.76rem;
    height: 2.93rem;
    background: url(../images/poker-back-1.png) no-repeat;
    background-size: 100%;
    top: 0.13rem;
    left: -0.52rem;
    backface-visibility: hidden;
    transform: rotateY(180deg);
}

.task-prize .task_2 .poker-back {
    position: absolute;
    width: 1.76rem;
    height: 2.93rem;
    background: url(../images/poker-back-2.png) no-repeat;
    background-size: 100%;
    top: 0.13rem;
    left: -0.52rem;
    backface-visibility: hidden;
    transform: rotateY(180deg);
}

.task-prize .task_3 .poker-back {
    position: absolute;
    width: 1.76rem;
    height: 2.93rem;
    background: url(../images/poker-back-3.png) no-repeat;
    background-size: 100%;
    top: 0.13rem;
    left: -0.52rem;
    backface-visibility: hidden;
    transform: rotateY(180deg);
}

.task-prize .task_4 .poker-back {
    position: absolute;
    width: 1.76rem;
    height: 2.93rem;
    background: url(../images/poker-back-4.png) no-repeat;
    background-size: 100%;
    top: 0.13rem;
    left: -0.52rem;
    backface-visibility: hidden;
    transform: rotateY(180deg);
}

.task-prize .task_5 .poker-back {
    position: absolute;
    width: 1.76rem;
    height: 2.93rem;
    background: url(../images/poker-back-5.png) no-repeat;
    background-size: 100%;
    top: 0.13rem;
    left: -0.52rem;
    backface-visibility: hidden;
    transform: rotateY(180deg);
}

.task-prize .poker-status-1 {
    position: absolute;
    width: 1.97rem;
    height: 1.59rem;
    background: url(../images/massing.png) no-repeat;
    background-size: 100%;
    top: 2.895rem;
    left: -0.27rem;
}

.task-prize .poker-status-1.active {
    background: url(../images/massed.png) no-repeat;
    background-size: 100%;
}

.task-prize .poker-status-2 {
    position: absolute;
    width: 1.97rem;
    height: 1.59rem;
    background: url(../images/massing.png) no-repeat;
    background-size: 100%;
    top: 2.895rem;
    left: 2.06rem;
}

.task-prize .poker-status-2.active {
    background: url(../images/massed.png) no-repeat;
    background-size: 100%;
}

.task-prize .poker-status-3 {
    position: absolute;
    width: 1.97rem;
    height: 1.59rem;
    background: url(../images/massing.png) no-repeat;
    background-size: 100%;
    top: 2.895rem;
    left: 4.38rem;
}

.task-prize .poker-status-3.active {
    background: url(../images/massed.png) no-repeat;
    background-size: 100%;
}

.task-prize .poker-status-4 {
    position: absolute;
    width: 1.97rem;
    height: 1.59rem;
    background: url(../images/massing.png) no-repeat;
    background-size: 100%;
    top: 2.895rem;
    left: 6.73rem;
}

.task-prize .poker-status-4.active {
    background: url(../images/massed.png) no-repeat;
    background-size: 100%;
}

.task-prize .poker-status-5 {
    position: absolute;
    width: 1.97rem;
    height: 1.59rem;
    background: url(../images/massing.png) no-repeat;
    background-size: 100%;
    top: 2.895rem;
    left: 9.08rem;
}

.task-prize .poker-status-5.active {
    background: url(../images/massed.png) no-repeat;
    background-size: 100%;
}

.task-prize .task_2 {
    left: 2.68rem;
}

.task-prize .task_2 .poker-front {
    background: url(../images/poker-2.png) no-repeat;
    background-size: 100%;
}

.task-prize .task_3 {
    left: 5rem;
}

.task-prize .task_3 .poker-front {
    background: url(../images/poker-3.png) no-repeat;
    background-size: 100%;
}

.task-prize .task_4 {
    left: 7.35rem;
}

.task-prize .task_4 .poker-front {
    background: url(../images/poker-4.png) no-repeat;
    background-size: 100%;
}

.task-prize .task_5 {
    left: 9.7rem;
}

.task-prize .task_5 .poker-front {
    background: url(../images/poker-5.png) no-repeat;
    background-size: 100%;
}

@keyframes turn1 {
    0% {
        transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
    }
}

.task-info .task-dot-wrapper {
    position: absolute;
    top: 2.08rem;
    left: 3.36rem;
}

.task-info .task-hint {
    width: 5.70rem;
    height: .72rem;
    margin: 0 auto;
    background: url("../images/task-hint.png") no-repeat;
    background-size: 100%;
    position: relative;
    top: 12.2rem;
}

.task-star {
    position: absolute;
    /* top: 9.4rem; */
    left: -2rem;
    z-index: 10;
    pointer-events: none;
}

.task-star ul {
    display: flex;
    flex-direction: row;
    list-style: none;
}

.task-star .task-star1 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    left: 12rem;
    top: -8.1rem;
    animation: pokerstar 5s ease-in-out infinite;
}

.task-star .task-star2 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: -9rem;
    left: 10.7rem;
    animation: pokerstar 5s 2s infinite ease-out;
}

.task-star .task-star3 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: -7.5rem;
    left: 9.2rem;
    animation: pokerstar 5s 2s infinite ease-out;
}

.task-star .task-star4 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: -6.3rem;
    left: 10.7rem;
    animation: pokerstar 5s 2s infinite ease-out;
}

.task-star .task-star5 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: -8.3rem;
    left: 7.7rem;
    animation: pokerstar 5s 2s infinite ease-out;
}

.task-star .task-star6 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: -6.3rem;
    left: 7.2rem;
    animation: pokerstar 5s 2s infinite ease-out;
}

/* 武将介绍 */
.intro {
    /* margin-top: 0.8rem; */
    /* padding-bottom: 2rem; */
    overflow: hidden;
    font-size: 0;
    height: 10.5rem;
    /* padding-top: 1rem; */
}

.intro .swiper-container {
    /* 覆盖swiper插件干扰样式 */
    overflow: visible;
}

.intro .title {
    height: auto;
}

.intro .title img {
    width: 6.86rem;
    height: 2.3rem;
}

#intro-introduce {
    width: 19.19rem;
    height: 7.9rem;
    margin: 0 auto;
    position: relative;
    margin-top: 0.5rem;
    /* z-index: 100; */
    background: url(../image/bg-intro.png) no-repeat;
    background-size: 100%;
}

/* .intro-info::after {
    content: '';
    position: absolute;
    width: 1.36rem;
    height: 1.6rem;
    background: url("../images/intro-decoration.png") no-repeat;
    background-size: 100%;
    top: 0;
    right: 0.4rem;
    z-index: 1;
} */
#intro-introduce .intro-swiper {
    width: 7.08rem;
    height: 4.23rem;
    left: -1.64rem;
    top: 1.5rem;
    overflow: hidden;
}

#intro-introduce .intro-swiper .swiper-slide .intro-pic {
    position: absolute;
    width: 7.08rem;
    height: 4.23rem;
}

#intro-introduce .intro-swiper .swiper-slide .intro-pic img {
    width: 100%;
    height: 100%;
}

#intro-introduce .intro-swiper .swiper-slide .intro-pic {
    display: none;
}

#intro-introduce .intro-swiper .swiper-slide-active .intro-pic {
    display: block;
}

#intro-introduce .intro-swiper .swiper-slide-next .intro-pic {
    display: block;
    left: -0.2rem;
    opacity: 0.3;
}

#intro-introduce .intro-swiper .swiper-slide-prev .intro-pic {
    display: block;
    left: 0.9rem;
    opacity: 0.3;
}

/* .intro-swiper .swiper-slide .intro-pic .swiper-lazy img{
    width: 8.20rem;
    height: 5.03rem;
} */
#intro-introduce .intro-swiper .swiper-slide.swiper-slide-active .intro-pic {
    -webkit-animation: fadeIn .15s .15s;
    -o-animation: fadeIn .15s .152s;
    animation: fadeIn .1s .1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

#intro-introduce .intro-swiper .swiper-slide.swiper-slide-active .intro-pic::after {
    content: '';
    position: absolute;
    /* background: url("../images/slide-active-bg.png") no-repeat; */
    /* background-size: 100%; */
    width: 9.34rem;
    height: 5.33rem;
    left: 0.1rem;
    top: 0.05rem;
}

#intro-introduce.intro-swiper .swiper-slide.swiper-slide-active .intro-intro {
    -webkit-animation: fadeIn .4s .4s;
    -o-animation: fadeIn .4s .4s;
    animation: fadeIn .4s .4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

#intro-introduce .intro-swiper-button-prev {
    width: .55rem;
    height: .71rem;
    position: absolute;
    top: 2.7rem;
    left: 3.7rem;
    background: url(../image/intro-btn-prev-swiper.png) no-repeat;
    background-size: 100%;
    z-index: 1;
    cursor: pointer;
}

#intro-introduce .intro-swiper-button-next {
    width: .55rem;
    height: .71rem;
    position: absolute;
    top: 2.7rem;
    left: 11.7rem;
    background: url(../image/intro-btn-next-swiper.png) no-repeat;
    background-size: 100%;
    z-index: 1;
    cursor: pointer;
}

#intro-introduce .intro-swiper-pagination {
    width: 100%;
    height: .16rem;
    position: absolute;
    top: 6.8rem;
    left: 8.9rem;
}

#intro-introduce .swiper-pagination-line {
    position: absolute;
    width: 6.3rem;
    /* height: .02rem; */
    top: 5.5rem;
    left: 4.68rem;
    /* background: url(../images/swiper-line.png) no-repeat; */
    background-size: 100%;
}

#intro-introduce .intro-swiper-pagination .swiper-pagination-bullet {
    margin: 0 auto;
    width: .17rem;
    height: .17rem;
    border-radius: 0;
    opacity: 1;
    background: url("../image/intro-s-1.png") no-repeat;
    background-size: 100%;
    position: absolute;
    /* top: 0; */
    left: 0;
}

#intro-introduce .intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(2) {
    left: .36rem;
}

#intro-introduce .intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(3) {
    left: .72rem;
}

#intro-introduce .intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(4) {
    left: 1.05rem;
}

#intro-introduce .intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(5) {
    left: 1.41rem;
}

/*
#intro-introduce .intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(6){
    left: 3.92rem;
}
#intro-introduce .intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(7){
    left: 4.7rem;
} */
/* #intro-introduce .intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(8){
    left: 2.8rem;
} */
#intro-introduce .intro-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 0.16rem;
    height: 0.16rem;
    background-image: url(../image/intro-s-1-active.png);
    background-size: 100%;
    /* margin-left: -0.1rem;
    margin-top: 0rem; */
}

/* 世界观 */
.pager6 .intro-outlook {
    height: 4.61rem;
    position: relative;
}

.pager6 .intro-outlook .outlook-list {
    width: 5.85rem;
    height: 2.65rem;
    margin: 0 auto;
}

.pager6 .intro-outlook .outlook-list li {
    line-height: .31rem;
    text-align: center;
    font-size: .22rem;
    font-family: '맑은 고딕';
    color: #767e87;
    font-weight: bold;
    letter-spacing: -.01rem;
}

.pager6 .intro-outlook .outlook-list li:nth-child(3) {
    margin-bottom: .4rem;
}

.pager6 .intro-outlook .outlook-img {
    width: 6.71rem;
    height: 3.03rem;
    position: absolute;
    bottom: -0.3rem;
    left: 50%;
    transform: translateX(-55%);
    background: url(../image/intor-outlook.png) no-repeat;
    background-size: 100%;
}

/* 种类介绍 */
.intro {
    margin-top: 0.9rem;
    /* padding-bottom: 2rem; */
    overflow: hidden;
    font-size: 0;
    height: 10.8rem;
    padding-bottom: 2.2rem;
}

.intro .swiper-container {
    /* 覆盖swiper插件干扰样式 */
    overflow: visible;
}

.intro .title {
    height: auto;
}

.intro .title>img {
    width: 4.68rem;
    height: 1.70rem;
}

.intro-info {
    /* width: 15rem; */
    /* height: 5.79rem; */
    margin: 0 auto;
    position: relative;
    /* margin-top: -0.1rem; */
    /* left: -0.3rem; */
    z-index: 100;
}

/* .intro-info::after {
    content: '';
    position: absolute;
    width: 1.36rem;
    height: 1.6rem;
    background: url("../images/intro-decoration.png") no-repeat;
    background-size: 100%;
    top: 0;
    right: 0.4rem;
    z-index: 1;
} */
.intro-swiper {
    width: 13.52rem;
    height: 9.48rem;
}

/*.intro-swiper .swiper-slide .intro-intro{*/
/*width: 12.5rem;*/
/*position: absolute;*/
/*left: 0rem;*/
/*top: 0rem;*/
/*}*/
.intro-swiper .swiper-slide .intro-pic {
    /* position: absolute;
    width: 19.2rem;
    height: 11.5rem; */
    width: 100%;
    height: 100%;
}

.intro-swiper .swiper-slide .intro-pic {
    display: none;
}

.intro-swiper .swiper-slide-active .intro-pic {
    display: block;
}

.intro-swiper .swiper-slide-next .intro-pic {
    display: block;
    left: -0.2rem;
    opacity: 0;
}

.intro-swiper .swiper-slide-prev .intro-pic {
    display: block;
    left: 0.9rem;
    opacity: 0;
}

.intro-pic .intro-pic-left {
    position: absolute;
    left: 20%;
    top: 10%;
}

.intro-pic .intro-pic-left:first-child {
    width: 6.1rem;
    height: 4.16rem;
    position: absolute;
    left: 16.4%;
    top: 6%;
}

.intro-pic .intro-pic-right {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 10%;
    display: block;
}

/* .intro-swiper .swiper-slide .intro-pic .swiper-lazy img{
    width: 8.20rem;
    height: 5.03rem;
} */
.intro-swiper .swiper-slide.swiper-slide-active .intro-pic {
    -webkit-animation: fadeIn .15s .15s;
    -o-animation: fadeIn .15s .152s;
    animation: fadeIn .1s .1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* .intro-swiper .swiper-slide.swiper-slide-active .intro-pic::after{
   content: '';
   position: absolute;
   background: url("../images/slide-active-bg.png") no-repeat;
   background-size: 100%;
   width: 9.34rem;
   height: 5.33rem;
   left: 0.1rem;
   top: 0.05rem;
} */
.intro-swiper .swiper-slide.swiper-slide-active .intro-intro {
    -webkit-animation: fadeIn .4s .4s;
    -o-animation: fadeIn .4s .4s;
    animation: fadeIn .4s .4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.intro-swiper-pagination {
    position: absolute;
    top: 6.2rem;
    left: 4.8rem;
}

.swiper-pagination-line {
    position: absolute;
    width: 6.3rem;
    height: .02rem;
    top: 5.5rem;
    left: 4.68rem;
    /* background: url(../images/swiper-line.png) no-repeat; */
    background-size: 100%;
}

.pager5 .intro-swiper-pagination {
    width: 4.19rem;
    height: .81rem;

}

.intro-swiper-pagination .swiper-pagination-bullet {
    width: .62rem;
    height: .62rem;
    border-radius: 0;
    background: transparent;
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.intro-swiper-pagination .swiper-pagination-bullet {
    width: .53rem;
    height: .53rem;
    top: -.06rem;
    opacity: .5;
}

.intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(1) {
    height: .81rem;
    left: -.055rem;
    background: url(../image/rece-menu-1.png) no-repeat;
    background-size: 100%;
}

.intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(2) {
    left: .67rem;
    background: url(../image/rece-menu-2.png) no-repeat;
    background-size: 100%;
}

.intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(3) {
    left: 1.37rem;
    background: url(../image/rece-menu-3.png) no-repeat;
    background-size: 100%;
}

.intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(4) {
    left: 2.08rem;
    background: url(../image/rece-menu-4.png) no-repeat;
    background-size: 100%;
}

.intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(5) {
    left: 2.80rem;
    background: url(../image/rece-menu-5.png) no-repeat;
    background-size: 100%;
}

.intro-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
}

.swiper-text {
    position: absolute;
    width: 2rem;
    height: 2rem;
    color: #fff;
    top: 0;
    background: red;

}

/*活动说明*/
.rule {
    /* padding-bottom: 0.5rem; */
    overflow: hidden;
    font-size: 0;
    /* height: 14.7rem; */
}

.rule .title img {
    /* width: 12.21rem; */
    height: 2.5rem;
}

.activity {
    overflow: hidden;
}

.activity-info {
    width: 12.18rem;
    height: 7.49rem;
    margin: 0.9rem auto;
    background: url("../images/activity-info.png") no-repeat;
    background-size: 100%;
    margin-left: 3rem;
}

/* .rule .rule-info p{
    width: 8.28rem;
    margin: .4rem auto;
} */
/* bottom */
.bottom {
    width: 100%;
    height: 3.27rem;
    border-top: 1px solid #5c5d5c;
    background: rgba(255, 255, 255, .1);
    margin-bottom: 1rem;
}

.bottom .bottom-btn-list {
    width: 100%;
    display: flex;
    justify-content: center;
}

.bottom .bottom-btn-list li {
    width: 1.5rem;
    height: 1.46rem;
    margin-right: 1rem;
}

.bottom .bottom-btn-list li img {
    width: 100%;
    height: 100%;
    display: block;
}

.bottom .bottom-btn-list li:last-child {
    background: url(../image/icon-bottom-Youtube.png);
    background-size: 100%;
    margin-right: 0;
}

.bottom .bottom-btn {
    cursor: pointer;
    margin: 0.2rem auto 0;
    width: 2.03rem;
    height: .59rem;
    /* background: url(../image/btn-bottom.png); */
    background-size: 100%;

}

/*footer*/
.footer {
    width: 100%;
    display: flex;
    align-items: center;
    /* padding: 0rem 0.4rem;
    padding-top: 0.4rem; */
    background: #100506;
    /* padding: 0rem 0.4rem;
    padding-top: 0.4rem; */
    background: #100506;
    height: 1.5rem;
    /* position: absolute;
    height: 1.5rem;
    bottom: 0rem; */
}

.footer .cont {
    text-align: center;
    background: url(../images/footer-bg.png) no-repeat;
    background-size: 100%;
    height: 1.5rem;
    width: 19.2rem;
    position: absolute;
    bottom: 0.3rem;
    left: 0rem;
}

.copyright,
.logo-game,
.copyright img,
.copyright p {
    display: inline-block;
    vertical-align: top;
}

.copyright {
    margin-left: .6rem;
    position: relative;
    top: .1rem;
}

.copyright img {
    width: .68rem;
    margin-top: .03rem;
}

.copyright p {
    margin-left: .15rem;
    line-height: .3rem;
    font-size: .12rem;
    color: #cccccc;
    text-align: left;
    white-space: pre-line;
    /* margin-top: 0.15rem; */
    margin-bottom: 0.2rem;
}

/* 回到顶部按钮 */
.nav-top {
    width: .82rem;
    height: .82rem;
    position: fixed;
    left: 17.4rem;
    top: 78%;
    background: url(../image/nav-top.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    transition: all .3s;
}

/*侧边栏*/
/* .slidebar {
    width: 1.49rem;
    height: 6.02rem;
    position: fixed;
    left: 15.8rem;
    top: 74%;
    margin-top: -2.3rem;
    z-index: 1000;
    transition: all .3s;
} */
.slidebar2 {
    z-index: 999 !important;
}

.slidebar-top {
    top: -2.5rem;
    z-index: 1001 !important;
}

.slidebar nav {
    right: .11rem;
    font-size: 0;
    text-align: center;
    position: relative;
    /* left: -0.1rem;
    top: 1.2rem; */
    z-index: 11;
    animation: float 6s infinite;
}

.slidebar-nav::after{
    content: '';
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    background: url(../image/section4/lightbg.png) no-repeat;
    background-size: 100%;
    top: .05rem;
    left: .25rem;
}

.slidebar-nav::before{
  content: '';
  position: absolute;
  width: 0.89rem;
  height: 0.28rem;
  background: url(../image/pop/light-2.png) no-repeat;
  background-size: 100%;
}

.slidebar .slidebar-nav-btn {
    top: 0.32rem;
    right: -0.22rem;
}

.slidebar .slidebar-nav .nav-aos {
    position: absolute;
    background: url(../image/nav-san.png) no-repeat;
    background-size: 100%;
    width: 3.31rem;
    height: 2.68rem;
}

.slidebar .slidebar-nav .nav-ios {
    position: absolute;
    background: url(../image/nav-ios.png) no-repeat;
    background-size: 100%;
    width: 3.31rem;
    height: 2.68rem;
}

.slidebar .slidebar-nav .nav-boli {
    position: absolute;
    background: url(../image/nav-long.png) no-repeat;
    background-size: 100%;
    width: 3.31rem;
    height: 2.68rem;
    position: absolute;
    /* top: -0.22rem; */
}

.slidebar .slidebar-nav .nav-store {
    position: absolute;
    background: url(../image/nav-ps5.png) no-repeat;
    background-size: 100%;
    width: 3.31rem;
    height: 2.68rem;
}

.slidebar .slidebar-nav .nav-lounge {
    background: url(../image/nav-hu.png) no-repeat;
    position: absolute;
    background-size: 100%;
    width: 3.31rem;
    height: 2.68rem;
}

.slidebar .slidebar-nav .nav-btn {
    cursor: pointer;
    position: absolute;
    width: 3.13rem;
    height: .6rem;
    display: block !important;
    top: 2.3rem;
    left: 55%;
}

.slidebar .slidebar-nav .nav-btn-1 {
    background: url(../image/nav-btn-aos.png) no-repeat;
    background-size: 100%;
}

.slidebar .slidebar-nav .nav-btn-2 {
    display: inline-block;
    background: url(../image/nav-aside-3.png) no-repeat;
    background-size: 100%;
}

.slidebar .slidebar-nav .nav-btn-3 {
    display: inline-block;
    background: url(../image/nav-btn-ios.png) no-repeat;
    background-size: 100%;
}

.slidebar .slidebar-nav a {
    display: block;
    background: url(../image/nav-bg.png) no-repeat;
    background-size: 100%;
    width: 2.26rem;
    height: 2.49rem;
}
.slidebar .slidebar-nav a:nth-child(1){
    background-image: url(../image/nav-bg-1.png);
}
.slidebar .slidebar-nav a:nth-child(2){
    background-image: url(../image/nav-bg-1.png);
}
.slidebar .slidebar-nav a:nth-child(3){
    background-image: url(../image/nav-bg-1.png);
}
.slidebar .slidebar-nav a:nth-child(4){
  background-image: url(../image/nav-bg-1.png);
}

.slidebar .slidebar-nav-btn > a > img{
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.slidebar .slidebar-nav-btn > a {
    /* display: block; */
    /* background: url(../image/nav-btn-and.png) no-repeat;
    background-size: 100%; */
    mask-image: url(../image/nav-btn-and.png);
    mask-size: 100%;
    width: 1.35rem;
    height: 0.55rem;
    position: absolute;
}
.slidebar .slidebar-nav-btn a.nav-as {
  top: -1.7rem;
  left: 0.2rem;
}
.slidebar .slidebar-nav-btn a.nav-ios {
    /* background-image: url(../image/nav-btn-ios.png); */
    mask-image: url(../image/nav-btn-ios.png);
    mask-size: 100%;
    width: 1.35rem;
    height: 0.55rem;
    top: -1.7rem;
    left: 0.2rem;
}
.slidebar .slidebar-nav-btn a:nth-child(3){
    display: block;
    background: url(../image/nav-bg-btn3.png) no-repeat;
    background-size: 100%;
    width: 1.57rem;
    height: 0.53rem;
    position: absolute;
    top: 0.8rem;
    left: 0.24rem;
}
/* 光效 */
.slidebar .slidebar-nav-btn > a > i {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 0.08rem;
    left: 0;
    top: 0;
    overflow: hidden;
}
.slidebar .slidebar-nav-btn > a > i::after {
    content: '';
    animation: sg 2s linear infinite;
    background: linear-gradient(120deg, #0000, #0000, #fff7, #0000, #0000);
    width: 100%;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: all .65s;
    pointer-events: none;
}

.slidebar .slidebar-nav-btn .btn-top{
    display: block;
    background: url(../image/slidebar-btn-top.png) no-repeat;
    background-size: 100%;
    width: 0.93rem;
    height: 0.44rem;
    position: absolute;
    top: 1.63rem;
    left: 0.55rem;
}

.slidebar nav .erweima {
    width: 1.33rem;
    height: 1.6rem;
    background-image: url(../images/erweima-bg.png);
    background-size: 100%;
    cursor: default;
    top: 2.2rem;
    left: 0.38rem;
}

.slidebar nav .erweima img {
    margin-top: .05rem;
    margin-left: -.02rem;
    width: 1.22rem;
}

.slidebar .store-link {
    position: absolute;
    top: 1rem;
    left: 0.4rem;
}

.slidebar.on {
    right: 0rem;
}

.slidebar.on .nav-close {
    background-image: url(../images/nav-open.png);
}

/* slidebar活动过期 */
/* .slidebar-overtime nav .erweima{
    background-image: url(../images/erweima-bg-overtime.png);
} */
.slidebar-overtime nav .nav-as.nav-as-overtime {
    background-image: url(../images/slidebar-as-overtime.png);
}

.slidebar-overtime nav .nav-as.nav-as-overtime:hover {
    background-image: url(../images/slidebar-as-overtime-over.png);
}

/* .slidebar-overtime .nav-gp.nav-gp-overtime {
    background-image: url(../images/slidebar-gp-overtime.png);
} */
/* .slidebar-overtime .nav-close-overtime {
    background-image: url(../images/nav-close-overtime.png);
} */
/* .slidebar.slidebar-overtime{
    background-image: url(../images/slidebar-bg4.png);
} */
/* .slidebar-loop-bg img{
    display: none;
} */

/* 抓鬼活動獎勵 */
aside.slidebar-fixed-offer {
    position: fixed;
    top: 55%;
    right: -3rem;
    width: 2.67rem;
    height: 3.06rem;
    background: url(../image/slidebar-fixed-offer.png) no-repeat;
    background-size: 100%;
    z-index: 90;
    animation: float 6s infinite;
    cursor: pointer;
    transition: right .88s;
}

aside.slidebar-fixed-offer.on {
  right: 0.1rem;
}

aside.slidebar-fixed-offer .slidebar-fixed-btn{
  width: 1.72rem;
  height: 0.45rem;
  background: url(../image/nav-loun-btn.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 1.75rem;
  left: 50%;
  margin-left: -0.62rem;
}

.slidebar-fixed-card {
  position: fixed;
  top: 15%;
  right: -3rem;
  width: 2.67rem;
  height: 3.06rem;
  background: url(../image/slidebar-fixed-offer.png) no-repeat;
  background-size: 100%;
  z-index: 90;
  animation: float 6s infinite;
  cursor: pointer;
  transition: right .88s;
}

aside.slidebar-fixed-card .slidebar-fixed-btn{
  width: 1.72rem;
  height: 0.45rem;
  background: url(../image/nav-loun-btn.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 1.75rem;
  left: 50%;
  margin-left: -0.62rem;
}

.slidebar-fixed-card.on {
  right: 0.1rem;
}

/*弹出视频*/
.shade {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

.videos {
    width: 10rem;
    height: 5.62rem;
    position: absolute;
    left: 50%;
    margin-left: -5rem;
    top: 50%;
    margin-top: -3rem;
}

.close {
    width: .19rem;
    height: .19rem;
    position: absolute;
    left: 10.2rem;
    background: url(../image/pop-close.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    /*-webkit-transition: all .3s;*/
    /*-moz-transition: all .3s;*/
    /*-ms-transition: all .3s;*/
    /*-o-transition: all .3s;*/
    /*transition: all .3s;*/
    z-index: 101;
}

.close:hover {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

/*弹层*/
.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: block;
    z-index: 101;
}

/* 弹窗关闭 */
.dia-close {
  width: 0.2rem;
  height: 0.16rem;
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    background: url("../image/pop/pop-close.png") no-repeat;
    background-size: 100%;
    z-index: 300;
}
.logo-close {
  width: 0.2rem;
  height: 0.16rem;
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    background: url("../image/pop/pop-close.png") no-repeat;
    background-size: 100%;
    z-index: 300;
}
.dia-pic-close {
    width: 0.55rem;
    height: .58rem;
    position: absolute;
    top: 5rem;
    left: 13.5rem;
    background: url("../images/pop-close.png") no-repeat;
    background-size: 100%;
    z-index: 300;
}

/* 登录弹窗 */
.pop-login {
    width: 7.21rem;
    height: 8.39rem;
    background: url("../images/login-pop-bg.png") no-repeat;
    background-size: 100%;
}

.dia-close-login {
    width: 0.45rem;
    height: 0.45rem;
    position: absolute;
    background: url(../images/pop-close.png) no-repeat;
    background-size: 100%;
    z-index: 300;
    top: 0.1rem;
    left: 7.3rem;
}

.pop-login .pop-login-btn {
    position: absolute;
    width: 6.49rem;
    height: 1.85rem;
    top: 3.3rem;
    left: 0.6rem;
}

.pop-login .step-info {
    position: relative;
    top: 2.7rem;
    left: 0.6rem;
}

.pop-login .step-info .order-select {
    width: 2.15rem;
    height: 0.6rem;
    /* margin-top: 0.12rem; */
    margin-right: 0.07rem;
    /* padding: 0 25% 0 30%; */
    padding-left: 1%;
    display: inline-block;
    /* vertical-align: top; */
    background: #E7E3D7 url(../images/order-select-1.png) no-repeat 100%;
    background-size: 0.31rem 0.21rem;
    background-position-x: 1.65rem;
    border: 0.01rem solid #9B7842;
    font-size: .22rem;
    font-weight: 700;
    color: #513A32;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    box-sizing: border-box;
}

.step-info .order-tel {
    width: 2.8rem;
    height: 0.4rem;
    vertical-align: bottom;
    /* font-weight: 700; */
    font-size: 0.2rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.step-info .order-tel.activeFalse {
    color: red !important;
    /* border: 0.01rem solid red; */
}

.pager2-order .step-info .order-tel.activeTrue {
    color: #ffffff !important;
    /* border: 0.01rem solid green; */
}
.appointment-login .step-info .order-tel.activeTrue {
    color: #ffffff !important;
    /* border: 0.01rem solid green; */
}

/* 弹出fb点赞弹窗 */
.pop-fb-like-bg {
    position: relative;
    background: url(../images/like-bg.png) no-repeat;
    background-size: 100%;
    width: 8.8rem;
    height: 7.58rem;
}

.pop-fb-like .step-fb {
    position: absolute;
    left: 0.5rem;
    top: 3.6rem;
}

.pop-fb-like .step-fb::after {
    content: '';
    display: inline-block;
    width: 0.49rem;
    height: 0.5rem;
    background: url(../images/fb-like-hand.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: 0.35rem;
    left: 0.9rem;
    -webkit-animation: fblike 1s ease-in-out infinite;
    animation: fblike 1s ease-in-out infinite;
    cursor: default;
}

.pop-fb-like .step-fb::before {
    content: '';
    display: inline-block;
    width: 0.25rem;
    height: 0.25rem;
    background: url(../image/fb-like-red.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: -0.21rem;
    left: 1.2rem;
    z-index: 1;
    cursor: default;
}

.pop-fb-like .discuss-fb {
    position: relative;
    background: url(../images/discuss-fb.png) no-repeat;
    background-size: 100%;
    width: 2.68rem;
    height: 0.73rem;
    top: 5.5rem;
    left: 0.85rem;
}

.pop-fb-like .discuss-fb a {
    position: absolute;
    width: 2.68rem;
    height: 0.73rem;
}

.pop-fb-like .step-fb a .fb-like {
    margin: 0 .4rem;
    -webkit-transform: scale(1.7);
    -moz-transform: scale(1.7);
    -ms-transform: scale(1.7);
    -o-transform: scale(1.7);
    transform: scale(1.7);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.pop-fb-like .dia-close {
    left: 8.1rem;
    top: 0rem;
}

/* 登录弹窗-活动过期 */
.pop-login-overtime {
    background-image: url("../images/login-pop-bg-overtime.png");
}

.pop-login .dia-close {
    top: 2rem;
    left: 9.9rem;
}

.login .pop-login .step1-os-radio {
    position: absolute;
    top: 1.3rem;
    left: 3.4rem;
    font-size: .3rem;
    color: #fff;
}

.pop-login .step1-os-radio #osRadioIOS {
    margin-left: .6rem;
}

.pop-login .step1-os-radio img {
    width: .4rem;
}

.pop-login .step1-os-radio span {
    vertical-align: middle;
    user-select: none;
}

.pop-login .content .step-info {
    position: relative;
    top: 2.14rem;
    left: 2.2rem;
}

.pop-login .step-info .order-select {
    width: 2rem;
    height: 0.6rem;
    /* margin-top: 0.12rem; */
    margin-right: 0.06rem;
    /* padding: 0 25% 0 30%; */
    padding-left: 1%;
    display: inline-block;
    vertical-align: middle;
    background: #E7E3D7 url(../images/order-select-1.png) no-repeat 96% center;
    background-size: 0.31rem 0.21rem;
    border: 0.01rem solid #9B7842;
    /* box-shadow: 0.03rem 0.03rem 0.03rem #babfd5 inset; */
    font-size: .24rem;
    font-weight: 700;
    color: #513A32;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}

/* .pop-login .step-info::after {
    content: '';
    position: absolute;
    width: .02rem;
    height: .3rem;
    background-color: #666;
    left: 1.7rem;
    top: .08rem;
} */
.pop-login .step-info input {
    width: 4rem;
    height: .69rem;
    /* margin-top: .12rem; */
    margin-left: .2rem;
    /* background: #fff; */
    vertical-align: middle;
    border: 0 solid #ffffff;
    /* box-shadow: .03rem .03rem .03rem #babfd5 inset; */
    font-size: .24rem;
    font-weight: 700;
    color: #454545;
    text-align: center;
    text-align-last: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.pop-login .step-info input::-webkit-input-placeholder {
    color: #565868;
}

.pop-login .step-info input:-moz-placeholder {
    color: #565868;
}

.pop-login .step-info input:-ms-input-placeholder {
    color: #565868;
}

.pop-login-checkbox-wrapper {
    position: absolute;
    display: flex;
    top: 4.9rem;
    left: 1.9rem;
}

.pop-login-checkbox-wrapper .pop-login-checkbox {
    display: inline-block;
    width: 0.15rem;
    height: 0.15rem;
    /* background: url(../images/login-checkbox.png) no-repeat;
    background-size: 100%; */
    cursor: pointer;
}

.pop-login-checkbox-wrapper .pop-login-checkbox:checked::after {
    content: '';
    display: inline-block;
    width: .16rem;
    height: .19rem;
    background: url(../images/login-checkbox-active.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    margin-top: -0.1rem;
}

.pop-login-checkbox-wrapper .pop-login-checkbox-hint {
    display: inline-block;
    width: 3.07rem;
    height: 0.18rem;
    margin-left: 0.1rem;
    margin-top: -0.096rem;
}

.pop-login .order-btn {
    text-align: center;
    position: relative;
    top: 3.7rem;
    left: -0.1rem;
}

.pop-login .pop-btn-login {
    width: 6.14rem;
    display: inline-block;
    position: relative;
}

.pop-login .pop-btn-login img {
    /* width: 1.69rem; */
}

.pop-login .btn-query {
    width: 1.12rem;
    display: inline-block;
    vertical-align: middle;
}

.pop-login .order-hint {
    width: 5.24rem;
    margin: .3rem auto;
}

.pop-login .step-fb {
    position: relative;
    left: 5.16rem;
    top: 2.36rem;
}

.pop-login .step-fb a {
    display: inline-block;
    vertical-align: middle;
    margin-left: .2rem;
}

.pop-login .step-fb a .fb-like {
    margin: 0 .6rem;
    display: block;
    -webkit-transform: scale(2.1);
    -moz-transform: scale(2.1);
    -ms-transform: scale(2.1);
    -o-transform: scale(2.1);
    transform: scale(2.1);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.pop-login .step-gift {
    position: absolute;
    top: 5.76rem;
    left: 6.8rem;
}

.pop-login .step-gift .step-gift-btn {
    position: absolute;
    width: 2rem;
    height: .71rem;
    background: url("../images/step-gift-btn.png") no-repeat;
    background-size: 100%;
}

.pop-login .step-gift .step-gift-btn.over {
    background-image: url("../images/step-gift-got.png");
}

/* 分享邀请链接 */
.share-code .pop-share-code-nei {
    width: 7.4rem;
    height: 5.48rem;
    background: url("../images/pop-share-code-bg.png") no-repeat;
    background-size: 100%;
    text-align: center;
    font-size: 0;
}

.pop-share-code-nei p {
    width: 3rem;
    margin: auto;
    line-height: .5rem;
    font-size: .28rem;
    color: #000;
    text-align: center;
}

.share-code .code-btns {
    padding-top: 2.45rem;
    /* padding-left: 0rem; */
    display: flex;
    justify-content: center;
}

.share-code .share-code-btn {
    /* width: 2rem; */
    display: inline-block;
    margin: 0 0.4rem;
}

.code-btns .fb-btn {
    margin-top: 0;
}

.code-btns img {
    width: 0.96rem;
    height: 0.96rem;
}

.code-btns .fb-btn img {
    /* width: .61rem; */
}

.pop-share-code .dia-close {
    left: 6.9rem;
    top: -0rem;
}

/* .pop-share-code .dia-close{
    width: .50rem;
    height: .50rem;
    position: absolute;
    top: -.3rem;
    right: -.6rem;
    background:url(../images/btn-close.png);
    background-size: 100%;
    cursor:pointer;
    z-index: 101;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.dia-close:hover{
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
} */

/* 第一次注册分享facebook */
.fb-like-container .fb-like-inner {
    position: relative;
    width: 9.12rem;
    height: 2.94rem;
    background: url(../images/order-success.png);
    background-size: 100%;
}

.fb-like-container .dia-close {
    width: 1.17rem;
    height: 1.17rem;
    position: absolute;
    top: -.4rem;
    right: -.6rem;
    background: url("../images/pop-close.png") no-repeat;
    background-size: 100%;
}

.fb-like-container .fb-like-inner {
    display: flex;
    justify-content: center;
}

.fb-like-container .pop-fb-like-btn {
    margin-top: 2.1rem;
    display: block;
    transform: scale(1.5);
}

/* 三国礼包码 */
.reward-code-pop {
    width: 4.62rem;
    position: relative;
    height: 6.77rem;
    background: url('../images/reward-code-pop.png') no-repeat;
    background-size: 100%;
}

.reward-code-pop-clone {
    width: 0.39rem;
    height: 0.39rem;
    background: url('../images/appointment-clone.png') no-repeat;
    background-size: 100%;
    position: absolute;
    right: -0.5rem;
    cursor: pointer;
    top: -0.5rem;
}

#rewordCode {
    height: 8.42rem;

}

#rewordCode>li:first {
    color: #694C2A;
    font-size: 0.14rem;
}

#rewordCode>.rewordbg:nth-child(1) {
    position: absolute;
    top: 0.7rem;
    height: 0.32rem;
    /* position: relative;
    left: 0.58rem;
    line-height: 0.65rem;
    margin-bottom: 0.2rem;
    height: 0.58rem;
    display: flex; */
}

#rewordCode>.rewordbg:nth-child(2) {
    position: absolute;
    top: 1.5rem;
}

#rewordCode>.rewordbg:nth-child(3) {
    position: absolute;
    top: 1.85rem;
}

#rewordCode>.rewordbg:nth-child(4) {
    position: absolute;
    top: 2.18rem;
}

#rewordCode>.rewordbg:nth-child(5) {
    position: absolute;
    top: 2.9rem;
}

#rewordCode>.rewordbg:nth-child(6) {
    position: absolute;
    bottom: 2.86rem;
}

#rewordCode>.rewordbg:nth-child(7) {
    position: absolute;
    bottom: 2.56rem;
}

#rewordCode>.rewordbg:nth-child(8) {
    position: absolute;
    bottom: 2.25rem;
}

#rewordCode>.rewordbg:nth-child(9) {
    position: absolute;
    bottom: 1.74rem;
}

#rewordCode>.rewordbg:nth-child(10) {
    position: absolute;
    bottom: 1.28rem;
}

#rewordCode>.rewordbg:nth-child(11) {
    position: absolute;
    bottom: 0.62rem;
}

#rewordCode>.rewordbg:nth-child(12) {
    position: absolute;
    bottom: 0.3rem;
}

#rewordCode>.rewordbg:nth-child(2)>.name {
    margin-right: 1rem;
}

#rewordCode>.rewordbg:nth-child(5)>.name {
    margin-right: 1rem;
}

#rewordCode>.rewordbg:nth-child(6)>.name {
    margin-right: 0.2rem;
}

#rewordCode>.rewordbg:nth-child(7)>.name {
    margin-right: 0.2rem;
}

#rewordCode>.rewordbg:nth-child(8)>.name {
    margin-right: 0.2rem;
}

.rewordbg {

    /* background: url('../images/rewordbg.png') no-repeat; */
    width: 4.3rem;
    /* height:0.37rem; */
    background-size: 100%;
    /* position: absolute;
    top: 0.9rem;
    left: 50%;
    transform: translate(-50%, -50%); */
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    flex: 1;
}

.rewordbg .name {
    color: #694C2A;
    /* white-space:pre-wrap; */
    font-size: 0.12rem;
    /* background: #CBB290;
    border: 1px solid #937B5F; */
}

/* .rewordbg>div{
    display: flex;
    align-items: center;
    justify-content: space-between;
} */
.rewordbg>.code {
    color: #694C2A;
    text-align: center;
    margin-right: 0.1rem;
    font-size: 0.12rem;

}

.rewordbg>div>.btn-copy {
    background: url('../images/copy-code.png') no-repeat;
    width: 0.34rem;
    height: 0.18rem;
    background-size: 100%;
    cursor: pointer;
    margin-left: 0.1rem;
}

.reword {
    display: flex;
    align-items: center;
}

.reword>.code {
    font-size: 0.12rem;
    color: #694C2A;
}

/* 滚动词条 */
.roll>li {
    list-style: none;
}

/* 领取奖励 */



/* 查询兑换码 */
.query-code-container .query-code-bg {
    position: relative;
    background: url(../images/query-code-bg.png) no-repeat;
    background-size: 100%;
    width: 6.25rem;
    height: 3.21rem;
}

.query-code-bg .query-code-inner-1 .code-name-1 {
    color: #A9A1A1;
    font-size: 0.28rem;
    width: 2rem;
    position: absolute;
    top: 1.64rem;
    left: 2.05rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    letter-spacing: -0.03rem;
    text-align: right;
}

.query-code-bg .query-code-inner-1 .code-num-1 {
    color: #A9A1A1;
    font-size: 0.32rem;
    width: 1.5rem;
    position: absolute;
    top: 1.6rem;
    left: 4.2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}

.query-code-bg .query-code-inner-1 .code-copy-1 {
    font-size: 0.26rem;
    font-weight: lighter;
    border-bottom: 0.01rem solid #A9A1A1;
    color: #A9A1A1;
    letter-spacing: -0.02rem;
    position: absolute;
    top: 1.77rem;
    left: 5.8rem;
    line-height: 1;
}

.query-code-bg .query-code-inner-2 .code-name-2 {
    color: #A9A1A1;
    font-size: 0.28rem;
    width: 2rem;
    position: absolute;
    top: 2.03rem;
    left: 2.05rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    letter-spacing: -0.03rem;
    text-align: right;
}

.query-code-bg .query-code-inner-2 .code-num-2 {
    color: #A9A1A1;
    font-size: 0.32rem;
    width: 1.5rem;
    position: absolute;
    top: 1.99rem;
    left: 4.2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}

.query-code-bg .query-code-inner-2 .code-copy-2 {
    font-size: 0.26rem;
    font-weight: lighter;
    border-bottom: 0.01rem solid #A9A1A1;
    color: #A9A1A1;
    letter-spacing: -0.02rem;
    position: absolute;
    top: 2.15rem;
    left: 5.8rem;
    line-height: 1;
}

.query-code-bg .query-code-inner-3 .code-name-3 {
    color: #A9A1A1;
    font-size: 0.28rem;
    width: 2rem;
    position: absolute;
    top: 2.41rem;
    left: 2.05rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    letter-spacing: -0.03rem;
    text-align: right;
}

.query-code-bg .query-code-inner-3 .code-num-3 {
    color: #A9A1A1;
    font-size: 0.32rem;
    width: 1.5rem;
    position: absolute;
    top: 2.37rem;
    left: 4.2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}

.query-code-bg .query-code-inner-3 .code-copy-3 {
    font-size: 0.26rem;
    font-weight: lighter;
    border-bottom: 0.01rem solid #A9A1A1;
    color: #A9A1A1;
    letter-spacing: -0.02rem;
    position: absolute;
    top: 2.53rem;
    left: 5.8rem;
    line-height: 1;
}

.query-code-bg .query-code-inner-4 .code-name-4 {
    color: #A9A1A1;
    font-size: 0.28rem;
    width: 2rem;
    position: absolute;
    top: 2.8rem;
    left: 2.05rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    letter-spacing: -0.03rem;
    text-align: right;
}

.query-code-bg .query-code-inner-4 .code-num-4 {
    color: #A9A1A1;
    font-size: 0.32rem;
    width: 1.5rem;
    position: absolute;
    top: 2.76rem;
    left: 4.2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}

.query-code-bg .query-code-inner-4 .code-copy-4 {
    font-size: 0.26rem;
    font-weight: lighter;
    border-bottom: 0.01rem solid #A9A1A1;
    color: #A9A1A1;
    letter-spacing: -0.02rem;
    position: absolute;
    top: 2.92rem;
    left: 5.8rem;
    line-height: 1;
}

.query-code-container .query-code-bg .query-confirm {
    position: absolute;
    background: url(../images/note-confirm.png) no-repeat;
    background-size: 100%;
    width: 2.13rem;
    height: 0.67rem;
    top: 2.5rem;
    left: 50%;
    transform: translate(-50%, -50%);
}

.queryCode-text {
    display: flex;
    position: absolute;
    top: 0.96rem;
    left: 3.3rem;
    align-items: center;
}

.queryCode-btn {
    background: url(../images/copy-code.png) no-repeat;
    background-size: 100%;
    width: 0.34rem;
    height: 0.18rem;
    cursor: pointer;
    margin-left: 0.2rem;
}

/* 第一次注册引导跳转商店 */
.reg-success-container .pop-success-k {
    position: relative;
    background: url(../images/reg-success-bg.png) no-repeat;
    background-size: 100%;
    width: 9.85rem;
    height: 5.68rem;
}

.pop-reg-success .dia-close {
    top: 2.2rem;
    left: 9.4rem;
}

.pop-reg-success .pop-success-inner {
    /* width: 6.56rem; */
    /* margin-left: 4rem; */
    position: relative;
    font-size: 0;
    text-align: center;
}

.pop-success-k .pop-success-inner p {
    color: #A9A1A1;
    font-size: 0.32rem;
    width: 1.5rem;
    position: absolute;
    top: 0.94rem;
    left: 3.8rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}

.pop-success-k .pop-success-inner .code-copy a {
    font-size: 0.26rem;
    font-weight: lighter;
    border-bottom: 0.01rem solid #A9A1A1;
    color: #A9A1A1;
    letter-spacing: -0.02rem;
    position: absolute;
    top: 1.1rem;
    left: 5.35rem;
    line-height: 1;
}

.res-success-container .pop-res-bg {
    position: relative;
    background: url(../images/res-success-bg.png) no-repeat;
    background-size: 100%;
    width: 6.06rem;
    height: 7.21rem;
    top: -0.3rem;
    left: -0.07rem;
}

.res-success-container .dia-close {
    top: 0rem;
    left: 6rem;
}

.pop-query-diamond {
    text-align: center;
    position: absolute;
    top: 1.09rem;
    left: 5.5rem;
}

.pop-query-diamond span {
    font-size: 0.55rem;
    -webkit-text-size-adjust: none;
    font-weight: 700;
    margin-left: 0.1rem;
    background-image: -webkit-linear-gradient(top, #FFF2F1, #FADE71);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pop-success-inner .pop-success-btn {
    position: absolute;
    width: 6.98rem;
    left: 1.345rem;
    top: 4.8rem;
}

.pop-success-inner .pop-success-btn a {
    display: inline-block;
    width: 1.57rem;
    margin-left: 0.19rem;
}

.pop-success-inner .pop-success-btn a:nth-child(3) {
    display: inline-block;
    width: 1.55rem;
    margin-left: 0.19rem;
}

.pop-success-inner .pop-success-btn a:nth-child(4) {
    display: inline-block;
    width: 1.49rem;
    height: 0.43rem;
    margin-left: 0.19rem;
}

.pop-res-success .pop-res-bg a {
    position: absolute;
    width: 2.17rem;
    height: 0.6rem;
    top: 6.1rem;
    left: 1.95rem;
}

/* .pop-success-inner .pop-success-btn a::before{
    content: '';
    position: absolute;
    background: url("../images/reg-success-appstore-tip.png") no-repeat;
    background-size: 100%;
    width: 1.24rem;
    height: 0.33rem;
    top: -0.3rem;
    left: 1.6rem;
    z-index: 1;
    animation: inner 3s ease-in-out infinite;
} */
@keyframes inner {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(0.1rem);
        transform: translateY(0.1rem);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.pop-success-inner .pop-success-btn a:nth-child(2) {
    margin-top: -0.05rem;
}

.pop-success-inner .reg-success-qrcode {
    width: 1.55rem;
    height: 1.55rem;
    position: absolute;
    top: 5.1rem;
    left: 3.8rem;
}

.pop-success-inner .reg-success-qrcode-line {
    position: absolute;
    width: 1.55rem;
    height: .11rem;
    top: 5.1rem;
    left: 3.8rem;
    animation: moveLine 4s linear infinite;
}

@keyframes moveLine {
    0% {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, 1.45rem, 0);
        -webkit-transform: translate3d(0, 1.45rem, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
}

.draw-frame .draw-cloce {
    width: .28rem;
    height: .32rem;
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
    background: url(../image/pop/appointment-clone.png) no-repeat;
    background-size: 100%;
}

.introduce-content {}

/* 注意事项弹窗1 */
.note-container .note-bg {
    background: url("../image/pop/pop-Privacy.png") no-repeat;
    background-size: 100%;
    position: relative;
    width: 8.71rem;
    height: 5.72rem;
}

.activity-rules  .rules-bg {
    background: url(../image/pop/activity-rules.png) no-repeat;
    background-size: 100%;
    position: relative;
    width: 8.6rem;
    height: 5.13rem;
}

.activity-rules .dia-close {
    top: 0.2rem;
    right: 0.2rem;
}

.born-first-container  .born-first-bg {
    background: url(../image/pop/first-born.png) no-repeat;
    background-size: 100%;
    position: relative;
    width: 5.78rem;
    height: 4.14rem;
}
.answer-container  .answer-bg {
    background: url(../image/pop/answer.png) no-repeat;
    background-size: 100%;
    position: relative;
    width: 5.78rem;
    height: 4.14rem;
}

.answer-after-container  .answer-after-bg {
    background: url(../image/pop/answer-true-bg.png) no-repeat;
    background-size: 100%;
    position: relative;
    width: 6.36rem;
    height: 4.07rem;
}
.answer-after-container .answer-after-bg .answer-confirm {
    position: absolute;
    background: url(../image/pop/answer-true-btn.png) no-repeat;
    background-size: 100%;
    width: 2.53rem;
    height: 0.52rem;
    bottom: -0.9rem;
    margin: 0 auto;
    left: 0rem;
    right: 0rem;
}

.answer-false-container {
    /* display: flex; */
    justify-content: center;
    align-items: center;
}
.answer-false-container  .answer-false-content {
    background: url(../image/pop/answer-false-bg.png) no-repeat;
    background-size: 100%;
    position: relative;
    width: 6.36rem;
    height: 4.07rem;
    transform: initial;
    top: initial;
    left: initial;
}
.answer-false-container .answer-false-btn {
    position: absolute;
    background: url(../image/pop/answer-false-btn.png) no-repeat;
    background-size: 100%;
    width: 2.53rem;
    height: 0.52rem;
    bottom: -0.9rem;
    margin: 0 auto;
    left: 0rem;
    right: 0rem;
}

.born-container  .born-bg {
    background: url(../image/pop/born-bg.png) no-repeat;
    background-size: 100%;
    position: relative;
    width: 5.78rem;
    height: 4.14rem;
}
.award-container  .award-bg {
    background: url(../image/pop/award-bg.png) no-repeat;
    background-size: 100%;
    position: relative;
    width: 8.6rem;
    height: 5.61rem;
}
.award-full-container  .award-full-bg {
    background: url(../image/pop/award-full.png) no-repeat;
    background-size: 100%;
    position: relative;
    width: 5.78rem;
    height: 4.14rem;
}
.born-fail-container  .born-fail-bg {
    background: url(../image/pop/born-fail.png) no-repeat;
    background-size: 100%;
    position: relative;
    width: 5.78rem;
    height: 4.14rem;
}
.born-suc-container  .born-suc-bg {
    background: url(../image/pop/born-suc.png) no-repeat;
    background-size: 100%;
    position: relative;
    width: 5.78rem;
    height: 4.14rem;
}
.code-container  .code-bg {
    background: url(../image/pop/code-award.png) no-repeat;
    background-size: 100%;
    position: relative;
    width: 4.63rem;
    height: 3.32rem;
}
.code-full-container  .code-full-bg {
    background: url(../image/pop/code-award-2.png) no-repeat;
    background-size: 100%;
    position: relative;
    width: 4.63rem;
    height: 3.32rem;
}
.born-first-container .dia-close {
    top: -0.2rem;
    left: 5.7rem;
}

.code-full-container .dia-close {
    top: -0.3rem;
    left: 4.7rem;
}
.code-container .dia-close {
    top: -0.3rem;
    left: 4.7rem;
}
.award-full-container .dia-close {
    top: -0.3rem;
    left: 5.7rem;
}
.born-suc-container .dia-close {
    top: -0.3rem;
    left: 5.7rem;
}
.born-fail-container .dia-close {
    top: -0.3rem;
    left: 5.7rem;
}
.answer-after-container .dia-close {
    top: -0.3rem;
    left: 5.7rem;
}

.answer-container .dia-close {
    top: -0.3rem;
    left: 5.7rem;
}
.born-container .dia-close {
    top: -0.3rem;
    left: 5.7rem;
}

.born-first-container .born-first-confirm {
    position: absolute;
    background: url(../image/pop/btn-Privacy.png) no-repeat;
    background-size: 100%;
    width: 1.5rem;
    height: 0.49rem;
    bottom: 0.4rem;
    margin: 0 auto;
    left: 0rem;
    right: 0rem;
}
.code-full-container .code-full-confirm {
    position: absolute;
    background: url(../image/pop/btn-Privacy.png) no-repeat;
    background-size: 100%;
    width: 1.5rem;
    height: 0.49rem;
    bottom: 0.4rem;
    margin: 0 auto;
    left: 0rem;
    right: 0rem;
}
.code-container .code-confirm {
    position: absolute;
    background: url(../image/pop/btn-Privacy.png) no-repeat;
    background-size: 100%;
    width: 1.5rem;
    height: 0.49rem;
    bottom: 0.4rem;
    margin: 0 auto;
    left: 0rem;
    right: 0rem;
}
.award-container .award-confirm {
    position: absolute;
    background: url(../image/pop/award-btn.png) no-repeat;
    background-size: 100%;
    width: 1.85rem;
    height: 0.56rem;
    bottom: 0.3rem;
    margin: 0 auto;
    left: 0.3rem;
    right: 0rem;
}
.award-full-container .award-full-confirm {
    position: absolute;
    background: url(../image/pop/btn-Privacy.png) no-repeat;
    background-size: 100%;
    width: 1.5rem;
    height: 0.49rem;
    bottom: 0.4rem;
    margin: 0 auto;
    left: 0.3rem;
    right: 0rem;
}
.answer-container .answer-bg .answer-confirm {
    position: absolute;
    background: url(../image/pop/btn-Privacy.png) no-repeat;
    background-size: 100%;
    width: 1.5rem;
    height: 0.49rem;
    bottom: 0.6rem;
    margin: 0 auto;
    left: 0rem;
    right: 0rem;
}
.born-container .born-bg .born-confirm {
    position: absolute;
    background: url(../image/pop/btn-Privacy.png) no-repeat;
    background-size: 100%;
    width: 1.5rem;
    height: 0.49rem;
    bottom: 0.6rem;
    margin: 0 auto;
    left: 1.8rem;
    right: 0rem;
}
.born-suc-container .born-suc-bg .born-confirm {
    position: absolute;
    background: url(../image/pop/btn-Privacy.png) no-repeat;
    background-size: 100%;
    width: 1.5rem;
    height: 0.49rem;
    bottom: 0.35rem;
    margin: 0 auto;
    left: 0rem;
    right: 0rem;
}
.born-suc-container .born-suc-bg div:nth-child(1) {
    position: absolute;
    background: url(../image/pop/pop-long1.png) no-repeat;
    background-size: 100%;
    opacity: 1;
    width: 2.68rem;
    height: 2.17rem;
    bottom: 1rem;
    margin: 0 auto;
    left: 0rem;
    right: 0rem;
}
.born-suc-container .born-suc-bg div:nth-child(2) {
    position: absolute;
    background: url(../image/pop/pop-long2.png) no-repeat;
    background-size: 100%;
    opacity: 1;
    width: 2.68rem;
    height: 2.17rem;
    bottom: 1rem;
    margin: 0 auto;
    left: 0rem;
    right: 0rem;
}
.born-suc-container .born-suc-bg div:nth-child(3) {
    position: absolute;
    background: url(../image/pop/pop-long3.png) no-repeat;
    background-size: 100%;
    opacity: 1;
    width: 2.68rem;
    height: 2.17rem;
    bottom: 1rem;
    margin: 0 auto;
    left: 0rem;
    right: 0rem;
}
.born-suc-container .born-suc-bg div:nth-child(4) {
    position: absolute;
    background: url(../image/pop/pop-long4.png) no-repeat;
    background-size: 100%;
    opacity: 1;
    width: 2.68rem;
    height: 2.17rem;
    bottom: 1rem;
    margin: 0 auto;
    left: 0rem;
    right: 0rem;
}
.born-container .born-bg .born-cancel {
    position: absolute;
    background: url(../image/pop/cancel-born.png) no-repeat;
    background-size: 100%;
    width: 1.5rem;
    height: 0.49rem;
    bottom: 0.6rem;
    margin: 0 auto;
    left: -1.8rem;
    right: 0rem;
}
.note-container .note-bg .note-confirm {
    position: absolute;
    background: url(../image/pop/btn-Privacy.png) no-repeat;
    background-size: 100%;
    width: 2.59rem;
    height: 0.79rem;
    bottom: 0.46rem;
    margin: 0 auto;
    left: 0rem;
    right: 0rem;
}

.note-content .note-cloce {
    width: .28rem;
    height: .32rem;
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
    background: url(../image/appointment-clone.png) no-repeat;
    background-size: 100%;
}
.note-content .dia-close{
    top: 0.2rem;
    right: 0.2rem;
}
.note2-content .note-cloce {
    width: .23rem;
    height: .25rem;
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
    background: url(../image/appointment-clone.png) no-repeat;
    background-size: 100%;
}

/* 注意事项弹窗2 */
.note2-container .note2-bg {
    background: url("../image/pop/note2-bg.png") no-repeat;
    background-size: 100%;
    width: 8.6rem;
    height: 3.38rem;
}

.note2-container .note2-bg .note-confirm {
    position: absolute;
    background: url(../image/pop/btn-Privacy.png) no-repeat;
    background-size: 100%;
    width: 2.59rem;
    height: 0.79rem;
    bottom: 0.5rem;
    margin: 0 auto;
    left: 0rem;
    right: 0rem;
}

/* 活动说明弹窗 */


/* 奖励说明弹窗 */
.reward-container {
    /* background: transparent; */
}

.reward-container .reward-cloce-bg {
    width: 5.32rem;
    height: 6.89rem;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

}

.reward-container .reward-cloce-bg .reward-cloce {
    width: .42rem;
    cursor: pointer;
    height: .36rem;
    position: absolute;
    right: -0.5rem;
    top: -0.2rem;
    background: url(../image/appointment-clone.png) no-repeat;
    background-size: 100%;
}

.reward-container .reward-content {
    width: 5.32rem;
    height: 6.89rem;
    box-sizing: border-box;
    overflow: hidden;
    padding: .2rem 0 .2rem;
    background: url(../image/reward-container-bg.png) no-repeat;
    background-size: 100%;
}

.reward-container .reward-content .reward-scoll {
    width: 110%;
    margin-left: -0.168rem;
    height: 6.1rem;
    overflow-y: scroll;
}

.reward-container .reward-content .reward-bg {
    margin: 0 auto;
    width: 4.44rem;
    height: 6.91rem;
    background: url(../image/reward-container-pop.png) no-repeat;
    background-size: 100%;

}

/* 复制按钮弹窗 */
.copy-container .copy-bg {
    background: url("../images/copy-bg.png") no-repeat;
    background-size: 100%;
    width: 9.85rem;
    height: 5.67rem;
}

.copy-container .copy-bg .copy-confirm {
    position: absolute;
    background: url(../images/note-confirm.png) no-repeat;
    background-size: 100%;
    width: 2.13rem;
    height: 0.67rem;
    top: 4.2rem;
    left: 3.85rem;
}

/* 注销登录弹窗 */
.logout-container .pop-logout-k {
    width: 5.96rem;
    height: 2.2rem;
    background: url("../images/pop-logout-bg.png") no-repeat;
    background-size: 100%;
}

.pop-logout .dia-close {
    left: 6rem;
    top: -.5rem;
}

.pop-logout a.logout-btn {
    display: block;
    width: 2.21rem;
    height: .69rem;
    position: absolute;
    top: 1.2rem;
    left: 1.9rem;
}

/* 灵魂兑换弹窗 */
.reach-pop {
    width: 6.72rem;
    height: 4.3rem;
    background: url(../image/pop-reward.png) no-repeat;
    background-size: 100%;
    position: relative;
}

.reach-pop .reach-text {
    width: 4.5rem;
    text-align: center;
    color: #fff;
    position: absolute;
    font-size: .28rem;
    font-family: '맑은 고딕';
    top: 2.62rem;
    left: 50%;
    transform: translateX(-50%);
}

.reach-pop .reach-num {
    font-size: .28rem;
    color: #fef6d1;
    position: absolute;
    top: 3.12rem;
    left: 4.16rem;
    text-shadow: 0px 0px 10px #fef6d1;

}

.reach-pop .rech-button {
    width: 2.22rem;
    height: .47rem;
    position: absolute;
    background: url(../image/btn-reward-btn.png) no-repeat;
    background-size: 100%;
    left: 50%;
    transform: translateX(-33%);
    bottom: 0;
    cursor: pointer;
}

/* 抽奖弹窗 */
.gift .pop-gift {
    left: 50%;
    /* display: flex;
    flex-direction: column;
    align-items: center; */
}

.gift .pop-gift .pop-gift-k {
    left: 50%;
    z-index: 200;
}

.gift .pop-gift .pop-gift-k .pop-bag {
    width: 7.64rem;
    height: 7.64rem;
}

.pop-gift a.lottery-share {
    width: 2.02rem;
    position: absolute;
    top: 4.3rem;
    left: 5.1rem;
    z-index: 2;
}

.pop-gift a.lottery-invite {
    width: 4rem;
    position: absolute;
    top: 8.5rem;
    left: 3rem;
    z-index: 2;
}

.pop-gift a.lottery-share img {
    /* width: 1.25rem; */
}

.pop-gift .dia-close {
    left: 5.2rem;
    top: -1.5rem;
}

.pop-gift-nei {
    width: 6.56rem;
    /* margin-left: .54rem; */
    padding-top: 1.2rem;
    position: relative;
    font-size: 0;
    text-align: center;
}

.pop-gift-nei h2 {
    padding-top: 1rem;
    padding-bottom: .1rem;
}

.pop-gift-nei .pop-bag {
    width: 2.76rem;
    position: relative;
    top: .8rem;
    left: 1.2rem;
    animation: bubble 5s infinite;
}

.pop-gift-nei .lottery-pop-btn {
    /* width: 1.98rem; */
    position: absolute;
    top: 4.1rem;
    left: -2.5rem;
}

.pop-gift-nei .lottery-pop-btn a {
    /* margin-bottom: .05rem; */
    display: inline-block;
    width: 2.54rem;
    height: .97rem;
    margin-right: .5rem;
}

.pop-gift .dia-close {
    top: 1rem;
    left: 6.5rem;
}

.pop-gift-header {
    width: 8rem;
    height: 1.6rem;
    left: -2rem;
    top: -1.5rem;
    position: absolute;
}

.pop-gift-header img:nth-child(1) {
    width: 3.14rem;
    height: 0.54rem;
    display: block;
    margin: 0 auto;
}

.pop-gift-header .pop-gift-header-hint {
    width: auto;
    height: .29rem;
    display: block;
    margin: 0.3rem auto 0.5rem;
}

/* 卡牌 */
.pop-gift-flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
    /* 元素变形的原点 */
    transform-origin: center center;
    /* 背部可见 翻转更立体 */
    backface-visibility: visible;
    left: 0.4rem;
    /* top: -0.3rem; */
    width: 3.20rem;
    height: 5.48rem;
}

.pop-gift-front,
.pop-gift-back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

/* 卡片前面内容 */
.pop-gift-front {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    width: 3.20rem;
    height: 5.48rem;
}

.pop-gift-front-btn {
    width: 2.03rem;
    height: .66rem;
    position: absolute;
    top: 5.8rem;
    left: 1rem;
    z-index: 101;
}

.pop-gift-front .pop-gift-front-card {
    width: 3.20rem;
    height: 5.48rem;
}

/* 卡片后面内容 */
.pop-gift-back {
    z-index: 2;
    width: 3.20rem;
    height: 5.48rem;
}

.pop-gift-back-btn {
    width: 2.03rem;
    height: .66rem;
    position: absolute;
    top: 5.8rem;
    left: 1rem;
    z-index: 101;
}

.pop-gift-back .pop-gift-back-cardOne {
    width: 3.20rem;
    height: 5.48rem;
}

.pop-gift-back .pop-gift-back-cardTwo {
    width: 3.20rem;
    height: 5.48rem;
}

/* 翻转180度 */
.pop-gift-k .pop-gift-flipper.active {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    animation: animal 0.5s;
    animation-timing-function: ease-out;
}

@keyframes animal {
    0% {
        transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
    }

    /* 20%{
      transform: rotateY(720deg);
      -ms-transform: rotateY(720deg);
      -webkit-transform: rotateY(720deg);
    }
    40%{
        transform: rotateY(720deg);
        -ms-transform: rotateY(720deg);
        -webkit-transform: rotateY(720deg);
    }
    60%{
        transform: rotateY(1080deg);
        -ms-transform: rotateY(1080deg);
        -webkit-transform: rotateY(1080deg);
    }
    80%{
        transform: rotateY(1440deg);
        -ms-transform: rotateY(1440deg);
        -webkit-transform: rotateY(1440deg);
    } */
    100% {
        transform: rotateY(900deg);
        -ms-transform: rotateY(900deg);
        -webkit-transform: rotateY(900deg);
    }
}

.pop-gift-k .pop-gift-flipper.active.front {
    transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    /* IE 9 */
    -moz-transform: rotateY(0deg);
    /* Firefox */
    -webkit-transform: rotateY(0deg);
    /* Safari 和 Chrome */
    -o-transform: rotateY(0deg);
    /* Opera */
}

.pop-gift-k .pop-gift-flipper.active.back {
    transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    /* IE 9 */
    -moz-transform: rotateY(180deg);
    /* Firefox */
    -webkit-transform: rotateY(180deg);
    /* Safari 和 Chrome */
    -o-transform: rotateY(180deg);
    /* Opera */
}

.pop-gift-light {
    width: 4rem;
    height: 6.4rem;
    background: url("../images/pop-gift-light.png") no-repeat;
    background-size: 100%;
    animation: myfirst 3s infinite;
    position: absolute;
    top: -0.47rem;
    left: -0.4rem;
    pointer-events: none;
    z-index: -1;
}

@keyframes myfirst {
    0% {
        transform: scale(0.95);
        -webkit-transform: scale(0.95);
    }

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

    100% {
        transform: scale(0.95);
        -webkit-transform: scale(0.95);
    }
}

.pop-gift .pop-gift-unlock {
    width: 2.64rem;
    height: 2.80rem;
    position: absolute;
    left: -2.5rem;
    top: 3.4rem;
}

.pop-gift-k .pop-gift-cyberpunk-title,
.pop-gift-k .pop-gift-cyberpunk-title::after {
    width: 4.57rem;
    height: 1.24rem;
    position: absolute;
    left: .16rem;
    top: 4.5rem;
    background: url("../images/pop-gift-cyberpunk-title.png") no-repeat;
    background-size: 100%;
}

.pop-gift-k .pop-gift-cyberpunk-title::after {
    content: '';
    top: 0;
    left: 0;
    visibility: hidden;
    animation: cyberpunk 1s infinite;
    animation-timing-function: steps(1, end);
}

.pop-star {
    position: absolute;
    top: 1rem;
    z-index: 10;
    /* 不影响层级下面的组件鼠标事件 */
    /* pointer-events:none; */
    /* background-color: brown; */
}

.pop-star ul {
    display: flex;
    flex-direction: row;
    list-style: none;
}

.pop-star .pop-star1 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: -0.6rem;
    animation: star1 2s infinite ease-out;
}

.pop-star .pop-star2 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: -0.5rem;
    left: 3rem;
    animation: star1 1s infinite ease-out;
}

.pop-star .pop-star3 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: 2rem;
    left: 3.5rem;
    animation: star1 2s 0.5s infinite ease-out;
}

.pop-star .pop-star4 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: 2.8rem;
    animation: star1 1s infinite ease-out;
}

.pop-star .pop-star5 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: 1rem;
    left: 5.2rem;
    animation: star1 1s 1s infinite ease-out;
}

.pop-star .pop-star6 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: 4.2rem;
    left: 3.6rem;
    animation: star1 2s infinite ease-out;
}

@keyframes star1 {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

.pop-gift-share {
    width: 5.07rem;
    height: 0.92rem;
    position: absolute;
    top: 5.6rem;
    left: 1.35rem;
    z-index: 300;
}

.pop-gift-share-first {
    width: 5.34rem;
    height: 1.46rem;
    position: absolute;
    top: 4.8rem;
    left: 1.2rem;
    z-index: 300;
}

/* 七星卡解锁弹窗 */
.pop-unlock .pop-unlock-k {
    width: 6.28rem;
    height: 6.90rem;
    background: url("../images/pop-unlock-k.png") no-repeat;
    background-size: 100%;
}

.pop-unlock .unlock-close {
    width: .32rem;
    height: .32rem;
    position: absolute;
    top: 0.1rem;
    left: 6.5rem;
    background: url("../images/pop-close.png") no-repeat;
    background-size: 100%;
}

/* 活动说明弹窗 */
.pop-draw-description .pop-draw-description-k {
    width: 8.09rem;
    height: 9.83rem;
    background: url(../images/pop-draw-description-k.png) no-repeat;
    background-size: 100%;
    overflow: hidden;
}

.pop-draw-description-nei {
    width: 6.18rem;
    margin-left: 0.97rem;
    position: relative;
    /* overflow-y: scroll; */
    height: 6.79rem;
    top: 2rem;
    background: url(../images/pop-draw-description-nei.png) no-repeat;
    background-size: 100%;
}

.pop-draw-description-k img {
    width: 5.44rem;
}

.draw-description .dia-close {
    top: 0.5rem;
    left: 8.2rem;
}

/* 我的七行卡弹窗 */
.pop-mycard {
    width: 6.66rem;
    height: 8.30rem;
    background: url("../images/pop-mycard.png") no-repeat;
    background-size: 100%;
    /* overflow: hidden; */
}

.pop-mycard-k {
    /* overflow-y: scroll; */
    width: 5.3rem;
    height: 6.2rem;
    margin-left: 0.38rem;
    margin-top: .2rem;
}

.pop-mycard-item img {
    width: 5.91rem;
    height: 4.72rem;
}

.pop-mycard-list {
    height: 6rem;
    width: 5.9rem;
    top: 1.1rem;
}

.pop-mycard-list .pop-newcard-item {
    /* margin-bottom: 0.3rem; */
    height: 100%;
}

.pop-mycard-list .swiper-wrapper {
    /* transition: top 1s; */
}

.pop-mycard-list .pop-newcard-item.swiper-slide-next {
    top: -1rem;
}

.mycard-swiper-button-next {
    width: .49rem;
    height: 0.34rem;
    position: absolute;
    top: 7.4rem;
    left: 3.06rem;
    background: url(../images/mycard-swiper-button-next.png) no-repeat;
    background-size: 100%;
    z-index: 1;
    cursor: pointer;
    animation: zz 2s ease-in infinite;
}

@keyframes zz {
    0% {
        top: 7.3rem;
    }

    50% {
        top: 7.45rem;
    }

    100% {
        top: 7.3rem;
    }
}

.mycard-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: block;
    z-index: 101;
}

.mycard-dialog .dia-close {
    left: 7rem;
    top: 0.3rem;
}

/* 花火弹窗 */
.gift-1 .pop-gift-k {
    width: 4.69rem;
    height: 6.05rem;
    background: url("../images/lottery-pop-bg-1.png") no-repeat;
    background-size: 100%;
}

.gift-1 .pop-gift-1-inner {
    width: 3.94rem;
    position: absolute;
    left: .3rem;
    top: 2.3rem;
    animation: bubble 5s infinite;
}

.gift-1 .pop-gift-cyberpunk-title,
.gift-1 .pop-gift-cyberpunk-title::after {
    width: 3.9rem;
    height: 1.36rem;
    position: absolute;
    left: .3rem;
    top: 4.4rem;
    background: url("../images/pop-gift-1-cyberpunk-title.png") no-repeat;
    background-size: 100%;
}

.gift-1 .pop-gift-cyberpunk-title::after {
    content: '';
    top: 0;
    left: 0;
    visibility: hidden;
    animation: cyberpunk 1s infinite;
    animation-timing-function: steps(1, end);
}

.gift-1 a.lottery-share {
    left: 4.6rem;
    top: 4.5rem;
}

.gift-1 .dialog {
    left: 50%;
    top: 45%;
}

.gift-1 .dia-close {
    left: 3.86rem;
    top: 7.3rem;
}

/* 查询奖励弹窗 */
.pop-query-k {
    width: 8.09rem;
    height: 9.12rem;
    background: url("../images/pop-query-bg.png") no-repeat;
    background-size: 100%;
    overflow: hidden;
    margin-top: 0.2rem;
}

.pop-query-info {
    width: 5.77rem;
    height: 0.8rem;
    background: url("../images/pop-query-info.png") no-repeat;
    background-size: 100%;
    position: absolute;
    left: 0.19rem;
}

.pop-query .dia-close {
    top: 0.8rem;
    left: 8rem;
}

.pop-query-nei {
    width: 103%;
    margin-left: 0.18rem;
    position: relative;
    overflow-y: scroll;
    height: 5.9rem;
    top: 2rem;
    overflow-x: hidden;
}

.award-top {
    width: 100%;
    height: 0.5rem;
    position: relative;
    left: 0.2rem;
    top: 2rem;
}

.award-top .award-name {
    background: url(../images/award-name.png) no-repeat;
    background-size: 100%;
    width: 0.58rem;
    height: 0.29rem;
    margin-left: 1.7rem;
}

.award-top .award-code {
    background: url(../images/award-code.png) no-repeat;
    background-size: 100%;
    width: 1.16rem;
    height: 0.29rem;
    margin-left: 1.62rem;
}

.query-title {
    font-size: 0;
}

.query-title span {
    padding: .65rem 0 .09rem;
    line-height: .56rem;
    height: .4rem;
    /* font-size: .3rem; */
    font-weight: 700;
    color: #5b628a;
    text-align: center;
    display: inline-block;
}

.query-title .name {
    width: 2.6rem;
}

.query-title .code {
    width: 3.16rem;
}

.query-info li {
    position: relative;
    left: 0.58rem;
    line-height: 0.65rem;
    margin-bottom: 0.2rem;
    height: 0.58rem;
    display: flex;
}

.query-info li span {
    font-size: .18rem;
    /* font-weight: 700; */
    color: #96928C;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

.query-info li .name {
    width: 2.5rem;
    height: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #E9E8DC;
    border: 0.01rem solid #F19E4D;
    margin-right: 0.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0.25rem;
    padding: 0 2%;
}

.query-info li .code {
    width: 1.8rem;
    height: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0.25rem;
    padding: 0 2%;
    background-color: #E9E8DC;
    border: 0.01rem solid #F19E4D;
}

.query-info li .btn-copy {
    position: relative;
    margin-left: 0.1rem;
    top: -0.06rem;
}

.query-info li .btn-copy a {
    width: 1.41rem;
    height: 0.79rem;
    margin: auto;
    background: url("../images/pop-query-copy.png") no-repeat;
    background-size: 100%;
    display: block;
}

.pop-line-nei p {
    width: 3rem;
    margin: auto;
    line-height: .5rem;
    font-size: .24rem;
    color: #fff;
    text-align: center;
}

.pop-query-next {
    width: .49rem;
    height: 0.34rem;
    position: absolute;
    top: 7rem;
    left: 2.95rem;
    background: url(../images/mycard-swiper-button-next.png) no-repeat;
    background-size: 100%;
    z-index: 1;
    cursor: pointer;
    animation: zquery 2s ease-in infinite;
    margin-top: 0.5rem;
}

@keyframes zquery {
    0% {
        top: 7.12rem;
    }

    50% {
        top: 7rem;
    }

    100% {
        top: 7.12rem;
    }
}

.pop-line .dia-close {
    /* width: .50rem;
    height: .50rem;
    position: absolute;
    top: 0;
    left: 3.20rem;
    background:url(../images/btn-close.png);
    background-size: 100%;
    cursor:pointer;
    z-index: 101;
    -webkit-transition: all .3s;
    transition: all .3s; */
}

.dia-close:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

/* 查询奖励弹窗 */
.pop-exchange-k {
    width: 9.09rem;
    height: 8.38rem;
    background: url("../images/order-pop-bg.png") no-repeat;
    background-size: 100%;
    overflow: hidden;
    margin-top: 0.2rem;
}

.pop-exchange-pic {
    width: 7.6rem;
    height: 2.47rem;
    background: url(../images/pop-exchange-pic.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 0.76rem;
    top: 2.2rem;
}

.pop-exchange-pic .pop-exchange-poker-num {
    width: 4.88rem;
    height: 0.34rem;
    background: url(../images/pop-exchange-poker-num.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 1.3rem;
    top: 2rem;
}

.pop-exchange-poker-text {
    position: absolute;
    color: #FFE9C2;
    font-size: 0.2rem;
    left: 1.65rem;
}

.pop-exchange-poker-text span {
    position: absolute;
    color: #E8A330;
    margin-left: -0.05rem;
    margin-top: 0.01rem;
}

.pop-exchange .dia-close {
    top: 0.2rem;
    left: 9rem;
}

.pop-exchange-nei {
    position: relative;
    width: 7.59rem;
    height: 2.77rem;
    top: 4.615rem;
    left: 0.77rem;
    overflow: hidden;
}

.pop-exchange-title {
    position: relative;
    width: 7.59rem;
    height: 0.46rem;
    background: url(../images/pop-exchange-title.png) no-repeat;
    background-size: 100%;
}

.pop-exchange-nei .pop-exchange-info {
    position: absolute;
    overflow-y: scroll;
    width: 7.78rem;
    height: 2.35rem;
    top: 0.45rem;
}

.pop-exchange-info .pop-exchange-content li {
    line-height: 0.65rem;
    height: 0.58rem;
    display: flex;
}

.pop-exchange-content li .num {
    width: 2.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: rgba(167, 133, 89, 0.4);
    display: flex;
    align-items: center;
    line-height: 0.25rem;
    padding: 0 2%;
    border: 1px solid #8C704B;
    border-top: transparent;
    border-right: transparent;
    font-size: 0.2rem;
}

.pop-exchange-content li .gift {
    width: 4.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: rgba(167, 133, 89, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0.25rem;
    padding: 0 2%;
    border: 1px solid #8C704B;
    border-top: transparent;
    border-right: transparent;
    font-size: 0.2rem;
}

.pop-exchange-content li .status {
    width: 2.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: rgba(167, 133, 89, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0.25rem;
    padding: 0 2%;
    border: 1px solid #8C704B;
    border-right: transparent;
    border-top: transparent;
    font-size: 0.2rem;
}

.pop-exchange-content li span {
    color: #FFEDD6
}

.query-title {
    font-size: 0;
}

.query-title span {
    padding: .65rem 0 .09rem;
    line-height: .56rem;
    height: .4rem;
    /* font-size: .3rem; */
    font-weight: 700;
    color: #5b628a;
    text-align: center;
    display: inline-block;
}

.query-title .name {
    width: 2.6rem;
}

.query-title .code {
    width: 3.16rem;
}

/* .query-info li{
    line-height: 0.65rem;
    margin-bottom: 0.05rem;
    height: 0.58rem;
    display: flex;
} */

/* .query-info li .name{
    width: 2.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #ffffff;
    margin-right: 0.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0.25rem;
    padding: 0 2%;
} */
/* .query-info li .code{
    width: 1.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0.25rem;
    padding: 0 2%;
    background-color: #ffffff;
} */
/* .query-info li .btn-copy{
    margin-left: .1rem;
} */
.pop-line-nei p {
    width: 3rem;
    margin: auto;
    line-height: .5rem;
    font-size: .24rem;
    color: #fff;
    text-align: center;
}

.pop-query-next {
    width: .49rem;
    height: 0.34rem;
    position: absolute;
    top: 7rem;
    left: 2.95rem;
    background: url(../images/mycard-swiper-button-next.png) no-repeat;
    background-size: 100%;
    z-index: 1;
    cursor: pointer;
    animation: zquery 2s ease-in infinite;
    margin-top: 0.5rem;
}

@keyframes zquery {
    0% {
        top: 7.12rem;
    }

    50% {
        top: 7rem;
    }

    100% {
        top: 7.12rem;
    }
}

.pop-line .dia-close {
    /* width: .50rem;
    height: .50rem;
    position: absolute;
    top: 0;
    left: 3.20rem;
    background:url(../images/btn-close.png);
    background-size: 100%;
    cursor:pointer;
    z-index: 101;
    -webkit-transition: all .3s;
    transition: all .3s; */
}

.dia-close:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

/* 活动已结束 */
.over .over-content {
    font-size: 0rem;
    width: 6.58rem;
    height: 6.54rem;
    background: url(../image/pop/pop-over-bg.png) no-repeat;
    background-size: 100%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.over-gp {
    width: 1.96rem;
    height: 0.54rem;
    position: absolute;
    top: 4.82rem;
    left: 3.42rem;

}

.over-ios {
    width: 1.98rem;
    height: 0.54rem;
    position: absolute;
    top: 0.6rem;
    left: 1.28rem;
    top: 4.82rem;

}

.down-container .down-content {
    width: 7.79rem;
    height: 5.14rem;
    /* background: url(../image/pop/down-content.png) no-repeat;
    background-size: 100%; */
    position: relative;
    top: 45%;
    left: 51.5%;
    transform: translate(-50%, -50%);
}
.down-container .down-content::after{
  content: '';
  width: 5.37rem;
  height: 3.33rem;
  background: url(../image/pop/down-content.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 1.5rem;
  left: 0.65rem;
}
.down-container .down-content::before{
  content: '';
  width: 5.5rem;
  height: 4.2rem;
  background: url(../image/pop/downbgi.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: .15rem;
  left: .68rem;
}
.down-container .btn{
    width: 2.57rem;
    height: 0.79rem;
    background: url('../image/pop/down-btn.png') no-repeat;
    background-size: 100%;
    position: absolute;
    top: 4.9rem;
    left: 2.1rem;
}

.formal-container .formal-content {
    width: 7.79rem;
    height: 5.14rem;
    /* background: url(../image/pop/formal-content.png) no-repeat;
    background-size: 100%; */
    position: relative;
    top: 45%;
    left: 51.5%;
    transform: translate(-50%, -50%);
}
.formal-container .formal-content::after{
  content: '';
  width: 5.37rem;
  height: 3.33rem;
  background: url(../image/pop/formal-content.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 1.45rem;
  left: 0.71rem;
}
.formal-container .formal-content::before{
  content: '';
  width: 5.5rem;
  height: 4.2rem;
  background: url(../image/pop/downbgi.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: .15rem;
  left: .68rem;
}
.formal-container .btn{
    width: 2.57rem;
    height: 0.79rem;
    background: url('../image/pop/down-btn.png') no-repeat;
    background-size: 100%;
    position: absolute;
    top: 4.9rem;
    left: 2.2rem;
}

.over-content .over-btns {
    /* overflow: hidden; */
    display: flex;
    justify-content: space-between;
    position: absolute;
    /* top: 4rem;
    left: 50%;
    transform: translateX(-50%); */
}

.overbg-gp {
    width: 2.43rem;
    height: 0.71rem;
    position: absolute;
    top: 5.6rem;
    left: 50%;
    margin-left: -1.215rem;
    top: 4.82rem;
}

.overbg-ios {
    width: 2.43rem;
    height: 0.71rem;
    position: absolute;
    top: 5.6rem;
    left: 50%;
    margin-left: -1.215rem;

}

.overbg-cloce {
    width: 0.26rem;
    height: 0.29rem;
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    background: url('../image/overbg-cloce.png') no-repeat;
    background-size: 100%;
}

/* .over-content .over-btns::before{
    content: "";
    width: .2rem;
    height: .2rem;
    left: 0;
    top: -0.1rem;
    position: absolute;
    background: url(../image/fb-like-red.png) no-repeat;
    background-size: 100%;
}
.over-content .over-btns::after{
    content: "";
    width: .4rem;
    height: .49rem;
    right: -0.17rem;
    bottom: -0.15rem;
    position: absolute;
    background: url(../image/btn-hand.png) no-repeat;
    background-size: 100%;
} */


/* .over a img {
    width: 2.25rem;
} */
.over-content .over-query {
    position: absolute;
    top: 7.5rem;
    left: 50%;
    transform: translateX(-65%);
}

.over-content .over-query img {
    width: 2.36rem;
}

.over .dia-close {
    top: 0.5rem;
    left: 8.3rem;
}

.over-content2 {
    width: 6.57rem;
    height: 8.39rem;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -63%);
    z-index: 1005 !important;
}

.over-content2 .ov2-header {
    width: 6.57rem;
    height: 6.85rem;
    top: 0;
    left: 0;
    position: absolute;
    background: url(../image/pop-over-bg2.png) no-repeat;
    background-size: 100%;

}

.over-content2 .ov2-con {
    width: 5.39rem;
    height: 4.8rem;
    top: 5rem;
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
    background: url(../image/pop-jiesu.png) no-repeat;
    background-size: 100%;
}

.ov2-con .ov2-btn {
    width: 1.47rem;
    height: .56rem;
    background: url(../image/btn-yiyuyue.png) no-repeat;
    background-size: 100%;
    margin: 0.4rem auto 0;
    cursor: pointer;
}

.over-content2 .ov2-con .ov2-scorll {
    width: 80%;
    margin: .24rem auto 0;
    padding-right: .35rem;
    height: 3.37rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.ov2-con .ov2-scorll::-webkit-scrollbar {
    width: .1rem;
    height: .1rem;
}

/* 滚动条滑块 */
.ov2-con .ov2-scorll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #ededed;
}

/* 滚动条轨道 */
.ov2-con .ov2-scorll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #535353;
}

.over-content2 .ov2-scorll .list {
    box-sizing: border-box;
    padding-left: 2.2rem;
}

.ov2-scorll .list .item {
    color: #fff;
    height: .45rem;
    font-size: .18rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1.8rem;
}

.ov2-scorll .list .item .item-text {
    text-align: center;
    width: .66rem;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.ov2-scorll .list .item .item-copy {
    text-decoration: underline;
    cursor: pointer;
}

.over-content2 .ov2-scorll .appoin-tit1 {
    margin: 0 auto .15rem;
    width: 1.6rem;
    height: .28rem;
    background: url('../image/appoin/title-yy1.png');
    background-size: 100%;
}

.over-content2 .ov2-scorll .appoin-tit2 {
    margin: .24rem auto .15rem;
    width: 1.92rem;
    height: .28rem;
    background: url('../image/appoin/title-yy2.png');
    background-size: 100%;
}

.over-content2 .ov2-scorll .appoin-tit3 {
    margin: 0 auto;
    width: 2.27rem;
    height: .65rem;
    background: url('../image/appoin/title-yy3.png');
    background-size: 100%;
}

.over-content2 .ov2-scorll .appoin-tit4 {
    margin: 0 auto;
    width: 2.52rem;
    height: .65rem;
    background: url('../image/title-yy4.png');
    background-size: 100%;
}

.over-content2 .ov2-scorll .appoin-tit5 {
    margin: .24rem auto .15rem;
    width: 1.92rem;
    height: .28rem;
    background: url('../image/appoin/title-yy5.png');
    background-size: 100%;
}

.over-content2 .ov2-scorll .list1 {
    margin: 0 auto;
    width: 4.32rem;
    height: .45rem;
    background: url('../image/appoin/bg-yy1.png');
    background-size: 100%;
}

.over-content2 .ov2-scorll .list2 {
    margin: 0 auto;
    width: 4.32rem;
    height: 1.59rem;
}

.over-content2 .ov2-scorll .list2.list2-aos {
    background: url('../image/appoin/bg-yy2-aos.png');
    background-size: 100%;
}

.over-content2 .ov2-scorll .list2.list2-ios {
    background: url('../image/appoin/bg-yy2-ios.png');
    background-size: 100%;
}

.over-content2 .ov2-scorll .list3 {
    margin: 0 auto;
    width: 4.32rem;
    height: .45rem;
    background: url('../image/appoin/bg-yy3.png');
    background-size: 100%;
}

.over-content2 .ov2-scorll .list4 {
    margin: 0 auto;
    width: 4.69rem;
    height: .45rem;
    background: url('../image/appoin/bg-yy4.png');
    background-size: 100%;
}

.over-content2 .ov2-scorll .list5 {
    margin: 0 auto;
    width: 4.32rem;
    height: 1.95rem;
    background: url('../image/appoin/bg-yy5.png');
    background-size: 100%;
}

.over-content2 .ov2-scorll .list2 .item {
    margin-bottom: .05rem;
}

/* 女神彈窗 */
.pop-goddesses .pop-goddesses-bg {
    width: 5.52rem;
    height: 3.47rem;
    background: url(../images/pop-goddesses-heart-bg.png) no-repeat;
    background-size: 100%;
}

.pop-goddesses-waist .pop-goddesses-bg {
    background-image: url(../images/pop-goddesses-waist-bg.png);
}

.pop-goddesses-knee .pop-goddesses-bg {
    background-image: url(../images/pop-goddesses-knee-bg.png);
}

.pop-goddesses .dia-close {
    top: 3.8rem;
    left: 2.4rem;
}

/* 武器彈窗 */
.pop-weapons-container .pop-weapons {
    width: 7.18rem;
    height: 5.75rem;
    background: url(../images/pop-weapons-bg.png) no-repeat;
    background-size: 100%;
    position: relative;
}

.pop-weapons-container .pop-weapons .pop-weapons-pic {
    width: 4.96rem;
    position: absolute;
    top: 1rem;
    left: 1.2rem;
}

.pop-weapons-container .weapons-query-btn {
    position: absolute;
    width: 1.73rem;
    height: 0.55rem;
    background: url(../images/weapons-query-btn.png) no-repeat;
    background-size: 100%;
    top: 4.5rem;
    left: 1.2rem;
}

.pop-weapons-container .weapons-query-btn-close {
    position: absolute;
    width: 1.72rem;
    height: 0.55rem;
    background: url(../images/weapons-query-btn-close.png) no-repeat;
    background-size: 100%;
    top: 4.5rem;
    left: 4.5rem;
}

.pop-weapons .dia-close {
    top: -0.21rem;
    left: 6.7rem;
}

/* 授权彈窗 */
.pop-authorize-fail .pop-authorize-fail-bg {
    width: 7.15rem;
    height: 4.29rem;
    background: url(../images/pop-authorize-fail-bg.png) no-repeat;
    background-size: 100%;
    position: relative;
}

.pop-authorize-fail-bg .authorize-confirm-btn {
    position: absolute;
    width: 2.01rem;
    height: 0.56rem;
    background: url(../images/authorize-confirm-btn.png) no-repeat;
    background-size: 100%;
    top: 3rem;
    left: 1.4rem;
}

.pop-authorize-fail-bg .authorize-cancel-btn {
    position: absolute;
    width: 2.01rem;
    height: 0.56rem;
    background: url(../images/authorize-cancel-btn.png) no-repeat;
    background-size: 100%;
    top: 3rem;
    left: 3.8rem;
}

.pop-authorize-fail-bg .dia-close {
    top: -0.1rem;
    left: 7rem;
}

/* 創建同盟彈窗 */
.pop-create-team-bg {
    position: relative;
    width: 7.35rem;
    height: 7.02rem;
    background: url(../images/pop-create-team-bg.png) no-repeat;
    background-size: 100%;
}

.pop-create-team-success-bg .pop-team-create-name {
    position: absolute;
    color: #FFEAC4;
    font-size: 0.35rem;
    top: 1.5rem;
    left: 0.5rem;
}

.pop-team-create-form .pop-team-create-input.pop-team-create-name {
    position: absolute;
    width: 5.2rem;
    height: 0.45rem;
    border: 1px solid #7C6145;
    font-size: 20px;
    color: #604E3B;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    top: 1.9rem;
    left: 1.7rem;
    text-align: center;
    background-color: #AD9677;
}

.pop-team-create-form .pop-team-create-input.pop-team-create-tenet {
    position: absolute;
    width: 4.85rem;
    height: 0.45rem;
    border: 1px solid #7C6145;
    font-size: 20px;
    color: #604E3B;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    top: 2.65rem;
    left: 2.05rem;
    text-align: center;
    background-color: #AD9677;
}

.pop-team-create-form .pop-team-create-input.pop-team-create-line {
    position: absolute;
    width: 4.45rem;
    height: 0.45rem;
    border: 1px solid #7C6145;
    font-size: 20px;
    color: #604E3B;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    top: 3.4rem;
    left: 2.45rem;
    text-align: center;
    background-color: #AD9677;
}

.pop-create-team-bg .pop-team-create-flag {
    position: relative;
    top: 4.25rem;
    left: 1.7rem;
}

.pop-create-team-bg .pop-team-create-flag li:nth-child(1) {
    width: 1.23rem;
    height: 1.55rem;
    background: url(../images/flag-1.png) no-repeat;
    background-size: 100%;
    position: absolute;
}

.pop-create-team-bg .pop-team-create-flag li:nth-child(1).active {
    width: 1.23rem;
    height: 1.55rem;
    background: url(../images/flag-1-active.png) no-repeat;
    background-size: 100%;
    position: absolute;
}

.pop-create-team-bg .pop-team-create-flag li:nth-child(2) {
    width: 1.23rem;
    height: 1.55rem;
    background: url(../images/flag-2.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 1rem;
}

.pop-create-team-bg .pop-team-create-flag li:nth-child(2).active {
    width: 1.23rem;
    height: 1.55rem;
    background: url(../images/flag-2-active.png) no-repeat;
    background-size: 100%;
    position: absolute;
}

.pop-create-team-bg .pop-team-create-flag li:nth-child(3) {
    width: 1.23rem;
    height: 1.55rem;
    background: url(../images/flag-3.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 2rem;
}

.pop-create-team-bg .pop-team-create-flag li:nth-child(3).active {
    width: 1.23rem;
    height: 1.55rem;
    background: url(../images/flag-3-active.png) no-repeat;
    background-size: 100%;
    position: absolute;
}

.pop-create-team-bg .pop-team-create-flag li:nth-child(4) {
    width: 1.23rem;
    height: 1.55rem;
    background: url(../images/flag-4.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 3rem;
}

.pop-create-team-bg .pop-team-create-flag li:nth-child(4).active {
    width: 1.23rem;
    height: 1.55rem;
    background: url(../images/flag-4-active.png) no-repeat;
    background-size: 100%;
    position: absolute;
}

.pop-create-team-bg .pop-team-create-flag li:nth-child(5) {
    width: 1.23rem;
    height: 1.55rem;
    background: url(../images/flag-5.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 4rem;
}

.pop-create-team-bg .pop-team-create-flag li:nth-child(5).active {
    position: absolute;
    width: 1.23rem;
    height: 1.55rem;
    background: url(../images/flag-5-active.png) no-repeat;
    background-size: 100%;
}

.pop-team-create-btn {
    position: absolute;
    width: 2.42rem;
    height: 0.63rem;
    top: 6.05rem;
    left: 2.45rem;
    background: url(../images/pop-team-create-btn.png) no-repeat;
    background-size: 100%;
}

.pop-create-team .dia-close {
    top: 0rem;
    left: 7.5rem;
}

.pop-team-create-form .pop-team-create-input::-webkit-input-placeholder {
    color: #604E3B;
}

.pop-team-create-form .pop-team-create-input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #604E3B;
}

.pop-team-create-form .pop-team-create-input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #604E3B;
}

.pop-team-create-form .pop-team-create-input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #604E3B;
}

/* 創建同盟成功彈窗 */
.pop-create-team-success-bg {
    width: 7.35rem;
    height: 5.03rem;
    background: url(../images/pop-create-team-success-bg.png) no-repeat;
    background-size: 100%;
    position: relative;
}

.pop-team-create-success-form .pop-team-success-input.pop-team-create-tenet {
    position: absolute;
    width: 6.2rem;
    height: 0.45rem;
    border: 1px solid #7C6145;
    font-size: 20px;
    color: #604E3B;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    top: 2.2rem;
    left: 0.5rem;
    background-color: #AD9677;
    padding-left: 0.15rem;
}

.pop-team-create-success-form .pop-team-success-input.pop-team-create-line {
    position: absolute;
    width: 6.2rem;
    height: 0.45rem;
    border: 1px solid #7C6145;
    font-size: 20px;
    color: #604E3B;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    top: 2.9rem;
    left: 0.5rem;
    background-color: #AD9677;
    padding-left: 0.15rem;
}

.pop-create-team-success-bg .pop-team-share {
    position: absolute;
    display: flex;
    top: 3.7rem;
    left: 0.65rem;
}

.pop-create-team-success-bg .pop-team-share-line {
    width: 3.09rem;
    height: 0.59rem;
    margin-right: 0.2rem;
}

.pop-create-team-success-bg .pop-team-share-fb {
    width: 2.75rem;
    height: 0.59rem;

}

.pop-create-team-success .dia-close {
    top: -0.1rem;
    left: 7.4rem;
}

/* line複製成功彈窗 */
.pop-line .pop-line-bg {
    width: 7.4rem;
    height: 5.49rem;
    background: url("../images/pop-line-bg.png") no-repeat;
    background-size: 100%;
}

.pop-line-bg .pop-join-share {
    position: absolute;
    display: flex;
    top: 2.9rem;
    left: 2.4rem;
}

.pop-line-bg .pop-join-share a {
    width: 0.96rem;
    height: 0.96rem;
    margin-right: 0.9rem;
}

.pop-line .dia-close {
    left: 6.9rem;
    top: -0rem;
}

.pop-line-2 .pop-line-bg {
    width: 6.13rem;
    height: 3.01rem;
    background: url("../images/pop-line-bg-2.png") no-repeat;
    background-size: 100%;
}

.pop-line-2 .pop-line-2-share {
    position: absolute;
    top: 1.76rem;
    left: 2.58rem;
}

.pop-line-2 .pop-line-2-share img {
    width: .82rem;
}

.pop-line-2 .dia-close {
    top: 3.2rem;
    left: 2.7rem;
}

/* 同盟詳情加入彈窗 */
.pop-team-detail .pop-team-content {
    width: 7.35rem;
    height: 6.94rem;
    background: url("../images/pop-team-detail-bg.png") no-repeat;
    background-size: 100%;
    position: relative;
    color: rgba(255, 255, 255, .8);
    font-size: .3rem;
}

.pop-team-content>span {
    position: absolute;
    top: 1.08rem;
    left: 2.7rem;
    width: 3.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pop-team-content .pop-team-content-img {
    position: absolute;
    width: 2.51rem;
    height: 3.24rem;
    top: 2rem;
    left: 0.6rem;
}

.pop-team-content .pop-detail-num {
    left: 5rem;
    top: 2.15rem;
    width: 1rem;
    color: #FFEAC4;
}

.pop-team-content .pop-detail-text {
    position: absolute;
    left: 3.6rem;
    top: 2.14rem;
    color: #FFEAC4;
}

.pop-team-content .pop-detail-team_name {
    left: 5rem;
    color: #FFEAC4;
    top: 2.68rem;
    width: 2.1rem;
}

.pop-team-content .pop-detail-name {
    left: 5rem;
    top: 3.1rem;
    color: #FFEAC4;
    width: 2.1rem;
}

.pop-team-content .pop-detail-tenet {
    color: #FFEAC4;
    top: 3.22rem;
    left: 5rem;
    width: 2.1rem;
}

.pop-team-content .pop-detail-poker_point {
    left: 5.65rem;
    color: #FFEAC4;
    top: 3.76rem;
    width: 1.45rem;
}

.pop-team-content .pop-detail-line {
    color: #FFEAC4;
    left: 5.35rem;
    top: 4.3rem;
    width: 1.7rem;
}

.pop-team-detail .pop-team-content .team-join-btn {
    position: absolute;
    top: 5.8rem;
    left: 1.08rem;
    width: 2.26rem;
}

.pop-team-detail .pop-team-content .team-share-btn {
    position: absolute;
    top: 5.8rem;
    left: 1.08rem;
    width: 2.26rem;
}

.pop-team-detail .pop-team-content .team-line-btn {
    position: absolute;
    top: 5.8rem;
    left: 4rem;
    width: 2.26rem;
}

.pop-team-detail .dia-close {
    left: 7.4rem;
    top: 0rem;
}

/* 更换同盟弹窗 */
.pop-change-team .pop-change-team-bg {
    position: relative;
    width: 8.09rem;
    height: 4.83rem;
    background: url("../images/pop-change-team-bg.png") no-repeat;
    background-size: 100%;
}

.pop-change-team .dia-close {
    left: 8rem;
    top: 0rem;
}

/* 加入同盟弹窗 */
.pop-join-team .pop-join-team-bg {
    position: relative;
    width: 8.09rem;
    height: 4.83rem;
    background: url("../images/pop-join-team-bg.png") no-repeat;
    background-size: 100%;
}

.pop-join-team .dia-close {
    left: 8rem;
    top: 0rem;
}

.pop-team-confirm {
    position: absolute;
    width: 1.8rem;
    height: 0.63rem;
    background: url(../images/pop-team-confirm.png) no-repeat;
    top: 3.5rem;
    left: 2rem;
    background-size: 100%;
}

.pop-team-cancel {
    position: absolute;
    width: 1.8rem;
    height: 0.63rem;
    background: url(../images/pop-team-cancel.png) no-repeat;
    background-size: 100%;
    left: 4.4rem;
    top: 3.5rem;
}

/* 活动规则 */
.pop-activity-rules .pop-rule-content {
    position: relative;
    width: 8.09rem;
    height: 9.12rem;
    background: url("../images/pop-activity-rules-bg.png") no-repeat;
    background-size: 100%;
}

.pop-rule-content .pop-rule-detail {
    position: absolute;
    overflow: hidden;
    width: 6.28rem;
    left: 0.9rem;
    top: 1.7rem;
    height: 6.7rem;
}

.pop-rule-content .pop-rule-nei {
    position: absolute;
    width: 7.28rem;
    height: 6.7rem;
    left: 0.3rem;
    overflow: scroll;
    overflow-x: hidden;
}

.pop-rule-detail img {
    width: 5.81rem;
    height: 12.26rem;
}

.pop-activity-rules .dia-close {
    top: 0.2rem;
    left: 8rem;
}

/* 積分詳情弹窗 */
.pop-integral-detail .pop-integral-content {
    position: relative;
    width: 7.35rem;
    height: 4.74rem;
    background: url("../images/pop-integral-detail-bg.png") no-repeat;
    background-size: 100%;
    font-size: 0.8rem;
    font-weight: 700;
}

.pop-integral-content .pop-integral-flag {
    position: absolute;
    width: 1.68rem;
    height: 2.2rem;
    top: 1.5rem;
    left: 0.75rem;
}

.pop-integral-detail .dia-close {
    left: 7.4rem;
    top: 0rem;
}

.pop-integral-content>span {
    position: absolute;
    top: 1.08rem;
    left: 2.7rem;
    width: 2.2rem;
    text-align: center;
    background-image: -webkit-linear-gradient(top, #FEEAC3, #E4BE7C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pop-integral-content .pop-integral-poker_point {
    top: 2.07rem;
}

.pop-integral-content .pop-integral-poker_sum {
    left: 4.8rem;
    top: 2.07rem;
}

.pop-integral-content .pop-integral-team_name {
    position: absolute;
    font-size: .22rem;
    font-weight: 100;
    width: 1.4rem;
    text-align: center;
    color: #FFEAC4;
    top: 3.75rem;
    left: 0.9rem;
}

.pop-integral-content .pop-integral-detail-btn {
    position: absolute;
    width: 1.77rem;
    height: 0.6rem;
    top: 3.63rem;
    left: 2.45rem;
    background: url(../images/integral-detail-btn.png) no-repeat;
    background-size: 100%;
}

.pop-integral-content .pop-integral-instant-btn {
    position: absolute;
    width: 2.59rem;
    height: 0.6rem;
    top: 3.63rem;
    left: 4.4rem;
    background: url(../images/integral-instant-btn.png) no-repeat;
    background-size: 100%;
}

/* 抽奖五星武将弹窗 */
.pop-big-poker .dia-pic-close {
    left: 7.2rem;
    top: 1rem;
}

/* 獎勵兌換自動觸發彈窗 */
.pop-award-auto .pop-award-content {
    position: relative;
    width: 5.72rem;
    height: 8.34rem;
    background: url("../images/pop-award-bg.png") no-repeat;
    background-size: 100%;
    font-size: 0.8rem;
    font-weight: 700;
}

.pop-award-content .pop-award-type {
    position: absolute;
    width: 6.95rem;
    height: 4.74rem;
    top: 1.8rem;
    left: 0.35rem;
}

.pop-award-content .pop-award-type img {
    height: 4.79rem;
}

.pop-award-content .award-confirm-btn {
    position: absolute;
    background: url(../images/award-confirm-btn.png) no-repeat;
    background-size: 100%;
    width: 2.26rem;
    height: 0.63rem;
    top: 6.7rem;
    left: 2.7rem;
}

.pop-award-auto .dia-close {
    left: 7.6rem;
    top: 0rem;
}

/* 推薦彈窗 */
.pop-recommend .pop-recommend-content {
    width: 6.42rem;
    height: 4.09rem;
    background: url("../images/pop-recommend-bg.png") no-repeat;
    background-size: 100%;
    position: relative;

}

.pop-recommend-content .pop-recommend-text {
    position: absolute;
    color: #f83333;
    font-size: .38rem;
    top: 1rem;
    left: 2.5rem;
}

.pop-recommend-content .pop-recommend-btn {
    position: absolute;
    top: 2.5rem;
    left: 2rem;
    width: 2.4rem;
}

/*  陣營展示彈窗  */
.pop-camp-recommend-content .pop-camp-recommend-info {
    width: 19rem;
    height: 12rem;
}

.pop-camp-recommend .dia-close {
    left: 14.5rem;
    top: 2rem;
}

/* 卡池图鉴弹窗 */
.pop-poker-container .pop-pool-bg {
    position: relative;
    background: url(../images/pop-pool-bg.png) no-repeat;
    background-size: 100%;
    width: 8.09rem;
    height: 7.27rem;
    top: -0.3rem;
    left: -0.07rem;
}

.pop-poker-container .pop-pool-bg .pop-pool-title {
    position: absolute;
    background: url(../images/pop-pool-title.png) no-repeat;
    background-size: 100%;
    width: 3.46rem;
    height: 0.4rem;
    top: 0.8rem;
    left: 2.4rem;
}

.pop-poker-container .pop-pool-bg .pop-pool-sum {
    position: absolute;
    background: url(../images/pop-pool-sum.png) no-repeat;
    background-size: 100%;
    width: 2.06rem;
    height: 0.35rem;
    top: 6.3rem;
    left: 2.9rem;
}

.pop-poker-container .pop-pool-num span {
    position: absolute;
    font-weight: 700;
    font-size: 0.3rem;
    left: 2.1rem;
    top: -0.1rem;
    background-image: -webkit-linear-gradient(top, #FFF7E9, #D1B686);
    -webkit-text-size-adjust: none;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    cursor: default;
}

.pop-poker-container .pop-pool-bg .pop-pool-container {
    position: relative;
    width: 7.25rem;
    height: 4.63rem;
    top: 1.42rem;
    left: 0.475rem;
    overflow: hidden;
}

.pop-poker-container .pop-pool-bg .pop-pool-heros {
    position: absolute;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 7.44rem;
    height: 4.6rem;
    overflow: scroll;
    overflow-x: hidden;
    padding-top: 0.05rem;
}

.pop-poker-pool .dia-close {
    left: 8rem;
    top: 0;
}

/* 孙尚香边框特效 */
.star-hero-light {
    position: relative;
    background: url(../images/star-hero-light.png) no-repeat;
    background-size: 100%;
    width: 2.15rem;
    height: 2.58rem;
    top: -2.35rem;
    left: -0.42rem;
}

/* 初始武将颜色 */
.pop-poker-container .pop-pool-bg .pop-pool-hero {
    position: relative;
    width: 1.32rem;
    height: 2.05rem;
    margin: 0.065rem 0.05rem 0.05rem 0.068rem;
    filter: grayscale(100%)
}

/* 拥有普通武将颜色 */
.pop-poker-container .pop-pool-bg .pop-pool-hero.active1 {
    position: relative;
    width: 1.32rem;
    height: 2.05rem;
    margin: 0.065rem 0.05rem 0.05rem 0.068rem;
    filter: grayscale(0)
}

/* 拥有五星武将颜色 */
.pop-poker-container .pop-pool-bg .pop-pool-hero.active2 {
    position: relative;
    width: 1.32rem;
    height: 2.05rem;
    margin: 0.065rem 0.05rem 0.05rem 0.068rem;
    filter: grayscale(0)
}

.pop-poker-container .pop-pool-bg .pop-pool-hero.active2::after {
    content: "";
    position: absolute;
    background: url(../images/star-hero-light.png) no-repeat;
    background-size: 100%;
    width: 1.43rem;
    height: 2.23rem;
    top: -0.08rem;
    left: -0.05rem;
}

/* 拥有孙尚香颜色 */
.pop-poker-container .pop-pool-bg .pop-pool-hero.active4 {
    position: relative;
    width: 1.32rem;
    height: 2.05rem;
    margin: 0.065rem 0.05rem 0.05rem 0.068rem;
    filter: grayscale(0)
}

.pop-poker-container .pop-pool-bg .pop-pool-hero.active4::after {
    content: "";
    position: absolute;
    background: url(../images/sun-hero-light.png) no-repeat;
    background-size: 100%;
    width: 1.5rem;
    height: 2.24rem;
    top: -0.12rem;
    left: -0.065rem;
}

.pop-pool-hero .pop-pool-hero-num.active {
    position: absolute;
    width: 0.2rem;
    height: 0.2rem;
    top: 1.8rem;
    left: 1.1rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    border: 0.027rem solid #A27B49;
    z-index: 1;
}

.pop-pool-hero-num span {
    position: absolute;
    color: #FDEDCD;
    font-size: 0.15rem;
    text-align: center;
    line-height: 0.2rem;
    width: 0.2rem;
    height: 0.2rem;
    font-weight: 900;
    left: 0.005rem;
    top: 0.005rem;
}

/* 卡片放大弹窗 */
.pop-poker-boost .big-poker-bg {
    width: 8.96rem;
    height: 10.59rem;
}

.big-poker-img {
    width: 8.96rem;
    height: 10.59rem;
}

/* 抽奖弹窗 */
.pop-poker-lottery .pop-poker-lottery-bg {
    position: relative;
    background: url(../images/pop-poker-lottery-bg.png) no-repeat;
    background-size: 100%;
    width: 8.09rem;
    height: 7.27rem;
    top: -0.3rem;
    left: -0.07rem;
}

.pop-poker-lottery-pool .dia-close {
    left: 8rem;
    top: 0rem;
}

.pop-lottery-container .pop-lottery-heros {
    position: absolute;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 7.4rem;
    height: 4.3rem;
    padding-top: 0.05rem;
    top: 1.15rem;
    left: 0.46rem;
    overflow: hidden;
}

.pop-lottery-container .pop-lottery-hero {
    position: relative;
    width: 1.32rem;
    height: 2.05rem;
    margin: 0.065rem 0.05rem 0.05rem 0.068rem;
    transition: 0.6s;
    transform-style: preserve-3d;
    transform-origin: center center;
    backface-visibility: visible;
}

.pop-lottery-container .pop-lottery-hero.turn {
    transform: rotateY(180deg);
    animation: turn1 .5s;
    transition: all .3s;
}

.pop-lottery-container .pop-lottery-share-btn {
    position: absolute;
    background: url(../images/pop-lottery-share-btn.png) no-repeat;
    background-size: 100%;
    width: 2.97rem;
    height: 1.01rem;
    top: 5.75rem;
    left: 0.8rem;
}

.plus-btn {
    position: absolute;
    background-size: 100%;
    width: 0.83rem;
    height: 0.89rem;
    left: 2.15rem;
    top: -0.03rem;
}

.pop-lottery-container .pop-lottery-ten-btn {
    position: absolute;
    background: url(../images/pop-lottery-ten-btn.png) no-repeat;
    background-size: 100%;
    width: 2.97rem;
    height: 1.01rem;
    top: 5.75rem;
    left: 4.25rem;
}

.hero-back {
    position: absolute;
    backface-visibility: hidden;
    z-index: 2;
}

.hero-front {
    position: absolute;
    backface-visibility: hidden;
    transform: rotateY(180deg);
}

.hero-front.active2 {
    height: 2.97rem;
}

.hero-front.active2::after {
    position: absolute;
    content: "";
    background: url(../images/star-hero-light.png) no-repeat;
    background-size: 100%;
    width: 108%;
    height: 100%;
    top: -0.08rem;
    left: -0.05rem;
}

.hero-front.active4 {
    height: 2.97rem;
}

.hero-front.active4::after {
    position: absolute;
    content: "";
    background: url(../images/sun-hero-light.png) no-repeat;
    background-size: 100%;
    width: 115%;
    height: 100%;
    top: -0.12rem;
    left: -0.09rem;
}



.animated.delay-100ms {
    -webkit-animation-delay: 100ms !important;
    animation-delay: 100ms !important;
    -webkit-animation-delay: var(--animate-delay);
    animation-delay: var(--animate-delay);
}

.animated.delay-300ms {
    -webkit-animation-delay: 300ms !important;
    animation-delay: 300ms !important;
    -webkit-animation-delay: var(--animate-delay);
    animation-delay: var(--animate-delay);
}

.animated.delay-500ms {
    -webkit-animation-delay: 0.5s !important;
    animation-delay: 0.5s !important;
    -webkit-animation-delay: var(--animate-delay);
    animation-delay: var(--animate-delay);
}

.animated.delay-700ms {
    -webkit-animation-delay: 0.7s !important;
    animation-delay: 0.7s !important;
    -webkit-animation-delay: var(--animate-delay);
    animation-delay: var(--animate-delay);
}

.animated.delay-900ms {
    -webkit-animation-delay: 0.9s !important;
    animation-delay: 0.9s !important;
    -webkit-animation-delay: var(--animate-delay);
    animation-delay: var(--animate-delay);
}

.animated.delay-1100ms {
    -webkit-animation-delay: 1.1s !important;
    animation-delay: 1.1s !important;
    -webkit-animation-delay: var(--animate-delay);
    animation-delay: var(--animate-delay);
}

.animated.delay-1300ms {
    -webkit-animation-delay: 1.3s !important;
    animation-delay: 1.3s !important;
    -webkit-animation-delay: var(--animate-delay);
    animation-delay: var(--animate-delay);
}

.animated.delay-1500ms {
    -webkit-animation-delay: 1.5s !important;
    animation-delay: 1.5s !important;
    -webkit-animation-delay: var(--animate-delay);
    animation-delay: var(--animate-delay);
}





@media screen and (max-width: 1920px) {

    .order-info .content .step-fb a .fb-like,
    .pop-login .step-fb a .fb-like {
        margin: 0 .5rem;
        -webkit-transform: scale(1.7);
        -moz-transform: scale(1.7);
        -ms-transform: scale(1.7);
        -o-transform: scale(1.7);
        transform: scale(1.7);
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    .order-info .content .step-fb {
        width: 2.2rem;
        position: absolute;
        top: 5.55rem;
        left: 83%;
        transform: translateX(-50%);
    }
}

@media screen and (max-width: 1600px) {

    .order-info .content .step-fb a .fb-like,
    .pop-login .step-fb a .fb-like {
        margin: 0 .55rem;
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    .order-info .content .step-fb {
        width: 2.2rem;
        position: absolute;
        top: 5.55rem;
        left: 80%;
        transform: translateX(-50%);
    }

    .order-info .step .step-fb::before {
        left: 1.6rem;
    }

    .order-info .step .step-fb::after {
        left: 1.3rem;
    }
}

@media screen and (max-width: 1480px) {

    .order-info .content .step-fb a .fb-like,
    .pop-login .step-fb a .fb-like {
        margin: 0 .55rem;
        -webkit-transform: scale(1.4);
        -moz-transform: scale(1.4);
        -ms-transform: scale(1.4);
        -o-transform: scale(1.4);
        transform: scale(1.4);
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    .order-info .content .step-fb {
        width: 2.2rem;
        position: absolute;
        top: 5.55rem;
        left: 77%;
        transform: translateX(-50%);
    }

    .order-info .step .step-fb::before {
        left: 1.6rem;
    }

    .order-info .step .step-fb::after {
        left: 1.3rem;
    }
}

@media screen and (max-width: 1366px) {

    .order-info .content .step-fb a .fb-like,
    .pop-login .step-fb a .fb-like {
        margin: 0 .4rem;
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -ms-transform: scale(1.3);
        -o-transform: scale(1.3);
        transform: scale(1.3);
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    .order-info .content .step-fb {
        width: 2.2rem;
        position: absolute;
        top: 5.55rem;
        left: 80%;
        transform: translateX(-50%);
    }

    .order-info .step .step-fb::before {
        left: 1.5rem;
    }

    .order-info .step .step-fb::after {
        left: 1.2rem;
    }
}

@media screen and (max-width: 1280px) {

    .order-info .content .step-fb a .fb-like,
    .pop-login .step-fb a .fb-like {
        margin: 0 .3rem;
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    .order-info .content .step-fb {
        width: 2.2rem;
        position: absolute;
        top: 5.45rem;
        left: 80%;
        transform: translateX(-50%);
    }

    .order-info .step .step-fb::after {
        left: 1.2rem;
        top: 0.65rem;
    }
}

@media screen and (max-width: 1080px) {

    .order-info .content .step-fb a .fb-like,
    .pop-login .step-fb a .fb-like {
        margin: 0 .3rem;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    .order-info .content .step-fb {
        width: 2.2rem;
        position: absolute;
        top: 5.4rem;
        left: 77%;
        transform: translateX(-50%);
    }

    .order-info .step .step-fb::before {
        left: 1.5rem;
        top: 0.05rem;
    }

    .order-info .step .step-fb::after {
        left: 1.3rem;
        top: 0.7rem;
    }
}

/* 人物介绍 */




/* 悬浮窗 */

.sideBanner {
    position: fixed;
    top: 7rem;
    left: 1.3rem;
    z-index: 90;
    transition: all .3s;
}
.slidebar-right{
    position: fixed;
    top: 55%;
    right: -3rem;
    z-index: 90;
    transition: right 1s;
    cursor: pointer;
}
.activity{
    display: block;
    width: 2.44rem;
    height: 1.9rem;
}

.sideBanner>ul {
    position: absolute;
    left: -2.75rem;
}

.sideBanner>ul:first-child {
    top: 0;
}


.sideBanner>ul:last-child {
    top: 2rem;
}

.sideBanner>ul>li {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

.sideBanner>ul:first-child>li:last-child {
    top: 0.55rem;
}

.sideBanner>ul:last-child>li:last-child {
    /* top: .75rem; */
}

.sideBanner>ul>li.active {
    display: block;
}

.sideBanner>ul>li .boli {
    position: relative;
}

.side-gp1 {
    /* position: relative; */
    /* position: absolute;
    width: 0.9rem;
    height: 0.27rem;
    top: 0.8rem;
    left: 0.18rem; */
}

.gp-img {
    width: 2.68rem;
    height: 1.95rem;
}

.gp-bottom-btn {
    position: absolute;
    width: 0.9rem;
    height: 0.27rem;
    top: 0.8rem;
    left: 0.18rem;
}

.ios-bottom-btn {
    position: absolute;
    width: 0.9rem;
    height: 0.27rem;
    top: 0.8rem;
    left: 0.18rem;
}

.side-ios1 {
    position: absolute;
    width: 0.9rem;
    height: 0.27rem;
    top: 0.8rem;
    left: 0.18rem;
}

.side-gp2 {
    /* position: absolute; */
    width: 0.9rem;
    height: 0.27rem;
    top: 0.8rem;
    left: 0.18rem;
}

.side-ios2 {
    position: absolute;
    position: absolute;
    width: 0.9rem;
    height: 0.27rem;
    top: 0.8rem;
    left: 0.18rem;
}

/* 游戏特色 */



.preview .swiper-slide {
    width: 3.10rem;
    height: 1.75rem;
    cursor: pointer;
    margin-left: 0.1rem;
    position: relative;
}

.preview .active-nav::after {
    content: '';
    width: 3.10rem;
    height: 1.75rem;
    background: url('../image/active-img.png') no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.menu-list {
    text-align: center;
}

.menu-group-box {
    width: 1.8rem;
    padding: 0rem 0 0.2rem;
}

.menu-group-box .menu-list .menu-box {
    cursor: pointer;
}

.menu-group-box .menu-list .menu-box .menu-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;


}

.menu-group-box .menu-list .menu-box .menu-btn .ic.ic-nation1 {
    width: 0.98rem;
    height: 0.98rem;
    background: url(../image/nation1_off.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: -2.25rem;
}

.menu-group-box .menu-list .menu-box .menu-btn.on .ic.ic-nation1 {
    width: 1.50rem;
    height: 1.50rem;
    background: url(../image/nation1_on.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: -2.5rem;
}

.menu-group-box .menu-list .menu-box .menu-btn .ic.ic-nation2 {
    width: 0.98rem;
    height: 0.98rem;
    background: url(../image/nation2_off.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: -1rem;

}

.menu-group-box .menu-list .menu-box .menu-btn.on .ic.ic-nation2 {
    width: 1.50rem;
    height: 1.50rem;
    background: url(../image/nation2_on.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: -1.2rem;
}

.menu-group-box .menu-list .menu-box .menu-btn .ic.ic-nation3 {
    width: 0.98rem;
    height: 0.98rem;
    background: url(../image/nation3_off.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0.28rem;
}

.menu-group-box .menu-list .menu-box .menu-btn.on .ic.ic-nation3 {
    width: 1.50rem;
    height: 1.50rem;
    background: url(../image/nation3_on.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0rem;
}

.menu-group-box .menu-list .menu-box .menu-btn .ic.ic-nation4 {
    width: 0.98rem;
    height: 0.98rem;
    background: url(../image/nation4_off.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 1.55rem;

}

.menu-group-box .menu-list .menu-box .menu-btn.on .ic.ic-nation4 {
    width: 1.50rem;
    height: 1.50rem;
    background: url(../image/nation4_on.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 1.3rem;

}

.al {
    display: none;

}


.view-tabs-box {
    display: none;
}

.contents-box .view-group-box {
    flex: 1;
    width: 100%;
    min-width: 0;
}

.contents-box .view-group-box .view-tabs-box {
    width: 100%;
    height: 5.40rem;


}

.view-tabs-box .des-box {
    position: absolute;
    right: 2.5rem;
    top: 1rem;

}

.imgbox-one {
    width: 3.72rem;
    height: 6.86rem;
}

.desbox-one {
    width: 4.73rem;
    height: 3.45rem;
}

.imgbox-two {
    width: 4.88rem;
    height: 6.71rem;
}

.desbox-two {
    width: 4.73rem;
    height: 3.45rem;
}

.imgbox-three {
    width: 6.72rem;
    height: 7.01rem;
}

.desbox-three {
    width: 4.72rem;
    height: 3.45rem;
}

.imgbox-five {
    width: 6.72rem;
    height: 7.02rem;
}

.desbox-five {
    width: 4.72rem;
    height: 3.45rem;
}

.slidermsg {
    width: 0.49rem;
    height: 4.82rem;
    background: url('../image/progress.png') no-repeat;
    background-size: 100%;
    position: relative;
}

.slider-ke {
    width: 0.43rem;
    height: 3.32rem;
    background: url('../image/slidebar-ke.png') no-repeat;
    background-size: 100%;
    position: absolute;
    left: -0.25rem;
    top: 0.07rem;

}

.slidermsg .slider-bg {
    left: 0.2rem;
    overflow: hidden;
    height: 4.25rem;
    width: 0.15rem;
    position: absolute;
    bottom: 0.51rem;
}

.slidermsg .slider-img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 75%;
    background: url('../image/progress-no.png') no-repeat;
    background-size: 100%;
}

.slidermsg .slider-bg .slider-guang {
    height: 1.4rem;
    width: 1rem;
    position: absolute;
    bottom: calc(25% - .2rem);
    transform: translateY(50%);
    left: -0.43rem;
    background: url('../image/progress-guang.png') no-repeat;
    background-size: 100%;
    background-position: 0 .15rem;
}

.aside-left {
    width: 2.44rem;
    height: 1.90rem;
}

.aside-right {
    width: 3.35rem;
    height: 2.42rem;
}

.aside-right-po {
    display: block;
    position: relative;
    width: 3.47rem;
    height: 2.45rem;
    background: url(../image/aside-right.png) no-repeat;
    background-size: 100%;
    left: -1.2rem;
}

.slidebar-left {
    position: fixed;
    bottom: 1%;
    left: 0.3rem;
    z-index: 1500;
    transition: all .3s;
    margin-top: -1.78rem;
    cursor: pointer;
}

.google-right {
    position: absolute;
    width: 1.12rem;
    height: 0.41rem;
    background: url('../image/section1/google-left.png') no-repeat;
    background-size: 100%;
    top: 1.38rem;
    left: 0.9rem;

}

.ios-right {
    position: absolute;
    top: 1.8rem;
    left: 0.9rem;
    width: 1.12rem;
    height: 0.41rem;
    background: url('../image/section1/ios-left.png') no-repeat;
    background-size: 100%;

}

.slidebar-hover {
    position: absolute;
    left: -.3rem;
    top: -.8rem;
    height: 6rem;
    width: 2rem;
}

.slidebar-rules {
    width: 3.58rem;
    height: 2.88rem;
    background: url("../image/slidebar-rules.png") no-repeat;
    background-size: 100%;
    position: relative;
    margin-top: 1rem;
    left: 0rem;
    z-index: 2;
}

.slidebar-fle {
    display: flex;
}

.slidebar-rules ul li input {
    z-index: 2;
    cursor: pointer;
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.slidebar-checkbox-wrapper-1 {
    display: flex;
    align-items: center;
    position: absolute;
    top: 1.6rem;
    z-index: 1;
    width: 100%;
    left: 0.4rem;
}

.Treasure {
    position: absolute;
    top: -0.9rem;
    width: 1.44rem;
    top: -0.85rem;
    left: -0.3rem;
    transition: transform 0.2s ease-in-out;
    animation-name: float;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.slidebar-checkbox-wrapper-1 .login-checkbox-hint {
    background: url('../image/tect-blue1.png') no-repeat;
    width: 1.01rem;
    height: 0.15rem;
    background-size: 100%;
    /* font-size: 0.18rem; */
    margin-left: .13rem;
    letter-spacing: -0.025rem;
    pointer-events: none;
}


.slidebar-checkbox-wrapper-2 {
    display: flex;
    align-items: center;
    position: absolute;
    top: 1.85rem;
    z-index: 1;
    width: 100%;
    left: 0.4rem;
}

.slidebar-checkbox-wrapper-2 input[type=checkbox]:checked {
    background: transparent;
}

.slidebar-checkbox-wrapper-2 input[type=checkbox] {
    position: relative;
    display: inline-block;
    appearance: none;
    -webkit-appearance: none;
    width: 0.18rem;
    height: 0.18rem;
    outline: none;
    background-color: transparent;
    margin: 0;
}

.slidebar-checkbox-wrapper-2 .login-checkbox {
    /* display: inline-block; */
    width: 0.16rem;
    height: 0.16rem;
    background: url('../image/tect-check1.png') no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
}

.slidebar-checkbox-wrapper-2 .login-checkbox:checked::after {
    content: '';
    display: inline-block;
    width: 0.23rem;
    height: 0.22rem;
    /* transform: translateX(-0.01rem); */
    background: url('../image/tect-check-active1.png') no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: relative;
    top: -0.03rem;

}

.slidebar-checkbox-wrapper-2 .login-checkbox-hint {
    background: url('../image/tect-blue2.png') no-repeat;
    width: 1.01rem;
    height: 0.15rem;
    background-size: 100%;
    /* font-size: 0.18rem; */
    margin-left: .13rem;
    letter-spacing: -0.025rem;
    pointer-events: none;
}

.slidebar-checkbox-wrapper-3 {
    display: flex;
    align-items: center;
    position: absolute;
    top: 2.08rem;
    z-index: 1;
    width: 100%;
    left: 0.4rem;
}

.slidebar-checkbox-wrapper-3 input[type=checkbox]:checked {
    background: transparent;
}

.slidebar-checkbox-wrapper-3 input[type=checkbox] {
    position: relative;
    display: inline-block;
    appearance: none;
    -webkit-appearance: none;
    width: 0.18rem;
    height: 0.18rem;
    outline: none;
    background-color: transparent;
    margin: 0;
}

.slidebar-checkbox-wrapper-3 .login-checkbox {
    /* display: inline-block; */
    width: 0.16rem;
    height: 0.16rem;
    background: url('../image/tect-check1.png') no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
}

.slidebar-checkbox-wrapper-3 .login-checkbox:checked::after {
    content: '';
    display: inline-block;
    width: 0.23rem;
    height: 0.22rem;
    /* transform: translateX(-0.01rem); */
    background: url('../image/tect-check-active1.png') no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: relative;
    top: -0.03rem;

}

.slidebar-checkbox-wrapper-3 .login-checkbox-hint {
    background: url('../image/tect-blue3.png') no-repeat;
    width: 0.72rem;
    height: 0.14rem;
    background-size: 100%;
    /* font-size: 0.18rem; */
    margin-left: .13rem;
    letter-spacing: -0.025rem;
    pointer-events: none;
}


.slidebar-checkbox-wrapper-4 {
    display: flex;
    align-items: center;
    position: absolute;
    top: 2.3rem;
    z-index: 1;
    width: 100%;
    left: 0.4rem;
}

.slidebar-checkbox-wrapper-4 input[type=checkbox]:checked {
    background: transparent;
}

.slidebar-checkbox-wrapper-4 input[type=checkbox] {
    position: relative;
    display: inline-block;
    appearance: none;
    -webkit-appearance: none;
    width: 0.18rem;
    height: 0.18rem;
    outline: none;
    background-color: transparent;
    margin: 0;
}

.slidebar-checkbox-wrapper-4 .login-checkbox {
    /* display: inline-block; */
    width: 0.16rem;
    height: 0.16rem;
    background: url('../image/tect-check1.png') no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
}

.slidebar-checkbox-wrapper-4 .login-checkbox:checked::after {
    content: '';
    display: inline-block;
    width: 0.23rem;
    height: 0.22rem;
    /* transform: translateX(-0.01rem); */
    background: url('../image/tect-check-active1.png') no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: relative;
    top: -0.03rem;

}

.slidebar-checkbox-wrapper-4 .login-checkbox-hint {
    background: url('../image/tect-blue4.png') no-repeat;
    width: 1.01rem;
    height: 0.15rem;
    background-size: 100%;
    /* font-size: 0.18rem; */
    margin-left: .13rem;
    letter-spacing: -0.025rem;
    pointer-events: none;
}

.treasure-btn {
    width: 1.24rem;
    height: 0.42rem;
    position: absolute;
    right: 0.37rem;
    top: 2.25rem;
    cursor: pointer;
}

/* .treasume{
    width: 1.24rem;
    height: 0.42rem;
    position: absolute;
    right: 0.37rem;
    top: 2.25rem;
    cursor: pointer;
} */
.treasure-img {
    filter: grayscale(100%);
}

.treasure-auto {
    position: absolute;
    right: 0rem;
    top: 0rem;
    background: url('../image/treasure-auto.png') no-repeat;
    background-size: 100%;
    width: 1.24rem;
    height: 0.42rem;
    cursor: pointer;
}

.treasure {
    position: absolute;
    right: 0rem;
    top: 0rem;
    background: url('../image/treasure.png') no-repeat;
    background-size: 100%;
    width: 1.24rem;
    height: 0.42rem;
    cursor: pointer;
}

.slidermsg .slidermsg-bg {
    width: 0.17rem;
    height: 1.07rem;
    position: absolute;
    left: 0.52rem;
    top: 4rem;
    overflow: hidden;
}

.speed-h1 {
    width: 0.17rem;
    height: 1.07rem;
    position: absolute;
    z-index: 2;
    left: 0.52rem;
    top: 4rem;
    overflow: hidden;
}

.speed-h2 {
    width: 0.17rem;
    height: 1.07rem;
    position: absolute;
    left: 0.52rem;
    z-index: 2;
    top: 2.94rem;
}

.speed-h3 {
    width: 0.17rem;
    height: 1.07rem;
    position: absolute;
    left: 0.52rem;

    z-index: 2;
    top: 1.88rem;
}

.speed-h4 {
    width: 0.17rem;
    height: 1.07rem;
    position: absolute;
    left: 0.52rem;
    top: 0.84rem;
    z-index: 2;
}

.result-frame .result-cloce {
    width: .28rem;
    height: .32rem;
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
    /* background: url(../img/appointment-clone.png) no-repeat; */
    background-size: 100%;
}

.rabbit-frame .rabbit-cloce {
    width: .28rem;
    height: .32rem;
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
    background: url(../image/appointment-clone.png) no-repeat;
    background-size: 100%;
}

/* lounge 弹窗 */
.rabbit-code-bg {
    background: url(../image/rabbit-code.png) no-repeat;
    background-size: 100%;
    width: 8.62rem;
    height: 4.39rem;
}

.rabbit-code-copy {
    background: url('../image/pop/regulations-2.png') no-repeat;
    background-size: 100%;
    width: 0.32rem;
    height: 0.18rem;
    cursor: pointer;
    margin-left: 0.2rem;
}

.rabbit-code-btn {
    position: absolute;
    background: url(../image/btn-Privacy.png) no-repeat;
    background-size: 100%;
    width: 2.61rem;
    height: 0.86rem;
    bottom: 0.4rem;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;

}

.rabbit-code {
    top: 1.12rem;
    left: 4.4rem;
    width: 1.5rem;
    display: flex;
    color: #fff;
    position: absolute;
    align-items: center;
    justify-content: space-between;
}


.tabsActive {
    display: block;
}

.rules {
    width: 2rem;
    height: 1.5rem;
    position: absolute;
    left: 0.35rem;
    top: 1.6rem;
}

.rules1 {
    width: 1.27rem;
    height: 0.23rem;
}

.rules2 {
    width: 1.27rem;
    height: 0.23rem;
}

.rules3 {
    width: 0.97rem;
    height: 0.23rem;
}

.rules4 {
    width: 1.31rem;
    height: 0.17rem;
}

.slidbe1 {
    width: 1.27rem;
    height: 0.23rem;
    background: url('../image/rules1.png') no-repeat;
    background-size: 100%;
    margin-bottom: .05rem;
    cursor: pointer;
}

.slidbe1Active {
    width: 1.27rem;
    height: 0.23rem;
    background: url('../image/slidbe1Active.png') no-repeat;
    background-size: 100%;
    margin-bottom: .1rem;

}

.slidbe2 {
    width: 1.27rem;
    height: 0.23rem;
    background: url('../image/rules2.png') no-repeat;
    background-size: 100%;
    /* margin-top: 0.1rem; */
    margin-bottom: .05rem;
    cursor: pointer;
}

.slidbe2Active {
    width: 1.27rem;
    height: 0.23rem;
    background: url('../image/slidbe2Active.png') no-repeat;
    background-size: 100%;
    margin-bottom: .1rem;
}

.slidbe3 {
    width: 0.97rem;
    height: 0.23rem;
    background: url('../image/rules3.png') no-repeat;
    background-size: 100%;
    cursor: pointer;
    margin-bottom: .05rem;
}

.slidbe3Active {
    width: 0.97rem;
    height: 0.23rem;
    background: url('../image/slidbe3Active.png') no-repeat;
    background-size: 100%;
    margin-bottom: .15rem;
}

.slidbe4 {
    width: 1.31rem;
    height: 0.17rem;
    background: url('../image/rules4.png') no-repeat;
    background-size: 100%;
    cursor: pointer;
}

.slidbe4Active {
    width: 1.27rem;
    height: 0.23rem;
    background: url('../image/slidbe4Active.png') no-repeat;
    background-size: 100%;
    margin-top: -.05rem;
}

.poker-blo {
    display: none;
}



/* .page4-left-Eye{
    width: 1.25rem;
    height: 1.25rem;
    background: url('../img/page4-left.png');
    position: absolute;
    top: 0.3rem;
    left: 5.4rem;
}
.page4-right-Eye{
    width: 1.25rem;
    height: 1.25rem;
    background: url('../img/page4-right.png');
    position: absolute;
    top: 0.3rem;
    right: 5.7rem;
} */


@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

.floating-div {
    transition: transform 0.2s ease-in-out;
    animation-name: float;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* 答题完成 */
.finish-hint .finish-content {
    background: url(../image/pop/finished-bg.png) no-repeat;
    background-size: 100%;
    width: 5.7rem;
    height: 3.25rem;
}

.finish-hint .confirm-btn {
    position: absolute;
    width: 1.86rem;
    height: 0.7rem;
    left: 1.9rem;
    top: 2.1rem;
    background: url(../image/pop/pop-btn-close.png) no-repeat;
    background-size: 100%;
}

.finish-hint .dia-close {
    position: absolute;
    width: 0.27rem;
    height: 0.27rem;
    left: 5.2rem;
    background: url(../image/pop/pop-close.png) no-repeat;
    background-size: 100%;
}

/* .title-bg-animate::before {
    content: '';
    width: 10rem;
    height: 2.5rem;
    background: url(../image/title-bg.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: -0.7rem;
    left: 50%;
    transform: translateX(-50%);
} */

/* 没选满弹窗 */
.no-select-content {
    width: 5.72rem;
    height: 7.36rem;
    background: url(../image/pop/no-select-bg.png) no-repeat;
    background-size: 100%;
    top: 43%;
}

.no-select-btn {
    width: 2.59rem;
    height: 0.79rem;
    background: url(../image/pop/no-select-btn.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 4.5rem;
    left: 1.5rem;
    cursor: pointer;
}

.no-select-content .dia-close {
  top: 2.8rem;
}


.result-content {
  width: 3.92rem;
  height: 9.07rem;
  background: url(../image/pop/result-content.png) no-repeat;
  background-repeat: no-repeat;
  background-size: 100%;
  top: 55.5%;
  left: 50.2%;
}

.pop-gift::after  {
  content: '';
  width: 3.98rem;
  height: 2.72rem;
  background: url('../image/pop/login-gift.png') no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 0.75rem;
  left: 0.3rem;
}

.pop-gift{
  width: 4.2rem;
  height: 4.2rem;
  background: url('../image/section2/order-bg-i2.png') no-repeat center;
  background-size: 80%;
  position: absolute;
  top: -0.45rem;
  left: 0.25rem;
}


.pop-login-title::before {
  content: '';
  width: 4.5rem;
  height: .8rem;
  background: url(../image/pop/login-tl.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: -0.25rem;
  left: -0.3rem;
}
.pop-login-title {
  width: 3.65rem;
  height: 0.37rem;
  background: url('../image/pop/login-tl2.png') no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 0.55rem;
  left: 4.45rem;
}