{"id":494,"date":"2026-01-26T14:45:15","date_gmt":"2026-01-26T06:45:15","guid":{"rendered":"https:\/\/ryanren.top\/?page_id=494"},"modified":"2026-10-13T14:34:36","modified_gmt":"2026-10-13T06:34:36","slug":"zpj","status":"publish","type":"page","link":"https:\/\/ryanren.top\/index.php\/zpj\/","title":{"rendered":"\u4f5c\u54c1\u96c6"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>\u4efb\u5fd7\u8fdc \u00b7 \u7a7a\u95f4\u8bbe\u8ba1\u4f5c\u54c1\u96c6<\/title>\n  <meta name=\"description\" content=\"\u4efb\u5fd7\u8fdc\u8bbe\u8ba1\u4f5c\u54c1\u96c6\uff0c\u4e13\u6ce8\u7a7a\u95f4\u8bbe\u8ba1\u3001\u54c1\u724c\u5347\u7ea7\u3001\u5efa\u6a21\u6e32\u67d3\u3002\">\n  <meta property=\"og:title\" content=\"\u4efb\u5fd7\u8fdc \u00b7 \u7a7a\u95f4\u8bbe\u8ba1\u4f5c\u54c1\u96c6\">\n  <meta property=\"og:description\" content=\"\u4e13\u6ce8\u521b\u610f\u4e0e\u5546\u4e1a\u4ef7\u503c\u7684\u878d\u5408\u8bbe\u8ba1\u3002\">\n  <meta property=\"og:image\" content=\"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/GD01.jpg\">\n  <style>\n    \/* \u91cd\u7f6e & \u57fa\u7840 *\/\n    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n    :root {\n      --black: #080808;\n      --white: #fff;\n      --warm: #e8c87a;\n      --warm-dim: rgba(232,200,122,0.12);\n      --text-dim: rgba(255,255,255,0.45);\n      --text-faint: rgba(255,255,255,0.25);\n    }\n    html {\n      font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", Arial, sans-serif;\n      font-size: 16px;\n      -webkit-font-smoothing: antialiased;\n      background: var(--black);\n      color: var(--white);\n      scroll-behavior: smooth;\n      overflow-x: hidden;\n    }\n    body { background: var(--black); overflow-x: hidden; }\n    a { color: inherit; text-decoration: none; }\n    img { display: block; max-width: 100%; }\n\n    \/* \u5bfc\u822a *\/\n    .nav {\n      position: fixed;\n      top: 0; left: 0; right: 0;\n      z-index: 100;\n      padding: 24px 40px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      background: rgba(8,8,8,0.55);\n      backdrop-filter: blur(24px) saturate(180%);\n      -webkit-backdrop-filter: blur(24px) saturate(180%);\n      border-bottom: 1px solid rgba(255,255,255,0.06);\n      transition: padding 0.4s, background 0.4s;\n      animation: navFadeIn 0.8s ease-out forwards;\n    }\n    @keyframes navFadeIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }\n    .nav.scrolled { padding: 16px 40px; background: rgba(8,8,8,0.85); }\n    .nav-logo {\n      font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;\n      display: flex; align-items: center; gap: 10px; opacity: 0.8; transition: opacity 0.3s;\n    }\n    .nav-logo:hover { opacity: 1; }\n    .nav-logo img { height: 28px; width: auto; max-width: 80px; object-fit: contain; display: block; }\n    .nav-links { display: flex; gap: 36px; }\n    .nav-links a {\n      font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;\n      color: rgba(255,255,255,0.4); transition: color 0.25s, letter-spacing 0.3s;\n      position: relative; padding-bottom: 2px;\n    }\n    .nav-links a::after {\n      content: ''; position: absolute; bottom: -2px; left: 0;\n      width: 0; height: 1px; background: var(--white);\n      transition: width 0.35s cubic-bezier(0.4,0,0.2,1);\n    }\n    .nav-links a:hover { color: rgba(255,255,255,0.9); letter-spacing: 0.14em; }\n    .nav-links a:hover::after { width: 100%; }\n\n    \/* \u79fb\u52a8\u7aef\u83dc\u5355 *\/\n    .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: rgba(255,255,255,0.6); transition: color 0.3s; }\n    .menu-toggle:hover { color: var(--white); }\n    .menu-toggle svg { width: 24px; height: 24px; }\n    .mobile-nav {\n      display: none; position: fixed; top: 0; right: -100%; width: 300px; height: 100vh;\n      background: var(--black); z-index: 1100; padding: 90px 36px 36px;\n      transition: right 0.4s cubic-bezier(0.23,1,0.32,1);\n      border-left: 1px solid rgba(255,255,255,0.06);\n    }\n    .mobile-nav.open { right: 0; }\n    .mobile-nav a {\n      display: block; color: rgba(255,255,255,0.6); text-decoration: none;\n      font-size: 16px; font-weight: 400; padding: 16px 0;\n      border-bottom: 1px solid rgba(255,255,255,0.06); transition: color 0.3s;\n    }\n    .mobile-nav a:hover { color: var(--white); }\n    .mobile-close {\n      position: absolute; top: 20px; right: 20px;\n      background: none; border: none; cursor: pointer; padding: 8px;\n      color: rgba(255,255,255,0.6); transition: color 0.3s;\n    }\n    .mobile-close:hover { color: var(--white); }\n    .mobile-overlay {\n      display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;\n      background: rgba(0,0,0,0.6); z-index: 1050;\n      opacity: 0; visibility: hidden; transition: all 0.3s ease;\n    }\n    .mobile-overlay.open { opacity: 1; visibility: visible; }\n\n    \/* \u5168\u5c4f\u82f1\u96c4 *\/\n    .screen {\n      width: 100vw; height: 100vh; position: relative; overflow: hidden;\n      background: var(--black); margin-top: 0;\n    }\n    .screen-img {\n      position: absolute; inset: 0; width: 100%; height: 100%;\n      object-fit: cover; opacity: 0; transition: opacity 1.6s cubic-bezier(0.4,0,0.2,1);\n    }\n    .screen-img.active { opacity: 1; }\n    .screen-vignette {\n      position: absolute; inset: 0;\n      background: radial-gradient(ellipse at center, transparent 30%, rgba(8,8,8,0.7) 100%),\n                  linear-gradient(to bottom, rgba(8,8,8,0.15) 0%, transparent 30%, transparent 60%, rgba(8,8,8,0.85) 100%);\n      pointer-events: none;\n    }\n    .screen-content {\n      position: absolute; bottom: 72px; left: 56px;\n      max-width: 680px; z-index: 2;\n    }\n    .screen-tag {\n      font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;\n      color: var(--warm); margin-bottom: 20px;\n    }\n    .screen-title {\n      font-size: clamp(48px, 8vw, 96px); font-weight: 700; letter-spacing: -0.04em;\n      line-height: 0.92; margin-bottom: 24px; color: var(--white);\n    }\n    .screen-body {\n      font-size: 15px; color: var(--text-dim); line-height: 1.7;\n      max-width: 420px; letter-spacing: 0.01em;\n    }\n    .screen-arrow {\n      position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);\n      display: flex; flex-direction: column; align-items: center; gap: 8px;\n      color: rgba(255,255,255,0.3); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;\n      animation: bounceDown 2.2s ease-in-out infinite;\n    }\n    .screen-arrow::before {\n      content: ''; display: block; width: 1px; height: 36px;\n      background: rgba(255,255,255,0.25);\n    }\n    @keyframes bounceDown { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(8px);} }\n    .screen-side {\n      position: absolute; right: 48px; bottom: 72px;\n      writing-mode: vertical-rl; font-size: 10px; letter-spacing: 0.2em;\n      text-transform: uppercase; color: rgba(255,255,255,0.2); z-index: 2;\n    }\n    .screen-dots {\n      position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%);\n      display: flex; gap: 8px; z-index: 3;\n    }\n    .dot {\n      width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.25);\n      cursor: pointer; border: none; transition: all 0.35s; padding: 0;\n    }\n    .dot.on { background: var(--white); transform: scale(1.5); }\n\n    \/* \u7ae0\u8282 *\/\n    .section { padding: 100px 56px 60px; }\n    .section-header { margin-bottom: 40px; }\n    .section-index {\n      font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;\n      color: var(--warm); opacity: 0.7; margin-bottom: 10px;\n    }\n    .section-title {\n      font-size: clamp(32px, 4.5vw, 56px); font-weight: 700; letter-spacing: -0.04em;\n      line-height: 1.0; margin-bottom: 10px;\n    }\n    .section-sub { font-size: 14px; color: var(--text-dim); max-width: 420px; line-height: 1.7; }\n\n    \/* \u4f5c\u54c1\u7f51\u683c *\/\n    .gallery-grid {\n      display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;\n    }\n    .card {\n      position: relative; overflow: hidden; cursor: pointer;\n      background: rgba(255,255,255,0.02); transition: background 0.4s ease;\n    }\n    .card:hover { background: rgba(255,255,255,0.06); }\n    .card-image { aspect-ratio: 16\/10; overflow: hidden; pointer-events: none; }\n    .card-image img {\n      width: 100%; height: 100%; object-fit: cover;\n      transition: transform 0.9s cubic-bezier(0.4,0,0.2,1), filter 0.5s;\n    }\n    .card:hover .card-image img { transform: scale(1.04); filter: brightness(0.8); }\n    .card-content { padding: 16px 20px 20px; }\n    .card-category {\n      font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;\n      color: var(--text-faint); margin-bottom: 6px;\n    }\n    .card-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; color: var(--white); }\n    .card-desc {\n      font-size: 13px; color: var(--text-dim); line-height: 1.5;\n      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;\n    }\n\n    \/* \u6570\u5b57\u533a *\/\n    .numbers {\n      display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 0;\n    }\n    .num-cell {\n      background: var(--black); padding: 56px 32px; text-align: center;\n      border-top: 1px solid rgba(255,255,255,0.05);\n    }\n    .num-val {\n      font-size: clamp(44px, 5.5vw, 72px); font-weight: 700; letter-spacing: -0.04em;\n      line-height: 1.0; margin-bottom: 10px;\n      background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.6) 100%);\n      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\n    }\n    .num-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }\n\n    \/* CTA *\/\n    .cta-section {\n      padding: 120px 56px; text-align: left; display: flex;\n      align-items: flex-end; justify-content: space-between; gap: 40px;\n      border-top: 1px solid rgba(255,255,255,0.05);\n    }\n    .cta-label {\n      font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;\n      color: var(--warm); opacity: 0.7; margin-bottom: 16px;\n    }\n    .cta-title {\n      font-size: clamp(36px, 5.5vw, 72px); font-weight: 700; letter-spacing: -0.04em; line-height: 0.95;\n    }\n    .cta-link {\n      display: inline-flex; align-items: center; gap: 14px;\n      font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;\n      color: var(--black); background: var(--white); padding: 16px 32px;\n      border-radius: 100px; white-space: nowrap; transition: transform 0.25s, box-shadow 0.25s;\n      flex-shrink: 0; align-self: flex-end;\n    }\n    .cta-link:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(255,255,255,0.12); text-decoration: none; }\n\n    \/* FOOTER *\/\n    .footer {\n      padding: 32px 56px 24px; border-top: 1px solid rgba(255,255,255,0.04);\n      display: flex; flex-direction: column; align-items: center; gap: 16px;\n    }\n    .footer-main {\n      width: 100%; max-width: 1200px; display: flex; align-items: center;\n      justify-content: space-between; flex-wrap: wrap; gap: 12px;\n    }\n    .footer-left { font-size: 11px; color: rgba(255,255,255,0.18); }\n    .footer-right { display: flex; gap: 24px; }\n    .footer-right a { font-size: 11px; color: rgba(255,255,255,0.25); transition: color 0.2s; }\n    .footer-right a:hover { color: rgba(255,255,255,0.7); }\n    .footer-beian {\n      width: 100%; max-width: 1200px; display: flex; align-items: center;\n      justify-content: center; gap: 12px; padding-top: 16px;\n      border-top: 1px solid rgba(255,255,255,0.06);\n      font-size: 11px; color: rgba(255,255,255,0.2); flex-wrap: wrap;\n    }\n    .footer-beian a { color: rgba(255,255,255,0.2); transition: color 0.2s; display: inline-flex; align-items: center; gap: 4px; }\n    .footer-beian a:hover { color: rgba(255,255,255,0.5); }\n    .footer-beian img { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }\n    .footer-beian .sep { color: rgba(255,255,255,0.08); }\n\n    \/* BACK TOP *\/\n    .back-top {\n      position: fixed; bottom: 28px; right: 28px;\n      width: 42px; height: 42px; border-radius: 50%;\n      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);\n      color: rgba(255,255,255,0.4); cursor: pointer; display: flex;\n      align-items: center; justify-content: center; font-size: 16px;\n      opacity: 0; transform: translateY(12px); transition: opacity 0.3s, transform 0.3s; z-index: 50;\n    }\n    .back-top.visible { opacity: 1; transform: translateY(0); }\n    .back-top:hover { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.8); }\n\n    \/* \u54cd\u5e94\u5f0f *\/\n    @media (max-width: 900px) {\n      .nav { padding: 22px 24px; }\n      .menu-toggle { display: block; }\n      .nav-links { display: none; }\n      .mobile-nav { display: block; }\n      .mobile-overlay { display: block; }\n      .screen-content { bottom: 56px; left: 28px; right: 28px; }\n      .screen-side { display: none; }\n      .section { padding: 72px 24px 48px; }\n      .gallery-grid { grid-template-columns: repeat(2, 1fr); }\n      .numbers { grid-template-columns: repeat(2, 1fr); }\n      .num-cell { padding: 36px 20px; }\n      .cta-section { padding: 72px 24px; flex-direction: column; }\n      .footer { padding: 28px 24px 20px; }\n      .footer-main { flex-direction: column; text-align: center; }\n      .footer-right { justify-content: center; }\n    }\n    @media (max-width: 600px) {\n      .gallery-grid { grid-template-columns: 1fr; }\n      .card-image { aspect-ratio: 16\/10; }\n      .footer-beian { gap: 8px; font-size: 10px; }\n      .card-content { padding: 14px 16px 16px; }\n      .card-title { font-size: 16px; }\n    }\n  <\/style>\n\n\n  <!-- \u5bfc\u822a -->\n  <nav class=\"nav\" id=\"mainNav\">\n    <div class=\"nav-logo\">\n      <img decoding=\"async\" data-src=\"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/og-image.jpg\" alt=\"RyanRen\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 2560px; --smush-placeholder-aspect-ratio: 2560\/2560;\">\n      <span>RyanRen<\/span>\n    <\/div>\n    <ul class=\"nav-links\">\n      <li><a href=\"#commercial\">\u5546\u4e1a<\/a><\/li>\n      <li><a href=\"#entertainment\">\u5a31\u4e50<\/a><\/li>\n      <li><a href=\"#public\">\u516c\u5171<\/a><\/li>\n      <li><a href=\"#digital\">\u6570\u5b57<\/a><\/li>\n      <li><a href=\"https:\/\/ryanren.top\">\u9996\u9875<\/a><\/li>\n    <\/ul>\n    <button class=\"menu-toggle\" id=\"menuToggle\" aria-label=\"\u83dc\u5355\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 6h16M4 12h16M4 18h16\"><\/path><\/svg>\n    <\/button>\n  <\/nav>\n\n  <!-- \u79fb\u52a8\u7aef -->\n  <div class=\"mobile-overlay\" id=\"mobileOverlay\"><\/div>\n  <nav class=\"mobile-nav\" id=\"mobileNav\">\n    <button class=\"mobile-close\" id=\"mobileClose\" aria-label=\"\u5173\u95ed\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M18 6L6 18M6 6l12 12\"><\/path><\/svg>\n    <\/button>\n    <a href=\"#commercial\">\u5546\u4e1a\u7a7a\u95f4<\/a>\n    <a href=\"#entertainment\">\u5a31\u4e50\u7a7a\u95f4<\/a>\n    <a href=\"#public\">\u516c\u5171\u5c55\u9648<\/a>\n    <a href=\"#digital\">\u6570\u5b57\u5a92\u4f53<\/a>\n    <a href=\"https:\/\/ryanren.top\">\u9996\u9875<\/a>\n  <\/nav>\n\n  <!-- \u5168\u5c4f\u82f1\u96c4 (\u8f6e\u64ad\u65e0\u70b9\u51fb\u653e\u5927) -->\n  <section class=\"screen\" id=\"hero\">\n    <div class=\"screen-slides\" id=\"screenSlides\"><\/div>\n    <div class=\"screen-vignette\"><\/div>\n    <div class=\"screen-content\">\n      <div class=\"screen-tag\" id=\"screenTag\">\u4f5c\u54c1\u96c6 \u00b7 2026<\/div>\n      <h1 class=\"screen-title\" id=\"screenTitle\">\u4efb\u5fd7\u8fdc<br>\u8bbe\u8ba1\u4f5c\u54c1<\/h1>\n      <p class=\"screen-body\" id=\"screenBody\">\u7a7a\u95f4\u8bbe\u8ba1 \u00b7 \u54c1\u724c\u5347\u7ea7 \u00b7 \u5efa\u6a21\u6e32\u67d3<br>\u4e13\u6ce8\u521b\u610f\u4e0e\u5546\u4e1a\u4ef7\u503c\u7684\u878d\u5408<\/p>\n    <\/div>\n    <div class=\"screen-side\">RyanRen<\/div>\n    <div class=\"screen-arrow\">Scroll<\/div>\n    <div class=\"screen-dots\" id=\"screenDots\"><\/div>\n  <\/section>\n\n  <!-- \u4f5c\u54c1\u7f51\u683c -->\n  <section class=\"section\" id=\"commercial\">\n    <div class=\"section-header\">\n      <div class=\"section-index\">Category 01<\/div>\n      <h2 class=\"section-title\">\u5546\u4e1a\u7a7a\u95f4<\/h2>\n      <p class=\"section-sub\">\u52a0\u76df\u5e97\u8bbe\u8ba1 \u00b7 \u54c1\u724c\u5347\u7ea7 \u00b7 \u6863\u53e3\u96c6\u5408<\/p>\n    <\/div>\n    <div class=\"gallery-grid\" id=\"grid-commercial\"><\/div>\n  <\/section>\n\n  <section class=\"section\" id=\"entertainment\">\n    <div class=\"section-header\">\n      <div class=\"section-index\">Category 02<\/div>\n      <h2 class=\"section-title\">\u5a31\u4e50\u7a7a\u95f4<\/h2>\n      <p class=\"section-sub\">\u7403\u5e55\u5f71\u9662 \u00b7 \u6c89\u6d78\u4f53\u9a8c \u00b7 VR\u5143\u5b87\u5b99<\/p>\n    <\/div>\n    <div class=\"gallery-grid\" id=\"grid-entertainment\"><\/div>\n  <\/section>\n\n  <section class=\"section\" id=\"public\">\n    <div class=\"section-header\">\n      <div class=\"section-index\">Category 03<\/div>\n      <h2 class=\"section-title\">\u516c\u5171\u5c55\u9648<\/h2>\n      <p class=\"section-sub\">\u653f\u4f01\u9879\u76ee \u00b7 \u57ce\u5e02\u66f4\u65b0 \u00b7 \u6587\u5316\u7a7a\u95f4<\/p>\n    <\/div>\n    <div class=\"gallery-grid\" id=\"grid-public\"><\/div>\n  <\/section>\n\n  <section class=\"section\" id=\"digital\">\n    <div class=\"section-header\">\n      <div class=\"section-index\">Category 04<\/div>\n      <h2 class=\"section-title\">\u6570\u5b57\u5a92\u4f53<\/h2>\n      <p class=\"section-sub\">\u5efa\u6a21\u6e32\u67d3 \u00b7 \u89c6\u89c9\u5f71\u7247 \u00b7 \u5168\u666f\u6c89\u6d78<\/p>\n    <\/div>\n    <div class=\"gallery-grid\" id=\"grid-digital\"><\/div>\n  <\/section>\n\n  <!-- \u6570\u5b57\u533a -->\n  <section class=\"numbers\">\n    <div class=\"num-cell\"><div class=\"num-val\">1200+<\/div><div class=\"num-label\">\u8bbe\u8ba1\u7a7a\u95f4<\/div><\/div>\n    <div class=\"num-cell\"><div class=\"num-val\">4<\/div><div class=\"num-label\">\u670d\u52a1\u677f\u5757<\/div><\/div>\n    <div class=\"num-cell\"><div class=\"num-val\">2020<\/div><div class=\"num-label\">\u8bbe\u8ba1\u8d77\u70b9<\/div><\/div>\n    <div class=\"num-cell\"><div class=\"num-val\">\u4e13\u6ce8<\/div><div class=\"num-label\">\u521b\u610f\u4e0e\u5546\u4e1a\u4ef7\u503c<\/div><\/div>\n  <\/section>\n\n  <!-- CTA -->\n  <section>\n    <div class=\"cta-section\">\n      <div class=\"cta-text\">\n        <div class=\"cta-label\">About Design<\/div>\n        <h2 class=\"cta-title\">\u804a\u804a\u4f60\u7684<br>\u9879\u76ee\u6784\u60f3<\/h2>\n      <\/div>\n      <a href=\"https:\/\/www.ryanren.top\/index.php\/lxw\/\" class=\"cta-link\">\u8054\u7cfb\u5408\u4f5c \u2192<\/a>\n    <\/div>\n  <\/section>\n\n  <!-- FOOTER -->\n  <footer class=\"footer\">\n    <div class=\"footer-main\">\n      <div class=\"footer-left\">\u00a9 2026 \u4efb\u5fd7\u8fdc \u00b7 \u7a7a\u95f4\u8bbe\u8ba1\u4f5c\u54c1\u96c6<\/div>\n      <div class=\"footer-right\">\n        <a href=\"https:\/\/ryanren.top\">\u9996\u9875<\/a>\n        <a href=\"https:\/\/www.ryanren.top\/index.php\/lxw\/\">\u8054\u7cfb<\/a>\n      <\/div>\n    <\/div>\n    <div class=\"footer-beian\">\n      <a href=\"https:\/\/beian.miit.gov.cn\/\" target=\"_blank\">\u9c81ICP\u59072026001577\u53f7-1<\/a>\n      <span class=\"sep\">|<\/span>\n      <a href=\"https:\/\/beian.mps.gov.cn\/#\/query\/webSearch?code=37172402000457\" target=\"_blank\">\n        <img decoding=\"async\" data-src=\"https:\/\/www.beian.gov.cn\/img\/ghs.png\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\"> \u9c81\u516c\u7f51\u5b89\u590737172402000457\u53f7\n      <\/a>\n    <\/div>\n  <\/footer>\n\n  <!-- BACK TOP -->\n  <button class=\"back-top\" id=\"backTop\">\u2191<\/button>\n\n  <script>\n    (function() {\n      'use strict';\n\n      \/\/ \u8f6e\u64ad\u6570\u636e\n      const SLIDES = [\n        { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/GD01.jpg\", alt: \"\u5546\u4e1a\u7a7a\u95f4\", tag: \"\u4f5c\u54c1\u96c6 \u00b7 2026\", title: \"\u4efb\u5fd7\u8fdc\", sub: \"\u8bbe\u8ba1\u4f5c\u54c1\", body: \"\u7a7a\u95f4\u8bbe\u8ba1 \u00b7 \u54c1\u724c\u5347\u7ea7 \u00b7 \u5efa\u6a21\u6e32\u67d3\\n\u4e13\u6ce8\u521b\u610f\u4e0e\u5546\u4e1a\u4ef7\u503c\u7684\u878d\u5408\" },\n        { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/CLBFM1-scaled.jpg\", alt: \"\u5a31\u4e50\u7a7a\u95f4\", tag: \"Category 01\", title: \"\u5546\u4e1a\", sub: \"\u7a7a\u95f4\", body: \"\u52a0\u76df\u5e97\u8bbe\u8ba1 \u00b7 \u54c1\u724c\u5347\u7ea7\\n\u8ba9\u6bcf\u4e00\u4e2a\u7a7a\u95f4\u90fd\u6210\u4e3a\u54c1\u724c\u89e6\u70b9\" },\n        { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/DEBFM1-scaled.jpg\", alt: \"\u516c\u5171\u5c55\u9648\", tag: \"Category 02\", title: \"\u5a31\u4e50\", sub: \"\u7a7a\u95f4\", body: \"\u7403\u5e55\u5f71\u9662 \u00b7 \u6c89\u6d78\u4f53\u9a8c\\n\u521b\u9020\u8d85\u8d8a\u73b0\u5b9e\u7684\u611f\u5b98\u4e4b\u65c5\" },\n        { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/JZYSFM1.jpg\", alt: \"\u6570\u5b57\u5a92\u4f53\", tag: \"Category 03\", title: \"\u516c\u5171\", sub: \"\u5c55\u9648\", body: \"\u653f\u4f01\u9879\u76ee \u00b7 \u57ce\u5e02\u66f4\u65b0\\n\u4ee5\u8bbe\u8ba1\u56de\u5e94\u57ce\u5e02\u516c\u5171\u9700\u6c42\" },\n        { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/wxcsc-1-e1773306333433.jpg\", alt: \"\u57ce\u5e02\u66f4\u65b0\", tag: \"Category 04\", title: \"\u6570\u5b57\", sub: \"\u5a92\u4f53\", body: \"\u5efa\u6a21\u6e32\u67d3 \u00b7 \u89c6\u89c9\u5f71\u7247\\n\u4ece\u6982\u5ff5\u5230\u6210\u54c1\u7684\u5168\u94fe\u8def\u670d\u52a1\" }\n      ];\n\n      \/\/ \u4f5c\u54c1\u6570\u636e\n      const PROJECTS = {\n        commercial: [\n          { title: \"\u749e\u4e3d\u5496\u5561\u6cc9\u57ce\u516c\u56ed\u5e97\", desc: \"\u5728\u6cc9\u57ce\u516c\u56ed\u7684\u7eff\u610f\u4e2d\uff0c\u4ee5\u9759\u8c27\u4e2d\u7684\u4e13\u6ce8\u4e3a\u6982\u5ff5\uff0c\u8425\u9020\u4e0e\u81ea\u7136\u5171\u751f\u7684\u7cbe\u54c1\u5496\u5561\u7a7a\u95f4\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/01\/puli-9.jpg\", link: \"https:\/\/ryanren.top\/index.php\/plkf\/\" },\n          { title: \"\u5947\u745e\u5546\u7528\u8f66 \u00b7 \u96f6\u7c73\u8f7b\u5361\", desc: \"\u4ee5\u5de5\u4e1a\u529b\u91cf\u4e3a\u6838\u5fc3\uff0c\u901a\u8fc7\u89c6\u89c9\u4e0e\u7a7a\u95f4\u8bed\u8a00\u8be0\u91ca\u5546\u7528\u8f66\u54c1\u724c\u7684\u4e13\u4e1a\u6027\u4e0e\u53ef\u9760\u6027\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/LMfm-7-e1773302513844.jpg\", link: \"https:\/\/ryanren.top\/index.php\/lmsi\/\" },\n          { title: \"\u8f66\u9c81\u73ed\u6c7d\u8f66\u7f8e\u5bb9\u4e2d\u5fc3\", desc: \"\u6807\u51c6\u5316\u670d\u52a1\u6d41\u7a0b\u4e3a\u9aa8\u67b6\uff0c\u901a\u900f\u5e03\u5c40\u4e0e\u5de5\u4e1a\u611f\u6750\u8d28\u4f20\u9012\u4e13\u4e1a\u53ef\u4fe1\u8d56\u7684\u54c1\u724c\u6c14\u8d28\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/01\/FM-1-scaled.jpg\", link: \"https:\/\/ryanren.top\/index.php\/qc\/\" },\n          { title: \"\u5361\u670d\u5361\u6c7d\u8f66\u670d\u52a1\u4e2d\u5fc3\", desc: \"\u56f4\u7ed5\u6280\u672f\u53ef\u89c6\u5316\u91cd\u6784\u7a7a\u95f4\uff0c\u8ba9\u517b\u62a4\u6d41\u7a0b\u6210\u4e3a\u4f53\u9a8c\u4eae\u70b9\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/kfk1-scaled-e1773301047600.jpg\", link: \"https:\/\/ryanren.top\/index.php\/kfk\/\" },\n          { title: \"\u5fb7\u5c14\u5821\u5c0f\u9152\u9986\", desc: \"\u5c06\u5fb7\u5f0f\u5e02\u96c6\u6c1b\u56f4\u5f15\u5165\u5ba4\u5185\uff0c\u901a\u8fc7\u6750\u8d28\u6df7\u642d\u4e0e\u706f\u5149\u5c42\u6b21\uff0c\u521b\u9020\u8f7b\u677e\u81ea\u5728\u7684\u793e\u4ea4\u636e\u70b9\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/gyqs-2-scaled-e1773303405486.jpg\", link: \"https:\/\/ryanren.top\/index.php\/deerbao\/\" },\n          { title: \"\u9152\u53f7\u5df4\u58eb\u7cbe\u917f\u9152\u9986\", desc: \"\u590d\u53e4\u5df4\u58eb\u4e3b\u9898\u9152\u9986\uff0c\u878d\u5408\u7cbe\u917f\u6587\u5316\u4e0e\u793e\u4ea4\u7a7a\u95f4\uff0c\u6253\u9020\u57ce\u5e02\u5fae\u91ba\u65b0\u5730\u6807\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/IMG_0168-e1775876585720.jpg\", link: \"https:\/\/ryanren.top\/index.php\/juhaobus\/\" },\n          { title: \"\u805a\u5f71\u5496\u79c1\u4eba\u5f71\u9662\", desc: \"\u9488\u5bf9\u5c0f\u578b\u7a7a\u95f4\u7684\u529f\u80fd\u4e0e\u6c1b\u56f4\u6574\u5408\u8bbe\u8ba1\uff0c\u6253\u9020\u4e13\u5c5e\u89c2\u5f71\u79c1\u5bc6\u611f\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/01\/FM-6.jpg\", link: \"https:\/\/ryanren.top\/index.php\/qt\/\" },\n          { title: \"\u5c0f\u5403\u6863\u53e3\u5408\u96c6\", desc: \"\u7279\u8272\u5c0f\u5403\u6863\u53e3\u89c6\u89c9\u4e0e\u7a7a\u95f4\u4e00\u4f53\u5316\u5347\u7ea7\uff0c\u6253\u9020\u9ad8\u576a\u6548\u3001\u5f3a\u590d\u8d2d\u7684\u6f6e\u6d41\u7f8e\u98df\u96c6\u5408\u7ad9\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/05\/CYDZ5.jpg\", link: \"https:\/\/ryanren.top\/index.php\/ysbrand\/\" },\n          { title: \"\u6b23\u5bb6\u95e8\u7a97\", desc: \"\u73b0\u4ee3\u5de5\u4e1a\u7f8e\u5b66\u4e0e\u54c1\u724c\u4f53\u9a8c\u7684\u878d\u5408\uff0c\u7ea68000m\u00b2\u5de5\u4e1a\u603b\u90e8\u7a7a\u95f4\u8bbe\u8ba1\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/08\/XINHOME.webp\", link: \"https:\/\/ryanren.top\/index.php\/1420-2\/\" }\n        ],\n        entertainment: [\n          { title: \"\u6cf0\u56fd9D\u7403\u5e55\u5f71\u9662\", desc: \"\u5c06\u6cf0\u56fd\u6587\u5316\u5143\u7d20\u8f6c\u8bd1\u4e3a\u89c6\u89c9\u7b26\u53f7\uff0c\u878d\u54089D\u4e92\u52a8\u6280\u672f\uff0c\u6253\u9020\u8de8\u56fd\u754c\u7684\u6c89\u6d78\u5f0f\u5947\u5e7b\u4f53\u9a8c\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/01\/TG-2-scaled.jpg\", link: \"https:\/\/ryanren.top\/index.php\/thfxyy\/\" },\n          { title: \"9D\u7403\u5e55\u98de\u884c\u5f71\u9662\", desc: \"\u7ed3\u5408\u7403\u5e55\u4e0e\u52a8\u6001\u5ea7\u6905\uff0c\u4ee5\u51cc\u7a7a\u7ff1\u7fd4\u4e3a\u53d9\u4e8b\u4e3b\u7ebf\uff0c\u6784\u5efa\u5b8c\u6574\u7684\u611f\u5b98\u6c89\u6d78\u6d41\u7a0b\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/08\/%E5%B9%BF%E4%B8%9C%E4%BD%9B%E5%B1%B1%E4%B9%90%E4%BA%BA%E7%A0%81%E5%A4%B424.09-1.webp\", link: \"https:\/\/ryanren.top\/index.php\/qmyy\/\" },\n          { title: \"\u897f\u65b9\u9f99\u9020\u578b\u7403\u5e55\u5f71\u9662\", desc: \"\u4ee5\u897f\u65b9\u9f99\u4e3aIP\u539f\u578b\uff0c\u901a\u8fc7\u5f02\u5f62\u7ed3\u6784\u4e0e\u6570\u5b57\u5a92\u4f53\u878d\u5408\uff0c\u5851\u9020\u5177\u6709\u8bc6\u522b\u5ea6\u7684\u5947\u5e7b\u5730\u6807\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/01\/HSKST-3-scaled.jpg\", link: \"https:\/\/ryanren.top\/index.php\/hsksy\/\" },\n          { title: \"\u5a01DY 9D\u7403\u5e55\u98de\u884c\u5f71\u9662\", desc: \"\u9ed1\u7070\u4e3b\u8c03\u642d\u914d\u84dd\u7d2b\u9713\u8679\uff0c\u79d1\u5e7b\u53d9\u4e8b\u4e0e\u591a\u8bed\u8a00\u6807\u8bc6\u8986\u76d6\uff0c\u6253\u9020\u56fd\u9645\u5316\u7684\u6c89\u6d78\u5a31\u4e50\u7a7a\u95f4\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/01\/WY-1-scaled.jpg\", link: \"https:\/\/ryanren.top\/index.php\/wa\/\" },\n          { title: \"\u6b22\u4e50\u7801\u5934 VR\u5143\u5b87\u5b99\", desc: \"\u8d5b\u535a\u7f8e\u5b66\u4e0eVR\u6280\u672f\u878d\u5408\uff0c\u52a8\u611f\u5e73\u53f0\u4e0e\u5168\u611f\u6c89\u6d78\u4f53\u9a8c\uff0c\u6253\u9020\u672a\u6765\u611f\u79d1\u6280\u5a31\u4e50\u65b0\u5730\u6807\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/08\/%E9%99%95%E8%A5%BF%E8%A5%BF%E5%AE%89%E4%B9%90%E4%BA%BA%E7%A0%81%E5%A4%B424.12-3.webp\", link: \"https:\/\/ryanren.top\/index.php\/vr\/\" }\n        ],\n        public: [\n          { title: \"\u829c\u6e56\u9e20\u5179\u591c\u5e02\", desc: \"\u4ee5\u591c\u7ecf\u6d4e\u6fc0\u6d3b\u5668\u4e3a\u5b9a\u4f4d\uff0c\u901a\u8fc7\u52a8\u7ebf\u91cd\u7ec4\u4e0e\u706f\u5149\u7b56\u7565\uff0c\u91cd\u5851\u57ce\u5e02\u70df\u706b\u6c14\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/01\/FM-4-scaled.jpg\", link: \"https:\/\/ryanren.top\/index.php\/jzys\/\" },\n          { title: \"\u4f1f\u661f\u83dc\u5e02\u573a\u6539\u9020\", desc: \"\u4ece\u793e\u533a\u8282\u70b9\u51fa\u53d1\uff0c\u7528\u6a21\u5757\u5316\u8bbe\u8ba1\u4e0e\u89c6\u89c9\u7cfb\u7edf\u5347\u7ea7\uff0c\u8ba9\u4f20\u7edf\u83dc\u573a\u6210\u4e3a\u90bb\u91cc\u793e\u4ea4\u65b0\u573a\u6240\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/wxcsc-1-e1773306333433.jpg\", link: \"https:\/\/ryanren.top\/index.php\/wxcsc\/\" },\n          { title: \"\u829c\u6e56\u5b98\u9661\u516c\u4ea4\u7ad9\u4e0e\u5730\u94c1\u7ad9\", desc: \"\u4e00\u4f53\u5316\u5bfc\u89c6\u4e0e\u7a7a\u95f4\u6574\u5408\uff0c\u63d0\u5347\u901a\u52e4\u6548\u7387\u7684\u540c\u65f6\uff0c\u4e3a\u57ce\u5e02\u516c\u5171\u7a7a\u95f4\u6ce8\u5165\u79e9\u5e8f\u4e0e\u6e29\u5ea6\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/gdgj-1-e1773300430816.jpg\", link: \"https:\/\/ryanren.top\/index.php\/zqxm\/\" },\n          { title: \"\u5927\u6210\u662d\u548c\u7119\u70e4\u5c55\u4f4d\", desc: \"70m\u00b2\u6d41\u52a8\u5bb4\u5e2d\u7a7a\u95f4\uff0c\u4ee5\u9ea6\u9999\u6d41\u8f6c\u4e3a\u6982\u5ff5\uff0c\u73af\u5f62\u52a8\u7ebf\u4e32\u8054\u9ea6\u6e90\u3001\u9762\u56e2\u5267\u573a\u3001\u660e\u6863\u70e4\u7089\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/dsf-2.jpg\", link: \"https:\/\/ryanren.top\/index.php\/exhibition-dsf\/\" },\n          { title: \"GOMROS \u7cfb\u7edf\u5c55\u5385\", desc: \"\u7ea61200m\u00b2\uff0c\u4ee5\u6781\u7b80\u51e0\u4f55\u4e0e\u5168\u666f\u79e9\u5e8f\u6784\u5efa\u7cfb\u7edf\u4f53\u9a8c\u573a\u57df\uff0c\u94dd\u578b\u6750\u4e0e\u73bb\u7483\u6784\u6210\u7684\u6a21\u5757\u5316\u5c55\u9648\u7cfb\u7edf\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/08\/GOMISO-7.webp\", link: \"https:\/\/ryanren.top\/index.php\/gomros\/\" }\n        ],\n        digital: [\n          { title: \"\u6c89\u6d78\u5f0f\u5168\u666f\u7a7a\u95f4\", desc: \"360\u00b0\u5168\u666f\u5f71\u50cf\u4e0e\u865a\u62df\u73b0\u5b9e\u7ed3\u5408\uff0c\u4e3a\u6587\u65c5\u4e0e\u5c55\u9648\u63d0\u4f9b\u53ef\u4ea4\u4e92\u7684\u6570\u5b57\u5b6a\u751f\u4f53\u9a8c\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/qjt12-e1772594640677.png\", link: \"https:\/\/ryanren.top\/index.php\/535-2\/\" },\n          { title: \"\u521b\u610f\u89c6\u89c9\u5f71\u7247\", desc: \"\u54c1\u724c\u5f62\u8c61\u7247\u3001\u4ea7\u54c1\u89c6\u9891\u3001\u52a8\u753b\u77ed\u7247\uff0c\u7528\u5f71\u50cf\u4f20\u9012\u6838\u5fc3\u4ef7\u503c\uff0c\u5f3a\u5316\u54c1\u724c\u53d9\u4e8b\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/GYF.png\", link: \"https:\/\/ryanren.top\/index.php\/video\/\" },\n          { title: \"\u5efa\u6a21\u4f5c\u54c1\u96c6\", desc: \"\u9910\u8f66\u00b7\u821e\u53f0\u00b7IP\u624b\u529e\u00b7\u5c0f\u63a8\u8f66\uff0c\u5168\u54c1\u7c7b3D\u5efa\u6a21\u670d\u52a1\uff0c\u4e13\u6ce8\u5546\u4e1a\u6a21\u578b\u4e0e\u827a\u672f\u7684\u7cbe\u51c6\u8868\u8fbe\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/icecar1.jpg\", link: \"https:\/\/ryanren.top\/index.php\/modle\/\" },\n          { title: \"\u5168\u90e8\u56fe\u7247\", desc: \"\u5168\u54c1\u7c7b\u5efa\u6a21\u4f5c\u54c1\u56fe\u518c\uff0c\u6db5\u76d6\u9910\u8f66\u3001\u821e\u53f0\u3001IP\u624b\u529e\u3001\u4ea7\u54c1\u6e32\u67d3\u7b49\u6301\u7eed\u66f4\u65b0\u76843D\u5efa\u6a21\u5408\u96c6\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/01\/FM-7.jpg\", link: \"https:\/\/ryanren.top\/index.php\/gd\/\" }\n        ]\n      };\n\n      \/\/ ----- \u79fb\u52a8\u7aef\u5bfc\u822a -----\n      const menuToggle = document.getElementById('menuToggle');\n      const mobileNav = document.getElementById('mobileNav');\n      const mobileOverlay = document.getElementById('mobileOverlay');\n      const mobileClose = document.getElementById('mobileClose');\n\n      function openNav() { mobileNav.classList.add('open'); mobileOverlay.classList.add('open'); document.body.style.overflow = 'hidden'; }\n      function closeNav() { mobileNav.classList.remove('open'); mobileOverlay.classList.remove('open'); document.body.style.overflow = ''; }\n      menuToggle.addEventListener('click', openNav);\n      mobileClose.addEventListener('click', closeNav);\n      mobileOverlay.addEventListener('click', closeNav);\n\n      \/\/ ----- \u8f6e\u64ad (\u65e0\u70b9\u51fb\u653e\u5927) -----\n      let cur = 0;\n      let timer = null;\n      const slidesEl = document.getElementById('screenSlides');\n      const dotsEl = document.getElementById('screenDots');\n      const tagEl = document.getElementById('screenTag');\n      const titleEl = document.getElementById('screenTitle');\n      const bodyEl = document.getElementById('screenBody');\n\n      function buildSlides() {\n        slidesEl.innerHTML = '';\n        dotsEl.innerHTML = '';\n        SLIDES.forEach((s, i) => {\n          const div = document.createElement('div');\n          div.style.cssText = 'position:absolute;inset:0;opacity:0;transition:opacity 1.6s';\n          const img = document.createElement('img');\n          img.src = s.src;\n          img.alt = s.alt;\n          img.style.cssText = 'width:100%;height:100%;object-fit:cover;';\n          img.loading = i === 0 ? 'eager' : 'lazy';\n          \/\/ \u79fb\u9664\u70b9\u51fb\u76d1\u542c\uff0c\u65e0\u653e\u5927\u529f\u80fd\n          div.appendChild(img);\n          slidesEl.appendChild(div);\n\n          const dot = document.createElement('button');\n          dot.className = 'dot' + (i === 0 ? ' on' : '');\n          dot.addEventListener('click', () => go(i));\n          dotsEl.appendChild(dot);\n        });\n        showSlide(0);\n      }\n\n      function showSlide(idx) {\n        const imgs = slidesEl.querySelectorAll('div > img');\n        imgs.forEach((img, i) => {\n          img.parentElement.style.opacity = i === idx ? '1' : '0';\n        });\n        dotsEl.querySelectorAll('.dot').forEach((d, i) => {\n          d.classList.toggle('on', i === idx);\n        });\n        const s = SLIDES[idx];\n        tagEl.textContent = s.tag;\n        titleEl.innerHTML = (s.title + '<br>' + s.sub);\n        bodyEl.innerHTML = s.body.replace(\/\\n\/g, '<br>');\n      }\n\n      function go(idx) {\n        clearTimeout(timer);\n        showSlide(idx);\n        cur = idx;\n        timer = setTimeout(() => go((cur + 1) % SLIDES.length), 4500);\n      }\n\n      function next() { go((cur + 1) % SLIDES.length); }\n      function prev() { go((cur - 1 + SLIDES.length) % SLIDES.length); }\n\n      \/\/ ----- \u6784\u5efa\u4f5c\u54c1\u7f51\u683c -----\n      function buildGrid(containerId, items) {\n        const container = document.getElementById(containerId);\n        if (!container) return;\n        container.innerHTML = '';\n        items.forEach(item => {\n          const card = document.createElement('div');\n          card.className = 'card';\n          card.innerHTML = `\n            <div class=\"card-image\"><img decoding=\"async\" src=\"${item.img}\" alt=\"${item.title}\" loading=\"lazy\" onerror=\"this.src='https:\/\/placehold.co\/600x400\/111\/555?text=Image'\"><\/div>\n            <div class=\"card-content\">\n              <div class=\"card-category\">${containerId.replace('grid-', '')}<\/div>\n              <div class=\"card-title\">${item.title}<\/div>\n              <div class=\"card-desc\">${item.desc}<\/div>\n            <\/div>\n          `;\n          card.addEventListener('click', () => {\n            if (item.link) window.open(item.link, '_blank');\n          });\n          container.appendChild(card);\n        });\n      }\n\n      buildGrid('grid-commercial', PROJECTS.commercial);\n      buildGrid('grid-entertainment', PROJECTS.entertainment);\n      buildGrid('grid-public', PROJECTS.public);\n      buildGrid('grid-digital', PROJECTS.digital);\n\n      \/\/ ----- \u542f\u52a8\u8f6e\u64ad -----\n      buildSlides();\n      timer = setTimeout(() => go(1), 4500);\n\n      \/\/ \u9f20\u6807\u60ac\u505c\u6682\u505c\n      const hero = document.getElementById('hero');\n      hero.addEventListener('mouseenter', () => clearTimeout(timer));\n      hero.addEventListener('mouseleave', () => {\n        timer = setTimeout(() => go((cur + 1) % SLIDES.length), 4500);\n      });\n      \/\/ \u70b9\u51fb\u8f6e\u64ad\u533a\u57df\u4ec5\u5207\u6362\uff08\u4e0d\u653e\u5927\uff09\n      hero.addEventListener('click', (e) => {\n        if (!e.target.closest('.dot')) { clearTimeout(timer); next(); }\n      });\n\n      \/\/ \u952e\u76d8\u63a7\u5236\n      document.addEventListener('keydown', (e) => {\n        if (e.key === 'ArrowRight') { clearTimeout(timer); next(); }\n        if (e.key === 'ArrowLeft') { clearTimeout(timer); prev(); }\n      });\n\n      \/\/ ----- \u5bfc\u822a\u6eda\u52a8\u6548\u679c -----\n      const nav = document.querySelector('.nav');\n      window.addEventListener('scroll', () => {\n        nav.classList.toggle('scrolled', window.scrollY > 60);\n      }, { passive: true });\n\n      \/\/ ----- \u5165\u573a\u52a8\u753b -----\n      const revealEls = document.querySelectorAll('.section,.numbers,.cta-section');\n      const revealObs = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            entry.target.style.transition = 'opacity 0.9s cubic-bezier(0.4,0,0.2,1), transform 0.9s cubic-bezier(0.4,0,0.2,1)';\n            entry.target.style.opacity = '1';\n            entry.target.style.transform = 'translateY(0)';\n            revealObs.unobserve(entry.target);\n          }\n        });\n      }, { threshold: 0.08 });\n      revealEls.forEach(el => {\n        el.style.opacity = '0';\n        el.style.transform = 'translateY(32px)';\n        revealObs.observe(el);\n      });\n\n      \/\/ ----- Back Top -----\n      const bt = document.getElementById('backTop');\n      window.addEventListener('scroll', () => {\n        bt.classList.toggle('visible', window.scrollY > 600);\n      }, { passive: true });\n      bt.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));\n\n      \/\/ ----- \u951a\u70b9\u5e73\u6ed1 -----\n      document.querySelectorAll('a[href^=\"#\"]').forEach(a => {\n        a.addEventListener('click', e => {\n          e.preventDefault();\n          const t = document.querySelector(a.getAttribute('href'));\n          if (t) {\n            closeNav();\n            t.scrollIntoView({ behavior: 'smooth', block: 'start' });\n          }\n        });\n      });\n\n      \/\/ \u6ce8\u610f\uff1aModal \u529f\u80fd\u5df2\u79fb\u9664\uff0c\u8f6e\u64ad\u56fe\u4e0d\u518d\u653e\u5927\n\n    })();\n  <\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u4efb\u5fd7\u8fdc \u00b7 \u7a7a\u95f4\u8bbe\u8ba1\u4f5c\u54c1\u96c6 RyanRen \u5546\u4e1a \u5a31\u4e50 \u516c\u5171 \u6570\u5b57 \u9996\u9875 \u5546\u4e1a\u7a7a\u95f4 \u5a31\u4e50\u7a7a\u95f4 \u516c\u5171\u5c55\u9648 \u6570\u5b57\u5a92 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1063,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank","meta":{"footnotes":""},"class_list":["post-494","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/pages\/494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/comments?post=494"}],"version-history":[{"count":108,"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/pages\/494\/revisions"}],"predecessor-version":[{"id":1581,"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/pages\/494\/revisions\/1581"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/media\/1063"}],"wp:attachment":[{"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/media?parent=494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}