.hero-section {
            background: var(--gradient-science);

        }

      
    
         .hero-section::before{

background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='surface' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Crect width='20' height='20' fill='none' stroke='%23ffffff' stroke-width='0.3' stroke-opacity='0.03'/%3E%3Ccircle cx='5' cy='5' r='1' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='15' cy='5' r='1.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='5' cy='15' r='2' fill='%23ffffff' fill-opacity='0.03'/%3E%3Ccircle cx='15' cy='15' r='1' fill='%23ffffff' fill-opacity='0.08'/%3E%3Cpath d='M10,0 L10,20' stroke='%23ffffff' stroke-width='0.2' stroke-opacity='0.06'/%3E%3Cpath d='M0,10 L20,10' stroke='%23ffffff' stroke-width='0.2' stroke-opacity='0.06'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='80' height='80' fill='url(%23surface)'/%3E%3C/svg%3E");
}
 
        
        
        .docs-list{ height:80px ; line-height: 80px; border-bottom: 1px solid #eee;}
         #faq .faq-tag{width: 100px; border-radius: 15px; font-size: 12px; padding: 3px 10px; color: #fff;}

        .doc-filter {
            margin-bottom: 40px;
        }
        
        .filter-card {
            background: white;
            border-radius: var(--radius-lg);
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: var(--shadow);
            border: 1px solid var(--color-gray-200);
            transition: var(--transition);
        }
        
        .filter-card:hover {
            box-shadow: var(--shadow-lg);
        }
        
        .filter-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--aluminum-light);
        }
        
        .filter-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--secondary-color);
            margin: 0;
        }

 /* 手机设备 (576px - 768px) */
@media (max-width: 768px) {
.hero-section{ padding:30px 0;}
.docs-list{ height:auto ; line-height: normal; border-bottom: 1px solid #eee;}

} 

.faq-content{
     overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
    
}