.vertical_middle2 { display: flex; align-items: center; } .u-text-blue { color: #378dff !important; } .installation-gallery { /* padding: 64px 0 72px; */ overflow: hidden; /* background: #f4f8fb; */ } .installation-gallery__intro { margin-bottom: 34px; text-align: center; } .installation-gallery__eyebrow { margin: 0 0 12px; color: #34414d; font-size: 0.8125rem; font-weight: 400; line-height: 1.4; } .installation-gallery__title { max-width: 760px; margin: 0 auto; color: #17222d; font-size: clamp(1.65rem, 2.4vw, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; } .installation-gallery__lead { max-width: 790px; margin: 14px auto 0; color: #6b7782; font-size: 0.9375rem; line-height: 1.5; } .installation-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .installation-gallery__mobile-tabs { display: none; } .installation-gallery__item { min-width: 0; text-align: center; } .installation-gallery__image { display: block; width: 100%; aspect-ratio: 8 / 7; height: auto; object-fit: cover; border-radius: 8px; } .installation-gallery__label { display: inline-flex; align-items: center; justify-content: center; min-width: 116px; margin: 0 auto 16px; padding: 7px 18px; border: 1px solid #3478b8; border-radius: 999px; color: #3478b8; font-size: 0.875rem; font-weight: 500; line-height: 1.2; } @media (max-width: 767px) { .proudct_webflow_container { width: calc(100% - 24px); } .installation-gallery { padding: 42px 0 48px; } .installation-gallery__intro { margin-bottom: 24px; } .installation-gallery__lead { margin-top: 14px; font-size: 0.875rem; } .installation-gallery__grid { display: block; } .installation-gallery__mobile-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; } .installation-gallery__tab { min-width: 0; padding: 8px 6px; border: 1px solid #3478b8; border-radius: 999px; background: transparent; color: #3478b8; font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; } .installation-gallery__tab[aria-selected="true"] { background: #3478b8; color: #fff; } .installation-gallery__tab:focus-visible { outline: 2px solid #17222d; outline-offset: 2px; } .installation-gallery__item { display: none; height: auto; } .installation-gallery__item.is-active { display: block; } .installation-gallery__label { display: none; } .installation-gallery__image { border-radius: 6px; } } @media screen and (max-width: 767px) { .cb8_05_back_01._02 { justify-content: center; align-items: center; display: flex; } .flex_center._05 { align-items: stretch; } } .heading.u-text-gray { color: #9c9c9b; } .heading_wf_2strong.u-text-blue { color: rgb(55, 141, 255); } .heading_wf_2.u-text-gray { color: #9c9c9b; } .normal_text.u-text-gray { color: #9c9c9b; } .u-text-white { color: white; } .u-text-blue { color: #378dff !important; } .u-text-gray { color: #9c9c9b; } .switch { display: block; opacity: 0; max-height: 0; overflow: hidden; pointer-events: none; } .switch.active { opacity: 1; max-height: 2000px; pointer-events: auto; } .with_aov, .without_aov { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(23, 27, 51, 0.35); color: rgba(255, 255, 255, 0.7); cursor: pointer; transition: background 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } .hidden_mob { display: block !important; } .hidden_pc { display: none !important; } .segmented-control { position: relative; display: flex; width: auto; height: 60px; background: rgba(0, 0, 0, 0.2); border-radius: 12px; padding: 4px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); align-items: center; } .segmented-control input { display: none; } .segmented-control label { flex: 1; text-align: center; line-height: 44px; cursor: pointer; z-index: 2; font-weight: 600; font-size: 14px; color: rgba(255, 255, 255, 0.6); transition: color 0.3s ease; } /* 滑块本体 */ .selection-slider { position: absolute; width: calc(50% - 4px); height: 44px; background: #3b82f6; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); z-index: 1; } /* 状态切换逻辑 */ #with-aov:checked~.selection-slider { transform: translateX(0); } #without-aov:checked~.selection-slider { transform: translateX(100%); } #with-aov:checked~label[for="with-aov"], #without-aov:checked~label[for="without-aov"] { color: var(#333); } .focus { /* background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.28) 100%); */ border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); } .cb8_lite_4k_02 img { width: auto; } .cb8_lite_4k_03-2 img { width: auto; } .cb8_lite_4k_04 img { width: auto; } .reverse-vertical { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); line-height: 1.5; /* 调整字间距 */ text-align: center; /* 居中对齐 */ } .focus-row { background-color: #17283f; border-radius: 12px; display: flex; min-height: 150px; /* align-items: center; */ } .focus-text { flex: 1; padding: 14px 10px 12px 14px; display: flex; flex-direction: column; justify-content: center; gap: 8px; } .focus-text h2 { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.35; font-weight: 700; } .focus-text p { margin: 0; color: var(--accent); font-family: "Bebas Neue", "Manrope", sans-serif; font-size: clamp(36px, 11.2vw, 48px); line-height: 0.84; letter-spacing: 0.3px; } .focus-text sup { font-size: 0.3em; margin-left: 2px; vertical-align: top; } .focus-device { align-items: center; width: 40%; min-width: 132px; display: flex; align-items: center; justify-content: center; padding: 10px 8px 0; background: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.07) 100%); clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%); border-radius: 12px; } .focus-device img { width: 100%; max-width: 118px; object-fit: contain; filter: drop-shadow(0 9px 13px rgba(0, 0, 0, 0.48)); } .compare__slider { left: calc(50% - 20px); position: absolute; top: 45%; z-index: 2; width: 40px; height: 40px; background: #fff; border: 0.1rem solid rgba(255, 255, 255, 0.1); box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.8); border-radius: 50%; cursor: e-resize; } .compare__slider:hover, .compare__slider:active { transform: scale(1.2); transition: all .3s ease-in-out; } .compare__slider:active { transition: none; } .compare__slider::before { content: ''; border-color: rgba(0, 0, 0, 0) #000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); border-width: 5px 7px 5px 0; margin-left: -10px; } .compare__slider::after { content: ''; border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #000; border-width: 5px 0 5px 7px; margin-left: 2px; } .compare__slider::before, .compare__slider::after { border-style: solid; content: " "; display: block; height: 0; left: 50%; margin-top: -5px; position: absolute; top: 50%; width: 0; } @media screen and (max-width: 767px) { .hidden_pc { display: block !important; } .hidden_mob { display: none !important; } } /* Base typography from class-naming-guide.md */ .Heading_1 { font-family: Roboto, "PingFang SC", "Microsoft YaHei", Roboto, sans-serif; font-size: 3.5rem; font-weight: 500; line-height: 1.12; } .Head-top-text { font-family: Roboto, "PingFang SC", "Microsoft YaHei", Roboto, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; } .normal-text { font-family: Roboto, "PingFang SC", "Microsoft YaHei", Roboto, sans-serif; font-size: 1.25rem; font-weight: 400; line-height: 1.5; } /* Size-only utilities from class-naming-guide.md */ .u-text-hero-title-56 { font-size: clamp(2rem, 5vw, 3.5rem); } .u-text-lead-18 { font-size: clamp(0.9375rem, 2vw, 1.125rem); } .u-text-caption-14 { font-size: 0.875rem; } /* Core utilities */ .u-overflow-hidden { overflow: hidden; } /* Fixed Webflow structure: section > container > row > widget > widget_row */ .proudct_webflow_container { width: min(calc(100% - 32px), 1140px); margin: 0 auto; } .row, .widget, .widget_row { width: 100%; } .widget { display: block; } /* Section block */ .pdp-tap-to-zoom { padding: 2vw 0; } /* Component block */ .tap-zoom-demo { width: min(100%, 930px); margin: 0 auto; border: 1px solid rgba(210, 221, 234, 0.92); border-radius: 28px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 24px 70px rgba(27, 54, 90, 0.14); text-align: left; } .tap-zoom-demo__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; background: #071426; cursor: default; outline: 0; touch-action: manipulation; user-select: none; } .tap-zoom-demo__scene { position: absolute; z-index: 1; inset: -1px; background-position: center; background-repeat: no-repeat; background-size: cover; opacity: 1; transform: scale(1); transition: opacity 520ms cubic-bezier(0.4, 0, 0.2, 1), transform 520ms cubic-bezier(0.4, 0, 0.2, 1); backface-visibility: hidden; transform: translateZ(0) scale(1); will-change: opacity, transform; } .tap-zoom-demo__scene--wide { z-index: 2; background-image: url("https://mfs.ezvizlife.com/mall/4e50a100b86d90de9b0866b8389d03a0.jpg"); transform-origin: 47% 40%; } .tap-zoom-demo__scene--tele { z-index: 1; background-image: url("https://mfs.ezvizlife.com/mall/399f4922a37061e50fdb332ccb37ba12.jpg"); opacity: 1; transform: translateZ(0) scale(1.035); transform-origin: 47% 40%; } .tap-zoom-demo.is-tele .tap-zoom-demo__scene--wide { opacity: 0; transform: scale(4.5); transition: none; } .tap-zoom-demo.is-tele .tap-zoom-demo__scene--tele { opacity: 1; transform: scale(1.035); } .tap-zoom-demo__shade { position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(2, 10, 20, 0.3), transparent 22%, transparent 72%, rgba(2, 10, 20, 0.4)), linear-gradient(90deg, rgba(2, 10, 20, 0.1), transparent 20%, transparent 82%, rgba(2, 10, 20, 0.1)); } .tap-zoom-demo__focal-scale { position: absolute; z-index: 8; top: 50%; left: 15px; display: grid; justify-items: center; gap: 0; padding: 5px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 22px; background: rgba(5, 16, 31, 0.56); box-shadow: 0 8px 22px rgba(3, 12, 26, 0.18); transform: translateY(-50%); backdrop-filter: blur(10px); } .tap-zoom-demo__focal-step { display: grid; width: 40px; height: 40px; align-content: center; place-items: center; border-radius: 50%; color: rgba(255, 255, 255, 0.68); font-weight: 600; line-height: 1; transition: color 180ms ease, background 180ms ease, transform 180ms ease; } .tap-zoom-demo__focal-step strong { font-size: 12px; font-weight: 600; } .tap-zoom-demo__focal-step small { margin-top: 2px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .tap-zoom-demo__focal-step.is-active { color: #172237; background: rgba(255, 255, 255, 0.94); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16); transform: scale(1.02); } .tap-zoom-demo__focal-progress { position: relative; width: 1px; height: 26px; margin: 0; overflow: visible; border-radius: 999px; background: rgba(255, 255, 255, 0.24); } .tap-zoom-demo__focal-progress-fill { position: absolute; top: 0; left: -0.5px; width: 2px; height: 0%; border-radius: inherit; background: #83dfef; box-shadow: 0 0 5px rgba(131, 223, 239, 0.62); will-change: height; } /* Refined focus target: short faded axes, rounded aperture and compact tap cue. */ .tap-zoom-demo__focus-target { position: absolute; z-index: 9; top: 40%; left: 47%; width: clamp(76px, 10vw, 96px); height: clamp(58px, 7vw, 70px); padding: 0; border: 0; outline: 0; background: transparent; cursor: pointer; transform: translate(-50%, -50%); transition: top 300ms cubic-bezier(0.22, 1, 0.36, 1), left 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1); } .tap-zoom-demo__focus-target:focus-visible { outline: 3px solid #83dfef; outline-offset: 5px; border-radius: 14px; box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.9), 0 0 0 10px rgba(131, 223, 239, 0.55); } .tap-zoom-demo__focus-target:focus-visible .tap-zoom-demo__focus-frame { border-color: #83dfef; box-shadow: inset 0 0 22px rgba(131, 223, 239, 0.18), 0 0 22px rgba(131, 223, 239, 0.8); } @media (hover: hover) and (pointer: fine) { .tap-zoom-demo.is-wide .tap-zoom-demo__focus-target:hover { transform: translate(-50%, -50%) scale(1.055); } .tap-zoom-demo.is-wide .tap-zoom-demo__focus-target:hover .tap-zoom-demo__focus-frame { border-color: #83dfef; background: rgba(131, 223, 239, 0.06); box-shadow: inset 0 0 18px rgba(131, 223, 239, 0.14), 0 0 0 3px rgba(131, 223, 239, 0.1), 0 12px 28px rgba(4, 22, 49, 0.34); } .tap-zoom-demo.is-wide .tap-zoom-demo__focus-target:hover .tap-zoom-demo__tap-cue { opacity: 0; animation: none; transform: translate(-50%, 0) scale(0.94); } } .tap-zoom-demo__focus-axis { position: absolute; inset: 0; pointer-events: none; } .tap-zoom-demo__focus-axis::before, .tap-zoom-demo__focus-axis::after { position: absolute; top: 50%; left: 50%; content: ""; opacity: 0.62; transform: translate(-50%, -50%); transition: opacity 180ms ease; } .tap-zoom-demo__focus-axis::before { width: 190px; height: 1px; background: linear-gradient(90deg, transparent, rgba(131, 223, 239, 0.12) 18%, #83dfef 49%, #83dfef 51%, rgba(131, 223, 239, 0.12) 82%, transparent); } .tap-zoom-demo__focus-axis::after { width: 1px; height: 140px; background: linear-gradient(180deg, transparent, rgba(131, 223, 239, 0.12) 18%, #83dfef 49%, #83dfef 51%, rgba(131, 223, 239, 0.12) 82%, transparent); } .tap-zoom-demo__focus-frame { position: absolute; inset: 0; border: 1px solid rgba(131, 223, 239, 0.8); border-radius: 12px; background: rgba(131, 223, 239, 0.04); box-shadow: inset 0 0 18px rgba(131, 223, 239, 0.1), 0 0 14px rgba(131, 223, 239, 0.28), 0 8px 24px rgba(0, 0, 0, 0.16); transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; backdrop-filter: blur(0.6px); } .tap-zoom-demo__focus-corner { position: absolute; width: 15px; height: 15px; border-color: #83dfef; border-style: solid; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 6px rgba(131, 223, 239, 0.9)); } .tap-zoom-demo__focus-corner--top-left { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: 10px 0 0; } .tap-zoom-demo__focus-corner--top-right { top: -1px; right: -1px; border-width: 2px 2px 0 0; border-radius: 0 10px 0 0; } .tap-zoom-demo__focus-corner--bottom-left { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; border-radius: 0 0 0 10px; } .tap-zoom-demo__focus-corner--bottom-right { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 10px; } .tap-zoom-demo__focus-dot { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); transition: filter 180ms ease, transform 260ms ease; } .tap-zoom-demo__focus-dot::before, .tap-zoom-demo__focus-dot::after { position: absolute; top: 50%; left: 50%; border-radius: 2px; background: #83dfef; box-shadow: 0 0 7px rgba(131, 223, 239, 0.82); content: ""; transform: translate(-50%, -50%); } .tap-zoom-demo__focus-dot::before { width: 20px; height: 2px; } .tap-zoom-demo__focus-dot::after { width: 2px; height: 20px; } .tap-zoom-demo__tap-cue { position: absolute; top: calc(100% + 22px); left: 50%; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.66); border-radius: 50%; color: #fff; background: rgba(5, 16, 31, 0.62); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24), 0 0 0 4px rgba(131, 223, 239, 0.12); animation: tap-cue-float 1.7s ease-in-out infinite; opacity: 1; pointer-events: none; transform: translate(-50%, 0); transition: opacity 160ms ease, transform 160ms ease; backdrop-filter: blur(8px); } .tap-zoom-demo__tap-cue::before { position: absolute; inset: -7px; border: 1px solid rgba(131, 223, 239, 0.7); border-radius: 50%; content: ""; animation: tap-cue-ripple 1.7s ease-out infinite; } .tap-zoom-demo__tap-cue svg { width: 22px; height: 24px; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .tap-zoom-demo.is-tele .tap-zoom-demo__tap-cue { opacity: 0; animation: none; } .tap-zoom-demo.is-tele .tap-zoom-demo__focus-target { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.5); } .tap-zoom-demo__overview-button { position: absolute; z-index: 10; top: 15px; right: 15px; display: grid; width: 132px; gap: 6px; padding: 5px 5px 7px; border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 12px; color: #fff; background: rgba(5, 16, 31, 0.72); box-shadow: 0 10px 28px rgba(2, 10, 22, 0.28); font-size: 11px; font-weight: 600; opacity: 0; pointer-events: none; cursor: pointer; transform: translateY(-6px); transition: border-color 180ms ease, box-shadow 180ms ease, opacity 200ms ease, transform 200ms ease; backdrop-filter: blur(10px); } .tap-zoom-demo__overview-button:hover { border-color: rgba(131, 223, 239, 0.84); box-shadow: 0 0 0 2px rgba(131, 223, 239, 0.1), 0 12px 30px rgba(2, 10, 22, 0.34); transform: translateY(0) scale(1.025); } .tap-zoom-demo__overview-button:focus-visible { outline: 2px solid #83dfef; outline-offset: 3px; } .tap-zoom-demo__overview-preview { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background-image: url("https://mfs.ezvizlife.com/mall/4e50a100b86d90de9b0866b8389d03a0.jpg"); background-position: center; background-size: cover; } .tap-zoom-demo__overview-viewport { position: absolute; top: 40%; left: 47%; width: 28%; height: 26%; border: 1.5px solid #83dfef; border-radius: 3px; background: rgba(131, 223, 239, 0.08); box-shadow: 0 0 0 1px rgba(5, 16, 31, 0.35), 0 0 8px rgba(131, 223, 239, 0.65); transform: translate(-50%, -50%); } .tap-zoom-demo__overview-label { display: inline-flex; align-items: center; justify-content: center; gap: 5px; letter-spacing: 0.02em; } .tap-zoom-demo.is-tele .tap-zoom-demo__overview-button { opacity: 1; pointer-events: auto; transform: translateY(0); } @keyframes tap-cue-float { 0%, 100% { transform: translate(-50%, 0) translateY(1px) scale(0.96); } 50% { transform: translate(-50%, 0) translateY(-4px) scale(1.03); } } @keyframes tap-cue-ripple { 0% { opacity: 0.8; transform: scale(0.62); } 75%, 100% { opacity: 0; transform: scale(1.18); } } @media (max-width: 680px) { .proudct_webflow_container { width: min(calc(100% - 20px), 1140px); } .pdp-tap-to-zoom { padding: 38px 0 52px; } .tap-zoom-demo { border-radius: 22px; } .tap-zoom-demo__stage { aspect-ratio: 4 / 3; } .tap-zoom-demo__focal-scale { left: 9px; gap: 0; padding: 4px; } .tap-zoom-demo__focal-progress { height: 24px; } .tap-zoom-demo__focal-step { width: 38px; height: 38px; } .tap-zoom-demo__focus-target { width: 76px; height: 58px; } .tap-zoom-demo__focus-axis::before { width: 150px; } .tap-zoom-demo__focus-axis::after { height: 112px; } .tap-zoom-demo__tap-cue { top: calc(100% + 18px); width: 34px; height: 34px; } .tap-zoom-demo__overview-button { top: 10px; right: 10px; width: auto; gap: 4px; padding: 4px 4px 6px; border-radius: 10px; font-size: 10px; } .tap-zoom-demo__overview-preview { border-radius: 6px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .segmented-control label { flex: 1; text-align: center; line-height: 48px; cursor: pointer; z-index: 2; font-weight: 700; font-size: 13px; letter-spacing: 0.5px; color: rgba(255, 255, 255, 1); opacity: 0.5; transition: all 0.3s ease; } .cb8_05_back_02 { background-color: #9bcdff; } button { color: inherit; font: inherit; } .cb8_05_back_01 { background-color: #378dff; padding-left: 0; padding-right: 0; } .switch.active { opacity: 1; max-height: 2000px; pointer-events: auto; } .noevent { height: 82%; position: absolute; top: 33%; left: 0; right: 0; } @media screen and (max-width: 767px) { .aov_back { justify-content: center; align-items: center; display: flex; } } :root { --_wf-design-container---container-maxwidth: 1140px; --_wf-design-container---wf-space-1: 2vw; --_wf-design-container---bigger-minheight: 67vw; --_wf-design-container---normal-minheight: 50vw; --_wf-design-font---font-ezviz: Roboto, sans-serif; --_wf-design-font---font-akiitu: Montserrat, sans-serif; --_wf-design-font---icon_text: .875rem; --_wf-design-font---dialog_text: .875rem; --_wf-design-container---container-padding-top: 0px; --_wf-design-font---normal-text: 1.25rem; --_wf-design-font---heading-top-text: 1rem; --_wf-design-container---wf-space-2: 4vw; --_wf-design-font---h2_text: 2rem; --_wf-design-container---wf-space-3: 6vw; --_wf-design-font---wf-text-lead: 1.125rem; --_wf-design-container---wf-space-4: 8vw; --_wf-design-font---h1_text: 2.75rem; --_wf-design-container---wf-space-5: 10vw; --_wf-design-font---spec-text: 3.75rem; } .w-layout-blockcontainer { max-width: 1140px; margin-left: auto; margin-right: auto; display: block; } .w-layout-grid { grid-row-gap: 16px; grid-column-gap: 16px; grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; display: grid; } @media screen and (max-width: 991px) { .w-layout-blockcontainer { max-width: 728px; } } @media screen and (max-width: 767px) { .w-layout-blockcontainer { max-width: none; } } body { color: #333; --_wf-design-container---container-maxwidth: 1140px; --_wf-design-container---wf-space-1: 2vw; --_wf-design-container---bigger-minheight: 67vw; --_wf-design-container---normal-minheight: 50vw; --_wf-design-container---container-padding-top: 0px; --_wf-design-container---wf-space-2: 4vw; --_wf-design-container---wf-space-3: 6vw; --_wf-design-container---wf-space-4: 8vw; --_wf-design-container---wf-space-5: 10vw; font-family: Roboto, Helvetica Neue, Helvetica, sans-serif; font-size: 14px; line-height: 20px; } .proudct_webflow_container { height: auto; max-width: var(--_wf-design-container---container-maxwidth); min-height: auto; padding-top: var(--_wf-design-container---wf-space-1); padding-bottom: var(--_wf-design-container---wf-space-1); justify-content: center; align-items: center; margin-top: 0; margin-bottom: 0; display: block; } .proudct_webflow_container._05, .proudct_webflow_container._05.ps_re { height: auto; } .proudct_webflow_container.u-container-heignt-one { height: 60vw; min-height: auto; padding-top: var(--_wf-design-container---wf-space-1); padding-bottom: var(--_wf-design-container---wf-space-1); } .proudct_webflow_container.u-container-heignt-one.flex_vertical_center { display: flex; } .proudct_webflow_container.u-container-heignt-two { height: var(--_wf-design-container---bigger-minheight); min-height: auto; } .heading { color: #fff; width: 100%; font-size: 40px; } .heading.strong.color_gray { color: #9c9c9b; } .heading.strong.color_gray.no_display { opacity: 0; } .heading.u-text-white.u-text-left.strong { font-size: 60px; line-height: 100%; } .heading.u-text-white.u-text-left.strong.text-blue-gredient { opacity: 1; -webkit-text-fill-color: transparent; background-color: #0006; background-image: linear-gradient(90deg, #8ebbe3, #fff 71%); -webkit-background-clip: text; background-clip: text; } .widget { text-align: center; flex: 0 auto; justify-content: flex-start; align-items: stretch; width: 100%; height: auto; margin-left: 0; margin-right: 0; padding-top: 1vw; padding-bottom: 1vw; display: block; } .widget.display_flex.flex_center { grid-column-gap: 20px; grid-row-gap: 20px; justify-content: center; align-items: flex-end; display: flex; } .widget.no-padding-bottom { padding-bottom: 0; } .head { font-size: 4rem; line-height: 130%; } .head.text-align-left { text-align: left; text-align: left; font-family: Roboto, sans-serif; font-size: 2.75rem; } .head.text-align-left.u-text-white { font-size: 32px; } .heading_wf_2 { color: #000; text-align: center; margin-top: 0; margin-bottom: 0; margin-right: 0; font-family: Roboto, sans-serif; font-size: 2rem; font-weight: 500; line-height: 150%; } .widget_row { grid-column-gap: 16px; grid-row-gap: 16px; grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; width: 100%; display: block; position: relative; } .widget_row.have_grey_back { background-color: #eee; border-radius: 12px; } .widget_row.ps_abs-2 { z-index: 1; justify-content: center; align-items: flex-start; inset: 25% auto 0%; } .widget_row.ps_abs-2._02 { top: 17%; } .widget_row.bottom_left { margin-bottom: 3vw; } .widget_row.flex_center { justify-content: center; align-items: stretch; } .widget_row.flex_center._03 { justify-content: flex-start; align-items: stretch; } .widget_row.width_control._01 { width: 60%; margin-left: auto; margin-right: auto; } .widget_row.ps_re { flex: 0 auto; order: -9999; align-self: center; } .widget_row.ps_re.flex_01 { background-color: #0000; width: 73%; } .widget_row.flex_02 { width: 15%; } .widget_row.text-align-center { text-align: center; } .widget_row.u-div-width-60 { width: 70%; margin-left: auto; margin-right: auto; } .normal_text { color: #000; text-align: center; margin-bottom: 0; font-family: Roboto, sans-serif; font-size: 1.25rem; font-weight: 400; line-height: 150%; } .normal_text.strong.u-text-white.text-gradient { color: #6aabf7; -webkit-text-fill-color: inherit; background-clip: border-box; } .normal_text.strong.u-text-dark-blue { color: #23406e; } .normal_text.text-align-center { text-align: center; } .normal_text.bigger_size.strong { font-size: 2rem; } .normal_text.bigger_size.strong.vw_font { font-size: 1.5vw; } .normal_text.bigger_size.strong.vw_font.text_gredient_qing { -webkit-text-fill-color: transparent; background-color: #0000; background-image: linear-gradient(135deg, #a1dffb, #e5f0fd 58%); -webkit-background-clip: text; background-clip: text; } .normal_text.u-text-white.have_back_blue_gradient { background-image: linear-gradient(0deg, #5892db66, #bfdeff80); } .normal_text.bigtext { font-size: 63px; } .row { margin-top: 1vw; padding-top: 1vw; padding-bottom: 0; position: relative; } .row.hidden_desktop { display: none; } .row.have_back_grey { background-color: #fff3; border-radius: 12px; } .row.np_padding { margin-top: 0; padding-top: 0; } .icon_text { color: #000; text-align: center; margin-bottom: 0; font-family: Roboto, sans-serif; font-size: .875rem; } .icon_text.u-text-white.u-text-left.strong.vw_font, .icon_text.u-text-white.strong.vw_font { font-size: 1vw; line-height: 150%; } .icon_text.u-text-blue { color: #378dff; } .u-text-white { color: #fff; } .color_blue { color: #378dff; } .strong { font-family: Roboto, sans-serif; font-weight: 500; } .text-align-left { text-align: left; } .flex_center { grid-column-gap: 10px; grid-row-gap: 10px; justify-content: center; align-items: center; display: flex; } .flex_center._01 { grid-column-gap: 10px; grid-row-gap: 10px; } .flex_center._02 { align-items: center; } .flex_center._02.hidden_mob { justify-content: center; align-items: center; display: flex; } .flex_center.no_mob.flex_bottom { justify-content: center; align-items: flex-end; } .flex_center.full_height { height: 100%; } .ps_re { position: relative; } .ps_re.text-align-right { top: -20px; } .ps_re._01 { top: -50%; } .cp8_section_03 { background-color: #eee; } .cp8_section_03.ps_re { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prnatgj.jpg'); background-position: 0 0; background-size: cover; } .flex_vertical_center { justify-content: center; align-items: center; display: flex; } .ep8_section_01 { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prnkscy.jpg'); background-position: 0 0; background-size: cover; } .ep8_section_01.have_background_cover { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/pro4oa8.png'); background-position: 50% 0; } .body { --_wf-design-container---container-maxwidth: 1140px; --_wf-design-container---wf-space-1: 2vw; --_wf-design-container---bigger-minheight: 67vw; --_wf-design-container---normal-minheight: 50vw; --_wf-design-container---container-padding-top: 0px; --_wf-design-container---wf-space-2: 4vw; --_wf-design-container---wf-space-3: 6vw; --_wf-design-container---wf-space-4: 8vw; --_wf-design-container---wf-space-5: 10vw; font-family: Roboto, sans-serif; } .row-5 { margin-top: 1vw; padding-top: 1vw; padding-bottom: 0; position: relative; } .cp8_section_05 { background-image: linear-gradient(#e8f0fa, #c9dced 71%); } .display_flex { align-items: flex-start; display: flex; } .display_flex.flex_center { justify-content: center; align-items: center; } .display_flex.flex_center._03 { justify-content: flex-start; align-items: center; } .heading_top_text { color: #000; text-align: center; margin-bottom: 0; font-family: Roboto, sans-serif; font-size: 1.125rem; line-height: 150%; } .heading_top_text.text-align-left { color: #000; text-align: left; } .heading_top_text.text-align-left.color_dark_blue { color: #23406e; } .heading_top_text.u-text-white { color: #fff; font-size: 1.125rem; } .hidden_mob { display: block; } .hidden_desktop { display: none; } .pdp-layout-row { margin-top: 1vw; padding-top: 0; padding-bottom: 0; position: relative; } .pdp-layout-row.hidden_pc { display: none; } .pdp-layout-row.background_gray { background-color: #fff3; border-radius: 20px; width: 100%; padding-left: 2vw; padding-right: 2vw; } .image-26 { width: 100%; max-width: none; position: absolute; inset: 0% auto auto 0%; } .ps_abs-2 { justify-content: center; align-items: center; display: flex; position: absolute; inset: auto; } .ps_abs-2._01 { --_wf-design-container---container-maxwidth: 100vw; --_wf-design-container---wf-space-1: 4px; --_wf-design-container---bigger-minheight: 160vw; --_wf-design-container---normal-minheight: 133vw; --_wf-design-container---container-padding-top: 0px; --_wf-design-container---wf-space-2: 8px; --_wf-design-container---wf-space-3: 12px; --_wf-design-container---wf-space-4: 16px; --_wf-design-container---wf-space-5: 20px; padding-left: 6px; padding-right: 12px; top: 50%; right: 3%; } .ps_abs-2._05 { inset: -8% auto auto 24%; } .ps_abs-2._06 { inset: -8% 6% auto auto; } .u-text-accent { color: #2ed1e0; } .u-text-accent.strong { font-weight: 700; } .u-text-accent.strong._02.italic { color: #00feff; font-size: 65px; } .u-text-accent.strong._02.italic.icon_text { font-size: 1rem; font-weight: 500; } .u-text-accent.bigger_size { font-size: 65px; } .u-text-accent.bigger_size.strong { color: #93ffff; font-size: 3.5vw; } .u-text-accent.bigger_size.strong.italic { line-height: 100%; } .cb8_lite_4k_08-2 { background-color: #eee; background-image: linear-gradient(#2f4d72, #0c1c36); display: block; } .cb8_lite_4k_08-2._01 { background-image: linear-gradient(#2f4d72, #0c1c36); } .cb8_lite_4k_08-2._02 { background-color: #0c1c36; background-image: none; } .radius, .radius._02 { border-radius: 24px; } .radius._03 { border-radius: 65px; width: 100%; max-width: none; } .ps_abs { z-index: 0; position: absolute; left: 0%; right: auto; } .ps_abs._01 { top: 30%; left: auto; right: 47%; } .ps_abs._02 { padding: 4px 8px; inset: 2% auto auto 5%; } .ps_abs._02.radius { background-image: linear-gradient(#b7d5fb, #5892db); padding: 2px 20px 2px 10px; top: 10%; left: 10%; } .ps_abs._02.radius._01 { background-image: linear-gradient(#bfdeff, #1b8bfd); width: 21vw; min-width: auto; inset: auto 42vw 1vw auto; } .ps_abs._02.radius._03 { background-image: linear-gradient(#bfdeff, #1b8bfd); width: 21vw; min-width: auto; inset: auto 5% 1vw auto; } .ps_abs._02.radius.new { left: 10%; } .ps_abs._02.radius.new.nenen { background-image: linear-gradient(#b7d5fb, #5892db); } .ps_abs._02.radius.my_test { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/proe1py.png'); background-position: 0 0; background-size: auto; padding-left: 20px; } .ps_abs._03 { bottom: 20%; left: auto; right: 12%; } .ps_abs._04 { bottom: 10%; left: 15%; right: auto; } .ps_abs._05.have_back_gradient._01 { background-image: linear-gradient(0deg, #1b8bfd, #bfdeff); padding: 2px 20px 2px 10px; left: auto; right: 19.2vw; } .ps_abs._05.have_back_gradient._01.radius { background-image: linear-gradient(0deg, #1b8bfd, #bfdeff); width: 21vw; min-width: auto; top: 28%; bottom: auto; right: 42vw; } .ps_abs._06 { width: 12vw; min-width: 180px; bottom: 0; left: auto; right: 28%; } .ps_abs._06._02 { z-index: 1; width: auto; inset: auto auto 32% 72%; } .ps_abs._06._02.flex_center { bottom: 33%; } .ps_abs._06._03 { z-index: 1; width: auto; inset: auto auto 32% 40%; } .ps_abs._06._03.flex_center { bottom: 33%; } .ps_abs._07 { z-index: -1; width: 130%; max-width: none; height: auto; min-height: 74px; top: auto; bottom: -7%; left: 0; } .ps_abs.back_arrow { height: 74px; bottom: 0; left: auto; right: auto; } .ps_abs.icon._01 { left: auto; } .ps_abs.icon._01.display_flex.flex_center { grid-column-gap: 1vw; grid-row-gap: 1vw; inset: auto auto 37% 20%; } .ps_abs.icon.display_flex.flex_center._02 { top: auto; bottom: 13%; left: 36%; } .ps_abs.icon.display_flex.flex_center._03 { bottom: 13%; right: 28%; } .ps_abs.icon.display_flex.flex_center._04 { bottom: 51%; left: auto; right: 24%; } .ps_abs.icon.display_flex.flex_center._05 { bottom: 37%; left: auto; right: 48%; } .ps_abs.top { top: 10%; } .ps_abs.top.have_back_blue { background-color: #5587ff; } .ps_abs.top.have_back_blue.radius { width: 500px; padding-left: 0; padding-right: 0; left: -75px; } .ps_abs.bottom.have_back_blue.radius { background-color: #5688ff; width: 500px; bottom: 30%; left: -75px; } .ps_abs._08 { bottom: 15%; left: 10vw; } .ps_abs._09 { bottom: 35%; left: auto; right: 10vw; } .ps_abs._09.hidden_mob { right: 9vw; } .ps_abs._10 { bottom: 2px; left: 3%; } .ps_abs.cut_02.new { --_wf-design-container---container-maxwidth: 100vw; --_wf-design-container---wf-space-1: 4px; --_wf-design-container---bigger-minheight: 160vw; --_wf-design-container---normal-minheight: 133vw; --_wf-design-container---container-padding-top: 0px; --_wf-design-container---wf-space-2: 8px; --_wf-design-container---wf-space-3: 12px; --_wf-design-container---wf-space-4: 16px; --_wf-design-container---wf-space-5: 20px; padding-left: 16px; padding-right: 8px; top: 13%; left: 44%; } .ps_abs.cut_02.new_02 { z-index: 1; padding-left: 12px; padding-right: 12px; top: 30%; left: auto; right: 30%; } .italic { font-style: italic; } .have_back_gradient { background-image: linear-gradient(90deg, #1b8bfd, #bfdeff); } .have_back_gradient._02 { background-image: linear-gradient(0deg, #1b8bfd, #bfdeff); } .have_back_grey { background-color: #999; } .pdp-content-row { width: 100%; } .cb8_lite_4k_06-2 { background-color: #eee; background-image: linear-gradient(#2766ae, #7eb6e7); display: block; } .cb8_lite_4k_06-2._02 { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/pronwuz.jpg'); background-position: 50% 100%; background-size: cover; height: 65vw; position: relative; } .cb8_lite_4k_06-2.have_part_3 { background-image: linear-gradient(#74a2d4, #7eb6e7); } .hb90-dual-kit_section._01 { background-image: linear-gradient(#fff, #c8d8e9); } .hb90-dual-kit_section._02 { background-image: linear-gradient(#fff, #e3f2fe); } .text-align-right { text-align: right; } .shadow { background-image: linear-gradient(#00000080, #00000080); } .shadow.ps_abs { border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; bottom: 0%; left: 0%; } .shadow.ps_abs._01 { inset: auto 0% 0%; } .shadow.ps_abs._01.flex_center.nogap { border-radius: 0 0 12px 12px; } .shadow.ps_abs._01.flex_center.nogap.flex_left { width: 100%; } .full_size { width: 100%; max-width: none; } .icon_text-8 { color: #000; text-align: center; font-family: Roboto, sans-serif; font-size: .875rem; } .icon_text-8.strong { font-weight: 500; } .cb8_lite_4k_06-3 { background-color: #eee; display: block; } .cb8_lite_4k_06-3._01 { background-image: linear-gradient(#fff, #c8d8e9); } .grid-_1_2 { grid-column-gap: 10vw; grid-row-gap: 10vw; grid-template-rows: auto; grid-template-columns: 1fr 1fr; } .grid-_1_2._01 { place-items: center start; width: 70%; margin-left: auto; margin-right: auto; } .icon_div { position: static; } .columns-10 { grid-column-gap: 10px; grid-row-gap: 10px; flex-flow: row; justify-content: center; align-items: stretch; width: 100%; height: auto; min-height: 215px; display: flex; position: relative; } .feature-overview__item { text-align: center; flex: 0 auto; justify-content: flex-start; align-items: stretch; width: 100%; height: auto; margin-left: 0; margin-right: 0; padding-top: 1vw; padding-bottom: 1vw; display: block; } .feature-overview__item.no_padding_bottom { margin-bottom: 1vw; padding-top: 0; padding-bottom: 0; } .feature-overview__item.no_padding_bottom._02 { position: relative; } .cb8_lite_4k_background_blue { background-color: #89a9ce; border-radius: 20px; } .cb8_lite_4k_back_01 { background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg'); background-position: 0 0; background-size: auto; border-radius: 20px; flex: 0 auto; height: auto; } .cb8_lite_4k_02-2 { grid-column-gap: 16px; grid-row-gap: 16px; background-color: #adceec; grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; margin-left: auto; margin-right: auto; display: block; } .grid-4 { grid-column-gap: 10vw; grid-row-gap: 10vw; grid-template-rows: auto; grid-template-columns: 1fr 1fr; width: 76%; margin-left: auto; margin-right: auto; } .image-30 { width: 100%; max-width: none; display: block; } .cb90f_section { background-color: #eee; background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/proy1mf.jpg'); background-position: 50% 0; background-size: cover; display: block; } .link_text-2 { color: #568efa; } .ep_section_17-3 { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prp8dws.png'); background-position: 50% 0; background-size: cover; height: 50vw; display: block; } .privacy-security__item { text-align: center; flex: 0 auto; justify-content: flex-start; align-items: stretch; width: 100%; height: auto; margin-left: 0; margin-right: 0; padding-top: 1vw; padding-bottom: 1vw; display: block; } .columns-17 { justify-content: center; align-items: center; display: flex; } .column-23 { background-color: #ffffff26; border-radius: 20px; } .column-23.ep8-17 { padding: 1vw; } .section-2 { display: block; } .product-footnotes__inner { text-align: center; flex: 0 auto; justify-content: flex-start; align-items: stretch; width: 100%; height: auto; margin-left: 0; margin-right: 0; padding-top: 1vw; padding-bottom: 1vw; display: block; } .grid_3_2 { display: none; } .italic-text-3 { color: #fff; font-style: normal; font-weight: 500; } .cb8_lite_4k_05 { background-color: #2e4b70; } .columns-16 { justify-content: center; align-items: center; display: flex; } .no_display { display: none; } .always-on-video__panel { text-align: center; flex: 0 auto; justify-content: flex-start; align-items: stretch; width: 100%; height: auto; margin-left: 0; margin-right: 0; padding-top: 1vw; padding-bottom: 1vw; display: block; } .always-on-video__panel.my_set.hidden_mob { padding-left: 2vw; } .always-on-video__panel.ps_abs { position: absolute; } .always-on-video__panel.ps_abs.margin-top { margin-top: 2%; margin-left: 0%; padding-left: 2vw; } .always-on-video__panel.ps_abs._01 { padding-top: 4px; padding-bottom: 8px; inset: auto auto 0% 0%; } .always-on-video__panel.ps_re { width: 100%; position: relative; left: 0%; } .proudct_webflow_container-16 { justify-content: center; align-items: center; max-width: 1140px; height: auto; min-height: auto; margin-top: 0; margin-bottom: 0; padding-top: 1vw; padding-bottom: 1vw; display: block; } .proudct_webflow_container-16.cb8_lite_section_05 { max-width: 1200px; } .have_back_blue_gradient { background-image: linear-gradient(#b7d5fb, #5892db); border-radius: 12px; padding-left: 8px; padding-right: 8px; } .img_width_control._01 { width: 16%; } .color_dark_blue { color: #23406e; } .image-1 { width: 100%; max-width: none; position: absolute; inset: 0% auto auto 0%; } .u-relative { position: relative; } .icon-text { font-family: Roboto, sans-serif; font-size: .875rem; font-weight: 400; line-height: 150%; } .head-top-text { font-family: Roboto, sans-serif; font-size: 1rem; font-weight: 400; line-height: 150%; } .head-top-text.u-text-white { text-align: center; } .normal-text { font-family: Roboto, sans-serif; font-size: 1.25rem; font-weight: 400; line-height: 150%; } .heading_1 { font-family: Roboto, sans-serif; font-size: 3.5rem; font-weight: 500; line-height: 150%; } .u-text-note-12 { font-size: .75rem; } .u-text-caption-14 { font-size: .875rem; } .u-text-body-16 { font-size: 1rem; } .u-text-lead-18 { font-size: 1.125rem; } .u-text-card-title-20 { font-size: 1.25rem; } .u-text-subtitle-24 { font-size: 1.5rem; } .u-text-section-title-32 { font-size: 2rem; } .u-text-feature-title-40 { font-size: 2.5rem; } .u-text-hero-title-56 { font-size: 3.5rem; } .u-absolute { position: absolute; } .u-fixed { position: fixed; } .u-sticky { position: sticky; } .u-inset-0 { inset: 0; } .u-block { display: block; } .u-flex { display: flex; } .u-grid { display: grid; } .u-grid.grid_2 { grid-template-rows: auto; } .u-grid.grid_2.desplay_left { place-items: center start; } .u-hidden { display: none; } .u-flex-column { flex-direction: column; } .u-flex-wrap { flex-wrap: wrap; } .u-items-center { align-items: center; } .u-items-end { align-items: flex-end; } .u-justify-center { justify-content: center; } .u-justify-between { justify-content: space-between; } .u-text-left { text-align: left; } .u-text-center { text-align: center; } .u-text-right { text-align: right; } .u-width-full { width: 100%; } .u-height-full { height: 100%; } .u-max-width-full { max-width: 100%; } .u-object-cover { object-fit: cover; } .u-object-contain { object-fit: contain; } .u-overflow-hidden { overflow: hidden; } .u-text-muted { color: #657386; } .u-bg-white { background-color: #fff; } .u-bg-dark { background-color: #071426; } .u-flex-center { justify-content: center; align-items: center; display: flex; } .u-absolute-fill { position: absolute; inset: 0; } .u-absolute-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .u-gap-2 { gap: 8px; } .u-gap-4 { gap: 16px; } .u-gap-6 { gap: 24px; } .u-gap-8 { gap: 32px; } .u-mt-4 { margin-top: 16px; } .u-mt-8 { margin-top: 32px; } .u-mb-4 { margin-bottom: 16px; } .u-mb-8 { margin-bottom: 32px; } .u-p-4 { padding: 16px; } .u-p-8 { padding: 32px; } .u-px-4 { padding-left: 16px; padding-right: 16px; } .u-py-8 { padding-top: 32px; padding-bottom: 32px; } .zoom-indicator { z-index: 2; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background-color: #071426b8; border: 1px solid #ffffff73; border-radius: 999px; min-width: 52px; min-height: 52px; padding: 8px 12px; font-weight: 500; line-height: 1; } .dialog_text.u-text-white { margin-bottom: 0; font-size: 1rem; } .dialog_text.u-text-white.offset_ps_re { z-index: 1; margin-bottom: 0; font-size: 14px; line-height: 150%; position: relative; top: 5px; } .dialog_text.u-text-white.offset_ps_re._02 { top: 15px; } .full_size_width { width: 100%; max-width: none; } .adv_03 { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prphfan.png'); background-position: 0%; background-size: cover; border-radius: 12px; } .adv_04 { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prppt3p.png'); background-position: 0 0; background-size: cover; border-radius: 12px; } .adv_05 { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prpyexe.png'); background-position: 0 0; background-size: cover; border-radius: 12px; } .adv_01 { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prq6qhd.png'); background-position: 100%; background-size: cover; border-radius: 12px; } .adv_07 { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prqfk5m.png'); background-position: 100%; background-size: cover; } .adv_09 { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prqo5z0.png'); background-position: 50% 100%; background-size: cover; border-radius: 12px; } .adv_back_gredient { background-image: linear-gradient(90deg, #f0f8ff, #aad3f4); border-radius: 12px; } .u-text-dark-blue { color: #23406e; } .cb90f_section_04.have_back_part_1 { background-image: linear-gradient(#4079be, #4079be); } .u-container-heignt-two { max-width: 1140px; height: 67vw; min-height: 67vw; } .img_back { background-image: linear-gradient(90deg, #8fb6e0, #edf6fd 83%); border-top-left-radius: 12px; border-bottom-left-radius: 12px; padding-left: 20px; } .hidden { display: block; } @media screen and (max-width: 991px) { body { --_wf-design-container---container-maxwidth: 100vw; --_wf-design-container---wf-space-1: 4px; --_wf-design-container---bigger-minheight: 160vw; --_wf-design-container---normal-minheight: 133vw; --_wf-design-container---container-padding-top: 0px; --_wf-design-container---wf-space-2: 8px; --_wf-design-container---wf-space-3: 12px; --_wf-design-container---wf-space-4: 16px; --_wf-design-container---wf-space-5: 20px; } .normal_text { font-size: 14px; } } @media screen and (max-width: 767px) { .heading.strong.color_gray { font-size: 20px; } .widget { padding-left: 8px; padding-right: 8px; } .pdp-layout-row.hidden_pc { display: block; } .feature-overview__item { padding-left: 8px; padding-right: 8px; } .cb8_lite_4k_background_blue.back_04 { background-repeat: no-repeat; } .privacy-security__item, .product-footnotes__inner { padding-left: 8px; padding-right: 8px; } .no_display { opacity: 0; } .always-on-video__panel { padding-left: 8px; padding-right: 8px; } } @media screen and (max-width: 479px) { body { --_wf-design-container---container-maxwidth: 100vw; --_wf-design-container---wf-space-1: 4px; --_wf-design-container---bigger-minheight: 160vw; --_wf-design-container---normal-minheight: 133vw; --_wf-design-container---container-padding-top: 0px; --_wf-design-container---wf-space-2: 8px; --_wf-design-container---wf-space-3: 12px; --_wf-design-container---wf-space-4: 16px; --_wf-design-container---wf-space-5: 20px; } .proudct_webflow_container { --_wf-design-container---container-maxwidth: 100vw; --_wf-design-container---wf-space-1: 4px; --_wf-design-container---bigger-minheight: 160vw; --_wf-design-container---normal-minheight: 133vw; --_wf-design-container---container-padding-top: 0px; --_wf-design-container---wf-space-2: 8px; --_wf-design-container---wf-space-3: 12px; --_wf-design-container---wf-space-4: 16px; --_wf-design-container---wf-space-5: 20px; height: auto; min-height: auto; margin-left: 0; margin-right: 0; } .proudct_webflow_container._05 { height: auto; } .proudct_webflow_container._05.ps_re { height: 133vw; min-height: 133vw; } .proudct_webflow_container.u-container-heignt-one { --_wf-design-container---container-maxwidth: 100vw; --_wf-design-container---wf-space-1: 4px; --_wf-design-container---bigger-minheight: 160vw; --_wf-design-container---normal-minheight: 133vw; --_wf-design-container---container-padding-top: 0px; --_wf-design-container---wf-space-2: 8px; --_wf-design-container---wf-space-3: 12px; --_wf-design-container---wf-space-4: 16px; --_wf-design-container---wf-space-5: 20px; } .proudct_webflow_container.u-container-heignt-one.flex_vertical_center { justify-content: center; align-items: flex-start; height: auto; min-height: 133vw; } .proudct_webflow_container.u-container-heignt-two { height: var(--_wf-design-container---normal-minheight); --_wf-design-container---container-maxwidth: 100vw; --_wf-design-container---wf-space-1: 4px; --_wf-design-container---bigger-minheight: 160vw; --_wf-design-container---normal-minheight: 133vw; --_wf-design-container---container-padding-top: 0px; --_wf-design-container---wf-space-2: 8px; --_wf-design-container---wf-space-3: 12px; --_wf-design-container---wf-space-4: 16px; --_wf-design-container---wf-space-5: 20px; } .proudct_webflow_container.u-container-heignt-two.display_flex { flex-flow: row; justify-content: center; align-items: flex-start; height: 100%; min-height: 100%; display: flex; position: static; } .heading { color: #333; text-align: center; } .heading.strong.color_gray { color: #9c9a9a; margin-bottom: 0; padding-right: 10px; font-size: 13px; } .heading.strong.color_gray.no_display { opacity: 0; } .heading.u-text-white.u-text-left { color: #fff; } .heading.u-text-white.u-text-left.strong { text-align: left; font-size: 32px; } .widget { text-align: center; padding-left: 0; padding-right: 0; } .widget.width_control_1 { width: 100%; max-width: 275px; margin-left: 0; margin-right: auto; } .widget.display_flex.flex_center { grid-column-gap: 5px; grid-row-gap: 5px; flex-flow: row; display: flex; } .widget.no_padding { padding-left: 0; padding-right: 0; } .widget.no-padding-bottom.gap_top { margin-top: 20vw; } .head { font-size: 2.75rem; } .head.text-align-left { text-align: left; font-size: 20px; } .head.text-align-left.u-text-white { font-size: 18px; } .heading_wf_2 { padding-top: var(--_wf-design-container---wf-space-1); padding-bottom: var(--_wf-design-container---wf-space-1); text-align: center; --_wf-design-container---container-maxwidth: 100vw; --_wf-design-container---wf-space-1: 4px; --_wf-design-container---bigger-minheight: 160vw; --_wf-design-container---normal-minheight: 133vw; --_wf-design-container---container-padding-top: 0px; --_wf-design-container---wf-space-2: 8px; --_wf-design-container---wf-space-3: 12px; --_wf-design-container---wf-space-4: 16px; --_wf-design-container---wf-space-5: 20px; margin-top: 0; margin-bottom: 0; margin-right: 0; font-size: 20px; font-weight: 500; display: block; } .widget_row { padding-bottom: 0; display: block; } .widget_row.ps_abs-2._02 { width: 100%; } .widget_row.flex_center._02 { justify-content: center; align-items: center; display: flex; } .widget_row.width_control._01 { width: 160px; height: 40px; } .widget_row.ps_re.flex_01 { width: 96%; } .widget_row.flex_02 { width: 20%; } .widget_row.u-div-width-60 { width: 100%; } .normal_text { padding-top: var(--_wf-design-container---wf-space-1); padding-bottom: var(--_wf-design-container---wf-space-1); --_wf-design-container---container-maxwidth: 100vw; --_wf-design-container---wf-space-1: 4px; --_wf-design-container---bigger-minheight: 160vw; --_wf-design-container---normal-minheight: 133vw; --_wf-design-container---container-padding-top: 0px; --_wf-design-container---wf-space-2: 8px; --_wf-design-container---wf-space-3: 12px; --_wf-design-container---wf-space-4: 16px; --_wf-design-container---wf-space-5: 20px; font-size: 14px; line-height: 150%; } .normal_text.strong { padding-top: var(--_wf-design-container---wf-space-1); padding-bottom: var(--_wf-design-container---wf-space-1); } .normal_text.strong.u-text-white.text-gradient { color: #6aabf7; -webkit-text-stroke-color: #0a76f4; -webkit-text-fill-color: inherit; background-image: none; background-clip: border-box; } .normal_text.strong.small_normal_text { font-size: 12px; } .normal_text.strong.text-align-left.set { font-size: 13px; } .normal_text.bigger_size { font-size: 16px; } .normal_text.bigger_size.strong { padding-top: var(--_wf-design-container---wf-space-1); padding-bottom: var(--_wf-design-container---wf-space-1); --_wf-design-container---container-maxwidth: 100vw; --_wf-design-container---wf-space-1: 4px; --_wf-design-container---bigger-minheight: 160vw; --_wf-design-container---normal-minheight: 133vw; --_wf-design-container---container-padding-top: 0px; --_wf-design-container---wf-space-2: 8px; --_wf-design-container---wf-space-3: 12px; --_wf-design-container---wf-space-4: 16px; --_wf-design-container---wf-space-5: 20px; font-size: 20px; line-height: 100%; } .normal_text.bigger_size.strong.text-gradient-qing { -webkit-text-fill-color: transparent; background-image: linear-gradient(135deg, #a2e2fd, #fff); -webkit-background-clip: text; background-clip: text; } .normal_text.bigger_size.strong.u-text-white.italic, .normal_text.bigger_size.strong.u-text-white.italic._02 { font-size: 12px; } .normal_text.bigger_size.strong.test, .normal_text.bigger_size.strong.test.italic._01 { font-size: 26px; } .normal_text.color_dark_blue.strong { padding-top: 0; padding-bottom: 0; font-weight: 500; } .normal_text.u-text-white.strong.small_size { font-size: 12px; } .normal_text.u-text-white.italic.small_size { font-size: 9px; line-height: 125%; } .normal_text.u-text-white.small-size { font-size: 12px; } .normal_text.small_normal_text { font-size: 10px; } .row { grid-column-gap: 16px; grid-row-gap: 16px; grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; display: block; } .row.hidden_desktop { display: block; } .row.hidden_desktop.transparent_back { background-color: #ffffff26; border-radius: 12px; } .row.hidden_mob { display: none; } .row.have_back_grey { background-color: #fff3; border-radius: 12px; } .icon_text { font-size: 12px; } .icon_text.u-text-white.u-text-left.strong.small_icon_text, .icon_text.u-text-white.strong.small_icon_text { padding-top: var(--_wf-design-container---wf-space-1); padding-bottom: var(--_wf-design-container---wf-space-1); --_wf-design-container---container-maxwidth: 100vw; --_wf-design-container---wf-space-1: 4px; --_wf-design-container---bigger-minheight: 160vw; --_wf-design-container---normal-minheight: 133vw; --_wf-design-container---container-padding-top: 0px; --_wf-design-container---wf-space-2: 8px; --_wf-design-container---wf-space-3: 12px; --_wf-design-container---wf-space-4: 16px; --_wf-design-container---wf-space-5: 20px; font-size: 10px; line-height: 100%; } .u-text-white.icon_text { line-height: 100%; } .flex_center { justify-content: center; align-items: center; display: flex; } .flex_center._02 { grid-column-gap: 0px; grid-row-gap: 0px; } .flex_center._02.hidden_desktop { display: flex; } .flex_center.no_mob { display: none; } .flex_center.full_height { justify-content: center; align-items: center; height: 74px; line-height: 150%; display: flex; } .flex_center.full_height.ps_re { display: flex; top: auto; bottom: -1vw; } .flex_center.hidden_in_mob { display: none; } .ps_re._01 { max-width: 19%; } .cp8_section_03 { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prqxd1e.jpg'); background-position: 0 0; background-size: cover; height: 133vw; } .cp8_section_03.ps_re { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prqxd1e.jpg'); background-position: 50% 0; } .ep8_section_01 { mix-blend-mode: normal; min-height: calc(400px / 750px * 800px); background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prr79t2.jpg'); } .ep8_section_01.have_background_cover { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prrh74b.jpg'); background-size: cover; } .display_flex.flex_center._04 { flex-flow: column; } .div-block-7 { display: block; } .heading_top_text { padding-top: var(--_wf-design-container---wf-space-1); padding-bottom: var(--_wf-design-container---wf-space-1); --_wf-design-container---container-maxwidth: 100vw; --_wf-design-container---wf-space-1: 4px; --_wf-design-container---bigger-minheight: 160vw; --_wf-design-container---normal-minheight: 133vw; --_wf-design-container---container-padding-top: 0px; --_wf-design-container---wf-space-2: 8px; --_wf-design-container---wf-space-3: 12px; --_wf-design-container---wf-space-4: 16px; --_wf-design-container---wf-space-5: 20px; font-size: 13px; } .heading_top_text.text-align-left.color_dark_blue { font-size: 12px; } .heading_top_text.u-text-white { padding-top: var(--_wf-design-container---wf-space-1); padding-bottom: var(--_wf-design-container---wf-space-1); color: #fff; --_wf-design-container---container-maxwidth: 100vw; --_wf-design-container---wf-space-1: 4px; --_wf-design-container---bigger-minheight: 160vw; --_wf-design-container---normal-minheight: 133vw; --_wf-design-container---container-padding-top: 0px; --_wf-design-container---wf-space-2: 8px; --_wf-design-container---wf-space-3: 12px; --_wf-design-container---wf-space-4: 16px; --_wf-design-container---wf-space-5: 20px; font-size: 13px; } .hidden_mob { display: none; } .hidden_desktop { display: block; } .pdp-layout-row.hidden_mob { display: none; } .pdp-layout-row.hidden_pc { display: block; } .column_no_padding { padding-left: 0; padding-right: 0; } .image-26 { z-index: -1; flex: 0 auto; width: 100%; max-width: 105px; height: 100%; display: block; left: auto; } .ps_abs-2._01 { width: 100%; padding-left: 0; padding-right: 0; inset: auto auto 10% 0%; } .ps_abs-2._04 { justify-content: center; align-items: center; width: 80%; margin-left: auto; margin-right: auto; bottom: 0; left: 0; right: 0; } .u-text-accent.strong._02.italic { font-size: 12px; } .u-text-accent.strong._02.italic.icon_text { font-size: 10px; line-height: 150%; } .u-text-accent.bigger_size.strong { font-size: 36px; } .u-text-accent.bigger_size.strong.italic { font-size: 32px; font-weight: 500; line-height: 100%; } .radius { max-width: 100%; } .radius._02 { border-radius: 20px; } .radius._03 { border-radius: 18px; } .radius._04 { border-radius: 12px; } .ps_abs._01 { width: 100%; bottom: 40%; right: auto; } .ps_abs._02.radius { background-image: linear-gradient(#bad7fc, #5793de); padding: 0 8px; top: 7%; left: 5%; } .ps_abs._02.radius._01 { width: 45vw; bottom: 11%; left: 4vw; right: auto; } .ps_abs._02.radius._03 { width: 45vw; padding: 0; bottom: 11%; left: auto; right: 0; } .ps_abs._02.radius.new { background-image: linear-gradient(#bad7fc, #5793de); } .ps_abs._02.radius.my_test { padding-left: 8px; } .ps_abs._03 { right: 3vw; } .ps_abs._04 { left: 3%; } .ps_abs._05.have_back_gradient._01.radius { width: 45vw; padding: 0; inset: auto auto 57% 4vw; } .ps_abs._06 { min-width: auto; bottom: 21%; right: 40vw; } .ps_abs._06._02 { width: 200px; left: 55%; } .ps_abs._06._02.flex_center { grid-column-gap: 4px; grid-row-gap: 4px; width: auto; padding: 0; bottom: 33%; left: 61%; } .ps_abs._06._03.flex_center { grid-column-gap: 4px; grid-row-gap: 4px; bottom: 32%; left: 20%; } .ps_abs._07 { z-index: -1; width: 38vw; min-width: auto; max-width: none; min-height: auto; margin-left: auto; margin-right: auto; inset: auto 0% 10%; } .ps_abs.back_arrow { width: 100%; height: auto; bottom: -2.8vw; } .ps_abs.back_arrow.hidden_desktop { display: block; bottom: -4.3vw; } .ps_abs.icon._01.display_flex.flex_center { left: -30%; } .ps_abs.icon.display_flex.flex_center._02 { bottom: 10%; } .ps_abs.icon.display_flex.flex_center._03 { right: 8.4vw; } .ps_abs.icon.display_flex.flex_center._04 { flex-flow: row; right: 6.9vw; } .ps_abs.icon.display_flex.flex_center._05 { right: 33.1vw; } .ps_abs.top.have_back_blue.radius { width: 50vw; left: -3vw; } .ps_abs.bottom.have_back_blue.radius { width: 60vw; bottom: 45%; left: -3vw; } .ps_abs.flex_center.nogap { grid-column-gap: 0px; grid-row-gap: 0px; } .ps_abs._08 { bottom: 25%; left: 5vw; } .ps_abs._08.hidden_desktop { bottom: 15%; } .ps_abs._09 { bottom: 3%; left: auto; right: 5vw; } .ps_abs._10 { bottom: 10%; } .ps_abs.cut_02.new { padding-left: 3vw; padding-right: 0; top: 20%; bottom: auto; left: 35%; } .ps_abs.cut_02.new_02 { padding-left: 0; padding-right: 0; inset: auto auto 20% 10%; } .pdp-content-row { display: block; } .pdp-content-row.hidden_pc.ps_re.ps-right { right: 0%; } .cb8_lite_4k_06-2._02 { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prrqoqo.jpg'); background-position: 50% 100%; height: 144vw; } .shadow.ps_abs._01.flex_center.nogap { grid-column-gap: 4px; grid-row-gap: 4px; border-radius: 0; justify-content: center; align-items: center; } .shadow.ps_abs._01.flex_center.nogap.flex_left { justify-content: flex-start; align-items: flex-end; padding-left: 10px; } .shadow.ps_abs._01.flex_center.nogap.flex_right { justify-content: flex-end; align-items: center; padding-right: 10px; } .full_size { max-width: 100%; } .icon_text-8 { font-size: 12px; } .grid-_1_2._01 { grid-column-gap: 1vw; grid-row-gap: 1vw; width: 100%; } .columns-10 { min-height: 146px; } .feature-overview__item { height: auto; padding-left: 0; padding-right: 0; } .feature-overview__item.no_padding_bottom { padding-left: 0; padding-right: 0; } .feature-overview__item.no_padding_bottom._02 { margin-top: 2vw; } .feature-overview__item._02 { padding-bottom: 0; padding-left: 0; padding-right: 0; } .feature-overview__item.height_set { height: 150px; } .cb8_lite_4k_background_blue { background-image: linear-gradient(90deg, #eaf3fc, #add0f2); border-radius: 8px; padding-left: 0; padding-right: 0; } .cb8_lite_4k_background_blue.back_04.new { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prrzi7o.png'); background-position: 50% 0; background-size: cover; border-radius: 8px; } .cb8_lite_4k_background_blue.margin_edge { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prs92d8.png'); background-position: 0 0; background-size: cover; margin-left: 4px; margin-right: 4px; } .cb8_lite_4k_background_blue.margin_edge.have_back_01 { background-position: 0%; height: 50vw; } .cb8_lite_4k_background_blue.have_back_03 { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prshcfh.png'); background-position: 0 0; background-size: cover; } .cb8_lite_4k_background_blue.have_back_04 { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prsrdq2.png'); background-position: 100%; background-size: cover; } .cb8_lite_4k_background_blue.display_flex.flex_vertical_center { flex-flow: column; justify-content: space-between; align-items: center; } .cb8_lite_4k_back_01 { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prt6szi.png'), linear-gradient(90deg, #cae5fa, #b5dbf7); background-position: 100%, 0 0; background-repeat: no-repeat, repeat; background-size: contain, auto; height: 170px; } .cb8_lite_4k_02-2 { opacity: 1; background-color: #adceec00; display: block; } .grid-4 { place-items: start center; width: 100%; } .cb90f_section { background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prtfnfm.jpg'); background-position: 0 0; background-size: cover; min-height: 133vw; } .ep_section_17-3 { --_wf-design-container---container-maxwidth: 100vw; --_wf-design-container---wf-space-1: 4px; --_wf-design-container---bigger-minheight: 160vw; --_wf-design-container---normal-minheight: 133vw; --_wf-design-container---container-padding-top: 0px; --_wf-design-container---wf-space-2: 8px; --_wf-design-container---wf-space-3: 12px; --_wf-design-container---wf-space-4: 16px; --_wf-design-container---wf-space-5: 20px; background-image: url('https://mfs.ezvizlife.com/mall/static/20260730/prtp6zz.jpg'); height: auto; min-height: 185vw; } .privacy-security__item { padding-left: 8px; padding-right: 8px; } .columns-17 { justify-content: center; align-items: center; margin-top: 40px; margin-bottom: 40px; } .product-footnotes__inner { padding-left: 8px; padding-right: 8px; } .columns-19, .columns-20 { display: none; } .grid_3_2 { grid-column-gap: 8px; grid-row-gap: 8px; grid-template-rows: auto auto auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; display: grid; } .image-31 { width: 42%; } .no_display { opacity: 0; } .div-block-11 { width: 60%; } .div-block-12 { width: 39%; } .div-block-13 { width: 67%; margin-left: auto; margin-right: auto; } .always-on-video__panel { padding-left: 0; padding-right: 0; } .always-on-video__panel.my_set { margin-top: 15vw; } .always-on-video__panel.ps_abs._01 { justify-content: center; align-items: center; width: 100%; padding-bottom: 0; inset: auto 0% 0% auto; } .always-on-video__panel.ps_re { top: 15vw; } .column-25 { line-height: 1px; } .have_back_blue_gradient { background-color: #0000; background-image: linear-gradient(#bad7fc, #5793de); border-radius: 12px; padding-left: 8px; padding-right: 8px; } .img_width_control { width: 30%; } .img_width_control._02 { width: 60%; } .img_width_control._01 { width: 24%; } .image-35 { width: 100%; max-width: none; } .mob_width_set { max-width: 50%; } .bold-text-12, .bold-text-13, .bold-text-14, .bold-text-15, .bold-text-16 { font-weight: 500; } .margin-left-set { margin-left: 30%; } .image-1 { z-index: 0; flex: 0 auto; width: 80%; height: 100%; display: block; left: auto; } .icon-text { font-size: 13px; } .head-top-text { font-size: 12px; } .head-top-text.u-text-white { margin-bottom: 0; } .normal-text { font-size: 14px; } .heading_1 { font-size: 24px; } .u-text-note-12 { font-size: 12px; } .u-text-caption-14 { font-size: 13px; } .u-text-body-16 { font-size: 14px; } .u-text-lead-18 { font-size: 16px; } .u-text-card-title-20 { font-size: 18px; } .u-text-subtitle-24 { font-size: 20px; } .u-text-section-title-32 { font-size: 24px; } .u-text-feature-title-40 { font-size: 28px; } .u-text-hero-title-56 { font-size: 32px; } .u-grid.grid_2 { grid-column-gap: 4px; grid-row-gap: 4px; grid-template-rows: auto; place-items: center; } .dialog_text { font-size: 10px; font-weight: 400; line-height: 150%; } .dialog_text.u-text-white { margin-bottom: 0; } .dialog_text.u-text-white.offset_ps_re { z-index: 1; padding-left: 0; font-size: 10px; position: relative; top: 0; left: 6px; } .dialog_text.u-text-white.offset_ps_re._01 { padding-left: 1vw; } .dialog_text.u-text-white.offset_ps_re._03 { padding-right: 4vw; } .dialog_text.u-text-white.ps_re.z-_ndex_set { z-index: 1; padding-top: 7px; padding-left: 4px; padding-right: 4px; font-size: 10px; } .full_size_width { max-width: 100%; } .text-span { font-size: 26px; } .hidden { display: block; } .list { padding-left: 10px; } #w-node-_18b0d6e5-9b89-b973-9005-af938a6e477d-5295909c { grid-area: span 1 / span 1 / span 1 / span 1; align-self: center; } }