.pop {
    display: none;
    font-family: 'font';
    font-size: .24rem;
}

.lang_th .pop {
    font-family: 'font1';
}

.spt {
    background-image: url('../img/spt.png');
    background-repeat: no-repeat;
    background-size: 7.5rem 16.24rem;
}

.close {
    position: absolute;
    right: 0;
    top: -.3rem;
    width: .25rem;
    height: .23rem;
    background-position: -7.01rem 0;
}

.login_container {
    position: relative;
    width: 5.93rem;
    height: 6rem;
    background: url('../img/loginpop.png') no-repeat center /100% 100%;
    padding-top: 1.2rem;
    box-sizing: border-box;
}

.lang_es .login_container {
    background: url('../img/loginpop_es.png') no-repeat center /100% 100%;
}

.lang_th .login_container {
    background: url('../img/loginpop_th.png') no-repeat center /100% 100%;
}

.loginpop_des {
    line-height: 1;
    text-align: center;
    color: #a1acb6;
}

.email {
    display: block;
    width: 5.08rem;
    height: .62rem;
    box-sizing: border-box;
    border: 1px solid #3d3d3d;
    background: #131317;
    margin: .25rem auto .2rem;
    color: #fff;
    font-size: .24rem;
    padding: 0 .15rem;
}

.code_box {
    width: 5.08rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

.sendCode {
    width: 1.51rem;
    height: .59rem;
    background-position: -2.94rem -5.85rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #282b2d;
    font-size: .32rem;
}

.verificationCode {
    width: 3.45rem;
    height: .62rem;
    box-sizing: border-box;
    border: 1px solid #3d3d3d;
    background: #131317;
    color: #fff;
    font-size: .24rem;
    padding: 0 .15rem;
}

.signup {
    width: 2.52rem;
    height: .66rem;
    background-position: -2.6rem -5.15rem;
    margin: .3rem auto .1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .32rem;
    color: #e0ddd0;
}

.passwordLogin {
    text-align: center;
    color: #a1acb6;
    font-size: .24rem;
    text-decoration: underline;
    text-underline-offset: .05rem;
    display: block;
}

.bottom_btn {
    width: 3.68rem;
    height: .48rem;
    background-position: -.01rem -7.83rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: .3rem;
    left: 50%;
    transform: translateX(-50%);
}

.bottom_btn a {
    width: .48rem;
    height: .48rem;
}

.tip_pop,
.invite_pop {
    width: 5.93rem;
    height: 3.08rem;
    background: url('../img/pop2.png') no-repeat center /100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: .45rem;
    box-sizing: border-box;
}

.pop_title {
    font-size: .32rem;
    color: #f5f5f5;
    display: inline-block;
    position: relative;
    text-align: center;
    letter-spacing: .04rem;
    line-height: 1;
}

.pop_title::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: .15rem;
    height: .1rem;
    right: -.25rem;
    background: url('../img/spt.png') no-repeat -7.19rem -16.14rem/7.5rem 16.24rem;
}

.pop_title::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -.25rem;
    width: .15rem;
    height: .1rem;
    background: url('../img/spt.png') no-repeat -7.01rem -16.14rem/7.5rem 16.24rem;
}

.tip {
    width: 6rem;
    height: 1.8rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: .1rem;
    color: #bac6cd;
    font-size: .28rem;
}

#bindCuccess .tip {
    height: 1.5rem;
    margin-top: 0;
}

.join {
    transform: translateY(-.2rem);
    width: 2.61rem;
    height: .63rem;
    background-position: 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff6dd;
    font-size: .34rem;
}

.lang_es .join {
    font-size: .32rem;
}

.share_pop {
    width: 5.93rem;
    height: 5.84rem;
    background: url('../img/pop1.png') no-repeat center /100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: .45rem;
    text-align: center;
    letter-spacing: .01rem;
    box-sizing: border-box;
}

.share_media {
    width: 5.1rem;
    height: 1.55rem;
    background: url('../img/shareMT.png') no-repeat center /100% 100%;
    margin: .2rem auto .25rem;
    box-sizing: border-box;
    padding-top: .3rem;
}

.media_list {
    width: 4.68rem;
    height: 1.07rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.media_list a {
    width: .82rem;
    height: 1.04rem;
}

.copy_tip {
    font-size: .2rem;
    color: rgba(255, 255, 255, .5);
    margin: .35rem auto .25rem;
}

.copy_descript {
    width: 5.4rem;
    color: #bac6cd;
    font-size: .24rem;
    word-break: normal;
}

.lang_th .copy_descript {
    font-size: .2rem;
}

.share_tip {
    font-size: .2rem;
    color: rgba(255, 255, 255, .5);
}

.lang_th .share_tip {
    font-size: .18rem;
}

.promotion_pop,
.get_pop,
.info_pop {
    width: 5.93rem;
    height: 4.7rem;
    background: url('../img/pop4.png') no-repeat center /100% 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: .45rem;
    box-sizing: border-box;
}

.fail_tip {
    color: #bac6cd;
    font-size: .28rem;
    text-align: center;
    margin: .25rem auto .15rem;
}

.level_tip {
    font-size: .2rem;
    transform: translateY(.1rem);
    text-align: center;
    color: rgba(255, 255, 255, .5);
}

.current_level {
    font-size: 2rem;
    color: #bac6cd;
    line-height: 1;
}

.promotion_tip {
    font-size: .2rem;
    color: rgba(255, 255, 255, .5);
    text-align: center;
}

.fillIn {
    width: 2.76rem;
    height: .58rem;
    background-position: 0 -7.1rem;
    margin: .3rem auto .15rem;
    font-size: .34rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff6dd;
}

.lang_es .fillIn {
    width: 4.36rem;
    background-position: 0 -8.71rem;
}

.gift_pop {
    width: 5.93rem;
    height: 5.3rem;
    background: url('../img/pop3.png') no-repeat center /100% 100%;
    display: flex;
    padding-top: .45rem;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.gift_tip {
    text-align: center;
    color: #bac6cd;
    font-size: .28rem;
    margin: .3rem auto .2rem;
}

.giftCard {
    position: relative;
    width: 2.04rem;
    height: 1.24rem;
    margin: 0 auto;
    background: url('../img/giftCard.png') no-repeat center /100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.giftCard_dj {
    width: 1.2rem;
    height: 1.2rem;
}

.giftCard_name {
    font-size: .2rem;
    color: rgba(255, 255, 255, .5);
    position: absolute;
    top: 0;
    right: .05rem;
}

.giftCard_num {
    font-size: .24rem;
    color: #bebbb1;
    position: absolute;
    bottom: .05rem;
    right: .1rem;
}

.credited_time {
    color: rgba(255, 255, 255, .5);
    font-size: .2rem;
    text-align: center;
}

.lang_th .credited_time {
    font-size: .18rem;
}

.records_pop {
    width: 5.93rem;
    height: 6rem;
    background: url('../img/pop6.png') no-repeat center /100% 100%;
    display: flex;
    padding-top: .45rem;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.records_pop .records {
    height: 4.52rem;
    overflow: hidden;
    overflow-y: auto;
    margin-top: .4rem;
    padding: 0 .2rem;
}

.record {
    position: relative;
    width: 5.32rem;
    height: .56rem;
    background-color: rgba(0, 0, 0, .5);
    border: 1px solid #515252;
    box-sizing: border-box;
    margin-bottom: .08rem;
    padding-left: .4rem;
    color: #a1acb6;
    display: flex;
    align-items: center;
}

.record::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: .1rem;
    width: .23rem;
    height: .23rem;
    background: url('../img/spt.png') no-repeat -6.68rem -16.01rem/7.5rem 16.24rem;
}

.giftName {
    color: #df6131;
}

.gift_box {
    width: 1.78rem;
    height: 1.78rem;
    background: url('../img/djbg.png') no-repeat center /100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gift_box img {
    width: 1.2rem;
    height: 1.2rem;
}

.get_tip {
    color: #bac6cd;
    font-size: .28rem;
    margin: .3rem auto;
    letter-spacing: 1px;
    width: 5.4rem;
    text-align: center;
    word-break: keep-all;
}

.send_tip,
.info_des {
    font-size: .2rem;
    color: rgba(255, 255, 255, .5);
    margin-top: .3rem;
    text-align: center;
    letter-spacing: .01rem;
}

.info_des {
    margin-top: .15rem;
}

.info_tip {
    font-size: .28rem;
    color: #bac6cd;
    margin: .3rem auto;
}

.invite_pop .info_tip {
    margin: .2rem auto;
}

.lang_es .info_tip {
    font-size: .26rem;
    text-align: center;
    width: 90%;
    margin: .25rem auto;
}

.form_group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .15rem;
}

.form_group label {
    font-size: .24rem;
    color: #c6c7c7;
    text-align: right;
    flex: 1;
}

.form_group input,
.invite_pop .invite_code {
    width: 3.93rem;
    height: .49rem;
    background-color: #0f1010;
    border: 1px solid #5c5d5e;
    margin-left: .15rem;
    font-size: .28rem;
    color: #fff;
    text-align: center;
    padding: auto .1rem;
    box-sizing: border-box;
}

.invite_pop .invite_code {
    width: 4.5rem;
    padding: 0 .2rem;
    margin-bottom: .2rem;
}

.infoEmail::placeholder {
    color: #ff6c2e;
}

.info_btn {
    width: 5.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .2rem;
}

.info_btn a {
    width: 2.35rem;
    height: .57rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .28rem;
}

.info_btn .edit {
    display: none;
    color: #282b2d;
    background-position: 0 -5.15rem;
}

.info_btn.over .edit {
    display: flex;
}

.info_btn.over .cancel {
    display: none;
}

.cancel {
    color: #282b2d;
    background-position: 0 -5.15rem;
}

.confirm1 {
    color: #fff6dd;
    background-position: 0 -5.84rem;
}

.confirm2 {
    width: 2.35rem;
    height: .57rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .28rem;
    color: #fff6dd;
    background-position: 0 -5.84rem;
}

.rule_box_en {
    display: none;
    width: 5.2rem;
    height: 3.6rem;
    margin-top: .4rem;
    margin-left: .3rem;
    overflow: hidden;
    overflow-y: auto;
    color: #c6c7c7;
    font-size: .24rem;
    padding-right: .2rem;
}

.rule_box_es {
    display: none;
    width: 5.2rem;
    height: 3.6rem;
    margin-top: .4rem;
    margin-left: .3rem;
    overflow: hidden;
    overflow-y: auto;
    color: #c6c7c7;
    font-size: .24rem;
    padding-right: .2rem;
}

.rule_box_th {
    display: none;
    width: 5.2rem;
    height: 3.6rem;
    margin-top: .4rem;
    margin-left: .3rem;
    overflow: hidden;
    overflow-y: auto;
    color: #c6c7c7;
    font-size: .24rem;
    padding-right: .2rem;
}

.lang_en .rule_box_en {
    display: block;
}

.lang_es .rule_box_es {
    display: block;
}

.lang_th .rule_box_th {
    display: block;
}

.rule_pop,
.mercenary_pop {
    width: 5.93rem;
    height: 5.1rem;
    background: url('../img/pop5.png') no-repeat center /100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: .45rem;
    box-sizing: border-box;
}

.rule_pop {
    word-break: normal;
}

.mercenary_pop {
    height: auto;
    background: url('../img/pop6.png') no-repeat center /100% 100%;
    padding-top: .4rem;
}

.pop_title .logo {
    margin: 0;
}

.mercenary_item {
    width: 5.32rem;
    /* height: 1.05rem; */
    background: url('../img/item.png') no-repeat center/100% 100%;
    display: flex;
    /* align-items: center; */
    box-sizing: border-box;
    padding: 0 .2rem;
    margin-bottom: .2rem;
}

.avatar_area {
    position: relative;
    width: .79rem;
    box-sizing: border-box;
    padding-top: .1rem;
    padding-bottom: .1rem;
}

.avatar_area::after {
    content: '';
    position: absolute;
    top: .1rem;
    left: 0;
    width: .77rem;
    height: .77rem;
    background: url('../img/box.png') no-repeat center/100% 100%;
}

.avatar_area .user_avatar {
    width: .77rem;
    height: .77rem;
}

.names {
    width: .79rem;
    font-size: .18rem;
    color: rgba(255, 255, 255, .5);
    margin-top: .05rem;
    word-break: normal;
    white-space: wrap;
    line-height: 1.1;
    text-align: center;
}

.completionCount {
    font-size: .2rem;
    color: rgba(255, 255, 255, .5);
}

.task_des {
    padding-top: .2rem;
    margin-left: .2rem;
}

.task_des_box {
    font-size: .24rem;
    color: #f5f5f5;
    margin-bottom: .1rem;
    white-space: nowrap;
}

.mercenary_list {
    margin-top: .3rem;
    margin-bottom: .3rem;
    height: 4.5rem;
    overflow: hidden;
    overflow-y: auto;
    padding-right: .2rem;
    padding-left: .2rem;
}

.history_pop {
    width: 5.93rem;
    height: 7.54rem;
    background: url('../img/pop7.png') no-repeat center /100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: .45rem;
    box-sizing: border-box;
}

.history_item {
    padding: .12rem;
    width: 5.32rem;
    background: url('../img/item1.png') no-repeat center/100% 100%;
    display: flex;
    margin-bottom: .15rem;
}

.gift_bg {
    width: .88rem;
    height: .88rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: url('../img/djbg.png') no-repeat center/100% 100%;
}

.gift_img {
    width: .8rem;
    height: .8rem;
}

.gift_num {
    position: absolute;
    bottom: 0;
    right: .05rem;
    font-size: .18rem;
    color: rgba(255, 255, 255, .5);
}

.gift_name {
    text-align: center;
    font-size: .18rem;
    color: rgba(255, 255, 255, .5);
}

.gift_info {
    width: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.currentProgress {
    font-size: .28rem;
    color: #f5f5f5;
    line-height: 1;
}

.progress_des {
    font-size: .2rem;
    color: rgba(255, 255, 255, .5);
    margin-top: .1rem;
    word-break: normal;
}

.currentProgress_box {
    margin-left: .2rem;
    flex: 1;
}

.history_list {
    margin-top: .4rem;
    height: 6.2rem;
    overflow: hidden;
    overflow-y: auto;
    padding: 0 .15rem;
    word-break: normal;
}

.reason div {
    display: none;
}

.reason.one div:nth-child(1) {
    display: block;
}

.reason.two div:nth-child(2) {
    display: block;
}

.reason.three div:nth-child(3) {
    display: block;
}

.reason.four div:nth-child(4) {
    display: block;
}

.not_available {
    display: none;
    width: 6rem;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, .5);
    font-size: 2rem;
}

.history_pop.gray .not_available {
    display: flex;
}

.history_pop.gray .history_list {
    display: none;
}

.share_img {
    width: 10.8rem;
    height: 19.2rem;
    pointer-events: none;
}

.share_img_pop {
    width: 5rem;
    height: 8.8rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.saveImg {
    position: relative;
    width: 10.8rem;
    height: 19.2rem;
    transform: scale(.45);
}

.qrcode {
    width: 2.14rem;
    height: 2.14rem;
    position: absolute;
    top: 16.12rem;
    left: 50%;
    transform: translateX(-50%);
}


.poster-save-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.save_tip {
    position: absolute;
    bottom: -.4rem;
    width: 100%;
    text-align: center;
    font-size: .3rem;
}

.login-role-popup {
    width: 6.5rem;
    background: #191922;
    border-radius: 0.12rem;
    margin: 0 auto;
    padding: 0 0 0.32rem;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    transform: scale(1) translate(-50%, -50%);
    overflow: hidden;
}

.login-role-popup .close {
    top: .2rem;
    right: .2rem;
}

.login-role-popup h3 {
    height: 0.8rem;
    background: #000 url(https://test-common-web.intlgame.com/li-pass/static/li_logo.png) no-repeat 50% 50% / auto 80%;
}

.login-role-content {
    padding: 0.5rem 0.4rem;
}

.login-role-popup p {
    font-size: 0.26rem;
    color: #ffffffe6;
}

.login-role-content ul {
    padding: 0.2rem 0 0;
    color: #6D68F6;
}

.login-role-content ul span {
    padding: 0.2rem 0;
    color: #fff;
}

.login-role-popup .ant-form-item-row {
    display: flex;
    justify-content: space-between;
    padding: 0 0.4rem;
    gap: 0.14rem;
}

.login-role-btn {
    width: 2.1rem;
    background-color: #7064FF;
    border: none;
    border-radius: 0.08rem;
    font-size: 0.24rem;
    color: #fff;
    padding: 0.05rem 0;
}

.login-role-btn {
    width: 2.1rem;
    background-color: #7064FF;
    border: none;
    border-radius: 0.08rem;
    font-size: 0.24rem;
    color: #fff;
    padding: 0.05rem 0;
}

.ssstr32 {
    padding: 0.18rem 0;
    font-size: 0.28rem;
}

.share_des {
    width: 8.85rem;
    height: .53rem;
    font-size: .28rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 12.57rem;
    left: 50%;
    transform: translateX(-50%);
    background: url('../img/copybg1.png') no-repeat center/100% 100%;
}

.lang_en .share_des {
    width: 7.4rem;
}

.share_list {
    position: absolute;
    top: 13.37rem;
    left: 50%;
    transform: translateX(-50%);
    width: 7.57rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.share_list li {
    position: relative;
    width: 2.33rem;
    height: 2.33rem;
    background: url('../img/djbg2.png') no-repeat center/100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.share_list li img {
    width: 2rem;
    height: 2rem;
}

.share_list_dj2 {
    display: none;
}

.mxg .share_list_dj1 {
    display: none;
}

.mxg .share_list_dj2 {
    display: block;
}

.share_dj_name {
    position: absolute;
    top: .02rem;
    right: .05rem;
    font-size: .32rem;
    color: rgba(255, 255, 255, .5);
}

.lang_th .share_dj_name {
    font-size: .22rem;
    white-space: nowrap;
}

.share_dj_num {
    position: absolute;
    bottom: 0;
    right: .05rem;
    font-size: .32rem;
    color: #bebbb1;
}

@media screen and (min-width: 600px) and (max-width: 1200px) {
    .saveImg {
        transform: scale(.3);
    }

    .share_img_pop {
        width: 3.35rem;
        height: 5.8rem;
    }
}