body {
    background: url(../image/bg.jpg) no-repeat top center;
    background-size: 100% auto;
    position: relative;
    font-family: MicrosoftYaHei;
    font-size: .24rem;
    width: 100%;
}

img {
    width: 100%;
}

.wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

/* wrap1 */
.head {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    height: 1rem;
    line-height: 1rem;
    padding: .05rem .1rem;
    box-sizing: border-box;
    z-index: 10;
}

.head .logo {
    background: url(../image/logo.png) no-repeat center;
    background-size: 100% auto;
    width: 1.8rem;
    height: .8rem;
    display: inline-block;
}

.head .head-btn {
    float: right;
    color: #7d5b21;
    background: linear-gradient(to bottom, #ffc46c, #fed78c);
    font-weight: bold;
    font-size: .26rem;
    height: .6rem;
    line-height: .6rem;
    margin-left: .1rem;
    width: 1.8rem;
    text-align: center;
    border-radius: .1rem;
    margin-top: .15rem;
}

.head .head-btn a {
    color: #7d5b21;
}

.login {
    display: flex;
    justify-content: space-around;
    width: 80%;
    margin-left: 10%;
}

.login .head-btn {
    background-color: #ee6bb7;
    border-radius: .3rem;
    margin-top: -.15rem;
    min-width: 1.8rem;
    text-align: center;
    color: white;
    padding: 0 .2rem;
}

.login .head-btn a {
    color: white;
    height: .5rem;
    line-height: .5rem;
}

.wrap1 {
    width: 80%;
}

.main-title {
    margin-top: 4.5rem;
    background: url(../image/title.png) no-repeat center;
    background-size: 100% auto;
    width: 100%;
    height: 1.6rem;
}

/* wrap2 */
.wrap2 {
    width: 90%;
    margin-top: 1.3rem;
}
.wrap2 .inf{
    height: 2.5rem;
}
.wrap2 .inf p,
.wrap3 .inf p,
.wrap4 .inf p,
.wrap5 .inf p {
    text-align: left;
    color: #9694dd;
    text-align: justify;
}

.wrap2 .inf p:first-child,
.wrap3 .inf p:first-child,
.wrap5 .inf p:first-child {
    font-weight: bold;
    font-size: .3rem;
    color: #7a78c8;
    text-align: center;
    margin-bottom: .1rem;
}

.wrap2 .btn_jd {
    width: 50%;
    margin-left: 25%;
    height: .71rem;
    margin-top: 6.3rem;
    background: url(../image/btn_jd.png) no-repeat center;
    background-size: 100% auto;
}


/* wrap3 */
.wrap3 {
    width: 100%;
    margin-top: 1.4rem;
}

.wrap3 .inf {
    width: 90%;
    margin-left: 5%;
    height: 2.4rem;
}

.wrap3 .inf_tips {
    width: 90%;
    margin-left: 5%;
    color: white;
    background-color: #afa5ec;
    padding: .05rem .1rem;
    border-radius: .2rem;
    text-align: center;
    margin-top: .15rem;
}

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

.wrap3 .signin li {
    background: url(../image/bg_signin.png) no-repeat center;
    background-size: 100% auto;
    width: 1.74rem;
    height: 1.74rem;
    display: inline-block;
    text-align: center;
    line-height: 1.74rem;
    color: white;
    font-weight: bold;
    font-size: .28rem;
    margin-bottom: 1.1rem;
}

.wrap3 .signin li.done {
    background-image: url(../image/bg_signin_0.png);
    color: #c88c45;
    pointer-events: none;
}

.wrap3 .signin li.not {
    background-image: url(../image/bg_signin_1.png);
    pointer-events: none;
}

/* .wrap3 .signin li.enable {

} */
.wrap3 .signin_full {
    width: 100%;
    margin-top: -7.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wrap3 .signin_full>li {
    background: url(../image/btn_mq.png) no-repeat center;
    background-size: 100% auto;
    width: 2.56rem;
    height: .76rem;
    margin: 1.05rem 0;

}

/* wrap4 */
.wrap4 {
    width: 100%;
}

.wrap4 .inf_tips {
    margin-top: .2rem;
}

.wrap4 .inf {
    width: 90%;
    margin-left: 5%;
    height: 3.9rem;
}

.wrap4 .inf p:first-child {
    font-weight: bold;
    color: #7a78c8;
    text-align: center;
    margin-bottom: .05rem;
    margin-top: .2rem;
}

.wrap4 .inf_tips {
    width: 100%;
    color: white;
    background-color: #afa5ec;
    padding: .05rem .1rem;
    border-radius: .2rem;
    text-align: center;
    margin-top: .1rem;
}

.wrap4 .btn_group {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5.5rem;
    box-sizing: border-box;
    padding: 0 .6rem;
}

#cancel,
#confirm,
.dialog-btn {
    color: white;
    font-weight: bold;
    font-size: .22rem;
    padding: 0 .1rem;
    height: .4rem;
    line-height: .4rem;
    display: inline-block;
    border-radius: .1rem;
    margin: 0 .1rem;
}

#cancel {
    background-color: #8a8a8a;
}

#confirm,
.dialog-btn {
    background-color: #ffa239;

}

.wrap4 .btn_creat {
    width: 2.87rem;
    height: .68rem;
    background: url(../image/btn_cj.png) no-repeat center;
    background-size: 100% auto;
}

.wrap4 .btn_get {
    width: 2.87rem;
    height: .68rem;
    background: url(../image/btn_lq.png) no-repeat center;
    background-size: 100% auto;
}

.wrap4 .team {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    margin-top: .2rem;
}

.wrap4 .search {
    width: 60%;
    border: 2px solid #8471d3;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.wrap4 .search input {
    border: none;
    height: .5rem;
    line-height: .5rem;
    padding-left: .2rem;
    flex: 1;
    box-sizing: border-box;
}

.wrap4 .search i {
    margin-top: -.05rem;
    width: .6rem;
    height: .6rem;
    text-align: center;
    box-sizing: border-box;
    padding: .1rem;
    background: #8471d3 url(../image/icon_search.png) no-repeat center;
    background-size: 60% auto;
}

.wrap4 img {
    vertical-align: middle;
}

.wrap4 .change {
    margin-top: .1rem;
}

.wrap4 .change i {
    display: inline-block;
    width: .26rem;
    height: .26rem;
    background: url(../image/icon_change.png) no-repeat center;
    background-size: 100% auto;
    vertical-align: middle;
}

.wrap4 .change a {
    color: #8471d3;
    text-decoration: underline;
    margin-right: .1rem;
    line-height: .26rem;
    vertical-align: middle;
}

.wrap4 .myTeam {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    align-items: center;
}

.wrap4 .myteam {
    color: white;
    box-sizing: border-box;
    text-align: center;
    background-color: #8471d3;
    line-height: .4rem;
    padding: .05rem .2rem;
    margin-left: .1rem;
}

.wrap4 li {
    display: inline-block;
    width: 30%;
    margin-left: .15rem;
    margin-top: .15rem;
}

.wrap4 .team_list {
    width: 100%;
    height: 8.2rem;
}

.wrap4 .team_box {
    border: 1px solid #8277b2;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.team_box .box_head {
    background-color: #b9b2de;
    color: white;
    width: 100%;
    height: .55rem;
    line-height: .55rem;
}

.team_box .box_content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

.team_box .box_left,
.team_box .box_right {
    width: 100%;
    height: 1.4rem;
    box-sizing: border-box;
    background-color: #fff;
    padding-top: 10%;
    font-size: .16rem;
}

.team_box .box_left {
    border-right: 1px solid #b9b2de;
}

.box_content span {
    font-size: .34rem;
    color: #8471d3;
    font-weight: bold;
}

.team_box .box_left p:first-child {
    color: #8471d3;
}

.team_box .box_footer {
    color: white;
    font-weight: bold;
    font-size: .26rem;
    background-color: #848484;
    height: .56rem;
    line-height: .56rem;
}

.team_box .box_footer2 {
    background-color: #fbb15e;
}

.team_box .box_footer3 {
    background-color: #848484;
}


/* wrap5 */
.wrap5 {
    width: 100%;
    margin-top: 2.6rem;
}

.wrap5 .inf {
    width: 80%;
    margin-left: 10%;
}

.wrap5 .draw {
    width: 96%;
    margin-left: 2%;
}

.wrap5 .draw_box {
    width: 33%;
    text-align: center;
}

.wrap5 .draw_main_box {
    width: 100%;
    height: 100%;
    position: relative;
}

.wrap5 .draw_box,
.wrap5 .lottery_box {
    float: left;
    width: 2.16rem;
    height: 1.87rem;
    margin: .1rem;
    background: url(../image/bg_draw.png) no-repeat;
    background-size: 100% auto;
    color: white;
    text-align: center;
    font-size: 0;
    line-height: 1.87rem;

}

.wrap5 li:nth-of-type(4)>.draw_box {
    position: relative;
    left: 4.73rem;
    top: 0;
}

.wrap5 li:nth-of-type(5)>.draw_box {
    position: relative;
    left: 2.38rem;
    top: 2.1rem;
}

.wrap5 li:nth-of-type(6)>.draw_box {
    position: relative;
    left: -2.38rem;
    top: 2.1rem;
}

.wrap5 li:nth-of-type(7)>.draw_box {
    position: relative;
    left: 0rem;
    top: 0;
}

.wrap5 li:nth-of-type(8)>.draw_box {
    position: relative;
    left: -2.36rem;
    top: -2.1rem;
}

.wrap5 .lottery_box {
    background: url(../image/bg_draw_1.png) no-repeat;
    background-size: 100% auto;
    position: relative;
    left: -2.38rem;
    top: -2.1rem;
}

.wrap5 .lottery_box.disabled {
    cursor: not-allowed;
}

.wrap5 .lottery_box p {
    margin: 0;
    font-size: .24rem;
    vertical-align: bottom;
    margin-top: .4rem;
    font-weight: bold;
    color: #a5691e;
}

.wrap5 .lottery_box p>span {
    font-weight: bold;
    font-size: .26rem;
}

.wrap5 .active {
    background: url(../image/bg_draw_0.png) no-repeat !important;
    background-size: 100% auto !important;
}

.wrap5 .draw_box img {
    vertical-align: middle;
    width: 52%;
    margin-top: -.3rem;
}

.wrap5 .draw_box__gift1 {
    background: url(../image/gift1.png) no-repeat center;
    background-size: 100% auto;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 auto;
    margin-top: .2rem;
}

.wrap5 .draw_box__gift2 {
    background: url(../image/gift2.png) no-repeat center;
    background-size: 100% auto;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 auto;
    margin-top: .2rem;
}

.wrap5 .draw_box__gift3 {
    background: url(../image/gift3.png) no-repeat center;
    background-size: 100% auto;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 auto;
    margin-top: .2rem;
}

.wrap5 .draw_box__gift4 {
    background: url(../image/gift5.png) no-repeat center;
    background-size: 100% auto;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 auto;
    margin-top: .2rem;
}

.wrap5 .draw_box__gift5 {
    background: url(../image/gift8.png) no-repeat center;
    background-size: 100% auto;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 auto;
    margin-top: .2rem;
}

.wrap5 .draw_box__gift6 {
    background: url(../image/gift7.png) no-repeat center;
    background-size: 100% auto;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 auto;
    margin-top: .2rem;
}

.wrap5 .draw_box__gift7 {
    background: url(../image/gift6.png) no-repeat center;
    background-size: 100% auto;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 auto;
    margin-top: .2rem;
}

.wrap5 .draw_box__gift8 {
    background: url(../image/gift4.png) no-repeat center;
    background-size: 100% auto;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 auto;
    margin-top: .2rem;
}

.wrap5 .draw_box p {
    margin: 0;
    font-size: .26rem;
    vertical-align: bottom;
    margin-top: -.85rem;
    font-weight: bold;
}

.wrap5 .draw_inf {
    color: #9796af;
    width: 100%;
    text-align: center;
}

.wrap5 .footer {
    width: 100%;
    margin-top: .1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.wrap5 .footer .footer_left {
    background: url(../image/pic1.png) no-repeat center;
    background-size: 100% auto;
    width: 4.59rem;
}

.wrap5 .footer .footer_right {
    background: url(../image/pic2.png) no-repeat center;
    background-size: 100% auto;
    width: 4.59rem;
}

.wrap5 .footer p {
    color: #69698b;
    font-weight: bold;
    margin-top: 3rem;
}

.wrap5 .foot_logo {
    background: url(../image/icon_logo.png) no-repeat top center;
    background-size: 70% auto;
    text-align: center;
    width: 100%;
    color: #69698b;
    font-weight: bold;
    padding-top: 1.5rem;
    margin-top: .8rem;
}

.wrap5 .footer_footer {
    margin-top: 2rem;
}

/* 弹窗 */
.mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
}

.dialog .dialog-header {
    color: white;
    font-weight: bold;
    line-height: .7rem;
    font-size: .3rem;
    margin-bottom: .4rem;
}

.dialog .dialog-content {
    background: url(../image/bg_tc_1.png) no-repeat top center;
    background-size: 100% auto;
    text-align: center;
}

.dialog .dialog-body {
    min-height: 1.4rem;
}

.dialog .tac {
    font-weight: bold;
    color: #626bc7;
    font-size: .24rem;
    max-width: 80%;
    margin: 0 auto;
}

.dialog .word {
    font-weight: bold;
    color: #626bc7;
    font-size: .24rem;
}

.dialog .gift {
    color: #44497c;
    margin-top: -.2rem;
    padding-bottom: .2rem;
}

.dialog .word span {
    color: #ff8f4b;
}

.dialog img {
    margin-top: .3rem;
    margin-bottom: .3rem;
    height: .5rem;
}

.dialog .tips {
    color: #9093b7;
}

.dialog .tip1 {
    text-align: center;
    color: #ee3030;
    font-size: .16rem;
    margin-top: .5rem;
}

.dialog .dialog-closebtn {
    position: absolute;
    right: .25rem;
    top: .6rem;
    background: url(../image/icon_close.png) no-repeat center;
    background-size: 100% auto;
    font-size: 0;
    width: .3rem;
    height: .3rem;
}

.dialog .dialog-footer {
    padding-bottom: .7rem;
}

.dialog_s .dialog-content {
    background: url(../image/bg_tc_2.png) no-repeat top center;
    background-size: 100% auto;
}

.dialog_s .dialog-closebtn {
    top: .5rem;
}

.dialog_s .dialog-header {
    line-height: .5rem;
    margin-bottom: 1.2rem;
}

.dialog_s .dialog-footer {
    padding-bottom: .8rem;
}

.dialog_s_0 .dialog-content {
    background: url(../image/bg_tc_3.png) no-repeat top center;
    background-size: 100% auto;
}

.dialog_s_0 .dialog-closebtn {
    top: .2rem;
}

.dialog_s_0 .word:nth-of-type(1) {
    margin-top: 120px;
}

.dialog_l .dialog-content {
    background: url(../image/bg_tc_4.png) no-repeat top center;
    background-size: 100% auto;
}

.dialog_l .dialog-closebtn {
    right: .3rem;
}

.dialog_l .fillin {
    margin: .2rem 0 .1rem 0;
}

.dialog_l .fillin>p {
    display: inline-block;
    text-align: right;
    font-size: .22rem;
    color: #7e7abc;
    margin-right: .2rem;
    width: 1rem;
    vertical-align: top;
    line-height: .5rem;
}

.dialog_l .fillin>input {
    border: 1px solid #7e7abc;
    width: 3.8rem;
    height: .5rem;
    line-height: .5rem;
    outline: none;
    box-sizing: border-box;
    padding: 0 .2rem;
}

.dialog_l .fillin>textarea {
    border: 1px solid #7e7abc;
    width: 3.8rem;
    outline: none;
    box-sizing: border-box;
    padding: .3rem;
}

.dialog_l .dialog-footer {
    margin-top: .2rem;
}

.dialog_l .tip {
    color: #bb3838;
    font-size: .16rem;
    width: 90%;
    margin-left: 5%;
}

.share_title {
    display: inline-block;
    position: relative;
    font-size: .2rem;
    color: #59606b;
    font-weight: bold;
    margin-top: .2rem;
}

.share_title span::before,
.share_title span::after {
    content: '';
    position: absolute;
    left: -2rem;
    top: 50%;
    height: 1px;
    width: 1.5rem;
    background-color: #c3d3e8;
}

.share_title span::after {
    left: auto;
    right: -2rem;
}

.share_list ul li {
    display: inline-block;
    font-size: .2rem;
    color: #768494;
    margin: .2rem .15rem 0 .15rem;
    width: 1rem;
    height: 1rem;
    text-align: center;
    padding-top: .9rem;
}

.share_list ul li:nth-child(1) {
    background: url(../image/icon_share_qq.png) no-repeat top center;
    background-size: 80% auto;
}

.share_list ul li:nth-child(2) {
    background: url(../image/icon_share_weibo.png) no-repeat top center;
    background-size: 80% auto;
}

.share_list ul li:nth-child(3) {
    background: url(../image/icon_share_zone.png) no-repeat top center;
    background-size: 80% auto;
}

.share_list ul li:nth-child(4) {
    background: url(../image/icon_share_tieba.png) no-repeat top center;
    background-size: 80% auto;
}


/*  奖励记录弹窗 */
.awardList,
.awardList1 {
    margin: 0 auto;
    border: none;
    color: #7b82c2;
    width: 80%;
    table-layout: fixed;
    text-align: center;
}

.awardList thead,
.awardList1 thead {
    background-color: #7b82c2;
    color: white;
}

.awardList tbody,
.awardList1 tbody {
    display: block;
    width: 100%;
    overflow: auto;
    height: 2.4rem;

}

.awardList thead tr,
.awardList1 thead tr {
    display: block;
}

.awardList1 th {
    padding: 5px 0;
    text-align: center;
    width: 500px;
}

.awardList1 td {
    padding-top: 10px;
    text-align: center;
    width: 500px;
}

.awardList th {
    padding: 5px 0;
    text-align: center;
    width: 200px;
}

.awardList td {
    padding-top: 10px;
    text-align: center;
    width: 200px;
}

.awardList .btn_agree {
    color: white;
    background-color: #ffa239;
    border-radius: .1rem;
    display: inline-block;
    margin-right: .1rem;
    padding: 0 .1rem;
}

.awardList .btn_disagree {
    width: .9rem;
    color: white;
    background-color: #7b82c2;
    border-radius: .1rem;
    display: inline-block;
}

#applyInf {
    background-color: #636fe2;
}

#btnConfirm {
    background-color: #ffa239;
    border-radius: .5rem;
    width: 1.7rem;
    height: .6rem;
    line-height: .6rem;
}

/* 奖品图标 */
.dialog .sign-gift {
    display: block;
    height: 1.7rem;
}

.sign-gift1550001 {
    background: url(../image/sign-gift1550001.png) no-repeat center;
}

.sign-gift1550003 {
    background: url(../image/sign-gift1550003.png) no-repeat center;
}

.sign-gift1550005 {
    background: url(../image/sign-gift1550005.png) no-repeat center;
}

.sign-gift1900004 {
    background: url(../image/sign-gift1900004.png) no-repeat center;
}

.sign-gift9900001 {
    background: url(../image/sign-gift9900001.png) no-repeat center;
}

.sign-gift9900002 {
    background: url(../image/sign-gift9900002.png) no-repeat center;
}

.sign-gift9900193 {
    background: url(../image/sign-gift9900193.png) no-repeat center;
}

.define-icon {
    display: block;
    width: 3.12rem;
    height: 1.35rem;
    margin: 0 auto;
}

.define-icon1 {
    background: url(../image/icon_name_1.png) no-repeat center;
    background-size: 100% auto;
}

.define-icon2 {
    background: url(../image/icon_name_2.png) no-repeat center;
    background-size: 100% auto;
}