.steam-link {
    display: block;
    width: 1.6rem;
    height: .486rem;
}

.floating-font1 {
    position: relative;
    width: 1.4rem;
    left: 0.125rem;
    top: 2.5rem;
    font-size: .20rem;
    text-align: center;
    color: #fff;
}

.floating-font2 {
    letter-spacing: 0.02rem;
    position: relative;
    left: 0.1rem;
    width: 1.54rem;
    top: 2.45rem;
    font-size: .2rem;
    text-align: center;
    color: #fff;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 998;
}

.cdk-dialog {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 1998;
}

.cdkey {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    width: 12.9rem;
    height: 7.45rem;
}

.cdkey-tip {
    position: absolute;
    top: 0.65rem;
    text-align: center;
    color: red;
    font-size: .18rem;
    width: 12.07rem;
    display: block;
}

.container-cdkey {
    margin: 0 auto;
    z-index: 999;
    height: 7.45rem;
    width: 100%;
    display: block;
}

@media screen and (min-width: 768px) {
    .container-cdkey {
        background: url("../images/cdkey-bg.png") no-repeat center center;
        background-size: cover;
        width: 12.07rem;
    }

    .step2-phone {
        width: 10.81rem;
    }

    .step1-font2 {
        width: 8rem;
    }

    .step1-goods {
        width: 5.34rem;
        position: relative;
        float: left;
        left: .7rem;
        height: 2.1rem;
    }

    .step1-instruction {
        position: relative;
        left: .83rem;
        float: left;
        width: 5.34rem;
        height: 2.1rem;
        background-color: #e8e1fe;
    }

    .goods-box {
        position: absolute;
        float: left;
        left: 0.7rem;
        width: 4.63rem;
        height: 2.1rem;
        overflow-y: hidden;
    }

    .step1-desc {
        position: relative;
        float: left;
        top: 0.18rem;
        left: 0.35rem;
        font-size: .15rem;
        width: .3rem;
        color: #b99eef;
    }

    .instruction-content {
        position: relative;
        top: .05rem;
        left: .38rem;
        font-size: .13rem;
        color: #555555;
        line-height: .22rem;
    }

    .step3-pay {
        position: relative;
        float: left;
        left: .7rem;
        width: 7.1rem;
        height: 2.28rem;
        background-color: #e8e1fe;
    }

    .step1-font2 {
        position: relative;
        left: .5rem;
        height: .5rem;
        color: #866bbc;
        line-height: .7rem;
        float: left;
    }

    .pay-desc {
        position: relative;
        left: 4%;
        float: left;
        width: 3.3rem;
        height: 2.28rem;
    }

    .step3-service {
        position: relative;
        float: left;
        left: .83rem;
        width: 3.56rem;
        height: 2.28rem;
        background-color: #e8e1fe;
    }

    .pay-btn {
        font-size: 0.24rem;
        text-align: center;
        background-color: green;
        color: #fff;
        width: 1rem;
        height: 0.5rem;
        line-height: 0.5rem;
        border-radius: 0.05rem;
        display: inline-block;
        position: relative;
        top: 0.6rem;
        cursor: pointer;
    }
}

@media screen and (max-width: 768px) {
    .container-cdkey {
        border: 0.01rem solid #e8e1fe;
        border-radius: 0.1rem;
        width: 90%;
        margin: 0 auto;
    }

    .step1-font2 {
        width: 3rem;
    }

    .step1-goods {
        background-color: #e8e1fe;
        height: 2.1rem;
        width: 100%;
        clear: both;
    }

    .cdkey-step1 {
        width: 100%;
    }

    .step1-instruction {
        width: 100%;
        height: 2.1rem;
        background-color: #e8e1fe;
    }

    .cdkey-step1, .cdkey-step2, .cdkey-step3 {
        background-color: #e8e1fe;
        padding: 0.3rem 0;
    }

    .instruction-content {
        position: relative;
        top: .05rem;
        left: .38rem;
        font-size: .16rem;
        color: #555555;
        line-height: .26rem;
    }

    .cdkey-step3 {
        width: 100%;
        margin-bottom: 0.4rem;
    }

    .step3-pay {
        width: 90%;
        height: 2.28rem;
        background-color: #e8e1fe;
        border: 1px solid #f1f1f1;
        margin: 0.2rem auto 0;
    }

    .step1-font2 {
        position: relative;
        left: .5rem;
        height: .5rem;
        color: #866bbc;
        line-height: .7rem;
    }

    .pay-desc {
        position: relative;
        left: 4%;
        float: right;
        width: 3.3rem;
        height: 2.28rem;
    }

    .step3-service {
        width: 3.56rem;
        height: 2.28rem;
        background-color: #e8e1fe;
        margin: 0 auto;
    }

    .pay-btn {
        font-size: 0.24rem;
        text-align: center;
        background-color: green;
        color: #fff;
        width: 90%;
        height: 0.5rem;
        line-height: 0.5rem;
        border-radius: 0.05rem;
        display: inline-block;
        cursor: pointer;
    }
}

.cdkey-title {
    position: relative;
    left: .7rem;
    width: 4rem;
    height: .58rem;
    font-size: .26rem;
    font-weight: bold;
    color: #866bbc;
    line-height: .6rem;
}

.cdkey-step1, .cdkey-step2, .cdkey-step3 {
    float: left;
}

.step1-font1 {
    position: relative;
    left: .4rem;
    width: .2rem;
    height: .5rem;
    color: #866bbc;
    line-height: .7rem;
    float: left;
}

.step1-goods {
    background-color: #e8e1fe;
}

/* WebKit browsers (Chrome, Safari, newer versions of Opera) */
::-webkit-scrollbar {
    width: 1px; /* 设置滚动条宽度 */
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 1px; /* 设置滑块的圆角 */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

*::-webkit-scrollbar {
    width: 1px;
}

*::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

*::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 1px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.goods-box:hover {
    overflow-y: auto; /* 或者使用 overflow-y: scroll; */
}

.goods {
    position: relative;
    float: left;
    margin-top: 0.18rem;
    left: 0.7rem;
    width: 3.68rem;
    height: 0.74rem;
    background-color: #9789b8;
    border-radius: 0.07rem;
    border: .05rem solid transparent; /* 初始状态下边框为透明 */
    transition: border-color 0.3s; /* 添加过渡效果 */
    cursor: pointer;
}

.goods_discount {
    color: #866bbc;
    font-size: .14rem;
    line-height: .2rem;
    text-align: center;
    position: absolute;
    z-index: 9;
    top: -0.1rem;
    left: -0.28rem;
    width: 0.45rem;
    height: 0.2rem;
    background-color: #fad27b;
    border-radius: 0.05rem;
}

.goods_discount-sell {
    color: #866bbc;
    font-size: .14rem;
    line-height: .2rem;
    text-align: center;
    position: absolute;
    z-index: 9;
    top: -0.1rem;
    left: -0.28rem;
    width: 0.45rem;
    height: 0.2rem;
    background-color: #bababa;
    border-radius: 0.05rem;
}

.goods-sell {
    position: relative;
    float: left;
    margin-top: 0.18rem;
    left: 0.7rem;
    width: 3.68rem;
    height: 0.74rem;
    background-color: #939393;
    border-radius: 0.07rem;
    border: .05rem solid transparent; /* 初始状态下边框为透明 */
    transition: border-color 0.3s; /* 添加过渡效果 */
    cursor: pointer;
}

.goods-click {
    background-color: #866bbc; /* 设置边框颜色 */
}

.goods:hover {
    background-color: #866bbc; /* 设置边框颜色 */
}

.version {
    position: relative;
    float: left;
    color: #FFF;
    width: 1.3rem;
    height: .74rem;
    text-align: center;
}

.version-desc {
    line-height: .5rem;
    font-size: 0.24rem;
}

.key {
    line-height: 0rem;
    font-size: 0.15rem;
}

.vertical-line {
    position: relative;
    float: left;
    top: 15%;
    width: 0.01rem; /* 设置竖线宽度 */
    height: .5rem; /* 设置竖线高度，这里是整个父元素的高度 */
    background-color: white; /* 设置竖线颜色 */
}

.price {
    text-align: center;
    position: relative;
    float: left;
    width: 2.2rem;
    height: .74rem;
}

.new-price {
    left: .15rem;
    color: #fff;
    font-size: .35rem;
}

.old-price {
    font-size: .23rem;
    color: rgb(0, 0, 0, 0.5);
}

.diagonal-line {
    display: inline-block;
    position: relative;
    left: -10%;
    top: 15%;
    background-color: rgb(0, 0, 0, 0.5);
    width: 0.02rem;
    height: 0.4rem;
    transform: rotate(65deg);
}

.instruction-title {
    position: relative;
    top: .05rem;
    left: .38rem;
    font-size: .16rem;
    color: #555555;
}

.instruction-icon {
    position: relative;
    top: .15rem;
    left: 1rem;
    width: 3.11rem;
    height: .41rem;
    background: url("../images/instruction-icon.png") no-repeat center center;
    background-size: contain;
}

.step2-phone {
    position: relative;
    left: .7rem;
    height: .7rem;
    float: left;
    background-color: #e8e1fe;
}

.custom-select {
    position: relative;
    left: .2rem;
    top: .18rem;
    width: .76rem;
    height: .35rem;
    line-height: .35rem;
    text-align: center;
    color: #866bbc;
    font-size: .18rem;
    float: left;
    background-color: #d9cdff;
    border-radius: 0.07rem;
    border: 1px solid transparent; /* 初始状态下边框为透明 */
    transition: border-color 0.3s; /* 添加过渡效果 */
    box-shadow: none;
}

.custom-select-list {
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
    width: .76rem; /* 设置下拉框宽度 */
    position: absolute;
    display: none;
    z-index: 1;
    background-color: #d9cdff;
    border-radius: 0.07rem;
    border: 0.01rem solid transparent; /* 初始状态下边框为透明 */
    transition: border-color 0.3s; /* 添加过渡效果 */
    box-shadow: none;
}

.custom-select-list li {
    padding: .08rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.custom-select-list li:hover {
    background-color: #e8e1fe;
}

.phone-input {
    text-align: center;
    position: relative;
    left: .3rem;
    top: .18rem;
    width: 2.5rem;
    height: .35rem;
    float: left;
    background-color: #d9cdff;
    border-radius: 0.07rem;
    padding: 0.1rem; /* 根据需要调整 */
    font-size: .18rem;
    border: 1px solid transparent; /* 初始状态下边框为透明 */
    transition: border-color 0.3s; /* 添加过渡效果 */
    outline: none; /* 去掉默认的蓝色轮廓 */
    box-shadow: none;
}

.captcha-input {
    text-align: center;
    position: relative;
    left: .95rem;
    top: .18rem;
    width: 1.85rem;
    height: .35rem;
    float: left;
    background-color: #d9cdff;
    border-radius: 0.07rem;
    padding: 0.1rem; /* 根据需要调整 */
    font-size: .18rem;
    border: 1px solid transparent; /* 初始状态下边框为透明 */
    transition: border-color 0.3s; /* 添加过渡效果 */
    outline: none; /* 去掉默认的蓝色轮廓 */
    box-shadow: none;
}

/* 设置鼠标悬停状态的样式 */
.phone-input:hover {
    border-color: #6747ff; /* 设置边框颜色 */
    outline: none; /* 去掉默认的蓝色轮廓 */
    box-shadow: none;
}

.phone-input:focus {
    border-color: #6747ff; /* 设置边框颜色 */
    outline: none; /* 去掉默认的蓝色轮廓 */
    box-shadow: none;
}

.captcha-input:focus {
    border-color: #6747ff; /* 设置边框颜色 */
    outline: none; /* 去掉默认的蓝色轮廓 */
    box-shadow: none;
}

.captcha-input:hover {
    border-color: #6747ff; /* 设置边框颜色 */
    outline: none; /* 去掉默认的蓝色轮廓 */
    box-shadow: none;
}

.phone-confirm {
    position: relative;
    left: 0.4rem;
    top: .18rem;
    width: 1.3rem;
    height: .35rem;
    float: left;
    color: #fff;
    line-height: .35rem;
    font-size: .16rem;
    text-align: center;
    background-color: #866bbc;
    border-radius: 0.05rem; /* 设置圆角 */
    border: 1px solid transparent; /* 初始状态下边框为透明 */
    transition: border-color 0.3s; /* 添加过渡效果 */
    cursor: pointer; /* 设置光标样式为手型 */
}

.captcha-confirm {
    position: relative;
    left: 1.05rem;
    top: .18rem;
    width: 1.1rem;
    height: .35rem;
    float: left;
    color: #fff;
    font-size: .18rem;
    text-align: center;
    background-color: #9789b8;
    border-radius: 0.05rem; /* 设置圆角 */
    border: 1px solid transparent; /* 初始状态下边框为透明 */
    transition: border-color 0.3s; /* 添加过渡效果 */
    cursor: pointer; /* 设置光标样式为手型 */
    line-height: 0.35rem;
}

.phone-confirm:hover {
    background-color: #866bbc; /* 设置边框颜色 */
}

.captcha-confirm:hover {
    background-color: #866bbc; /* 设置边框颜色 */
}

.phone-confirm-font {
    width: .9rem;
    height: .35rem;
}

.phone-desc {
    top: 0.14rem;
    position: relative;
    width: 2rem;
    left: 1.25rem;
    font-size: .13rem;
    float: left;
}

.type1, .type2, .type3 {
    width: 1.6rem;
    height: .76rem;
    text-align: center;
    font-size: .16rem;
    color: #555;
    cursor: pointer; /* 设置光标样式为手型 */
}

.type1 {
    transition: background-color 0.3s;
    line-height: 0.75rem;
}

.type2 {
    transition: background-color 0.3s;
    line-height: 0.75rem;
}

.type3 {
    transition: background-color 0.3s;
    line-height: 0.68rem;
    border-bottom: .1rem #00e4ff;
}

.type-click {
    background-color: #d9cdff; /* 获取焦点或处于活动状态时的背景颜色 */
    border-bottom: .01rem solid #b2a1e9;
}

.type1:hover,
.type2:hover,
.type3:hover {
    background-color: #d9cdff; /* 获取焦点或处于活动状态时的背景颜色 */
    border-bottom: .01rem solid #b2a1e9;
}

.type1-bg {
    position: relative;
    top: 30%;
    left: 24%;
    float: left;
    width: .31rem;
    height: .30rem;
    background: url("../images/type1-bg.png") no-repeat center center;
    background-size: cover;
    margin-right: 0.3rem;
}

.type2-bg {
    position: relative;
    top: 30%;
    left: 24%;
    float: left;
    width: .33rem;
    height: .27rem;
    background: url("../images/type2-bg.png") no-repeat center center;
    background-size: cover;
    margin-right: 0.1rem;
}

.type3-bg {
    position: relative;
    top: 30%;
    left: 24%;
    float: left;
    width: .28rem;
    height: .21rem;
    background: url("../images/type3-bg.png") no-repeat center center;
    background-size: cover;
    margin-right: 0.3rem;
}

.pay-type {
    position: relative;
    float: left;
    width: 1.6rem
}

.QRCode {
    position: relative;
    top: 9%;
    left: 3%;
    float: left;
    width: 1.8rem;
    height: 1.8rem;
    background-color: #d9cdff; /* 获取焦点或处于活动状态时的背景颜色 */
}

.qrcode-mask-div {
    position: absolute;
    z-index: 99;
    background-color: #d9cdff;
    width: 1.8rem;
    height: 1.8rem;
    opacity: .8;
    font-size: .16rem;
    color: #0f0f0f;
}

.qrcode-mask {
    position: absolute;
    z-index: 99;
    width: 1.8rem;
    height: 1.8rem;
    text-align: center;
}

.qrcode-mask-bg {
    position: relative;
    cursor: pointer; /* 设置光标样式为手型 */
    z-index: 999;
    left: 0.75rem;
    top: 0.7rem;
    width: 0.37rem;
    height: 0.34rem;
    background-size: cover;
}

.qrcode-mask-font {
    position: relative;
    font-weight: bold;
    color: #0e0e0e;
    font-size: .18rem;
    display: none;
    cursor: pointer; /* 设置光标样式为手型 */
    z-index: 999;
    left: 0.6rem;
    top: 0.7rem;
    width: 1rem;
    height: 0.34rem;
}

#qrcode-image {
    position: relative;
    left: .15rem;
    top: .1rem;
    width: 1.5rem;
    height: 1.5rem;
}

.qrcode-desc {
    position: relative;
    letter-spacing: .01rem;
    text-align: center;
    top: 0.1rem;
    width: 1.8rem;
    font-size: .13rem;
}

.step3-new-price {
    line-height: .4rem;
    text-align: right;
    position: relative;
    top: 0.3rem;
    float: left;
    left: 0.25rem;
    font-size: .18rem;
    width: 2.7rem;
    height: 0.8rem;
}

.price-span {
    letter-spacing: -0.025rem;
    margin-left: -0.1rem;
    font-size: .46rem;
    color: #866bbc;
}

.step3-old-price {
    margin-left: 0.1rem;
    font-size: .18rem;
    width: 1.5rem;
    height: .8rem;
    color: #c5bed9;
    text-decoration: line-through
}

.old-price-span {
    margin-left: -0.1rem;
}

.preference {
    visibility: hidden;
    position: absolute;
    top: 1.2rem;
    left: .25rem;
    width: 2.7rem;
    height: .36rem;
    float: left;
    font-size: .13rem;
    line-height: .35rem;
    color: #866bbc;
    background-color: #d9cdff;
    border-radius: 0.1rem; /* 设置圆角 */
}

.preference-ali {
    position: absolute;
    top: 0.95rem;
    left: 0.5rem;
    width: 2.53rem;
    height: 0.28rem;
    float: left;
    font-size: .13rem;
    line-height: .28rem;
    color: #866bbc;
    border: 1px solid #d9cdff;
    transition: border-color 0.3s;
    border-radius: 0.05rem;
}

.preference-one {
    float: left;
    display: block;
    width: 1.2rem;
    position: relative;
    left: 0.2rem;
}

.preference-other {
    float: left;
    display: block;
    width: 1.2rem;
    position: relative;
    left: .2rem;
}

#countdown {
    position: absolute;
    right: 0;
}

#countdown .red {
    color: red;
}

.click-to-pay {
    cursor: pointer;
    z-index: 999;
    position: relative;
    display: none;
    left: 0rem;
    top: 57.5%;
    width: 3.5rem;
    height: .5rem;
    background-color: #866bbc;
    border-radius: 0.1rem; /* 设置圆角 */
}

.click-to-pay-text {
    font-size: .22rem;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.agreement {
    position: absolute;
    left: 0.25rem;
    top: 1.6rem;
    height: 0.3rem;
    width: 2.7rem;
    font-size: .13rem;
    letter-spacing: 0.02rem;
}

#agreement-a {
    position: relative;
    left: .04rem;
    color: #866bbc;
}

.step3-online {
    position: relative;
    width: 3.56rem;
    height: .9rem;
    float: left;
}

.online-icon {
    position: relative;
    top: 30%;
    left: 28%;
    float: left;
    width: .36rem;
    height: .35rem;
    background: url("../images/online-icon.png") no-repeat center center;
    background-size: cover;
}

.online-content {
    position: relative;
    top: 27%;
    left: 31%;
    float: left;
    height: .45rem;
    width: 1.1rem;
    line-height: .21rem;
    font-size: .16rem;
    color: #555;
}

.step3-contact {
    position: relative;
    top: -1.5%;
    left: 8%;
    width: 3rem;
    height: .36rem;
    float: left;
    font-size: .16rem;
    line-height: .32rem;
    color: #866bbc !important;
    background-color: #d9cdff;
    border-radius: 0.1rem; /* 设置圆角 */
    text-align: center;
    border: 1px solid transparent; /* 初始状态下边框为透明 */
    transition: border-color 0.3s; /* 添加过渡效果 */
    cursor: pointer; /* 设置光标样式为手型 */
}

.step3-contact:hover {
    border-color: #866bbc; /* 设置边框颜色 */
}

.step3-question {
    position: relative;
    top: 10%;
    left: 8%;
    width: 3rem;
    height: .36rem;
    float: left;
    font-size: .16rem;
    line-height: .33rem;
    color: #866bbc;
    background-color: #d9cdff;
    border-radius: 0.1rem; /* 设置圆角 */
    text-align: center;
    border: 1px solid transparent; /* 初始状态下边框为透明 */
    transition: border-color 0.3s; /* 添加过渡效果 */
    cursor: pointer; /* 设置光标样式为手型 */
}

.question-content {
    position: relative;
    left: 30%;
    width: .9rem;
    height: .36rem;
    float: left;
}

.step3-question:hover {
    border-color: #866bbc; /* 设置边框颜色 */
}

.question-icon {
    position: relative;
    top: 20%;
    left: 28%;
    float: left;
    width: .21rem;
    height: .21rem;
    background: url("../images/question-icon.png") no-repeat center center;
    background-size: cover;
}

.phone-dialog, .common-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    width: 7.2rem;
    height: 3.3rem;
    display: none;
}

.phone-dialog-close, .common-dialog-close {
    position: absolute;
    z-index: 999;
    right: 0;
    top: 0.28rem;
    width: .35rem;
    height: .35rem;
    cursor: pointer;
    display: block;
    background: url("../images/cdkey-close.png") no-repeat center center;
    background-size: cover;
}

.question-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    width: 7.2rem;
    height: 8.2rem;
    display: none;
}

.question-dialog-close {
    position: absolute;
    z-index: 999;
    right: 0;
    top: 0.28rem;
    width: .35rem;
    height: .35rem;
    cursor: pointer;
    display: block;
    background: url("../images/cdkey-close.png") no-repeat center center;
    background-size: cover;
}

.phone-info {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    width: 6.35rem;
    height: 2.8rem;
    display: block;
    background: url("../images/phone-dialog.png") no-repeat center center;
    background-size: cover;
}

.common-info {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    width: 6.35rem;
    height: 2.8rem;
    display: block;
    background: url("../images/phone-dialog.png") no-repeat center center;
    background-size: cover;
}

.phone-info-title {
    position: relative;
    top: 0.4rem;
    left: 1.2rem;
    width: 4.2rem;
    font-size: .2rem;
    color: #866bbc;
}

.phone-info-phone {
    font-weight: 550;
    position: relative;
    top: 0.4rem;
    left: 1.8rem;
    width: 2.2rem;
    font-size: .38rem;
    color: #866bbc;
}

.common-info-title {
    font-weight: 550;
    position: relative;
    top: 0.35rem;
    text-align: center;
    font-size: .3rem;
    color: #866bbc;
}

.common-info-content {
    height: 0.4rem;
    position: relative;
    top: 0.5rem;
    text-align: center;
    font-size: .22rem;
    color: #866bbc;
}

#common-info-copy {
    position: absolute;
    display: inline-block;
    right: 0.95rem;
    cursor: pointer;
}

#common-info-copy::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: .02rem; /* 下划线与文字的距离 */
    width: 100%;
    height: .01rem; /* 下划线的高度 */
    background-color: #866bbc; /* 下划线的颜色 */
}

.common-info-desc {
    height: .4rem;
    position: relative;
    top: 0.5rem;
    text-align: center;
    font-size: .16rem;
    color: #9c91b1;
}

.phone-info-btn1 {
    position: relative;
    left: 1.6rem;
    top: 0.78rem;
    width: 1.3rem;
    height: 0.4rem;
    float: left;
    color: #fff;
    font-size: .16rem;
    line-height: .4rem;
    text-align: center;
    background-color: #977bc9;
    border-radius: 0.1rem;
    border: 1px solid transparent;
    transition: border-color 0.3s;
    cursor: pointer;
}

.common-info-btn1 {
    position: relative;
    left: 39.5%;
    top: 0.65rem;
    width: 1.3rem;
    height: 0.4rem;
    color: #fff;
    font-size: .16rem;
    line-height: .4rem;
    text-align: center;
    background-color: #977bc9;
    border-radius: 0.1rem;
    border: 1px solid transparent;
    transition: border-color 0.3s;
    cursor: pointer;
}

.phone-info-btn2, .common-info-btn2 {
    position: relative;
    left: 2.15rem;
    top: .78rem;
    width: 1.3rem;
    height: 0.4rem;
    float: left;
    color: #878585;
    font-size: .16rem;
    line-height: .4rem;
    text-align: center;
    border-radius: 0.1rem;
    border: 1px solid #bbbbbb;
    transition: border-color 0.3s;
    cursor: pointer;
}

.question-info {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    width: 6.36rem;
    height: 7.67rem;
    background: url("../images/question-dialog.png") no-repeat center center;
    background-size: cover;
}

.question-list {
    overflow-y: auto;
    position: relative;
    top: 17%;
    left: 7%;
    z-index: 999;
    width: 5.36rem;
    height: 6.3rem;
}

.question-info-title {
    font-size: .21rem;
}

.question-info-content {
    margin-left: 0.4rem;
    width: 4.8rem;
    font-size: .16rem;
}

.container-header {
    width: 100%;
    height: 9.22rem;
    background: url("../images/container-header-bg.jpg") no-repeat center center;
    background-size: cover;
}

.container-header .download-btn {
    float: left;
    width: 3.03rem;
    height: 1.18rem;
    background: url("../images/steam-download-btn.png") no-repeat;
    background-size: cover;
    display: block;
    left: 34%;
    position: relative;
    top: 87%;
}

.container-header .download-btn:hover {
    background: url("../images/steam-download-btn-hover.png") no-repeat;
    background-size: cover;
}

.container-header .buy-discount-btn {
    position: relative;
    z-index: 9;
    width: 2.77rem;
    height: .91rem;
    background: url("../images/key-buy-discount-btn.png") no-repeat;
    background-size: cover;
    cursor: pointer;
    float: left;
    display: block;
    margin: 0 auto;
    left: 20.65%;
    top: 88.8%;
}

#displayText {
    width: 0.7rem;
    position: absolute;
    font-weight: bold;
    font-size: .2rem;
    right: 0.01rem;
    line-height: .28rem;
}

.container-header .buy-btn {
    cursor: pointer;
    float: left;
    width: 3rem;
    height: 1.11rem;
    background: url("../images/key-buy-btn.png") no-repeat;
    background-size: cover;
    display: block;
    margin: 0 auto;
    position: relative;
    left: 36%;
    top: 87%;
}

.container-header .buy-btn:hover {
    background: url("../images/key-buy-btn-hover.png") no-repeat;
    background-size: cover;
}

.container-news {
    width: 100%;
    height: 9.53rem;
    background: url("../images/container-news-bg.jpg") no-repeat center center;
    background-size: cover;
}

.nav-box.swiper-pagination {
    background: url("../images/nav-bg.png") no-repeat;
    background-size: cover;
    float: right;
    width: 8.45rem;
    height: .64rem;
    position: fixed;
    right: 0;
    top: 0;
}

.swiper-pagination .swiper-pagination-bullet {
    border-radius: 0;
    height: 100%;
    line-height: .56rem;
    background: none;
    float: left;
}

.nav-box.swiper-pagination .swiper-pagination-bullet {
    margin: 0;
    font-size: .18rem;
    cursor: pointer;
}

.nav-box.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .nav-title {
    font-size: .18rem;
    color: #ffd583;
}

.nav-box.swiper-pagination .swiper-pagination-bullet .nav-title {
    font-size: .18rem;
    color: #fff;
}

.swiper-pagination .swiper-pagination-bullet.nav-item.nav-item-0 {
    width: 11.5%;
    margin-left: 8%;
    opacity: 1;
    cursor: pointer;
}

.swiper-pagination .swiper-pagination-bullet.nav-item.nav-item-2 {
    width: 12.5%;
    margin-left: 0;
    opacity: 1;
    cursor: pointer;
}

.swiper-pagination .swiper-pagination-bullet.nav-item.nav-item-1 {
    width: 17%;
}

.swiper-pagination .swiper-pagination-bullet.nav-item.nav-item-3 {
    width: 16.5%;
}

.swiper-pagination .swiper-pagination-bullet.nav-item.nav-item-4 {
    width: 17%;
}

.swiper-pagination .swiper-pagination-bullet.nav-item.nav-item-5 {
    width: 16%;
}

.swiper-pagination .swiper-pagination-bullet {
    opacity: 1;
}

.news-content-title {
    width: 100%;
    height: 1.20rem;
}

.news-content-title-position {
    position: relative;
    height: .60rem;
    top: .57rem;
}

.container-video-position {
    width: 100%;
    height: 1.20rem;
    position: relative;
    top: 8.60rem;
}

.container-hb-position {
    width: 100%;
    height: .30rem;
    position: relative;
    top: .30rem;
}

.news-content-box {
    width: 15.42rem;
    height: 5.79rem;
    background: url("../images/news-content-bg.png") no-repeat;
    background-size: cover;
    position: relative;
    margin: 0 auto;
}

.news-box {
    width: 7.40rem;
    position: relative;
    top: .62rem;
    left: .37rem;
    float: left;
}

.container-game-introduce {
    width: 100%;
    height: 15.87rem;
    background: url("../images/game-introduce-bg.jpg") no-repeat top center;
    background-size: cover;
}

.container-video {
    width: 100%;
    height: 18.42rem;
    background: url("../images/video-bg.jpg") no-repeat top center;
    background-size: cover;
}

.container-bottom {
    width: 100%;
    height: 20.10rem;
    background: url("../images/bottom-bg.jpg") no-repeat top center;
    background-size: cover;
    position: relative;
}

.swiper-news-pagination {
    width: 6.40rem;
    position: relative;
    top: .18rem;
    left: 1.38rem;
    text-align: center;
}

.swiper-news-pagination > .swiper-pagination-bullet {
    width: .30rem;
    height: .62rem;
    background: url("../images/news-pagination-bg.png") no-repeat center;
    background-size: .18rem .15rem;
    opacity: 1;
}

.swiper-news-pagination > .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: url("../images/news-pagination-selected-bg.png") no-repeat center;
    background-size: .18rem .15rem;
}

.news-box-text {
    width: 6.20rem;
    height: 4.13rem;
    float: right;
    position: relative;
    top: 1.36rem;
    right: .52rem;
    background-size: .54rem .64rem;
    background: url("../images/news-star.png") no-repeat 0 .23rem;
}

.news-item {
    height: .60rem;
    line-height: .60rem;
    border-bottom: .01rem solid #e3a8ba;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.6s ease;
}

.news-item .read-more {
    position: relative;
    float: left;
    background: url("../images/news-more-hover.png") no-repeat center left;
    background-size: .87rem .23rem;
    width: 0;
    height: 100%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    margin-right: 0;
}

.news-item:hover .news-item-title {
    width: 4.1rem;
}

.news-item:hover .read-more {
    width: .9rem;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.news-item-category {
    font-size: .16rem;
    color: #ffd583;
    padding: 0 .10rem;
    letter-spacing: .02rem;
    transition: all 0.6s ease;
}

.news-item-category.hover {
    text-indent: .90rem;
}

.news-item-title {
    color: #d17493;
    font-size: .16rem;
    letter-spacing: .02rem;
    max-width: 4.95rem;
    overflow: hidden;
    transition: all 0.6s ease;
}

.news-item-title.hover {
    width: 4.10rem;
}

.news-item-date {
    font-size: .16rem;
    color: #d17493;
    transition: all 0.6s ease;
}

.top-news-title {
    text-align: center;
    background: url("../images/top-news-bg.png") no-repeat bottom center;
    background-size: 3.72rem .17rem;
    height: .60rem;
}

.top-news-title > a {
    font-size: .28rem;
    color: #d17493;
    font-style: italic;
}

.news-more-btn {
    width: .87rem;
    height: .23rem;
    background: url("../images/news-more-btn.png") no-repeat;
    background-size: cover;
    position: relative;
    float: right;
    top: .2rem;
    right: -.2rem;
    display: block;
}

.banner-box {
    position: relative;
    top: 2.1rem;
    display: block;
}

.top-banner {
    width: 100%;
    height: 3.55rem;
    background: url("../images/inner-banner.png") no-repeat top center;
    background-size: cover;
}

/** 新闻中心 start **/

.inner-container {
    width: 100%;
    height: auto;
    min-height: 10.80rem;
    background: #ffeff2 url("../images/inner-bg.jpg") no-repeat;
    background-size: 19.20rem 45.76rem;
    margin: 0 auto;
    padding-bottom: .50rem;
}

.inner-nav-box {
    background: url("../images/inner-title.png") no-repeat center center;
    background-size: 8.05rem .57rem;
    height: 1.96rem;
}

.inner-nav {
    width: 5.06rem;
    color: #d0556d;
    margin: 0 auto;
    text-align: center;
    padding-top: .90rem;
}

.inner-nav.news-inner-nav {
    width: 4.93rem;
}

.inner-nav.news-inner-nav li.inner-nav-item, .inner-nav.news-inner-nav li.inner-nav-item > a, .inner-nav.news-inner-nav li.inner-nav-item.active > a.info-title {
    width: .60rem;
}

.inner-nav.news-inner-nav li.inner-nav-item, .inner-nav li.inner-nav-item > a, .inner-nav li.inner-nav-item.active > a.info-title {
    width: .60rem;
}

.inner-nav.info-inner-nav {
    width: 6.20rem;
}

.inner-nav li.inner-nav-item, .inner-nav li.inner-nav-item > a {
    float: left;
    width: .65rem;
    text-align: center;
    height: 87%;
    cursor: pointer;
    color: #f4a1ae;
    font-size: .30rem;
    display: inline-block;
}

.inner-nav li.inner-nav-item.active > a {
    color: #d0556d;
    border-bottom: .01rem solid #d36076;
}

.inner-nav li.inner-nav-item.active {
    border-bottom: .01rem solid #d36076;
    padding-bottom: .03rem;
    color: #d0556d;
}

.inner-nav li.nav-star {
    float: left;
    text-align: center;
    display: inline-block;
    padding: .2rem .3rem;
}

.nav-star > img {
    width: .18rem;
    height: .18rem;
}

.inner-content {
    width: 12rem;
    margin: 0 auto 1rem;
}

.content-item {
    height: 1.44rem;
    width: 12rem;
    position: relative;
    cursor: pointer;
}

.content-item:hover {
    background: url("../images/news-item-bg.png") no-repeat;
    background-size: cover;
}

.item-desc {
    font-size: .20rem;
    color: #d17493;
    line-height: .27rem;
    padding: 0 .05rem;
    letter-spacing: 0.01rem;
    height: .55rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-category {
    display: inline-block;
    width: 1.72rem;
    text-align: center;
}

.item-date {
    color: #d17493;
    font-weight: 500;
    text-align: center;
    width: .80rem;
    display: inline-block;
    font-size: .24rem;
}

.item-title, .item-title:visited {
    color: #d17493;
    font-weight: 500;
    font-size: .24rem;
}

.item-title:hover {
    color: #ff7290;
}

.item-category > span {
    border: .01rem solid #d17493;
    color: #d17493;
    padding: 0 .17rem;
    border-radius: .13rem;
    font-size: .22rem;
}

.news-item-top {
    height: .50rem;
    line-height: .50rem;
    position: relative;
    top: .12rem;
}

.article-title {
    color: #d17493;
    font-weight: 500;
    text-align: center;
    font-size: .46rem;
    margin-top: .63rem;
    line-height: .62rem;
}

.item-main {
    width: 10.20rem;
}

.article-date {
    color: #d17493;
    text-align: center;
    font-size: .25rem;
}

.article-content {
    color: #d17493;
    font-size: .19rem;
    margin-top: .55rem;
}

/** 新闻中心 end **/

/** 文章详情 start **/

.inner-main {
    width: 12rem;
    margin: 0 auto;
}

.title-left {
    color: #d17493;
    float: left;
}

.title-left:hover, .title-left:visited {
    color: #d17493;
}

.title-right {
    color: #d17493;
    float: right;
}

.title-right > a {
    color: #d17493;
}

.detail-header {
    height: .76rem;
    line-height: .50rem;
    margin: 0 auto;
    border-bottom: .01rem solid #d17493;
    font-size: .22rem;
    padding-top: .18rem;
}

.header-line {
    width: 100%;
    height: 0.05rem;
    margin: 0 auto;
    border-bottom: .01rem solid #d17493;
}

.inner-nav li.inner-nav-item, .inner-nav li.inner-nav-item > a, .inner-nav li.inner-nav-item.active > a.info-title {
    width: 1.50rem;
}

.info-item {
    width: 33%;
    padding: .1rem;
    cursor: pointer;
}

.info-item > video {
    cursor: pointer;
}

/** 文章详情 end **/

.achieve-box {
    width: 12.48rem;
    height: 2.67rem;
    margin: 0 auto;
    position: relative;
    top: 8.25rem;
    left: 0.16rem;
    background: url("../images/achieve-bg.png") no-repeat;
    background-size: 12.13rem 1.9rem;
}

.dlc-achieve-box {
    width: 12.48rem;
    height: 1.4rem;
    position: relative;
    top: 8.65rem;
    left: 0.16rem;
    margin: 0 auto;
    background: url("../images/dlc-achieve-bg.png") no-repeat;
    background-size: 12.13rem 1.21rem;
}

.role-swiper-container {
    width: 100%;
    height: 10.80rem;
    position: relative;
    top: 9rem;
}

.role-swiper-pagination {
    width: 3.9rem;
    height: 11.4rem;
    float: right;
    margin-right: 0.47rem;
    top: -1rem;
}

.role-swiper-pagination .swiper-slide.swiper-slide-thumb-active > img {
    width: 1.8rem;
    height: 1.8rem;
    cursor: pointer;
    position: relative;
    top: 0;
}

.role-swiper-pagination .swiper-slide:nth-child(1) > img {
    top: .3rem;
}

.role-swiper-pagination .swiper-slide:nth-child(2) > img {
    left: 1.5rem;
    top: .33rem;
}

.role-swiper-pagination .swiper-slide:nth-child(3) > img {
    top: .4rem;
    left: 2.1rem;
}

.role-swiper-pagination .swiper-slide:nth-child(4) > img {
    top: .5rem;
    left: 1.98rem;
}

.role-swiper-pagination .swiper-slide:nth-child(5) > img {
    top: .48rem;
    left: 1.3rem;
}

.role-swiper-pagination .swiper-slide:nth-child(6) > img {
    left: 0.16rem;
    top: .1rem;
}

.role-swiper-pagination .swiper-slide > img {
    width: 1.40rem;
    height: 1.40rem;
    display: inline-block;
    cursor: pointer;
    position: relative;
}

.role-swiper-pagination .swiper-slide {
    height: 1.40rem;
}

.role-bullet-item.role-bullet-active-item > .role-page-image {
    width: 1.6rem;
    height: 1.6rem;
    position: absolute;
    left: .1rem;
    top: .1rem;
}

.role-bullet-item {
    width: 1.8rem;
    height: 1.8rem;
    position: relative;
}

.role-bullet-item > .role-page-image {
    width: 1.4rem;
    height: 1.4rem;
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
}

.role-bullet-item:nth-child(1) {
    top: 0.55rem;
}

.role-bullet-item:nth-child(2) {
    top: -0.2rem;
    left: 1.32rem;
}

.role-bullet-item:nth-child(3) {
    top: -0.55rem;
    left: 1.9rem;
}

.role-bullet-item:nth-child(4) {
    top: -0.75rem;
    left: 1.86rem;
}

.role-bullet-item:nth-child(5) {
    top: -1.1rem;
    left: 1.2rem;
}

.role-bullet-item:nth-child(6) {
    top: -1.65rem;
    left: 0.15rem;
}

.game-video-box {
    display: none;
}

.game-video-box, .hx-video-box {
    margin-top: .40rem;
}

.container-video {
    position: relative;
}

.video-content {
    position: relative;
    width: 14.80rem;
    height: 100%;
    top: 9.30rem;
    margin: 0 auto;
    text-align: center;
}

.video-nav {
    width: 3.8rem;
    display: inline-block;
    height: .40rem;
    line-height: .29rem;
    color: #cf516a;
    font-size: .16rem;
    font-weight: bold;
    margin-top: .1rem;
}

.video-nav li {
    margin: 0 auto;
    border: .01rem solid #cf516a;
    border-radius: .22rem;
    width: 1.51rem;
    height: .30rem;
    cursor: pointer;
    font-size: .16rem;
}

.video-nav li > a {
    display: block;
    width: 100%;
    height: 100%;
    color: #be2f4d;
}

.video-nav li:hover {
    background: url("../images/video-nav-selected-bg.png") no-repeat;
    background-size: cover;
    border: none;
    text-indent: .10rem;
}

.hx-video-slide, .game-video-slide {
    width: 11.90rem;
    float: left;
}

.hx-video-swiper-pagination, .game-video-swiper-pagination {
    height: 6.70rem;
    width: 2.5rem;
}

.hx-video-swiper-pagination .swiper-slide, .game-video-swiper-pagination .swiper-slide {
    width: 2.06rem;
    cursor: pointer;
}

.page-img-box {
    padding: .05rem;
}

.hx-video-swiper-pagination .swiper-slide.swiper-slide-thumb-active > .page-img-box, .game-video-swiper-pagination .swiper-slide.swiper-slide-thumb-active > .page-img-box {
    border: .01rem solid #cf516a;
}

.achieve-ul {
    text-align: center;
}

.achieve-item, .dlc-achieve-item {
    width: .68rem;
    height: .53rem;
    float: left;
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-bottom: 0.15rem;
}

.achieve-item:nth-child(18), .achieve-item:nth-child(36) {
    margin-right: 0;
}

.achieve-item.achieve-item-double .achieve-tips {
    padding-top: .1rem;
}

.dlc-achieve-item.achieve-item-double .achieve-tips {
    padding-top: .1rem;
}

.achieve-tips {
    width: 1.44rem;
    height: .81rem;
    background: url("../images/achieve-tips.png") no-repeat;
    background-size: cover;
    position: absolute;
    display: none;
    top: -.8rem;
    left: .02rem;
    font-size: .13rem;
    color: #67580f;
    font-weight: bold;
    padding-top: .20rem;
    text-align: center;
}

.dlc-achieve-item .achieve-tips {
    width: 1.44rem;
    height: .81rem;
    background: url("../images/dlc-achieve-tips.png") no-repeat;
    background-size: cover;
    position: absolute;
    display: none;
    top: -.8rem;
    left: .02rem;
    font-size: .13rem;
    color: #67580f;
    font-weight: bold;
    padding-top: .20rem;
    text-align: center;
}

.achieve-tips.achieve-tips-last {
    top: -.90rem;
}

.video-play-btn {
    width: 1.36rem;
    height: 1.36rem;
    background: url("../images/video-play-btn.png") no-repeat;
    background-size: cover;
    position: absolute;
    top: 18%;
    left: 36%;
    z-index: 999;
    cursor: pointer;
}

.container-bottom-content {
    width: 15rem;
    margin: 0 auto;
    padding-top: 1.80rem;
}

.hb-more-btn {
    width: 1.49rem;
    height: .44rem;
    background: url("../images/hb-more-btn.png") no-repeat;
    background-size: cover;
    display: inline-block;
    position: relative;
    margin-bottom: .10rem;
    float: right;
}

.hb-left-ul {
    width: 100%;
}

.width-350 {
    width: 3.625rem;
}

.hb-left-ul li {
    width: 3.625rem;
    height: 2.11rem;
    margin-bottom: .10rem;
    margin-right: .1rem;
}

.hb-left-ul li:last-child {
    margin-right: 0;
}

.hb-right-ul li {
    width: 1.7625rem;
    height: 4.32rem;
    margin-bottom: .10rem;
}

.hb-right-ul {
    margin: 0 0.1rem;
}

.hb-right-ul:last-child {
    margin-right: 0;
}

.hb-left-ul li > div, .hb-right-ul li > div {
    width: 100%;
    height: 100%;
}

.hb-left-ul li > img {
    width: 3.38rem;
    cursor: pointer;
}

.hb-right-ul li > img {
    cursor: pointer;
}

.hb-left-ul li:hover, .hb-right-ul li:hover {
    border: .03rem solid #d55f76
}

.hb-right-ul li:nth-child(2) {
    margin-left: .08rem;
}

.sys-container-content {
    margin: 2.20rem auto 0;
    width: 12rem;
    text-align: center;
}

.sys-container-content .sys-tab-box > li {
    width: 33.3%;
    float: left;
}

.sys-tab-box {
    width: 8rem;
    height: .8rem;
    margin: 0 auto;
}

.sys-tab-item {
    width: 1.51rem;
    height: .31rem;
    display: inline-block;
    font-size: .16rem;
    color: #d17493;
    cursor: pointer;
}

.sys-tab-item.active {
    border: 0.01rem solid #d17493;
    border-radius: .16rem;
}

.sys-tab-content {
    display: none;
}

.sys-tab-content li {
    width: 50%;
    padding: 0 8%;
    float: left;
    text-align: left;
    font-size: .14rem;
    color: #d17493;
}

.sys-tab-contents {
    width: 9.20rem;
    margin: 0 auto;
}

.qrcode-box {
    width: 9rem;
    height: 1.80rem;
    margin: 1.65rem auto 0;
}

.qrcode-box li {
    width: 20%;
    height: 100%;
    float: left;
}

.qrcode-item > a {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.role-bg {
    position: relative;
}

.role-video {
    position: relative;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.role-desc {
    position: absolute;
    top: 0
}

.big_img {
    position: fixed;
    z-index: -1;
    opacity: 0;
    background: rgba(0, 0, 0, 0.9);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.big_img .big_img_close_btn {
    width: .40rem;
    height: .39rem;
    background: url("../images/close.png") no-repeat;
    background-size: cover;
    position: absolute;
    top: 3%;
    right: 5%;
    z-index: 9999;
    cursor: pointer;
}

.big_img .big-image-swiper-container {
    position: relative;
    width: 100%;
    height: 90%;
    margin-top: 2%;
}

.big_img .big-image-swiper-container .swiper-wrapper {
    width: 100%;
    height: 100%;
}

.big_img .swiper-slide {
    width: 100%;
    height: 100%;
    display: table
}

.big_img .swiper-slide .cell {
    width: 100%;;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.big_img .swiper-slide img {
    max-width: 90%;
    max-height: 80%;
    margin: 0 auto;
}

.big_img .big-image-swiper-pagination {
    position: absolute;
    top: 0.2rem;
    text-align: center;
    width: 100%;
}

.big_img .big-image-swiper-pagination span {
    margin: 0 0.05rem;
}

.inner-hb-ul {
    width: 20%;
    float: left;
}

.mask, .video-mask {
    position: fixed;
    z-index: 200;
    background: rgba(0, 0, 0, .8);
    width: 100%;
    height: 100%;
    top: 0;
    overflow: hidden;
    display: none;
    margin: 0 auto;
    text-align: center;
}

.image-content {
    position: relative;
    width: 80%;
    height: 80%;
    top: 0;
    overflow: auto;
    box-sizing: border-box;
    display: inline-block;
    align-items: center;
    justify-content: center;
    margin-top: 5%;
}

.close-btn {
    display: inline-block;
    width: .4rem;
    height: .39rem;
    background: url(../images/close.png) no-repeat;
    background-size: cover;
    cursor: pointer;
    position: absolute;
    right: 6%;
    top: 6%;
}

.download-image-btn {
    position: absolute;
    width: 1.81rem;
    height: .47rem;
    background: url(../images/download.png) no-repeat;
    background-size: cover;
    cursor: pointer;
    right: 11%;
    top: 12%;
    z-index: 999;
}

.image-box {
    width: 100%;
    height: 100%;
}

.hd-footer {
    width: 100%;
    height: 2.74rem;
    background: url("../../imgs/hd2/footer-bg.png") no-repeat top center;
    background-size: cover;
}

.footer-content {
    width: 8rem;
    margin: 0 auto;
    padding-top: 1.2rem;
}

.footer-content-left {
    float: left;
    width: 35%;
    text-align: right;
}

.footer-content-right {
    float: left;
    font-size: .13rem;
    color: #cfb6d5;
    margin-left: 0.29rem;
    padding-left: 0.29rem;
    border-left: 1px solid #6e5475;
}

.footer-content-beian {
    float: left;
    font-size: .13rem;
    color: #cfb6d5;
    margin-top: 0.1rem;
    padding-left: 0.29rem;
}


.inner-video-content {
    width: 64%;
    height: 90%;
    margin: 5% auto 0;
}

.video-bullet-item.video-page-item {
    float: left;
    height: 1.58rem;
    width: 2.53rem;
    margin-bottom: 0.12rem;
}

.video-bullet-item.video-page-item .page-img-box {
    margin: 0 auto;
    width: 96%;
    height: 94%;
    margin-top: 2%;
}

.video-bullet-item.video-page-item:last-child {
    margin-bottom: 0;
}

.video-bullet-item.video-page-item.video-bullet-active-item {
    border: 0.01rem solid #cf516a;
}

.container-hb {
    width: 14.8rem;
    margin: 0 auto;
}

.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
}