.elementor-kit-9{--e-global-color-primary:#CC0000;--e-global-color-secondary:#000000;--e-global-color-text:#222222;--e-global-color-accent:#7A7A7A;--e-global-color-cb84166:#DD1D1D;--e-global-color-768452e:#666666;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Helvetica";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-size:42px;--e-global-typography-accent-font-weight:600;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-kit-9 h1{font-family:"Poppins", Sans-serif;font-size:46px;}.elementor-kit-9 h2{font-size:32px;}.elementor-kit-9 h3{font-family:"Poppins", Sans-serif;font-size:24px;}.elementor-kit-9 h4{font-family:"Poppins", Sans-serif;font-size:18px;}.elementor-kit-9 h5{font-size:14px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ================================================
   产品展示区背景切换 - 最终动画优化版
   【功能】鼠标悬停图标时，背景图快速淡入并伴随轻微放大效果
   【用法】1. 完全替换旧CSS。2. 确保Elementor中4个背景容器的CSS类仅为 bg-1, bg-2, bg-3, bg-4。
================================================ */

/* --- 1. 核心：所有背景层的绝对定位、默认状态与动画定义 --- */
/* 说明：此规则确保背景层准确定位，并设置了动画的初始状态（透明、轻微缩小）和过渡属性。*/
[class*="bg-"]:not(.premium-separator-container) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    /* 初始状态：完全透明且轻微缩小至98% */
    opacity: 0 !important;
    transform: scale(0.98) !important;
    /* 动画定义：透明度变化0.3秒，缩放变化0.4秒，均使用ease-out（快速开始，平滑结束） */
    transition: opacity 0.3s ease-out, transform 0.4s ease-out !important;
    pointer-events: none !important; /* 确保鼠标能穿透背景，点击到下方图标 */
    z-index: 1 !important;
    display: block !important;
}

/* --- 2. 激活状态：背景层完全显示并恢复至正常大小 --- */
/* 说明：当元素被添加 .active 类时，触发此状态，实现“淡入放大”动画。*/
.bg-1.active,
.bg-2.active,
.bg-3.active,
.bg-4.active {
    opacity: 1 !important;
    transform: scale(1) !important; /* 恢复至原始大小 */
}

/* --- 3. 绑定四张特定的背景图片 --- */
/* 注意：请确保下面四个URL与你的图片地址完全一致。*/
.bg-1 {
    background-image: url('https://hsttester.com/wp-content/uploads/2025/11/333.webp') !important;
}
.bg-2 {
    background-image: url('https://hsttester.com/wp-content/uploads/2025/11/444.webp') !important;
}
.bg-3 {
    background-image: url('https://hsttester.com/wp-content/uploads/2025/11/222.webp') !important;
}
.bg-4 {
    background-image: url('https://hsttester.com/wp-content/uploads/2025/11/111.webp') !important;
}

/* --- 4. 确保外层容器建立定位上下文（可选，用于解决某些布局问题） --- */
.elementor-element.e-con-full > .e-con-inner {
    position: relative !important;
    min-height: 600px; /* 区域高度，可根据实际效果调整 */
}

/* --- 5. 图标悬停动画 --- */
/* 说明：此规则控制图标自身的上浮动画，与背景切换独立。*/
.icon-btn {
    cursor: pointer !important;
    transition: transform 0.25s ease-out !important; /* 图标动画更快，响应灵敏 */
    position: relative !important;
    z-index: 2 !important; /* 确保图标显示在背景层之上 */
}
.icon-btn:hover {
    transform: translateY(-10px) !important;
}/* End custom CSS */