{"id":27806,"date":"2024-10-23T14:12:43","date_gmt":"2024-10-23T06:12:43","guid":{"rendered":"https:\/\/visibleone.com\/projects\/tmdhc\/"},"modified":"2025-02-03T18:00:36","modified_gmt":"2025-02-03T10:00:36","slug":"tmdhc","status":"publish","type":"page","link":"https:\/\/visibleone.com\/zh-hk\/projects\/tmdhc\/","title":{"rendered":"TMDHC"},"content":{"rendered":"\n<div class=\"project-banner font-primary text-light relative\">\n    <div class=\"\n          project-banner-container absolute w-full h-full\n          flex justify-center items-center z-10\n        \">\n        <div class=\"project-banner-text text-center px-2\">\n            <span class=\"fs-2xl mb-2 lg:mb-4 2xl:mb-5\">TMDHC<\/span>\n            <div class=\"\n              font-semibold fs-6xl\n            \">\n                <h1>\u97ff\u61c9\u5f0f\u8cc7\u8a0a\u7db2\u7ad9\u958b\u767c<\/h1>\n            <\/div>\n        <\/div>\n        <span aria-label=\"scroll down\" id=\"scrollDown\"\n            class=\"w-full text-center project-banner-scroll-section cursor-pointer hover:text-[#ffae00] duration-100 absolute -bottom-10 md:-bottom-12 lg:-bottom-16 2xl:-bottom-36 left-1\/2 -translate-x-1\/2 flex flex-col items-center justify-center\">\n            <span class=\"uppercase block fs-xl tracking-[0.37em] mb-2 xl:mb-4\">\u5411\u4e0b\u6372\u52d5<\/span>\n            <span class=\"block border-r border-solid border-light w-[1px] h-10 md:h-14 lg:h-24 2xl:h-40\"><\/span>\n            <span class=\"block border-r border-solid border-primary w-[1px] h-10 md:h-12 lg:h-16 2xl:h-36\"><\/span>\n        <\/span>\n    <\/div>\n    <div class=\"banner-bg before:absolute before:w-full before:h-full\n          before:bg-[#343B53CC] before:mix-blend-multiply before:z-0\">\n                <img decoding=\"async\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/TMDHC-banner.jpg\" alt=\"TMDHC banner in Visible One\" loading=\"lazy\" title=\"\"\n            class=\"w-full h-[400px] sm:h-96 lg:h-[500px] xl:h-[650px] 4xl:h-[750px] 5xl:h-[850px] 6xl:h-[950px] align-middle object-cover object-center mix-blend-multiply\">\n            <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    let scrollDown = document.querySelector(\".project-banner #scrollDown\");\n    let bannercontainer = document.querySelector(\".project-banner\");\n    scrollDown && scrollDown.addEventListener(\"click\", function() {\n        if (bannercontainer) {\n            window.scrollTo({\n                top: bannercontainer.scrollHeight,\n                left: 0,\n                behavior: \"smooth\"\n            });\n        }\n    })\n});\n<\/script>\n\n\n<div id=\"ProjectBackground\" class=\"my-4 py-4 md:py-8 lg:py-16\">\n    <div><img decoding=\"async\" alt=\"\u9805\u76ee\u80cc\u666f\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/TMDHC-desktop-mockup.png\" loading=\"lazy\" title=\"\" class=\"w-auto\"><\/div>\n    <div class=\"px-8 md:px-12 lg:px-20 2xl:px-48 md:flex \">\n        <div class=\"md:pr-8 lg:pr-10 xl:pr-16 2xl:pr-28 3xl:pr-[11.25rem] mb-6 md:mb-0\">\n            <div class=\"fs-5xl text-primary font-primary font-semibold xl:whitespace-nowrap\">\n                <h2>\u9805\u76ee\u80cc\u666f<\/h2>\n            <\/div>\n        <\/div>\n        <div class=\"fs-2xl text-secondary font-primary font-light\"><p>\u5c6f\u9580\u5730\u5340\u5eb7\u5065\u4e2d\u5fc3\uff08TMDHC\uff09\u81f4\u529b\u70ba\u5c6f\u9580\u5c45\u6c11\u53ca\u4e0a\u73ed\u65cf\u63d0\u4f9b\u4e09\u7d1a\u57fa\u5c64\u91ab\u7642\u670d\u52d9\u3002\u4ed6\u5011\u7684\u670d\u52d9\u5305\u62ec\u5065\u5eb7\u4fc3\u9032\u3001\u88dc\u5145\u5065\u5eb7\u98a8\u96aa\u8a55\u4f30\u3001\u6162\u6027\u75c5\u7ba1\u7406\u548c\u793e\u5340\u5fa9\u5065\u3002\u8a72\u8a08\u756b\u7684\u6838\u5fc3\u76ee\u6a19\u662f\u70ba TMDHC \u5efa\u7acb\u4e00\u500b\u4e92\u52d5\u3001\u8cc7\u8a0a\u8c50\u5bcc\u7684\u7dda\u4e0a\u5e73\u53f0\uff0c\u63d0\u4f9b\u5c0d\u5065\u5eb7\u4e2d\u5fc3\u71df\u904b\u548c\u5c08\u696d\u5718\u968a\u7684\u5168\u9762\u4e86\u89e3\uff0c\u540c\u6642\u70ba\u6703\u54e1\u8a3b\u518a\u548c\u5fd7\u9858\u670d\u52d9\u6a5f\u6703\u63d0\u4f9b\u4fbf\u5229\u7684\u529f\u80fd\u3002\u6b64\u5916\uff0c\u8a72\u7db2\u7ad9\u9084\u63d0\u4f9b\u6613\u65bc\u4f7f\u7528\u7684\u904e\u6ffe\u548c\u641c\u5c0b\u9078\u9805\uff0c\u53ef\u5354\u52a9\u60a8\u8f15\u9b06\u5b58\u53d6\u6295\u7968\u7d50\u679c\u3001\u5f9e\u696d\u4eba\u54e1\u540d\u9304\u548c\u6d3b\u52d5\u8cc7\u8a0a\u7b49\u91cd\u8981\u8cc7\u6e90\u3002   <\/p>\n<\/div>\n    <\/div>\n<\/div>\n\n\n<div class=\"CaseStudyVideo relative \">\n    <div class=\"w-full h-[550px]  overflow-hidden overflow-x-hidden my-8 md:my-12 lg:my-16 2xl:my-20 relative group\"\n        style=\"translate: none; rotate: none; scale: none; transform: translate(0px, 0px);\">\n                    <video autoPlay loop muted class=\"w-full h-full object-cover \">\n                <source src=\" https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/TMDHC_video.mp4\" type=\"video\/mp4\">\n                <track src=\"captions_en.vtt\" kind=\"captions\" srclang=\"en\" label=\"english_captions\">\n                <track src=\"captions_es.vtt\" kind=\"captions\" srclang=\"es\" label=\"spanish_captions\">\n                Your browser does not support the video tag.\n            <\/video>\n                <div class=\"video-playpause-btn pl-4 mt-4 flex justify-center absolute left-1\/2 bottom-10 -translate-x-1\/2  \n         z-[1]\">\n            <button class=\"cursor-pointer pause_btn\" tabindex=\"0\" aria-label=\"animation play pause\"\n                data-play=\"https:\/\/visibleone.com\/wp-content\/themes\/visibleone\/public\/images\/home\/mdi_play.svg\"\n                data-pause=\"https:\/\/visibleone.com\/wp-content\/themes\/visibleone\/public\/images\/home\/mdi_pause.svg\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"12\" height=\"12\" aria-label=\"pause icon\"\n                    src=\"https:\/\/visibleone.com\/wp-content\/themes\/visibleone\/public\/images\/home\/mdi_pause.svg\"\n                    alt=\"pause icon\">\n            <\/button>\n        <\/div>\n    <\/div>\n\n<\/div>\n<script>\n    document.addEventListener('DOMContentLoaded', function () {\n        const stop_video_animation = () => {\n            const button = document.querySelector(\".video-playpause-btn button\");\n            button.classList.toggle('active');\n            const play_btn = button?.getAttribute('data-play');\n            const pause_btn = button?.getAttribute('data-pause');\n            const is_active = document.querySelector(\".video-playpause-btn button.active\");\n            const video = document.querySelector('.CaseStudyVideo video');\n            if (!is_active) {\n                video.play();\n                button.querySelector('img')?.setAttribute('src', pause_btn);\n            } else {\n                video.pause();\n                button.querySelector('img')?.setAttribute('src', play_btn);\n            }\n        }\n        document.querySelector('.video-playpause-btn button')?.addEventListener('click', function () {\n            stop_video_animation();\n        })\n    })\n<\/script>\n\n\n<div class=\"md:py-12 py-6 lg:py-16 px-4 OurProcessV2\" style=\"background-color: rgb(255, 255, 255);\">\n    <div class=\"container-md\">\n        <div class=\"max-w-screen-2xl 3xl:max-w-screen-3xl mx-auto\">\n            <div class=\"text-center\">\n                <div class=\"fs-5xl font-semibold text-primary\">\n                    <h2>\u6211\u5011\u7684\u6311\u6230<\/h2>\n                <\/div>\n                <div class=\"fs-lg font-light text-secondary mt-7\"><\/div>\n            <\/div>\n            <div class=\"mt-7 flex flex-wrap items-stretch justify-center -ml-5 process-lists\">\n                                <div\n                    class=\"2xl:w-[20%] xl:w-[25%] lg:w-[33.3333%] md:w-[50%] w-full px-5 mb-7 flex hover:scale-105 transition-transform duration-300 item\">\n                    <div class=\"flex-1 card\" style=\"box-shadow: #800000 15px 0px 0px;\">\n                        <div class=\"text-center mb-4\">\n                            <span class=\"fs-4xl text-primary font-semibold mb-3\"> 1<\/span>\n                            <div class=\"fs-2xl font-semibold mt-2\" style=\"color: #000000;\">\n                                <h3><span>\u7db2\u8def\u8f14\u52a9\u4f7f\u7528<\/span><\/h3>\n                            <\/div>\n                        <\/div>\n                        <div class=\"fs-base text-secondary font-light text-center\"> <p>\u78ba\u4fdd\u9075\u5b88\u7121\u969c\u7919\u6307\u5357\uff0c\u9075\u5faa WAI-AA \u548c WCAG 2.1 \u6307\u5357<\/p>\n <\/div>\n                    <\/div>\n                <\/div>\n                                                <div\n                    class=\"2xl:w-[20%] xl:w-[25%] lg:w-[33.3333%] md:w-[50%] w-full px-5 mb-7 flex hover:scale-105 transition-transform duration-300 item\">\n                    <div class=\"flex-1 card\" style=\"box-shadow: #006400 15px 0px 0px;\">\n                        <div class=\"text-center mb-4\">\n                            <span class=\"fs-4xl text-primary font-semibold mb-3\"> 2<\/span>\n                            <div class=\"fs-2xl font-semibold mt-2\" style=\"color: #000000;\">\n                                <h3><span>\u9077\u79fb<\/span><\/h3>\n                            <\/div>\n                        <\/div>\n                        <div class=\"fs-base text-secondary font-light text-center\"> <p>\u78ba\u4fdd\u8cc7\u6599\u5b8c\u6574\u6027\u548c\u5e73\u7a69\u904e\u6e21\uff0c\u800c\u4e0d\u5f71\u97ff\u4f7f\u7528\u8005\u9ad4\u9a57\u3002<\/p>\n <\/div>\n                    <\/div>\n                <\/div>\n                                                <div\n                    class=\"2xl:w-[20%] xl:w-[25%] lg:w-[33.3333%] md:w-[50%] w-full px-5 mb-7 flex hover:scale-105 transition-transform duration-300 item\">\n                    <div class=\"flex-1 card\" style=\"box-shadow: #800000 15px 0px 0px;\">\n                        <div class=\"text-center mb-4\">\n                            <span class=\"fs-4xl text-primary font-semibold mb-3\"> 3<\/span>\n                            <div class=\"fs-2xl font-semibold mt-2\" style=\"color: #000000;\">\n                                <h3><span>\u8868\u683c\u8a2d\u8a08<\/span><\/h3>\n                            <\/div>\n                        <\/div>\n                        <div class=\"fs-base text-secondary font-light text-center\"> <p>\u5efa\u7acb\u5177\u6709\u8996\u89ba\u5438\u5f15\u529b\u4e14\u6613\u65bc\u5b58\u53d6\u7684\u8868\u683c\uff0c\u4ee5\u589e\u5f37\u4f7f\u7528\u8005\u5c0d\u4e8b\u4ef6\u7d50\u679c\u8cc7\u8a0a\u7684\u7406\u89e3\u3002<\/p>\n <\/div>\n                    <\/div>\n                <\/div>\n                                                <div\n                    class=\"2xl:w-[20%] xl:w-[25%] lg:w-[33.3333%] md:w-[50%] w-full px-5 mb-7 flex hover:scale-105 transition-transform duration-300 item\">\n                    <div class=\"flex-1 card\" style=\"box-shadow: #006400 15px 0px 0px;\">\n                        <div class=\"text-center mb-4\">\n                            <span class=\"fs-4xl text-primary font-semibold mb-3\"> 4<\/span>\n                            <div class=\"fs-2xl font-semibold mt-2\" style=\"color: #000000;\">\n                                <h3><span>\u5b9a\u5236<\/span><\/h3>\n                            <\/div>\n                        <\/div>\n                        <div class=\"fs-base text-secondary font-light text-center\"> <p>\u6211\u5011\u6b63\u5728\u5e73\u8861\u5ba2\u88fd\u5316\u8207\u70ba\u4e0d\u540c\u8a2d\u5099\u7dad\u8b77\u97ff\u61c9\u5f0f\u4e14\u53ef\u5b58\u53d6\u7684\u4f48\u5c40\u3002<\/p>\n <\/div>\n                    <\/div>\n                <\/div>\n                                                <div\n                    class=\"2xl:w-[20%] xl:w-[25%] lg:w-[33.3333%] md:w-[50%] w-full px-5 mb-7 flex hover:scale-105 transition-transform duration-300 item\">\n                    <div class=\"flex-1 card\" style=\"box-shadow: #800000 15px 0px 0px;\">\n                        <div class=\"text-center mb-4\">\n                            <span class=\"fs-4xl text-primary font-semibold mb-3\"> 5<\/span>\n                            <div class=\"fs-2xl font-semibold mt-2\" style=\"color: #000000;\">\n                                <h3><span>\u5373\u6642\u6578\u64da\u96c6\u6210<\/span><\/h3>\n                            <\/div>\n                        <\/div>\n                        <div class=\"fs-base text-secondary font-light text-center\"> <p>\u78ba\u4fdd\u5916\u90e8\u8cc7\u6599\u4f86\u6e90\u7684\u7121\u7e2b\u96c6\u6210\uff0c\u540c\u6642\u4fdd\u6301\u7db2\u7ad9\u8f09\u5165\u901f\u5ea6\u6700\u4f73\u5316\u3002\u6b64\u5916\uff0c\u5b83\u9084\u78ba\u4fdd iFrame \u7b26\u5408\u53ef\u8a2a\u554f\u6027\u6307\u5357\u4e26\u4e14\u4e0d\u6703\u59a8\u7919\u7528\u6236\u9ad4\u9a57\u3002 <\/p>\n <\/div>\n                    <\/div>\n                <\/div>\n                                            <\/div>\n        <\/div>\n    <\/div>\n\n<\/div>\n\n\n<div id=\"\"\n    class=\"CustomizedCMSSystem flex lg:flex-row flex-col justify-center items-center bg-[#FAFAFA] py-8 mb-4 md:my-4 lg:my-8\">\n    <div class=\"lg:w-1\/2 w-full xl:pr-20 xl:pl-20 lg:pr-8 lg:pl-12 px-4 md:px-8 self-center\">\n        <div class=\"text-primary fs-5xl font-primary font-semibold xl:leading-tight mb-4\">\n            <h2>\u5b9a\u5236\u7684CMS \u7cfb\u7d71<\/h2>\n        <\/div>\n        <div class=\"mb-4 lg:text-left font-light font-primary fs-lg text-secondary\">\n            <p>\u66f4\u65b0\u5f8c\u7684\u7db2\u7ad9\u73fe\u5728\u63d0\u4f9b\u5716\u50cf\u5eab\u3001\u96fb\u5b50\u66f8\u7684 PDF \u986f\u793a\u4ee5\u53ca\u589e\u5f37\u7684\u9810\u89bd\u529f\u80fd\u3002\u6211\u5011\u7684\u5718\u968a\u5728\u6587\u7ae0\u9801\u9762\u4e2d\u6dfb\u52a0\u4e86\u76f8\u95dc\u6a19\u7c64\u548c\u5e16\u5b50\uff0c\u8c50\u5bcc\u4e86\u7528\u6236\u4e92\u52d5\u3002\u8a72\u7db2\u7ad9\u73fe\u5728\u63d0\u4f9b\u66f4\u591a\u52d5\u614b\u5167\u5bb9\u548c\u6539\u9032\u7684\u5c0e\u822a\uff0c\u4f7f\u5176\u512a\u65bc\u4ee5\u524d\u7684\u7248\u672c\u3002<\/p>\n<\/div>\n        <div class=\"flex justify-end relative\">\n            <div class=\"relative flex items-center \"><span\n                    class=\"mr-6 flicking-arrow-prev relative top-[unset] left-[unset] custom_nav flicking-arrow-disabled\"><img decoding=\"async\"\n                        src=\"https:\/\/visibleone.com\/wp-content\/themes\/visibleone\/public\/images\/projects\/customized-cms-system-previous-ltr_c547fddf.svg\"\n                        alt=\"\" aria-hidden=\"true\" loading=\"lazy\"><\/span><span\n                    class=\"mr-7 flicking-arrow-next relative top-[unset] left-[unset] custom_nav\"><img decoding=\"async\"\n                        src=\"https:\/\/visibleone.com\/wp-content\/themes\/visibleone\/public\/images\/projects\/customized-cms-system-previous-rtl_a8582354.svg\"\n                        alt=\"\" aria-hidden=\"true\" loading=\"lazy\"><\/span>\n                <label class=\"custom_switch  relative\"><input type=\"checkbox\" checked><span\n                        class=\"custom_slider custom_round\"><\/span>\n                    <p\n                        class=\"absolute top-1\/2 pl-6 text-light -translate-y-1\/2 font-primary font-semibold lg:text-lg sm:text-base text-sm desktop\">\n                        <span>Desktop<\/span><\/p>\n                    <p\n                        class=\"absolute top-1\/2 pr-6 right-0 text-light -translate-y-1\/2 font-primary font-semibold lg:text-lg sm:text-base text-sm hidden mobile\">\n                        <span>Mobile<\/span><\/p>\n                <\/label>\n\n            <\/div>\n        <\/div>\n    <\/div>\n    <div class=\"lg:w-1\/2 w-full relative py-2 md:py-6 my-4 lg:my-0 lg:py-12 pl-4 pr-4 \">\n        <div><img decoding=\"async\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/Vector-369-13-300x247-1.png\" alt=\"slider background\" loading=\"lazy\" title=\"\" class=\"absolute w-full h-[100%] lg:w-full top-0 right-0\"><\/div>        <div class=\"relative py-8\">\n            <div id=\"desktopView\" class=\"relative xl:max-h-full  custom_padding\">\n                <div class=\"flicking-viewport flicking \" gap=\"0\" collectstatistics=\"false\"\n                    style=\"user-select: none; -webkit-user-drag: none; touch-action: pan-y;\">\n                    <div class=\"flicking-camera -translate-x-2 md:-translate-x-4 3xl:-translate-x-6\">\n                        <div class=\"m-2 md:m-4 3xl:m-6 w-full md:w-auto flicking-item\"><img decoding=\"async\" alt=\"1\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/Tmdhc.png\" loading=\"lazy\" title=\"\" class=\"w-full md:w-[450px] lg:w-[470px] xl:w-[550px] 2xl:w-[600px] 3xl:w-[700px]\"><\/div><div class=\"m-2 md:m-4 3xl:m-6 w-full md:w-auto flicking-item\"><img decoding=\"async\" alt=\"2\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/Mask-group-1.jpg\" loading=\"lazy\" title=\"\" class=\"w-full md:w-[450px] lg:w-[470px] xl:w-[550px] 2xl:w-[600px] 3xl:w-[700px]\"><\/div><div class=\"m-2 md:m-4 3xl:m-6 w-full md:w-auto flicking-item\"><img decoding=\"async\" alt=\"3\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/Mask-group.jpg\" loading=\"lazy\" title=\"\" class=\"w-full md:w-[450px] lg:w-[470px] xl:w-[550px] 2xl:w-[600px] 3xl:w-[700px]\"><\/div>\n                    <\/div>\n                <\/div>\n                                <img decoding=\"async\"\n                    src=\"https:\/\/visibleone.com\/wp-content\/themes\/visibleone\/public\/images\/projects\/customized-cms-system-desktop_3dff4b21.png\"\n                    alt=\"desktop frame\" loading=\"lazy\"\n                    class=\"absolute top-0 left-0 z-10 w-full md:w-[455px] lg:w-[485px] xl:w-[550px] 2xl:w-[600px] 3xl:w-[700px] slide_img\">\n                            <\/div>\n            <div id=\"mobileView\" class=\"relative pl-7 xl:max-h-full hidden\">\n                <div class=\"flicking-viewport flicking \" gap=\"2\" collectstatistics=\"false\" style=\"user-select: none; -webkit-user-drag: none; touch-action: pan-y;\">\n                    <div class=\"flicking-camera -translate-x-4\" >\n                        <div class=\"m-4 flicking-item\"><img decoding=\"async\" alt=\"case study for TMDHC in visible one\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/TMDHC-mobile-1-153x300-1.png\" loading=\"lazy\" title=\"\" class=\"rounded-2xl w-[153px] h-[300px] md:h-[393px] lg:h-[367px] xl:h-[393px] 2xl:h-[430px] md:w-[200px] lg:w-[185px] xl:w-[200px] 2xl:w-[220px] 3xl:w-[249px] 3xl:h-[487px]\"><\/div><div class=\"m-4 flicking-item\"><img decoding=\"async\" alt=\"case study for TMDHC in visible one\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/TMDHC-mobile-2-153x300-1.png\" loading=\"lazy\" title=\"\" class=\"rounded-2xl w-[153px] h-[300px] md:h-[393px] lg:h-[367px] xl:h-[393px] 2xl:h-[430px] md:w-[200px] lg:w-[185px] xl:w-[200px] 2xl:w-[220px] 3xl:w-[249px] 3xl:h-[487px]\"><\/div><div class=\"m-4 flicking-item\"><img decoding=\"async\" alt=\"case study for TMDHC in visible one\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/TMDHC-mobile-3-153x300-1.png\" loading=\"lazy\" title=\"\" class=\"rounded-2xl w-[153px] h-[300px] md:h-[393px] lg:h-[367px] xl:h-[393px] 2xl:h-[430px] md:w-[200px] lg:w-[185px] xl:w-[200px] 2xl:w-[220px] 3xl:w-[249px] 3xl:h-[487px]\"><\/div><div class=\"m-4 flicking-item\"><img decoding=\"async\" alt=\"case study for TMDHC in visible one\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/TMDHC-mobile-4-153x300-1.png\" loading=\"lazy\" title=\"\" class=\"rounded-2xl w-[153px] h-[300px] md:h-[393px] lg:h-[367px] xl:h-[393px] 2xl:h-[430px] md:w-[200px] lg:w-[185px] xl:w-[200px] 2xl:w-[220px] 3xl:w-[249px] 3xl:h-[487px]\"><\/div>\n                    <\/div>\n                <\/div>\n                                <img decoding=\"async\"\n                    src=\"https:\/\/visibleone.com\/wp-content\/themes\/visibleone\/public\/images\/projects\/customized-cms-system-mobile-mockup_6c61c7ed.png\"\n                    alt=\"mobile view\" aria-hidden=\"true\" loading=\"lazy\"\n                    class=\"absolute w-[170px] md:w-[220px] lg:w-[205px] xl:w-[219px] 2xl:w-[240px] 3xl:w-[270px] top-0 left-0 z-10 ml-[16px] slide_img\">\n                                <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    let checkInput = document.querySelector(\".custom_switch input\");\n    let defaultTranslate = 16;\n    let translateXValue = -(defaultTranslate);\n\n    function handleDefaultTransalte() {\n        if (window.innerWidth >= 1910) {\n            defaultTranslate = 24;\n        } else if (window.innerWidth >= 768) {\n            defaultTranslate = 16;\n        } else {\n            defaultTranslate = 8;\n        }\n        translateXValue = -(defaultTranslate);\n    }\n    handleDefaultTransalte();\n\n    checkInput.addEventListener(\"change\", function() {\n        if (checkInput.checked) {\n            handleDefaultTransalte();\n            document.querySelector(\".custom_switch .desktop\").style.display = \"block\";\n            document.querySelector(\".custom_switch .mobile\").style.display = \"none\";\n\n            document.querySelector(\".CustomizedCMSSystem #desktopView\").style.display = \"block\";\n            document.querySelector(\".CustomizedCMSSystem #mobileView\").style.display = \"none\";\n\n        } else {\n            defaultTranslate = 16;\n            translateXValue = -(defaultTranslate);\n            document.querySelector(\".custom_switch .desktop\").style.display = \"none\";\n            document.querySelector(\".custom_switch .mobile\").style.display = \"block\";\n\n            document.querySelector(\".CustomizedCMSSystem #desktopView\").style.display = \"none\";\n            document.querySelector(\".CustomizedCMSSystem #mobileView\").style.display = \"block\";\n        }\n    })\n\n\n    \/\/ Select the buttons\n    let nextButton = document.querySelector(\".CustomizedCMSSystem .flicking-arrow-next\");\n    let prevButton = document.querySelector(\".CustomizedCMSSystem .flicking-arrow-prev\");\n\n    nextButton.addEventListener('click', () => {\n        let checkInput = document.querySelector(\".custom_switch input\");\n\n        if (checkInput.checked) { \/\/ desktop view\n            let flickingCamera = document.querySelector(\n                \".CustomizedCMSSystem #desktopView .flicking-camera\");\n\n            let itemWidth = document.querySelector('.CustomizedCMSSystem #desktopView .flicking-item')\n                .offsetWidth + (defaultTranslate * 2); \/\/ Including margin\n            let totalItems = document.querySelectorAll(\n                '.CustomizedCMSSystem #desktopView .flicking-item').length;\n            let containerWidth = document.querySelector('.CustomizedCMSSystem #desktopView .slide_img')\n                .offsetWidth;\n\n            let maxTranslateX = -(itemWidth * totalItems - containerWidth);\n\n            if (translateXValue - itemWidth >= (maxTranslateX - 10)) {\n                translateXValue -= itemWidth;\n                flickingCamera.style.transform = `translateX(${translateXValue}px)`;\n            }\n        } else {\n            let flickingCamera = document.querySelector(\n                \".CustomizedCMSSystem #mobileView .flicking-camera\");\n\n            let itemWidth = document.querySelector('.CustomizedCMSSystem #mobileView .flicking-item')\n                .offsetWidth + (defaultTranslate * 2); \/\/ Including margin\n            let totalItems = document.querySelectorAll(\n                '.CustomizedCMSSystem #mobileView .flicking-item').length;\n            let containerWidth = document.querySelector('.CustomizedCMSSystem #mobileView .slide_img')\n                .offsetWidth;\n\n            let maxTranslateX = -(itemWidth * totalItems - containerWidth);\n            console.log(\"maxTranslateX \", maxTranslateX)\n\n            if (translateXValue - itemWidth >= (maxTranslateX - 10)) {\n                translateXValue -= itemWidth;\n                flickingCamera.style.transform = `translateX(${translateXValue}px)`;\n            }\n        }\n    });\n\n\n    prevButton.addEventListener('click', () => {\n        let checkInput = document.querySelector(\".custom_switch input\");\n\n        if (checkInput.checked) { \/\/ desktop view\n            let flickingCamera = document.querySelector(\n                \".CustomizedCMSSystem #desktopView .flicking-camera\");\n\n            let itemWidth = document.querySelector('.CustomizedCMSSystem #desktopView .flicking-item')\n                .offsetWidth + (defaultTranslate * 2); \/\/ Including margin\n            let totalItems = document.querySelectorAll(\n                '.CustomizedCMSSystem #desktopView .flicking-item').length;\n            let containerWidth = document.querySelector('.CustomizedCMSSystem #desktopView .slide_img')\n                .offsetWidth;\n\n            if (translateXValue + itemWidth <= 0) {\n                translateXValue += itemWidth;\n                flickingCamera.style.transform = `translateX(${translateXValue}px)`;\n            }\n        } else {\n            let flickingCamera = document.querySelector(\n                \".CustomizedCMSSystem #mobileView .flicking-camera\");\n\n            let itemWidth = document.querySelector('.CustomizedCMSSystem #mobileView .flicking-item')\n                .offsetWidth + (defaultTranslate * 2); \/\/ Including margin\n            let totalItems = document.querySelectorAll(\n                '.CustomizedCMSSystem #mobileView .flicking-item').length;\n            let containerWidth = document.querySelector('.CustomizedCMSSystem #mobileView .slide_img')\n                .offsetWidth;\n\n            if (translateXValue + itemWidth <= 0) {\n                translateXValue += itemWidth;\n                flickingCamera.style.transform = `translateX(${translateXValue}px)`;\n            }\n        }\n    });\n\n    window.addEventListener('resize', function() {\n        handleDefaultTransalte();\n    });\n\n});\n<\/script>\n\n\n<div class=\"CaseStudyService\" style=\"opacity: 1; transform: none;\">\n    <div id=\"\" class=\"relative text-secondary\" style=\"background-color: rgb(255, 255, 255);\">\n        <div\n            class=\"max-w-screen-2xl 3xl:max-w-screen-3xl mx-auto py-16 dark:text-dark px-4 md:px-8 xl:px-16 2xl:px-20 3xl:px-28\">\n            <div class=\"text-center text-primary fs-5xl font-semibold\">\n                <h2>\u89e3\u6c7a\u65b9\u6848\u548c\u6280\u8853\u68e7<\/h2>\n            <\/div>\n            <div\n                class=\"text-center font-light my-4 md:my-8 fs-lg w-full lg:w-[90%] xl:w-[80%] 2xl:w-[70%] mx-auto leading-relaxed\">\n                            <\/div>\n            <div class=\"flex flex-wrap  mt-24 md:mt-20 case-study-services\">\n                <div class=\"lg:w-[33.333%] md:w-[50%] w-full h-auto sm:px-4 lg:pb-16 pb-20 flex max-w-lg mx-auto wrapper-container\">\n                            <div class=\"border rounded-md p-5 pt-8 lg:pl-10 lg:pt-10 lg:pr-5 relative wrapper bg-white\">\n                                <div class=\"flex items-center justify-center icon-wrapper bg-white\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/laravel-dev.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon mx-auto max-w-[90px] max-h-[90px]\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/laravel-dev-g.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon-hover mx-auto max-w-[90px] max-h-[90px]\"><\/div><div class=\"font-semibold uppercase mb-3 relative fs-2xl text-primary text\">\n                                <h3>Laravel \u958b\u767c<\/h3>\n                              <\/div><div class=\"fs-base leading-loose font-light text text-gray-600\">\n                                <p>\u6211\u5011\u9078\u64c7 Laravel \u4f86\u5efa\u7acb\u52d5\u614b\u7db2\u7ad9\uff0c\u5c08\u6ce8\u65bc\u5f37\u5927\u7684\u6548\u80fd\u548c\u9ad8\u6548\u7684\u8cc7\u6599\u8655\u7406\u3002\u8a72\u6846\u67b6\u5c0d\u65bc\u7ba1\u7406\u7db2\u7ad9\u4e0a\u8207\u5065\u5eb7\u76f8\u95dc\u7684\u529f\u80fd\u548c\u4f7f\u7528\u8005\u4e92\u52d5\u81f3\u95dc\u91cd\u8981\u3002<\/p>\n\n                              <\/div><\/div><\/div><div class=\"lg:w-[33.333%] md:w-[50%] w-full h-auto sm:px-4 lg:pb-16 pb-20 flex max-w-lg mx-auto wrapper-container\">\n                            <div class=\"border rounded-md p-5 pt-8 lg:pl-10 lg:pt-10 lg:pr-5 relative wrapper bg-white\">\n                                <div class=\"flex items-center justify-center icon-wrapper bg-white\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/Custom-web-design.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon mx-auto max-w-[90px] max-h-[90px]\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/Custom-web-design-g.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon-hover mx-auto max-w-[90px] max-h-[90px]\"><\/div><div class=\"font-semibold uppercase mb-3 relative fs-2xl text-primary text\">\n                                <h3>API\u96c6\u6210<\/h3>\n                              <\/div><div class=\"fs-base leading-loose font-light text text-gray-600\">\n                                <p>\u6211\u5011\u6574\u5408\u4e86TMDHC \u7528\u6236\u7aef\u63d0\u4f9b\u7684API\uff0c\u5305\u62ec\u7528\u65bc\u8f15\u9b06\u5b58\u53d6\u4e8b\u4ef6\u76f8\u95dc\u8a73\u7d30\u8cc7\u8a0a\u7684\u4e8b\u4ef6\u8cc7\u8a0aAPI\u3001\u7528\u65bc\u986f\u793a\u5ba2\u6236\u6295\u7968\u7d50\u679c\u7684\u6295\u7968\u7d50\u679cAPI\uff0c\u4ee5\u53ca\u7528\u65bc\u900f\u904e\u8f15\u9b06\u700f\u89bd\u548c\u904e\u6ffe\u9078\u9805\u5448\u73fe\u8a73\u7d30\u670d\u52d9\u63d0\u4f9b\u8005\u4fe1\u606f\u7684\u670d\u52d9\u63d0\u4f9b\u8005API \u3002<\/p>\n\n                              <\/div><\/div><\/div><div class=\"lg:w-[33.333%] md:w-[50%] w-full h-auto sm:px-4 lg:pb-16 pb-20 flex max-w-lg mx-auto wrapper-container\">\n                            <div class=\"border rounded-md p-5 pt-8 lg:pl-10 lg:pt-10 lg:pr-5 relative wrapper bg-white\">\n                                <div class=\"flex items-center justify-center icon-wrapper bg-white\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/Related-products.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon mx-auto max-w-[90px] max-h-[90px]\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/Related-products-g.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon-hover mx-auto max-w-[90px] max-h-[90px]\"><\/div><div class=\"font-semibold uppercase mb-3 relative fs-2xl text-primary text\">\n                                <h3>\u5ba2\u88fd\u5316\u548c\u97ff\u61c9\u5f0f\u7db2\u9801\u8a2d\u8a08<\/h3>\n                              <\/div><div class=\"fs-base leading-loose font-light text text-gray-600\">\n                                <p>\u6211\u5011\u7684\u5718\u968a\u958b\u767c\u4e86\u4e00\u7a2e\u5ba2\u88fd\u5316\u7684\u7db2\u9801\u8a2d\u8a08\uff0c\u53ef\u4ee5\u7121\u7e2b\u9069\u61c9\u5404\u7a2e\u8a2d\u5099\uff0c\u78ba\u4fdd\u7121\u8ad6\u662f\u900f\u904e\u684c\u4e0a\u578b\u96fb\u8166\u3001\u5e73\u677f\u96fb\u8166\u9084\u662f\u884c\u52d5\u88dd\u7f6e\u8a2a\u554f\uff0c\u90fd\u80fd\u7372\u5f97\u4e00\u81f4\u4e14\u5f15\u4eba\u5165\u52dd\u7684\u7528\u6236\u9ad4\u9a57\u3002<\/p>\n\n                              <\/div><\/div><\/div><div class=\"lg:w-[33.333%] md:w-[50%] w-full h-auto sm:px-4 lg:pb-16 pb-20 flex max-w-lg mx-auto wrapper-container\">\n                            <div class=\"border rounded-md p-5 pt-8 lg:pl-10 lg:pt-10 lg:pr-5 relative wrapper bg-white\">\n                                <div class=\"flex items-center justify-center icon-wrapper bg-white\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/Website-navigation.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon mx-auto max-w-[90px] max-h-[90px]\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/Website-navigation-g.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon-hover mx-auto max-w-[90px] max-h-[90px]\"><\/div><div class=\"font-semibold uppercase mb-3 relative fs-2xl text-primary text\">\n                                <h3>\u6d3b\u52d5\u65e5\u66c6\u548c\u8a3b\u518a UI \u6982\u5ff5<\/h3>\n                              <\/div><div class=\"fs-base leading-loose font-light text text-gray-600\">\n                                <p>\u6211\u5011\u63a1\u7528\u4e86\u7528\u6236\u53cb\u597d\u7684 UI \u6982\u5ff5\uff0c\u4ee5\u6d3b\u52d5\u65e5\u66c6\u548c\u8a3b\u518a\u7cfb\u7d71\u70ba\u7279\u8272\uff0c\u70ba\u5e0c\u671b\u53c3\u52a0\u6d3b\u52d5\u7684\u7528\u6236\u63d0\u4f9b\u8f15\u9b06\u7684\u5c0e\u822a\u548c\u4e92\u52d5\u3002<\/p>\n\n                              <\/div><\/div><\/div><div class=\"lg:w-[33.333%] md:w-[50%] w-full h-auto sm:px-4 lg:pb-16 pb-20 flex max-w-lg mx-auto wrapper-container\">\n                            <div class=\"border rounded-md p-5 pt-8 lg:pl-10 lg:pt-10 lg:pr-5 relative wrapper bg-white\">\n                                <div class=\"flex items-center justify-center icon-wrapper bg-white\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/One-page-checkout.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon mx-auto max-w-[90px] max-h-[90px]\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/One-page-checkout-g.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon-hover mx-auto max-w-[90px] max-h-[90px]\"><\/div><div class=\"font-semibold uppercase mb-3 relative fs-2xl text-primary text\">\n                                <h3>\u5167\u5bb9\u9077\u79fb\u7684\u4eba\u54e1\u914d\u7f6e\u8a08\u5283<\/h3>\n                              <\/div><div class=\"fs-base leading-loose font-light text text-gray-600\">\n                                <p>\u4e86\u89e3\u6e96\u78ba\u8cc7\u6599\u9077\u79fb\u7684\u91cd\u8981\u6027\uff0c\u6211\u5011\u90e8\u7f72\u4e86\u7d93\u9a57\u8c50\u5bcc\u7684\u5167\u5bb9\u5c08\u5bb6\uff0c\u5c07\u7db2\u7ad9\u5167\u5bb9\u5f9e\u5148\u524d\u7684\u5e73\u53f0\u50b3\u8f38\u548c\u66f4\u65b0\u5230\u57fa\u65bc Laravel \u7684\u65b0\u7db2\u7ad9\u3002<\/p>\n\n                              <\/div><\/div><\/div><div class=\"lg:w-[33.333%] md:w-[50%] w-full h-auto sm:px-4 lg:pb-16 pb-20 flex max-w-lg mx-auto wrapper-container\">\n                            <div class=\"border rounded-md p-5 pt-8 lg:pl-10 lg:pt-10 lg:pr-5 relative wrapper bg-white\">\n                                <div class=\"flex items-center justify-center icon-wrapper bg-white\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/rewards-program.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon mx-auto max-w-[90px] max-h-[90px]\"><img decoding=\"async\" width=\"90\" height=\"90\"\n                                    alt=\"\" \n                                    src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/rewards-program-g.svg\" \n                                    loading=\"lazy\" \n                                    class=\"icon-hover mx-auto max-w-[90px] max-h-[90px]\"><\/div><div class=\"font-semibold uppercase mb-3 relative fs-2xl text-primary text\">\n                                <h3>\u4e92\u52d5\u5f0f\u4f7f\u7528\u8005\u4ecb\u9762\u5143\u7d20<\/h3>\n                              <\/div><div class=\"fs-base leading-loose font-light text text-gray-600\">\n                                <p>\u6211\u5011\u5728\u5716\u50cf\u3001\u6309\u9215\u548c\u5716\u6a19\u7b49\u95dc\u9375 UI \u5143\u4ef6\u4e0a\u5be6\u73fe\u4e86\u8af8\u5982\u61f8\u505c\u6548\u679c\u7b49\u4e92\u52d5\u5143\u7d20\u3002\u9019\u4e9b\u65e8\u5728\u5438\u5f15\u7528\u6236\u7684\u6ce8\u610f\u529b\u4e26\u5f15\u5c0e\u4ed6\u5011\u63a1\u53d6\u91cd\u8981\u7684\u884c\u52d5\u6216\u8a0a\u606f\u3002<\/p>\n\n                              <\/div><\/div><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n<style>\n  .approachSlider .swiper-button-prev::after {\n    background-image: url('https:\/\/visibleone.com\/wp-content\/themes\/visibleone\/public\/images\/projects\/uiux-custom-prev-arrow_1fef814d.svg');\n    background-repeat: no-repeat;\n    background-size: contain;\n  }\n  .approachSlider .swiper-button-next::after {\n    background-image: url('https:\/\/visibleone.com\/wp-content\/themes\/visibleone\/public\/images\/projects\/uiux-custom-arrow_01e08598.svg');\n    background-repeat: no-repeat;\n    background-size: contain;\n  }\n<\/style>\n\n<div id=\"\" class=\"relative approachSlider\" style=\"background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .7) 100%);\">\n  <div class=\"absolute top-0 bg-secondary\/80\" style=\"background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .7) 100%);\"><\/div>\n  <div class=\"relative px-5 md:px-12 lg:px-16 2xl:px-20 max-w-6xl 2xl:max-w-7xl 3xl:max-w-screen-2xl mx-auto py-4 md:pt-8 md:pb-16 xl:py-24 3xl:py-32\">\n    <div class=\"overflow-x-hidden uiuxApproachSliderSwiper\" >\n        <div class=\"swiper-wrapper\">\n          <div class=\"swiper-slide\">\n                <div class=\"  lg:m-4 text-light\">\n                  <div>\n                    <div>\n                      <div class=\" fs-5xl font-primary font-semibold leading-[1.25] md:mb-4 mb-2 yellow_border\"><\/div><div class=\"pt-3 fs-lg font-primary font-light \"><\/div>\n                    <\/div>\n                    <div class=\"self-end  lg:mt-0 my-4\">\n                      <p class=\"flex items-center justify-end pr-12\"><span class=\" leading-[0] font-primary font-normal xl:text-[5.25rem] md:text-[3rem] text-[2rem] lg:pr-5 pr-2\">1<\/span><span class=\"font-primary font-light xl:text-[3.375rem] md:text-[2rem] text-[1rem] text-light\/50\">\/5<\/span><\/p>\n                    <\/div>\n                  <\/div><div class=\"slider-image relative\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/AppealingScrollingAnimation_d70703f3.svg\" loading=\"lazy\" title=\"\" class=\"w-full h-auto\"><\/div><\/div>\n              <\/div><div class=\"swiper-slide\">\n                <div class=\"  lg:m-4 text-light\">\n                  <div>\n                    <div>\n                      <div class=\" fs-5xl font-primary font-semibold leading-[1.25] md:mb-4 mb-2 yellow_border\"><\/div><div class=\"pt-3 fs-lg font-primary font-light \"><\/div>\n                    <\/div>\n                    <div class=\"self-end  lg:mt-0 my-4\">\n                      <p class=\"flex items-center justify-end pr-12\"><span class=\" leading-[0] font-primary font-normal xl:text-[5.25rem] md:text-[3rem] text-[2rem] lg:pr-5 pr-2\">2<\/span><span class=\"font-primary font-light xl:text-[3.375rem] md:text-[2rem] text-[1rem] text-light\/50\">\/5<\/span><\/p>\n                    <\/div>\n                  <\/div><div class=\"slider-image relative\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/SearchFunctionality_508ffb3f.svg\" loading=\"lazy\" title=\"\" class=\"w-full h-auto\"><\/div><\/div>\n              <\/div><div class=\"swiper-slide\">\n                <div class=\"  lg:m-4 text-light\">\n                  <div>\n                    <div>\n                      <div class=\" fs-5xl font-primary font-semibold leading-[1.25] md:mb-4 mb-2 yellow_border\"><h2>UI\/UX \u65b9\u6cd5<\/h2><\/div><h3 class=\"fs-2xl font-primary font-bold\">\u6700\u5438\u5f15\u4eba\u7684\u52d5\u756b<\/h3><div class=\"pt-3 fs-lg font-primary font-light \"><p>\u7db2\u7d61\u52d5\u756b\u662f\u4f7f\u7db2\u7ad9\u4ee4\u4eba\u6109\u6085\u3001\u6709\u5438\u5f15\u529b\u548c\u5145\u6eff\u6d3b\u529b\u7684\u597d\u65b9\u6cd5\u3002\u6211\u5011\u7684\u958b\u767c\u5718\u968a\u5728\u7db2\u7ad9\u4e0a\u6dfb\u52a0\u4e86\u6d41\u66a2\u7684\u52d5\u756b\uff0c\u4f7f\u6574\u500b\u7db2\u7ad9\u5f15\u4eba\u5165\u52dd\u4e14\u5145\u6eff\u6d3b\u529b\u3002<\/p>\n<\/div>\n                    <\/div>\n                    <div class=\"self-end  lg:mt-0 my-4\">\n                      <p class=\"flex items-center justify-end pr-12\"><span class=\" leading-[0] font-primary font-normal xl:text-[5.25rem] md:text-[3rem] text-[2rem] lg:pr-5 pr-2\">3<\/span><span class=\"font-primary font-light xl:text-[3.375rem] md:text-[2rem] text-[1rem] text-light\/50\">\/5<\/span><\/p>\n                    <\/div>\n                  <\/div><div class=\"slider-image relative\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/NavigationDesign_3.svg\" loading=\"lazy\" title=\"\" class=\"w-full h-auto\"><\/div><\/div>\n              <\/div><div class=\"swiper-slide\">\n                <div class=\"  lg:m-4 text-light\">\n                  <div>\n                    <div>\n                      <div class=\" fs-5xl font-primary font-semibold leading-[1.25] md:mb-4 mb-2 yellow_border\"><\/div><div class=\"pt-3 fs-lg font-primary font-light \"><\/div>\n                    <\/div>\n                    <div class=\"self-end  lg:mt-0 my-4\">\n                      <p class=\"flex items-center justify-end pr-12\"><span class=\" leading-[0] font-primary font-normal xl:text-[5.25rem] md:text-[3rem] text-[2rem] lg:pr-5 pr-2\">4<\/span><span class=\"font-primary font-light xl:text-[3.375rem] md:text-[2rem] text-[1rem] text-light\/50\">\/5<\/span><\/p>\n                    <\/div>\n                  <\/div><div class=\"slider-image relative\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/ClearCall-to-ActionsCTAs_7cc3ed1a-1.svg\" loading=\"lazy\" title=\"\" class=\"w-full h-auto\"><\/div><\/div>\n              <\/div><div class=\"swiper-slide\">\n                <div class=\"  lg:m-4 text-light\">\n                  <div>\n                    <div>\n                      <div class=\" fs-5xl font-primary font-semibold leading-[1.25] md:mb-4 mb-2 yellow_border\"><\/div><div class=\"pt-3 fs-lg font-primary font-light \"><\/div>\n                    <\/div>\n                    <div class=\"self-end  lg:mt-0 my-4\">\n                      <p class=\"flex items-center justify-end pr-12\"><span class=\" leading-[0] font-primary font-normal xl:text-[5.25rem] md:text-[3rem] text-[2rem] lg:pr-5 pr-2\">5<\/span><span class=\"font-primary font-light xl:text-[3.375rem] md:text-[2rem] text-[1rem] text-light\/50\">\/5<\/span><\/p>\n                    <\/div>\n                  <\/div><div class=\"slider-image relative\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/ResponsiveMultideviceOptimization_57620140-1.svg\" loading=\"lazy\" title=\"\" class=\"w-full h-auto\"><\/div><\/div>\n              <\/div>        <\/div>  \n        <div class=\"swiper-button-next custom-next-arrrow \"><\/div>\n        <div class=\"swiper-button-prev custom-prev-arrrow \"><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    var uiuxSwiper = new Swiper('.uiuxApproachSliderSwiper', {\n            direction: 'horizontal',\n            navigation: {\n                nextEl: '.swiper-button-next',\n                prevEl: '.swiper-button-prev',\n            },\n            pagination: false,\n            loop: true,\n            slidesPerView: 1,\n            freeMode: true,\n            effect: 'slide',\n            speed: 1000,\n            \/\/ autoplay: {\n            \/\/   delay: 4000,\n            \/\/   disableOnInteraction: false,\n            \/\/ },\n        });\n\n  });\n<\/script>\n\n\n<div class=\"DigitalMarketingBanner relative \" style=\"opacity: 1;    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .7) 100%);\">\n    <div id=\"\" class=\"w-full block\">\n        <div class=\"relative max-w-full\"><img decoding=\"async\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/website-background.png\" alt=\"TMDHC banner in Visible One\" loading=\"lazy\" title=\"\"\n                class=\"min-h-[311px] object-cover w-full mix-blend-multiply\">            <!-- <div class=\"overlay absolute top-0 right-0 left-0 bottom-0 bg-primary\/40]\"\n                style=\"background-color: #A2AAB880;\"><\/div> -->\n            <div class=\"w-full px-8 absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 z-[1]\">\n                <div class=\"text-light text-center fs-5xl font-primary font-semibold leading-[1.25] mb-4\">\n                    <h3 class=\"opacity-100\"><span class=\"text-light opacity-100\">\u8a2a\u554f\u7db2\u7ad9<\/span><\/h3>\n                <\/div>\n                                <div class=\"block mx-auto text-center lg:mt-7 mt-4\">\n                    <a target=\"_blank\" href=\"https:\/\/www.tmdhc.org.hk\/tc\" class=\"hover:bg-light bg-transparent text-light hover:text-primary border-2 border-light inline-block px-8 py-2 fs-lg font-primary font-semibold text-center transition-colors duration-300 break-all\" rel=\"nofollow noopener\">https:\/\/www.tmdhc.org.hk\/tc<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n<section id=\"\" class=\"colour-demo font-primary\">\n    <div\n        class=\"colour-demo-container px-5 py-6 mt-20 lg:mt-10 mx-auto max-w-7xl sm:flex justify-between items-center lg:py-10 xl:py-16 2xl:max-w-[88.75rem] 2xl:items-start 2xl:py-24 2xl:mt-48\">\n        <div class=\"colour-demo-col1 relative sm:flex-1 sm:basis-3\/4 sm:mr-5 lg:mr-0 xl:basis-3\/5\">\n            <div class=\"\n              text-7xl text-grey-600 font-semibold\n              absolute -top-14 -right-5 z-[-1]\n              sm:right-0\n              xl:text-9xl xl:-top-24\n              2xl:-top-[6.25rem] 2xl:right-11\n            \">\n        <h2>\u984f\u8272 <\/h2>\n      <\/div>\n      <div class=\"colour-demo-img\"><img decoding=\"async\" alt=\"\u984f\u8272 \" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/Desktop-font.png\" loading=\"lazy\" title=\"\" class=\"\n                w-auto h-auto object-cover object-center align-middle mix-blend-multiply\n              \"><\/div>\n        <\/div>\n        <div class=\"colour-demo-col2 mt-8 text-primary sm:flex-1 sm:basis-[148px] sm:mt-0 xl:basis-[13.75rem]\">\n            <div class=\"colour-demo-row flex justify-center items-center mt-4 first:mt-0 xl:mt-6 xl:first:mt-0 2xl:mt-9 2xl:first:mt-0\">\n                  <div class=\"\n                            colour-rect w-10 h-10 flex-1 basis-10 max-w-[2.5rem]\n                            rounded-lg xl:rounded-xl 2xl:rounded-2xl\n                            xl:w-14 xl:h-14 xl:basis-14 xl:max-w-[3.5rem] 2xl:w-20 2xl:h-20 2xl:basis-20 2xl:max-w-[5rem]\n                            mr-4 xl:mr-6 2xl:mr-9\n                            shadow-[0_3px_9px_rgba(0,0,0,0.08)]\n                          \" style=\"background-color: #018935;\"><\/div>\n                  <div class=\"colour-hash flex-1 basis-[5.75rem] max-w-[5.75rem] text-base 2xl:text-xl\">#018935<\/div>\n                <\/div><div class=\"colour-demo-row flex justify-center items-center mt-4 first:mt-0 xl:mt-6 xl:first:mt-0 2xl:mt-9 2xl:first:mt-0\">\n                  <div class=\"\n                            colour-rect w-10 h-10 flex-1 basis-10 max-w-[2.5rem]\n                            rounded-lg xl:rounded-xl 2xl:rounded-2xl\n                            xl:w-14 xl:h-14 xl:basis-14 xl:max-w-[3.5rem] 2xl:w-20 2xl:h-20 2xl:basis-20 2xl:max-w-[5rem]\n                            mr-4 xl:mr-6 2xl:mr-9\n                            shadow-[0_3px_9px_rgba(0,0,0,0.08)]\n                          \" style=\"background-color: #0A6F80;\"><\/div>\n                  <div class=\"colour-hash flex-1 basis-[5.75rem] max-w-[5.75rem] text-base 2xl:text-xl\">#0A6F80<\/div>\n                <\/div><div class=\"colour-demo-row flex justify-center items-center mt-4 first:mt-0 xl:mt-6 xl:first:mt-0 2xl:mt-9 2xl:first:mt-0\">\n                  <div class=\"\n                            colour-rect w-10 h-10 flex-1 basis-10 max-w-[2.5rem]\n                            rounded-lg xl:rounded-xl 2xl:rounded-2xl\n                            xl:w-14 xl:h-14 xl:basis-14 xl:max-w-[3.5rem] 2xl:w-20 2xl:h-20 2xl:basis-20 2xl:max-w-[5rem]\n                            mr-4 xl:mr-6 2xl:mr-9\n                            shadow-[0_3px_9px_rgba(0,0,0,0.08)]\n                          \" style=\"background-color: #696158;\"><\/div>\n                  <div class=\"colour-hash flex-1 basis-[5.75rem] max-w-[5.75rem] text-base 2xl:text-xl\">#696158<\/div>\n                <\/div><div class=\"colour-demo-row flex justify-center items-center mt-4 first:mt-0 xl:mt-6 xl:first:mt-0 2xl:mt-9 2xl:first:mt-0\">\n                  <div class=\"\n                            colour-rect w-10 h-10 flex-1 basis-10 max-w-[2.5rem]\n                            rounded-lg xl:rounded-xl 2xl:rounded-2xl\n                            xl:w-14 xl:h-14 xl:basis-14 xl:max-w-[3.5rem] 2xl:w-20 2xl:h-20 2xl:basis-20 2xl:max-w-[5rem]\n                            mr-4 xl:mr-6 2xl:mr-9\n                            shadow-[0_3px_9px_rgba(0,0,0,0.08)]\n                          \" style=\"background-color:   #F0EFEE;\"><\/div>\n                  <div class=\"colour-hash flex-1 basis-[5.75rem] max-w-[5.75rem] text-base 2xl:text-xl\">  #F0EFEE<\/div>\n                <\/div><div class=\"colour-demo-row flex justify-center items-center mt-4 first:mt-0 xl:mt-6 xl:first:mt-0 2xl:mt-9 2xl:first:mt-0\">\n                  <div class=\"\n                            colour-rect w-10 h-10 flex-1 basis-10 max-w-[2.5rem]\n                            rounded-lg xl:rounded-xl 2xl:rounded-2xl\n                            xl:w-14 xl:h-14 xl:basis-14 xl:max-w-[3.5rem] 2xl:w-20 2xl:h-20 2xl:basis-20 2xl:max-w-[5rem]\n                            mr-4 xl:mr-6 2xl:mr-9\n                            shadow-[0_3px_9px_rgba(0,0,0,0.08)]\n                          \" style=\"background-color:   #FFFFFF;\"><\/div>\n                  <div class=\"colour-hash flex-1 basis-[5.75rem] max-w-[5.75rem] text-base 2xl:text-xl\">  #FFFFFF<\/div>\n                <\/div>        <\/div>\n    <\/div>\n<\/section>\n\n\n<section id=\"TypographyBanner\" class=\"typo font-primary\">\n    <div class=\"typo-container px-5 py-6 pr-0 mr-0 ml-auto max-w-7xl md:flex md:justify-between md:items-center lg:py-10 xl:py-16 2xl:items-start 2xl:max-w-[112.5rem]\">\n        <div class=\"typo-text pr-5 md:pr-0 md:flex-1 md:basis-1\/2 2xl:basis-auto\">\n            <div class=\"\n            text-5xl text-grey-600 font-semibold\n            sm:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl\n          \">\n                <h2>\u7248\u5f0f<\/h2>\n            <\/div>\n            <div class=\"typo-sample flex items-center justify-between sm:justify-around mt-5 sm:mt-8 2xl:mt-12\">\n                <div class=\"typo-family font-bold sm:text-right \"><img decoding=\"async\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/AYP-font-image.webp\" alt=\"24-hour responsive service icon in visible one\u7248\u5f0f\" loading=\"lazy\" class=\"w-40 h-auto sm:w-48 xl:w-64 2xl:w-80 3xl:w-auto mr-0 ml-auto block object-cover object-center\"><\/div>\n                <div class=\"typo-weight max-w-[11.25rem] xl:max-w-[18.25rem] text-base flex-1 mt-0 basis-44 2xl:basis-72\"><img decoding=\"async\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/AYP-font-size-image.webp\" alt=\"24-hour responsive service icon in visible one\" loading=\"lazy\" class=\"mr-0 ml-auto object-cover object-center h-auto w-32 sm:w-40 xl:w-44 2xl:w-56 3xl:w-auto\"><\/div>\n            <\/div>\n        <\/div>\n        <div class=\"typo-image mt-5 md:mt-0 md:flex-1 md:self-center md:basis-2\/5 md:max-w-[40%] 2xl:basis-auto\"><img decoding=\"async\" src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/10\/typo.png\" alt=\"typo\u7248\u5f0f\" loading=\"lazy\" title=\"\" class=\"\n              w-auto h-auto align-middle object-center object-cover mr-0 ml-auto    \n            \"><\/div>\n    <\/div>\n<\/section>\n\n\n<section class=\"SliderV2 py-8 amazing-works bg-light text-primary md:py-16 font-primary\">\n    <div class=\"text-center text-primary font-semibold mb-8 fs-5xl\">\n        <h2>\u5176\u5b83\u7cbe\u5f69\u7684\u4f5c\u54c1<\/h2>\n    <\/div>\n    <div class=\"swiper amazing-works-slider sliderV2Swiper\">\n        <div class=\"swiper-wrapper mb-10\">\n            <div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/visibleone.com\/zh-hk\/projects\/fulbright\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/Fulbright.jpg\" \n                            alt=\"\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">\u5bcc\u660c\u91d1\u878d\u96c6\u5718<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div><div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/visibleone.com\/zh-hk\/projects\/tamjai\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/12\/Tamjai.jpg\" \n                            alt=\"\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">\u8b5a\u4ed4\u570b\u969b<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div><div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/visibleone.com\/zh-hk\/projects\/hkci\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/11\/HKCI.jpg\" \n                            alt=\"\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">\u9999\u6e2f\u5730\u65b9\u5fd7\u4e2d\u5fc3<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div><div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/visibleone.com\/zh-hk\/projects\/yamato\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/11\/Yamato.jpg\" \n                            alt=\"\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">Yamato<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div><div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/visibleone.com\/zh-hk\/projects\/ayp\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/11\/AYP.jpg\" \n                            alt=\"\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">\u57ce\u5e02\u5927\u5b78\u5c08\u696d\u9032\u4fee\u5b78\u9662<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div><div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/visibleone.com\/zh-hk\/projects\/sunnex\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/11\/Sunnex.jpg\" \n                            alt=\"\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">Sunnex<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div><div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/visibleone.com\/zh-hk\/projects\/hom\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/11\/HOM.jpg\" \n                            alt=\"\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">HOM<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div><div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/visibleone.com\/zh-hk\/projects\/cityu-scope\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/11\/SCOPE.jpg\" \n                            alt=\"\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">\u57ce\u5e02\u5927\u5b78\u5c08\u696d\u9032\u4fee\u5b78\u9662<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div><div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/visibleone.com\/zh-hk\/projects\/longchamp\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/11\/Longchamp.jpg\" \n                            alt=\"\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">Longchamp<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div><div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/visibleone.com\/zh-hk\/projects\/healthyseed\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/11\/HealthySeed.jpg\" \n                            alt=\"\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">\u6148\u6167\u5e7c\u82d7<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div><div class=\"swiper-slide w-full\">\n                        <div class=\"relative images w-full\">\n                            <div>\n                                <a href=\"https:\/\/visibleone.com\/zh-hk\/projects\/sautao\/\" target=\"_blank\" class=\"relative block w-full overflow-hidden slider-item\"><img decoding=\"async\" \n                            src=\"https:\/\/visibleone.com\/wp-content\/uploads\/2024\/11\/SauTao.jpg\" \n                            alt=\"\" \n                            class=\"panel-image object-cover w-full h-full object-center align-middle aspect-[567\/840]\"\n                          \/>      <div class=\"overlay absolute top-0 bottom-0 right-0 left-0 bg-[#00000073] text-center flex justify-center items-center px-[4.125rem] sm:px-2 opacity-0 transition-opacity duration-300 overlay\">\n                                <h3 class=\"text-light font-medium fs-2xl\">\u58fd\u6843<\/h3>\n                            <\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div>        <\/div>\n        <div class=\"swiper-button-next\"><\/div>\n        <div class=\"swiper-button-prev\"><\/div>\n        <div class=\"swiper-pagination\"><\/div>\n    <\/div>\n<\/section>\n\n\n<script>\n    (function() {\n\n        const items = [{\"title\":\"\\u5bcc\\u660c\\u91d1\\u878d\\u96c6\\u5718\",\"src\":{\"ID\":57867,\"id\":57867,\"title\":\"Fulbright\",\"filename\":\"Fulbright.jpg\",\"filesize\":829709,\"url\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/Fulbright.jpg\",\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/ayp\\\/attachment\\\/fulbright\\\/\",\"alt\":\"\",\"author\":\"4\",\"description\":\"\",\"caption\":\"\",\"name\":\"fulbright\",\"status\":\"inherit\",\"uploaded_to\":26846,\"date\":\"2024-12-07 06:48:48\",\"modified\":\"2024-12-07 06:48:48\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/visibleone.com\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/Fulbright-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/Fulbright-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/Fulbright.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/Fulbright.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/Fulbright.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/Fulbright.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/fulbright\\\/\"},{\"title\":\"\\u8b5a\\u4ed4\\u570b\\u969b\",\"src\":{\"ID\":57874,\"id\":57874,\"title\":\"Tamjai\",\"filename\":\"Tamjai.jpg\",\"filesize\":468945,\"url\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/Tamjai.jpg\",\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/ayp\\\/attachment\\\/tamjai\\\/\",\"alt\":\"\",\"author\":\"4\",\"description\":\"\",\"caption\":\"\",\"name\":\"tamjai\",\"status\":\"inherit\",\"uploaded_to\":26846,\"date\":\"2024-12-07 06:49:26\",\"modified\":\"2024-12-07 06:49:26\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/visibleone.com\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/Tamjai-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/Tamjai-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/Tamjai.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/Tamjai.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/Tamjai.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/Tamjai.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/tamjai\\\/\"},{\"title\":\"\\u9999\\u6e2f\\u5730\\u65b9\\u5fd7\\u4e2d\\u5fc3\",\"src\":{\"ID\":52181,\"id\":52181,\"title\":\"HKCI\",\"filename\":\"HKCI.jpg\",\"filesize\":457770,\"url\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HKCI.jpg\",\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/fulbright\\\/attachment\\\/hkci-2\\\/\",\"alt\":\"\",\"author\":\"4\",\"description\":\"\",\"caption\":\"\",\"name\":\"hkci-2\",\"status\":\"inherit\",\"uploaded_to\":26856,\"date\":\"2024-11-22 04:00:00\",\"modified\":\"2024-11-22 04:00:00\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/visibleone.com\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HKCI-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HKCI-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HKCI.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HKCI.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HKCI.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HKCI.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/hkci\\\/\"},{\"title\":\"Yamato\",\"src\":{\"ID\":52196,\"id\":52196,\"title\":\"Yamato\",\"filename\":\"Yamato.jpg\",\"filesize\":199668,\"url\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Yamato.jpg\",\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/fulbright\\\/attachment\\\/yamato-2\\\/\",\"alt\":\"\",\"author\":\"4\",\"description\":\"\",\"caption\":\"\",\"name\":\"yamato-2\",\"status\":\"inherit\",\"uploaded_to\":26856,\"date\":\"2024-11-22 04:01:07\",\"modified\":\"2024-11-22 04:01:07\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/visibleone.com\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Yamato-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Yamato-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Yamato.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Yamato.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Yamato.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Yamato.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/yamato\\\/\"},{\"title\":\"\\u57ce\\u5e02\\u5927\\u5b78\\u5c08\\u696d\\u9032\\u4fee\\u5b78\\u9662\",\"src\":{\"ID\":52186,\"id\":52186,\"title\":\"AYP\",\"filename\":\"AYP.jpg\",\"filesize\":331026,\"url\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/AYP.jpg\",\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/fulbright\\\/attachment\\\/ayp-2\\\/\",\"alt\":\"\",\"author\":\"4\",\"description\":\"\",\"caption\":\"\",\"name\":\"ayp-2\",\"status\":\"inherit\",\"uploaded_to\":26856,\"date\":\"2024-11-22 04:01:00\",\"modified\":\"2024-11-22 04:01:00\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/visibleone.com\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/AYP-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/AYP-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/AYP.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/AYP.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/AYP.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/AYP.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/ayp\\\/\"},{\"title\":\"Sunnex\",\"src\":{\"ID\":52226,\"id\":52226,\"title\":\"Sunnex\",\"filename\":\"Sunnex.jpg\",\"filesize\":421950,\"url\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Sunnex.jpg\",\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/fulbright\\\/attachment\\\/sunnex-2\\\/\",\"alt\":\"\",\"author\":\"4\",\"description\":\"\",\"caption\":\"\",\"name\":\"sunnex-2\",\"status\":\"inherit\",\"uploaded_to\":26856,\"date\":\"2024-11-22 04:01:59\",\"modified\":\"2024-11-22 04:01:59\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/visibleone.com\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Sunnex-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Sunnex-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Sunnex.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Sunnex.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Sunnex.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Sunnex.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/sunnex\\\/\"},{\"title\":\"HOM\",\"src\":{\"ID\":52206,\"id\":52206,\"title\":\"HOM\",\"filename\":\"HOM.jpg\",\"filesize\":185968,\"url\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HOM.jpg\",\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/fulbright\\\/attachment\\\/hom-2\\\/\",\"alt\":\"\",\"author\":\"4\",\"description\":\"\",\"caption\":\"\",\"name\":\"hom-2\",\"status\":\"inherit\",\"uploaded_to\":26856,\"date\":\"2024-11-22 04:01:47\",\"modified\":\"2024-11-22 04:01:47\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/visibleone.com\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HOM-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HOM-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HOM.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HOM.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HOM.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HOM.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/hom\\\/\"},{\"title\":\"\\u57ce\\u5e02\\u5927\\u5b78\\u5c08\\u696d\\u9032\\u4fee\\u5b78\\u9662\",\"src\":{\"ID\":52221,\"id\":52221,\"title\":\"SCOPE\",\"filename\":\"SCOPE.jpg\",\"filesize\":462345,\"url\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SCOPE.jpg\",\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/fulbright\\\/attachment\\\/scope-2\\\/\",\"alt\":\"\",\"author\":\"4\",\"description\":\"\",\"caption\":\"\",\"name\":\"scope-2\",\"status\":\"inherit\",\"uploaded_to\":26856,\"date\":\"2024-11-22 04:01:55\",\"modified\":\"2024-11-22 04:01:55\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/visibleone.com\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SCOPE-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SCOPE-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SCOPE.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SCOPE.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SCOPE.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SCOPE.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/cityu-scope\\\/\"},{\"title\":\"Longchamp\",\"src\":{\"ID\":52211,\"id\":52211,\"title\":\"Longchamp\",\"filename\":\"Longchamp.jpg\",\"filesize\":235915,\"url\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Longchamp.jpg\",\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/fulbright\\\/attachment\\\/longchamp-2\\\/\",\"alt\":\"\",\"author\":\"4\",\"description\":\"\",\"caption\":\"\",\"name\":\"longchamp-2\",\"status\":\"inherit\",\"uploaded_to\":26856,\"date\":\"2024-11-22 04:01:50\",\"modified\":\"2024-11-22 04:01:50\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/visibleone.com\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Longchamp-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Longchamp-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Longchamp.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Longchamp.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Longchamp.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Longchamp.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/longchamp\\\/\"},{\"title\":\"\\u6148\\u6167\\u5e7c\\u82d7\",\"src\":{\"ID\":52201,\"id\":52201,\"title\":\"HealthySeed\",\"filename\":\"HealthySeed.jpg\",\"filesize\":407519,\"url\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HealthySeed.jpg\",\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/fulbright\\\/attachment\\\/healthyseed-2\\\/\",\"alt\":\"\",\"author\":\"4\",\"description\":\"\",\"caption\":\"\",\"name\":\"healthyseed-2\",\"status\":\"inherit\",\"uploaded_to\":26856,\"date\":\"2024-11-22 04:01:44\",\"modified\":\"2024-11-22 04:01:44\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/visibleone.com\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HealthySeed-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HealthySeed-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HealthySeed.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HealthySeed.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HealthySeed.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/HealthySeed.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/healthyseed\\\/\"},{\"title\":\"\\u58fd\\u6843\",\"src\":{\"ID\":52216,\"id\":52216,\"title\":\"SauTao\",\"filename\":\"SauTao.jpg\",\"filesize\":280742,\"url\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SauTao.jpg\",\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/fulbright\\\/attachment\\\/sautao-2\\\/\",\"alt\":\"\",\"author\":\"4\",\"description\":\"\",\"caption\":\"\",\"name\":\"sautao-2\",\"status\":\"inherit\",\"uploaded_to\":26856,\"date\":\"2024-11-22 04:01:53\",\"modified\":\"2024-11-22 04:01:53\",\"menu_order\":0,\"mime_type\":\"image\\\/jpeg\",\"type\":\"image\",\"subtype\":\"jpeg\",\"icon\":\"https:\\\/\\\/visibleone.com\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":567,\"height\":840,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SauTao-150x150.jpg\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SauTao-203x300.jpg\",\"medium-width\":203,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SauTao.jpg\",\"medium_large-width\":567,\"medium_large-height\":840,\"large\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SauTao.jpg\",\"large-width\":567,\"large-height\":840,\"1536x1536\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SauTao.jpg\",\"1536x1536-width\":567,\"1536x1536-height\":840,\"2048x2048\":\"https:\\\/\\\/visibleone.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/SauTao.jpg\",\"2048x2048-width\":567,\"2048x2048-height\":840}},\"link\":\"https:\\\/\\\/visibleone.com\\\/zh-hk\\\/projects\\\/sautao\\\/\"}];\n\n        const sliderV2Swiper = new Swiper('.sliderV2Swiper', {\n            direction: 'horizontal',\n            loop: true,\n            scrollbar: {\n                el: \".swiper-scrollbar\",\n                hide: true\n            },\n            pagination: false,\n            navigation: {\n                nextEl: '.swiper-button-next',\n                prevEl: '.swiper-button-prev',\n            },\n            effect: 'slide',\n            speed: 1000,\n            slidesPerView: 1,\n            spaceBetween: 20,\n            centeredSlides: true,\n            breakpoints: {\n                640: {\n                    slidesPerView: 2,\n                },\n                1024: {\n                    slidesPerView: 3.3,\n                },\n            },\n        });\n    })();\n<\/script>\n\n\n<section class=\"VOCapacityCaseCard\n        capacity-case relative z-0\n        bg-primary text-light font-primary\n      \">\n  <div class=\"\n          capacity-case-container mx-auto\n          py-6 px-5 lg:py-10 lg:px-10 2xl:py-[5.25rem]\n          lg:flex lg:items-center lg:justify-between\n          max-w-7xl 2xl:max-w-[101.75rem]\n        \">\n    <div class=\"capacity-case-main lg:flex-1\">\n      <div class=\"font-semibold fs-5xl\">\n        <h3>\u8b93\u6211\u5011\u5728\u60a8\u5408\u9069\u7684\u6642\u9593\u7d66\u60a8\u56de\u96fb\u8a71\u3002<\/h3>\n      <\/div>\n      <div class=\"font-light fs-lg mt-4\"><p>\u8b93\u6211\u5011\u5728\u60a8\u5408\u9069\u7684\u6642\u9593\u7d66\u60a8\u56de\u96fb\u8a71\u3002 \u8b93\u6211\u5011\u5728\u60a8\u5408\u9069\u7684\u6642\u9593\u7d66\u60a8\u56de\u96fb\u8a71\u3002\u6211\u5011\u5df2\u6e96\u5099\u597d\u8207\u60a8\u958b\u59cb\u4e0b\u4e00\u500b\u7db2\u7ad9\u9805\u76ee\u3002\u8b93\u6211\u5011\u7232\u60a8\u5b89\u6392\u4e00\u500b\u9069\u5408\u60a8\u7684\u6703\u8b70\u3002<\/p>\n<\/div>\n    <\/div>\n    <a class=\"text-center font-semibold text-light fs-xl py-2 2xl:py-3 px-5 border-2 border-solid border-light inline-block transform hover:bg-light hover:text-primary transition-colors mt-6 lg:mt-0 cursor-pointer duration-300\" href=\"https:\/\/info.visibleone.com\/meetings\/visibees\/callback\" target=\"_blank\" rel=\"noopener noreferrer\">\u5b89\u6392\u56de\u96fb<\/a>\n  <\/div>\n  <div class=\"\n          capacity-deco-left absolute left-0 bottom-0 z-[-1]\n        \"><img decoding=\"async\" src=\"https:\/\/visibleone.com\/wp-content\/themes\/visibleone\/public\/images\/deco-1_e524951b.png\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" class=\"\n            w-14 xl:w-16 2xl:w-auto h-auto align-middle object-cover object-center\n            absolute top-2 left-2 lg:-top-3 lg:left-4 2xl:top-0 2xl:left-11\n          \"><img decoding=\"async\" src=\"https:\/\/visibleone.com\/wp-content\/themes\/visibleone\/public\/images\/circle-left_39c81b4a.png\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" class=\"\n            w-16 lg:w-20 xl:w-28 2xl:w-44 h-auto align-middle object-cover object-center\n          \"><\/div>\n  <div class=\"\n          capacity-deco-right absolute right-0 -top-1 z-[-1]\n          lg:-top-4 2xl:-top-1\n        \"><img decoding=\"async\" src=\"https:\/\/visibleone.com\/wp-content\/themes\/visibleone\/public\/images\/circle-right_b6383a1a.png\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" class=\"\n            w-16 xl:w-20 2xl:w-auto h-auto align-middle object-cover object-center\n          \"><img decoding=\"async\" src=\"https:\/\/visibleone.com\/wp-content\/themes\/visibleone\/public\/images\/deco-2_4d21f7cd.png\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" class=\"\n            w-14 lg:w-16 2xl:w-auto h-auto align-middle object-cover object-center\n            absolute top-10 right-0 lg:top-16 2xl:top-44 2xl:right-5\n          \"><img decoding=\"async\" src=\"https:\/\/visibleone.com\/wp-content\/themes\/visibleone\/public\/images\/deco-3_de5a71a3.png\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" class=\"\n            w-10 xl:w-12 2xl:w-auto h-auto align-middle object-cover object-center\n            absolute top-0 right-10 lg:top-5 lg:right-24 2xl:top-9 2xl:right-52\n          \"><\/div>\n<\/section>\n\n\n\n\n<section id=\"e750319c-4ee5-4bcb-8993-96a345d9f00a\" class=\"\n        contact-form bg-[color:var(--bg-color)] text-light relative overflow-hidden\n        StartContactForm contact_form\n      \" style=\"--bg-color: #4DD7A9;\">\n    <div class=\"sm:flex sm:items-center xl:justify-between \">\n        <div\n            class=\"absolute vertical-text text-5xl font-semibold hidden sm:block sm:flex-1 sm:basis-[15%] sm:max-w-[15%] md:basis-1\/5 xl:text-7xl 2xl:text-[7.5rem] vertical_text\">\n                            <div\n                    class=\"absolute top-0 bottom-0 left-5 h-max lg:left-20 xl:left-32 2xl:left-36 cursor-default aniBottomToTop text-custom-animation-bt\">\n                    \u8b93\u6211\u5011\u4e00\u8d77\u52aa\u529b                <\/div>\n                                        <div\n                    class=\"absolute -top-3 left-[4.25rem] md:left-20 h-max lg:left-36 xl:left-52 2xl:-top-8 2xl:left-80 cursor-default aniTopToBottom text-custom-animation-tb\">\n                    <span class=\"opacity-30\">\u8207\u6211\u5011\u4ea4\u8ac7<\/span>&nbsp;\n                    <span class=\"opacity-60\">\u806f\u7d61\u6211\u5011<\/span>\n                <\/div>\n                    <\/div>\n        <div class=\"contact-form-playpause-btn  justify-start absolute left-[14%] bottom-5 sm:flex hidden\">\n                    <button class=\"cursor-pointer pause_btn\" tabindex=\"0\" aria-label=\"animation play pause\"\n                    data-play=\"https:\/\/visibleone.com\/wp-content\/themes\/visibleone\/public\/images\/home\/mdi_play.svg\"\n                    data-pause=\"https:\/\/visibleone.com\/wp-content\/themes\/visibleone\/public\/images\/home\/mdi_pause.svg\"\n                    >\n                    <img loading=\"lazy\" decoding=\"async\" width=\"12\" height=\"12\" aria-label=\"pause icon\"\n                        src=\"https:\/\/visibleone.com\/wp-content\/themes\/visibleone\/public\/images\/home\/mdi_pause.svg\"\n                        alt=\"pause icon\">\n                    <\/button>\n                <\/div>\n        <div\n            class=\"contact-form__container sm:flex-1 py-16 px-5 font-primary mx-auto sm:max-w-2xl xl:max-w-4xl xl:py-32 2xl:py-36 2xl:max-w-6xl\">\n            <div\n                class=\"mx-auto contact-form__main text-center sm:flex-1 sm:basis-[85%] sm:max-w-[85%]  md:max-w-xl md:basis-4\/5 xl:max-w-2xl 2xl:max-w-5xl\">\n                <div class=\"contact-form__header  mx-auto 2xl:max-w-xl\">\n                    <div class=\"font-semibold mb-5 2xl:mb-8 fs-5xl\">\n                        <div>\u8207\u6211\u5011\u4e00\u8d77\u5408\u4f5c\u9805\u76ee<\/di>\n                        <\/div>\n                        <div class=\"font-normal fs-lg mb-6 2xl:mb-12\"><p>\u5982\u679c\u60a8\u6709\u4e00\u500b\u9805\u76ee\u4e26\u60f3\u8207\u6211\u5011\u8a0e\u8ad6\uff0c\u8acb\u4f7f\u7528\u4e0b\u9762\u7684\u8868\u683c\u7d66\u6211\u5011\u6253\u96fb\u8a71\u6216\u767c\u96fb\u5b50\u90f5\u4ef6\u7d66\u6211\u5011\u3002<\/p>\n<\/div>\n                    <\/div>\n                    <div class=\"relative contact-form__body\">\n                        <div>\n                            <div id=\"hubspotForm\"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"contact-form__bg absolute top-1\/2 right-0 -translate-y-1\/2\">\n            <img decoding=\"async\" width=\"257\" height=\"510\"\n                src=\"https:\/\/visibleone.com\/wp-content\/themes\/visibleone\/public\/images\/projects\/StartContact-bgImg_c8261431.png\"\n                alt=\"\" aria-hidden=\"true\" loading=\"lazy\" class=\"h-auto w-24 lg:w-36 2xl:w-auto\" \/>\n        <\/div>\n<\/section>\n<style>\n\n<\/style>\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function () {\n        \/\/ Your HubSpot form details\n        const portalId = \"5194436\";\n        const formId = \"e750319c-4ee5-4bcb-8993-96a345d9f00a\";\n\n        \/\/ Function to load the HubSpot form dynamically\n        function loadHubSpotForm() {\n            const script = document.createElement('script');\n            script.src = 'https:\/\/js.hsforms.net\/forms\/v2.js'; \/\/ HubSpot's form script\n            script.onload = () => {\n                window.hbspt.forms.create({\n                    portalId: portalId,\n                    formId: formId,\n                    target: '#hubspotForm', \/\/ ID of the element where the form will be rendered\n                    css: \"\",\n\t\t\t\t\tonFormSubmitted: function ($form, data) {\n    var values = data.submissionValues || {};\n    var email = values.email || '';\n    var phone = values.phone || '';\n\n    console.log(\"HubSpot form submitted:\");\n    console.log(\"Email:\", email);\n    console.log(\"Phone:\", phone);\n\n    gtag('set', 'user_data', {\n        email: email,\n        phone_number: phone\n    });\n}\n,\n                    onFormReady: function ($form) {\n                        const targetElement = $form.find('.hs-form-field label');\n                        targetElement?.each(function (key, label) {\n                            const placeholder = label?.getAttribute('placeholder');\n                            const name = label?.closest('.hs-form-field').querySelector('select')?.getAttribute('name')?.replaceAll('_', ' ');\n                            const placeholder1 = label?.closest('.hs-form-field').querySelector('input')?.getAttribute('placeholder');\n                            label?.querySelector('span:first-child')?.setAttribute('arial-label', placeholder1)\n                            label?.setAttribute('arial-label', placeholder1);\n                            label?.closest('.hs-form-field').querySelector('input')?.setAttribute('arial-label', placeholder1?.replace('*', ''))\n                            label?.closest('.hs-form-field').querySelector('select')?.setAttribute('arial-label', name?.replaceAll('_', ' '))\n                        });\n                        const style = document.createElement('style');\n                        style.innerHTML = `\n                        .hs-error-msgs label {\n                            color: #fc010c;\n                        }\n                        .hbspt-form select,\n                        .hbspt-form select::placeholder{\n                            color: #33475b !important;\n  opacity: 1 !important;\n                        }\n                        .hbspt-form textarea::placeholder,\n.hbspt-form input::placeholder{\n  color: #33475b !important;\n  opacity: 1 !important;\n}\n.hbspt-form input{\n  background-color: #fff !important;\n}\n.hs_submit input[type=submit]{\n  background: #000 !important;\n  color:#fff !important;\n  border:1px solid #000 !important;\n}\n                        `;\n                        document.querySelector('#hubspotForm iframe').contentDocument.head.appendChild(style);\n                    }\n                });\n            };\n            document.body.appendChild(script);\n        }\n\n        loadHubSpotForm();\n        const remove_animation = () => {\n            document.querySelectorAll('.text-custom-animation-bt').forEach(function (ani) {\n                ani.classList.remove('aniBottomToTop');\n            });\n            document.querySelectorAll('.text-custom-animation-tb').forEach(function (ani) {\n                ani.classList.remove('aniTopToBottom');\n            });\n            document.querySelector('.contact-form-playpause-btn .pause_btn').classList?.remove('active');\n            document.querySelector('.contact-form-playpause-btn .play_btn').classList?.add('active');\n        }\n        const add_animation = () => {\n            const button = document.querySelector(\".contact-form-playpause-btn button\");\n            button.classList.toggle('active');\n            const play_btn = button?.getAttribute('data-play');\n            const pause_btn = button?.getAttribute('data-pause');\n            const is_active = document.querySelector(\".contact-form-playpause-btn button.active\");\n            if (!is_active) {\n                document.querySelectorAll('.text-custom-animation-bt').forEach(function (ani) {\n                    ani.classList.add('aniBottomToTop');\n                });\n                document.querySelectorAll('.text-custom-animation-tb').forEach(function (ani) {\n                    ani.classList.add('aniTopToBottom');\n                });\n                button.querySelector('img')?.setAttribute('src', pause_btn);\n            } else {\n                document.querySelectorAll('.text-custom-animation-bt').forEach(function (ani) {\n                    ani.classList.remove('aniBottomToTop');\n                });\n                document.querySelectorAll('.text-custom-animation-tb').forEach(function (ani) {\n                    ani.classList.remove('aniTopToBottom');\n                });\n                button.querySelector('img')?.setAttribute('src', play_btn);\n            }\n        }\n        document.querySelector('.contact-form-playpause-btn button')?.addEventListener('click', function () {\n            add_animation();\n\n        })\n        \n    });\n\n<\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":0,"parent":27225,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"class_list":["post-27806","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/visibleone.com\/zh-hk\/wp-json\/wp\/v2\/pages\/27806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/visibleone.com\/zh-hk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/visibleone.com\/zh-hk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/visibleone.com\/zh-hk\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/visibleone.com\/zh-hk\/wp-json\/wp\/v2\/comments?post=27806"}],"version-history":[{"count":0,"href":"https:\/\/visibleone.com\/zh-hk\/wp-json\/wp\/v2\/pages\/27806\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/visibleone.com\/zh-hk\/wp-json\/wp\/v2\/pages\/27225"}],"wp:attachment":[{"href":"https:\/\/visibleone.com\/zh-hk\/wp-json\/wp\/v2\/media?parent=27806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}