/* 多层圆圈背景 */
        .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.1); /* 设置圆圈元素的背景颜色和透明度 */
            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 */
            }
        }

        /* 容器 */
        .recycling-slider-container {
            width: 100%; /* 设置容器的宽度为 100% */
            max-width: 100%; /* 设置容器的最大宽度为 100% */
            text-align: center; /* 设置容器内文本的对齐方式为居中 */
            padding: 0px; /* 设置容器的内边距为 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, #354e33, #fff); /* 设置标题伪元素的背景为线性渐变 */
            border-radius: 2px; /* 设置标题伪元素的圆角半径为 2px */
        }

        .recycling-slider-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 */
        }

        /* 幻灯片容器 */
        .slider1 {
            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, #354e33, #fff); /* 设置幻灯片标题伪元素的背景为线性渐变 */
            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: 5px 13px; /* 设置标签的内边距 */
            border-radius: 30px; /* 设置标签的圆角半径为 30px */
            font-size: 0.95rem; /* 设置标签的字体大小为 0.95rem */
            margin-right: 5px; /* 设置标签的右侧外边距为 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: var(--primary-color); /* 设置功能卡片伪元素的背景为线性渐变 */
            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: var(--primary-color); /* 设置激活导航项的背景为线性渐变 */
            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: 300px; /* 设置小屏幕时图片内容的高度为 250px */
            }

            .slider1 {
                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 */
            }

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

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

            .glass-content {
                padding: 8px; /* 设置中屏幕时磨砂玻璃效果的内边距为 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 */
            }

            .slider1 {
                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-bar {
            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 */
        }

        /* .progress {*/
            /* height: 100%; *//* 设置进度条的高度为 100% */
            /* width: 25%; *//* 设置进度条的初始宽度为 25% */
            /* background: linear-gradient(to right, #354e33, #354e33); *//* 设置进度条的背景为线性渐变 */
            /* 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: var(--primary-color); /* 设置鼠标悬停时导航按钮的背景颜色 */
        }
        
        
        /*幻灯片设置开始*/
        @media (max-width: 768px) {
                    .slider-font{
                        top: 150%;
                        color: var(--primary-color);
                }
                }
                
                .slider-font1{
                    display: inline-block;
                  font-size: 40px;
                  line-height: 1.2em;
                  margin-bottom: 10px;
                }
                
                @media (max-width: 768px) {
                    .slider-font1{
                        font-size: 18px;
                }
                }
                
                .slider-font2{
                    display: inline-block;
                  font-size: 30px;
                  line-height: 1.2em;
                  margin-bottom: 10px;
                }
                
                @media (max-width: 768px) {
                    .slider-font2{
                        color: var(--primary-color) !important;
                        font-size: 15px;
                }
                }
                
             
        .slider-img {
            display: block; /* 转为块级元素，margin才会生效 */
            margin-top: 100px;
            margin-left: auto; /* 左外边距自动填充，实现靠右 */
            margin-right: 10px; /* 右外边距设为0 */
            max-width: 100%;
            height: 40vw; /* 保持图片宽高比 */
        }
        
        @media (max-width: 768px) {
                    .slider-img {
            display: block;     /* 核心：转为块级元素，margin 才生效 */
            margin: 0 auto;     /* 左右外边距自动平分，实现居中 */
            max-width: 100%;    /* 适配手机屏幕 */
            height: 50vw; /* 保持图片宽高比 */
        }
                }
                
        /*幻灯片设置结束*/