* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body,
div,
p,
ul,
li,
dl,
dt,
dd,
em,
i,
span,
a,
img,
input,
h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    padding: 0;
}

a,
img,
input {
    border: none;
}

a {
    text-decoration: none;
}

ul,
li {
    list-style: none;
}

:focus {
    outline: none;
}

select {
    -webkit-appearance: none;
}

/*字体包CDN分离路径*/
@font-face{font-family:'HeadlinerNo';src:url("//www.pubgmobile.com/act/resource/long_cache_30d/fonts/HeadlinerNo.otf");}
@font-face{font-family:"all";src:url('//www.pubgmobile.com/act/resource/long_cache_30d/fonts/all.ttf')}
@font-face{font-family:"ru";src:url("//www.pubgmobile.com/act/resource/long_cache_30d/fonts/ru.ttf");}
@font-face{font-family:"th";src:url("//www.pubgmobile.com/act/resource/long_cache_30d/fonts/th.ttf");}
@font-face{font-family:"vi";src:url("//www.pubgmobile.com/act/resource/long_cache_30d/fonts/vi.ttf");}
@font-face{font-family:"tr";src:url("//www.pubgmobile.com/act/resource/long_cache_30d/fonts/tr.otf");}
@font-face{font-family:"ar";src:url("//www.pubgmobile.com/act/resource/long_cache_30d/fonts/ar.ttf");}

body, html {
    height: 100%;
    overflow: hidden;
    background: #000;
    -webkit-overflow-scrolling: touch;
}
html{
    font-family: 'all';
}

body {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a:focus, input:focus, p:focus, div:focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input, select {
    font-family: "all";
}

.lang-ar, .lang-ar input, .lang-ar select {
    font-family: "ar";
    direction: rtl;
}
.lang-ur, .lang-ur input, .lang-ur select {
    font-family: "ar";
    direction: rtl;
}

.lang-th, .lang-th input, .lang-th select {
    font-family: "th";
}

.lang-zh, .lang-zh input, .lang-zh select, .lang-tw, .lang-tw input, .lang-tw select, .lang-hk, .lang-hk input, .lang-hk select {
    font-family: "Microsoft YaHei";
}

.lang-ru, .lang-ru input, .lang-ru select {
    font-family: "ru";
}

.lang-vi, .lang-vi input, .lang-vi select {
    font-family: "vi";
}

.lang-tr, .lang-tr input, .lang-tr select {
    font-family: "tr";
}

body {
    font-size: 12px;
    -webkit-text-size-adjust: none;
    min-width: 320px;
    -webkit-text-size-adjust: none;
}

body,
html {
    height: 100%;
    overflow: hidden;
    background: #000;
    -webkit-overflow-scrolling: touch;
}

a:focus,
input:focus,
p:focus,
div:focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input,
select {
    font-family: "all";
}

body,
html {
    height: 100%;
    overflow: hidden;
    background: #000;
    -webkit-overflow-scrolling: touch;
}

body {
    /*background: linear-gradient(180deg, #00a2ff 0%, #a200ff 100%);*/
    margin: 0;
    padding: 0;
}

::-webkit-scrollbar {
    width: .05rem;
    height: .05rem;
}

::-webkit-scrollbar-thumb {
    border-radius: .2rem;
    background-color: #f5f2ba;
}

::-webkit-scrollbar-track {
    border-radius: .2rem;
    background-color: #000;
}

.wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../images/home-index-bg.jpg) no-repeat center/cover;
}

.container {
    width: 13.34rem;
    height: 7.5rem;
    position: relative;
}

.longwrapper2 .container {
    transform: scale(0.85);
}
.longwrapper2 .gka-wrap {
    transform: scale(0.85);
}

.longwrapper2 .Public-modal {
    transform: scale(0.85);
}

.longwrapper2 .loading-pop-text
{
    transform: translateX(-50%) scale(0.85);
}
.longwrapper2 #progress-bar-container
{
    transform: translate(-50%,-50%) scale(0.85);
}


.longwrapper2 .temp-play-pop .Public-modal {
    transform: translateY(0) scale(0.9);
}


.longwrapper3 .container {
    transform: scale(0.65);
}
.longwrapper3 .gka-wrap {
    transform: scale(0.65);
}

.longwrapper3 .Public-modal {
    transform: scale(0.65);
}
.longwrapper3 .loading-pop-text{
    transform: translateX(-50%) scale(0.65);
}
.longwrapper3 #progress-bar-container
{
    transform: translate(-50%,-50%) scale(0.65);
}

.longwrapper3 .temp-play-pop .Public-modal {
    transform: translateY(0) scale(0.75);
}

/*.title {*/


/*    width: ;*/


/*    height: ;*/


/*    background: url() no-repeat top/100% 100%;*/


/*}*/

.title {
    position: absolute;
    top: 0;
    left: 0;
    /*width: 7.69rem;*/
    /*height: 1.70rem;*/
    /*background: url(../images/title.png) no-repeat top/100% 100%;*/
}

.title-big {
    font-size: .36rem;
    color: #ffd0af;
}

.lang-en .title-big{
    width: 8.1rem;
    height: .75rem;
    background:  url(../images/title/1_en.png) no-repeat top/100% 100%;

}
.lang-ar .title-big,
.lang-ur .title-big
{
    width: 8.1rem;
    height: .75rem;
    transform: translateX(1.2rem);
    background: url(../images/title/1_ar.png) no-repeat top / 100% 100%;
}
.lang-ar, .lang-ur {
    direction: rtl;
}
.lang-de .title-big{
    width: 8.1rem;
    height: .75rem;
    background:  url(../images/title/1_de.png) no-repeat top/100% 100%;

}
.lang-es .title-big{
    width: 8.1rem;
    height: .75rem;
    background:  url(../images/title/1_es.png) no-repeat top/100% 100%;

}
.lang-fr .title-big{
    width: 8.1rem;
    height: .75rem;
    background:  url(../images/title/1_fr.png) no-repeat top/100% 100%;

}
.lang-pt .title-big{
    width: 8.1rem;
    height: .75rem;
    background:  url(../images/title/1_pt.png) no-repeat top/100% 100%;

}
.lang-ru .title-big{
    width: 8.1rem;
    height: .75rem;
    background:  url(../images/title/1_ru.png) no-repeat top/100% 100%;

}
.lang-tr .title-big{
    width: 8.1rem;
    height: .75rem;
    background:  url(../images/title/1_tr.png) no-repeat top/100% 100%;

}
.lang-uz .title-big{
    width: 8.1rem;
    height: .75rem;
    background:  url(../images/title/1_uz.png) no-repeat top/100% 100%;

}
.lang-zh .title-big{
    width: 8.1rem;
    transform: translateX(-1.7rem);
    height: .75rem;
    background:  url(../images/title/1_zh.png) no-repeat top/100% 100%;

}

.box-open{
    position: absolute;
    left: 29.3%;
    top: 20%;
    width: 3.5rem;
    height: 3.5rem;
    transform: translate3d(0, 0, 0);
}
.box-open-con{
    width: 100%;
    height: 100%;
    position: relative;
}
.box-open-bubble{
    position: absolute;
    top: 0.6rem;
    width: 4rem;
    left: 2.6rem;
    padding: .1rem;
    font-size: .24rem;
    color: #fff;
    text-align: center;
    background: url(../images/tips1.png) no-repeat top / 100% 100%;
    display: none;
}

.box-open-con:hover .box-open-bubble{
    display: block;
}

.timePeriod-title {
    color: #ffd0af;
}

.title-small {
    font-size: .24rem;
    color: #faffe7;
}

.timeRemaining {
    color: #faffe7;
    font-size: .24rem;
    display: flex;
    align-items: center;
}

.timePeriod {
    color: #faffe7;
    font-size: .24rem;
    display: flex;
    align-items: center;
}

.rule-icon {
    width: .23rem;
    height: .23rem;
    background: url(../images/rule_icon.png) no-repeat top/100% 100%;
    margin: 0 0.08rem;
}

.right-top {
    position: absolute;
    top: 0;
    right: -0.1rem;
    width: 3.5rem;
    height: .67rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.right-top-rank {
    width: 1.39rem;
    height: .39rem;
    color: #ffecc7;
    font-size: .18rem;
    line-height: .36rem;
    text-indent: .7rem;
    background: url(../images/rank.png) no-repeat top/100% 100%;
}
.lang-ar .right-top-rank{
    text-indent: .2rem;
}
.lang-ur .right-top-rank
{
    text-indent: .4rem;
}

.right-top-temp {
    width: .63rem;
    height: .63rem;
    margin: 0 .1rem;
    background: url(../images/play-temp.png) no-repeat top/100% 100%;
}
.right-top-book {
    width: .63rem;
    height: .63rem;
    margin: 0.15rem;
    background: url(../images/play-book.png) no-repeat top/100% 100%;
}
.right-top-share {
    width: .63rem;
    height: .63rem;
    background: url(../images/share.png) no-repeat top/100% 100%;
}

.Treasure {
    position: absolute;
    top: .8rem;
    right: 0.1rem;
    width: 2.01rem;
    height: .64rem;
    background: url(../images/tips.png) no-repeat top/100% 100%;
}

.Treasure-num {
    font-size: .24rem;
    color: #ffecc7;
    line-height: .69rem;
    margin-left: 1rem;
}
.lang-ar .Treasure-num,
.lang-ur .Treasure-num
{
    text-align: left;
}

.Treasure-num-text {
    display: none;
    width: 3.58rem;
    min-height: .64rem;
    background: url(../images/tips2.png) no-repeat top/100% 100%;
    padding: .1rem .2rem;
    font-size: .24rem;
    line-height: .25rem;
    color: #fff;
    position: absolute;
    word-wrap: break-word;
    left: -1.6rem;
    top: .7rem;
}

.Treasure:hover .Treasure-num-text {
    display: block;
}

.task {
    position: absolute;
    top: 47%;
    left: 0;
    width: .89rem;
    height: 1.68rem;
    /* transform: translateY(-50%); */
    margin-top: -0.95rem;
    background: url(../images/task-btn.png) no-repeat top/100% 100%;
    animation: breath 1.8s infinite linear;
}
.task-bot::before{
    content: '';
    width: 0.15rem;
    height: 0.15rem;
    background: red;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0.2rem;
}

@-webkit-keyframes breath {
    0% {transform: scale(1);}
    50% {transform: scale(1.1);}
    100% {transform: scale(1);}
}

.skip {
    position: absolute;
    bottom: 1.5rem;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skip-btn {
    width: .3rem;
    height: .29rem;
    position: relative;
    background: url(../images/passNo-bg.png) no-repeat top/100% 100%;
}

.skip-act .skip-btn:before {
    content: '';
    display: block;
    width: .18rem;
    height: .18rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../images/passNo-act.png) no-repeat top/100% 100%;
}

.skip-text {
    font-size: .24rem;
    color: #fff;
    margin: 0 .1rem;
    text-shadow: .02rem 0 #000,
    -.02rem 0 #000,
    0 .02rem #000,
    0 -.02rem #000,
    .02rem .02rem #000,
    -.02rem -.02rem #000,
    .02rem -.02rem #000,
    -.02rem .02rem #000;
}

.lang-ar .milestone-total-text,
.lang-ur .milestone-total-text
{
    width: 1.5rem;
}
.lang-ar .milestone-list,
.lang-ur .milestone-list
{
    direction: ltr;
}
.lang-ar .milestone-box-tips,
.lang-ur .milestone-box-tips
{
    direction: rtl;
}

.Treasure-bubble {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 3.3rem;
    width: 2.4rem;
    height: 1.4rem;
}

.Treasure-bubble-text {
    display: none;
    min-width: 3.58rem;
    min-height: .64rem;
    background: url(../images/tips2.png) no-repeat top/100% 100%;
    padding: .1rem .2rem;
    font-size: .24rem;
    line-height: .25rem;
    color: #fff;
    position: absolute;
    left: 2.2rem;
    top: -0.5rem;
}

.Treasure-bubble:hover .Treasure-bubble-text {
    display: block;
}

.lottery-group {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lottery-btn-1 {
    width: 3.03rem;
    height: .88rem;
    color: #fff;
    font-size: .24rem;
    line-height: .28rem;
    /* flex-direction: column; */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 0.3rem;
    background: url(../images/lottery-btn-left.png) no-repeat top/100% 100%;
}

.lottery-btn-5 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 3.03rem;
    height: .88rem;
    color: #fff;
    line-height: .28rem;
    font-size: .24rem;
    padding-right: 0.2rem;
    padding-top: 0.05rem;
    text-align: center;
    background: url(../images/lottery-btn-right.png) no-repeat top/100% 100%;
}

.lottery-btn-5con{
    display: flex;
    align-items: center;
    justify-content: center;
}

.lottery-btn-num-color{
    color: #2affd9;
}

.lottery-btn-5num{
    font-size: .2rem;
    line-height: .23rem;
}

.lottery-btn-1icon{
    width: .26rem;
    height: .25rem;
    margin:0 0.1rem ;
    background: url(../images/lottery-btn-left-icon.png) no-repeat top/100% 100%;
}

.lottery-btn-5icon{
    width: .36rem;
    height: .20rem;
    margin:0 0.1rem ;
    background: url(../images/lottery-btn-right-icon.png) no-repeat top/100% 100%;
}
.milestone {
    position: absolute;
    width: 13.41rem;
    height: 1.14rem;
    bottom: .02rem;
    left: 0;
    background: url(../images/Integral.png) no-repeat top/100% 100%;
}

.milestone .pr {
    position: relative;
    width: 100%;
    height: 100%;
}

.milestone-total {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2.39rem;
    height: 1.19rem;
    font-size: .2rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    /* background: url(../images/Integral.png) no-repeat top/100% 100%; */
}

.milestone-total-top {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: .13rem;
}

.milestone-total-num {
    font-size: .36rem;
    color: #fff;
    margin-left: .1rem;
}

.milestone-total-tips {
    position: absolute;
    font-size: .16rem;
    /* font-weight: 200; */
    /* min-width: 3.58rem; */
    /* min-height: 1.06rem; */
    background: url(../images/tips2.png) no-repeat top / 100% 100%;
    padding: .2rem .2rem;
    font-size: .24rem;
    line-height: .28rem;
    color: #fff;
    text-align: center;
    display: none;
    align-items: center;
    justify-content: center;
    bottom: 1.6rem;
}

.milestone-total.milestone-total-act .milestone-total-tips {
    display: flex !important;
}

.milestone-list {
    position: relative;
    margin-left: 1.8rem;
    height: 100%;
}

.milestone-Progress {
    position: absolute;
    left: 0.3rem;
    top: 44%;
    transform: translateY(-50%);
    width: 10.61rem;
    height: .29rem;
    background: url(../images/Progress.png) no-repeat top/100% 100%;
}

.milestone-Progress-bar {
    margin-top: .06rem;
    height: .18rem;
    background: #d03a2f;
}

.milestone-box {
    position: absolute;
    width: 93%;
    top: 40%;
    left: 0.4rem;
    transform: translateY(-65%);
    display: flex;
    align-items: flex-end;
}

.milestone-box-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transform: translateX(-0.1rem);
    position: relative;
}

.milestone-box-item:hover .milestone-box-tips {
    display: flex;
}

.milestone-box-tips {
    position: absolute;
    top: -1.5rem;
    left: 50%;
    min-width: 3.79rem;
    height: 1.24rem;
    display: none;
    align-items: center;
    background: url(../images/tips1.png) no-repeat top/100% 100%;
}

.milestone-box-tips-icon {
    width: .94rem;
    height: .94rem;
    background: url(../images/res-bg.png) no-repeat top/100% 100%;
    margin-left: .18rem;
    margin-right: .18rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.milestone-box-tips-icon img {
    width: auto;
    height: auto;
}

.milestone-box-tips-text {
    font-size: .24rem;
    color: #fff;
}

.mt-5 {
    margin-top: -0.15rem;
}

.reward-pop-con-time {
    position: absolute;
    bottom: .1rem;
    left: .05rem;
    width: .19rem;
    height: .19rem;
    background: url(../images/Reward/time.png) no-repeat top/100% 100%;
}

.milestone-box-item:nth-child(1) img {
    width: .54rem;
    height: .50rem;
}

.milestone-box-item:nth-child(2) img {
    width: .27rem;
    height: .56rem;
}

.milestone-box-item:nth-child(3) img {
    width: .22rem;
    height: .46rem;
}

.milestone-box-item:nth-child(4) img {
    width: .54rem;
    height: .50rem;
}

.milestone-box-item:nth-child(5) img {
    width: .22rem;
    height: .46rem;
}

.milestone-box-item:nth-child(6) img {
    width: .54rem;
    height: .40rem;
}

.milestone-box-item:nth-child(7) img {
    width: .49rem;
    height: .49rem;
}

.milestone-box-item:nth-child(8) img {
    width: .54rem;
    height: .56rem;
}

.milestone-box-item:nth-child(9) img {
    width: .70rem;
    height: .81rem;
}

.milestone-box-item:nth-child(7) .milestone-box-tips {
    left: -2.5rem;
}

.milestone-box-item:nth-child(8) .milestone-box-tips {
    left: -2.5rem;
}

.milestone-box-item:nth-child(9) .milestone-box-tips {
    left: -2.5rem;
}

.milestone-Reward {
    width: .74rem;
    height: .74rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../images/prize.png) no-repeat top/100% 100%;
}

.milestone-Reward-nums {
    position: absolute;
    font-size: .16rem;
    bottom: .07rem;
    right: .05rem;
    color: #fff;
}

.milestone-box-item:nth-child(9) .milestone-Reward-nums {
    position: absolute;
    font-size: .18rem;
    bottom: .1rem;
    right: .08rem;
    color: #fff;
}

.milestone-box-item:nth-child(1) {
    transform: translateX(0);
}

.milestone-box-item:nth-child(9) {
    transform: translateX(0);
    justify-content: flex-end;
}

.milestone-box-item:nth-child(9) .milestone-Reward {
    width: 1.08rem;
    height: 1.08rem;
    background: url(../images/prize-last.png) no-repeat top/100% 100%;
}

.milestone-Reward-num {
    position: absolute;
    bottom: -.21rem;
    right: .2rem;
    width: .34rem;
    height: .34rem;
    text-align: center;
    line-height: .355rem;
    color: #fff;
    font-size: .16rem;
    background: url(../images/initial-status.png) no-repeat top/100% 100%;
}

.milestone-box-item:nth-child(9) .milestone-Reward-num {
    right: .37rem;
}

.Undeveloped .milestone-Reward:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .2rem;
    height: .24rem;
    background: url(../images/lock.png) no-repeat top/100% 100%;
}

.Achieve .milestone-Reward:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.06rem;
    height: 1.06rem;
    background: url(../images/light.png) no-repeat top/100% 100%;
}

.milestone-box-item:nth-child(9).Achieve .milestone-Reward:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.4rem;
    height: 1.4rem;
    background: url(../images/light.png) no-repeat top/100% 100%;
}

.Achieve .milestone-Reward-num {
    background: url(../images/initial-status-con.png) no-repeat top/100% 100%;
}

.Received .milestone-Reward:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .37rem;
    height: .27rem;
    background: url(../images/finish.png) no-repeat top/100% 100%;
}

.Received .milestone-Reward-num {
    background: url(../images/initial-status-pass.png) no-repeat top/100% 100%;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1300;
    background: rgba(0, 0, 0, .8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.Public-modal {
    width: 13.34rem;
    height: 7.5rem;
    position: relative;
}

.temp-play-pop .Public-modal {
    /*height: 7.71rem;*/
}

.task-pop {
    /*background: rgba(0,0,0,0);*/
}

.task-con {
    position: absolute;
    left: 0;
    top: 0.8rem;
    width: 4.77rem;
    height: 5.09rem;
    background: url(../images/task/task-bg.png) no-repeat top/100% 100%;
}

.task-title{
    color: #f5f2ba;
    font-size: .28rem;
    text-align: center;
    margin-top: 0.2rem;
}

.task-tab {
    position: absolute;
    left: -0.24rem;
    top: 0.22rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #726c77;
    text-align: center;
    line-height: 0.58rem;
    font-size: .24rem;
}

.task-tab-Daily {
    width: 2.6rem;
    height: 0.58rem;
    box-sizing: border-box;
    /* padding-top: .11rem; */
    background: url(../images/task/left.png) no-repeat top/100% 100%;
}

.task-tab-WOW {
    width: 2.6rem;
    height: 0.58rem;
    box-sizing: border-box;
    /* padding-top: .11rem; */
    background: url(../images/task/right.png) no-repeat top/100% 100%;
}

.task-tab-Daily.task-tab-act {
    color: #fff;
    background: url(../images/task/left-act.png) no-repeat top/100% 100%;
}

.task-tab-WOW.task-tab-act {
    color: #fff;
    background: url(../images/task/right-act.png) no-repeat top/100% 100%;
}

.lang-ar .task-tab-Daily,
.lang-ur .task-tab-Daily
{
    background: url(../images/task/right.png) no-repeat top/100% 100%;
}

.lang-ar .task-tab-WOW,
.lang-ur .task-tab-WOW
{
    background: url(../images/task/left.png) no-repeat top/100% 100%;
}

.lang-ar .task-tab-Daily.task-tab-act,
.lang-ur .task-tab-Daily.task-tab-act
{
    background: url(../images/task/right-act.png) no-repeat top/100% 100%;
}

.lang-ar .task-tab-WOW.task-tab-act,
.lang-ur .task-tab-WOW.task-tab-act
{
    background: url(../images/task/left-act.png) no-repeat top/100% 100%;
}

.task-time {
    position: absolute;
    top: 0.6rem;
    left: 0.25rem;
    width: 4.35rem;
    height: .37rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #fff;
    font-size: .22rem;
}

.task-time-icon {
    width: .23rem;
    height: .23rem;
    margin-right: .1rem;
    background: url(../images/task/time-icon.png) no-repeat top/100% 100%;
}

.task-list {
    position: absolute;
    left: .25rem;
    top: 1rem;
    width: 4.25rem;
    height: 2.96rem;
    font-size: .24rem;
}

.task-time-text {
    display: none;
}

.task-time-text-act {
    display: block;
}

.task-list-Daily,
.task-list-WOW {
    width: 100%;
    height: 100%;
    display: none;
    color: #fff;
}

.task-list-act {
    display: flex;
    flex-direction: column;
}

.task-list-item {
    flex: 1;
    display: flex;
    align-items: center;
}

.task-list-item-icon {
    width: .59rem;
    height: .59rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../images/task/task-item-bg.png) no-repeat top/100% 100%;
    position: relative;
    box-sizing: border-box;
    /* background: #000;
    border: 1px solid #c10002; */
}

.task-num {
    position: absolute;
    font-size: .16rem;
    bottom: .05rem;
    right: .05rem;
}

.task-list-item-icon img {
    width: .45rem;
    height: .43rem;
}

.task-list-item-text {
    flex: 1;
    line-height: .24rem;
    margin-left: .1rem;
}

.task-list-item-num {
    text-align: center;
}

.task-list-item-num-text {
    font-size: .16rem;
}

.task-list-item-num-btn {
    width: 1.20rem;
    height: .34rem;
    margin-top: .03rem;
    text-align: center;
    line-height: .34rem;
    text-indent: -0.05rem;
}

.task-notCompleted .task-list-item-num-btn {
    color: #fff;
    background: url(../images/task/task-status3.png) no-repeat top/100% 100%;

}

.task-Completed .task-list-item-num-btn {
    color: #fff;
    background: url(../images/task/task-status1.png) no-repeat top/100% 100%;
}

.task-Received .task-list-item-num-btn {
    color: #94dc65;
    position: relative;
    /*padding: 0 0.35rem;*/
    transform: translateX(0.15rem);

}

.task-Received .task-list-item-num-btn::before {
    content: '';
    position: absolute;
    width: .25rem;
    left: -0.1rem;
    top: 50%;
    transform: translateY(-50%);
    height: .19rem;
    background: url(../images/task/task-status2.png) no-repeat top/.25rem .19rem;
}

.task-list-tempPlay {
    position: absolute;
    bottom: 0.35rem;
    left: 0.4rem;
    width: .54rem;
    height: .47rem;
    background: url(../images/task/task-icon.png) no-repeat top/100% 100%;
}

.task-list-startGame {
    position: absolute;
    bottom: 0.36rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.84rem;
    height: .53rem;
    font-size: .24rem;
    color: #fff;
    text-align: center;
    line-height: .53rem;
    background: url(../images/task/play-btn.png) no-repeat top/100% 100%;
}

.task-list-bubble{
    position: absolute;
    top: 4rem;
    width: 4rem;
    left: 3.5rem;
    padding: .1rem;
    font-size: .24rem;
    color: #fff;
    text-align: center;
    background: url(../images/tips1.png) no-repeat top / 100% 100%;
}

.task-list-tip {
    position: absolute;
    width: 7rem;
    top: 79.5%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: .2rem;
    padding: 0.1rem .5rem;
    color: #fff;
    text-align: center;
    background: url(../images/task-list-tip-bg.png) no-repeat top/100% 100%;
}

.task-list-close {
    position: absolute;
    top: 2.5rem;
    left: 4.7rem;
    width: .73rem;
    height: 1.38rem;
    background: url(../images/task/task-close.png) no-repeat top/100% 100%;
}

.task-list-close-icon {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1000;
}

.Public-modal {
    background: url(../images/public-pop-bg.png) no-repeat;
    background-size: 10.26rem 5.83rem;
    background-position: center center;
}

.Public-modal-close {
    position: absolute;
    top: 1.2rem;
    right: 2rem;
    width: .29rem;
    height: .30rem;
    z-index: 10;
    background: url(../images/pop-cd.png) no-repeat top/100% 100%;
}
.temp-play-pop .Public-modal-close{
    position: absolute;
    top: .4rem;
    right: 0.5rem;
    width: .29rem;
    height: .30rem;
    z-index: 10;
    background: url(../images/pop-cd.png) no-repeat top/100% 100%;
}

.task-pop .Public-modal {
    background: none;
}

.Public-modal-title {
    position: absolute;
    top: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 7.07rem;
    height: .4rem;
    text-align: center;
    line-height: .4rem;
    color: #f5f2ba;
    font-size: .36rem;
}
.temp-settlement-pop .Public-modal-title{
    line-height: .34rem;
}

.Public-modal-title1 {
    position: absolute;
    top: 1.8rem;
    left: 50%;
    transform: translateX(-50%);
    width: 7.07rem;
    height: .2rem;
    text-align: center;
    color: #fff;
    font-size: .16rem;
}

.Public-modal-content {
    position: absolute;
    top: 2.1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 7.7rem;
    height: 3.2rem;
    color: #fff;
}
.complete-address-pop .Public-modal-content{
    top: 1.73rem;
}
.treasure-chest-one-pop .Public-modal-content {
    top: 3.1rem;
    height: 1.2rem;
}

.Public-modal-content-ruleText {
    box-sizing: border-box;
    /* padding-left: .5rem; */
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: .24rem;
    line-height: .42rem;
}

.start-game-pop .Public-modal-content {
    height: 3.5rem;
    text-align: center;
}

.back-pop .start-game-pop-text {
    font-size: .28rem;
    color: #fff;
}

.back-pop .start-game-pop-text .yellow {
    display: inline-block;
    width: 80%;
    font-size: .20rem;
    margin-top: .25rem;
}

.back-pop .start-game-pop-text2 {
    margin-top: .3rem;
}

.yellow {
    color: #fadbbc;
}

.start-game-pop-skip {
    margin-top: .55rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.start-game-pop-skip-icon {
    width: .25rem;
    height: .25rem;
    margin: 0 .1rem;
    position: relative;
    background: url(../images/remind_falg.png) no-repeat top/100% 100%;
}

.start-game-pop-skip-icon-act:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .21rem;
    height: .18rem;
    background: url(../images/remind_falg_act.png) no-repeat top/100% 100%;
}

.start-game-pop-skip-text {
    font-size: .2rem;
    color: #9b9b9b;
}

.start-game-pop-btnBox {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: .7rem;
}

.start-game-pop-btn-cancel {
    width: 1.95rem;
    height: .38rem;
    color: #000;
    background: url(../images/remind_cancel.png) no-repeat top/100% 100%;
}

.start-game-pop-btn-ok {
    width: 2.07rem;
    height: .38rem;
    background: url(../images/remind_ok.png) no-repeat top/100% 100%;
}
.complete-address-pop,
.address-pop{
    background: rgba(0, 0, 0, 0);
}

.tips1-pop .Public-modal-content,
.address-pop .Public-modal-content,
.public-pop .Public-modal-content,
.tips2-pop .Public-modal-content {
    height: 3.5rem;
    text-align: center;
}

.complete-address-pop .Public-modal-content {
    width: 7.2rem;
}
.form-info{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0.08rem 0;
    font-size: .22rem;
}

.form-info-left{
    width: 2.2rem;
}
.form-info-right{
    width: 4.8rem;
    height: .43rem;
    background: url(../images/address/info-bg.png) no-repeat top/100% 100%;
}

.form-id{
    background: none;
    line-height: .43rem;
    color: #a691d4;
    padding: 0 0.1rem;
}

.input-recipient-name{
    width: 100%;
    height: 100%;
    background-color: transparent;
    padding: 0 0.1rem;
    color: #a691d4;
    font-size: .22rem;
}

.input-recipient-name::placeholder{
    color: #a691d4;
    font-size: .22rem;
}

.input-email-address{
    width: 100%;
    height: 100%;
    background-color: transparent;
    padding: 0 0.1rem;
    color: #a691d4;
    font-size: .22rem;
}

.input-email-address::placeholder{
    color: #a691d4;
    font-size: .22rem;
}

.form-sys{
    position: relative;
}
.input-system-icon{
    position: absolute;
    width: .21rem;
    height: .08rem;
    top: 45%;
    right: 0.1rem;
    background: url(../images/address/sys-icon.png) no-repeat top/100% 100%;
}

.input-system{
    width: 100%;
    height: 100%;
    background-color: transparent;
    padding: 0 0.1rem;
    color: #a691d4;
    font-size: .22rem;
    border: none;
}

.address-tip{
    font-size: .18rem;
    color: #fff;
}
.address-tip1{
    margin-top: .08rem;
}

.address-agreement{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.2rem;
}

.address-agreement-icon{
    width: .25rem;
    height: .25rem;
    background: url(../images/address/agreement-icon-bg.png) no-repeat top/100% 100%;
    position: relative;
    margin:0 0.1rem;
}

.address-agreement-act .address-agreement-icon::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .21rem;
    height: .18rem;
    background: url(../images/address/agreement-icon.png) no-repeat top/100% 100%;
}

.address-agreement-text{
    font-size: .2rem;
    color: #9b8fb9;
    font-weight: 700;
}

.address-btn-group{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .15rem;
}
.address-cancel{
    width: 1.97rem;
    height: .57rem;
    background: url(../images/address/agreement-left.png) no-repeat top/100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .24rem;
    margin:0 .06rem;
}
.address-ok{
    width: 1.97rem;
    height: .57rem;
    background: url(../images/address/agreement-right.png) no-repeat top/100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .24rem;
    margin:0 .06rem;
}
.tips1-pop-text {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.8rem;
}

.tips1-pop-btnBox {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: .3rem;
}

.tips1-pop-btn-cancel {
    width: 1.97rem;
    height: .57rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: url(../images/remind_cancel.png) no-repeat top/100% 100%;
}

.tips1-pop-btn-ok {
    width: 1.97rem;
    height: .57rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../images/remind_ok.png) no-repeat top/100% 100%;
}

.address-pop .tips1-pop-text {
    flex-direction: column;
}

.address-pop .tips1-pop-text {
    width: 80%;
    margin: 0 auto;
    font-size: .28rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.temp-play-pop .Public-modal-content {
    top: 1.2rem;
    width: 6.6rem;
    height: 4rem;
    transform: translate(-50%, 0.2rem) scale(1.18);
}
.swiper-container{
    height: 100%;
}
.swiper-slide{
    position: relative;
}
.swiper-slide img {
    position: absolute;
    bottom: 0;
    left: 0;
}
.temp-play-pop .Public-modal {
    background: url(../images/general-pop-bg.png) no-repeat;
    background-size: auto 100%;
    background-position: center;
    /* transform: translateY(0.35rem) scale(1.2); */
}

.temp-play-pop .swiper-slide img {
    width: 6.6rem;
    height: 3.3rem;
}

.lang-ar .temp-play-pop .Public-modal-title,
.lang-ur .temp-play-pop .Public-modal-title
{
    text-align: right;
    font-size: .18rem;
    line-height: .22rem;
}
.lang-ru .temp-play-pop .Public-modal-title{
    font-size: .16rem;
    line-height: .2rem;
}
.temp-play-pop .Public-modal-title {
    position: absolute;
    top: 0;
    width: 94%;
    text-align: left;
    line-height: .22rem;
    color: #fff;
    font-size: .18rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.guil1{
    width: 6.6rem;
    height: 3.3rem;
    position: absolute;
    bottom: 0;
    left: 0;
}
.guil1-con{
    max-width: 2.48rem;
    font-size: .13rem;
    padding: .05rem;
    display: inline-block;
    background: url(../images/tips2.png) top/100% 100%;
    position: absolute;
}
.guil1-1{    top: 1.01rem;
    left: 1.3rem;}
.guil1-2{    top: 1.89rem;
    left: 0.4rem;}
.guil1-3{top: 0.15rem;left: 4.35rem; max-width: 1.48rem;}
.guil1-4{top: 2.3rem;right: .2rem;}
.guil1-5{top: 2.44rem;left: 2rem; max-width: 1.8rem;}
.guil1-6{top: 0.68rem;right: 0.2rem;}

.guil2-1{top: 2.44rem;
    left: 3.9rem;}
.guil2-2{    top: 0.66rem;
    left: 5.4rem;
}
.guil2-3{top: 1.6rem;left: 0.1rem; max-width: 1.48rem;}

.guil3-1{top: 1rem;left: 4.3rem;}
.guil3-2{top: 2.3rem;left: 1.4rem;}

.temp-play-pop .swiper-button-prev {
    left: 0.25rem;
    /* top: 3.4rem; */
    width: .48rem;
    height: .84rem;
    background: url(../images/left.png) no-repeat top/100% 100%;
}

.temp-play-pop .swiper-button-next {
    right: 0.28rem;
    /* top: 3.4rem; */
    width: .48rem;
    height: .84rem;
    background: url(../images/right.png) no-repeat top/100% 100%;
}

.temp-play-pop .swiper-pagination {
    right: 17%;
    transform: translateX(50%) scale(0.7);
    top: 6.5rem;
}

.temp-play-pop .swiper-pagination-bullet {
    width: .21rem;
    height: .21rem;
    display: inline-block;
    margin: 0 0.05rem;
    opacity: 1;
    background: url(../images/guidelinesBot.png) no-repeat top/100% 100%;
}

.temp-play-pop .swiper-pagination-bullet-active {
    background: url(../images/guidelinesAct.png) no-repeat top/100% 100%;
}

.temp-play-pop .temp-play-pop-btn {
    position: absolute;
    bottom: 0.1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3.58rem;
    height: .87rem;
    font-size: .36rem;
    text-align: center;
    line-height: .87rem;
    color: #fff;
    background: url(../images/startGame.png) no-repeat top/100% 100%;
}

.rank-pop-con {
    width: 6.05rem;
    height: 3.2rem;
    position: absolute;
    top: 2.5rem;
    left: 50%;
    transform: translateX(-50%) scale(1.15);
}

.rank-pop-list-title {
    width: 6.05rem;
    height: .33rem;
    display: flex;
    align-items: center;
    background: url(../images/rank/rank-nav.png) no-repeat top/100% 100%;
}

.rank-pop-list-title-item {
    flex: 1;
    color: #fff;
    font-size: .28rem;
    text-align: center;
}

.rank-pop-list {
    width: 6.05rem;
    height: 1.8rem;
    overflow-x: hidden;
    overflow-y: auto;
    border-bottom: .02rem solid #9194a7;
}

.rank-pop-list-items {
    display: flex;
    align-items: center;
    color: #fff;
    margin: .1rem 0;
}

.rank-pop-list-item {
    flex: 1;
    font-size: .24rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rank-pop-list-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: .05rem;
}

.rank-pop-list-item-icon img {
    width: .26rem;
    height: .26rem;
}

.rank-pop-list-item-score {
    color: #fadbbc;
}

.rank-pop-list-items:nth-child(1) {
    background: url(../images/rank/rank1.png) no-repeat top/100% 100%;
}

.rank-pop-list-items:nth-child(1) .rank-pop-list-item-rank {
    width: .26rem;
    height: .33rem;
    text-align: center;
    line-height: .33rem;
    color: #000;
    background: url(../images/rank/rank1-icon.png) no-repeat top/100% 100%;
}

.rank-pop-list-items:nth-child(2) {
    background: url(../images/rank/rank2.png) no-repeat top/100% 100%;
}

.rank-pop-list-items:nth-child(2) .rank-pop-list-item-rank {
    width: .26rem;
    height: .33rem;
    text-align: center;
    line-height: .33rem;
    color: #000;
    background: url(../images/rank/rank2-icon.png) no-repeat top/100% 100%;
}

.rank-pop-list-items:nth-child(3) {
    background: url(../images/rank/rank3.png) no-repeat top/100% 100%;
}

.rank-pop-list-items:nth-child(3) .rank-pop-list-item-rank {
    width: .26rem;
    height: .33rem;
    text-align: center;
    line-height: .33rem;
    color: #000;
    background: url(../images/rank/rank3-icon.png) no-repeat top/100% 100%;
}

.rank-pop-myRank {
    display: flex;
    align-items: center;
    margin-top: .1rem;
}

.rank-pop-myRank-rank,
.rank-pop-myRank-score,
.rank-pop-myRank-name {
    font-size: .24rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rank-pop-reward {
    margin-top: .1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rank-pop-reward-tips {
    font-size: .2rem;
    color: #fff;
    margin: 0 .1rem;
}

.rank-fill{
    font-size: .17rem;
    width: 1.88rem;
    height: .32rem;
    text-align: center;
    line-height: .32rem;
    color: #fff;
    margin: 0 .1rem;
    background: url(../images/rank/fill.png) no-repeat top/100% 100%;
    position: relative;
}
.rank-fill-btn{
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.rank-fill-bubble{
    position: absolute;
    top: 0.4rem;
    width: 5rem;
    left: 0rem;
    padding: .1rem;
    font-size: .24rem;
    color: #fff;
    text-align: center;
    background: url(../images/tips1.png) no-repeat top / 100% 100%;
}
.pop-content{
    position: relative;
    top: 44%;
    left: 50%;
    width: 9rem;
    height: 6.4rem;
    transform: translate(-50%, -50%);
}

.temp-play-pop .pop-content{
    position: relative;
    top: 44%;
    left: 50%;
    width: 9rem;
    height: 6.4rem;
    transform: translate(-50%, -50%) scale(1.22);
}

.rank-pop-reward-icon {
    width: .48rem;
    height: .48rem;
    position: relative;
}
.rank-pop-reward-icon:hover .rank-pop-reward-icon-hover {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.rank-pop-reward-icon-hover{
    display: none;
    position: absolute;
    bottom: .6rem;
    left: 0;
    width: 3.58rem;
    min-height: .64rem;box-sizing: border-box;
    padding: 0 .1rem;
    color: #fff;
    background: url(../images/tips2.png) no-repeat top/100% 100%;
}

.rank-pop-reward-icon.lock::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .2rem;
    height: .24rem;
    z-index: 10;
    background: url(../images/lock.png) no-repeat top/100% 100%;
}

.rank-pop-reward-icon.reward-act img {
    filter: brightness(1);
}

.rank-pop-reward-icon.reward-act::before {display: none;
}

.rank-pop-reward-icon img {
    width: 100%;
    height: 100%;

    filter: brightness(0.5);
}

.pop-task{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/*.reward-pop{*/


/* background: url(../images/reward-bg.png) no-repeat center/18.8rem 6.15rem;*/


/*}*/

.reward-pop .Public-modal {
    width: 100vw;
    background: url(../images/reward-bg.png) no-repeat center/18.8rem 6.15rem;
}

.reward-pop-title {
    position: absolute;
    color: #f5f2ba;
    font-size: .5rem;
    top: 1.03rem;
    left: 50%;
    transform: translateX(-50%);
}

.reward-pop-con {
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.reward-pop-con-item {
    width: .92rem;
    height: .92rem;
    margin: .11rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.reward-pop-con-num {
    position: absolute;
    font-size: .16rem;
    color: #fff;
    bottom: .1rem;
    right: 0.07rem;
}

.reward-pop-con-item img {
    max-width: 80%;
    max-height: 60%;
}

.reward-pop-con-item.rank-rew {
    /* background: url(../images/purple_bg.png) no-repeat top/100% 100%; */
}

.reward-pop-con-item.rank-rew img {
    width: auto;
    height: 100%;
    /* background: url(../images/purple_bg.png) no-repeat top/100% 100%; */
}

.reward-pop-con-item.Purple {
    background: url(../images/purple_bg.png) no-repeat top/100% 100%;
}

.reward-pop-con-item.Purple-rew {
    background: url(../images/prize.png) no-repeat top/100% 100%;
}

.reward-pop-con-item.Pink {
    background: url(../images/pink_bg.png) no-repeat top/100% 100%;
}

.reward-pop-con-item.Pink-rew {
    background: url(../images/prize-last.png) no-repeat top/100% 100%;
}

.reward-pop-con-item.Blue {
    background: url(../images/blue_bg.png) no-repeat top/100% 100%;
}

.reward-pop-con-item.Green {
    background: url(../images/green_bg.png) no-repeat top/100% 100%;
}


.reward-pop-con-item.Purple img{
    max-width: 90%;
    max-height: 90%;
}


.reward-pop-con-item.Pink img{
    max-width: 90%;
    max-height: 90%;
}

.reward-pop-con-item.Blue img{
    max-width: 90%;
    max-height: 90%;
}

.reward-pop-con-item.Green img{
    max-width: 90%;
    max-height: 90%;
}


.reward-pop-btn {
    position: absolute;
    bottom: .55rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.36rem;
    height: .69rem;
    text-align: center;
    line-height: .69rem;
    font-size: .3rem;
    color: #fff;
    background: url(../images/reward-btn.png) no-repeat top/100% 100%;
}

.loading-pop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    background: url(../images/home-bg.jpg) no-repeat center/cover;
}

#progress-bar-container {
    position: absolute;
    width: 11.35rem;
    height: .64rem;
    top: 80.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../images/loading-press.png) no-repeat top/100% 100%;
}

#progress-bar-box {
    /* margin-top: .08rem; */
    position: relative;
    width: 10.2rem;
    height: .2rem;

}

#progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: .2rem;
    background: #e2d787;
    border-radius: .4rem;
}

.loading-pop-text {
    position: absolute;
    top: 63%;
    left: 50%;
    font-size: .36rem;
    transform: translateX(-50%);
    color: #fff;
    display: flex;
    align-items: center;
}

.loading-pop-num {
    font-weight: bold;
    margin: 0 .1rem;
    color: #e2d787;
    font-size: .4rem;
    text-shadow: .02rem 0 #000,
    -.02rem 0 #000,
    0 .02rem #000,
    0 -.02rem #000,
    .02rem .02rem #000,
    -.02rem -.02rem #000,
    .02rem -.02rem #000,
    -.02rem .02rem #000;
}
.loading-pop-londing{
    max-width: 10rem;
    min-width: 8rem;
    text-align: center;
    text-shadow: .02rem 0 #000,
    -.02rem 0 #000,
    0 .02rem #000,
    0 -.02rem #000,
    .02rem .02rem #000,
    -.02rem -.02rem #000,
    .02rem -.02rem #000,
    -.02rem .02rem #000;
}

.game-wrapper {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    z-index: 1200;
    justify-content: center;
    align-items: center;
    background: #000;
}
.rank-rule{
    width: .23rem;
    height: .23rem;
}
.rank-rule img{
    width: 100%;
    height: 100%;
}

.back-pop .Public-modal-content {
    height: 3.5rem;
    text-align: center;
}

.start-game-pop-text {
    font-size: .28rem;
    color: #fff;
}

.start-game-pop-text2 {
    margin-top: .3rem;
}

.yellow {
    color: #fadbbc;
}

.back-pop-skip {
    margin-top: .55rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.back-pop-skip-icon {
    width: .25rem;
    height: .25rem;
    margin-right: .1rem;
    position: relative;
    background: url(../images/remind_falg.png) no-repeat top/100% 100%;
}

.back-pop-skip-icon-act:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .21rem;
    height: .18rem;
    background: url(../images/remind_falg_act.png) no-repeat top/100% 100%;
}

.back-pop-skip-text {
    font-size: .2rem;
    color: #9b9b9b;
}

.start-game-pop-btnBox {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: .7rem;
}

.start-game-pop-btn-cancel {
    width: 1.97rem;
    height: .57rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: url(../images/remind_cancel.png) no-repeat top/100% 100%;
}

.start-game-pop-btn-ok {
    width: 1.97rem;
    height: .57rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../images/remind_ok.png) no-repeat top/100% 100%;
}

.treasure-chest-pop {
    text-align: center;
}

.treasure-chest-pop .start-game-pop-text {
    font-size: .2rem;
    color: #fff;
}

.start-game-pop-text2 {
    margin-top: .3rem;
}

.yellow {
    color: #f5f2ba;
}

.back-pop-skip {
    margin-top: .55rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.back-pop-skip-icon {
    width: .25rem;
    height: .25rem;
    margin-right: .1rem;
    position: relative;
    background: url(../images/remind_falg.png) no-repeat top/100% 100%;
}

.back-pop-skip-icon-act:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .21rem;
    height: .18rem;
    background: url(../images/remind_falg_act.png) no-repeat top/100% 100%;
}

.back-pop-skip-text {
    font-size: .2rem;
    color: #9b9b9b;
}

.treasure-chest-pop-btnBox {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: .2rem;
    font-size: .24rem;
}

.treasure-chest-pop-btn-cancel {
    width: 2.87rem;
    height: .69rem;
    /* color: #000; */
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../images/Treasure_left_btn.png) no-repeat top/100% 100%;
}

.treasure-chest-pop-btn-ok {
    width: 2.87rem;
    height: .69rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../images/Treasure_right_btn.png) no-repeat top/100% 100%;
}

.treasureTemp-chest-pop-btnBox {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .24rem;
    position: absolute;
    bottom: .9rem;
    left: 50%;
    transform: translateX(-50%);
}
.lang-ru .temp-settlement-pop .treasureTemp-chest-pop-btnBox{
    font-size: .16rem;
}

.treasureTemp-chest-pop-btn-cancel {
    width: 2.87rem;
    height: .69rem;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../images/Treasure_left_btn.png) no-repeat top/100% 100%;
}

.treasureTemp-chest-pop-btn-ok {
    width: 2.87rem;
    height: .69rem;
    display: flex;
    justify-content: center;
    color: #fff;
    align-items: center;
    background: url(../images/Treasure_right_btn.png) no-repeat top/100% 100%;
}

.Treasure_icon_bg {
    width: 1.15rem;
    height: 1.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.2rem auto;
    background: url(../images/Treasure_bg.png) no-repeat top/100% 100%;
}

.Treasure_icon_bg img {
    max-width: 80%;
    max-height: 80%;
}

.settlement-content {
    position: absolute;
    top: 2rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settlement-content-hero {
    width: 2.01rem;
    height: 3.49rem;
    margin-right: 1.1rem;
    background: url(../images/single_hero.png) no-repeat top/100% 100%;
}
.lang-ar .settlement-content-hero,
.lang-ur .settlement-content-hero
{
    margin-left: 1.1rem;
    margin-right: 0;
}

.settlement-content-score {
    height: 100%;
    color: #fff;
}

.settlement-content-score-text1 {
    font-size: .24rem;
    position: relative;
}

.settlement-content-score-text1:before {
    content: '';
    position: absolute;
    top: 50%;
    left: -.25rem;
    width: .19rem;
    height: .21rem;
    transform: translate(-50%, -50%) scale(1.5);
    background: url(../images/single_icon1.png) no-repeat top/100% 100%;
}

.settlement-content-score-text1Num {
    color: #f5f2ba;
    font-size: .52rem;
    text-align: center;
}

.settlement-content-score-text2 {
    font-size: .24rem;
    margin-top: .2rem;
    position: relative;
}

.settlement-content-score-text2:before {
    content: '';
    position: absolute;
    top: 50%;
    left: -.25rem;
    width: .25rem;
    height: .25rem;
    transform: translate(-50%, -50%) scale(1.5);
    background: url(../images/single_icon2.png) no-repeat top/100% 100%;
}

.settlement-content-score-text2Num {
    color: #f5f2ba;
    font-size: 1.32rem;
    line-height: 1.32rem;
    margin-left: .4rem;
}

.settlement-box {
    position: absolute;
    bottom: 0.9rem;
    left: 7.2rem;
    width: 1.33rem;
    height: .73rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../images/single_bg.png) no-repeat top/100% 100%;
}

.settlement-box img {
    max-width: 80%;
    max-height: 80%;
}

.settlement-box-num {
    color: #fff;
    position: absolute;
    font-size: .24rem;
    bottom: 0.03rem;
    right: .1rem;
}

.pause-pop .Public-modal {
    background: none;
}

.pause-icon {
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.78rem;
    height: 1.78rem;
}

.pause-icon img {
    width: 100%;
    height: 100%;
}

.pause-pop-btnBox {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: .24rem;
}

.pause-pop-btn-cancel {
    width: 2.87rem;
    height: .69rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .24rem;
    background: url(../images/Treasure_left_btn.png) no-repeat top/100% 100%;
}

.pause-pop-btn-ok {
    width: 2.87rem;
    height: .69rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .24rem;
    background: url(../images/Treasure_right_btn.png) no-repeat top/100% 100%;
}

.score-pop .Public-modal {
    background: url(../images/score_bg.png) no-repeat;
    background-size: 16.1rem 11.54rem;
    /* background-position: center; */
    background-position-y: -1rem;
}

.score-pop-title1 {
    position: absolute;
    top: 1.8rem;
    left: 50%;
    transform: translate(-50%);
    font-size: .4rem;
    color: #f5f2ba;
    text-align: center;
    width: 4.25rem;
    height: .77rem;
    line-height: .75rem;
    background: url(../images/score_title_bg.png) no-repeat top/100% 100%;
}

.score-pop-title2 {
    position: absolute;
    top: 2.9rem;
    left: 50%;
    transform: translate(-50%);
    font-size: .5rem;
    color: #fff;
    text-align: center;
    width: 7.26rem;
    height: .73rem;
    line-height: .73rem;
    background: url(../images/score_text_bg.png) no-repeat top/100% 100%;
}

.reward-pop-con-name{
    position: absolute;
    color: #fff;
    top: 1rem;
    text-align: center;
    font-size: 0.18rem;
}

.lang-ar .score-pop-title3,
.lang-ur .score-pop-title3
{
    text-align: right;
}
.score-pop-title3 {
    position: absolute;
    top: 4.2rem;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
    font-size: .28rem;
    color: #fff;
    width: 6rem;
    height: 1rem;
    /*line-height: .3rem;*/
    text-shadow: .02rem 0 #000,
    -.02rem 0 #000,
    0 .02rem #000,
    0 -.02rem #000,
    .02rem .02rem #000,
    -.02rem -.02rem #000,
    .02rem -.02rem #000,
    -.02rem .02rem #000;
}

.score-pop-title2 span {
    color: #f5f2ba;
    display: inline-block;
    text-indent: 0.3rem;
    text-shadow: .02rem 0 #000,
    -.02rem 0 #000,
    0 .02rem #000,
    0 -.02rem #000,
    .02rem .02rem #000,
    -.02rem -.02rem #000,
    .02rem -.02rem #000,
    -.02rem .02rem #000;
}

.score-pop-box {
    position: absolute;
    width: 1.96rem;
    height: 1.12rem;
    top: 4rem;
    left: 66%;
    transform: translate(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../images/single_bg.png) no-repeat top/100% 100%;
}

.score-pop-box img {
    max-width: 90%;
    max-height: 100%;
    transform: translateY(-0.3rem);
}

.score-pop-btnBox {
    position: absolute;
    bottom: 1.3rem;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: .3rem;
}

.score-pop-btn-cancel {
    width: 2.51rem;
    height: .61rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../images/score_btn_left.png) no-repeat top/100% 100%;
}

.score-pop-btn-ok {
    width: 2.83rem;
    height: .61rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../images/score_btn_right.png) no-repeat top/100% 100%;
}

.Public-modal-content-ruleText .activity-time {
    margin-top: .4rem;
    margin-bottom: .34rem;
}

.Public-modal-content-ruleText .redFont {
    color: #ff2a2b;
}

.rules-row-table {
    border: 1px solid #f5f2ba;
    background-color: #0b0a0e;
}

.rules-row-table .rules-row-table-row {
    display: flex;
    border-bottom: 1px solid #f5f2ba;
}

.rules-row-table .rules-row-table-td {
    border-right: 1px solid #f5f2ba;
}

.rules-row-table .rules-row-table-row:last-child {
    border-bottom: none;
}

.rules-row-table .rules-row-table-td:last-child {
    border-right: none;
}

.rulesOne {
    margin-top: .25rem;
    margin-bottom: .55rem;
}

.rulesTwo {
    margin-top: .14rem;
    margin-bottom: .34rem;
}

.rulesThree {
    margin-top: .31rem;
    margin-bottom: .53rem;
}

.rulesFour {
    margin-top: .22rem;
    margin-bottom: .44rem;
}

.rulesOne .rules-row-table-td,
.rulesTwo .rules-row-table-td {
    flex: 1;
    text-align: center;
    /* height: .46rem;
    line-height: .46rem; */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0.1rem;
}

.rules-step-desc+.rules-step-desc {
    margin-top: .07rem;
}

.rulesThree .rules-row-table-row .rules-row-table-td,
.rulesFour .rules-row-table-row .rules-row-table-td {
    text-align: center;
    /* height: .46rem;
    line-height: .46rem; */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0.1rem;
}

.rulesThree .rules-row-table-row .rules-row-table-td:first-child,
.rulesFour .rules-row-table-row .rules-row-table-td:first-child {
    width: 2.6rem;
}

.rulesThree .rules-row-table-row .rules-row-table-td:last-child,
.rulesFour .rules-row-table-row .rules-row-table-td:last-child {
    flex: 1;
}

.rules-step-desc .perch {
    margin-left: .2rem;
}

.milestone-total-text{
    width: 1.6rem;
    text-align: center;
}
.milestone-total-score{
    font-size: .46rem;
    color: #ffe788;
}

/* 多语言适配 */
.lang-en .task-time{
    top: 0.6rem;
}
.lang-en .right-top-rank{
    line-height: .42rem;
}

.lang-zh .task-time{
    top: 0.6rem;
}
.lang-zh .right-top-rank{
    line-height: .42rem;
}

.lang-ru .title-small{
    width: 8rem;
}
.lang-ru .right-top-rank{
    line-height: .42rem;
}
.lang-ru .milestone-total-text{
    width: 1.95rem;
}
.lang-ru .guil1-5 {
    top: 2.42rem;
    left: 1.8rem;
    max-width: 2rem;
}
.lang-ru .task-tab {
    font-size: .18rem;
}
.lang-ru .task-time,
.lang-ru .task-list-Box{
    font-size: .18rem;
}
.lang-ru .task-time{
    font-size: .18rem;
    line-height: .18rem;
    width: 85%;
    top: 0.6rem;
}


.lang-de .title-small{
    width: 8rem;
}
.lang-de .right-top-rank{
    line-height: .42rem;
}
.lang-de .milestone-total-text{
    width: 1.95rem;
}
.lang-de .guil1-5 {
    top: 2.42rem;
    left: 1.8rem;
    max-width: 2rem;
}
.lang-de .task-tab {
    font-size: .18rem;
}
.lang-de .task-time,
.lang-de .task-list-Box{
    font-size: .18rem;
}
.lang-de .task-time{
    font-size: .18rem;
    line-height: .18rem;
    width: 85%;
    top: 0.6rem;
}

.lang-pt .title-small{
    width: 8rem;
}
.lang-pt .right-top-rank{
    line-height: .42rem;
}
.lang-pt .task-time{
    top: 0.6rem;
}

.lang-fr .title-small{
    /* width: 8rem; */
}
.lang-fr .right-top-rank{
    line-height: .42rem;
}
.lang-fr .task-time{
    font-size: .18rem;
    line-height: .18rem;
    width: 90%;
    top: 0.6rem;
    left: 0.4rem;
}

.lang-es .right-top-rank{
    line-height: .42rem;
}
.lang-es .task-time{
    font-size: .18rem;
    line-height: .18rem;
    width: 90%;
    top: 0.6rem;
    left: 0.4rem;
}
.percentage{
    opacity: 0;
    position: relative;
    z-index: -10;
}

.lang-tr .right-top-rank{
    line-height: .42rem;
}
.lang-tr .task-time{
    font-size: .18rem;
    line-height: .18rem;
    width: 90%;
    top: 0.6rem;
}

.lang-uz .right-top-rank{
    line-height: .42rem;
}
.lang-uz .task-time{
    font-size: .19rem;
    line-height: .18rem;
    width: 90%;
    top: 0.6rem;
}

.lang-ar .task-time,
.lang-ur .task-time
{
    font-size: .19rem;
    line-height: .18rem;
    width: 90%;
    left: 0.25rem;
    top: 0.6rem;
}
.lang-ar .task-time-text,
.lang-ur .task-time-text
{
    margin-right: 0.1rem;
}
.lang-ar .task-list-item-text,
.lang-ur .task-list-item-text
{
    margin-right: .1rem;
}
.lang-ar .title,
.lang-ur .title
{
    left: -1.5rem;
}
.lang-ar .pop-content,
.lang-ur .pop-content
{
    left: 17.5% !important;
}
.lang-fr .loading-pop-londing,
.lang-ur .loading-pop-londing,
.lang-ar .loading-pop-londing
{
    max-width: 11rem;
    min-width: 8rem;
    width: 11rem;
}

.showInfo{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 100;
}

.reward-act .showInfo:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, #fff, transparent);
    animation: sweep 1.5s infinite;
}

@keyframes sweep {
    100% {
        left: 100%
    }
}

.rewarded .rank-pop-reward-icon::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .37rem;
    height: .27rem;
    z-index: 10;
    background: url(../images/finish.png) no-repeat top/100% 100%;
}

.language-selector {
    position: absolute;
    top: .2rem;
    right: 1.25rem;
    width: .63rem;
    height: .63rem;
    z-index: 1000;
    background: url(../images/lang.png) no-repeat top/100% 100%;
}
.lang_list{
    position: absolute;
    top: 0.93rem;
    right: .7rem;
    width: 1.78rem;
    z-index: 1000;
    padding: 0.05rem;
    font-size: 0.19rem;
    background: url(../images/lang_bg.png) no-repeat top/100% 100%;
}
.lang_list ul li{
    text-align: center;
    height: .33rem;
    line-height: .33rem;
}
.lang_list ul li a{
    color: #fff;
}
.lang_list_li.on{
    background: url(../images/lang_act.png) no-repeat top/100% 100%;
}