:root, [data-bs-theme=dark]{
    --gs-deep-blue-rgb: 19, 21, 92;
    --bs-dark-rgb: 9, 11, 52;
    --swiper-theme-color: #fff;
    --swiper-navigation-size: 40px;
}

[data-bs-theme="dark"] {
    --bs-danger-rgb: 255, 90, 0;
    --bs-body-bg: #090b34 !important;
    --bs-body-bg-2: #272c8c !important;
    --bs-body-bg-3: #363269 !important;
    --bs-primary-bg-subtle: #424591;
    --bs-dark-blue: #1f237c;
    --bs-dark-blue-grey: #1b1d4a; /* #151744 */
    --bs-success-rgb: 0, 197, 116;
    --bs-success-gradient: linear-gradient(
        120deg,
        rgb(105,246,164),
        rgb(19,62,218)
    );
}

/* Dropdown */
.dropdown-menu{
    --bs-dropdown-bg: var(--bs-body-bg-2);
}

/* nav */
.nav-pills{
    --bs-nav-pills-link-active-bg: #00c5a8;
}

/* Modal */
.modal{
    --bs-modal-bg: var(--bs-body-bg-2);
}

/* Layui */
.layui-flow-more{
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 10px;
}
.layui-flow-more a{
    background-color: #00c5a8;
    color: #fff;
    border: 1px solid #00c5a8;
    padding: 7px 12px;
    text-decoration: none;
    border-radius: 99rem;
    font-style: initial;
    font-size: .875rem;
}
.layui-flow-more a:hover{
    background-color: #00ddbc;
    color: white;
}
.layui-flow-more a cite{
    font-style: normal!important;
}
.layui-flow-more a i{
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url("../image/loading.gif");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
}


body{
    font-size: .75rem;
    font-family: 'Roboto', sans-serif;
}

/* Icon */
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

/* Font */
/* Oswald Font */
@font-face {
    font-family: 'oswald';
    src: url('../font/Oswald-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
/* 粗体字体 */
@font-face {
    font-family: 'oswald';
    src: url('../font/Oswald-SemiBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* 常规字体 */
@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* 粗体字体 */
@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

.oswald-500{
    font-family: oswald;
    font-weight: 500 !important;
}
.oswald-700{
    font-family: oswald;
    font-weight: 700 !important;
}

/* Step Line */
.stepper-wrapper {
    display: flex;
    justify-content: space-between;
}
.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}
.stepper-item::before {
    position: absolute;
    content: "";
    border-bottom: 2px solid #eee;
    width: 100%;
    top: 13px;
    left: -50%;
    z-index: 2;
}
.stepper-item::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #eee;
    width: 100%;
    top: 13px;
    left: 50%;
    z-index: 2;
}
.stepper-item .step-counter {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eee;
    margin-bottom: 6px;
}
.stepper-item.active {
    font-weight: bold;
}
.stepper-item.completed .step-counter {
    background: rgba(var(--bs-success-rgb),var(--bs-bg-opacity))!important;
    color: white;
    --bs-bg-opacity: 1;
}
.stepper-item.completed::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #00c5a8;
    width: 100%;
    top: 13px;
    left: 50%;
    z-index: 3;
}
.stepper-item:first-child::before {
    content: none;
}
.stepper-item:last-child::after {
    content: none;
}

/* Loading */
#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 99999; /* 保证在页面最上层 */
}
.spinner-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* tom-select dark */
/* 输入框里的文字 */
.ts-control {
    color: #fff !important;
}
/* 下拉列表里的文字 */
.ts-dropdown,
.ts-dropdown .option {
    color: #fff !important;
}
/* 输入框右侧下拉箭头改成白色 */
.ts-wrapper:not(.form-control,.form-select).single .ts-control{
    background-color: var(--bs-body-bg-3) !important;
    border-color: var(--bs-body-bg-3) !important;
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20License%3A%20MIT.%20Made%20by%20basicons%3A%20https%3A%2F%2Fbasicons.xyz%2F%20--%3E%3Csvg%20width%3D%2212px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4%208L12%2016L20%208%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
.modal .ts-wrapper:not(.form-control,.form-select).single .ts-control{
    border-color: var(--bs-primary-bg-subtle) !important;
    background-color: var(--bs-primary-bg-subtle) !important;
}
/* 输入框输入文字颜色 */
.ts-control, .ts-control input, .ts-dropdown{
    color: white;
}
/* 隐藏输入框输入后出现的提示添加add... */
.ts-dropdown .create{
    display: none !important;
}
/* hover 或选中状态 */
.ts-dropdown .active {
    background-color: var(--bs-body-bg-2) !important;
    color: #fff !important;
}
.cursor-pointer{
    cursor: pointer !important;
}

/* Background */
/* Deep Blue */
.bg-deep-blue{
    background-image: linear-gradient(rgba(var(--gs-deep-blue-rgb), 1), rgba(var(--gs-deep-blue-rgb), 1));
}
.bg-dark-navy-blue{
    background-color: #080925;
}
.bg-dark-navy-blue-2{
    background-color: #08091d;
}
.bg-dark-blue-gray{
    background-color: var(--bs-dark-blue-grey);
}
/* Gradient */
.bg-success-gradient, .check-active {
    background-image: var(--bs-success-gradient) !important;
}
.bg-violet-gradient{
    background: linear-gradient(to right, #0f3d9c, #1e103c, #96173c);
}
.bg-violet-gradient::before{
    background-image: url("../image/bg/dotdot.svg?v=2");
    background-repeat: no-repeat;
    background-size: 100%;
    content: '';
    width: 600px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    opacity: .1;
}
/* deep blue gradient */
.bg-deep-blue-gradient{
    background: linear-gradient(135deg, #055a5a, #0b2260);
}
/* Dark Glass */
.bg-dark-glass{
    /* From https://css.glass */
    background: rgba(0, 0, 0, 0.37);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(14.1px);
    -webkit-backdrop-filter: blur(14.1px);
    border: 1px solid rgba(0, 0, 0, 0.08);
}
/* form custom bg */
.form-custom-bg{
    border-color: var(--bs-body-bg-3) !important;
    background-color: var(--bs-body-bg-3) !important;
}
.form-custom-bg:disabled{
    background-color: #7471a1 !important;
    border-color: #7471a1 !important;
}

/* texture */
.bg-texture-game-pic{
    background-image: url("../image/game-bg-pic.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.bg-texture-twill{
    background-image: url("../image/bg/bg-twill.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Text */
.text-white-space{
    white-space: pre-wrap;
}
.text-word-wrap{
    word-wrap: break-word;
}

/* bg hover */
.bg-primary-hover:hover {
    background-color: #0d6efd !important;
}
.bg-success-hover:hover {
    background: linear-gradient(
        45deg,
        rgb(110,255,185),
        rgb(8,70,232)
    ) !important;
}

/* Size */
/* Font */
.font-size-sm{
    font-size: .75rem;
}
.font-size-md{
    font-size: .875rem;
}

/* Button */
/* Dark Button */
.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: #090b34;
    --bs-btn-border-color: #090b34;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #272c8c;
    --bs-btn-hover-border-color: #272c8c;
    --bs-btn-focus-shadow-rgb: 66, 70, 73;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #272c8c;
    --bs-btn-active-border-color: #272c8c;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #212529;
    --bs-btn-disabled-border-color: #212529;
}
/* success button */
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #00c5a8;
    --bs-btn-border-color: #00c5a8;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #00ddbc;
    --bs-btn-hover-border-color: #00ddbc;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #00ddbc;
    --bs-btn-active-border-color: #00ddbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #19877e;
    --bs-btn-disabled-border-color: #19877e;
}
/* secondary */
/* 组件默认的 Radio toggle buttons 改了颜色 */
.radio-btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #424591;
    --bs-btn-border-color: #424591;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3a3d84;
    --bs-btn-hover-border-color: #3a3d84;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #00c5a8;
    --bs-btn-active-border-color: #00c5a8;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #4e4f71;
    --bs-btn-disabled-border-color: #4e4f71;
}
/* 自定义为白色背景用来放付款图标 加上了选中状态 和 悬浮文字小标签 */
.radio-btn-light {
    --bs-btn-color: #111;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-focus-shadow-rgb: 0, 0, 0;
    --bs-btn-active-color: #111;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #00c5a8;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ccc;
    --bs-btn-disabled-bg: #999;
    --bs-btn-disabled-border-color: #999;
}
.radio-btn-light .circle {
    width: 20px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
    transition: all 0.2s ease;
    position: absolute;
    margin-top: -10px;
    top: 50%;
    left: 8px;
}
.radio-btn-light .in-label{
    top: -8px;
    right: -4px;
}
input[type="radio"].btn-check:checked + .radio-btn-light .circle, input[type="radio"].btn-check:checked + .radio-btn-coupon .circle {
    border-color: #00c5a8 !important;
    background-color: #00c5a8 !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
input[type="radio"].btn-check:checked + .radio-btn-light .in-label {
    background-color: #00c5a8 !important;
}
/* Coupon Radio */
.radio-btn-coupon .circle{
    width: 20px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
    transition: all 0.2s ease;
    position: absolute;
    margin-top: -10px;
    top: 50%;
    right: 0;
}
/* success outline button */
.btn-outline-success {
    --bs-btn-color: #00c5a8;
    --bs-btn-border-color: #00c5a8;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #00c5a8;
    --bs-btn-hover-border-color: #00c5a8;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #00c5a8;
    --bs-btn-active-border-color: #00c5a8;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #19877e;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #19877e;
    --bs-gradient: none;
}

/* Heart Button */
.like-button {
    color: #878787;
    font-weight: bold;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: grayscale(100%);
    user-select: none;
}
.like-button.liked {
    color: #ff6e6f;
    border-color: currentColor;
    filter: grayscale(0);
}
.like-button:hover {
    border-color: currentColor;
}
.like-icon {
    width: 20px;
    height: 18px;
    display: inline-block;
    position: relative;
    font-size: 1.5rem;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyMSAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMTAxIDQuNDE3UzguODk1LjIwNyA1LjExMS4yMDdjLTQuNDY1IDAtMTAuOTY3IDYuODQ2IDUuMDgyIDE3LjU5MkMyNS4yMzcgNy4wMyAxOS42NjUuMjAyIDE1LjUwMS4yMDJjLTQuMTYyIDAtNS40IDQuMjE1LTUuNCA0LjIxNXoiIGZpbGw9IiNGRjZFNkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==') no-repeat center;
    background-size: 100%;
    animation: heartUnlike 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.liked .like-icon {
    animation: heartPulse 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.liked .like-icon [class^="heart-animation-"] {
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyMSAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMTAxIDQuNDE3UzguODk1LjIwNyA1LjExMS4yMDdjLTQuNDY1IDAtMTAuOTY3IDYuODQ2IDUuMDgyIDE3LjU5MkMyNS4yMzcgNy4wMyAxOS42NjUuMjAyIDE1LjUwMS4yMDJjLTQuMTYyIDAtNS40IDQuMjE1LTUuNCA0LjIxNXoiIGZpbGw9IiNGRjZFNkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==') no-repeat center;
    background-size: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 16px;
    opacity: 0;
}
.liked .like-icon [class^="heart-animation-"]::before, .liked .like-icon [class^="heart-animation-"]::after {
    content: '';
    background: inherit;
    background-size: 100%;
    width: inherit;
    height: inherit;
    display: inherit;
    position: relative;
    top: inherit;
    left: inherit;
    opacity: 0;
}
.liked .like-icon .heart-animation-1 {
    animation: heartFloatMain-1 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.liked .like-icon .heart-animation-1::before, .liked .like-icon .heart-animation-1::after {
    width: 12px;
    height: 10px;
    visibility: hidden;
}
.liked .like-icon .heart-animation-1::before {
    opacity: 0.6;
    animation: heartFloatSub-1 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.liked .like-icon .heart-animation-1::after {
    animation: heartFloatSub-2 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    opacity: 0.75;
}
.liked .like-icon .heart-animation-2 {
    animation: heartFloatMain-2 1s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.liked .like-icon .heart-animation-2::before, .liked .like-icon .heart-animation-2::after {
    width: 10px;
    height: 8px;
    visibility: hidden;
}
.liked .like-icon .heart-animation-2::before {
    animation: heartFloatSub-3 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    opacity: 0.25;
}
.liked .like-icon .heart-animation-2::after {
    animation: heartFloatSub-4 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    opacity: 0.4;
}
@keyframes heartPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}
@keyframes heartUnlike {
    50% {
        transform: scale(0.75);
    }
}
@keyframes heartFloatMain-1 {
    0% {
        opacity: 0;
        transform: translate(0) rotate(0);
    }
    50% {
        opacity: 1;
        transform: translate(0, -25px) rotate(-20deg);
    }
}
@keyframes heartFloatMain-2 {
    0% {
        opacity: 0;
        transform: translate(0) rotate(0) scale(0);
    }
    50% {
        opacity: 0.9;
        transform: translate(-10px, -38px) rotate(25deg) scale(1);
    }
}
@keyframes heartFloatSub-1 {
    0% {
        visibility: hidden;
        transform: translate(0) rotate(0);
    }
    50% {
        visibility: visible;
        transform: translate(13px, -13px) rotate(30deg);
    }
}
@keyframes heartFloatSub-2 {
    0% {
        visibility: hidden;
        transform: translate(0) rotate(0);
    }
    50% {
        visibility: visible;
        transform: translate(18px, -10px) rotate(55deg);
    }
}
@keyframes heartFloatSub-3 {
    0% {
        visibility: hidden;
        transform: translate(0) rotate(0);
    }
    50% {
        visibility: visible;
        transform: translate(-10px, -10px) rotate(-40deg);
    }
    100% {
        transform: translate(-50px, 0);
    }
}
@keyframes heartFloatSub-4 {
    0% {
        visibility: hidden;
        transform: translate(0) rotate(0);
    }
    50% {
        visibility: visible;
        transform: translate(2px, -18px) rotate(-25deg);
    }
}

/* 增减数量 */
.counter {
    width: 200px;
}
.counter button {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
}
.counter .decrement, .counter .increment {
    background-color: #424591;
    color: #999;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
    transition: background-color 0.5s ease;
}
.counter .decrement:hover, .counter .increment:hover{
    background-color: #5558a3;
    color: white;
    box-shadow: none;
}
.counter .count {
    width: 70px;
    text-align: center;
    border: none;
    background-color: transparent;
    outline: none;
    -moz-appearance: textfield;
}
.counter .count::-webkit-outer-spin-button,
.counter .count::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* hover跟随渐变背景色按钮组 */
.login-btn-group a{
    min-width: 5rem;
}
.login-btn-group a::before{
    background-image: var(--bs-success-gradient) !important;
    border-radius: 99rem;
    content: '';
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}
.login-btn-group a.active::before{
    display: block;
}
/* 功能按钮显示大小 */
.function-btn-size-md{
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
}
/* 表单显示大小 */
.function-form-size-md{
    padding-top: .6rem !important;
    padding-bottom: .6rem !important;
}

/* 图片懒加载 骨架屏 (js在main.js) */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
/* 图片加载完成显示 */
.lazy-load.loaded {
    opacity: 1;
}
/* 骨架屏水波动画 */
.placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    animation: wave 1.5s infinite linear;
}
/* 水波动效 */
@keyframes wave {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}
/* 渐变让水波 */
.placeholder-wave {
    background-image: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #e0e0e0 50%,
        #f0f0f0 100%
    );
    background-size: 200% 100%;
}

/* Forms */
/* form to */
.form-to-group{}
.form-to-group .form-to-box:not(:last-child) {
    position: relative;
}
.form-to-group .form-to-box:not(:last-child)::before {
    background-color: white;
    content: '';
    width: 8px;
    height: 2px;
    position: absolute;
    top: 45%;
    left: calc(100% - 4px);
    opacity: .35;
}

/* Switch */
.form-check-input:checked {
    background-color: #00c5a8;
    border-color: #00c5a8;
}

/* Check */
.custom-check-lg{
    padding-left: 1.875rem;
}
.custom-check-lg .form-check-input{
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .02rem;
}
.custom-check-lg .form-check-input:checked{
    background-color: white;
    border-color: white;
}
.custom-check-lg .form-check-input:checked[type=checkbox]{
    --bs-form-check-bg-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20License%3A%20CC%20Attribution.%20Made%20by%20salesforce%3A%20https%3A%2F%2Flightningdesignsystem.com%2F%20--%3E%3Csvg%20fill%3D%22%23000000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2226px%22%20height%3D%2226px%22%20viewBox%3D%220%200%2052%2052%22%20enable-background%3D%22new%200%200%2052%2052%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%3Cpath%20d%3D%22M19.1%2C42.5L2.6%2C25.9c-0.6-0.6-0.6-1.6%2C0-2.2l2.2-2.2c0.6-0.6%2C1.6-0.6%2C2.2%2C0L19.4%2C34c0.4%2C0.4%2C1.1%2C0.4%2C1.5%2C0L45.2%2C9.5c0.6-0.6%2C1.6-0.6%2C2.2%2C0l2.2%2C2.2c0.6%2C0.6%2C0.6%2C1.6%2C0%2C2.2L21.3%2C42.5C20.7%2C43.2%2C19.7%2C43.2%2C19.1%2C42.5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
    background-size: 14px 14px;
}
.custom-check-lg:has(.form-check-input:checked[type=checkbox]) {
    background-color: #00c5a8 !important;
    color: white !important;
}

/* Card */
/* Cover media card */
.cover-media-card{
    cursor: pointer;
    height: 120px;
}
.cover-media-card .game-text{
    bottom: 15px;
}
.cover-media-card .hover-show-more{
    transition: bottom 0.3s ease;
}
.cover-media-card:hover .hover-show-more{
    bottom: 0 !important;
}
/* News Card */
.news-media-card{}
.news-media-card h4 a{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}
.news-media-card p{
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}
.news-media-card .news-card-pic{
    min-height: 112px;
}
.news-media-card .news-card-pic::before{
    background: linear-gradient(to top, rgba(19, 21, 92, 1), rgba(19, 21, 92, 0));
    content: '';
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
}

/* tooltip */
.custom-tooltip {
    --bs-tooltip-bg: var(--bs-black);
    --bs-tooltip-color: var(--bs-white);
}
/* 核心样式：控制边框和阴影 */
.custom-tooltip .tooltip-inner {
    border: 1px solid rgba(255, 255, 255, 0.15); /* 半透明黑色边框 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* 柔和阴影 */
    border-radius: 0.4rem; /* 可选，圆角美观 */
    font-size: .75rem !important;
}
.custom-tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: rgba(0, 0, 0, 0.3);
}
.custom-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: rgba(0, 0, 0, 0.3);
}
.custom-tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: rgba(0, 0, 0, 0.3);
}
.custom-tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: rgba(0, 0, 0, 0.3);
}

/* Popovers */
.popover .popover-arrow {
    /*display: none !important;*/
}
.popover.bs-popover-end {
    margin-top: 0 !important;
    transform: none !important;
    top: 0 !important;
}
/* data-bs-custom-class="custom-popover" 要加在触发按钮 */
.custom-popover {
    --bs-popover-bg: var(--bs-body-bg-2);
    --bs-popover-border-color: var(--bs-dark-border-subtle);
    --bs-popover-header-bg: var(--bs-dark-blue-grey);
    --bs-popover-header-color: var(--bs-white);
    --bs-popover-body-padding-x:0;
    --bs-popover-body-padding-y:0;
    box-shadow: var(--bs-box-shadow-lg) !important;
    min-width: 300px;
}
.custom-popover .popover-header{
    background-color: rgba(255, 255, 255, 0.045);
}

/* Header */
/* navbar-nav 里面的dropdown-menu会取消absolute定位 */
header .navbar-nav .dropdown-menu{
    position: absolute !important;
}
/* Logo */
.store-logo{
    height: 22px;
}
/* nav bar */
.gs-navbar{
    padding: .75rem 0;
    background-color: transparent;
    box-shadow: 0 .5rem 1rem #00000026, inset 0 -1px #ffffff26;
}
.gs-navbar:after {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    content: "";
    background-image: linear-gradient(rgba(var(--gs-deep-blue-rgb), 1), rgba(var(--gs-deep-blue-rgb), 1));
}
/* Search Bar */
.search-bar .search-btn{
    top: .28rem;
    right: .28rem;
    padding: .275rem .585rem;
}
.search-bar .search-input{
    padding: .65rem 2.875rem .65rem 1rem;
    min-width: 100%;
}
/* Language Currency */
.lang-text::before{
    content: '';
    width: 1px;
    height: 12px;
    background-color: #8a90b5;
    position: absolute;
    top: 3px;
    right: 0;
}
/* Shopping Cart */
.cart-list-content{
    max-height: 305px;
}
/* Main Nav */
.main-nav{
    background-color: var(--bs-dark-blue);
}
/* Category Menu */
.category-item-wrap{
    max-height: 60vh;
}

/* Swiper js */
/* swiper初始加载会短暂变大解决方法 */
.swiper {
    opacity: 0;
    transition: opacity 0.03s ease-in-out;
}
.swiper-initialized {
    opacity: 1;
}
/* 首页顶部轮播 */
.mega-sale-swiper{
    width: 100%; /* 调整整体宽度 */
    padding: 0;
}
/* 手机显示图片比例大小 */
.mega-sale-swiper .swiper-slide{
    width: 100%;
    height: 140px;
    transition: transform 0.3s ease;
    position: relative;
}
.mega-sale-swiper .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Swiper 按钮样式 */
.swiper-button-next,
.swiper-button-prev {
    width: 40px; /* 调整按钮大小 */
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
/* 悬停时加深颜色 */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}
/* Swiper SVG箭头 */
.swiper-button-next::after,
.swiper-button-prev::after {
    color: #333; /* 深灰色箭头 */
    font-size: 20px; /* 调整箭头大小 */
}
/* 按钮位置 */
.swiper-button-prev {
    left: 10px; /* 左侧按钮位置 */
}
.swiper-button-next {
    right: 10px; /* 右侧按钮位置 */
}
/* End Swiper 按钮样式 */
/* 左右两边的图片加上半透明黑色蒙版 */
.mega-sale-swiper .swiper-slide::before{
    background-color: rgba(33, 33, 33, 0.7);
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: none;
}

/* Page Swiper Menu */
.menuSwiper .link-items .link-icon{
    width: 35px;
    height: 35px;
}

/* Why Choose Us */
.why-choose-card{
    min-height: 180px;
}

/* Support payment */
.support-payment img{
    height: 26px;
}

/* Page */
/* Avatar */
.avatar{
    background: #12c2e9;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #f64f59, #c471ed, #12c2e9);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #f64f59, #c471ed, #12c2e9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.online::before{
    background-color: #00ddbc;
    border-radius: 99rem;
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}
.offline::before{
    background-color: #9d9d9d !important;
}
/* Sidebar */
.sidebar {
    width: 285px;
}
/* Page Hero */
.page-hero-wrap{
}
.page-category-item:hover .text-light-emphasis, .page-category-item.active .text-light-emphasis{
    /*color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important;*/
}
.page-category-item.active{
    background-image: var(--bs-success-gradient) !important;
}
/* Product Description */
.product-description h4, .product-description h5{
    font-family: oswald;
    font-size: 1.15rem !important;
}
/* Product */
.product-big-pic img{
    min-height: 157px;
}
.product-title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 2.1rem;
}

.product-details-description h2, .product-details-description h3, .product-details-description h4{
    font-size: 1.25rem;
    font-weight: 700;
}

.reminderText p, .reminderText p span{
    text-wrap: initial !important;
}

/* Level */
.level-icon img{
    max-width: 14px !important;
}

/* Max Text */
.maxshow-content{
    white-space: pre-wrap;
    word-wrap: break-word;
}
.maxshow-content p, .maxshow-content span{
    word-wrap: break-word !important;
    word-break: break-word !important;
    text-wrap: initial !important;
}

/* Other seller */
.moreInfoWrap{
    display: none;
}
.productBarList .deliveryWrap:hover .moreInfoWrap{
    display: flex !important;
}

/* Footer */
.brand-big-text::after{
    background-image: url("../image/cover-text.svg?v=5");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    font-size: 10rem;
    opacity: .125;
}


/* Breakpoints 768px */
@media (min-width: 768px) {
    /* Swiper js */
    .mega-sale-swiper{
        padding: 15px 0;
    }
    .mega-sale-swiper .swiper-slide {
        width: 1080px;
        height: 406px;
        overflow: hidden;
    }
    .mega-sale-swiper .swiper-slide::before{
        display: block;
    }
    .mega-sale-swiper .swiper-slide.swiper-slide-active::before{
        display: none!important;
    }
    .mega-sale-swiper .swiper-slide img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .mega-sale-swiper .swiper-button-prev {
        left: 9.5%; /* 调整左侧按钮位置 */
    }
    .mega-sale-swiper .swiper-button-next {
        right: 9.5%; /* 调整右侧按钮位置 */
    }
    .swiper-button-next, .swiper-button-prev{
        display: flex;
    }
    .swiper-button-next svg, .swiper-button-prev svg{
        width: 8px;
    }

    /* Header */
    /* Logo */
    .store-logo{
        height: 45px;
    }
    /* Search */
    .search-bar .search-input{
        min-width: 32rem;
    }

    /* Card */
    /* Cover media card */
    .cover-media-card{
        cursor: pointer;
        height: 200px;
    }
    /* News Card */
    .news-media-card{}
    .news-media-card .news-card-pic{
        min-height: 172px;
    }
}


/* Breakpoints 992 */
@media (min-width: 992px){
    /* margin */
    .mt-lg-6 {
        margin-top: 3.875rem !important;
    }
    .mt-lg-7 {
        margin-top: 4.875rem !important;
    }

    /* padding */
    .pb-lg-6{
        padding-bottom: 3.875rem !important;
    }
    .pb-lg-7{
        padding-bottom: 4.875rem !important;
    }
}


/* 只针对手机 */
@media (max-width: 767.98px) {
    /* Header */
    .main-nav .offcanvas-lg .offcanvas-body{
        /*background-color: var(--bs-body-bg-2) !important;*/
    }
    .offcanvas-lg .dropdown-menu{
        background-color: transparent !important;
    }
    .offcanvas-lg .dropdown-menu .category-item-wrap{
        max-height: initial !important;
        overflow-y: initial !important;
    }
    /* Top bar */
    /* Avatar */
    .topbar-avatar{
        width: 27px !important;
        height: 27px !important;
        padding-top: 0;
        padding-bottom: 0;
    }
    .topbar-avatar .img-box{
        width: 25px !important;
        height: 25px !important;
    }
    /* Cart */
    .topbar-cart{
        height: 27px !important;
        padding: 0 8px !important;
    }

    /* Sidebar */
    .sidebar{
        width: -webkit-fill-available !important;
    }

    /* Page Swiper Menu */
    .menuSwiper .link-items .link-icon{
        width: 40px;
        height: 40px;
    }

    /* 产品详情页加购和产品价格卡片 手机端固定在底部 */
    .phone-fixed-bottom-bar {
        box-shadow: 0 -5px 10px -5px rgba(0, 0, 0, 0.6);
        bottom: 0;
        position: fixed;
        z-index: 999;
        padding: 0;
    }
    .phone-fixed-bottom-bar .rounded-3{
        border-radius: 0 !important;
    }

    /* Product */
    .product-big-pic img{
        min-height: 115px;
    }
    .cover-media-card:hover .hover-show-more{
        bottom: -100% !important;
    }

    /* Footer */
    .phone-fixed-boot-bar{
        box-shadow: 0 -5px 10px -5px rgba(0, 0, 0, 0.6);
        bottom: 0;
        position: fixed;
        z-index: 999;
        padding: 0;
    }
    .brand-big-text::after{
        display: none;
    }
    .brand-big-text img{
        margin-bottom: 15px;
    }

    .offcanvas-lg .dropdown-menu {
        display: block;
        position: static;
        transform: none !important;
        box-shadow: none !important;
    }
}