:root {
--color-00897b: #00897b;
--color-1a1a2e: #1a1a2e;
--color-1a3a5c: #1a3a5c;
--color-1a8ec4: #1a8ec4;
--color-1c1c1e: #1c1c1e;
--color-1e3a5f: #1e3a5f;
--color-2196f3: #2196f3;
--color-222: #222;
--color-276749: #276749;
--color-2a0f5c: #2a0f5c;
--color-2a4db8: #2a4db8;
--color-2a6bb8: #2a6bb8;
--color-2d6a9f: #2d6a9f;
--color-2ea86c: #2ea86c;
--color-2f6fd6: #2f6fd6;
--color-34a864: #34a864;
--color-374151: #374151;
--color-3b1d8f: #3b1d8f;
--color-3b7ddd: #3b7ddd;
--color-3d3d3d: #3d3d3d;
--color-3d3d5c: #3d3d5c;
--color-43a047: #43a047;
--color-444: #444;
--color-4a7cff: #4a7cff;
--color-4a7fd4: #4a7fd4;
--color-4a90c2: #4a90c2;
--color-4d1598: #4d1598;
--color-4db6ac: #4db6ac;
--color-4eb0df: #4eb0df;
--color-4fc3f7: #4fc3f7;
--color-546e7a: #546e7a;
--color-5544c0: #5544c0;
--color-555: #555;
--color-5a48c8: #5a48c8;
--color-5a8ab8: #5a8ab8;
--color-5b3bb8: #5b3bb8;
--color-6340e0: #6340e0;
--color-6347c9: #6347c9;
--color-66bb6a: #66bb6a;
--color-6b6b8a: #6b6b8a;
--color-6b7280: #6b7280;
--color-6c55d8: #6c55d8;
--color-6d4fd0: #6d4fd0;
--color-6f5a9e: #6f5a9e;
--color-7348e0: #7348e0;
--color-777: #777;
--color-78909c: #78909c;
--color-7a5de0: #7a5de0;
--color-7b4dff: #7b4dff;
--color-7b52d0: #7b52d0;
--color-7b57e8: #7b57e8;
--color-7b5be4: #7b5be4;
--color-7b61ff: #7b61ff;
--color-7b6ae8: #7b6ae8;
--color-7e57c2: #7e57c2;
--color-8450ee: #8450ee;
--color-8752f4: #8752f4;
--color-888: #888;
--color-8a5a00: #8a5a00;
--color-8a5cf5: #8a5cf5;
--color-8a8a9a: #8a8a9a;
--color-8b75c9: #8b75c9;
--color-8b7ae8: #8b7ae8;
--color-8c66db: #8c66db;
--color-8e71f1: #8e71f1;
--color-9575cd: #9575cd;
--color-9a72ef: #9a72ef;
--color-9a9aad: #9a9aad;
--color-9ae6b4: #9ae6b4;
--color-9b7ef0: #9b7ef0;
--color-9b7ff5: #9b7ff5;
--color-9ca3af: #9ca3af;
--color-a7f3d0: #a7f3d0;
--color-a8a0b8: #a8a0b8;
--color-a8cce8: #a8cce8;
--color-aaa: #aaa;
--color-b0b0bc: #b0b0bc;
--color-b0b3bc: #b0b3bc;
--color-b8e0f8: #b8e0f8;
--color-babbfc: #babbfc;
--color-bae6fd: #bae6fd;
--color-bbb: #bbb;
--color-bg: #fff;
--color-bg-dark: #2c3e50;
--color-bg-gray: #f5f7fa;
--color-border: #e5e8ed;
--color-c0c0c8: #c0c0c8;
--color-c4b8f0: #c4b8f0;
--color-c53030: #c53030;
--color-c8c8d0: #c8c8d0;
--color-c8daf8: #c8daf8;
--color-c8dff0: #c8dff0;
--color-c8e6f8: #c8e6f8;
--color-ccc: #ccc;
--color-d0d5dd: #d0d5dd;
--color-d0e4f4: #d0e4f4;
--color-d1fae5: #d1fae5;
--color-d4920a: #d4920a;
--color-d4a853: #d4a853;
--color-d4c8f8: #d4c8f8;
--color-d4d2ff: #d4d2ff;
--color-d4d4dc: #d4d4dc;
--color-d5d4fd: #d5d4fd;
--color-ddd: #ddd;
--color-ddd0f8: #ddd0f8;
--color-ddd6fe: #ddd6fe;
--color-e05050: #e05050;
--color-e0e0e0: #e0e0e0;
--color-e0e0e8: #e0e0e8;
--color-e0f2fe: #e0f2fe;
--color-e4dcff: #e4dcff;
--color-e4e4ec: #e4e4ec;
--color-e53935: #e53935;
--color-e53e3e: #e53e3e;
--color-e5e5ea: #e5e5ea;
--color-e5e6eb: #e5e6eb;
--color-e6d9fb: #e6d9fb;
--color-e6e0f5: #e6e0f5;
--color-e8d4f5: #e8d4f5;
--color-e8e0ff: #e8e0ff;
--color-e8e8ee: #e8e8ee;
--color-e8eaef: #e8eaef;
--color-e8eaf0: #e8eaf0;
--color-e8ecf0: #e8ecf0;
--color-e8eef4: #e8eef4;
--color-e8f0ff: #e8f0ff;
--color-e8f1ff: #e8f1ff;
--color-e8f8ef: #e8f8ef;
--color-e9e9fb: #e9e9fb;
--color-ebe4ff: #ebe4ff;
--color-ece5fc: #ece5fc;
--color-ece8f5: #ece8f5;
--color-ececec: #ececec;
--color-ececf2: #ececf2;
--color-ede8e0: #ede8e0;
--color-ede8ff: #ede8ff;
--color-ede9fe: #ede9fe;
--color-ede9ff: #ede9ff;
--color-edebfc: #edebfc;
--color-eee: #eee;
--color-eee5ff: #eee5ff;
--color-eeebfd: #eeebfd;
--color-eef0f4: #eef0f4;
--color-eef0f5: #eef0f5;
--color-eef1f5: #eef1f5;
--color-eef1f6: #eef1f6;
--color-eef2ff: #eef2ff;
--color-eef4ff: #eef4ff;
--color-ef5350: #ef5350;
--color-efeaff: #efeaff;
--color-eff0f2: #eff0f2;
--color-f0ebff: #f0ebff;
--color-f0ecfa: #f0ecfa;
--color-f0ecff: #f0ecff;
--color-f0f0f0: #f0f0f0;
--color-f0f0f5: #f0f0f5;
--color-f0f1f5: #f0f1f5;
--color-f0f2f5: #f0f2f5;
--color-f0fff4: #f0fff4;
--color-f1eefd: #f1eefd;
--color-f3e8ff: #f3e8ff;
--color-f3efff: #f3efff;
--color-f3f0ff: #f3f0ff;
--color-f4f0ff: #f4f0ff;
--color-f4f6f8: #f4f6f8;
--color-f59a23: #f59a23;
--color-f5f0ff: #f5f0ff;
--color-f5f6f8: #f5f6f8;
--color-f5f6fa: #f5f6fa;
--color-f5f9fc: #f5f9fc;
--color-f60: #f60;
--color-f6f3ff: #f6f3ff;
--color-f78221: #f78221;
--color-f7f5fc: #f7f5fc;
--color-f7f8fc: #f7f8fc;
--color-f88733: #f88733;
--color-f8f4ef: #f8f4ef;
--color-f8f6ff: #f8f6ff;
--color-f8f9fb: #f8f9fb;
--color-f9eee4: #f9eee4;
--color-f9fafb: #f9fafb;
--color-faf5ff: #faf5ff;
--color-faf8ff: #faf8ff;
--color-faf9fe: #faf9fe;
--color-faf9ff: #faf9ff;
--color-fafafa: #fafafa;
--color-fafbff: #fafbff;
--color-fbcfe8: #fbcfe8;
--color-fbfaff: #fbfaff;
--color-fce7f3: #fce7f3;
--color-fd5d1d: #fd5d1d;
--color-fde68a: #fde68a;
--color-fe5c1c: #fe5c1c;
--color-feb2b2: #feb2b2;
--color-fece4f: #fece4f;
--color-fef3c7: #fef3c7;
--color-fefefe: #fefefe;
--color-ff4d4f: #ff4d4f;
--color-ff7043: #ff7043;
--color-ff8a3d: #ff8a3d;
--color-ff8a65: #ff8a65;
--color-ff9500: #ff9500;
--color-ff9800: #ff9800;
--color-ffb74d: #ffb74d;
--color-ffb84d: #ffb84d;
--color-ffc107: #ffc107;
--color-ffc766: #ffc766;
--color-ffd54f: #ffd54f;
--color-ffe066: #ffe066;
--color-ffe082: #ffe082;
--color-fff3e0: #fff3e0;
--color-fff3eb: #fff3eb;
--color-fff5f5: #fff5f5;
--color-orange: #f5a623;
--color-orange-dark: #e8940a;
--color-primary: #0056b3;
--color-primary-dark: #004494;
--color-primary-light: #e8f0fa;
--color-purple: #6c3fc5;
--color-purple-light: #8752F4;
--color-rgba-0-0-0-0: rgba(0, 0, 0, 0);
--color-rgba-0-0-0-10: rgba(0, 0, 0, 0.1);
--color-rgba-0-0-0-12: rgba(0, 0, 0, 0.12);
--color-rgba-0-0-0-15: rgba(0, 0, 0, 0.15);
--color-rgba-0-0-0-16: rgba(0, 0, 0, 0.16);
--color-rgba-0-0-0-18: rgba(0, 0, 0, 0.18);
--color-rgba-0-0-0-20: rgba(0, 0, 0, 0.2);
--color-rgba-0-0-0-25: rgba(0, 0, 0, 0.25);
--color-rgba-0-0-0-28: rgba(0, 0, 0, 0.28);
--color-rgba-0-0-0-3: rgba(0, 0, 0, 0.03);
--color-rgba-0-0-0-30: rgba(0, 0, 0, 0.3);
--color-rgba-0-0-0-35: rgba(0, 0, 0, 0.35);
--color-rgba-0-0-0-4: rgba(0, 0, 0, 0.04);
--color-rgba-0-0-0-40: rgba(0, 0, 0, 0.4);
--color-rgba-0-0-0-45: rgba(0, 0, 0, 0.45);
--color-rgba-0-0-0-5: rgba(0, 0, 0, 0.05);
--color-rgba-0-0-0-6: rgba(0, 0, 0, 0.06);
--color-rgba-0-0-0-7: rgba(0, 0, 0, 0.07);
--color-rgba-0-0-0-8: rgba(0, 0, 0, 0.08);
--color-rgba-0-60-100-18: rgba(0, 60, 100, 0.18);
--color-rgba-10-80-140-18: rgba(10, 80, 140, 0.18);
--color-rgba-100-150-200-15: rgba(100, 150, 200, 0.15);
--color-rgba-100-150-200-20: rgba(100, 150, 200, 0.2);
--color-rgba-100-160-255-10: rgba(100, 160, 255, 0.1);
--color-rgba-100-160-255-50: rgba(100, 160, 255, 0.5);
--color-rgba-100-160-255-8: rgba(100, 160, 255, 0.08);
--color-rgba-100-180-255-10: rgba(100, 180, 255, 0.1);
--color-rgba-100-180-255-40: rgba(100, 180, 255, 0.4);
--color-rgba-100-200-255-45: rgba(100, 200, 255, 0.45);
--color-rgba-108-63-197-10: rgba(108, 63, 197, 0.1);
--color-rgba-108-63-197-12: rgba(108, 63, 197, 0.12);
--color-rgba-108-63-197-20: rgba(108, 63, 197, 0.2);
--color-rgba-108-63-197-25: rgba(108, 63, 197, 0.25);
--color-rgba-108-63-197-75: rgba(108, 63, 197, 0.75);
--color-rgba-108-63-197-8: rgba(108, 63, 197, 0.08);
--color-rgba-108-85-216-12: rgba(108, 85, 216, 0.12);
--color-rgba-108-85-216-14: rgba(108, 85, 216, 0.14);
--color-rgba-108-85-216-15: rgba(108, 85, 216, 0.15);
--color-rgba-108-85-216-20: rgba(108, 85, 216, 0.2);
--color-rgba-108-85-216-25: rgba(108, 85, 216, 0.25);
--color-rgba-108-85-216-30: rgba(108, 85, 216, 0.3);
--color-rgba-108-85-216-35: rgba(108, 85, 216, 0.35);
--color-rgba-108-85-216-4: rgba(108, 85, 216, 0.04);
--color-rgba-108-85-216-40: rgba(108, 85, 216, 0.4);
--color-rgba-108-85-216-5: rgba(108, 85, 216, 0.05);
--color-rgba-108-85-216-6: rgba(108, 85, 216, 0.06);
--color-rgba-108-85-216-8: rgba(108, 85, 216, 0.08);
--color-rgba-123-77-255-10: rgba(123, 77, 255, 0.1);
--color-rgba-123-77-255-12: rgba(123, 77, 255, 0.12);
--color-rgba-123-77-255-15: rgba(123, 77, 255, 0.15);
--color-rgba-123-77-255-8: rgba(123, 77, 255, 0.08);
--color-rgba-123-87-232-28: rgba(123, 87, 232, 0.28);
--color-rgba-123-87-232-85: rgba(123, 87, 232, 0.85);
--color-rgba-123-91-228-12: rgba(123, 91, 228, 0.12);
--color-rgba-123-91-228-15: rgba(123, 91, 228, 0.15);
--color-rgba-123-91-228-18: rgba(123, 91, 228, 0.18);
--color-rgba-123-91-228-20: rgba(123, 91, 228, 0.2);
--color-rgba-123-91-228-45: rgba(123, 91, 228, 0.45);
--color-rgba-123-97-255-12: rgba(123, 97, 255, 0.12);
--color-rgba-123-97-255-8: rgba(123, 97, 255, 0.08);
--color-rgba-135-82-244-10: rgba(135, 82, 244, 0.1);
--color-rgba-135-82-244-28: rgba(135, 82, 244, 0.28);
--color-rgba-138-92-245-10: rgba(138, 92, 245, 0.1);
--color-rgba-138-92-245-12: rgba(138, 92, 245, 0.12);
--color-rgba-138-92-245-18: rgba(138, 92, 245, 0.18);
--color-rgba-138-92-245-25: rgba(138, 92, 245, 0.25);
--color-rgba-138-92-245-30: rgba(138, 92, 245, 0.3);
--color-rgba-138-92-245-35: rgba(138, 92, 245, 0.35);
--color-rgba-138-92-245-7: rgba(138, 92, 245, 0.07);
--color-rgba-138-92-245-8: rgba(138, 92, 245, 0.08);
--color-rgba-140-160-255-60: rgba(140, 160, 255, 0.6);
--color-rgba-140-180-255-70: rgba(140, 180, 255, 0.7);
--color-rgba-142-113-241-10: rgba(142, 113, 241, 0.1);
--color-rgba-142-113-241-12: rgba(142, 113, 241, 0.12);
--color-rgba-142-113-241-14: rgba(142, 113, 241, 0.14);
--color-rgba-142-113-241-18: rgba(142, 113, 241, 0.18);
--color-rgba-142-113-241-20: rgba(142, 113, 241, 0.2);
--color-rgba-142-113-241-25: rgba(142, 113, 241, 0.25);
--color-rgba-142-113-241-28: rgba(142, 113, 241, 0.28);
--color-rgba-142-113-241-30: rgba(142, 113, 241, 0.3);
--color-rgba-142-113-241-35: rgba(142, 113, 241, 0.35);
--color-rgba-142-113-241-45: rgba(142, 113, 241, 0.45);
--color-rgba-142-113-241-55: rgba(142, 113, 241, 0.55);
--color-rgba-142-113-241-8: rgba(142, 113, 241, 0.08);
--color-rgba-150-200-255-80: rgba(150, 200, 255, 0.8);
--color-rgba-168-204-232-50: rgba(168, 204, 232, 0.5);
--color-rgba-180-200-255-90: rgba(180, 200, 255, 0.9);
--color-rgba-180-220-255-90: rgba(180, 220, 255, 0.9);
--color-rgba-196-181-253-35: rgba(196, 181, 253, 0.35);
--color-rgba-200-223-240-60: rgba(200, 223, 240, 0.6);
--color-rgba-235-80-80-10: rgba(235, 80, 80, 0.1);
--color-rgba-235-80-80-8: rgba(235, 80, 80, 0.08);
--color-rgba-237-230-255-90: rgba(237, 230, 255, 0.9);
--color-rgba-240-240-244-90: rgba(240, 240, 244, 0.9);
--color-rgba-245-166-35-10: rgba(245, 166, 35, 0.1);
--color-rgba-245-166-35-12: rgba(245, 166, 35, 0.12);
--color-rgba-245-166-35-40: rgba(245, 166, 35, 0.4);
--color-rgba-248-247-255-100: rgba(248, 247, 255, 1);
--color-rgba-250-250-250-0: rgba(250, 250, 250, 0);
--color-rgba-255-102-0-28: rgba(255, 102, 0, 0.28);
--color-rgba-255-102-0-8: rgba(255, 102, 0, 0.08);
--color-rgba-255-149-0-30: rgba(255, 149, 0, 0.3);
--color-rgba-255-149-0-35: rgba(255, 149, 0, 0.35);
--color-rgba-255-149-0-40: rgba(255, 149, 0, 0.4);
--color-rgba-255-193-7-40: rgba(255, 193, 7, 0.4);
--color-rgba-255-255-255-10: rgba(255, 255, 255, 0.1);
--color-rgba-255-255-255-15: rgba(255, 255, 255, 0.15);
--color-rgba-255-255-255-20: rgba(255, 255, 255, 0.2);
--color-rgba-255-255-255-21: rgba(255, 255, 255, 0.21);
--color-rgba-255-255-255-25: rgba(255, 255, 255, 0.25);
--color-rgba-255-255-255-28: rgba(255, 255, 255, 0.28);
--color-rgba-255-255-255-30: rgba(255, 255, 255, 0.3);
--color-rgba-255-255-255-35: rgba(255, 255, 255, 0.35);
--color-rgba-255-255-255-4: rgba(255, 255, 255, 0.04);
--color-rgba-255-255-255-45: rgba(255, 255, 255, 0.45);
--color-rgba-255-255-255-50: rgba(255, 255, 255, 0.5);
--color-rgba-255-255-255-55: rgba(255, 255, 255, 0.55);
--color-rgba-255-255-255-6: rgba(255, 255, 255, 0.06);
--color-rgba-255-255-255-60: rgba(255, 255, 255, 0.6);
--color-rgba-255-255-255-63: rgba(255, 255, 255, 0.63);
--color-rgba-255-255-255-65: rgba(255, 255, 255, 0.65);
--color-rgba-255-255-255-70: rgba(255, 255, 255, 0.7);
--color-rgba-255-255-255-75: rgba(255, 255, 255, 0.75);
--color-rgba-255-255-255-78: rgba(255, 255, 255, 0.78);
--color-rgba-255-255-255-8: rgba(255, 255, 255, 0.08);
--color-rgba-255-255-255-80: rgba(255, 255, 255, 0.8);
--color-rgba-255-255-255-85: rgba(255, 255, 255, 0.85);
--color-rgba-255-255-255-88: rgba(255, 255, 255, 0.88);
--color-rgba-255-255-255-90: rgba(255, 255, 255, 0.9);
--color-rgba-255-255-255-95: rgba(255, 255, 255, 0.95);
--color-rgba-255-255-255-96: rgba(255, 255, 255, 0.96);
--color-rgba-40-20-90-35: rgba(40, 20, 90, 0.35);
--color-rgba-40-25-80-78: rgba(40, 25, 80, 0.78);
--color-rgba-45-12-96-72: rgba(45, 12, 96, 0.72);
--color-rgba-45-12-96-78: rgba(45, 12, 96, 0.78);
--color-rgba-52-168-100-10: rgba(52, 168, 100, 0.1);
--color-rgba-52-168-100-8: rgba(52, 168, 100, 0.08);
--color-rgba-74-127-212-2: rgba(74, 127, 212, 0.02);
--color-rgba-74-127-212-8: rgba(74, 127, 212, 0.08);
--color-rgba-77-21-152-55: rgba(77, 21, 152, 0.55);
--color-rgba-80-100-220-20: rgba(80, 100, 220, 0.2);
--color-rgba-80-100-220-30: rgba(80, 100, 220, 0.3);
--color-rgba-91-59-184-18: rgba(91, 59, 184, 0.18);
--color-rgba-91-59-184-28: rgba(91, 59, 184, 0.28);
--color-rgba-91-59-184-6: rgba(91, 59, 184, 0.06);
--color-text: #333;
--color-text-light: #666;
--color-text-muted: #999;
--font-family: "oppo", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
--container-width: 1472px;
--header-height: 70px;
--radius: 6px;
--shadow: 0 2px 12px var(--color-rgba-0-0-0-8);
--shadow-hover: 0 6px 24px var(--color-rgba-0-0-0-12);
--transition: 0.3s ease;
}
@font-face {
font-family: "oppo";
src: url("../font/OPPO Sans 4.0.ttf");
}
/* --- Reset & Base --- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family);
color: var(--color-text);
line-height: 1.6;
background: var(--color-bg);
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
object-fit: cover;
}
a {
color: inherit;
text-decoration: none;
transition: color var(--transition);
}
ul {
list-style: none;
}
button {
border: none;
background: none;
cursor: pointer;
font-family: inherit;
}
.container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 20px;
}
.skip-link {
position: absolute;
top: -100%;
left: 0;
z-index: 9999;
padding: 8px 16px;
background: var(--color-primary);
color: var(--color-bg);
}
.skip-link:focus {
top: 0;
}
.icon-css {
background-image: url(../images/css_sprites.webp);
background-repeat: no-repeat;
}
.icon-css2 {
background-image: url(../images/css_sprites2.png);
background-repeat: no-repeat;
}
.icon-css3 {
background-image: url(../images/css_sprites3.png);
background-repeat: no-repeat;
}
.icon-css4 {
background-image: url(../images/css_sprites4.png);
background-repeat: no-repeat;
}
.footer-icon-email {
background-position: -369px -236px;
width: 14px;
height: 9px;
display: inline-block;
}
.footer-icon-phone {
background-position: -369px -269px;
width: 14px;
height: 16px;
display: inline-block;
}
.footer-icon-address {
background-position: -371px -306px;
width: 10px;
height: 14px;
display: inline-block;
}
.buy-dpes {
background-position: -57px -111px;
width: 22px;
height: 21px;
display: block;
}
.order-icon-consult-click {
background-position: -368px -197px;
width: 16px;
height: 16px;
display: inline-block;
flex-shrink: 0;
}
.order-icon-zixun {
background-position: -158px -54px;
width: 24px;
height: 24px;
display: block;
}
.order-icon-mall {
background-position: -325px -91px;
width: 17px;
height: 14px;
display: block;
}
.order-icon-tmall {
background-position: -368px -161px;
width: 16px;
height: 16px;
display: block;
}
.order-icon-jd {
background-position: -325px -198px;
width: 16px;
height: 16px;
display: block;
}
.order-icon-dealer {
background-position: -325px -235px;
width: 17px;
height: 13px;
display: block;
}
.sv-feature-icon--hardware {
background-position: -13px -13px;
width: 24px;
height: 25px;
display: block;
}
.sv-feature-icon--software {
background-position: -60px -13px;
width: 30px;
height: 24px;
display: block;
}
.sv-feature-icon--quality {
background-position: -13px -62px;
width: 23px;
height: 25px;
display: block;
}
.sv-feature-icon--support {
background-position: -63px -62px;
width: 24px;
height: 24px;
display: block;
}
/* Download center 鈥?icon-css2 */
.dl-tab-icon--brochure {
background-position: -158px -12px;
width: 24px;
height: 20px;
display: block;
}
.dl-tab-icon--manual {
background-position: -106px -110px;
width: 20px;
height: 24px;
display: block;
}
.dl-tab-icon--software {
background-position: -158px -54px;
width: 24px;
height: 24px;
display: block;
}
.dl-tab-icon--dev {
background-position: -158px -98px;
width: 24px;
height: 24px;
display: block;
}
.dl-file-icon--brochure {
background-position: -726px -12px;
width: 17px;
height: 18px;
display: inline-block;
flex-shrink: 0;
}
.dl-file-icon--manual {
background-position: -726px -12px;
width: 17px;
height: 18px;
display: inline-block;
flex-shrink: 0;
}
.dl-file-icon--software {
background-position: -725px -450px;
width: 14px;
height: 18px;
display: inline-block;
flex-shrink: 0;
}
.dl-file-icon--dev {
background-position: -725px -488px;
width: 14px;
height: 18px;
display: inline-block;
flex-shrink: 0;
}
.dl-icon-download {
background-position: -452px -432px;
width: 13px;
height: 13px;
display: inline-block;
flex-shrink: 0;
}
.play-index {
background-position: -573px -13px;
}
.kuangkuai{
background-position: -332px -270px;
width: 22px;
height: 22px;
}
.sousou {
background-position: -92px -661px;
width: 16px;
height: 16px;
}
.sousou1 {
background-position: -726px -128px;
width: 15px;
height: 13px;
}
.buy {
background-position: -11px -660px;
width: 18px;
height: 18px;
}
.en {
background-position: -52px -660px;
width: 17px;
height: 18px;
}
.cn {
background-position: -91px -362px;
width: 17px;
height: 18px;
}
.sites {
background-position: -131px -660px;
width: 18px;
height: 18px;
}
.clouds {
background-position: -10px -571px;
width: 83px;
height: 21px;
}
.cloud-s {
display: flex;
align-items: center;
justify-content: center;
width: 83px;
height: 21px;
border-radius: 50%;
transition: all var(--transition);
}
/* --- Buttons --- */
.btn {
display: inline-block;
padding: 10px 28px;
border-radius: var(--radius);
font-size: 14px;
font-weight: 500;
transition: all var(--transition);
cursor: pointer;
border: 2px solid transparent;
}
.btn-primary {
background: var(--color-primary);
color: var(--color-bg);
border-color: var(--color-primary);
}
.btn-primary:hover {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
}
.btn-outline-light {
background: transparent;
color: var(--color-bg);
border-color: var(--color-rgba-255-255-255-80);
}
.btn-outline-light:hover {
background: var(--color-rgba-255-255-255-15);
}
.btn-sm {
padding: 6px 20px;
font-size: 13px;
border: 1px solid var(--color-primary);
color: var(--color-primary);
border-radius: var(--radius);
}
.btn-sm:hover {
background: var(--color-primary);
color: var(--color-bg);
}
/* --- Section Common --- */
.section {
padding: 60px 0;
}
.section-header {
text-align: center;
margin-bottom: 40px;
}
.section-tag {
display: inline-block;
font-size: 13px;
color: var(--color-purple-light);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 8px;
}
.section-header h2 {
font-size: 28px;
font-weight: 600;
color: var(--color-text);
position: relative;
display: inline-block;
}
.section-header h2::after {
content: "";
display: block;
width: 40px;
height: 3px;
background: var(--color-primary);
margin: 12px auto 0;
border-radius: 2px;
}
.more-link {
font-size: 13px;
color: var(--color-text-muted);
transition: color var(--transition);
}
.more-link:hover {
color: var(--color-primary);
}
/* ========================================
Header
======================================== */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background: var(--color-bg);
box-shadow: 0 1px 6px var(--color-rgba-0-0-0-6);
height: var(--header-height);
overflow: visible;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-height);
}
.logo img {
height: 50px;
width: auto;
}
.main-nav {
flex: 1;
display: flex;
justify-content: center;
}
.nav-list {
display: flex;
align-items: center;
gap: 0;
}
.nav-item>a {
display: block;
padding: 0 18px;
line-height: var(--header-height);
font-size: 17px;
color: var(--color-text);
font-weight: 700;
position: relative;
white-space: nowrap;
}
.nav-item>a:hover,
.nav-item.is-active>a {
color: var(--color-purple);
}
.nav-item.is-active>a::after {
content: "";
position: absolute;
bottom: 0;
left: 18px;
right: 18px;
height: 3px;
background: var(--color-purple);
border-radius: 2px 2px 0 0;
}
.nav-item:hover>a::after {
content: "";
position: absolute;
bottom: 0;
left: 18px;
right: 18px;
height: 3px;
background: var(--color-purple);
border-radius: 2px 2px 0 0;
}
.nav-list:hover .nav-item.is-active:not(:hover)>a::after {
display: none;
}
.nav-list:hover .nav-item.is-active:not(:hover)>a {
color: var(--color-text);
}
/* Mega Menu */
.has-mega {
position: static;
}
.mega-menu {
position: absolute;
top: var(--header-height);
left: 0;
right: 0;
background: var(--color-bg);
box-shadow: var(--shadow-hover);
border-top: 1px solid var(--color-border);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
pointer-events: none;
z-index: 1001;
}
.has-mega:hover .mega-menu,
.has-mega.is-open .mega-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.mega-inner {
display: flex;
flex-wrap: wrap;
gap: 0;
padding: 30px 20px;
}
.mega-col {
flex: 1;
min-width: 150px;
padding: 0 15px;
border-right: 1px solid var(--color-border);
}
.mega-col:last-child {
border-right: none;
}
.mega-title {
font-size: 15px;
font-weight: 600;
color: var(--color-primary);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 2px solid var(--color-primary-light);
}
.mega-col ul li a {
display: block;
padding: 5px 0;
font-size: 13px;
color: var(--color-text-light);
}
.mega-col ul li a:hover {
color: var(--color-primary);
padding-left: 4px;
}
/* Products mega menu 鈥?screenshot card grid */
.mega-menu--products {
background: #f3f3f3;
border-top: none;
box-shadow: 0 8px 20px var(--color-rgba-0-0-0-12);
padding: 20px 0 24px;
z-index: 1001;
}
.mega-products-inner {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-template-rows: auto auto;
gap: 14px;
width: 100%;
max-width: none;
margin: 0;
padding: 0 20px;
box-sizing: border-box;
}
.mega-prod-card {
background: #e8e8e8;
border-radius: 8px;
padding: 16px 14px;
min-height: 168px;
box-sizing: border-box;
}
.mega-prod-card--platform {
grid-column: 1;
grid-row: 1;
}
.mega-prod-card--io {
grid-column: 2;
grid-row: 1 / span 2;
}
.mega-prod-card--comm {
grid-column: 3;
grid-row: 1;
}
.mega-prod-card--sensor {
grid-column: 4;
grid-row: 1 / span 2;
}
.mega-prod-card--lora {
grid-column: 5;
grid-row: 1;
}
.mega-prod-card--relay {
grid-column: 1;
grid-row: 2;
}
.mega-prod-card--remote {
grid-column: 3;
grid-row: 2;
}
.mega-prod-card--isolation {
grid-column: 5;
grid-row: 2;
}
.mega-prod-card--dual {
display: flex;
gap: 12px;
}
.mega-prod-card--split {
display: flex;
align-items: center;
gap: 10px;
padding-right: 10px;
}
.mega-prod-card--stack {
display: flex;
flex-direction: column;
gap: 12px;
padding-bottom: 12px;
min-height: 0;
}
.mega-prod-figure {
margin-top: auto;
border-radius: 6px;
overflow: hidden;
background: #f0f0f0;
}
.mega-prod-figure img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.mega-prod-block {
flex: 1;
min-width: 0;
}
.mega-prod-block--span {
width: 100%;
}
.mega-prod-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 12px;
}
.mega-prod-title {
font-size: 15px;
font-weight: 700;
color: #222;
margin: 0 0 10px;
line-height: 1.3;
}
.mega-prod-links {
list-style: none;
margin: 0;
padding: 0;
}
.mega-prod-links li a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 0;
font-size: 12px;
color: #666;
line-height: 1.6;
}
.mega-prod-links li a:hover {
color: var(--color-purple);
}
.mega-prod-badge {
display: inline-block;
padding: 0 6px;
font-size: 10px;
font-weight: 600;
line-height: 16px;
color: #fff;
background: #ff7a2f;
border-radius: 8px;
text-transform: lowercase;
flex-shrink: 0;
}
.mega-prod-media {
flex: 0 0 46%;
max-width: 160px;
border-radius: 6px;
overflow: hidden;
align-self: center;
background: #f0f0f0;
}
.mega-prod-media img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
@media (max-width: 1200px) {
.mega-products-inner {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: none;
}
.mega-prod-card--platform,
.mega-prod-card--io,
.mega-prod-card--comm,
.mega-prod-card--sensor,
.mega-prod-card--lora,
.mega-prod-card--relay,
.mega-prod-card--remote,
.mega-prod-card--isolation {
grid-column: auto;
grid-row: auto;
}
}
@media (max-width: 900px) {
.mega-products-inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.mega-menu--products {
padding: 12px 0 16px;
}
.mega-products-inner {
grid-template-columns: 1fr;
gap: 10px;
}
}
/* Solutions mega menu 鈥?2脳7 icon grid */
.mega-menu--solutions {
background: var(--color-bg);
border-top: none;
box-shadow: 0 8px 20px var(--color-rgba-0-0-0-12);
padding: 50px 10px;
}
.mega-solutions-inner {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 18px 12px;
padding: 50px 10px;
align-items: center;
justify-items: stretch;
}
.mega-sol-item {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 44px;
padding: 10px 8px;
color: #666;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
border-radius: 8px;
text-align: center;
box-sizing: border-box;
transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.mega-sol-item:hover {
color: var(--color-bg);
border-color: var(--color-purple-light);
background: var(--color-purple-light);
box-shadow: 0 4px 14px var(--color-rgba-135-82-244-10);
}
.mega-sol-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
display: block;
}
.mega-sol-label {
line-height: 22px;
}
.mega-sol-item:hover .sl-zhny {
background-position: -202px -53px;
}
.mega-sol-item:hover .sl-zhcs {
background-position: -203px -135px;
}
.mega-sol-item:hover .sl-zhgd {
background-position: -53px -202px;
}
.mega-sol-item:hover .sl-hjjk {
background-position: -134px -203px;
}
.mega-sol-item:hover .sl-zhsl {
background-position: -245px -11px;
}
.mega-sol-item:hover .sl-zhjj {
background-position: -248px -94px;
}
.mega-sol-item:hover .sl-zhdl {
background-position: -246px -175px;
}
.mega-sol-item:hover .sl-zhsw {
background-position: -52px -285px;
}
.mega-sol-item:hover .sl-zhly {
background-position: -287px -217px;
}
.mega-sol-item:hover .sl-gyzdh {
background-position: -288px -135px;
}
.mega-sol-item:hover .sl-zhfa {
background-position: -287px -52px;
}
.mega-sol-item:hover .sl-zhzy {
background-position: -216px -246px;
}
.mega-sol-item:hover .sl-lclw {
background-position: -134px -247px;
}
.mega-sol-item:hover .sl-zhhb {
background-position: -53px -246px;
}
@media (max-width: 1100px) {
.mega-solutions-inner {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px 10px;
padding: 22px 10px 26px;
}
}
@media (max-width: 768px) {
.mega-solutions-inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 8px;
padding: 16px 8px 20px;
}
.mega-sol-item {
font-size: 13px;
padding: 8px 6px;
}
}
.header-tools {
display: flex;
align-items: center;
gap: 12px;
}
.header-lang {
display: flex;
align-items: center;
gap: 4px;
font-size: 13px;
color: var(--color-text-light);
}
.header-lang .lang-active {
color: var(--color-primary);
font-weight: 500;
}
.header-lang .lang-divider {
color: var(--color-border);
}
.header-lang a {
color: var(--color-text-light);
transition: color var(--transition);
}
.header-lang a:hover {
color: var(--color-primary);
}
.tool-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
color: var(--color-text-light);
transition: all var(--transition);
}
.tool-btn:hover {
background: var(--color-primary-light);
color: var(--color-primary);
}
.mobile-toggle {
display: none;
flex-direction: column;
gap: 5px;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
}
.mobile-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--color-text);
transition: all var(--transition);
}
/* ========================================
Hero
======================================== */
.hero {
position: relative;
overflow: hidden;
}
.hero-slider {
position: relative;
}
.hero-slide {
position: relative;
}
.hero-slide img,
.hero-slide video {
display: block;
width: 100%;
margin: 0 auto;
object-fit: cover;
object-position: center center;
background: linear-gradient(135deg, var(--color-1a3a5c) 0%, var(--color-2d6a9f) 50%, var(--color-4a90c2) 100%);
}
.hero-slider,
.hero-slide {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
overflow: hidden;
}
.hero-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: var(--color-bg);
width: 100%;
padding: 0 20px;
text-shadow: 0 2px 8px var(--color-rgba-0-0-0-30);
}
.hero-tag {
font-size: 16px;
margin-bottom: 12px;
opacity: 0.9;
}
.hero-title {
font-size: 36px;
font-weight: 700;
margin-bottom: 24px;
line-height: 1.3;
}
.hero-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
}
.hero-dots button {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-rgba-255-255-255-50);
border: none;
cursor: pointer;
transition: all var(--transition);
}
.hero-dots button[aria-selected="true"] {
background: var(--color-bg);
width: 24px;
border-radius: 5px;
}
/* ========================================
Products Section
======================================== */
.products-section {
background: var(--color-bg);
}
.products-section .section-tag {
display: block;
width: fit-content;
margin: 0 auto 16px;
text-transform: none;
letter-spacing: 0;
padding: 6px 18px;
border-radius: 20px;
background: var(--color-rgba-108-63-197-10);
color: var(--color-purple);
font-size: 13px;
}
.products-section .section-header h2 {
display: block;
font-size: 30px;
font-weight: 700;
color: var(--color-1a1a2e);
}
.products-section .section-header h2::after {
display: none;
}
.products-section .section-desc {
display: block;
margin-top: 12px;
font-size: 14px;
color: var(--color-text-muted);
}
.products-layout {
display: flex;
gap: 24px;
align-items: flex-start;
}
/* 鍏徃浜у搧锛氫簯/閲?浼?鍒嗗眰甯冨眬 */
.products-integration {
position: relative;
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
grid-template-rows: auto auto auto;
column-gap: 24px;
row-gap: 20px;
align-items: stretch;
}
.products-sliding {
grid-column: 1;
grid-row: 1 / -1;
display: grid;
grid-template-rows: subgrid;
width: 48px;
}
.products-body {
display: contents;
}
.cloud-banner,
.products-block-cai,
.products-block-chuan {
grid-column: 2;
}
.sliding-group {
display: flex;
flex-direction: column;
align-items: center;
min-height: 0;
}
.sliding-yun,
.sliding-cai,
.sliding-chuan {
flex: none;
}
.sidebar-node {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 55px;
height: 35px;
border-radius: 15px;
font-size: 18px;
font-weight: 700;
color: var(--color-bg);
background: var(--color-purple-light);
box-shadow: 0 4px 12px var(--color-rgba-108-63-197-25);
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.sidebar-node--cloud,
.sliding-yun .sidebar-node {
background: var(--color-purple-light);
box-shadow: 0 4px 12px var(--color-rgba-108-63-197-25);
}
.sidebar-node:hover,
.sidebar-node.is-active,
.sidebar-node.ball-hover {
transform: scale(1.08);
}
.sidebar-node.ball-hover {
background: linear-gradient(135deg, var(--color-ffc766) 0%, var(--color-ff9500) 100%);
box-shadow: 0 4px 14px var(--color-rgba-255-149-0-35);
}
.sidebar-club {
width: 14px;
flex: 1 1 auto;
min-height: 48px;
margin-top: 6px;
border-radius: 8px 8px 0 0;
background-color: var(--color-purple);
-webkit-mask-image: linear-gradient(to bottom, var(--color-rgba-0-0-0-28) 35%, var(--color-rgba-0-0-0-0) 100%);
mask-image: linear-gradient(to bottom, var(--color-rgba-0-0-0-28) 35%, var(--color-rgba-0-0-0-0) 100%);
transition: background-color 0.35s ease;
}
.sidebar-club--yun {
background-color: var(--color-purple);
-webkit-mask-image: linear-gradient(to bottom, var(--color-rgba-0-0-0-28) 35%, var(--color-rgba-0-0-0-0) 100%);
mask-image: linear-gradient(to bottom, var(--color-rgba-0-0-0-28) 35%, var(--color-rgba-0-0-0-0) 100%);
}
.sidebar-club.gradient-hover {
background-color: var(--color-ff9500) !important;
-webkit-mask-image: linear-gradient(to bottom, var(--color-rgba-0-0-0-40) 0%, var(--color-rgba-0-0-0-0) 100%) !important;
mask-image: linear-gradient(to bottom, var(--color-rgba-0-0-0-40) 0%, var(--color-rgba-0-0-0-0) 100%) !important;
}
.products-main {
flex: 1;
min-width: 0;
}
/* 鑱氳嫳浜?Banner */
.cloud-banner {
border-radius: 12px;
background: url("../images/t20.webp") no-repeat center center;
background-size: cover;
overflow: hidden;
box-shadow: 0 2px 16px var(--color-rgba-0-0-0-6);
transition: box-shadow 0.3s ease;
}
.cloud-banner:hover {
box-shadow: 0 6px 20px var(--color-rgba-108-63-197-12);
}
.cloud-banner-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 32px 40px;
min-height: 180px;
}
.cloud-banner-text h3 {
font-size: 24px;
font-weight: 700;
color: var(--color-1a1a2e);
margin-bottom: 12px;
}
.cloud-banner-desc {
font-size: 14px;
line-height: 1.8;
color: var(--color-text-light);
margin-bottom: 20px;
}
.btn-cloud {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 24px;
font-size: 14px;
font-weight: 500;
color: var(--color-bg);
background: linear-gradient(90deg, var(--color-ffb84d) 0%, var(--color-ff9500) 100%);
border-radius: 22px;
box-shadow: 0 4px 12px var(--color-rgba-255-149-0-30);
transition: transform var(--transition), box-shadow var(--transition);
}
.btn-cloud:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px var(--color-rgba-255-149-0-40);
}
.cloud-banner-visual {
flex-shrink: 0;
}
.cloud-banner-visual img {
width: 160px;
height: 160px;
object-fit: contain;
}
/* 浜у搧鍒嗙被琛岋細閲?/ 浼?*/
.product-row {
display: flex;
gap: 20px;
align-items: stretch;
}
.product-categories {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.product-category {
background: var(--color-bg);
border-radius: 12px;
padding: 20px 22px 18px;
box-shadow: 0 2px 11px var(--color-rgba-0-0-0-10);
transition: box-shadow 0.3s ease;
}
.product-category:hover {
box-shadow: 0 6px 18px var(--color-rgba-108-63-197-12);
}
.product-category--narrow {
flex: 0.62 1 0;
min-width: 0;
}
.product-category--wide {
flex: 1 1 0;
min-width: 0;
}
.category-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 0;
border-bottom: none;
}
.category-title-wrap {
min-width: 0;
}
.category-header h3 {
font-size: 16px;
font-weight: 700;
color: var(--color-1a1a2e);
transition: color 0.3s ease;
}
.category-header h3 a {
color: inherit;
}
.category-titleline {
display: block;
width: 32px;
height: 3px;
margin-top: 8px;
border-radius: 10px;
background: var(--color-orange);
transition: width 0.4s ease;
}
.product-category:hover .category-titleline {
width: 100%;
}
.product-category:hover .category-header h3 {
color: var(--color-purple);
}
.products-section .more-link {
font-size: 14px;
color: var(--color-purple-light);
white-space: nowrap;
margin-top: 2px;
}
.products-section .more-link:hover {
color: var(--color-purple-light);
}
.product-grid {
display: flex;
flex-wrap: nowrap;
gap: 12px;
}
.product-card {
display: flex;
flex-direction: column;
flex: 1 1 0;
min-width: 0;
overflow: hidden;
border: 1px solid #EFF0F2;
border-radius: 10px;
background: var(--color-bg);
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.site-header.is-search-open .header-search-btn {
visibility: hidden;
}
.header-search-panel {
position: absolute;
top: -16px;
right: 0;
width: 450px;
z-index: 40;
padding-top: 10px;
background: #fff;
transform-origin: 100% center;
transition: all 0.3s;
}
.header-search-panel.search-hide {
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: scale(0);
}
.header-search-form {
position: relative;
display: block;
width: 100%;
margin: 0;
}
.header-search-input {
display: block;
width: 100%;
height: 48px;
border: 1px solid #d4d4d4;
line-height: 48px;
padding: 0 90px 0 20px;
outline: none;
font-size: 16px;
color: #282828;
background: #fff;
border-radius: 0;
}
.header-search-input::placeholder {
color: rgba(84, 84, 84, 1);
font-size: 14px;
}
.header-search-input:focus {
border: 1px solid #bebdbd;
color: #282828;
box-shadow: 0 3px 8px #d4d4d4;
}
.header-search-input::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.header-search-submit,
.header-search-close {
position: absolute;
top: 12px;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: none;
background: transparent;
color: #86807f;
cursor: pointer;
padding: 0;
margin: 0;
text-decoration: none;
}
.header-search-submit {
right: 52px;
}
.header-search-submit .icon-css {
opacity: 0.85;
}
.header-search-close {
right: 12px;
}
.header-search-close::before,
.header-search-close::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 2px;
background: #86807f;
}
.header-search-close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.header-search-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.header-search-submit:hover,
.header-search-close:hover {
color: #333;
}
.header-search-close:hover::before,
.header-search-close:hover::after {
background: #333;
}
.header-search-suggest {
background: #f8f8f8;
border: 1px solid #d4d4d4;
border-top: none;
}
.header-search-block + .header-search-block {
border-top: 1px solid #d4d4d4;
}
.header-search-label {
display: flex;
align-items: center;
margin: 16px 15px 0;
padding-bottom: 10px;
border-bottom: 1px solid #d4d4d4;
font-size: 14px;
color: #333;
font-weight: 400;
}
.header-search-clear {
display: inline-block;
width: 13px;
height: 13px;
margin-left: 10px;
border: none;
background: transparent;
cursor: pointer;
position: relative;
}
.header-search-clear::before,
.header-search-clear::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 12px;
height: 1.5px;
background: #999;
}
.header-search-clear::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.header-search-clear::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.header-search-clear:hover::before,
.header-search-clear:hover::after {
background: #333;
}
.header-search-history-list {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
padding: 12px 15px 16px;
}
.header-search-history-list:empty {
padding-top: 8px;
}
.header-search-history-list:empty::before {
content: "暂无搜索记录";
font-size: 13px;
color: #999;
}
.site-header.is-search-open .main-nav {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.header-search-wrap {
position: relative;
width: 36px;
height: 36px;
flex-shrink: 0;
}
.site-header.is-search-open .header-search-btn {
visibility: hidden;
}
.header-buy {
position: relative;
}
.header-buy-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 150px;
margin-top: 0;
padding: 12px 0 4px;
background: transparent;
border: none;
box-shadow: none;
z-index: 40;
display: none;
}
.header-buy-menu::before {
content: "";
position: absolute;
top: 8px;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border: 1px solid #eee;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
z-index: -1;
}
.header-buy:hover .header-buy-menu,
.header-buy:focus-within .header-buy-menu {
display: block;
}
.header-buy:hover .header-buy-btn,
.header-buy:focus-within .header-buy-btn {
background: var(--color-primary-light);
color: var(--color-purple);
}
.header-buy-item {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
font-size: 14px;
color: #333;
white-space: nowrap;
transition: background 0.2s ease, color 0.2s ease;
}
.header-buy-item:hover {
background: #f5f5f5;
color: var(--color-purple);
}
.header-buy-item .icon-css {
flex-shrink: 0;
}
/* Header search — 对齐有人科技 usr.cn */
.site-header.is-search-open .main-nav {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.header-search-wrap {
position: relative;
width: 36px;
height: 36px;
flex-shrink: 0;
}
.header-search-history-list a {
display: inline-block;
padding: 4px 12px;
font-size: 13px;
color: #666;
background: #fff;
border: 1px solid #ddd;
border-radius: 2px;
}
.header-search-history-list a:hover {
color: var(--color-purple);
border-color: var(--color-purple);
}
.header-search-links {
list-style: none;
margin: 0;
padding: 0 15px 8px;
}
.header-search-links li {
border-bottom: 1px solid #d4d4d4;
}
.header-search-links li:last-child {
border-bottom: none;
}
.header-search-links a {
display: block;
line-height: 44px;
font-size: 14px;
font-weight: 700;
color: #333;
}
.header-search-links a:hover {
color: var(--color-purple);
}
.product-card:hover,
.product-card.is-active {
border-color: var(--color-purple);
box-shadow: 0 4px 14px var(--color-rgba-108-63-197-12);
transform: translateY(-2px);
}
.product-card-img {
display: flex;
align-items: center;
justify-content: center;
padding: 14px 10px 10px;
min-height: 90px;
background: var(--color-bg);
overflow: hidden;
transition: background 0.25s ease;
}
.product-card-img img {
width: 100%;
height: 72px;
object-fit: contain;
background: transparent;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
}
.product-card:hover .product-card-img img,
.product-card.is-active .product-card-img img {
transform: scale(1.05);
}
.product-card-label {
display: block;
padding: 0 4px;
height: 34px;
line-height: 34px;
font-size: 12px;
text-align: center;
color: var(--color-3d3d3d);
background: var(--color-eff0f2);
border-radius: 0 0 10px 10px;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-card:hover .product-card-label,
.product-card.is-active .product-card-label {
color: var(--color-bg);
background: var(--color-purple-light);
}
/* ========================================
Hot Products Grid
======================================== */
.hot-section {
background: #f5f5fb;
}
/* 鈮?920锛?00% 瀹斤紱>1920锛氬眳涓紝涓讳綋 1920 */
.hot-section > .container {
max-width: 100%;
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
@media (min-width: 1921px) {
.hot-section > .container {
max-width: 1920px;
margin-left: auto;
margin-right: auto;
padding-left: 30px;
padding-right: 30px;
}
}
.hot-section .section-tag {
display: block;
width: fit-content;
margin: 0 auto 16px;
text-transform: none;
letter-spacing: 0;
padding: 6px 18px;
border-radius: 20px;
background: var(--color-rgba-108-63-197-10);
color: var(--color-purple);
font-size: 13px;
}
.hot-section .section-header h2 {
display: block;
font-size: 42px;
font-weight: 700;
color: var(--color-1a1a2e);
}
.hot-section .section-header h2::after {
display: none;
}
.hot-section .section-desc {
display: block;
margin-top: 12px;
font-size: 16px;
color: var(--color-text-muted);
}
/* 涓婁袱琛岀害 2/3 + 1/3锛屽簳鏍忔暟鎹?娓╁害鍚勫崐 */
.hot-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: minmax(160px, auto) minmax(160px, auto) minmax(160px, auto);
gap: 20px;
width: 100%;
}
.hot-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
background: #fff;
border-radius: 12px;
padding: 22px 24px;
overflow: hidden;
color: inherit;
box-shadow: 0 2px 12px var(--color-rgba-0-0-0-6);
transition: box-shadow var(--transition), transform var(--transition);
}
.hot-card:hover {
box-shadow: 0 8px 28px var(--color-rgba-108-63-197-12);
transform: translateY(-2px);
}
.hot-card-text {
flex: 1 1 auto;
min-width: 0;
}
.hot-card-title-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.hot-card-text h3 {
font-size: 20px;
font-weight: 700;
color: var(--color-1a1a2e);
line-height: 1.3;
margin: 0;
}
.hot-card-icon {
flex-shrink: 0;
display: block;
width: 43px;
height: 43px;
margin: 0;
}
.hot-card-icon--io {
background-position: -73px -10px;
}
.hot-card-icon--power {
background-position: -10px -11px;
}
.hot-card-icon--terminal {
background-position: -136px -74px;
}
.hot-card-icon--distribution {
background-position: -10px -74px;
}
.hot-card-icon--data {
background-position: -73px -74px;
}
.hot-card-icon--temp {
background-position: -136px -10px;
}
.hot-card-desc {
font-size: 13px;
line-height: 1.65;
color: #666666;
font-weight: 400;
}
.hot-card-img {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
max-width: 46%;
}
.hot-card-img img {
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: 128px;
object-fit: contain;
background: transparent;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hot-card:hover .hot-card-img img {
transform: scale(1.04);
}
.hot-io {
grid-column: 1 / 5;
grid-row: 1;
background: linear-gradient(105deg, #eaf4ff 0%, #f3f8ff 42%, #ffffff 100%);
padding: 24px 28px;
}
.hot-io .hot-card-img {
max-width: 40%;
}
.hot-io .hot-card-img img {
max-height: 148px;
}
.hot-terminal {
grid-column: 5 / 7;
grid-row: 1 / 3;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
min-height: 340px;
padding: 24px 22px 18px;
background: linear-gradient(165deg, #eaf3ff 0%, #f4f8ff 45%, #ffffff 100%);
}
.hot-terminal .hot-card-text {
flex: 0 0 auto;
width: 100%;
}
.hot-terminal .hot-card-img {
flex: 1 1 auto;
max-width: 100%;
width: 100%;
min-height: 0;
margin-top: 16px;
align-items: flex-end;
justify-content: center;
}
.hot-terminal .hot-card-img img {
max-height: 250px;
max-width: 90%;
}
.hot-power {
grid-column: 1 / 3;
grid-row: 2;
background: linear-gradient(105deg, #f1ecff 0%, #f7f4ff 45%, #ffffff 100%);
}
.hot-distribution {
grid-column: 3 / 5;
grid-row: 2;
background: linear-gradient(105deg, #eef3f8 0%, #f5f8fb 45%, #ffffff 100%);
}
.hot-data {
grid-column: 1 / 4;
grid-row: 3;
background: linear-gradient(105deg, #eef3f7 0%, #f5f8fb 45%, #ffffff 100%);
}
.hot-temp {
grid-column: 4 / 7;
grid-row: 3;
background: linear-gradient(105deg, #fff0e8 0%, #fff6f0 45%, #ffffff 100%);
}
.hot-data .hot-card-img img,
.hot-temp .hot-card-img img {
max-height: 120px;
}
.hot-temp .hot-card-img {
max-width: 48%;
}
/* 澶у睆鍚屽睆锛涘搴﹁鍒欒涓婃柟 鈮?920 / >1920 */
@media (min-width: 1600px) {
.hot-section {
height: 100vh;
min-height: 900px;
max-height: 1080px;
padding: 36px 0 40px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.hot-section > .container {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
width: 100%;
}
.hot-section .section-header {
flex-shrink: 0;
margin-bottom: 22px;
}
.hot-section .section-tag {
margin: 0 auto 10px;
}
.hot-section .section-header h2 {
font-size: 38px;
}
.hot-section .section-desc {
margin-top: 8px;
font-size: 15px;
}
.hot-grid {
flex: 1;
min-height: 0;
width: 100%;
grid-template-columns: 1.1fr 1.1fr 1.1fr 1.1fr 1fr 1fr;
grid-template-rows: 1.1fr 1fr 1fr;
gap: 20px;
}
.hot-card {
height: 100%;
min-height: 0;
padding: 20px 26px;
gap: 16px;
}
.hot-card-title-row {
margin-bottom: 8px;
}
.hot-card-text h3 {
font-size: 20px;
}
.hot-card-desc {
font-size: 13px;
line-height: 1.65;
}
.hot-card-img img {
max-height: 130px;
}
.hot-io {
padding: 22px 30px;
}
.hot-io .hot-card-img {
max-width: 42%;
}
.hot-io .hot-card-img img {
max-height: 160px;
}
.hot-terminal {
min-height: 0;
padding: 22px 22px 18px;
}
.hot-terminal .hot-card-img {
margin-top: 12px;
}
.hot-terminal .hot-card-img img {
max-height: min(280px, 42vh);
}
.hot-data .hot-card-img img,
.hot-temp .hot-card-img img {
max-height: 128px;
}
.hot-temp .hot-card-img {
max-width: 50%;
}
}
/* ========================================
Video Section
======================================== */
.video-section {
background: var(--color-bg);
}
.video-section > .container {
max-width: var(--container-width);
}
.video-section .section-tag {
display: block;
width: fit-content;
margin: 0 auto 16px;
text-transform: none;
letter-spacing: 0;
padding: 6px 18px;
border-radius: 20px;
background: var(--color-rgba-108-63-197-10);
color: var(--color-purple);
font-size: 13px;
}
.video-section .section-header h2 {
display: block;
font-size: 42px;
font-weight: 700;
color: var(--color-1a1a2e);
}
.video-section .section-header h2::after {
display: none;
}
.video-section .section-desc {
display: block;
margin-top: 12px;
font-size: 16px;
color: var(--color-text-muted);
}
.video-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.video-card {
display: flex;
flex-direction: column;
background: var(--color-bg);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 16px var(--color-rgba-0-0-0-6);
transition: box-shadow var(--transition), transform var(--transition);
}
.video-card:hover {
box-shadow: 0 8px 28px var(--color-rgba-0-0-0-10);
transform: translateY(-2px);
}
.video-thumb {
position: relative;
display: block;
overflow: hidden;
}
.video-thumb img {
width: 100%;
height: 300px;
object-fit: cover;
background: var(--color-eef0f4);
transition: transform 0.5s ease;
}
.video-card:hover .video-thumb img {
transform: scale(1.04);
}
.play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
background-position: -573px -13px;
width: 46px;
height: 46px;
border-radius: 50%;
transition: transform var(--transition);
}
.video-card:hover .play-btn {
transform: translate(-50%, -50%) scale(1.06);
}
.video-card-body {
flex: 1;
display: flex;
flex-direction: column;
padding: 16px 16px 18px;
}
.video-card h3 {
padding: 0;
font-size: 20px;
font-weight: 600;
line-height: 1.45;
color: var(--color-1a1a2e);
margin-bottom: 12px;
}
.video-card:hover h3 a {
color: var(--color-purple-light);
}
.video-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.video-cat {
flex-shrink: 0;
padding: 2px 8px;
font-size: 12px;
line-height: 1.5;
color: var(--color-f60);
background: var(--color-rgba-255-102-0-8);
border-radius: 3px;
}
.video-stats {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto;
}
.video-stat {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--color-text-muted);
white-space: nowrap;
}
.video-stat-icon {
position: relative;
width: 14px;
height: 14px;
flex-shrink: 0;
}
.video-stat-icon--date::before {
content: "";
position: absolute;
inset: 1px 2px;
border: 1.5px solid var(--color-bbb);
border-radius: 2px;
}
.video-stat-icon--date::after {
content: "";
position: absolute;
top: 0;
left: 4px;
right: 4px;
height: 3px;
background: var(--color-bbb);
border-radius: 1px 1px 0 0;
}
.video-stat-icon--view::before {
content: "";
position: absolute;
top: 3px;
left: 1px;
width: 12px;
height: 8px;
border: 1.5px solid var(--color-bbb);
border-radius: 50%;
}
.video-stat-icon--view::after {
content: "";
position: absolute;
bottom: 1px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid var(--color-bbb);
}
.btn-video {
display: block;
width: 100%;
margin-top: auto;
padding: 10px 0;
text-align: center;
font-size: 14px;
color: var(--color-text-light);
background: var(--color-bg);
border: 1px solid var(--color-e0e0e0);
border-radius: 4px;
transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.video-card:hover .btn-video {
color: var(--color-purple-light);
border-color: var(--color-purple-light);
background: var(--color-e9e9fb);
}
/* ========================================
宸ヤ笟鐗╄仈缃戞壘鑱氳嫳
======================================== */
.iot-trust-section {
position: relative;
min-height: 680px;
padding: 0;
overflow: hidden;
display: flex;
align-items: center;
}
.iot-trust-bg {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(20, 40, 70, 0.15) 0%, rgba(20, 40, 70, 0.05) 45%, rgba(255, 255, 255, 0.2) 100%),
url("../images/y.webp") center / cover no-repeat;
z-index: 0;
}
.iot-trust-play {
position: absolute;
left: 28%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 88px;
height: 88px;
border: 2px solid rgba(255, 255, 255, 0.95);
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
cursor: pointer;
backdrop-filter: blur(2px);
text-decoration: none;
transition: transform var(--transition), background var(--transition);
}
.iot-trust-play:hover {
transform: translate(-50%, -50%) scale(1.06);
background: rgba(255, 255, 255, 0.28);
}
.iot-trust-play-icon {
display: block;
width: 0;
height: 0;
margin: 0 auto;
border-style: solid;
border-width: 14px 0 14px 24px;
border-color: transparent transparent transparent #fff;
transform: translateX(3px);
}
.iot-trust-inner {
position: relative;
z-index: 2;
display: flex;
justify-content: flex-end;
max-width: 100%;
width: 100%;
padding: 48px 40px;
}
@media (min-width: 1921px) {
.iot-trust-inner {
max-width: 1920px;
margin-left: auto;
margin-right: auto;
padding-left: 60px;
padding-right: 60px;
}
}
.iot-trust-card {
width: 100%;
max-width: 520px;
padding: 40px 42px 36px;
background: rgba(255, 255, 255, 0.96);
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
.iot-trust-card h2 {
font-size: 32px;
font-weight: 700;
color: var(--color-1a1a2e);
line-height: 1.35;
margin-bottom: 16px;
}
.iot-trust-desc {
list-style: none;
margin: 0 0 28px;
padding: 0;
}
.iot-trust-desc li {
position: relative;
padding-left: 14px;
font-size: 14px;
line-height: 1.9;
color: #666;
}
.iot-trust-desc li::before {
content: "";
position: absolute;
left: 0;
top: 0.75em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--color-purple);
}
.iot-trust-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px 28px;
margin-bottom: 32px;
}
.iot-trust-stat strong {
display: block;
font-size: 36px;
font-weight: 700;
color: var(--color-purple);
line-height: 1.15;
margin-bottom: 6px;
}
.iot-trust-stat span {
font-size: 14px;
color: #666;
line-height: 1.4;
}
.iot-trust-actions {
display: flex;
gap: 16px;
}
.btn-iot {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 16px;
font-size: 15px;
font-weight: 600;
color: #fff;
background: #ff7a1a;
border: none;
border-radius: 4px;
transition: background var(--transition), transform var(--transition);
}
.btn-iot:hover {
background: #ef6a0a;
color: #fff;
transform: translateY(-1px);
}
@media (max-width: 1024px) {
.iot-trust-section {
min-height: 0;
padding: 48px 0;
}
.iot-trust-play {
left: 50%;
top: 28%;
}
.iot-trust-inner {
justify-content: center;
padding: 180px 20px 24px;
}
.iot-trust-card {
max-width: 560px;
padding: 32px 28px 28px;
}
.iot-trust-card h2 {
font-size: 26px;
}
.iot-trust-stat strong {
font-size: 30px;
}
}
@media (max-width: 640px) {
.iot-trust-play {
width: 68px;
height: 68px;
top: 22%;
}
.iot-trust-stats {
gap: 16px;
}
.iot-trust-actions {
flex-direction: column;
}
}
/* ========================================
News Section
======================================== */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.news-section {
background: var(--color-bg);
padding-top: 48px;
padding-bottom: 64px;
}
.news-section > .container {
max-width: var(--container-width);
}
.news-section .section-tag {
display: block;
width: fit-content;
margin: 0 auto 16px;
text-transform: none;
letter-spacing: 0;
padding: 12px 36px;
border-radius: 20px;
background: #F6F4FE;
color: var(--color-purple-light);
font-size: 14px;
}
.news-section .section-header h2 {
display: block;
font-size: 42px;
font-weight: 700;
color: var(--color-1a1a2e);
}
.news-section .section-header h2::after {
display: none;
}
.news-section .section-desc {
display: block;
margin-top: 12px;
font-size: 16px;
color: var(--color-text-muted);
}
.news-wrap {
display: flex;
gap: 36px;
align-items: stretch;
}
.news-sidebar {
flex-shrink: 0;
width: 118px;
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 2px;
}
.news-nav-item {
display: block;
padding: 14px 12px;
font-size: 15px;
font-weight: 500;
text-align: center;
color: var(--color-purple);
border-radius: 6px;
transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.news-nav-item:hover {
background: var(--color-rgba-108-63-197-8);
transform: translateX(4px);
}
.news-nav-item.is-active {
color: var(--color-bg);
background: var(--color-purple);
box-shadow: 0 6px 16px rgba(108, 63, 197, 0.28);
}
.news-nav-item.is-active:hover {
transform: translateX(0);
background: var(--color-purple-light);
}
.news-content {
flex: 1;
min-width: 0;
overflow: hidden;
}
.news-slider {
width: 100%;
overflow: hidden;
touch-action: pan-y;
cursor: grab;
user-select: none;
}
.news-slider.is-dragging {
cursor: grabbing;
}
.news-slider.is-dragging a {
pointer-events: none;
}
.news-track {
display: flex;
width: 100%;
transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
will-change: transform;
}
.news-panel {
flex: 0 0 100%;
width: 100%;
min-width: 100%;
box-sizing: border-box;
}
.news-featured-img {
transition: opacity 0.25s ease;
}
.news-layout {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 40px;
align-items: stretch;
}
.news-sidebar .news-nav-item {
width: 100%;
font-family: inherit;
cursor: pointer;
border: none;
}
.news-featured {
border-radius: 6px;
overflow: hidden;
background: #fff;
border: 1px solid #e8e4f5;
box-shadow: 0 2px 14px rgba(108, 63, 197, 0.06);
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.news-featured:hover {
transform: translateY(-6px);
border-color: rgba(108, 63, 197, 0.28);
box-shadow: 0 14px 36px rgba(108, 63, 197, 0.16);
}
.news-featured-link {
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
}
.news-featured-img-wrap {
position: relative;
display: block;
overflow: hidden;
flex: 1;
min-height: 220px;
}
.news-featured-img-wrap img {
width: 100%;
height: 100%;
min-height: 220px;
object-fit: cover;
background:
linear-gradient(135deg, var(--color-rgba-40-20-90-35), var(--color-rgba-108-63-197-20)),
linear-gradient(135deg, var(--color-3b1d8f) 0%, var(--color-5b3bb8) 45%, var(--color-2a6bb8) 100%);
transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.news-featured-link:hover .news-featured-img-wrap img {
transform: scale(1.06);
}
.news-featured-date {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: baseline;
gap: 4px;
padding: 10px 16px 12px;
color: var(--color-bg);
background: linear-gradient(135deg, var(--color-purple) 0%, #6b4fd8 100%);
z-index: 1;
transition: padding 0.3s ease, box-shadow 0.3s ease;
}
.news-featured-link:hover .news-featured-date {
padding-right: 22px;
box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.18);
}
.news-featured-date .day {
font-size: 28px;
font-weight: 700;
line-height: 1;
}
.news-featured-date .sep {
font-size: 16px;
font-weight: 300;
opacity: 0.9;
}
.news-featured-date .ym {
font-size: 13px;
font-weight: 500;
}
.news-featured-text {
padding: 18px 20px 22px;
background: #fff;
transition: background 0.3s ease;
}
.news-featured-link:hover .news-featured-text {
background: #faf8ff;
}
.news-featured-text h3 {
font-size: 16px;
font-weight: 600;
line-height: 1.55;
margin-bottom: 10px;
color: var(--color-1a1a2e);
transition: color 0.3s ease;
}
.news-featured-link:hover .news-featured-text h3 {
color: var(--color-purple);
}
.news-featured-text p {
font-size: 13px;
line-height: 1.75;
color: var(--color-text-muted);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-list {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0;
}
.news-item {
display: flex;
gap: 18px;
align-items: flex-start;
padding: 16px 12px;
margin: 0 -12px;
border-bottom: 1px solid var(--color-eef0f4);
border-radius: 8px;
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.news-item:first-child {
padding-top: 16px;
}
.news-item:last-child {
border-bottom: none;
padding-bottom: 16px;
}
.news-item:hover {
background: #f8f6ff;
transform: translateX(6px);
box-shadow: 0 8px 22px rgba(108, 63, 197, 0.1);
}
/* 鏃ユ湡鍧楋細鏂规 + 鏃?+ 涓嬪垝绾垮勾鏈堬紱鎮仠/棣栨潯绱簳 */
.news-item time {
position: relative;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 72px;
min-height: 72px;
padding: 10px 8px 12px;
text-align: center;
border-radius: 4px;
border: 1px solid var(--color-purple);
background: transparent;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.news-item:first-child time {
background: var(--color-purple);
border-color: var(--color-purple);
}
.news-item:first-child time .day,
.news-item:first-child time .ym {
color: #fff;
}
.news-item:first-child time .ym {
border-top-color: rgba(255, 255, 255, 0.45);
}
.news-item time .day {
font-size: 28px;
font-weight: 700;
color: var(--color-purple);
line-height: 1;
transition: color 0.3s ease;
}
.news-item time .ym {
font-size: 12px;
color: var(--color-purple);
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--color-purple);
width: 100%;
line-height: 1;
transition: color 0.3s ease, border-color 0.3s ease;
}
.news-item:hover time,
.news-item.is-active time {
background: var(--color-purple);
border-color: var(--color-purple);
transform: scale(1.04);
box-shadow: 0 6px 14px rgba(108, 63, 197, 0.3);
}
.news-item:hover time .day,
.news-item:hover time .ym,
.news-item.is-active time .day,
.news-item.is-active time .ym {
color: #fff;
}
.news-item:hover time .ym,
.news-item.is-active time .ym {
border-top-color: rgba(255, 255, 255, 0.45);
}
.news-item time::after {
content: "";
position: absolute;
top: 50%;
right: -6px;
transform: translateY(-50%);
border-style: solid;
border-width: 6px 0 6px 6px;
border-color: transparent transparent transparent var(--color-purple);
opacity: 0;
transition: opacity 0.3s ease;
}
.news-item:hover time::after,
.news-item.is-active time::after,
.news-item:first-child time::after {
opacity: 1;
}
.news-item-body {
flex: 1;
min-width: 0;
padding-top: 2px;
}
.news-item-body h3 {
font-size: 15px;
font-weight: 600;
margin-bottom: 8px;
line-height: 1.5;
color: var(--color-1a1a2e);
transition: color 0.3s ease;
}
.news-item:hover .news-item-body h3,
.news-item-body h3 a:hover {
color: var(--color-purple);
}
.news-item-body h3 a {
color: inherit;
transition: color 0.3s ease;
}
.news-item-body p {
font-size: 13px;
color: var(--color-text-muted);
line-height: 1.7;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.3s ease;
}
.news-item:hover .news-item-body p {
color: #777;
}
/* ========================================
Footer
======================================== */
.site-footer {
background: var(--color-bg-gray);
border-top: 1px solid var(--color-border);
}
.footer-main {
display: grid;
grid-template-columns: 1.35fr 0.9fr 1.35fr 0.9fr 0.9fr 1.35fr;
gap: 28px;
padding: 52px 20px 36px;
}
.footer-main.footer-main--home {
grid-template-columns: 1.35fr 0.9fr 1.35fr 0.9fr 0.9fr 1.35fr;
}
.footer-brand img {
margin-bottom: 18px;
}
.footer-contact {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-contact li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
line-height: 1.55;
color: var(--color-text-light);
margin-bottom: 0;
}
.footer-contact-icon {
flex-shrink: 0;
margin-top: 4px;
}
.footer-contact a {
color: var(--color-text-light);
}
.footer-contact a:hover {
color: var(--color-primary);
}
.footer-col h4,
.footer-qr-title {
font-size: 15px;
font-weight: 600;
margin-bottom: 16px;
color: var(--color-text);
}
.footer-col ul li {
margin-bottom: 10px;
}
.footer-col ul li a {
font-size: 13px;
color: var(--color-text-light);
}
.footer-col ul li a:hover {
color: var(--color-primary);
}
.footer-solutions-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 16px;
}
.footer-qr {
display: flex;
gap: 12px;
justify-content: flex-end;
}
.footer-qr--shops {
display: block;
justify-content: initial;
}
.footer-qr--shops .footer-qr-row {
display: flex;
gap: 12px;
justify-content: flex-start;
}
.footer-qr--shops .qr-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.qr-item {
text-align: center;
}
.qr-item img,
.footer-qr--shops .qr-item img {
width: 82px;
height: 82px;
margin: 0;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 4px;
object-fit: cover;
}
.qr-item span {
font-size: 11px;
color: var(--color-text-muted);
}
.qr-shop-btn {
display: inline-block;
min-width: 72px;
padding: 4px 12px;
font-size: 12px;
line-height: 1.4;
text-align: center;
color: var(--color-bg);
background: var(--color-primary);
border-radius: 14px;
transition: background var(--transition);
}
.qr-shop-btn:hover {
background: var(--color-primary-dark);
color: var(--color-bg);
}
.footer-bottom {
border-top: 1px solid var(--color-border);
padding: 16px 0;
text-align: center;
}
.footer-bottom p {
font-size: 12px;
color: var(--color-text-muted);
}
.footer-bottom a {
color: var(--color-text-muted);
}
.footer-bottom a:hover {
color: var(--color-primary);
}
/* ========================================
Float Sidebar
======================================== */
.float-sidebar {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 900;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0;
pointer-events: none;
}
.float-sidebar > * {
pointer-events: auto;
}
.float-ctas {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
margin-right: 8px;
margin-bottom: 4px;
}
.float-cta-item {
position: relative;
margin-top: -25px;
}
.float-cta-item.is-hidden {
display: none;
}
.float-cta {
display: block;
line-height: 0;
transition: transform var(--transition), filter var(--transition);
}
.float-cta:hover {
filter: brightness(1.05);
transform: translateX(-2px);
}
.float-cta img {
display: block;
width: 110px;
height: auto;
}
.float-cta-close {
position: absolute;
top: 4px;
right: 4px;
width: 22px;
height: 22px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
z-index: 2;
}
.float-service {
position: relative;
z-index: 3;
display: block;
margin-bottom: -28px;
margin-right: -6px;
margin-top: -25px;
text-decoration: none;
line-height: 0;
}
.float-mascot-crop {
display: block;
width: 120px;
height: 152px;
overflow: hidden;
}
.float-mascot {
width: 110px;
height: auto;
display: block;
margin-top: 0;
filter: drop-shadow(0 4px 12px var(--color-rgba-0-0-0-12));
transition: transform var(--transition);
}
.float-service:hover .float-mascot {
transform: scale(1.04) translateY(-2px);
}
.float-panel {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
width: 56px;
background: var(--color-f7f8fc);
border-radius: 8px 0 0 8px;
box-shadow: -2px 2px 16px var(--color-rgba-0-0-0-10);
overflow: visible;
}
.float-qr-wrap {
position: relative;
width: 100%;
}
.float-qr-wrap::before {
content: '';
position: absolute;
right: 100%;
top: 0;
width: 12px;
height: 100%;
}
.float-qr-popover {
position: absolute;
right: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
width: 168px;
padding: 16px 16px 14px;
background: var(--color-bg);
border: 1px solid var(--color-eef0f4);
border-radius: 8px;
box-shadow: 0 4px 20px var(--color-rgba-0-0-0-12);
text-align: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--transition), visibility var(--transition);
z-index: 1;
}
.float-qr-popover--phone {
width: auto;
min-width: 150px;
padding: 14px 18px;
white-space: nowrap;
}
.float-qr-popover--phone strong {
display: block;
font-size: 18px;
font-weight: 700;
color: var(--color-6c55d8);
letter-spacing: 0.02em;
}
.float-qr-wrap:hover .float-qr-popover {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.float-qr-wrap:hover .float-icon-btn {
background: var(--color-f8f6ff);
}
.float-qr-popover img {
width: 132px;
height: 132px;
display: block;
margin: 0 auto;
border-radius: 4px;
object-fit: contain;
}
.float-qr-popover p {
margin: 10px 0 0;
font-size: 13px;
color: var(--color-text-light);
line-height: 1.4;
}
.float-qr-popover--phone p {
margin: 6px 0 0;
font-size: 12px;
}
.float-icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 56px;
padding: 10px;
background: transparent;
border: none;
border-bottom: 1px solid var(--color-f0f0f5);
cursor: pointer;
transition: background var(--transition);
text-decoration: none;
}
.float-panel > .float-qr-wrap:last-child .float-icon-btn,
.float-icon-btn:last-child {
border-bottom: none;
}
.float-icon-btn:hover {
background: var(--color-f8f6ff);
}
.float-icon-btn img {
width: 36px;
height: 36px;
object-fit: contain;
display: block;
}
/* ========================================
Responsive
======================================== */
@media (max-width: 1024px) {
.product-grid .product-card {
flex: 1 1 calc(50% - 6px);
}
.video-grid {
grid-template-columns: repeat(2, 1fr);
}
.hot-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.hot-io,
.hot-terminal,
.hot-power,
.hot-distribution,
.hot-data,
.hot-temp {
grid-column: auto;
grid-row: auto;
min-height: 0;
flex-direction: row;
align-items: center;
padding: 22px 24px;
}
.hot-io {
grid-column: 1 / -1;
}
.hot-terminal {
grid-column: 1 / -1;
}
.hot-terminal .hot-card-text {
flex: 1;
width: auto;
}
.hot-terminal .hot-card-img {
margin-top: 0;
width: auto;
flex: 0 0 auto;
}
.hot-io .hot-card-img img,
.hot-terminal .hot-card-img img {
max-height: 120px;
}
.hot-temp {
grid-column: auto;
}
.footer-main,
.footer-main--home {
grid-template-columns: repeat(3, 1fr);
}
.footer-qr,
.footer-qr--shops {
grid-column: 1 / -1;
justify-content: center;
}
.footer-qr--shops .footer-qr-row {
justify-content: center;
}
.news-layout {
gap: 28px;
}
}
@media (max-width: 768px) {
.main-nav {
display: none;
}
.mobile-toggle {
display: flex;
}
.hero-slide img,
.hero-slide video {
height: 280px;
}
.hero-title {
font-size: 22px;
}
.hot-grid {
grid-template-columns: 1fr;
}
.hot-temp {
grid-column: auto;
}
.hot-card {
padding: 18px 16px;
}
.hot-card-text h3 {
font-size: 17px;
}
.hot-card-desc {
font-size: 12px;
}
.product-categories {
grid-template-columns: 1fr;
}
.products-layout {
flex-direction: column;
}
.products-integration {
display: flex;
flex-direction: column;
gap: 16px;
}
.products-sliding {
display: flex;
grid-column: auto;
grid-row: auto;
width: 100%;
flex-direction: row;
justify-content: center;
gap: 40px;
}
.products-body {
display: flex;
flex-direction: column;
gap: 16px;
}
.cloud-banner,
.products-block-cai,
.products-block-chuan {
grid-column: auto;
}
.sliding-group {
flex: 0 0 auto;
align-items: center;
}
.sidebar-club {
display: none;
}
.product-row {
flex-direction: column;
}
.product-category--narrow,
.product-category--wide {
flex: 1 1 auto;
}
.product-grid {
flex-wrap: wrap;
}
.product-grid .product-card {
flex: 1 1 calc(33.333% - 8px);
}
.news-wrap {
flex-direction: column;
gap: 24px;
}
.news-sidebar {
width: 100%;
flex-direction: row;
justify-content: center;
gap: 8px;
}
.news-nav-item {
flex: 1;
max-width: 120px;
}
.news-layout {
grid-template-columns: 1fr;
}
.news-featured-img-wrap,
.news-featured-img-wrap img {
min-height: 200px;
}
.footer-main,
.footer-main--home {
grid-template-columns: 1fr 1fr;
}
.footer-brand,
.footer-qr--shops {
grid-column: 1 / -1;
}
.footer-solutions-cols {
grid-template-columns: 1fr;
}
.float-sidebar {
display: none;
}
.section-header h2 {
font-size: 22px;
}
}
@media (max-width: 480px) {
.product-grid .product-card {
flex: 1 1 100%;
}
.video-grid,
.bento-grid {
grid-template-columns: 1fr;
}
.bento-wide {
grid-column: auto;
}
.footer-main,
.footer-main--home {
grid-template-columns: 1fr;
}
.footer-qr--shops .footer-qr-row {
flex-wrap: wrap;
}
}
/* --- Print --- */
@media print {
.site-header,
.float-sidebar,
.hero-dots {
display: none;
}
}
/* ===== about.css ===== */
/* ========================================
About Page ??????
======================================== */
.page-about {
--about-purple: var(--color-8a5cf5);
--about-purple-dark: var(--color-7348e0);
--about-purple-light: var(--color-f3efff);
}
/* --- Section Header????index.html??--- */
.page-about .section-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 40px;
}
.page-about .section-tag {
display: inline-block;
width: fit-content;
padding: 6px 18px;
margin: 0 auto 16px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--about-purple);
background: var(--color-rgba-138-92-245-10);
border-radius: 20px;
}
.page-about .section-header h2 {
display: block;
width: 100%;
max-width: 720px;
margin: 0 0 12px;
font-size: clamp(24px, 4vw, 30px);
font-weight: 700;
line-height: 1.35;
color: var(--color-1a1a2e);
}
.page-about .section-header h2::after {
display: none;
}
.page-about .section-desc {
display: block;
max-width: 560px;
margin: 0;
font-size: 14px;
line-height: 1.75;
color: var(--color-text-muted);
}
/* --- Hero --- */
.about-hero {
display: flex;
flex-direction: column;
padding: 0;
text-align: center;
background: var(--color-bg);
}
.about-hero-body {
padding: 78px 0 56px;
background: var(--color-ece5fc) url(../images/about-hero.webp) center no-repeat;
background-size: cover;
height: 500px;
}
.about-hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 18px;
margin-bottom: 22px;
font-size: 13px;
color: var(--about-purple);
background: var(--color-rgba-255-255-255-85);
border: 1px solid var(--color-rgba-138-92-245-12);
border-radius: 24px;
box-shadow: 0 2px 12px var(--color-rgba-138-92-245-8);
}
.about-hero-tag-dot {
flex-shrink: 0;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--about-purple);
}
.about-hero-title {
font-size: clamp(36px, 6vw, 52px);
font-weight: 700;
color: var(--color-1a1a2e);
margin-bottom: 18px;
line-height: 1.25;
letter-spacing: 2px;
}
.about-hero-title em {
font-style: normal;
color: var(--about-purple);
}
.about-hero-desc {
max-width: 720px;
margin: 0 auto 32px;
font-size: 15px;
line-height: 2;
color: var(--color-text-light);
}
.about-hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}
.btn-about-primary,
.btn-about-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 28px;
font-size: 14px;
font-weight: 500;
border-radius: 8px;
transition: all var(--transition);
}
.btn-about-primary {
color: var(--color-bg);
background: var(--about-purple);
box-shadow: 0 4px 16px var(--color-rgba-138-92-245-35);
}
.btn-about-primary:hover {
background: var(--about-purple-dark);
transform: translateY(-1px);
}
.btn-about-outline {
color: var(--color-555);
background: var(--color-bg);
border: 1px solid var(--color-e0e0e8);
box-shadow: 0 2px 8px var(--color-rgba-0-0-0-4);
}
.btn-about-outline:hover {
border-color: var(--color-rgba-138-92-245-25);
color: var(--about-purple);
}
/* Hero ??????*/
.page-about .about-subnav {
position: static;
top: auto;
z-index: 1;
width: 100%;
margin: 0;
background: var(--color-7b57e8);
border-bottom: none;
}
.page-about .about-subnav-inner {
display: flex;
justify-content: stretch;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
.page-about .about-subnav a {
flex: 1;
display: block;
padding: 16px 20px;
font-size: 15px;
font-weight: 500;
color: var(--color-bg);
text-align: center;
border-right: 1px solid var(--color-rgba-255-255-255-15);
transition: background var(--transition);
}
.page-about .about-subnav a:last-child {
border-right: none;
}
.page-about .about-subnav a:hover {
color: var(--color-bg);
background: var(--color-rgba-255-255-255-10);
}
.page-about .about-subnav a.is-active {
color: var(--color-bg);
background: linear-gradient(90deg, var(--color-fe5c1c) 0%, var(--color-fe5c1c) 100%);
}
.page-about .about-subnav a.is-active:hover {
background: linear-gradient(90deg, var(--color-fe5c1c) 0%, var(--color-fe5c1c) 100%);
}
/* --- ???? --- */
.about-intro {
background: var(--color-bg);
}
.about-intro-box {
display: grid;
grid-template-columns: 1fr;
gap: 0;
background: linear-gradient(135deg, var(--color-f8f6ff) 0%, var(--color-f3f0ff) 100%);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 32px var(--color-rgba-108-63-197-8);
}
.about-intro-img {
position: relative;
padding: 20px 20px 0;
min-height: 220px;
}
.about-intro-img img {
width: 100%;
height: 100%;
min-height: 220px;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 8px 24px var(--color-rgba-108-63-197-12);
}
.about-intro-body {
position: relative;
padding: 32px 28px 36px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.about-intro-body h3 {
font-size: 24px;
font-weight: 700;
color: var(--color-1a1a2e);
margin-bottom: 18px;
line-height: 1.5;
}
.about-intro-slogan {
display: block;
margin-top: 6px;
font-style: normal;
font-size: 20px;
font-weight: 600;
color: var(--about-purple);
}
.about-intro-body p {
font-size: 14px;
line-height: 2;
color: var(--color-text-light);
text-align: justify;
}
.about-intro-body p+p {
margin-top: 10px;
}
.about-intro-year-wrap {
position: absolute;
left: 32px;
bottom: 28px;
text-align: center;
}
.about-intro-year {
display: block;
font-size: 56px;
font-weight: 800;
color: var(--about-purple);
line-height: 1;
letter-spacing: -1px;
}
.about-intro-year-label {
display: block;
margin-top: 4px;
font-size: 13px;
color: var(--color-text-muted);
}
/* --- ???? --- */
.about-stats {
background: var(--color-fafbff);
}
.stats-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.stat-card {
background: linear-gradient(180deg, var(--color-f4f6f8) 4.29%, var(--color-f9fafb) 48.16%, var(--color-fefefe) 100%);
border-radius: 12px;
padding: 32px 28px;
box-shadow: 0 2px 16px var(--color-rgba-0-0-0-5);
border: 1px solid var(--color-f0ecff);
transition: transform var(--transition), box-shadow var(--transition);
}
.stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 28px var(--color-rgba-108-63-197-10);
}
.stat-icon {
float: right;
}
.stat-icon-one {
background-position: -153px -11px;
width: 93px;
height: 99px;
display: block;
}
.stat-icon-two {
background-position: -13px -161px;
width: 96px;
height: 80px;
display: block;
}
.stat-icon-three {
background-position: -132px -152px;
width: 96px;
height: 96px;
display: block;
}
.stat-icon-four {
background-position: -272px -20px;
width: 96px;
height: 79px;
display: block;
}
.stat-icon-five {
background-position: -276px -131px;
width: 87px;
height: 96px;
display: block;
}
.stat-icon-six {
background-position: -12px -272px;
width: 96px;
height: 96px;
display: block;
}
.stat-num {
font-size: 36px;
font-weight: 800;
color: var(--about-purple);
margin-bottom: 6px;
margin-right: 6px;
line-height: 1.2;
}
.stat-num small {
font-size: 30px;
font-weight: 600;
}
.stat-title {
font-size: 20px;
font-weight: 600;
color: var(--color-1a1a2e);
margin-bottom: 6px;
}
.stat-desc {
font-size: 16px;
color: var(--color-text-muted);
line-height: 1.5;
}
/* --- ???? --- */
.about-culture {
background: var(--color-bg);
}
.culture-video-wrap {
margin-bottom: 36px;
}
.culture-video {
position: relative;
width: 100%;
height: 280px;
border-radius: 16px;
overflow: hidden;
background:
linear-gradient(135deg, var(--color-rgba-123-87-232-85) 0%, var(--color-rgba-108-63-197-75) 100%),
url("../images/placeholder.png") center / cover no-repeat;
}
.culture-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 119px;
height: 119px;
padding: 0;
border: none;
cursor: pointer;
transition: transform var(--transition);
}
.culture-play-one {
background-position: -11px -11px;
}
.culture-play-btn:hover {
transform: translate(-50%, -50%) scale(1.08);
}
.culture-content-dsz {
margin-bottom: 48px;
border-radius: 16px;
overflow: hidden;
}
.culture-content-dsz img {
display: block;
width: 100%;
height: auto;
}
.culture-nav-wrap {
margin-top: 80px;
--culture-circle: 200px;
--culture-overlap: 100px;
--culture-label-space: 36px;
overflow: visible;
}
.culture-nav {
display: flex;
align-items: flex-end;
justify-content: space-around;
flex-wrap: nowrap;
gap: 0;
overflow-x: auto;
overflow-y: visible;
scrollbar-width: none;
}
.culture-nav::-webkit-scrollbar {
display: none;
}
.culture-nav-item {
position: relative;
flex-shrink: 0;
width: var(--culture-circle);
height: var(--culture-circle);
margin-left: calc(var(--culture-overlap) * -1);
padding: 0;
border: none;
background: none;
cursor: pointer;
z-index: 1;
}
.culture-nav-item:nth-child(2) {
z-index: 2;
}
.culture-nav-item:nth-child(3) {
z-index: 3;
}
.culture-nav-item:nth-child(4) {
z-index: 4;
}
.culture-nav-item:nth-child(5) {
z-index: 5;
}
.culture-nav-item:nth-child(6) {
z-index: 6;
}
.culture-nav-item:nth-child(7) {
z-index: 7;
}
.culture-nav-item:first-child {
margin-left: 0;
}
.culture-nav-item.is-active,
.culture-nav-item:hover {
z-index: 20;
}
/* 鏈€鍚庝竴椤癸紙浼佷笟绮剧锛夋偓鍋?婵€娲绘椂鍚戝乏灞曞紑锛屽崰鏈€鍚庝袱涓湀 */
.culture-nav-item:last-child .culture-nav-pill {
left: auto;
right: 0;
flex-direction: row-reverse;
clip-path: inset(0 0 0 50% round 100px);
}
.culture-nav-pill {
position: absolute;
left: 0;
bottom: 0;
display: flex;
align-items: center;
width: calc(var(--culture-circle) * 2);
height: var(--culture-circle);
min-height: var(--culture-circle);
padding: 10px 24px;
background: var(--about-purple);
border-radius: 100px;
color: var(--color-bg);
box-shadow: 0 4px 20px var(--color-rgba-138-92-245-35);
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
/* 鏀惰捣锛氬彧闇插乏渚т竴鍦堬紱鎵撳紑鏃?clip 灞曞紑 */
clip-path: inset(0 50% 0 0 round 100px);
transition:
clip-path 0.42s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.28s ease,
visibility 0.28s ease;
box-sizing: border-box;
}
.left-l {
background-position: -110px -392px;
width: 74px;
height: 74px;
}
.right-r {
background-position: -12px -392px;
width: 74px;
height: 74px;
}
.culture-nav-item.is-active .culture-nav-pill {
opacity: 1;
visibility: visible;
pointer-events: auto;
clip-path: inset(0 0 0 0 round 100px);
}
@media (hover: hover) and (pointer: fine) {
.culture-nav-item.is-active .culture-nav-pill {
opacity: 0;
visibility: hidden;
pointer-events: none;
clip-path: inset(0 50% 0 0 round 100px);
}
.culture-nav-item.is-active:last-child .culture-nav-pill {
clip-path: inset(0 0 0 50% round 100px);
}
.culture-nav:not(:hover) .culture-nav-item.is-active .culture-nav-pill {
opacity: 1;
visibility: visible;
pointer-events: auto;
clip-path: inset(0 0 0 0 round 100px);
}
.culture-nav-item:hover .culture-nav-pill {
opacity: 1;
visibility: visible;
pointer-events: auto;
clip-path: inset(0 0 0 0 round 100px);
}
}
.culture-nav-head {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
flex: 0 0 50%;
width: 50%;
min-width: 0;
}
.culture-nav-pill .culture-nav-icon {
color: var(--color-bg);
}
.culture-nav-pill .culture-nav-label {
font-size: 14px;
font-weight: 600;
color: var(--color-bg);
line-height: 1.2;
}
.culture-nav-sep {
flex-shrink: 0;
width: 1px;
height: 48px;
margin: 0 16px;
background: var(--color-rgba-255-255-255-45);
opacity: 0;
transition: opacity 0.5s ease 0.08s;
}
.culture-nav-desc {
flex: 1;
min-width: 0;
font-size: 16px;
font-weight: 500;
color: var(--color-bg);
line-height: 1.5;
white-space: normal;
opacity: 0;
transform: translateX(-8px);
transition: opacity 0.5s ease 0.1s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
.culture-nav-item:last-child .culture-nav-desc {
transform: translateX(8px);
}
.culture-nav-item.is-active .culture-nav-sep,
.culture-nav-item.is-active .culture-nav-desc,
.culture-nav-item:hover .culture-nav-sep,
.culture-nav-item:hover .culture-nav-desc {
opacity: 1;
transform: translateX(0);
}
@media (hover: hover) and (pointer: fine) {
.culture-nav-item.is-active .culture-nav-sep,
.culture-nav-item.is-active .culture-nav-desc {
opacity: 0;
transform: translateX(-8px);
}
.culture-nav-item.is-active:last-child .culture-nav-desc {
transform: translateX(8px);
}
.culture-nav:not(:hover) .culture-nav-item.is-active .culture-nav-sep,
.culture-nav:not(:hover) .culture-nav-item.is-active .culture-nav-desc,
.culture-nav-item:hover .culture-nav-sep,
.culture-nav-item:hover .culture-nav-desc {
opacity: 1;
transform: translateX(0);
}
}
.culture-nav-compact {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: var(--culture-circle);
opacity: 1;
visibility: visible;
transition: opacity 0.28s ease, visibility 0.28s ease;
}
.culture-nav-item.is-active .culture-nav-compact {
opacity: 0;
visibility: hidden;
}
@media (hover: hover) and (pointer: fine) {
.culture-nav-item.is-active .culture-nav-compact {
opacity: 1;
visibility: visible;
}
.culture-nav:not(:hover) .culture-nav-item.is-active .culture-nav-compact {
opacity: 0;
visibility: hidden;
}
.culture-nav-item:hover .culture-nav-compact {
opacity: 0;
visibility: hidden;
}
}
.culture-nav-compact .culture-nav-icon {
width: var(--culture-circle);
height: var(--culture-circle);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-e4e4ec);
color: var(--about-purple);
box-shadow: 0 2px 8px var(--color-rgba-0-0-0-4);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.culture-nav-item:not(.is-active):hover .culture-nav-compact .culture-nav-icon {
border-color: var(--color-rgba-138-92-245-35);
box-shadow: 0 4px 16px var(--color-rgba-138-92-245-12);
}
.culture-nav-compact .culture-nav-label {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
width: max-content;
max-width: calc(var(--culture-circle) + 24px);
font-size: 16px;
font-weight: 500;
color: var(--color-text);
line-height: 1.3;
text-align: center;
white-space: nowrap;
}
.culture-nav-line {
height: 2px;
margin: 80px auto 0;
max-width: 960px;
background: linear-gradient(90deg, transparent, var(--color-rgba-138-92-245-18) 15%, var(--color-rgba-138-92-245-18) 85%, transparent);
}
.culture-nav-one-h {
width: 58px;
height: 49px;
background-position: -491px -336px;
display: block;
}
.culture-nav-one {
background-position: -391px -316px;
width: 58px;
height: 49px;
}
.culture-nav-two-h {
background-position: -12px -490px;
width: 56px;
height: 55px;
display: block;
}
.culture-nav-two {
background-position: -293px -392px;
width: 56px;
height: 55px;
}
.culture-nav-three-h {
background-position: -94px -492px;
width: 50px;
height: 53px;
display: block;
}
.culture-nav-three {
background-position: -375px -394px;
width: 50px;
height: 53px;
}
.culture-nav-four-h {
background-position: -170px -488px;
width: 60px;
height: 58px;
display: block;
}
.culture-nav-four {
background-position: -490px -10px;
width: 60px;
height: 58px;
}
.culture-nav-five-h {
background-position: -255px -493px;
width: 51px;
height: 53px;
display: block;
}
.culture-nav-five {
background-position: -495px -95px;
width: 51px;
height: 53px;
}
.culture-nav-six-h {
background-position: -337px -492px;
width: 47px;
height: 52px;
display: block;
}
.culture-nav-six {
background-position: -497px -174px;
width: 47px;
height: 52px;
}
.culture-nav-seven-h {
background-position: -412px -493px;
width: 58px;
height: 54px;
display: block;
}
.culture-nav-seven {
background-position: -492px -255px;
width: 58px;
height: 54px;
}
/* --- ???? --- */
.about-awards {
background: var(--color-bg);
padding-bottom: 48px;
}
.awards-tabs-wrap {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.awards-tabs {
display: inline-flex;
align-items: center;
gap: 0;
padding: 4px;
background: linear-gradient(360deg, var(--color-ececec) 0%, var(--color-rgba-250-250-250-0) 100%);
border-radius: 32px;
}
.awards-tab {
padding: 15px 32px;
font-size: 16px;
font-weight: 500;
color: var(--color-888);
background: transparent;
border: none;
border-radius: 28px;
cursor: pointer;
transition: all var(--transition);
white-space: nowrap;
}
.awards-tab:hover {
color: var(--about-purple);
}
.awards-tab.is-active {
color: var(--about-purple);
background: var(--color-bg);
box-shadow: 0 2px 10px var(--color-rgba-0-0-0-8);
}
.awards-board {
position: relative;
border-radius: 16px;
overflow: hidden;
}
.awards-board::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 55%;
height: 65%;
background: linear-gradient(135deg, transparent 30%, var(--color-rgba-255-255-255-45) 100%);
pointer-events: none;
z-index: 0;
}
.awards-panel {
display: none;
position: relative;
z-index: 1;
}
.awards-panel.is-active {
display: block;
}
.awards-layout {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
align-items: center;
}
.awards-content h2 {
font-size: clamp(24px, 4vw, 34px);
font-weight: 700;
color: var(--color-1e3a5f);
margin-bottom: 12px;
line-height: 1.3;
}
.awards-desc {
font-size: 14px;
color: var(--color-5a8ab8);
margin-bottom: 28px;
line-height: 1.75;
}
.awards-stats--laurel {
display: flex;
gap: 20px;
flex-wrap: wrap;
align-items: flex-end;
}
.awards-stat-item {
display: flex;
align-items: center;
gap: 6px;
}
.awards-laurel {
font-size: 42px;
font-weight: 300;
line-height: 1;
color: var(--color-d4a853);
font-family: Georgia, "Times New Roman", serif;
transform: scaleY(1.15);
}
.awards-stat-body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-width: 88px;
}
.awards-stat-num {
font-size: 36px;
font-weight: 800;
color: var(--color-4a7fd4);
line-height: 1.1;
}
.awards-stat-num sup {
font-size: 18px;
font-weight: 700;
top: -0.4em;
}
.awards-stat-label {
margin-top: 4px;
font-size: 13px;
font-weight: 500;
color: var(--color-orange-dark);
white-space: nowrap;
}
.awards-visual {
position: relative;
height: 260px;
min-height: 220px;
}
.awards-pedestal {
position: absolute;
bottom: 0;
border-radius: 50% / 18px;
background: linear-gradient(180deg, var(--color-c8dff0) 0%, var(--color-a8cce8) 100%);
box-shadow: 0 6px 20px var(--color-rgba-100-150-200-20);
}
.awards-pedestal--back {
left: 22%;
width: 72px;
height: 56px;
opacity: 0.7;
}
.awards-pedestal--mid {
left: 42%;
width: 88px;
height: 72px;
opacity: 0.85;
}
.awards-pedestal--front {
left: 58%;
width: 100px;
height: 48px;
background: linear-gradient(180deg, var(--color-rgba-200-223-240-60) 0%, var(--color-rgba-168-204-232-50) 100%);
backdrop-filter: blur(4px);
}
.awards-cert {
position: absolute;
width: 88px;
height: 112px;
border-radius: 6px;
background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-f5f9fc) 100%);
border: 2px solid var(--color-d0e4f4);
box-shadow: 0 8px 24px var(--color-rgba-100-150-200-15);
}
.awards-cert::before {
content: "";
display: block;
width: 55%;
height: 4px;
margin: 16px auto 6px;
background: linear-gradient(90deg, var(--color-ffb84d), var(--color-ff9500));
border-radius: 2px;
}
.awards-cert::after {
content: "";
display: block;
width: 65%;
height: 3px;
margin: 5px auto;
background: var(--color-e8eef4);
border-radius: 2px;
}
.awards-cert--1 {
bottom: 58px;
left: 20%;
transform: rotate(-6deg);
z-index: 2;
}
.awards-cert--2 {
bottom: 70px;
left: 40%;
transform: translateX(-50%);
z-index: 4;
width: 100px;
height: 128px;
}
.awards-cert--3 {
bottom: 58px;
right: 18%;
transform: rotate(6deg);
z-index: 3;
}
.awards-trophy {
position: absolute;
bottom: 44px;
left: 62%;
width: 36px;
height: 44px;
background: linear-gradient(180deg, var(--color-ffd54f) 0%, var(--color-orange) 100%);
border-radius: 4px 4px 8px 8px;
z-index: 5;
box-shadow: 0 4px 12px var(--color-rgba-245-166-35-40);
}
.awards-trophy::before {
content: "";
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 14px;
border: 3px solid var(--color-orange);
border-bottom: none;
border-radius: 14px 14px 0 0;
}
.awards-medal {
position: absolute;
bottom: 48px;
width: 22px;
height: 22px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, var(--color-ffe082), var(--color-orange));
border: 2px solid var(--color-orange-dark);
z-index: 5;
}
.awards-medal--1 {
left: 58%;
}
.awards-medal--2 {
left: 70%;
}
.awards-visual--honor,
.awards-visual--knowledge {
background: linear-gradient(135deg, var(--color-rgba-74-127-212-8) 0%, var(--color-rgba-74-127-212-2) 100%);
border-radius: 12px;
min-height: 200px;
}
/* --- ???? --- */
.about-scenes {
background: var(--color-bg);
padding-top: 48px;
}
.scenes-header .section-tag {
display: none;
}
.scenes-header h2 {
font-size: clamp(26px, 4vw, 32px);
font-weight: 700;
color: var(--color-text);
}
.scenes-header .section-desc {
color: var(--color-text-muted);
font-size: 14px;
}
.scenes-carousel {
position: relative;
padding: 0 60px;
}
.scenes-carousel-viewport {
overflow: hidden;
}
.scenes-carousel-track {
position: relative;
}
.scenes-slide {
display: none;
}
.scenes-slide.is-active {
display: block;
animation: scenes-fade-in 0.35s ease;
}
@keyframes scenes-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.scenes-nav {
position: absolute;
top: 50%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
border: none;
border-radius: 50%;
background: var(--color-rgba-255-255-255-96);
box-shadow: 0 2px 14px var(--color-rgba-0-0-0-12);
transform: translateY(-50%);
cursor: pointer;
transition: box-shadow var(--transition), transform var(--transition);
}
.scenes-nav:hover {
box-shadow: 0 4px 18px var(--color-rgba-0-0-0-16);
transform: translateY(-50%) scale(1.04);
}
.scenes-nav--prev {
left: 0;
}
.scenes-nav--next {
right: 0;
}
.scenes-nav-icon {
position: relative;
width: 10px;
height: 10px;
}
.scenes-nav-icon--prev {
margin-left: 3px;
border-top: 2px solid var(--color-purple);
border-left: 2px solid var(--color-purple);
transform: rotate(-45deg);
}
.scenes-nav-icon--next {
margin-right: 3px;
border-top: 2px solid var(--color-purple);
border-right: 2px solid var(--color-purple);
transform: rotate(45deg);
}
.scenes-grid {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.scenes-grid--gallery .scene-card--main {
min-height: 280px;
}
.scene-card {
margin: 0;
border-radius: 4px;
overflow: hidden;
background: var(--color-f0f0f0);
}
.scene-card img {
width: 100%;
height: 100%;
min-height: 140px;
object-fit: cover;
transition: transform var(--transition);
}
.scene-card:hover img {
transform: scale(1.02);
}
/* --- ???? --- */
.about-history {
background: var(--color-bg);
overflow: hidden;
}
.about-history>.container {
margin-bottom: 0;
}
.history-wrap {
width: 100%;
border-radius: 0;
overflow: hidden;
box-shadow: none;
}
.history-stage {
--history-purple: var(--color-8c66db);
--history-purple-deep: var(--color-4d1598);
--history-orange: var(--color-fe5c1c);
position: relative;
background: linear-gradient(180deg, var(--color-9a72ef) 0%, var(--color-8c66db) 55%, var(--color-7b52d0) 100%);
padding: 0;
overflow: hidden;
outline: none;
}
.history-stage-bg {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 600px;
z-index: 0;
pointer-events: none;
background: url("../images/liccheng--bg.webp") center bottom / 100% 100% no-repeat;
opacity: 0.45;
}
.history-columns {
position: relative;
z-index: 1;
display: flex;
align-items: stretch;
min-height: 340px;
}
.history-stage-panel {
flex: 1;
display: flex;
align-items: stretch;
min-width: 0;
opacity: 1;
transform: translateX(0);
transition: opacity 0.18s ease, transform 0.28s ease;
}
.history-stage-panel.is-fading {
opacity: 0;
transform: translateX(-8px);
}
.history-col {
flex: 1 1 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 32px 14px 56px;
color: var(--color-rgba-255-255-255-88);
border: none;
border-right: 1px solid var(--color-rgba-255-255-255-28);
background: transparent;
text-align: center;
justify-content: center;
cursor: pointer;
font: inherit;
transition: background 0.35s ease, color 0.35s ease;
animation: historyColIn 0.4s ease both;
animation-delay: calc(var(--col-i, 0) * 35ms);
}
.history-col:hover:not(.is-active) {
background: var(--color-rgba-255-255-255-6);
}
.history-col:focus-visible {
outline: 2px solid var(--color-rgba-255-255-255-70);
outline-offset: -4px;
z-index: 1;
}
@keyframes historyColIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.history-col:last-child {
border-right: none;
}
.history-col--label {
flex: 0 0 128px;
justify-content: center;
padding: 32px 18px 56px;
border-right: 1px solid var(--color-rgba-255-255-255-28);
cursor: default;
animation: none;
}
.history-label-en {
display: block;
font-size: 14px;
letter-spacing: 1.8px;
color: var(--color-rgba-255-255-255-65);
margin-bottom: 20px;
}
.history-label-zh {
display: block;
font-size: 24px;
font-weight: 700;
color: var(--color-bg);
line-height: 1.25;
}
.history-col-year {
font-size: 18px;
font-weight: 600;
margin-bottom: 14px;
white-space: nowrap;
letter-spacing: 0.5px;
}
.history-col-dash {
width: 36px;
height: 2px;
background: var(--color-rgba-255-255-255-70);
border-radius: 1px;
flex-shrink: 0;
}
.history-col.is-active .history-col-dash {
margin-bottom: 22px;
}
.history-col:not(.is-active) .history-col-dash {
margin-top: 0;
}
.history-col-topbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--history-orange);
transform-origin: center;
transform: scaleX(0);
}
.history-col.is-active .history-col-topbar {
animation: historyTopbarIn 0.4s ease forwards;
}
@keyframes historyTopbarIn {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.history-col.is-active {
background: var(--history-purple-deep);
color: var(--color-bg);
box-shadow: inset 0 0 0 1px var(--color-rgba-255-255-255-4);
padding-bottom: 72px;
overflow: hidden;
}
.history-col.has-photo {
background: var(--color-2a0f5c);
}
.history-col-photo {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.history-col-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.04);
transition: transform 0.6s ease, opacity 0.45s ease;
opacity: 0;
}
.history-col.is-entered .history-col-photo img,
.history-col.is-active:not(.is-entering) .history-col-photo img {
opacity: 1;
transform: scale(1);
}
.history-col-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
var(--color-rgba-45-12-96-72) 0%,
var(--color-rgba-77-21-152-55) 42%,
var(--color-rgba-45-12-96-78) 100%);
}
.history-col.is-active>.history-col-topbar,
.history-col.is-active>.history-col-year,
.history-col.is-active>.history-col-dash,
.history-col.is-active>.history-col-card {
position: relative;
z-index: 1;
}
.history-col.is-entering .history-col-card {
opacity: 0;
transform: translateY(14px);
}
.history-col.is-entering.is-entered .history-col-card {
opacity: 1;
transform: translateY(0);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.history-col-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 20px;
flex: 1;
width: 100%;
padding: 0 6px;
position: relative;
}
.history-col-card p {
font-size: 14px;
line-height: 1.7;
color: var(--color-rgba-255-255-255-95);
max-width: 11em;
}
.history-col-logo-wrap {
margin-top: auto;
width: min(140px, 88%);
position: relative;
animation: historyLogoIn 0.45s 0.12s ease both;
}
.history-col-logo {
position: relative;
z-index: 1;
box-shadow: 0 8px 20px var(--color-rgba-0-0-0-18);
-webkit-box-reflect: below 1px linear-gradient(to bottom, var(--color-rgba-0-0-0-40), transparent 70%);
}
.history-col-logo img,
.history-col-reflect img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
@keyframes historyLogoIn {
from {
opacity: 0;
transform: translateY(8px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Firefox fallback for logo reflection */
.history-col-reflect {
display: none;
}
@supports not (-webkit-box-reflect: below 0) {
.history-col-logo {
-webkit-box-reflect: unset;
}
.history-col-logo-wrap {
padding-bottom: 36px;
}
.history-col-reflect {
display: block;
position: absolute;
left: 0;
right: 0;
top: 100%;
margin-top: 1px;
pointer-events: none;
transform: scaleY(-1);
opacity: 0.4;
mask-image: linear-gradient(to bottom, var(--color-rgba-0-0-0-45), transparent 70%);
-webkit-mask-image: linear-gradient(to bottom, var(--color-rgba-0-0-0-45), transparent 70%);
}
}
.history-axis-wrap {
background: var(--color-fafafa);
padding: 22px clamp(20px, 4vw, 64px) 30px;
}
.history-axis-head {
position: relative;
height: 42px;
margin-bottom: 2px;
}
.history-axis-active-label {
position: absolute;
top: 0;
left: var(--axis-label-left, 50%);
transform: translateX(-50%);
font-size: 26px;
font-weight: 700;
color: var(--about-purple);
white-space: nowrap;
transition: left 0.4s cubic-bezier(0.22, 1, 0.36, 1);
will-change: left;
line-height: 1.1;
}
.history-axis-active-label.is-bump {
animation: historyLabelBump 0.38s ease;
}
@keyframes historyLabelBump {
0% {
transform: translateX(-50%) translateY(0);
}
40% {
transform: translateX(-50%) translateY(-2px);
}
100% {
transform: translateX(-50%) translateY(0);
}
}
.history-axis-active-label::after {
content: "";
display: block;
width: 0;
height: 0;
margin: 5px auto 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 7px solid var(--about-purple);
}
.history-axis-controls {
display: flex;
align-items: center;
gap: 18px;
}
.history-axis-btn {
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--color-bg);
border: 1px solid var(--color-eee);
box-shadow: 0 4px 14px var(--color-rgba-0-0-0-6);
color: var(--color-c0c0c8);
transition: all var(--transition);
}
.history-axis-arrow {
display: block;
width: 10px;
height: 10px;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
margin-left: 3px;
}
.history-axis-arrow--next {
transform: rotate(-135deg);
margin-left: 0;
margin-right: 3px;
}
.history-axis-btn:hover:not(:disabled) {
color: var(--about-purple);
border-color: var(--color-rgba-138-92-245-25);
box-shadow: 0 6px 18px var(--color-rgba-108-63-197-12);
}
.history-axis-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.history-axis-track-wrap {
flex: 1;
overflow: hidden;
}
.history-axis-track {
display: flex;
align-items: flex-start;
justify-content: space-between;
position: relative;
padding: 16px 0 0;
}
.history-axis-track::before {
content: "";
position: absolute;
top: 20px;
left: 2%;
right: 2%;
height: 10px;
background: repeating-linear-gradient(90deg,
var(--color-d4d4dc) 0,
var(--color-d4d4dc) 1px,
transparent 1px,
transparent 5px);
pointer-events: none;
}
.history-year-btn {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 0 2px;
background: none;
border: none;
cursor: pointer;
}
.history-year-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--color-c8c8d0);
background: var(--color-bg);
transition: all 0.3s ease;
box-sizing: border-box;
}
.history-year-text {
font-size: 13px;
color: var(--color-a8a0b8);
transition: color 0.3s ease, font-weight 0.3s ease;
}
.history-year-btn.is-active .history-year-dot {
border-color: var(--about-purple);
border-width: 3px;
background: var(--color-bg);
box-shadow: 0 0 0 3px var(--color-rgba-138-92-245-12);
}
.history-year-btn.is-active .history-year-text {
color: var(--about-purple);
font-weight: 700;
}
.history-year-btn:hover .history-year-text {
color: var(--about-purple);
}
.history-year-btn:hover .history-year-dot {
border-color: var(--about-purple);
}
@media (prefers-reduced-motion: reduce) {
.history-col,
.history-col-logo,
.history-col-reflect,
.history-col-topbar,
.history-axis-active-label.is-bump {
animation: none !important;
}
.history-stage-panel,
.history-axis-active-label,
.culture-nav-pill,
.culture-nav-sep,
.culture-nav-desc,
.culture-nav-compact {
transition: none !important;
}
.culture-nav-desc {
transform: none !important;
}
}
/* --- ???? --- */
.about-partners {
background: var(--color-bg);
padding-bottom: 80px;
}
.partners-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.partner-logo {
display: flex;
align-items: center;
justify-content: center;
height: 80px;
padding: 16px 24px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 8px;
transition: box-shadow var(--transition), border-color var(--transition);
}
.partner-logo:hover {
border-color: var(--color-rgba-138-92-245-30);
box-shadow: 0 4px 16px var(--color-rgba-0-0-0-6);
}
.partner-logo img {
max-width: 100%;
max-height: 48px;
object-fit: contain;
filter: grayscale(30%);
transition: filter var(--transition);
}
.partner-logo:hover img {
filter: grayscale(0%);
}
/* ????header ?? */
.page-about .nav-item--about>a {
color: var(--color-purple-light);
}
.page-about .nav-item--about>a::after {
content: "";
position: absolute;
bottom: 0;
left: 18px;
right: 18px;
height: 3px;
background: var(--color-purple-light);
border-radius: 2px 2px 0 0;
}
.page-about .nav-item.is-active>a::after {
display: none;
}
/* --- ????--- */
@media (min-width: 576px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.partners-grid {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.scenes-grid--gallery {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1fr;
gap: 8px;
min-height: 360px;
}
.scenes-grid--gallery .scene-card--main {
grid-column: 1 / span 2;
grid-row: 1 / -1;
min-height: auto;
}
.scenes-grid--gallery .scene-card--sub:nth-child(2) {
grid-column: 3;
grid-row: 1;
}
.scenes-grid--gallery .scene-card--sub:nth-child(3) {
grid-column: 4;
grid-row: 1;
}
.scenes-grid--gallery .scene-card--wide {
grid-column: 3 / -1;
grid-row: 2;
}
}
@media (min-width: 768px) {
.about-intro-box {
grid-template-columns: 1fr 1fr;
}
.about-intro-img {
padding: 24px;
min-height: 360px;
}
.about-intro-img img {
min-height: 312px;
border-radius: 14px;
}
.about-intro-body {
padding: 40px 120px 60px 20px;
}
.about-intro-slogan {
display: inline;
margin-top: 0;
margin-left: 8px;
font-size: 20px;
}
.about-intro-year {
font-size: 64px;
}
.about-intro-year-wrap {
left: 36px;
bottom: 32px;
text-align: left;
}
.culture-video {
height: 600px;
}
.awards-layout {
grid-template-columns: 1.1fr 1fr;
gap: 40px;
}
.awards-visual {
height: 300px;
}
.awards-stats--laurel {
gap: 28px;
}
.scenes-grid--gallery {
min-height: 400px;
}
.history-col--label {
flex-basis: 140px;
}
.history-col-year {
font-size: 30px;
}
.history-col-card p {
font-size: 18px;
}
}
@media (min-width: 1024px) {
.stats-grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.history-columns {
min-height: 600px;
}
.history-col--label {
flex-basis: 500px;
}
.history-label-zh {
font-size: 36px;
}
.partners-grid {
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
}
@media (max-width: 767px) {
.about-intro-body {
padding: 28px 24px 80px;
}
.about-intro-year-wrap {
left: 24px;
bottom: 20px;
}
.about-intro-year {
font-size: 44px;
}
.page-about .about-subnav a {
padding: 14px 12px;
font-size: 14px;
}
.culture-nav {
justify-content: flex-start;
padding-bottom: 28px;
}
.culture-nav-wrap {
--culture-circle: 64px;
--culture-overlap: 32px;
--culture-label-space: 28px;
}
.culture-nav-item {
width: var(--culture-circle);
height: var(--culture-circle);
margin-left: calc(var(--culture-overlap) * -1);
}
.culture-nav-pill {
width: calc(var(--culture-circle) * 2);
height: var(--culture-circle);
min-height: var(--culture-circle);
padding: 8px 12px;
}
.culture-nav-pill .culture-nav-label {
font-size: 11px;
}
.culture-nav-sep {
margin: 0 8px;
height: 32px;
}
.culture-nav-desc {
font-size: 11px;
line-height: 1.35;
}
.culture-nav-compact .culture-nav-icon {
width: var(--culture-circle);
height: var(--culture-circle);
}
.culture-nav-compact {
width: var(--culture-circle);
}
.culture-nav-compact .culture-nav-label {
top: calc(100% + 6px);
font-size: 12px;
max-width: calc(var(--culture-circle) + 16px);
}
.awards-stats--laurel {
gap: 16px;
}
.awards-stat-num {
font-size: 28px;
}
.awards-laurel {
font-size: 32px;
}
.scenes-carousel {
padding: 0 36px;
}
.scenes-nav {
width: 36px;
height: 36px;
}
.scenes-nav-icon {
width: 8px;
height: 8px;
}
.history-columns {
min-height: 260px;
}
.history-col--label {
flex: 0 0 84px;
padding: 24px 8px 40px;
}
.history-label-en {
font-size: 9px;
}
.history-label-zh {
font-size: 16px;
}
.history-stage-panel .history-col:not(.is-active) {
display: none;
}
.history-stage-panel .history-col.is-active {
flex: 1;
}
.history-col-year {
font-size: 16px;
}
.history-col-card p {
font-size: 13px;
}
.history-axis-wrap {
padding: 18px 12px 24px;
}
.history-axis-active-label {
font-size: 18px;
}
.history-axis-btn {
width: 36px;
height: 36px;
}
.history-year-text {
font-size: 11px;
}
}
/* ===== contact.css ===== */
/* ========================================
Contact Page ??????
======================================== */
.page-contact {
--contact-purple: var(--color-8a5cf5);
--contact-purple-dark: var(--color-7348e0);
--contact-purple-light: var(--color-f3efff);
}
/* --- Hero --- */
.contact-hero {
display: flex;
flex-direction: column;
padding: 0;
text-align: center;
background: var(--color-bg);
}
.contact-hero-body {
padding: 48px 0 56px;
background: linear-gradient(180deg, var(--color-f3efff) 0%, var(--color-faf8ff) 55%, var(--color-bg) 100%);
}
.contact-hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 18px;
margin-bottom: 22px;
font-size: 13px;
color: var(--contact-purple);
background: var(--color-rgba-255-255-255-85);
border: 1px solid var(--color-rgba-138-92-245-12);
border-radius: 24px;
box-shadow: 0 2px 12px var(--color-rgba-138-92-245-8);
}
.contact-hero-tag-dot {
flex-shrink: 0;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--contact-purple);
}
.contact-hero-title {
font-size: clamp(36px, 6vw, 52px);
font-weight: 700;
color: var(--color-1a1a2e);
margin-bottom: 18px;
line-height: 1.25;
letter-spacing: 2px;
}
.contact-hero-title em {
font-style: normal;
color: var(--contact-purple);
}
.contact-hero-desc {
max-width: 640px;
margin: 0 auto 32px;
font-size: 15px;
line-height: 2;
color: var(--color-text-light);
}
.contact-hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}
.contact-hero-one {
background-position: -252px -659px;
width: 23px;
height: 13px;
}
.contact-hero-two {
background-position: -725px -668px;
width: 18px;
height: 11px;
}
.btn-contact-primary,
.btn-contact-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 28px;
font-size: 14px;
font-weight: 500;
border-radius: 8px;
transition: all var(--transition);
}
.btn-contact-primary {
color: var(--color-bg);
background: var(--contact-purple);
box-shadow: 0 4px 16px var(--color-rgba-138-92-245-35);
}
.btn-contact-primary:hover {
background: var(--contact-purple-dark);
transform: translateY(-1px);
}
.btn-contact-outline {
color: var(--color-555);
background: var(--color-bg);
border: 1px solid var(--color-e0e0e8);
box-shadow: 0 2px 8px var(--color-rgba-0-0-0-4);
}
.btn-contact-outline:hover {
border-color: var(--color-rgba-138-92-245-25);
color: var(--contact-purple);
}
/* Hero ????????????????????????*/
.page-contact .about-subnav.contact-subnav {
position: static;
top: auto;
z-index: 1;
width: 100%;
margin: 0;
background: var(--color-7b57e8);
border-bottom: none;
}
.page-contact .about-subnav.contact-subnav .about-subnav-inner {
display: flex;
justify-content: stretch;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
.page-contact .about-subnav.contact-subnav a {
flex: 1;
display: block;
padding: 16px 20px;
font-size: 15px;
font-weight: 500;
color: var(--color-bg);
text-align: center;
border-right: 1px solid var(--color-rgba-255-255-255-15);
transition: background var(--transition);
}
.page-contact .about-subnav.contact-subnav a:last-child {
border-right: none;
}
.page-contact .about-subnav.contact-subnav a:hover {
color: var(--color-bg);
background: var(--color-rgba-255-255-255-10);
}
.channel-con-one {
background-position: -130px -270px;
}
.channel-con-two {
background-position: -231px -270px;
}
.channel-con-three {
background-position: -390px -110px;
}
.channel-con-four {
background-position: -390px -110px;
}
.page-contact .about-subnav.contact-subnav a.is-active {
color: var(--color-bg);
background: var(--color-fe5c1c);
}
.page-contact .about-subnav.contact-subnav a.is-active:hover {
background: var(--color-fe5c1c);
}
/* --- Section Header --- */
.page-contact .section-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 48px;
}
.page-contact .section-header .section-tag {
display: inline-block;
padding: 6px 18px;
margin-bottom: 16px;
font-size: 13px;
font-weight: 500;
line-height: 1.4;
color: var(--contact-purple);
background: var(--color-rgba-138-92-245-10);
border-radius: 20px;
}
.page-contact .section-header h2 {
display: block;
width: 100%;
max-width: 720px;
margin: 0 0 12px;
font-size: clamp(24px, 4vw, 32px);
font-weight: 700;
line-height: 1.35;
color: var(--color-1a1a2e);
letter-spacing: 0.02em;
}
.page-contact .section-header h2::after {
display: none;
content: none;
}
.page-contact .section-header p {
max-width: 560px;
margin: 0;
font-size: 14px;
line-height: 1.75;
color: var(--color-text-muted);
}
/* --- Contact Channels --- */
.contact-channels {
padding: 56px 0;
background: var(--color-bg);
}
.channels-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.channel-card {
padding: 32px 24px 28px;
background: var(--color-bg);
border: 1px solid var(--color-f0ecff);
border-radius: 16px;
text-align: center;
box-shadow: 0 4px 24px var(--color-rgba-138-92-245-7);
transition: transform var(--transition), box-shadow var(--transition);
}
.channel-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 36px var(--color-rgba-138-92-245-12);
}
.channel-icon {
width: 80px;
height: 80px;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
color: var(--color-bg);
box-shadow: 0 4px 14px var(--color-rgba-138-92-245-30);
}
.channel-card h3 {
font-size: 16px;
font-weight: 700;
color: var(--color-1a1a2e);
margin-bottom: 6px;
}
.channel-note {
font-size: 12px;
color: var(--color-text-muted);
margin-bottom: 14px;
line-height: 1.5;
}
.channel-details {
display: flex;
flex-direction: column;
gap: 4px;
}
.channel-details p {
font-size: 14px;
font-weight: 500;
color: var(--contact-purple);
line-height: 1.7;
}
.channel-details a {
color: var(--contact-purple);
}
.channel-details a:hover {
text-decoration: underline;
}
/* --- Location --- */
.contact-location {
padding: 56px 0;
background: var(--color-f8f9fb);
}
.location-panel {
display: flex;
flex-direction: column;
gap: 16px;
}
.location-info {
display: flex;
flex-direction: column;
padding: 32px 28px;
background: var(--color-bg);
border: 1px solid var(--color-eef0f4);
border-radius: 16px;
box-shadow: 0 4px 24px var(--color-rgba-0-0-0-5);
}
/* ??????*/
.location-address {
display: flex;
gap: 16px;
align-items: flex-start;
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid var(--color-f0f2f5);
}
.location-address-icon {
flex-shrink: 0;
width: 65px;
height: 65px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
color: var(--color-bg);
box-shadow: 0 6px 18px var(--color-rgba-123-87-232-28);
}
.location-add-one {
background-position: -206px -390px;
}
.location-address-body {
flex: 1;
min-width: 0;
padding-top: 4px;
}
.location-address-title {
margin: 0 0 8px;
font-size: 24px;
font-weight: 700;
color: var(--color-374151);
line-height: 1.4;
}
.location-address-text {
margin: 0;
font-size: 20px;
font-weight: 600;
color: var(--color-6b7280);
line-height: 1.65;
}
/* ???? / ?????*/
.location-meta {
display: flex;
flex-direction: column;
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.location-meta-item {
display: flex;
gap: 12px;
padding: 16px;
align-items: flex-start;
background-color: var(--color-faf9ff);
}
.location-meta-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
color: var(--color-9a9aad);
}
.location-meta-two {
background-position: -113px -568px;
}
.location-meta-three {
background-position: -333px -313px;
}
.location-meta-four {
background-position: -685px -610px;
width: 20px;
height: 20px;
}
.location-meta-body {
flex: 1;
min-width: 0;
padding-top: 2px;
}
.location-meta-label {
display: block;
margin-bottom: 4px;
font-size: 15px;
font-weight: 500;
color: var(--color-374151);
line-height: 1.4;
}
.location-meta-body p {
margin: 0;
font-size: 14px;
font-weight: 500;
color: var(--color-9ca3af);
line-height: 1.65;
}
.location-map-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 28px;
font-size: 16px;
font-weight: 500;
color: var(--color-purple);
}
.location-map-link:hover {
text-decoration: underline;
}
.location-map {
position: relative;
min-height: 450px;
background: var(--color-e8ecf0);
border: 1px solid var(--color-eef0f4);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 24px var(--color-rgba-0-0-0-5);
}
#company-map {
width: 100%;
height: 100%;
min-height: 450px;
}
.location-map-fallback {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 450px;
padding: 32px 24px;
text-align: center;
color: var(--color-text-muted);
background: linear-gradient(180deg, var(--color-eef1f5) 0%, var(--color-e8ecf0) 100%);
}
.location-map-fallback p {
margin: 0;
font-size: 14px;
line-height: 1.6;
}
.location-map-fallback a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
color: var(--color-bg);
background: var(--contact-purple);
border-radius: 8px;
transition: background var(--transition);
}
.location-map-fallback a:hover {
background: var(--contact-purple-dark);
}
.amap-info-window {
min-width: 220px;
padding: 4px 2px;
line-height: 1.5;
}
.amap-info-window strong {
display: block;
margin-bottom: 6px;
font-size: 15px;
color: var(--color-1a1a2e);
}
.amap-info-window p {
margin: 0;
font-size: 13px;
color: var(--color-text-light);
}
/* --- Join Us --- */
.contact-join {
padding: 56px 0;
background: var(--color-fafafa);
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-bottom: 36px;
}
.benefit-card:hover {
transform: translateY(-5px);
}
.benefit-visual {
width: 72px;
height: 72px;
margin: 0 auto 14px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.benefit-visual--career {
background: linear-gradient(135deg, var(--color-ede9fe) 0%, var(--color-ddd6fe) 100%);
}
.benefit-visual--flex {
background: linear-gradient(135deg, var(--color-e0f2fe) 0%, var(--color-bae6fd) 100%);
}
.benefit-visual--team {
background: linear-gradient(135deg, var(--color-fce7f3) 0%, var(--color-fbcfe8) 100%);
}
.benefit-visual--holiday {
background: linear-gradient(135deg, var(--color-fef3c7) 0%, var(--color-fde68a) 100%);
}
.benefit-visual--security {
background: linear-gradient(135deg, var(--color-d1fae5) 0%, var(--color-a7f3d0) 100%);
}
.benefit-visual::after {
content: "";
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--color-rgba-255-255-255-65);
}
.benefit-card h3 {
font-size: 20px;
font-weight: 700;
color: var(--color-1a1a2e);
margin-bottom: 6px;
}
.benefit-card p {
font-size: 12px;
color: var(--color-text-muted);
line-height: 1.55;
}
.jobs-panel {
border: none;
padding: 24px 20px;
}
.jobs-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
padding: 0 4px;
}
.jobs-panel-head h3 {
font-size: 18px;
font-weight: 700;
color: var(--color-1a1a2e);
}
.jobs-count {
font-size: 13px;
color: var(--color-9ca3af);
white-space: nowrap;
}
.job-meta-one {
background-position: -686px -490px;
width: 18px;
height: 20px;
}
.job-meta-two {
background-position: -687px -531px;
width: 16px;
height: 18px;
}
.job-meta-three {
background-position: -686px -570px;
width: 18px;
height: 19px;
}
.jobs-list {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.job-row {
display: flex;
flex-direction: column;
gap: 14px;
padding: 20px 24px;
background: var(--color-bg);
border-radius: 12px;
border: none;
box-shadow: 0 2px 12px var(--color-rgba-0-0-0-4);
transition: box-shadow var(--transition);
}
.job-row:hover {
box-shadow: 0 4px 20px var(--color-rgba-0-0-0-7);
}
.job-content {
flex: 1;
min-width: 0;
}
.job-title-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 25px;
}
.job-title-row h4 {
font-size: 16px;
font-weight: 700;
color: var(--color-1a1a2e);
line-height: 1.4;
}
.job-tag {
display: inline-block;
padding: 2px 10px;
font-size: 12px;
font-weight: 500;
color: var(--contact-purple);
background: var(--color-rgba-138-92-245-10);
border-radius: 4px;
line-height: 1.6;
}
.job-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
font-size: 13px;
color: var(--color-8a8a9a);
}
.job-meta-item {
display: inline-flex;
align-items: center;
gap: 5px;
line-height: 1.4;
}
.job-meta-item .icon-placeholder {
flex-shrink: 0;
color: var(--color-b0b0bc);
}
.job-apply {
align-self: flex-start;
padding: 7px 24px;
font-size: 13px;
font-weight: 500;
color: var(--contact-purple);
background: transparent;
border: 1px solid var(--contact-purple);
border-radius: 8px;
transition: all var(--transition);
white-space: nowrap;
}
.job-apply:hover {
color: var(--color-bg);
background: var(--contact-purple);
}
/* --- Contact Form --- */
.contact-form-section {
padding: 56px 0 72px;
background: var(--color-f8f9fb);
}
.form-layout {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-aside {
padding: 28px 24px;
background: var(--color-bg);
border-radius: 16px;
border: 1px solid var(--color-eef0f4);
box-shadow: 0 4px 24px var(--color-rgba-0-0-0-4);
}
.form-aside-title {
font-size: 18px;
font-weight: 700;
color: var(--color-1a1a2e);
margin-bottom: 24px;
}
.form-contact-list {
display: flex;
flex-direction: column;
gap: 22px;
}
.form-contact-list li {
display: flex;
gap: 14px;
align-items: flex-start;
}
.form-contact-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--color-rgba-138-92-245-10);
color: var(--contact-purple);
}
.form-contact-one {
background-position: -571px -368px;
width: 22px;
height: 18px;
}
.form-contact-two {
background-position: -572px -411px;
width: 20px;
height: 20px;
}
.form-contact-three {
background-position: -573px -454px;
width: 18px;
height: 22px;
}
.form-contact-four {
background-position: -155px -568px;
width: 22px;
height: 22px;
}
.form-contact-list strong {
display: block;
font-size: 16px;
font-weight: 600;
color: var(--color-1a1a2e);
margin-bottom: 4px;
}
.form-contact-list p {
font-size: 14px;
color: var(--color-text-light);
line-height: 1.6;
}
.form-response-time {
display: flex;
align-items: center;
gap: 14px;
margin-top: 28px;
padding: 16px 18px;
background: var(--color-rgba-138-92-245-8);
border-radius: 12px;
border: 1px solid var(--color-rgba-138-92-245-12);
}
.form-response-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--color-rgba-138-92-245-12);
color: var(--contact-purple);
}
.form-response-time strong {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--color-text-muted);
margin-bottom: 4px;
}
.form-response-time p {
font-size: 16px;
font-weight: 700;
color: var(--contact-purple);
line-height: 1.3;
}
.contact-form {
padding: 28px 24px;
background: var(--color-bg);
border-radius: 16px;
border: 1px solid var(--color-eef0f4);
box-shadow: 0 4px 24px var(--color-rgba-0-0-0-4);
}
.form-row {
display: flex;
flex-direction: column;
gap: 0;
}
.form-field {
display: block;
margin-bottom: 18px;
}
.form-label {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--color-1a1a2e);
margin-bottom: 8px;
}
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
padding: 11px 14px;
font-size: 14px;
font-family: inherit;
color: var(--color-text);
background: var(--color-bg);
border: 1px solid var(--color-e0e0e8);
border-radius: 8px;
transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--contact-purple);
box-shadow: 0 0 0 3px var(--color-rgba-138-92-245-12);
}
.form-field input.is-invalid,
.form-field select.is-invalid,
.form-field textarea.is-invalid {
border-color: var(--color-e53e3e);
}
.form-field textarea {
resize: vertical;
min-height: 130px;
}
.form-agree {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 22px;
font-size: 13px;
color: var(--color-text-light);
line-height: 1.6;
cursor: pointer;
}
.form-agree input {
flex-shrink: 0;
margin-top: 3px;
width: 16px;
height: 16px;
accent-color: var(--contact-purple);
}
.form-agree a {
color: var(--contact-purple);
}
.form-agree a:hover {
text-decoration: underline;
}
.btn-contact-submit {
width: 100%;
padding: 14px 28px;
font-size: 15px;
font-weight: 600;
color: var(--color-bg);
background: var(--contact-purple);
border-radius: 8px;
transition: background var(--transition), transform var(--transition);
}
.btn-contact-submit:hover {
background: var(--contact-purple-dark);
}
.btn-contact-submit:active {
transform: scale(0.99);
}
.form-feedback {
margin-top: 14px;
padding: 12px 16px;
font-size: 14px;
border-radius: 8px;
text-align: center;
}
.form-feedback.is-success {
color: var(--color-276749);
background: var(--color-f0fff4);
border: 1px solid var(--color-9ae6b4);
}
.form-feedback.is-error {
color: var(--color-c53030);
background: var(--color-fff5f5);
border: 1px solid var(--color-feb2b2);
}
/* --- Dark Footer --- */
.page-contact .site-footer--dark {
background: var(--color-1c1c1e);
border-top: none;
}
.page-contact .site-footer--dark .footer-col h4 {
color: var(--color-bg);
font-size: 15px;
margin-bottom: 16px;
}
.page-contact .site-footer--dark .footer-col ul li {
margin-bottom: 10px;
}
.page-contact .site-footer--dark .footer-col a,
.page-contact .site-footer--dark .footer-contact li {
color: var(--color-rgba-255-255-255-55);
font-size: 13px;
line-height: 1.7;
}
.page-contact .site-footer--dark .footer-col a:hover {
color: var(--color-bg);
}
.page-contact .site-footer--dark .footer-qr .qr-item span {
color: var(--color-rgba-255-255-255-70);
font-size: 12px;
}
.page-contact .site-footer--dark .footer-bottom {
border-top: 1px solid var(--color-rgba-255-255-255-8);
}
.page-contact .site-footer--dark .footer-bottom p {
color: var(--color-rgba-255-255-255-35);
font-size: 12px;
}
/* --- Page chrome --- */
.page-contact .nav-item--about>a {
color: var(--contact-purple);
}
.page-contact .nav-item--about.is-active>a::after {
content: "";
position: absolute;
bottom: 0;
left: 18px;
right: 18px;
height: 3px;
background: var(--contact-purple);
border-radius: 2px 2px 0 0;
}
/* --- Responsive --- */
@media (min-width: 576px) {
.channels-grid {
grid-template-columns: repeat(2, 1fr);
}
.benefits-grid {
grid-template-columns: repeat(3, 1fr);
}
.job-row {
flex-direction: row;
align-items: center;
}
.job-apply {
align-self: center;
flex-shrink: 0;
}
.form-row {
flex-direction: row;
gap: 16px;
}
.form-row .form-field {
flex: 1;
}
}
@media (min-width: 768px) {
.contact-hero-body {
padding: 56px 0 64px;
}
.page-contact .about-subnav.contact-subnav a {
padding: 16px 24px;
}
.contact-channels,
.contact-location,
.contact-join {
padding: 64px 0;
}
.contact-form-section {
padding: 64px 0 80px;
}
.location-panel {
flex-direction: row;
align-items: stretch;
gap: 24px;
}
.location-info {
flex: 0 0 38%;
max-width: 38%;
padding: 36px 32px;
}
.location-map-link {
margin-top: auto;
padding-top: 8px;
}
.location-map {
flex: 1;
min-height: 450px;
}
#company-map {
min-height: 450px;
}
.benefits-grid {
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.jobs-panel {
padding: 32px 36px;
}
.form-layout {
flex-direction: row;
align-items: stretch;
gap: 24px;
}
.form-aside {
flex: 0 0 30%;
padding: 32px 28px;
}
.contact-form {
flex: 1;
padding: 32px 36px;
}
}
@media (min-width: 1024px) {
.channels-grid {
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.form-aside {
flex-basis: 32%;
}
}
@media (min-width: 1200px) {
.form-aside {
flex-basis: 30%;
}
}
@media (max-width: 767px) {
.page-contact .about-subnav.contact-subnav a {
padding: 14px 12px;
font-size: 14px;
}
.page-contact .section-header {
margin-bottom: 36px;
}
.page-contact .section-header .section-tag {
margin-bottom: 12px;
font-size: 12px;
}
.page-contact .section-header h2 {
margin-bottom: 10px;
}
.page-contact .section-header p {
font-size: 13px;
line-height: 1.7;
}
.location-info {
padding: 24px 20px;
}
.location-address {
gap: 14px;
padding-bottom: 20px;
margin-bottom: 20px;
}
.location-address-icon {
width: 48px;
height: 48px;
}
.location-address-icon .icon-placeholder {
width: 22px;
height: 22px;
}
.location-address-title {
font-size: 15px;
}
.location-address-text {
font-size: 14px;
}
.location-meta {
gap: 16px;
}
.location-meta-icon {
width: 32px;
height: 32px;
border-radius: 8px;
}
.location-meta-body p {
font-size: 13px;
}
.location-map-link {
margin-top: 22px;
}
.location-map,
#company-map {
min-height: 240px;
}
}
/* ===== download.css ===== */
/* ========================================
涓嬭浇涓績 - 鏈嶅姟鏀寔
======================================== */
.page-download {
--dl-purple: var(--color-7b5be4);
--dl-purple-dark: var(--color-6347c9);
--dl-purple-light: var(--color-9b7ef0);
--dl-hero-start: var(--color-f8f6ff);
--dl-hero-end: var(--color-eef4ff);
--dl-purple-row: var(--color-faf9fe);
}
/* --- Reset & Base --- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family);
color: var(--color-text);
line-height: 1.6;
background: var(--color-bg);
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
object-fit: cover;
}
a {
color: inherit;
text-decoration: none;
transition: color var(--transition);
}
ul {
list-style: none;
}
button {
border: none;
background: none;
cursor: pointer;
font-family: inherit;
}
.container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 20px;
}
.skip-link {
position: absolute;
top: -100%;
left: 0;
z-index: 9999;
padding: 8px 16px;
background: var(--color-primary);
color: var(--color-bg);
}
.skip-link:focus {
top: 0;
}
/* --- ??????--- */
.img-ph {
object-fit: cover;
background: var(--color-border);
border-radius: 4px;
}
.img-ph--icon {
object-fit: contain;
background: var(--color-f0f0f5);
}
.img-ph--logo {
object-fit: contain;
background: transparent;
}
.img-ph--hero {
object-fit: contain;
background: var(--color-rgba-255-255-255-30);
border-radius: 12px;
}
.dl-file-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 6px;
flex-shrink: 0;
overflow: hidden;
}
.dl-file-icon img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
}
.dl-file-icon--pdf {
background: var(--color-e53935);
}
.dl-file-icon--zip {
background: var(--color-ff9800);
}
.dl-file-icon--doc {
background: var(--color-2196f3);
}
.dl-file-icon--code {
background: var(--color-7e57c2);
}
/* ========================================
Header
======================================== */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background: var(--color-bg);
box-shadow: 0 1px 6px var(--color-rgba-0-0-0-6);
height: var(--header-height);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-height);
}
.main-nav {
flex: 1;
display: flex;
justify-content: center;
}
.nav-list {
display: flex;
align-items: center;
}
.page-download .nav-item>a:hover,
.page-download .nav-item.is-active>a {
color: var(--dl-purple);
}
.page-download .nav-item.is-active>a::after {
content: "";
position: absolute;
bottom: 0;
left: 18px;
right: 18px;
height: 3px;
background: var(--dl-purple);
border-radius: 2px 2px 0 0;
}
.header-tools {
display: flex;
align-items: center;
gap: 12px;
}
.tool-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
transition: all var(--transition);
}
.tool-btn:hover {
background: var(--color-primary-light);
}
.tool-btn img {
width: 18px;
height: 18px;
object-fit: contain;
}
.btn-header-cloud {
display: none;
align-items: center;
gap: 6px;
padding: 7px 16px;
font-size: 13px;
font-weight: 500;
color: var(--color-bg);
background: linear-gradient(135deg, var(--dl-purple-light) 0%, var(--dl-purple) 100%);
border-radius: 20px;
white-space: nowrap;
transition: opacity var(--transition), transform var(--transition);
}
.btn-header-cloud:hover {
opacity: 0.92;
transform: translateY(-1px);
}
.btn-header-cloud img {
width: 16px;
height: 16px;
object-fit: contain;
}
.mobile-toggle {
display: none;
flex-direction: column;
gap: 5px;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
}
.mobile-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--color-text);
transition: all var(--transition);
}
@media (min-width: 992px) {
.btn-header-cloud {
display: inline-flex;
}
}
/* --- Hero --- */
.dl-hero {
position: relative;
background: var(--color-f9fafb) url(../images/down.webp) no-repeat center center;
background-size: cover;
overflow: hidden;
height: 500px;
}
.dl-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 85% 40%, var(--color-rgba-123-91-228-12) 0%, transparent 50%),
radial-gradient(circle at 15% 80%, var(--color-rgba-100-160-255-10) 0%, transparent 45%);
pointer-events: none;
}
.dl-hero-inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
height: 500px;
}
.dl-hero-content {
text-align: center;
width: 720px;
margin: 0 auto;
}
.dl-hero-title {
font-size: clamp(32px, 5vw, 42px);
font-weight: 700;
color: var(--color-1a1a2e);
line-height: 1.2;
margin-bottom: 8px;
letter-spacing: 2px;
}
.dl-hero-subtitle {
font-size: 15px;
color: var(--color-text-light);
margin-bottom: 28px;
letter-spacing: 1px;
}
.dl-search-form {
display: flex;
align-items: center;
gap: 12px;
max-width: 720px;
margin: 0 auto;
padding: 32px;
background: var(--color-bg);
border-radius: 16px;
box-shadow: 0px 14px 20px -2px var(--color-rgba-0-0-0-10), 0px 3px 4px -3px var(--color-rgba-0-0-0-10);
}
.dl-search-select-wrap {
position: relative;
flex-shrink: 0;
}
.dl-search-select-wrap::after {
content: "";
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-35%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid var(--color-text);
pointer-events: none;
}
.dl-search-select {
appearance: none;
border: none;
background: var(--color-f0f1f5);
padding: 12px 32px 12px 16px;
font-size: 14px;
color: var(--color-text);
cursor: pointer;
min-width: 88px;
border-radius: 10px;
height: 44px;
}
.dl-search-select-wrap img {
display: none;
}
.dl-search-input {
flex: 1;
border: 1px solid var(--color-e5e6eb);
padding: 12px 16px;
font-size: 14px;
color: var(--color-text);
min-width: 0;
background: var(--color-bg);
border-radius: 10px;
height: 44px;
}
.dl-search-input::placeholder {
color: var(--color-b0b3bc);
}
.dl-search-input:focus {
outline: none;
border-color: var(--color-rgba-123-91-228-45);
}
.dl-search-btn {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 44px;
margin: 0;
background: var(--dl-purple);
border-radius: 10px;
transition: background var(--transition);
}
.dl-search-btn:hover {
background: var(--dl-purple-dark);
}
.dl-search-btn .icon-css {
filter: brightness(0) invert(1);
}
.dl-search-btn img {
display: none;
}
.dl-hot-search {
margin-top: 18px;
font-size: 16px;
color: var(--color-text-light);
}
.dl-hot-search a {
color: var(--dl-purple);
margin-left: 0;
transition: opacity var(--transition);
}
.dl-hot-search a:hover {
opacity: 0.8;
}
.dl-hot-search a+a::before {
content: "路";
color: var(--dl-purple);
margin: 0 10px;
font-weight: 700;
}
.dl-hero-visual {
display: none;
justify-content: flex-end;
align-items: center;
}
.dl-hero-art {
position: relative;
width: 100%;
max-width: 380px;
aspect-ratio: 1.2;
}
.dl-hero-art-doc {
position: absolute;
border-radius: 12px;
box-shadow: 0 8px 32px var(--color-rgba-123-91-228-18);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
color: var(--color-bg);
letter-spacing: 0.5px;
}
.dl-hero-art-doc--1 {
width: 120px;
height: 150px;
background: linear-gradient(145deg, var(--color-9575cd) 0%, var(--color-7e57c2) 100%);
top: 10%;
right: 8%;
transform: rotate(8deg);
z-index: 3;
}
.dl-hero-art-doc--2 {
width: 110px;
height: 140px;
background: linear-gradient(145deg, var(--color-66bb6a) 0%, var(--color-43a047) 100%);
top: 28%;
right: 38%;
transform: rotate(-6deg);
z-index: 2;
}
.dl-hero-art-doc--3 {
width: 100px;
height: 130px;
background: linear-gradient(145deg, var(--color-ef5350) 0%, var(--color-e53935) 100%);
top: 48%;
right: 18%;
transform: rotate(4deg);
z-index: 1;
}
.dl-hero-art-cloud {
position: absolute;
bottom: 8%;
left: 5%;
width: 90px;
height: 90px;
border-radius: 50%;
background: radial-gradient(circle, var(--color-rgba-123-91-228-15) 0%, transparent 70%);
}
.dl-hero-art-arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--color-rgba-255-255-255-90);
box-shadow: 0 4px 20px var(--color-rgba-123-91-228-20);
display: flex;
align-items: center;
justify-content: center;
z-index: 4;
}
.dl-hero-art-arrow::after {
content: "";
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 14px solid var(--dl-purple);
margin-top: 4px;
}
.dl-hero-visual img {
display: none;
}
@media (min-width: 992px) {
.dl-search-form {
margin: 0;
}
.dl-hero-visual {
display: flex;
}
}
/* --- Breadcrumb --- */
.dl-breadcrumb-wrap {
background: var(--color-bg);
padding: 14px 0 0;
}
.dl-breadcrumb {
font-size: 13px;
color: var(--color-text-muted);
}
.dl-breadcrumb a {
color: var(--color-text-muted);
transition: color var(--transition);
}
.dl-breadcrumb a:hover {
color: var(--dl-purple);
}
.dl-breadcrumb-sep {
margin: 0 6px;
color: var(--color-ccc);
}
/* --- Category Tabs --- */
.dl-tabs-wrap {
background: var(--color-f8f9fb);
padding: 24px 0 0;
}
.dl-tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--color-border);
background: var(--color-bg);
}
.dl-tab {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 10px;
padding: 18px 12px;
font-size: 15px;
font-weight: 500;
color: var(--color-text-light);
background: var(--color-f5f6fa);
border-right: 1px solid var(--color-border);
transition: background var(--transition), color var(--transition);
cursor: pointer;
}
.dl-tab:last-child {
border-right: none;
}
.dl-tab.is-active {
background: var(--color-bg);
color: var(--dl-purple);
position: relative;
}
.dl-tab:not(.is-active):hover {
background: var(--color-eef0f5);
color: var(--dl-purple);
}
/* --- Main Content --- */
.dl-main {
background: var(--color-f8f9fb);
padding: 28px 0 60px;
}
.dl-panel {
display: none;
}
.dl-panel.is-active {
display: block;
}
.dl-panel-title {
text-align: center;
font-size: 22px;
font-weight: 700;
color: var(--color-1a1a2e);
margin-bottom: 24px;
}
.dl-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 10px;
box-shadow: 0 4px 20px var(--color-rgba-91-59-184-6);
overflow: hidden;
padding: 8px 0 16px;
}
.dl-section-title {
display: flex;
align-items: center;
gap: 10px;
margin: 20px 24px 14px;
font-size: 16px;
font-weight: 700;
color: var(--color-1a1a2e);
}
.dl-section-title::before {
content: "";
width: 4px;
height: 16px;
border-radius: 2px;
background: var(--dl-purple);
flex-shrink: 0;
}
.dl-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 20px 8px;
border-radius: 8px;
border: 1px solid var(--color-ede9fe);
}
.dl-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.dl-table thead th {
padding: 14px 20px;
font-size: 14px;
font-weight: 600;
text-align: left;
color: var(--color-bg);
background: var(--dl-purple);
white-space: nowrap;
}
.dl-table thead th.col-size,
.dl-table thead th.col-date,
.dl-table thead th.col-action {
text-align: center;
}
.dl-table thead th.col-type {
width: 10%;
}
.dl-table thead th.col-name {
width: 42%;
}
.dl-table thead th.col-size {
width: 14%;
}
.dl-table thead th.col-date {
width: 16%;
}
.dl-table thead th.col-action {
width: 18%;
}
.dl-table tbody tr {
border-bottom: 1px solid var(--color-f0f0f5);
transition: background var(--transition);
background: var(--color-bg);
}
.dl-table tbody tr:last-child {
border-bottom: none;
}
.dl-table tbody tr:nth-child(even) {
background: var(--dl-purple-row);
}
.dl-table tbody tr:hover {
background: var(--color-efeaff);
}
.dl-table tbody td {
padding: 16px 20px;
vertical-align: middle;
}
.dl-table .col-type {
text-align: center;
}
.dl-file-text {
line-height: 1.35;
}
.dl-file-text strong {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--color-1a1a2e);
}
.dl-file-text span {
display: block;
font-size: 12px;
color: var(--color-text-muted);
margin-top: 4px;
}
.dl-table .col-size,
.dl-table .col-date {
text-align: center;
white-space: nowrap;
}
.dl-table .col-action {
text-align: center;
}
.btn-dl-download {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 18px;
font-size: 13px;
font-weight: 500;
color: var(--color-bg);
background: var(--dl-purple);
border-radius: 20px;
transition: background var(--transition), transform var(--transition);
white-space: nowrap;
}
.btn-dl-download:hover {
background: var(--dl-purple-dark);
transform: translateY(-1px);
}
.dl-empty {
padding: 48px 24px;
text-align: center;
color: var(--color-text-muted);
font-size: 14px;
}
/* ========================================
Footer
======================================== */
.site-footer {
background: var(--color-bg-gray);
border-top: 1px solid var(--color-border);
}
.footer-main {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr) 1.4fr;
gap: 30px;
padding: 50px 20px 30px;
}
.footer-main.footer-main--home {
grid-template-columns: 1.35fr 0.9fr 1.35fr 0.9fr 0.9fr 1.35fr;
gap: 28px;
padding: 52px 20px 36px;
}
.footer-brand img {
margin-bottom: 16px;
}
.footer-contact {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-contact li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
line-height: 1.55;
color: var(--color-text-light);
margin-bottom: 0;
}
.footer-contact-icon {
flex-shrink: 0;
margin-top: 4px;
}
.footer-contact a {
color: var(--color-text-light);
}
.footer-contact a:hover {
color: var(--color-primary);
}
.footer-col h4 {
font-size: 15px;
font-weight: 600;
margin-bottom: 16px;
color: var(--color-text);
}
.footer-col ul li {
margin-bottom: 8px;
}
.footer-col ul li a {
font-size: 13px;
color: var(--color-text-light);
}
.footer-col ul li a:hover {
color: var(--color-primary);
}
.footer-solutions-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 12px;
}
.footer-qr-title {
font-size: 15px;
font-weight: 600;
margin-bottom: 14px;
color: var(--color-text);
}
.footer-qr--shops .footer-qr-row {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.footer-qr--shops .qr-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.footer-qr--shops .qr-item span {
font-size: 11px;
color: var(--color-text-light);
}
.footer-qr--shops .qr-item img {
width: 80px;
height: 80px;
border: 1px solid var(--color-border);
border-radius: 4px;
object-fit: cover;
}
.qr-shop-btn {
display: inline-block;
padding: 3px 12px;
font-size: 11px;
color: var(--color-bg);
background: var(--color-primary);
border-radius: 12px;
transition: background var(--transition);
}
.qr-shop-btn:hover {
background: var(--color-primary-dark);
}
.footer-bottom {
border-top: 1px solid var(--color-border);
padding: 16px 0;
text-align: center;
}
.footer-bottom p {
font-size: 12px;
color: var(--color-text-muted);
}
/* ========================================
Responsive
======================================== */
@media (max-width: 1200px) {
.footer-main {
grid-template-columns: repeat(3, 1fr);
}
.footer-qr--shops {
grid-column: 1 / -1;
}
.footer-qr--shops .footer-qr-row {
justify-content: center;
}
}
@media (max-width: 991px) {
.dl-tabs {
grid-template-columns: repeat(2, 1fr);
}
.dl-tab {
border-bottom: 1px solid var(--color-border);
}
.dl-tab:nth-child(2) {
border-right: none;
}
.dl-tab:nth-child(3),
.dl-tab:nth-child(4) {
border-bottom: none;
}
.dl-tab:nth-child(3) {
border-right: 1px solid var(--color-border);
}
}
@media (max-width: 768px) {
.main-nav {
display: none;
}
.mobile-toggle {
display: flex;
}
.header-tools .tool-btn:nth-child(4) {
display: none;
}
.footer-main {
grid-template-columns: 1fr 1fr;
}
.footer-brand,
.footer-qr--shops {
grid-column: 1 / -1;
}
.footer-solutions-cols {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.dl-hero {
padding: 32px 0 28px;
}
.dl-search-form {
flex-wrap: wrap;
border-radius: 16px;
gap: 10px;
}
.dl-search-select-wrap {
width: 100%;
}
.dl-search-select {
width: 100%;
}
.dl-search-input {
width: 100%;
flex: none;
}
.dl-search-btn {
width: 100%;
height: 44px;
margin: 0;
border-radius: 10px;
}
.dl-tabs {
grid-template-columns: 1fr 1fr;
border-radius: 8px;
border-bottom: 1px solid var(--color-border);
}
.dl-card {
border-radius: 8px;
margin-top: 16px;
}
.dl-table thead th.col-date,
.dl-table tbody td.col-date {
display: none;
}
.dl-table thead th.col-type {
width: 12%;
}
.dl-table thead th.col-name {
width: 48%;
}
.dl-table thead th.col-size {
width: 18%;
}
.dl-table thead th.col-action {
width: 14%;
}
.dl-table thead th,
.dl-table tbody td {
padding: 12px 10px;
font-size: 13px;
}
}
@media (max-width: 480px) {
.dl-table thead th.col-size,
.dl-table tbody td.col-size {
display: none;
}
.dl-table thead th.col-type {
width: 14%;
}
.dl-table thead th.col-name {
width: 56%;
}
.dl-table thead th.col-action {
width: 30%;
}
.btn-dl-download {
padding: 6px 12px;
font-size: 12px;
}
.footer-main {
grid-template-columns: 1fr;
}
}
@media print {
.site-header {
display: none;
}
}
/* ===== products.css ===== */
/* ========================================
Products Center Page - 浜у搧涓績
======================================== */
.page-products {
--pc-purple: var(--color-7b61ff);
--pc-purple-dark: var(--color-6c55d8);
--pc-purple-deep: var(--color-5544c0);
--pc-orange: var(--color-f60);
--pc-orange-light: var(--color-fff3eb);
--pc-bg: var(--color-bg-gray);
--pc-sidebar-purple: linear-gradient(160deg, var(--color-7b6ae8) 0%, var(--color-5a48c8) 100%);
--pc-sidebar-beige: linear-gradient(160deg, var(--color-f8f4ef) 0%, var(--color-ede8e0) 100%);
}
.page-products .nav-item.is-active>a {
color: var(--pc-purple);
}
/* --- Hero Banner --- */
.pc-hero {
position: relative;
background: var(--color-f1eefd) url(../images/pc-hero.webp) no-repeat center center;
background-size: cover;
overflow: hidden;
min-height: 500px;
}
.pc-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 15% 70%, var(--color-rgba-123-97-255-8) 0%, transparent 45%),
radial-gradient(circle at 85% 30%, var(--color-rgba-100-180-255-10) 0%, transparent 40%);
pointer-events: none;
}
.pc-hero-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
padding: 48px 20px 56px;
max-width: var(--container-width);
margin: 0 auto;
}
.pc-hero-text {
color: var(--color-text);
}
.pc-hero-title {
font-size: clamp(36px, 4.2vw, 64px);
font-weight: 700;
line-height: 1.2;
margin-bottom: 20px;
color: var(--color-222);
}
.pc-hero-desc {
margin: 0;
font-size: 22px;
line-height: 1.9;
color: var(--color-888);
}
.pc-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.pc-hero-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 22px;
font-size: 14px;
font-weight: 500;
color: var(--color-bg);
background: var(--pc-purple);
border-radius: 8px;
transition: background 0.3s ease, transform 0.3s ease;
}
.pc-hero-btn-icon {
flex-shrink: 0;
}
.pc-hero-btn:hover {
background: var(--pc-purple-dark);
transform: translateY(-1px);
}
.pc-hero-btn--outline {
color: var(--pc-purple);
background: var(--color-bg);
border: 1px solid var(--pc-purple);
}
.pc-hero-btn--outline:hover {
background: var(--color-f3f0ff);
}
.pc-hero-visual {
position: relative;
height: 431px;
display: flex;
align-items: center;
justify-content: center;
}
.pc-hero-products {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 12px;
z-index: 2;
}
.pc-hero-products img {
object-fit: contain;
filter: drop-shadow(0 8px 20px var(--color-rgba-0-0-0-12));
transition: transform 0.3s ease;
border-radius: 4px;
}
.pc-hero-products img:nth-child(1) {
width: 100px;
margin-bottom: 8px;
}
.pc-hero-products img:nth-child(2) {
width: 130px;
margin-bottom: 0;
z-index: 3;
}
.pc-hero-products img:nth-child(3) {
width: 90px;
margin-bottom: 12px;
}
.pc-hero-products img:nth-child(4) {
width: 110px;
margin-bottom: 6px;
}
.pc-hero-products img:nth-child(5) {
width: 85px;
margin-bottom: 14px;
}
/* --- Category Nav --- */
.pc-categories {
background: var(--color-bg);
border-bottom: 1px solid var(--color-border);
padding: 16px 0;
position: sticky;
top: var(--header-height);
z-index: 90;
box-shadow: 0 4px 20px var(--color-rgba-91-59-184-6);
}
.pc-categories-wrap {
display: flex;
align-items: center;
gap: 8px;
}
.pc-categories-inner {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
gap: 4px 35px;
flex: 1;
min-width: 0;
overflow-x: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.pc-categories-inner::-webkit-scrollbar {
display: none;
}
.pc-cat-nav {
flex-shrink: 0;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-e5e5ea);
border-radius: 50%;
background: var(--color-bg);
color: var(--color-text-muted);
transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.pc-cat-nav:hover:not(:disabled) {
color: var(--pc-purple);
border-color: var(--pc-purple);
}
.pc-cat-nav:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.pc-cat-nav-arrow {
width: 8px;
height: 8px;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
margin-left: 2px;
}
.pc-cat-nav-arrow--next {
transform: rotate(-135deg);
margin-left: 0;
margin-right: 2px;
}
.i-one {
background-position: -685px -12px;
width: 20px;
height: 17px;
}
.i-two {
background-position: -685px -52px;
width: 20px;
height: 17px;
}
.i-three {
background-position: -197px -570px;
width: 21px;
height: 17px;
}
.i-four {
background-position: -686px -93px;
width: 18px;
height: 15px;
}
.i-five {
background-position: -685px -132px;
width: 20px;
height: 17px;
}
.i-six {
background-position: -685px -171px;
width: 20px;
height: 18px;
}
.i-seven {
background-position: -504px -619px;
width: 16px;
height: 19px;
}
.i-eight {
background-position: -545px -620px;
width: 14px;
height: 17px;
}
.i-duplex {
background-position: -51px -12px;
width: 18px;
height: 17px;
}
.i-electric {
background-position: -91px -53px;
width: 18px;
height: 17px;
}
.i-can {
background-position: -11px -53px;
width: 18px;
height: 17px;
}
.i-alarm {
background-position: -52px -53px;
width: 16px;
height: 16px;
}
.pc-cat-btn {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 12px;
font-size: 16px;
font-weight: 500;
line-height: 1;
color: var(--color-text-light);
background: transparent;
border-radius: 0;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
white-space: nowrap;
}
.pc-cat-icon {
object-fit: cover;
display: block;
flex-shrink: 0;
align-self: center;
background-repeat: no-repeat;
}
/* 按栏目顺序兜底雪碧图，避免模板 class 缺失时图标不显示 */
.pc-categories-inner .pc-cat-btn:nth-child(1) .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(2) .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(3) .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(4) .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(5) .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(6) .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(7) .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(8) .pc-cat-icon {
background-image: url(../images/css_sprites.webp);
}
.pc-categories-inner .pc-cat-btn:nth-child(9) .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(10) .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(11) .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(12) .pc-cat-icon {
background-image: url(../images/css_sprites3.png);
}
.pc-categories-inner .pc-cat-btn:nth-child(1) .pc-cat-icon {
background-position: -685px -12px;
width: 20px;
height: 17px;
}
.pc-categories-inner .pc-cat-btn:nth-child(2) .pc-cat-icon {
background-position: -685px -52px;
width: 20px;
height: 17px;
}
.pc-categories-inner .pc-cat-btn:nth-child(3) .pc-cat-icon {
background-position: -197px -570px;
width: 21px;
height: 17px;
}
.pc-categories-inner .pc-cat-btn:nth-child(4) .pc-cat-icon {
background-position: -686px -93px;
width: 18px;
height: 15px;
}
.pc-categories-inner .pc-cat-btn:nth-child(5) .pc-cat-icon {
background-position: -685px -132px;
width: 20px;
height: 17px;
}
.pc-categories-inner .pc-cat-btn:nth-child(6) .pc-cat-icon {
background-position: -685px -171px;
width: 20px;
height: 18px;
}
.pc-categories-inner .pc-cat-btn:nth-child(7) .pc-cat-icon {
background-position: -504px -619px;
width: 16px;
height: 19px;
}
.pc-categories-inner .pc-cat-btn:nth-child(8) .pc-cat-icon {
background-position: -545px -620px;
width: 14px;
height: 17px;
}
.pc-categories-inner .pc-cat-btn:nth-child(9) .pc-cat-icon {
background-position: -51px -12px;
width: 18px;
height: 17px;
}
.pc-categories-inner .pc-cat-btn:nth-child(10) .pc-cat-icon {
background-position: -91px -53px;
width: 18px;
height: 17px;
}
.pc-categories-inner .pc-cat-btn:nth-child(11) .pc-cat-icon {
background-position: -11px -53px;
width: 18px;
height: 17px;
}
.pc-categories-inner .pc-cat-btn:nth-child(12) .pc-cat-icon {
background-position: -52px -53px;
width: 16px;
height: 16px;
}
.pc-categories-inner .pc-cat-btn:nth-child(1).is-active .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(1):hover .pc-cat-icon {
background-position: -685px -212px;
}
.pc-categories-inner .pc-cat-btn:nth-child(2).is-active .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(2):hover .pc-cat-icon {
background-position: -685px -252px;
}
.pc-categories-inner .pc-cat-btn:nth-child(3).is-active .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(3):hover .pc-cat-icon {
background-position: -238px -570px;
}
.pc-categories-inner .pc-cat-btn:nth-child(4).is-active .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(4):hover .pc-cat-icon {
background-position: -686px -293px;
}
.pc-categories-inner .pc-cat-btn:nth-child(5).is-active .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(5):hover .pc-cat-icon {
background-position: -685px -332px;
}
.pc-categories-inner .pc-cat-btn:nth-child(6).is-active .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(6):hover .pc-cat-icon {
background-position: -685px -371px;
}
.pc-categories-inner .pc-cat-btn:nth-child(7).is-active .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(7):hover .pc-cat-icon {
background-position: -584px -619px;
}
.pc-categories-inner .pc-cat-btn:nth-child(8).is-active .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(8):hover .pc-cat-icon {
background-position: -625px -620px;
}
.pc-categories-inner .pc-cat-btn:nth-child(9).is-active .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(9):hover .pc-cat-icon {
background-position: -11px -12px;
}
.pc-categories-inner .pc-cat-btn:nth-child(10).is-active .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(10):hover .pc-cat-icon {
background-position: -131px -53px;
}
.pc-categories-inner .pc-cat-btn:nth-child(11).is-active .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(11):hover .pc-cat-icon {
background-position: -91px -12px;
}
.pc-categories-inner .pc-cat-btn:nth-child(12).is-active .pc-cat-icon,
.pc-categories-inner .pc-cat-btn:nth-child(12):hover .pc-cat-icon {
background-position: -132px -12px;
}
.pc-cat-btn.is-active,
.pc-cat-btn:hover {
color: var(--color-purple-light);
background: transparent;
box-shadow: none;
border-bottom-color: var(--color-purple-light);
}
.pc-cat-btn.is-active .i-one,
.pc-cat-btn:hover .i-one {
background-position: -685px -212px;
}
.pc-cat-btn.is-active .i-two,
.pc-cat-btn:hover .i-two {
background-position: -685px -252px;
}
.pc-cat-btn.is-active .i-three,
.pc-cat-btn:hover .i-three {
background-position: -238px -570px;
}
.pc-cat-btn.is-active .i-four,
.pc-cat-btn:hover .i-four {
background-position: -686px -293px;
}
.pc-cat-btn.is-active .i-five,
.pc-cat-btn:hover .i-five {
background-position: -685px -332px;
}
.pc-cat-btn.is-active .i-six,
.pc-cat-btn:hover .i-six {
background-position: -685px -371px;
}
.pc-cat-btn.is-active .i-seven,
.pc-cat-btn:hover .i-seven {
background-position: -584px -619px;
}
.pc-cat-btn.is-active .i-eight,
.pc-cat-btn:hover .i-eight {
background-position: -625px -620px;
}
.pc-cat-btn.is-active .i-duplex,
.pc-cat-btn:hover .i-duplex {
background-position: -11px -12px;
width: 18px;
height: 17px;
}
.pc-cat-btn.is-active .i-electric,
.pc-cat-btn:hover .i-electric {
background-position: -131px -53px;
width: 18px;
height: 17px;
}
.pc-cat-btn.is-active .i-can,
.pc-cat-btn:hover .i-can {
background-position: -91px -12px;
width: 18px;
height: 17px;
}
.pc-cat-btn.is-active .i-alarm,
.pc-cat-btn:hover .i-alarm {
background-position: -132px -12px;
width: 16px;
height: 16px;
}
/* --- Sub Category Nav --- */
.pc-subcategories {
background: var(--color-f7f8fc);
border-bottom: 1px solid var(--color-border);
padding: 14px 0;
min-height: 56px;
}
.pc-subcategories-inner,
.pc-subcategories-panel {
display: none;
align-items: center;
flex-wrap: wrap;
gap: 10px 12px;
}
.pc-subcategories-panel.is-visible,
.pc-subcategories-panel:not([hidden]) {
display: flex;
}
.pc-subcategories-panel[hidden] {
display: none !important;
}
.pc-subcat-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 18px;
font-size: 14px;
line-height: 1.3;
color: var(--color-555);
background: var(--color-bg);
border: 1px solid var(--color-e8e8ee);
border-radius: 18px;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.pc-subcat-btn:hover {
color: var(--pc-purple);
border-color: var(--pc-purple);
background: var(--color-bg);
box-shadow: 0 2px 8px rgba(123, 97, 255, 0.12);
}
.pc-subcat-btn.is-active {
color: var(--color-bg);
background: var(--pc-purple);
border-color: var(--pc-purple);
box-shadow: 0 4px 12px rgba(123, 97, 255, 0.22);
}
/* --- Remote Featured --- */
.pc-iot-feature {
background: url(../images/txx.webp) no-repeat center center;
background-size: cover;
border-radius: 20px;
margin-top: 30px;
height: 400px;
}
.pc-iot-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.pc-iot-title {
font-size: 32px;
font-weight: 700;
color: var(--color-222);
margin-bottom: 16px;
}
.pc-iot-desc {
font-size: 14px;
line-height: 1.85;
color: var(--color-888);
margin-bottom: 28px;
max-width: 460px;
}
.pc-iot-btn {
display: inline-flex;
align-items: center;
padding: 10px 28px;
font-size: 14px;
font-weight: 500;
color: var(--color-bg);
background: var(--pc-purple);
border-radius: 6px;
transition: background 0.3s ease, transform 0.3s ease;
}
.pc-iot-btn:hover {
background: var(--pc-purple-dark);
transform: translateY(-1px);
}
.pc-iot-visual {
position: relative;
background: linear-gradient(135deg, var(--color-ede9ff) 0%, var(--color-e8f0ff) 50%, var(--color-f0ebff) 100%);
border-radius: 16px;
padding: 32px;
min-height: 240px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.pc-iot-visual::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
background: radial-gradient(circle, var(--color-rgba-108-85-216-15) 0%, transparent 70%);
top: -40px;
right: -40px;
border-radius: 50%;
}
.pc-iot-devices {
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.pc-iot-devices img {
object-fit: contain;
filter: drop-shadow(0 6px 16px var(--color-rgba-0-0-0-12));
max-width: 200px;
}
/* --- Industry Sections --- */
.pc-sections {
padding: 0 0 48px;
}
.pc-industry {
padding-top: 28px;
}
.pc-industry-top {
display: flex;
justify-content: flex-end;
margin-bottom: 12px;
}
.pc-industry-quicklinks {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 13px;
}
.pc-industry-quicklinks a {
color: var(--color-text-light);
transition: color 0.3s ease;
}
.pc-industry-quicklinks a:hover {
color: var(--pc-purple);
}
.pc-quicklinks-sep {
color: var(--color-ddd);
}
.pc-industry-inner {
display: grid;
grid-template-columns: 240px 1fr;
gap: 20px;
align-items: stretch;
}
.pc-industry-sidebar {
border-radius: 12px;
padding: 28px 24px;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
min-height: 420px;
}
.pc-industry-sidebar--orange {
background: linear-gradient(22deg, var(--color-bg) 0%, var(--color-fbfaff) 58.16%, var(--color-f9eee4) 100%);
color: var(--color-text);
}
.pc-industry-sidebar--lavender {
background: linear-gradient(205deg, var(--color-d5d4fd) 0%, var(--color-d4d2ff) 0%, var(--color-rgba-255-255-255-21) 100%);
color: var(--color-text);
}
.pc-industry-sidebar--tan {
background: linear-gradient(22deg, var(--color-bg) 0%, var(--color-fbfaff) 58.16%, var(--color-f9eee4) 100%);
color: var(--color-text);
}
.pc-industry-sidebar--blue {
background: linear-gradient(205deg, var(--color-d5d4fd) 0%, var(--color-d4d2ff) 0%, var(--color-rgba-255-255-255-21) 100%);
color: var(--color-text);
}
.pc-industry-sidebar--purple {
background: linear-gradient(205deg, var(--color-d5d4fd) 0%, var(--color-d4d2ff) 0%, var(--color-rgba-255-255-255-21) 100%);
color: var(--color-text);
}
.pc-industry-sidebar--beige {
background: var(--pc-sidebar-beige);
color: var(--color-text);
}
.pc-industry-sidebar h2 {
font-size: 26px;
font-weight: 700;
margin-bottom: 12px;
color: var(--color-text);
}
.pc-industry-sidebar p {
font-size: 13px;
line-height: 1.75;
color: var(--color-777);
}
.pc-industry-sidebar--purple p {
color: var(--color-text);
opacity: 0.85;
}
.pc-industry-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.pc-industry-tags span {
padding: 4px 10px;
font-size: 11px;
color: var(--color-text-light);
background: var(--color-rgba-255-255-255-70);
border-radius: 4px;
}
.pc-industry-sidebar--purple .pc-industry-tags span {
background: var(--color-rgba-255-255-255-20);
color: var(--color-text);
}
.pc-industry-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 20px;
font-size: 13px;
font-weight: 500;
border-radius: 6px;
margin-top: 20px;
width: fit-content;
transition: all 0.3s ease;
color: var(--pc-purple);
background: var(--color-bg);
}
.pc-industry-btn:hover {
box-shadow: 0 4px 12px var(--color-rgba-0-0-0-10);
}
.pc-industry-sidebar--purple .pc-industry-btn {
color: var(--pc-purple);
background: var(--color-bg);
}
.pc-industry-more {
position: absolute;
bottom: 20px;
right: 20px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 16px;
font-size: 14px;
color: var(--color-f78221);
border: 1px solid var(--color-f78221);
border-radius: 20px;
background: var(--color-rgba-255-255-255-60);
transition: all 0.3s ease;
}
.pc-industry-more:hover {
border-color: var(--pc-purple);
color: var(--pc-purple);
}
/* --- Product Grid --- */
.pc-product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.pc-product-grid--4 {
grid-template-columns: repeat(3, 1fr);
}
.pc-product-card {
background: var(--color-f5f6fa);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px var(--color-rgba-0-0-0-4);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
position: relative;
}
.pc-product-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px var(--color-rgba-0-0-0-10);
}
.pc-product-card-body {
padding: 16px;
flex: 1;
display: flex;
flex-direction: column;
}
.pc-product-badge {
position: absolute;
top: 0;
left: 0;
display: inline-block;
padding: 2px 10px;
font-size: 14px;
font-weight: 600;
border-radius: 8px 0px 8px 0px;
margin-bottom: 10px;
width: fit-content;
}
.pc-product-badge--hot {
background: linear-gradient(270deg, var(--color-fd5d1d) 0%, var(--color-f88733) 100%);
color: var(--color-bg);
}
.pc-product-badge--new {
background: var(--color-e8f0ff);
color: var(--color-3b7ddd);
}
.pc-product-badge--standard {
background: var(--color-fff3eb);
color: var(--pc-orange);
}
.pc-product-badge--flagship {
background: var(--color-e8f0ff);
color: var(--color-3b7ddd);
}
.pc-product-badge--pro {
background: var(--color-e8f8ef);
color: var(--color-2ea86c);
}
.pc-product-badge--basic {
background: var(--color-f3f0ff);
color: var(--pc-purple);
}
.pc-product-meta {
font-size: 14px;
color: var(--color-aaa);
line-height: 1.7;
margin-top: 8px;
}
.pc-product-meta span {
display: block;
}
.pc-product-img {
width: 200px;
height: 200px;
padding: 8px 0;
margin: 0 auto;
text-align: center;
}
.pc-product-img img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
margin: 0 auto;
}
.pc-product-name {
font-size: 18px;
font-weight: 600;
color: var(--color-text);
line-height: 1.4;
margin: 0;
padding-bottom: 10px;
border-bottom: 1px solid #E3E7ED;
text-align: left;
}
.pc-product-card a {
display: flex;
flex-direction: column;
height: 100%;
}
/* --- Responsive --- */
@media (max-width: 1200px) {
.pc-product-grid {
grid-template-columns: repeat(2, 1fr);
}
.pc-product-grid--4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1024px) {
.pc-hero-inner,
.pc-iot-inner {
grid-template-columns: 1fr;
text-align: center;
}
.pc-hero-actions {
justify-content: center;
}
.pc-iot-desc {
margin-left: auto;
margin-right: auto;
}
.pc-hero-visual {
height: 180px;
}
.pc-industry-inner {
grid-template-columns: 1fr;
}
.pc-industry-sidebar {
min-height: auto;
}
.pc-industry-more {
position: static;
margin-top: 16px;
align-self: flex-start;
}
.pc-industry-top {
justify-content: flex-start;
}
}
@media (max-width: 768px) {
.pc-hero-inner {
padding: 36px 20px 48px;
}
.pc-categories-wrap {
gap: 4px;
}
.pc-cat-nav {
width: 28px;
height: 28px;
}
.pc-cat-btn {
font-size: 14px;
padding: 8px;
}
.pc-product-grid,
.pc-product-grid--4 {
grid-template-columns: 1fr;
}
.pc-iot-title {
font-size: 28px;
}
.pc-hero-products img:nth-child(1) {
width: 70px;
}
.pc-hero-products img:nth-child(2) {
width: 90px;
}
.pc-hero-products img:nth-child(3) {
width: 65px;
}
.pc-hero-products img:nth-child(4) {
width: 75px;
}
.pc-hero-products img:nth-child(5) {
width: 60px;
}
}
/* ===== video.css ===== */
/* ========================================
Video Center Page ??????
======================================== */
.page-video {
--vc-purple: var(--color-6c55d8);
--vc-purple-dark: var(--color-5544c0);
--vc-purple-light: var(--color-8b7ae8);
--vc-hero-blue: var(--color-2a4db8);
--vc-tag-purple-bg: var(--color-rgba-108-85-216-12);
--vc-tag-purple: var(--color-6c55d8);
--vc-tag-red-bg: var(--color-rgba-235-80-80-10);
--vc-tag-red: var(--color-e05050);
--vc-tag-green-bg: var(--color-rgba-52-168-100-10);
--vc-tag-green: var(--color-34a864);
--vc-tag-yellow-bg: var(--color-rgba-245-166-35-12);
--vc-tag-yellow: var(--color-d4920a);
}
/* --- Header overrides --- */
.page-video .nav-item.is-active>a {
color: var(--vc-purple);
}
.page-video .nav-item.is-active>a::after {
background: var(--vc-purple);
}
.btn-header-cloud {
display: none;
align-items: center;
gap: 6px;
padding: 7px 16px;
font-size: 13px;
font-weight: 500;
color: var(--color-bg);
background: linear-gradient(135deg, var(--vc-purple-light) 0%, var(--vc-purple) 100%);
border-radius: 20px;
white-space: nowrap;
transition: opacity var(--transition), transform var(--transition);
}
.btn-header-cloud:hover {
opacity: 0.92;
transform: translateY(-1px);
}
@media (min-width: 992px) {
.btn-header-cloud {
display: inline-flex;
}
}
/* --- Hero --- */
.vc-hero {
position: relative;
background: var(--color-8450ee) url("../images/video.webp") center center no-repeat;
background-size: cover;
overflow: hidden;
min-height: 560px;
}
.vc-hero-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 36px;
padding: 56px 20px 72px;
text-align: center;
}
.vc-hero-title {
font-size: clamp(40px, 5vw, 64px);
font-weight: 700;
line-height: 1.2;
letter-spacing: 2px;
color: var(--color-bg);
margin: 0;
text-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
.vc-hero-desc {
margin: 0;
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
max-width: 560px;
}
.vc-hero-inner .vc-hero-desc {
margin-top: -20px;
}
.vc-hero-featured {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
width: 100%;
max-width: 920px;
perspective: 900px;
}
.vc-hero-feat {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
flex: 0 0 auto;
width: 280px;
height: 158px;
border-radius: 10px;
overflow: hidden;
background-color: rgba(20, 24, 48, 0.55);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
text-decoration: none;
transition: transform var(--transition), box-shadow var(--transition);
}
.vc-hero-feat::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(20, 30, 80, 0.15) 0%, rgba(10, 16, 48, 0.65) 100%);
pointer-events: none;
}
.vc-hero-feat--1 {
transform: rotateY(18deg) scale(0.92);
opacity: 0.88;
}
.vc-hero-feat--2 {
width: 400px;
height: 225px;
z-index: 2;
transform: none;
}
.vc-hero-feat--3 {
transform: rotateY(-18deg) scale(0.92);
opacity: 0.88;
}
.vc-hero-feat:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
opacity: 1;
z-index: 3;
}
.vc-hero-feat--1:hover {
transform: rotateY(10deg) translateY(-4px) scale(0.96);
}
.vc-hero-feat--3:hover {
transform: rotateY(-10deg) translateY(-4px) scale(0.96);
}
.vc-hero-feat-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
opacity: 0.95;
}
.vc-hero-feat--1 .vc-hero-feat-play,
.vc-hero-feat--3 .vc-hero-feat-play {
transform: translate(-50%, -50%) scale(0.75);
opacity: 0.7;
}
.vc-hero-feat-title {
position: relative;
z-index: 2;
display: block;
width: 100%;
padding: 10px 12px;
font-size: 13px;
font-weight: 600;
color: #fff;
line-height: 1.35;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* --- Toolbar / Filters --- */
.vc-toolbar-wrap {
position: relative;
z-index: 2;
margin-top: -24px;
padding: 0 0 24px;
}
.vc-toolbar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 20px;
}
.vc-filters {
display: flex;
flex: 1;
flex-wrap: wrap;
align-items: center;
gap: 10px;
min-width: 0;
}
.vc-filter-btn {
display: inline-flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
padding: 10px 24px;
font-size: 14px;
color: var(--color-555);
background: var(--color-bg);
border: 1px solid var(--color-f3e8ff);
border-radius: 6px;
white-space: nowrap;
transition: all var(--transition);
}
.vc-filter-btn .icon-placeholder {
flex-shrink: 0;
color: var(--color-888);
}
.vc-filter-btn:hover {
color: var(--vc-purple);
border-color: var(--color-rgba-108-85-216-35);
background: var(--color-rgba-108-85-216-4);
}
.vc-filter-btn:hover .icon-placeholder {
color: var(--vc-purple);
}
.vc-filter-btn.is-active {
color: var(--color-bg);
background: var(--vc-purple);
border-color: var(--vc-purple);
box-shadow: 0 2px 10px var(--color-rgba-108-85-216-30);
}
.vc-filter-btn.is-active .icon-placeholder {
color: var(--color-bg);
}
.vc-sort {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 4px;
}
.vc-sort-btn {
padding: 8px 14px;
font-size: 13px;
color: var(--color-777);
border-radius: 4px;
text-decoration: none;
transition: color var(--transition), background var(--transition);
}
.vc-sort-btn:hover {
color: var(--vc-purple);
}
.vc-sort-btn.is-active {
color: var(--vc-purple);
font-weight: 600;
background: rgba(108, 85, 216, 0.08);
}
/* --- Video Grid --- */
.vc-list-section {
padding: 0 0 64px;
background: none;
}
.vc-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.vc-card {
display: flex;
flex-direction: column;
background: var(--color-bg);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 12px var(--color-rgba-0-0-0-5);
transition: box-shadow var(--transition), transform var(--transition);
}
.vc-card:hover {
box-shadow: 0 8px 28px var(--color-rgba-0-0-0-10);
transform: translateY(-2px);
}
.vc-card.is-hidden {
display: none;
}
.vc-card-thumb {
position: relative;
display: block;
overflow: hidden;
}
.vc-thumb-cover {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: auto;
min-height: 0;
aspect-ratio: 16 / 9;
padding: 0;
background-color: #1a2a5c;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.vc-thumb-cover::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(30, 60, 140, 0.35) 0%, rgba(20, 40, 100, 0.55) 100%);
pointer-events: none;
}
.vc-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
transition: transform var(--transition);
pointer-events: none;
opacity: 0.92;
}
.vc-card:hover .vc-play-btn {
transform: translate(-50%, -50%) scale(1.08);
opacity: 1;
}
.vc-card-thumb:hover .vc-thumb-cover::after {
background: linear-gradient(180deg, rgba(30, 60, 140, 0.28) 0%, rgba(20, 40, 100, 0.62) 100%);
}
.vc-card-body {
padding: 15px 15px 10px;
}
.vc-card-title {
font-size: 18px;
font-weight: 400;
color: var(--color-1a1a2e);
line-height: 1.5;
margin: 0 0 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 15px;
border-bottom: 1px solid var(--color-f3e8ff);
}
.vc-card-title a:hover {
color: var(--vc-purple);
}
.vc-card-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 12px;
font-size: 12px;
color: var(--color-text-muted);
}
.vc-meta-right {
display: inline-flex;
align-items: center;
gap: 12px;
margin-left: auto;
}
.vc-tag {
display: inline-flex;
align-items: center;
padding: 2px 10px;
font-size: 12px;
font-weight: 500;
border-radius: 3px;
line-height: 1.5;
border: 1px solid transparent;
}
.vc-tag--purple {
color: var(--vc-tag-purple);
background: var(--vc-tag-purple-bg);
border-color: rgba(108, 85, 216, 0.25);
}
.vc-tag--red {
color: var(--vc-tag-red);
background: transparent;
border-color: var(--vc-tag-red);
}
.vc-tag--green {
color: var(--vc-tag-green);
background: var(--vc-tag-green-bg);
border-color: rgba(52, 168, 100, 0.25);
}
.vc-tag--yellow {
color: var(--vc-tag-yellow);
background: var(--vc-tag-yellow-bg);
border-color: rgba(212, 146, 10, 0.3);
}
.vc-meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
line-height: 1.4;
}
.vc-pagination {
border-top: none;
margin-top: 32px;
padding-top: 8px;
}
.vc-pagination .nc-page-btns > a,
.vc-pagination .nc-page-btns li > a {
min-width: 32px;
height: 32px;
border: none;
background: transparent;
border-radius: 4px;
}
.vc-pagination .nc-page-btns > a:hover,
.vc-pagination .nc-page-btns li > a:hover {
color: var(--vc-purple);
background: rgba(108, 85, 216, 0.08);
}
.vc-pagination .nc-page-btns > a.on,
.vc-pagination .nc-page-btns > a.thisclass,
.vc-pagination .nc-page-btns > a.active,
.vc-pagination .nc-page-btns li > a.on,
.vc-pagination .nc-page-btns li > a.thisclass {
color: #fff;
background: var(--vc-purple);
box-shadow: none;
}
.vc-meta-item .icon-placeholder {
flex-shrink: 0;
opacity: 0.65;
}
.vc-filter-btn.is-active .vc-filter-one {
background-position: -379px -618px;
}
.vc-filter-btn.is-active .vc-filter-two {
background-position: -420px -619px;
}
.vc-filter-btn.is-active .vc-filter-three {
background-position: -213px -659px;
}
.vc-filter-btn.is-active .vc-filter-four {
background-position: -686px -452px;
}
.vc-filter-btn.is-active .vc-filter-five {
background-position: -462px -619px;
}
.vc-filter-one {
background-position: -256px -618px;
width: 21px;
height: 20px;
}
.vc-filter-two {
background-position: -297px -619px;
width: 21px;
height: 18px;
}
.vc-filter-three {
background-position: -172px -659px;
width: 18px;
height: 19px;
}
.vc-filter-four {
background-position: -686px -412px;
width: 18px;
height: 17px;
}
.vc-filter-five {
background-position: -339px -619px;
width: 19px;
height: 19px;
}
.vc-play-one {
background-position: -573px -13px;
width: 46px;
height: 46px;
display: block;
}
.vc-meta-one {
background-position: -614px -143px;
width: 10px;
height: 10px;
}
.vc-meta-two {
background-position: -614px -189px;
width: 10px;
height: 8px;
}
.vc-empty {
padding: 48px 20px;
text-align: center;
font-size: 15px;
color: var(--color-text-muted);
}
/* --- Video modal (mask + centered player) --- */
body.vc-modal-open {
overflow: hidden;
}
.vc-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 16px;
}
.vc-modal[hidden] {
display: none;
}
.vc-modal-mask {
position: absolute;
inset: 0;
background: rgba(10, 12, 24, 0.62);
cursor: pointer;
}
.vc-modal-dialog {
position: relative;
z-index: 1;
width: min(920px, 100%);
background: #fff;
border-radius: 10px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
overflow: hidden;
animation: vc-modal-in 0.28s ease;
}
@keyframes vc-modal-in {
from {
opacity: 0;
transform: translateY(12px) scale(0.98);
}
to {
opacity: 1;
transform: none;
}
}
.vc-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.vc-modal-title {
margin: 0;
font-size: 16px;
font-weight: 600;
line-height: 1.4;
color: var(--color-1a1a2e, #1a1a2e);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vc-modal-close {
flex-shrink: 0;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 6px;
background: transparent;
color: #222;
font-size: 28px;
line-height: 1;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.vc-modal-close:hover {
background: rgba(0, 0, 0, 0.06);
color: #000;
}
.vc-modal-body {
padding: 0;
}
.vc-modal-player {
position: relative;
width: 100%;
background: #0b0b14;
aspect-ratio: 16 / 9;
}
.vc-modal-player video {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
vertical-align: middle;
}
@media (max-width: 640px) {
.vc-modal {
padding: 12px;
align-items: flex-start;
padding-top: 10vh;
}
.vc-modal-header {
padding: 12px 14px;
}
.vc-modal-title {
font-size: 15px;
}
}
/* --- Video detail --- */
.vd-article {
padding: 24px 0 48px;
background: var(--color-bg);
}
.vd-article-inner {
max-width: 960px;
}
.vd-article-header {
margin-bottom: 24px;
}
.vd-article-title {
font-size: clamp(22px, 3vw, 30px);
font-weight: 700;
color: var(--color-1a1a2e);
line-height: 1.35;
margin-bottom: 14px;
}
.vd-article-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
font-size: 13px;
color: var(--color-text-muted);
}
.vd-meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.vd-meta-tag {
padding: 2px 10px;
border-radius: 4px;
background: var(--vc-tag-purple-bg);
color: var(--vc-tag-purple);
font-weight: 500;
}
.vd-player-wrap {
position: relative;
width: 100%;
border-radius: 12px;
overflow: hidden;
background: #0b0b14;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
margin-bottom: 28px;
}
.vd-player {
display: block;
width: 100%;
height: auto;
max-height: 72vh;
vertical-align: middle;
background: #000;
aspect-ratio: 16 / 9;
object-fit: contain;
}
.vd-article-body {
font-size: 15px;
line-height: 1.8;
color: var(--color-444);
margin-bottom: 32px;
}
.vd-article-body p {
margin-bottom: 12px;
}
.vd-article-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.vd-nav-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 18px;
border: 1px solid var(--color-border);
border-radius: 10px;
background: var(--color-bg);
transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.vd-nav-card:hover {
border-color: var(--vc-purple-light);
box-shadow: 0 6px 18px rgba(108, 85, 216, 0.1);
transform: translateY(-1px);
}
.vd-nav-card--next {
text-align: right;
}
.vd-nav-card.is-disabled {
opacity: 0.55;
pointer-events: none;
}
.vd-nav-label {
font-size: 12px;
color: var(--color-text-muted);
}
.vd-nav-title {
font-size: 14px;
font-weight: 600;
color: var(--color-1a1a2e);
line-height: 1.45;
}
.vd-related {
padding: 8px 0 56px;
background: var(--color-bg);
}
.vd-related-title {
font-size: 22px;
font-weight: 700;
color: var(--color-1a1a2e);
margin-bottom: 22px;
}
@media (max-width: 768px) {
.vd-article-nav {
grid-template-columns: 1fr;
}
.vd-nav-card--next {
text-align: left;
}
.vd-player {
max-height: none;
}
}
/* --- Footer overrides --- */
.footer-main--video {
grid-template-columns: 1.4fr repeat(4, 1fr) 1.4fr;
}
.footer-solutions-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 12px;
}
.footer-qr-title {
font-size: 15px;
font-weight: 600;
margin-bottom: 14px;
color: var(--color-text);
}
.footer-qr--shops .footer-qr-row {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.footer-qr--shops .qr-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.footer-qr--shops .qr-item span {
font-size: 11px;
color: var(--color-text-light);
}
.qr-shop-btn {
display: inline-block;
padding: 3px 12px;
font-size: 11px;
color: var(--color-bg);
background: var(--color-primary);
border-radius: 12px;
transition: background var(--transition);
}
.qr-shop-btn:hover {
background: var(--color-primary-dark);
}
/* --- Responsive --- */
@media (min-width: 576px) {
.vc-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.vc-hero-inner {
padding: 64px 20px 80px;
}
.vc-toolbar {
padding: 16px 24px;
}
.vc-toolbar-wrap {
padding-top: 28px;
padding-bottom: 28px;
}
.vc-list-section {
padding-bottom: 72px;
}
}
@media (min-width: 1024px) {
.vc-grid {
grid-template-columns: repeat(3, 1fr);
gap: 28px 24px;
}
.vc-toolbar-wrap {
padding-top: 32px;
}
}
@media (max-width: 1200px) {
.footer-main--video {
grid-template-columns: repeat(3, 1fr);
}
.footer-qr--shops {
grid-column: 1 / -1;
}
.footer-qr--shops .footer-qr-row {
justify-content: center;
}
}
@media (max-width: 767px) {
.page-video .header-tools .tool-btn:nth-child(4) {
display: none;
}
.vc-toolbar {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.vc-filters {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px;
}
.vc-filters::-webkit-scrollbar {
display: none;
}
.vc-sort {
justify-content: flex-end;
}
.vc-hero-featured {
gap: 10px;
}
.vc-hero-feat {
width: 160px;
height: 90px;
}
.vc-hero-feat--2 {
width: 220px;
height: 124px;
}
.vc-hero {
min-height: 420px;
}
.vc-hero-feat--1,
.vc-hero-feat--3 {
transform: none;
}
.footer-main--video {
grid-template-columns: 1fr 1fr;
}
.footer-brand,
.footer-qr--shops {
grid-column: 1 / -1;
}
.footer-solutions-cols {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.vc-grid {
grid-template-columns: 1fr;
}
.footer-main--video {
grid-template-columns: 1fr;
}
}
/* ===== product-detail.css ===== */
/* ========================================
Product Detail Page - ????
======================================== */
.page-product {
--product-purple: var(--color-8e71f1);
--product-purple-dark: var(--color-7a5de0);
--product-purple-light: var(--color-f3efff);
--product-purple-row: var(--color-f8f6ff);
--product-bg: var(--color-f5f6f8);
}
/* --- Hero --- */
.product-hero {
position: relative;
background: linear-gradient(105deg, var(--color-f4f0ff) 0%, var(--color-ebe4ff) 42%, var(--color-e6d9fb) 72%, var(--color-ddd0f8) 100%);
padding: 28px 0 48px;
color: var(--color-5b3bb8);
overflow: hidden;
}
.product-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 60% at 85% 40%, var(--color-rgba-142-113-241-12), transparent 70%),
radial-gradient(ellipse 40% 50% at 10% 80%, var(--color-rgba-196-181-253-35), transparent 65%);
pointer-events: none;
}
.product-hero-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
}
.product-hero-content {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 40px;
align-items: center;
}
.product-hero-title-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.product-hero-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
border-radius: 6px;
line-height: 1.4;
animation: product-badge-pop 0.6s ease both;
}
.product-hero-badge--hot {
background: linear-gradient(135deg, var(--color-ffe066) 0%, var(--color-ffc107) 100%);
color: var(--color-8a5a00);
box-shadow: 0 2px 8px var(--color-rgba-255-193-7-40);
}
@keyframes product-badge-pop {
from { opacity: 0; transform: scale(0.7) translateY(-4px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.product-hero-title {
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
line-height: 1.2;
margin: 0;
color: var(--color-5b3bb8);
letter-spacing: -0.02em;
}
.product-hero-subtitle {
font-size: 17px;
font-weight: 600;
color: var(--color-6d4fd0);
margin-bottom: 8px;
}
.product-hero-core-params {
font-size: 13px;
color: var(--color-8b75c9);
margin-bottom: 14px;
letter-spacing: 0.3px;
}
.product-hero-desc {
font-size: 14px;
line-height: 1.85;
color: var(--color-6f5a9e);
margin-bottom: 24px;
max-width: 540px;
}
.product-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 22px;
}
.ph-icon {
flex-shrink: 0;
display: block;
}
.btn-product-buy {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 26px;
font-size: 14px;
font-weight: 600;
color: var(--color-bg);
background: linear-gradient(135deg, var(--color-9b7ff5) 0%, var(--color-8e71f1) 50%, var(--color-7a5de0) 100%);
border: none;
border-radius: 10px;
box-shadow: 0 6px 18px var(--color-rgba-142-113-241-35);
transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.btn-product-buy::before {
content: "";
width: 14px;
height: 14px;
flex-shrink: 0;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.btn-product-buy:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px var(--color-rgba-142-113-241-45);
filter: brightness(1.05);
color: var(--color-bg);
}
.btn-product-buy:active {
transform: translateY(0);
}
.btn-product-outline {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 22px;
font-size: 14px;
font-weight: 500;
color: var(--product-purple);
background: var(--color-bg);
border: 1.5px solid var(--color-rgba-142-113-241-45);
border-radius: 10px;
box-shadow: 0 2px 8px var(--color-rgba-142-113-241-8);
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.btn-product-outline:hover {
background: var(--product-purple-light);
border-color: var(--product-purple);
transform: translateY(-2px);
box-shadow: 0 6px 16px var(--color-rgba-142-113-241-18);
color: var(--product-purple-dark);
}
.product-hero-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.product-hero-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
font-size: 13px;
font-weight: 500;
background: var(--color-f3e8ff);
border-radius: 999px;
color: var(--color-6d4fd0);
box-shadow: 0 2px 10px var(--color-rgba-142-113-241-10);
border: 1px solid var(--color-rgba-142-113-241-12);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.product-hero-tag .ph-icon {
color: var(--product-purple);
}
.product-hero-tag:hover {
transform: translateY(-2px) scale(1.03);
box-shadow: 0 6px 16px var(--color-rgba-142-113-241-20);
border-color: var(--color-rgba-142-113-241-35);
}
.product-hero-gallery {
position: relative;
text-align: center;
}
.product-hero-services {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
}
.gongyingji {
background-position: -10px -366px;
width: 15px;
height: 15px;
display: inline-block;
flex-shrink: 0;
background-repeat: no-repeat;
}
.product-service-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 12px;
font-weight: 500;
color: var(--color-6d4fd0);
background: var(--color-bg);
border-radius: 8px;
box-shadow: 0 2px 10px var(--color-rgba-142-113-241-12);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.product-service-tag .ph-icon {
color: var(--product-purple);
}
.product-service-tag:hover {
transform: translateY(-2px);
box-shadow: 0 6px 14px var(--color-rgba-142-113-241-20);
}
.product-hero-carousel {
position: relative;
margin-bottom: 14px;
}
.product-hero-prev,
.product-hero-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg);
border: none;
border-radius: 50%;
color: var(--product-purple);
cursor: pointer;
box-shadow: 0 4px 14px var(--color-rgba-91-59-184-18);
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
z-index: 10;
}
.product-hero-prev {
left: -8px;
}
.product-hero-next {
right: -8px;
}
.product-hero-prev:hover,
.product-hero-next:hover {
background: var(--color-bg);
box-shadow: 0 8px 20px var(--color-rgba-91-59-184-28);
transform: translateY(-50%) scale(1.08);
color: var(--product-purple-dark);
}
.product-hero-main-img {
background: transparent;
border-radius: 16px;
padding: 12px 36px;
min-height: 260px;
display: flex;
align-items: center;
justify-content: center;
}
.product-hero-main-img img {
max-height: 400px;
max-width: 100%;
margin: 0 auto;
object-fit: contain;
filter: drop-shadow(0 12px 28px var(--color-rgba-91-59-184-18));
transition: opacity 0.35s ease, transform 0.35s ease;
}
.product-hero-main-img img.is-fading {
opacity: 0;
transform: scale(0.96);
}
.product-hero-thumbs-row {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
}
.product-hero-thumbs {
display: flex;
justify-content: center;
gap: 10px;
}
.product-hero-thumb {
width: 58px;
height: 58px;
padding: 4px;
background: var(--color-bg);
border: 2px solid transparent;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 2px 8px var(--color-rgba-142-113-241-10);
transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.product-hero-thumb.is-active {
border-color: var(--product-purple);
box-shadow: 0 4px 12px var(--color-rgba-142-113-241-25);
transform: translateY(-2px);
}
.product-hero-thumb:hover {
border-color: var(--color-rgba-142-113-241-55);
transform: translateY(-2px);
}
.pro-sub{
background-position: -45px -366px;
width: 14px;
height: 14px;
display: block;
}
.product-hero-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 6px;
}
.product-hero-zoom {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg);
border: none;
border-radius: 50%;
color: var(--product-purple);
cursor: pointer;
box-shadow: 0 4px 14px var(--color-rgba-91-59-184-18);
transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
flex-shrink: 0;
}
.product-hero-zoom:hover {
transform: scale(1.1);
box-shadow: 0 8px 20px var(--color-rgba-91-59-184-28);
color: var(--product-purple-dark);
}
.product-zoom-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-rgba-40-25-80-78);
backdrop-filter: blur(6px);
padding: 24px;
animation: product-zoom-in 0.28s ease;
}
.product-zoom-lightbox[hidden] {
display: none;
}
@keyframes product-zoom-in {
from { opacity: 0; }
to { opacity: 1; }
}
.product-zoom-lightbox img {
max-width: min(90vw, 900px);
max-height: 85vh;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 20px 60px var(--color-rgba-0-0-0-35);
animation: product-zoom-img 0.35s ease;
}
@keyframes product-zoom-img {
from { opacity: 0; transform: scale(0.92); }
to { opacity: 1; transform: scale(1); }
}
.product-zoom-close {
position: absolute;
top: 20px;
right: 28px;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: var(--color-rgba-255-255-255-95);
color: var(--color-5b3bb8);
font-size: 28px;
line-height: 1;
cursor: pointer;
box-shadow: 0 4px 16px var(--color-rgba-0-0-0-20);
transition: transform 0.2s ease;
}
.product-zoom-close:hover {
transform: scale(1.08);
}
/* --- Tab Nav --- */
.product-tabs {
background: var(--color-bg);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: var(--header-height);
z-index: 80;
}
.product-tabs-inner {
display: flex;
justify-content: center;
gap: 0;
}
.product-tab {
padding: 16px 36px;
font-size: 15px;
font-weight: 500;
color: var(--color-text-light);
border-bottom: 3px solid transparent;
transition: color var(--transition), border-color var(--transition);
}
.product-tab:hover {
color: var(--product-purple);
}
.product-tab.is-active {
color: var(--product-purple);
border-bottom-color: var(--product-purple);
}
/* --- Spec Content Area --- */
.product-spec-area {
background: var(--product-bg);
padding: 40px 0 64px;
}
.product-spec-stack {
display: flex;
flex-direction: column;
gap: 24px;
}
.product-spec-card {
background: var(--color-bg);
border-radius: 12px;
padding: 28px 32px 32px;
box-shadow: 0 2px 12px var(--color-rgba-0-0-0-4);
}
.product-spec-card-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
}
.product-spec-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
display: inline-block;
border-radius: 6px;
color: var(--color-bg);
background-repeat: no-repeat;
}
.spec-a {
background-position: -571px -234px;
width: 22px;
height: 22px;
display: block;
background-repeat: no-repeat;
}
.spec-b {
background-position: -571px -144px;
width: 22px;
height: 22px;
display: block;
}
.spec-c {
background-position: -570px -190px;
width: 22px;
height: 22px;
display: block;
}
.product-spec-icon--round {
border-radius: 50%;
}
.product-spec-card-header h2 {
font-size: 18px;
font-weight: 700;
color: var(--color-1a1a2e);
}
/* --- Params Table --- */
.product-params-table-wrap {
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--color-ede9fe);
}
.product-params-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.product-params-table thead th {
padding: 14px 24px;
text-align: left;
font-weight: 600;
font-size: 15px;
color: var(--color-bg);
background: var(--product-purple);
}
.product-params-table thead th:first-child {
width: 28%;
}
.product-params-table tbody tr:nth-child(odd) {
background: var(--product-purple-row);
}
.product-params-table tbody tr:nth-child(even) {
background: var(--color-bg);
}
.product-params-table tbody td {
padding: 13px 24px;
color: var(--color-text);
line-height: 1.6;
border-bottom: 1px solid var(--color-f0ecff);
}
.product-params-table tbody tr:last-child td {
border-bottom: none;
}
.product-params-table tbody td:first-child {
font-weight: 500;
color: var(--color-text);
}
/* --- Dimensions --- */
.product-dimensions-body {
text-align: center;
}
.product-dimensions-body img {
max-width: 100%;
margin: 0 auto 20px;
object-fit: contain;
}
.product-dimensions-legend {
display: flex;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
}
.product-dimensions-legend span {
font-size: 14px;
color: var(--color-text-light);
}
.product-dimensions-legend strong {
color: var(--product-purple);
font-weight: 600;
}
/* --- Product List --- */
.product-list-body {
display: flex;
align-items: center;
gap: 32px;
}
.product-list-img {
flex-shrink: 0;
width: 200px;
padding: 16px;
background: var(--product-purple-row);
border-radius: 10px;
}
.product-list-img img {
object-fit: contain;
}
.product-list-info h3 {
font-size: 16px;
font-weight: 600;
color: var(--color-1a1a2e);
margin-bottom: 8px;
}
.product-list-info p {
font-size: 14px;
color: var(--color-text-light);
line-height: 1.7;
}
/* --- Tab Panels (hidden) --- */
.product-panel {
display: none;
}
.product-panel.is-active {
display: block;
}
.product-panel-placeholder {
background: var(--color-bg);
border-radius: 12px;
padding: 60px 32px;
text-align: center;
color: var(--color-text-muted);
font-size: 15px;
}
/* --- Download Card --- */
.product-download-card {
background: var(--color-bg);
border-radius: 12px;
padding: 24px 28px 28px;
box-shadow: 0 2px 12px var(--color-rgba-0-0-0-4);
}
.product-download-card-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--color-f0ecff);
}
.product-download-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: var(--color-bg);
}
.down-a {
background-position: -571px -277px;
width: 22px;
height: 23px;
display: block;
}
.down-b {
background-position: -452px -432px;
width: 13px;
height: 13px;
display: block;
}
.product-download-card-header h2 {
font-size: 18px;
font-weight: 700;
color: var(--color-1a1a2e);
}
.product-download-table-wrap {
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--color-ede9fe);
}
.product-download-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.product-download-table thead th {
padding: 14px 20px;
text-align: left;
font-weight: 600;
font-size: 14px;
color: var(--color-bg);
background: var(--product-purple);
white-space: nowrap;
}
.product-download-table thead th.col-type {
width: 32%;
color: var(--color-bg);
}
.product-download-table thead th.col-name {
width: 28%;
color: var(--color-bg);
}
.product-download-table thead th.col-size {
width: 12%;
text-align: center;
color: var(--color-bg);
}
.product-download-table thead th.col-date {
width: 14%;
text-align: center;
color: var(--color-bg);
}
.product-download-table thead th.col-action {
width: 14%;
text-align: center;
color: var(--color-bg);
}
.product-download-table tbody tr {
border-bottom: 1px solid var(--color-f0ecff);
transition: background var(--transition);
}
.product-download-table tbody tr:last-child {
border-bottom: none;
}
.product-download-table tbody tr:nth-child(odd) {
background: var(--product-purple-row);
}
.product-download-table tbody tr:hover {
background: var(--color-efeaff);
}
.product-download-table tbody td {
padding: 16px 20px;
color: var(--color-text);
line-height: 1.5;
vertical-align: middle;
}
.product-download-table .col-type {
display: table-cell;
}
.download-type-cell {
display: flex;
align-items: center;
gap: 10px;
}
.download-type-icon {
display: inline-block;
flex-shrink: 0;
vertical-align: middle;
}
.download-type-icon--doc {
background-position: -726px -12px;
width: 17px;
height: 18px;
}
.download-type-icon--software {
background-position: -725px -450px;
width: 14px;
height: 18px;
}
.download-type-icon--code {
background-position: -725px -488px;
width: 14px;
height: 18px;
}
.download-type-text {
display: inline-block;
vertical-align: middle;
line-height: 1.3;
}
.download-type-text strong {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--color-1a1a2e);
}
.download-type-text span {
display: block;
font-size: 12px;
color: var(--color-text-muted);
margin-top: 2px;
}
.product-download-table .col-name {
color: var(--color-text);
font-weight: 500;
}
.product-download-table .col-size {
color: var(--color-text-light);
white-space: nowrap;
text-align: center;
}
.product-download-table .col-date {
color: var(--color-text-light);
white-space: nowrap;
text-align: center;
}
.product-download-table .col-action {
text-align: center;
}
.btn-download {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 18px;
font-size: 13px;
font-weight: 500;
color: var(--color-bg);
background: var(--product-purple);
border-radius: 18px;
transition: background var(--transition), transform var(--transition);
white-space: nowrap;
}
.btn-download:hover {
background: var(--product-purple-dark);
transform: translateY(-1px);
}
.btn-download .icon-placeholder {
flex-shrink: 0;
}
.product-list-name-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
font-size: 14px;
font-weight: 600;
color: var(--product-purple);
background: var(--product-purple-light);
border-radius: 8px;
}
.product-list-standard {
font-size: 14px;
color: var(--color-text-light);
line-height: 1.7;
}
/* --- Order --- */
.product-order-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: start;
}
.product-order-col {
background: var(--color-bg);
border-radius: 12px;
padding: 28px 32px 32px;
box-shadow: 0 2px 12px var(--color-rgba-0-0-0-4);
}
.product-order-panel-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-f0ecff);
}
.product-order-panel-head h2 {
font-size: 18px;
font-weight: 700;
color: var(--color-1a1a2e);
}
.product-order-icon {
flex-shrink: 0;
display: inline-block;
background-repeat: no-repeat;
}
.product-order-section {
margin-bottom: 20px;
}
.product-order-section-title {
font-size: 14px;
font-weight: 600;
color: var(--color-1a1a2e);
margin-bottom: 12px;
}
.product-order-info-box {
padding: 4px 20px;
background: var(--product-purple-row);
border: 1px solid var(--color-ede9fe);
border-radius: 10px;
display: flex;
flex-direction: column;
}
.product-order-info-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--color-rgba-142-113-241-12);
}
.product-order-info-row:last-child {
border-bottom: none;
}
.product-order-info-label {
flex-shrink: 0;
font-size: 14px;
color: var(--color-text-light);
line-height: 1.5;
}
.product-order-info-content {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 4px 8px;
text-align: right;
font-size: 14px;
line-height: 1.5;
}
.product-order-info-content a {
color: var(--product-purple);
font-weight: 500;
text-decoration: none;
transition: color var(--transition);
}
.product-order-info-content a:hover {
color: var(--product-purple-dark);
}
.product-order-info-sep {
color: var(--product-purple);
}
.product-order-info-note {
font-size: 13px;
color: var(--product-purple);
}
.product-order-consult-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--product-purple);
font-weight: 500;
text-decoration: none;
transition: color var(--transition);
}
.product-order-consult-link .order-icon-consult-click {
margin-top: 1px;
}
.product-order-consult-link:hover {
color: var(--product-purple-dark);
}
.product-order-stores {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.product-order-store-card {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
padding: 16px 14px;
text-align: left;
background: var(--color-bg);
border: 1px solid var(--color-ede9fe);
border-radius: 10px;
text-decoration: none;
transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.product-order-store-card:hover {
border-color: var(--product-purple);
box-shadow: 0 4px 16px var(--color-rgba-142-113-241-12);
transform: translateY(-2px);
}
.product-order-store-icon {
flex-shrink: 0;
display: inline-block;
background-repeat: no-repeat;
}
.product-order-store-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.product-order-store-text strong {
font-size: 14px;
font-weight: 600;
color: var(--color-1a1a2e);
}
.product-order-store-text span {
font-size: 12px;
color: var(--color-text-muted);
}
.product-order-buy-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 8px;
padding: 14px 24px;
font-size: 15px;
font-weight: 600;
color: var(--color-bg);
background: var(--product-purple);
border-radius: 24px;
transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.product-order-buy-btn:hover {
background: var(--product-purple-dark);
transform: translateY(-1px);
box-shadow: 0 4px 16px var(--color-rgba-142-113-241-30);
}
/* Inquiry Form */
.product-inquiry-form {
display: flex;
flex-direction: column;
gap: 0;
}
.product-inquiry-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.product-inquiry-field {
display: block;
margin-bottom: 18px;
}
.product-inquiry-field--full {
grid-column: 1 / -1;
}
.product-inquiry-label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--color-text);
margin-bottom: 8px;
}
.product-inquiry-label em {
color: var(--color-ff4d4f);
font-style: normal;
}
.product-inquiry-field input,
.product-inquiry-field textarea {
width: 100%;
padding: 10px 14px;
font-size: 14px;
color: var(--color-text);
background: var(--color-bg);
border: 1px solid var(--color-e0e0e0);
border-radius: 8px;
transition: border-color var(--transition), box-shadow var(--transition);
font-family: inherit;
}
.product-inquiry-field input::placeholder,
.product-inquiry-field textarea::placeholder {
color: var(--color-bbb);
}
.product-inquiry-field input:focus,
.product-inquiry-field textarea:focus {
outline: none;
border-color: var(--product-purple);
box-shadow: 0 0 0 3px var(--color-rgba-142-113-241-12);
}
.product-inquiry-field textarea {
resize: vertical;
min-height: 120px;
line-height: 1.6;
}
.product-inquiry-submit {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px 24px;
font-size: 15px;
font-weight: 600;
color: var(--color-bg);
background: var(--product-purple);
border: none;
border-radius: 24px;
cursor: pointer;
transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.product-inquiry-submit:hover {
background: var(--product-purple-dark);
transform: translateY(-1px);
box-shadow: 0 4px 16px var(--color-rgba-142-113-241-30);
}
.product-inquiry-submit img {
flex-shrink: 0;
width: 18px;
height: 18px;
object-fit: cover;
border-radius: 3px;
}
.product-inquiry-submit .icon-placeholder {
flex-shrink: 0;
background: var(--color-rgba-255-255-255-85);
}
.product-inquiry-note {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 14px;
font-size: 12px;
color: var(--color-text-muted);
text-align: center;
line-height: 1.6;
}
.product-inquiry-note img {
width: 14px;
height: 14px;
object-fit: cover;
border-radius: 2px;
flex-shrink: 0;
}
/* --- FAQ --- */
.product-faq-card {
background: var(--color-bg);
border-radius: 12px;
padding: 28px 32px 36px;
box-shadow: 0 2px 12px var(--color-rgba-0-0-0-4);
}
.product-faq-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 22px;
}
.product-faq-title-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--product-purple);
color: var(--color-bg);
font-size: 16px;
font-weight: 700;
line-height: 1;
}
.product-faq-header h2 {
margin: 0;
font-size: 18px;
font-weight: 700;
color: var(--color-1a1a2e);
}
.product-faq-filters {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 28px;
}
.product-faq-filter {
padding: 9px 22px;
font-size: 14px;
font-weight: 500;
color: var(--product-purple);
background: var(--product-purple-light);
border: none;
border-radius: 8px;
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.product-faq-filter:hover {
color: var(--product-purple-dark);
background: var(--color-ebe4ff);
}
.product-faq-filter.is-active {
color: var(--color-bg);
background: var(--product-purple);
box-shadow: 0 4px 12px var(--color-rgba-142-113-241-28);
}
.product-faq-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.product-faq-item {
border: 1px solid var(--color-e6e0f5);
border-radius: 10px;
background: var(--color-f7f5fc);
overflow: hidden;
transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.product-faq-item.is-hidden {
display: none;
}
.product-faq-item.is-open {
border-color: var(--product-purple);
background: var(--color-bg);
box-shadow: 0 4px 16px var(--color-rgba-142-113-241-12);
}
.product-faq-question {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 16px 20px;
text-align: left;
background: transparent;
border: none;
cursor: pointer;
transition: background 0.2s ease;
}
.product-faq-item:not(.is-open) .product-faq-question:hover {
background: var(--color-f0ecfa);
}
.product-faq-item.is-open .product-faq-question {
background: var(--product-purple);
}
.product-faq-cat {
flex-shrink: 0;
padding: 4px 12px;
font-size: 12px;
font-weight: 600;
color: var(--product-purple);
background: var(--color-ede8ff);
border-radius: 6px;
line-height: 1.4;
}
.product-faq-item.is-open .product-faq-cat {
color: var(--product-purple);
background: var(--color-bg);
}
.product-faq-qtext {
flex: 1;
min-width: 0;
font-size: 15px;
font-weight: 500;
color: var(--color-222);
line-height: 1.5;
}
.product-faq-item.is-open .product-faq-qtext {
color: var(--color-bg);
font-weight: 600;
}
.product-faq-arrow {
flex-shrink: 0;
width: 20px;
height: 20px;
position: relative;
}
.product-faq-arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
border-right: 2px solid var(--product-purple);
border-bottom: 2px solid var(--product-purple);
transform: translate(-50%, -65%) rotate(45deg);
transition: transform 0.25s ease, border-color 0.2s ease;
}
.product-faq-item.is-open .product-faq-arrow::before {
border-color: var(--color-bg);
transform: translate(-50%, -35%) rotate(-135deg);
}
.product-faq-answer {
display: none;
padding: 20px 24px 22px;
font-size: 14px;
color: var(--color-444);
line-height: 1.85;
background: var(--color-bg);
}
.product-faq-item.is-open .product-faq-answer {
display: block;
}
.product-faq-answer ol {
margin: 0;
padding-left: 22px;
}
.product-faq-answer ol li {
margin-bottom: 6px;
}
.product-faq-answer ol li:last-child {
margin-bottom: 0;
}
.product-faq-answer p {
margin: 0;
}
.product-faq-answer p+p,
.product-faq-answer ol+p {
margin-top: 12px;
}
.product-faq-answer a {
color: var(--product-purple);
font-weight: 500;
}
.product-faq-answer a:hover {
text-decoration: underline;
}
/* --- Series Products --- */
.product-series-card {
background: var(--color-bg);
border-radius: 12px;
padding: 28px 32px 36px;
box-shadow: 0 2px 12px var(--color-rgba-0-0-0-4);
}
.product-series-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
}
.product-series-title-icon {
flex-shrink: 0;
width: 18px;
height: 18px;
background:
linear-gradient(var(--product-purple), var(--product-purple)) 0 0 / 7px 7px no-repeat,
linear-gradient(var(--product-purple), var(--product-purple)) right 0 / 7px 7px no-repeat,
linear-gradient(var(--product-purple), var(--product-purple)) 0 bottom / 7px 7px no-repeat,
linear-gradient(var(--product-purple), var(--product-purple)) right bottom / 7px 7px no-repeat;
}
.product-series-header h2 {
margin: 0;
font-size: 18px;
font-weight: 700;
color: var(--color-1a1a2e);
}
.product-series-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.product-series-item {
position: relative;
display: flex;
flex-direction: column;
background: var(--color-bg);
border: 1px solid var(--color-ece8f5);
border-radius: 12px;
overflow: hidden;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.product-series-item:hover {
border-color: var(--product-purple);
box-shadow: 0 6px 20px var(--color-rgba-142-113-241-14);
}
.product-series-badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
padding: 3px 10px;
font-size: 12px;
font-weight: 600;
border-radius: 4px;
line-height: 1.4;
}
.product-series-badge--hot {
background: var(--color-fff3e0);
color: var(--color-f59a23);
}
.product-series-badge--pro {
background: var(--color-efeaff);
color: var(--product-purple);
}
.product-series-badge--basic {
background: var(--color-e8f1ff);
color: var(--color-4a7fd4);
}
.product-series-img {
display: flex;
align-items: center;
justify-content: center;
padding: 28px 20px 16px;
min-height: 150px;
background: linear-gradient(180deg, var(--color-f6f3ff) 0%, var(--color-faf8ff) 100%);
}
.product-series-img img {
display: block;
width: auto;
max-width: 78%;
max-height: 120px;
height: auto;
object-fit: contain;
transition: transform 0.3s ease;
}
.product-series-item:hover .product-series-img img {
transform: scale(1.04);
}
.product-series-body {
flex: 1;
display: flex;
flex-direction: column;
padding: 16px 18px 18px;
background: var(--color-bg);
}
.product-series-spec {
margin: 0 0 8px;
font-size: 12px;
color: var(--product-purple);
line-height: 1.4;
}
.product-series-name {
margin: 0 0 6px;
font-size: 15px;
font-weight: 700;
color: var(--color-1a1a2e);
line-height: 1.4;
}
.product-series-desc {
margin: 0 0 16px;
font-size: 12px;
color: var(--color-text-muted);
line-height: 1.5;
}
.product-series-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
}
.product-series-price {
font-size: 18px;
font-weight: 700;
color: var(--product-purple);
line-height: 1;
}
.product-series-price em {
font-style: normal;
font-size: 13px;
font-weight: 600;
margin-right: 2px;
}
.product-series-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 14px;
font-size: 13px;
font-weight: 500;
color: var(--color-8752f4);
background-color: var(--color-faf5ff);
border-radius: 6px;
transition:
color 0.22s ease,
background 0.22s ease,
padding 0.22s ease,
box-shadow 0.22s ease;
}
.product-series-item:hover .product-series-link {
padding: 0 14px;
color: var(--color-bg);
background: var(--product-purple);
box-shadow: 0 4px 10px var(--color-rgba-142-113-241-28);
}
.product-series-link:hover {
color: var(--color-bg);
background: var(--product-purple-dark);
}
/* --- Responsive --- */
@media (max-width: 1024px) {
.product-hero-content {
grid-template-columns: 1fr;
gap: 32px;
}
.product-hero-gallery {
order: -1;
}
.product-hero-services {
justify-content: center;
}
.product-hero-prev {
left: 0;
}
.product-hero-next {
right: 0;
}
.product-order-layout {
grid-template-columns: 1fr;
}
.product-series-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.product-hero-prev {
left: 0;
}
.product-hero-next {
right: 0;
}
.product-tabs-inner {
overflow-x: auto;
justify-content: flex-start;
-webkit-overflow-scrolling: touch;
}
.product-tab {
padding: 14px 20px;
white-space: nowrap;
font-size: 14px;
}
.product-spec-card {
padding: 20px 16px 24px;
}
.product-params-table thead th,
.product-params-table tbody td {
padding: 10px 14px;
font-size: 13px;
}
.product-list-body {
flex-direction: column;
text-align: center;
}
.product-dimensions-legend {
gap: 16px;
}
.product-hero-tags {
gap: 8px;
}
.product-hero-tag {
padding: 5px 11px;
font-size: 12px;
}
.product-hero-actions {
gap: 8px;
}
.btn-product-buy,
.btn-product-outline {
padding: 9px 16px;
font-size: 13px;
}
.product-hero-main-img {
padding: 8px 28px;
min-height: 200px;
}
.product-hero-main-img img {
max-height: 220px;
}
.product-download-card {
padding: 18px 14px 20px;
}
.product-download-card-header h2 {
font-size: 16px;
}
.product-download-table thead th {
padding: 10px 12px;
font-size: 13px;
color: var(--color-bg);
}
.product-download-table tbody td {
padding: 10px 12px;
font-size: 13px;
}
.product-download-table thead th.col-name,
.product-download-table tbody td.col-name {
display: none;
}
.product-download-table thead th.col-type {
width: 50%;
}
.product-download-table thead th.col-size {
width: 18%;
}
.product-download-table thead th.col-date {
width: 18%;
}
.product-download-table thead th.col-action {
width: 14%;
}
}
@media (max-width: 480px) {
.product-params-table thead th:first-child {
width: 36%;
}
.product-hero-services {
gap: 6px;
}
.product-service-tag {
padding: 4px 8px;
font-size: 11px;
}
.product-hero-thumbs-row {
gap: 8px;
}
.product-hero-thumb {
width: 48px;
height: 48px;
}
.product-hero-zoom {
width: 36px;
height: 36px;
}
.product-download-table thead th.col-date,
.product-download-table tbody td.col-date {
display: none;
}
.product-download-table thead th.col-type {
width: 60%;
}
.product-download-table thead th.col-size {
width: 22%;
}
.product-download-table thead th.col-action {
width: 18%;
}
.btn-download {
padding: 6px 12px;
font-size: 12px;
}
.product-faq-card,
.product-series-card,
.product-order-col {
padding: 20px 16px 24px;
}
.product-faq-filters {
gap: 8px;
margin-bottom: 20px;
}
.product-faq-filter {
padding: 8px 14px;
font-size: 13px;
}
.product-faq-question {
flex-wrap: wrap;
gap: 10px;
padding: 14px 16px;
}
.product-faq-cat {
order: -1;
}
.product-faq-qtext {
flex: 1 1 calc(100% - 36px);
padding-right: 8px;
font-size: 14px;
}
.product-faq-arrow {
position: absolute;
top: 18px;
right: 16px;
}
.product-faq-item {
position: relative;
}
.product-faq-answer {
padding: 16px;
}
.product-series-grid {
grid-template-columns: 1fr;
}
.product-order-stores {
grid-template-columns: 1fr;
}
}
/* --- ??????--- */
.img-placeholder,
.icon-placeholder {
display: inline-block;
background: var(--color-border);
object-fit: cover;
color: transparent;
}
.icon-placeholder {
background: var(--color-d0d5dd);
border-radius: 4px;
vertical-align: middle;
}
img[src*="placeholder.png"] {
background: var(--color-border);
}
.tool-btn .icon-placeholder {
flex-shrink: 0;
}
/* ===== solutions.css ===== */
/* ========================================
瑙ｅ喅鏂规 - 搴旂敤琛屼笟
======================================== */
.page-solutions {
--sc-purple: var(--color-6c55d8);
--sc-purple-dark: var(--color-5544c0);
--sc-purple-light: var(--color-8b7ae8);
--sc-hero-start: var(--color-eef4ff);
--sc-hero-mid: var(--color-f0ebff);
--sc-hero-end: var(--color-e8f0ff);
}
.page-solutions .nav-item.is-active>a {
color: var(--sc-purple);
}
.page-solutions .nav-item.is-active>a::after {
background: var(--sc-purple);
}
/* --- Hero --- */
.sc-hero {
position: relative;
background: var(--color-babbfc) url(../images/f1.webp) no-repeat center center;
background-size: cover;
overflow: hidden;
min-height: 500px;
}
.sc-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 75% 35%, var(--color-rgba-108-85-216-14) 0%, transparent 55%),
radial-gradient(circle at 20% 70%, var(--color-rgba-100-160-255-10) 0%, transparent 45%);
pointer-events: none;
}
.sc-hero-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
padding: 48px 20px 44px;
max-width: var(--container-width);
margin: 0 auto;
}
.sc-hero-title {
font-size: clamp(36px, 5vw, 52px);
font-weight: 700;
color: var(--color-1a1a2e);
line-height: 1.15;
margin-bottom: 14px;
letter-spacing: 2px;
}
.sc-hero-accent {
color: var(--sc-purple);
}
.sc-hero-desc {
font-size: 16px;
font-weight: 500;
color: var(--color-text-light);
line-height: 1.7;
max-width: 420px;
}
.sc-hero-visual {
display: flex;
justify-content: flex-end;
align-items: center;
}
.sc-hero-illust {
position: relative;
width: 100%;
max-width: 420px;
aspect-ratio: 1.15;
}
.sc-illust-panel {
position: absolute;
border-radius: 12px;
background: var(--color-rgba-255-255-255-75);
backdrop-filter: blur(8px);
border: 1px solid var(--color-rgba-108-85-216-15);
box-shadow: 0 8px 32px var(--color-rgba-108-85-216-12);
}
.sc-illust-panel--1 {
width: 140px;
height: 100px;
top: 8%;
right: 5%;
transform: rotate(6deg);
z-index: 3;
}
.sc-illust-panel--2 {
width: 120px;
height: 90px;
top: 35%;
right: 38%;
transform: rotate(-8deg);
z-index: 2;
}
.sc-illust-panel--3 {
width: 110px;
height: 85px;
top: 55%;
right: 12%;
transform: rotate(4deg);
z-index: 1;
}
.sc-illust-chart {
position: absolute;
inset: 12px;
}
.sc-illust-chart--bar {
display: flex;
align-items: flex-end;
gap: 6px;
justify-content: center;
height: 100%;
}
.sc-illust-chart--bar::before,
.sc-illust-chart--bar::after {
content: "";
display: block;
border-radius: 3px 3px 0 0;
background: linear-gradient(180deg, var(--sc-purple-light) 0%, var(--sc-purple) 100%);
}
.sc-illust-chart--bar::before {
width: 14px;
height: 55%;
}
.sc-illust-chart--bar::after {
width: 14px;
height: 80%;
margin-left: 8px;
}
.sc-illust-chart--line {
border-bottom: 2px solid var(--color-rgba-108-85-216-30);
height: 60%;
top: 20%;
}
.sc-illust-chart--line::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(135deg, transparent 40%, var(--sc-purple) 40%, var(--sc-purple) 42%, transparent 42%),
linear-gradient(135deg, transparent 55%, var(--sc-purple-light) 55%, var(--sc-purple-light) 57%, transparent 57%);
opacity: 0.6;
}
.sc-illust-chart--pie {
width: 50px;
height: 50px;
border-radius: 50%;
background: conic-gradient(var(--sc-purple) 0deg 120deg, var(--sc-purple-light) 120deg 220deg, var(--color-c4b8f0) 220deg 360deg);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.sc-illust-icon {
position: absolute;
width: 36px;
height: 36px;
border-radius: 10px;
background: linear-gradient(135deg, var(--color-rgba-108-85-216-20) 0%, var(--color-rgba-108-85-216-5) 100%);
border: 1px solid var(--color-rgba-108-85-216-20);
}
.sc-illust-icon--1 {
top: 20%;
left: 15%;
}
.sc-illust-icon--2 {
top: 45%;
left: 5%;
width: 28px;
height: 28px;
}
.sc-illust-icon--3 {
bottom: 18%;
left: 25%;
width: 32px;
height: 32px;
}
.sc-illust-ring {
position: absolute;
bottom: 10%;
right: 30%;
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid var(--color-rgba-108-85-216-15);
box-shadow: 0 0 0 12px var(--color-rgba-108-85-216-5);
}
/* --- Breadcrumb --- */
.sc-breadcrumb-wrap {
background: var(--color-bg);
padding: 16px 0 0;
}
.sc-breadcrumb {
font-size: 13px;
color: var(--color-text-muted);
}
.sc-breadcrumb a {
color: var(--color-text-muted);
transition: color var(--transition);
}
.sc-breadcrumb a:hover {
color: var(--sc-purple);
}
.sc-breadcrumb-sep {
margin: 0 6px;
color: var(--color-ccc);
}
/* --- Grid Section --- */
.sc-grid-section {
background: var(--color-bg);
padding: 24px 0 64px;
}
.sc-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.sc-card {
border-radius: 12px;
overflow: hidden;
background: var(--color-bg);
transition: box-shadow var(--transition), transform var(--transition);
}
.sc-card-link {
display: block;
color: inherit;
position: relative;
}
.sc-card-img {
aspect-ratio: 300 / 350;
overflow: hidden;
border-radius: 12px 12px 0 0;
}
.sc-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.sc-card-body {
position: absolute;
padding: 16px 18px 20px;
min-height: 120px;
bottom: 0;
background: linear-gradient(360deg, var(--color-bg) 0%, var(--color-rgba-240-240-244-90) 100%);
transition: min-height 0.5s ease;
}
.sc-card-title {
display: flex;
align-items: center;
gap: 16px;
font-size: 20px;
font-weight: 600;
color: var(--color-1a1a2e);
margin-bottom: 12px;
line-height: 1.5;
}
.sc-card-dot {
display: block;
background-position: -368px -50px;
width: 19px;
height: 19px;
}
.sc-card-desc {
font-size: 13px;
color: var(--color-text-light);
line-height: 1.65;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sc-card-arrow {
position: absolute;
right: 16px;
bottom: 16px;
width: 40px;
height: 27px;
border-radius: 112px 112px 112px 112px;
border: 1px solid var(--color-8752f4);
opacity: 0;
transform: scale(0.8);
transition: opacity var(--transition), transform var(--transition);
}
.sc-card-arrow::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
border-right: 2px solid var(--color-purple);
border-top: 2px solid var(--color-purple);
transform: translate(-60%, -50%) rotate(45deg);
}
.sc-card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-4px);
}
.sc-card:hover .sc-card-img img {
transform: scale(1.04);
}
.sc-card:hover .sc-card-arrow {
opacity: 1;
transform: scale(1);
}
.sc-card:hover .sc-card-body {
min-height: 220px;
}
/* --- Grid Nav --- */
.sc-grid-nav {
display: flex;
justify-content: flex-end;
margin-top: 28px;
}
.sc-grid-nav-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--sc-purple);
transition: background var(--transition), transform var(--transition);
}
.sc-grid-nav-btn:hover {
background: var(--sc-purple-dark);
transform: scale(1.05);
}
.sc-grid-nav-arrow {
display: block;
width: 10px;
height: 10px;
border-right: 2px solid var(--color-bg);
border-top: 2px solid var(--color-bg);
transform: rotate(45deg) translate(-1px, 1px);
}
/* --- Responsive --- */
@media (max-width: 1200px) {
.sc-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 992px) {
.sc-hero-inner {
grid-template-columns: 1fr;
text-align: center;
padding: 40px 20px 36px;
}
.sc-hero-desc {
margin: 0 auto;
}
.sc-hero-visual {
justify-content: center;
}
.sc-hero-illust {
max-width: 320px;
}
.sc-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 576px) {
.sc-hero {
min-height: auto;
}
.sc-hero-visual {
display: none;
}
.sc-grid {
grid-template-columns: 1fr;
}
.sc-card-body {
min-height: auto;
}
.sc-card-arrow {
opacity: 1;
transform: scale(1);
}
}
/* ========================================
瑙ｅ喅鏂规鍒楄〃 鈥?Solutions List
======================================== */
.page-solutions-list {
--sl-purple: var(--color-8752f4);
--sl-purple-dark: var(--color-purple);
--sl-purple-soft: var(--color-f3efff);
--sl-hero-start: var(--color-1a8ec4);
--sl-hero-mid: var(--color-4eb0df);
--sl-hero-end: var(--color-c8e6f8);
}
.page-solutions-list .nav-item.is-active>a {
color: var(--sl-purple);
}
.page-solutions-list .nav-item.is-active>a::after {
background: var(--sl-purple);
}
/* --- Hero --- */
.sl-hero {
position: relative;
background: url('../images/zhcs.webp') no-repeat center center;
background-size: cover;
overflow: hidden;
min-height: 500px;
}
.sl-hero-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 24px;
align-items: center;
padding: 48px 20px 40px;
max-width: var(--container-width);
margin: 0 auto;
min-height: 320px;
}
.sl-hero-title {
font-size: clamp(32px, 4vw, 46px);
font-weight: 700;
color: var(--color-bg);
line-height: 1.25;
margin-bottom: 14px;
letter-spacing: 1px;
text-shadow: 0 2px 12px var(--color-rgba-0-60-100-18);
}
.sl-hero-desc {
font-size: 15px;
color: var(--color-rgba-255-255-255-95);
line-height: 1.7;
max-width: 460px;
}
.sl-hero-visual {
display: flex;
justify-content: flex-end;
align-items: center;
pointer-events: none;
}
.sl-hero-visual img {
width: 100%;
max-width: 560px;
height: auto;
object-fit: contain;
filter: drop-shadow(0 12px 28px var(--color-rgba-10-80-140-18));
}
/* --- Toolbar / Breadcrumb --- */
.sl-toolbar-wrap {
background: var(--color-bg);
padding: 20px 0 8px;
}
.sl-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.sl-breadcrumb {
font-size: 13px;
color: var(--color-text-muted);
}
.sl-breadcrumb a {
color: var(--color-text-muted);
transition: color var(--transition);
}
.sl-breadcrumb a:hover {
color: var(--sl-purple);
}
.sl-breadcrumb-sep {
margin: 0 6px;
color: var(--color-ccc);
}
.sl-breadcrumb-current {
color: var(--sl-purple);
font-weight: 500;
}
.sl-count {
font-size: 13px;
color: var(--color-text-muted);
}
.sl-count-num {
display: inline-block;
min-width: 28px;
padding: 1px 8px;
margin: 0 2px;
text-align: center;
color: var(--sl-purple);
background: var(--sl-purple-soft);
border-radius: 4px;
font-weight: 600;
}
/* --- Category Grid --- */
.sl-cats {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 12px;
padding-bottom: 8px;
}
.sl-cat {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: var(--color-bg);
border: 1px solid var(--color-e8eaf0);
border-radius: 8px;
color: var(--color-444);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
text-align: center;
justify-content: center;
white-space: nowrap;
}
.sl-cat:hover {
background: var(--sl-purple);
border-color: var(--sl-purple);
color: var(--color-bg);
box-shadow: 0 4px 14px var(--color-rgba-135-82-244-10);
}
.sl-cat.is-active {
background: var(--sl-purple);
border-color: var(--sl-purple);
color: var(--color-bg);
box-shadow: 0 6px 18px var(--color-rgba-135-82-244-28);
}
.sl-cat-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
color: var(--sl-purple);
}
.sl-cat.is-active .sl-cat-icon {
color: var(--color-bg);
}
.sl-cat-icon svg {
width: 20px;
height: 20px;
display: block;
}
.sl-cat-label {
overflow: hidden;
text-overflow: ellipsis;
}
/* --- List --- */
.sl-list-section {
padding: 28px 0 72px;
}
.sl-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.sl-card {
display: flex;
gap: 28px;
padding: 20px;
background: var(--color-bg);
border-radius: 12px;
box-shadow: 0 4px 20px var(--color-rgba-108-85-216-6);
transition: box-shadow var(--transition), transform var(--transition);
}
.sl-card:hover {
box-shadow: 0 8px 28px var(--color-rgba-108-85-216-12);
transform: translateY(-2px);
}
.sl-card[hidden] {
display: none;
}
.sl-card-media {
flex: 0 0 300px;
width: 300px;
border-radius: 10px;
overflow: hidden;
background: var(--color-eef1f6);
align-self: stretch;
}
.sl-card-media img {
width: 100%;
height: 100%;
min-height: 180px;
max-height: 220px;
object-fit: cover;
transition: transform 0.4s ease;
}
.sl-card:hover .sl-card-media img {
transform: scale(1.03);
}
.sl-card-body {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
padding: 4px 8px 4px 0;
}
.sl-card-title {
font-size: 20px;
font-weight: 700;
color: var(--color-1a1a2e);
margin-bottom: 12px;
line-height: 1.4;
}
.sl-card-title a:hover {
color: var(--sl-purple);
}
.sl-card-desc {
font-size: 14px;
color: var(--color-777);
line-height: 1.75;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
overflow: hidden;
margin-bottom: 18px;
}
.sl-card-more {
align-self: flex-end;
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 7px 18px;
font-size: 13px;
font-weight: 500;
color: var(--sl-purple);
border: 1px solid var(--sl-purple);
border-radius: 4px;
transition: background var(--transition), color var(--transition);
}
.sl-card-more:hover {
background: var(--sl-purple);
color: var(--color-bg);
}
.sl-empty {
text-align: center;
padding: 64px 20px;
color: var(--color-text-muted);
font-size: 15px;
}
/* --- Responsive --- */
@media (max-width: 1200px) {
.sl-cats {
grid-template-columns: repeat(4, 1fr);
}
.sl-card-media {
flex-basis: 260px;
width: 260px;
}
}
@media (max-width: 992px) {
.sl-hero-inner {
grid-template-columns: 1fr;
text-align: center;
padding: 40px 20px 36px;
min-height: auto;
}
.sl-hero-desc {
margin: 0 auto;
}
.sl-hero-visual {
justify-content: center;
}
.sl-hero-visual img {
max-width: 420px;
}
.sl-cats {
grid-template-columns: repeat(3, 1fr);
}
.sl-card {
gap: 18px;
}
}
@media (max-width: 768px) {
.sl-cats {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.sl-card {
flex-direction: column;
padding: 16px;
}
.sl-card-media {
flex-basis: auto;
width: 100%;
}
.sl-card-media img {
max-height: 200px;
min-height: 160px;
}
.sl-card-body {
padding: 0;
}
.sl-card-more {
align-self: flex-start;
}
}
@media (max-width: 480px) {
.sl-hero {
min-height: auto;
}
.sl-hero-visual {
display: none;
}
.sl-cats {
grid-template-columns: 1fr 1fr;
}
.sl-cat {
padding: 9px 10px;
font-size: 12px;
}
}
/* ========================================
News Center Page 鈥?鏂伴椈涓績
======================================== */
.page-news {
--nc-purple: var(--color-6c55d8);
--nc-purple-dark: var(--color-5544c0);
--nc-purple-light: var(--color-8b7ae8);
--nc-hero-start: var(--color-f5f0ff);
--nc-hero-end: var(--color-ebe4ff);
}
.page-news .nav-item.is-active>a {
color: var(--nc-purple);
}
.page-news .nav-item.is-active>a::after {
background: var(--nc-purple);
}
/* --- Hero --- */
.nc-hero {
position: relative;
background: var(--color-eeebfd) url(../images/nc-del.webp) center center no-repeat;
background-size: cover;
overflow: hidden;
height: 500px;
display: flex;
}
.nc-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 80% 45%, var(--color-rgba-108-85-216-12) 0%, transparent 55%),
radial-gradient(circle at 20% 80%, var(--color-rgba-100-160-255-8) 0%, transparent 45%);
pointer-events: none;
}
.nc-hero-inner {
position: relative;
z-index: 1;
display: grid;
align-items: center;
}
.nc-hero-text {
color: var(--color-1a1a2e);
}
.nc-hero-title {
font-size: clamp(44px, 5vw, 60px);
font-weight: 700;
line-height: 1.2;
margin-bottom: 20px;
letter-spacing: 2px;
}
.nc-hero-accent {
color: var(--nc-purple);
}
.nc-hero-subtitle {
font-size: 16px;
color: var(--color-text-light);
letter-spacing: 3px;
font-weight: 500;
text-transform: uppercase;
}
.nc-hero-visual {
display: none;
justify-content: flex-end;
align-items: center;
}
.nc-globe {
position: relative;
width: 260px;
height: 260px;
}
.nc-globe-core {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
border-radius: 50%;
background:
radial-gradient(circle at 35% 30%, var(--color-rgba-180-200-255-90) 0%, transparent 50%),
radial-gradient(circle at 65% 70%, var(--color-rgba-140-160-255-60) 0%, transparent 45%),
linear-gradient(145deg, var(--color-rgba-108-85-216-35) 0%, var(--color-rgba-80-100-220-20) 100%);
border: 1px solid var(--color-rgba-108-85-216-25);
box-shadow: 0 0 40px var(--color-rgba-108-85-216-25);
}
.nc-globe-ring {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid var(--color-rgba-108-85-216-20);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.nc-globe-ring--1 {
width: 160px;
height: 160px;
transform: translate(-50%, -50%) rotateX(65deg);
}
.nc-globe-ring--2 {
width: 200px;
height: 200px;
transform: translate(-50%, -50%) rotateX(65deg) rotateZ(60deg);
}
.nc-globe-ring--3 {
width: 240px;
height: 240px;
transform: translate(-50%, -50%) rotateX(65deg) rotateZ(-30deg);
border-style: dashed;
opacity: 0.6;
}
.nc-globe-orbit {
position: absolute;
border-radius: 50%;
border: 1px solid var(--color-rgba-108-85-216-15);
}
.nc-globe-orbit--1 {
inset: 8%;
animation: nc-spin 20s linear infinite;
}
.nc-globe-orbit--2 {
inset: 0;
animation: nc-spin 30s linear infinite reverse;
}
@keyframes nc-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* --- Breadcrumb --- */
.nc-breadcrumb-wrap {
background: var(--color-bg);
border-bottom: 1px solid var(--color-border);
}
.nc-breadcrumb {
padding: 14px 0;
font-size: 14px;
color: var(--color-text-muted);
}
.nc-breadcrumb a {
color: var(--color-text-muted);
transition: color var(--transition);
}
.nc-breadcrumb a:hover {
color: var(--nc-purple);
}
.nc-breadcrumb a:last-child {
color: var(--nc-purple);
}
.nc-breadcrumb-sep {
margin: 0 8px;
color: var(--color-ccc);
}
/* --- Toolbar --- */
.nc-toolbar-wrap {
background: var(--color-bg);
padding: 20px 0 0;
}
.nc-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-bottom: 20px;
border-bottom: 1px solid var(--color-border);
}
.nc-filters {
display: flex;
flex: 1;
flex-wrap: wrap;
align-items: center;
gap: 10px;
min-width: 0;
}
.nc-filter-btn {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
padding: 10px 20px;
font-size: 14px;
color: var(--color-555);
background: var(--color-bg);
border: 1px solid var(--color-f0ebff);
border-radius: 6px;
white-space: nowrap;
transition: all var(--transition);
cursor: pointer;
}
.nc-filter-btn:hover {
color: var(--nc-purple);
border-color: var(--color-rgba-108-85-216-35);
background: var(--color-rgba-108-85-216-4);
}
.nc-filter-btn.is-active {
color: var(--color-bg);
background: var(--nc-purple);
border-color: var(--nc-purple);
box-shadow: 0 2px 10px var(--color-rgba-108-85-216-30);
}
.nc-count {
flex-shrink: 0;
font-size: 13px;
color: var(--color-text-muted);
white-space: nowrap;
}
.nc-count strong {
color: var(--color-555);
font-weight: 600;
}
#nc-count-current {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 22px;
padding: 0 6px;
margin: 0 2px;
color: var(--color-555);
background: var(--color-eef0f4);
border-radius: 4px;
}
/* Filter icons 鈥?icon-css2 sprites */
.nc-filter-all,
.nc-filter-tech,
.nc-filter-company,
.nc-filter-product,
.nc-filter-app {
display: inline-block;
flex-shrink: 0;
}
.nc-filter-all {
background-position: -175px -285px;
width: 18px;
height: 19px;
}
.nc-filter-tech {
background-position: -256px -284px;
width: 21px;
height: 21px;
}
.nc-filter-company {
background-position: -327px -216px;
width: 21px;
height: 18px;
}
.nc-filter-product {
background-position: -330px -53px;
width: 16px;
height: 16px;
}
.nc-filter-app {
background-position: -328px -135px;
width: 18px;
height: 17px;
}
.nc-filter-btn.is-active .nc-filter-all {
background-position: -134px -285px;
width: 18px;
height: 19px;
}
.nc-filter-btn.is-active .nc-filter-tech {
background-position: -215px -284px;
width: 21px;
height: 21px;
}
.nc-filter-btn.is-active .nc-filter-company {
background-position: -327px -175px;
width: 21px;
height: 18px;
}
.nc-filter-btn.is-active .nc-filter-product {
background-position: -330px -12px;
width: 16px;
height: 16px;
}
.nc-filter-btn.is-active .nc-filter-app {
background-position: -328px -94px;
width: 18px;
height: 17px;
}
/* --- News List --- */
.nc-list-section {
background: var(--color-bg);
padding: 0 0 60px;
}
.nc-list {
display: flex;
gap: 28px;
flex-direction: column;
}
.nc-item {
display: grid;
grid-template-columns: 180px 1fr 320px;
gap: 28px;
align-items: center;
border-bottom: 1px solid var(--color-f0f0f5);
transition: background var(--transition);
}
.nc-item:hover {
box-shadow: 0px 5px 10px 0px var(--color-eee5ff);
border-radius: 0px 0px 0px 0px;
border: 1px solid;
border-image: linear-gradient(138deg, var(--color-rgba-248-247-255-100), var(--color-rgba-255-255-255-63)) 1 1;
}
.nc-item:hover .nc-item-more {
color: var(--color-bg);
background: var(--nc-purple);
}
.nc-item.is-filter-hidden,
.nc-item.is-page-hidden {
display: none;
}
.nc-item-date {
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: center;
flex-shrink: 0;
}
.nc-date-md {
font-size: 45px;
font-weight: 700;
color: var(--nc-purple);
line-height: 1.1;
letter-spacing: -0.5px;
}
.nc-date-y {
font-size: 22px;
color: var(--color-8752f4);
font-weight: 400;
margin-top: 4px;
}
.nc-item-body {
min-width: 0;
}
.nc-item-tag {
display: inline-block;
padding: 2px 10px;
margin-bottom: 10px;
font-size: 12px;
color: var(--nc-purple);
background: var(--color-rgba-108-85-216-8);
border-radius: 3px;
}
.nc-item-tag--company {
color: var(--color-e05050);
background: var(--color-rgba-235-80-80-8);
}
.nc-item-tag--product {
color: var(--color-34a864);
background: var(--color-rgba-52-168-100-8);
}
.nc-item-tag--app {
color: var(--color-d4920a);
background: var(--color-rgba-245-166-35-10);
}
.nc-item-title {
font-size: 17px;
font-weight: 600;
line-height: 1.5;
margin-bottom: 10px;
color: var(--color-1a1a2e);
}
.nc-item-title a {
color: inherit;
transition: color var(--transition);
}
.nc-item-title a:hover {
color: var(--nc-purple);
}
.nc-item-desc {
font-size: 13px;
line-height: 1.8;
color: var(--color-text-muted);
margin-bottom: 14px;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nc-item-more {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 16px;
font-size: 13px;
color: var(--nc-purple);
border: 1px solid var(--nc-purple);
border-radius: 4px;
transition: all var(--transition);
}
.nc-item-more:hover {
color: var(--color-bg);
background: var(--nc-purple);
}
.nc-item-thumb {
display: block;
flex-shrink: 0;
border-radius: 6px;
overflow: hidden;
aspect-ratio: 220 / 140;
}
.nc-item-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
background: linear-gradient(135deg, var(--color-e8e0ff) 0%, var(--color-d4c8f8) 100%);
transition: transform 0.4s ease;
}
.nc-item:hover .nc-item-thumb img {
transform: scale(1.04);
}
.nc-empty {
text-align: center;
padding: 48px 0;
font-size: 15px;
color: var(--color-text-muted);
}
/* --- Pagination --- */
.nc-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px 24px;
margin-top: 40px;
padding-top: 32px;
}
.nc-page-total {
font-size: 13px;
color: var(--color-text-muted);
}
.nc-page-total strong {
color: var(--color-555);
font-weight: 600;
}
.nc-page-btns {
display: flex;
align-items: center;
gap: 6px;
}
.nc-page-btns li {
list-style: none;
padding: 0 8px;
font-size: 14px;
line-height: 34px;
text-align: center;
color: var(--color-text-light);
background: var(--color-bg);
border: 1px solid var(--color-e8e8ee);
border-radius: 4px;
cursor: pointer;
}
.nc-page-btns li.active {
color: var(--color-bg);
background: var(--color-9b7ef0);
border-color: var(--color-9b7ef0);
}
.nc-page-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 8px;
font-size: 14px;
color: var(--color-text-light);
background: var(--color-bg);
border: 1px solid var(--color-e8e8ee);
border-radius: 4px;
cursor: pointer;
transition: all var(--transition);
}
.nc-page-btn:hover:not(:disabled) {
color: var(--nc-purple);
border-color: var(--nc-purple);
}
.nc-page-btn.is-active {
color: var(--color-bg);
background: var(--nc-purple);
border-color: var(--nc-purple);
}
.nc-page-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.nc-page-ellipsis {
padding: 0 4px;
color: var(--color-ccc);
font-size: 14px;
}
.nc-page-jump {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--color-text-muted);
}
.nc-page-jump input {
width: 48px;
height: 34px;
padding: 0 8px;
text-align: center;
font-size: 14px;
border: 1px solid var(--color-e8e8ee);
border-radius: 4px;
outline: none;
}
.nc-page-jump input:focus {
border-color: var(--nc-purple);
}
.nc-page-go {
padding: 6px 14px;
font-size: 13px;
color: var(--color-bg);
background: var(--nc-purple);
border: none;
border-radius: 4px;
cursor: pointer;
transition: background var(--transition);
}
.nc-page-go:hover {
background: var(--nc-purple-dark);
}
/* --- Responsive --- */
@media (min-width: 992px) {
.nc-hero-visual {
display: flex;
}
}
@media (max-width: 992px) {
.nc-item {
grid-template-columns: 70px 1fr;
gap: 20px;
}
.nc-item-thumb {
display: none;
}
.nc-toolbar {
flex-direction: column;
align-items: stretch;
}
.nc-count {
text-align: center;
}
}
@media (max-width: 768px) {
.nc-filters {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
}
.nc-filters::-webkit-scrollbar {
display: none;
}
.nc-filter-btn {
padding: 8px 14px;
font-size: 13px;
}
.nc-item {
grid-template-columns: 1fr;
gap: 12px;
padding: 20px 0;
}
.nc-item-date {
flex-direction: row;
align-items: baseline;
gap: 8px;
justify-content: flex-start;
}
.nc-date-md {
font-size: 22px;
}
.nc-pagination {
flex-direction: column;
}
}
/* ========================================
News Detail Page 鈥?鏂伴椈璇︽儏
======================================== */
.page-news-detail .nc-breadcrumb-wrap {
border-bottom: none;
}
.nd-article {
background: var(--color-bg);
padding: 36px 0 64px;
}
.nd-article-inner {
max-width: var(--container-width);
}
.nd-article-header {
text-align: center;
margin-bottom: 36px;
padding-bottom: 28px;
border-bottom: 1px solid var(--color-f0f0f5);
}
.nd-article-title {
font-size: clamp(22px, 3.5vw, 30px);
font-weight: 700;
line-height: 1.5;
color: var(--color-1a1a2e);
margin-bottom: 20px;
}
.nd-article-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 20px 32px;
font-size: 13px;
color: var(--color-text-muted);
}
.nd-meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.nd-meta-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.7;
}
.nd-meta-icon--date {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23999'%3E%3Crect x='2' y='3' width='12' height='11' rx='1' fill='none' stroke='%23999' stroke-width='1.2'/%3E%3Cpath d='M2 6h12M5 1v3M11 1v3' stroke='%23999' stroke-width='1.2'/%3E%3C/svg%3E");
}
.nd-meta-icon--view {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.2'%3E%3Cpath d='M1 8s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5z'/%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3C/svg%3E");
}
.nd-meta-icon--like {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.2'%3E%3Cpath d='M8 14s-5.5-3.5-5.5-7.5A3.5 3.5 0 018 5.5 3.5 3.5 0 0113.5 6.5C13.5 10.5 8 14 8 14z'/%3E%3C/svg%3E");
}
.nd-article-body {
font-size: 15px;
line-height: 1.9;
color: var(--color-444);
}
.nd-article-body p {
margin-bottom: 18px;
}
.nd-article-body h2 {
font-size: 18px;
font-weight: 700;
color: var(--color-1a1a2e);
margin: 32px 0 16px;
line-height: 1.5;
}
.nd-article-body h3 {
font-size: 16px;
font-weight: 600;
color: var(--color-text);
margin: 24px 0 12px;
line-height: 1.5;
}
.nd-article-figure {
margin: 32px 0;
text-align: center;
}
.nd-article-figure img {
width: 100%;
border-radius: 6px;
object-fit: cover;
background: linear-gradient(135deg, var(--color-e8e0ff) 0%, var(--color-d4c8f8) 100%);
}
.nd-article-figure figcaption {
margin-top: 10px;
font-size: 13px;
color: var(--color-text-muted);
}
.nd-article-source {
margin-top: 28px;
font-size: 13px;
color: var(--color-text-muted);
}
.nd-article-actions {
display: flex;
justify-content: center;
margin: 40px 0 48px;
padding-top: 32px;
border-top: 1px solid var(--color-f0f0f5);
}
.nd-like-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 32px;
font-size: 14px;
color: var(--nc-purple);
background: var(--color-bg);
border: 1px solid var(--color-rgba-108-85-216-40);
border-radius: 24px;
cursor: pointer;
transition: all var(--transition);
}
.nd-like-btn:hover,
.nd-like-btn.is-liked {
color: var(--color-bg);
background: var(--nc-purple);
border-color: var(--nc-purple);
}
.nd-like-icon {
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236c55d8' stroke-width='1.4'%3E%3Cpath d='M8 14s-5.5-3.5-5.5-7.5A3.5 3.5 0 018 5.5 3.5 3.5 0 0113.5 6.5C13.5 10.5 8 14 8 14z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.nd-like-btn:hover .nd-like-icon,
.nd-like-btn.is-liked .nd-like-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff' stroke='%23fff' stroke-width='1.4'%3E%3Cpath d='M8 14s-5.5-3.5-5.5-7.5A3.5 3.5 0 018 5.5 3.5 3.5 0 0113.5 6.5C13.5 10.5 8 14 8 14z'/%3E%3C/svg%3E");
}
.nd-article-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.nd-nav-card {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
padding: 20px 24px;
background: var(--color-bg);
border: 1px solid var(--color-ececf2);
border-radius: 8px;
transition: border-color var(--transition), box-shadow var(--transition);
}
.nd-nav-card:hover {
border-color: var(--color-rgba-108-85-216-35);
box-shadow: 0 4px 16px var(--color-rgba-108-85-216-8);
}
.nd-nav-card--prev {
text-align: left;
}
.nd-nav-card--next {
justify-content: flex-end;
text-align: right;
}
.nd-nav-text {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
.nd-nav-card--next .nd-nav-text {
align-items: flex-end;
}
.nd-nav-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 8px;
background: var(--color-f3efff);
}
.nd-nav-arrow--prev::after,
.nd-nav-arrow--next::after {
content: "";
width: 8px;
height: 8px;
border-top: 2px solid var(--nc-purple);
border-right: 2px solid var(--nc-purple);
}
.nd-nav-arrow--prev::after {
transform: rotate(-135deg);
margin-left: 3px;
}
.nd-nav-arrow--next::after {
transform: rotate(45deg);
margin-right: 3px;
}
.nd-nav-label {
font-size: 12px;
color: var(--color-text-muted);
}
.nd-nav-title {
font-size: 14px;
font-weight: 600;
color: var(--color-text);
line-height: 1.5;
transition: color var(--transition);
}
.nd-nav-card:hover .nd-nav-title {
color: var(--nc-purple);
}
@media (max-width: 768px) {
.nd-article {
padding: 24px 0 48px;
}
.nd-article-meta {
gap: 12px 20px;
}
.nd-article-nav {
grid-template-columns: 1fr;
}
.nd-nav-card--next {
justify-content: flex-end;
text-align: right;
}
}
/* ===== service.css ===== */
/* ========================================
Service Support 鈥?鏈嶅姟鏀寔锛堝叡鐢級
======================================== */
.page-service {
--sv-purple: #8a5cf5;
--sv-purple-dark: #7347e0;
--sv-purple-light: #a78bfa;
--sv-hero-start: var(--color-eef2ff);
--sv-hero-mid: var(--color-f0ebff);
--sv-hero-end: var(--color-e8f0ff);
background: #fff;
}
.page-service .nav-item.is-active>a {
color: var(--sv-purple);
}
.page-service .nav-item.is-active>a::after {
content: "";
position: absolute;
bottom: 0;
left: 18px;
right: 18px;
height: 3px;
background: var(--sv-purple);
border-radius: 2px 2px 0 0;
}
/* --- Hero --- */
.sv-hero {
position: relative;
display: flex;
background: var(--color-edebfc) url(../images/bzz.webp) no-repeat center center;
background-size: cover;
overflow: hidden;
height: 500px;
}
.sv-hero::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(90, 60, 180, 0.18) 0%, rgba(70, 50, 160, 0.28) 100%),
radial-gradient(circle at 80% 35%, rgba(123, 77, 255, 0.12) 0%, transparent 50%),
radial-gradient(circle at 20% 75%, rgba(100, 160, 255, 0.1) 0%, transparent 45%);
pointer-events: none;
}
.sv-hero-inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.sv-hero-text {
text-align: center;
}
.sv-hero-title {
font-size: clamp(40px, 4vw, 52px);
font-weight: 700;
color: #fff;
line-height: 1.3;
margin-bottom: 16px;
letter-spacing: 2px;
text-shadow: 0 2px 16px rgba(80, 40, 160, 0.25);
}
.sv-hero-subtitle {
font-size: 16px;
color: rgba(255, 255, 255, 0.88);
letter-spacing: 3px;
text-transform: uppercase;
text-shadow: 0 1px 8px rgba(80, 40, 160, 0.2);
}
.sv-hero-visual {
position: relative;
height: 220px;
display: flex;
align-items: center;
justify-content: center;
}
.sv-hero-art {
position: relative;
width: 100%;
max-width: 380px;
height: 200px;
}
.sv-hero-tag {
position: absolute;
padding: 4px 12px;
font-size: 11px;
color: var(--sv-purple);
background: var(--color-rgba-255-255-255-85);
border-radius: 12px;
box-shadow: 0 2px 8px var(--color-rgba-123-77-255-12);
white-space: nowrap;
}
.sv-hero-tag--1 {
top: 8%;
left: 5%;
}
.sv-hero-tag--2 {
top: 35%;
right: 0;
}
.sv-hero-tag--3 {
bottom: 12%;
left: 15%;
}
.sv-hero-chart {
position: absolute;
border-radius: 8px;
background: var(--color-rgba-255-255-255-70);
box-shadow: 0 4px 16px var(--color-rgba-123-77-255-10);
}
.sv-hero-chart--bar {
top: 20%;
left: 20%;
width: 90px;
height: 70px;
background:
linear-gradient(180deg, var(--color-rgba-255-255-255-90) 0%, var(--color-rgba-255-255-255-70) 100%),
linear-gradient(180deg, var(--sv-purple-light) 0%, var(--sv-purple) 100%);
background-size: 100% 100%, 14px 50%;
background-repeat: no-repeat;
background-position: center, 22px bottom;
}
.sv-hero-chart--pie {
top: 10%;
right: 18%;
width: 56px;
height: 56px;
border-radius: 50%;
background: conic-gradient(var(--sv-purple) 0deg 120deg, var(--sv-purple-light) 120deg 220deg, var(--color-c4b8f0) 220deg 360deg);
}
.sv-hero-screen {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 160px;
height: 100px;
border-radius: 10px;
background: linear-gradient(160deg, var(--color-rgba-255-255-255-95) 0%, var(--color-rgba-237-230-255-90) 100%);
box-shadow: 0 8px 24px var(--color-rgba-123-77-255-15);
border: 1px solid var(--color-rgba-123-77-255-8);
}
.sv-hero-screen::before {
content: "";
position: absolute;
top: 12px;
left: 12px;
right: 12px;
height: 6px;
border-radius: 3px;
background: linear-gradient(90deg, var(--sv-purple-light), var(--sv-purple));
opacity: 0.6;
}
.sv-hero-screen::after {
content: "";
position: absolute;
top: 28px;
left: 12px;
width: 60%;
height: 4px;
border-radius: 2px;
background: var(--color-rgba-123-77-255-15);
box-shadow: 0 10px 0 var(--color-rgba-123-77-255-10), 0 20px 0 var(--color-rgba-123-77-255-8);
}
/* --- Sub Navigation --- */
.sv-subnav {
position: relative;
z-index: 2;
margin-top: 0;
margin-bottom: 0;
background: #fff;
border-bottom: 1px solid #eeeef3;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.sv-subnav-list {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0;
padding: 0;
background: transparent;
border-radius: 0;
box-shadow: none;
}
.sv-subnav-link {
position: relative;
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 8px;
padding: 18px 32px;
font-size: 15px;
font-weight: 500;
color: #888;
border-bottom: 2px solid transparent;
transition: color 0.25s ease, border-color 0.25s ease;
white-space: nowrap;
}
.sv-subnav-link:hover {
color: var(--sv-purple);
}
.sv-subnav-link.is-active {
color: var(--sv-purple);
border-bottom-color: var(--sv-purple);
}
.sv-subnav-link.is-active .sv-subnav-icon--faq,
.sv-subnav-link:hover .sv-subnav-icon--faq {
background-position: -327px -256px;
width: 20px;
height: 21px;
}
.sv-subnav-link.is-active .sv-subnav-icon--video,
.sv-subnav-link:hover .sv-subnav-icon--video {
background-position: -369px -13px;
width: 18px;
height: 16px;
}
.sv-subnav-link.is-active .sv-subnav-icon--download,
.sv-subnav-link:hover .sv-subnav-icon--download {
background-position: -291px -326px;
width: 18px;
height: 18px;
}
.sv-subnav-link.is-active .sv-subnav-icon--custom,
.sv-subnav-link:hover .sv-subnav-icon--custom {
background-position: -291px -326px;
width: 18px;
height: 18px;
}
.sv-subnav-link.is-active .sv-subnav-icon--sample,
.sv-subnav-link:hover .sv-subnav-icon--sample {
background-position: -251px -325px;
width: 18px;
height: 21px;
}
.sv-subnav-icon {
display: block;
}
.sv-subnav-icon--faq {
background-position: -10px -325px;
width: 20px;
height: 21px;
}
.sv-subnav-icon--video {
background-position: -51px -328px;
width: 18px;
height: 16px;
}
.sv-subnav-icon--download {
background-position: -91px -326px;
width: 18px;
height: 19px;
}
.sv-subnav-icon--custom {
background-position: -211px -325px;
width: 18px;
height: 21px;
}
.sv-subnav-icon--sample {
background-position: -171px -325px;
width: 18px;
height: 21px;
}
/* --- Breadcrumb --- */
.sv-breadcrumb-wrap {
background: var(--color-bg);
padding: 14px 0;
}
.sv-breadcrumb {
font-size: 13px;
color: var(--color-text-muted);
}
.sl-zhny {
background-position: -202px -94px;
}
.sl-zhcs {
background-position: -11px -203px;
}
.sl-zhgd {
background-position: -94px -202px;
}
.sl-hjjk {
background-position: -175px -203px;
}
.sl-zhsl {
background-position: -245px -52px;
}
.sl-zhjj {
background-position: -248px -135px;
}
.sl-zhdl {
background-position: -11px -244px;
}
.sl-zhsw {
background-position: -93px -285px;
}
.sl-zhly {
background-position: -11px -286px;
}
.sl-gyzdh {
background-position: -288px -176px;
}
.sl-zhfa {
background-position: -287px -93px;
}
.sl-zhzy {
background-position: -287px -13px;
}
.sl-lclw {
background-position: -175px -247px;
}
.sl-zhhb {
background-position: -94px -246px;
}
.sl-cat.is-active .sl-zhny,
.sl-cat:hover .sl-zhny {
background-position: -202px -53px;
}
.sl-cat.is-active .sl-zhcs,
.sl-cat:hover .sl-zhcs {
background-position: -203px -135px;
}
.sl-cat.is-active .sl-zhgd,
.sl-cat:hover .sl-zhgd {
background-position: -53px -202px;
}
.sl-cat.is-active .sl-hjjk,
.sl-cat:hover .sl-hjjk {
background-position: -134px -203px;
}
.sl-cat.is-active .sl-zhsl,
.sl-cat:hover .sl-zhsl {
background-position: -245px -11px;
}
.sl-cat.is-active .sl-zhjj,
.sl-cat:hover .sl-zhjj {
background-position: -248px -94px;
}
.sl-cat.is-active .sl-zhdl,
.sl-cat:hover .sl-zhdl {
background-position: -246px -175px;
}
.sl-cat.is-active .sl-zhsw,
.sl-cat:hover .sl-zhsw {
background-position: -52px -285px;
}
.sl-cat.is-active .sl-zhly,
.sl-cat:hover .sl-zhly {
background-position: -287px -217px;
}
.sl-cat.is-active .sl-gyzdh,
.sl-cat:hover .sl-gyzdh {
background-position: -288px -135px;
}
.sl-cat.is-active .sl-zhfa,
.sl-cat:hover .sl-zhfa {
background-position: -287px -52px;
}
.sl-cat.is-active .sl-zhzy,
.sl-cat:hover .sl-zhzy {
background-position: -216px -246px;
}
.sl-cat.is-active .sl-lclw,
.sl-cat:hover .sl-lclw {
background-position: -134px -247px;
}
.sl-cat.is-active .sl-zhhb,
.sl-cat:hover .sl-zhhb {
background-position: -53px -246px;
}
.sv-breadcrumb a {
color: var(--color-text-light);
transition: color 0.3s ease;
}
.sv-breadcrumb a:hover {
color: var(--sv-purple);
}
.sv-breadcrumb-sep {
margin: 0 8px;
color: var(--color-ddd);
}
/* --- Service Features --- */
.sv-features {
background: none;
padding: 56px 0 72px;
}
.sv-features-title {
font-size: clamp(18px, 2.5vw, 22px);
font-weight: 700;
color: #1a1a2e;
text-align: center;
margin-bottom: 40px;
line-height: 1.5;
}
.sv-features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.sv-feature-card {
background: #fff;
border-radius: 12px;
padding: 36px 22px 30px;
text-align: center;
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
border: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sv-feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.sv-feature-icon {
width: 64px;
height: 64px;
margin: 0 auto 18px;
border-radius: 50%;
background: #f0ebff;
display: flex;
justify-content: center;
align-items: center;
box-shadow: none;
}
.sv-feature-card h3 {
font-size: 16px;
font-weight: 700;
color: var(--color-1a1a2e);
margin-bottom: 10px;
}
.sv-feature-card p {
font-size: 13px;
line-height: 1.75;
color: var(--color-888);
}
/* ===== custom.css ===== */
/* ========================================
Product Customization 鈥?浜у搧瀹氬埗
======================================== */
.cust-main {
background: var(--color-bg);
padding: 36px 0 56px;
}
.cust-title {
font-size: clamp(22px, 3vw, 28px);
font-weight: 700;
color: var(--color-1a1a2e);
text-align: center;
margin-bottom: 32px;
}
.cust-form-card {
max-width: 720px;
margin: 0 auto;
background: var(--color-bg);
border-radius: 12px;
box-shadow: 0 4px 24px var(--color-rgba-0-0-0-6);
border: 1px solid var(--color-f0f0f5);
padding: 36px 40px 40px;
}
.cust-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 24px;
}
.cust-field {
display: block;
margin-bottom: 20px;
}
.cust-label {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--color-1a1a2e);
margin-bottom: 8px;
}
.cust-required {
color: var(--color-e53e3e);
font-style: normal;
margin-left: 2px;
}
.cust-field input,
.cust-field select,
.cust-field textarea {
width: 100%;
padding: 11px 14px;
font-size: 14px;
font-family: inherit;
color: var(--color-text);
background: var(--color-bg);
border: 1px solid var(--color-e0e0e8);
border-radius: 8px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.cust-field input::placeholder,
.cust-field textarea::placeholder {
color: var(--color-bbb);
}
.cust-field input:focus,
.cust-field select:focus,
.cust-field textarea:focus {
outline: none;
border-color: var(--sv-purple);
box-shadow: 0 0 0 3px var(--color-rgba-123-77-255-12);
}
.cust-field input.is-invalid,
.cust-field textarea.is-invalid {
border-color: var(--color-e53e3e);
}
.cust-field textarea {
resize: vertical;
min-height: 120px;
}
.cust-form-note {
font-size: 13px;
color: var(--color-text-muted);
text-align: center;
margin-bottom: 20px;
}
.cust-submit {
display: block;
width: 100%;
padding: 13px 24px;
font-size: 15px;
font-weight: 600;
color: var(--color-bg);
background: var(--sv-purple);
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease;
}
.cust-submit:hover {
background: var(--sv-purple-dark);
transform: translateY(-1px);
}
.cust-feedback {
margin-top: 16px;
font-size: 14px;
text-align: center;
}
.cust-feedback.is-success {
color: var(--color-2ea86c);
}
.cust-feedback.is-error {
color: var(--color-e53e3e);
}
/* ===== FAQ — 常见问题 ===== */
.page-faq .sv-breadcrumb-wrap {
background: #fff;
padding: 20px 0 0;
}
.faq-main {
background: #fff;
padding: 8px 0 64px;
}
.faq-title {
font-size: clamp(26px, 3vw, 34px);
font-weight: 700;
color: #1a1a2e;
text-align: center;
margin: 8px 0 28px;
}
.faq-search-form {
display: flex;
align-items: stretch;
gap: 0;
max-width: 720px;
margin: 0 auto 36px;
padding: 0;
background: #fff;
border-radius: 10px;
box-shadow: 0 6px 24px rgba(80, 60, 160, 0.08);
border: 1px solid #ece8f5;
overflow: hidden;
}
.faq-search-select-wrap {
position: relative;
flex-shrink: 0;
border-right: 1px solid #ece8f5;
}
.faq-search-select-wrap::after {
content: "";
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-40%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #666;
pointer-events: none;
}
.faq-search-select {
appearance: none;
border: none;
background: #f5f3fb;
padding: 0 34px 0 18px;
font-size: 14px;
color: #333;
cursor: pointer;
min-width: 100px;
border-radius: 0;
height: 52px;
}
.faq-search-input {
flex: 1;
border: none;
padding: 0 16px;
font-size: 14px;
color: #333;
min-width: 0;
background: #fff;
border-radius: 0;
height: 52px;
}
.faq-search-input::placeholder {
color: #b0b3bc;
}
.faq-search-input:focus {
outline: none;
}
.faq-search-btn {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 52px;
margin: 0;
background: var(--sv-purple);
border: none;
border-radius: 0;
cursor: pointer;
box-shadow: none;
transition: background 0.25s ease;
}
.faq-search-btn:hover {
background: var(--sv-purple-dark);
transform: none;
}
.faq-search-btn .icon-css {
filter: brightness(0) invert(1);
}
.faq-card {
background: #fff;
border-radius: 12px;
padding: 28px 32px 32px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
border: 1px solid #f0eef6;
}
.faq-card-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 22px;
}
.faq-card-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--sv-purple);
color: #fff;
font-size: 16px;
font-weight: 700;
line-height: 1;
}
.faq-card-title {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #1a1a2e;
}
.faq-filters {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 24px;
}
.faq-filter {
padding: 8px 20px;
font-size: 14px;
font-weight: 500;
color: var(--sv-purple);
background: #fff;
border: 1px solid var(--sv-purple);
border-radius: 8px;
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-filter:hover {
background: #f3efff;
}
.faq-filter.is-active {
color: #fff;
background: var(--sv-purple);
border-color: var(--sv-purple);
box-shadow: 0 4px 12px rgba(138, 92, 245, 0.28);
}
.faq-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
border: 1px solid #e8e3f4;
border-radius: 8px;
background: #fff;
overflow: hidden;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item.is-hidden {
display: none;
}
.faq-item.is-open {
border-color: var(--sv-purple);
box-shadow: 0 4px 16px rgba(138, 92, 245, 0.12);
}
.faq-question {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 16px 18px;
text-align: left;
background: #fff;
border: none;
cursor: pointer;
transition: background 0.2s ease;
}
.faq-item:not(.is-open) .faq-question:hover {
background: #faf8ff;
}
.faq-item.is-open .faq-question {
background: var(--sv-purple);
}
.faq-cat {
flex-shrink: 0;
padding: 3px 10px;
font-size: 12px;
font-weight: 500;
border-radius: 4px;
line-height: 1.5;
}
.faq-cat--usage {
color: var(--sv-purple);
background: #ede8ff;
}
.faq-cat--params {
color: #3b82c4;
background: #e8f2fc;
}
.faq-cat--software {
color: #c45a9a;
background: #fce8f4;
}
.faq-cat--service {
color: #5a8a4a;
background: #eaf6e6;
}
.faq-item.is-open .faq-cat {
color: var(--sv-purple);
background: #fff;
}
.faq-qtext {
flex: 1;
min-width: 0;
font-size: 15px;
font-weight: 500;
color: #222;
line-height: 1.5;
}
.faq-item.is-open .faq-qtext {
color: #fff;
font-weight: 600;
}
.faq-arrow {
flex-shrink: 0;
width: 20px;
height: 20px;
position: relative;
}
.faq-arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
transform: translate(-50%, -65%) rotate(45deg);
transition: transform 0.25s ease, border-color 0.2s ease;
}
.faq-item.is-open .faq-arrow::before {
border-color: #fff;
transform: translate(-50%, -35%) rotate(-135deg);
}
.faq-answer {
display: none;
padding: 18px 22px 20px;
background: #f7f7fa;
color: #555;
font-size: 14px;
line-height: 1.85;
}
.faq-item.is-open .faq-answer {
display: block;
}
.faq-answer ol {
margin: 0;
padding-left: 1.25em;
}
.faq-answer ol li {
margin-bottom: 8px;
}
.faq-answer ol li:last-child {
margin-bottom: 0;
}
.faq-answer p {
margin: 0;
}
.faq-empty {
margin: 24px 0 0;
text-align: center;
font-size: 14px;
color: #888;
}
/* --- Responsive --- */
@media (max-width: 1024px) {
.sv-hero-inner {
grid-template-columns: 1fr;
text-align: center;
}
.sv-hero-visual {
height: 160px;
}
.sv-features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.sv-hero {
padding: 40px 0 32px;
}
.sv-subnav-list {
justify-content: flex-start;
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sv-subnav-list::-webkit-scrollbar {
display: none;
}
.sv-subnav-link {
padding: 14px 18px;
}
.cust-form-card {
padding: 24px 20px 28px;
}
.cust-form-row {
grid-template-columns: 1fr;
gap: 0;
}
.sv-features-grid {
grid-template-columns: 1fr;
}
.faq-search-form {
max-width: 100%;
}
.faq-search-select {
min-width: 84px;
padding-left: 12px;
padding-right: 28px;
}
.faq-search-btn {
width: 48px;
}
.faq-card {
padding: 20px 16px 24px;
}
.faq-card-header {
margin-bottom: 16px;
}
.faq-filters {
gap: 8px;
}
.faq-filter {
padding: 7px 14px;
font-size: 13px;
}
.faq-question {
padding: 14px;
gap: 10px;
}
.faq-qtext {
font-size: 14px;
}
.faq-answer {
padding: 14px 16px 18px;
}
}
/* --- Download center under service layout --- */
.page-service.page-download .nav-item.is-active>a {
color: var(--sv-purple);
}
.page-service.page-download .nav-item.is-active>a::after {
background: var(--sv-purple);
}
.page-service.page-download .dl-tabs-wrap {
background: var(--color-f8f9fb);
padding-top: 24px;
}
.page-service.page-download .dl-main {
background: var(--color-f8f9fb);
padding-bottom: 48px;
}
.shaunggongchang {
width: 100%;
height: 900px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.sgc_body {
min-width: 1440px;
min-height: 595px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
transition: all 1s ease-in 0.1s;
}
.sgc_bg {
position: absolute;
transition: all 1s ease-in 0.2s;
}
.sgc_bgs {
width: 1490px;
position: relative;
transition: all 1s ease-in 0.2s;
opacity: 0;
}
.act10 {
width: 100% !important;
}
.loader_video {
background-position: -11px -11px;
width: 119px;
height: 118px;
z-index: 9;
}
.sgc_bodysp1 {
font-size: 37px;
font-weight: bold;
color: var(--color-bg);
z-index: 99;
margin: 40px 0;
}
.sgc_bodysp2 {
font-size: 16px;
font-weight: 500;
color: var(--color-bg);
line-height: 45px;
z-index: 99;
text-align: center;
}
.sgc_video {
width: 88px;
z-index: 9999;
}
.sgc_body:hover .loader-15 {
opacity: 1;
}
.shuanggongchangspbox {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
}
/* ========================================
Solution Detail Page 鈥?鏂规璇︽儏
======================================== */
.page-solutions-detail {
--sl-purple: var(--color-8752f4);
--sl-purple-dark: var(--color-purple);
--sl-purple-soft: var(--color-f3efff);
--sd-purple: var(--sl-purple);
--sd-purple-dark: var(--sl-purple-dark);
--sd-purple-soft: var(--sl-purple-soft);
--sd-panel-bg: var(--color-f7f8fc);
--sd-text: var(--color-1a1a2e);
--sd-muted: var(--color-777);
}
.page-solutions-detail .sd-toolbar-wrap {
padding-bottom: 28px;
}
.page-solutions-detail .sl-cats a.sl-cat {
text-decoration: none;
}
.sd-article {
background: var(--color-bg);
padding: 8px 0 72px;
}
.sd-article-inner {
max-width: var(--container-width);
}
.sd-article-header {
text-align: center;
margin-bottom: 40px;
}
.sd-article-title {
font-size: clamp(24px, 3.2vw, 32px);
font-weight: 700;
line-height: 1.4;
color: var(--sd-text);
margin-bottom: 18px;
}
.sd-article-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 18px 32px;
font-size: 13px;
color: var(--color-text-muted);
}
.sd-meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.sd-meta-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.7;
}
.sd-meta-icon--date {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23999'%3E%3Crect x='2' y='3' width='12' height='11' rx='1' fill='none' stroke='%23999' stroke-width='1.2'/%3E%3Cpath d='M2 6h12M5 1v3M11 1v3' stroke='%23999' stroke-width='1.2'/%3E%3C/svg%3E");
}
.sd-meta-icon--view {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.2'%3E%3Cpath d='M1 8s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5z'/%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3C/svg%3E");
}
.sd-meta-icon--like {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.2'%3E%3Cpath d='M8 14s-5.5-3.5-5.5-7.5A3.5 3.5 0 018 5.5 3.5 3.5 0 0113.5 6.5C13.5 10.5 8 14 8 14z'/%3E%3C/svg%3E");
}
.sd-section {
margin-bottom: 48px;
}
.sd-section-title {
position: relative;
display: flex;
align-items: center;
gap: 12px;
font-size: 20px;
font-weight: 700;
color: var(--sd-text);
line-height: 1.4;
margin-bottom: 20px;
padding-left: 14px;
}
.sd-section-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 1.1em;
border-radius: 2px;
background: var(--sd-purple);
}
.sd-section-lead {
font-size: 15px;
line-height: 1.9;
color: var(--color-444);
margin-bottom: 24px;
}
.sd-panel {
background: var(--sd-panel-bg);
border-radius: 16px;
padding: 28px 32px;
}
.sd-panel p {
font-size: 15px;
line-height: 1.9;
color: var(--color-444);
margin: 0;
}
.sd-feature-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.sd-feature-list li {
position: relative;
padding-left: 28px;
font-size: 15px;
line-height: 1.7;
color: var(--color-444);
}
.sd-feature-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.35em;
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%238752f4' d='M8 1.2l1.76 3.56 3.93.57-2.84 2.77.67 3.91L8 10.16l-3.52 1.85.67-3.91L2.31 5.33l3.93-.57L8 1.2z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.sd-figure {
margin: 0 0 28px;
text-align: center;
}
.sd-figure img {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
background: var(--color-eef1f6);
}
.sd-layer-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.sd-layer-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 32px 24px 28px;
background: var(--sd-purple-soft);
border-radius: 16px;
}
.sd-layer-icon {
width: 64px;
height: 64px;
margin-bottom: 18px;
border-radius: 50%;
background: linear-gradient(145deg, var(--color-8b7ae8) 0%, var(--sd-purple) 100%);
box-shadow: 0 8px 20px var(--color-rgba-135-82-244-28);
background-repeat: no-repeat;
background-position: center;
background-size: 30px 30px;
}
.sd-layer-icon--sense {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Crect x='5' y='5' width='14' height='14' rx='2'/%3E%3Cpath d='M9 5V3M15 5V3M9 21v-2M15 21v-2M5 9H3M5 15H3M21 9h-2M21 15h-2M9 9h6v6H9z'/%3E%3C/svg%3E"), linear-gradient(145deg, var(--color-8b7ae8) 0%, var(--sd-purple) 100%);
background-size: 30px 30px, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
}
.sd-layer-icon--net {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Cpath d='M12 18.5a1 1 0 100 2 1 1 0 000-2z' fill='%23fff' stroke='none'/%3E%3Cpath d='M8.5 15.2a5 5 0 017 0M6 12a8.5 8.5 0 0112 0M3.5 8.8a12 12 0 0117 0'/%3E%3C/svg%3E"), linear-gradient(145deg, var(--color-8b7ae8) 0%, var(--sd-purple) 100%);
background-size: 30px 30px, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
}
.sd-layer-icon--app {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Crect x='3' y='4' width='18' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"), linear-gradient(145deg, var(--color-8b7ae8) 0%, var(--sd-purple) 100%);
background-size: 30px 30px, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
}
.sd-layer-title {
font-size: 17px;
font-weight: 700;
color: var(--sd-text);
margin-bottom: 10px;
}
.sd-layer-desc {
font-size: 13px;
line-height: 1.7;
color: var(--sd-muted);
margin: 0;
}
.sd-value-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.sd-value-card {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 22px 20px;
background: var(--color-bg);
border-radius: 12px;
box-shadow: 0 4px 20px var(--color-rgba-108-85-216-6);
border: 1px solid var(--color-f0f0f5);
}
.sd-value-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center;
background-size: 22px 22px;
}
.sd-value-icon--cost {
background-color: #e8f8ef;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea86c' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v10M15 9.5c0-1.1-1.3-2-3-2s-3 .9-3 2 1.3 2 3 2 3 .9 3 2-1.3 2-3 2-3-.9-3-2'/%3E%3C/svg%3E");
}
.sd-value-icon--eff {
background-color: #e8f1ff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232f6fd6' stroke='none'%3E%3Cpath d='M13 2L4 14h7l-1 8 10-14h-7l0-6z'/%3E%3C/svg%3E");
}
.sd-value-icon--sat {
background-color: #fff0e8;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0863a' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 10h.01M15.5 10h.01M8.2 14.5c1.2 1.4 2.4 2 3.8 2s2.6-.6 3.8-2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sd-value-title {
font-size: 16px;
font-weight: 700;
color: var(--sd-text);
margin-bottom: 8px;
}
.sd-value-desc {
font-size: 13px;
line-height: 1.7;
color: var(--sd-muted);
margin: 0;
}
.sd-panel--scene {
padding: 28px 32px 20px;
}
.sd-scene-intro {
margin-bottom: 22px !important;
}
.sd-scene-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 22px;
}
.sd-scene-item {
display: flex;
align-items: flex-start;
gap: 16px;
}
.sd-scene-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 10px;
background-color: #e8f3ff;
background-repeat: no-repeat;
background-position: center;
background-size: 24px 24px;
}
.sd-scene-icon--home {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b7ddd' stroke-width='1.7'%3E%3Cpath d='M4 10.5L12 4l8 6.5V20a1 1 0 01-1 1h-5v-6H10v6H5a1 1 0 01-1-1v-9.5z'/%3E%3C/svg%3E");
}
.sd-scene-icon--building {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b7ddd' stroke-width='1.7'%3E%3Cpath d='M4 21V5a1 1 0 011-1h8a1 1 0 011 1v16M14 10h5a1 1 0 011 1v10M8 8h2M8 12h2M8 16h2M17 14h1M17 17h1'/%3E%3C/svg%3E");
}
.sd-scene-icon--factory {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b7ddd' stroke-width='1.7'%3E%3Cpath d='M3 21h18M4 21V10l5 3V10l5 3V7l6 3v11'/%3E%3C/svg%3E");
}
.sd-scene-title {
font-size: 16px;
font-weight: 700;
color: var(--sd-text);
margin-bottom: 6px;
}
.sd-scene-desc {
font-size: 14px;
line-height: 1.7;
color: var(--sd-muted);
margin: 0;
}
.sd-article-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 16px;
margin: 48px 0 40px;
padding-top: 8px;
}
.sd-consult-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 36px;
font-size: 15px;
font-weight: 600;
color: var(--color-bg);
background: var(--sd-purple);
border-radius: 28px;
box-shadow: 0 8px 20px var(--color-rgba-135-82-244-28);
transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.sd-consult-btn:hover {
background: var(--sd-purple-dark);
color: var(--color-bg);
transform: translateY(-1px);
box-shadow: 0 10px 24px var(--color-rgba-135-82-244-28);
}
.sd-consult-icon {
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8'%3E%3Cpath d='M21 12a8.5 8.5 0 01-12.4 7.5L4 21l1.6-4.2A8.5 8.5 0 1121 12z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.sd-like-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 28px;
font-size: 14px;
color: var(--sd-muted);
background: var(--color-bg);
border: 1px solid var(--color-e8eaf0);
border-radius: 28px;
cursor: pointer;
transition: all var(--transition);
}
.sd-like-btn:hover,
.sd-like-btn.is-liked {
color: var(--sd-purple);
border-color: var(--sd-purple);
background: var(--sd-purple-soft);
}
.sd-like-icon {
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.4'%3E%3Cpath d='M8 14s-5.5-3.5-5.5-7.5A3.5 3.5 0 018 5.5 3.5 3.5 0 0113.5 6.5C13.5 10.5 8 14 8 14z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.sd-like-btn:hover .sd-like-icon,
.sd-like-btn.is-liked .sd-like-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238752f4' stroke='%238752f4' stroke-width='1.4'%3E%3Cpath d='M8 14s-5.5-3.5-5.5-7.5A3.5 3.5 0 018 5.5 3.5 3.5 0 0113.5 6.5C13.5 10.5 8 14 8 14z'/%3E%3C/svg%3E");
}
.sd-article-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.sd-nav-card {
display: flex;
align-items: center;
gap: 16px;
padding: 22px 24px;
background: var(--sd-panel-bg);
border-radius: 12px;
transition: background var(--transition), box-shadow var(--transition);
}
.sd-nav-card:hover {
background: var(--sd-purple-soft);
box-shadow: 0 4px 16px var(--color-rgba-108-85-216-8);
}
.sd-nav-card--next {
justify-content: flex-end;
text-align: right;
}
.sd-nav-text {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
.sd-nav-card--next .sd-nav-text {
align-items: flex-end;
}
.sd-nav-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 50%;
background: #e8f3ff;
}
.sd-nav-arrow--prev::after,
.sd-nav-arrow--next::after {
content: "";
width: 8px;
height: 8px;
border-top: 2px solid var(--color-3b7ddd);
border-right: 2px solid var(--color-3b7ddd);
}
.sd-nav-arrow--prev::after {
transform: rotate(-135deg);
margin-left: 3px;
}
.sd-nav-arrow--next::after {
transform: rotate(45deg);
margin-right: 3px;
}
.sd-nav-label {
font-size: 12px;
color: var(--color-text-muted);
}
.sd-nav-title {
font-size: 14px;
font-weight: 600;
color: var(--sd-text);
line-height: 1.5;
transition: color var(--transition);
}
.sd-nav-card:hover .sd-nav-title {
color: var(--sd-purple);
}
@media (max-width: 992px) {
.sd-layer-grid,
.sd-value-grid {
grid-template-columns: 1fr;
}
.sd-panel,
.sd-panel--scene {
padding: 22px 20px;
}
}
@media (max-width: 768px) {
.sd-article {
padding: 0 0 56px;
}
.sd-article-header {
margin-bottom: 28px;
}
.sd-section {
margin-bottom: 36px;
}
.sd-section-title {
font-size: 18px;
}
.sd-article-actions {
flex-direction: column;
margin: 36px 0 32px;
}
.sd-consult-btn,
.sd-like-btn {
width: 100%;
justify-content: center;
}
.sd-article-nav {
grid-template-columns: 1fr;
}
.sd-nav-card--next {
justify-content: flex-end;
}
}