/* \4ea7\54c1\5206\7c7b\5bfc\822a\6761\6837\5f0f\4f18\5316 */
.\0073\0079\0073\0074\0065\006d\0070\0072\006f\0064\0075\0063\0074-\0063\0061\0074\0065\0067\006f\0072\0069\0065\0073 {
    \0064\0069\0073\0070\006c\0061\0079: flex !important;
    \006a\0075\0073\0074\0069\0066\0079-\0063\006f\006e\0074\0065\006e\0074: center !important;
    \0061\006c\0069\0067\006e-\0069\0074\0065\006d\0073: center !important;
    \0067\0061\0070: 0 !important;
    \006d\0061\0072\0067\0069\006e: 40px auto !important;
    \0070\0061\0064\0064\0069\006e\0067: 6px !important;
    \0062\0061\0063\006b\0067\0072\006f\0075\006e\0064: linear-gradient(to right, #f6f8fb, #ffffff, #f6f8fb) !important;
    \0062\006f\0072\0064\0065\0072-\0072\0061\0064\0069\0075\0073: 50px !important;
    \0062\006f\0078-\0073\0068\0061\0064\006f\0077: 0 2px 15px rgba(0, 0, 0, 0.08) !important;
    \006d\0061\0078-\0077\0069\0064\0074\0068: fit-content !important;
}

/* \5355\4e2a\5206\7c7b\6309\94ae */
.\0073\0079\0073\0074\0065\006d\0070\0072\006f\0064\0075\0063\0074-\0063\0061\0074\0065\0067\006f\0072\0079 {
    \0070\006f\0073\0069\0074\0069\006f\006e: relative !important;
    \0063\0075\0072\0073\006f\0072: pointer !important;
    \0070\0061\0064\0064\0069\006e\0067: 0 !important;
    \0062\0061\0063\006b\0067\0072\006f\0075\006e\0064: transparent !important;
    \0062\006f\0072\0064\0065\0072: none !important;
    \0074\0072\0061\006e\0073\0069\0074\0069\006f\006e: all 0.3s ease !important;
}

/* \5206\7c7b\540d\79f0\6587\5b57 - \91cd\70b9\786e\4fdd\6587\5b57\663e\793a */
.\0073\0079\0073\0074\0065\006d\0070\0072\006f\0064\0075\0063\0074-\0063\0061\0074\0065\0067\006f\0072\0079-\006e\0061\006d\0065 {
    \0064\0069\0073\0070\006c\0061\0079: block !important;
    \0070\0061\0064\0064\0069\006e\0067: 12px 28px !important;
    \006d\0061\0072\0067\0069\006e: 0 !important;
    \0066\006f\006e\0074-\0073\0069\007a\0065: 14px !important;
    \0066\006f\006e\0074-\0077\0065\0069\0067\0068\0074: 500 !important;
    \0063\006f\006c\006f\0072: #6b7280 !important;
    \006c\0069\006e\0065-\0068\0065\0069\0067\0068\0074: 1.5 !important;
    \0077\0068\0069\0074\0065-\0073\0070\0061\0063\0065: nowrap !important;
    \0062\006f\0072\0064\0065\0072-\0072\0061\0064\0069\0075\0073: 50px !important;
    \0074\0072\0061\006e\0073\0069\0074\0069\006f\006e: all 0.3s ease !important;
    \0062\0061\0063\006b\0067\0072\006f\0075\006e\0064: transparent !important;
    \0066\006f\006e\0074-\0066\0061\006d\0069\006c\0079: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
    /* \786e\4fdd\6587\5b57\53ef\89c1 */
    \0076\0069\0073\0069\0062\0069\006c\0069\0074\0079: visible !important;
    \006f\0070\0061\0063\0069\0074\0079: 1 !important;
    \007a-\0069\006e\0064\0065\0078: 1 !important;
}

/* \60ac\505c\6548\679c */
.\0073\0079\0073\0074\0065\006d\0070\0072\006f\0064\0075\0063\0074-\0063\0061\0074\0065\0067\006f\0072\0079:hover .systemproduct-category-name {
    background: rgba(59, 130, 246, 0.1) !important;
    \0063\006f\006c\006f\0072: #3b82f6 !important;
    \0074\0072\0061\006e\0073\0066\006f\0072\006d: scale(1.05) !important;
}

/* \6fc0\6d3b\72b6\6001 - \84dd\8272\80cc\666f\767d\8272\6587\5b57 */
.\0073\0079\0073\0074\0065\006d\0070\0072\006f\0064\0075\0063\0074-\0063\0061\0074\0065\0067\006f\0072\0079.\0061\0063\0074\0069\0076\0065 .\0073\0079\0073\0074\0065\006d\0070\0072\006f\0064\0075\0063\0074-\0063\0061\0074\0065\0067\006f\0072\0079-\006e\0061\006d\0065 {
    \0062\0061\0063\006b\0067\0072\006f\0075\006e\0064: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    \0063\006f\006c\006f\0072: #ffffff !important;
    \0066\006f\006e\0074-\0077\0065\0069\0067\0068\0074: 600 !important;
    \0062\006f\0078-\0073\0068\0061\0064\006f\0077: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
}

/* \6dfb\52a0\5206\9694\7ebf\6548\679c */
.\0073\0079\0073\0074\0065\006d\0070\0072\006f\0064\0075\0063\0074-\0063\0061\0074\0065\0067\006f\0072\0079:not(:last-child)::after {
    content: "" !important;
    \0070\006f\0073\0069\0074\0069\006f\006e: absolute !important;
    \0072\0069\0067\0068\0074: 0 !important;
    \0074\006f\0070: 50% !important;
    \0074\0072\0061\006e\0073\0066\006f\0072\006d: translateY(-50%) !important;
    \0077\0069\0064\0074\0068: 1px !important;
    \0068\0065\0069\0067\0068\0074: 20px !important;
    \0062\0061\0063\006b\0067\0072\006f\0075\006e\0064: #e5e7eb !important;
    \006f\0070\0061\0063\0069\0074\0079: 0.5 !important;
}

/* \6fc0\6d3b\9879\548c\60ac\505c\9879\4e0d\663e\793a\5206\9694\7ebf */
.\0073\0079\0073\0074\0065\006d\0070\0072\006f\0064\0075\0063\0074-\0063\0061\0074\0065\0067\006f\0072\0079.\0061\0063\0074\0069\0076\0065::after,
.systemproduct-category:hover::after,
.systemproduct-category:hover + .systemproduct-category::after {
    opacity: 0 !important;
}

/* \54cd\5e94\5f0f\5e03\5c40 */
@\006d\0065\0064\0069\0061 \0028\006d\0061\0078-\0077\0069\0064\0074\0068: 1024px) {
    .systemproduct-categories {
        flex-wrap: wrap !important;
        \0062\006f\0072\0064\0065\0072-\0072\0061\0064\0069\0075\0073: 12px !important;
        \006d\0061\0078-\0077\0069\0064\0074\0068: 90% !important;
    }
    
    .\0073\0079\0073\0074\0065\006d\0070\0072\006f\0064\0075\0063\0074-\0063\0061\0074\0065\0067\006f\0072\0079-\006e\0061\006d\0065 {
        \0070\0061\0064\0064\0069\006e\0067: 10px 20px !important;
        \0066\006f\006e\0074-\0073\0069\007a\0065: 13px !important;
    }
    
    .\0073\0079\0073\0074\0065\006d\0070\0072\006f\0064\0075\0063\0074-\0063\0061\0074\0065\0067\006f\0072\0079::after {
        display: none !important;
    }
}

@\006d\0065\0064\0069\0061 \0028\006d\0061\0078-\0077\0069\0064\0074\0068: 640px) {
    .systemproduct-categories {
        flex-direction: column !important;
        \0077\0069\0064\0074\0068: 100% !important;
        \0067\0061\0070: 8px !important;
        \0062\0061\0063\006b\0067\0072\006f\0075\006e\0064: transparent !important;
        \0062\006f\0078-\0073\0068\0061\0064\006f\0077: none !important;
    }
    
    .\0073\0079\0073\0074\0065\006d\0070\0072\006f\0064\0075\0063\0074-\0063\0061\0074\0065\0067\006f\0072\0079 {
        \0077\0069\0064\0074\0068: 100% !important;
    }
    
    .\0073\0079\0073\0074\0065\006d\0070\0072\006f\0064\0075\0063\0074-\0063\0061\0074\0065\0067\006f\0072\0079-\006e\0061\006d\0065 {
        \0077\0069\0064\0074\0068: 100% !important;
        \0074\0065\0078\0074-\0061\006c\0069\0067\006e: center !important;
        \0062\006f\0072\0064\0065\0072-\0072\0061\0064\0069\0075\0073: 8px !important;
        \0062\0061\0063\006b\0067\0072\006f\0075\006e\0064: #f9fafb !important;
        \0063\006f\006c\006f\0072: #4b5563 !important;
    }
    
    .\0073\0079\0073\0074\0065\006d\0070\0072\006f\0064\0075\0063\0074-\0063\0061\0074\0065\0067\006f\0072\0079.\0061\0063\0074\0069\0076\0065 .\0073\0079\0073\0074\0065\006d\0070\0072\006f\0064\0075\0063\0074-\0063\0061\0074\0065\0067\006f\0072\0079-\006e\0061\006d\0065 {
        \0062\0061\0063\006b\0067\0072\006f\0075\006e\0064: linear-gradient(135deg, #3b82f6, #2563eb) !important;
        \0063\006f\006c\006f\0072: #ffffff !important;
    }
}

/* \6dfb\52a0\7b80\5355\7684\8fdb\5165\52a8\753b */
.\0073\0079\0073\0074\0065\006d\0070\0072\006f\0064\0075\0063\0074-\0063\0061\0074\0065\0067\006f\0072\0069\0065\0073 {
    \0061\006e\0069\006d\0061\0074\0069\006f\006e: fadeInUp 0.5s ease !important;
}

@\006b\0065\0079\0066\0072\0061\006d\0065\0073 \0066\0061\0064\0065\0049\006e\0055\0070 {
    \0066\0072\006f\006d {
        \006f\0070\0061\0063\0069\0074\0079: 0;
        \0074\0072\0061\006e\0073\0066\006f\0072\006d: translateY(20px);
    }
    \0074\006f {
        \006f\0070\0061\0063\0069\0074\0079: 1;
        \0074\0072\0061\006e\0073\0066\006f\0072\006d: translateY(0);
    }
}

/* \786e\4fdd\5bb9\5668\5185\7684\6240\6709\5143\7d20\90fd\53ef\89c1 */
.\0073\0079\0073\0074\0065\006d\0070\0072\006f\0064\0075\0063\0074-\0063\0061\0074\0065\0067\006f\0072\0069\0065\0073 * {
    \0076\0069\0073\0069\0062\0069\006c\0069\0074\0079: visible !important;
    \006f\0070\0061\0063\0069\0074\0079: 1 !important;
}