{"id":5863,"date":"2025-08-25T15:26:59","date_gmt":"2025-08-25T07:26:59","guid":{"rendered":"https:\/\/refine-lab.com\/list-page\/"},"modified":"2025-08-25T15:26:59","modified_gmt":"2025-08-25T07:26:59","slug":"list-page","status":"publish","type":"page","link":"https:\/\/refine-lab.com\/en\/list-page\/","title":{"rendered":"Work"},"content":{"rendered":"<section x-data menu-theme=\"light\" class=\"relative max-w-[2560px] mx-auto overflow-hidden\">\n    <div class=\"text-center w-full lg:max-w-[560px] mx-auto px-3 lg:px-0 mt-[100px] mb-10 lg:mb-20 xl:mb-[160px]\">\n        <h1 x-aos-clip-line-up=\"{ delay: 200 }\" class=\"text-gray-900 mb-5\">WORK<\/h1>\n        <p x-aos-clip-line-up=\"{ delay: 400 }\" class=\"font-geist\">We work with a diverse range of clients \u2014 from startups and creative brands to established enterprises.<\/p>\n    <\/div>\n\n         <div x-data=\"{ active: 1, prev: 1, total: 3, timer: 0 }\" \n        x-init=\"\n            active = total;\n            animate($el.querySelectorAll('[ani-scale-x]'), { scaleX: 200 });\n            goPrev = function(){\n                slide = $el.querySelectorAll('.slide')[active-1];\n                animate(slide.querySelectorAll('[ani-scale-x]'), { duration: 2000, scaleX: 200, x: ['0%','-25%'], filter: ['brightness(100%)','brightness(200%)'] });\n                animate(slide.querySelectorAll('[ani-clip-down]'), { opacity: 0 });\n                animate(slide.querySelectorAll('[ani-zoom-out]'), { opacity: 0 });\n                setTimeout(function(){\n                    active = active == 1 ? total : active - 1;\n                }, 800);\n            };\n            goNext = function(){\n                slide = $el.querySelectorAll('.slide')[active-1];\n                animate(slide.querySelectorAll('[ani-scale-x]'), { duration: 2000, scaleX: 200, x: ['0%','-25%'], filter: ['brightness(100%)','brightness(200%)'] });\n                animate(slide.querySelectorAll('[ani-clip-down]'), { opacity: 0 });\n                animate(slide.querySelectorAll('[ani-zoom-out]'), { opacity: 0 });\n                setTimeout(function(){\n                    active = active == total ? 1: active + 1;\n                }, 800);\n            };\n            $watch('active', function (val, old) {\n                prev = old;\n                animate($el.querySelector('.slider-current-number .list'), { y: -(val - 1) * 24 });\n\n                prev_slide = $el.querySelectorAll('.slide')[old-1];\n                curr_slide = $el.querySelectorAll('.slide')[val-1];\n                animate(curr_slide.querySelectorAll('[ani-scale-x]'), { scaleX: 1, x: ['-25%','0%'], opacity: 1, duration: 2000, filter: ['brightness(300%)','brightness(100%)'] });\n                animate(prev_slide.querySelectorAll('[ani-clip-down]'), { opacity: 1 });\n                animate(curr_slide.querySelectorAll('[ani-clip-down]'), {\n                    clipPath: ['polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)', 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)'],\n                    translateY: ['100%', '0%'],\n                    delay: stagger(150, { start: 0 })\n                });\n                animate(curr_slide.querySelector('[ani-zoom-out]'), {\n                    opacity: [0, 1],\n                    scale: [0.8, 1],\n                    delay: 800\n                });\n            });\n            active = 1;\n            let duration = 7;\n            setInterval(function() {\n                timer++;\n                if (timer == duration) {\n                    goNext();\n                    timer = 0;\n                }\n            }, 1000);\n        \" \n        class=\"mb-20 mx-3 lg:mx-10 3xl:-mt-[160px] relative\">\n        <!-- Slider main container -->\n        <div class=\"\">\n            <!-- Additional required wrapper -->\n            <div class=\"wrapper\">\n                <!-- Slides -->\n                                                <div x-show=\"active==1\" class=\"slide overflow-hidden\">\n                    <div class=\"relative\">\n                        <div class=\"absolute inset-0 3xl:top-[120px] rounded-2xl overflow-hidden\">\n                            <img decoding=\"async\" ani-scale-x src=\"https:\/\/refine-lab.com\/wp-content\/uploads\/2025\/08\/bg-work-slider-1.webp\" alt=\"Background Image\"\n                                class=\"w-full h-full object-cover\" >\n                        <\/div>\n                        <div\n                            class=\"relative max-w-[1440px] mx-auto flex flex-col xl:flex-row items-center justify-between\">\n                            <div class=\"text-white px-3 py-10 lg:p-10\">\n                                <h1 ani-clip-down class=\"mb-5 text-white\">M31 Technology<\/h1>\n                                <p ani-clip-down class=\"font-geist\">Every day, M31 Technology is accelerating AI adoption and shaping the future with cutting-edge IP that addresses data processing, edge computing, and terminal AI challenges.<\/p>\n                                                                <div ani-clip-down class=\"flex justify-start mt-[40px] \">\n                                    <a href=\"https:\/\/refine-lab.com\/project\/m31-%e5%86%86%e6%98%9f%e7%a7%91%e6%8a%80\/\" class=\"btn-outline masked-animation bg-white\">\n                                        <div class=\"masked-element\" x-duplicate>\n                                            <div>\u524d\u5f80\u700f\u89bd\u4f5c\u54c1<\/div>\n                                        <\/div>\n                                        <div>\n                                            <div class=\"masked-element is-horizontal text-white\" x-duplicate>\n                                               <img decoding=\"async\" x-svg-inline src=\"https:\/\/refine-lab.com\/wp-content\/themes\/refine-lab\/assets\/svg\/icon-arrow.svg\" alt=\"Arrow Logo\" \/>\n                                            <\/div>\n                                        <\/div>\n                                    <\/a>\n                                <\/div>\n                                                            <\/div>\n                                                            <img decoding=\"async\" ani-zoom-out src=\"https:\/\/refine-lab.com\/wp-content\/uploads\/2025\/08\/img-work-slider-1.webp\" alt=\"Project 1\"\n                                class=\"max-w-[336px] lg:max-w-[304px] xl:max-w-[560px] 3xl:max-w-[800px]\">\n                                                    <\/div>\n                    <\/div>\n                <\/div>\n                                <div x-show=\"active==2\" class=\"slide overflow-hidden\">\n                    <div class=\"relative\">\n                        <div class=\"absolute inset-0 3xl:top-[120px] rounded-2xl overflow-hidden\">\n                            <img decoding=\"async\" ani-scale-x src=\"https:\/\/refine-lab.com\/wp-content\/uploads\/2025\/09\/bg-work-slider-2.webp\" alt=\"Background Image\"\n                                class=\"w-full h-full object-cover\" >\n                        <\/div>\n                        <div\n                            class=\"relative max-w-[1440px] mx-auto flex flex-col xl:flex-row items-center justify-between\">\n                            <div class=\"text-white px-3 py-10 lg:p-10\">\n                                <h1 ani-clip-down class=\"mb-5 text-white\">2024 Nanya ESG<\/h1>\n                                <p ani-clip-down class=\"font-geist\">\u5357\u4e9e\u79d1\u6280\u4ee5\u6280\u8853\u5275\u65b0\u4f5c\u70ba\u516c\u53f8\u6210\u9577\u57fa\u77f3\uff0c\u9577\u671f\u81f4\u529bDRAM (\u52d5\u614b\u96a8\u6a5f\u5b58\u53d6\u8a18\u61b6\u9ad4)\u7684\u7814\u767c\u3001\u8a2d\u8a08\u3001\u88fd\u9020\u8207\u92b7\u552e\uff0c\u958b\u767c\u81ea\u4e3b\u6280\u8853\uff0c\u767c\u5c55\u667a\u6167\u8ca1\u7522\u6b0a\uff0c\u57f9\u80b2\u95dc\u9375\u6280\u8853\u7814\u767c\u5718\u968a\uff0c\u843d\u5be6\u7da0\u8272\u79d1\u6280\u53ca\u667a\u6167\u88fd\u9020\u5168\u9762\u63d0\u5347\u88fd\u7a0b\u6548\u80fd\u8207\u7522\u80fd\uff0c\u662f\u5168\u7403\u7b2c4\u5927\u7684DRAM\u516c\u53f8\u3002<\/p>\n                                                                <div ani-clip-down class=\"flex justify-start mt-[40px] \">\n                                    <a href=\"https:\/\/refine-lab.com\/project\/2024-%e5%8d%97%e4%ba%9e%e7%a7%91%e6%8a%80-esg\/\" class=\"btn-outline masked-animation bg-white\">\n                                        <div class=\"masked-element\" x-duplicate>\n                                            <div>\u524d\u5f80\u700f\u89bd\u4f5c\u54c1<\/div>\n                                        <\/div>\n                                        <div>\n                                            <div class=\"masked-element is-horizontal text-white\" x-duplicate>\n                                               <img decoding=\"async\" x-svg-inline src=\"https:\/\/refine-lab.com\/wp-content\/themes\/refine-lab\/assets\/svg\/icon-arrow.svg\" alt=\"Arrow Logo\" \/>\n                                            <\/div>\n                                        <\/div>\n                                    <\/a>\n                                <\/div>\n                                                            <\/div>\n                                                            <img decoding=\"async\" ani-zoom-out src=\"https:\/\/refine-lab.com\/wp-content\/uploads\/2025\/09\/img-work-slider-2.webp\" alt=\"Project 1\"\n                                class=\"max-w-[336px] lg:max-w-[304px] xl:max-w-[560px] 3xl:max-w-[800px]\">\n                                                    <\/div>\n                    <\/div>\n                <\/div>\n                                <div x-show=\"active==3\" class=\"slide overflow-hidden\">\n                    <div class=\"relative\">\n                        <div class=\"absolute inset-0 3xl:top-[120px] rounded-2xl overflow-hidden\">\n                            <img decoding=\"async\" ani-scale-x src=\"https:\/\/refine-lab.com\/wp-content\/uploads\/2026\/01\/bg-work-slider-3.webp\" alt=\"Background Image\"\n                                class=\"w-full h-full object-cover\" >\n                        <\/div>\n                        <div\n                            class=\"relative max-w-[1440px] mx-auto flex flex-col xl:flex-row items-center justify-between\">\n                            <div class=\"text-white px-3 py-10 lg:p-10\">\n                                <h1 ani-clip-down class=\"mb-5 text-white\">Genie Networks<\/h1>\n                                <p ani-clip-down class=\"font-geist\">\u5a01\u777f\u79d1\u6280 (Genie Networks) \u662f\u4e00\u9593\u63d0\u4f9b\u96fb\u4fe1\u7d1a\u7db2\u8def\u8a2d\u5099\u7684\u8edf\u9ad4\u958b\u767c\u5546\uff0c\u81f4\u529b\u65bc\u7814\u767c\u9ad8\u7aef\u7db2\u8def\u6280\u8853\u8207\u884c\u92b7\u81ea\u6709\u54c1\u724c\u7522\u54c1\uff0c\u63d0\u4f9b\u7db2\u8def\u6d41\u91cf\u7684\u5927\u6578\u64da\u5206\u6790\u80fd\u529b\u4ee5\u512a\u5316 IP \u7db2\u8def\u6548\u7387\uff0c\u4e26\u900f\u904e\u5373\u6642\u7684\u7db2\u8def\u653b\u64ca\u5075\u6e2c\u4ee5\u63d0\u5347\u5927\u578b\u7db2\u8def\u5b89\u5168\u3002<\/p>\n                                                                <div ani-clip-down class=\"flex justify-start mt-[40px] \">\n                                    <a href=\"https:\/\/refine-lab.com\/project\/%e5%a8%81%e7%9d%bf%e7%a7%91%e6%8a%80\/\" class=\"btn-outline masked-animation bg-white\">\n                                        <div class=\"masked-element\" x-duplicate>\n                                            <div>\u524d\u5f80\u700f\u89bd\u4f5c\u54c1<\/div>\n                                        <\/div>\n                                        <div>\n                                            <div class=\"masked-element is-horizontal text-white\" x-duplicate>\n                                               <img decoding=\"async\" x-svg-inline src=\"https:\/\/refine-lab.com\/wp-content\/themes\/refine-lab\/assets\/svg\/icon-arrow.svg\" alt=\"Arrow Logo\" \/>\n                                            <\/div>\n                                        <\/div>\n                                    <\/a>\n                                <\/div>\n                                                            <\/div>\n                                                            <img decoding=\"async\" ani-zoom-out src=\"https:\/\/refine-lab.com\/wp-content\/uploads\/2026\/01\/img-work-slider-3.webp\" alt=\"Project 1\"\n                                class=\"max-w-[336px] lg:max-w-[304px] xl:max-w-[560px] 3xl:max-w-[800px]\">\n                                                    <\/div>\n                    <\/div>\n                <\/div>\n                \n            <\/div>\n        <\/div>\n\n        <div class=\"swiper-controls absolute bottom-[-1px] right-[-1px] z-10\">\n            <div class=\"text-gray-50\">\n                <img decoding=\"async\" x-svg-inline src=\"https:\/\/refine-lab.com\/wp-content\/themes\/refine-lab\/assets\/svg\/gallery-corner.svg\" alt=\"Corner Background\" \/>\n            <\/div>\n            <div class=\"flex items-center justify-center absolute w-[217px] right-0 bottom-0 p-5 gap-5\">\n                <div\n                    class=\"slider-btn-prev bg-gray-1000 size-[48px] flex justify-center items-center masked-animation rounded-full\" @click=\"goPrev; timer = 0\">\n                    <div class=\"masked-element is-horizontal text-white is-left\" x-duplicate>\n                        <img decoding=\"async\" x-svg-inline src=\"https:\/\/refine-lab.com\/wp-content\/themes\/refine-lab\/assets\/svg\/icon-arrow-left.svg\" alt=\"Arrow Logo\" \/>\n                    <\/div>\n                <\/div>\n                <div class=\"flex items-center gap-2 font-geist text-base\">\n                    <div class=\"slider-current-number h-[24px] overflow-hidden\">\n                        <div class=\"list flex-col items-center text-grey-500 text-center\">\n                            <template x-for=\"n in total\" :key=\"n\">\n                                <div x-text=\"n\"><\/div>\n                            <\/template>\n                        <\/div>\n                    <\/div>\n                    <div class=\"text-gray-200\">\/<\/div>\n                    <div class=\"slider-total-number text-gray-500\" x-text=\"total\"><\/div>\n                <\/div>\n                <div\n                    class=\"slider-btn-next  bg-gray-1000 size-[48px] flex justify-center items-center masked-animation rounded-full\" @click=\"goNext; timer = 0\">\n                    <div class=\"masked-element is-horizontal text-white\" x-duplicate>\n                        <img decoding=\"async\" x-svg-inline src=\"https:\/\/refine-lab.com\/wp-content\/themes\/refine-lab\/assets\/svg\/icon-arrow.svg\" alt=\"Arrow Logo\" \/>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n\n<pre>\n    <\/pre>\n<script>\n                        let categories = [\n                { \n            id: 'backend', \n            name: 'Backends', \n            order: 2,\n            subitems: [\n                                                { id: '641', name: '.NET', count: 0, link: 'https:\/\/refine-lab.com\/en\/backend\/net\/' },\n                                { id: '642', name: 'WooCommerce', count: 0, link: 'https:\/\/refine-lab.com\/en\/backend\/woocommerce\/' },\n                                { id: '643', name: 'Wordpress', count: 0, link: 'https:\/\/refine-lab.com\/en\/backend\/wordpress\/' },\n                                { id: '644', name: 'No backend', count: 0, link: 'https:\/\/refine-lab.com\/en\/backend\/no-backend\/' },\n                            ]\n        },\n                { \n            id: 'highlight', \n            name: 'Highlights', \n            order: 0,\n            subitems: [\n                                                { id: '593', name: 'AI', count: 2, link: 'https:\/\/refine-lab.com\/en\/highlight\/ai\/' },\n                                { id: '596', name: 'latest', count: 2, link: 'https:\/\/refine-lab.com\/en\/highlight\/latest\/' },\n                                { id: '597', name: 'hot', count: 0, link: 'https:\/\/refine-lab.com\/en\/highlight\/hot\/' },\n                            ]\n        },\n                { \n            id: 'industry', \n            name: 'Industries', \n            order: 3,\n            subitems: [\n                                                { id: '599', name: 'Technology Hardware', count: 0, link: 'https:\/\/refine-lab.com\/en\/industry\/technology-hardware\/' },\n                                { id: '602', name: 'Real Estate Living', count: 2, link: 'https:\/\/refine-lab.com\/en\/industry\/real-estate-living\/' },\n                                { id: '603', name: 'Education Culture', count: 0, link: 'https:\/\/refine-lab.com\/en\/industry\/education-culture\/' },\n                                { id: '605', name: 'Lifestyle Brands', count: 0, link: 'https:\/\/refine-lab.com\/en\/industry\/lifestyle-brands\/' },\n                                { id: '608', name: 'Health Science', count: 0, link: 'https:\/\/refine-lab.com\/en\/industry\/health-science\/' },\n                                { id: '609', name: 'Finance Corporate', count: 0, link: 'https:\/\/refine-lab.com\/en\/industry\/finance-corporate\/' },\n                            ]\n        },\n                { \n            id: 'listed-company', \n            name: 'Listed Companies', \n            order: 4,\n            subitems: [\n                                                { id: '311', name: 'ESG', count: 0, link: 'https:\/\/refine-lab.com\/en\/listed-company\/esg-en\/' },\n                                { id: '312', name: 'Investor Zone', count: 0, link: 'https:\/\/refine-lab.com\/en\/listed-company\/investor-zone\/' },\n                            ]\n        },\n                { \n            id: 'type-of-service', \n            name: 'Type of Services', \n            order: 1,\n            subitems: [\n                                                { id: '305', name: 'UI\/UX Design', count: 0, link: 'https:\/\/refine-lab.com\/en\/type-of-service\/ui-ux-design\/' },\n                                { id: '306', name: 'Corporate Identity Website', count: 0, link: 'https:\/\/refine-lab.com\/en\/type-of-service\/corporate-identity-website\/' },\n                                { id: '307', name: 'Landing Page', count: 2, link: 'https:\/\/refine-lab.com\/en\/type-of-service\/landing-page\/' },\n                                { id: '308', name: 'Campaign Website', count: 0, link: 'https:\/\/refine-lab.com\/en\/type-of-service\/campaign-website\/' },\n                                { id: '309', name: 'E-commerce Website', count: 0, link: 'https:\/\/refine-lab.com\/en\/type-of-service\/e-commerce-website\/' },\n                            ]\n        },\n            ];\n\n    categories = categories.sort((a, b) => a.order - b.order);\n\n    \n        let projects = [\n                { \n            id: 5733, \n            link: 'https:\/\/refine-lab.com\/en\/project\/trx-residences\/', \n            name: 'TRX Residences', \n            year: '2026', \n            cover_img: 'https:\/\/refine-lab.com\/wp-content\/uploads\/2026\/05\/img-work-list-trx.webp', \n            hover_img: 'https:\/\/refine-lab.com\/wp-content\/uploads\/2026\/05\/img-work-list-hover-trx.webp', \n            taxs: [\n                                'AI \u667a\u80fd', 'AI \u667a\u80fd', '\u6700\u65b0\u4e0a\u67b6', '\u6700\u65b0\u4e0a\u67b6',\n                                '\u623f\u5730\u4ea7', '\u623f\u5730\u7522',\n                                '\u5355\u9875\u5f0f\u7f51\u7ad9', '\u55ae\u9801\u5f0f\u7db2\u7ad9',\n                            ],\n            show_taxs: [\n                                '\u5355\u9875\u5f0f\u7f51\u7ad9, \u55ae\u9801\u5f0f\u7db2\u7ad9',\n                                '',\n                                '\u623f\u5730\u4ea7, \u623f\u5730\u7522',\n                            ]\n        },\n            ];\n    let all_categories = '\u5168\u90e8\u4f5c\u54c1';\n    let all_items = '\u5168\u90e8\u9805\u76ee';\n\n    \/\/ insert all project in highlights\n    let highlights = categories.find(cat => cat.id === 'highlight');\n    if (highlights) {\n        highlights.subitems.splice(0, 0, { id: 'all', name: '\u5168\u90e8\u4f5c\u54c1', count: projects.length, link: 'https:\/\/refine-lab.com\/en\/list-page\/' } );\n    }\n\n<\/script>\n\n<section \nx-data=\"filter_setup()\"\nx-init=\"\n    selectedCategory = 'highlight';\n    selectedItem = '\u5168\u90e8\u4f5c\u54c1';\n\"\nmenu-theme=\"light\" class=\"relative max-w-[2560px] mx-auto\">\n    <div class=\"flex flex-col lg:flex-row lg:items-center w-full px-3 lg:px-10\">\n        <h1 x-aos-clip-char-up=\"{ delay: 200 }\" class=\"text-gray-900 mb-5\">Select Category<\/h1>\n        <p x-aos-clip-line-up=\"{ delay: 400 }\" class=\"font-geist lg:ml-auto lg:max-w-[560px]\">Browse by category to explore our web design projects tailored for different industries and needs. Each reflects our focus on usability, aesthetics, and performance.<\/p>\n    <\/div>\n\n    <div class=\"sticky top-0 bg-gray-50 z-40 pt-[70px] md:pt-0\" :class=\"{ 'bg-gray-50\/80 backdrop-blur-lg': !showFilters }\"\n        data-lenis-prevent>\n        <div x-collapse=\"showFilters\" class=\"px-3 lg:px-10\">\n            <div class=\"mb-5\">\n                <div class=\"hidden lg:block mb-5 pt-[70px]\">\n                    <div class=\"category-groups\">\n                        <template x-for=\"item in categories\">\n                            <div class=\"category-group\">\n                                <div class=\"category-label\" x-text=\"item.name\"><\/div>\n                                <div class=\"category-list\">\n                                    <template x-for=\"subItem in item.subitems\">\n                                        <div class=\"category-item masked-animation\"\n                                            @click=\"onSelectItem(subItem.name, item.name, subItem.link)\"\n                                            :class=\"{ 'is-selected': selectedItem === subItem.name }\">\n                                            <div class=\"masked-element\" x-duplicate>\n                                                <div class=\"category-name\" x-text=\"subItem.name\"><\/div>\n                                            <\/div>\n                                            <div class=\"category-count\" x-text=\"subItem.count\"><\/div>\n                                        <\/div>\n                                    <\/template>\n                                <\/div>\n                            <\/div>\n                        <\/template>\n                    <\/div>\n                <\/div>\n                <div class=\"lg:hidden md:pt-[70px]\">\n                    <div class=\"grid grid-cols-2 gap-5 mb-5\">\n                        <div class=\"border border-gray-200 rounded-full flex items-center px-5 py-3 gap-3\" :class=\"{ 'text-black': showCategory, 'text-gray-300': !showCategory }\"  @click=\"showCategory = true; showItem = false\">\n                            <div class=\"flex-1 overflow-clip\">\n                                <div class=\"transition-colors uppercase whitespace-nowrap\" x-text=\"selectedCategory\"><\/div>\n                            <\/div>\n                            <svg :class=\"{ 'rotate-0': showCategory, 'rotate-180': !showCategory }\" class=\"ml-auto transition-transform duration-500\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 3.4L5 9L10 3.4L8.75 2L5 6.2L1.25 2L0 3.4Z\" fill=\"#16171B\"\/>\n                            <\/svg>\n                        <\/div>\n                        <div class=\"border border-gray-200 rounded-full flex items-center px-5 py-3 gap-3\" :class=\"{ 'text-black': showItem, 'text-gray-300': !showItem }\" @click=\"showItem = true; showCategory = false\">\n                            <div class=\"flex-1 overflow-clip\">\n                                <div class=\"transition-colors uppercase whitespace-nowrap\" x-text=\"selectedItem\"><\/div>\n                            <\/div>\n                            <svg :class=\"{ 'rotate-0': showItem, 'rotate-180': !showItem }\" class=\"ml-auto transition-transform duration-500\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 3.4L5 9L10 3.4L8.75 2L5 6.2L1.25 2L0 3.4Z\" fill=\"#16171B\"\/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    <div x-show=\"showCategory\" class=\"category-group\">\n                        <div class=\"category-list !justify-center\">\n                            <template x-for=\"item in categories\">\n                                <div class=\"category-item masked-animation\"\n                                    @click=\"selectedCategory = item.name; showCategory = false; showItem = true\"\n                                    :class=\"{ 'is-selected': selectedCategory === item.name }\">\n                                    <div class=\"masked-element\" x-duplicate>\n                                        <div class=\"category-name uppercase\" x-text=\"item.name\"><\/div>\n                                    <\/div>\n                                    <div class=\"category-count\" x-text=\"item.count\"><\/div>\n                                <\/div>\n                            <\/template>\n                        <\/div>\n                    <\/div>\n                    <template x-for=\"cat in categories\" :key=\"cat.id\">\n                        <div x-show=\"showItem &#038;&#038; selectedCategory === cat.name\" class=\"category-group\">\n                            <div class=\"category-list !justify-center\">\n                                <template x-for=\"item in cat.subitems\">\n                                    <div class=\"category-item masked-animation\"\n                                        @click=\"onSelectItem(item.name, cat.name, item.link)\"\n                                        :class=\"{ 'is-selected': selectedItem === item.name }\">\n                                        <div class=\"masked-element\" x-duplicate>\n                                            <div class=\"category-name\" x-text=\"item.name\"><\/div>\n                                        <\/div>\n                                        <div class=\"category-count\" x-text=\"item.count\"><\/div>\n                                    <\/div>\n                                <\/template>\n                            <\/div>\n                        <\/div>\n                    <\/template>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div @click=\"showFilters = !showFilters\">\n            <div\n                class=\"flex items-center justify-center w-full border-b border-gray-200 text-gray-1000 hover:text-gray-500 font-geist py-[16px] md:py-[24px] font-medium\">\n                <div class=\"flex items-center gap-3\">\n                    <div x-show=\"!showFilters\">Show Filters<\/div>\n                    <div x-show=\"showFilters\">Hide Filters<\/div>\n                    <div :class=\"{ 'rotate-180': !showFilters }\" class=\"transition-transform duration-300\">\n                        <svg width=\"11\" height=\"10\" viewBox=\"0 0 11 10\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                                d=\"M0.5 6.6L5.5 1L10.5 6.6L9.25 8L5.5 3.8L1.75 8L0.5 6.6Z\" fill=\"currentColor\" \/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"project-list py-20 px-3 lg:px-10\">\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-x-5 gap-y-16\">\n            <template x-if=\"filtered_items.length === 0\">\n                <div class=\"text-center text-gray-500 py-20\">\n                    \u672a\u627e\u5230\u9805\u76ee\u3002 <br\/>\u8acb\u5617\u8a66\u8b8a\u66f4\u7be9\u9078\u5668\u4ee5\u67e5\u770b\u5176\u4ed6\u9805\u76ee                <\/div>\n            <\/template>\n            <template x-for=\"item in filtered_items.slice(0, 8)\" :key=\"item.id\">\n                <a :href=\"item.link\" class=\"work-card\" x-hover-work-animation>\n                    <div class=\"work-card-img-wrapper\">\n                        <div class=\"work-card-img\">\n                            <picture>\n                                <source media=\"(max-width: 768px)\" :srcset=\"item.cover_img\">\n                                <img :src=\"item.cover_img\" alt=\"\" class=\"object-cover w-full h-full\">\n                            <\/picture>\n                        <\/div>\n                        <div class=\"work-card-img-hover\">\n                            <picture>\n                                <source media=\"(max-width: 768px)\" :srcset=\"item.hover_img\">\n                                <img :src=\"item.hover_img\" alt=\"\">\n                            <\/picture>\n                        <\/div>\n                    <\/div>\n                    <div class=\"work-card-content\">\n                        <div class=\"work-card-text\">\n                            <h5 class=\"work-card-title\" x-text=\"item.name\"><\/h5>\n                            <p class=\"work-card-desc\" x-text=\"item.taxs.join(', ')\"><\/p>\n                        <\/div>\n                        <div class=\"work-card-year\" x-text=\"item.year\"><\/div>\n                    <\/div>\n                <\/a>\n            <\/template>\n        <\/div>\n        <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-x-5 gap-y-16 mt-16\">\n            <template x-for=\"item in filtered_items.slice(8)\" :key=\"item.id\">\n                <a :href=\"item.link\" class=\"work-card\" x-hover-work-animation>\n                    <div class=\"work-card-img-wrapper\">\n                        <div class=\"work-card-img\">\n                            <picture>\n                                <source media=\"(max-width: 768px)\" :srcset=\"item.cover_img\">\n                                <img :src=\"item.cover_img\" alt=\"\" class=\"object-cover w-full h-full\">\n                            <\/picture>\n                        <\/div>\n                        <div class=\"work-card-img-hover\">\n                            <picture>\n                                <source media=\"(max-width: 768px)\" :srcset=\"item.hover_img\">\n                                <img :src=\"item.hover_img\" alt=\"\">\n                            <\/picture>\n                        <\/div>\n                    <\/div>\n                    <div class=\"work-card-content\">\n                        <div class=\"work-card-text\">\n                            <h5 class=\"work-card-title\" x-text=\"item.name\"><\/h5>\n                            <p class=\"work-card-desc\" x-text=\"item.show_taxs.join(', ')\"><\/p>\n                        <\/div>\n                        <div class=\"work-card-year\" x-text=\"item.year\"><\/div>\n                    <\/div>\n                <\/a>\n            <\/template>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\n    function filter_setup() {\n        return {\n            title_postfix: document.title.split(' | ')[1],\n            selectedCategory: all_categories,\n            selectedItem: all_items,\n            showFilters: false,\n            showCategory: false,\n            showItem: false,\n            onSelectItem(name, category, link) {\n                this.selectedItem = name;\n                this.selectedCategory = category;\n                this.showFilters = false;\n                window.history.pushState({}, '', link);\n                document.title = name + ' | ' + this.title_postfix;\n            },\n            get filtered_items(){\n                var items = projects.filter((project) => {\n                    if (this.selectedItem === '\u5168\u90e8\u4f5c\u54c1') {\n                        return true;\n                    }\n                    return project.taxs.includes(this.selectedItem);\n                });\n                return items;\n            }\n        }\n    }\n<\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-5863","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Work | \u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08\uff5cRefine Lab -\u96fb\u5546\uff0c\u54c1\u724c\u5f62\u8c61\uff0c\u9ad8\u8cea\u611f\uff0c\u5ba2\u88fd\u5316\u7db2\u7ad9\u5c08\u5bb6<\/title>\n<meta name=\"description\" content=\"\u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08\u64c1\u6709\u5341\u591a\u5e74\u7db2\u7ad9\u8a2d\u8a08\u8207\u591a\u5a92\u9ad4\u88fd\u4f5c\u7d93\u9a57\uff0c\u63d0\u4f9b\u6578\u4f4d\u884c\u92b7\u6574\u5408\u65b9\u6848\uff0c\u6db5\u84cb\u5275\u610f\u4f01\u5283\u3001\u8996\u89ba\u8a2d\u8a08\u3001\u7cfb\u7d71\u5efa\u7f6e\u3001\u5f71\u97f3\u52d5\u756b\u3001\u4e92\u52d5\u9ad4\u9a57\u3001\u793e\u7fa4\u7d93\u71df\u8207\u884c\u92b7\u7b56\u7565\uff0c\u670d\u52d9\u5ba2\u6236\u904d\u53ca\u96fb\u4fe1\u3001\u6642\u5c1a\u30013C \u8207\u5ee3\u544a\u7b49\u77e5\u540d\u4f01\u696d\u3002\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/refine-lab.com\/en\/list-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Work | \u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08\uff5cRefine Lab -\u96fb\u5546\uff0c\u54c1\u724c\u5f62\u8c61\uff0c\u9ad8\u8cea\u611f\uff0c\u5ba2\u88fd\u5316\u7db2\u7ad9\u5c08\u5bb6\" \/>\n<meta property=\"og:description\" content=\"\u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08\u64c1\u6709\u5341\u591a\u5e74\u7db2\u7ad9\u8a2d\u8a08\u8207\u591a\u5a92\u9ad4\u88fd\u4f5c\u7d93\u9a57\uff0c\u63d0\u4f9b\u6578\u4f4d\u884c\u92b7\u6574\u5408\u65b9\u6848\uff0c\u6db5\u84cb\u5275\u610f\u4f01\u5283\u3001\u8996\u89ba\u8a2d\u8a08\u3001\u7cfb\u7d71\u5efa\u7f6e\u3001\u5f71\u97f3\u52d5\u756b\u3001\u4e92\u52d5\u9ad4\u9a57\u3001\u793e\u7fa4\u7d93\u71df\u8207\u884c\u92b7\u7b56\u7565\uff0c\u670d\u52d9\u5ba2\u6236\u904d\u53ca\u96fb\u4fe1\u3001\u6642\u5c1a\u30013C \u8207\u5ee3\u544a\u7b49\u77e5\u540d\u4f01\u696d\u3002\" \/>\n<meta property=\"og:url\" content=\"https:\/\/refine-lab.com\/en\/list-page\/\" \/>\n<meta property=\"og:site_name\" content=\"\u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08\uff5cRefine Lab -\u96fb\u5546\uff0c\u54c1\u724c\u5f62\u8c61\uff0c\u9ad8\u8cea\u611f\uff0c\u5ba2\u88fd\u5316\u7db2\u7ad9\u5c08\u5bb6\" \/>\n<meta property=\"og:image\" content=\"https:\/\/refine-lab.com\/wp-content\/uploads\/2025\/10\/og-img.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"315\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/refine-lab.com\\\/en\\\/list-page\\\/\",\"url\":\"https:\\\/\\\/refine-lab.com\\\/en\\\/list-page\\\/\",\"name\":\"Work | \u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08\uff5cRefine Lab -\u96fb\u5546\uff0c\u54c1\u724c\u5f62\u8c61\uff0c\u9ad8\u8cea\u611f\uff0c\u5ba2\u88fd\u5316\u7db2\u7ad9\u5c08\u5bb6\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/refine-lab.com\\\/#website\"},\"datePublished\":\"2025-08-25T07:26:59+00:00\",\"description\":\"\u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08\u64c1\u6709\u5341\u591a\u5e74\u7db2\u7ad9\u8a2d\u8a08\u8207\u591a\u5a92\u9ad4\u88fd\u4f5c\u7d93\u9a57\uff0c\u63d0\u4f9b\u6578\u4f4d\u884c\u92b7\u6574\u5408\u65b9\u6848\uff0c\u6db5\u84cb\u5275\u610f\u4f01\u5283\u3001\u8996\u89ba\u8a2d\u8a08\u3001\u7cfb\u7d71\u5efa\u7f6e\u3001\u5f71\u97f3\u52d5\u756b\u3001\u4e92\u52d5\u9ad4\u9a57\u3001\u793e\u7fa4\u7d93\u71df\u8207\u884c\u92b7\u7b56\u7565\uff0c\u670d\u52d9\u5ba2\u6236\u904d\u53ca\u96fb\u4fe1\u3001\u6642\u5c1a\u30013C \u8207\u5ee3\u544a\u7b49\u77e5\u540d\u4f01\u696d\u3002\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/refine-lab.com\\\/en\\\/list-page\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/refine-lab.com\\\/en\\\/list-page\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/refine-lab.com\\\/en\\\/list-page\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/refine-lab.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Work\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/refine-lab.com\\\/#website\",\"url\":\"https:\\\/\\\/refine-lab.com\\\/\",\"name\":\"\u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08-\u96fb\u5546\uff0c\u54c1\u724c\u5f62\u8c61\uff0c\u9ad8\u8cea\u611f\uff0c\u5ba2\u88fd\u5316\u7db2\u7ad9\u5c08\u5bb6\",\"description\":\"\u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08\u64c1\u6709\u5341\u591a\u5e74\u7db2\u7ad9\u8a2d\u8a08\u8207\u591a\u5a92\u9ad4\u88fd\u4f5c\u7d93\u9a57\uff0c\u63d0\u4f9b\u6578\u4f4d\u884c\u92b7\u6574\u5408\u65b9\u6848\uff0c\u6db5\u84cb\u5275\u610f\u4f01\u5283\u3001\u8996\u89ba\u8a2d\u8a08\u3001\u7cfb\u7d71\u5efa\u7f6e\u3001\u5f71\u97f3\u52d5\u756b\u3001\u4e92\u52d5\u9ad4\u9a57\u3001\u793e\u7fa4\u7d93\u71df\u8207\u884c\u92b7\u7b56\u7565\uff0c\u670d\u52d9\u5ba2\u6236\u904d\u53ca\u96fb\u4fe1\u3001\u6642\u5c1a\u30013C \u8207\u5ee3\u544a\u7b49\u77e5\u540d\u4f01\u696d\u3002\",\"publisher\":{\"@id\":\"https:\\\/\\\/refine-lab.com\\\/#organization\"},\"alternateName\":\"\u4f0a\u51e1\u535a\u9054\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/refine-lab.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/refine-lab.com\\\/#organization\",\"name\":\"\u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08-\u96fb\u5546\uff0c\u54c1\u724c\u5f62\u8c61\uff0c\u9ad8\u8cea\u611f\uff0c\u5ba2\u88fd\u5316\u7db2\u7ad9\u5c08\u5bb6\",\"url\":\"https:\\\/\\\/refine-lab.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/refine-lab.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/refine-lab.com\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/og-img.webp\",\"contentUrl\":\"https:\\\/\\\/refine-lab.com\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/og-img.webp\",\"width\":600,\"height\":315,\"caption\":\"\u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08-\u96fb\u5546\uff0c\u54c1\u724c\u5f62\u8c61\uff0c\u9ad8\u8cea\u611f\uff0c\u5ba2\u88fd\u5316\u7db2\u7ad9\u5c08\u5bb6\"},\"image\":{\"@id\":\"https:\\\/\\\/refine-lab.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Work | \u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08\uff5cRefine Lab -\u96fb\u5546\uff0c\u54c1\u724c\u5f62\u8c61\uff0c\u9ad8\u8cea\u611f\uff0c\u5ba2\u88fd\u5316\u7db2\u7ad9\u5c08\u5bb6","description":"\u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08\u64c1\u6709\u5341\u591a\u5e74\u7db2\u7ad9\u8a2d\u8a08\u8207\u591a\u5a92\u9ad4\u88fd\u4f5c\u7d93\u9a57\uff0c\u63d0\u4f9b\u6578\u4f4d\u884c\u92b7\u6574\u5408\u65b9\u6848\uff0c\u6db5\u84cb\u5275\u610f\u4f01\u5283\u3001\u8996\u89ba\u8a2d\u8a08\u3001\u7cfb\u7d71\u5efa\u7f6e\u3001\u5f71\u97f3\u52d5\u756b\u3001\u4e92\u52d5\u9ad4\u9a57\u3001\u793e\u7fa4\u7d93\u71df\u8207\u884c\u92b7\u7b56\u7565\uff0c\u670d\u52d9\u5ba2\u6236\u904d\u53ca\u96fb\u4fe1\u3001\u6642\u5c1a\u30013C \u8207\u5ee3\u544a\u7b49\u77e5\u540d\u4f01\u696d\u3002","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/refine-lab.com\/en\/list-page\/","og_locale":"en_US","og_type":"article","og_title":"Work | \u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08\uff5cRefine Lab -\u96fb\u5546\uff0c\u54c1\u724c\u5f62\u8c61\uff0c\u9ad8\u8cea\u611f\uff0c\u5ba2\u88fd\u5316\u7db2\u7ad9\u5c08\u5bb6","og_description":"\u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08\u64c1\u6709\u5341\u591a\u5e74\u7db2\u7ad9\u8a2d\u8a08\u8207\u591a\u5a92\u9ad4\u88fd\u4f5c\u7d93\u9a57\uff0c\u63d0\u4f9b\u6578\u4f4d\u884c\u92b7\u6574\u5408\u65b9\u6848\uff0c\u6db5\u84cb\u5275\u610f\u4f01\u5283\u3001\u8996\u89ba\u8a2d\u8a08\u3001\u7cfb\u7d71\u5efa\u7f6e\u3001\u5f71\u97f3\u52d5\u756b\u3001\u4e92\u52d5\u9ad4\u9a57\u3001\u793e\u7fa4\u7d93\u71df\u8207\u884c\u92b7\u7b56\u7565\uff0c\u670d\u52d9\u5ba2\u6236\u904d\u53ca\u96fb\u4fe1\u3001\u6642\u5c1a\u30013C \u8207\u5ee3\u544a\u7b49\u77e5\u540d\u4f01\u696d\u3002","og_url":"https:\/\/refine-lab.com\/en\/list-page\/","og_site_name":"\u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08\uff5cRefine Lab -\u96fb\u5546\uff0c\u54c1\u724c\u5f62\u8c61\uff0c\u9ad8\u8cea\u611f\uff0c\u5ba2\u88fd\u5316\u7db2\u7ad9\u5c08\u5bb6","og_image":[{"width":600,"height":315,"url":"https:\/\/refine-lab.com\/wp-content\/uploads\/2025\/10\/og-img.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/refine-lab.com\/en\/list-page\/","url":"https:\/\/refine-lab.com\/en\/list-page\/","name":"Work | \u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08\uff5cRefine Lab -\u96fb\u5546\uff0c\u54c1\u724c\u5f62\u8c61\uff0c\u9ad8\u8cea\u611f\uff0c\u5ba2\u88fd\u5316\u7db2\u7ad9\u5c08\u5bb6","isPartOf":{"@id":"https:\/\/refine-lab.com\/#website"},"datePublished":"2025-08-25T07:26:59+00:00","description":"\u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08\u64c1\u6709\u5341\u591a\u5e74\u7db2\u7ad9\u8a2d\u8a08\u8207\u591a\u5a92\u9ad4\u88fd\u4f5c\u7d93\u9a57\uff0c\u63d0\u4f9b\u6578\u4f4d\u884c\u92b7\u6574\u5408\u65b9\u6848\uff0c\u6db5\u84cb\u5275\u610f\u4f01\u5283\u3001\u8996\u89ba\u8a2d\u8a08\u3001\u7cfb\u7d71\u5efa\u7f6e\u3001\u5f71\u97f3\u52d5\u756b\u3001\u4e92\u52d5\u9ad4\u9a57\u3001\u793e\u7fa4\u7d93\u71df\u8207\u884c\u92b7\u7b56\u7565\uff0c\u670d\u52d9\u5ba2\u6236\u904d\u53ca\u96fb\u4fe1\u3001\u6642\u5c1a\u30013C \u8207\u5ee3\u544a\u7b49\u77e5\u540d\u4f01\u696d\u3002","breadcrumb":{"@id":"https:\/\/refine-lab.com\/en\/list-page\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/refine-lab.com\/en\/list-page\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/refine-lab.com\/en\/list-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/refine-lab.com\/en\/"},{"@type":"ListItem","position":2,"name":"Work"}]},{"@type":"WebSite","@id":"https:\/\/refine-lab.com\/#website","url":"https:\/\/refine-lab.com\/","name":"\u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08-\u96fb\u5546\uff0c\u54c1\u724c\u5f62\u8c61\uff0c\u9ad8\u8cea\u611f\uff0c\u5ba2\u88fd\u5316\u7db2\u7ad9\u5c08\u5bb6","description":"\u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08\u64c1\u6709\u5341\u591a\u5e74\u7db2\u7ad9\u8a2d\u8a08\u8207\u591a\u5a92\u9ad4\u88fd\u4f5c\u7d93\u9a57\uff0c\u63d0\u4f9b\u6578\u4f4d\u884c\u92b7\u6574\u5408\u65b9\u6848\uff0c\u6db5\u84cb\u5275\u610f\u4f01\u5283\u3001\u8996\u89ba\u8a2d\u8a08\u3001\u7cfb\u7d71\u5efa\u7f6e\u3001\u5f71\u97f3\u52d5\u756b\u3001\u4e92\u52d5\u9ad4\u9a57\u3001\u793e\u7fa4\u7d93\u71df\u8207\u884c\u92b7\u7b56\u7565\uff0c\u670d\u52d9\u5ba2\u6236\u904d\u53ca\u96fb\u4fe1\u3001\u6642\u5c1a\u30013C \u8207\u5ee3\u544a\u7b49\u77e5\u540d\u4f01\u696d\u3002","publisher":{"@id":"https:\/\/refine-lab.com\/#organization"},"alternateName":"\u4f0a\u51e1\u535a\u9054","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/refine-lab.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/refine-lab.com\/#organization","name":"\u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08-\u96fb\u5546\uff0c\u54c1\u724c\u5f62\u8c61\uff0c\u9ad8\u8cea\u611f\uff0c\u5ba2\u88fd\u5316\u7db2\u7ad9\u5c08\u5bb6","url":"https:\/\/refine-lab.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/refine-lab.com\/#\/schema\/logo\/image\/","url":"https:\/\/refine-lab.com\/wp-content\/uploads\/2025\/10\/og-img.webp","contentUrl":"https:\/\/refine-lab.com\/wp-content\/uploads\/2025\/10\/og-img.webp","width":600,"height":315,"caption":"\u4f0a\u51e1\u535a\u9054\u4e92\u52d5\u8a2d\u8a08-\u96fb\u5546\uff0c\u54c1\u724c\u5f62\u8c61\uff0c\u9ad8\u8cea\u611f\uff0c\u5ba2\u88fd\u5316\u7db2\u7ad9\u5c08\u5bb6"},"image":{"@id":"https:\/\/refine-lab.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/refine-lab.com\/en\/wp-json\/wp\/v2\/pages\/5863","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/refine-lab.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/refine-lab.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/refine-lab.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/refine-lab.com\/en\/wp-json\/wp\/v2\/comments?post=5863"}],"version-history":[{"count":0,"href":"https:\/\/refine-lab.com\/en\/wp-json\/wp\/v2\/pages\/5863\/revisions"}],"wp:attachment":[{"href":"https:\/\/refine-lab.com\/en\/wp-json\/wp\/v2\/media?parent=5863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}