@charset "utf-8";
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu {
    margin: 0;
    padding: 0
}
* {
    outline: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-focus-ring-color: rgba(0,0,0,0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}
body {
    padding: 0;
    margin: 0;
    background: #fff;
    overflow-x: hidden;
    /*font: 16px/1.8 "Microsoft Yahei", Verdana, Arial, Helvetica, sans-serif;*/
    font: 16px/1.8 "黑体";

    /*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
}
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
}
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);
    }
} 
.container{
    width: 720px;
    height: 100%;
    margin: auto;
    /*position: absolute;*/
    /*left: 50%;*/
    /*-webkit-transform: translateX(-50%);*/
    /*-moz-transform: translateX(-50%);*/
    /*-ms-transform: translateX(-50%);*/
    /*-o-transform: translateX(-50%);*/
    /*transform: translateX(-50%);*/
    overflow: hidden;
}
.wrap{
    width: 100%;
    background: url("../images/bg.jpg") no-repeat center top;
}
/* 二级页面背景 */
.role-page-bg {
    background-image: url("../images/role-page-bg.jpg");
}
/*菜单栏*/
.header{
    width: 720px;
    height: 128px;
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -360px;
    background: url("../images/header-bg.png");
    background-size: 100%;
    overflow: hidden;
    z-index: 99;
}
.header nav{
    font-size: 0;
    text-align: center;
    padding-left: 275px;
}
.header nav a{
    width: 210px;
    position: relative;
    line-height: 96px;
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    float: left;
}
.header nav a:nth-of-type(2) {
    width: 220px;
}
.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;
}
/*第一屏*/
.topic{
    width: 100%;
    height: 1270px;
    position: relative;
    /* overflow: hidden; */
}
.topic .logo{
    position: absolute;
    top: 0px;
    left: 0px;
}
/*.topic .btn-audio{*/
    /*width: 108px;*/
    /*height: 108px;*/
    /*position: absolute;*/
    /*top: 8px;*/
    /*right: 5px;*/
    /*background: url("../images/audio-on.png") no-repeat;*/
    /*background-size: 100%;*/
/*}*/
/*.topic .btn-audio.off{*/
    /*background: url("../images/audio-off.png") no-repeat;*/
    /*background-size: 100%;*/
/*}*/
.topic .slogan{
    position: absolute;
    top: 620px;
    left: 15px;
}
.topic .btn-video{
    position: absolute;
    top: 2px;
    left: 264px;
    z-index: 2;
}
.topic .order-count{
    width: 720px;
    height: 480px;
    position: relative;
    top: 140px;
    /* background: url("../images/order-slogan.png") no-repeat; */
}
.topic .order-count .count{
    width: 720px;
    height: 164px;
    position: relative;
    top: 156px;
    left: 0px;
    background: url(../images/order-count-bg.png) no-repeat;
}
.topic .order-count .count span{
    width: 196px;
    height: 50px;
    position: absolute;
    top: 56px;
    left: 164px;
    line-height: 1;
    font-size: 56px;
    font-weight: 700;
    color: #c53f30;
    letter-spacing: 2px;
    text-align: center;
}
.topic .order-count {
    display: inline-block;
}
.topic .order-link-btns {
    font-size: 0;
    display: inline-block;
    position: relative;
}
.topic .order-link-btns a {
    position: absolute;
    width: 90px;
    height: 90px;
    background-size: 100%;
    /* top: 1214px; */
}
.topic .order-link-btns a:nth-of-type(1) {
    background: url(../images/order-home-btn.png) no-repeat;
    left: 12px;
}
.topic .order-link-btns a:nth-of-type(2) {
    background: url(../images/order-fans-btn.png) no-repeat;
    left: 12px;
    top: 92px;
}
.topic .btn-order{
    position: absolute;
    top: 950px;
    left: 36px;
    z-index: 1;
}
.topic .btn-order-overtime {
    left: 80px;
}
.topic .btn-web{
    width: 138px;
    position: absolute;
    top: 1120px;
    left: 445px;
}
.title{
    overflow: hidden;
}
.lottery .title,.role .title,.task .title{
    text-align: center;
}
/* 六大福利情報 */
.fuli-info {
    position: relative;
    height: 890px;
}
.fuli-info .fuli-info-wrapper {
    width: 720px;
    height: 729px;
    background: url(../images/fuli-info-wrapper.png) no-repeat;
    background-size: 100%;
    margin: 0 auto;
    position: relative;
    top: -70px;
}
/*事前登录*/
.order{
    padding-bottom: 120px;
    font-size: 0;
    position: relative;
}
.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: 698px;
    height: 785px;
    margin:  0 auto;
    position: relative;
    background: url("../images/order-bg.png") no-repeat;
    background-size: 100%;
}
.order-info.order-info-overtime {
    background-image: url("../images/order-bg-overtime.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: 244px;
    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: 66px;
}
.order-info .step .step-fb{
    position: absolute;
    top: 460px;
    left: 384px;
    /* margin: 16px 0 65px 125px; */
    display: flex;
    height: 100px;
    justify-content: center;
    align-items: center;
}
.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: 6px; */
}

/* 系統選擇 */
.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: 174px;
    height: 67px;
    margin: 0 auto;
    /* display: inline-block; */
    margin: 0 auto;
    background: #fff url(../images/order-select.png) no-repeat 95% center;
    border: 0 solid #ffffff;
    /* 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;
}
.order-info .step .step-info input{
    width: 386px;
    height: 64px;
    background: #fff;
    border: 0 solid #ffffff;
    /* 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: 0;
    box-sizing: border-box;
    margin-left: 4px;
}
.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: 16px;
    position: relative;
}
.order-info .step .order-btn .btn-login{
    display: inline-block;
    position: relative;
    left: -8px;
}
.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: 590px;
    left: 442px;
}
.order-info .step-gift .step-gift-btn {
    position: absolute;
    width: 200px;
    height: 71px;
    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");
}

/* 扭蛋抽獎 */
.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;
}

/*抽奖*/
.lottery{
    overflow: hidden;
    font-size: 0;
    margin-bottom: 133px;
    margin-top: 316px;
}
#lottery{
    width: 720px;
    height: 920px;
    margin: 0 auto;
    background: url("../images/lottery-bg.png") no-repeat;
    background-size: 100%;
    box-sizing: border-box;
    font-size: 0px;
    position: relative;
    top: -45px;
}
#lottery ul{
    width: 100%;
    text-align: center;
    position: relative;
}
#lottery ul li{
    width: 210px;
    height: 226px;
    /* position: relative;
    display: inline-block; */
    position: absolute;
}
#lottery ul li.active .lottery-cur{
    width: 211px;
    height: 230px;
    position: absolute;
    left: 0;
    top: 0;
    background: url("../images/lottery-cur.png") no-repeat;
    background-size: 100%;
}
#lottery ul li.active .lottery-cur-1 {
    width: 202px;
    height: 338px;
    top: -28px;
    left: -14px;
    background-image: url("../images/lottery-cur-1.png");
}
#lottery ul li.active .lottery-cur-2 {
    width: 321px;
    height: 275px;
    top: -38px;
    left: -118px;
    background-image: url("../images/lottery-cur-2.png");
}
#lottery ul li.active .lottery-cur-3 {
    width: 337px;
    height: 211px;
    background-image: url("../images/lottery-cur-3.png");
    left: -180px;
    top: -30px;
}
#lottery ul li.active .lottery-cur-4 {
    width: 322px;
    height: 275px;
    background-image: url("../images/lottery-cur-4.png");
    left: -134px;
    top: -79px;
}
#lottery ul li.active .lottery-cur-5 {
    width: 202px;
    height: 338px;
    background-image: url("../images/lottery-cur-5.png");
    left: -19px;
    top: -154px;
}
#lottery ul li.active .lottery-cur-6 {
    width: 203px;
    height: 338px;
    background-image: url("../images/lottery-cur-6.png");
    left: -52px;
    top: -142px;
}
#lottery ul li.active .lottery-cur-7 {
    width: 324px;
    height: 276px;
    background-image: url("../images/lottery-cur-7.png");
    left: -56px;
    top: -83px;
}
#lottery ul li.active .lottery-cur-8 {
    width: 339px;
    height: 213px;
    background-image: url("../images/lottery-cur-8.png");
    left: -32px;
    top: -53px;
}
#lottery ul li.active .lottery-cur-9 {
    width: 324px;
    height: 276px;
    background-image: url("../images/lottery-cur-9.png");
    left: -42px;
    top: -47px;
}
#lottery ul li.active .lottery-cur-10 {
    width: 203px;
    height: 338px;
    background-image: url("../images/lottery-cur-10.png");
    left: -67px;
    top: -37px;
}
#lottery ul li.smoke .lottery-smoke{
    width: 157px;
    height: 144px;
    position: absolute;
    left: 0;
    top: 0;
    background: url("../images/lottery-smoke.png") no-repeat;
    background-size: 100%;
}
#lottery ul li.smoke .lottery-smoke-1 {
    width: 300px;
    height: 287px;
    background-image: url("../images/lottery-smoke-1.png");
}
#lottery ul li.smoke .lottery-smoke-2 {
    width: 300px;
    height: 287px;
    background-image: url("../images/lottery-smoke-1.png");
}
#lottery ul li.smoke .lottery-smoke-3 {
    /* width: 132px;
    height: 131px;
    background-image: url("../images/lottery-smoke-3.png");
    top: 1px;
    left: 1px; */
}
#lottery ul li.smoke .lottery-smoke-4 {
    /* width: 132px;
    height: 131px;
    background-image: url("../images/lottery-smoke-3.png");
    top: 31px;
    left: 1px; */
}
#lottery ul li.smoke .lottery-smoke-5 {
    width: 300px;
    height: 287px;
    background-image: url("../images/lottery-smoke-1.png");
    top: 66px;
    left: 11px;
}
#lottery ul li.smoke .lottery-smoke-6 {
    /* width: 132px;
    height: 131px;
    background-image: url("../images/lottery-smoke-3.png");
    top: 1px;
    left: 1px; */
}
#lottery ul li.smoke .lottery-smoke-7 {
    /* width: 132px;
    height: 131px;
    background-image: url("../images/lottery-smoke-3.png");
    top: 1px;
    left: 1px; */
}
#lottery ul .awards_1{
    background: url("../images/lottery-1.png") no-repeat;
    background-size: 100%;
    top: 142px;
    left: 366px;
    width: 159px;
    height: 159px;
}
#lottery ul .awards_2{
    background: url("../images/lottery-2.png") no-repeat;
    background-size: 100%;
    width: 167px;
    height: 157px;
    left: 470px;
    top: 216px;
}
#lottery ul .awards_3{
    background: url("../images/lottery-3.png") no-repeat;
    background-size: 100%;
    left: 533px;
    top: 372px;
    width: 119px;
    height: 147px;
}
#lottery ul .awards_2 .lottery-gift{
    width: 181px;
    height: 140px;
    position: absolute;
    z-index: 2;
    top: 95px;
    left: 176px;
    background: url(../images/lottery-2-gift.png) no-repeat;
    background-size: 100%;
    display: none;
}
#lottery ul .awards_2:hover .lottery-gift{
    display: block;
}
#lottery ul .awards_3 .lottery-gift{
    width: 197px;
    height: 139px;
    position: absolute;
    z-index: 2;
    top: -36px;
    left: 24px;
    background: url(../images/lottery-3-gift.png) no-repeat;
    background-size: 100%;
    display: none;
}
#lottery ul .awards_3:hover .lottery-gift{
    display: block;
}
#lottery ul .awards_4 .lottery-gift{
    width: 185px;
    height: 116px;
    position: absolute;
    z-index: 2;
    top: -36px;
    left: 38px;
    background: url(../images/lottery-4-gift.png) no-repeat;
    background-size: 100%;
    display: none;
}
#lottery ul .awards_4:hover .lottery-gift{
    display: block;
}
#lottery ul .awards_8{
    background: url("../images/lottery-8.png") no-repeat;
    background-size: 100%;
}
#lottery ul .awards_4{
    background: url("../images/lottery-4.png") no-repeat;
    background-size: 100%;
    top: 522px;
    left: 485px;
    width: 132px;
    height: 131px;
}
#lottery ul .awards_7{
    width: 135px;
    height: 125px;
    left: 92px;
    top: 526px;
    background: url("../images/lottery-7.png") no-repeat;
    background-size: 100%;
}
#lottery ul .awards_6{
    background: url("../images/lottery-6.png") no-repeat;
    background-size: 100%;
    top: 586px;
    left: 209px;
    width: 134px;
    height: 151px;
}
#lottery ul .awards_5{
    background: url("../images/lottery-5.png") no-repeat;
    background-size: 100%;
    top: 584px;
    left: 365px;
    width: 136px;
    height: 159px;
}
#lottery ul .awards_5 .lottery-gift{
    width: 177px;
    height: 139px;
    position: absolute;
    z-index: 2;
    top: -36px;
    left: -20px;
    background: url(../images/lottery-5-gift.png) no-repeat;
    background-size: 100%;
    display: none;
}
#lottery ul .awards_5:hover .lottery-gift{
    display: block;
}
#lottery ul .awards_6 .lottery-gift{
    width: 153px;
    height: 103px;
    position: absolute;
    z-index: 2;
    top: -62px;
    left: -30px;
    background: url(../images/lottery-6-gift.png) no-repeat;
    background-size: 100%;
    display: none;
}
#lottery ul .awards_6:hover .lottery-gift{
    display: block;
}
#lottery ul .awards_8{
    width: 173px;
    height: 105px;
    left: 52px;
    top: 394px;
    background: url("../images/lottery-8.png") no-repeat;
    background-size: 100%;
}
#lottery ul .awards_9{
    width: 170px;
    height: 159px;
    left: 79px;
    top: 223px;
    background: url("../images/lottery-9.png") no-repeat;
    background-size: 100%;
}
#lottery ul .awards_10{
    width: 117px;
    height: 140px;
    left: 225px;
    top: 150px;
    background: url("../images/lottery-10.png") no-repeat;
    background-size: 100%;
}
#lottery .lottery-btn{
    top: 36px;
    left: 242px;
    position: relative;
}
.lottery-btn a.lottery-start{
    position: absolute;
    top: 288px;
    left: -22px;
    width: 266px;
}
.lottery-btn a.lottery-start .lottery-start-bg{
    width: 164px;
    position: absolute;
    left: 20px;
    top: -164px;
    z-index: -1;
}
.lottery-start-bg.shaking {
    -webkit-animation: swing 1s linear infinite;
    animation: swing 1s linear infinite;
}
#lottery a.lottery-share{
    position: absolute;
    top: 810px;
    left: -124px;
}
.lottery .lottery-hint {
    margin-top: 80px;
    margin-left: 40px;
}

/*视频*/
.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 {
    /* height: 1978px;
    background: url('../images/invite-bg.png') no-repeat;
    background-size: 100%;
    padding-top: 516px; */
    box-sizing: border-box;
    height: 1345px;
}
.invite-info .swiper-container {
    text-align: center;
}
.invite .invite-tip {
    font-size: 30px;
}
.invite .invite-text-box {
    /* width: 258px;
    position: absolute;
    top: 3px;
    left: 3px; */
}
.invite #yournumber {
    height: 56px;
    width: 390px;
    font-size: 22px;
    text-align: center;
    color: #194d6a;
    border-radius: 4px;
    /* box-shadow: 3px 3px 3px #babfd5 inset; */
    /* padding-left: 18px; */
    box-sizing: border-box;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.invite .btn-copy3 {
    position: absolute;
    top: 17px;
    left: 446px;
}
.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: 250px;
    height: 57px;
    margin: 0 auto;
    margin-top: 40px;
    background: url("../images/invite-tip2-bg.png") no-repeat;
    position: relative;
}
#invite-num {
    font-size: 70px;
    font-weight: 700;
    color: #62fafa;
    position: absolute;
    top: -46px;
    left: 109px;
}
.invite .invite-hint {
    margin: 16px 0;
}
.invite .invite-ul {
    width: 100%;
    height: 940px;
    text-align: center;
    position: relative;
    top: -10px;
}
.invite .invite-ul li {
    /* display: inline-block; */
    position: absolute;
}
.invite .invite-ul li:nth-of-type(1) {
    /* left: 8px; */
}
.invite .invite-ul li:nth-of-type(2) {
    /* left: 243px; */
    top: 266px;
}
.invite .invite-ul li:nth-of-type(3) {
    top: 540px;
}
.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;
}

/* 回歸雙重福利 */
.return-fuli .return-fuli-wrapper {
    position: relative;
    margin-bottom: 200px;
}
.return-fuli-wrapper .return-fuli-gamerole {
    position: relative;
    width: 588px;
    height: 199px;
    background: url(../images/return-fuli-gamerole-bg.png) no-repeat;
    background-size: 100%;
    margin: 0 auto;
    margin-top: 30px;
}
.return-fuli .gamerole-select-wrapper {
    width: 632px;
    height: 95px;
    background: url(../images/gamerole-select-bg.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 54px;
    left: -22px;
}
.return-fuli .gamerole-select-wrapper .gamerole-select {
    width: 600px;
    height: 82px;
    margin: 0 auto;
    /* display: inline-block; */
    margin: 0 auto;
    background: #fff url(../images/gamerole-select.png) no-repeat 98% center;
    border: 0 solid #ffffff;
    /* box-shadow: 3px 3px 3px #babfd5 inset; */
    font-size: 28px;
    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;
    left: 25px;
    top: 6px;
}
.return-fuli .return-fuli-gamerole-bottom {
    position: absolute;
    top: 216px;
    left: 56px;
}
.return-fuli .return-fuli-gamerole-bottom .return-fuli-get-btn {
    display: block;
}

/* 同盟板塊 */
.team {
    position: relative;
    margin-top: 60px;
    height: 1200px;
}
.team .team-gift-ul {
    position: absolute;
    z-index: 1;
    left: 20px;
    top: 30px;
}
.team-gift-ul li {
    display: inline-block;
    position: relative;
    margin: 0 15px;
}
.team .invite-ul li .invite-finish-mark {
    top: 120px;
    left: 228px;
}
.team-container {
    position: relative;
    width: 720px;
    height: 867px;
    background: url("../images/team-bg.png") no-repeat;
    background-size: 100%;
    margin-top: 30px;
}
.team-container .team-toggle-btns {
    position: absolute;
    top: 410px;
    left: 28px;
    height: 110px;
}
.team-toggle-btns > a {
    position: absolute;
}
.team-toggle-btns .team-toggle-join {
    left: 364px;
}
.team-panel-title {
    padding-top: 90px;
    margin-bottom: 46px;
}
.team-panel-create .team-create-content .team-create-form {
    position: absolute;
    width: 500px;
    height: 290px;
    background: url("../images/team-create-form-bg.png") no-repeat;
    background-size: 100%;
    top: 500px;
    left: 40px;
}
.team-create-content .team-create-form {
    position: relative;
}
.team-create-form .team-create-input {
    width: 390px;
    height: 42px;
    background: #fff;
    border: 0 solid #ffffff;
    font-size: 24px;
    color: #454545;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    position: absolute;
    top: 7px;
    left: 106px;
}
.team-create-form .team-create-tenet {
    top: 84px;
}
.team-create-form .team-create-line {
    top: 243px;
    left: 176px;
    width: 317px;
}
.team-create-content .team-create-btn {
    position: absolute;
    top: 590px;
    left: 544px;
}
.team-panel-create .team-create-content_done {
    position: absolute;
    top: 500px;
    left: 50px;
}
.team-create-content_done .my-team-title {
    color: #fff;
    font-size: 32px;
    padding-left: 14px;
}
.my-team-title .my-team-count {
    font-size: 26px;
}
.team-create-content_done .my-team-form {
    width: 490px;
    height: 237px;
    background: url("../images/my-team-form-bg.png") no-repeat;
    background-size: 100%;
    color: #a4a4a4;
    box-sizing: border-box;
    padding-top: 8px;
    padding-left: 16px;
    font-size: 26px;
    position: relative;
}
.my-team-form .my-team-form_tenet span {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.my-team-form .my-team-form_line {
    margin-top: 50px;
}
.my-team-form .my-team-form_line span {
    display: block;
    /* width: 360px; */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.my-team-form .my-team-copy {
    position: absolute;
    top: 150px;
    left: 496px;
}
.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: 720px;
    height: 354px;
    background: url("../images/team-panel-join-bg.png") no-repeat;
    background-size: 100%;
    padding-top: 70px;
    padding-left: 26px;
    box-sizing: border-box;
    position: absolute;
    top: 490px;
}
.team-join-content .team-join-search {
    width: 671px;
    height: 43px;
    background: url("../images/team-search-bg.png") no-repeat;
    background-size: 100%;
    position: relative;
}
.team-join-search .team-join-search_input {
    width: 600px;
    height: 37px;
    background: #fff;
    border: 0 solid #fff;
    font-size: 22px;
    color: #454545;
    text-align: center;
    text-align-last: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    position: absolute;
    top: 2px;
    left: 4px;
}
.team-join-search .team-search-btn {
    position: absolute;
    right: 16px;
    top: 5px;
}
.team-join-content .team-join-list {
    color: #fff;
    font-size: 18px;
}
.team-join-list .team-join-item {
    margin-top: 6px;
}
.team-join-item .team-join-item_content {
    display: inline-block;
    width: 470px;
    white-space: nowrap;
}
.team-join-content .team-prev-btn {
    position: absolute;
    top: 318px;
    left: 271px;
}
.team-join-content .team-random-btn {
    position: absolute;
    top: 318px;
    left: 386px;
}
.team-join-content .team-prev-btn span,
.team-join-content .team-random-btn span {
    color: #fff;
}
.team-join-content .team-prev-btn span:hover,
.team-join-content .team-random-btn span:hover {
    text-decoration: underline;
}

/*角色介绍*/
.role-info{
    width: 720px;
    height: 918px;
    /* margin-top: -43px; */
    position: relative;
    /* background: url("../images/role-bg.png") no-repeat;
    background-size: 100%; */
}
.role{
    padding-bottom: 160px;
    overflow: hidden;
    font-size: 0;
    position: relative;
}
.role .role-bg {
    position: absolute;
    width: 720px;
    height: 502px;
    background: url("../images/role-bg.png") no-repeat;
    background-size: 100%;
    top: 350px;
}
.role-swiper{
    width: 720px;
    height: 918px;
    margin: auto;
    /* margin-top: 50px; */
}
.role-swiper .swiper-slide img{
    width: 100%;
}
.role-swiper .swiper-slide .role-pic{
    width: 720px;
    position: absolute;
    /* top: 8px;
    left: 8px; */
    z-index: 1;
}
.role-swiper-button-prev{
    width: 93px;
    height: 140px;
    position: absolute;
    top: 240px;
    left: -4px;
    background: url("../images/role-btn-prev.png") no-repeat;
    background-size: 100%;
    z-index: 1;
}
.role-swiper-button-next{
    width: 93px;
    height: 140px;
    position: absolute;
    top: 240px;
    right: 6px;
    background: url("../images/role-btn-next.png") no-repeat;
    background-size: 100%;
    z-index: 1;
}
.role-swiper-pagination{
    width: 720px;
    /* height: 50px; */
    margin: 0 auto;
    position: absolute;
    top: 900px;
    left: 20px;
}
.role-swiper-pagination::after {
    content: '';
    position: absolute;
    top: 47px;
    left: -1px;
    width: 662px;
    height: 24px;
    background: url(../images/role-s-bg.png) no-repeat;
    background-size: 100%;
    z-index: -1;
}
.role-swiper-pagination .swiper-pagination-bullet{
    width: 119px;
    height: 121px;
    float: left;
    border-radius: 0;
    opacity: 1;
    background: url("../images/role-s.png") no-repeat;
    background-size: 100%;
    margin-left: 16px;
    cursor: pointer;
    position: absolute;
}
.role-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
    /* background-image: url("../images/role-s-active.png"); */
    top: 0;
    left: 256px;
}
.role-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after{
    content: '';
    position: absolute;
    top: -20px;
    left: -22px;
    z-index: -1;
    width: 163px;
    height: 163px;
    background: url(../images/role-s-active-bg.png) no-repeat;
    background-size: 100%;
}
.role-swiper-pagination .swiper-pagination-bullet:first-child{
    background-image: url("../images/role-s-1.png");
}
/* .role-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:first-child{
    background: url("../images/role-s-1-active.png") no-repeat;
    background-size: 100%;
} */
.role-swiper-pagination .swiper-pagination-bullet:nth-child(2){
    background: url("../images/role-s-2.png") no-repeat;
    background-size: 100%;
}
/* .role-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%;
} */
.role-swiper-pagination .swiper-pagination-bullet:nth-child(3){
    background: url("../images/role-s-3.png") no-repeat;
    background-size: 100%;
}
/* .role-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%;
} */
.role-swiper-pagination .swiper-pagination-bullet:nth-child(4){
    background: url("../images/role-s-4.png") no-repeat;
    background-size: 100%;
}
/* .role-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%;
} */
.role-swiper-pagination .swiper-pagination-bullet:nth-child(5){
    background: url("../images/role-s-5.png") no-repeat;
    background-size: 100%;
}
/* .role-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%;
} */
.role-swiper-pagination .swiper-pagination-bullet:nth-child(6){
    background: url("../images/role-s-6.png") no-repeat;
    background-size: 100%;
}
/* .role-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%;
} */

/* 粉絲專頁板塊 */
.fb-fans-page {
    position: relative;
}
.fb-fans-page .fb-fans-wrapper {
    position: relative;
}
.fb-fans-wrapper .fb-fans-box {
    width: 518px;
    height: 597px;
    background: url("../images/fb-fans-box-bg.png") no-repeat;
    background-size: 100%;
    margin: 0 auto;
    margin-top: 68px;
    margin-bottom: 50px;
    position: relative;
}
.fb-fans-wrapper .fb-fans-box .fb-fans-inner {
    width: 634px;
    height: 580px;
    position: relative;
    top: 10px;
    left: 9px;
}
.fb-fans-wrapper .fb-fans-btn-wrapper {
    margin-top: 22px;
}
.fb-fans-wrapper .fb-fans-btn-wrapper a {
    display: inline-block;
}

/*游戏特色*/
.intro{
    padding-bottom: 68px;
    margin-top: 216px;
    overflow: hidden;
    font-size: 0;
}
.intro .title {
    text-align: center;
}
.intro-info{
    width: 695px;
    height: 384px;
    margin: 0 auto;
    /* background: url("../images/intro-bg.png") no-repeat;
    background-size: 100%; */
    position: relative;
    margin-top: 40px;
}
/* .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-swiper{
    height: 404px;
    margin: auto;
}
.intro-swiper .swiper-slide img{
    width: 100%;
}
.intro-swiper .swiper-slide .intro-pic{
    width: 593px;
    position: absolute;
    top: -4px;
    left: 56px;
    z-index: 1;
}
.intro-swiper .swiper-slide .intro-screen{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
}
.intro-swiper-button-prev{
    width: 70px;
    height: 102px;
    position: absolute;
    top: 148px;
    left: -10px;
    background: url(../images/intro-btn-prev.png) no-repeat;
    background-size: 100%;
    z-index: 1;
}
.intro-swiper-button-next{
    width: 70px;
    height: 102px;
    position: absolute;
    top: 148px;
    right: -14px;
    background: url("../images/intro-btn-next.png") no-repeat;
    background-size: 100%;
    z-index: 1;
}
.intro-swiper-pagination{
    position: absolute;
    top: 412px;
    left: 190px;
    /* background: url("../images/intro-s-bg.png") no-repeat center center;
    z-index: 0; */
}
.intro-swiper-pagination .swiper-pagination-bullet{
    width: 15px;
    height: 15px;
    background: url("../images/intro-s.png") no-repeat;
    background-size: 100%;
    border-radius: 0;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
}
.intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(1){
    /* background-image: url("../images/intro-s-1.png"); */
}
.intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(2){
    /* background-image: url("../images/intro-s-2.png"); */
    left: 50px;
}
.intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(3){
    /* background-image: url("../images/intro-s-3.png"); */
    left: 100px;
}
.intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(4){
    /* background-image: url("../images/intro-s-4.png"); */
    left: 150px;
}
.intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(5){
    /* background-image: url("../images/intro-s-5.png"); */
    left: 200px;
}
.intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(6){
    /* background-image: url("../images/intro-s-5.png"); */
    left: 250px;
}
.intro-swiper-pagination .swiper-pagination-bullet:nth-of-type(7){
    /* background-image: url("../images/intro-s-5.png"); */
    left: 300px;
}
.intro-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background-image: url("../images/intro-s-active.png");
}
.intro-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:nth-of-type(1){
    /* background-image: url("../images/intro-s-1-active.png"); */
}
.intro-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:nth-of-type(2){
    /* background-image: url("../images/intro-s-2-active.png"); */
}
.intro-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:nth-of-type(3){
    /* background-image: url("../images/intro-s-3-active.png"); */
}
.intro-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:nth-of-type(4){
    /* background-image: url("../images/intro-s-4-active.png"); */
}
.intro-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:nth-of-type(5){
    /* background-image: url("../images/intro-s-5-active.png"); */
}
.role .role-info .back-btn {
    text-align: center;
    margin-top: 50px;
}
/* 了解更多 */
.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{
    padding-bottom: 128px;
    margin-top: 246px;
    overflow: hidden;
    font-size: 0;
    position: relative;
}
.task .order-count{
    width: 518px;
    height: 46px;
    margin: 0 auto;
    margin-top: 20px;
    position: relative;
    background: url("../images/order-slogan.png") no-repeat;
    background-size: 100%;
}
.task .order-count .count{
    /* width: 569px;
    height: 33px;
    position: relative;
    top: 156px;
    left: 0px;
    background: url(../images/order-count-bg.png) no-repeat; */
}
.task .order-count .count span{
    width: 196px;
    height: 50px;
    position: absolute;
    top: -9px;
    left: 265px;
    line-height: 1;
    font-size: 50px;
    font-weight: 700;
    color: #62fafa;
    letter-spacing: 2px;
    text-align: center;
}
.task .task-progress {
    margin-top: 78px;
    position: relative;
}
.task .task-progress .task-active-dots {
    position: absolute;
    top: -5px;
    left: 64px;
}
.task-progress .task-active-dots .task-active-dot {
    position: absolute;
    width: 49px;
    height: 49px;
    background: url(../images/task-active-dot.png) no-repeat;
    background-size: 100%;
    display: none;
}
.task-progress .task-active-dots .task-active-dot-2 {
    left: 137px;
}
.task-progress .task-active-dots .task-active-dot-3 {
    left: 274px;
}
.task-progress .task-active-dots .task-active-dot-4 {
    left: 410px;
}
.task-progress .task-active-dots .task-active-dot-5 {
    left: 548px;
}
.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: 1240px;
    position: relative;
}
.task-prize{
    margin: auto;
    text-align: center;
    position: relative;
}
.task-prize li{
    width: 355px;
    height: 345px;
    margin: 0 10px;
    position: absolute;
    display: inline-block;
    top: 20px;
}
.task-prize li.active:after{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    background: url(../images/task-finish.png) no-repeat;
    background-size: 100%;
    width: 355px;
    height: 345px;
}
.task-prize .task_1{
    background: url("../images/task-1.png") no-repeat;
    background-size: 100%;
    left: 20px;
}
.task-prize .task_2{
    background: url(../images/task-2.png) no-repeat;
    background-size: 100%;
    left: 305px;
    top: 200px;
}
.task-prize .task_3{
    background: url(../images/task-3.png) no-repeat;
    background-size: 100%;
    left: 20px;
    top: 380px;
}
.task-prize .task_4{
    background: url(../images/task-4.png) no-repeat;
    background-size: 100%;
    top: 566px;
    left: 305px;
}
.task-prize .task_5{
    background: url(../images/task-5.png) no-repeat;
    background-size: 100%;
    top: 740px;
    left: 20px;
}
.task-hint{
    width: 100%;
    position: absolute;
    top: 630px;
}
/*活动规则*/
.rule{
    overflow: hidden;
    font-size: 0;
    margin-top: 100px;
    padding-bottom: 250px;
    /* width: 720px;
    height: 470px; */
    /* background: url("../images/rule-bg.png") no-repeat; */
    /* background-size: 100%; */
}
.rule .title {
    text-align: center;
}
.rule-info{
    width: 642px;
    height: 550px;
    margin: 0 auto;
    background: url("../images/rule-info.png") no-repeat;
    background-size: 100%;
}
/* .rule .rule-info p{
    width: 630px;
    margin: auto;
    padding-top: 30px;
} */
/*footer*/
.footer{
    width: 720px;
    padding: 23px 0;
    background: #100506;
}
.footer .cont{
    width: 720px;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}
.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: 220px;
}
.copyright::before {
    content: '';
    position: absolute;
    left: -80px;
    top: 0px;
    height: 68px;
    width: 2px;
    background-color: #6f6b6c;
}
.logo-game {
    width: 269px;
    height: 79px;
    background:url(../images/logo-game.png) no-repeat;
    -moz-background-size:contain;
    -o-background-size:contain;
    background-size:contain;
    margin-right: 136px;
    position: relative;
}
/*.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;
}

/* 固定底欄 */
.fixed-footer {
    position: fixed;
    bottom: -20px;
    left: 50%;
    margin-left: -360px;
    z-index: 99;
}
.fixed-footer .fixed-footer-wrapper {
    width: 720px;
    height: 248px;
    background: url("../images/fixed-footer-bg.png") no-repeat;
    background-size: 100%;
}
.fixed-footer .fixed-footer-wrapper .btn-query {
    position: absolute;
    top: 92px;
    left: 27px;
    font-size: 0;
}
.fixed-footer .fixed-footer-wrapper .gp-order,
.fixed-footer .fixed-footer-wrapper .ios-order {
    font-size: 0;
    position: absolute;
    left: 468px;
    top: 136px;
}

/*弹出视频*/
.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:50px;
    height:50px;
    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(../images/btn-close.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: 98px;
    height: 94px;
    position: absolute;
    top: 1005px;
    left: 314px;
    background: url("../images/pop-close.png") no-repeat;
    background-size: 100%;
}
.pop-gift-k{
    width: 720px;
    height: 476px;
    background: url("../images/lottery-pop-bg.png") no-repeat;
    background-size: 100%;
    position: relative;
}
.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: 500px;
    left: 316px;
}
.pop-gift-nei{
    width: 580px;
    height: 260px;
    top: 146px;
    left: 69px;
    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%; */
}
.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: 720px;
    height: 745px;
    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: 196px;
    top: 710px;
}
.gift-1 a.lottery-go-to {
    position: absolute;
    left: 230px;
    top: 557px;
}
.gift-1 .dia-close {
    top: 886px;
    left: 250px;
}
/* 老玩家回歸獎勵彈窗 */
.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: 720px;
    height: 817px;
    margin: 0 auto;
    background: url("../images/order-pop-bg.png") no-repeat;
}
.pop-query .dia-close {
    /* top: -22px;
    right: 12px; */
}
.pop-query-nei{
    /* width: 655px; */
    margin: auto;
    position: relative;
    padding-left: 43px;
    padding-right: 30px;
}
.query-title {
    font-size: 0;
    padding: 67px 0 10px;
}
.query-title span{
    /* padding: 36px 0 10px; */
    font-weight: 700;
    color: #5b628a;
    text-align: center;
    display: inline-block;
}
.query-title .name{
    width: 190px;
    height: 74px;
}
.query-title .code{
    width: 258px;
}
.pop-query-nei .query-info {
    height: 570px;
    overflow-x: hidden;
    overflow-y: auto;
}
.query-info li{
    /* padding: 8px 0; */
    /* line-height: 36px; */
    font-size: 0;
    margin-bottom: 7px;
}
.query-info li span{
    font-size: 22px;
    color: #9579fd;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}
.query-info li .name{
    width: 220px;
    height: 76px;
    line-height: 76px;
    padding: 0 10px;
    /* margin-right: 7px; */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: white;
    border: 1px solid #a77adb;
}
.query-info li .code{
    width: 188px;
    height: 76px;
    line-height: 76px;
    padding: 0 16px;
    line-height: 76px;
    word-break: break-all;
    text-align: left;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: white;
    border: 1px solid #a77adb;
    margin-left: 3px;
}
.query-info li .btn-copy{
    /* width: 155px; */
    margin-left: 4px;
}
.query-info li .btn-copy a{
    width: 166px;
    height: 65px;
    margin: auto;
    background: url("../images/order-pop-copy.png") no-repeat;
    background-size: 100%;
    display: block;
}
.over-content p{
    font-size: 40px;
    font-weight: 700;
    color: #fcfcfc;
    text-align: center;
}
.pop-query .dia-close {
    top: 830px;
    left: 310px;
}
/* 弹窗登录 */
.login .order-info{
    width: 720px;
    height: 1181px;
    margin: 0px auto;
    position: relative;
    background: url("../images/pop-login-bg.png") no-repeat;
    background-size: 100%;
}
.order-info .step .pop-login-checkbox-wrapper {
    position: absolute;
    top: 716px;
    left: 92px;
    display: flex;
}
.order-info .step .hide.pop-login-checkbox-wrapper {
    display: none;
}
.pop-login-checkbox-wrapper .pop-login-checkbox {
    display: inline-block;
    width: 32px;
    height: 30px;
    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: 32px;
    height: 30px;
    background: url("../images/pop-login-checkbox-active.png") no-repeat;
    background-size: 100%;
    cursor: pointer;
}
.pop-login-checkbox-wrapper .pop-login-checkbox-hint {
    display: inline-block;
    margin-left: 12px;
}
/* 过期 */
.login .pop-login {
    top: 36%;
}
.login .order-info-overtime {
    background-image: url("../images/pop-login-bg-overtime.png");
}
.login .order-info .content {
    padding-top: 635px;
    position: relative;
}
.login .order-info .step {
    margin-left: 98px;
}
.login .order-info .step1 .step-info{
    /* margin-top: 74px; */
}
.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: 192px;
    height: 70px;
    margin: 0 auto;
    /* display: inline-block; */
    margin: 0 auto;
    background: #fff url(../images/order-select.png) no-repeat 95% center;
    border: 0 solid #ffffff;
    /* 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;
}
.login .order-info .step .step-info input{
    width: 328px;
    height: 70px;
    background: #fff;
    border: 0 solid #ffffff;
    /* 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: 0;
    box-sizing: border-box;
    margin-left: 4px;
}
.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: 64px;
    position: relative;
}
.login .order-info .step .order-btn .pop-btn-login{
    display: inline-block;
    position: relative;
    left: 16px;
}
.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 {
    top: 1192px;
    left: 308px;
}

/* 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);
}
/* 预约成功弹窗 */
.reg-success-container .pop-reg-success {
    width: 720px;
    height: 745px;
    margin: 0 auto;
    background: url("../images/order-success-bg.png") no-repeat;
    background-size: 100%;
}
.reg-success-container .pop-reg-success > a {
    position: absolute;
}
.reg-success-container .pop-reg-success .reg-success-download {
    top: 570px;
    left: 58px;
}
.reg-success-container .pop-reg-success .reg-success-return {
    top: 570px;
    left: 372px;
}
.reg-success-container .pop-reg-success .pop-reg-code-wrapper {
    color: #9579fd;
    font-size: 28px;
    position: absolute;
    top: 151px;
    left: 330px;
}
.pop-reg-success .pop-reg-code-wrapper .pop-reg-code {
    display: inline-block;
    width: 216px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pop-reg-success .pop-reg-code-wrapper .pop-reg-copy {
    position: absolute;
    top: -3px;
    left: 222px;
}
.pop-reg-success .pop-success-btn {
    position: absolute;
    left: 98px;
    top: 473px;
}
.pop-reg-success .pop-success-btn a {
    display: inline-block;
    width: 267px;
    height: 85px;
    font-size: 0;
    margin: 0 auto;
}
.pop-success-btn .gp-order {
    background: url(../images/order-success-gp.png) no-repeat;
    background-size: 100%;
}
.pop-success-btn .ios-order {
    background: url(../images/order-success-ios.png) no-repeat;
    background-size: 100%;
}
.reg-success-container .pop-reg-success .dia-close {
    top: 776px;
    left: 310px;
}

/* 分享邀请链接 */
.share-code .pop-share-code-nei {
    width: 585px;
    height: 301px;
    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 {
    margin-top: 70px;
    display: flex;
    justify-content: center;
}
.share-code .share-code-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;
}
.code-btns img {
    /* width: 117px; */
}
.pop-share-code .dia-close{
    top: 330px;
    left: 255px;
    /* background-image: url(../images/pop-share-close.png); */
}
/* 弹窗活动结束 */
.over .over-content {
    font-size: 0;
    width: 720px;
    height: 914px;
    background: url("../images/pop-over-bg.png") no-repeat;
    background-size: 100%;
    position: relative;
    top: 32%;
}
.over .over-content p {
    font-size: 0;
}
.over-content .over-btns {
    position: absolute;
    top: 890px;
    left: 46px;
}
.over-content .over-btns a {
    margin: 0 10px;
}
.over-content .over-query {
    position: absolute;
    top: 1008px;
    left: 182px;
}
.over .dia-close {
    top: 1123px;
    left: 299px;
}

/* 女神彈窗 */
.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: 643px;
    height: 580px;
    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: 335px;
    left: 166px;
}
.pop-weapons-container .weapons-query-btn {
    position: absolute;
    background: url(../images/weapons-query-btn.png) no-repeat;
    background-size: 100%;
    top: 418px;
    left: 165px;
}
.pop-weapons-container .dia-close {
    top: 520px;
    left: 278px;
}

/* line複製成功彈窗 */
.pop-line .pop-line-bg {
    width: 613px;
    height: 301px;
    background: url("../images/pop-line-bg.png") no-repeat;
    background-size: 100%;
}
.pop-line .pop-line-share {
    position: absolute;
    top: 176px;
    left: 258px;
}
.pop-line .dia-close {
    top: 340px;
    left: 270px;
}
.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-create-team-success .pop-create-team-success-bg {
    width: 613px;
    height: 301px;
    background: url("../images/pop-create-team-success-bg.png") no-repeat;
    background-size: 100%;
}
.pop-create-team-success .dia-close {
    top: 340px;
    left: 270px;
}

/* 同盟詳情彈窗 */
.pop-team-detail .pop-team-content {
    width: 635px;
    height: 330px;
    background: url("../images/pop-team-detail-bg.png") no-repeat;
    background-size: 100%;
    position: relative;
    color: #2494e2;
    font-size: 26px;
}
.pop-team-content > span {
    position: absolute;
    top: 48px;
    left: 220px;
    width: 390px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pop-team-content .pop-detail-tenet {
    top: 94px;
}
.pop-team-content .pop-detail-line {
    top: 190px;
    left: 83px;
    width: 460px;
}
.pop-team-content .team-join-btn {
    position: absolute;
    top: 261px;
    left: 211px;
}
.pop-team-detail .dia-close {
    top: 420px;
    left: 278px;
}

/* 推薦彈窗 */
.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;
}
/* 商店弹窗 */
.store .pop-store {
    width: 720px;
    height: 1081px;
    background: url("../images/store-pop-bg.png") no-repeat;
    background-size: 100%;
    position: relative;
    top: 38%;
}
.pop-store a.store-pop-download {
    position: absolute;
    left: 109px;
    top: 655px;
}
/* 缩放特效 */
.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;
}