{"id":7,"date":"2025-04-11T19:40:45","date_gmt":"2025-04-11T11:40:45","guid":{"rendered":"http:\/\/47.120.49.116\/?page_id=7"},"modified":"2026-05-29T20:33:29","modified_gmt":"2026-05-29T12:33:29","slug":"home","status":"publish","type":"page","link":"https:\/\/logicinfo.com.cn\/","title":{"rendered":""},"content":{"rendered":"\r\n\r\n<!-- \u5f15\u5165 Tailwind CSS -->\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n<script>\r\n    tailwind.config = {\r\n        darkMode: 'class', \r\n        theme: {\r\n            extend: {\r\n                colors: {\r\n                    dark: {\r\n                        bg: '#0f172a',      \/\/ \u4e3b\u80cc\u666f Slate 900\r\n                        deep: '#020617',    \/\/ \u9875\u811a\u6df1\u8272 Slate 950\r\n                        card: '#1e293b',    \/\/ \u5361\u7247\u80cc\u666f Slate 800\r\n                        border: 'rgba(255,255,255,0.08)' \/\/ \u7edf\u4e00\u8fb9\u6846\u8272\r\n                    }\r\n                },\r\n                animation: {\r\n                    'spin-slow': 'spin 15s linear infinite', \r\n                    'scroll': 'scroll 30s linear infinite',\r\n                    'float': 'float 6s ease-in-out infinite',\r\n                },\r\n                keyframes: {\r\n                    scroll: {\r\n                        '0%': { transform: 'translateX(0)' },\r\n                        '100%': { transform: 'translateX(-100%)' },\r\n                    },\r\n                    float: {\r\n                        '0%, 100%': { transform: 'translateY(0)' },\r\n                        '50%': { transform: 'translateY(-20px)' },\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n<\/script>\r\n\r\n<!-- \u5b57\u4f53\u4e0e\u56fe\u6807 -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n    \/* ================= \u5168\u5c40\u5f3a\u5236\u6837\u5f0f\u91cd\u7f6e ================= *\/\r\n    \/* \u5f3a\u5236\u53bb\u9664 WordPress \u4e3b\u9898\u53ef\u80fd\u6dfb\u52a0\u7684\u4e0b\u5212\u7ebf\u548c\u9634\u5f71 *\/\r\n    #theme-root a {\r\n        text-decoration: none !important;\r\n        box-shadow: none !important;\r\n        border-bottom: none !important;\r\n    }\r\n    \r\n    html {\r\n        scroll-behavior: smooth;\r\n    }\r\n    \r\n    \/* \u6027\u80fd\u4f18\u5316\uff1a\u786c\u4ef6\u52a0\u901f *\/\r\n    .animate-float, .animate-scroll, .animate-spin-slow, .hover-card-3d {\r\n        will-change: transform; \r\n        transform: translateZ(0); \r\n    }\r\n\r\n    \/* \u4f18\u5316\u5168\u5c40\u8fc7\u6e21 *\/\r\n    .smooth-transition {\r\n        transition-property: background-color, border-color, color, fill, stroke;\r\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\r\n        transition-duration: 300ms;\r\n    }\r\n\r\n    \/* ================= \u7279\u6548\u6837\u5f0f ================= *\/\r\n    \r\n    \/* \u5bfc\u822a\u680f\u6bdb\u73bb\u7483 *\/\r\n    .glass-nav {\r\n        background: rgba(255, 255, 255, 0.85);\r\n        backdrop-filter: blur(12px);\r\n        -webkit-backdrop-filter: blur(12px);\r\n        border-bottom: 1px solid rgba(0,0,0,0.05);\r\n    }\r\n    .dark .glass-nav {\r\n        background: rgba(15, 23, 42, 0.85);\r\n        border-bottom: 1px solid rgba(255,255,255,0.05);\r\n    }\r\n    \r\n    \/* \u9875\u811a\u6bdb\u73bb\u7483 *\/\r\n    .glass-footer {\r\n        background: rgba(248, 250, 252, 0.8);\r\n        backdrop-filter: blur(20px);\r\n        -webkit-backdrop-filter: blur(20px);\r\n        border-top: 1px solid rgba(0,0,0,0.05);\r\n    }\r\n    .dark .glass-footer {\r\n        background: rgba(2, 6, 23, 0.75); \r\n        border-top: 1px solid rgba(255,255,255,0.05);\r\n    }\r\n\r\n    \/* \u73bb\u7483\u7ec4\u4ef6 *\/\r\n    .glass-badge {\r\n        background: rgba(255, 255, 255, 0.9);\r\n        backdrop-filter: blur(8px);\r\n        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\r\n        border: 1px solid rgba(255, 255, 255, 0.8);\r\n    }\r\n    .dark .glass-badge {\r\n        background: rgba(30, 41, 59, 0.85);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\r\n    }\r\n\r\n    \/* \u6587\u5b57\u6e10\u53d8 *\/\r\n    .text-gradient {\r\n        background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        background-clip: text;\r\n    }\r\n\r\n    \/* 3D \u60ac\u6d6e\u4ea4\u4e92 *\/\r\n    .hover-card-3d { \r\n        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;\r\n    }\r\n    .hover-card-3d:hover { \r\n        transform: translateY(-5px); \r\n    }\r\n    .dark .hover-card-3d:hover {\r\n        box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.15);\r\n        border-color: rgba(59, 130, 246, 0.4);\r\n    }\r\n\r\n    \/* \u6309\u94ae\u6d41\u5149 *\/\r\n    .btn-shine { position: relative; overflow: hidden; }\r\n    .btn-shine::after {\r\n        content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;\r\n        background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);\r\n        transform: skewX(-25deg); transition: none;\r\n    }\r\n    .btn-shine:hover::after { left: 150%; transition: left 0.7s ease-in-out; }\r\n\r\n    \/* \u5165\u573a\u52a8\u753b *\/\r\n    .fade-in-up { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; will-change: opacity, transform; }\r\n    .fade-in-up.visible { opacity: 1; transform: translateY(0); }\r\n\r\n    \/* \u5b57\u4f53\u9002\u914d\u4f18\u5316 *\/\r\n    .font-inter { font-family: 'Inter', system-ui, sans-serif; }\r\n    .clamp-title { \r\n        font-size: clamp(2.25rem, 6vw, 4rem); \r\n        line-height: 1.1; \r\n        letter-spacing: -0.02em; \r\n    }\r\n    .clamp-subtitle {\r\n        font-size: clamp(1.75rem, 4vw, 2.5rem);\r\n    }\r\n\r\n    \/* \u52a8\u6001\u80cc\u666f Canvas *\/\r\n    #hero-canvas {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        z-index: 1; \r\n        pointer-events: auto; \/* Allow mouse interaction *\/\r\n    }\r\n\r\n    \/* WordPress Admin Bar \u9002\u914d *\/\r\n    body.admin-bar .xy-navbar { top: 32px; }\r\n    @media screen and (max-width: 782px) { body.admin-bar .xy-navbar { top: 46px; } }\r\n<\/style>\r\n\r\n<!-- \u4e3b\u5bb9\u5668 -->\r\n<div id=\"theme-root\" class=\"font-inter bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 smooth-transition overflow-hidden w-full relative\">\r\n\r\n    <!-- \u9876\u90e8\u5bfc\u822a\u680f -->\r\n    <header id=\"navbar\" class=\"xy-navbar fixed w-full z-50 glass-nav transition-all duration-300 top-0 left-0\">\r\n        <div class=\"max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-3\">\r\n            <nav class=\"flex items-center justify-between\">\r\n                <!-- Logo -->\r\n                <a class=\"flex items-center z-50 no-underline group gap-2\" href=\"http:\/\/47.120.49.116\/\">\r\n                    <div class=\"w-9 h-9 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-lg shadow-blue-500\/30\">L<\/div>\r\n                    <span class=\"font-bold text-xl tracking-tight text-gray-800 dark:text-white\">\u903b\u6781\u4fe1\u606f<\/span>\r\n                <\/a>\r\n\r\n                <!-- \u684c\u9762\u83dc\u5355 -->\r\n                <div class=\"hidden md:flex items-center space-x-1\">\r\n                    <a class=\"px-4 py-2 text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium transition-colors text-sm no-underline rounded-lg hover:bg-gray-50 dark:hover:bg-white\/5\" href=\"http:\/\/47.120.49.116\/\">\u9996\u9875<\/a>\r\n                    \r\n                    <!-- \u670d\u52a1\u4e0b\u62c9 -->\r\n                    <div class=\"relative group px-3 py-2\">\r\n                        <button class=\"flex items-center text-gray-600 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 font-medium transition-colors text-sm bg-transparent border-0 p-0 cursor-pointer\">\r\n                            \u670d\u52a1 <i class=\"fa fa-chevron-down ml-1.5 text-[10px] transition-transform group-hover:rotate-180\"><\/i>\r\n                        <\/button>\r\n                        <!-- \u4e0b\u62c9\u5185\u5bb9 -->\r\n                        <div class=\"absolute left-1\/2 -translate-x-1\/2 mt-4 pt-2 w-[550px] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform origin-top scale-95 group-hover:scale-100 z-[10000]\">\r\n                            <div class=\"bg-white\/95 dark:bg-slate-800\/95 backdrop-blur-xl rounded-2xl shadow-2xl border border-gray-100 dark:border-slate-700 p-5 grid grid-cols-2 gap-3\">\r\n                                <a class=\"p-3 rounded-xl hover:bg-blue-50 dark:hover:bg-slate-700\/50 transition-colors no-underline flex items-start group\/item\" href=\"http:\/\/47.120.49.116\/index.php\/microsoft\/\">\r\n                                    <div class=\"w-9 h-9 rounded-lg bg-blue-100 dark:bg-blue-900\/30 text-blue-600 dark:text-blue-400 flex items-center justify-center mr-3 mt-0.5\"><i class=\"fa-brands fa-microsoft text-lg\"><\/i><\/div>\r\n                                    <div><div class=\"font-bold text-sm text-gray-800 dark:text-gray-100 group-hover\/item:text-blue-600 transition-colors\">\u4f01\u4e1a\u7cfb\u7edf\u96c6\u6210<\/div><div class=\"text-xs text-gray-400 mt-1\">\u5fae\u8f6f\u91d1\u724c\u4ee3\u7406\u4e0e\u5b9e\u65bd<\/div><\/div>\r\n                                <\/a>\r\n                                <a class=\"p-3 rounded-xl hover:bg-purple-50 dark:hover:bg-slate-700\/50 transition-colors no-underline flex items-start group\/item\" href=\"http:\/\/47.120.49.116\/index.php\/virtual\/\">\r\n                                    <div class=\"w-9 h-9 rounded-lg bg-purple-100 dark:bg-purple-900\/30 text-purple-600 dark:text-purple-400 flex items-center justify-center mr-3 mt-0.5\"><i class=\"fa fa-cloud text-lg\"><\/i><\/div>\r\n                                    <div><div class=\"font-bold text-sm text-gray-800 dark:text-gray-100 group-hover\/item:text-purple-500 transition-colors\">\u865a\u62df\u5316\u89e3\u51b3\u65b9\u6848<\/div><div class=\"text-xs text-gray-400 mt-1\">VMware \/ \u8d85\u878d\u5408\u67b6\u6784<\/div><\/div>\r\n                                <\/a>\r\n                                <a class=\"p-3 rounded-xl hover:bg-green-50 dark:hover:bg-slate-700\/50 transition-colors no-underline flex items-start group\/item\" href=\"http:\/\/47.120.49.116\/index.php\/secure\/\">\r\n                                    <div class=\"w-9 h-9 rounded-lg bg-green-100 dark:bg-green-900\/30 text-green-600 dark:text-green-400 flex items-center justify-center mr-3 mt-0.5\"><i class=\"fa-solid fa-shield-halved text-lg\"><\/i><\/div>\r\n                                    <div><div class=\"font-bold text-sm text-gray-800 dark:text-gray-100 group-hover\/item:text-green-500 transition-colors\">\u4fe1\u606f\u5b89\u5168<\/div><div class=\"text-xs text-gray-400 mt-1\">\u7eb5\u6df1\u9632\u5fa1\u4f53\u7cfb\u5efa\u8bbe<\/div><\/div>\r\n                                <\/a>\r\n                                <a class=\"p-3 rounded-xl hover:bg-orange-50 dark:hover:bg-slate-700\/50 transition-colors no-underline flex items-start group\/item\" href=\"http:\/\/47.120.49.116\/index.php\/design\/\">\r\n                                    <div class=\"w-9 h-9 rounded-lg bg-orange-100 dark:bg-orange-900\/30 text-orange-600 dark:text-orange-400 flex items-center justify-center mr-3 mt-0.5\"><i class=\"fa-solid fa-pen-ruler text-lg\"><\/i><\/div>\r\n                                    <div><div class=\"font-bold text-sm text-gray-800 dark:text-gray-100 group-hover\/item:text-orange-500 transition-colors\">\u56fe\u5f62\u8bbe\u8ba1<\/div><div class=\"text-xs text-gray-400 mt-1\">Autodesk \/ \u897f\u95e8\u5b50\u89e3\u51b3\u65b9\u6848<\/div><\/div>\r\n                                <\/a>\r\n                                <a class=\"p-3 rounded-xl hover:bg-cyan-50 dark:hover:bg-slate-700\/50 transition-colors no-underline flex items-start group\/item\" href=\"http:\/\/47.120.49.116\/index.php\/analysis\/\">\r\n                                    <div class=\"w-9 h-9 rounded-lg bg-cyan-100 dark:bg-cyan-900\/30 text-cyan-600 dark:text-cyan-400 flex items-center justify-center mr-3 mt-0.5\"><i class=\"fa-solid fa-chart-line text-lg\"><\/i><\/div>\r\n                                    <div><div class=\"font-bold text-sm text-gray-800 dark:text-gray-100 group-hover\/item:text-cyan-500 transition-colors\">\u7edf\u8ba1\u5206\u6790<\/div><div class=\"text-xs text-gray-400 mt-1\">Minitab \/ JMP<\/div><\/div>\r\n                                <\/a>\r\n                                <a class=\"p-3 rounded-xl hover:bg-indigo-50 dark:hover:bg-slate-700\/50 transition-colors no-underline flex items-start group\/item\" href=\"http:\/\/47.120.49.116\/index.php\/database\/\">\r\n                                    <div class=\"w-9 h-9 rounded-lg bg-indigo-100 dark:bg-indigo-900\/30 text-indigo-600 dark:text-indigo-400 flex items-center justify-center mr-3 mt-0.5\"><i class=\"fa-solid fa-database text-lg\"><\/i><\/div>\r\n                                    <div><div class=\"font-bold text-sm text-gray-800 dark:text-gray-100 group-hover\/item:text-indigo-500 transition-colors\">\u4f01\u4e1a\u6570\u636e\u5e93<\/div><div class=\"text-xs text-gray-400 mt-1\">\u9ad8\u53ef\u7528\u6570\u636e\u57fa\u7840\u8bbe\u65bd<\/div><\/div>\r\n                                <\/a>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <a class=\"px-4 py-2 text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium transition-colors text-sm no-underline rounded-lg hover:bg-gray-50 dark:hover:bg-white\/5\" href=\"http:\/\/47.120.49.116\/index.php\/contactus\/\">\u8054\u7cfb\u6211\u4eec<\/a>\r\n                <\/div>\r\n\r\n                <!-- \u53f3\u4fa7\u529f\u80fd\u533a -->\r\n                <div class=\"flex items-center gap-3\">\r\n                    <button id=\"theme-toggle\" class=\"w-9 h-9 rounded-full bg-gray-100 dark:bg-slate-800 text-gray-600 dark:text-yellow-400 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-slate-700 transition-all border-0 cursor-pointer active:scale-90\">\r\n                        <i class=\"fa-solid fa-sun hidden dark:block\"><\/i>\r\n                        <i class=\"fa-solid fa-moon block dark:hidden\"><\/i>\r\n                    <\/button>\r\n                    <a class=\"hidden md:flex btn-shine bg-slate-900 dark:bg-blue-600 text-white px-6 py-2.5 rounded-full font-medium text-sm shadow-lg shadow-blue-500\/30 no-underline border-0 items-center hover:shadow-xl hover:-translate-y-0.5 transition-all\" href=\"http:\/\/47.120.49.116\/index.php\/contactus\/\">\r\n                        <span>\u54a8\u8be2\u65b9\u6848<\/span> <i class=\"fa fa-arrow-right ml-2 text-xs\"><\/i>\r\n                    <\/a>\r\n                    <button id=\"menu-toggle\" class=\"md:hidden w-10 h-10 flex items-center justify-center bg-transparent border-0 text-gray-800 dark:text-white cursor-pointer text-2xl active:scale-90 transition-transform\">\r\n                        <i class=\"fa fa-bars\"><\/i>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/nav>\r\n        <\/div>\r\n        \r\n        <!-- \u79fb\u52a8\u7aef\u83dc\u5355 -->\r\n        <div id=\"mobile-menu\" class=\"hidden absolute top-full left-0 w-full bg-white dark:bg-slate-900 border-t border-gray-100 dark:border-slate-800 shadow-xl z-50 transition-all max-h-[85vh] overflow-y-auto\">\r\n            <div class=\"p-6 flex flex-col space-y-4\">\r\n                <a class=\"text-lg font-bold text-gray-800 dark:text-white border-b border-gray-50 dark:border-slate-800 pb-3 no-underline\" href=\"http:\/\/47.120.49.116\/\">\u9996\u9875<\/a>\r\n                <div class=\"space-y-3\">\r\n                    <div class=\"text-xs font-bold text-gray-400 uppercase tracking-widest\">\u6838\u5fc3\u670d\u52a1<\/div>\r\n                    <!-- 1. Microsoft -->\r\n                    <a class=\"flex items-center gap-3 p-3 bg-slate-50 dark:bg-slate-800 rounded-xl no-underline\" href=\"http:\/\/47.120.49.116\/index.php\/microsoft\/\">\r\n                        <i class=\"fa-brands fa-microsoft text-blue-500 w-5 text-center\"><\/i>\r\n                        <span class=\"text-gray-700 dark:text-gray-200 font-medium\">\u4f01\u4e1a\u7cfb\u7edf\u96c6\u6210<\/span>\r\n                    <\/a>\r\n                    <!-- 2. Virtualization -->\r\n                    <a class=\"flex items-center gap-3 p-3 bg-slate-50 dark:bg-slate-800 rounded-xl no-underline\" href=\"http:\/\/47.120.49.116\/index.php\/virtual\/\">\r\n                        <i class=\"fa fa-cloud text-purple-500 w-5 text-center\"><\/i>\r\n                        <span class=\"text-gray-700 dark:text-gray-200 font-medium\">\u865a\u62df\u5316\u89e3\u51b3\u65b9\u6848<\/span>\r\n                    <\/a>\r\n                    <!-- 3. Security -->\r\n                    <a class=\"flex items-center gap-3 p-3 bg-slate-50 dark:bg-slate-800 rounded-xl no-underline\" href=\"http:\/\/47.120.49.116\/index.php\/secure\/\">\r\n                        <i class=\"fa-solid fa-shield-halved text-green-500 w-5 text-center\"><\/i>\r\n                        <span class=\"text-gray-700 dark:text-gray-200 font-medium\">\u4fe1\u606f\u5b89\u5168<\/span>\r\n                    <\/a>\r\n                    <!-- 4. Design -->\r\n                    <a class=\"flex items-center gap-3 p-3 bg-slate-50 dark:bg-slate-800 rounded-xl no-underline\" href=\"http:\/\/47.120.49.116\/index.php\/design\/\">\r\n                        <i class=\"fa-solid fa-pen-ruler text-orange-500 w-5 text-center\"><\/i>\r\n                        <span class=\"text-gray-700 dark:text-gray-200 font-medium\">\u56fe\u5f62\u8bbe\u8ba1<\/span>\r\n                    <\/a>\r\n                    <!-- 5. Analysis -->\r\n                    <a class=\"flex items-center gap-3 p-3 bg-slate-50 dark:bg-slate-800 rounded-xl no-underline\" href=\"http:\/\/47.120.49.116\/index.php\/analysis\/\">\r\n                        <i class=\"fa-solid fa-chart-line text-cyan-500 w-5 text-center\"><\/i>\r\n                        <span class=\"text-gray-700 dark:text-gray-200 font-medium\">\u7edf\u8ba1\u5206\u6790<\/span>\r\n                    <\/a>\r\n                    <!-- 6. Database -->\r\n                    <a class=\"flex items-center gap-3 p-3 bg-slate-50 dark:bg-slate-800 rounded-xl no-underline\" href=\"http:\/\/47.120.49.116\/index.php\/database\/\">\r\n                        <i class=\"fa-solid fa-database text-indigo-500 w-5 text-center\"><\/i>\r\n                        <span class=\"text-gray-700 dark:text-gray-200 font-medium\">\u4f01\u4e1a\u6570\u636e\u5e93<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                <a class=\"text-lg font-bold text-gray-800 dark:text-white border-b border-gray-50 dark:border-slate-800 pb-3 pt-2 no-underline\" href=\"http:\/\/47.120.49.116\/index.php\/contactus\/\">\u5173\u4e8e\u6211\u4eec<\/a>\r\n                <a class=\"flex justify-center items-center w-full bg-blue-600 text-white py-3.5 rounded-xl font-bold no-underline shadow-lg active:scale-95 transition-transform\" href=\"http:\/\/47.120.49.116\/index.php\/contactus\/\">\r\n                    \u514d\u8d39\u54a8\u8be2\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/header>\r\n\r\n    <!-- \u82f1\u96c4\u533a\u57df (Canvas \u80cc\u666f\u66f4\u65b0) -->\r\n    <section id=\"home\" class=\"relative w-full pt-32 pb-16 md:pt-48 md:pb-32 overflow-hidden smooth-transition\">\r\n        \r\n        <!-- Canvas \u52a8\u6001\u80cc\u666f (\u7c92\u5b50\u7f51\u7edc) -->\r\n        <canvas id=\"hero-canvas\"><\/canvas>\r\n\r\n        <!-- \u9759\u6001\u5149\u6548 -->\r\n        <div class=\"absolute top-0 right-0 w-[400px] md:w-[600px] h-[400px] md:h-[600px] bg-blue-500\/20 rounded-full blur-[80px] md:blur-[100px] pointer-events-none mix-blend-screen dark:opacity-30 opacity-60 z-0\"><\/div>\r\n        <div class=\"absolute bottom-0 left-0 w-[400px] md:w-[600px] h-[400px] md:h-[600px] bg-purple-500\/10 rounded-full blur-[80px] md:blur-[100px] pointer-events-none mix-blend-screen dark:opacity-30 opacity-60 z-0\"><\/div>\r\n\r\n        <div class=\"max-w-[1400px] mx-auto px-4 sm:px-6 relative z-10\">\r\n            <div class=\"flex flex-col lg:flex-row items-center gap-12 lg:gap-20\">\r\n                <!-- \u6587\u672c\u533a\u57df -->\r\n                <div class=\"flex-1 text-center lg:text-left fade-in-up\">\r\n                    <div class=\"inline-flex items-center px-3 py-1.5 rounded-full bg-blue-50 dark:bg-blue-500\/10 border border-blue-100 dark:border-blue-500\/20 text-blue-600 dark:text-blue-400 text-xs md:text-sm font-semibold mb-6\">\r\n                        <span class=\"w-2 h-2 rounded-full bg-blue-500 mr-2 animate-pulse\"><\/span> \r\n                        \u8d4b\u80fd\u4f01\u4e1a\u6570\u5b57\u5316\u8f6c\u578b\r\n                    <\/div>\r\n                    \r\n                    <h1 class=\"clamp-title font-bold mb-6 tracking-tight text-gray-900 dark:text-white\">\r\n                        \u79d1\u6280\u8d4b\u80fd<br\/>\r\n                        <span class=\"text-gradient\">\u667a\u9886\u672a\u6765<\/span>\r\n                    <\/h1>\r\n                    \r\n                    <p class=\"text-gray-500 dark:text-gray-400 text-base md:text-xl mb-8 md:mb-10 max-w-2xl mx-auto lg:mx-0 leading-relaxed\">\r\n                        \u4f5c\u4e3a\u5168\u65b9\u4f4d\u7684IT\u89e3\u51b3\u65b9\u6848\u4e13\u5bb6\uff0c\u6211\u4eec\u5229\u7528\u524d\u6cbf\u6280\u672f\u5e2e\u52a9\u4f01\u4e1a\u6784\u5efa\u5b89\u5168\u3001\u9ad8\u6548\u7684\u6570\u5b57\u5e95\u5ea7\uff0c\u9a71\u52a8\u4e1a\u52a1\u6301\u7eed\u589e\u957f\u3002\r\n                    <\/p>\r\n                    \r\n                    <div class=\"flex flex-col sm:flex-row justify-center lg:justify-start gap-4\">\r\n                        <a class=\"btn-shine bg-slate-900 dark:bg-blue-600 text-white px-8 py-3.5 rounded-xl font-bold hover:shadow-xl hover:shadow-blue-500\/20 transition-all no-underline border-0 flex items-center justify-center\" href=\"http:\/\/47.120.49.116\/index.php\/contactus\/\">\r\n                            \u514d\u8d39\u54a8\u8be2\u65b9\u6848 <i class=\"fa fa-angle-right ml-2\"><\/i>\r\n                        <\/a>\r\n                        <a class=\"px-8 py-3.5 rounded-xl font-bold text-gray-700 dark:text-gray-200 bg-transparent border border-gray-200 dark:border-slate-700 hover:border-blue-400 hover:text-blue-600 dark:hover:text-blue-400 transition-all no-underline flex items-center justify-center\" href=\"#services\">\r\n                            \u63a2\u7d22\u670d\u52a1\r\n                        <\/a>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- \u56fe\u7247\u4e0e\u6d6e\u52a8\u5143\u7d20 -->\r\n                <div class=\"flex-1 w-full relative fade-in-up\" style=\"transition-delay: 150ms;\">\r\n                    <div class=\"relative animate-float mx-auto max-w-[400px] lg:max-w-full\">\r\n                        <div class=\"absolute inset-0 bg-gradient-to-tr from-blue-600\/20 to-purple-500\/20 rounded-[2rem] transform rotate-3 blur-2xl -z-10\"><\/div>\r\n                        \r\n                        <img decoding=\"async\" class=\"w-full h-auto object-cover rounded-[2rem] shadow-2xl border border-white\/50 dark:border-white\/10\" src=\"http:\/\/47.120.49.116\/wp-content\/uploads\/2026\/01\/ai-generated-9328763_1280.png\" alt=\"Tech Visualization\" \/>\r\n                        \r\n                        <!-- \u60ac\u6d6e\u76d1\u63a7\u5361\u7247 -->\r\n                        <div class=\"absolute -bottom-6 left-2 md:bottom-8 md:-left-8 glass-badge p-3 md:p-4 rounded-xl flex items-center gap-3 md:gap-4 animate-bounce z-20\" style=\"animation-duration: 3s; will-change: transform;\">\r\n                            <div class=\"w-10 h-10 md:w-12 md:h-12 rounded-full bg-green-500\/10 flex items-center justify-center text-green-500\">\r\n                                <i class=\"fa-solid fa-chart-line text-lg md:text-xl\"><\/i>\r\n                            <\/div>\r\n                            <div>\r\n                                <div class=\"text-[10px] md:text-xs text-gray-500 dark:text-gray-300 font-medium uppercase\">System Status<\/div>\r\n                                <div class=\"text-sm md:text-base font-bold text-gray-800 dark:text-white\">100% \u5b9e\u65f6\u76d1\u63a7<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                         <!-- \u88c5\u9970\u56fe\u6807 -->\r\n                         <div class=\"absolute -top-4 -right-2 md:-right-4 w-10 h-10 md:w-12 md:h-12 bg-blue-600 rounded-lg flex items-center justify-center text-white shadow-lg animate-spin-slow z-20\">\r\n                            <i class=\"fa-solid fa-gear text-lg md:text-xl\"><\/i>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- \u5408\u4f5c\u4f19\u4f34 Logo \u6eda\u52a8 -->\r\n        <div class=\"mt-24 border-y border-gray-100 dark:border-white\/5 bg-gray-50\/50 dark:bg-white\/[0.02] py-10 z-10 relative\">\r\n            <div class=\"max-w-[1400px] mx-auto px-4\">\r\n                <p class=\"text-center text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-widest mb-8\">Trusted by Industry Leaders<\/p>\r\n                <div class=\"relative w-full overflow-hidden\" style=\"mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\">\r\n                    <div class=\"flex animate-scroll whitespace-nowrap w-max\">\r\n                        <div class=\"flex gap-12 md:gap-20 items-center px-4 text-3xl text-gray-300 dark:text-slate-600\">\r\n                            <i class=\"fa-brands fa-microsoft hover:text-blue-500 transition-colors\"><\/i>\r\n                            <i class=\"fa-brands fa-aws hover:text-orange-500 transition-colors\"><\/i>\r\n                            <i class=\"fa-brands fa-google hover:text-red-500 transition-colors\"><\/i>\r\n                            <i class=\"fa-brands fa-linux hover:text-yellow-500 transition-colors\"><\/i>\r\n                            <i class=\"fa-brands fa-docker hover:text-blue-400 transition-colors\"><\/i>\r\n                            <i class=\"fa-brands fa-java hover:text-red-400 transition-colors\"><\/i>\r\n                            <i class=\"fa-brands fa-python hover:text-yellow-400 transition-colors\"><\/i>\r\n                            <!-- \u91cd\u590d\u4ee5\u5b9e\u73b0\u65e0\u7f1d -->\r\n                            <i class=\"fa-brands fa-microsoft hover:text-blue-500 transition-colors\"><\/i>\r\n                            <i class=\"fa-brands fa-aws hover:text-orange-500 transition-colors\"><\/i>\r\n                            <i class=\"fa-brands fa-google hover:text-red-500 transition-colors\"><\/i>\r\n                            <i class=\"fa-brands fa-linux hover:text-yellow-500 transition-colors\"><\/i>\r\n                            <i class=\"fa-brands fa-docker hover:text-blue-400 transition-colors\"><\/i>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u6838\u5fc3\u670d\u52a1\u677f\u5757 (H3 \u5b57\u4f53\u5df2\u653e\u5927) -->\r\n    <section id=\"services\" class=\"py-24 bg-slate-50 dark:bg-dark-bg relative smooth-transition\">\r\n        <div class=\"max-w-[1400px] mx-auto px-4 sm:px-6 relative z-10\">\r\n            <div class=\"text-center max-w-3xl mx-auto mb-16 fade-in-up\">\r\n                <span class=\"text-blue-600 dark:text-blue-400 font-bold tracking-wider text-xs md:text-sm uppercase mb-3 block\">Our Solutions<\/span>\r\n                <h2 class=\"clamp-subtitle font-bold text-gray-900 dark:text-white mb-6\">\u6838\u5fc3\u670d\u52a1\u4f53\u7cfb<\/h2>\r\n                <div class=\"w-16 h-1.5 bg-blue-600 mx-auto rounded-full\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8\">\r\n                <!-- Card 1 -->\r\n                <a href=\"http:\/\/47.120.49.116\/index.php\/microsoft\/\" class=\"no-underline group hover-card-3d bg-white dark:bg-dark-card border border-gray-100 dark:border-dark-border rounded-2xl p-8 relative overflow-hidden fade-in-up flex flex-col h-full\">\r\n                    <div class=\"absolute top-0 right-0 w-32 h-32 bg-blue-50 dark:bg-blue-900\/10 rounded-bl-[100px] -mr-8 -mt-8 transition-transform group-hover:scale-150 z-0\"><\/div>\r\n                    <div class=\"relative z-10 flex flex-col h-full\">\r\n                        <div class=\"w-14 h-14 rounded-xl bg-white dark:bg-slate-700 shadow-sm flex items-center justify-center mb-6 text-2xl text-blue-600 dark:text-blue-400 group-hover:text-white group-hover:bg-blue-600 transition-colors\">\r\n                            <i class=\"fa-brands fa-microsoft\"><\/i>\r\n                        <\/div>\r\n                        <h3 class=\"text-2xl md:text-3xl font-bold text-gray-800 dark:text-white mb-3\">\u4f01\u4e1a\u7cfb\u7edf\u96c6\u6210<\/h3>\r\n                        <p class=\"text-gray-500 dark:text-gray-400 text-sm leading-relaxed mb-6 flex-grow\">\u5fae\u8f6f\u5b98\u65b9\u6388\u6743\u5408\u4f5c\u4f19\u4f34\uff0c\u63d0\u4f9bWindows\/Server\u7cfb\u5217\u6b63\u7248\u6388\u6743\u4e0e\u90e8\u7f72\u3002<\/p>\r\n                        <span class=\"inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold text-sm group-hover:translate-x-2 transition-transform\">\u4e86\u89e3\u8be6\u60c5 <i class=\"fa fa-arrow-right ml-2\"><\/i><\/span>\r\n                    <\/div>\r\n                <\/a>\r\n\r\n                <!-- Card 2 -->\r\n                <a href=\"http:\/\/47.120.49.116\/index.php\/virtual\/\" class=\"no-underline group hover-card-3d bg-white dark:bg-dark-card border border-gray-100 dark:border-dark-border rounded-2xl p-8 relative overflow-hidden fade-in-up flex flex-col h-full\" style=\"transition-delay: 50ms;\">\r\n                    <div class=\"absolute top-0 right-0 w-32 h-32 bg-purple-50 dark:bg-purple-900\/10 rounded-bl-[100px] -mr-8 -mt-8 transition-transform group-hover:scale-150 z-0\"><\/div>\r\n                    <div class=\"relative z-10 flex flex-col h-full\">\r\n                        <div class=\"w-14 h-14 rounded-xl bg-white dark:bg-slate-700 shadow-sm flex items-center justify-center mb-6 text-2xl text-purple-600 dark:text-purple-400 group-hover:text-white group-hover:bg-purple-600 transition-colors\">\r\n                            <i class=\"fa fa-cloud\"><\/i>\r\n                        <\/div>\r\n                        <h3 class=\"text-2xl md:text-3xl font-bold text-gray-800 dark:text-white mb-3\">\u865a\u62df\u5316\u89e3\u51b3\u65b9\u6848<\/h3>\r\n                        <p class=\"text-gray-500 dark:text-gray-400 text-sm leading-relaxed mb-6 flex-grow\">\u6574\u5408 VMware \u53ca\u8d85\u878d\u5408\u67b6\u6784\uff0c\u6ee1\u8db3\u9ad8\u53ef\u7528\u4e1a\u52a1\u9700\u6c42\u3002<\/p>\r\n                        <span class=\"inline-flex items-center text-purple-600 dark:text-purple-400 font-semibold text-sm group-hover:translate-x-2 transition-transform\">\u4e86\u89e3\u8be6\u60c5 <i class=\"fa fa-arrow-right ml-2\"><\/i><\/span>\r\n                    <\/div>\r\n                <\/a>\r\n\r\n                 <!-- Card 3 -->\r\n                <a href=\"http:\/\/47.120.49.116\/index.php\/secure\/\" class=\"no-underline group hover-card-3d bg-white dark:bg-dark-card border border-gray-100 dark:border-dark-border rounded-2xl p-8 relative overflow-hidden fade-in-up flex flex-col h-full\" style=\"transition-delay: 100ms;\">\r\n                    <div class=\"absolute top-0 right-0 w-32 h-32 bg-green-50 dark:bg-green-900\/10 rounded-bl-[100px] -mr-8 -mt-8 transition-transform group-hover:scale-150 z-0\"><\/div>\r\n                    <div class=\"relative z-10 flex flex-col h-full\">\r\n                        <div class=\"w-14 h-14 rounded-xl bg-white dark:bg-slate-700 shadow-sm flex items-center justify-center mb-6 text-2xl text-green-600 dark:text-green-400 group-hover:text-white group-hover:bg-green-600 transition-colors\">\r\n                            <i class=\"fa-solid fa-shield-halved\"><\/i>\r\n                        <\/div>\r\n                        <h3 class=\"text-2xl md:text-3xl font-bold text-gray-800 dark:text-white mb-3\">\u4fe1\u606f\u5b89\u5168<\/h3>\r\n                        <p class=\"text-gray-500 dark:text-gray-400 text-sm leading-relaxed mb-6 flex-grow\">\u5168\u6808\u5f0f\u4fe1\u606f\u5b89\u5168\u7eb5\u6df1\u9632\u5fa1\u4f53\u7cfb\u3002<\/p>\r\n                        <span class=\"inline-flex items-center text-green-600 dark:text-green-400 font-semibold text-sm group-hover:translate-x-2 transition-transform\">\u4e86\u89e3\u8be6\u60c5 <i class=\"fa fa-arrow-right ml-2\"><\/i><\/span>\r\n                    <\/div>\r\n                <\/a>\r\n                \r\n                <!-- Card 4 -->\r\n                <a href=\"http:\/\/47.120.49.116\/index.php\/design\/\" class=\"no-underline group hover-card-3d bg-white dark:bg-dark-card border border-gray-100 dark:border-dark-border rounded-2xl p-8 relative overflow-hidden fade-in-up flex flex-col h-full\" style=\"transition-delay: 150ms;\">\r\n                    <div class=\"absolute top-0 right-0 w-32 h-32 bg-orange-50 dark:bg-orange-900\/10 rounded-bl-[100px] -mr-8 -mt-8 transition-transform group-hover:scale-150 z-0\"><\/div>\r\n                    <div class=\"relative z-10 flex flex-col h-full\">\r\n                        <div class=\"w-14 h-14 rounded-xl bg-white dark:bg-slate-700 shadow-sm flex items-center justify-center mb-6 text-2xl text-orange-500 dark:text-orange-400 group-hover:text-white group-hover:bg-orange-500 transition-colors\">\r\n                            <i class=\"fa-solid fa-pen-ruler\"><\/i>\r\n                        <\/div>\r\n                        <h3 class=\"text-2xl md:text-3xl font-bold text-gray-800 dark:text-white mb-3\">\u56fe\u5f62\u8bbe\u8ba1<\/h3>\r\n                        <p class=\"text-gray-500 dark:text-gray-400 text-sm leading-relaxed mb-6 flex-grow\">Autodesk\u53ca\u897f\u95e8\u5b50PTC\u89e3\u51b3\u65b9\u6848\u3002<\/p>\r\n                        <span class=\"inline-flex items-center text-orange-500 dark:text-orange-400 font-semibold text-sm group-hover:translate-x-2 transition-transform\">\u4e86\u89e3\u8be6\u60c5 <i class=\"fa fa-arrow-right ml-2\"><\/i><\/span>\r\n                    <\/div>\r\n                <\/a>\r\n                \r\n                 <!-- Card 5 -->\r\n                 <a href=\"http:\/\/47.120.49.116\/index.php\/analysis\/\" class=\"no-underline group hover-card-3d bg-white dark:bg-dark-card border border-gray-100 dark:border-dark-border rounded-2xl p-8 relative overflow-hidden fade-in-up flex flex-col h-full\" style=\"transition-delay: 200ms;\">\r\n                    <div class=\"absolute top-0 right-0 w-32 h-32 bg-cyan-50 dark:bg-cyan-900\/10 rounded-bl-[100px] -mr-8 -mt-8 transition-transform group-hover:scale-150 z-0\"><\/div>\r\n                    <div class=\"relative z-10 flex flex-col h-full\">\r\n                        <div class=\"w-14 h-14 rounded-xl bg-white dark:bg-slate-700 shadow-sm flex items-center justify-center mb-6 text-2xl text-cyan-600 dark:text-cyan-400 group-hover:text-white group-hover:bg-cyan-600 transition-colors\">\r\n                            <i class=\"fa-solid fa-chart-line\"><\/i>\r\n                        <\/div>\r\n                        <h3 class=\"text-2xl md:text-3xl font-bold text-gray-800 dark:text-white mb-3\">\u7edf\u8ba1\u5206\u6790<\/h3>\r\n                        <p class=\"text-gray-500 dark:text-gray-400 text-sm leading-relaxed mb-6 flex-grow\">Minitab\u4e0eJMP\u53cc\u5e73\u53f0\u534f\u540c\uff0c\u6df1\u5ea6\u6316\u6398\u6570\u636e\u4ef7\u503c\u3002<\/p>\r\n                        <span class=\"inline-flex items-center text-cyan-600 dark:text-cyan-400 font-semibold text-sm group-hover:translate-x-2 transition-transform\">\u4e86\u89e3\u8be6\u60c5 <i class=\"fa fa-arrow-right ml-2\"><\/i><\/span>\r\n                    <\/div>\r\n                <\/a>\r\n                \r\n                 <!-- Card 6 -->\r\n                 <a href=\"http:\/\/47.120.49.116\/index.php\/database\/\" class=\"no-underline group hover-card-3d bg-white dark:bg-dark-card border border-gray-100 dark:border-dark-border rounded-2xl p-8 relative overflow-hidden fade-in-up flex flex-col h-full\" style=\"transition-delay: 250ms;\">\r\n                    <div class=\"absolute top-0 right-0 w-32 h-32 bg-indigo-50 dark:bg-indigo-900\/10 rounded-bl-[100px] -mr-8 -mt-8 transition-transform group-hover:scale-150 z-0\"><\/div>\r\n                    <div class=\"relative z-10 flex flex-col h-full\">\r\n                        <div class=\"w-14 h-14 rounded-xl bg-white dark:bg-slate-700 shadow-sm flex items-center justify-center mb-6 text-2xl text-indigo-600 dark:text-indigo-400 group-hover:text-white group-hover:bg-indigo-600 transition-colors\">\r\n                            <i class=\"fa-solid fa-database\"><\/i>\r\n                        <\/div>\r\n                        <h3 class=\"text-2xl md:text-3xl font-bold text-gray-800 dark:text-white mb-3\">\u4f01\u4e1a\u7ea7\u6570\u636e\u5e93<\/h3>\r\n                        <p class=\"text-gray-500 dark:text-gray-400 text-sm leading-relaxed mb-6 flex-grow\">\u6784\u5efa\u9ad8\u53ef\u7528\u3001\u9ad8\u6027\u80fd\u3001\u5b89\u5168\u53ef\u6269\u5c55\u7684\u6570\u636e\u57fa\u7840\u8bbe\u65bd\u3002<\/p>\r\n                        <span class=\"inline-flex items-center text-indigo-600 dark:text-indigo-400 font-semibold text-sm group-hover:translate-x-2 transition-transform\">\u4e86\u89e3\u8be6\u60c5 <i class=\"fa fa-arrow-right ml-2\"><\/i><\/span>\r\n                    <\/div>\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u884c\u4e1a\u6d1e\u5bdf\u62a5\u544a -->\r\n    <section id=\"services-mss\" class=\"py-24 bg-white dark:bg-dark-bg relative smooth-transition\">\r\n        <!-- \u7eb9\u7406\u5c42 -->\r\n        <div class=\"hidden dark:block absolute inset-0 bg-[url('https:\/\/www.transparenttextures.com\/patterns\/carbon-fibre.png')] opacity-10 pointer-events-none\"><\/div>\r\n\r\n        <div class=\"max-w-[1400px] mx-auto px-4 sm:px-6 relative z-10\">\r\n            <div class=\"text-center max-w-3xl mx-auto mb-20 fade-in-up\">\r\n                <span class=\"text-green-600 dark:text-green-400 font-bold tracking-wider text-xs uppercase mb-2 block\">INDUSTRY INSIGHTS<\/span>\r\n                <h2 class=\"clamp-subtitle font-bold text-gray-900 dark:text-white mb-4\">\u884c\u4e1a\u6d1e\u5bdf\u62a5\u544a<\/h2>\r\n                <p class=\"text-gray-500 dark:text-gray-400 text-lg\">\u4f01\u4e1aIT\u57fa\u7840\u8bbe\u65bd\u4e0e\u6570\u5b57\u5316\u8f6c\u578b<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-6\">\r\n                <!-- MDR -->\r\n                <div class=\"group relative overflow-hidden rounded-2xl p-8 min-h-[300px] fade-in-up bg-slate-50 dark:bg-dark-card border border-gray-100 dark:border-dark-border\">\r\n                    <div class=\"absolute inset-0 bg-cover bg-center transition-all duration-500 group-hover:scale-110 opacity-0 group-hover:opacity-100\" style=\"background-image: url('http:\/\/47.120.49.116\/wp-content\/uploads\/2026\/01\/CaseISP.jpg');\"><\/div>\r\n                    <div class=\"absolute inset-0 bg-black\/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300\"><\/div>\r\n                    \r\n                    <div class=\"relative z-10 h-full flex flex-col\">\r\n                        <div class=\"text-4xl text-blue-600 dark:text-blue-400 mb-5 group-hover:text-white transition-colors\"><i class=\"fa-solid fa-virus-slash\"><\/i><\/div>\r\n                        <h4 class=\"text-xl font-bold mb-2 text-gray-800 dark:text-white group-hover:text-white\">\u4f01\u4e1a\u7ea7\u64cd\u4f5c\u7cfb\u7edf\u4e0e\u670d\u52a1\u5668\u8f6f\u4ef6\u751f\u6001<\/h4>\r\n                        <p class=\"text-gray-500 dark:text-gray-400 text-sm mb-6 flex-grow group-hover:text-gray-200\">\u5fae\u8f6f\u4e91\u539f\u751f\u8f6c\u578b\u8def\u5f84<\/p>\r\n                        <a class=\"inline-flex items-center text-blue-600 dark:text-blue-400 group-hover:text-white font-bold text-sm no-underline\" href=\"http:\/\/47.120.49.116\/index.php\/hybrid\/\">\u4e86\u89e3\u66f4\u591a <i class=\"fa fa-arrow-right ml-2\"><\/i><\/a>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- MNAS -->\r\n                <div class=\"group relative overflow-hidden rounded-2xl p-8 min-h-[300px] fade-in-up bg-slate-50 dark:bg-dark-card border border-gray-100 dark:border-dark-border\" style=\"transition-delay: 50ms;\">\r\n                    <div class=\"absolute inset-0 bg-cover bg-center transition-all duration-500 group-hover:scale-110 opacity-0 group-hover:opacity-100\" style=\"background-image: url('http:\/\/47.120.49.116\/wp-content\/uploads\/2026\/01\/CaseAutomatic.jpg');\"><\/div>\r\n                    <div class=\"absolute inset-0 bg-black\/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300\"><\/div>\r\n                    <div class=\"relative z-10 h-full flex flex-col\">\r\n                        <div class=\"text-4xl text-blue-600 dark:text-blue-400 mb-5 group-hover:text-white transition-colors\"><i class=\"fa-solid fa-network-wired\"><\/i><\/div>\r\n                        <h4 class=\"text-xl font-bold mb-2 text-gray-800 dark:text-white group-hover:text-white\">\u4e13\u4e1a\u8bbe\u8ba1\u8f6f\u4ef6\u5728\u5de5\u4e1a\u4e0e\u521b\u610f\u9886\u57df\u7684\u6df1\u5ea6\u878d\u5408<\/h4>\r\n                        <p class=\"text-gray-500 dark:text-gray-400 text-sm mb-6 flex-grow group-hover:text-gray-200\">BIM\u4e0e\u5de5\u4e1a4.0\u7684\u534f\u540c\u521b\u65b0<\/p>\r\n                        <a class=\"inline-flex items-center text-blue-600 dark:text-blue-400 group-hover:text-white font-bold text-sm no-underline\" href=\"http:\/\/47.120.49.116\/index.php\/mix\/\">\u4e86\u89e3\u66f4\u591a <i class=\"fa fa-arrow-right ml-2\"><\/i><\/a>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- MES -->\r\n                <div class=\"group relative overflow-hidden rounded-2xl p-8 min-h-[300px] fade-in-up bg-slate-50 dark:bg-dark-card border border-gray-100 dark:border-dark-border\" style=\"transition-delay: 100ms;\">\r\n                    <div class=\"absolute inset-0 bg-cover bg-center transition-all duration-500 group-hover:scale-110 opacity-0 group-hover:opacity-100\" style=\"background-image: url('http:\/\/47.120.49.116\/wp-content\/uploads\/2026\/01\/HPCompliance.jpg');\"><\/div>\r\n                    <div class=\"absolute inset-0 bg-black\/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300\"><\/div>\r\n                    <div class=\"relative z-10 h-full flex flex-col\">\r\n                        <div class=\"text-4xl text-blue-600 dark:text-blue-400 mb-5 group-hover:text-white transition-colors\"><i class=\"fa-solid fa-envelope-open-text\"><\/i><\/div>\r\n                        <h4 class=\"text-xl font-bold mb-2 text-gray-800 dark:text-white group-hover:text-white\">\u4fe1\u606f\u5b89\u5168\u9632\u62a4\u4f53\u7cfb<\/h4>\r\n                        <p class=\"text-gray-500 dark:text-gray-400 text-sm mb-6 flex-grow group-hover:text-gray-200\">\u5185\u7f51\u7ba1\u7406\u4e0e\u6570\u636e\u9632\u6cc4\u6f0f\uff08DLP\uff09<\/p>\r\n                        <a class=\"inline-flex items-center text-blue-600 dark:text-blue-400 group-hover:text-white font-bold text-sm no-underline\" href=\"http:\/\/47.120.49.116\/index.php\/dlp\/\">\u4e86\u89e3\u66f4\u591a <i class=\"fa fa-arrow-right ml-2\"><\/i><\/a>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- MWAF -->\r\n                <div class=\"group relative overflow-hidden rounded-2xl p-8 min-h-[300px] fade-in-up bg-slate-50 dark:bg-dark-card border border-gray-100 dark:border-dark-border\" style=\"transition-delay: 150ms;\">\r\n                    <div class=\"absolute inset-0 bg-cover bg-center transition-all duration-500 group-hover:scale-110 opacity-0 group-hover:opacity-100\" style=\"background-image: url('http:\/\/47.120.49.116\/wp-content\/uploads\/2026\/01\/HP1.png');\"><\/div>\r\n                    <div class=\"absolute inset-0 bg-black\/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300\"><\/div>\r\n                    <div class=\"relative z-10 h-full flex flex-col\">\r\n                        <div class=\"text-4xl text-blue-600 dark:text-blue-400 mb-5 group-hover:text-white transition-colors\"><i class=\"fa-solid fa-globe\"><\/i><\/div>\r\n                        <h4 class=\"text-xl font-bold mb-2 text-gray-800 dark:text-white group-hover:text-white\">\u865a\u62df\u5316\u4e0e\u4e91\u8ba1\u7b97\u57fa\u7840\u8bbe\u65bd<\/h4>\r\n                        <p class=\"text-gray-500 dark:text-gray-400 text-sm mb-6 flex-grow group-hover:text-gray-200\">\u8d85\u878d\u5408\u4e00\u4f53\u673a\u7684\u7b80\u5316\u8fd0\u7ef4<\/p>\r\n                        <a class=\"inline-flex items-center text-blue-600 dark:text-blue-400 group-hover:text-white font-bold text-sm no-underline\" href=\"http:\/\/47.120.49.116\/index.php\/super\/\">\u4e86\u89e3\u66f4\u591a <i class=\"fa fa-arrow-right ml-2\"><\/i><\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u6848\u4f8b\u5c55\u793a (\u4fee\u590d\uff1a\u624b\u673a\u7aef\u6587\u5b57\u5bf9\u9f50\u95ee\u9898\u4e0e\u67e5\u770b\u5168\u90e8\u6309\u94ae\u53ef\u89c1\u6027) -->\r\n    <section id=\"cases\" class=\"py-24 bg-slate-50 dark:bg-dark-bg pb-48 relative smooth-transition\">\r\n        <div class=\"max-w-[1400px] mx-auto px-4 sm:px-6\">\r\n            <!-- \u4fee\u590d\uff1aitems-end \u6539\u4e3a items-start md:items-end \u4ee5\u9002\u5e94\u624b\u673a\u7aef -->\r\n            <div class=\"flex flex-col md:flex-row justify-between items-start md:items-end mb-12 fade-in-up\">\r\n                <div class=\"max-w-2xl\">\r\n                    <span class=\"text-blue-600 dark:text-blue-400 font-bold tracking-wider text-xs uppercase mb-2 block\">Case Studies<\/span>\r\n                    <h2 class=\"clamp-subtitle font-bold text-gray-900 dark:text-white\">\u6210\u529f\u6848\u4f8b<\/h2>\r\n                <\/div>\r\n                <!-- \u4fee\u590d\uff1a\u53bb\u9664\u4e86 'hidden' \u7c7b\uff0c\u4f7f\u5176\u5728\u624b\u673a\u7aef\u4e5f\u663e\u793a -->\r\n                <a class=\"inline-flex items-center text-blue-600 dark:text-blue-400 font-bold hover:text-blue-800 dark:hover:text-blue-300 transition-colors no-underline mt-4 md:mt-0\" href=\"http:\/\/47.120.49.116\/index.php\/morecases\">\r\n                    \u67e5\u770b\u5168\u90e8 <i class=\"fa fa-arrow-right ml-2\"><\/i>\r\n                <\/a>\r\n            <\/div>\r\n\r\n            <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n                <!-- Case 1: \u751f\u7269\u533b\u836f -->\r\n                <article class=\"group bg-white dark:bg-dark-card rounded-2xl overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-300 fade-in-up border border-gray-100 dark:border-dark-border\">\r\n                    <div class=\"relative h-56 overflow-hidden\">\r\n                        <div class=\"absolute inset-0 bg-gray-900\/10 group-hover:bg-transparent transition-colors z-10\"><\/div>\r\n                        <!-- \u56fe\u7247\u66ff\u6362\uff1a\u751f\u7269\u533b\u836f\/\u5b9e\u9a8c\u5ba4\u573a\u666f -->\r\n                        <img decoding=\"async\" class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\" src=\"https:\/\/images.unsplash.com\/photo-1579684385127-1ef15d508118?auto=format&#038;fit=crop&#038;q=80&#038;w=800\" alt=\"Bio Medical\" \/>\r\n                        <div class=\"absolute bottom-4 left-4 z-20\">\r\n                            <span class=\"inline-block bg-white\/90 backdrop-blur text-blue-800 text-xs px-3 py-1 rounded-full font-bold shadow-sm\">\u751f\u7269\u533b\u836f<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"p-6 md:p-8\">\r\n                        <h3 class=\"text-lg font-bold mb-3 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors\">\u67d0\u56fd\u5185TOP10\u751f\u7269\u5236\u836f\u4f01\u4e1a\u9762\u4e34\u4e09\u5927\u6311\u6218<\/h3>\r\n                        <p class=\"text-gray-500 dark:text-gray-400 text-sm line-clamp-3 mb-6\">\u6784\u5efa\u7edf\u4e00\u4e34\u5e8a\u8bd5\u9a8c\u6570\u636e\u4ed3\u5e93\uff0c\u652f\u6301SQL\u548cR\u8bed\u8a00\u6df7\u5408\u5206\u6790\uff0c\u652f\u6301DOE\u5b9e\u9a8c\u8bbe\u8ba1\u3001\u8d28\u91cf\u63a7\u5236\u56fe\u3001\u751f\u5b58\u5206\u6790\u7b49\u5236\u836f\u4e13\u7528\u7b97\u6cd5\u3002<\/p>\r\n                        \r\n                    <\/div>\r\n                <\/article>\r\n\r\n                <!-- Case 2: \u667a\u80fd\u5236\u9020 -->\r\n                <article class=\"group bg-white dark:bg-dark-card rounded-2xl overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-300 fade-in-up border border-gray-100 dark:border-dark-border\" style=\"transition-delay: 50ms;\">\r\n                    <div class=\"relative h-56 overflow-hidden\">\r\n                        <div class=\"absolute inset-0 bg-gray-900\/10 group-hover:bg-transparent transition-colors z-10\"><\/div>\r\n                        <!-- \u56fe\u7247\u66ff\u6362\uff1a\u5de5\u4e1a\/\u667a\u80fd\u5236\u9020\u573a\u666f -->\r\n                        <img decoding=\"async\" class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\" src=\"https:\/\/images.unsplash.com\/photo-1581091226825-a6a2a5aee158?auto=format&#038;fit=crop&#038;q=80&#038;w=800\" alt=\"Smart Manufacturing\" \/>\r\n                         <div class=\"absolute bottom-4 left-4 z-20\">\r\n                            <span class=\"inline-block bg-white\/90 backdrop-blur text-blue-800 text-xs px-3 py-1 rounded-full font-bold shadow-sm\">\u667a\u80fd\u5236\u9020<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"p-6 md:p-8\">\r\n                        <h3 class=\"text-lg font-bold mb-3 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors\">\u67d0\u5927\u578b\u88c5\u5907\u5236\u9020\u4f01\u4e1a\u5bf9\u4f9b\u5e94\u94fe\u7684\u5b9e\u65f6\u53ef\u89c6\u5316\u76d1\u63a7<\/h3>\r\n                        <p class=\"text-gray-500 dark:text-gray-400 text-sm line-clamp-3 mb-6\">\u901a\u8fc7\u8bbe\u5907\u72b6\u6001\u76d1\u6d4b\u7cfb\u7edf\uff0c\u9884\u6d4b\u6027\u7ef4\u62a4\u51c6\u786e\u7387\u8fbe92%\uff0c\u5b9e\u73b0\u4f9b\u5e94\u5546\u8ba2\u5355\u3001\u7269\u6d41\u3001\u8d28\u68c0\u6570\u636e\u5b9e\u65f6\u540c\u6b65\uff0c\u5173\u952e\u7cfb\u7edf100%\u56fd\u4ea7\u5316\uff0c\u89c4\u907f\u6280\u672f\u5c01\u9501\u98ce\u9669\u3002<\/p>\r\n                       \r\n                    <\/div>\r\n                <\/article>\r\n                \r\n                 <!-- Case 3: \u96f6\u552e -->\r\n                <article class=\"group bg-white dark:bg-dark-card rounded-2xl overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-300 fade-in-up border border-gray-100 dark:border-dark-border\" style=\"transition-delay: 100ms;\">\r\n                    <div class=\"relative h-56 overflow-hidden\">\r\n                        <div class=\"absolute inset-0 bg-gray-900\/10 group-hover:bg-transparent transition-colors z-10\"><\/div>\r\n                        <!-- \u56fe\u7247\u66ff\u6362\uff1a\u96f6\u552e\/\u8d85\u5e02\u7ed3\u7b97\u573a\u666f -->\r\n                        <img decoding=\"async\" class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\" src=\"https:\/\/images.unsplash.com\/photo-1556740758-90de374c12ad?auto=format&#038;fit=crop&#038;q=80&#038;w=800\" alt=\"Retail\" \/>\r\n                         <div class=\"absolute bottom-4 left-4 z-20\">\r\n                            <span class=\"inline-block bg-white\/90 backdrop-blur text-blue-800 text-xs px-3 py-1 rounded-full font-bold shadow-sm\">\u96f6\u552e<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"p-6 md:p-8\">\r\n                        <h3 class=\"text-lg font-bold mb-3 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors\">\u67d0\u5168\u56fd\u6027\u8fde\u9501\u8d85\u5e02\u96c6\u56e2\u7f51\u7edc\u5b89\u5168\u4e8b\u4ef6<\/h3>\r\n                        <p class=\"text-gray-500 dark:text-gray-400 text-sm line-clamp-3 mb-6\">\u7f51\u7edc\u5b89\u5168\u4e8b\u4ef6\u4e0b\u964d95%\uff0c\u672a\u518d\u53d1\u751f\u6570\u636e\u6cc4\u9732\u4e8b\u4ef6\uff0c\u5b9e\u73b0\u5168\u57df\u5b9e\u65f6\u5a01\u80c1\u76d1\u6d4b\u3002\u95e8\u5e97\u6570\u636e\u53ef\u572815\u5206\u949f\u5185\u6062\u590d\uff0c\u786e\u4fdd\u4e1a\u52a1\u8fde\u7eed\u6027\u3002<\/p>\r\n                       \r\n                    <\/div>\r\n                <\/article>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u9875\u811a\u5bb9\u5668 -->\r\n    <section id=\"footer-section\" class=\"pt-32 pb-16 glass-footer text-gray-800 dark:text-white relative smooth-transition\">\r\n        \r\n        <!-- \u80cc\u666f\u5149\u6548 -->\r\n        <div class=\"absolute inset-0 overflow-hidden pointer-events-none z-0\">\r\n             <div class=\"absolute -bottom-20 -left-20 w-[500px] h-[500px] bg-blue-500\/10 rounded-full blur-[100px]\"><\/div>\r\n             <div class=\"absolute top-20 right-20 w-[300px] h-[300px] bg-purple-500\/10 rounded-full blur-[80px]\"><\/div>\r\n        <\/div>\r\n\r\n        <!-- \u60ac\u6d6eCTA\u5361\u7247 -->\r\n        <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-full max-w-5xl px-4 z-20\">\r\n            <div class=\"bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-900 dark:to-indigo-900 rounded-3xl p-8 md:p-12 shadow-2xl flex flex-col md:flex-row items-center justify-between gap-8 text-center md:text-left relative overflow-hidden border border-white\/10\">\r\n                <div class=\"absolute -right-20 -top-20 w-64 h-64 bg-white opacity-10 rounded-full blur-3xl pointer-events-none\"><\/div>\r\n                \r\n                <div class=\"relative z-10\">\r\n                    <h3 class=\"text-2xl md:text-3xl font-bold text-white mb-2\">\u51c6\u5907\u597d\u5f00\u542f\u6570\u5b57\u5316\u8f6c\u578b\u4e4b\u65c5\u4e86\u5417\uff1f<\/h3>\r\n                    <p class=\"text-blue-100 text-lg\">\u7acb\u5373\u8054\u7cfb\u6211\u4eec\u7684\u4e13\u5bb6\uff0c\u83b7\u53d6\u4e3a\u60a8\u5b9a\u5236\u7684IT\u89e3\u51b3\u65b9\u6848\u3002<\/p>\r\n                <\/div>\r\n                <div class=\"relative z-10\">\r\n                    <a href=\"http:\/\/47.120.49.116\/index.php\/contactus\/\" class=\"inline-block bg-white text-blue-700 hover:text-blue-800 px-8 py-3.5 rounded-full font-bold shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all no-underline\">\r\n                        \u7acb\u5373\u54a8\u8be2\u65b9\u6848\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"max-w-[1400px] mx-auto px-4 sm:px-6 relative z-10 mt-12\">\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12 border-b border-gray-200 dark:border-gray-800 pb-12\">\r\n                <!-- \u54c1\u724c -->\r\n                <div class=\"space-y-6\">\r\n                    <a class=\"flex items-center no-underline\" href=\"#\">\r\n                        <img decoding=\"async\" class=\"h-8 w-auto mr-2 dark:brightness-0 dark:invert\" src=\"http:\/\/47.120.49.116\/wp-content\/themes\/astra\/inc\/assets\/images\/starter-content\/building.svg\" alt=\"XYUnion\" \/>\r\n                        <span class=\"text-xl font-bold text-gray-900 dark:text-white\">\u903b\u6781\u4fe1\u606f<\/span>\r\n                    <\/a>\r\n                    <p class=\"text-gray-500 dark:text-gray-400 text-sm leading-relaxed\">\r\n                        \u6211\u4eec\u81f4\u529b\u4e8e\u7528\u79d1\u6280\u8d4b\u80fd\u4f01\u4e1a\uff0c\u901a\u8fc7\u521b\u65b0\u7684IT\u89e3\u51b3\u65b9\u6848\u91cd\u65b0\u5b9a\u4e49\u5546\u4e1a\u4ef7\u503c\u3002\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <!-- \u94fe\u63a5 -->\r\n                <div>\r\n                    <h4 class=\"text-lg font-bold text-gray-900 dark:text-white mb-6\">\u5feb\u901f\u94fe\u63a5<\/h4>\r\n                    <ul class=\"space-y-3\">\r\n                        <li><a class=\"text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-white text-sm no-underline transition-colors block py-1\" href=\"http:\/\/47.120.49.116\/\">\u9996\u9875<\/a><\/li>\r\n                        <li><a class=\"text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-white text-sm no-underline transition-colors block py-1\" href=\"#services\">\u670d\u52a1\u4f53\u7cfb<\/a><\/li>\r\n                        <li><a class=\"text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-white text-sm no-underline transition-colors block py-1\" href=\"#cases\">\u6210\u529f\u6848\u4f8b<\/a><\/li>\r\n                        <li><a class=\"text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-white text-sm no-underline transition-colors block py-1\" href=\"http:\/\/47.120.49.116\/index.php\/contactus\/\">\u5173\u4e8e\u6211\u4eec<\/a><\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n\r\n                <!-- \u670d\u52a1 -->\r\n                <div>\r\n                    <h4 class=\"text-lg font-bold text-gray-900 dark:text-white mb-6\">\u6838\u5fc3\u670d\u52a1<\/h4>\r\n                    <ul class=\"space-y-3\">\r\n                        <li><a class=\"text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-white text-sm no-underline transition-colors block py-1\" href=\"http:\/\/47.120.49.116\/index.php\/microsoft\/\">\u4f01\u4e1a\u7cfb\u7edf\u96c6\u6210<\/a><\/li>\r\n                        <li><a class=\"text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-white text-sm no-underline transition-colors block py-1\" href=\"http:\/\/47.120.49.116\/index.php\/virtual\/\">\u865a\u62df\u5316\u89e3\u51b3\u65b9\u6848<\/a><\/li>\r\n                        <li><a class=\"text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-white text-sm no-underline transition-colors block py-1\" href=\"http:\/\/47.120.49.116\/index.php\/secure\/\">\u4fe1\u606f\u5b89\u5168<\/a><\/li>\r\n\t\t\t<li><a class=\"text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-white text-sm no-underline transition-colors block py-1\" href=\"http:\/\/47.120.49.116\/index.php\/design\/\">\u56fe\u5f62\u8bbe\u8ba1<\/a><\/li>\r\n\t\t\t<li><a class=\"text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-white text-sm no-underline transition-colors block py-1\" href=\"http:\/\/47.120.49.116\/index.php\/analysis\/\">\u7edf\u8ba1\u5206\u6790<\/a><\/li>\r\n\t\t\t<li><a class=\"text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-white text-sm no-underline transition-colors block py-1\" href=\"http:\/\/47.120.49.116\/index.php\/database\/\">\u4f01\u4e1a\u6570\u636e\u5e93<\/a><\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n\r\n                <!-- \u8054\u7cfb -->\r\n                <div>\r\n                    <h4 class=\"text-lg font-bold text-gray-900 dark:text-white mb-6\">\u8054\u7cfb\u65b9\u5f0f<\/h4>\r\n                    <ul class=\"space-y-4\">\r\n                        <li class=\"flex items-start\">\r\n                            <i class=\"fa fa-map-marker-alt text-blue-500 mt-1 mr-3\"><\/i>\r\n                            <span class=\"text-gray-500 dark:text-gray-400 text-sm\">\u82cf\u5dde\u5e02\u82cf\u96c5\u8def158\u53f7\u534e\u76db\u5e7f\u573a705<\/span>\r\n                        <\/li>\r\n                        <li class=\"flex items-center\">\r\n                            <i class=\"fa fa-phone text-blue-500 mr-3\"><\/i>\r\n                            <span class=\"text-gray-500 dark:text-gray-400 text-sm\">18994391030<\/span>\r\n                        <\/li>\r\n                        <li class=\"flex items-center\">\r\n                            <i class=\"fa fa-envelope text-blue-500 mr-3\"><\/i>\r\n                            <a class=\"text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-white text-sm no-underline\" href=\"mailto:sales@logicInfo.com.cn\">sales@logicInfo.com.cn<\/a>\r\n                        <\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"flex flex-col md:flex-row justify-between items-center text-xs text-gray-500 dark:text-gray-500 gap-4\">\r\n                <div class=\"text-center md:text-left\">\u00a9 2025 LogicInfo Technology. All Rights Reserved.<\/div>\r\n                <div class=\"flex space-x-4\">\r\n                    <a class=\"hover:text-blue-600 dark:hover:text-white transition-colors no-underline text-gray-500 dark:text-gray-500\" href=\"https:\/\/beian.miit.gov.cn\/\" target=\"_blank\">\u6d59ICP\u590714044112\u53f7-1<\/a>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        \/\/ ================= 1. \u6838\u5fc3\u5e03\u5c40\u4fee\u590d\u811a\u672c =================\r\n        function fixLayout() {\r\n            const root = document.getElementById('theme-root');\r\n            if (!root) return;\r\n            const docWidth = document.documentElement.clientWidth;\r\n            root.style.marginLeft = '0px';\r\n            root.style.width = '100%';\r\n            const rect = root.getBoundingClientRect();\r\n            root.style.marginLeft = `-${rect.left}px`;\r\n            root.style.width = `${docWidth}px`;\r\n        }\r\n        fixLayout();\r\n        window.addEventListener('resize', () => setTimeout(fixLayout, 100));\r\n        setTimeout(fixLayout, 300);\r\n\r\n        \/\/ ================= 2. \u6697\u9ed1\u6a21\u5f0f\u903b\u8f91 =================\r\n        const themeToggleBtn = document.getElementById('theme-toggle');\r\n        const themeRoot = document.getElementById('theme-root');\r\n        const html = document.documentElement;\r\n\r\n        function setBodyBackground(isDark) {\r\n            document.body.style.backgroundColor = isDark ? '#0f172a' : '#ffffff';\r\n        }\r\n\r\n        function initTheme() {\r\n            const savedTheme = localStorage.getItem('color-theme');\r\n            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\r\n            if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {\r\n                html.classList.add('dark');\r\n                if(themeRoot) themeRoot.classList.add('dark');\r\n                setBodyBackground(true);\r\n            } else {\r\n                html.classList.remove('dark');\r\n                if(themeRoot) themeRoot.classList.remove('dark');\r\n                setBodyBackground(false);\r\n            }\r\n        }\r\n        initTheme();\r\n\r\n        if(themeToggleBtn){\r\n            themeToggleBtn.addEventListener('click', function() {\r\n                const isDark = html.classList.toggle('dark');\r\n                if(themeRoot) themeRoot.classList.toggle('dark');\r\n                localStorage.setItem('color-theme', isDark ? 'dark' : 'light');\r\n                setBodyBackground(isDark);\r\n            });\r\n        }\r\n\r\n        \/\/ ================= 3. \u79fb\u52a8\u7aef\u83dc\u5355\u903b\u8f91 =================\r\n        const menuToggle = document.getElementById('menu-toggle');\r\n        const mobileMenu = document.getElementById('mobile-menu');\r\n        \r\n        function toggleMenu() {\r\n            const isHidden = mobileMenu.classList.contains('hidden');\r\n            if (isHidden) {\r\n                mobileMenu.classList.remove('hidden');\r\n                void mobileMenu.offsetWidth; \r\n                mobileMenu.style.opacity = '1';\r\n                mobileMenu.style.transform = 'scaleY(1)';\r\n                menuToggle.innerHTML = '<i class=\"fa fa-times\"><\/i>'; \r\n            } else {\r\n                closeMenu();\r\n            }\r\n        }\r\n\r\n        function closeMenu() {\r\n            if (mobileMenu.classList.contains('hidden')) return;\r\n            mobileMenu.style.opacity = '0';\r\n            mobileMenu.style.transform = 'scaleY(0.95)';\r\n            setTimeout(() => mobileMenu.classList.add('hidden'), 200);\r\n            menuToggle.innerHTML = '<i class=\"fa fa-bars\"><\/i>';\r\n        }\r\n\r\n        if(menuToggle && mobileMenu){\r\n            menuToggle.addEventListener('click', function(e) {\r\n                e.stopPropagation();\r\n                toggleMenu();\r\n            });\r\n            mobileMenu.addEventListener('click', function(e) {\r\n                e.stopPropagation();\r\n            });\r\n            document.addEventListener('click', function(e) {\r\n                if (!mobileMenu.classList.contains('hidden')) {\r\n                    closeMenu();\r\n                }\r\n            });\r\n        }\r\n\r\n        \/\/ ================= 4. \u6eda\u52a8\u52a8\u753b =================\r\n        const observer = new IntersectionObserver((entries) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    requestAnimationFrame(() => {\r\n                        entry.target.classList.add('visible');\r\n                    });\r\n                    observer.unobserve(entry.target);\r\n                }\r\n            });\r\n        }, { threshold: 0.1 }); \r\n\r\n        document.querySelectorAll('.fade-in-up').forEach(el => observer.observe(el));\r\n\r\n        \/\/ ================= 5. Canvas \u7c92\u5b50\u795e\u7ecf\u7f51\u7edc\u52a8\u6548 =================\r\n        function initHeroCanvas() {\r\n            const canvas = document.getElementById('hero-canvas');\r\n            if (!canvas) return;\r\n            const ctx = canvas.getContext('2d');\r\n            let width, height;\r\n            let particles = [];\r\n            let mouse = { x: null, y: null };\r\n            \r\n            \/\/ \u8c03\u6574\u7c92\u5b50\u6570\u91cf\r\n            function getParticleCount() {\r\n                return window.innerWidth < 768 ? 40 : 100;\r\n            }\r\n\r\n            function resize() {\r\n                width = canvas.width = canvas.offsetWidth;\r\n                height = canvas.height = canvas.offsetHeight;\r\n            }\r\n\r\n            \/\/ \u7c92\u5b50\u7c7b\r\n            class Particle {\r\n                constructor() {\r\n                    this.x = Math.random() * width;\r\n                    this.y = Math.random() * height;\r\n                    this.originX = this.x;\r\n                    this.originY = this.y;\r\n                    this.vx = (Math.random() - 1) * 1; \/\/ \u5e03\u6717\u8fd0\u52a8\u901f\u5ea6 X\r\n                    this.vy = (Math.random() - 1) * 1; \/\/ \u5e03\u6717\u8fd0\u52a8\u901f\u5ea6 Y\r\n                    this.size = Math.random() * 2 + 1;\r\n                }\r\n\r\n                update() {\r\n                    \/\/ \u5e03\u6717\u8fd0\u52a8\uff1a\u6539\u53d8\u539f\u70b9\u4f4d\u7f6e\r\n                    this.originX += this.vx;\r\n                    this.originY += this.vy;\r\n\r\n                    \/\/ \u8fb9\u754c\u53cd\u5f39\uff08\u9488\u5bf9\u539f\u70b9\uff09\r\n                    if (this.originX < 0 || this.originX > width) this.vx *= -1;\r\n                    if (this.originY < 0 || this.originY > height) this.vy *= -1;\r\n\r\n                    \/\/ \u9f20\u6807\u5f15\u529b\u903b\u8f91\r\n                    if (mouse.x != null) {\r\n                        let dx = mouse.x - this.x;\r\n                        let dy = mouse.y - this.y;\r\n                        let distance = Math.sqrt(dx * dx + dy * dy);\r\n                        let maxDist = 300;\r\n                        \r\n                        if (distance < maxDist) {\r\n                            \/\/ \u5f15\u529b\u8ba1\u7b97\r\n                            let forceDirectionX = dx \/ distance;\r\n                            let forceDirectionY = dy \/ distance;\r\n                            let force = (maxDist - distance) \/ maxDist;\r\n                            \r\n                            \/\/ \u5e73\u6ed1\u79fb\u52a8\u5411\u9f20\u6807\r\n                            let attractionSpeed = 3;\r\n                            this.x += forceDirectionX * force * attractionSpeed;\r\n                            this.y += forceDirectionY * force * attractionSpeed;\r\n                        } else {\r\n                            \/\/ \u6062\u590d\u903b\u8f91 (\u5f53\u9f20\u6807\u5728\u753b\u5e03\u4e0a\u4f46\u8ddd\u79bb\u8fdc\u65f6)\r\n                            this.x += (this.originX - this.x) * 0.05;\r\n                            this.y += (this.originY - this.y) * 0.05;\r\n                        }\r\n                    } else {\r\n                        \/\/ \u9f20\u6807\u79fb\u51fa\uff0c\u5b8c\u5168\u6062\u590d\r\n                        this.x += (this.originX - this.x) * 0.05;\r\n                        this.y += (this.originY - this.y) * 0.05;\r\n                    }\r\n                }\r\n\r\n                draw(nodeColor) {\r\n                    ctx.fillStyle = nodeColor;\r\n                    ctx.beginPath();\r\n                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\r\n                    ctx.fill();\r\n                }\r\n            }\r\n\r\n            function initParticles() {\r\n                particles = [];\r\n                let count = getParticleCount();\r\n                for (let i = 0; i < count; i++) {\r\n                    particles.push(new Particle());\r\n                }\r\n            }\r\n\r\n            function animate() {\r\n                ctx.clearRect(0, 0, width, height);\r\n                \r\n                \/\/ \u68c0\u6d4b\u989c\u8272\u6a21\u5f0f\r\n                const isDark = document.documentElement.classList.contains('dark');\r\n                const nodeColor = isDark ? 'rgba(255, 255, 255, 0.8)' : 'rgba(15, 23, 42, 0.6)';\r\n                const lineColorBase = isDark ? '255, 255, 255' : '15, 23, 42';\r\n\r\n                for (let i = 0; i < particles.length; i++) {\r\n                    particles[i].update();\r\n                    particles[i].draw(nodeColor);\r\n\r\n                    \/\/ \u7ed8\u5236\u8fde\u7ebf\r\n                    for (let j = i; j < particles.length; j++) {\r\n                        let dx = particles[i].x - particles[j].x;\r\n                        let dy = particles[i].y - particles[j].y;\r\n                        let distance = Math.sqrt(dx * dx + dy * dy);\r\n                        \r\n                        if (distance < 120) {\r\n                            ctx.beginPath();\r\n                            \/\/ \u8ddd\u79bb\u8d8a\u8fd1\uff0c\u7ebf\u6761\u8d8a\u4e0d\u900f\u660e\r\n                            let opacity = 1 - (distance \/ 120);\r\n                            ctx.strokeStyle = `rgba(${lineColorBase}, ${opacity * 0.2})`; \r\n                            ctx.lineWidth = 1;\r\n                            ctx.moveTo(particles[i].x, particles[i].y);\r\n                            ctx.lineTo(particles[j].x, particles[j].y);\r\n                            ctx.stroke();\r\n                        }\r\n                    }\r\n                }\r\n                requestAnimationFrame(animate);\r\n            }\r\n\r\n            \/\/ \u4e8b\u4ef6\u76d1\u542c\r\n            window.addEventListener('resize', () => {\r\n                resize();\r\n                initParticles();\r\n            });\r\n\r\n            \/\/ \u9f20\u6807\u4ea4\u4e92\r\n            const homeSection = document.getElementById('home');\r\n            if (homeSection) {\r\n                homeSection.addEventListener('mousemove', function(e) {\r\n                    const rect = canvas.getBoundingClientRect();\r\n                    mouse.x = e.clientX - rect.left;\r\n                    mouse.y = e.clientY - rect.top;\r\n                });\r\n                homeSection.addEventListener('mouseleave', function() {\r\n                    mouse.x = null;\r\n                    mouse.y = null;\r\n                });\r\n            }\r\n\r\n            \/\/ \u542f\u52a8\r\n            resize();\r\n            initParticles();\r\n            animate();\r\n        }\r\n        initHeroCanvas();\r\n    });\r\n<\/script>\r\n","protected":false},"excerpt":{"rendered":"<p>L \u903b\u6781\u4fe1\u606f \u9996\u9875 \u670d\u52a1 \u4f01\u4e1a\u7cfb\u7edf\u96c6\u6210  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"plain-container","ast-site-content-layout":"full-width-container","site-content-style":"boxed","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"disabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/logicinfo.com.cn\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/logicinfo.com.cn\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/logicinfo.com.cn\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/logicinfo.com.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/logicinfo.com.cn\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":102,"href":"https:\/\/logicinfo.com.cn\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":437,"href":"https:\/\/logicinfo.com.cn\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/437"}],"up":[{"embeddable":true,"href":"https:\/\/logicinfo.com.cn\/index.php\/wp-json\/wp\/v2\/pages\/2"}],"wp:attachment":[{"href":"https:\/\/logicinfo.com.cn\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}