/* 轮播容器样式 */
        .carousel {
            position: relative;
            max-width: 1000px;
            margin: 20px auto;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        /* 轮播内容容器 */
        .carousel-inner {
            display: flex;
            width: 300%;
            transition: transform 0.5s ease-in-out;
            animation: autoSlide 15s infinite;
        }

        /* 轮播项样式 */
        .carousel-item {
            width: 100%;
            flex-shrink: 0;
        }

        .carousel-item img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* 自动轮播动画 */
        @keyframes autoSlide {
            0%, 25% { transform: translateX(0); }
            33.33%, 58.33% { transform: translateX(-33.33%); }
            66.66%, 91.66% { transform: translateX(-66.66%); }
            100% { transform: translateX(0); }
        }

        /* 指示器样式 */
        .carousel-indicators {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }

        .carousel-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: background-color 0.3s;
        }

        /* 左右控制按钮 */
        .carousel-control {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            cursor: pointer;
            z-index: 10;
            transition: background-color 0.3s;
        }

        .carousel-control:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        .carousel-control.prev {
            left: 15px;
        }

        .carousel-control.next {
            right: 15px;
        }

        /* 箭头样式 */
        .carousel-control::before {
            content: '';
            display: inline-block;
            width: 10px;
            height: 10px;
            border-top: 2px solid white;
            border-right: 2px solid white;
        }

        .carousel-control.prev::before {
            transform: rotate(-135deg);
            margin-right: 3px;
        }

        .carousel-control.next::before {
            transform: rotate(45deg);
            margin-left: 3px;
        }

        /* 隐藏原生radio按钮 */
        .carousel-radio {
            display: none;
        }

        /* 手动切换控制 */
        #slide1:checked ~ .carousel-inner {
            transform: translateX(0);
            animation: none;
        }

        #slide2:checked ~ .carousel-inner {
            transform: translateX(-33.33%);
            animation: none;
        }

        #slide3:checked ~ .carousel-inner {
            transform: translateX(-66.66%);
            animation: none;
        }

        /* 指示器激活状态 */
        #slide1:checked ~ .carousel-indicators label[for="slide1"],
        #slide2:checked ~ .carousel-indicators label[for="slide2"],
        #slide3:checked ~ .carousel-indicators label[for="slide3"] {
            background-color: #fff;
        }

        /* 按钮点击控制 */
        #slide1:checked ~ .controls label[for="slide3"].prev,
        #slide1:checked ~ .controls label[for="slide2"].next,
        #slide2:checked ~ .controls label[for="slide1"].prev,
        #slide2:checked ~ .controls label[for="slide3"].next,
        #slide3:checked ~ .controls label[for="slide2"].prev,
        #slide3:checked ~ .controls label[for="slide1"].next {
            display: flex;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .carousel {
                margin: 10px;
                border-radius: 5px;
            }
            
            .carousel-indicator {
                width: 10px;
                height: 10px;
            }
            
            .carousel-control {
                width: 30px;
                height: 30px;
            }
        }

        @media (max-width: 480px) {
            .carousel-indicators {
                bottom: 10px;
            }
            
            .carousel-control {
                width: 25px;
                height: 25px;
            }
        }