.container {
            display: flex;
            max-width: 1600px;
            margin: 0 auto;
            background-color: white;
            border-radius: 0px;
            overflow: hidden;
            min-height: 700px;
        }
        
        .detail-section {
            flex: 1;
            padding: 30px;
            background: #0097e0;
            width: 44%;
        }
        
        .list-section {
            width: 56%;
            padding: 30px;
            background-color: white;
        }
        
        .detail-content {
            background-color: #4db3e4;
            border-radius: 0px;
            padding: 15px;
            height: 95%;
            display: flex;
            flex-direction: column;
        }
        
        .detail-title {
            font-size: 28px;
            font-weight: 700;
            color: #fff;
            text-align: center;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 2px solid rgba(255,255,255,0.3);
        }
        
        .detail-overview {
            font-size: 16px;
            color: #fff;
            line-height: 1.8;
            margin-bottom: 25px;
        }
        
        .detail-image {
            width: 100%;
            height: 250px;
            object-fit: cover;
            border-radius: 0px;
            margin-bottom: 25px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }
        
        /* 修复按钮撑破问题 */
        .detail-btn-container {
            /*margin-top: auto; /* 使按钮始终在底部 */
            padding-top: 20px; /* 与上方内容的间距 */
        }
        
        .detail-btn-link {
            display: inline-block;
            background: #fff;
            color: #222;
            text-decoration: none;
            padding: 14px 20px; /* 调整内边距 */
            border-radius: 0px;
            font-weight: 600;
            font-size: 16px;
            text-align: center;
            transition: all 0.3s ease;
            width: 100%; /* 保持100%宽度 */
            max-width: 100%; /* 防止超出 */
            box-sizing: border-box; /* 确保padding包含在宽度内 */
            word-break: break-word; /* 长文本换行 */
            white-space: normal; /* 允许换行 */
        }
        
        .detail-btn-link:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(74, 110, 224, 0.4);
            color: #222;
        }
        
        .items-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 15px;
        }
        
        .grid-item {
            background-color: #f8fafd;
            border-radius: 0px;
            padding: 40px 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .grid-item:hover {
            transform: translateY(-5px);
            background-color: white;
            border-color: #4a6ee0;
            box-shadow: 0 6px 15px rgba(74, 110, 224, 0.15);
        }
        
        .grid-item.active {
            background-color: #eef2ff;
            border-color: #0097e0;
            transform: translateY(-3px);
        }
        
        .grid-item .iconfont {
            font-size: 36px;
            color: #0097e0;
            margin-bottom: 15px;
        }
        
        .grid-item span {
            font-size: 14px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        /* 平板设备 (768px以下) */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
                min-height: auto;
                margin: 10px;
                border-radius: 0;
                box-shadow: none;
                height: auto;
            }
            
            /* 移动端：详情在上，列表在下 */
            .detail-section {
                width: 100%;
                padding: 15px;
                order: 1;
                height: auto;
                min-height: 0;
                flex: 0 0 auto;
            }
            
            .list-section {
                width: 100%;
                padding: 15px;
                order: 2;
                height: auto;
            }
            
            .detail-content {
                height: auto;
                padding: 20px;
                min-height: 0;
            }
            
            .detail-title {
                font-size: 22px;
                margin-bottom: 12px;
                padding-bottom: 12px;
            }
            
            .detail-overview {
                font-size: 15px;
                line-height: 1.6;
                margin-bottom: 20px;
            }
            
            .detail-image {
                height: auto;
                max-height: 200px;
                margin-bottom: 20px;
                width: 100%;
                object-fit: cover;
            }
            
            .detail-btn-container {
                padding-top: 15px;
            }
            
            .detail-btn-link {
                padding: 12px 16px;
                font-size: 15px;
            }
            
            .items-grid {
                grid-template-columns: repeat(4, 1fr);
                grid-gap: 8px;
            }
            
            .grid-item {
                padding: 20px 5px;
            }
            
            .grid-item .iconfont {
                font-size: 28px;
                margin-bottom: 10px;
            }
            
            .grid-item span {
                font-size: 12px;
            }
            
            .grid-item:hover {
                transform: none;
                background-color: #f8fafd;
                border-color: transparent;
                box-shadow: none;
            }
            
            .grid-item:active, .grid-item.active {
                transform: scale(0.98);
                background-color: #eef2ff;
                border-color: #0097e0;
            }
        }
        
        /* 手机设备 (480px以下) */
        @media (max-width: 480px) {
            body {
                padding: 0;
            }
            
            .container {
                margin: 0;
                border-radius: 0;
                min-height: auto;
                height: auto;
            }
            
            .detail-section {
            	width: 100%;
        		padding: 0%;
            }
            
            .list-section {
            	margin-top: 20px;
            	width: 100%;
        		padding: 0%;
            }
            
            .detail-content {
            	padding: 0%;
        		width: 100%;
            }
            
            .detail-title {
                font-size: 20px;
                margin-bottom: 10px;
                padding-bottom: 10px;
                padding-top: 10px;
            }
            
            .detail-overview {
                font-size: 14px;
                line-height: 1.5;
                width: 96%;
                margin: 0 auto 15px;
            }
            
            .detail-image {
                max-height: 160px;
                margin-bottom: 15px;
            }
            
            .detail-btn-container {
                padding-top: 10px;
            }
            
            .detail-btn-link {
                padding: 10px 12px;
                font-size: 14px;
            }
            
            .items-grid {
                grid-gap: 6px;
            }
            
            .grid-item {
                padding: 15px 3px;
            }
            
            .grid-item .iconfont {
                font-size: 24px;
                margin-bottom: 8px;
            }
            
            .grid-item span {
                font-size: 11px;
            }
        }
        
        /* 超小手机设备 (360px以下) */
        @media (max-width: 360px) {
            .detail-title {
                font-size: 18px;
            }
            
            .detail-overview {
                font-size: 13px;
            }
            
            .detail-image {
                max-height: 140px;
            }
            
            .detail-btn-link {
                padding: 8px 10px;
                font-size: 13px;
            }
            
            .items-grid {
                grid-template-columns: repeat(4, 1fr);
                grid-gap: 4px;
            }
            
            .grid-item {
                padding: 12px 2px;
            }
            
            .grid-item .iconfont {
                font-size: 20px;
                margin-bottom: 6px;
            }
            
            .grid-item span {
                font-size: 10px;
            }
        }