/*公共部分 S*/

body {
    background: #F5F8FF;
    overflow-y: scroll;
    width: fit-content;
}

* {
    box-sizing: border-box;
}

a {
    color: #666;
}

.relative {
    position: relative;
    /* background: url(../img/person/vipbj.png) no-repeat; */
    background: url(../img/datahoop-index/bg-02.jpg) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    margin: 0 auto;
}

.content {
    display: flex;
    margin-top: 75px;
    width: 90%;
    margin: 0 auto;
    overflow: scroll;
}

.show {
    display: block;
}

.hidden {
    display: none;
}


/* info */
.infoVip {
    color: #fff;
    text-align: center;
}

.infoVip .infoTxt1 {
    font-size: 50px;
    font-weight: bold;
    color: #FCE295;
    margin-top: 95px;
}

.infoVip .infoTxt2 {
    font-size: 20px;
    color: #FFFFFF;
    margin-top: 30px;
}

.infoVip .infoBtn {
    display: inline-block;
    width: 171px;
    height: 43px;
    line-height: 43px;
    background: linear-gradient(242deg, #EED48B, #E1C076);
    border-radius: 22px;
    margin-top: 40px;
    font-size: 16px;
    color: #060A16;
}

.infoVip .infoTxt3 {
    font-size: 24px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 139px;
}

.infoVip .infoDiv {
    margin-top: 40px;
}

.infoVip .infoDiv div {
    width: 375px;
    height: 98px;
    display: inline-block;
}

.infoVip .infoDiv div .infoDivTxt1 {
    font-size: 20px;
    font-weight: 500;
    color: #333333;
    margin-top: 20px;
}

.infoVip .infoDiv div .infoDivTxt2 {
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    margin-top: 13px;
}

.infoVip .infoDiv div:first-child {
    background: linear-gradient(242deg, #E5E5EB, #CBD0DE);
    box-shadow: -3px 4px 13px 0px rgba(125, 125, 125, 0.56);
    border-radius: 49px 0px 0px 49px;
}

.infoVip .infoDiv div:last-child {
    background: linear-gradient(242deg, #EFD58C, #E1C175);
    box-shadow: -3px 4px 13px 0px rgba(125, 125, 125, 0.56);
    border-radius: 0px 49px 49px 0px;
}

/* 第一列 */
.users{
    width: 240px;
    border-bottom: 1px solid #cccdd1;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    /* padding-top: 35px; */
    /* background: #0D0C05; */
}
.users>div{
    height: 200px;
    /* background:#F2F3F8; */
    padding-top: 80px;
    font-size: 24px;
    font-family: 'MicrosoftYaHeiSemibold';
    text-align: left;
    padding-left: 60px;
}
/* .basis{
    background:#F2F3F8;
} */
.users:last-child{
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    margin-top: 36px;
}
/*banner*/

.vipBanner {
    width: 100%;
    height: 320px;
    margin-top: 116px;
    background: url(../img/perscen-vip/vip_head_bg.png)
}

.system {
    width: 96px;
    height: 21px;
    font-size: 24px;
    font-family: MicrosoftYaHeiSemibold;
    color: rgba(255, 255, 255, 1);
    line-height: 21px;
}

.bannerCont {
    padding: 10px 0 0 98px;
}

.vip_goBack {
    width: 28px;
    height: 16px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: rgba(255, 255, 255, 1);
    line-height: 16px;
    margin-bottom: 37px;
}

.vipBanner .bannerCont a i {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url(../img/icon/vip_back.png) no-repeat;
    background-size: 100%;
}

.vip_bottom {
    margin-top: 37px;
}



/* 内容 */
.contBox{
    margin-top: 116px;
}
.contBox_headList {
    float: left;
    width: 240px;
    height: 286px;
    background: #FFFFFF;
    text-align: center;
}

/*aside*/

.person-left {
    margin-left: 30px;
    height: 100%;
    width: 240px;
    /* background: #F2F3F8; */
}

/* .person-left dl { */
    /* padding-top: 10px; */
    /* height: -webkit-fill-available; */
/* } */

.left-common {
    width: 179px;
    height: 30px;
    background: rgba(33, 37, 56, 1);
    font-size: 16px;
    font-family: MicrosoftYaHeiSemibold;
    color: rgba(255, 255, 255, 1);
    line-height: 30px;
    text-align: center;
}

.person-left dd {
    font-weight: 900;
    text-align: center;
    font-size: 12px;
    font-family: MicrosoftYaHei;
    color: #333;
    line-height: 19px;
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #cccdd1;
}

.person-left .icon {
    width: 51px;
    height: 45px;
    background-image: url(../img/perscen-vip/vip_logo.png);
    margin-top: 30px;
}


/* section vip列表 */

.vipHeader {
    /* height: 286px; */
    text-align: center;
    border-bottom: 1px solid #cccdd1;
    /* padding-top: 35px; */
    /* background: #0D0C05; */
}
.vipHeader>div{
    /* height: 286px; */
    height: 200px;
    /* margin-top: 80px; */
    /* background: #fff; */
}


.vipCount .active {
    /* height: 322px; */
    /* background: #F6F0DE; */
    /* padding-top: 0; */
    border-radius: 10px 10px 0px 0px;
}

.vipCount .countNum {
    color: rgba(53, 56, 75, 1);
    font-size: 14px;
    position: absolute;
    right: 11px;
    top: 15px;
    z-index: 1;
    transform: rotate(45deg);
}
/* .vipBlock>div:nth-child(3) .vipHeader { */
    /* background: #EEE5C8; */
/* } */
/* .vipBlock>div:nth-child(4) .vipHeader { */
    /* background: #E5D7AD; */
/* } */

.vipCount .count::after {
    content: '';
    position: absolute;
    background-image: url(../img/perscen-vip/vip_count.png);
    width: 68px;
    height: 68px;
    top: 0;
    right: 0;
}

.vipHeader .top {
    padding-top: 30px;
    font-size: 24px;
    color: #333;
}

.active .top{
    padding-top: 85px;
}
.vipHeader .opening {
    display: inline-block;
    width: 156px;
    height: 44px;
    line-height: 44px;
    /* background: linear-gradient(178deg, #271805, #6E4602); */
    background: linear-gradient(178deg, #584022, #d5701a);
    box-shadow: 0px 7px 13px 0px rgb(165 136 87 / 56%);
    border-radius: 22px;
    margin-top: 5px;
    color: #FFFFE7;
    font-size: 16px;
    cursor: pointer;
}
.vipHeader .give {
    width: 82px;
    height: 20px;
    line-height: 20px;
    background: #DC4630;
    border-radius: 4px;
    display: inline-block;
    font-size: 12px;
    color: #fff;
    margin-top: 5px;
}
.vipHeader sup {
    font-size: 18px;
    font-weight: 400;
    color: #333;
}

.vipHeader .middle {
    margin-top: 10px;
    font-weight: bold;
    color: #333;
    font-size: 16px;
}

.vipHeader .middle .priceTxt{
    color: #333;
    font-size: 16px;
}

.vipHeader .bottom {
    color: rgba(204, 204, 204, 1);
    font-size: 14px;
    margin: 14px 0 21px;
}
.vipCount>.vipBody:last-child li{
    border-bottom: 0px solid #cccdd1 !important;
}
.vipCount>div:nth-child(1)>.fixBox{
    position: relative;
}
.basis>dd:last-child{
    border-bottom: 0px solid #cccdd1 !important;
}

.vipBlock {
    /* background: #fff; */
    display: flex;
    /* margin-bottom: 20px; */
}









/* 
.vipBody ul li img{
    width: 20px;
}
.vipCount>div:nth-child(2) p{
    padding-top: 12px;
}
.vipCount>div:nth-child(3) p{
    padding-top: 12px;
}
.vipCount>div:nth-child(4) img {
    margin-top: 13px !important;
}
.vipCount>div:nth-child(5) img {
    margin-top: 13px !important;
}
.vipCount>div:nth-child(2)div:nth-child(6) img {
    margin-top: 13px !important;
}
.vipBlock>.vipCount:nth-child(1)>div:nth-child(6) img {
    margin-top: 13px !important;
}
.vipBlock>.vipCount:nth-child(4)>div:nth-child(6) img {
    margin-top: 13px !important;
}
.vipCount>div:nth-child(7) p {
    padding-top: 13px !important;
}
.vipBlock>.vipCount:nth-child(1)>div:nth-child(8) img {
    padding-top: 13px !important;
}
.vipBlock>.vipCount:nth-child(4)>div:nth-child(8) img {
    padding-top: 13px !important;
}
.vipBlock>.vipCount:nth-child(1)>div:nth-child(7) img {
    margin-top: 13px !important;
}
.vipBlock>.vipCount:nth-child(4)>div:nth-child(7) img {
    margin-top: 13px !important;
}
.vipBlock>.vipCount:nth-child(1)>div:nth-child(9) img {
    margin-top: 13px !important;
}
.vipBlock>.vipCount:nth-child(4)>div:nth-child(9) img {
    margin-top: 13px !important;
}
.vipBlock>.vipCount:nth-child(2)>div:nth-child(9) img {
    padding-top: 13px !important;
}
.vipCount>div:nth-child(10) img {
    margin-top: 13px !important;
}
*/




















.vipBody ul li img{
    width: 20px;
}
.vipCount>div:nth-child(3) img {
    margin-top: 13px !important;
}
.vipCount>div:nth-child(5) img {
    margin-top: 13px !important;
}
.vipBlock>.vipCount:nth-child(1)>div:nth-child(7) img {
    margin-top: 13px !important;
}
.vipBlock>.vipCount:nth-child(4)>div:nth-child(7) img {
    margin-top: 13px !important;
}
.vipBlock>.vipCount:nth-child(1)>div:nth-child(9) img {
    margin-top: 13px !important;
}
.vipBlock>.vipCount:nth-child(4)>div:nth-child(9) img {
    margin-top: 13px !important;
}
.vipCount>div:nth-child(10) img {
    margin-top: 13px !important;
}
.vipCount {
    position: relative;
    border-left: 1px solid #E0E0E0;
    /* border-right: 1px solid #E0E0E0; */
}
.vipBlock>div:nth-child(2) .vipHeader{
    position: relative;
    padding-top: 0;
}

/* .active .fixBox{ */
    /* height: 322px !important;   */
    /* border-bottom: 1px solid #cccdd1; */
/* } */
.tuijian{
    width: 28px;
    position: absolute;
    top: 0px;
    left: 30px;
}
.tuijian2{
    width: 28px;
    position: absolute;
    top: 35px;
    left: 30px;
}
.vipBlock>div:nth-child(2){
    /* background: #F6F0DE; */
    border-radius: 10px 10px 0px 0px;
    /* margin-top: -35px; */
}
.vipBlock>div:nth-child(3){
    /* display: none; */
    /* background: #EEE5C8; */
}
/* .vipBlock>div:nth-child(4){ */
    /* background: #E5D7AD; */
/* }
.vipBlock>div:nth-child(1) .vipHeader>div,
.vipBlock>div:nth-child(1) .vipBody{
    background: #fff;
}
.vipBlock>div:nth-child(2) .vipHeader>div,
.vipBlock>div:nth-child(2) .vipBody{
    background: #F6F0DE;
}
.vipBlock>div:nth-child(3) .vipHeader>div,
.vipBlock>div:nth-child(3) .vipBody{
    background: #EEE5C8;
}
.vipBlock>div:nth-child(4) .vipHeader>div,
.vipBlock>div:nth-child(4) .vipBody{
    background: #E5D7AD;
} */


.line {
    margin: auto;
    margin-top: 35px;
    width: 180px;
    height: 1px;
    background: rgba(232, 232, 232, 1);
}

/* .vipBlock .vipCount .firstTop { */
    /* margin-top: 55px; */
/* } */

.vipBlock .vipCount .secondTop {
    margin-top: 36px;
}

/* .vipBody ul li:last-child { */
    /* margin-bottom: 15px; */
/* } */

.vipBody li {
    font-size: 12px;
    font-family: MicrosoftYaHei;
    color: #333;
    text-align: center;
    height: 45px;
    padding: 0 10px;
    border-bottom: 1px solid #cccdd1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vipCount .normal {
    width: 120px;
    height: 30px;
    border-radius: 2px;
    border: 1px solid rgba(73, 111, 255, 1);
    text-align: center;
    font-size: 14px;
    color: #36394F;
    margin: auto;
    line-height: 30px;
    cursor: pointer;
}

.vipCount .use,
.vipCount .renew {
    background: #496FFF;
    color: #fff;
}

.vipCount .tel {
    text-align: center;
    font-size: 20px;
    line-height: 20px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    display: none;
}

.vipBody i {
    width: 20px;
    height: 20px;
    vertical-align: bottom;
    background-image: url(../img/perscen-vip/tel.png);
}

.vipBody span {
    display: inline-block;
    height: 20px;
    width: 1px;
    background: #E8E8E8;
    margin: 0px 5px;
}


/* 支付相关 */

#mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .7);
}

#payment {
    width: 400px;
    background: #fff;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 14px;
}

#payment .title {
    height: 65px;
    line-height: 65px;
    background: linear-gradient(90deg, #AA4E42 0%, #FFB0A5 100%);
    font-size: 18px;
    color: #FFFFFF;
    padding-left: 35px;
    border-radius: 14px 14px 0 0;
}

#payment .title img {
    width: 20px;
    position: absolute;
    right: 30px;
    top: 23px;
    cursor: pointer;
}

.payDetail p:first-child {
    font-size: 14px;
    color: rgba(51, 51, 51, 1);
}
.payDetail .middle .type div {
    display: none;
}

.payDetail p:last-child {
    font-size: 12px;
    margin-bottom: 20px;
    color: rgba(153, 153, 153, 1);
}

.payDetail .middle {
    display: flex;
    width: 340px;
    text-align: center;
    height: 50px;
    margin: 20px 0 10px;
    border-radius: 3px;
    border: 1px solid rgba(196, 198, 207, 1)
}
.vipCount>div:nth-child(4)>ul>li{
    line-height: 45px;
}
.vipCount>div:nth-child(8)>ul>li{
    line-height: 45px;
}
/* .vipBlock>.vipCount:nth-child(1) .fixBox>div{
    display: inline-block;
} */

.payDetail .middle .type {
    width: 99px;
    background: rgba(240, 242, 245, 1);
    color: #DB8074;
    font-size: 18px;
    line-height: 50px;
}

.payDetail .cost span {
    font-size: 24px;
    line-height: 50px;
    color: rgba(51, 51, 51, 1);
}

.payDetail .cost {
    width: 241px;
    font-size: 12px;
    color: rgba(51, 51, 51, 1);
}

#payment .titlt2 {
    margin-bottom: 20px;
    font-size: 14px;
    color: rgba(51, 51, 51, 1);
}

#payment .payType {
    padding-bottom: 20px;
    border-bottom: 1px solid #E8E8E8;
    overflow: hidden;
}

#payment .payType p {
    width: 45%;
    line-height: 40px;
    height: 40px;
    overflow: hidden;
    float: left;
    border: solid 1px #C4C6CF;
    padding: 0 5px;
    cursor: pointer;
}
.payType p.active{
    border-color: blue !important;
    border: 1px solid #5584FF !important;
    background: url(../img/icon/pay_select.png) no-repeat right bottom;
    background-position: 135px 13px;
}
#payment .payType p .iCheck {
    width: 14px;
    height: 14px;
    margin-top: 8px;
    border-radius: 2px;
}

#payment .payType p .iCheck.normal {
    border: 1px solid #C4C6CF;
    transition: all .5s
}

#payment .payType p .iCheck.normal:hover {
    background: #EEF3F9;
    border: 1px solid #5584FF;
}

#payment .payType p .iCheck.normal.active {
    background: url(../img/icon/alglist_yes.png) no-repeat center #5584FF;
    border: 1px solid #5584FF;
}

#payment .payType p .iCheck.disabled {
    border: 1px solid #E6E7EB;
    background: #F7F8FA;
}

#payment .payType p img {
    width: 30px;
    height: 30px;
    margin: 0 15px 0 7px;
    vertical-align: middle;
}

#payment .payType p span {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #666;
    display: inline-block;
}

#payment .btn {
    width: 96px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 30px auto;
    font-size: 14px;
    color: #fff;
    background: #DB8074;
    cursor: pointer;
    border-radius: 4px;
}


/* 二维码 */
.payWay{
    height: 50px;
    line-height: 50px;
    background: linear-gradient(90deg, #AA4E42 0%, #FFB0A5 100%);
    border-radius: 14px 14px 0px 0px;
    font-size: 18px;
    color: #fff;
    padding-left: 35px;
}
.payWay img{
    position: absolute;
    top: 22px;
    right: 30px;
    width: 20px;
    cursor: pointer;
}
#wxerweimaMu,
#zfberweimaMu {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1999;
}

#wxerweima,
#zfberweima {
    width: 320px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: relative;
    border-radius: 14px;
}



#wxerweima .title,
#zfberweima .title {
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 20px;
    color: #333;
}

#wxerweima .qrcode,
#zfberweima .qrcode {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    background: #ccc;
    display: block;
    position: relative;
}
#wxerweima .qrcode img,
#zfberweima .qrcode img{
    width: 180px;
    height: 180px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

#wxerweima .paytip,
#wxerweima .reload,
#zfberweima .paytip,
#zfberweima .reload {
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #333;
    font-size: 14px;
    cursor: pointer;
}

#wxerweima .reload:active,
#zfberweima .reload:active {
    color: #999;
}

#wxerweima .reload i,
#zfberweima .reload i {
    width: 16px;
    height: 16px;
    margin: 15px 5px 0 0;
    background: url(../img/icon/reload.png) no-repeat;
    background-size: 100%;
    ;
    display: inline-block;
}


/* 二维码加载动画 */

.loader {
    position: absolute;
    top: 115px;
    left: 70px;
    width: 180px;
    height: 180px;
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    display: none;
}

@-webkit-keyframes scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    45% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        opacity: 0.7;
    }

    80% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    45% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        opacity: 0.7;
    }

    80% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

.ball-pulse>div:nth-child(1) {
    -webkit-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}

.ball-pulse>div:nth-child(2) {
    -webkit-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}

.ball-pulse>div:nth-child(3) {
    -webkit-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}

.ball-pulse>div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
}


/*犀数币支付*/

#xshuAlertMu {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 1998;
}

#xshuAlert {
    width: 400px;
    padding: 0 30px 20px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#xshuAlert .titl {
    position: relative;
    overflow: hidden;
}

#xshuAlert .titl p {
    text-align: center;
    padding: 20px 0;
    font-size: 20px;
    color: #333;
    position: relative;
    overflow: hidden;
}

#xshuAlert .titl i.close {
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    color: #999;
    font-size: 24px;
    position: absolute;
    right: 0;
    top: 15px;
    cursor: pointer;
}

#xshuAlert .tip {
    font-size: 14px;
    color: #333;
}

#xshuAlert .tip2 {
    margin-bottom: 15px;
    color: red;
}

#xshuAlert input {
    width: 100%;
    height: 40px;
    margin: 20px 0 10px;
    padding: 0 10px;
    font-size: 14px;
    border: 1px solid #C4C6CF;
}

#xshuAlert .btn {
    width: 96px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 0 auto;
    font-size: 14px;
    color: #fff;
    background: #496FFF;
    cursor: pointer;
}

#xshuAlert .btn:hover {
    background: #666;
}

#xshuAlert .forgetMmGoChange {
    text-align: center;
    padding-top: 15px;
    font-size: 12px;
    color: #999;
}

.nav_percenvip_xf {
    padding: 12px 0;
    text-align: center;
}

.nav_percenvip_xfl {
    color: #666;
}

.nav_percenvip_xfr {
    color: #496fff;
    padding-left: 5px;
    cursor: pointer;
}
.changeHei{
    /* display: flex;
    align-items: center; */
    padding-top: 100px;
}
.changeHei p{
    color: #333;
    font-size: 20px;
    padding: 0 10px;
}