@charset "UTF-8";

/* ========== 重置样式 ========== */
blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, i, input, li, ol, p, pre, td, textarea, th, ul {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

address, b, caption, cite, code, dfn, em, i, strong, th, var {
    font-style: normal;
    font-weight: 400;
}

ol, ul {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

a {
    color: inherit;
    text-decoration: none;
}

body {
    color: #333;
    font-family: Microsoft YaHei, Verdana, Arial, sans-serif, 宋体;
    font-size: 14px;
    line-height: 1.42857143;
}

img {
    border: none;
}

/* ========== 清除浮动 ========== */
.clearfix {
    zoom: 1;
}

.clearfix:after, .clearfix:before {
    content: "";
    display: table;
    line-height: 0;
}

.clearfix:after {
    clear: both;
}

/* ========== 全局基础样式 ========== */
button, input {
    background: none;
    border: none;
    outline: none;
}

body, html {
    min-width: 1640px;
}

body {
    background-color: #f0f0f0;
}

body.home-page,
body.site-page {
    background: #fbfbfb url("../png/home-dragon-bg-faint.svg") repeat-y center top;
    background-size: 1920px auto;
}

.home-page .header__container,
.site-page .header__container {
    background: #fbfbfb url("../png/home-dragon-bg-faint.svg") repeat-y center top;
    background-size: 1920px auto;
    border-bottom: 1px solid #eeeeee;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .025);
}

.container {
    margin: auto;
    width: 1400px;
}

/* ========== 头部样式 ========== */
.header, .header__placeholder {
    height: 90px;
}

.header__container {
    background: #fff;
    height: 90px;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

.header__container .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    overflow: visible;
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.header__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.header__logo {
    height: 86px;
    margin-top: 0;
    flex-shrink: 0;
}

.header__license {
    display: block;
    width: 205px;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.header__nav {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    height: 100%;
    gap: clamp(16px, 3vw, 54px);
    padding-top: 25px;
}

.header__nav__item {
    color: #ac7536;
    display: block;
    height: 100%;
    min-width: 64px;
    position: relative;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.header__nav__item.is-active, .header__nav__item:hover {
    color: #dba616;
}

/* 客服中心二维码按钮 */
.header__nav__qr-wrap {
    display: block;
    color: #ac7536;
    text-align: center;
}
.header__nav__qr-wrap:hover {
    color: #dba616;
}

.header__nav__item.is-active:before, .header__nav__item:hover:before {
    background: #eeb315;
    bottom: 0;
    content: "";
    height: 4px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 64px;
}

.header__nav__item.is-active:after, .header__nav__item:hover:after {
    border-bottom: 6px solid #eeb315;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    bottom: 4px;
    content: "";
    height: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 0;
}

.header__nav__cn {
    font-size: 18px;
    line-height: 1;
}

.header__nav__en {
    font-size: 12px;
    line-height: 1;
    margin-top: 15px;
}

@media screen and (max-width: 768px) {
    .header__nav__item {
        margin-left: 32px;
    }
}

/* ========== 页脚样式 ========== */
.footer {
    background: #f0f0f0 url(../png/footer_bg.png) no-repeat top;
}

.footer, .footer .footer-inner {
    display: flex;
    justify-content: center;
}

.footer .footer-inner {
    align-items: center;
    height: 144px;
    width: 1920px;
}

.footer .notice {
    margin-left: 260px;
}

.footer .notice p {
    color: #e7e7e7;
    font-size: 12px;
}

.footer .logo {
    margin-left: 260px;
}

.footer .notice2 {
    margin-left: 210px;
}

.footer .notice2 p {
    color: #e7e7e7;
    font-size: 12px;
}

.footer .records {
    display: flex;
    justify-content: space-between;
    margin-left: 69px;
    width: 175px;
}

.footer .records img {
    height: 55px;
}

/* ========== 公用标题样式 ========== */
.com-tit {
    border-left: 3px solid #c99e53;
    height: 24px;
    line-height: 24px;
    margin: 15px 0;
    padding-left: 7px;
    position: relative;
}

.com-tit .cn {
    color: #c99e53;
    font-size: 24px;
    font-weight: 500;
}

.com-tit .en {
    color: #d9ceba;
    font-size: 16px;
    font-weight: 500;
    margin-left: 10px;
}

.com-tit2 {
    height: 50px;
    margin: 40px 0 32px;
    position: relative;
}

.com-tit2 .cn {
    color: #c99e53;
    font-size: 26px;
    line-height: 29px;
    top: 10px;
    z-index: 2;
}

.com-tit2 .cn, .com-tit2 .en {
    font-weight: 700;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}

.com-tit2 .en {
    color: #eddec8;
    font-size: 37px;
    line-height: 1;
    opacity: .92;
    top: 0;
}

.com-tit2:after {
    background: url(../png/title_bg.png) no-repeat;
    content: "";
    height: 15px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 18px;
    width: 723px;
    z-index: 1;
}

/* ========== 右侧浮动导航 ========== */
.fixed-nav {
    background: url(../png/right_nav_bg.png) no-repeat;
    box-sizing: border-box;
    height: 579px;
    padding: 93px 0 0;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 229px;
    z-index: 999;
}

.fixed-nav .nav-item {
    cursor: pointer;
    height: 55px;
    padding-left: 54px;
    position: relative;
    transition: all .3s ease;
}

.fixed-nav .nav-item .nav-item-btn {
    font-size: 0;
    line-height: 55px;
}

.fixed-nav .nav-item .nav-item-btn img {
    margin-right: 7px;
    vertical-align: -7px;
    width: 24px;
}

.fixed-nav .nav-item .nav-item-btn span {
    color: #e1c799;
    font-size: 16px;
    font-weight: 500;
}

.fixed-nav .nav-item .nav-item-btn .icon-sel {
    display: none;
}

.fixed-nav .nav-item .qrcode {
    background: url(../png/right_nav_popup.png) no-repeat;
    box-sizing: border-box;
    height: 249px;
    opacity: 0;
    padding-right: 12px;
    pointer-events: none;
    position: absolute;
    right: 200px;
    top: -35px;
    transform: translateX(20px);
    transition: all .3s ease;
    width: 208px;
    z-index: 1000;
}

.fixed-nav .nav-item .qrcode img {
    display: block;
    height: 130px;
    margin: 27px auto 0;
    width: 130px;
}

.fixed-nav .nav-item .qrcode .qrcode-title {
    color: #ffe8d3;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    margin-top: 30px;
    text-align: center;
}

.fixed-nav .nav-item .qrcode .qrcode-brief {
    color: #e9d0ba;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    margin-top: 10px;
    text-align: center;
}

.fixed-nav .nav-item .nav-item-btn:hover span {
    color: #ffd543;
}

.fixed-nav .nav-item .nav-item-btn:hover .icon-sel {
    display: inline-block;
}

.fixed-nav .nav-item .nav-item-btn:hover .icon-nor {
    display: none;
}

.fixed-nav .nav-item .nav-item-btn:hover + .qrcode {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* ========== 等待开通中 弹窗 ========== */
.fixed-nav .nav-item .qrcode-pending .pending-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    margin: 27px auto 0;
    border: 2px dashed #c9a06a;
    border-radius: 8px;
    background: rgba(0,0,0,0.25);
}

.fixed-nav .nav-item .qrcode-pending .pending-icon {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 8px;
    filter: grayscale(0.2);
}

.fixed-nav .nav-item .qrcode-pending .pending-text {
    color: #f0d5a8;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-align: center;
}

/* ========== 领取标题 ========== */
.receive-title {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 34px 0;
}

.receive-title img {
    user-select: none;
}

.receive-title img:nth-child(2) {
    margin: 0 30px;
}

/* ========== 搜索框 ========== */
.search-box {
    align-items: center;
    margin: 38px auto 24px;
    overflow: hidden;
    width: 1350px;
}

.search-box, .search-box__inner {
    align-items: center;
    display: flex;
}

.search-box__inner {
    border: 2px solid #c99e53;
    border-radius: 56px 0 0 56px;
    border-right: 0;
    box-sizing: border-box;
    flex: 1;
    height: 56px;
}

.search-box__prefix {
    align-items: center;
    border-right: 2px solid #333;
    display: flex;
    height: 35px;
    justify-content: center;
    width: 84px;
}

.search-box__prefix img {
    height: 37px;
}

.search-box__input {
    flex: 1;
    height: 100%;
    padding: 0 16px;
}

.search-box__input input {
    background: transparent;
    border: none;
    color: #666;
    display: block;
    font-size: 20px;
    height: 100%;
    line-height: 1;
    outline: none;
    width: 100%;
}

.search-box__suffix {
    cursor: pointer;
    height: 56px;
}

.search-box__suffix img {
    display: block;
    height: 100%;
}

/* ========== 版本搜索 ========== */
.search-vers {
    margin: 38px auto 8px;
    overflow: hidden;
    width: 1400px;
}

.search-vers .search-vers-wrapper {
    margin-right: -16px;
}

.search-vers .item-ver {
    background: #ffb963;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    float: left;
    font-size: 14px;
    font-weight: 500;
    height: 28px;
    line-height: 28px;
    margin-bottom: 16px;
    margin-right: 16px;
    text-align: center;
    width: 72px;
}

.search-vers .item-ver.is-active {
    background: #ff930e;
}

/* ========== 主体区域 ========== */
.main {
    background:#f0f0f0;
    padding: 0;
}

.home-page .main,
.site-page .main,
.site-page .download-page,
.site-page .page-wrapper {
    background: transparent;
}

/* ========== Banner轮播 ========== */
.banner {
    margin: auto;
    width: 100%;
    position: relative;
}

.banner .banner-inner {
    background: #fff;
    height: 524px;
}

.banner .banner-inner .swiper-slide {
    background: #fff;
    overflow: hidden;
}

.banner .banner-inner .swiper-slide img {
    display: block;
    height: 524px;
    object-fit: cover;
    width: 100%;
}

.banner .banner-inner .pagination {
    bottom: 18px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    z-index: 10;
}

/* 兼容 Swiper 分页器 */
.banner .banner-inner .swiper-pagination-bullet {
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    height: 8px;
    margin: 0 7px;
    opacity: 1;
    width: 40px;
}

.banner .banner-inner .swiper-pagination-bullet {
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    height: 8px;
    margin: 0 7px;
    opacity: 1;
    width: 40px;
}

.banner .banner-inner .swiper-pagination-bullet-active {
    background: #ffb43d;
}

.banner .swiper-btn-prev {
    background: url(../sw-left.html) no-repeat 50%;
    left: 50%;
    margin-left: -600px;
}

.banner .swiper-btn-next, .banner .swiper-btn-prev {
    cursor: pointer;
    height: 60px;
    position: absolute;
    top: 236px;
    width: 60px;
    z-index: 1;
}

.banner .swiper-btn-next {
    background: url(../sw-right.html) no-repeat 50%;
    margin-right: -600px;
    right: 50%;
}

.banner .sixten {
    background: url(../sixten.html) no-repeat 50%;
    bottom: 20px;
    height: 104px;
    margin-right: -580px;
    position: absolute;
    right: 50%;
    width: 82px;
    z-index: 1;
}

/* ========== 游戏列表 ========== */
.games {
    margin: 0 auto 35px;
}

.games .games-list {
    background: #fff;
    padding: 20px 0 0 4px;
}

.games .games-list .games-item {
    border: 1px solid #e8e8e8;
    box-sizing: border-box;
    float: left;
    margin-bottom: 20px;
    margin-left: 16px;
    overflow: hidden;
    width: 328px;
}

.games .games-list .games-item .item-thumb {
    height: 184.5px;
}

.games .games-list .games-item .item-thumb img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.games .games-list .games-item .item-content {
    overflow: hidden;
    position: relative;
}

.games .games-list .games-item .item-time {
    color: #ff3c3c;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    position: absolute;
    right: 12px;
    top: 14px;
}

.games .games-list .games-item .item-title {
    width: 206px;
}

.games .games-list .games-item .item-title, .games .games-list .games-item .item-ver {
    color: #000;
    font-size: 16px;
    font-weight: 500;
    height: 16px;
    line-height: 16px;
    margin-top: 11px;
    overflow: hidden;
    padding: 0 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.games .games-list .games-item .item-desc {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #666;
    display: -webkit-box;
    font-size: 14px;
    font-weight: 500;
    height: 42px;
    line-height: 1.5;
    margin-top: 13px;
    overflow: hidden;
    padding: 0 10px 0 90px;
    text-overflow: ellipsis;
    word-break: break-word;
}

.games .games-list .games-item .item-desc b {
    color: #000;
    float: left;
    font-weight: 700;
    margin-left: -80px;
}

.games .games-list .games-item .item-btns {
    font-size: 0;
    overflow: hidden;
    padding: 16px 0 20px;
    text-align: center;
}

.games .games-list .games-item .item-btns .link-btn {
    background: #fff8ec;
    border: 1px solid #bda47a;
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
    height: 25px;
    line-height: 23px;
    margin-left: 6px;
    text-align: center;
    width: 74px;
}

.games .games-list .games-item .item-btns .link-btn:first-child {
    margin-left: 0;
}

.games .games-list .games-item .item-btns .link-btn.is-primary {
    background: #c99e53;
    border: 1px solid #bda47a;
    color: #fff;
}

/* ========== 视频区域 ========== */
.videos {
    margin: 10px auto 35px;
    position: relative;
}

.videos .videos-list {
    background-color: #fff;
    padding: 22px;
    position: relative;
}

.videos .swiper-container {
    margin: auto;
}

.live-placeholder {
    align-items: center;
    background:
        radial-gradient(circle at center, rgba(201, 158, 83, .16), transparent 35%),
        linear-gradient(135deg, #fffdf8 0%, #fff7e9 50%, #f8efe2 100%);
    border: 1px solid rgba(201, 158, 83, .28);
    box-shadow: inset 0 0 42px rgba(201, 158, 83, .08);
    box-sizing: border-box;
    color: #9b6a2f;
    display: flex;
    flex-direction: column;
    height: 750px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
}

.live-placeholder:before,
.live-placeholder:after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.live-placeholder:before {
    inset: 28px;
    border: 1px solid rgba(201, 158, 83, .16);
}

.live-placeholder:after {
    width: 520px;
    height: 520px;
    border-radius: 50%;
    border: 1px solid rgba(201, 158, 83, .1);
}

.live-placeholder__badge {
    border: 1px solid rgba(201, 158, 83, .38);
    color: #b98942;
    font-size: 15px;
    letter-spacing: 4px;
    line-height: 32px;
    margin-bottom: 22px;
    padding: 0 18px 0 22px;
    position: relative;
    z-index: 1;
}

.live-placeholder__title {
    color: #8f5c21;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 18px;
    position: relative;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
    z-index: 1;
}

.live-placeholder__desc {
    color: rgba(109, 78, 44, .72);
    font-size: 18px;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.live-click-layer {
    background-color: transparent;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
}

.videos .swiper-slide {
    box-sizing: border-box;
    position: relative;
    width: 670px;
}

.videos .swiper-slide .video-thumb {
    background: #000;
    height: 762px;
    position: relative;
    width: 100%;
}

.videos .swiper-slide .video-thumb .cover-img {
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.videos .swiper-slide .video-thumb .video-enter-btn {
    background: rgba(0, 0, 0, .5);
    border: 2px solid #ff930e;
    border-radius: 8px;
    color: #ff930e;
    cursor: pointer;
    font-size: 18px;
    height: 58px;
    left: 50%;
    line-height: 58px;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    z-index: 99;
}

.videos .swiper-slide .video-thumb .mask {
    background: rgba(0, 0, 0, .3);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.videos .swiper-slide .video-thumb .video-play-btn {
    background: url(../png/btn_play.png) no-repeat 50%;
    bottom: 0;
    cursor: pointer;
    height: 70px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
    z-index: 2;
}

.videos .swiper-slide .video-thumb .video-play-btn:after {
    animation: rotate 1.5s linear infinite;
    background: url(../png/btn_circle.png) no-repeat 50%;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

.videos .swiper-slide .video-intro {
    background: linear-gradient(90deg, rgba(201, 190, 154, 0.1), #d9ceba, rgba(201, 190, 154, 0.1));
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    margin: 13px auto 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 440px;
}

.videos .swiper-button-prev {
    background: url(../png/sw_btn_left.png) no-repeat 50%;
    left: -12px;
}

.videos .swiper-button-next, .videos .swiper-button-prev {
    height: 40px;
    margin-top: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
}

.videos .swiper-button-next {
    background: url(../png/sw_btn_right.png) no-repeat 50%;
    right: -12px;
}

/* ========== 记录区域 ========== */
.records {
    margin: 0px auto 0px;
    position: relative;
}

.records .records-list {
    background-color: #fff;
    padding: 20px;
    position: relative;
}

.records .swiper-container {
    margin: auto;
}

.records .swiper-slide {
    box-sizing: border-box;
    height: 215px;
    position: relative;
    width: 332px;
}

.records .swiper-slide img {
    display: block;
    height: 100%;
    width: 100%;
}

.records .swiper-button-prev {
    background: url(../png/sw_btn_left.png) no-repeat 50%;
    left: -12px;
}

.records .swiper-button-next, .records .swiper-button-prev {
    height: 40px;
    margin-top: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
}

.records .swiper-button-next {
    background: url(../png/sw_btn_right.png) no-repeat 50%;
    right: -12px;
}

/* ========== 手游推荐区域 ========== */
.mobile-recommend {
    background: url(../jpg/bg-zyjs.jpg) no-repeat 50%;
    display: block;
    height: 744px;
    margin: 0 auto;
    position: relative;
    width: 1400px;
}

.mobile-recommend * {
    box-sizing: border-box;
}

.mobile-recommend .btn-enter {
    background-image: url(../jpg/ad1.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
    color: transparent;
    height: 150px;
    position: absolute;
    right: 0px;
    text-indent: -9999px;
    top: 0px;
    width: 1400px;
}


.mobile-recommend .btn-reservation {
    background-image: url(../jpg/ad2.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
    bottom: 26px;
    color: transparent;
    height: 150px;
    left: 0px;
    position: absolute;
    text-indent: -9999px;
    width: 1400px;
}


.mobile-recommend .intro {
    height: 370px;
    left: 36px;
    position: absolute;
    top: 202px;
    width: 680px;
}

.mobile-recommend .intro__text {
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width: 160px;
}

.mobile-recommend .intro__text img {
    left: 50%;
    max-height: 60%;
    max-width: 60%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.mobile-recommend .intro__pic-skill {
    height: 222px;
    left: 204px;
    position: absolute;
    top: 25px;
    width: 165px;
}

.mobile-recommend .intro__pic-skill img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.mobile-recommend .intro__pic-role {
    height: 222px;
    left: 405px;
    position: absolute;
    top: 25px;
    width: 165px;
}

.mobile-recommend .intro__pic-role img {
    left: 50%;
    max-height: 90%;
    max-width: 90%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.mobile-recommend .intro__sex-btns {
    position: absolute;
    right: 0;
    top: 156px;
}

.mobile-recommend .intro__sex-btns .sex-btn {
    background-image: url(../png/zy_sprites.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    color: transparent;
    cursor: pointer;
    display: block;
    height: 45px;
    text-indent: -9999px;
    width: 53px;
}

.mobile-recommend .intro__sex-btns .sex-btn[data-sex=nan] {
    background-position: 0 -270px;
}

.mobile-recommend .intro__sex-btns .sex-btn[data-sex=nan].is-active {
    background-position: 0 -315px;
}

.mobile-recommend .intro__sex-btns .sex-btn[data-sex=nv] {
    background-position: 0 -360px;
}

.mobile-recommend .intro__sex-btns .sex-btn[data-sex=nv].is-active {
    background-position: 0 -405px;
}

.mobile-recommend .intro__role-btns {
    position: absolute;
    right: 0;
    top: 10px;
}

.mobile-recommend .intro__role-btns .role-btn {
    background-image: url(../png/zy_sprites.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    color: transparent;
    cursor: pointer;
    display: block;
    height: 45px;
    text-indent: -9999px;
    width: 53px;
}

.mobile-recommend .intro__role-btns .role-btn[data-role=zs] {
    background-position: 0 0;
}

.mobile-recommend .intro__role-btns .role-btn[data-role=zs].is-active {
    background-position: 0 -45px;
}

.mobile-recommend .intro__role-btns .role-btn[data-role=ds] {
    background-position: 0 -90px;
}

.mobile-recommend .intro__role-btns .role-btn[data-role=ds].is-active {
    background-position: 0 -135px;
}

.mobile-recommend .intro__role-btns .role-btn[data-role=fs] {
    background-position: 0 -180px;
}

.mobile-recommend .intro__role-btns .role-btn[data-role=fs].is-active {
    background-position: 0 -225px;
}

.mobile-recommend .intro__desc {
    height: 100px;
    left: 190px;
    position: absolute;
    top: 266px;
    width: 404px;
}

.mobile-recommend .intro__desc-item {
    overflow: hidden;
}

.mobile-recommend .intro__desc-item .item-label {
    color: #fffdec;
    float: left;
    font-size: 24px;
    font-weight: 700;
}

.mobile-recommend .intro__desc-item .item-text {
    color: #fffdec;
    font-size: 18px;
    line-height: 1.1;
    margin-left: 124px;
    padding-top: 4px;
}

.mobile-recommend .intro__tips1 {
    color: #f5e4a0;
    font-size: 8px;
    font-weight: 700;
    left: 119px;
    line-height: 9px;
    position: absolute;
    top: 56px;
    width: 11px;
    z-index: 1;
}

.mobile-recommend .intro__tips2 {
    color: grey;
    font-size: 5px;
    font-weight: 400;
    left: 129px;
    line-height: 1;
    position: absolute;
    top: 38px;
    width: 8px;
    word-break: break-word;
    z-index: 1;
}

.mobile-recommend .inscription {
    height: 356px;
    left: 717px;
    position: absolute;
    top: 210px;
    width: 644px;
}

.mobile-recommend .inscription .inscription-profession {
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.mobile-recommend .inscription .inscription-profession__item {
    background-image: url(../png/mw_sprites.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    color: transparent;
    cursor: pointer;
    float: left;
    height: 79px;
    margin-right: 4px;
    text-indent: -9999px;
    width: 168px;
}

.mobile-recommend .inscription .inscription-profession__item.is-zs {
    background-position: 0 0;
}

.mobile-recommend .inscription .inscription-profession__item.is-zs.is-active {
    background-position: 0 -79px;
}

.mobile-recommend .inscription .inscription-profession__item.is-ds {
    background-position: 0 -158px;
}

.mobile-recommend .inscription .inscription-profession__item.is-ds.is-active {
    background-position: 0 -237px;
}

.mobile-recommend .inscription .inscription-profession__item.is-fs {
    background-position: 0 -316px;
}

.mobile-recommend .inscription .inscription-profession__item.is-fs.is-active {
    background-position: 0 -395px;
}

.mobile-recommend .inscription .inscription-profession__more {
    box-sizing: border-box;
    color: #fff1cd;
    font-size: 12px;
    height: 79px;
    line-height: 14px;
    padding: 26px 0 0 20px;
    position: absolute;
    right: 0;
    top: 0;
    width: 112px;
}

.mobile-recommend .inscription .inscription-skill {
    left: 0;
    margin-right: -5px;
    position: absolute;
    top: 215px;
    width: 100%;
}

.mobile-recommend .inscription .inscription-skill__item {
    background: #333230;
    border: 1px dashed #f4db98;
    box-sizing: border-box;
    color: #f4db98;
    cursor: pointer;
    float: left;
    font-size: 24px;
    font-weight: 700;
    height: 44px;
    line-height: 44px;
    margin-bottom: 5px;
    margin-right: 5px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 155px;
}

.mobile-recommend .inscription .inscription-skill__item.is-active {
    color: #ff7200;
}

.mobile-recommend .inscription .inscription-desc {
    height: 210px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
}

.mobile-recommend .inscription .inscription-desc__table {
    position: relative;
}

.mobile-recommend .inscription .inscription-desc__table:after {
    background: url(../png/seal.png) no-repeat center/cover;
    content: "";
    height: 201px;
    pointer-events: none;
    position: absolute;
    right: -44px;
    top: 0;
    width: 189px;
}

.mobile-recommend .inscription .inscription-desc__table table {
    background: #fff1cd;
    border-collapse: collapse;
    border-radius: 0;
    border-top: 1px dashed #302e3e;
    table-layout: fixed;
    width: 100%;
}

.mobile-recommend .inscription .inscription-desc__table tr {
    border-bottom: 1px dashed #302e3e;
}

.mobile-recommend .inscription .inscription-desc__table tr:last-child {
    border-bottom: none;
}

.mobile-recommend .inscription .inscription-desc__table td,
.mobile-recommend .inscription .inscription-desc__table th {
    box-sizing: border-box;
}

.mobile-recommend .inscription .inscription-desc__table td {
    color: #363232;
    font-size: 20px;
    height: 85px;
    line-height: 85px;
    overflow: hidden;
    padding: 0 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-recommend .inscription .inscription-desc__table td:first-child {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    width: 168px;
}

/* 铭文合并图片样式 - 替换原本的两个表格单元格 */
.inscription-desc__table .inscription-img-container {
    width: 100%;
    height: 210px;  /* 与原有表格高度保持一致 */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inscription-desc__table .inscription-merge-img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* 图片覆盖整个区域，保持比例裁剪 */
    display: block;
}

/* 保持原有表格容器相对定位，确保图片正常显示 */
.inscription-desc__table {
    position: relative;
    min-height: 170px;
}

/* ========== Mobile responsive overrides ========== */
@media screen and (max-width: 768px) {
    html,
    body {
        min-width: 0 !important;
        width: 100% !important;
        overflow-x: hidden;
    }

    .container,
    .header__container .container {
        box-sizing: border-box;
        width: 100% !important;
        max-width: none;
        padding: 0 10px;
    }

    .header,
    .header__placeholder,
    .header__container {
        height: 64px;
    }

    .header__container {
        overflow: visible;
    }

    .header__logo {
        height: 50px;
        margin-top: 7px;
        margin-right: 10px;
    }

    .header__brand {
        gap: 6px;
        min-width: 0;
    }

    .header__license {
        width: 96px;
        height: auto;
    }

    .header__nav {
        flex: 1;
        height: 64px;
        gap: 12px;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding-top: 9px;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .header__nav::-webkit-scrollbar {
        display: none;
    }

    .header__nav__item {
        height: 54px;
        min-width: 56px;
        margin-left: 0 !important;
        padding: 0 2px;
        flex: 0 0 auto;
    }

    .header__nav__cn {
        font-size: 12px;
        line-height: 18px;
    }

    .header__nav__en {
        font-size: 10px;
        line-height: 14px;
        margin-top: 2px;
    }

    .banner .banner-inner,
    .banner .banner-inner .swiper-slide img {
        height: 220px;
    }

    .mobile-recommend {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        background-size: cover !important;
        background-position: center top !important;
    }

    .mobile-recommend .btn-enter,
    .mobile-recommend .btn-reservation {
        display: block !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: 0 !important;
        padding-top: 10.8% !important;
        background-size: 100% auto !important;
    }

    .mobile-recommend .intro,
    .mobile-recommend .inscription {
        display: none !important;
    }

    .main,
    .container,
    .page-wrapper,
    .download-wrap,
    .tab-nav,
    .news-panel {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
    }

    .page-wrapper {
        padding: 0 10px;
    }

    .tab-nav {
        height: auto !important;
        min-height: 38px;
        margin: 12px auto 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap;
    }

    .tab-nav a {
        float: none !important;
        display: inline-block !important;
        width: 78px !important;
        font-size: 14px !important;
    }

    .tab-nav .tab-breadcrumb {
        display: none !important;
    }

    .news-panel {
        padding: 12px !important;
        margin: 0 auto !important;
    }

    .news-list li {
        min-height: auto !important;
        padding: 10px 0 !important;
    }

    .news-title {
        display: block !important;
        max-width: none !important;
        padding-right: 0 !important;
        white-space: normal !important;
        line-height: 1.6 !important;
    }

    .news-date {
        display: block !important;
        position: static !important;
        margin-top: 4px;
        text-align: left !important;
    }

    .download-page {
        padding: 12px 10px 40px !important;
    }

    .download-title {
        height: auto !important;
        line-height: 1.4 !important;
        padding: 10px 14px !important;
    }

    .download-title h1,
    .download-title p {
        float: none !important;
        display: block;
        line-height: 1.5 !important;
    }

    .download-title h1 {
        font-size: 17px !important;
    }

    .download-title p {
        margin-top: 4px !important;
        font-size: 12px !important;
    }

    .download-panel {
        padding: 14px !important;
    }

    .download-list {
        display: block !important;
    }

    .download-card {
        min-height: 0 !important;
        margin-bottom: 14px !important;
        padding: 22px 18px !important;
    }

    .download-card:last-child {
        margin-bottom: 0 !important;
    }

    .download-card h2 {
        font-size: 20px !important;
    }

    .download-card p {
        min-height: 0 !important;
        font-size: 14px !important;
    }

    .download-btn {
        width: 100% !important;
        max-width: 240px;
        height: 48px !important;
        line-height: 48px !important;
        font-size: 18px !important;
    }

    .download-note {
        margin-top: 16px !important;
        padding: 12px 14px !important;
    }

    .right-nav {
        display: none !important;
    }

    .layout-footer__container[data-v-2a1ec38c] {
        box-sizing: border-box;
        width: 100% !important;
        padding: 24px 14px !important;
    }

    .layout-footer__link[data-v-2a1ec38c] {
        display: block !important;
    }

    .layout-footer__link .item[data-v-2a1ec38c] {
        box-sizing: border-box;
        width: 100% !important;
        margin-bottom: 10px;
    }

    .layout-footer__qr[data-v-2a1ec38c] {
        position: static !important;
        margin-top: 20px;
        text-align: left;
    }
}