body.preload {
    visibility: hidden;
    opacity: 0
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body {
    font-family: 'Noto Sans TC', sans-serif;
    background: #fff;
    color: #222
}

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

img {
    max-width: 100%;
    height: auto;
    display: block
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/noto-sans-tc/noto-sans-tc-v36-chinese-traditional-regular.woff2) format('woff2')
}

@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/noto-sans-tc/noto-sans-tc-v36-chinese-traditional-700.woff2) format('woff2')
}

:root {
    --jp-header-top: #f1f2f7;
    --jp-header-mid: #e7e9f1;
    --jp-header-bottom: #dde0e9;
    --jp-line-top: #faf3ea;
    --jp-line-mid: #d9bea0;
    --jp-line-bottom: #f3e7d8;
    --jp-text: #525461;
    --jp-text-hover: #3d404c;
    --jp-text-soft: #666978;
    --jp-gold: #a68563;
    --jp-gold-deep: #8f6f4d;
    --jp-gold-soft: #d8c0a8;
    --jp-login-top: #fbfbfd;
    --jp-login-bottom: #e8e5e2;
    --jp-login-border: #d3c7bb;
    --jp-reg-top: #fdf9f5;
    --jp-reg-mid: #ecddd0;
    --jp-reg-bottom: #d7b79f;
    --jp-reg-border: #c7aa90;
    --jp-shadow-soft: rgba(71, 62, 53, .10);
    --jp-shadow-btn: rgba(109, 86, 65, .16)
}

body {
    font-family: 'Noto Sans TC', sans-serif;
    background: #fff;
    color: #222;
    margin: 0;
    padding-top: 86px
}

a,
a:active,
a:focus,
a:hover,
a:link,
a:visited {
    color: inherit;
    text-decoration: none
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

.jp-header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background: linear-gradient(180deg, var(--jp-header-top) 0, var(--jp-header-mid) 52%, var(--jp-header-bottom) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86), 0 2px 10px rgba(52, 58, 74, .06);
    overflow: visible
}

.jp-header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: rgba(255, 255, 255, .88);
    pointer-events: none
}

.jp-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .75) 0, var(--jp-line-top) 18%, var(--jp-line-mid) 58%, var(--jp-line-bottom) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(177, 148, 116, .16);
    pointer-events: none
}

.jp-header-container {
    max-width: 1540px;
    margin: 0 auto;
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 22px 16px;
    position: relative;
    z-index: 2
}

.jp-header-logo {
    flex: 0 0 220px;
    display: flex;
    align-items: center
}

.jp-header-logo a {
    display: inline-flex;
    align-items: center
}

.jp-header-logo img {
    width: auto;
    max-height: 58px;
    filter: sepia(.18) saturate(.88) hue-rotate(-8deg) brightness(.94) contrast(1.03)
}

.jp-header-nav {
    flex: 1 1 auto;
    min-width: 0
}

.jp-header-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0 8px
}

.jp-header-nav li {
    display: flex;
    align-items: center
}

.jp-header-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    color: var(--jp-text) !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    transition: color .18s ease, transform .18s ease, opacity .18s ease
}

.jp-header-nav a::after {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    bottom: -8px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(166, 133, 99, 0) 0, rgba(166, 133, 99, .95) 50%, rgba(166, 133, 99, 0) 100%);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .18s ease
}

.jp-header-nav a:hover {
    color: var(--jp-text-hover) !important;
    transform: translateY(-1px)
}

.jp-header-nav a:hover::after {
    transform: scaleX(1)
}

.jp-header-btns {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    white-space: nowrap
}

.btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid var(--jp-login-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, .94) 0, var(--jp-login-top) 20%, var(--jp-login-bottom) 100%);
    color: #696b78 !important;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(173, 161, 149, .1), 0 4px 10px rgba(92, 96, 111, .08);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease
}

.btn-login:hover {
    transform: translateY(-1px);
    filter: brightness(1.01);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -1px 0 rgba(173, 161, 149, .14), 0 8px 16px rgba(92, 96, 111, .12)
}

.jp-cta {
    position: relative;
    display: inline-flex;
    border-radius: 14px;
    text-align: center;
    text-decoration: none;
    overflow: visible
}

.jp-cta__halo {
    pointer-events: none;
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    z-index: 0;
    background-image: radial-gradient(circle, rgba(223, 196, 168, .48) 0, rgba(198, 168, 138, .28) 45%, rgba(0, 0, 0, 0) 72%);
    filter: blur(.2px);
    will-change: transform, opacity;
    animation: tuHaloBK 1.9s ease-out infinite
}

.jp-cta__btn {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    min-width: 112px;
    min-height: 40px;
    padding: 7px 24px;
    border-radius: 14px;
    border: 1px solid #c8ab8f;
    background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #fcfaf8 0, #f2e7dc 28%, #e2cebc 62%, #d1b097 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(158, 126, 96, .12), 0 8px 18px rgba(125, 101, 79, .16);
    cursor: pointer;
    transform: translateZ(0);
    will-change: transform, filter;
    animation: tuBtnJitterBK 1.9s ease-out infinite
}

.jp-cta__text {
    padding: 0 6px;
    font-weight: 900;
    letter-spacing: 1px;
    background: linear-gradient(180deg, #6f7280 0, #5d606d 48%, #4e515d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: #2b3451;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .72), 0 0 10px rgba(214, 190, 165, .14)
}

.jp-cta__btn::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    pointer-events: none;
    border: 2px solid rgba(214, 188, 160, .52);
    box-shadow: 0 0 14px rgba(214, 188, 160, .24), 0 0 38px rgba(189, 158, 128, .16);
    opacity: 0;
    transform: scale(.98);
    animation: tuShockBK 1.9s ease-out infinite
}

.jp-cta__btn::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 12px;
    pointer-events: none;
    overflow: hidden;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .38) 42%, rgba(247, 235, 223, .58) 50%, rgba(255, 255, 255, 0) 68%);
    transform: translateX(-120%);
    opacity: .9;
    animation: tuSweepBK 2.8s ease-in-out infinite;
    mix-blend-mode: screen
}

@media (hover:hover) {
    .jp-cta:hover .jp-cta__btn {
        filter: brightness(1.03) contrast(1.01);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), inset 0 -1px 0 rgba(158, 126, 96, .15), 0 12px 24px rgba(125, 101, 79, .2)
    }

    .jp-cta:hover .jp-cta__halo {
        opacity: .92
    }
}

@media (prefers-reduced-motion:reduce) {

    .jp-cta__btn,
    .jp-cta__btn::after,
    .jp-cta__btn::before,
    .jp-cta__halo {
        animation: none
    }
}

.home-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 1920/720
}

.home-banner img {
    width: 100%;
    height: auto;
    display: block
}

@media (max-width:1024px) {
    .home-banner {
        aspect-ratio: 1053/468
    }
}

.home-banner-link {
    display: block
}

@keyframes tuHaloBK {
    0% {
        transform: scale(1);
        opacity: .55
    }

    45% {
        transform: scale(1.18);
        opacity: .28
    }

    100% {
        transform: scale(1.38);
        opacity: 0
    }
}

@keyframes tuBtnJitterBK {

    0%,
    10% {
        transform: translate3d(0, 0, 0)
    }

    12% {
        transform: translate3d(.9px, -.7px, 0) rotate(-.22deg)
    }

    14% {
        transform: translate3d(-.8px, .8px, 0) rotate(.18deg)
    }

    16% {
        transform: translate3d(.5px, .2px, 0) rotate(-.1deg)
    }

    18% {
        transform: translate3d(0, 0, 0)
    }

    100% {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes tuShockBK {

    0%,
    10% {
        opacity: 0;
        transform: scale(.98)
    }

    12% {
        opacity: .62;
        transform: scale(1.02)
    }

    22% {
        opacity: .22;
        transform: scale(1.16)
    }

    36% {
        opacity: 0;
        transform: scale(1.28)
    }

    100% {
        opacity: 0;
        transform: scale(1.28)
    }
}

@keyframes tuSweepBK {
    0% {
        transform: translateX(-120%);
        opacity: 0
    }

    12% {
        opacity: .85
    }

    35% {
        transform: translateX(120%);
        opacity: 0
    }

    100% {
        transform: translateX(120%);
        opacity: 0
    }
}

@media (max-width:1024px) {
    body {
        padding-top: 74px
    }

    .jp-header {
        background: linear-gradient(180deg, #eff1f6 0, #e8ebf1 52%, #dde1e9 100%)
    }

    .jp-header::after {
        height: 7px
    }

    .jp-header-container {
        min-height: 74px;
        padding: 8px 12px 13px;
        gap: 10px
    }

    .jp-header-logo {
        flex: 0 0 auto;
        max-width: 42%
    }

    .jp-header-logo img {
        max-height: 42px
    }

    .jp-header-nav {
        display: none
    }

    .jp-header-btns {
        flex: 1 1 auto;
        gap: 8px
    }

    .btn-login {
        min-width: 68px;
        min-height: 38px;
        padding: 0 14px;
        border-radius: 12px;
        font-size: 13px
    }

    .jp-cta {
        border-radius: 14px
    }

    .jp-cta__halo {
        inset: -10px
    }

    .jp-cta__btn {
        font-size: 15px;
        min-width: 96px;
        min-height: 40px;
        padding: 6px 22px;
        border-radius: 14px
    }

    .jp-cta__btn::after {
        inset: -10px
    }

    .jp-cta__btn::before {
        inset: 1px;
        border-radius: 12px
    }

    .jp-cta__text {
        letter-spacing: .08em
    }
}

@media (min-width:1440px) {
    .jp-header-nav a {
        font-size: 17px;
        padding: 0 20px
    }
}

.jp-announcement-wrap {
    position: relative;
    padding: 6px 0;
    background: linear-gradient(180deg, #eef0f4 0, #e2e5ec 100%);
    border-top: 1px solid #c6a77d;
    border-bottom: 1px solid #c6a77d;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .6), 0 2px 6px rgba(0, 0, 0, .05)
}

.jp-announcement {
    max-width: 1540px;
    margin: auto;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px
}

.jp-announcement__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: url(https://www.game5688.net/img/icon/jp-announcement-speaker.webp) no-repeat center;
    background-size: contain
}

.jp-announcement__viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden
}

.jp-announcement__track {
    display: flex;
    width: max-content;
    transform: translateZ(0)
}

.jp-announcement__list {
    display: flex;
    gap: 48px;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    width: max-content;
    animation: jpMarquee 50s linear infinite
}

.jp-announcement__list li {
    font-size: 14px;
    font-weight: 600;
    color: #555a67;
    padding-left: 12px;
    position: relative;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6)
}

.jp-announcement__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: linear-gradient(180deg, #d7b88f, #b48556)
}

@keyframes jpMarquee {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        transform: translate3d(-50%, 0, 0)
    }
}

@media (hover:hover) {
    .jp-announcement__viewport:hover .jp-announcement__list {
        animation-play-state: paused
    }
}

.jp-quickbar-m {
    display: none
}

@media (max-width:768px) {
    .jp-quickbar-m {
        display: flex;
        margin: 10px 6px;
        border-radius: 12px;
        background: linear-gradient(180deg, #fff, #f4f6fa);
        border: 1px solid #d6c2aa;
        box-shadow: 0 3px 10px rgba(0, 0, 0, .06);
        overflow: hidden
    }

    .jp-quickbar__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px 0;
        text-decoration: none !important
    }

    .jp-quickbar__item img {
        width: 34px;
        height: 34px
    }

    .jp-quickbar__item span {
        font-size: 13px;
        font-weight: 700;
        color: #7b6645;
        margin-top: 4px
    }

    .jp-quickbar__divider {
        width: 1px;
        background: linear-gradient(to bottom, transparent, #d1b892, transparent)
    }
}

.jp-home-games {
    max-width: 1540px;
    margin: 20px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 2fr 1.2fr;
    gap: 16px
}

.jp-home-games__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px
}

.jp-home-games__item {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    background: #eee;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
    transition: transform .25s ease, box-shadow .25s ease
}

.jp-home-games__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.jp-home-games__item--main {
    min-height: 340px
}

.jp-home-games__grid .jp-home-games__item {
    min-height: 160px
}

@media (hover:hover) {
    .jp-home-games__item:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .15)
    }
}

.jp-home-games__overlay {
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 2;
    display: none !important
}

.jp-home-games__overlay h2,
.jp-home-games__overlay h3 {
    margin: 0;
    font-weight: 800;
    color: #3c4055
}

.jp-home-games__overlay h2 {
    font-size: 34px
}

.jp-home-games__overlay h3 {
    font-size: 22px
}

.jp-home-games__overlay span {
    display: block;
    font-size: 14px;
    color: #9b8466;
    margin-top: 6px;
    letter-spacing: .05em
}

@media (max-width:1024px) {
    .jp-home-games {
        display: none !important
    }
}

.jp-app-download {
    position: relative;
    width: 100%;
    margin: 28px 0 0;
    overflow: hidden
}

.jp-app-download__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url(https://www.game5688.net/img/app-download/pc-download-bg.webp) no-repeat center center/cover
}

.jp-app-download__container {
    position: relative;
    z-index: 2;
    max-width: 1540px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box
}

.jp-app-download__inner {
    min-height: 560px;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    align-items: center;
    gap: 0;
    padding: 28px 48px
}

.jp-app-download__visual {
    display: flex;
    align-items: center;
    justify-content: center
}

.jp-app-download__visual img {
    width: min(100%, 700px);
    height: auto;
    display: block
}

.jp-app-download__content {
    max-width: 540px;
    justify-self: start;
    padding-left: 12px
}

.jp-app-download__logo {
    width: min(100%, 390px);
    height: auto;
    display: block;
    margin-bottom: 28px
}

.jp-app-download__desc {
    margin: 0;
    font-size: 16px;
    line-height: 2;
    color: #5b5f6d;
    max-width: 500px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .42)
}

.jp-app-download__actions {
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start
}

.jp-app-download__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, filter .2s ease
}

.jp-app-download__btn img {
    width: auto;
    height: 56px;
    display: block
}

@media (hover:hover) {
    .jp-app-download__btn:hover {
        transform: translateY(-2px);
        filter: brightness(1.03)
    }
}

@media (max-width:1024px) {
    .jp-app-download {
        display: none !important
    }
}

@media (max-width:1200px) {
    .jp-app-download__inner {
        min-height: 500px;
        grid-template-columns: 1fr 1fr;
        padding: 24px 28px
    }

    .jp-app-download__logo {
        width: min(100%, 320px);
        margin-bottom: 20px
    }

    .jp-app-download__desc {
        font-size: 15px;
        line-height: 1.9
    }

    .jp-app-download__btn img {
        height: 52px
    }
}

.tab-game-layout {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 12px;
    padding: 0 5px
}

.game-grid-wrap {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px;
    box-sizing: border-box
}

.game-grid {
    width: 100%;
    display: none;
    gap: 12px
}

.game-grid--hot {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.game-item {
    width: 100%;
    display: block;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    overflow: hidden
}

.game-item a {
    display: block;
    text-decoration: none
}

.game-item img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: cover;
    border-radius: 8px;
    padding: 5px 5px 0;
    box-sizing: border-box
}

.game-item span {
    display: block;
    margin: 6px 0 0;
    padding: 0 6px 10px;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    font-weight: 600;
    text-align: center
}

.tab-m-wrap {
    width: 20%;
    flex: 0 0 auto;
    flex-shrink: 0;
    background: #f3f4f8;
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 10px 8px;
    box-sizing: border-box
}

.tab-m {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: auto;
    aspect-ratio: 1/1;
    padding: 12px 6px;
    border: none;
    border-radius: 20px;
    background: linear-gradient(180deg, #f8f9fc 0, #eef1f6 100%);
    color: #5c6175;
    cursor: pointer;
    transition: all .25s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 14px rgba(0, 0, 0, .08)
}

.tab-m:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 10px 20px rgba(0, 0, 0, .12)
}

.tab-m.on {
    background: linear-gradient(180deg, #6f7899 0, #525b7c 100%);
    color: #fff;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25), 0 8px 18px rgba(0, 0, 0, .2)
}

.tab-icon-m {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
    margin: 0 0 10px;
    opacity: .72;
    transition: all .25s ease
}

.tab-m.on .tab-icon-m {
    opacity: 1
}

.tab-label-m {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: -.2px;
    word-break: break-word
}

@media (max-width:768px) {

    .tab-game-pclayout,
    .tab-pc-wrap {
        display: none !important
    }

    .tab-m {
        padding: 10px 5px
    }

    .tab-m-wrap {
        gap: 10px
    }
}

@media (min-width:1025px) {

    .tab-game-layout,
    .tab-m-wrap {
        display: none !important
    }
}

@media (max-width:1024px) {
    .tab-game-layout {
        padding-bottom: 100px;
    }
}

@media (max-width:768px) {
    .tab-game-layout {
        align-items: stretch
    }

    .game-grid-wrap {
        flex: 1 1 auto;
        min-width: 0;
        max-height: calc(100vh - 24px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 12px;
        box-sizing: border-box
    }

    .tab-m-wrap {
        gap: 12px;
        padding: 8px 6px;
        border-radius: 16px
    }

    .tab-m {
        min-height: auto;
        padding: 8px 6px;
        border-radius: 15px
    }

    .tab-icon-m {
        width: 30px;
        height: 30px;
        margin-bottom: 8px
    }

    .tab-label-m {
        font-size: 15px
    }

    .tab-m-wrap {
        position: sticky;
        top: 12px;
        align-self: flex-start;
        max-height: calc(100vh - 24px);
        overflow-y: auto;
        scrollbar-width: none
    }

    .tab-m-wrap::-webkit-scrollbar {
        display: none
    }
}

@media (max-width:400px) {
    .tab-icon-m {
        width: 26px;
        height: 26px;
    }
}

.game-grid--single {
    display: block
}

.jp-row-card {
    margin-bottom: 14px
}

.jp-row-card:last-child {
    margin-bottom: 0
}

.jp-row-card a {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    background: #ececec
}

.jp-row-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px
}

.jp-row-card__content {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 42%
}

.jp-row-card__title {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.4px;
    background: linear-gradient(180deg, #3f4668 0, #232743 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .18)
}

.jp-row-card__sub {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.15;
    color: #7a6847;
    letter-spacing: -.2px
}

@media (max-width:768px) {
    .jp-row-card {
        margin-bottom: 12px
    }

    .jp-row-card__content {
        left: 18px;
        width: 46%
    }

    .jp-row-card__title {
        font-size: 22px;
        margin-bottom: 6px
    }

    .jp-row-card__sub {
        font-size: 14px
    }
}

@property --jp-support-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false
}

.jp-support-float {
    position: fixed;
    right: 18px;
    bottom: 87px;
    z-index: 9999;
    display: block;
    width: 190px;
    aspect-ratio: 190/81;
    max-width: calc(100vw - 20px);
    border-radius: 15px;
    line-height: 0;
    text-decoration: none;
    isolation: isolate;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .28)) drop-shadow(0 0 9px rgba(126, 135, 167, .48));
    animation: jpSupportFloat 1.8s ease-in-out infinite;
    transition: transform .25s ease, filter .25s ease
}

.jp-support-float img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 0 0 1px rgba(225, 231, 248, .9), 0 0 0 3px rgba(70, 77, 104, .72), 0 7px 18px rgba(0, 0, 0, .22)
}

.jp-support-float::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: -4px;
    padding: 3px;
    border-radius: 19px;
    background: conic-gradient(from var(--jp-support-angle), transparent 0deg, transparent 278deg, rgba(142, 155, 190, .08) 290deg, rgba(126, 135, 167, .32) 300deg, rgba(177, 188, 219, .72) 312deg, rgba(225, 231, 248, 1) 322deg, rgba(142, 155, 190, 1) 331deg, rgba(70, 77, 104, .9) 341deg, rgba(126, 135, 167, .35) 350deg, transparent 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    filter: drop-shadow(0 0 3px rgba(225, 231, 248, 1)) drop-shadow(0 0 7px rgba(142, 155, 190, .95)) drop-shadow(0 0 13px rgba(70, 77, 104, .72));
    will-change: background, opacity;
    animation: jpSupportBorderOrbit 2.4s linear .3s infinite, jpSupportBorderReveal .2s ease .25s forwards
}

.jp-support-float::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -7px;
    border: 2px solid rgba(142, 155, 190, .5);
    border-radius: 21px;
    box-shadow: 0 0 8px rgba(177, 188, 219, .72), 0 0 17px rgba(70, 77, 104, .48);
    pointer-events: none;
    visibility: hidden;
    animation: jpSupportGlowPulse 1.7s ease-in-out .3s infinite, jpSupportGlowReveal .01s linear .25s forwards
}

@keyframes jpSupportFloat {

    0%,
    100% {
        transform: translateY(0) scale(1)
    }

    50% {
        transform: translateY(-5px) scale(1.012)
    }
}

@keyframes jpSupportBorderOrbit {
    from {
        --jp-support-angle: 0deg
    }

    to {
        --jp-support-angle: 360deg
    }
}

@keyframes jpSupportBorderReveal {
    from {
        opacity: 0;
        visibility: hidden
    }

    to {
        opacity: 1;
        visibility: visible
    }
}

@keyframes jpSupportGlowPulse {

    0%,
    100% {
        opacity: .42;
        transform: scale(1)
    }

    50% {
        opacity: .82;
        transform: scale(1.014)
    }
}

@keyframes jpSupportGlowReveal {
    from {
        visibility: hidden
    }

    to {
        visibility: visible
    }
}

.jp-support-float:hover {
    animation-play-state: paused;
    transform: translateY(-4px) scale(1.025);
    filter: drop-shadow(0 12px 17px rgba(0, 0, 0, .32)) drop-shadow(0 0 16px rgba(142, 155, 190, .9))
}

.jp-support-float:active {
    animation-play-state: paused;
    transform: scale(.97)
}

@media (max-width:768px) {
    .jp-support-float {
        right: 8px;
        bottom: 84px;
        width: 170px;
        border-radius: 13px
    }

    .jp-support-float img {
        border-radius: 13px
    }

    .jp-support-float::before {
        inset: -4px;
        padding: 2px;
        border-radius: 17px
    }

    .jp-support-float::after {
        inset: -6px;
        border-radius: 19px
    }
}

@media (prefers-reduced-motion:reduce) {
    .jp-support-float {
        animation: none
    }

    .jp-support-float::before {
        animation: none;
        opacity: 1;
        visibility: visible
    }

    .jp-support-float::after {
        animation: none;
        opacity: .55;
        visibility: visible
    }
}

.jp-footer {
    width: 100%;
    margin-top: 34px;
    overflow: hidden
}

.jp-footer__vendors {
    position: relative;
    background: linear-gradient(90deg, #8791b4 0, #606b92 16%, #4f597f 34%, #4b557c 50%, #4f597f 66%, #667197 84%, #8791b4 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(255, 255, 255, .03)
}

.jp-footer__vendors-inner {
    max-width: 1540px;
    margin: 0 auto;
    min-height: 112px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 62px;
    flex-wrap: wrap
}

.jp-footer__vendor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    opacity: .92;
    transition: opacity .18s ease, transform .18s ease, filter .18s ease
}

.jp-footer__vendor img {
    display: block;
    width: auto;
    max-height: 44px;
    max-width: 132px
}

.jp-footer__vendor:hover {
    opacity: 1;
    transform: translateY(-1px);
    filter: brightness(1.06)
}

.jp-footer__bottom {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% 72%, rgba(255, 248, 205, .64) 0, rgba(255, 248, 205, .18) 16%, rgba(255, 248, 205, 0) 34%), linear-gradient(180deg, #dfcda3 0, #dcc89e 22%, #dcc79d 56%, #ddc89f 100%)
}

.jp-footer__bottom::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(https://www.game5688.net/img/footer-icon/footer-bg.2b8d939.webp) no-repeat center bottom/cover;
    opacity: .22;
    pointer-events: none
}

.jp-footer__bottom::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -22px;
    transform: translateX(-50%);
    width: min(54vw, 900px);
    height: 120px;
    background: radial-gradient(circle, rgba(255, 248, 210, .48) 0, rgba(255, 248, 210, .2) 34%, rgba(255, 248, 210, 0) 72%);
    pointer-events: none
}

.jp-footer__bottom-inner {
    position: relative;
    z-index: 2;
    max-width: 1540px;
    margin: 0 auto;
    min-height: 230px;
    padding: 36px 24px 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start
}

.jp-footer__links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 44px
}

.jp-footer__links a {
    position: relative;
    color: #6c6458 !important;
    text-decoration: none !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    padding: 0 40px;
    transition: color .18s ease, opacity .18s ease;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .24)
}

.jp-footer__links a:hover {
    color: #51493e !important
}

.jp-footer__links a+a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 42px;
    background: rgba(124, 112, 91, .14)
}

.jp-footer__meta {
    text-align: center
}

.jp-footer__meta p {
    margin: 0;
    color: rgba(111, 104, 90, .52);
    font-size: 15px;
    font-weight: 600;
    line-height: 2.45;
    letter-spacing: .01em
}

@media (max-width:1024px) {
    .jp-footer {
        display: none !important
    }
}

@media (min-width:769px) and (max-width:1024px) {
    .tab-m-wrap {
        width: 15%
    }

    .game-grid--hot {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media (min-width: 1025px) and (max-width: 1144px) {
    .jp-header-nav ul {
        display: none;
    }
}