@charset "utf-8";
@import "common.css";
@import "pop.css";

html,
body {
    width: 100%;
    height: 100%;
    touch-action: manipulation;
}

html {
    font-size: 100px;
}

body {
    font: .24rem -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-user-select: none;
    background-color: #fff;
}

body {
    background: #10141d;
}

a {
    color: #ffffff;
}

.wrap {
    width: 19.2rem;
    height: 62rem;
    background: url('../img/bg.jpg') no-repeat 100% /100% 100%;
    position: relative;
    padding-top: 6.22rem;
    box-sizing: border-box;
}

.head {
    position: absolute;
    top: 0;
    width: 100%;
    height: 7.18rem;
    background: url('../img/head.png') no-repeat 100% /100% 100%;
}

.slogan {
    position: relative;
    width: 11.73rem;
    height: 3.02rem;
    background: url('../img/slogan.png') no-repeat 100% /100% 100%;
    margin: 0 auto;
}

.logo {
    position: absolute;
    top: .7rem;
    left: 4.5rem;
    width: 1.78rem;
    height: .82rem;
    background: url('../img/logo.png') no-repeat 100% /100% 100%;
    z-index: 1;
}

.loginbox {
    width: 3.92rem;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: .1rem auto 0;
}

.loginbox,
.loginbox a {
    color: #fff;
}

.loginbox {
    text-align: center;
    font-size: .20rem;
}

.logined {
    display: none;
}

.loginbox.on .unlogin {
    display: none;
}

.loginbox.on .logined {
    display: flex;
}

.nav {
    display: none;
    position: fixed;
    top: 3rem;
    right: .5rem;
    width: 1.19rem;
    height: 2.96rem;
    background: url('../img/nav.png') no-repeat 100% /100% 100%;
    box-sizing: border-box;
    padding-top: .3rem;
}

.nav ul {
    height: 1.92rem;
    width: 1.07rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

.nav ul li {
    width: 100%;
    height: .29rem;
    color: #743523;
    font-size: .18rem;
    text-align: center;
    cursor: pointer;
}

.nav ul li.act {
    color: #ffe9c3;
    background: url('../img/nav_bg.png') no-repeat 100% /100% 100%;
}

.top {
    display: block;
    width: 1.07rem;
    height: .3rem;
    background: url('../img/angle.png') no-repeat 100% /100% 100%;
    margin: .1rem auto 0;
}

.title {
    margin: 0 auto;
    width: 9.82rem;
    height: 1.6rem;
}

.t1 {

    background: url('../img/t1.png') no-repeat 100% /100% 100%;
}

.t2 {
    margin-top: .6rem;
    background: url('../img/t2.png') no-repeat 100% /100% 100%;
}

.t3 {
    background: url('../img/t3.png') no-repeat 100% /100% 100%;
}

.t4 {
    height: 1.21rem;
    background: url('../img/t4.png') no-repeat 100% /100% 100%;
    margin-bottom: .65rem;
}

.level {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    font-size: .22rem;
    color: #fff1ba;
    margin-top: .7rem;
}

.sznum {
    margin: .1rem;
}

.sznum,
.hwnum {
    height: .36rem;
    padding: 0 .2rem;
    color: #8f312c;
    border-radius: .18rem;
    background-color: #efd07d;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lookRule {
    text-align: center;
    text-decoration: underline;
    color: #efd07d;
    display: block;
    font-size: .18rem;
    margin: .44rem auto .32rem;
}

.part1_box,
.part2_box {
    width: 100%;
    height: 6.85rem;
    background: url('../img/p1_box.png') no-repeat 100% /100% 100%;
    margin: .1rem auto;
    box-sizing: border-box;
    padding-top: .7rem;
}

.part2_box {
    background: url('../img/p2_box.png') no-repeat 100% /100% 100%;
}

.part1_box ul,
.part2_box ul {
    width: 9.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

.part1_box ul li,
.part2_box ul li {
    width: 4.59rem;
}

.part1_box ul li>img,
.part2_box ul li>img {
    width: 3.23rem;
    height: 4.59rem;
}

.part1_box .good_num,
.part2_box .good_num {
    width: 2.44rem;
    height: .49rem;
    background: url('../img/p1_tpbg.png') no-repeat 100% / 100% 100%;
    margin-left: .45rem;
    margin-top: .05rem;
    color: #fff9da;
    font-size: .22rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.part1_box .good_num img,
.part2_box .good_num img {
    width: .28rem;
    height: .28rem;
    margin-right: .1rem;
}

.part1_des {
    display: none;
    text-align: center;
    color: #7f4915;
    margin-top: .2rem;
    font-size: .18rem;
}

.part1_box.show .part1_des,
.part2_box.show .part1_des {
    display: block;
}

.part1_des span {
    color: #d24116;
}

.part_list,
.part2_list {
    width: 11.08rem;
    height: 7.26rem;
    background: url('../img/p1_list.png') no-repeat 100% /100% 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}

.part2_list {
    margin: .5rem auto 1rem;
    width: 11.1rem;
    height: 6.88rem;
    background: url('../img/p2_list.png') no-repeat 100% /100% 100%;
}

.part_list li,
.part2_list li {
    width: 2.87rem;
    height: 3.59rem;
    position: relative;
}

.part2_list li {
    width: 2.89rem;
    height: 3.18rem;
}

.vote_num {
    padding-left: .46rem;
    box-sizing: border-box;
    background: url('../img/dzbg.png') no-repeat 100%/100% 100%;
    width: 2.07rem;
    height: .39rem;
    position: absolute;
    bottom: .79rem;
    left: .1rem;
    color: #723321;
    line-height: .42rem;
    font-size: .18rem;
}

.part2_list li .vote_num {
    bottom: .77rem;
}

.part_list li:nth-child(n+4):nth-child(-n+6) .vote_num {
    bottom: .8rem;
}

.part2_list li:nth-child(n+4):nth-child(-n+6) .vote_num {
    bottom: .8rem;
}

.vote_num::before {
    content: '';
    position: absolute;
    top: 50%;
    left: .2rem;
    transform: translateY(-50%);
    width: .18rem;
    height: .18rem;
    background: url('../img/zan.png') no-repeat 100% /100% 100%;
}

.btns {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.btns a {
    flex: none;
    width: 1.52rem;
    height: .45rem;
    background: url('../img/dz.png') no-repeat 100% /100% 100%;
}

.btns .like.on {
    background: url('../img/dz2.png') no-repeat 100% /100% 100%;
}

.btns .like.gray {
    background: url('../img/dz1.png') no-repeat 100% /100% 100%;
}

.btns .share {
    margin-left: .1rem;
    background: url('../img/lz.png') no-repeat 100% /100% 100%;
}

.gift {
    width: 11.07rem;
    height: 4.28rem;
    margin: .1rem auto .9rem;
}

.rule {
    padding-left: 3.6rem;
    font-size: .18rem;
    color: #e1ddd3;
}

.rule span {
    color: #f1d792;
}

.rule_box {
    display: flex;
}

.rule_box div:nth-child(1) {
    width: 1.1rem;
    height: .3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #6d3f1e;
    background: url('../img/p4_box.png') no-repeat 100% /100% 100%;
}

.rule_box div:nth-child(2) {
    padding-top: .08rem;
    margin-left: .1rem;
    margin-bottom: .1rem;
}

.rule_box div:nth-child(2) p {
    margin-bottom: .05rem;
}

.rule p {
    margin-bottom: .15rem;
}

.rule_box table {
    border: 1px solid #e1ddd3;
    margin: .1rem 0;
}

.rule_box td,
.rule_box th {
    height: .4rem;
    width: 2.66rem;
}

.rule_box td:nth-child(1),
.rule_box th:nth-child(1) {
    width: 2.8rem;
}

th,
td {
    text-align: center;
    border: 1px solid #e1ddd3;
}

.cyou_bottom_wraper td {
    border: none;
}