.warp {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: url(../images/bg.jpg) no-repeat top center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.exchangeCode {
    color: #000;
}

.warp.show .invite_code,
.warp.show .player_list {
    animation: ani1 .5s ease forwards;
}

.warp.show .right_box {
    animation: ani2 .5s ease forwards;
}

@keyframes ani1 {
    0% {
        opacity: 0;
        transform: translateX(-1rem);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ani2 {
    0% {
        opacity: 0;
        transform: translateX(1rem);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.part {
    position: relative;
    width: 8.89rem;
    height: 9.44rem;
    font-size: .28rem;
    /* opacity: 0; */
}

.right_box {
    background: url(../images/box1.png) no-repeat center center/100% 100%;
    transform: translateX(1rem);
    opacity: 0;
}

.left_box {
    width: 8.06rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-right: 1rem;
}

.invite_code {
    width: 8.06rem;
    height: 2.24rem;
    background: url('../images/box2.png') no-repeat center center/100% 100%;
    margin-bottom: .42rem;
    display: flex;
    flex-direction: column;
    padding-left: .34rem;
    padding: .2rem 0 0 .34rem;
    box-sizing: border-box;
    transform: translateX(-1rem);
    opacity: 0;
}

.player_list {
    width: 8.06rem;
    height: 3.14rem;
    background: url('../images/box3.png') no-repeat center center/100% 100%;
    box-sizing: border-box;
    padding-top: .3rem;
    transform: translateX(-1rem);
    opacity: 0;
}

.invite_code>span {
    font-size: .28rem;
    color: #363a40;
}

.invite_code input {
    width: 7.41rem;
    height: .55rem;
    background: url('../images/input1.png') no-repeat center center/100% 100%;
    border: 0;
    margin: .13rem 0 .2rem 0;
    font-size: .2rem;
    padding: 0 .2rem;
    box-sizing: border-box;
    text-align: center;
}

.btn_list {
    display: flex;
    justify-content: space-between;
    width: 5.12rem;
    margin: 0 auto;
}

.btn_list a {
    width: 2.29rem;
    height: .58rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    line-height: 1;
    text-align: center;
}

.lang_ru .btn_list a {
    font-size: .2rem;
}

.copy:hover,
.create:hover,
.act2 .task_btn:hover,
.act1 .first_btn:hover,
.sure:hover {
    transition: filter .3s ease;
    filter: brightness(1.2);
}

.sure.gray:hover,
.gray .sure:hover {
    transition: initial;
    filter: brightness(1);
}

.copy {
    background: url('../images/copy.png') no-repeat center center/100% 100%;
}

.create {
    background: url('../images/create.png') no-repeat center center/100% 100%;
}
.lang_en .create {
    font-size: .2rem;
}
.lang_fr .create,
.lang_pt-BR .create,
.lang_de .create,
.lang_es-419 .create {
    font-size: .2rem;
    line-height: 1.2;
}

.tar {
    width: 1.73rem;
    height: 1.73rem;
}

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

.list li {
    width: 1.73rem;
    height: 2.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.player_name {
    font-size: .2rem;
    line-height: 1;
    white-space: nowrap;
}

.player_nums {
    width: 7.36rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    font-size: .24rem;
}

.line {
    position: relative;
    width: 2.64rem;
    height: .01rem;
    background-color: #5c6066;
}

.line1::before {
    content: '';
    position: absolute;
    left: 0;
    top: -.01rem;
    width: .88rem;
    height: .03rem;
    background-color: #5f7af7;
}

.line2::after {
    content: '';
    position: absolute;
    right: 0;
    top: -.01rem;
    width: .88rem;
    height: .03rem;
    background-color: #5f7af7;
}

.nums_des {
    line-height: 1;
}

.nums_des .nums {
    color: #5f7af7;
}

.task_btn,
.first_btn {
    width: 1.69rem;
    height: .55rem;
    background: url('../images/btn.png') no-repeat center center/100% 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 1;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: .24rem;
    /* padding: 0 .15rem; */
    box-sizing: border-box;
}

.first_btn {
    transform: translateX(-1px);
}

.task_btn {
    transform: translateX(1px);
}

.lang_en .right_box,
.lang_de .right_box,
.lang_es-419 .right_box,
.lang_pt-BR .right_box {
    font-size: .2rem;
}

.lang_es-419 .task_btn,
.lang_es-419 .first_btn {
    font-size: .18rem;
}

.lang_fr .task_btn,
.lang_de .task_btn,
.lang_de .first_btn,
.lang_pt-BR .task_btn,
.lang_pt-BR .first_btn,
.lang_fr .first_btn,
.lang_fr .right_box {
    font-size: .16rem;
}

.act1 .task_btn,
.act2 .first_btn {
    background: url('../images/act.png') no-repeat center center/100% 100%;
}



.right_box_btns {
    position: absolute;
    right: .025rem;
    top: .03rem;
    display: flex;
}

.lang_ru .right_box_btns a {
    font-size: .16rem;
}

.rule_btn {
    position: absolute;
    top: .4rem;
    left: .38rem;
    width: 1.88rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #363a40;
    line-height: 1;
}

.rule_btn span:nth-child(2) {
    font-size: .24rem;
}

.tanhao {
    width: .26rem;
    height: .26rem;
    background: url('../images/tanhao.png') no-repeat center center/100% 100%;
    margin-right: .05rem;
}

.lang_ru .task div,
.lang_ru .first div {
    font-size: .2rem;
}

.task>div,
.first>div {
    position: relative;
    padding: 0 .4rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

.assemble .username {
    display: none;
}

.task,
.first {
    position: relative;
    width: 7.99rem;
    height: 8.18rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    margin: .9rem 0 0 .45rem;
}

.act1 .task {
    display: flex;
}

.act2 .first {
    display: flex;
}

.first_invite,
.assemble {
    width: 100%;
    height: 1.66rem;
    background: url('../images/bg.png') no-repeat center center/100% 100%;
}

.invite_new,
.cumulative,
.grade,
.upgrade {
    width: 100%;
    height: 1.97rem;
    background: url('../images/bg1.png') no-repeat center center/100% 100%;
}

.common,
.fight {
    width: 100%;
    height: 1.96rem;
    background: url('../images/bg2.png') no-repeat center center/100% 100%;
}

.right_box ul {
    display: flex;

}

.right_box ul li {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    margin-left: .2rem;
}

.right_box ul li:first-child {
    margin-left: 0;
}

.right_box ul li.gray .box,
.right_box ul li.gray .task_progress {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.right_box ul li.gray .right {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
}

.first .mc {
    padding: 0;
    display: none;
    position: absolute;
    top: -.15rem;
    left: 0;
    width: 100%;
    height: 103%;
    background: rgba(0, 0, 0, .3);
    z-index: 1;
}

.right_box ul li.gray .box,
.right_box ul li.gray .task_progress {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.task_progress {
    font-size: .2rem;
    margin-bottom: .1rem;
}

.task_progress .cl {
    color: #fee246;
}

.box {
    position: relative;
    width: 1.12rem;
    height: 1.16rem;
    background: url('../images/box.png') no-repeat center center/100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.act .box:hover {
    background: url('../images/boxact.png') no-repeat center center/100% 100%;
    cursor: pointer;
}

.box .box_ani {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2rem;
    height: 2rem;
    pointer-events: none;
}

.act .box_ani {
    display: block;
}

.box img {
    width: .95rem;
    height: .95rem;
}

.act .dj_nums {
    color: #fe7131;
}

ul li .box .dj_nums {
    font-size: .16rem;
}

.dj_nums {
    position: absolute;
    bottom: .05rem;
    right: .05rem;
    color: #5f7af7;
    font-size: .16rem;
}

.right {
    display: none;
    width: .27rem;
    height: .27rem;
    background: url('../images/right.png') no-repeat center center/100% 100%;
    position: absolute;
    left: .08rem;
    bottom: .08rem;
}

li.gray .right {
    display: block;
}

.zs {
    position: absolute;
    top: -0.25rem;
    left: -.05rem;
    width: .77rem;
    height: .72rem;
    pointer-events: none;
}

.zs1 {
    position: absolute;
    bottom: 0;
    left: 3rem;
    width: .41rem;
    height: .58rem;
}

.sure {
    width: 1.79rem;
    height: .58rem;
    background: url('../images/btn1.png') no-repeat center center/100% 100%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .24rem;
}

.sure.gray,
.gray .sure {
    background: url('../images/gray.png') no-repeat center center/100% 100%;
    cursor: default;
}

.invite_code_input {
    width: 3.95rem;
    height: .56rem;
    background: url('../images/input.png') no-repeat center center/100% 100%;
    text-align: center;
}

.invite_tar {
    width: 1.33rem;
    height: 1.33rem;
}

.first .assemble {
    padding: 0 .1rem 0 .4rem;
}

.assemble input {
    border: 0;
    padding: 0 .2rem;
    box-sizing: border-box;
    font-size: .2rem;
}

.pop {
    display: none;
}

.pop1_con {
    width: 8.06rem;
    height: 4.88rem;
    background: url('../images/pop1.png') no-repeat center center/100% 100%;
    overflow: hidden;
}

.pop2_con {
    width: 6.46rem;
    height: 3.99rem;
    background: url('../images/pop2.png') no-repeat center center/100% 100%;
    overflow: hidden;
}

.rule {
    width: 7rem;
    margin: 0 auto;
    color: #363a40;
    font-size: .24rem;
    height: 3.6rem;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding-right: .08rem;
}

/* 整个滚动条 */
.rule::-webkit-scrollbar {
    width: .08rem;
    height: .08rem;
}

/* 滚动条轨道 */
.rule::-webkit-scrollbar-track {
    background: #ccc;
    border-radius: .08rem;
}

/* 滚动条滑块 */
.rule::-webkit-scrollbar-thumb {
    background: #5d78f2;
    border-radius: .08rem;
}

.rule p {
    line-height: 1.3;
    margin-bottom: .1rem;
}

.rule p:last-child {
    margin-bottom: 0;
}

.rule p span {
    color: #fe7131;
}

.addWeight {
    font-weight: bold;
}

.pop1_con h2 {
    font-size: .36rem;
    color: #363a40;
    text-align: center;
    font-weight: bold;
    margin: .2rem auto;
}

.close {
    width: .5rem;
    height: .5rem;
    position: absolute;
    top: 0;
    right: 0;
}

.pop_sure {
    width: 1.74rem;
    height: .57rem;
    background: url('../images/sure.png') no-repeat center center/100% 100%;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: .28rem;
    margin: 0 auto;
}

.pop_box {
    position: relative;
    width: 1.74rem;
    height: 1.79rem;
    background: url('../images/box4.png') no-repeat center center/100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto .25rem;
}

.pop2_con h2 {
    font-size: .36rem;
    color: #363a40;
    text-align: center;
    line-height: 1;
    margin: .3rem auto;
    font-weight: bold;
}

.pop2_con img {
    width: 1.4rem;
    height: 1.4rem;
}

.pop_box .dj_nums {
    font-size: .26rem;
}

.copy_box {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    visibility: hidden;
}

/* 
.select-container {
    width: 2.16rem;
    height: .45rem;
    line-height: .42rem;
    position: absolute;
    right: .2rem;
    top: .2rem;
    color: #d5bc87;
    z-index: 1;
}

.rotate {
    content: '';
    position: absolute;
    top: .15rem;
    right: .15rem;
    width: .25rem;
    height: .18rem;
}

.select-items {
    display: none;
    width: 2.16rem;
    position: absolute;
    background: #173538;
    z-index: 1;
}

.select-items div {
    cursor: pointer;
    padding-left: .2rem;
    height: .4rem;
    line-height: .4rem;
    display: flex;
    align-items: center;
    font-size: .24rem;
    background: #173538;
}

.selected-item {
    padding-left: .2rem;
    width: 2.16rem;
    display: flex;
    align-items: center;
    font-size: .24rem;
    height: .45rem;
    background: #173538;
    background-size: 100% 100%;
    cursor: pointer;
    border: 1px solid #97855f;
    box-sizing: border-box;
} */