{"id":1635,"date":"2021-06-21T14:10:03","date_gmt":"2021-06-21T12:10:03","guid":{"rendered":"https:\/\/webbingstone.com\/about-us\/"},"modified":"2026-02-08T23:19:48","modified_gmt":"2026-02-08T21:19:48","slug":"%e5%85%b3%e4%ba%8e%e6%88%91%e4%bb%ac","status":"publish","type":"page","link":"https:\/\/webbingstone.com\/zh-hans\/%e5%85%b3%e4%ba%8e%e6%88%91%e4%bb%ac\/","title":{"rendered":"\u5173\u4e8e\u6211\u4eec"},"content":{"rendered":"\t\t
\n\t\t\t\t
\r\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\u5173\u4e8e WebbingStone - \u4e3b\u9875\u90e8\u5206<\/title>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n<style>\r\n:root {\r\n --color-primary: #667eea;\r\n --color-secondary: #764ba2;\r\n --color-accent: #EE5946;\r\n}\r\n\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\nhtml {\r\n overflow-x: hidden;\r\n width: 100%;\r\n}\r\n\r\nbody {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\r\n overflow-x: hidden;\r\n width: 100%;\r\n}\r\n\r\n\/* Hero Section *\/\r\n.about-hero {\r\n position: relative;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n overflow: visible;\r\n padding: 180px 20px 150px 20px;\r\n}\r\n\r\n\/* Animated Background *\/\r\n.hero-bg-pattern {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0.1;\r\n background-image: \r\n radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),\r\n radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.2) 0%, transparent 50%);\r\n}\r\n\r\n\/* Floating Orbs *\/\r\n.floating-orb {\r\n position: absolute;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(20px);\r\n}\r\n\r\n.orb-1 {\r\n width: 300px;\r\n height: 300px;\r\n top: -100px;\r\n left: -100px;\r\n}\r\n\r\n.orb-2 {\r\n width: 200px;\r\n height: 200px;\r\n bottom: -50px;\r\n right: -50px;\r\n}\r\n\r\n.orb-3 {\r\n width: 150px;\r\n height: 150px;\r\n top: 50%;\r\n right: 10%;\r\n}\r\n\r\n.hero-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 10;\r\n width: 100%;\r\n padding-bottom: 80px;\r\n}\r\n\r\n.hero-content {\r\n text-align: center;\r\n}\r\n\r\n.hero-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 12px 30px;\r\n background: rgba(255, 255, 255, 0.15);\r\n backdrop-filter: blur(10px);\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n border-radius: 50px;\r\n color: white;\r\n font-size: 0.95rem;\r\n font-weight: 600;\r\n margin-bottom: 30px;\r\n}\r\n\r\n.hero-badge svg {\r\n width: 20px;\r\n height: 20px;\r\n fill: currentColor;\r\n}\r\n\r\n.hero-title {\r\n font-size: 4.5rem;\r\n font-weight: 800;\r\n color: white;\r\n margin-bottom: 30px;\r\n line-height: 1.2;\r\n text-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.hero-title .highlight {\r\n background: linear-gradient(135deg, #fff 0%, #ffa8a8 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n}\r\n\r\n.hero-subtitle {\r\n font-size: 1.4rem;\r\n color: rgba(255, 255, 255, 0.95);\r\n max-width: 800px;\r\n margin: 0 auto 40px;\r\n line-height: 1.8;\r\n}\r\n\r\n.hero-year {\r\n display: inline-block;\r\n padding: 15px 35px;\r\n background: rgba(238, 89, 70, 0.9);\r\n color: white;\r\n border-radius: 50px;\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n margin-bottom: 50px;\r\n box-shadow: 0 10px 30px rgba(238, 89, 70, 0.4);\r\n}\r\n\r\n\/* Service Tags *\/\r\n.service-tags {\r\n display: flex;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n margin-bottom: 50px;\r\n}\r\n\r\n.service-tag {\r\n padding: 12px 25px;\r\n background: rgba(255, 255, 255, 0.15);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n border-radius: 50px;\r\n color: white;\r\n font-size: 0.95rem;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n}\r\n\r\n.service-tag:hover {\r\n background: rgba(255, 255, 255, 0.25);\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n\/* Stats Section *\/\r\n.hero-stats {\r\n display: grid !important;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 40px;\r\n margin-top: 60px;\r\n margin-bottom: 60px;\r\n max-width: 1000px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n visibility: visible !important;\r\n opacity: 1 !important;\r\n}\r\n\r\n.stat-card {\r\n text-align: center;\r\n padding: 40px 30px;\r\n background: white !important;\r\n border-radius: 20px;\r\n transition: all 0.4s ease;\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\r\n border: 3px solid white;\r\n display: block !important;\r\n visibility: visible !important;\r\n opacity: 1 !important;\r\n}\r\n\r\n.stat-card:hover {\r\n transform: translateY(-10px) scale(1.05);\r\n background: white;\r\n box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);\r\n}\r\n\r\n.stat-icon {\r\n width: 60px;\r\n height: 60px;\r\n margin: 0 auto 20px;\r\n background: linear-gradient(135deg, #667eea, #764ba2);\r\n border-radius: 15px;\r\n display: flex !important;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.3s ease;\r\n visibility: visible !important;\r\n opacity: 1 !important;\r\n}\r\n\r\n.stat-card:hover .stat-icon {\r\n transform: scale(1.2) rotate(360deg);\r\n}\r\n\r\n.stat-icon svg {\r\n width: 32px;\r\n height: 32px;\r\n fill: white;\r\n}\r\n\r\n.stat-number {\r\n font-size: 3.5rem;\r\n font-weight: 900;\r\n color: #667eea !important;\r\n margin-bottom: 10px;\r\n display: block !important;\r\n visibility: visible !important;\r\n opacity: 1 !important;\r\n}\r\n\r\n.stat-label {\r\n color: #64748b !important;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n display: block !important;\r\n visibility: visible !important;\r\n opacity: 1 !important;\r\n}\r\n\r\n\/* Scroll Indicator *\/\r\n.scroll-indicator {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n}\r\n\r\n.scroll-indicator svg {\r\n width: 30px;\r\n height: 30px;\r\n fill: rgba(255, 255, 255, 0.7);\r\n}\r\n\r\n\/* Responsive *\/\r\n@media (max-width: 1024px) {\r\n .about-hero {\r\n padding: 140px 20px 120px 20px;\r\n }\r\n\r\n .hero-stats {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 25px;\r\n }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .about-hero {\r\n padding: 120px 20px 100px 20px;\r\n }\r\n\r\n .hero-title {\r\n font-size: 3rem;\r\n }\r\n\r\n .hero-subtitle {\r\n font-size: 1.2rem;\r\n }\r\n\r\n .hero-stats {\r\n grid-template-columns: 1fr;\r\n gap: 20px;\r\n }\r\n\r\n .stat-number {\r\n font-size: 2.5rem;\r\n }\r\n\r\n .service-tags {\r\n gap: 10px;\r\n }\r\n\r\n .service-tag {\r\n font-size: 0.85rem;\r\n padding: 10px 20px;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .about-hero {\r\n padding: 100px 20px 80px 20px;\r\n }\r\n\r\n .hero-title {\r\n font-size: 2.2rem;\r\n }\r\n\r\n .hero-subtitle {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .hero-badge {\r\n font-size: 0.85rem;\r\n padding: 10px 20px;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<section class=\"about-hero\">\r\n <!-- Background Effects -->\r\n <div class=\"hero-bg-pattern\"><\/div>\r\n <div class=\"floating-orb orb-1\"><\/div>\r\n <div class=\"floating-orb orb-2\"><\/div>\r\n <div class=\"floating-orb orb-3\"><\/div>\r\n \r\n <div class=\"hero-container\">\r\n <div class=\"hero-content\">\r\n <div class=\"hero-badge\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z\"\/>\r\n <\/svg>\r\n <span>\u6570\u5b57\u5316\u8f6c\u578b\u516c\u53f8<\/span>\r\n <\/div>\r\n \r\n <h1 class=\"hero-title\">\r\n <span class=\"title-line-1\">\u60a8\u901a\u5f80<\/span><br\/>\r\n <span class=\"highlight\">\u6570\u5b57\u5316\u8f6c\u578b\u7684\u57fa\u77f3<\/span>\r\n <\/h1>\r\n \r\n <p class=\"hero-subtitle\">\r\n \u4ece\u7f51\u7ad9\u5f00\u53d1\u548c\u79fb\u52a8\u5e94\u7528\u5230\u6570\u5b57\u8425\u9500\u548c\u4eba\u5de5\u667a\u80fd\u89e3\u51b3\u65b9\u6848\u2014\u2014\u6211\u4eec\u63d0\u4f9b\u5168\u9762\u7684\u6570\u5b57\u5316\u8f6c\u578b\u670d\u52a1\uff0c\u63a8\u52a8\u771f\u6b63\u7684\u4e1a\u52a1\u6210\u679c\u3002\r\n <\/p>\r\n \r\n <div class=\"service-tags\">\r\n <span class=\"service-tag\">\ud83d\udcbb \u7f51\u7ad9\u5f00\u53d1<\/span>\r\n <span class=\"service-tag\">\ud83d\udcf1 \u79fb\u52a8\u5e94\u7528<\/span>\r\n <span class=\"service-tag\">\ud83c\udfaf \u6570\u5b57\u8425\u9500<\/span>\r\n <span class=\"service-tag\">\ud83e\udd16 \u4eba\u5de5\u667a\u80fd\u89e3\u51b3\u65b9\u6848<\/span>\r\n <span class=\"service-tag\">\u2601\ufe0f \u4e91\u670d\u52a1<\/span>\r\n <\/div>\r\n \r\n <div class=\"hero-year\">\r\n \ud83d\ude80 \u81ea2015\u5e74\u8d77\u8f6c\u578b\u4f01\u4e1a\r\n <\/div>\r\n \r\n <div class=\"hero-stats\">\r\n <div class=\"stat-card\">\r\n <div class=\"stat-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <span class=\"stat-number\" data-target=\"530\">530+<\/span>\r\n <span class=\"stat-label\">\u6ee1\u610f\u5ba2\u6237<\/span>\r\n <\/div>\r\n \r\n <div class=\"stat-card\">\r\n <div class=\"stat-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <span class=\"stat-number\" data-target=\"760\">760+<\/span>\r\n <span class=\"stat-label\">\u5df2\u5b8c\u6210\u9879\u76ee<\/span>\r\n <\/div>\r\n \r\n <div class=\"stat-card\">\r\n <div class=\"stat-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <span class=\"stat-number\" data-target=\"98\">98%<\/span>\r\n <span class=\"stat-label\">\u5ba2\u6237\u6ee1\u610f\u5ea6<\/span>\r\n <\/div>\r\n \r\n <div class=\"stat-card\">\r\n <div class=\"stat-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <span class=\"stat-number\" data-target=\"19\">19+<\/span>\r\n <span class=\"stat-label\">\u670d\u52a1\u56fd\u5bb6<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"scroll-indicator\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z\"\/>\r\n <\/svg>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function() {\r\n if (typeof gsap === 'undefined') return;\r\n\r\n gsap.registerPlugin(ScrollTrigger);\r\n\r\n \/\/ Floating orbs animation\r\n gsap.to('.orb-1', {\r\n x: 100,\r\n y: 80,\r\n rotation: 360,\r\n duration: 20,\r\n repeat: -1,\r\n yoyo: true,\r\n ease: 'sine.inOut'\r\n });\r\n\r\n gsap.to('.orb-2', {\r\n x: -80,\r\n y: -60,\r\n rotation: -360,\r\n duration: 25,\r\n repeat: -1,\r\n yoyo: true,\r\n ease: 'sine.inOut'\r\n });\r\n\r\n gsap.to('.orb-3', {\r\n x: 60,\r\n y: 100,\r\n scale: 1.3,\r\n duration: 18,\r\n repeat: -1,\r\n yoyo: true,\r\n ease: 'sine.inOut'\r\n });\r\n\r\n \/\/ Hero badge entrance\r\n gsap.from('.hero-badge', {\r\n opacity: 0,\r\n scale: 0.5,\r\n y: -50,\r\n duration: 0.8,\r\n ease: 'back.out(1.7)',\r\n delay: 0.2\r\n });\r\n\r\n \/\/ Title animation\r\n gsap.from('.title-line-1', {\r\n opacity: 0,\r\n x: -100,\r\n duration: 1,\r\n ease: 'power3.out',\r\n delay: 0.4\r\n });\r\n\r\n gsap.from('.highlight', {\r\n opacity: 0,\r\n x: 100,\r\n duration: 1,\r\n ease: 'power3.out',\r\n delay: 0.6\r\n });\r\n\r\n \/\/ Subtitle animation\r\n gsap.from('.hero-subtitle', {\r\n opacity: 0,\r\n y: 50,\r\n duration: 1,\r\n ease: 'power3.out',\r\n delay: 0.8\r\n });\r\n\r\n \/\/ Service tags\r\n gsap.from('.service-tag', {\r\n opacity: 0,\r\n scale: 0.5,\r\n y: 30,\r\n duration: 0.6,\r\n stagger: 0.1,\r\n ease: 'back.out(1.7)',\r\n delay: 1\r\n });\r\n\r\n \/\/ Hero year\r\n gsap.from('.hero-year', {\r\n opacity: 0,\r\n scale: 0.8,\r\n y: 30,\r\n duration: 0.8,\r\n ease: 'back.out(1.7)',\r\n delay: 1.5\r\n });\r\n\r\n \/\/ Stat cards\r\n gsap.from('.stat-card', {\r\n opacity: 0,\r\n y: 80,\r\n stagger: 0.15,\r\n duration: 1,\r\n ease: 'back.out(1.7)',\r\n delay: 1.7,\r\n clearProps: 'all'\r\n });\r\n\r\n \/\/ Counter animation\r\n document.querySelectorAll('.stat-number').forEach(num => {\r\n const target = parseInt(num.getAttribute('data-target'));\r\n const isPercentage = target === 98;\r\n \r\n gsap.fromTo(num, \r\n { innerHTML: 0 },\r\n {\r\n innerHTML: target,\r\n duration: 2.5,\r\n delay: 2,\r\n ease: 'power2.out',\r\n snap: { innerHTML: 1 },\r\n onUpdate: function() {\r\n const val = Math.ceil(this.targets()[0].innerHTML);\r\n num.innerHTML = val + (isPercentage ? '%' : '+');\r\n }\r\n }\r\n );\r\n });\r\n\r\n \/\/ Scroll indicator\r\n gsap.to('.scroll-indicator', {\r\n y: 10,\r\n duration: 1,\r\n repeat: -1,\r\n yoyo: true,\r\n ease: 'sine.inOut',\r\n delay: 2\r\n });\r\n\r\n \/\/ Parallax on scroll\r\n gsap.to('.hero-content', {\r\n scrollTrigger: {\r\n trigger: '.about-hero',\r\n start: 'top top',\r\n end: 'bottom top',\r\n scrub: 1\r\n },\r\n y: 150,\r\n opacity: 0.3\r\n });\r\n\r\n gsap.to('.orb-1', {\r\n scrollTrigger: {\r\n trigger: '.about-hero',\r\n start: 'top top',\r\n end: 'bottom top',\r\n scrub: 1\r\n },\r\n y: -200,\r\n x: -100,\r\n scale: 1.5\r\n });\r\n\r\n gsap.to('.orb-2', {\r\n scrollTrigger: {\r\n trigger: '.about-hero',\r\n start: 'top top',\r\n end: 'bottom top',\r\n scrub: 1\r\n },\r\n y: 200,\r\n x: 100,\r\n scale: 0.5\r\n });\r\n\r\n gsap.to('.scroll-indicator', {\r\n scrollTrigger: {\r\n trigger: '.about-hero',\r\n start: 'top top',\r\n end: 'center top',\r\n scrub: 1\r\n },\r\n opacity: 0,\r\n y: -20\r\n });\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"porto_stretch_css stretch_row_css elementor-element elementor-element-2166f4a e-con-full e-flex e-con e-parent\" data-id=\"2166f4a\" data-element_type=\"container\" data-e-type=\"container\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-bc96a65 elementor-widget elementor-widget-html\" data-id=\"bc96a65\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-CN\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>\u6211\u4eec\u7684\u6545\u4e8b - WordPress \u7248\u672c<\/title>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<!-- START: Copy from here for WordPress -->\r\n<style>\r\n\/* Scoped styles for WordPress - use unique class prefix *\/\r\n.ws-story-wrapper {\r\n all: initial;\r\n display: block;\r\n font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;\r\n}\r\n\r\n.ws-story-wrapper * {\r\n box-sizing: border-box !important;\r\n}\r\n\r\n.ws-story-section {\r\n position: relative !important;\r\n padding: 120px 20px !important;\r\n background: linear-gradient(180deg, #0a0a0f 0%, #1a1a2e 100%) !important;\r\n overflow: hidden !important;\r\n margin: 0 !important;\r\n}\r\n\r\n.ws-story-bg {\r\n position: absolute !important;\r\n top: 0 !important;\r\n left: 0 !important;\r\n width: 100% !important;\r\n height: 100% !important;\r\n overflow: hidden !important;\r\n opacity: 0.15 !important;\r\n pointer-events: none !important;\r\n}\r\n\r\n.ws-floating-shape {\r\n position: absolute !important;\r\n border-radius: 50% !important;\r\n filter: blur(60px) !important;\r\n}\r\n\r\n.ws-shape-1 {\r\n width: 400px !important;\r\n height: 400px !important;\r\n background: linear-gradient(135deg, #667eea, #764ba2) !important;\r\n top: 10% !important;\r\n left: -10% !important;\r\n}\r\n\r\n.ws-shape-2 {\r\n width: 350px !important;\r\n height: 350px !important;\r\n background: linear-gradient(135deg, #764ba2, #EE5946) !important;\r\n bottom: 20% !important;\r\n right: -10% !important;\r\n}\r\n\r\n.ws-shape-3 {\r\n width: 300px !important;\r\n height: 300px !important;\r\n background: linear-gradient(135deg, #EE5946, #667eea) !important;\r\n top: 50% !important;\r\n right: 30% !important;\r\n}\r\n\r\n.ws-story-container {\r\n max-width: 1200px !important;\r\n margin: 0 auto !important;\r\n position: relative !important;\r\n z-index: 2 !important;\r\n}\r\n\r\n.ws-story-header {\r\n text-align: center !important;\r\n margin-bottom: 100px !important;\r\n}\r\n\r\n.ws-story-badge {\r\n display: inline-block !important;\r\n padding: 12px 30px !important;\r\n background: linear-gradient(135deg, #667eea, #764ba2) !important;\r\n color: white !important;\r\n border-radius: 50px !important;\r\n font-size: 0.9rem !important;\r\n font-weight: 600 !important;\r\n text-transform: uppercase !important;\r\n letter-spacing: 2px !important;\r\n margin-bottom: 25px !important;\r\n box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3) !important;\r\n}\r\n\r\n.ws-story-title {\r\n font-size: 4rem !important;\r\n font-weight: 900 !important;\r\n background: linear-gradient(135deg, #667eea, #764ba2) !important;\r\n -webkit-background-clip: text !important;\r\n -webkit-text-fill-color: transparent !important;\r\n background-clip: text !important;\r\n margin-bottom: 25px !important;\r\n letter-spacing: -2px !important;\r\n padding: 10px 0 !important;\r\n line-height: 1.3 !important;\r\n}\r\n\r\n.ws-story-subtitle {\r\n font-size: 1.4rem !important;\r\n color: #d0d0e0 !important;\r\n max-width: 700px !important;\r\n margin: 0 auto !important;\r\n line-height: 1.8 !important;\r\n font-weight: 300 !important;\r\n}\r\n\r\n.ws-timeline {\r\n position: relative !important;\r\n max-width: 1000px !important;\r\n margin: 0 auto 120px !important;\r\n padding: 50px 0 !important;\r\n}\r\n\r\n.ws-timeline-line {\r\n position: absolute !important;\r\n left: 50% !important;\r\n top: -50px !important;\r\n bottom: -50px !important;\r\n width: 4px !important;\r\n background: linear-gradient(180deg, #667eea 0%, #764ba2 50%, #EE5946 100%) !important;\r\n transform: translateX(-50%) !important;\r\n border-radius: 2px !important;\r\n}\r\n\r\n.ws-timeline-item {\r\n position: relative !important;\r\n margin-bottom: 120px !important;\r\n}\r\n\r\n.ws-timeline-item:last-child {\r\n margin-bottom: 0 !important;\r\n}\r\n\r\n.ws-timeline-item:nth-child(odd) .ws-timeline-card {\r\n margin-right: 52% !important;\r\n padding-right: 100px !important;\r\n}\r\n\r\n.ws-timeline-item:nth-child(even) .ws-timeline-card {\r\n margin-left: 52% !important;\r\n padding-left: 100px !important;\r\n}\r\n\r\n.ws-timeline-card {\r\n position: relative !important;\r\n background: rgba(40, 40, 70, 0.95) !important;\r\n backdrop-filter: blur(10px) !important;\r\n padding: 50px 60px !important;\r\n border-radius: 25px !important;\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;\r\n border: 2px solid rgba(102, 126, 234, 0.4) !important;\r\n transition: all 0.4s ease !important;\r\n}\r\n\r\n.ws-timeline-card:hover {\r\n transform: translateY(-10px) !important;\r\n box-shadow: 0 30px 80px rgba(102, 126, 234, 0.4) !important;\r\n border-color: #667eea !important;\r\n}\r\n\r\n.ws-timeline-dot {\r\n position: absolute !important;\r\n left: 50% !important;\r\n top: 50% !important;\r\n transform: translate(-50%, -50%) !important;\r\n width: 70px !important;\r\n height: 70px !important;\r\n background: rgba(40, 40, 70, 1) !important;\r\n border: 5px solid #667eea !important;\r\n border-radius: 50% !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n box-shadow: 0 0 0 12px rgba(102, 126, 234, 0.15) !important;\r\n z-index: 3 !important;\r\n}\r\n\r\n.ws-timeline-item:nth-child(2) .ws-timeline-dot {\r\n border-color: #764ba2 !important;\r\n box-shadow: 0 0 0 12px rgba(118, 75, 162, 0.15) !important;\r\n}\r\n\r\n.ws-timeline-item:nth-child(3) .ws-timeline-dot {\r\n border-color: #EE5946 !important;\r\n box-shadow: 0 0 0 12px rgba(238, 89, 70, 0.15) !important;\r\n}\r\n\r\n.ws-timeline-dot svg {\r\n width: 32px !important;\r\n height: 32px !important;\r\n fill: #667eea !important;\r\n filter: brightness(1.3) !important;\r\n}\r\n\r\n.ws-timeline-item:nth-child(2) .ws-timeline-dot svg {\r\n fill: #764ba2 !important;\r\n}\r\n\r\n.ws-timeline-item:nth-child(3) .ws-timeline-dot svg {\r\n fill: #EE5946 !important;\r\n}\r\n\r\n.ws-timeline-year {\r\n display: inline-block !important;\r\n padding: 12px 28px !important;\r\n background: linear-gradient(135deg, #667eea, #764ba2) !important;\r\n color: white !important;\r\n border-radius: 50px !important;\r\n font-size: 1rem !important;\r\n font-weight: 700 !important;\r\n margin-bottom: 25px !important;\r\n box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3) !important;\r\n}\r\n\r\n.ws-timeline-card-title {\r\n font-size: 2rem !important;\r\n color: #ffffff !important;\r\n margin-bottom: 20px !important;\r\n font-weight: 800 !important;\r\n padding: 5px 0 !important;\r\n line-height: 1.4 !important;\r\n}\r\n\r\n.ws-timeline-description {\r\n color: #d0d0e0 !important;\r\n font-size: 1.1rem !important;\r\n line-height: 1.9 !important;\r\n margin: 0 !important;\r\n}\r\n\r\n.ws-timeline-description strong {\r\n color: #8a9aff !important;\r\n font-weight: 600 !important;\r\n}\r\n\r\n.ws-founders-section {\r\n text-align: center !important;\r\n background: rgba(40, 40, 70, 0.95) !important;\r\n backdrop-filter: blur(10px) !important;\r\n padding: 90px 50px !important;\r\n border-radius: 30px !important;\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;\r\n border: 2px solid rgba(102, 126, 234, 0.4) !important;\r\n}\r\n\r\n.ws-founders-header {\r\n margin-bottom: 70px !important;\r\n}\r\n\r\n.ws-founders-title {\r\n font-size: 3rem !important;\r\n font-weight: 900 !important;\r\n background: linear-gradient(135deg, #667eea, #764ba2) !important;\r\n -webkit-background-clip: text !important;\r\n -webkit-text-fill-color: transparent !important;\r\n background-clip: text !important;\r\n margin-bottom: 15px !important;\r\n padding: 8px 0 !important;\r\n line-height: 1.3 !important;\r\n}\r\n\r\n.ws-founders-subtitle {\r\n font-size: 1.2rem !important;\r\n color: #d0d0e0 !important;\r\n font-weight: 300 !important;\r\n margin: 0 !important;\r\n}\r\n\r\n.ws-founders-grid {\r\n display: grid !important;\r\n grid-template-columns: repeat(5, 1fr) !important;\r\n gap: 40px !important;\r\n max-width: 1100px !important;\r\n margin: 0 auto !important;\r\n}\r\n\r\n.ws-founder-card {\r\n text-align: center !important;\r\n}\r\n\r\n.ws-founder-icon {\r\n width: 110px !important;\r\n height: 110px !important;\r\n background: linear-gradient(135deg, #667eea, #764ba2) !important;\r\n border-radius: 50% !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n margin: 0 auto 20px !important;\r\n transition: all 0.4s ease !important;\r\n box-shadow: 0 15px 40px rgba(102, 126, 234, 0.3) !important;\r\n}\r\n\r\n.ws-founder-icon svg {\r\n width: 55px !important;\r\n height: 55px !important;\r\n fill: white !important;\r\n}\r\n\r\n.ws-founder-role {\r\n font-size: 1rem !important;\r\n color: #d0d0e0 !important;\r\n font-weight: 600 !important;\r\n line-height: 1.4 !important;\r\n margin: 0 !important;\r\n}\r\n\r\n\/* Responsive *\/\r\n@media (max-width: 968px) {\r\n .ws-story-title {\r\n font-size: 3rem !important;\r\n }\r\n .ws-timeline-line {\r\n left: 40px !important;\r\n }\r\n .ws-timeline-dot {\r\n left: 40px !important;\r\n width: 60px !important;\r\n height: 60px !important;\r\n }\r\n .ws-timeline-item:nth-child(odd) .ws-timeline-card,\r\n .ws-timeline-item:nth-child(even) .ws-timeline-card {\r\n margin-left: 120px !important;\r\n margin-right: 0 !important;\r\n padding-left: 40px !important;\r\n padding-right: 40px !important;\r\n }\r\n .ws-founders-grid {\r\n grid-template-columns: repeat(3, 1fr) !important;\r\n }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n .ws-story-section {\r\n padding: 80px 20px !important;\r\n }\r\n .ws-story-title {\r\n font-size: 2.2rem !important;\r\n }\r\n .ws-timeline-card {\r\n padding: 35px 30px !important;\r\n }\r\n .ws-founders-grid {\r\n grid-template-columns: repeat(2, 1fr) !important;\r\n }\r\n}\r\n<\/style>\r\n\r\n<div class=\"ws-story-wrapper\">\r\n <section class=\"ws-story-section\">\r\n <div class=\"ws-story-bg\">\r\n <div class=\"ws-floating-shape ws-shape-1\"><\/div>\r\n <div class=\"ws-floating-shape ws-shape-2\"><\/div>\r\n <div class=\"ws-floating-shape ws-shape-3\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"ws-story-container\">\r\n <div class=\"ws-story-header\">\r\n <div class=\"ws-story-badge\">\u6211\u4eec\u7684\u65c5\u7a0b<\/div>\r\n <h2 class=\"ws-story-title\">\u4e00\u5207\u662f\u5982\u4f55\u5f00\u59cb\u7684<\/h2>\r\n <p class=\"ws-story-subtitle\">\r\n \u4ece\u5927\u80c6\u7684\u613f\u666f\u5230\u6210\u4e3a\u57c3\u53ca\u9886\u5148\u7684\u6570\u5b57\u5316\u8f6c\u578b\u516c\u53f8\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"ws-timeline\">\r\n <div class=\"ws-timeline-line\"><\/div>\r\n\r\n <div class=\"ws-timeline-item\">\r\n <div class=\"ws-timeline-dot\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"ws-timeline-card\">\r\n <span class=\"ws-timeline-year\">2015<\/span>\r\n <h3 class=\"ws-timeline-card-title\">\u5960\u57fa\u4e4b\u5e74<\/h3>\r\n <p class=\"ws-timeline-description\">\r\n WebbingStone \u8bde\u751f\u4e8e\u57c3\u53ca\u5f00\u7f57\uff0c\u7531<strong>5\u4f4d\u5177\u6709\u8fdc\u89c1\u7684\u80a1\u4e1c<\/strong>\u521b\u7acb\uff0c\u4ed6\u4eec\u62e5\u6709\u4e0d\u540c\u7684\u4e13\u4e1a\u9886\u57df\uff1a\u5fae\u8f6f\u5f00\u53d1\u8d44\u6df1\u4e13\u5bb6\uff0814-25\u5e74\u7ecf\u9a8c\uff09\u3001\u8425\u9500\u603b\u76d1\u3001\u9879\u76ee\u7ecf\u7406\u548c\u6570\u5b57\u5316\u8f6c\u578b\u4e13\u5bb6\u3002\u4ed6\u4eec\u5171\u540c\u7684\u4fe1\u5ff5\u662f\uff1a\u5168\u9762\u62e5\u62b1\u6570\u5b57\u5316\u8f6c\u578b\u4e0d\u4ec5\u662f\u6210\u529f\u7684\u5173\u952e\uff0c\u66f4\u662f\u751f\u5b58\u7684\u5fc5\u8981\u3002\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ws-timeline-item\">\r\n <div class=\"ws-timeline-dot\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"ws-timeline-card\">\r\n <span class=\"ws-timeline-year\">2016-2020<\/span>\r\n <h3 class=\"ws-timeline-card-title\">\u5168\u7403\u6269\u5f20<\/h3>\r\n <p class=\"ws-timeline-description\">\r\n \u5feb\u901f\u589e\u957f\u4f7f\u6211\u4eec\u5efa\u7acb\u4e86<strong>\u5168\u7403\u4e1a\u52a1<\/strong>\uff0c\u5728\u7f8e\u56fd\u3001\u52a0\u62ff\u5927\u3001\u963f\u8054\u914b\u3001\u6c99\u7279\u963f\u62c9\u4f2f\u3001\u82f1\u56fd\u548c\u4e2d\u56fd\u8bbe\u7acb\u4e86\u529e\u4e8b\u5904\u548c\u4ee3\u8868\u5904\u3002\u6211\u4eec\u4ece\u4e00\u5bb6\u672c\u5730\u521d\u521b\u516c\u53f8\u53d1\u5c55\u6210\u4e3a<strong>\u4e2d\u4e1c\u5317\u975e\u5730\u533a\u7684\u6570\u5b57\u5316\u8f6c\u578b\u9886\u519b\u4f01\u4e1a<\/strong>\uff0c\u5728\u5404\u5927\u6d32\u63d0\u4f9b\u5f00\u53d1\u3001\u79fb\u52a8\u5e94\u7528\u548c\u6570\u5b57\u8425\u9500\u65b9\u9762\u7684\u521b\u65b0\u89e3\u51b3\u65b9\u6848\u3002\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ws-timeline-item\">\r\n <div class=\"ws-timeline-dot\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"ws-timeline-card\">\r\n <span class=\"ws-timeline-year\">\u4eca\u5929<\/span>\r\n <h3 class=\"ws-timeline-card-title\">\u5f15\u9886\u6570\u5b57\u5316\u8f6c\u578b<\/h3>\r\n <p class=\"ws-timeline-description\">\r\n \u73b0\u5728\u6211\u4eec\u4e3a<strong>530\u591a\u5bb6\u5ba2\u6237<\/strong>\u63d0\u4f9b\u670d\u52a1\uff0c\u6210\u529f\u4ea4\u4ed8\u4e86<strong>760\u591a\u4e2a\u9879\u76ee<\/strong>\uff0c\u4e0e<strong>\u8054\u5408\u56fd\u6559\u79d1\u6587\u7ec4\u7ec7\u3001\u5bcc\u58eb\u80f6\u7247\u548c\u57c3\u53ca\u65c5\u6e38\u90e8<\/strong>\u7b49\u77e5\u540d\u673a\u6784\u5efa\u7acb\u4e86\u5408\u4f5c\u4f19\u4f34\u5173\u7cfb\u3002\u6211\u4eec\u7ee7\u7eed\u5728\u5f00\u53d1\u3001\u79fb\u52a8\u5e94\u7528\u548c\u6570\u5b57\u8425\u9500\u9886\u57df\u878d\u5408\u521b\u65b0\uff0c\u5728\u4e0d\u65ad\u53d1\u5c55\u7684\u6570\u5b57\u5316\u8f6c\u578b\u9886\u57df\u4fdd\u6301\u9886\u5148\u5730\u4f4d\u3002\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ws-founders-section\">\r\n <div class=\"ws-founders-header\">\r\n <h3 class=\"ws-founders-title\">\u7531\u4e13\u5bb6\u521b\u65b0\u8005\u6253\u9020<\/h3>\r\n <p class=\"ws-founders-subtitle\">\u4e94\u4f4d\u80a1\u4e1c\uff0c\u4e00\u4e2a\u613f\u666f\u2014\u2014\u63a8\u52a8\u6570\u5b57\u5316\u8f6c\u578b<\/p>\r\n <\/div>\r\n \r\n <div class=\"ws-founders-grid\">\r\n <div class=\"ws-founder-card\">\r\n <div class=\"ws-founder-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <p class=\"ws-founder-role\">\u5fae\u8f6f<br>\u5f00\u53d1\u4e13\u5bb6<\/p>\r\n <\/div>\r\n\r\n <div class=\"ws-founder-card\">\r\n <div class=\"ws-founder-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <p class=\"ws-founder-role\">\u8425\u9500<br>\u603b\u76d1<\/p>\r\n <\/div>\r\n\r\n <div class=\"ws-founder-card\">\r\n <div class=\"ws-founder-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <p class=\"ws-founder-role\">\u9879\u76ee<br>\u7ecf\u7406<\/p>\r\n <\/div>\r\n\r\n <div class=\"ws-founder-card\">\r\n <div class=\"ws-founder-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9 11H7V9h2v2zm4 0h-2V9h2v2zm4 0h-2V9h2v2z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <p class=\"ws-founder-role\">\u6570\u5b57\u6218\u7565<br>\u4e13\u5bb6<\/p>\r\n <\/div>\r\n\r\n <div class=\"ws-founder-card\">\r\n <div class=\"ws-founder-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <p class=\"ws-founder-role\">\u6280\u672f<br>\u67b6\u6784\u5e08<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {\r\n gsap.registerPlugin(ScrollTrigger);\r\n \r\n \/\/ Animate shapes\r\n gsap.to('.ws-shape-1', {x: 100, y: 50, rotation: 360, duration: 20, repeat: -1, yoyo: true, ease: 'none'});\r\n gsap.to('.ws-shape-2', {x: -80, y: -60, rotation: -360, duration: 25, repeat: -1, yoyo: true, ease: 'none'});\r\n gsap.to('.ws-shape-3', {x: 60, y: 80, scale: 1.2, duration: 18, repeat: -1, yoyo: true, ease: 'none'});\r\n }\r\n})();\r\n<\/script>\r\n<!-- END: Copy to here for WordPress -->\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"porto_stretch_css stretch_row_content_css elementor-element elementor-element-cef393a e-con-full e-flex e-con e-parent\" data-id=\"cef393a\" data-element_type=\"container\" data-e-type=\"container\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-8067ecd elementor-widget elementor-widget-html\" data-id=\"8067ecd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-CN\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>\u5173\u4e8e WebbingStone - \u7b2c3\u90e8\u5206\uff1a\u4f7f\u547d\u4e0e\u613f\u666f<\/title>\r\n<style>\r\n:root {\r\n --color-primary: #667eea;\r\n --color-secondary: #764ba2;\r\n --color-accent: #EE5946;\r\n}\r\n\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\r\n overflow-x: hidden;\r\n background: #0a0a0f;\r\n}\r\n\r\n\/* Mission & Vision Section *\/\r\n.mission-vision-section {\r\n position: relative;\r\n padding: 120px 20px;\r\n background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);\r\n overflow: hidden;\r\n}\r\n\r\n\/* Animated Background *\/\r\n.floating-shapes {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n opacity: 0.15;\r\n}\r\n\r\n.shape {\r\n position: absolute;\r\n border-radius: 30% 70% 70% 30% \/ 30% 30% 70% 70%;\r\n background: var(--color-primary);\r\n animation: morph 20s infinite ease-in-out;\r\n}\r\n\r\n.shape-1 {\r\n width: 300px;\r\n height: 300px;\r\n top: 10%;\r\n left: 5%;\r\n animation-delay: 0s;\r\n}\r\n\r\n.shape-2 {\r\n width: 200px;\r\n height: 200px;\r\n top: 60%;\r\n right: 10%;\r\n animation-delay: 3s;\r\n}\r\n\r\n@keyframes morph {\r\n 0%, 100% {\r\n border-radius: 30% 70% 70% 30% \/ 30% 30% 70% 70%;\r\n transform: rotate(0deg) scale(1);\r\n }\r\n 25% {\r\n border-radius: 58% 42% 75% 25% \/ 76% 46% 54% 24%;\r\n transform: rotate(90deg) scale(1.1);\r\n }\r\n 50% {\r\n border-radius: 50% 50% 33% 67% \/ 55% 27% 73% 45%;\r\n transform: rotate(180deg) scale(0.9);\r\n }\r\n 75% {\r\n border-radius: 33% 67% 58% 42% \/ 63% 68% 32% 37%;\r\n transform: rotate(270deg) scale(1.05);\r\n }\r\n}\r\n\r\n.mv-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 2;\r\n}\r\n\r\n\/* Section Header *\/\r\n.mv-header {\r\n text-align: center;\r\n margin-bottom: 80px;\r\n animation: fadeInDown 0.8s ease;\r\n}\r\n\r\n.mv-badge {\r\n display: inline-block;\r\n padding: 10px 25px;\r\n background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);\r\n color: white;\r\n border-radius: 50px;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n margin-bottom: 20px;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.mv-title {\r\n font-size: 3.5rem;\r\n color: #ffffff;\r\n margin-bottom: 20px;\r\n font-weight: 800;\r\n padding: 8px 0;\r\n line-height: 1.3;\r\n}\r\n\r\n.mv-subtitle {\r\n font-size: 1.3rem;\r\n color: #b8b8c8;\r\n max-width: 700px;\r\n margin: 0 auto;\r\n line-height: 1.8;\r\n}\r\n\r\n\/* Mission & Vision Grid *\/\r\n.mv-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 50px;\r\n margin-bottom: 80px;\r\n}\r\n\r\n.mv-card {\r\n background: rgba(26, 26, 46, 0.8);\r\n backdrop-filter: blur(10px);\r\n border-radius: 30px;\r\n padding: 50px;\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\r\n border: 2px solid rgba(102, 126, 234, 0.2);\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.5s ease;\r\n animation: fadeInUp 0.8s ease backwards;\r\n}\r\n\r\n.mv-card:nth-child(1) { animation-delay: 0.2s; }\r\n.mv-card:nth-child(2) { animation-delay: 0.4s; }\r\n\r\n.mv-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 5px;\r\n background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);\r\n transform: scaleX(0);\r\n transform-origin: left;\r\n transition: transform 0.5s ease;\r\n}\r\n\r\n.mv-card:hover::before {\r\n transform: scaleX(1);\r\n}\r\n\r\n.mv-card:hover {\r\n transform: translateY(-15px);\r\n box-shadow: 0 30px 80px rgba(102, 126, 234, 0.4);\r\n border-color: var(--color-primary);\r\n background: rgba(26, 26, 46, 0.95);\r\n}\r\n\r\n.mv-card-icon {\r\n width: 80px;\r\n height: 80px;\r\n background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);\r\n border-radius: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 30px;\r\n transition: all 0.5s ease;\r\n}\r\n\r\n.mv-card:nth-child(2) .mv-card-icon {\r\n background: linear-gradient(135deg, var(--color-accent) 0%, #d94636 100%);\r\n}\r\n\r\n.mv-card:hover .mv-card-icon {\r\n transform: scale(1.1) rotate(5deg);\r\n box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);\r\n}\r\n\r\n.mv-card-icon svg {\r\n width: 40px;\r\n height: 40px;\r\n fill: white;\r\n}\r\n\r\n.mv-card-title {\r\n font-size: 2.5rem;\r\n color: #ffffff;\r\n margin-bottom: 25px;\r\n font-weight: 700;\r\n padding: 5px 0;\r\n line-height: 1.4;\r\n}\r\n\r\n.mv-card-description {\r\n font-size: 1.15rem;\r\n color: #b8b8c8;\r\n line-height: 1.9;\r\n margin-bottom: 30px;\r\n}\r\n\r\n.mv-card-highlights {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n}\r\n\r\n.highlight-tag {\r\n padding: 10px 20px;\r\n background: rgba(102, 126, 234, 0.15);\r\n color: #9aa8f5;\r\n border-radius: 50px;\r\n font-size: 0.95rem;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n border: 1px solid rgba(102, 126, 234, 0.3);\r\n}\r\n\r\n.mv-card:nth-child(2) .highlight-tag {\r\n background: rgba(238, 89, 70, 0.15);\r\n color: #ff9d8f;\r\n border-color: rgba(238, 89, 70, 0.3);\r\n}\r\n\r\n.highlight-tag:hover {\r\n background: var(--color-primary);\r\n color: white;\r\n transform: translateY(-3px);\r\n border-color: var(--color-primary);\r\n}\r\n\r\n.mv-card:nth-child(2) .highlight-tag:hover {\r\n background: var(--color-accent);\r\n border-color: var(--color-accent);\r\n}\r\n\r\n\/* Values Section *\/\r\n.values-section {\r\n margin-top: 100px;\r\n}\r\n\r\n.values-title {\r\n text-align: center;\r\n font-size: 2.8rem;\r\n color: #ffffff;\r\n margin-bottom: 60px;\r\n font-weight: 700;\r\n padding: 6px 0;\r\n line-height: 1.3;\r\n}\r\n\r\n.values-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 30px;\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n}\r\n\r\n.value-card {\r\n background: rgba(26, 26, 46, 0.8);\r\n backdrop-filter: blur(10px);\r\n padding: 40px 30px;\r\n border-radius: 20px;\r\n text-align: center;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);\r\n transition: all 0.4s ease;\r\n border: 2px solid rgba(102, 126, 234, 0.15);\r\n animation: fadeInUp 0.8s ease backwards;\r\n}\r\n\r\n.value-card:nth-child(1) { animation-delay: 0.6s; }\r\n.value-card:nth-child(2) { animation-delay: 0.7s; }\r\n.value-card:nth-child(3) { animation-delay: 0.8s; }\r\n.value-card:nth-child(4) { animation-delay: 0.9s; }\r\n\r\n.value-card:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 20px 50px rgba(102, 126, 234, 0.3);\r\n border-color: var(--color-primary);\r\n background: rgba(26, 26, 46, 0.95);\r\n}\r\n\r\n.value-icon {\r\n width: 70px;\r\n height: 70px;\r\n background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 20px;\r\n transition: all 0.4s ease;\r\n}\r\n\r\n.value-card:hover .value-icon {\r\n background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);\r\n transform: scale(1.1);\r\n}\r\n\r\n.value-icon svg {\r\n width: 35px;\r\n height: 35px;\r\n fill: var(--color-primary);\r\n transition: fill 0.4s ease;\r\n}\r\n\r\n.value-card:hover .value-icon svg {\r\n fill: white;\r\n}\r\n\r\n.value-title {\r\n font-size: 1.4rem;\r\n color: #ffffff;\r\n margin-bottom: 12px;\r\n font-weight: 700;\r\n}\r\n\r\n.value-description {\r\n color: #b8b8c8;\r\n font-size: 1rem;\r\n line-height: 1.7;\r\n}\r\n\r\n\/* Animations *\/\r\n@keyframes fadeInDown {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n@keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(40px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n\/* Responsive *\/\r\n@media (max-width: 1200px) {\r\n .values-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n .mv-grid {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n\r\n .values-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .mv-title {\r\n font-size: 2.5rem;\r\n padding: 6px 0;\r\n }\r\n\r\n .mv-card {\r\n padding: 35px;\r\n }\r\n\r\n .mv-card-title {\r\n font-size: 2rem;\r\n padding: 4px 0;\r\n }\r\n\r\n .values-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .values-title {\r\n padding: 5px 0;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .mission-vision-section {\r\n padding: 80px 20px;\r\n }\r\n\r\n .mv-title {\r\n font-size: 2rem;\r\n padding: 5px 0;\r\n }\r\n\r\n .mv-card {\r\n padding: 30px 25px;\r\n }\r\n\r\n .values-title {\r\n font-size: 2rem;\r\n padding: 4px 0;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<section class=\"mission-vision-section\">\r\n <!-- Animated Background -->\r\n <div class=\"floating-shapes\">\r\n <div class=\"shape shape-1\"><\/div>\r\n <div class=\"shape shape-2\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"mv-container\">\r\n <!-- Section Header -->\r\n <div class=\"mv-header\">\r\n <div class=\"mv-badge\">\u9a71\u52a8\u6211\u4eec\u7684\u529b\u91cf<\/div>\r\n <h2 class=\"mv-title\">\u4f7f\u547d\u4e0e\u613f\u666f<\/h2>\r\n <p class=\"mv-subtitle\">\u7531\u521b\u65b0\u548c\u4eba\u5de5\u667a\u80fd\u9a71\u52a8\uff0c\u5728\u5168\u7403\u5404\u884c\u4e1a\u63d0\u4f9b\u5353\u8d8a\u670d\u52a1<\/p>\r\n <\/div>\r\n\r\n <!-- Mission & Vision Cards -->\r\n <div class=\"mv-grid\">\r\n <!-- Mission Card -->\r\n <div class=\"mv-card\">\r\n <div class=\"mv-card-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"mv-card-title\">\u6211\u4eec\u7684\u4f7f\u547d<\/h3>\r\n <p class=\"mv-card-description\">\r\n \u5728 WebbingStone\uff0c\u6211\u4eec\u5229\u7528\u524d\u6cbf\u521b\u65b0\u548c\u4eba\u5de5\u667a\u80fd\u6280\u672f\uff0c\u63d0\u4f9b\u4e16\u754c\u7ea7\u7684\u7f51\u7ad9\u5f00\u53d1\u3001\u79fb\u52a8\u5e94\u7528\u548c\u6570\u5b57\u8425\u9500\u89e3\u51b3\u65b9\u6848\u3002\u901a\u8fc7\u6df1\u5165\u4e86\u89e3\u5168\u7403\u5404\u884c\u4e1a\u7684\u72ec\u7279\u6311\u6218\uff0c\u6211\u4eec\u6253\u9020\u5177\u6709\u5f71\u54cd\u529b\u548c\u53ef\u6301\u7eed\u6027\u7684\u6570\u5b57\u5316\u8f6c\u578b\u89e3\u51b3\u65b9\u6848\uff0c\u8ba9\u5ba2\u6237\u5728\u7ade\u4e89\u4e2d\u4fdd\u6301\u9886\u5148\u3002\r\n <\/p>\r\n <div class=\"mv-card-highlights\">\r\n <span class=\"highlight-tag\">\u4eba\u5de5\u667a\u80fd\u9a71\u52a8<\/span>\r\n <span class=\"highlight-tag\">\u5168\u7403\u8986\u76d6<\/span>\r\n <span class=\"highlight-tag\">\u521b\u65b0\u4f18\u5148<\/span>\r\n <span class=\"highlight-tag\">\u884c\u4e1a\u4e13\u957f<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Vision Card -->\r\n <div class=\"mv-card\">\r\n <div class=\"mv-card-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"mv-card-title\">\u6211\u4eec\u7684\u613f\u666f<\/h3>\r\n <p class=\"mv-card-description\">\r\n \u6211\u4eec\u81f4\u529b\u4e8e\u5f15\u9886\u6570\u5b57\u5316\u8f6c\u578b\u9886\u57df\uff0c\u4e0e\u5168\u7403\u5404\u884c\u4e1a\u5408\u4f5c\u2014\u2014\u4ece\u8054\u5408\u56fd\u6559\u79d1\u6587\u7ec4\u7ec7\u3001\u6b27\u76df\u53ca\u5176\u5206\u652f\u673a\u6784\u7b49\u653f\u5e9c\u5b9e\u4f53\u5230\u5168\u7403\u79c1\u8425\u4f01\u4e1a\u3002\u6211\u4eec\u7684\u613f\u666f\u662f\u901a\u8fc7\u6301\u7eed\u521b\u65b0\u548c\u4eba\u5de5\u667a\u80fd\u6574\u5408\u4fdd\u6301\u9886\u5148\u5730\u4f4d\uff0c\u63d0\u4f9b\u5b9a\u4e49\u5408\u4f5c\u4f19\u4f34\u6210\u529f\u7684\u7f51\u7ad9\u5f00\u53d1\u3001\u79fb\u52a8\u5e94\u7528\u548c\u6570\u5b57\u8425\u9500\u5353\u8d8a\u670d\u52a1\u3002\r\n <\/p>\r\n <div class=\"mv-card-highlights\">\r\n <span class=\"highlight-tag\">\u8054\u5408\u56fd\u4e0e\u6b27\u76df\u5408\u4f5c\u4f19\u4f34<\/span>\r\n <span class=\"highlight-tag\">\u5168\u7403\u670d\u52a1<\/span>\r\n <span class=\"highlight-tag\">\u9762\u5411\u672a\u6765<\/span>\r\n <span class=\"highlight-tag\">\u8ffd\u6c42\u5353\u8d8a<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Core Values -->\r\n <div class=\"values-section\">\r\n <h3 class=\"values-title\">\u6211\u4eec\u7684\u6838\u5fc3\u4ef7\u503c\u89c2<\/h3>\r\n <div class=\"values-grid\">\r\n <div class=\"value-card\">\r\n <div class=\"value-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h4 class=\"value-title\">\u8bda\u4fe1\u4e0e\u4fe1\u4efb<\/h4>\r\n <p class=\"value-description\">\u6211\u4eec\u91cd\u89c6\u900f\u660e\u5ea6\u3001\u8bda\u5b9e\uff0c\u5e76\u901a\u8fc7\u5f00\u653e\u6c9f\u901a\u548c\u76f8\u4e92\u5c0a\u91cd\u5efa\u7acb\u6301\u4e45\u5173\u7cfb<\/p>\r\n <\/div>\r\n\r\n <div class=\"value-card\">\r\n <div class=\"value-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4c-1.48 0-2.85.43-4.01 1.17l1.46 1.46C10.21 6.23 11.08 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3 0 1.13-.64 2.11-1.56 2.62l1.45 1.45C23.16 18.16 24 16.68 24 15c0-2.64-2.05-4.78-4.65-4.96zM3 5.27l2.75 2.74C2.56 8.15 0 10.77 0 14c0 3.31 2.69 6 6 6h11.73l2 2L21 20.73 4.27 4 3 5.27zM7.73 10l8 8H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h1.73z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h4 class=\"value-title\">\u521b\u65b0\u4e0e\u4eba\u5de5\u667a\u80fd<\/h4>\r\n <p class=\"value-description\">\u5229\u7528\u4eba\u5de5\u667a\u80fd\u548c\u65b0\u5174\u6280\u672f\u63d0\u4f9b\u4e0b\u4e00\u4ee3\u89e3\u51b3\u65b9\u6848<\/p>\r\n <\/div>\r\n\r\n <div class=\"value-card\">\r\n <div class=\"value-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h4 class=\"value-title\">\u884c\u4e1a\u4e13\u957f<\/h4>\r\n <p class=\"value-description\">\u5728\u5168\u7403\u5404\u884c\u4e1a\u62e5\u6709\u6df1\u539a\u7ecf\u9a8c\uff0c\u4ece\u653f\u5e9c\u7ec4\u7ec7\u5230\u79c1\u8425\u4f01\u4e1a<\/p>\r\n <\/div>\r\n\r\n <div class=\"value-card\">\r\n <div class=\"value-icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h4 class=\"value-title\">\u5168\u7403\u5353\u8d8a<\/h4>\r\n <p class=\"value-description\">\u5728\u5404\u884c\u4e1a\u548c\u5404\u5927\u6d32\u63d0\u4f9b\u4e16\u754c\u7ea7\u670d\u52a1\uff0c\u4e0e\u77e5\u540d\u673a\u6784\u5efa\u7acb\u5408\u4f5c\u4f19\u4f34\u5173\u7cfb<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"porto_stretch_css stretch_row_css elementor-element elementor-element-dbf8ba0 e-con-full e-flex e-con e-parent\" data-id=\"dbf8ba0\" data-element_type=\"container\" data-e-type=\"container\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-769b0c1 elementor-widget elementor-widget-html\" data-id=\"769b0c1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-CN\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>\u6211\u4eec\u7684\u56e2\u961f - WebbingStone<\/title>\r\n<style>\r\n:root {\r\n --color-primary: #667eea;\r\n --color-secondary: #764ba2;\r\n --color-accent: #EE5946;\r\n}\r\n\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\r\n overflow-x: hidden;\r\n background: #0a0a0f;\r\n}\r\n\r\n\/* Team Section *\/\r\n.team-section {\r\n position: relative;\r\n padding: 120px 20px;\r\n background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);\r\n overflow: hidden;\r\n}\r\n\r\n\/* Animated Background *\/\r\n.team-bg {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n opacity: 0.15;\r\n}\r\n\r\n.floating-shape {\r\n position: absolute;\r\n border-radius: 50%;\r\n filter: blur(60px);\r\n}\r\n\r\n.shape-1 {\r\n width: 400px;\r\n height: 400px;\r\n background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));\r\n top: 10%;\r\n left: -10%;\r\n animation: float1 20s infinite ease-in-out;\r\n}\r\n\r\n.shape-2 {\r\n width: 350px;\r\n height: 350px;\r\n background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));\r\n bottom: 20%;\r\n right: -10%;\r\n animation: float2 25s infinite ease-in-out;\r\n}\r\n\r\n@keyframes float1 {\r\n 0%, 100% { transform: translate(0, 0) rotate(0deg); }\r\n 50% { transform: translate(50px, 50px) rotate(180deg); }\r\n}\r\n\r\n@keyframes float2 {\r\n 0%, 100% { transform: translate(0, 0) rotate(0deg); }\r\n 50% { transform: translate(-50px, -50px) rotate(-180deg); }\r\n}\r\n\r\n.team-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 2;\r\n}\r\n\r\n\/* Section Header *\/\r\n.team-header {\r\n text-align: center;\r\n margin-bottom: 80px;\r\n}\r\n\r\n.team-badge {\r\n display: inline-block;\r\n padding: 10px 25px;\r\n background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);\r\n color: white;\r\n border-radius: 50px;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n margin-bottom: 20px;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.team-title {\r\n font-size: 3.5rem;\r\n color: #ffffff;\r\n margin-bottom: 20px;\r\n font-weight: 800;\r\n padding: 8px 0;\r\n line-height: 1.3;\r\n}\r\n\r\n.team-subtitle {\r\n font-size: 1.3rem;\r\n color: #b8b8c8;\r\n max-width: 700px;\r\n margin: 0 auto;\r\n line-height: 1.8;\r\n}\r\n\r\n\/* Team Grid *\/\r\n.team-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 40px;\r\n margin-bottom: 40px;\r\n}\r\n\r\n.team-grid.last-row {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 40px;\r\n max-width: 100%;\r\n margin: 0 auto;\r\n}\r\n\r\n.team-grid.last-row .team-card {\r\n grid-column: 2;\r\n}\r\n\r\n.team-card {\r\n background: rgba(26, 26, 46, 0.8);\r\n backdrop-filter: blur(10px);\r\n border-radius: 25px;\r\n padding: 0;\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\r\n border: 2px solid rgba(102, 126, 234, 0.2);\r\n transition: all 0.5s ease;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n\r\n.team-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 5px;\r\n background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);\r\n transform: scaleX(0);\r\n transform-origin: left;\r\n transition: transform 0.5s ease;\r\n}\r\n\r\n.team-card:hover::before {\r\n transform: scaleX(1);\r\n}\r\n\r\n.team-card:hover {\r\n transform: translateY(-15px);\r\n box-shadow: 0 30px 80px rgba(102, 126, 234, 0.4);\r\n border-color: var(--color-primary);\r\n background: rgba(26, 26, 46, 0.95);\r\n}\r\n\r\n.team-image {\r\n width: 100%;\r\n height: 320px;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n\r\n.team-image img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center top;\r\n transition: transform 0.5s ease;\r\n}\r\n\r\n.team-card:hover .team-image img {\r\n transform: scale(1.1);\r\n}\r\n\r\n.team-content {\r\n padding: 30px 25px;\r\n text-align: center;\r\n}\r\n\r\n.team-member-name {\r\n font-size: 1.5rem;\r\n color: #ffffff;\r\n margin-bottom: 8px;\r\n font-weight: 700;\r\n}\r\n\r\n.team-member-position {\r\n font-size: 1rem;\r\n color: #9aa8f5;\r\n margin-bottom: 15px;\r\n font-weight: 500;\r\n text-transform: capitalize;\r\n}\r\n\r\n.team-social {\r\n display: flex;\r\n justify-content: center;\r\n gap: 12px;\r\n margin-top: 15px;\r\n}\r\n\r\n.social-link {\r\n width: 40px;\r\n height: 40px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: rgba(102, 126, 234, 0.15);\r\n border-radius: 50%;\r\n color: var(--color-primary);\r\n font-size: 1.1rem;\r\n transition: all 0.3s ease;\r\n text-decoration: none;\r\n border: 1px solid rgba(102, 126, 234, 0.3);\r\n}\r\n\r\n.social-link:hover {\r\n background: var(--color-primary);\r\n color: white;\r\n transform: translateY(-3px);\r\n border-color: var(--color-primary);\r\n}\r\n\r\n\/* Responsive *\/\r\n@media (max-width: 1024px) {\r\n .team-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .team-grid.last-row {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .team-grid.last-row .team-card {\r\n grid-column: 1 \/ 3;\r\n max-width: 50%;\r\n margin: 0 auto;\r\n }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .team-title {\r\n font-size: 2.5rem;\r\n padding: 6px 0;\r\n }\r\n\r\n .team-grid {\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n }\r\n\r\n .team-grid.last-row {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .team-grid.last-row .team-card {\r\n grid-column: 1;\r\n max-width: 100%;\r\n }\r\n\r\n .team-image {\r\n height: 280px;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .team-section {\r\n padding: 80px 20px;\r\n }\r\n\r\n .team-title {\r\n font-size: 2rem;\r\n padding: 5px 0;\r\n }\r\n\r\n .team-image {\r\n height: 250px;\r\n }\r\n}\r\n<\/style>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n<\/head>\r\n<body>\r\n<section class=\"team-section\">\r\n <!-- Animated Background -->\r\n <div class=\"team-bg\">\r\n <div class=\"floating-shape shape-1\"><\/div>\r\n <div class=\"floating-shape shape-2\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"team-container\">\r\n <!-- Section Header -->\r\n <div class=\"team-header\">\r\n <div class=\"team-badge\">\u8ba4\u8bc6\u6211\u4eec\u7684\u56e2\u961f<\/div>\r\n <h2 class=\"team-title\">\u6210\u529f\u80cc\u540e\u7684\u56e2\u961f<\/h2>\r\n <p class=\"team-subtitle\">\u4e13\u4e1a\u56e2\u961f\u63a8\u52a8\u521b\u65b0\uff0c\u63d0\u4f9b\u5353\u8d8a\u670d\u52a1<\/p>\r\n <\/div>\r\n\r\n <!-- First Row: 3 Members -->\r\n <div class=\"team-grid\">\r\n <!-- Amr Zaki -->\r\n <div class=\"team-card\">\r\n <div class=\"team-image\">\r\n <img decoding=\"async\" src=\"https:\/\/webbingstone.com\/wp-content\/uploads\/2021\/08\/AMR-copy-Custom.jpg\" alt=\"Amr Zaki\">\r\n <\/div>\r\n <div class=\"team-content\">\r\n <h3 class=\"team-member-name\">Amr Zaki<\/h3>\r\n <p class=\"team-member-position\">\u603b\u7ecf\u7406<\/p>\r\n <div class=\"team-social\">\r\n <a href=\"https:\/\/www.linkedin.com\/in\/zakiamr\/\" target=\"_blank\" rel=\"nofollow noopener\" class=\"social-link\">\r\n <i class=\"fab fa-linkedin\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Muhammad Kamal -->\r\n <div class=\"team-card\">\r\n <div class=\"team-image\">\r\n <img decoding=\"async\" src=\"https:\/\/webbingstone.com\/wp-content\/uploads\/2021\/08\/MOHAMED-copy-Custom.jpg\" alt=\"Muhammad Kamal\">\r\n <\/div>\r\n <div class=\"team-content\">\r\n <h3 class=\"team-member-name\">Muhammad Kamal<\/h3>\r\n <p class=\"team-member-position\">\u9879\u76ee\u7ecf\u7406<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Abdallah Adel -->\r\n <div class=\"team-card\">\r\n <div class=\"team-image\">\r\n <img decoding=\"async\" src=\"https:\/\/webbingstone.com\/wp-content\/uploads\/2021\/08\/abdallah-copy-Custom.jpg\" alt=\"Abdallah Adel\">\r\n <\/div>\r\n <div class=\"team-content\">\r\n <h3 class=\"team-member-name\">Abdallah Adel<\/h3>\r\n <p class=\"team-member-position\">\u9ad8\u7ea7\u7f51\u7ad9\u5f00\u53d1\u5de5\u7a0b\u5e08<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Second Row: 3 Members -->\r\n <div class=\"team-grid\">\r\n <!-- Mahitab shamseldeen -->\r\n <div class=\"team-card\">\r\n <div class=\"team-image\">\r\n <img decoding=\"async\" src=\"https:\/\/webbingstone.com\/wp-content\/uploads\/2024\/10\/Mahy.jpg\" alt=\"Mahitab Shamseldeen\">\r\n <\/div>\r\n <div class=\"team-content\">\r\n <h3 class=\"team-member-name\">Mahitab Shamseldeen<\/h3>\r\n <p class=\"team-member-position\">\u6570\u5b57\u8425\u9500\u7ecf\u7406<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Nour Eldein Mohamad -->\r\n <div class=\"team-card\">\r\n <div class=\"team-image\">\r\n <img decoding=\"async\" src=\"https:\/\/webbingstone.com\/wp-content\/uploads\/2024\/10\/Nour.jpg\" alt=\"Nour Eldein Mohamad\">\r\n <\/div>\r\n <div class=\"team-content\">\r\n <h3 class=\"team-member-name\">Nour Eldein Mohamad<\/h3>\r\n <p class=\"team-member-position\">\u5e73\u9762\u8bbe\u8ba1\u5e08<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Merihan Raafat -->\r\n <div class=\"team-card\">\r\n <div class=\"team-image\">\r\n <img decoding=\"async\" src=\"https:\/\/webbingstone.com\/wp-content\/uploads\/2023\/09\/d-jpg.webp\" alt=\"Merihan Raafat\">\r\n <\/div>\r\n <div class=\"team-content\">\r\n <h3 class=\"team-member-name\">Merihan Raafat<\/h3>\r\n <p class=\"team-member-position\">\u793e\u4ea4\u5a92\u4f53\u7ba1\u7406\u5458<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Third Row: 1 Member Centered -->\r\n <div class=\"team-grid last-row\">\r\n <!-- Ahmed Magdy -->\r\n <div class=\"team-card\">\r\n <div class=\"team-image\">\r\n <img decoding=\"async\" src=\"https:\/\/webbingstone.com\/wp-content\/uploads\/2024\/10\/Ahmad.jpg\" alt=\"Ahmed Magdy\">\r\n <\/div>\r\n <div class=\"team-content\">\r\n <h3 class=\"team-member-name\">Ahmed Magdy<\/h3>\r\n <p class=\"team-member-position\">\u9500\u552e\u4e3b\u7ba1<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u5173\u4e8e WebbingStone – \u4e3b\u9875\u90e8\u5206 \u6570\u5b57\u5316\u8f6c\u578b\u516c\u53f8 \u60a8\u901a\u5f80 \u6570\u5b57\u5316\u8f6c\u578b\u7684\u57fa\u77f3 \u4ece\u7f51\u7ad9\u5f00\u53d1 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1635","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/webbingstone.com\/zh-hans\/wp-json\/wp\/v2\/pages\/1635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webbingstone.com\/zh-hans\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webbingstone.com\/zh-hans\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webbingstone.com\/zh-hans\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/webbingstone.com\/zh-hans\/wp-json\/wp\/v2\/comments?post=1635"}],"version-history":[{"count":5,"href":"https:\/\/webbingstone.com\/zh-hans\/wp-json\/wp\/v2\/pages\/1635\/revisions"}],"predecessor-version":[{"id":21560,"href":"https:\/\/webbingstone.com\/zh-hans\/wp-json\/wp\/v2\/pages\/1635\/revisions\/21560"}],"wp:attachment":[{"href":"https:\/\/webbingstone.com\/zh-hans\/wp-json\/wp\/v2\/media?parent=1635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}