/* 基础重置 */
        * {
            margin: 0; /* 清除所有元素的外边距 */
            padding: 0; /* 清除所有元素的内边距 */
            box-sizing: border-box; /* 设置盒模型为 border-box */
        }

        /* 组件容器 */
        .recycling-slider-component {
            width: 100%; /* 设置组件容器的宽度为 100% */
            padding: 40px 0; /* 设置组件容器的上下内边距为 40px，左右内边距为 0 */
            overflow-x: hidden; /* 隐藏水平方向的溢出内容 */
            position: relative; /* 设置组件容器的定位为相对定位 */
            border-radius: 0; /* 去掉背景四个角的弧度 */
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); /* 设置组件容器的阴影 */
            margin: 0 auto; /* 去掉顶部间隙，将组件容器水平居中 */
            max-width: 100%; /* 设置组件容器的最大宽度为 100% */
            background-size: cover; /* 设置背景图片的大小为覆盖整个容器 */
            background-position: center; /* 设置背景图片的位置为居中 */
            background-image: url('../img/bg/background_134.webp'); /* 设置背景图片 */
            position: relative; /* 设置组件容器的定位为相对定位 */
        }

        /* 背景遮罩 */
        .recycling-slider-component::before {
            content: ''; /* 插入空内容 */
            position: absolute; /* 设置背景遮罩的定位为绝对定位 */
            top: 0; /* 设置背景遮罩的顶部位置为 0 */
            left: 0; /* 设置背景遮罩的左侧位置为 0 */
            width: 100%; /* 设置背景遮罩的宽度为 100% */
            height: 100%; /* 设置背景遮罩的高度为 100% */
            background: rgba(0, 0, 0, 0.38); /* 设置背景遮罩的颜色和透明度 */
            border-radius: 0; /* 去掉背景遮罩四个角的弧度 */
            z-index: 1; /* 设置背景遮罩的层叠顺序为 1 */
        }

        /* 多层圆圈背景 */
        .circles {
            position: absolute; /* 设置多层圆圈背景的定位为绝对定位 */
            top: 0; /* 设置多层圆圈背景的顶部位置为 0 */
            left: 0; /* 设置多层圆圈背景的左侧位置为 0 */
            width: 100%; /* 设置多层圆圈背景的宽度为 100% */
            height: 100%; /* 设置多层圆圈背景的高度为 100% */
            overflow: hidden; /* 隐藏多层圆圈背景的溢出内容 */
            z-index: 2; /* 设置多层圆圈背景的层叠顺序为 2 */
            pointer-events: none; /* 设置多层圆圈背景不响应鼠标事件 */
        }

        .circles div {
            position: absolute; /* 设置圆圈元素的定位为绝对定位 */
            display: block; /* 设置圆圈元素的显示方式为块级元素 */
            border-radius: 50%; /* 设置圆圈元素的圆角半径为 50%，使其成为圆形 */
            background: rgba(255, 255, 255, 0.174); /* 设置圆圈元素的背景颜色和透明度 */
            animation: animate 25s linear infinite; /* 设置圆圈元素的动画效果 */
            bottom: -150px; /* 设置圆圈元素的底部位置为 -150px */
            pointer-events: none; /* 设置圆圈元素不响应鼠标事件 */
        }

        @keyframes animate {
            0% {
                transform: translateY(0) rotate(0deg); /* 设置动画开始时的位移和旋转角度 */
                opacity: 1; /* 设置动画开始时的透明度为 1 */
            }
            100% {
                transform: translateY(-1000px) rotate(720deg); /* 设置动画结束时的位移和旋转角度 */
                opacity: 0; /* 设置动画结束时的透明度为 0 */
            }
        }

        /* 容器 */
        .container1 {
            width: 100%; /* 设置容器的宽度为 100% */
            max-width: 100%; /* 设置容器的最大宽度为 100% */
            text-align: center; /* 设置容器内文本的对齐方式为居中 */
            padding: 20px; /* 设置容器的内边距为 20px */
            z-index: 10; /* 设置容器的层叠顺序为 10 */
            margin: 0 auto; /* 将容器水平居中 */
            position: relative; /* 设置容器的定位为相对定位 */
        }

        .header {
            margin-bottom: 40px; /* 设置头部的底部外边距为 40px */
            animation: fadeInDown 1s ease; /* 设置头部的动画效果 */
        }

        h1 {
            color: white; /* 设置标题的颜色为白色 */
            font-size: 2.6rem; /* 设置标题的字体大小为 2.6rem */
            margin-bottom: 15px; /* 设置标题的底部外边距为 15px */
            text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3); /* 设置标题的文本阴影 */
            background: linear-gradient(to right, #fff, #a8edea); /* 设置标题的背景为线性渐变 */
            -webkit-background-clip: text; /* 设置背景裁剪方式为文本 */
            -webkit-text-fill-color: transparent; /* 设置文本填充颜色为透明 */
            position: relative; /* 设置标题的定位为相对定位 */
            display: inline-block; /* 设置标题的显示方式为内联块级元素 */
        }

        h1::after {
            content: ''; /* 插入空内容 */
            position: absolute; /* 设置标题伪元素的定位为绝对定位 */
            bottom: -10px; /* 设置标题伪元素的底部位置为 -10px */
            left: 50%; /* 设置标题伪元素的左侧位置为 50% */
            transform: translateX(-50%); /* 将标题伪元素水平居中 */
            width: 100px; /* 设置标题伪元素的宽度为 100px */
            height: 4px; /* 设置标题伪元素的高度为 4px */
            background: linear-gradient(to right, var(--primary-color), var(--primary-color)); /* 设置标题伪元素的背景为线性渐变 */
            border-radius: 2px; /* 设置标题伪元素的圆角半径为 2px */
        }

        .subtitle {
            color: rgba(255, 255, 255, 0.85); /* 设置副标题的颜色和透明度 */
            font-size: 1.1rem; /* 设置副标题的字体大小为 1.1rem */
            max-width: 700px; /* 设置副标题的最大宽度为 700px */
            margin: 20px auto 30px; /* 设置副标题的外边距 */
            line-height: 1.6; /* 设置副标题的行高为 1.6 */
            font-weight: 300; /* 设置副标题的字体粗细为 300 */
        }

        /* 幻灯片容器 */
        .slider {
            width: 100%; /* 设置幻灯片容器的宽度为 100% */
            height: 450px; /* 设置幻灯片容器的高度为 450px */
            border-radius: 20px; /* 设置幻灯片容器的圆角半径为 20px */
            position: relative; /* 设置幻灯片容器的定位为相对定位 */
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35); /* 设置幻灯片容器的阴影 */
            perspective: 2000px; /* 设置幻灯片容器的透视效果 */
            background: rgba(0, 0, 0, 0.15); /* 设置幻灯片容器的背景颜色和透明度 */
            margin-bottom: 30px; /* 设置幻灯片容器的底部外边距为 30px */
            overflow: hidden; /* 隐藏幻灯片容器的溢出内容 */
        }

        /* 幻灯片 */
        .slides {
            position: relative; /* 设置幻灯片的定位为相对定位 */
            width: 100%; /* 设置幻灯片的宽度为 100% */
            height: 100%; /* 设置幻灯片的高度为 100% */
            z-index: 2; /* 设置幻灯片的层叠顺序为 2 */
        }

        .slide {
            position: absolute; /* 设置幻灯片的定位为绝对定位 */
            top: 0; /* 设置幻灯片的顶部位置为 0 */
            left: 0; /* 设置幻灯片的左侧位置为 0 */
            width: 100%; /* 设置幻灯片的宽度为 100% */
            height: 100%; /* 设置幻灯片的高度为 100% */
            display: flex; /* 设置幻灯片的显示方式为弹性布局 */
            opacity: 0; /* 设置幻灯片的初始透明度为 0 */
            transform: translateX(50px) scale(0.95); /* 设置幻灯片的初始位移和缩放比例 */
            transition: all 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 设置幻灯片的过渡效果 */
            pointer-events: none; /* 设置幻灯片不响应鼠标事件 */
            padding: 25px; /* 设置幻灯片的内边距为 25px */
        }

        /* 磨砂玻璃效果 */
        .glass-content {
            background: rgba(255, 255, 255, 0.12); /* 设置磨砂玻璃效果的背景颜色和透明度 */
            backdrop-filter: blur(18px); /* 设置磨砂玻璃效果的模糊程度 */
            -webkit-backdrop-filter: blur(18px); /* 为 Safari 浏览器添加前缀 */
            border: 1px solid rgba(255, 255, 255, 0.18); /* 设置磨砂玻璃效果的边框 */
            flex: 1; /* 设置磨砂玻璃效果的弹性系数为 1 */
            padding: 25px; /* 设置磨砂玻璃效果的内边距为 25px */
            display: flex; /* 设置磨砂玻璃效果的显示方式为弹性布局 */
            flex-direction: column; /* 设置磨砂玻璃效果的弹性布局方向为垂直 */
            justify-content: center; /* 设置磨砂玻璃效果的内容垂直居中 */
            text-align: left; /* 设置磨砂玻璃效果内文本的对齐方式为左对齐 */
            border-radius: 20px; /* 设置磨砂玻璃效果的圆角半径为 20px */
            margin: 15px; /* 设置磨砂玻璃效果的外边距为 15px */
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* 设置磨砂玻璃效果的阴影 */
            transition: transform 0.4s ease, box-shadow 0.4s ease; /* 设置磨砂玻璃效果的过渡效果 */
        }

        .glass-content:hover {
            transform: translateY(-8px); /* 设置鼠标悬停时磨砂玻璃效果的位移 */
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3); /* 设置鼠标悬停时磨砂玻璃效果的阴影 */
        }

        .text-content {
            flex: 1; /* 设置文本内容的弹性系数为 1 */
            color: white; /* 设置文本内容的颜色为白色 */
            padding-right: 15px; /* 设置文本内容的右侧内边距为 15px */
        }

        .image-content {
            flex: 1; /* 设置图片内容的弹性系数为 1 */
            display: flex; /* 设置图片内容的显示方式为弹性布局 */
            justify-content: center; /* 设置图片内容的内容水平居中 */
            align-items: center; /* 设置图片内容的内容垂直居中 */
            overflow: hidden; /* 隐藏图片内容的溢出内容 */
            border-radius: 15px; /* 设置图片内容的圆角半径为 15px */
            position: relative; /* 设置图片内容的定位为相对定位 */
            background: rgba(0, 0, 0, 0.2); /* 设置图片内容的背景颜色和透明度 */
        }

        .image-content img {
            width: 100%; /* 设置图片的宽度为 100% */
            height: 100%; /* 设置图片的高度为 100% */
            object-fit: cover; /* 设置图片的填充方式为覆盖 */
            border-radius: 15px; /* 设置图片的圆角半径为 15px */
            transition: transform 0.7s ease; /* 设置图片的过渡效果 */
        }

        .image-content:hover img {
            transform: scale(1.05); /* 设置鼠标悬停时图片的缩放比例 */
        }

        .slide h2 {
            font-size: 2rem; /* 设置幻灯片标题的字体大小为 2rem */
            margin-bottom: 20px; /* 设置幻灯片标题的底部外边距为 20px */
            color: #fff; /* 设置幻灯片标题的颜色为白色 */
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* 设置幻灯片标题的文本阴影 */
            position: relative; /* 设置幻灯片标题的定位为相对定位 */
            padding-bottom: 12px; /* 设置幻灯片标题的底部内边距为 12px */
        }

        .slide h2::after {
            content: ''; /* 插入空内容 */
            position: absolute; /* 设置幻灯片标题伪元素的定位为绝对定位 */
            bottom: 0; /* 设置幻灯片标题伪元素的底部位置为 0 */
            left: 0; /* 设置幻灯片标题伪元素的左侧位置为 0 */
            width: 70px; /* 设置幻灯片标题伪元素的宽度为 70px */
            height: 4px; /* 设置幻灯片标题伪元素的高度为 4px */
            background: linear-gradient(to right, var(--primary-color), var(--primary-color)); /* 设置幻灯片标题伪元素的背景为线性渐变 */
            border-radius: 2px; /* 设置幻灯片标题伪元素的圆角半径为 2px */
        }

        .slide p {
            font-size: 1rem; /* 设置幻灯片段落的字体大小为 1rem */
            line-height: 1.5; /* 设置幻灯片段落的行高为 1.5 */
            color: rgba(255, 255, 255, 0.92); /* 设置幻灯片段落的颜色和透明度 */
            margin-bottom: 18px; /* 设置幻灯片段落的底部外边距为 18px */
            max-width: 95%; /* 设置幻灯片段落的最大宽度为 95% */
        }

        .tag {
            display: inline-block; /* 设置标签的显示方式为内联块级元素 */
            background: rgba(255, 255, 255, 0.12); /* 设置标签的背景颜色和透明度 */
            backdrop-filter: blur(5px); /* 设置标签的模糊程度 */
            padding: 7px 18px; /* 设置标签的内边距 */
            border-radius: 30px; /* 设置标签的圆角半径为 30px */
            font-size: 0.95rem; /* 设置标签的字体大小为 0.95rem */
            margin-right: 10px; /* 设置标签的右侧外边距为 10px */
            margin-bottom: 10px; /* 设置标签的底部外边距为 10px */
            color: white; /* 设置标签的颜色为白色 */
            border: 1px solid rgba(255, 255, 255, 0.18); /* 设置标签的边框 */
            transition: all 0.3s ease; /* 设置标签的过渡效果 */
        }

        .tag:hover {
            background: rgba(255, 255, 255, 0.2); /* 设置鼠标悬停时标签的背景颜色和透明度 */
            transform: translateY(-3px); /* 设置鼠标悬停时标签的位移 */
            cursor: pointer; /* 设置鼠标悬停时标签的光标样式为指针 */
        }

        /* 功能卡片导航 - 无缝连接设计 */
        .features {
            display: flex; /* 设置功能卡片导航的显示方式为弹性布局 */
            flex-wrap: wrap; /* 设置功能卡片导航的弹性布局换行方式为换行 */
            position: relative; /* 设置功能卡片导航的定位为相对定位 */
            z-index: 10; /* 设置功能卡片导航的层叠顺序为 10 */
            max-width: 1000px; /* 设置功能卡片导航的最大宽度为 1000px */
            margin: 0 auto; /* 将功能卡片导航水平居中 */
            padding: 0; /* 设置功能卡片导航的内边距为 0 */
            border-radius: 16px; /* 设置功能卡片导航的圆角半径为 16px */
            overflow: hidden; /* 隐藏功能卡片导航的溢出内容 */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* 设置功能卡片导航的阴影 */
        }

        .feature-card {
            background: rgba(255, 255, 255, 0.08); /* 设置功能卡片的背景颜色和透明度 */
            backdrop-filter: blur(12px); /* 设置功能卡片的模糊程度 */
            padding: 15px; /* 设置功能卡片的内边距为 15px */
            text-align: center; /* 设置功能卡片内文本的对齐方式为居中 */
            border: 1px solid rgba(255, 255, 255, 0.15); /* 设置功能卡片的边框 */
            transition: all 0.4s ease; /* 设置功能卡片的过渡效果 */
            cursor: pointer; /* 设置功能卡片的光标样式为指针 */
            position: relative; /* 设置功能卡片的定位为相对定位 */
            overflow: hidden; /* 隐藏功能卡片的溢出内容 */
            display: flex; /* 设置功能卡片的显示方式为弹性布局 */
            flex-direction: column; /* 设置功能卡片的弹性布局方向为垂直 */
            justify-content: center; /* 设置功能卡片的内容垂直居中 */
            align-items: center; /* 设置功能卡片的内容水平居中 */
            flex: 1; /* 设置功能卡片的弹性系数为 1 */
            min-width: 0; /* 设置功能卡片的最小宽度为 0 */
        }

        .feature-card {
            margin: 0; /* 设置功能卡片的外边距为 0 */
            border-radius: 0; /* 去掉功能卡片四个角的弧度 */
        }

        .feature-card::before {
            content: ''; /* 插入空内容 */
            position: absolute; /* 设置功能卡片伪元素的定位为绝对定位 */
            top: 0; /* 设置功能卡片伪元素的顶部位置为 0 */
            left: 0; /* 设置功能卡片伪元素的左侧位置为 0 */
            width: 100%; /* 设置功能卡片伪元素的宽度为 100% */
            height: 100%; /* 设置功能卡片伪元素的高度为 100% */
            background: linear-gradient(to right, #e39c20, #e39c20); /* 设置功能卡片伪元素的背景为线性渐变 */
            opacity: 0; /* 设置功能卡片伪元素的初始透明度为 0 */
            transition: opacity 0.4s ease; /* 设置功能卡片伪元素的过渡效果 */
            z-index: -1; /* 设置功能卡片伪元素的层叠顺序为 -1 */
        }

        .feature-card:hover,
        .feature-card.active-hover {
            background: rgba(255, 255, 255, 0.15); /* 设置鼠标悬停或激活时功能卡片的背景颜色和透明度 */
        }

        .feature-card:hover::before,
        .feature-card.active-hover::before {
            opacity: 0.8; /* 设置鼠标悬停或激活时功能卡片伪元素的透明度为 0.8 */
        }

        .feature-card h3 {
            color: white; /* 设置功能卡片标题的颜色为白色 */
            margin: 10px 0 5px; /* 设置功能卡片标题的外边距 */
            font-size: 1.1rem; /* 设置功能卡片标题的字体大小为 1.1rem */
            transition: all 0.4s ease; /* 设置功能卡片标题的过渡效果 */
            font-weight: 500; /* 设置功能卡片标题的字体粗细为 500 */
        }

        .feature-card:hover h3,
        .feature-card.active-hover h3 {
            color: white; /* 设置鼠标悬停或激活时功能卡片标题的颜色为白色 */
        }

        .feature-card p {
            color: rgba(255, 255, 255, 0.85); /* 设置功能卡片段落的颜色和透明度 */
            font-size: 0.82rem; /* 设置功能卡片段落的字体大小为 0.82rem */
            transition: all 0.4s ease; /* 设置功能卡片段落的过渡效果 */
            line-height: 1.4; /* 设置功能卡片段落的行高为 1.4 */
            margin: 0; /* 设置功能卡片段落的外边距为 0 */
        }

        .feature-card:hover p,
        .feature-card.active-hover p {
            color: white; /* 设置鼠标悬停或激活时功能卡片段落的颜色为白色 */
        }

        /* 卡片内部圆点装饰 - 改为三层圆环 */
        .feature-dot {
            width: 24px; /* 设置卡片内部圆点装饰的宽度为 24px */
            height: 24px; /* 设置卡片内部圆点装饰的高度为 24px */
            display: flex; /* 设置卡片内部圆点装饰的显示方式为弹性布局 */
            justify-content: center; /* 设置卡片内部圆点装饰的内容水平居中 */
            align-items: center; /* 设置卡片内部圆点装饰的内容垂直居中 */
            margin-bottom: 10px; /* 设置卡片内部圆点装饰的底部外边距为 10px */
            position: relative; /* 设置卡片内部圆点装饰的定位为相对定位 */
        }
        
        .feature-dot::before {
            content: ''; /* 插入空内容 */
            position: absolute; /* 设置卡片内部圆点装饰伪元素的定位为绝对定位 */
            width: 24px; /* 设置卡片内部圆点装饰伪元素的宽度为 24px */
            height: 24px; /* 设置卡片内部圆点装饰伪元素的高度为 24px */
            border-radius: 50%; /* 设置卡片内部圆点装饰伪元素的圆角半径为 50%，使其成为圆形 */
            background: rgba(255, 255, 255, 0.1); /* 设置卡片内部圆点装饰伪元素的背景颜色和透明度 */
            box-shadow: 0 0 10px rgba(95, 169, 255, 0.3); /* 设置卡片内部圆点装饰伪元素的阴影 */
            transition: all 0.3s ease; /* 设置卡片内部圆点装饰伪元素的过渡效果 */
            border: 1px solid rgba(255, 255, 255, 0.3); /* 设置卡片内部圆点装饰伪元素的边框 */
        }
        
        .feature-dot::after {
            content: ''; /* 插入空内容 */
            position: absolute; /* 设置卡片内部圆点装饰另一个伪元素的定位为绝对定位 */
            width: 16px; /* 设置卡片内部圆点装饰另一个伪元素的宽度为 16px */
            height: 16px; /* 设置卡片内部圆点装饰另一个伪元素的高度为 16px */
            border-radius: 50%; /* 设置卡片内部圆点装饰另一个伪元素的圆角半径为 50%，使其成为圆形 */
            background: rgba(255, 255, 255, 0.15); /* 设置卡片内部圆点装饰另一个伪元素的背景颜色和透明度 */
            box-shadow: 0 0 5px rgba(255, 255, 255, 0.4); /* 设置卡片内部圆点装饰另一个伪元素的阴影 */
            transition: all 0.3s ease; /* 设置卡片内部圆点装饰另一个伪元素的过渡效果 */
        }
        
        .feature-dot span {
            position: absolute; /* 设置卡片内部圆点装饰的 span 元素的定位为绝对定位 */
            width: 8px; /* 设置卡片内部圆点装饰的 span 元素的宽度为 8px */
            height: 8px; /* 设置卡片内部圆点装饰的 span 元素的高度为 8px */
            border-radius: 50%; /* 设置卡片内部圆点装饰的 span 元素的圆角半径为 50%，使其成为圆形 */
            background: rgba(255, 255, 255, 0.3); /* 设置卡片内部圆点装饰的 span 元素的背景颜色和透明度 */
            box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* 设置卡片内部圆点装饰的 span 元素的阴影 */
            transition: all 0.3s ease; /* 设置卡片内部圆点装饰的 span 元素的过渡效果 */
        }

        .feature-card:hover .feature-dot::before {
            background: rgba(255, 255, 255, 0.2); /* 设置鼠标悬停时卡片内部圆点装饰伪元素的背景颜色和透明度 */
            box-shadow: 0 0 20px rgba(95, 169, 255, 0.8); /* 设置鼠标悬停时卡片内部圆点装饰伪元素的阴影 */
            transform: scale(1.2); /* 设置鼠标悬停时卡片内部圆点装饰伪元素的缩放比例 */
            border-color: rgba(255, 255, 255, 0.6); /* 设置鼠标悬停时卡片内部圆点装饰伪元素的边框颜色 */
        }
        
        .feature-card:hover .feature-dot::after {
            background: rgba(255, 255, 255, 0.25); /* 设置鼠标悬停时卡片内部圆点装饰另一个伪元素的背景颜色和透明度 */
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); /* 设置鼠标悬停时卡片内部圆点装饰另一个伪元素的阴影 */
            transform: scale(1.1); /* 设置鼠标悬停时卡片内部圆点装饰另一个伪元素的缩放比例 */
        }
        
        .feature-card:hover .feature-dot span {
            background: rgba(255, 255, 255, 0.8); /* 设置鼠标悬停时卡片内部圆点装饰的 span 元素的背景颜色和透明度 */
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* 设置鼠标悬停时卡片内部圆点装饰的 span 元素的阴影 */
        }

        /* 激活的幻灯片 */
        .slides .slide.active {
            opacity: 1; /* 设置激活幻灯片的透明度为 1 */
            transform: translateX(0) scale(1); /* 设置激活幻灯片的位移和缩放比例 */
            pointer-events: auto; /* 设置激活幻灯片响应鼠标事件 */
            z-index: 1; /* 设置激活幻灯片的层叠顺序为 1 */
        }

        /* 激活的导航项 */
        .feature-card.active {
            background: linear-gradient(to right, #e39c20, #e39c20); /* 设置激活导航项的背景为线性渐变 */
            transform: none; /* 设置激活导航项不进行变换 */
        }

        .feature-card.active .feature-dot::before {
            background: rgba(255, 255, 255, 0.2); /* 设置激活导航项卡片内部圆点装饰伪元素的背景颜色和透明度 */
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); /* 设置激活导航项卡片内部圆点装饰伪元素的阴影 */
            border-color: rgba(255, 255, 255, 0.5); /* 设置激活导航项卡片内部圆点装饰伪元素的边框颜色 */
        }
        
        .feature-card.active .feature-dot::after {
            background: rgba(255, 255, 255, 0.3); /* 设置激活导航项卡片内部圆点装饰另一个伪元素的背景颜色和透明度 */
        }
        
        .feature-card.active .feature-dot span {
            background: white; /* 设置激活导航项卡片内部圆点装饰的 span 元素的背景颜色为白色 */
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .slide {
                flex-direction: column; /* 设置小屏幕时幻灯片的弹性布局方向为垂直 */
                padding: 20px; /* 设置小屏幕时幻灯片的内边距为 20px */
            }

            .glass-content {
                margin: 10px; /* 设置小屏幕时磨砂玻璃效果的外边距为 10px */
                padding: 20px; /* 设置小屏幕时磨砂玻璃效果的内边距为 20px */
            }

            .text-content,
            .image-content {
                flex: none; /* 设置小屏幕时文本内容和图片内容不进行弹性伸缩 */
                width: 100%; /* 设置小屏幕时文本内容和图片内容的宽度为 100% */
            }

            .text-content {
                padding-right: 0; /* 设置小屏幕时文本内容的右侧内边距为 0 */
                margin-bottom: 20px; /* 设置小屏幕时文本内容的底部外边距为 20px */
            }

            .image-content {
                height: 250px; /* 设置小屏幕时图片内容的高度为 250px */
            }

            .slider {
                height: 750px; /* 设置小屏幕时幻灯片容器的高度为 750px */
            }

            h1 {
                font-size: 2.2rem; /* 设置小屏幕时标题的字体大小为 2.2rem */
            }

            /* 小屏幕时功能卡片一行两列 */
            .feature-card {
                flex: 0 0 50%; /* 设置小屏幕时功能卡片的弹性系数为 0，初始大小为 50% */
            }
        }

        @media (max-width: 768px) {
            .recycling-slider-component {
                padding: 30px 0; /* 设置中屏幕时组件容器的上下内边距为 30px，左右内边距为 0 */
            }

            .slider {
                height: 780px; /* 设置中屏幕时幻灯片容器的高度为 780px */
            }

            .slide {
                padding: 0px; /* 设置中屏幕时幻灯片的内边距为 15px */
            }

            .glass-content {
                padding: 18px; /* 设置中屏幕时磨砂玻璃效果的内边距为 18px */
            }

            h1 {
                font-size: 2rem; /* 设置中屏幕时标题的字体大小为 2rem */
            }

            .subtitle {
                font-size: 1rem; /* 设置中屏幕时副标题的字体大小为 1rem */
            }

            .slide h2 {
                font-size: 1.8rem; /* 设置中屏幕时幻灯片标题的字体大小为 1.8rem */
            }

            .feature-card {
                padding: 12px 8px; /* 设置中屏幕时功能卡片的内边距 */
            }

            .feature-card h3 {
                font-size: 1.1rem; /* 设置中屏幕时功能卡片标题的字体大小为 1.1rem */
            }
        }

        @media (max-width: 576px) {
            .recycling-slider-component {
                padding: 25px 0; /* 设置小屏幕时组件容器的上下内边距为 25px，左右内边距为 0 */
            }

            .slider {
                height: 820px; /* 设置小屏幕时幻灯片容器的高度为 820px */
            }

            h1 {
                font-size: 1.8rem; /* 设置小屏幕时标题的字体大小为 1.8rem */
            }

            /* 小屏幕时功能卡片一行两列 */
            .feature-card {
                flex: 0 0 50%; /* 设置小屏幕时功能卡片的弹性系数为 0，初始大小为 50% */
                padding: 15px 5px; /* 设置小屏幕时功能卡片的内边距 */
            }

            .feature-dot {
                width: 20px; /* 设置小屏幕时卡片内部圆点装饰的宽度为 20px */
                height: 20px; /* 设置小屏幕时卡片内部圆点装饰的高度为 20px */
            }
            
            .feature-dot::before {
                width: 20px; /* 设置小屏幕时卡片内部圆点装饰伪元素的宽度为 20px */
                height: 20px; /* 设置小屏幕时卡片内部圆点装饰伪元素的高度为 20px */
            }
            
            .feature-dot::after {
                width: 12px; /* 设置小屏幕时卡片内部圆点装饰另一个伪元素的宽度为 12px */
                height: 12px; /* 设置小屏幕时卡片内部圆点装饰另一个伪元素的高度为 12px */
            }
            
            .feature-dot span {
                width: 6px; /* 设置小屏幕时卡片内部圆点装饰的 span 元素的宽度为 6px */
                height: 6px; /* 设置小屏幕时卡片内部圆点装饰的 span 元素的高度为 6px */
            }

            .feature-card h3 {
                font-size: 1rem; /* 设置小屏幕时功能卡片标题的字体大小为 1rem */
                margin: 8px 0 3px; /* 设置小屏幕时功能卡片标题的外边距 */
            }

            .feature-card p {
                font-size: 0.75rem; /* 设置小屏幕时功能卡片段落的字体大小为 0.75rem */
            }
        }

        /* 超小屏幕也保持一行两列 */
        @media (max-width: 480px) {
            .feature-card {
                flex: 0 0 50%; /* 设置超小屏幕时功能卡片的弹性系数为 0，初始大小为 50% */
                padding: 12px; /* 设置超小屏幕时功能卡片的内边距为 12px */
            }
        }

        @keyframes fadeInDown {
            from {
                opacity: 0; /* 设置动画开始时的透明度为 0 */
                transform: translateY(-20px); /* 设置动画开始时的位移 */
            }
            to {
                opacity: 1; /* 设置动画结束时的透明度为 1 */
                transform: translateY(0); /* 设置动画结束时的位移 */
            }
        }

        /* 进度条 */
        .progress-bar1 {
            position: absolute; /* 设置进度条的定位为绝对定位 */
            bottom: 0; /* 设置进度条的底部位置为 0 */
            left: 0; /* 设置进度条的左侧位置为 0 */
            height: 4px; /* 设置进度条的高度为 4px */
            background: rgba(255, 255, 255, 0.3); /* 设置进度条的背景颜色和透明度 */
            width: 100%; /* 设置进度条的宽度为 100% */
            z-index: 10; /* 设置进度条的层叠顺序为 10 */
        }

        .progress1 {
            height: 100%; /* 设置进度条的高度为 100% */
            width: 25%; /* 设置进度条的初始宽度为 25% */
            background: linear-gradient(to right, #ffffff, var(--primary-color)); /* 设置进度条的背景为线性渐变 */
            border-radius: 0 4px 4px 0; /* 设置进度条的圆角半径 */
            transition: width 0.5s ease; /* 设置进度条的过渡效果 */
        }

        /* 导航按钮 */
        .slider-nav {
            position: absolute; /* 设置导航按钮的定位为绝对定位 */
            bottom: 20px; /* 设置导航按钮的底部位置为 20px */
            left: 50%; /* 设置导航按钮的左侧位置为 50% */
            transform: translateX(-50%); /* 将导航按钮水平居中 */
            z-index: 10; /* 设置导航按钮的层叠顺序为 10 */
            display: flex; /* 设置导航按钮的显示方式为弹性布局 */
            gap: 10px; /* 设置导航按钮之间的间距为 10px */
        }

        .nav-btn {
            width: 12px; /* 设置导航按钮的宽度为 12px */
            height: 12px; /* 设置导航按钮的高度为 12px */
            border-radius: 50%; /* 设置导航按钮的圆角半径为 50%，使其成为圆形 */
            background: rgba(255, 255, 255, 0.3); /* 设置导航按钮的背景颜色和透明度 */
            border: none; /* 去掉导航按钮的边框 */
            cursor: pointer; /* 设置导航按钮的光标样式为指针 */
            transition: all 0.3s ease; /* 设置导航按钮的过渡效果 */
        }

        .nav-btn.active {
            background: var(--primary-color); /* 设置激活导航按钮的背景颜色 */
            transform: scale(1.2); /* 设置激活导航按钮的缩放比例 */
        }

        .nav-btn:hover {
            background: #ffffff73; /* 设置鼠标悬停时导航按钮的背景颜色 */
        }










        /* ==============================================================
        ========================== 悬浮联系方式组件 ========================
        ===============================================================*/
        /* 整个悬浮组件容器 */
.floating-contact {
    position: fixed; /* 固定定位，不随页面滚动 */
    right: 30px; /* 距离右侧30px */
    bottom: 88px; /* 距离底部30px */
    z-index: 999; /* 确保显示在其他内容上方 */
}

/* 悬浮主按钮样式（圆形图片按钮） */
.floating-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%; /* 圆形按钮 */
    background-color: rgba(100, 100, 100, 0); /* 灰色半透明背景 */
    backdrop-filter: blur(8px); /* 磨砂玻璃效果 */
    -webkit-backdrop-filter: blur(8px); /* Safari浏览器兼容 */
    border: none; /* 去除边框 */
    cursor: pointer; /* 鼠标悬停显示手型 */
    display: flex; /* 弹性布局，用于居中图标 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    box-shadow: 0 0px 12px rgba(255, 255, 255, 0.986); /* 轻微阴影，增强立体感 */
    transition: all 0.3s ease; /* 所有属性变化添加过渡动画 */
    padding: 2px; /* 去除内边距，确保图片充满按钮 */
    overflow: hidden; /* 确保图片按圆形显示 */
    animation: pulse 2s infinite;
}

/* 按钮图片样式 */
.btn-icon {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 图片自适应填充按钮 */
    transition: opacity 0.3s ease; /* 图片切换过渡效果 */
}

/* 默认隐藏关闭图标 */
.close-icon {
    display: none; /* 初始隐藏关闭图标 */
    opacity: 0;
}

/* 激活状态下显示关闭图标，隐藏默认图标 */
.floating-btn.active .default-icon {
    display: none;
    opacity: 0;
}

.floating-btn.active .close-icon {
    display: block;
    opacity: 1;
}

/* 按钮 hover 效果 */
.floating-btn:hover {
    background-color: rgba(255, 255, 255, 0); /* 颜色加深 */
    transform: scale(1.05); /* 轻微放大效果 */
}

/* 联系方式内容容器 */
.floating-content {
    position: absolute; /* 相对于父元素定位 */
    bottom: 70px; /* 位于按钮上方 */
    right: 0; /* 与按钮右对齐 */
    display: flex; /* 弹性布局 */
    flex-direction: column; /* 垂直排列 */
    gap: 10px; /* 各项之间间距 */
    opacity: 0; /* 初始透明度为0（隐藏） */
    visibility: hidden; /* 初始不可见 */
    transition: all 0.3s ease; /* 所有属性变化添加过渡动画 */
    transform: translateY(10px); /* 初始位置向下偏移，增强动画效果 */
}

/* 内容激活状态（显示） */
.floating-content.active {
    opacity: 1; /* 完全透明 */
    visibility: visible; /* 可见 */
    transform: translateY(0); /* 回到正常位置 */
}

/* 单个联系方式项样式 */
.floating-item {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    gap: 10px; /* 图标与文字间距 */
    padding: 10px 15px; /* 内边距 */
    background-color: rgba(114, 114, 114, 0.368); /* 浅灰色半透明背景 */
    backdrop-filter: blur(10px); /* 磨砂玻璃效果 */
    -webkit-backdrop-filter: blur(10px); /* Safari兼容 */
    border-radius: 30px; /* 圆角 */
    box-shadow: 0 2px 8px rgba(113, 113, 113, 0.587); /* 轻微阴影 */
    color: #ffffff; /* 文字颜色 */
    text-decoration: none; /* 去除下划线 */
    white-space: nowrap; /* 防止文字换行 */
    transition: all 0.2s ease; /* 过渡动画 */
    border: 1px solid rgba(255, 255, 255, 0.323); /* 半透明白色边框，增强磨砂感 */
}

/* 联系方式项 hover 效果 */
.floating-item:hover {
    background-color: rgba(7, 135, 37, 0.299); /* 颜色加深 */
    transform: translateX(-5px); /* 向左偏移，增强交互感 */
}

/* 联系方式项图标样式 */
.floating-item i {
    width: 36px;
    height: 36px;
    border-radius: 50%; /* 圆形背景 */
    background-color: rgba(152, 152, 152, 0.7); /* 半透明白色背景 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px; /* 图标大小 */
}



/* 默认样式：所有设备上都显示 */
.hide-on-mobile {
  display: block; /* 或其他默认显示方式 */
}

/* 媒体查询：屏幕宽度≤768px（移动设备）时隐藏 */
@media (max-width: 991.98px) {
  .hide-on-mobile {
    display: none; /* 完全隐藏，不占据空间 */
    /* 可选：visibility: hidden; 隐藏但保留空间（不推荐，通常用display: none） */
  }
}