{"id":708,"date":"2026-06-30T11:17:20","date_gmt":"2026-06-30T11:17:20","guid":{"rendered":"https:\/\/hku-iamc.visibleone.dev\/home\/"},"modified":"2026-08-21T09:16:57","modified_gmt":"2026-08-21T09:16:57","slug":"home","status":"publish","type":"page","link":"https:\/\/hku-iamc.visibleone.dev\/tcn\/","title":{"rendered":"\u9996\u9801"},"content":{"rendered":"\n<div block-name=\"home-banner\" class=\"relative pt-2 home-banner\">\n        <div class=\"swiper home-banner-swiper\">\n        <div class=\"swiper-wrapper\">\n                        <div class=\"swiper-slide\">\n                                <div class=\"relative rounded-t-[20px] xs:rounded-t-[30px] sm:rounded-t-[40px] 3xl:rounded-t-[68px]\">\n                    <img decoding=\"async\" class=\"w-full object-cover rounded-t-[20px] xs:rounded-t-[30px] sm:rounded-t-[40px] 3xl:rounded-t-[68px]\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/image-4.png\" alt=\"\" \/>\n                <\/div>\n                            <\/div>\n                        <div class=\"swiper-slide\">\n                                <div class=\"relative rounded-t-[20px] xs:rounded-t-[30px] sm:rounded-t-[40px] 3xl:rounded-t-[68px]\">\n                    <img decoding=\"async\" class=\"w-full object-cover rounded-t-[20px] xs:rounded-t-[30px] sm:rounded-t-[40px] 3xl:rounded-t-[68px]\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/HKU-Banner-2-V1.5-1-scaled.jpg\" alt=\"\" \/>\n                <\/div>\n                            <\/div>\n                        <div class=\"swiper-slide\">\n                                <div class=\"relative rounded-t-[20px] xs:rounded-t-[30px] sm:rounded-t-[40px] 3xl:rounded-t-[68px]\">\n                    <img decoding=\"async\" class=\"w-full object-cover rounded-t-[20px] xs:rounded-t-[30px] sm:rounded-t-[40px] 3xl:rounded-t-[68px]\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/HKU-Banner-1-V1.5-scaled.jpg\" alt=\"\" \/>\n                <\/div>\n                            <\/div>\n                        <div class=\"swiper-slide\">\n                                <div class=\"relative rounded-t-[20px] xs:rounded-t-[30px] sm:rounded-t-[40px] 3xl:rounded-t-[68px]\">\n                    <img decoding=\"async\" class=\"w-full object-cover rounded-t-[20px] xs:rounded-t-[30px] sm:rounded-t-[40px] 3xl:rounded-t-[68px]\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/image-4.png\" alt=\"\" \/>\n                <\/div>\n                            <\/div>\n                        <div class=\"swiper-slide\">\n                                <div class=\"relative rounded-t-[20px] xs:rounded-t-[30px] sm:rounded-t-[40px] 3xl:rounded-t-[68px]\">\n                    <img decoding=\"async\" class=\"w-full object-cover rounded-t-[20px] xs:rounded-t-[30px] sm:rounded-t-[40px] 3xl:rounded-t-[68px]\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/HKU-Banner-2-V1.5-1-scaled.jpg\" alt=\"\" \/>\n                <\/div>\n                            <\/div>\n                        <div class=\"swiper-slide\">\n                                <div class=\"relative rounded-t-[20px] xs:rounded-t-[30px] sm:rounded-t-[40px] 3xl:rounded-t-[68px]\">\n                    <img decoding=\"async\" class=\"w-full object-cover rounded-t-[20px] xs:rounded-t-[30px] sm:rounded-t-[40px] 3xl:rounded-t-[68px]\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/HKU-Banner-1-V1.5-scaled.jpg\" alt=\"\" \/>\n                <\/div>\n                            <\/div>\n                    <\/div>\n        <div class=\"swiper-button-prev\"><\/div>\n        <div class=\"swiper-button-next\"><\/div>\n    <\/div>\n    <\/div>\n\n<script>\n    const homeBannerSwiper = new Swiper('.home-banner-swiper', {\n      slidesPerView: 1.2,\n      centeredSlides: true,\n      spaceBetween: 10,\n      autoHeight: false,\n      navigation: {\n        nextEl: '.swiper-button-next',\n        prevEl: '.swiper-button-prev',\n      },\n      effect: 'slide',\n      speed: 1000,\n      loop: true,\n      autoplay: {\n        delay: 4000,\n        disableOnInteraction: false,\n      },\n      breakpoints: {\n        480: {\n          slidesPerView: 1.5,\n          spaceBetween: 20,\n        },\n        640: {\n          slidesPerView: 1.5,\n          spaceBetween: 30,\n        },\n        1440: {\n          slidesPerView: 1.5,\n          spaceBetween: 40,\n        },\n      },\n    });\n<\/script>\n\n\n<div block-name=\"whats-happenings\" x-data=\"whatsHappenings\" class=\"relative pb-10 xs:pb-[60px] xl:pb-20 whats-happenings\">\n\n    <div class=\"pt-10 xs:pt-[60px] xl:pt-20 pb-8 sm:pb-10 bg-primary-blue-04\">\n        <div class=\"container mx-auto\">\n            <div class=\"container-lg\">\n                <h2 class=\"heading2 text-primary-blue-01\">\n                    \u6700\u65b0\u52d5\u5411                <\/h2>\n                <div class=\"mt-6 xs:mt-8 sm:mt-10 lg:mt-[60px] flex gap-[10px] xs:gap-3 flex-wrap\">\n                    <button\n                        @click=\"setTab('news')\"\n                        :class=\"activeTab === 'news' ? 'active' : 'bg-white text-metalic-dark-02'\"\n                        class=\"w-full xxs:w-auto rounded transition-all duration-300 hover:bg-secondary-green-04 hover:text-secondary-green-01 heading6 px-4 xs:px-6 xl:px-[30px] py-[10px] xs:py-4 xl:py-5 inline-flex items-center justify-center\">\n                        <span>\u65b0\u805e\u3001\u516c\u544a<\/span>\n                    <\/button>\n                    <button\n                        @click=\"setTab('events')\"\n                        :class=\"activeTab === 'events' ? 'active' : 'bg-white text-metalic-dark-02'\"\n                        class=\"w-full xxs:w-auto rounded transition-all duration-300 hover:bg-secondary-green-04 hover:text-secondary-green-01 heading6 px-4 xs:px-6 xl:px-[30px] py-[10px] xs:py-4 xl:py-5 inline-flex items-center justify-center\">\n                        <span>\u6700\u65b0\u6d3b\u52d5<\/span>\n                    <\/button>\n                    <button\n                        @click=\"setTab('publications')\"\n                        :class=\"activeTab === 'publications' ? 'active' : 'bg-white text-metalic-dark-02'\"\n                        class=\"pointer-events-none w-full xxs:w-auto rounded transition-all duration-300 hover:bg-secondary-green-04 hover:text-secondary-green-01 heading6 px-4 xs:px-6 xl:px-[30px] py-[10px] xs:py-4 xl:py-5 inline-flex items-center justify-center\">\n                        <span>\u520a\u7269<\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"container mx-auto\">\n        <div class=\"container-lg flex flex-col-reverse md:flex-col\">\n            <div class=\"mt-6 flex flex-wrap md:flex-nowrap justify-center md:justify-between items-center gap-6\">\n                <!-- News nav -->\n                <div x-show=\"activeTab === 'news'\" class=\"w-auto flex gap-3 xs:gap-5 items-center\">\n                    <div class=\"whats-swiper-button-prev-news cursor-pointer\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"18\" viewBox=\"0 0 10 18\" fill=\"none\">\n                            <path d=\"M8.7 1.19995L1.2 8.69995L8.7 16.2\" stroke=\"#24353B\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                        <\/svg>\n                    <\/div>\n                    <div class=\"whats-swiper-pagination-news\"><\/div>\n                    <div class=\"whats-swiper-button-next-news cursor-pointer\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                            <path d=\"M6.25 2.91663L13.75 10.4166L6.25 17.9166\" stroke=\"#24353B\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n\n                <!-- Events nav -->\n                <div x-show=\"activeTab === 'events'\" x-cloak class=\"w-auto flex gap-3 xs:gap-5 items-center\">\n                    <div class=\"whats-swiper-button-prev-events cursor-pointer\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"18\" viewBox=\"0 0 10 18\" fill=\"none\">\n                            <path d=\"M8.7 1.19995L1.2 8.69995L8.7 16.2\" stroke=\"#24353B\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                        <\/svg>\n                    <\/div>\n                    <div class=\"whats-swiper-pagination-events\"><\/div>\n                    <div class=\"whats-swiper-button-next-events cursor-pointer\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                            <path d=\"M6.25 2.91663L13.75 10.4166L6.25 17.9166\" stroke=\"#24353B\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n\n                <!-- Publications nav -->\n                <div x-show=\"activeTab === 'publications'\" x-cloak class=\"w-auto flex gap-3 xs:gap-5 items-center\">\n                    <div class=\"whats-swiper-button-prev-publications cursor-pointer\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"18\" viewBox=\"0 0 10 18\" fill=\"none\">\n                            <path d=\"M8.7 1.19995L1.2 8.69995L8.7 16.2\" stroke=\"#24353B\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                        <\/svg>\n                    <\/div>\n                    <div class=\"whats-swiper-pagination-publications\"><\/div>\n                    <div class=\"whats-swiper-button-next-publications cursor-pointer\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                            <path d=\"M6.25 2.91663L13.75 10.4166L6.25 17.9166\" stroke=\"#24353B\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n                <div class=\"w-full md:w-auto text-center md:text-right\">\n                    <div x-show=\"activeTab === 'news'\">\n                                                    <a href=\"https:\/\/hku-iamc.visibleone.dev\/tcn\/news-and-announcements\/\" target=\"\" class=\"group hidden md:inline-flex items-center justify-center gap-3 text-button text-secondary-green-01 transition-all duration-300 hover:text-primary-blue-01 learnmore-btn\">\n                                <div class=\"h-6 overflow-hidden\">    \n                                    <span class=\"h-6 flex justify-center items-center shrink-0 transition-all duration-300 translate-y-0 group-hover:-translate-y-6\">\u66f4\u591a<\/span>\n                                    <span class=\"h-6 flex justify-center items-center shrink-0 transition-all duration-300 translate-y-6 group-hover:-translate-y-6 group-hover:text-primary-blue-01\">\u66f4\u591a<\/span>\n                                <\/div>\n                                <img decoding=\"async\" class=\"transition-all duration-300\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/learn-more-icon.svg\" alt=\"\" \/>\n                            <\/a>\n                            <a href=\"https:\/\/hku-iamc.visibleone.dev\/tcn\/news-and-announcements\/\" target=\"\" class=\"group gap-[10px] h-[50px] relative underline-none text-button pl-[10px] pr-5 font-bold transition-all duration-300 bg-transparent text-primary-blue-01 border-2 border-primary-blue-01 hover:border-primary-blue-04 hover:bg-primary-blue-04 inline-flex md:hidden items-center overflow-hidden rounded-md btn-ghost\">\n                                <div class=\"w-6 h-6 inline-flex items-center justify-center rounded-sm bg-primary-blue-01 transition-all duration-300\">\n                                    <img decoding=\"async\" class=\"max-w-5 transition-all duration-300\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/button-arrow.svg\" alt=\"button arrow image\" \/>\n                                <\/div>\n                                <div class=\"h-[30px] overflow-hidden\">\n                                    <span class=\"h-[30px] shrink-0 flex justify-center items-center transition-all duration-300 translate-y-0 group-hover:-translate-y-[30px]\">\u66f4\u591a<\/span>\n                                    <span class=\"h-[30px] shrink-0 flex justify-center items-center transition-all duration-300 translate-y-[30px] group-hover:-translate-y-[30px] group-hover:text-primary-blue-01\">\u66f4\u591a<\/span>\n                                <\/div>\n                            <\/a>\n                    <\/div>\n                    <div x-show=\"activeTab === 'events'\">\n                                                    <a href=\"https:\/\/hku-iamc.visibleone.dev\/tcn\/events\/\" target=\"\" class=\"group hidden md:inline-flex items-center justify-center gap-3 text-button text-secondary-green-01 transition-all duration-300 hover:text-primary-blue-01 learnmore-btn\">\n                                <div class=\"h-6 overflow-hidden\">    \n                                    <span class=\"h-6 flex justify-center items-center shrink-0 transition-all duration-300 translate-y-0 group-hover:-translate-y-6\">\u66f4\u591a<\/span>\n                                    <span class=\"h-6 flex justify-center items-center shrink-0 transition-all duration-300 translate-y-6 group-hover:-translate-y-6 group-hover:text-primary-blue-01\">\u66f4\u591a<\/span>\n                                <\/div>\n                                <img decoding=\"async\" class=\"transition-all duration-300\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/learn-more-icon.svg\" alt=\"\" \/>\n                            <\/a>\n                            <a href=\"https:\/\/hku-iamc.visibleone.dev\/tcn\/events\/\" target=\"\" class=\"group gap-[10px] h-[50px] relative underline-none text-button pl-[10px] pr-5 font-bold transition-all duration-300 bg-transparent text-primary-blue-01 border-2 border-primary-blue-01 hover:border-primary-blue-04 hover:bg-primary-blue-04 inline-flex md:hidden items-center overflow-hidden rounded-md btn-ghost\">\n                                <div class=\"w-6 h-6 inline-flex items-center justify-center rounded-sm bg-primary-blue-01 transition-all duration-300\">\n                                    <img decoding=\"async\" class=\"max-w-5 transition-all duration-300\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/button-arrow.svg\" alt=\"button arrow image\" \/>\n                                <\/div>\n                                <div class=\"h-[30px] overflow-hidden\">\n                                    <span class=\"h-[30px] shrink-0 flex justify-center items-center transition-all duration-300 translate-y-0 group-hover:-translate-y-[30px]\">\u66f4\u591a<\/span>\n                                    <span class=\"h-[30px] shrink-0 flex justify-center items-center transition-all duration-300 translate-y-[30px] group-hover:-translate-y-[30px] group-hover:text-primary-blue-01\">\u66f4\u591a<\/span>\n                                <\/div>\n                            <\/a>\n                    <\/div>\n\n                    <div x-show=\"activeTab === 'publications'\">\n                                                    <a href=\"https:\/\/hku-iamc.visibleone.dev\/tcn\/publications\/\" target=\"\" class=\"group hidden md:inline-flex items-center justify-center gap-3 text-button text-secondary-green-01 transition-all duration-300 hover:text-primary-blue-01 learnmore-btn\">\n                                <div class=\"h-6 overflow-hidden\">    \n                                    <span class=\"h-6 flex justify-center items-center shrink-0 transition-all duration-300 translate-y-0 group-hover:-translate-y-6\">\u66f4\u591a<\/span>\n                                    <span class=\"h-6 flex justify-center items-center shrink-0 transition-all duration-300 translate-y-6 group-hover:-translate-y-6 group-hover:text-primary-blue-01\">\u66f4\u591a<\/span>\n                                <\/div>\n                                <img decoding=\"async\" class=\"transition-all duration-300\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/learn-more-icon.svg\" alt=\"\" \/>\n                            <\/a>\n                            <a href=\"https:\/\/hku-iamc.visibleone.dev\/tcn\/publications\/\" target=\"\" class=\"group gap-[10px] h-[50px] relative underline-none text-button pl-[10px] pr-5 font-bold transition-all duration-300 bg-transparent text-primary-blue-01 border-2 border-primary-blue-01 hover:border-primary-blue-04 hover:bg-primary-blue-04 inline-flex md:hidden items-center overflow-hidden rounded-md btn-ghost\">\n                                <div class=\"w-6 h-6 inline-flex items-center justify-center rounded-sm bg-primary-blue-01 transition-all duration-300\">\n                                    <img decoding=\"async\" class=\"max-w-5 transition-all duration-300\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/button-arrow.svg\" alt=\"button arrow image\" \/>\n                                <\/div>\n                                <div class=\"h-[30px] overflow-hidden\">\n                                    <span class=\"h-[30px] shrink-0 flex justify-center items-center transition-all duration-300 translate-y-0 group-hover:-translate-y-[30px]\">\u66f4\u591a<\/span>\n                                    <span class=\"h-[30px] shrink-0 flex justify-center items-center transition-all duration-300 translate-y-[30px] group-hover:-translate-y-[30px] group-hover:text-primary-blue-01\">\u66f4\u591a<\/span>\n                                <\/div>\n                            <\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"md:mt-6 xs:mt-8\">\n                <!-- News -->\n                <div x-show=\"activeTab === 'news'\">\n                    <div x-show=\"activeTab === 'news'\" class=\"swiper whats-happenings-swiper\" data-swiper-key=\"news\">\n                        <div class=\"swiper-wrapper\">\n                                                                                                <div class=\"swiper-slide\">    <a href=\"https:\/\/hku-iamc.visibleone.dev\/tcn\/new\/hku-miclab-hosts-international-conference-on-modular-integrated-construction\/\" class=\"group flex flex-col gap-4\">\n        <div class=\"overflow-hidden flex relative\">\n            <img decoding=\"async\" class=\"w-full object-cover aspect-[1\/0.58] transition-all duration-500 group-hover:scale-[1.1]\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/MiC-Conf-Photo-1_Group-photo-scaled.jpg\" alt=\"\u6e2f\u5927\u6a21\u584a\u7d44\u5408\u5efa\u9020\u5be6\u9a57\u5ba4\u8209\u8fa6\u300c\u7d44\u88dd\u5408\u6210\u300d\u6a21\u584a\u5efa\u9020\u570b\u969b\u6703\u8b70\" \/>\n        <\/div>\n        <div>\n            <p class=\"mb-1 text-eyebrow uppercase text-primary-blue-01\">\n                \u65b0\u805e            <\/p>\n            <h6 class=\"heading6 text-metalic-dark-01 line-clamp-3 text-ellipsis\">\n                \u6e2f\u5927\u6a21\u584a\u7d44\u5408\u5efa\u9020\u5be6\u9a57\u5ba4\u8209\u8fa6\u300c\u7d44\u88dd\u5408\u6210\u300d\u6a21\u584a\u5efa\u9020\u570b\u969b\u6703\u8b70            <\/h6>\n            <p class=\"mt-[10px] text-eyebrow text-primary-blue-01\">\n                2025\u5e746\u670826\u65e5            <\/p>\n        <\/div>\n    <\/a>\n<\/div>\n                                                                                    <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Events -->\n                <div x-show=\"activeTab === 'events'\" x-cloak>\n                    <div class=\"swiper whats-happenings-swiper\" data-swiper-key=\"events\">\n                        <div class=\"swiper-wrapper\">\n                                                                                                <div class=\"swiper-slide\">    <a href=\"https:\/\/hku-iamc.visibleone.dev\/tcn\/event\/international-conference-on-modular-construction-2026\/\" class=\"group flex flex-col gap-4\">\n        <div class=\"overflow-hidden flex relative\">\n            <img decoding=\"async\" class=\"w-full object-cover aspect-[1\/0.58] transition-all duration-500 group-hover:scale-[1.1]\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/FLyer.jpg\" alt=\"director image\" \/>\n        <\/div>\n        <div>\n            <p class=\"mb-1 text-eyebrow uppercase text-primary-blue-01\">\n                \u6703\u8b70            <\/p>\n            <h6 class=\"heading6 text-metalic-dark-01 line-clamp-3 text-ellipsis\">\n                2026\u5e74\u6a21\u7d44\u5316\u5efa\u9020\u570b\u969b\u6703\u8b70            <\/h6>\n            <p class=\"mt-[10px] flex gap-[10px] text-body-sm text-metalic-dark-02\">\n                <img decoding=\"async\" class=\"max-w-5 2xl:max-w-6 max-h-5 2xl:max-h-6\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/calendar-icon.svg\" alt=\"\" \/>\n                <span>2026\u5e7411\u670821\u65e5<\/span>\n            <\/p>\n            <p class=\"mt-[10px] flex gap-[10px] text-body-sm text-metalic-dark-02\">\n                <img decoding=\"async\" class=\"max-w-5 2xl:max-w-6 max-h-5 2xl:max-h-6\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/location-icon.svg\" alt=\"\" \/>\n                <span>\u9999\u6e2f\u6703\u8b70\u5c55\u89bd\u4e2d\u5fc3<\/span>\n            <\/p>\n        <\/div>\n    <\/a>\n<\/div>\n                                                                    <div class=\"swiper-slide\">    <a href=\"https:\/\/hku-iamc.visibleone.dev\/tcn\/event\/hku-miclab-hosts-international-conference-on-modular-integrated-construction\/\" class=\"group flex flex-col gap-4\">\n        <div class=\"overflow-hidden flex relative\">\n            <img decoding=\"async\" class=\"w-full object-cover aspect-[1\/0.58] transition-all duration-500 group-hover:scale-[1.1]\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/MiC-Conf-Photo-1_Group-photo-scaled.jpg\" alt=\"director image\" \/>\n        <\/div>\n        <div>\n            <p class=\"mb-1 text-eyebrow uppercase text-primary-blue-01\">\n                \u6703\u8b70            <\/p>\n            <h6 class=\"heading6 text-metalic-dark-01 line-clamp-3 text-ellipsis\">\n                \u6e2f\u5927\u6a21\u584a\u7d44\u5408\u5efa\u9020\u5be6\u9a57\u5ba4\u8209\u8fa6\u300c\u7d44\u88dd\u5408\u6210\u300d\u6a21\u584a\u5efa\u9020\u570b\u969b\u6703\u8b70            <\/h6>\n            <p class=\"mt-[10px] flex gap-[10px] text-body-sm text-metalic-dark-02\">\n                <img decoding=\"async\" class=\"max-w-5 2xl:max-w-6 max-h-5 2xl:max-h-6\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/calendar-icon.svg\" alt=\"\" \/>\n                <span>2025\u5e746\u670826\u65e5<\/span>\n            <\/p>\n            <p class=\"mt-[10px] flex gap-[10px] text-body-sm text-metalic-dark-02\">\n                <img decoding=\"async\" class=\"max-w-5 2xl:max-w-6 max-h-5 2xl:max-h-6\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/location-icon.svg\" alt=\"\" \/>\n                <span>\u9ec3\u9e97\u677e\u8b1b\u5802<\/span>\n            <\/p>\n        <\/div>\n    <\/a>\n<\/div>\n                                                                                    <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Publications -->\n                <div x-show=\"activeTab === 'publications'\" x-cloak>\n                    <div class=\"swiper whats-happenings-swiper\" data-swiper-key=\"publications\">\n                        <div class=\"swiper-wrapper\">\n                                                                                                <div class=\"swiper-slide\">    <a href=\"https:\/\/google.com\" target=\"_blank\" class=\"group flex flex-col gap-4\" rel=\"noopener\">\n        <div class=\"overflow-hidden flex relative\">\n            <img decoding=\"async\" class=\"w-full object-cover aspect-[1\/0.58] transition-all duration-500 group-hover:scale-[1.1]\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/MiConnection.png\" alt=\"project image\" \/>\n        <\/div>\n        <div class=\"overflow-hidden\">\n            <p class=\"mb-1 text-eyebrow uppercase text-primary-blue-01\">MiC\u667a\u6167\u904b\u8f38<\/p>\n            <h6 class=\"heading6 text-metalic-dark-01 line-clamp-3 text-ellipsis\">\n                \u9ad8\u5c64MiC\u5efa\u7bc9\u65b0\u578b\u9023\u7d50\u7cfb\u7d71\u8207\u8a2d\u8a08\u65b9\u6cd5            <\/h6>\n            <p class=\"mt-2 text-eyebrow text-primary-blue-01\">\n                2025\u5e746\u670826\u65e5            <\/p>\n        <\/div>\n\n    <\/a>\n<\/div>\n                                                                                    <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n<\/div>\n\n<script>\n    (function() {\n        document.addEventListener('alpine:init', function() {\n            Alpine.data('whatsHappenings', () => ({\n                activeTab: 'news',\n                swipers: {},\n\n                init() {\n                    this.$nextTick(() => {\n                        const configs = [{\n                                key: 'news',\n                                prev: '.whats-swiper-button-prev-news',\n                                next: '.whats-swiper-button-next-news',\n                                pagination: '.whats-swiper-pagination-news'\n                            },\n                            {\n                                key: 'events',\n                                prev: '.whats-swiper-button-prev-events',\n                                next: '.whats-swiper-button-next-events',\n                                pagination: '.whats-swiper-pagination-events'\n                            },\n                            {\n                                key: 'publications',\n                                prev: '.whats-swiper-button-prev-publications',\n                                next: '.whats-swiper-button-next-publications',\n                                pagination: '.whats-swiper-pagination-publications'\n                            },\n                        ];\n\n                        configs.forEach(({\n                            key,\n                            prev,\n                            next,\n                            pagination\n                        }) => {\n                            const el = this.$el.querySelector(`.whats-happenings-swiper[data-swiper-key=\"${key}\"]`);\n                            if (!el) return;\n\n                            this.swipers[key] = new Swiper(el, {\n                                slidesPerView: 1,\n                                spaceBetween: 20,\n                                navigation: {\n                                    nextEl: this.$el.querySelector(next),\n                                    prevEl: this.$el.querySelector(prev),\n                                },\n                                pagination: {\n                                    el: this.$el.querySelector(pagination),\n                                    clickable: true,\n                                    type: 'fraction',\n                                },\n                                effect: 'slide',\n                                speed: 1000,\n                                loop: false,\n                                breakpoints: {\n                                    768: {\n                                        slidesPerView: 2,\n                                        spaceBetween: 30\n                                    },\n                                    1280: {\n                                        slidesPerView: 3,\n                                        spaceBetween: 30\n                                    },\n                                    1440: {\n                                        slidesPerView: 3,\n                                        spaceBetween: 40\n                                    },\n                                }\n                            });\n                        });\n                    });\n                },\n\n                setTab(tab) {\n                    this.activeTab = tab;\n                    this.$nextTick(() => {\n                        if (this.swipers[tab]) {\n                            this.swipers[tab].update();\n                        }\n                    });\n                }\n            }));\n        });\n    })();\n<\/script>\n\n\n<div block-name=\"home-about-us\" class=\"relative py-10 xs:py-[60px] xl:py-20 bg-metalic-grey-03 home-about-us\">\n    <div class=\"container mx-auto\">\n        <div class=\"container-lg\">\n            <div class=\"flex items-center flex-wrap lg:flex-nowrap gap-6 xs:gap-8 sm:gap-10 3xl:gap-[50px] 5xl:gap-[60px]\">\n                <div class=\"w-full lg:w-[50%] xl:w-[48%]\">\n                    <h2 class=\"heading2 text-primary-blue-01\">\n                        \u95dc\u65bcIAMC                    <\/h2>\n                    <div class=\"mt-6 xs:mt-8 sm:mt-10 text-body-lg text-metalic-dark-02\">\n                        <p>\u6a21\u584a\u5efa\u9020\u570b\u969b\u5b78\u6703\uff08IAMC\uff09\u65bc2025\u5e746\u6708\u5728\u9999\u6e2f\u5927\u5b78\u6210\u7acb\uff0c\u662f\u4e00\u500b\u81f4\u529b\u65bc\u63a8\u52d5\u6a21\u584a\u5316\u5efa\u9020\u9818\u57df\u767c\u5c55\u7684\u5168\u7403\u6027\u975e\u71df\u5229\u7d44\u7e54\u3002IAMC\u8463\u4e8b\u6703\u7531\u5168\u7403\u6a21\u584a\u5316\u5efa\u9020\u7814\u767c\u9818\u57df\u7684\u9802\u5c16\u5b78\u8005\u8207\u696d\u754c\u5c08\u5bb6\u7d44\u6210\u3002<br><br><\/p>\n<p>IAMC\u81f4\u529b\u65bc\u900f\u904e\u4e0d\u65b7\u62d3\u5c55\u6a21\u584a\u5316\u5efa\u9020\u7684\u77e5\u8b58\u908a\u754c\uff0c\u6253\u9020\u667a\u6167\u3001\u53ef\u6301\u7e8c\u4e14\u5177\u6709\u97cc\u6027\u7684\u5efa\u7bc9\u74b0\u5883\u3002<\/p>\n                    <\/div>\n                                        <div class=\"mt-6 xs:mt-8 sm:mt-10\">\n                        <a href=\"https:\/\/hku-iamc.visibleone.dev\/tcn\/about-iamc\/\" target=\"_self\" class=\"group gap-[10px] h-[50px] relative underline-none text-button pl-[10px] pr-5 font-bold transition-all duration-300 bg-transparent text-primary-blue-01 border-2 border-primary-blue-01 hover:border-primary-blue-04 hover:bg-primary-blue-04 inline-flex items-center overflow-hidden rounded-md btn-ghost\">\n                            <div class=\"w-6 h-6 inline-flex items-center justify-center rounded-sm bg-primary-blue-01 transition-all duration-300\">\n                                <img decoding=\"async\" class=\"max-w-5 transition-all duration-300\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/button-arrow.svg\" alt=\"button arrow image\" \/>\n                            <\/div>\n                            <div class=\"h-[30px] overflow-hidden\">\n                                <span class=\"h-[30px] shrink-0 flex justify-center items-center transition-all duration-300 translate-y-0 group-hover:-translate-y-[30px]\">\u66f4\u591a<\/span>\n                                <span class=\"h-[30px] shrink-0 flex justify-center items-center transition-all duration-300 translate-y-[30px] group-hover:-translate-y-[30px] group-hover:text-primary-blue-01\">\u66f4\u591a<\/span>\n                            <\/div>\n                        <\/a>\n                    <\/div>\n                                    <\/div>\n                <div class=\"w-full lg:w-[50%] xl:w-[52%] shrink-0\">\n                                        <img decoding=\"async\" class=\"rounded-tl-[60px] xs:rounded-tl-[80px] xl:rounded-tl-[100px] w-full object-cover\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/Image-3.png\" alt=\"\" \/>\n                                    <\/div>\n            <\/div>\n        <\/div>\n    <\/div>  \n<\/div>\n\n\n\n<div block-name=\"home-services-area\" class=\"relative py-10 xs:py-[60px] xl:py-20 bg-primary-blue-03 home-services-area\">\n    \n    <div class=\"container mx-auto\">\n        <div class=\"container-lg\">\n            <h2 class=\"heading2 text-primary-blue-01 text-center\">\n                \u7814\u767c\u9818\u57df            <\/h2>           \n        <\/div>\n    <\/div>\n\n        <div class=\"mt-8 sm:mt-10 flex flex-wrap lg:flex-nowrap\">\n                            <div class=\"h-[340px] sm:h-[400px] lg:h-[600px] group w-full sm:w-[50%] lg:w-[16.66%] text-white relative transition-all duration-500 lg:hover:w-[90%] overflow-hidden flex flex-col justify-end card-item\">\n                <img decoding=\"async\" class=\"absolute top-0 left-0 w-full h-full object-cover transition-all duration-500 group-hover:scale-[1.1]\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/MiConnection.png\" alt=\"\" \/>\n                <span class=\"absolute top-0 left-0 w-full h-full transition-all duration-300 bg-overlay\"><\/span>\n                <div class=\"flex flex-col transition-all duration-700 group-hover:h-full h-auto justify-end relative gallery-grid-inner-item\">\n                    <div class=\"relative z-[1] p-5 sm:p-8 3xl:p-10\">\n                        <div class=\"flex flex-col justify-end transition-all duration-700 group-hover:translate-y-0 translate-y-[80px]\">\n                            <h4 class=\"sm:line-clamp-2 overflow-hidden overflow-ellipsis break-words heading4 transition-all duration-700 title\">\n                                MiC\u7bc0\u9ede\u5275\u65b0                            <\/h4>\n                            <span class=\"block mt-[6px] xs:mt-3 bg-primary-blue-03 h-[6px] xl:h-[8px] w-[48px] transition-all duration-500\"><\/span>\n                        <\/div>\n                        <div class=\"group-hover:h-auto h-0 transition-all group-hover:translate-y-0 translate-y-[100%] duration-700 overflow-hidden group-hover:mt-4 sm:group-hover:mt-5 mt-[80px] heading6 description\">\n                            \u9069\u7528\u65bc\u9ad8\u5c64MiC\u7684\u65b0\u578b\u7bc0\u9ede\u9ad4\u7cfb\u8207\u8a2d\u8a08\u65b9\u6cd5                        <\/div>\n                    <\/div>                \n                <\/div>\n                <span class=\"z-[2] absolute top-0 left-0 w-full h-full transition-all duration-300 bg-overlay2\"><\/span>\n            <\/div>\n                                    <div class=\"h-[340px] sm:h-[400px] lg:h-[600px] group w-full sm:w-[50%] lg:w-[16.66%] text-white relative transition-all duration-500 lg:hover:w-[90%] overflow-hidden flex flex-col justify-end card-item\">\n                <img decoding=\"async\" class=\"absolute top-0 left-0 w-full h-full object-cover transition-all duration-500 group-hover:scale-[1.1]\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/MiCheck.png\" alt=\"\" \/>\n                <span class=\"absolute top-0 left-0 w-full h-full transition-all duration-300 bg-overlay\"><\/span>\n                <div class=\"flex flex-col transition-all duration-700 group-hover:h-full h-auto justify-end relative gallery-grid-inner-item\">\n                    <div class=\"relative z-[1] p-5 sm:p-8 3xl:p-10\">\n                        <div class=\"flex flex-col justify-end transition-all duration-700 group-hover:translate-y-0 translate-y-[80px]\">\n                            <h4 class=\"sm:line-clamp-2 overflow-hidden overflow-ellipsis break-words heading4 transition-all duration-700 title\">\n                                MiC\u667a\u80fd\u8cea\u6aa2                            <\/h4>\n                            <span class=\"block mt-[6px] xs:mt-3 bg-primary-blue-03 h-[6px] xl:h-[8px] w-[48px] transition-all duration-500\"><\/span>\n                        <\/div>\n                        <div class=\"group-hover:h-auto h-0 transition-all group-hover:translate-y-0 translate-y-[100%] duration-700 overflow-hidden group-hover:mt-4 sm:group-hover:mt-5 mt-[80px] heading6 description\">\n                            \u61c9\u7528\u65bc\u667a\u80fd\u5316\u6a21\u584a\u751f\u7522\u7684\u8cea\u6aa2\u6a5f\u68b0\u4eba                        <\/div>\n                    <\/div>                \n                <\/div>\n                <span class=\"z-[2] absolute top-0 left-0 w-full h-full transition-all duration-300 bg-overlay2\"><\/span>\n            <\/div>\n                                    <div class=\"h-[340px] sm:h-[400px] lg:h-[600px] group w-full sm:w-[50%] lg:w-[16.66%] text-white relative transition-all duration-500 lg:hover:w-[90%] overflow-hidden flex flex-col justify-end card-item\">\n                <img decoding=\"async\" class=\"absolute top-0 left-0 w-full h-full object-cover transition-all duration-500 group-hover:scale-[1.1]\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/MiCarry.png\" alt=\"\" \/>\n                <span class=\"absolute top-0 left-0 w-full h-full transition-all duration-300 bg-overlay\"><\/span>\n                <div class=\"flex flex-col transition-all duration-700 group-hover:h-full h-auto justify-end relative gallery-grid-inner-item\">\n                    <div class=\"relative z-[1] p-5 sm:p-8 3xl:p-10\">\n                        <div class=\"flex flex-col justify-end transition-all duration-700 group-hover:translate-y-0 translate-y-[80px]\">\n                            <h4 class=\"sm:line-clamp-2 overflow-hidden overflow-ellipsis break-words heading4 transition-all duration-700 title\">\n                                MiC\u667a\u6167\u904b\u8f38                            <\/h4>\n                            <span class=\"block mt-[6px] xs:mt-3 bg-primary-blue-03 h-[6px] xl:h-[8px] w-[48px] transition-all duration-500\"><\/span>\n                        <\/div>\n                        <div class=\"group-hover:h-auto h-0 transition-all group-hover:translate-y-0 translate-y-[100%] duration-700 overflow-hidden group-hover:mt-4 sm:group-hover:mt-5 mt-[80px] heading6 description\">\n                            \u8d85\u5927\u578b\u6a21\u584a\u904b\u8f38\u898f\u5283\u8207\u76e3\u63a7                        <\/div>\n                    <\/div>                \n                <\/div>\n                <span class=\"z-[2] absolute top-0 left-0 w-full h-full transition-all duration-300 bg-overlay2\"><\/span>\n            <\/div>\n                                    <div class=\"h-[340px] sm:h-[400px] lg:h-[600px] group w-full sm:w-[50%] lg:w-[16.66%] text-white relative transition-all duration-500 lg:hover:w-[90%] overflow-hidden flex flex-col justify-end card-item\">\n                <img decoding=\"async\" class=\"absolute top-0 left-0 w-full h-full object-cover transition-all duration-500 group-hover:scale-[1.1]\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/MiCrane.png\" alt=\"\" \/>\n                <span class=\"absolute top-0 left-0 w-full h-full transition-all duration-300 bg-overlay\"><\/span>\n                <div class=\"flex flex-col transition-all duration-700 group-hover:h-full h-auto justify-end relative gallery-grid-inner-item\">\n                    <div class=\"relative z-[1] p-5 sm:p-8 3xl:p-10\">\n                        <div class=\"flex flex-col justify-end transition-all duration-700 group-hover:translate-y-0 translate-y-[80px]\">\n                            <h4 class=\"sm:line-clamp-2 overflow-hidden overflow-ellipsis break-words heading4 transition-all duration-700 title\">\n                                MiC\u667a\u80fd\u540a\u88dd                            <\/h4>\n                            <span class=\"block mt-[6px] xs:mt-3 bg-primary-blue-03 h-[6px] xl:h-[8px] w-[48px] transition-all duration-500\"><\/span>\n                        <\/div>\n                        <div class=\"group-hover:h-auto h-0 transition-all group-hover:translate-y-0 translate-y-[100%] duration-700 overflow-hidden group-hover:mt-4 sm:group-hover:mt-5 mt-[80px] heading6 description\">\n                            \u57fa\u65bcAIoT\u7684\u6a21\u584a\u540a\u88dd\u904e\u7a0b\u5be6\u6642\u6578\u5b57\u5b7f\u751f                        <\/div>\n                    <\/div>                \n                <\/div>\n                <span class=\"z-[2] absolute top-0 left-0 w-full h-full transition-all duration-300 bg-overlay2\"><\/span>\n            <\/div>\n                                    <div class=\"h-[340px] sm:h-[400px] lg:h-[600px] group w-full sm:w-[50%] lg:w-[16.66%] text-white relative transition-all duration-500 lg:hover:w-[90%] overflow-hidden flex flex-col justify-end card-item\">\n                <img decoding=\"async\" class=\"absolute top-0 left-0 w-full h-full object-cover transition-all duration-500 group-hover:scale-[1.1]\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/MiCarbon.png\" alt=\"\" \/>\n                <span class=\"absolute top-0 left-0 w-full h-full transition-all duration-300 bg-overlay\"><\/span>\n                <div class=\"flex flex-col transition-all duration-700 group-hover:h-full h-auto justify-end relative gallery-grid-inner-item\">\n                    <div class=\"relative z-[1] p-5 sm:p-8 3xl:p-10\">\n                        <div class=\"flex flex-col justify-end transition-all duration-700 group-hover:translate-y-0 translate-y-[80px]\">\n                            <h4 class=\"sm:line-clamp-2 overflow-hidden overflow-ellipsis break-words heading4 transition-all duration-700 title\">\n                                MiC\u78b3\u6392\u8ffd\u8e64                            <\/h4>\n                            <span class=\"block mt-[6px] xs:mt-3 bg-primary-blue-03 h-[6px] xl:h-[8px] w-[48px] transition-all duration-500\"><\/span>\n                        <\/div>\n                        <div class=\"group-hover:h-auto h-0 transition-all group-hover:translate-y-0 translate-y-[100%] duration-700 overflow-hidden group-hover:mt-4 sm:group-hover:mt-5 mt-[80px] heading6 description\">\n                            \u57fa\u65bcBIM\u548cIoT\u6280\u8853\u7684\u5168\u751f\u547d\u9031\u671f\u78b3\u6392\u653e\u76e3\u63a7                        <\/div>\n                    <\/div>                \n                <\/div>\n                <span class=\"z-[2] absolute top-0 left-0 w-full h-full transition-all duration-300 bg-overlay2\"><\/span>\n            <\/div>\n                                    <div class=\"h-[340px] sm:h-[400px] lg:h-[600px] group w-full sm:w-[50%] lg:w-[16.66%] text-white relative transition-all duration-500 lg:hover:w-[90%] overflow-hidden flex flex-col justify-end card-item\">\n                <img decoding=\"async\" class=\"absolute top-0 left-0 w-full h-full object-cover transition-all duration-500 group-hover:scale-[1.1]\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/MiChain.png\" alt=\"\" \/>\n                <span class=\"absolute top-0 left-0 w-full h-full transition-all duration-300 bg-overlay\"><\/span>\n                <div class=\"flex flex-col transition-all duration-700 group-hover:h-full h-auto justify-end relative gallery-grid-inner-item\">\n                    <div class=\"relative z-[1] p-5 sm:p-8 3xl:p-10\">\n                        <div class=\"flex flex-col justify-end transition-all duration-700 group-hover:translate-y-0 translate-y-[80px]\">\n                            <h4 class=\"sm:line-clamp-2 overflow-hidden overflow-ellipsis break-words heading4 transition-all duration-700 title\">\n                                MiC\u4f9b\u61c9\u93c8\u7ba1\u7406                            <\/h4>\n                            <span class=\"block mt-[6px] xs:mt-3 bg-primary-blue-03 h-[6px] xl:h-[8px] w-[48px] transition-all duration-500\"><\/span>\n                        <\/div>\n                        <div class=\"group-hover:h-auto h-0 transition-all group-hover:translate-y-0 translate-y-[100%] duration-700 overflow-hidden group-hover:mt-4 sm:group-hover:mt-5 mt-[80px] heading6 description\">\n                            \u57fa\u65bcBIM-GIS\u53ca\u77e5\u8b58\u5716\u8b5c\u7684\u4f9b\u61c9\u93c8\u7ba1\u7406                        <\/div>\n                    <\/div>                \n                <\/div>\n                <span class=\"z-[2] absolute top-0 left-0 w-full h-full transition-all duration-300 bg-overlay2\"><\/span>\n            <\/div>\n                                \n    <\/div>\n            <div class=\"mt-6 xs:mt-8 sm:mt-10 text-center\">\n        <a href=\"https:\/\/hku-iamc.visibleone.dev\/tcn\/about-iamc\/\" target=\"_self\" class=\"group gap-[10px] h-[50px] relative underline-none text-button pl-[10px] pr-5 font-bold transition-all duration-300 bg-transparent text-primary-blue-01 border-2 border-primary-blue-01 hover:border-primary-blue-04 hover:bg-primary-blue-04 inline-flex items-center overflow-hidden rounded-md btn-ghost\">\n            <div class=\"w-6 h-6 inline-flex items-center justify-center rounded-sm bg-primary-blue-01 transition-all duration-300\">\n                <img decoding=\"async\" class=\"max-w-5 transition-all duration-300\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/button-arrow.svg\" alt=\"button arrow image\" \/>\n            <\/div>\n            <div class=\"h-[30px] overflow-hidden\">\n                <span class=\"h-[30px] shrink-0 flex justify-center items-center transition-all duration-300 translate-y-0 group-hover:-translate-y-[30px]\">\u66f4\u591a<\/span>\n                <span class=\"h-[30px] shrink-0 flex justify-center items-center transition-all duration-300 translate-y-[30px] group-hover:-translate-y-[30px] group-hover:text-primary-blue-01\">\u66f4\u591a<\/span>\n            <\/div>\n        <\/a>\n    <\/div>\n    \n<\/div>\n\n\n<div block-name=\"collaboration-partners\" class=\"relative py-10 xs:py-[60px] xl:py-20 collaboration-partners\">\n    \n    <div class=\"container mx-auto\">\n        <div class=\"container-lg\">\n            <h2 class=\"heading2 text-primary-blue-01 text-center\">\n                \u5408\u4f5c\u5e73\u81fa            <\/h2>\n            <div class=\"mt-6 xs:mt-8 sm:mt-10\">\n                                <div class=\"swiper relative lg:!static collaborationPartnerSwiper\">\n                    <div class=\"swiper-wrapper\">\n                                                            <div class=\"swiper-slide\">\n                                        <a href=\"https:\/\/www.civil.hku.hk\/cicid\/\" target=\"_blank\" class=\"w-full bg-white inline-flex items-center justify-center p-[10px]\" rel=\"noopener\">\n                                            <img decoding=\"async\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/CICID.png\"\n                                                alt=\"\" \/>\n                                        <\/a>\n                                    <\/div>\n                                                                        <div class=\"swiper-slide\">\n                                        <a href=\"https:\/\/www.miclab.hk\/\" target=\"_blank\" class=\"w-full bg-white inline-flex items-center justify-center p-[10px]\" rel=\"noopener\">\n                                            <img decoding=\"async\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/MiC.png\"\n                                                alt=\"\" \/>\n                                        <\/a>\n                                    <\/div>\n                                                                        <div class=\"swiper-slide\">\n                                        <a href=\"https:\/\/www.netzero.hk\/\" target=\"_blank\" class=\"w-full bg-white inline-flex items-center justify-center p-[10px]\" rel=\"noopener\">\n                                            <img decoding=\"async\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/NetZero.png\"\n                                                alt=\"\" \/>\n                                        <\/a>\n                                    <\/div>\n                                                                        <div class=\"swiper-slide\">\n                                        <a href=\"https:\/\/cife.stanford.edu\/\" target=\"_blank\" class=\"w-full bg-white inline-flex items-center justify-center p-[10px]\" rel=\"noopener\">\n                                            <img decoding=\"async\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/Standford-CIFE.png\"\n                                                alt=\"\" \/>\n                                        <\/a>\n                                    <\/div>\n                                                                        <div class=\"swiper-slide\">\n                                        <a href=\"https:\/\/www.arc.ed.tum.de\/en\/arc\/home\/\" target=\"\" class=\"w-full bg-white inline-flex items-center justify-center p-[10px]\" rel=\"noopener\">\n                                            <img decoding=\"async\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/university-munich.png\"\n                                                alt=\"\" \/>\n                                        <\/a>\n                                    <\/div>\n                                                                        <div class=\"swiper-slide\">\n                                        <a href=\"https:\/\/www.ualberta.ca\/en\/engineering\/civil-environmental-engineering\/index.html\" target=\"\" class=\"w-full bg-white inline-flex items-center justify-center p-[10px]\" rel=\"noopener\">\n                                            <img decoding=\"async\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/uni-alberta.png\"\n                                                alt=\"\" \/>\n                                        <\/a>\n                                    <\/div>\n                                                                        <div class=\"swiper-slide\">\n                                        <a href=\"https:\/\/www.lboro.ac.uk\/schools\/abce\/\" target=\"\" class=\"w-full bg-white inline-flex items-center justify-center p-[10px]\" rel=\"noopener\">\n                                            <img decoding=\"async\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/uni-loughborough.png\"\n                                                alt=\"\" \/>\n                                        <\/a>\n                                    <\/div>\n                                                                        <div class=\"swiper-slide\">\n                                        <a href=\"https:\/\/cde.nus.edu.sg\/cee\/\" target=\"\" class=\"w-full bg-white inline-flex items-center justify-center p-[10px]\" rel=\"noopener\">\n                                            <img decoding=\"async\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/NUS.png\"\n                                                alt=\"\" \/>\n                                        <\/a>\n                                    <\/div>\n                                                                        <div class=\"swiper-slide\">\n                                        <a href=\"https:\/\/www.prefabaus.org.au\/\" target=\"\" class=\"w-full bg-white inline-flex items-center justify-center p-[10px]\" rel=\"noopener\">\n                                            <img decoding=\"async\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/prefabAUS.png\"\n                                                alt=\"\" \/>\n                                        <\/a>\n                                    <\/div>\n                                                        <\/div>\n                    <div class=\"swiper-button-prev\"><\/div>\n                    <div class=\"swiper-button-next\"><\/div>\n                    <div class=\"swiper-pagination !relative !bottom-0 mt-[60px] lg:mt-10\"><\/div>\n                <\/div>\n                            <\/div>\n                        <div class=\"mt-6 xs:mt-8 sm:mt-10 text-center\">\n                <a href=\"https:\/\/hku-iamc.visibleone.dev\/tcn\/collaboration-hub\/\" target=\"_self\" class=\"group gap-[10px] h-[50px] relative underline-none text-button pl-[10px] pr-5 font-bold transition-all duration-300 bg-transparent text-primary-blue-01 border-2 border-primary-blue-01 hover:border-primary-blue-04 hover:bg-primary-blue-04 inline-flex items-center overflow-hidden rounded-md btn-ghost\">\n                    <div class=\"w-6 h-6 inline-flex items-center justify-center rounded-sm bg-primary-blue-01 transition-all duration-300\">\n                        <img decoding=\"async\" class=\"max-w-5 transition-all duration-300\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/button-arrow.svg\" alt=\"button arrow image\" \/>\n                    <\/div>\n                    <div class=\"h-[30px] overflow-hidden\">\n                        <span class=\"h-[30px] shrink-0 flex justify-center items-center transition-all duration-300 translate-y-0 group-hover:-translate-y-[30px]\">\u66f4\u591a<\/span>\n                        <span class=\"h-[30px] shrink-0 flex justify-center items-center transition-all duration-300 translate-y-[30px] group-hover:-translate-y-[30px] group-hover:text-primary-blue-01\">\u66f4\u591a<\/span>\n                    <\/div>\n                <\/a>\n            <\/div>\n                    <\/div>\n    <\/div>\n\n<\/div>\n\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function () {\n        const collaborationPartnerSwiper = new Swiper('.collaborationPartnerSwiper', {\n            speed: 1500,\n            direction: 'horizontal',\n            autoplay: {\n                delay: 3000,\n                disableOnInteraction: false\n            },\n            \/\/ allowTouchMove: false,\n            navigation: {\n                nextEl: '.collaborationPartnerSwiper .swiper-button-next',\n                prevEl: '.collaborationPartnerSwiper .swiper-button-prev',\n            },\n            pagination: {\n                el: '.collaborationPartnerSwiper .swiper-pagination',\n                clickable: true,\n            },\n            loop: true,\n            slidesPerView: 2,\n            spaceBetween: 20,\n            freeMode: true,\n            breakpoints: {\n                768: {\n                    slidesPerView: 3,\n                    spaceBetween: 20\n                },\n                1280: {\n                    slidesPerView: 4,\n                    spaceBetween: 20\n                },\n                1680: {\n                    slidesPerView: 4,\n                    spaceBetween: 40\n                },\n            },\n            \/\/ on: {\n            \/\/     navigationNext() {\n            \/\/         this.autoplay.stop();\n            \/\/     },\n            \/\/     navigationPrev() {\n            \/\/         this.autoplay.stop();\n            \/\/     }\n            \/\/ }\n        });\n\n    })\n<\/script>\n\n\n\n<div block-name=\"spotlight-videos\" class=\"relative py-10 xs:py-[60px] xl:py-20 bg-metalic-grey-03 spotlight-videos\">\n    <img decoding=\"async\" class=\"absolute bottom-0 left-0 w-full h-[85%] object-cover\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/spotlight-bg.png\" alt=\"\" \/>\n    <div class=\"relative container mx-auto\">\n        <div class=\"container-lg\">\n            <h2 class=\"heading2 text-primary-blue-01 text-center\">\n                \u8996\u983b            <\/h2>\n            <div class=\"mt-6 xs:mt-8 sm:mt-10\">\n                                <div class=\"swiper relative lg:!static spotlightVideosSwiper\">\n                    <div class=\"swiper-wrapper\">\n                                                <div class=\"swiper-slide\">\n                            <a href=\"#\" class=\"w-full block group\">\n                                                                    <div class=\"aspect-video cursor-pointer video-wrapper relative\">\n                                        <video loading=\"lazy\" class=\"w-full h-full eleVideo\" width=\"100%\" controls=\"\">\n                                            <source src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/3min-Highlight-Video_2025-MiC-Conference_HKUMiCLab-1-1-1.mp4\" type=\"video\/mp4\">\n                                            Your browser does not support the video tag.\n                                        <\/video>\n                                        <div class=\"video-poster absolute top-0 left-0 w-full h-full overflow-hidden\" aria-disabled=\"false\">\n                                            <img decoding=\"async\" class=\"w-full object-cover transition-all duration-500 group-hover:scale-[1.1]\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/photo.png\" alt=\"\" \/>\n                                            <span class=\"block absolute w-full left-0 top-0 h-full bg-overlay\"><\/span>\n                                        <\/div>                                    \n                                        <button class=\"play-button z-[1] absolute top-1\/2 left-1\/2 -translate-y-1\/2 -translate-x-1\/2 cursor-pointer w-10 xs:w-[50px] xl:w-[60px] h-10 xs:h-[50px] xl:h-[60px] border border-transparent scale-[0.9] group-hover:scale-[1] group-hover:border-white group-hover:bg-[rgba(255,255,255,0.20)] transition-all duration-500 rounded-full inline-flex items-center justify-center\" type=\"button\" title=\"Play Video\" aria-disabled=\"false\">\n                                            <img decoding=\"async\" class=\"pl-1 max-w-5 xs:max-w-6 xl:max-w-[28px] \" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/play-polygon.svg\" alt=\"\">\n                                        <\/button>        \n                                    <\/div>\n                                                                <h6 class=\"mt-4 heading6 text-metalic-dark-01\">\n                                    2025 MiC\u570b\u969b\u6703\u8b70                                <\/h6>\n                            <\/a>\n                        <\/div>\n                                                <div class=\"swiper-slide\">\n                            <a href=\"#\" class=\"w-full block group\">\n                                                                    <div class=\"aspect-video cursor-pointer video-wrapper relative\">\n                                        <video loading=\"lazy\" class=\"w-full h-full eleVideo\" width=\"100%\" controls=\"\">\n                                            <source src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/CEDD-Promotion-Video-20250605-1-1-1.mp4\" type=\"video\/mp4\">\n                                            Your browser does not support the video tag.\n                                        <\/video>\n                                        <div class=\"video-poster absolute top-0 left-0 w-full h-full overflow-hidden\" aria-disabled=\"false\">\n                                            <img decoding=\"async\" class=\"w-full object-cover transition-all duration-500 group-hover:scale-[1.1]\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/photo-1.png\" alt=\"\" \/>\n                                            <span class=\"block absolute w-full left-0 top-0 h-full bg-overlay\"><\/span>\n                                        <\/div>                                    \n                                        <button class=\"play-button z-[1] absolute top-1\/2 left-1\/2 -translate-y-1\/2 -translate-x-1\/2 cursor-pointer w-10 xs:w-[50px] xl:w-[60px] h-10 xs:h-[50px] xl:h-[60px] border border-transparent scale-[0.9] group-hover:scale-[1] group-hover:border-white group-hover:bg-[rgba(255,255,255,0.20)] transition-all duration-500 rounded-full inline-flex items-center justify-center\" type=\"button\" title=\"Play Video\" aria-disabled=\"false\">\n                                            <img decoding=\"async\" class=\"pl-1 max-w-5 xs:max-w-6 xl:max-w-[28px] \" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/play-polygon.svg\" alt=\"\">\n                                        <\/button>        \n                                    <\/div>\n                                                                <h6 class=\"mt-4 heading6 text-metalic-dark-01\">\n                                    \u9999\u6e2f\u5927\u5b78MiCLab\u4e09\u7dad\u6280\u8853\u52a9\u529b\u5b89\u5168\u9ad8\u6548\u6a21\u584a\u904b\u8f38                                <\/h6>\n                            <\/a>\n                        <\/div>\n                                            <\/div>\n                    <div class=\"swiper-button-prev\"><\/div>\n                    <div class=\"swiper-button-next\"><\/div>\n                    <div class=\"swiper-pagination !relative !bottom-0 mt-[80px] lg:mt-10\"><\/div>\n                <\/div>\n                            <\/div>\n\n        <\/div>\n    <\/div>\n\n<\/div>\n\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        const spotlightVideosSwiper = new Swiper(\".spotlightVideosSwiper\", {\n        slidesPerView: 1,\n        spaceBetween: 20,\n        navigation: {\n            nextEl: \".swiper-button-next\",\n            prevEl: \".swiper-button-prev\",\n        },\n        pagination: {\n            el: \".swiper-pagination\",\n            clickable: true,\n        },\n        effect: 'slide',\n        speed: 1000,\n        loop: false,\n        \/\/ autoplay: {\n        \/\/     delay: 3000,\n        \/\/     disableOnInteraction: false,\n        \/\/ },\n        breakpoints: {\n                768: {\n                    slidesPerView: 2,\n                    spaceBetween: 30\n                },\n                1280: {\n                    slidesPerView: 3,\n                    spaceBetween: 40\n                },\n            }\n        });\n\n\n        \/\/ document.querySelectorAll(\".spotlight-videos .video-wrapper\").forEach(wrapper => {\n        \/\/     wrapper.addEventListener(\"click\", function (e) {\n        \/\/         e.preventDefault();\n        \/\/         e.stopPropagation();\n\n        \/\/         const video = wrapper.querySelector(\".eleVideo\");\n        \/\/         const poster = wrapper.querySelector(\".video-poster\");\n        \/\/         const playBtn = wrapper.querySelector(\".play-button\");\n\n        \/\/         if (poster) poster.style.display = \"none\";\n        \/\/         if (playBtn) playBtn.style.display = \"none\";\n\n        \/\/         video?.play();\n        \/\/     });\n        \/\/ });\n\n        const videowrappers = document.querySelectorAll(\".spotlight-videos .video-wrapper\");\n        const spotlightvideos = document.querySelectorAll(\".spotlight-videos .eleVideo\");\n\n        \/\/ Pause other videos when one starts playing\n        spotlightvideos && spotlightvideos.forEach(currentVideo => {\n            currentVideo.addEventListener(\"play\", function () {\n                spotlightvideos.forEach(video => {\n                    if (video !== currentVideo) {\n                        video.pause();\n                    }\n                });\n            });\n        });\n\n        \/\/ Click wrapper to toggle play\/pause\n        videowrappers && videowrappers.forEach(wrapper => {\n            wrapper.addEventListener(\"click\", function (e) {\n                e.preventDefault();\n\n                const video = wrapper.querySelector(\".eleVideo\");\n                const poster = wrapper.querySelector(\".video-poster\");\n                const playBtn = wrapper.querySelector(\".play-button\");\n\n                \/\/ Hide custom poster the first time\n                if (poster) poster.style.display = \"none\";\n                if (playBtn) playBtn.style.display = \"none\";\n\n                if (video.paused) {\n                    video.play();\n                } else {\n                    video.pause();\n                }\n            });\n        });\n\n    })\n<\/script>\n\n\n<div block-name=\"cookies-popup\" class=\"hidden z-[60] w-full fixed bottom-0 right-0 cookies-popup\">\n    <div class=\"w-full bg-[rgba(255,255,255,0.80)] backdrop-blur-sm text-metalic-dark-01 py-4\">\n        <div class=\"container mx-auto\">\n            <div class=\"container-md\">\n                <div class=\"flex flex-wrap sm:flex-nowrap items-center justify-between gap-4\">\n                    <div class=\"w-full sm:w-auto text-body-sm flex items-start gap-[10px] [&#038;_a]:text-secondary-green-01 [&#038;_a]:underline zr-content\">\n                        <img decoding=\"async\" class=\"shrink-0 w-5 h-5\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/Cookies.svg\" alt=\"cookie icon\" \/>\n                        <div class=\"text-metalic-dark-01\">\n                            <p>\u672c\u7db2\u7ad9\u4f7f\u7528Cookie\uff0c\u4ee5\u78ba\u4fdd\u60a8\u7372\u5f97\u6700\u4f73\u700f\u89bd\u9ad4\u9a57\u3002<a href=\"https:\/\/hku-iamc.visibleone.dev\/privacy-policy\/\">\u4e86\u89e3\u66f4\u591a<\/a>\u3002<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"ml-auto shrink-0 min-w-max text-right\">\n                        <button id=\"accept-cookies\" type=\"text\" class=\"py-2 px-4 text-button btn-white-black rounded-md bg-metalic-dark-01 border border-metalic-dark-01 transition-all duration-300 hover:bg-transparent hover:text-metalic-dark-01 text-white\">\n                            \u597d\u7684\uff0c\u6211\u77e5\u9053\u4e86\u3002                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        const acceptCookies = document.getElementById(\"accept-cookies\");\n        const cookiesPopup = document.querySelector(\".cookies-popup\");\n\n        const store_accept_cookies = localStorage.getItem('accept-cookies'); \n        if(!store_accept_cookies?? false) {\n            cookiesPopup && cookiesPopup.classList.remove(\"hidden\");\n        }\n\n        acceptCookies && acceptCookies.addEventListener(\"click\", function() {\n            cookiesPopup && cookiesPopup.classList.add(\"hidden\");\n            localStorage.setItem('accept-cookies', true);\n        })\n    })\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-708","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/pages\/708","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/comments?post=708"}],"version-history":[{"count":16,"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/pages\/708\/revisions"}],"predecessor-version":[{"id":1422,"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/pages\/708\/revisions\/1422"}],"wp:attachment":[{"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/media?parent=708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}