@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; */
    touch-action: pan-y;
}

body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    font: 16px/1.8 "Microsoft Yahei", Verdana, Arial, Helvetica, sans-serif;
    transform-origin: top center;
    /*IOS禁止调整字体大小*/
    -webkit-text-size-adjust: 100% !important;

}

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;
    padding: 1px;
}

textarea {
    overflow: auto;
    resize: none
}

.wrap {
    width: 100%;
    /* background: url(../image/bj.jpg) no-repeat center top; */
    overflow: hidden;
}

.wrap-left {
    padding-left: 12px;
}

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 {
    vertical-align: middle;
}

input,
select {
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

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

textarea {
    overflow: auto;
    resize: none
}

.hide {
    display: none
}

.fl {
    float: left
}

.fr {
    float: right
}

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

.show {
    display: block
}


@-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);
    }
}

@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);
    }
}

@keyframes cyberpunk {
    0% {
        clip-path: inset(20% -5px 60% 0);
        transform: translate(-6px, 5px);
        visibility: visible;
    }

    10% {
        clip-path: inset(50% -5px 30% 0);
        transform: translate(6px, -5px);
    }

    20% {
        clip-path: inset(20% -5px 60% 0);
        transform: translate(5px, 0px);
    }

    30% {
        clip-path: inset(80% -5px 5% 0);
        transform: translate(-8px, 5px);
    }

    40% {
        clip-path: inset(0 -5px 80% 0);
        transform: translate(3px, 6px);
    }

    50% {
        clip-path: inset(50% -5px 30% 0);
        transform: translate(-6px, -5px);
    }

    60% {
        clip-path: inset(80% -5px 5% 0);
        transform: translate(-7px, 5px);
    }

    70% {
        clip-path: inset(0 -5px 80% 0);
        transform: translate(3px, 6px);
    }

    80% {
        clip-path: inset(0 -5px 80% 0);
        transform: translate(3px, 6px);
    }

    90% {
        clip-path: inset(0 -5px 80% 0);
        transform: translate(3px, 6px);
    }

    100% {
        clip-path: inset(0 -5px 80% 0);
        transform: translate(3px, 6px);
    }
}

@keyframes pulse-reverse {
    0% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

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

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

@keyframes fadeMoveLeft {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translate3d(-50px, 0, 0);
        transform: translate3d(-50px, 0, 0);
        opacity: 0.2;
    }
}

@keyframes fadeMoveRight {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translate3d(50px, 0, 0);
        transform: translate3d(50px, 0, 0);
        opacity: 0.2;
    }
}

html,
body,
.container {
    position: relative;
    /* height: 100%; */
    background-color: black;
}

.container {
    width: 720px;
    margin: auto;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-wrapper {
    width: 100%;
    height: 100%;
}

.page {
    width: 100%;
    height: 100%;
    position: relative;
}

.discord {
    position: absolute;
    top: 86px;
    right: 0px;
    display: none;
}

.discord>ul {
    background: url('../image/discord-img.png') no-repeat;
    width: 126px;
    height: 467px;
    background-size: 100%;
    position: relative;
}

.discord ul li {
    color: #fff;
    font-size: 22px;
    width: 126px;
}

.discord ul li:nth-child(1) {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);

}

.discord ul li:nth-child(2) {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
}

.discord ul li:nth-child(3) {
    position: absolute;
    top: 175px;
    left: 50%;
    transform: translateX(-50%);
}

.discord ul li:nth-child(4) {
    position: absolute;
    top: 230px;
    left: 50%;
    transform: translateX(-50%);
}

.discord ul li:nth-child(5) {
    position: absolute;
    bottom: 96px;
    left: 50%;
    transform: translateX(-50%);
}

.discord ul li:nth-child(6) {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
}

.swiper-wrapper .swiper-slide.page1 {
    background: url(../image/bg_1.jpg) no-repeat;
    background-size: cover;
}

.swiper-wrapper .swiper-slide.page2 {
    background: url(../image/bg_2.png) no-repeat;
    background-size: cover;
}

.swiper-wrapper .swiper-slide.page3 {
    background: url(../image/bg_3.png) no-repeat;
    background-size: cover;
}

.swiper-wrapper .swiper-slide.page4 {
    background: url(../image/bg_4.png) no-repeat;
    background-size: cover;
}

.swiper-wrapper .swiper-slide.page5 {
    background: url(../image/bg_5.png) no-repeat;
    background-size: cover;
}

.swiper-wrapper .swiper-slide.page6 {
    background: url(../image/bg_6.png) no-repeat;
    background-size: cover;
}

.treasure-box {
    width: 111px;
    height: 129px;
}

.treasure-slidebar {
    position: fixed;
    top: 25%;
    left: 2px;
    z-index: 99;
    transition: all .3s;
}

.sideBanner {
    position: fixed;
    bottom: 30px;
    left: 20px;
    z-index: 90;
    transition: all .3s;
}

.aside-right-po {
    display: block;
    position: relative;
    width: 270px;
    height: 226px;
    background: url(../image/aside-right.png) no-repeat;
    background-size: 100%;
    left: 10px;
}

.sideBanner .google-right {
    background: url("../image/google_store.png") no-repeat;
    background-size: 100%;
    width: 103px;
    height: 38px;
    position: absolute;
    top: 138px;
    left: 154px;
    overflow: hidden;
    border-radius: 12px;
}

.sideBanner .ios-right {
    background: url(../image/apple_store.png) no-repeat;
    background-size: 100%;
    width: 103px;
    height: 38px;
    position: absolute;
    top: 138px;
    left: 154px;
    overflow: hidden;
    border-radius: 12px;
}

/* .slidebar-rules{
    width: 320px;
    height: 257px;
    background: url("../img/slidebar-rules.png") no-repeat;
    background-size: 100%;
    position: relative;
    margin-top: 10px;
    left: 0px;
} */
.slidebar-left {
    width: 263px;
    height: 171px;
    position: fixed;
    bottom: 1%;
    left: 13px;
    z-index: 99;
    transition: all .3s;
}

.slidebar-right {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 90;
    transition: all .3s;
    cursor: pointer;
}

.activity {
    display: block;
    width: 283px;
    height: 219px;
}

.aside-left {
    width: 283px;
    height: 219px;
}

.slidebar-fle {
    display: flex;
}

.slidebar-rules {
    width: 516px;
    height: 414px;
    background: url("../image/slidebar-rules2.png") no-repeat;
    background-size: 100%;
    position: relative;
    top: 50px;
    left: -50px;
}

.slidermsg {
    width: 119px;
    height: 499px;
    background: url('../image/progress.png') no-repeat;
    background-size: 100%;
    position: relative;
}

.rules {
    width: 200px;
    height: 150px;
    position: absolute;
    left: 46px;
    top: 228px;
}

.slidbe1 {
    width: 185px;
    height: 24px;
    background: url('../image/rules1.png') no-repeat;
    background-size: 100%;
}

.slidbe1Active {
    width: 185px;
    height: 32px;
    background: url('../image/slidbe1Active.png') no-repeat;
    background-size: 100%;

}

.slidbe2 {
    width: 185px;
    height: 24px;
    background: url('../image/rules2.png') no-repeat;
    background-size: 100%;
    margin-top: 10px;
}

.slidbe2Active {
    width: 185px;
    height: 33px;
    background: url('../image/slidbe2Active.png') no-repeat;
    background-size: 100%;
    margin-top: 10px;
}

.slidbe3 {
    width: 141px;
    height: 24px;
    background: url('../image/rules3.png') no-repeat;
    background-size: 100%;
    margin-top: 10px;
}

.slidbe3Active {
    width: 141px;
    height: 32px;
    background: url('../image/slidbe3Active.png') no-repeat;
    background-size: 100%;
    margin-top: 10px;
}

.slidbe4 {
    width: 185px;
    height: 24px;
    background: url('../image/rules4.png') no-repeat;
    background-size: 100%;
    margin-top: 10px;
}

.slidbe4Active {
    width: 190px;
    height: 33px;
    background: url('../image/slidbe4Active.png') no-repeat;
    background-size: 100%;
    margin-top: 10px;
}

.treasure-img {
    filter: grayscale(100%);
}

.treasure-auto {
    position: absolute;
    top: 108px;
    right: 16px;
    background: url('../image/treasure-auto.png') no-repeat;
    background-size: 100%;
    width: 173px;
    height: 55px;
}

.treasure {
    position: absolute;
    top: 108px;
    right: 16px;
    background: url('../image/treasure.png') no-repeat;
    background-size: 100%;
    width: 173px;
    height: 55px;
}

.treasure-btn {
    width: 113px;
    height: 39px;
    position: absolute;
    right: 38px;
    top: 216px;
    cursor: pointer;
}

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



.suspend-btn {
    position: absolute;
    background: url(../image/jiang-btn.png) no-repeat;
    background-size: 100%;
    width: 241px;
    height: 80px;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

.suspend-code {
    display: flex;
    position: absolute;
    top: 114px;
    left: 332px;
    color: #ABABAB;
}


#page-mp4 {
    width: 100%;
    height: 100%;
    /* position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%; */

}

.page1 {
    /* background: url(../image/bg_1.png) no-repeat; */
    background-size: 100%;
    height: 1280px;
    position: relative;
}

.page2 {
    /* background: url(../images/bg_2.jpg) no-repeat; */
    background-size: cover;
    height: 1436px;
    position: relative;
    /* margin-top: 300px; */
}

.page3-con2 {
    width: 720PX;
    height: 1136PX;
    position: relative;
    margin: 0 auto;
}

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

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

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

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

.page3-con2 .tect2-text {
    position: absolute;
    left: 42px;
    bottom: 96px;
}

.page3-con2 .tect2-text img {
    width: 224px;
    height: 230px;
}

.page3-con2 .tect2-btnList {
    display: flex;
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
}

.page3-con2 .tect2-btnList .tect2-btn {
    width: 232px;
    height: 52px;
    cursor: pointer;
}

.page3-con2 .tect2-btnList .tect2-btn1 {
    margin-right: 34px;
}

.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-btnList .tect2-btn2 {
    background: url(../image/character/btn-black.png) no-repeat;
    background-size: 100%;
}


.page4 .page4-line {
    position: absolute;
    width: 688px;
    height: 18px;
    left: 34px;
    background: url(../image/page4-line.png) no-repeat;
    background-size: 100%;
    top: 526px;
}

.page4 .page4-line1 {
    position: absolute;
    width: 562px;
    height: 18px;
    left: 159px;
    top: 792px;
    background: url(../image/page4-line2.png) no-repeat;
    background-size: 100%;
}

.page4-louge {
    position: absolute;
    top: 842px;
    width: 482px;
    height: 79px;
    background: url('../image/page4-lounge.png') no-repeat;
    background-size: 100%;
    left: 50%;
    margin-left: -241px;
    z-index: 10;
}


.page4 ul li {

    position: absolute;
}


.page5 .page5-rearaw {
    position: absolute;
    left: 50px;
    bottom: 124px;
    width: 653px;
    height: 331px;
    background: url(../image/raward-img.png) no-repeat;
    background-size: 100%;
}

.page5 .page5-rearaw img {
    position: absolute;
    left: 11px;
    top: 0;
    animation: bottomToTop 2s infinite;
}

.page5 .page5-btn {
    position: absolute;
    bottom: 0;
    left: 205px;
    width: 308px;
    height: 69px;
    background: url(../image/btn-reward.png) no-repeat;
    background-size: 100%;

}

.spotlight {
    width: 720px;
    height: 921px;
    background: url('../image/spotlight.png') no-repeat;
    background-size: 100%;
    position: absolute;
    opacity: 0;
}





@keyframes bottomToTop {
    0% {
        transform: translateY(0%);
        opacity: 0;
    }

    100% {
        transform: translateY(-15%);
        opacity: 1;
    }
}

.tutorial {
    position: absolute;
    top: 855px;
    left: 0px;
    width: 100%;
}

.tutorial-title {
    width: 192px;
    height: 28px;
    position: absolute;
    left: 50%;
    margin-left: -92px;
    /* transform: translateX(-50%); */
    top: 50px;
}

.tutorial-gp li:nth-child(1) {
    width: 223px;
    height: 198px;
}

.tutorial-gp li:nth-child(2) {
    width: 223px;
    height: 198px;
}

.tutorial-gp li:nth-child(3) {
    width: 223px;
    height: 198px;
}

.tutorial-ios li:nth-child(1) {
    width: 223px;
    height: 198px;
}

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

.page6 {
    background-size: cover;
    width: 720px;
    /* height: 1436px; */
    position: relative;
}

.page7 {
    width: 720px;
    margin: 0 auto;
    /* background: url(../images/bg_7.jpg) no-repeat; */
    background-size: cover;
    height: 1280px;
    position: relative;
}

.role-page-bg {
    background-image: url("../images/role-page-bg.jpg");
}

/*菜单栏*/
.header {
    width: 720px;
    height: 90px;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    /* margin-left: -360px; */
    background: url("../image/header-bg.png") no-repeat;
    /* background-color: #000; */
    background-size: 100%;
    z-index: 99;
    border: transparent;
}

.header nav {
    font-size: 0;
    text-align: center;
    padding-left: 215px;
    /* background: url('../images/header-nav.png') no-repeat;
    width: 720px;
    height: 17px; */
    /* margin-top: 30px; */
}

.header nav a {
    /* width: 223px;
    /* height: 73px; */
    /* position: relative;
    float: left;
    margin-left: -24px; */
}

.header nav .header-pop-login {
    /* background: url("../images/header-order.png") no-repeat; */
    background-size: 100%;
}

.header .logo {
    background: url(../image/header-logo.png) no-repeat;
    background-size: 100%;
    width: 224px;
    height: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
}

.header-btns {
    display: flex;
    /* justify-content: space-evenly; */
    justify-content: flex-end;
    align-items: center;
    height: 87px;
    /* margin-top: -5px;
    margin-left: 70px; */
}

.header-btns a {
    margin-right: 40px;
}

.btn-louge {
    background: url(../image/btn-louge.png) no-repeat;
    background-size: 100%;
    width: 48px;
    height: 38px;
}

.btn-code {
    background: url(../image/btn-code.png) no-repeat;
    background-size: 100%;
    width: 60px;
    height: 30px;
    /* margin-top: 10px; */
}

.btn-Discord {
    background: url(../image/expand.png) no-repeat;
    background-size: 100%;
    width: 43px;
    height: 28px;
}

.header nav .btn-cafe {
    background: url(../images/btn-cafe.png) no-repeat;
    background-size: 100%;
    width: 43px;
    height: 43px;
}

.btn-youtube {
    background: url(../image/btn-YouTube.png) no-repeat;
    background-size: 100%;
    width: 53px;
    height: 36px;
    margin-top: 3px;
}

.btn-web {
    background: url(../image/btn-cafe.png) no-repeat;
    background-size: 100%;
    width: 43px;
    height: 43px;
    margin-top: 3px;
}

.btn-more {
    position: absolute;
    background: url(../images/btn-more.png) no-repeat;
    background-size: 100%;
    width: 53px;
    height: 42px;
    right: 30px;
    top: 28px;
}

.btn-more.active {
    position: absolute;
    background: url(../images/btn-off.png) no-repeat;
    background-size: 100%;
    width: 53px;
    height: 53px;
    right: 30px;
    top: 20px;

}

.header .header-menu {
    position: fixed;
    height: 100%;
    background: rgba(37, 21, 24, .8);
    width: 60%;
    right: -60%;
    margin-top: 5px;
    transition: all 0.4s;
}

.header .header-menu.active {
    right: 0;
    transition: all 0.4s;
}

.header .header-menu .menu-logo {
    /* background: url(../images/header-logo.png) no-repeat; */
    background-size: 100%;
    width: 168px;
    height: 107px;
    position: absolute;
    left: 30%;
    top: 2%;
}

.header .header-menu .header-menu-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 18%;
    left: 20%;
}

.header .header-menu .menu-btns {
    display: flex;
    flex-direction: column;
}

.header .menu-btns .btn-google {
    background: url(../images/google-btn.png) no-repeat;
    background-size: 100%;
    width: 202px;
    height: 62px;
    top: 70%;
    left: 32.5%;
    position: absolute;
}

.header .menu-btns .btn-ios {
    background: url(../images/ios-btn.png) no-repeat;
    background-size: 100%;
    width: 202px;
    height: 62px;
    position: absolute;
    left: 32.5%;
    top: 77%;
}

.header .menu-btns .btn-one {
    background: url(../images/one-btn.png) no-repeat;
    background-size: 100%;
    width: 202px;
    height: 62px;
    position: absolute;
    left: 32.5%;
    top: 84%;
}

.header-menu-list li {
    line-height: 230%;
    font-size: 30px;
    color: #fff;
}

.header-menu-list li.active {
    font-weight: 600;
    color: #F6D59B;
}

.discord ul li.active {
    color: rgba(100, 174, 178);

}

/* .header nav a:nth-of-type(3) {
    width: 228px;
} */
.header nav a.header-total-download {
    width: 336px;
}

/* .header nav a:before{
    content: "";
    width: 2px;
    height: 62px;
    position: absolute;
    right: 0;
    top: 16px;
    background: linear-gradient(to bottom, #7d94b8, #3b558a);
}
.header nav a:last-child:before{
    content: "";
    width: 0px;
    height: 0px;
} */
.header nav a img {
    /* width: 48px; */
    display: inline-block;
}

/*第一屏*/
.page1 .order-btn {
    position: absolute;
    width: 410px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 196px;
}

.page1 .order-btn a {
    position: absolute;
    background: url(../image/order-btn.png) no-repeat;
    background-size: 100%;
    width: 392px;
    height: 113px;
}

.page1 .order-btn a.no-aftere::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../image/red-point.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: 0px;
    left: 5px;
    z-index: 1;
    cursor: default;
}

.page1 .order-btn a.no-aftere::before {
    content: '';
    display: inline-block;
    width: 102px;
    height: 87px;
    background: url(../image/head.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    bottom: -40px;
    right: -38px;
    z-index: 1;
    cursor: default;
}

.order-btn .order-select {
    position: absolute;
    background: url(../image/order-select.png) no-repeat;
    background-size: 100%;
    width: 90px;
    height: 45px;
    bottom: -184px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.title {
    overflow: hidden;
}

.poker .title,
.lottery .title,
.role .title,
.task .title,
.invite .title,
.team .title {
    text-align: center;
}


.mobile-reservation {
    position: relative;
    top: 90px;
}

.order {
    /* padding-bottom: 100px; */
    font-size: 0;
    position: relative;
}

.order .title {
    overflow: hidden;
    position: relative;
    top: -16px;
}

.order .order-onelink {
    position: fixed;
    right: 0;
    bottom: 20px;
    z-index: 2;
    width: 281px;
    height: 281px;
    background: url("../images/order-onelink0.png") no-repeat;
    background-size: 100%;
    transition: all .3s;
}

.order-info {
    width: 699px;
    height: 1386px;
    margin: -55px -2px;
    position: relative;
    background: url(../images/order-bg.png) no-repeat;
    background-size: 100%;
}

.order-info .content .step-type {
    line-height: 29px;
    position: absolute;
    font-size: 24px;
    color: #fff;
    font-weight: 500;
    top: 588px;
    left: 75px;
}

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

.step-type-ios {
    position: absolute;
    cursor: pointer;
    left: 170px;
    width: 140px;
}

.step-type-android {
    position: absolute;
    cursor: pointer;
    width: 170px;
}

#step-type-ios[type='radio']+label::before,
#step-type-android[type='radio']+label::before {
    content: '';
    width: 16px;
    height: 16px;
    background: url(../images/step-type-checkbox.png) no-repeat;
    background-size: 100%;
    float: left;
    margin-top: 8px;
    margin-right: 8px;
}

#step-type-ios[type='radio']:checked+label::before,
#step-type-android[type='radio']:checked+label::before {
    background: url(../images/step-type-checkbox-active.png) no-repeat;
    background-clip: content-box;
    background-size: 100%;
    width: 16px;
    height: 16px;
    margin-top: 8px;
    margin-right: 8px;
}
/*.step-info-flex::after {*/
/*    position: absolute;*/
/*    content: '';*/
/*    width: 10px;*/
/*    height: 0px;*/
/*    border: 1.8px solid #fff;*/
/*    display: inline-block;*/
/*    top: 100px;*/
/*    left: 220px;*/
/*}*/

#phone::placeholder {
    color: #747373;
    text-align: center;
    /* font-size: 36px; */
    position: relative;
    font-weight: 600;
    opacity: .6;
}

#phone::-ms-input-placeholder {
    color: #747373;
    text-align: center;
    /* font-size: 36px; */
    position: relative;
    font-weight: 600;
    opacity: .6;

}

#phone::-webkit-input-placeholder {
    color: #747373;
    text-align: center;
    /* font-size: 36px; */
    position: relative;
    opacity: .6;
    font-weight: 600;

}



input::placeholder {
    color: #000000;
}

input::-ms-input-placeholder {
    text-align: center;
}

input::-webkit-input-placeholder {
    text-align: center;
}

.login-checkbox-wrapper-1 {
  display: flex;
  position: absolute;
  top: 670px;
  left: 110px;
  align-items: center;
  width: 540px;
  display: none;
}

.login-checkbox-wrapper2 {
    display: flex;
    position: absolute;
    top: 450px;
    left: 110px;
    align-items: center;
    width: 540px;
}

.login-checkbox-wrapper3 {
  display: flex;
  position: absolute;
  top: 590px;
  left: 110px;
  align-items: center;
  width: 384px;
}



/* .login-checkbox2 {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../image/section2/login-checkbox.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
} */


.login-checkbox2:checked::after {
    content: '';
    display: inline-block;
    width: 19px;
    height: 18px;
    background: url("../image/section2/login-checkbox-active.png") no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    margin-top: -4px;
    margin-left: -3px;
}

.login-checkbox-hint {
    display: inline-block;
    width: 357px;
    height: 22px;
    margin-left: 16px;
    background: url(../image/section2/login-check1.png) no-repeat;
    background-size: 100%;
}

.login-checkbox-hint2 {
    display: inline-block;
    width: 264px;
    height: 42px;
    margin-left: 10px;
    line-height: 25px;
    font-size: 21px;
    background: url(../image/section2/login-check2.png) no-repeat;
    background-size: 100%;
}


.note-1 {
    background: url('../image/pop/regulation.png') no-repeat;
    width: 75px;
    height: 29px;
    background-size: 100%;
    position: absolute;
    right: -120px;
    top: -1px;
}

.equity .note-1 {
    background: url('../image/pop/regulations2.png') no-repeat;
    width: 79px;
    height: 30px;
    background-size: 100%;
    position: absolute;
    left: 430px;
    top: 2px;
}
.note-2 {
    background: url('../image/pop/regulations2.png') no-repeat;
    width: 74px;
    height: 20px;
    background-size: 100%;
    position: absolute;
    right: 280px;
    top: -1px;
}
.pager2-order .note-2 {
    top: 4px;
    left: 310px;
    width: 78px;
    height: 26px;
    background: url(../image/section2/protocol-bg.png) no-repeat;
    background-size: 100%;
}
.mobile-shoop {
    position: absolute;
    top: 550px;
    left: 50%;
    margin-left: -155px;
    /* transform: translateX(-50%); */
    /* width: 432px; */
    /* height: 160px; */
}

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

    to {
        left: 100%;
    }
}

@-webkit-keyframes sg

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

    to {
        left: 100%;
    }
}

.down-gp {
    width: 208px;
    height: 65px;
}

.down-ios {
    width: 208px;
    height: 65px;
}

.down-one {
    width: 208px;
    height: 63px;
}

.down-store {
    width: 210px;
    height: 65px;
}


.order-info .content .step-info {
    position: relative;
    top: 480px;
    left: 100px;
}

.order-info .content .step-info .font-number {
    color: #EBA16F;
    position: absolute;
    font-size: 24px;
    font-weight: 500;
    left: -20px;
    top: 20px;
    z-index: 1;
}

.order-info .content .step-info .order-tel {
    width: 440px;
    height: 60px;
    background: #392B2B;
    vertical-align: bottom;
    border: 1px solid #4B1F0F;
    font-size: 20px;
    font-weight: 500;
    color: #787575;
    text-align: left;
    text-align-last: left;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    padding-left: 90px;
    position: absolute;
    top: 12px;
    left: -35px;
}

.order-info .content .btn-login {
    width: 142px;
    height: 64px;
    left: 525px;
    top: 620px;
    position: absolute;
    background: url(../images/order-login.png) no-repeat;
    background-size: 100%;
}

.login-checkbox-wrapper-2 a {
    font-size: 18px;
    margin-left: 152px;
    color: #6D402D;
}

.login-checkbox-wrapper-2 .login-checkbox-hint {
    width: 242px;
    height: 22px;
    font-size: 18px;
    color: #6D402D;
    margin-left: 15px;
    margin-top: 3px;
    letter-spacing: -1px;
    pointer-events: none;
    background: url(../image/section2/login-check2.png) no-repeat;
    background-size: 100%;
}

.content .step-second {
    display: flex;
    /* flex-direction: column; */
    justify-content: space-evenly;
    width: 600px;
    height: 225px;
    top: 1118px;
    left: 50px;
    position: absolute;
}

.content .step-second .order-store-gp {
    width: 170px;
    height: 51px;
}

.mobile-reservation-gp-img.no-after::after {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url(../image/red-point.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: -12px;
    left: 0;
    z-index: 1;
    -webkit-animation: fblike 1s ease-in-out infinite;
    animation: fblike 1s ease-in-out infinite;
    cursor: default;
}

.mobile-reservation-gp-img.no-after::before {
    content: '';
    display: inline-block;
    width: 102px;
    height: 87px;
    background: url(../image/head.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    bottom: -30px;
    right: -54px;
    z-index: 1;
    cursor: default;
}

/* .step-info>div{
    position: absolute;
    left: 6px;
    color: #000000;
    font-size: 40px;
    top: 9px;
} */
.mobile-reservation-store-img.no-after::before {
    content: '';
    display: inline-block;
    width: 102px;
    height: 87px;
    background: url(../image/head.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    bottom: -31px;
    right: -56px;
    z-index: 1;
    cursor: default;
}

.mobile-reservation-store-img.no-after::after {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url(../image/red-point.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: -12px;
    left: -10px;
    z-index: 1;
    cursor: default;
}

.content .step-second .order-store-gp::after {
    content: '';
    display: inline-block;
    width: 65px;
    height: 65px;
    background: url(../image/finger.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: 45px;
    left: 73px;
    cursor: default;
}

.content .step-second .order-store-gp.no-after:after {
    content: none;
}

.content .step-second .order-store-gp::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../images/red-point.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: -12px;
    left: 130px;
    z-index: 1;
    -webkit-animation: fblike 1s ease-in-out infinite;
    animation: fblike 1s ease-in-out infinite;
    cursor: default;
}

.content .step-second .order-store-gp.no-before:before {
    content: none;
}

.content .step-second .order-store-ios {
    width: 171px;
    height: 51px;
}

.content .step-second .order-store-ios::after {
    content: '';
    display: inline-block;
    width: 65px;
    height: 65px;
    background: url(../images/finger.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: 45px;
    left: 73px;
    -webkit-animation: fblike 1s ease-in-out infinite;
    animation: fblike 1s ease-in-out infinite;
    cursor: default;
}

.content .step-second .order-store-ios.no-after:after {
    content: none;
}

.content .step-second .order-store-ios::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../images/red-point.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: -12px;
    left: 130px;
    z-index: 1;
    -webkit-animation: fblike 1s ease-in-out infinite;
    animation: fblike 1s ease-in-out infinite;
    cursor: default;
}

.content .step-second .order-store-ios.no-before:before {
    content: none;
}

.content .step-second .order-store-one {
    width: 172px;
    height: 50px;
}

.content .step-third .lounge-btn {
    position: absolute;
    background: url(../images/lounge-btn.png) no-repeat;
    background-size: 100%;
    width: 116px;
    height: 64px;
    left: 560px;
    top: 1065px;
}

.order-info.order-info-overtime {
    background-image: url("../images/order-bg.png");
}

.order-info .order-count {
    position: relative;
}

.order-info .order-count span {
    width: 196px;
    height: 50px;
    position: absolute;
    top: 27px;
    left: 198px;
    line-height: 1;
    font-size: 50px;
    font-weight: 700;
    color: #da1f4a;
    letter-spacing: 2px;
    text-align: center;
}

.order-info .content {
    padding-top: 130px;
    position: relative;
}

.order-info .content .count span {
    width: 196px;
    height: 50px;
    position: absolute;
    top: 100px;
    left: 100px;
    line-height: 1;
    font-size: 46px;
    font-weight: 700;
    color: #de3333;
    letter-spacing: 2px;
    text-align: center;
}

.order-info .step {
    margin-left: 30px;
}

.order-info .step .login-checkbox-wrapper {
    position: absolute;
    top: 387px;
    left: 104px;
    display: flex;
}

.order-info .step .hide.login-checkbox-wrapper {
    display: none;
}

.order-info .step .step-fb {
    position: absolute;
    top: 716px;
    left: 390px;
    /* margin: 16px 0 65px 125px; */
    display: flex;
    height: 100px;
    justify-content: center;
    align-items: center;
}

.order-info .step .step-fb::after {
    content: '';
    display: inline-block;
    width: 49px;
    height: 50px;
    background: url("../images/fb-like-hand.png") no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: 82px;
    left: 137px;
    -webkit-animation: fblike 1s ease-in-out infinite;
    animation: fblike 1s ease-in-out infinite;
}

.order-info .step .step-fb::before {
    content: '';
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url(../image/fb-like-red.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: 8px;
    left: 200px;
    z-index: 1;
}

@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 .step .step-fb a {
    display: inline-block;
    vertical-align: middle;
}

.order-info .step .step-fb a .fb-like {
    margin: 0 90px;
    display: block;
    -webkit-transform: scale(2.143);
    -moz-transform: scale(2.143);
    -ms-transform: scale(2.143);
    -o-transform: scale(2.143);
    transform: scale(2.143);
    -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 .step .step-fb a:last-of-type{
    width: 140px;
    height: 60px;
    background-color: #4267B2;
    border-radius: 8px;
    line-height: 60px;
    font-size: 32px;
    color: #fff;
    text-align: center;
} */
.order-info .step1 .step-info {
    margin-top: 23px;
    margin-left: 15px;
}

.link-store-linght {
    position: absolute;
    top: 0;
    left: -100%;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: url(../image/section2/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%;
    }
}


.page3 .page3-con {
    margin: 0 auto;
    padding-top: 220px;
    width: 720px;
    height: 1235px;
    background: url(../image/bg-page3.png) no-repeat;
    background-size: 100%;
}

.page3 .text-header {
    padding-top: 22px;
    width: 720px;
    height: 150px;
    background: url('../image/test-info.png') no-repeat;
    background-size: 100%;
}

.page3 .test-info {
    margin: 0 auto 0;
    width: 550px;
    height: 109px;
}

.test {
    top: 415px;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;

}

.test-list {
    width: 608px;
    height: 852px;
    margin: 0 auto;
    padding-top: 186px;
    background: url('../image/test-con.png') no-repeat;
    background-size: 100%;
}

.test-list li {
    margin: 0 auto;
    width: 335px;
    height: 26px;
    display: flex;
    align-items: center;
    margin-bottom: 132px;
    position: relative;
}

.test-list li:last-child {
    margin-bottom: 42px;
}

.test-list li div {
    display: flex;
    align-items: center;
    width: 36px;
    height: 36px;
}

.test-list li div:first-child {
    position: absolute;
    left: 113px;
}

.test-list li div:last-child {
    position: absolute;
    right: -14px;
}

.test-list li:last-child div {
    top: 8px;
    position: absolute;
    right: -14px;
}

.test-list li input {
    z-index: 2;
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.test-list li label {
    display: block;
    width: 36px;
    height: 36px;
}

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

.test-list li:first-child input[type='radio']:checked+label::before {
    content: '';
    display: block;
    background: url(../image/tect-check1-active.png) no-repeat;
    background-size: 100%;
    width: 36px;
    height: 35px;
    margin-top: -5px;
    margin-left: -5px;
}

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

.test-list li:nth-child(2) input[type='radio']:checked+label::before {
    content: '';
    display: block;
    background: url(../image/tect-check2-active.png) no-repeat;
    background-size: 100%;
    width: 36px;
    height: 35px;
    margin-top: -5px;
    margin-left: -5px;
}

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

.test-list li:nth-child(3) input[type='radio']:checked+label::before {
    content: '';
    display: block;
    background: url(../image/tect-check3-active.png) no-repeat;
    background-size: 100%;
    width: 36px;
    height: 35px;
    margin-top: -5px;
    margin-left: -5px;
}

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

.test-list li:nth-child(4) input[type='radio']:checked+label::before {
    content: '';
    display: block;
    background: url(../image/tect-check4-active.png) no-repeat;
    background-size: 100%;
    width: 36px;
    height: 35px;
    margin-top: -5px;
    margin-left: -5px;
}

.test-btnList {
    display: flex;
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
}

.test-btnList .test-btn {
    width: 232px;
    height: 61px;
}

.test-btnList .tect-btn1 {
    background: url(../image/tect-btn1.png) no-repeat;
    background-size: 100%;
    margin-right: 46px;
}

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

.noclick {
    pointer-events: none;
}

.page3 .lottery-dec a {
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid #C8641F;
    color: #C8641F;
    letter-spacing: -2px;
    position: absolute;
    top: 995px;
    left: 490px;
    line-height: 1;
}

.page3 .lottery-btns .order-btn {
    background: url(../images/order-btn-3.png) no-repeat;
    background-size: 100%;
    height: 80px;
    width: 228px;
    position: absolute;
    top: 1081px;
    left: 9px;
}

.page3 .lottery-btns .order-btn.finish {
    background: url(../images/order-btn-3-finish.png) no-repeat;
    background-size: 100%;
    height: 61px;
    width: 211px;
    position: absolute;
    top: 1101px;
    left: 26px;
    pointer-events: none;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

.page3 .lottery-btns .lounge-btn {
    background: url(../images/tolounge-btn.png) no-repeat;
    background-size: 100%;
    height: 80px;
    width: 229px;
    position: absolute;
    top: 1081px;
    left: 237px;
}

.page3 .lottery-btns .lounge-btn.finish {
    position: absolute;
    background: url(../images/tolounge-btn-finish.png) no-repeat;
    background-size: 100%;
    height: 61px;
    width: 211px;
    top: 1101px;
    left: 255px;
    pointer-events: none;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

.page3 .lottery-btns .award-btn {
    background: url(../images/award-btn.png) no-repeat;
    background-size: 100%;
    height: 61px;
    width: 211px;
    top: 1100px;
    left: 484px;
    position: absolute;
}

/* 第四屏 */
.page4 .title>img {
    position: absolute;
    width: 709px;
    height: 126px;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 100px;
}

.number-people {
    display: flex;
}

.number-people>div>img {
    width: 486px;
    height: 171px;

}

.page4 .count span {
    text-align: center;
    position: absolute;
    /* top: 133px;
    left: 400px; */
    /* line-height: 60px; */
    font-size: 60px;
    -webkit-text-size-adjust: none;
    font-weight: bolder;
    background-image: -webkit-linear-gradient(272deg, #FFFFFE, #847F7B);
    letter-spacing: 2px;
    /* 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;
}

.page4 .title .task-title-dec {
    color: #DAD4D1;
    font-size: 24px;
    top: 240px;
    left: 75px;
    letter-spacing: -1px;
    position: absolute;
    cursor: default;
}

.task-prize .task-1 {
    background: url(../images/task-1.png) no-repeat;
    background-size: 100%;
    width: 1.95rem;
    height: 3.63rem;
    position: absolute;
    top: -1.6rem;
    left: 0rem;
}

.page4 .task-dec {
    color: #BEB8B5;
    font-size: 20px;
    width: 620px;
    margin-top: 1200px;
    margin-left: 46px;
    letter-spacing: -1px;
    text-align: center;
    position: fixed;
}

.page4 .task-prize {
    position: absolute;
    margin-left: 40px;
    margin-top: 420px;
}

.task-prize .task-1 {
    background: url(../images/task-1.png) no-repeat;
    background-size: 100%;
    width: 548px;
    height: 159px;
    position: absolute;
    top: -110px;
    left: 59px;
}

.task-prize .task-1::after {
    content: "";
    width: 548px;
    height: 159px;
    position: absolute;
    background-color: rgba(0, 0, 0, .6);
    pointer-events: none;
}

.task-prize .task-1.finish::after {
    content: "";
    width: 548px;
    height: 159px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
}

.task-prize .task-2 {
    background: url(../images/task-2.png) no-repeat;
    background-size: 100%;
    width: 548px;
    height: 159px;
    position: absolute;
    top: 53px;
    left: 59px;
}

.task-prize .task-2::after {
    content: "";
    width: 548px;
    height: 159px;
    top: 1px;
    position: absolute;
    background-color: rgba(0, 0, 0, .6);
    pointer-events: none;
}

.task-prize .task-2.finish::after {
    content: "";
    width: 548px;
    height: 159px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
}

.task-prize .task-3 {
    background: url(../images/task-3.png) no-repeat;
    background-size: 100%;
    width: 548px;
    height: 159px;
    position: absolute;
    top: 221px;
    left: 59px;
}

.task-prize .task-3::after {
    content: "";
    width: 548px;
    height: 159px;
    position: absolute;
    background-color: rgba(0, 0, 0, .6);
    pointer-events: none;
}

.task-prize .task-3.finish::after {
    content: "";
    width: 548px;
    height: 159px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
}

.task-prize .task-4 {
    background: url(../images/task-4.png) no-repeat;
    background-size: 100%;
    width: 548px;
    height: 159px;
    position: absolute;
    top: 389px;
    left: 59px;
}

.task-prize .task-4::after {
    content: "";
    width: 548px;
    height: 159px;
    position: absolute;
    background-color: rgba(0, 0, 0, .6);
    pointer-events: none;
}

.task-prize .task-4.finish::after {
    content: "";
    width: 548px;
    height: 159px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
}

.task-prize .task-5 {
    background: url(../images/task-5.png) no-repeat;
    background-size: 100%;
    width: 548px;
    height: 183px;
    position: absolute;
    top: 605px;
    left: 59px;
}

.task-prize .task-5::after {
    content: "";
    width: 548px;
    height: 183px;
    position: absolute;
    background-color: rgba(0, 0, 0, .6);
    pointer-events: none;
}

.task-prize .task-5.finish::after {
    content: "";
    width: 100%;
    height: 99.4%;
    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,
.task-prize .task-3 .task-3-more,
.task-prize .task-5 .task-5-more {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px solid #A49292;
    color: #A49292;
    text-align: center;
    font-size: 24px;
    font-weight: lighter;
    align-items: center;
    line-height: 15px;
    font-weight: 600;
    position: absolute;
    left: 485px;
    top: 115px;
    cursor: default;
}

.task-1 .task-1-more:hover .task-1-pop {
    background: url(../images/task-1-pop.png) no-repeat;
    background-size: 100%;
    width: 229px;
    height: 302px;
    top: -240px;
    left: -220px;
    position: absolute;
    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: 229px;
    height: 305px;
    top: -240px;
    left: -220px;
    position: absolute;
    z-index: 99;
}

.task-3 .task-3-more:hover .task-3-pop {
    background: url(../images/task-3-pop.png) no-repeat;
    background-size: 100%;
    width: 229px;
    height: 305px;
    top: -240px;
    left: -220px;
    position: absolute;
    z-index: 99;
}

.task-5 .task-5-more:hover .task-5-pop {
    background: url(../images/task-5-pop.png) no-repeat;
    background-size: 100%;
    width: 229px;
    height: 305px;
    top: -240px;
    left: -220px;
    position: absolute;
    z-index: 99;
}

/* 第五屏 */
.page5 .title img {
    position: absolute;
    width: 431px;
    height: 175px;
    top: 150px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.page5>.copywriting {
    width: 600px;
    height: 120px;
    position: absolute;
    top: 300px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.prize {
    position: absolute;
    background: url('../images/prize.png')no-repeat;
    width: 720px;
    height: 64px;
    bottom: 130px;

}

.copywriting-btn {
    background: url('../images//copywriting-btn.png') no-repeat;
    width: 410px;
    height: 88px;
    position: absolute;
    bottom: -46px;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.page5 .weapon {
    background: url(../images/weapon.png) no-repeat;
    background-size: 100%;
    width: 621px;
    height: 1015px;
    position: absolute;
    left: 60px;
    top: 217px;
}

.weapon-name {
    background: url(../images/weapon-name.png) no-repeat;
    background-size: 100%;
    width: 480px;
    height: 61px;
    position: absolute;
    top: 870px;
    left: 123px;
}

.weapon-status {
    position: absolute;
    font-size: 30px;
    letter-spacing: -1px;
    color: #BCB7B6;
    cursor: default;
    top: 950px;
    left: 255px;
    font-weight: 600;
}

.invite-link {
    width: 450px;
    height: 40px;
    background: #392B2B;
    vertical-align: bottom;
    border: 2px solid #7D6940;
    font-size: 24px;
    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: 0px 8px;
    position: absolute;
    letter-spacing: -1px;
    top: 1020px;
    left: 130px;
}

.copy-btn {
    position: absolute;
    background: url(../images/copy-btn.png) no-repeat;
    background-size: 100%;
    width: 234px;
    height: 72px;
    top: 1100px;
    left: 105px;
}

.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: 234px;
    height: 72px;
    position: absolute;
    top: 1100px;
    left: 372px;
}

.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;
}

/* 第六屏 */
.page6 .title>img {
    position: absolute;
    width: 272px;
    top: 200px;
    height: 140px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/*游戏特色*/
/* .intro{
    position: relative;
    padding-bottom: 198px;
    overflow: hidden;
    font-size: 0;
    top: 250px;
} */
/* .intro .title {
    text-align: center;
} */
.page6 .intro-info {
    width: 512px;
    height: 290px;
    margin: 0 auto;
    position: relative;
    top: 720px;
    /* background: url('../img/intro-info.png') no-repeat; */
}

.page6 .active-nav::after {
    content: '';
    width: 552px;
    height: 328px;
    background: url('../image/active-img.png') no-repeat;
    background-size: 100%;
    position: absolute;
    top: -20px;
    left: -20px;
}

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

.page6 .intro-swiper .swiper-slide .intro-pic {
    /* width: 642px; */
    z-index: 1;
    margin: 0 auto;
}

.page6 .intro-swiper .swiper-slide-next .intro-pic {
    opacity: 0.3;
}

.page6 .intro-swiper .swiper-slide-prev .intro-pic {
    opacity: 0.3;
}

.page6 .intro-swiper .swiper-slide .intro-screen {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
}

.page6 .intro-swiper-button-prev {
    width: 42px;
    height: 82px;
    position: absolute;
    top: 125px;
    left: -58px;
    background: url(../image/activityle-btn-prev.png) no-repeat;
    background-size: 100%;
    z-index: 1;
}

.page6 .intro-swiper-button-next {
    width: 42px;
    height: 82px;
    position: absolute;
    top: 125px;
    right: -58px;
    background: url("../image/activityle-btn-next.png") no-repeat;
    background-size: 100%;
    z-index: 1;
}

/* .page6 .swiper-pagination-line {
    position: absolute;
    width: 584px;
    height: 2px;
    top: 520px;
    left: 56px;
    background: url(../images/swiper-line.png) no-repeat;
    background-size: 100%;
} */
.page7 .intro-swiper-pagination {
    position: absolute;
    bottom: 240px;
    left: -100px;
}

.page7 .intro-swiper .swiper-wrapper {
    margin-top: 88px;
}

.page7 .intro-swiper-pagination .swiper-pagination-bullet {
    position: absolute;
    width: 89px;
    height: 89px;
    opacity: .3;
    border-radius: 0;
}

.page7 .intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(1) {
    height: 118px;
    left: 211px;
    background: url(../image/rece-menu-1.png) no-repeat;
    background-size: 100%;
}

.page7 .intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(2) {
    left: 321px;
    background: url(../image/rece-menu-2.png) no-repeat;
    background-size: 100%;
}

.page7 .intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(3) {
    left: 432px;
    background: url(../image/rece-menu-3.png) no-repeat;
    background-size: 100%;
}

.page7 .intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(4) {
    left: 545px;
    background: url(../image/rece-menu-4.png) no-repeat;
    background-size: 100%;
}

.page7 .intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(5) {
    left: 659px;
    background: url(../image/rece-menu-5.png) no-repeat;
    background-size: 100%;
}

.page7 .intro-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
}

.page6 .role .role-info .back-btn {
    text-align: center;
    margin-top: 50px;
}

.page6 .activity-info {
    position: absolute;
    width: 453px;
    height: 897px;
    top: 200px;
    left: 130px;
    opacity: 1;
}

.page6 .activity-info .activity-pic img {
    width: 100%;
    height: 100%;
}

.page6 .prize-1-btn {
    background: url(../images/prize-1-btn.png) no-repeat;
    background-size: 100%;
    width: 299px;
    height: 86px;
    position: absolute;
    top: 740px;
    left: 78px;
}

.page6 .prize-2-btn {
    background: url(../images/prize-2-btn.png) no-repeat;
    background-size: 100%;
    width: 299px;
    height: 86px;
    position: absolute;
    top: 740px;
    left: 78px;
}

.page6 .prize-3-btn {
    background: url(../images/prize-3-btn.png) no-repeat;
    background-size: 100%;
    width: 299px;
    height: 86px;
    position: absolute;
    top: 740px;
    left: 78px;
}

.page6 .prize-4-btn {
    background: url(../images/prize-4-btn.png) no-repeat;
    background-size: 100%;
    width: 299px;
    height: 86px;
    position: absolute;
    top: 740px;
    left: 78px;
}

.activity-info .activity-swiper {
    transform: scale(0.8);
}

.activity-swiper-button-prev {
    width: 32px;
    height: 67px;
    position: absolute;
    top: 419px;
    left: -76px;
    background: url(../images/activity-btn-prev.png) no-repeat;
    background-size: 100%;
    z-index: 1;
}

.activity-swiper-button-next {
    width: 32px;
    height: 67px;
    position: absolute;
    top: 419px;
    right: -77px;
    background: url(../images/activity-btn-next.png) no-repeat;
    background-size: 100%;
    z-index: 1;
}

/* .page6 .swiper-pagination-line {
    position: absolute;
    width: 720px;
    height: 3px;
    top: 950px;
    left: -131px;
    background: url(../images/swiper-line.png) no-repeat;
    background-size: 100%;
} */
.activity-swiper-pagination {
    position: absolute;
    top: 900px;
    left: 100px;
}

.activity-swiper-pagination .swiper-pagination-bullet {
    width: 196px;
    height: 145px;
    border-radius: 0;
    opacity: 1;
    background: url(../images/activity-1.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 35px;
    left: -220px;
}

.page6 .intro-swiper-pagination {
    position: absolute;
    bottom: -30px;
    left: -12px;
}

.page6 .intro-swiper-pagination .swiper-pagination-bullet {
    position: absolute;
    background: url(../image/pagination-bullet.png) no-repeat;
    background-size: 100%;
    width: 18px;
    height: 18px;
    border-radius: 0;
}

.page6 .intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(1) {
    height: 118px;
    left: 275px;
}

.page6 .intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(2) {
    left: 315px;
}

.page6 .intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(3) {
    left: 351px;
}

.page6 .intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(4) {
    left: 389px;
}

.page6 .intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(5) {
    left: 428px;
}

.page6 .intro-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: url(../image/pagination-bullet-active.png) no-repeat;
    background-size: 100%;
    width: 18px;
    height: 18px;
}

.activity-swiper-pagination .swiper-pagination-bullet:nth-of-type(2) {
    left: -60px;
    background: url(../images/activity-2.png) no-repeat;
    background-size: 100%;
    width: 219px;
    height: 145px;
}

.activity-swiper-pagination .swiper-pagination-bullet:nth-of-type(3) {
    left: 120px;
    background: url(../images/activity-3.png) no-repeat;
    background-size: 100%;
    width: 195px;
    height: 145px;
}

.activity-swiper-pagination .swiper-pagination-bullet:nth-of-type(4) {
    left: 300px;
    background: url(../images/activity-4.png) no-repeat;
    background-size: 100%;
    width: 161px;
    height: 145px;
}

.activity-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 196px;
    height: 152px;
    background: url(../images/activity-1-active.png) no-repeat;
    background-size: 100%;
    margin-top: -7px;
}

.activity-swiper-pagination .swiper-pagination-bullet:nth-of-type(2).swiper-pagination-bullet-active {
    width: 219px;
    height: 152px;
    background: url(../images/activity-2-active.png) no-repeat;
    background-size: 100%;
    margin-top: -7px;
}

.activity-swiper-pagination .swiper-pagination-bullet:nth-of-type(3).swiper-pagination-bullet-active {
    width: 195px;
    height: 152px;
    background: url(../images/activity-3-active.png) no-repeat;
    background-size: 100%;
    margin-top: -7px;
}

.activity-swiper-pagination .swiper-pagination-bullet:nth-of-type(4).swiper-pagination-bullet-active {
    width: 161px;
    height: 152px;
    background: url(../images/activity-4-active.png) no-repeat;
    background-size: 100%;
    margin-top: -7px;
}

/* 第七屏 */
.page7 .title img {
    position: absolute;
    width: 297px;
    height: 97px;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 171px;
    z-index: 1;
}

/*游戏特色*/
.intro {
    position: relative;
    padding-bottom: 198px;
    overflow: hidden;
    font-size: 0;
    top: 250px;
}

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

.intro-info {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    margin-top: 80px;
}

/* .intro-info::after {
    content: '';
    position: absolute;
    width: 92px;
    height: 108px;
    background: url(../images/intro-decoration.png) no-repeat;
    background-size: 100%;
    top: -2px;
    right: 25px;
    z-index: 1;
} */
/* .intro-info .intro-swiper{
    margin: auto;
} */
.intro-swiper .swiper-slide img {
    width: 100%;
}

.intro-swiper .swiper-slide .intro-pic {
    z-index: 1;
    margin: 0 auto;
}

.intro-swiper .swiper-slide-next .intro-pic {
    opacity: 0;
}

.intro-swiper .swiper-slide-prev .intro-pic {
    opacity: 0;
}

.intro-swiper .swiper-slide .intro-screen {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
}

.intro-swiper-button-prev {
    width: 84px;
    height: 130px;
    position: absolute;
    top: 550px;
    left: 9px;
    background: url(../image/activity-btn-prev.png) no-repeat;
    background-size: 100%;
    z-index: 1;
}

.intro-swiper-button-next {
    width: 84px;
    height: 130px;
    position: absolute;
    top: 550px;
    right: 13px;
    background: url("../image/activity-btn-next.png") no-repeat;
    background-size: 100%;
    z-index: 1;
}

.intro-pic-btn-1 {

    position: absolute;
    top: 466px;
    right: 58px;
    width: 176px;
    height: 111px;
}

.intro-pic-btn-2 {
    position: absolute;
    top: 452px;
    right: 56px;
    width: 178px;
    height: 111px;
}

.intro-pic-btn-3 {
    position: absolute;
    top: 390px;
    right: 115px;
    width: 159px;
    height: 111px;
}

.intro-pic-btn-4 {
    position: absolute;
    top: 355px;
    right: 92px;
    width: 180px;
    height: 111px;
}

/* .swiper-pagination-line {
    position: absolute;
    width: 584px;
    height: 2px;
    top: 520px;
    left: 56px;
    background: url(../images/swiper-line.png) no-repeat;
    background-size: 100%;
} */
/* .intro-swiper-pagination{
    position: absolute;
    width: 720px;
    left: -12px;
    top: 505px;
} */
.intro-info .intro-skill {
    position: absolute;
    top: 35px;
}

/* 角色介绍弹窗 */

.character-title {
    width: 575px;
    height: 34px;
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
}

.character-img1 {
    width: 720px;
    height: 1045px;
    background: url('../image/character-img4.png') no-repeat;
    background-size: 100%;
    position: absolute;
    top: 110px;
}

.character-img2 {
    width: 720px;
    height: 1022px;
    background: url('../image/character-img3.png') no-repeat;
    background-size: 100%;
    position: absolute;
    top: 110px;
}

.character-img3 {
    width: 720px;
    height: 1045px;
    background: url('../image/character-img2.png') no-repeat;
    background-size: 100%;
    position: absolute;
    top: 110px;
}

.character-img4 {
    width: 720px;
    height: 1045px;
    background: url('../image/character-img1.png') no-repeat;
    background-size: 100%;
    position: absolute;
    top: 110px;
}

/* .on{
    display: block;
} */
.tabsActive {
    display: block;
}

.character-btn {
    position: absolute;
    bottom: 30px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 720px;
}

.character-bottom {
    display: flex;
    width: 450px;
    justify-content: space-between;
}

.character-place {
    background: url('../image/character-place.png') no-repeat;
    width: 55px;
    height: 60px;
    background-size: 100%;
    position: relative;
    bottom: 20px;
}

.character-btn-one .ic-nation1 {
    background: url('../image/character-btn-five.png') no-repeat;

    width: 97px;
    height: 96px;
    background-size: 100%;
    display: inline-block;
    position: absolute;
    top: -40px;

}

.character-btn-one.on .ic-nation1 {
    background: url('../image/character-btn-five_on.png') no-repeat;

    width: 147px;
    height: 148px;
    background-size: 100%;
    position: absolute;
    top: -60px;
    left: 48px;
}

.character-btn-two .ic-nation2 {
    background: url('../image/character-btn-three.png') no-repeat;
    width: 97px;
    height: 96px;
    background-size: 100%;
    display: inline-block;
    position: absolute;
    top: -40px;
    left: 195px;

}

.character-btn-two.on .ic-nation2 {
    background: url('../image/character-btn-three_on.png') no-repeat;
    width: 97px;
    height: 96px;
    background-size: 100%;
    width: 148px;
    height: 147px;
    position: absolute;
    top: -60px;
    left: 168px;
}

.character-btn-three .ic-nation3 {
    background: url('../image/character-btn-two.png') no-repeat;
    width: 97px;
    height: 96px;
    background-size: 100%;
    display: inline-block;
    position: absolute;
    top: -40px;
    left: 318px;
}

.character-btn-three.on .ic-nation3 {
    background: url('../image/character-btn-two_on.png') no-repeat;
    width: 96px;
    height: 96px;
    background-size: 100%;
    width: 148px;
    height: 148px;
    position: absolute;
    top: -60px;
    left: 290px;
}

.character-btn-five .ic-nation4 {
    background: url('../image/character-btn-one.png') no-repeat;
    width: 97px;
    height: 96px;
    background-size: 100%;
    display: inline-block;
    position: absolute;
    top: -40px;
    left: 440px;
}

.character-btn-five.on .ic-nation4 {
    background: url('../image/character-btn-one_on.png') no-repeat;

    width: 147px;
    height: 148px;
    background-size: 100%;
    width: 148px;
    height: 148px;
    position: absolute;
    top: -60px;
    left: 414px;
}

.character-box {
    display: none;
}

.tabActive {
    display: block;
}


/* 系統選擇 */
.order-info .content .step1-os-radio {
    position: absolute;
    top: 154px;
    left: 116px;
    font-size: 30px;
    color: #fff;
}

.order-info .step1-os-radio #osRadioIOS {
    margin-left: 60px;
}

.order-info .step1-os-radio img {
    width: 40px;
}

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

.step1-os-radio .andriodLabel {
    margin-right: 60px;
}

.step1-os-radio label {
    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: 26px;
    height: 26px;
    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;
}

.order-info .step .step-info .order-select {
    width: 187px;
    height: 80px;
    padding-left: 2%;
    display: inline-block;
    background: #E7E3D7 url(../images/order-select.png) no-repeat 100%;
    background-position-x: 140px;
    border: 1px solid #9B7842;
    font-size: 22px;
    font-weight: 700;
    color: #513A32;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    box-sizing: border-box;
}

.order-info .step .step-info input {
    width: 384px;
    height: 80px;
    line-height: 67px;
    background: #E7E3D7;
    border: 1px solid #9B7842;
    display: inline-block;
    margin: 0px -59px;
    font-size: 22px;
    font-weight: 700;
    color: #513A32;
    text-align: center;
    text-align-last: center;
    border-radius: 0;
    box-sizing: border-box;
    /* margin-left: 4px; */
    text-size-adjust: none;
    position: absolute;
    left: 295px;
}

.order-info .content .step-info .order-tel.activeFalse {
    color: red;
    border: 1px solid red;
}

.appointment-phone .order-tel.activeFalse {
    color: red;
}

.appointment-phone .order-tel.activeTrue {
    color: #36425c !important;
}
.step-info-flex .mobile-phone-input.activeFalse {
    color: red;
}
.step-info-flex .mobile-phone-input.activeTrue {
    color: black;
}

.activeFalse {
    color: red !important;
}

.activeTrue {
    color: #fff;
}

.order-info .content .step-info .order-tel.activeTrue {
    color: green;
    border: 1px solid green;
}

.order-info .step .step-info input::-webkit-input-placeholder {
    color: #6a6867;
}

.order-info .step .step-info input:-moz-placeholder {
    color: #6a6867;
}

.order-info .step .step-info input:-ms-input-placeholder {
    color: #6a6867;
}

.order-info .step .order-btn {
    /* width: 303px; */
    /* margin-top: 40px;
    position: relative; */
}

.order-info .step .order-btn .btn-login {
    display: inline-block;
    position: relative;
    left: -2px;
    width: 613px;
    height: 134px;
    background: url(../images/order-login.png) no-repeat;
    background-size: 100%;
}

/*.btn-login.no-aftere::after {*/
/*    content: '';*/
/*    display: inline-block;*/
/*    width: 42px;*/
/*    height: 42px;*/
/*    background: url(../image/section2/fb-like-red.png) no-repeat;*/
/*    background-size: 100%;*/
/*    cursor: pointer;*/
/*    position: absolute;*/
/*    top: -15px;*/
/*    left: 0px;*/
/*    z-index: 2;*/
/*    cursor: default;*/
/*}*/

/*.btn-login.no-aftere::before {*/
/*    content: '';*/
/*    display: inline-block;*/
/*    width: 80px;*/
/*    height: 63px;*/
/*    background: url(../image/section2/head.png) no-repeat;*/
/*    background-size: 100%;*/
/*    cursor: pointer;*/
/*    position: absolute;*/
/*    bottom: -34px;*/
/*    right: -15px;*/
/*    z-index: 2;*/
/*    cursor: default;*/
/*}*/

.lounge-btn.no-aftere::before {
    content: '';
    display: inline-block;
    width: 102px;
    height: 87px;
    background: url(../image/head.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    bottom: -61px;
    right: -38px;
    z-index: 1;
    cursor: default;
}

.lounge-btn.no-aftere::after {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url(../image/red-point.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: -5px;
    left: -10px;
    z-index: 1;
    cursor: default;
}

.order-info .step .order-btn .btn-login.over {
    display: inline-block;
    position: relative;
    left: 31px;
    width: 543px;
    height: 120px;
    background: url(../images/order-login-overtime.png) no-repeat;
    background-size: 100%;
}

.order-btn .btn-login .order-login-cute {
    position: absolute;
    bottom: -39px;
    left: 36px;
}

.order-info .step .order-btn .btn-query {
    margin-left: 265px;
    margin-top: 18px;
    display: inline-block;
}

.order-info .step .order-hint {
    width: 504px;
    margin: auto;
}

.order .progress {
    position: relative;
}

.order .task-info {
    margin-top: 2.6rem;
    height: 644px;
}

.order .task-progress {
    position: absolute;
    top: 326px;
    left: 28px;
}

.order-info .content .step-gift {
    position: absolute;
    top: 586px;
    left: 397px;
}

.order-info .step-gift .step-gift-btn {
    position: absolute;
    width: 252px;
    height: 74px;
    background: url("../images/step-gift-btn.png") no-repeat;
    background-size: 100%;
}

.order-info .step-gift .step-gift-btn.over {
    background-image: url("../images/step-gift-got.png");
    pointer-events: none;
}

.order-info .order-store {
    position: absolute;
    display: flex;
    left: 185px;
    top: 527px;
}

.order-info .order-store>a {
    margin-right: 33px;
}

.order-info .order-store>a img {
    width: 280px;
}

/* .order-info .order-store .order-store-ios {
    margin-right: 0.2rem;
} */
.order-info .order-store .order-store-ios {
    width: 180px;
    height: 55px;
    background: url(../images/order-store-ios.png) no-repeat;
    background-size: 100%;
}

.order-info .order-store .order-store-gp {
    width: 180px;
    height: 55px;
    background: url(../images/order-store-gp-1.png) no-repeat;
    background-size: 100%;
}

.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: 180px;
    height: 55px;
    position: relative;
    display: inline;
    float: left;
    overflow: hidden;
    border-radius: 10px;
    -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/section2/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 .order-store-ios-over {
    width: 191px;
    height: 64px;
    background: url(../images/order-store-ios.png) no-repeat;
    background-size: 100%;
}

.order-info .sdjqr {
    position: absolute;
    top: 687px;
    left: 22px;
}

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

.welfare .title img {
    width: 608px;
    height: 195px;
    margin-left: 55px;
    margin-top: 200px;
}

.welfare .welfare-content {
    position: relative;
    margin: 0 auto;
    width: 720px;
    display: flex;
    flex-direction: column;
}

.welfare-content .welfare-1 {
    position: relative;
    background: url(../images/welfare-1.png) no-repeat;
    background-size: 100%;
    width: 618px;
    height: 324px;
    top: 45px;
    margin: 0 auto;
    margin-bottom: 15px;
}

.welfare-1 .welfare-btn-1 {
    position: absolute;
    width: 328px;
    height: 89px;
    left: 150px;
    top: 370px;
}

.welfare-content .welfare-2 {
    background: url(../images/welfare-2.png) no-repeat;
    background-size: 100%;
    width: 644px;
    height: 463px;
    margin: 235px auto;
    margin-bottom: 15px;
}

.welfare-2 .welfare-btn-2 {
    width: 269px;
    height: 69px;
    background: url(../images/receive.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 1090px;
    left: 225px;
}

.welfare-2 .welfare-btn-2.finish {
    position: absolute;
    width: 269px;
    height: 69px;
    top: 1090px;
    left: 225px;
    background: url(../images/received.png) no-repeat;
    background-size: 100%;
    pointer-events: none;
}

.welfare-2 .welfare-btn-2.end {
    position: absolute;
    width: 269px;
    height: 69px;
    top: 1090px;
    left: 225px;
    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: 618px;
    height: 455px;
    margin: 210px auto;
    margin-bottom: 15px;
}

.welfare-3 .welfare-btn-3 {
    width: 269px;
    height: 69px;
    background: url(../images/receive.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 1740px;
    left: 225px;
}

.welfare-3 .welfare-btn-3.end {
    position: absolute;
    width: 269px;
    height: 69px;
    top: 1740px;
    left: 225px;
    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: 681px;
    height: 270px;
    position: relative;
    margin: 180px auto;
    margin-bottom: 15px;
}

.welfare-4 .welfare-btn-4 {
    width: 269px;
    height: 69px;
    background: url(../images/receive.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 295px;
    left: 203px;
}

.welfare-4 .welfare-btn-4.end {
    position: absolute;
    width: 269px;
    height: 69px;
    top: 295px;
    left: 203px;
    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: 627px;
    height: 441px;
    margin: 173px auto;
}

.welfare-5 .welfare-btn-5 {
    position: absolute;
    width: 269px;
    height: 69px;
    left: 225px;
    top: 2850px;
    background: url(../images/receive.png) no-repeat;
    background-size: 100%;
}

.welfare-5 .welfare-btn-5.finish {
    position: absolute;
    width: 269px;
    height: 69px;
    left: 225px;
    top: 2850px;
    pointer-events: none;
    background-size: 100%;
    background: url(../images/received.png) no-repeat;
}

.welfare-5 .welfare-btn-5.end {
    position: absolute;
    width: 269px;
    height: 69px;
    left: 225px;
    top: 2850px;
    background: url(../images/end.png) no-repeat;
    background-size: 100%;
    pointer-events: none;
}

/*抽奖*/
.poker {
    position: relative;
    overflow: hidden;
    font-size: 0;
    margin-top: 115px;
    height: 1500px;
}

.poker .poker-awards {
    margin-left: -5px;
}

.poker-awards img {
    width: 720px;
    height: 251px;
}

.poker .poker-box {
    position: relative;
    width: 720px;
    height: 827px;
    background: url(../images/poker-box.png) no-repeat;
    background-size: 100%;
}

.poker .poker-box .poker-role {
    position: absolute;
    top: 70px;
    left: -5px;
}

.poker-box .poker-role img {
    width: 720px;
    height: 614px;
    background-size: 100%;
}

.poker-box .poker-start .poker-number {
    position: absolute;
    bottom: 67px;
    left: 495px;
    width: 20px;
}

.poker-number span {
    font-size: 40px;
    font-weight: 600;
    margin-left: 2px;
    color: #EAD399;
}

.poker-start .poker-btn-img {
    position: absolute;
    bottom: 40px;
    left: 120px;
}

.poker-start .poker-btn-img img {
    width: 474px;
    height: 133px;
}

.lottery-slide {
    width: 630px;
    height: 49px;
    bottom: 85px;
    left: 45px;
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    background: url(../images/lottery-slide-img.png) no-repeat;
    background-size: 100%;
}

.poker .poker-top-swiper {
    margin: 0 auto;
    width: 720px;
    height: 722px;
    margin-top: 20px;
    position: relative;
}

.poker-top-swiper .poker-big {
    background: url(../images/lottery-swiper-big.png) no-repeat;
    background-size: 100%;
    width: 221px;
    height: 239px;
    position: absolute;
    left: 75px;
}

.poker-top-swiper .poker-big img {
    width: 52px;
    height: 42px;
    position: absolute;
    top: 100px;
    left: 160px;
}

.poker-top-swiper .poker-smallOne {
    position: absolute;
    left: 37px;
    top: -130px;
    -webkit-animation: swiper 5s ease-in-out infinite;
    animation: swiper 5s ease-in-out infinite;
}

.poker-top-swiper .poker-smallOne .poker-smallOneImg {}

.poker-top-swiper .poker-smallTwo {
    position: absolute;
    left: -3px;
    top: 1px;
    -webkit-animation: swiper 4s ease-in-out infinite;
    animation: swiper 4s ease-in-out infinite;
}

.poker-top-swiper .poker-smallTwo .poker-smallTwoImg {}

.poker-top-swiper .poker-smallThree {
    position: absolute;
    left: 412px;
    top: 338px;
    -webkit-animation: swiper 4s ease-in-out infinite;
    animation: swiper 4s ease-in-out infinite;
}

.poker-top-swiper .poker-smallThree .poker-smallThreeImg {}

.poker-top-swiper .poker-smallFour {
    position: absolute;
    left: 2px;
    top: 433px;
    -webkit-animation: swiper 5s ease-in-out infinite;
    animation: swiper 5s ease-in-out infinite;
}

.poker-top-swiper .poker-smallFour .poker-smallFourImg {}

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

    50% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }

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

/* .poker-wrapper{
    width: 680px;
    height: 525px;
    position: relative;
    margin: 100px 0px 50px 16px;
} */
.poker-wrapper .poker-swiper {
    width: 680px;
    height: 330px;
    margin: auto;
    overflow: visible;
}

.poker-swiper .swiper-wrapper .swiper-slide .poker-front {
    width: 255px;
    height: 427px;
    z-index: 2;
    opacity: 0.5;
    display: none;
}

.poker-swiper .swiper-wrapper .swiper-slide-prev .poker-front {
    position: absolute;
    top: 50px;
    opacity: 0.5;
    display: table;
}

.poker-swiper .swiper-wrapper .swiper-slide-next .poker-front {
    position: absolute;
    top: 50px;
    opacity: 0.5;
    display: table;
}

.poker-swiper .swiper-wrapper .swiper-slide-active .poker-front {
    width: 255px;
    height: 427px;
    position: absolute;
    opacity: 1;
    display: table;
    left: -2px;
    top: 15px;
}

.poker-swiper .swiper-wrapper .swiper-slide-active .poker-front.active {
    width: 354px;
    height: 529px;
    position: absolute;
    opacity: 1;
    display: table;
    left: -55px;
    top: -30px;
}

.poker-swiper .swiper-wrapper .swiper-slide .poker-front-gold {
    background: url(../images/poker-gold.png) no-repeat;
    background-size: 100%;
}

.poker-swiper .swiper-wrapper .swiper-slide-active .poker-front-gold.active {
    background: url(../images/poker-gold-active.png) no-repeat;
    background-size: 100%;
}

.poker-swiper .swiper-wrapper .swiper-slide .poker-front-fire {
    background: url(../images/poker-fire.png) no-repeat;
    background-size: 100%;
}

.poker-swiper .swiper-wrapper .swiper-slide-active .poker-front-fire.active {
    background: url(../images/poker-fire-active.png) no-repeat;
    background-size: 100%;
}

.poker-swiper .swiper-wrapper .swiper-slide .poker-front-wood {
    background: url(../images/poker-wood.png) no-repeat;
    background-size: 100%;
}

.poker-swiper .swiper-wrapper .swiper-slide-active .poker-front-wood.active {
    background: url(../images/poker-wood-active.png) no-repeat;
    background-size: 100%;
}

.poker-swiper .swiper-wrapper .swiper-slide .poker-front-sun {
    background: url(../images/poker-sun.png) no-repeat;
    background-size: 100%;
}

.poker-swiper .swiper-wrapper .swiper-slide-active .poker-front-sun.active {
    background: url(../images/poker-sun-active.png) no-repeat;
    background-size: 100%;
}

.poker-swiper .swiper-wrapper .swiper-slide .poker-front-water {
    background: url(../images/poker-water.png) no-repeat;
    background-size: 100%;
}

.poker-swiper .swiper-wrapper .swiper-slide-active .poker-front-water.active {
    background: url(../images/poker-water-active.png) no-repeat;
    background-size: 100%;
}

.poker-swiper .swiper-wrapper .swiper-slide .poker-front-soil {
    background: url(../images/poker-soil.png) no-repeat;
    background-size: 100%;
}

.poker-swiper .swiper-wrapper .swiper-slide-active .poker-front-soil.active {
    background: url(../images/poker-soil-active.png) no-repeat;
    background-size: 100%;
}

.poker-swiper .swiper-wrapper .swiper-slide .poker-front-moon {
    background: url(../images/poker-moon.png) no-repeat;
    background-size: 100%;
}

.poker-swiper .swiper-wrapper .swiper-slide-active .poker-front-moon.active {
    background: url(../images/poker-moon-active.png) no-repeat;
    background-size: 100%;
}


.poker-light {
    width: 574px;
    height: 365px;
    position: absolute;
    top: 700px;
    left: 57px;
    background: url(../images/poker-light-bg.png) no-repeat;
    background-size: 100%;
    z-index: 3;
    pointer-events: none;
}

.poker-star {
    width: 574px;
    height: 365px;
    position: absolute;
    top: 690px;
    left: 57px;
    z-index: 10;
    pointer-events: none;
    /* background-color: brown; */
}

.poker-star .poker-star1 {
    position: absolute;
    width: 300px;
    height: 300px;
    top: -317px;
    left: 146px;
    animation: star1 2s infinite ease-out;
}

.poker-star .poker-star2 {
    position: absolute;
    width: 42px;
    height: 55px;
    top: -437px;
    left: 99px;
    animation: star1 2s 1s infinite ease-out;
}

.poker-star .poker-star3 {
    position: absolute;
    width: 42px;
    height: 55px;
    top: -311px;
    left: 574px;
    animation: star1 2s 2s infinite ease-out;
}

.poker-star .poker-star4 {
    position: absolute;
    width: 42px;
    height: 55px;
    top: -126px;
    left: -141px;
    animation: star1 2s 1s infinite ease-out;
}

.poker-star .poker-star5 {
    position: absolute;
    width: 42px;
    height: 55px;
    top: -93px;
    left: 209px;
    animation: star1 2s 1s infinite ease-out;
}

@keyframes star1 {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

.poker-btn {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 11;
    justify-content: space-around;
}

.poker-btn .lottery-slide {
    width: 485px;
    height: 46px;
    overflow: hidden;
    background-color: #323584;
    white-space: nowrap;
    border: 1px solid #5353ad;
}

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

.lottery-slide-list {
    position: relative;
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 26px;
    -moz-animation: my-animation 15s linear infinite;
    -webkit-animation: my-animation 15s linear infinite;
    animation: my-animation 15s linear infinite;
}

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

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

/* 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(0%);
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }

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

.poker-btn .lottery-slide-list li {
    display: inline;
    padding-left: 20px;
    color: #ffffff;
}

.poker-btn .lottery-start {
    margin: 25px auto;
    display: block;
}

.poker-btn .lottery-share {
    position: absolute;
    top: 155px;
    left: 30px;
}

.poker-btn .lottery-share-draw {
    position: absolute;
    left: 110px;
    top: 135px;
}

.poker-btn .lottery-mycard {
    position: absolute;
    right: 23px;
    top: 90px;
}

.poker-real {
    width: 720px;
    height: 400px;
    position: absolute;
    top: 1135px;
    left: 0px;
    background: url(../images/poker-real-bg.png) no-repeat;
    background-size: 100%;
}

.poker-real .poker-number {
    text-align: center;
    position: absolute;
    top: 125px;
    left: 118px;
    width: 130px;
    text-align: center;
}

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

.poker-real .poker-diamond {
    text-align: center;
    position: absolute;
    top: 125px;
    left: 415px;
    width: 200px;
    text-align: center;
}

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

.poker-explain {
    margin: 0 auto;
    display: block;
    width: 114px;
    position: absolute;
    top: 278px;
    left: 462px;
}

.poker-dec {
    position: absolute;
    top: 1430px;
    left: 50px;
}


/* 地藏轮播 */
.dizang {
    margin-top: 25px;
    font-size: 0;
}

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

.dizang-info {
    width: 670px;
    height: 424px;
    margin: 0 auto;
    /* background: url("../images/intro-bg.png") no-repeat;
    background-size: 100%; */
    position: relative;
    margin-top: 10px;
}

.dizang-swiper {
    height: 424px;
    margin: auto;
}

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

.dizang-swiper .swiper-slide .dizang-pic {
    width: 670px;
    position: absolute;
    z-index: 1;
}

.dizang-swiper-pagination {
    position: absolute;
    top: 458px;
    left: 16px;
    width: 641px;
    height: 102px;
    background: url("../images/dizang-s-bg.png") no-repeat;
    background-size: 100%;
    z-index: 0;
}

.dizang-swiper-pagination .swiper-pagination-bullet {
    width: 42px;
    height: 42px;
    background: url("../images/dizang-s.png") no-repeat;
    background-size: 100%;
    border-radius: 0;
    opacity: 1;
    position: absolute;
    top: 95px;
    left: 43px;
    transform: translate(-50%, -50%);
}

.dizang-swiper-pagination .swiper-pagination-bullet:nth-of-type(2) {
    left: 226px;
}

.dizang-swiper-pagination .swiper-pagination-bullet:nth-of-type(3) {
    left: 410px;
}

.dizang-swiper-pagination .swiper-pagination-bullet:nth-of-type(4) {
    left: 594px;
}

.dizang-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 109px;
    height: 109px;
    top: 93px;
    background-image: url("../images/dizang-s-active.png");
}

.dizang-info .dizang-custom-pagination {
    position: absolute;
    top: 496px;
}

.dizang-info .dizang-custom-pagination .dizang-custom-tips {
    position: absolute;
    width: 166px;
    height: 25px;
    background: url(../images/dizang-custom-tips-bg.png) no-repeat;
    background-size: 100%;
    top: 132px;
    left: 248px;
}

.dizang-custom-pagination .dizang-custom-tips .dizang-custom-tips-left {
    position: absolute;
    width: 12px;
    height: 24px;
    background: url(../images/dizang-custom-tips-left.png) no-repeat;
    background-size: 100%;
    top: 1px;
    left: -40px;
    animation: fadeMoveLeft 3s infinite;
}

.dizang-custom-pagination .dizang-custom-tips .dizang-custom-tips-right {
    position: absolute;
    width: 12px;
    height: 24px;
    background: url(../images/dizang-custom-tips-right.png) no-repeat;
    background-size: 100%;
    top: 1px;
    right: -38px;
    animation: fadeMoveRight 3s infinite;
}

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

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

.gashapon .gashapon-wrapper .gashapon-main {
    width: 691px;
    height: 982px;
    position: relative;
    background: url("../images/gashapon-main-bg.png") no-repeat;
    background-size: 100%;
    margin: 0 auto;
    margin-top: 20px;
}

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

.gashapon .gashapon-main .gashapon-hover-gift-1 {
    left: 72px;
    top: 210px;
    animation: bubble 8s infinite;
}

.gashapon .gashapon-main .gashapon-hover-gift-2 {
    top: 200px;
    left: 246px;
    animation: bubble 6s infinite;
}

.gashapon .gashapon-main .gashapon-hover-gift-3 {
    top: 210px;
    left: 400px;
    animation: bubble 9s infinite;
}

.gashapon .gashapon-wrapper .gashapon-btns {
    position: absolute;
    top: 533px;
    left: 170px;
}

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

.gashapon-wrapper .gashapon-btns .gashapon-share {
    top: 46px;
    left: 305px;
}

/*视频*/
.video {
    padding-bottom: 205px;
    overflow: hidden;
    font-size: 0;
}

.video-info {
    width: 651px;
    height: 386px;
    margin: 30px auto 160px;
    position: relative;
    background: url("../images/video-bg.png") no-repeat;
    background-size: 100%;
}

.video-swiper {
    width: 633px;
    height: 369px;
    padding-top: 8px;
    margin-left: 9px;
}

.video-swiper .swiper-slide h2 {
    position: absolute;
    right: 20px;
    top: 0;
    font-size: 35px;
    color: #f7f8f9;
    z-index: 2;
}

.video-swiper .swiper-slide .play {
    width: 100%;
    height: 100%;
    z-index: 1;
}

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

.video-swiper .swiper-slide .youtube {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    z-index: 3;
}

.video-swiper-pagination {
    width: 591px;
    height: 168px;
    margin: auto;
    position: relative;
    bottom: 0;
}

.video-swiper-pagination .swiper-slide {
    margin-top: 50px;
}

.video-swiper-pagination .swiper-slide span {
    width: 187px;
    height: 114px;
    position: relative;
    opacity: 1;
    display: block;
    border-radius: 0;
}

.video-swiper-pagination .swiper-slide.swiper-slide-active span:after {
    content: '';
    width: 197px;
    height: 134px;
    position: relative;
    left: -5px;
    top: -16px;
    background: url("../images/video-s-active.png") no-repeat;
    background-size: 100%;
    display: block;
    z-index: -1;
}

.video-swiper-pagination .swiper-slide .swiper-slide-1 {
    background: url("../images/video-s-1.png") no-repeat;
    background-size: 100%;
}

.video-swiper-pagination .swiper-slide .swiper-slide-2 {
    background: url("../images/video-s-2.png") no-repeat;
    background-size: 100%;
}

.video-swiper-pagination .swiper-slide .swiper-slide-3 {
    background: url("../images/video-s-3.png") no-repeat;
    background-size: 100%;
}

.video-swiper-button-prev {
    width: 22px;
    height: 45px;
    position: absolute;
    top: 460px;
    left: -5px;
    background: url("../images/video-btn.png") no-repeat;
}

.video-swiper-button-next {
    width: 22px;
    height: 45px;
    position: absolute;
    top: 460px;
    right: -5px;
    background: url("../images/video-btn.png") no-repeat;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* 邀请好友 */
.invite {
    overflow: hidden;
    font-size: 0;
    margin-top: 112px;
}

.invite .title {
    /* text-align: right; */
    /* margin-bottom: 10px; */
}

.invite-info {
    box-sizing: border-box;
    height: 1100px;
}

.invite-info .swiper-container {
    text-align: center;
}

.invite .invite-tip {
    font-size: 30px;
}

.invite .invite-text-box {
    width: 392px;
    height: 51px;
    background: url(../images/invite-text-bg.png) no-repeat;
    background-size: 100%;
    position: relative;
    margin-top: 35px;
    margin-left: 33px;
}

.invite #yournumber {
    height: 56px;
    width: 243px;
    font-size: 22px;
    text-align: center;
    color: #ffffff;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: inherit;
    margin-top: -3px;
}

.invite .btn-copy3 {
    position: absolute;
    top: -9px;
    left: 422px;
}

.invite .btn-copy3::after {
    /* content: '';
    display: block;
    width: 215px;
    height: 229px;
    background: url(../images/invite-copy-tiger.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: -116px;
    right: -12px;
    z-index: -1; */
}

.invite .btn-query {
    position: absolute;
    top: 26px;
    right: 114px;
}

.invite .btn-share4 {
    display: block;
    margin-top: 20px;
}

.invite .btn-share4 img {
    width: 200px;
}

.invite .invite-tip2 {
    width: 205px;
    height: 24px;
    margin: 0 auto;
    margin-top: 40px;
    background: url("../images/invite-tip2-bg.png") no-repeat;
    position: relative;
}

#invite-num {
    font-size: 50px;
    font-weight: 700;
    color: #feecc5;
    position: absolute;
    top: -35px;
    left: 66px;
    text-align: center;
    width: 70px;
}

.invite .invite-hint {
    margin: 16px 0;
}

.invite .invite-ul {
    margin-top: 39px;
    margin-left: -60px;
    position: relative;
}

.invite .invite-ul li {}

.invite .invite-ul li:nth-of-type(1) {}

.invite .invite-ul li:nth-of-type(2) {
    margin-left: 150px;
}

.invite .invite-ul li:nth-of-type(2) img:nth-of-type(1) {
    position: absolute;
    top: 185px;
    left: 230px;
}

.invite .invite-ul li:nth-of-type(3) img:nth-of-type(1) {
    position: absolute;
    left: 290px;
    top: 490px;
}

.invite .invite-ul li:nth-of-type(4) {
    left: 44px;
    top: -4px;
}

.invite .invite-ul .invite-ul-higher-li {
    position: relative;
    left: 172px;
    top: -54px;
    /* transform: translateX(-50%); */
}

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

.invite-ul li .invite-finish-mark {
    position: absolute;
    top: 237px;
    left: 200px;
    display: none;
    z-index: 1;
}

.invite-ul li:nth-of-type(2) .invite-finish-mark {
    left: 490px;
}

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

.invite .invite-main {
    width: 479px;
    height: 103px;
    background: url("../images/invite-main-bg.png") no-repeat;
    background-size: 100%;
    position: relative;
    padding-top: 36px;
    padding-left: 51px;
    margin-top: 28px;
    margin-left: 15px;
    box-sizing: border-box;
    text-align: initial;
}

.invite-main .invite-hint {
    position: absolute;
    top: 220px;
}

.invite .invite-role-bg {
    position: absolute;
    right: 0px;
    top: 336px;
    z-index: -1;
}

.invite .invite-role-cute {
    position: absolute;
    bottom: 86px;
    right: 60px;
}

/* 文案板塊 */
.some-text {
    margin-bottom: 200px;
}

.some-text .text-hint {
    width: 512px;
    height: 109px;
    background: url(../images/text-hint.png) no-repeat;
    background-size: 100%;
    margin: 0 auto;
}


/* 女神阵营 */
.goddesses {
    height: 1174px;
    margin-top: 68px;
}

.goddesses-info .goddesses-container {
    width: 720px;
    height: 1290px;
    background: url(../images/goddesses-bg.png) no-repeat;
    background-size: 100%;
    margin: 0 auto;
    position: relative;
    top: -120px;
}

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

.goddesses-container .goddesses-pointer.goddesses-pointer-waist {
    top: 486px;
    left: 270px;
}

.goddesses-container .goddesses-pointer.goddesses-pointer-heart {
    top: 530px;
    left: 456px;
}

.goddesses-container .goddesses-pointer.goddesses-pointer-knee_1 {
    top: 650px;
    left: -5px;
}

.goddesses-container .goddesses-pointer.goddesses-pointer-knee_2 {
    top: 1040px;
    left: 390px;
}

/* 武器专精 */
.weapons {
    height: 1490px;
}

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

.weapons .weapons-info {
    /* width: 623px;
    height: 623px;
    margin: 0 auto; */
    margin-top: 203px;
    /* background: url(../images/weapons-bg.png) no-repeat;
    background-size: 100%; */
    position: relative;
}

.weapons .weapons-info .weapons-swiper-bg {
    width: 720px;
    height: 915px;
    background: url(../images/weapons-bg.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -56px;
}

.weapons-swiper .swiper-slide .weapons-pic {
    position: absolute;
    top: -114px;
    left: 0px;
}

.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 {
    position: absolute;
    /* left: 478px; */
    top: 760px;
}

.weapons-intro .weapons-get-btn {
    position: absolute;
    top: 18px;
    left: 490px;
}

.swiper-slide:nth-of-type(2) .weapons-intro .weapons-get-btn {
    top: 3px;
}

.swiper-slide:nth-of-type(3) .weapons-intro .weapons-get-btn {
    top: 3px;
}

.swiper-slide:nth-of-type(4) .weapons-intro .weapons-get-btn {
    top: 44px;
}

.swiper-slide:nth-of-type(5) .weapons-intro .weapons-get-btn {
    top: 4px;
}

.swiper-slide:nth-of-type(6) .weapons-intro .weapons-get-btn {
    top: 4px;
}

.swiper-slide:nth-of-type(7) .weapons-intro .weapons-get-btn {
    top: 4px;
}

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

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

.weapons-info .weapons-swiper-button-prev {
    position: absolute;
    width: 70px;
    height: 102px;
    background: url("../images/weapons-prev.png") no-repeat;
    background-size: 100%;
    top: 356px;
    left: 14px;
    z-index: 1;
    cursor: pointer;
}

.weapons-info .weapons-swiper-button-next {
    position: absolute;
    width: 70px;
    height: 102px;
    background: url("../images/weapons-next.png") no-repeat;
    background-size: 100%;
    top: 356px;
    left: 636px;
    z-index: 1;
    cursor: pointer;
}

.weapons-swiper-pagination {
    position: relative;
    top: -30px;
    left: 120px;
}

.weapons-swiper-pagination .swiper-pagination-bullet {
    width: 124px;
    height: 126px;
    border-radius: 0;
    opacity: 1;
    position: absolute;
    z-index: 1;
}

.weapons-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    /* width: 173px;
    height: 183px; */
    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%;
    top: -102px;
    left: -88px;
}

.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: -15px;
    left: -16px;
}

.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: -101px;
    left: 60px;
}

.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: -16px;
    left: 134px;
}

.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: -101px;
    left: 206px;
}

.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: -17px;
    left: 289px;
}

.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%;
}

.weapons-swiper-pagination .swiper-pagination-bullet:nth-of-type(7) {
    background: url("../images/weapons-s-7.png") no-repeat;
    background-size: 100%;
    top: -101px;
    left: 368px;
}

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

.weapons-swiper-pagination .swiper-pagination-bullet:nth-of-type(8) {
    background: url("../images/weapons-s-8.png") no-repeat;
    background-size: 100%;
    top: -17px;
    left: 444px;
}

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

.create-role-info {
    position: relative;
    top: 744px;
}

.create-role-info .create-role-container {
    position: relative;
    width: 720px;
    height: 568px;
    background: url("../images/create-role-bg.png") no-repeat;
    background-size: 100%;
    margin-top: 192px;
}

.create-role-container .create-role-input {
    width: 428px;
    height: 52px;
    background: #fff;
    border: 0 solid #ffffff;
    font-size: 26px;
    font-weight: 700;
    color: #454545;
    text-align: center;
    text-align-last: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    position: absolute;
    top: 166px;
    left: 209px;
}

.create-role-container .create-role-sel {
    width: 428px;
    height: 52px;
    background: #fff url(../images/order-select.png) no-repeat 94% center;
    border: 0 solid #ffffff;
    font-size: 26px;
    font-weight: 700;
    color: #454545;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    position: absolute;
    top: 256px;
    left: 210px;
    padding-left: 16%;
}

.weapons-bottom {
    position: relative;
    top: 516px;
}

.weapons-bottom .create-role {
    position: absolute;
    z-index: 1;
    left: 162px;
}

.weapons-bottom .create-role-done {
    position: absolute;
    z-index: 1;
    left: 162px;
}

.weapons-bottom .weapon-hint {
    position: absolute;
    top: 130px;
    left: 166px;
}

/* 同盟板塊 */
.team {
    position: relative;
    margin-top: 15px;
    height: 1460px;
}

.team .team-fb {
    margin-top: 20px;
}

.team .team-fb-login,
.team-fb-login-over {
    position: absolute;
    top: 220px;
    left: 50%;
    transform: translateX(-50%);
}

.team .team-activity {
    position: absolute;
    left: 25px;
    top: 220px;
}

.team .award-content {
    position: absolute;
    top: 430px;
    left: 9px;
}

.award-content .activity-btn {
    position: absolute;
    top: 530px;
    left: 250px;
}

.team .team-gift-ul {
    width: 700px;
    margin: 0 auto;
}

.team-gift-ul li {
    display: inline-block;
    position: relative;
    margin-left: 15px;
}

.team .invite-ul li .invite-finish-mark {
    top: 120px;
    left: 228px;
}

.team .team-container {
    position: relative;
    width: 672px;
    height: 964px;
    top: 850px;
    left: 25px;
    background: url(../images/team-container-bg.png) no-repeat;
    background-size: 100%;
}

.team .team-container-btns {
    position: relative;
    display: flex;
    justify-content: space-evenly;
    top: 35px;
}

.team-container .team-container-top-left {
    position: relative;
    top: 80px;
    left: 12px;
    width: 350px;
}

.team-container .team-container-top-left .timesort,
.hotsort {
    position: relative;
    width: 149px;
    height: 55px;
    font-size: 23px;
    color: #90562E;
    padding: 14px 25px;
    border: 1.25px solid #90562E;
}

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

.hotsort {
    border-right: 1px solid transparent;
}

.team-container-search .team-search_input {
    width: 295px;
    height: 50px;
    border: 1px solid #C9BC9E;
    color: #999999;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    margin-top: 32px;
    margin-left: 346px;
    padding-left: 15px;
}

.team-container-search .team-search-btn {
    position: absolute;
    width: 32px;
    height: 31px;
    right: 25px;
    top: 156px;
}

.team-container-content {
    position: relative;
    display: flex;
    width: 650px;
    height: 650px;
    top: 25px;
    margin: 0 auto;
    flex-wrap: wrap;
    overflow: hidden;
    left: 5px;
}

.team-container-content .team-container-box {
    position: relative;
    width: 305px;
    height: 205px;
    margin-left: 10px;
}

.team-container-box-mt {
    margin-top: -212px;
}

.team-content-img {
    position: absolute;
    z-index: -1;
    width: 305px;
    height: 205px;
    top: 0;
    left: 0;
}

.team-container-box-person {
    font-size: 14px;
    float: left;
    color: #FFEE8A;
    margin-top: 0;
    margin-left: 5px;
    white-space: nowrap;
    overflow: hidden;
}

.team-container-box-point {
    font-size: 14px;
    float: right;
    color: #FFEE8A;
    margin-top: 0;
    margin-right: 5px;
    white-space: nowrap;
    overflow: hidden;
}

.team-container-box-join {
    display: flex;
    width: 305px;
    height: 60px;
    background: rgba(0, 0, 0, 0.6);
    margin-top: 145px;
}

.team-container-box-join p {
    width: 175px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    margin-top: 11px;
    margin-left: 10px;
    font-size: 22px;
    color: #FCE6C0;
}

.team-container-box-join a {
    margin: auto 2px;
}

.team-container .team-toggle-btns {
    display: flex;
    justify-content: center;
}

.team-toggle-btns>a {
    margin: 30px 45px;
}

.team-toggle-btns .team-toggle-join {}

.team-panel-title {
    padding-top: 90px;
    margin-bottom: 46px;
}

.team-panel-create,
.team-panel-create {
    position: relative;
}

.team-panel-create .team-create-content .team-create-form {
    /* position: absolute; */
    width: 676px;
    height: 528px;
    background: url("../images/team-create-form-bg.png") no-repeat;
    background-size: 100%;
    /* margin: 0 auto; */
    margin-top: -50px;
    margin-left: 29px;
}

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

.team-create-form .team-create-input {
    width: 317px;
    height: 30px;
    border: 0 solid #ffffff;
    font-size: 20px;
    color: #272458;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    position: absolute;
    top: 174px;
    left: 273px;
    text-align: center;
    background-color: #d7d7e5;
}

.team-create-form .team-create-tenet {
    top: 231px;
}

.team-create-form .team-create-line {
    top: 290px;
}

.team-create-content .team-create-btn {
    position: absolute;
    top: 365px;
    left: 52%;
    transform: translateX(-50%);
}

.team-panel-create .team-create-content_done {
    width: 664px;
    height: 431px;
    background: url("../images/team-create-done-bg.png") no-repeat;
    background-size: 100%;
    margin-top: -50px;
    margin-left: 29px;
}

.team-create-content_done .my-team-title {
    color: #fff5dc;
    font-size: 29px;
    position: absolute;
    top: 146px;
    left: 105px;
}

.my-team-title .my-team-count {
    /* font-size: 22px; */
}

.team-create-content_done .my-team-form {
    width: 546px;
    height: 155px;
    background-size: 100%;
    color: #a4a4a4;
    box-sizing: border-box;
    padding-top: 27px;
    font-size: 26px;
    position: absolute;
    top: 176px;
    left: 118px;
}

.my-team-form .my-team-form_tenet span {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.my-team-form .my-team-form_line {
    margin-top: 17px;
}

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

.my-team-form .my-team-form_line span:nth-of-type(2) {
    position: absolute;
    top: 90px;
    left: 160px;
    width: 335px;
}

.my-team-form .my-team-copy-fb {
    position: absolute;
    top: 165px;
    left: -12px;
}

.my-team-form .my-team-copy-line {
    position: absolute;
    top: 165px;
    left: 252px;
}

.team-panel-create .team-create-hint {
    position: absolute;
    top: 814px;
    left: 167px;
}

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

.team-panel-join .team-join-content {
    width: 662px;
    height: 524px;
    background: url("../images/team-panel-join-bg.png") no-repeat;
    background-size: 100%;
    padding-top: 122px;
    padding-left: 26px;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: -50px;
}

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

.team-join-search .team-join-search_input {
    width: 383px;
    height: 37px;
    background: #cdcedc;
    border: 0 solid #fff;
    font-size: 22px;
    color: #272458;
    text-align: center;
    text-align-last: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    margin-top: 24px;
    margin-left: 92px;
}

.team-join-search .team-search-btn {
    /* position: absolute;
    right: 16px;
    top: 5px; */
}

.team-join-content .team-join-list {
    color: #fff;
    font-size: 25px;
    margin-left: 20px;
}

.team-join-list .team-join-item {
    margin-top: 8px;
}

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

.team-join-content .team-prev-btn {
    position: absolute;
    top: 475px;
    left: 220px;
}

.team-join-content .team-random-btn {
    position: absolute;
    top: 475px;
    left: 379px;
}

.team-join-content .team-prev-btn span,
.team-join-content .team-random-btn span {
    color: #ffffff;
    font-size: 20px;
}

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

.team-toggle-entity {
    width: 720px;
    height: 1343px;
    background: url("../images/team-toggle-entity.png") no-repeat;
    background-size: 100%;
    top: 150px;
    position: absolute;
}

.team-entity-btns {
    width: 500px;
    height: 88px;
    background: url("../images/team-entity-btns.png") no-repeat;
    background-size: 100%;
    position: absolute;
    top: 1060px;
    left: 106px;
}


.team-swiper-pagination .swiper-pagination-custom {
    position: absolute;
    bottom: 214px;
    left: 100px;
}

.team-swiper-pagination .swiper-pagination-bullet {
    width: 288px;
    height: 428px;
    background-size: 100%;
    border-radius: 0;
    position: absolute;
    /* bottom: 167px; */
    top: 70px;
    background: center;
    opacity: 1;
}

.team-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 288px;
    height: 484px;
    z-index: 2;
    left: 221px;
    top: 86px;
}

.team-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-prev-1 {
    left: 60px;
    z-index: 1;
}

.team-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-next-1 {
    left: 380px;
    z-index: 1;
}

.team-swiper-pagination .swiper-pagination-bullet:first-child {
    background-image: url("../images/role-s-1.png");
    background-size: 100%;
}

.team-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:first-child {
    background: url("../images/role-s-1-active.png") no-repeat;
    background-size: 100%;
}

.team-swiper-pagination .swiper-pagination-bullet:nth-child(2) {
    background: url("../images/role-s-2.png") no-repeat;
    background-size: 100%;
}

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

.team-swiper-pagination .swiper-pagination-bullet:nth-child(3) {
    background: url("../images/role-s-3.png") no-repeat;
    background-size: 100%;
}

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

.team-swiper-pagination .swiper-pagination-bullet:nth-child(4) {
    background: url("../images/role-s-4.png") no-repeat;
    background-size: 100%;
}

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

.team-swiper-pagination .swiper-pagination-bullet:nth-child(5) {
    background: url("../images/role-s-5.png") no-repeat;
    background-size: 100%;
}

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

.team-swiper-pagination .swiper-pagination-bullet:nth-child(6) {
    background: url("../images/role-s-6.png") no-repeat;
    background-size: 100%;
}

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

.team-swiper-button-prev {
    width: 69px;
    height: 53px;
    position: absolute;
    top: 270px;
    left: 2px;
    background: url(../images/intro-btn-prev.png) no-repeat;
    background-size: 100%;
    z-index: 1;
}

.team-swiper-button-next {
    width: 73px;
    height: 53px;
    position: absolute;
    top: 270px;
    right: -8px;
    background: url("../images/intro-btn-next.png") no-repeat;
    background-size: 100%;
    z-index: 1;
}

/* 了解更多 */
.about {
    padding-bottom: 34px;
    overflow: hidden;
    font-size: 0;
}

.about-info {
    width: 720px;
    height: 514px;
    background: url(../images/about-bg.png) no-repeat;
    background-size: 100%;
    /* margin-left: 270px; */
    /* margin-top: 60px; */
    position: relative;
}

.about-info a {
    position: absolute;
    width: 335px;
    height: 279px;
    background-size: 100%;
}

.about-info .about-role {
    background-image: url(../images/about-role.png);
    top: 70px;
    left: 30px;
}

.about-info .about-lottery {
    background-image: url(../images/about-lottery.png);
    top: 110px;
    left: 360px;
}

/*任务完成度*/
.task {
    overflow: hidden;
    font-size: 0;
    position: relative;
    height: 1410px;
    top: 700px;
    /* 临时 */
    height: 2000px;
}

.task .order-count {
    width: 296px;
    height: 47px;
    /* margin: 0 auto; */
    margin-left: 112px;
    margin-top: 65px;
    position: relative;
    background: url("../images/order-slogan.png") no-repeat;
    background-size: 100%;
}

.task .order-count {
    width: 273px;
    height: 40px;
    position: absolute;
    top: 165px;
    left: 6px;
    background: url(../images/order-slogan.png) no-repeat;
    background-size: 100%;
}

.task .count span {
    text-align: center;
    position: absolute;
    top: -9px;
    left: 283px;
    line-height: 60px;
    font-size: 44px;
    -webkit-text-size-adjust: none;
    font-weight: 700;
    background-image: -webkit-linear-gradient(top, #FDEFC8, #FFD08A);
    letter-spacing: 7px;
    /* 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 {
    position: relative;
    margin-top: 105px;
    margin-left: 23px;
}

.task-person li {
    position: absolute;
    width: 73px;
    height: 56px;
}

.task-person .task_1 {
    width: 126px;
    height: 104px;
    left: 69px;
    top: 285px;
    background: url(../images/task-1.png) no-repeat;
    background-size: 100%;
}

.task-person .task_1.active {
    background: url(../images/task-1-finish.png) no-repeat;
    background-size: 100%;
    width: 126px;
    height: 104px;
    left: 69px;
    top: 285px;
}

.task-person .task_2 {
    background: url(../images/task-1.png) no-repeat;
    background-size: 100%;
    width: 126px;
    height: 104px;
    left: 299px;
    top: 285px;
}

.task-person .task_2.active {
    background: url(../images/task-1-finish.png) no-repeat;
    background-size: 100%;
    width: 126px;
    height: 104px;
    left: 299px;
    top: 285px;
}

.task-person .task_3 {
    background: url(../images/task-1.png) no-repeat;
    background-size: 100%;
    width: 126px;
    height: 104px;
    left: 531px;
    top: 285px;
}

.task-person .task_3.active {
    background: url(../images/task-1-finish.png) no-repeat;
    background-size: 100%;
    width: 126px;
    height: 104px;
    left: 531px;
    top: 285px;
}

.task-person .task_4 {
    background: url(../images/task-1.png) no-repeat;
    background-size: 100%;
    width: 126px;
    height: 104px;
    left: 157px;
    top: 860px;
}

.task-person .task_4.active {
    background: url(../images/task-1-finish.png) no-repeat;
    background-size: 100%;
    width: 126px;
    height: 104px;
    left: 157px;
    top: 860px;
}

.task-person .task_5 {
    background: url(../images/task-1.png) no-repeat;
    background-size: 100%;
    width: 126px;
    height: 104px;
    left: 429px;
    top: 860px;
}

.task-person .task_5.active {
    background: url(../images/task-5-finish.png) no-repeat;
    background-size: 87%;
    width: 142px;
    height: 140px;
    left: 430px;
    top: 840px;
}

.task .task-progress .task-progress-bar {
    width: 551px;
    height: 92px;
    background: url(../images/task-info-progress-bar.png) no-repeat;
    background-size: 100%;
    margin: 0 auto;
}

.task .task-progress .task-active-dots {
    position: absolute;
    top: -6px;
    left: 142px;
}

/* .task-progress .task-active-dots .task-active-dot {
    position: absolute;
    width: 65px;
    height: 70px;
    background: url(../images/task-active-dot.png) no-repeat;
    background-size: 100%;
    display: none;
}
.task-progress .task-active-dots .task-active-dot-2 {
    left: 94px;
}
.task-progress .task-active-dots .task-active-dot-3 {
    left: 187px;
}
.task-progress .task-active-dots .task-active-dot-4 {
    left: 281px;
}
.task-progress .task-active-dots .task-active-dot-5 {
    left: 374px;
} */
.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-progress-dot {
    position: absolute;
    z-index: -1;
    top: -43px;
    display: none;
}

.task-progress .task-active-dots.task-active-1 .task-progress-dot {
    /* 5W */
    display: block;
    left: -34px;
}

.task-progress .task-active-dots.task-active-2 .task-progress-dot {
    /* 10W */
    display: block;
    left: 102px;
}

.task-progress .task-active-dots.task-active-3 .task-progress-dot {
    /* 20W */
    display: block;
    left: 238px;
}

.task-progress .task-active-dots.task-active-4 .task-progress-dot {
    /* 30W */
    display: block;
    left: 376px;
}

.task-progress .task-active-dots.task-active-5 .task-progress-dot {
    /* 50W */
    display: block;
    left: 512px;
}

.task-info {
    width: 720px;
    height: 1380px;
    background: url(../images/task-info-bg.png) no-repeat;
    background-size: 100%;
    position: relative;
    top: -240px;
}

.task-progress .task-active-dots .task-active-dot {
    position: absolute;
    width: 239px;
    height: 194px;
    left: 65px;
}

.task-progress .task-active-dots .task-active-dot.active {}

.task-progress .task-active-dots .task-active-dot-2 {
    position: absolute;
    width: 239px;
    height: 194px;
    background: url(../images/task-active-dot-2.png) no-repeat;
    background-size: 100%;
    top: 230px;
}

.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: 440px;
    left: 135px;
}

.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: 675px;
}

.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: 900px;
    left: 135px;
}

.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: 1090px;
}

.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%;
    left: 128px;
    top: 1277px;
}

.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-star {
    position: absolute;
    /* top: 9.4rem; */
    /* left: -200px; */
    z-index: 10;
    pointer-events: none;
}

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

.task-star .task-star1 {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 492px;
    animation: star1 2s ease-in-out infinite;
}

.task-star .task-star2 {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 287px;
    left: 250px;
    animation: star1 2s 1s ease-in-out infinite;
}

.task-star .task-star3 {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 452px;
    left: 403px;
    animation: star1 3s ease-in-out infinite;
}

.task-star .task-star4 {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 414px;
    left: 207px;
    animation: star1 2s ease-in-out infinite;
}

.task-star .task-star5 {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 668px;
    left: 243px;
    animation: star1 2s 2s ease-in-out infinite;
}

.task-hint {
    width: 506px;
    height: 64px;
    position: absolute;
    top: 1130px;
    left: 50%;
    transform: translateX(-50%);
    background: url("../images/task-hint.png") no-repeat;
    background-size: 100%;
}

/*活动规则*/
.rule {
    overflow: hidden;
    font-size: 0;
    margin-top: 68px;
    padding-bottom: 215px;
    position: relative;
    top: 211px;
}

.rule .title {
    text-align: left;
    margin-left: 45px;
}

.rule-info {
    width: 672px;
    height: 1220px;
    margin: 0 auto;
    background: url(../images/rule-info.png) no-repeat;
    background-size: 100%;
    margin-top: 52px;
    margin-bottom: 5px;
}

/* .rule .rule-info p{
    width: 630px;
    margin: auto;
    padding-top: 30px;
} */
/*footer*/
.swiper-container .swiper-wrapper .footer {
    height: 122px;
    background-color: #000;
}

.footer {
    width: 720px;
    background: #100506;
    /* padding-bottom: 90px; */
}

.footer .cont {
    text-align: center;
    background: url(../images/footer-bg.png) no-repeat;
    background-size: 100%;
    height: 122px;
    width: 720px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.copyright,
.logo-game,
.copyright img,
.copyright p {
    display: inline-block;
    vertical-align: top;
}

.copyright {
    position: relative;
}

.copyright p {
    margin-left: 15px;
    line-height: 18px;
    font-size: 12px;
    color: #cccccc;
    text-align: left;
    white-space: pre-line;
    width: 400px;
}

/* .copyright::before {
    content: '';
    position: absolute;
    left: -60px;
    top: 0px;
    height: 68px;
    width: 2px;
    background-color: #6f6b6c;
} */
.logo-game {
    width: 329px;
    height: 66px;
    background: url(../images/logo-game.png) no-repeat;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    /* margin-right: 85px; */
    position: relative;
    top: 2px;
    margin-left: -40px;
}

/*.logo-game:after {*/
/*position:absolute;*/
/*top:15px;*/
/*right:-50px;*/
/*width:2px;*/
/*height:80px;*/
/*background-color:#999999;*/
/*content:""*/
/*}*/
.copyright {
    position: relative;
}

.copyright p {
    /* margin-left: 6px;
    margin-top: 8px; */
    line-height: 18px;
    font-size: 12px;
    color: #979798;
    text-align: left;
}

/* 预约弹窗 */
.yuyue-frame {
    background: url(../image/pop-yuyue.png) no-repeat;
    background-size: 100%;
    width: 653px;
    height: 413px;

}

.yuyue-frame .gif-code {
    top: 108px;
    left: 360px;
}

.yuyue-frame .yuyue-btn {
    cursor: pointer;
    width: 242px;
    height: 80px;
    background: url(../image/pop/btn-Privacy.png) no-repeat;
    background-size: 100%;
    position: abs279te;
    bottom: 46px;
    left: 50%;
    transform: translateX(-50%);

}

/* 预约后弹窗 */
.equipment-frame {
    width: 676px;
    height: 400px;
}

.equipment-frame.eq-aos .gif-code,
.equipment-frame.eq-ios .gif-code {
    top: 105px;
    left: 377px;
    font-size: 22px;
    color: #fff;
}
.equipment-frame.eq-aos .gif-code-key2,
.equipment-frame.eq-ios .gif-code-key2 {
    top: 140px;
    left: 377px;
    font-size: 22px;
    color: #fff;
}

.equipment-frame.eq-ios .equipment-btn,
.equipment-frame.eq-aos .equipment-btn {
    position: absolute;
    background: url(../image/pop/pop-lounge-btn.png) no-repeat;
    background-size: 100%;
    width: 440px;
    height: 82px;
    top: 488px;
    left: 0;
    right: 0;
    margin: auto;
}
.equipment-frame.eq-ios  .dia-close,
.equipment-frame.eq-aos  .dia-close {
    left: initial;
    right: 22px;
    top: 30px;
}

.copy-code-2 {
    margin-left: 20px;
    width: 59px;
    height: 32px;
    background: url('../image/pop/btn-copy.png') no-repeat;
    background-size: 100%;
}

.equipment-btn {
    position: absolute;
    background: url('../image/pop/equipment-btn.png') no-repeat;
    background-size: 100%;
    width: 150px;
    height: 49px;
    top: 330px;
    left: 50%;
    margin-left: -75px;
    cursor: pointer;
}


/* 底部导航栏 */
.bottom {
    z-index: 99;
    position: fixed;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 720px;
    height: 165px;
    /* background: url('../img/fixed-footer-bg0.png') no-repeat; */
    background-size: 100%;
}

.bottom .bottom-btn img {
    width: 100%;
}

.bottom .slidebar {
    position: absolute;
    left: 0;
}






/* 固定底欄 */
.fixed-footer {
    position: fixed;
    bottom: 0px;
    right: 0;
    z-index: 99;
}

.fixed-footer>a.fixed-footer-link {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
}

/* .fixed-footer .fixed-footer-wrapper {
    width: 720px;
    height: 190px;
    background: url("../img/fixed-footer-bg0.png") no-repeat;
    background-size: 100%;
    transition: all .2s;
}
.fixed-footer .fixed-footer-wrapper.over {
    background: url("../img/fixed-footer-bg1.png") no-repeat;
    background-size: 100%;
} */
.loop-bg1 {
    width: 720px;
    height: 190px;
}

.loop-bg2 {
    width: 720px;
    height: 190px;
    position: relative;
}

.fixed-footer .fixed-footer-wrapper .btn-query {
    position: absolute;
    top: 80px;
    left: 22px;
    font-size: 0;
}

.fixed-footer .fixed-footer-wrapper .ios-order {
    font-size: 0;
    position: absolute;
    left: 51px;
    top: 180px;
}

.fixed-footer .fixed-footer-wrapper .gp-order {
    font-size: 0;
    position: absolute;
    left: 51px;
    top: 180px;
}

.fixed-footer .fixed-footer-wrapper .fb-btn {
    position: absolute;
    background: url(../images/fb-btn.png) no-repeat;
    background-size: 100%;
    top: 88px;
    left: 253px;
    width: 227px;
    height: 71px;
}

/*弹出视频*/
.shade {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

.videos {
    width: 720px;
    height: 500px;
    position: absolute;
    left: 50%;
    margin-left: -360px;
    top: 50%;
    margin-top: -250px;
}

.close {
    width: 45px;
    height: 36px;
    position: absolute;
    top: 520px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    background: url(../image/pop/pop-close2.png);
    cursor: pointer;
    z-index: 101;
}

/*弹层*/
.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: 25px;
    height: 23px;
    position: absolute;
    top: 24px;
    right: 19px;
    background: url("../image/pop/appointment-close.png") no-repeat;
    background-size: 100%;
}
.logo-close {
  width: 25px;
  height: 23px;
    position: absolute;
    top: 540px;
    left: 236px;
    background: url("../image/pop/appointment-close.png") no-repeat;
    background-size: 100%;
}
.dia-pic-close {
    width: 55px;
    height: 58px;
    position: absolute;
    background: url(../images/pop-close.png) no-repeat;
    background-size: 100%;
    z-index: 300;
}

.pop-gift-k {
    perspective: 1000;
    width: 720px;
    /* height: 600px; */
    position: relative;
    margin-top: -100px;
    margin-left: -15px;
}

.pop-gift-share-first {
    position: absolute;
    top: 490px;
    left: 155px;
    z-index: 20;
}

.pop-gift-share {
    position: absolute;
    top: 565px;
    left: 145px;
    z-index: 20;
}

.pop-gift-header {
    width: 720px;
    height: 160px;
    top: -150px;
    position: absolute;
}

.pop-gift-header img:nth-child(1) {
    width: 314px;
    height: 54px;
    display: block;
    margin: 0 auto;
}

.pop-gift-header .pop-gift-header-hint {
    width: auto;
    height: 29px;
    display: block;
    margin: 30px auto 50px;
}

/* 卡牌 */
.pop-gift-flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
    /* 元素变形的原点 */
    transform-origin: center center;
    /* 背部可见 翻转更立体 */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    width: 320px;
    height: 548px;
    margin: 0 auto;
}

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

/* 卡片前面内容 */
.pop-gift-front {
    transform: rotateY(180deg);
    width: 320px;
    height: 548px;
}

.pop-gift-front-btn {
    width: 221px;
    height: 72px;
    position: absolute;
    top: 580px;
    left: 250px;
}

.pop-gift-front .pop-gift-front-card {
    width: 320px;
    height: 548px;
}

/* 卡片后面内容 */
.pop-gift-back {
    z-index: 2;
    width: 320px;
    height: 548px;
}

.pop-gift-back-btn {
    width: 221px;
    height: 72px;
    position: absolute;
    top: 580px;
    left: 250px;
}

.pop-gift-back .pop-gift-back-cardOne {
    width: 320px;
    height: 548px;
}

.pop-gift-back .pop-gift-back-cardTwo {
    width: 320px;
    height: 548px;
}

/* 翻转180度 */
.pop-gift-k .pop-gift-flipper.active {
    /* transform: rotateY(180deg); */
    animation: animal 0.5s ease-out;
    -webkit-animation: animal 0.5s ease-out;
}

@keyframes animal {
    0% {
        transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(900deg);
        -ms-transform: rotateY(900deg);
        -webkit-transform: rotateY(900deg);
    }
}

@-webkit-keyframes animal {
    0% {
        transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(900deg);
        -ms-transform: rotateY(900deg);
        -webkit-transform: rotateY(900deg);
    }
}

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

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

.cesi-frame ul li {
    cursor: pointer;
    width: 184px;
    height: 71px;
}

.cesi-frame ul .cesi-btn1 {
    background: url(../image/pop/btn-Privacy.png) no-repeat;
    background-size: 100%;
    margin-right: 279p6;
}

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

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

.cesi2-frame .gif-code {
    top: 114px;
    left: 341px;
}

.cesi2-frame .cesi2-btn {
    cursor: pointer;
    width: 147px;
    height: 56px;
    background: url(../image/pop/btn-Privacy.png) no-repeat;
    background-size: 100%;
    position: abs279te;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
}

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

}

.cesi3-frame .cesi3-btn {
    cursor: pointer;
    width: 147px;
    height: 56px;
    background: url(../image/pop/btn-Privacy.png) no-repeat;
    background-size: 100%;
    position: abs279te;
    bottom: 96px;
    left: 50%;
    transform: translateX(-50%);
}
.equipment-frame.eq-aos .pack-text{
    position: absolute;
    top: 10px;
    width: 294px;
    left: -12px;
    font-size: 19px;
}
.equipment-frame.eq-ios .pack-text{
    position: absolute;
    top: 8px;
    width: 294px;
    left: -29px;
    font-size: 19px;
}

.gif-code,
.gif-code-key2 {
    /* width: 200px; */
    display: flex;
    color: #000;
    position: absolute;
    top: 87px;
    left: 250px;
    align-items: center;
    /* justify-content: space-between; */
}

.gif-code #code,
.gif-code2 #code,
.gif-code-key2 #code {
    width: 75px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
}

.gif-code2 {
    display: flex;
    color: #fff;
    position: absolute;
    top: 155px;
    left: 312px;
    align-items: center;
    width: 200px;
    justify-content: space-between;
}

.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: 400px;
    height: 640px;
    background: url("../images/pop-gift-light.png") no-repeat;
    background-size: 100%;
    animation: myfirst 3s infinite;
    position: absolute;
    top: -47px;
    left: -40px;
    pointer-events: none;
    z-index: -1;
}

@keyframes myfirst {
    0% {
        transform: scale(0.95);
    }

    50% {
        transform: scale(1);
    }

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

.pop-star {
    position: absolute;
    top: 100px;
    z-index: 10;
    /* 不影响层级下面的组件鼠标事件 */
    /* pointer-events:none; */
    /* background-color: brown; */
}

.pop-star ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    left: 162px;
    position: absolute;
}

.pop-star .pop-star1 {
    position: absolute;
    width: 300px;
    height: 300px;
    top: -4px;
    left: -166px;
    animation: star1 2s infinite ease-out;
}

.pop-star .pop-star2 {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 260px;
    left: 300px;
    animation: star1 2s infinite ease-out;
}

.pop-star .pop-star3 {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 200px;
    left: -184px;
    animation: star1 1s 0.5s infinite ease-out;
}

.pop-star .pop-star4 {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 290px;
    animation: star1 2s infinite ease-out;
}

.pop-star .pop-star5 {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 133px;
    left: 119px;
    animation: star1 2s 0.5s infinite ease-out;
}

@keyframes star1 {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

.pop-gift-unlock {
    position: absolute;
    top: 650px;
    left: 125px;
}

.pop-gift .lottery-share {
    position: absolute;
    top: 410px;
    left: 346px;
    z-index: 2;
}

.pop-gift .lottery-invite {
    position: absolute;
    top: 779px;
    left: 148px;
    z-index: 2;
}

.pop-gift .dia-close {
    top: 150px;
    left: 600px;
}

.pop-gift-nei {
    width: 580px;
    height: 260px;
    top: 65px;
    left: -40px;
    position: relative;
}

.pop-gift-nei h2 {
    padding-top: 40px;
    padding-bottom: 0px;
    line-height: 1;
    font-size: 46px;
    color: #763fa2;
    text-align: center;
}

.pop-gift-nei .pop-bag {
    /* position: absolute;
    top: 164px;
    left: 230px; */
    text-align: center;
}

.pop-gift-nei .pop-bag img {
    /* width: 100%; */
    position: absolute;
    top: 0px;
    left: 48px;
}

.pop-gift-nei .lottery-pop-btn a {
    display: block;
    width: 358px;
    margin: 0 auto;
    margin-top: 10px;
}

.pop-gift-nei .lottery-share {
    position: absolute;
    top: -85px;
    right: -25px;
}

.pop-gift .pop-gift-cyberpunk-title,
.pop-gift .pop-gift-cyberpunk-title::after {
    width: 569px;
    height: 141px;
    position: absolute;
    left: 5px;
    top: 540px;
    background: url("../images/pop-gift-cyberpunk-title.png") no-repeat;
    background-size: 100%;
}

.pop-gift .pop-gift-cyberpunk-title::after {
    content: '';
    top: 0;
    left: 0;
    visibility: hidden;
    animation: cyberpunk 1s infinite;
    animation-timing-function: steps(1, end);
}

/* 花火弹窗 */
.gift-1 .pop-gift-k {
    width: 510px;
    height: 528px;
    margin: 0 auto;
    background: url("../images/lottery-pop-bg-1.png") no-repeat;
    background-size: 100%;
    left: 0;
}

.gift-1 .pop-gift-1-inner {
    position: absolute;
    left: 57px;
    top: 290px;
    animation: bubble 5s infinite;
}

.gift-1 .pop-gift-cyberpunk-title,
.gift-1 .pop-gift-cyberpunk-title::after {
    width: 485px;
    height: 163px;
    position: absolute;
    left: 40px;
    top: 540px;
    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 .pop-gift-k>a {
    position: absolute;
}

.gift-1 .pop-gift-k .gift-1-download {
    top: 570px;
    left: 58px;
}

.gift-1 .pop-gift-k .gift-1-return {
    top: 570px;
    left: 372px;
}

.gift-1 .pop-gift-k .gift-1-code-wrapper {
    color: #9579fd;
    font-size: 28px;
    position: absolute;
    top: 151px;
    left: 330px;
}

.gift-1 .gift-1-code-wrapper .gift-1-code {
    display: inline-block;
    width: 216px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gift-1 .gift-1-code-wrapper .gift-1-copy {
    position: absolute;
    top: -3px;
    left: 222px;
}

.gift-1 a.lottery-share {
    left: 168px;
    top: 380px;
}

.gift-1 a.lottery-go-to {
    position: absolute;
    left: 230px;
    top: 557px;
}

.gift-1 .dia-close {
    top: 540px;
    left: 236px;
}

/* 我的七行卡弹窗 */
.pop-mycard {
    width: 676px;
    height: 955px;
    background: url("../images/pop-mycard.png") no-repeat;
    background-size: 100%;
    /* overflow: hidden; */
}

.pop-mycard-k {
    width: 676px;
    height: 720px;
    margin-top: 125px;
}

.pop-mycard-list {
    width: 620px;
    height: 720px;
}

.pop-mycard-list .swiper-wrapper {
    transition: top 1s;
}

.pop-mycard .dia-close {
    top: -40px;
    left: 608px;
}

.pop-mycard-item img {
    width: 620px;
}

.pop-mycard-list .pop-newcard-item.swiper-slide-next {
    top: -180px;
}

/* 解锁七大奖弹窗 */
.pop-unlock .pop-unlock-k {
    width: 664px;
    height: 730px;
    margin: 0 auto;
    background: url("../images/pop-unlock-k-bg.png") no-repeat;
    background-size: 100%;
}

.pop-unlock .unlock-close {
    width: 32px;
    height: 32px;
    position: absolute;
    top: -5px;
    left: 590px;
    background: url("../images/pop-close.png") no-repeat;
    background-size: 100%;
}

/* 獎勵兌換 */
.pop-exchange-k {
    width: 717px;
    height: 1186px;
    background: url(../images/order-pop-bg.png) no-repeat;
    background-size: 100%;
    overflow: hidden;
}

.pop-exchange-pic {
    width: 652px;
    height: 218px;
    background: url(../images/pop-exchange-pic.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 30px;
    top: 200px;
}

.pop-exchange-pic .pop-exchange-poker-num {
    width: 555px;
    height: 39px;
    background: url(../images/pop-exchange-poker-num.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50px;
    top: 160px;
}

.pop-exchange-poker-text span {
    position: absolute;
    color: #E8A330;
    margin-left: -5px;
    margin-top: 1px;
}

.pop-exchange-poker-text {
    position: absolute;
    color: #FFE9C2;
    font-size: 20px;
    left: 175px;
    width: 250px;
}

.pop-exchange-nei {
    position: relative;
    width: 652px;
    height: 615px;
    top: 445px;
    left: 30px;
    overflow: hidden;
}

.pop-exchange-title {
    position: relative;
    width: 653px;
    height: 55px;
    background: url(../images/pop-exchange-title.png) no-repeat;
    background-size: 100%;
}

.pop-exchange-nei .pop-exchange-info {
    position: absolute;
    overflow-y: scroll;
    width: 750px;
    height: 615px;
    top: 55px;
}

.pop-exchange-info .pop-exchange-content li {
    line-height: 65px;
    height: 61px;
    display: flex;
}

.pop-exchange-content li .num {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: rgba(167, 133, 89, 0.4);
    display: flex;
    align-items: center;
    line-height: 25px;
    padding: 0 2%;
    border: 1px solid #8C704B;
    border-top: transparent;
    border-right: transparent;
    font-size: 20px;
}

.pop-exchange-content li .gift {
    width: 268px;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: rgba(167, 133, 89, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 25px;
    padding: 0 2%;
    border: 1px solid #8C704B;
    border-top: transparent;
    border-right: transparent;
    font-size: 18px;
}

.pop-exchange-content li .status {
    width: 91px;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: rgba(167, 133, 89, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 25px;
    padding: 0 2%;
    border: 1px solid #8C704B;
    border-right: transparent;
    border-top: transparent;
    font-size: 20px;
}

.pop-exchange-content li span {
    color: #FFEDD6;
}

.pop-exchange .dia-close {
    top: 5px;
    left: 670px;
}

/* 查询兑换码 */
.query-code-container .query-code-bg {
    position: relative;
    background: url(../images/query-code-bg.png) no-repeat;
    background-size: 100%;
    width: 655px;
    height: 479px;
}

.query-code-bg .query-code-inner-1 .code-name-1 {
    color: #A9A1A1;
    font-size: 28px;
    width: 225px;
    position: absolute;
    top: 115px;
    left: 105px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    /* letter-spacing: -2px; */
    text-align: right;
}

.query-code-bg .query-code-inner-1 .code-num-1 {
    color: #A9A1A1;
    font-size: 32px;
    width: 150px;
    position: absolute;
    top: 111px;
    left: 333px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}

.query-code-bg .query-code-inner-1 .code-copy-1 {
    font-size: 26px;
    border-bottom: 1px solid #A9A1A1;
    color: #A9A1A1;
    letter-spacing: -2px;
    position: absolute;
    top: 127px;
    left: 487px;
    line-height: 1;
}

.query-code-bg .query-code-inner-2 .code-name-2 {
    color: #A9A1A1;
    font-size: 28px;
    width: 225px;
    position: absolute;
    top: 158px;
    left: 105px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    /* letter-spacing: -2px; */
    text-align: right;
}

.query-code-bg .query-code-inner-2 .code-num-2 {
    color: #A9A1A1;
    font-size: 32px;
    width: 150px;
    position: absolute;
    top: 153px;
    left: 333px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}

.query-code-bg .query-code-inner-2 .code-copy-2 {
    font-size: 26px;
    border-bottom: 1px solid #A9A1A1;
    color: #A9A1A1;
    letter-spacing: -2px;
    position: absolute;
    top: 168px;
    left: 487px;
    line-height: 1;
}

.query-code-bg .query-code-inner-3 .code-name-3 {
    color: #A9A1A1;
    font-size: 28px;
    width: 225px;
    position: absolute;
    top: 203px;
    left: 105px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    /* letter-spacing: -2px; */
    text-align: right;
}

.query-code-bg .query-code-inner-3 .code-num-3 {
    color: #A9A1A1;
    font-size: 32px;
    width: 150px;
    position: absolute;
    top: 199px;
    left: 333px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}

.query-code-bg .query-code-inner-3 .code-copy-3 {
    font-size: 26px;
    border-bottom: 1px solid #A9A1A1;
    color: #A9A1A1;
    letter-spacing: -2px;
    position: absolute;
    top: 214px;
    left: 487px;
    line-height: 1;
}

.query-code-bg .query-code-inner-4 .code-name-4 {
    color: #A9A1A1;
    font-size: 28px;
    width: 225px;
    position: absolute;
    top: 245px;
    left: 105px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    /* letter-spacing: -2px; */
    text-align: right;
}

.query-code-bg .query-code-inner-4 .code-num-4 {
    color: #A9A1A1;
    font-size: 32px;
    width: 150px;
    position: absolute;
    top: 240px;
    left: 333px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}

.query-code-bg .query-code-inner-4 .code-copy-4 {
    font-size: 26px;
    border-bottom: 1px solid #A9A1A1;
    color: #A9A1A1;
    letter-spacing: -2px;
    position: absolute;
    top: 255px;
    left: 487px;
    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: 213px;
    height: 67px;
    top: 225px;
    left: 220px;
}

/* 预约成功弹窗 */
.reg-success-container .pop-success-k {
    position: relative;
    background: url(../images/reg-success-bg.png) no-repeat;
    background-size: 100%;
    width: 655px;
    height: 735px;
}

.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: 32px;
    width: 150px;
    position: absolute;
    top: 115px;
    left: 212px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}

.pop-success-k .pop-success-inner .code-copy a {
    font-size: 26px;
    border-bottom: 1px solid #A9A1A1;
    color: #A9A1A1;
    letter-spacing: -2px;
    position: absolute;
    top: 130px;
    left: 373px;
    line-height: 1;
}

.pop-success-inner .pop-success-btn {
    position: absolute;
    width: 700px;
    left: -33px;
    top: 581px;
}

.pop-success-inner .pop-success-btn a {
    display: inline-block;
    margin-left: 30px;
}

.pop-success-inner .pop-success-btn .order-success-gp::after {
    content: '';
    display: inline-block;
    width: 75px;
    height: 75px;
    background: url(../images/finger.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: 65px;
    left: 352px;
    -webkit-animation: fblike 1s ease-in-out infinite;
    animation: fblike 1s ease-in-out infinite;
    cursor: default;
}

.pop-success-inner .pop-success-btn .order-success-gp.no-after:after {
    content: none;
}

.pop-success-inner .pop-success-btn .order-success-gp::before {
    content: '';
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url(../images/red-point.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: -15px;
    left: 446px;
    z-index: 1;
    -webkit-animation: fblike 1s ease-in-out infinite;
    animation: fblike 1s ease-in-out infinite;
    cursor: default;
}

.pop-success-inner .pop-success-btn .order-success-gp.no-before:before {
    content: none;
}

.pop-success-inner .pop-success-btn .order-success-ios::after {
    content: '';
    display: inline-block;
    width: 75px;
    height: 75px;
    background: url(../images/finger.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: 65px;
    left: 352px;
    -webkit-animation: fblike 1s ease-in-out infinite;
    animation: fblike 1s ease-in-out infinite;
    cursor: default;
}

.pop-success-inner .pop-success-btn .order-success-ios.no-after:after {
    content: none;
}

.pop-success-inner .pop-success-btn .order-success-ios::before {
    content: '';
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url(../images/red-point.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: -15px;
    left: 446px;
    z-index: 1;
    -webkit-animation: fblike 1s ease-in-out infinite;
    animation: fblike 1s ease-in-out infinite;
    cursor: default;
}

.pop-success-inner .pop-success-btn .order-success-ios.no-before:before {
    content: none;
}



/* 设备识别弹窗ios */
.gif-ios-code,
.gif-android-code {
    width: 198px;
    display: flex;
    color: #d9d4c8;
    position: absolute;
    top: 87px;
    left: 315px;
    align-items: center;
}
.gif-ios-code #code,
.gif-android-code #code {
  width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  font-size: 24px;
}

/* .gif-ios-code2 {
    top: 136px;
} */
.gif-ios-code2 {
  top: 114px;
}
.gif-ios-code-military {
    display: flex;
    color: #351E09;
    position: absolute;
    top: 95px;
    left: 306px;
    align-items: center;
}

#gif-jhm-key {
    font-size: 22px;
}

.gif-ios-code>#git-code {
    width: 75px;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    font-size: 22px;
}



/* .gif-android-code {
    width: 230px;
    display: flex;
    color: #000;
    position: absolute;
    top: 90px;
    left: 486px;
    align-items: center;
} */

/*
.gif-android-code2 {
    top: 136px;
} */
.gif-android-code2{
  top: 120px;
}

/* 獎勵選擇 */
.equipment-ios .pop-order-radio,
.equipment-android .pop-order-radio {
    position: absolute;
    font-size: 0;
    top: 582px;
    left: 105px;
}
.pop-order-radio .options {
    position: absolute;
    display: flex;
}
.pop-order-radio .options .option {
    position: absolute;
}
.pop-order-radio .options .option:nth-child(2) {
    left: 196px;
}
.pop-order-radio .options .option:nth-child(3) {
    left: 390px;
}
.pop-order-radio .options input[type="radio"] {
    display: none;
}
.pop-order-radio .options label {
    display: block;
    width: 45px;
    height: 44px;
    background: url('../image/pop/pop-store-radio.png') no-repeat;
    background-size: 100%;
    cursor: pointer;
}
.pop-order-radio .options input[type="radio"]:checked+label {
  width: 45px;
  height: 50px;
    background-image: url('../image/pop/pop-store-radio-active.png');
}

/* 15s未预约弹窗 */
 .appointment-login.login-1{
  width: 691px;
  height: 1184px;
  background: url('../image/pop/appointment-login.png') no-repeat;
  background-size: 100%;
  top: 46%;
  /* left: 345px; */
}

 .appointment-login.appointment-login-ios.login-1{
    width: 691px;
    height: 1184px;
  background: url('../image/pop/appointment-login-ios.png') no-repeat;
  background-size: 100%;
  top: 46%;
  /* left: 345px; */
}

/* 弹窗1 */
.login1 .appointment-login.login-1{
    width: 720px;
    height: 1500px;
    background: url('../image/pop/appointment-login1.png') no-repeat;
    background-size: 100%;
    top: 45%;
}
/* 弹窗2 */
.login2 .appointment-login.login-1{
    width: 720px;
    height: 1500px;
    background: url('../image/pop/appointment-login2.png') no-repeat;
    background-size: 100%;
    top: 45%;
}

/* 弹窗热区 */
.login .login-aos,
.login .login-ios {
  width: 553px;
  height: 210px;
  position: absolute;
  top: 555px;
  left: 80px;
  /* background-color: #fff; */
}

/* 弹窗按钮 */
.login .login-aos-btn,
.login .login-ios-btn {
  width: 463px;
  height: 160px;
  position: absolute;
  top: 1110px;
  left: 120px;
  /* background: url('../image/pop/login-aos-btn.png') no-repeat; */
  background-size: 100%;
}
.login .login-aos-btn .header-i,
.login .login-ios-btn .header-i {
  top: -24px;
  left: -58px;
}

.login .login-aos-btn::after,
.login .login-ios-btn::after {
  content: '';
  display: block;
  width: 37px;
  height: 38px;
  background: url('../image/pop/fb-like-red.png') no-repeat;
  background-size: 100%;
  position: absolute;
  top: 20px;
  right: 10px;
}

.login .login-aos-btn::before,
.login .login-ios-btn::before {
  content: '';
  display: block;
  width: 69px;
  height: 58px;
  background: url('../image/pop/hand.png') no-repeat;
  background-size: 100%;
  position: absolute;
  top: 105px;
  right: -25px;
}

.login .login-aos-btn {
  background: url('../image/pop/login-aos-btn.png') no-repeat;
  background-size: 100%;
}
.login .login-ios-btn {
  background: url('../image/pop/login-ios-btn.png') no-repeat;
  background-size: 100%;
}
  

.login1 .login-aos,
.login1 .login-ios,
.login2 .login-aos,
.login2 .login-ios {
  width: 545px;
  height: 200px;
  position: absolute;
  top: 1140px;
  left: 88px;
}

.pop-login-title-num {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 670px;
  left: 115px;
  height: 81px;
}

.pop-login-title-num .pop-login-title-num-text1{
  background: linear-gradient(to right,  #b7a06a 0%, #fffbe6 50%, #b7a06a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  font-size: 45px;
  padding: 0 5px;
  font-family: 'Cinzel', serif;
  margin-bottom: 5px;
  font-weight: 1000;
  letter-spacing: 4px;
  overflow: hidden;
}


.pop-login-title-num .pop-login-title-num-text2{
  background: url('../image/pop/pop-login-title-num-line.png') no-repeat;
  background-size: 100%;
  width: 306px;
  height: 47px;
}

/* 弹窗1 2关闭按钮 */
.login1 .appointment-login .logo-close,
.login2 .appointment-login .logo-close {
  right: 80px;
  top: 550px;
}

/* AOS IOS */
.login1 .appointment-login .step-type-appointment,
.login2 .appointment-login .step-type-appointment {
  top: 785px;
  left: 225px;
}

/* 弹窗1 2 详细 */
.login1 .appointment-login .step-info,
.login2 .appointment-login .step-info {
  top: 300px;
  left: 225px;
}

/* 条款 */
.login1 .equity,
.login2 .equity {
  top: 925px;
  left: 146px;
}

/* 弹窗1 2 输入框 */
.login1 .appointment-login .step-info,
.login2 .appointment-login .step-info{
  top: 840px;
  left: 253px;
 }

 /* 奖品选择 */
.login1 .appointment-login .pop-gift-radio,
.login2 .appointment-login .pop-gift-radio {
  top: 1302px;
  left: 168px;
 }

 /* 登录按钮 */
 .login1 .appointment-login .confirm-appointment-btn,
 .login2 .appointment-login .confirm-appointment-btn {
  top: 980px;
  left: 0px;
 }


.appointment-center {
    position: relative;
}

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

.step-type-appointment {
  position: absolute;
  font-size: 28px;
  color: #bfbfbf;
  top: 835px;
  display: flex;
  width: 278px;
  justify-content: space-between;
  align-items: center;
  left: 225px;
}

.step-type-AOS-cur {
    cursor: pointer;
    margin-right: 16px;
}

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

#step-type-IOS {
    position: absolute;
    cursor: pointer;
    width: 120px;
}

#step-type-AOS {
    position: absolute;
    cursor: pointer;
    width: 150px;
}

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

#step-type-IOS[type='radio']:checked+label::before,
#step-type-AOS[type='radio']:checked+label::before {
    width: 28px;
    height: 28px;
    background-image: url(../image/pop/step-type-checkbox-active.png);
    /* margin-top: -9px;
    margin-right: 0px;
    margin-left: -6px; */
}

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

.appointment-phone {
    position: absolute;
    top: 196px;
    left: 310px;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px rgb(255,255,255,.9) inset !important;
}
.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: 100px;
    width: 90px;
    position: absolute;
    bottom: calc(25% - 20px);
    transform: translateY(50%);
    left: -37px;
    background: url(../image/progress-guang.png) no-repeat;
    background-size: 100%;
    background-position: 0 26px;
}

.rules-clone1 {
    width: 37px;
    height: 39px;
    background: url('../image/rules-clone.png') no-repeat;
    background-size: 100%;
    position: absolute;
    top: -200px;
    right: -22px;
    cursor: pointer;
}

.slidermsg .slider-bg {
    left: 37px;
    overflow: hidden;
    height: 393px;
    width: 18px;
    position: absolute;
    bottom: 45px;
}


/* 选择武将详情 */
.general-pop {
    width: 625px;
    height: 556px;
    background: url('../images/general-pop.png') no-repeat;
    background-size: 100%;
}

.general-pop-btn {
    position: absolute;
    background: url(../images/appointment-clone.png) no-repeat;
    background-size: 100%;
    width: 39px;
    height: 39px;
    right: -15px;
    top: -60px;
    cursor: pointer;
}

.equity-jump {
    background: url('../image/note-1.png') no-repeat;
    width: 54px;
    height: 16px;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    right: 22px;
}

.equity-text {
    width: 395px;
    height: 33px;
    background: url('../image/pop/equity-text.png') no-repeat;
    background-size: 100%;
}

.equity-text1 {
    width: 264px;
    height: 22px;
    /* margin: 0 52px 0 36px; */
    background: url('../image/pop/equity-text1.png') no-repeat;
    background-size: 100%;
    position: absolute;
    left: 35px;
}

.appointment-phone .cell-phone {
  font-size: 36px;
  background: transparent;
  border: 0rem;
  outline: none;
  line-height: 36px;
  height: 80px;
  width: 390px;
  text-align: center;
}

input#phone2.cell-phone.order-tel::placeholder {
    font-size: 28px !important;
    text-align: center;
    color: #acabab !important;
}

input#phone2.cell-phone.order-tel::-ms-input-placeholder {
    font-size: 28px !important;
    text-align: center;
    color: #acabab !important;
}

input#phone2.cell-phone.order-tel::-webkit-input-placeholder {
    font-size: 28px !important;
    text-align: center;
    color: #acabab !important;
}


.appointment-clone {
    position: absolute;
    background: url(../image/pop/appointment-close.png) no-repeat;
    background-size: 100%;
    width: 16px;
    height: 16px;
    right: 31px;
    top: 23px;
    cursor: pointer;
}

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

.equity {
  width: 466px;
  display: flex;
  align-items: center;
  position: absolute;
  top: 1010px;
  left: 125px;
}

.equity1 {
    width: 634px;
    display: flex;
    align-items: center;
    position: absolute;
    top: 580px;
    left: 110px;
}

.equity-login-check input[type=checkbox] {
    position: relative;
    display: inline-block;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    background-color: transparent;
}

.equity-login-check1 input[type=checkbox] {
    display: inline-block;
    appearance: none;
    -webkit-appearance: none;
    width: 11px;
    height: 12px;
    background: url(../image/pop/login-checkbox.png) no-repeat;
    background-size: 100%;
    outline: none;
    background-color: transparent;
    /* margin-top: 4px; */
    position: absolute;
    top: 0x;
    left: 14px;
}

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

/* .equity-login-check1 .login-checkbox[type=checkbox]:checked {
    content: '';
    display: inline-block;
    width: 31px;
    height: 31px;
    background: url(../image/pop/login-checkbox.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    margin-top: 5px;
    margin-left: 0px;
} */

.equity-login-check1 .login-checkbox:checked::after {
    content: '';
    display: inline-block;
    width: 19px;
    height: 20px;
    background: url(../image/pop/login-checkbox-active.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: -1px;
    /* margin-top: 5px;
    margin-left: 0px; */
}

.equity-login-check .login-checkbox {
    width: 19px;
    height: 20px;
    background: url(../image/pop/login-checkbox.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: -13px;
}

.equity-login-check1 .login-checkbox1 {
    width: 19px;
    height: 20px;
    background: url(../image/pop/login-checkbox.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
}

.equity-login-check .login-checkbox:checked::after {
    content: '';
    width:19px;
    height: 20px;
    background: url(../image/pop/login-checkbox-active.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
}



.bottom-btn-ios img {
    width: 205px;
    height: 60px;
    position: relative;
    top: 65px;
    left: 220px;
}

.bottom-btn-aos img {
    width: 205px;
    height: 60px;
    position: relative;
    top: 65px;
    left: 220px;
}
.bottom-btn-czs img {
    width: 241px;
    height: 59px;
    position: relative;
    top: 65px;
    left: 220px;
}

/* .bottom-ios{
    width: 205px;
    height: 60px;
    position: absolute;
    left:0px;
    top: 0px;
 }
 .bottom-aos{
    width: 205px;
    height: 60px;
    position: absolute;
    left:0px;
    top: 0px;
 } */
/*.confirm-appointment-btn.no-aftere::after {*/
/*    content: '';*/
/*    display: inline-block;*/
/*    width: 41px;*/
/*    height: 41px;*/
/*    background: url(../image/section2/fb-like-red.png) no-repeat;*/
/*    background-size: 100%;*/
/*    cursor: pointer;*/
/*    position: absolute;*/
/*    top: -8px;*/
/*    left: 10px;*/
/*    z-index: 2;*/
/*    cursor: default;*/
/*}*/

/*.confirm-appointment-btn.no-aftere::before {*/
/*    content: '';*/
/*    display: inline-block;*/
/*    width: 90px;*/
/*    height: 72px;*/
/*    background: url(../image/section2/head.png) no-repeat;*/
/*    background-size: 100%;*/
/*    cursor: pointer;*/
/*    position: absolute;*/
/*    bottom: -40px;*/
/*    right: 7px;*/
/*    z-index: 2;*/
/*    cursor: default;*/
/*}*/

.appointment-login .pop-requ {
    position: absolute;
    bottom: 50px;
    left: 57px;
}
.appointment-login .pop-requ div {
    position: absolute;
    width: 117px;
    height: 38px;
    cursor: pointer;
    transition: all 0.3s;
    background: url(../image/pop/claim.png) no-repeat;
    background-size: 100%;
}

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

.appointment-login .pop-requ .first-btn {
    position: absolute;
    bottom: 0;
    left: 35px;
}
.appointment-login .pop-requ .second-btn {
    left: 193px;
    bottom: 0;
}
.appointment-login .pop-requ .third-btn {
    left: 355px;
    bottom: 0;
}


.appointment-login .pop-gift::after{
  content: '';
  width: 495px;
  height: 336px;
  background: url('../image/pop/login-gift-pop.png') no-repeat;
  background-size: 100%;
  position: absolute;
  top: 70px;
  left: -20px;
  pointer-events: none;
}
.pop-gift {
  width: 420px;
  height: 420px;
  background: url('../image/section2/giftbgi.png') no-repeat;
  background-size: 100%;
  position: absolute;
  top: 505px;
  left: 140px;
  pointer-events: none;
}
.pop-login-title {
  width: 482px;
  height: 47px;
  background: url('../image/pop/login-title.png') no-repeat;
  background-size: 100%;
  position: absolute;
  top: 45px;
  left: 100px;
  pointer-events: none;
}
.pop-login-title::after {
  content: '';
  width: 600px;
  height: 150px;
  background: url('../image/pop/login-titlei.png') no-repeat;
  background-size: 100%;
  position: absolute;
  top: -55px;
  left: -63px;
}
.confirm-appointment-btn {
    background: url('../image/pop/pop-order-login.png') no-repeat;
    width: 491px;
    height: 83px;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: 1070px;
    left: 45px;
    right: 0;
    margin: 0 auto;
}

.confirm-appointment-btn::after {
  content: '';
  
}

.appointment-login .pop-gift-radio {
    position: absolute;
    font-size: 0;
    top: 775px;
    left: 147px;
}
.pop-gift-radio .options {
    position: absolute;
    display: flex;
}
.pop-gift-radio .options .option {
    position: absolute;
}
.pop-gift-radio .options .option:nth-child(2) {
  left: 200px;
}
.pop-gift-radio .options .option:nth-child(3) {
  left: 390px;
}
.pop-gift-radio .options .option:nth-child(4) {
  left: 0px;
  top: 223px;
    /* display: none; */
}
.pop-gift-radio .options .option:nth-child(5) {
  left: 182px;
  top: 223px;
  /* display: none; */
}
.pop-gift-radio .options .option:nth-child(6) {
  left: 356px;
  top: 221px;
  /* display: none; */
}
/* .pop-gift-radio .options input[type="radio"] {
    display: none;
} */
.pop-gift-radio .options label {
    display: block;
    width: 38px;
    height: 38px;
    background: url('../image/pop/pop-login-radio.png') no-repeat;
    background-size: 100%;
    cursor: pointer;
    /* margin-top: 7px; */
}
.pop-gift-radio .options input[type="radio"] {
  width: 45px;
  height: 44px;
  position: absolute;
}

.pop-gift-radio .options input[type="radio"]:checked+label {
    width: 56px;
    height: 50px;
    background: url('../image/pop/pop-login-radio-active.png') no-repeat;
    background-size: 100%;
    margin-top: -12px;
    margin-left: -3px;
}

.copy-code {
    background: url('../image/pop/btn-copy.png') no-repeat;
    background-size: 100%;
    width: 34px;
    height: 20px;
    cursor: pointer;
    margin-left: 20px;
}

/* .equipment-ios-btn {
    background: url(../image/pop/over-ios.png) no-repeat;
    width: 209px;
    height: 62px;
    position: absolute;
    background-size: 100%;
    left: 387px;
    top: 449px;
} */



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


/* .equipment-android-btn {
    position: absolute;
    background: url(../image/pop/over-gp.png) no-repeat;
    background-size: 100%;
    width: 209px;
    height: 6cqh;
    left: 387px;
    top: 449px;
    cursor: pointer;
} */







.activity-container .activity-bg .activity-confirm {
    position: absolute;
    background: url(../images/note-confirm.png) no-repeat;
    background-size: 100%;
    width: 213px;
    height: 67px;
    top: 620px;
    left: 220px;
}

/* 复制按钮弹窗 */
.copy-container .copy-bg {
    background: url("../images/copy-bg.png") no-repeat;
    background-size: 100%;
    width: 655px;
    height: 459px;
}

.copy-container .copy-bg .copy-confirm {
    position: absolute;
    background: url(../images/note-confirm.png) no-repeat;
    background-size: 100%;
    width: 213px;
    height: 67px;
    top: 350px;
    left: 220px;
}

/* 卡池弹窗 */
.pop-poker-container .pop-pool-bg {
    position: relative;
    background: url(../images/pop-pool-bg.png) no-repeat;
    background-size: 100%;
    width: 697px;
    height: 877px;
    top: 0;
    left: 0;
}

.pop-poker-container .pop-pool-bg .pop-pool-sum {
    position: absolute;
    background: url(../images/pop-pool-sum.png) no-repeat;
    background-size: 100%;
    width: 225px;
    height: 37px;
    top: 805px;
    left: 223px;
}

.pop-poker-container .pop-pool-num span {
    position: absolute;
    font-weight: 700;
    font-size: 35px;
    left: 230px;
    top: -14px;
    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: 655px;
    height: 625px;
    top: 161px;
    left: 23px;
    overflow: hidden;
}

.pop-poker-container .pop-pool-bg .pop-pool-heros {
    position: absolute;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 672px;
    height: 624px;
    padding-top: 10px;
    overflow: scroll;
    overflow-x: hidden;
}

/* 孙尚香边框特效 */
.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: 137px;
    height: 213px;
    margin: 10px 10px;
    left: 12px;
    filter: grayscale(100%)
}

/* 拥有普通武将颜色 */
.pop-poker-container .pop-pool-bg .pop-pool-hero.active1 {
    position: relative;
    width: 137px;
    height: 213px;
    margin: 10px 10px;
    left: 12px;
    filter: grayscale(0)
}

/* 拥有五星武将颜色 */
.pop-poker-container .pop-pool-bg .pop-pool-hero.active2 {
    position: relative;
    width: 137px;
    height: 213px;
    margin: 10px 10px;
    left: 12px;
    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: 150px;
    height: 235px;
    top: -10px;
    left: -6px;
}

/* 拥有孙尚香颜色 */
.pop-poker-container .pop-pool-bg .pop-pool-hero.active4 {
    position: relative;
    width: 137px;
    height: 213px;
    margin: 10px 10px;
    left: 12px;
    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: 160px;
    height: 240px;
    top: -15px;
    left: -11px;
}

.pop-pool-hero .pop-pool-hero-num.active {
    position: absolute;
    width: 25px;
    height: 25px;
    top: -10px;
    left: 118px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px solid #A27B49;
    z-index: 1;
}

.pop-pool-hero-num span {
    position: absolute;
    color: #FDEDCD;
    font-size: 15px;
    text-align: center;
    line-height: 20px;
    width: 25px;
    height: 25px;
    font-weight: 600;
    left: 0.5px;
    top: 2.5px;
}

.pop-poker-pool .dia-close {
    left: 660px;
    top: 0px;
}

/* 卡片放大弹窗 */
.pop-poker-boost .big-poker-bg {
    width: 896px;
    height: 1059px;
}

.pop-big-poker .dia-pic-close {
    left: 700px;
    top: 75px;
}

/* 抽奖弹窗 */
.pop-poker-lottery .pop-poker-lottery-bg {
    position: relative;
    background: url(../images/pop-poker-lottery-bg.png) no-repeat;
    background-size: 100%;
    width: 705px;
    height: 964px;
}

.pop-lottery-container .pop-lottery-heros {
    position: absolute;
    width: 619px;
    height: 665px;
    top: 100px;
    left: 43px;
}

.pop-lottery-container .pop-lottery-hero {
    position: relative;
    width: 137px;
    height: 213px;
    margin: 10px 10px;
    transition: 0.6s;
    transform-style: preserve-3d;
    transform-origin: center center;
    backface-visibility: visible;
}

.pop-lottery-hero:nth-child(2) {
    position: absolute;
    top: -17px;
    left: 80px;
}

.pop-lottery-hero:nth-child(3) {
    position: absolute;
    top: -17px;
    left: 232px;
}

.pop-lottery-hero:nth-child(4) {
    position: absolute;
    top: -17px;
    left: 385px;
}

.pop-lottery-hero:nth-child(5) {
    position: absolute;
    top: 214px;
}

.pop-lottery-hero:nth-child(6) {
    position: absolute;
    top: 214px;
    left: 154px;
}

.pop-lottery-hero:nth-child(7) {
    position: absolute;
    top: 214px;
    left: 309px;
}

.pop-lottery-hero:nth-child(8) {
    position: absolute;
    top: 214px;
    left: 463px;
}

.pop-lottery-hero:nth-child(9) {
    position: absolute;
    top: 445px;
    left: 80px;
}

.pop-lottery-hero:nth-child(10) {
    position: absolute;
    top: 445px;
    left: 232px;
}

.pop-lottery-hero:nth-child(11) {
    position: absolute;
    top: 445px;
    left: 385px;
}

.hero-front {
    position: absolute;
    backface-visibility: hidden;
    transform: rotateY(180deg);
}

.hero-front .pop-lottery-hero-img {
    width: 100%;
    height: 100%;
}

.hero-front.active2::after {
    position: absolute;
    content: "";
    background: url(../images/star-hero-light.png) no-repeat;
    background-size: 100%;
    width: 108%;
    height: 108%;
    top: -9px;
    left: -6px;
}

.hero-front.active4::after {
    position: absolute;
    content: "";
    background: url(../images/sun-hero-light.png) no-repeat;
    background-size: 100%;
    width: 115%;
    height: 109%;
    top: -12px;
    left: -10px;
}

.hero-back {
    position: absolute;
    backface-visibility: hidden;
    z-index: 2;
}

.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: 289px;
    height: 73px;
    top: 800px;
    left: 58px;
}

.plus-btn {
    position: absolute;
    background-size: 100%;
    width: 130px;
    height: 136px;
    left: -53px;
    top: -67px;
}

.pop-lottery-container .pop-lottery-ten-btn {
    position: absolute;
    background: url(../images/pop-lottery-ten-btn.png) no-repeat;
    background-size: 100%;
    width: 288px;
    height: 73px;
    top: 800px;
    left: 360px;
}

.pop-poker-lottery .dia-close {
    left: 660px;
    top: 0;
}

@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);
    }
}

/* 抽奖动画弹窗 */
.pop-lottery-animate-bg {
    width: 720px;
    height: 1280px;
    animation: lotteryAnimate 1500ms infinite steps(1, end);
    animation-fill-mode: forwards;
}

.pic-pre {
    width: 0;
    height: 0;
    /* 图片预加载 */
    background: url(../images/lottery-animate-1.png),
        url(../images/lottery-animate-2.png),
        url(../images/lottery-animate-3.png),
        url(../images/lottery-animate-4.png),
        url(../images/lottery-animate-5.png),
        url(../images/lottery-animate-6.png),
        url(../images/lottery-animate-7.png),
        url(../images/lottery-animate-8.png),
        url(../images/lottery-animate-9.png),
        url(../images/lottery-animate-10.png),
        url(../images/lottery-animate-11.png),
        url(../images/lottery-animate-12.png),
        url(../images/lottery-animate-13.png);
}

@keyframes lotteryAnimate {
    0% {
        background: url(../images/lottery-animate-1.png);
    }

    7% {
        background: url(../images/lottery-animate-2.png);
    }

    15% {
        background: url(../images/lottery-animate-3.png);
    }

    23% {
        background: url(../images/lottery-animate-4.png);
    }

    31% {
        background: url(../images/lottery-animate-5.png);
    }

    46% {
        background: url(../images/lottery-animate-6.png);
    }

    54% {
        background: url(../images/lottery-animate-7.png);
    }

    62% {
        background: url(../images/lottery-animate-8.png);
    }

    70% {
        background: url(../images/lottery-animate-9.png);
    }

    77% {
        background: url(../images/lottery-animate-10.png);
    }

    85% {
        background: url(../images/lottery-animate-11.png);
    }

    92% {
        background: url(../images/lottery-animate-12.png);
    }

    100% {
        background: url(../images/lottery-animate-13.png);
    }
}

/* 抽奖五星武将弹窗 */
.pop-lottery-big-heros .pop-big-poker {
    position: relative;
    width: 720px;
    height: 100%;
}

.pop-big-poker .pop-pool-hero-img {
    width: 100%;
    height: 100%;
    animation-name: growBig;
    /*关键帧名称*/
    animation-timing-function: cubic-bezier(1, 0.8, 0.2);
    /*动画的速度曲线*/
    animation-iteration-count: infinite;
    /*动画播放的次数*/
    animation-duration: 1.85s;
    /*动画所花费的时间*/

}

@keyframes growBig {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }

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

/* 獎勵兌換自動觸發彈窗 */
.pop-award-auto .pop-award-content {
    position: relative;
    width: 640px;
    height: 913px;
    background: url(../images/pop-award-bg.png) no-repeat;
    background-size: 100%;
}

.pop-award-content .pop-award-type {
    position: absolute;
    width: 473px;
    height: 441px;
    top: 131px;
    left: -47px;
}

.pop-award-content .award-confirm-btn {
    position: absolute;
    background: url(../images/award-confirm-btn.png) no-repeat;
    background-size: 100%;
    width: 262px;
    height: 74px;
    top: 610px;
    left: 175px;
}

.pop-award-auto .dia-close {
    left: 600px;
    top: 0;
}

.award-container  .award-bg {
    background: url(../image/pop/award-bg.png) no-repeat;
    background-size: 100%;
    position: relative;
    width: 631px;
    height: 640px;
}

/* 抽卡说明弹窗 */
.pop-draw-description .pop-draw-description-k {
    width: 720px;
    height: 975px;
    margin: 0 auto;
    background: url(../images/pop-draw-description-bg.png) no-repeat;
    background-size: 100%;
    overflow: hidden;
}

.pop-draw-description-nei {
    width: 100%;
    margin-left: 60px;
    position: relative;
    overflow-y: scroll;
    top: 183px;
}

.pop-draw-description-k img {
    width: 599px;
}

.pop-draw-description .dia-close {
    top: -11px;
    left: 650px;
}

/* 老玩家回歸獎勵彈窗 */
.return-gift .pop-return-gift {
    width: 720px;
    height: 787px;
    margin: 0 auto;
    background: url("../images/pop-return-gift-bg.png") no-repeat;
    background-size: 100%;
}

.pop-return-gift .dia-close {
    top: 800px;
    left: 310px;
}

/* FB分享彈窗 */
.pop-fb-share .fb-share-pop {
    width: 720px;
    height: 426px;
    margin: 0 auto;
    background: url("../images/pop-fb-share-bg.png") no-repeat;
    background-size: 100%;
}

.pop-fb-share .fb-share-pop .lottery-share {
    position: absolute;
    top: 245px;
    left: 217px;
}

.pop-fb-share .dia-close {
    top: 460px;
    left: 310px;
}

/* 查询弹窗 */
.pop-query-k {
    width: 678px;
    height: 844px;
    background: url(../images/pop-query-bg.png) no-repeat;
    background-size: 100%;
    overflow: hidden;
    margin-top: 20px;
}

.pop-query-diamond {
    text-align: center;
    position: absolute;
    top: 94px;
    left: 530px;
}

.pop-query-diamond span {
    font-size: 55px;
    -webkit-text-size-adjust: none;
    font-weight: 700;
    margin-left: 10px;
    background-image: -webkit-linear-gradient(top, #FFF2EE, #FADC6D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pop-query-nei {
    width: 100%;
    margin-left: 25px;
    position: relative;
    overflow-y: scroll;
    height: 545px;
    top: 240px;
    overflow-x: hidden;
}

.query-info li {
    position: relative;
    line-height: 65px;
    margin-bottom: 20px;
    height: 58px;
    display: flex;
}

.query-info li .name {
    width: 240px;
    height: 65px;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #E9E8DC;
    margin-right: 10px;
    display: flex;
    border: 2px solid #F19E4D;
    justify-content: center;
    align-items: center;
    line-height: 25px;
    padding: 0 2%;
    color: #613316;
}

.query-info li .code {
    width: 160px;
    height: 65px;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 2px solid #F19E4D;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 25px;
    padding: 0 2%;
    background-color: #E9E8DC;
    color: #613316;
}

.query-info li .btn-copy {
    position: relative;
    margin-left: 10px;
    top: 3px;
}

.query-info li .btn-copy a {
    width: 157px;
    height: 63px;
    margin: auto;
    background: url(../images/pop-query-copy.png) no-repeat;
    background-size: 100%;
    display: block;
}

.pop-query .dia-close {
    top: 0;
    left: 650px;
}

/* 弹窗登录 */
.pop-login {
    width: 704px;
    height: 852px;
    background: url(../images/login-pop-bg.png) no-repeat;
    background-size: 100%;
}

.pop-login .step-info {
    position: relative;
    top: 245px;
    left: 50px;
}

.pop-login .step-info .order-select {
    width: 200px;
    height: 80px;
    margin-right: -3px;
    padding-left: 1%;
    display: inline-block;
    vertical-align: middle;
    background: #E7E3D7 url(../images/order-select.png) no-repeat 96% center;
    background-size: 32px 21px;
    border: 1px solid #9B7842;
    /* box-shadow: 0.03rem 0.03rem 0.03rem #babfd5 inset; */
    font-size: 24px;
    font-weight: 700;
    color: #513A32;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}

.pop-login .step-info .order-tel {
    width: 400px;
    height: 80px;
    /* margin-top: 0.12rem; */
    /* margin-left: 0.14rem; */
    background: #E7E3D7;
    vertical-align: bottom;
    border: 1px solid #9B7842;
    /* box-shadow: 0.03rem 0.03rem 0.03rem #babfd5 inset; */
    font-size: 22px;
    font-weight: 700;
    color: #513A32;
    text-align: center;
    text-align-last: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    margin-top: 4px;
}

.pop-login .step-info .order-tel.activeFalse {
    color: red;
    border: 1px solid red;
}

.pop-login .step-info .order-tel.activeTrue {
    color: green;
    border: 1px solid green;
}

.pop-login .pop-login-btn {
    position: absolute;
    width: 659px;
    height: 139px;
    top: 332px;
    left: 50px;
}

.pop-login-checkbox-wrapper {
    position: absolute;
    display: flex;
    top: 480px;
    left: 128px;
}

.pop-login-checkbox-wrapper .pop-login-checkbox {
    display: inline-block;
    width: 27px;
    height: 28px;
    background: url(../images/pop-login-checkbox.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
}

.pop-login-checkbox-wrapper .pop-login-checkbox:checked::after {
    content: '';
    display: inline-block;
    width: 29px;
    height: 35px;
    background: url(../images/pop-login-checkbox-active.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    left: 0px;
    top: -7px;
}

.pop-login-checkbox-wrapper .pop-login-checkbox-hint {
    display: inline-block;
    width: 461px;
    height: 27px;
    margin-left: 15px;
    margin-top: -1px;
}

.dia-close-login {
    width: 38px;
    height: 41px;
    position: absolute;
    top: 5px;
    left: 660px;
    background: url(../images/pop-close.png) no-repeat;
    background-size: 100%;
}

/* 过期 */
.login .order-info-overtime {
    background-image: url("../images/pop-login-bg-overtime.png");
}

.login .order-info .content {
    padding-top: 660px;
    position: relative;
}

.login .order-info .step {
    margin-left: 20px;
}

.login .order-info .step1 .step-info {
    margin-top: 19px;
    margin-left: 106px;
}

.pop-login .step .step-info {
    /* padding-left: 30px; */
    position: relative;
}

.pop-login .pop-store {
    font-size: 0;
    position: absolute;
    left: 206px;
    top: 659px;
}

.pop-login .pop-store>a {
    width: 300px;
    height: 95px;
    display: block;
}

.pop-login .pop-store>a.gp-order {
    background: url("../images/pop-login-gp.png") no-repeat;
}

.pop-login .pop-store>a.ios-order {
    background: url("../images/pop-login-ios.png") no-repeat;
}

/* 系統選擇 */
.pop-login .content .step1-os-radio {
    position: absolute;
    top: 135px;
    left: 116px;
    font-size: 30px;
    color: #fff;
}

.pop-login .step1-os-radio #osRadioIOS2 {
    margin-left: 60px;
}

.pop-login .step1-os-radio img {
    width: 40px;
}

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

.step1-os-radio .andriodLabel {
    margin-right: 60px;
}

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

.login .order-info .step .step-info .order-select {
    width: 188px;
    height: 66px;
    margin: 0 auto;
    /* display: inline-block; */
    margin: 0 auto;
    background: #fff url(../images/order-select.png) no-repeat 95% center;
    border: 1px solid #5065b2;
    /* box-shadow: 3px 3px 3px #babfd5 inset; */
    font-size: 22px;
    font-weight: 700;
    color: #454545;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    padding-left: 1%;
    box-sizing: border-box;
    position: absolute;
    line-height: 66px;
}

.login .order-info .step .step-info input {
    width: 270px;
    height: 66px;
    line-height: 66px;
    background: #fff;
    border: 1px solid #5065b2;
    /* box-shadow: 3px 3px 3px #babfd5 inset; */
    display: inline-block;
    margin: 0 auto;
    /* margin-top: 28px; */
    font-size: 22px;
    font-weight: 700;
    color: #454545;
    text-align: center;
    text-align-last: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0px;
    /* box-sizing: border-box; */
    position: absolute;
    left: 188px;

}

.login .order-info .step .step-info input::-webkit-input-placeholder {
    color: #565868;
}

.login .order-info .step .step-info input:-moz-placeholder {
    color: #565868;
}

.login .order-info .step .step-info input:-ms-input-placeholder {
    color: #565868;
}

.login .order-info .step .order-btn {
    /* margin-top: 35px; */
    /* position: relative;
    top: 80px; */
}

.login .order-info .step .order-btn .pop-btn-login {
    display: inline-block;
    position: relative;
    left: 92px;
    top: 130px;
}

.pop-login .step .step-fb {
    position: absolute;
    top: 423px;
    left: 384px;
    /* margin: 16px 0 65px 125px; */
    display: flex;
    height: 100px;
    justify-content: center;
    align-items: center;
}

.pop-login .step .step-fb a {
    display: inline-block;
    vertical-align: middle;
}

.pop-login .step .step-fb a .fb-like {
    margin: 0 90px;
    display: block;
    -webkit-transform: scale(2.143);
    -moz-transform: scale(2.143);
    -ms-transform: scale(2.143);
    -o-transform: scale(2.143);
    transform: scale(2.143);
    -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 .step-gift {
    position: absolute;
    top: 540px;
    left: 442px;
}

/* .login .order-info .step .order-btn .btn-query{
    margin-left: 265px;
    margin-top: 18px;
    display: inline-block;
}
.login .order-info .step .order-hint{
    width: 504px;
    margin: auto;
} */
.login .pop-login .dia-close {}

/* SDK登入彈窗 */
.pop-sdk-login .dialog {
    top: 34%;
}

.pop-sdk-login .pop-sdk-login-content {
    width: 720px;
    height: 1427px;
    background: url("../images/pop-sdk-login-bg.png") no-repeat;
    background-size: 100%;
}

.pop-sdk-login-content .pop-sdk-login-form {
    position: absolute;
    top: 842px;
    left: 72px;
}

.pop-sdk-login-content .pop-sdk-login-form input {
    width: 570px;
    height: 70px;
    background: #fff;
    border: 0 solid #ffffff;
    display: inline-block;
    margin: 0 auto;
    font-size: 30px;
    font-weight: 700;
    color: #454545;
    text-align: center;
    text-align-last: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    box-sizing: border-box;
    margin-left: 4px;
}

.pop-sdk-login-content .pop-sdk-login-form input.sdk-login-password {
    margin-top: 26px;
}

.pop-sdk-login-content .pop-sdk-login-form .pop-sdk-login-form-item {
    position: relative;
}

.pop-sdk-login-form .pop-sdk-login-form-item .sdk-login-error-info {
    position: absolute;
    width: 100%;
    color: #f56c6c;
    text-align: center;
    font-size: 14px;
}

.pop-sdk-login .pop-sdk-login-content .sdk-login-btn {
    position: absolute;
    top: 1027px;
    left: 116px;
}

.pop-sdk-login .pop-sdk-login-content .sdk-fb-login-btn {
    position: absolute;
    top: 1227px;
    left: 68px;
}

.pop-sdk-login .dia-close {
    top: 1396px;
    left: 308px;
}

/* 第一次注册分享facebook */
.fb-like-container .fb-like-inner {
    position: relative;
    width: 707px;
    height: 283px;
    background: url(../images/order-success.png);
    background-size: 100%;
}

.fb-like-container .dia-close {
    width: 144px;
    height: 124px;
    position: absolute;
    top: 282px;
    left: 278px;
    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: 200px;
    display: block;
    transform: scale(1.5);
}

/* 預訂成功彈窗 */
.res-success-container .pop-res-bg {
    position: relative;
    background: url(../images/res-success-bg.png) no-repeat;
    background-size: 100%;
    width: 654px;
    height: 815px;
    top: 0;
    left: 0;
}

.pop-res-success .pop-res-bg a {
    position: absolute;
    width: 318px;
    height: 88px;
    top: 654px;
    left: 169px;
}

.res-success-container .dia-close {
    top: 0;
    left: 630px;
}

/* 分享邀请链接 */
.share-code .pop-share-code-nei {
    width: 596px;
    height: 455px;
    background: url("../images/pop-share-bg.png") no-repeat;
    background-size: 100%;
    /* padding: 20px 0; */
    /* text-align: center; */
}

.pop-share-code-nei p {
    width: 300px;
    margin: auto;
    line-height: 50px;
    /* font-size: 28px; */
    color: #000;
    text-align: center;
    font-size: 0;
}

.share-code .code-btns {
    position: relative;
    display: flex;
    flex-direction: row;
    top: 100px;
    left: 156px;
}

.code-btns .line-btn {
    /* width: 2px; */
    display: inline-block;
    margin: 0 30px;
}

.code-btns .fb-btn {
    margin-left: 30px;
}

.code-btns .fb-btn a {
    /* display: block;
    width: 79px;
    height: 79px;
    margin-top: 215px;
    margin-left: -125px; */
}

.code-btns img {
    /* width: 117px; */
}

.pop-share-code .dia-close {
    top: -13px;
    left: 560px;

}

/* 弹窗活动结束 */
.over .over-content {
    font-size: 0;
    width: 720px;
    height: 858px;
    background: url(../image/pop/pop-over-bg.png) no-repeat;
    background-size: 100%;
    position: relative;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.over-gp {
    position: absolute;
    top: 638px;
    left: 380px;
    width: 293px;
    height: 80px;


}

.over-ios {
    position: absolute;
    top: 638px;
    left: 58px;
    width: 293px;
    height: 80px;
}

.over .over-content p {
    font-size: 0;
}

.over-content .over-query {
    position: absolute;
    top: 785px;
    left: 238px;
}

.over .dia-close {
    top: 38px;
    left: 657px;
}

.over-content2 {
    width: 720px;
    height: 900px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -75%);
    z-index: 1005 !important;
}

.over-content2 .ov2-header {
    width: 720px;
    height: 850px;
    top: 0;
    left: 0;
    position: absolute;
    background: url(../image/pop-over-bg2.png) no-repeat;
    background-size: 100%;

}

.over-content2 .ov2-con {
    width: 676px;
    height: 732px;
    top: 625px;
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
    background: url(../image/pop-jiesu.png) no-repeat;
    background-size: 100%;
}

.ov2-con .ov2-btn {
    width: 184px;
    height: 71px;
    background: url(../image/pop/btn-Privacy.png) no-repeat;
    background-size: 100%;
    margin: 86px a279 0;
    cursor: poin6er;
}

.over-content2 .ov2-con .ov2-scorll {
    width: 80%;
    margin: 24px auto 0;
    padding-right: 60px;
    height: 497px;
    overflow-y: auto;
    overflow-x: hidden;
}

.ov2-con .ov2-scorll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.overbg .overbg-content {
    font-size: 0rem;
    width: 650px;
    height: 735px;
    background: url(../image/overbg-content.png) no-repeat;
    background-size: 100%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.overbg-ios {
    width: 287px;
    height: 86px;
    position: absolute;
    top: 550px;
    left: 50%;
    margin-left: -143.5px;
}

.overbg-gp {
    width: 287px;
    height: 86px;
    position: absolute;
    top: 550px;
    left: 50%;
    margin-left: -143.5px;
}

.overbg-cloce {
    width: 17px;
    height: 17px;
    position: absolute;
    top: 30px;
    right: 30px;
    background: url('../image/pop/appointment-close.png') no-repeat;
    background-size: 1008;
}

.down-container .down-content {
    width: 628px;
    height: 451px;
    background: url(../image/pop/down-content.png) no-repeat;
    background-size: 100%;
    position: relative;
}
/* .down-container .down-content::after{
  content: '';
  width: 687px;
  height: 446px;
  background: url(../image/pop/formal-content.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 80px;
  left: 30px;
}
.down-container .down-content::before{
  content: '';
  width: 700px;
  height: 600px;
  background: url(../image/pop/downbgi.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: -60px;
  left: 10px;
} */
.down-container .btn,
.formal-container .btn {
    width: 286px;
    height: 55px;
    background: url(../image/pop/down-btn.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 0px;
    right: 0;
    top: 485px;
    margin: auto;
}
.formal-container .formal-content {
    width: 628px;
    height: 451px;
    background: url(../image/pop/formal-content.png) no-repeat;
    background-size: 100%;
    position: relative;
}
/* .formal-container .formal-content::after{
  content: '';
  width: 687px;
  height: 447px;
  background: url(../image/pop/down-content.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 80px;
  left: 30px;
}
.formal-container .formal-content::before{
  content: '';
  width: 700px;
  height: 600px;
  background: url(../image/pop/downbgi.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: -60px;
  left: 10px;
} */

/* 滚动条滑块 */
.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: 300px;
}

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

.ov2-scorll .list .item {
    color: #fff;
    height: 60px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 230px;
}

.ov2-scorll .list .item .item-text {
    overflow: hidden;
    text-align: center;
    width: 100px;
    margin-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.ov2-scorll .list .item .item-copy {
    text-decoration: underline;
    cursor: pointer;
}

.ov2-scorll .appoin-tit1 {
    margin: 0 auto 15px;
    width: 269px;
    height: 34px;
    background: url('../image/appoin/title-yy1.png');
    background-size: 100%;
}

.ov2-scorll .appoin-tit2 {
    margin: 24px auto 15px;
    width: 269px;
    height: 34px;
    background: url('../image/appoin/title-yy2.png');
    background-size: 100%;
}

.ov2-scorll .appoin-tit3 {
    margin: 24px auto 15px;
    width: 269px;
    height: 34px;
    background: url('../image/appoin/title-yy3.png');
    background-size: 100%;
}

.ov2-scorll .appoin-tit4 {
    margin: 24px auto 15px;
    width: 269px;
    height: 34px;
    background: url('../image/appoin/title-yy4.png');
    background-size: 100%;
}

.ov2-scorll .appoin-tit5 {
    margin: 24px auto 15px;
    width: 269px;
    height: 34px;
    background: url('../image/appoin/title-yy5.png');
    background-size: 100%;
}

.ov2-scorll .list.list1 {
    margin: 0 auto;
    width: 574px;
    height: 60px;
    background: url('../image/appoin/bg-yy1.png');
    background-size: 100%;
}

.ov2-scorll .list.list2 {
    margin: 0 auto;
    width: 574px;
    height: 211px;
}

.list2-aos {
    background: url('../image/appoin/bg-yy2-aos.png');
    background-size: 100%;
}

/* .list2-ios{
    background:url('../image/appoin/bg-yy2.png');
    background-size: 100%;
} */
.ov2-scorll .list.list3 {
    margin: 0 auto;
    width: 574px;
    height: 60px;
    background: url('../image/appoin/bg-yy3.png');
    background-size: 100%;
}

.ov2-scorll .list.list4 {
    margin: 0 auto;
    width: 574px;
    height: 60px;
    background: url('../image/appoin/bg-yy4.png');
    background-size: 100%;
}

.ov2-scorll .list.list5 {
    margin: 0 auto;
    width: 574px;
    height: 256px;
    background: url('../image/appoin/bg-yy5.png');
    background-size: 100%;
}

.ov2-scorll .list .item .list2 .item {
    margin-bottom: 5px;
}

/* 女神彈窗 */
.pop-goddesses .pop-goddesses-bg {
    width: 586px;
    height: 368px;
    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: 415px;
    left: 263px;
}

/* 武器彈窗 */
.pop-weapons-container .pop-weapons {
    width: 600px;
    height: 501px;
    background: url(../images/pop-weapons-bg.png) no-repeat;
    background-size: 100%;
    position: relative;
}

.pop-weapons-container .pop-weapons .pop-weapons-pic {
    position: absolute;
    top: 83px;
    left: 99px;
}

.pop-weapons-container .weapons-query-btn {
    width: 173px;
    height: 55px;
    position: absolute;
    background: url(../images/weapons-query-btn.png) no-repeat;
    background-size: 100%;
    top: 370px;
    left: 66px;
}

.pop-weapons-container .weapons-query-btn-close {
    width: 173px;
    height: 55px;
    position: absolute;
    background: url(../images/weapons-query-btn-close.png) no-repeat;
    background-size: 100%;
    top: 370px;
    left: 370px;
}

.pop-weapons-container .dia-close {
    top: 0px;
    left: 562px;
}

/* 選角失敗提示彈窗 */
.pop-weapons-fail .pop-weapons-fail-bg {
    width: 592px;
    height: 463px;
    background: url(../images/pop-weapons-fail-bg.png) no-repeat;
    background-size: 100%;
    position: relative;
}

.pop-weapons-fail-bg .weapons-fail-btn {
    position: absolute;
    width: 272px;
    height: 52px;
    background: url(../images/weapons-fail-btn.png) no-repeat;
    background-size: 100%;
    top: 325px;
    left: 164px;
}

.pop-weapons-fail-bg .dia-close {
    top: -10px;
    left: 554px;
}

/* line複製成功彈窗 */
.pop-line .pop-line-bg {
    width: 593px;
    height: 457px;
    background: url("../images/pop-line-bg.png") no-repeat;
    background-size: 100%;
}

.pop-line .pop-line-share {
    position: absolute;
    top: 225px;
    left: 180px;
}

.pop-line .pop-team-share-fb {
    position: absolute;
    top: 225px;
    left: 320px;
}

.pop-line .dia-close {
    top: 3px;
    left: 555px;
}

.pop-line-2 .pop-line-bg {
    width: 613px;
    height: 301px;
    background: url("../images/pop-line-bg-2.png") no-repeat;
    background-size: 100%;
}

.pop-line-2 .pop-line-2-share {
    position: absolute;
    top: 176px;
    left: 258px;
}

.pop-line-2 .dia-close {
    top: 340px;
    left: 270px;
}

/* 授权彈窗 */
.pop-authorize-fail .pop-authorize-fail-bg {
    position: relative;
    width: 575px;
    height: 350px;
    background: url(../images/pop-authorize-fail-bg.png) no-repeat;
    background-size: 100%;
}

.pop-authorize-fail-bg .authorize-confirm-btn {
    position: absolute;
    width: 197px;
    height: 55px;
    background: url(../images/authorize-confirm-btn.png) no-repeat;
    background-size: 100%;
    top: 260px;
    left: 80px;
}

.pop-authorize-fail-bg .authorize-cancel-btn {
    position: absolute;
    width: 197px;
    height: 55px;
    background: url(../images/authorize-cancel-btn.png) no-repeat;
    background-size: 100%;
    top: 260px;
    left: 300px;
}

/* 活动规则弹窗 */
.activity-rules .rules-bg {
    position: relative;
    width: 631px;
    height: 640px;
    background: url(../image/pop/activity-rules.png) no-repeat;
    background-size: 100%;
}

.play-close {
    width: 16px;
    height: 16px;
    background: url('../image/pop/appointment-close.png')no-repeat;
    background-size: 100%;
    position: absol8te;
    top: 20px;
    right: 20px;
}

/* 創建同盟彈窗 */
.pop-create-team-bg {
    position: relative;
    width: 604px;
    height: 605px;
    background: url(../images/pop-create-team-bg.png) no-repeat;
    background-size: 100%;
}

/* WebKit browsers */
.pop-team-create-form input::-webkit-input-placeholder {
    color: #494949;
}

/* Mozilla Firefox 4 to 18 */
.pop-team-create-form input:-moz-placeholder {
    color: #494949;
}

/* Mozilla Firefox 19+ */
.pop-team-create-form input::-moz-placeholder {
    color: #494949;
}

/* Internet Explorer 10+ */
.pop-team-create-form input:-ms-input-placeholder {
    color: #494949;
}

.pop-team-create-form .pop-team-create-input.pop-team-create-name {
    position: absolute;
    width: 420px;
    height: 45px;
    border: 1px solid #7C6145;
    font-size: 20px;
    color: #604E3B;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    top: 153px;
    left: 140px;
    text-align: center;
    background-color: #AD9677;
}

.pop-team-create-form .pop-team-create-input.pop-team-create-tenet {
    position: absolute;
    width: 389px;
    height: 45px;
    border: 1px solid #7C6145;
    font-size: 20px;
    color: #604E3B;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    top: 215px;
    left: 171px;
    text-align: center;
    background-color: #AD9677;
}

.pop-team-create-form .pop-team-create-input.pop-team-create-line {
    position: absolute;
    width: 356px;
    height: 45px;
    border: 1px solid #7C6145;
    font-size: 20px;
    color: #604E3B;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    top: 278px;
    left: 205px;
    text-align: center;
    background-color: #AD9677;
}

.pop-create-team-bg .pop-team-create-flag {
    position: relative;
    top: 350px;
    left: 140px;
}

.pop-create-team-bg .pop-team-create-flag li:nth-child(1) {
    width: 105px;
    height: 130px;
    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: 114px;
    height: 139px;
    background: url(../images/flag-1-active.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: -5px;
}

.pop-create-team-bg .pop-team-create-flag li:nth-child(2) {
    width: 105px;
    height: 130px;
    background: url(../images/flag-2.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 80px;
}

.pop-create-team-bg .pop-team-create-flag li:nth-child(2).active {
    width: 114px;
    height: 139px;
    background: url(../images/flag-2-active.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 76px;
}

.pop-create-team-bg .pop-team-create-flag li:nth-child(3) {
    width: 105px;
    height: 130px;
    background: url(../images/flag-3.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 160px;
}

.pop-create-team-bg .pop-team-create-flag li:nth-child(3).active {
    width: 114px;
    height: 139px;
    background: url(../images/flag-3-active.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 156px;
}

.pop-create-team-bg .pop-team-create-flag li:nth-child(4) {
    width: 105px;
    height: 130px;
    background: url(../images/flag-4.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 240px;
}

.pop-create-team-bg .pop-team-create-flag li:nth-child(4).active {
    width: 114px;
    height: 139px;
    background: url(../images/flag-4-active.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 236px;
}

.pop-create-team-bg .pop-team-create-flag li:nth-child(5) {
    width: 105px;
    height: 130px;
    background: url(../images/flag-5.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 320px;
}

.pop-create-team-bg .pop-team-create-flag li:nth-child(5).active {
    width: 114px;
    height: 139px;
    background: url(../images/flag-5-active.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 316px;
}

.pop-team-create-btn {
    position: absolute;
    width: 231px;
    height: 59px;
    top: 510px;
    left: 188px;
    background: url(../images/pop-team-create-btn.png) no-repeat;
    background-size: 100%;
}

.pop-create-team .dia-close {
    top: -10px;
    left: 600px;
}

/* 積分詳情弹窗 */
.pop-integral-detail .pop-integral-content {
    position: relative;
    width: 598px;
    height: 386px;
    background: url(../images/pop-integral-detail-bg.png) no-repeat;
    background-size: 100%;
    font-size: 50px;
    font-weight: 700;
}

.pop-integral-content .pop-integral-flag {
    position: absolute;
    width: 135px;
    height: 176px;
    top: 120px;
    left: 60px;
}

.pop-integral-content>span {
    position: absolute;
    width: 150px;
    text-align: center;
    color: #F3D7A5;
}

.pop-integral-content .pop-integral-poker_point {
    top: 182px;
    left: 235px;
}

.pop-integral-content .pop-integral-poker_sum {
    left: 405px;
    top: 182px;
}

.pop-integral-content .pop-integral-team_name {
    position: absolute;
    font-size: 24px;
    font-weight: 100;
    width: 140px;
    text-align: center;
    color: #FFEAC4;
    top: 300px;
    left: 57px;
}

.pop-integral-content .pop-integral-detail-btn {
    position: absolute;
    width: 135px;
    height: 53px;
    top: 285px;
    left: 200px;
    background: url(../images/integral-detail-btn.png) no-repeat;
    background-size: 100%;
}

.pop-integral-content .pop-integral-instant-btn {
    position: absolute;
    width: 219px;
    height: 53px;
    top: 285px;
    left: 350px;
    background: url(../images/integral-instant-btn.png) no-repeat;
    background-size: 100%;
}

.pop-integral-detail .dia-close {
    left: 600px;
    top: -10px;
}

/* 更换同盟弹窗 */
.pop-change-team .pop-change-team-bg {
    position: relative;
    width: 614px;
    height: 429px;
    background: url(../images/pop-change-team-bg.png) no-repeat;
    background-size: 100%;
}

.pop-team-confirm {
    position: absolute;
    width: 219px;
    height: 74px;
    background: url(../images/pop-team-confirm.png) no-repeat;
    top: 310px;
    left: 71px;
    background-size: 100%;
}

.pop-team-cancel {
    position: absolute;
    width: 219px;
    height: 74px;
    background: url(../images/pop-team-cancel.png) no-repeat;
    background-size: 100%;
    left: 320px;
    top: 310px;
}

.pop-change-team .dia-close {
    left: 600px;
    top: 0;
}

/* 加入同盟弹窗 */
.pop-join-team .pop-join-team-bg {
    position: relative;
    width: 611px;
    height: 412px;
    background: url(../images/pop-join-team-bg.png) no-repeat;
    background-size: 100%;
}

.pop-join-team .dia-close {
    left: 600px;
    top: 0;
}

/* 同盟詳情加入彈窗 */
.pop-team-detail .pop-team-content {
    width: 679px;
    height: 706px;
    background: url(../images/pop-team-detail-bg.png) no-repeat;
    background-size: 100%;
    position: relative;
    color: rgba(255, 255, 255, .8);
    font-size: 25px;
}

.pop-team-content .pop-team-content-img {
    position: absolute;
    width: 231px;
    height: 298px;
    top: 220px;
    left: 50px;
}

.pop-team-content>span {
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pop-team-content .pop-detail-text {
    position: absolute;
    left: 310px;
    top: 235px;
    color: #FFEAC4;
    line-height: 55px;
}

.pop-team-content .pop-detail-num {
    left: 430px;
    top: 241px;
    width: 230px;
    color: #FFEAC4;
}

.pop-team-content .pop-detail-team_name {
    left: 430px;
    color: #FFEAC4;
    top: 296px;
    width: 230px;
}

.pop-team-content .pop-detail-tenet {
    color: #FFEAC4;
    top: 351px;
    left: 430px;
    width: 230px;
}

.pop-team-content .pop-detail-poker_point {
    left: 480px;
    color: #FFEAC4;
    top: 406px;
    width: 180px;
}

.pop-team-content .pop-detail-line {
    color: #FFEAC4;
    left: 458px;
    top: 461px;
    width: 209px;
}

.pop-team-detail .pop-team-content .team-join-btn {
    position: absolute;
    top: 580px;
    left: 65px;
    width: 264px;
}

.pop-team-detail .pop-team-content .team-share-btn {
    position: absolute;
    top: 580px;
    left: 65px;
    width: 264px;
}

.pop-team-detail .pop-team-content .team-line-btn {
    position: absolute;
    top: 580px;
    left: 347px;
    width: 264px;
}

.pop-team-detail .dia-close {
    left: 630px;
    top: 0px;
}

/* 推薦彈窗 */
.pop-recommend .pop-recommend-content {
    width: 563px;
    height: 360px;
    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: 38px;
    top: 80px;
    left: 214px;
}

.pop-recommend-content .pop-recommend-btn {
    position: absolute;
    top: 224px;
    left: 130px;
}

/* 弹窗注销 */
.logout-container .pop-logout {
    width: 656px;
    height: 262px;
    background: url(../images/logout-bg.png) no-repeat;
    background-size: 100%;
}

.pop-logout .logout-inner #logout {
    display: block;
    width: 337px;
    margin: auto;
    margin-top: 138px;
}

.logout-container .pop-logout .dia-close {
    top: 300px;
    left: 282px;
}

/* 缩放特效 */
.zoom {
    -webkit-animation: pulse 1s infinite;
    -o-animation: pulse 1s infinite;
    animation: pulse 1s infinite;
}

.zoom-reverse {
    -webkit-animation: pulse-reverse 1s infinite;
    -o-animation: pulse-reverse 1s infinite;
    animation: pulse-reverse 1s infinite;
}

/*  陣營展示彈窗  */

.pop-camp-recommend .dia-close {
    left: 632px;
    top: 169px;
}


/* fb点赞弹窗 */
.pop-fb-like-bg {
    position: relative;
    background: url(../images/like-bg.png) no-repeat;
    background-size: 100%;
    width: 711px;
    height: 746px;
    left: 6px;
}

.pop-fb-like .step-fb {
    position: absolute;
    top: 390px;
}

.pop-fb-like .step-fb::after {
    content: '';
    display: inline-block;
    width: 49px;
    height: 50px;
    background: url(../images/fb-like-hand.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: 41px;
    left: 140px;
    -webkit-animation: fblike 1s ease-in-out infinite;
    animation: fblike 1s ease-in-out infinite;
}

.pop-fb-like .step-fb::before {
    content: '';
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url(../image/fb-like-red.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: -24px;
    left: 190px;
    z-index: 1;
}

.pop-fb-like .discuss-fb {
    position: relative;
    background: url(../images/discuss-fb.png) no-repeat;
    background-size: 100%;
    width: 281px;
    height: 76px;
    top: 585px;
    left: 67px;
}

.pop-fb-like .discuss-fb a {
    position: absolute;
    width: 281px;
    height: 76px;
}

.pop-fb-like .step-fb a .fb-like {
    margin: 0 90px;
    display: block;
    -webkit-transform: scale(2.143);
    -moz-transform: scale(2.143);
    -ms-transform: scale(2.143);
    -o-transform: scale(2.143);
    transform: scale(2.143);
    -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: 666px;
    top: -33px;
}

#introduce .poker-hand {
    width: 133px;
    height: 114px;
    position: absolute;
    right: 100px;
    top: 700px;
    background: url(../image/poker-hand.png) no-repeat;
    background-size: 100%;
    z-index: 2;
}
.slidebar-ios .nav-ios{
    width: 720px;
    height: 149px;
    background: url('../image/pop/nav-ios-bg.png') no-repeat;
    background-size: 100%;
    position: fixed;
    bottom: 0;
    /* display: flex;
    align-items: center; */

}
.slidebar-ios .nav-gp{
    width: 720px;
    height: 149px;
    background: url('../image/pop/nav-ios-bg.png') no-repeat;
    background-size: 100%;
    position: fixed;
    bottom: 0;
    /* display: flex;
    align-items: center; */

}
.bottom-btn-aos{
    width: 236px;
    height: 71px;
    background: url('../image/pop/fixed-bottom-aos.png') no-repeat;
    background-size: 100%;
    position: absolute;
    left: 440px;
    top: 72px;
    margin-left: 25px;
}

.down .bottom-btn-aos {
  background: url('../image/pop/fixed-bottom-aos-down.png') no-repeat;
}

.down .bottom-btn-ios {
  background: url('../image/pop/fixed-bottom-ios-down.png') no-repeat;  
}

.bottom-btn-czs{
    width: 241px;
    height: 59px;
    background: url('../image/pop/fixed-bottom-czs.png') no-repeat;
    background-size: 100%;
    position: absolute;
    left: 450px;
    top: 110px;
    /* margin-left: 25px; */
}
.nav-ios a span {
    display: inline-block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
.nav-gp a span {
    display: inline-block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
.light-animation {
    animation: sg 2s linear infinite;
    background: linear-gradient(120deg, #0000, #0000, #fff7, #0000, #0000);
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: all .65s;
    width: 100%;
    pointer-events: none;
}
.bottom-btn-ios{
    width: 236px;
    height: 71px;
    background: url('../image/pop/fixed-bottom-ios.png') no-repeat;
    background-size: 100%;
    position: absolute;
    left: 440px;
    top: 72px;
    margin-left: 25px;
}
.bottom-btn-lounge{
    width: 152px;
    height: 51px;
    background: url('../image/pop/bottom-btn-lounge.png') no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 95px;
    margin-left: 200px;
}
.bottom-store-linght {
    position: absolute;
    top: 2px;
    left: -100%;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: url(../image/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;
    border-radius: 50%;
}
.appointment-login .logo-close {
    width: 25px;
    height: 23px;
    background: url(../image/pop/big_close.png) no-repeat;
    background-size: 100%;
    left: initial;
    right: 27px;
    top: 380px;
}

/* 答题完成 */
.finish-hint .finish-content {
    background: url(../image/pop/hint-bg.png) no-repeat;
    background-size: 100%;
    width: 691px;
    height: 392px;
}

.finish-hint .confirm-btn {
    position: absolute;
    width: 225px;
    height: 84px;
    left: 230px;
    top: 255px;
    background: url(../image/pop/pop-btn-close.png) no-repeat;
    background-size: 100%;
}

.finish-hint .dia-close {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 25px;
    left: 625px;
    background: url(../image/pop/pop-close.png) no-repeat;
    background-size: 100%;
}
.bottom .fixed-footer-wrapper{
    width:720px;
    height: 156px;
    bottom: 0;
    background-size: 100%;
    transition: background 0.3s;
    background: url(../image/pop/fixed-footer-bg0.png) no-repeat;
}

.bottom .fixed-footer-wrapper .bottom-btn-ios span,
.bottom .fixed-footer-wrapper .bottom-btn-aos  span {
    font-size: 0;
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8%;
    isolation: isolate;
}
/* .bottom .fixed-footer-wrapper .bottom-btn-czs span {
    font-size: 0;
    position: absolute;
    left: 25px;
    width: 190px;
    height: 100%;
    overflow: hidden;
    border-radius: 8%;
    isolation: isolate;
} */
/* 活动答题成功 */
.answer-after-container  .answer-after-bg {
    background: url(../image/pop/answer-true-bg.png) no-repeat;
    background-size: 100%;
    position: relative;
    width: 666px;
    height: 425px;
}
.answer-after-container .answer-after-bg .answer-confirm {
    position: absolute;
    background: url(../image/pop/answer-true-btn.png) no-repeat;
    background-size: 100%;
    width: 346px;
    height: 71px;
    bottom: -108px;
    margin: 0 auto;
    left: 0;
    right: 0;
}
/* 活动答题失败 */
.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: 666px;
    height: 425px;
    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: 346px;
    height: 71px;
    bottom: -108px;
    margin: 0 auto;
    left: 0;
    right: 0;
}

/* .title-bg-animate::before {
    content: '';
    width: 720px;
    height: 250px;
    background: url(../image/title-bg.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
} */


/* 没选满弹窗 */
.no-select-content {
  width: 656px;
  height: 383px;
  background: url(../image/pop/no-select-bg.png) no-repeat;
  background-size: 100%;
  /* top: 43%; */
}

.no-select-btn {
  width: 259px;
  height: 79px;
  background: url(../image/pop/no-select-btn.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 225px;
  left: 200px;
  cursor: pointer;
}

.no-select-content .dia-close {
  top: 23px;
}

.result-content {
  width: 392px;
  height: 973px;
  background: url(../image/pop/result-content.png) no-repeat;
  background-repeat: no-repeat;
  background-size: 100%;
}

.result-content .card-btn {
  width: 368px;
  height: 111px;
  background: url(../image/section3/card-btn.png) no-repeat;
  background-repeat: no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  top: 800px;
  left: 11px;
  }

.equipment-android .pager2-order-bg,
.equipment-ios .pager2-order-bg {
  width: 540px;
  height: 330px;
  background: none;
  position: absolute;
  top: 214px;
  left: 5px;
  z-index: 5;
}

.equipment-android .pager2-order-bg .order-bg-i,
.equipment-ios .pager2-order-bg .order-bg-i{
  width: 100%;
  height: 100%;
  background:none;
  /* background-color: #000; */
  background-size: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

.equipment-ios .pager2-order-bg .order-bg-i{
  /* background-color: #000; */
  background:none;
}