Document<\/title>\n <style>\n * {\n padding: 0;\n margin: 0;\n }\n\n #app {\n \/* padding: 0 4.75rem;\n box-sizing: border-box; *\/\n }\n\n \/* \u5bfc\u822a *\/\n .daohan {\n width: 100%;\n height: 4.375rem;\n display: flex;\n justify-content: space-between;\n padding: 0 4.75rem;\n box-sizing: border-box;\n align-items: center;\n position: fixed;\n \/* \u8ba9\u5bfc\u822a\u56fa\u5b9a\u5728\u9876\u90e8 *\/\n top: 0;\n \/* \u5c06\u5bfc\u822a\u680f\u5b9a\u4f4d\u5230\u9876\u90e8 *\/\n background-color: white;\n \/* \u8bbe\u7f6e\u80cc\u666f\u989c\u8272\u4e3a\u767d\u8272 *\/\n z-index: 1000;\n \/* \u786e\u4fdd\u5bfc\u822a\u680f\u5728\u5176\u4ed6\u5185\u5bb9\u4e0a\u65b9 *\/\n \/* box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); \u6dfb\u52a0\u9634\u5f71\u6548\u679c *\/\n }\n\n .dh-a {}\n\n .img-a {\n width: 9.375rem;\n height: 2.5rem;\n }\n\n .dh-b {\n width: 37.5rem;\n font-size: 1rem;\n font-weight: 600;\n display: flex;\n justify-content: space-between;\n }\n\n \/* \u4e3b\u98981 *\/\n .div-block-80 {\n width: 100%;\n \/* padding: 0 4.75rem; *\/\n box-sizing: border-box;\n flex-direction: column;\n align-items: flex-end;\n display: flex\n }\n\n .div-block-81 {\n \/* margin-top: 180px; *\/\n margin-bottom: 6px;\n display: flex;\n }\n\n .div-block-82 {\n grid-column-gap: 8px;\n justify-content: space-between;\n margin-bottom: 6px;\n display: flex;\n }\n\n .block-170 {\n padding-bottom: 5px;\n\n }\n\n .image-48 {\n width: 10vw;\n height: 100%;\n }\n\n .heading {\n font-size: 8.5vw;\n font-weight: 500;\n line-height: .8;\n }\n\n .div-block-4 {\n \/* padding: 0 4.75rem; *\/\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n margin: 2.5rem 0;\n }\n\n .heading-2 {\n font-size: 1.8rem;\n -webkit-text-stroke-width: .5px;\n font-weight: 500;\n line-height: 1.3;\n margin-top: 0;\n margin-bottom: 0;\n }\n\n .image-29 {\n align-self: flex-start;\n height: 7vw;\n }\n\n .h11 {\n transition: all 0.5s ease;\n animation: pulse 2s 1 alternate;\n }\n\n @keyframes pulse {\n 0% {\n transform: translateY(50px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.8;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .h22 {\n transition: all 0.5s ease;\n animation: axx 2s 1 alternate;\n \/* animation-delay: 0.5s; *\/\n }\n\n @keyframes axx {\n 0% {\n transform: translateY(60px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .h33 {\n transition: all 0.5s ease;\n animation: ass 2s 1 alternate;\n \/* animation-delay: 0.5s; *\/\n }\n\n @keyframes ass {\n 0% {\n transform: translateY(70px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .h44 {\n transition: all 0.5s ease;\n animation: arr 2s 1 alternate;\n \/* animation-delay: 0.5s; *\/\n }\n\n @keyframes arr {\n 0% {\n transform: translateY(70px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .h55 {\n transition: all 0.5s ease;\n animation: aa 2s 1 alternate;\n \/* animation-delay: 0.5s; *\/\n }\n\n @keyframes aa {\n 0% {\n transform: scale(0);\n \/* \u4ece 0 \u5f00\u59cb *\/\n opacity: 0;\n \/* \u900f\u660e\u5ea6\u4e3a 0 *\/\n }\n\n 100% {\n transform: scale(1);\n \/* \u7f29\u653e\u81f3\u539f\u59cb\u5c3a\u5bf8 *\/\n opacity: 1;\n \/* \u5b8c\u5168\u663e\u793a *\/\n }\n }\n <\/style>\n\n\n<\/head>\n\n<body>\n <div id=\"app\">\n \n \n <div class=\"div-block-80\">\n <div class=\"div-block-81\">\n <h1 class=\"heading h11\" style=\"letter-spacing: -.2vw; -webkit-text-stroke-width: 3px;\">CREATIVE<\/h1>\n <\/div>\n <div class=\"div-block-82 h22\">\n <h1 class=\"heading \" style=\"letter-spacing: -.2vw; -webkit-text-stroke-width: 3px;\">INTERACT<span\n class=\"text-span-2\" style=\"color: #64cf80;\">IO<\/span>N<\/h1>\n <div class=\"block-170 h33\">\n <img decoding=\"async\" class=\"image-48\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652f6db9ae3c0fa4244227b5_oosaa-homes_00000_iSpt.png\"\n alt=\"\">\n <\/div>\n <\/div>\n <div class=\"div-block-83\">\n <h1 class=\"heading h33\" style=\"letter-spacing: -.2vw; -webkit-text-stroke-width: 3px;\">ANIMATION<\/h1>\n <\/div>\n <\/div>\n <div class=\"div-block-4\">\n <div class=\"\">\n <h1 class=\"heading-2 h44\">\n OOSAA\u4e3a\u54c1\u724c\u5168\u7403\u5316\n <br>\n \u63d0\u4f9b\u5168\u65b9\u4f4d\u7f51\u7ad9\u8bbe\u8ba1\u4e0e\u5f00\u53d1\u670d\u52a1\n <br>\n \u5e2e\u52a9\u4f01\u4e1a\u91cd\u65b0\u5236\u5b9a\u7b56\u7565, \u5efa\u7acb\u89c6\u89c9\u5f62\u8c61\n <br>\n \u8ba9\u54c1\u724c\u5728\u5e02\u573a\u4e2d\u8131\u9896\u800c\u51fa\n <\/h1>\n <\/div>\n <div class=\"block-5\">\n <img decoding=\"async\" class=\"image-29 h55\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/65Group 1403.svg\" alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n<\/body>\n<script>\n\n<\/script>\n\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n<\/head>\n<style>\n \/* \u89c6\u9891 *\/\n * {\n padding: 0;\n margin: 0;\n }\n\n .background-video {\n cursor: pointer;\n \/* width: 100%; *\/\n \/* height: 100vh; *\/\n \/* display: flex;\n justify-content: center; *\/\n \/* position: relative; *\/\n }\n\n .div-block-92 {\n \/* width: 100%;\n height: 100%; *\/\n margin-top: 9vh;\n transition: all 2s ease;\n position: relative;\n }\n\n\n\n .image-27 {\n width: 18%;\n height: auto;\n margin-bottom: 4px;\n margin-left: 2px;\n }\n\n .heading-36 {\n text-transform: uppercase;\n margin-top: 2px;\n margin-bottom: 0;\n font-size: 1rem;\n line-height: 1;\n }\n\n .hover-wrapper1 {\n z-index: 10;\n \/* justify-content: center;\n align-items: center; *\/\n \/* width: 100%;\n height: 100%; *\/\n display: flex;\n position: absolute;\n top: 0%;\n bottom: 0%;\n left: 0%;\n right: 0%;\n overflow: hidden;\n transition: all 0.5s ease;\n }\n\n .icon-wrapper1 {\n z-index: 10;\n display: flex;\n cursor: pointer;\n background-color: #fff;\n border-radius: 50%;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100px;\n height: 100px;\n padding: 10px;\n transition: all 0.5s ease;\n box-shadow: 0 0 20px 12px rgba(0, 0, 0, .04);\n opacity: 0;\n\n }\n\n .image-28 {\n width: 18%;\n height: auto;\n margin-bottom: 4px;\n margin-left: 2px;\n }\n\n .heading-37 {\n text-transform: uppercase;\n margin-top: 2px;\n margin-bottom: 0;\n font-size: 1rem;\n line-height: 1;\n }\n<\/style>\n\n<body>\n <div id=\"appv\">\n <div class=\"div-block-92\">\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <div class=\"background-video\" data-autoplay=\"true\" data-loop=\"true\" data-wf-ignore=\"true\">\n <video class=\"video-block\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557ef8_6\u670827\u65e5_1_1-transcode.mp4\"\n style=\"object-fit: cover; width: 100%; height: auto;\" autoplay loop muted playsinline\n data-wf-ignore=\"true\" data-object-fit=\"cover\">\n <source\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557ef8_6\u670827\u65e5_1_1-transcode.mp4\"\n data-wf-ignore=\"true\">\n <source\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557ef8_6\u670827\u65e5_1_1-transcode.webm\"\n data-wf-ignore=\"true\">\n <\/video>\n <\/div>\n\n <\/div>\n <\/div>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n \/\/ \u83b7\u53d6\u9700\u8981\u64cd\u4f5c\u7684\u5143\u7d20\n const backgroundVideo = document.querySelector('.div-block-92');\n const hoverWrapper = document.querySelector('.icon-wrapper1');\n\n \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u5165\u4e8b\u4ef6\u76d1\u542c\u5668\n backgroundVideo.addEventListener('mouseenter', (event) => {\n \/\/ \u5f53\u9f20\u6807\u79fb\u5165 .background-video \u65f6\uff0c\u663e\u793a .hover-wrapper\n hoverWrapper.style.display = 'flex';\n hoverWrapper.style.opacity = 1\n });\n\n\n \/\/ \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6\u76d1\u542c\u5668\n backgroundVideo.addEventListener('mouseleave', (event) => {\n \/\/ \u5f53\u9f20\u6807\u79fb\u51fa .background-video \u65f6\uff0c\u9690\u85cf .hover-wrapper\n hoverWrapper.style.display = 'none';\n hoverWrapper.style.opacity = 0\n });\n\n\n \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u52a8\u4e8b\u4ef6\u76d1\u542c\u5668\n backgroundVideo.addEventListener('mousemove', (event) => {\n \/\/ \u6839\u636e\u9f20\u6807\u4f4d\u7f6e\u66f4\u65b0 .hover-wrapper \u7684\u4f4d\u7f6e\n const rect = backgroundVideo.getBoundingClientRect();\n const offsetX = event.clientX - rect.left;\n const offsetY = event.clientY - rect.top;\n\n \/\/ \u8c03\u6574\u56fe\u6807\u4f4d\u7f6e\uff0c\u4f7f\u5176\u4ee5\u9f20\u6807\u4e3a\u4e2d\u5fc3\n const iconWidth = hoverWrapper.offsetWidth;\n const iconHeight = hoverWrapper.offsetHeight;\n const translateX = offsetX - iconWidth \/ 2;\n const translateY = offsetY - iconHeight \/ 2;\n\n hoverWrapper.style.transform = `translate(${translateX}px, ${translateY}px)`;\n\n });\n });\n\n document.addEventListener('wheel', function (event) {\n \/\/ \u6355\u83b7\u6eda\u8f6e\u4e8b\u4ef6\n event.preventDefault(); \/\/ \u963b\u6b62\u9ed8\u8ba4\u6eda\u52a8\u884c\u4e3a\n\n \/\/ \u53ef\u4ee5\u901a\u8fc7 event.deltaY \u83b7\u53d6\u6eda\u52a8\u7684\u8ddd\u79bb\n \/\/ \u5c06\u6eda\u8f6e\u901f\u5ea6\u51cf\u6162\u5230\u539f\u6765\u7684\u4e00\u534a\n const slowerDeltaY = event.deltaY * 0.5;\n\n \/\/ \u5728\u8fd9\u91cc\u53ef\u4ee5\u5c06\u8c03\u6574\u540e\u7684\u6eda\u52a8\u8ddd\u79bb\u5e94\u7528\u5230\u9875\u9762\u6eda\u52a8\u4e2d\n \/\/ \u901a\u8fc7 window.scrollBy \u65b9\u6cd5\u5b9e\u73b0\u81ea\u5b9a\u4e49\u7684\u6eda\u52a8\u6548\u679c\n window.scrollBy(0, slowerDeltaY);\n }, {\n passive: false\n });\n <\/script>\n<\/body>\n\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n<\/head>\n<style>\n \/* \u5173\u4e8e\u6211\u4eec *\/\n * {\n padding: 0;\n margin: 0;\n }\n\n #app {\n margin-top: 15.1875rem;\n }\n\n .div-block-6 {\n width: 100%;\n height: 41.6875rem;\n display: flex;\n }\n\n .heading-36 {\n color: #080808;\n margin-top: 0;\n margin-bottom: 0;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: 1.2rem;\n font-weight: 400;\n }\n\n .div-block-77 {\n width: 36.4375rem;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n }\n\n .div-block-184 {\n grid-column-gap: 16px;\n grid-row-gap: 14px;\n grid-template-rows: auto auto auto auto;\n grid-template-columns: 1fr;\n grid-auto-columns: 1fr;\n display: grid;\n align-items: stretch;\n align-content: stretch;\n }\n\n .douy,\n .xiaohs,\n .be,\n .zcool {\n cursor: pointer;\n }\n\n .div-block-117 {\n width: 54.625rem;\n\n }\n\n .heading-3 {\n -webkit-text-stroke-width: .5px;\n width: 100%;\n font-size: 1.8rem;\n font-weight: 400;\n line-height: 1.6;\n }\n\n .box1,\n .box2,\n .box3,\n .box4 {\n padding-top: 36px;\n position: relative;\n cursor: pointer;\n height: 70px;\n border-bottom: 1px #d9d9d9 solid;\n }\n\n .w-inline-block {\n max-width: 100%;\n \/* display: inline-block; *\/\n }\n\n .text-block-4 {\n color: #000;\n font-size: 1rem;\n line-height: 1;\n position: absolute;\n top: 41px;\n }\n\n .div-block-7 {\n \/* height: 70px; *\/\n margin-left: 26px;\n display: flex;\n justify-content: space-between;\n }\n\n .heading-4 {\n font-size: 1.5rem;\n font-weight: 400;\n }\n\n .box1:hover {\n border-color: #000;\n }\n\n .box1:hover .text-block-4 {\n transform: translateX(30px);\n \/* \u6587\u5b57\u5411\u53f3\u5e73\u79fb20px *\/\n }\n\n .box1:hover .heading-4 {\n transform: translateX(30px);\n }\n\n .box1:hover .div-block-7 img {\n transform: translateX(-30px);\n \/* \u56fe\u7247\u5411\u5de6\u5e73\u79fb20px *\/\n }\n\n .box2:hover {\n border-color: #000;\n }\n\n .box2:hover .text-block-4 {\n transform: translateX(30px);\n \/* \u6587\u5b57\u5411\u53f3\u5e73\u79fb20px *\/\n }\n\n .box2:hover .heading-4 {\n transform: translateX(30px);\n }\n\n .box2:hover .div-block-7 img {\n transform: translateX(-30px);\n \/* \u56fe\u7247\u5411\u5de6\u5e73\u79fb20px *\/\n }\n\n .box3:hover {\n border-color: #000;\n }\n\n .box3:hover .text-block-4 {\n transform: translateX(30px);\n \/* \u6587\u5b57\u5411\u53f3\u5e73\u79fb20px *\/\n }\n\n .box3:hover .heading-4 {\n transform: translateX(30px);\n }\n\n .box3:hover .div-block-7 img {\n transform: translateX(-30px);\n \/* \u56fe\u7247\u5411\u5de6\u5e73\u79fb20px *\/\n }\n\n .box4:hover {\n border-color: #000;\n }\n\n .box4:hover .text-block-4 {\n transform: translateX(30px);\n \/* \u6587\u5b57\u5411\u53f3\u5e73\u79fb20px *\/\n }\n\n .box4:hover .heading-4 {\n transform: translateX(30px);\n }\n\n .box4:hover .div-block-7 img {\n transform: translateX(-30px);\n \/* \u56fe\u7247\u5411\u5de6\u5e73\u79fb20px *\/\n }\n\n .box1,\n .box2,\n .box3,\n .box4,\n .heading-4,\n .text-block-4,\n .div-block-7,\n img {\n transition: all 0.5s ease;\n \/* \u6dfb\u52a0\u8fc7\u6e21\u6548\u679c *\/\n }\n\n .image-3,\n .image-4,\n .image-5,\n .image-6 {\n z-index: 4;\n width: 28.125rem;\n position: absolute;\n bottom: -100%;\n left: auto;\n right: 25%;\n opacity: 0;\n display: none;\n\n transform: translate3d(-0.008%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);\n }\n\n .img-0 {\n transition: all 0.5s ease;\n }\n\n .douy img:hover {\n transform: translateX(10px);\n }\n\n .xiaohs img:hover {\n transform: translateX(10px);\n }\n\n .be img:hover {\n transform: translateX(10px);\n }\n\n .zcool img:hover {\n transform: translateX(10px);\n }\n\n .gyuwm2 {\n transition: all 0.5s ease;\n animation: gyuwm2 2s 1 alternate;\n }\n\n @keyframes gyuwm2 {\n 0% {\n transform: translateY(50px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .eadingx2 {\n transition: all 0.5s ease;\n animation: eadingx2 2s 1 alternate;\n }\n\n @keyframes eadingx2 {\n 0% {\n transform: translateY(50px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .pxdiv12 {\n transition: all 0.5s ease;\n animation: pxdiv12 2s 1 alternate;\n }\n\n @keyframes pxdiv12 {\n 0% {\n transform: translateY(50px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .box1-1 {\n transition: all 0.5s ease;\n animation: box1-1 2s 1 alternate;\n }\n\n @keyframes box1-1 {\n 0% {\n transform: translateY(50px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .box2-2 {\n transition: all 0.5s ease;\n animation: box2-2 2s 1 alternate;\n }\n\n @keyframes box2-2 {\n 0% {\n transform: translateY(50px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .douy1 {\n transition: all 0.5s ease;\n animation: douy1 2s 1 alternate;\n }\n\n @keyframes douy1 {\n 0% {\n transform: translateY(50px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .box3-3,\n .xiaohs1,\n .box4-4,\n .be1,\n .zcool1 {\n transition: all 0.5s ease;\n animation: box3-3 2s 1 alternate;\n }\n\n @keyframes box3-3 {\n 0% {\n transform: translateY(50px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n<\/style>\n\n<body>\n <div id=\"app\">\n <div class=\"div-block-6\">\n <div class=\"div-block-77\">\n <div class=\"gyuwm\">\n <h2 class=\"heading-36\">\u25cf \u5173\u4e8e\u6211\u4eec ABOUT US<\/h2>\n <\/div>\n <div class=\"div-block-184\">\n <div class=\"douy\">\n <img decoding=\"async\" style=\"width: 2.5rem;\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6536246a17ca225f10e83db6_Group 1610.svg\"\n alt=\"\">\n <\/div>\n <div class=\"xiaohs\">\n <img decoding=\"async\" style=\"width: 2.5rem;\"\n src=\" https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6536246a2cf7056045a1336e_Group 1611.svg\"\n alt=\"\">\n <\/div>\n <div class=\"be\">\n <img decoding=\"async\" style=\"width: 2.5rem;\"\n src=\" https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6536246abca93c89bc0d6a02_Group 1612.svg\"\n alt=\"\">\n <\/div>\n <div class=\"zcool\">\n <img decoding=\"async\" style=\"width: 2.5rem;\"\n src=\" https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6536246ad6ca1fc34328e782_Group 1613.svg\"\n alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-117\">\n <h1 class=\"heading-3 eadingx\">\n <span class=\"text-span-7\" style=\"text-decoration: underline;\">OOSAA.<\/span>\n \u662f\u4e13\u6ce8\u9ad8\u7aef\u7f51\u7ad9\u8bbe\u8ba1\u4e0e\u5f00\u53d1\u7684\u521b\u610f\u5de5\u4f5c\u5ba4\uff0c\u6211\u4eec\u4e3a\u54c1\u724c\u91cd\u65b0\u5b9a\u4e49\u89c6\u89c9\u4e0e\u4ea4\u4e92\uff0c\u591a\u89d2\u5ea6\u6d1e\u5bdf\u54c1\u724c\u7684\u521b\u65b0\u6027\uff0c\u5e76\u5c06\u4f18\u79c0\u7684\u8bbe\u8ba1\u7406\u5ff5\u4e0e\u7edd\u4f73\u7684\u7528\u6237\u4f53\u9a8c\u76f8\u7ed3\u5408\uff0c\u4e3a\u4f01\u4e1a\u63d0\u4f9b\u4ece\u54c1\u724c\u903b\u8f91\u7b56\u7565\u8425\u9500\u5230\u89c6\u89c9\u8bbe\u8ba1\u52a8\u6548\u5f00\u53d1\u7684\u5168\u65b9\u4f4d\u7f51\u7ad9\u5b9a\u5236\u670d\u52a1\u3002\n <\/h1>\n <div class=\"_32px-div_1\" style=\"height: 3.125rem;\"><\/div>\n <div class=\"d9-1px-div pxdiv1\" style=\"height: .0625rem; background-color: #d9d9d9;\"><\/div>\n <div class=\"box1 w-inline-block\">\n <div class=\"text-block-4\">01<\/div>\n <div class=\"div-block-7\">\n <h1 class=\"heading-4\">\u54c1\u724c\u5206\u6790\u6d1e\u5bdf<\/h1>\n <img decoding=\"async\" style=\"width: 1.125rem;\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/328e782_Group 1613.svg\"\n alt=\"\">\n <\/div>\n <img decoding=\"async\" class=\"image-3 img-0\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557f93_oosaa-home4-p-500.webp\"\n alt=\"\">\n <\/div>\n \n <div class=\"box2 w-inline-block\">\n <div class=\"text-block-4\">02<\/div>\n <div class=\"div-block-7\">\n <h1 class=\"heading-4\">\u8bbe\u8ba1\u89c6\u89c9\u521b\u610f<\/h1>\n <img decoding=\"async\" style=\"width: 1.125rem;\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/328e782_Group 1613.svg\"\n alt=\"\">\n <\/div>\n <img decoding=\"async\" class=\"image-4 img-0\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557f96_oosaa-home2-p-500.webp\"\n alt=\"\">\n <\/div>\n \n <div class=\"box3 w-inline-block\">\n <div class=\"text-block-4\">03<\/div>\n <div class=\"div-block-7\">\n <h1 class=\"heading-4\">\u5f00\u53d1\u4ea4\u4e92\u4f53\u9a8c<\/h1>\n <img decoding=\"async\" style=\"width: 1.125rem;\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/328e782_Group 1613.svg\"\n alt=\"\">\n <\/div>\n <img decoding=\"async\" class=\"image-5 img-0\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557f95_oosaa-home3-p-500.webp\"\n alt=\"\">\n <\/div>\n \n <div class=\"box4 w-inline-block\">\n <div class=\"text-block-4\">04<\/div>\n <div class=\"div-block-7\">\n <h1 class=\"heading-4\">\u6301\u7eed\u4f18\u5316\u7ef4\u62a4<\/h1>\n <img decoding=\"async\" style=\"width: 1.125rem;\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/328e782_Group 1613.svg\"\n alt=\"\">\n <\/div>\n <img decoding=\"async\" class=\"image-6 img-0\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557f94_oosaa-home1-p-500.webp\"\n alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n const box1 = document.querySelector('.box1');\n const img3 = document.querySelector('.image-3');\n \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u5165\u4e8b\u4ef6\u76d1\u542c\u5668\n box1.addEventListener('mouseenter', (event) => {\n \/\/ \u5f53\u9f20\u6807\u79fb\u5165 .background-video \u65f6\uff0c\u663e\u793a .hover-wrapper\n img3.style.display = 'block';\n img3.style.opacity = 1\n\n });\n \/\/ \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6\u76d1\u542c\u5668\n box1.addEventListener('mouseleave', (event) => {\n \/\/ \u5f53\u9f20\u6807\u79fb\u51fa .background-video \u65f6\uff0c\u9690\u85cf .hover-wrapper\n img3.style.display = 'none';\n img3.style.opacity = 0\n img3.style.transform = `translate(0, 0)`;\n\n });\n box1.addEventListener('mousemove', (event) => {\n \/\/ \u6839\u636e\u9f20\u6807\u4f4d\u7f6e\u66f4\u65b0 .hover-wrapper \u7684\u4f4d\u7f6e\n const rect = box1.getBoundingClientRect();\n const offsetX = event.clientX - rect.left;\n const offsetY = event.clientY - rect.top;\n\n \/\/ \u8c03\u6574\u56fe\u6807\u4f4d\u7f6e\uff0c\u4f7f\u5176\u4ee5\u9f20\u6807\u4e3a\u4e2d\u5fc3\n const iconWidth = img3.offsetWidth;\n const iconHeight = img3.offsetHeight;\n const translateX = offsetX - iconWidth;\n console.log(translateX);\n if (translateX > 300) {\n img3.style.transform = `translate(${translateX - 100}px)`;\n\n } else if (translateX < 300) {\n img3.style.transform = `translate(${translateX + 100}px)`;\n } else {\n img3.style.transform = `translate(${translateX}px)`;\n }\n\n });\n \/\/ ----------------------------------------------------\n const box2 = document.querySelector('.box2');\n const img4 = document.querySelector('.image-4');\n \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u5165\u4e8b\u4ef6\u76d1\u542c\u5668\n box2.addEventListener('mouseenter', (event) => {\n \/\/ \u5f53\u9f20\u6807\u79fb\u5165 .background-video \u65f6\uff0c\u663e\u793a .hover-wrapper\n img4.style.display = 'block';\n img4.style.opacity = 1\n\n });\n \/\/ \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6\u76d1\u542c\u5668\n box2.addEventListener('mouseleave', (event) => {\n \/\/ \u5f53\u9f20\u6807\u79fb\u51fa .background-video \u65f6\uff0c\u9690\u85cf .hover-wrapper\n img4.style.display = 'none';\n img4.style.opacity = 0\n img4.style.transform = `translate(0, 0)`;\n\n });\n box2.addEventListener('mousemove', (event) => {\n \/\/ \u6839\u636e\u9f20\u6807\u4f4d\u7f6e\u66f4\u65b0 .hover-wrapper \u7684\u4f4d\u7f6e\n const rect = box2.getBoundingClientRect();\n const offsetX = event.clientX - rect.left;\n const offsetY = event.clientY - rect.top;\n\n \/\/ \u8c03\u6574\u56fe\u6807\u4f4d\u7f6e\uff0c\u4f7f\u5176\u4ee5\u9f20\u6807\u4e3a\u4e2d\u5fc3\n const iconWidth = img4.offsetWidth;\n const iconHeight = img4.offsetHeight;\n const translateX = offsetX - iconWidth;\n console.log(translateX);\n if (translateX > 300) {\n img4.style.transform = `translate(${translateX - 100}px)`;\n\n } else if (translateX < 300) {\n img4.style.transform = `translate(${translateX + 100}px)`;\n } else {\n img4.style.transform = `translate(${translateX}px)`;\n }\n\n });\n \/\/ ----------------------------------------------------\n const box3 = document.querySelector('.box3');\n const img5 = document.querySelector('.image-5');\n \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u5165\u4e8b\u4ef6\u76d1\u542c\u5668\n box3.addEventListener('mouseenter', (event) => {\n \/\/ \u5f53\u9f20\u6807\u79fb\u5165 .background-video \u65f6\uff0c\u663e\u793a .hover-wrapper\n img5.style.display = 'block';\n img5.style.opacity = 1\n\n });\n \/\/ \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6\u76d1\u542c\u5668\n box3.addEventListener('mouseleave', (event) => {\n \/\/ \u5f53\u9f20\u6807\u79fb\u51fa .background-video \u65f6\uff0c\u9690\u85cf .hover-wrapper\n img5.style.display = 'none';\n img5.style.opacity = 0\n img5.style.transform = `translate(0, 0)`;\n\n });\n box3.addEventListener('mousemove', (event) => {\n \/\/ \u6839\u636e\u9f20\u6807\u4f4d\u7f6e\u66f4\u65b0 .hover-wrapper \u7684\u4f4d\u7f6e\n const rect = box3.getBoundingClientRect();\n const offsetX = event.clientX - rect.left;\n const offsetY = event.clientY - rect.top;\n\n \/\/ \u8c03\u6574\u56fe\u6807\u4f4d\u7f6e\uff0c\u4f7f\u5176\u4ee5\u9f20\u6807\u4e3a\u4e2d\u5fc3\n const iconWidth = img5.offsetWidth;\n const iconHeight = img5.offsetHeight;\n const translateX = offsetX - iconWidth;\n console.log(translateX);\n if (translateX > 300) {\n img5.style.transform = `translate(${translateX - 100}px)`;\n\n } else if (translateX < 300) {\n img5.style.transform = `translate(${translateX + 100}px)`;\n } else {\n img5.style.transform = `translate(${translateX}px)`;\n }\n\n });\n \/\/ ----------------------------------------------------\n const box4 = document.querySelector('.box4');\n const img6 = document.querySelector('.image-6');\n \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u5165\u4e8b\u4ef6\u76d1\u542c\u5668\n box4.addEventListener('mouseenter', (event) => {\n \/\/ \u5f53\u9f20\u6807\u79fb\u5165 .background-video \u65f6\uff0c\u663e\u793a .hover-wrapper\n img6.style.display = 'block';\n img6.style.opacity = 1\n\n });\n \/\/ \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6\u76d1\u542c\u5668\n box4.addEventListener('mouseleave', (event) => {\n \/\/ \u5f53\u9f20\u6807\u79fb\u51fa .background-video \u65f6\uff0c\u9690\u85cf .hover-wrapper\n img6.style.display = 'none';\n img6.style.opacity = 0\n img6.style.transform = `translate(0, 0)`;\n\n });\n box4.addEventListener('mousemove', (event) => {\n \/\/ \u6839\u636e\u9f20\u6807\u4f4d\u7f6e\u66f4\u65b0 .hover-wrapper \u7684\u4f4d\u7f6e\n const rect = box4.getBoundingClientRect();\n const offsetX = event.clientX - rect.left;\n const offsetY = event.clientY - rect.top;\n\n \/\/ \u8c03\u6574\u56fe\u6807\u4f4d\u7f6e\uff0c\u4f7f\u5176\u4ee5\u9f20\u6807\u4e3a\u4e2d\u5fc3\n const iconWidth = img6.offsetWidth;\n const iconHeight = img6.offsetHeight;\n const translateX = offsetX - iconWidth;\n console.log(translateX);\n if (translateX > 300) {\n img6.style.transform = `translate(${translateX - 100}px)`;\n\n } else if (translateX < 300) {\n img6.style.transform = `translate(${translateX + 100}px)`;\n } else {\n img6.style.transform = `translate(${translateX}px)`;\n }\n\n });\n });\n\n document.addEventListener('DOMContentLoaded', function () {\n\n function handleScrolx() {\n var scrollTopx = window.pageYOffset || document.documentElement.scrollTop || document.body\n .scrollTop || 0;\n const gyuwm = document.querySelector('.gyuwm');\n const eadingx = document.querySelector('.eadingx');\n const pxdiv1 = document.querySelector('.pxdiv1');\n const box1 = document.querySelector('.box1');\n const box2 = document.querySelector('.box2');\n const douy = document.querySelector('.douy');\n const box3 = document.querySelector('.box3');\n const xiaohs = document.querySelector('.xiaohs');\n const box4 = document.querySelector('.box4');\n const be = document.querySelector('.be');\n const zcool = document.querySelector('.zcool');\n if (scrollTopx >= 1109 && scrollTopx < 1300) {\n gyuwm.classList.add('gyuwm2');\n eadingx.classList.add('eadingx2');\n } else if (scrollTopx >= 1306 && scrollTopx < 1400) {\n pxdiv1.classList.add('pxdiv12');\n } else if (scrollTopx >= 1400 && scrollTopx < 1500) {\n box1.classList.add('box1-1')\n } else if (scrollTopx > 1500 && scrollTopx < 1600) {\n box2.classList.add('box2-2')\n douy.classList.add('douy1')\n } else if (scrollTopx > 1600 && scrollTopx < 1700) {\n box3.classList.add('box3-3')\n xiaohs.classList.add('xiaohs1')\n } else if (scrollTopx > 1700 && scrollTopx < 1750) {\n box4.classList.add('box4-4')\n be.classList.add('be1')\n } else if (scrollTopx > 1750 && scrollTopx < 1800) {\n zcool.classList.add('zcool1')\n } else if (scrollTopx > 1800) {\n gyuwm.classList.add('gyuwm2');\n eadingx.classList.add('eadingx2');\n pxdiv1.classList.add('pxdiv12');\n box1.classList.add('box1-1')\n box2.classList.add('box2-2')\n douy.classList.add('douy1')\n box3.classList.add('box3-3')\n xiaohs.classList.add('xiaohs1')\n box4.classList.add('box4-4')\n be.classList.add('be1')\n zcool.classList.add('zcool1')\n }\n\n }\n\n window.addEventListener('scroll', handleScrolx);\n });\n <\/script>\n<\/body>\n\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n<\/head>\n<style>\n *{\n padding: 0;\n margin: 0;\n }\n #appk{\n width: 100%;\n height: 25rem;\n }\n<\/style>\n<body>\n <div id=\"appk\">\n\n <\/div>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n<\/head>\n\n<style>\n @media screen and (min-width: 700px) and (max-width: 800px) {\n .wp-block-group {\n background-color: black;\n }\n }\n\n * {\n padding: 0;\n margin: 0;\n }\n\n .heading-5 {\n z-index: -1;\n color: #c45252;\n text-align: center;\n font-weight: 500;\n will-change: opacity;\n opacity: 0.6;\n margin-top: -10vh;\n font-size: 22rem;\n position: sticky;\n top: 24%;\n }\n\n ._1ji-handing {\n text-transform: uppercase;\n white-space: nowrap;\n margin-top: 0;\n margin-bottom: 0;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: 1.2rem;\n font-weight: 400;\n }\n\n .workss {\n z-index: -3;\n display: none;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n height: 100vh;\n \/* \u4f7f\u7528\u89c6\u53e3\u9ad8\u5ea6\u4f5c\u4e3a\u9ad8\u5ea6 *\/\n position: fixed;\n \/* \u4f7f\u7528\u56fa\u5b9a\u5b9a\u4f4d\uff0c\u8ba9\u76d2\u5b50\u59cb\u7ec8\u5c45\u4e2d *\/\n top: 0;\n \/* \u4e0e\u4e0a\u8fb9\u754c\u5bf9\u9f50 *\/\n left: 0;\n \/* \u4e0e\u5de6\u8fb9\u754c\u5bf9\u9f50 *\/\n opacity: 0;\n transition: all 0.5s ease;\n }\n\n .grid-2 {\n display: flex;\n justify-content: space-between;\n\n }\n\n .div-block-141 {\n grid-row-gap: 14vh;\n flex-direction: column;\n display: flex;\n transition: all 0.5s ease;\n }\n\n .w-dyn-item {\n width: 42.625rem;\n \/* height: 51.375rem; *\/\n }\n\n .link-block-10 {\n width: 100%;\n \/* height: 100%; *\/\n background-color: #EEEEF0;\n padding: 2.375rem 3.125rem;\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n }\n\n .link-block-10:hover .img-s-6 {\n transform: scale(0.95);\n \/* \u56fe\u7247\u7f29\u5c0f\u81f3\u539f\u59cb\u5c3a\u5bf8\u768490% *\/\n }\n\n .img-s-6 {\n width: 100%;\n height: 100%;\n transition: transform 0.7s ease;\n }\n\n .div-block-15 {\n margin-top: 1.2vw;\n margin-bottom: 1.2vw;\n }\n\n .div-block-10 {\n display: flex;\n justify-content: space-between;\n margin-top: 15px;\n align-items: center;\n }\n\n .div-block-11 {\n display: flex;\n }\n\n .heading-7 {\n text-transform: uppercase;\n white-space: nowrap;\n margin-top: 0;\n margin-bottom: 0;\n margin-right: 6px;\n font-size: 1.4rem;\n font-weight: 500;\n line-height: 1;\n }\n\n .heading-8 {\n -webkit-text-stroke-width: .5px;\n white-space: nowrap;\n margin-top: 0;\n margin-bottom: 0;\n padding-top: .5px;\n font-size: 1.25rem;\n font-weight: 500;\n line-height: 1;\n }\n\n .div-block-16 {\n display: flex;\n align-items: center;\n }\n\n .biaoq {\n border: .5px solid #080808;\n background-color: rgba(255, 255, 255, 0);\n margin-left: 6px;\n margin-right: 0;\n padding: 6px 15px 6.5px;\n border-radius: 999px;\n box-sizing: border-box;\n }\n\n .hover-wrapper1 {\n z-index: 10;\n \/* justify-content: center;\n align-items: center; *\/\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n top: 0%;\n bottom: 0%;\n left: 0%;\n right: 0%;\n overflow: hidden;\n transition: all 0.5s ease;\n }\n\n .icon-wrapper1 {\n display: flex;\n cursor: pointer;\n background-color: #fff;\n border-radius: 50%;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100px;\n height: 100px;\n padding: 10px;\n\n box-shadow: 0 0 20px 12px rgba(0, 0, 0, .04);\n opacity: 0;\n\n }\n\n .image-28 {\n width: 18%;\n height: auto;\n margin-bottom: 4px;\n margin-left: 2px;\n }\n\n .heading-37 {\n text-transform: uppercase;\n margin-top: 2px;\n margin-bottom: 0;\n font-size: 1rem;\n line-height: 1;\n }\n\n .block-div-199 {\n grid-row-gap: 14vh;\n flex-direction: column;\n display: flex;\n transition: all 2s ease;\n }\n<\/style>\n\n<body>\n <div id=\"appkp\">\n <div class=\"workss\">\n <h1 class=\"heading-5\" style=\"color: #fff;\">WORKS<\/h1>\n <\/div>\n <div class=\"grid-2\">\n <div class=\"div-block-141\">\n <div class=\"_120px-div\">\n <h1 class=\"_1ji-handing\">\n \u25cf \u4f5c\u54c1\u6848\u4f8b WORKS\n <\/h1>\n <\/div>\n <div class=\"w-dyn-item\">\n <div class=\"link-block-10\">\n <div class=\"div-block-15\">\n <img decoding=\"async\" class=\"img-s-6\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6616712f542d96b31c928960_oosaa-work-madjor-\u8fc8\u5219.webp\"\n alt=\"\">\n <\/div>\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-10\">\n <div class=\"div-block-11\">\n <div class=\"heading-7\">Madjor<\/div>\n <div class=\"heading-8\">\u8fc8\u5219<\/div>\n <\/div>\n <div class=\"div-block-16\">\n <div class=\"biaoq\">\n <span>\u54c1\u724c\u7b56\u7565<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u4ea4\u4e92\u4f53\u9a8c<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u54c1\u724c\u521b\u65b0<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"w-dyn-item\">\n <div class=\"link-block-10\">\n <div class=\"div-block-15\">\n <img decoding=\"async\" class=\"img-s-6\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6616710c907909a9749659cc_oosaa-work-Poison-Frog2.webp\"\n alt=\"\">\n <\/div>\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-10\">\n <div class=\"div-block-11\">\n <div class=\"heading-7\">POISON<\/div>\n <div class=\"heading-7\">FROG<\/div>\n <\/div>\n <div class=\"div-block-16\">\n <div class=\"biaoq\">\n <span>\u6c7d\u8f66\u8d8a\u91ce<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u54c1\u724c\u5347\u7ea7<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u4e09\u7ef4\u4ea4\u4e92<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"w-dyn-item\">\n <div class=\"link-block-10\">\n <div class=\"div-block-15\">\n <img decoding=\"async\" class=\"img-s-6\"\n src=\" https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/661670a0b42979030adc46bc_oosaa-work-SD Capital.webp\"\n alt=\"\">\n <\/div>\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-10\">\n <div class=\"div-block-11\">\n <div class=\"heading-7\">SD<\/div>\n <div class=\"heading-7\">CAPITAL<\/div>\n <\/div>\n <div class=\"div-block-16\">\n <div class=\"biaoq\">\n <span>\u5efa\u7b51\u623f\u4ea7<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u6d77\u5916\u6295\u8d44<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u54c1\u724c\u89c6\u89c9<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"block-div-199\">\n <div class=\"w-dyn-item\">\n <div class=\"link-block-10\">\n <div class=\"div-block-15\">\n <img decoding=\"async\" class=\"img-s-6\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6616713c2654ae1210bba2e2_oosaa-work-OOSAA-\u6d53\u7709\u5927\u773c\u89c6\u89c9.webp\"\n alt=\"\">\n <\/div>\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-10\">\n <div class=\"div-block-11\">\n <div class=\"heading-7\">OOSAA<\/div>\n <div class=\"heading-8\">\u6d53\u7709\u5927\u773c\u89c6\u89c9<\/div>\n <\/div>\n <div class=\"div-block-16\">\n <div class=\"biaoq\">\n <span>\u54c1\u724c\u5347\u7ea7<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u89c6\u89c9\u521b\u65b0<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u4ea4\u4e92\u4f53\u9a8c<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"w-dyn-item\">\n <div class=\"link-block-10\">\n <div class=\"div-block-15\">\n <img decoding=\"async\" class=\"img-s-6\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6628cf3f4074eb55131873d4_oosaa-work-kingsta-\u4fb5\u5c18\u6587\u53162.webp\"\n alt=\"\">\n <\/div>\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-10\">\n <div class=\"div-block-11\">\n <div class=\"heading-7\">KINGTA<\/div>\n <div class=\"heading-8\">\u4fb5\u5c18\u6587\u5316<\/div>\n <\/div>\n <div class=\"div-block-16\">\n <div class=\"biaoq\">\n <span>MCN\u673a\u6784<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u8425\u9500\u670d\u52a1<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u89c6\u89c9\u54c1\u724c<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"w-dyn-item\">\n <div class=\"link-block-10\">\n <div class=\"div-block-15\">\n <img decoding=\"async\" class=\"img-s-6\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6628d0fe3d56e32725cb3467_oosaa-work-Broadfar-\u535a\u8fdc.webp\"\n alt=\"\">\n <\/div>\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-10\">\n <div class=\"div-block-11\">\n <div class=\"heading-7\">BROADFAR<\/div>\n <div class=\"heading-8\">\u535a\u9060<\/div>\n <\/div>\n <div class=\"div-block-16\">\n <div class=\"biaoq\">\n <span>\u9999\u70df\u54c1\u724c<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u54c1\u724c\u91cd\u5851<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u4f01\u4e1a\u5347\u7ea7<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n const backgroundVideos = document.querySelectorAll('.link-block-10');\n\n backgroundVideos.forEach((backgroundVideo) => {\n const hoverWrapper = backgroundVideo.querySelector('.icon-wrapper1');\n\n backgroundVideo.addEventListener('mouseenter', (event) => {\n hoverWrapper.style.display = 'flex';\n hoverWrapper.style.opacity = 1;\n });\n\n backgroundVideo.addEventListener('mouseleave', (event) => {\n hoverWrapper.style.display = 'none';\n hoverWrapper.style.opacity = 0;\n });\n\n backgroundVideo.addEventListener('mousemove', (event) => {\n const rect = backgroundVideo.getBoundingClientRect();\n const offsetX = event.clientX - rect.left;\n const offsetY = event.clientY - rect.top;\n\n const iconWidth = hoverWrapper.offsetWidth;\n const iconHeight = hoverWrapper.offsetHeight;\n const translateX = offsetX - iconWidth \/ 2;\n const translateY = offsetY - iconHeight \/ 2;\n\n hoverWrapper.style.transform =\n `translate(${translateX}px, ${translateY}px)`;\n });\n });\n });\n document.addEventListener('DOMContentLoaded', function () {\n const hiddenElement = document.querySelector('.workss');\n \/\/ const hiddenElementxr = document.querySelector('.wp-block-group');\n\n function handleScroll() {\n var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body\n .scrollTop || 0;\n\n console.log(scrollTop);\n if (scrollTop >= 2700 && scrollTop <= 4800) {\n hiddenElement.style.opacity = 1;\n hiddenElement.style.display = 'flex';\n \/\/ const elementsWithClass = document.getElementsByClassName(\"wp-block-group\");\n\n \/\/ for (let i = 0; i < elementsWithClass.length; i++) {\n \/\/ const element = elementsWithClass[i];\n \/\/ console.log(element);\n \/\/ element.style.backgroundColor = \"black\";\n \/\/ }\n\n } else {\n hiddenElement.style.opacity = 0;\n \/\/ hiddenElement.style.display = 'none';\n }\n }\n\n window.addEventListener('scroll', handleScroll);\n });\n\n\n document.addEventListener('wheel', function (event) {\n const scrbottom = document.querySelector('div.block-div-199')\n if (event.deltaY > 0) {\n \/\/ \u5411\u4e0b\u6ed1\u52a8\n scrbottom.style.transform = 'translateY(260px)';\n console.log('\u5411\u4e0b\u6ed1\u52a8');\n } else if (event.deltaY < 0) {\n \/\/ \u5411\u4e0a\u6ed1\u52a8\n console.log('\u5411\u4e0a\u6ed1\u52a8');\n scrbottom.style.transform = 'translateY(0)';\n }\n });\n <\/script>\n<\/body>\n\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n<\/head>\n<style>\n \/* \u9694\u5c422 *\/\n #gc2 {\n width: 100%;\n height: 350px;\n border-bottom: 1px solid;\n \/* background-color: black; *\/\n \/* border-color: white; *\/\n\n }\n<\/style>\n\n<body>\n <div id=\"gc2\">\n\n <\/div>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n const hiddenElement = document.querySelector('.workss');\n \/\/ const hiddenElementxr = document.querySelector('.wp-block-group');\n\n function handleScroll() {\n var scrollTopx = window.pageYOffset || document.documentElement.scrollTop || document.body\n .scrollTop || 0;\n const elementsWithClass = document.getElementsByClassName(\"wp-block-group\");\n const backgroundVideos = document.querySelectorAll('.div-block-10');\n const borcolor = document.querySelectorAll(\".biaoq\")\n const expertise = document.querySelector('.expertise-card-wrapper');\n const div118 = document.querySelectorAll('.div-block-118');\n const gc2 = document.getElementById('gc2');\n const expertisecar = document.querySelectorAll('.expertise-card');\n const heading41 = document.querySelectorAll('.heading-41');\n const heading42 = document.querySelectorAll('.heading-42');\n const textBolock13 = document.querySelectorAll('.text-block-13');\n console.log(expertise);\n \/\/ text-block-13\n if (scrollTopx >= 6000 && scrollTopx < 11000) {\n for (let i = 0; i < elementsWithClass.length; i++) {\n const element = elementsWithClass[i];\n\n element.style.backgroundColor = \"black\";\n element.style.transition = \"all 2s ease\";\n }\n backgroundVideos.forEach((item, index) => {\n\n item.style.color = 'white';\n item.style.transition = \"all 2s ease\";\n })\n borcolor.forEach(value => {\n\n value.style.borderColor = 'white'\n value.style.transition = \"all 2s ease\";\n })\n \/\/ expertise.style.backgroundColor = 'black'\n div118.forEach(i => {\n i.style.color = 'white';\n\n })\n gc2.style.borderColor = '#353535'\n expertisecar.forEach(h => {\n h.style.backgroundColor = \"black\";\n h.style.transition = \"all 1s ease\";\n })\n heading41.forEach(hh => {\n hh.style.color = 'white'\n hh.style.transition = \"all 2s ease\";\n })\n heading42.forEach(h42 => {\n h42.style.color = 'white'\n h42.style.transition = \"all 2s ease\";\n })\n textBolock13.forEach(text13 => {\n text13.style.color = 'white'\n text13.style.transition = \"all 2s ease\";\n })\n } else {\n for (let i = 0; i < elementsWithClass.length; i++) {\n const element = elementsWithClass[i];\n\n element.style.transition = \"all 2s ease\";\n element.style.backgroundColor = \"\";\n }\n backgroundVideos.forEach((item, index) => {\n\n item.style.color = '';\n item.style.transition = \"all 2s ease\";\n })\n borcolor.forEach(value => {\n\n value.style.borderColor = ''\n value.style.transition = \"all 2s ease\";\n })\n \/\/ expertise.style.backgroundColor = '#F5F5F5'\n div118.forEach(i => {\n i.style.color = '';\n\n })\n gc2.style.borderColor = '#d9d9d9'\n \/\/ element.style.backgroundColor = \"#F5F5F5\";\n expertisecar.forEach(h => {\n h.style.backgroundColor = \"#F5F5F5\";\n h.style.transition = \"all 1s ease\";\n })\n \/\/ hiddenElement.style.display = 'none';\n heading41.forEach(hh => {\n hh.style.color = 'black'\n hh.style.transition = \"all 2s ease\";\n })\n heading42.forEach(h42 => {\n h42.style.color = 'black'\n h42.style.transition = \"all 2s ease\";\n })\n textBolock13.forEach(text13 => {\n text13.style.color = 'black'\n text13.style.transition = \"all 2s ease\";\n })\n }\n\n\n\n\n \/\/ if (scrollTopx >= 11000) {\n\n \/\/ for (let i = 0; i < elementsWithClass.length; i++) {\n \/\/ const element = elementsWithClass[i];\n\n \/\/ element.style.backgroundColor = \"#F5F5F5\";\n \/\/ element.style.transition = \"all 2s ease\";\n \/\/ }\n \/\/ expertisecar.forEach(i => {\n \/\/ i.style.backgroundColor = \"#F5F5F5\";\n \/\/ i.style.transition = \"all 2s ease\";\n \/\/ })\n \/\/ } else {\n \/\/ for (let i = 0; i < elementsWithClass.length; i++) {\n \/\/ const element = elementsWithClass[i];\n\n \/\/ element.style.transition = \"all 2s ease\";\n \/\/ element.style.backgroundColor = \"#000\";\n \/\/ }\n \/\/ expertisecar.forEach(i => {\n \/\/ i.style.transition = \"all 2s ease\";\n \/\/ i.style.backgroundColor = \"#000\";\n \/\/ })\n \/\/ }\n }\n\n window.addEventListener('scroll', handleScroll);\n });\n <\/script>\n<\/body>\n\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n<\/head>\n<style>\n \/* \u62bd\u5c49 *\/\n * {\n margin: 0;\n padding: 0;\n }\n\n #chout {\n \/* background-color: rgb(0, 0, 0); *\/\n\n }\n\n .expertise-card-wrapper {\n position: sticky;\n }\n\n .expertise-card-list {\n width: 100%;\n z-index: 3;\n padding-top: 50vh;\n position: -webkit-sticky;\n position: sticky;\n top: 0;\n }\n\n .expertise-card-wrapper {\n margin-top: 64px;\n \/* width: 100%; *\/\n \/* display: flex; *\/\n justify-content: space-between;\n transition: all 1.5s ease;\n position: sticky;\n }\n\n ._1ji-handing {\n \/* color: white; *\/\n text-transform: uppercase;\n white-space: nowrap;\n margin-top: 0;\n margin-bottom: 0;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: 1.2rem;\n font-weight: 400;\n }\n\n .div-block-118 {\n width: 42.625rem;\n transition: all 1.5s ease;\n }\n\n .paragraph-3 {\n \/* color: #fff; *\/\n text-align: justify;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: 1.1rem;\n font-weight: 300;\n line-height: 1.8;\n }\n\n .div-block-121 {\n border-top: 1px solid #353535;\n width: auto;\n }\n\n .text-block-12 {\n color: #fff;\n margin-top: 1.5vh;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: 18px;\n font-weight: 200;\n line-height: 1;\n }\n\n .w-layout-grid {\n align-items: stretch;\n margin-top: 10vh;\n padding-left: 0;\n padding-right: 0;\n overflow: hidden;\n height: 42.6875rem;\n width: 100%;\n justify-content: space-between;\n display: flex;\n align-items: center;\n }\n\n .div-block-111 {\n width: 42.625rem;\n height: 100%;\n flex-direction: column;\n justify-content: space-around;\n display: flex\n }\n\n .div-block-178 {\n width: 42.625rem;\n justify-content: center;\n align-items: center;\n height: 31.25rem;\n display: flex;\n background: #151515;\n border-radius: .5rem;\n }\n\n .div-block-178 img {\n vertical-align: middle;\n max-width: 100%;\n display: inline-block;\n \/* width: 50%; *\/\n }\n\n .heading-41 {\n color: white;\n letter-spacing: -.05vw;\n text-transform: capitalize;\n margin-top: 0;\n margin-bottom: 6px;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: 4vw;\n font-weight: 300;\n line-height: .95;\n }\n\n .heading-42 {\n color: whitesmoke;\n margin-top: 0;\n margin-bottom: 18px;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: 1.4rem;\n font-weight: 400\n }\n\n .text-block-13 {\n color: #8c8c8c;\n text-align: justify;\n font-family: Klarheit Grotesk, sans-serif;\n font-weight: 300;\n\n display: flex;\n width: 85%;\n font-size: 1.1rem;\n line-height: 1.8;\n }\n\n .expertise-card {\n \/* position: sticky;\n top: 0;\n z-index: 1; *\/\n border-radius: 8px;\n width: 100%;\n background-color: black;\n position: relative;\n overflow: hidden;\n }\n\n .is-0st {\n min-height: 35vh;\n top: 72px;\n display: flex;\n }\n\n .is-1st {\n bottom: -69vh;\n }\n\n .hover-wrapper1 {\n z-index: 10;\n \/* justify-content: center;\n align-items: center; *\/\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n top: 0%;\n bottom: 0%;\n left: 0%;\n right: 0%;\n overflow: hidden;\n transition: all 0.5s ease;\n }\n\n .icon-wrapper1 {\n display: flex;\n cursor: pointer;\n background-color: #fff;\n border-radius: 50%;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100px;\n height: 100px;\n padding: 10px;\n\n box-shadow: 0 0 20px 12px rgba(0, 0, 0, .04);\n opacity: 0;\n\n }\n\n .image-28 {\n width: 18%;\n height: auto;\n margin-bottom: 4px;\n margin-left: 2px;\n }\n\n .heading-37 {\n text-transform: uppercase;\n margin-top: 2px;\n margin-bottom: 0;\n font-size: 1rem;\n line-height: 1;\n }\n\n \/* .fixed-at-bottom {\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100%;\n } *\/\n .expertise-card-link {\n \/* background-color: black; *\/\n }\n<\/style>\n\n<body>\n <div id=\"chout\">\n <div class=\"expertise-card-wrapper is-0st\" >\n <div class=\"div-block-118\">\n <div class=\"_1ji-handing\">\u25cf \u6280\u672f\u670d\u52a1 SERVICES<\/div>\n <\/div>\n <div class=\"div-block-118\">\n <p class=\"paragraph-3\">\n \u6211\u4eec\u7684\u670d\u52a1\u6db5\u76d6\u5168\u7403\u6027\u7f51\u7ad9\u8bbe\u8ba1\u548c\u5f00\u53d1\u3001\u9ad8\u7aef\u54c1\u724c\/\u89c6\u89c9\u4ea4\u4e92\/\u5168\u7403\u5916\u8d38\u7f51\u7ad9\u5236\u4f5c\u3001\u89c6\u9891\u540e\u671f\u5236\u4f5c\u3001\u4e09\u7ef4\u5efa\u6a21\u6e32\u67d3\u3001\u8c37\u6b4c\u767e\u5ea6SEO\/SEM\u7b49\u9886\u57df\u3002\u7528\u6211\u4eec\u591a\u5e74\u7684\u4e13\u4e1a\u548c\u6d1e\u5bdf\u529b\u4ee5\u53ca\u591a\u5143\u5316\u7684\u521b\u4f5c\u56e2\u961f\u5305\u62ec\u8bbe\u8ba1\u5f00\u53d1\u987e\u95ee\u3001\u54c1\u724c\u8bbe\u8ba1\u5e08\u3001UI\/UX\u8bbe\u8ba1\u5e08\u3001\u89c6\u9891\u540e\u671f\u4eba\u5458\u3001\u4e09\u7ef4\u5efa\u6a21\u5e08\u3001\u524d\u540e\u7aef\u8f6f\u4ef6\u5f00\u53d1\u4eba\u5458\u7b49\uff0c\u4e3a\u5ba2\u6237\u521b\u9020\u89c6\u89c9\u76db\u5bb4\uff0c\u66f4\u81f4\u529b\u4e8e\u4f01\u4e1a\u7684\u53ef\u6301\u7eed\u53d1\u5c55\uff0c\u8ba9\u60a8\u7684\u54c1\u724c\u5728\u5e02\u573a\u7ade\u4e89\u4e2d\u8131\u9896\u800c\u51fa\u3002\n <\/p>\n <\/div>\n <\/div>\n <div class=\"expertise-card-list\">\n \n <div class=\"expertise-card-wrapper is-1st\" style=\"\">\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <div class=\"expertise-card\">\n <div class=\"expertise-card-link\">\n <div class=\"div-block-121\"><\/div>\n <div class=\"text-block-12\">01.<\/div>\n <\/div>\n <div class=\"w-layout-grid\">\n <div class=\"div-block-111\">\n <h1 class=\"heading-41\">\n Web UI\/UX\n <br>\n Design\n <\/h1>\n <div>\n <h1 class=\"heading-42\">\u7f51\u7ad9UI\/UX\u8bbe\u8ba1<\/h1>\n <div class=\"text-block-13\">\n OOSAA\u4f1a\u4e86\u89e3\u60a8\u54c1\u724c\u7684\u91cd\u8981\u6027\uff0c\u5305\u62ec\u5176\u54c1\u724c\u5e95\u8574\u3001\u53d1\u5c55\u65b9\u5411\u3001\u76ee\u6807\u53d7\u4f17\u3002\u6211\u4eec\u5c06\u8fd9\u4e9b\u5173\u952e\u5143\u7d20\u878d\u5165\u5230\u7f51\u7ad9\u8bbe\u8ba1\u4e2d\uff0c\u4ee5\u786e\u4fdd\u60a8\u7684\u7f51\u7ad9\u4e0e\u54c1\u724c\u5f62\u8c61\u4e00\u81f4\u3002\u59cb\u7ec8\u4ee5\u5168\u5c40\u89c6\u89d2\u6765\u5ba1\u89c6\u9879\u76ee\uff0c\u4ece\u6574\u4f53\u67b6\u6784\u5230\u7528\u6237\u6d41\u7a0b\uff0c\u4e3a\u4f01\u4e1a\u91cd\u65b0\u6784\u5efa\u903b\u8f91\u7ed3\u6784\u3002\u91cd\u65b0\u5851\u9020UI\u754c\u9762\u7684\u5916\u89c2\u548c\u5e03\u5c40\uff0c\u6ce8\u5165\u65b0\u9896\u7684\u89c6\u89c9\u8bbe\u8ba1\uff0c\u540c\u65f6\u5173\u6ce8UX\u4ea4\u4e92\uff0c\u4ee5\u63d0\u4f9b\u5353\u8d8a\u7684\u7528\u6237\u4f53\u9a8c\u3002\u8fd9\u4e00\u7cfb\u5217\u5de5\u4f5c\u4e3a\u60a8\u7684\u54c1\u724c\u6253\u9020\u4e86\u4e00\u4e2a\u5d2d\u65b0\u7684\u7f51\u7ad9\u5f62\u8c61\uff0c\u4e3a\u672a\u6765\u7684\u6210\u529f\u5960\u5b9a\u4e86\u575a\u5b9e\u7684\u57fa\u7840\u3002\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-178\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557f88_Oosaa-Ul-UX Design.png\"\n alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"expertise-card-wrapper \" style=\" margin-top: 10px;\">\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <div class=\"expertise-card\">\n <div class=\"expertise-card-link\">\n <div class=\"div-block-121\"><\/div>\n <div class=\"text-block-12\">02.<\/div>\n <\/div>\n <div class=\"w-layout-grid\">\n <div class=\"div-block-111\">\n <h1 class=\"heading-41\">\n Website\n <br>\n development\n <\/h1>\n <div>\n <h1 class=\"heading-42\">\u7f51\u7ad9\u524d\u540e\u7aef\u4ea4\u4e92\u5f00\u53d1<\/h1>\n <div class=\"text-block-13\">\n OOSAA\u5c06\u8bbe\u8ba1\u65b9\u6848\u8f6c\u53d8\u6210\u53ef\u70b9\u51fb\u64cd\u63a7\u7684\u4ea4\u4e92\u754c\u9762\uff0c\u4ece\u800c\u4f7f\u7528\u6237\u53ef\u4ee5\u8bbf\u95ee\u3002\u5c06\u4f18\u79c0\u7684\u8bbe\u8ba1\u65b9\u6848\u4e0e\u6700\u4f73\u7684\u6280\u672f\u5f00\u53d1\u76f8\u7ed3\u5408\uff0c\u6ce8\u91cd\u7528\u6237\u4f53\u9a8c\uff0c\u901a\u8fc7\u76f4\u89c2\u7684\u903b\u8f91\u3001\u5feb\u901f\u7684\u52a0\u8f7d\u548c\u6781\u4f73\u7684\u754c\u9762\u89c6\u89c9\u4ea4\u4e92\u6765\u786e\u4fdd\u7528\u6237\u7684\u6ee1\u610f\u5ea6\u3002\u642d\u914d\u6613\u4e8e\u7ba1\u7406\u7684CMS\u540e\u53f0\uff0c\u4f7f\u60a8\u80fd\u591f\u8f7b\u677e\u66f4\u65b0\u548c\u7ba1\u7406\u7f51\u7ad9\u5185\u5bb9\uff0c\u6211\u4eec\u4f7f\u7528\u54cd\u5e94\u5f0f\u7684\u5f00\u53d1\uff0c\u9002\u5e94\u5404\u79cd\u8bbe\u5907\u548c\u5c4f\u5e55\u5c3a\u5bf8\uff0c\u786e\u4fdd\u7528\u6237\u5728\u4efb\u4f55\u8bbe\u5907\u4e0a\u90fd\u80fd\u83b7\u5f97\u4e00\u81f4\u7684\u51fa\u8272\u4f53\u9a8c\u3002\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-178\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557f8e_Oosaa-Development.png\"\n alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"expertise-card-wrapper \" style=\" margin-top: 10px;\">\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <div class=\"expertise-card\">\n <div class=\"expertise-card-link\">\n <div class=\"div-block-121\"><\/div>\n <div class=\"text-block-12\">03.<\/div>\n <\/div>\n <div class=\"w-layout-grid\">\n <div class=\"div-block-111\">\n <h1 class=\"heading-41\">\n Video\n <br>\n Dynamic 3D\n <\/h1>\n <div>\n <h1 class=\"heading-42\">\u89c6\u9891\u52a8\u65483D\u5236\u4f5c<\/h1>\n <div class=\"text-block-13\">\n OOSAA\u628a\u89c6\u9891\u52a8\u6548\u548c\u4e09\u7ef4\u6280\u672f\u5de7\u5999\u5730\u878d\u5165\u5230\u7f51\u7ad9\u4e2d\uff0c\u4f7f\u7528\u6237\u66f4\u6709\u5174\u8da3\u63a2\u7d22\u66f4\u591a\u5185\u5bb9\uff0c\u66f4\u5168\u9762\u5730\u4e86\u89e3\u60a8\u7684\u4ea7\u54c1\uff0c\u8fd8\u6709\u52a9\u4e8e\u63d0\u9ad8\u8f6c\u5316\u7387\u3002\u4e09\u7ef4\u6280\u672f\u548c\u52a8\u6548\u4e0d\u4ec5\u4ec5\u7528\u4e8e\u88c5\u70b9\u7f51\u7ad9\uff0c\u8fd8\u53ef\u589e\u5f3a\u7f51\u7ad9\u7684\u4e92\u52a8\u6027\u3002\u6211\u4eec\u53ef\u4ee5\u521b\u5efa\u53ef\u62d6\u52a8\u3001\u53ef\u65cb\u8f6c\u6216\u53ef\u7f29\u653e\u76843D\u56fe\u5f62\uff0c\u8ba9\u7528\u6237\u8eab\u4e34\u5176\u5883\u5730\u63a2\u7d22\u7f51\u7ad9\u5185\u5bb9\u3002\u4e0d\u8bba\u60a8\u7684\u9886\u57df\u662f\u4ec0\u4e48\uff0c\u4e09\u7ef4\u6280\u672f\u548c\u52a8\u6548\u90fd\u4e3a\u60a8\u63d0\u4f9b\u4e86\u4e00\u79cd\u72ec\u7279\u7684\u65b9\u5f0f\u6765\u5438\u5f15\u548c\u7559\u4f4f\u7528\u6237\uff0c\u4f7f\u60a8\u7684\u54c1\u724c\u5728\u7ade\u4e89\u6fc0\u70c8\u7684\u5e02\u573a\u4e2d\u8131\u9896\u800c\u51fa\u3002\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-178\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557f8f_Oosaa-Vision-3D.png\"\n alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"expertise-card-wrapper \" style=\" margin-top: 10px;\">\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <div class=\"expertise-card\">\n <div class=\"expertise-card-link\">\n <div class=\"div-block-121\"><\/div>\n <div class=\"text-block-12\">04.<\/div>\n <\/div>\n <div class=\"w-layout-grid\">\n <div class=\"div-block-111\">\n <h1 class=\"heading-41\">\n SEO\/SEM\n <br>\n Search\n <\/h1>\n <div>\n <h1 class=\"heading-42\">SEO\/SEM\u641c\u7d22\u4f18\u5316<\/h1>\n <div class=\"text-block-13\">\n SEO\u662f\u4e00\u9879\u957f\u671f\u7684\u7b56\u7565\uff0cOOSAA\u901a\u8fc7\u5bf9\u60a8\u7684\u7f51\u7ad9\u8fdb\u884c\u4f18\u5316\uff0c\u76ee\u7684\u662f\u63d0\u5347\u5176\u5728\u81ea\u7136\u641c\u7d22\u7ed3\u679c\u4e2d\u7684\u6392\u540d\u3002\u6211\u4eec\u7684\u65b9\u6cd5\u5305\u62ec\u8bbe\u5b9a\u6070\u5f53\u7684TDK\uff08\u6807\u9898\u3001\u63cf\u8ff0\u3001\u5173\u952e\u8bcd\uff09\u8bdd\u672f\uff0c\u660e\u786e\u5b9a\u4e49\u4e0e\u60a8\u7684\u4e1a\u52a1\u76f8\u5173\uff0c\u4e14\u5728\u641c\u7d22\u4e2d\u5177\u6709\u6f5c\u5728\u4ef7\u503c\u7684\u5173\u952e\u8bcd\u3002\u6b64\u5916\uff0c\u6211\u4eec\u4f18\u5316\u7f51\u7ad9\u7684\u7ed3\u6784\u548c\u5185\u5bb9\uff0c\u4ee5\u786e\u4fdd\u641c\u7d22\u5f15\u64ce\u80fd\u591f\u8f7b\u677e\u7d22\u5f15\u548c\u7406\u89e3\u60a8\u7684\u7ad9\u70b9\u3002\u518d\u642d\u914d\u76f8\u5173\u7684\u6570\u636e\u5206\u6790\u8fdb\u884c\u6539\u8fdb\uff0c\u6709\u52a9\u4e8e\u5438\u5f15\u76ee\u6807\u53d7\u4f17\u5e76\u63d0\u9ad8\u641c\u7d22\u5f15\u64ce\u6392\u540d\u3002\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-178\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557f90_Oosaa-SEO-SEM.png\"\n alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"expertise-card-wrapper \" style=\" margin-top: 10px;\">\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <div class=\"expertise-card\">\n <div class=\"expertise-card-link\">\n <div class=\"div-block-121\"><\/div>\n <div class=\"text-block-12\">05.<\/div>\n <\/div>\n <div class=\"w-layout-grid\">\n <div class=\"div-block-111\">\n <h1 class=\"heading-41\">\n Hosting &\n <br>\n CDN\n <\/h1>\n <div>\n <h1 class=\"heading-42\">\u4e3b\u673a\u670d\u52a1\u5668&CDN\u52a0\u901f<\/h1>\n <div class=\"text-block-13\">\n OOSAA\u901a\u8fc7\u6df1\u5165\u4e86\u89e3\u60a8\u7684\u4e1a\u52a1\u9700\u6c42\u3001\u5ba2\u6237\u7fa4\u4f53\u548c\u4f01\u4e1a\u89c4\u6a21\uff0c\u9009\u62e9\u5408\u9002\u7684\u4e3b\u673a\u7c7b\u578b\uff0c\u57fa\u4e8e\u4e3b\u673a\u548c\u670d\u52a1\u5668\u7684\u6027\u80fd\uff0c\u53ef\u6269\u5c55\u6027\u548c\u7a33\u5b9a\u6027\uff0c\u4ee5\u786e\u4fdd\u5b83\u4eec\u80fd\u591f\u5b8c\u7f8e\u6ee1\u8db3\u60a8\u7684\u9700\u6c42\u3002\u6b64\u5916\uff0c\u901a\u8fc7\u4f18\u5316\u7f51\u7ad9\u4ee3\u7801\u548c\u56fe\u50cf\u6765\u964d\u4f4e\u52a0\u8f7d\u65f6\u95f4\uff0c\u540c\u65f6\u538b\u7f29\u7f51\u9875\u5185\u5bb9\u4ee5\u51cf\u5c11\u5e26\u5bbd\u4f7f\u7528\u3002\u6211\u4eec\u5b9a\u671f\u8fdb\u884c\u6027\u80fd\u6d4b\u8bd5\uff0c\u4ee5\u786e\u4fdd\u4e3b\u673a\u548c\u670d\u52a1\u5668\u7684\u6027\u80fd\u59cb\u7ec8\u7a33\u5b9a\uff0c\u540c\u65f6\u4e0d\u65ad\u4f18\u5316\u4ee5\u4fdd\u6301\u9ad8\u6c34\u51c6\u7684\u6027\u80fd\u3002\u76ee\u6807\u662f\u4e3a\u60a8\u63d0\u4f9b\u9ad8\u6027\u80fd\u3001\u53ef\u9760\u4e14\u5b89\u5168\u7684\u7f51\u7ad9\uff0c\u4ee5\u63d0\u9ad8\u7528\u6237\u4f53\u9a8c\u5e76\u964d\u4f4e\u51fa\u8df3\u7387\u3002\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-178\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557f91_Oosaa-Hosting&CDN.png\"\n alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n const backgroundVideos = document.querySelectorAll('.expertise-card-wrapper');\n\n backgroundVideos.forEach((backgroundVideo) => {\n const hoverWrapper = backgroundVideo.querySelector('.icon-wrapper1');\n\n backgroundVideo.addEventListener('mouseenter', (event) => {\n hoverWrapper.style.display = 'flex';\n hoverWrapper.style.opacity = 1;\n });\n\n backgroundVideo.addEventListener('mouseleave', (event) => {\n hoverWrapper.style.display = 'none';\n hoverWrapper.style.opacity = 0;\n });\n\n backgroundVideo.addEventListener('mousemove', (event) => {\n const rect = backgroundVideo.getBoundingClientRect();\n const offsetX = event.clientX - rect.left;\n const offsetY = event.clientY - rect.top;\n\n const iconWidth = hoverWrapper.offsetWidth;\n const iconHeight = hoverWrapper.offsetHeight;\n const translateX = offsetX - iconWidth \/ 2;\n const translateY = offsetY - iconHeight \/ 2;\n\n hoverWrapper.style.transform =\n `translate(${translateX}px, ${translateY}px)`;\n });\n });\n });\n\n \/\/ window.addEventListener('scroll', function () {\n \/\/ var expertiseCards = Array.from(document.querySelectorAll('.expertise-card-link'))\n \/\/ .reverse(); \/\/ \u9006\u5e8f\u904d\u5386\u5143\u7d20\u6570\u7ec4\n \/\/ var windowHeight = window.innerHeight;\n \/\/ var offset = 35; \/\/ \u63a7\u5236\u53e0\u52a0\u95f4\u8ddd\n\n \/\/ expertiseCards.forEach(function (card, index) {\n \/\/ var rect = card.getBoundingClientRect();\n \/\/ var position = windowHeight - rect.bottom; \/\/ \u8ba1\u7b97\u5143\u7d20\u5e95\u90e8\u5230\u7a97\u53e3\u5e95\u90e8\u7684\u8ddd\u79bb\n\n \/\/ if (position >= 0) {\n \/\/ card.style.position = 'fixed';\n \/\/ card.style.bottom = index * offset + 'px'; \/\/ \u8bbe\u7f6e\u53e0\u52a0\u95f4\u8ddd\n \/\/ card.style.left = '0';\n \/\/ card.style.width = '100%';\n \/\/ } else {\n \/\/ card.style.position = 'static';\n \/\/ }\n \/\/ });\n \/\/ });\n <\/script>\n<\/body>\n\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n<\/head>\n<style>\n \/* \u6700\u65b0\u89c2\u70b9 *\/\n * {\n padding: 0;\n margin: 0;\n }\n\n #zuixgd {}\n\n .home-insights {\n padding-top: 6.25rem;\n box-sizing: border-box;\n }\n\n .swiper-top {\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n margin-top: 20px;\n display: flex;\n overflow: hidden;\n }\n\n ._1ji-handing9 {\n color: #080808;\n text-transform: uppercase;\n white-space: nowrap;\n margin-top: 0;\n margin-bottom: 0;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: 1.2rem;\n font-weight: 400;\n }\n\n .link-block-19 {\n max-width: 100%;\n display: inline-block;\n transition: all 0.5s ease;\n }\n\n .div-block-119 {\n cursor: pointer;\n grid-column-gap: 6px;\n justify-content: space-between;\n display: flex;\n transition: all 0.5s ease;\n }\n\n .link-block-19:hover .text-block-18 {\n transform: translateX(-20px);\n }\n\n .link-block-19:hover .div-block-120 {\n transform: scaleX(1.5);\n\n }\n\n \/* font-weight: normal;\n transform: scale(1.4); *\/\n .text-block-18 {\n color: #080808;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1;\n transition: all 0.5s ease;\n }\n\n .div-block-120 {\n height: 1px;\n margin-top: 6px;\n display: block;\n background-color: #080808;\n transition: all 0.5s ease;\n }\n\n .collection-list-wrapper-5 {\n margin-top: 40px;\n }\n\n .collection-list-4 {\n grid-template-rows: auto;\n grid-template-columns: 1fr 1fr 1fr;\n grid-auto-columns: 1fr;\n display: grid;\n grid-column-gap: 40px;\n grid-row-gap: 40px;\n }\n\n .link-block-18 {\n border-style: solid;\n border-width: 1px .5px;\n border-color: #d9d9d9;\n cursor: pointer;\n width: 100%;\n height: 100%;\n }\n\n .div-block-154 {\n height: 420px;\n overflow: hidden;\n }\n\n .image-41 {\n height: 420px;\n object-fit: cover;\n width: 100%;\n transition: all 0.5s ease;\n }\n\n .div-block-152 {\n flex-direction: column;\n justify-content: space-between;\n padding: 12px 26px 30px;\n display: flex;\n }\n\n .div-block-153 {\n justify-content: space-between;\n align-items: center;\n margin-top: 10px;\n margin-bottom: 30px;\n display: flex;\n }\n\n .hei {\n color: #080808;\n border: .5px solid #000;\n border-radius: 20px;\n justify-content: center;\n align-items: center;\n margin-top: 0;\n margin-bottom: 0;\n padding: 5px 17px;\n font-size: .85rem;\n font-weight: 300;\n display: flex;\n }\n\n .a_8c {\n color: #080808;\n letter-spacing: -.02em;\n text-transform: uppercase;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: 1rem;\n font-weight: 300;\n line-height: 1;\n }\n\n .heading-medium {\n color: #080808;\n margin-top: 10px;\n font-size: 1.2rem;\n line-height: 1.4;\n }\n\n .link-block-18:hover .image-41 {\n transform: scale(1.1);\n }\n\n .colList4{\n transition: all 0.5s ease;\n animation: colList4 2s 1 alternate;\n }\n @keyframes colList4 {\n 0% {\n transform: translateY(70px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n<\/style>\n\n<body>\n <div id=\"zuixgd\">\n <div class=\"_2vw-container\">\n <div class=\"home-insights\">\n <div class=\"swiper-top\">\n <h1 class=\"_1ji-handing9\">\u25cf \u6700\u65b0\u89c2\u70b9 INSIGHTS<\/h1>\n <div class=\"link-block-19\">\n <div class=\"div-block-119\">\n <div class=\"text-block-18\">\n \u5168\u90e8\u89c2\u70b9\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e61535 (1).svg\"\n alt=\"\">\n <\/div>\n <div class=\"div-block-120\"><\/div>\n <\/div>\n <\/div>\n <div class=\"collection-list-wrapper-5\">\n <div class=\"collection-list-4\">\n <div class=\"link-block-18\">\n <div class=\"div-block-154\">\n <img decoding=\"async\" class=\"image-41\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/663864eb43d925dcf6791f9d_Group 1312317034-p-800.jpg\"\n alt=\"\">\n <\/div>\n <div class=\"div-block-152\">\n <div class=\"div-block-153\">\n <h1 class=\"hei\">\u4f5c\u54c1\u89e3\u6790<\/h1>\n <div class=\"a_8c\">2024-05-06<\/div>\n <\/div>\n <h1 class=\"heading-medium\">OOSAA\u56fd\u5185\u5168\u65b0\u5b98\u7f51 oosaa.com.cn \u6b63\u5f0f\u4e0a\u7ebf<\/h1>\n <\/div>\n <\/div>\n <div class=\"link-block-18\">\n <div class=\"div-block-154\">\n <img decoding=\"async\" class=\"image-41\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/654867840d8367779ab124d5_Free_Realistic_Folded_Paper2_Mockup-p-800.webp\"\n alt=\"\">\n <\/div>\n <div class=\"div-block-152\">\n <div class=\"div-block-153\">\n <h1 class=\"hei\">\u5e02\u573a\u6d1e\u5bdf<\/h1>\n <div class=\"a_8c\">2023-11-06<\/div>\n <\/div>\n <h1 class=\"heading-medium\">OOSAA\u6210\u529f\u901a\u8fc7\u4e86Webflow\u7684\u4e13\u5bb6\u8ba4\u8bc1<\/h1>\n <\/div>\n <\/div>\n <div class=\"link-block-18\">\n <div class=\"div-block-154\">\n <img decoding=\"async\" class=\"image-41\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/65488dca846a1c9276cf1f36_oosaa\u7f51\u7ad9\u8bbe\u8ba1\u5f00\u53d1-greenland\u9752\u68ee (1) (1)-p-800.jpg\"\n alt=\"\">\n <\/div>\n <div class=\"div-block-152\">\n <div class=\"div-block-153\">\n <h1 class=\"hei\">\u4f5c\u54c1\u89e3\u6790<\/h1>\n <div class=\"a_8c\">2023.11.5<\/div>\n <\/div>\n <h1 class=\"heading-medium\">Greenland\u9752\u68ee\u9999\u6e2f\u5ba4\u5185\u5de5\u4f5c\u5ba4\u7f51\u7ad9\u5efa\u8bbe<\/h1>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n\n function handleScrollzui() {\n var scrollTopx = window.pageYOffset || document.documentElement.scrollTop || document.body\n .scrollTop || 0;\n const colList4 = document.querySelector('.collection-list-4');\n \n if (scrollTopx >= 10905) {\n colList4.classList.add('colList4')\n } else {\n \n }\n\n }\n\n window.addEventListener('scroll', handleScrollzui);\n });\n <\/script>\n<\/body>\n\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n<\/head>\n<style>\n \/* \u5c3e\u90e8 *\/\n * {\n padding: 0;\n margin: 0;\n }\n\n #weibu {}\n\n .div-block-139 {\n flex-direction: column;\n justify-content: space-between;\n height: 100vh;\n padding-top: 14vh;\n display: flex;\n }\n\n .div-block-22 {\n padding-top: 5rem;\n box-sizing: border-box;\n grid-column-gap: 0px;\n grid-row-gap: 1.5rem;\n grid-template:\n \". .\"\n \"Area Area\"\/ 1fr 1fr;\n grid-auto-columns: 1fr;\n margin-bottom: 140px;\n padding-top: 80px;\n display: grid;\n }\n\n .div-block-24 {\n flex-direction: column;\n justify-content: space-between;\n display: flex;\n }\n\n .heading-378 {\n font-size: 9.5vw;\n -webkit-text-stroke-width: 1px;\n text-transform: uppercase;\n margin-top: 0;\n margin-bottom: 0;\n font-family: Klarheit Grotesk, sans-serif;\n color: #080808;\n font-weight: 500;\n line-height: .9;\n }\n\n .div-block-29 {\n flex-direction: column;\n justify-content: space-between;\n display: flex;\n }\n\n .div-block-28 {\n flex-direction: row;\n justify-content: flex-end;\n padding-left: 0;\n padding-right: 0;\n display: flex;\n }\n\n @media screen and (min-width: 1920px) {\n .image-33 {\n width: 160px;\n }\n }\n\n .div-block-99 {\n justify-content: space-between;\n align-items: center;\n display: flex;\n grid-area: span 1 \/ span 2 \/ span 1 \/ span 2;\n align-self: auto;\n }\n\n .div-block-23 {\n align-items: center;\n display: flex;\n }\n\n .heading-11 {\n -webkit-text-stroke-width: 1px;\n margin-top: 0;\n margin-bottom: 0;\n color: #080808;\n font-size: 2.3rem;\n font-weight: 500;\n }\n\n .image-44 {\n width: 60px;\n }\n\n .div-block-100 {\n align-items: center;\n display: flex;\n }\n\n .link-block-3 {\n max-width: 100%;\n background-color: #080808;\n color: #fff;\n cursor: pointer;\n border-radius: 999px;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n margin-right: 20px;\n padding: 16px 36px;\n text-decoration: none;\n transition: all .3s cubic-bezier(.165, .84, .44, 1);\n display: flex;\n\n }\n\n .heading-13 {\n margin-top: 0;\n margin-bottom: 0;\n \/* font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Oxygen, Fira Sans, Droid Sans, sans-serif; *\/\n font-size: 1.4rem;\n font-weight: 400;\n line-height: 1;\n color: #fff;\n }\n\n .image-32 {\n width: 15px;\n margin-left: 10px;\n }\n\n .link-block-4 {\n cursor: pointer;\n background-color: #fff;\n border-radius: 999px;\n padding: 16px 36px;\n text-decoration: none;\n transition: all .3s linear;\n }\n\n .link-block-4:hover {\n background-color: #64cf80;\n color: #080808;\n }\n\n .div-block-30 {\n grid-column-gap: 16px;\n grid-row-gap: 16px;\n grid-template-rows: auto;\n grid-template-columns: 1fr .75fr .75fr 1fr;\n grid-auto-columns: 1fr;\n justify-content: space-between;\n padding-bottom: 0;\n display: grid;\n }\n\n .div-block-31 {\n display: flex;\n grid-column-gap: 28px;\n grid-row-gap: 20px;\n justify-content: flex-start;\n }\n\n .heading-17 {\n white-space: nowrap;\n align-self: center;\n margin-top: 0;\n margin-bottom: 0;\n margin-right: 20px;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: .95rem;\n font-weight: 200;\n line-height: 1;\n }\n\n .div-block-162 {\n grid-area: span 1 \/ span 1 \/ span 1 \/ span 1;\n align-self: center;\n }\n\n .link-block-7 {\n cursor: pointer;\n text-decoration: none;\n max-width: 100%;\n display: inline-block;\n }\n\n @media screen and (min-width: 1920px) {\n .div-block-31 {\n grid-column-gap: 28px;\n grid-row-gap: 20px;\n justify-content: flex-start;\n }\n }\n\n .link-block-7 {\n align-self: center;\n text-decoration: none;\n }\n\n .w-inline-block {\n max-width: 100%;\n \/* display: inline-block; *\/\n }\n\n .seb {\n cursor: pointer;\n margin-right: 0;\n font-weight: 400;\n }\n\n .div-block-140 {\n border-bottom: 1px solid #000;\n }\n\n .div-block-27.footer {\n \/* margin-top: 0;\n margin-bottom: 0;\n padding-bottom: 0;\n padding-left: 0;\n justify-self: end; *\/\n display: flex;\n justify-content: flex-end;\n cursor: pointer;\n }\n\n .link-block.footer {\n \/* width: 36px; *\/\n padding-bottom: 0;\n margin-left: 12px;\n }\n\n .footer {\n \/* background-color: whitesmoke; *\/\n margin-top: auto;\n\n }\n\n .footer1:hover .image {\n transform: translateY(-10px);\n\n }\n\n .footer2:hover .image {\n transform: translateY(-10px);\n\n }\n\n .footer3:hover .image {\n transform: translateY(-10px);\n\n }\n\n .footer4:hover .image {\n transform: translateY(-10px);\n\n }\n\n .footer5:hover .image {\n transform: translateY(-10px);\n\n }\n\n .image {\n width: 40px;\n display: block;\n transition: all 0.5s ease;\n }\n\n .aa {\n transition: all 0.5s ease;\n animation: pulsex 2s 1 alternate;\n }\n\n @keyframes pulsex {\n 0% {\n transform: translateY(50px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.8;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .axx {\n transition: all 0.5s ease;\n animation: pulsexa 2s 1 alternate;\n }\n\n @keyframes pulsexa {\n 0% {\n transform: translateY(100px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .image33 {\n transition: all 0.5s ease;\n animation: image33 2s 1 alternate;\n }\n\n @keyframes image33 {\n 0% {\n transform: scale(0);\n \/* \u4ece 0 \u5f00\u59cb *\/\n opacity: 0;\n \/* \u900f\u660e\u5ea6\u4e3a 0 *\/\n }\n\n 100% {\n transform: scale(1);\n \/* \u7f29\u653e\u81f3\u539f\u59cb\u5c3a\u5bf8 *\/\n opacity: 1;\n \/* \u5b8c\u5168\u663e\u793a *\/\n }\n }\n\n .divVlock99 {\n transition: all 0.5s ease;\n animation: divVlock99 2s 1 alternate;\n }\n\n @keyframes divVlock99 {\n 0% {\n transform: translateY(70px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n<\/style>\n\n<body>\n <div id=\"weibu\">\n <div class=\"div-block-139\">\n <div class=\"div-block-22\">\n <div class=\"div-block-24\">\n <div class=\"div-block-186\">\n <h1 class=\"heading-378 a\">\n Let's\n <\/h1>\n <h1 class=\"heading-378 xxx\">\n CONNECT.\n <\/h1>\n <\/div>\n <\/div>\n <div class=\"div-block-29\">\n <div class=\"div-block-28\">\n <img decoding=\"async\" class=\"image-33\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/65Group 1403.svg\"\n alt=\"\">\n <\/div>\n <\/div>\n <div class=\"div-block-99\">\n <div class=\"div-block-23\">\n <h1 class=\"heading-11\">\n \u60a8\u6709\u4ec0\u4e48\u60f3\u6cd5\u6216\u8ba1\u5212\u5417? \u8054\u7edc\u6211\u4eec\u5427\uff01\n <\/h1>\n <img decoding=\"async\" class=\"image-44\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/83d394557f72_Group 1586 (3).svg\"\n alt=\"\">\n <\/div>\n <div class=\"div-block-100\">\n <div class=\"link-block-3\">\n <h3 class=\"heading-13\">Contact \u8054\u7cfb<\/h3>\n <img decoding=\"async\" class=\"image-32\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6524557f15_Group 1531.svg\"\n alt=\"\">\n <\/div>\n <div class=\"link-block-4\">\n <h3 class=\"heading-13\" style=\"color: #080808;\">+86 18606500398<\/h3>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-30\" style=\"margin-bottom: 38px;\">\n <div class=\"div-block-31\">\n <h1 class=\"heading-17\">OOSAA.\u6d53\u7709\u5927\u773c\u89c6\u89c9\u539f\u521b\u7248\u6743\u6240\u6709 \u76d7\u7528\u5fc5\u7a76 \u00a92024<\/h1>\n <\/div>\n <div class=\"div-block-162\">\n <div class=\"link-block-7\">\n <h1 class=\"heading-17\">\u6d59ICP\u59072021040397\u53f7<\/h1>\n <\/div>\n <\/div>\n <div class=\"div-block-31\">\n <div class=\"link-block-7 w-inline-block\">\n <h1 class=\"heading-17 seb\">\u9996\u9875<\/h1>\n <div class=\"div-block-140\"><\/div>\n <\/div>\n <div class=\"link-block-7 w-inline-block\">\n <h1 class=\"heading-17 seb\">\u5e38\u89c1\u95ee\u9898<\/h1>\n <div class=\"div-block-140\"><\/div>\n <\/div>\n <div class=\"link-block-7 w-inline-block\">\n <h1 class=\"heading-17 seb\">\u670d\u52a1\u6d41\u7a0b<\/h1>\n <div class=\"div-block-140\"><\/div>\n <\/div>\n <div class=\"link-block-7 w-inline-block\">\n <h1 class=\"heading-17 seb\">\u52a0\u5165\u6211\u4eec<\/h1>\n <div class=\"div-block-140\"><\/div>\n <\/div>\n <div class=\"link-block-7 w-inline-block\">\n <h1 class=\"heading-17 seb\">SEB\u6a21\u677f<\/h1>\n <div class=\"div-block-140\"><\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-27 footer\" style=\"text-align: right;\">\n <div class=\"link-block footer footer1\">\n <img decoding=\"async\" class=\"image\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/weix557eb5_Group 1453.svg\"\n alt=\"\">\n <\/div>\n <div class=\"link-block footer footer2\">\n <img decoding=\"async\" class=\"image\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/douy57eb6_Group 1488.svg\"\n alt=\"\">\n <\/div>\n <div class=\"link-block footer footer3\">\n <img decoding=\"async\" class=\"image\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/65xiaohs557eb7_Group 1456.svg\"\n alt=\"\">\n <\/div>\n <div class=\"link-block footer footer4\">\n <img decoding=\"async\" class=\"image\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6be662e83d394557eb8_Group 1487.svg\"\n alt=\"\">\n <\/div>\n <div class=\"link-block footer footer5\">\n <img decoding=\"async\" class=\"image\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/abd394557eb1_Group 1457.svg\"\n alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n\n function handleScrollx() {\n var scrollTopx = window.pageYOffset || document.documentElement.scrollTop || document.body\n .scrollTop || 0;\n const x = document.querySelector('.xxx');\n const a = document.querySelector('.a');\n const image33 = document.querySelector('.image-33');\n const divVlock99 = document.querySelector('.div-block-99');\n const div118 = document.querySelectorAll('.div-block-118');\n const gc2 = document.getElementById('gc2');\n if (scrollTopx >= 11755 && scrollTopx < 11905) {\n a.classList.add('aa');\n image33.classList.add('image33')\n } else if (scrollTopx >= 11905 && scrollTopx < 12050) {\n x.classList.add('axx');\n } else if (scrollTopx >= 12050 && scrollTopx < 12150) {\n divVlock99.classList.add('divVlock99');\n } else if (scrollTopx > 12150) {\n a.classList.add('aa');\n image33.classList.add('image33')\n x.classList.add('axx');\n divVlock99.classList.add('divVlock99');\n }\n\n }\n\n window.addEventListener('scroll', handleScrollx);\n });\n <\/script>\n<\/body>\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Document CREATIVE INTERACTION ANIMATION OOSAA\u4e3a\u54c1\u724c\u5168\u7403\u5316 \u63d0\u4f9b\u5168 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-21","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/new.yantootech.com\/index.php\/wp-json\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/new.yantootech.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/new.yantootech.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/new.yantootech.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/new.yantootech.com\/index.php\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":273,"href":"https:\/\/new.yantootech.com\/index.php\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":317,"href":"https:\/\/new.yantootech.com\/index.php\/wp-json\/wp\/v2\/pages\/21\/revisions\/317"}],"wp:attachment":[{"href":"https:\/\/new.yantootech.com\/index.php\/wp-json\/wp\/v2\/media?parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":21,"date":"2024-05-21T14:24:27","date_gmt":"2024-05-21T06:24:27","guid":{"rendered":"http:\/\/new.yantootech.com\/?page_id=21"},"modified":"2024-05-31T10:22:06","modified_gmt":"2024-05-31T02:22:06","slug":"oosaa","status":"publish","type":"page","link":"https:\/\/new.yantootech.com\/","title":{"rendered":"home"},"content":{"rendered":"\n\n\n\n\n \n \n Document<\/title>\n <style>\n * {\n padding: 0;\n margin: 0;\n }\n\n #app {\n \/* padding: 0 4.75rem;\n box-sizing: border-box; *\/\n }\n\n \/* \u5bfc\u822a *\/\n .daohan {\n width: 100%;\n height: 4.375rem;\n display: flex;\n justify-content: space-between;\n padding: 0 4.75rem;\n box-sizing: border-box;\n align-items: center;\n position: fixed;\n \/* \u8ba9\u5bfc\u822a\u56fa\u5b9a\u5728\u9876\u90e8 *\/\n top: 0;\n \/* \u5c06\u5bfc\u822a\u680f\u5b9a\u4f4d\u5230\u9876\u90e8 *\/\n background-color: white;\n \/* \u8bbe\u7f6e\u80cc\u666f\u989c\u8272\u4e3a\u767d\u8272 *\/\n z-index: 1000;\n \/* \u786e\u4fdd\u5bfc\u822a\u680f\u5728\u5176\u4ed6\u5185\u5bb9\u4e0a\u65b9 *\/\n \/* box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); \u6dfb\u52a0\u9634\u5f71\u6548\u679c *\/\n }\n\n .dh-a {}\n\n .img-a {\n width: 9.375rem;\n height: 2.5rem;\n }\n\n .dh-b {\n width: 37.5rem;\n font-size: 1rem;\n font-weight: 600;\n display: flex;\n justify-content: space-between;\n }\n\n \/* \u4e3b\u98981 *\/\n .div-block-80 {\n width: 100%;\n \/* padding: 0 4.75rem; *\/\n box-sizing: border-box;\n flex-direction: column;\n align-items: flex-end;\n display: flex\n }\n\n .div-block-81 {\n \/* margin-top: 180px; *\/\n margin-bottom: 6px;\n display: flex;\n }\n\n .div-block-82 {\n grid-column-gap: 8px;\n justify-content: space-between;\n margin-bottom: 6px;\n display: flex;\n }\n\n .block-170 {\n padding-bottom: 5px;\n\n }\n\n .image-48 {\n width: 10vw;\n height: 100%;\n }\n\n .heading {\n font-size: 8.5vw;\n font-weight: 500;\n line-height: .8;\n }\n\n .div-block-4 {\n \/* padding: 0 4.75rem; *\/\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n margin: 2.5rem 0;\n }\n\n .heading-2 {\n font-size: 1.8rem;\n -webkit-text-stroke-width: .5px;\n font-weight: 500;\n line-height: 1.3;\n margin-top: 0;\n margin-bottom: 0;\n }\n\n .image-29 {\n align-self: flex-start;\n height: 7vw;\n }\n\n .h11 {\n transition: all 0.5s ease;\n animation: pulse 2s 1 alternate;\n }\n\n @keyframes pulse {\n 0% {\n transform: translateY(50px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.8;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .h22 {\n transition: all 0.5s ease;\n animation: axx 2s 1 alternate;\n \/* animation-delay: 0.5s; *\/\n }\n\n @keyframes axx {\n 0% {\n transform: translateY(60px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .h33 {\n transition: all 0.5s ease;\n animation: ass 2s 1 alternate;\n \/* animation-delay: 0.5s; *\/\n }\n\n @keyframes ass {\n 0% {\n transform: translateY(70px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .h44 {\n transition: all 0.5s ease;\n animation: arr 2s 1 alternate;\n \/* animation-delay: 0.5s; *\/\n }\n\n @keyframes arr {\n 0% {\n transform: translateY(70px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .h55 {\n transition: all 0.5s ease;\n animation: aa 2s 1 alternate;\n \/* animation-delay: 0.5s; *\/\n }\n\n @keyframes aa {\n 0% {\n transform: scale(0);\n \/* \u4ece 0 \u5f00\u59cb *\/\n opacity: 0;\n \/* \u900f\u660e\u5ea6\u4e3a 0 *\/\n }\n\n 100% {\n transform: scale(1);\n \/* \u7f29\u653e\u81f3\u539f\u59cb\u5c3a\u5bf8 *\/\n opacity: 1;\n \/* \u5b8c\u5168\u663e\u793a *\/\n }\n }\n <\/style>\n\n\n<\/head>\n\n<body>\n <div id=\"app\">\n \n \n <div class=\"div-block-80\">\n <div class=\"div-block-81\">\n <h1 class=\"heading h11\" style=\"letter-spacing: -.2vw; -webkit-text-stroke-width: 3px;\">CREATIVE<\/h1>\n <\/div>\n <div class=\"div-block-82 h22\">\n <h1 class=\"heading \" style=\"letter-spacing: -.2vw; -webkit-text-stroke-width: 3px;\">INTERACT<span\n class=\"text-span-2\" style=\"color: #64cf80;\">IO<\/span>N<\/h1>\n <div class=\"block-170 h33\">\n <img decoding=\"async\" class=\"image-48\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652f6db9ae3c0fa4244227b5_oosaa-homes_00000_iSpt.png\"\n alt=\"\">\n <\/div>\n <\/div>\n <div class=\"div-block-83\">\n <h1 class=\"heading h33\" style=\"letter-spacing: -.2vw; -webkit-text-stroke-width: 3px;\">ANIMATION<\/h1>\n <\/div>\n <\/div>\n <div class=\"div-block-4\">\n <div class=\"\">\n <h1 class=\"heading-2 h44\">\n OOSAA\u4e3a\u54c1\u724c\u5168\u7403\u5316\n <br>\n \u63d0\u4f9b\u5168\u65b9\u4f4d\u7f51\u7ad9\u8bbe\u8ba1\u4e0e\u5f00\u53d1\u670d\u52a1\n <br>\n \u5e2e\u52a9\u4f01\u4e1a\u91cd\u65b0\u5236\u5b9a\u7b56\u7565, \u5efa\u7acb\u89c6\u89c9\u5f62\u8c61\n <br>\n \u8ba9\u54c1\u724c\u5728\u5e02\u573a\u4e2d\u8131\u9896\u800c\u51fa\n <\/h1>\n <\/div>\n <div class=\"block-5\">\n <img decoding=\"async\" class=\"image-29 h55\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/65Group 1403.svg\" alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n<\/body>\n<script>\n\n<\/script>\n\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n<\/head>\n<style>\n \/* \u89c6\u9891 *\/\n * {\n padding: 0;\n margin: 0;\n }\n\n .background-video {\n cursor: pointer;\n \/* width: 100%; *\/\n \/* height: 100vh; *\/\n \/* display: flex;\n justify-content: center; *\/\n \/* position: relative; *\/\n }\n\n .div-block-92 {\n \/* width: 100%;\n height: 100%; *\/\n margin-top: 9vh;\n transition: all 2s ease;\n position: relative;\n }\n\n\n\n .image-27 {\n width: 18%;\n height: auto;\n margin-bottom: 4px;\n margin-left: 2px;\n }\n\n .heading-36 {\n text-transform: uppercase;\n margin-top: 2px;\n margin-bottom: 0;\n font-size: 1rem;\n line-height: 1;\n }\n\n .hover-wrapper1 {\n z-index: 10;\n \/* justify-content: center;\n align-items: center; *\/\n \/* width: 100%;\n height: 100%; *\/\n display: flex;\n position: absolute;\n top: 0%;\n bottom: 0%;\n left: 0%;\n right: 0%;\n overflow: hidden;\n transition: all 0.5s ease;\n }\n\n .icon-wrapper1 {\n z-index: 10;\n display: flex;\n cursor: pointer;\n background-color: #fff;\n border-radius: 50%;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100px;\n height: 100px;\n padding: 10px;\n transition: all 0.5s ease;\n box-shadow: 0 0 20px 12px rgba(0, 0, 0, .04);\n opacity: 0;\n\n }\n\n .image-28 {\n width: 18%;\n height: auto;\n margin-bottom: 4px;\n margin-left: 2px;\n }\n\n .heading-37 {\n text-transform: uppercase;\n margin-top: 2px;\n margin-bottom: 0;\n font-size: 1rem;\n line-height: 1;\n }\n<\/style>\n\n<body>\n <div id=\"appv\">\n <div class=\"div-block-92\">\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <div class=\"background-video\" data-autoplay=\"true\" data-loop=\"true\" data-wf-ignore=\"true\">\n <video class=\"video-block\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557ef8_6\u670827\u65e5_1_1-transcode.mp4\"\n style=\"object-fit: cover; width: 100%; height: auto;\" autoplay loop muted playsinline\n data-wf-ignore=\"true\" data-object-fit=\"cover\">\n <source\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557ef8_6\u670827\u65e5_1_1-transcode.mp4\"\n data-wf-ignore=\"true\">\n <source\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557ef8_6\u670827\u65e5_1_1-transcode.webm\"\n data-wf-ignore=\"true\">\n <\/video>\n <\/div>\n\n <\/div>\n <\/div>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n \/\/ \u83b7\u53d6\u9700\u8981\u64cd\u4f5c\u7684\u5143\u7d20\n const backgroundVideo = document.querySelector('.div-block-92');\n const hoverWrapper = document.querySelector('.icon-wrapper1');\n\n \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u5165\u4e8b\u4ef6\u76d1\u542c\u5668\n backgroundVideo.addEventListener('mouseenter', (event) => {\n \/\/ \u5f53\u9f20\u6807\u79fb\u5165 .background-video \u65f6\uff0c\u663e\u793a .hover-wrapper\n hoverWrapper.style.display = 'flex';\n hoverWrapper.style.opacity = 1\n });\n\n\n \/\/ \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6\u76d1\u542c\u5668\n backgroundVideo.addEventListener('mouseleave', (event) => {\n \/\/ \u5f53\u9f20\u6807\u79fb\u51fa .background-video \u65f6\uff0c\u9690\u85cf .hover-wrapper\n hoverWrapper.style.display = 'none';\n hoverWrapper.style.opacity = 0\n });\n\n\n \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u52a8\u4e8b\u4ef6\u76d1\u542c\u5668\n backgroundVideo.addEventListener('mousemove', (event) => {\n \/\/ \u6839\u636e\u9f20\u6807\u4f4d\u7f6e\u66f4\u65b0 .hover-wrapper \u7684\u4f4d\u7f6e\n const rect = backgroundVideo.getBoundingClientRect();\n const offsetX = event.clientX - rect.left;\n const offsetY = event.clientY - rect.top;\n\n \/\/ \u8c03\u6574\u56fe\u6807\u4f4d\u7f6e\uff0c\u4f7f\u5176\u4ee5\u9f20\u6807\u4e3a\u4e2d\u5fc3\n const iconWidth = hoverWrapper.offsetWidth;\n const iconHeight = hoverWrapper.offsetHeight;\n const translateX = offsetX - iconWidth \/ 2;\n const translateY = offsetY - iconHeight \/ 2;\n\n hoverWrapper.style.transform = `translate(${translateX}px, ${translateY}px)`;\n\n });\n });\n\n document.addEventListener('wheel', function (event) {\n \/\/ \u6355\u83b7\u6eda\u8f6e\u4e8b\u4ef6\n event.preventDefault(); \/\/ \u963b\u6b62\u9ed8\u8ba4\u6eda\u52a8\u884c\u4e3a\n\n \/\/ \u53ef\u4ee5\u901a\u8fc7 event.deltaY \u83b7\u53d6\u6eda\u52a8\u7684\u8ddd\u79bb\n \/\/ \u5c06\u6eda\u8f6e\u901f\u5ea6\u51cf\u6162\u5230\u539f\u6765\u7684\u4e00\u534a\n const slowerDeltaY = event.deltaY * 0.5;\n\n \/\/ \u5728\u8fd9\u91cc\u53ef\u4ee5\u5c06\u8c03\u6574\u540e\u7684\u6eda\u52a8\u8ddd\u79bb\u5e94\u7528\u5230\u9875\u9762\u6eda\u52a8\u4e2d\n \/\/ \u901a\u8fc7 window.scrollBy \u65b9\u6cd5\u5b9e\u73b0\u81ea\u5b9a\u4e49\u7684\u6eda\u52a8\u6548\u679c\n window.scrollBy(0, slowerDeltaY);\n }, {\n passive: false\n });\n <\/script>\n<\/body>\n\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n<\/head>\n<style>\n \/* \u5173\u4e8e\u6211\u4eec *\/\n * {\n padding: 0;\n margin: 0;\n }\n\n #app {\n margin-top: 15.1875rem;\n }\n\n .div-block-6 {\n width: 100%;\n height: 41.6875rem;\n display: flex;\n }\n\n .heading-36 {\n color: #080808;\n margin-top: 0;\n margin-bottom: 0;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: 1.2rem;\n font-weight: 400;\n }\n\n .div-block-77 {\n width: 36.4375rem;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n }\n\n .div-block-184 {\n grid-column-gap: 16px;\n grid-row-gap: 14px;\n grid-template-rows: auto auto auto auto;\n grid-template-columns: 1fr;\n grid-auto-columns: 1fr;\n display: grid;\n align-items: stretch;\n align-content: stretch;\n }\n\n .douy,\n .xiaohs,\n .be,\n .zcool {\n cursor: pointer;\n }\n\n .div-block-117 {\n width: 54.625rem;\n\n }\n\n .heading-3 {\n -webkit-text-stroke-width: .5px;\n width: 100%;\n font-size: 1.8rem;\n font-weight: 400;\n line-height: 1.6;\n }\n\n .box1,\n .box2,\n .box3,\n .box4 {\n padding-top: 36px;\n position: relative;\n cursor: pointer;\n height: 70px;\n border-bottom: 1px #d9d9d9 solid;\n }\n\n .w-inline-block {\n max-width: 100%;\n \/* display: inline-block; *\/\n }\n\n .text-block-4 {\n color: #000;\n font-size: 1rem;\n line-height: 1;\n position: absolute;\n top: 41px;\n }\n\n .div-block-7 {\n \/* height: 70px; *\/\n margin-left: 26px;\n display: flex;\n justify-content: space-between;\n }\n\n .heading-4 {\n font-size: 1.5rem;\n font-weight: 400;\n }\n\n .box1:hover {\n border-color: #000;\n }\n\n .box1:hover .text-block-4 {\n transform: translateX(30px);\n \/* \u6587\u5b57\u5411\u53f3\u5e73\u79fb20px *\/\n }\n\n .box1:hover .heading-4 {\n transform: translateX(30px);\n }\n\n .box1:hover .div-block-7 img {\n transform: translateX(-30px);\n \/* \u56fe\u7247\u5411\u5de6\u5e73\u79fb20px *\/\n }\n\n .box2:hover {\n border-color: #000;\n }\n\n .box2:hover .text-block-4 {\n transform: translateX(30px);\n \/* \u6587\u5b57\u5411\u53f3\u5e73\u79fb20px *\/\n }\n\n .box2:hover .heading-4 {\n transform: translateX(30px);\n }\n\n .box2:hover .div-block-7 img {\n transform: translateX(-30px);\n \/* \u56fe\u7247\u5411\u5de6\u5e73\u79fb20px *\/\n }\n\n .box3:hover {\n border-color: #000;\n }\n\n .box3:hover .text-block-4 {\n transform: translateX(30px);\n \/* \u6587\u5b57\u5411\u53f3\u5e73\u79fb20px *\/\n }\n\n .box3:hover .heading-4 {\n transform: translateX(30px);\n }\n\n .box3:hover .div-block-7 img {\n transform: translateX(-30px);\n \/* \u56fe\u7247\u5411\u5de6\u5e73\u79fb20px *\/\n }\n\n .box4:hover {\n border-color: #000;\n }\n\n .box4:hover .text-block-4 {\n transform: translateX(30px);\n \/* \u6587\u5b57\u5411\u53f3\u5e73\u79fb20px *\/\n }\n\n .box4:hover .heading-4 {\n transform: translateX(30px);\n }\n\n .box4:hover .div-block-7 img {\n transform: translateX(-30px);\n \/* \u56fe\u7247\u5411\u5de6\u5e73\u79fb20px *\/\n }\n\n .box1,\n .box2,\n .box3,\n .box4,\n .heading-4,\n .text-block-4,\n .div-block-7,\n img {\n transition: all 0.5s ease;\n \/* \u6dfb\u52a0\u8fc7\u6e21\u6548\u679c *\/\n }\n\n .image-3,\n .image-4,\n .image-5,\n .image-6 {\n z-index: 4;\n width: 28.125rem;\n position: absolute;\n bottom: -100%;\n left: auto;\n right: 25%;\n opacity: 0;\n display: none;\n\n transform: translate3d(-0.008%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);\n }\n\n .img-0 {\n transition: all 0.5s ease;\n }\n\n .douy img:hover {\n transform: translateX(10px);\n }\n\n .xiaohs img:hover {\n transform: translateX(10px);\n }\n\n .be img:hover {\n transform: translateX(10px);\n }\n\n .zcool img:hover {\n transform: translateX(10px);\n }\n\n .gyuwm2 {\n transition: all 0.5s ease;\n animation: gyuwm2 2s 1 alternate;\n }\n\n @keyframes gyuwm2 {\n 0% {\n transform: translateY(50px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .eadingx2 {\n transition: all 0.5s ease;\n animation: eadingx2 2s 1 alternate;\n }\n\n @keyframes eadingx2 {\n 0% {\n transform: translateY(50px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .pxdiv12 {\n transition: all 0.5s ease;\n animation: pxdiv12 2s 1 alternate;\n }\n\n @keyframes pxdiv12 {\n 0% {\n transform: translateY(50px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .box1-1 {\n transition: all 0.5s ease;\n animation: box1-1 2s 1 alternate;\n }\n\n @keyframes box1-1 {\n 0% {\n transform: translateY(50px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .box2-2 {\n transition: all 0.5s ease;\n animation: box2-2 2s 1 alternate;\n }\n\n @keyframes box2-2 {\n 0% {\n transform: translateY(50px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .douy1 {\n transition: all 0.5s ease;\n animation: douy1 2s 1 alternate;\n }\n\n @keyframes douy1 {\n 0% {\n transform: translateY(50px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .box3-3,\n .xiaohs1,\n .box4-4,\n .be1,\n .zcool1 {\n transition: all 0.5s ease;\n animation: box3-3 2s 1 alternate;\n }\n\n @keyframes box3-3 {\n 0% {\n transform: translateY(50px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n<\/style>\n\n<body>\n <div id=\"app\">\n <div class=\"div-block-6\">\n <div class=\"div-block-77\">\n <div class=\"gyuwm\">\n <h2 class=\"heading-36\">\u25cf \u5173\u4e8e\u6211\u4eec ABOUT US<\/h2>\n <\/div>\n <div class=\"div-block-184\">\n <div class=\"douy\">\n <img decoding=\"async\" style=\"width: 2.5rem;\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6536246a17ca225f10e83db6_Group 1610.svg\"\n alt=\"\">\n <\/div>\n <div class=\"xiaohs\">\n <img decoding=\"async\" style=\"width: 2.5rem;\"\n src=\" https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6536246a2cf7056045a1336e_Group 1611.svg\"\n alt=\"\">\n <\/div>\n <div class=\"be\">\n <img decoding=\"async\" style=\"width: 2.5rem;\"\n src=\" https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6536246abca93c89bc0d6a02_Group 1612.svg\"\n alt=\"\">\n <\/div>\n <div class=\"zcool\">\n <img decoding=\"async\" style=\"width: 2.5rem;\"\n src=\" https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6536246ad6ca1fc34328e782_Group 1613.svg\"\n alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-117\">\n <h1 class=\"heading-3 eadingx\">\n <span class=\"text-span-7\" style=\"text-decoration: underline;\">OOSAA.<\/span>\n \u662f\u4e13\u6ce8\u9ad8\u7aef\u7f51\u7ad9\u8bbe\u8ba1\u4e0e\u5f00\u53d1\u7684\u521b\u610f\u5de5\u4f5c\u5ba4\uff0c\u6211\u4eec\u4e3a\u54c1\u724c\u91cd\u65b0\u5b9a\u4e49\u89c6\u89c9\u4e0e\u4ea4\u4e92\uff0c\u591a\u89d2\u5ea6\u6d1e\u5bdf\u54c1\u724c\u7684\u521b\u65b0\u6027\uff0c\u5e76\u5c06\u4f18\u79c0\u7684\u8bbe\u8ba1\u7406\u5ff5\u4e0e\u7edd\u4f73\u7684\u7528\u6237\u4f53\u9a8c\u76f8\u7ed3\u5408\uff0c\u4e3a\u4f01\u4e1a\u63d0\u4f9b\u4ece\u54c1\u724c\u903b\u8f91\u7b56\u7565\u8425\u9500\u5230\u89c6\u89c9\u8bbe\u8ba1\u52a8\u6548\u5f00\u53d1\u7684\u5168\u65b9\u4f4d\u7f51\u7ad9\u5b9a\u5236\u670d\u52a1\u3002\n <\/h1>\n <div class=\"_32px-div_1\" style=\"height: 3.125rem;\"><\/div>\n <div class=\"d9-1px-div pxdiv1\" style=\"height: .0625rem; background-color: #d9d9d9;\"><\/div>\n <div class=\"box1 w-inline-block\">\n <div class=\"text-block-4\">01<\/div>\n <div class=\"div-block-7\">\n <h1 class=\"heading-4\">\u54c1\u724c\u5206\u6790\u6d1e\u5bdf<\/h1>\n <img decoding=\"async\" style=\"width: 1.125rem;\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/328e782_Group 1613.svg\"\n alt=\"\">\n <\/div>\n <img decoding=\"async\" class=\"image-3 img-0\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557f93_oosaa-home4-p-500.webp\"\n alt=\"\">\n <\/div>\n \n <div class=\"box2 w-inline-block\">\n <div class=\"text-block-4\">02<\/div>\n <div class=\"div-block-7\">\n <h1 class=\"heading-4\">\u8bbe\u8ba1\u89c6\u89c9\u521b\u610f<\/h1>\n <img decoding=\"async\" style=\"width: 1.125rem;\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/328e782_Group 1613.svg\"\n alt=\"\">\n <\/div>\n <img decoding=\"async\" class=\"image-4 img-0\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557f96_oosaa-home2-p-500.webp\"\n alt=\"\">\n <\/div>\n \n <div class=\"box3 w-inline-block\">\n <div class=\"text-block-4\">03<\/div>\n <div class=\"div-block-7\">\n <h1 class=\"heading-4\">\u5f00\u53d1\u4ea4\u4e92\u4f53\u9a8c<\/h1>\n <img decoding=\"async\" style=\"width: 1.125rem;\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/328e782_Group 1613.svg\"\n alt=\"\">\n <\/div>\n <img decoding=\"async\" class=\"image-5 img-0\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557f95_oosaa-home3-p-500.webp\"\n alt=\"\">\n <\/div>\n \n <div class=\"box4 w-inline-block\">\n <div class=\"text-block-4\">04<\/div>\n <div class=\"div-block-7\">\n <h1 class=\"heading-4\">\u6301\u7eed\u4f18\u5316\u7ef4\u62a4<\/h1>\n <img decoding=\"async\" style=\"width: 1.125rem;\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/328e782_Group 1613.svg\"\n alt=\"\">\n <\/div>\n <img decoding=\"async\" class=\"image-6 img-0\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557f94_oosaa-home1-p-500.webp\"\n alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n const box1 = document.querySelector('.box1');\n const img3 = document.querySelector('.image-3');\n \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u5165\u4e8b\u4ef6\u76d1\u542c\u5668\n box1.addEventListener('mouseenter', (event) => {\n \/\/ \u5f53\u9f20\u6807\u79fb\u5165 .background-video \u65f6\uff0c\u663e\u793a .hover-wrapper\n img3.style.display = 'block';\n img3.style.opacity = 1\n\n });\n \/\/ \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6\u76d1\u542c\u5668\n box1.addEventListener('mouseleave', (event) => {\n \/\/ \u5f53\u9f20\u6807\u79fb\u51fa .background-video \u65f6\uff0c\u9690\u85cf .hover-wrapper\n img3.style.display = 'none';\n img3.style.opacity = 0\n img3.style.transform = `translate(0, 0)`;\n\n });\n box1.addEventListener('mousemove', (event) => {\n \/\/ \u6839\u636e\u9f20\u6807\u4f4d\u7f6e\u66f4\u65b0 .hover-wrapper \u7684\u4f4d\u7f6e\n const rect = box1.getBoundingClientRect();\n const offsetX = event.clientX - rect.left;\n const offsetY = event.clientY - rect.top;\n\n \/\/ \u8c03\u6574\u56fe\u6807\u4f4d\u7f6e\uff0c\u4f7f\u5176\u4ee5\u9f20\u6807\u4e3a\u4e2d\u5fc3\n const iconWidth = img3.offsetWidth;\n const iconHeight = img3.offsetHeight;\n const translateX = offsetX - iconWidth;\n console.log(translateX);\n if (translateX > 300) {\n img3.style.transform = `translate(${translateX - 100}px)`;\n\n } else if (translateX < 300) {\n img3.style.transform = `translate(${translateX + 100}px)`;\n } else {\n img3.style.transform = `translate(${translateX}px)`;\n }\n\n });\n \/\/ ----------------------------------------------------\n const box2 = document.querySelector('.box2');\n const img4 = document.querySelector('.image-4');\n \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u5165\u4e8b\u4ef6\u76d1\u542c\u5668\n box2.addEventListener('mouseenter', (event) => {\n \/\/ \u5f53\u9f20\u6807\u79fb\u5165 .background-video \u65f6\uff0c\u663e\u793a .hover-wrapper\n img4.style.display = 'block';\n img4.style.opacity = 1\n\n });\n \/\/ \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6\u76d1\u542c\u5668\n box2.addEventListener('mouseleave', (event) => {\n \/\/ \u5f53\u9f20\u6807\u79fb\u51fa .background-video \u65f6\uff0c\u9690\u85cf .hover-wrapper\n img4.style.display = 'none';\n img4.style.opacity = 0\n img4.style.transform = `translate(0, 0)`;\n\n });\n box2.addEventListener('mousemove', (event) => {\n \/\/ \u6839\u636e\u9f20\u6807\u4f4d\u7f6e\u66f4\u65b0 .hover-wrapper \u7684\u4f4d\u7f6e\n const rect = box2.getBoundingClientRect();\n const offsetX = event.clientX - rect.left;\n const offsetY = event.clientY - rect.top;\n\n \/\/ \u8c03\u6574\u56fe\u6807\u4f4d\u7f6e\uff0c\u4f7f\u5176\u4ee5\u9f20\u6807\u4e3a\u4e2d\u5fc3\n const iconWidth = img4.offsetWidth;\n const iconHeight = img4.offsetHeight;\n const translateX = offsetX - iconWidth;\n console.log(translateX);\n if (translateX > 300) {\n img4.style.transform = `translate(${translateX - 100}px)`;\n\n } else if (translateX < 300) {\n img4.style.transform = `translate(${translateX + 100}px)`;\n } else {\n img4.style.transform = `translate(${translateX}px)`;\n }\n\n });\n \/\/ ----------------------------------------------------\n const box3 = document.querySelector('.box3');\n const img5 = document.querySelector('.image-5');\n \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u5165\u4e8b\u4ef6\u76d1\u542c\u5668\n box3.addEventListener('mouseenter', (event) => {\n \/\/ \u5f53\u9f20\u6807\u79fb\u5165 .background-video \u65f6\uff0c\u663e\u793a .hover-wrapper\n img5.style.display = 'block';\n img5.style.opacity = 1\n\n });\n \/\/ \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6\u76d1\u542c\u5668\n box3.addEventListener('mouseleave', (event) => {\n \/\/ \u5f53\u9f20\u6807\u79fb\u51fa .background-video \u65f6\uff0c\u9690\u85cf .hover-wrapper\n img5.style.display = 'none';\n img5.style.opacity = 0\n img5.style.transform = `translate(0, 0)`;\n\n });\n box3.addEventListener('mousemove', (event) => {\n \/\/ \u6839\u636e\u9f20\u6807\u4f4d\u7f6e\u66f4\u65b0 .hover-wrapper \u7684\u4f4d\u7f6e\n const rect = box3.getBoundingClientRect();\n const offsetX = event.clientX - rect.left;\n const offsetY = event.clientY - rect.top;\n\n \/\/ \u8c03\u6574\u56fe\u6807\u4f4d\u7f6e\uff0c\u4f7f\u5176\u4ee5\u9f20\u6807\u4e3a\u4e2d\u5fc3\n const iconWidth = img5.offsetWidth;\n const iconHeight = img5.offsetHeight;\n const translateX = offsetX - iconWidth;\n console.log(translateX);\n if (translateX > 300) {\n img5.style.transform = `translate(${translateX - 100}px)`;\n\n } else if (translateX < 300) {\n img5.style.transform = `translate(${translateX + 100}px)`;\n } else {\n img5.style.transform = `translate(${translateX}px)`;\n }\n\n });\n \/\/ ----------------------------------------------------\n const box4 = document.querySelector('.box4');\n const img6 = document.querySelector('.image-6');\n \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u5165\u4e8b\u4ef6\u76d1\u542c\u5668\n box4.addEventListener('mouseenter', (event) => {\n \/\/ \u5f53\u9f20\u6807\u79fb\u5165 .background-video \u65f6\uff0c\u663e\u793a .hover-wrapper\n img6.style.display = 'block';\n img6.style.opacity = 1\n\n });\n \/\/ \/\/ \u6dfb\u52a0\u9f20\u6807\u79fb\u51fa\u4e8b\u4ef6\u76d1\u542c\u5668\n box4.addEventListener('mouseleave', (event) => {\n \/\/ \u5f53\u9f20\u6807\u79fb\u51fa .background-video \u65f6\uff0c\u9690\u85cf .hover-wrapper\n img6.style.display = 'none';\n img6.style.opacity = 0\n img6.style.transform = `translate(0, 0)`;\n\n });\n box4.addEventListener('mousemove', (event) => {\n \/\/ \u6839\u636e\u9f20\u6807\u4f4d\u7f6e\u66f4\u65b0 .hover-wrapper \u7684\u4f4d\u7f6e\n const rect = box4.getBoundingClientRect();\n const offsetX = event.clientX - rect.left;\n const offsetY = event.clientY - rect.top;\n\n \/\/ \u8c03\u6574\u56fe\u6807\u4f4d\u7f6e\uff0c\u4f7f\u5176\u4ee5\u9f20\u6807\u4e3a\u4e2d\u5fc3\n const iconWidth = img6.offsetWidth;\n const iconHeight = img6.offsetHeight;\n const translateX = offsetX - iconWidth;\n console.log(translateX);\n if (translateX > 300) {\n img6.style.transform = `translate(${translateX - 100}px)`;\n\n } else if (translateX < 300) {\n img6.style.transform = `translate(${translateX + 100}px)`;\n } else {\n img6.style.transform = `translate(${translateX}px)`;\n }\n\n });\n });\n\n document.addEventListener('DOMContentLoaded', function () {\n\n function handleScrolx() {\n var scrollTopx = window.pageYOffset || document.documentElement.scrollTop || document.body\n .scrollTop || 0;\n const gyuwm = document.querySelector('.gyuwm');\n const eadingx = document.querySelector('.eadingx');\n const pxdiv1 = document.querySelector('.pxdiv1');\n const box1 = document.querySelector('.box1');\n const box2 = document.querySelector('.box2');\n const douy = document.querySelector('.douy');\n const box3 = document.querySelector('.box3');\n const xiaohs = document.querySelector('.xiaohs');\n const box4 = document.querySelector('.box4');\n const be = document.querySelector('.be');\n const zcool = document.querySelector('.zcool');\n if (scrollTopx >= 1109 && scrollTopx < 1300) {\n gyuwm.classList.add('gyuwm2');\n eadingx.classList.add('eadingx2');\n } else if (scrollTopx >= 1306 && scrollTopx < 1400) {\n pxdiv1.classList.add('pxdiv12');\n } else if (scrollTopx >= 1400 && scrollTopx < 1500) {\n box1.classList.add('box1-1')\n } else if (scrollTopx > 1500 && scrollTopx < 1600) {\n box2.classList.add('box2-2')\n douy.classList.add('douy1')\n } else if (scrollTopx > 1600 && scrollTopx < 1700) {\n box3.classList.add('box3-3')\n xiaohs.classList.add('xiaohs1')\n } else if (scrollTopx > 1700 && scrollTopx < 1750) {\n box4.classList.add('box4-4')\n be.classList.add('be1')\n } else if (scrollTopx > 1750 && scrollTopx < 1800) {\n zcool.classList.add('zcool1')\n } else if (scrollTopx > 1800) {\n gyuwm.classList.add('gyuwm2');\n eadingx.classList.add('eadingx2');\n pxdiv1.classList.add('pxdiv12');\n box1.classList.add('box1-1')\n box2.classList.add('box2-2')\n douy.classList.add('douy1')\n box3.classList.add('box3-3')\n xiaohs.classList.add('xiaohs1')\n box4.classList.add('box4-4')\n be.classList.add('be1')\n zcool.classList.add('zcool1')\n }\n\n }\n\n window.addEventListener('scroll', handleScrolx);\n });\n <\/script>\n<\/body>\n\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n<\/head>\n<style>\n *{\n padding: 0;\n margin: 0;\n }\n #appk{\n width: 100%;\n height: 25rem;\n }\n<\/style>\n<body>\n <div id=\"appk\">\n\n <\/div>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n<\/head>\n\n<style>\n @media screen and (min-width: 700px) and (max-width: 800px) {\n .wp-block-group {\n background-color: black;\n }\n }\n\n * {\n padding: 0;\n margin: 0;\n }\n\n .heading-5 {\n z-index: -1;\n color: #c45252;\n text-align: center;\n font-weight: 500;\n will-change: opacity;\n opacity: 0.6;\n margin-top: -10vh;\n font-size: 22rem;\n position: sticky;\n top: 24%;\n }\n\n ._1ji-handing {\n text-transform: uppercase;\n white-space: nowrap;\n margin-top: 0;\n margin-bottom: 0;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: 1.2rem;\n font-weight: 400;\n }\n\n .workss {\n z-index: -3;\n display: none;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n height: 100vh;\n \/* \u4f7f\u7528\u89c6\u53e3\u9ad8\u5ea6\u4f5c\u4e3a\u9ad8\u5ea6 *\/\n position: fixed;\n \/* \u4f7f\u7528\u56fa\u5b9a\u5b9a\u4f4d\uff0c\u8ba9\u76d2\u5b50\u59cb\u7ec8\u5c45\u4e2d *\/\n top: 0;\n \/* \u4e0e\u4e0a\u8fb9\u754c\u5bf9\u9f50 *\/\n left: 0;\n \/* \u4e0e\u5de6\u8fb9\u754c\u5bf9\u9f50 *\/\n opacity: 0;\n transition: all 0.5s ease;\n }\n\n .grid-2 {\n display: flex;\n justify-content: space-between;\n\n }\n\n .div-block-141 {\n grid-row-gap: 14vh;\n flex-direction: column;\n display: flex;\n transition: all 0.5s ease;\n }\n\n .w-dyn-item {\n width: 42.625rem;\n \/* height: 51.375rem; *\/\n }\n\n .link-block-10 {\n width: 100%;\n \/* height: 100%; *\/\n background-color: #EEEEF0;\n padding: 2.375rem 3.125rem;\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n }\n\n .link-block-10:hover .img-s-6 {\n transform: scale(0.95);\n \/* \u56fe\u7247\u7f29\u5c0f\u81f3\u539f\u59cb\u5c3a\u5bf8\u768490% *\/\n }\n\n .img-s-6 {\n width: 100%;\n height: 100%;\n transition: transform 0.7s ease;\n }\n\n .div-block-15 {\n margin-top: 1.2vw;\n margin-bottom: 1.2vw;\n }\n\n .div-block-10 {\n display: flex;\n justify-content: space-between;\n margin-top: 15px;\n align-items: center;\n }\n\n .div-block-11 {\n display: flex;\n }\n\n .heading-7 {\n text-transform: uppercase;\n white-space: nowrap;\n margin-top: 0;\n margin-bottom: 0;\n margin-right: 6px;\n font-size: 1.4rem;\n font-weight: 500;\n line-height: 1;\n }\n\n .heading-8 {\n -webkit-text-stroke-width: .5px;\n white-space: nowrap;\n margin-top: 0;\n margin-bottom: 0;\n padding-top: .5px;\n font-size: 1.25rem;\n font-weight: 500;\n line-height: 1;\n }\n\n .div-block-16 {\n display: flex;\n align-items: center;\n }\n\n .biaoq {\n border: .5px solid #080808;\n background-color: rgba(255, 255, 255, 0);\n margin-left: 6px;\n margin-right: 0;\n padding: 6px 15px 6.5px;\n border-radius: 999px;\n box-sizing: border-box;\n }\n\n .hover-wrapper1 {\n z-index: 10;\n \/* justify-content: center;\n align-items: center; *\/\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n top: 0%;\n bottom: 0%;\n left: 0%;\n right: 0%;\n overflow: hidden;\n transition: all 0.5s ease;\n }\n\n .icon-wrapper1 {\n display: flex;\n cursor: pointer;\n background-color: #fff;\n border-radius: 50%;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100px;\n height: 100px;\n padding: 10px;\n\n box-shadow: 0 0 20px 12px rgba(0, 0, 0, .04);\n opacity: 0;\n\n }\n\n .image-28 {\n width: 18%;\n height: auto;\n margin-bottom: 4px;\n margin-left: 2px;\n }\n\n .heading-37 {\n text-transform: uppercase;\n margin-top: 2px;\n margin-bottom: 0;\n font-size: 1rem;\n line-height: 1;\n }\n\n .block-div-199 {\n grid-row-gap: 14vh;\n flex-direction: column;\n display: flex;\n transition: all 2s ease;\n }\n<\/style>\n\n<body>\n <div id=\"appkp\">\n <div class=\"workss\">\n <h1 class=\"heading-5\" style=\"color: #fff;\">WORKS<\/h1>\n <\/div>\n <div class=\"grid-2\">\n <div class=\"div-block-141\">\n <div class=\"_120px-div\">\n <h1 class=\"_1ji-handing\">\n \u25cf \u4f5c\u54c1\u6848\u4f8b WORKS\n <\/h1>\n <\/div>\n <div class=\"w-dyn-item\">\n <div class=\"link-block-10\">\n <div class=\"div-block-15\">\n <img decoding=\"async\" class=\"img-s-6\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6616712f542d96b31c928960_oosaa-work-madjor-\u8fc8\u5219.webp\"\n alt=\"\">\n <\/div>\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-10\">\n <div class=\"div-block-11\">\n <div class=\"heading-7\">Madjor<\/div>\n <div class=\"heading-8\">\u8fc8\u5219<\/div>\n <\/div>\n <div class=\"div-block-16\">\n <div class=\"biaoq\">\n <span>\u54c1\u724c\u7b56\u7565<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u4ea4\u4e92\u4f53\u9a8c<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u54c1\u724c\u521b\u65b0<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"w-dyn-item\">\n <div class=\"link-block-10\">\n <div class=\"div-block-15\">\n <img decoding=\"async\" class=\"img-s-6\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6616710c907909a9749659cc_oosaa-work-Poison-Frog2.webp\"\n alt=\"\">\n <\/div>\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-10\">\n <div class=\"div-block-11\">\n <div class=\"heading-7\">POISON<\/div>\n <div class=\"heading-7\">FROG<\/div>\n <\/div>\n <div class=\"div-block-16\">\n <div class=\"biaoq\">\n <span>\u6c7d\u8f66\u8d8a\u91ce<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u54c1\u724c\u5347\u7ea7<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u4e09\u7ef4\u4ea4\u4e92<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"w-dyn-item\">\n <div class=\"link-block-10\">\n <div class=\"div-block-15\">\n <img decoding=\"async\" class=\"img-s-6\"\n src=\" https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/661670a0b42979030adc46bc_oosaa-work-SD Capital.webp\"\n alt=\"\">\n <\/div>\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-10\">\n <div class=\"div-block-11\">\n <div class=\"heading-7\">SD<\/div>\n <div class=\"heading-7\">CAPITAL<\/div>\n <\/div>\n <div class=\"div-block-16\">\n <div class=\"biaoq\">\n <span>\u5efa\u7b51\u623f\u4ea7<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u6d77\u5916\u6295\u8d44<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u54c1\u724c\u89c6\u89c9<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"block-div-199\">\n <div class=\"w-dyn-item\">\n <div class=\"link-block-10\">\n <div class=\"div-block-15\">\n <img decoding=\"async\" class=\"img-s-6\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6616713c2654ae1210bba2e2_oosaa-work-OOSAA-\u6d53\u7709\u5927\u773c\u89c6\u89c9.webp\"\n alt=\"\">\n <\/div>\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-10\">\n <div class=\"div-block-11\">\n <div class=\"heading-7\">OOSAA<\/div>\n <div class=\"heading-8\">\u6d53\u7709\u5927\u773c\u89c6\u89c9<\/div>\n <\/div>\n <div class=\"div-block-16\">\n <div class=\"biaoq\">\n <span>\u54c1\u724c\u5347\u7ea7<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u89c6\u89c9\u521b\u65b0<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u4ea4\u4e92\u4f53\u9a8c<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"w-dyn-item\">\n <div class=\"link-block-10\">\n <div class=\"div-block-15\">\n <img decoding=\"async\" class=\"img-s-6\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6628cf3f4074eb55131873d4_oosaa-work-kingsta-\u4fb5\u5c18\u6587\u53162.webp\"\n alt=\"\">\n <\/div>\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-10\">\n <div class=\"div-block-11\">\n <div class=\"heading-7\">KINGTA<\/div>\n <div class=\"heading-8\">\u4fb5\u5c18\u6587\u5316<\/div>\n <\/div>\n <div class=\"div-block-16\">\n <div class=\"biaoq\">\n <span>MCN\u673a\u6784<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u8425\u9500\u670d\u52a1<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u89c6\u89c9\u54c1\u724c<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"w-dyn-item\">\n <div class=\"link-block-10\">\n <div class=\"div-block-15\">\n <img decoding=\"async\" class=\"img-s-6\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6628d0fe3d56e32725cb3467_oosaa-work-Broadfar-\u535a\u8fdc.webp\"\n alt=\"\">\n <\/div>\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-10\">\n <div class=\"div-block-11\">\n <div class=\"heading-7\">BROADFAR<\/div>\n <div class=\"heading-8\">\u535a\u9060<\/div>\n <\/div>\n <div class=\"div-block-16\">\n <div class=\"biaoq\">\n <span>\u9999\u70df\u54c1\u724c<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u54c1\u724c\u91cd\u5851<\/span>\n <\/div>\n <div class=\"biaoq\">\n <span>\u4f01\u4e1a\u5347\u7ea7<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n const backgroundVideos = document.querySelectorAll('.link-block-10');\n\n backgroundVideos.forEach((backgroundVideo) => {\n const hoverWrapper = backgroundVideo.querySelector('.icon-wrapper1');\n\n backgroundVideo.addEventListener('mouseenter', (event) => {\n hoverWrapper.style.display = 'flex';\n hoverWrapper.style.opacity = 1;\n });\n\n backgroundVideo.addEventListener('mouseleave', (event) => {\n hoverWrapper.style.display = 'none';\n hoverWrapper.style.opacity = 0;\n });\n\n backgroundVideo.addEventListener('mousemove', (event) => {\n const rect = backgroundVideo.getBoundingClientRect();\n const offsetX = event.clientX - rect.left;\n const offsetY = event.clientY - rect.top;\n\n const iconWidth = hoverWrapper.offsetWidth;\n const iconHeight = hoverWrapper.offsetHeight;\n const translateX = offsetX - iconWidth \/ 2;\n const translateY = offsetY - iconHeight \/ 2;\n\n hoverWrapper.style.transform =\n `translate(${translateX}px, ${translateY}px)`;\n });\n });\n });\n document.addEventListener('DOMContentLoaded', function () {\n const hiddenElement = document.querySelector('.workss');\n \/\/ const hiddenElementxr = document.querySelector('.wp-block-group');\n\n function handleScroll() {\n var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body\n .scrollTop || 0;\n\n console.log(scrollTop);\n if (scrollTop >= 2700 && scrollTop <= 4800) {\n hiddenElement.style.opacity = 1;\n hiddenElement.style.display = 'flex';\n \/\/ const elementsWithClass = document.getElementsByClassName(\"wp-block-group\");\n\n \/\/ for (let i = 0; i < elementsWithClass.length; i++) {\n \/\/ const element = elementsWithClass[i];\n \/\/ console.log(element);\n \/\/ element.style.backgroundColor = \"black\";\n \/\/ }\n\n } else {\n hiddenElement.style.opacity = 0;\n \/\/ hiddenElement.style.display = 'none';\n }\n }\n\n window.addEventListener('scroll', handleScroll);\n });\n\n\n document.addEventListener('wheel', function (event) {\n const scrbottom = document.querySelector('div.block-div-199')\n if (event.deltaY > 0) {\n \/\/ \u5411\u4e0b\u6ed1\u52a8\n scrbottom.style.transform = 'translateY(260px)';\n console.log('\u5411\u4e0b\u6ed1\u52a8');\n } else if (event.deltaY < 0) {\n \/\/ \u5411\u4e0a\u6ed1\u52a8\n console.log('\u5411\u4e0a\u6ed1\u52a8');\n scrbottom.style.transform = 'translateY(0)';\n }\n });\n <\/script>\n<\/body>\n\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n<\/head>\n<style>\n \/* \u9694\u5c422 *\/\n #gc2 {\n width: 100%;\n height: 350px;\n border-bottom: 1px solid;\n \/* background-color: black; *\/\n \/* border-color: white; *\/\n\n }\n<\/style>\n\n<body>\n <div id=\"gc2\">\n\n <\/div>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n const hiddenElement = document.querySelector('.workss');\n \/\/ const hiddenElementxr = document.querySelector('.wp-block-group');\n\n function handleScroll() {\n var scrollTopx = window.pageYOffset || document.documentElement.scrollTop || document.body\n .scrollTop || 0;\n const elementsWithClass = document.getElementsByClassName(\"wp-block-group\");\n const backgroundVideos = document.querySelectorAll('.div-block-10');\n const borcolor = document.querySelectorAll(\".biaoq\")\n const expertise = document.querySelector('.expertise-card-wrapper');\n const div118 = document.querySelectorAll('.div-block-118');\n const gc2 = document.getElementById('gc2');\n const expertisecar = document.querySelectorAll('.expertise-card');\n const heading41 = document.querySelectorAll('.heading-41');\n const heading42 = document.querySelectorAll('.heading-42');\n const textBolock13 = document.querySelectorAll('.text-block-13');\n console.log(expertise);\n \/\/ text-block-13\n if (scrollTopx >= 6000 && scrollTopx < 11000) {\n for (let i = 0; i < elementsWithClass.length; i++) {\n const element = elementsWithClass[i];\n\n element.style.backgroundColor = \"black\";\n element.style.transition = \"all 2s ease\";\n }\n backgroundVideos.forEach((item, index) => {\n\n item.style.color = 'white';\n item.style.transition = \"all 2s ease\";\n })\n borcolor.forEach(value => {\n\n value.style.borderColor = 'white'\n value.style.transition = \"all 2s ease\";\n })\n \/\/ expertise.style.backgroundColor = 'black'\n div118.forEach(i => {\n i.style.color = 'white';\n\n })\n gc2.style.borderColor = '#353535'\n expertisecar.forEach(h => {\n h.style.backgroundColor = \"black\";\n h.style.transition = \"all 1s ease\";\n })\n heading41.forEach(hh => {\n hh.style.color = 'white'\n hh.style.transition = \"all 2s ease\";\n })\n heading42.forEach(h42 => {\n h42.style.color = 'white'\n h42.style.transition = \"all 2s ease\";\n })\n textBolock13.forEach(text13 => {\n text13.style.color = 'white'\n text13.style.transition = \"all 2s ease\";\n })\n } else {\n for (let i = 0; i < elementsWithClass.length; i++) {\n const element = elementsWithClass[i];\n\n element.style.transition = \"all 2s ease\";\n element.style.backgroundColor = \"\";\n }\n backgroundVideos.forEach((item, index) => {\n\n item.style.color = '';\n item.style.transition = \"all 2s ease\";\n })\n borcolor.forEach(value => {\n\n value.style.borderColor = ''\n value.style.transition = \"all 2s ease\";\n })\n \/\/ expertise.style.backgroundColor = '#F5F5F5'\n div118.forEach(i => {\n i.style.color = '';\n\n })\n gc2.style.borderColor = '#d9d9d9'\n \/\/ element.style.backgroundColor = \"#F5F5F5\";\n expertisecar.forEach(h => {\n h.style.backgroundColor = \"#F5F5F5\";\n h.style.transition = \"all 1s ease\";\n })\n \/\/ hiddenElement.style.display = 'none';\n heading41.forEach(hh => {\n hh.style.color = 'black'\n hh.style.transition = \"all 2s ease\";\n })\n heading42.forEach(h42 => {\n h42.style.color = 'black'\n h42.style.transition = \"all 2s ease\";\n })\n textBolock13.forEach(text13 => {\n text13.style.color = 'black'\n text13.style.transition = \"all 2s ease\";\n })\n }\n\n\n\n\n \/\/ if (scrollTopx >= 11000) {\n\n \/\/ for (let i = 0; i < elementsWithClass.length; i++) {\n \/\/ const element = elementsWithClass[i];\n\n \/\/ element.style.backgroundColor = \"#F5F5F5\";\n \/\/ element.style.transition = \"all 2s ease\";\n \/\/ }\n \/\/ expertisecar.forEach(i => {\n \/\/ i.style.backgroundColor = \"#F5F5F5\";\n \/\/ i.style.transition = \"all 2s ease\";\n \/\/ })\n \/\/ } else {\n \/\/ for (let i = 0; i < elementsWithClass.length; i++) {\n \/\/ const element = elementsWithClass[i];\n\n \/\/ element.style.transition = \"all 2s ease\";\n \/\/ element.style.backgroundColor = \"#000\";\n \/\/ }\n \/\/ expertisecar.forEach(i => {\n \/\/ i.style.transition = \"all 2s ease\";\n \/\/ i.style.backgroundColor = \"#000\";\n \/\/ })\n \/\/ }\n }\n\n window.addEventListener('scroll', handleScroll);\n });\n <\/script>\n<\/body>\n\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n<\/head>\n<style>\n \/* \u62bd\u5c49 *\/\n * {\n margin: 0;\n padding: 0;\n }\n\n #chout {\n \/* background-color: rgb(0, 0, 0); *\/\n\n }\n\n .expertise-card-wrapper {\n position: sticky;\n }\n\n .expertise-card-list {\n width: 100%;\n z-index: 3;\n padding-top: 50vh;\n position: -webkit-sticky;\n position: sticky;\n top: 0;\n }\n\n .expertise-card-wrapper {\n margin-top: 64px;\n \/* width: 100%; *\/\n \/* display: flex; *\/\n justify-content: space-between;\n transition: all 1.5s ease;\n position: sticky;\n }\n\n ._1ji-handing {\n \/* color: white; *\/\n text-transform: uppercase;\n white-space: nowrap;\n margin-top: 0;\n margin-bottom: 0;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: 1.2rem;\n font-weight: 400;\n }\n\n .div-block-118 {\n width: 42.625rem;\n transition: all 1.5s ease;\n }\n\n .paragraph-3 {\n \/* color: #fff; *\/\n text-align: justify;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: 1.1rem;\n font-weight: 300;\n line-height: 1.8;\n }\n\n .div-block-121 {\n border-top: 1px solid #353535;\n width: auto;\n }\n\n .text-block-12 {\n color: #fff;\n margin-top: 1.5vh;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: 18px;\n font-weight: 200;\n line-height: 1;\n }\n\n .w-layout-grid {\n align-items: stretch;\n margin-top: 10vh;\n padding-left: 0;\n padding-right: 0;\n overflow: hidden;\n height: 42.6875rem;\n width: 100%;\n justify-content: space-between;\n display: flex;\n align-items: center;\n }\n\n .div-block-111 {\n width: 42.625rem;\n height: 100%;\n flex-direction: column;\n justify-content: space-around;\n display: flex\n }\n\n .div-block-178 {\n width: 42.625rem;\n justify-content: center;\n align-items: center;\n height: 31.25rem;\n display: flex;\n background: #151515;\n border-radius: .5rem;\n }\n\n .div-block-178 img {\n vertical-align: middle;\n max-width: 100%;\n display: inline-block;\n \/* width: 50%; *\/\n }\n\n .heading-41 {\n color: white;\n letter-spacing: -.05vw;\n text-transform: capitalize;\n margin-top: 0;\n margin-bottom: 6px;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: 4vw;\n font-weight: 300;\n line-height: .95;\n }\n\n .heading-42 {\n color: whitesmoke;\n margin-top: 0;\n margin-bottom: 18px;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: 1.4rem;\n font-weight: 400\n }\n\n .text-block-13 {\n color: #8c8c8c;\n text-align: justify;\n font-family: Klarheit Grotesk, sans-serif;\n font-weight: 300;\n\n display: flex;\n width: 85%;\n font-size: 1.1rem;\n line-height: 1.8;\n }\n\n .expertise-card {\n \/* position: sticky;\n top: 0;\n z-index: 1; *\/\n border-radius: 8px;\n width: 100%;\n background-color: black;\n position: relative;\n overflow: hidden;\n }\n\n .is-0st {\n min-height: 35vh;\n top: 72px;\n display: flex;\n }\n\n .is-1st {\n bottom: -69vh;\n }\n\n .hover-wrapper1 {\n z-index: 10;\n \/* justify-content: center;\n align-items: center; *\/\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n top: 0%;\n bottom: 0%;\n left: 0%;\n right: 0%;\n overflow: hidden;\n transition: all 0.5s ease;\n }\n\n .icon-wrapper1 {\n display: flex;\n cursor: pointer;\n background-color: #fff;\n border-radius: 50%;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100px;\n height: 100px;\n padding: 10px;\n\n box-shadow: 0 0 20px 12px rgba(0, 0, 0, .04);\n opacity: 0;\n\n }\n\n .image-28 {\n width: 18%;\n height: auto;\n margin-bottom: 4px;\n margin-left: 2px;\n }\n\n .heading-37 {\n text-transform: uppercase;\n margin-top: 2px;\n margin-bottom: 0;\n font-size: 1rem;\n line-height: 1;\n }\n\n \/* .fixed-at-bottom {\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100%;\n } *\/\n .expertise-card-link {\n \/* background-color: black; *\/\n }\n<\/style>\n\n<body>\n <div id=\"chout\">\n <div class=\"expertise-card-wrapper is-0st\" >\n <div class=\"div-block-118\">\n <div class=\"_1ji-handing\">\u25cf \u6280\u672f\u670d\u52a1 SERVICES<\/div>\n <\/div>\n <div class=\"div-block-118\">\n <p class=\"paragraph-3\">\n \u6211\u4eec\u7684\u670d\u52a1\u6db5\u76d6\u5168\u7403\u6027\u7f51\u7ad9\u8bbe\u8ba1\u548c\u5f00\u53d1\u3001\u9ad8\u7aef\u54c1\u724c\/\u89c6\u89c9\u4ea4\u4e92\/\u5168\u7403\u5916\u8d38\u7f51\u7ad9\u5236\u4f5c\u3001\u89c6\u9891\u540e\u671f\u5236\u4f5c\u3001\u4e09\u7ef4\u5efa\u6a21\u6e32\u67d3\u3001\u8c37\u6b4c\u767e\u5ea6SEO\/SEM\u7b49\u9886\u57df\u3002\u7528\u6211\u4eec\u591a\u5e74\u7684\u4e13\u4e1a\u548c\u6d1e\u5bdf\u529b\u4ee5\u53ca\u591a\u5143\u5316\u7684\u521b\u4f5c\u56e2\u961f\u5305\u62ec\u8bbe\u8ba1\u5f00\u53d1\u987e\u95ee\u3001\u54c1\u724c\u8bbe\u8ba1\u5e08\u3001UI\/UX\u8bbe\u8ba1\u5e08\u3001\u89c6\u9891\u540e\u671f\u4eba\u5458\u3001\u4e09\u7ef4\u5efa\u6a21\u5e08\u3001\u524d\u540e\u7aef\u8f6f\u4ef6\u5f00\u53d1\u4eba\u5458\u7b49\uff0c\u4e3a\u5ba2\u6237\u521b\u9020\u89c6\u89c9\u76db\u5bb4\uff0c\u66f4\u81f4\u529b\u4e8e\u4f01\u4e1a\u7684\u53ef\u6301\u7eed\u53d1\u5c55\uff0c\u8ba9\u60a8\u7684\u54c1\u724c\u5728\u5e02\u573a\u7ade\u4e89\u4e2d\u8131\u9896\u800c\u51fa\u3002\n <\/p>\n <\/div>\n <\/div>\n <div class=\"expertise-card-list\">\n \n <div class=\"expertise-card-wrapper is-1st\" style=\"\">\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <div class=\"expertise-card\">\n <div class=\"expertise-card-link\">\n <div class=\"div-block-121\"><\/div>\n <div class=\"text-block-12\">01.<\/div>\n <\/div>\n <div class=\"w-layout-grid\">\n <div class=\"div-block-111\">\n <h1 class=\"heading-41\">\n Web UI\/UX\n <br>\n Design\n <\/h1>\n <div>\n <h1 class=\"heading-42\">\u7f51\u7ad9UI\/UX\u8bbe\u8ba1<\/h1>\n <div class=\"text-block-13\">\n OOSAA\u4f1a\u4e86\u89e3\u60a8\u54c1\u724c\u7684\u91cd\u8981\u6027\uff0c\u5305\u62ec\u5176\u54c1\u724c\u5e95\u8574\u3001\u53d1\u5c55\u65b9\u5411\u3001\u76ee\u6807\u53d7\u4f17\u3002\u6211\u4eec\u5c06\u8fd9\u4e9b\u5173\u952e\u5143\u7d20\u878d\u5165\u5230\u7f51\u7ad9\u8bbe\u8ba1\u4e2d\uff0c\u4ee5\u786e\u4fdd\u60a8\u7684\u7f51\u7ad9\u4e0e\u54c1\u724c\u5f62\u8c61\u4e00\u81f4\u3002\u59cb\u7ec8\u4ee5\u5168\u5c40\u89c6\u89d2\u6765\u5ba1\u89c6\u9879\u76ee\uff0c\u4ece\u6574\u4f53\u67b6\u6784\u5230\u7528\u6237\u6d41\u7a0b\uff0c\u4e3a\u4f01\u4e1a\u91cd\u65b0\u6784\u5efa\u903b\u8f91\u7ed3\u6784\u3002\u91cd\u65b0\u5851\u9020UI\u754c\u9762\u7684\u5916\u89c2\u548c\u5e03\u5c40\uff0c\u6ce8\u5165\u65b0\u9896\u7684\u89c6\u89c9\u8bbe\u8ba1\uff0c\u540c\u65f6\u5173\u6ce8UX\u4ea4\u4e92\uff0c\u4ee5\u63d0\u4f9b\u5353\u8d8a\u7684\u7528\u6237\u4f53\u9a8c\u3002\u8fd9\u4e00\u7cfb\u5217\u5de5\u4f5c\u4e3a\u60a8\u7684\u54c1\u724c\u6253\u9020\u4e86\u4e00\u4e2a\u5d2d\u65b0\u7684\u7f51\u7ad9\u5f62\u8c61\uff0c\u4e3a\u672a\u6765\u7684\u6210\u529f\u5960\u5b9a\u4e86\u575a\u5b9e\u7684\u57fa\u7840\u3002\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-178\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557f88_Oosaa-Ul-UX Design.png\"\n alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"expertise-card-wrapper \" style=\" margin-top: 10px;\">\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <div class=\"expertise-card\">\n <div class=\"expertise-card-link\">\n <div class=\"div-block-121\"><\/div>\n <div class=\"text-block-12\">02.<\/div>\n <\/div>\n <div class=\"w-layout-grid\">\n <div class=\"div-block-111\">\n <h1 class=\"heading-41\">\n Website\n <br>\n development\n <\/h1>\n <div>\n <h1 class=\"heading-42\">\u7f51\u7ad9\u524d\u540e\u7aef\u4ea4\u4e92\u5f00\u53d1<\/h1>\n <div class=\"text-block-13\">\n OOSAA\u5c06\u8bbe\u8ba1\u65b9\u6848\u8f6c\u53d8\u6210\u53ef\u70b9\u51fb\u64cd\u63a7\u7684\u4ea4\u4e92\u754c\u9762\uff0c\u4ece\u800c\u4f7f\u7528\u6237\u53ef\u4ee5\u8bbf\u95ee\u3002\u5c06\u4f18\u79c0\u7684\u8bbe\u8ba1\u65b9\u6848\u4e0e\u6700\u4f73\u7684\u6280\u672f\u5f00\u53d1\u76f8\u7ed3\u5408\uff0c\u6ce8\u91cd\u7528\u6237\u4f53\u9a8c\uff0c\u901a\u8fc7\u76f4\u89c2\u7684\u903b\u8f91\u3001\u5feb\u901f\u7684\u52a0\u8f7d\u548c\u6781\u4f73\u7684\u754c\u9762\u89c6\u89c9\u4ea4\u4e92\u6765\u786e\u4fdd\u7528\u6237\u7684\u6ee1\u610f\u5ea6\u3002\u642d\u914d\u6613\u4e8e\u7ba1\u7406\u7684CMS\u540e\u53f0\uff0c\u4f7f\u60a8\u80fd\u591f\u8f7b\u677e\u66f4\u65b0\u548c\u7ba1\u7406\u7f51\u7ad9\u5185\u5bb9\uff0c\u6211\u4eec\u4f7f\u7528\u54cd\u5e94\u5f0f\u7684\u5f00\u53d1\uff0c\u9002\u5e94\u5404\u79cd\u8bbe\u5907\u548c\u5c4f\u5e55\u5c3a\u5bf8\uff0c\u786e\u4fdd\u7528\u6237\u5728\u4efb\u4f55\u8bbe\u5907\u4e0a\u90fd\u80fd\u83b7\u5f97\u4e00\u81f4\u7684\u51fa\u8272\u4f53\u9a8c\u3002\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-178\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557f8e_Oosaa-Development.png\"\n alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"expertise-card-wrapper \" style=\" margin-top: 10px;\">\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <div class=\"expertise-card\">\n <div class=\"expertise-card-link\">\n <div class=\"div-block-121\"><\/div>\n <div class=\"text-block-12\">03.<\/div>\n <\/div>\n <div class=\"w-layout-grid\">\n <div class=\"div-block-111\">\n <h1 class=\"heading-41\">\n Video\n <br>\n Dynamic 3D\n <\/h1>\n <div>\n <h1 class=\"heading-42\">\u89c6\u9891\u52a8\u65483D\u5236\u4f5c<\/h1>\n <div class=\"text-block-13\">\n OOSAA\u628a\u89c6\u9891\u52a8\u6548\u548c\u4e09\u7ef4\u6280\u672f\u5de7\u5999\u5730\u878d\u5165\u5230\u7f51\u7ad9\u4e2d\uff0c\u4f7f\u7528\u6237\u66f4\u6709\u5174\u8da3\u63a2\u7d22\u66f4\u591a\u5185\u5bb9\uff0c\u66f4\u5168\u9762\u5730\u4e86\u89e3\u60a8\u7684\u4ea7\u54c1\uff0c\u8fd8\u6709\u52a9\u4e8e\u63d0\u9ad8\u8f6c\u5316\u7387\u3002\u4e09\u7ef4\u6280\u672f\u548c\u52a8\u6548\u4e0d\u4ec5\u4ec5\u7528\u4e8e\u88c5\u70b9\u7f51\u7ad9\uff0c\u8fd8\u53ef\u589e\u5f3a\u7f51\u7ad9\u7684\u4e92\u52a8\u6027\u3002\u6211\u4eec\u53ef\u4ee5\u521b\u5efa\u53ef\u62d6\u52a8\u3001\u53ef\u65cb\u8f6c\u6216\u53ef\u7f29\u653e\u76843D\u56fe\u5f62\uff0c\u8ba9\u7528\u6237\u8eab\u4e34\u5176\u5883\u5730\u63a2\u7d22\u7f51\u7ad9\u5185\u5bb9\u3002\u4e0d\u8bba\u60a8\u7684\u9886\u57df\u662f\u4ec0\u4e48\uff0c\u4e09\u7ef4\u6280\u672f\u548c\u52a8\u6548\u90fd\u4e3a\u60a8\u63d0\u4f9b\u4e86\u4e00\u79cd\u72ec\u7279\u7684\u65b9\u5f0f\u6765\u5438\u5f15\u548c\u7559\u4f4f\u7528\u6237\uff0c\u4f7f\u60a8\u7684\u54c1\u724c\u5728\u7ade\u4e89\u6fc0\u70c8\u7684\u5e02\u573a\u4e2d\u8131\u9896\u800c\u51fa\u3002\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-178\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557f8f_Oosaa-Vision-3D.png\"\n alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"expertise-card-wrapper \" style=\" margin-top: 10px;\">\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <div class=\"expertise-card\">\n <div class=\"expertise-card-link\">\n <div class=\"div-block-121\"><\/div>\n <div class=\"text-block-12\">04.<\/div>\n <\/div>\n <div class=\"w-layout-grid\">\n <div class=\"div-block-111\">\n <h1 class=\"heading-41\">\n SEO\/SEM\n <br>\n Search\n <\/h1>\n <div>\n <h1 class=\"heading-42\">SEO\/SEM\u641c\u7d22\u4f18\u5316<\/h1>\n <div class=\"text-block-13\">\n SEO\u662f\u4e00\u9879\u957f\u671f\u7684\u7b56\u7565\uff0cOOSAA\u901a\u8fc7\u5bf9\u60a8\u7684\u7f51\u7ad9\u8fdb\u884c\u4f18\u5316\uff0c\u76ee\u7684\u662f\u63d0\u5347\u5176\u5728\u81ea\u7136\u641c\u7d22\u7ed3\u679c\u4e2d\u7684\u6392\u540d\u3002\u6211\u4eec\u7684\u65b9\u6cd5\u5305\u62ec\u8bbe\u5b9a\u6070\u5f53\u7684TDK\uff08\u6807\u9898\u3001\u63cf\u8ff0\u3001\u5173\u952e\u8bcd\uff09\u8bdd\u672f\uff0c\u660e\u786e\u5b9a\u4e49\u4e0e\u60a8\u7684\u4e1a\u52a1\u76f8\u5173\uff0c\u4e14\u5728\u641c\u7d22\u4e2d\u5177\u6709\u6f5c\u5728\u4ef7\u503c\u7684\u5173\u952e\u8bcd\u3002\u6b64\u5916\uff0c\u6211\u4eec\u4f18\u5316\u7f51\u7ad9\u7684\u7ed3\u6784\u548c\u5185\u5bb9\uff0c\u4ee5\u786e\u4fdd\u641c\u7d22\u5f15\u64ce\u80fd\u591f\u8f7b\u677e\u7d22\u5f15\u548c\u7406\u89e3\u60a8\u7684\u7ad9\u70b9\u3002\u518d\u642d\u914d\u76f8\u5173\u7684\u6570\u636e\u5206\u6790\u8fdb\u884c\u6539\u8fdb\uff0c\u6709\u52a9\u4e8e\u5438\u5f15\u76ee\u6807\u53d7\u4f17\u5e76\u63d0\u9ad8\u641c\u7d22\u5f15\u64ce\u6392\u540d\u3002\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-178\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557f90_Oosaa-SEO-SEM.png\"\n alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"expertise-card-wrapper \" style=\" margin-top: 10px;\">\n <div class=\"hover-wrapper1\">\n <div class=\"icon-wrapper1\"\n style=\"opacity: 0; display: none; will-change: transform; transform: translate3d(-0vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/652 (1).svg\"\n class=\"image-28\" alt=\"\">\n <h1 class=\"heading-37\">MOre<\/h1>\n <\/div>\n <\/div>\n <div class=\"expertise-card\">\n <div class=\"expertise-card-link\">\n <div class=\"div-block-121\"><\/div>\n <div class=\"text-block-12\">05.<\/div>\n <\/div>\n <div class=\"w-layout-grid\">\n <div class=\"div-block-111\">\n <h1 class=\"heading-41\">\n Hosting &\n <br>\n CDN\n <\/h1>\n <div>\n <h1 class=\"heading-42\">\u4e3b\u673a\u670d\u52a1\u5668&CDN\u52a0\u901f<\/h1>\n <div class=\"text-block-13\">\n OOSAA\u901a\u8fc7\u6df1\u5165\u4e86\u89e3\u60a8\u7684\u4e1a\u52a1\u9700\u6c42\u3001\u5ba2\u6237\u7fa4\u4f53\u548c\u4f01\u4e1a\u89c4\u6a21\uff0c\u9009\u62e9\u5408\u9002\u7684\u4e3b\u673a\u7c7b\u578b\uff0c\u57fa\u4e8e\u4e3b\u673a\u548c\u670d\u52a1\u5668\u7684\u6027\u80fd\uff0c\u53ef\u6269\u5c55\u6027\u548c\u7a33\u5b9a\u6027\uff0c\u4ee5\u786e\u4fdd\u5b83\u4eec\u80fd\u591f\u5b8c\u7f8e\u6ee1\u8db3\u60a8\u7684\u9700\u6c42\u3002\u6b64\u5916\uff0c\u901a\u8fc7\u4f18\u5316\u7f51\u7ad9\u4ee3\u7801\u548c\u56fe\u50cf\u6765\u964d\u4f4e\u52a0\u8f7d\u65f6\u95f4\uff0c\u540c\u65f6\u538b\u7f29\u7f51\u9875\u5185\u5bb9\u4ee5\u51cf\u5c11\u5e26\u5bbd\u4f7f\u7528\u3002\u6211\u4eec\u5b9a\u671f\u8fdb\u884c\u6027\u80fd\u6d4b\u8bd5\uff0c\u4ee5\u786e\u4fdd\u4e3b\u673a\u548c\u670d\u52a1\u5668\u7684\u6027\u80fd\u59cb\u7ec8\u7a33\u5b9a\uff0c\u540c\u65f6\u4e0d\u65ad\u4f18\u5316\u4ee5\u4fdd\u6301\u9ad8\u6c34\u51c6\u7684\u6027\u80fd\u3002\u76ee\u6807\u662f\u4e3a\u60a8\u63d0\u4f9b\u9ad8\u6027\u80fd\u3001\u53ef\u9760\u4e14\u5b89\u5168\u7684\u7f51\u7ad9\uff0c\u4ee5\u63d0\u9ad8\u7528\u6237\u4f53\u9a8c\u5e76\u964d\u4f4e\u51fa\u8df3\u7387\u3002\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-178\">\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e662e83d394557f91_Oosaa-Hosting&CDN.png\"\n alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n const backgroundVideos = document.querySelectorAll('.expertise-card-wrapper');\n\n backgroundVideos.forEach((backgroundVideo) => {\n const hoverWrapper = backgroundVideo.querySelector('.icon-wrapper1');\n\n backgroundVideo.addEventListener('mouseenter', (event) => {\n hoverWrapper.style.display = 'flex';\n hoverWrapper.style.opacity = 1;\n });\n\n backgroundVideo.addEventListener('mouseleave', (event) => {\n hoverWrapper.style.display = 'none';\n hoverWrapper.style.opacity = 0;\n });\n\n backgroundVideo.addEventListener('mousemove', (event) => {\n const rect = backgroundVideo.getBoundingClientRect();\n const offsetX = event.clientX - rect.left;\n const offsetY = event.clientY - rect.top;\n\n const iconWidth = hoverWrapper.offsetWidth;\n const iconHeight = hoverWrapper.offsetHeight;\n const translateX = offsetX - iconWidth \/ 2;\n const translateY = offsetY - iconHeight \/ 2;\n\n hoverWrapper.style.transform =\n `translate(${translateX}px, ${translateY}px)`;\n });\n });\n });\n\n \/\/ window.addEventListener('scroll', function () {\n \/\/ var expertiseCards = Array.from(document.querySelectorAll('.expertise-card-link'))\n \/\/ .reverse(); \/\/ \u9006\u5e8f\u904d\u5386\u5143\u7d20\u6570\u7ec4\n \/\/ var windowHeight = window.innerHeight;\n \/\/ var offset = 35; \/\/ \u63a7\u5236\u53e0\u52a0\u95f4\u8ddd\n\n \/\/ expertiseCards.forEach(function (card, index) {\n \/\/ var rect = card.getBoundingClientRect();\n \/\/ var position = windowHeight - rect.bottom; \/\/ \u8ba1\u7b97\u5143\u7d20\u5e95\u90e8\u5230\u7a97\u53e3\u5e95\u90e8\u7684\u8ddd\u79bb\n\n \/\/ if (position >= 0) {\n \/\/ card.style.position = 'fixed';\n \/\/ card.style.bottom = index * offset + 'px'; \/\/ \u8bbe\u7f6e\u53e0\u52a0\u95f4\u8ddd\n \/\/ card.style.left = '0';\n \/\/ card.style.width = '100%';\n \/\/ } else {\n \/\/ card.style.position = 'static';\n \/\/ }\n \/\/ });\n \/\/ });\n <\/script>\n<\/body>\n\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n<\/head>\n<style>\n \/* \u6700\u65b0\u89c2\u70b9 *\/\n * {\n padding: 0;\n margin: 0;\n }\n\n #zuixgd {}\n\n .home-insights {\n padding-top: 6.25rem;\n box-sizing: border-box;\n }\n\n .swiper-top {\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n margin-top: 20px;\n display: flex;\n overflow: hidden;\n }\n\n ._1ji-handing9 {\n color: #080808;\n text-transform: uppercase;\n white-space: nowrap;\n margin-top: 0;\n margin-bottom: 0;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: 1.2rem;\n font-weight: 400;\n }\n\n .link-block-19 {\n max-width: 100%;\n display: inline-block;\n transition: all 0.5s ease;\n }\n\n .div-block-119 {\n cursor: pointer;\n grid-column-gap: 6px;\n justify-content: space-between;\n display: flex;\n transition: all 0.5s ease;\n }\n\n .link-block-19:hover .text-block-18 {\n transform: translateX(-20px);\n }\n\n .link-block-19:hover .div-block-120 {\n transform: scaleX(1.5);\n\n }\n\n \/* font-weight: normal;\n transform: scale(1.4); *\/\n .text-block-18 {\n color: #080808;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1;\n transition: all 0.5s ease;\n }\n\n .div-block-120 {\n height: 1px;\n margin-top: 6px;\n display: block;\n background-color: #080808;\n transition: all 0.5s ease;\n }\n\n .collection-list-wrapper-5 {\n margin-top: 40px;\n }\n\n .collection-list-4 {\n grid-template-rows: auto;\n grid-template-columns: 1fr 1fr 1fr;\n grid-auto-columns: 1fr;\n display: grid;\n grid-column-gap: 40px;\n grid-row-gap: 40px;\n }\n\n .link-block-18 {\n border-style: solid;\n border-width: 1px .5px;\n border-color: #d9d9d9;\n cursor: pointer;\n width: 100%;\n height: 100%;\n }\n\n .div-block-154 {\n height: 420px;\n overflow: hidden;\n }\n\n .image-41 {\n height: 420px;\n object-fit: cover;\n width: 100%;\n transition: all 0.5s ease;\n }\n\n .div-block-152 {\n flex-direction: column;\n justify-content: space-between;\n padding: 12px 26px 30px;\n display: flex;\n }\n\n .div-block-153 {\n justify-content: space-between;\n align-items: center;\n margin-top: 10px;\n margin-bottom: 30px;\n display: flex;\n }\n\n .hei {\n color: #080808;\n border: .5px solid #000;\n border-radius: 20px;\n justify-content: center;\n align-items: center;\n margin-top: 0;\n margin-bottom: 0;\n padding: 5px 17px;\n font-size: .85rem;\n font-weight: 300;\n display: flex;\n }\n\n .a_8c {\n color: #080808;\n letter-spacing: -.02em;\n text-transform: uppercase;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: 1rem;\n font-weight: 300;\n line-height: 1;\n }\n\n .heading-medium {\n color: #080808;\n margin-top: 10px;\n font-size: 1.2rem;\n line-height: 1.4;\n }\n\n .link-block-18:hover .image-41 {\n transform: scale(1.1);\n }\n\n .colList4{\n transition: all 0.5s ease;\n animation: colList4 2s 1 alternate;\n }\n @keyframes colList4 {\n 0% {\n transform: translateY(70px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n<\/style>\n\n<body>\n <div id=\"zuixgd\">\n <div class=\"_2vw-container\">\n <div class=\"home-insights\">\n <div class=\"swiper-top\">\n <h1 class=\"_1ji-handing9\">\u25cf \u6700\u65b0\u89c2\u70b9 INSIGHTS<\/h1>\n <div class=\"link-block-19\">\n <div class=\"div-block-119\">\n <div class=\"text-block-18\">\n \u5168\u90e8\u89c2\u70b9\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6526148e61535 (1).svg\"\n alt=\"\">\n <\/div>\n <div class=\"div-block-120\"><\/div>\n <\/div>\n <\/div>\n <div class=\"collection-list-wrapper-5\">\n <div class=\"collection-list-4\">\n <div class=\"link-block-18\">\n <div class=\"div-block-154\">\n <img decoding=\"async\" class=\"image-41\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/663864eb43d925dcf6791f9d_Group 1312317034-p-800.jpg\"\n alt=\"\">\n <\/div>\n <div class=\"div-block-152\">\n <div class=\"div-block-153\">\n <h1 class=\"hei\">\u4f5c\u54c1\u89e3\u6790<\/h1>\n <div class=\"a_8c\">2024-05-06<\/div>\n <\/div>\n <h1 class=\"heading-medium\">OOSAA\u56fd\u5185\u5168\u65b0\u5b98\u7f51 oosaa.com.cn \u6b63\u5f0f\u4e0a\u7ebf<\/h1>\n <\/div>\n <\/div>\n <div class=\"link-block-18\">\n <div class=\"div-block-154\">\n <img decoding=\"async\" class=\"image-41\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/654867840d8367779ab124d5_Free_Realistic_Folded_Paper2_Mockup-p-800.webp\"\n alt=\"\">\n <\/div>\n <div class=\"div-block-152\">\n <div class=\"div-block-153\">\n <h1 class=\"hei\">\u5e02\u573a\u6d1e\u5bdf<\/h1>\n <div class=\"a_8c\">2023-11-06<\/div>\n <\/div>\n <h1 class=\"heading-medium\">OOSAA\u6210\u529f\u901a\u8fc7\u4e86Webflow\u7684\u4e13\u5bb6\u8ba4\u8bc1<\/h1>\n <\/div>\n <\/div>\n <div class=\"link-block-18\">\n <div class=\"div-block-154\">\n <img decoding=\"async\" class=\"image-41\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/65488dca846a1c9276cf1f36_oosaa\u7f51\u7ad9\u8bbe\u8ba1\u5f00\u53d1-greenland\u9752\u68ee (1) (1)-p-800.jpg\"\n alt=\"\">\n <\/div>\n <div class=\"div-block-152\">\n <div class=\"div-block-153\">\n <h1 class=\"hei\">\u4f5c\u54c1\u89e3\u6790<\/h1>\n <div class=\"a_8c\">2023.11.5<\/div>\n <\/div>\n <h1 class=\"heading-medium\">Greenland\u9752\u68ee\u9999\u6e2f\u5ba4\u5185\u5de5\u4f5c\u5ba4\u7f51\u7ad9\u5efa\u8bbe<\/h1>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n\n function handleScrollzui() {\n var scrollTopx = window.pageYOffset || document.documentElement.scrollTop || document.body\n .scrollTop || 0;\n const colList4 = document.querySelector('.collection-list-4');\n \n if (scrollTopx >= 10905) {\n colList4.classList.add('colList4')\n } else {\n \n }\n\n }\n\n window.addEventListener('scroll', handleScrollzui);\n });\n <\/script>\n<\/body>\n\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n<\/head>\n<style>\n \/* \u5c3e\u90e8 *\/\n * {\n padding: 0;\n margin: 0;\n }\n\n #weibu {}\n\n .div-block-139 {\n flex-direction: column;\n justify-content: space-between;\n height: 100vh;\n padding-top: 14vh;\n display: flex;\n }\n\n .div-block-22 {\n padding-top: 5rem;\n box-sizing: border-box;\n grid-column-gap: 0px;\n grid-row-gap: 1.5rem;\n grid-template:\n \". .\"\n \"Area Area\"\/ 1fr 1fr;\n grid-auto-columns: 1fr;\n margin-bottom: 140px;\n padding-top: 80px;\n display: grid;\n }\n\n .div-block-24 {\n flex-direction: column;\n justify-content: space-between;\n display: flex;\n }\n\n .heading-378 {\n font-size: 9.5vw;\n -webkit-text-stroke-width: 1px;\n text-transform: uppercase;\n margin-top: 0;\n margin-bottom: 0;\n font-family: Klarheit Grotesk, sans-serif;\n color: #080808;\n font-weight: 500;\n line-height: .9;\n }\n\n .div-block-29 {\n flex-direction: column;\n justify-content: space-between;\n display: flex;\n }\n\n .div-block-28 {\n flex-direction: row;\n justify-content: flex-end;\n padding-left: 0;\n padding-right: 0;\n display: flex;\n }\n\n @media screen and (min-width: 1920px) {\n .image-33 {\n width: 160px;\n }\n }\n\n .div-block-99 {\n justify-content: space-between;\n align-items: center;\n display: flex;\n grid-area: span 1 \/ span 2 \/ span 1 \/ span 2;\n align-self: auto;\n }\n\n .div-block-23 {\n align-items: center;\n display: flex;\n }\n\n .heading-11 {\n -webkit-text-stroke-width: 1px;\n margin-top: 0;\n margin-bottom: 0;\n color: #080808;\n font-size: 2.3rem;\n font-weight: 500;\n }\n\n .image-44 {\n width: 60px;\n }\n\n .div-block-100 {\n align-items: center;\n display: flex;\n }\n\n .link-block-3 {\n max-width: 100%;\n background-color: #080808;\n color: #fff;\n cursor: pointer;\n border-radius: 999px;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n margin-right: 20px;\n padding: 16px 36px;\n text-decoration: none;\n transition: all .3s cubic-bezier(.165, .84, .44, 1);\n display: flex;\n\n }\n\n .heading-13 {\n margin-top: 0;\n margin-bottom: 0;\n \/* font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Oxygen, Fira Sans, Droid Sans, sans-serif; *\/\n font-size: 1.4rem;\n font-weight: 400;\n line-height: 1;\n color: #fff;\n }\n\n .image-32 {\n width: 15px;\n margin-left: 10px;\n }\n\n .link-block-4 {\n cursor: pointer;\n background-color: #fff;\n border-radius: 999px;\n padding: 16px 36px;\n text-decoration: none;\n transition: all .3s linear;\n }\n\n .link-block-4:hover {\n background-color: #64cf80;\n color: #080808;\n }\n\n .div-block-30 {\n grid-column-gap: 16px;\n grid-row-gap: 16px;\n grid-template-rows: auto;\n grid-template-columns: 1fr .75fr .75fr 1fr;\n grid-auto-columns: 1fr;\n justify-content: space-between;\n padding-bottom: 0;\n display: grid;\n }\n\n .div-block-31 {\n display: flex;\n grid-column-gap: 28px;\n grid-row-gap: 20px;\n justify-content: flex-start;\n }\n\n .heading-17 {\n white-space: nowrap;\n align-self: center;\n margin-top: 0;\n margin-bottom: 0;\n margin-right: 20px;\n font-family: Klarheit Grotesk, sans-serif;\n font-size: .95rem;\n font-weight: 200;\n line-height: 1;\n }\n\n .div-block-162 {\n grid-area: span 1 \/ span 1 \/ span 1 \/ span 1;\n align-self: center;\n }\n\n .link-block-7 {\n cursor: pointer;\n text-decoration: none;\n max-width: 100%;\n display: inline-block;\n }\n\n @media screen and (min-width: 1920px) {\n .div-block-31 {\n grid-column-gap: 28px;\n grid-row-gap: 20px;\n justify-content: flex-start;\n }\n }\n\n .link-block-7 {\n align-self: center;\n text-decoration: none;\n }\n\n .w-inline-block {\n max-width: 100%;\n \/* display: inline-block; *\/\n }\n\n .seb {\n cursor: pointer;\n margin-right: 0;\n font-weight: 400;\n }\n\n .div-block-140 {\n border-bottom: 1px solid #000;\n }\n\n .div-block-27.footer {\n \/* margin-top: 0;\n margin-bottom: 0;\n padding-bottom: 0;\n padding-left: 0;\n justify-self: end; *\/\n display: flex;\n justify-content: flex-end;\n cursor: pointer;\n }\n\n .link-block.footer {\n \/* width: 36px; *\/\n padding-bottom: 0;\n margin-left: 12px;\n }\n\n .footer {\n \/* background-color: whitesmoke; *\/\n margin-top: auto;\n\n }\n\n .footer1:hover .image {\n transform: translateY(-10px);\n\n }\n\n .footer2:hover .image {\n transform: translateY(-10px);\n\n }\n\n .footer3:hover .image {\n transform: translateY(-10px);\n\n }\n\n .footer4:hover .image {\n transform: translateY(-10px);\n\n }\n\n .footer5:hover .image {\n transform: translateY(-10px);\n\n }\n\n .image {\n width: 40px;\n display: block;\n transition: all 0.5s ease;\n }\n\n .aa {\n transition: all 0.5s ease;\n animation: pulsex 2s 1 alternate;\n }\n\n @keyframes pulsex {\n 0% {\n transform: translateY(50px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.8;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .axx {\n transition: all 0.5s ease;\n animation: pulsexa 2s 1 alternate;\n }\n\n @keyframes pulsexa {\n 0% {\n transform: translateY(100px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n\n .image33 {\n transition: all 0.5s ease;\n animation: image33 2s 1 alternate;\n }\n\n @keyframes image33 {\n 0% {\n transform: scale(0);\n \/* \u4ece 0 \u5f00\u59cb *\/\n opacity: 0;\n \/* \u900f\u660e\u5ea6\u4e3a 0 *\/\n }\n\n 100% {\n transform: scale(1);\n \/* \u7f29\u653e\u81f3\u539f\u59cb\u5c3a\u5bf8 *\/\n opacity: 1;\n \/* \u5b8c\u5168\u663e\u793a *\/\n }\n }\n\n .divVlock99 {\n transition: all 0.5s ease;\n animation: divVlock99 2s 1 alternate;\n }\n\n @keyframes divVlock99 {\n 0% {\n transform: translateY(70px);\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n opacity: 0.9;\n }\n\n 100% {\n transform: translateY(0);\n \/* \u7ed3\u675f\u72b6\u6001 *\/\n opacity: 1;\n }\n }\n<\/style>\n\n<body>\n <div id=\"weibu\">\n <div class=\"div-block-139\">\n <div class=\"div-block-22\">\n <div class=\"div-block-24\">\n <div class=\"div-block-186\">\n <h1 class=\"heading-378 a\">\n Let's\n <\/h1>\n <h1 class=\"heading-378 xxx\">\n CONNECT.\n <\/h1>\n <\/div>\n <\/div>\n <div class=\"div-block-29\">\n <div class=\"div-block-28\">\n <img decoding=\"async\" class=\"image-33\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/65Group 1403.svg\"\n alt=\"\">\n <\/div>\n <\/div>\n <div class=\"div-block-99\">\n <div class=\"div-block-23\">\n <h1 class=\"heading-11\">\n \u60a8\u6709\u4ec0\u4e48\u60f3\u6cd5\u6216\u8ba1\u5212\u5417? \u8054\u7edc\u6211\u4eec\u5427\uff01\n <\/h1>\n <img decoding=\"async\" class=\"image-44\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/83d394557f72_Group 1586 (3).svg\"\n alt=\"\">\n <\/div>\n <div class=\"div-block-100\">\n <div class=\"link-block-3\">\n <h3 class=\"heading-13\">Contact \u8054\u7cfb<\/h3>\n <img decoding=\"async\" class=\"image-32\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6524557f15_Group 1531.svg\"\n alt=\"\">\n <\/div>\n <div class=\"link-block-4\">\n <h3 class=\"heading-13\" style=\"color: #080808;\">+86 18606500398<\/h3>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-30\" style=\"margin-bottom: 38px;\">\n <div class=\"div-block-31\">\n <h1 class=\"heading-17\">OOSAA.\u6d53\u7709\u5927\u773c\u89c6\u89c9\u539f\u521b\u7248\u6743\u6240\u6709 \u76d7\u7528\u5fc5\u7a76 \u00a92024<\/h1>\n <\/div>\n <div class=\"div-block-162\">\n <div class=\"link-block-7\">\n <h1 class=\"heading-17\">\u6d59ICP\u59072021040397\u53f7<\/h1>\n <\/div>\n <\/div>\n <div class=\"div-block-31\">\n <div class=\"link-block-7 w-inline-block\">\n <h1 class=\"heading-17 seb\">\u9996\u9875<\/h1>\n <div class=\"div-block-140\"><\/div>\n <\/div>\n <div class=\"link-block-7 w-inline-block\">\n <h1 class=\"heading-17 seb\">\u5e38\u89c1\u95ee\u9898<\/h1>\n <div class=\"div-block-140\"><\/div>\n <\/div>\n <div class=\"link-block-7 w-inline-block\">\n <h1 class=\"heading-17 seb\">\u670d\u52a1\u6d41\u7a0b<\/h1>\n <div class=\"div-block-140\"><\/div>\n <\/div>\n <div class=\"link-block-7 w-inline-block\">\n <h1 class=\"heading-17 seb\">\u52a0\u5165\u6211\u4eec<\/h1>\n <div class=\"div-block-140\"><\/div>\n <\/div>\n <div class=\"link-block-7 w-inline-block\">\n <h1 class=\"heading-17 seb\">SEB\u6a21\u677f<\/h1>\n <div class=\"div-block-140\"><\/div>\n <\/div>\n <\/div>\n <div class=\"div-block-27 footer\" style=\"text-align: right;\">\n <div class=\"link-block footer footer1\">\n <img decoding=\"async\" class=\"image\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/weix557eb5_Group 1453.svg\"\n alt=\"\">\n <\/div>\n <div class=\"link-block footer footer2\">\n <img decoding=\"async\" class=\"image\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/douy57eb6_Group 1488.svg\"\n alt=\"\">\n <\/div>\n <div class=\"link-block footer footer3\">\n <img decoding=\"async\" class=\"image\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/65xiaohs557eb7_Group 1456.svg\"\n alt=\"\">\n <\/div>\n <div class=\"link-block footer footer4\">\n <img decoding=\"async\" class=\"image\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/6be662e83d394557eb8_Group 1487.svg\"\n alt=\"\">\n <\/div>\n <div class=\"link-block footer footer5\">\n <img decoding=\"async\" class=\"image\"\n src=\"https:\/\/yantoo-ailab-1320473685.cos.ap-shanghai.myqcloud.com\/uploads\/abd394557eb1_Group 1457.svg\"\n alt=\"\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n\n function handleScrollx() {\n var scrollTopx = window.pageYOffset || document.documentElement.scrollTop || document.body\n .scrollTop || 0;\n const x = document.querySelector('.xxx');\n const a = document.querySelector('.a');\n const image33 = document.querySelector('.image-33');\n const divVlock99 = document.querySelector('.div-block-99');\n const div118 = document.querySelectorAll('.div-block-118');\n const gc2 = document.getElementById('gc2');\n if (scrollTopx >= 11755 && scrollTopx < 11905) {\n a.classList.add('aa');\n image33.classList.add('image33')\n } else if (scrollTopx >= 11905 && scrollTopx < 12050) {\n x.classList.add('axx');\n } else if (scrollTopx >= 12050 && scrollTopx < 12150) {\n divVlock99.classList.add('divVlock99');\n } else if (scrollTopx > 12150) {\n a.classList.add('aa');\n image33.classList.add('image33')\n x.classList.add('axx');\n divVlock99.classList.add('divVlock99');\n }\n\n }\n\n window.addEventListener('scroll', handleScrollx);\n });\n <\/script>\n<\/body>\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Document CREATIVE INTERACTION ANIMATION OOSAA\u4e3a\u54c1\u724c\u5168\u7403\u5316 \u63d0\u4f9b\u5168 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-21","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/new.yantootech.com\/index.php\/wp-json\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/new.yantootech.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/new.yantootech.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/new.yantootech.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/new.yantootech.com\/index.php\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":273,"href":"https:\/\/new.yantootech.com\/index.php\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":317,"href":"https:\/\/new.yantootech.com\/index.php\/wp-json\/wp\/v2\/pages\/21\/revisions\/317"}],"wp:attachment":[{"href":"https:\/\/new.yantootech.com\/index.php\/wp-json\/wp\/v2\/media?parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}