@import url('../static/icon/iconfont.css');

* {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: transparent !important;
}

/* 2. 彻底消除 PC 端与移动端点击按钮、链接、input 时的默认外轮廓聚焦框 (Focus Outline) */
a, button, input, textarea, select, [tabindex], div {
    outline: none !important;
    -webkit-appearance: none; /* 移除 iOS 原生控件默认外观 */
}

/* 3. 彻底禁用 iOS 长按链接或图片弹出的系统高亮气泡菜单 (保存图片/拷贝等) */
a, img, button {
    -webkit-touch-callout: none !important;
}

/* 4. 彻底防止快速连续点击或双击时触发的“系统文字选中高亮蓝色底纹” (允许用户输入的表单除外) */
*:not(input):not(textarea) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* WebKit 内核浏览器滚动条 */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background-color: #101111;
}
::-webkit-scrollbar-thumb {
    background: #ffffff;
    border-radius: 100vw;
}
::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 去除未被访问 a 标签的下划线 */
a:link, a:visited, a:hover, a:active, a:focus {
    text-decoration: none;
    color: #000;
}

/* =========================================================================
   【顶部导航栏 (Nav Container)】- 已彻底删除 ::before 遮罩
   ========================================================================= */
.nav_container {
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6vh 10vw 0;
    padding: 6svh 10vw 0;
    box-sizing: border-box;
}

.nav_container .menu_container {
    display: flex;
}

.nav_container .btn_item {
    font-size: 0.84vw;
    color: #fff;
    line-height: 1;
    border-radius: 999px;
    padding: 1.3svh 1.563vw;
    cursor: pointer;
    gap: 0.677vw;
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(2vw) saturate(180%);
    -webkit-backdrop-filter: blur(2vw) saturate(180%);
}

/* 🌟 中间太希 Logo：纯内容驱动垂直居中 */
.nav_container .logo_text_container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: fit-content;
    padding: 1.3vh 0;
    padding: 1.3svh 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: auto;
}

.nav_container .logo_text_container a {
    display: flex;
    align-items: center;
    line-height: 1;
}

/* 默认基底（深色底模式：白色 Logo） */
.nav_container .logo_text_container .txiconfont {
    font-size: 1.9vh;
    font-size: 1.9svh;
    color: #FFFFFF;
    display: block;
    line-height: 1;

    /* 🌟 1. 核心：精致黑色描边 */
    -webkit-text-stroke: 1px #0000003f;
    
    /* 🌟 2. 关键属性：保证描边画在文字字形外侧，绝对不侵蚀、不挤压文字原本的粗细 */
    /* paint-order: stroke fill; */

    /* 🌟 3. 可选：叠加一层微弱的环境投影，在复杂照片纹理上立体感更强 */
    /* filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); */
}
/* 🌟 算法探测到底色为浅色时，自动挂载该类名 */
.nav_container .logo_text_container.is_light_bg .txiconfont {
    color: #1A1A1A !important;
}

.nav_container .morebtn_container {
    display: flex;
    align-items: center;
    gap: 1.2vw;
}

.nav_container .morebtn_container .icon_btn {
    color: #D9D9D9;
    font-size: 0.9vw;
}

/* =========================================================================
   【底座固定 LOGO 与页脚】
   ========================================================================= */
.bottom_fixed_logo {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 15.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottom_fixed_logo::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 19vw;
    bottom: 0;
    background-color: #E8380D;
}

.bottom_fixed_logo .logo_text {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 9vw;
}

.total_color_container {
    background-color: #EEEFF1;
    border-radius: 0 0 3vw 3vw;
    /* overflow: hidden; */
}

#smooth-content {
    position: relative;
}

#smooth-content::after {
    content: "";
    display: block;
    width: 100%;
    height: 15.5vw; 
    background: transparent;
    pointer-events: none;
}

.footer_container {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.footer_container .footer_main {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7.6vw 0 2.6vw;
}

.footer_container .footer_main .width_limit {
    position: relative;
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer_container .footer_main .footer_content {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.footer_container .footer_main .footer_content .f_l .p_1 {
    font-weight: bold;
    font-size: 3.65vw;
    color: #1A1A1A;
    line-height: 1;
}

.footer_container .footer_main .footer_content .f_l .p_2 {
    font-size: 1.25vw;
    color: #808080;
    line-height: 1;
    margin: 1.75vw 0 2.3vw;
}

.footer_container .footer_main .footer_content .f_l .contact_btn {
    padding: 0.8vw 1.875vw 0.8vw 2.292vw;
    line-height: 1;
    background-color: #E8380D;
    display: inline-flex;
    align-items: center;
    color: #fff;
    border-radius: 999px;
    gap: 1.042vw;
    font-size: 0.94vw;
}

.footer_container .footer_main .footer_content .f_c {
    max-width: 16vw;
}

.footer_container .footer_main .footer_content .f_c .title {
    font-size: 0.84vw;
    color: #BFBFBF;
    line-height: 1;
    margin-bottom: 1.458vw;
}

.footer_container .footer_main .footer_content .f_c .contact_table {
    line-height: 1;
    display: grid;
    grid-template-columns: auto 1fr;                   
    row-gap: 1.385vw;
    align-items: baseline;
}

.footer_container .footer_main .footer_content .f_c .contact_table span {
    color: #808080;
    font-size: 0.84vw;
}
.footer_container .footer_main .footer_content .f_c .contact_table .address {
    line-height: 1.5;
}
.footer_container .footer_main .footer_content .f_c .contact_table a {
    color: #808080;
    font-size: 0.84vw;
}

.footer_container .footer_main .footer_content .f_c .contact_table a:nth-child(odd) {
    white-space: nowrap;
}

.footer_container .footer_main .footer_content .f_c .contact_table a:nth-child(even) {
    word-break: break-all;
    line-height: 1.5;
}

.footer_container .footer_main .footer_content .f_r .title {
    font-size: 0.84vw;
    color: #BFBFBF;
    line-height: 1;
    margin-bottom: 1.15vw;
}

.footer_container .footer_main .footer_content .f_r .icon_list {
    display: flex;
    gap: 1.46vw;
    margin-bottom: 1.9vw;
}

.footer_container .footer_main .footer_content .f_r .txiconfont {
    line-height: 1;
    font-size: 1.3vw;
    color: #8A8A8A;
}

.footer_container .footer_main .footer_content .f_r .store_list {
    display: flex;
    flex-direction: column;
    gap: 0.625vw;
}

.footer_container .footer_main .footer_content .f_r .store_list .item {
    display: flex;
    align-items: center;
    gap: 0.625vw;
    line-height: 1;
}

.footer_container .footer_main .footer_content .f_r .store_list .item .txiconfont {
    line-height: 1;
    color: #E6212B;
}

.footer_container .footer_main .footer_content .f_r .store_list .item a {
    color: #808080;
}

.tmall_logo {
    display: inline-block;
    width: 1.3vw;
    height: 1.3vw;
    background: url('../static/svg/tmall.svg') no-repeat center center;
    background-size: contain;
    vertical-align: middle;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.footer_container .footer_main .page_footer {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: max(13px, 0.73vw);
    margin-top: 10vw;
}

.footer_container .footer_main .page_footer a {
    color: #666666;
}

/* =========================================================================
   【通用按钮 (tx_more_btn)】
   ========================================================================= */
.tx_more_btn {
    --dot-size: 0.25vw;
    --dot-color: #E8380D;
    --dot-gap: 0.15vw;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: var(--dot-gap);
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;

    transition: transform 0.35s var(--ease);
}

.tx_more_btn::before {
    content: "";
    position: absolute;
    top: 0;      /* 🌟 核心兼容：百度浏览器旧内核降级兜底，严防红点错位漂移 */
    left: 0;
    width: 100%;
    height: 100%;
    inset: 0;
    pointer-events: none;

    background-image:
        radial-gradient(circle, var(--dot-color) 48%, transparent 52%),
        radial-gradient(circle, var(--dot-color) 48%, transparent 52%),
        radial-gradient(circle, var(--dot-color) 48%, transparent 52%),
        radial-gradient(circle, var(--dot-color) 48%, transparent 52%);
    background-size: var(--dot-size) var(--dot-size);
    background-position: left top, right top, left bottom, right bottom;
    background-repeat: no-repeat;

    transition: all 0.35s var(--ease);

    /* transition:
        inset 0.35s var(--ease),
        filter 0.35s var(--ease); */
}

.tx_more_btn .bg {
    --mx: 50%;
    --my: 50%;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 1vw 3.6vw;
    border-radius: 0.5vw;
    box-sizing: border-box;

    font-size: 0.94vw;
    line-height: 1;
    font-weight: 500;
    color: #101111;
    white-space: nowrap;

    background-color: #D8D9DA;
    background-image: radial-gradient(
        circle,
        #ffffff85 0.03vw,
        transparent 0.05vw
    );
    background-size: 0.2vw 0.2vw;
    background-position: center;

    transition:
        background-color 0.4s var(--ease),
        color 0.4s var(--ease),
        box-shadow 0.4s var(--ease);
}

.tx_more_btn .bg::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    inset: 0;
    pointer-events: none;

    background: linear-gradient(
        110deg,
        transparent 25%,
        rgba(232, 56, 13, 0.16) 40%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(232, 56, 13, 0.16) 60%,
        transparent 75%
    );

    transform: translateX(-120%);
}

.tx_more_btn .bg::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    inset: 0;
    pointer-events: none;
    opacity: 0;

    background: radial-gradient(
        circle at var(--mx) var(--my),
        rgba(232, 56, 13, 0.5),
        rgba(232, 56, 13, 0.12) 35%,
        transparent 70%
    );

    transition: opacity 0.35s ease;
}

/* @media (hover: hover) { */
.tx_more_btn:hover {
    transform: translateY(-0.1vw);
}

/* 🌟 方案 B：修复单向左上偏斜，让 4 个点真正实现 360 度对称向外微弹扩散 */
.tx_more_btn:hover::before {
    top: -0.12vw;
    left: -0.12vw;
    width: calc(100% + 0.24vw);
    height: calc(100% + 0.24vw);
    filter: drop-shadow(0 0 0.25vw rgba(232, 56, 13, 0.8));
}

.tx_more_btn:hover .bg {
    background-color: #101111 !important;
    color: #fff !important;
    box-shadow:
        0 0.4vw 1.2vw rgba(16, 17, 17, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
}

.tx_more_btn:hover .bg::before {
    transform: translateX(120%);
    transition: transform 0.7s var(--ease);
}

.tx_more_btn:hover .bg::after {
    opacity: 1;
}
/* } */

.tx_more_btn:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.12s;
}

.tx_more_btn .btn-ripple {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;

    background: radial-gradient(
        circle,
        rgba(232, 56, 13, 0.08) 35%,
        rgba(232, 56, 13, 0.45) 65%,
        transparent 72%
    );

    animation: btn-ripple 0.65s ease-out forwards;
}

@keyframes btn-ripple {
    from {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tx_more_btn,
    .tx_more_btn::before,
    .tx_more_btn .bg,
    .tx_more_btn .bg::before,
    .tx_more_btn .bg::after {
        transition: none !important;
    }

    .tx_more_btn .btn-ripple {
        display: none;
    }
}

@media (pointer: coarse) {
    #webgl_container,
    .webgl_container,
    #webgl_container canvas,
    .webgl_container canvas {
        pointer-events: none !important;
        touch-action: pan-y !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }
}

/* =========================================================================
   【iOS 灵动岛 (Dynamic Island) 完整导航系统 - 终极丝滑修复版】
   ========================================================================= */

/* 灵动岛外壳容器 (纯 vw / svh 驱动 + 丝滑流体阻尼曲线) */
.dynamic_island {
    position: relative;
    z-index: 100;
    width: 7.2vw;
    border-radius: 2vw;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(2vw) saturate(180%);
    -webkit-backdrop-filter: blur(2vw) saturate(180%);
    box-sizing: border-box;
    overflow: hidden;
    transform: translateZ(0);
    will-change: width, border-radius;
    transition: 
        width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-radius 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.35s ease;
}

/* 顶部操作栏 */
.dynamic_island .island_header {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.3vh 1.2vw;
    padding: 1.3svh 1.2vw;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    transition: padding .4s;
}
.dynamic_island.expanded .island_header{
    padding: 2vh 1.2vw;
    padding: 2svh 1.2vw;
    /* background: rgba(0, 0, 0, 0.1); */
}
/* 🌟 核心修复 1：Menu 文本折叠/展开绝不用 display:none，全程 opacity + transform 极速丝滑过渡 */
.dynamic_island .collapsed_label {
    position: relative;
    z-index: 1;
    font-size: 0.84vw;
    color: #fff;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    /* 收起时：稍微滞后淡入，给外壳留足回弹空间 */
    transition: 
        opacity 0.25s ease 0.12s, 
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
        visibility 0.25s ease 0.12s;
}

.dynamic_island.expanded .collapsed_label {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-0.8vw);
    pointer-events: none;
    /* 展开时：立刻淡出 */
    transition: 
        opacity 0.18s ease, 
        transform 0.2s ease,
        visibility 0.18s ease;
}

/* 🌟 核心修复 2：导航列表在折叠时严格 pointer-events: none + visibility: hidden，绝不遮盖胶囊，彻底杜绝误触“首页”！ */
.dynamic_island .island_nav_list {
    position: absolute;
    left: 1.2vw;
    top: 50%;
    transform: translate(-0.8vw, -50%);
    display: flex;
    align-items: center;
    gap: 0.8vw;
    width: max-content;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* 🌟 折叠时彻底穿透，绝不让鼠标点到“首页” */
    
    /* 收起时快速淡出 */
    transition: 
        opacity 0.18s ease,
        transform 0.2s ease,
        visibility 0.18s ease;
}

/* 展开时渐进淡入 */
.dynamic_island.expanded .island_nav_list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* 🌟 展开后才激活点击 */
    transform: translate(0, -50%);
    transition: 
        opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1) 0.14s,
        transform 0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.14s,
        visibility 0.32s ease 0.14s;
}
/* 🌟 让“首页”的文本内容区严格等于 4 个汉字宽度 (4em)，并保持在内部居中 */
.dynamic_island .island_nav_list .nav_item.first_item {
    box-sizing: content-box;
    min-width: 4em;             /* 4em = 严格的 4 个汉字物理宽度 */
    justify-content: center;    /* 两个字在 4 字空间内水平居中 */
}
/* 🌟 核心修复 3：关闭图标按钮在折叠时紧挨 Menu，展开时随弹性动画平滑滑行到最右侧，绝不消失！ */
.dynamic_island .island_action_btn {
    position: relative;
    z-index: 2;
    margin-left: auto;
    /* width: 1.6vw;
    height: 1.6vw; */
    /* border-radius: 100vw; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    will-change: transform;
    transition: 
        transform 2.5s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.25s ease;
}
.dynamic_island .island_action_btn::after{
    content: "";
    position: absolute;
    width: 1.6vw;
    height: 1.6vw;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    opacity: 0;
    transition: opacity 0.25s;
}
.dynamic_island .island_action_btn:hover .txiconfont{
    transform: rotate(90deg);
}
.dynamic_island .island_action_btn .txicon-x-logo {
    font-size: 0.75vw;
    color: #FFFFFF;
    transition: transform 0.4s ease;
}

.dynamic_island .island_action_btn:hover::after{
    opacity: 1;
}

.dynamic_island.expanded .island_action_btn {
    transform: rotate(360deg);
    background: rgba(255, 255, 255, 0.1);
}

/* 展开态：读取由 JS 算出的内容自适应变量 */
.dynamic_island.expanded {
    width: var(--island-expanded-width, 48vw);
    border-radius: 1.5vw;
}
.dynamic_island.sub_open {
    border-radius: 1.8vw;
}
/* =========================================================================
   【右下角高光倒角】：支持圆角保持的 1px 渐变流光边框 (Mask 镂空法)
   ========================================================================= */

.dynamic_island::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 0 1.8vw 1.8vw 0; /* 严格保留你的右下圆角 */
    pointer-events: none;
    box-sizing: border-box;

    /* 🌟 1. 仅在右边和底边留出 1px 的物理间隙，其余两边为 0 */
    padding: 0 2px 2px 0;

    background: radial-gradient(
        circle at 100% 100%,
        rgba(255, 255, 255, 0.6) 0%,
        transparent 30%
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* 二级菜单展开时，渐变高光边框丝滑浮现 */
.dynamic_island.sub_open::after {
    opacity: 1;
}
/* 导航项标签项样式 */
.dynamic_island .island_nav_list .nav_item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35vw;
    font-size: 0.84vw;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    padding: 0.44vw 1.4vw;
    border-radius: 100vw;
    white-space: nowrap;
    background: transparent;
    transition: color 0.2s ease, background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dynamic_island .island_nav_list .nav_item:hover,
.dynamic_island .island_nav_list .nav_item.hover_active {
    background-color: #E8380D;
    color: #FFFFFF;
    font-weight: 500;
}

/* 箭头图标 */
.dynamic_island .island_nav_list .nav_item .arrow {
    display: inline-block;
    vertical-align: middle;
    font-size: 0.55vw;
    line-height: 1;
    transform-origin: 50% 40%;
    transform: translateZ(0) rotate(0deg);
    will-change: transform;
    -webkit-font-smoothing: antialiased;
    transition: transform 0.28s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.dynamic_island .island_nav_list .nav_item:hover .arrow,
.dynamic_island .island_nav_list .nav_item.hover_active .arrow {
    transform: translateZ(0) rotate(-180deg);
}

/* =========================================================================
   【二级下拉内容区域】：高度平滑形变 (Height Morphing) 与图层交叉融解
   ========================================================================= */

.dynamic_island .island_dropdown_container {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    will-change: height, opacity;
    transition: 
        height 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.25s ease;
}

.dynamic_island.sub_open .island_dropdown_container {
    opacity: 1;
    pointer-events: auto;
}

.dynamic_island .island_dropdown_container .sub_panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* padding: 0 1.2vw 1.2vw 1.2vw; */
    padding: 1.2vw;
    box-sizing: border-box;
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.96) translateY(0.6vh);
    transform: scale(0.96) translateY(0.6svh);
    filter: blur(4px);
    transition: 
        opacity 0.22s ease,
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.22s ease,
        visibility 0.22s;
}

.dynamic_island .island_dropdown_container .sub_panel.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1) translateY(0);
    filter: blur(0px);
    
    transition: 
        opacity 0.3s ease 0.04s,
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.04s,
        filter 0.3s ease 0.04s;
}

/* 2×2 卡片网格 */
.product_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7vh;
    gap: 0.7svh;
    width: 100%;
}

.product_card {
    position: relative;
    height: 11.5vw;
    border-radius: 1.1vw;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 240, 242, 0.8) 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    box-sizing: border-box;
    box-shadow: 0 0.4vw 1.2vw rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease;
}



.product_card .card_title {
    font-size: 0.94vw;
    color: #1A1A1A;
    margin-top: 1.3vw;
}

.product_card .card_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    transition: scale .4s;
}
.product_card:hover .card_img{
    scale: 1.05;
}
/* 列表型通用二级菜单 */
.simple_link_list {
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
    padding: 0.6vw 0;
}

.simple_link_list .link_item {
    font-size: 0.88vw;
    color: #D9D9D9;
    padding: 0.4vw 0.8vw;
    border-radius: 0.5vw;
    transition: background 0.2s ease, color 0.2s ease;
}

.simple_link_list .link_item:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}


/* =========================================================================
   【响应式设备隔离显隐控制】
   ========================================================================= */
@media (min-width: 769px) {
    .mobile_only {
        display: none !important;
    }
}

@media (max-width: 996px) {
    html, body {
        /* 启用原生触屏弹性惯性滚动 */
        -webkit-overflow-scrolling: touch;
        /* 阻止 Safari 滚动时视口反弹误触发重排 */
        overscroll-behavior-y: none;
    }
    /* 确保所有被 pin 固定的容器在 GPU 中绝对平稳 */
    .pin-spacer {
        pointer-events: none;
    }
    .pin-spacer > * {
        pointer-events: auto;
    }

    .desktop_only {
        display: none !important;
    }

    .tx_more_btn{
        --dot-size: 0.488vh;
        /* --dot-size: 0.488svh; */
        --dot-gap: 0.244vh;
        /* --dot-gap: 0.244svh; */
    }
    .tx_more_btn .bg{
        font-size: 1.95vh;
        font-size: 1.95svh;
        padding: 2.3vh 7.2vh;
        padding: 2.3svh 7.2svh;
        border-radius: 0.976vh;
        border-radius: 0.976svh;
        background-size: 0.49vh 0.49vh;
        background-size: 0.49svh 0.49svh;
        background-image: radial-gradient(circle, #ffffff85 0.06vh, transparent 0.2vh);
        background-image: radial-gradient(circle, #ffffff85 0.06svh, transparent 0.2svh);
    }
    .nav_container {
        display: none !important;
    }

    .footer_container {
        background-color: #EEEFF1;
    }

    .footer_container .footer_main {
        padding: 8vw 0 4vw !important;
    }

    .footer_container .footer_main .width_limit {
        width: 88% !important;
    }

    .footer_container .footer_main .footer_content {
        flex-direction: column !important;
        gap: 6vw;
    }

    /* 品牌标语与醒目联系我们按钮 */
    .footer_container .footer_main .footer_content .f_l .p_1 {
        font-size: 7.2vw !important;
        line-height: 1.25 !important;
    }
    .footer_container .footer_main .footer_content .f_l .p_1_m {
        font-size: 9.2vw;
        font-weight: bold;
    }
    .footer_container .footer_main .footer_content .f_l .p_2 {
        font-size: 4.6vw !important;
        line-height: 1.6 !important;
        margin: 2vw 0 5vw !important;
    }

    .footer_container .footer_main .footer_content .f_l .contact_btn {
        padding: 4.6vw 8.7vw !important;
        gap: 4.1vw;
        font-size: 3.8vw !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        font-weight: bold;
    }

    /* 联系方式 */
    .footer_container .footer_main .footer_content .f_c {
        max-width: 100% !important;
    }

    .footer_container .footer_main .footer_content .f_c .title,
    .footer_container .footer_main .footer_content .f_r .title {
        font-size: 3.4vw !important;
        margin-bottom: 2vw !important;
        color: #888888 !important;
    }

    .footer_container .footer_main .footer_content .f_c .contact_table {
        gap: 1.5vw !important;
    }

    .footer_container .footer_main .footer_content .f_c .contact_table span,
    .footer_container .footer_main .footer_content .f_c .contact_table a {
        font-size: 3.4vw !important;
        color: #666666 !important;
        line-height: 1.6 !important;
    }

    /* 社交媒体与商城图标横排 */
    .footer_container .footer_main .footer_content .f_r {
        display: flex !important;
        gap: 12vw !important;
        align-items: flex-start !important;
    }

    .footer_container .footer_main .footer_content .f_r .icon_list {
        margin-bottom: 0 !important;
        gap: 3.5vw !important;
    }

    .footer_container .footer_main .footer_content .f_r .txiconfont {
        font-size: 4.8vw !important;
    }

    .footer_container .footer_main .footer_content .f_r .store_list {
        flex-direction: row !important;
        gap: 3.5vw !important;
    }

    .footer_container .footer_main .footer_content .f_r .store_list .item a {
        display: none !important; /* 效果图仅展示两个小 logo 图标 */
    }

    .footer_container .footer_main .footer_content .f_r .store_list .tmall_logo {
        width: 4.8vw !important;
        height: 4.8vw !important;
    }

    /* 备案信息纵向排布 */
    .footer_container .footer_main .page_footer {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1.2vw !important;
        margin-top: 6vw !important;
        font-size: 2.8vw !important;
    }

    .total_color_container{
        border-radius: 0 0 6vw 6vw;
    }
    .bottom_fixed_logo{
        height: 30vw;
    }
    #smooth-content::after{
        height: 30vw;
    }
    .bottom_fixed_logo::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 40vh;
        height: 40lvh;
        bottom: 0;
        background-color: #E8380D;
    }
}