/* 红包标题 */
.hb-title {
    position: absolute;
    left: 50%;
    top: .6rem;
    transform: translateX(-50%);
    line-height: 1.4;
    font-size: .34rem;
    font-weight: bolder;
}
.hb-title4 {
    position: absolute;
    left: 50%;
    top: 0.5rem;
    transform: translateX(-50%);
    line-height: 1.4;
    font-size: .34rem;
    font-weight: bolder;
}
.hb-cost {
    position: absolute;
    left: 50%;
    top: 2.8rem;
    transform: translateX(-50%);
    font-size: 1rem;
}
.hb-cost4 {
    position: absolute;
    left: 50%;
    top: 2.6rem;
    transform: translateX(-50%);
    font-size: 1rem;
}
.hb-cost6 {
    position: absolute;
    left: 50%;
    top: 2.4rem;
    transform: translateX(-50%);
    font-size: 1rem;
}
.hb-jiesuo {
    position: absolute;
    top: 2.2rem;
    right: .6rem;
    font-size: .32rem;
    font-weight: bolder;
    color: #fff8ce;
}
.hb-jiesuo1 {
    position: absolute;
    top: 2.2rem;
    right: .65rem;
    font-size: .32rem;
    font-weight: bolder;
    color: #fff8ce;
}
.hb-price {
    position: absolute;
    top: 2.61rem;
    right: .75rem;
    font-size: 0.3rem;
    font-weight: bolder;
    color: #fff8ce;
}
.hb-price4 {
    position: absolute;
    top: 2.55rem;
    right: 0.8rem;
    font-size: .26rem;
    font-weight: bolder;
    color: #fff8ce;
}
.hb-price6 {
    position: absolute;
    top: 2.2rem;
    right: .9rem;
    font-size: 0.3rem;
    font-weight: bolder;
    color: #fff8ce;
}

/* 红包标题 end */
/* 右上角 */
.rule {
    position: absolute;
    right: 0;
    top: .6rem;
    display: flex;
    flex-direction: column;
    width: .48rem;
    line-height: .28rem;
    font-size: .28rem;
    font-weight: bold;
    color: #fff;
    z-index: 1;
}
.rule>* {
    margin-bottom: .4rem;
    padding: .2rem .1rem;
    border-radius: .2rem 0 0 .2rem;
    background-color: rgba(222, 19, 19, 0.2);
}
/* 右上角 end */

/* jackpot */
#jackpot {
    position: absolute;
    top: 9rem;
    left: .2rem;
    overflow: hidden;
    height: .9rem;
    width: 90%;
}
#jackpot ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    font-size: .32rem;
}
#jackpot li {
    position: absolute;
    top: 0;
    left: 0;
    width: 93%;
    height: .9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .4rem;
    line-height: 1rem;
    font-size: .24rem;
}
#jackpot li:nth-child(1) {
    top: 0;
}
#jackpot li:nth-child(2) {
    top: 1.4rem;
}
#jackpot li:nth-child(3) {
    top: 2.8rem;
}
#jackpot li:nth-child(4) {
    top: 4.2rem;
}
#jackpot li:nth-child(5) {
    top: 5.6rem;
}
#jackpot li:nth-child(6) {
    top: 7rem;
}
#jackpot li:nth-child(7) {
    top: 8.4rem;
}
#jackpot li:nth-child(8) {
    top: 9.8rem;
}
#jackpot li:nth-child(9) {
    top: 11.2rem;
}
#jackpot li:nth-child(10) {
    top: 12.6rem;
}
#jackpot li>* {
    margin: 0 .1rem;
}
#jackpot li img {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
}
#jackpot li span {
    flex: 1;
}
/* jackpot end */

/* 领取按钮 */
.pay-btn {
    position: absolute;
    top: 10rem;
    left: 10%;
    width: 80%;
    height: 1.2rem;
    margin: 0 auto;
    border-radius: 1rem;
    background-image: linear-gradient(to bottom, #fe7a4d 0%, #f71c1e 100%);
    font-size: .5rem;
    color: #FFFFFF;
    animation: big_and_small 2s infinite;
}

/* 领取按钮 end */

/* 底部公司信息 */
.gs-box {
    color: #fff;
    position: absolute;
    left: .2rem;
    right: .2rem;
    margin-top: 1.5rem;
    font-size: .24rem;
    text-align: center;
    padding-bottom: .5rem;
}
.gs-box .service-hotline {
    color: #186ad5;
}
.gs-box .footer-rule {
    padding-top: .5rem;
    text-align: left;
}
/* 底部公司信息 end */

/* loading */
#loader {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}
/* loading end */

/* 规则弹窗 */
#ruleMask {
    z-index: 3;
}
.ruleContent {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 5.28rem;
    height: 8.6rem;
    margin: auto;
    border-radius: .24rem;
    background: #fff7e8;
    padding-top: .34rem;
    color: #7a4510;
}
.rulesTitle {
    margin-bottom: .4rem;
    text-align: center;
    font-size: .32rem;
    font-weight: 600;
    line-height: .44rem;
}
.rulesContent {
    height: 7.2rem;
    font-size: .24rem;
    line-height: .48rem;
    overflow-y: scroll;
    margin-left: .2rem;
    padding-right: 10px;

}
.ljlq-box {
    width: 100%;
    background-color: #FFFFFF;
    padding-top: .2rem;
    padding-bottom: .2rem;
    border-radius: 0 0 .2rem .2rem;
    display: flex;
    font-size: .24rem;
    justify-content: space-around;
}
.wzdl {
    height: .72rem;
    padding: 0px .5rem;
    border: 1px solid #c5c5c5;
    border-radius: .36rem;
    text-align: center;
    line-height: .72rem;
}
.ljlq-button {
    height: .72rem;
    padding: 0px .5rem;
    border-radius: .36rem;
    text-align: center;
    line-height: .72rem;
    background: linear-gradient(to right, #f7ddac 60%, #cbab6f);
    color: #7f4d19;
    font-weight: 600;
}
/* 规则弹窗 end */

/* 是否支付弹窗 */
.tczt {
    width: 6rem;
    height: 3rem;
    margin: auto;
    border-radius: .1rem;
    background-color: #fff;
    text-align: center;
    font-size: .5rem;
}
/* 是否支付弹窗 end */

/* 挽留弹窗 */
.retain-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.retain-content {
    position: relative;
    width: 6.51rem;
    height: 6.24rem;
    margin-bottom: 1rem;
    background-image: url('../images/retain.png');
    background-position: center;
    background-size: 100% auto;
}
.retain-content .retain-amount {
    position: absolute;
    left: 3.65rem;
    bottom: 2rem;
    transform: translateX(-50%);
    font-size: 1.1rem;
    font-weight: bolder;
    color: #fd4500;
}
.retain-content .retain-btn {
    position: absolute;
    bottom: .6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 5rem;
}
/*.retain-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.retain-content {
    width: 6.51rem;
    height: 9.24rem;
    margin-bottom: 1rem;
    background-image: url('../images/red-packet-bg.png');
    background-size: 100% 100%;
    background-position: center;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.retain-header{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 6vw;
    color: #feedbb;
    height: 30%;
}
.retain-header img {
    width: 25px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.retain-tag{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 4vw;
    background: white;
    color: #5d4436;
    padding: 5px 10px;
    border-radius: 50px 50px 50px 0;
    margin-left: 50%;
    margin-top: 5%;
    height: 5%;
}

.retain-money{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-size: 9vw;
    color: #feedbb;
    line-height: 150%;
    height: 29%;
}

.retain-open{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11vw;
    color: #5d4436;
    background: #eccb99;
    border-radius: 50px;
    width: 100px;
    height: 100px;
}

.retain-content .retain-amount {
    font-size: 1.1rem;
    font-weight: bolder;
    color: #fd4500;
    display: flex;
    justify-content: center;
    align-items: center;
}
.retain-content .retain-btn {
    position: absolute;
    bottom: .6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 5rem;
}*/
/* 挽留弹窗 end */

.redPacket-content {
    width: 6.51rem;
    height: 9.24rem;
    margin-bottom: 1rem;
    background: #f45f4d;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 15px;
}

.redPacket-money{
    display: flex;
    justify-content: center;
}

.redPacket-money-item1{
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.redPacket-money-item2{
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.redPacket-money-item3{
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.redPacket-header{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 4vw;
    color: #fad4bd;
    height: 5%;
}

.redPacket-header2{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 6vw;
    color: #ffe6b9;
    height: 8%;
    letter-spacing: 2px;
}

.redPacket-open{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5vw;
    color: #4b3c28;
    background: #eccb99;
    border-radius: 10px;
    width: 80%;
    height: 50px;
    margin-top: 5%;
    background: linear-gradient(to top, #eccd9c, #fff5dd); /* 上下渐变色 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* 阴影效果 */
}

.jine-box {
    margin: 0 .4rem;
    position: relative;
}

.qian {
    font-size: .4rem;
    font-weight: 700;
    color: #e56033;
}

.jine {
    font-size: .85rem;
    color: #e56033;
    font-weight: 700;
}

.xiangqing {
    display: inline-block;
    font-size: .24rem;
    background-color: #e43e41;
    color: #fff;
    height: .45rem;
    line-height: .45rem;
    padding: 0 .15rem;

    border-radius: .45rem;
    position: absolute;
    top: .5rem
        /* margin-top: -0.6rem; */
}

.fl-text {
    font-size: .24rem;
    height: .28rem;
    line-height: .28rem;
    color: #c4c4c4;

}

.xq-text {
    font-size: .28rem;
    margin-top: .3rem;
}

.xh-box {
    font-size: .24rem;
    display: flex;
    justify-content: space-between;
    margin-top: .3rem;
    /* margin: 0 .6rem; */
}

.xh-x-box {
    width: 3.6rem;
    text-align: center;
    border-right: 1px solid #f9f6f6;
}

.xh-icon img {
    width: .5rem;
    height: .5rem;
}

.ts {
    border-right: none;
}

.xh-textb {
    color: #b7b6b6;
}

.qrlj-button {
    position: absolute;
    top: 9.4rem;
    height: 1.5rem;
    width: 7.2rem;
    margin: .6rem .2rem;
    font-size: .45rem;
    text-align: center;
    line-height: 1.09rem;
    color: #fff;
    border-radius: .55rem;
    /* background-color: #186ad5; */
}

.zf-box {
    display: flex;
    justify-content: space-between;
    margin: 0 .2rem;
    font-size: .24rem;
    position: relative;
}

.zf-left img {
    width: .5rem;
    height: .5rem;
}

.zf-right img {
    width: .4rem;
    height: .4rem;
}

.zf-text {
    display: inline-block;
    position: absolute;
    top: .08rem
}

hr {
    border: 0px;
    border-bottom: 1px solid #cecccc;
    margin-top: .2rem;
}

/* 倒计时 */
.countdown {
    margin: 0;
    position: absolute;
    top: 1.63rem;
    left: 4.46rem;
    font-size: .28rem;
    color: rgb(255, 255, 255);
}

.countdown span {
    font-size: .4rem;
    font-weight: 700;
    /* background-image: linear-gradient(0deg, rgb(255, 255, 255), #FDF2B7); */
    color: #fff;
    margin: .1rem .04rem;
    padding: .01rem .02rem;
    border-radius: .04rem;
    /* font-weight: bold; */
}

/* .cbgns {
    position: fixed;
    right: 0rem;
    top: .6rem
} */

/* .quit {
    width: .48rem;
    height: .48rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAbFJREFUaEPtWD1OxjAMtQvXgEskh2BkQQwwfyOHYWSGAbEwcojkEnCN72tQUCpFVfs5P68qkdLVif2en52kZmr848bxUyewt4Jdga5AZQZ6CVUmsHp7kgLW2hvn3EuI9qS1/qyOvODAGHNLRM/exMwHpdSXFCeJgDHmm4iugrMjMz8qpd4l5zl2a+29c+6ViC7Dvh+t9bXko4SA9wklsQDex4AS8NJ+RNmBkVgBfySiu5RSTVLAo10LVFNOCJ/JBNAkEOD/ml1qkrkdERjhY8KVTaBWCST4IgUm5iVASvZIFVKkQAmJLcBXKZBDYivwEAJST3j77IaF3SEwAmsknHOn8K65iGoZeotX9UDiERsvg4KHKhD3xDiOb8wcZ92X0WkYhgf0IxCqwFRKzRJYOW3aKKEl8M008blz/t8foymXVMoa6cmwZq9q4hxgOWtzyBQTKAFUskciU0SgBkjN3iUy2QQQABA+in5okIFRvpIVQAWMywDhM4lAmJi1O1aZTeag7/kz/xPQwVbbo8Xmh7vSZbKnPamJ9wQoxe4EpAxtbe8KbJ1hyX9XQMrQ1vbmFfgFkuzMQOr9ZF0AAAAASUVORK5CYII=) no-repeat;
    background-size: .48rem .48rem;
    position: absolute;
    top: 0rem;
    right: 0rem;
} */

.cbgns img {
    /* display: block; */
    border-radius: .12rem 0 0 .12rem;
    width: .5rem;
    height: 1.2rem;
}


.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
}

.modal-content {
    margin: 20% auto;
    padding: .4rem;
    width: 80%;
    height: 7.6rem;
    /* background-image: url(https://hddj-static.oss-accelerate.aliyuncs.com/images/156a3a047e2ae9033dd90d66789d7eb.png); */
    background-image: url(../../hddj-static.oss-accelerate.aliyuncs.com/images/tc-xin-9.9.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
}

.close {
    color: #aaa;
    float: right;
    font-size: .56rem;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.ljlq {
    position: absolute;
    top: 6.5rem;
    left: .9rem;
    background-color: #ffd27d;
    color: #ff1a0d;
    height: 1rem;
    width: 5rem;
    text-align: center;
    line-height: 1rem;
    font-size: .36rem;
    font-weight: 700;
    border-radius: .5rem;

}

.justify-center {
    display: flex;
    justify-content: center;
}



.wx-pay {
    top: -4.4rem;
}

.align-center {
    display: flex;
    align-items: center;
}

.rulesContent p {
    margin-top: 0;
    margin-bottom: 0;
}

.losder-img {
    width: 3rem;
    height: 3.6rem;
}

/* .dialog {
    background-color: #aaa;
    width: 300px;
    height: 200px;
} */

.dialog__content {
    flex: 1;
    max-height: 60vh;
    padding: .52rem .48rem;
    overflow-y: auto;
    font-size: .28rem;
    line-height: .4rem;
    white-space: pre-wrap;
    text-align: center;
    word-wrap: break-word;
}

/* .dialog .dialog__footer {
    display: flex;
} */

.footer {
    color: #fff;
    position: absolute;
    top: 16rem;
    padding: .5rem;
    font-size: .24rem;
    text-align: left;
}