#root {
    width: 100%;
    min-width: 1300px;
    margin: 0 auto;
    min-height: 100vh;
    /* vertical-align: top; */
}

.whiteText {
    color:#fff
}

.rankText {
    font-size: 1rem;
    font-weight: bold;
    display: inline-block;
    margin: 0.5% 1% 0 1%;
}
/* header 部分 */
.head {
    width: 100%;
    /* height: 858px; */
    background: url('../img/head_bg.png') center no-repeat;
    background-size: cover;
}

.head .top {
    margin: 0 18%;
    display: flex;
    justify-content: space-between;
}

.logo {
    width: 12%;
    height: 15%;
    margin-top: 1%;
}

.gotoWeb {
    width: 12%;
    background: url('../img/web_bg.png') center no-repeat;
    background-size: contain;
    position: relative;
}
.web {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    color: #EFD696;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.head .bottom {
    width: 25%;
    height: 6%;
    background: url('../img/login_bg.png') center no-repeat;
    background-size: contain;
    margin: 0 auto;
    margin-top: 36%;
    line-height: 405%;
}

.head .bottom>span {
    color: #FAE085;
    font-size: 0.9rem;
    margin-left: 15%;
}

.head .bottom>em {
    font-size: 1rem;
    margin-left: 1%;
}
.login_status_style {
    cursor: pointer;
    color: #ff1400;
}

/* 二维码下载部分 */
.nav {
    width: 14rem;
    height: 21rem;
    background: url('../img/nav_bg.png') center no-repeat;
    background-size: contain;
    position: fixed;
    right: 5%;
    top: 40%;
    z-index: 999;
}

.nav>img {
    width: 8rem;
    display: block;
    margin: 3% auto;
}
.navScan {
    width: 8rem;
    background: url('../img/text_bg.png') center no-repeat;
    background-size: contain;
    margin: 0 auto;
    text-align: center;
    color: #FDF5B6;
    font-size: 1rem;
    font-weight: 400;
}

.navVersion {
    width: 8rem;
    background: url('../img/text_bg.png') center no-repeat;
    background-size: contain;
    margin: 0 auto;
    text-align: center;
    color: #FDF5B6;
    font-size: 1rem;
    font-weight: 400;
}

/* 页面下半部分 */
.bottomBox {
    width: 100%;
    /* height: 2600px; */
    background: url('../img/bottomBox_bg.png') center no-repeat;
    background-size: 101% 100%;
    overflow: hidden;
    margin-top: -1.9%;
}

/* 集结令部分 */
.gather {
    width: 62%;
    /* height: 40rem; */
    margin: 0 auto;
    /* background-color: #434343; */
    margin-top: 3%;
}
.gather_h {
    display: block;
    margin: 0 auto;
}
.gather_b {
    min-width: 1080px;
    width: 100%;
    /* height: 100%; */
    background: url('../img/gather_b.png') no-repeat;
    background-size: 100% 100%;
    margin-top: 2%;
    overflow: hidden;
    position: relative;
}
.gather_b_l {
    width: 50%;
    /* height: 75%; */
    /* background-color: #b4a7d6; */
    margin: 4% 30% 3% 1%;
    position: absolute;
}
.gather_b_l_h {
    width: 48%;
    height: 4rem;
    background: url('../img/gather_b_l_h.png') center no-repeat;
    background-size: contain;
    font-size: 1.3rem;
    color: #EFD696;
    font-weight: bold;
    text-align: center;
    line-height: 3.5rem;
    margin-left: 20%;
    margin-bottom: 3%;
}

.gather_b_l p {
    width: 80%;
    color: #EFD696;
    font-size: 0.6rem;
    margin: 0 auto;
    line-height: 1rem;
    letter-spacing: 0.1rem;
    margin-bottom: 3%;
}

.gather_b_l p:nth-child(3) {
    width: 100%;
    margin-bottom: 3%;
    margin-left: 9%;
}

.inputBackCode {
    width: 70%;
    height: 8%;
    /* background-color: skyblue; */
    margin-left: 9%;
    margin-bottom: 3%;
}

.gather_b_l .backCode {
    width: 60%;
    height: 2rem;
    float: left;
}

.inputBackCode .backBox {
    display: inline-block;
    width: 30%;
    height: 2rem;
    background-color: #AC3600;
    text-align: center;
    margin-left: 7%;
}

.inputBackCode .backBox>span {
    color: #FFF7E4;
    font-size: 1rem;
    font-weight: bold;
    display: inline-block;
    margin-top: 4%
}

.gather_b_l p:nth-child(5) {
    width: 100%;
    margin-left: 9%;
    margin-bottom: 3%;
}

.activeBack {
    width: 35%;
    height: 8%;
    background-color: #AC3600;
    color: #FFF7E4;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    line-height: 220%;
    margin-left: 9%;
}

.gather_b_l p:nth-child(7) {
    width: 100%;
    color: #9E9E9E;
    margin-left: 9%;
    margin-top: 5%;
}

.gather_b_r {
    width: 40%;
    /* height: 67%; */
    /* background-color: #b4a7d6; */
    margin: 4% 3% 3% 52%;
}

.gather_b_r_h  {
    width: 60%;
    height: 4rem;
    background: url('../img/gather_b_l_h.png') center no-repeat;
    background-size: contain;
    font-size: 1.3rem;
    color: #EFD696;
    font-weight: bold;
    text-align: center;
    line-height: 3.5rem;
    margin: 0 auto;
    margin-bottom: 5%;
}

.gather_b_r p{
    width: 85%;
    color: #EFD696;
    font-size: 0.6rem;
    margin: 0 auto;
    margin-left: 15%;
    line-height: 1rem;
    margin-bottom: 5%;
}

.activeBox {
    width: 50%;
    height: 12%;
    margin-left: 15%;
    margin-top: 10%;
}

.activeBox span {
    display: inline-block;
    width: 40%;
    height: 65%;
    background-color: #AC3600;
    font-size: 0.8rem;
    text-align: center;
    color: #FFF7E4;
    font-weight: bold;
    line-height: 240%;
    margin-right: 6%;
}

.gather_b_r p:nth-child(5) {
    color: #9F9F9F;
    margin-top: 5rem;
}

/* 情义礼包 */
.friendShipBox {
    width: 60%;
    margin: 0 auto;
    margin-top: 3%;
    /* background-color: #0c343d; */
}
.qingyiGift {
    width: 100%;
}

.friendShipBox>p {
    margin-top: 8%;
    text-align: center;
    color: #9F9F9F;
    font-size: 0.8rem;
}
/* 英雄荣耀礼包 */
.honorGift {
    width: 62%;
    margin: 0 auto;
    /* background-color: #0c343d; */
    margin-top: 7%;
}

.getHonorGift {
    width: 15%;
    height: 5%;
    background: url('../img/perSign_bg.png') center no-repeat;
    margin: 0 auto;
    text-align: center;
    padding: 2% 0;
    color: #FFF7E4;
    font-size: 1rem;
    font-weight: bold;
    margin-top: 2%;
}

/* .honorGiftImg {
    width: 80%;
    margin-top: 3% !important;
} */

.rankGift {
    width: 100%;
    height: 10rem;
    background: url('../img/honorGift.png') center no-repeat;
    background-size: contain;
    margin-top: 3%;
    position: relative;
}

.subRankGift {
    width: 81.5%;
    height: 75%;
    /* background-color: rgba(0, 0, 0, 0.5); */
    position: absolute;
    left: 9.4%;
    top: 25%;
}

.subRankGift > li {
    width: 18%;
    height: 100%;
    /* background-color: rgba(0, 0, 0, 0.9); */
    float: left;
    margin-right: 2.4%;
    position: relative;
}
.subRankGift > li:nth-child(5) {
    margin-right: 0;
}

.subRankGift > li > img {
    width: 40%;
    height: 40%;
    position: absolute;
    top: 0;
    right: 0;
}
.honorGift>img {
    display: block;
    margin: 0 auto;
}
.honorGift>p {
    margin-top: 3%;
    text-align: center;
    color: #EFD696;
    font-size: 0.8rem;
}
.honorRankGiftBox {
    width: 100%;
    height: 8rem;
    margin-top: 4%;
    /* background-color: #ea9999; */
}
.honorRankGift {
    width: 14%;
    height: 100%;
    background: url('../img/honorGiftRank_bg.png') center no-repeat;
    background-size: contain;
    overflow: hidden;
    float: left;
    margin-right: 4%;
}
.honorRankGift>p {
    text-align: center;
    color: #ECDCAD;
    font-size: 0.9rem;
    margin-top: 1%;
}
.honorRankGift>p>span {
    font-size: 1.4rem;
    display: inline-block;
    margin-top: 3%;
}

.honorRankGiftImg {
    width: 4.5rem;
    height: 4.5rem;
    background: url('../img/honorGiftRank_bg2.png') center no-repeat;
    background-size: contain;
    margin: 8% 5% 5% 24%;
}
.honorRankGiftImg>img {
    /* display: block; */
    width: 100%;
    /* margin: 10% 15% 0 19%; */
}
.honorRankGiftImg>p {
    color: #F0D4A7;
    font-size: 0.5rem;
    text-align: center;
    margin-top: -28%;
}

.honorRankGiftBox>.honorRankGift:nth-child(1){
    margin-left: 6%;
}
.honorGift>p:nth-child(4) {
    color:#9F9F9F;
    font-size: 0.5rem;
}
/* 签到 */
.signWrapper {
    width: 60%;
    margin: 0 auto;
    /* background-color: #274e13; */
}
.signWrapper>img {
    display: block;
    margin: 0 auto;
    margin-top: 9%;
}
.signWrapper>p {
    text-align: center;
    color: #EFD696;
    font-size: 0.8rem;
    margin-top: 3%;
}
.signBox {
    width: 100%;
    height: 31.5rem;
    background: url('../img/signBox_bg.png') center no-repeat;
    background-size: contain;
    margin-top: 3%;
    position: relative;
}
.perSign {
    position: absolute;
    width: 13%;
    height: 3rem;
    background: url('../img/perSign_bg.png') center no-repeat;
    background-size: contain;
    margin: 35% 5% 5% 43.5%;
    color: #FFF7E4;
    font-size: 1rem;
    text-align: center;
    line-height: 300%;
    font-weight: bold;
}
.perSignText {
    width: 100%;
    color: #9F9F9F;
    font-size: 0.14rem;
    text-align: center;
    position: absolute;
    top: 92%;
    left: 50%;
    transform: translate(-50%);
}

.signGiftBox {
    width: 70.8%;
    height: 56.8%;
    /* background-color: rgba(92, 182, 92, .5); */
    position: absolute;
    left: 14.7%;
    top: 7.8%;
}

.signGiftBox>li {
    width: 18.5%;
    height: 31%;
    /* background-color: rgba(173,126,126,.3); */
    float: left;
    margin-right: 1.9%;
    position: relative;
}
.signGiftBox>li:nth-child(5n) {
    margin-right: 0;
    width: 18.3%;
}
.special1 {
    margin-top: 1.9%;
}
.special2 {
    margin-top: 1.7%;
}

.signGiftBox>li>img:nth-child(1) {
    width: 35%;
    position: absolute;
    right: 0;
    top: 0;
}
.signGiftBox>li>img:nth-child(2) {
    width: 48%;
    position: absolute;
    right: 0;
    top: 6%;
}
/* 生成召回码Modal */
.ModalWrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
}
.backModal {
    min-width: 790px;
    width: 40%;
    height: 45%;
    background: url('../img/modal_bg.png') center no-repeat;
    background-size: contain;
    position: relative;
}
.backModal>p {
    width: 60%;
    color: #32130C;
    font-size: 0.6rem;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 25%;
}
#backCode {
    color: #32130C;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%);
}
.copyCode {
    width: 30%;
    height: 12%;
    background: #AC3600;
    text-align: center;
    color: #FFF7E4;
    font-size:1.2rem;
    font-weight: bold;
    line-height: 210%;
    position: absolute;
    left: 50%;
    top: 57%;
    transform: translate(-50%);
}
.backModal .backNum {
    color: #32130C;
    font-size: 0.3rem;
    /* margin-top: 5%; */
    position: absolute;
    left: 50%;
    top: 75%;
    transform: translate(-50%);
}
/* 角色绑定modal */
.bindRoleModal {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
}
.formModal {
    min-width: 790px;
    width: 40%;
    height: 45%;
    background: url('../img/modal_bg.png') center no-repeat;
    background-size: contain;
    position: relative;
}
.formModal_h {
    width: 36%;
    height: 15%;
    background:url('../img/gather_b_l_h.png') center no-repeat;
    background-size: contain;
    color: #EFD696;
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
    line-height: 3.2rem;
    /* margin: 0 auto;
    margin-top: 5%; */
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translate(-50%);
}
.formFiled {
    width: 80%;
    height: 30%;
    /* margin: 0 auto;
    margin-top: 5%; */
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%);
}
.labelTitle {
    display: inline-block;
    color: #32130C;
    font-size: 1.2rem;
    font-weight: bold;
    margin-right: 2%;
    margin-top: 3%;
    margin-left: 10%;
}
#zone_info {
    width: 60%;
    height: 30%;
}
#role_info {
    width: 60%;
    height: 30%;
}
.formModal .userInfo {
    color: #32130C;
    text-align: center;
    /* margin-top: 3%; */
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%);
}
.formModal .userTip {
    color: #32130C;
    text-align: center;
    /* margin-top: 3%; */
    position: absolute;
    left: 50%;
    top: 27%;
    transform: translate(-50%);
}

.confirnBack {
    width: 28%;
    height: 10%;
    background-color: #AC3600;
    color: #FFF7E4;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    line-height: 210%;
    /* margin: 0 auto;
    margin-top: 3%; */
    position: absolute;
    left: 50%;
    top: 85%;
    transform: translate(-50%);
}

/* 老用户回归Modal */
.oldUserBackModal {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
}

#selectForm2 {
    width: 60%;
    height: 30%;
}
#inputForm2 {
    width: 60%;
    height: 30%;
}

.userInfo2 {
    width: 65%;
    height: 10%;
    margin: 0 auto;
    margin-top: 1%;
    letter-spacing: 0;
    color:#32130C;
    font-size: 0.5rem;
    /* margin-top: 2%; */
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%);
}
/* 成功召回Modal */
.successBackModal {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
}

.successBox {
    width: 40%;
    height: 20%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.sucText1 {
    color: #32130C;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 5%;
}
.sucText2 {
    color: #AC3600;
    font-size: 0.8rem;
    font-weight: bold;
}

/* 不是回归用户 */
.notIsBackModal {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
}
.notIsBackBox {
    width: 40%;
    height: 20%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.notText1 {
    color: #AC3600;
    font-size: 0.9rem;
    font-weight: bolder;
    margin-bottom: 8%;
}
.notText2 {
    color: #32130C;
    font-size: 0.8rem;
    font-weight: 400;
}
/* 激活十次，已过期 */
.tenTimeModal {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
}
.tenTimeBox {
    width: 100%;
    height: 7%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.tenTimeText1 {
    width: 100%;
    text-align: center;
    color: #AC3600;
    font-size: 1rem;
    font-weight: bold;
}
.successGetGiftWrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
}

.cancel {
    width: 5%;
    height: 5%;
    background: url('../img/cancel.png') center no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    right: 0;
}