/* ========================================
   3387游戏 - 新不良人游戏详情页
   一比一还原样式
   ======================================== */

/* --- 基础重置 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: #eeeff0;
}

body {
    font-family: "Microsoft Yahei", simsun, Tahoma, Helvetica, Arial;
    font-size: 0.7rem;
    color: #000;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
}

img {
    border: 0;
}

ul, li {
    list-style: none;
}

/* --- 3387自定义字体 --- */
@font-face {
    font-family: "3387font";
    src: url(data:application/font-sfnt;base64,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);
    font-display: swap;
}

/* --- 雪碧图引用 --- */
.game-detail .main-content .right .download-app .logo .slogan,
.game-detail .main-content .left .detail-block.flxx .block-content .welfare-right .title-in:before,
.game-detail .main-content .left .detail-block.flxx .block-content .welfare-left .ct ul li.fanli:before,
.game-detail .main-content .left .detail-block.flxx .block-content .welfare-left .ct ul li.libao:before,
.game-detail .main-content .left .detail-block.flxx .block-content .welfare-left .ct ul li.coupon:before,
.game-detail .main-content .left .detail-block.flxx .block-content .welfare-left .ct ul li.free:before,
.game-detail .main-content .left .detail-block .block-title:before {
    background-image: url(https://res.3387.com/resource/react-pc-site/images/pc.6cd82bec.png);
    background-repeat: no-repeat;
    background-size: 504px 439px;
}

/* --- 游戏详情页容器 --- */
.game-detail {
    padding-top: 100px;
}

/* --- 顶部导航栏 Topbar --- */
.Topbar {
    backdrop-filter: blur(25px);
    z-index: 112;
    background: rgba(255, 255, 255, .96);
    width: 100%;
    height: 68px;
    position: fixed;
    top: 0;
    left: 0;
}

.Topbar .content {
    justify-content: space-between;
    align-items: center;
    width: 1280px;
    height: 100%;
    margin: 0 auto;
    display: flex;
}

.Topbar .left {
    flex-shrink: 0;
    align-items: center;
    display: flex;
}

.Topbar .Logo {
    cursor: pointer;
    align-items: center;
    display: flex;
}

.Topbar .Logo .logo {
    background-image: url(https://res.3387.com/resource/react-pc-site/images/logo.f8898276.png);
    background-size: 100% 100%;
    width: 48px;
    height: 48px;
    margin-right: 16px;
}

.Topbar .Logo .texts {
    display: block;
}

.Topbar .Logo .texts .slogon {
    background-image: url(https://res.3387.com/resource/react-pc-site/images/pc.6cd82bec.png);
    background-repeat: no-repeat;
    background-size: 504px 439px;
    background-position: 41.1168% 28.401%;
    width: 110px;
    height: 20px;
    margin-bottom: 6.7px;
}

.Topbar .Logo .texts .text {
    color: rgba(0, 0, 0, .4);
    font-size: 13px;
    font-weight: 500;
}

.Topbar .tabs {
    color: #787d85;
    flex-wrap: nowrap;
    align-items: center;
    margin-left: 32px;
    font-size: 18px;
    font-weight: 700;
    display: flex;
}

.Topbar .tabs .tab {
    cursor: pointer;
    padding: 10px 8px;
    position: relative;
}

.Topbar .tabs .tab.active,
.Topbar .tabs .tab:hover {
    color: #ff4f5b;
}

.Topbar .tabs .tab.active:after {
    content: " ";
    background: #ff4f5b;
    width: 32px;
    height: 4px;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
}

.Topbar .tabs .tab:last-child {
    margin-left: 24px;
}

.Topbar .center {
    flex: 1;
    margin-left: 28px;
    display: flex;
}

.topbar-search {
    background: #f4f5f6;
    border-radius: 20px;
    align-items: center;
    width: 320px;
    height: 40px;
    padding: 6px 8px 6px 16px;
    display: flex;
    position: relative;
}

.topbar-search .search-input-box {
    flex: 1;
    align-items: center;
    height: 100%;
    display: flex;
    position: relative;
}

.topbar-search .search-input-box input {
    caret-color: #ff4f5b;
    color: rgba(0, 0, 0, .4);
    z-index: 2;
    background: transparent;
    border: none;
    outline: none;
    flex: 1;
    font-size: 14px;
    font-weight: 400;
}

.topbar-search .search-input-box .swiper-container {
    z-index: 1;
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.topbar-search .search-input-box .swiper-container .swiper-wrapper {
    transition-duration: 300ms;
}

.topbar-search .search-input-box .swiper-container .swiper-slide {
    color: rgba(0, 0, 0, .4);
    align-items: center;
    height: 100%;
    padding-right: 28px;
    font-size: 14px;
    display: flex;
    overflow: hidden;
}

.topbar-search .search-input-box .swiper-container .swiper-slide .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.topbar-search .search-input-box .icon-search {
    cursor: pointer;
    z-index: 3;
    color: #ccc;
    margin: 6px;
}

.topbar-search .search-input-box .icon-search:hover {
    color: #989898;
}

.Topbar .right {
    flex: 1;
    justify-content: flex-end;
    align-items: center;
    display: flex;
}

.Topbar .right .download-wrap {
    cursor: pointer;
    color: #fff;
    background: linear-gradient(90deg, #74747a 0%, #535358 100%);
    border-radius: 10px;
    align-items: center;
    padding: 8.5px 12px;
    display: flex;
}

.Topbar .right .download-wrap .txt {
    margin-left: 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 135%;
}

.Topbar .right .download-wrap .ext {
    background: rgba(255, 245, 216, .21);
    border-radius: 15px;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 135%;
}

.Topbar .right .download-wrap:hover {
    background: #ff4f5b;
}

/* --- 顶部 Banner + 游戏信息区 --- */
.game-detail .top {
    justify-content: space-between;
    align-items: stretch;
    width: 1280px;
    margin: 0 auto;
    display: flex;
}

.gameDetailBannerWrap {
    display: flex;
}

.gameDetailBanner {
    height: 100%;
}

.gameBanners {
    height: 100%;
}

/* --- Banner 区域 --- */
.gameDetailBanner {
    border-radius: 16px;
    height: auto;
    transition: height .3s ease-in-out;
    overflow: hidden;
    transform: translateZ(0);
    position: relative;
}

.gameDetailBanner .btn {
    z-index: 10;
    cursor: pointer;
    background-color: rgba(0, 0, 0, .2);
    border-radius: 29px;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 50px;
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.gameDetailBanner .btn:hover {
    background-color: rgba(0, 0, 0, .4);
}

.gameDetailBanner .btn.btn-next {
    color: #fff;
    right: 10px;
}

.gameDetailBanner .btn.btn-next .icon {
    transform: rotate(180deg);
}

.gameDetailBanner .bannerBg {
    z-index: 0;
    filter: blur(10px) brightness(.5);
    background-color: #666;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%) scale(1.2);
}

.gameDetailBanner .gameBanners {
    width: 900px;
    height: 506px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.gameDetailBanner .gameBanners .bannerTopItem {
    /* height: fit-content; */
    cursor: grab;
    margin: 0 auto;
    overflow: hidden;
}

.gameDetailBanner .gameBanners .bannerTopItem .video {
    isolation: isolate;
    border-radius: 16px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.gameDetailBanner .gameBanners .bannerTopItem .video.isVertical video {
    background-color: transparent !important;
}

.gameDetailBanner .gameBanners .bannerTopItem .video video {
    width: 100%;
    height: 100%;
}

.gameDetailBanner .gameBanners .bannerTopItem .bannerTopContent {
    word-break: break-all;
    white-space: normal;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

.gameDetailBanner .gameBanners .bannerTopItem .bannerTopContent .swiper {
    height: 100%;
}

.gameDetailBanner .gameBanners .bannerTopItem .bannerTopContent .bannerSubContent .img {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 16px;
    width: 100%;
    height: 100%;
}

/* Banner Tab 切换 */
.gameDetailTabWrap {
    width: fit-content;
    z-index: 10;
    background-color: #bcbebf;
    border-radius: 35px;
    justify-content: center;
    align-items: center;
    height: 35px;
    margin: 15px auto 0;
    padding: 3px 0;
    display: flex;
}

.gameDetailTabWrap .tab {
    color: #fff;
    cursor: pointer;
    background-color: transparent;
    border-radius: 30px;
    height: 29px;
    margin: 5px;
    padding: 5px 12px;
    font-size: 14px;
    transition: background .2s ease-in-out;
}

.gameDetailTabWrap .tab.active {
    background-color: rgba(0, 0, 0, .6);
}

/* --- 视频播放器 --- */
.videoWrap {
    background: #000;
    width: 100%;
    height: 100%;
    padding-top: 0;
    position: relative;
    overflow: hidden;
}

.videoWrap .poster {
    filter: blur(4px) brightness(.8);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.3);
}

.videoWrap video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: contain;
}

.videoWrap .btn-play {
    cursor: pointer;
    background: url(https://res.3387.com/resource/react-pc-site/images/ico-play.png) 0 0/100% 100% no-repeat;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.videoWrap .controllersWrap {
    opacity: .2;
    background: linear-gradient(transparent 0%, rgba(0, 0, 0, .008) 6.67%, rgba(0, 0, 0, .035) 13.33%, rgba(0, 0, 0, .082) 20%, rgba(0, 0, 0, .15) 26.67%, rgba(0, 0, 0, .23) 33.33%, rgba(0, 0, 0, .333) 40%, rgba(0, 0, 0, .443) 46.67%, rgba(0, 0, 0, .557) 53.33%, rgba(0, 0, 0, .667) 60%, rgba(0, 0, 0, .77) 66.67%, rgba(0, 0, 0, .85) 73.33%, rgba(0, 0, 0, .918) 80%, rgba(0, 0, 0, .965) 86.67%, rgba(0, 0, 0, .992) 93.33%, #000 100%);
    width: 100%;
    height: 160px;
    transition: all .3s ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
}

.videoWrap .controllersWrap.visible {
    opacity: 1;
    transform: translateY(0);
}

.videoWrap .controllersWrap .sy3387-video-controls {
    box-sizing: border-box;
    z-index: 10;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 32px;
    padding: 0 20px;
    transition: all .2s ease-out;
    display: flex;
    position: absolute;
    bottom: 10px;
    left: 0;
}

.videoWrap .controllersWrap .sy3387-video-controls .left,
.videoWrap .controllersWrap .sy3387-video-controls .right {
    justify-content: flex-start;
    align-items: center;
    display: flex;
}

.videoWrap .controllersWrap .sy3387-video-controls .switch {
    cursor: pointer;
    background-color: transparent;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    display: flex;
}

.videoWrap .controllersWrap .sy3387-video-controls .switch:hover {
    background: rgba(122, 122, 128, .3);
}

.videoWrap .controllersWrap .sy3387-video-controls .playTime {
    color: #fff;
    font-size: 14px;
    line-height: 1.35;
}

.videoWrap .controllersWrap .sy3387-video-controls .left .switch {
    margin-right: 12px;
}

.videoWrap .controllersWrap .sy3387-video-controls .right .switch {
    margin-left: 12px;
}

.videoWrap .rangeWrap {
    width: 100%;
    padding: 0 20px;
    position: absolute;
    bottom: 57px;
    left: 50%;
    transform: translate(-50%);
}

.videoWrap .rangeWrap .sy3387-range {
    background-color: transparent;
    width: 100%;
    height: 14px;
    position: relative;
}

.videoWrap .rangeWrap .sy3387-range:before {
    content: "";
    background-color: rgba(255, 255, 255, .2);
    border-radius: 2px;
    width: 100%;
    height: 4px;
    position: absolute;
    top: 4px;
}

.videoWrap .rangeWrap .sy3387-range .cur-rate {
    border-radius: 2px;
    width: 100%;
    height: 4px;
    position: absolute;
    top: 4px;
    left: 0;
    overflow: hidden;
}

.videoWrap .rangeWrap .sy3387-range .ico-rate {
    background-color: #ff4f5b;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 0;
    left: -6px;
}

/* --- 游戏信息卡片 --- */
.game-detail .top .game-info {
    background: #fff;
    border-radius: 16px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 360px;
    min-height: 506px;
    height: auto;
    padding: 20px 0;
    margin-bottom: 70px;
    display: flex;
}

.game-detail .top .game-info .logo-wrap {
    border-radius: 31px;
    width: 148px;
    height: 148px;
    position: relative;
    overflow: hidden;
}

.game-detail .top .game-info .logo-wrap .game-logo {
    width: 100%;
    height: 100%;
    display: block;
}

.game-detail .top .game-info .logo-wrap .discount {
    white-space: nowrap;
    color: #fff;
    background-image: url(data:image/png;base64,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);
    background-position: 0 0;
    background-size: 100% 100%;
    justify-content: center;
    align-items: center;
    height: 32px;
    padding: 0 8px 0 10px;
    font-family: "3387font";
    font-size: 20px;
    line-height: 32px;
    display: flex;
    position: absolute;
    top: 0;
}

.game-detail .top .game-info .game-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(0, 0, 0, .87);
    text-align: center;
    width: 100%;
    margin-top: 10px;
    padding: 0 16px;
    font-size: 26px;
    font-weight: 700;
    line-height: 100%;
    overflow: hidden;
}

.game-detail .top .game-info .game-tags {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 18px;
    margin-top: 10px;
    display: flex;
    overflow: hidden;
}

.game-detail .top .game-info .game-tags .game-tag {
    color: rgba(0, 0, 0, .64);
    cursor: pointer;
    background: #f4f5f6;
    border-radius: 3px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    display: flex;
}

.game-detail .top .game-info .game-tags .game-tag svg {
    color: rgba(0, 0, 0, .26);
    height: 8px;
}

.game-detail .top .game-info .game-tags .game-tag:hover {
    background: #e9eaeb;
}

.game-detail .top .game-info .game-tags .game-tag:not(:last-child) {
    margin-right: 10px;
}

.game-detail .top .game-info .game-rate-download {
    justify-content: center;
    align-items: center;
    margin-top: 8px;
    display: flex;
}

.game-detail .top .game-info .game-rate-download .game-rate {
    color: #ff6721;
    align-items: center;
    margin-right: 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 135%;
    display: flex;
}

.game-detail .top .game-info .game-rate-download .game-rate span {
    font-family: "3387font";
    font-size: 18px;
    font-weight: 400;
    line-height: 135%;
}

.game-detail .top .game-info .game-rate-download .game-download {
    color: rgba(0, 0, 0, .4);
    font-size: 13px;
    font-weight: 400;
    line-height: 135%;
}

.game-detail .top .game-info .play-btn {
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #00c853 0%, #00e676 100%);
    box-shadow: 0 4px 14px rgba(0, 200, 83, 0.35);
    border-radius: 14px;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 52px;
    margin-top: 24px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-detail .top .game-info .play-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 200, 83, 0.45);
}

.game-detail .top .game-info .download-btn {
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.35);
    border-radius: 14px;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 52px;
    margin-top: 14px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-detail .top .game-info .download-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.45);
}

.game-detail .top .game-info .code-box {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.game-detail .top .game-info .code-box .qrcode-box {
    position: relative;
    width: 140px;
    height: 140px;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.game-detail .top .game-info .code-box .qrcode-box .erweima {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-detail .top .game-info .code-box .qrcode-box .code-line {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    height: 12px;
}

.game-detail .top .game-info .code-box .txt {
    margin-top: 10px;
    color: rgba(0, 0, 0, .7);
    font-size: 13px;
    font-weight: 500;
}

/* 二维码hover显示样式 */
.game-detail .top .game-info .code-trigger {
    position: relative;
    margin-top: 14px;
    width: 320px;
}

.game-detail .top .game-info .code-btn {
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    box-shadow: 0 4px 14px rgba(250, 112, 154, 0.35);
    border-radius: 14px;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 52px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-detail .top .game-info .code-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(250, 112, 154, 0.45);
}

.game-detail .top .game-info .code-btn .icon-qr {
    margin-right: 8px;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* 统一按钮图标样式 */
.game-detail .top .game-info .play-btn .icon-android,
.game-detail .top .game-info .download-btn .icon-ios,
.game-detail .top .game-info .download-btn .icon-pc {
    margin-right: 8px;
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: inline-block;
}

.game-detail .top .game-info .play-btn .icon-android {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M17.523 15.3414c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.551 0 .999.4482.999.9993.0001.5511-.448.9997-.999.9997m-11.046 0c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.551 0 .999.4482.999.9993.0001.5511-.448.9997-.999.9997m11.404-6.02l1.9973-3.4592a.414.414 0 0 0-.152-.562.414.414 0 0 0-.5614.152l-2.0228 3.5051C15.5901 8.1653 13.853 7.8508 12 7.8508s-3.5901.3145-5.1425.8665L4.8347 5.2121a.414.414 0 0 0-.5614-.152.414.414 0 0 0-.152.562l1.9973 3.4592C2.6873 11.1866 1.5537 13.5558 1.5537 16.1857h20.8926c0-2.6299-1.1335-4.9991-4.565-6.8643'/%3E%3C/svg%3E");
}

.game-detail .top .game-info .download-btn .icon-ios {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z'/%3E%3C/svg%3E");
}

.game-detail .top .game-info .download-btn .icon-pc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E");
}

.game-detail .top .game-info .code-trigger .code-box {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 14px;
    background: #fff;
    padding: 18px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0;
}

.game-detail .top .game-info .code-trigger:hover .code-box {
    opacity: 1;
    visibility: visible;
    margin-bottom: 18px;
}

/* 二维码弹窗的小箭头 */
.game-detail .top .game-info .code-trigger .code-box::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-top-color: #fff;
}



.game-detail .top .game-info .game-size {
    color: rgba(0, 0, 0, .4);
    margin-top: 9px;
    font-size: 12px;
    line-height: 150%;
}

/* --- 主内容区 --- */
.game-detail .main-content {
    justify-content: space-between;
    align-items: flex-start;
    width: 1280px;
    margin: 0 auto;
    display: flex;
}

.game-detail .main-content .left {
    width: 900px;
}

.game-detail .main-content .left .detail-info {
    background: #fff;
    border-radius: 16px;
    padding: 0 20px 72px;
}

.game-detail .main-content .left .detail-block:not(:last-child) {
    margin-bottom: 24px;
}

.game-detail .main-content .left .detail-block .block-title {
    color: rgba(0, 0, 0, .87);
    align-items: center;
    padding-top: 24px;
    padding-bottom: 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    display: flex;
}

.game-detail .main-content .left .detail-block .block-title:before {
    content: "";
    background-position: 56.0484% 28.266%;
    width: 8px;
    height: 18px;
    margin-right: 8px;
    display: block;
}

/* 游戏简介 */
.game-detail .main-content .left .detail-block.yxjj .desc {
    color: rgba(0, 0, 0, .87);
    background: #f8f9fa;
    border-radius: 12px;
    padding: 12px;
    font-size: 14px;
    line-height: 150%;
}

/* 福利信息 */
.game-detail .main-content .left .detail-block.flxx .block-content {
    justify-content: space-between;
    align-items: stretch;
    display: flex;
}

.game-detail .main-content .left .detail-block.flxx .block-content .welfare-left {
    z-index: 3;
    background: linear-gradient(133deg, #fffef3 1.4%, #fffcf5 95.7%);
    border: 1px solid #fff3e0;
    border-radius: 12px;
    flex-direction: column;
    flex: 1;
    align-items: center;
    margin-right: 20px;
    display: flex;
    position: relative;
}

.game-detail .main-content .left .detail-block.flxx .block-content .welfare-left .tit {
    color: #755331;
    background: linear-gradient(270deg, #ffebbf 0%, #ffdc9d 100%);
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 39px;
    font-size: 14px;
    line-height: 150%;
    display: flex;
}

.game-detail .main-content .left .detail-block.flxx .block-content .welfare-left .tit svg {
    margin: 2px 5px 0;
}

.game-detail .main-content .left .detail-block.flxx .block-content .welfare-left .ct {
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 23px 30px;
    display: flex;
}

.game-detail .main-content .left .detail-block.flxx .block-content .welfare-left .ct ul {
    flex-direction: column;
    flex: 1;
    justify-content: center;
    display: flex;
}

.game-detail .main-content .left .detail-block.flxx .block-content .welfare-left .ct ul li {
    color: #5c3326;
    text-align: justify;
    align-items: center;
    font-size: 13px;
    line-height: 150%;
    display: flex;
}

.game-detail .main-content .left .detail-block.flxx .block-content .welfare-left .ct ul li:not(:last-child) {
    margin-bottom: 9.5px;
}

.game-detail .main-content .left .detail-block.flxx .block-content .welfare-left .ct ul li span {
    font-weight: 700;
}

.game-detail .main-content .left .detail-block.flxx .block-content .welfare-left .ct ul li:before {
    margin-right: 8px;
}

.game-detail .main-content .left .detail-block.flxx .block-content .welfare-left .ct ul li.coupon:before {
    content: "";
    background-position: 82.9167% 53.0121%;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: block;
}

.game-detail .main-content .left .detail-block.flxx .block-content .welfare-left .ct ul li.libao:before {
    content: "";
    background-position: 95.4167% 53.0121%;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: block;
}

.game-detail .main-content .left .detail-block.flxx .block-content .welfare-left .ct ul li.fanli:before {
    content: "";
    background-position: 97.9167% 64.8193%;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: block;
}

.game-detail .main-content .left .detail-block.flxx .block-content .welfare-right {
    background: #f8f9fa;
    border-radius: 12px;
    flex: 1;
    min-width: 580px;
    padding: 12px 20px;
}

.game-detail .main-content .left .detail-block.flxx .block-content .welfare-right li:not(:last-child) {
    margin-bottom: 8px;
}

.game-detail .main-content .left .detail-block.flxx .block-content .welfare-right .text {
    color: rgba(0, 0, 0, .87);
    margin-top: 4px;
    font-size: 14px;
    line-height: 22px;
}

.game-detail .main-content .left .detail-block.flxx .block-content .welfare-right .title-in {
    z-index: 2;
    height: 19px;
    padding-right: 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 135%;
    display: inline-block;
    position: relative;
}

.game-detail .main-content .left .detail-block.flxx .block-content .welfare-right .title-in:before {
    content: "";
    background-position: 98.374% 16.9048%;
    width: 12px;
    height: 19px;
    position: absolute;
    top: 0;
    right: 0;
}

.game-detail .main-content .left .detail-block.flxx .block-content .welfare-right .title-in:after {
    content: "";
    z-index: -1;
    background: #ffe7be;
    width: 100%;
    height: 8px;
    position: absolute;
    bottom: 0;
    left: 0;
}

/* 玩家交流 */
.game-detail .main-content .left .detail-block .thread-info {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 12px 16px;
}

.thread-item {
    align-items: flex-start;
    gap: 12px;
    display: flex;
}

.thread-item:not(:last-child) {
    margin-bottom: 16px;
}

.thread-item:not(:last-child) .content {
    position: relative;
}

.thread-item:not(:last-child) .content:after {
    content: "";
    background: #dcdcdc;
    width: 200%;
    height: 1px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: scale(.5) translate(-50%);
}

.thread-item .user-logo {
    border-radius: 50%;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: block;
}

.thread-item .content {
    word-break: break-all;
    flex: 1;
    min-width: 0;
    padding-bottom: 16px;
}

.thread-item .content .user-name {
    color: rgba(0, 0, 0, .4);
    font-size: 12px;
    line-height: 20px;
}

.thread-item .content .text {
    color: rgba(0, 0, 0, .87);
    margin-top: 10px;
    font-size: 14px;
    line-height: 150%;
}

.thread-item .content .pics {
    align-items: center;
    margin-top: 10px;
    display: flex;
}

.thread-item .content .pics .pic-wrap {
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    margin-right: 8px;
    display: flex;
    overflow: hidden;
}

.thread-item .content .pics .pic-wrap:hover .pic {
    transition: all .3s ease-out;
    transform: scale(1.1);
}

.thread-item .content .pics .pic {
    object-fit: cover;
    cursor: pointer;
    border-radius: 8px;
    width: 100px;
    height: 100px;
    display: block;
}

.game-detail .main-content .left .detail-block .more-btn {
    color: rgba(0, 0, 0, .64);
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 36px;
    justify-content: center;
    align-items: center;
    width: 456px;
    height: 40px;
    margin: 20px auto 0;
    font-size: 13px;
    display: flex;
}

.game-detail .main-content .left .detail-block .more-btn:hover {
    background: #f8f9fa;
}

/* --- 右侧栏 --- */
.game-detail .main-content .right {
    width: 360px;
}

/* 下载APP */
.game-detail .main-content .right .download-app {
    background: #fff;
    border-radius: 16px;
    height: 317px;
    padding: 20px;
    position: relative;
}

.game-detail .main-content .right .download-app .logo {
    align-items: center;
    display: flex;
}

.game-detail .main-content .right .download-app .logo .icon {
    background: url(https://res.3387.com/resource/react-pc-site/images/logo.f8898276.png) 50%/contain no-repeat;
    width: 44px;
    height: 45px;
    margin-right: 12px;
    display: block;
}

.game-detail .main-content .right .download-app .logo .slogan {
    background-position: 93.3333% 17.0264%;
    width: 114px;
    height: 22px;
}

.game-detail .main-content .right .download-app ul {
    margin-top: 20px;
}

.game-detail .main-content .right .download-app ul li {
    color: rgba(0, 0, 0, .87);
    align-items: center;
    font-size: 15px;
    line-height: 135%;
    display: flex;
}

.game-detail .main-content .right .download-app ul li:not(:last-child) {
    margin-bottom: 16px;
}

.game-detail .main-content .right .download-app ul li span {
    color: #ff4f5b;
    margin-left: 5px;
    font-weight: 700;
    line-height: 135%;
}

.game-detail .main-content .right .download-app ul li svg {
    margin-right: 8px;
}

.game-detail .main-content .right .download-app .btn-download {
    color: #fff;
    cursor: pointer;
    background: #ff4f5b;
    border-radius: 112px;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 39px;
    margin-top: 25px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
}

.game-detail .main-content .right .download-app .btn-download:hover {
    background: #e3404b;
}

.game-detail .main-content .right .download-app .btn-collect {
    color: #ff4f5b;
    cursor: pointer;
    background: #fff;
    border: 1px solid #ff4f5b;
    border-radius: 112px;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 39px;
    margin-top: 16px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
}

.game-detail .main-content .right .download-app .btn-collect:hover {
    background: rgba(255, 79, 91, .1);
}

.game-detail .main-content .right .download-app .qr-code {
    flex-direction: column;
    align-items: center;
    display: flex;
    position: absolute;
    top: 40px;
    right: 20px;
}

.game-detail .main-content .right .download-app .qr-code .qrcode-value {
    width: 104px;
    height: 104px;
    display: block;
}

.game-detail .main-content .right .download-app .qr-code .text {
    color: #7a7a7a;
    letter-spacing: 4px;
    justify-content: center;
    align-items: center;
    margin-top: 7px;
    font-size: 15px;
    display: flex;
}

.game-detail .main-content .right .download-app .qr-code .text:before {
    content: "";
    background: #d9d9d9;
    border-radius: 50%;
    width: 3px;
    height: 3px;
    margin-right: 6px;
    display: block;
}

.game-detail .main-content .right .download-app .qr-code .text:after {
    content: "";
    background: #d9d9d9;
    border-radius: 50%;
    width: 3px;
    height: 3px;
    margin-left: 6px;
    display: block;
}

/* 近期开服 */
.game-detail .main-content .right .server-open {
    background: #fff;
    border-radius: 16px;
    margin-top: 20px;
    padding: 20px;
}

.game-detail .main-content .right .server-open .tit {
    text-align: center;
    color: rgba(0, 0, 0, .87);
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
}

.game-detail .main-content .right .server-open .server-open-list {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    display: flex;
}

.game-detail .main-content .right .server-open .server-open-list .server-open-item {
    background: #f8f9fa;
    border-radius: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 154px;
    height: 70px;
    margin-bottom: 12px;
    display: flex;
}

.game-detail .main-content .right .server-open .server-open-list .server-open-item .time {
    color: rgba(0, 0, 0, .87);
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.game-detail .main-content .right .server-open .server-open-list .server-open-item .name {
    text-align: center;
    color: rgba(0, 0, 0, .64);
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    margin-top: 4px;
    padding: 0 12px;
    font-size: 13px;
    line-height: 20px;
    overflow: hidden;
}

/* 相似游戏推荐 */
.game-detail .main-content .right .recommend-games {
    background: #fff;
    border-radius: 16px;
    margin-top: 20px;
    padding: 20px;
}

.game-detail .main-content .right .recommend-games .tit {
    color: rgba(0, 0, 0, .87);
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
}

.game-detail .main-content .right .recommend-games .game-item {
    cursor: pointer;
    align-items: center;
    padding: 12px 86px 12px 0;
    display: flex;
    position: relative;
}

.game-detail .main-content .right .recommend-games .game-item:hover .game-btn {
    display: flex;
}

.game-detail .main-content .right .recommend-games .game-item:hover .game-score {
    display: none;
}

.game-detail .main-content .right .recommend-games .game-item .game-btn {
    color: #fff;
    cursor: pointer;
    background: #ff4f5b;
    border-radius: 112px;
    justify-content: center;
    align-items: center;
    width: 76px;
    height: 34px;
    font-size: 13px;
    font-weight: 700;
    display: none;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.game-detail .main-content .right .recommend-games .game-item .game-btn:hover {
    background: #e3404b;
}

.game-detail .main-content .right .recommend-games .game-item .game-score {
    color: #ff6721;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 135%;
    display: flex;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.game-detail .main-content .right .recommend-games .game-item .game-score span {
    font-family: "3387font";
    font-size: 15.04px;
    font-weight: 400;
    line-height: 135%;
}

.game-detail .main-content .right .recommend-games .game-item .game-logo {
    border-radius: 13.4px;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    margin-right: 10px;
    display: block;
}

.game-detail .main-content .right .recommend-games .game-item .game-item-info {
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
    display: flex;
    overflow: hidden;
}

.game-detail .main-content .right .recommend-games .game-item .game-item-info .game-name {
    color: rgba(0, 0, 0, .87);
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    overflow: hidden;
}

.game-detail .main-content .right .recommend-games .game-item .game-item-info .game-tags {
    flex-wrap: wrap;
    align-items: center;
    height: 22px;
    margin-top: 10px;
    display: flex;
    overflow: hidden;
}

.game-detail .main-content .right .recommend-games .game-item .game-item-info .game-tags .game-tag {
    color: rgba(0, 0, 0, .64);
    white-space: nowrap;
    background: #f4f5f6;
    border-radius: 3px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    height: 22px;
    padding: 0 6px;
    font-size: 14px;
    display: flex;
}

.game-detail .main-content .right .recommend-games .game-item .game-item-info .game-tags .game-tag:not(:last-child) {
    margin-right: 6px;
}

.game-detail .main-content .right .recommend-games .game-item .game-item-info .game-tags .game-tag.discount {
    color: #fff;
    background: linear-gradient(250.79deg, #ff9636 2.39%, #ff4f5b 100%);
    padding: 0 3px;
    font-family: "3387font";
    font-size: 12px;
}

.game-detail .main-content .right .recommend-games .more {
    cursor: pointer;
    color: #ff4f5b;
    border-radius: 14px;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 28px;
    margin: 0 auto;
    font-size: 12px;
    display: flex;
}

.game-detail .main-content .right .recommend-games .more:hover {
    background: rgba(255, 79, 91, .1);
}

.game-detail .main-content .right .recommend-games .more svg {
    margin-left: 3px;
}

/* --- 页脚 --- */
.sy-common-page-footer-wrap-style2-pc {
    background: #000;
}

.sy-common-page-footer-wrap-style2-pc .sy-common-page-footer-style2 {
    color: hsla(0, 0%, 100%, .3);
    display: flex;
    flex-shrink: 0;
    font-size: 12px;
    justify-content: space-between;
    margin: 0 auto;
    padding: 20px 0;
    width: 1280px;
}

.sy-common-page-footer-wrap-style2-pc .sy-common-page-footer-style2 a {
    color: hsla(0, 0%, 100%, .3);
}

.sy-common-page-footer-wrap-style2-pc .sy-common-page-footer-style2 .link {
    line-height: 135%;
    position: relative;
}

.sy-common-page-footer-wrap-style2-pc .sy-common-page-footer-style2 .link .line {
    justify-content: left;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.sy-common-page-footer-wrap-style2-pc .sy-common-page-footer-style2 .link a {
    color: hsla(0, 0%, 100%, .5);
    margin: 0 40px 0 0 !important;
    position: relative;
}

.sy-common-page-footer-wrap-style2-pc .sy-common-page-footer-style2 .link a:before {
    background: hsla(0, 0%, 100%, .2);
    content: "";
    height: 12px;
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
}

.sy-common-page-footer-wrap-style2-pc .sy-common-page-footer-style2 .link a:last-of-type:before {
    display: none;
}

.sy-common-page-footer-wrap-style2-pc .sy-common-page-footer-style2 .link .friend-link {
    display: flex;
    margin-bottom: 15px;
}

.sy-common-page-footer-wrap-style2-pc .sy-common-page-footer-style2 .link .friend-link .txt {
    color: #fff;
}

.sy-common-page-footer-wrap-style2-pc .sy-common-page-footer-style2 .link .friend-link .txt:first-child {
    margin: 0 10px 0 0 !important;
}

.sy-common-page-footer-wrap-style2-pc .sy-common-page-footer-style2 .link .friend-link a {
    opacity: .8;
}

.sy-common-page-footer-wrap-style2-pc .sy-common-page-footer-style2 .link .logo {
    background: url(data:image/png;base64,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) no-repeat;
    bottom: 0;
    color: transparent;
    height: 20px;
    left: 0;
    margin: 0;
    position: absolute;
    width: 110px;
}

.sy-common-page-footer-wrap-style2-pc .sy-common-page-footer-style2 .link .version {
    bottom: 0;
    color: hsla(0, 0%, 100%, .4);
    font-family: Microsoft YaHei;
    font-size: 14px;
    left: 122px;
    line-height: 1;
    margin: 0;
    position: absolute;
}

.sy-common-page-footer-wrap-style2-pc .sy-common-page-footer-style2 .txt-info {
    margin-top: -8px;
    text-align: right;
}

.sy-common-page-footer-wrap-style2-pc .sy-common-page-footer-style2 .txt-info .line {
    line-height: 16px;
    margin-top: 8px;
}

.sy-common-page-footer-wrap-style2-pc .sy-common-page-footer-style2 .txt-info .txt {
    margin: 0 6px;
}

.sy-common-page-footer-wrap-style2-pc .sy-common-page-footer-style2 .txt-info a.gray {
    color: hsla(0, 0%, 100%, .4);
}

/* --- 截图横向滚动 --- */
#screenshotSwiper .swiper-wrapper {
    display: flex;
    height: 100%;
}

#screenshotSwiper .bannerSubContent {
    flex-shrink: 0;
}

/* --- 视频播放按钮样式 --- */
.videoWrap .btn-play.btn-pause {
    background: url(https://res.3387.com/resource/react-pc-site/images/ico-pause.png) 0 0/100% 100% no-repeat;
}

.videoWrap .btn-play.btn-replay {
    background: url(https://res.3387.com/resource/react-pc-site/images/ico-replay.png) 0 0/100% 100% no-repeat;
}