@font-face {
    font-family: 'yh';
    src: url('../fonts/SourceHanSansCN-Medium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'yh-heavy';
    src: url('../fonts/SourceHanSansCN-Heavy.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: 'yh', sans-serif;
}

body {
    padding: 0;
    margin: 0;
    height: 100vh;
    font-family: 'yh', sans-serif;
}

.header {
    position: absolute;
    width: 100%;
    height: 74px;
    top: 0;
    background: url("../images/navHeaderBg.png") no-repeat center;
    background-size: cover;
    unicode-bidi: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999;
}

.header-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    margin-left: 125px;
    width: 119px;
    height: 49px;
}

.nav {
    align-items: center;
    width: 1030px;
    height: 74px;
    display: flex;
    text-align: center;
    margin-left: 28px;
}

.nav a {
    position: relative;
}


.nav-interval {
    width: 8px;
    height: 74px;
    background: url("../images/interval.png") no-repeat center;
}

.nav-index {
    position: relative;
    width: 170px;
    height: 74px;
    background: url("../images/navIndex2.png") no-repeat center;
}

.nav-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    height: 6px;
    background-color: #3461e8;
    transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
}

.nav-tab-active::before {
    left: 0;
    right: 0;
}

.nav-hunter-file {
    width: 170px;
    height: 74px;
    background: url("../images/navHunterFile.png") no-repeat center;
}

.nav-hunter-geography {
    width: 170px;
    height: 74px;
    background: url("../images/navHunterGeography.png") no-repeat center;
}

.nav-game-features {
    width: 170px;
    height: 74px;
    background: url("../images/navGameFeatures.png") no-repeat center;
}

.nav-news {
    width: 170px;
    height: 74px;
    background: url("../images/navHunterNews.png") no-repeat center;
}

.nav-fragments-memories {
    width: 170px;
    height: 74px;
    background: url("../images/navFragmentsMemories.png") no-repeat center;
}

.index-other-platform {
    margin-right: 20px;
    display: flex;
}


.index-other-platform a {
    display: inline-block;
    margin: 9px;
    width: 41px;
    height: 41px;
}

.taptap-platform {
    background: url("../images/tapPlatform2.png") no-repeat center center;
    background-size: contain;
}

.taptap-platform:hover {
    background: url("../images/tapPlatform.png") no-repeat center center;
    background-size: contain;
}

.hykb-platform {
    background: url("../images/hykbPlatform2.png") no-repeat center center;
    background-size: contain;
}

.hykb-platform:hover {
    background: url("../images/hykbPlatform.png") no-repeat center center;
    background-size: contain;

}

.bilibili-platform {
    background: url("../images/bilibiliPlatform2.png") no-repeat center center;
    background-size: contain;
}

.bilibili-platform:hover {
    background: url("../images/bilibiliPlatform.png") no-repeat center center;
    background-size: contain;

}

.douyin-platform {
    background: url("../images/douyinPlatform2.png") no-repeat center center;
    background-size: contain;
}

.douyin-platform:hover {
    background: url("../images/douyinPlatform.png") no-repeat center center;
    background-size: contain;

}

.weixin-platform {
    background: url("../images/weixinPlatform2.png") no-repeat center center;
    background-size: contain;
}

.weixin-platform:hover {
    background: url("../images/weixinPlatform.png") no-repeat center center;
    background-size: contain;
}

.qq-platform {
    background: url("../images/QQPlatform2.png") no-repeat center center;
    background-size: contain;
}

.qq-platform:hover {
    background: url("../images/QQPlatform.png") no-repeat center center;
    background-size: contain;
}

.ks-platform {
    background: url("../images/ksPlatform2.png") no-repeat center center;
    background-size: contain;
}

.ks-platform:hover {
    background: url("../images/ksPlatform.png") no-repeat center center;
    background-size: contain;
}

.taptap-platform2 {
    background: url("../images/tapPlatform4.png") no-repeat center center;
    background-size: contain;
}

.taptap-platform2:hover {
    background: url("../images/tapPlatform3.png") no-repeat center center;
    background-size: contain;
}

.hykb-platform2 {
    background: url("../images/hykbPlatform4.png") no-repeat center center;
    background-size: contain;
}

.hykb-platform2:hover {
    background: url("../images/hykbPlatform3.png") no-repeat center center;
    background-size: contain;

}

.bilibili-platform2 {
    background: url("../images/bilibiliPlatform4.png") no-repeat center center;
    background-size: contain;
}

.bilibili-platform2:hover {
    background: url("../images/bilibiliPlatform3.png") no-repeat center center;
    background-size: contain;

}

.douyin-platform2 {
    background: url("../images/douyinPlatform4.png") no-repeat center center;
    background-size: contain;
}

.douyin-platform2:hover {
    background: url("../images/douyinPlatform3.png") no-repeat center center;
    background-size: contain;

}

.weixin-platform2 {
    background: url("../images/weixinPlatform4.png") no-repeat center center;
    background-size: contain;
}

.weixin-platform2:hover {
    background: url("../images/weixinPlatform3.png") no-repeat center center;
    background-size: contain;
}

.qq-platform2 {
    background: url("../images/QQPlatform4.png") no-repeat center center;
    background-size: contain;
}

.qq-platform2:hover {
    background: url("../images/QQPlatform3.png") no-repeat center center;
    background-size: contain;
}

.ks-platform2 {
    background: url("../images/ksPlatform4.png") no-repeat center center;
    background-size: contain;
}

.ks-platform2:hover {
    background: url("../images/ksPlatform3.png") no-repeat center center;
    background-size: contain;
}


.main {
    height: 100%;
    width: 100%;
    position: relative;
}

.slogan {
    position: absolute;
    left: 49%;
    bottom: 186px;
    transform: translate(-50%, 0);
    width: 1018px;
    height: 231px;
    z-index: 20;
}

.index-btn {
    position: absolute;
    width: 100%;
    height: 57px;
    display: flex;
    align-items: center;
    bottom: 103px;
    flex-direction: row;
    justify-content: center;
    gap: 68px;
}

.index-btn .download {
    display: inline-block;
    width: 238px;
    height: 57px;
    background: url("../images/download.png") no-repeat center center;
}

.index-btn .receive {
    display: inline-block;
    width: 238px;
    height: 57px;
    background: url("../images/receive.png") no-repeat center center;
}

.index-btn .reserve {
    display: inline-block;
    width: 238px;
    height: 57px;
    background: url("../images/reserve.png") no-repeat center center;
}

.index-play-video {
    width: 66px;
    height: 74px;
    left: 50%;
    bottom: 253px;
    position: absolute;
    background-image: url("../images/play.png");
    background-size: contain;
    transform: translate(-50%, 0);
    z-index: 100;
}

.index-play-video:hover {
    transform: translate(-50%, 0) scale(1.2)
}

.pop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 101;
    display: none;
}

.pop .pop-video {
    width: 957px;
    height: 539px;
    border: 2px solid #2997FE;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pop .pop-video video {
    display: block;
    width: 100%;
    height: 100%;
}

.pop .pop-video .pop-video-close {
    top: -2px;
    right: -58px;
    width: 56px;
    height: 56px;
    background: url("../images/videoClose.png") no-repeat 0 0;
    background-size: 100% auto;
    position: absolute;
}

.pop-reserve-box {
    width: 715px;
    height: 584px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../images/reserveBg.png") no-repeat 0 0;
    background-size: contain;
    box-sizing: border-box;
    padding-left: 32px;
}

.pop-reserve-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.pop-reserve-success-content {
    width: 719px;
    height: 662px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../images/reserveSuccessBg.png") no-repeat 0 0;
    background-size: contain;
}

.pop-reserve-success-close {
    top: 0;
    right: -55px;
    width: 56px;
    height: 56px;
    background: url("../images/reserveClose.png") no-repeat 0 0;
    position: absolute;
    background-size: contain;
}

.reserve-back-btn {
    top: 356px;
    width: 240px;
    height: 58px;
    left: 50%;
    transform: translate(-50%, 0);
    position: absolute;
    background: url("../images/reserveSuccessBack.png") no-repeat 0 0;
    background-size: contain;
}

.pop-reserve-close {
    top: 0;
    right: -55px;
    width: 56px;
    height: 56px;
    background: url("../images/reserveClose.png") no-repeat 0 0;
    position: absolute;
    background-size: contain;
}

.pop-receive-activation-code-close {
    top: 0;
    right: -55px;
    width: 56px;
    height: 56px;
    background: url("../images/reserveClose.png") no-repeat 0 0;
    position: absolute;
    background-size: contain;
}

.pop-reserve-title {

}

.reserve-platform {
    width: 100%;
    display: flex;
    justify-content: center;
}

.platform-iOS {
    width: 151px;
    height: 54px;
    background: url("../images/iOSPlatform.jpg") no-repeat center;
    margin-left: 12px;
}

.platform-Android {
    width: 151px;
    height: 54px;
    background: url("../images/androidPlatform.jpg") no-repeat center;
    margin-right: 12px;
}

.platform-Android.selected {
    background: url("../images/androidPlatform2.png") no-repeat center;
}

.platform-iOS.selected {
    background: url("../images/iOSPlatform2.png") no-repeat center;
}

.pop-reserve-form {
    width: 517px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.reserve-form {
    width: 100%;
}

.reserve-form-row {
    position: relative;
    width: 517px;
    height: 54px;
    background: #1d1d1d;
    border: 1px solid #2997FE;
}

.tel-area {
    position: absolute;
    top: 50%;
    left: 17px;
    transform: translate(0, -50%);
    padding-right: 17px;
    height: 24px;
    line-height: 24px;
    border-right: 2px solid #e8e8e8;
    font-size: 24px;
    color: #e8e8e8;
}

.input-tel {
    left: 94px;
    width: 242px;
    height: inherit;
    position: absolute;
    top: 0;
    font-size: 24px;
    color: #ffffff;
    border: none;
    /*background-color: transparent !important;*/
    outline: none;
    padding: 0;
    background-color: rgb(29,29,29);
}

.input-tel:-webkit-autofill {
    box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #000 !important;
    background-color: rgb(29,29,29) !important;
}

.input-tel-code {
    left: 17px;
    width: 242px;
    height: inherit;
    position: absolute;
    top: 0;
    font-size: 24px;
    color: #ffffff;
    border: none;
    background-color: transparent !important;
    outline: none;
    padding: 0;
}

/* 覆盖 Chrome 自动填充样式 - 同时作用于 input-tel 和 input-tel-code */
.input-tel:-webkit-autofill,
.input-tel:-webkit-autofill:hover,
.input-tel:-webkit-autofill:focus,
.input-tel:-webkit-autofill:active,
.input-tel-code:-webkit-autofill,
.input-tel-code:-webkit-autofill:hover,
.input-tel-code:-webkit-autofill:focus,
.input-tel-code:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
    animation-name: resetAutofill !important;
    animation-fill-mode: both !important;
}

@keyframes resetAutofill {
    to {
        -webkit-text-fill-color: #ffffff;
        -webkit-box-shadow: 0 0 0 1000px transparent inset;
    }
}

.get-tel-code {
    position: absolute;
    top: 50%;
    right: 1px;
    transform: translate(0, -50%);
    width: 200px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 24px;
    color: #3affff;
    border-left: 2px solid #e8e8e8;
}

.reserve-protocol {
    width: 100%;
    padding-left: 32px;
    line-height: 28px;
    font-size: 18px;
    color: #e8e8e8;
    box-sizing: border-box;
}

.reserve-protocol a {
    color: #e8e8e8;
    text-decoration: none;
}

.reserve-protocol::before {
    content: "";
    position: absolute;
    left: 0;
    width: 28px;
    height: 28px;
    background: url("../images/checkboxBg.png") no-repeat center center;
    background-size: cover;
}

.reserve-protocol2 {
    width: 100%;
    padding-left: 32px;
    line-height: 28px;
    font-size: 18px;
    color: #e8e8e8;
    box-sizing: border-box;
}

.reserve-protocol2::before {
    content: "";
    position: absolute;
    left: 0;
    width: 28px;
    height: 28px;
    background: url("../images/checkboxBg.png") no-repeat center center;
    background-size: cover;
}

.reserve-commit {
    display: block;
    height: 59px;
    width: 100%;
    background: url("../images/reserveCommit.png") no-repeat center center;
    background-size: contain;
}

.reserve-protocol.active::before {
    background: url("../images/checkboxBg2.png") no-repeat center center;
    background-size: cover;
}

.reserve-protocol2.active::before {
    background: url("../images/checkboxBg2.png") no-repeat center center;
    background-size: cover;
}

.reserve-success-title {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 374px;
    height: 71px;
}

.reserve-success-line {
    position: absolute;
    top: 201px;
    left: 50%;
    transform: translate(-50%, 0);
}

.reserve-success-text {
    position: absolute;
    top: 233px;
    /*left: 50%;*/
    /*transform: translate(-50%, 0);*/
    right: 87px;
    color: #2997FE;
    font-size: 28px;
    width: 509px;
    height: 28px;
    line-height: 28px;
    text-align: center;
}

.reserve-ios-tips {
    position: absolute;
    width: 328px;
    height: 28px;
    top: 287px;
    left: 181px;
}

.reserve-success-text2 {
    position: absolute;
    bottom: 132px;
    left: 50%;
    transform: translate(-50%, 0);
}

.pop-reserve-success-box {
    position: relative;
    width: 100%;
    height: 100%;
}

.reserve-other-platform {
    position: absolute;
    bottom: 30px;
    right: 0;
    width: 689px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.reserve-other-platform a {
    display: inline-block;
    /*margin: 4px;*/
    width: 63px;
    height: 63px;
}


.swiper {
    margin: 0;
    padding: 0;
}

.wrapSwiper {
    height: 100%;
}

.wrapSwiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    display: none;
}

.wrapSwiper > .swiper-wrapper > .swiper-slide {
    opacity: 0 !important;
}

.wrapSwiper > .swiper-wrapper > .swiper-slide-active {
    opacity: 1 !important;
}

.page-slide {
    /*text-align: center;*/
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: blur(0); /* 初始无模糊 */
    transition: filter 0.6s ease; /* 模糊过渡动画 */
}

.page-news {
    position: relative;
}

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

.article-list-head {
    top: 100px;
    width: 80%;
    height: 100px;
    background: url(https://yh.wanmei.com/images/list240808/articleListHead.png) no-repeat left top;

    left: 50%;
    transform: translate(-50%, 0);
    position: absolute;
}

.list-head-content {
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: self-start;
    position: absolute;
}

.article-nav {
    display: flex;
}

.article-nav a {
    width: 136px;
    height: 35px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
}

.back-index {
    width: 136px;
    height: 26px;
    background: url(https://yh.wanmei.com/images/list240808/backIndex.png) no-repeat 0 0;
    background-size: 100% auto;
}

.hunter-file-container {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.hunter-file-item {
    flex: 1;
    position: relative;
}

.hunter-role {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.role-icon {
    position: absolute;
    bottom: 139px;
    width: 55%;
    left: 50%;
    transform: translateX(-50%);
    object-fit: cover;
    margin: 0 auto;
    max-width: 80%;
}

.role-name {
    position: absolute;
    top: 107px;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    object-fit: cover;
    margin: 0 auto;
    max-width: 90%;
}

.role-details {
    position: absolute;
    bottom: 306px;
    left: 50%;
    transform: translateX(-50%);
    width: 157px;
    height: 55px;
    display: none; /* 默认隐藏 */
    animation: scaleBtn 1.5s alternate infinite ease-in;
    background: url("../images/roleDetails.png") no-repeat 0 0;
}

@keyframes scaleBtn {
    0% {
        transform: translateX(-50%) scale(1)
    }

    50% {
        transform: translateX(-50%) scale(1.15)
    }

    100% {
        transform: translateX(-50%) scale(1)
    }
}

#progressEffect {
    position: absolute;
    z-index: 10;
    top: 20px;
    left: 20px;
}

.page-game-features {
    background: url("../images/gameFeaturesBg.jpg") no-repeat center center;
    background-size: cover;
}


.game-features-container {
    position: absolute;
    top: 214px;
    bottom: 62px;
    width: 100%;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中（可选） */
    overflow: hidden;
    text-align: center;
}

.game-features-container .swiper-wrapper .active {
    transform: scale(1.15) !important;
}

.role-details-slide {
    width: 804px;
    height: auto;
}

.game-features-title {
    top: 134px;
    width: 285px;
    height: 80px;
    background: url('../images/gameFeaturesTitle.png') no-repeat center;
    background-size: cover;
    left: 12%;
    transform: translate(-50%, 0);
    position: absolute;
}

.game-features1 {
    background: url("../images/gameFeatures1.jpg") no-repeat center center;
    background-size: contain;
}

.game-features2 {
    background: url("../images/gameFeatures2.jpg") no-repeat center center;
    background-size: contain;
}

.game-features3 {
    background: url("../images/gameFeatures3.jpg") no-repeat center center;
    background-size: contain;
}

.game-features4 {
    background: url("../images/gameFeatures4.jpg") no-repeat center center;
    background-size: contain;
}

.game-features5 {
    background: url("../images/gameFeatures5.jpg") no-repeat center center;
    background-size: contain;
}

.game-features6 {
    background: url("../images/gameFeatures6.jpg") no-repeat center center;
    background-size: contain;
}

.game-features1.active {
    background: url("../images/gameFeatures1A.jpg") no-repeat center center;
    background-size: contain;
}

.game-features2.active {
    background: url("../images/gameFeatures2A.jpg") no-repeat center center;
    background-size: contain;
}

.game-features3.active {
    background: url("../images/gameFeatures3A.jpg") no-repeat center center;
    background-size: contain;
}

.game-features4.active {
    background: url("../images/gameFeatures4A.jpg") no-repeat center center;
    background-size: contain;
}

.game-features5.active {
    background: url("../images/gameFeatures5A.jpg") no-repeat center center;
    background-size: contain;
}

.game-features6.active {
    background: url("../images/gameFeatures6A.jpg") no-repeat center center;
    background-size: contain;
}

.game-features-prev {
    top: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
    width: 33px;
    height: 67px;
    left: 332px;
    background: url("../images/swiperNext.png") no-repeat center center;
    position: absolute;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-features-next {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 33px;
    height: 67px;
    right: 332px;
    background: url("../images/swiperNext.png") no-repeat center center;
    position: absolute;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-features-pagination {
    position: absolute;
    /*margin-top: 10px;*/

}

.game-features-pagination .swiper-pagination-bullet {
    width: 13px;
    height: 13px;
    margin-right: 38px !important;
    background: url("../images/point2.png") no-repeat 0 0;
    opacity: 1;
}

.game-features-pagination .swiper-pagination-bullet-active {
    width: 13px;
    height: 13px;
    margin-right: 38px !important;
    background: url("../images/point.png") no-repeat 0 0;
}

.game-features-indicator {
    position: absolute;
    right: 200px;
    bottom: var(--swiper-pagination-bottom, 0);
    top: var(--swiper-pagination-top, auto);
    color: #3461e8;
    font-weight: bold;
    display: flex;
    align-items: flex-end;
}

.game-features-indicator .current-page {
    font-size: 60px;
    line-height: 1;
}

.game-features-indicator .divider, .total-page {
    font-size: 37px;
    line-height: 1;
}

.game-features-indicator .divider {
    margin: 0 3px;
}

.copyright-information {
    background: url("../images/copyrightInformation.png") no-repeat 0 0;
    position: absolute;
    bottom: 27px;
    left: 110px;
    height: 19px;
    width: 108px;
    z-index: 10;
}

.pop-copyright-information {
    position: fixed; /* 改为fixed定位 */
    bottom: 0;
    height: 178px;
    width: 100%;
    background: url("../images/copyrightInformationBg.png");
    z-index: 20;
    transform: translateY(100%); /* 初始位置在屏幕外 */
}

.pop-copyright-box {
    display: flex;
    flex-direction: row; /* 改为横向排列 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 100%;
    gap: 90px;
}

.pop-copyright-close {
    position: absolute;
    background: url("../images/copyrightInformation2.png") no-repeat 0 0;
    height: 19px;
    width: 108px;
    top: 24px;
    left: 110px;
    z-index: 100;
}

.footer-logo {
    display: inline-block;
}

.footer-links {
    display: inline-block;
}

.footer-info {
    display: inline-block;
    color: #d2d2d2;
}

.footer-info a {
    font-size: 14px;
    line-height: 31px;
    color: #d2d2d2;
}

/*.footer-links,*/
/*.footer-info {*/
/*    margin-bottom: 6px;*/
/*}*/

/*.footer a {*/
/*    color: #aaa;*/
/*    text-decoration: none;*/
/*}*/

.footer a:hover {
    text-decoration: underline;
    color: #58aaff;
}

/* 出现动画：从下往上 */
@keyframes slideIn {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* 关闭动画：从上往下 */
@keyframes slideOut {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100%);
    }
}

/* 动画类 */
.slide-in {
    animation: slideIn 0.6s ease forwards;
    display: block !important;
}

.slide-out {
    animation: slideOut 0.6s ease forwards;
    display: block !important;
}

.hunter-role-details {
    width: 100%;
    height: 100%;
}

.swiper-role-details {
    width: 100%;
    height: 100%;
}

.role-details-werewolf {
    background: url("../images/werewolfDetailsBg.jpg") no-repeat center center;
    background-size: cover;
}

.role-details-witch {
    background: url("../images/witchDetailsBg.jpg") no-repeat center center;
    background-size: cover;
}

.role-details-fighter {
    background: url("../images/fighterDetailsBg.jpg") no-repeat center center;
    background-size: cover;
}

.role-details-ice {
    background: url("../images/iceDetailsBg.jpg") no-repeat center center;
    background-size: cover;
}

.role-details-blade {
    background: url("../images/bladeDetailsBg.jpg") no-repeat center center;
    background-size: cover;
}

.role-details-queen {
    background: url("../images/queenDetailsBg.jpg") no-repeat center center;
    background-size: cover;
}

.role-details-gunslinger {
    background: url("../images/gunslingerDetailsBg.jpg") no-repeat center center;
    background-size: cover;
}

.role-details-close {
    position: absolute;
    width: 56px;
    height: 56px;
    right: 175px;
    top: 130px;
    background: url("../images/roleDeatilsClose.png") no-repeat 0 0;
    z-index: 2;
}

.role-details-video {
    position: absolute;
    width: 447px;
    height: 251px;
    bottom: 90px;
    left: 212px;
}

.role-details-logo {
    position: absolute;
    min-width: 398px;
    height: 106px;
    top: 124px;
    left: 212px;
}

.werewolf-logo {
    background: url("../images/werewolfLogo.png") no-repeat center center/ contain;
}

.witch-logo {
    background: url("../images/witchLogo.png") no-repeat center center/ contain;
}

.fighter-logo {
    background: url("../images/fighterLogo.png") no-repeat center center/ contain;
}

.gunslinger-logo {
    background: url("../images/gunslingerLogo.png") no-repeat center center/ contain;
}

.blade-logo {
    background: url("../images/bladeLogo.png") no-repeat center center/ contain;
}

.ice-logo {
    background: url("../images/iceLogo.png") no-repeat center center/ contain;
}

.queen-logo {
    background: url("../images/queenLogo.png") no-repeat center center/ contain;
}

.role-details-text {
    position: absolute;
    left: 212px;
    top: 254px;
    height: 280px;
    width: 700px;
    display: inline-block;
    color: #d2d2d2;
    font-size: 18px;
    line-height: 40px;
}

.role-details-text span {
    display: block;
    text-indent: 2em;
}

/*.werewolf-text {*/
/*    background: url("../images/werewolfText.png") no-repeat left center/ contain;*/
/*}*/

/*.witch-text {*/
/*    background: url("../images/witchText.png") no-repeat left center/ contain;*/
/*}*/

/*.fighter-text {*/
/*    background: url("../images/fighterText.png") no-repeat left center/ contain;*/
/*}*/

/*.gunslinger-text {*/
/*    background: url("../images/gunslingerText.png") no-repeat left center/ contain;*/
/*}*/

/*.blade-text {*/
/*    background: url("../images/bladeText.png") no-repeat left center/ contain;*/
/*}*/

/*.ice-text {*/
/*    background: url("../images/iceText.png") no-repeat left center/ contain;*/
/*}*/

/*.queen-text {*/
/*    background: url("../images/queenText.png") no-repeat left center/ contain;*/
/*}*/

.werewolf-video {
    background: url("../images/werewolfVideoBg.png") no-repeat center center;
}

.ice-video {
    background: url("../images/iceVideoBg.png") no-repeat center center;
}

.witch-video {
    background: url("../images/witchVideoBg.png") no-repeat center center;
}

.gunslinger-video {
    background: url("../images/gunslingerVideoBg.png") no-repeat center center;
}

.blade-video {
    background: url("../images/bladeVideoBg.png") no-repeat center center;
}

.fighter-video {
    background: url("../images/fighterVideoBg.png") no-repeat center center;
}

.queen-video {
    background: url("../images/queenVideoBg.png") no-repeat center center;
}

.role-video-btn {
    position: absolute;
    width: 66px;
    height: 91px;
    top: 80px;
    right: 181px;
    background: url("../images/roleVideoPlay.png") no-repeat center center;
    display: none;
}

.role-details-prev {
    top: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
    width: 33px;
    height: 67px;
    left: 132px;
    background: url("../images/swiperNext.png") no-repeat center center;
    position: absolute;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.role-details-next {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 33px;
    height: 67px;
    right: 132px;
    background: url("../images/swiperNext.png") no-repeat center center;
    position: absolute;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-slide-footer {
    height: 100px !important; /* 固定高度 */
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.music-switch {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 87px;
    bottom: 29px;
    background: url("../images/musicOpen.png") no-repeat center center;
    z-index: 100;
}

.music-off {
    background: url("../images/musicClose.png") no-repeat center center;
}

.swiper-down {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0) scale(0.5);
    bottom: 10px;
    background: url("../images/down.png") no-repeat center center;
    z-index: 100;
    width: 69px;
    height: 36px;
    animation: classesArrowBottom 2s linear infinite;
}

@keyframes classesArrowBottom {
    0%, 100% {
        transform: translate(-50%, 0) scale(0.5);
    }

    50% {
        transform: translate(-50%, 0.5rem) scale(0.5);
    }
}


.news-head {
    top: 134px;
    width: 285px;
    height: 80px;
    background: url('../images/news/news_header.png') no-repeat center;
    background-size: cover;
    left: 12%;
    transform: translate(-50%, 0);
    position: absolute;
}

.news-wrapSwiper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.news-swiper-slide {
    width: 100%;
    height: 100%;
    background: url("../images/news/news_bg.jpg") no-repeat center;
    background-size: cover;


}

.news-content {
    position: absolute;
    top: 214px;
    bottom: 62px;
    width: 100%;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

.new-center-box {
    display: flex;
    align-items: self-start;
}

.mySwiper {
    width: 930px;
    height: 523px;
    margin-right: 40px;
    padding: 0 0 50px 0;
    text-align: center;
}

.mySwiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mySwiper .swiper-slide .swiper-slide-img {
    border: 1px solid #3461e8;
    width: 100%;
    height: 100%;
    margin-top: 2px;
}

.news-right {
    width: 520px;
    height: 523px;
    border-radius: 10px;
    position: relative;
}

.news-right .tabs {
    display: flex;
    /* border-bottom: 2px solid #007bff; */
}

.news-right .tab {
    width: 114px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    user-select: none;
}

.news-right .news-list {
    margin-top: 10px;
}

.news-right .news-item {
    display: flex;
    padding: 2px 0;
    height: 84px;
    margin-right: 20px;
    user-select: none;
}

.news-right #inactive {
    border-bottom: none;
}

.news-right .news-item .news-title {
    font-weight: bold;
    font-size: 18px;
    color: #3461e8;
    text-align: center;
    min-width: 68px;
    height: 80px; /* 设置元素的高度 */
    line-height: 80px; /* 设置行高等于高度以实现垂直居中 */
}

.news-right .news-right-content {
    display: flex; /* 使用 Flexbox */
    justify-content: center; /* 垂直居中 */
    flex-direction: column; /* 子元素垂直排列 */
    height: 84px;
}

.news-right .news-date {
    color: #9f9fa0;
    font-size: 16px;
    text-align: left;
}

.news-right .news-content-text {
    color: #ffffff;
    font-size: 17px;
    text-align: left;
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 超出部分用省略号表示 */
    display: -webkit-box; /* 设置为弹性盒子 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    -webkit-line-clamp: 2; /* 限制显示的行数（可根据需要调整） */
}

.news-right .news-list-pagination {
    position: absolute; /* 使用绝对定位 */
    bottom: 0; /* 距离底部20px */
    right: 0; /* 距离右边20px */
}

.news-right .news-list-pagination img {
    padding: 0 5px;
}

.mySwiper .swiper-pagination {
    text-align: center;
    margin-top: 10px; /* 分页点与轮播图的间距 */
}

.mySwiper .swiper-pagination-bullet {
    background: #FFF; /* 设置圆点颜色 */
    opacity: 1; /* 确保圆点完全不透明 */
}

.mySwiper .swiper-pagination-bullet-active {
    background: #007aff; /* 设置活动圆点颜色 */
}

.grayscale {
    opacity: 0.5;
}

.normal {
    opacity: 1;
}

.news-detail-iframe {
    display: none; /* 初始隐藏 */
    position: absolute; /* 固定定位，使其相对于视口 */
    width: 100%; /* iframe 宽度 */
    height: 100%; /* iframe 高度 */
    border: none; /* 去掉边框 */
    z-index: 1000; /* 确保在前面显示 */
    background: url("../images/news/news_bg.jpg") no-repeat center center;
    background-size: cover;
}

.news-pagination {
    position: absolute;
    bottom: 0 !important;
    z-index: 1000;
}

.news-pagination .swiper-pagination-bullet {
    width: 13px;
    height: 13px;
    margin-right: 38px !important;
    background: url("../images/point2.png") no-repeat 0 0;
}

.news-pagination .swiper-pagination-bullet-active {
    width: 13px;
    height: 13px;
    margin-right: 38px !important;
    background: url("../images/point.png") no-repeat 0 0;
}

.pop-download-tips-box {
    width: 715px;
    height: 125px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../images/toastBg.png") no-repeat 0 0;
    background-size: contain;
    box-sizing: border-box;
    padding-left: 32px;
}

.pop-download-tips-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.pop-download-tips-text {
    font-size: 28px;
    color: #2481ec;
}

.pop-download-tips-text2 {
    font-size: 28px;
    color: #3affff;
}

.pop-download-tips-close {
    top: 0;
    right: -56px;
    width: 56px;
    height: 56px;
    background: url("../images/downloadClose.png") no-repeat 0 0;
    position: absolute;
    background-size: contain;
}

.pop-weixin-box {
    width: 403px;
    height: 439px;
    position: absolute;
    top: 50%;
    left: 50%;
    background: url("../images/weixinBg.png") no-repeat 0 0;
    background-size: contain;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding-left: 32px;
}

.pop-weixin-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.weixin-qr-code-box {
    width: 268px;
    height: 268px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: url("../images/weixinQRCodeBg.png") no-repeat 0 0;
    background-size: contain;
    margin-bottom: 10px;
}

.weixin-qr-code {
    width: 238px;
    height: 238px;
}

.pop-weixin-text {
    color: #e8e8e8;
    font-size: 17px;
}

.pop-weixin-content-close {
    top: 0;
    right: -56px;
    width: 56px;
    height: 56px;
    background: url("../images/downloadClose.png") no-repeat 0 0;
    position: absolute;
    background-size: contain;
}

.news-loading {
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: none;
    position: absolute;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
}

.loading-div {
    background-color: #000000;
    width: 80px;
    height: 80px;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 8px;
}

.loader {
    border: 3px solid #000000;
    border-top: 3px solid #ffffff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto;

}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.swiper-slide.blur-effect {
    filter: blur(5px);
}

.pop-expect-content {
    width: 715px;
    height: 125px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../images/expectanceDialog.png") no-repeat 0 0;
    background-size: contain;
}

.pop-expect-close {
    top: 0;
    right: -56px;
    width: 56px;
    height: 56px;
    background: url("../images/downloadClose.png") no-repeat 0 0;
    position: absolute;
    background-size: contain;
}

.pop-toast-box {
    width: 715px;
    height: 124px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../images/toastBg.png") no-repeat 0 0;
    background-size: contain;
    box-sizing: border-box;
    padding-left: 32px;
}

.pop-toast-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pop-toast-text {
    font-size: 28px;
    color: #3affff;
}

.pop-customer-box {
    width: 403px;
    height: 439px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../images/csDialogBg.png") no-repeat 0 0;
    background-size: contain;
    box-sizing: border-box;
    padding-left: 32px;
}

.pop-customer-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* 子元素垂直排列 */
}

.customer-qr-code-box {
    width: 268px;
    height: 268px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: url("../images/downloadQRCodeBg.png") no-repeat 0 0;
    background-size: contain;
}

.customer-qr-code {
    width: 238px;
    height: 238px;
}

.pop-customer-text {
    margin-left: 16px;
    margin-top: 20px;
    color: #e8e8e8;
    font-size: 18px;
}

.pop-customer-close {
    top: 0;
    right: -56px;
    width: 56px;
    height: 56px;
    background: url("../images/downloadClose.png") no-repeat 0 0;
    position: absolute;
    background-size: contain;
}

.cs-float-window {
    width: 156px;
    height: 205px;
    position: absolute;
    top: 50%;
    /*left: 50%;*/
    transform: translate(0, -50%);
    background: url("../images/customerBg.png") no-repeat 0 0;
    background-size: contain;
    right: 5px;
    z-index: 100;
    box-sizing: border-box;
    padding: 44px 16px 26px 20px;
}

.cs-float-window-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.cs-float-window-btn {
    width: 95px;
    height: 21px;
    margin-top: 5px;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    background: url("../images/customerBtn.png") no-repeat 0 0;
    background-size: contain;
    cursor: pointer;
}

.cs-float-window-btn span {
    color: #20212c;
    font-size: 14px;
    font-family: 'yh-heavy', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.pop-download-box {
    width: 403px;
    height: 532px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../images/downloadBg.png") no-repeat 0 0;
    background-size: contain;
    box-sizing: border-box;
    padding-left: 32px;
}

.pop-download-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.pop-download-close {
    top: 0;
    right: -56px;
    width: 56px;
    height: 56px;
    background: url("../images/downloadClose.png") no-repeat 0 0;
    position: absolute;
    background-size: contain;
}

.download-qr-code-box {
    width: 260px;
    height: 260px;
    background: url("../images/downloadQRCodeBg.png") no-repeat 0 0;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 10px;
}

.download-qr-code {
    width: 238px;
    height: 238px;
}

.download-qr-code-text {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.notice-line {
    color: #c2c2c2;
    font-size: 18px;
}

.notice-line a {
    color: #3affff;
    text-underline-offset: 8px;
    font-size: 18px;
}

.pop-activation-code-box {
    width: 715px;
    height: 534px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../images/acBg.png") no-repeat 0 0;
    background-size: contain;
    box-sizing: border-box;
    padding-left: 32px;
}

.pop-activation-code-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.activation-code-tips {
    color: #2481ec;
    font-size: 28px;
    width: 533px;
    margin-top: 20px;
}

.activation-code-input {
    width: 533px;
    height: 86px;
    background: url("../images/activationCodeInputBg.png") no-repeat 0 0;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
}

.activation-code-text {
    font-size: 30px;
    width: 314px;
    height: 24px;
    line-height: 24px;
    color: #32fffd;
    text-align: center;
}

.activation-code-btn-item {
    display: flex;
    gap: 50px;
    align-items: center;
    margin-top: 20px;
}

.pop-activation-code-close {
    top: 0;
    right: -56px;
    width: 56px;
    height: 56px;
    background: url("../images/downloadClose.png") no-repeat 0 0;
    position: absolute;
    background-size: contain;
}

.pop-activation-code-copy {
    width: 238px;
    height: 57px;
    background: url("../images/copy.png") no-repeat 0 0;
}

.pop-activation-code-back {
    width: 238px;
    height: 57px;
    background: url("../images/reserveBack.png") no-repeat 0 0;
    background-size: contain;
}

.activation-code-cs-guide {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.activation-code-cs-guide span {
    color: #2481ec;
    font-size: 22px;
}

.activation-code-cs-guide a {
    color: #32fffd;
    font-size: 22px;
    text-underline-offset: 8px;
}

.pop-protocol-guide-box {
    width: 755px;
    height: 204px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../images/pgBg.png") no-repeat 0 0;
    background-size: contain;
    box-sizing: border-box;
    padding-left: 32px;
}

.protocol-guide-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    padding-right: 20px;
    padding-left: 20px;
}

.protocol-guide-text {
    text-align: center;
    font-size: 28px;
    color: #e8e8e8;
}

.protocol-guide-text a {
    color: #3affff;
    cursor: pointer;
}

.protocol-guide-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 277px;
    height: 55px;
    background: url("../images/pgBtnBg.png") no-repeat 0 0;
    background-size: contain;
    font-size: 28px;
    color: #ffffff;
    cursor: pointer;
}

.protocol-guide-close {
    top: 0;
    right: -56px;
    width: 56px;
    height: 56px;
    background: url("../images/downloadClose.png") no-repeat 0 0;
    position: absolute;
    background-size: contain;
}